@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

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

@@ -0,0 +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"}

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

@@ -0,0 +1,69 @@
+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;
+};
+import React from 'react';
+import { createContainer, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
+import { useListModel } from './useListModel';
+import { useListRenderItems } from './useListRenderItem';
+import { useListItemRegister } from './useListItemRegister';
+export var ListBoxItem = createSubcomponent('li')({
+    displayName: 'Item',
+    modelHook: useListModel,
+    elemPropsHook: useListItemRegister,
+})(function (elemProps, Element) {
+    return React.createElement(Box, __assign({ as: Element }, elemProps));
+});
+var useListBox = createElemPropsHook(useListModel)(function (model) {
+    return {
+        style: {
+            position: 'relative',
+            height: model.state.isVirtualized ? model.state.UNSTABLE_virtual.totalSize : undefined,
+        },
+    };
+});
+/**
+ * Basic list box that supports virtualization. `ListBox.Item` contains a very simple list item
+ * without much functionality. 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
+ *   and cannot be changed by the developer. All props and ref will be spread to this element.
+ */
+export var ListBox = createContainer('ul')({
+    displayName: 'ListBox',
+    modelHook: useListModel,
+    elemPropsHook: 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.
+         */
+        Item: ListBoxItem,
+    },
+})(function (_a, Element, model) {
+    var height = _a.height, maxHeight = _a.maxHeight, elemProps = __rest(_a, ["height", "maxHeight"]);
+    // TODO figure out what style props should go to which `Box`
+    return (React.createElement(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.createElement(Box, __assign({ as: Element }, elemProps), useListRenderItems(model, elemProps.children))));
+});

package/dist/es6/collection/lib/react-virtual.d.ts

@@ -0,0 +1,53 @@
+import { defaultRangeExtractor } from 'react-virtual';
+declare type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
+export interface ScrollToOptions {
+    align: ScrollAlignment;
+}
+export interface ScrollToOffsetOptions extends ScrollToOptions {
+}
+export interface ScrollToIndexOptions extends ScrollToOptions {
+}
+declare type Key = number | string;
+export declare type VirtualItem = {
+    key: Key;
+    index: number;
+    start: number;
+    end: number;
+    size: number;
+    measureRef: (el: HTMLElement | null) => void;
+};
+export interface Range {
+    start: number;
+    end: number;
+    overscan: number;
+    size: number;
+}
+interface Rect {
+    width: number;
+    height: number;
+}
+export interface Options<T> {
+    size: number;
+    parentRef: React.RefObject<T>;
+    estimateSize?: (index: number) => number;
+    overscan?: number;
+    horizontal?: boolean;
+    scrollToFn?: (offset: number, defaultScrollToFn?: (offset: number) => void) => void;
+    paddingStart?: number;
+    paddingEnd?: number;
+    useObserver?: (ref: React.RefObject<T>, initialRect?: Rect) => Rect;
+    initialRect?: Rect;
+    keyExtractor?: (index: number) => Key;
+    onScrollElement?: React.RefObject<HTMLElement>;
+    scrollOffsetFn?: (event?: Event) => number;
+    rangeExtractor?: (range: Range) => number[];
+}
+declare const useVirtual: <T>(options: Options<T>) => {
+    virtualItems: VirtualItem[];
+    totalSize: number;
+    scrollToOffset: (index: number, options?: ScrollToOffsetOptions | undefined) => void;
+    scrollToIndex: (index: number, options?: ScrollToIndexOptions | undefined) => void;
+    measure: () => void;
+};
+export { defaultRangeExtractor, useVirtual };
+//# sourceMappingURL=react-virtual.d.ts.map

package/dist/es6/collection/lib/react-virtual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-virtual.d.ts","sourceRoot":"","sources":["../../../../collection/lib/react-virtual.ts"],"names":[],"mappings":"AAGA,OAAO,EAAuC,qBAAqB,EAAC,MAAM,eAAe,CAAC;AAE1F,aAAK,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,eAAe;CAAG;AACjE,MAAM,WAAW,oBAAqB,SAAQ,eAAe;CAAG;AAEhE,aAAK,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3B,oBAAY,WAAW,GAAG;IACxB,GAAG,EAAE,GAAG,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,OAAO,CAAC,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;IACpF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACpE,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;IACtC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,MAAM,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,EAAE,CAAC;CAC7C;AAED,QAAA,MAAM,UAAU;kBAGA,WAAW,EAAE;eAChB,MAAM;4BACO,MAAM,kDAAsC,IAAI;2BACjD,MAAM,iDAAqC,IAAI;aAC7D,MAAM,IAAI;CACpB,CAAC;AAEF,OAAO,EAAC,qBAAqB,EAAE,UAAU,EAAC,CAAC"}

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

@@ -0,0 +1,5 @@
+// retype interfaces
+// delete when `react-virtual` accepts this PR: https://github.com/TanStack/react-virtual/pull/277
+import { useVirtual as useVirtualReactVirtual, defaultRangeExtractor } from 'react-virtual';
+var useVirtual = useVirtualReactVirtual;
+export { defaultRangeExtractor, useVirtual };

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

@@ -0,0 +1,350 @@
+import React from 'react';
+import { Generic } from '@workday/canvas-kit-react/common';
+export declare type Orientation = 'horizontal' | 'vertical';
+export declare const defaultGetId: (item: any) => string;
+export declare const defaultGetTextValue: (item: any) => string;
+export interface Item<T> {
+    index: number;
+    id: string;
+    value: T;
+    /**
+     * Used by components that allow jumping to an item based on typing
+     */
+    textValue?: string;
+}
+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.
+     */
+    getId: (item: Generic) => string;
+    getTextValue: (item: Generic) => string;
+    /**
+     * Array of all ids which are currently disabled. This is used for navigation to skip over items
+     * which are not focusable.
+     */
+    nonInteractiveIds: string[];
+    /**
+     * 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: Orientation;
+    /**
+     * Best guess to the default item height for virtualization. Getting this number correct
+     * avoids a rerender while the list is initializing.
+     *
+     * @default 50
+     */
+    defaultItemHeight: number;
+    shouldVirtualize: boolean;
+    /**
+     * Optional array of items. If provided, use a render prop for list children instead of static
+     * children. If the shape of each item object does not have an `id` property or uses a different
+     * property to uniquely identify each item, a `getId` must also be supplied.
+     */
+    items: Generic[];
+}> & {
+    onRegisterItem?: ((data: {
+        item: Generic;
+        textValue: string;
+    }, prevState: {
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: Item<Generic>[];
+    }) => void) | undefined;
+    onUnregisterItem?: ((data: {
+        id: string;
+    }, prevState: {
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: Item<Generic>[];
+    }) => void) | undefined;
+    onUpdateItemHeight?: ((data: {
+        value: number;
+    }, prevState: {
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: Item<Generic>[];
+    }) => void) | undefined;
+} & {
+    shouldRegisterItem?: ((data: {
+        item: Generic;
+        textValue: string;
+    }, state: {
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: Item<Generic>[];
+    }) => boolean) | undefined;
+    shouldUnregisterItem?: ((data: {
+        id: string;
+    }, state: {
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: Item<Generic>[];
+    }) => boolean) | undefined;
+    shouldUpdateItemHeight?: ((data: {
+        value: number;
+    }, state: {
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: Item<Generic>[];
+    }) => boolean) | undefined;
+}) | undefined) => {
+    state: {
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: Item<Generic>[];
+    };
+    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(data: {
+            item: Generic;
+            textValue: string;
+        }): void;
+        /**
+         * Unregister an item by its identifier. This should be called when the component is unmounted.
+         * This event is only called for static rendering.
+         */
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        /**
+         * Updates the default item height. This should only be called when item height is measured.
+         * Calling this with a different default item height than previous will cause a virtual list to
+         * recalculate the overall height of the list and invalidate any height caching. Doing this only
+         * on the first item may save the user from experiencing odd scrolling behavior where the
+         * scrollbar updates while scrolling. If the user uses the mouse to drag the bar, it can become
+         * "detached" since the browser recalculates scroll bar position while the overflow container is
+         * updated.
+         */
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    getId: (item: Generic) => string;
+}) & import("../../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.
+     */
+    getId: (item: Generic) => string;
+    getTextValue: (item: Generic) => string;
+    /**
+     * Array of all ids which are currently disabled. This is used for navigation to skip over items
+     * which are not focusable.
+     */
+    nonInteractiveIds: string[];
+    /**
+     * 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: Orientation;
+    /**
+     * Best guess to the default item height for virtualization. Getting this number correct
+     * avoids a rerender while the list is initializing.
+     *
+     * @default 50
+     */
+    defaultItemHeight: number;
+    shouldVirtualize: boolean;
+    /**
+     * Optional array of items. If provided, use a render prop for list children instead of static
+     * children. If the shape of each item object does not have an `id` property or uses a different
+     * property to uniquely identify each item, a `getId` must also be supplied.
+     */
+    items: Generic[];
+}, {}, {
+    UNSTABLE_virtual: {
+        virtualItems: import("./react-virtual").VirtualItem[];
+        totalSize: number;
+        scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+        scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+        measure: () => void;
+    };
+    UNSTABLE_defaultItemHeight: number;
+    containerRef: React.RefObject<HTMLDivElement>;
+    id: string;
+    orientation: Orientation;
+    indexRef: React.MutableRefObject<number>;
+    nonInteractiveIds: string[];
+    isVirtualized: boolean;
+    items: Item<Generic>[];
+}, {
+    /**
+     * 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(data: {
+        item: Generic;
+        textValue: string;
+    }): void;
+    /**
+     * Unregister an item by its identifier. This should be called when the component is unmounted.
+     * This event is only called for static rendering.
+     */
+    unregisterItem(data: {
+        id: string;
+    }): void;
+    /**
+     * Updates the default item height. This should only be called when item height is measured.
+     * Calling this with a different default item height than previous will cause a virtual list to
+     * recalculate the overall height of the list and invalidate any height caching. Doing this only
+     * on the first item may save the user from experiencing odd scrolling behavior where the
+     * scrollbar updates while scrolling. If the user uses the mouse to drag the bar, it can become
+     * "detached" since the browser recalculates scroll bar position while the overflow container is
+     * updated.
+     */
+    updateItemHeight(data: {
+        value: number;
+    }): void;
+}, {
+    state: {
+        UNSTABLE_virtual: {
+            virtualItems: import("./react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: Item<Generic>[];
+    };
+    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(data: {
+            item: Generic;
+            textValue: string;
+        }): void;
+        /**
+         * Unregister an item by its identifier. This should be called when the component is unmounted.
+         * This event is only called for static rendering.
+         */
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        /**
+         * Updates the default item height. This should only be called when item height is measured.
+         * Calling this with a different default item height than previous will cause a virtual list to
+         * recalculate the overall height of the list and invalidate any height caching. Doing this only
+         * on the first item may save the user from experiencing odd scrolling behavior where the
+         * scrollbar updates while scrolling. If the user uses the mouse to drag the bar, it can become
+         * "detached" since the browser recalculates scroll bar position while the overflow container is
+         * updated.
+         */
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    getId: (item: Generic) => string;
+}>;
+//# sourceMappingURL=useBaseListModel.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,171 @@
+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);
+};
+import React from 'react';
+import { useVirtual } from './react-virtual';
+import { useUniqueId, assert, createModelHook } from '@workday/canvas-kit-react/common';
+export var defaultGetId = function (item) {
+    assert(item.id, 'A list item must have an `id` field or a `getId` function defined');
+    return item.id;
+};
+export var defaultGetTextValue = function (item) {
+    return item.text || '';
+};
+// interface Collection<T> {
+//   getKeys(): string[];
+//   getItem(id: string): Item<T> | null;
+//   at(index: number): Item<T> | null;
+//   size: number;
+// }
+// TODO: Build an interface that allows representation of different collections. For example an array and a dynamically loaded dataset
+// class StaticCollection<T> implements Collection<T> {
+//   // eslint-disable-next-line no-empty-function
+//   private items: Item<T>[];
+//   constructor(items: T[], getId = defaultGetId, getTextValue = defaultGetTextValue) {
+//     this.items = items.map((item, index) => ({
+//       index,
+//       value: item,
+//       id: getId(item),
+//       textValue: getTextValue(item),
+//     }));
+//   }
+//   getKeys() {
+//     return this.items.map(item => item.id);
+//   }
+//   getItem(id: string) {
+//     return this.items.find(item => item.id === id) || null;
+//   }
+//   at(index: number) {
+//     return this.items[index] || null;
+//   }
+//   get size() {
+//     return this.items.length;
+//   }
+// }
+// force Typescript to use `Generic` as a symbol
+var genericDefaultConfig = {
+    items: [],
+};
+export var useBaseListModel = createModelHook({
+    defaultConfig: __assign(__assign({}, genericDefaultConfig), { 
+        /** IDREF of the list. Children ids can be derived from this 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.
+         */
+        getId: function (item) { return item.id; }, getTextValue: function (item) { return (item.text || ''); }, 
+        /**
+         * Array of all ids which are currently disabled. This is used for navigation to skip over items
+         * which are not focusable.
+         */
+        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', 
+        /**
+         * 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) {
+    var _a;
+    var id = useUniqueId(config.id);
+    var getId = config.getId || defaultGetId;
+    var getTextValue = config.getTextValue || defaultGetTextValue;
+    var orientation = React.useState(config.orientation || 'vertical')[0];
+    var _b = React.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.useRef(0);
+    var containerRef = React.useRef(null);
+    var items = React.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.useState([]), staticItems = _c[0], setStaticItems = _c[1];
+    var UNSTABLE_virtual = useVirtual({
+        size: items.length,
+        parentRef: containerRef,
+        estimateSize: React.useCallback(function () { return UNSTABLE_defaultItemHeight; }, [UNSTABLE_defaultItemHeight]),
+        horizontal: config.orientation === 'horizontal',
+        overscan: 3,
+    });
+    // Force Typescript to recognize the `Generic` symbol
+    var 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 = {
+        /**
+         * 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) {
+            indexRef.current++;
+            setStaticItems(function (items) {
+                return items.concat({
+                    id: getId(data.item),
+                    value: data.item,
+                    index: items.length - 1,
+                    textValue: data.textValue,
+                });
+            });
+        },
+        /**
+         * 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) {
+                // 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; });
+                }
+                else {
+                    return items;
+                }
+            });
+        },
+        /**
+         * Updates the default item height. This should only be called when item height is measured.
+         * Calling this with a different default item height than previous will cause a virtual list to
+         * recalculate the overall height of the list and invalidate any height caching. Doing this only
+         * on the first item may save the user from experiencing odd scrolling behavior where the
+         * scrollbar updates while scrolling. If the user uses the mouse to drag the bar, it can become
+         * "detached" since the browser recalculates scroll bar position while the overflow container is
+         * updated.
+         */
+        updateItemHeight: function (data) {
+            setDefaultItemHeight(data.value);
+        },
+    };
+    return { state: state, events: events, getId: getId };
+});