@deque/cauldron-react 4.4.0-canary.f8ca4e9b → 4.5.0-canary.7f6a304a

package/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Placement } from '@popperjs/core';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    totalItems: number;
+    itemsPerPage?: number;
+    currentPage?: number;
+    statusLabel?: React.ReactNode;
+    firstPageLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    lastPageLabel?: string;
+    onNextPageClick?: () => void;
+    onPreviousPageClick?: () => void;
+    onFirstPageClick?: () => void;
+    onLastPageClick?: () => void;
+    tooltipPlacement?: Placement;
+    className?: string;
+}
+declare const Pagination: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Pagination;

package/lib/components/Pagination/index.d.ts

@@ -1,20 +1,3 @@
-import React from 'react';
-import { Placement } from '@popperjs/core';
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
-    totalItems: number;
-    itemsPerPage?: number;
-    currentPage?: number;
-    statusLabel?: React.ReactNode;
-    firstPageLabel?: string;
-    previousPageLabel?: string;
-    nextPageLabel?: string;
-    lastPageLabel?: string;
-    onNextPageClick?: () => void;
-    onPreviousPageClick?: () => void;
-    onFirstPageClick?: () => void;
-    onLastPageClick?: () => void;
-    tooltipPlacement?: Placement;
-    className?: string;
-}
-declare const Pagination: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+import Pagination from './Pagination';
+export { usePagination } from './usePagination';
 export default Pagination;

package/lib/components/Pagination/usePagination.d.ts

@@ -0,0 +1,24 @@
+interface Options {
+    totalItems: number;
+    initialPageSize?: number;
+    initialPage?: number;
+}
+interface PaginationResults {
+    totalItems: number;
+    currentPage: number;
+    itemsPerPage: number;
+    onNextPageClick: () => void;
+    onPreviousPageClick: () => void;
+    onFirstPageClick: () => void;
+    onLastPageClick: () => void;
+}
+interface PageStatus {
+    currentPage: number;
+    pageStart: number;
+    pageEnd: number;
+}
+export declare const usePagination: ({ totalItems, initialPageSize, initialPage }: Options) => {
+    pagination: PaginationResults;
+    pageStatus: PageStatus;
+};
+export {};

package/lib/index.d.ts

@@ -45,7 +45,7 @@ export { default as Panel } from './components/Panel';
 export { default as IssuePanel } from './components/IssuePanel';
 export { default as ProgressBar } from './components/ProgressBar';
 export { Address, AddressLine, AddressCityStateZip } from './components/Address';
-export { default as Pagination } from './components/Pagination';
+export { default as Pagination, usePagination } from './components/Pagination';
 export { default as FieldWrap } from './components/FieldWrap';
 export { default as Breadcrumb, BreadcrumbItem, BreadcrumbLink } from './components/Breadcrumb';
 export { default as TwoColumnPanel, ColumnHeader, ColumnGroupHeader, ColumnLeft, ColumnRight, ColumnList } from './components/TwoColumnPanel';

package/lib/index.js

@@ -8019,6 +8019,17 @@ function useSharedRef(ref) {
 var LoaderOverlay = React.forwardRef(function (_a, ref) {
     var className = _a.className, variant = _a.variant, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, _b = _a.focusTrap, focusTrap = _b === void 0 ? false : _b, other = tslib.__rest(_a, ["className", "variant", "label", "children", "focusOnInitialRender", "focusTrap"]);
     var overlayRef = useSharedRef(ref);
+    React.useEffect(function () {
+        var isolator = overlayRef.current
+            ? new AriaIsolate(overlayRef.current)
+            : null;
+        if (isolator) {
+            focusTrap ? isolator.activate() : isolator.deactivate();
+        }
+        return function () {
+            isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        };
+    }, [focusTrap, overlayRef.current]);
     React.useEffect(function () {
         if (!!focusOnInitialRender && overlayRef.current) {
             setTimeout(function () {
@@ -8521,6 +8532,34 @@ Pagination.propTypes = {
     className: PropTypes.string
 };
 
+var usePagination = function (_a) {
+    var totalItems = _a.totalItems, _b = _a.initialPageSize, initialPageSize = _b === void 0 ? 10 : _b, _c = _a.initialPage, initialPage = _c === void 0 ? 1 : _c;
+    var _d = tslib.__read(React.useState(initialPage), 2), currentPage = _d[0], setCurrentPage = _d[1];
+    var pageStart = currentPage * initialPageSize - initialPageSize + 1;
+    var pageEnd = Math.min(pageStart + initialPageSize - 1, totalItems);
+    var onFirstPageClick = function () { return setCurrentPage(1); };
+    var onPreviousPageClick = function () { return setCurrentPage(currentPage - 1); };
+    var onNextPageClick = function () { return setCurrentPage(currentPage + 1); };
+    var onLastPageClick = function () {
+        return setCurrentPage(Math.ceil(totalItems / initialPageSize));
+    };
+    var pagination = {
+        totalItems: totalItems,
+        currentPage: currentPage,
+        itemsPerPage: initialPageSize,
+        onFirstPageClick: onFirstPageClick,
+        onPreviousPageClick: onPreviousPageClick,
+        onNextPageClick: onNextPageClick,
+        onLastPageClick: onLastPageClick
+    };
+    var pageStatus = {
+        currentPage: currentPage,
+        pageStart: pageStart,
+        pageEnd: pageEnd
+    };
+    return { pagination: pagination, pageStatus: pageStatus };
+};
+
 var FieldWrap = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.as, Component = _b === void 0 ? 'div' : _b, props = tslib.__rest(_a, ["children", "className", "as"]);
     return (React__default.createElement(Component, tslib.__assign({ ref: ref, className: classNames('Panel', className) }, props), children));
@@ -8883,4 +8922,5 @@ exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;
 exports.iconTypes = iconTypes;
 exports.useDidUpdate = useDidUpdate;
+exports.usePagination = usePagination;
 exports.useThemeContext = useThemeContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.4.0-canary.f8ca4e9b",
+  "version": "4.5.0-canary.7f6a304a",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"