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

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

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComboboxInput = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const index_1 = require("./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}.
+ */
+exports.useComboboxInput = common_1.composeHooks(common_1.createElemPropsHook(index_1.useComboboxModel)((model, ref) => {
+    const elementRef = common_1.useForkRef(ref, model.state.inputRef);
+    react_1.default.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,
+    };
+}), index_1.useSetPopupWidth, index_1.useComboboxInputOpenWithArrowKeys, collection_1.useListActiveDescendant, index_1.useComboboxListKeyboardHandler, popup_1.usePopupTarget);

package/dist/{es6/combobox/lib → commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/combobox/lib/hooks/useComboboxKeyboardTypeAhead.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComboboxKeyboardTypeAhead = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useComboboxModel_1 = require("./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
+ * );
+ * ```
+ */
+exports.useComboboxKeyboardTypeAhead = common_1.createElemPropsHook(useComboboxModel_1.useComboboxModel)(model => {
+    const keySofar = react_1.default.useRef('');
+    const timer = react_1.default.useRef();
+    const [keyTypedSofar, setKeyTypedSofar] = react_1.default.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/commonjs/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/commonjs/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"}

package/dist/commonjs/combobox/lib/hooks/useComboboxListKeyboardHandler.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComboboxListKeyboardHandler = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const index_1 = require("./index");
+/**
+ * `useComboboxListKeyboardHandler` handle calling keyboard events like ArrowUp and ArrowDown only when the menu is visible.
+ */
+exports.useComboboxListKeyboardHandler = common_1.createElemPropsHook(index_1.useComboboxModel)(model => {
+    const isRTL = common_1.useIsRTL();
+    return {
+        onKeyDown(event) {
+            if (model.state.visibility === 'visible') {
+                const handled = collection_1.keyboardEventToCursorEvents(event, model, isRTL);
+                if (handled) {
+                    event.preventDefault();
+                }
+            }
+        },
+    };
+});

package/dist/commonjs/combobox/lib/hooks/useComboboxLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxLoader.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxLoader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,sCAAsC,CAAC;AAuBnE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,iBAAiB,EAAE,OAAO,aAqBtC,CAAC"}