[TablePagination] Add the rest of slots and slotProps.

docs/pages/material-ui/api/table-pagination.json

@@ -60,14 +60,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ actions?: { firstButton?: object, firstButtonIcon?: object, lastButton?: object, lastButtonIcon?: object, nextButton?: object, nextButtonIcon?: object, previousButton?: object, previousButtonIcon?: object }, select?: object }"
+        "description": "{ actions?: { firstButton?: object, firstButtonIcon?: object, lastButton?: object, lastButtonIcon?: object, nextButton?: object, nextButtonIcon?: object, previousButton?: object, previousButtonIcon?: object }, displayedRows?: func<br>&#124;&nbsp;object, menuItem?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, select?: object, selectLabel?: func<br>&#124;&nbsp;object, spacer?: func<br>&#124;&nbsp;object, toolbar?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ actions?: { firstButton?: elementType, firstButtonIcon?: elementType, lastButton?: elementType, lastButtonIcon?: elementType, nextButton?: elementType, nextButtonIcon?: elementType, previousButton?: elementType, previousButtonIcon?: elementType } }"
+        "description": "{ actions?: { firstButton?: elementType, firstButtonIcon?: elementType, lastButton?: elementType, lastButtonIcon?: elementType, nextButton?: elementType, nextButtonIcon?: elementType, previousButton?: elementType, previousButtonIcon?: elementType }, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }"
       },
       "default": "{}"
     },
@@ -84,71 +84,72 @@
     "import TablePagination from '@mui/material/TablePagination';",
     "import { TablePagination } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "actions",
-      "className": "MuiTablePagination-actions",
-      "description": "Styles applied to the internal `TablePaginationActions` component.",
-      "isGlobal": false
+      "name": "root",
+      "description": "The component that renders the root slot.\n[Follow this guide](https://mui.com/material-ui/api/table-cell/#props) to learn more about the requirements for this component.",
+      "default": "TableCell",
+      "class": "MuiTablePagination-root"
     },
     {
-      "key": "displayedRows",
-      "className": "MuiTablePagination-displayedRows",
-      "description": "Styles applied to the displayed rows Typography element.",
-      "isGlobal": false
+      "name": "toolbar",
+      "description": "The component that renders the toolbar slot.\n[Follow this guide](https://mui.com/material-ui/api/toolbar/#props) to learn more about the requirements for this component.",
+      "default": "Toolbar",
+      "class": "MuiTablePagination-toolbar"
     },
     {
-      "key": "input",
-      "className": "MuiTablePagination-input",
-      "description": "Styles applied to the Select component `root` element.",
-      "isGlobal": false
+      "name": "spacer",
+      "description": "The tag that renders the spacer slot.",
+      "default": "'div'",
+      "class": "MuiTablePagination-spacer"
     },
     {
-      "key": "menuItem",
-      "className": "MuiTablePagination-menuItem",
-      "description": "Styles applied to the MenuItem component.",
-      "isGlobal": false
+      "name": "selectLabel",
+      "description": "The tag that renders the selectLabel slot.",
+      "default": "'p'",
+      "class": "MuiTablePagination-selectLabel"
     },
     {
-      "key": "root",
-      "className": "MuiTablePagination-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
+      "name": "select",
+      "description": "The component that renders the select slot.\n[Follow this guide](https://mui.com/material-ui/api/select/#props) to learn more about the requirements for this component.",
+      "default": "Select",
+      "class": "MuiTablePagination-select"
     },
     {
-      "key": "select",
-      "className": "MuiTablePagination-select",
-      "description": "Styles applied to the Select component `select` class.",
-      "isGlobal": false
+      "name": "menuItem",
+      "description": "The component that renders the select slot.\n[Follow this guide](https://mui.com/material-ui/api/menu-item/#props) to learn more about the requirements for this component.",
+      "default": "MenuItem",
+      "class": "MuiTablePagination-menuItem"
     },
     {
-      "key": "selectIcon",
-      "className": "MuiTablePagination-selectIcon",
-      "description": "Styles applied to the Select component `icon` class.",
-      "isGlobal": false
+      "name": "displayedRows",
+      "description": "The tag that renders the displayedRows slot.",
+      "default": "'p'",
+      "class": "MuiTablePagination-displayedRows"
     },
     {
-      "key": "selectLabel",
-      "className": "MuiTablePagination-selectLabel",
-      "description": "Styles applied to the select label Typography element.",
-      "isGlobal": false
-    },
+      "name": "actions",
+      "description": "The slots that passed to the actions slot.",
+      "class": "MuiTablePagination-actions"
+    }
+  ],
+  "classes": [
     {
-      "key": "selectRoot",
-      "className": "MuiTablePagination-selectRoot",
+      "key": "input",
+      "className": "MuiTablePagination-input",
       "description": "Styles applied to the Select component `root` element.",
       "isGlobal": false
     },
     {
-      "key": "spacer",
-      "className": "MuiTablePagination-spacer",
-      "description": "Styles applied to the spacer element.",
+      "key": "selectIcon",
+      "className": "MuiTablePagination-selectIcon",
+      "description": "Styles applied to the Select component `icon` class.",
       "isGlobal": false
     },
     {
-      "key": "toolbar",
-      "className": "MuiTablePagination-toolbar",
-      "description": "Styles applied to the Toolbar component.",
+      "key": "selectRoot",
+      "className": "MuiTablePagination-selectRoot",
+      "description": "Styles applied to the Select component `root` element.",
       "isGlobal": false
     }
   ],

docs/translations/api-docs/table-pagination/table-pagination.json

@@ -53,55 +53,34 @@
     },
     "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." },
-    "slots": {
-      "description": "The components used for each slot inside the TablePagination. Either a string to use a HTML element or a component."
-    },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }
   },
   "classDescriptions": {
-    "actions": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the internal <code>TablePaginationActions</code> component"
-    },
-    "displayedRows": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the displayed rows Typography element"
-    },
     "input": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Select component <code>root</code> element"
     },
-    "menuItem": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the MenuItem component"
-    },
-    "root": { "description": "Styles applied to the root element." },
-    "select": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Select component <code>select</code> class"
-    },
     "selectIcon": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Select component <code>icon</code> class"
     },
-    "selectLabel": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the select label Typography element"
-    },
     "selectRoot": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Select component <code>root</code> element"
-    },
-    "spacer": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the spacer element"
-    },
-    "toolbar": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Toolbar component"
     }
+  },
+  "slotDescriptions": {
+    "actions": "The slots that passed to the actions slot.",
+    "displayedRows": "The tag that renders the displayedRows slot.",
+    "menuItem": "The component that renders the select slot. <a href=\"https://mui.com/material-ui/api/menu-item/#props\">Follow this guide</a> to learn more about the requirements for this component.",
+    "root": "The component that renders the root slot. <a href=\"https://mui.com/material-ui/api/table-cell/#props\">Follow this guide</a> to learn more about the requirements for this component.",
+    "select": "The component that renders the select slot. <a href=\"https://mui.com/material-ui/api/select/#props\">Follow this guide</a> to learn more about the requirements for this component.",
+    "selectLabel": "The tag that renders the selectLabel slot.",
+    "spacer": "The tag that renders the spacer slot.",
+    "toolbar": "The component that renders the toolbar slot. <a href=\"https://mui.com/material-ui/api/toolbar/#props\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -28,6 +28,7 @@ import transformTextFieldProps from '../text-field-props';
 import transformTabClasses from '../tab-classes';
 import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 import transformTooltipProps from '../tooltip-props';
+import transformTablePaginationProps from '../table-pagination-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -64,6 +65,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformTabClasses(file, api, options);
   file.source = transformToggleButtonGroupClasses(file, api, options);
   file.source = transformTooltipProps(file, api, options);
+  file.source = transformTablePaginationProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/table-pagination-props/index.js

@@ -0,0 +1 @@
+export { default } from './table-pagination-props';

packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.js

@@ -0,0 +1,28 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'TablePagination',
+    propName: 'ActionsComponent',
+    slotName: 'actions',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TablePagination',
+    propName: 'SelectProps',
+    slotName: 'select',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.test.js

@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './table-pagination-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'table-pagination-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/actual.js

@@ -0,0 +1,32 @@
+import TablePagination from '@mui/material/TablePagination';
+import { TablePagination as MyTablePagination } from '@mui/material';
+
+<TablePagination ActionsComponent="div" SelectProps={{ native: true }} />;
+<TablePagination
+  ActionsComponent="div"
+  SelectProps={{ native: true }}
+  slots={{
+    actions: 'div',
+    select: 'div',
+  }}
+/>;
+<TablePagination
+  ActionsComponent="div"
+  SelectProps={{ native: true }}
+  slots={{
+    root: 'div',
+  }}
+  slotProps={{
+    root: { 'aria-label': '' },
+  }}
+/>;
+<TablePagination
+  ActionsComponent="div"
+  SelectProps={{ native: true }}
+  slots={{ actions: () => null }}
+  slotProps={{ select: { native: false } }}
+/>;
+
+<MyTablePagination ActionsComponent="div" SelectProps={{ native: true }} />;
+
+<CustomTablePagination ActionsComponent="div" SelectProps={{ native: true }} />;

packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/expected.js

@@ -0,0 +1,39 @@
+import TablePagination from '@mui/material/TablePagination';
+import { TablePagination as MyTablePagination } from '@mui/material';
+
+<TablePagination slots={{
+  actions: "div"
+}} slotProps={{
+  select: { native: true }
+}} />;
+<TablePagination
+  slots={{
+    actions: 'div',
+    select: 'div',
+  }}
+  slotProps={{
+    select: { native: true }
+  }} />;
+<TablePagination
+  slots={{
+    root: 'div',
+    actions: "div"
+  }}
+  slotProps={{
+    root: { 'aria-label': '' },
+    select: { native: true }
+  }} />;
+<TablePagination
+  slots={{ actions: () => null }}
+  slotProps={{ select: {
+    ...{ native: true },
+    ...{ native: false }
+  } }} />;
+
+<MyTablePagination slots={{
+  actions: "div"
+}} slotProps={{
+  select: { native: true }
+}} />;
+
+<CustomTablePagination ActionsComponent="div" SelectProps={{ native: true }} />;

packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/theme.actual.js

@@ -0,0 +1,23 @@
+fn({
+  MuiTablePagination: {
+    defaultProps: {
+      ActionsComponent: 'div',
+      SelectProps: { native: true },
+    },
+  },
+});
+
+fn({
+  MuiTablePagination: {
+    defaultProps: {
+      ActionsComponent: 'div',
+      SelectProps: { native: true },
+      slotProps: {
+        root: { id: 'test' },
+      },
+      slots: {
+        root: 'div',
+      },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/theme.expected.js

@@ -0,0 +1,29 @@
+fn({
+  MuiTablePagination: {
+    defaultProps: {
+      slots: {
+        actions: 'div'
+      },
+
+      slotProps: {
+        select: { native: true }
+      }
+    },
+  },
+});
+
+fn({
+  MuiTablePagination: {
+    defaultProps: {
+      slotProps: {
+        root: { id: 'test' },
+        select: { native: true }
+      },
+
+      slots: {
+        root: 'div',
+        actions: 'div'
+      }
+    },
+  },
+});