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

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

@@ -1 +1 @@
-{"version":3,"file":"useGridModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useGridModel.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;IAGrB;;;;;;;;;OASG;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH;;;;;;;;;OASG;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASL,CAAC"}
+{"version":3,"file":"useGridModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useGridModel.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;;;;;OASG;;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH;;;;;;;;;OASG;;;;;;;;;;;;;;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASL,CAAC"}

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

@@ -1,34 +1,17 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGridModel = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var useCursorListModel_1 = require("./useCursorListModel");
-var useListModel_1 = require("./useListModel");
-var _a = useListModel_1.useListModel.defaultConfig, columnCount = _a.columnCount, orientation = _a.orientation, defaultConfig = __rest(_a, ["columnCount", "orientation"]);
+const common_1 = require("@workday/canvas-kit-react/common");
+const useCursorListModel_1 = require("./useCursorListModel");
+const useListModel_1 = require("./useListModel");
+const { columnCount, orientation, ...defaultConfig } = useListModel_1.useListModel.defaultConfig;
+/**
+ * The Grid model extends the `ListModel` and changes some config. For example, the `columnCount` is
+ * required on the grid model's configuration and `orientation` is removed.
+ */
 exports.useGridModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign({}, defaultConfig), { 
+    defaultConfig: {
+        ...defaultConfig,
         /**
          * Controls the state changes when the user sends navigation events to the model. For example,
          * when the user hits the "right" arrow, a behavior hook will determine directionality
@@ -39,14 +22,17 @@ exports.useGridModel = common_1.createModelHook({
          * `getNext` will return the same item the cursor was previously on if the cursor is on the last
          * item of a row.
          */
-        navigation: useCursorListModel_1.navigationManager }),
-    requiredConfig: __assign({ 
+        navigation: useCursorListModel_1.navigationManager,
+    },
+    requiredConfig: {
         /**
          * The number of columns represented in a grid
          */
-        columnCount: 1 }, useListModel_1.useListModel.requiredConfig),
+        columnCount: 1,
+        ...useListModel_1.useListModel.requiredConfig,
+    },
     contextOverride: useListModel_1.useListModel.Context,
-})(function (config) {
-    var list = useListModel_1.useListModel(config);
+})(config => {
+    const list = useListModel_1.useListModel(config);
     return list;
 });

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

@@ -0,0 +1,68 @@
+/**
+ * This elemProps hook is used for cursor navigation by using [Active
+ * Descendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant).
+ * `aria-activedescendant` tells assistive technology which element has "focus" within the component
+ * while this single element maintains focus.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListActiveDescendant, // adds `aria-activedescendant` support
+ *   useListItemRegister
+ * );
+```
+ */
+export declare const useListActiveDescendant: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: import("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: import("react").RefObject<HTMLDivElement>;
+        id: string;
+        orientation: "horizontal" | "vertical";
+        indexRef: import("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;
+}, {
+    'aria-activedescendant': string | undefined;
+}>;
+//# sourceMappingURL=useListActiveDescendant.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListActiveDescendant.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListActiveDescendant.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMlC,CAAC"}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListActiveDescendant = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useCursorListModel_1 = require("./useCursorListModel");
+/**
+ * This elemProps hook is used for cursor navigation by using [Active
+ * Descendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant).
+ * `aria-activedescendant` tells assistive technology which element has "focus" within the component
+ * while this single element maintains focus.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListActiveDescendant, // adds `aria-activedescendant` support
+ *   useListItemRegister
+ * );
+```
+ */
+exports.useListActiveDescendant = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)(model => {
+    return {
+        'aria-activedescendant': model.state.cursorId
+            ? common_1.slugify(`${model.state.id}-${model.state.cursorId}`)
+            : undefined,
+    };
+});

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

@@ -0,0 +1,88 @@
+/**
+ * This elemProps hook allows for children values to be considered identifiers if the children are
+ * strings. This can be useful for autocomplete or select components that allow string values. This
+ * hook must be passed _after_ {@link useListItemRegister} because this hook sets the `data-id`
+ * attribute if one hasn't been defined by the application.
+ *
+ * An example might look like:
+ *
+ * ```tsx
+ * const useMyListItem = composeHooks(
+ *   // any other hooks here
+ *   useListItemSelect,
+ *   useListItemRegister,
+ *   useListItemAllowChildStrings // always the last in the list
+ * )
+ *
+ *
+ * <MyList onSelect={({id}) => {
+ *   console.log(id) // will be "First" or "Second"
+ * }}>
+ *   <MyList.Item>First</MyList.Item>
+ *   <MyList.Item>Second</MyList.Item>
+ * </MyList>
+ * ```
+ */
+export declare const useListItemAllowChildStrings: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        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;
+            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: import("react").RefObject<HTMLDivElement>;
+        id: string;
+        orientation: "horizontal" | "vertical";
+        indexRef: import("react").MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+    };
+    events: {
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        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;
+    };
+    selection: import("./useSelectionListModel").SelectionManager;
+    navigation: import("./useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}, {
+    'data-id'?: string | undefined;
+}>;
+//# sourceMappingURL=useListItemAllowChildStrings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemAllowChildStrings.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemAllowChildStrings.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASxC,CAAC"}

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListItemAllowChildStrings = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+/**
+ * This elemProps hook allows for children values to be considered identifiers if the children are
+ * strings. This can be useful for autocomplete or select components that allow string values. This
+ * hook must be passed _after_ {@link useListItemRegister} because this hook sets the `data-id`
+ * attribute if one hasn't been defined by the application.
+ *
+ * An example might look like:
+ *
+ * ```tsx
+ * const useMyListItem = composeHooks(
+ *   // any other hooks here
+ *   useListItemSelect,
+ *   useListItemRegister,
+ *   useListItemAllowChildStrings // always the last in the list
+ * )
+ *
+ *
+ * <MyList onSelect={({id}) => {
+ *   console.log(id) // will be "First" or "Second"
+ * }}>
+ *   <MyList.Item>First</MyList.Item>
+ *   <MyList.Item>Second</MyList.Item>
+ * </MyList>
+ * ```
+ */
+exports.useListItemAllowChildStrings = common_1.createElemPropsHook(collection_1.useListModel)((_, __, elemProps = {}) => {
+    const props = {};
+    if (!elemProps['data-id'] && typeof elemProps.children === 'string') {
+        props['data-id'] = elemProps.children;
+    }
+    return props;
+});

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

@@ -2,15 +2,28 @@ import React from 'react';
 import { Item } from './useBaseListModel';
 import { VirtualItem } from './react-virtual';
 /**
- * Registers an item with a list. It will return elemProps with a `data-id` which can be used by other
- * hooks to identify the item in the list.
+ * This elemProps hook is the base of all item component hooks. It registers an item with a
+ * collection and sets the `data-id` that is used by other hooks. It should always be the last
+ * defined hook when using `composeHooks` (`composeHooks` executes hooks right to left and merges
+ * props left to right). It is used by `ListBox.Item` and all `*.Item` subcomponents.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemSelect, // additional hooks go here
+ *   useListItemRegister // always last
+ * );
+ * ```
  */
-export declare const useListItemRegister: <P extends {}, R>(model: {
+export declare const useListItemRegister: 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: VirtualItem[];
             totalSize: number;
@@ -21,7 +34,7 @@ export declare const useListItemRegister: <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;
@@ -33,10 +46,6 @@ export declare const useListItemRegister: <P extends {}, R>(model: {
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -50,6 +59,10 @@ export declare const useListItemRegister: <P extends {}, R>(model: {
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -60,7 +73,7 @@ export declare const useListItemRegister: <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;
     'data-id': string;
     disabled: boolean | undefined;
@@ -69,7 +82,6 @@ export declare const useListItemRegister: <P extends {}, R>(model: {
     'aria-setsize': number | undefined;
     'aria-posinset': number | undefined;
     style: React.CSSProperties;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
+    id: string;
+}>;
 //# sourceMappingURL=useListItemRegister.d.ts.map

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;AAS3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmE/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2E/B,CAAC"}

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

@@ -4,29 +4,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListItemRegister = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useListModel_1 = require("./useListModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useListModel_1 = require("./useListModel");
 /**
- * Registers an item with a list. It will return elemProps with a `data-id` which can be used by other
- * hooks to identify the item in the list.
+ * This elemProps hook is the base of all item component hooks. It registers an item with a
+ * collection and sets the `data-id` that is used by other hooks. It should always be the last
+ * defined hook when using `composeHooks` (`composeHooks` executes hooks right to left and merges
+ * props left to right). It is used by `ListBox.Item` and all `*.Item` subcomponents.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemSelect, // additional hooks go here
+ *   useListItemRegister // always last
+ * );
+ * ```
  */
-exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useListModel)(function (_a, ref, elemProps) {
-    var _b, _c, _d;
-    var state = _a.state, events = _a.events, getId = _a.getId;
-    if (elemProps === void 0) { elemProps = {}; }
-    var _e = react_1.default.useState(elemProps['data-id'] || ((_b = elemProps.item) === null || _b === void 0 ? void 0 : _b.id) || ''), localId = _e[0], setLocalId = _e[1];
-    var _f = common_1.useLocalRef(common_1.useForkRef(ref, (_c = elemProps.virtual) === null || _c === void 0 ? void 0 : _c.measureRef)), localRef = _f.localRef, elementRef = _f.elementRef;
+exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useListModel)(({ state, events }, ref, elemProps = {}) => {
+    var _a, _b, _c;
+    const [localId, setLocalId] = react_1.default.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || '');
+    const { localRef, elementRef } = common_1.useLocalRef(common_1.useForkRef(ref, (_b = elemProps.virtual) === null || _b === void 0 ? void 0 : _b.measureRef));
     // if the list is virtual, force the correct styling. Without this, weird things happen...
-    var style = elemProps.virtual
+    const style = elemProps.virtual
         ? {
             position: 'absolute',
             top: 0,
             left: 0,
-            transform: "translateY(" + elemProps.virtual.start + "px)",
+            transform: `translateY(${elemProps.virtual.start}px)`,
         }
         : {};
-    common_1.useMountLayout(function () {
+    common_1.useMountLayout(() => {
         var _a, _b;
         if (((_a = elemProps.virtual) === null || _a === void 0 ? void 0 : _a.index) === 0 && ((_b = localRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) {
             // TODO: This update doesn't seem to be working correctly
@@ -36,21 +43,25 @@ exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useLis
         if (elemProps.item) {
             return;
         }
-        var defaultId = state.indexRef.current;
-        var itemId = localId || String(defaultId);
+        const defaultId = state.indexRef.current;
+        const itemId = localId || String(defaultId);
         // TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
         // bail early if item already exists. This happens if items were already provided.
-        if (state.items.find(function (item) { return getId(item) === itemId; })) {
+        if (state.items.find(item => item.id === itemId)) {
             return;
         }
         events.registerItem({
             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 function () {
+        return () => {
             events.unregisterItem({ id: itemId });
         };
     });
@@ -60,8 +71,9 @@ exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useLis
         disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
         item: null,
         virtual: null,
-        'aria-setsize': (_d = elemProps.virtual) === null || _d === void 0 ? void 0 : _d.size,
+        'aria-setsize': (_c = elemProps.virtual) === null || _c === void 0 ? void 0 : _c.size,
         'aria-posinset': elemProps.virtual ? elemProps.item.index + 1 : undefined,
-        style: style,
+        style,
+        id: common_1.slugify(`${state.id}-${localId}`),
     };
 });

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

@@ -1,36 +1,26 @@
 import React from 'react';
-export declare const orientationKeyMap: {
-    readonly horizontal: {
-        readonly ArrowLeft: "goToPrevious";
-        readonly Left: "goToPrevious";
-        readonly ArrowRight: "goToNext";
-        readonly Right: "goToNext";
-        readonly Home: "goToFirst";
-        readonly End: "goToLast";
-        readonly PageDown: "goToNextPage";
-        readonly PageUp: "goToPreviousPage";
-    };
-    readonly vertical: {
-        readonly ArrowUp: "goToPrevious";
-        readonly Up: "goToPrevious";
-        readonly ArrowDown: "goToNext";
-        readonly Down: "goToNext";
-        readonly Home: "goToFirst";
-        readonly End: "goToLast";
-        readonly PageDown: "goToNextPage";
-        readonly PageUp: "goToPreviousPage";
-    };
-};
 /**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item.
+ * 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
+ * collection has a tab stop. Pressing an arrow key moves the tab stop to a different item in the
+ * corresponding direction. See the [Roving Tabindex](#roving-tabindex) example. This elemProps hook
+ * should be applied to an `*.Item` component.
  *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemRovingFocus, // adds the roving tabindex support
+ *   useListItemRegister
+ * );
+```
  */
-export declare const useListItemRovingFocus: <P extends {}, R>(model: {
+export declare const useListItemRovingFocus: 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;
@@ -41,17 +31,13 @@ export declare const useListItemRovingFocus: <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;
         items: import("./useBaseListModel").Item<any>[];
     };
     events: {
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -65,6 +51,10 @@ export declare const useListItemRovingFocus: <P extends {}, R>(model: {
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -74,15 +64,10 @@ export declare const useListItemRovingFocus: <P extends {}, R>(model: {
     };
     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;
     onClick(): void;
     'data-focus-id': string;
     tabIndex: number;
-    ref: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
+}>;
 //# 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;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,mBAAmB;;;;;;;;;OA+CzC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiDZ,mBAAmB;;;;EAkBzC,CAAC"}