[perf] Remove theme/styling allocations (#43372)

mui · Aug 21, 2024 · b66a718 · b66a718
1 parent 4b31d50
commit b66a718
Show file tree

Hide file tree

Showing 82 changed files with 5,527 additions and 5,166 deletions.
diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js
@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Collapse from '../Collapse';
 import Paper from '../Paper';
@@ -46,7 +47,7 @@ const AccordionRoot = styled(Paper, {
     ];
   },
 })(
-  ({ theme }) => {
+  memoTheme(({ theme }) => {
     const transition = {
       duration: theme.transitions.duration.shortest,
     };
@@ -91,8 +92,8 @@ const AccordionRoot = styled(Paper, {
         backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
       },
     };
-  },
-  ({ theme }) => ({
+  }),
+  memoTheme(({ theme }) => ({
     variants: [
       {
         props: (props) => !props.square,
@@ -122,7 +123,7 @@ const AccordionRoot = styled(Paper, {
         },
       },
     ],
-  }),
+  })),
 );
 
 const AccordionHeading = styled('h3', {

diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.js b/packages/mui-material/src/AccordionDetails/AccordionDetails.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
 
@@ -21,9 +22,11 @@ const AccordionDetailsRoot = styled('div', {
   name: 'MuiAccordionDetails',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-  padding: theme.spacing(1, 2, 2),
-}));
+})(
+  memoTheme(({ theme }) => ({
+    padding: theme.spacing(1, 2, 2),
+  })),
+);
 
 const AccordionDetails = React.forwardRef(function AccordionDetails(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiAccordionDetails' });

diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
@@ -28,76 +29,82 @@ const AccordionSummaryRoot = styled(ButtonBase, {
   name: 'MuiAccordionSummary',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => {
-  const transition = {
-    duration: theme.transitions.duration.shortest,
-  };
+})(
+  memoTheme(({ theme }) => {
+    const transition = {
+      duration: theme.transitions.duration.shortest,
+    };
+
+    return {
+      display: 'flex',
+      minHeight: 48,
+      padding: theme.spacing(0, 2),
+      transition: theme.transitions.create(['min-height', 'background-color'], transition),
+      [`&.${accordionSummaryClasses.focusVisible}`]: {
+        backgroundColor: (theme.vars || theme).palette.action.focus,
+      },
+      [`&.${accordionSummaryClasses.disabled}`]: {
+        opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      },
+      [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
+        cursor: 'pointer',
+      },
+      variants: [
+        {
+          props: (props) => !props.disableGutters,
+          style: {
+            [`&.${accordionSummaryClasses.expanded}`]: {
+              minHeight: 64,
+            },
+          },
+        },
+      ],
+    };
+  }),
+);
 
-  return {
+const AccordionSummaryContent = styled('div', {
+  name: 'MuiAccordionSummary',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content,
+})(
+  memoTheme(({ theme }) => ({
     display: 'flex',
-    minHeight: 48,
-    padding: theme.spacing(0, 2),
-    transition: theme.transitions.create(['min-height', 'background-color'], transition),
-    [`&.${accordionSummaryClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.focus,
-    },
-    [`&.${accordionSummaryClasses.disabled}`]: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity,
-    },
-    [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
-      cursor: 'pointer',
-    },
+    flexGrow: 1,
+    margin: '12px 0',
     variants: [
       {
         props: (props) => !props.disableGutters,
         style: {
+          transition: theme.transitions.create(['margin'], {
+            duration: theme.transitions.duration.shortest,
+          }),
           [`&.${accordionSummaryClasses.expanded}`]: {
-            minHeight: 64,
+            margin: '20px 0',
           },
         },
       },
     ],
-  };
-});
-
-const AccordionSummaryContent = styled('div', {
-  name: 'MuiAccordionSummary',
-  slot: 'Content',
-  overridesResolver: (props, styles) => styles.content,
-})(({ theme }) => ({
-  display: 'flex',
-  flexGrow: 1,
-  margin: '12px 0',
-  variants: [
-    {
-      props: (props) => !props.disableGutters,
-      style: {
-        transition: theme.transitions.create(['margin'], {
-          duration: theme.transitions.duration.shortest,
-        }),
-        [`&.${accordionSummaryClasses.expanded}`]: {
-          margin: '20px 0',
-        },
-      },
-    },
-  ],
-}));
+  })),
+);
 
 const AccordionSummaryExpandIconWrapper = styled('div', {
   name: 'MuiAccordionSummary',
   slot: 'ExpandIconWrapper',
   overridesResolver: (props, styles) => styles.expandIconWrapper,
-})(({ theme }) => ({
-  display: 'flex',
-  color: (theme.vars || theme).palette.action.active,
-  transform: 'rotate(0deg)',
-  transition: theme.transitions.create('transform', {
-    duration: theme.transitions.duration.shortest,
-  }),
-  [`&.${accordionSummaryClasses.expanded}`]: {
-    transform: 'rotate(180deg)',
-  },
-}));
+})(
+  memoTheme(({ theme }) => ({
+    display: 'flex',
+    color: (theme.vars || theme).palette.action.active,
+    transform: 'rotate(0deg)',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest,
+    }),
+    [`&.${accordionSummaryClasses.expanded}`]: {
+      transform: 'rotate(180deg)',
+    },
+  })),
+);
 
 const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiAccordionSummary' });

diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { darken, lighten } from '@mui/system/colorManipulator';
 import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
@@ -47,72 +48,74 @@ const AlertRoot = styled(Paper, {
       styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`],
     ];
   },
-})(({ theme }) => {
-  const getColor = theme.palette.mode === 'light' ? darken : lighten;
-  const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
-  return {
-    ...theme.typography.body2,
-    backgroundColor: 'transparent',
-    display: 'flex',
-    padding: '6px 16px',
-    variants: [
-      ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main && value.light)
-        .map(([color]) => ({
-          props: { colorSeverity: color, variant: 'standard' },
-          style: {
-            color: theme.vars
-              ? theme.vars.palette.Alert[`${color}Color`]
-              : getColor(theme.palette[color].light, 0.6),
-            backgroundColor: theme.vars
-              ? theme.vars.palette.Alert[`${color}StandardBg`]
-              : getBackgroundColor(theme.palette[color].light, 0.9),
-            [`& .${alertClasses.icon}`]: theme.vars
-              ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
-              : {
-                  color: theme.palette[color].main,
-                },
-          },
-        })),
-      ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main && value.light)
-        .map(([color]) => ({
-          props: { colorSeverity: color, variant: 'outlined' },
-          style: {
-            color: theme.vars
-              ? theme.vars.palette.Alert[`${color}Color`]
-              : getColor(theme.palette[color].light, 0.6),
-            border: `1px solid ${(theme.vars || theme).palette[color].light}`,
-            [`& .${alertClasses.icon}`]: theme.vars
-              ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
-              : {
-                  color: theme.palette[color].main,
-                },
-          },
-        })),
-      ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main && value.dark)
-        .map(([color]) => ({
-          props: { colorSeverity: color, variant: 'filled' },
-          style: {
-            fontWeight: theme.typography.fontWeightMedium,
-            ...(theme.vars
-              ? {
-                  color: theme.vars.palette.Alert[`${color}FilledColor`],
-                  backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`],
-                }
-              : {
-                  backgroundColor:
-                    theme.palette.mode === 'dark'
-                      ? theme.palette[color].dark
-                      : theme.palette[color].main,
-                  color: theme.palette.getContrastText(theme.palette[color].main),
-                }),
-          },
-        })),
-    ],
-  };
-});
+})(
+  memoTheme(({ theme }) => {
+    const getColor = theme.palette.mode === 'light' ? darken : lighten;
+    const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
+    return {
+      ...theme.typography.body2,
+      backgroundColor: 'transparent',
+      display: 'flex',
+      padding: '6px 16px',
+      variants: [
+        ...Object.entries(theme.palette)
+          .filter(([, value]) => value && value.main && value.light)
+          .map(([color]) => ({
+            props: { colorSeverity: color, variant: 'standard' },
+            style: {
+              color: theme.vars
+                ? theme.vars.palette.Alert[`${color}Color`]
+                : getColor(theme.palette[color].light, 0.6),
+              backgroundColor: theme.vars
+                ? theme.vars.palette.Alert[`${color}StandardBg`]
+                : getBackgroundColor(theme.palette[color].light, 0.9),
+              [`& .${alertClasses.icon}`]: theme.vars
+                ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
+                : {
+                    color: theme.palette[color].main,
+                  },
+            },
+          })),
+        ...Object.entries(theme.palette)
+          .filter(([, value]) => value && value.main && value.light)
+          .map(([color]) => ({
+            props: { colorSeverity: color, variant: 'outlined' },
+            style: {
+              color: theme.vars
+                ? theme.vars.palette.Alert[`${color}Color`]
+                : getColor(theme.palette[color].light, 0.6),
+              border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+              [`& .${alertClasses.icon}`]: theme.vars
+                ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
+                : {
+                    color: theme.palette[color].main,
+                  },
+            },
+          })),
+        ...Object.entries(theme.palette)
+          .filter(([, value]) => value && value.main && value.dark)
+          .map(([color]) => ({
+            props: { colorSeverity: color, variant: 'filled' },
+            style: {
+              fontWeight: theme.typography.fontWeightMedium,
+              ...(theme.vars
+                ? {
+                    color: theme.vars.palette.Alert[`${color}FilledColor`],
+                    backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`],
+                  }
+                : {
+                    backgroundColor:
+                      theme.palette.mode === 'dark'
+                        ? theme.palette[color].dark
+                        : theme.palette[color].main,
+                    color: theme.palette.getContrastText(theme.palette[color].main),
+                  }),
+            },
+          })),
+      ],
+    };
+  }),
+);
 
 const AlertIcon = styled('div', {
   name: 'MuiAlert',

diff --git a/packages/mui-material/src/AlertTitle/AlertTitle.js b/packages/mui-material/src/AlertTitle/AlertTitle.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Typography from '../Typography';
 import { getAlertTitleUtilityClass } from './alertTitleClasses';
@@ -22,12 +23,14 @@ const AlertTitleRoot = styled(Typography, {
   name: 'MuiAlertTitle',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => {
-  return {
-    fontWeight: theme.typography.fontWeightMedium,
-    marginTop: -2,
-  };
-});
+})(
+  memoTheme(({ theme }) => {
+    return {
+      fontWeight: theme.typography.fontWeightMedium,
+      marginTop: -2,
+    };
+  }),
+);
 
 const AlertTitle = React.forwardRef(function AlertTitle(inProps, ref) {
   const props = useDefaultProps({