[Pagination] Add TypeScript types

docs/pages/api-docs/pagination.md

@@ -29,8 +29,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <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">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`, all the pagination component will be disabled. |
-| <span class="prop-name">getItemAriaLabel</span> | <span class="prop-type">func</span> |  | Accepts a function which returns a string value that provides a user-friendly name for the current page.<br>For localization purposes, you can use the provided [translations](/guides/localization/).<br><br>**Signature:**<br>`function(type?: string, page: number, selected: bool) => string`<br>*type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').<br>*page:* The page number to format.<br>*selected:* If true, the current page is selected. |
+| <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. |
+| <span class="prop-name">getItemAriaLabel</span> | <span class="prop-type">func</span> |  | Accepts a function which returns a string value that provides a user-friendly name for the current page.<br>For localization purposes, you can use the provided [translations](/guides/localization/).<br><br>**Signature:**<br>`function(type: string, page: number, selected: bool) => string`<br>*type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.<br>*page:* The page number to format.<br>*selected:* If true, the current page is selected. |
 | <span class="prop-name">hideNextButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the next-page button. |
 | <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. |
@@ -40,8 +40,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <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. |
 | <span class="prop-name">siblingCount</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Number of always visible pages before and after the current page. |
-| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'</span> | <span class="prop-default">'medium'</span> | The size of the pagination component. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'text'<br>&#124;&nbsp;'outlined'</span> | <span class="prop-default">'text'</span> | The variant to use. |
+| <span class="prop-name">size</span> | <span class="prop-type">'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the pagination component. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'outlined'<br>&#124;&nbsp;'text'</span> | <span class="prop-default">'text'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 

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

@@ -1,2 +1,50 @@
-declare const Pagination: any;
-export default Pagination;
+import * as React from 'react';
+import { StandardProps } from '@material-ui/core';
+import { UsePaginationItem, UsePaginationProps } from './usePagination';
+
+export interface PaginationProps
+  extends UsePaginationProps,
+    StandardProps<React.HTMLAttributes<HTMLElement>, PaginationClassKey, 'children' | 'onChange'> {
+  /**
+   * The active color.
+   */
+  color?: 'default' | 'primary' | 'secondary';
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current page.
+   *
+   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   *
+   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
+   * @param {number} page The page number to format.
+   * @param {bool} selected If true, the current page is selected.
+   * @returns {string}
+   */
+  getItemAriaLabel?: (
+    type: 'page' | 'first' | 'last' | 'next' | 'previous',
+    page: number,
+    selected: boolean,
+  ) => string;
+  /**
+   * Render the item.
+   *
+   * @param {object} params The props to spread on a PaginationItem.
+   * @returns {ReactNode}
+   */
+  renderItem?: (params: object) => React.ReactNode;
+  /**
+   * The shape of the pagination items.
+   */
+  shape?: 'round' | 'rounded';
+  /**
+   * The size of the pagination component.
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * The variant to use.
+   */
+  variant?: 'text' | 'outlined';
+}
+
+export type PaginationClassKey = 'root' | 'ul';
+
+export default function Pagination(props: PaginationProps): JSX.Element;

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

@@ -78,7 +78,12 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
 });
 
 // @default tags synced with default values from usePagination
+
 Pagination.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * Number of always visible pages at the beginning and end.
    * @default 1
@@ -88,7 +93,7 @@ Pagination.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -108,7 +113,7 @@ Pagination.propTypes = {
    */
   defaultPage: PropTypes.number,
   /**
-   * If `true`, all the pagination component will be disabled.
+   * If `true`, the pagination component will be disabled.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -117,7 +122,7 @@ Pagination.propTypes = {
    *
    * For localization purposes, you can use the provided [translations](/guides/localization/).
    *
-   * @param {string} [type = page] The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').
+   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
    * @param {number} page The page number to format.
    * @param {bool} selected If true, the current page is selected.
    * @returns {string}
@@ -173,11 +178,11 @@ Pagination.propTypes = {
   /**
    * The size of the pagination component.
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['text', 'outlined']),
+  variant: PropTypes.oneOf(['outlined', 'text']),
 };
 
 export default withStyles(styles, { name: 'MuiPagination' })(Pagination);

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

@@ -1,2 +1,78 @@
-declare const usePagination: any;
-export default usePagination;
+import * as React from 'react';
+
+export interface UsePaginationProps {
+  /**
+   * Number of always visible pages at the beginning and end.
+   * @default 1
+   */
+  boundaryCount?: number;
+  /**
+   * The name of the component where this hook is used.
+   */
+  componentName?: string;
+  /**
+   * The total number of pages.
+   * @default 1
+   */
+  count?: number;
+  /**
+   * The page selected by default when the component is uncontrolled.
+   * @default 1
+   */
+  defaultPage?: number;
+  /**
+   * If `true`, the pagination component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, hide the next-page button.
+   * @default false
+   */
+  hideNextButton?: boolean;
+  /**
+   * If `true`, hide the previous-page button.
+   * @default false
+   */
+  hidePrevButton?: boolean;
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {number} page The page selected.
+   */
+  onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
+  /**
+   * The current page.
+   */
+  page?: number;
+  /**
+   * If `true`, show the first-page button.
+   * @default false
+   */
+  showFirstButton?: boolean;
+  /**
+   * If `true`, show the last-page button.
+   * @default false
+   */
+  showLastButton?: boolean;
+  /**
+   * Number of always visible pages before and after the current page.
+   * @default 1
+   */
+  siblingCount?: number;
+}
+
+export interface UsePaginationItem {
+  onClick: React.ReactEventHandler;
+  type: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis';
+  page: number;
+  selected: boolean;
+  disabled: boolean;
+}
+
+export interface UsePaginationResult {
+  items: UsePaginationItem[];
+}
+
+export default function usePagination(props: UsePaginationProps): UsePaginationResult;

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

@@ -1,2 +1,68 @@
-declare const PaginationItem: any;
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
+import { UsePaginationItem } from '../Pagination/usePagination';
+
+export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * The active color.
+     */
+    color?: 'standard' | 'primary' | 'secondary';
+    /**
+     * If `true`, the item will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The current page number.
+     */
+    page?: number;
+    /**
+     * If `true` the pagination item is selected.
+     */
+    selected?: boolean;
+    /**
+     * The shape of the pagination item.
+     */
+    shape?: 'round' | 'rounded';
+    /**
+     * The size of the pagination item.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The type of pagination item.
+     */
+    type?: UsePaginationItem['type'];
+    /**
+     * The pagination item variant.
+     */
+    variant?: 'text' | 'outlined';
+  };
+  defaultComponent: D;
+  classKey: PaginationItemClassKey;
+}
+
+declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
+
+export type PaginationItemClassKey =
+  | 'root'
+  | 'page'
+  | 'sizeSmall'
+  | 'sizeLarge'
+  | 'textPrimary'
+  | 'textSecondary'
+  | 'outlined'
+  | 'outlinedPrimary'
+  | 'outlinedSecondary'
+  | 'rounded'
+  | 'ellipsis'
+  | 'focusVisible'
+  | 'disabled'
+  | 'selected'
+  | 'icon';
+
+export type PaginationItemProps<
+  D extends React.ElementType = PaginationItemTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<PaginationItemTypeMap<P, D>, D>;
+
 export default PaginationItem;