@mui/material 9.0.0-alpha.4 → 9.0.0-beta.0

package/ListItem/ListItem.js

@@ -11,14 +11,9 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
-var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
-var _isHostComponent = _interopRequireDefault(require("@mui/utils/isHostComponent"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
-var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _listItemClasses = require("./listItemClasses");
@@ -29,7 +24,7 @@ const overridesResolver = (props, styles) => {
   const {
     ownerState
   } = 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.hasSecondaryAction && styles.secondaryAction];
+  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];
 };
 exports.overridesResolver = overridesResolver;
 const useUtilityClasses = ownerState => {
@@ -39,12 +34,10 @@ const useUtilityClasses = ownerState => {
     dense,
     disableGutters,
     disablePadding,
-    divider,
-    hasSecondaryAction
+    divider
   } = ownerState;
   const slots = {
-    root: ['root', dense && 'dense', !disableGutters && 'gutters', !disablePadding && 'padding', divider && 'divider', alignItems === 'flex-start' && 'alignItemsFlexStart', hasSecondaryAction && 'secondaryAction'],
-    container: ['container'],
+    root: ['root', dense && 'dense', !disableGutters && 'gutters', !disablePadding && 'padding', divider && 'divider', alignItems === 'flex-start' && 'alignItemsFlexStart'],
     secondaryAction: ['secondaryAction']
   };
   return (0, _composeClasses.default)(slots, _listItemClasses.getListItemUtilityClass, classes);
@@ -138,27 +131,13 @@ const ListItemRoot = exports.ListItemRoot = (0, _zeroStyled.styled)('div', {
         }
       }
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.hasSecondaryAction,
-    style: {
-      // Add some space to avoid collision as `ListItemSecondaryAction`
-      // is absolutely positioned.
-      paddingRight: 48
-    }
   }]
 })));
-const ListItemContainer = (0, _zeroStyled.styled)('li', {
+const StyledListItemSecondaryAction = (0, _zeroStyled.styled)(_ListItemSecondaryAction.default, {
   name: 'MuiListItem',
-  slot: 'Container'
-})({
-  position: 'relative'
-});
-
-/**
- * Uses an additional container component if `ListItemSecondaryAction` is the last child.
- */
+  slot: 'secondaryAction',
+  overridesResolver: (props, styles) => styles.secondaryAction
+})({});
 const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
@@ -168,14 +147,7 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     alignItems = 'center',
     children: childrenProp,
     className,
-    component: componentProp,
-    components = {},
-    componentsProps = {},
-    ContainerComponent = 'li',
-    ContainerProps: {
-      className: ContainerClassName,
-      ...ContainerProps
-    } = {},
+    component: componentProp = 'li',
     dense = false,
     disableGutters = false,
     disablePadding = false,
@@ -191,11 +163,6 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     alignItems,
     disableGutters
   }), [alignItems, context.dense, dense, disableGutters]);
-  const listItemRef = React.useRef(null);
-  const children = React.Children.toArray(childrenProp);
-
-  // v4 implementation, deprecated in v6, will be removed in a future major release
-  const hasSecondaryAction = children.length && (0, _isMuiElement.default)(children[children.length - 1], ['ListItemSecondaryAction']);
   const ownerState = {
     ...props,
     alignItems,
@@ -203,78 +170,36 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     disableGutters,
     disablePadding,
     divider,
-    hasSecondaryAction
+    secondaryAction
   };
   const classes = useUtilityClasses(ownerState);
-  const handleRef = (0, _useForkRef.default)(listItemRef, ref);
   const externalForwardedProps = {
     slots,
     slotProps
   };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    elementType: ListItemRoot,
+    externalForwardedProps: {
+      component: componentProp,
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    className: (0, _clsx.default)(classes.root, className)
+  });
   const [SecondaryActionSlot, secondaryActionSlotProps] = (0, _useSlot.default)('secondaryAction', {
-    elementType: _ListItemSecondaryAction.default,
+    elementType: StyledListItemSecondaryAction,
+    shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
     className: classes.secondaryAction
   });
-  const Root = slots.root || components.Root || ListItemRoot;
-  const rootProps = slotProps.root || componentsProps.root || {};
-  const componentProps = {
-    className: (0, _clsx.default)(classes.root, rootProps.className, className),
-    ...other
-  };
-  let Component = componentProp || 'li';
-
-  // v4 implementation, deprecated in v6, will be removed in a future major release
-  if (hasSecondaryAction) {
-    // Use div by default.
-    Component = !componentProps.component && !componentProp ? 'div' : Component;
-
-    // Avoid nesting of li > li.
-    if (ContainerComponent === 'li') {
-      if (Component === 'li') {
-        Component = 'div';
-      } else if (componentProps.component === 'li') {
-        componentProps.component = 'div';
-      }
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListContext.default.Provider, {
-      value: childContext,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ListItemContainer, {
-        as: ContainerComponent,
-        className: (0, _clsx.default)(classes.container, ContainerClassName),
-        ref: handleRef,
-        ownerState: ownerState,
-        ...ContainerProps,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
-          ...rootProps,
-          ...(!(0, _isHostComponent.default)(Root) && {
-            as: Component,
-            ownerState: {
-              ...ownerState,
-              ...rootProps.ownerState
-            }
-          }),
-          ...componentProps,
-          children: children
-        }), children.pop()]
-      })
-    });
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListContext.default.Provider, {
     value: childContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
-      ...rootProps,
-      as: Component,
-      ref: handleRef,
-      ...(!(0, _isHostComponent.default)(Root) && {
-        ownerState: {
-          ...ownerState,
-          ...rootProps.ownerState
-        }
-      }),
-      ...componentProps,
-      children: [children, secondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryActionSlot, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+      ...rootSlotProps,
+      children: [childrenProp, secondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryActionSlot, {
         ...secondaryActionSlotProps,
         children: secondaryAction
       })]
@@ -292,28 +217,9 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
    */
   alignItems: _propTypes.default.oneOf(['center', 'flex-start']),
   /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
+   * The content of the component.
    */
-  children: (0, _chainPropTypes.default)(_propTypes.default.node, props => {
-    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 ((0, _isMuiElement.default)(child, ['ListItemSecondaryAction'])) {
-        secondaryActionIndex = i;
-        break;
-      }
-    }
-
-    //  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;
-  }),
+  children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -327,37 +233,6 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
    * Either a string to use a HTML element or a component.
    */
   component: _propTypes.default.elementType,
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  components: _propTypes.default.shape({
-    Root: _propTypes.default.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  componentsProps: _propTypes.default.shape({
-    root: _propTypes.default.object
-  }),
-  /**
-   * The container component used when a `ListItemSecondaryAction` is the last child.
-   * @default 'li'
-   * @deprecated Use the `component` or `slots.root` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ContainerComponent: _elementTypeAcceptingRef.default,
-  /**
-   * Props applied to the container component if used.
-   * @default {}
-   * @deprecated Use the `slotProps.root` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ContainerProps: _propTypes.default.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.

package/ListItem/ListItem.mjs

@@ -4,14 +4,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
-import chainPropTypes from '@mui/utils/chainPropTypes';
-import isHostComponent from '@mui/utils/isHostComponent';
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
-import isMuiElement from "../utils/isMuiElement.mjs";
-import useForkRef from "../utils/useForkRef.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import ListContext from "../List/ListContext.mjs";
 import { getListItemUtilityClass } from "./listItemClasses.mjs";
@@ -22,7 +17,7 @@ export const overridesResolver = (props, styles) => {
   const {
     ownerState
   } = 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.hasSecondaryAction && styles.secondaryAction];
+  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];
 };
 const useUtilityClasses = ownerState => {
   const {
@@ -31,12 +26,10 @@ const useUtilityClasses = ownerState => {
     dense,
     disableGutters,
     disablePadding,
-    divider,
-    hasSecondaryAction
+    divider
   } = ownerState;
   const slots = {
-    root: ['root', dense && 'dense', !disableGutters && 'gutters', !disablePadding && 'padding', divider && 'divider', alignItems === 'flex-start' && 'alignItemsFlexStart', hasSecondaryAction && 'secondaryAction'],
-    container: ['container'],
+    root: ['root', dense && 'dense', !disableGutters && 'gutters', !disablePadding && 'padding', divider && 'divider', alignItems === 'flex-start' && 'alignItemsFlexStart'],
     secondaryAction: ['secondaryAction']
   };
   return composeClasses(slots, getListItemUtilityClass, classes);
@@ -130,27 +123,13 @@ export const ListItemRoot = styled('div', {
         }
       }
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.hasSecondaryAction,
-    style: {
-      // Add some space to avoid collision as `ListItemSecondaryAction`
-      // is absolutely positioned.
-      paddingRight: 48
-    }
   }]
 })));
-const ListItemContainer = styled('li', {
+const StyledListItemSecondaryAction = styled(ListItemSecondaryAction, {
   name: 'MuiListItem',
-  slot: 'Container'
-})({
-  position: 'relative'
-});
-
-/**
- * Uses an additional container component if `ListItemSecondaryAction` is the last child.
- */
+  slot: 'secondaryAction',
+  overridesResolver: (props, styles) => styles.secondaryAction
+})({});
 const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,
@@ -160,14 +139,7 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     alignItems = 'center',
     children: childrenProp,
     className,
-    component: componentProp,
-    components = {},
-    componentsProps = {},
-    ContainerComponent = 'li',
-    ContainerProps: {
-      className: ContainerClassName,
-      ...ContainerProps
-    } = {},
+    component: componentProp = 'li',
     dense = false,
     disableGutters = false,
     disablePadding = false,
@@ -183,11 +155,6 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     alignItems,
     disableGutters
   }), [alignItems, context.dense, dense, disableGutters]);
-  const listItemRef = React.useRef(null);
-  const children = React.Children.toArray(childrenProp);
-
-  // v4 implementation, deprecated in v6, will be removed in a future major release
-  const hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
   const ownerState = {
     ...props,
     alignItems,
@@ -195,78 +162,36 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     disableGutters,
     disablePadding,
     divider,
-    hasSecondaryAction
+    secondaryAction
   };
   const classes = useUtilityClasses(ownerState);
-  const handleRef = useForkRef(listItemRef, ref);
   const externalForwardedProps = {
     slots,
     slotProps
   };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    elementType: ListItemRoot,
+    externalForwardedProps: {
+      component: componentProp,
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    className: clsx(classes.root, className)
+  });
   const [SecondaryActionSlot, secondaryActionSlotProps] = useSlot('secondaryAction', {
-    elementType: ListItemSecondaryAction,
+    elementType: StyledListItemSecondaryAction,
+    shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
     className: classes.secondaryAction
   });
-  const Root = slots.root || components.Root || ListItemRoot;
-  const rootProps = slotProps.root || componentsProps.root || {};
-  const componentProps = {
-    className: clsx(classes.root, rootProps.className, className),
-    ...other
-  };
-  let Component = componentProp || 'li';
-
-  // v4 implementation, deprecated in v6, will be removed in a future major release
-  if (hasSecondaryAction) {
-    // Use div by default.
-    Component = !componentProps.component && !componentProp ? 'div' : Component;
-
-    // Avoid nesting of li > li.
-    if (ContainerComponent === 'li') {
-      if (Component === 'li') {
-        Component = 'div';
-      } else if (componentProps.component === 'li') {
-        componentProps.component = 'div';
-      }
-    }
-    return /*#__PURE__*/_jsx(ListContext.Provider, {
-      value: childContext,
-      children: /*#__PURE__*/_jsxs(ListItemContainer, {
-        as: ContainerComponent,
-        className: clsx(classes.container, ContainerClassName),
-        ref: handleRef,
-        ownerState: ownerState,
-        ...ContainerProps,
-        children: [/*#__PURE__*/_jsx(Root, {
-          ...rootProps,
-          ...(!isHostComponent(Root) && {
-            as: Component,
-            ownerState: {
-              ...ownerState,
-              ...rootProps.ownerState
-            }
-          }),
-          ...componentProps,
-          children: children
-        }), children.pop()]
-      })
-    });
-  }
   return /*#__PURE__*/_jsx(ListContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/_jsxs(Root, {
-      ...rootProps,
-      as: Component,
-      ref: handleRef,
-      ...(!isHostComponent(Root) && {
-        ownerState: {
-          ...ownerState,
-          ...rootProps.ownerState
-        }
-      }),
-      ...componentProps,
-      children: [children, secondaryAction && /*#__PURE__*/_jsx(SecondaryActionSlot, {
+    children: /*#__PURE__*/_jsxs(RootSlot, {
+      ...rootSlotProps,
+      children: [childrenProp, secondaryAction && /*#__PURE__*/_jsx(SecondaryActionSlot, {
         ...secondaryActionSlotProps,
         children: secondaryAction
       })]
@@ -284,28 +209,9 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
    */
   alignItems: PropTypes.oneOf(['center', 'flex-start']),
   /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
+   * The content of the component.
    */
-  children: chainPropTypes(PropTypes.node, props => {
-    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
-    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;
-  }),
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -319,37 +225,6 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Root: PropTypes.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    root: PropTypes.object
-  }),
-  /**
-   * The container component used when a `ListItemSecondaryAction` is the last child.
-   * @default 'li'
-   * @deprecated Use the `component` or `slots.root` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ContainerComponent: elementTypeAcceptingRef,
-  /**
-   * Props applied to the container component if used.
-   * @default {}
-   * @deprecated Use the `slotProps.root` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  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.

package/ListItem/listItemClasses.d.mts

@@ -1,8 +1,6 @@
 export interface ListItemClasses {
-  /** Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
+  /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the container element if `children` includes `ListItemSecondaryAction`. */
-  container: string;
   /** Styles applied to the component element if dense. */
   dense: string;
   /** Styles applied to the component element if `alignItems="flex-start"`. */
@@ -13,7 +11,7 @@ export interface ListItemClasses {
   gutters: string;
   /** Styles applied to the root element unless `disablePadding={true}`. */
   padding: string;
-  /** Styles applied to the component element if `children` includes `ListItemSecondaryAction`. */
+  /** Styles applied to the secondary action element. */
   secondaryAction: string;
 }
 export type ListItemClassKey = keyof ListItemClasses;

package/ListItem/listItemClasses.d.ts

@@ -1,8 +1,6 @@
 export interface ListItemClasses {
-  /** Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
+  /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the container element if `children` includes `ListItemSecondaryAction`. */
-  container: string;
   /** Styles applied to the component element if dense. */
   dense: string;
   /** Styles applied to the component element if `alignItems="flex-start"`. */
@@ -13,7 +11,7 @@ export interface ListItemClasses {
   gutters: string;
   /** Styles applied to the root element unless `disablePadding={true}`. */
   padding: string;
-  /** Styles applied to the component element if `children` includes `ListItemSecondaryAction`. */
+  /** Styles applied to the secondary action element. */
   secondaryAction: string;
 }
 export type ListItemClassKey = keyof ListItemClasses;

package/ListItem/listItemClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getListItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiListItem', slot);
 }
-const listItemClasses = (0, _generateUtilityClasses.default)('MuiListItem', ['root', 'container', 'dense', 'alignItemsFlexStart', 'divider', 'gutters', 'padding', 'secondaryAction']);
+const listItemClasses = (0, _generateUtilityClasses.default)('MuiListItem', ['root', 'dense', 'alignItemsFlexStart', 'divider', 'gutters', 'padding', 'secondaryAction']);
 var _default = exports.default = listItemClasses;

package/ListItem/listItemClasses.mjs

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getListItemUtilityClass(slot) {
   return generateUtilityClass('MuiListItem', slot);
 }
-const listItemClasses = generateUtilityClasses('MuiListItem', ['root', 'container', 'dense', 'alignItemsFlexStart', 'divider', 'gutters', 'padding', 'secondaryAction']);
+const listItemClasses = generateUtilityClasses('MuiListItem', ['root', 'dense', 'alignItemsFlexStart', 'divider', 'gutters', 'padding', 'secondaryAction']);
 export default listItemClasses;

package/ListItemButton/ListItemButton.d.mts

@@ -22,8 +22,7 @@ export interface ListItemButtonBaseProps {
    */
   autoFocus?: boolean | undefined;
   /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
+   * The content of the component.
    */
   children?: React.ReactNode;
   /**

package/ListItemButton/ListItemButton.d.ts

@@ -22,8 +22,7 @@ export interface ListItemButtonBaseProps {
    */
   autoFocus?: boolean | undefined;
   /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
+   * The content of the component.
    */
   children?: React.ReactNode;
   /**

package/ListItemButton/ListItemButton.js

@@ -207,8 +207,7 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes /* remove-propt
    */
   autoFocus: _propTypes.default.bool,
   /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
+   * The content of the component.
    */
   children: _propTypes.default.node,
   /**

package/ListItemButton/ListItemButton.mjs

@@ -199,8 +199,7 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes /* remove-propt
    */
   autoFocus: PropTypes.bool,
   /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
+   * The content of the component.
    */
   children: PropTypes.node,
   /**

package/ListItemSecondaryAction/ListItemSecondaryAction.d.mts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
 import { Theme } from "../styles/index.mjs";
-import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { ListItemSecondaryActionClasses } from "./listItemSecondaryActionClasses.mjs";
-export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface ListItemSecondaryActionOwnProps {
   /**
    * The content of the component, normally an `IconButton` or selection control.
    */
@@ -17,7 +17,10 @@ export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAt
    */
   sx?: SxProps<Theme> | undefined;
 }
-
+export interface ListItemSecondaryActionTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & ListItemSecondaryActionOwnProps;
+  defaultComponent: RootComponent;
+}
 /**
  * Must be used as the last child of ListItem to function properly.
  *
@@ -28,10 +31,11 @@ export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAt
  * API:
  *
  * - [ListItemSecondaryAction API](https://next.mui.com/material-ui/api/list-item-secondary-action/)
- *
- * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
  */
-declare const ListItemSecondaryAction: ((props: ListItemSecondaryActionProps) => React.JSX.Element) & {
+declare const ListItemSecondaryAction: OverridableComponent<ListItemSecondaryActionTypeMap> & {
   muiName: string;
 };
+export type ListItemSecondaryActionProps<RootComponent extends React.ElementType = ListItemSecondaryActionTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ListItemSecondaryActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType | undefined;
+};
 export default ListItemSecondaryAction;