@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/dist/autocomplete/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { type MenuItemProps } from \"../menu/MenuItem.jsx\";\nimport {\n  type BaseSearchOptions,\n  type WhitespaceFilter,\n} from \"../searching/types.js\";\nimport { type RequireAtLeastOne, type TextExtractor } from \"../types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMenuLabel<\n  T extends { menuLabel?: string; menuLabelledBy?: string },\n> = RequireAtLeastOne<T, \"menuLabel\" | \"menuLabelledBy\">;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<T> = Pick<\n  Required<BaseSearchOptions<T>>,\n  \"list\" | \"query\" | \"extractor\" | \"whitespace\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<T> {\n  index: number;\n  option: T;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptionsProps<T> {\n  /**\n   * This list of options to display and will be filtered based on the current\n   * value in the text box unless {@link disableFilter} is `true`.\n   *\n   * When this is not a list of strings or a list of objects with a\n   * `{ label: string }`, the {@link extractor} is required to pull a searchable\n   * string from each option.\n   */\n  options: readonly T[];\n\n  /**\n   * This controls how the {@link options} are filtered based on the current\n   * value in the text box.\n   *\n   * @example Fuzzy Search\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete\n   *   {...props}\n   *   filter={fuzzySearch}\n   * />\n   * ```\n   *\n   * @defaultValue `caseInsensitiveSearch`\n   */\n  filter?(options: AutocompleteFilterOptions<T>): readonly T[];\n\n  /**\n   * @example\n   * ```tsx\n   * <Autocomplete\n   *   options={[{ children: \"Apple\" }, { children = \"Banana\" }]}\n   *   extractor={(option) => option.children}\n   *   {...props}\n   * />\n   * ```\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * This can be used to add additional props to each option.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getOptionProps={({ option }) => {\n   *   return {\n   *     disabled: option === \"\",\n   *     className: cnb(option === \"a\" && styles.blue),\n   *     leftAddon: option === value && <CheckIcon />,\n   *   };\n   * }}\n   * ```\n   */\n  getOptionProps?(\n    options: AutocompleteGetOptionPropsOptions<T>\n  ): Partial<MenuItemProps> | undefined;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * This will be called whenever one of the options are selected or reset.\n   */\n  onAutocomplete?(option: T | null): void;\n\n  /**\n   * @defaultValue `false`\n   */\n  clearOnAutocomplete?: boolean;\n\n  /**\n   * Set this to `true` to disable the built-in filtering of the\n   * {@link options}. This will always be `true` if `aria-autocomplete=\"none\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableFilter?: boolean;\n\n  /** @defaultValue `\"keep\"` */\n  whitespace?: WhitespaceFilter;\n}\n"],"names":[],"mappings":"AA+BA;;CAEC,GACD,WAuFC"}
+{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ChangeEventHandler,\n  type Dispatch,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n  type OptionProps,\n  type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n  type ComboboxMenuProps,\n  type ComboboxVisibilityOptions,\n  type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n  type EditableComboboxImplementation,\n  type EditableComboboxOptions,\n  type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n  type PropsWithRef,\n  type TextExtractor,\n  type UseStateInitializer,\n} from \"../types.js\";\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n */\nexport type AutocompleteLabeledOption = string | { label: string };\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport type AutocompleteOption = AutocompleteLabeledOption | {};\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n  Required<BaseSearchOptions<Option>>,\n  \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n  options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n  Option extends AutocompleteOption,\n> {\n  index: number;\n  query: string;\n  option: Option;\n  selected: boolean;\n  extractor: TextExtractor<Option>;\n}\n\n/**\n * This can be used to add additional props to each option.\n *\n * @example Simple Example\n * ```tsx\n * getOptionProps={({ option }) => {\n *   return {\n *     disabled: option === \"\",\n *     className: cnb(option === \"a\" && styles.blue),\n *     leftAddon: option === value && <CheckIcon />,\n *   };\n * }}\n * ```\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionProps<Option extends AutocompleteOption> = (\n  options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * This can be used to add additional props to each inline chip for multiselect\n * autocompletes.\n *\n * @example Simple Example\n * ```tsx\n * getChipProps={({ option, index }) => {\n *   return {\n *     disabled: index < 3,\n *     className: cnb(option === \"a\" && styles.blue)<\n *   };\n * }}\n * ```\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n  options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * If the list of options contain an object that doesn't have a\n * `label: string`, this prop must be provided to extract a string to display\n * in the text field once selected.\n *\n * @example No Getter Required\n * ```tsx\n * const options1 = ['a', 'b', 'c', 'd'];\n * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n *\n * <Autocomplete options={options1} />\n * <Autocomplete options={options2} />\n * ```\n *\n * @example Getter Required\n * ```tsx\n * const options = [\n *   {\n *     name: \"Alaska\",\n *     abbr: \"AK\",\n *   },\n *   {\n *     name: \"Arizona\",\n *     abbr: \"AZ\",\n *   }\n * ];\n *\n * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n * ```\n *\n * @defaultValue `defaultAutocompleteExtractor`\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabel<Option extends AutocompleteOption> = (\n  option: Option\n) => string;\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n  Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n  value: T;\n  setValue: Dispatch<T>;\n  defaultValue?: never;\n  onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n  value?: never;\n  setValue?: never;\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * This prop should be used when some action should occur whenever the value\n   * changes, but is not required to be stored in state. For all other cases, it\n   * is recommended to control the `value` instead of using this prop.\n   *\n   * @defaultValue `() => {}`\n   */\n  onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n  | AutocompleteControlledValue<T>\n  | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n  query: string;\n  setQuery: Dispatch<string>;\n  defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n  query?: never;\n  setQuery?: never;\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n  | AutocompleteControlledQuery\n  | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"as-is\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n  Option extends AutocompleteOption,\n> {\n  query?: string;\n  setQuery?: Dispatch<string>;\n  defaultQuery?: UseStateInitializer<string>;\n  value?: Option | null | readonly Option[];\n  setValue?: Dispatch<Option | null | readonly Option[]>;\n  defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n  onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutocompleteLabeledOption}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n  Option extends AutocompleteOption,\n> = Option extends AutocompleteLabeledOption\n  ? { getOptionLabel?: AutocompleteGetOptionLabel<Option> }\n  : { getOptionLabel: AutocompleteGetOptionLabel<Option> };\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<\n  Option extends AutocompleteOption,\n> {\n  /**\n   * The list of options that can be shown within the autocomplete and filtered\n   * based on the current query.\n   */\n  options: readonly Option[];\n\n  /** @see {@link AutocompleteGetOptionLabel} */\n  getOptionLabel?: AutocompleteGetOptionLabel<Option>;\n\n  /**\n   * The function that filters the {@link options} based on the current query\n   * and defaults to a case insensitive search that starts with the query.\n   *\n   * @example Case Insensitive Anywhere\n   * ```tsx\n   * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n   *\n   * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n   * ```\n   *\n   * @example Fuzzy Filtering\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete {...props} filter={fuzzySearch} />\n   * ```\n   *\n   * @example Async Searching\n   * ```tsx\n   * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n   * import { useState } from \"react\";\n   *\n   * interface State {\n   *   loading: boolean;\n   *   options: readonly string[];\n   * }\n   *\n   * function Example() {\n   *   const [state, setState] = useState<State>({\n   *     loading: false,\n   *     options: [],\n   *   });\n   *\n   *   const search = useDebouncedFunction(async (query: string) => {\n   *     setState(prev => ({ ...prev, loading: true }));\n   *\n   *     const options = await someAsyncTask(query);\n   *     setState({ loading: false, options })\n   *   });\n   *\n   *   return (\n   *     <Autocomplete\n   *       {...props}\n   *       // Setting `type=\"search\"` automatically updates the `filter` prop to\n   *       // be `noopAutocompleteFilter`\n   *       type=\"search\"\n   *       options={options}\n   *       onChange={(event) => search(event.currentTarget.value)}\n   *     />\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteFilter`\n   */\n  filter?: AutocompleteFilterFunction<Option>;\n\n  /**\n   * Set this to `true` to update the filtering behavior to also remove the\n   * selected value from the available options. This is mostly for the\n   * multiselect behavior.\n   *\n   * @defaultValue `false`\n   */\n  filterSelected?: boolean;\n\n  /**\n   * Set this to `true` to allow any value to be typed into the autocomplete\n   * instead of enforcing an empty string or one of the option labels.\n   *\n   * @defaultValue `filter === noopAutocompleteFilter`\n   */\n  allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n  Option extends AutocompleteOption,\n> extends AutocompleteFilteringOptions<Option>,\n    OptionSelectedIconProps {\n  /**\n   * Set this to `true` when using a multiselect autocomplete to update each\n   * option to use checkboxes to show the selection state.\n   *\n   * @defaultValue `false`\n   */\n  checkboxes?: boolean;\n\n  /**\n   * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n   * @defaultValue `!checkboxes`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @see {@link AutocompleteUpdateQueryOnSelect}\n   * @defaultValue `multiselect ? \"clear\" : \"as-is\"`\n   */\n  updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n  /**\n   * Set this to `true` to prevent the listbox from closing when an option is\n   * selected.\n   *\n   * @defaultValue `checkboxes`\n   */\n  disableCloseOnSelect?: boolean;\n\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps?: AutocompleteGetOptionProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxOptions<ComboboxEl, PopupEl>,\n    AutocompleteFilterAndListboxOptions<Option> {\n  onBlur?: FocusEventHandler<ComboboxEl>;\n  onChange?: ChangeEventHandler<ComboboxEl>;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n    AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n  \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n  value: string;\n  onBlur: FocusEventHandler<ComboboxEl>;\n  onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n  T extends AutocompleteOption = AutocompleteOption,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">,\n    OptionSelectedIconProps {\n  value: T | null | readonly T[];\n  setValue: Dispatch<T>;\n  onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n  extends ConfigurableComboboxMenuProps,\n    OptionSelectedIconProps {\n  id?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n  /** @defaultValue `\"Clear\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n  id?: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps\n  extends ConfigurableAutocompleteClearButtonProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n  extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.listboxLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n  \"aria-labelledby\"?: string;\n\n  /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n  id?: string;\n\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps\n  extends ConfigurableAutocompleteDropdownButtonProps {\n  \"aria-controls\": string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps\n  extends CircularProgressProps {\n  /** @defaultValue `\"Loading\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"current-color\"` */\n  theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n  /**\n   * @defaultValue `typeof children === \"string\" && \\`Remove \"${children}\"\\`\n   */\n  \"aria-description\"?: string;\n\n  /** @defaultValue `getIcon(\"remove\")` */\n  removeIcon?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxImplementation<ComboboxEl, PopupEl> {\n  query: string;\n  setQuery: Dispatch<string>;\n  comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n  /**\n   * This is a convenience prop to determine if the autocomplete supports\n   * multiselect.\n   */\n  multiselect: boolean;\n\n  /**\n   * This is the current list of options that will be filtered based on the\n   * current `query`. This should normally be rendered in the\n   * `AutocompleteListboxChildren` component\n   */\n  availableOptions: readonly Option[];\n\n  /**\n   * Generates the props required for the `Listbox` component and should\n   * normally be provided any menu props that might override the default display\n   * settings.\n   */\n  getListboxProps: (\n    overrides?: ConfigurableAutocompleteListboxProps\n  ) => AutocompleteListboxProps<Option, PopupEl>;\n\n  /**\n   * Generates the props required for the `AutocompleteClearButton`.\n   */\n  getClearButtonProps: (\n    overrides?: ConfigurableAutocompleteClearButtonProps\n  ) => AutocompleteClearButtonProps;\n\n  /**\n   * Generates the props required for the `AutocompleteDropdownButton`.\n   */\n  getDropdownButtonProps: (\n    overrides?: ConfigurableAutocompleteDropdownButtonProps\n  ) => AutocompleteDropdownButtonProps;\n\n  /** @see {@link AutocompleteGetOptionLabel} */\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps: AutocompleteGetOptionProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null;\n  setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: readonly Option[];\n  setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null | readonly Option[];\n  setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n  extends Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n    AutocompleteFilterAndListboxOptions<Option>,\n    ComboboxVisibilityOptions {\n  inputRef?: Ref<HTMLInputElement>;\n\n  /**\n   * An `aria-label` to pass to the `Listbox` component that describes the list\n   * of {@link options}. Either this or the {@link listboxLabelledBy} are\n   * required for accessibility.\n   */\n  listboxLabel?: string;\n\n  /**\n   * An `aria-labelledby` to pass to the `Listbox` component that describes the\n   * list of {@link options}. Either this or the {@link listboxLabel} are\n   * required for accessibility.\n   */\n  listboxLabelledBy?: string;\n\n  /**\n   * Any additional props that should be passed to the `Listbox` component.\n   */\n  listboxProps?: PropsWithRef<\n    ConfigurableAutocompleteListboxProps,\n    HTMLDivElement\n  >;\n\n  /** @see {@link AutocompleteGetOptionProps} */\n  getOptionProps?: AutocompleteGetOptionProps<Option>;\n\n  /**\n   * This can be used to add any custom styling, change the icon, change the\n   * label, etc for the dropdown button.\n   *\n   * @example Simple Example\n   * ```tsx\n   * dropdownButtonProps={{\n   *   \"aria-label\": \"Open\",\n   *   className: styles.dropdownButton,\n   *   icon: <MyCustomDropdownIcon />,\n   * }}\n   * ```\n   */\n  dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n  /**\n   * Set this to `true` to remove the {@link DropdownButton} from being rendered\n   * after the input element.\n   *\n   * @defaultValue `false`\n   */\n  disableDropdownButton?: boolean;\n\n  /**\n   * Set this to `true` to disable a `<CircularProgress />` after the input and\n   * before the `<DropdownButton />`.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n   */\n  loadingProps?: AutocompleteCircularProgressProps;\n\n  clearButtonProps?: PropsWithRef<\n    ConfigurableAutocompleteClearButtonProps,\n    HTMLButtonElement\n  >;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableClearButton?: boolean;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * Set this to `true` when using a multiselect autocomplete to prevent the\n   * selected values from being rendered inline with the input. This is useful\n   * when the selected values should be shown in a different part of the UI\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  disableInlineChips?: boolean;\n\n  /** @see {@link AutocompleteGetChipProps} */\n  getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n  | { listboxLabel: string }\n  | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n  Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery &\n  AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<Option | null> & {\n      checkboxes?: never;\n      getChipProps?: never;\n      disableInlineChips?: never;\n    };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n  AutocompleteBaseProps<Option> &\n    AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AA+xBA;;CAEC,GACD,WAEoD"}

package/dist/autocomplete/useAutocomplete.d.ts

@@ -0,0 +1,22 @@
+import { type EditableHTMLElement } from "../form/utils.js";
+import { type AutocompleteImplementation, type AutocompleteMultiSelectImplementation, type AutocompleteMultiSelectOptions, type AutocompleteOption, type AutocompleteOptions, type AutocompleteSingleSelectImplementation, type AutocompleteSingleSelectOptions } from "./types.js";
+/**
+ * This is the single select autocomplete implementation.
+ *
+ * @since 6.0.0
+ */
+export declare function useAutocomplete<Option extends AutocompleteOption, ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: AutocompleteSingleSelectOptions<Option, ComboboxEl, PopupEl>): AutocompleteSingleSelectImplementation<Option, ComboboxEl, PopupEl>;
+/**
+ * This is the multiselect autocomplete implementation.
+ *
+ * @since 6.0.0
+ */
+export declare function useAutocomplete<Option extends AutocompleteOption, ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: AutocompleteMultiSelectOptions<Option, ComboboxEl, PopupEl>): AutocompleteMultiSelectImplementation<Option, ComboboxEl, PopupEl>;
+/**
+ * This is an internal override implementation where the types are less strict
+ * so it can be used with the `Autocomplete` component.
+ *
+ * @since 6.0.0
+ * @internal
+ */
+export declare function useAutocomplete<Option extends AutocompleteOption, ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: AutocompleteOptions<Option, ComboboxEl, PopupEl>): AutocompleteImplementation<Option, ComboboxEl, PopupEl>;

package/dist/autocomplete/useAutocomplete.js

@@ -0,0 +1,281 @@
+"use client";
+import { useCallback, useMemo, useRef } from "react";
+import { useEditableCombobox } from "../form/useEditableCombobox.js";
+import { triggerManualChangeEvent } from "../form/utils.js";
+import { getIcon } from "../icon/iconConfig.js";
+import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
+import { TRANSITION_CONFIG } from "../transition/config.js";
+import { useEnsuredState } from "../useEnsuredState.js";
+import { defaultAutocompleteExtractor, defaultAutocompleteFilter, defaultAutocompleteGetOptionProps, noopAutocompleteFilter } from "./defaults.js";
+import { enforceSelectedValue, getDefaultQuery, getDefaultValue, isMultipleValues } from "./utils.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * @since 6.0.0
+ * @internal
+ */ export function useAutocomplete(options) {
+    const { value: propValue, setValue: propSetValue, defaultValue, onValueChange = noop, query: propQuery, setQuery: propSetQuery, defaultQuery, options: values, getOptionLabel = defaultAutocompleteExtractor, getOptionProps = defaultAutocompleteGetOptionProps, onBlur = noop, onChange = noop, onOpen = noop, filter = defaultAutocompleteFilter, filterSelected, allowAnyValue = filter === noopAutocompleteFilter, multiselect: propMultiselect, checkboxes, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter, disableSelectedIcon: propDisableSelectedIcon, updateQueryOnSelect: propUpdateQueryOnSelect, disableCloseOnSelect: propDisableCloseOnSelect, ...comboboxOptions } = options;
+    const mode = useUserInteractionMode();
+    const [value, setValueState] = useEnsuredState({
+        value: propValue,
+        setValue: propSetValue,
+        defaultValue: getDefaultValue({
+            query: propQuery,
+            filter,
+            multiselect: propMultiselect,
+            defaultQuery,
+            defaultValue,
+            options: values,
+            getOptionLabel
+        })
+    });
+    const multiselect = propMultiselect ?? (!!value && typeof value === "object" && "length" in value);
+    let updateQueryOnSelect = propUpdateQueryOnSelect;
+    if (typeof propUpdateQueryOnSelect === "undefined") {
+        updateQueryOnSelect = multiselect ? "clear" : "selected";
+    }
+    const disableCloseOnSelect = propDisableCloseOnSelect ?? (multiselect && checkboxes);
+    const [query, setQuery] = useEnsuredState({
+        value: propQuery,
+        setValue: propSetQuery,
+        defaultValue: getDefaultQuery({
+            value,
+            getOptionLabel,
+            defaultQuery
+        })
+    });
+    const setValue = useCallback((value)=>{
+        onValueChange(value);
+        setValueState(value);
+    }, [
+        onValueChange,
+        setValueState
+    ]);
+    const combobox = useEditableCombobox({
+        ...comboboxOptions,
+        multiselect
+    });
+    const { visible, setVisible, popupRef, comboboxRef, comboboxProps, getMenuProps } = combobox;
+    // These refs are used to make it so that the options are not filtered until
+    // the user types a new query while the listbox is visible. The filtered
+    // options will be "cached" while:
+    // - the listbox is closing
+    // - the listbox is opening and:
+    //   - the user has not typed at least one letter
+    //   - the options have not changed
+    const entered = useRef(visible);
+    const initialQuery = useRef("");
+    const prevAvailableOptions = useRef(null);
+    const isQueryChange = query && query !== initialQuery.current && entered.current;
+    let availableOptions = prevAvailableOptions.current || values;
+    if (isQueryChange && filter !== noopAutocompleteFilter && !prevAvailableOptions.current) {
+        initialQuery.current = "";
+        availableOptions = filter({
+            list: values,
+            query,
+            extractor: getOptionLabel
+        });
+    }
+    // This is probably overkill, but `filterSelected` will create a quick-lookup
+    // for all the selected values in a `Set` since it is much faster than
+    // `Array.includes()`. The lookup will only be re-created whenever the `value`
+    // changes or is uninitialized to prevent it being created each render as
+    // well.
+    //
+    // These optimizations only start mattering when there are around 5000 items
+    // selected...
+    const selectedOptions = useMemo(()=>{
+        if (!filterSelected) {
+            return null;
+        }
+        let optionList = [];
+        if (isMultipleValues(value)) {
+            optionList = value;
+        } else if (value) {
+            optionList = [
+                value
+            ];
+        }
+        return new Set(optionList);
+    }, [
+        filterSelected,
+        value
+    ]);
+    if (filterSelected && selectedOptions?.size) {
+        availableOptions = availableOptions.filter((option)=>!selectedOptions.has(option));
+    }
+    return {
+        ...combobox,
+        value,
+        setValue,
+        query,
+        setQuery,
+        availableOptions,
+        multiselect,
+        comboboxProps: {
+            ...comboboxProps,
+            "aria-autocomplete": "list",
+            value: query,
+            onKeyDown (event) {
+                comboboxProps.onKeyDown(event);
+                if (!visible && event.key === "Escape") {
+                    setQuery("");
+                }
+            },
+            onBlur (event) {
+                onBlur(event);
+                if (allowAnyValue) {
+                    return;
+                }
+                enforceSelectedValue({
+                    value,
+                    visible,
+                    popupRef,
+                    container: event.currentTarget.parentElement,
+                    comboboxRef,
+                    getOptionLabel,
+                    availableOptions,
+                    prevAvailableOptions
+                });
+            },
+            onFocus (event) {
+                comboboxProps.onFocus(event);
+                event.currentTarget.select();
+            },
+            onChange (event) {
+                onChange(event);
+                const { value } = event.currentTarget;
+                setQuery(value);
+                if (!value && !multiselect) {
+                    setValue(null);
+                }
+            }
+        },
+        getListboxProps (overrides) {
+            const { ref, onEnter, onEntered, onExited, disableTransition, ...listboxProps } = getMenuProps(overrides);
+            const isTransitionCompleteSkipped = !disableTransition && !TRANSITION_CONFIG.disabled;
+            const handleEntering = (callback = noop, skipped)=>(appearing)=>{
+                    callback(appearing);
+                    if (skipped) {
+                        return;
+                    }
+                    onOpen();
+                    // when the listbox is opened, need to flag the entered state to show
+                    // that new `query` values should be accepted. Also store the initial
+                    // query.
+                    entered.current = true;
+                    initialQuery.current = query;
+                };
+            let selectedIcon = propSelectedIcon;
+            let unselectedIcon = propUnselectedIcon;
+            let disableSelectedIcon = propDisableSelectedIcon;
+            if (multiselect && checkboxes) {
+                if (typeof selectedIcon === "undefined") {
+                    selectedIcon = getIcon("checkboxChecked");
+                }
+                if (typeof unselectedIcon === "undefined") {
+                    unselectedIcon = getIcon("checkbox");
+                }
+            } else if (typeof disableSelectedIcon === "undefined") {
+                disableSelectedIcon = true;
+            }
+            return {
+                selectedIcon,
+                unselectedIcon,
+                selectedIconAfter,
+                disableSelectedIcon,
+                ...listboxProps,
+                disableTransition,
+                onRequestClose () {
+                    // Make it so clicking on the text field, clear button, dropdown
+                    // button, etc does not close the listbox
+                    if (mode !== "keyboard" && comboboxRef.current?.parentElement?.contains(document.activeElement)) {
+                        return;
+                    }
+                    listboxProps.onRequestClose();
+                },
+                nodeRef: ref,
+                value,
+                setValue (option) {
+                    if (!disableCloseOnSelect) {
+                        // this makes it so that the options are not filtered again while the
+                        // listbox is closing after selecting a value
+                        prevAvailableOptions.current = availableOptions;
+                    }
+                    if (value && typeof value === "object" && "length" in value) {
+                        const nextValue = [
+                            ...value
+                        ];
+                        const i = value.indexOf(option);
+                        if (i === -1) {
+                            nextValue.push(option);
+                        } else {
+                            nextValue.splice(i, 1);
+                        }
+                        setValue(nextValue);
+                    } else {
+                        setValue(option);
+                    }
+                    if (updateQueryOnSelect === "as-is") {
+                        return;
+                    }
+                    const nextQuery = updateQueryOnSelect === "clear" ? "" : getOptionLabel(option);
+                    triggerManualChangeEvent(comboboxRef.current, nextQuery);
+                },
+                onEnter: handleEntering(onEnter, false),
+                onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),
+                onExited () {
+                    onExited();
+                    // once the listbox has exited, reset any cached states so the next
+                    // time the listbox is opened the filtering behaves the same
+                    entered.current = false;
+                    prevAvailableOptions.current = null;
+                }
+            };
+        },
+        getOptionLabel,
+        getOptionProps (options) {
+            const overrides = getOptionProps(options);
+            return {
+                ...overrides,
+                onClick: (event)=>{
+                    overrides?.onClick?.(event);
+                    if (disableCloseOnSelect) {
+                        event.stopPropagation();
+                    }
+                }
+            };
+        },
+        getClearButtonProps (overrides) {
+            return {
+                ...overrides,
+                onClick (event) {
+                    overrides?.onClick?.(event);
+                    comboboxRef.current?.focus();
+                    if (!multiselect) {
+                        setValue(null);
+                    }
+                    triggerManualChangeEvent(comboboxRef.current, "");
+                }
+            };
+        },
+        getDropdownButtonProps (overrides) {
+            return {
+                "aria-controls": comboboxProps.id,
+                visible,
+                ...overrides,
+                onClick (event) {
+                    overrides?.onClick?.(event);
+                    comboboxRef.current?.focus();
+                    if (visible) {
+                        prevAvailableOptions.current = availableOptions;
+                    }
+                    setVisible((prev)=>!prev);
+                }
+            };
+        }
+    };
+}
+
+//# sourceMappingURL=useAutocomplete.js.map

package/dist/autocomplete/useAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/useAutocomplete.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useEditableCombobox } from \"../form/useEditableCombobox.js\";\nimport {\n  triggerManualChangeEvent,\n  type EditableHTMLElement,\n} from \"../form/utils.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport { type TransitionEnterHandler } from \"../transition/types.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  defaultAutocompleteExtractor,\n  defaultAutocompleteFilter,\n  defaultAutocompleteGetOptionProps,\n  noopAutocompleteFilter,\n} from \"./defaults.js\";\nimport {\n  type AutocompleteImplementation,\n  type AutocompleteMultiSelectImplementation,\n  type AutocompleteMultiSelectOptions,\n  type AutocompleteOption,\n  type AutocompleteOptions,\n  type AutocompleteSingleSelectImplementation,\n  type AutocompleteSingleSelectOptions,\n} from \"./types.js\";\nimport {\n  enforceSelectedValue,\n  getDefaultQuery,\n  getDefaultValue,\n  isMultipleValues,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is the single select autocomplete implementation.\n *\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteSingleSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteSingleSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is the multiselect autocomplete implementation.\n *\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteMultiSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteMultiSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is an internal override implementation where the types are less strict\n * so it can be used with the `Autocomplete` component.\n *\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl> {\n  const {\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    onValueChange = noop,\n    query: propQuery,\n    setQuery: propSetQuery,\n    defaultQuery,\n    options: values,\n    getOptionLabel = defaultAutocompleteExtractor,\n    getOptionProps = defaultAutocompleteGetOptionProps,\n    onBlur = noop,\n    onChange = noop,\n    onOpen = noop,\n    filter = defaultAutocompleteFilter,\n    filterSelected,\n    allowAnyValue = filter === noopAutocompleteFilter,\n    multiselect: propMultiselect,\n    checkboxes,\n    selectedIcon: propSelectedIcon,\n    unselectedIcon: propUnselectedIcon,\n    selectedIconAfter,\n    disableSelectedIcon: propDisableSelectedIcon,\n    updateQueryOnSelect: propUpdateQueryOnSelect,\n    disableCloseOnSelect: propDisableCloseOnSelect,\n    ...comboboxOptions\n  } = options;\n\n  const mode = useUserInteractionMode();\n  const [value, setValueState] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getDefaultValue({\n      query: propQuery,\n      filter,\n      multiselect: propMultiselect,\n      defaultQuery,\n      defaultValue,\n      options: values,\n      getOptionLabel,\n    }),\n  });\n  const multiselect =\n    propMultiselect ??\n    (!!value && typeof value === \"object\" && \"length\" in value);\n  let updateQueryOnSelect = propUpdateQueryOnSelect;\n  if (typeof propUpdateQueryOnSelect === \"undefined\") {\n    updateQueryOnSelect = multiselect ? \"clear\" : \"selected\";\n  }\n\n  const disableCloseOnSelect =\n    propDisableCloseOnSelect ?? (multiselect && checkboxes);\n\n  const [query, setQuery] = useEnsuredState({\n    value: propQuery,\n    setValue: propSetQuery,\n    defaultValue: getDefaultQuery({\n      value,\n      getOptionLabel,\n      defaultQuery,\n    }),\n  });\n  const setValue = useCallback(\n    (value: Option | null | readonly Option[]) => {\n      onValueChange(value);\n      setValueState(value);\n    },\n    [onValueChange, setValueState]\n  );\n\n  const combobox = useEditableCombobox<ComboboxEl, PopupEl>({\n    ...comboboxOptions,\n    multiselect,\n  });\n  const {\n    visible,\n    setVisible,\n    popupRef,\n    comboboxRef,\n    comboboxProps,\n    getMenuProps,\n  } = combobox;\n\n  // These refs are used to make it so that the options are not filtered until\n  // the user types a new query while the listbox is visible. The filtered\n  // options will be \"cached\" while:\n  // - the listbox is closing\n  // - the listbox is opening and:\n  //   - the user has not typed at least one letter\n  //   - the options have not changed\n  const entered = useRef(visible);\n  const initialQuery = useRef(\"\");\n  const prevAvailableOptions = useRef<readonly Option[] | null>(null);\n  const isQueryChange =\n    query && query !== initialQuery.current && entered.current;\n\n  let availableOptions = prevAvailableOptions.current || values;\n  if (\n    isQueryChange &&\n    filter !== noopAutocompleteFilter &&\n    !prevAvailableOptions.current\n  ) {\n    initialQuery.current = \"\";\n    availableOptions = filter({\n      list: values,\n      query,\n      extractor: getOptionLabel,\n    });\n  }\n\n  // This is probably overkill, but `filterSelected` will create a quick-lookup\n  // for all the selected values in a `Set` since it is much faster than\n  // `Array.includes()`. The lookup will only be re-created whenever the `value`\n  // changes or is uninitialized to prevent it being created each render as\n  // well.\n  //\n  // These optimizations only start mattering when there are around 5000 items\n  // selected...\n  const selectedOptions = useMemo(() => {\n    if (!filterSelected) {\n      return null;\n    }\n\n    let optionList: readonly Option[] = [];\n    if (isMultipleValues(value)) {\n      optionList = value;\n    } else if (value) {\n      optionList = [value];\n    }\n\n    return new Set(optionList);\n  }, [filterSelected, value]);\n\n  if (filterSelected && selectedOptions?.size) {\n    availableOptions = availableOptions.filter(\n      (option) => !selectedOptions.has(option)\n    );\n  }\n\n  return {\n    ...combobox,\n    value,\n    setValue,\n    query,\n    setQuery,\n    availableOptions,\n    multiselect,\n    comboboxProps: {\n      ...comboboxProps,\n      \"aria-autocomplete\": \"list\",\n      value: query,\n      onKeyDown(event) {\n        comboboxProps.onKeyDown(event);\n        if (!visible && event.key === \"Escape\") {\n          setQuery(\"\");\n        }\n      },\n      onBlur(event) {\n        onBlur(event);\n\n        if (allowAnyValue) {\n          return;\n        }\n\n        enforceSelectedValue({\n          value,\n          visible,\n          popupRef,\n          container: event.currentTarget.parentElement,\n          comboboxRef,\n          getOptionLabel,\n          availableOptions,\n          prevAvailableOptions,\n        });\n      },\n      onFocus(event) {\n        comboboxProps.onFocus(event);\n        event.currentTarget.select();\n      },\n      onChange(event) {\n        onChange(event);\n\n        const { value } = event.currentTarget;\n        setQuery(value);\n        if (!value && !multiselect) {\n          setValue(null);\n        }\n      },\n    },\n    getListboxProps(overrides) {\n      const {\n        ref,\n        onEnter,\n        onEntered,\n        onExited,\n        disableTransition,\n        ...listboxProps\n      } = getMenuProps(overrides);\n\n      const isTransitionCompleteSkipped =\n        !disableTransition && !TRANSITION_CONFIG.disabled;\n\n      const handleEntering =\n        (callback: TransitionEnterHandler = noop, skipped: boolean) =>\n        (appearing: boolean) => {\n          callback(appearing);\n\n          if (skipped) {\n            return;\n          }\n\n          onOpen();\n\n          // when the listbox is opened, need to flag the entered state to show\n          // that new `query` values should be accepted. Also store the initial\n          // query.\n          entered.current = true;\n          initialQuery.current = query;\n        };\n\n      let selectedIcon = propSelectedIcon;\n      let unselectedIcon = propUnselectedIcon;\n      let disableSelectedIcon = propDisableSelectedIcon;\n      if (multiselect && checkboxes) {\n        if (typeof selectedIcon === \"undefined\") {\n          selectedIcon = getIcon(\"checkboxChecked\");\n        }\n        if (typeof unselectedIcon === \"undefined\") {\n          unselectedIcon = getIcon(\"checkbox\");\n        }\n      } else if (typeof disableSelectedIcon === \"undefined\") {\n        disableSelectedIcon = true;\n      }\n\n      return {\n        selectedIcon,\n        unselectedIcon,\n        selectedIconAfter,\n        disableSelectedIcon,\n        ...listboxProps,\n        disableTransition,\n        onRequestClose() {\n          // Make it so clicking on the text field, clear button, dropdown\n          // button, etc does not close the listbox\n          if (\n            mode !== \"keyboard\" &&\n            comboboxRef.current?.parentElement?.contains(document.activeElement)\n          ) {\n            return;\n          }\n\n          listboxProps.onRequestClose();\n        },\n        nodeRef: ref,\n        value,\n        setValue(option) {\n          if (!disableCloseOnSelect) {\n            // this makes it so that the options are not filtered again while the\n            // listbox is closing after selecting a value\n            prevAvailableOptions.current = availableOptions;\n          }\n\n          if (value && typeof value === \"object\" && \"length\" in value) {\n            const nextValue = [...value];\n            const i = value.indexOf(option);\n            if (i === -1) {\n              nextValue.push(option);\n            } else {\n              nextValue.splice(i, 1);\n            }\n\n            setValue(nextValue);\n          } else {\n            setValue(option);\n          }\n\n          if (updateQueryOnSelect === \"as-is\") {\n            return;\n          }\n\n          const nextQuery =\n            updateQueryOnSelect === \"clear\" ? \"\" : getOptionLabel(option);\n          triggerManualChangeEvent(comboboxRef.current, nextQuery);\n        },\n        onEnter: handleEntering(onEnter, false),\n        onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),\n        onExited() {\n          onExited();\n\n          // once the listbox has exited, reset any cached states so the next\n          // time the listbox is opened the filtering behaves the same\n          entered.current = false;\n          prevAvailableOptions.current = null;\n        },\n      };\n    },\n    getOptionLabel,\n    getOptionProps(options) {\n      const overrides = getOptionProps(options);\n\n      return {\n        ...overrides,\n        onClick: (event) => {\n          overrides?.onClick?.(event);\n          if (disableCloseOnSelect) {\n            event.stopPropagation();\n          }\n        },\n      };\n    },\n    getClearButtonProps(overrides) {\n      return {\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n\n          if (!multiselect) {\n            setValue(null);\n          }\n          triggerManualChangeEvent(comboboxRef.current, \"\");\n        },\n      };\n    },\n    getDropdownButtonProps(overrides) {\n      return {\n        \"aria-controls\": comboboxProps.id,\n        visible,\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n          if (visible) {\n            prevAvailableOptions.current = availableOptions;\n          }\n          setVisible((prev) => !prev);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useMemo","useRef","useEditableCombobox","triggerManualChangeEvent","getIcon","useUserInteractionMode","TRANSITION_CONFIG","useEnsuredState","defaultAutocompleteExtractor","defaultAutocompleteFilter","defaultAutocompleteGetOptionProps","noopAutocompleteFilter","enforceSelectedValue","getDefaultQuery","getDefaultValue","isMultipleValues","noop","useAutocomplete","options","value","propValue","setValue","propSetValue","defaultValue","onValueChange","query","propQuery","setQuery","propSetQuery","defaultQuery","values","getOptionLabel","getOptionProps","onBlur","onChange","onOpen","filter","filterSelected","allowAnyValue","multiselect","propMultiselect","checkboxes","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","updateQueryOnSelect","propUpdateQueryOnSelect","disableCloseOnSelect","propDisableCloseOnSelect","comboboxOptions","mode","setValueState","combobox","visible","setVisible","popupRef","comboboxRef","comboboxProps","getMenuProps","entered","initialQuery","prevAvailableOptions","isQueryChange","current","availableOptions","list","extractor","selectedOptions","optionList","Set","size","option","has","onKeyDown","event","key","container","currentTarget","parentElement","onFocus","select","getListboxProps","overrides","ref","onEnter","onEntered","onExited","disableTransition","listboxProps","isTransitionCompleteSkipped","disabled","handleEntering","callback","skipped","appearing","onRequestClose","contains","document","activeElement","nodeRef","nextValue","i","indexOf","push","splice","nextQuery","onClick","stopPropagation","getClearButtonProps","focus","getDropdownButtonProps","id","prev"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACrD,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SACEC,wBAAwB,QAEnB,mBAAmB;AAC1B,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,sBAAsB,QAAQ,gDAAgD;AACvF,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SACEC,4BAA4B,EAC5BC,yBAAyB,EACzBC,iCAAiC,EACjCC,sBAAsB,QACjB,gBAAgB;AAUvB,SACEC,oBAAoB,EACpBC,eAAe,EACfC,eAAe,EACfC,gBAAgB,QACX,aAAa;AAEpB,MAAMC,OAAO;AACX,aAAa;AACf;AAwCA;;;CAGC,GACD,OAAO,SAASC,gBAKdC,OAAyD;IAEzD,MAAM,EACJC,OAAOC,SAAS,EAChBC,UAAUC,YAAY,EACtBC,YAAY,EACZC,gBAAgBR,IAAI,EACpBS,OAAOC,SAAS,EAChBC,UAAUC,YAAY,EACtBC,YAAY,EACZX,SAASY,MAAM,EACfC,iBAAiBvB,4BAA4B,EAC7CwB,iBAAiBtB,iCAAiC,EAClDuB,SAASjB,IAAI,EACbkB,WAAWlB,IAAI,EACfmB,SAASnB,IAAI,EACboB,SAAS3B,yBAAyB,EAClC4B,cAAc,EACdC,gBAAgBF,WAAWzB,sBAAsB,EACjD4B,aAAaC,eAAe,EAC5BC,UAAU,EACVC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,iBAAiB,EACjBC,qBAAqBC,uBAAuB,EAC5CC,qBAAqBC,uBAAuB,EAC5CC,sBAAsBC,wBAAwB,EAC9C,GAAGC,iBACJ,GAAGnC;IAEJ,MAAMoC,OAAOjD;IACb,MAAM,CAACc,OAAOoC,cAAc,GAAGhD,gBAAgB;QAC7CY,OAAOC;QACPC,UAAUC;QACVC,cAAcT,gBAAgB;YAC5BW,OAAOC;YACPU;YACAG,aAAaC;YACbX;YACAN;YACAL,SAASY;YACTC;QACF;IACF;IACA,MAAMQ,cACJC,mBACC,CAAA,CAAC,CAACrB,SAAS,OAAOA,UAAU,YAAY,YAAYA,KAAI;IAC3D,IAAI8B,sBAAsBC;IAC1B,IAAI,OAAOA,4BAA4B,aAAa;QAClDD,sBAAsBV,cAAc,UAAU;IAChD;IAEA,MAAMY,uBACJC,4BAA6Bb,CAAAA,eAAeE,UAAS;IAEvD,MAAM,CAAChB,OAAOE,SAAS,GAAGpB,gBAAgB;QACxCY,OAAOO;QACPL,UAAUO;QACVL,cAAcV,gBAAgB;YAC5BM;YACAY;YACAF;QACF;IACF;IACA,MAAMR,WAAWtB,YACf,CAACoB;QACCK,cAAcL;QACdoC,cAAcpC;IAChB,GACA;QAACK;QAAe+B;KAAc;IAGhC,MAAMC,WAAWtD,oBAAyC;QACxD,GAAGmD,eAAe;QAClBd;IACF;IACA,MAAM,EACJkB,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRC,WAAW,EACXC,aAAa,EACbC,YAAY,EACb,GAAGN;IAEJ,4EAA4E;IAC5E,wEAAwE;IACxE,kCAAkC;IAClC,2BAA2B;IAC3B,gCAAgC;IAChC,iDAAiD;IACjD,mCAAmC;IACnC,MAAMO,UAAU9D,OAAOwD;IACvB,MAAMO,eAAe/D,OAAO;IAC5B,MAAMgE,uBAAuBhE,OAAiC;IAC9D,MAAMiE,gBACJzC,SAASA,UAAUuC,aAAaG,OAAO,IAAIJ,QAAQI,OAAO;IAE5D,IAAIC,mBAAmBH,qBAAqBE,OAAO,IAAIrC;IACvD,IACEoC,iBACA9B,WAAWzB,0BACX,CAACsD,qBAAqBE,OAAO,EAC7B;QACAH,aAAaG,OAAO,GAAG;QACvBC,mBAAmBhC,OAAO;YACxBiC,MAAMvC;YACNL;YACA6C,WAAWvC;QACb;IACF;IAEA,6EAA6E;IAC7E,sEAAsE;IACtE,8EAA8E;IAC9E,yEAAyE;IACzE,QAAQ;IACR,EAAE;IACF,4EAA4E;IAC5E,cAAc;IACd,MAAMwC,kBAAkBvE,QAAQ;QAC9B,IAAI,CAACqC,gBAAgB;YACnB,OAAO;QACT;QAEA,IAAImC,aAAgC,EAAE;QACtC,IAAIzD,iBAAiBI,QAAQ;YAC3BqD,aAAarD;QACf,OAAO,IAAIA,OAAO;YAChBqD,aAAa;gBAACrD;aAAM;QACtB;QAEA,OAAO,IAAIsD,IAAID;IACjB,GAAG;QAACnC;QAAgBlB;KAAM;IAE1B,IAAIkB,kBAAkBkC,iBAAiBG,MAAM;QAC3CN,mBAAmBA,iBAAiBhC,MAAM,CACxC,CAACuC,SAAW,CAACJ,gBAAgBK,GAAG,CAACD;IAErC;IAEA,OAAO;QACL,GAAGnB,QAAQ;QACXrC;QACAE;QACAI;QACAE;QACAyC;QACA7B;QACAsB,eAAe;YACb,GAAGA,aAAa;YAChB,qBAAqB;YACrB1C,OAAOM;YACPoD,WAAUC,KAAK;gBACbjB,cAAcgB,SAAS,CAACC;gBACxB,IAAI,CAACrB,WAAWqB,MAAMC,GAAG,KAAK,UAAU;oBACtCpD,SAAS;gBACX;YACF;YACAM,QAAO6C,KAAK;gBACV7C,OAAO6C;gBAEP,IAAIxC,eAAe;oBACjB;gBACF;gBAEA1B,qBAAqB;oBACnBO;oBACAsC;oBACAE;oBACAqB,WAAWF,MAAMG,aAAa,CAACC,aAAa;oBAC5CtB;oBACA7B;oBACAqC;oBACAH;gBACF;YACF;YACAkB,SAAQL,KAAK;gBACXjB,cAAcsB,OAAO,CAACL;gBACtBA,MAAMG,aAAa,CAACG,MAAM;YAC5B;YACAlD,UAAS4C,KAAK;gBACZ5C,SAAS4C;gBAET,MAAM,EAAE3D,KAAK,EAAE,GAAG2D,MAAMG,aAAa;gBACrCtD,SAASR;gBACT,IAAI,CAACA,SAAS,CAACoB,aAAa;oBAC1BlB,SAAS;gBACX;YACF;QACF;QACAgE,iBAAgBC,SAAS;YACvB,MAAM,EACJC,GAAG,EACHC,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjB,GAAGC,cACJ,GAAG9B,aAAawB;YAEjB,MAAMO,8BACJ,CAACF,qBAAqB,CAACrF,kBAAkBwF,QAAQ;YAEnD,MAAMC,iBACJ,CAACC,WAAmChF,IAAI,EAAEiF,UAC1C,CAACC;oBACCF,SAASE;oBAET,IAAID,SAAS;wBACX;oBACF;oBAEA9D;oBAEA,qEAAqE;oBACrE,qEAAqE;oBACrE,SAAS;oBACT4B,QAAQI,OAAO,GAAG;oBAClBH,aAAaG,OAAO,GAAG1C;gBACzB;YAEF,IAAIiB,eAAeC;YACnB,IAAIC,iBAAiBC;YACrB,IAAIE,sBAAsBC;YAC1B,IAAIT,eAAeE,YAAY;gBAC7B,IAAI,OAAOC,iBAAiB,aAAa;oBACvCA,eAAetC,QAAQ;gBACzB;gBACA,IAAI,OAAOwC,mBAAmB,aAAa;oBACzCA,iBAAiBxC,QAAQ;gBAC3B;YACF,OAAO,IAAI,OAAO2C,wBAAwB,aAAa;gBACrDA,sBAAsB;YACxB;YAEA,OAAO;gBACLL;gBACAE;gBACAE;gBACAC;gBACA,GAAG6C,YAAY;gBACfD;gBACAQ;oBACE,gEAAgE;oBAChE,yCAAyC;oBACzC,IACE7C,SAAS,cACTM,YAAYO,OAAO,EAAEe,eAAekB,SAASC,SAASC,aAAa,GACnE;wBACA;oBACF;oBAEAV,aAAaO,cAAc;gBAC7B;gBACAI,SAAShB;gBACTpE;gBACAE,UAASsD,MAAM;oBACb,IAAI,CAACxB,sBAAsB;wBACzB,qEAAqE;wBACrE,6CAA6C;wBAC7Cc,qBAAqBE,OAAO,GAAGC;oBACjC;oBAEA,IAAIjD,SAAS,OAAOA,UAAU,YAAY,YAAYA,OAAO;wBAC3D,MAAMqF,YAAY;+BAAIrF;yBAAM;wBAC5B,MAAMsF,IAAItF,MAAMuF,OAAO,CAAC/B;wBACxB,IAAI8B,MAAM,CAAC,GAAG;4BACZD,UAAUG,IAAI,CAAChC;wBACjB,OAAO;4BACL6B,UAAUI,MAAM,CAACH,GAAG;wBACtB;wBAEApF,SAASmF;oBACX,OAAO;wBACLnF,SAASsD;oBACX;oBAEA,IAAI1B,wBAAwB,SAAS;wBACnC;oBACF;oBAEA,MAAM4D,YACJ5D,wBAAwB,UAAU,KAAKlB,eAAe4C;oBACxDxE,yBAAyByD,YAAYO,OAAO,EAAE0C;gBAChD;gBACArB,SAASO,eAAeP,SAAS;gBACjCC,WAAWM,eAAeN,WAAWI;gBACrCH;oBACEA;oBAEA,mEAAmE;oBACnE,4DAA4D;oBAC5D3B,QAAQI,OAAO,GAAG;oBAClBF,qBAAqBE,OAAO,GAAG;gBACjC;YACF;QACF;QACApC;QACAC,gBAAed,OAAO;YACpB,MAAMoE,YAAYtD,eAAed;YAEjC,OAAO;gBACL,GAAGoE,SAAS;gBACZwB,SAAS,CAAChC;oBACRQ,WAAWwB,UAAUhC;oBACrB,IAAI3B,sBAAsB;wBACxB2B,MAAMiC,eAAe;oBACvB;gBACF;YACF;QACF;QACAC,qBAAoB1B,SAAS;YAC3B,OAAO;gBACL,GAAGA,SAAS;gBACZwB,SAAQhC,KAAK;oBACXQ,WAAWwB,UAAUhC;oBACrBlB,YAAYO,OAAO,EAAE8C;oBAErB,IAAI,CAAC1E,aAAa;wBAChBlB,SAAS;oBACX;oBACAlB,yBAAyByD,YAAYO,OAAO,EAAE;gBAChD;YACF;QACF;QACA+C,wBAAuB5B,SAAS;YAC9B,OAAO;gBACL,iBAAiBzB,cAAcsD,EAAE;gBACjC1D;gBACA,GAAG6B,SAAS;gBACZwB,SAAQhC,KAAK;oBACXQ,WAAWwB,UAAUhC;oBACrBlB,YAAYO,OAAO,EAAE8C;oBACrB,IAAIxD,SAAS;wBACXQ,qBAAqBE,OAAO,GAAGC;oBACjC;oBACAV,WAAW,CAAC0D,OAAS,CAACA;gBACxB;YACF;QACF;IACF;AACF"}

package/dist/autocomplete/utils.d.ts

@@ -0,0 +1,81 @@
+import { type RefObject } from "react";
+import { type EditableHTMLElement } from "../form/utils.js";
+import { type NonNullMutableRef, type UseStateInitializer } from "../types.js";
+import { type AutocompleteFilterOptions, type AutocompleteGetOptionLabel, type AutocompleteOption } from "./types.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface GetDefaultValueOptions<Option extends AutocompleteOption> {
+    query: string | undefined;
+    multiselect?: boolean;
+    defaultQuery: UseStateInitializer<string> | undefined;
+    defaultValue: UseStateInitializer<Option | null | readonly Option[]> | undefined;
+    options: readonly Option[];
+    getOptionLabel: AutocompleteGetOptionLabel<Option>;
+    filter: (options: AutocompleteFilterOptions<Option>) => readonly Option[];
+}
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare function getDefaultValue<Option extends AutocompleteOption>(options: GetDefaultValueOptions<Option>): UseStateInitializer<Option | null | readonly Option[]>;
+/**
+ * @since 6.0.0
+ * @internal
+ */
+interface GetDefaultQueryOptions<Option extends AutocompleteOption> {
+    value: Option | null | readonly Option[];
+    getOptionLabel: AutocompleteGetOptionLabel<Option>;
+    defaultQuery?: UseStateInitializer<string>;
+}
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare function getDefaultQuery<Option extends AutocompleteOption>(options: GetDefaultQueryOptions<Option>): UseStateInitializer<string>;
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface EnforceSelectedValueOptions<Option extends AutocompleteOption> {
+    value: Option | readonly Option[] | null;
+    visible: boolean;
+    container: HTMLElement | null;
+    popupRef: RefObject<HTMLElement>;
+    comboboxRef: RefObject<EditableHTMLElement>;
+    getOptionLabel: AutocompleteGetOptionLabel<Option>;
+    availableOptions: readonly Option[];
+    prevAvailableOptions: NonNullMutableRef<readonly Option[] | null>;
+}
+/**
+ * This enforces that if the user clicks away, touches somewhere else on the
+ * page, tabs to the next element, or focuses another element programmatically
+ * the autocomplete will set the `value` back to the previous selected value if
+ * there was one. i.e.
+ *
+ * Case 1:
+ * - User selects "Apple"
+ * - User hits backspace twice. Input displays "App"
+ * - User clicks somewhere else on the page
+ * - Input now displays "Apple" again
+ *
+ * Case 2:
+ * - User selects "Apple"
+ * - User clears the input
+ * - User types "app"
+ * - User clicks somewhere else on the page
+ * - Input now displays "" and the value is set to `null`
+ *
+ * NOTE: This mutates the {@link EnforceSelectedValueOptions.prevAvailableOptions}
+ *
+ * @since 6.0.0
+ * @internal
+ */
+export declare function enforceSelectedValue<Option extends AutocompleteOption>(options: EnforceSelectedValueOptions<Option>): void;
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare function isMultipleValues<Option extends AutocompleteOption>(value: Option | null | readonly Option[]): value is readonly Option[];
+export {};

package/dist/autocomplete/utils.js

@@ -0,0 +1,108 @@
+import { triggerManualChangeEvent } from "../form/utils.js";
+import { noopAutocompleteFilter } from "./defaults.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */ export function getDefaultValue(options) {
+    const { query, filter, multiselect, defaultQuery, defaultValue, options: values, getOptionLabel } = options;
+    if (typeof defaultValue !== "undefined") {
+        return defaultValue;
+    }
+    // do not support determining the default value for a multiselect
+    // autocomplete if only a query was provided.
+    if (multiselect) {
+        return [];
+    }
+    // do not support a default value out of the box for this case
+    if (filter === noopAutocompleteFilter) {
+        return null;
+    }
+    return ()=>{
+        let q = "";
+        if (query) {
+            q = query;
+        } else if (defaultQuery) {
+            q = defaultQuery instanceof Function ? defaultQuery() : defaultQuery;
+        }
+        if (!q) {
+            return null;
+        }
+        const filtered = filter({
+            list: values,
+            query: q,
+            extractor: getOptionLabel
+        });
+        return filtered[0] ?? null;
+    };
+}
+/**
+ * @since 6.0.0
+ * @internal
+ */ export function getDefaultQuery(options) {
+    const { value, getOptionLabel, defaultQuery } = options;
+    if (defaultQuery) {
+        return defaultQuery;
+    }
+    return ()=>{
+        if (typeof value === "string") {
+            return value;
+        }
+        if (value && typeof value === "object" && !("length" in value)) {
+            return getOptionLabel(value);
+        }
+        return "";
+    };
+}
+/**
+ * This enforces that if the user clicks away, touches somewhere else on the
+ * page, tabs to the next element, or focuses another element programmatically
+ * the autocomplete will set the `value` back to the previous selected value if
+ * there was one. i.e.
+ *
+ * Case 1:
+ * - User selects "Apple"
+ * - User hits backspace twice. Input displays "App"
+ * - User clicks somewhere else on the page
+ * - Input now displays "Apple" again
+ *
+ * Case 2:
+ * - User selects "Apple"
+ * - User clears the input
+ * - User types "app"
+ * - User clicks somewhere else on the page
+ * - Input now displays "" and the value is set to `null`
+ *
+ * NOTE: This mutates the {@link EnforceSelectedValueOptions.prevAvailableOptions}
+ *
+ * @since 6.0.0
+ * @internal
+ */ export function enforceSelectedValue(options) {
+    const { value, visible, container, popupRef, comboboxRef, getOptionLabel, availableOptions, prevAvailableOptions } = options;
+    if (!container) {
+        return;
+    }
+    window.requestAnimationFrame(()=>{
+        if (container.contains(document.activeElement) || popupRef.current?.contains(document.activeElement)) {
+            return;
+        }
+        if (visible) {
+            // this makes it so that the options are not filtered again while closing
+            prevAvailableOptions.current = availableOptions;
+        }
+        let label = "";
+        if (typeof value === "string") {
+            label = value;
+        } else if (typeof value === "object" && value && !("length" in value)) {
+            label = getOptionLabel(value);
+        }
+        triggerManualChangeEvent(comboboxRef.current, label);
+    });
+}
+/**
+ * @since 6.0.0
+ * @internal
+ */ export function isMultipleValues(value) {
+    return !!value && typeof value === "object" && "length" in value;
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/autocomplete/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/utils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\nimport {\n  type EditableHTMLElement,\n  triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { type NonNullMutableRef, type UseStateInitializer } from \"../types.js\";\nimport { noopAutocompleteFilter } from \"./defaults.js\";\nimport {\n  type AutocompleteFilterOptions,\n  type AutocompleteGetOptionLabel,\n  type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface GetDefaultValueOptions<Option extends AutocompleteOption> {\n  query: string | undefined;\n  multiselect?: boolean;\n  defaultQuery: UseStateInitializer<string> | undefined;\n  defaultValue:\n    | UseStateInitializer<Option | null | readonly Option[]>\n    | undefined;\n  options: readonly Option[];\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\n  filter: (options: AutocompleteFilterOptions<Option>) => readonly Option[];\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultValue<Option extends AutocompleteOption>(\n  options: GetDefaultValueOptions<Option>\n): UseStateInitializer<Option | null | readonly Option[]> {\n  const {\n    query,\n    filter,\n    multiselect,\n    defaultQuery,\n    defaultValue,\n    options: values,\n    getOptionLabel,\n  } = options;\n\n  if (typeof defaultValue !== \"undefined\") {\n    return defaultValue;\n  }\n\n  // do not support determining the default value for a multiselect\n  // autocomplete if only a query was provided.\n  if (multiselect) {\n    return [];\n  }\n\n  // do not support a default value out of the box for this case\n  if (filter === noopAutocompleteFilter) {\n    return null;\n  }\n\n  return () => {\n    let q = \"\";\n    if (query) {\n      q = query;\n    } else if (defaultQuery) {\n      q = defaultQuery instanceof Function ? defaultQuery() : defaultQuery;\n    }\n\n    if (!q) {\n      return null;\n    }\n\n    const filtered = filter({\n      list: values,\n      query: q,\n      extractor: getOptionLabel,\n    });\n\n    return filtered[0] ?? null;\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface GetDefaultQueryOptions<Option extends AutocompleteOption> {\n  value: Option | null | readonly Option[];\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultQuery<Option extends AutocompleteOption>(\n  options: GetDefaultQueryOptions<Option>\n): UseStateInitializer<string> {\n  const { value, getOptionLabel, defaultQuery } = options;\n\n  if (defaultQuery) {\n    return defaultQuery;\n  }\n\n  return () => {\n    if (typeof value === \"string\") {\n      return value;\n    }\n\n    if (value && typeof value === \"object\" && !(\"length\" in value)) {\n      return getOptionLabel(value);\n    }\n\n    return \"\";\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface EnforceSelectedValueOptions<\n  Option extends AutocompleteOption,\n> {\n  value: Option | readonly Option[] | null;\n  visible: boolean;\n  container: HTMLElement | null;\n  popupRef: RefObject<HTMLElement>;\n  comboboxRef: RefObject<EditableHTMLElement>;\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\n  availableOptions: readonly Option[];\n  prevAvailableOptions: NonNullMutableRef<readonly Option[] | null>;\n}\n\n/**\n * This enforces that if the user clicks away, touches somewhere else on the\n * page, tabs to the next element, or focuses another element programmatically\n * the autocomplete will set the `value` back to the previous selected value if\n * there was one. i.e.\n *\n * Case 1:\n * - User selects \"Apple\"\n * - User hits backspace twice. Input displays \"App\"\n * - User clicks somewhere else on the page\n * - Input now displays \"Apple\" again\n *\n * Case 2:\n * - User selects \"Apple\"\n * - User clears the input\n * - User types \"app\"\n * - User clicks somewhere else on the page\n * - Input now displays \"\" and the value is set to `null`\n *\n * NOTE: This mutates the {@link EnforceSelectedValueOptions.prevAvailableOptions}\n *\n * @since 6.0.0\n * @internal\n */\nexport function enforceSelectedValue<Option extends AutocompleteOption>(\n  options: EnforceSelectedValueOptions<Option>\n): void {\n  const {\n    value,\n    visible,\n    container,\n    popupRef,\n    comboboxRef,\n    getOptionLabel,\n    availableOptions,\n    prevAvailableOptions,\n  } = options;\n\n  if (!container) {\n    return;\n  }\n\n  window.requestAnimationFrame(() => {\n    if (\n      container.contains(document.activeElement) ||\n      popupRef.current?.contains(document.activeElement)\n    ) {\n      return;\n    }\n\n    if (visible) {\n      // this makes it so that the options are not filtered again while closing\n      prevAvailableOptions.current = availableOptions;\n    }\n\n    let label = \"\";\n    if (typeof value === \"string\") {\n      label = value;\n    } else if (typeof value === \"object\" && value && !(\"length\" in value)) {\n      label = getOptionLabel(value);\n    }\n\n    triggerManualChangeEvent(comboboxRef.current, label);\n  });\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function isMultipleValues<Option extends AutocompleteOption>(\n  value: Option | null | readonly Option[]\n): value is readonly Option[] {\n  return !!value && typeof value === \"object\" && \"length\" in value;\n}\n"],"names":["triggerManualChangeEvent","noopAutocompleteFilter","getDefaultValue","options","query","filter","multiselect","defaultQuery","defaultValue","values","getOptionLabel","q","Function","filtered","list","extractor","getDefaultQuery","value","enforceSelectedValue","visible","container","popupRef","comboboxRef","availableOptions","prevAvailableOptions","window","requestAnimationFrame","contains","document","activeElement","current","label","isMultipleValues"],"mappings":"AACA,SAEEA,wBAAwB,QACnB,mBAAmB;AAE1B,SAASC,sBAAsB,QAAQ,gBAAgB;AAuBvD;;;CAGC,GACD,OAAO,SAASC,gBACdC,OAAuC;IAEvC,MAAM,EACJC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZL,SAASM,MAAM,EACfC,cAAc,EACf,GAAGP;IAEJ,IAAI,OAAOK,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,iEAAiE;IACjE,6CAA6C;IAC7C,IAAIF,aAAa;QACf,OAAO,EAAE;IACX;IAEA,8DAA8D;IAC9D,IAAID,WAAWJ,wBAAwB;QACrC,OAAO;IACT;IAEA,OAAO;QACL,IAAIU,IAAI;QACR,IAAIP,OAAO;YACTO,IAAIP;QACN,OAAO,IAAIG,cAAc;YACvBI,IAAIJ,wBAAwBK,WAAWL,iBAAiBA;QAC1D;QAEA,IAAI,CAACI,GAAG;YACN,OAAO;QACT;QAEA,MAAME,WAAWR,OAAO;YACtBS,MAAML;YACNL,OAAOO;YACPI,WAAWL;QACb;QAEA,OAAOG,QAAQ,CAAC,EAAE,IAAI;IACxB;AACF;AAYA;;;CAGC,GACD,OAAO,SAASG,gBACdb,OAAuC;IAEvC,MAAM,EAAEc,KAAK,EAAEP,cAAc,EAAEH,YAAY,EAAE,GAAGJ;IAEhD,IAAII,cAAc;QAChB,OAAOA;IACT;IAEA,OAAO;QACL,IAAI,OAAOU,UAAU,UAAU;YAC7B,OAAOA;QACT;QAEA,IAAIA,SAAS,OAAOA,UAAU,YAAY,CAAE,CAAA,YAAYA,KAAI,GAAI;YAC9D,OAAOP,eAAeO;QACxB;QAEA,OAAO;IACT;AACF;AAmBA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,qBACdf,OAA4C;IAE5C,MAAM,EACJc,KAAK,EACLE,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXZ,cAAc,EACda,gBAAgB,EAChBC,oBAAoB,EACrB,GAAGrB;IAEJ,IAAI,CAACiB,WAAW;QACd;IACF;IAEAK,OAAOC,qBAAqB,CAAC;QAC3B,IACEN,UAAUO,QAAQ,CAACC,SAASC,aAAa,KACzCR,SAASS,OAAO,EAAEH,SAASC,SAASC,aAAa,GACjD;YACA;QACF;QAEA,IAAIV,SAAS;YACX,yEAAyE;YACzEK,qBAAqBM,OAAO,GAAGP;QACjC;QAEA,IAAIQ,QAAQ;QACZ,IAAI,OAAOd,UAAU,UAAU;YAC7Bc,QAAQd;QACV,OAAO,IAAI,OAAOA,UAAU,YAAYA,SAAS,CAAE,CAAA,YAAYA,KAAI,GAAI;YACrEc,QAAQrB,eAAeO;QACzB;QAEAjB,yBAAyBsB,YAAYQ,OAAO,EAAEC;IAChD;AACF;AAEA;;;CAGC,GACD,OAAO,SAASC,iBACdf,KAAwC;IAExC,OAAO,CAAC,CAACA,SAAS,OAAOA,UAAU,YAAY,YAAYA;AAC7D"}

package/dist/avatar/Avatar.d.ts

@@ -65,8 +65,6 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
     imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
 }
 /**
- * **Server Component**
- *
  * An `Avatar` is generally used to represent objects or people within your app.
  * The avatar can consist of an image, an icon, or some text to display. When
  * the avatar is not an image, different themes can be applied to make the

package/dist/avatar/Avatar.js

@@ -2,8 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { avatar, avatarImage } from "./styles.js";
 /**
- * **Server Component**
- *
  * An `Avatar` is generally used to represent objects or people within your app.
  * The avatar can consist of an image, an icon, or some text to display. When
  * the avatar is not an image, different themes can be applied to make the