@mui/material 5.14.7 → 5.14.8

package/ListItem/ListItem.d.ts

@@ -7,6 +7,9 @@ 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.
@@ -84,55 +87,56 @@ export interface ListItemBaseProps {
   sx?: SxProps<Theme>;
 }
 
-export interface ListItemTypeMap<AdditionalProps, DefaultComponent extends React.ElementType> {
-  props: AdditionalProps &
-    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<HTMLDivElement> & 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<HTMLDivElement> & 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;
-      };
-    };
-  defaultComponent: DefaultComponent;
+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<HTMLDivElement> & 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<HTMLDivElement> & 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<AdditionalProps, RootComponent extends React.ElementType> {
+  props: AdditionalProps & ListItemOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**

package/ListItemButton/ListItemButton.d.ts

@@ -5,6 +5,10 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { ListItemButtonClasses } from './listItemButtonClasses';
 
+/**
+ * This interface is kept for backward compatibility. To extend `LitItemButton`
+ * props through module augmentation, use `ListItemButtonOwnProps`.
+ */
 export interface ListItemButtonBaseProps {
   /**
    * Defines the `align-items` style property.
@@ -58,12 +62,14 @@ export interface ListItemButtonBaseProps {
   sx?: SxProps<Theme>;
 }
 
+export interface ListItemButtonOwnProps extends ListItemButtonBaseProps {}
+
 export type ListItemButtonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & ListItemButtonBaseProps;
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ListItemButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**

package/ListSubheader/ListSubheader.d.ts

@@ -4,45 +4,47 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ListSubheaderClasses } from './listSubheaderClasses';
 
+export interface ListSubheaderOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListSubheaderClasses>;
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'default'
+   */
+  color?: 'default' | 'primary' | 'inherit';
+  /**
+   * If `true`, the List Subheader will not have gutters.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * If `true`, the List Subheader will not stick to the top during scroll.
+   * @default false
+   */
+  disableSticky?: boolean;
+  /**
+   * If `true`, the List Subheader is indented.
+   * @default false
+   */
+  inset?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ListSubheaderTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'li',
+  RootComponent extends React.ElementType = 'li',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ListSubheaderClasses>;
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'default'
-     */
-    color?: 'default' | 'primary' | 'inherit';
-    /**
-     * If `true`, the List Subheader will not have gutters.
-     * @default false
-     */
-    disableGutters?: boolean;
-    /**
-     * If `true`, the List Subheader will not stick to the top during scroll.
-     * @default false
-     */
-    disableSticky?: boolean;
-    /**
-     * If `true`, the List Subheader is indented.
-     * @default false
-     */
-    inset?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ListSubheaderOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**

package/MenuItem/MenuItem.d.ts

@@ -1,56 +1,59 @@
+import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '../styles';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { MenuItemClasses } from './menuItemClasses';
 
+export interface MenuItemOwnProps {
+  /**
+   * 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?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MenuItemClasses>;
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
+   */
+  divider?: boolean;
+  /**
+   * If `true`, the component is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type MenuItemTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'li',
+  RootComponent extends React.ElementType = 'li',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * 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?: boolean;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<MenuItemClasses>;
-    /**
-     * If `true`, compact vertical padding designed for keyboard and mouse input is used.
-     * The prop defaults to the value inherited from the parent Menu component.
-     * @default false
-     */
-    dense?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the left and right padding is removed.
-     * @default false
-     */
-    disableGutters?: boolean;
-    /**
-     * If `true`, a 1px light border is added to the bottom of the menu item.
-     * @default false
-     */
-    divider?: boolean;
-    /**
-     * If `true`, the component is selected.
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & MenuItemOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**

package/MenuList/MenuList.d.ts

@@ -2,44 +2,46 @@ import * as React from 'react';
 import { ExtendList, ExtendListTypeMap } from '../List';
 import { OverrideProps } from '../OverridableComponent';
 
+export interface MenuListOwnProps {
+  /**
+   * If `true`, will focus the `[role="menu"]` container and move into tab order.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * If `true`, will focus the first menuitem if `variant="menu"` or selected item
+   * if `variant="selectedMenu"`.
+   * @default false
+   */
+  autoFocusItem?: boolean;
+  /**
+   * MenuList contents, normally `MenuItem`s.
+   */
+  children?: React.ReactNode;
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  /**
+   * If `true`, the menu items will not wrap focus.
+   * @default false
+   */
+  disableListWrap?: boolean;
+  /**
+   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
+   * and the vertical alignment relative to the anchor element.
+   * @default 'selectedMenu'
+   */
+  variant?: 'menu' | 'selectedMenu';
+}
+
 export type MenuListTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'ul',
+  RootComponent extends React.ElementType = 'ul',
 > = ExtendListTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * If `true`, will focus the `[role="menu"]` container and move into tab order.
-     * @default false
-     */
-    autoFocus?: boolean;
-    /**
-     * If `true`, will focus the first menuitem if `variant="menu"` or selected item
-     * if `variant="selectedMenu"`.
-     * @default false
-     */
-    autoFocusItem?: boolean;
-    /**
-     * MenuList contents, normally `MenuItem`s.
-     */
-    children?: React.ReactNode;
-    /**
-     * If `true`, will allow focus on disabled items.
-     * @default false
-     */
-    disabledItemsFocusable?: boolean;
-    /**
-     * If `true`, the menu items will not wrap focus.
-     * @default false
-     */
-    disableListWrap?: boolean;
-    /**
-     * The variant to use. Use `menu` to prevent selected items from impacting the initial focus
-     * and the vertical alignment relative to the anchor element.
-     * @default 'selectedMenu'
-     */
-    variant?: 'menu' | 'selectedMenu';
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & MenuListOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 export type MenuListClassKey = keyof NonNullable<MenuListTypeMap['props']['classes']>;