@mui/material 7.0.0-alpha.1 → 7.0.0-beta.0

package/modern/Hidden/HiddenCss.js

@@ -1,182 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import capitalize from "../utils/capitalize.js";
-import styled from "../styles/styled.js";
-import useTheme from "../styles/useTheme.js";
-import { getHiddenCssUtilityClass } from "./hiddenCssClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    breakpoints
-  } = ownerState;
-  const slots = {
-    root: ['root', ...breakpoints.map(({
-      breakpoint,
-      dir
-    }) => {
-      return dir === 'only' ? `${dir}${capitalize(breakpoint)}` : `${breakpoint}${capitalize(dir)}`;
-    })]
-  };
-  return composeClasses(slots, getHiddenCssUtilityClass, classes);
-};
-
-// FIXME(romgrk): Can't use memoTheme here, should we memo also on ownerState?
-const HiddenCssRoot = styled('div', {
-  name: 'PrivateHiddenCss',
-  slot: 'Root'
-})(({
-  theme,
-  ownerState
-}) => {
-  const hidden = {
-    display: 'none'
-  };
-  return {
-    ...ownerState.breakpoints.map(({
-      breakpoint,
-      dir
-    }) => {
-      if (dir === 'only') {
-        return {
-          [theme.breakpoints.only(breakpoint)]: hidden
-        };
-      }
-      return dir === 'up' ? {
-        [theme.breakpoints.up(breakpoint)]: hidden
-      } : {
-        [theme.breakpoints.down(breakpoint)]: hidden
-      };
-    }).reduce((r, o) => {
-      Object.keys(o).forEach(k => {
-        r[k] = o[k];
-      });
-      return r;
-    }, {})
-  };
-});
-
-/**
- * @ignore - internal component.
- */
-function HiddenCss(props) {
-  const {
-    children,
-    className,
-    only,
-    ...other
-  } = props;
-  const theme = useTheme();
-  if (process.env.NODE_ENV !== 'production') {
-    const unknownProps = Object.keys(other).filter(propName => {
-      const isUndeclaredBreakpoint = !theme.breakpoints.keys.some(breakpoint => {
-        return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName;
-      });
-      return !['classes', 'theme', 'isRtl', 'sx'].includes(propName) && isUndeclaredBreakpoint;
-    });
-    if (unknownProps.length > 0) {
-      console.error(`MUI: Unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(', ')}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`);
-    }
-  }
-  const breakpoints = [];
-  for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
-    const breakpoint = theme.breakpoints.keys[i];
-    const breakpointUp = other[`${breakpoint}Up`];
-    const breakpointDown = other[`${breakpoint}Down`];
-    if (breakpointUp) {
-      breakpoints.push({
-        breakpoint,
-        dir: 'up'
-      });
-    }
-    if (breakpointDown) {
-      breakpoints.push({
-        breakpoint,
-        dir: 'down'
-      });
-    }
-  }
-  if (only) {
-    const onlyBreakpoints = Array.isArray(only) ? only : [only];
-    onlyBreakpoints.forEach(breakpoint => {
-      breakpoints.push({
-        breakpoint,
-        dir: 'only'
-      });
-    });
-  }
-  const ownerState = {
-    ...props,
-    breakpoints
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(HiddenCssRoot, {
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    children: children
-  });
-}
-process.env.NODE_ENV !== "production" ? HiddenCss.propTypes = {
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * Specify which implementation to use.  'js' is the default, 'css' works better for
-   * server-side rendering.
-   */
-  implementation: PropTypes.oneOf(['js', 'css']),
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  lgDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  lgUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  mdDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  mdUp: PropTypes.bool,
-  /**
-   * Hide the given breakpoint(s).
-   */
-  only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  smDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  smUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  xlDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  xlUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  xsDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  xsUp: PropTypes.bool
-} : void 0;
-export default HiddenCss;

package/modern/Hidden/HiddenJs.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { Breakpoint } from '@mui/system';
-export interface HiddenJsProps {
-  width?: Breakpoint;
-  lgDown?: boolean;
-  lgUp?: boolean;
-  mdDown?: boolean;
-  mdUp?: boolean;
-  only?: Breakpoint | Breakpoint[];
-  smDown?: boolean;
-  smUp?: boolean;
-  xlDown?: boolean;
-  xlUp?: boolean;
-  xsDown?: boolean;
-  xsUp?: boolean;
-}
-declare const HiddenJs: React.JSXElementConstructor<HiddenJsProps>;
-export default HiddenJs;

package/modern/Hidden/HiddenJs.js

@@ -1,121 +0,0 @@
-'use client';
-
-import PropTypes from 'prop-types';
-import exactProp from '@mui/utils/exactProp';
-import withWidth, { isWidthDown, isWidthUp } from "./withWidth.js";
-import useTheme from "../styles/useTheme.js";
-
-/**
- * @ignore - internal component.
- */
-function HiddenJs(props) {
-  const {
-    children,
-    only,
-    width
-  } = props;
-  const theme = useTheme();
-  let visible = true;
-
-  // `only` check is faster to get out sooner if used.
-  if (only) {
-    if (Array.isArray(only)) {
-      for (let i = 0; i < only.length; i += 1) {
-        const breakpoint = only[i];
-        if (width === breakpoint) {
-          visible = false;
-          break;
-        }
-      }
-    } else if (only && width === only) {
-      visible = false;
-    }
-  }
-
-  // Allow `only` to be combined with other props. If already hidden, no need to check others.
-  if (visible) {
-    // determine visibility based on the smallest size up
-    for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
-      const breakpoint = theme.breakpoints.keys[i];
-      const breakpointUp = props[`${breakpoint}Up`];
-      const breakpointDown = props[`${breakpoint}Down`];
-      if (breakpointUp && isWidthUp(breakpoint, width) || breakpointDown && isWidthDown(breakpoint, width)) {
-        visible = false;
-        break;
-      }
-    }
-  }
-  if (!visible) {
-    return null;
-  }
-  return children;
-}
-HiddenJs.propTypes = {
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  lgDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  lgUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  mdDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  mdUp: PropTypes.bool,
-  /**
-   * Hide the given breakpoint(s).
-   */
-  only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  smDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  smUp: PropTypes.bool,
-  /**
-   * @ignore
-   * width prop provided by withWidth decorator.
-   */
-  width: PropTypes.string.isRequired,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  xlDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  xlUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  xsDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  xsUp: PropTypes.bool
-};
-if (process.env.NODE_ENV !== 'production') {
-  HiddenJs.propTypes = exactProp(HiddenJs.propTypes);
-}
-export default withWidth()(HiddenJs);

package/modern/Hidden/hiddenCssClasses.d.ts

@@ -1,3 +0,0 @@
-export declare function getHiddenCssUtilityClass(slot: string): string;
-declare const hiddenCssClasses: Record<"root" | "xlDown" | "xlUp" | "onlyXl" | "lgDown" | "lgUp" | "onlyLg" | "mdDown" | "mdUp" | "onlyMd" | "smDown" | "smUp" | "onlySm" | "xsDown" | "xsUp" | "onlyXs", string>;
-export default hiddenCssClasses;

package/modern/Hidden/hiddenCssClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getHiddenCssUtilityClass(slot) {
-  return generateUtilityClass('PrivateHiddenCss', slot);
-}
-const hiddenCssClasses = generateUtilityClasses('PrivateHiddenCss', ['root', 'xlDown', 'xlUp', 'onlyXl', 'lgDown', 'lgUp', 'onlyLg', 'mdDown', 'mdUp', 'onlyMd', 'smDown', 'smUp', 'onlySm', 'xsDown', 'xsUp', 'onlyXs']);
-export default hiddenCssClasses;

package/modern/Hidden/index.d.ts

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

package/modern/Hidden/index.js

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

package/modern/Hidden/withWidth.d.ts

@@ -1,17 +0,0 @@
-import { Breakpoint } from '@mui/system';
-import { PropInjector } from '@mui/types';
-export interface WithWidthOptions {
-  withTheme?: boolean;
-  noSSR?: boolean;
-  initialWidth?: Breakpoint;
-  resizeInterval?: number;
-}
-export interface WithWidth {
-  width: Breakpoint;
-}
-export interface WithWidthProps extends Partial<WithWidth> {
-  innerRef?: React.Ref<any>;
-}
-export function isWidthDown(breakpoint: Breakpoint, screenWidth: Breakpoint, inclusive?: boolean): boolean;
-export function isWidthUp(breakpoint: Breakpoint, screenWidth: Breakpoint, inclusive?: boolean): boolean;
-export default function withWidth(options?: WithWidthOptions): PropInjector<WithWidth, WithWidthProps>;

package/modern/Hidden/withWidth.js

@@ -1,109 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import getDisplayName from '@mui/utils/getDisplayName';
-import { getThemeProps } from '@mui/system/useThemeProps';
-import useTheme from "../styles/useTheme.js";
-import useEnhancedEffect from "../utils/useEnhancedEffect.js";
-import useMediaQuery from "../useMediaQuery/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-
-// By default, returns true if screen width is the same or greater than the given breakpoint.
-export const isWidthUp = (breakpoint, width, inclusive = true) => {
-  if (inclusive) {
-    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width);
-  }
-  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
-};
-
-// By default, returns true if screen width is less than the given breakpoint.
-export const isWidthDown = (breakpoint, width, inclusive = false) => {
-  if (inclusive) {
-    return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
-  }
-  return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
-};
-const withWidth = (options = {}) => Component => {
-  const {
-    withTheme: withThemeOption = false,
-    noSSR = false,
-    initialWidth: initialWidthOption
-  } = options;
-  function WithWidth(props) {
-    const contextTheme = useTheme();
-    const theme = props.theme || contextTheme;
-    const {
-      initialWidth,
-      width,
-      ...other
-    } = getThemeProps({
-      theme,
-      name: 'MuiWithWidth',
-      props
-    });
-    const [mountedState, setMountedState] = React.useState(false);
-    useEnhancedEffect(() => {
-      setMountedState(true);
-    }, []);
-
-    /**
-     * innerWidth |xs      sm      md      lg      xl
-     *            |-------|-------|-------|-------|------>
-     * width      |  xs   |  sm   |  md   |  lg   |  xl
-     */
-    const keys = theme.breakpoints.keys.slice().reverse();
-    const widthComputed = keys.reduce((output, key) => {
-      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const matches = useMediaQuery(theme.breakpoints.up(key));
-      return !output && matches ? key : output;
-    }, null);
-    const more = {
-      width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption,
-      ...(withThemeOption ? {
-        theme
-      } : {}),
-      ...other
-    };
-
-    // When rendering the component on the server,
-    // we have no idea about the client browser screen width.
-    // In order to prevent blinks and help the reconciliation of the React tree
-    // we are not rendering the child component.
-    //
-    // An alternative is to use the `initialWidth` property.
-    if (more.width === undefined) {
-      return null;
-    }
-    return /*#__PURE__*/_jsx(Component, {
-      ...more
-    });
-  }
-  process.env.NODE_ENV !== "production" ? WithWidth.propTypes = {
-    /**
-     * As `window.innerWidth` is unavailable on the server,
-     * we default to rendering an empty component during the first mount.
-     * You might want to use a heuristic to approximate
-     * the screen width of the client browser screen width.
-     *
-     * For instance, you could be using the user-agent or the client-hints.
-     * https://caniuse.com/#search=client%20hint
-     */
-    initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-    /**
-     * @ignore
-     */
-    theme: PropTypes.object,
-    /**
-     * Bypass the width calculation logic.
-     */
-    width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
-  } : void 0;
-  if (process.env.NODE_ENV !== 'production') {
-    WithWidth.displayName = `WithWidth(${getDisplayName(Component)})`;
-  }
-  return WithWidth;
-};
-export default withWidth;

package/modern/Icon/Icon.d.ts

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { OverridableStringUnion } from '@mui/types';
-import { Theme } from "../styles/index.js";
-import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
-import { IconClasses } from "./iconClasses.js";
-export interface IconPropsSizeOverrides {}
-export interface IconPropsColorOverrides {}
-export interface IconOwnProps {
-  /**
-   * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-   * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
-   * @default 'material-icons'
-   */
-  baseClassName?: string;
-  /**
-   * The name of the icon font ligature.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<IconClasses>;
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'inherit'
-   */
-  color?: OverridableStringUnion<'inherit' | 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', IconPropsColorOverrides>;
-  /**
-   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   * @default 'medium'
-   */
-  fontSize?: OverridableStringUnion<'inherit' | 'large' | 'medium' | 'small', IconPropsSizeOverrides>;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-}
-export interface IconTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> {
-  props: AdditionalProps & IconOwnProps;
-  defaultComponent: RootComponent;
-}
-/**
- *
- * Demos:
- *
- * - [Icons](https://next.mui.com/material-ui/icons/)
- * - [Material Icons](https://next.mui.com/material-ui/material-icons/)
- *
- * API:
- *
- * - [Icon API](https://next.mui.com/material-ui/api/icon/)
- */
-declare const Icon: OverridableComponent<IconTypeMap> & {
-  muiName: string;
-};
-export type IconProps<RootComponent extends React.ElementType = IconTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<IconTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
-};
-export default Icon;

package/modern/Icon/iconClasses.d.ts

@@ -1,24 +0,0 @@
-export interface IconClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to the root element if `color="primary"`. */
-  colorPrimary: string;
-  /** Styles applied to the root element if `color="secondary"`. */
-  colorSecondary: string;
-  /** Styles applied to the root element if `color="action"`. */
-  colorAction: string;
-  /** Styles applied to the root element if `color="error"`. */
-  colorError: string;
-  /** Styles applied to the root element if `color="disabled"`. */
-  colorDisabled: string;
-  /** Styles applied to the root element if `fontSize="inherit"`. */
-  fontSizeInherit: string;
-  /** Styles applied to the root element if `fontSize="small"`. */
-  fontSizeSmall: string;
-  /** Styles applied to the root element if `fontSize="large"`. */
-  fontSizeLarge: string;
-}
-export type IconClassKey = keyof IconClasses;
-export declare function getIconUtilityClass(slot: string): string;
-declare const iconClasses: IconClasses;
-export default iconClasses;

package/modern/Icon/index.d.ts

@@ -1,4 +0,0 @@
-export { default } from "./Icon.js";
-export * from "./Icon.js";
-export { default as iconClasses } from "./iconClasses.js";
-export * from "./iconClasses.js";

package/modern/IconButton/IconButton.d.ts

@@ -1,90 +0,0 @@
-import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { OverridableStringUnion } from '@mui/types';
-import { Theme } from "../index.js";
-import { ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
-import { OverrideProps } from "../OverridableComponent/index.js";
-import { IconButtonClasses } from "./iconButtonClasses.js";
-export interface IconButtonPropsColorOverrides {}
-export interface IconButtonPropsSizeOverrides {}
-export interface IconButtonOwnProps {
-  /**
-   * The icon to display.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<IconButtonClasses>;
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'default'
-   */
-  color?: OverridableStringUnion<'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', IconButtonPropsColorOverrides>;
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple?: boolean;
-  /**
-   * If given, uses a negative margin to counteract the padding on one
-   * side (this is often helpful for aligning the left or right
-   * side of the icon with content above or below, without ruining the border
-   * size and shape).
-   * @default false
-   */
-  edge?: 'start' | 'end' | false;
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading?: boolean | null;
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator?: React.ReactNode;
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
-   */
-  size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-}
-export type IconButtonTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & IconButtonOwnProps;
-  defaultComponent: RootComponent;
-}>;
-
-/**
- * Refer to the [Icons](https://next.mui.com/material-ui/icons/) section of the documentation
- * regarding the available icon options.
- *
- * Demos:
- *
- * - [Button](https://next.mui.com/material-ui/react-button/)
- *
- * API:
- *
- * - [IconButton API](https://next.mui.com/material-ui/api/icon-button/)
- * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
- */
-declare const IconButton: ExtendButtonBase<IconButtonTypeMap>;
-export type IconButtonProps<RootComponent extends React.ElementType = IconButtonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<IconButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
-};
-export default IconButton;