@workday/canvas-kit-react 8.5.0-339-next.0 → 8.5.0-342-next.2

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

@@ -21,86 +21,238 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { usePaginationModel } from './usePaginationModel';
-import { PaginationNav } from './Nav';
-import { JumpToFirstButton, StepToPreviousButton, StepToNextButton, JumpToLastButton, Controls, } from './Controls';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { usePaginationModel, PaginationContext, } from './usePaginationModel';
+import { JumpToFirstButton, StepToPreviousButton, StepToNextButton, JumpToLastButton, PaginationControls, } from './Controls';
 import { PageList, PageListItem } from './PageList';
 import { PageButton } from './PageButton';
-import { GoTo } from './GoTo';
 import { AdditionalDetails } from './AdditionalDetails';
-export var PaginationContext = React.createContext({});
+import { GoToForm } from './GoTo/Form';
+import { GoToTextInput } from './GoTo/TextInput';
+import { GoToLabel } from './GoTo/Label';
+export { PaginationContext };
 function useDefaultModel(model, config, fn) {
     return model || fn(config);
 }
-export var Pagination = function (props) {
-    var model = useDefaultModel(props.model, props, 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(PaginationContext.Provider, { value: model },
-        React.createElement(PaginationNav, __assign({ "aria-label": ariaLabel }, restProps), children)));
-};
-Pagination.Controls = function (props) {
-    return React.createElement(Controls, __assign({}, props));
-};
-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(PaginationContext);
-    return React.createElement(JumpToFirstButton, __assign({ model: model }, props));
-};
-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(PaginationContext);
-    return React.createElement(StepToPreviousButton, __assign({ model: model }, props));
-};
-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(PaginationContext);
-    return React.createElement(StepToNextButton, __assign({ model: model }, props));
-};
-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(PaginationContext);
-    return React.createElement(JumpToLastButton, __assign({ model: model }, props));
-};
-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(PaginationContext);
-    return React.createElement(PageList, __assign({ model: model }, props));
-};
-Pagination.PageListItem = function (props) {
-    return React.createElement(PageListItem, __assign({}, props));
-};
-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(PaginationContext);
-    return React.createElement(PageButton, __assign({ "aria-label": ariaLabel, model: model }, elemProps));
-};
-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(PaginationContext);
-    return React.createElement(AdditionalDetails, __assign({ model: model }, props));
-};
-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(PaginationContext);
-    return (React.createElement(GoTo, { model: model },
-        React.createElement(GoTo.Form, null, children)));
-};
-Pagination.GoToTextInput = function (props) {
-    return React.createElement(GoTo.TextInput, __assign({}, props));
-};
-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(PaginationContext);
-    return React.createElement(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>
+ * );
+ * ```
+ */
+export var Pagination = createComponent('nav')({
+    displayName: 'Pagination',
+    Component: function (props, ref, Element) {
+        var model = useDefaultModel(props.model, props, usePaginationModel);
+        var lastPage = props.lastPage, firstPage = props.firstPage, initialCurrentPage = props.initialCurrentPage, rangeSize = props.rangeSize, onPageChange = props.onPageChange, elemProps = __rest(props, ["lastPage", "firstPage", "initialCurrentPage", "rangeSize", "onPageChange"]);
+        return (React.createElement(PaginationContext.Provider, { value: model },
+            React.createElement(Flex, __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: 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: 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: 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: 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: 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,
+        /**
+         * `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: 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,
+        /**
+         * `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: 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: 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: 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,
+    },
+});

package/dist/es6/pagination/lib/Pagination/buildPageRange.js

@@ -1,13 +1,11 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
 };
 var buildRange = function (max, min) {
     // `max` determines the size of the range, and `min + index` determines its values
-    return __spreadArrays(Array(max)).map(function (_, index) { return min + index; });
+    return __spreadArray([], Array(max)).map(function (_, index) { return min + index; });
 };
 export var buildPageRange = function (_a) {
     var currentPage = _a.currentPage, lastPage = _a.lastPage, rangeSize = _a.rangeSize;

package/dist/es6/pagination/lib/Pagination/common/List.d.ts

@@ -1,8 +1,8 @@
 import { FlexProps } from '@workday/canvas-kit-react/layout';
 export interface ListProps extends FlexProps {
 }
-export declare const List: import("../../../../common").ElementComponent<"ul", ListProps>;
+export declare const List: import("@workday/canvas-kit-react/common").ElementComponent<"ul", ListProps>;
 export interface ListItemProps extends FlexProps {
 }
-export declare const ListItem: import("../../../../common").ElementComponent<"li", ListItemProps>;
+export declare const ListItem: import("@workday/canvas-kit-react/common").ElementComponent<"li", ListItemProps>;
 //# sourceMappingURL=List.d.ts.map

package/dist/es6/pagination/lib/Pagination/common/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/List.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,SAAU,SAAQ,SAAS;CAAG;AAM/C,eAAO,MAAM,IAAI,gEAgBf,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,SAAS;CAAG;AAEnD,eAAO,MAAM,QAAQ,oEASnB,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/List.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,SAAU,SAAQ,SAAS;CAAG;AAM/C,eAAO,MAAM,IAAI,8EAgBf,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,SAAS;CAAG;AAEnD,eAAO,MAAM,QAAQ,kFASnB,CAAC"}

package/dist/es6/pagination/lib/Pagination/common/utils/getValidChildren.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[];
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
 //# sourceMappingURL=getValidChildren.d.ts.map

package/dist/es6/pagination/lib/Pagination/common/utils/getValidChildren.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getValidChildren.d.ts","sourceRoot":"","sources":["../../../../../../../pagination/lib/Pagination/common/utils/getValidChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,oJAIzD"}
+{"version":3,"file":"getValidChildren.d.ts","sourceRoot":"","sources":["../../../../../../../pagination/lib/Pagination/common/utils/getValidChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,wEAIzD"}

package/dist/es6/pagination/lib/Pagination/common/utils/helpers.d.ts

@@ -1,40 +1,70 @@
 /**
- * Returns the last page for the total results
+ * This function takes the number of results per page and the total count of results and returns the
+ * last page number. Here's an example:
+ *
+ * Given there are 10 results per page, and there are 128 total results, the function will return 13.
+ *
+ * ```ts
+ * const lastPage = getLastPage(10, 128); //=> 13
+ * ```
+ *
  * @param resultCount number of results per page
  * @param totalCount total number of results
- * @example
- * const lastPage = getLastPage(10, 120); //=> 12
  */
 export declare function getLastPage(resultCount: number, totalCount: number): number;
 /**
- * Returns the first number in the pagination range
+ * This function takes the pagination range and returns its minimum value. Here's an example:
+ *
+ * Given the pagination range is 1-5, the function will return 1.
+ *
+ * ```ts
+ * const range = [1, 2, 3, 4, 5];
+ * const rangeMin = getRangeMin(range); //=> 1
+ * ```
  * @param range the range of numbers for the pagination component
- * @example
- * const rangeMin = getRangeMin([1,2,3,4,5]) //=> 1
  */
 export declare function getRangeMin(range: number[]): number;
 /**
- * Returns the last number in the pagination range
+ * This function takes the pagination range and returns its maximum value. Here's an example:
+ *
+ * Given the pagination range is 1-5, the function will return 5.
+ *
+ * ```ts
+ * const range = [1, 2, 3, 4, 5];
+ * const rangeMin = getRangeMax(range); //=> 5
+ * ```
  * @param range the range of numbers for the pagination component
- * @example
- * const rangeMax = getRangeMax([1,2,3,4,5]) //=> 5
  */
 export declare function getRangeMax(range: number[]): number;
 /**
- * Returns the first page number for the visible results
+ * This function takes the current page, and number of results per page, and returns the minimum value
+ * for that page. Here's an example:
+ *
+ * Given there are 10 results per page, and the current page is 5, the function will return 41.
+ *
+ * ```ts
+ * const pageMin = getVisibleResultsMin(5, 10); //=> 41
+ * ```
  * @param currentPage current page for the range
  * @param resultCount number of results per page
- * @example
- * const pageMin = getVisibleResultsMin(5, 10); //=> 41
  */
 export declare function getVisibleResultsMin(currentPage: number, resultCount: number): number;
 /**
- * Returns the last page number for the visible results
+ * This function takes the current page, number of results per page, and the total number of results,
+ * and returns the maximum value for that page. Here's an example:
+ *
+ * Given there are 10 results per page, the current page is 5, and there are 42 results total, the
+ * function will return 42.
+ *
+ * ```ts
+ * const currentPage = 5;
+ * const resultCount = 10;
+ * const totalCount = 42;
+ * const pageMax = getVisibleResultsMax(currentPage, resultCount, totalCount); //=> 42
+ * ```
  * @param currentPage current page for the range
  * @param resultCount number of results per page
  * @param totalCount total number of results
- * @example
- * const pageMax = getVisiblePageMax(5,10,100); //=> 50
  */
 export declare function getVisibleResultsMax(currentPage: number, resultCount: number, totalCount: number): number;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/es6/pagination/lib/Pagination/common/utils/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../../../pagination/lib/Pagination/common/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAE3E;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAEnD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAEnD;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAErF;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,GACjB,MAAM,CAKR"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../../../pagination/lib/Pagination/common/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAE3E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAEnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAEnD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAErF;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,GACjB,MAAM,CAKR"}

package/dist/es6/pagination/lib/Pagination/common/utils/helpers.js

@@ -1,48 +1,78 @@
 /**
- * Returns the last page for the total results
+ * This function takes the number of results per page and the total count of results and returns the
+ * last page number. Here's an example:
+ *
+ * Given there are 10 results per page, and there are 128 total results, the function will return 13.
+ *
+ * ```ts
+ * const lastPage = getLastPage(10, 128); //=> 13
+ * ```
+ *
  * @param resultCount number of results per page
  * @param totalCount total number of results
- * @example
- * const lastPage = getLastPage(10, 120); //=> 12
  */
 export function getLastPage(resultCount, totalCount) {
     return Math.ceil(totalCount / resultCount);
 }
 /**
- * Returns the first number in the pagination range
+ * This function takes the pagination range and returns its minimum value. Here's an example:
+ *
+ * Given the pagination range is 1-5, the function will return 1.
+ *
+ * ```ts
+ * const range = [1, 2, 3, 4, 5];
+ * const rangeMin = getRangeMin(range); //=> 1
+ * ```
  * @param range the range of numbers for the pagination component
- * @example
- * const rangeMin = getRangeMin([1,2,3,4,5]) //=> 1
  */
 export function getRangeMin(range) {
     return range[0];
 }
 /**
- * Returns the last number in the pagination range
+ * This function takes the pagination range and returns its maximum value. Here's an example:
+ *
+ * Given the pagination range is 1-5, the function will return 5.
+ *
+ * ```ts
+ * const range = [1, 2, 3, 4, 5];
+ * const rangeMin = getRangeMax(range); //=> 5
+ * ```
  * @param range the range of numbers for the pagination component
- * @example
- * const rangeMax = getRangeMax([1,2,3,4,5]) //=> 5
  */
 export function getRangeMax(range) {
     return range[range.length - 1];
 }
 /**
- * Returns the first page number for the visible results
+ * This function takes the current page, and number of results per page, and returns the minimum value
+ * for that page. Here's an example:
+ *
+ * Given there are 10 results per page, and the current page is 5, the function will return 41.
+ *
+ * ```ts
+ * const pageMin = getVisibleResultsMin(5, 10); //=> 41
+ * ```
  * @param currentPage current page for the range
  * @param resultCount number of results per page
- * @example
- * const pageMin = getVisibleResultsMin(5, 10); //=> 41
  */
 export function getVisibleResultsMin(currentPage, resultCount) {
     return currentPage * resultCount - resultCount + 1;
 }
 /**
- * Returns the last page number for the visible results
+ * This function takes the current page, number of results per page, and the total number of results,
+ * and returns the maximum value for that page. Here's an example:
+ *
+ * Given there are 10 results per page, the current page is 5, and there are 42 results total, the
+ * function will return 42.
+ *
+ * ```ts
+ * const currentPage = 5;
+ * const resultCount = 10;
+ * const totalCount = 42;
+ * const pageMax = getVisibleResultsMax(currentPage, resultCount, totalCount); //=> 42
+ * ```
  * @param currentPage current page for the range
  * @param resultCount number of results per page
  * @param totalCount total number of results
- * @example
- * const pageMax = getVisiblePageMax(5,10,100); //=> 50
  */
 export function getVisibleResultsMax(currentPage, resultCount, totalCount) {
     if (totalCount < currentPage * resultCount) {

package/dist/es6/pagination/lib/Pagination/usePaginationModel.d.ts

@@ -1,4 +1,6 @@
+import * as React from 'react';
 import { PaginationModel } from './types';
+export declare const PaginationContext: React.Context<PaginationModel>;
 export declare type UsePaginationModelConfig = {
     /**
      * The page number for the last page (it can also be used as a total page
@@ -25,5 +27,5 @@ export declare type UsePaginationModelConfig = {
      */
     rangeSize?: number;
 };
-export declare const usePaginationModel: ({ firstPage, initialCurrentPage, lastPage, rangeSize, onPageChange, }: UsePaginationModelConfig) => PaginationModel;
+export declare const usePaginationModel: (config: UsePaginationModelConfig) => PaginationModel;
 //# sourceMappingURL=usePaginationModel.d.ts.map

package/dist/es6/pagination/lib/Pagination/usePaginationModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginationModel.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/usePaginationModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAM5B,wBAAwB,KAAG,eAmE7B,CAAC"}
+{"version":3,"file":"usePaginationModel.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/usePaginationModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,iBAAiB,gCAA6C,CAAC;AAE5E,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,WAAY,wBAAwB,KAAG,eAoErE,CAAC"}

package/dist/es6/pagination/lib/Pagination/usePaginationModel.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { buildPageRange } from './buildPageRange';
 import { getRangeMax, getRangeMin } from './common/utils/helpers';
-export var usePaginationModel = function (_a) {
-    var _b = _a.firstPage, firstPage = _b === void 0 ? 1 : _b, _c = _a.initialCurrentPage, initialCurrentPage = _c === void 0 ? 1 : _c, lastPage = _a.lastPage, _d = _a.rangeSize, rangeSize = _d === void 0 ? 5 : _d, onPageChange = _a.onPageChange;
-    var _e = React.useState(initialCurrentPage), currentPage = _e[0], setCurrentPage = _e[1];
+export var PaginationContext = React.createContext({});
+export var usePaginationModel = function (config) {
+    var _a = config.firstPage, firstPage = _a === void 0 ? 1 : _a, _b = config.initialCurrentPage, initialCurrentPage = _b === void 0 ? 1 : _b, lastPage = config.lastPage, _c = config.rangeSize, rangeSize = _c === void 0 ? 5 : _c, onPageChange = config.onPageChange;
+    var _d = React.useState(initialCurrentPage), currentPage = _d[0], setCurrentPage = _d[1];
     var changePage = function (page) {
         // Don't fire an `onPageChange` event if the page number is the same as the current page.
         // `setCurrentPage` doesn't need this check, because React won't update the state if the values are the same.

package/dist/es6/popup/lib/Popper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PopperJS from '@popperjs/core';
-export declare type Placement = PopperJS.Placement;
+export declare type Placement = `${PopperJS.Placement}`;
 export declare type PopperOptions = PopperJS.Options;
 export interface PopperProps {
     /**
@@ -63,5 +63,20 @@ export interface PopperProps {
      */
     popperInstanceRef?: React.Ref<PopperJS.Instance>;
 }
+/**
+ * A thin wrapper component around the Popper.js positioning engine. For reference:
+ * https://popper.js.org/. `Popper` also automatically works with the {@link PopupStack} system.
+ * `Popper` has no UI and will render any children to the `body` element and position around a
+ * provided `anchorElement`.
+ *
+ * Prefer using {@link PopupPopper Popup.Popper} instead. Use this to make Popups that don't utilize
+ * a PopupModel or any associate popup [hooks](#hooks).
+ *
+ * > **Note:** `Popper` renders any children to a `div` element created by the `PopupStack`. This
+ * > element is not controlled by React, so any extra element props will _not_ be forwarded. The
+ * > `ref` will point to the `div` element created by the `PopupStack`, however. In v4, an extra
+ * > `div` element was rendered and that's where extra props were spread to. In v5+, you can provide
+ * > your own element if you wish.
+ */
 export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Popper.d.ts.map

package/dist/es6/popup/lib/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}