@react-md/core 1.0.0-next.13 → 1.0.0-next.14

package/dist/_box-shadows.scss

@@ -1,4 +1,7 @@
+@use "sass:list";
 @use "sass:map";
+@use "sass:math";
+@use "sass:meta";
 @use "sass:string";
 @use "theme/theme";
 @use "transition/transition";
@@ -92,7 +95,7 @@ $box-shadow-3-layers: (
 ) !default;
 
 @function box-shadow($z-value, $color: $box-shadow-color, $opacity-boost: 0) {
-  @if type-of($z-value) != "number" or not unitless($z-value) {
+  @if meta.type-of($z-value) != "number" or not math.is-unitless($z-value) {
     @error "$z-value must be a unitless number, but received '#{$z-value}'";
   }
 
@@ -157,10 +160,10 @@ $box-shadow-3-layers: (
       transition: opacity $duration transition.$linear-timing-function;
     }
 
-    @if type-of($active-selectors) == string {
+    @if meta.type-of($active-selectors) == string {
       $active-string: $active-selectors + $suffix;
-    } @else if type-of($active-selectors) == list {
-      @for $i from 1 to length($active-selectors) + 1 {
+    } @else if meta.type-of($active-selectors) == list {
+      @for $i from 1 to list.length($active-selectors) + 1 {
         $selector: list.nth($active-selectors, $i);
 
         $prefix: $active-string + if($i > 1, ", ", "");

package/dist/_core.scss

@@ -33,12 +33,14 @@
 @forward "expansion-panel/expansion-panel" as expansion-panel-*;
 @forward "menu/menu" as menu-*;
 @forward "form/form" as form-*;
+@forward "autocomplete/autocomplete" as autocomplete-*;
 @forward "layout/layout" as layout-*;
 @forward "navigation/navigation" as navigation-*;
 @forward "segmented-button/segmented-button" as segmented-button-*;
 
-@use "avatar/avatar";
 @use "app-bar/app-bar";
+@use "autocomplete/autocomplete";
+@use "avatar/avatar";
 @use "box/box";
 @use "button/button";
 @use "segmented-button/segmented-button";
@@ -102,6 +104,7 @@ $_layer-order: (
   window-splitter,
   menu,
   form,
+  autocomplete,
   layout,
   navigation,
   snackbar,
@@ -382,6 +385,7 @@ $_layer-order: (
   }
 
   @include app-bar.styles($disable-layer);
+  @include autocomplete.styles($disable-layer);
   @include avatar.styles($disable-layer);
   @include badge.styles($disable-layer);
   @include box.styles($disable-layer);

package/dist/_utils.scss

@@ -1,7 +1,7 @@
-@use "sass:string";
+@use "sass:list";
 @use "sass:map";
 @use "sass:meta";
-@use "sass:list";
+@use "sass:string";
 
 $disable-rtl: false !default;
 $disable-validation: false !default;
@@ -67,7 +67,7 @@ $_swappable-properties: text-align;
   }
 
   $choices: if($is-map, map.keys($list-or-map), $list-or-map);
-  @if not index($choices, $key-or-value) {
+  @if not list.index($choices, $key-or-value) {
     @error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
   }
 

package/dist/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,85 @@
+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";
+/**
+ * @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;
+}
+/**
+ * @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;

package/dist/autocomplete/Autocomplete.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { TextField } from "../form/TextField.js";
+import { useEditableCombobox } from "../form/useEditableCombobox.js";
+import { Menu } from "../menu/Menu.js";
+import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { useEnsuredRef } from "../useEnsuredRef.js";
+import { useEnsuredState } from "../useEnsuredState.js";
+import { AutocompleteCircularProgress } from "./AutocompleteCircularProgress.js";
+import { AutocompleteDropdownButton } from "./AutocompleteDropdownButton.js";
+import { FilterAutocompleteOptions } from "./FilterAutocompleteOptions.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;
+    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({
+        form,
+        onClick,
+        onFocus,
+        onKeyDown,
+        onFocusChange,
+        popupId: menuId,
+        popupRef: menuProps?.ref,
+        comboboxId: id,
+        comboboxRef: inputRef
+    });
+    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
+    ]);
+    return /*#__PURE__*/ _jsxs(KeyboardMovementProvider, {
+        value: movementContext,
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                "aria-autocomplete": "list",
+                ...remaining,
+                value: query,
+                ...comboboxProps,
+                containerProps: {
+                    ...containerProps,
+                    ref: containerRef
+                },
+                className: autocomplete({
+                    className,
+                    loading,
+                    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);
+                },
+                rightAddon: /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        rightAddon,
+                        loading && /*#__PURE__*/ _jsx(AutocompleteCircularProgress, {
+                            ...loadingProps
+                        }),
+                        !disableDropdownButton && /*#__PURE__*/ _jsx(AutocompleteDropdownButton, {
+                            "aria-label": menuLabel,
+                            "aria-labelledby": menuLabelledBy,
+                            "aria-controls": comboboxProps.id,
+                            ...dropdownButtonProps,
+                            visible: visible,
+                            onClick: ()=>{
+                                comboboxRef.current?.focus();
+                                setVisible((prev)=>!prev);
+                            }
+                        })
+                    ]
+                }),
+                rightAddonProps: {
+                    ...rightAddonProps,
+                    pointerEvents: true,
+                    className: autocompleteRightAddon({
+                        className: rightAddonProps?.className
+                    })
+                }
+            }),
+            /*#__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
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=Autocomplete.js.map

package/dist/autocomplete/Autocomplete.js.map

@@ -0,0 +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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/autocomplete/AutocompleteCircularProgress.d.ts

@@ -0,0 +1,16 @@
+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;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function AutocompleteCircularProgress(props: AutocompleteCircularProgressProps): ReactElement;

package/dist/autocomplete/AutocompleteCircularProgress.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgress } from "../progress/CircularProgress.js";
+/**
+ * @since 6.0.0
+ */ export function AutocompleteCircularProgress(props) {
+    const { "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel = ariaLabelledby ? undefined : "Loading", theme = "current-color", ...remaining } = props;
+    return /*#__PURE__*/ _jsx(CircularProgress, {
+        ...remaining,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        theme: theme
+    });
+}
+
+//# sourceMappingURL=AutocompleteCircularProgress.js.map

package/dist/autocomplete/AutocompleteCircularProgress.js.map

@@ -0,0 +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"],"rangeMappings":";;;;;;;;;;;;","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"}

package/dist/autocomplete/AutocompleteDropdownButton.d.ts

@@ -0,0 +1,32 @@
+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;
+}
+/**
+ * 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;

package/dist/autocomplete/AutocompleteDropdownButton.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../button/Button.js";
+import { IconRotator } from "../icon/IconRotator.js";
+import { getIcon } from "../icon/iconConfig.js";
+import { useEnsuredId } from "../useEnsuredId.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 = useEnsuredId(propId, "autocomplete-dropdown");
+    return /*#__PURE__*/ _jsx(Button, {
+        ...remaining,
+        id: id,
+        "aria-expanded": visible,
+        tabIndex: -1,
+        buttonType: "icon",
+        children: /*#__PURE__*/ _jsx(IconRotator, {
+            ...iconRotatorProps,
+            rotated: visible,
+            children: getIcon("dropdown", icon)
+        })
+    });
+}
+
+//# sourceMappingURL=AutocompleteDropdownButton.js.map

package/dist/autocomplete/AutocompleteDropdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/AutocompleteDropdownButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n  extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.menuLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.menuLabelledby` */\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 * This is a simple `Button` wrapper to be used as a dropdown button within the\n * `Autocomplete`.\n *\n * @since 6.0.0\n */\nexport function AutocompleteDropdownButton(\n  props: AutocompleteDropdownButtonProps\n): ReactElement {\n  const { id: propId, icon, visible, iconRotatorProps, ...remaining } = props;\n\n  const id = useEnsuredId(propId, \"autocomplete-dropdown\");\n\n  return (\n    <Button\n      {...remaining}\n      id={id}\n      aria-expanded={visible}\n      tabIndex={-1}\n      buttonType=\"icon\"\n    >\n      <IconRotator {...iconRotatorProps} rotated={visible}>\n        {getIcon(\"dropdown\", icon)}\n      </IconRotator>\n    </Button>\n  );\n}\n"],"names":["Button","IconRotator","getIcon","useEnsuredId","AutocompleteDropdownButton","props","id","propId","icon","visible","iconRotatorProps","remaining","aria-expanded","tabIndex","buttonType","rotated"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAMA,SAASA,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,YAAY,QAAQ,qBAAqB;AA8BlD;;;;;CAKC,GACD,OAAO,SAASC,2BACdC,KAAsC;IAEtC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,gBAAgB,EAAE,GAAGC,WAAW,GAAGN;IAEtE,MAAMC,KAAKH,aAAaI,QAAQ;IAEhC,qBACE,KAACP;QACE,GAAGW,SAAS;QACbL,IAAIA;QACJM,iBAAeH;QACfI,UAAU,CAAC;QACXC,YAAW;kBAEX,cAAA,KAACb;YAAa,GAAGS,gBAAgB;YAAEK,SAASN;sBACzCP,QAAQ,YAAYM;;;AAI7B"}

package/dist/autocomplete/FilterAutocompleteOptions.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement, type RefObject } from "react";
+import { type EditableHTMLElement } from "../form/utils.js";
+import { type AutocompleteOptionsProps } from "./types.js";
+export interface FilterAutocompleteOptionsProps<T> extends AutocompleteOptionsProps<T> {
+    query: string;
+    comboboxRef: RefObject<EditableHTMLElement>;
+}
+export declare function FilterAutocompleteOptions<T>(props: FilterAutocompleteOptionsProps<T>): ReactElement;

package/dist/autocomplete/FilterAutocompleteOptions.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { triggerManualChangeEvent } from "../form/utils.js";
+import { ListSubheader } from "../list/ListSubheader.js";
+import { MenuItem } from "../menu/MenuItem.js";
+import { defaultAutocompleteExtractor, defaultAutocompleteFilter, defaultAutocompleteOptionProps } from "./defaults.js";
+const noop = ()=>{
+// do nothing
+};
+export function FilterAutocompleteOptions(props) {
+    const { query, filter = defaultAutocompleteFilter, options, extractor = defaultAutocompleteExtractor, whitespace = "keep", comboboxRef, disableFilter, onAutocomplete = noop, getOptionProps = defaultAutocompleteOptionProps, clearOnAutocomplete, noOptionsChildren = /*#__PURE__*/ _jsx(ListSubheader, {
+        children: "No Options"
+    }) } = props;
+    const filtered = useMemo(()=>{
+        if (disableFilter) {
+            return options;
+        }
+        return filter({
+            list: options,
+            query,
+            extractor,
+            whitespace
+        });
+    }, [
+        disableFilter,
+        extractor,
+        filter,
+        options,
+        query,
+        whitespace
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            !filtered.length && noOptionsChildren,
+            filtered.map((option, index)=>{
+                const label = extractor(option);
+                const optionProps = getOptionProps({
+                    index,
+                    option
+                });
+                return /*#__PURE__*/ _jsx(MenuItem, {
+                    role: "option",
+                    ...optionProps,
+                    onClick: (event)=>{
+                        optionProps?.onClick?.(event);
+                        triggerManualChangeEvent(comboboxRef.current, clearOnAutocomplete ? "" : label);
+                        onAutocomplete(option);
+                    },
+                    children: optionProps?.children ?? label
+                }, label);
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=FilterAutocompleteOptions.js.map

package/dist/autocomplete/FilterAutocompleteOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/FilterAutocompleteOptions.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo, type ReactElement, type RefObject } from \"react\";\nimport {\n  triggerManualChangeEvent,\n  type EditableHTMLElement,\n} from \"../form/utils.js\";\nimport { ListSubheader } from \"../list/ListSubheader.js\";\nimport { MenuItem } from \"../menu/MenuItem.js\";\nimport {\n  defaultAutocompleteExtractor,\n  defaultAutocompleteFilter,\n  defaultAutocompleteOptionProps,\n} from \"./defaults.js\";\nimport { type AutocompleteOptionsProps } from \"./types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FilterAutocompleteOptionsProps<T>\n  extends AutocompleteOptionsProps<T> {\n  query: string;\n  comboboxRef: RefObject<EditableHTMLElement>;\n}\n\nexport function FilterAutocompleteOptions<T>(\n  props: FilterAutocompleteOptionsProps<T>\n): ReactElement {\n  const {\n    query,\n    filter = defaultAutocompleteFilter,\n    options,\n    extractor = defaultAutocompleteExtractor,\n    whitespace = \"keep\",\n    comboboxRef,\n    disableFilter,\n    onAutocomplete = noop,\n    getOptionProps = defaultAutocompleteOptionProps,\n    clearOnAutocomplete,\n    noOptionsChildren = <ListSubheader>No Options</ListSubheader>,\n  } = props;\n  const filtered = useMemo(() => {\n    if (disableFilter) {\n      return options;\n    }\n\n    return filter({\n      list: options,\n      query,\n      extractor,\n      whitespace,\n    });\n  }, [disableFilter, extractor, filter, options, query, whitespace]);\n\n  return (\n    <>\n      {!filtered.length && noOptionsChildren}\n      {filtered.map((option, index) => {\n        const label = extractor(option);\n        const optionProps = getOptionProps({\n          index,\n          option,\n        });\n\n        return (\n          <MenuItem\n            key={label}\n            role=\"option\"\n            {...optionProps}\n            onClick={(event) => {\n              optionProps?.onClick?.(event);\n\n              triggerManualChangeEvent(\n                comboboxRef.current,\n                clearOnAutocomplete ? \"\" : label\n              );\n              onAutocomplete(option);\n            }}\n          >\n            {optionProps?.children ?? label}\n          </MenuItem>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["useMemo","triggerManualChangeEvent","ListSubheader","MenuItem","defaultAutocompleteExtractor","defaultAutocompleteFilter","defaultAutocompleteOptionProps","noop","FilterAutocompleteOptions","props","query","filter","options","extractor","whitespace","comboboxRef","disableFilter","onAutocomplete","getOptionProps","clearOnAutocomplete","noOptionsChildren","filtered","list","length","map","option","index","label","optionProps","role","onClick","event","current","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,OAAO,QAA2C,QAAQ;AACnE,SACEC,wBAAwB,QAEnB,mBAAmB;AAC1B,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SACEC,4BAA4B,EAC5BC,yBAAyB,EACzBC,8BAA8B,QACzB,gBAAgB;AAGvB,MAAMC,OAAO;AACX,aAAa;AACf;AAQA,OAAO,SAASC,0BACdC,KAAwC;IAExC,MAAM,EACJC,KAAK,EACLC,SAASN,yBAAyB,EAClCO,OAAO,EACPC,YAAYT,4BAA4B,EACxCU,aAAa,MAAM,EACnBC,WAAW,EACXC,aAAa,EACbC,iBAAiBV,IAAI,EACrBW,iBAAiBZ,8BAA8B,EAC/Ca,mBAAmB,EACnBC,kCAAoB,KAAClB;kBAAc;MAA0B,EAC9D,GAAGO;IACJ,MAAMY,WAAWrB,QAAQ;QACvB,IAAIgB,eAAe;YACjB,OAAOJ;QACT;QAEA,OAAOD,OAAO;YACZW,MAAMV;YACNF;YACAG;YACAC;QACF;IACF,GAAG;QAACE;QAAeH;QAAWF;QAAQC;QAASF;QAAOI;KAAW;IAEjE,qBACE;;YACG,CAACO,SAASE,MAAM,IAAIH;YACpBC,SAASG,GAAG,CAAC,CAACC,QAAQC;gBACrB,MAAMC,QAAQd,UAAUY;gBACxB,MAAMG,cAAcV,eAAe;oBACjCQ;oBACAD;gBACF;gBAEA,qBACE,KAACtB;oBAEC0B,MAAK;oBACJ,GAAGD,WAAW;oBACfE,SAAS,CAACC;wBACRH,aAAaE,UAAUC;wBAEvB9B,yBACEc,YAAYiB,OAAO,EACnBb,sBAAsB,KAAKQ;wBAE7BV,eAAeQ;oBACjB;8BAECG,aAAaK,YAAYN;mBAbrBA;YAgBX;;;AAGN"}

package/dist/autocomplete/_autocomplete.scss

@@ -0,0 +1,75 @@
+@use "sass:list";
+@use "sass:map";
+@use "../utils";
+@use "../button/button";
+@use "../form/form";
+@use "../progress/progress";
+
+$disable-everything: false !default;
+$disable-dropdown-button: false !default;
+$disable-circular-progress: false !default;
+
+$button-size: button.$icon-small-size !default;
+$circular-progress-size: progress.$circular-dense-size !default;
+
+$dropdown-button-calc: calc(button.get-var(icon-font-size) * 2) !default;
+$dropdown-button-only-calc: calc(
+  form.get-var(addon-spacing) + $dropdown-button-calc
+) !default;
+$circular-progress-only-calc: calc(
+  form.get-var(addon-spacing) + progress.get-var(circular-size)
+) !default;
+$circular-progress-and-dropdown-button-calc: calc(
+  calc(form.get-var(addon-spacing) * 2) + progress.get-var(circular-size) +
+    $dropdown-button-calc
+) !default;
+
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(autocomplete, $disable-layer) {
+      .rmd-autocomplete {
+        @if not $disable-dropdown-button {
+          @include button.set-var(icon-font-size, $button-size);
+        }
+        @if not $disable-circular-progress {
+          @include progress.set-var(circular-size, $circular-progress-size);
+        }
+
+        @if not $disable-dropdown-button {
+          // right-addon-1: dropdown button
+          &--ra1 {
+            @include form.set-var(
+              text-field-padding-right,
+              $dropdown-button-only-calc
+            );
+          }
+
+          @if not $disable-circular-progress {
+            // right-addon-2: circular progress and dropdown button
+            &--ra2 {
+              @include form.set-var(
+                text-field-padding-right,
+                $circular-progress-and-dropdown-button-calc
+              );
+            }
+          }
+        }
+
+        @if not $disable-circular-progress {
+          // right-addon-3: circular progress
+          &--ra3 {
+            @include form.set-var(
+              text-field-padding-right,
+              $circular-progress-only-calc
+            );
+          }
+        }
+
+        &__right-addon {
+          @include utils.auto-rtl(right, 0);
+          @include utils.auto-rtl(padding-left, form.get-var(addon-spacing), 0);
+        }
+      }
+    }
+  }
+}

package/dist/autocomplete/autocompleteStyles.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteClassNameOptions {
+    className?: string;
+    loading?: boolean;
+    disableDropdownButton?: boolean;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function autocomplete(options?: AutocompleteClassNameOptions): string;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteRightAddonClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function autocompleteRightAddon(options?: AutocompleteRightAddonClassNameOptions): string;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteClearButtonClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function autocompleteClearButton(options?: AutocompleteClearButtonClassNameOptions): string;