@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/autocomplete/types.d.ts

@@ -27,7 +27,7 @@ export type AutocompleteLabeledOption = string | {
 /**
  * @since 6.0.0
  */
-export type AutocompleteOption = AutocompleteLabeledOption | {};
+export type AutocompleteOption = AutocompleteLabeledOption | object;
 /**
  * @since 6.0.0
  */
@@ -47,71 +47,83 @@ export interface AutocompleteGetOptionPropsOptions<Option extends AutocompleteOp
     extractor: TextExtractor<Option>;
 }
 /**
- * This can be used to add additional props to each option.
- *
- * @example Simple Example
- * ```tsx
- * getOptionProps={({ option }) => {
- *   return {
- *     disabled: option === "",
- *     className: cnb(option === "a" && styles.blue),
- *     leftAddon: option === value && <CheckIcon />,
- *   };
- * }}
- * ```
- * @since 6.0.0
- */
-export type AutocompleteGetOptionProps<Option extends AutocompleteOption> = (options: AutocompleteGetOptionPropsOptions<Option>) => ConfigurableAutocompleteOptionProps | undefined;
-/**
- * This can be used to add additional props to each inline chip for multiselect
- * autocompletes.
- *
- * @example Simple Example
- * ```tsx
- * getChipProps={({ option, index }) => {
- *   return {
- *     disabled: index < 3,
- *     className: cnb(option === "a" && styles.blue)<
- *   };
- * }}
- * ```
+ * @see {@link AutocompleteGetOptionProps.getOptionProps}
+ * @since 6.0.0
+ */
+export type AutocompleteGetOptionPropsCallback<Option extends AutocompleteOption> = (options: AutocompleteGetOptionPropsOptions<Option>) => ConfigurableAutocompleteOptionProps | undefined;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {
+    /**
+     * This can be used to add additional props to each option.
+     *
+     * @example Simple Example
+     * ```tsx
+     * getOptionProps={({ option }) => {
+     *   return {
+     *     disabled: option === "",
+     *     className: cnb(option === "a" && styles.blue),
+     *     leftAddon: option === value && <CheckIcon />,
+     *   };
+     * }}
+     * ```
+     *
+     * @see {@link AutocompleteGetOptionPropsOptions}
+     * @see {@link AutocompleteGetOptionPropsCallback}
+     * @since 6.0.0
+     */
+    getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;
+}
+/**
+ * @see {@link AutocompleteBaseProps.getChipProps}
  * @since 6.0.0
  */
 export type AutocompleteGetChipProps<Option extends AutocompleteOption> = (options: Omit<AutocompleteGetOptionPropsOptions<Option>, "selected">) => Partial<AutocompleteChipProps> | undefined;
 /**
- * If the list of options contain an object that doesn't have a
- * `label: string`, this prop must be provided to extract a string to display
- * in the text field once selected.
- *
- * @example No Getter Required
- * ```tsx
- * const options1 = ['a', 'b', 'c', 'd'];
- * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];
- *
- * <Autocomplete options={options1} />
- * <Autocomplete options={options2} />
- * ```
- *
- * @example Getter Required
- * ```tsx
- * const options = [
- *   {
- *     name: "Alaska",
- *     abbr: "AK",
- *   },
- *   {
- *     name: "Arizona",
- *     abbr: "AZ",
- *   }
- * ];
- *
- * <Autocomplete options={options} getOptionLabel={(state) => state.name} />
- * ```
- *
- * @defaultValue `defaultAutocompleteExtractor`
+ * @see {@link AutocompleteGetOptionLabel}
  * @since 6.0.0
  */
-export type AutocompleteGetOptionLabel<Option extends AutocompleteOption> = (option: Option) => string;
+export type AutocompleteGetOptionLabelCallback<Option extends AutocompleteOption> = (option: Option) => string;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {
+    /**
+     * If the list of options contain an object that doesn't have a
+     * `label: string`, this prop must be provided to extract a string to display
+     * in the text field once selected.
+     *
+     * @example No Getter Required
+     * ```tsx
+     * const options1 = ['a', 'b', 'c', 'd'];
+     * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];
+     *
+     * <Autocomplete options={options1} />
+     * <Autocomplete options={options2} />
+     * ```
+     *
+     * @example Getter Required
+     * ```tsx
+     * const options = [
+     *   {
+     *     name: "Alaska",
+     *     abbr: "AK",
+     *   },
+     *   {
+     *     name: "Arizona",
+     *     abbr: "AZ",
+     *   }
+     * ];
+     *
+     * <Autocomplete options={options} getOptionLabel={(state) => state.name} />
+     * ```
+     *
+     * @defaultValue `defaultAutocompleteExtractor`
+     * @since 6.0.0
+     */
+    getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;
+}
 /**
  * @since 6.0.0
  */
@@ -172,7 +184,7 @@ export type AutocompleteQuery = AutocompleteControlledQuery | AutocompleteUncont
  * - `"selected"` - sets the 	query	 to the selected value's label
  * - `"as-is"` - doesn't change the `query`
  *
- * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? "clear" : "as-is"`
+ * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? "clear" : "selected"`
  * @since 6.0.0
  */
 export type AutocompleteUpdateQueryOnSelect = "clear" | "selected" | "as-is";
@@ -194,22 +206,16 @@ export interface AutocompleteUnknownQueryAndValueOptions<Option extends Autocomp
  *
  * @since 6.0.0
  */
-export type AutocompleteOptionLabelExtractor<Option extends AutocompleteOption> = Option extends AutocompleteLabeledOption ? {
-    getOptionLabel?: AutocompleteGetOptionLabel<Option>;
-} : {
-    getOptionLabel: AutocompleteGetOptionLabel<Option>;
-};
+export type AutocompleteOptionLabelExtractor<Option extends AutocompleteOption> = Option extends AutocompleteLabeledOption ? AutocompleteGetOptionLabel<Option> : Required<AutocompleteGetOptionLabel<Option>>;
 /**
  * @since 6.0.0
  */
-export interface AutocompleteFilteringOptions<Option extends AutocompleteOption> {
+export interface AutocompleteFilteringOptions<Option extends AutocompleteOption> extends AutocompleteGetOptionLabel<Option> {
     /**
      * The list of options that can be shown within the autocomplete and filtered
      * based on the current query.
      */
     options: readonly Option[];
-    /** @see {@link AutocompleteGetOptionLabel} */
-    getOptionLabel?: AutocompleteGetOptionLabel<Option>;
     /**
      * The function that filters the {@link options} based on the current query
      * and defaults to a case insensitive search that starts with the query.
@@ -286,7 +292,7 @@ export interface AutocompleteFilteringOptions<Option extends AutocompleteOption>
 /**
  * @since 6.0.0
  */
-export interface AutocompleteFilterAndListboxOptions<Option extends AutocompleteOption> extends AutocompleteFilteringOptions<Option>, OptionSelectedIconProps {
+export interface AutocompleteFilterAndListboxOptions<Option extends AutocompleteOption> extends AutocompleteFilteringOptions<Option>, AutocompleteGetOptionProps<Option>, OptionSelectedIconProps {
     /**
      * Set this to `true` when using a multiselect autocomplete to update each
      * option to use checkboxes to show the selection state.
@@ -301,7 +307,7 @@ export interface AutocompleteFilterAndListboxOptions<Option extends Autocomplete
     disableSelectedIcon?: boolean;
     /**
      * @see {@link AutocompleteUpdateQueryOnSelect}
-     * @defaultValue `multiselect ? "clear" : "as-is"`
+     * @defaultValue `multiselect ? "clear" : "selected"`
      */
     updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;
     /**
@@ -311,8 +317,6 @@ export interface AutocompleteFilterAndListboxOptions<Option extends Autocomplete
      * @defaultValue `checkboxes`
      */
     disableCloseOnSelect?: boolean;
-    /** @see {@link AutocompleteGetOptionProps} */
-    getOptionProps?: AutocompleteGetOptionProps<Option>;
 }
 /**
  * @since 6.0.0
@@ -368,6 +372,19 @@ export interface AutocompleteListboxProps<T extends AutocompleteOption = Autocom
 export interface ConfigurableAutocompleteListboxProps extends ConfigurableComboboxMenuProps, OptionSelectedIconProps {
     id?: string;
 }
+/**
+ * - `"always"` - the clear button is always visible
+ * - `"active"` - the clear button will be visible when:
+ *   - the user moves focus within the autocomplete
+ *   - the user hovers the autocomplete
+ * - `"query"` - the clear button will be visible when:
+ *   - the input has a value and:
+ *     - the user moves focus within the autocomplete
+ *     - the user hovers the autocomplete
+ *
+ * @since 6.0.0
+ */
+export type ClearButtonVisibility = "query" | "active" | "always";
 /**
  * @since 6.0.0
  */
@@ -376,6 +393,8 @@ export interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {
     "aria-label"?: string;
     /** @defaultValue `"autocomplete-clear-" + useId()` */
     id?: string;
+    /** {@inheritDoc ClearButtonVisibility} */
+    visibility?: ClearButtonVisibility;
 }
 /**
  * @internal
@@ -420,7 +439,7 @@ export interface AutocompleteCircularProgressProps extends CircularProgressProps
  */
 export interface AutocompleteChipProps extends ChipProps {
     /**
-     * @defaultValue `typeof children === "string" && \`Remove "${children}"\`
+     * @defaultValue `typeof children === "string" ? \`Remove "${children}"\` : undefined`
      */
     "aria-description"?: string;
     /** @defaultValue `getIcon("remove")` */
@@ -430,7 +449,7 @@ export interface AutocompleteChipProps extends ChipProps {
 /**
  * @since 6.0.0
  */
-export interface AutocompleteWithQueryImplementation<Option extends AutocompleteOption, ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends EditableComboboxImplementation<ComboboxEl, PopupEl> {
+export interface AutocompleteWithQueryImplementation<Option extends AutocompleteOption, ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends EditableComboboxImplementation<ComboboxEl, PopupEl>, Required<AutocompleteGetOptionProps<Option>>, Required<AutocompleteGetOptionLabel<Option>> {
     query: string;
     setQuery: Dispatch<string>;
     comboboxProps: AutocompleteComboboxProps<ComboboxEl>;
@@ -459,10 +478,6 @@ export interface AutocompleteWithQueryImplementation<Option extends Autocomplete
      * Generates the props required for the `AutocompleteDropdownButton`.
      */
     getDropdownButtonProps: (overrides?: ConfigurableAutocompleteDropdownButtonProps) => AutocompleteDropdownButtonProps;
-    /** @see {@link AutocompleteGetOptionLabel} */
-    getOptionLabel: AutocompleteGetOptionLabel<Option>;
-    /** @see {@link AutocompleteGetOptionProps} */
-    getOptionProps: AutocompleteGetOptionProps<Option>;
 }
 /**
  * @since 6.0.0
@@ -506,8 +521,6 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption> extend
      * Any additional props that should be passed to the `Listbox` component.
      */
     listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps, HTMLDivElement>;
-    /** @see {@link AutocompleteGetOptionProps} */
-    getOptionProps?: AutocompleteGetOptionProps<Option>;
     /**
      * This can be used to add any custom styling, change the icon, change the
      * label, etc for the dropdown button.
@@ -540,11 +553,31 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption> extend
      * @defaultValue `{ "aria-label": "Loading", ...loadingProps }`
      */
     loadingProps?: AutocompleteCircularProgressProps;
+    /**
+     * This will do nothing if {@link disableClearButton} is `true`.
+     */
     clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps, HTMLButtonElement>;
     /**
+     * Set to `true` to hide the clear button that appears when hovering an
+     * `Autocomplete` that has a value. The user will still be able to clear the
+     * value quickly using the `Escape` key.
+     *
      * @defaultValue `false`
      */
     disableClearButton?: boolean;
+    /**
+     * - `"always"` - the clear button is always visible
+     * - `"active"` - the clear button will be visible when:
+     *   - the user moves focus within the autocomplete
+     *   - the user hovers the autocomplete
+     * - `"query"` - the clear button will be visible when:
+     *   - the input has a value and:
+     *     - the user moves focus within the autocomplete
+     *     - the user hovers the autocomplete
+     *
+     * @defaultValue `"query"`
+     */
+    clearButtonVisibility?: ClearButtonVisibility;
     /**
      * This is a convenience prop for the `onEntering`/`onEntered` transition
      * callbacks that will ensure it is only called once even if the transitions
@@ -568,7 +601,20 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption> extend
      * @defaultValue `false`
      */
     disableInlineChips?: boolean;
-    /** @see {@link AutocompleteGetChipProps} */
+    /**
+     * This can be used to add additional props to each inline chip for multiselect
+     * autocompletes.
+     *
+     * @example Simple Example
+     * ```tsx
+     * getChipProps={({ option, index }) => {
+     *   return {
+     *     disabled: index < 3,
+     *     className: cnb(option === "a" && styles.blue)<
+     *   };
+     * }}
+     * ```
+     */
     getChipProps?: AutocompleteGetChipProps<Option>;
 }
 /**

package/dist/autocomplete/types.js.map

@@ -1 +1 @@
-{"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\";\n\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":"AAgyBA;;CAEC,GACD,WAEoD"}
+{"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\";\n\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 */\nexport type AutocompleteOption = AutocompleteLabeledOption | object;\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 * @see {@link AutocompleteGetOptionProps.getOptionProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionPropsCallback<\n  Option extends AutocompleteOption,\n> = (\n  options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {\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   * @see {@link AutocompleteGetOptionPropsOptions}\n   * @see {@link AutocompleteGetOptionPropsCallback}\n   * @since 6.0.0\n   */\n  getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;\n}\n\n/**\n * @see {@link AutocompleteBaseProps.getChipProps}\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 * @see {@link AutocompleteGetOptionLabel}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabelCallback<\n  Option extends AutocompleteOption,\n> = (option: Option) => string;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {\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   */\n  getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;\n}\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\" : \"selected\"`\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  ? AutocompleteGetOptionLabel<Option>\n  : Required<AutocompleteGetOptionLabel<Option>>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<Option extends AutocompleteOption>\n  extends AutocompleteGetOptionLabel<Option> {\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  /**\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    AutocompleteGetOptionProps<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\" : \"selected\"`\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\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 * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n *   - the user moves focus within the autocomplete\n *   - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n *   - the input has a value and:\n *     - the user moves focus within the autocomplete\n *     - the user hovers the autocomplete\n *\n * @since 6.0.0\n */\nexport type ClearButtonVisibility = \"query\" | \"active\" | \"always\";\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  /** {@inheritDoc ClearButtonVisibility} */\n  visibility?: ClearButtonVisibility;\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}\"\\` : undefined`\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    Required<AutocompleteGetOptionProps<Option>>,\n    Required<AutocompleteGetOptionLabel<Option>> {\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\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  /**\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  /**\n   * This will do nothing if {@link disableClearButton} is `true`.\n   */\n  clearButtonProps?: PropsWithRef<\n    ConfigurableAutocompleteClearButtonProps,\n    HTMLButtonElement\n  >;\n\n  /**\n   * Set to `true` to hide the clear button that appears when hovering an\n   * `Autocomplete` that has a value. The user will still be able to clear the\n   * value quickly using the `Escape` key.\n   *\n   * @defaultValue `false`\n   */\n  disableClearButton?: boolean;\n\n  /**\n   * - `\"always\"` - the clear button is always visible\n   * - `\"active\"` - the clear button will be visible when:\n   *   - the user moves focus within the autocomplete\n   *   - the user hovers the autocomplete\n   * - `\"query\"` - the clear button will be visible when:\n   *   - the input has a value and:\n   *     - the user moves focus within the autocomplete\n   *     - the user hovers the autocomplete\n   *\n   * @defaultValue `\"query\"`\n   */\n  clearButtonVisibility?: ClearButtonVisibility;\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  /**\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   */\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":"AAs1BA;;CAEC,GACD,WAEoD"}

package/dist/autocomplete/useAutocomplete.d.ts

@@ -3,12 +3,14 @@ import { type AutocompleteImplementation, type AutocompleteMultiSelectImplementa
 /**
  * This is the single select autocomplete implementation.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @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.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @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>;
@@ -16,6 +18,7 @@ export declare function useAutocomplete<Option extends AutocompleteOption, Combo
  * This is an internal override implementation where the types are less strict
  * so it can be used with the `Autocomplete` component.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  * @internal
  */

package/dist/autocomplete/useAutocomplete.js

@@ -4,7 +4,7 @@ import { useEditableCombobox } from "../form/useEditableCombobox.js";
 import { triggerManualChangeEvent } from "../form/utils.js";
 import { getIcon } from "../icon/config.js";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
-import { TRANSITION_CONFIG } from "../transition/config.js";
+import { getTransitionCallbacks } from "../transition/getTransitionCallbacks.js";
 import { useEnsuredState } from "../useEnsuredState.js";
 import { defaultAutocompleteExtractor, defaultAutocompleteFilter, defaultAutocompleteGetOptionProps, noopAutocompleteFilter } from "./defaults.js";
 import { enforceSelectedValue, getDefaultQuery, getDefaultValue, isMultipleValues } from "./utils.js";
@@ -12,6 +12,7 @@ const noop = ()=>{
 // do nothing
 };
 /**
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  * @internal
  */ export function useAutocomplete(options) {
@@ -115,7 +116,7 @@ const noop = ()=>{
         multiselect,
         comboboxProps: {
             ...comboboxProps,
-            "aria-autocomplete": "list",
+            "aria-autocomplete": filter === noopAutocompleteFilter ? "none" : "list",
             value: query,
             onKeyDown (event) {
                 comboboxProps.onKeyDown(event);
@@ -154,19 +155,6 @@ const noop = ()=>{
         },
         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;
@@ -223,8 +211,20 @@ const noop = ()=>{
                     const nextQuery = updateQueryOnSelect === "clear" ? "" : getOptionLabel(option);
                     triggerManualChangeEvent(comboboxRef.current, nextQuery);
                 },
-                onEnter: handleEntering(onEnter, false),
-                onEntered: handleEntering(onEntered, isTransitionCompleteSkipped),
+                ...getTransitionCallbacks({
+                    enter: true,
+                    onEnter,
+                    onEntered,
+                    onEnterOnce: ()=>{
+                        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;
+                    },
+                    disableTransition
+                }),
                 onExited () {
                     onExited();
                     // once the listbox has exited, reset any cached states so the next