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

package/dist/commonjs/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/commonjs/select/lib/Select.js

@@ -1,96 +1,153 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-const React = __importStar(require("react"));
+exports.Select = exports.SelectCard = exports.SelectItem = exports.SelectInput = void 0;
+const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const combobox_1 = require("@workday/canvas-kit-react/combobox");
+const text_input_1 = require("@workday/canvas-kit-react/text-input");
 const icon_1 = require("@workday/canvas-kit-react/icon");
-const StyledSelect = common_1.styled('select')({
-    ...tokens_1.type.levels.subtext.large,
-    border: `1px solid ${tokens_1.inputColors.border}`,
-    display: 'block',
-    backgroundColor: tokens_1.inputColors.background,
-    borderRadius: tokens_1.borderRadius.m,
-    boxSizing: 'border-box',
-    height: tokens_1.space.xl,
-    minWidth: 280,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: tokens_1.space.xxs,
-    margin: 0,
-    MozAppearance: 'none',
-    WebkitAppearance: 'none',
-    '&::placeholder': {
-        color: tokens_1.inputColors.placeholder,
-    },
-    '&:hover': {
-        borderColor: tokens_1.inputColors.hoverBorder,
-    },
-    '&:focus:not([disabled])': {
-        borderColor: tokens_1.inputColors.focusBorder,
-        boxShadow: `inset 0 0 0 1px ${tokens_1.inputColors.focusBorder}`,
-        outline: 'none',
-    },
-    '&:disabled': {
-        backgroundColor: tokens_1.inputColors.disabled.background,
-        borderColor: tokens_1.inputColors.disabled.border,
-        color: tokens_1.inputColors.disabled.text,
-        '&::placeholder': {
-            color: tokens_1.inputColors.disabled.text,
-        },
-    },
-}, ({ error }) => ({
-    ...common_1.errorRing(error),
-}), ({ grow }) => grow && {
-    width: '100%',
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const hooks_1 = require("./hooks");
+const useSelectInput_1 = require("./hooks/useSelectInput");
+exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
+    modelHook: hooks_1.useSelectModel,
+    elemPropsHook: useSelectInput_1.useSelectInput,
+})(({ placeholder = 'Choose an option', inputStartIcon, ...elemProps }, Element, model) => {
+    return (react_1.default.createElement(text_input_1.InputGroup, null,
+        inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none" },
+            react_1.default.createElement(icon_1.SystemIcon, { icon: inputStartIcon }))),
+        react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ as: Element, placeholder: placeholder, style: { caretColor: 'transparent', cursor: 'default' } }, elemProps)),
+        react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
+            react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))));
 });
-const SelectDropdownIcon = common_1.styled(icon_1.SystemIcon)({
-    position: 'absolute',
-    top: tokens_1.space.xxxs,
-    right: tokens_1.space.xxxs,
-    padding: tokens_1.space.xxxs,
-    pointerEvents: 'none',
-    '& path': {
-        transition: '100ms fill',
+exports.SelectItem = common_1.createSubcomponent('li')({
+    modelHook: hooks_1.useSelectModel,
+    subComponents: {
+        Icon: combobox_1.Combobox.Menu.Item.Icon,
     },
+})(({ children, ...elemProps }, Element, _model) => {
+    return (react_1.default.createElement(combobox_1.Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
 });
-const SelectWrapper = common_1.styled('div')({
-    position: 'relative',
-}, ({ grow }) => ({
-    display: grow ? 'block' : 'inline-block',
-}), ({ disabled }) => ({
-    '& span': {
-        backgroundColor: disabled ? tokens_1.colors.soap100 : tokens_1.colors.frenchVanilla100,
-    },
-    '&:hover path': {
-        fill: disabled ? undefined : tokens_1.colors.licorice500,
-    },
-}));
-exports.Select = common_1.createComponent('select')({
+exports.SelectCard = common_1.createSubcomponent('div')({
+    modelHook: hooks_1.useSelectModel,
+    elemPropsHook: hooks_1.useSelectCard,
+})(({ children, ...elemProps }, Element) => {
+    return (react_1.default.createElement(combobox_1.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>
+ * ```
+ */
+exports.Select = common_1.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: canvas_system_icons_web_1.caretDownSmallIcon, color: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200, colorHover: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500 }))),
+    modelHook: hooks_1.useSelectModel,
     subComponents: {
-        ErrorType: common_1.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: exports.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_1.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: exports.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_1.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: exports.SelectItem,
     },
+})(({ children, ...elemProps }, _, model) => {
+    return (react_1.default.createElement(combobox_1.Combobox, Object.assign({ model: model }, elemProps), children));
 });

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

@@ -0,0 +1,15 @@
+"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("./useSelectModel"), exports);
+__exportStar(require("./useSelectInput"), exports);
+__exportStar(require("./useSelectCard"), exports);

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectCard = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useSelectModel_1 = require("./useSelectModel");
+/**
+ * Sets the width of the ` SelectCard` to the `Select.Input` width.
+ */
+exports.useSelectCard = common_1.createElemPropsHook(useSelectModel_1.useSelectModel)(model => {
+    return {
+        width: model.state.width,
+    };
+});

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectInput = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const combobox_1 = require("@workday/canvas-kit-react/combobox");
+const useSelectModel_1 = require("./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/).
+ */
+exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useSelectModel_1.useSelectModel)((model, ref, elemProps = {}) => {
+    const { localRef, elementRef } = common_1.useLocalRef(common_1.useForkRef(ref, ref));
+    common_1.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,
+    };
+}), combobox_1.useComboboxKeyboardTypeAhead, combobox_1.useComboboxResetCursorToSelected, combobox_1.useComboboxMoveCursorToSelected, combobox_1.useComboboxInput);