@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

package/SwipeableDrawer/SwipeableDrawer.js

@@ -11,10 +11,8 @@ exports.reset = reset;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _NoSsr = _interopRequireDefault(require("../NoSsr"));
 var _Drawer = _interopRequireWildcard(require("../Drawer/Drawer"));
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
@@ -141,15 +139,10 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     hysteresis = 0.52,
     allowSwipeInChildren = false,
     minFlingVelocity = 450,
-    ModalProps: {
-      BackdropProps,
-      ...ModalPropsProp
-    } = {},
+    ModalProps: ModalPropsProp = {},
     onClose,
     onOpen,
     open = false,
-    PaperProps = {},
-    SwipeAreaProps,
     swipeAreaWidth = 20,
     transitionDuration = transitionDurationDefault,
     variant = 'temporary',
@@ -165,7 +158,6 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
   const swipeAreaRef = React.useRef();
   const backdropRef = React.useRef();
   const paperRef = React.useRef();
-  const handleRef = (0, _useForkRef.default)(PaperProps.ref, paperRef);
   const touchDetected = React.useRef(false);
 
   // Ref for transition duration based on / to match swipe speed
@@ -467,10 +459,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     ownerState: props,
     externalForwardedProps: {
       slots,
-      slotProps: {
-        swipeArea: SwipeAreaProps,
-        ...slotProps
-      }
+      slotProps
     },
     additionalProps: {
       width: swipeAreaWidth,
@@ -482,10 +471,6 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       open: variant === 'temporary' && maybeSwiping ? true : open,
       variant: variant,
       ModalProps: {
-        BackdropProps: {
-          ...BackdropProps,
-          ref: backdropRef
-        },
         // Ensures that paperRef.current will be defined inside the touch start event handler
         // See https://github.com/mui/material-ui/issues/30414 for more information
         ...(variant === 'temporary' && {
@@ -501,14 +486,14 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       slots: slots,
       slotProps: {
         ...slotProps,
-        backdrop: (0, _utils2.mergeSlotProps)(slotProps.backdrop ?? BackdropProps, {
+        backdrop: (0, _utils2.mergeSlotProps)(slotProps.backdrop, {
           ref: backdropRef
         }),
-        paper: (0, _utils2.mergeSlotProps)(slotProps.paper ?? PaperProps, {
+        paper: (0, _utils2.mergeSlotProps)(slotProps.paper, {
           style: {
             pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
           },
-          ref: handleRef
+          ref: paperRef
         })
       },
       ...other
@@ -583,11 +568,7 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
   /**
    * @ignore
    */
-  ModalProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
-    BackdropProps: _propTypes.default.shape({
-      component: _elementTypeAcceptingRef.default
-    })
-  }),
+  ModalProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({}),
   /**
    * Callback fired when the component requests to be closed.
    *
@@ -605,13 +586,6 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
    * @default false
    */
   open: _propTypes.default.bool,
-  /**
-   * @ignore
-   */
-  PaperProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
-    component: _elementTypeAcceptingRef.default,
-    style: _propTypes.default.object
-  }),
   /**
    * The props used for each slot inside.
    * @default {}
@@ -636,11 +610,6 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
     swipeArea: _propTypes.default.elementType,
     transition: _propTypes.default.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 a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  SwipeAreaProps: _propTypes.default.object,
   /**
    * The width of the left most (or right most) area in `px` that
    * the drawer can be swiped open from.

package/SwipeableDrawer/SwipeableDrawer.mjs

@@ -3,10 +3,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import NoSsr from "../NoSsr/index.mjs";
 import Drawer, { getAnchor, isHorizontal } from "../Drawer/Drawer.mjs";
-import useForkRef from "../utils/useForkRef.mjs";
 import ownerDocument from "../utils/ownerDocument.mjs";
 import ownerWindow from "../utils/ownerWindow.mjs";
 import useEventCallback from "../utils/useEventCallback.mjs";
@@ -134,15 +132,10 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     hysteresis = 0.52,
     allowSwipeInChildren = false,
     minFlingVelocity = 450,
-    ModalProps: {
-      BackdropProps,
-      ...ModalPropsProp
-    } = {},
+    ModalProps: ModalPropsProp = {},
     onClose,
     onOpen,
     open = false,
-    PaperProps = {},
-    SwipeAreaProps,
     swipeAreaWidth = 20,
     transitionDuration = transitionDurationDefault,
     variant = 'temporary',
@@ -158,7 +151,6 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
   const swipeAreaRef = React.useRef();
   const backdropRef = React.useRef();
   const paperRef = React.useRef();
-  const handleRef = useForkRef(PaperProps.ref, paperRef);
   const touchDetected = React.useRef(false);
 
   // Ref for transition duration based on / to match swipe speed
@@ -460,10 +452,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     ownerState: props,
     externalForwardedProps: {
       slots,
-      slotProps: {
-        swipeArea: SwipeAreaProps,
-        ...slotProps
-      }
+      slotProps
     },
     additionalProps: {
       width: swipeAreaWidth,
@@ -475,10 +464,6 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       open: variant === 'temporary' && maybeSwiping ? true : open,
       variant: variant,
       ModalProps: {
-        BackdropProps: {
-          ...BackdropProps,
-          ref: backdropRef
-        },
         // Ensures that paperRef.current will be defined inside the touch start event handler
         // See https://github.com/mui/material-ui/issues/30414 for more information
         ...(variant === 'temporary' && {
@@ -494,14 +479,14 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       slots: slots,
       slotProps: {
         ...slotProps,
-        backdrop: mergeSlotProps(slotProps.backdrop ?? BackdropProps, {
+        backdrop: mergeSlotProps(slotProps.backdrop, {
           ref: backdropRef
         }),
-        paper: mergeSlotProps(slotProps.paper ?? PaperProps, {
+        paper: mergeSlotProps(slotProps.paper, {
           style: {
             pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
           },
-          ref: handleRef
+          ref: paperRef
         })
       },
       ...other
@@ -576,11 +561,7 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
   /**
    * @ignore
    */
-  ModalProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
-    BackdropProps: PropTypes.shape({
-      component: elementTypeAcceptingRef
-    })
-  }),
+  ModalProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({}),
   /**
    * Callback fired when the component requests to be closed.
    *
@@ -598,13 +579,6 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
    * @default false
    */
   open: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  PaperProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
-    component: elementTypeAcceptingRef,
-    style: PropTypes.object
-  }),
   /**
    * The props used for each slot inside.
    * @default {}
@@ -629,11 +603,6 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
     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 a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  SwipeAreaProps: PropTypes.object,
   /**
    * The width of the left most (or right most) area in `px` that
    * the drawer can be swiped open from.

package/Switch/Switch.js

@@ -11,7 +11,6 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
@@ -350,16 +349,6 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
    * The id of the `input` element.
    */
   id: _propTypes.default.string,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputProps: _propTypes.default.object,
-  /**
-   * Pass a ref to the `input` element.
-   * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputRef: _refType.default,
   /**
    * Callback fired when the state is changed.
    *

package/Switch/Switch.mjs

@@ -4,7 +4,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from "../utils/capitalize.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
@@ -343,16 +342,6 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
    * The id of the `input` element.
    */
   id: PropTypes.string,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. 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 a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputRef: refType,
   /**
    * Callback fired when the state is changed.
    *

package/Tab/Tab.js

@@ -17,6 +17,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _tabClasses = _interopRequireWildcard(require("./tabClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -32,7 +33,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', icon && label && 'labelIcon', `textColor${(0, _capitalize.default)(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
-    icon: ['iconWrapper', 'icon']
+    icon: ['icon']
   };
   return (0, _composeClasses.default)(slots, _tabClasses.getTabUtilityClass, classes);
 };
@@ -44,8 +45,6 @@ const TabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       ownerState
     } = props;
     return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${(0, _capitalize.default)(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
-      [`& .${_tabClasses.default.iconWrapper}`]: styles.iconWrapper
-    }, {
       [`& .${_tabClasses.default.icon}`]: styles.icon
     }];
   }
@@ -215,6 +214,19 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     wrapped = false,
     ...other
   } = props;
+  const rovingContext = (0, _useRovingTabIndex.useRovingTabIndexContext)();
+  const rovingItemProps = (0, _useRovingTabIndex.useRovingTabIndexItem)({
+    id: value,
+    ref,
+    disabled,
+    selected
+  });
+  // On the server, and on the first client render before registration effects run,
+  // the roving item map is still empty. In that window, fall back to `tabIndex={0}`
+  // for the selected tab so the rendered markup is immediately keyboard-accessible
+  // and hydration stays consistent until item registration takes over.
+  const shouldUseSelectedTabStopFallback = rovingContext.getItemMap().size === 0 && selected;
+  const tabIndex = shouldUseSelectedTabStopFallback ? 0 : rovingItemProps.tabIndex;
   const ownerState = {
     ...props,
     disabled,
@@ -248,14 +260,16 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabRoot, {
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
+    ref: rovingItemProps.ref,
     role: "tab",
     "aria-selected": selected,
     disabled: disabled,
     onClick: handleClick,
     onFocus: handleFocus,
+    tabIndex: tabIndex,
     ownerState: ownerState,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

package/Tab/Tab.mjs

@@ -10,6 +10,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import unsupportedProp from "../utils/unsupportedProp.mjs";
+import { useRovingTabIndexContext, useRovingTabIndexItem } from "../utils/useRovingTabIndex.mjs";
 import tabClasses, { getTabUtilityClass } from "./tabClasses.mjs";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -25,7 +26,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
-    icon: ['iconWrapper', 'icon']
+    icon: ['icon']
   };
   return composeClasses(slots, getTabUtilityClass, classes);
 };
@@ -37,8 +38,6 @@ const TabRoot = styled(ButtonBase, {
       ownerState
     } = props;
     return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
-      [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper
-    }, {
       [`& .${tabClasses.icon}`]: styles.icon
     }];
   }
@@ -208,6 +207,19 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     wrapped = false,
     ...other
   } = props;
+  const rovingContext = useRovingTabIndexContext();
+  const rovingItemProps = useRovingTabIndexItem({
+    id: value,
+    ref,
+    disabled,
+    selected
+  });
+  // On the server, and on the first client render before registration effects run,
+  // the roving item map is still empty. In that window, fall back to `tabIndex={0}`
+  // for the selected tab so the rendered markup is immediately keyboard-accessible
+  // and hydration stays consistent until item registration takes over.
+  const shouldUseSelectedTabStopFallback = rovingContext.getItemMap().size === 0 && selected;
+  const tabIndex = shouldUseSelectedTabStopFallback ? 0 : rovingItemProps.tabIndex;
   const ownerState = {
     ...props,
     disabled,
@@ -241,14 +253,16 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     }
   };
   return /*#__PURE__*/_jsxs(TabRoot, {
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     className: clsx(classes.root, className),
-    ref: ref,
+    ref: rovingItemProps.ref,
     role: "tab",
     "aria-selected": selected,
     disabled: disabled,
     onClick: handleClick,
     onFocus: handleFocus,
+    tabIndex: tabIndex,
     ownerState: ownerState,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {

package/Tab/tabClasses.d.mts

@@ -17,10 +17,6 @@ export interface TabClasses {
   fullWidth: string;
   /** Styles applied to the root element if `wrapped={true}`. */
   wrapped: string;
-  /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided.
-   * @deprecated Use `icon` class instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details
-   */
-  iconWrapper: string;
   /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
   icon: string;
 }

package/Tab/tabClasses.d.ts

@@ -17,10 +17,6 @@ export interface TabClasses {
   fullWidth: string;
   /** Styles applied to the root element if `wrapped={true}`. */
   wrapped: string;
-  /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided.
-   * @deprecated Use `icon` class instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details
-   */
-  iconWrapper: string;
   /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
   icon: string;
 }

package/Tab/tabClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getTabUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTab', slot);
 }
-const tabClasses = (0, _generateUtilityClasses.default)('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper', 'icon']);
+const tabClasses = (0, _generateUtilityClasses.default)('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'icon']);
 var _default = exports.default = tabClasses;

package/Tab/tabClasses.mjs

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTabUtilityClass(slot) {
   return generateUtilityClass('MuiTab', slot);
 }
-const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper', 'icon']);
+const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'icon']);
 export default tabClasses;

package/TabScrollButton/TabScrollButton.d.mts

@@ -10,7 +10,7 @@ export interface TabScrollButtonEndIconSlotPropsOverrides {}
 export interface TabScrollButtonOwnerState extends TabScrollButtonProps {
   isRtl: boolean;
 }
-export interface TabScrollButtonProps extends ButtonBaseProps {
+export interface TabScrollButtonProps extends Omit<ButtonBaseProps, 'nativeButton'> {
   /**
    * The content of the component.
    */

package/TabScrollButton/TabScrollButton.d.ts

@@ -10,7 +10,7 @@ export interface TabScrollButtonEndIconSlotPropsOverrides {}
 export interface TabScrollButtonOwnerState extends TabScrollButtonProps {
   isRtl: boolean;
 }
-export interface TabScrollButtonProps extends ButtonBaseProps {
+export interface TabScrollButtonProps extends Omit<ButtonBaseProps, 'nativeButton'> {
   /**
    * The content of the component.
    */

package/TabScrollButton/TabScrollButton.js

@@ -75,6 +75,10 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     disabled,
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const isRtl = (0, _RtlProvider.useRtl)();
   const ownerState = {
     isRtl,
@@ -106,9 +110,9 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     role: null,
     ownerState: ownerState,
     tabIndex: null,
-    ...other,
+    ...buttonBaseProps,
     style: {
-      ...other.style,
+      ...buttonBaseProps.style,
       ...(orientation === 'vertical' && {
         '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
       })

package/TabScrollButton/TabScrollButton.mjs

@@ -68,6 +68,10 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     disabled,
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const isRtl = useRtl();
   const ownerState = {
     isRtl,
@@ -99,9 +103,9 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     role: null,
     ownerState: ownerState,
     tabIndex: null,
-    ...other,
+    ...buttonBaseProps,
     style: {
-      ...other.style,
+      ...buttonBaseProps.style,
       ...(orientation === 'vertical' && {
         '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
       })

package/TablePagination/TablePagination.d.mts

@@ -4,7 +4,6 @@ import { Theme } from "../styles/index.mjs";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
 import { TablePaginationActionsProps, TablePaginationActionsSlots } from "../TablePaginationActions/index.mjs";
 import { TableCellProps } from "../TableCell/index.mjs";
-import { IconButtonProps } from "../IconButton/index.mjs";
 import { SelectProps } from "../Select/index.mjs";
 import { TablePaginationClasses } from "./tablePaginationClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.mjs";
@@ -122,13 +121,6 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * @default TablePaginationActions
    */
   ActionsComponent?: React.ElementType<TablePaginationActionsProps> | undefined;
-  /**
-   * Props applied to the back arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) component.
-   *
-   * This prop is an alias for `slotProps.actions.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.previousButton` instead.
-   */
-  backIconButtonProps?: Partial<IconButtonProps> | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -173,13 +165,6 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * @default 'Rows per page:'
    */
   labelRowsPerPage?: React.ReactNode;
-  /**
-   * Props applied to the next arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) element.
-   *
-   * This prop is an alias for `slotProps.actions.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.nextButton` instead.
-   */
-  nextIconButtonProps?: Partial<IconButtonProps> | undefined;
   /**
    * Callback fired when the page is changed.
    *
@@ -213,15 +198,6 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
     value: number;
     label: string;
   }> | undefined;
-  /**
-   * Props applied to the rows per page [`Select`](https://mui.com/material-ui/api/select/) element.
-   *
-   * This prop is an alias for `slotProps.select` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.select` instead.
-   *
-   * @default {}
-   */
-  SelectProps?: Partial<SelectProps> | undefined;
   /**
    * If `true`, show the first-page button.
    * @default false

package/TablePagination/TablePagination.d.ts

@@ -4,7 +4,6 @@ import { Theme } from "../styles/index.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { TablePaginationActionsProps, TablePaginationActionsSlots } from "../TablePaginationActions/index.js";
 import { TableCellProps } from "../TableCell/index.js";
-import { IconButtonProps } from "../IconButton/index.js";
 import { SelectProps } from "../Select/index.js";
 import { TablePaginationClasses } from "./tablePaginationClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
@@ -122,13 +121,6 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * @default TablePaginationActions
    */
   ActionsComponent?: React.ElementType<TablePaginationActionsProps> | undefined;
-  /**
-   * Props applied to the back arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) component.
-   *
-   * This prop is an alias for `slotProps.actions.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.previousButton` instead.
-   */
-  backIconButtonProps?: Partial<IconButtonProps> | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -173,13 +165,6 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * @default 'Rows per page:'
    */
   labelRowsPerPage?: React.ReactNode;
-  /**
-   * Props applied to the next arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) element.
-   *
-   * This prop is an alias for `slotProps.actions.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.nextButton` instead.
-   */
-  nextIconButtonProps?: Partial<IconButtonProps> | undefined;
   /**
    * Callback fired when the page is changed.
    *
@@ -213,15 +198,6 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
     value: number;
     label: string;
   }> | undefined;
-  /**
-   * Props applied to the rows per page [`Select`](https://mui.com/material-ui/api/select/) element.
-   *
-   * This prop is an alias for `slotProps.select` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.select` instead.
-   *
-   * @default {}
-   */
-  SelectProps?: Partial<SelectProps> | undefined;
   /**
    * If `true`, show the first-page button.
    * @default false