[material-ui][TablePagination] Implement slotProps pattern for the …

…actions and the select slots (#39353)
mui · Nov 7, 2023 · a545acd · a545acd
1 parent 627093c
commit a545acd
Show file tree

Hide file tree

Showing 7 changed files with 343 additions and 21 deletions.
diff --git a/docs/pages/material-ui/api/table-pagination.json b/docs/pages/material-ui/api/table-pagination.json
@@ -12,9 +12,14 @@
     "page": { "type": { "name": "custom", "description": "integer" }, "required": true },
     "rowsPerPage": { "type": { "name": "custom", "description": "integer" }, "required": true },
     "ActionsComponent": { "type": { "name": "elementType" }, "default": "TablePaginationActions" },
-    "backIconButtonProps": { "type": { "name": "object" } },
+    "backIconButtonProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.actions.previousButton</code> instead."
+    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "getItemAriaLabel": {
       "type": { "name": "func" },
       "default": "function defaultGetAriaLabel(type) {\n  return `Go to ${type} page`;\n}",
@@ -25,7 +30,11 @@
       "default": "function defaultLabelDisplayedRows({ from, to, count }) {\n  return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;\n}"
     },
     "labelRowsPerPage": { "type": { "name": "node" }, "default": "'Rows per page:'" },
-    "nextIconButtonProps": { "type": { "name": "object" } },
+    "nextIconButtonProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.actions.nextButton</code> instead."
+    },
     "onRowsPerPageChange": {
       "type": { "name": "func" },
       "signature": {
@@ -40,9 +49,21 @@
       },
       "default": "[10, 25, 50, 100]"
     },
-    "SelectProps": { "type": { "name": "object" }, "default": "{}" },
+    "SelectProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.select</code> instead."
+    },
     "showFirstButton": { "type": { "name": "bool" }, "default": "false" },
     "showLastButton": { "type": { "name": "bool" }, "default": "false" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ actions?: { firstButton?: object, lastButton?: object, nextButton?: object, previousButton?: object }, select?: object }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

diff --git a/docs/translations/api-docs/table-pagination/table-pagination.json b/docs/translations/api-docs/table-pagination/table-pagination.json
@@ -5,7 +5,7 @@
       "description": "The component used for displaying the actions. Either a string to use a HTML element or a component."
     },
     "backIconButtonProps": {
-      "description": "Props applied to the back arrow <a href=\"/material-ui/api/icon-button/\"><code>IconButton</code></a> component."
+      "description": "Props applied to the back arrow <a href=\"/material-ui/api/icon-button/\"><code>IconButton</code></a> component.<br>This prop is an alias for <code>slotProps.actions.previousButton</code> and will be overriden by it if both are used."
     },
     "classes": { "description": "Override or extend the styles applied to the component." },
     "component": {
@@ -14,6 +14,7 @@
     "count": {
       "description": "The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1."
     },
+    "disabled": { "description": "If <code>true</code>, the component is disabled." },
     "getItemAriaLabel": {
       "description": "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.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
       "typeDescriptions": {
@@ -27,7 +28,7 @@
       "description": "Customize the rows per page label.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>."
     },
     "nextIconButtonProps": {
-      "description": "Props applied to the next arrow <a href=\"/material-ui/api/icon-button/\"><code>IconButton</code></a> element."
+      "description": "Props applied to the next arrow <a href=\"/material-ui/api/icon-button/\"><code>IconButton</code></a> element.<br>This prop is an alias for <code>slotProps.actions.nextButton</code> and will be overriden by it if both are used."
     },
     "onPageChange": {
       "description": "Callback fired when the page is changed.",
@@ -48,10 +49,11 @@
       "description": "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows."
     },
     "SelectProps": {
-      "description": "Props applied to the rows per page <a href=\"/material-ui/api/select/\"><code>Select</code></a> element."
+      "description": "Props applied to the rows per page <a href=\"/material-ui/api/select/\"><code>Select</code></a> element.<br>This prop is an alias for <code>slotProps.select</code> and will be overriden by it if both are used."
     },
     "showFirstButton": { "description": "If <code>true</code>, show the first-page button." },
     "showLastButton": { "description": "If <code>true</code>, show the last-page button." },
+    "slotProps": { "description": "The props used for each slot inside the TablePagination." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }

diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts
@@ -29,6 +29,9 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
   ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
   /**
    * 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?: Partial<IconButtonProps>;
   /**
@@ -41,6 +44,11 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * To enable server side pagination for an unknown number of items, provide -1.
    */
   count: number;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * 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.
@@ -72,6 +80,9 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
   labelRowsPerPage?: React.ReactNode;
   /**
    * 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?: Partial<IconButtonProps>;
   /**
@@ -106,6 +117,10 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
   rowsPerPageOptions?: Array<number | { value: number; label: string }>;
   /**
    * 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?: Partial<SelectProps>;
@@ -119,6 +134,14 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * @default false
    */
   showLastButton?: boolean;
+  /**
+   * The props used for each slot inside the TablePagination.
+   * @default {}
+   */
+  slotProps?: {
+    actions?: TablePaginationActionsProps['slotProps'];
+    select?: Partial<SelectProps>;
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

diff --git a/packages/mui-material/src/TablePagination/TablePagination.js b/packages/mui-material/src/TablePagination/TablePagination.js
@@ -145,6 +145,7 @@ const TablePagination = React.forwardRef(function TablePagination(inProps, ref)
     colSpan: colSpanProp,
     component = TableCell,
     count,
+    disabled = false,
     getItemAriaLabel = defaultGetAriaLabel,
     labelDisplayedRows = defaultLabelDisplayedRows,
     labelRowsPerPage = 'Rows per page:',
@@ -157,21 +158,24 @@ const TablePagination = React.forwardRef(function TablePagination(inProps, ref)
     SelectProps = {},
     showFirstButton = false,
     showLastButton = false,
+    slotProps,
     ...other
   } = props;
 
   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) {
@@ -200,20 +204,21 @@ const TablePagination = React.forwardRef(function TablePagination(inProps, ref)
         {rowsPerPageOptions.length > 1 && (
           <TablePaginationSelect
             variant="standard"
-            {...(!SelectProps.variant && { input: <InputBase /> })}
+            {...(!selectProps.variant && { input: <InputBase /> })}
             value={rowsPerPage}
             onChange={onRowsPerPageChange}
             id={selectId}
             labelId={labelId}
-            {...SelectProps}
+            {...selectProps}
             classes={{
-              ...SelectProps.classes,
+              ...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}
           >
             {rowsPerPageOptions.map((rowsPerPageOption) => (
               <MenuItemComponent
@@ -248,7 +253,9 @@ const TablePagination = React.forwardRef(function TablePagination(inProps, ref)
           rowsPerPage={rowsPerPage}
           showFirstButton={showFirstButton}
           showLastButton={showLastButton}
+          slotProps={slotProps?.actions}
           getItemAriaLabel={getItemAriaLabel}
+          disabled={disabled}
         />
       </TablePaginationToolbar>
     </TablePaginationRoot>
@@ -268,6 +275,9 @@ TablePagination.propTypes /* remove-proptypes */ = {
   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,
   /**
@@ -293,6 +303,11 @@ TablePagination.propTypes /* remove-proptypes */ = {
    * 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.
@@ -324,6 +339,9 @@ TablePagination.propTypes /* remove-proptypes */ = {
   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,
   /**
@@ -381,6 +399,10 @@ TablePagination.propTypes /* remove-proptypes */ = {
   ),
   /**
    * 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,
@@ -394,6 +416,19 @@ TablePagination.propTypes /* remove-proptypes */ = {
    * @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.
    */