@workday/canvas-kit-react/dist/es6/pagination/lib/Pagination/Pagination.d.ts

The parent module that contains all Workday Canvas Kit React components

import { FlexProps } from '@workday/canvas-kit-react/layout';
import { PaginationModel } from './types';
import { PaginationContext } from './usePaginationModel';
export { PaginationContext };
export type PaginationProps = PaginationNavProps & {
    lastPage?: number;
    firstPage?: number;
    initialCurrentPage?: number;
    rangeSize?: number;
    model?: PaginationModel;
    onPageChange?: (pageNumber: number) => void;
};
export interface PaginationNavProps extends FlexProps {
    'aria-label': string;
}
/**
 * `Pagination` is a container component rendered as a `<nav>` element that is responsible for creating
 * a `PaginationModel` and sharing it with its subcomponents using React context.
 *
 * ```tsx
 * <Pagination
 *   aria-label="Pagination"
 *   lastPage={100}
 *   initialCurrentPage={6}
 *   rangeSize={3}
 *   onPageChange={pageNumber => console.log(pageNumber)}
 * >
 *   {Child components}
 * </Pagination>
 * ```
 *
 * Alternatively, you may pass in a model using the hoisted model pattern.
 *
 * ```tsx
 * const model = usePaginationModel({
 *   lastPage: 100,
 *   initialCurrentPage: 6,
 *   rangeSize: 3,
 *   onPageChange: pageNumber => console.log(pageNumber),
 * });
 *
 * return (
 *   <Pagination aria-label="Pagination" model={model}>
 *     {Child components}
 *   </Pagination>
 * );
 * ```
 */
export declare const Pagination: import("@workday/canvas-kit-react/common").ElementComponent<"nav", PaginationNavProps & {
    lastPage?: number | undefined;
    firstPage?: number | undefined;
    initialCurrentPage?: number | undefined;
    rangeSize?: number | undefined;
    model?: PaginationModel | undefined;
    onPageChange?: ((pageNumber: number) => void) | undefined;
}> & {
    /**
     * `Pagination.Controls` provides proper alignment and spacing between elements inside
     * `Pagination`. It does not handle any internal business logic or state.
     *
     * ```tsx
     * <Pagination.Controls>{Child components}</Pagination.Controls>
     * ```
     */
    Controls: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./Controls").PaginationControlsProps>;
    /**
     * `Pagination.JumpToFirstButton` is a {@link TertiaryButton} that subscribes to the
     * `Pagination` context. This allows it to know when to disable and set `currentPage` to the
     * first page.
     *
     * Note that you must set `aria-label` to meet accessibility standards. We recommend setting it
     * to `First` or the translated equivalent.
     *
     * ```tsx
     * <Pagination.JumpToFirstButton aria-label="First" />
     * ```
     */
    JumpToFirstButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./Controls").ControlButtonProps>;
    /**
     * `Pagination.StepToPreviousButton` is a {@link TertiaryButton} that renders an icon that
     * subscribes to the `Pagination` context. This allows it to know when to disable and decrement
     * the `currentPage`.
     *
     * Note that you must set `aria-label` to meet accessibility standards. We recommend setting it
     * to `Previous` or the translated equivalent.
     *
     * ```tsx
     * <Pagination.StepToPreviousButton aria-label="Previous" />
     * ```
     */
    StepToPreviousButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./Controls").ControlButtonProps>;
    /**
     * `Pagination.StepToNextButton` is a {@link TertiaryButton} that subscribes to the `Pagination`
     * context. This allows it to know when to disable and increment the `currentPage`.
     *
     * Note that you must set `aria-label` to meet accessibility standards. We recommend setting it
     * to `Next` or the translated equivalent.
     *
     * ```tsx
     * <Pagination.StepToNextButton aria-label="Next" />
     * ```
     */
    StepToNextButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./Controls").ControlButtonProps>;
    /**
     * `Pagination.JumpToLastButton` is a {@link TertiaryButton} that renders an icon that
     * subscribes to the `Pagination` context. This allows it to know when to disable and set
     * `currentPage` to the last page.
     *
     * Note that you must set `aria-label` to meet accessibility standards. We recommend setting it
     * to `Last` or the translated equivalent.
     *
     * ```tsx
     * <Pagination.JumpToLastButton aria-label="Last" />
     * ```
     */
    JumpToLastButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./Controls").ControlButtonProps>;
    /**
     * `Pagination.PageList` subscribes to the `Pagination` context. This allows it generate the
     * `range` of page numbers. It also handles spacing between the child elements.
     *
     * This component will accept either child elements or a render prop. In most cases, you'll want
     * to use the render prop so you can access the `Pagination` model in order to generate the
     * proper list items.
     *
     * ```tsx
     * <Pagination.PageList>
     *   {({state}) =>
     *     state.range.map(pageNumber => (
     *       <Pagination.PageListItem key={pageNumber}>
     *         <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />
     *       </Pagination.PageListItem>
     *     ))
     *   }
     * </Pagination.PageList>
     * ```
     */
    PageList: import("@workday/canvas-kit-react/common").ElementComponent<"ol", import("./PageList").PageListProps>;
    /**
     * `Pagination.PageListItem` provides a semantic child element for the `PageList` component and
     * is important for accessibility. It does not handle any internal business logic or state.
     *
     * ```tsx
     * <Pagination.PageListItem>{Child element}</Pagination.PageListItem>
     * ```
     */
    PageListItem: import("@workday/canvas-kit-react/common").ElementComponent<"li", import("./PageList").PageListItemProps>;
    /**
     * `Pagination.PageButton` subscribes to the `Pagination` context. This allows it to update the
     * `currentPage` and set the `toggled` styling when it is the current item.
     *
     * `Pagination.PageButton` will render `pageNumber` as its children.
     *
     * ```tsx
     * <Pagination.PageButton aria-label="Page 2" pageNumber={2} />
     * ```
     *
     * Note that you must set `aria-label` to meet accessibility standards. We recommend setting it
     * to `Page ${pageNumber}` or the translated equivalent.
     */
    PageButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./PageButton").PageButtonProps>;
    /**
     * `Pagination.GoToForm` is a wrapper for a React context provider rendered as a `<form>`
     * element. Child components such as {@link GoToTextInput Pagination.GoToTextInput} and
     * {@link GoToLabel Pagination.GoToLabel} subscribe to that context to manage the form state and
     * behavior as well as update the `currentPage` in the `Pagination` component.
     *
     * ```tsx
     * <Pagination.GoToForm>{Child elements}</Pagination.GoToForm>
     * ```
     */
    GoToForm: import("@workday/canvas-kit-react/common").ElementComponent<"form", import("./GoTo/Form").GoToFormProps>;
    /**
     * `Pagination.GoToTextInput` is a {@link TextInput}.
     *
     * ```tsx
     * <Pagination.GoToTextInput aria-label="Go to page number" />
     * ```
     *
     * Note that you must set `aria-label` to meet accessibility standards. We recommend setting it
     * to `Go to page number` or the translated equivalent.
     */
    GoToTextInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", import("../../..").TextInputProps & {
        'aria-label': string;
        value?: string | number | undefined;
    }>;
    /**
     * `Pagination.GoToLabel` subscribes to the `Pagination` context. This allows it to pass the
     * `Pagination` context to child elements.
     *
     * This component will accept either child elements or a render prop. In most cases, you'll want
     * to use the render prop so you can access the `Pagination` model when generating the label
     * text.
     *
     * ```tsx
     * <Pagination.GoToLabel>{({state}) => `of ${state.lastPage} pages`}</Pagination.GoToLabel>
     * ```
     */
    GoToLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("./GoTo/Label").GoToLabelProps>;
    /**
     * `Pagination.AdditionalDetails` subscribes to the `Pagination` context. This allows it to pass
     * the `Pagination` context to child elements. It is also an `aria-live` region that announces
     * the current page update to screen readers.
     *
     * `Pagination.AdditionalDetails` must be included in your `Pagination` component to meet
     * accessibility standards (with one exception, see below). If you wish to prevent it from
     * displaying, you may set its `shouldHideDetails` prop to `true`. The visually hidden region
     * will still be accessible to screen readers.
     *
     * If you have multiple `Pagination` components sharing the same state and rendered on the same
     * page, you may do either of the following to prevent screen readers from announcing the same
     * update multiple times:
     *
     * - Exclude `Pagination.AdditionalDetails` from all but one of the `Pagination` components.
     *   This is the one case where you may exclude `Pagination.AdditionalDetails` from a
     *   `Pagination` component.
     * - Include `Pagination.AdditionalDetails` in every `Pagination` component (i.e., you want it
     *   to be visible for every component), but set the `shouldAnnounceToScreenReader` prop to
     *   `false` on all but one of them.
     *
     * This component will accept either child elements or a render prop. In most cases, you'll want
     * to use the render prop so you can access the `Pagination` model in order to generate the
     * appropriate text.
     *
     * ```tsx
     * <Pagination.AdditionalDetails>
     *   {({state}) =>
     *     `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
     *       state.currentPage,
     *       resultCount,
     *       totalCount
     *     )} of ${totalCount} results`
     *   }
     * </Pagination.AdditionalDetails>
     * ```
     */
    AdditionalDetails: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./AdditionalDetails").AdditionalDetailsProps>;
};
//# sourceMappingURL=Pagination.d.ts.map