@purpur/library 9.2.2 → 9.2.3

package/dist/{search-field-CMBDkydb.mjs → search-field-CZ9mIyZ-.mjs}

@@ -1,54 +1,54 @@
 import { jsx as t, jsxs as B } from "react/jsx-runtime";
 import { forwardRef as x, useId as R } from "react";
-import { L as S } from "./listbox-DG4KmQP_.mjs";
+import { L as N } from "./listbox-DG4KmQP_.mjs";
 import { e as A } from "./use-autocomplete.es-CVv3z8t6.mjs";
-import { c as $ } from "./bind-CU-R61T-.mjs";
+import { c as w } from "./bind-CU-R61T-.mjs";
 import { s as F } from "./search.es-DoFKg2Hr.mjs";
 import { T as V } from "./text-field-BQfxJobW.mjs";
-import { b as v } from "./button-4-yWOgtD.mjs";
+import { b as S } from "./button-4-yWOgtD.mjs";
 const O = {
-  "purpur-search-field": "_purpur-search-field_6ot57_1",
-  "purpur-search-field--has-clear-button": "_purpur-search-field--has-clear-button_6ot57_4",
-  "purpur-search-field--no-gap": "_purpur-search-field--no-gap_6ot57_13",
-  "purpur-search-field__wrapper": "_purpur-search-field__wrapper_6ot57_17",
-  "purpur-search-field__wrapper--gap": "_purpur-search-field__wrapper--gap_6ot57_20",
-  "purpur-search-field__search-icon": "_purpur-search-field__search-icon_6ot57_24",
-  "purpur-search-field__close-icon": "_purpur-search-field__close-icon_6ot57_24",
-  "purpur-search-field__autocomplete-root": "_purpur-search-field__autocomplete-root_6ot57_27",
-  "purpur-search-field__listbox": "_purpur-search-field__listbox_6ot57_31"
+  "purpur-search-field": "_purpur-search-field_1wc77_1",
+  "purpur-search-field--has-clear-button": "_purpur-search-field--has-clear-button_1wc77_4",
+  "purpur-search-field--no-gap": "_purpur-search-field--no-gap_1wc77_13",
+  "purpur-search-field__wrapper": "_purpur-search-field__wrapper_1wc77_17",
+  "purpur-search-field__wrapper--gap": "_purpur-search-field__wrapper--gap_1wc77_20",
+  "purpur-search-field__search-icon": "_purpur-search-field__search-icon_1wc77_24",
+  "purpur-search-field__close-icon": "_purpur-search-field__close-icon_1wc77_24",
+  "purpur-search-field__autocomplete-root": "_purpur-search-field__autocomplete-root_1wc77_27",
+  "purpur-search-field__listbox": "_purpur-search-field__listbox_1wc77_31"
 }, j = {
   "purpur-search-field-button": "_purpur-search-field-button_c16yo_1",
   "purpur-search-field-button--icon-only": "_purpur-search-field-button--icon-only_c16yo_1"
-}, k = $.bind(j), w = "purpur-search-field-button", D = ({
+}, k = w.bind(j), v = "purpur-search-field-button", D = ({
   ["data-testid"]: e,
-  disabled: o,
+  disabled: s,
   iconOnly: u,
-  label: s
+  label: o
 }) => {
-  const c = {
-    className: k(w, {
-      [`${w}--icon-only`]: u
+  const n = {
+    className: k(v, {
+      [`${v}--icon-only`]: u
     }),
-    disabled: o,
+    disabled: s,
     "data-testid": e
   };
-  return u ? /* @__PURE__ */ t(v, { ...c, "aria-label": s, iconOnly: !0, size: "sm", type: "submit", variant: "primary", children: /* @__PURE__ */ t(F, { size: "xs" }) }) : /* @__PURE__ */ t(v, { ...c, size: "sm", type: "submit", variant: "primary", children: s });
-}, U = ["button-attached", "no-button"], y = $.bind(O), d = "purpur-search-field", g = x(
+  return u ? /* @__PURE__ */ t(S, { ...n, "aria-label": o, iconOnly: !0, size: "sm", type: "submit", variant: "primary", children: /* @__PURE__ */ t(F, { size: "xs" }) }) : /* @__PURE__ */ t(S, { ...n, size: "sm", type: "submit", variant: "primary", children: o });
+}, U = ["button-attached", "no-button"], y = w.bind(O), d = "purpur-search-field", $ = x(
   ({
     ["data-testid"]: e,
-    className: o,
+    className: s,
     clearButtonAriaLabel: u,
-    disabled: s,
-    iconOnlySearchButton: c,
-    onClear: i,
+    disabled: o,
+    iconOnlySearchButton: n,
+    onClear: c,
     onSearch: l,
     searchButtonLabel: f,
     variant: p,
     formRef: r,
     wrapperStyle: m,
-    ...n
+    ...i
   }, a) => {
-    const _ = (h) => e ? `${e}-${h}` : void 0, b = (typeof n.value == "number" ? n.value !== void 0 : n.value?.length) && !s && !n.readOnly && !n.loading, z = y(o, d, {
+    const _ = (h) => e ? `${e}-${h}` : void 0, b = (typeof i.value == "number" ? i.value !== void 0 : i.value?.length) && !o && !i.readOnly && !i.loading, z = y(s, d, {
       [`${d}--no-gap`]: p === "button-attached",
       [`${d}--has-clear-button`]: b
     });
@@ -68,51 +68,51 @@ const O = {
             ref: a,
             className: z,
             clearButtonAriaLabel: u,
-            disabled: s,
-            onClear: i,
-            startAdornment: c ? null : /* @__PURE__ */ t(F, { size: "xs", className: y(`${d}__search-icon`) }, "1"),
+            disabled: o,
+            onClear: c,
+            startAdornment: n ? null : /* @__PURE__ */ t(F, { size: "xs", className: y(`${d}__search-icon`) }, "1"),
             afterField: p !== "no-button" ? /* @__PURE__ */ t(
               D,
               {
-                disabled: s,
-                iconOnly: c,
+                disabled: o,
+                iconOnly: n,
                 label: f,
                 "data-testid": _("button")
               }
             ) : null,
             "data-testid": _("text-field"),
             type: "search",
-            ...n
+            ...i
           }
         )
       }
     );
   }
 );
-g.displayName = "SearchFieldBase";
-const C = $.bind(O), I = "purpur-search-field", L = x(
+$.displayName = "SearchFieldBase";
+const C = w.bind(O), I = "purpur-search-field", L = x(
   ({
     suggestions: e,
-    suggestionsLabel: o,
+    suggestionsLabel: s,
     onSelectSuggestion: u,
-    openSuggestionsOnFocus: s,
-    suggestionsMaxHeight: c,
-    ...i
+    openSuggestionsOnFocus: o,
+    suggestionsMaxHeight: n,
+    ...c
   }, l) => {
-    const f = R(), p = i.id ?? f, r = A({
+    const f = R(), p = c.id ?? f, r = A({
       id: p,
       options: e,
-      listboxLabel: o,
-      disabled: i.disabled,
-      readOnly: i.readOnly,
-      openOnFocus: s,
-      listboxMaxHeight: c,
+      listboxLabel: s,
+      disabled: c.disabled,
+      readOnly: c.readOnly,
+      openOnFocus: o,
+      listboxMaxHeight: n,
       onSelect: u,
-      "data-testid": i["data-testid"]
+      "data-testid": c["data-testid"]
     }), m = (a) => {
       r.inputRef.current = a, typeof l == "function" ? l(a) : l && (l.current = a);
-    }, n = (a) => {
-      i.onChange?.(a), r.isOpen || r.openListbox();
+    }, i = (a) => {
+      c.onChange?.(a), r.isOpen || r.openListbox();
     };
     return /* @__PURE__ */ B(
       "div",
@@ -121,19 +121,19 @@ const C = $.bind(O), I = "purpur-search-field", L = x(
         className: C(`${I}__autocomplete-root`),
         children: [
           /* @__PURE__ */ t(
-            g,
+            $,
             {
               ref: m,
-              ...i,
-              onChange: n,
+              ...c,
+              onChange: i,
               id: p,
               wrapperStyle: r.anchorStyle,
               ...r.inputProps
             }
           ),
-          r.isOpen && /* @__PURE__ */ t(S, { ...r.listboxProps, className: C(`${I}__listbox`), children: e.map((a, _) => {
-            const { key: N, ...b } = r.getListboxItemProps(a, _);
-            return /* @__PURE__ */ t(S.Item, { ...b, children: a.label }, N);
+          r.isOpen && /* @__PURE__ */ t(N, { ...r.listboxProps, className: C(`${I}__listbox`), children: e.map((a, _) => {
+            const { key: g, ...b } = r.getListboxItemProps(a, _);
+            return /* @__PURE__ */ t(N.Item, { ...b, children: a.label }, g);
           }) })
         ]
       }
@@ -141,11 +141,11 @@ const C = $.bind(O), I = "purpur-search-field", L = x(
   }
 );
 L.displayName = "SearchFieldAutocomplete";
-const H = x((e, o) => e.suggestions ? /* @__PURE__ */ t(L, { ref: o, ...e }) : /* @__PURE__ */ t(g, { ref: o, ...e }));
+const H = x((e, s) => e.suggestions ? /* @__PURE__ */ t(L, { ref: s, ...e }) : /* @__PURE__ */ t($, { ref: s, ...e }));
 H.displayName = "SearchField";
 export {
   H as S,
   L as a,
   U as s
 };
-//# sourceMappingURL=search-field-CMBDkydb.mjs.map
+//# sourceMappingURL=search-field-CZ9mIyZ-.mjs.map

package/dist/{search-field-CMBDkydb.mjs.map → search-field-CZ9mIyZ-.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"search-field-CMBDkydb.mjs","sources":["../../../components/search-field/src/search-field-button.tsx","../../../components/search-field/src/search-field-base.tsx","../../../components/search-field/src/search-field-autocomplete.tsx","../../../components/search-field/src/search-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field-button.module.scss\";\n\ntype Props = {\n  [\"data-testid\"]?: string;\n  disabled?: boolean;\n  iconOnly?: boolean;\n  label: string;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field-button\";\n\nexport const SearchFieldButton = ({\n  [\"data-testid\"]: dataTestid,\n  disabled,\n  iconOnly,\n  label,\n}: Props) => {\n  const props = {\n    className: cx(rootClassName, {\n      [`${rootClassName}--icon-only`]: iconOnly,\n    }),\n    disabled,\n    [\"data-testid\"]: dataTestid,\n  };\n\n  if (iconOnly) {\n    return (\n      <Button {...props} aria-label={label} iconOnly size=\"sm\" type=\"submit\" variant=\"primary\">\n        <IconSearch size=\"xs\" />\n      </Button>\n    );\n  }\n\n  return (\n    <Button {...props} size=\"sm\" type=\"submit\" variant=\"primary\">\n      {label}\n    </Button>\n  );\n};\n","import React, {\n  type ChangeEvent,\n  type CSSProperties,\n  type FormEvent,\n  forwardRef,\n  type RefObject,\n} from \"react\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport { TextField, type TextFieldProps } from \"@purpur/text-field\";\nimport { type AutocompleteOption } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport { SearchFieldButton } from \"./search-field-button\";\n\nexport const searchFieldVariants = [\"button-attached\", \"no-button\"] as const;\n\ntype Variant = (typeof searchFieldVariants)[number];\n\ntype DefaultProps = {\n  [\"data-testid\"]?: string;\n  /**\n   * An accessible label for the clear button.\n   * */\n  clearButtonAriaLabel: string;\n  /**\n   * Disables both the input field and submit button if `true`.\n   * */\n  disabled?: boolean;\n  /**\n   * Will display only a search icon in the search button if `true`.\n   * */\n  iconOnlySearchButton?: boolean;\n  /**\n   * Event handler called when the value of the search field changes.\n   * */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Event handler called when the clear button is clicked.\n   * */\n  onClear: () => void;\n  /**\n   * Event handler called when the search form is submitted.\n   * */\n  onSearch?: (e: FormEvent<HTMLFormElement>) => void;\n  /**\n   * The label text (or `aria-label` if `iconOnlySearchButton` is `true`) of the search button.\n   * */\n  searchButtonLabel?: string;\n  variant: Variant;\n  formRef?: RefObject<HTMLFormElement>;\n};\n\ntype TextSearchButton = {\n  iconOnlySearchButton?: false;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype IconOnlySearchButton = {\n  iconOnlySearchButton: true;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype NoButton = {\n  searchButtonLabel?: never;\n  variant: \"no-button\";\n};\n\nexport type SearchFieldBaseProps = DefaultProps &\n  (TextSearchButton | IconOnlySearchButton | NoButton) &\n  Omit<TextFieldProps, \"startAdornment\" | \"endAdornment\" | \"afterField\" | \"onChange\" | \"variant\">;\n\ntype SearchFieldBaseInternalProps = SearchFieldBaseProps & {\n  wrapperStyle?: CSSProperties;\n};\n\ntype SearchFieldAutocompleteSharedProps = {\n  /**\n   * Called when the user selects a suggestion.\n   */\n  onSelectSuggestion?: (option: AutocompleteOption) => void;\n  /**\n   * Open the suggestions listbox when the input receives focus.\n   */\n  openSuggestionsOnFocus?: boolean;\n  /**\n   * Maximum height of the suggestions listbox. A number is interpreted as px.\n   */\n  suggestionsMaxHeight?: string | number;\n};\n\ntype SearchFieldWithoutAutocomplete = SearchFieldAutocompleteSharedProps & {\n  suggestions?: never;\n  suggestionsLabel?: never;\n};\n\ntype SearchFieldWithAutocomplete = SearchFieldAutocompleteSharedProps & {\n  /**\n   * The list of suggestions to display in a listbox below the field.\n   * No filtering is applied — pass the already-correct (pre-filtered) list.\n   * If autocomplete should stay enabled while there are temporarily no matches,\n   * pass an empty array instead of `undefined` or `null`. Changing this prop\n   * from an absent value to an array switches between the regular and\n   * autocomplete variants, which causes a re-render, drops input focus, and\n   * hides the listbox.\n   */\n  suggestions: AutocompleteOption[];\n  /**\n   * Accessible label for the suggestions listbox.\n   */\n  suggestionsLabel: string;\n};\n\nexport type SearchFieldAutocompleteEnhancements =\n  | SearchFieldWithoutAutocomplete\n  | SearchFieldWithAutocomplete;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport const SearchFieldBase = forwardRef<HTMLInputElement, SearchFieldBaseInternalProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      disabled,\n      iconOnlySearchButton,\n      onClear,\n      onSearch,\n      searchButtonLabel,\n      variant,\n      formRef,\n      wrapperStyle,\n      ...props\n    },\n    ref\n  ) => {\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const hasValue =\n      typeof props.value === \"number\" ? props.value !== undefined : props.value?.length;\n    const hasClearButton = hasValue && !disabled && !props.readOnly && !props.loading;\n\n    const classes = cx(className, rootClassName, {\n      [`${rootClassName}--no-gap`]: variant === \"button-attached\",\n      [`${rootClassName}--has-clear-button`]: hasClearButton,\n    });\n\n    return (\n      <form\n        ref={formRef}\n        className={cx(`${rootClassName}__wrapper`)}\n        data-testid={dataTestId}\n        style={wrapperStyle}\n        onSubmit={(e: FormEvent<HTMLFormElement>) => {\n          e.preventDefault();\n          onSearch?.(e);\n        }}\n      >\n        <TextField\n          ref={ref}\n          className={classes}\n          clearButtonAriaLabel={clearButtonAriaLabel}\n          disabled={disabled}\n          onClear={onClear}\n          startAdornment={\n            !iconOnlySearchButton ? (\n              <IconSearch size=\"xs\" className={cx(`${rootClassName}__search-icon`)} key=\"1\" />\n            ) : null\n          }\n          afterField={\n            variant !== \"no-button\" ? (\n              <SearchFieldButton\n                disabled={disabled}\n                iconOnly={iconOnlySearchButton}\n                label={searchButtonLabel}\n                data-testid={getTestId(\"button\")}\n              />\n            ) : null\n          }\n          data-testid={getTestId(\"text-field\")}\n          type=\"search\"\n          {...props}\n        />\n      </form>\n    );\n  }\n);\n\nSearchFieldBase.displayName = \"SearchFieldBase\";\n","import React, { forwardRef, useId } from \"react\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { type AutocompleteOption, useAutocomplete } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n} from \"./search-field-base\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport type SearchFieldAutocompleteProps = SearchFieldBaseProps &\n  Extract<SearchFieldAutocompleteEnhancements, { suggestions: AutocompleteOption[] }>;\n\nexport const SearchFieldAutocomplete = forwardRef<HTMLInputElement, SearchFieldAutocompleteProps>(\n  (\n    {\n      suggestions,\n      suggestionsLabel,\n      onSelectSuggestion,\n      openSuggestionsOnFocus,\n      suggestionsMaxHeight,\n      ...searchFieldProps\n    },\n    ref\n  ) => {\n    const randomId = useId();\n    const inputId = (searchFieldProps.id as string | undefined) ?? randomId;\n\n    const autocomplete = useAutocomplete({\n      id: inputId,\n      options: suggestions,\n      listboxLabel: suggestionsLabel,\n      disabled: searchFieldProps.disabled,\n      readOnly: searchFieldProps.readOnly,\n      openOnFocus: openSuggestionsOnFocus,\n      listboxMaxHeight: suggestionsMaxHeight,\n      onSelect: onSelectSuggestion,\n      [\"data-testid\"]: searchFieldProps[\"data-testid\"],\n    });\n\n    const setInputRef = (node: HTMLInputElement | null) => {\n      (autocomplete.inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n    };\n\n    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n      searchFieldProps.onChange?.(event);\n      if (!autocomplete.isOpen) {\n        autocomplete.openListbox();\n      }\n    };\n\n    return (\n      <div\n        ref={autocomplete.rootRef as React.RefObject<HTMLDivElement>}\n        className={cx(`${rootClassName}__autocomplete-root`)}\n      >\n        <SearchFieldBase\n          ref={setInputRef}\n          {...searchFieldProps}\n          onChange={handleInputChange}\n          id={inputId}\n          wrapperStyle={autocomplete.anchorStyle}\n          {...autocomplete.inputProps}\n        />\n        {autocomplete.isOpen && (\n          <Listbox {...autocomplete.listboxProps} className={cx(`${rootClassName}__listbox`)}>\n            {suggestions.map((option, index) => {\n              const { key, ...listboxItemProps } = autocomplete.getListboxItemProps(option, index);\n\n              return (\n                <Listbox.Item key={key} {...listboxItemProps}>\n                  {option.label}\n                </Listbox.Item>\n              );\n            })}\n          </Listbox>\n        )}\n      </div>\n    );\n  }\n);\n\nSearchFieldAutocomplete.displayName = \"SearchFieldAutocomplete\";\n","import React, { forwardRef } from \"react\";\n\nimport { SearchFieldAutocomplete } from \"./search-field-autocomplete\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n  searchFieldVariants,\n} from \"./search-field-base\";\n\nexport { searchFieldVariants };\n\nexport type SearchFieldProps = SearchFieldBaseProps & SearchFieldAutocompleteEnhancements;\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>((props, ref) => {\n  if (props.suggestions) {\n    return <SearchFieldAutocomplete ref={ref} {...props} />;\n  }\n\n  return <SearchFieldBase ref={ref} {...props} />;\n});\n\nSearchField.displayName = \"SearchField\";\n\nexport {\n  SearchFieldAutocomplete,\n  type SearchFieldAutocompleteProps,\n} from \"./search-field-autocomplete\";\n"],"names":["cx","c","styles","rootClassName","SearchFieldButton","dataTestid","disabled","iconOnly","label","props","Button","IconSearch","jsx","searchFieldVariants","SearchFieldBase","forwardRef","dataTestId","className","clearButtonAriaLabel","iconOnlySearchButton","onClear","onSearch","searchButtonLabel","variant","formRef","wrapperStyle","ref","getTestId","name","hasClearButton","classes","e","TextField","SearchFieldAutocomplete","suggestions","suggestionsLabel","onSelectSuggestion","openSuggestionsOnFocus","suggestionsMaxHeight","searchFieldProps","randomId","useId","inputId","autocomplete","useAutocomplete","setInputRef","node","handleInputChange","event","jsxs","Listbox","option","index","key","listboxItemProps","SearchField"],"mappings":"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"}
+{"version":3,"file":"search-field-CZ9mIyZ-.mjs","sources":["../../../components/search-field/src/search-field-button.tsx","../../../components/search-field/src/search-field-base.tsx","../../../components/search-field/src/search-field-autocomplete.tsx","../../../components/search-field/src/search-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field-button.module.scss\";\n\ntype Props = {\n  [\"data-testid\"]?: string;\n  disabled?: boolean;\n  iconOnly?: boolean;\n  label: string;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field-button\";\n\nexport const SearchFieldButton = ({\n  [\"data-testid\"]: dataTestid,\n  disabled,\n  iconOnly,\n  label,\n}: Props) => {\n  const props = {\n    className: cx(rootClassName, {\n      [`${rootClassName}--icon-only`]: iconOnly,\n    }),\n    disabled,\n    [\"data-testid\"]: dataTestid,\n  };\n\n  if (iconOnly) {\n    return (\n      <Button {...props} aria-label={label} iconOnly size=\"sm\" type=\"submit\" variant=\"primary\">\n        <IconSearch size=\"xs\" />\n      </Button>\n    );\n  }\n\n  return (\n    <Button {...props} size=\"sm\" type=\"submit\" variant=\"primary\">\n      {label}\n    </Button>\n  );\n};\n","import React, {\n  type ChangeEvent,\n  type CSSProperties,\n  type FormEvent,\n  forwardRef,\n  type RefObject,\n} from \"react\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport { TextField, type TextFieldProps } from \"@purpur/text-field\";\nimport { type AutocompleteOption } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport { SearchFieldButton } from \"./search-field-button\";\n\nexport const searchFieldVariants = [\"button-attached\", \"no-button\"] as const;\n\ntype Variant = (typeof searchFieldVariants)[number];\n\ntype DefaultProps = {\n  [\"data-testid\"]?: string;\n  /**\n   * An accessible label for the clear button.\n   * */\n  clearButtonAriaLabel: string;\n  /**\n   * Disables both the input field and submit button if `true`.\n   * */\n  disabled?: boolean;\n  /**\n   * Will display only a search icon in the search button if `true`.\n   * */\n  iconOnlySearchButton?: boolean;\n  /**\n   * Event handler called when the value of the search field changes.\n   * */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Event handler called when the clear button is clicked.\n   * */\n  onClear: () => void;\n  /**\n   * Event handler called when the search form is submitted.\n   * */\n  onSearch?: (e: FormEvent<HTMLFormElement>) => void;\n  /**\n   * The label text (or `aria-label` if `iconOnlySearchButton` is `true`) of the search button.\n   * */\n  searchButtonLabel?: string;\n  variant: Variant;\n  formRef?: RefObject<HTMLFormElement>;\n};\n\ntype TextSearchButton = {\n  iconOnlySearchButton?: false;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype IconOnlySearchButton = {\n  iconOnlySearchButton: true;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype NoButton = {\n  searchButtonLabel?: never;\n  variant: \"no-button\";\n};\n\nexport type SearchFieldBaseProps = DefaultProps &\n  (TextSearchButton | IconOnlySearchButton | NoButton) &\n  Omit<TextFieldProps, \"startAdornment\" | \"endAdornment\" | \"afterField\" | \"onChange\" | \"variant\">;\n\ntype SearchFieldBaseInternalProps = SearchFieldBaseProps & {\n  wrapperStyle?: CSSProperties;\n};\n\ntype SearchFieldAutocompleteSharedProps = {\n  /**\n   * Called when the user selects a suggestion.\n   */\n  onSelectSuggestion?: (option: AutocompleteOption) => void;\n  /**\n   * Open the suggestions listbox when the input receives focus.\n   */\n  openSuggestionsOnFocus?: boolean;\n  /**\n   * Maximum height of the suggestions listbox. A number is interpreted as px.\n   */\n  suggestionsMaxHeight?: string | number;\n};\n\ntype SearchFieldWithoutAutocomplete = SearchFieldAutocompleteSharedProps & {\n  suggestions?: never;\n  suggestionsLabel?: never;\n};\n\ntype SearchFieldWithAutocomplete = SearchFieldAutocompleteSharedProps & {\n  /**\n   * The list of suggestions to display in a listbox below the field.\n   * No filtering is applied — pass the already-correct (pre-filtered) list.\n   * If autocomplete should stay enabled while there are temporarily no matches,\n   * pass an empty array instead of `undefined` or `null`. Changing this prop\n   * from an absent value to an array switches between the regular and\n   * autocomplete variants, which causes a re-render, drops input focus, and\n   * hides the listbox.\n   */\n  suggestions: AutocompleteOption[];\n  /**\n   * Accessible label for the suggestions listbox.\n   */\n  suggestionsLabel: string;\n};\n\nexport type SearchFieldAutocompleteEnhancements =\n  | SearchFieldWithoutAutocomplete\n  | SearchFieldWithAutocomplete;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport const SearchFieldBase = forwardRef<HTMLInputElement, SearchFieldBaseInternalProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      disabled,\n      iconOnlySearchButton,\n      onClear,\n      onSearch,\n      searchButtonLabel,\n      variant,\n      formRef,\n      wrapperStyle,\n      ...props\n    },\n    ref\n  ) => {\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const hasValue =\n      typeof props.value === \"number\" ? props.value !== undefined : props.value?.length;\n    const hasClearButton = hasValue && !disabled && !props.readOnly && !props.loading;\n\n    const classes = cx(className, rootClassName, {\n      [`${rootClassName}--no-gap`]: variant === \"button-attached\",\n      [`${rootClassName}--has-clear-button`]: hasClearButton,\n    });\n\n    return (\n      <form\n        ref={formRef}\n        className={cx(`${rootClassName}__wrapper`)}\n        data-testid={dataTestId}\n        style={wrapperStyle}\n        onSubmit={(e: FormEvent<HTMLFormElement>) => {\n          e.preventDefault();\n          onSearch?.(e);\n        }}\n      >\n        <TextField\n          ref={ref}\n          className={classes}\n          clearButtonAriaLabel={clearButtonAriaLabel}\n          disabled={disabled}\n          onClear={onClear}\n          startAdornment={\n            !iconOnlySearchButton ? (\n              <IconSearch size=\"xs\" className={cx(`${rootClassName}__search-icon`)} key=\"1\" />\n            ) : null\n          }\n          afterField={\n            variant !== \"no-button\" ? (\n              <SearchFieldButton\n                disabled={disabled}\n                iconOnly={iconOnlySearchButton}\n                label={searchButtonLabel}\n                data-testid={getTestId(\"button\")}\n              />\n            ) : null\n          }\n          data-testid={getTestId(\"text-field\")}\n          type=\"search\"\n          {...props}\n        />\n      </form>\n    );\n  }\n);\n\nSearchFieldBase.displayName = \"SearchFieldBase\";\n","import React, { forwardRef, useId } from \"react\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { type AutocompleteOption, useAutocomplete } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n} from \"./search-field-base\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport type SearchFieldAutocompleteProps = SearchFieldBaseProps &\n  Extract<SearchFieldAutocompleteEnhancements, { suggestions: AutocompleteOption[] }>;\n\nexport const SearchFieldAutocomplete = forwardRef<HTMLInputElement, SearchFieldAutocompleteProps>(\n  (\n    {\n      suggestions,\n      suggestionsLabel,\n      onSelectSuggestion,\n      openSuggestionsOnFocus,\n      suggestionsMaxHeight,\n      ...searchFieldProps\n    },\n    ref\n  ) => {\n    const randomId = useId();\n    const inputId = (searchFieldProps.id as string | undefined) ?? randomId;\n\n    const autocomplete = useAutocomplete({\n      id: inputId,\n      options: suggestions,\n      listboxLabel: suggestionsLabel,\n      disabled: searchFieldProps.disabled,\n      readOnly: searchFieldProps.readOnly,\n      openOnFocus: openSuggestionsOnFocus,\n      listboxMaxHeight: suggestionsMaxHeight,\n      onSelect: onSelectSuggestion,\n      [\"data-testid\"]: searchFieldProps[\"data-testid\"],\n    });\n\n    const setInputRef = (node: HTMLInputElement | null) => {\n      (autocomplete.inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n    };\n\n    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n      searchFieldProps.onChange?.(event);\n      if (!autocomplete.isOpen) {\n        autocomplete.openListbox();\n      }\n    };\n\n    return (\n      <div\n        ref={autocomplete.rootRef as React.RefObject<HTMLDivElement>}\n        className={cx(`${rootClassName}__autocomplete-root`)}\n      >\n        <SearchFieldBase\n          ref={setInputRef}\n          {...searchFieldProps}\n          onChange={handleInputChange}\n          id={inputId}\n          wrapperStyle={autocomplete.anchorStyle}\n          {...autocomplete.inputProps}\n        />\n        {autocomplete.isOpen && (\n          <Listbox {...autocomplete.listboxProps} className={cx(`${rootClassName}__listbox`)}>\n            {suggestions.map((option, index) => {\n              const { key, ...listboxItemProps } = autocomplete.getListboxItemProps(option, index);\n\n              return (\n                <Listbox.Item key={key} {...listboxItemProps}>\n                  {option.label}\n                </Listbox.Item>\n              );\n            })}\n          </Listbox>\n        )}\n      </div>\n    );\n  }\n);\n\nSearchFieldAutocomplete.displayName = \"SearchFieldAutocomplete\";\n","import React, { forwardRef } from \"react\";\n\nimport { SearchFieldAutocomplete } from \"./search-field-autocomplete\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n  searchFieldVariants,\n} from \"./search-field-base\";\n\nexport { searchFieldVariants };\n\nexport type SearchFieldProps = SearchFieldBaseProps & SearchFieldAutocompleteEnhancements;\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>((props, ref) => {\n  if (props.suggestions) {\n    return <SearchFieldAutocomplete ref={ref} {...props} />;\n  }\n\n  return <SearchFieldBase ref={ref} {...props} />;\n});\n\nSearchField.displayName = \"SearchField\";\n\nexport {\n  SearchFieldAutocomplete,\n  type SearchFieldAutocompleteProps,\n} from \"./search-field-autocomplete\";\n"],"names":["cx","c","styles","rootClassName","SearchFieldButton","dataTestid","disabled","iconOnly","label","props","Button","IconSearch","jsx","searchFieldVariants","SearchFieldBase","forwardRef","dataTestId","className","clearButtonAriaLabel","iconOnlySearchButton","onClear","onSearch","searchButtonLabel","variant","formRef","wrapperStyle","ref","getTestId","name","hasClearButton","classes","e","TextField","SearchFieldAutocomplete","suggestions","suggestionsLabel","onSelectSuggestion","openSuggestionsOnFocus","suggestionsMaxHeight","searchFieldProps","randomId","useId","inputId","autocomplete","useAutocomplete","setInputRef","node","handleInputChange","event","jsxs","Listbox","option","index","key","listboxItemProps","SearchField"],"mappings":"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"}

package/dist/search-field-DD9UkOca.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),f=require("react"),N=require("./listbox-COBHLRtB.js"),A=require("./use-autocomplete.es-BHDgQLae.js"),w=require("./bind-DeUYJ6m9.js"),R=require("./search.es-Cg2amJSR.js"),B=require("./text-field-CYJzQG3h.js"),S=require("./button-DmybVApa.js"),C={"purpur-search-field":"_purpur-search-field_1wc77_1","purpur-search-field--has-clear-button":"_purpur-search-field--has-clear-button_1wc77_4","purpur-search-field--no-gap":"_purpur-search-field--no-gap_1wc77_13","purpur-search-field__wrapper":"_purpur-search-field__wrapper_1wc77_17","purpur-search-field__wrapper--gap":"_purpur-search-field__wrapper--gap_1wc77_20","purpur-search-field__search-icon":"_purpur-search-field__search-icon_1wc77_24","purpur-search-field__close-icon":"_purpur-search-field__close-icon_1wc77_24","purpur-search-field__autocomplete-root":"_purpur-search-field__autocomplete-root_1wc77_27","purpur-search-field__listbox":"_purpur-search-field__listbox_1wc77_31"},L={"purpur-search-field-button":"_purpur-search-field-button_c16yo_1","purpur-search-field-button--icon-only":"_purpur-search-field-button--icon-only_c16yo_1"},z=w.c.bind(L),F="purpur-search-field-button",V=({["data-testid"]:t,disabled:a,iconOnly:u,label:c})=>{const i={className:z(F,{[`${F}--icon-only`]:u}),disabled:a,"data-testid":t};return u?e.jsx(S.Button,{...i,"aria-label":c,iconOnly:!0,size:"sm",type:"submit",variant:"primary",children:e.jsx(R.s,{size:"xs"})}):e.jsx(S.Button,{...i,size:"sm",type:"submit",variant:"primary",children:c})},k=["button-attached","no-button"],y=w.c.bind(C),d="purpur-search-field",j=f.forwardRef(({["data-testid"]:t,className:a,clearButtonAriaLabel:u,disabled:c,iconOnlySearchButton:i,onClear:o,onSearch:l,searchButtonLabel:b,variant:p,formRef:r,wrapperStyle:m,...n},s)=>{const _=h=>t?`${t}-${h}`:void 0,x=(typeof n.value=="number"?n.value!==void 0:n.value?.length)&&!c&&!n.readOnly&&!n.loading,O=y(a,d,{[`${d}--no-gap`]:p==="button-attached",[`${d}--has-clear-button`]:x});return e.jsx("form",{ref:r,className:y(`${d}__wrapper`),"data-testid":t,style:m,onSubmit:h=>{h.preventDefault(),l?.(h)},children:e.jsx(B.TextField,{ref:s,className:O,clearButtonAriaLabel:u,disabled:c,onClear:o,startAdornment:i?null:e.jsx(R.s,{size:"xs",className:y(`${d}__search-icon`)},"1"),afterField:p!=="no-button"?e.jsx(V,{disabled:c,iconOnly:i,label:b,"data-testid":_("button")}):null,"data-testid":_("text-field"),type:"search",...n})})});j.displayName="SearchFieldBase";const q=w.c.bind(C),v="purpur-search-field",$=f.forwardRef(({suggestions:t,suggestionsLabel:a,onSelectSuggestion:u,openSuggestionsOnFocus:c,suggestionsMaxHeight:i,...o},l)=>{const b=f.useId(),p=o.id??b,r=A.ee({id:p,options:t,listboxLabel:a,disabled:o.disabled,readOnly:o.readOnly,openOnFocus:c,listboxMaxHeight:i,onSelect:u,"data-testid":o["data-testid"]}),m=s=>{r.inputRef.current=s,typeof l=="function"?l(s):l&&(l.current=s)},n=s=>{o.onChange?.(s),r.isOpen||r.openListbox()};return e.jsxs("div",{ref:r.rootRef,className:q(`${v}__autocomplete-root`),children:[e.jsx(j,{ref:m,...o,onChange:n,id:p,wrapperStyle:r.anchorStyle,...r.inputProps}),r.isOpen&&e.jsx(N.Listbox,{...r.listboxProps,className:q(`${v}__listbox`),children:t.map((s,_)=>{const{key:g,...x}=r.getListboxItemProps(s,_);return e.jsx(N.Listbox.Item,{...x,children:s.label},g)})})]})});$.displayName="SearchFieldAutocomplete";const I=f.forwardRef((t,a)=>t.suggestions?e.jsx($,{ref:a,...t}):e.jsx(j,{ref:a,...t}));I.displayName="SearchField";exports.SearchField=I;exports.SearchFieldAutocomplete=$;exports.searchFieldVariants=k;
+//# sourceMappingURL=search-field-DD9UkOca.js.map

package/dist/{search-field-CU_tsmHb.js.map → search-field-DD9UkOca.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-field-CU_tsmHb.js","sources":["../../../components/search-field/src/search-field-button.tsx","../../../components/search-field/src/search-field-base.tsx","../../../components/search-field/src/search-field-autocomplete.tsx","../../../components/search-field/src/search-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field-button.module.scss\";\n\ntype Props = {\n  [\"data-testid\"]?: string;\n  disabled?: boolean;\n  iconOnly?: boolean;\n  label: string;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field-button\";\n\nexport const SearchFieldButton = ({\n  [\"data-testid\"]: dataTestid,\n  disabled,\n  iconOnly,\n  label,\n}: Props) => {\n  const props = {\n    className: cx(rootClassName, {\n      [`${rootClassName}--icon-only`]: iconOnly,\n    }),\n    disabled,\n    [\"data-testid\"]: dataTestid,\n  };\n\n  if (iconOnly) {\n    return (\n      <Button {...props} aria-label={label} iconOnly size=\"sm\" type=\"submit\" variant=\"primary\">\n        <IconSearch size=\"xs\" />\n      </Button>\n    );\n  }\n\n  return (\n    <Button {...props} size=\"sm\" type=\"submit\" variant=\"primary\">\n      {label}\n    </Button>\n  );\n};\n","import React, {\n  type ChangeEvent,\n  type CSSProperties,\n  type FormEvent,\n  forwardRef,\n  type RefObject,\n} from \"react\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport { TextField, type TextFieldProps } from \"@purpur/text-field\";\nimport { type AutocompleteOption } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport { SearchFieldButton } from \"./search-field-button\";\n\nexport const searchFieldVariants = [\"button-attached\", \"no-button\"] as const;\n\ntype Variant = (typeof searchFieldVariants)[number];\n\ntype DefaultProps = {\n  [\"data-testid\"]?: string;\n  /**\n   * An accessible label for the clear button.\n   * */\n  clearButtonAriaLabel: string;\n  /**\n   * Disables both the input field and submit button if `true`.\n   * */\n  disabled?: boolean;\n  /**\n   * Will display only a search icon in the search button if `true`.\n   * */\n  iconOnlySearchButton?: boolean;\n  /**\n   * Event handler called when the value of the search field changes.\n   * */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Event handler called when the clear button is clicked.\n   * */\n  onClear: () => void;\n  /**\n   * Event handler called when the search form is submitted.\n   * */\n  onSearch?: (e: FormEvent<HTMLFormElement>) => void;\n  /**\n   * The label text (or `aria-label` if `iconOnlySearchButton` is `true`) of the search button.\n   * */\n  searchButtonLabel?: string;\n  variant: Variant;\n  formRef?: RefObject<HTMLFormElement>;\n};\n\ntype TextSearchButton = {\n  iconOnlySearchButton?: false;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype IconOnlySearchButton = {\n  iconOnlySearchButton: true;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype NoButton = {\n  searchButtonLabel?: never;\n  variant: \"no-button\";\n};\n\nexport type SearchFieldBaseProps = DefaultProps &\n  (TextSearchButton | IconOnlySearchButton | NoButton) &\n  Omit<TextFieldProps, \"startAdornment\" | \"endAdornment\" | \"afterField\" | \"onChange\" | \"variant\">;\n\ntype SearchFieldBaseInternalProps = SearchFieldBaseProps & {\n  wrapperStyle?: CSSProperties;\n};\n\ntype SearchFieldAutocompleteSharedProps = {\n  /**\n   * Called when the user selects a suggestion.\n   */\n  onSelectSuggestion?: (option: AutocompleteOption) => void;\n  /**\n   * Open the suggestions listbox when the input receives focus.\n   */\n  openSuggestionsOnFocus?: boolean;\n  /**\n   * Maximum height of the suggestions listbox. A number is interpreted as px.\n   */\n  suggestionsMaxHeight?: string | number;\n};\n\ntype SearchFieldWithoutAutocomplete = SearchFieldAutocompleteSharedProps & {\n  suggestions?: never;\n  suggestionsLabel?: never;\n};\n\ntype SearchFieldWithAutocomplete = SearchFieldAutocompleteSharedProps & {\n  /**\n   * The list of suggestions to display in a listbox below the field.\n   * No filtering is applied — pass the already-correct (pre-filtered) list.\n   * If autocomplete should stay enabled while there are temporarily no matches,\n   * pass an empty array instead of `undefined` or `null`. Changing this prop\n   * from an absent value to an array switches between the regular and\n   * autocomplete variants, which causes a re-render, drops input focus, and\n   * hides the listbox.\n   */\n  suggestions: AutocompleteOption[];\n  /**\n   * Accessible label for the suggestions listbox.\n   */\n  suggestionsLabel: string;\n};\n\nexport type SearchFieldAutocompleteEnhancements =\n  | SearchFieldWithoutAutocomplete\n  | SearchFieldWithAutocomplete;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport const SearchFieldBase = forwardRef<HTMLInputElement, SearchFieldBaseInternalProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      disabled,\n      iconOnlySearchButton,\n      onClear,\n      onSearch,\n      searchButtonLabel,\n      variant,\n      formRef,\n      wrapperStyle,\n      ...props\n    },\n    ref\n  ) => {\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const hasValue =\n      typeof props.value === \"number\" ? props.value !== undefined : props.value?.length;\n    const hasClearButton = hasValue && !disabled && !props.readOnly && !props.loading;\n\n    const classes = cx(className, rootClassName, {\n      [`${rootClassName}--no-gap`]: variant === \"button-attached\",\n      [`${rootClassName}--has-clear-button`]: hasClearButton,\n    });\n\n    return (\n      <form\n        ref={formRef}\n        className={cx(`${rootClassName}__wrapper`)}\n        data-testid={dataTestId}\n        style={wrapperStyle}\n        onSubmit={(e: FormEvent<HTMLFormElement>) => {\n          e.preventDefault();\n          onSearch?.(e);\n        }}\n      >\n        <TextField\n          ref={ref}\n          className={classes}\n          clearButtonAriaLabel={clearButtonAriaLabel}\n          disabled={disabled}\n          onClear={onClear}\n          startAdornment={\n            !iconOnlySearchButton ? (\n              <IconSearch size=\"xs\" className={cx(`${rootClassName}__search-icon`)} key=\"1\" />\n            ) : null\n          }\n          afterField={\n            variant !== \"no-button\" ? (\n              <SearchFieldButton\n                disabled={disabled}\n                iconOnly={iconOnlySearchButton}\n                label={searchButtonLabel}\n                data-testid={getTestId(\"button\")}\n              />\n            ) : null\n          }\n          data-testid={getTestId(\"text-field\")}\n          type=\"search\"\n          {...props}\n        />\n      </form>\n    );\n  }\n);\n\nSearchFieldBase.displayName = \"SearchFieldBase\";\n","import React, { forwardRef, useId } from \"react\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { type AutocompleteOption, useAutocomplete } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n} from \"./search-field-base\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport type SearchFieldAutocompleteProps = SearchFieldBaseProps &\n  Extract<SearchFieldAutocompleteEnhancements, { suggestions: AutocompleteOption[] }>;\n\nexport const SearchFieldAutocomplete = forwardRef<HTMLInputElement, SearchFieldAutocompleteProps>(\n  (\n    {\n      suggestions,\n      suggestionsLabel,\n      onSelectSuggestion,\n      openSuggestionsOnFocus,\n      suggestionsMaxHeight,\n      ...searchFieldProps\n    },\n    ref\n  ) => {\n    const randomId = useId();\n    const inputId = (searchFieldProps.id as string | undefined) ?? randomId;\n\n    const autocomplete = useAutocomplete({\n      id: inputId,\n      options: suggestions,\n      listboxLabel: suggestionsLabel,\n      disabled: searchFieldProps.disabled,\n      readOnly: searchFieldProps.readOnly,\n      openOnFocus: openSuggestionsOnFocus,\n      listboxMaxHeight: suggestionsMaxHeight,\n      onSelect: onSelectSuggestion,\n      [\"data-testid\"]: searchFieldProps[\"data-testid\"],\n    });\n\n    const setInputRef = (node: HTMLInputElement | null) => {\n      (autocomplete.inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n    };\n\n    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n      searchFieldProps.onChange?.(event);\n      if (!autocomplete.isOpen) {\n        autocomplete.openListbox();\n      }\n    };\n\n    return (\n      <div\n        ref={autocomplete.rootRef as React.RefObject<HTMLDivElement>}\n        className={cx(`${rootClassName}__autocomplete-root`)}\n      >\n        <SearchFieldBase\n          ref={setInputRef}\n          {...searchFieldProps}\n          onChange={handleInputChange}\n          id={inputId}\n          wrapperStyle={autocomplete.anchorStyle}\n          {...autocomplete.inputProps}\n        />\n        {autocomplete.isOpen && (\n          <Listbox {...autocomplete.listboxProps} className={cx(`${rootClassName}__listbox`)}>\n            {suggestions.map((option, index) => {\n              const { key, ...listboxItemProps } = autocomplete.getListboxItemProps(option, index);\n\n              return (\n                <Listbox.Item key={key} {...listboxItemProps}>\n                  {option.label}\n                </Listbox.Item>\n              );\n            })}\n          </Listbox>\n        )}\n      </div>\n    );\n  }\n);\n\nSearchFieldAutocomplete.displayName = \"SearchFieldAutocomplete\";\n","import React, { forwardRef } from \"react\";\n\nimport { SearchFieldAutocomplete } from \"./search-field-autocomplete\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n  searchFieldVariants,\n} from \"./search-field-base\";\n\nexport { searchFieldVariants };\n\nexport type SearchFieldProps = SearchFieldBaseProps & SearchFieldAutocompleteEnhancements;\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>((props, ref) => {\n  if (props.suggestions) {\n    return <SearchFieldAutocomplete ref={ref} {...props} />;\n  }\n\n  return <SearchFieldBase ref={ref} {...props} />;\n});\n\nSearchField.displayName = \"SearchField\";\n\nexport {\n  SearchFieldAutocomplete,\n  type SearchFieldAutocompleteProps,\n} from \"./search-field-autocomplete\";\n"],"names":["cx","c","styles","rootClassName","SearchFieldButton","dataTestid","disabled","iconOnly","label","props","Button","IconSearch","jsx","searchFieldVariants","SearchFieldBase","forwardRef","dataTestId","className","clearButtonAriaLabel","iconOnlySearchButton","onClear","onSearch","searchButtonLabel","variant","formRef","wrapperStyle","ref","getTestId","name","hasClearButton","classes","e","TextField","SearchFieldAutocomplete","suggestions","suggestionsLabel","onSelectSuggestion","openSuggestionsOnFocus","suggestionsMaxHeight","searchFieldProps","randomId","useId","inputId","autocomplete","useAutocomplete","setInputRef","node","handleInputChange","event","jsxs","Listbox","option","index","key","listboxItemProps","SearchField"],"mappings":"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"}
+{"version":3,"file":"search-field-DD9UkOca.js","sources":["../../../components/search-field/src/search-field-button.tsx","../../../components/search-field/src/search-field-base.tsx","../../../components/search-field/src/search-field-autocomplete.tsx","../../../components/search-field/src/search-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field-button.module.scss\";\n\ntype Props = {\n  [\"data-testid\"]?: string;\n  disabled?: boolean;\n  iconOnly?: boolean;\n  label: string;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field-button\";\n\nexport const SearchFieldButton = ({\n  [\"data-testid\"]: dataTestid,\n  disabled,\n  iconOnly,\n  label,\n}: Props) => {\n  const props = {\n    className: cx(rootClassName, {\n      [`${rootClassName}--icon-only`]: iconOnly,\n    }),\n    disabled,\n    [\"data-testid\"]: dataTestid,\n  };\n\n  if (iconOnly) {\n    return (\n      <Button {...props} aria-label={label} iconOnly size=\"sm\" type=\"submit\" variant=\"primary\">\n        <IconSearch size=\"xs\" />\n      </Button>\n    );\n  }\n\n  return (\n    <Button {...props} size=\"sm\" type=\"submit\" variant=\"primary\">\n      {label}\n    </Button>\n  );\n};\n","import React, {\n  type ChangeEvent,\n  type CSSProperties,\n  type FormEvent,\n  forwardRef,\n  type RefObject,\n} from \"react\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport { TextField, type TextFieldProps } from \"@purpur/text-field\";\nimport { type AutocompleteOption } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport { SearchFieldButton } from \"./search-field-button\";\n\nexport const searchFieldVariants = [\"button-attached\", \"no-button\"] as const;\n\ntype Variant = (typeof searchFieldVariants)[number];\n\ntype DefaultProps = {\n  [\"data-testid\"]?: string;\n  /**\n   * An accessible label for the clear button.\n   * */\n  clearButtonAriaLabel: string;\n  /**\n   * Disables both the input field and submit button if `true`.\n   * */\n  disabled?: boolean;\n  /**\n   * Will display only a search icon in the search button if `true`.\n   * */\n  iconOnlySearchButton?: boolean;\n  /**\n   * Event handler called when the value of the search field changes.\n   * */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Event handler called when the clear button is clicked.\n   * */\n  onClear: () => void;\n  /**\n   * Event handler called when the search form is submitted.\n   * */\n  onSearch?: (e: FormEvent<HTMLFormElement>) => void;\n  /**\n   * The label text (or `aria-label` if `iconOnlySearchButton` is `true`) of the search button.\n   * */\n  searchButtonLabel?: string;\n  variant: Variant;\n  formRef?: RefObject<HTMLFormElement>;\n};\n\ntype TextSearchButton = {\n  iconOnlySearchButton?: false;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype IconOnlySearchButton = {\n  iconOnlySearchButton: true;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype NoButton = {\n  searchButtonLabel?: never;\n  variant: \"no-button\";\n};\n\nexport type SearchFieldBaseProps = DefaultProps &\n  (TextSearchButton | IconOnlySearchButton | NoButton) &\n  Omit<TextFieldProps, \"startAdornment\" | \"endAdornment\" | \"afterField\" | \"onChange\" | \"variant\">;\n\ntype SearchFieldBaseInternalProps = SearchFieldBaseProps & {\n  wrapperStyle?: CSSProperties;\n};\n\ntype SearchFieldAutocompleteSharedProps = {\n  /**\n   * Called when the user selects a suggestion.\n   */\n  onSelectSuggestion?: (option: AutocompleteOption) => void;\n  /**\n   * Open the suggestions listbox when the input receives focus.\n   */\n  openSuggestionsOnFocus?: boolean;\n  /**\n   * Maximum height of the suggestions listbox. A number is interpreted as px.\n   */\n  suggestionsMaxHeight?: string | number;\n};\n\ntype SearchFieldWithoutAutocomplete = SearchFieldAutocompleteSharedProps & {\n  suggestions?: never;\n  suggestionsLabel?: never;\n};\n\ntype SearchFieldWithAutocomplete = SearchFieldAutocompleteSharedProps & {\n  /**\n   * The list of suggestions to display in a listbox below the field.\n   * No filtering is applied — pass the already-correct (pre-filtered) list.\n   * If autocomplete should stay enabled while there are temporarily no matches,\n   * pass an empty array instead of `undefined` or `null`. Changing this prop\n   * from an absent value to an array switches between the regular and\n   * autocomplete variants, which causes a re-render, drops input focus, and\n   * hides the listbox.\n   */\n  suggestions: AutocompleteOption[];\n  /**\n   * Accessible label for the suggestions listbox.\n   */\n  suggestionsLabel: string;\n};\n\nexport type SearchFieldAutocompleteEnhancements =\n  | SearchFieldWithoutAutocomplete\n  | SearchFieldWithAutocomplete;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport const SearchFieldBase = forwardRef<HTMLInputElement, SearchFieldBaseInternalProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      disabled,\n      iconOnlySearchButton,\n      onClear,\n      onSearch,\n      searchButtonLabel,\n      variant,\n      formRef,\n      wrapperStyle,\n      ...props\n    },\n    ref\n  ) => {\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const hasValue =\n      typeof props.value === \"number\" ? props.value !== undefined : props.value?.length;\n    const hasClearButton = hasValue && !disabled && !props.readOnly && !props.loading;\n\n    const classes = cx(className, rootClassName, {\n      [`${rootClassName}--no-gap`]: variant === \"button-attached\",\n      [`${rootClassName}--has-clear-button`]: hasClearButton,\n    });\n\n    return (\n      <form\n        ref={formRef}\n        className={cx(`${rootClassName}__wrapper`)}\n        data-testid={dataTestId}\n        style={wrapperStyle}\n        onSubmit={(e: FormEvent<HTMLFormElement>) => {\n          e.preventDefault();\n          onSearch?.(e);\n        }}\n      >\n        <TextField\n          ref={ref}\n          className={classes}\n          clearButtonAriaLabel={clearButtonAriaLabel}\n          disabled={disabled}\n          onClear={onClear}\n          startAdornment={\n            !iconOnlySearchButton ? (\n              <IconSearch size=\"xs\" className={cx(`${rootClassName}__search-icon`)} key=\"1\" />\n            ) : null\n          }\n          afterField={\n            variant !== \"no-button\" ? (\n              <SearchFieldButton\n                disabled={disabled}\n                iconOnly={iconOnlySearchButton}\n                label={searchButtonLabel}\n                data-testid={getTestId(\"button\")}\n              />\n            ) : null\n          }\n          data-testid={getTestId(\"text-field\")}\n          type=\"search\"\n          {...props}\n        />\n      </form>\n    );\n  }\n);\n\nSearchFieldBase.displayName = \"SearchFieldBase\";\n","import React, { forwardRef, useId } from \"react\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { type AutocompleteOption, useAutocomplete } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n} from \"./search-field-base\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport type SearchFieldAutocompleteProps = SearchFieldBaseProps &\n  Extract<SearchFieldAutocompleteEnhancements, { suggestions: AutocompleteOption[] }>;\n\nexport const SearchFieldAutocomplete = forwardRef<HTMLInputElement, SearchFieldAutocompleteProps>(\n  (\n    {\n      suggestions,\n      suggestionsLabel,\n      onSelectSuggestion,\n      openSuggestionsOnFocus,\n      suggestionsMaxHeight,\n      ...searchFieldProps\n    },\n    ref\n  ) => {\n    const randomId = useId();\n    const inputId = (searchFieldProps.id as string | undefined) ?? randomId;\n\n    const autocomplete = useAutocomplete({\n      id: inputId,\n      options: suggestions,\n      listboxLabel: suggestionsLabel,\n      disabled: searchFieldProps.disabled,\n      readOnly: searchFieldProps.readOnly,\n      openOnFocus: openSuggestionsOnFocus,\n      listboxMaxHeight: suggestionsMaxHeight,\n      onSelect: onSelectSuggestion,\n      [\"data-testid\"]: searchFieldProps[\"data-testid\"],\n    });\n\n    const setInputRef = (node: HTMLInputElement | null) => {\n      (autocomplete.inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n    };\n\n    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n      searchFieldProps.onChange?.(event);\n      if (!autocomplete.isOpen) {\n        autocomplete.openListbox();\n      }\n    };\n\n    return (\n      <div\n        ref={autocomplete.rootRef as React.RefObject<HTMLDivElement>}\n        className={cx(`${rootClassName}__autocomplete-root`)}\n      >\n        <SearchFieldBase\n          ref={setInputRef}\n          {...searchFieldProps}\n          onChange={handleInputChange}\n          id={inputId}\n          wrapperStyle={autocomplete.anchorStyle}\n          {...autocomplete.inputProps}\n        />\n        {autocomplete.isOpen && (\n          <Listbox {...autocomplete.listboxProps} className={cx(`${rootClassName}__listbox`)}>\n            {suggestions.map((option, index) => {\n              const { key, ...listboxItemProps } = autocomplete.getListboxItemProps(option, index);\n\n              return (\n                <Listbox.Item key={key} {...listboxItemProps}>\n                  {option.label}\n                </Listbox.Item>\n              );\n            })}\n          </Listbox>\n        )}\n      </div>\n    );\n  }\n);\n\nSearchFieldAutocomplete.displayName = \"SearchFieldAutocomplete\";\n","import React, { forwardRef } from \"react\";\n\nimport { SearchFieldAutocomplete } from \"./search-field-autocomplete\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n  searchFieldVariants,\n} from \"./search-field-base\";\n\nexport { searchFieldVariants };\n\nexport type SearchFieldProps = SearchFieldBaseProps & SearchFieldAutocompleteEnhancements;\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>((props, ref) => {\n  if (props.suggestions) {\n    return <SearchFieldAutocomplete ref={ref} {...props} />;\n  }\n\n  return <SearchFieldBase ref={ref} {...props} />;\n});\n\nSearchField.displayName = \"SearchField\";\n\nexport {\n  SearchFieldAutocomplete,\n  type SearchFieldAutocompleteProps,\n} from \"./search-field-autocomplete\";\n"],"names":["cx","c","styles","rootClassName","SearchFieldButton","dataTestid","disabled","iconOnly","label","props","Button","IconSearch","jsx","searchFieldVariants","SearchFieldBase","forwardRef","dataTestId","className","clearButtonAriaLabel","iconOnlySearchButton","onClear","onSearch","searchButtonLabel","variant","formRef","wrapperStyle","ref","getTestId","name","hasClearButton","classes","e","TextField","SearchFieldAutocomplete","suggestions","suggestionsLabel","onSelectSuggestion","openSuggestionsOnFocus","suggestionsMaxHeight","searchFieldProps","randomId","useId","inputId","autocomplete","useAutocomplete","setInputRef","node","handleInputChange","event","jsxs","Listbox","option","index","key","listboxItemProps","SearchField"],"mappings":"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"}

package/dist/search-field.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./search-field-CU_tsmHb.js");exports.SearchField=e.SearchField;exports.SearchFieldAutocomplete=e.SearchFieldAutocomplete;exports.searchFieldVariants=e.searchFieldVariants;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./search-field-DD9UkOca.js");exports.SearchField=e.SearchField;exports.SearchFieldAutocomplete=e.SearchFieldAutocomplete;exports.searchFieldVariants=e.searchFieldVariants;
 //# sourceMappingURL=search-field.cjs.js.map

package/dist/search-field.es.js

@@ -1,4 +1,4 @@
-import { S as r, a as s, s as c } from "./search-field-CMBDkydb.mjs";
+import { S as r, a as s, s as c } from "./search-field-CZ9mIyZ-.mjs";
 export {
   r as SearchField,
   s as SearchFieldAutocomplete,