@mui/system 5.3.0 → 5.4.3

package/styleFunctionSx/styleFunctionSx.js

@@ -6,17 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
 
 var _merge = _interopRequireDefault(require("../merge"));
 
-var _getThemeValue = _interopRequireWildcard(require("../getThemeValue"));
+var _getThemeValue = require("../getThemeValue");
 
 var _breakpoints = require("../breakpoints");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
@@ -25,71 +22,99 @@ function objectsHaveSameKeys(...objects) {
 
 function callIfFn(maybeFn, arg) {
   return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-}
+} // eslint-disable-next-line @typescript-eslint/naming-convention
 
-function styleFunctionSx(props) {
-  const {
-    sx,
-    theme = {}
-  } = props || {};
 
-  if (!sx) {
-    return null; // emotion & styled-components will neglect null
+function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.styleFunctionMapping) {
+  const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => {
+    styleFunctionMapping[styleFnName].filterProps.forEach(propName => {
+      acc[propName] = styleFunctionMapping[styleFnName];
+    });
+    return acc;
+  }, {});
+
+  function getThemeValue(prop, value, theme) {
+    const inputProps = {
+      [prop]: value,
+      theme
+    };
+    const styleFunction = propToStyleFunction[prop];
+    return styleFunction ? styleFunction(inputProps) : {
+      [prop]: value
+    };
   }
-  /*
-   * 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) {
-    let sxObject = sxInput;
+  function styleFunctionSx(props) {
+    const {
+      sx,
+      theme = {}
+    } = props || {};
 
-    if (typeof sxInput === 'function') {
-      sxObject = sxInput(theme);
-    } else if (typeof sxInput !== 'object') {
-      // value
-      return sxInput;
+    if (!sx) {
+      return null; // emotion & styled-components will neglect null
     }
+    /*
+     * 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`)
+     */
 
-    const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
-    const breakpointsKeys = Object.keys(emptyBreakpoints);
-    let css = emptyBreakpoints;
-    Object.keys(sxObject).forEach(styleKey => {
-      const value = callIfFn(sxObject[styleKey], theme);
 
-      if (value !== null && value !== undefined) {
-        if (typeof value === 'object') {
-          if (_getThemeValue.propToStyleFunction[styleKey]) {
-            css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
-          } else {
-            const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
-              theme
-            }, value, x => ({
-              [styleKey]: x
-            }));
-
-            if (objectsHaveSameKeys(breakpointsValues, value)) {
-              css[styleKey] = styleFunctionSx({
-                sx: value,
-                theme
-              });
+    function traverse(sxInput) {
+      let sxObject = sxInput;
+
+      if (typeof sxInput === 'function') {
+        sxObject = sxInput(theme);
+      } else if (typeof sxInput !== 'object') {
+        // value
+        return sxInput;
+      }
+
+      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 value = callIfFn(sxObject[styleKey], theme);
+
+        if (value !== null && value !== undefined) {
+          if (typeof value === 'object') {
+            if (propToStyleFunction[styleKey]) {
+              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme));
             } else {
-              css = (0, _merge.default)(css, breakpointsValues);
+              const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
+                theme
+              }, value, x => ({
+                [styleKey]: x
+              }));
+
+              if (objectsHaveSameKeys(breakpointsValues, value)) {
+                css[styleKey] = styleFunctionSx({
+                  sx: value,
+                  theme
+                });
+              } else {
+                css = (0, _merge.default)(css, breakpointsValues);
+              }
             }
+          } else {
+            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme));
           }
-        } else {
-          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
         }
-      }
-    });
-    return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
+      });
+      return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
+    }
+
+    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
 
-  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+  return styleFunctionSx;
 }
 
+const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var _default = styleFunctionSx;
 exports.default = _default;

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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