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

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

@@ -1,109 +1,4 @@
 import React from 'react';
-/**
- * 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;
-}>;
 export declare const ComboboxInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("@workday/canvas-kit-react/text-input").TextInputProps> & {
     ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
 }, import("@workday/canvas-kit-react/text-input").TextInputProps, {
@@ -136,7 +31,7 @@ export declare const ComboboxInput: import("@workday/canvas-kit-react/common").E
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        items: import("../..").Item<any>[];
         mode: "multiple" | "single";
         value: string | undefined;
         inputRef: React.RefObject<HTMLInputElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2BN,mBAAmB;6BAiBtB,gBAAgB;;8BAIf,gBAAgB;;;;;;;;;;;;;;;;;;EAmBpC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKxB,CAAC"}
+{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKxB,CAAC"}

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

@@ -3,81 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboboxInput = exports.useComboboxInput = void 0;
+exports.ComboboxInput = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const text_input_1 = require("@workday/canvas-kit-react/text-input");
-const popup_1 = require("@workday/canvas-kit-react/popup");
-const collection_1 = require("@workday/canvas-kit-react/collection");
-const useComboboxModel_1 = require("./useComboboxModel");
-const useComboboxInputOpenWithArrowKeys_1 = require("./useComboboxInputOpenWithArrowKeys");
-/**
- * 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(useComboboxModel_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) {
-                        menuItem.scrollIntoView({ block: 'nearest' });
-                    }
-                }
-            }
-        }
-        // we only want to run this effect if the cursor changes and not any other time
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [model.state.cursorId]);
-    return {
-        onKeyDown(event) {
-            if (event.key === 'Escape') {
-                common_1.dispatchInputEvent(event.currentTarget, '');
-            }
-            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,
-    };
-}), useComboboxInputOpenWithArrowKeys_1.useComboboxInputOpenWithArrowKeys, collection_1.useListActiveDescendant, collection_1.useListKeyboardHandler, popup_1.usePopupTarget);
+const hooks_1 = require("./hooks");
 exports.ComboboxInput = common_1.createSubcomponent(text_input_1.TextInput)({
-    modelHook: useComboboxModel_1.useComboboxModel,
-    elemPropsHook: exports.useComboboxInput,
+    modelHook: hooks_1.useComboboxModel,
+    elemPropsHook: hooks_1.useComboboxInput,
 })(({ children, ...elemProps }, Element) => {
     return react_1.default.createElement(Element, Object.assign({}, elemProps), children);
 });

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

@@ -87,9 +87,9 @@ export declare const ComboboxMenu: import("@workday/canvas-kit-react/common").El
      * {@link ComboboxInput Combobox.Input}. It renders a `div` element that is portalled to the
      * `document.body` which is controlled by the {@link PopupStack}. The `PopupStack` is not part
      * of React. This means no extra props given to this component will be forwarded to the `div`
-     * element, but the `ref` will be forwarded.
+     * element, but the `ref` will be forwarded. Also fallback placements for the popper with be either `top` or `bottom`.
      */
-    Popper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../menu/lib/MenuPopper").MenuPopperProps, {
+    Popper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").PopperProps & React.RefAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -340,7 +340,13 @@ export declare const ComboboxMenu: import("@workday/canvas-kit-react/common").El
         selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
         navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
         getId: (item: any) => string;
-    }>;
+    }> & {
+        Icon: import("@emotion/styled").StyledComponent<import("../..").SystemIconProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "as" | keyof import("../..").SystemIconProps> & {
+            ref?: React.Ref<HTMLSpanElement> | undefined;
+        } & {
+            theme?: import("@emotion/react").Theme | undefined;
+        }, {}, {}>;
+    };
     /**
      * `Combobox.Menu.Card` is a non-semantic element used to give the dropdown menu its distinct visual
      * cue that the dropdown menu is floating above other content. `Combobox.Menu.Card` usually contains a

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

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGrB;;;;;;OAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;OAoBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAML,CAAC"}
+{"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGrB;;;;;;OAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;OAoBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAML,CAAC"}

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

@@ -7,21 +7,22 @@ exports.ComboboxMenu = 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 useComboboxModel_1 = require("./useComboboxModel");
+const hooks_1 = require("./hooks");
 const ComboboxMenuList_1 = require("./ComboboxMenuList");
 const ComboboxMenuItem_1 = require("./ComboboxMenuItem");
 const ComboboxCard_1 = require("./ComboboxCard");
+const ComboboxPopper_1 = require("./ComboboxPopper");
 exports.ComboboxMenu = common_1.createSubcomponent()({
-    modelHook: useComboboxModel_1.useComboboxModel,
+    modelHook: hooks_1.useComboboxModel,
     subComponents: {
         /**
          * The "Popper" of a {@link ComboboxMenu Combobox.Menu}. The popper will appear around the
          * {@link ComboboxInput Combobox.Input}. It renders a `div` element that is portalled to the
          * `document.body` which is controlled by the {@link PopupStack}. The `PopupStack` is not part
          * of React. This means no extra props given to this component will be forwarded to the `div`
-         * element, but the `ref` will be forwarded.
+         * element, but the `ref` will be forwarded. Also fallback placements for the popper with be either `top` or `bottom`.
          */
-        Popper: menu_1.Menu.Popper,
+        Popper: ComboboxPopper_1.ComboboxMenuPopper,
         /**
          * The combobox menu list follows the Collections API. A list can either contain static items or
          * a render prop and `items` to the model.

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

@@ -174,5 +174,11 @@ export declare const ComboboxMenuItem: import("@workday/canvas-kit-react/common"
     selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}>;
+}> & {
+    Icon: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/icon").SystemIconProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "as" | keyof import("@workday/canvas-kit-react/icon").SystemIconProps> & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    } & {
+        theme?: import("@emotion/react").Theme | undefined;
+    }, {}, {}>;
+};
 //# sourceMappingURL=ComboboxMenuItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenuItem.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAGA,gBAAgB,CAAC,WAAW,CAAC;;;;;;;;;;;;;;EA8B5D,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAW3B,CAAC"}
+{"version":3,"file":"ComboboxMenuItem.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAIA,gBAAgB,CAAC,WAAW,CAAC;;;;;;;;;;;;;;EAyB5D,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc3B,CAAC"}

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

@@ -7,9 +7,10 @@ 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 icon_1 = require("@workday/canvas-kit-react/icon");
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-const useComboboxModel_1 = require("./useComboboxModel");
+const hooks_1 = require("./hooks");
 /**
  * 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
@@ -17,13 +18,9 @@ const useComboboxModel_1 = require("./useComboboxModel");
  * 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 = {}) => {
+exports.useComboboxMenuItem = common_1.composeHooks(common_1.createElemPropsHook(menu_1.useMenuModel)((model, ref, 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') {
@@ -42,8 +39,11 @@ exports.useComboboxMenuItem = common_1.composeHooks(common_1.createElemPropsHook
     };
 }), collection_1.useListItemRegister, collection_1.useListItemAllowChildStrings);
 exports.ComboboxMenuItem = common_1.createSubcomponent('li')({
-    modelHook: useComboboxModel_1.useComboboxModel,
+    modelHook: hooks_1.useComboboxModel,
     elemPropsHook: exports.useComboboxMenuItem,
+    subComponents: {
+        Icon: common_1.styled(icon_1.SystemIcon)({ alignSelf: 'start' }),
+    },
 })(({ 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.js

@@ -9,7 +9,7 @@ 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");
+const hooks_1 = require("./hooks");
 /**
  * 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
@@ -24,7 +24,7 @@ exports.useComboboxMenuList = common_1.createElemPropsHook(menu_1.useMenuModel)(
     };
 });
 exports.ComboboxMenuList = common_1.createSubcomponent('ul')({
-    modelHook: useComboboxModel_1.useComboboxModel,
+    modelHook: hooks_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/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/commonjs/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/commonjs/{select/lib/SelectOption.js → combobox/lib/ComboboxPopper.js}

@@ -19,12 +19,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectOption = void 0;
+exports.ComboboxMenuPopper = exports.useMenuPopper = void 0;
 const React = __importStar(require("react"));
-class SelectOption extends React.Component {
-    render() {
-        const { disabled = false, value, label, ...elemProps } = this.props;
-        return (React.createElement("option", Object.assign({ value: value, label: label, disabled: disabled }, elemProps), label));
-    }
-}
-exports.SelectOption = SelectOption;
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const menu_1 = require("@workday/canvas-kit-react/menu");
+exports.useMenuPopper = popup_1.usePopupPopper;
+exports.ComboboxMenuPopper = common_1.createSubcomponent('div')({
+    displayName: 'Combobox.Menu.Popper',
+    modelHook: menu_1.useMenuModel,
+    elemPropsHook: exports.useMenuPopper,
+})(({ children, ...elemProps }) => {
+    return (React.createElement(menu_1.Menu.Popper, Object.assign({ fallbackPlacements: ['top', 'bottom'] }, elemProps), children));
+});

package/dist/commonjs/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/commonjs/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/commonjs/combobox/lib/hooks/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useComboboxInputOpenWithArrowKeys"), exports);
+__exportStar(require("./useComboboxLoader"), exports);
+__exportStar(require("./useComboboxModel"), exports);
+__exportStar(require("./useComboboxMoveCursorToSelected"), exports);
+__exportStar(require("./useSetPopupWidth"), exports);
+__exportStar(require("./useComboboxKeyboardTypeAhead"), exports);
+__exportStar(require("./useComboboxListKeyboardHandler"), exports);
+__exportStar(require("./useComboboxInput"), exports);
+__exportStar(require("./useComboboxResetCursorToSelected"), exports);

package/dist/commonjs/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/commonjs/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"}