@workday/canvas-kit-react 9.0.0-alpha.411-next.13 → 9.0.0-alpha.413-next.15

package/dist/commonjs/collection/lib/useCursorListModel.js

@@ -29,80 +29,79 @@ exports.createNavigationManager = createNavigationManager;
 /**
  * Get the first item in a list regardless of column count
  */
-const getFirst = (_, { state }) => state.items[0];
+const getFirst = (_, { state }) => 0;
 exports.getFirst = getFirst;
 /**
  * Get the last item in a list regardless of column count
  */
-const getLast = (_, { state }) => state.items[state.items.length - 1];
+const getLast = (_, { state }) => state.items.length - 1;
 exports.getLast = getLast;
 /**
  * Get the first item in a row. If column count is 0, it will return the results of `getFirst`
  */
-const getFirstOfRow = (id, { state }) => {
+const getFirstOfRow = (index, { state }) => {
     if (state.columnCount) {
-        const item = getItem(id, { state });
-        const currentIndex = item.index;
-        const offset = currentIndex % state.columnCount;
-        return state.items[currentIndex - offset];
+        const offset = index % state.columnCount;
+        return index - offset;
     }
-    return exports.getFirst(id, { state });
+    return exports.getFirst(index, { state });
 };
 exports.getFirstOfRow = getFirstOfRow;
 /**
  * get the last item in a row - if column count is 0, it will return the results of `getLast`
  */
-const getLastOfRow = (id, { state }) => {
+const getLastOfRow = (index, { state }) => {
     if (state.columnCount) {
-        const item = getItem(id, { state });
-        const currentIndex = item.index;
-        const offset = (currentIndex % state.columnCount) - state.columnCount + 1;
-        let nextIndex = currentIndex - offset;
+        const offset = (index % state.columnCount) - state.columnCount + 1;
+        let nextIndex = index - offset;
         if (nextIndex >= state.items.length) {
             nextIndex = state.items.length - 1;
         }
-        return state.items[nextIndex];
+        return nextIndex;
     }
-    return exports.getLast(id, { state });
+    return exports.getLast(index, { state });
 };
 exports.getLastOfRow = getLastOfRow;
 /**
  * get the item in the previous page. This can be author defined. By default it will return the
  * first item for a list, and the first item in the same column for a grid.
  */
-const getPreviousPage = (id, { state }) => {
+const getPreviousPage = (index, { state }) => {
     if (state.columnCount) {
-        const item = getItem(id, { state });
-        const currentIndex = item.index;
-        return state.items[currentIndex % state.columnCount];
+        return index % state.columnCount;
     }
-    return exports.getFirst(id, { state });
+    return exports.getFirst(index, { state });
 };
 exports.getPreviousPage = getPreviousPage;
 /**
  * get the item in the next page. This can be author defined. By default, it will return the last
  * item for a list, and the last item in the same column for a grid.
  */
-const getNextPage = (id, { state }) => {
+const getNextPage = (index, { state }) => {
     if (state.columnCount) {
-        const item = getItem(id, { state });
-        const currentIndex = item.index;
         const lastRowIndex = state.items.length - state.columnCount;
-        return state.items[lastRowIndex + (currentIndex % state.columnCount)];
+        return lastRowIndex + (index % state.columnCount);
     }
-    return exports.getLast(id, { state });
+    return exports.getLast(index, { state });
 };
 exports.getNextPage = getNextPage;
 const getItem = (id, { state }) => {
-    const item = id ? state.items.find(item => useBaseListModel_1.defaultGetId(item) === id) : exports.getFirst(id, { state }); // no id, return first item
+    const item = id ? state.items.find(item => item.id === id) : state.items[0]; // no id, return first item
     common_1.assert(item, `Item not found: ${id}`);
     return item;
 };
-const getWrappingOffsetItem = (offset) => (id, { state }, tries = state.items.length) => {
+const getWrappingOffsetItem = (offset) => (index, { state }, tries = state.items.length) => {
+    if (Number.isNaN(index)) {
+        // we have no valid index. If the offset is positive, we'll return the first item
+        if (offset === 1) {
+            return exports.getFirst(index, { state });
+        }
+        if (offset === -1) {
+            return exports.getLast(index, { state });
+        }
+    }
     const items = state.items;
-    const item = getItem(id, { state });
-    const currentIndex = item.index;
-    let nextIndex = currentIndex + offset;
+    let nextIndex = index + offset;
     // calculate idealLength as in if the grid was a perfect rectangle
     const rows = Math.ceil(items.length / state.columnCount);
     const idealLength = rows * state.columnCount;
@@ -136,26 +135,24 @@ const getWrappingOffsetItem = (offset) => (id, { state }, tries = state.items.le
             nextIndex = nextIndex - idealLength;
         }
     }
-    if (state.nonInteractiveIds.includes(useBaseListModel_1.defaultGetId(items[nextIndex])) && tries > 0) {
+    if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
         // The next item is disabled, try again, but only if we haven't already tried everything.
         // Avoid an infinite loop with `tries`
-        return exports.getWrappingOffsetItem(offset)(useBaseListModel_1.defaultGetId(items[nextIndex]), { state }, tries - 1);
+        return exports.getWrappingOffsetItem(offset)(nextIndex, { state }, tries - 1);
     }
-    return items[nextIndex];
+    return nextIndex;
 };
 exports.getWrappingOffsetItem = getWrappingOffsetItem;
-const getOffsetItem = (offset) => (id, { state }, tries = state.items.length) => {
+const getOffsetItem = (offset) => (index, { state }, tries = state.items.length) => {
     const { items, columnCount } = state;
-    const item = getItem(id, { state });
-    const currentIndex = item.index;
-    let nextIndex = currentIndex + offset;
+    let nextIndex = index + offset;
     if (Math.abs(offset) < columnCount) {
         // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
         // column count. We don't want to wrap, so we'll bound within the row
-        const currentIndexInRow = currentIndex % columnCount;
-        const nextIndexInRow = nextIndex - currentIndex + currentIndexInRow;
+        const currentIndexInRow = index % columnCount;
+        const nextIndexInRow = nextIndex - index + currentIndexInRow;
         if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
-            nextIndex = currentIndex;
+            nextIndex = index;
         }
     }
     else if (columnCount) {
@@ -163,11 +160,11 @@ const getOffsetItem = (offset) => (id, { state }, tries = state.items.length) =>
         // bound to row values
         const nextRow = Math.floor(nextIndex / columnCount);
         if (nextRow < 0 || nextRow >= columnCount) {
-            nextIndex = currentIndex;
+            nextIndex = index;
         }
         // make sure we don't go out of bounds if the grid isn't a perfect rectangle
         if (nextIndex > items.length - 1) {
-            nextIndex = currentIndex;
+            nextIndex = index;
         }
     }
     // make sure we're always in bounds
@@ -177,12 +174,12 @@ const getOffsetItem = (offset) => (id, { state }, tries = state.items.length) =>
     else if (nextIndex >= items.length) {
         nextIndex = items.length - 1;
     }
-    if (state.nonInteractiveIds.includes(useBaseListModel_1.defaultGetId(items[nextIndex])) && tries > 0) {
+    if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
         // The next item is disabled, try again, but only if we haven't already tried everything.
         // Avoid an infinite loop with `tries`
-        return exports.getOffsetItem(offset)(useBaseListModel_1.defaultGetId(items[nextIndex]), { state }, tries - 1);
+        return exports.getOffsetItem(offset)(nextIndex, { state }, tries - 1);
     }
-    return items[nextIndex];
+    return nextIndex;
 };
 exports.getOffsetItem = getOffsetItem;
 /**
@@ -195,9 +192,9 @@ exports.wrappingNavigationManager = exports.createNavigationManager({
     getLast: exports.getLast,
     getItem,
     getNext: exports.getWrappingOffsetItem(1),
-    getNextRow: (id, { state }) => exports.getWrappingOffsetItem(state.columnCount)(id, { state }),
+    getNextRow: (index, { state }) => exports.getWrappingOffsetItem(state.columnCount)(index, { state }),
     getPrevious: exports.getWrappingOffsetItem(-1),
-    getPreviousRow: (id, { state }) => exports.getWrappingOffsetItem(-state.columnCount)(id, { state }),
+    getPreviousRow: (index, { state }) => exports.getWrappingOffsetItem(-state.columnCount)(index, { state }),
     getPreviousPage: exports.getPreviousPage,
     getNextPage: exports.getNextPage,
     getFirstOfRow: exports.getFirstOfRow,
@@ -212,9 +209,9 @@ exports.navigationManager = exports.createNavigationManager({
     getLast: exports.getLast,
     getItem,
     getNext: exports.getOffsetItem(1),
-    getNextRow: (id, { state }) => exports.getOffsetItem(state.columnCount)(id, { state }),
+    getNextRow: (index, { state }) => exports.getOffsetItem(state.columnCount)(index, { state }),
     getPrevious: exports.getOffsetItem(-1),
-    getPreviousRow: (id, { state }) => exports.getOffsetItem(-state.columnCount)(id, { state }),
+    getPreviousRow: (index, { state }) => exports.getOffsetItem(-state.columnCount)(index, { state }),
     getPreviousPage: exports.getPreviousPage,
     getNextPage: exports.getNextPage,
     getFirstOfRow: exports.getFirstOfRow,
@@ -250,15 +247,35 @@ exports.useCursorListModel = common_1.createModelHook({
          * well as left/right keys to give a more consistent experience to all users.
          */
         navigation: exports.wrappingNavigationManager,
+        /**
+         * Controls how much a pageUp/pageDown navigation request will jump. If not provided, the size
+         * of the list and number of items rendered will determine this value.
+         */
+        pageSize: 0,
     },
     requiredConfig: useBaseListModel_1.useBaseListModel.requiredConfig,
+    contextOverride: useBaseListModel_1.useBaseListModel.Context,
 })(config => {
-    var _a;
+    var _a, _b;
     const [cursorId, setCursorId] = react_1.default.useState(config.initialCursorId);
+    const pageSizeRef = react_1.default.useRef(config.pageSize);
     const columnCount = config.columnCount || 0;
     const list = useBaseListModel_1.useBaseListModel(config);
-    const initialCurrentRef = react_1.default.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? useBaseListModel_1.defaultGetId(list.state.items[0]) : ''));
+    const initialCurrentRef = react_1.default.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? list.state.items[0].id : ''));
     const navigation = config.navigation;
+    const cursorIndexRef = react_1.default.useRef(-1);
+    const setCursor = (index) => {
+        var _a;
+        const id = ((_a = state.items[index]) === null || _a === void 0 ? void 0 : _a.id) || '';
+        setCursorId(id);
+    };
+    // Keep the cursorIndex up to date with the cursor ID
+    if (cursorId && ((_b = list.state.items[cursorIndexRef.current]) === null || _b === void 0 ? void 0 : _b.id) !== cursorId) {
+        cursorIndexRef.current = list.state.items.findIndex(item => item.id === cursorId);
+    }
+    else if (!cursorId) {
+        cursorIndexRef.current = -1;
+    }
     const state = {
         ...list.state,
         /** The id of the list item the cursor is pointing to */
@@ -269,6 +286,11 @@ exports.useCursorListModel = common_1.createModelHook({
          * @private Use useGridModel instead to make a grid instead of a list
          */
         columnCount,
+        /**
+         * A React.Ref of the current page size. Either provided as config, or determined at runtime
+         * based on the size of the list container and the number of items fitting within the container.
+         */
+        pageSizeRef,
     };
     const events = {
         ...list.events,
@@ -286,7 +308,8 @@ exports.useCursorListModel = common_1.createModelHook({
         },
         /** Directly sets the cursor to the list item by its identifier. */
         goTo(data) {
-            setCursorId(data.id);
+            const index = state.items.findIndex(item => item.id === data.id);
+            setCursor(index);
         },
         /**
          * Set the cursor to the "next" item in the list. This event delegates to the `getNext` method of
@@ -295,14 +318,16 @@ exports.useCursorListModel = common_1.createModelHook({
          * item in a row.
          */
         goToNext() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNext(state.cursorId, { state })));
+            const index = navigation.getNext(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         /**
          * Set the cursor to the "previous" item in the list. If the beginning of the list is detected,
          * it will wrap to the last item
          */
         goToPrevious() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getPrevious(state.cursorId, { state })));
+            const index = navigation.getPrevious(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         /**
          * Previous item perpendicular to the orientation of a list, or the previous row in a grid. For
@@ -311,9 +336,10 @@ exports.useCursorListModel = common_1.createModelHook({
          * this would be the previous row (current position - column count).
          */
         goToPreviousRow() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getPreviousRow(state.cursorId, {
+            const index = navigation.getPreviousRow(cursorIndexRef.current, {
                 state,
-            })));
+            });
+            setCursor(index);
         },
         /**
          * Next item perpendicular to the orientation of a list, or the next row in a grid. For example,
@@ -322,29 +348,36 @@ exports.useCursorListModel = common_1.createModelHook({
          * next row (current position + column count).
          */
         goToNextRow() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNextRow(state.cursorId, { state })));
+            const index = navigation.getNextRow(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         /** Set the cursor to the first item in the list */
         goToFirst() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getFirst(state.cursorId, { state })));
+            const index = navigation.getFirst(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         /** Set the cursor to the last item in the list */
         goToLast() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getLast(state.cursorId, { state })));
+            const index = navigation.getLast(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         goToFirstOfRow() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getFirstOfRow(state.cursorId, { state })));
+            const index = navigation.getFirstOfRow(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         goToLastOfRow() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getLastOfRow(state.cursorId, { state })));
+            const index = navigation.getLastOfRow(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         goToNextPage() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNextPage(state.cursorId, { state })));
+            const index = navigation.getNextPage(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         goToPreviousPage() {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getPreviousPage(state.cursorId, {
+            const index = navigation.getPreviousPage(cursorIndexRef.current, {
                 state,
-            })));
+            });
+            setCursor(index);
         },
     };
     return { ...list, state, events, navigation };

package/dist/commonjs/collection/lib/useGridModel.d.ts

@@ -18,6 +18,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
     initialUnselectedIds: string[];
     selection: import("./useSelectionListModel").SelectionManager;
     initialCursorId: string;
+    pageSize: number;
     id: string;
     getId: (item: any) => string;
     getTextValue: (item: any) => string;
@@ -38,6 +39,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -59,6 +61,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -80,6 +83,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -104,6 +108,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -127,6 +132,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -148,6 +154,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -169,6 +176,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -190,6 +198,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -211,6 +220,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -232,6 +242,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -253,6 +264,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -274,6 +286,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -295,6 +308,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -316,6 +330,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -337,6 +352,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -360,6 +376,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -383,6 +400,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -407,6 +425,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -428,6 +447,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -449,6 +469,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -473,6 +494,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -496,6 +518,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -517,6 +540,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -538,6 +562,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -559,6 +584,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -580,6 +606,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -601,6 +628,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -622,6 +650,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -643,6 +672,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -664,6 +694,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -685,6 +716,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -706,6 +738,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -729,6 +762,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -752,6 +786,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -774,6 +809,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -839,6 +875,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
     initialUnselectedIds: string[];
     selection: import("./useSelectionListModel").SelectionManager;
     initialCursorId: string;
+    pageSize: number;
     id: string;
     getId: (item: any) => string;
     getTextValue: (item: any) => string;
@@ -856,6 +893,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
     unselectedIds: string[];
     cursorId: string;
     columnCount: number;
+    pageSizeRef: import("react").MutableRefObject<number>;
     UNSTABLE_virtual: {
         virtualItems: import("./react-virtual").VirtualItem[];
         totalSize: number;
@@ -906,6 +944,7 @@ export declare const useGridModel: (<TT_Special_Generic>(config?: (Partial<{
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;

package/dist/commonjs/collection/lib/useGridModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGridModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useGridModel.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;;;;;OASG;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH;;;;;;;;;OASG;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASL,CAAC"}
+{"version":3,"file":"useGridModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useGridModel.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;;;;;OASG;;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH;;;;;;;;;OASG;;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASL,CAAC"}

package/dist/commonjs/collection/lib/useListItemRegister.d.ts

@@ -20,6 +20,7 @@ export declare const useListItemRegister: import("@workday/canvas-kit-react/comm
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: VirtualItem[];
             totalSize: number;

package/dist/commonjs/collection/lib/useListItemRegister.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRegister.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRegister.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAS3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmE/B,CAAC"}
+{"version":3,"file":"useListItemRegister.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRegister.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAS3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmE/B,CAAC"}

package/dist/commonjs/collection/lib/useListItemRovingFocus.d.ts

@@ -17,6 +17,7 @@ export declare const useListItemRovingFocus: import("@workday/canvas-kit-react/c
     state: {
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;