|
-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],
);
diff --git a/docs/data/material/components/table/EnhancedTable.tsx b/docs/data/material/components/table/EnhancedTable.tsx
index d1fd663dc821cc..23d1f23a1c19d2 100644
--- a/docs/data/material/components/table/EnhancedTable.tsx
+++ b/docs/data/material/components/table/EnhancedTable.tsx
@@ -88,22 +88,6 @@ function getComparator(
: (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: 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],
);
diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx
index bd1694b4c40633..05de2315028999 100644
--- a/docs/src/components/showcase/FolderTable.tsx
+++ b/docs/src/components/showcase/FolderTable.tsx
@@ -45,22 +45,6 @@ function getComparator(
: (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: 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() {
- {stableSort(data, getComparator(order, orderBy)).map((row) => (
+ {[...data].sort(getComparator(order, orderBy)).map((row) => (
diff --git a/docs/src/modules/components/MaterialShowcase.js b/docs/src/modules/components/MaterialShowcase.js
index fe4db5bf344f9b..df36890c140347 100644
--- a/docs/src/modules/components/MaterialShowcase.js
+++ b/docs/src/modules/components/MaterialShowcase.js
@@ -438,18 +438,6 @@ const appList = [
},
];
-function stableSort(array, cmp) {
- const stabilizedThis = array.map((el, index) => [el, index]);
- stabilizedThis.sort((a, b) => {
- const order = cmp(a[0], b[0]);
- if (order !== 0) {
- return order;
- }
- return a[1] - b[1];
- });
- return stabilizedThis.map((el) => el[0]);
-}
-
// Returns a function that sorts reverse numerically by value of `key`
function sortFactory(key) {
return function sortNumeric(a, b) {
@@ -498,96 +486,100 @@ export default function Showcase() {
- {stableSort(
- appList.filter((item) => item[sortFunctionName] !== undefined),
- sortFunction,
- ).map((app) => (
-
- {app.image ? (
- ({
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- p: 2,
- gap: 2,
- borderRadius: 1,
- backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`,
- borderColor: 'divider',
- ...theme.applyDarkStyles({
- backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`,
+ {appList
+ .filter((item) => item[sortFunctionName] !== undefined)
+ .sort(sortFunction)
+ .map((app) => (
+
+ {app.image ? (
+ ({
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ p: 2,
+ gap: 2,
+ borderRadius: 1,
+ backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`,
borderColor: 'divider',
- }),
- })}
- >
-
- ({
- height: 'auto',
- borderRadius: '6px',
- bgcolor: 'currentColor',
- border: '1px solid',
+ ...theme.applyDarkStyles({
+ backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`,
borderColor: 'divider',
- color: 'grey.100',
- ...theme.applyDarkStyles({
- color: 'primaryDark.900',
- }),
- })}
- />
-
-
-
- {app.title}
- {app.source ? (
-
-
-
- ) : null}
-
-
- {app.description}
-
-
-
- {app.dateAdded}
-
-
-
- ) : (
-
- {t('visit')}
-
- )}
-
- ))}
+ }),
+ })}
+ >
+
+ ({
+ height: 'auto',
+ borderRadius: '6px',
+ bgcolor: 'currentColor',
+ border: '1px solid',
+ borderColor: 'divider',
+ color: 'grey.100',
+ ...theme.applyDarkStyles({
+ color: 'primaryDark.900',
+ }),
+ })}
+ />
+
+
+
+ {app.title}
+ {app.source ? (
+
+
+
+ ) : null}
+
+
+ {app.description}
+
+
+
+ {app.dateAdded}
+
+
+
+ ) : (
+
+ {t('visit')}
+
+ )}
+
+ ))}
);
From dc87608841c0f34c8601879c0b14c3e6cf82b334 Mon Sep 17 00:00:00 2001
From: Minjee Son <104430030+iammminzzy@users.noreply.github.com>
Date: Tue, 9 Apr 2024 10:13:41 +0000
Subject: [PATCH 6/9] Remove some comments
---
packages/mui-joy/src/Avatar/Avatar.tsx | 2 +-
packages/mui-material/src/AppBar/AppBar.js | 1 -
packages/mui-material/src/Avatar/Avatar.js | 2 +-
packages/mui-material/src/CardMedia/CardMedia.js | 1 -
4 files changed, 2 insertions(+), 4 deletions(-)
diff --git a/packages/mui-joy/src/Avatar/Avatar.tsx b/packages/mui-joy/src/Avatar/Avatar.tsx
index 7a355e56a0499a..5f8379b0b0915e 100644
--- a/packages/mui-joy/src/Avatar/Avatar.tsx
+++ b/packages/mui-joy/src/Avatar/Avatar.tsx
@@ -76,7 +76,7 @@ const AvatarImg = styled('img', {
width: '100%',
height: '100%',
textAlign: 'center',
- // Handle non-square image. The property isn't supported by IE11.
+ // Handle non-square image.
objectFit: 'cover',
// Hide alt text.
color: 'transparent',
diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
index ddc0befd8e9286..2d85cb28fb18e0 100644
--- a/packages/mui-material/src/AppBar/AppBar.js
+++ b/packages/mui-material/src/AppBar/AppBar.js
@@ -70,7 +70,6 @@ const AppBarRoot = styled(Paper, {
{
props: { position: 'sticky' },
style: {
- // ⚠️ sticky is not supported by IE11.
position: 'sticky',
zIndex: (theme.vars || theme).zIndex.appBar,
top: 0,
diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
index a4aea78bd739ca..051e9d0c7339fc 100644
--- a/packages/mui-material/src/Avatar/Avatar.js
+++ b/packages/mui-material/src/Avatar/Avatar.js
@@ -86,7 +86,7 @@ const AvatarImg = styled('img', {
width: '100%',
height: '100%',
textAlign: 'center',
- // Handle non-square image. The property isn't supported by IE11.
+ // Handle non-square image.
objectFit: 'cover',
// Hide alt text.
color: 'transparent',
diff --git a/packages/mui-material/src/CardMedia/CardMedia.js b/packages/mui-material/src/CardMedia/CardMedia.js
index a721e873db1b42..94d3746941c149 100644
--- a/packages/mui-material/src/CardMedia/CardMedia.js
+++ b/packages/mui-material/src/CardMedia/CardMedia.js
@@ -43,7 +43,6 @@ const CardMediaRoot = styled('div', {
{
props: { isImageComponent: true },
style: {
- // ⚠️ object-fit is not supported by IE11.
objectFit: 'cover',
},
},
From 2648542092b873f5a2edbaff2f22f289c14ca675 Mon Sep 17 00:00:00 2001
From: Minjee Son <104430030+iammminzzy@users.noreply.github.com>
Date: Tue, 9 Apr 2024 10:54:20 +0000
Subject: [PATCH 7/9] Address some ESLint violations
---
.../mui-material/src/styles/createTransitions.test.js | 9 +++------
1 file changed, 3 insertions(+), 6 deletions(-)
diff --git a/packages/mui-material/src/styles/createTransitions.test.js b/packages/mui-material/src/styles/createTransitions.test.js
index 627186dd0b23e1..1c942fb5a01917 100644
--- a/packages/mui-material/src/styles/createTransitions.test.js
+++ b/packages/mui-material/src/styles/createTransitions.test.js
@@ -130,14 +130,11 @@ describe('createTransitions', () => {
it('should return NaN when passed a negative number', () => {
const zeroHeightDurationNegativeOne = getAutoHeightDuration(-1);
- // eslint-disable-next-line no-restricted-globals
- expect(isNaN(zeroHeightDurationNegativeOne)).to.equal(true);
+ expect(Number.isNaN(zeroHeightDurationNegativeOne)).to.equal(true);
const zeroHeightDurationSmallNegative = getAutoHeightDuration(-0.000001);
- // eslint-disable-next-line no-restricted-globals
- expect(isNaN(zeroHeightDurationSmallNegative)).to.equal(true);
+ expect(Number.isNaN(zeroHeightDurationSmallNegative)).to.equal(true);
const zeroHeightDurationBigNegative = getAutoHeightDuration(-100000);
- // eslint-disable-next-line no-restricted-globals
- expect(isNaN(zeroHeightDurationBigNegative)).to.equal(true);
+ expect(Number.isNaN(zeroHeightDurationBigNegative)).to.equal(true);
});
it('should return values for pre-calculated positive examples', () => {
From 382f3c32804959298ad8fb406accd17410f1f8b8 Mon Sep 17 00:00:00 2001
From: Minjee Son <104430030+iammminzzy@users.noreply.github.com>
Date: Tue, 9 Apr 2024 11:07:15 +0000
Subject: [PATCH 8/9] Use `Number.isNaN` with a `typeof` check
---
packages/mui-material/src/Tabs/Tabs.js | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
index dfbcd083803bd0..039591c9442d2d 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -420,9 +420,14 @@ 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' &&
+ !Number.isNaN(indicatorStyle[startIndicator]) &&
+ typeof indicatorStyle[size] === 'number' &&
+ !Number.isNaN(indicatorStyle[size])
+ )
+ ) {
setIndicatorStyle(newIndicatorStyle);
} else {
const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
From 974c9ec32307b8b1641183a5a5b79aaf085454c9 Mon Sep 17 00:00:00 2001
From: Minjee Son <104430030+iammminzzy@users.noreply.github.com>
Date: Wed, 10 Apr 2024 07:19:57 +0000
Subject: [PATCH 9/9] Revert "Use `Number.isNaN` with a `typeof` check"
This reverts commit 382f3c32804959298ad8fb406accd17410f1f8b8.
---
packages/mui-material/src/Tabs/Tabs.js | 11 +++--------
1 file changed, 3 insertions(+), 8 deletions(-)
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
index 039591c9442d2d..dfbcd083803bd0 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -420,14 +420,9 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
[size]: tabMeta ? tabMeta[size] : 0,
};
- if (
- !(
- typeof indicatorStyle[startIndicator] === 'number' &&
- !Number.isNaN(indicatorStyle[startIndicator]) &&
- typeof indicatorStyle[size] === 'number' &&
- !Number.isNaN(indicatorStyle[size])
- )
- ) {
+ // IE11 support, replace with Number.isNaN
+ // eslint-disable-next-line no-restricted-globals
+ if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
setIndicatorStyle(newIndicatorStyle);
} else {
const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
|