@workday/canvas-kit-react 9.0.0-alpha.419-next.21 → 9.0.0

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

@@ -54,7 +54,11 @@ exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useLis
             item: {
                 id: itemId,
             },
-            textValue: typeof elemProps.children === 'string' ? elemProps.children : '',
+            textValue: elemProps['data-text']
+                ? elemProps['data-text']
+                : typeof elemProps.children === 'string'
+                    ? elemProps.children
+                    : '',
         });
         setLocalId(itemId);
         return () => {

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

@@ -0,0 +1,66 @@
+import React from 'react';
+/**
+ * This elemProps hook is used to attach keyboard events to handle keyboard navigation
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListKeyboardHandler, // adds keyboard support support
+ *   useListItemRegister
+ * );
+```
+ */
+export declare const useListKeyboardHandler: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("./useBaseListModel").Item<any>[];
+    };
+    events: {
+        goTo(data: {
+            id: string;
+        }): void;
+        goToNext(): void;
+        goToPrevious(): void;
+        goToPreviousRow(): void;
+        goToNextRow(): void;
+        goToFirst(): void;
+        goToLast(): void;
+        goToFirstOfRow(): void;
+        goToLastOfRow(): void;
+        goToNextPage(): void;
+        goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    navigation: import("./useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}, {
+    onKeyDown(event: React.KeyboardEvent): void;
+}>;
+//# sourceMappingURL=useListKeyboardHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListKeyboardHandler.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListKeyboardHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAId,mBAAmB;EAOtC,CAAC"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListKeyboardHandler = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useCursorListModel_1 = require("./useCursorListModel");
+const keyUtils_1 = require("./keyUtils");
+/**
+ * This elemProps hook is used to attach keyboard events to handle keyboard navigation
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListKeyboardHandler, // adds keyboard support support
+ *   useListItemRegister
+ * );
+```
+ */
+exports.useListKeyboardHandler = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)(model => {
+    const isRTL = common_1.useIsRTL();
+    return {
+        onKeyDown(event) {
+            const handled = keyUtils_1.keyboardEventToCursorEvents(event, model, isRTL);
+            if (handled) {
+                event.preventDefault();
+            }
+        },
+    };
+});

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

@@ -1,3 +1,4 @@
+import { Model } from '@workday/canvas-kit-react/common';
 import { useListModel } from './useListModel';
 export interface LoadReturn<T> {
     items: T[];
@@ -9,9 +10,45 @@ export interface LoadParams {
     filter: CollectionLoader['filter'];
     sorter: CollectionLoader['sorter'];
 }
-export interface AsyncCollectionConfig<T> {
+export interface AsyncCollectionConfig<T, M extends Model<any, any>> {
+    /**
+     * The desired results per page.
+     */
     pageSize: number;
-    total: number;
+    /**
+     * The total items in the collection. If you do not have this information before making an API
+     * call, leave it blank and it will default to `0` and be updated when `load` comes back with
+     * results.
+     * @default 0
+     */
+    total?: number;
+    /**
+     * This function acts like a guard similar to model events. If you provide this function and it
+     * returns `false`, the `load` call from the loader will be cancelled. Be aware, this function can
+     * cause a loader to not function properly. You will need to call `loader.load(pageNumber)` on
+     * your own if a valid load event is cancelled. An example of using this function is in
+     * {@link useComboboxLoader} where the load calls are only allowed when the menu is open.
+     */
+    shouldLoad?(
+    /**
+     * Parameters that are being sent to the `load` function
+     */
+    params: LoadParams, 
+    /**
+     * State coming from the model
+     */
+    prevState: M['state']): boolean;
+    /**
+     * A `load` callback function provides an easier way to hook up loader requests for data to an
+     * API. It will be called when the user is ready for more of the virtual data set. The `load`
+     * function will be called when:
+     * - The list UI initially loads. It will request as many pages as necessary to render enough
+     *   items in the viewport
+     * - The user is scrolling the list and has run out of cached data
+     * - The user is using the keyboard to navigate the list and has run out of cached data
+     * - A filter or sorter value has changed and the cached data is now invalid
+     * - `loader.load` was called by the developer, manually requesting a page number
+     */
     load(params: LoadParams): LoadReturn<T> | Promise<LoadReturn<T>>;
 }
 export interface CollectionLoader {
@@ -20,6 +57,7 @@ export interface CollectionLoader {
     sorter: string | Record<string, string>;
     updateSorter(value: string): void;
     isLoading: boolean;
+    load(pageNumber?: number): void;
 }
 export declare function getPageNumber(index: number, pageSize: number): number;
 /**
@@ -34,11 +72,12 @@ export declare function getPageNumber(index: number, pageSize: number): number;
  */
 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.
+ * Create a data loader and a model. The list loader should be used on virtual data sets with
+ * possibly large amounts of data. 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:
+ * 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(
@@ -60,7 +99,7 @@ export declare function getPagesToLoad<T>(start: number, end: number, pageSize:
  * @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): {
+export declare function useListLoader<T, M extends ((...args: any[]) => any) & Omit<typeof useListModel, 'Context'>>(config: AsyncCollectionConfig<T, ReturnType<M>> & M['TConfig'], modelHook: M): {
     model: ReturnType<M>;
     loader: CollectionLoader;
 };

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

@@ -1 +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"}
+{"version":3,"file":"useListLoader.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListLoader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAEvD,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,EAAE,CAAC,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC;IACjE;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,UAAU,CAAC;IACT;;OAEG;IACH,MAAM,EAAE,UAAU;IAClB;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GACpB,OAAO,CAAC;IACX;;;;;;;;;;OAUG;IACH,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;IACnB,IAAI,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;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;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;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,CAAC,EAE1E,MAAM,EAAE,qBAAqB,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,EAC9D,SAAS,EAAE,CAAC,GACX;IAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAAC,MAAM,EAAE,gBAAgB,CAAA;CAAC,CAgLlD"}

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

@@ -73,11 +73,12 @@ function getPagesToLoad(start, end, pageSize, items, overScan = 3) {
 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.
+ * Create a data loader and a model. The list loader should be used on virtual data sets with
+ * possibly large amounts of data. 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:
+ * 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(
@@ -100,9 +101,9 @@ const resetItems = (total) => Array(total).fill(undefined);
  * @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 [total, setTotal] = react_1.default.useState(config.total || 0);
     const [items, setItems] = react_1.default.useState(() => {
-        return resetItems(config.total);
+        return resetItems(config.total || 0);
     });
     // keep track of pages that are currently loading
     const loadingRef = react_1.default.useRef({});
@@ -119,44 +120,29 @@ function useListLoader(config, modelHook) {
         }
         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 shouldLoadRef = react_1.default.useRef(config.shouldLoad);
+    shouldLoadRef.current = config.shouldLoad;
     const requestAnimationFrameRef = react_1.default.useRef(0);
     const shouldLoadIndex = (navigationMethod, eventKey) => {
-        return (data) => {
+        return (data, prevState) => {
             const index = model.navigation[navigationMethod](model.state.cursorIndexRef.current, model);
+            const params = {
+                pageNumber: Math.floor(index / config.pageSize) + 1,
+                pageSize: config.pageSize,
+                filter,
+                sorter,
+            };
             if (!items[index]) {
-                load({
-                    pageNumber: Math.floor(index / config.pageSize) + 1,
-                    pageSize: config.pageSize,
-                    filter,
-                    sorter,
-                }, loadRef.current, loadingRef.current)
+                if (config.shouldLoad && !config.shouldLoad(params, prevState)) {
+                    return false;
+                }
+                load(params, loadRef.current, loadingRef.current)
                     .then(updateItems)
                     .then(() => {
                     cancelAnimationFrame(requestAnimationFrameRef.current);
@@ -179,6 +165,37 @@ function useListLoader(config, modelHook) {
         shouldGoToPreviousPage: shouldLoadIndex('getPreviousPage', 'goToPreviousPage'),
     }));
     const { virtualItems } = model.state.UNSTABLE_virtual;
+    const { state } = model;
+    const stateRef = react_1.default.useRef(state);
+    stateRef.current = state;
+    const updateFilter = (filter) => {
+        loadingRef.current = {};
+        setFilter(filter);
+        const params = {
+            pageNumber: 1,
+            pageSize: config.pageSize,
+            filter,
+            sorter,
+        };
+        if (config.shouldLoad && !config.shouldLoad(params, state)) {
+            return;
+        }
+        load(params, loadRef.current, loadingRef.current).then(updateItems);
+    };
+    const updateSorter = (sorter) => {
+        loadingRef.current = {};
+        setSorter(sorter);
+        const params = {
+            pageNumber: 1,
+            pageSize: config.pageSize,
+            filter,
+            sorter,
+        };
+        if (config.shouldLoad && !config.shouldLoad(params, state)) {
+            return;
+        }
+        load(params, loadRef.current, loadingRef.current).then(updateItems);
+    };
     // Our only signal to trigger loading is if our virtual indexes are too close to boundaries.
     react_1.default.useEffect(() => {
         if (!virtualItems.length) {
@@ -188,12 +205,20 @@ function useListLoader(config, modelHook) {
         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);
+            const params = { pageNumber, pageSize: config.pageSize, filter, sorter };
+            const shouldLoad = shouldLoadRef.current;
+            if (shouldLoad && !shouldLoad(params, stateRef.current)) {
+                return;
+            }
+            load(params, loadRef.current, loadingRef.current).then(updateItems);
         });
         return () => {
             cancelAnimationFrame(requestAnimationFrameRef.current);
         };
     }, [virtualItems, config.pageSize, filter, sorter, updateItems]);
+    const loaderLoad = (pageNumber = 1) => {
+        return load({ pageNumber, pageSize: config.pageSize, filter, sorter }, loadRef.current, loadingRef.current).then(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`.
@@ -207,6 +232,7 @@ function useListLoader(config, modelHook) {
             // 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),
+            load: loaderLoad,
         },
     };
 }

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

@@ -86,6 +86,6 @@ export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/c
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, {
-    ref: (instance: HTMLElement | null) => void;
+    ref: (instance: unknown) => void;
 }>;
 //# sourceMappingURL=useOverflowListMeasure.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useOverflowListMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAalC,CAAC"}
+{"version":3,"file":"useOverflowListMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWjC,CAAC"}

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

@@ -86,9 +86,12 @@ export declare const useOverflowListTarget: import("@workday/canvas-kit-react/co
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, {
-    ref: (instance: HTMLButtonElement | null) => void;
+    ref: (instance: HTMLElement | null) => void;
     'aria-hidden': boolean;
     tabIndex: number;
-    style: {};
+    style: {
+        position: string;
+        left: number;
+    } | undefined;
 }>;
 //# sourceMappingURL=useOverflowListTarget.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useOverflowListTarget.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BjC,CAAC"}
+{"version":3,"file":"useOverflowListTarget.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BhC,CAAC"}

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

@@ -36,6 +36,6 @@ exports.useOverflowListTarget = common_1.createElemPropsHook(useOverflowListMode
         ref: elementRef,
         'aria-hidden': isHidden,
         tabIndex: isHidden ? -1 : 0,
-        style: isHidden ? hiddenStyle : {},
+        style: isHidden ? hiddenStyle : undefined,
     };
 });

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

@@ -1 +1 @@
-{"version":3,"file":"useSelectionListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useSelectionListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,oBAAY,WAAW,GAAG,KAAK,GAAG,MAAM,EAAE,CAAC;AAE3C,oBAAY,SAAS,GAAG;IACtB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,OAAQ,MAAM,kCAAgC,SAAS,YAK7E,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,gBAIpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,gBAmBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;YAoBZ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QADxB,gDAAgD;qBACnC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAKzB;;;WAGG;;QAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH,gDAAgD;iBACnC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;IAKzB;;;OAGG;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAfH,gDAAgD;qBACnC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAKzB;;;WAGG;;QAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOL,CAAC"}
+{"version":3,"file":"useSelectionListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useSelectionListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,oBAAY,WAAW,GAAG,KAAK,GAAG,MAAM,EAAE,CAAC;AAE3C,oBAAY,SAAS,GAAG;IACtB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,OAAQ,MAAM,kCAAgC,SAAS,YAK7E,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,gBAIpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,gBAmBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;YAqBZ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QADxB,gDAAgD;qBACnC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAKzB;;;WAGG;;QAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH,gDAAgD;iBACnC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;IAKzB;;;OAGG;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAfH,gDAAgD;qBACnC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAKzB;;;WAGG;;QAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOL,CAAC"}

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

@@ -48,6 +48,7 @@ exports.useSelectionListModel = common_1.createModelHook({
         selection: exports.singleSelectionManager,
     },
     requiredConfig: useCursorListModel_1.useCursorListModel.requiredConfig,
+    contextOverride: useCursorListModel_1.useCursorListModel.Context,
 })(config => {
     const cursor = useCursorListModel_1.useCursorListModel(config);
     const [selectedIds, setSelectedIds] = react_1.default.useState(config.initialSelectedIds);

package/dist/commonjs/combobox/index.d.ts

@@ -0,0 +1,9 @@
+export { Combobox } from './lib/Combobox';
+export { useComboboxCard } from './lib/ComboboxCard';
+export { useComboboxMenuItem } from './lib/ComboboxMenuItem';
+export { useComboboxMenuList } from './lib/ComboboxMenuList';
+export { useComboboxInput } from './lib/ComboboxInput';
+export { useComboboxLoader } from './lib/useComboboxLoader';
+export { useComboboxModel } from './lib/useComboboxModel';
+export { useComboboxInputOpenWithArrowKeys as useComboboxOpenWithArrowKeys } from './lib/useComboboxInputOpenWithArrowKeys';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAC,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,iCAAiC,IAAI,4BAA4B,EAAC,MAAM,yCAAyC,CAAC"}

package/dist/commonjs/combobox/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComboboxOpenWithArrowKeys = exports.useComboboxModel = exports.useComboboxLoader = exports.useComboboxInput = exports.useComboboxMenuList = exports.useComboboxMenuItem = exports.useComboboxCard = exports.Combobox = void 0;
+var Combobox_1 = require("./lib/Combobox");
+Object.defineProperty(exports, "Combobox", { enumerable: true, get: function () { return Combobox_1.Combobox; } });
+var ComboboxCard_1 = require("./lib/ComboboxCard");
+Object.defineProperty(exports, "useComboboxCard", { enumerable: true, get: function () { return ComboboxCard_1.useComboboxCard; } });
+var ComboboxMenuItem_1 = require("./lib/ComboboxMenuItem");
+Object.defineProperty(exports, "useComboboxMenuItem", { enumerable: true, get: function () { return ComboboxMenuItem_1.useComboboxMenuItem; } });
+var ComboboxMenuList_1 = require("./lib/ComboboxMenuList");
+Object.defineProperty(exports, "useComboboxMenuList", { enumerable: true, get: function () { return ComboboxMenuList_1.useComboboxMenuList; } });
+var ComboboxInput_1 = require("./lib/ComboboxInput");
+Object.defineProperty(exports, "useComboboxInput", { enumerable: true, get: function () { return ComboboxInput_1.useComboboxInput; } });
+var useComboboxLoader_1 = require("./lib/useComboboxLoader");
+Object.defineProperty(exports, "useComboboxLoader", { enumerable: true, get: function () { return useComboboxLoader_1.useComboboxLoader; } });
+var useComboboxModel_1 = require("./lib/useComboboxModel");
+Object.defineProperty(exports, "useComboboxModel", { enumerable: true, get: function () { return useComboboxModel_1.useComboboxModel; } });
+var useComboboxInputOpenWithArrowKeys_1 = require("./lib/useComboboxInputOpenWithArrowKeys");
+Object.defineProperty(exports, "useComboboxOpenWithArrowKeys", { enumerable: true, get: function () { return useComboboxInputOpenWithArrowKeys_1.useComboboxInputOpenWithArrowKeys; } });