@mui/material 6.4.4 → 6.4.6

package/modern/SpeedDialAction/SpeedDialAction.js

@@ -13,6 +13,8 @@ import Fab from "../Fab/index.js";
 import Tooltip from "../Tooltip/index.js";
 import capitalize from "../utils/capitalize.js";
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from "./speedDialActionClasses.js";
+import useSlot from "../utils/useSlot.js";
+import { mergeSlotProps } from "../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -147,6 +149,8 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     tooltipOpen: tooltipOpenProp = false,
     tooltipPlacement = 'left',
     tooltipTitle,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -154,7 +158,20 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     tooltipPlacement
   };
   const classes = useUtilityClasses(ownerState);
-  const [tooltipOpen, setTooltipOpen] = React.useState(tooltipOpenProp);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      fab: FabProps,
+      ...slotProps,
+      tooltip: mergeSlotProps(typeof slotProps.tooltip === 'function' ? slotProps.tooltip(ownerState) : slotProps.tooltip, {
+        title: tooltipTitle,
+        open: tooltipOpenProp,
+        placement: tooltipPlacement,
+        classes: TooltipClasses
+      })
+    }
+  };
+  const [tooltipOpen, setTooltipOpen] = React.useState(externalForwardedProps.slotProps.tooltip?.open);
   const handleTooltipClose = () => {
     setTooltipOpen(false);
   };
@@ -164,32 +181,71 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const transitionStyle = {
     transitionDelay: `${delay}ms`
   };
-  const fab = /*#__PURE__*/_jsx(SpeedDialActionFab, {
-    size: "small",
+  const [FabSlot, fabSlotProps] = useSlot('fab', {
+    elementType: SpeedDialActionFab,
+    externalForwardedProps,
+    ownerState,
+    shouldForwardComponentProp: true,
     className: clsx(classes.fab, className),
-    tabIndex: -1,
-    role: "menuitem",
-    ownerState: ownerState,
-    ...FabProps,
-    style: {
-      ...transitionStyle,
-      ...FabProps.style
+    additionalProps: {
+      style: transitionStyle,
+      tabIndex: -1,
+      role: 'menuitem',
+      size: 'small'
+    }
+  });
+  const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', {
+    elementType: Tooltip,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    ref,
+    additionalProps: {
+      id
     },
+    ownerState,
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClose: event => {
+        handlers.onClose?.(event);
+        handleTooltipClose();
+      },
+      onOpen: event => {
+        handlers.onOpen?.(event);
+        handleTooltipOpen();
+      }
+    })
+  });
+  const [StaticTooltipSlot, staticTooltipSlotProps] = useSlot('staticTooltip', {
+    elementType: SpeedDialActionStaticTooltip,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.staticTooltip,
+    additionalProps: {
+      id
+    }
+  });
+  const [StaticTooltipLabelSlot, staticTooltipLabelSlotProps] = useSlot('staticTooltipLabel', {
+    elementType: SpeedDialActionStaticTooltipLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.staticTooltipLabel,
+    additionalProps: {
+      style: transitionStyle,
+      id: `${id}-label`
+    }
+  });
+  const fab = /*#__PURE__*/_jsx(FabSlot, {
+    ...fabSlotProps,
     children: icon
   });
-  if (tooltipOpenProp) {
-    return /*#__PURE__*/_jsxs(SpeedDialActionStaticTooltip, {
-      id: id,
-      ref: ref,
-      className: classes.staticTooltip,
-      ownerState: ownerState,
+  if (tooltipSlotProps.open) {
+    return /*#__PURE__*/_jsxs(StaticTooltipSlot, {
+      ...staticTooltipSlotProps,
       ...other,
-      children: [/*#__PURE__*/_jsx(SpeedDialActionStaticTooltipLabel, {
-        style: transitionStyle,
-        id: `${id}-label`,
-        className: classes.staticTooltipLabel,
-        ownerState: ownerState,
-        children: tooltipTitle
+      children: [/*#__PURE__*/_jsx(StaticTooltipLabelSlot, {
+        ...staticTooltipLabelSlotProps,
+        children: tooltipSlotProps.title
       }), /*#__PURE__*/React.cloneElement(fab, {
         'aria-labelledby': `${id}-label`
       })]
@@ -198,15 +254,12 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   if (!open && tooltipOpen) {
     setTooltipOpen(false);
   }
-  return /*#__PURE__*/_jsx(Tooltip, {
-    id: id,
-    ref: ref,
-    title: tooltipTitle,
-    placement: tooltipPlacement,
-    onClose: handleTooltipClose,
-    onOpen: handleTooltipOpen,
+  return /*#__PURE__*/_jsx(TooltipSlot, {
+    ...tooltipSlotProps,
+    title: tooltipSlotProps.title,
     open: open && tooltipOpen,
-    classes: TooltipClasses,
+    placement: tooltipSlotProps.placement,
+    classes: tooltipSlotProps.classes,
     ...other,
     children: fab
   });
@@ -232,6 +285,7 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
   /**
    * Props applied to the [`Fab`](https://mui.com/material-ui/api/fab/) component.
    * @default {}
+   * @deprecated Use `slotProps.fab` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FabProps: PropTypes.object,
   /**
@@ -247,26 +301,50 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
    * If `true`, the component is shown.
    */
   open: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    fab: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    staticTooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    staticTooltipLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    fab: PropTypes.elementType,
+    staticTooltip: PropTypes.elementType,
+    staticTooltipLabel: PropTypes.elementType,
+    tooltip: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * `classes` prop applied to the [`Tooltip`](https://mui.com/material-ui/api/tooltip/) element.
+   * @deprecated Use `slotProps.tooltip.classes` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TooltipClasses: PropTypes.object,
   /**
    * Make the tooltip always visible when the SpeedDial is open.
    * @default false
+   * @deprecated Use `slotProps.tooltip.open` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   tooltipOpen: PropTypes.bool,
   /**
    * Placement of the tooltip.
    * @default 'left'
+   * @deprecated Use `slotProps.tooltip.placement` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   tooltipPlacement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
   /**
    * Label to display in the tooltip.
+   * @deprecated Use `slotProps.tooltip.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   tooltipTitle: PropTypes.node
 } : void 0;

package/modern/SwipeableDrawer/SwipeableDrawer.js

@@ -14,6 +14,8 @@ import useEnhancedEffect from "../utils/useEnhancedEffect.js";
 import { useTheme } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getTransitionProps } from "../transitions/utils.js";
+import { mergeSlotProps } from "../utils/index.js";
+import useSlot from "../utils/useSlot.js";
 import SwipeArea from "./SwipeArea.js";
 
 // This value is closed to what browsers are using internally to
@@ -145,6 +147,8 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     transitionDuration = transitionDurationDefault,
     variant = 'temporary',
     // Mobile first.
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
@@ -450,6 +454,22 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       setMaybeSwiping(false);
     }
   }, [open]);
+  const [SwipeAreaSlot, swipeAreaSlotProps] = useSlot('swipeArea', {
+    ref: swipeAreaRef,
+    elementType: SwipeArea,
+    ownerState: props,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        swipeArea: SwipeAreaProps,
+        ...slotProps
+      }
+    },
+    additionalProps: {
+      width: swipeAreaWidth,
+      anchor
+    }
+  });
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(Drawer, {
       open: variant === 'temporary' && maybeSwiping ? true : open,
@@ -467,25 +487,27 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         ...ModalPropsProp
       },
       hideBackdrop: hideBackdrop,
-      PaperProps: {
-        ...PaperProps,
-        style: {
-          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '',
-          ...PaperProps.style
-        },
-        ref: handleRef
-      },
       anchor: anchor,
       transitionDuration: calculatedDurationRef.current || transitionDuration,
       onClose: onClose,
       ref: ref,
+      slots: slots,
+      slotProps: {
+        ...slotProps,
+        backdrop: mergeSlotProps(slotProps.backdrop ?? BackdropProps, {
+          ref: backdropRef
+        }),
+        paper: mergeSlotProps(slotProps.paper ?? PaperProps, {
+          style: {
+            pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
+          },
+          ref: handleRef
+        })
+      },
       ...other
     }), !disableSwipeToOpen && variant === 'temporary' && /*#__PURE__*/_jsx(NoSsr, {
-      children: /*#__PURE__*/_jsx(SwipeArea, {
-        anchor: anchor,
-        ref: swipeAreaRef,
-        width: swipeAreaWidth,
-        ...SwipeAreaProps
+      children: /*#__PURE__*/_jsx(SwipeAreaSlot, {
+        ...swipeAreaSlotProps
       })
     })]
   });
@@ -583,8 +605,33 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
     component: elementTypeAcceptingRef,
     style: PropTypes.object
   }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    docked: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    swipeArea: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    docked: PropTypes.elementType,
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType,
+    swipeArea: PropTypes.elementType,
+    transition: PropTypes.elementType
+  }),
   /**
    * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SwipeAreaProps: PropTypes.object,
   /**

package/modern/Switch/Switch.js

@@ -305,10 +305,12 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
   id: PropTypes.string,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
    * Pass a ref to the `input` element.
+   * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputRef: refType,
   /**

package/modern/Tabs/Tabs.js

@@ -19,6 +19,7 @@ import useEventCallback from "../utils/useEventCallback.js";
 import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.js";
 import ownerDocument from "../utils/ownerDocument.js";
 import ownerWindow from "../utils/ownerWindow.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const nextItem = (list, item) => {
   if (list === item) {
@@ -75,7 +76,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', vertical && 'vertical'],
     scroller: ['scroller', fixed && 'fixed', hideScrollbar && 'hideScrollbar', scrollableX && 'scrollableX', scrollableY && 'scrollableY'],
-    flexContainer: ['flexContainer', vertical && 'flexContainerVertical', centered && 'centered'],
+    list: ['list', 'flexContainer', vertical && 'flexContainerVertical', vertical && 'vertical', centered && 'centered'],
     indicator: ['indicator'],
     scrollButtons: ['scrollButtons', scrollButtonsHideMobile && 'scrollButtonsHideMobile'],
     scrollableX: [scrollableX && 'scrollableX'],
@@ -176,14 +177,14 @@ const TabsScroller = styled('div', {
     }
   }]
 });
-const FlexContainer = styled('div', {
+const List = styled('div', {
   name: 'MuiTabs',
-  slot: 'FlexContainer',
+  slot: 'List',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
-    return [styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];
+    return [styles.list, styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];
   }
 })({
   display: 'flex',
@@ -271,13 +272,16 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     indicatorColor = 'primary',
     onChange,
     orientation = 'horizontal',
-    ScrollButtonComponent = TabScrollButton,
+    ScrollButtonComponent,
+    // TODO: remove in v7 (deprecated in v6)
     scrollButtons = 'auto',
     selectionFollowsFocus,
     slots = {},
     slotProps = {},
     TabIndicatorProps = {},
+    // TODO: remove in v7 (deprecated in v6)
     TabScrollButtonProps = {},
+    // TODO: remove in v7 (deprecated in v6)
     textColor = 'primary',
     value,
     variant = 'standard',
@@ -337,6 +341,14 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const valueToIndex = new Map();
   const tabsRef = React.useRef(null);
   const tabListRef = React.useRef(null);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      indicator: TabIndicatorProps,
+      scrollButton: TabScrollButtonProps,
+      ...slotProps
+    }
+  };
   const getTabsMeta = () => {
     const tabsNode = tabsRef.current;
     let tabsMeta;
@@ -458,50 +470,62 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const handleEndScrollClick = () => {
     moveTabsScroll(getScrollSize());
   };
+  const [ScrollbarSlot, {
+    onChange: scrollbarOnChange,
+    ...scrollbarSlotProps
+  }] = useSlot('scrollbar', {
+    className: clsx(classes.scrollableX, classes.hideScrollbar),
+    elementType: TabsScrollbarSize,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState
+  });
 
   // TODO Remove <ScrollbarSize /> as browser support for hiding the scrollbar
   // with CSS improves.
   const handleScrollbarSizeChange = React.useCallback(scrollbarWidth => {
+    scrollbarOnChange?.(scrollbarWidth);
     setScrollerStyle({
       overflow: null,
       scrollbarWidth
     });
-  }, []);
+  }, [scrollbarOnChange]);
+  const [ScrollButtonsSlot, scrollButtonSlotProps] = useSlot('scrollButtons', {
+    className: clsx(classes.scrollButtons, TabScrollButtonProps.className),
+    elementType: TabScrollButton,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      orientation,
+      slots: {
+        StartScrollButtonIcon: slots.startScrollButtonIcon || slots.StartScrollButtonIcon,
+        EndScrollButtonIcon: slots.endScrollButtonIcon || slots.EndScrollButtonIcon
+      },
+      slotProps: {
+        startScrollButtonIcon: startScrollButtonIconProps,
+        endScrollButtonIcon: endScrollButtonIconProps
+      }
+    }
+  });
   const getConditionalElements = () => {
     const conditionalElements = {};
-    conditionalElements.scrollbarSizeListener = scrollable ? /*#__PURE__*/_jsx(TabsScrollbarSize, {
-      onChange: handleScrollbarSizeChange,
-      className: clsx(classes.scrollableX, classes.hideScrollbar)
+    conditionalElements.scrollbarSizeListener = scrollable ? /*#__PURE__*/_jsx(ScrollbarSlot, {
+      ...scrollbarSlotProps,
+      onChange: handleScrollbarSizeChange
     }) : null;
     const scrollButtonsActive = displayStartScroll || displayEndScroll;
     const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
-    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, {
-      slots: {
-        StartScrollButtonIcon: slots.StartScrollButtonIcon
-      },
-      slotProps: {
-        startScrollButtonIcon: startScrollButtonIconProps
-      },
-      orientation: orientation,
+    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonsSlot, {
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
       disabled: !displayStartScroll,
-      ...TabScrollButtonProps,
-      className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
+      ...scrollButtonSlotProps
     }) : null;
-    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, {
-      slots: {
-        EndScrollButtonIcon: slots.EndScrollButtonIcon
-      },
-      slotProps: {
-        endScrollButtonIcon: endScrollButtonIconProps
-      },
-      orientation: orientation,
+    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonsSlot, {
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
       disabled: !displayEndScroll,
-      ...TabScrollButtonProps,
-      className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
+      ...scrollButtonSlotProps
     }) : null;
     return conditionalElements;
   };
@@ -629,15 +653,18 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateIndicator: updateIndicatorState,
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
-  const indicator = /*#__PURE__*/_jsx(TabsIndicator, {
-    ...TabIndicatorProps,
+  const [IndicatorSlot, indicatorSlotProps] = useSlot('indicator', {
     className: clsx(classes.indicator, TabIndicatorProps.className),
-    ownerState: ownerState,
-    style: {
-      ...indicatorStyle,
-      ...TabIndicatorProps.style
+    elementType: TabsIndicator,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      style: indicatorStyle
     }
   });
+  const indicator = /*#__PURE__*/_jsx(IndicatorSlot, {
+    ...indicatorSlotProps
+  });
   let childIndex = 0;
   const children = React.Children.map(childrenProp, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -704,29 +731,54 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
   };
   const conditionalElements = getConditionalElements();
-  return /*#__PURE__*/_jsxs(TabsRoot, {
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
     className: clsx(classes.root, className),
-    ownerState: ownerState,
-    ref: ref,
-    as: component,
-    ...other,
-    children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/_jsxs(TabsScroller, {
-      className: classes.scroller,
-      ownerState: ownerState,
+    elementType: TabsRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
+    },
+    ownerState
+  });
+  const [ScrollerSlot, scrollerSlotProps] = useSlot('scroller', {
+    ref: tabsRef,
+    className: classes.scroller,
+    elementType: TabsScroller,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
       style: {
         overflow: scrollerStyle.overflow,
         [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth
-      },
-      ref: tabsRef,
-      children: [/*#__PURE__*/_jsx(FlexContainer, {
+      }
+    }
+  });
+  const [ListSlot, listSlotProps] = useSlot('list', {
+    ref: tabListRef,
+    className: clsx(classes.list, classes.flexContainer),
+    elementType: List,
+    externalForwardedProps,
+    ownerState,
+    getSlotProps: handlers => ({
+      ...handlers,
+      onKeyDown: event => {
+        handleKeyDown(event);
+        handlers.onKeyDown?.(event);
+      }
+    })
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/_jsxs(ScrollerSlot, {
+      ...scrollerSlotProps,
+      children: [/*#__PURE__*/_jsx(ListSlot, {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "aria-orientation": orientation === 'vertical' ? 'vertical' : null,
-        className: classes.flexContainer,
-        ownerState: ownerState,
-        onKeyDown: handleKeyDown,
-        ref: tabListRef,
         role: "tablist",
+        ...listSlotProps,
         children: children
       }), mounted && indicator]
     }), conditionalElements.scrollButtonEnd]
@@ -802,6 +854,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * The component used to render the scroll buttons.
+   * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default TabScrollButton
    */
   ScrollButtonComponent: PropTypes.elementType,
@@ -823,12 +876,17 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    */
   selectionFollowsFocus: PropTypes.bool,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
     endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    indicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    list: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    scrollbar: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    scrollButtons: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    scroller: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
@@ -836,7 +894,15 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    * @default {}
    */
   slots: PropTypes.shape({
+    endScrollButtonIcon: PropTypes.elementType,
     EndScrollButtonIcon: PropTypes.elementType,
+    indicator: PropTypes.elementType,
+    list: PropTypes.elementType,
+    root: PropTypes.elementType,
+    scrollbar: PropTypes.elementType,
+    scrollButtons: PropTypes.elementType,
+    scroller: PropTypes.elementType,
+    startScrollButtonIcon: PropTypes.elementType,
     StartScrollButtonIcon: PropTypes.elementType
   }),
   /**
@@ -845,11 +911,13 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * Props applied to the tab indicator element.
+   * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default  {}
    */
   TabIndicatorProps: PropTypes.object,
   /**
    * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
+   * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   TabScrollButtonProps: PropTypes.object,

package/modern/Tabs/tabsClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTabsUtilityClass(slot) {
   return generateUtilityClass('MuiTabs', slot);
 }
-const tabsClasses = generateUtilityClasses('MuiTabs', ['root', 'vertical', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
+const tabsClasses = generateUtilityClasses('MuiTabs', ['root', 'vertical', 'list', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
 export default tabsClasses;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.4
+ * @mui/material v6.4.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the