@mui/material 7.0.0 → 7.0.2

package/modern/IconButton/IconButton.js

@@ -1,322 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import chainPropTypes from '@mui/utils/chainPropTypes';
-import composeClasses from '@mui/utils/composeClasses';
-import { unstable_useId as useId } from '@mui/material/utils';
-import { alpha } from '@mui/system/colorManipulator';
-import { styled } from "../zero-styled/index.js";
-import memoTheme from "../utils/memoTheme.js";
-import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import ButtonBase from "../ButtonBase/index.js";
-import CircularProgress from "../CircularProgress/index.js";
-import capitalize from "../utils/capitalize.js";
-import iconButtonClasses, { getIconButtonUtilityClass } from "./iconButtonClasses.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    disabled,
-    color,
-    edge,
-    size,
-    loading
-  } = ownerState;
-  const slots = {
-    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
-    loadingIndicator: ['loadingIndicator'],
-    loadingWrapper: ['loadingWrapper']
-  };
-  return composeClasses(slots, getIconButtonUtilityClass, classes);
-};
-const IconButtonRoot = styled(ButtonBase, {
-  name: 'MuiIconButton',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  textAlign: 'center',
-  flex: '0 0 auto',
-  fontSize: theme.typography.pxToRem(24),
-  padding: 8,
-  borderRadius: '50%',
-  color: (theme.vars || theme).palette.action.active,
-  transition: theme.transitions.create('background-color', {
-    duration: theme.transitions.duration.shortest
-  }),
-  variants: [{
-    props: props => !props.disableRipple,
-    style: {
-      '--IconButton-hoverBg': theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
-      '&:hover': {
-        backgroundColor: 'var(--IconButton-hoverBg)',
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    }
-  }, {
-    props: {
-      edge: 'start'
-    },
-    style: {
-      marginLeft: -12
-    }
-  }, {
-    props: {
-      edge: 'start',
-      size: 'small'
-    },
-    style: {
-      marginLeft: -3
-    }
-  }, {
-    props: {
-      edge: 'end'
-    },
-    style: {
-      marginRight: -12
-    }
-  }, {
-    props: {
-      edge: 'end',
-      size: 'small'
-    },
-    style: {
-      marginRight: -3
-    }
-  }]
-})), memoTheme(({
-  theme
-}) => ({
-  variants: [{
-    props: {
-      color: 'inherit'
-    },
-    style: {
-      color: 'inherit'
-    }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
-  .map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      color: (theme.vars || theme).palette[color].main
-    }
-  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
-  .map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      '--IconButton-hoverBg': theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity)
-    }
-  })), {
-    props: {
-      size: 'small'
-    },
-    style: {
-      padding: 5,
-      fontSize: theme.typography.pxToRem(18)
-    }
-  }, {
-    props: {
-      size: 'large'
-    },
-    style: {
-      padding: 12,
-      fontSize: theme.typography.pxToRem(28)
-    }
-  }],
-  [`&.${iconButtonClasses.disabled}`]: {
-    backgroundColor: 'transparent',
-    color: (theme.vars || theme).palette.action.disabled
-  },
-  [`&.${iconButtonClasses.loading}`]: {
-    color: 'transparent'
-  }
-})));
-const IconButtonLoadingIndicator = styled('span', {
-  name: 'MuiIconButton',
-  slot: 'LoadingIndicator',
-  overridesResolver: (props, styles) => styles.loadingIndicator
-})(({
-  theme
-}) => ({
-  display: 'none',
-  position: 'absolute',
-  visibility: 'visible',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  color: (theme.vars || theme).palette.action.disabled,
-  variants: [{
-    props: {
-      loading: true
-    },
-    style: {
-      display: 'flex'
-    }
-  }]
-}));
-
-/**
- * Refer to the [Icons](/material-ui/icons/) section of the documentation
- * regarding the available icon options.
- */
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: 'MuiIconButton'
-  });
-  const {
-    edge = false,
-    children,
-    className,
-    color = 'default',
-    disabled = false,
-    disableFocusRipple = false,
-    size = 'medium',
-    id: idProp,
-    loading = null,
-    loadingIndicator: loadingIndicatorProp,
-    ...other
-  } = props;
-  const loadingId = useId(idProp);
-  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": loadingId,
-    color: "inherit",
-    size: 16
-  });
-  const ownerState = {
-    ...props,
-    edge,
-    color,
-    disabled,
-    disableFocusRipple,
-    loading,
-    loadingIndicator,
-    size
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(IconButtonRoot, {
-    id: loading ? loadingId : idProp,
-    className: clsx(classes.root, className),
-    centerRipple: true,
-    focusRipple: !disableFocusRipple,
-    disabled: disabled || loading,
-    ref: ref,
-    ...other,
-    ownerState: ownerState,
-    children: [typeof loading === 'boolean' &&
-    /*#__PURE__*/
-    // use plain HTML span to minimize the runtime overhead
-    _jsx("span", {
-      className: classes.loadingWrapper,
-      style: {
-        display: 'contents'
-      },
-      children: /*#__PURE__*/_jsx(IconButtonLoadingIndicator, {
-        className: classes.loadingIndicator,
-        ownerState: ownerState,
-        children: loading && loadingIndicator
-      })
-    }), children]
-  });
-});
-process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The icon to display.
-   */
-  children: chainPropTypes(PropTypes.node, props => {
-    const found = React.Children.toArray(props.children).some(child => /*#__PURE__*/React.isValidElement(child) && child.props.onClick);
-    if (found) {
-      return new Error(['MUI: You are providing an onClick event listener to a child of a button element.', 'Prefer applying it to the IconButton directly.', 'This guarantees that the whole <button> will be responsive to click events.'].join('\n'));
-    }
-    return null;
-  }),
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * 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: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * 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: PropTypes.oneOf(['end', 'start', false]),
-  /**
-   * @ignore
-   */
-  id: PropTypes.string,
-  /**
-   * 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: PropTypes.bool,
-  /**
-   * 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: PropTypes.node,
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
-   */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export default IconButton;

package/modern/IconButton/iconButtonClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getIconButtonUtilityClass(slot) {
-  return generateUtilityClass('MuiIconButton', slot);
-}
-const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator', 'loadingWrapper']);
-export default iconButtonClasses;

package/modern/IconButton/index.js

@@ -1,3 +0,0 @@
-export { default } from "./IconButton.js";
-export { default as iconButtonClasses } from "./iconButtonClasses.js";
-export * from "./iconButtonClasses.js";

package/modern/ImageList/ImageList.js

@@ -1,150 +0,0 @@
-'use client';
-
-import composeClasses from '@mui/utils/composeClasses';
-import integerPropType from '@mui/utils/integerPropType';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import * as React from 'react';
-import { styled } from "../zero-styled/index.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import { getImageListUtilityClass } from "./imageListClasses.js";
-import ImageListContext from "./ImageListContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    variant
-  } = ownerState;
-  const slots = {
-    root: ['root', variant]
-  };
-  return composeClasses(slots, getImageListUtilityClass, classes);
-};
-const ImageListRoot = styled('ul', {
-  name: 'MuiImageList',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[ownerState.variant]];
-  }
-})({
-  display: 'grid',
-  overflowY: 'auto',
-  listStyle: 'none',
-  padding: 0,
-  // Add iOS momentum scrolling for iOS < 13.0
-  WebkitOverflowScrolling: 'touch',
-  variants: [{
-    props: {
-      variant: 'masonry'
-    },
-    style: {
-      display: 'block'
-    }
-  }]
-});
-const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: 'MuiImageList'
-  });
-  const {
-    children,
-    className,
-    cols = 2,
-    component = 'ul',
-    rowHeight = 'auto',
-    gap = 4,
-    style: styleProp,
-    variant = 'standard',
-    ...other
-  } = props;
-  const contextValue = React.useMemo(() => ({
-    rowHeight,
-    gap,
-    variant
-  }), [rowHeight, gap, variant]);
-  const style = variant === 'masonry' ? {
-    columnCount: cols,
-    columnGap: gap,
-    ...styleProp
-  } : {
-    gridTemplateColumns: `repeat(${cols}, 1fr)`,
-    gap,
-    ...styleProp
-  };
-  const ownerState = {
-    ...props,
-    component,
-    gap,
-    rowHeight,
-    variant
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ImageListRoot, {
-    as: component,
-    className: clsx(classes.root, classes[variant], className),
-    ref: ref,
-    style: style,
-    ownerState: ownerState,
-    ...other,
-    children: /*#__PURE__*/_jsx(ImageListContext.Provider, {
-      value: contextValue,
-      children: children
-    })
-  });
-});
-process.env.NODE_ENV !== "production" ? ImageList.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component, normally `ImageListItem`s.
-   */
-  children: PropTypes /* @typescript-to-proptypes-ignore */.node.isRequired,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * Number of columns.
-   * @default 2
-   */
-  cols: integerPropType,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The gap between items in px.
-   * @default 4
-   */
-  gap: PropTypes.number,
-  /**
-   * The height of one row in px.
-   * @default 'auto'
-   */
-  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The variant to use.
-   * @default 'standard'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['masonry', 'quilted', 'standard', 'woven']), PropTypes.string])
-} : void 0;
-export default ImageList;

package/modern/ImageList/ImageListContext.js

@@ -1,13 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-/**
- * @ignore - internal component.
- * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
- */
-const ImageListContext = /*#__PURE__*/React.createContext({});
-if (process.env.NODE_ENV !== 'production') {
-  ImageListContext.displayName = 'ImageListContext';
-}
-export default ImageListContext;

package/modern/ImageList/imageListClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getImageListUtilityClass(slot) {
-  return generateUtilityClass('MuiImageList', slot);
-}
-const imageListClasses = generateUtilityClasses('MuiImageList', ['root', 'masonry', 'quilted', 'standard', 'woven']);
-export default imageListClasses;

package/modern/ImageList/index.js

@@ -1,3 +0,0 @@
-export { default } from "./ImageList.js";
-export * from "./imageListClasses.js";
-export { default as imageListClasses } from "./imageListClasses.js";

package/modern/ImageListItem/ImageListItem.js

@@ -1,188 +0,0 @@
-'use client';
-
-import composeClasses from '@mui/utils/composeClasses';
-import integerPropType from '@mui/utils/integerPropType';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import * as React from 'react';
-import { isFragment } from 'react-is';
-import ImageListContext from "../ImageList/ImageListContext.js";
-import { styled } from "../zero-styled/index.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import isMuiElement from "../utils/isMuiElement.js";
-import imageListItemClasses, { getImageListItemUtilityClass } from "./imageListItemClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    variant
-  } = ownerState;
-  const slots = {
-    root: ['root', variant],
-    img: ['img']
-  };
-  return composeClasses(slots, getImageListItemUtilityClass, classes);
-};
-const ImageListItemRoot = styled('li', {
-  name: 'MuiImageListItem',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [{
-      [`& .${imageListItemClasses.img}`]: styles.img
-    }, styles.root, styles[ownerState.variant]];
-  }
-})({
-  display: 'block',
-  position: 'relative',
-  [`& .${imageListItemClasses.img}`]: {
-    objectFit: 'cover',
-    width: '100%',
-    height: '100%',
-    display: 'block'
-  },
-  variants: [{
-    props: {
-      variant: 'standard'
-    },
-    style: {
-      // For titlebar under list item
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, {
-    props: {
-      variant: 'woven'
-    },
-    style: {
-      height: '100%',
-      alignSelf: 'center',
-      '&:nth-of-type(even)': {
-        height: '70%'
-      }
-    }
-  }, {
-    props: {
-      variant: 'standard'
-    },
-    style: {
-      [`& .${imageListItemClasses.img}`]: {
-        height: 'auto',
-        flexGrow: 1
-      }
-    }
-  }]
-});
-const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: 'MuiImageListItem'
-  });
-
-  // TODO: - Use jsdoc @default?: "cols rows default values are for docs only"
-  const {
-    children,
-    className,
-    cols = 1,
-    component = 'li',
-    rows = 1,
-    style,
-    ...other
-  } = props;
-  const {
-    rowHeight = 'auto',
-    gap,
-    variant
-  } = React.useContext(ImageListContext);
-  let height = 'auto';
-  if (variant === 'woven') {
-    height = undefined;
-  } else if (rowHeight !== 'auto') {
-    height = rowHeight * rows + gap * (rows - 1);
-  }
-  const ownerState = {
-    ...props,
-    cols,
-    component,
-    gap,
-    rowHeight,
-    rows,
-    variant
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ImageListItemRoot, {
-    as: component,
-    className: clsx(classes.root, classes[variant], className),
-    ref: ref,
-    style: {
-      height,
-      gridColumnEnd: variant !== 'masonry' ? `span ${cols}` : undefined,
-      gridRowEnd: variant !== 'masonry' ? `span ${rows}` : undefined,
-      marginBottom: variant === 'masonry' ? gap : undefined,
-      breakInside: variant === 'masonry' ? 'avoid' : undefined,
-      ...style
-    },
-    ownerState: ownerState,
-    ...other,
-    children: React.Children.map(children, child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return null;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        if (isFragment(child)) {
-          console.error(["MUI: The ImageListItem component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-        }
-      }
-      if (child.type === 'img' || isMuiElement(child, ['Image'])) {
-        return /*#__PURE__*/React.cloneElement(child, {
-          className: clsx(classes.img, child.props.className)
-        });
-      }
-      return child;
-    })
-  });
-});
-process.env.NODE_ENV !== "production" ? ImageListItem.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component, normally an `<img>`.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * Width of the item in number of grid columns.
-   * @default 1
-   */
-  cols: integerPropType,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * Height of the item in number of grid rows.
-   * @default 1
-   */
-  rows: integerPropType,
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export default ImageListItem;