@mui/system 5.9.3 → 5.10.2

package/modern/createStyled.js

@@ -1,9 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
       _excluded2 = ["theme"],
       _excluded3 = ["theme"];
-import styledEngineStyled from '@mui/styled-engine';
+
+/* eslint-disable no-underscore-dangle */
+import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
@@ -11,6 +13,14 @@ import defaultStyleFunctionSx from './styleFunctionSx';
 
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
+} // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
+
+
+function isStringTag(tag) {
+  return typeof tag === 'string' && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96;
 }
 
 const getStyleOverrides = (name, theme) => {
@@ -78,7 +88,19 @@ export default function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp,
     styleFunctionSx = defaultStyleFunctionSx
   } = input;
+
+  const systemSx = props => {
+    const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+    return styleFunctionSx(_extends({}, props, {
+      theme
+    }));
+  };
+
+  systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
+    // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
+    processStyles(tag, styles => styles.filter(style => !style?.__mui_systemSx));
+
     const {
       name: componentName,
       slot: componentSlot,
@@ -106,6 +128,9 @@ export default function createStyled(input = {}) {
     } else if (componentSlot) {
       // any other slot specified
       shouldForwardPropOption = slotShouldForwardProp;
+    } else if (isStringTag(tag)) {
+      // for string (html) tag, preserve the behavior in emotion & styled-components.
+      shouldForwardPropOption = undefined;
     }
 
     const defaultStyledResolver = styledEngineStyled(tag, _extends({
@@ -118,7 +143,6 @@ export default function createStyled(input = {}) {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
-        // eslint-disable-next-line no-underscore-dangle
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
           let {
             theme: themeInput
@@ -159,12 +183,7 @@ export default function createStyled(input = {}) {
       }
 
       if (!skipSx) {
-        expressionsWithDefaultTheme.push(props => {
-          const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
-          return styleFunctionSx(_extends({}, props, {
-            theme
-          }));
-        });
+        expressionsWithDefaultTheme.push(systemSx);
       }
 
       const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
@@ -177,7 +196,6 @@ export default function createStyled(input = {}) {
       } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
-      // eslint-disable-next-line no-underscore-dangle
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = _ref2 => {

package/modern/cssVars/useCurrentColorScheme.js

@@ -85,8 +85,9 @@ export default function useCurrentColorScheme(options) {
         return currentState;
       }
 
-      if (typeof localStorage !== 'undefined') {
+      try {
         localStorage.setItem(modeStorageKey, newMode);
+      } catch (e) {// Unsupported
       }
 
       return _extends({}, currentState, {
@@ -111,7 +112,10 @@ export default function useCurrentColorScheme(options) {
           }
 
           processState(currentState, mode => {
-            localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            try {
+              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+            } catch (e) {// Unsupported
+            }
 
             if (mode === 'light') {
               newState.lightColorScheme = value;
@@ -141,12 +145,15 @@ export default function useCurrentColorScheme(options) {
         return newState;
       });
 
-      if (value.light) {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
-      }
+      try {
+        if (value.light) {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
+        }
 
-      if (value.dark) {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
+        if (value.dark) {
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
+        }
+      } catch (e) {// Unsupported
       }
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
@@ -172,19 +179,22 @@ export default function useCurrentColorScheme(options) {
   }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
 
   React.useEffect(() => {
-    if (state.mode) {
-      localStorage.setItem(modeStorageKey, state.mode);
-    }
-
-    processState(state, mode => {
-      if (mode === 'light') {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
+    try {
+      if (state.mode) {
+        localStorage.setItem(modeStorageKey, state.mode);
       }
 
-      if (mode === 'dark') {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
-      }
-    });
+      processState(state, mode => {
+        if (mode === 'light') {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
+        }
+
+        if (mode === 'dark') {
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
+        }
+      });
+    } catch (e) {// Unsupported
+    }
   }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
 
   React.useEffect(() => {

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.3
+/** @license MUI v5.10.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -53,4 +53,6 @@ export { default as createContainer } from './Container/createContainer';
 export { default as Container } from './Container';
 export * from './Container';
 export { default as Unstable_Grid } from './Unstable_Grid/Grid';
-export * from './Unstable_Grid';
+export * from './Unstable_Grid';
+export { default as Stack } from './Stack/Stack';
+export * from './Stack';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.9.3",
+  "version": "5.10.2",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -20,7 +20,7 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "https://mui.com/system/basics/",
+  "homepage": "https://mui.com/system/getting-started/overview/",
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/mui"
@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@mui/private-theming": "^5.9.3",
-    "@mui/styled-engine": "^5.8.7",
+    "@mui/styled-engine": "^5.10.2",
     "@mui/types": "^7.1.5",
     "@mui/utils": "^5.9.3",
     "clsx": "^1.2.1",

package/spacing.d.ts

@@ -58,4 +58,10 @@ export const padding: SimpleStyleFunction<
   | 'paddingBlockEnd'
 >;
 
+export type SpacingValueType = string | number | null | undefined;
+export function getValue(
+  transformer: (prop: SpacingValueType) => SpacingValueType,
+  propValue: SpacingValueType,
+): SpacingValueType;
+
 export type PaddingProps = PropsFor<typeof padding>;

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};