[Pagination] Fix missing renderItem types (#20592)

docs/pages/api-docs/pagination.md

@@ -30,7 +30,7 @@ The `MuiPagination` name can be used for providing [default props](/customizatio
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">boundaryCount</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Number of always visible pages at the beginning and end. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'standard'</span> | The active color. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'standard'</span> | <span class="prop-default">'standard'</span> | The active color. |
 | <span class="prop-name">count</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The total number of pages. |
 | <span class="prop-name">defaultPage</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The page selected by default when the component is uncontrolled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the pagination component will be disabled. |
@@ -39,7 +39,7 @@ The `MuiPagination` name can be used for providing [default props](/customizatio
 | <span class="prop-name">hidePrevButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the previous-page button. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> |  | The current page. |
-| <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">(item) => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
+| <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">(item) => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: PaginationRenderItemParams) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
 | <span class="prop-name">shape</span> | <span class="prop-type">'round'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'round'</span> | The shape of the pagination items. |
 | <span class="prop-name">showFirstButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the first-page button. |
 | <span class="prop-name">showLastButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the last-page button. |

docs/src/pages/components/pagination/PaginationLink.js

@@ -10,8 +10,7 @@ export default function PaginationLink() {
       <Route>
         {({ location }) => {
           const query = new URLSearchParams(location.search);
-          const page = parseInt(query.get('page'), 10) || 1;
-
+          const page = parseInt(query.get('page') || '1', 10);
           return (
             <Pagination
               page={page}

docs/src/pages/components/pagination/PaginationLink.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+import { Link } from 'react-router-dom';
+import Pagination from '@material-ui/lab/Pagination';
+import PaginationItem from '@material-ui/lab/PaginationItem';
+
+export default function PaginationLink() {
+  return (
+    <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
+      <Route>
+        {({ location }) => {
+          const query = new URLSearchParams(location.search);
+          const page = parseInt(query.get('page') || '1', 10);
+          return (
+            <Pagination
+              page={page}
+              count={10}
+              renderItem={(item) => (
+                <PaginationItem
+                  component={Link}
+                  to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
+                  {...item}
+                />
+              )}
+            />
+          );
+        }}
+      </Route>
+    </MemoryRouter>
+  );
+}

packages/material-ui-lab/src/Pagination/Pagination.d.ts

@@ -2,13 +2,20 @@ import * as React from 'react';
 import { StandardProps } from '@material-ui/core';
 import { UsePaginationItem, UsePaginationProps } from './usePagination';
 
+export interface PaginationRenderItemParams extends UsePaginationItem {
+  color: PaginationProps['color'];
+  shape: PaginationProps['shape'];
+  size: PaginationProps['size'];
+  variant: PaginationProps['variant'];
+}
+
 export interface PaginationProps
   extends UsePaginationProps,
     StandardProps<React.HTMLAttributes<HTMLElement>, PaginationClassKey, 'children' | 'onChange'> {
   /**
    * The active color.
    */
-  color?: 'default' | 'primary' | 'secondary';
+  color?: 'primary' | 'secondary' | 'standard';
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current page.
    *
@@ -27,10 +34,10 @@ export interface PaginationProps
   /**
    * Render the item.
    *
-   * @param {object} params The props to spread on a PaginationItem.
+   * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
    * @returns {ReactNode}
    */
-  renderItem?: (params: object) => React.ReactNode;
+  renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
   /**
    * The shape of the pagination items.
    */

packages/material-ui-lab/src/Pagination/Pagination.js

@@ -101,7 +101,7 @@ Pagination.propTypes = {
   /**
    * The active color.
    */
-  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
+  color: PropTypes.oneOf(['primary', 'secondary', 'standard']),
   /**
    * The total number of pages.
    * @default 1
@@ -152,7 +152,7 @@ Pagination.propTypes = {
   /**
    * Render the item.
    *
-   * @param {object} params The props to spread on a PaginationItem.
+   * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
    * @returns {ReactNode}
    */
   renderItem: PropTypes.func,