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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYzB,CAAC"}

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

@@ -0,0 +1,29 @@
+import { createModelHook } from '@workday/canvas-kit-react/common';
+import { useComboboxModel } from '@workday/canvas-kit-react/combobox';
+/**
+ * `SelectModel` extends the {@link ComboboxModel}. Selecting items from
+ * the menu will dispatch an
+ * [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event on the
+ * input which should work with form libraries, automation and autofill.
+ *
+ * ```tsx
+ * const model = useSelectModel({items: ['Mobile', 'Phone', 'E-Mail']})
+ *
+ * <Select model={model}>
+ *   ...
+ * </Select>
+ * ```
+ */
+export const useSelectModel = createModelHook({
+    defaultConfig: {
+        ...useComboboxModel.defaultConfig,
+        shouldVirtualize: false,
+    },
+    requiredConfig: {
+        ...useComboboxModel.requiredConfig,
+    },
+    contextOverride: useComboboxModel.Context,
+})(config => {
+    const model = useComboboxModel(config);
+    return model;
+});

package/form-field/lib/FormField.tsx

@@ -83,7 +83,7 @@ const FormFieldFieldsetContainer = styled('fieldset')<
 }));
 
 const FormFieldContainer = styled('div')<FormFieldLabelPositionBehavior & FormFieldProps>(
-  ({labelPosition, useFieldset}) => {
+  ({labelPosition, useFieldset, grow}) => {
     if (useFieldset) {
       return {
         display: 'flex',
@@ -100,6 +100,7 @@ const FormFieldContainer = styled('div')<FormFieldLabelPositionBehavior & FormFi
     return {
       display: 'block',
       marginBottom: space.m,
+      width: grow ? '100%' : 'inherit',
     };
   }
 );
@@ -231,7 +232,12 @@ export class FormField extends React.Component<React.PropsWithChildren<FormField
       );
     } else {
       return (
-        <FormFieldContainer useFieldset={useFieldset} labelPosition={labelPosition} {...elemProps}>
+        <FormFieldContainer
+          useFieldset={useFieldset}
+          labelPosition={labelPosition}
+          grow={grow}
+          {...elemProps}
+        >
           {field}
         </FormFieldContainer>
       );

package/menu/lib/MenuPopper.tsx

@@ -15,7 +15,20 @@ export const MenuPopper = createSubcomponent('div')({
   elemPropsHook: useMenuPopper,
 })<MenuPopperProps>(({children, ...elemProps}) => {
   return (
-    <Popper placement="bottom-start" {...elemProps}>
+    <Popper
+      placement="bottom-start"
+      popperOptions={{
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: () => [0, 4],
+            },
+          },
+        ],
+      }}
+      {...elemProps}
+    >
       {children}
     </Popper>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.0.0-alpha.540-next.0",
+  "version": "10.0.0-alpha.546-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.540-next.0",
-    "@workday/canvas-kit-styling": "^10.0.0-alpha.540-next.0",
+    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.546-next.0",
+    "@workday/canvas-kit-styling": "^10.0.0-alpha.546-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "0.1.6",
     "@workday/design-assets-types": "^0.2.8",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "fc8abdabca2c55aad11f09a8f05570bd55aa3478"
+  "gitHead": "b7ac77e6032a2cf160d0dcad7bd6b8231c3d9e49"
 }

package/popup/lib/Popper.tsx

@@ -173,7 +173,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
           placement: popperPlacement,
           ...popperOptions,
           modifiers: [
-            placementModifier,      
+            placementModifier,
             {
               ...fallbackPlacementsModifier,
               options: {

package/popup/lib/PopupPopper.tsx

@@ -31,5 +31,21 @@ export const PopupPopper = createSubcomponent('div')({
   modelHook: usePopupModel,
   elemPropsHook: usePopupPopper,
 })<PopupPopperProps>(({children, ...elemProps}) => {
-  return <Popper {...elemProps}>{children}</Popper>;
+  return (
+    <Popper
+      popperOptions={{
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: () => [0, 4],
+            },
+          },
+        ],
+      }}
+      {...elemProps}
+    >
+      {children}
+    </Popper>
+  );
 });

package/select/index.ts

@@ -1,2 +1,2 @@
 export * from './lib/Select';
-export * from './lib/SelectOption';
+export * from './lib/hooks';

package/select/lib/Select.tsx

@@ -1,129 +1,193 @@
-import * as React from 'react';
+import React from 'react';
 import {
-  createComponent,
-  StyledType,
-  GrowthBehavior,
-  ErrorType,
-  errorRing,
-  styled,
+  createSubcomponent,
+  ExtractProps,
+  createContainer,
   Themeable,
 } 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 {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';
-import {SelectOption} from './SelectOption';
+import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
+import {useSelectModel, useSelectCard} from './hooks';
+import {useSelectInput} from './hooks/useSelectInput';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
 
-export interface SelectProps extends Themeable, GrowthBehavior {
-  /**
-   * The SelectOption children of the Select (must be at least two).
-   */
-  children: React.ReactElement<SelectOption> | React.ReactElement<SelectOption>[];
-  /**
-   * If true, set the Select to the disabled state.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * The type of error associated with the Select (if applicable).
-   */
-  error?: ErrorType;
+export interface SelectInputProps extends ExtractProps<typeof TextInput> {
   /**
-   * The function called when the Select state changes.
+   * The Icon to render at the start of the `input`. Use this prop if your options
+   * include icons that you would like to render in the `input` when selected.
+   * ** Note:An option must be selected in order to render and icon.**
    */
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  /**
-   * The value of the Select.
-   */
-  value?: string;
+  inputStartIcon?: CanvasSystemIcon;
 }
-
-const StyledSelect = styled('select')<SelectProps & StyledType>(
-  {
-    ...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, // Fix Safari
-    MozAppearance: 'none', // FF bugfix: hide arrow so it doesn't show under ours
-    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%',
-    }
+export const SelectInput = createSubcomponent(TextInput)({
+  modelHook: useSelectModel,
+  elemPropsHook: useSelectInput,
+})<SelectInputProps>(
+  ({placeholder = 'Choose an option', inputStartIcon, ...elemProps}, Element, model) => {
+    return (
+      <InputGroup>
+        {inputStartIcon && model.state.selectedIds.length > 0 && (
+          <InputGroup.InnerStart pointerEvents="none">
+            <SystemIcon icon={inputStartIcon} />
+          </InputGroup.InnerStart>
+        )}
+        <InputGroup.Input
+          as={Element}
+          placeholder={placeholder}
+          style={{caretColor: 'transparent', cursor: 'default'}}
+          {...elemProps}
+        ></InputGroup.Input>
+        <InputGroup.InnerEnd position="absolute" pointerEvents="none">
+          <SystemIcon icon={caretDownSmallIcon} />
+        </InputGroup.InnerEnd>
+      </InputGroup>
+    );
+  }
 );
 
-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,
   },
+})<ExtractProps<typeof Combobox.Menu.Item>>(({children, ...elemProps}, Element, _model) => {
+  return (
+    <Combobox.Menu.Item role="option" as={Element} {...elemProps}>
+      {children}
+    </Combobox.Menu.Item>
+  );
 });
 
-const SelectWrapper = styled('div')<Pick<SelectProps, 'grow' | 'disabled'>>(
-  {
-    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 SelectCard = createSubcomponent('div')({
+  modelHook: useSelectModel,
+  elemPropsHook: useSelectCard,
+})<ExtractProps<typeof Combobox.Menu.Card>>(({children, ...elemProps}, Element) => {
+  return (
+    <Combobox.Menu.Card maxHeight={300} as={Element} {...elemProps}>
+      {children}
+    </Combobox.Menu.Card>
+  );
+});
 
-export const Select = createComponent('select')({
+export interface SelectProps extends Themeable, ExtractProps<typeof Combobox> {}
+/**
+ * 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}: SelectProps, ref, Element) => (
-    <SelectWrapper grow={grow} disabled={disabled}>
-      <StyledSelect as={Element} disabled={disabled} grow={grow} ref={ref} {...elemProps}>
-        {children}
-      </StyledSelect>
-      <SelectDropdownIcon
-        icon={caretDownSmallIcon}
-        color={disabled ? colors.licorice100 : colors.licorice200}
-        colorHover={disabled ? colors.licorice100 : colors.licorice500}
-      />
-    </SelectWrapper>
-  ),
+  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,
   },
+})<SelectProps>(({children, ...elemProps}, _, model) => {
+  return (
+    <Combobox model={model} {...elemProps}>
+      {children}
+    </Combobox>
+  );
 });

package/select/lib/hooks/index.ts

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

package/select/lib/hooks/useSelectCard.ts

@@ -0,0 +1,11 @@
+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,
+  } as const;
+});

package/select/lib/hooks/useSelectInput.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+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: {keySofar?: string} = {}) => {
+    const {localRef, elementRef} = useLocalRef<HTMLInputElement>(
+      useForkRef(ref as React.Ref<HTMLElement>, 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: React.KeyboardEvent) {
+        // 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?.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?.keySofar === '') {
+            model.events.select({
+              id: model.state.cursorId,
+            });
+            model.events.hide();
+          }
+        }
+      },
+      ref: elementRef,
+      autoComplete: 'off',
+      defaultValue: model.state.selectedIds[0] || model.state.value,
+    } as const;
+  }),
+  useComboboxKeyboardTypeAhead,
+  useComboboxResetCursorToSelected,
+  useComboboxMoveCursorToSelected,
+  useComboboxInput
+);

package/select/lib/hooks/useSelectModel.tsx

@@ -0,0 +1,30 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from '@workday/canvas-kit-react/combobox';
+
+/**
+ * `SelectModel` extends the {@link ComboboxModel}. Selecting items from
+ * the menu will dispatch an
+ * [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event on the
+ * input which should work with form libraries, automation and autofill.
+ *
+ * ```tsx
+ * const model = useSelectModel({items: ['Mobile', 'Phone', 'E-Mail']})
+ *
+ * <Select model={model}>
+ *   ...
+ * </Select>
+ * ```
+ */
+export const useSelectModel = createModelHook({
+  defaultConfig: {
+    ...useComboboxModel.defaultConfig,
+    shouldVirtualize: false,
+  },
+  requiredConfig: {
+    ...useComboboxModel.requiredConfig,
+  },
+  contextOverride: useComboboxModel.Context,
+})(config => {
+  const model = useComboboxModel(config);
+  return model;
+});

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

@@ -1 +0,0 @@
-{"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/useComboboxLoader.d.ts.map

@@ -1 +0,0 @@
-{"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/useComboboxModel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/useComboboxModel.tsx"],"names":[],"mappings":"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"}

package/dist/commonjs/select/lib/SelectOption.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {
-    /**
-     * The value of the SelectOption.
-     */
-    value?: string;
-    /**
-     * The text of the SelectOption label.
-     */
-    label?: string;
-    /**
-     * If true, set the SelectOption to the disabled state.
-     * @default false
-     */
-    disabled?: boolean;
-}
-export declare class SelectOption extends React.Component<SelectOptionProps> {
-    render(): JSX.Element;
-}
-//# sourceMappingURL=SelectOption.d.ts.map

package/dist/commonjs/select/lib/SelectOption.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC3D,MAAM;CASd"}

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

@@ -1 +0,0 @@
-{"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/es6/combobox/lib/useComboboxLoader.d.ts.map

@@ -1 +0,0 @@
-{"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/es6/combobox/lib/useComboboxModel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/useComboboxModel.tsx"],"names":[],"mappings":"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"}

package/dist/es6/select/lib/SelectOption.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {
-    /**
-     * The value of the SelectOption.
-     */
-    value?: string;
-    /**
-     * The text of the SelectOption label.
-     */
-    label?: string;
-    /**
-     * If true, set the SelectOption to the disabled state.
-     * @default false
-     */
-    disabled?: boolean;
-}
-export declare class SelectOption extends React.Component<SelectOptionProps> {
-    render(): JSX.Element;
-}
-//# sourceMappingURL=SelectOption.d.ts.map