@mui/material 5.10.13 → 5.10.15

package/modern/styles/experimental_extendTheme.js

@@ -1,20 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["colorSchemes", "cssVarPrefix"],
-      _excluded2 = ["palette"];
+  _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
 import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
-import { getOverlayAlpha } from '../Paper/Paper';
+import getOverlayAlpha from './getOverlayAlpha';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
   }
-
   const overlay = getOverlayAlpha(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
 });
-
 function assignNode(obj, keys) {
   keys.forEach(k => {
     if (!obj[k]) {
@@ -22,29 +20,24 @@ function assignNode(obj, keys) {
     }
   });
 }
-
 function setColor(obj, key, defaultValue) {
   obj[key] = obj[key] || defaultValue;
 }
-
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
   const {
-    colorSchemes: colorSchemesInput = {},
-    cssVarPrefix = 'mui'
-  } = options,
-        input = _objectWithoutPropertiesLoose(options, _excluded);
-
+      colorSchemes: colorSchemesInput = {},
+      cssVarPrefix = 'mui'
+    } = options,
+    input = _objectWithoutPropertiesLoose(options, _excluded);
   const getCssVar = createGetCssVar(cssVarPrefix);
-
   const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
-    palette: colorSchemesInput.light?.palette
-  })),
-        {
-    palette: lightPalette
-  } = _createThemeWithoutVa,
-        muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
-
+      palette: colorSchemesInput.light?.palette
+    })),
+    {
+      palette: lightPalette
+    } = _createThemeWithoutVa,
+    muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
   const {
     palette: darkPalette
   } = createThemeWithoutVars({
@@ -52,7 +45,6 @@ export default function extendTheme(options = {}, ...args) {
       mode: 'dark'
     }, colorSchemesInput.dark?.palette)
   });
-
   let theme = _extends({}, muiTheme, {
     cssVarPrefix,
     getCssVar,
@@ -79,21 +71,20 @@ export default function extendTheme(options = {}, ...args) {
       })
     })
   });
-
   Object.keys(theme.colorSchemes).forEach(key => {
-    const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
+    const palette = theme.colorSchemes[key].palette;
 
+    // attach black & white channels to common node
     if (key === 'light') {
       setColor(palette.common, 'background', '#fff');
       setColor(palette.common, 'onBackground', '#000');
     } else {
       setColor(palette.common, 'background', '#000');
       setColor(palette.common, 'onBackground', '#fff');
-    } // assign component variables
-
+    }
 
+    // assign component variables
     assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
-
     if (key === 'light') {
       setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
@@ -175,9 +166,7 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
       setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
       setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
-
       setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
-
       setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
       setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
       setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
@@ -215,43 +204,40 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     }
+    palette.background.defaultChannel = colorChannel(palette.background.default); // MUI X - DataGrid needs this token.
 
     palette.common.backgroundChannel = colorChannel(palette.common.background);
     palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
     palette.dividerChannel = colorChannel(palette.divider);
     Object.keys(palette).forEach(color => {
-      const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
+      const colors = palette[color];
 
+      // Color palettes: primary, secondary, error, info, success, and warning
       if (colors.main) {
         palette[color].mainChannel = colorChannel(colors.main);
       }
-
       if (colors.light) {
         palette[color].lightChannel = colorChannel(colors.light);
       }
-
       if (colors.dark) {
         palette[color].darkChannel = colorChannel(colors.dark);
       }
-
       if (colors.contrastText) {
         palette[color].contrastTextChannel = colorChannel(colors.contrastText);
-      } // Text colors: text.primary, text.secondary
-
+      }
 
+      // Text colors: text.primary, text.secondary
       if (colors.primary) {
         palette[color].primaryChannel = colorChannel(colors.primary);
       }
-
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
-      } // Action colors: action.active, action.selected
-
+      }
 
+      // Action colors: action.active, action.selected
       if (colors.active) {
         palette[color].activeChannel = colorChannel(colors.active);
       }
-
       if (colors.selected) {
         palette[color].selectedChannel = colorChannel(colors.selected);
       }

package/modern/styles/getOverlayAlpha.js

@@ -0,0 +1,11 @@
+// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
+const getOverlayAlpha = elevation => {
+  let alphaValue;
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+  return (alphaValue / 100).toFixed(2);
+};
+export default getOverlayAlpha;

package/modern/styles/index.js

@@ -11,11 +11,16 @@ export { default as useThemeProps } from './useThemeProps';
 export { default as styled } from './styled';
 export { default as experimentalStyled } from './styled';
 export { default as ThemeProvider } from './ThemeProvider';
-export { StyledEngineProvider } from '@mui/system'; // The legacy utilities from @mui/styles
+export { StyledEngineProvider } from '@mui/system';
+// The legacy utilities from @mui/styles
 // These are just empty functions that throws when invoked
-
 export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
-export { default as experimental_extendTheme } from './experimental_extendTheme';
+export { default as experimental_extendTheme } from './experimental_extendTheme';
+export { default as getOverlayAlpha } from './getOverlayAlpha';
+
+// Private methods for creating parts of the theme
+export { default as private_createTypography } from './createTypography';
+export { default as private_excludeVariablesFromRoot } from './excludeVariablesFromRoot';

package/modern/styles/responsiveFontSizes.js

@@ -8,41 +8,34 @@ export default function responsiveFontSizes(themeInput, options = {}) {
     factor = 2,
     variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
   } = options;
-
   const theme = _extends({}, themeInput);
-
   theme.typography = _extends({}, theme.typography);
-  const typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem
-  // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
+  const typography = theme.typography;
 
+  // Convert between CSS lengths e.g. em->px or px->rem
+  // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
   const convert = convertLength(typography.htmlFontSize);
   const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
   variants.forEach(variant => {
     const style = typography[variant];
     const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
-
     if (remFontSize <= 1) {
       return;
     }
-
     const maxFontSize = remFontSize;
     const minFontSize = 1 + (maxFontSize - 1) / factor;
     let {
       lineHeight
     } = style;
-
     if (!isUnitless(lineHeight) && !disableAlign) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported non-unitless line height with grid alignment.
 Use unitless line heights instead.` : _formatMuiErrorMessage(6));
     }
-
     if (!isUnitless(lineHeight)) {
       // make it unitless
       lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
     }
-
     let transform = null;
-
     if (!disableAlign) {
       transform = value => alignProperty({
         size: value,
@@ -53,7 +46,6 @@ Use unitless line heights instead.` : _formatMuiErrorMessage(6));
         })
       });
     }
-
     typography[variant] = _extends({}, style, responsiveProperty({
       cssProperty: 'fontSize',
       min: minFontSize,

package/modern/styles/shadows.js

@@ -1,11 +1,10 @@
 const shadowKeyUmbraOpacity = 0.2;
 const shadowKeyPenumbraOpacity = 0.14;
 const shadowAmbientShadowOpacity = 0.12;
-
 function createShadow(...px) {
   return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(',');
-} // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
-
+}
 
+// Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 export default shadows;

package/modern/styles/useTheme.js

@@ -3,11 +3,9 @@ import { useTheme as useThemeSystem } from '@mui/system';
 import defaultTheme from './defaultTheme';
 export default function useTheme() {
   const theme = useThemeSystem(defaultTheme);
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }
-
   return theme;
 }

package/modern/useMediaQuery/useMediaQuery.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { getThemeProps, useThemeWithoutDefault as useTheme } from '@mui/system';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
+
 /**
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
  */
@@ -11,24 +12,20 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     if (noSsr && supportMatchMedia) {
       return matchMedia(query).matches;
     }
-
     if (ssrMatchMedia) {
       return ssrMatchMedia(query).matches;
-    } // Once the component is mounted, we rely on the
-    // event listeners to return the correct matches value.
-
+    }
 
+    // Once the component is mounted, we rely on the
+    // event listeners to return the correct matches value.
     return defaultMatches;
   });
   useEnhancedEffect(() => {
     let active = true;
-
     if (!supportMatchMedia) {
       return undefined;
     }
-
     const queryList = matchMedia(query);
-
     const updateMatch = () => {
       // Workaround Safari wrong implementation of matchMedia
       // TODO can we remove it?
@@ -37,9 +34,8 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
         setMatch(queryList.matches);
       }
     };
-
-    updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-
+    updateMatch();
+    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
     queryList.addListener(updateMatch);
     return () => {
       active = false;
@@ -47,11 +43,10 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     };
   }, [query, matchMedia, supportMatchMedia]);
   return match;
-} // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-
+}
 
+// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
 const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
-
 function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
   const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
   const getServerSnapshot = React.useMemo(() => {
@@ -61,14 +56,12 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
       } = ssrMatchMedia(query);
       return () => matches;
     }
-
     return getDefaultSnapshot;
   }, [getDefaultSnapshot, query, ssrMatchMedia]);
   const [getSnapshot, subscribe] = React.useMemo(() => {
     if (matchMedia === null) {
       return [getDefaultSnapshot, () => () => {}];
     }
-
     const mediaQueryList = matchMedia(query);
     return [() => mediaQueryList.matches, notify => {
       // TODO: Use `addEventListener` once support for Safari < 14 is dropped
@@ -81,13 +74,12 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
   const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   return match;
 }
-
 export default function useMediaQuery(queryInput, options = {}) {
-  const theme = useTheme(); // Wait for jsdom to support the match media feature.
+  const theme = useTheme();
+  // Wait for jsdom to support the match media feature.
   // All the browsers MUI support have this built-in.
   // This defensive check is here for simplicity.
   // Most of the time, the match media logic isn't central to people tests.
-
   const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
   const {
     defaultMatches = false,
@@ -99,19 +91,17 @@ export default function useMediaQuery(queryInput, options = {}) {
     props: options,
     theme
   });
-
   if (process.env.NODE_ENV !== 'production') {
     if (typeof queryInput === 'function' && theme === null) {
       console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
     }
   }
-
   let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  query = query.replace(/^@media( ?)/m, ''); // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+  query = query.replace(/^@media( ?)/m, '');
 
+  // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
   const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
   const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue({
@@ -119,6 +109,5 @@ export default function useMediaQuery(queryInput, options = {}) {
       match
     });
   }
-
   return match;
 }

package/modern/useMediaQuery/useMediaQueryTheme.js

@@ -1,5 +1,6 @@
-import useMediaQuery from './useMediaQuery'; // TODO v5: to deprecate in v4.x and remove in v5
+import useMediaQuery from './useMediaQuery';
 
+// TODO v5: to deprecate in v4.x and remove in v5
 export default function useMediaQueryTheme(...args) {
   return useMediaQuery(...args);
 }

package/modern/usePagination/usePagination.js

@@ -5,85 +5,88 @@ import { unstable_useControlled as useControlled } from '@mui/utils';
 export default function usePagination(props = {}) {
   // keep default values in sync with @default tags in Pagination.propTypes
   const {
-    boundaryCount = 1,
-    componentName = 'usePagination',
-    count = 1,
-    defaultPage = 1,
-    disabled = false,
-    hideNextButton = false,
-    hidePrevButton = false,
-    onChange: handleChange,
-    page: pageProp,
-    showFirstButton = false,
-    showLastButton = false,
-    siblingCount = 1
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      boundaryCount = 1,
+      componentName = 'usePagination',
+      count = 1,
+      defaultPage = 1,
+      disabled = false,
+      hideNextButton = false,
+      hidePrevButton = false,
+      onChange: handleChange,
+      page: pageProp,
+      showFirstButton = false,
+      showLastButton = false,
+      siblingCount = 1
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const [page, setPageState] = useControlled({
     controlled: pageProp,
     default: defaultPage,
     name: componentName,
     state: 'page'
   });
-
   const handleClick = (event, value) => {
     if (!pageProp) {
       setPageState(value);
     }
-
     if (handleChange) {
       handleChange(event, value);
     }
-  }; // https://dev.to/namirsab/comment/2050
-
+  };
 
+  // https://dev.to/namirsab/comment/2050
   const range = (start, end) => {
     const length = end - start + 1;
     return Array.from({
       length
     }, (_, i) => start + i);
   };
-
   const startPages = range(1, Math.min(boundaryCount, count));
   const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
-  const siblingsStart = Math.max(Math.min( // Natural start
-  page - siblingCount, // Lower boundary when page is high
-  count - boundaryCount - siblingCount * 2 - 1), // Greater than startPages
+  const siblingsStart = Math.max(Math.min(
+  // Natural start
+  page - siblingCount,
+  // Lower boundary when page is high
+  count - boundaryCount - siblingCount * 2 - 1),
+  // Greater than startPages
   boundaryCount + 2);
-  const siblingsEnd = Math.min(Math.max( // Natural end
-  page + siblingCount, // Upper boundary when page is low
-  boundaryCount + siblingCount * 2 + 2), // Less than endPages
-  endPages.length > 0 ? endPages[0] - 2 : count - 1); // Basic list of items to render
-  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+  const siblingsEnd = Math.min(Math.max(
+  // Natural end
+  page + siblingCount,
+  // Upper boundary when page is low
+  boundaryCount + siblingCount * 2 + 2),
+  // Less than endPages
+  endPages.length > 0 ? endPages[0] - 2 : count - 1);
 
-  const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages, // Start ellipsis
+  // Basic list of items to render
+  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+  const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
+  // Start ellipsis
   // eslint-disable-next-line no-nested-ternary
-  ...(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []), // Sibling pages
-  ...range(siblingsStart, siblingsEnd), // End ellipsis
+  ...(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []),
+  // Sibling pages
+  ...range(siblingsStart, siblingsEnd),
+  // End ellipsis
   // eslint-disable-next-line no-nested-ternary
-  ...(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])]; // Map the button type to its page number
+  ...(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
 
+  // Map the button type to its page number
   const buttonPage = type => {
     switch (type) {
       case 'first':
         return 1;
-
       case 'previous':
         return page - 1;
-
       case 'next':
         return page + 1;
-
       case 'last':
         return count;
-
       default:
         return null;
     }
-  }; // Convert the basic item list to PaginationItem props objects
-
+  };
 
+  // Convert the basic item list to PaginationItem props objects
   const items = itemList.map(item => {
     return typeof item === 'number' ? {
       onClick: event => {

package/modern/useScrollTrigger/useScrollTrigger.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["getTrigger", "target"];
 import * as React from 'react';
-
 function defaultTrigger(store, options) {
   const {
     disableHysteresis = false,
@@ -10,29 +9,24 @@ function defaultTrigger(store, options) {
     target
   } = options;
   const previous = store.current;
-
   if (target) {
     // Get vertical scroll
     store.current = target.pageYOffset !== undefined ? target.pageYOffset : target.scrollTop;
   }
-
   if (!disableHysteresis && previous !== undefined) {
     if (store.current < previous) {
       return false;
     }
   }
-
   return store.current > threshold;
 }
-
 const defaultTarget = typeof window !== 'undefined' ? window : null;
 export default function useScrollTrigger(options = {}) {
   const {
-    getTrigger = defaultTrigger,
-    target = defaultTarget
-  } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded);
-
+      getTrigger = defaultTrigger,
+      target = defaultTarget
+    } = options,
+    other = _objectWithoutPropertiesLoose(options, _excluded);
   const store = React.useRef();
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
   React.useEffect(() => {
@@ -41,9 +35,7 @@ export default function useScrollTrigger(options = {}) {
         target
       }, other)));
     };
-
     handleScroll(); // Re-evaluate trigger when dependencies change
-
     target.addEventListener('scroll', handleScroll, {
       passive: true
     });
@@ -51,7 +43,8 @@ export default function useScrollTrigger(options = {}) {
       target.removeEventListener('scroll', handleScroll, {
         passive: true
       });
-    }; // See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
+    };
+    // See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [target, getTrigger, JSON.stringify(other)]);
   return trigger;

package/modern/useTouchRipple/useTouchRipple.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useEventCallback } from '../utils';
-
 const useTouchRipple = props => {
   const {
     disabled,
@@ -15,17 +14,14 @@ const useTouchRipple = props => {
       rippleRef.current?.pulsate();
     }
   }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
-
   function useRippleHandler(rippleAction, skipRippleAction = disableTouchRipple) {
     return useEventCallback(event => {
       if (!skipRippleAction && rippleRef.current) {
         rippleRef.current[rippleAction](event);
       }
-
       return true;
     });
   }
-
   const keydownRef = React.useRef(false);
   const handleKeyDown = useEventCallback(event => {
     if (!disableFocusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
@@ -93,5 +89,4 @@ const useTouchRipple = props => {
     getRippleHandlers
   };
 };
-
 export default useTouchRipple;

package/modern/utils/createSvgIcon.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import SvgIcon from '../SvgIcon';
+
 /**
  * Private module reserved for @mui packages.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
   function Component(props, ref) {
@@ -15,13 +15,11 @@ export default function createSvgIcon(path, displayName) {
       children: path
     }));
   }
-
   if (process.env.NODE_ENV !== 'production') {
     // Need to set `displayName` on the inner component for React.memo.
     // React prior to 16.14 ignores `displayName` on the wrapper.
     Component.displayName = `${displayName}Icon`;
   }
-
   Component.muiName = SvgIcon.muiName;
   return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
 }

package/modern/utils/index.js

@@ -15,9 +15,9 @@ export { default as unsupportedProp } from './unsupportedProp';
 export { default as useControlled } from './useControlled';
 export { default as useEventCallback } from './useEventCallback';
 export { default as useForkRef } from './useForkRef';
-export { default as useIsFocusVisible } from './useIsFocusVisible'; // TODO: remove this export once ClassNameGenerator is stable
+export { default as useIsFocusVisible } from './useIsFocusVisible';
+// TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 export const unstable_ClassNameGenerator = {
   configure: generator => {
     console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));