@mui/material 5.10.12 → 5.10.14

package/esm/ListItem/ListItem.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className"],
-      _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"];
+  _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -26,7 +26,6 @@ export const overridesResolver = (props, styles) => {
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters, !ownerState.disablePadding && styles.padding, ownerState.button && styles.button, ownerState.hasSecondaryAction && styles.secondaryAction];
 };
-
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -46,7 +45,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getListItemUtilityClass, classes);
 };
-
 export const ListItemRoot = styled('div', {
   name: 'MuiListItem',
   slot: 'Root',
@@ -129,41 +127,41 @@ const ListItemContainer = styled('li', {
 })({
   position: 'relative'
 });
+
 /**
  * Uses an additional container component if `ListItemSecondaryAction` is the last child.
  */
-
 const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiListItem'
   });
-
   const {
-    alignItems = 'center',
-    autoFocus = false,
-    button = false,
-    children: childrenProp,
-    className,
-    component: componentProp,
-    components = {},
-    componentsProps = {},
-    ContainerComponent = 'li',
-    ContainerProps: {
-      className: ContainerClassName
-    } = {},
-    dense = false,
-    disabled = false,
-    disableGutters = false,
-    disablePadding = false,
-    divider = false,
-    focusVisibleClassName,
-    secondaryAction,
-    selected = false
-  } = props,
-        ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded),
-        other = _objectWithoutPropertiesLoose(props, _excluded2);
-
+      alignItems = 'center',
+      autoFocus = false,
+      button = false,
+      children: childrenProp,
+      className,
+      component: componentProp,
+      components = {},
+      componentsProps = {},
+      ContainerComponent = 'li',
+      ContainerProps: {
+        className: ContainerClassName
+      } = {},
+      dense = false,
+      disabled = false,
+      disableGutters = false,
+      disablePadding = false,
+      divider = false,
+      focusVisibleClassName,
+      secondaryAction,
+      selected = false,
+      slotProps = {},
+      slots = {}
+    } = props,
+    ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded),
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
   const context = React.useContext(ListContext);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -180,10 +178,10 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
       }
     }
   }, [autoFocus]);
-  const children = React.Children.toArray(childrenProp); // v4 implementation, deprecated in v5, will be removed in v6
+  const children = React.Children.toArray(childrenProp);
 
+  // v4 implementation, deprecated in v5, will be removed in v6
   const hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
-
   const ownerState = _extends({}, props, {
     alignItems,
     autoFocus,
@@ -196,30 +194,27 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     hasSecondaryAction,
     selected
   });
-
   const classes = useUtilityClasses(ownerState);
   const handleRef = useForkRef(listItemRef, ref);
-  const Root = components.Root || ListItemRoot;
-  const rootProps = componentsProps.root || {};
-
+  const Root = slots.root || components.Root || ListItemRoot;
+  const rootProps = slotProps.root || componentsProps.root || {};
   const componentProps = _extends({
     className: clsx(classes.root, rootProps.className, className),
     disabled
   }, other);
-
   let Component = componentProp || 'li';
-
   if (button) {
     componentProps.component = componentProp || 'div';
     componentProps.focusVisibleClassName = clsx(listItemClasses.focusVisible, focusVisibleClassName);
     Component = ButtonBase;
-  } // v4 implementation, deprecated in v5, will be removed in v6
-
+  }
 
+  // v4 implementation, deprecated in v5, will be removed in v6
   if (hasSecondaryAction) {
     // Use div by default.
-    Component = !componentProps.component && !componentProp ? 'div' : Component; // Avoid nesting of li > li.
+    Component = !componentProps.component && !componentProp ? 'div' : Component;
 
+    // Avoid nesting of li > li.
     if (ContainerComponent === 'li') {
       if (Component === 'li') {
         Component = 'div';
@@ -227,7 +222,6 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
         componentProps.component = 'div';
       }
     }
-
     return /*#__PURE__*/_jsx(ListContext.Provider, {
       value: childContext,
       children: /*#__PURE__*/_jsxs(ListItemContainer, _extends({
@@ -245,13 +239,11 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
       }))
     });
   }
-
   return /*#__PURE__*/_jsx(ListContext.Provider, {
     value: childContext,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       as: Component,
-      ref: handleRef,
-      ownerState: ownerState
+      ref: handleRef
     }, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
     }, componentProps, {
@@ -261,20 +253,16 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     }))
   });
 });
-process.env.NODE_ENV !== "production" ? ListItem.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * Defines the `align-items` style property.
    * @default 'center'
    */
   alignItems: PropTypes.oneOf(['center', 'flex-start']),
-
   /**
    * If `true`, the list item is focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.
@@ -282,7 +270,6 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   autoFocus: PropTypes.bool,
-
   /**
    * If `true`, the list item is a button (using `ButtonBase`). Props intended
    * for `ButtonBase` can then be applied to `ListItem`.
@@ -290,129 +277,139 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   button: PropTypes.bool,
-
   /**
    * The content of the component if a `ListItemSecondaryAction` is used it must
    * be the last child.
    */
   children: chainPropTypes(PropTypes.node, props => {
-    const children = React.Children.toArray(props.children); // React.Children.toArray(props.children).findLastIndex(isListItemSecondaryAction)
+    const children = React.Children.toArray(props.children);
 
+    // React.Children.toArray(props.children).findLastIndex(isListItemSecondaryAction)
     let secondaryActionIndex = -1;
-
     for (let i = children.length - 1; i >= 0; i -= 1) {
       const child = children[i];
-
       if (isMuiElement(child, ['ListItemSecondaryAction'])) {
         secondaryActionIndex = i;
         break;
       }
-    } //  is ListItemSecondaryAction the last child of ListItem
-
+    }
 
+    //  is ListItemSecondaryAction the last child of ListItem
     if (secondaryActionIndex !== -1 && secondaryActionIndex !== children.length - 1) {
       return new Error('MUI: You used an element after ListItemSecondaryAction. ' + 'For ListItem to detect that it has a secondary action ' + 'you must pass it as the last child to ListItem.');
     }
-
     return null;
   }),
-
   /**
    * 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 components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
     Root: PropTypes.elementType
   }),
-
   /**
-   * The props used for each slot inside the Input.
+   * 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({
     root: PropTypes.object
   }),
-
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.
    * @default 'li'
    * @deprecated
    */
   ContainerComponent: elementTypeAcceptingRef,
-
   /**
    * Props applied to the container component if used.
    * @default {}
    * @deprecated
    */
   ContainerProps: PropTypes.object,
-
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used.
    * The prop defaults to the value inherited from the parent List component.
    * @default false
    */
   dense: PropTypes.bool,
-
   /**
    * If `true`, the component is disabled.
    * @default false
    * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, the left and right padding is removed.
    * @default false
    */
   disableGutters: PropTypes.bool,
-
   /**
    * If `true`, all padding is removed.
    * @default false
    */
   disablePadding: PropTypes.bool,
-
   /**
    * If `true`, a 1px light border is added to the bottom of the list item.
    * @default false
    */
   divider: PropTypes.bool,
-
   /**
    * @ignore
    */
   focusVisibleClassName: PropTypes.string,
-
   /**
    * The element to display at the end of ListItem.
    */
   secondaryAction: PropTypes.node,
-
   /**
    * Use to apply selected styling.
    * @default false
    * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   selected: PropTypes.bool,
-
+  /**
+   * 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({
+    root: PropTypes.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/ListItemAvatar/ListItemAvatar.js

@@ -10,7 +10,6 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getListItemAvatarUtilityClass } from './listItemAvatarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -21,7 +20,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getListItemAvatarUtilityClass, classes);
 };
-
 const ListItemAvatarRoot = styled('div', {
   name: 'MuiListItemAvatar',
   slot: 'Root',
@@ -39,27 +37,23 @@ const ListItemAvatarRoot = styled('div', {
 }, ownerState.alignItems === 'flex-start' && {
   marginTop: 8
 }));
+
 /**
  * A simple wrapper to apply `List` styles to an `Avatar`.
  */
-
 const ListItemAvatar = /*#__PURE__*/React.forwardRef(function ListItemAvatar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiListItemAvatar'
   });
-
   const {
-    className
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const context = React.useContext(ListContext);
-
   const ownerState = _extends({}, props, {
     alignItems: context.alignItems
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(ListItemAvatarRoot, _extends({
     className: clsx(classes.root, className),
@@ -67,29 +61,23 @@ const ListItemAvatar = /*#__PURE__*/React.forwardRef(function ListItemAvatar(inP
     ref: ref
   }, other));
 });
-process.env.NODE_ENV !== "production" ? ListItemAvatar.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? ListItemAvatar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component, normally an `Avatar`.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/ListItemButton/ListItemButton.js

@@ -20,7 +20,6 @@ export const overridesResolver = (props, styles) => {
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
 };
-
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -37,7 +36,6 @@ const useUtilityClasses = ownerState => {
   const composedClasses = composeClasses(slots, getListItemButtonUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
-
 const ListItemButtonRoot = styled(ButtonBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
   name: 'MuiListItemButton',
@@ -105,21 +103,19 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     props: inProps,
     name: 'MuiListItemButton'
   });
-
   const {
-    alignItems = 'center',
-    autoFocus = false,
-    component = 'div',
-    children,
-    dense = false,
-    disableGutters = false,
-    divider = false,
-    focusVisibleClassName,
-    selected = false,
-    className
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      alignItems = 'center',
+      autoFocus = false,
+      component = 'div',
+      children,
+      dense = false,
+      disableGutters = false,
+      divider = false,
+      focusVisibleClassName,
+      selected = false,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const context = React.useContext(ListContext);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -136,7 +132,6 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       }
     }
   }, [autoFocus]);
-
   const ownerState = _extends({}, props, {
     alignItems,
     dense: childContext.dense,
@@ -144,7 +139,6 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     divider,
     selected
   });
-
   const classes = useUtilityClasses(ownerState);
   const handleRef = useForkRef(listItemRef, ref);
   return /*#__PURE__*/_jsx(ListContext.Provider, {
@@ -162,74 +156,61 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     }))
   });
 });
-process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? ListItemButton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * Defines the `align-items` style property.
    * @default 'center'
    */
   alignItems: PropTypes.oneOf(['center', 'flex-start']),
-
   /**
    * If `true`, the list item is focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.
    * @default false
    */
   autoFocus: PropTypes.bool,
-
   /**
    * The content of the component if a `ListItemSecondaryAction` is used it must
    * be the last child.
    */
   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,
-
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used.
    * The prop defaults to the value inherited from the parent List component.
    * @default false
    */
   dense: PropTypes.bool,
-
   /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, the left and right padding is removed.
    * @default false
    */
   disableGutters: PropTypes.bool,
-
   /**
    * If `true`, a 1px light border is added to the bottom of the list item.
    * @default false
    */
   divider: PropTypes.bool,
-
   /**
    * This prop can help identify which element has keyboard focus.
    * The class name will be applied when the element gains the focus through keyboard interaction.
@@ -239,18 +220,15 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    * if needed.
    */
   focusVisibleClassName: PropTypes.string,
-
   /**
    * @ignore
    */
   href: PropTypes.string,
-
   /**
    * Use to apply selected styling.
    * @default false
    */
   selected: PropTypes.bool,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/ListItemIcon/ListItemIcon.js

@@ -10,7 +10,6 @@ import useThemeProps from '../styles/useThemeProps';
 import { getListItemIconUtilityClass } from './listItemIconClasses';
 import ListContext from '../List/ListContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -21,7 +20,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getListItemIconUtilityClass, classes);
 };
-
 const ListItemIconRoot = styled('div', {
   name: 'MuiListItemIcon',
   slot: 'Root',
@@ -42,27 +40,23 @@ const ListItemIconRoot = styled('div', {
 }, ownerState.alignItems === 'flex-start' && {
   marginTop: 8
 }));
+
 /**
  * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
  */
-
 const ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiListItemIcon'
   });
-
   const {
-    className
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const context = React.useContext(ListContext);
-
   const ownerState = _extends({}, props, {
     alignItems: context.alignItems
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(ListItemIconRoot, _extends({
     className: clsx(classes.root, className),
@@ -70,30 +64,24 @@ const ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps
     ref: ref
   }, other));
 });
-process.env.NODE_ENV !== "production" ? ListItemIcon.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? ListItemIcon.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component, normally `Icon`, `SvgIcon`,
    * or a `@mui/icons-material` SVG icon element.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */