@workday/canvas-kit-react 9.0.0-alpha.415-next.17 → 9.0.0-alpha.417-next.19

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

@@ -21,6 +21,9 @@ export declare const useListItemRegister: import("@workday/canvas-kit-react/comm
         cursorId: string;
         columnCount: number;
         pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: VirtualItem[];
             totalSize: number;
@@ -43,10 +46,6 @@ export declare const useListItemRegister: import("@workday/canvas-kit-react/comm
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -60,6 +59,10 @@ export declare const useListItemRegister: import("@workday/canvas-kit-react/comm
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;

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;AAU3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoE/B,CAAC"}
+{"version":3,"file":"useListItemRegister.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRegister.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAU3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoE/B,CAAC"}

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

@@ -18,6 +18,9 @@ export declare const useListItemRovingFocus: import("@workday/canvas-kit-react/c
         cursorId: string;
         columnCount: number;
         pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -35,10 +38,6 @@ export declare const useListItemRovingFocus: import("@workday/canvas-kit-react/c
         items: import("./useBaseListModel").Item<any>[];
     };
     events: {
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -52,6 +51,10 @@ export declare const useListItemRovingFocus: import("@workday/canvas-kit-react/c
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -66,6 +69,5 @@ export declare const useListItemRovingFocus: import("@workday/canvas-kit-react/c
     onClick(): void;
     'data-focus-id': string;
     tabIndex: number;
-    ref: React.Ref<any> | undefined;
 }>;
 //# sourceMappingURL=useListItemRovingFocus.d.ts.map

package/dist/commonjs/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;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2CZ,mBAAmB;;;;EAkBzC,CAAC"}

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

@@ -8,6 +8,12 @@ const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const useCursorListModel_1 = require("./useCursorListModel");
 const keyUtils_1 = require("./keyUtils");
+// retry a function each frame so we don't rely on the timing mechanism of React's render cycle.
+const retryEachFrame = (cb, iterations) => {
+    if (cb() === false && iterations > 1) {
+        requestAnimationFrame(() => retryEachFrame(cb, iterations - 1));
+    }
+};
 /**
  * This elemProps hook is used for cursor navigation by using [Roving
  * Tabindex](https://w3c.github.io/aria-practices/#kbd_roving_tabindex). Only a single item in the
@@ -22,7 +28,7 @@ const keyUtils_1 = require("./keyUtils");
  * );
 ```
  */
-exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)((model, ref, elemProps = {}) => {
+exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)((model, _ref, elemProps = {}) => {
     // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
     // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
     // empty array
@@ -36,16 +42,24 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
             if (model.state.isVirtualized) {
                 model.state.UNSTABLE_virtual.scrollToIndex(item.index);
             }
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = document
-                    .querySelector(`[data-focus-id="${`${model.state.id}-${item.id}`}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
-            });
+            // In React concurrent mode, there could be several render attempts before the element we're
+            // looking for could be available in the DOM
+            retryEachFrame(() => {
+                const element = document.querySelector(`[data-focus-id="${`${model.state.id}-${item.id}`}"]`);
+                element === null || element === void 0 ? void 0 : element.focus();
+                return !!element;
+            }, 5); // 5 should be enough, right?!
             keyDownRef.current = false;
         }
         // we only want to run this effect if the cursor changes and not any other time
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [model.state.cursorId]);
+    // Roving focus must always have a focus stop to function correctly
+    react_1.default.useEffect(() => {
+        if (!model.state.cursorId && model.state.items.length) {
+            model.events.goTo({ id: model.state.items[0].id });
+        }
+    }, [model.state.cursorId, model.state.items, model.events]);
     return {
         onKeyDown(event) {
             const handled = keyUtils_1.keyboardEventToCursorEvents(event, model, isRTL);
@@ -62,7 +76,6 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
             ? 0 // cursor isn't known yet, be safe and mark this as focusable
             : !!elemProps['data-id'] && model.state.cursorId === elemProps['data-id']
                 ? 0 // A name is known and cursor is here
-                : -1,
-        ref,
+                : -1, // A name is known an cursor is somewhere else
     };
 });

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

@@ -18,6 +18,9 @@ export declare const useListItemSelect: import("@workday/canvas-kit-react/common
         cursorId: string;
         columnCount: number;
         pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -40,10 +43,6 @@ export declare const useListItemSelect: import("@workday/canvas-kit-react/common
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -57,6 +56,10 @@ export declare const useListItemSelect: import("@workday/canvas-kit-react/common
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;

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

@@ -1 +1 @@
-{"version":3,"file":"useListItemSelect.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGF,gBAAgB,CAAC,WAAW,CAAC;EAWxD,CAAC"}
+{"version":3,"file":"useListItemSelect.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGF,gBAAgB,CAAC,WAAW,CAAC;EAWxD,CAAC"}

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

@@ -0,0 +1,67 @@
+import { useListModel } from './useListModel';
+export interface LoadReturn<T> {
+    items: T[];
+    total?: number;
+}
+export interface LoadParams {
+    pageNumber: number;
+    pageSize: number;
+    filter: CollectionLoader['filter'];
+    sorter: CollectionLoader['sorter'];
+}
+export interface AsyncCollectionConfig<T> {
+    pageSize: number;
+    total: number;
+    load(params: LoadParams): LoadReturn<T> | Promise<LoadReturn<T>>;
+}
+export interface CollectionLoader {
+    filter: string | Record<string, string>;
+    updateFilter(value: string): void;
+    sorter: string | Record<string, string>;
+    updateSorter(value: string): void;
+    isLoading: boolean;
+}
+export declare function getPageNumber(index: number, pageSize: number): number;
+/**
+ *
+ * @param start The start index of the virtual window
+ * @param end The end index of the virtual window
+ * @param pageSize Expected load page size
+ * @param items Sparse array of all loaded items
+ * @param overScan How many items ahead we want to look ahead to trigger loading. Unloaded items
+ * that are this many items outside the current start and end numbers will trigger a loading of
+ * a page
+ */
+export declare function getPagesToLoad<T>(start: number, end: number, pageSize: number, items: T[], overScan?: number): number[];
+/**
+ * Create a data loader and a model. The model should be passed to a collection component. The
+ * loader can be used to manipulate filters, sorters, and clear cache.
+ *
+ * A simple loader using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+ * could look like the following:
+ *
+ * ```ts
+ * const {model, loader} = useListLoader(
+ *   {
+ *     total: 1000,
+ *     pageSize: 20,
+ *     async load({pageNumber, pageSize}) {
+ *       return fetch('/myUrl')
+ *         .then(response => response.json())
+ *         .then(response => {
+ *           return {total: response.total, items: response.items};
+ *         });
+ *     },
+ *   },
+ *   useListModel
+ * );
+ * ```
+ *
+ * @param config Config that contains the loader config and the model config
+ * @param modelHook A model hook that describes which model should be returned.
+ */
+export declare function useListLoader<T, M extends ((...args: any[]) => any) & Omit<typeof useListModel, 'TConfig' | 'Context'>>(config: AsyncCollectionConfig<T> & typeof useListModel.TConfig, modelHook: M): {
+    model: ReturnType<M>;
+    loader: CollectionLoader;
+};
+//# sourceMappingURL=useListLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListLoader.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListLoader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnC,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;CACpC;AACD,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;CACpB;AA8CD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAM5D;AAMD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,CAAC,EAAE,EACV,QAAQ,SAAI,GACX,MAAM,EAAE,CAkBV;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,aAAa,CAC3B,CAAC,EAED,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,YAAY,EAAE,SAAS,GAAG,SAAS,CAAC,EAEtF,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,OAAO,YAAY,CAAC,OAAO,EAC9D,SAAS,EAAE,CAAC,GACX;IAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAAC,MAAM,EAAE,gBAAgB,CAAA;CAAC,CA2JlD"}

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

@@ -0,0 +1,213 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListLoader = exports.getPagesToLoad = exports.getPageNumber = void 0;
+const react_1 = __importDefault(require("react"));
+/**
+ * A loading buffer is how many items we want to look at ahead of the current virtual window. A
+ * higher amount can load too many pages initially. A lower number can cause items to not be loaded
+ * yet when scrolling. This will probably become a floating number later based on scrolling speed.
+ * Ideally the faster the user scrolls, this number will be higher or "predict" where to focus loading
+ * so the user doesn't see unloaded items. But if the user is scrolling too fast, we may simply delay
+ * data loading. That logic would be based on timers. For now, we'll just hardcode.
+ */
+const loadingBuffer = 3;
+function updateItems(newItems, startIndex = 0) {
+    return function itemStateUpdater(items) {
+        // replace existing indexes with data from external service
+        newItems.forEach((item, index) => {
+            items[index + startIndex] = item;
+        });
+        const returnedItems = items.concat([]);
+        return returnedItems; // return a new reference
+    };
+}
+function load(params, loadCb, loadingCache) {
+    if (loadingCache[params.pageNumber]) {
+        return Promise.resolve({ updater: items => items });
+    }
+    loadingCache[params.pageNumber] = true;
+    return Promise.resolve(loadCb(params)).then(({ items, total }) => {
+        loadingCache[params.pageNumber] = false;
+        return { total, updater: updateItems(items, (params.pageNumber - 1) * params.pageSize) };
+    });
+}
+function getPageNumber(index, pageSize) {
+    if (index <= 0) {
+        return 1;
+    }
+    return Math.ceil((index + 1) / pageSize);
+}
+exports.getPageNumber = getPageNumber;
+function clamp(input, min, max) {
+    return Math.max(Math.min(input, max), min);
+}
+/**
+ *
+ * @param start The start index of the virtual window
+ * @param end The end index of the virtual window
+ * @param pageSize Expected load page size
+ * @param items Sparse array of all loaded items
+ * @param overScan How many items ahead we want to look ahead to trigger loading. Unloaded items
+ * that are this many items outside the current start and end numbers will trigger a loading of
+ * a page
+ */
+function getPagesToLoad(start, end, pageSize, items, overScan = 3) {
+    const pagesToLoad = [];
+    const lookBehindIndex = clamp(start - overScan, 0, items.length - 1);
+    if (start >= 0 && !items[lookBehindIndex]) {
+        const pageNumber = getPageNumber(lookBehindIndex, pageSize);
+        pagesToLoad.push(pageNumber);
+    }
+    const lookaheadIndex = clamp(end + overScan - 1, 0, items.length - 1);
+    if (end < items.length - 1 && !items[lookaheadIndex]) {
+        const pageNumber = getPageNumber(lookaheadIndex, pageSize);
+        if (!pagesToLoad.includes(pageNumber)) {
+            pagesToLoad.push(pageNumber);
+        }
+    }
+    return pagesToLoad;
+}
+exports.getPagesToLoad = getPagesToLoad;
+const resetItems = (total) => Array(total).fill(undefined);
+/**
+ * Create a data loader and a model. The model should be passed to a collection component. The
+ * loader can be used to manipulate filters, sorters, and clear cache.
+ *
+ * A simple loader using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+ * could look like the following:
+ *
+ * ```ts
+ * const {model, loader} = useListLoader(
+ *   {
+ *     total: 1000,
+ *     pageSize: 20,
+ *     async load({pageNumber, pageSize}) {
+ *       return fetch('/myUrl')
+ *         .then(response => response.json())
+ *         .then(response => {
+ *           return {total: response.total, items: response.items};
+ *         });
+ *     },
+ *   },
+ *   useListModel
+ * );
+ * ```
+ *
+ * @param config Config that contains the loader config and the model config
+ * @param modelHook A model hook that describes which model should be returned.
+ */
+function useListLoader(config, modelHook) {
+    const [total, setTotal] = react_1.default.useState(config.total);
+    const [items, setItems] = react_1.default.useState(() => {
+        return resetItems(config.total);
+    });
+    // keep track of pages that are currently loading
+    const loadingRef = react_1.default.useRef({});
+    const [filter, setFilter] = react_1.default.useState('');
+    const [sorter, setSorter] = react_1.default.useState('');
+    const updateItems = react_1.default.useCallback(({ updater, total: newTotal }) => {
+        if (newTotal !== undefined && total !== newTotal) {
+            setTotal(newTotal);
+            setItems(() => {
+                const items = resetItems(newTotal);
+                return updater(items);
+            });
+            return;
+        }
+        setItems(updater);
+    }, [total]);
+    const updateFilter = (filter) => {
+        loadingRef.current = {};
+        setFilter(filter);
+        const params = {
+            pageNumber: 1,
+            pageSize: config.pageSize,
+            filter,
+            sorter,
+        };
+        load(params, loadRef.current, loadingRef.current).then(updateItems);
+    };
+    const updateSorter = (sorter) => {
+        loadingRef.current = {};
+        setSorter(sorter);
+        load({
+            pageNumber: 1,
+            pageSize: config.pageSize,
+            filter,
+            sorter,
+        }, loadRef.current, loadingRef.current).then(updateItems);
+    };
+    // Our `useEffect` functions use `config.load`, but we don't want to rerun the effects if the user
+    // sends a different load function every render
+    const loadRef = react_1.default.useRef(config.load);
+    loadRef.current = config.load;
+    const itemsRef = react_1.default.useRef(items);
+    itemsRef.current = items;
+    const requestAnimationFrameRef = react_1.default.useRef(0);
+    const shouldLoadIndex = (navigationMethod, eventKey) => {
+        return (data) => {
+            const index = model.navigation[navigationMethod](model.state.cursorIndexRef.current, model);
+            if (!items[index]) {
+                load({
+                    pageNumber: Math.floor(index / config.pageSize) + 1,
+                    pageSize: config.pageSize,
+                    filter,
+                    sorter,
+                }, loadRef.current, loadingRef.current)
+                    .then(updateItems)
+                    .then(() => {
+                    cancelAnimationFrame(requestAnimationFrameRef.current);
+                    requestAnimationFrameRef.current = requestAnimationFrame(() => {
+                        model.events[eventKey](data);
+                    });
+                });
+                return false;
+            }
+            return true;
+        };
+    };
+    const model = modelHook(modelHook.mergeConfig(config, {
+        items,
+        shouldGoToNext: shouldLoadIndex('getNext', 'goToNext'),
+        shouldGoToPrevious: shouldLoadIndex('getPrevious', 'goToPrevious'),
+        shouldGoToLast: shouldLoadIndex('getLast', 'goToLast'),
+        shouldGoToFirst: shouldLoadIndex('getFirst', 'goToFirst'),
+        shouldGoToNextPage: shouldLoadIndex('getNextPage', 'goToNextPage'),
+        shouldGoToPreviousPage: shouldLoadIndex('getPreviousPage', 'goToPreviousPage'),
+    }));
+    const { virtualItems } = model.state.UNSTABLE_virtual;
+    // Our only signal to trigger loading is if our virtual indexes are too close to boundaries.
+    react_1.default.useEffect(() => {
+        if (!virtualItems.length) {
+            return;
+        }
+        const firstItem = virtualItems[0];
+        const lastItem = virtualItems[virtualItems.length - 1];
+        const pagesToLoad = getPagesToLoad(firstItem.index, lastItem.index, config.pageSize, itemsRef.current, loadingBuffer);
+        pagesToLoad.forEach(pageNumber => {
+            load({ pageNumber, pageSize: config.pageSize, filter, sorter }, loadRef.current, loadingRef.current).then(updateItems);
+        });
+        return () => {
+            cancelAnimationFrame(requestAnimationFrameRef.current);
+        };
+    }, [virtualItems, config.pageSize, filter, sorter, updateItems]);
+    // Typescript won't allow me to say the included model extends `useListModel` for some reason, so
+    // we have no way to type check it. Without the constraint, Typescript doesn't know how type it
+    // properly, so we have an `as any`.
+    return {
+        model: model,
+        loader: {
+            filter,
+            updateFilter,
+            sorter,
+            updateSorter,
+            // we reduce the ref instead of a state variable because the loader mutates this ref and
+            // triggers state changes when loading is finished.
+            isLoading: Object.values(loadingRef.current).reduce((loading, result) => loading || result, false),
+        },
+    };
+}
+exports.useListLoader = useListLoader;