@mui/system 6.0.0-alpha.0 → 6.0.0-alpha.3

package/legacy/spacing/spacing.js

@@ -1,158 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import responsivePropType from '../responsivePropType';
-import { handleBreakpoints } from '../breakpoints';
-import { getPath } from '../style';
-import merge from '../merge';
-import memoize from '../memoize';
-var properties = {
-  m: 'margin',
-  p: 'padding'
-};
-var directions = {
-  t: 'Top',
-  r: 'Right',
-  b: 'Bottom',
-  l: 'Left',
-  x: ['Left', 'Right'],
-  y: ['Top', 'Bottom']
-};
-var aliases = {
-  marginX: 'mx',
-  marginY: 'my',
-  paddingX: 'px',
-  paddingY: 'py'
-};
-
-// memoize() impact:
-// From 300,000 ops/sec
-// To 350,000 ops/sec
-var getCssProperties = memoize(function (prop) {
-  // It's not a shorthand notation.
-  if (prop.length > 2) {
-    if (aliases[prop]) {
-      prop = aliases[prop];
-    } else {
-      return [prop];
-    }
-  }
-  var _prop$split = prop.split(''),
-    _prop$split2 = _slicedToArray(_prop$split, 2),
-    a = _prop$split2[0],
-    b = _prop$split2[1];
-  var property = properties[a];
-  var direction = directions[b] || '';
-  return Array.isArray(direction) ? direction.map(function (dir) {
-    return property + dir;
-  }) : [property + direction];
-});
-export var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-export var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
-var spacingKeys = [].concat(marginKeys, paddingKeys);
-export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  var _getPath;
-  var themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
-  if (typeof themeSpacing === 'number') {
-    return function (abs) {
-      if (typeof abs === 'string') {
-        return abs;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        if (typeof abs !== 'number') {
-          console.error("MUI: Expected ".concat(propName, " argument to be a number or a string, got ").concat(abs, "."));
-        }
-      }
-      return themeSpacing * abs;
-    };
-  }
-  if (Array.isArray(themeSpacing)) {
-    return function (abs) {
-      if (typeof abs === 'string') {
-        return abs;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        if (!Number.isInteger(abs)) {
-          console.error(["MUI: The `theme.".concat(themeKey, "` array type cannot be combined with non integer values.") + "You should either use an integer value that can be used as index, or define the `theme.".concat(themeKey, "` as a number.")].join('\n'));
-        } else if (abs > themeSpacing.length - 1) {
-          console.error(["MUI: The value provided (".concat(abs, ") overflows."), "The supported values are: ".concat(JSON.stringify(themeSpacing), "."), "".concat(abs, " > ").concat(themeSpacing.length - 1, ", you need to add the missing values.")].join('\n'));
-        }
-      }
-      return themeSpacing[abs];
-    };
-  }
-  if (typeof themeSpacing === 'function') {
-    return themeSpacing;
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    console.error(["MUI: The `theme.".concat(themeKey, "` value (").concat(themeSpacing, ") is invalid."), 'It should be a number, an array or a function.'].join('\n'));
-  }
-  return function () {
-    return undefined;
-  };
-}
-export function createUnarySpacing(theme) {
-  return createUnaryUnit(theme, 'spacing', 8, 'spacing');
-}
-export function getValue(transformer, propValue) {
-  if (typeof propValue === 'string' || propValue == null) {
-    return propValue;
-  }
-  var abs = Math.abs(propValue);
-  var transformed = transformer(abs);
-  if (propValue >= 0) {
-    return transformed;
-  }
-  if (typeof transformed === 'number') {
-    return -transformed;
-  }
-  return "-".concat(transformed);
-}
-export function getStyleFromPropValue(cssProperties, transformer) {
-  return function (propValue) {
-    return cssProperties.reduce(function (acc, cssProperty) {
-      acc[cssProperty] = getValue(transformer, propValue);
-      return acc;
-    }, {});
-  };
-}
-function resolveCssProperty(props, keys, prop, transformer) {
-  // Using a hash computation over an array iteration could be faster, but with only 28 items,
-  // it's doesn't worth the bundle size.
-  if (keys.indexOf(prop) === -1) {
-    return null;
-  }
-  var cssProperties = getCssProperties(prop);
-  var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  var propValue = props[prop];
-  return handleBreakpoints(props, propValue, styleFromPropValue);
-}
-function style(props, keys) {
-  var transformer = createUnarySpacing(props.theme);
-  return Object.keys(props).map(function (prop) {
-    return resolveCssProperty(props, keys, prop, transformer);
-  }).reduce(merge, {});
-}
-export function margin(props) {
-  return style(props, marginKeys);
-}
-margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce(function (obj, key) {
-  obj[key] = responsivePropType;
-  return obj;
-}, {}) : {};
-margin.filterProps = marginKeys;
-export function padding(props) {
-  return style(props, paddingKeys);
-}
-padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce(function (obj, key) {
-  obj[key] = responsivePropType;
-  return obj;
-}, {}) : {};
-padding.filterProps = paddingKeys;
-function spacing(props) {
-  return style(props, spacingKeys);
-}
-spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce(function (obj, key) {
-  obj[key] = responsivePropType;
-  return obj;
-}, {}) : {};
-spacing.filterProps = spacingKeys;
-export default spacing;

package/legacy/style/index.js

@@ -1,4 +0,0 @@
-'use client';
-
-export { default } from './style';
-export * from './style';

package/legacy/style/style.js

@@ -1,73 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import capitalize from '@mui/utils/capitalize';
-import responsivePropType from '../responsivePropType';
-import { handleBreakpoints } from '../breakpoints';
-export function getPath(obj, path) {
-  var checkVars = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  if (!path || typeof path !== 'string') {
-    return null;
-  }
-
-  // Check if CSS variables are used
-  if (obj && obj.vars && checkVars) {
-    var val = "vars.".concat(path).split('.').reduce(function (acc, item) {
-      return acc && acc[item] ? acc[item] : null;
-    }, obj);
-    if (val != null) {
-      return val;
-    }
-  }
-  return path.split('.').reduce(function (acc, item) {
-    if (acc && acc[item] != null) {
-      return acc[item];
-    }
-    return null;
-  }, obj);
-}
-export function getStyleValue(themeMapping, transform, propValueFinal) {
-  var userValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : propValueFinal;
-  var value;
-  if (typeof themeMapping === 'function') {
-    value = themeMapping(propValueFinal);
-  } else if (Array.isArray(themeMapping)) {
-    value = themeMapping[propValueFinal] || userValue;
-  } else {
-    value = getPath(themeMapping, propValueFinal) || userValue;
-  }
-  if (transform) {
-    value = transform(value, userValue, themeMapping);
-  }
-  return value;
-}
-function style(options) {
-  var prop = options.prop,
-    _options$cssProperty = options.cssProperty,
-    cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
-    themeKey = options.themeKey,
-    transform = options.transform; // false positive
-  // eslint-disable-next-line react/function-component-definition
-  var fn = function fn(props) {
-    if (props[prop] == null) {
-      return null;
-    }
-    var propValue = props[prop];
-    var theme = props.theme;
-    var themeMapping = getPath(theme, themeKey) || {};
-    var styleFromPropValue = function styleFromPropValue(propValueFinal) {
-      var value = getStyleValue(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === 'string') {
-        // Haven't found value
-        value = getStyleValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return _defineProperty({}, cssProperty, value);
-    };
-    return handleBreakpoints(props, propValue, styleFromPropValue);
-  };
-  fn.propTypes = process.env.NODE_ENV !== 'production' ? _defineProperty({}, prop, responsivePropType) : {};
-  fn.filterProps = [prop];
-  return fn;
-}
-export default style;

package/legacy/styleFunctionSx/defaultSxConfig.js

@@ -1,293 +0,0 @@
-import { padding, margin } from '../spacing';
-import { borderRadius, borderTransform } from '../borders';
-import { gap, rowGap, columnGap } from '../cssGrid';
-import { paletteTransform } from '../palette';
-import { maxWidth, sizingTransform } from '../sizing';
-var defaultSxConfig = {
-  // borders
-  border: {
-    themeKey: 'borders',
-    transform: borderTransform
-  },
-  borderTop: {
-    themeKey: 'borders',
-    transform: borderTransform
-  },
-  borderRight: {
-    themeKey: 'borders',
-    transform: borderTransform
-  },
-  borderBottom: {
-    themeKey: 'borders',
-    transform: borderTransform
-  },
-  borderLeft: {
-    themeKey: 'borders',
-    transform: borderTransform
-  },
-  borderColor: {
-    themeKey: 'palette'
-  },
-  borderTopColor: {
-    themeKey: 'palette'
-  },
-  borderRightColor: {
-    themeKey: 'palette'
-  },
-  borderBottomColor: {
-    themeKey: 'palette'
-  },
-  borderLeftColor: {
-    themeKey: 'palette'
-  },
-  outline: {
-    themeKey: 'borders',
-    transform: borderTransform
-  },
-  outlineColor: {
-    themeKey: 'palette'
-  },
-  borderRadius: {
-    themeKey: 'shape.borderRadius',
-    style: borderRadius
-  },
-  // palette
-  color: {
-    themeKey: 'palette',
-    transform: paletteTransform
-  },
-  bgcolor: {
-    themeKey: 'palette',
-    cssProperty: 'backgroundColor',
-    transform: paletteTransform
-  },
-  backgroundColor: {
-    themeKey: 'palette',
-    transform: paletteTransform
-  },
-  // spacing
-  p: {
-    style: padding
-  },
-  pt: {
-    style: padding
-  },
-  pr: {
-    style: padding
-  },
-  pb: {
-    style: padding
-  },
-  pl: {
-    style: padding
-  },
-  px: {
-    style: padding
-  },
-  py: {
-    style: padding
-  },
-  padding: {
-    style: padding
-  },
-  paddingTop: {
-    style: padding
-  },
-  paddingRight: {
-    style: padding
-  },
-  paddingBottom: {
-    style: padding
-  },
-  paddingLeft: {
-    style: padding
-  },
-  paddingX: {
-    style: padding
-  },
-  paddingY: {
-    style: padding
-  },
-  paddingInline: {
-    style: padding
-  },
-  paddingInlineStart: {
-    style: padding
-  },
-  paddingInlineEnd: {
-    style: padding
-  },
-  paddingBlock: {
-    style: padding
-  },
-  paddingBlockStart: {
-    style: padding
-  },
-  paddingBlockEnd: {
-    style: padding
-  },
-  m: {
-    style: margin
-  },
-  mt: {
-    style: margin
-  },
-  mr: {
-    style: margin
-  },
-  mb: {
-    style: margin
-  },
-  ml: {
-    style: margin
-  },
-  mx: {
-    style: margin
-  },
-  my: {
-    style: margin
-  },
-  margin: {
-    style: margin
-  },
-  marginTop: {
-    style: margin
-  },
-  marginRight: {
-    style: margin
-  },
-  marginBottom: {
-    style: margin
-  },
-  marginLeft: {
-    style: margin
-  },
-  marginX: {
-    style: margin
-  },
-  marginY: {
-    style: margin
-  },
-  marginInline: {
-    style: margin
-  },
-  marginInlineStart: {
-    style: margin
-  },
-  marginInlineEnd: {
-    style: margin
-  },
-  marginBlock: {
-    style: margin
-  },
-  marginBlockStart: {
-    style: margin
-  },
-  marginBlockEnd: {
-    style: margin
-  },
-  // display
-  displayPrint: {
-    cssProperty: false,
-    transform: function transform(value) {
-      return {
-        '@media print': {
-          display: value
-        }
-      };
-    }
-  },
-  display: {},
-  overflow: {},
-  textOverflow: {},
-  visibility: {},
-  whiteSpace: {},
-  // flexbox
-  flexBasis: {},
-  flexDirection: {},
-  flexWrap: {},
-  justifyContent: {},
-  alignItems: {},
-  alignContent: {},
-  order: {},
-  flex: {},
-  flexGrow: {},
-  flexShrink: {},
-  alignSelf: {},
-  justifyItems: {},
-  justifySelf: {},
-  // grid
-  gap: {
-    style: gap
-  },
-  rowGap: {
-    style: rowGap
-  },
-  columnGap: {
-    style: columnGap
-  },
-  gridColumn: {},
-  gridRow: {},
-  gridAutoFlow: {},
-  gridAutoColumns: {},
-  gridAutoRows: {},
-  gridTemplateColumns: {},
-  gridTemplateRows: {},
-  gridTemplateAreas: {},
-  gridArea: {},
-  // positions
-  position: {},
-  zIndex: {
-    themeKey: 'zIndex'
-  },
-  top: {},
-  right: {},
-  bottom: {},
-  left: {},
-  // shadows
-  boxShadow: {
-    themeKey: 'shadows'
-  },
-  // sizing
-  width: {
-    transform: sizingTransform
-  },
-  maxWidth: {
-    style: maxWidth
-  },
-  minWidth: {
-    transform: sizingTransform
-  },
-  height: {
-    transform: sizingTransform
-  },
-  maxHeight: {
-    transform: sizingTransform
-  },
-  minHeight: {
-    transform: sizingTransform
-  },
-  boxSizing: {},
-  // typography
-  fontFamily: {
-    themeKey: 'typography'
-  },
-  fontSize: {
-    themeKey: 'typography'
-  },
-  fontStyle: {
-    themeKey: 'typography'
-  },
-  fontWeight: {
-    themeKey: 'typography'
-  },
-  letterSpacing: {},
-  textTransform: {},
-  lineHeight: {},
-  textAlign: {},
-  typography: {
-    cssProperty: false,
-    themeKey: 'typography'
-  }
-};
-export default defaultSxConfig;

package/legacy/styleFunctionSx/extendSxProp.js

@@ -1,45 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { isPlainObject } from '@mui/utils/deepmerge';
-import defaultSxConfig from './defaultSxConfig';
-var splitProps = function splitProps(props) {
-  var _props$theme$unstable, _props$theme;
-  var result = {
-    systemProps: {},
-    otherProps: {}
-  };
-  var config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
-  Object.keys(props).forEach(function (prop) {
-    if (config[prop]) {
-      result.systemProps[prop] = props[prop];
-    } else {
-      result.otherProps[prop] = props[prop];
-    }
-  });
-  return result;
-};
-export default function extendSxProp(props) {
-  var inSx = props.sx,
-    other = _objectWithoutProperties(props, ["sx"]);
-  var _splitProps = splitProps(other),
-    systemProps = _splitProps.systemProps,
-    otherProps = _splitProps.otherProps;
-  var finalSx;
-  if (Array.isArray(inSx)) {
-    finalSx = [systemProps].concat(_toConsumableArray(inSx));
-  } else if (typeof inSx === 'function') {
-    finalSx = function finalSx() {
-      var result = inSx.apply(void 0, arguments);
-      if (!isPlainObject(result)) {
-        return systemProps;
-      }
-      return _extends({}, systemProps, result);
-    };
-  } else {
-    finalSx = _extends({}, systemProps, inSx);
-  }
-  return _extends({}, otherProps, {
-    sx: finalSx
-  });
-}

package/legacy/styleFunctionSx/index.js

@@ -1,4 +0,0 @@
-export { default } from './styleFunctionSx';
-export { unstable_createStyleFunctionSx } from './styleFunctionSx';
-export { default as extendSxProp } from './extendSxProp';
-export { default as unstable_defaultSxConfig } from './defaultSxConfig';

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -1,126 +0,0 @@
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import capitalize from '@mui/utils/capitalize';
-import merge from '../merge';
-import { getPath, getStyleValue as getValue } from '../style';
-import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
-import defaultSxConfig from './defaultSxConfig';
-function objectsHaveSameKeys() {
-  for (var _len = arguments.length, objects = new Array(_len), _key = 0; _key < _len; _key++) {
-    objects[_key] = arguments[_key];
-  }
-  var allKeys = objects.reduce(function (keys, object) {
-    return keys.concat(Object.keys(object));
-  }, []);
-  var union = new Set(allKeys);
-  return objects.every(function (object) {
-    return union.size === Object.keys(object).length;
-  });
-}
-function callIfFn(maybeFn, arg) {
-  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_createStyleFunctionSx() {
-  function getThemeValue(prop, val, theme, config) {
-    var props = _defineProperty(_defineProperty({}, prop, val), "theme", theme);
-    var options = config[prop];
-    if (!options) {
-      return _defineProperty({}, prop, val);
-    }
-    var _options$cssProperty = options.cssProperty,
-      cssProperty = _options$cssProperty === void 0 ? prop : _options$cssProperty,
-      themeKey = options.themeKey,
-      transform = options.transform,
-      style = options.style;
-    if (val == null) {
-      return null;
-    }
-
-    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
-    if (themeKey === 'typography' && val === 'inherit') {
-      return _defineProperty({}, prop, val);
-    }
-    var themeMapping = getPath(theme, themeKey) || {};
-    if (style) {
-      return style(props);
-    }
-    var styleFromPropValue = function styleFromPropValue(propValueFinal) {
-      var value = getValue(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === 'string') {
-        // Haven't found value
-        value = getValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return _defineProperty({}, cssProperty, value);
-    };
-    return handleBreakpoints(props, val, styleFromPropValue);
-  }
-  function styleFunctionSx(props) {
-    var _theme$unstable_sxCon;
-    var _ref4 = props || {},
-      sx = _ref4.sx,
-      _ref4$theme = _ref4.theme,
-      theme = _ref4$theme === void 0 ? {} : _ref4$theme;
-    if (!sx) {
-      return null; // Emotion & styled-components will neglect null
-    }
-    var config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : 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) {
-      var sxObject = sxInput;
-      if (typeof sxInput === 'function') {
-        sxObject = sxInput(theme);
-      } else if (_typeof(sxInput) !== 'object') {
-        // value
-        return sxInput;
-      }
-      if (!sxObject) {
-        return null;
-      }
-      var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-      var breakpointsKeys = Object.keys(emptyBreakpoints);
-      var css = emptyBreakpoints;
-      Object.keys(sxObject).forEach(function (styleKey) {
-        var 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 {
-              var breakpointsValues = handleBreakpoints({
-                theme: theme
-              }, value, function (x) {
-                return _defineProperty({}, styleKey, x);
-              });
-              if (objectsHaveSameKeys(breakpointsValues, value)) {
-                css[styleKey] = styleFunctionSx({
-                  sx: value,
-                  theme: theme
-                });
-              } else {
-                css = merge(css, breakpointsValues);
-              }
-            }
-          } else {
-            css = merge(css, getThemeValue(styleKey, value, theme, config));
-          }
-        }
-      });
-      return removeUnusedBreakpoints(breakpointsKeys, css);
-    }
-    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
-  }
-  return styleFunctionSx;
-}
-var styleFunctionSx = unstable_createStyleFunctionSx();
-styleFunctionSx.filterProps = ['sx'];
-export default styleFunctionSx;