@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts

@@ -1,46 +1,238 @@
-import * as React from 'react';
-import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
 import { PaginationModel } from './types';
-import { PaginationNavProps } from './Nav';
-import { ControlsProps } from './Controls';
-import { PageListProps, PageListItemProps } from './PageList';
-import { PageButtonProps } from './PageButton';
-import { GoToFormProps } from './GoTo/Form';
-import { GoToLabelProps } from './GoTo/Label';
-import { GoToTextInputProps } from './GoTo/TextInput';
-import { AdditionalDetailsProps } from './AdditionalDetails';
-export declare const PaginationContext: React.Context<PaginationModel>;
-declare type PaginationConfigurationProps = PaginationNavProps & {
-    lastPage: number;
+import { PaginationContext } from './usePaginationModel';
+export { PaginationContext };
+export declare type PaginationProps = PaginationNavProps & {
+    lastPage?: number;
     firstPage?: number;
     initialCurrentPage?: number;
     rangeSize?: number;
-    model?: never;
+    model?: PaginationModel;
     onPageChange?: (pageNumber: number) => void;
 };
-declare type PaginationModelProps = PaginationNavProps & {
-    lastPage?: never;
-    firstPage?: never;
-    initialCurrentPage?: never;
-    rangeSize?: never;
-    model: PaginationModel;
-    onPageChange?: never;
+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>;
 };
-export declare type PaginationProps = PaginationConfigurationProps | PaginationModelProps;
-export declare const Pagination: {
-    (props: PaginationProps): JSX.Element;
-    Controls(props: ControlsProps): JSX.Element;
-    JumpToFirstButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    StepToPreviousButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    StepToNextButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    JumpToLastButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    PageList(props: Omit<PageListProps, 'model'>): JSX.Element;
-    PageListItem(props: PageListItemProps): JSX.Element;
-    PageButton({ "aria-label": ariaLabel, ...elemProps }: Omit<PageButtonProps, 'model'>): JSX.Element;
-    AdditionalDetails(props: Omit<AdditionalDetailsProps, 'model'>): JSX.Element;
-    GoToForm({ children }: GoToFormProps): JSX.Element;
-    GoToTextInput(props: GoToTextInputProps): JSX.Element;
-    GoToLabel(props: Omit<GoToLabelProps, 'model'>): JSX.Element;
-};
-export {};
 //# sourceMappingURL=Pagination.d.ts.map

package/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAGxC,OAAO,EAAgB,kBAAkB,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,EAML,aAAa,EACd,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAW,aAAa,EAAgB,iBAAiB,EAAC,MAAM,YAAY,CAAC;AACpF,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAoB,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE9E,eAAO,MAAM,iBAAiB,gCAA6C,CAAC;AAE5E,aAAK,4BAA4B,GAAG,kBAAkB,GAAG;IACvD,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,aAAK,oBAAoB,GAAG,kBAAkB,GAAG;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,KAAK,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CAAC;AAMF,oBAAY,eAAe,GAAG,4BAA4B,GAAG,oBAAoB,CAAC;AAElF,eAAO,MAAM,UAAU;YAAW,eAAe;;6BA4BxC,mBAAmB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;gCASnE,mBAAmB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;4BASnE,mBAAmB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;4BASnE,mBAAmB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;oBAQ9C,KAAK,aAAa,EAAE,OAAO,CAAC;wBAOxB,iBAAiB;0DAOhD,KAAK,eAAe,EAAE,OAAO,CAAC;6BAOM,KAAK,sBAAsB,EAAE,OAAO,CAAC;2BAOzC,aAAa;yBAWb,kBAAkB;qBAItB,KAAK,cAAc,EAAE,OAAO,CAAC;CArF3D,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAGL,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAiB9B,OAAO,EAAC,iBAAiB,EAAC,CAAC;AAE3B,oBAAY,eAAe,GAAG,kBAAkB,GAAG;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAMF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,UAAU;;;;;;iCA5CO,MAAM,KAAK,IAAI;;IAqEzC;;;;;;;OAOG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;OAUG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;;;;;;;;;OAmBG;;IAEH;;;;;;;OAOG;;IAEH;;;;;;;;;;;;OAYG;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;OASG;;;;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;;CAGL,CAAC"}

package/dist/commonjs/pagination/lib/Pagination/Pagination.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,101 +18,241 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = exports.PaginationContext = void 0;
-var React = __importStar(require("react"));
-var usePaginationModel_1 = require("./usePaginationModel");
-var Nav_1 = require("./Nav");
-var Controls_1 = require("./Controls");
-var PageList_1 = require("./PageList");
-var PageButton_1 = require("./PageButton");
-var GoTo_1 = require("./GoTo");
-var AdditionalDetails_1 = require("./AdditionalDetails");
-exports.PaginationContext = React.createContext({});
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const usePaginationModel_1 = require("./usePaginationModel");
+Object.defineProperty(exports, "PaginationContext", { enumerable: true, get: function () { return usePaginationModel_1.PaginationContext; } });
+const Controls_1 = require("./Controls");
+const PageList_1 = require("./PageList");
+const PageButton_1 = require("./PageButton");
+const AdditionalDetails_1 = require("./AdditionalDetails");
+const Form_1 = require("./GoTo/Form");
+const TextInput_1 = require("./GoTo/TextInput");
+const Label_1 = require("./GoTo/Label");
 function useDefaultModel(model, config, fn) {
     return model || fn(config);
 }
-var Pagination = function (props) {
-    var model = useDefaultModel(props.model, props, usePaginationModel_1.usePaginationModel);
-    var ariaLabel = props["aria-label"], children = props.children, lastPage = props.lastPage, firstPage = props.firstPage, initialCurrentPage = props.initialCurrentPage, rangeSize = props.rangeSize, onPageChange = props.onPageChange, restProps = __rest(props, ['aria-label', "children", "lastPage", "firstPage", "initialCurrentPage", "rangeSize", "onPageChange"]);
-    return (React.createElement(exports.PaginationContext.Provider, { value: model },
-        React.createElement(Nav_1.PaginationNav, __assign({ "aria-label": ariaLabel }, restProps), children)));
-};
-exports.Pagination = Pagination;
-exports.Pagination.Controls = function (props) {
-    return React.createElement(Controls_1.Controls, __assign({}, props));
-};
-exports.Pagination.JumpToFirstButton = function (props) {
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return React.createElement(Controls_1.JumpToFirstButton, __assign({ model: model }, props));
-};
-exports.Pagination.StepToPreviousButton = function (props) {
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return React.createElement(Controls_1.StepToPreviousButton, __assign({ model: model }, props));
-};
-exports.Pagination.StepToNextButton = function (props) {
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return React.createElement(Controls_1.StepToNextButton, __assign({ model: model }, props));
-};
-exports.Pagination.JumpToLastButton = function (props) {
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return React.createElement(Controls_1.JumpToLastButton, __assign({ model: model }, props));
-};
-exports.Pagination.PageList = function (props) {
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return React.createElement(PageList_1.PageList, __assign({ model: model }, props));
-};
-exports.Pagination.PageListItem = function (props) {
-    return React.createElement(PageList_1.PageListItem, __assign({}, props));
-};
-exports.Pagination.PageButton = function (_a) {
-    var ariaLabel = _a["aria-label"], elemProps = __rest(_a, ['aria-label']);
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return React.createElement(PageButton_1.PageButton, __assign({ "aria-label": ariaLabel, model: model }, elemProps));
-};
-exports.Pagination.AdditionalDetails = function (props) {
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return React.createElement(AdditionalDetails_1.AdditionalDetails, __assign({ model: model }, props));
-};
-exports.Pagination.GoToForm = function (_a) {
-    var children = _a.children;
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return (React.createElement(GoTo_1.GoTo, { model: model },
-        React.createElement(GoTo_1.GoTo.Form, null, children)));
-};
-exports.Pagination.GoToTextInput = function (props) {
-    return React.createElement(GoTo_1.GoTo.TextInput, __assign({}, props));
-};
-exports.Pagination.GoToLabel = function (props) {
-    // The linter doesn't recognize the dot syntax, so we're disabling the rule
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var model = React.useContext(exports.PaginationContext);
-    return React.createElement(GoTo_1.GoTo.Label, __assign({ model: model }, props));
-};
+/**
+ * `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>
+ * );
+ * ```
+ */
+exports.Pagination = common_1.createComponent('nav')({
+    displayName: 'Pagination',
+    Component(props, ref, Element) {
+        const model = useDefaultModel(props.model, props, usePaginationModel_1.usePaginationModel);
+        const { lastPage, firstPage, initialCurrentPage, rangeSize, onPageChange, ...elemProps } = props;
+        return (React.createElement(usePaginationModel_1.PaginationContext.Provider, { value: model },
+            React.createElement(layout_1.Flex, Object.assign({ ref: ref, as: Element, display: "inline-flex", flexDirection: "column", alignItems: "center" }, elemProps))));
+    },
+    subComponents: {
+        /**
+         * `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: Controls_1.PaginationControls,
+        /**
+         * `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: Controls_1.JumpToFirstButton,
+        /**
+         * `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: Controls_1.StepToPreviousButton,
+        /**
+         * `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: Controls_1.StepToNextButton,
+        /**
+         * `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: Controls_1.JumpToLastButton,
+        /**
+         * `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: PageList_1.PageList,
+        /**
+         * `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: PageList_1.PageListItem,
+        /**
+         * `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: PageButton_1.PageButton,
+        /**
+         * `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: Form_1.GoToForm,
+        /**
+         * `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: TextInput_1.GoToTextInput,
+        /**
+         * `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: Label_1.GoToLabel,
+        /**
+         * `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: AdditionalDetails_1.AdditionalDetails,
+    },
+});