@mui/system 7.0.0 → 7.0.2

package/modern/styleFunctionSx/defaultSxConfig.js

@@ -1,294 +0,0 @@
-import { padding, margin } from "../spacing/index.js";
-import { borderRadius, borderTransform } from "../borders/index.js";
-import { gap, rowGap, columnGap } from "../cssGrid/index.js";
-import { paletteTransform } from "../palette/index.js";
-import { maxWidth, sizingTransform } from "../sizing/index.js";
-const 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: value => ({
-      '@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
-  font: {
-    themeKey: 'font'
-  },
-  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/modern/styleFunctionSx/extendSxProp.js

@@ -1,51 +0,0 @@
-import { isPlainObject } from '@mui/utils/deepmerge';
-import defaultSxConfig from "./defaultSxConfig.js";
-const splitProps = props => {
-  const result = {
-    systemProps: {},
-    otherProps: {}
-  };
-  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
-  Object.keys(props).forEach(prop => {
-    if (config[prop]) {
-      result.systemProps[prop] = props[prop];
-    } else {
-      result.otherProps[prop] = props[prop];
-    }
-  });
-  return result;
-};
-export default function extendSxProp(props) {
-  const {
-    sx: inSx,
-    ...other
-  } = props;
-  const {
-    systemProps,
-    otherProps
-  } = splitProps(other);
-  let finalSx;
-  if (Array.isArray(inSx)) {
-    finalSx = [systemProps, ...inSx];
-  } else if (typeof inSx === 'function') {
-    finalSx = (...args) => {
-      const result = inSx(...args);
-      if (!isPlainObject(result)) {
-        return systemProps;
-      }
-      return {
-        ...systemProps,
-        ...result
-      };
-    };
-  } else {
-    finalSx = {
-      ...systemProps,
-      ...inSx
-    };
-  }
-  return {
-    ...otherProps,
-    sx: finalSx
-  };
-}

package/modern/styleFunctionSx/index.js

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

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -1,127 +0,0 @@
-import capitalize from '@mui/utils/capitalize';
-import merge from "../merge/index.js";
-import { getPath, getStyleValue as getValue } from "../style/index.js";
-import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from "../breakpoints/index.js";
-import { sortContainerQueries } from "../cssContainerQueries/index.js";
-import defaultSxConfig from "./defaultSxConfig.js";
-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-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) {
-      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 = {}
-    } = props || {};
-    if (!sx) {
-      return null; // Emotion & styled-components will neglect null
-    }
-    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) {
-      let sxObject = sxInput;
-      if (typeof sxInput === 'function') {
-        sxObject = sxInput(theme);
-      } else if (typeof sxInput !== 'object') {
-        // value
-        return sxInput;
-      }
-      if (!sxObject) {
-        return null;
-      }
-      const emptyBreakpoints = 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 (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
-                });
-              } else {
-                css = merge(css, breakpointsValues);
-              }
-            }
-          } else {
-            css = merge(css, getThemeValue(styleKey, value, theme, config));
-          }
-        }
-      });
-      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
-    }
-    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
-  }
-  return styleFunctionSx;
-}
-const styleFunctionSx = unstable_createStyleFunctionSx();
-styleFunctionSx.filterProps = ['sx'];
-export default styleFunctionSx;

package/modern/styled/index.js

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

package/modern/styled/styled.js

@@ -1,3 +0,0 @@
-import createStyled from "../createStyled/index.js";
-const styled = createStyled();
-export default styled;

package/modern/typography/index.js

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

package/modern/typography/typography.js

@@ -1,37 +0,0 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-export const fontFamily = style({
-  prop: 'fontFamily',
-  themeKey: 'typography'
-});
-export const fontSize = style({
-  prop: 'fontSize',
-  themeKey: 'typography'
-});
-export const fontStyle = style({
-  prop: 'fontStyle',
-  themeKey: 'typography'
-});
-export const fontWeight = style({
-  prop: 'fontWeight',
-  themeKey: 'typography'
-});
-export const letterSpacing = style({
-  prop: 'letterSpacing'
-});
-export const textTransform = style({
-  prop: 'textTransform'
-});
-export const lineHeight = style({
-  prop: 'lineHeight'
-});
-export const textAlign = style({
-  prop: 'textAlign'
-});
-export const typographyVariant = style({
-  prop: 'typography',
-  cssProperty: false,
-  themeKey: 'typography'
-});
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
-export default typography;

package/modern/useMediaQuery/index.js

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

package/modern/useMediaQuery/useMediaQuery.js

@@ -1,118 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { getThemeProps } from "../useThemeProps/index.js";
-import useTheme from "../useThemeWithoutDefault/index.js";
-// TODO React 17: Remove `useMediaQueryOld` once React 17 support is removed
-function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
-  const [match, setMatch] = React.useState(() => {
-    if (noSsr && matchMedia) {
-      return matchMedia(query).matches;
-    }
-    if (ssrMatchMedia) {
-      return ssrMatchMedia(query).matches;
-    }
-
-    // Once the component is mounted, we rely on the
-    // event listeners to return the correct matches value.
-    return defaultMatches;
-  });
-  useEnhancedEffect(() => {
-    if (!matchMedia) {
-      return undefined;
-    }
-    const queryList = matchMedia(query);
-    const updateMatch = () => {
-      setMatch(queryList.matches);
-    };
-    updateMatch();
-    queryList.addEventListener('change', updateMatch);
-    return () => {
-      queryList.removeEventListener('change', updateMatch);
-    };
-  }, [query, matchMedia]);
-  return match;
-}
-
-// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
-const safeReact = {
-  ...React
-};
-const maybeReactUseSyncExternalStore = safeReact.useSyncExternalStore;
-function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
-  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
-  const getServerSnapshot = React.useMemo(() => {
-    if (noSsr && matchMedia) {
-      return () => matchMedia(query).matches;
-    }
-    if (ssrMatchMedia !== null) {
-      const {
-        matches
-      } = ssrMatchMedia(query);
-      return () => matches;
-    }
-    return getDefaultSnapshot;
-  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
-  const [getSnapshot, subscribe] = React.useMemo(() => {
-    if (matchMedia === null) {
-      return [getDefaultSnapshot, () => () => {}];
-    }
-    const mediaQueryList = matchMedia(query);
-    return [() => mediaQueryList.matches, notify => {
-      mediaQueryList.addEventListener('change', notify);
-      return () => {
-        mediaQueryList.removeEventListener('change', notify);
-      };
-    }];
-  }, [getDefaultSnapshot, matchMedia, query]);
-  const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  return match;
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_createUseMediaQuery(params = {}) {
-  const {
-    themeId
-  } = params;
-  return function useMediaQuery(queryInput, options = {}) {
-    let theme = useTheme();
-    if (theme && themeId) {
-      theme = theme[themeId] || theme;
-    }
-    // Wait for jsdom to support the match media feature.
-    // All the browsers MUI support have this built-in.
-    // This defensive check is here for simplicity.
-    // Most of the time, the match media logic isn't central to people tests.
-    const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-    const {
-      defaultMatches = false,
-      matchMedia = supportMatchMedia ? window.matchMedia : null,
-      ssrMatchMedia = null,
-      noSsr = false
-    } = getThemeProps({
-      name: 'MuiUseMediaQuery',
-      props: options,
-      theme
-    });
-    if (process.env.NODE_ENV !== 'production') {
-      if (typeof queryInput === 'function' && theme === null) {
-        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-      }
-    }
-    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-    query = query.replace(/^@media( ?)/m, '');
-    const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
-    const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React.useDebugValue({
-        query,
-        match
-      });
-    }
-    return match;
-  };
-}
-const useMediaQuery = unstable_createUseMediaQuery();
-export default useMediaQuery;

package/modern/useTheme/index.js

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

package/modern/useTheme/useTheme.js

@@ -1,9 +0,0 @@
-'use client';
-
-import createTheme from "../createTheme/index.js";
-import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
-export const systemDefaultTheme = createTheme();
-function useTheme(defaultTheme = systemDefaultTheme) {
-  return useThemeWithoutDefault(defaultTheme);
-}
-export default useTheme;

package/modern/useThemeProps/getThemeProps.js

@@ -1,12 +0,0 @@
-import resolveProps from '@mui/utils/resolveProps';
-export default function getThemeProps(params) {
-  const {
-    theme,
-    name,
-    props
-  } = params;
-  if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
-    return props;
-  }
-  return resolveProps(theme.components[name].defaultProps, props);
-}

package/modern/useThemeProps/index.js

@@ -1,2 +0,0 @@
-export { default } from "./useThemeProps.js";
-export { default as getThemeProps } from "./getThemeProps.js";

package/modern/useThemeProps/useThemeProps.js

@@ -1,20 +0,0 @@
-'use client';
-
-import getThemeProps from "./getThemeProps.js";
-import useTheme from "../useTheme/index.js";
-export default function useThemeProps({
-  props,
-  name,
-  defaultTheme,
-  themeId
-}) {
-  let theme = useTheme(defaultTheme);
-  if (themeId) {
-    theme = theme[themeId] || theme;
-  }
-  return getThemeProps({
-    theme,
-    name,
-    props
-  });
-}

package/modern/useThemeWithoutDefault/index.js

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