@mui/system 7.0.1 → 7.1.0

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.d.ts

@@ -1,4 +0,0 @@
-import { SxProps } from "./styleFunctionSx.js";
-export default function extendSxProp<Props extends {
-  sx?: SxProps<any>;
-} = {}>(props: Props): Props;

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.d.ts

@@ -1,9 +0,0 @@
-export { default } from "./styleFunctionSx.js";
-export * from "./styleFunctionSx.js";
-export * from "./AliasesCSSProperties.js";
-export * from "./OverwriteCSSProperties.js";
-export * from "./StandardCssProperties.js";
-export { default as extendSxProp } from "./extendSxProp.js";
-export { default as unstable_defaultSxConfig } from "./defaultSxConfig.js";
-export * from "./defaultSxConfig.js";
-export * from "./extendSxProp.js";

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.d.ts

@@ -1,62 +0,0 @@
-import * as CSS from 'csstype';
-import { CSSObject } from '@mui/styled-engine';
-import { StandardCSSProperties } from "./StandardCssProperties.js";
-import { AliasesCSSProperties } from "./AliasesCSSProperties.js";
-import { OverwriteCSSProperties } from "./OverwriteCSSProperties.js";
-
-/**
- * The `css` function accepts arrays as values for mobile-first responsive styles.
- * Note that this extends to non-theme values also. For example `display=['none', 'block']`
- * will also works.
- */
-export type ResponsiveStyleValue<T> = T | ReadonlyArray<T | null> | {
-  [key: string]: T | null;
-};
-
-/**
- * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...).
- */
-export type CSSPseudoSelectorProps<Theme extends object = {}> = { [K in CSS.Pseudos]?: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme> };
-
-/**
- * Map all nested selectors.
- */
-export interface CSSSelectorObject<Theme extends object = {}> {
-  [cssSelector: string]: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme>;
-}
-type CssVariableType = string | number;
-
-/**
- * Map all nested selectors and CSS variables.
- */
-export interface CSSSelectorObjectOrCssVariables<Theme extends object = {}> {
-  [cssSelectorOrVariable: string]: ((theme: Theme) => SystemStyleObject<Theme> | string | number) | SystemStyleObject<Theme> | CssVariableType;
-}
-
-/**
- * Map of all available CSS properties (including aliases) and their raw value.
- * Only used internally to map CSS properties to input types (responsive value,
- * theme function or nested) in `SystemCssProperties`.
- */
-export interface AllSystemCSSProperties extends Omit<StandardCSSProperties, keyof OverwriteCSSProperties>, OverwriteCSSProperties, AliasesCSSProperties {}
-export type SystemCssProperties<Theme extends object = {}> = { [K in keyof AllSystemCSSProperties]: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) | null };
-
-/**
- * The `SystemStyleObject` defines custom properties that will be transformed to
- * their corresponding values from the `Theme`. Other valid CSS properties are also allowed.
- */
-export type SystemStyleObject<Theme extends object = {}> = SystemCssProperties<Theme> | CSSPseudoSelectorProps<Theme> | CSSSelectorObjectOrCssVariables<Theme> | null;
-
-/**
- * The `SxProps` can be either object or function
- */
-export type SxProps<Theme extends object = {}> = SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>) | ReadonlyArray<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
-export interface StyleFunctionSx {
-  (props: object): CSSObject;
-  filterProps?: string[];
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_createStyleFunctionSx(styleFunctionMapping: Record<string, StyleFunctionSx>): StyleFunctionSx;
-declare const styleFunctionSx: StyleFunctionSx;
-export default styleFunctionSx;

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.d.ts

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

package/modern/styled/index.js

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

package/modern/styled/styled.d.ts

@@ -1,3 +0,0 @@
-import { CreateMUIStyled } from "../createStyled/index.js";
-declare const styled: CreateMUIStyled;
-export default styled;

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.d.ts

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

package/modern/typography/index.js

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

package/modern/typography/typography.d.ts

@@ -1,12 +0,0 @@
-import { PropsFor, SimpleStyleFunction, typography } from "../Box/index.js";
-export const typographyVariant: SimpleStyleFunction<'typography'>;
-export const fontFamily: SimpleStyleFunction<'fontFamily'>;
-export const fontSize: SimpleStyleFunction<'fontSize'>;
-export const fontStyle: SimpleStyleFunction<'fontStyle'>;
-export const fontWeight: SimpleStyleFunction<'fontWeight'>;
-export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
-export const lineHeight: SimpleStyleFunction<'lineHeight'>;
-export const textAlign: SimpleStyleFunction<'textAlign'>;
-export const textTransform: SimpleStyleFunction<'textTransform'>;
-export type TypographyProps = PropsFor<typeof typography>;
-export default typography;

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.d.ts

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

package/modern/useMediaQuery/index.js

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

package/modern/useMediaQuery/useMediaQuery.d.ts

@@ -1,32 +0,0 @@
-export interface UseMediaQueryOptions {
-  /**
-   * As `window.matchMedia()` is unavailable on the server,
-   * it returns a default matches during the first mount.
-   * @default false
-   */
-  defaultMatches?: boolean;
-  /**
-   * You can provide your own implementation of matchMedia.
-   * This can be used for handling an iframe content window.
-   */
-  matchMedia?: typeof window.matchMedia;
-  /**
-   * To perform the server-side hydration, the hook needs to render twice.
-   * A first time with `defaultMatches`, the value of the server, and a second time with the resolved value.
-   * This double pass rendering cycle comes with a drawback: it's slower.
-   * You can set this option to `true` if you use the returned value **only** client-side.
-   * @default false
-   */
-  noSsr?: boolean;
-  /**
-   * You can provide your own implementation of `matchMedia`, it's used when rendering server-side.
-   */
-  ssrMatchMedia?: (query: string) => {
-    matches: boolean;
-  };
-}
-export declare function unstable_createUseMediaQuery(params?: {
-  themeId?: string;
-}): <Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: UseMediaQueryOptions) => boolean;
-declare const useMediaQuery: <Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: UseMediaQueryOptions) => boolean;
-export default useMediaQuery;