@mui/system 7.0.1 → 7.0.2

package/modern/createStyled/createStyled.js

@@ -1,276 +0,0 @@
-import styledEngineStyled, { internal_mutateStyles as mutateStyles } from '@mui/styled-engine';
-import { isPlainObject } from '@mui/utils/deepmerge';
-import capitalize from '@mui/utils/capitalize';
-import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from "../createTheme/index.js";
-import styleFunctionSx from "../styleFunctionSx/index.js";
-import preprocessStyles from "../preprocessStyles.js";
-
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable no-labels */
-/* eslint-disable no-lone-blocks */
-
-export const systemDefaultTheme = createTheme();
-
-// Update /system/styled/#api in case if this changes
-export function shouldForwardProp(prop) {
-  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
-}
-function defaultOverridesResolver(slot) {
-  if (!slot) {
-    return null;
-  }
-  return (_props, styles) => styles[slot];
-}
-function attachTheme(props, themeId, defaultTheme) {
-  props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
-}
-function processStyle(props, style) {
-  /*
-   * Style types:
-   *  - null/undefined
-   *  - string
-   *  - CSS style object: { [cssKey]: [cssValue], variants }
-   *  - Processed style object: { style, variants, isProcessed: true }
-   *  - Array of any of the above
-   */
-
-  const resolvedStyle = typeof style === 'function' ? style(props) : style;
-  if (Array.isArray(resolvedStyle)) {
-    return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle));
-  }
-  if (Array.isArray(resolvedStyle?.variants)) {
-    let rootStyle;
-    if (resolvedStyle.isProcessed) {
-      rootStyle = resolvedStyle.style;
-    } else {
-      const {
-        variants,
-        ...otherStyles
-      } = resolvedStyle;
-      rootStyle = otherStyles;
-    }
-    return processStyleVariants(props, resolvedStyle.variants, [rootStyle]);
-  }
-  if (resolvedStyle?.isProcessed) {
-    return resolvedStyle.style;
-  }
-  return resolvedStyle;
-}
-function processStyleVariants(props, variants, results = []) {
-  let mergedState; // We might not need it, initialized lazily
-
-  variantLoop: for (let i = 0; i < variants.length; i += 1) {
-    const variant = variants[i];
-    if (typeof variant.props === 'function') {
-      mergedState ?? (mergedState = {
-        ...props,
-        ...props.ownerState,
-        ownerState: props.ownerState
-      });
-      if (!variant.props(mergedState)) {
-        continue;
-      }
-    } else {
-      for (const key in variant.props) {
-        if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
-          continue variantLoop;
-        }
-      }
-    }
-    if (typeof variant.style === 'function') {
-      mergedState ?? (mergedState = {
-        ...props,
-        ...props.ownerState,
-        ownerState: props.ownerState
-      });
-      results.push(variant.style(mergedState));
-    } else {
-      results.push(variant.style);
-    }
-  }
-  return results;
-}
-export default function createStyled(input = {}) {
-  const {
-    themeId,
-    defaultTheme = systemDefaultTheme,
-    rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp
-  } = input;
-  function styleAttachTheme(props) {
-    attachTheme(props, themeId, defaultTheme);
-  }
-  const styled = (tag, inputOptions = {}) => {
-    // If `tag` is already a styled component, filter out the `sx` style function
-    // to prevent unnecessary styles generated by the composite components.
-    mutateStyles(tag, styles => styles.filter(style => style !== styleFunctionSx));
-    const {
-      name: componentName,
-      slot: componentSlot,
-      skipVariantsResolver: inputSkipVariantsResolver,
-      skipSx: inputSkipSx,
-      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-      // For more details: https://github.com/mui/material-ui/pull/37908
-      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
-      ...options
-    } = inputOptions;
-
-    // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
-    // TODO v6: remove `Root` in the next major release
-    // For more details: https://github.com/mui/material-ui/pull/37908
-    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
-    const skipSx = inputSkipSx || false;
-    let shouldForwardPropOption = shouldForwardProp;
-
-    // TODO v6: remove `Root` in the next major release
-    // For more details: https://github.com/mui/material-ui/pull/37908
-    if (componentSlot === 'Root' || componentSlot === 'root') {
-      shouldForwardPropOption = rootShouldForwardProp;
-    } else if (componentSlot) {
-      // any other slot specified
-      shouldForwardPropOption = slotShouldForwardProp;
-    } else if (isStringTag(tag)) {
-      // for string (html) tag, preserve the behavior in emotion & styled-components.
-      shouldForwardPropOption = undefined;
-    }
-    const defaultStyledResolver = styledEngineStyled(tag, {
-      shouldForwardProp: shouldForwardPropOption,
-      label: generateStyledLabel(componentName, componentSlot),
-      ...options
-    });
-    const transformStyle = style => {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof style === 'function' && style.__emotion_real !== style) {
-        return function styleFunctionProcessor(props) {
-          return processStyle(props, style);
-        };
-      }
-      if (isPlainObject(style)) {
-        const serialized = preprocessStyles(style);
-        if (!serialized.variants) {
-          return serialized.style;
-        }
-        return function styleObjectProcessor(props) {
-          return processStyle(props, serialized);
-        };
-      }
-      return style;
-    };
-    const muiStyledResolver = (...expressionsInput) => {
-      const expressionsHead = [];
-      const expressionsBody = expressionsInput.map(transformStyle);
-      const expressionsTail = [];
-
-      // Preprocess `props` to set the scoped theme value.
-      // This must run before any other expression.
-      expressionsHead.push(styleAttachTheme);
-      if (componentName && overridesResolver) {
-        expressionsTail.push(function styleThemeOverrides(props) {
-          const theme = props.theme;
-          const styleOverrides = theme.components?.[componentName]?.styleOverrides;
-          if (!styleOverrides) {
-            return null;
-          }
-          const resolvedStyleOverrides = {};
-
-          // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
-          // eslint-disable-next-line guard-for-in
-          for (const slotKey in styleOverrides) {
-            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey]);
-          }
-          return overridesResolver(props, resolvedStyleOverrides);
-        });
-      }
-      if (componentName && !skipVariantsResolver) {
-        expressionsTail.push(function styleThemeVariants(props) {
-          const theme = props.theme;
-          const themeVariants = theme?.components?.[componentName]?.variants;
-          if (!themeVariants) {
-            return null;
-          }
-          return processStyleVariants(props, themeVariants);
-        });
-      }
-      if (!skipSx) {
-        expressionsTail.push(styleFunctionSx);
-      }
-
-      // This function can be called as a tagged template, so the first argument would contain
-      // CSS `string[]` values.
-      if (Array.isArray(expressionsBody[0])) {
-        const inputStrings = expressionsBody.shift();
-
-        // We need to add placeholders in the tagged template for the custom functions we have
-        // possibly added (attachTheme, overrides, variants, and sx).
-        const placeholdersHead = new Array(expressionsHead.length).fill('');
-        const placeholdersTail = new Array(expressionsTail.length).fill('');
-        let outputStrings;
-        // prettier-ignore
-        {
-          outputStrings = [...placeholdersHead, ...inputStrings, ...placeholdersTail];
-          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
-        }
-
-        // The only case where we put something before `attachTheme`
-        expressionsHead.unshift(outputStrings);
-      }
-      const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
-      const Component = defaultStyledResolver(...expressions);
-      if (tag.muiName) {
-        Component.muiName = tag.muiName;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        Component.displayName = generateDisplayName(componentName, componentSlot, tag);
-      }
-      return Component;
-    };
-    if (defaultStyledResolver.withConfig) {
-      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
-    }
-    return muiStyledResolver;
-  };
-  return styled;
-}
-function generateDisplayName(componentName, componentSlot, tag) {
-  if (componentName) {
-    return `${componentName}${capitalize(componentSlot || '')}`;
-  }
-  return `Styled(${getDisplayName(tag)})`;
-}
-function generateStyledLabel(componentName, componentSlot) {
-  let label;
-  if (process.env.NODE_ENV !== 'production') {
-    if (componentName) {
-      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-      // For more details: https://github.com/mui/material-ui/pull/37908
-      label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
-    }
-  }
-  return label;
-}
-function isObjectEmpty(object) {
-  // eslint-disable-next-line
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
-
-// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-function isStringTag(tag) {
-  return typeof tag === 'string' &&
-  // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96;
-}
-function lowercaseFirstLetter(string) {
-  if (!string) {
-    return string;
-  }
-  return string.charAt(0).toLowerCase() + string.slice(1);
-}

package/modern/createStyled/index.js

@@ -1,2 +0,0 @@
-export { default } from "./createStyled.js";
-export * from "./createStyled.js";

package/modern/createTheme/applyStyles.js

@@ -1,87 +0,0 @@
-/**
- * A universal utility to style components with multiple color modes. Always use it from the theme object.
- * It works with:
- *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
- *  - Zero-runtime engine
- *
- * Tips: Use an array over object spread and place `theme.applyStyles()` last.
- *
- * With the styled function:
- * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
- * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
- *
- * With the sx prop:
- * ✅ [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
- * 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
- *
- * @example
- * 1. using with `styled`:
- * ```jsx
- *   const Component = styled('div')(({ theme }) => [
- *     { background: '#e5e5e5' },
- *     theme.applyStyles('dark', {
- *       background: '#1c1c1c',
- *       color: '#fff',
- *     }),
- *   ]);
- * ```
- *
- * @example
- * 2. using with `sx` prop:
- * ```jsx
- *   <Box sx={[
- *     { background: '#e5e5e5' },
- *     theme => theme.applyStyles('dark', {
- *        background: '#1c1c1c',
- *        color: '#fff',
- *      }),
- *     ]}
- *   />
- * ```
- *
- * @example
- * 3. theming a component:
- * ```jsx
- *   extendTheme({
- *     components: {
- *       MuiButton: {
- *         styleOverrides: {
- *           root: ({ theme }) => [
- *             { background: '#e5e5e5' },
- *             theme.applyStyles('dark', {
- *               background: '#1c1c1c',
- *               color: '#fff',
- *             }),
- *           ],
- *         },
- *       }
- *     }
- *   })
- *```
- */
-export default function applyStyles(key, styles) {
-  // @ts-expect-error this is 'any' type
-  const theme = this;
-  if (theme.vars) {
-    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
-      return {};
-    }
-    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
-    let selector = theme.getColorSchemeSelector(key);
-    if (selector === '&') {
-      return styles;
-    }
-    if (selector.includes('data-') || selector.includes('.')) {
-      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
-      selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
-    }
-    return {
-      [selector]: styles
-    };
-  }
-  if (theme.palette.mode === key) {
-    return styles;
-  }
-  return {};
-}

package/modern/createTheme/createSpacing.js

@@ -1,31 +0,0 @@
-import { createUnarySpacing } from "../spacing/index.js";
-
-// The different signatures imply different meaning for their arguments that can't be expressed structurally.
-// We express the difference with variable names.
-
-export default function createSpacing(spacingInput = 8,
-// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
-// Smaller components, such as icons, can align to a 4dp grid.
-// https://m2.material.io/design/layout/understanding-layout.html
-transform = createUnarySpacing({
-  spacing: spacingInput
-})) {
-  // Already transformed.
-  if (spacingInput.mui) {
-    return spacingInput;
-  }
-  const spacing = (...argsInput) => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!(argsInput.length <= 4)) {
-        console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
-      }
-    }
-    const args = argsInput.length === 0 ? [1] : argsInput;
-    return args.map(argument => {
-      const output = transform(argument);
-      return typeof output === 'number' ? `${output}px` : output;
-    }).join(' ');
-  };
-  spacing.mui = true;
-  return spacing;
-}

package/modern/createTheme/createTheme.js

@@ -1,49 +0,0 @@
-import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from "../createBreakpoints/createBreakpoints.js";
-import cssContainerQueries from "../cssContainerQueries/index.js";
-import shape from "./shape.js";
-import createSpacing from "./createSpacing.js";
-import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.js";
-import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.js";
-import applyStyles from "./applyStyles.js";
-function createTheme(options = {}, ...args) {
-  const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {},
-    ...other
-  } = options;
-  const breakpoints = createBreakpoints(breakpointsInput);
-  const spacing = createSpacing(spacingInput);
-  let muiTheme = deepmerge({
-    breakpoints,
-    direction: 'ltr',
-    components: {},
-    // Inject component definitions.
-    palette: {
-      mode: 'light',
-      ...paletteInput
-    },
-    spacing,
-    shape: {
-      ...shape,
-      ...shapeInput
-    }
-  }, other);
-  muiTheme = cssContainerQueries(muiTheme);
-  muiTheme.applyStyles = applyStyles;
-  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig,
-    ...other?.unstable_sxConfig
-  };
-  muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
-      sx: props,
-      theme: this
-    });
-  };
-  return muiTheme;
-}
-export default createTheme;

package/modern/createTheme/index.js

@@ -1,3 +0,0 @@
-export { default } from "./createTheme.js";
-export { default as private_createBreakpoints } from "../createBreakpoints/createBreakpoints.js";
-export { default as unstable_applyStyles } from "./applyStyles.js";

package/modern/createTheme/shape.js

@@ -1,4 +0,0 @@
-const shape = {
-  borderRadius: 4
-};
-export default shape;

package/modern/cssContainerQueries/cssContainerQueries.js

@@ -1,69 +0,0 @@
-import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
-/**
- * For using in `sx` prop to sort the breakpoint from low to high.
- * Note: this function does not work and will not support multiple units.
- *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
- *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
- */
-export function sortContainerQueries(theme, css) {
-  if (!theme.containerQueries) {
-    return css;
-  }
-  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    const regex = /min-width:\s*([0-9.]+)/;
-    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css;
-  }
-  return sorted.reduce((acc, key) => {
-    const value = css[key];
-    delete acc[key];
-    acc[key] = value;
-    return acc;
-  }, {
-    ...css
-  });
-}
-export function isCqShorthand(breakpointKeys, value) {
-  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
-}
-export function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
-  if (!matches) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : _formatErrorMessage(18, `(${shorthand})`));
-    }
-    return null;
-  }
-  const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
-  return theme.containerQueries(containerName).up(value);
-}
-export default function cssContainerQueries(themeInput) {
-  const toContainerQuery = (mediaQuery, name) => mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
-  function attachCq(node, name) {
-    node.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
-    node.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
-    node.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
-    node.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
-    node.not = (...args) => {
-      const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
-      if (result.includes('not all and')) {
-        // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
-      }
-      return result;
-    };
-  }
-  const node = {};
-  const containerQueries = name => {
-    attachCq(node, name);
-    return node;
-  };
-  attachCq(containerQueries);
-  return {
-    ...themeInput,
-    containerQueries
-  };
-}

package/modern/cssContainerQueries/index.js

@@ -1,2 +0,0 @@
-export { default } from "./cssContainerQueries.js";
-export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.js";

package/modern/cssGrid/cssGrid.js

@@ -1,85 +0,0 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-import { createUnaryUnit, getValue } from "../spacing/index.js";
-import { handleBreakpoints } from "../breakpoints/index.js";
-import responsivePropType from "../responsivePropType/index.js";
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
-export const gap = props => {
-  if (props.gap !== undefined && props.gap !== null) {
-    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
-    const styleFromPropValue = propValue => ({
-      gap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.gap, styleFromPropValue);
-  }
-  return null;
-};
-gap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  gap: responsivePropType
-} : {};
-gap.filterProps = ['gap'];
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
-export const columnGap = props => {
-  if (props.columnGap !== undefined && props.columnGap !== null) {
-    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
-    const styleFromPropValue = propValue => ({
-      columnGap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
-  }
-  return null;
-};
-columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  columnGap: responsivePropType
-} : {};
-columnGap.filterProps = ['columnGap'];
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
-export const rowGap = props => {
-  if (props.rowGap !== undefined && props.rowGap !== null) {
-    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
-    const styleFromPropValue = propValue => ({
-      rowGap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
-  }
-  return null;
-};
-rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  rowGap: responsivePropType
-} : {};
-rowGap.filterProps = ['rowGap'];
-export const gridColumn = style({
-  prop: 'gridColumn'
-});
-export const gridRow = style({
-  prop: 'gridRow'
-});
-export const gridAutoFlow = style({
-  prop: 'gridAutoFlow'
-});
-export const gridAutoColumns = style({
-  prop: 'gridAutoColumns'
-});
-export const gridAutoRows = style({
-  prop: 'gridAutoRows'
-});
-export const gridTemplateColumns = style({
-  prop: 'gridTemplateColumns'
-});
-export const gridTemplateRows = style({
-  prop: 'gridTemplateRows'
-});
-export const gridTemplateAreas = style({
-  prop: 'gridTemplateAreas'
-});
-export const gridArea = style({
-  prop: 'gridArea'
-});
-const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-export default grid;

package/modern/cssGrid/index.js

@@ -1,2 +0,0 @@
-export { default } from "./cssGrid.js";
-export * from "./cssGrid.js";