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

package/style/style.mjs

@@ -1,40 +1,99 @@
 import capitalize from '@mui/utils/capitalize';
 import responsivePropType from "../responsivePropType/index.mjs";
 import { handleBreakpoints } from "../breakpoints/index.mjs";
-export function getPath(obj, path, checkVars = true) {
-  if (!path || typeof path !== 'string') {
-    return null;
+/**
+ * TODO(v7): Keep either this one or `getStyleValue2`
+ */
+export function getStyleValue(themeMapping, transform, valueFinal, userValue = valueFinal) {
+  let value;
+  if (typeof themeMapping === 'function') {
+    value = themeMapping(valueFinal);
+  } else if (Array.isArray(themeMapping)) {
+    value = themeMapping[valueFinal] || userValue;
+  } else if (typeof valueFinal === 'string') {
+    value = getPath(themeMapping, valueFinal) || userValue;
+  } else {
+    value = userValue;
   }
-
-  // Check if CSS variables are used
-  if (obj && obj.vars && checkVars) {
-    const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
-    if (val != null) {
-      return val;
-    }
+  if (transform) {
+    value = transform(value, userValue, themeMapping);
   }
-  return path.split('.').reduce((acc, item) => {
-    if (acc && acc[item] != null) {
-      return acc[item];
-    }
-    return null;
-  }, obj);
+  return value;
 }
-export function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+
+/**
+ * HACK: The `alternateProp` logic is there because our theme looks like this:
+ * {
+ *   typography: {
+ *     fontFamily: 'comic sans',
+ *     fontFamilyCode: 'courrier new',
+ *   }
+ * }
+ * And we support targetting:
+ * - `typography.fontFamily`     with `sx={{ fontFamily: 'default' }}`
+ * - `typography.fontFamilyCode` with `sx={{ fontFamily: 'code' }}`
+ *
+ * TODO(v7): Refactor our theme to look like this and remove the horrendous logic:
+ * {
+ *   typography: {
+ *     fontFamily: {
+ *       default: 'comic sans',
+ *       code: 'courrier new',
+ *     }
+ *   }
+ * }
+ */
+export function getStyleValue2(themeMapping, transform, userValue, alternateProp) {
   let value;
   if (typeof themeMapping === 'function') {
-    value = themeMapping(propValueFinal);
+    value = themeMapping(userValue);
   } else if (Array.isArray(themeMapping)) {
-    value = themeMapping[propValueFinal] || userValue;
+    value = themeMapping[userValue] || userValue;
+  } else if (typeof userValue === 'string') {
+    value = getPath(themeMapping, userValue, true, alternateProp) || userValue;
   } else {
-    value = getPath(themeMapping, propValueFinal) || userValue;
+    value = userValue;
   }
   if (transform) {
     value = transform(value, userValue, themeMapping);
   }
   return value;
 }
-function style(options) {
+export function getPath(obj, pathInput, checkVars = true, alternateProp = undefined) {
+  if (!obj || !pathInput) {
+    return null;
+  }
+  const path = pathInput.split('.');
+
+  // Check if CSS variables are used
+  if (obj.vars && checkVars) {
+    const val = getPathImpl(obj.vars, path, alternateProp);
+    if (val != null) {
+      return val;
+    }
+  }
+  return getPathImpl(obj, path, alternateProp);
+}
+function getPathImpl(object, path, alternateProp = undefined) {
+  let lastResult = undefined;
+  let result = object;
+  let index = 0;
+  while (index < path.length) {
+    if (result === null || result === undefined) {
+      return result;
+    }
+    lastResult = result;
+    result = result[path[index]];
+    index += 1;
+  }
+  if (alternateProp && result === undefined) {
+    const lastKey = path[path.length - 1];
+    const alternateKey = `${alternateProp}${lastKey === 'default' ? '' : capitalize(lastKey)}`;
+    return lastResult?.[alternateKey];
+  }
+  return result;
+}
+export default function style(options) {
   const {
     prop,
     cssProperty = options.prop,
@@ -42,7 +101,6 @@ function style(options) {
     transform
   } = options;
 
-  // false positive
   // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     if (props[prop] == null) {
@@ -51,16 +109,9 @@ function style(options) {
     const propValue = props[prop];
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
-    const styleFromPropValue = propValueFinal => {
-      let value = getStyleValue(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === 'string') {
-        // Haven't found value
-        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return {
+    const styleFromPropValue = valueFinal => {
+      const value = getStyleValue2(themeMapping, transform, valueFinal, prop);
+      return cssProperty === false ? value : {
         [cssProperty]: value
       };
     };
@@ -71,5 +122,4 @@ function style(options) {
   } : {};
   fn.filterProps = [prop];
   return fn;
-}
-export default style;
+}

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.3";
+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.3";
+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.3";
+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.3";
+export const prerelease = "beta.0";
 export default version;