@purpur/library 9.1.1 → 9.1.3

package/dist/search-field-Bst9d-wX.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),f=require("react"),S=require("./listbox-COBHLRtB.js"),A=require("./use-autocomplete.es-BHDgQLae.js"),j=require("./bind-DeUYJ6m9.js"),R=require("./search.es-Cg2amJSR.js"),B=require("./text-field-BwxGMWds.js"),F=require("./button-Dqxdc3nC.js"),C={"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"},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=j.c.bind(L),w="purpur-search-field-button",V=({["data-testid"]:t,disabled:a,iconOnly:u,label:o})=>{const i={className:z(w,{[`${w}--icon-only`]:u}),disabled:a,"data-testid":t};return u?e.jsx(F.Button,{...i,"aria-label":o,iconOnly:!0,size:"sm",type:"submit",variant:"primary",children:e.jsx(R.s,{size:"xs"})}):e.jsx(F.Button,{...i,size:"sm",type:"submit",variant:"primary",children:o})},k=["button-attached","no-button"],y=j.c.bind(C),d="purpur-search-field",$=f.forwardRef(({["data-testid"]:t,className:a,clearButtonAriaLabel:u,disabled:o,iconOnlySearchButton:i,onClear:c,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)&&!o&&!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:o,onClear:c,startAdornment:i?null:e.jsx(R.s,{size:"xs",className:y(`${d}__search-icon`)},"1"),afterField:p!=="no-button"?e.jsx(V,{disabled:o,iconOnly:i,label:b,"data-testid":_("button")}):null,"data-testid":_("text-field"),type:"search",...n})})});$.displayName="SearchFieldBase";const q=j.c.bind(C),v="purpur-search-field",g=f.forwardRef(({suggestions:t,suggestionsLabel:a,onSelectSuggestion:u,openSuggestionsOnFocus:o,suggestionsMaxHeight:i,...c},l)=>{const b=f.useId(),p=c.id??b,r=A.ee({id:p,options:t,listboxLabel:a,disabled:c.disabled,readOnly:c.readOnly,openOnFocus:o,listboxMaxHeight:i,onSelect:u,"data-testid":c["data-testid"]}),m=s=>{r.inputRef.current=s,typeof l=="function"?l(s):l&&(l.current=s)},n=s=>{c.onChange?.(s),r.isOpen||r.openListbox()};return e.jsxs("div",{ref:r.rootRef,className:q(`${v}__autocomplete-root`),children:[e.jsx($,{ref:m,...c,onChange:n,id:p,wrapperStyle:r.anchorStyle,...r.inputProps}),r.isOpen&&e.jsx(S.Listbox,{...r.listboxProps,className:q(`${v}__listbox`),children:t.map((s,_)=>{const{key:N,...x}=r.getListboxItemProps(s,_);return e.jsx(S.Listbox.Item,{...x,children:s.label},N)})})]})});g.displayName="SearchFieldAutocomplete";const I=f.forwardRef((t,a)=>t.suggestions?e.jsx(g,{ref:a,...t}):e.jsx($,{ref:a,...t}));I.displayName="SearchField";exports.SearchField=I;exports.SearchFieldAutocomplete=g;exports.searchFieldVariants=k;
+//# sourceMappingURL=search-field-Bst9d-wX.js.map

package/dist/{search-field-DAktzYb0.js.map → search-field-Bst9d-wX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-field-DAktzYb0.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-Bst9d-wX.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":"wnCAcMA,EAAKC,EAAAA,EAAE,KAAKC,CAAM,EAClBC,EAAgB,6BAETC,EAAoB,CAAC,CAChC,CAAC,eAAgBC,EACjB,SAAAC,EACA,SAAAC,EACA,MAAAC,CACF,IAAa,CACX,MAAMC,EAAQ,CACZ,UAAWT,EAAGG,EAAe,CAC3B,CAAC,GAAGA,CAAa,aAAa,EAAGI,CAAA,CAClC,EACD,SAAAD,EACC,cAAgBD,CAAA,EAGnB,OAAIE,QAECG,SAAA,CAAQ,GAAGD,EAAO,aAAYD,EAAO,SAAQ,GAAC,KAAK,KAAK,KAAK,SAAS,QAAQ,UAC7E,eAACG,EAAAA,EAAA,CAAW,KAAK,KAAK,EACxB,EAKFC,EAAAA,IAACF,EAAAA,OAAA,CAAQ,GAAGD,EAAO,KAAK,KAAK,KAAK,SAAS,QAAQ,UAChD,SAAAD,CAAA,CACH,CAEJ,EC7BaK,EAAsB,CAAC,kBAAmB,WAAW,EAwG5Db,EAAKC,EAAAA,EAAE,KAAKC,CAAM,EAClBC,EAAgB,sBAETW,EAAkBC,EAAAA,WAC7B,CACE,CACE,CAAC,eAAgBC,EACjB,UAAAC,EACA,qBAAAC,EACA,SAAAZ,EACA,qBAAAa,EACA,QAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,aAAAC,EACA,GAAGhB,CAAA,EAELiB,IACG,CACH,MAAMC,EAAaC,GAAkBZ,EAAa,GAAGA,CAAU,IAAIY,CAAI,GAAK,OAGtEC,GADJ,OAAOpB,EAAM,OAAU,SAAWA,EAAM,QAAU,OAAYA,EAAM,OAAO,SAC1C,CAACH,GAAY,CAACG,EAAM,UAAY,CAACA,EAAM,QAEpEqB,EAAU9B,EAAGiB,EAAWd,EAAe,CAC3C,CAAC,GAAGA,CAAa,UAAU,EAAGoB,IAAY,kBAC1C,CAAC,GAAGpB,CAAa,oBAAoB,EAAG0B,CAAA,CACzC,EAED,OACEjB,EAAAA,IAAC,OAAA,CACC,IAAKY,EACL,UAAWxB,EAAG,GAAGG,CAAa,WAAW,EACzC,cAAaa,EACb,MAAOS,EACP,SAAWM,GAAkC,CAC3CA,EAAE,eAAA,EACFV,IAAWU,CAAC,CACd,EAEA,SAAAnB,EAAAA,IAACoB,EAAAA,UAAA,CACC,IAAAN,EACA,UAAWI,EACX,qBAAAZ,EACA,SAAAZ,EACA,QAAAc,EACA,eACGD,EAEG,KADFP,EAAAA,IAACD,EAAAA,GAAW,KAAK,KAAK,UAAWX,EAAG,GAAGG,CAAa,eAAe,CAAA,EAAO,GAAI,EAGlF,WACEoB,IAAY,YACVX,EAAAA,IAACR,EAAA,CACC,SAAAE,EACA,SAAUa,EACV,MAAOG,EACP,cAAaK,EAAU,QAAQ,CAAA,CAAA,EAE/B,KAEN,cAAaA,EAAU,YAAY,EACnC,KAAK,SACJ,GAAGlB,CAAA,CAAA,CACN,CAAA,CAGN,CACF,EAEAK,EAAgB,YAAc,kBCnL9B,MAAMd,EAAKC,EAAAA,EAAE,KAAKC,CAAM,EAClBC,EAAgB,sBAKT8B,EAA0BlB,EAAAA,WACrC,CACE,CACE,YAAAmB,EACA,iBAAAC,EACA,mBAAAC,EACA,uBAAAC,EACA,qBAAAC,EACA,GAAGC,CAAA,EAELb,IACG,CACH,MAAMc,EAAWC,EAAAA,MAAA,EACXC,EAAWH,EAAiB,IAA6BC,EAEzDG,EAAeC,EAAAA,GAAgB,CACnC,GAAIF,EACJ,QAASR,EACT,aAAcC,EACd,SAAUI,EAAiB,SAC3B,SAAUA,EAAiB,SAC3B,YAAaF,EACb,iBAAkBC,EAClB,SAAUF,EACT,cAAgBG,EAAiB,aAAa,CAAA,CAChD,EAEKM,EAAeC,GAAkC,CACpDH,EAAa,SAA6D,QAAUG,EACjF,OAAOpB,GAAQ,WAAYA,EAAIoB,CAAI,EAC9BpB,IAAMA,EAAwD,QAAUoB,EACnF,EAEMC,EAAiEC,GAAU,CAC/ET,EAAiB,WAAWS,CAAK,EAC5BL,EAAa,QAChBA,EAAa,YAAA,CAEjB,EAEA,OACEM,EAAAA,KAAC,MAAA,CACC,IAAKN,EAAa,QAClB,UAAW3C,EAAG,GAAGG,CAAa,qBAAqB,EAEnD,SAAA,CAAAS,EAAAA,IAACE,EAAA,CACC,IAAK+B,EACJ,GAAGN,EACJ,SAAUQ,EACV,GAAIL,EACJ,aAAcC,EAAa,YAC1B,GAAGA,EAAa,UAAA,CAAA,EAElBA,EAAa,QACZ/B,EAAAA,IAACsC,EAAAA,QAAA,CAAS,GAAGP,EAAa,aAAc,UAAW3C,EAAG,GAAGG,CAAa,WAAW,EAC9E,WAAY,IAAI,CAACgD,EAAQC,IAAU,CAClC,KAAM,CAAE,IAAAC,EAAK,GAAGC,CAAA,EAAqBX,EAAa,oBAAoBQ,EAAQC,CAAK,EAEnF,OACExC,EAAAA,IAACsC,UAAQ,KAAR,CAAwB,GAAGI,EACzB,SAAAH,EAAO,OADSE,CAEnB,CAEJ,CAAC,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CACF,EAEApB,EAAwB,YAAc,0BC3E/B,MAAMsB,EAAcxC,EAAAA,WAA+C,CAACN,EAAOiB,IAC5EjB,EAAM,YACDG,EAAAA,IAACqB,EAAA,CAAwB,IAAAP,EAAW,GAAGjB,CAAA,CAAO,EAGhDG,EAAAA,IAACE,EAAA,CAAgB,IAAAY,EAAW,GAAGjB,CAAA,CAAO,CAC9C,EAED8C,EAAY,YAAc"}

package/dist/{search-field-Caj2dKLn.mjs → search-field-DTuEiK-M.mjs}

@@ -1,80 +1,80 @@
-import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import { jsx as t, jsxs as B } from "react/jsx-runtime";
 import { forwardRef as x, useId as R } from "react";
-import { L as N } from "./listbox-DG4KmQP_.mjs";
+import { L as S } from "./listbox-DG4KmQP_.mjs";
 import { e as A } from "./use-autocomplete.es-CVv3z8t6.mjs";
 import { c as $ } from "./bind-CU-R61T-.mjs";
-import { s as I } from "./search.es-DoFKg2Hr.mjs";
+import { s as F } from "./search.es-DoFKg2Hr.mjs";
 import { T as V } from "./text-field-BQYzwIrG.mjs";
-import { b as S } from "./button-Cv7NlYbv.mjs";
-const F = {
-  "purpur-search-field": "_purpur-search-field_18zr1_1",
-  "purpur-search-field--has-clear-button": "_purpur-search-field--has-clear-button_18zr1_4",
-  "purpur-search-field--no-gap": "_purpur-search-field--no-gap_18zr1_13",
-  "purpur-search-field__wrapper": "_purpur-search-field__wrapper_18zr1_17",
-  "purpur-search-field__wrapper--gap": "_purpur-search-field__wrapper--gap_18zr1_20",
-  "purpur-search-field__search-icon": "_purpur-search-field__search-icon_18zr1_24",
-  "purpur-search-field__close-icon": "_purpur-search-field__close-icon_18zr1_24",
-  "purpur-search-field__autocomplete-root": "_purpur-search-field__autocomplete-root_18zr1_27",
-  "purpur-search-field__listbox": "_purpur-search-field__listbox_18zr1_31"
+import { b as v } from "./button-Cv7NlYbv.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"
 }, 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), v = "purpur-search-field-button", D = ({
+}, k = $.bind(j), w = "purpur-search-field-button", D = ({
   ["data-testid"]: e,
-  disabled: s,
+  disabled: o,
   iconOnly: u,
-  label: o
+  label: s
 }) => {
   const c = {
-    className: k(v, {
-      [`${v}--icon-only`]: u
+    className: k(w, {
+      [`${w}--icon-only`]: u
     }),
-    disabled: s,
+    disabled: o,
     "data-testid": e
   };
-  return u ? /* @__PURE__ */ r(S, { ...c, "aria-label": o, iconOnly: !0, size: "sm", type: "submit", variant: "primary", children: /* @__PURE__ */ r(I, { size: "xs" }) }) : /* @__PURE__ */ r(S, { ...c, size: "sm", type: "submit", variant: "primary", children: o });
-}, U = ["button-attached", "no-button"], y = $.bind(F), d = "purpur-search-field", g = x(
+  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(
   ({
     ["data-testid"]: e,
-    className: s,
+    className: o,
     clearButtonAriaLabel: u,
-    disabled: o,
+    disabled: s,
     iconOnlySearchButton: c,
     onClear: i,
     onSearch: l,
     searchButtonLabel: f,
     variant: p,
-    formRef: t,
+    formRef: r,
     wrapperStyle: m,
     ...n
   }, a) => {
-    const _ = (h) => e ? `${e}-${h}` : void 0, b = (typeof n.value == "number" ? n.value !== void 0 : n.value?.length) && !o && !n.readOnly && !n.loading, L = y(s, d, {
+    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, {
       [`${d}--no-gap`]: p === "button-attached",
       [`${d}--has-clear-button`]: b
     });
-    return /* @__PURE__ */ r(
+    return /* @__PURE__ */ t(
       "form",
       {
-        ref: t,
+        ref: r,
         className: y(`${d}__wrapper`),
         "data-testid": e,
         style: m,
         onSubmit: (h) => {
           h.preventDefault(), l?.(h);
         },
-        children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ t(
           V,
           {
             ref: a,
-            className: L,
+            className: z,
             clearButtonAriaLabel: u,
-            disabled: o,
+            disabled: s,
             onClear: i,
-            startAdornment: c ? null : /* @__PURE__ */ r(I, { size: "xs", className: y(`${d}__search-icon`) }, "1"),
-            afterField: p !== "no-button" ? /* @__PURE__ */ r(
+            startAdornment: c ? null : /* @__PURE__ */ t(F, { size: "xs", className: y(`${d}__search-icon`) }, "1"),
+            afterField: p !== "no-button" ? /* @__PURE__ */ t(
               D,
               {
-                disabled: o,
+                disabled: s,
                 iconOnly: c,
                 label: f,
                 "data-testid": _("button")
@@ -90,62 +90,62 @@ const F = {
   }
 );
 g.displayName = "SearchFieldBase";
-const w = $.bind(F), C = "purpur-search-field", O = x(
+const C = $.bind(O), I = "purpur-search-field", L = x(
   ({
     suggestions: e,
-    suggestionsLabel: s,
+    suggestionsLabel: o,
     onSelectSuggestion: u,
-    openSuggestionsOnFocus: o,
+    openSuggestionsOnFocus: s,
     suggestionsMaxHeight: c,
     ...i
   }, l) => {
-    const f = R(), p = i.id ?? f, t = A({
+    const f = R(), p = i.id ?? f, r = A({
       id: p,
       options: e,
-      listboxLabel: s,
+      listboxLabel: o,
       disabled: i.disabled,
       readOnly: i.readOnly,
-      openOnFocus: o,
+      openOnFocus: s,
       listboxMaxHeight: c,
       onSelect: u,
       "data-testid": i["data-testid"]
     }), m = (a) => {
-      t.inputRef.current = a, typeof l == "function" ? l(a) : l && (l.current = a);
+      r.inputRef.current = a, typeof l == "function" ? l(a) : l && (l.current = a);
     }, n = (a) => {
-      i.onChange?.(a), t.isOpen || t.openListbox();
+      i.onChange?.(a), r.isOpen || r.openListbox();
     };
     return /* @__PURE__ */ B(
       "div",
       {
-        ref: t.rootRef,
-        className: w(`${C}__autocomplete-root`),
+        ref: r.rootRef,
+        className: C(`${I}__autocomplete-root`),
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ t(
             g,
             {
               ref: m,
               ...i,
               onChange: n,
               id: p,
-              wrapperStyle: t.anchorStyle,
-              ...t.inputProps
+              wrapperStyle: r.anchorStyle,
+              ...r.inputProps
             }
           ),
-          t.isOpen && /* @__PURE__ */ r(N, { ...t.listboxProps, className: w(`${C}__listbox`), children: e.map((a, _) => {
-            const { key: z, ...b } = t.getListboxItemProps(a, _);
-            return /* @__PURE__ */ r(N.Item, { ...b, children: a.label }, z);
+          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);
           }) })
         ]
       }
     );
   }
 );
-O.displayName = "SearchFieldAutocomplete";
-const H = x((e, s) => e.suggestions ? /* @__PURE__ */ r(O, { ref: s, ...e }) : /* @__PURE__ */ r(g, { ref: s, ...e }));
+L.displayName = "SearchFieldAutocomplete";
+const H = x((e, o) => e.suggestions ? /* @__PURE__ */ t(L, { ref: o, ...e }) : /* @__PURE__ */ t(g, { ref: o, ...e }));
 H.displayName = "SearchField";
 export {
   H as S,
-  O as a,
+  L as a,
   U as s
 };
-//# sourceMappingURL=search-field-Caj2dKLn.mjs.map
+//# sourceMappingURL=search-field-DTuEiK-M.mjs.map

package/dist/{search-field-Caj2dKLn.mjs.map → search-field-DTuEiK-M.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"search-field-Caj2dKLn.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-DTuEiK-M.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.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./search-field-DAktzYb0.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-Bst9d-wX.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-Caj2dKLn.mjs";
+import { S as r, a as s, s as c } from "./search-field-DTuEiK-M.mjs";
 export {
   r as SearchField,
   s as SearchFieldAutocomplete,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpur/library",
-  "version": "9.1.1",
+  "version": "9.1.3",
   "license": "AGPL-3.0-only",
   "sideEffects": [
     "*.css",
@@ -108,71 +108,71 @@
     "shx": "~0.4.0",
     "@purpur/accordion": "8.21.0",
     "@purpur/alert-badge": "8.21.0",
-    "@purpur/badge": "8.21.0",
     "@purpur/action": "8.21.0",
+    "@purpur/badge": "8.21.0",
+    "@purpur/autocomplete": "8.21.0",
     "@purpur/breadcrumbs": "8.21.0",
     "@purpur/button": "8.21.0",
-    "@purpur/autocomplete": "8.21.0",
-    "@purpur/calendar": "8.21.0",
     "@purpur/card": "8.21.0",
     "@purpur/checkbox": "8.21.0",
+    "@purpur/calendar": "8.21.0",
+    "@purpur/chip-group": "8.21.0",
     "@purpur/color-dot": "8.21.0",
     "@purpur/common-types": "8.21.0",
-    "@purpur/chip-group": "8.21.0",
     "@purpur/component-rig": "1.0.0",
     "@purpur/container": "8.21.0",
-    "@purpur/content-block": "8.21.0",
     "@purpur/countdown": "8.21.0",
+    "@purpur/content-block": "8.21.0",
     "@purpur/counter-badge": "8.21.0",
+    "@purpur/cta-link": "8.21.0",
     "@purpur/date-field": "8.21.0",
     "@purpur/date-picker": "8.21.0",
     "@purpur/dismissable-chip-group": "8.21.0",
     "@purpur/drawer": "8.21.0",
-    "@purpur/cta-link": "8.21.0",
     "@purpur/field-error-text": "8.21.0",
-    "@purpur/footer": "8.21.0",
-    "@purpur/field-helper-text": "8.21.0",
     "@purpur/grid": "8.21.0",
+    "@purpur/footer": "8.21.0",
     "@purpur/heading": "8.21.0",
-    "@purpur/icon": "8.21.0",
     "@purpur/hero-banner": "8.21.0",
+    "@purpur/icon": "8.21.0",
+    "@purpur/field-helper-text": "8.21.0",
     "@purpur/illustrative-icon": "8.21.0",
-    "@purpur/label": "8.21.0",
     "@purpur/listbox": "8.21.0",
     "@purpur/link": "8.21.0",
+    "@purpur/label": "8.21.0",
     "@purpur/logo": "8.21.0",
     "@purpur/modal": "8.21.0",
+    "@purpur/notification-banner": "8.21.0",
     "@purpur/notification": "8.21.0",
     "@purpur/pagination": "8.21.0",
-    "@purpur/notification-banner": "8.21.0",
-    "@purpur/password-field": "8.21.0",
-    "@purpur/popover": "8.21.0",
     "@purpur/paragraph": "8.21.0",
+    "@purpur/popover": "8.21.0",
+    "@purpur/password-field": "8.21.0",
     "@purpur/product-card": "8.21.0",
+    "@purpur/promotion-card": "8.21.0",
     "@purpur/quantity-selector": "8.21.0",
     "@purpur/radio-button-group": "8.21.0",
     "@purpur/radio-card-group": "8.21.0",
-    "@purpur/rich-text": "8.21.0",
-    "@purpur/promotion-card": "8.21.0",
     "@purpur/search-field": "8.21.0",
     "@purpur/select": "8.21.0",
     "@purpur/skeleton": "8.21.0",
-    "@purpur/spacer": "8.21.0",
+    "@purpur/rich-text": "8.21.0",
     "@purpur/slider": "8.21.0",
+    "@purpur/spacer": "8.21.0",
     "@purpur/spinner": "8.21.0",
     "@purpur/stepper": "8.21.0",
     "@purpur/table": "8.21.0",
-    "@purpur/text-area": "8.21.0",
     "@purpur/tabs": "8.21.0",
+    "@purpur/text-area": "8.21.0",
     "@purpur/text-field": "8.21.0",
     "@purpur/text-spacing": "8.21.0",
-    "@purpur/theme": "8.21.0",
     "@purpur/toggle": "8.21.0",
+    "@purpur/theme": "8.21.0",
     "@purpur/tokens": "8.21.0",
+    "@purpur/visually-hidden": "8.21.0",
     "@purpur/tooltip": "8.21.0",
-    "@purpur/chat-field": "9.1.1",
-    "@purpur/dropdown": "0.1.0",
-    "@purpur/visually-hidden": "8.21.0"
+    "@purpur/chat-field": "9.1.3",
+    "@purpur/dropdown": "0.1.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/dist/dropdown-BC6evqyq.js

@@ -1,2 +0,0 @@
-"use strict";const t=require("react/jsx-runtime"),x=require("react"),Z=require("./listbox-COBHLRtB.js"),ye=require("./use-autocomplete.es-BHDgQLae.js"),$e=require("./checkbox-Dk3bZkZ3.js"),pe=require("./dismissable-chip-group-Cd23yjBa.js"),Ie=require("./field-error-text-FhQulSV5.js"),Ce=require("./field-helper-text-DSKO-Tce.js"),Re=require("./check-circle-filled.es-5-GXE9l4.js"),je=require("./chevron-down.es-BMjgiS3F.js"),De=require("./label-yHK80hhV.js"),ke=require("./spinner-tKunS_o-.js"),Oe=require("./bind-DeUYJ6m9.js"),Se={"purpur-dropdown":"_purpur-dropdown_1fi2v_1","purpur-dropdown--negative":"_purpur-dropdown--negative_1fi2v_11","purpur-dropdown__label":"_purpur-dropdown__label_1fi2v_14","purpur-dropdown__field-row":"_purpur-dropdown__field-row_1fi2v_19","purpur-dropdown__frame":"_purpur-dropdown__frame_1fi2v_23","purpur-dropdown__frame--negative":"_purpur-dropdown__frame--negative_1fi2v_30","purpur-dropdown__trigger-container":"_purpur-dropdown__trigger-container_1fi2v_33","purpur-dropdown__chip-group":"_purpur-dropdown__chip-group_1fi2v_44","purpur-dropdown__trigger-container--has-tags":"_purpur-dropdown__trigger-container--has-tags_1fi2v_49","purpur-dropdown__trigger-container--disabled":"_purpur-dropdown__trigger-container--disabled_1fi2v_52","purpur-dropdown__trigger-container--readonly":"_purpur-dropdown__trigger-container--readonly_1fi2v_52","purpur-dropdown__trigger-container--negative":"_purpur-dropdown__trigger-container--negative_1fi2v_59","purpur-dropdown__trigger-container--error":"_purpur-dropdown__trigger-container--error_1fi2v_62","purpur-dropdown__trigger-container--is-valid":"_purpur-dropdown__trigger-container--is-valid_1fi2v_65","purpur-dropdown__input":"_purpur-dropdown__input_1fi2v_68","purpur-dropdown__trigger":"_purpur-dropdown__trigger_1fi2v_33","purpur-dropdown__trigger--placeholder":"_purpur-dropdown__trigger--placeholder_1fi2v_109","purpur-dropdown__trigger--is-valid":"_purpur-dropdown__trigger--is-valid_1fi2v_112","purpur-dropdown__trigger--disabled":"_purpur-dropdown__trigger--disabled_1fi2v_115","purpur-dropdown__trigger--readonly":"_purpur-dropdown__trigger--readonly_1fi2v_119","purpur-dropdown__trigger--negative":"_purpur-dropdown__trigger--negative_1fi2v_123","purpur-dropdown__trigger-text":"_purpur-dropdown__trigger-text_1fi2v_136","purpur-dropdown__combobox-container":"_purpur-dropdown__combobox-container_1fi2v_142","purpur-dropdown__combobox-container--disabled":"_purpur-dropdown__combobox-container--disabled_1fi2v_152","purpur-dropdown__combobox-container--readonly":"_purpur-dropdown__combobox-container--readonly_1fi2v_159","purpur-dropdown__combobox-container--error":"_purpur-dropdown__combobox-container--error_1fi2v_166","purpur-dropdown__combobox-container--is-valid":"_purpur-dropdown__combobox-container--is-valid_1fi2v_169","purpur-dropdown__combobox-container--negative":"_purpur-dropdown__combobox-container--negative_1fi2v_172","purpur-dropdown__input--negative":"_purpur-dropdown__input--negative_1fi2v_211","purpur-dropdown__chip-group--select":"_purpur-dropdown__chip-group--select_1fi2v_228","purpur-dropdown__end-adornments":"_purpur-dropdown__end-adornments_1fi2v_231","purpur-dropdown__chevron-icon":"_purpur-dropdown__chevron-icon_1fi2v_242","purpur-dropdown__chevron-icon--open":"_purpur-dropdown__chevron-icon--open_1fi2v_247","purpur-dropdown__chevron-icon--disabled":"_purpur-dropdown__chevron-icon--disabled_1fi2v_250","purpur-dropdown__chevron-icon--readonly":"_purpur-dropdown__chevron-icon--readonly_1fi2v_253","purpur-dropdown__chevron-icon--negative":"_purpur-dropdown__chevron-icon--negative_1fi2v_256","purpur-dropdown__valid-icon":"_purpur-dropdown__valid-icon_1fi2v_259","purpur-dropdown__listbox":"_purpur-dropdown__listbox_1fi2v_262","purpur-dropdown__checkbox-item-multiple":"_purpur-dropdown__checkbox-item-multiple_1fi2v_272","purpur-dropdown__checkbox-container":"_purpur-dropdown__checkbox-container_1fi2v_275"},h=Oe.c.bind(Se),o="purpur-dropdown",le=({fieldId:r,htmlForSuffix:n,label:s,getTestId:a,disabled:d,negative:i,required:g})=>s?t.jsxs(De.Label,{htmlFor:n?`${r}-${n}`:r,className:h(`${o}__label`),"data-testid":a("label"),disabled:d,negative:i,children:[g&&t.jsx("span",{"aria-hidden":!0,children:"*"}),s]}):null,ue=({getTestId:r,loading:n,disabled:s,negative:a,isValid:d,isOpen:i,readOnly:g,showChevronOpen:I})=>t.jsx("span",{className:h(`${o}__end-adornments`),children:n?t.jsx(ke.Spinner,{disabled:s,size:"xxs",negative:a,"data-testid":r("spinner")}):t.jsxs(t.Fragment,{children:[d&&t.jsx(Re.r,{"data-testid":r("valid-icon"),className:h(`${o}__valid-icon`)}),t.jsx(je.l,{className:h(`${o}__chevron-icon`,{[`${o}__chevron-icon--open`]:I&&i,[`${o}__chevron-icon--disabled`]:s,[`${o}__chevron-icon--readonly`]:g&&!s,[`${o}__chevron-icon--is-valid`]:d,[`${o}__chevron-icon--negative`]:a}),"data-testid":r("dropdown-icon"),size:"sm"})]})}),_e=({selectedItems:r,getTestId:n,disabled:s,onRemove:a,isSelect:d})=>r.length?t.jsx(pe.DismissableChipGroup,{className:h(`${o}__chip-group`,{[`${o}__chip-group--select`]:d}),"data-testid":n("tags"),size:"sm",children:r.map(i=>t.jsx(pe.DismissableChipGroup.Item,{id:i.id,"data-testid":n(`tag-${i.id}`),"aria-label":`Remove ${i.label}`,onDismiss:()=>{a(i)},disabled:s,children:i.label},i.id))}):null,ge=({errorText:r,helperText:n,helperTextId:s,negative:a})=>t.jsxs(t.Fragment,{children:[r&&t.jsx(Ie.FieldErrorText,{negative:a,children:r}),n&&!r&&t.jsx(Ce.FieldHelperText,{id:s,negative:a,children:n})]}),he=({optionsToShow:r,getListboxItemProps:n,multiple:s,fieldId:a,noOptionsText:d})=>d!==void 0&&!r.length?t.jsx(Z.Listbox.Item,{noninteractive:!0,children:d}):r.map((i,g)=>{const{key:I,selected:y,..._}=n(i,g);return s?t.jsx(Z.Listbox.Item,{..._,className:h(`${o}__checkbox-item-multiple`),selected:!!y,hideSelectedIcon:!0,children:t.jsxs("span",{className:h(`${o}__checkbox-container`),children:[t.jsx($e.Checkbox,{id:`${a}-checkbox-${i.id}`,checked:!!y,"aria-hidden":!0}),i.label]})},I):t.jsx(Z.Listbox.Item,{..._,selected:!!y,children:i.label},I)}),Ne=(r,n,s)=>{if(s)return r.filter(d=>s(n,d));if(!n)return r;const a=n.toUpperCase().split(" ");return r.filter(d=>a.every(i=>(d.value||d.label).toUpperCase().includes(i)))},fe=({options:r,searchTerm:n,filterOption:s,selectedOption:a,multiple:d})=>!d&&a&&a.label===n?r:Ne(r,n,s),be=({controlledInputValue:r,defaultInputValue:n,selectedOption:s,onInputChange:a})=>{const[d,i]=x.useState((typeof r=="string"?r:n??s?.label)??"");return{displayInputValue:typeof r=="string"?r:d,populateInputField:y=>{a?.(y),i(y)}}},ve=x.forwardRef((r,n)=>{const{id:s,label:a,options:d,className:i,errorText:g,helperText:I,placeholder:y,negative:_=!1,readOnly:N=!1,disabled:f=!1,required:l=!1,valid:C,loading:b,multiple:p=!1,selectedOption:u,selectedOptions:E=[],onSelect:F,openOnFocus:R=!1,listboxMaxHeight:z,listboxLabel:Y,filterOption:P,inputValue:A,defaultInputValue:c,onInputChange:K,noOptionsText:L,highlightFirstOption:T=!1,["data-testid"]:q}=r,D=x.useId(),w=s??D,k=e=>q?`${q}-${e}`:void 0,H=!!C&&!g,$=`${w}-helper-text`,v=p?E:u?[u]:[],{displayInputValue:O,populateInputField:M}=be({controlledInputValue:A,defaultInputValue:c,selectedOption:u,onInputChange:K}),V=fe({options:d,searchTerm:O,filterOption:P,selectedOption:u,multiple:p}),G=e=>{if(p){const B=v.some(m=>m.id===e.id)?v.filter(m=>m.id!==e.id):[...v,e];F?.(e,B),M("")}else F?.(e,[e]),M(e.label)},{rootRef:W,inputRef:J,inputProps:j,listboxProps:Q,getListboxItemProps:X,isOpen:U,openListbox:ee,anchorStyle:re}=ye.ee({id:w,options:V,listboxLabel:Y||a||"Options",selectedOption:p?void 0:u,disabled:f,readOnly:N,openOnFocus:R,listboxMaxHeight:z,highlightFirstOption:T,closeOnSelect:!p,noOptionsText:L,onSelect:G,"data-testid":q}),oe=e=>{W.current=e,typeof n=="function"?n(e):n&&(n.current=e)},ie=(e,S)=>{const B=X(e,S);if(p){const m=v.some(ce=>ce.id===e.id);return{...B,selected:m,"aria-selected":m}}return B},te=e=>{const S=v.filter(B=>B.id!==e.id);F?.(e,S)},se=e=>{p&&e.key==="Backspace"&&e.currentTarget.value===""&&v.length>0&&te(v[v.length-1]),j?.onKeyDown?.(e)},de=e=>{M(e.target.value),U||ee()},ae=h(o,i,{[`${o}--negative`]:_});return t.jsxs("div",{ref:oe,className:ae,children:[t.jsx(le,{fieldId:w,htmlForSuffix:"input",label:a,getTestId:k,disabled:f,negative:_,required:l}),t.jsx("div",{className:h(`${o}__field-row`),children:t.jsxs("div",{className:h(`${o}__combobox-container`,{[`${o}__combobox-container--error`]:!!g,[`${o}__combobox-container--is-valid`]:H,[`${o}__combobox-container--negative`]:_,[`${o}__combobox-container--disabled`]:f,[`${o}__combobox-container--readonly`]:N&&!f}),style:re,children:[p&&t.jsx(_e,{selectedItems:v,getTestId:k,disabled:f,onRemove:te}),t.jsx("input",{...j,ref:J,id:`${w}-input`,"data-testid":k("input"),onKeyDown:se,onChange:de,value:O,placeholder:y,className:h(`${o}__input`,{[`${o}__input--negative`]:_}),"aria-describedby":$,"aria-invalid":!!g,disabled:f,readOnly:N}),t.jsx(ue,{getTestId:k,loading:b,disabled:f,negative:_,isValid:H,isOpen:U,showChevronOpen:!0}),t.jsx("span",{className:h(`${o}__frame`,{[`${o}__frame--negative`]:_})})]})}),U&&t.jsx(Z.Listbox,{...Q,className:h(`${o}__listbox`),children:he({optionsToShow:V,getListboxItemProps:ie,multiple:p,fieldId:w,noOptionsText:L})}),t.jsx(ge,{errorText:g,helperText:I,helperTextId:$,negative:_})]})});ve.displayName="DropdownCombobox";const Le=({options:r,highlightFirstOption:n})=>{const s=x.useRef(null),a=x.useRef({}),[d,i]=x.useState(n?r[0]:void 0),g=l=>{if(l){const C=l.getBoundingClientRect(),b=s.current?.getBoundingClientRect()||{top:0,bottom:0};(C.top<b.top||C.bottom>b.bottom)&&l.scrollIntoView({block:"nearest"})}};return{highlightedOption:d,listboxRef:s,optionRefs:a,findNextOption:(l,C)=>{const b=C.filter(u=>!u.disabled);if(!b.length)return;const p=d?b.findIndex(u=>u.id===d.id):-1;return l==="ArrowDown"?b[(p+1)%b.length]:b[(p-1+b.length)%b.length]},highlightOption:l=>{i(l?{...l}:void 0),l&&g(a.current[l.id])},highlightByClick:l=>{l.id!==d?.id&&i({...l,isSetByClickEvent:!0})},highlightSelected:(l,C)=>{requestAnimationFrame(()=>{i({...l,isSetByClickEvent:C==="CLICK"}),g(a.current[l.id])})},resetHighlight:()=>{i(void 0)}}},Te=(r,n)=>{const s=x.useCallback(a=>{r&&!r.contains(a.target)&&n()},[n,r]);x.useEffect(()=>(document.addEventListener("mousedown",s),()=>{document.removeEventListener("mousedown",s)}),[s])},xe=({id:r,variant:n,options:s,listboxLabel:a,multiple:d=!1,selectedOption:i,selectedOptions:g=[],onSelect:I,filterOption:y,inputValue:_,defaultInputValue:N,onInputChange:f,noOptionsText:l,highlightFirstOption:C=!1,openOnFocus:b=!1,listboxMaxHeight:p,disabled:u=!1,readOnly:E=!1,["data-testid"]:F})=>{const R=n==="combobox",z=x.useId(),Y=x.useRef(null),P=x.useRef(null),A=x.useRef(null),c=Le({options:s,highlightFirstOption:C}),{displayInputValue:K,populateInputField:L}=be({controlledInputValue:_,defaultInputValue:N,selectedOption:i,onInputChange:f}),[T,q]=x.useState(!1),D=()=>{q(!1),c.resetHighlight()};Te(Y.current,D);const w=({eventType:e})=>{q(!0);const S=d?void 0:i;S&&c.highlightSelected(S,e)},k=d?g:i?[i]:[],H=R?fe({options:s,searchTerm:K,filterOption:y,selectedOption:i,multiple:d}):s,$=T&&(!!H.length||!!l),v=e=>F?`${F}-${e}`:void 0,O=e=>{if(!(!e||e.disabled))if(d){const B=k.some(m=>m.id===e.id)?k.filter(m=>m.id!==e.id):[...k,e];I?.(e,B),R&&(L(""),A.current?.focus())}else I?.(e,[e]),R&&L(e.label),D(),(R?A:P).current?.focus()},M=e=>{$||w({eventType:"KEYBOARD"});const S=c.findNextOption(e,H);c.highlightOption(S)},V=e=>{if(!(u||E))switch(e.key){case"ArrowUp":case"ArrowDown":e.preventDefault(),M(e.key);break;case"Enter":{e.preventDefault(),$&&c.highlightedOption?O(c.highlightedOption):$||w({eventType:"KEYBOARD"});break}case" ":{R||(e.preventDefault(),$&&c.highlightedOption?O(c.highlightedOption):$||w({eventType:"KEYBOARD"}));break}case"Escape":e.preventDefault(),D();break;case"Tab":D();break;case"Home":case"End":R&&D();break}},G=e=>{L(e.target.value),c.resetHighlight(),T||w({eventType:"KEYBOARD"})},W=()=>{u||E||(T?D():w({eventType:"CLICK"}))},J=()=>{!T&&b&&!u&&!E&&w({eventType:"KEYBOARD"}),A.current?.select()},j=()=>{setTimeout(()=>{const e=document.activeElement;e!==document.body&&!A.current?.contains(e)&&!c.listboxRef.current?.contains(e)&&!Y.current?.contains(e)&&(D(),R&&!d&&L(i?i.label:""))})},Q=()=>{u||E||(T?D():w({eventType:"CLICK"}))},X=()=>{!T&&b&&!u&&!E&&w({eventType:"KEYBOARD"})},U=`${r}-listbox`,ee=e=>`${r}-listbox-item-${e.id}`,re=`--purpur-dropdown-${z.replace(/:/g,"")}`,oe={anchorName:re},ie=x.useCallback(e=>{if(c.listboxRef.current=e,e&&typeof e.showPopover=="function")try{e.showPopover()}catch{}},[c.listboxRef]),te={"aria-label":a,"aria-expanded":$,"data-testid":v("listbox"),id:U,ref:ie,onMouseLeave:()=>c.resetHighlight(),popover:"manual",style:{...p?{maxHeight:typeof p=="number"?`${p}px`:p}:{},positionAnchor:re}},se=(e,S)=>{const B=k.some(ne=>ne.id===e.id),{highlightedOption:m}=c,ce=(e.id===m?.id||C&&!m&&S===0)&&!m?.isSetByClickEvent;return{"data-testid":v(`listbox-item-${e.id}`),id:ee(e),key:e.id,onMouseMove:()=>c.highlightByClick(e),onMouseUp:()=>O(e),ref:ne=>{ne&&(c.optionRefs.current[e.id]=ne)},tabIndex:-1,selected:B,disabled:e.disabled,highlighted:ce,hovered:e.id===m?.id&&!!m?.isSetByClickEvent,"aria-selected":B}},de=R?{}:{ref:P,type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":$,"aria-controls":U,"aria-disabled":u,"data-testid":v("trigger"),id:`${r}-trigger`,onClick:Q,onKeyDown:V,onFocus:X,disabled:u,tabIndex:u?-1:0,style:oe},ae=R?{ref:A,role:"combobox","aria-autocomplete":"list","aria-expanded":$,"aria-controls":U,"aria-activedescendant":c.highlightedOption?ee(c.highlightedOption):void 0,"data-testid":v("input"),autoComplete:"off",id:`${r}-input`,type:"text",value:K,onChange:G,onMouseDown:W,onFocus:J,onBlur:j,onKeyDown:V,disabled:u,readOnly:E}:null;return{rootRef:Y,triggerProps:de,inputProps:ae,listboxProps:te,getListboxItemProps:se,optionsToShow:H,isOpen:$,highlightedOption:c.highlightedOption,selectedItems:k,anchorStyle:oe}},we=x.forwardRef((r,n)=>{const{id:s,label:a,options:d,className:i,errorText:g,helperText:I,placeholder:y,negative:_=!1,readOnly:N=!1,disabled:f=!1,required:l=!1,valid:C=!1,loading:b=!1,multiple:p=!1,selectedOption:u,selectedOptions:E=[],onSelect:F,openOnFocus:R=!1,listboxMaxHeight:z,listboxLabel:Y,["data-testid"]:P}=r,A=x.useId(),c=s??A,K=j=>P?`${P}-${j}`:void 0,L=!!C&&!g,T=`${c}-helper-text`,q=xe({id:c,variant:"select",options:d,listboxLabel:Y||a||"Options",multiple:p,selectedOption:u,selectedOptions:E,onSelect:F,openOnFocus:R,listboxMaxHeight:z,disabled:f,readOnly:N,"data-testid":P}),D=j=>{q.rootRef.current=j,typeof n=="function"?n(j):n&&(n.current=j)},{triggerProps:w,listboxProps:k,getListboxItemProps:H,optionsToShow:$,isOpen:v,selectedItems:O,anchorStyle:M}=q,V={...w};delete V.style;const G=j=>{const Q=O.filter(X=>X.id!==j.id);F?.(j,Q)},W=p?O.length===0&&y||"":u?.label||y||"",J=h(o,i,{[`${o}--negative`]:_});return t.jsxs("div",{ref:D,className:J,children:[t.jsx(le,{fieldId:c,htmlForSuffix:"trigger",label:a,getTestId:K,disabled:f,negative:_,required:l}),t.jsx("div",{className:h(`${o}__field-row`),children:t.jsxs("div",{className:h(`${o}__trigger-container`,{[`${o}__trigger-container--error`]:!!g,[`${o}__trigger-container--is-valid`]:L,[`${o}__trigger-container--negative`]:_,[`${o}__trigger-container--disabled`]:f,[`${o}__trigger-container--readonly`]:N&&!f,[`${o}__trigger-container--has-tags`]:p&&O.length>0}),style:M,children:[p&&t.jsx(_e,{selectedItems:O,getTestId:K,disabled:f,onRemove:G,isSelect:!0}),t.jsx("button",{...V,className:h(`${o}__trigger`,{[`${o}__trigger--is-valid`]:L,[`${o}__trigger--negative`]:_,[`${o}__trigger--disabled`]:f,[`${o}__trigger--readonly`]:N&&!f,[`${o}__trigger--placeholder`]:!O.length}),"aria-describedby":T,children:t.jsx("span",{className:h(`${o}__trigger-text`),children:W})}),t.jsx(ue,{getTestId:K,loading:b,disabled:f,negative:_,isValid:L,isOpen:v,readOnly:N,showChevronOpen:!0}),t.jsx("span",{className:h(`${o}__frame`,{[`${o}__frame--negative`]:_})})]})}),v&&t.jsx(Z.Listbox,{...k,className:h(`${o}__listbox`),children:he({optionsToShow:$,getListboxItemProps:H,multiple:p,fieldId:c})}),t.jsx(ge,{errorText:g,helperText:I,helperTextId:T,negative:_})]})});we.displayName="DropdownSelect";const me=x.forwardRef((r,n)=>r.combobox?t.jsx(ve,{ref:n,...r}):t.jsx(we,{ref:n,...r}));me.displayName="Dropdown";exports.Dropdown=me;exports.useDropdown=xe;
-//# sourceMappingURL=dropdown-BC6evqyq.js.map