@mui/material 5.14.2 → 5.14.3

package/Menu/Menu.js

@@ -3,12 +3,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onEntering"],
-  _excluded2 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
+  _excluded2 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import { HTMLElementType } from '@mui/utils';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
@@ -63,6 +63,7 @@ const MenuMenuList = styled(MenuList, {
   outline: 0
 });
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
+  var _slots$paper, _slotProps$paper;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMenu'
@@ -70,6 +71,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   const {
       autoFocus = true,
       children,
+      className,
       disableAutoFocusItem = false,
       MenuListProps = {},
       onClose,
@@ -80,7 +82,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       TransitionProps: {
         onEntering
       } = {},
-      variant = 'selectedMenu'
+      variant = 'selectedMenu',
+      slots = {},
+      slotProps = {}
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -142,6 +146,20 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   });
+  const PaperSlot = (_slots$paper = slots.paper) != null ? _slots$paper : MenuPaper;
+  const paperExternalSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : PaperProps;
+  const rootSlotProps = useSlotProps({
+    elementType: slots.root,
+    externalSlotProps: slotProps.root,
+    ownerState,
+    className: [classes.root, className]
+  });
+  const paperSlotProps = useSlotProps({
+    elementType: PaperSlot,
+    externalSlotProps: paperExternalSlotProps,
+    ownerState,
+    className: classes.paper
+  });
   return /*#__PURE__*/_jsx(MenuRoot, _extends({
     onClose: onClose,
     anchorOrigin: {
@@ -150,16 +168,13 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
     slots: {
-      paper: MenuPaper
+      paper: PaperSlot,
+      root: slots.root
     },
     slotProps: {
-      paper: _extends({}, PaperProps, {
-        classes: _extends({}, PaperProps.classes, {
-          root: classes.paper
-        })
-      })
+      root: rootSlotProps,
+      paper: paperSlotProps
     },
-    className: classes.root,
     open: open,
     ref: ref,
     transitionDuration: transitionDuration,
@@ -207,6 +222,10 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * When opening the menu will not focus the active item but the `[role="menu"]`
    * unless `autoFocus` is also set to `false`. Not using the default means not
@@ -239,6 +258,25 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
    */
   PopoverClasses: PropTypes.object,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/MenuItem/MenuItem.d.ts

@@ -4,8 +4,11 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { MenuItemClasses } from './menuItemClasses';
 
-export type MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> = ExtendButtonBaseTypeMap<{
-  props: P & {
+export type MenuItemTypeMap<
+  AdditionalProps = {},
+  DefaultComponent 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.
@@ -47,7 +50,7 @@ export type MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> = Extend
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -64,8 +67,10 @@ export type MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> = Extend
 declare const MenuItem: ExtendButtonBase<MenuItemTypeMap>;
 
 export type MenuItemProps<
-  D extends React.ElementType = MenuItemTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<MenuItemTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = MenuItemTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<MenuItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default MenuItem;

package/MenuList/MenuList.d.ts

@@ -2,8 +2,11 @@ import * as React from 'react';
 import { ExtendList, ExtendListTypeMap } from '../List';
 import { OverrideProps } from '../OverridableComponent';
 
-export type MenuListTypeMap<P = {}, D extends React.ElementType = 'ul'> = ExtendListTypeMap<{
-  props: P & {
+export type MenuListTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'ul',
+> = ExtendListTypeMap<{
+  props: AdditionalProps & {
     /**
      * If `true`, will focus the `[role="menu"]` container and move into tab order.
      * @default false
@@ -36,7 +39,7 @@ export type MenuListTypeMap<P = {}, D extends React.ElementType = 'ul'> = Extend
      */
     variant?: 'menu' | 'selectedMenu';
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 export type MenuListClassKey = keyof NonNullable<MenuListTypeMap['props']['classes']>;
@@ -59,8 +62,10 @@ export type MenuListClassKey = keyof NonNullable<MenuListTypeMap['props']['class
 declare const MenuList: ExtendList<MenuListTypeMap>;
 
 export type MenuListProps<
-  D extends React.ElementType = MenuListTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<MenuListTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = MenuListTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<MenuListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default MenuList;

package/Modal/Modal.d.ts

@@ -16,8 +16,11 @@ export interface ModalOwnerState extends ModalProps {
   exited: boolean;
 }
 
-export interface ModalTypeMap<D extends React.ElementType = 'div', P = {}> {
-  props: P & {
+export interface ModalTypeMap<
+  DefaultComponent extends React.ElementType = 'div',
+  AdditionalProps = {},
+> {
+  props: AdditionalProps & {
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
      * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
@@ -92,7 +95,7 @@ export interface ModalTypeMap<D extends React.ElementType = 'div', P = {}> {
      */
     sx?: SxProps<Theme>;
   } & Omit<BaseModalTypeMap['props'], 'slotProps'>;
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 type ModalRootProps = NonNullable<ModalTypeMap['props']['slotProps']>['root'];
@@ -129,8 +132,10 @@ export type ModalClasses = Record<ModalClassKey, string>;
 export declare const modalClasses: ModalClasses;
 
 export type ModalProps<
-  D extends React.ElementType = ModalTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ModalTypeMap<D, P>, D>;
+  RootComponent extends React.ElementType = ModalTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ModalTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Modal;

package/OverridableComponent.d.ts

@@ -7,21 +7,21 @@ import { StyledComponentProps } from './styles';
  *
  * Adjusts valid props based on the type of `component`.
  */
-export interface OverridableComponent<M extends OverridableTypeMap> {
+export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
   // If you make any changes to this interface, please make sure to update the
   // `OverridableComponent` type in `mui-types/index.d.ts` as well.
   // Also, there are types in Base UI that have a similar shape to this interface
   // (e.g. SelectType, OptionType, etc.).
-  <C extends React.ElementType>(
+  <RootComponent extends React.ElementType>(
     props: {
       /**
        * The component used for the root node.
        * Either a string to use a HTML element or a component.
        */
-      component: C;
-    } & OverrideProps<M, C>,
+      component: RootComponent;
+    } & OverrideProps<TypeMap, RootComponent>,
   ): JSX.Element | null;
-  (props: DefaultComponentProps<M>): JSX.Element | null;
+  (props: DefaultComponentProps<TypeMap>): JSX.Element | null;
 }
 
 /**
@@ -29,27 +29,27 @@ export interface OverridableComponent<M extends OverridableTypeMap> {
  */
 // prettier-ignore
 export type OverrideProps<
-  M extends OverridableTypeMap,
-  C extends React.ElementType
+  TypeMap extends OverridableTypeMap,
+  RootComponent extends React.ElementType
 > = (
-  & BaseProps<M>
-  & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
+  & BaseProps<TypeMap>
+  & DistributiveOmit<React.ComponentPropsWithRef<RootComponent>, keyof BaseProps<TypeMap>>
 );
 
 /**
  * Props if `component={Component}` is NOT used.
  */
 // prettier-ignore
-export type DefaultComponentProps<M extends OverridableTypeMap> =
-  & BaseProps<M>
-  & DistributiveOmit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
+export type DefaultComponentProps<TypeMap extends OverridableTypeMap> =
+  & BaseProps<TypeMap>
+  & DistributiveOmit<React.ComponentPropsWithRef<TypeMap['defaultComponent']>, keyof BaseProps<TypeMap>>;
 
 /**
  * Props defined on the component (+ common material-ui props).
  */
 // prettier-ignore
-export type BaseProps<M extends OverridableTypeMap> =
-  & M['props']
+export type BaseProps<TypeMap extends OverridableTypeMap> =
+  & TypeMap['props']
   & CommonProps;
 
 /**

package/PaginationItem/PaginationItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
-import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
 import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
 import { Theme } from '../styles';
 import { UsePaginationItem } from '../usePagination/usePagination';
 import { PaginationItemClasses } from './paginationItemClasses';
@@ -12,8 +12,11 @@ export interface PaginationItemPropsSizeOverrides {}
 
 export interface PaginationItemPropsColorOverrides {}
 
-export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
+export interface PaginationItemTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & {
     /**
      * Override or extend the styles applied to the component.
      */
@@ -94,7 +97,7 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
      */
     variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -110,8 +113,10 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
 declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
 
 export type PaginationItemProps<
-  D extends React.ElementType = PaginationItemTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<PaginationItemTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = PaginationItemTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<PaginationItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default PaginationItem;

package/Paper/Paper.d.ts

@@ -7,38 +7,43 @@ import { PaperClasses } from './paperClasses';
 
 export interface PaperPropsVariantOverrides {}
 
-export interface PaperTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<PaperClasses>;
-    /**
-     * Shadow depth, corresponds to `dp` in the spec.
-     * It accepts values between 0 and 24 inclusive.
-     * @default 1
-     */
-    elevation?: number;
-    /**
-     * If `true`, rounded corners are disabled.
-     * @default false
-     */
-    square?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'elevation'
-     */
-    variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;
-  };
-  defaultComponent: D;
+export interface PaperOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PaperClasses>;
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 1
+   */
+  elevation?: number;
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'elevation'
+   */
+  variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;
+}
+
+export interface PaperTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & PaperOwnProps;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -54,14 +59,16 @@ export interface PaperTypeMap<P = {}, D extends React.ElementType = 'div'> {
  */
 declare const Paper: OverridableComponent<PaperTypeMap>;
 
-export interface ExtendPaperTypeMap<M extends OverridableTypeMap, Keys extends string = ''> {
-  props: M['props'] & Omit<PaperTypeMap['props'], Keys>;
-  defaultComponent: M['defaultComponent'];
+export interface ExtendPaperTypeMap<TypeMap extends OverridableTypeMap, Keys extends string = ''> {
+  props: TypeMap['props'] & Omit<PaperTypeMap['props'], Keys>;
+  defaultComponent: TypeMap['defaultComponent'];
 }
 
 export type PaperProps<
-  D extends React.ElementType = PaperTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<PaperTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = PaperTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<PaperTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Paper;

package/Paper/index.d.ts

@@ -1,5 +1,5 @@
 export { default } from './Paper';
-export type { PaperProps, PaperPropsVariantOverrides, PaperTypeMap } from './Paper';
+export type { PaperProps, PaperOwnProps, PaperPropsVariantOverrides, PaperTypeMap } from './Paper';
 
 export { default as paperClasses } from './paperClasses';
 export * from './paperClasses';

package/Popover/Popover.d.ts

@@ -107,7 +107,7 @@ export interface PopoverProps
    *
    * @default {}
    */
-  PaperProps?: Partial<PaperProps>;
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * The components used for each slot inside.
    *

package/README.md

@@ -131,7 +131,7 @@ Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.
 via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p>
-  <a href="https://www.tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
+  <a href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
   <a href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img src="https://avatars.githubusercontent.com/u/1262264?s=192" alt="text-em-all.com" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
   <a href="https://open.spotify.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/spotify/f37ea28/logo/192.png" alt="Spotify" title="Music service to access to millions of songs" loading="lazy" /></a>
   <a href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://mui.com/static/sponsors/megafamous.png" alt="megafamous.com" title="The best place to buy Instagram followers & likes." loading="lazy" /></a>
@@ -168,7 +168,7 @@ For more options, see the [`Button` component page](https://mui.com/material-ui/
 
 ## Questions
 
-For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/mui) instead of GitHub issues.
+For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui) instead of GitHub issues.
 Use the "mui" tag on Stack Overflow to make it easier for the community to find your question.
 
 ## Examples

package/ScopedCssBaseline/ScopedCssBaseline.d.ts

@@ -4,8 +4,11 @@ import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ScopedCssBaselineClasses } from './scopedCssBaselineClasses';
 
-export interface ScopedCssBaselineTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
+export interface ScopedCssBaselineTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -25,7 +28,7 @@ export interface ScopedCssBaselineTypeMap<P = {}, D extends React.ElementType =
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -40,9 +43,11 @@ export interface ScopedCssBaselineTypeMap<P = {}, D extends React.ElementType =
 declare const ScopedCssBaseline: OverridableComponent<ScopedCssBaselineTypeMap>;
 
 export type ScopedCssBaselineProps<
-  D extends React.ElementType = ScopedCssBaselineTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ScopedCssBaselineTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ScopedCssBaselineTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ScopedCssBaselineTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 /**
  *

package/Select/Select.d.ts

@@ -9,10 +9,10 @@ import { OutlinedInputProps } from '../OutlinedInput';
 
 export { SelectChangeEvent };
 
-export interface SelectProps<T = unknown>
+export interface SelectProps<Value = unknown>
   extends StandardProps<InputProps, 'value' | 'onChange'>,
     Omit<OutlinedInputProps, 'value' | 'onChange'>,
-    Pick<SelectInputProps<T>, 'onChange'> {
+    Pick<SelectInputProps<Value>, 'onChange'> {
   /**
    * If `true`, the width of the popover will automatically be set according to the items inside the
    * menu, otherwise it will be at least the width of the select input.
@@ -40,7 +40,7 @@ export interface SelectProps<T = unknown>
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: T;
+  defaultValue?: Value;
   /**
    * If `true`, a value is displayed even if no items are selected.
    *
@@ -96,12 +96,12 @@ export interface SelectProps<T = unknown>
   /**
    * Callback fired when a menu item is selected.
    *
-   * @param {SelectChangeEvent<T>} event The event source of the callback.
+   * @param {SelectChangeEvent<Value>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
    * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
-  onChange?: SelectInputProps<T>['onChange'];
+  onChange?: SelectInputProps<Value>['onChange'];
   /**
    * Callback fired when the component requests to be closed.
    * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapses).
@@ -128,7 +128,7 @@ export interface SelectProps<T = unknown>
    * @param {any} value The `value` provided to the component.
    * @returns {ReactNode}
    */
-  renderValue?: (value: T) => React.ReactNode;
+  renderValue?: (value: Value) => React.ReactNode;
   /**
    * Props applied to the clickable div element.
    */
@@ -144,7 +144,7 @@ export interface SelectProps<T = unknown>
    * If the value is an object it must have reference equality with the option in order to be selected.
    * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
    */
-  value?: T | '';
+  value?: Value | '';
   /**
    * The variant to use.
    * @default 'outlined'
@@ -163,7 +163,7 @@ export interface SelectProps<T = unknown>
  * - [Select API](https://mui.com/material-ui/api/select/)
  * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  */
-declare const Select: (<T>(props: SelectProps<T>) => JSX.Element) & {
+declare const Select: (<Value>(props: SelectProps<Value>) => JSX.Element) & {
   muiName: string;
 };
 

package/Select/Select.js

@@ -222,7 +222,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */
   /**
    * Callback fired when a menu item is selected.
    *
-   * @param {SelectChangeEvent<T>} event The event source of the callback.
+   * @param {SelectChangeEvent<Value>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
    * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).

package/Select/SelectInput.d.ts

@@ -8,11 +8,11 @@ import { MenuProps } from '../Menu';
  * The type of event depends on what caused the change.
  * For example, when the browser auto-fills the `Select` you'll receive a `React.ChangeEvent`.
  */
-export type SelectChangeEvent<T = string> =
-  | (Event & { target: { value: T; name: string } })
+export type SelectChangeEvent<Value = string> =
+  | (Event & { target: { value: Value; name: string } })
   | React.ChangeEvent<HTMLInputElement>;
 
-export interface SelectInputProps<T = unknown> {
+export interface SelectInputProps<Value = unknown> {
   autoFocus?: boolean;
   autoWidth: boolean;
   defaultOpen?: boolean;
@@ -20,24 +20,24 @@ export interface SelectInputProps<T = unknown> {
   error?: boolean;
   IconComponent?: React.ElementType;
   inputRef?: (
-    ref: HTMLSelectElement | { node: HTMLInputElement; value: SelectInputProps<T>['value'] },
+    ref: HTMLSelectElement | { node: HTMLInputElement; value: SelectInputProps<Value>['value'] },
   ) => void;
   MenuProps?: Partial<MenuProps>;
   multiple: boolean;
   name?: string;
   native: boolean;
   onBlur?: React.FocusEventHandler<any>;
-  onChange?: (event: SelectChangeEvent<T>, child: React.ReactNode) => void;
+  onChange?: (event: SelectChangeEvent<Value>, child: React.ReactNode) => void;
   onClose?: (event: React.SyntheticEvent) => void;
   onFocus?: React.FocusEventHandler<any>;
   onOpen?: (event: React.SyntheticEvent) => void;
   open?: boolean;
   readOnly?: boolean;
-  renderValue?: (value: SelectInputProps<T>['value']) => React.ReactNode;
+  renderValue?: (value: SelectInputProps<Value>['value']) => React.ReactNode;
   SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
   sx?: SxProps<Theme>;
   tabIndex?: number;
-  value?: T;
+  value?: Value;
   variant?: 'standard' | 'outlined' | 'filled';
 }