@workday/canvas-kit-react 9.0.0-alpha.411-next.13 → 9.0.0-alpha.412-next.14

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

@@ -22,74 +22,73 @@ export const createNavigationManager = (manager) => manager;
 /**
  * Get the first item in a list regardless of column count
  */
-export const getFirst = (_, { state }) => state.items[0];
+export const getFirst = (_, { state }) => 0;
 /**
  * Get the last item in a list regardless of column count
  */
-export const getLast = (_, { state }) => state.items[state.items.length - 1];
+export const getLast = (_, { state }) => state.items.length - 1;
 /**
  * Get the first item in a row. If column count is 0, it will return the results of `getFirst`
  */
-export const getFirstOfRow = (id, { state }) => {
+export 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 getFirst(id, { state });
+    return getFirst(index, { state });
 };
 /**
  * get the last item in a row - if column count is 0, it will return the results of `getLast`
  */
-export const getLastOfRow = (id, { state }) => {
+export 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 getLast(id, { state });
+    return getLast(index, { state });
 };
 /**
  * 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.
  */
-export const getPreviousPage = (id, { state }) => {
+export 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 getFirst(id, { state });
+    return getFirst(index, { state });
 };
 /**
  * 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.
  */
-export const getNextPage = (id, { state }) => {
+export 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 getLast(id, { state });
+    return getLast(index, { state });
 };
 const getItem = (id, { state }) => {
-    const item = id ? state.items.find(item => getId(item) === id) : 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
     assert(item, `Item not found: ${id}`);
     return item;
 };
-export const getWrappingOffsetItem = (offset) => (id, { state }, tries = state.items.length) => {
+export 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 getFirst(index, { state });
+        }
+        if (offset === -1) {
+            return 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;
@@ -123,25 +122,23 @@ export const getWrappingOffsetItem = (offset) => (id, { state }, tries = state.i
             nextIndex = nextIndex - idealLength;
         }
     }
-    if (state.nonInteractiveIds.includes(getId(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 getWrappingOffsetItem(offset)(getId(items[nextIndex]), { state }, tries - 1);
+        return getWrappingOffsetItem(offset)(nextIndex, { state }, tries - 1);
     }
-    return items[nextIndex];
+    return nextIndex;
 };
-export const getOffsetItem = (offset) => (id, { state }, tries = state.items.length) => {
+export 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) {
@@ -149,11 +146,11 @@ export const getOffsetItem = (offset) => (id, { state }, tries = state.items.len
         // 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
@@ -163,12 +160,12 @@ export const getOffsetItem = (offset) => (id, { state }, tries = state.items.len
     else if (nextIndex >= items.length) {
         nextIndex = items.length - 1;
     }
-    if (state.nonInteractiveIds.includes(getId(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 getOffsetItem(offset)(getId(items[nextIndex]), { state }, tries - 1);
+        return getOffsetItem(offset)(nextIndex, { state }, tries - 1);
     }
-    return items[nextIndex];
+    return nextIndex;
 };
 /**
  * The default navigation manager of lists. This navigation manager will wrap around when the edge
@@ -180,9 +177,9 @@ export const wrappingNavigationManager = createNavigationManager({
     getLast,
     getItem,
     getNext: getWrappingOffsetItem(1),
-    getNextRow: (id, { state }) => getWrappingOffsetItem(state.columnCount)(id, { state }),
+    getNextRow: (index, { state }) => getWrappingOffsetItem(state.columnCount)(index, { state }),
     getPrevious: getWrappingOffsetItem(-1),
-    getPreviousRow: (id, { state }) => getWrappingOffsetItem(-state.columnCount)(id, { state }),
+    getPreviousRow: (index, { state }) => getWrappingOffsetItem(-state.columnCount)(index, { state }),
     getPreviousPage,
     getNextPage,
     getFirstOfRow,
@@ -197,9 +194,9 @@ export const navigationManager = createNavigationManager({
     getLast,
     getItem,
     getNext: getOffsetItem(1),
-    getNextRow: (id, { state }) => getOffsetItem(state.columnCount)(id, { state }),
+    getNextRow: (index, { state }) => getOffsetItem(state.columnCount)(index, { state }),
     getPrevious: getOffsetItem(-1),
-    getPreviousRow: (id, { state }) => getOffsetItem(-state.columnCount)(id, { state }),
+    getPreviousRow: (index, { state }) => getOffsetItem(-state.columnCount)(index, { state }),
     getPreviousPage,
     getNextPage,
     getFirstOfRow,
@@ -235,15 +232,35 @@ export const useCursorListModel = createModelHook({
          * well as left/right keys to give a more consistent experience to all users.
          */
         navigation: 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.requiredConfig,
+    contextOverride: useBaseListModel.Context,
 })(config => {
-    var _a;
+    var _a, _b;
     const [cursorId, setCursorId] = React.useState(config.initialCursorId);
+    const pageSizeRef = React.useRef(config.pageSize);
     const columnCount = config.columnCount || 0;
     const list = useBaseListModel(config);
-    const initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(list.state.items[0]) : ''));
+    const initialCurrentRef = React.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.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 */
@@ -254,6 +271,11 @@ export const useCursorListModel = 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,
@@ -271,7 +293,8 @@ export const useCursorListModel = 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
@@ -280,14 +303,16 @@ export const useCursorListModel = createModelHook({
          * item in a row.
          */
         goToNext() {
-            setCursorId(getId(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(getId(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
@@ -296,9 +321,10 @@ export const useCursorListModel = createModelHook({
          * this would be the previous row (current position - column count).
          */
         goToPreviousRow() {
-            setCursorId(getId(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,
@@ -307,29 +333,36 @@ export const useCursorListModel = createModelHook({
          * next row (current position + column count).
          */
         goToNextRow() {
-            setCursorId(getId(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(getId(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(getId(navigation.getLast(state.cursorId, { state })));
+            const index = navigation.getLast(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         goToFirstOfRow() {
-            setCursorId(getId(navigation.getFirstOfRow(state.cursorId, { state })));
+            const index = navigation.getFirstOfRow(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         goToLastOfRow() {
-            setCursorId(getId(navigation.getLastOfRow(state.cursorId, { state })));
+            const index = navigation.getLastOfRow(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         goToNextPage() {
-            setCursorId(getId(navigation.getNextPage(state.cursorId, { state })));
+            const index = navigation.getNextPage(cursorIndexRef.current, { state });
+            setCursor(index);
         },
         goToPreviousPage() {
-            setCursorId(getId(navigation.getPreviousPage(state.cursorId, {
+            const index = navigation.getPreviousPage(cursorIndexRef.current, {
                 state,
-            })));
+            });
+            setCursor(index);
         },
     };
     return { ...list, state, events, navigation };

package/dist/es6/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/es6/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/es6/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/es6/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/es6/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;

package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA8BZ,mBAAmB;;;;;EAmBzC,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA8BZ,mBAAmB;;;;;EAmBzC,CAAC"}