@mui/material 6.2.1 → 6.3.1

package/modern/Zoom/Zoom.js

@@ -114,7 +114,10 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           transform: 'scale(0)',
@@ -124,7 +127,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/modern/index.js

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

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.2.1";
+export const version = "6.3.1";
 export const major = Number("6");
-export const minor = Number("2");
+export const minor = Number("3");
 export const patch = Number("1");
 export const prerelease = undefined;
 export default version;

package/node/AccordionSummary/AccordionSummary.js

@@ -45,6 +45,7 @@ const AccordionSummaryRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   };
   return {
     display: 'flex',
+    width: '100%',
     minHeight: 48,
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition),
@@ -67,7 +68,7 @@ const AccordionSummaryRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     }]
   };
 }));
-const AccordionSummaryContent = (0, _zeroStyled.styled)('div', {
+const AccordionSummaryContent = (0, _zeroStyled.styled)('span', {
   name: 'MuiAccordionSummary',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
@@ -75,6 +76,7 @@ const AccordionSummaryContent = (0, _zeroStyled.styled)('div', {
   theme
 }) => ({
   display: 'flex',
+  textAlign: 'start',
   flexGrow: 1,
   margin: '12px 0',
   variants: [{
@@ -89,7 +91,7 @@ const AccordionSummaryContent = (0, _zeroStyled.styled)('div', {
     }
   }]
 })));
-const AccordionSummaryExpandIconWrapper = (0, _zeroStyled.styled)('div', {
+const AccordionSummaryExpandIconWrapper = (0, _zeroStyled.styled)('span', {
   name: 'MuiAccordionSummary',
   slot: 'ExpandIconWrapper',
   overridesResolver: (props, styles) => styles.expandIconWrapper
@@ -144,7 +146,6 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     focusRipple: false,
     disableRipple: true,
     disabled: disabled,
-    component: "div",
     "aria-expanded": expanded,
     className: (0, _clsx.default)(classes.root, className),
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),

package/node/AppBar/AppBar.js

@@ -221,7 +221,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
   enableColorOnDark: _propTypes.default.bool,
   /**
    * The positioning type. The behavior of the different options is described
-   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
    * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
    * @default 'fixed'
    */

package/node/Autocomplete/Autocomplete.js

@@ -662,53 +662,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   };
   const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
   const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
-  const renderAutocompletePopperChildren = children => /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
-    as: PopperSlot,
-    ...popperProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePaper, {
-      as: PaperSlot,
-      ...paperProps,
-      children: children
-    })
-  });
-  let autocompletePopper = null;
-  if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(
-    /*#__PURE__*/
-    // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
-    // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
-    (0, _jsxRuntime.jsx)(ListboxSlot, {
-      as: ListboxComponentProp,
-      ...listboxProps,
-      children: groupedOptions.map((option, index) => {
-        if (groupBy) {
-          return renderGroup({
-            key: option.key,
-            group: option.group,
-            children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
-          });
-        }
-        return renderListOption(option, index);
-      })
-    }));
-  } else if (loading && groupedOptions.length === 0) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
-      className: classes.loading,
-      ownerState: ownerState,
-      children: loadingText
-    }));
-  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
-      className: classes.noOptions,
-      ownerState: ownerState,
-      role: "presentation",
-      onMouseDown: event => {
-        // Prevent input blur when interacting with the "no options" content
-        event.preventDefault();
-      },
-      children: noOptionsText
-    }));
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteRoot, {
       ref: ref,
@@ -762,7 +715,41 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ...getInputProps()
         }
       })
-    }), anchorEl ? autocompletePopper : null]
+    }), anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
+      as: PopperSlot,
+      ...popperProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, {
+        as: PaperSlot,
+        ...paperProps,
+        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
+          className: classes.loading,
+          ownerState: ownerState,
+          children: loadingText
+        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
+          className: classes.noOptions,
+          ownerState: ownerState,
+          role: "presentation",
+          onMouseDown: event => {
+            // Prevent input blur when interacting with the "no options" content
+            event.preventDefault();
+          },
+          children: noOptionsText
+        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
+          as: ListboxComponentProp,
+          ...listboxProps,
+          children: groupedOptions.map((option, index) => {
+            if (groupBy) {
+              return renderGroup({
+                key: option.key,
+                group: option.group,
+                children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
+              });
+            }
+            return renderListOption(option, index);
+          })
+        }) : null]
+      })
+    }) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
@@ -964,7 +951,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 {Value} options The options to group.
+   * @param {Value} option The Autocomplete option.
    * @returns {string}
    */
   groupBy: _propTypes.default.func,

package/node/Backdrop/Backdrop.js

@@ -17,13 +17,6 @@ var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _backdropClasses = require("./backdropClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const removeOwnerState = props => {
-  const {
-    ownerState,
-    ...rest
-  } = props;
-  return rest;
-};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -112,12 +105,11 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionPropsRemoved,
+    ...transitionProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
       "aria-hidden": true,
       ...rootProps,

package/node/Collapse/Collapse.js

@@ -279,7 +279,10 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     nodeRef: nodeRef,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
-    children: (state, childProps) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapseRoot, {
+    children: (state, {
+      ownerState: incomingOwnerState,
+      ...restChildProps
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapseRoot, {
       as: component,
       className: (0, _clsx.default)(classes.root, className, {
         'entered': classes.entered,
@@ -290,13 +293,11 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
         ...style
       },
       ref: handleRef,
-      ...childProps,
-      // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps`
-      // that might have been forwarded from the Transition component.
       ownerState: {
         ...ownerState,
         state
       },
+      ...restChildProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapseWrapper, {
         ownerState: {
           ...ownerState,

package/node/Fade/Fade.js

@@ -121,7 +121,10 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -131,7 +134,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/node/FilledInput/FilledInput.js

@@ -519,7 +519,5 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    */
   value: _propTypes.default.any
 } : void 0;
-if (FilledInput) {
-  FilledInput.muiName = 'Input';
-}
+FilledInput.muiName = 'Input';
 var _default = exports.default = FilledInput;

package/node/Grow/Grow.js

@@ -170,7 +170,10 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -181,7 +184,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/node/Icon/Icon.js

@@ -188,7 +188,5 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-if (Icon) {
-  Icon.muiName = 'Icon';
-}
+Icon.muiName = 'Icon';
 var _default = exports.default = Icon;

package/node/Input/Input.js

@@ -364,7 +364,5 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    */
   value: _propTypes.default.any
 } : void 0;
-if (Input) {
-  Input.muiName = 'Input';
-}
+Input.muiName = 'Input';
 var _default = exports.default = Input;

package/node/OutlinedInput/OutlinedInput.js

@@ -413,7 +413,5 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: _propTypes.default.any
 } : void 0;
-if (OutlinedInput) {
-  OutlinedInput.muiName = 'Input';
-}
+OutlinedInput.muiName = 'Input';
 var _default = exports.default = OutlinedInput;

package/node/Slide/Slide.js

@@ -224,7 +224,10 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     in: inProp,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
         style: {
@@ -232,7 +235,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
           ...style,
           ...children.props.style
         },
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/node/StepContent/StepContent.js

@@ -18,6 +18,7 @@ var _Collapse = _interopRequireDefault(require("../Collapse"));
 var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepContentClasses = require("./stepContentClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -73,6 +74,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     TransitionComponent = _Collapse.default,
     transitionDuration: transitionDurationProp = 'auto',
     TransitionProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const {
@@ -97,19 +100,32 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
     transitionDuration = undefined;
   }
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      transition: TransitionProps,
+      ...slotProps
+    }
+  };
+  const [TransitionSlot, transitionProps] = (0, _useSlot.default)('transition', {
+    elementType: StepContentTransition,
+    externalForwardedProps,
+    ownerState,
+    className: classes.transition,
+    additionalProps: {
+      in: active || expanded,
+      timeout: transitionDuration,
+      unmountOnExit: true
+    }
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StepContentRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ownerState: ownerState,
     ...other,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepContentTransition, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
       as: TransitionComponent,
-      in: active || expanded,
-      className: classes.transition,
-      ownerState: ownerState,
-      timeout: transitionDuration,
-      unmountOnExit: true,
-      ...TransitionProps,
+      ...transitionProps,
       children: children
     })
   });
@@ -131,6 +147,20 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
    * @ignore
    */
   className: _propTypes.default.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    transition: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -139,6 +169,7 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: _propTypes.default.elementType,
   /**
@@ -156,6 +187,7 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

package/node/StepLabel/StepLabel.js

@@ -274,7 +274,5 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-if (StepLabel) {
-  StepLabel.muiName = 'StepLabel';
-}
+StepLabel.muiName = 'StepLabel';
 var _default = exports.default = StepLabel;

package/node/SvgIcon/SvgIcon.js

@@ -237,7 +237,5 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: _propTypes.default.string
 } : void 0;
-if (SvgIcon) {
-  SvgIcon.muiName = 'SvgIcon';
-}
+SvgIcon.muiName = 'SvgIcon';
 var _default = exports.default = SvgIcon;

package/node/TablePagination/TablePagination.js

@@ -14,7 +14,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _isHostComponent = _interopRequireDefault(require("../utils/isHostComponent"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -26,6 +25,7 @@ var _Toolbar = _interopRequireDefault(require("../Toolbar"));
 var _TablePaginationActions = _interopRequireDefault(require("./TablePaginationActions"));
 var _useId = _interopRequireDefault(require("../utils/useId"));
 var _tablePaginationClasses = _interopRequireWildcard(require("./tablePaginationClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _InputBase;
 const TablePaginationRoot = (0, _zeroStyled.styled)(_TableCell.default, {
@@ -161,7 +161,6 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
   const {
     ActionsComponent = _TablePaginationActions.default,
     backIconButtonProps,
-    className,
     colSpan: colSpanProp,
     component = _TableCell.default,
     count,
@@ -198,22 +197,73 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
     }
     return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePaginationRoot, {
-    colSpan: colSpan,
-    ref: ref,
-    as: component,
-    ownerState: ownerState,
-    className: (0, _clsx.default)(classes.root, className),
-    ...other,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TablePaginationToolbar, {
-      className: classes.toolbar,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TablePaginationSpacer, {
-        className: classes.spacer
-      }), rowsPerPageOptions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePaginationSelectLabel, {
-        className: classes.selectLabel,
-        id: labelId,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    className: classes.root,
+    elementType: TablePaginationRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      component,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      colSpan
+    }
+  });
+  const [ToolbarSlot, toolbarSlotProps] = (0, _useSlot.default)('toolbar', {
+    className: classes.toolbar,
+    elementType: TablePaginationToolbar,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SpacerSlot, spacerSlotProps] = (0, _useSlot.default)('spacer', {
+    className: classes.spacer,
+    elementType: TablePaginationSpacer,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SelectLabelSlot, selectLabelSlotProps] = (0, _useSlot.default)('selectLabel', {
+    className: classes.selectLabel,
+    elementType: TablePaginationSelectLabel,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      id: labelId
+    }
+  });
+  const [SelectSlot, selectSlotProps] = (0, _useSlot.default)('select', {
+    className: classes.select,
+    elementType: TablePaginationSelect,
+    externalForwardedProps,
+    ownerState
+  });
+  const [MenuItemSlot, menuItemSlotProps] = (0, _useSlot.default)('menuItem', {
+    className: classes.menuItem,
+    elementType: MenuItemComponent,
+    externalForwardedProps,
+    ownerState
+  });
+  const [DisplayedRows, displayedRowsProps] = (0, _useSlot.default)('displayedRows', {
+    className: classes.displayedRows,
+    elementType: TablePaginationDisplayedRows,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
+    ...rootSlotProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToolbarSlot, {
+      ...toolbarSlotProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpacerSlot, {
+        ...spacerSlotProps
+      }), rowsPerPageOptions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectLabelSlot, {
+        ...selectLabelSlotProps,
         children: labelRowsPerPage
-      }), rowsPerPageOptions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePaginationSelect, {
+      }), rowsPerPageOptions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectSlot, {
         variant: "standard",
         ...(!selectProps.variant && {
           input: _InputBase || (_InputBase = /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase2.default, {}))
@@ -232,16 +282,14 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
           icon: (0, _clsx.default)(classes.selectIcon, (selectProps.classes || {}).icon)
         },
         disabled: disabled,
-        children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/(0, _react.createElement)(MenuItemComponent, {
-          ...(!(0, _isHostComponent.default)(MenuItemComponent) && {
-            ownerState
-          }),
-          className: classes.menuItem,
+        ...selectSlotProps,
+        children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/(0, _react.createElement)(MenuItemSlot, {
+          ...menuItemSlotProps,
           key: rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption,
           value: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
         }, rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePaginationDisplayedRows, {
-        className: classes.displayedRows,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DisplayedRows, {
+        ...displayedRowsProps,
         children: labelDisplayedRows({
           from: count === 0 ? 0 : page * rowsPerPage + 1,
           to: getLabelDisplayedRowsTo(),
@@ -288,10 +336,6 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
   /**
    * @ignore
    */
@@ -415,7 +459,7 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    */
   showLastButton: _propTypes.default.bool,
   /**
-   * The props used for each slot inside the TablePagination.
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: _propTypes.default.shape({
@@ -429,11 +473,16 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
       previousButton: _propTypes.default.object,
       previousButtonIcon: _propTypes.default.object
     }),
-    select: _propTypes.default.object
+    displayedRows: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    menuItem: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    select: _propTypes.default.object,
+    selectLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    spacer: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    toolbar: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
-   * The components used for each slot inside the TablePagination.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
@@ -446,7 +495,14 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
       nextButtonIcon: _propTypes.default.elementType,
       previousButton: _propTypes.default.elementType,
       previousButtonIcon: _propTypes.default.elementType
-    })
+    }),
+    displayedRows: _propTypes.default.elementType,
+    menuItem: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    select: _propTypes.default.elementType,
+    selectLabel: _propTypes.default.elementType,
+    spacer: _propTypes.default.elementType,
+    toolbar: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.