@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/es6/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/es6/collection/lib/useListModel.js

@@ -1,10 +1,26 @@
 import { createModelHook } from '@workday/canvas-kit-react/common';
 import { useSelectionListModel } from './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,
@@ -13,8 +29,9 @@ import { useSelectionListModel } from './useSelectionListModel';
  *   items: [{ id: '1', text: 'First'}, { id: '2', text: 'Second' }],
  *   getId: item => item.id, // get the unique identifier of your item
  * })
+ * ```
  */
-export var useListModel = createModelHook({
+export const useListModel = createModelHook({
     defaultConfig: useSelectionListModel.defaultConfig,
     requiredConfig: useSelectionListModel.requiredConfig,
 })(useSelectionListModel);

package/dist/es6/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';
+/**
+ * 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/es6/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,GAC9E,KAAK,CAAC,SAAS,CAgCjB"}
+{"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/es6/collection/lib/useListRenderItem.js

@@ -1,24 +1,38 @@
 import React from '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>;
+ * });
+```
+ */
 export 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);
+            ? model.state.UNSTABLE_virtual.virtualItems.map(virtual => {
+                const item = model.state.items[virtual.index];
+                const child = children(item.value, virtual.index);
                 if (React.isValidElement(child)) {
                     return React.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,
+                        virtual,
                         key: item.id,
-                        item: item,
+                        item,
                     });
                 }
                 return child;
             })
-            : model.state.items.map(function (item) {
-                var child = children(item.value, item.index);
+            : model.state.items.map(item => {
+                const child = children(item.value, item.index);
                 if (React.isValidElement(child)) {
                     return React.cloneElement(child, {
                         key: item.id,

package/dist/es6/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/es6/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/es6/collection/lib/useListResetCursorOnBlur.js

@@ -1,24 +1,34 @@
 import React from 'react';
 import { createElemPropsHook } from '@workday/canvas-kit-react/common';
-import { orientationKeyMap } from './useListItemRovingFocus';
+import { orientationKeyMap } from './keyUtils';
 import { useListModel } from './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
+ * );
+```
  */
-export var useListResetCursorOnBlur = createElemPropsHook(useListModel)(function (_a) {
-    var state = _a.state, events = _a.events;
-    var programmaticFocusRef = React.useRef(false);
+export const useListResetCursorOnBlur = createElemPropsHook(useListModel)(({ state, events }) => {
+    const programmaticFocusRef = React.useRef(false);
     return {
-        onKeyDown: function (event) {
+        onKeyDown(event) {
             // Programmatic focus only on any focus change via keyboard
             if (Object.keys(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/es6/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/es6/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/es6/collection/lib/useOverflowListItemMeasure.js

@@ -1,16 +1,26 @@
 import { createElemPropsHook, useLocalRef, useMountLayout } from '@workday/canvas-kit-react/common';
 import { useOverflowListModel } from './useOverflowListModel';
-var hiddenStyles = {
+const hiddenStyles = {
     position: 'absolute',
     left: -99999,
 };
-export var useOverflowListItemMeasure = createElemPropsHook(useOverflowListModel)(function (model, ref, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
-    var _a = useLocalRef(ref), elementRef = _a.elementRef, localRef = _a.localRef;
-    var name = elemProps['data-id'] || '';
-    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,
+ * )
+ * ```
+ */
+export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListModel)((model, ref, elemProps = {}) => {
+    const { elementRef, localRef } = useLocalRef(ref);
+    const name = elemProps['data-id'] || '';
+    useMountLayout(() => {
         if (localRef.current) {
-            var styles = getComputedStyle(localRef.current);
+            const styles = getComputedStyle(localRef.current);
             model.events.addItemWidth({
                 id: name,
                 width: localRef.current.offsetWidth +
@@ -18,11 +28,11 @@ export var useOverflowListItemMeasure = createElemPropsHook(useOverflowListModel
                     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/es6/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/es6/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/es6/collection/lib/useOverflowListMeasure.js

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import { createElemPropsHook, useForkRef, useResizeObserver } from '@workday/canvas-kit-react/common';
 import { useOverflowListModel } from './useOverflowListModel';
-export var useOverflowListMeasure = createElemPropsHook(useOverflowListModel)(function (model, ref) {
-    var localRef = React.useRef(null);
-    var resizeRef = useResizeObserver({
+/**
+ * This elemProps hook measures a list and reports it to an `OverflowListModel`. This is used in
+ * overflow detection.
+ */
+export const useOverflowListMeasure = createElemPropsHook(useOverflowListModel)((model, ref) => {
+    const localRef = React.useRef(null);
+    const { ref: resizeRef } = useResizeObserver({
         ref: localRef,
         onResize: model.events.setContainerWidth,
-    }).ref;
-    var elementRef = useForkRef(ref, resizeRef);
+    });
+    const elementRef = useForkRef(ref, resizeRef);
     return {
         ref: elementRef,
     };