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

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

@@ -1 +1 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAM/D,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC/D;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC;AAWH;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKhB;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBL,CAAC"}
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAM,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAM3D,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5E;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOrB,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKhB;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBL,CAAC"}

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

@@ -1,45 +1,23 @@
 "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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListBox = exports.ListBoxItem = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var useListModel_1 = require("./useListModel");
-var useListRenderItem_1 = require("./useListRenderItem");
-var useListItemRegister_1 = require("./useListItemRegister");
+exports.ListBox = exports.useListBox = exports.ListBoxItem = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const useListModel_1 = require("./useListModel");
+const useListRenderItem_1 = require("./useListRenderItem");
+const useListItemRegister_1 = require("./useListItemRegister");
 exports.ListBoxItem = common_1.createSubcomponent('li')({
     displayName: 'Item',
     modelHook: useListModel_1.useListModel,
     elemPropsHook: useListItemRegister_1.useListItemRegister,
-})(function (elemProps, Element) {
-    return react_1.default.createElement(layout_1.Box, __assign({ as: Element }, elemProps));
+})((elemProps, Element) => {
+    return react_1.default.createElement(layout_1.Box, Object.assign({ as: Element }, elemProps));
 });
-var useListBox = common_1.createElemPropsHook(useListModel_1.useListModel)(function (model) {
+exports.useListBox = common_1.createElemPropsHook(useListModel_1.useListModel)(model => {
     return {
         style: {
             position: 'relative',
@@ -48,8 +26,17 @@ var useListBox = common_1.createElemPropsHook(useListModel_1.useListModel)(funct
     };
 });
 /**
- * Basic list box that supports virtualization. `ListBox.Item` contains a very simple list item
- * without much functionality. The `ListBox` contains two `Box` elements:
+ * The `ListBox` component that offers vertical rendering of a collection in the form of a
+ * 2-dimension list. It supports virtualization, rendering only visible items in the DOM while also
+ * providing aria attributes to allow screen readers to still navigate virtual lists. The `ListBox`
+ * contains a basic `ListBox.Item` that renders list items that render correctly with virtualization
+ * and adds `aria-setsize` and `aria-posinset` for screen readers.
+
+ * The `ListBox` is very basic and only adds enough functionality to render correctly. No additional
+ * behaviors are added to navigate or select. React Hooks are provided to add this functionality and
+ * are used by higher level components like `Menu` and `Menu.Item` which utilize `ListBox`. The
+ * `ListBox` contains two `Box` elements:
+ *
  * - Outer Box: Presentational container element responsible for overflow and height. `height` and
  *   `maxHeight` props will be applied here.
  * - Inner Box: The element responsible for the virtual container. Height is controlled by the model
@@ -58,18 +45,23 @@ var useListBox = common_1.createElemPropsHook(useListModel_1.useListModel)(funct
 exports.ListBox = common_1.createContainer('ul')({
     displayName: 'ListBox',
     modelHook: useListModel_1.useListModel,
-    elemPropsHook: useListBox,
+    elemPropsHook: exports.useListBox,
     subComponents: {
         /**
-         * Extremely simple ListBox item that contains no functionality other than registering items and
-         * adding aria virtualization attributes. If you need more functionality, create your own
-         * component using list item hooks.
+         * The `ListBox.Item` is a simple placeholder for listbox items. The functionality of a
+         * collection item varies between components. For example, a `Tabs.Item` and a `Menu.Item` have
+         * shared functionality, but have different behavior. All collection-based components should
+         * implement a custom `Item` subcomponent using the collection-based behavior hooks. The [Roving
+         * Tabindex](#roving-tabindex) example uses the `elemPropsHook` to provide additional
+         * functionality. `elemPropsHook` is provided on all compound components and is useful in the
+         * example to add additional functionality without making a new component.
          */
         Item: exports.ListBoxItem,
     },
-})(function (_a, Element, model) {
-    var height = _a.height, maxHeight = _a.maxHeight, elemProps = __rest(_a, ["height", "maxHeight"]);
+})(({ height, maxHeight, marginY, ...elemProps }, Element, model) => {
+    // We're moving `marginY` to the container to not interfere with the virtualization size. We set
+    // the `marginY` on the Flex to `0` to avoid inaccurate scrollbars
     // TODO figure out what style props should go to which `Box`
-    return (react_1.default.createElement(layout_1.Box, { ref: model.state.containerRef, height: height || model.state.isVirtualized ? model.state.UNSTABLE_virtual.totalSize : undefined, maxHeight: maxHeight, overflowY: model.state.orientation === 'vertical' ? 'auto' : undefined },
-        react_1.default.createElement(layout_1.Box, __assign({ as: Element }, elemProps), useListRenderItem_1.useListRenderItems(model, elemProps.children))));
+    return (react_1.default.createElement(layout_1.Box, { ref: model.state.containerRef, marginY: marginY, maxHeight: maxHeight, overflowY: model.state.orientation === 'vertical' ? 'auto' : undefined },
+        react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, flexDirection: "column" }, elemProps, { marginY: 0 }), useListRenderItem_1.useListRenderItems(model, elemProps.children))));
 });

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useCursorListModel } from './useCursorListModel';
+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";
+    };
+};
+export declare function keyboardEventToCursorEvents(event: React.KeyboardEvent, model: ReturnType<typeof useCursorListModel>, isRTL: boolean): boolean;
+//# sourceMappingURL=keyUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keyUtils.d.ts","sourceRoot":"","sources":["../../../../collection/lib/keyUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAExD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA8BX,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,KAAK,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAC5C,KAAK,EAAE,OAAO,GACb,OAAO,CA6BT"}

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyboardEventToCursorEvents = exports.orientationKeyMap = void 0;
+exports.orientationKeyMap = {
+    horizontal: {
+        ArrowLeft: 'goToPrevious',
+        Left: 'goToPrevious',
+        ArrowRight: 'goToNext',
+        Right: 'goToNext',
+        Home: 'goToFirst',
+        End: 'goToLast',
+        PageDown: 'goToNextPage',
+        PageUp: 'goToPreviousPage',
+    },
+    vertical: {
+        ArrowUp: 'goToPrevious',
+        Up: 'goToPrevious',
+        ArrowDown: 'goToNext',
+        Down: 'goToNext',
+        Home: 'goToFirst',
+        End: 'goToLast',
+        PageDown: 'goToNextPage',
+        PageUp: 'goToPreviousPage',
+    },
+};
+const rightToLeftMap = {
+    ArrowLeft: 'ArrowRight',
+    Left: 'Right',
+    ArrowRight: 'ArrowLeft',
+    Right: 'Left',
+    Home: 'Home',
+    End: 'End',
+    PageDown: 'PageDown',
+    PageUp: 'PageUp',
+};
+const gridKeyMap = {
+    ...exports.orientationKeyMap.horizontal,
+    Home: 'goToFirstOfRow',
+    End: 'goToLastOfRow',
+    ArrowUp: 'goToPreviousRow',
+    Up: 'goToPreviousRow',
+    ArrowDown: 'goToNextRow',
+    Down: 'goToNextRow',
+};
+const ctrlKeyMap = {
+    Home: 'goToFirst',
+    End: 'goToLast',
+};
+const hasOwnKey = (obj, key) => obj.hasOwnProperty(key);
+function keyboardEventToCursorEvents(event, model, isRTL) {
+    var _a, _b, _c, _d;
+    // Test ctrl key first
+    if (event.ctrlKey) {
+        for (const key in ctrlKeyMap) {
+            if (hasOwnKey(ctrlKeyMap, key)) {
+                if (event.key === key) {
+                    (_b = (_a = model.events)[ctrlKeyMap[key]]) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    return true;
+                }
+            }
+        }
+    }
+    // Try regular keys
+    const map = model.state.columnCount > 0 ? gridKeyMap : exports.orientationKeyMap[model.state.orientation];
+    for (const key in map) {
+        if (hasOwnKey(map, key)) {
+            if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
+                const eventName = model.state.columnCount > 0
+                    ? gridKeyMap[key]
+                    : exports.orientationKeyMap[model.state.orientation][key];
+                if (model.events[eventName]) {
+                    (_d = (_c = model.events)[eventName]) === null || _d === void 0 ? void 0 : _d.call(_c);
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}
+exports.keyboardEventToCursorEvents = keyboardEventToCursorEvents;

package/dist/commonjs/collection/lib/react-virtual.js

@@ -3,7 +3,7 @@
 // delete when `react-virtual` accepts this PR: https://github.com/TanStack/react-virtual/pull/277
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVirtual = exports.defaultRangeExtractor = void 0;
-var react_virtual_1 = require("react-virtual");
+const react_virtual_1 = require("react-virtual");
 Object.defineProperty(exports, "defaultRangeExtractor", { enumerable: true, get: function () { return react_virtual_1.defaultRangeExtractor; } });
-var useVirtual = react_virtual_1.useVirtual;
+const useVirtual = react_virtual_1.useVirtual;
 exports.useVirtual = useVirtual;

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

@@ -16,13 +16,18 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
     /** IDREF of the list. Children ids can be derived from this id */
     id: string;
     /**
-     * Optional function to return an id of an item. If not provided, the default function will return
-     * the `id` property from the object of each item. If you did not provide `items`, do not override
-     * this function. If you don't provided `items` and instead provide static items via JSX, the list
-     * will create an internal array of items where `id` is the only property and the default `getId`
-     * will return the desired result.
+     * Optional function to return an id of an item. If not provided, the default function will
+     * return the `id` property from the object of each item. If you did not provide `items`, do not
+     * override this function. If you don't provided `items` and instead provide static items via
+     * JSX, the list will create an internal array of items where `id` is the only property and the
+     * default `getId` will return the desired result.
      */
     getId: (item: Generic) => string;
+    /**
+     * Optional function to return the text representation of an item. If not provided, the default
+     * function will return the `text` property of the object of each item or an empty string if
+     * there is no `text` property. If you did not provide `items`, do not override this function.
+     */
     getTextValue: (item: Generic) => string;
     /**
      * Array of all ids which are currently disabled. This is used for navigation to skip over items
@@ -65,7 +70,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -84,7 +89,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -103,7 +108,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -124,7 +129,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -143,7 +148,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -162,7 +167,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -180,7 +185,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -216,17 +221,22 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         }): void;
     };
     getId: (item: Generic) => string;
-}) & import("../../common").ModelExtras<{
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
     /** IDREF of the list. Children ids can be derived from this id */
     id: string;
     /**
-     * Optional function to return an id of an item. If not provided, the default function will return
-     * the `id` property from the object of each item. If you did not provide `items`, do not override
-     * this function. If you don't provided `items` and instead provide static items via JSX, the list
-     * will create an internal array of items where `id` is the only property and the default `getId`
-     * will return the desired result.
+     * Optional function to return an id of an item. If not provided, the default function will
+     * return the `id` property from the object of each item. If you did not provide `items`, do not
+     * override this function. If you don't provided `items` and instead provide static items via
+     * JSX, the list will create an internal array of items where `id` is the only property and the
+     * default `getId` will return the desired result.
      */
     getId: (item: Generic) => string;
+    /**
+     * Optional function to return the text representation of an item. If not provided, the default
+     * function will return the `text` property of the object of each item or an empty string if
+     * there is no `text` property. If you did not provide `items`, do not override this function.
+     */
     getTextValue: (item: Generic) => string;
     /**
      * Array of all ids which are currently disabled. This is used for navigation to skip over items
@@ -265,7 +275,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
     UNSTABLE_defaultItemHeight: number;
     containerRef: React.RefObject<HTMLDivElement>;
     id: string;
-    orientation: Orientation;
+    orientation: "horizontal" | "vertical";
     indexRef: React.MutableRefObject<number>;
     nonInteractiveIds: string[];
     isVirtualized: boolean;
@@ -310,7 +320,7 @@ export declare const useBaseListModel: (<TT_Special_Generic>(config?: (Partial<{
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"useBaseListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useBaseListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAuC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAE/F,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD,eAAO,MAAM,YAAY,SAAU,GAAG,KAAG,MAGxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,GAAG,KAAG,MAE/C,CAAC;AAEF,MAAM,WAAW,IAAI,CAAC,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmDD,eAAO,MAAM,gBAAgB;IAGzB,kEAAkE;;IAElE;;;;;;OAMG;kBACW,OAAO;yBAEA,OAAO;IAC5B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;;;OAKG;;;IA1CL;;;;OAIG;WACI,OAAO,EAAE;;;cAgGY,OAAO;mBAAa,MAAM;;;;;;;;;;;;;;;;eArB1B,KAAK,OAAO,CAAC,EAAE;;;YAoCf,MAAM;;;;;;;;;;;;;;;;eApCN,KAAK,OAAO,CAAC,EAAE;;;eAuDV,MAAM;;;;;;;;;;;;;;;;eAvDX,KAAK,OAAO,CAAC,EAAE;;;;cAqBf,OAAO;mBAAa,MAAM;;;;;;;;;;;;;;;;eArB1B,KAAK,OAAO,CAAC,EAAE;;;YAoCf,MAAM;;;;;;;;;;;;;;;;eApCN,KAAK,OAAO,CAAC,EAAE;;;eAuDV,MAAM;;;;;;;;;;;;;;;;eAvDX,KAAK,OAAO,CAAC,EAAE;;;;;;;;;;;;;;;;;;eAAf,KAAK,OAAO,CAAC,EAAE;;;QAiBzC;;;WAGG;2BACgB;YAAC,IAAI,EAAE,OAAO,CAAC;YAAC,SAAS,EAAE,MAAM,CAAA;SAAC;QAWrD;;;WAGG;;gBACuB,MAAM;;QAUhC;;;;;;;;WAQG;+BACoB;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC;;kBAjHxB,OAAO;;IATrB,kEAAkE;;IAElE;;;;;;OAMG;kBACW,OAAO;yBAEA,OAAO;IAC5B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;;;OAKG;;;IA1CL;;;;OAIG;WACI,OAAO,EAAE;;;;;;;;;;;;;;;;WA2EY,KAAK,OAAO,CAAC,EAAE;;IAiBzC;;;OAGG;uBACgB;QAAC,IAAI,EAAE,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAC;IAWrD;;;OAGG;;YACuB,MAAM;;IAUhC;;;;;;;;OAQG;2BACoB;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC;;;;;;;;;;;;;;;;;eAvDZ,KAAK,OAAO,CAAC,EAAE;;;QAiBzC;;;WAGG;2BACgB;YAAC,IAAI,EAAE,OAAO,CAAC;YAAC,SAAS,EAAE,MAAM,CAAA;SAAC;QAWrD;;;WAGG;;gBACuB,MAAM;;QAUhC;;;;;;;;WAQG;+BACoB;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC;;kBAjHxB,OAAO;EAuHvB,CAAC"}
+{"version":3,"file":"useBaseListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useBaseListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAA+B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAEvF,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD,eAAO,MAAM,YAAY,SAAU,GAAG,KAAG,MAExC,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,GAAG,KAAG,MAE/C,CAAC;AAEF,MAAM,WAAW,IAAI,CAAC,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmDD,eAAO,MAAM,gBAAgB;IAGzB,kEAAkE;;IAElE;;;;;;OAMG;kBACW,OAAO;IAErB;;;;OAIG;yBACkB,OAAO;IAE5B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;;;OAKG;;;IAhDL;;;;OAIG;WACI,OAAO,EAAE;;;cA+GY,OAAO;mBAAa,MAAM;;;;;;;;;;;;;;;;eArB1B,KAAK,OAAO,CAAC,EAAE;;;YAoCf,MAAM;;;;;;;;;;;;;;;;eApCN,KAAK,OAAO,CAAC,EAAE;;;eAuDV,MAAM;;;;;;;;;;;;;;;;eAvDX,KAAK,OAAO,CAAC,EAAE;;;;cAqBf,OAAO;mBAAa,MAAM;;;;;;;;;;;;;;;;eArB1B,KAAK,OAAO,CAAC,EAAE;;;YAoCf,MAAM;;;;;;;;;;;;;;;;eApCN,KAAK,OAAO,CAAC,EAAE;;;eAuDV,MAAM;;;;;;;;;;;;;;;;eAvDX,KAAK,OAAO,CAAC,EAAE;;;;;;;;;;;;;;;;;;eAAf,KAAK,OAAO,CAAC,EAAE;;;QAiBzC;;;WAGG;2BACgB;YAAC,IAAI,EAAE,OAAO,CAAC;YAAC,SAAS,EAAE,MAAM,CAAA;SAAC;QAWrD;;;WAGG;;gBACuB,MAAM;;QAUhC;;;;;;;;WAQG;+BACoB;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC;;kBAhIxB,OAAO;;IATrB,kEAAkE;;IAElE;;;;;;OAMG;kBACW,OAAO;IAErB;;;;OAIG;yBACkB,OAAO;IAE5B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;;;OAKG;;;IAhDL;;;;OAIG;WACI,OAAO,EAAE;;;;;;;;;;;;;;;;WA0FY,KAAK,OAAO,CAAC,EAAE;;IAiBzC;;;OAGG;uBACgB;QAAC,IAAI,EAAE,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAC;IAWrD;;;OAGG;;YACuB,MAAM;;IAUhC;;;;;;;;OAQG;2BACoB;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC;;;;;;;;;;;;;;;;;eAvDZ,KAAK,OAAO,CAAC,EAAE;;;QAiBzC;;;WAGG;2BACgB;YAAC,IAAI,EAAE,OAAO,CAAC;YAAC,SAAS,EAAE,MAAM,CAAA;SAAC;QAWrD;;;WAGG;;gBACuB,MAAM;;QAUhC;;;;;;;;WAQG;+BACoB;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC;;kBAhIxB,OAAO;EAsIvB,CAAC"}

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

@@ -1,30 +1,18 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBaseListModel = exports.defaultGetTextValue = exports.defaultGetId = void 0;
-var react_1 = __importDefault(require("react"));
-var react_virtual_1 = require("./react-virtual");
-var common_1 = require("@workday/canvas-kit-react/common");
-var defaultGetId = function (item) {
-    common_1.assert(item.id, 'A list item must have an `id` field or a `getId` function defined');
-    return item.id;
+const react_1 = __importDefault(require("react"));
+const react_virtual_1 = require("./react-virtual");
+const common_1 = require("@workday/canvas-kit-react/common");
+const defaultGetId = (item) => {
+    return typeof item === 'string' ? item : item.id || '';
 };
 exports.defaultGetId = defaultGetId;
-var defaultGetTextValue = function (item) {
-    return item.text || '';
+const defaultGetTextValue = (item) => {
+    return typeof item === 'string' ? item : item.text || '';
 };
 exports.defaultGetTextValue = defaultGetTextValue;
 // interface Collection<T> {
@@ -59,90 +47,109 @@ exports.defaultGetTextValue = defaultGetTextValue;
 //   }
 // }
 // force Typescript to use `Generic` as a symbol
-var genericDefaultConfig = {
+const genericDefaultConfig = {
     items: [],
 };
 exports.useBaseListModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign({}, genericDefaultConfig), { 
+    defaultConfig: {
+        ...genericDefaultConfig,
         /** IDREF of the list. Children ids can be derived from this id */
-        id: '', 
+        id: '',
         /**
-         * Optional function to return an id of an item. If not provided, the default function will return
-         * the `id` property from the object of each item. If you did not provide `items`, do not override
-         * this function. If you don't provided `items` and instead provide static items via JSX, the list
-         * will create an internal array of items where `id` is the only property and the default `getId`
-         * will return the desired result.
+         * Optional function to return an id of an item. If not provided, the default function will
+         * return the `id` property from the object of each item. If you did not provide `items`, do not
+         * override this function. If you don't provided `items` and instead provide static items via
+         * JSX, the list will create an internal array of items where `id` is the only property and the
+         * default `getId` will return the desired result.
          */
-        getId: function (item) { return item.id; }, getTextValue: function (item) { return (item.text || ''); }, 
+        getId: (item) => typeof item === 'string' ? item : item === undefined ? '' : item.id,
+        /**
+         * Optional function to return the text representation of an item. If not provided, the default
+         * function will return the `text` property of the object of each item or an empty string if
+         * there is no `text` property. If you did not provide `items`, do not override this function.
+         */
+        getTextValue: (item) => (typeof item === 'string' ? item : item === undefined ? '' : item.text || ''),
         /**
          * Array of all ids which are currently disabled. This is used for navigation to skip over items
          * which are not focusable.
          */
-        nonInteractiveIds: [], 
+        nonInteractiveIds: [],
         /**
          * The orientation of a list of items. Values are either `vertical` or `horizontal`. This value will
          * effect which ids activate progression through a list. For example, `horizontal` will activate with
          * left and right arrows while `vertical` will activate with up and down arrows.
          * @default 'vertical'
          */
-        orientation: 'vertical', 
+        orientation: 'vertical',
         /**
          * Best guess to the default item height for virtualization. Getting this number correct
          * avoids a rerender while the list is initializing.
          *
          * @default 50
          */
-        defaultItemHeight: 50, shouldVirtualize: true }),
-})(function (config) {
+        defaultItemHeight: 50,
+        shouldVirtualize: true,
+    },
+})(config => {
     var _a;
-    var id = common_1.useUniqueId(config.id);
-    var getId = config.getId || exports.defaultGetId;
-    var getTextValue = config.getTextValue || exports.defaultGetTextValue;
-    var orientation = react_1.default.useState(config.orientation || 'vertical')[0];
-    var _b = react_1.default.useState(config.defaultItemHeight), UNSTABLE_defaultItemHeight = _b[0], setDefaultItemHeight = _b[1];
-    var isVirtualized = config.shouldVirtualize && !!((_a = config.items) === null || _a === void 0 ? void 0 : _a.length);
-    var indexRef = react_1.default.useRef(0);
-    var containerRef = react_1.default.useRef(null);
-    var items = react_1.default.useMemo(function () {
-        return (config.items || []).map(function (item, index) {
-            return {
-                id: getId(item),
-                index: index,
-                value: item,
-                textValue: getTextValue(item),
-            };
-        });
-    }, [config.items, getId, getTextValue]);
-    var _c = react_1.default.useState([]), staticItems = _c[0], setStaticItems = _c[1];
-    var UNSTABLE_virtual = react_virtual_1.useVirtual({
+    const id = common_1.useUniqueId(config.id);
+    // Optimization to not redo items when `getId` and `getTextValue` references change. They will not
+    // likely change during the lifecycle and we don't want to recalculate items when a lamba is
+    // passed instead of a stable reference.
+    const getIdRef = react_1.default.useRef(exports.defaultGetId);
+    const getTextValueRef = react_1.default.useRef(exports.defaultGetTextValue);
+    const getId = config.getId || exports.defaultGetId;
+    const getTextValue = config.getTextValue || exports.defaultGetTextValue;
+    getIdRef.current = getId;
+    getTextValueRef.current = getTextValue;
+    const [orientation] = react_1.default.useState(config.orientation || 'vertical');
+    const [UNSTABLE_defaultItemHeight, setDefaultItemHeight] = react_1.default.useState(config.defaultItemHeight);
+    const isVirtualized = config.shouldVirtualize && !!((_a = config.items) === null || _a === void 0 ? void 0 : _a.length);
+    const indexRef = react_1.default.useRef(0);
+    const containerRef = react_1.default.useRef(null);
+    const items = react_1.default.useMemo(() => (config.items || []).map((item, index) => {
+        return {
+            id: getIdRef.current(item),
+            index,
+            value: item,
+            textValue: getTextValueRef.current(item),
+        };
+    }), [config.items]);
+    const [staticItems, setStaticItems] = react_1.default.useState([]);
+    const UNSTABLE_virtual = react_virtual_1.useVirtual({
         size: items.length,
         parentRef: containerRef,
-        estimateSize: react_1.default.useCallback(function () { return UNSTABLE_defaultItemHeight; }, [UNSTABLE_defaultItemHeight]),
+        estimateSize: react_1.default.useCallback(() => UNSTABLE_defaultItemHeight, [UNSTABLE_defaultItemHeight]),
         horizontal: config.orientation === 'horizontal',
-        overscan: 3,
+        overscan: 3, // overscan of 3 helps rapid navigation
     });
     // Force Typescript to recognize the `Generic` symbol
-    var genericState = {
+    const genericState = {
         items: items.length ? items : staticItems,
     };
-    var state = __assign(__assign({}, genericState), { UNSTABLE_virtual: UNSTABLE_virtual,
-        UNSTABLE_defaultItemHeight: UNSTABLE_defaultItemHeight,
-        containerRef: containerRef,
-        id: id,
-        orientation: orientation,
-        indexRef: indexRef, nonInteractiveIds: config.nonInteractiveIds || [], isVirtualized: isVirtualized });
-    var events = {
+    const state = {
+        ...genericState,
+        UNSTABLE_virtual,
+        UNSTABLE_defaultItemHeight,
+        containerRef,
+        id,
+        orientation,
+        indexRef,
+        nonInteractiveIds: config.nonInteractiveIds || [],
+        isVirtualized,
+    };
+    const events = {
         /**
          * Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This
          * should be called on component mount. This event is only called for static rendering.
          */
-        registerItem: function (data) {
+        registerItem(data) {
             indexRef.current++;
-            setStaticItems(function (items) {
+            setStaticItems(items => {
                 return items.concat({
                     id: getId(data.item),
                     value: data.item,
-                    index: items.length - 1,
+                    index: items.length,
                     textValue: data.textValue,
                 });
             });
@@ -151,11 +158,11 @@ exports.useBaseListModel = common_1.createModelHook({
          * Unregister an item by its identifier. This should be called when the component is unmounted.
          * This event is only called for static rendering.
          */
-        unregisterItem: function (data) {
-            setStaticItems(function (items) {
+        unregisterItem(data) {
+            setStaticItems(items => {
                 // this extra `if` ensures reference stability for no-ops
-                if (items.find(function (item) { return getId(item.value) === data.id; })) {
-                    return items.filter(function (item) { return getId(item.value) !== data.id; });
+                if (items.find(item => getId(item.value) === data.id)) {
+                    return items.filter(item => getId(item.value) !== data.id);
                 }
                 else {
                     return items;
@@ -171,9 +178,9 @@ exports.useBaseListModel = common_1.createModelHook({
          * "detached" since the browser recalculates scroll bar position while the overflow container is
          * updated.
          */
-        updateItemHeight: function (data) {
+        updateItemHeight(data) {
             setDefaultItemHeight(data.value);
         },
     };
-    return { state: state, events: events, getId: getId };
+    return { state, events, getId };
 });