[core] Begin removing IE 11-related code

[iammminzzy]

• I have followed (at least) the PR section of the contributing guide.

See #14420.
Per #41611 (comment) I have cherry-picked code changes from #41611 into a separate PR:

• remove legacy bundle
• remove workarounds for IE 11

[mui-bot]

Netlify deploy preview

https://deploy-preview-41709--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 974c9ec

[ZeeshanTamboli]

Thanks for the PR.

Could you please remove the no IE 11 support comment statement from the .eslintrc.js file at https://github.com/mui/material-ui/blob/next/.eslintrc.js#L167. We can handle this in the current PR.

Also, I've noticed that you haven't removed all instances of IE11 from the JS/TS code (not CSS), but I believe we can address that in separate PRs.

[ZeeshanTamboli]

@iammminzzy Apologies for not mentioning this in the previous review, but could you also address the following tasks in this PR:

1. Replace stableSort in the following locations:

   • Joy UI Table demo: https://github.com/mui/material-ui/blob/next/docs/data/joy/components/table/TableSortAndSelection.tsx#L101
   • Order dashboard template in Joy UI: https://github.com/mui/material-ui/blob/next/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx#L249
   • Enhanced Table demo: https://github.com/mui/material-ui/blob/next/docs/data/material/components/table/EnhancedTable.tsx#L95
   • Folder Table showcase: https://github.com/mui/material-ui/blob/next/docs/src/components/showcase/FolderTable.tsx

2. Remove the comment text The property isn't supported by IE11 from:

   • Joy UI Avatar component: https://github.com/mui/material-ui/blob/next/packages/mui-joy/src/Avatar/Avatar.tsx#L79

3. Remove the comment text ⚠️ sticky is not supported by IE11. from:

   • Material UI AppBar component: https://github.com/mui/material-ui/blob/next/packages/mui-material/src/AppBar/AppBar.js#L73

4. Remove the comment text The property isn't supported by IE11. from:

   • Material UI Avatar component: https://github.com/mui/material-ui/blob/next/packages/mui-material/src/Avatar/Avatar.js#L89

5. Remove the comment from:

   • Material UI CardMedia component: https://github.com/mui/material-ui/blob/next/packages/mui-material/src/CardMedia/CardMedia.js#L46

6. Replace the usage of isNaN with Number.isNaN at:

   • Material UI Tabs component: https://github.com/mui/material-ui/blob/next/packages/mui-material/src/Tabs/Tabs.js#L423

I believe these tasks can be addressed in this PR. The remaining tasks can be handled separately with thorough testing.

[NMinhNguyen]

Replace the usage of isNaN with Number.isNaN

Per the original PR description, it’s not as simple as that. If you actually analyse the code, you’ll see that what gets stored is always a number, never a NaN. The only reason isNaN works there is because it treats undefined (indicatorStyle is an empty object initially, keying into it will result in undefined) as “not a number”, but Number.isNaN won’t (it only returns true for an actual NaN). A typeof check was suggested (because it would skip over undefined) but dismissed in the original review.

[ZeeshanTamboli]

Replace the usage of isNaN with Number.isNaN

Per the original PR description, it’s not as simple as that. If you actually analyse the code, you’ll see that what gets stored is always a number, never a NaN. The only reason isNaN works there is because it treats undefined (indicatorStyle is an empty object initially, keying into it will result in undefined) as “not a number”, but Number.isNaN won’t (it only returns true for an actual NaN). A typeof check was suggested (because it would skip over undefined) but dismissed in the original review.

You're correct. It seems that the value never becomes NaN. We can simplify this by using a typeof check instead:

--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -420,9 +420,10 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
       [size]: tabMeta ? tabMeta[size] : 0,
     };

-    // IE11 support, replace with Number.isNaN
-    // eslint-disable-next-line no-restricted-globals
-    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
+    if (
+      typeof indicatorStyle[startIndicator] !== 'number' ||
+      typeof indicatorStyle[size] !== 'number'
+    ) {
       setIndicatorStyle(newIndicatorStyle);
     } else {
       const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);

Looking back at the history, I'm not sure why it was added in #8831. It appears that it never actually became the global NaN type. Changing Number.isNaN to the global isNaN was done in #11832 for IE 11 support.

I believe using a typeof check should be safe. If you're unsure about this change, we can revert it and address it separately in another PR.

[ZeeshanTamboli]

Looks good to me. We just need approval from @mui/code-infra before merging.

[Janpot]

I see nothing out of the ordinary, but let's wait for @michaldudak 's review before merging.

Some comments that are out of scope for this PR:

• Are we polyfilling .toSorted already? To do data.toStorted() instead of [...data].sort().
• Intuitively I'd expect an array sort in a render to be memoized in 99% of the cases.

[NMinhNguyen]

• Are we polyfilling .toSorted already? To do data.toStorted() instead of [...data].sort().

We did consider that but TypeScript seems to be configured with lib es2020, so using toSorted led to an error.

[DiegoAndai]

Hey @iammminzzy! Thanks for working on this.

We should add any breaking changes to the migration guide: https://github.com/iammminzzy/material-ui/blob/98494bd51919f4b299ffa864c0097f3bea134d75/docs/data/material/migration/migration-v5/migration-v5.md

May I ask you to add a section summarizing the changes on this PR and #41611