@mui/system 9.0.0-alpha.4 → 9.0.0-beta.0

package/styleFunctionSx/styleFunctionSx.js

@@ -6,86 +6,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
-var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
-var _merge = _interopRequireDefault(require("../merge"));
+var _fastDeepAssign = _interopRequireDefault(require("@mui/utils/fastDeepAssign"));
 var _style = require("../style");
 var _breakpoints = require("../breakpoints");
 var _cssContainerQueries = require("../cssContainerQueries");
 var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
-function objectsHaveSameKeys(...objects) {
-  const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
-  const union = new Set(allKeys);
-  return objects.every(object => union.size === Object.keys(object).length);
-}
-function callIfFn(maybeFn, arg) {
-  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-}
+/* eslint-disable guard-for-in */
+
+const EMPTY_THEME = {};
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function unstable_createStyleFunctionSx() {
-  function getThemeValue(prop, val, theme, config) {
-    const props = {
-      [prop]: val,
-      theme
-    };
-    const options = config[prop];
-    if (!options) {
-      return {
-        [prop]: val
-      };
-    }
-    const {
-      cssProperty = prop,
-      themeKey,
-      transform,
-      style
-    } = options;
-    if (val == null) {
+  function styleFunctionSx(props) {
+    if (!props.sx) {
       return null;
     }
-
-    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
-    if (themeKey === 'typography' && val === 'inherit') {
-      return {
-        [prop]: val
-      };
-    }
-    const themeMapping = (0, _style.getPath)(theme, themeKey) || {};
-    if (style) {
-      return style(props);
-    }
-    const styleFromPropValue = propValueFinal => {
-      let value = (0, _style.getStyleValue)(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === 'string') {
-        // Haven't found value
-        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return {
-        [cssProperty]: value
-      };
-    };
-    return (0, _breakpoints.handleBreakpoints)(props, val, styleFromPropValue);
-  }
-  function styleFunctionSx(props) {
     const {
       sx,
-      theme = {},
+      theme = EMPTY_THEME,
       nested
-    } = props || {};
-    if (!sx) {
-      return null; // Emotion & styled-components will neglect null
-    }
+    } = props;
     const config = theme.unstable_sxConfig ?? _defaultSxConfig.default;
 
-    /*
-     * Receive `sxInput` as object or callback
-     * and then recursively check keys & values to create media query object styles.
-     * (the result will be used in `styled`)
-     */
-    function traverse(sxInput) {
+    // Pass argument without loop allocations
+    const wrapper = {
+      sx: null,
+      theme,
+      nested: true
+    };
+    function process(sxInput) {
       let sxObject = sxInput;
       if (typeof sxInput === 'function') {
         sxObject = sxInput(theme);
@@ -96,47 +45,93 @@ function unstable_createStyleFunctionSx() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
-      const breakpointsKeys = Object.keys(emptyBreakpoints);
-      let css = emptyBreakpoints;
-      Object.keys(sxObject).forEach(styleKey => {
+      const breakpoints = theme.breakpoints ?? _breakpoints.DEFAULT_BREAKPOINTS;
+      const css = (0, _breakpoints.createEmptyBreakpointObject)(breakpoints);
+      for (const styleKey in sxObject) {
         const value = callIfFn(sxObject[styleKey], theme);
-        if (value !== null && value !== undefined) {
-          if (typeof value === 'object') {
-            if (config[styleKey]) {
-              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
-            } else {
-              const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
-                theme
-              }, value, x => ({
-                [styleKey]: x
-              }));
-              if (objectsHaveSameKeys(breakpointsValues, value)) {
-                css[styleKey] = styleFunctionSx({
-                  sx: value,
-                  theme,
-                  nested: true
-                });
-              } else {
-                css = (0, _merge.default)(css, breakpointsValues);
-              }
-            }
-          } else {
-            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
-          }
+        if (value === null || value === undefined) {
+          continue;
+        }
+        if (typeof value !== 'object') {
+          setThemeValue(css, styleKey, value, theme, config);
+          continue;
+        }
+        if (config[styleKey]) {
+          setThemeValue(css, styleKey, value, theme, config);
+          continue;
+        }
+        if ((0, _breakpoints.hasBreakpoint)(breakpoints, value)) {
+          (0, _breakpoints.iterateBreakpoints)(css, props.theme, value, (mediaKey, finalValue) => {
+            css[mediaKey][styleKey] = finalValue;
+          });
+        } else {
+          wrapper.sx = value;
+          css[styleKey] = styleFunctionSx(wrapper);
         }
-      });
+      }
       if (!nested && theme.modularCssLayers) {
         return {
-          '@layer sx': (0, _cssContainerQueries.sortContainerQueries)(theme, (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css))
+          '@layer sx': (0, _cssContainerQueries.sortContainerQueries)(theme, (0, _breakpoints.removeUnusedBreakpoints)(breakpoints, css))
         };
       }
-      return (0, _cssContainerQueries.sortContainerQueries)(theme, (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css));
+      return (0, _cssContainerQueries.sortContainerQueries)(theme, (0, _breakpoints.removeUnusedBreakpoints)(breakpoints, css));
     }
-    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+    return Array.isArray(sx) ? sx.map(process) : process(sx);
   }
+  styleFunctionSx.filterProps = ['sx'];
   return styleFunctionSx;
 }
-const styleFunctionSx = unstable_createStyleFunctionSx();
-styleFunctionSx.filterProps = ['sx'];
-var _default = exports.default = styleFunctionSx;
+var _default = exports.default = unstable_createStyleFunctionSx();
+function setThemeValue(css, prop, value, theme, config) {
+  const options = config[prop];
+  if (!options) {
+    css[prop] = value;
+    return;
+  }
+  if (value == null) {
+    return;
+  }
+  const {
+    themeKey
+  } = options;
+  // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
+  if (themeKey === 'typography' && value === 'inherit') {
+    css[prop] = value;
+    return;
+  }
+  const {
+    style
+  } = options;
+  if (style) {
+    (0, _fastDeepAssign.default)(css, style({
+      [prop]: value,
+      theme
+    }));
+    return;
+  }
+  const {
+    cssProperty = prop,
+    transform
+  } = options;
+  const themeMapping = (0, _style.getPath)(theme, themeKey);
+  (0, _breakpoints.iterateBreakpoints)(css, theme, value, (mediaKey, valueFinal) => {
+    const finalValue = (0, _style.getStyleValue2)(themeMapping, transform, valueFinal, prop);
+    if (cssProperty === false) {
+      if (mediaKey) {
+        css[mediaKey] = finalValue;
+      } else {
+        (0, _fastDeepAssign.default)(css, finalValue);
+      }
+    } else {
+      // eslint-disable-next-line no-lonely-if
+      if (mediaKey) {
+        css[mediaKey][cssProperty] = finalValue;
+      } else {
+        css[cssProperty] = finalValue;
+      }
+    }
+  });
+}
+function callIfFn(maybeFn, arg) {
+  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
+}

package/styleFunctionSx/styleFunctionSx.mjs

@@ -1,83 +1,33 @@
-import capitalize from '@mui/utils/capitalize';
-import merge from "../merge/index.mjs";
-import { getPath, getStyleValue as getValue } from "../style/index.mjs";
-import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from "../breakpoints/index.mjs";
+import merge from '@mui/utils/fastDeepAssign';
+import { getPath, getStyleValue2 } from "../style/index.mjs";
+import { hasBreakpoint, iterateBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints, DEFAULT_BREAKPOINTS } from "../breakpoints/index.mjs";
 import { sortContainerQueries } from "../cssContainerQueries/index.mjs";
 import defaultSxConfig from "./defaultSxConfig.mjs";
-function objectsHaveSameKeys(...objects) {
-  const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
-  const union = new Set(allKeys);
-  return objects.every(object => union.size === Object.keys(object).length);
-}
-function callIfFn(maybeFn, arg) {
-  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-}
+
+/* eslint-disable guard-for-in */
+
+const EMPTY_THEME = {};
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function unstable_createStyleFunctionSx() {
-  function getThemeValue(prop, val, theme, config) {
-    const props = {
-      [prop]: val,
-      theme
-    };
-    const options = config[prop];
-    if (!options) {
-      return {
-        [prop]: val
-      };
-    }
-    const {
-      cssProperty = prop,
-      themeKey,
-      transform,
-      style
-    } = options;
-    if (val == null) {
+  function styleFunctionSx(props) {
+    if (!props.sx) {
       return null;
     }
-
-    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
-    if (themeKey === 'typography' && val === 'inherit') {
-      return {
-        [prop]: val
-      };
-    }
-    const themeMapping = getPath(theme, themeKey) || {};
-    if (style) {
-      return style(props);
-    }
-    const styleFromPropValue = propValueFinal => {
-      let value = getValue(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === 'string') {
-        // Haven't found value
-        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return {
-        [cssProperty]: value
-      };
-    };
-    return handleBreakpoints(props, val, styleFromPropValue);
-  }
-  function styleFunctionSx(props) {
     const {
       sx,
-      theme = {},
+      theme = EMPTY_THEME,
       nested
-    } = props || {};
-    if (!sx) {
-      return null; // Emotion & styled-components will neglect null
-    }
+    } = props;
     const config = theme.unstable_sxConfig ?? defaultSxConfig;
 
-    /*
-     * Receive `sxInput` as object or callback
-     * and then recursively check keys & values to create media query object styles.
-     * (the result will be used in `styled`)
-     */
-    function traverse(sxInput) {
+    // Pass argument without loop allocations
+    const wrapper = {
+      sx: null,
+      theme,
+      nested: true
+    };
+    function process(sxInput) {
       let sxObject = sxInput;
       if (typeof sxInput === 'function') {
         sxObject = sxInput(theme);
@@ -88,47 +38,93 @@ export function unstable_createStyleFunctionSx() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-      const breakpointsKeys = Object.keys(emptyBreakpoints);
-      let css = emptyBreakpoints;
-      Object.keys(sxObject).forEach(styleKey => {
+      const breakpoints = theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+      const css = createEmptyBreakpointObject(breakpoints);
+      for (const styleKey in sxObject) {
         const value = callIfFn(sxObject[styleKey], theme);
-        if (value !== null && value !== undefined) {
-          if (typeof value === 'object') {
-            if (config[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme, config));
-            } else {
-              const breakpointsValues = handleBreakpoints({
-                theme
-              }, value, x => ({
-                [styleKey]: x
-              }));
-              if (objectsHaveSameKeys(breakpointsValues, value)) {
-                css[styleKey] = styleFunctionSx({
-                  sx: value,
-                  theme,
-                  nested: true
-                });
-              } else {
-                css = merge(css, breakpointsValues);
-              }
-            }
-          } else {
-            css = merge(css, getThemeValue(styleKey, value, theme, config));
-          }
+        if (value === null || value === undefined) {
+          continue;
+        }
+        if (typeof value !== 'object') {
+          setThemeValue(css, styleKey, value, theme, config);
+          continue;
+        }
+        if (config[styleKey]) {
+          setThemeValue(css, styleKey, value, theme, config);
+          continue;
         }
-      });
+        if (hasBreakpoint(breakpoints, value)) {
+          iterateBreakpoints(css, props.theme, value, (mediaKey, finalValue) => {
+            css[mediaKey][styleKey] = finalValue;
+          });
+        } else {
+          wrapper.sx = value;
+          css[styleKey] = styleFunctionSx(wrapper);
+        }
+      }
       if (!nested && theme.modularCssLayers) {
         return {
-          '@layer sx': sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css))
+          '@layer sx': sortContainerQueries(theme, removeUnusedBreakpoints(breakpoints, css))
         };
       }
-      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpoints, css));
     }
-    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+    return Array.isArray(sx) ? sx.map(process) : process(sx);
   }
+  styleFunctionSx.filterProps = ['sx'];
   return styleFunctionSx;
 }
-const styleFunctionSx = unstable_createStyleFunctionSx();
-styleFunctionSx.filterProps = ['sx'];
-export default styleFunctionSx;
+export default unstable_createStyleFunctionSx();
+function setThemeValue(css, prop, value, theme, config) {
+  const options = config[prop];
+  if (!options) {
+    css[prop] = value;
+    return;
+  }
+  if (value == null) {
+    return;
+  }
+  const {
+    themeKey
+  } = options;
+  // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
+  if (themeKey === 'typography' && value === 'inherit') {
+    css[prop] = value;
+    return;
+  }
+  const {
+    style
+  } = options;
+  if (style) {
+    merge(css, style({
+      [prop]: value,
+      theme
+    }));
+    return;
+  }
+  const {
+    cssProperty = prop,
+    transform
+  } = options;
+  const themeMapping = getPath(theme, themeKey);
+  iterateBreakpoints(css, theme, value, (mediaKey, valueFinal) => {
+    const finalValue = getStyleValue2(themeMapping, transform, valueFinal, prop);
+    if (cssProperty === false) {
+      if (mediaKey) {
+        css[mediaKey] = finalValue;
+      } else {
+        merge(css, finalValue);
+      }
+    } else {
+      // eslint-disable-next-line no-lonely-if
+      if (mediaKey) {
+        css[mediaKey][cssProperty] = finalValue;
+      } else {
+        css[cssProperty] = finalValue;
+      }
+    }
+  });
+}
+function callIfFn(maybeFn, arg) {
+  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
+}

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "9.0.0-alpha.4";
+const version = exports.version = "9.0.0-beta.0";
 const major = exports.major = Number("9");
 const minor = exports.minor = Number("0");
 const patch = exports.patch = Number("0");
-const prerelease = exports.prerelease = "alpha.4";
+const prerelease = exports.prerelease = "beta.0";
 var _default = exports.default = version;

package/version/index.mjs

@@ -1,6 +1,6 @@
-export const version = "9.0.0-alpha.4";
+export const version = "9.0.0-beta.0";
 export const major = Number("9");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "alpha.4";
+export const prerelease = "beta.0";
 export default version;