@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"useListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListModel.tsx"],"names":[],"mappings":"AAOA,oBAAY,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5D,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGA,CAAC"}
+{"version":3,"file":"useListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListModel.tsx"],"names":[],"mappings":"AAOA,oBAAY,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5D,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGA,CAAC"}

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

@@ -1,13 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListModel = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var useSelectionListModel_1 = require("./useSelectionListModel");
+const common_1 = require("@workday/canvas-kit-react/common");
+const useSelectionListModel_1 = require("./useSelectionListModel");
 /**
- * Create a list model that includes item registration, cursors for focus, and selection. You can
- * inject navigation and selection managers to change how a user navigates or how selection works.
+ * The List model contains the the state and events necessary to track items, selection, and a cursor.
+ * Various hooks can be used for a List model to create common behaviors associated with lists, such as
+ * navigating a list with a keyboard, selection (single and multiple), and virtualization.
  *
- * @example
+ * A list also has a "cursor". A cursor is often represented by focus, but it is not always a 1:1
+ * mapping. Think of the cursor as the focus item within the list. If the list has browser focus, the
+ * cursor will map to browser focus. Behaviors such as `useListRovingFocus` will map the cursor to the
+ * active tab stop of the list. For more information, see
+ * [Roving Tabindex](https://w3c.github.io/aria-practices/#kbd_roving_tabindex). `useListRovingFocus`
+ * adds keyboard events that map to navigation events. A [Navigation Manager](#navigation-manager) is
+ * used to map new cursor ids to these events. The `ListModel` takes an optional `navigation`
+ * configuration to change the default navigation behavior. The default navigation manager is a
+ * [wrappingNavigationManager](#wrappingnavigationmanager) meaning the cursor will wrap around the
+ * beginning and the ends. The cursor also provides a [navigationManager](#navigationmanager) that does
+ * not wrap. This is the default navigation for grids.
+ *
+ * The cursor also adds the concept of `orientation` which defaults to `'vertical'`. A Tab list is an
+ * example of a `'horizontal'` list.
+ *
+ * ```tsx
  * const list = useListModel({
  *   // custom handling for selection. single and multi select are provided
  *   selection: mySelectionManager,
@@ -16,6 +32,7 @@ var useSelectionListModel_1 = require("./useSelectionListModel");
  *   items: [{ id: '1', text: 'First'}, { id: '2', text: 'Second' }],
  *   getId: item => item.id, // get the unique identifier of your item
  * })
+ * ```
  */
 exports.useListModel = common_1.createModelHook({
     defaultConfig: useSelectionListModel_1.useSelectionListModel.defaultConfig,

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

@@ -1,5 +1,19 @@
 import React from 'react';
 import { Generic } from '@workday/canvas-kit-react/common';
 import { useBaseListModel } from './useBaseListModel';
-export declare function useListRenderItems<T>(model: ReturnType<typeof useBaseListModel>, children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode): {} | null | undefined;
+/**
+ * This hook is meant to be used inside the render function of `List` style components. It is used
+ * by `ListBox`. This hook gives list-based components their static and dynamic APIs to handle list
+ * items. This hook should only be used if you want to implement your own List. For example,
+ * `Tabs.List` uses this hook, but `Menu.List` uses `ListBox` which uses this hook.
+ *
+ * ```tsx
+ * const MyList = createContainer('ul')({
+ *   modelHook: useListModel,
+ * })((elemProps, Element, model) => {
+ *   return <Element {...elemProps}>{useListRenderItems(model, elemProps.children)}</Element>;
+ * });
+```
+ */
+export declare function useListRenderItems<T>(model: ReturnType<typeof useBaseListModel>, children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode): React.ReactNode;
 //# sourceMappingURL=useListRenderItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useListRenderItem.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListRenderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EAC1C,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,yBAuBhF"}
+{"version":3,"file":"useListRenderItem.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListRenderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EAC1C,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,GAC9E,KAAK,CAAC,SAAS,CAgCjB"}

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

@@ -4,26 +4,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListRenderItems = void 0;
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
+/**
+ * This hook is meant to be used inside the render function of `List` style components. It is used
+ * by `ListBox`. This hook gives list-based components their static and dynamic APIs to handle list
+ * items. This hook should only be used if you want to implement your own List. For example,
+ * `Tabs.List` uses this hook, but `Menu.List` uses `ListBox` which uses this hook.
+ *
+ * ```tsx
+ * const MyList = createContainer('ul')({
+ *   modelHook: useListModel,
+ * })((elemProps, Element, model) => {
+ *   return <Element {...elemProps}>{useListRenderItems(model, elemProps.children)}</Element>;
+ * });
+```
+ */
 function useListRenderItems(model, children) {
-    var items = typeof children === 'function'
+    const items = typeof children === 'function'
         ? model.state.isVirtualized
-            ? model.state.UNSTABLE_virtual.virtualItems.map(function (virtual) {
-                var item = model.state.items[virtual.index];
-                var child = children(item.value, virtual.index);
-                return react_1.default.cloneElement(child, {
-                    // We call this `virtual` instead of `virtualItem` to avoid a React render warning
-                    // about capital letters in attributes. React thinks this will be applied to the DOM
-                    // element even though we remove it later...
-                    virtual: virtual,
-                    key: item.id,
-                    item: item,
-                });
+            ? model.state.UNSTABLE_virtual.virtualItems.map(virtual => {
+                const item = model.state.items[virtual.index];
+                const child = children(item.value, virtual.index);
+                if (react_1.default.isValidElement(child)) {
+                    return react_1.default.cloneElement(child, {
+                        // We call this `virtual` instead of `virtualItem` to avoid a React render warning
+                        // about capital letters in attributes. React thinks this will be applied to the DOM
+                        // element even though we remove it later...
+                        virtual,
+                        key: item.id,
+                        item,
+                    });
+                }
+                return child;
             })
-            : model.state.items.map(function (item) {
-                return react_1.default.cloneElement(children(item.value, item.index), { key: item.id, item: item.value });
+            : model.state.items.map(item => {
+                const child = children(item.value, item.index);
+                if (react_1.default.isValidElement(child)) {
+                    return react_1.default.cloneElement(child, {
+                        key: item.id,
+                        item: item.value,
+                    });
+                }
+                return child;
             })
-        : null;
-    return items || children;
+        : children;
+    return items;
 }
 exports.useListRenderItems = useListRenderItems;

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

@@ -1,13 +1,28 @@
 import React from 'react';
 /**
- * Reset the cursor to the selected item when the list looses focus
+ * This elemProps hook resets the cursor when the list looses focus. By default,
+ * [useListItemRovingFocus](#use-list-item-roving-focus) will leave the last focused item as the
+ * focusable item in the list. Sometimes it is desireable to reset the cursor to the last selected
+ * item. For example, `Tabs.Item` uses this hook to reset the tab stop to the currently selected tab.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListResetCursorOnBlur, // adds the cursor reset to selected for roving tabindex
+ *   useListItemRovingFocus,
+ *   useListItemRegister
+ * );
+```
  */
-export declare const useListResetCursorOnBlur: <P extends {}, R>(model: {
+export declare const useListResetCursorOnBlur: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
-        selectedIds: import("./useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -18,7 +33,7 @@ export declare const useListResetCursorOnBlur: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -30,10 +45,6 @@ export declare const useListResetCursorOnBlur: <P extends {}, R>(model: {
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -47,6 +58,10 @@ export declare const useListResetCursorOnBlur: <P extends {}, R>(model: {
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -57,11 +72,9 @@ export declare const useListResetCursorOnBlur: <P extends {}, R>(model: {
     selection: import("./useSelectionListModel").SelectionManager;
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, {
     onKeyDown(event: React.KeyboardEvent): void;
     onFocus(): void;
     onBlur(): void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=useListResetCursorOnBlur.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useListResetCursorOnBlur.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListResetCursorOnBlur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGhB,mBAAmB;;;;;OAetC,CAAC"}
+{"version":3,"file":"useListResetCursorOnBlur.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListResetCursorOnBlur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGhB,mBAAmB;;;EAetC,CAAC"}

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

@@ -4,27 +4,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListResetCursorOnBlur = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useListItemRovingFocus_1 = require("./useListItemRovingFocus");
-var useListModel_1 = require("./useListModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const keyUtils_1 = require("./keyUtils");
+const useListModel_1 = require("./useListModel");
 /**
- * Reset the cursor to the selected item when the list looses focus
+ * This elemProps hook resets the cursor when the list looses focus. By default,
+ * [useListItemRovingFocus](#use-list-item-roving-focus) will leave the last focused item as the
+ * focusable item in the list. Sometimes it is desireable to reset the cursor to the last selected
+ * item. For example, `Tabs.Item` uses this hook to reset the tab stop to the currently selected tab.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListResetCursorOnBlur, // adds the cursor reset to selected for roving tabindex
+ *   useListItemRovingFocus,
+ *   useListItemRegister
+ * );
+```
  */
-exports.useListResetCursorOnBlur = common_1.createElemPropsHook(useListModel_1.useListModel)(function (_a) {
-    var state = _a.state, events = _a.events;
-    var programmaticFocusRef = react_1.default.useRef(false);
+exports.useListResetCursorOnBlur = common_1.createElemPropsHook(useListModel_1.useListModel)(({ state, events }) => {
+    const programmaticFocusRef = react_1.default.useRef(false);
     return {
-        onKeyDown: function (event) {
+        onKeyDown(event) {
             // Programmatic focus only on any focus change via keyboard
-            if (Object.keys(useListItemRovingFocus_1.orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
+            if (Object.keys(keyUtils_1.orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
                 programmaticFocusRef.current = true;
             }
         },
-        onFocus: function () {
+        onFocus() {
             programmaticFocusRef.current = false;
         },
-        onBlur: function () {
+        onBlur() {
             if (!programmaticFocusRef.current) {
                 events.goTo({ id: state.selectedIds[0] });
             }

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

@@ -1,13 +1,28 @@
-export declare const useOverflowListItemMeasure: <P extends {}, R>(model: {
+/**
+ * This elemProps hook measures a list item and reports it to an `OverflowListModel`. This is used
+ * in overflow detection.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useOverflowListItemMeasure,
+ *   useListRegisterItem,
+ * )
+ * ```
+ */
+export declare const useOverflowListItemMeasure: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         hiddenIds: string[];
         itemWidthCache: Record<string, number>;
         containerWidth: number;
         overflowTargetWidth: number;
-        selectedIds: import("./useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: import("react").MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -18,7 +33,7 @@ export declare const useOverflowListItemMeasure: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: import("react").RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: import("react").MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -49,10 +64,6 @@ export declare const useOverflowListItemMeasure: <P extends {}, R>(model: {
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -66,6 +77,10 @@ export declare const useOverflowListItemMeasure: <P extends {}, R>(model: {
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -76,11 +91,9 @@ export declare const useOverflowListItemMeasure: <P extends {}, R>(model: {
     selection: import("./useSelectionListModel").SelectionManager;
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, {
     ref: (instance: HTMLElement | null) => void;
     'aria-hidden': true | undefined;
     style: {};
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=useOverflowListItemMeasure.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useOverflowListItemMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListItemMeasure.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BtC,CAAC"}
+{"version":3,"file":"useOverflowListItemMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListItemMeasure.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BtC,CAAC"}

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

@@ -1,19 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverflowListItemMeasure = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var useOverflowListModel_1 = require("./useOverflowListModel");
-var hiddenStyles = {
+const common_1 = require("@workday/canvas-kit-react/common");
+const useOverflowListModel_1 = require("./useOverflowListModel");
+const hiddenStyles = {
     position: 'absolute',
     left: -99999,
 };
-exports.useOverflowListItemMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)(function (model, ref, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
-    var _a = common_1.useLocalRef(ref), elementRef = _a.elementRef, localRef = _a.localRef;
-    var name = elemProps['data-id'] || '';
-    common_1.useMountLayout(function () {
+/**
+ * This elemProps hook measures a list item and reports it to an `OverflowListModel`. This is used
+ * in overflow detection.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useOverflowListItemMeasure,
+ *   useListRegisterItem,
+ * )
+ * ```
+ */
+exports.useOverflowListItemMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)((model, ref, elemProps = {}) => {
+    const { elementRef, localRef } = common_1.useLocalRef(ref);
+    const name = elemProps['data-id'] || '';
+    common_1.useMountLayout(() => {
         if (localRef.current) {
-            var styles = getComputedStyle(localRef.current);
+            const styles = getComputedStyle(localRef.current);
             model.events.addItemWidth({
                 id: name,
                 width: localRef.current.offsetWidth +
@@ -21,11 +31,11 @@ exports.useOverflowListItemMeasure = common_1.createElemPropsHook(useOverflowLis
                     parseFloat(styles.marginRight),
             });
         }
-        return function () {
+        return () => {
             model.events.removeItemWidth({ id: name });
         };
     });
-    var hidden = model.state.hiddenIds.includes(name);
+    const hidden = model.state.hiddenIds.includes(name);
     return {
         ref: elementRef,
         'aria-hidden': hidden || undefined,

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

@@ -1,14 +1,22 @@
 import * as React from 'react';
-export declare const useOverflowListMeasure: <P extends {}, R>(model: {
+/**
+ * This elemProps hook measures a list and reports it to an `OverflowListModel`. This is used in
+ * overflow detection.
+ */
+export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         hiddenIds: string[];
         itemWidthCache: Record<string, number>;
         containerWidth: number;
         overflowTargetWidth: number;
-        selectedIds: import("./useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("./react-virtual").VirtualItem[];
             totalSize: number;
@@ -19,7 +27,7 @@ export declare const useOverflowListMeasure: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -50,10 +58,6 @@ export declare const useOverflowListMeasure: <P extends {}, R>(model: {
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -67,6 +71,10 @@ export declare const useOverflowListMeasure: <P extends {}, R>(model: {
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -77,9 +85,7 @@ export declare const useOverflowListMeasure: <P extends {}, R>(model: {
     selection: import("./useSelectionListModel").SelectionManager;
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    ref: (instance: HTMLElement | null) => void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
+}, {
+    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,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAalC,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/useOverflowListMeasure.js

@@ -20,16 +20,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverflowListMeasure = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useOverflowListModel_1 = require("./useOverflowListModel");
-exports.useOverflowListMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)(function (model, ref) {
-    var localRef = React.useRef(null);
-    var resizeRef = common_1.useResizeObserver({
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useOverflowListModel_1 = require("./useOverflowListModel");
+/**
+ * This elemProps hook measures a list and reports it to an `OverflowListModel`. This is used in
+ * overflow detection.
+ */
+exports.useOverflowListMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)((model, ref) => {
+    const localRef = React.useRef(null);
+    const { ref: resizeRef } = common_1.useResizeObserver({
         ref: localRef,
         onResize: model.events.setContainerWidth,
-    }).ref;
-    var elementRef = common_1.useForkRef(ref, resizeRef);
+    });
+    const elementRef = common_1.useForkRef(ref, resizeRef);
     return {
         ref: elementRef,
     };