[core] Begin removing IE 11-related code

.browserslistrc

@@ -72,66 +72,6 @@ safari 15.4
 samsung 23
 samsung 22
 
-[legacy]
-ie 11
-and_chr 122
-and_chr 121
-and_ff 123
-and_ff 122
-and_qq 14.9
-and_uc 15.5
-android 122
-android 121
-chrome 122
-chrome 121
-chrome 120
-chrome 119
-chrome 109
-edge 122
-edge 121
-firefox 123
-firefox 122
-firefox 115
-ios_saf 17.4
-ios_saf 17.3
-ios_saf 17.2
-ios_saf 17.1
-ios_saf 17.0
-ios_saf 16.6-16.7
-ios_saf 16.5
-ios_saf 16.4
-ios_saf 16.3
-ios_saf 16.2
-ios_saf 16.1
-ios_saf 16.0
-ios_saf 15.6-15.8
-ios_saf 15.5
-ios_saf 15.4
-kaios 3.0-3.1
-kaios 2.5
-op_mini all
-op_mob 80
-opera 108
-opera 107
-opera 106
-safari 17.4
-safari 17.3
-safari 17.2
-safari 17.1
-safari 17.0
-safari 16.6
-safari 16.5
-safari 16.4
-safari 16.3
-safari 16.2
-safari 16.1
-safari 16.0
-safari 15.6
-safari 15.5
-safari 15.4
-samsung 23
-samsung 22
-
 # snapshot of `npx browserslist "maintained node versions"`
 # On update check all #stable-snapshot markers
 [node]

.eslintrc.js

@@ -164,7 +164,7 @@ module.exports = {
     'react/state-in-constructor': 'off',
     // stylistic opinion. For conditional assignment we want it outside, otherwise as static
     'react/static-property-placement': 'off',
-    // noopener is enough, no IE 11 support
+    // noopener is enough
     // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md#rule-options
     'react/jsx-no-target-blank': ['error', { allowReferrer: true }],
 

babel.config.js

@@ -13,7 +13,7 @@ const productionPlugins = [
 ];
 
 module.exports = function getBabelConfig(api) {
-  const useESModules = api.env(['regressions', 'legacy', 'modern', 'stable', 'rollup']);
+  const useESModules = api.env(['regressions', 'modern', 'stable', 'rollup']);
 
   const defaultAlias = {
     '@mui/material': resolveAliasPath('./packages/mui-material/src'),
@@ -153,12 +153,6 @@ module.exports = function getBabelConfig(api) {
           ],
         ],
       },
-      legacy: {
-        plugins: [
-          // IE11 support
-          '@babel/plugin-transform-object-assign',
-        ],
-      },
       test: {
         sourceMaps: 'both',
         plugins: [

docs/babel.config.js

@@ -32,8 +32,6 @@ module.exports = {
       },
     ],
     'babel-plugin-optimize-clsx',
-    // for IE11 support
-    '@babel/plugin-transform-object-assign',
   ],
   ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
   env: {

docs/data/joy/components/table/TableSortAndSelection.js

@@ -65,22 +65,6 @@ function getComparator(order, orderBy) {
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort(array, comparator) {
-  const stabilizedThis = array.map((el, index) => [el, index]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) {
-      return order;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-
 const headCells = [
   {
     id: 'name',
@@ -348,7 +332,8 @@ export default function TableSortAndSelection() {
           rowCount={rows.length}
         />
         <tbody>
-          {stableSort(rows, getComparator(order, orderBy))
+          {[...rows]
+            .sort(getComparator(order, orderBy))
             .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
             .map((row, index) => {
               const isItemSelected = isSelected(row.name);

docs/data/joy/components/table/TableSortAndSelection.tsx

@@ -94,22 +94,6 @@ function getComparator<Key extends keyof any>(
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
-  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) {
-      return order;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-
 interface HeadCell {
   disablePadding: boolean;
   id: keyof Data;
@@ -390,7 +374,8 @@ export default function TableSortAndSelection() {
           rowCount={rows.length}
         />
         <tbody>
-          {stableSort(rows, getComparator(order, orderBy))
+          {[...rows]
+            .sort(getComparator(order, orderBy))
             .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
             .map((row, index) => {
               const isItemSelected = isSelected(row.name);

docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx

@@ -242,22 +242,6 @@ function getComparator<Key extends keyof any>(
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
-  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) {
-      return order;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-
 function RowMenu() {
   return (
     <Dropdown>
@@ -451,7 +435,7 @@ export default function OrderTable() {
             </tr>
           </thead>
           <tbody>
-            {stableSort(rows, getComparator(order, 'id')).map((row) => (
+            {[...rows].sort(getComparator(order, 'id')).map((row) => (
               <tr key={row.id}>
                 <td style={{ textAlign: 'center', width: 120 }}>
                   <Checkbox

docs/data/material/components/table/EnhancedTable.js

@@ -65,22 +65,6 @@ function getComparator(order, orderBy) {
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort(array, comparator) {
-  const stabilizedThis = array.map((el, index) => [el, index]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) {
-      return order;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-
 const headCells = [
   {
     id: 'name',
@@ -288,10 +272,9 @@ export default function EnhancedTable() {
 
   const visibleRows = React.useMemo(
     () =>
-      stableSort(rows, getComparator(order, orderBy)).slice(
-        page * rowsPerPage,
-        page * rowsPerPage + rowsPerPage,
-      ),
+      [...rows]
+        .sort(getComparator(order, orderBy))
+        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
     [order, orderBy, page, rowsPerPage],
   );
 

docs/data/material/components/table/EnhancedTable.tsx

@@ -88,22 +88,6 @@ function getComparator<Key extends keyof any>(
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
-  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) {
-      return order;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-
 interface HeadCell {
   disablePadding: boolean;
   id: keyof Data;
@@ -320,10 +304,9 @@ export default function EnhancedTable() {
 
   const visibleRows = React.useMemo(
     () =>
-      stableSort(rows, getComparator(order, orderBy)).slice(
-        page * rowsPerPage,
-        page * rowsPerPage + rowsPerPage,
-      ),
+      [...rows]
+        .sort(getComparator(order, orderBy))
+        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
     [order, orderBy, page, rowsPerPage],
   );
 

docs/package.json

@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "@babel/core": "^7.24.4",
-    "@babel/plugin-transform-object-assign": "^7.24.1",
     "@babel/runtime": "^7.24.4",
     "@babel/runtime-corejs2": "^7.24.1",
     "@docsearch/react": "^3.6.0",

docs/src/components/showcase/FolderTable.tsx

@@ -45,22 +45,6 @@ function getComparator<Key extends keyof any>(
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
-  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) {
-      return order;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-
 function formatSize(size: number) {
   const kb = size / 1000;
   if (kb < 1000) {
@@ -138,7 +122,7 @@ export default function BasicTable() {
           </TableRow>
         </TableHead>
         <TableBody>
-          {stableSort(data, getComparator(order, orderBy)).map((row) => (
+          {[...data].sort(getComparator(order, orderBy)).map((row) => (
             <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
               <TableCell component="th" scope="row">
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>