@mui/system 5.0.4 → 5.0.5

package/modern/cssVars/getInitColorSchemeScript.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DEFAULT_STORAGE_KEY = 'mui-color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export default function getInitColorSchemeScript(options) {
+  const {
+    storageKey = DEFAULT_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE
+  } = options || {};
+  return /*#__PURE__*/_jsx("script", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: `(function() { try {
+        var colorScheme = localStorage.getItem('${storageKey}');
+        if (colorScheme) {
+          document.body.setAttribute('${attribute}', colorScheme);
+        }
+      } catch (e) {} })();`
+    }
+  });
+}

package/modern/cssVars/index.js

@@ -0,0 +1 @@
+export { default } from './createCssVarsProvider';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.4
+/** @license MUI v5.0.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -41,4 +41,5 @@ export { default as useThemeProps, getThemeProps } from './useThemeProps';
 export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
-export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -22,11 +22,11 @@ function styleFunctionSx(props) {
     return null;
   }
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
+  let stylesObject = styles;
 
-  if (typeof styles !== 'object') {
+  if (typeof styles === 'function') {
+    stylesObject = styles(theme);
+  } else if (typeof styles !== 'object') {
     // value
     return styles;
   }
@@ -34,8 +34,8 @@ function styleFunctionSx(props) {
   const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
   const breakpointsKeys = Object.keys(emptyBreakpoints);
   let css = emptyBreakpoints;
-  Object.keys(styles).forEach(styleKey => {
-    const value = callIfFn(styles[styleKey], theme);
+  Object.keys(stylesObject).forEach(styleKey => {
+    const value = callIfFn(stylesObject[styleKey], theme);
 
     if (typeof value === 'object') {
       if (propToStyleFunction[styleKey]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.4.1",
+    "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^16.8.6 || ^17.0.0",
     "react": "^17.0.2"
@@ -59,7 +59,6 @@
   "engines": {
     "node": ">=12.0.0"
   },
-  "gitHead": "86443310e4344ae1ce6e04f084d58e17e4d62170",
   "module": "./esm/index.js",
   "types": "./index.d.ts"
 }

package/style.d.ts

@@ -1,5 +1,5 @@
+import { CSSObject } from '@mui/styled-engine';
 import { StyleFunction } from './Box';
-import { CSSObject } from './createStyled';
 
 export interface StyleOptions<PropKey> {
   cssProperty?: PropKey | keyof React.CSSProperties | false;

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -51,7 +51,12 @@ export type SystemStyleObject<Theme extends object = {}> =
   | CSSSelectorObject<Theme>
   | null;
 
-export type SxProps<Theme extends object = {}> = SystemStyleObject<Theme>;
+/**
+ * The `SxProps` can be either object or function
+ */
+export type SxProps<Theme extends object = {}> =
+  | SystemStyleObject<Theme>
+  | ((theme: Theme) => SystemStyleObject<Theme>);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function unstable_styleFunctionSx(props: object): object;

package/styleFunctionSx/styleFunctionSx.js

@@ -37,11 +37,11 @@ function styleFunctionSx(props) {
     return null;
   }
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
+  let stylesObject = styles;
 
-  if (typeof styles !== 'object') {
+  if (typeof styles === 'function') {
+    stylesObject = styles(theme);
+  } else if (typeof styles !== 'object') {
     // value
     return styles;
   }
@@ -49,8 +49,8 @@ function styleFunctionSx(props) {
   const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
   const breakpointsKeys = Object.keys(emptyBreakpoints);
   let css = emptyBreakpoints;
-  Object.keys(styles).forEach(styleKey => {
-    const value = callIfFn(styles[styleKey], theme);
+  Object.keys(stylesObject).forEach(styleKey => {
+    const value = callIfFn(stylesObject[styleKey], theme);
 
     if (typeof value === 'object') {
       if (_getThemeValue.propToStyleFunction[styleKey]) {