@mui/material 5.15.0 → 5.15.1

package/AccordionActions/AccordionActions.js

@@ -38,7 +38,7 @@ const AccordionActionsRoot = styled('div', {
   padding: 8,
   justifyContent: 'flex-end'
 }, !ownerState.disableSpacing && {
-  '& > :not(:first-of-type)': {
+  '& > :not(style) ~ :not(style)': {
     marginLeft: 8
   }
 }));

package/Autocomplete/Autocomplete.js

@@ -660,7 +660,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
   /**
-   * If `true`, the portion of the selected suggestion that has not been typed by the user,
+   * If `true`, the portion of the selected suggestion that the user hasn't typed,
    * known as the completion string, appears inline after the input cursor in the textbox.
    * The inline completion string is visually highlighted and has a selected state.
    * @default false
@@ -676,7 +676,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * when the Autocomplete loses focus unless the user chooses
    * a different option or changes the character string in the input.
    *
-   * When using `freeSolo` mode, the typed value will be the input value
+   * When using the `freeSolo` mode, the typed value will be the input value
    * if the Autocomplete loses focus without highlighting an option.
    * @default false
    */
@@ -711,8 +711,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
-   * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume their search.
+   * Set it to `true` if you want to help the user enter a new value.
+   * Set it to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.15.1
+
+<!-- generated comparing v5.15.0..master -->
+
+_Dec 19, 2023_
+
+A big thanks to the 15 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.1`
+
+- &#8203;<!-- 13 -->[CardActions][DialogActions] Apply margin for all children except for 1st child (#40168) @sai6855
+- &#8203;<!-- 03 -->[TablePagination] Add ability to change icons in TablePaginationActions using `slots` and `slotProps` (#33797) @pratikkarad
+- &#8203;<!-- 13 -->[CssVarsProvider] Fix HSL breaking button styles (#39869) @gitstart
+
+### `@mui/joy@5.0.0-beta.19`
+
+- &#8203;<!-- 05 -->[FormControl] Fix issue with the conditional setting of `htmlFor` and `id` attributes not functioning properly for form labels (#40180) @ReaZzy
+- &#8203;<!-- 04 -->[typescript] Address TypeScript issue with custom zIndex not functioning (#40133) @qiweiii
+
+### `@mui/styled-engine-sc@6.0.0-alpha.9`
+
+- &#8203;<!-- 02 -->[typescript] Fix `theme` being of type any (#40200) @mnajdova
+
+### Docs
+
+- &#8203;<!-- 09 -->[joy-ui] Fix typo in the CSS baseline page (#40222) @possibilities
+- &#8203;<!-- 08 -->[joy-ui] Document missing Autocomplete props (#39979) @ZeeshanTamboli
+- &#8203;<!-- 10 -->[joy-ui] Fix typo about Typography levels (#40230) @zanivan
+- &#8203;<!-- 07 -->[material-ui] Update the related projects page to list `mui-tiptap` for rich text (#40216) @sjdemartini
+- &#8203;<!-- 06 -->[material-ui] Fix typo in the Next.js integration page (#40209) @s8990
+
+### Core
+
+- &#8203;<!-- 14 -->[blog] Fix access to Notion without an account @oliviertassinari
+- &#8203;<!-- 12 -->[core] Update workflows and issue templates to reflect the updated label (#40197) @MBilalShafi
+- &#8203;<!-- 11 -->[docs] Replace Twitter with X (#40193) @mbrookes
+- &#8203;<!-- 10 -->[docs-infra] Uplift the Algolia search modal design (#40186) @danilo-leal
+- &#8203;<!-- 01 -->[website] Update product descriptions and social preview images (#32181) @danilo-leal
+
+All contributors of this release in alphabetical order: @danilo-leal, @gitstart, @MBilalShafi, @mbrookes, @mnajdova, @oliviertassinari, @possibilities, @pratikkarad, @qiweiii, @ReaZzy, @s8990, @sai6855, @sjdemartini, @zanivan, @ZeeshanTamboli
+
 ## 5.15.0
 
 <!-- generated comparing v5.14.20..master -->

package/CardActions/CardActions.js

@@ -37,7 +37,7 @@ const CardActionsRoot = styled('div', {
   alignItems: 'center',
   padding: 8
 }, !ownerState.disableSpacing && {
-  '& > :not(:first-of-type)': {
+  '& > :not(style) ~ :not(style)': {
     marginLeft: 8
   }
 }));

package/TablePagination/TablePagination.d.ts

@@ -142,6 +142,14 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
     actions?: TablePaginationActionsProps['slotProps'];
     select?: Partial<SelectProps>;
   };
+  /**
+   * The components used for each slot inside the TablePagination.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: {
+    actions?: TablePaginationActionsProps['slots'];
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/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", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
+const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -168,7 +168,8 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       SelectProps = {},
       showFirstButton = false,
       showLastButton = false,
-      slotProps
+      slotProps = {},
+      slots = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
@@ -245,7 +246,8 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         rowsPerPage: rowsPerPage,
         showFirstButton: showFirstButton,
         showLastButton: showLastButton,
-        slotProps: slotProps == null ? void 0 : slotProps.actions,
+        slotProps: slotProps.actions,
+        slots: slots.actions,
         getItemAriaLabel: getItemAriaLabel,
         disabled: disabled
       })]
@@ -407,12 +409,33 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   slotProps: PropTypes.shape({
     actions: PropTypes.shape({
       firstButton: PropTypes.object,
+      firstButtonIcon: PropTypes.object,
       lastButton: PropTypes.object,
+      lastButtonIcon: PropTypes.object,
       nextButton: PropTypes.object,
-      previousButton: PropTypes.object
+      nextButtonIcon: PropTypes.object,
+      previousButton: PropTypes.object,
+      previousButtonIcon: PropTypes.object
     }),
     select: PropTypes.object
   }),
+  /**
+   * The components used for each slot inside the TablePagination.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    actions: PropTypes.shape({
+      firstButton: PropTypes.elementType,
+      firstButtonIcon: PropTypes.elementType,
+      lastButton: PropTypes.elementType,
+      lastButtonIcon: PropTypes.elementType,
+      nextButton: PropTypes.elementType,
+      nextButtonIcon: PropTypes.elementType,
+      previousButton: PropTypes.elementType,
+      previousButtonIcon: PropTypes.elementType
+    })
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/TablePagination/TablePaginationActions.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IconButtonProps } from '../IconButton/IconButton';
+import { SvgIconProps } from '../SvgIcon';
 
 export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -41,7 +42,55 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
     lastButton?: Partial<IconButtonProps>;
     nextButton?: Partial<IconButtonProps>;
     previousButton?: Partial<IconButtonProps>;
+    firstButtonIcon?: Partial<SvgIconProps>;
+    lastButtonIcon?: Partial<SvgIconProps>;
+    nextButtonIcon?: Partial<SvgIconProps>;
+    previousButtonIcon?: Partial<SvgIconProps>;
   };
+  slots?: TablePaginationActionsSlots;
+}
+
+export interface TablePaginationActionsSlots {
+  /**
+   * The component that renders the first button.
+   * @default IconButton
+   */
+  firstButton?: React.ElementType;
+  /**
+   * The component that renders the last button.
+   * @default IconButton
+   */
+  lastButton?: React.ElementType;
+  /**
+   * The component that renders the next button.
+   * @default IconButton
+   */
+  nextButton?: React.ElementType;
+  /**
+   * The component that renders the previous button.
+   * @default IconButton
+   */
+  previousButton?: React.ElementType;
+  /**
+   * The component that renders the first button icon.
+   * @default FirstPageIcon
+   */
+  firstButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the last button icon.
+   * @default LastPageIcon
+   */
+  lastButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the next button icon.
+   * @default KeyboardArrowRight
+   */
+  nextButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the previous button icon.
+   * @default KeyboardArrowLeft
+   */
+  previousButtonIcon?: React.ElementType;
 }
 
 declare const TablePaginationActions: React.JSXElementConstructor<TablePaginationActionsProps>;

package/TablePagination/TablePaginationActions.js

@@ -2,16 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
-const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"];
+const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import useTheme from '../styles/useTheme';
 import IconButton from '../IconButton';
-import LastPageIcon from '../internal/svg-icons/LastPage';
-import FirstPageIcon from '../internal/svg-icons/FirstPage';
+import LastPageIconDefault from '../internal/svg-icons/LastPage';
+import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
 
 /**
  * @ignore - internal component.
@@ -19,7 +18,7 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
-  var _slotProps$firstButto, _slotProps$previousBu, _slotProps$nextButton, _slotProps$lastButton;
+  var _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$previousButton, _slots$firstButtonIco, _slots$lastButtonIcon, _slots$nextButtonIcon, _slots$previousButton2;
   const {
       backIconButtonProps,
       count,
@@ -31,7 +30,8 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       rowsPerPage,
       showFirstButton,
       showLastButton,
-      slotProps
+      slots = {},
+      slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -47,39 +47,55 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   const handleLastPageButtonClick = event => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
+  const FirstButton = (_slots$firstButton = slots.firstButton) != null ? _slots$firstButton : IconButton;
+  const LastButton = (_slots$lastButton = slots.lastButton) != null ? _slots$lastButton : IconButton;
+  const NextButton = (_slots$nextButton = slots.nextButton) != null ? _slots$nextButton : IconButton;
+  const PreviousButton = (_slots$previousButton = slots.previousButton) != null ? _slots$previousButton : IconButton;
+  const FirstButtonIcon = (_slots$firstButtonIco = slots.firstButtonIcon) != null ? _slots$firstButtonIco : FirstPageIconDefault;
+  const LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : LastPageIconDefault;
+  const NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : KeyboardArrowRight;
+  const PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : KeyboardArrowLeft;
+  const FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
+  const PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
+  const NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
+  const LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
+  const firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
+  const previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
+  const nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
+  const lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, other, {
-    children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, _extends({
+    children: [showFirstButton && /*#__PURE__*/_jsx(FirstButtonSlot, _extends({
       onClick: handleFirstPageButtonClick,
       disabled: disabled || page === 0,
       "aria-label": 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({
+    }, firstButtonSlotProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
+    })), /*#__PURE__*/_jsx(PreviousButtonSlot, _extends({
       onClick: handleBackButtonClick,
       disabled: disabled || page === 0,
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
-    }, (_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({
+    }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
+    })), /*#__PURE__*/_jsx(NextButtonSlot, _extends({
       onClick: handleNextButtonClick,
       disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
-    }, (_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, _extends({
+    }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
+    })), showLastButton && /*#__PURE__*/_jsx(LastButtonSlot, _extends({
       onClick: handleLastPageButtonClick,
       disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": 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, {}))
+    }, lastButtonSlotProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
     }))]
   }));
 });
@@ -140,9 +156,28 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
    */
   slotProps: PropTypes.shape({
     firstButton: PropTypes.object,
+    firstButtonIcon: PropTypes.object,
     lastButton: PropTypes.object,
+    lastButtonIcon: PropTypes.object,
     nextButton: PropTypes.object,
-    previousButton: PropTypes.object
+    nextButtonIcon: PropTypes.object,
+    previousButton: PropTypes.object,
+    previousButtonIcon: PropTypes.object
+  }),
+  /**
+   * The components used for each slot inside the TablePaginationActions.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    firstButton: PropTypes.elementType,
+    firstButtonIcon: PropTypes.elementType,
+    lastButton: PropTypes.elementType,
+    lastButtonIcon: PropTypes.elementType,
+    nextButton: PropTypes.elementType,
+    nextButtonIcon: PropTypes.elementType,
+    previousButton: PropTypes.elementType,
+    previousButtonIcon: PropTypes.elementType
   })
 } : void 0;
 export default TablePaginationActions;

package/index.js

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

package/legacy/AccordionActions/AccordionActions.js

@@ -33,7 +33,7 @@ var AccordionActionsRoot = styled('div', {
     padding: 8,
     justifyContent: 'flex-end'
   }, !ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8
     }
   });

package/legacy/Autocomplete/Autocomplete.js

@@ -671,7 +671,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
   /**
-   * If `true`, the portion of the selected suggestion that has not been typed by the user,
+   * If `true`, the portion of the selected suggestion that the user hasn't typed,
    * known as the completion string, appears inline after the input cursor in the textbox.
    * The inline completion string is visually highlighted and has a selected state.
    * @default false
@@ -687,7 +687,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * when the Autocomplete loses focus unless the user chooses
    * a different option or changes the character string in the input.
    *
-   * When using `freeSolo` mode, the typed value will be the input value
+   * When using the `freeSolo` mode, the typed value will be the input value
    * if the Autocomplete loses focus without highlighting an option.
    * @default false
    */
@@ -722,8 +722,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
-   * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume their search.
+   * Set it to `true` if you want to help the user enter a new value.
+   * Set it to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,

package/legacy/CardActions/CardActions.js

@@ -32,7 +32,7 @@ var CardActionsRoot = styled('div', {
     alignItems: 'center',
     padding: 8
   }, !ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8
     }
   });

package/legacy/TablePagination/TablePagination.js

@@ -183,8 +183,11 @@ 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,
-    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"]);
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    other = _objectWithoutProperties(props, ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps", "slots"]);
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
   var selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
@@ -261,7 +264,8 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
         rowsPerPage: rowsPerPage,
         showFirstButton: showFirstButton,
         showLastButton: showLastButton,
-        slotProps: slotProps == null ? void 0 : slotProps.actions,
+        slotProps: slotProps.actions,
+        slots: slots.actions,
         getItemAriaLabel: getItemAriaLabel,
         disabled: disabled
       })]
@@ -421,12 +425,33 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   slotProps: PropTypes.shape({
     actions: PropTypes.shape({
       firstButton: PropTypes.object,
+      firstButtonIcon: PropTypes.object,
       lastButton: PropTypes.object,
+      lastButtonIcon: PropTypes.object,
       nextButton: PropTypes.object,
-      previousButton: PropTypes.object
+      nextButtonIcon: PropTypes.object,
+      previousButton: PropTypes.object,
+      previousButtonIcon: PropTypes.object
     }),
     select: PropTypes.object
   }),
+  /**
+   * The components used for each slot inside the TablePagination.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    actions: PropTypes.shape({
+      firstButton: PropTypes.elementType,
+      firstButtonIcon: PropTypes.elementType,
+      lastButton: PropTypes.elementType,
+      lastButtonIcon: PropTypes.elementType,
+      nextButton: PropTypes.elementType,
+      nextButtonIcon: PropTypes.elementType,
+      previousButton: PropTypes.elementType,
+      previousButtonIcon: PropTypes.elementType
+    })
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/TablePagination/TablePaginationActions.js

@@ -2,15 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import useTheme from '../styles/useTheme';
 import IconButton from '../IconButton';
-import LastPageIcon from '../internal/svg-icons/LastPage';
-import FirstPageIcon from '../internal/svg-icons/FirstPage';
+import LastPageIconDefault from '../internal/svg-icons/LastPage';
+import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
 
 /**
  * @ignore - internal component.
@@ -18,7 +17,7 @@ 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 _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$previousButton, _slots$firstButtonIco, _slots$lastButtonIcon, _slots$nextButtonIcon, _slots$previousButton2;
   var backIconButtonProps = props.backIconButtonProps,
     count = props.count,
     _props$disabled = props.disabled,
@@ -30,8 +29,11 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
     rowsPerPage = props.rowsPerPage,
     showFirstButton = props.showFirstButton,
     showLastButton = props.showLastButton,
-    slotProps = props.slotProps,
-    other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"]);
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slots", "slotProps"]);
   var theme = useTheme();
   var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
     onPageChange(event, 0);
@@ -45,39 +47,55 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
   var handleLastPageButtonClick = function handleLastPageButtonClick(event) {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
+  var FirstButton = (_slots$firstButton = slots.firstButton) != null ? _slots$firstButton : IconButton;
+  var LastButton = (_slots$lastButton = slots.lastButton) != null ? _slots$lastButton : IconButton;
+  var NextButton = (_slots$nextButton = slots.nextButton) != null ? _slots$nextButton : IconButton;
+  var PreviousButton = (_slots$previousButton = slots.previousButton) != null ? _slots$previousButton : IconButton;
+  var FirstButtonIcon = (_slots$firstButtonIco = slots.firstButtonIcon) != null ? _slots$firstButtonIco : FirstPageIconDefault;
+  var LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : LastPageIconDefault;
+  var NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : KeyboardArrowRight;
+  var PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : KeyboardArrowLeft;
+  var FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
+  var PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
+  var NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
+  var LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
+  var firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
+  var previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
+  var nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
+  var lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, other, {
-    children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, _extends({
+    children: [showFirstButton && /*#__PURE__*/_jsx(FirstButtonSlot, _extends({
       onClick: handleFirstPageButtonClick,
       disabled: disabled || page === 0,
       "aria-label": 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({
+    }, firstButtonSlotProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
+    })), /*#__PURE__*/_jsx(PreviousButtonSlot, _extends({
       onClick: handleBackButtonClick,
       disabled: disabled || page === 0,
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
-    }, (_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({
+    }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
+    })), /*#__PURE__*/_jsx(NextButtonSlot, _extends({
       onClick: handleNextButtonClick,
       disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
-    }, (_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, _extends({
+    }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
+    })), showLastButton && /*#__PURE__*/_jsx(LastButtonSlot, _extends({
       onClick: handleLastPageButtonClick,
       disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": 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, {}))
+    }, lastButtonSlotProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
     }))]
   }));
 });
@@ -138,9 +156,28 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
    */
   slotProps: PropTypes.shape({
     firstButton: PropTypes.object,
+    firstButtonIcon: PropTypes.object,
     lastButton: PropTypes.object,
+    lastButtonIcon: PropTypes.object,
     nextButton: PropTypes.object,
-    previousButton: PropTypes.object
+    nextButtonIcon: PropTypes.object,
+    previousButton: PropTypes.object,
+    previousButtonIcon: PropTypes.object
+  }),
+  /**
+   * The components used for each slot inside the TablePaginationActions.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    firstButton: PropTypes.elementType,
+    firstButtonIcon: PropTypes.elementType,
+    lastButton: PropTypes.elementType,
+    lastButtonIcon: PropTypes.elementType,
+    nextButton: PropTypes.elementType,
+    nextButtonIcon: PropTypes.elementType,
+    previousButton: PropTypes.elementType,
+    previousButtonIcon: PropTypes.elementType
   })
 } : void 0;
 export default TablePaginationActions;

package/legacy/index.js

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