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

package/dist/autocomplete/Autocomplete.d.ts

@@ -1,85 +1,14 @@
-import { type AriaAttributes, type ReactElement, type Ref } from "react";
-import { type TextFieldProps } from "../form/TextField.js";
-import { type ConfigurableComboboxMenuProps } from "../form/useCombobox.js";
-import { type KeyboardMovementFocusChangeEventHandler } from "../movement/types.js";
-import { type PropsWithRef, type TextExtractor } from "../types.js";
-import { type AutocompleteCircularProgressProps } from "./AutocompleteCircularProgress.js";
-import { type ConfigurableAutocompleteDropdownButtonProps } from "./AutocompleteDropdownButton.js";
-import { type AutocompleteMenuLabel, type AutocompleteOptionsProps } from "./types.js";
+import { type ReactElement } from "react";
+import { type AutocompleteMultiSelectProps, type AutocompleteOption, type AutocompleteSingleSelectProps } from "./types.js";
 /**
+ * This is the single select autocomplete implementation.
+ *
  * @since 6.0.0
  */
-export interface AutocompleteProps<T> extends Omit<TextFieldProps, "value" | "defaultValue">, AutocompleteOptionsProps<T> {
-    /** @defaultValue `"list"` */
-    "aria-autocomplete"?: AriaAttributes["aria-autocomplete"];
-    inputRef?: Ref<HTMLInputElement>;
-    value?: string;
-    defaultValue?: string;
-    /**
-     * An `aria-label` to pass to the `Menu` component that describes the list of
-     * {@link options}. Either this or the {@link menuLabelledBy} are required for
-     * accessibility.
-     */
-    menuLabel?: string;
-    /**
-     * An `aria-labelledby` to pass to the `Menu` component that describes the
-     * list of {@link options}. Either this or the {@link menuLabel} are required
-     * for accessibility.
-     */
-    menuLabelledBy?: string;
-    /**
-     * Any additional props that should be passed to the `Menu` component.
-     */
-    menuProps?: PropsWithRef<ConfigurableComboboxMenuProps & {
-        id?: string;
-    }, HTMLDivElement>;
-    /**
-     * This prop should only be used when `aria-autocomplete` is set to
-     * `"inline"` or `"both"`.
-     */
-    onFocusChange?: KeyboardMovementFocusChangeEventHandler;
-    /**
-     * This can be used to add any custom styling, change the icon, change the
-     * label, etc for the dropdown button.
-     *
-     * @example Simple Example
-     * ```tsx
-     * dropdownButtonProps={{
-     *   "aria-label": "Open",
-     *   className: styles.dropdownButton,
-     *   icon: <MyCustomDropdownIcon />,
-     * }}
-     * ```
-     */
-    dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;
-    /**
-     * Set this to `true` to remove the {@link DropdownButton} from being rendered
-     * after the input element.
-     *
-     * @defaultValue `false`
-     */
-    disableDropdownButton?: boolean;
-    /**
-     * Set this to `true` to disable a `<CircularProgress />` after the input and
-     * before the `<DropdownButton />`.
-     *
-     * @defaultValue `false`
-     */
-    loading?: boolean;
-    /**
-     * @defaultValue `{ "aria-label": "Loading", ...loadingProps }`
-     */
-    loadingProps?: AutocompleteCircularProgressProps;
-}
+export declare function Autocomplete<Option extends AutocompleteOption>(props: AutocompleteSingleSelectProps<Option>): ReactElement;
 /**
+ * This is the multiselect autocomplete implementation.
+ *
  * @since 6.0.0
  */
-export declare function Autocomplete<T extends string | {
-    label: string;
-}>(props: AutocompleteMenuLabel<Omit<AutocompleteProps<T>, "extractor">>): ReactElement;
-/**
- * @since 6.0.0
- */
-export declare function Autocomplete<T>(props: AutocompleteMenuLabel<AutocompleteProps<T> & {
-    extractor: TextExtractor<T>;
-}>): ReactElement;
+export declare function Autocomplete<Option extends AutocompleteOption>(props: AutocompleteMultiSelectProps<Option>): ReactElement;

package/dist/autocomplete/Autocomplete.js

@@ -1,100 +1,140 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { Listbox } from "../form/Listbox.js";
 import { TextField } from "../form/TextField.js";
-import { useEditableCombobox } from "../form/useEditableCombobox.js";
-import { Menu } from "../menu/Menu.js";
+import { ListSubheader } from "../list/ListSubheader.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
-import { useEnsuredState } from "../useEnsuredState.js";
+import { AutocompleteChip } from "./AutocompleteChip.js";
 import { AutocompleteCircularProgress } from "./AutocompleteCircularProgress.js";
+import { AutocompleteClearButton } from "./AutocompleteClearButton.js";
 import { AutocompleteDropdownButton } from "./AutocompleteDropdownButton.js";
-import { FilterAutocompleteOptions } from "./FilterAutocompleteOptions.js";
+import { AutocompleteListboxChildren } from "./AutocompleteListboxChildren.js";
 import { autocomplete, autocompleteRightAddon } from "./autocompleteStyles.js";
-const noop = ()=>{
-// do nothing
-};
-export function Autocomplete(props) {
-    const { id: propId, value: propValue, defaultValue = "", onClick, onFocus, onKeyDown, onChange = noop, onFocusChange, className, options, children, inputRef, extractor, onAutocomplete = noop, getOptionProps, clearOnAutocomplete, menuProps, menuLabel, menuLabelledBy, containerProps, filter, whitespace, disableFilter, noOptionsChildren, dropdownButtonProps, disableDropdownButton, loading, loadingProps, rightAddon, rightAddonProps, ...remaining } = props;
-    const { form } = props;
+import { defaultAutocompleteFilter, noopAutocompleteFilter } from "./defaults.js";
+import { useAutocomplete } from "./useAutocomplete.js";
+const noop = ()=>undefined;
+/**
+ * @since 6.0.0
+ * @internal
+ */ export function Autocomplete(props) {
+    const { id: propId, onBlur, onFocus, onClick, onChange, onKeyDown, onOpen, type, className, inputRef, children, filter = type === "search" ? noopAutocompleteFilter : defaultAutocompleteFilter, filterSelected, value, setValue, defaultValue, onValueChange, query, setQuery, defaultQuery, options, getOptionLabel: propGetOptionLabel, getOptionProps: propGetOptionProps, allowAnyValue, listboxProps, listboxLabel, listboxLabelledBy, selectedIcon, unselectedIcon, selectedIconAfter, checkboxes, disableSelectedIcon, loading, loadingProps, dropdownButtonProps, disableDropdownButton, clearButtonProps, disableClearButton, noOptionsChildren = /*#__PURE__*/ _jsx(ListSubheader, {
+        children: "No Options"
+    }), leftAddon: propLeftAddon, disableLeftAddonStyles: propDisableLeftAddonStyles, labelProps, rightAddon, rightAddonProps, containerProps, getChipProps = noop, updateQueryOnSelect, visible, setVisible, defaultVisible, disableInlineChips, disableCloseOnSelect, ...remaining } = props;
+    const { form, disabled } = props;
     const id = useEnsuredId(propId, "autocomplete");
-    const menuId = useEnsuredId(menuProps?.id, "autocomplete-listbox");
-    const [query, setQuery] = useEnsuredState({
-        value: propValue,
-        setValue: typeof propValue === "string" ? noop : undefined,
-        defaultValue
-    });
-    const { visible, setVisible, getMenuProps, comboboxRef, comboboxProps, movementContext } = useEditableCombobox({
+    const menuId = useEnsuredId(listboxProps?.id, "autocomplete-listbox");
+    const { query: currentQuery, value: currentValue, setValue: currentSetValue, multiselect, comboboxRef: inputNodeRef, comboboxProps, movementContext, availableOptions, getOptionLabel, getOptionProps, getListboxProps, getClearButtonProps, getDropdownButtonProps } = useAutocomplete({
         form,
-        onClick,
+        onBlur,
         onFocus,
+        onClick,
+        onChange,
         onKeyDown,
-        onFocusChange,
+        onOpen,
+        disabled,
+        filter,
+        filterSelected,
         popupId: menuId,
-        popupRef: menuProps?.ref,
+        popupRef: listboxProps?.ref,
         comboboxId: id,
-        comboboxRef: inputRef
+        comboboxRef: inputRef,
+        options,
+        getOptionLabel: propGetOptionLabel,
+        getOptionProps: propGetOptionProps,
+        allowAnyValue,
+        updateQueryOnSelect,
+        value,
+        setValue,
+        defaultValue,
+        onValueChange,
+        query,
+        setQuery,
+        defaultQuery,
+        defaultVisible,
+        visible,
+        setVisible,
+        checkboxes,
+        selectedIcon,
+        unselectedIcon,
+        selectedIconAfter,
+        disableSelectedIcon,
+        disableCloseOnSelect
     });
-    const [containerNodeRef, containerRef] = useEnsuredRef(containerProps?.ref);
-    useEffect(()=>{
-        const input = comboboxRef.current;
-        if (!input || document.activeElement !== input) {
-            return;
-        }
-        const target = input.value.length;
-        input.setSelectionRange(target, target);
-    }, [
-        comboboxRef,
-        loading
-    ]);
+    const [containerRef, containerRefCallback] = useEnsuredRef(containerProps?.ref);
+    let leftAddon = propLeftAddon;
+    let disableLeftAddonStyles = propDisableLeftAddonStyles;
+    let inlineChips = false;
+    let floatingActive = labelProps?.floatingActive;
+    if (multiselect && !disableInlineChips) {
+        inlineChips = true;
+        // TODO: Maybe one day fix the typing? Might not be possible with
+        // destructuring though
+        const value = currentValue;
+        disableLeftAddonStyles ??= true;
+        floatingActive ||= value.length > 0;
+        leftAddon = /*#__PURE__*/ _jsx(_Fragment, {
+            children: value.map((option, index)=>{
+                const label = getOptionLabel(option);
+                const overrides = getChipProps({
+                    index,
+                    query: currentQuery,
+                    option,
+                    extractor: getOptionLabel
+                });
+                return /*#__PURE__*/ _jsx(AutocompleteChip, {
+                    ...overrides,
+                    onClick: (event)=>{
+                        overrides?.onClick?.(event);
+                        currentSetValue(value.filter((v)=>v !== option));
+                    },
+                    children: overrides?.children ?? label
+                }, label);
+            })
+        });
+    }
     return /*#__PURE__*/ _jsxs(KeyboardMovementProvider, {
         value: movementContext,
         children: [
             /*#__PURE__*/ _jsx(TextField, {
-                "aria-autocomplete": "list",
                 ...remaining,
-                value: query,
                 ...comboboxProps,
                 containerProps: {
                     ...containerProps,
-                    ref: containerRef
+                    ref: containerRefCallback,
+                    onClick: (event)=>{
+                        containerProps?.onClick?.(event);
+                        inputNodeRef.current?.focus();
+                    }
                 },
                 className: autocomplete({
                     className,
                     loading,
+                    inlineChips,
+                    disableClearButton,
                     disableDropdownButton
                 }),
-                onChange: (event)=>{
-                    onChange(event);
-                    setQuery(event.currentTarget.value);
-                },
-                onKeyDown: (event)=>{
-                    comboboxProps.onKeyDown(event);
-                    if (!visible && event.key === "Escape") {
-                        onAutocomplete(null);
-                    }
-                },
-                onFocus: (event)=>{
-                    comboboxProps.onFocus(event);
-                    event.currentTarget.setSelectionRange(0, event.currentTarget.value.length);
+                labelProps: {
+                    ...labelProps,
+                    floatingActive
                 },
+                leftAddon: leftAddon,
+                disableLeftAddonStyles: disableLeftAddonStyles,
                 rightAddon: /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
                         rightAddon,
                         loading && /*#__PURE__*/ _jsx(AutocompleteCircularProgress, {
                             ...loadingProps
                         }),
+                        !disableClearButton && !!currentQuery && /*#__PURE__*/ _jsx(AutocompleteClearButton, {
+                            ...clearButtonProps,
+                            ...getClearButtonProps(clearButtonProps)
+                        }),
                         !disableDropdownButton && /*#__PURE__*/ _jsx(AutocompleteDropdownButton, {
-                            "aria-label": menuLabel,
-                            "aria-labelledby": menuLabelledBy,
-                            "aria-controls": comboboxProps.id,
-                            ...dropdownButtonProps,
-                            visible: visible,
-                            onClick: ()=>{
-                                comboboxRef.current?.focus();
-                                setVisible((prev)=>!prev);
-                            }
+                            "aria-label": listboxLabel,
+                            "aria-labelledby": listboxLabelledBy,
+                            ...getDropdownButtonProps(dropdownButtonProps)
                         })
                     ]
                 }),
@@ -106,30 +146,19 @@ export function Autocomplete(props) {
                     })
                 }
             }),
-            /*#__PURE__*/ _jsxs(Menu, {
-                "aria-label": menuLabel,
-                "aria-labelledby": menuLabelledBy,
-                ...getMenuProps(menuProps),
-                // since the `afterInputChildren` is not included in the `comboboxRef`'s
-                // width, the menu will no longer be equal width without changing the
-                // fixedTo node to the container
-                fixedTo: containerNodeRef,
-                children: [
-                    children,
-                    /*#__PURE__*/ _jsx(FilterAutocompleteOptions, {
-                        query: query,
-                        filter: filter,
-                        options: options,
-                        noOptionsChildren: noOptionsChildren,
-                        extractor: extractor,
-                        whitespace: whitespace,
-                        comboboxRef: comboboxRef,
-                        disableFilter: disableFilter || props["aria-autocomplete"] === "none",
-                        getOptionProps: getOptionProps,
-                        onAutocomplete: onAutocomplete,
-                        clearOnAutocomplete: clearOnAutocomplete
-                    })
-                ]
+            /*#__PURE__*/ _jsx(Listbox, {
+                "aria-label": listboxLabel,
+                "aria-labelledby": listboxLabelledBy,
+                ...getListboxProps(listboxProps),
+                fixedTo: containerRef,
+                children: /*#__PURE__*/ _jsx(AutocompleteListboxChildren, {
+                    query: currentQuery,
+                    options: availableOptions,
+                    getOptionLabel: getOptionLabel,
+                    getOptionProps: getOptionProps,
+                    noOptionsChildren: noOptionsChildren,
+                    children: children
+                })
             })
         ]
     });

package/dist/autocomplete/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/Autocomplete.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useEffect,\n  type AriaAttributes,\n  type ReactElement,\n  type Ref,\n} from \"react\";\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type ConfigurableComboboxMenuProps } from \"../form/useCombobox.js\";\nimport { useEditableCombobox } from \"../form/useEditableCombobox.js\";\nimport { Menu } from \"../menu/Menu.js\";\nimport { type KeyboardMovementFocusChangeEventHandler } from \"../movement/types.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type PropsWithRef,\n  type TextExtractor,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  AutocompleteCircularProgress,\n  type AutocompleteCircularProgressProps,\n} from \"./AutocompleteCircularProgress.js\";\nimport {\n  AutocompleteDropdownButton,\n  type ConfigurableAutocompleteDropdownButtonProps,\n} from \"./AutocompleteDropdownButton.js\";\nimport { FilterAutocompleteOptions } from \"./FilterAutocompleteOptions.js\";\nimport { autocomplete, autocompleteRightAddon } from \"./autocompleteStyles.js\";\nimport {\n  type AutocompleteMenuLabel,\n  type AutocompleteOptionsProps,\n} from \"./types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteProps<T>\n  extends Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n    AutocompleteOptionsProps<T> {\n  /** @defaultValue `\"list\"` */\n  \"aria-autocomplete\"?: AriaAttributes[\"aria-autocomplete\"];\n  inputRef?: Ref<HTMLInputElement>;\n  value?: string;\n  defaultValue?: string;\n\n  /**\n   * An `aria-label` to pass to the `Menu` component that describes the list of\n   * {@link options}. Either this or the {@link menuLabelledBy} are required for\n   * accessibility.\n   */\n  menuLabel?: string;\n\n  /**\n   * An `aria-labelledby` to pass to the `Menu` component that describes the\n   * list of {@link options}. Either this or the {@link menuLabel} are required\n   * for accessibility.\n   */\n  menuLabelledBy?: string;\n\n  /**\n   * Any additional props that should be passed to the `Menu` component.\n   */\n  menuProps?: PropsWithRef<\n    ConfigurableComboboxMenuProps & { id?: string },\n    HTMLDivElement\n  >;\n\n  /**\n   * This prop should only be used when `aria-autocomplete` is set to\n   * `\"inline\"` or `\"both\"`.\n   */\n  onFocusChange?: KeyboardMovementFocusChangeEventHandler;\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/**\n * @since 6.0.0\n */\nexport function Autocomplete<T extends string | { label: string }>(\n  props: AutocompleteMenuLabel<Omit<AutocompleteProps<T>, \"extractor\">>\n): ReactElement;\n/**\n * @since 6.0.0\n */\nexport function Autocomplete<T>(\n  props: AutocompleteMenuLabel<\n    AutocompleteProps<T> & { extractor: TextExtractor<T> }\n  >\n): ReactElement;\nexport function Autocomplete<T>(\n  props: AutocompleteMenuLabel<AutocompleteProps<T>>\n): ReactElement {\n  const {\n    id: propId,\n    value: propValue,\n    defaultValue = \"\",\n    onClick,\n    onFocus,\n    onKeyDown,\n    onChange = noop,\n    onFocusChange,\n    className,\n    options,\n    children,\n    inputRef,\n    extractor,\n    onAutocomplete = noop,\n    getOptionProps,\n    clearOnAutocomplete,\n    menuProps,\n    menuLabel,\n    menuLabelledBy,\n    containerProps,\n    filter,\n    whitespace,\n    disableFilter,\n    noOptionsChildren,\n    dropdownButtonProps,\n    disableDropdownButton,\n    loading,\n    loadingProps,\n    rightAddon,\n    rightAddonProps,\n    ...remaining\n  } = props;\n\n  const { form } = props;\n  const id = useEnsuredId(propId, \"autocomplete\");\n  const menuId = useEnsuredId(menuProps?.id, \"autocomplete-listbox\");\n\n  const [query, setQuery] = useEnsuredState<string, UseStateSetter<string>>({\n    value: propValue,\n    setValue: typeof propValue === \"string\" ? noop : undefined,\n    defaultValue,\n  });\n\n  const {\n    visible,\n    setVisible,\n    getMenuProps,\n    comboboxRef,\n    comboboxProps,\n    movementContext,\n  } = useEditableCombobox({\n    form,\n    onClick,\n    onFocus,\n    onKeyDown,\n    onFocusChange,\n    popupId: menuId,\n    popupRef: menuProps?.ref,\n    comboboxId: id,\n    comboboxRef: inputRef,\n  });\n  const [containerNodeRef, containerRef] = useEnsuredRef(containerProps?.ref);\n  useEffect(() => {\n    const input = comboboxRef.current;\n    if (!input || document.activeElement !== input) {\n      return;\n    }\n\n    const target = input.value.length;\n    input.setSelectionRange(target, target);\n  }, [comboboxRef, loading]);\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <TextField\n        aria-autocomplete=\"list\"\n        {...remaining}\n        value={query}\n        {...comboboxProps}\n        containerProps={{\n          ...containerProps,\n          ref: containerRef,\n        }}\n        className={autocomplete({\n          className,\n          loading,\n          disableDropdownButton,\n        })}\n        onChange={(event) => {\n          onChange(event);\n          setQuery(event.currentTarget.value);\n        }}\n        onKeyDown={(event) => {\n          comboboxProps.onKeyDown(event);\n          if (!visible && event.key === \"Escape\") {\n            onAutocomplete(null);\n          }\n        }}\n        onFocus={(event) => {\n          comboboxProps.onFocus(event);\n          event.currentTarget.setSelectionRange(\n            0,\n            event.currentTarget.value.length\n          );\n        }}\n        rightAddon={\n          <>\n            {rightAddon}\n            {loading && <AutocompleteCircularProgress {...loadingProps} />}\n            {!disableDropdownButton && (\n              <AutocompleteDropdownButton\n                aria-label={menuLabel}\n                aria-labelledby={menuLabelledBy}\n                aria-controls={comboboxProps.id}\n                {...dropdownButtonProps}\n                visible={visible}\n                onClick={() => {\n                  comboboxRef.current?.focus();\n                  setVisible((prev) => !prev);\n                }}\n              />\n            )}\n          </>\n        }\n        rightAddonProps={{\n          ...rightAddonProps,\n          pointerEvents: true,\n          className: autocompleteRightAddon({\n            className: rightAddonProps?.className,\n          }),\n        }}\n      />\n      <Menu\n        aria-label={menuLabel as string}\n        aria-labelledby={menuLabelledBy}\n        {...getMenuProps(menuProps)}\n        // since the `afterInputChildren` is not included in the `comboboxRef`'s\n        // width, the menu will no longer be equal width without changing the\n        // fixedTo node to the container\n        fixedTo={containerNodeRef}\n      >\n        {children}\n        <FilterAutocompleteOptions\n          query={query}\n          filter={filter}\n          options={options}\n          noOptionsChildren={noOptionsChildren}\n          extractor={extractor}\n          whitespace={whitespace}\n          comboboxRef={comboboxRef}\n          disableFilter={disableFilter || props[\"aria-autocomplete\"] === \"none\"}\n          getOptionProps={getOptionProps}\n          onAutocomplete={onAutocomplete}\n          clearOnAutocomplete={clearOnAutocomplete}\n        />\n      </Menu>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["useEffect","TextField","useEditableCombobox","Menu","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","useEnsuredState","AutocompleteCircularProgress","AutocompleteDropdownButton","FilterAutocompleteOptions","autocomplete","autocompleteRightAddon","noop","Autocomplete","props","id","propId","value","propValue","defaultValue","onClick","onFocus","onKeyDown","onChange","onFocusChange","className","options","children","inputRef","extractor","onAutocomplete","getOptionProps","clearOnAutocomplete","menuProps","menuLabel","menuLabelledBy","containerProps","filter","whitespace","disableFilter","noOptionsChildren","dropdownButtonProps","disableDropdownButton","loading","loadingProps","rightAddon","rightAddonProps","remaining","form","menuId","query","setQuery","setValue","undefined","visible","setVisible","getMenuProps","comboboxRef","comboboxProps","movementContext","popupId","popupRef","ref","comboboxId","containerNodeRef","containerRef","input","current","document","activeElement","target","length","setSelectionRange","aria-autocomplete","event","currentTarget","key","aria-label","aria-labelledby","aria-controls","focus","prev","pointerEvents","fixedTo"],"mappings":"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"}
+{"version":3,"sources":["../../src/autocomplete/Autocomplete.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement } from \"react\";\nimport { Listbox } from \"../form/Listbox.js\";\nimport { TextField } from \"../form/TextField.js\";\nimport { ListSubheader } from \"../list/ListSubheader.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { AutocompleteChip } from \"./AutocompleteChip.js\";\nimport { AutocompleteCircularProgress } from \"./AutocompleteCircularProgress.js\";\nimport { AutocompleteClearButton } from \"./AutocompleteClearButton.js\";\nimport { AutocompleteDropdownButton } from \"./AutocompleteDropdownButton.js\";\nimport { AutocompleteListboxChildren } from \"./AutocompleteListboxChildren.js\";\nimport { autocomplete, autocompleteRightAddon } from \"./autocompleteStyles.js\";\nimport {\n  defaultAutocompleteFilter,\n  noopAutocompleteFilter,\n} from \"./defaults.js\";\nimport {\n  type AutocompleteMultiSelectProps,\n  type AutocompleteOption,\n  type AutocompleteProps,\n  type AutocompleteSingleSelectProps,\n} from \"./types.js\";\nimport { useAutocomplete } from \"./useAutocomplete.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * This is the single select autocomplete implementation.\n *\n * @since 6.0.0\n */\nexport function Autocomplete<Option extends AutocompleteOption>(\n  props: AutocompleteSingleSelectProps<Option>\n): ReactElement;\n/**\n * This is the multiselect autocomplete implementation.\n *\n * @since 6.0.0\n */\nexport function Autocomplete<Option extends AutocompleteOption>(\n  props: AutocompleteMultiSelectProps<Option>\n): ReactElement;\n/**\n * @since 6.0.0\n * @internal\n */\nexport function Autocomplete<Option extends AutocompleteOption>(\n  props: AutocompleteProps<Option>\n): ReactElement {\n  const {\n    id: propId,\n    onBlur,\n    onFocus,\n    onClick,\n    onChange,\n    onKeyDown,\n    onOpen,\n    type,\n    className,\n    inputRef,\n    children,\n    filter = type === \"search\"\n      ? noopAutocompleteFilter\n      : defaultAutocompleteFilter,\n    filterSelected,\n    value,\n    setValue,\n    defaultValue,\n    onValueChange,\n    query,\n    setQuery,\n    defaultQuery,\n    options,\n    getOptionLabel: propGetOptionLabel,\n    getOptionProps: propGetOptionProps,\n    allowAnyValue,\n    listboxProps,\n    listboxLabel,\n    listboxLabelledBy,\n    selectedIcon,\n    unselectedIcon,\n    selectedIconAfter,\n    checkboxes,\n    disableSelectedIcon,\n    loading,\n    loadingProps,\n    dropdownButtonProps,\n    disableDropdownButton,\n    clearButtonProps,\n    disableClearButton,\n    noOptionsChildren = <ListSubheader>No Options</ListSubheader>,\n    leftAddon: propLeftAddon,\n    disableLeftAddonStyles: propDisableLeftAddonStyles,\n    labelProps,\n    rightAddon,\n    rightAddonProps,\n    containerProps,\n    getChipProps = noop,\n    updateQueryOnSelect,\n    visible,\n    setVisible,\n    defaultVisible,\n    disableInlineChips,\n    disableCloseOnSelect,\n    ...remaining\n  } = props;\n  const { form, disabled } = props;\n\n  const id = useEnsuredId(propId, \"autocomplete\");\n  const menuId = useEnsuredId(listboxProps?.id, \"autocomplete-listbox\");\n  const {\n    query: currentQuery,\n    value: currentValue,\n    setValue: currentSetValue,\n    multiselect,\n    comboboxRef: inputNodeRef,\n    comboboxProps,\n    movementContext,\n    availableOptions,\n    getOptionLabel,\n    getOptionProps,\n    getListboxProps,\n    getClearButtonProps,\n    getDropdownButtonProps,\n  } = useAutocomplete({\n    form,\n    onBlur,\n    onFocus,\n    onClick,\n    onChange,\n    onKeyDown,\n    onOpen,\n    disabled,\n    filter,\n    filterSelected,\n    popupId: menuId,\n    popupRef: listboxProps?.ref,\n    comboboxId: id,\n    comboboxRef: inputRef,\n    options,\n    getOptionLabel: propGetOptionLabel,\n    getOptionProps: propGetOptionProps,\n    allowAnyValue,\n    updateQueryOnSelect,\n    value,\n    setValue,\n    defaultValue,\n    onValueChange,\n    query,\n    setQuery,\n    defaultQuery,\n    defaultVisible,\n    visible,\n    setVisible,\n    checkboxes,\n    selectedIcon,\n    unselectedIcon,\n    selectedIconAfter,\n    disableSelectedIcon,\n    disableCloseOnSelect,\n  });\n  const [containerRef, containerRefCallback] = useEnsuredRef(\n    containerProps?.ref\n  );\n\n  let leftAddon = propLeftAddon;\n  let disableLeftAddonStyles = propDisableLeftAddonStyles;\n  let inlineChips = false;\n  let floatingActive = labelProps?.floatingActive;\n  if (multiselect && !disableInlineChips) {\n    inlineChips = true;\n    // TODO: Maybe one day fix the typing? Might not be possible with\n    // destructuring though\n    const value = currentValue as readonly Option[];\n    disableLeftAddonStyles ??= true;\n    floatingActive ||= value.length > 0;\n    leftAddon = (\n      <>\n        {value.map((option, index) => {\n          const label = getOptionLabel(option);\n          const overrides = getChipProps({\n            index,\n            query: currentQuery,\n            option,\n            extractor: getOptionLabel,\n          });\n          return (\n            <AutocompleteChip\n              key={label}\n              {...overrides}\n              onClick={(event) => {\n                overrides?.onClick?.(event);\n                currentSetValue(value.filter((v) => v !== option));\n              }}\n            >\n              {overrides?.children ?? label}\n            </AutocompleteChip>\n          );\n        })}\n      </>\n    );\n  }\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <TextField\n        {...remaining}\n        {...comboboxProps}\n        containerProps={{\n          ...containerProps,\n          ref: containerRefCallback,\n          onClick: (event) => {\n            containerProps?.onClick?.(event);\n            inputNodeRef.current?.focus();\n          },\n        }}\n        className={autocomplete({\n          className,\n          loading,\n          inlineChips,\n          disableClearButton,\n          disableDropdownButton,\n        })}\n        labelProps={{\n          ...labelProps,\n          floatingActive,\n        }}\n        leftAddon={leftAddon}\n        disableLeftAddonStyles={disableLeftAddonStyles}\n        rightAddon={\n          <>\n            {rightAddon}\n            {loading && <AutocompleteCircularProgress {...loadingProps} />}\n            {!disableClearButton && !!currentQuery && (\n              <AutocompleteClearButton\n                {...clearButtonProps}\n                {...getClearButtonProps(clearButtonProps)}\n              />\n            )}\n            {!disableDropdownButton && (\n              <AutocompleteDropdownButton\n                aria-label={listboxLabel as string}\n                aria-labelledby={listboxLabelledBy}\n                {...getDropdownButtonProps(dropdownButtonProps)}\n              />\n            )}\n          </>\n        }\n        rightAddonProps={{\n          ...rightAddonProps,\n          pointerEvents: true,\n          className: autocompleteRightAddon({\n            className: rightAddonProps?.className,\n          }),\n        }}\n      />\n      <Listbox\n        aria-label={listboxLabel as string}\n        aria-labelledby={listboxLabelledBy}\n        {...getListboxProps(listboxProps)}\n        fixedTo={containerRef}\n      >\n        <AutocompleteListboxChildren\n          query={currentQuery}\n          options={availableOptions}\n          getOptionLabel={getOptionLabel}\n          getOptionProps={getOptionProps}\n          noOptionsChildren={noOptionsChildren}\n        >\n          {children}\n        </AutocompleteListboxChildren>\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["Listbox","TextField","ListSubheader","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","AutocompleteChip","AutocompleteCircularProgress","AutocompleteClearButton","AutocompleteDropdownButton","AutocompleteListboxChildren","autocomplete","autocompleteRightAddon","defaultAutocompleteFilter","noopAutocompleteFilter","useAutocomplete","noop","undefined","Autocomplete","props","id","propId","onBlur","onFocus","onClick","onChange","onKeyDown","onOpen","type","className","inputRef","children","filter","filterSelected","value","setValue","defaultValue","onValueChange","query","setQuery","defaultQuery","options","getOptionLabel","propGetOptionLabel","getOptionProps","propGetOptionProps","allowAnyValue","listboxProps","listboxLabel","listboxLabelledBy","selectedIcon","unselectedIcon","selectedIconAfter","checkboxes","disableSelectedIcon","loading","loadingProps","dropdownButtonProps","disableDropdownButton","clearButtonProps","disableClearButton","noOptionsChildren","leftAddon","propLeftAddon","disableLeftAddonStyles","propDisableLeftAddonStyles","labelProps","rightAddon","rightAddonProps","containerProps","getChipProps","updateQueryOnSelect","visible","setVisible","defaultVisible","disableInlineChips","disableCloseOnSelect","remaining","form","disabled","menuId","currentQuery","currentValue","currentSetValue","multiselect","comboboxRef","inputNodeRef","comboboxProps","movementContext","availableOptions","getListboxProps","getClearButtonProps","getDropdownButtonProps","popupId","popupRef","ref","comboboxId","containerRef","containerRefCallback","inlineChips","floatingActive","length","map","option","index","label","overrides","extractor","event","v","current","focus","aria-label","aria-labelledby","pointerEvents","fixedTo"],"mappings":"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"}

package/dist/autocomplete/AutocompleteChip.d.ts

@@ -0,0 +1,8 @@
+import { type AutocompleteChipProps } from "./types.js";
+/**
+ * A small wrapper around the `Chip` that defaults the `rightAddon` to the
+ * remove icon and adds a default `aria-description`.
+ *
+ * @since 6.0.0
+ */
+export declare const AutocompleteChip: import("react").ForwardRefExoticComponent<AutocompleteChipProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/autocomplete/AutocompleteChip.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Chip } from "../chip/Chip.js";
+import { getIcon } from "../icon/iconConfig.js";
+import { autocompleteChip } from "./autocompleteStyles.js";
+/**
+ * A small wrapper around the `Chip` that defaults the `rightAddon` to the
+ * remove icon and adds a default `aria-description`.
+ *
+ * @since 6.0.0
+ */ export const AutocompleteChip = /*#__PURE__*/ forwardRef(function AutocompleteChip(props, ref) {
+    const { "aria-description": propAriaDescription, children, className, removeIcon: propRemoveIcon, rightAddon: propRightAddon, ...remaining } = props;
+    let rightAddon = propRightAddon;
+    let ariaDescription = propAriaDescription;
+    const removeIcon = getIcon("remove", propRemoveIcon);
+    if (typeof rightAddon === "undefined") {
+        rightAddon = removeIcon;
+    }
+    if (typeof ariaDescription === "undefined" && typeof children === "string") {
+        ariaDescription = `Remove "${children}"`;
+    }
+    return /*#__PURE__*/ _jsx(Chip, {
+        ...remaining,
+        "aria-description": ariaDescription,
+        ref: ref,
+        rightAddon: rightAddon,
+        className: autocompleteChip({
+            className
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=AutocompleteChip.js.map

package/dist/autocomplete/AutocompleteChip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/AutocompleteChip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Chip } from \"../chip/Chip.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { autocompleteChip } from \"./autocompleteStyles.js\";\nimport { type AutocompleteChipProps } from \"./types.js\";\n\n/**\n * A small wrapper around the `Chip` that defaults the `rightAddon` to the\n * remove icon and adds a default `aria-description`.\n *\n * @since 6.0.0\n */\nexport const AutocompleteChip = forwardRef<\n  HTMLButtonElement,\n  AutocompleteChipProps\n>(function AutocompleteChip(props, ref) {\n  const {\n    \"aria-description\": propAriaDescription,\n    children,\n    className,\n    removeIcon: propRemoveIcon,\n    rightAddon: propRightAddon,\n    ...remaining\n  } = props;\n\n  let rightAddon = propRightAddon;\n  let ariaDescription = propAriaDescription;\n  const removeIcon = getIcon(\"remove\", propRemoveIcon);\n  if (typeof rightAddon === \"undefined\") {\n    rightAddon = removeIcon;\n  }\n\n  if (typeof ariaDescription === \"undefined\" && typeof children === \"string\") {\n    ariaDescription = `Remove \"${children}\"`;\n  }\n\n  return (\n    <Chip\n      {...remaining}\n      aria-description={ariaDescription}\n      ref={ref}\n      rightAddon={rightAddon}\n      className={autocompleteChip({ className })}\n    >\n      {children}\n    </Chip>\n  );\n});\n"],"names":["forwardRef","Chip","getIcon","autocompleteChip","AutocompleteChip","props","ref","propAriaDescription","children","className","removeIcon","propRemoveIcon","rightAddon","propRightAddon","remaining","ariaDescription","aria-description"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,gBAAgB,QAAQ,0BAA0B;AAG3D;;;;;CAKC,GACD,OAAO,MAAMC,iCAAmBJ,WAG9B,SAASI,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJ,oBAAoBC,mBAAmB,EACvCC,QAAQ,EACRC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,YAAYC,cAAc,EAC1B,GAAGC,WACJ,GAAGT;IAEJ,IAAIO,aAAaC;IACjB,IAAIE,kBAAkBR;IACtB,MAAMG,aAAaR,QAAQ,UAAUS;IACrC,IAAI,OAAOC,eAAe,aAAa;QACrCA,aAAaF;IACf;IAEA,IAAI,OAAOK,oBAAoB,eAAe,OAAOP,aAAa,UAAU;QAC1EO,kBAAkB,CAAC,QAAQ,EAAEP,SAAS,CAAC,CAAC;IAC1C;IAEA,qBACE,KAACP;QACE,GAAGa,SAAS;QACbE,oBAAkBD;QAClBT,KAAKA;QACLM,YAAYA;QACZH,WAAWN,iBAAiB;YAAEM;QAAU;kBAEvCD;;AAGP,GAAG"}

package/dist/autocomplete/AutocompleteCircularProgress.d.ts

@@ -1,16 +1,10 @@
 import { type ReactElement } from "react";
-import { type CircularProgressProps } from "../progress/CircularProgress.js";
-import { type ProgressTheme } from "../progress/types.js";
-/**
- * @since 6.0.0
- */
-export interface AutocompleteCircularProgressProps extends CircularProgressProps {
-    /** @defaultValue `"Loading"` */
-    "aria-label"?: string;
-    /** @defaultValue `"current-color"` */
-    theme?: ProgressTheme;
-}
+import { type AutocompleteCircularProgressProps } from "./types.js";
 /**
+ * An internal component used to handle the styling and minimal accessibility
+ * for the `CircularProgress` within the `Autocomplete`
+ *
+ * @internal
  * @since 6.0.0
  */
 export declare function AutocompleteCircularProgress(props: AutocompleteCircularProgressProps): ReactElement;

package/dist/autocomplete/AutocompleteCircularProgress.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CircularProgress } from "../progress/CircularProgress.js";
 /**
+ * An internal component used to handle the styling and minimal accessibility
+ * for the `CircularProgress` within the `Autocomplete`
+ *
+ * @internal
  * @since 6.0.0
  */ export function AutocompleteCircularProgress(props) {
     const { "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel = ariaLabelledby ? undefined : "Loading", theme = "current-color", ...remaining } = props;

package/dist/autocomplete/AutocompleteCircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteCircularProgress.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\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 function AutocompleteCircularProgress(\n  props: AutocompleteCircularProgressProps\n): ReactElement {\n  const {\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-label\": ariaLabel = ariaLabelledby ? undefined : \"Loading\",\n    theme = \"current-color\",\n    ...remaining\n  } = props;\n\n  return (\n    <CircularProgress\n      {...remaining}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledby}\n      theme={theme}\n    />\n  );\n}\n"],"names":["CircularProgress","AutocompleteCircularProgress","props","ariaLabelledby","ariaLabel","undefined","theme","remaining","aria-label","aria-labelledby"],"mappings":";AACA,SACEA,gBAAgB,QAEX,kCAAkC;AAezC;;CAEC,GACD,OAAO,SAASC,6BACdC,KAAwC;IAExC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,SAAS,EAChEC,QAAQ,eAAe,EACvB,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACF;QACE,GAAGO,SAAS;QACbC,cAAYJ;QACZK,mBAAiBN;QACjBG,OAAOA;;AAGb"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteCircularProgress.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport { CircularProgress } from \"../progress/CircularProgress.js\";\nimport { type AutocompleteCircularProgressProps } from \"./types.js\";\n\n/**\n * An internal component used to handle the styling and minimal accessibility\n * for the `CircularProgress` within the `Autocomplete`\n *\n * @internal\n * @since 6.0.0\n */\nexport function AutocompleteCircularProgress(\n  props: AutocompleteCircularProgressProps\n): ReactElement {\n  const {\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-label\": ariaLabel = ariaLabelledby ? undefined : \"Loading\",\n    theme = \"current-color\",\n    ...remaining\n  } = props;\n\n  return (\n    <CircularProgress\n      {...remaining}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledby}\n      theme={theme}\n    />\n  );\n}\n"],"names":["CircularProgress","AutocompleteCircularProgress","props","ariaLabelledby","ariaLabel","undefined","theme","remaining","aria-label","aria-labelledby"],"mappings":";AACA,SAASA,gBAAgB,QAAQ,kCAAkC;AAGnE;;;;;;CAMC,GACD,OAAO,SAASC,6BACdC,KAAwC;IAExC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,SAAS,EAChEC,QAAQ,eAAe,EACvB,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACF;QACE,GAAGO,SAAS;QACbC,cAAYJ;QACZK,mBAAiBN;QACjBG,OAAOA;;AAGb"}

package/dist/autocomplete/AutocompleteClearButton.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from "react";
+import { type AutocompleteClearButtonProps } from "./types.js";
+/**
+ * An internal component used for to clear the value from the `Autocomplete`.
+ *
+ * @internal
+ * @since 6.0.0
+ */
+export declare function AutocompleteClearButton(props: AutocompleteClearButtonProps): ReactElement;

package/dist/autocomplete/AutocompleteClearButton.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../button/Button.js";
+import { getIcon } from "../icon/iconConfig.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { autocompleteClearButton } from "./autocompleteStyles.js";
+/**
+ * An internal component used for to clear the value from the `Autocomplete`.
+ *
+ * @internal
+ * @since 6.0.0
+ */ export function AutocompleteClearButton(props) {
+    const { id: propId, className, children, buttonType = "icon", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = buttonType === "text" || ariaLabelledBy ? undefined : "Clear", ...remaining } = props;
+    const id = useEnsuredId(propId, "autocomplete-clear");
+    return /*#__PURE__*/ _jsx(Button, {
+        ...remaining,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        id: id,
+        className: autocompleteClearButton({
+            className
+        }),
+        tabIndex: -1,
+        buttonType: buttonType,
+        children: getIcon("clear", children)
+    });
+}
+
+//# sourceMappingURL=AutocompleteClearButton.js.map

package/dist/autocomplete/AutocompleteClearButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/AutocompleteClearButton.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement } from \"react\";\nimport { Button } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteClearButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteClearButtonProps } from \"./types.js\";\n\n/**\n * An internal component used for to clear the value from the `Autocomplete`.\n *\n * @internal\n * @since 6.0.0\n */\nexport function AutocompleteClearButton(\n  props: AutocompleteClearButtonProps\n): ReactElement {\n  const {\n    id: propId,\n    className,\n    children,\n    buttonType = \"icon\",\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = buttonType === \"text\" || ariaLabelledBy\n      ? undefined\n      : \"Clear\",\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"autocomplete-clear\");\n\n  return (\n    <Button\n      {...remaining}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n      className={autocompleteClearButton({ className })}\n      tabIndex={-1}\n      buttonType={buttonType}\n    >\n      {getIcon(\"clear\", children)}\n    </Button>\n  );\n}\n"],"names":["Button","getIcon","useEnsuredId","autocompleteClearButton","AutocompleteClearButton","props","id","propId","className","children","buttonType","ariaLabelledBy","ariaLabel","undefined","remaining","aria-label","aria-labelledby","tabIndex"],"mappings":"AAAA;;AAEA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;;CAKC,GACD,OAAO,SAASC,wBACdC,KAAmC;IAEnC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,MAAM,EACnB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,eAAe,UAAUC,iBAC/CE,YACA,OAAO,EACX,GAAGC,WACJ,GAAGT;IACJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACP;QACE,GAAGc,SAAS;QACbC,cAAYH;QACZI,mBAAiBL;QACjBL,IAAIA;QACJE,WAAWL,wBAAwB;YAAEK;QAAU;QAC/CS,UAAU,CAAC;QACXP,YAAYA;kBAEXT,QAAQ,SAASQ;;AAGxB"}

package/dist/autocomplete/AutocompleteDropdownButton.d.ts

@@ -1,32 +1,10 @@
-import { type MouseEventHandler, type ReactElement, type ReactNode } from "react";
-import { type ButtonProps } from "../button/Button.js";
-import { type IconRotatorProps } from "../icon/IconRotator.js";
-/**
- * @since 6.0.0
- */
-export interface ConfigurableAutocompleteDropdownButtonProps extends ButtonProps {
-    /** @defaultValue `AutocompleteProps.menuLabel` */
-    "aria-label"?: string;
-    /** @defaultValue `AutocompleteProps.menuLabelledby` */
-    "aria-labelledby"?: string;
-    /** @defaultValue `"autocomplete-dropdown-" + useId()` */
-    id?: string;
-    /** @defaultValue `getIcon("dropdown")` */
-    icon?: ReactNode;
-    iconRotatorProps?: Omit<IconRotatorProps, "rotated">;
-}
-/**
- * @since 6.0.0
- */
-export interface AutocompleteDropdownButtonProps extends ConfigurableAutocompleteDropdownButtonProps {
-    "aria-controls": string;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-    visible: boolean;
-}
+import { type ReactElement } from "react";
+import { type LabelRequiredForA11y } from "../types.js";
+import { type AutocompleteDropdownButtonProps } from "./types.js";
 /**
  * This is a simple `Button` wrapper to be used as a dropdown button within the
  * `Autocomplete`.
  *
  * @since 6.0.0
  */
-export declare function AutocompleteDropdownButton(props: AutocompleteDropdownButtonProps): ReactElement;
+export declare function AutocompleteDropdownButton(props: LabelRequiredForA11y<AutocompleteDropdownButtonProps>): ReactElement;

package/dist/autocomplete/AutocompleteDropdownButton.js

@@ -4,13 +4,14 @@ import { Button } from "../button/Button.js";
 import { IconRotator } from "../icon/IconRotator.js";
 import { getIcon } from "../icon/iconConfig.js";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { autocompleteDropdownButton } from "./autocompleteStyles.js";
 /**
  * This is a simple `Button` wrapper to be used as a dropdown button within the
  * `Autocomplete`.
  *
  * @since 6.0.0
  */ export function AutocompleteDropdownButton(props) {
-    const { id: propId, icon, visible, iconRotatorProps, ...remaining } = props;
+    const { id: propId, icon, visible, iconRotatorProps, className, ...remaining } = props;
     const id = useEnsuredId(propId, "autocomplete-dropdown");
     return /*#__PURE__*/ _jsx(Button, {
         ...remaining,
@@ -18,6 +19,9 @@ import { useEnsuredId } from "../useEnsuredId.js";
         "aria-expanded": visible,
         tabIndex: -1,
         buttonType: "icon",
+        className: autocompleteDropdownButton({
+            className
+        }),
         children: /*#__PURE__*/ _jsx(IconRotator, {
             ...iconRotatorProps,
             rotated: visible,