@workday/canvas-kit-react 10.0.0-alpha.540-next.0 → 10.0.0-alpha.546-next.0

package/dist/es6/combobox/lib/ComboboxPopper.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+export declare const useMenuPopper: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, {
+    open: boolean;
+    anchorElement: React.RefObject<HTMLButtonElement>;
+    ref: (instance: unknown) => void;
+    onPlacementChange: (placement: import("@popperjs/core").Placement) => void;
+}>;
+export declare const ComboboxMenuPopper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-react/popup").PopperProps & React.RefAttributes<HTMLDivElement>, {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("../..").Item<any>[];
+        mode: "multiple" | "single";
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        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("../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}>;
+//# sourceMappingURL=ComboboxPopper.d.ts.map

package/dist/es6/combobox/lib/ComboboxPopper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxPopper.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;EAAiB,CAAC;AAE5C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAU7B,CAAC"}

package/dist/es6/combobox/lib/ComboboxPopper.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { usePopupPopper } from '@workday/canvas-kit-react/popup';
+import { Menu, useMenuModel } from '@workday/canvas-kit-react/menu';
+export const useMenuPopper = usePopupPopper;
+export const ComboboxMenuPopper = createSubcomponent('div')({
+    displayName: 'Combobox.Menu.Popper',
+    modelHook: useMenuModel,
+    elemPropsHook: useMenuPopper,
+})(({ children, ...elemProps }) => {
+    return (React.createElement(Menu.Popper, Object.assign({ fallbackPlacements: ['top', 'bottom'] }, elemProps), children));
+});

package/dist/es6/combobox/lib/hooks/index.d.ts

@@ -0,0 +1,10 @@
+export * from './useComboboxInputOpenWithArrowKeys';
+export * from './useComboboxLoader';
+export * from './useComboboxModel';
+export * from './useComboboxMoveCursorToSelected';
+export * from './useSetPopupWidth';
+export * from './useComboboxKeyboardTypeAhead';
+export * from './useComboboxListKeyboardHandler';
+export * from './useComboboxInput';
+export * from './useComboboxResetCursorToSelected';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/combobox/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oBAAoB,CAAC;AACnC,cAAc,oCAAoC,CAAC"}

package/dist/es6/combobox/lib/hooks/index.js

@@ -0,0 +1,9 @@
+export * from './useComboboxInputOpenWithArrowKeys';
+export * from './useComboboxLoader';
+export * from './useComboboxModel';
+export * from './useComboboxMoveCursorToSelected';
+export * from './useSetPopupWidth';
+export * from './useComboboxKeyboardTypeAhead';
+export * from './useComboboxListKeyboardHandler';
+export * from './useComboboxInput';
+export * from './useComboboxResetCursorToSelected';

package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts

@@ -0,0 +1,107 @@
+import React from 'react';
+/**
+ * `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
+ * menu with arrow keys, uses {@link useListActiveDescendant}, and handles keyboard arrows to
+ * navigate items of the menu. You may also compose this hook to add more specific behaviors for
+ * your {@link ComboboxInput Combobox.Input}.
+ */
+export declare const useComboboxInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("../../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        mode: "multiple" | "single";
+        value: string | undefined;
+        inputRef: React.RefObject<HTMLInputElement>;
+        width: number;
+    };
+    events: {
+        setWidth(width: number): void;
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        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;
+    };
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    selection: import("../../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}, {
+    readonly onKeyDown: (event: React.KeyboardEvent) => void;
+    readonly onBlur: (event: React.FocusEvent) => void;
+    readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly onClick: (event: React.MouseEvent) => void;
+    readonly value: string | undefined;
+    readonly role: "combobox";
+    readonly 'aria-haspopup': true;
+    readonly 'aria-expanded': boolean;
+    readonly 'aria-autocomplete': "list";
+    readonly 'aria-controls': `${string}-list`;
+    readonly id: string;
+    readonly ref: (instance: unknown) => void;
+} & {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+} & {
+    'aria-activedescendant': string | undefined;
+} & {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+} & {
+    ref: (instance: unknown) => void;
+    onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
+}>;
+//# sourceMappingURL=useComboboxInput.d.ts.map

package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA6BN,mBAAmB;6BActB,gBAAgB;;8BAIf,gBAAgB;;;;;;;;;;;;;;;;;;EAoBpC,CAAC"}

package/dist/es6/combobox/lib/hooks/useComboboxInput.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { composeHooks, createElemPropsHook, useForkRef } from '@workday/canvas-kit-react/common';
+import { usePopupTarget } from '@workday/canvas-kit-react/popup';
+import { useListActiveDescendant } from '@workday/canvas-kit-react/collection';
+import { useComboboxModel, useComboboxInputOpenWithArrowKeys, useSetPopupWidth, useComboboxListKeyboardHandler, } from './index';
+/**
+ * `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
+ * menu with arrow keys, uses {@link useListActiveDescendant}, and handles keyboard arrows to
+ * navigate items of the menu. You may also compose this hook to add more specific behaviors for
+ * your {@link ComboboxInput Combobox.Input}.
+ */
+export const useComboboxInput = composeHooks(createElemPropsHook(useComboboxModel)((model, ref) => {
+    const elementRef = useForkRef(ref, model.state.inputRef);
+    React.useEffect(() => {
+        var _a;
+        if (model.state.cursorId && model.state.visibility === 'visible') {
+            const item = model.navigation.getItem(model.state.cursorId, model);
+            if (model.state.isVirtualized && item) {
+                model.state.UNSTABLE_virtual.scrollToIndex(item.index);
+            }
+            else {
+                const listboxId = (_a = model.state.inputRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-controls');
+                if (listboxId) {
+                    const menuItem = document.querySelector(`[id="${listboxId}"] [data-id="${model.state.cursorId}"]`);
+                    if (menuItem) {
+                        requestAnimationFrame(() => {
+                            menuItem.scrollIntoView({ block: 'nearest' });
+                        });
+                    }
+                }
+            }
+        }
+        // we only want to run this effect if the cursor, visibility and selectedIds change and not any other time
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [model.state.cursorId, model.state.selectedIds, model.state.visibility]);
+    return {
+        onKeyDown(event) {
+            if (event.key === 'Enter' && !event.metaKey && model.state.visibility === 'visible') {
+                const element = document.querySelector(`[data-id="${model.state.cursorId}"]`);
+                if (element && (element === null || element === void 0 ? void 0 : element.getAttribute('aria-disabled')) !== 'true') {
+                    model.events.select({ id: model.state.cursorId });
+                    if (model.state.mode === 'single') {
+                        model.events.hide(event);
+                    }
+                }
+                // We don't want to submit forms while the combobox is open
+                event.preventDefault();
+            }
+        },
+        onBlur(event) {
+            model.events.hide(event);
+        },
+        onChange: model.onChange,
+        onClick(event) {
+            if (model.state.visibility === 'hidden') {
+                model.events.setWidth(event.currentTarget.clientWidth);
+            }
+        },
+        value: model.state.value,
+        role: 'combobox',
+        'aria-haspopup': true,
+        'aria-expanded': model.state.visibility === 'visible',
+        'aria-autocomplete': 'list',
+        'aria-controls': `${model.state.id}-list`,
+        id: model.state.id,
+        ref: elementRef,
+    };
+}), useSetPopupWidth, useComboboxInputOpenWithArrowKeys, useListActiveDescendant, useComboboxListKeyboardHandler, usePopupTarget);

package/dist/{commonjs/combobox/lib → es6/combobox/lib/hooks}/useComboboxInputOpenWithArrowKeys.d.ts

@@ -20,10 +20,10 @@ export declare const useComboboxInputOpenWithArrowKeys: import("@workday/canvas-
             readonly current: number;
         };
         UNSTABLE_virtual: {
-            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+            virtualItems: import("../../../collection/lib/react-virtual").VirtualItem[];
             totalSize: number;
-            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
-            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            scrollToOffset: (index: number, options?: import("../../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
             measure: () => void;
         };
         UNSTABLE_defaultItemHeight: number;
@@ -32,7 +32,7 @@ export declare const useComboboxInputOpenWithArrowKeys: import("@workday/canvas-
         indexRef: import("react").MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("../..").Item<any>[];
+        items: import("../../..").Item<any>[];
         mode: "multiple" | "single";
         value: string | undefined;
         inputRef: import("react").RefObject<HTMLInputElement>;
@@ -75,8 +75,8 @@ export declare const useComboboxInputOpenWithArrowKeys: import("@workday/canvas-
         }): void;
     };
     onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
-    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
-    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+    selection: import("../../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, {
     onKeyDown(event: React.KeyboardEvent): void;

package/dist/es6/combobox/lib/hooks/useComboboxInputOpenWithArrowKeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxInputOpenWithArrowKeys.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxInputOpenWithArrowKeys.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAEzB,mBAAmB;EAUtC,CAAC"}

package/dist/es6/combobox/lib/hooks/useComboboxKeyboardTypeAhead.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+/**
+ * `useComboboxKeyboardTypeAhead` handles type-ahead. It will try and find a matching item in the list. It also returns the keys types so far.
+ * This hook is best used when composing hooks and in conjunction with `useComboboxInput`.
+ *
+ * ```tsx
+ * // Example for a `Select` input
+ * export const useSelectInput = composeHooks(
+ * createElemPropsHook(useComboboxModel)((model, ref, elemProps: {keySofar?: string} = {}) => {
+ *  return {
+ *    onKeyDown(event: React.KeyboardEvent) {
+ *     // onKeyDown logic ...
+ *    },
+ *  } as const;
+ * }),
+ * useComboboxKeyboardTypeAhead,
+ * useComboboxInput
+ * );
+ * ```
+ */
+export declare const useComboboxKeyboardTypeAhead: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("../../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("../../..").Item<any>[];
+        mode: "multiple" | "single";
+        value: string | undefined;
+        inputRef: React.RefObject<HTMLInputElement>;
+        width: number;
+    };
+    events: {
+        setWidth(width: number): void;
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        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;
+    };
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    selection: import("../../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}, {
+    onKeyDown(event: React.KeyboardEvent): void;
+    keySofar: string;
+}>;
+//# sourceMappingURL=useComboboxKeyboardTypeAhead.d.ts.map

package/dist/es6/combobox/lib/hooks/useComboboxKeyboardTypeAhead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxKeyboardTypeAhead.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxKeyboardTypeAhead.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0EpB,mBAAmB;;EA6BtC,CAAC"}

package/dist/es6/combobox/lib/hooks/useComboboxKeyboardTypeAhead.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useComboboxModel } from './useComboboxModel';
+/**
+ * `useComboboxKeyboardTypeAhead` handles type-ahead. It will try and find a matching item in the list. It also returns the keys types so far.
+ * This hook is best used when composing hooks and in conjunction with `useComboboxInput`.
+ *
+ * ```tsx
+ * // Example for a `Select` input
+ * export const useSelectInput = composeHooks(
+ * createElemPropsHook(useComboboxModel)((model, ref, elemProps: {keySofar?: string} = {}) => {
+ *  return {
+ *    onKeyDown(event: React.KeyboardEvent) {
+ *     // onKeyDown logic ...
+ *    },
+ *  } as const;
+ * }),
+ * useComboboxKeyboardTypeAhead,
+ * useComboboxInput
+ * );
+ * ```
+ */
+export const useComboboxKeyboardTypeAhead = createElemPropsHook(useComboboxModel)(model => {
+    const keySofar = React.useRef('');
+    const timer = React.useRef();
+    const [keyTypedSofar, setKeyTypedSofar] = React.useState(keySofar.current);
+    const startClearKeysSoFarTimer = () => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        timer.current = setTimeout(() => {
+            keySofar.current = '';
+            setKeyTypedSofar(keySofar.current);
+        }, 500);
+    };
+    // Based on the the key typed, this will try and find an index in the array where it matches the string
+    // so if a user types `de` it will try and find an index in the array whose id matches `de` like denver
+    const getIndexByStartString = (startIndex, startString, endIndex = model.state.items.length, ignoreDisabled = true) => {
+        for (let i = startIndex; i < endIndex; i++) {
+            const label = model.state.items[i].textValue.toLowerCase();
+            if (label.startsWith(startString.toLowerCase()) &&
+                (!ignoreDisabled ||
+                    (ignoreDisabled && !model.state.nonInteractiveIds.includes(model.state.items[i].id)))) {
+                return i;
+            }
+        }
+        return -1;
+    };
+    const currentItem = model.navigation.getItem(model.state.cursorId, model);
+    const cursorFocusedIndex = currentItem.index;
+    const handleKeyboardTypeAhead = (key, numOptions) => {
+        // If the starting point is beyond the list of options, reset it
+        // to the beginning of the list
+        const startNumber = keySofar.current.length === 0 ? cursorFocusedIndex + 1 : cursorFocusedIndex;
+        const start = startNumber === numOptions ? 0 : startNumber;
+        // Keeps track of the current key types and adds to it
+        // if you type `de` vs `d` for denver
+        keySofar.current += key;
+        setKeyTypedSofar(keySofar.current);
+        startClearKeysSoFarTimer();
+        // First, look for a match from start to end
+        let matchIndex = getIndexByStartString(start, keySofar.current);
+        getIndexByStartString(start, keySofar.current);
+        // If a match isn't found between start and end, wrap the search
+        // around and search again from the beginning (0) to start
+        if (matchIndex === -1) {
+            matchIndex = getIndexByStartString(0, keySofar.current, start);
+        }
+        // A match was found...
+        if (matchIndex > -1) {
+            model.events.goTo({ id: model.state.items[matchIndex].id });
+            if (model.state.visibility === 'hidden') {
+                // If the menu is closed, fire the change event
+                // go to that item and select based on its id
+                model.events.select({ id: model.state.items[matchIndex].id });
+            }
+        }
+    };
+    return {
+        onKeyDown(event) {
+            // Call type ahead excluding backspace
+            if (event.key.length === 1 && event.key.match(/\S/)) {
+                handleKeyboardTypeAhead(event.key, model.state.items.length);
+            }
+            // If spacebar is typed
+            if ((event.key === 'Spacebar' || event.key === ' ') &&
+                model.state.visibility === 'visible' &&
+                keySofar.current !== '') {
+                // If the user is in the middle of typing a string, treat
+                // space key as type-ahead rather than option selection
+                handleKeyboardTypeAhead(' ', model.state.items.length);
+            }
+            if ((event.key === 'Spacebar' || event.key === ' ') &&
+                model.state.visibility === 'hidden' &&
+                keySofar.current !== '') {
+                // If the user is in the middle of typing a string, treat
+                // space key as type-ahead rather than option selection
+                handleKeyboardTypeAhead(' ', model.state.items.length);
+            }
+        },
+        keySofar: keyTypedSofar,
+    };
+});

package/dist/es6/combobox/lib/hooks/useComboboxListKeyboardHandler.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+/**
+ * `useComboboxListKeyboardHandler` handle calling keyboard events like ArrowUp and ArrowDown only when the menu is visible.
+ */
+export declare const useComboboxListKeyboardHandler: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("../../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        mode: "multiple" | "single";
+        value: string | undefined;
+        inputRef: React.RefObject<HTMLInputElement>;
+        width: number;
+    };
+    events: {
+        setWidth(width: number): void;
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        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;
+    };
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    selection: import("../../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}, {
+    onKeyDown(event: React.KeyboardEvent): void;
+}>;
+//# sourceMappingURL=useComboboxListKeyboardHandler.d.ts.map

package/dist/es6/combobox/lib/hooks/useComboboxListKeyboardHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxListKeyboardHandler.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxListKeyboardHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAItB,mBAAmB;EAStC,CAAC"}