diff --git a/docs/pages/api-docs/pagination.md b/docs/pages/api-docs/pagination.md index f2f4a2db799d8c..5a6e79c80e2fe9 100644 --- a/docs/pages/api-docs/pagination.md +++ b/docs/pages/api-docs/pagination.md @@ -29,8 +29,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | color | 'default'
| 'primary'
| 'secondary' | 'standard' | The active color. | | count | number | 1 | The total number of pages. | | defaultPage | number | 1 | The page selected by default when the component is uncontrolled. | -| disabled | bool | false | If `true`, all the pagination component will be disabled. | -| getItemAriaLabel | func | | 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/).

**Signature:**
`function(type?: string, page: number, selected: bool) => string`
*type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous').
*page:* The page number to format.
*selected:* If true, the current page is selected. | +| disabled | bool | false | If `true`, the pagination component will be disabled. | +| getItemAriaLabel | func | | 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/).

**Signature:**
`function(type: string, page: number, selected: bool) => string`
*type:* The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
*page:* The page number to format.
*selected:* If true, the current page is selected. | | hideNextButton | bool | false | If `true`, hide the next-page button. | | hidePrevButton | bool | false | If `true`, hide the previous-page button. | | onChange | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | @@ -40,8 +40,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | showFirstButton | bool | false | If `true`, show the first-page button. | | showLastButton | bool | false | If `true`, show the last-page button. | | siblingCount | number | 1 | Number of always visible pages before and after the current page. | -| size | 'small'
| 'medium'
| 'large' | 'medium' | The size of the pagination component. | -| variant | 'text'
| 'outlined' | 'text' | The variant to use. | +| size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the pagination component. | +| variant | 'outlined'
| 'text' | 'text' | The variant to use. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 25fe599df2e74b..489551f642a95c 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/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, 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; diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index 297d35c08fcbd6..e71712ac0fb132 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/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); diff --git a/packages/material-ui-lab/src/Pagination/usePagination.d.ts b/packages/material-ui-lab/src/Pagination/usePagination.d.ts index c8981e9bce2bf2..b0b2d533b6f481 100644 --- a/packages/material-ui-lab/src/Pagination/usePagination.d.ts +++ b/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, 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; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts index adf49d899bfed0..8f4b5b6cc8a288 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts +++ b/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

{ + 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; + +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, D>; + export default PaginationItem;