import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '../styles'; import { ExtendButtonBase } from '../ButtonBase'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ListItemClasses } from './listItemClasses'; export interface ListItemComponentsPropsOverrides {} /** * This type is kept for compatibility. Use `ListItemOwnProps` instead. */ export interface ListItemBaseProps { /** * Defines the `align-items` style property. * @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. */ children?: React.ReactNode; /** * Override or extend the styles applied to the component. */ classes?: Partial; /** * The container component used when a `ListItemSecondaryAction` is the last child. * @default 'li' * @deprecated */ ContainerComponent?: React.ElementType>; /** * Props applied to the container component if used. * @default {} * @deprecated */ ContainerProps?: React.HTMLAttributes; /** * 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?: 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 */ disableGutters?: boolean; /** * If `true`, all padding is removed. * @default false */ disablePadding?: boolean; /** * If `true`, a 1px light border is added to the bottom of the list item. * @default false */ divider?: boolean; /** * 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. */ sx?: SxProps; } export interface ListItemOwnProps extends ListItemBaseProps { /** * 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?: { Root?: React.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?: { root?: React.HTMLAttributes & ListItemComponentsPropsOverrides; }; /** * 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?: { root?: React.HTMLAttributes & ListItemComponentsPropsOverrides; }; /** * 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?: { root?: React.ElementType; }; } export interface ListItemTypeMap { props: AdditionalProps & ListItemOwnProps; defaultComponent: RootComponent; } /** * Uses an additional container component if `ListItemSecondaryAction` is the last child. * * Demos: * * - [Lists](https://mui.com/material-ui/react-list/) * - [Transfer List](https://mui.com/material-ui/react-transfer-list/) * * API: * * - [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' > >; export type ListItemProps< RootComponent extends React.ElementType = 'li', AdditionalProps = {}, > = OverrideProps, RootComponent> & { component?: React.ElementType; }; export default ListItem;