@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.3

package/legacy/Autocomplete/autocompleteClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getAutocompleteUtilityClass(slot) {
-  return generateUtilityClass('MuiAutocomplete', slot);
-}
-var autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
-export default autocompleteClasses;

package/legacy/Autocomplete/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default, createFilterOptions } from './Autocomplete';
-export { default as autocompleteClasses } from './autocompleteClasses';
-export * from './autocompleteClasses';

package/legacy/Avatar/Avatar.js

@@ -1,296 +0,0 @@
-'use client';
-
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import Person from '../internal/svg-icons/Person';
-import { getAvatarUtilityClass } from './avatarClasses';
-import useSlot from '../utils/useSlot';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useThemeProps = createUseThemeProps('MuiAvatar');
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    variant = ownerState.variant,
-    colorDefault = ownerState.colorDefault;
-  var slots = {
-    root: ['root', variant, colorDefault && 'colorDefault'],
-    img: ['img'],
-    fallback: ['fallback']
-  };
-  return composeClasses(slots, getAvatarUtilityClass, classes);
-};
-var AvatarRoot = styled('div', {
-  name: 'MuiAvatar',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    var ownerState = props.ownerState;
-    return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
-  }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    width: 40,
-    height: 40,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.pxToRem(20),
-    lineHeight: 1,
-    borderRadius: '50%',
-    overflow: 'hidden',
-    userSelect: 'none',
-    variants: [{
-      props: {
-        variant: 'rounded'
-      },
-      style: {
-        borderRadius: (theme.vars || theme).shape.borderRadius
-      }
-    }, {
-      props: {
-        variant: 'square'
-      },
-      style: {
-        borderRadius: 0
-      }
-    }, {
-      props: {
-        colorDefault: true
-      },
-      style: _extends({
-        color: (theme.vars || theme).palette.background.default
-      }, theme.vars ? {
-        backgroundColor: theme.vars.palette.Avatar.defaultBg
-      } : _extends({
-        backgroundColor: theme.palette.grey[400]
-      }, theme.applyStyles('dark', {
-        backgroundColor: theme.palette.grey[600]
-      })))
-    }]
-  };
-});
-var AvatarImg = styled('img', {
-  name: 'MuiAvatar',
-  slot: 'Img',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.img;
-  }
-})({
-  width: '100%',
-  height: '100%',
-  textAlign: 'center',
-  // Handle non-square image. The property isn't supported by IE11.
-  objectFit: 'cover',
-  // Hide alt text.
-  color: 'transparent',
-  // Hide the image broken icon, only works on Chrome.
-  textIndent: 10000
-});
-var AvatarFallback = styled(Person, {
-  name: 'MuiAvatar',
-  slot: 'Fallback',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.fallback;
-  }
-})({
-  width: '75%',
-  height: '75%'
-});
-function useLoaded(_ref2) {
-  var crossOrigin = _ref2.crossOrigin,
-    referrerPolicy = _ref2.referrerPolicy,
-    src = _ref2.src,
-    srcSet = _ref2.srcSet;
-  var _React$useState = React.useState(false),
-    loaded = _React$useState[0],
-    setLoaded = _React$useState[1];
-  React.useEffect(function () {
-    if (!src && !srcSet) {
-      return undefined;
-    }
-    setLoaded(false);
-    var active = true;
-    var image = new Image();
-    image.onload = function () {
-      if (!active) {
-        return;
-      }
-      setLoaded('loaded');
-    };
-    image.onerror = function () {
-      if (!active) {
-        return;
-      }
-      setLoaded('error');
-    };
-    image.crossOrigin = crossOrigin;
-    image.referrerPolicy = referrerPolicy;
-    image.src = src;
-    if (srcSet) {
-      image.srcset = srcSet;
-    }
-    return function () {
-      active = false;
-    };
-  }, [crossOrigin, referrerPolicy, src, srcSet]);
-  return loaded;
-}
-var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiAvatar'
-  });
-  var alt = props.alt,
-    childrenProp = props.children,
-    className = props.className,
-    _props$component = props.component,
-    component = _props$component === void 0 ? 'div' : _props$component,
-    _props$slots = props.slots,
-    slots = _props$slots === void 0 ? {} : _props$slots,
-    _props$slotProps = props.slotProps,
-    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
-    imgProps = props.imgProps,
-    sizes = props.sizes,
-    src = props.src,
-    srcSet = props.srcSet,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'circular' : _props$variant,
-    other = _objectWithoutProperties(props, ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"]);
-  var children = null;
-
-  // Use a hook instead of onError on the img element to support server-side rendering.
-  var loaded = useLoaded(_extends({}, imgProps, {
-    src: src,
-    srcSet: srcSet
-  }));
-  var hasImg = src || srcSet;
-  var hasImgNotFailing = hasImg && loaded !== 'error';
-  var ownerState = _extends({}, props, {
-    colorDefault: !hasImgNotFailing,
-    component: component,
-    variant: variant
-  });
-  var classes = useUtilityClasses(ownerState);
-  var _useSlot = useSlot('img', {
-      className: classes.img,
-      elementType: AvatarImg,
-      externalForwardedProps: {
-        slots: slots,
-        slotProps: {
-          img: _extends({}, imgProps, slotProps.img)
-        }
-      },
-      additionalProps: {
-        alt: alt,
-        src: src,
-        srcSet: srcSet,
-        sizes: sizes
-      },
-      ownerState: ownerState
-    }),
-    _useSlot2 = _slicedToArray(_useSlot, 2),
-    ImgSlot = _useSlot2[0],
-    imgSlotProps = _useSlot2[1];
-  if (hasImgNotFailing) {
-    children = /*#__PURE__*/_jsx(ImgSlot, _extends({}, imgSlotProps));
-    // We only render valid children, non valid children are rendered with a fallback
-    // We consider that invalid children are all falsy values, except 0, which is valid.
-  } else if (!!childrenProp || childrenProp === 0) {
-    children = childrenProp;
-  } else if (hasImg && alt) {
-    children = alt[0];
-  } else {
-    children = /*#__PURE__*/_jsx(AvatarFallback, {
-      ownerState: ownerState,
-      className: classes.fallback
-    });
-  }
-  return /*#__PURE__*/_jsx(AvatarRoot, _extends({
-    as: component,
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
-    children: children
-  }));
-});
-process.env.NODE_ENV !== "production" ? Avatar.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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Used in combination with `src` or `srcSet` to
-   * provide an alt attribute for the rendered `img` element.
-   */
-  alt: PropTypes.string,
-  /**
-   * Used to render icon or text elements inside the Avatar if `src` is not set.
-   * This can be an element, or just a string.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
-   * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   */
-  imgProps: PropTypes.object,
-  /**
-   * The `sizes` attribute for the `img` element.
-   */
-  sizes: PropTypes.string,
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * The components used for each slot inside.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    img: PropTypes.elementType
-  }),
-  /**
-   * The `src` attribute for the `img` element.
-   */
-  src: PropTypes.string,
-  /**
-   * The `srcSet` attribute for the `img` element.
-   * Use this attribute for responsive image display.
-   */
-  srcSet: 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]),
-  /**
-   * The shape of the avatar.
-   * @default 'circular'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
-} : void 0;
-export default Avatar;

package/legacy/Avatar/avatarClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getAvatarUtilityClass(slot) {
-  return generateUtilityClass('MuiAvatar', slot);
-}
-var avatarClasses = generateUtilityClasses('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
-export default avatarClasses;

package/legacy/Avatar/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default } from './Avatar';
-export { default as avatarClasses } from './avatarClasses';
-export * from './avatarClasses';

package/legacy/AvatarGroup/AvatarGroup.js

@@ -1,205 +0,0 @@
-'use client';
-
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { isFragment } from 'react-is';
-import clsx from 'clsx';
-import chainPropTypes from '@mui/utils/chainPropTypes';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import Avatar, { avatarClasses } from '../Avatar';
-import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var SPACINGS = {
-  small: -16,
-  medium: -8
-};
-var useThemeProps = createUseThemeProps('MuiAlert');
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['root'],
-    avatar: ['avatar']
-  };
-  return composeClasses(slots, getAvatarGroupUtilityClass, classes);
-};
-var AvatarGroupRoot = styled('div', {
-  name: 'MuiAvatarGroup',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses.avatar), styles.avatar), styles.root);
-  }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return _defineProperty({
-    display: 'flex',
-    flexDirection: 'row-reverse'
-  }, "& .".concat(avatarClasses.root), {
-    border: "2px solid ".concat((theme.vars || theme).palette.background.default),
-    boxSizing: 'content-box',
-    marginLeft: 'var(--AvatarGroup-spacing, -8px)',
-    '&:last-child': {
-      marginLeft: 0
-    }
-  });
-});
-var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  var _slotProps$additional;
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiAvatarGroup'
-  });
-  var childrenProp = props.children,
-    className = props.className,
-    _props$component = props.component,
-    component = _props$component === void 0 ? 'div' : _props$component,
-    _props$componentsProp = props.componentsProps,
-    componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-    _props$max = props.max,
-    max = _props$max === void 0 ? 5 : _props$max,
-    renderSurplus = props.renderSurplus,
-    _props$slotProps = props.slotProps,
-    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
-    _props$spacing = props.spacing,
-    spacing = _props$spacing === void 0 ? 'medium' : _props$spacing,
-    total = props.total,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'circular' : _props$variant,
-    other = _objectWithoutProperties(props, ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"]);
-  var clampedMax = max < 2 ? 2 : max;
-  var ownerState = _extends({}, props, {
-    max: max,
-    spacing: spacing,
-    component: component,
-    variant: variant
-  });
-  var classes = useUtilityClasses(ownerState);
-  var children = React.Children.toArray(childrenProp).filter(function (child) {
-    if (process.env.NODE_ENV !== 'production') {
-      if (isFragment(child)) {
-        console.error(["MUI: The AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-      }
-    }
-    return /*#__PURE__*/React.isValidElement(child);
-  });
-  var totalAvatars = total || children.length;
-  if (totalAvatars === clampedMax) {
-    clampedMax += 1;
-  }
-  clampedMax = Math.min(totalAvatars + 1, clampedMax);
-  var maxAvatars = Math.min(children.length, clampedMax - 1);
-  var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
-  var extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : "+".concat(extraAvatars);
-  var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
-  var marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
-  return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
-    as: component,
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsx(Avatar, _extends({
-      variant: variant
-    }, additionalAvatarSlotProps, {
-      className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
-      style: _extends({
-        '--AvatarRoot-spacing': marginValue ? "".concat(marginValue, "px") : undefined
-      }, other.style),
-      children: extraAvatarsElement
-    })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        className: clsx(child.props.className, classes.avatar),
-        variant: child.props.variant || variant
-      });
-    })]
-  }));
-});
-process.env.NODE_ENV !== "production" ? AvatarGroup.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 avatars to stack.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-   *
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    additionalAvatar: PropTypes.object
-  }),
-  /**
-   * Max avatars to show before +x.
-   * @default 5
-   */
-  max: chainPropTypes(PropTypes.number, function (props) {
-    if (props.max < 2) {
-      return new Error(['MUI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
-    }
-    return null;
-  }),
-  /**
-   * custom renderer of extraAvatars
-   * @param {number} surplus number of extra avatars
-   * @returns {React.ReactNode} custom element to display
-   */
-  renderSurplus: PropTypes.func,
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    additionalAvatar: PropTypes.object
-  }),
-  /**
-   * Spacing between avatars.
-   * @default 'medium'
-   */
-  spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), 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 total number of avatars. Used for calculating the number of extra avatars.
-   * @default children.length
-   */
-  total: PropTypes.number,
-  /**
-   * The variant to use.
-   * @default 'circular'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
-} : void 0;
-export default AvatarGroup;

package/legacy/AvatarGroup/avatarGroupClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getAvatarGroupUtilityClass(slot) {
-  return generateUtilityClass('MuiAvatarGroup', slot);
-}
-var avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
-export default avatarGroupClasses;

package/legacy/AvatarGroup/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default } from './AvatarGroup';
-export { default as avatarGroupClasses } from './avatarGroupClasses';
-export * from './avatarGroupClasses';