@workday/canvas-kit-react 9.0.0-alpha.419-next.21 → 9.0.0

package/dist/commonjs/combobox/lib/ComboboxMenuItem.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboboxMenuItem = exports.useComboboxMenuItem = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const menu_1 = require("@workday/canvas-kit-react/menu");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const useComboboxModel_1 = require("./useComboboxModel");
+/**
+ * This hook sets up accessibility and behavior of a {@link ComboboxMenuItem Combobox.Menu.Item}
+ * component. It prevents focus when clicking so the focus stays on the
+ * {@link ComboboxInput Combobox.Input} component and selects an item when the user clicks on it. It
+ * also prevents items with an `aria-disabled` attribute from being selected. A `focus` CSS class is
+ * added when the item has "focus" (when the cursor is on the item).
+ */
+exports.useComboboxMenuItem = common_1.composeHooks(common_1.createElemPropsHook(menu_1.useMenuModel)((model, _, elemProps = {}) => {
+    const id = elemProps['data-id'] || '';
+    const onMouseDown = (event) => {
+        if (model.state.nonInteractiveIds.includes(id) ||
+            event.currentTarget.hasAttribute('aria-disabled')) {
+            return;
+        }
+        if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+            model.events.select({ id });
+            if (model.state.mode === 'single') {
+                model.events.hide(event);
+            }
+        }
+        // prevent focus changes
+        event.preventDefault();
+    };
+    const selected = model.state.cursorId === id;
+    return {
+        role: 'option',
+        'aria-selected': selected || undefined,
+        onMouseDown,
+        className: model.state.cursorId && model.state.cursorId === elemProps['data-id'] ? 'focus' : '',
+    };
+}), collection_1.useListItemRegister, collection_1.useListItemAllowChildStrings);
+exports.ComboboxMenuItem = common_1.createSubcomponent('li')({
+    modelHook: useComboboxModel_1.useComboboxModel,
+    elemPropsHook: exports.useComboboxMenuItem,
+})(({ children, ...elemProps }, Element) => {
+    return (react_1.default.createElement(tooltip_1.OverflowTooltip, { placement: "left" },
+        react_1.default.createElement(menu_1.StyledMenuItem, Object.assign({ minHeight: "xl", as: Element }, elemProps), children)));
+});

package/dist/commonjs/combobox/lib/ComboboxMenuList.d.ts

@@ -0,0 +1,164 @@
+import React from 'react';
+import { ListBoxProps } from '@workday/canvas-kit-react/collection';
+export interface ComboboxMenuListProps<T = any> extends ListBoxProps<T> {
+}
+/**
+ * The `listbox` uses `aria-labelledby` pointing to the {@link ComboboxInput Combobox.Input}. This
+ * input should be labelled by a form field label for proper accessibility. Use {@link FormField} to
+ * ensure proper accessibility.
+ */
+export declare const useComboboxMenuList: 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";
+    };
+    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;
+}, {
+    readonly role: "listbox";
+    readonly 'aria-labelledby': string;
+    readonly id: `${string}-list`;
+    readonly flexDirection: "row" | "column";
+}>;
+export declare const ComboboxMenuList: import("@workday/canvas-kit-react/common").ElementComponentM<"ul", ComboboxMenuListProps<any>, {
+    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;
+}>;
+//# sourceMappingURL=ComboboxMenuList.d.ts.map

package/dist/commonjs/combobox/lib/ComboboxMenuList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxMenuList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAU,YAAY,EAAC,MAAM,sCAAsC,CAAC;AAI3E,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;CAAG;AAE1E;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO9B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB3B,CAAC"}

package/dist/commonjs/combobox/lib/ComboboxMenuList.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboboxMenuList = exports.useComboboxMenuList = void 0;
+const react_1 = __importDefault(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const menu_1 = require("@workday/canvas-kit-react/menu");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useComboboxModel_1 = require("./useComboboxModel");
+/**
+ * The `listbox` uses `aria-labelledby` pointing to the {@link ComboboxInput Combobox.Input}. This
+ * input should be labelled by a form field label for proper accessibility. Use {@link FormField} to
+ * ensure proper accessibility.
+ */
+exports.useComboboxMenuList = common_1.createElemPropsHook(menu_1.useMenuModel)(model => {
+    return {
+        role: 'listbox',
+        'aria-labelledby': model.state.id,
+        id: `${model.state.id}-list`,
+        flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row',
+    };
+});
+exports.ComboboxMenuList = common_1.createSubcomponent('ul')({
+    modelHook: useComboboxModel_1.useComboboxModel,
+    elemPropsHook: exports.useComboboxMenuList,
+})(({ children, ...elemProps }, Element, model) => {
+    return (react_1.default.createElement(collection_1.ListBox, Object.assign({ as: Element, model: model, background: tokens_1.commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto" }, elemProps), children));
+});

package/dist/commonjs/combobox/lib/useComboboxInputOpenWithArrowKeys.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Opens a `Combobox` with the up/down arrow keys. This should be used only on a
+ * {@link ComboboxInput Combobox.Input}. It adds a keydown listener for the up/down arrow keys.
+ */
+export declare const useComboboxInputOpenWithArrowKeys: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: import("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: import("react").RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: import("react").MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("../..").Item<any>[];
+        mode: "multiple" | "single";
+        value: string | undefined;
+        inputRef: import("react").RefObject<HTMLInputElement>;
+        width: number;
+    };
+    events: {
+        setWidth(width: number): void;
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("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: import("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=useComboboxInputOpenWithArrowKeys.d.ts.map

package/dist/commonjs/combobox/lib/useComboboxInputOpenWithArrowKeys.d.ts.map

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

package/dist/commonjs/combobox/lib/useComboboxInputOpenWithArrowKeys.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComboboxInputOpenWithArrowKeys = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useComboboxModel_1 = require("./useComboboxModel");
+/**
+ * Opens a `Combobox` with the up/down arrow keys. This should be used only on a
+ * {@link ComboboxInput Combobox.Input}. It adds a keydown listener for the up/down arrow keys.
+ */
+exports.useComboboxInputOpenWithArrowKeys = common_1.createElemPropsHook(useComboboxModel_1.useComboboxModel)(model => {
+    return {
+        onKeyDown(event) {
+            if (event.key === 'ArrowDown' ||
+                (event.key === 'ArrowUp' && model.state.visibility !== 'visible')) {
+                model.events.show(event);
+                model.events.setWidth(event.currentTarget.clientWidth);
+            }
+        },
+    };
+});

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

@@ -0,0 +1,28 @@
+import { useListLoader } from '@workday/canvas-kit-react/collection';
+/**
+ * Creates a `Combobox` data loader and a model. The `Combobox` loader extends the
+ * {@link useListLoader} and connects a {@link ComboboxInput Combobox.Input} to the filter of the
+ * data loader. A simple loader using
+ * [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) could look like the
+ * following:
+ *
+ * ```ts
+ * const {model, loader} = useComboboxLoader(
+ *   {
+ *     total: 0,
+ *     pageSize: 20,
+ *     async load({pageNumber, pageSize, filter}) {
+ *       // `filter` will be a `string`
+ *       return fetch(`/myUrl?filter=${filter}`)
+ *         .then(response => response.json())
+ *         .then(response => {
+ *           return {total: response.total, items: response.items};
+ *         });
+ *     },
+ *   },
+ *   useComboboxModel
+ * );
+ * ```
+ */
+export declare const useComboboxLoader: typeof useListLoader;
+//# sourceMappingURL=useComboboxLoader.d.ts.map

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

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

package/dist/commonjs/combobox/lib/useComboboxLoader.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComboboxLoader = void 0;
+const react_1 = __importDefault(require("react"));
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useDebounce = () => {
+    const debounceTimer = react_1.default.useRef(-1);
+    react_1.default.useEffect(() => {
+        return () => {
+            // We want to clear any timeout on unload. We disable the ESLint rule because this is actually
+            // what we want
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            clearTimeout(debounceTimer.current);
+        };
+    }, []);
+    return (fn, wait) => {
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = setTimeout(fn, wait); // We don't actually care what the real return type of setTimeout is. It is a number in the browser and something else in Node
+    };
+};
+/**
+ * Creates a `Combobox` data loader and a model. The `Combobox` loader extends the
+ * {@link useListLoader} and connects a {@link ComboboxInput Combobox.Input} to the filter of the
+ * data loader. A simple loader using
+ * [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) could look like the
+ * following:
+ *
+ * ```ts
+ * const {model, loader} = useComboboxLoader(
+ *   {
+ *     total: 0,
+ *     pageSize: 20,
+ *     async load({pageNumber, pageSize, filter}) {
+ *       // `filter` will be a `string`
+ *       return fetch(`/myUrl?filter=${filter}`)
+ *         .then(response => response.json())
+ *         .then(response => {
+ *           return {total: response.total, items: response.items};
+ *         });
+ *     },
+ *   },
+ *   useComboboxModel
+ * );
+ * ```
+ */
+const useComboboxLoader = (config, modelHook) => {
+    const debounce = useDebounce();
+    const list = collection_1.useListLoader({
+        shouldLoad(params, state) {
+            return ((config.shouldLoad ? config.shouldLoad(params, state) : true) &&
+                state.visibility !== 'hidden');
+        },
+        ...modelHook.mergeConfig(config, {
+            onChange(event) {
+                const value = event.currentTarget.value;
+                debounce(() => list.loader.updateFilter(value), 150);
+            },
+        }),
+    }, modelHook);
+    return list;
+};
+exports.useComboboxLoader = useComboboxLoader;