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

package/dist/es6/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;IAChF;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0ED,eAAO,MAAM,MAAM;;CAiBjB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAK3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC;IACtE;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AACD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}

package/dist/es6/select/lib/Select.js

@@ -1,74 +1,147 @@
-import * as React from 'react';
-import { createComponent, ErrorType, errorRing, styled, } from '@workday/canvas-kit-react/common';
-import { colors, borderRadius, inputColors, type, space } from '@workday/canvas-kit-react/tokens';
-import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
+import React from 'react';
+import { createSubcomponent, createContainer, } from '@workday/canvas-kit-react/common';
+import { Combobox } from '@workday/canvas-kit-react/combobox';
+import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-const StyledSelect = styled('select')({
-    ...type.levels.subtext.large,
-    border: `1px solid ${inputColors.border}`,
-    display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
-    boxSizing: 'border-box',
-    height: space.xl,
-    minWidth: 280,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: space.xxs,
-    margin: 0,
-    MozAppearance: 'none',
-    WebkitAppearance: 'none',
-    '&::placeholder': {
-        color: inputColors.placeholder,
-    },
-    '&:hover': {
-        borderColor: inputColors.hoverBorder,
-    },
-    '&:focus:not([disabled])': {
-        borderColor: inputColors.focusBorder,
-        boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
-        outline: 'none',
-    },
-    '&:disabled': {
-        backgroundColor: inputColors.disabled.background,
-        borderColor: inputColors.disabled.border,
-        color: inputColors.disabled.text,
-        '&::placeholder': {
-            color: inputColors.disabled.text,
-        },
-    },
-}, ({ error }) => ({
-    ...errorRing(error),
-}), ({ grow }) => grow && {
-    width: '100%',
+import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
+import { useSelectModel, useSelectCard } from './hooks';
+import { useSelectInput } from './hooks/useSelectInput';
+export const SelectInput = createSubcomponent(TextInput)({
+    modelHook: useSelectModel,
+    elemPropsHook: useSelectInput,
+})(({ placeholder = 'Choose an option', inputStartIcon, ...elemProps }, Element, model) => {
+    return (React.createElement(InputGroup, null,
+        inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
+            React.createElement(SystemIcon, { icon: inputStartIcon }))),
+        React.createElement(InputGroup.Input, Object.assign({ as: Element, placeholder: placeholder, style: { caretColor: 'transparent', cursor: 'default' } }, elemProps)),
+        React.createElement(InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
+            React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
 });
-const SelectDropdownIcon = styled(SystemIcon)({
-    position: 'absolute',
-    top: space.xxxs,
-    right: space.xxxs,
-    padding: space.xxxs,
-    pointerEvents: 'none',
-    '& path': {
-        transition: '100ms fill',
+export const SelectItem = createSubcomponent('li')({
+    modelHook: useSelectModel,
+    subComponents: {
+        Icon: Combobox.Menu.Item.Icon,
     },
+})(({ children, ...elemProps }, Element, _model) => {
+    return (React.createElement(Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
 });
-const SelectWrapper = styled('div')({
-    position: 'relative',
-}, ({ grow }) => ({
-    display: grow ? 'block' : 'inline-block',
-}), ({ disabled }) => ({
-    '& span': {
-        backgroundColor: disabled ? colors.soap100 : colors.frenchVanilla100,
-    },
-    '&:hover path': {
-        fill: disabled ? undefined : colors.licorice500,
-    },
-}));
-export const Select = createComponent('select')({
+export const SelectCard = createSubcomponent('div')({
+    modelHook: useSelectModel,
+    elemPropsHook: useSelectCard,
+})(({ children, ...elemProps }, Element) => {
+    return (React.createElement(Combobox.Menu.Card, Object.assign({ maxHeight: 300, as: Element }, elemProps), children));
+});
+/**
+ * Use `Select` to allow users to choose an option from a list or type characters to select a matching option.
+ *
+ * **Note: `Select` must wrap `FormField` and `FormField` must wrap all `Select` children to ensure proper accessibility. **
+ *
+ * ```tsx
+ * <Select items={options}>
+ *  <FormField label="Your Label">
+ *    <Select.Input onChange={e => handleChange(e)} id="contact-select" />
+ *    <Select.Popper>
+ *      <Select.Card>
+ *        <Select.List>
+ *          {item => <Select.Item>{item.id}</Select.Item>}
+ *        </Select.List>
+ *      </Select.Card>
+ *      </Select.Popper>
+ *    </FormField>
+ * </Select>
+ * ```
+ */
+export const Select = createContainer()({
     displayName: 'Select',
-    Component: ({ disabled = false, grow, children, ...elemProps }, ref, Element) => (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
-        React.createElement(StyledSelect, Object.assign({ as: Element, disabled: disabled, grow: grow, ref: ref }, elemProps), children),
-        React.createElement(SelectDropdownIcon, { icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500 }))),
+    modelHook: useSelectModel,
     subComponents: {
-        ErrorType,
+        /**
+         * `Select.Input` renders a {@link ComboboxMenu Combobox.Input} that handles keyboard navigation and interaction defined by [WAI](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
+         * This component can either be [controlled or uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+         *
+         * ```tsx
+         * <Select items={options}>
+         *   <FormField label="Contact">
+         *     <Select.Input onChange={(event) => handleChange(event)}>
+         *     ...
+         *   </FormField>
+         * </Select>
+         * ```
+         */
+        Input: SelectInput,
+        /**
+         * `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
+         *
+         * ```tsx
+         * <Select item={options}>
+         *  <FormField label="Your Label">
+         *    <Select.Input onChange={(event) => handleChange(event)}>
+         *    <Select.Popper>
+         *    ...
+         *    </Select.Popper>
+         *  </FormField>
+         * </Select>
+         * ```
+         */
+        Popper: Combobox.Menu.Popper,
+        /**
+         * `Select.Card` renders a {@link ComboboxCard Combobox.Card}. You have access to all `Card` props.
+         *
+         * **Note: The card will be the width of its corresponding `Select.Input`**.
+         *
+         * ```tsx
+         * <Select item={options}>
+         *  <FormField label="Your Label">
+         *    <Select.Input onChange={(event) => handleChange(event)}>
+         *    <Select.Popper>
+         *      <Select.Card>
+         *        ...
+         *      </Select.Card>
+         *    </Select.Popper>
+         *  </FormField>
+         * </Select>
+         * ```
+         */
+        Card: SelectCard,
+        /**
+         * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
+         *
+         * ```tsx
+         * <Select item={options}>
+         *  <FormField label="Your Label">
+         *    <Select.Input onChange={(event) => handleChange(event)}>
+         *    <Select.Popper>
+         *      <Select.Card>
+         *        <Select.List>
+         *          {(item) => <Select.Item>{item}</Select.Item>}
+         *        </Select.List
+         *      </Select.Card>
+         *    </Select.Popper>
+         *  </FormField>
+         * </Select>
+         * ```
+         */
+        List: Combobox.Menu.List,
+        /**
+         * `Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.
+         *
+         * ```tsx
+         * <Select item={options}>
+         *  <FormField label="Your Label">
+         *    <Select.Input onChange={(event) => handleChange(event)}>
+         *      <Select.Popper>
+         *        <Select.Card>
+         *          <Select.List>
+         *            {(item) => <Select.Item><Select.Item.Icon icon={icon} />{item}</Select.Item>}
+         *          </Select.List
+         *        </Select.Card>
+         *      </Select.Popper>
+         *  </FormField>
+         * </Select>
+         * ```
+         */
+        Item: SelectItem,
     },
+})(({ children, ...elemProps }, _, model) => {
+    return (React.createElement(Combobox, Object.assign({ model: model }, elemProps), children));
 });

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

@@ -0,0 +1,4 @@
+export * from './useSelectModel';
+export * from './useSelectInput';
+export * from './useSelectCard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './useSelectModel';
+export * from './useSelectInput';
+export * from './useSelectCard';

package/dist/es6/select/lib/hooks/useSelectCard.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Sets the width of the ` SelectCard` to the `Select.Input` width.
+ */
+export declare const useSelectCard: 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;
+}, {
+    readonly width: number;
+}>;
+//# sourceMappingURL=useSelectCard.d.ts.map

package/dist/es6/select/lib/hooks/useSelectCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectCard.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectCard.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIxB,CAAC"}

package/dist/es6/select/lib/hooks/useSelectCard.js

@@ -0,0 +1,10 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useSelectModel } from './useSelectModel';
+/**
+ * Sets the width of the ` SelectCard` to the `Select.Input` width.
+ */
+export const useSelectCard = createElemPropsHook(useSelectModel)(model => {
+    return {
+        width: model.state.width,
+    };
+});

package/dist/es6/select/lib/hooks/useSelectInput.d.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+/**
+ * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
+ */
+export declare const useSelectInput: 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;
+}, {
+    readonly onKeyDown: (event: React.KeyboardEvent) => void;
+    readonly ref: (instance: HTMLInputElement | null) => void;
+    readonly autoComplete: "off";
+    readonly defaultValue: string | undefined;
+} & {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+    keySofar: string;
+} & {
+    readonly onKeyDown: (event: React.KeyboardEvent<Element>) => void;
+    readonly onBlur: (event: React.FocusEvent<Element, Element>) => void;
+    readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly onClick: (event: React.MouseEvent<Element, 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=useSelectInput.d.ts.map

package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAkBJ,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCzC,CAAC"}

package/dist/es6/select/lib/hooks/useSelectInput.js

@@ -0,0 +1,46 @@
+import { composeHooks, createElemPropsHook, useForkRef, useLocalRef, useResizeObserver, } from '@workday/canvas-kit-react/common';
+import { useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxMoveCursorToSelected, useComboboxResetCursorToSelected, } from '@workday/canvas-kit-react/combobox';
+import { useSelectModel } from './useSelectModel';
+/**
+ * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
+ */
+export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((model, ref, elemProps = {}) => {
+    const { localRef, elementRef } = useLocalRef(useForkRef(ref, ref));
+    useResizeObserver({
+        ref: localRef,
+        onResize: data => {
+            if (model.state.visibility === 'visible') {
+                // Width of the Input + 2px border + 8px padding
+                const calculatedWidth = data.width ? data.width + 42 + 8 : 0;
+                model.events.setWidth(calculatedWidth);
+            }
+        },
+    });
+    return {
+        onKeyDown(event) {
+            // Prevent the keys from being enter in the input
+            if (event.key !== 'Tab') {
+                event.preventDefault();
+            }
+            // Select should open if Spacebar is typed and nothing has been typed AND the menu is hidden
+            if (event.key === 'Spacebar' ||
+                (event.key === ' ' && model.state.visibility === 'hidden' && (elemProps === null || elemProps === void 0 ? void 0 : elemProps.keySofar) === '')) {
+                model.events.show();
+            }
+            // if the menu is visible
+            if ((event.key === 'Spacebar' || event.key === ' ') &&
+                model.state.visibility === 'visible') {
+                // If key so far is empty, they're done typing, select the item where the cursor is located and hide the menu
+                if ((elemProps === null || elemProps === void 0 ? void 0 : elemProps.keySofar) === '') {
+                    model.events.select({
+                        id: model.state.cursorId,
+                    });
+                    model.events.hide();
+                }
+            }
+        },
+        ref: elementRef,
+        autoComplete: 'off',
+        defaultValue: model.state.selectedIds[0] || model.state.value,
+    };
+}), useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, useComboboxInput);