[material-ui][ListItem] Removing deprecated props

docs/data/material/integrations/routing/ListRouter.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
 import Box from '@mui/material/Box';
-import ListItem from '@mui/material/ListItem';
 import Paper from '@mui/material/Paper';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -18,6 +17,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 import { StaticRouter } from 'react-router-dom/server';
+import { ListItemButton } from '@mui/material';
 
 function Router(props) {
   const { children } = props;
@@ -45,10 +45,10 @@ function ListItemLink(props) {
 
   return (
     <li>
-      <ListItem button component={Link} to={to}>
+      <ListItemButton component={Link} to={to}>
         {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
         <ListItemText primary={primary} />
-      </ListItem>
+      </ListItemButton>
     </li>
   );
 }

docs/data/material/integrations/routing/ListRouter.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import List from '@mui/material/List';
 import Box from '@mui/material/Box';
-import ListItem from '@mui/material/ListItem';
 import Paper from '@mui/material/Paper';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -18,6 +17,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 import { StaticRouter } from 'react-router-dom/server';
+import { ListItemButton } from '@mui/material';
 
 function Router(props: { children?: React.ReactNode }) {
   const { children } = props;
@@ -49,10 +49,10 @@ function ListItemLink(props: ListItemLinkProps) {
 
   return (
     <li>
-      <ListItem button component={Link} to={to}>
+      <ListItemButton component={Link} to={to}>
         {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
         <ListItemText primary={primary} />
-      </ListItem>
+      </ListItemButton>
     </li>
   );
 }

docs/pages/material-ui/api/list-item.json

@@ -4,18 +4,6 @@
       "type": { "name": "enum", "description": "'center'<br>&#124;&nbsp;'flex-start'" },
       "default": "'center'"
     },
-    "autoFocus": {
-      "type": { "name": "bool" },
-      "default": "false",
-      "deprecated": true,
-      "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
-    },
-    "button": {
-      "type": { "name": "bool" },
-      "default": "false",
-      "deprecated": true,
-      "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
-    },
     "children": { "type": { "name": "custom", "description": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
@@ -34,22 +22,10 @@
     },
     "ContainerProps": { "type": { "name": "object" }, "default": "{}", "deprecated": true },
     "dense": { "type": { "name": "bool" }, "default": "false" },
-    "disabled": {
-      "type": { "name": "bool" },
-      "default": "false",
-      "deprecated": true,
-      "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
-    },
     "disableGutters": { "type": { "name": "bool" }, "default": "false" },
     "disablePadding": { "type": { "name": "bool" }, "default": "false" },
     "divider": { "type": { "name": "bool" }, "default": "false" },
     "secondaryAction": { "type": { "name": "node" } },
-    "selected": {
-      "type": { "name": "bool" },
-      "default": "false",
-      "deprecated": true,
-      "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
-    },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: object }" },
       "default": "{}"
@@ -78,12 +54,6 @@
       "description": "Styles applied to the component element if `alignItems=\"flex-start\"`.",
       "isGlobal": false
     },
-    {
-      "key": "button",
-      "className": "MuiListItem-button",
-      "description": "Styles applied to the inner `component` element if `button={true}`.",
-      "isGlobal": false
-    },
     {
       "key": "container",
       "className": "MuiListItem-container",
@@ -96,24 +66,12 @@
       "description": "Styles applied to the component element if dense.",
       "isGlobal": false
     },
-    {
-      "key": "disabled",
-      "className": "Mui-disabled",
-      "description": "State class applied to the inner `component` element if `disabled={true}`.",
-      "isGlobal": true
-    },
     {
       "key": "divider",
       "className": "MuiListItem-divider",
       "description": "Styles applied to the inner `component` element if `divider={true}`.",
       "isGlobal": false
     },
-    {
-      "key": "focusVisible",
-      "className": "Mui-focusVisible",
-      "description": "State class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`.",
-      "isGlobal": true
-    },
     {
       "key": "gutters",
       "className": "MuiListItem-gutters",
@@ -137,12 +95,6 @@
       "className": "MuiListItem-secondaryAction",
       "description": "Styles applied to the component element if `children` includes `ListItemSecondaryAction`.",
       "isGlobal": false
-    },
-    {
-      "key": "selected",
-      "className": "Mui-selected",
-      "description": "State class applied to the root element if `selected={true}`.",
-      "isGlobal": true
     }
   ],
   "spread": true,

docs/translations/api-docs/list-item/list-item.json

@@ -2,12 +2,6 @@
   "componentDescription": "Uses an additional container component if `ListItemSecondaryAction` is the last child.",
   "propDescriptions": {
     "alignItems": { "description": "Defines the <code>align-items</code> style property." },
-    "autoFocus": {
-      "description": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true."
-    },
-    "button": {
-      "description": "If <code>true</code>, the list item is a button (using <code>ButtonBase</code>). Props intended for <code>ButtonBase</code> can then be applied to <code>ListItem</code>."
-    },
     "children": {
       "description": "The content of the component if a <code>ListItemSecondaryAction</code> is used it must be the last child."
     },
@@ -29,7 +23,6 @@
     "dense": {
       "description": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component."
     },
-    "disabled": { "description": "If <code>true</code>, the component is disabled." },
     "disableGutters": {
       "description": "If <code>true</code>, the left and right padding is removed."
     },
@@ -38,7 +31,6 @@
       "description": "If <code>true</code>, a 1px light border is added to the bottom of the list item."
     },
     "secondaryAction": { "description": "The element to display at the end of ListItem." },
-    "selected": { "description": "Use to apply selected styling." },
     "slotProps": {
       "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future."
     },
@@ -55,11 +47,6 @@
       "nodeName": "the component element",
       "conditions": "<code>alignItems=\"flex-start\"</code>"
     },
-    "button": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner <code>component</code> element",
-      "conditions": "<code>button={true}</code>"
-    },
     "container": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the container element",
@@ -70,21 +57,11 @@
       "nodeName": "the component element",
       "conditions": "dense"
     },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner <code>component</code> element",
-      "conditions": "<code>disabled={true}</code>"
-    },
     "divider": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the inner <code>component</code> element",
       "conditions": "<code>divider={true}</code>"
     },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the <code>component</code>&#39;s <code>focusVisibleClassName</code> prop",
-      "conditions": "<code>button={true}</code>"
-    },
     "gutters": {
       "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the inner <code>component</code> element",
@@ -103,11 +80,6 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the component element",
       "conditions": "<code>children</code> includes <code>ListItemSecondaryAction</code>"
-    },
-    "selected": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>selected={true}</code>"
     }
   }
 }

packages/mui-material/src/ListItem/ListItem.d.ts

@@ -16,13 +16,6 @@ export interface ListItemBaseProps {
    * @default 'center'
    */
   alignItems?: 'flex-start' | 'center';
-  /**
-   * 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
-   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
-   */
-  autoFocus?: boolean;
   /**
    * The content of the component if a `ListItemSecondaryAction` is used it must
    * be the last child.
@@ -50,12 +43,6 @@ export interface ListItemBaseProps {
    * @default false
    */
   dense?: boolean;
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
-   */
-  disabled?: boolean;
   /**
    * If `true`, the left and right padding is removed.
    * @default false
@@ -75,12 +62,6 @@ export interface ListItemBaseProps {
    * The element to display at the end of ListItem.
    */
   secondaryAction?: React.ReactNode;
-  /**
-   * Use to apply selected styling.
-   * @default false
-   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
-   */
-  selected?: boolean;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -151,35 +132,8 @@ export interface ListItemTypeMap<AdditionalProps, RootComponent extends React.El
  *
  * - [ListItem API](https://mui.com/material-ui/api/list-item/)
  */
-declare const ListItem: ExtendButtonBase<
-  ListItemTypeMap<
-    {
-      /**
-       * If `true`, the list item is a button (using `ButtonBase`). Props intended
-       * for `ButtonBase` can then be applied to `ListItem`.
-       * @default false
-       * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
-       *
-       */
-      button: true;
-    },
-    'div'
-  >
-> &
-  OverridableComponent<
-    ListItemTypeMap<
-      {
-        /**
-         * If `true`, the list item is a button (using `ButtonBase`). Props intended
-         * for `ButtonBase` can then be applied to `ListItem`.
-         * @default false
-         * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
-         */
-        button?: false;
-      },
-      'li'
-    >
-  >;
+declare const ListItem: ExtendButtonBase<ListItemTypeMap<{}, 'div'>> &
+  OverridableComponent<ListItemTypeMap<{}, 'li'>>;
 
 export type ListItemProps<
   RootComponent extends React.ElementType = 'li',