@mui/material 5.14.17 → 5.14.18

package/legacy/FilledInput/FilledInput.js

@@ -115,6 +115,9 @@ var FilledInputRoot = styled(InputBaseRoot, {
   }, ownerState.hiddenLabel && {
     paddingTop: 16,
     paddingBottom: 17
+  }, ownerState.hiddenLabel && ownerState.size === 'small' && {
+    paddingTop: 8,
+    paddingBottom: 9
   }));
 });
 var FilledInputInput = styled(InputBaseInput, {
@@ -154,11 +157,6 @@ var FilledInputInput = styled(InputBaseInput, {
   }, ownerState.hiddenLabel && {
     paddingTop: 16,
     paddingBottom: 17
-  }, ownerState.multiline && {
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0
   }, ownerState.startAdornment && {
     paddingLeft: 0
   }, ownerState.endAdornment && {
@@ -166,6 +164,11 @@ var FilledInputInput = styled(InputBaseInput, {
   }, ownerState.hiddenLabel && ownerState.size === 'small' && {
     paddingTop: 8,
     paddingBottom: 9
+  }, ownerState.multiline && {
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0
   });
 });
 var FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {

package/legacy/FormControlLabel/FormControlLabel.js

@@ -148,8 +148,7 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
     ref: ref
   }, other, {
     children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
-      direction: "row",
-      alignItems: "center",
+      display: "block",
       children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
         ownerState: ownerState,
         "aria-hidden": true,

package/legacy/Rating/Rating.js

@@ -346,14 +346,13 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     var rootNode = rootRef.current;
     var _rootNode$getBounding = rootNode.getBoundingClientRect(),
       right = _rootNode$getBounding.right,
-      left = _rootNode$getBounding.left;
-    var _rootNode$firstChild$ = rootNode.firstChild.getBoundingClientRect(),
-      width = _rootNode$firstChild$.width;
+      left = _rootNode$getBounding.left,
+      containerWidth = _rootNode$getBounding.width;
     var percent;
     if (theme.direction === 'rtl') {
-      percent = (right - event.clientX) / (width * max);
+      percent = (right - event.clientX) / containerWidth;
     } else {
-      percent = (event.clientX - left) / (width * max);
+      percent = (event.clientX - left) / containerWidth;
     }
     var newHover = roundValueToPrecision(max * percent + precision / 2, precision);
     newHover = clamp(newHover, precision, max);

package/legacy/TablePagination/TablePagination.js

@@ -152,6 +152,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
  */
 var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
+  var _slotProps$select;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiTablePagination'
@@ -164,6 +165,8 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
     _props$component = props.component,
     component = _props$component === void 0 ? TableCell : _props$component,
     count = props.count,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$getItemAriaLab = props.getItemAriaLabel,
     getItemAriaLabel = _props$getItemAriaLab === void 0 ? defaultGetAriaLabel : _props$getItemAriaLab,
     _props$labelDisplayed = props.labelDisplayedRows,
@@ -183,17 +186,19 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
     showFirstButton = _props$showFirstButto === void 0 ? false : _props$showFirstButto,
     _props$showLastButton = props.showLastButton,
     showLastButton = _props$showLastButton === void 0 ? false : _props$showLastButton,
-    other = _objectWithoutProperties(props, ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"]);
+    slotProps = props.slotProps,
+    other = _objectWithoutProperties(props, ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"]);
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
-  var MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
+  var selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
+  var MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
   var colSpan;
   if (component === TableCell || component === 'td') {
     colSpan = colSpanProp || 1000; // col-span over everything
   }
 
-  var selectId = useId(SelectProps.id);
-  var labelId = useId(SelectProps.labelId);
+  var selectId = useId(selectProps.id);
+  var labelId = useId(selectProps.labelId);
   var getLabelDisplayedRowsTo = function getLabelDisplayedRowsTo() {
     if (count === -1) {
       return (page + 1) * rowsPerPage;
@@ -217,21 +222,22 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
         children: labelRowsPerPage
       }), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, _extends({
         variant: "standard"
-      }, !SelectProps.variant && {
+      }, !selectProps.variant && {
         input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
       }, {
         value: rowsPerPage,
         onChange: onRowsPerPageChange,
         id: selectId,
         labelId: labelId
-      }, SelectProps, {
-        classes: _extends({}, SelectProps.classes, {
+      }, selectProps, {
+        classes: _extends({}, selectProps.classes, {
           // TODO v5 remove `classes.input`
-          root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
-          select: clsx(classes.select, (SelectProps.classes || {}).select),
+          root: clsx(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
+          select: clsx(classes.select, (selectProps.classes || {}).select),
           // TODO v5 remove `selectIcon`
-          icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
+          icon: clsx(classes.selectIcon, (selectProps.classes || {}).icon)
         }),
+        disabled: disabled,
         children: rowsPerPageOptions.map(function (rowsPerPageOption) {
           return /*#__PURE__*/_createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
             ownerState: ownerState
@@ -259,7 +265,9 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
         rowsPerPage: rowsPerPage,
         showFirstButton: showFirstButton,
         showLastButton: showLastButton,
-        getItemAriaLabel: getItemAriaLabel
+        slotProps: slotProps == null ? void 0 : slotProps.actions,
+        getItemAriaLabel: getItemAriaLabel,
+        disabled: disabled
       })]
     })
   }));
@@ -277,6 +285,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   ActionsComponent: PropTypes.elementType,
   /**
    * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
+   *
+   * This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.actions.previousButton` instead.
    */
   backIconButtonProps: PropTypes.object,
   /**
@@ -302,6 +313,11 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * To enable server side pagination for an unknown number of items, provide -1.
    */
   count: integerPropType.isRequired,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current page.
    * This is important for screen reader users.
@@ -333,6 +349,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   labelRowsPerPage: PropTypes.node,
   /**
    * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
+   *
+   * This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.actions.nextButton` instead.
    */
   nextIconButtonProps: PropTypes.object,
   /**
@@ -382,6 +401,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   })]).isRequired),
   /**
    * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
+   *
+   * This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.select` instead.
+   *
    * @default {}
    */
   SelectProps: PropTypes.object,
@@ -395,6 +418,19 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * @default false
    */
   showLastButton: PropTypes.bool,
+  /**
+   * The props used for each slot inside the TablePagination.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    actions: PropTypes.shape({
+      firstButton: PropTypes.object,
+      lastButton: PropTypes.object,
+      nextButton: PropTypes.object,
+      previousButton: PropTypes.object
+    }),
+    select: PropTypes.object
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/TablePagination/TablePaginationActions.js

@@ -18,8 +18,11 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
+  var _slotProps$firstButto, _slotProps$previousBu, _slotProps$nextButton, _slotProps$lastButton;
   var backIconButtonProps = props.backIconButtonProps,
     count = props.count,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
     getItemAriaLabel = props.getItemAriaLabel,
     nextIconButtonProps = props.nextIconButtonProps,
     onPageChange = props.onPageChange,
@@ -27,7 +30,8 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
     rowsPerPage = props.rowsPerPage,
     showFirstButton = props.showFirstButton,
     showLastButton = props.showLastButton,
-    other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"]);
+    slotProps = props.slotProps,
+    other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"]);
   var theme = useTheme();
   var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
     onPageChange(event, 0);
@@ -44,35 +48,37 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, other, {
-    children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, {
+    children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, _extends({
       onClick: handleFirstPageButtonClick,
-      disabled: page === 0,
+      disabled: disabled || page === 0,
       "aria-label": getItemAriaLabel('first', page),
-      title: getItemAriaLabel('first', page),
+      title: getItemAriaLabel('first', page)
+    }, (_slotProps$firstButto = slotProps == null ? void 0 : slotProps.firstButton) != null ? _slotProps$firstButto : {}, {
       children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/_jsx(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/_jsx(FirstPageIcon, {}))
-    }), /*#__PURE__*/_jsx(IconButton, _extends({
+    })), /*#__PURE__*/_jsx(IconButton, _extends({
       onClick: handleBackButtonClick,
-      disabled: page === 0,
+      disabled: disabled || page === 0,
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
-    }, backIconButtonProps, {
+    }, (_slotProps$previousBu = slotProps == null ? void 0 : slotProps.previousButton) != null ? _slotProps$previousBu : backIconButtonProps, {
       children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {}))
     })), /*#__PURE__*/_jsx(IconButton, _extends({
       onClick: handleNextButtonClick,
-      disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
+      disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
-    }, nextIconButtonProps, {
+    }, (_slotProps$nextButton = slotProps == null ? void 0 : slotProps.nextButton) != null ? _slotProps$nextButton : nextIconButtonProps, {
       children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/_jsx(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/_jsx(KeyboardArrowRight, {}))
-    })), showLastButton && /*#__PURE__*/_jsx(IconButton, {
+    })), showLastButton && /*#__PURE__*/_jsx(IconButton, _extends({
       onClick: handleLastPageButtonClick,
-      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": getItemAriaLabel('last', page),
-      title: getItemAriaLabel('last', page),
+      title: getItemAriaLabel('last', page)
+    }, (_slotProps$lastButton = slotProps == null ? void 0 : slotProps.lastButton) != null ? _slotProps$lastButton : {}, {
       children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/_jsx(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/_jsx(LastPageIcon, {}))
-    })]
+    }))]
   }));
 });
 process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
@@ -84,6 +90,11 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
    * The total number of rows.
    */
   count: PropTypes.number.isRequired,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current page.
    *
@@ -120,6 +131,16 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
   /**
    * If `true`, show the last-page button.
    */
-  showLastButton: PropTypes.bool.isRequired
+  showLastButton: PropTypes.bool.isRequired,
+  /**
+   * The props used for each slot inside the TablePaginationActions.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    firstButton: PropTypes.object,
+    lastButton: PropTypes.object,
+    nextButton: PropTypes.object,
+    previousButton: PropTypes.object
+  })
 } : void 0;
 export default TablePaginationActions;

package/legacy/index.js

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

package/modern/Autocomplete/Autocomplete.js

@@ -4,7 +4,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _ClearIcon, _ArrowDropDownIcon;
 const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
-  _excluded2 = ["ref"];
+  _excluded2 = ["ref"],
+  _excluded3 = ["key"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -523,9 +524,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     })]
   }, params.key);
   const renderGroup = renderGroupProp || defaultRenderGroup;
-  const defaultRenderOption = (props2, option) => /*#__PURE__*/_jsx("li", _extends({}, props2, {
-    children: getOptionLabel(option)
-  }));
+  const defaultRenderOption = (props2, option) => {
+    const {
+        key
+      } = props2,
+      otherProps = _objectWithoutPropertiesLoose(props2, _excluded3);
+    return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
+      children: getOptionLabel(option)
+    }), key);
+  };
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {
     const optionProps = getOptionProps({
@@ -941,6 +948,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
    */
   onInputChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
   /**
    * Callback fired when the popup requests to be opened.
    * Use in controlled mode (see open).

package/modern/FilledInput/FilledInput.js

@@ -125,6 +125,9 @@ const FilledInputRoot = styled(InputBaseRoot, {
   }, ownerState.hiddenLabel && {
     paddingTop: 16,
     paddingBottom: 17
+  }, ownerState.hiddenLabel && ownerState.size === 'small' && {
+    paddingTop: 8,
+    paddingBottom: 9
   }));
 });
 const FilledInputInput = styled(InputBaseInput, {
@@ -165,11 +168,6 @@ const FilledInputInput = styled(InputBaseInput, {
 }, ownerState.hiddenLabel && {
   paddingTop: 16,
   paddingBottom: 17
-}, ownerState.multiline && {
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0
 }, ownerState.startAdornment && {
   paddingLeft: 0
 }, ownerState.endAdornment && {
@@ -177,6 +175,11 @@ const FilledInputInput = styled(InputBaseInput, {
 }, ownerState.hiddenLabel && ownerState.size === 'small' && {
   paddingTop: 8,
   paddingBottom: 9
+}, ownerState.multiline && {
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0
 }));
 const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
   const props = useThemeProps({

package/modern/FormControlLabel/FormControlLabel.js

@@ -151,8 +151,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ref: ref
   }, other, {
     children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
-      direction: "row",
-      alignItems: "center",
+      display: "block",
       children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
         ownerState: ownerState,
         "aria-hidden": true,

package/modern/Rating/Rating.js

@@ -337,16 +337,14 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     const rootNode = rootRef.current;
     const {
       right,
-      left
+      left,
+      width: containerWidth
     } = rootNode.getBoundingClientRect();
-    const {
-      width
-    } = rootNode.firstChild.getBoundingClientRect();
     let percent;
     if (theme.direction === 'rtl') {
-      percent = (right - event.clientX) / (width * max);
+      percent = (right - event.clientX) / containerWidth;
     } else {
-      percent = (event.clientX - left) / (width * max);
+      percent = (event.clientX - left) / containerWidth;
     }
     let newHover = roundValueToPrecision(max * percent + precision / 2, precision);
     newHover = clamp(newHover, precision, max);

package/modern/TablePagination/TablePagination.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _InputBase;
-const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
+const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -155,6 +155,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       colSpan: colSpanProp,
       component = TableCell,
       count,
+      disabled = false,
       getItemAriaLabel = defaultGetAriaLabel,
       labelDisplayedRows = defaultLabelDisplayedRows,
       labelRowsPerPage = 'Rows per page:',
@@ -166,19 +167,21 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       rowsPerPageOptions = [10, 25, 50, 100],
       SelectProps = {},
       showFirstButton = false,
-      showLastButton = false
+      showLastButton = false,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
+  const selectProps = slotProps?.select ?? SelectProps;
+  const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
   let colSpan;
   if (component === TableCell || component === 'td') {
     colSpan = colSpanProp || 1000; // col-span over everything
   }
 
-  const selectId = useId(SelectProps.id);
-  const labelId = useId(SelectProps.labelId);
+  const selectId = useId(selectProps.id);
+  const labelId = useId(selectProps.labelId);
   const getLabelDisplayedRowsTo = () => {
     if (count === -1) {
       return (page + 1) * rowsPerPage;
@@ -202,21 +205,22 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         children: labelRowsPerPage
       }), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, _extends({
         variant: "standard"
-      }, !SelectProps.variant && {
+      }, !selectProps.variant && {
         input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
       }, {
         value: rowsPerPage,
         onChange: onRowsPerPageChange,
         id: selectId,
         labelId: labelId
-      }, SelectProps, {
-        classes: _extends({}, SelectProps.classes, {
+      }, selectProps, {
+        classes: _extends({}, selectProps.classes, {
           // TODO v5 remove `classes.input`
-          root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
-          select: clsx(classes.select, (SelectProps.classes || {}).select),
+          root: clsx(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
+          select: clsx(classes.select, (selectProps.classes || {}).select),
           // TODO v5 remove `selectIcon`
-          icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
+          icon: clsx(classes.selectIcon, (selectProps.classes || {}).icon)
         }),
+        disabled: disabled,
         children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/_createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
           ownerState
         }, {
@@ -242,7 +246,9 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         rowsPerPage: rowsPerPage,
         showFirstButton: showFirstButton,
         showLastButton: showLastButton,
-        getItemAriaLabel: getItemAriaLabel
+        slotProps: slotProps?.actions,
+        getItemAriaLabel: getItemAriaLabel,
+        disabled: disabled
       })]
     })
   }));
@@ -260,6 +266,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   ActionsComponent: PropTypes.elementType,
   /**
    * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
+   *
+   * This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.actions.previousButton` instead.
    */
   backIconButtonProps: PropTypes.object,
   /**
@@ -285,6 +294,11 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * To enable server side pagination for an unknown number of items, provide -1.
    */
   count: integerPropType.isRequired,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current page.
    * This is important for screen reader users.
@@ -316,6 +330,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   labelRowsPerPage: PropTypes.node,
   /**
    * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
+   *
+   * This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.actions.nextButton` instead.
    */
   nextIconButtonProps: PropTypes.object,
   /**
@@ -367,6 +384,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   })]).isRequired),
   /**
    * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
+   *
+   * This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.select` instead.
+   *
    * @default {}
    */
   SelectProps: PropTypes.object,
@@ -380,6 +401,19 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * @default false
    */
   showLastButton: PropTypes.bool,
+  /**
+   * The props used for each slot inside the TablePagination.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    actions: PropTypes.shape({
+      firstButton: PropTypes.object,
+      lastButton: PropTypes.object,
+      nextButton: PropTypes.object,
+      previousButton: PropTypes.object
+    }),
+    select: PropTypes.object
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */