@mui/material 5.14.1 → 5.14.3

package/Tabs/Tabs.js

@@ -280,10 +280,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   }
   const [mounted, setMounted] = React.useState(false);
   const [indicatorStyle, setIndicatorStyle] = React.useState(defaultIndicatorStyle);
-  const [displayScroll, setDisplayScroll] = React.useState({
-    start: false,
-    end: false
-  });
+  const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
+  const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
+  const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
     scrollbarWidth: 0
@@ -434,7 +433,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onChange: handleScrollbarSizeChange,
       className: clsx(classes.scrollableX, classes.hideScrollbar)
     }) : null;
-    const scrollButtonsActive = displayScroll.start || displayScroll.end;
+    const scrollButtonsActive = displayStartScroll || displayEndScroll;
     const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
     conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
       slots: {
@@ -446,7 +445,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
-      disabled: !displayScroll.start
+      disabled: !displayStartScroll
     }, TabScrollButtonProps, {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -460,7 +459,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
-      disabled: !displayScroll.end
+      disabled: !displayEndScroll
     }, TabScrollButtonProps, {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -490,30 +489,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   const updateScrollButtonState = useEventCallback(() => {
     if (scrollable && scrollButtons !== false) {
-      const {
-        scrollTop,
-        scrollHeight,
-        clientHeight,
-        scrollWidth,
-        clientWidth
-      } = tabsRef.current;
-      let showStartScroll;
-      let showEndScroll;
-      if (vertical) {
-        showStartScroll = scrollTop > 1;
-        showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
-      } else {
-        const scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction);
-        // use 1 for the potential rounding error with browser zooms.
-        showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-        showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-      }
-      if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
-        setDisplayScroll({
-          start: showStartScroll,
-          end: showEndScroll
-        });
-      }
+      setUpdateScrollObserver(!updateScrollObserver);
     }
   });
   React.useEffect(() => {
@@ -526,7 +502,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       // replaced by Suspense with a fallback, once React is updated to version 18
       if (tabsRef.current) {
         updateIndicatorState();
-        updateScrollButtonState();
       }
     });
     const win = ownerWindow(tabsRef.current);
@@ -545,21 +520,44 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         resizeObserver.disconnect();
       }
     };
-  }, [updateIndicatorState, updateScrollButtonState]);
-  const handleTabsScroll = React.useMemo(() => debounce(() => {
-    updateScrollButtonState();
-  }), [updateScrollButtonState]);
+  }, [updateIndicatorState]);
+
+  /**
+   * Toggle visibility of start and end scroll buttons
+   * Using IntersectionObserver on first and last Tabs.
+   */
   React.useEffect(() => {
-    return () => {
-      handleTabsScroll.clear();
-    };
-  }, [handleTabsScroll]);
+    const tabListChildren = Array.from(tabListRef.current.children);
+    const length = tabListChildren.length;
+    if (typeof IntersectionObserver !== 'undefined' && length > 0 && scrollable && scrollButtons !== false) {
+      const firstTab = tabListChildren[0];
+      const lastTab = tabListChildren[length - 1];
+      const observerOptions = {
+        root: tabsRef.current,
+        threshold: 0.99
+      };
+      const handleScrollButtonStart = entries => {
+        setDisplayStartScroll(!entries[0].isIntersecting);
+      };
+      const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
+      firstObserver.observe(firstTab);
+      const handleScrollButtonEnd = entries => {
+        setDisplayEndScroll(!entries[0].isIntersecting);
+      };
+      const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
+      lastObserver.observe(lastTab);
+      return () => {
+        firstObserver.disconnect();
+        lastObserver.disconnect();
+      };
+    }
+    return undefined;
+  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
   React.useEffect(() => {
     setMounted(true);
   }, []);
   React.useEffect(() => {
     updateIndicatorState();
-    updateScrollButtonState();
   });
   React.useEffect(() => {
     // Don't animate on the first render.
@@ -653,7 +651,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth
       },
       ref: tabsRef,
-      onScroll: handleTabsScroll,
       children: [/*#__PURE__*/_jsx(FlexContainer, {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,

package/ToggleButton/ToggleButton.d.ts

@@ -11,10 +11,10 @@ export interface ToggleButtonPropsSizeOverrides {}
 export interface ToggleButtonPropsColorOverrides {}
 
 export type ToggleButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'button',
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: P & {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -82,7 +82,7 @@ export type ToggleButtonTypeMap<
      */
     value: NonNullable<unknown>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -99,8 +99,10 @@ export type ToggleButtonTypeMap<
 declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
 
 export type ToggleButtonProps<
-  D extends React.ElementType = ToggleButtonTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ToggleButtonTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ToggleButtonTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ToggleButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ToggleButton;

package/Toolbar/Toolbar.d.ts

@@ -7,8 +7,11 @@ import { ToolbarClasses } from './toolbarClasses';
 
 export interface ToolbarPropsVariantOverrides {}
 
-export interface ToolbarTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
+export interface ToolbarTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & {
     /**
      * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
      * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
@@ -33,7 +36,7 @@ export interface ToolbarTypeMap<P = {}, D extends React.ElementType = 'div'> {
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -48,8 +51,10 @@ export interface ToolbarTypeMap<P = {}, D extends React.ElementType = 'div'> {
 declare const Toolbar: OverridableComponent<ToolbarTypeMap>;
 
 export type ToolbarProps<
-  D extends React.ElementType = ToolbarTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ToolbarTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ToolbarTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ToolbarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Toolbar;

package/Typography/Typography.d.ts

@@ -73,9 +73,12 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
   >;
 }
 
-export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'> {
-  props: P & TypographyOwnProps;
-  defaultComponent: D;
+export interface TypographyTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'span',
+> {
+  props: AdditionalProps & TypographyOwnProps;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -92,8 +95,10 @@ export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'>
 declare const Typography: OverridableComponent<TypographyTypeMap>;
 
 export type TypographyProps<
-  D extends React.ElementType = TypographyTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<TypographyTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<TypographyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Typography;

package/index.d.ts

@@ -11,13 +11,13 @@ export { StyledComponentProps };
  * @deprecated will be removed in v5 for internal usage only
  */
 export type StandardProps<
-  C,
+  ComponentProps,
   ClassKey extends string,
-  Removals extends keyof C = never,
-> = DistributiveOmit<C, 'classes' | Removals> &
+  Removals extends keyof ComponentProps = never,
+> = DistributiveOmit<ComponentProps, 'classes' | Removals> &
   StyledComponentProps<ClassKey> & {
     className?: string;
-    ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
+    ref?: ComponentProps extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
     style?: React.CSSProperties;
   };
 
@@ -29,13 +29,13 @@ export type StandardProps<
  * However, we don't declare classes on this type.
  * It is recommended to declare them manually with an interface so that each class can have a separate JSDoc.
  */
-export type InternalStandardProps<C, Removals extends keyof C = never> = DistributiveOmit<
-  C,
-  'classes' | Removals
-> &
+export type InternalStandardProps<
+  ComponentProps,
+  Removals extends keyof ComponentProps = never,
+> = DistributiveOmit<ComponentProps, 'classes' | Removals> &
   // each component declares it's classes in a separate interface for proper JSDoc
   StyledComponentProps<never> & {
-    ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
+    ref?: ComponentProps extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
     // TODO: Remove implicit props. Up to each component.
     className?: string;
     style?: React.CSSProperties;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.1
+ * @mui/material v5.14.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Autocomplete/Autocomplete.js

@@ -333,6 +333,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     props: inProps,
     name: 'MuiAutocomplete'
   });
+
   /* eslint-disable @typescript-eslint/no-unused-vars */
   var _props$autoComplete = props.autoComplete,
     autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete,
@@ -386,11 +387,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       return "+".concat(more);
     } : _props$getLimitTagsTe,
     getOptionDisabled = props.getOptionDisabled,
-    _props$getOptionLabel = props.getOptionLabel,
-    getOptionLabel = _props$getOptionLabel === void 0 ? function (option) {
-      var _option$label;
-      return (_option$label = option.label) != null ? _option$label : option;
-    } : _props$getOptionLabel,
+    getOptionLabelProp = props.getOptionLabel,
     isOptionEqualToValue = props.isOptionEqualToValue,
     groupBy = props.groupBy,
     _props$handleHomeEndK = props.handleHomeEndKeys,
@@ -476,6 +473,11 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     listboxRef = _getListboxProps.ref,
     otherListboxProps = _objectWithoutProperties(_getListboxProps, ["ref"]);
   var combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
+  var defaultGetOptionLabel = function defaultGetOptionLabel(option) {
+    var _option$label;
+    return (_option$label = option.label) != null ? _option$label : option;
+  };
+  var getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   var ownerState = _extends({}, props, {
@@ -483,6 +485,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     expanded: expanded,
     focused: focused,
     fullWidth: fullWidth,
+    getOptionLabel: getOptionLabel,
     hasClearIcon: hasClearIcon,
     hasPopupIcon: hasPopupIcon,
     inputFocused: focusedTag === -1,
@@ -796,9 +799,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * A function that determines the filtered options to be rendered on search.
    *
    * @default createFilterOptions()
-   * @param {T[]} options The options to render.
+   * @param {Value[]} options The options to render.
    * @param {object} state The state of the component.
-   * @returns {T[]}
+   * @returns {Value[]}
    */
   filterOptions: PropTypes.func,
   /**
@@ -832,7 +835,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Used to determine the disabled state for a given option.
    *
-   * @param {T} option The option to test.
+   * @param {Value} option The option to test.
    * @returns {boolean}
    */
   getOptionDisabled: PropTypes.func,
@@ -842,7 +845,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    *
    * If used in free solo mode, it must accept both the type of the options and a string.
    *
-   * @param {T} option
+   * @param {Value} option
    * @returns {string}
    * @default (option) => option.label ?? option
    */
@@ -851,7 +854,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
    *
-   * @param {T} options The options to group.
+   * @param {Value} options The options to group.
    * @returns {string}
    */
   groupBy: PropTypes.func,
@@ -880,8 +883,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Uses strict equality by default.
    * ⚠️ Both arguments need to be handled, an option can only match with one value.
    *
-   * @param {T} option The option to test.
-   * @param {T} value The value to test against.
+   * @param {Value} option The option to test.
+   * @param {Value} value The value to test against.
    * @returns {boolean}
    */
   isOptionEqualToValue: PropTypes.func,
@@ -929,7 +932,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Callback fired when the value changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T|T[]} value The new value of the component.
+   * @param {Value|Value[]} value The new value of the component.
    * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
    * @param {string} [details]
    */
@@ -946,7 +949,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Callback fired when the highlight option changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T} option The highlighted option.
+   * @param {Value} option The highlighted option.
    * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
    */
   onHighlightChange: PropTypes.func,
@@ -1023,7 +1026,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Render the option, use `getOptionLabel` by default.
    *
    * @param {object} props The props to apply on the li element.
-   * @param {T} option The option to render.
+   * @param {Value} option The option to render.
    * @param {object} state The state of each option.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
@@ -1032,7 +1035,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Render the selected value.
    *
-   * @param {T[]} value The `value` provided to the component.
+   * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}

package/legacy/Button/Button.js

@@ -307,7 +307,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

package/legacy/Chip/Chip.js

@@ -67,8 +67,6 @@ var ChipRoot = styled('div', {
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
     transition: theme.transitions.create(['background-color', 'box-shadow']),
-    // label will inherit this from root, then `clickable` class overrides this for both
-    cursor: 'default',
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0,
     textDecoration: 'none',

package/legacy/Divider/Divider.js

@@ -184,6 +184,12 @@ var Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     }) : null
   }));
 });
+
+/**
+ * The following flag is used to ensure that this component isn't tabbable i.e.
+ * does not get highlight/focus inside of MUI List.
+ */
+Divider.muiSkipListHighlight = true;
 process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/Fab/Fab.js

@@ -186,7 +186,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes /* remove-proptypes */ = {
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

package/legacy/ListItem/ListItem.js

@@ -319,7 +319,7 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * The components used for each slot inside.
    *

package/legacy/ListItemButton/ListItemButton.js

@@ -195,7 +195,7 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes /* remove-propt
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * 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/legacy/Menu/Menu.js

@@ -6,7 +6,7 @@ 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';
@@ -67,6 +67,7 @@ var MenuMenuList = styled(MenuList, {
   outline: 0
 });
 var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
+  var _slots$paper, _slotProps$paper;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiMenu'
@@ -74,6 +75,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   var _props$autoFocus = props.autoFocus,
     autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
     children = props.children,
+    className = props.className,
     _props$disableAutoFoc = props.disableAutoFocusItem,
     disableAutoFocusItem = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
     _props$MenuListProps = props.MenuListProps,
@@ -91,7 +93,11 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     TransitionProps = _objectWithoutProperties(_props$TransitionProp2, ["onEntering"]),
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,
-    other = _objectWithoutProperties(props, ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"]);
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    other = _objectWithoutProperties(props, ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"]);
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
   var ownerState = _extends({}, props, {
@@ -150,6 +156,20 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   });
+  var PaperSlot = (_slots$paper = slots.paper) != null ? _slots$paper : MenuPaper;
+  var paperExternalSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : PaperProps;
+  var rootSlotProps = useSlotProps({
+    elementType: slots.root,
+    externalSlotProps: slotProps.root,
+    ownerState: ownerState,
+    className: [classes.root, className]
+  });
+  var paperSlotProps = useSlotProps({
+    elementType: PaperSlot,
+    externalSlotProps: paperExternalSlotProps,
+    ownerState: ownerState,
+    className: classes.paper
+  });
   return /*#__PURE__*/_jsx(MenuRoot, _extends({
     onClose: onClose,
     anchorOrigin: {
@@ -158,16 +178,13 @@ var 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,
@@ -215,6 +232,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
@@ -247,6 +268,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/legacy/MenuItem/MenuItem.js

@@ -201,7 +201,7 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * 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.

package/legacy/Select/Select.js

@@ -229,7 +229,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).