@purpur/library 9.0.9 → 9.1.0

package/CHANGELOG.json

@@ -1,6 +1,69 @@
 {
   "name": "@purpur/library",
   "entries": [
+    {
+      "version": "9.1.0",
+      "tag": "@purpur/library_v9.1.0",
+      "date": "Thu, 02 Apr 2026 06:27:36 GMT",
+      "comments": {
+        "none": [
+          {
+            "comment": "Autocomplete: Deprecate component as it's replaced by Dropdown, and SearchField supports autocomplete with the `suggestions` props"
+          },
+          {
+            "comment": "DismissableChipGroup: Add size (`sm`|`md`) prop"
+          },
+          {
+            "comment": "Dropdown: New component supporting combobox and multiple"
+          },
+          {
+            "comment": "Listbox: Add hideSelectedIcon prop, increase max-height"
+          },
+          {
+            "comment": "SearchField: Add suggestions prop which gives the component autocomplete support"
+          },
+          {
+            "comment": "UseAutocomplete: New hook used by Dropdown and SearchField"
+          },
+          {
+            "comment": "TextField: Added variant 'ai' with gradient border, AI icon and typing animation"
+          },
+          {
+            "comment": "Created ChatField component"
+          }
+        ]
+      }
+    },
+    {
+      "version": "9.0.10",
+      "tag": "@purpur/library_v9.0.10",
+      "date": "Mon, 30 Mar 2026 07:48:48 GMT",
+      "comments": {
+        "none": [
+          {
+            "comment": "Theme: Add borderRadiusXl prop to ThemeProps"
+          },
+          {
+            "comment": "Tokens: Add border-radius xl token (24px/1.5rem)"
+          },
+          {
+            "comment": "Button: Added AI variants for primary, secondary, expressive and text"
+          },
+          {
+            "comment": "Drawer: Added AI variant"
+          },
+          {
+            "comment": "Notification: Added AI variant"
+          },
+          {
+            "comment": "Icon: Fix so that icons don't shrink in Storybook"
+          },
+          {
+            "comment": "IllustrativeIcon: Fix checkmark centering in animated Illustrative icons"
+          }
+        ]
+      }
+    },
     {
       "version": "9.0.9",
       "tag": "@purpur/library_v9.0.9",

package/CHANGELOG.md

@@ -1,6 +1,33 @@
 # Change Log - @purpur/library
 
-This log was last generated on Thu, 26 Mar 2026 09:15:46 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Apr 2026 06:27:36 GMT and should not be manually modified.
+
+## 9.1.0
+Thu, 02 Apr 2026 06:27:36 GMT
+
+### Updates
+
+- Autocomplete: Deprecate component as it's replaced by Dropdown, and SearchField supports autocomplete with the `suggestions` props
+- DismissableChipGroup: Add size (`sm`|`md`) prop
+- Dropdown: New component supporting combobox and multiple
+- Listbox: Add hideSelectedIcon prop, increase max-height
+- SearchField: Add suggestions prop which gives the component autocomplete support
+- UseAutocomplete: New hook used by Dropdown and SearchField
+- TextField: Added variant 'ai' with gradient border, AI icon and typing animation
+- Created ChatField component
+
+## 9.0.10
+Mon, 30 Mar 2026 07:48:48 GMT
+
+### Updates
+
+- Theme: Add borderRadiusXl prop to ThemeProps
+- Tokens: Add border-radius xl token (24px/1.5rem)
+- Button: Added AI variants for primary, secondary, expressive and text
+- Drawer: Added AI variant
+- Notification: Added AI variant
+- Icon: Fix so that icons don't shrink in Storybook
+- IllustrativeIcon: Fix checkmark centering in animated Illustrative icons
 
 ## 9.0.9
 Thu, 26 Mar 2026 09:15:46 GMT

package/dist/LICENSE.txt

@@ -85,6 +85,13 @@ SOFTWARE.
 
 ---
 
+Name: @purpur/use-autocomplete
+Version: 0.1.0
+License: AGPL-3.0-only
+Private: false
+
+---
+
 Name: @radix-ui/react-compose-refs
 Version: 1.1.2
 License: MIT
@@ -326,21 +333,21 @@ Private: false
 
 ---
 
-Name: @purpur/listbox
+Name: @purpur/action
 Version: 8.21.0
 License: AGPL-3.0-only
 Private: false
 
 ---
 
-Name: @purpur/action
+Name: @purpur/button
 Version: 8.21.0
 License: AGPL-3.0-only
 Private: false
 
 ---
 
-Name: @purpur/button
+Name: @purpur/listbox
 Version: 8.21.0
 License: AGPL-3.0-only
 Private: false
@@ -363,13 +370,6 @@ Private: false
 
 ---
 
-Name: @purpur/text-field
-Version: 8.21.0
-License: AGPL-3.0-only
-Private: false
-
----
-
 Name: classnames
 Version: 2.5.1
 License: MIT
@@ -472,6 +472,13 @@ Private: false
 
 ---
 
+Name: @purpur/chat-field
+Version: 9.1.0
+License: AGPL-3.0-only
+Private: false
+
+---
+
 Name: @purpur/content-block
 Version: 8.21.0
 License: AGPL-3.0-only
@@ -516,13 +523,6 @@ Private: false
 
 ---
 
-Name: @purpur/search-field
-Version: 8.21.0
-License: AGPL-3.0-only
-Private: false
-
----
-
 Name: @purpur/countdown
 Version: 8.21.0
 License: AGPL-3.0-only
@@ -530,13 +530,6 @@ Private: false
 
 ---
 
-Name: @purpur/modal
-Version: 8.21.0
-License: AGPL-3.0-only
-Private: false
-
----
-
 Name: @radix-ui/react-label
 Version: 2.1.8
 License: MIT
@@ -577,6 +570,13 @@ Private: false
 
 ---
 
+Name: @purpur/modal
+Version: 8.21.0
+License: AGPL-3.0-only
+Private: false
+
+---
+
 Name: @purpur/radio-button-group
 Version: 8.21.0
 License: AGPL-3.0-only
@@ -814,21 +814,21 @@ Private: false
 
 ---
 
-Name: @purpur/notification
+Name: @purpur/cta-link
 Version: 8.21.0
 License: AGPL-3.0-only
 Private: false
 
 ---
 
-Name: @purpur/cta-link
+Name: @purpur/quantity-selector
 Version: 8.21.0
 License: AGPL-3.0-only
 Private: false
 
 ---
 
-Name: @purpur/quantity-selector
+Name: @purpur/search-field
 Version: 8.21.0
 License: AGPL-3.0-only
 Private: false
@@ -851,6 +851,20 @@ Private: false
 
 ---
 
+Name: @purpur/notification
+Version: 8.21.0
+License: AGPL-3.0-only
+Private: false
+
+---
+
+Name: @purpur/text-field
+Version: 8.21.0
+License: AGPL-3.0-only
+Private: false
+
+---
+
 Name: tabbable
 Version: 6.4.0
 License: MIT
@@ -927,6 +941,13 @@ Private: false
 
 ---
 
+Name: @purpur/dropdown
+Version: 0.1.0
+License: AGPL-3.0-only
+Private: false
+
+---
+
 Name: @purpur/badge
 Version: 8.21.0
 License: AGPL-3.0-only

package/dist/{autocomplete-B_OBQM2h.js → autocomplete-B421J7CS.js}

@@ -1,2 +1,2 @@
-"use strict";const p=require("react/jsx-runtime"),r=require("react"),de=require("./chevron-down.es-BMjgiS3F.js"),M=require("./listbox-BmjBtIv8.js"),pe=require("./text-field-CKCwxTJX.js"),be=require("./bind-DeUYJ6m9.js"),me={"purpur-autocomplete":"_purpur-autocomplete_dgjyz_1","purpur-autocomplete__listbox":"_purpur-autocomplete__listbox_dgjyz_4","purpur-autocomplete__chevron-button":"_purpur-autocomplete__chevron-button_dgjyz_9","purpur-autocomplete__chevron-icon":"_purpur-autocomplete__chevron-icon_dgjyz_15","purpur-autocomplete__chevron-icon--up":"_purpur-autocomplete__chevron-icon--up_dgjyz_20"},fe=i=>r.useRef(i),xe=(i,x)=>{const n=r.useCallback(_=>{i&&!i.contains(_.target)&&x()},[x,i]);r.useEffect(()=>(document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}),[n])},Z=({combobox:i,comboboxButtonAriaLabel:x,highlightFirstOption:n,defaultInputValue:_,inputValue:u,filterOption:R,id:l,listboxLabel:S,listboxMaxHeight:b,onInputBlur:h,onInputChange:L,onInputFocus:D,onInputKeyDown:k,onInputMouseDown:$,openOnFocus:A,noOptionsText:E,onSelect:T,options:a,selectedOption:t,["data-testid"]:y})=>{const[C,K]=r.useState(((typeof u=="string"?u:_)||t?.label)??""),F=typeof u=="string"?u:C,[c,v]=r.useState(n?a[0]:void 0),B=r.useRef(null),U=fe(null),N=r.useRef(null),O=r.useRef({}),[V,Y]=r.useState(!1);function q(e){return y?`${y}-${e}`:void 0}const w=()=>{Y(!1),v(void 0)};xe(U.current,w);const g=({eventType:e})=>{Y(!0),t&&requestAnimationFrame(()=>{v({...t,isSetByClickEvent:e==="CLICK"}),z(O.current[t.id])})},ee=e=>{if(R)return a.filter(s=>R(e,s));if(!e)return a;const o=e.toUpperCase().split(" ")||[];return a.filter(s=>o.every(f=>(s.value||s.label).toUpperCase().includes(f)))},G=e=>t&&t?.label===e?a:ee(e),d=G(F),P=e=>{L?.(e),K(e)},z=e=>{if(e){const o=e.getBoundingClientRect(),s=N.current?.getBoundingClientRect()||{top:0,bottom:0};(o.top<s.top||o.bottom>s.bottom)&&e.scrollIntoView({block:"nearest"})}},J=e=>{e&&(B.current?.focus(),P(e.label),T?.(e)),w()},te=e=>{const o=n&&!c?0:d.findIndex(f=>f&&c?.id===f.id),s=d.length;return e==="ArrowDown"?d[(o??-1)+1]||d[0]:d[(o??s)-1]||d[s-1]},m=V&&(!!d.length||!!E),oe=e=>{!m&&g({eventType:"KEYBOARD"});const o=te(e);v(o),o&&z(O.current[o.id])},ne=e=>{switch(k?.(e),e.key){case"ArrowUp":case"ArrowDown":e.preventDefault(),oe(e.key);break;case"Enter":{const o=c||(n?a[0]:void 0);m&&J(o),!m&&g({eventType:"KEYBOARD"});break}case"Escape":case"Tab":w();break}},se=e=>{const o=G(e.target.value);P(e.target.value),v(void 0),!m&&g({eventType:"KEYBOARD"}),n&&o[0]&&z(O.current[o[0].id])},ce=e=>{$?.(e),m?w():g({eventType:"CLICK"})},re=e=>{D?.(e),!V&&A&&g({eventType:"KEYBOARD"}),B.current?.select()},ie=e=>{h?.(e),setTimeout(()=>{!B.current?.contains(document.activeElement)&&!N.current?.contains(document.activeElement)&&(w(),i&&P(t?t.label:""))})},ue={maxHeight:typeof b=="number"?`${b}px`:b},Q={"aria-label":S,"aria-expanded":m,"data-testid":q("listbox"),id:`${l}-listbox`,ref:N,onMouseLeave:()=>v(void 0),style:b?ue:void 0},W=e=>`${l}-listbox-item-${e.id}`,le=(e,o)=>{const s=()=>e.id!==c?.id&&v({...e,isSetByClickEvent:!0}),f=(e.id===c?.id||!!n&&!c&&o===0)&&!c?.isSetByClickEvent;return{"data-testid":q(`listbox-item-${e.id}`),id:W(e),key:e.id,onMouseMove:s,onMouseUp:()=>J(e),ref:X=>{X&&(O.current[e.id]=X)},tabIndex:-1,selected:e.id===t?.id,disabled:e.disabled,highlighted:f,hovered:e.id===c?.id&&!!c?.isSetByClickEvent}},ae={"aria-activedescendant":c?W(c):void 0,"aria-autocomplete":"list","aria-controls":Q.id,"data-testid":q("input"),autoComplete:"off",id:`${l}-input`,onChange:se,onMouseDown:ce,onFocus:re,onKeyDown:ne,onBlur:ie,ref:B,role:"combobox",value:F};return{id:l,inputProps:ae,internalRef:U,optionsToShow:d,showListbox:m,noOptionsText:E,combobox:i,comboboxButtonAriaLabel:x,getListBoxItemProps:le,listboxProps:Q}},j=be.c.bind(me),I="purpur-autocomplete",ve=({className:i,renderInput:x,renderOption:n,..._},u)=>{const{id:R,inputProps:l,internalRef:S,optionsToShow:b,showListbox:h,noOptionsText:L,combobox:D,comboboxButtonAriaLabel:k,getListBoxItemProps:$,listboxProps:A}=Z(_),E=(t,y)=>{const{key:C,...K}=$(t,y);return p.jsx(M.Listbox.Item,{...K,children:n?n?.(t):t.label},C)},T=t=>{S.current=t,typeof u=="function"?u(t):u&&(u.current=t)},a=()=>{const t=x(l);if(D&&k&&L&&t&&pe.isTextField(t)){const C=p.jsxs(p.Fragment,{children:[t.props.endAdornment,p.jsx("button",{"data-testid":"chevron button",type:"button",className:j(`${I}__chevron-button`),onClick:()=>{l.onFocus(void 0),l.onMouseDown(void 0)},"aria-label":k,"aria-expanded":h,"aria-controls":A.id,children:p.jsx(de.l,{size:"sm",className:j(`${I}__chevron-icon`,{[`${I}__chevron-icon--up`]:h})})})]});return r.cloneElement(t,{endAdornment:C})}return t};return p.jsxs("div",{id:R,ref:T,className:j([I,i]),children:[a(),h&&p.jsx(M.Listbox,{...A,className:j(`${I}__listbox`),children:b.length?b.filter(t=>!!t).map(E):p.jsx(M.Listbox.Item,{noninteractive:!0,children:L})})]})},H=r.forwardRef(ve);H.displayName="Autocomplete";exports.Autocomplete=H;exports.useAutocomplete=Z;
-//# sourceMappingURL=autocomplete-B_OBQM2h.js.map
+"use strict";const p=require("react/jsx-runtime"),r=require("react"),de=require("./chevron-down.es-BMjgiS3F.js"),M=require("./listbox-COBHLRtB.js"),pe=require("./text-field-BwxGMWds.js"),be=require("./bind-DeUYJ6m9.js"),me={"purpur-autocomplete":"_purpur-autocomplete_dgjyz_1","purpur-autocomplete__listbox":"_purpur-autocomplete__listbox_dgjyz_4","purpur-autocomplete__chevron-button":"_purpur-autocomplete__chevron-button_dgjyz_9","purpur-autocomplete__chevron-icon":"_purpur-autocomplete__chevron-icon_dgjyz_15","purpur-autocomplete__chevron-icon--up":"_purpur-autocomplete__chevron-icon--up_dgjyz_20"},fe=i=>r.useRef(i),xe=(i,x)=>{const n=r.useCallback(_=>{i&&!i.contains(_.target)&&x()},[x,i]);r.useEffect(()=>(document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}),[n])},Z=({combobox:i,comboboxButtonAriaLabel:x,highlightFirstOption:n,defaultInputValue:_,inputValue:u,filterOption:R,id:l,listboxLabel:S,listboxMaxHeight:b,onInputBlur:h,onInputChange:L,onInputFocus:D,onInputKeyDown:k,onInputMouseDown:$,openOnFocus:A,noOptionsText:E,onSelect:T,options:a,selectedOption:t,["data-testid"]:y})=>{const[C,K]=r.useState(((typeof u=="string"?u:_)||t?.label)??""),F=typeof u=="string"?u:C,[c,v]=r.useState(n?a[0]:void 0),B=r.useRef(null),U=fe(null),N=r.useRef(null),O=r.useRef({}),[V,Y]=r.useState(!1);function q(e){return y?`${y}-${e}`:void 0}const w=()=>{Y(!1),v(void 0)};xe(U.current,w);const g=({eventType:e})=>{Y(!0),t&&requestAnimationFrame(()=>{v({...t,isSetByClickEvent:e==="CLICK"}),z(O.current[t.id])})},ee=e=>{if(R)return a.filter(s=>R(e,s));if(!e)return a;const o=e.toUpperCase().split(" ")||[];return a.filter(s=>o.every(f=>(s.value||s.label).toUpperCase().includes(f)))},G=e=>t&&t?.label===e?a:ee(e),d=G(F),P=e=>{L?.(e),K(e)},z=e=>{if(e){const o=e.getBoundingClientRect(),s=N.current?.getBoundingClientRect()||{top:0,bottom:0};(o.top<s.top||o.bottom>s.bottom)&&e.scrollIntoView({block:"nearest"})}},J=e=>{e&&(B.current?.focus(),P(e.label),T?.(e)),w()},te=e=>{const o=n&&!c?0:d.findIndex(f=>f&&c?.id===f.id),s=d.length;return e==="ArrowDown"?d[(o??-1)+1]||d[0]:d[(o??s)-1]||d[s-1]},m=V&&(!!d.length||!!E),oe=e=>{!m&&g({eventType:"KEYBOARD"});const o=te(e);v(o),o&&z(O.current[o.id])},ne=e=>{switch(k?.(e),e.key){case"ArrowUp":case"ArrowDown":e.preventDefault(),oe(e.key);break;case"Enter":{const o=c||(n?a[0]:void 0);m&&J(o),!m&&g({eventType:"KEYBOARD"});break}case"Escape":case"Tab":w();break}},se=e=>{const o=G(e.target.value);P(e.target.value),v(void 0),!m&&g({eventType:"KEYBOARD"}),n&&o[0]&&z(O.current[o[0].id])},ce=e=>{$?.(e),m?w():g({eventType:"CLICK"})},re=e=>{D?.(e),!V&&A&&g({eventType:"KEYBOARD"}),B.current?.select()},ie=e=>{h?.(e),setTimeout(()=>{!B.current?.contains(document.activeElement)&&!N.current?.contains(document.activeElement)&&(w(),i&&P(t?t.label:""))})},ue={maxHeight:typeof b=="number"?`${b}px`:b},Q={"aria-label":S,"aria-expanded":m,"data-testid":q("listbox"),id:`${l}-listbox`,ref:N,onMouseLeave:()=>v(void 0),style:b?ue:void 0},W=e=>`${l}-listbox-item-${e.id}`,le=(e,o)=>{const s=()=>e.id!==c?.id&&v({...e,isSetByClickEvent:!0}),f=(e.id===c?.id||!!n&&!c&&o===0)&&!c?.isSetByClickEvent;return{"data-testid":q(`listbox-item-${e.id}`),id:W(e),key:e.id,onMouseMove:s,onMouseUp:()=>J(e),ref:X=>{X&&(O.current[e.id]=X)},tabIndex:-1,selected:e.id===t?.id,disabled:e.disabled,highlighted:f,hovered:e.id===c?.id&&!!c?.isSetByClickEvent}},ae={"aria-activedescendant":c?W(c):void 0,"aria-autocomplete":"list","aria-controls":Q.id,"data-testid":q("input"),autoComplete:"off",id:`${l}-input`,onChange:se,onMouseDown:ce,onFocus:re,onKeyDown:ne,onBlur:ie,ref:B,role:"combobox",value:F};return{id:l,inputProps:ae,internalRef:U,optionsToShow:d,showListbox:m,noOptionsText:E,combobox:i,comboboxButtonAriaLabel:x,getListBoxItemProps:le,listboxProps:Q}},j=be.c.bind(me),I="purpur-autocomplete",ve=({className:i,renderInput:x,renderOption:n,..._},u)=>{const{id:R,inputProps:l,internalRef:S,optionsToShow:b,showListbox:h,noOptionsText:L,combobox:D,comboboxButtonAriaLabel:k,getListBoxItemProps:$,listboxProps:A}=Z(_),E=(t,y)=>{const{key:C,...K}=$(t,y);return p.jsx(M.Listbox.Item,{...K,children:n?n?.(t):t.label},C)},T=t=>{S.current=t,typeof u=="function"?u(t):u&&(u.current=t)},a=()=>{const t=x(l);if(D&&k&&L&&t&&pe.isTextField(t)){const C=p.jsxs(p.Fragment,{children:[t.props.endAdornment,p.jsx("button",{"data-testid":"chevron button",type:"button",className:j(`${I}__chevron-button`),onClick:()=>{l.onFocus(void 0),l.onMouseDown(void 0)},"aria-label":k,"aria-expanded":h,"aria-controls":A.id,children:p.jsx(de.l,{size:"sm",className:j(`${I}__chevron-icon`,{[`${I}__chevron-icon--up`]:h})})})]});return r.cloneElement(t,{endAdornment:C})}return t};return p.jsxs("div",{id:R,ref:T,className:j([I,i]),children:[a(),h&&p.jsx(M.Listbox,{...A,className:j(`${I}__listbox`),children:b.length?b.filter(t=>!!t).map(E):p.jsx(M.Listbox.Item,{noninteractive:!0,children:L})})]})},H=r.forwardRef(ve);H.displayName="Autocomplete";exports.Autocomplete=H;exports.useAutocomplete=Z;
+//# sourceMappingURL=autocomplete-B421J7CS.js.map

package/dist/{autocomplete-B_OBQM2h.js.map → autocomplete-B421J7CS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-B_OBQM2h.js","sources":["../../../components/autocomplete/src/utils.ts","../../../components/autocomplete/src/useAutocomplete.ts","../../../components/autocomplete/src/autocomplete.tsx"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\n\n// Used to \"merge\" \"intersection types\". Used to get comments on the props to the docs.\nexport type Prettify<T> = {\n  [K in keyof T]: T[K];\n} & {};\n\nexport const useRefObject = <T>(value: T): RefObject<T> => {\n  return useRef<T>(value) as RefObject<T>;\n};\n\nexport const useOnClickOutside = (element: HTMLElement | null, callback: () => void) => {\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (element && !element.contains(event.target as Node)) {\n        callback();\n      }\n    },\n    [callback, element]\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [handleClickOutside]);\n};\n","import type { CSSProperties, ReactNode } from \"react\";\nimport { useRef, useState } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport type { ListboxItemProps, ListboxProps } from \"@purpur/listbox\";\n\nimport { useOnClickOutside, useRefObject } from \"./utils\";\n\nexport type AutocompleteOption = {\n  label: string;\n  id: string;\n  value?: string;\n  disabled?: boolean;\n};\n\nexport type InputProps = Omit<BaseProps<\"input\">, \"onFocus\" | \"onMouseDown\"> & {\n  onFocus: (event: React.FocusEvent<HTMLInputElement> | undefined) => void;\n  onMouseDown: (event: React.MouseEvent<HTMLInputElement> | undefined) => void;\n};\n\ntype ComboboxProps = {\n  /*\n   * Set to get combobox features. Use in combination with `noOptionsText`, `comboboxButtonAriaLabel` and Purpur TextField.\n   */\n  combobox: true;\n  /**\n   * An accessible label for the button that toggles the list of options for a combobox.\n   * */\n  comboboxButtonAriaLabel: string;\n  /*\n   * Shown when there are no options to show. Will be displayed inside a listbox item.\n   */\n  noOptionsText: ReactNode;\n};\n\ntype NoComboboxProps = {\n  combobox?: never;\n  comboboxButtonAriaLabel?: never;\n  /*\n   * Shown when there are no options to show. Will be displayed inside a listbox item.\n   */\n  noOptionsText?: ReactNode;\n};\n\nexport type UseAutocompleteResult<T extends AutocompleteOption> = {\n  /*\n   * Set to highlight the first option in the listbox when the input is focused.\n   */\n  highlightFirstOption?: boolean;\n  /*\n   * The default input value. Only to use when the input is uncontrolled.\n   */\n  defaultInputValue?: string;\n  /*\n   * The input value. Use this to control the input value.\n   */\n  inputValue?: string;\n  /*\n   * Invoked for each option. Use to control which options are shown.\n   */\n  filterOption?: (inputValue: string | undefined, option: T) => boolean;\n  /*\n   * Id will be used to prefix id:s of all elements.\n   */\n  id: string;\n  /*\n   * The label of the listbox (dropdown) displaying the options.\n   */\n  listboxLabel: string;\n  /*\n   * The height of the listbox. Number will be interpreted as px value. defaults to `calc(2 * var(--purpur-spacing-1200))`.\n   */\n  listboxMaxHeight?: string | number;\n  /*\n   * NOTE! Always use this instead of onBlur directly on the input element. Event handler invoked on input blur.\n   */\n  onInputBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /*\n   * NOTE! Always use this instead of onChange directly on the input element. Event handler invoked when the input value changes.\n   */\n  onInputChange?: (value: string) => void;\n  /*\n   * NOTE! Always use this instead of onFocus directly on the input element. Event handler invoked on input focus.\n   */\n  onInputFocus?: (event: React.FocusEvent<HTMLInputElement> | undefined) => undefined;\n  /*\n   * NOTE! Always use this instead of onKeyDown directly on the input element. Event handler invoked on input key down.\n   */\n  onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /*\n   * NOTE! Always use this instead of onMouseDown directly on the input element. Event handler invoked on input mouse down.\n   */\n  onInputMouseDown?: (event: React.MouseEvent<HTMLInputElement> | undefined) => undefined;\n  /*\n   * Set to open the listbox when input gets focus.\n   */\n  openOnFocus?: boolean;\n  /*\n   * Event handler invoked when an option is selected.\n   */\n  onSelect?: (option: T | undefined) => void;\n  /*\n   * The list of options. Could include custom props.\n   */\n  options: T[];\n  /*\n   * The selected option.\n   */\n  selectedOption?: T;\n  [\"data-testid\"]?: string;\n} & (ComboboxProps | NoComboboxProps);\n\nexport const useAutocomplete = <T extends AutocompleteOption>({\n  combobox,\n  comboboxButtonAriaLabel,\n  highlightFirstOption,\n  defaultInputValue,\n  inputValue,\n  filterOption,\n  id,\n  listboxLabel,\n  listboxMaxHeight,\n  onInputBlur,\n  onInputChange,\n  onInputFocus,\n  onInputKeyDown,\n  onInputMouseDown,\n  openOnFocus,\n  noOptionsText,\n  onSelect,\n  options,\n  selectedOption,\n  [\"data-testid\"]: dataTestid,\n}: UseAutocompleteResult<T>) => {\n  const [internalInputValue, setInternalInputValue] = useState(\n    ((typeof inputValue === \"string\" ? inputValue : defaultInputValue) || selectedOption?.label) ??\n      \"\"\n  );\n  const definiteInputValue = typeof inputValue === \"string\" ? inputValue : internalInputValue;\n  const [highlightedOption, setHighlightedOption] = useState<\n    (T & { isSetByClickEvent?: false }) | undefined\n  >(highlightFirstOption ? options[0] : undefined);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const internalRef = useRefObject<HTMLDivElement | null>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n  const optionRefs = useRef<Record<string, HTMLLIElement>>({});\n  const [listboxIsOpen, setListboxIsOpen] = useState(false);\n\n  function getTestId(name: string) {\n    return dataTestid ? `${dataTestid}-${name}` : undefined;\n  }\n\n  const closeListbox = () => {\n    setListboxIsOpen(false);\n    setHighlightedOption(undefined);\n  };\n\n  useOnClickOutside(internalRef.current, closeListbox);\n\n  const openListbox = ({ eventType }: { eventType: \"CLICK\" | \"KEYBOARD\" }) => {\n    setListboxIsOpen(true);\n    if (selectedOption) {\n      requestAnimationFrame(() => {\n        const isSetByClickEvent = eventType === \"CLICK\";\n        setHighlightedOption({ ...selectedOption, isSetByClickEvent });\n        scrollOptionIntoView(optionRefs.current[selectedOption.id]);\n      });\n    }\n  };\n\n  const filterOptions = (searchTerm: string | undefined) => {\n    if (filterOption) {\n      return options.filter((option) => filterOption(searchTerm, option));\n    }\n\n    if (!searchTerm) {\n      return options;\n    }\n\n    const searchTermChunks = searchTerm.toUpperCase().split(\" \") || [];\n    return options.filter((option) =>\n      searchTermChunks.every((chunk) =>\n        (option.value || option.label).toUpperCase().includes(chunk)\n      )\n    );\n  };\n\n  const getOptionsToShow = (searchTerm: string | undefined): (T | undefined)[] => {\n    return selectedOption && selectedOption?.label === searchTerm\n      ? options\n      : filterOptions(searchTerm);\n  };\n\n  const optionsToShow = getOptionsToShow(definiteInputValue);\n\n  const populateInputField = (value: string) => {\n    onInputChange?.(value);\n    setInternalInputValue(value);\n  };\n\n  const scrollOptionIntoView = (option: HTMLLIElement | undefined) => {\n    if (option) {\n      const optionRect = option.getBoundingClientRect();\n      const listboxRect = listboxRef.current?.getBoundingClientRect() || { top: 0, bottom: 0 };\n      const isOptionOutsideView =\n        optionRect.top < listboxRect.top || optionRect.bottom > listboxRect.bottom;\n      if (isOptionOutsideView) {\n        option.scrollIntoView({ block: \"nearest\" });\n      }\n    }\n  };\n\n  const selectOption = (option: T | undefined) => {\n    if (option) {\n      inputRef.current?.focus();\n      populateInputField(option.label);\n      onSelect?.(option);\n    }\n    closeListbox();\n  };\n\n  const findNextOption = (key: \"ArrowUp\" | \"ArrowDown\"): T | undefined => {\n    const index =\n      highlightFirstOption && !highlightedOption\n        ? 0\n        : optionsToShow.findIndex((option) => option && highlightedOption?.id === option.id);\n\n    const optionsLength = optionsToShow.length;\n\n    return key === \"ArrowDown\"\n      ? optionsToShow[(index ?? -1) + 1] || optionsToShow[0]\n      : optionsToShow[(index ?? optionsLength) - 1] || optionsToShow[optionsLength - 1];\n  };\n\n  const showListbox = listboxIsOpen && (!!optionsToShow.length || !!noOptionsText);\n\n  const highlightNextOption = (key: \"ArrowUp\" | \"ArrowDown\") => {\n    !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n    const nextOption = findNextOption(key);\n\n    setHighlightedOption(nextOption);\n    nextOption && scrollOptionIntoView(optionRefs.current[nextOption.id]);\n  };\n\n  const handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n    onInputKeyDown?.(event);\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        event.preventDefault(); // Preventing default to not move cursor in input\n        highlightNextOption(event.key);\n        break;\n      case \"Enter\": {\n        const optionToSelect = highlightedOption || (highlightFirstOption ? options[0] : undefined);\n        showListbox && selectOption(optionToSelect);\n        !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n        break;\n      }\n      case \"Escape\":\n      case \"Tab\":\n        closeListbox();\n        break;\n    }\n  };\n\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    const nextOptionsToShow = getOptionsToShow(e.target.value);\n    populateInputField(e.target.value);\n    setHighlightedOption(undefined);\n    !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n    highlightFirstOption &&\n      nextOptionsToShow[0] &&\n      scrollOptionIntoView(optionRefs.current[nextOptionsToShow[0].id]);\n  };\n\n  const handleOnMouseDown = (event: React.MouseEvent<HTMLInputElement> | undefined) => {\n    onInputMouseDown?.(event);\n    showListbox ? closeListbox() : openListbox({ eventType: \"CLICK\" });\n  };\n\n  const handleOnFocus = (event: React.FocusEvent<HTMLInputElement> | undefined) => {\n    onInputFocus?.(event);\n    !listboxIsOpen && openOnFocus && openListbox({ eventType: \"KEYBOARD\" });\n    inputRef.current?.select();\n  };\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {\n    onInputBlur?.(event);\n    // Use a timeout to allow click events on the listbox to fire before this check\n    setTimeout(() => {\n      if (\n        !inputRef.current?.contains(document.activeElement) &&\n        !listboxRef.current?.contains(document.activeElement)\n      ) {\n        closeListbox();\n\n        // If the blur happened due to a click inside the listbox for a combobox, don't reset the value\n        if (combobox) {\n          populateInputField(selectedOption ? selectedOption.label : \"\");\n        }\n      }\n    });\n  };\n\n  const listboxStyle: CSSProperties = {\n    maxHeight: typeof listboxMaxHeight === \"number\" ? `${listboxMaxHeight}px` : listboxMaxHeight,\n  };\n\n  const listboxProps: ListboxProps = {\n    \"aria-label\": listboxLabel,\n    \"aria-expanded\": showListbox,\n    \"data-testid\": getTestId(\"listbox\"),\n    id: `${id}-listbox`,\n    ref: listboxRef,\n    onMouseLeave: () => setHighlightedOption(undefined),\n    style: listboxMaxHeight ? listboxStyle : undefined,\n  };\n\n  const createListboxItemId = (option: T) => `${id}-listbox-item-${option.id}`;\n\n  const getListBoxItemProps = (option: T, index: number): ListboxItemProps => {\n    const handleOnMouseMove = () =>\n      option.id !== highlightedOption?.id &&\n      setHighlightedOption({ ...option, isSetByClickEvent: true });\n\n    const highlighted =\n      (option.id === highlightedOption?.id ||\n        (!!highlightFirstOption && !highlightedOption && index === 0)) &&\n      !highlightedOption?.isSetByClickEvent;\n\n    return {\n      \"data-testid\": getTestId(`listbox-item-${option.id}`),\n      id: createListboxItemId(option),\n      key: option.id,\n      onMouseMove: handleOnMouseMove,\n      onMouseUp: () => selectOption(option),\n      ref: (el) => {\n        if (el) {\n          optionRefs.current[option.id] = el;\n        }\n      },\n      tabIndex: -1,\n      selected: option.id === selectedOption?.id,\n      disabled: option.disabled,\n      highlighted,\n      hovered: option.id === highlightedOption?.id && !!highlightedOption?.isSetByClickEvent,\n    };\n  };\n\n  const inputProps: InputProps = {\n    \"aria-activedescendant\": highlightedOption ? createListboxItemId(highlightedOption) : undefined,\n    \"aria-autocomplete\": \"list\",\n    \"aria-controls\": listboxProps.id,\n    \"data-testid\": getTestId(\"input\"),\n    autoComplete: \"off\",\n    id: `${id}-input`,\n    onChange: handleOnChange,\n    onMouseDown: handleOnMouseDown,\n    onFocus: handleOnFocus,\n    onKeyDown: handleOnKeyDown,\n    onBlur: handleOnBlur,\n    ref: inputRef,\n    role: \"combobox\",\n    value: definiteInputValue,\n  };\n\n  return {\n    id,\n    inputProps,\n    internalRef,\n    optionsToShow,\n    showListbox,\n    noOptionsText,\n    combobox,\n    comboboxButtonAriaLabel,\n    getListBoxItemProps,\n    listboxProps,\n  };\n};\n","import type { ComponentPropsWithRef, ForwardedRef, ReactNode } from \"react\";\nimport React, { cloneElement, forwardRef } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { isTextField } from \"@purpur/text-field\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./autocomplete.module.scss\";\nimport type { AutocompleteOption, UseAutocompleteResult } from \"./useAutocomplete\";\nimport { useAutocomplete } from \"./useAutocomplete\";\nimport type { Prettify } from \"./utils\";\n\nconst cx = c.bind(styles);\n\ntype AutocompleteProps<T extends AutocompleteOption> = Prettify<\n  UseAutocompleteResult<T> & {\n    className?: string;\n    /**\n     * Render the input. `props` are native input props\n     */\n    renderInput: (props: ComponentPropsWithRef<\"input\">) => ReactNode;\n    /**\n     * Invoked for each given option. Use to customize the rendering of the options\n     */\n    renderOption?: (option: T) => ReactNode;\n  }\n>;\n\nconst rootClassName = \"purpur-autocomplete\";\n\nconst AutocompleteComponent = <T extends AutocompleteOption>(\n  { className, renderInput, renderOption, ...useAutocompleteProps }: AutocompleteProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) => {\n  const {\n    id,\n    inputProps,\n    internalRef,\n    optionsToShow,\n    showListbox,\n    noOptionsText,\n    combobox,\n    comboboxButtonAriaLabel,\n    getListBoxItemProps,\n    listboxProps,\n  } = useAutocomplete(useAutocompleteProps);\n\n  const renderListboxItem = (option: T, index: number) => {\n    const { key, ...listboxItemProps } = getListBoxItemProps(option, index);\n\n    return (\n      <Listbox.Item key={key} {...listboxItemProps}>\n        {renderOption ? renderOption?.(option) : option.label}\n      </Listbox.Item>\n    );\n  };\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    internalRef.current = node;\n    if (typeof ref === \"function\") {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  const getInputComponent = () => {\n    const input = renderInput(inputProps);\n    const isCombobox =\n      combobox && comboboxButtonAriaLabel && noOptionsText && input && isTextField(input);\n\n    if (isCombobox) {\n      const endAdornment = (\n        <>\n          {input.props.endAdornment}\n          <button\n            data-testid=\"chevron button\"\n            type=\"button\"\n            className={cx(`${rootClassName}__chevron-button`)}\n            onClick={() => {\n              inputProps.onFocus(undefined);\n              inputProps.onMouseDown(undefined);\n            }}\n            aria-label={comboboxButtonAriaLabel}\n            aria-expanded={showListbox}\n            aria-controls={listboxProps.id}\n          >\n            <IconChevronDown\n              size=\"sm\"\n              className={cx(`${rootClassName}__chevron-icon`, {\n                [`${rootClassName}__chevron-icon--up`]: showListbox,\n              })}\n            />\n          </button>\n        </>\n      );\n\n      return cloneElement(input, { endAdornment });\n    }\n\n    return input;\n  };\n\n  return (\n    <div id={id} ref={setRootRef} className={cx([rootClassName, className])}>\n      {getInputComponent()}\n      {showListbox && (\n        <Listbox {...listboxProps} className={cx(`${rootClassName}__listbox`)}>\n          {!optionsToShow.length ? (\n            <Listbox.Item noninteractive>{noOptionsText}</Listbox.Item>\n          ) : (\n            optionsToShow.filter((option): option is T => !!option).map(renderListboxItem)\n          )}\n        </Listbox>\n      )}\n    </div>\n  );\n};\n\nexport const Autocomplete = forwardRef(AutocompleteComponent);\nAutocomplete.displayName = \"Autocomplete\";\n\nexport type {\n  AutocompleteOption,\n  UseAutocompleteResult as UseAutocompleteOptions,\n} from \"./useAutocomplete\";\nexport { useAutocomplete } from \"./useAutocomplete\";\n"],"names":["useRefObject","value","useRef","useOnClickOutside","element","callback","handleClickOutside","useCallback","event","useEffect","useAutocomplete","combobox","comboboxButtonAriaLabel","highlightFirstOption","defaultInputValue","inputValue","filterOption","id","listboxLabel","listboxMaxHeight","onInputBlur","onInputChange","onInputFocus","onInputKeyDown","onInputMouseDown","openOnFocus","noOptionsText","onSelect","options","selectedOption","dataTestid","internalInputValue","setInternalInputValue","useState","definiteInputValue","highlightedOption","setHighlightedOption","inputRef","internalRef","listboxRef","optionRefs","listboxIsOpen","setListboxIsOpen","getTestId","name","closeListbox","openListbox","eventType","scrollOptionIntoView","filterOptions","searchTerm","option","searchTermChunks","chunk","getOptionsToShow","optionsToShow","populateInputField","optionRect","listboxRect","selectOption","findNextOption","key","index","optionsLength","showListbox","highlightNextOption","nextOption","handleOnKeyDown","optionToSelect","handleOnChange","nextOptionsToShow","handleOnMouseDown","handleOnFocus","handleOnBlur","listboxStyle","listboxProps","createListboxItemId","getListBoxItemProps","handleOnMouseMove","highlighted","el","inputProps","cx","c","styles","rootClassName","AutocompleteComponent","className","renderInput","renderOption","useAutocompleteProps","ref","renderListboxItem","listboxItemProps","jsx","Listbox","setRootRef","node","getInputComponent","input","isTextField","endAdornment","jsxs","Fragment","IconChevronDown","cloneElement","Autocomplete","forwardRef"],"mappings":"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"}
+{"version":3,"file":"autocomplete-B421J7CS.js","sources":["../../../components/autocomplete/src/utils.ts","../../../components/autocomplete/src/useAutocomplete.ts","../../../components/autocomplete/src/autocomplete.tsx"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\n\n// Used to \"merge\" \"intersection types\". Used to get comments on the props to the docs.\nexport type Prettify<T> = {\n  [K in keyof T]: T[K];\n} & {};\n\nexport const useRefObject = <T>(value: T): RefObject<T> => {\n  return useRef<T>(value) as RefObject<T>;\n};\n\nexport const useOnClickOutside = (element: HTMLElement | null, callback: () => void) => {\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (element && !element.contains(event.target as Node)) {\n        callback();\n      }\n    },\n    [callback, element]\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [handleClickOutside]);\n};\n","import type { CSSProperties, ReactNode } from \"react\";\nimport { useRef, useState } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport type { ListboxItemProps, ListboxProps } from \"@purpur/listbox\";\n\nimport { useOnClickOutside, useRefObject } from \"./utils\";\n\nexport type AutocompleteOption = {\n  label: string;\n  id: string;\n  value?: string;\n  disabled?: boolean;\n};\n\nexport type InputProps = Omit<BaseProps<\"input\">, \"onFocus\" | \"onMouseDown\"> & {\n  onFocus: (event: React.FocusEvent<HTMLInputElement> | undefined) => void;\n  onMouseDown: (event: React.MouseEvent<HTMLInputElement> | undefined) => void;\n};\n\ntype ComboboxProps = {\n  /*\n   * Set to get combobox features. Use in combination with `noOptionsText`, `comboboxButtonAriaLabel` and Purpur TextField.\n   */\n  combobox: true;\n  /**\n   * An accessible label for the button that toggles the list of options for a combobox.\n   * */\n  comboboxButtonAriaLabel: string;\n  /*\n   * Shown when there are no options to show. Will be displayed inside a listbox item.\n   */\n  noOptionsText: ReactNode;\n};\n\ntype NoComboboxProps = {\n  combobox?: never;\n  comboboxButtonAriaLabel?: never;\n  /*\n   * Shown when there are no options to show. Will be displayed inside a listbox item.\n   */\n  noOptionsText?: ReactNode;\n};\n\nexport type UseAutocompleteResult<T extends AutocompleteOption> = {\n  /*\n   * Set to highlight the first option in the listbox when the input is focused.\n   */\n  highlightFirstOption?: boolean;\n  /*\n   * The default input value. Only to use when the input is uncontrolled.\n   */\n  defaultInputValue?: string;\n  /*\n   * The input value. Use this to control the input value.\n   */\n  inputValue?: string;\n  /*\n   * Invoked for each option. Use to control which options are shown.\n   */\n  filterOption?: (inputValue: string | undefined, option: T) => boolean;\n  /*\n   * Id will be used to prefix id:s of all elements.\n   */\n  id: string;\n  /*\n   * The label of the listbox (dropdown) displaying the options.\n   */\n  listboxLabel: string;\n  /*\n   * The height of the listbox. Number will be interpreted as px value. defaults to `calc(2 * var(--purpur-spacing-1200))`.\n   */\n  listboxMaxHeight?: string | number;\n  /*\n   * NOTE! Always use this instead of onBlur directly on the input element. Event handler invoked on input blur.\n   */\n  onInputBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /*\n   * NOTE! Always use this instead of onChange directly on the input element. Event handler invoked when the input value changes.\n   */\n  onInputChange?: (value: string) => void;\n  /*\n   * NOTE! Always use this instead of onFocus directly on the input element. Event handler invoked on input focus.\n   */\n  onInputFocus?: (event: React.FocusEvent<HTMLInputElement> | undefined) => undefined;\n  /*\n   * NOTE! Always use this instead of onKeyDown directly on the input element. Event handler invoked on input key down.\n   */\n  onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /*\n   * NOTE! Always use this instead of onMouseDown directly on the input element. Event handler invoked on input mouse down.\n   */\n  onInputMouseDown?: (event: React.MouseEvent<HTMLInputElement> | undefined) => undefined;\n  /*\n   * Set to open the listbox when input gets focus.\n   */\n  openOnFocus?: boolean;\n  /*\n   * Event handler invoked when an option is selected.\n   */\n  onSelect?: (option: T | undefined) => void;\n  /*\n   * The list of options. Could include custom props.\n   */\n  options: T[];\n  /*\n   * The selected option.\n   */\n  selectedOption?: T;\n  [\"data-testid\"]?: string;\n} & (ComboboxProps | NoComboboxProps);\n\nexport const useAutocomplete = <T extends AutocompleteOption>({\n  combobox,\n  comboboxButtonAriaLabel,\n  highlightFirstOption,\n  defaultInputValue,\n  inputValue,\n  filterOption,\n  id,\n  listboxLabel,\n  listboxMaxHeight,\n  onInputBlur,\n  onInputChange,\n  onInputFocus,\n  onInputKeyDown,\n  onInputMouseDown,\n  openOnFocus,\n  noOptionsText,\n  onSelect,\n  options,\n  selectedOption,\n  [\"data-testid\"]: dataTestid,\n}: UseAutocompleteResult<T>) => {\n  const [internalInputValue, setInternalInputValue] = useState(\n    ((typeof inputValue === \"string\" ? inputValue : defaultInputValue) || selectedOption?.label) ??\n      \"\"\n  );\n  const definiteInputValue = typeof inputValue === \"string\" ? inputValue : internalInputValue;\n  const [highlightedOption, setHighlightedOption] = useState<\n    (T & { isSetByClickEvent?: false }) | undefined\n  >(highlightFirstOption ? options[0] : undefined);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const internalRef = useRefObject<HTMLDivElement | null>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n  const optionRefs = useRef<Record<string, HTMLLIElement>>({});\n  const [listboxIsOpen, setListboxIsOpen] = useState(false);\n\n  function getTestId(name: string) {\n    return dataTestid ? `${dataTestid}-${name}` : undefined;\n  }\n\n  const closeListbox = () => {\n    setListboxIsOpen(false);\n    setHighlightedOption(undefined);\n  };\n\n  useOnClickOutside(internalRef.current, closeListbox);\n\n  const openListbox = ({ eventType }: { eventType: \"CLICK\" | \"KEYBOARD\" }) => {\n    setListboxIsOpen(true);\n    if (selectedOption) {\n      requestAnimationFrame(() => {\n        const isSetByClickEvent = eventType === \"CLICK\";\n        setHighlightedOption({ ...selectedOption, isSetByClickEvent });\n        scrollOptionIntoView(optionRefs.current[selectedOption.id]);\n      });\n    }\n  };\n\n  const filterOptions = (searchTerm: string | undefined) => {\n    if (filterOption) {\n      return options.filter((option) => filterOption(searchTerm, option));\n    }\n\n    if (!searchTerm) {\n      return options;\n    }\n\n    const searchTermChunks = searchTerm.toUpperCase().split(\" \") || [];\n    return options.filter((option) =>\n      searchTermChunks.every((chunk) =>\n        (option.value || option.label).toUpperCase().includes(chunk)\n      )\n    );\n  };\n\n  const getOptionsToShow = (searchTerm: string | undefined): (T | undefined)[] => {\n    return selectedOption && selectedOption?.label === searchTerm\n      ? options\n      : filterOptions(searchTerm);\n  };\n\n  const optionsToShow = getOptionsToShow(definiteInputValue);\n\n  const populateInputField = (value: string) => {\n    onInputChange?.(value);\n    setInternalInputValue(value);\n  };\n\n  const scrollOptionIntoView = (option: HTMLLIElement | undefined) => {\n    if (option) {\n      const optionRect = option.getBoundingClientRect();\n      const listboxRect = listboxRef.current?.getBoundingClientRect() || { top: 0, bottom: 0 };\n      const isOptionOutsideView =\n        optionRect.top < listboxRect.top || optionRect.bottom > listboxRect.bottom;\n      if (isOptionOutsideView) {\n        option.scrollIntoView({ block: \"nearest\" });\n      }\n    }\n  };\n\n  const selectOption = (option: T | undefined) => {\n    if (option) {\n      inputRef.current?.focus();\n      populateInputField(option.label);\n      onSelect?.(option);\n    }\n    closeListbox();\n  };\n\n  const findNextOption = (key: \"ArrowUp\" | \"ArrowDown\"): T | undefined => {\n    const index =\n      highlightFirstOption && !highlightedOption\n        ? 0\n        : optionsToShow.findIndex((option) => option && highlightedOption?.id === option.id);\n\n    const optionsLength = optionsToShow.length;\n\n    return key === \"ArrowDown\"\n      ? optionsToShow[(index ?? -1) + 1] || optionsToShow[0]\n      : optionsToShow[(index ?? optionsLength) - 1] || optionsToShow[optionsLength - 1];\n  };\n\n  const showListbox = listboxIsOpen && (!!optionsToShow.length || !!noOptionsText);\n\n  const highlightNextOption = (key: \"ArrowUp\" | \"ArrowDown\") => {\n    !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n    const nextOption = findNextOption(key);\n\n    setHighlightedOption(nextOption);\n    nextOption && scrollOptionIntoView(optionRefs.current[nextOption.id]);\n  };\n\n  const handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n    onInputKeyDown?.(event);\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        event.preventDefault(); // Preventing default to not move cursor in input\n        highlightNextOption(event.key);\n        break;\n      case \"Enter\": {\n        const optionToSelect = highlightedOption || (highlightFirstOption ? options[0] : undefined);\n        showListbox && selectOption(optionToSelect);\n        !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n        break;\n      }\n      case \"Escape\":\n      case \"Tab\":\n        closeListbox();\n        break;\n    }\n  };\n\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    const nextOptionsToShow = getOptionsToShow(e.target.value);\n    populateInputField(e.target.value);\n    setHighlightedOption(undefined);\n    !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n    highlightFirstOption &&\n      nextOptionsToShow[0] &&\n      scrollOptionIntoView(optionRefs.current[nextOptionsToShow[0].id]);\n  };\n\n  const handleOnMouseDown = (event: React.MouseEvent<HTMLInputElement> | undefined) => {\n    onInputMouseDown?.(event);\n    showListbox ? closeListbox() : openListbox({ eventType: \"CLICK\" });\n  };\n\n  const handleOnFocus = (event: React.FocusEvent<HTMLInputElement> | undefined) => {\n    onInputFocus?.(event);\n    !listboxIsOpen && openOnFocus && openListbox({ eventType: \"KEYBOARD\" });\n    inputRef.current?.select();\n  };\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {\n    onInputBlur?.(event);\n    // Use a timeout to allow click events on the listbox to fire before this check\n    setTimeout(() => {\n      if (\n        !inputRef.current?.contains(document.activeElement) &&\n        !listboxRef.current?.contains(document.activeElement)\n      ) {\n        closeListbox();\n\n        // If the blur happened due to a click inside the listbox for a combobox, don't reset the value\n        if (combobox) {\n          populateInputField(selectedOption ? selectedOption.label : \"\");\n        }\n      }\n    });\n  };\n\n  const listboxStyle: CSSProperties = {\n    maxHeight: typeof listboxMaxHeight === \"number\" ? `${listboxMaxHeight}px` : listboxMaxHeight,\n  };\n\n  const listboxProps: ListboxProps = {\n    \"aria-label\": listboxLabel,\n    \"aria-expanded\": showListbox,\n    \"data-testid\": getTestId(\"listbox\"),\n    id: `${id}-listbox`,\n    ref: listboxRef,\n    onMouseLeave: () => setHighlightedOption(undefined),\n    style: listboxMaxHeight ? listboxStyle : undefined,\n  };\n\n  const createListboxItemId = (option: T) => `${id}-listbox-item-${option.id}`;\n\n  const getListBoxItemProps = (option: T, index: number): ListboxItemProps => {\n    const handleOnMouseMove = () =>\n      option.id !== highlightedOption?.id &&\n      setHighlightedOption({ ...option, isSetByClickEvent: true });\n\n    const highlighted =\n      (option.id === highlightedOption?.id ||\n        (!!highlightFirstOption && !highlightedOption && index === 0)) &&\n      !highlightedOption?.isSetByClickEvent;\n\n    return {\n      \"data-testid\": getTestId(`listbox-item-${option.id}`),\n      id: createListboxItemId(option),\n      key: option.id,\n      onMouseMove: handleOnMouseMove,\n      onMouseUp: () => selectOption(option),\n      ref: (el) => {\n        if (el) {\n          optionRefs.current[option.id] = el;\n        }\n      },\n      tabIndex: -1,\n      selected: option.id === selectedOption?.id,\n      disabled: option.disabled,\n      highlighted,\n      hovered: option.id === highlightedOption?.id && !!highlightedOption?.isSetByClickEvent,\n    };\n  };\n\n  const inputProps: InputProps = {\n    \"aria-activedescendant\": highlightedOption ? createListboxItemId(highlightedOption) : undefined,\n    \"aria-autocomplete\": \"list\",\n    \"aria-controls\": listboxProps.id,\n    \"data-testid\": getTestId(\"input\"),\n    autoComplete: \"off\",\n    id: `${id}-input`,\n    onChange: handleOnChange,\n    onMouseDown: handleOnMouseDown,\n    onFocus: handleOnFocus,\n    onKeyDown: handleOnKeyDown,\n    onBlur: handleOnBlur,\n    ref: inputRef,\n    role: \"combobox\",\n    value: definiteInputValue,\n  };\n\n  return {\n    id,\n    inputProps,\n    internalRef,\n    optionsToShow,\n    showListbox,\n    noOptionsText,\n    combobox,\n    comboboxButtonAriaLabel,\n    getListBoxItemProps,\n    listboxProps,\n  };\n};\n","import type { ComponentPropsWithRef, ForwardedRef, ReactNode } from \"react\";\nimport React, { cloneElement, forwardRef } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { isTextField } from \"@purpur/text-field\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./autocomplete.module.scss\";\nimport type { AutocompleteOption, UseAutocompleteResult } from \"./useAutocomplete\";\nimport { useAutocomplete } from \"./useAutocomplete\";\nimport type { Prettify } from \"./utils\";\n\nconst cx = c.bind(styles);\n\ntype AutocompleteProps<T extends AutocompleteOption> = Prettify<\n  UseAutocompleteResult<T> & {\n    className?: string;\n    /**\n     * Render the input. `props` are native input props\n     */\n    renderInput: (props: ComponentPropsWithRef<\"input\">) => ReactNode;\n    /**\n     * Invoked for each given option. Use to customize the rendering of the options\n     */\n    renderOption?: (option: T) => ReactNode;\n  }\n>;\n\nconst rootClassName = \"purpur-autocomplete\";\n\nconst AutocompleteComponent = <T extends AutocompleteOption>(\n  { className, renderInput, renderOption, ...useAutocompleteProps }: AutocompleteProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) => {\n  const {\n    id,\n    inputProps,\n    internalRef,\n    optionsToShow,\n    showListbox,\n    noOptionsText,\n    combobox,\n    comboboxButtonAriaLabel,\n    getListBoxItemProps,\n    listboxProps,\n  } = useAutocomplete(useAutocompleteProps);\n\n  const renderListboxItem = (option: T, index: number) => {\n    const { key, ...listboxItemProps } = getListBoxItemProps(option, index);\n\n    return (\n      <Listbox.Item key={key} {...listboxItemProps}>\n        {renderOption ? renderOption?.(option) : option.label}\n      </Listbox.Item>\n    );\n  };\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    internalRef.current = node;\n    if (typeof ref === \"function\") {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  const getInputComponent = () => {\n    const input = renderInput(inputProps);\n    const isCombobox =\n      combobox && comboboxButtonAriaLabel && noOptionsText && input && isTextField(input);\n\n    if (isCombobox) {\n      const endAdornment = (\n        <>\n          {input.props.endAdornment}\n          <button\n            data-testid=\"chevron button\"\n            type=\"button\"\n            className={cx(`${rootClassName}__chevron-button`)}\n            onClick={() => {\n              inputProps.onFocus(undefined);\n              inputProps.onMouseDown(undefined);\n            }}\n            aria-label={comboboxButtonAriaLabel}\n            aria-expanded={showListbox}\n            aria-controls={listboxProps.id}\n          >\n            <IconChevronDown\n              size=\"sm\"\n              className={cx(`${rootClassName}__chevron-icon`, {\n                [`${rootClassName}__chevron-icon--up`]: showListbox,\n              })}\n            />\n          </button>\n        </>\n      );\n\n      return cloneElement(input, { endAdornment });\n    }\n\n    return input;\n  };\n\n  return (\n    <div id={id} ref={setRootRef} className={cx([rootClassName, className])}>\n      {getInputComponent()}\n      {showListbox && (\n        <Listbox {...listboxProps} className={cx(`${rootClassName}__listbox`)}>\n          {!optionsToShow.length ? (\n            <Listbox.Item noninteractive>{noOptionsText}</Listbox.Item>\n          ) : (\n            optionsToShow.filter((option): option is T => !!option).map(renderListboxItem)\n          )}\n        </Listbox>\n      )}\n    </div>\n  );\n};\n\n/* @deprecated use `Dropdown` or `SearchField` instead, this is only exported for backwards compatibility and will be removed in a future release */\nexport const Autocomplete = forwardRef(AutocompleteComponent);\nAutocomplete.displayName = \"Autocomplete\";\n\nexport type {\n  AutocompleteOption,\n  UseAutocompleteResult as UseAutocompleteOptions,\n} from \"./useAutocomplete\";\nexport { useAutocomplete } from \"./useAutocomplete\";\n"],"names":["useRefObject","value","useRef","useOnClickOutside","element","callback","handleClickOutside","useCallback","event","useEffect","useAutocomplete","combobox","comboboxButtonAriaLabel","highlightFirstOption","defaultInputValue","inputValue","filterOption","id","listboxLabel","listboxMaxHeight","onInputBlur","onInputChange","onInputFocus","onInputKeyDown","onInputMouseDown","openOnFocus","noOptionsText","onSelect","options","selectedOption","dataTestid","internalInputValue","setInternalInputValue","useState","definiteInputValue","highlightedOption","setHighlightedOption","inputRef","internalRef","listboxRef","optionRefs","listboxIsOpen","setListboxIsOpen","getTestId","name","closeListbox","openListbox","eventType","scrollOptionIntoView","filterOptions","searchTerm","option","searchTermChunks","chunk","getOptionsToShow","optionsToShow","populateInputField","optionRect","listboxRect","selectOption","findNextOption","key","index","optionsLength","showListbox","highlightNextOption","nextOption","handleOnKeyDown","optionToSelect","handleOnChange","nextOptionsToShow","handleOnMouseDown","handleOnFocus","handleOnBlur","listboxStyle","listboxProps","createListboxItemId","getListBoxItemProps","handleOnMouseMove","highlighted","el","inputProps","cx","c","styles","rootClassName","AutocompleteComponent","className","renderInput","renderOption","useAutocompleteProps","ref","renderListboxItem","listboxItemProps","jsx","Listbox","setRootRef","node","getInputComponent","input","isTextField","endAdornment","jsxs","Fragment","IconChevronDown","cloneElement","Autocomplete","forwardRef"],"mappings":"8lBAOaA,GAAmBC,GACvBC,EAAAA,OAAUD,CAAK,EAGXE,GAAoB,CAACC,EAA6BC,IAAyB,CACtF,MAAMC,EAAqBC,EAAAA,YACxBC,GAAsB,CACjBJ,GAAW,CAACA,EAAQ,SAASI,EAAM,MAAc,GACnDH,EAAA,CAEJ,EACA,CAACA,EAAUD,CAAO,CAAA,EAGpBK,EAAAA,UAAU,KACR,SAAS,iBAAiB,YAAaH,CAAkB,EAClD,IAAM,CACX,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,GACC,CAACA,CAAkB,CAAC,CACzB,ECoFaI,EAAkB,CAA+B,CAC5D,SAAAC,EACA,wBAAAC,EACA,qBAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,aAAAC,EACA,GAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,cAAAC,EACA,aAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,eAAAC,EACA,CAAC,eAAgBC,CACnB,IAAgC,CAC9B,KAAM,CAACC,EAAoBC,CAAqB,EAAIC,EAAAA,WAChD,OAAOlB,GAAe,SAAWA,EAAaD,IAAsBe,GAAgB,QACpF,EAAA,EAEEK,EAAqB,OAAOnB,GAAe,SAAWA,EAAagB,EACnE,CAACI,EAAmBC,CAAoB,EAAIH,EAAAA,SAEhDpB,EAAuBe,EAAQ,CAAC,EAAI,MAAS,EACzCS,EAAWnC,EAAAA,OAAyB,IAAI,EACxCoC,EAActC,GAAoC,IAAI,EACtDuC,EAAarC,EAAAA,OAAyB,IAAI,EAC1CsC,EAAatC,EAAAA,OAAsC,EAAE,EACrD,CAACuC,EAAeC,CAAgB,EAAIT,EAAAA,SAAS,EAAK,EAExD,SAASU,EAAUC,EAAc,CAC/B,OAAOd,EAAa,GAAGA,CAAU,IAAIc,CAAI,GAAK,MAChD,CAEA,MAAMC,EAAe,IAAM,CACzBH,EAAiB,EAAK,EACtBN,EAAqB,MAAS,CAChC,EAEAjC,GAAkBmC,EAAY,QAASO,CAAY,EAEnD,MAAMC,EAAc,CAAC,CAAE,UAAAC,KAAqD,CAC1EL,EAAiB,EAAI,EACjBb,GACF,sBAAsB,IAAM,CAE1BO,EAAqB,CAAE,GAAGP,EAAgB,kBADhBkB,IAAc,QACqB,EAC7DC,EAAqBR,EAAW,QAAQX,EAAe,EAAE,CAAC,CAC5D,CAAC,CAEL,EAEMoB,GAAiBC,GAAmC,CACxD,GAAIlC,EACF,OAAOY,EAAQ,OAAQuB,GAAWnC,EAAakC,EAAYC,CAAM,CAAC,EAGpE,GAAI,CAACD,EACH,OAAOtB,EAGT,MAAMwB,EAAmBF,EAAW,YAAA,EAAc,MAAM,GAAG,GAAK,CAAA,EAChE,OAAOtB,EAAQ,OAAQuB,GACrBC,EAAiB,MAAOC,IACrBF,EAAO,OAASA,EAAO,OAAO,cAAc,SAASE,CAAK,CAAA,CAC7D,CAEJ,EAEMC,EAAoBJ,GACjBrB,GAAkBA,GAAgB,QAAUqB,EAC/CtB,EACAqB,GAAcC,CAAU,EAGxBK,EAAgBD,EAAiBpB,CAAkB,EAEnDsB,EAAsBvD,GAAkB,CAC5CoB,IAAgBpB,CAAK,EACrB+B,EAAsB/B,CAAK,CAC7B,EAEM+C,EAAwBG,GAAsC,CAClE,GAAIA,EAAQ,CACV,MAAMM,EAAaN,EAAO,sBAAA,EACpBO,EAAcnB,EAAW,SAAS,sBAAA,GAA2B,CAAE,IAAK,EAAG,OAAQ,CAAA,GAEnFkB,EAAW,IAAMC,EAAY,KAAOD,EAAW,OAASC,EAAY,SAEpEP,EAAO,eAAe,CAAE,MAAO,SAAA,CAAW,CAE9C,CACF,EAEMQ,EAAgBR,GAA0B,CAC1CA,IACFd,EAAS,SAAS,MAAA,EAClBmB,EAAmBL,EAAO,KAAK,EAC/BxB,IAAWwB,CAAM,GAEnBN,EAAA,CACF,EAEMe,GAAkBC,GAAgD,CACtE,MAAMC,EACJjD,GAAwB,CAACsB,EACrB,EACAoB,EAAc,UAAWJ,GAAWA,GAAUhB,GAAmB,KAAOgB,EAAO,EAAE,EAEjFY,EAAgBR,EAAc,OAEpC,OAAOM,IAAQ,YACXN,GAAeO,GAAS,IAAM,CAAC,GAAKP,EAAc,CAAC,EACnDA,GAAeO,GAASC,GAAiB,CAAC,GAAKR,EAAcQ,EAAgB,CAAC,CACpF,EAEMC,EAAcvB,IAAkB,CAAC,CAACc,EAAc,QAAU,CAAC,CAAC7B,GAE5DuC,GAAuBJ,GAAiC,CAC5D,CAACG,GAAelB,EAAY,CAAE,UAAW,WAAY,EACrD,MAAMoB,EAAaN,GAAeC,CAAG,EAErCzB,EAAqB8B,CAAU,EAC/BA,GAAclB,EAAqBR,EAAW,QAAQ0B,EAAW,EAAE,CAAC,CACtE,EAEMC,GAAiE3D,GAAU,CAE/E,OADAe,IAAiBf,CAAK,EACdA,EAAM,IAAA,CACZ,IAAK,UACL,IAAK,YACHA,EAAM,eAAA,EACNyD,GAAoBzD,EAAM,GAAG,EAC7B,MACF,IAAK,QAAS,CACZ,MAAM4D,EAAiBjC,IAAsBtB,EAAuBe,EAAQ,CAAC,EAAI,QACjFoC,GAAeL,EAAaS,CAAc,EAC1C,CAACJ,GAAelB,EAAY,CAAE,UAAW,WAAY,EACrD,KACF,CACA,IAAK,SACL,IAAK,MACHD,EAAA,EACA,KAAA,CAEN,EAEMwB,GAA8D,GAAM,CACxE,MAAMC,EAAoBhB,EAAiB,EAAE,OAAO,KAAK,EACzDE,EAAmB,EAAE,OAAO,KAAK,EACjCpB,EAAqB,MAAS,EAC9B,CAAC4B,GAAelB,EAAY,CAAE,UAAW,WAAY,EACrDjC,GACEyD,EAAkB,CAAC,GACnBtB,EAAqBR,EAAW,QAAQ8B,EAAkB,CAAC,EAAE,EAAE,CAAC,CACpE,EAEMC,GAAqB/D,GAA0D,CACnFgB,IAAmBhB,CAAK,EACxBwD,EAAcnB,IAAiBC,EAAY,CAAE,UAAW,QAAS,CACnE,EAEM0B,GAAiBhE,GAA0D,CAC/Ec,IAAed,CAAK,EACpB,CAACiC,GAAiBhB,GAAeqB,EAAY,CAAE,UAAW,WAAY,EACtET,EAAS,SAAS,OAAA,CACpB,EAEMoC,GAA2DjE,GAAU,CACzEY,IAAcZ,CAAK,EAEnB,WAAW,IAAM,CAEb,CAAC6B,EAAS,SAAS,SAAS,SAAS,aAAa,GAClD,CAACE,EAAW,SAAS,SAAS,SAAS,aAAa,IAEpDM,EAAA,EAGIlC,GACF6C,EAAmB3B,EAAiBA,EAAe,MAAQ,EAAE,EAGnE,CAAC,CACH,EAEM6C,GAA8B,CAClC,UAAW,OAAOvD,GAAqB,SAAW,GAAGA,CAAgB,KAAOA,CAAA,EAGxEwD,EAA6B,CACjC,aAAczD,EACd,gBAAiB8C,EACjB,cAAerB,EAAU,SAAS,EAClC,GAAI,GAAG1B,CAAE,WACT,IAAKsB,EACL,aAAc,IAAMH,EAAqB,MAAS,EAClD,MAAOjB,EAAmBuD,GAAe,MAAA,EAGrCE,EAAuBzB,GAAc,GAAGlC,CAAE,iBAAiBkC,EAAO,EAAE,GAEpE0B,GAAsB,CAAC1B,EAAWW,IAAoC,CAC1E,MAAMgB,EAAoB,IACxB3B,EAAO,KAAOhB,GAAmB,IACjCC,EAAqB,CAAE,GAAGe,EAAQ,kBAAmB,EAAA,CAAM,EAEvD4B,GACH5B,EAAO,KAAOhB,GAAmB,IAC/B,CAAC,CAACtB,GAAwB,CAACsB,GAAqB2B,IAAU,IAC7D,CAAC3B,GAAmB,kBAEtB,MAAO,CACL,cAAeQ,EAAU,gBAAgBQ,EAAO,EAAE,EAAE,EACpD,GAAIyB,EAAoBzB,CAAM,EAC9B,IAAKA,EAAO,GACZ,YAAa2B,EACb,UAAW,IAAMnB,EAAaR,CAAM,EACpC,IAAM6B,GAAO,CACPA,IACFxC,EAAW,QAAQW,EAAO,EAAE,EAAI6B,EAEpC,EACA,SAAU,GACV,SAAU7B,EAAO,KAAOtB,GAAgB,GACxC,SAAUsB,EAAO,SACjB,YAAA4B,EACA,QAAS5B,EAAO,KAAOhB,GAAmB,IAAM,CAAC,CAACA,GAAmB,iBAAA,CAEzE,EAEM8C,GAAyB,CAC7B,wBAAyB9C,EAAoByC,EAAoBzC,CAAiB,EAAI,OACtF,oBAAqB,OACrB,gBAAiBwC,EAAa,GAC9B,cAAehC,EAAU,OAAO,EAChC,aAAc,MACd,GAAI,GAAG1B,CAAE,SACT,SAAUoD,GACV,YAAaE,GACb,QAASC,GACT,UAAWL,GACX,OAAQM,GACR,IAAKpC,EACL,KAAM,WACN,MAAOH,CAAA,EAGT,MAAO,CACL,GAAAjB,EACA,WAAAgE,GACA,YAAA3C,EACA,cAAAiB,EACA,YAAAS,EACA,cAAAtC,EACA,SAAAf,EACA,wBAAAC,EACA,oBAAAiE,GACA,aAAAF,CAAA,CAEJ,EC7WMO,EAAKC,GAAAA,EAAE,KAAKC,EAAM,EAgBlBC,EAAgB,sBAEhBC,GAAwB,CAC5B,CAAE,UAAAC,EAAW,YAAAC,EAAa,aAAAC,EAAc,GAAGC,CAAA,EAC3CC,IACG,CACH,KAAM,CACJ,GAAA1E,EACA,WAAAgE,EACA,YAAA3C,EACA,cAAAiB,EACA,YAAAS,EACA,cAAAtC,EACA,SAAAf,EACA,wBAAAC,EACA,oBAAAiE,EACA,aAAAF,CAAA,EACEjE,EAAgBgF,CAAoB,EAElCE,EAAoB,CAACzC,EAAWW,IAAkB,CACtD,KAAM,CAAE,IAAAD,EAAK,GAAGgC,GAAqBhB,EAAoB1B,EAAQW,CAAK,EAEtE,OACEgC,EAAAA,IAACC,EAAAA,QAAQ,KAAR,CAAwB,GAAGF,EACzB,SAAAJ,EAAeA,IAAetC,CAAM,EAAIA,EAAO,KAAA,EAD/BU,CAEnB,CAEJ,EAEMmC,EAAcC,GAAgC,CAClD3D,EAAY,QAAU2D,EAClB,OAAON,GAAQ,WACjBA,EAAIM,CAAI,EACCN,IACTA,EAAI,QAAUM,EAElB,EAEMC,EAAoB,IAAM,CAC9B,MAAMC,EAAQX,EAAYP,CAAU,EAIpC,GAFEtE,GAAYC,GAA2Bc,GAAiByE,GAASC,GAAAA,YAAYD,CAAK,EAEpE,CACd,MAAME,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAJ,EAAM,MAAM,aACbL,EAAAA,IAAC,SAAA,CACC,cAAY,iBACZ,KAAK,SACL,UAAWZ,EAAG,GAAGG,CAAa,kBAAkB,EAChD,QAAS,IAAM,CACbJ,EAAW,QAAQ,MAAS,EAC5BA,EAAW,YAAY,MAAS,CAClC,EACA,aAAYrE,EACZ,gBAAeoD,EACf,gBAAeW,EAAa,GAE5B,SAAAmB,EAAAA,IAACU,GAAAA,EAAA,CACC,KAAK,KACL,UAAWtB,EAAG,GAAGG,CAAa,iBAAkB,CAC9C,CAAC,GAAGA,CAAa,oBAAoB,EAAGrB,CAAA,CACzC,CAAA,CAAA,CACH,CAAA,CACF,EACF,EAGF,OAAOyC,eAAaN,EAAO,CAAE,aAAAE,EAAc,CAC7C,CAEA,OAAOF,CACT,EAEA,OACEG,EAAAA,KAAC,MAAA,CAAI,GAAArF,EAAQ,IAAK+E,EAAY,UAAWd,EAAG,CAACG,EAAeE,CAAS,CAAC,EACnE,SAAA,CAAAW,EAAA,EACAlC,GACC8B,EAAAA,IAACC,EAAAA,QAAA,CAAS,GAAGpB,EAAc,UAAWO,EAAG,GAAGG,CAAa,WAAW,EACjE,SAAC9B,EAAc,OAGdA,EAAc,OAAQJ,GAAwB,CAAC,CAACA,CAAM,EAAE,IAAIyC,CAAiB,EAF7EE,EAAAA,IAACC,EAAAA,QAAQ,KAAR,CAAa,eAAc,GAAE,SAAArE,CAAA,CAAc,CAEiC,CAEjF,CAAA,EAEJ,CAEJ,EAGagF,EAAeC,EAAAA,WAAWrB,EAAqB,EAC5DoB,EAAa,YAAc"}

package/dist/{autocomplete-DJ3zbA0m.mjs → autocomplete-B8L-dTmF.mjs}

@@ -1,8 +1,8 @@
 import { jsxs as H, jsx as g, Fragment as de } from "react/jsx-runtime";
 import { useRef as D, useCallback as pe, useEffect as me, useState as U, forwardRef as be, cloneElement as fe } from "react";
 import { l as ve } from "./chevron-down.es-PCIIj6oG.mjs";
-import { L as V } from "./listbox-oDeP8FvH.mjs";
-import { i as _e } from "./text-field-9zPmL99g.mjs";
+import { L as V } from "./listbox-DG4KmQP_.mjs";
+import { i as _e } from "./text-field-BQYzwIrG.mjs";
 import { c as xe } from "./bind-CU-R61T-.mjs";
 const he = {
   "purpur-autocomplete": "_purpur-autocomplete_dgjyz_1",
@@ -225,4 +225,4 @@ export {
   Ie as A,
   ge as u
 };
-//# sourceMappingURL=autocomplete-DJ3zbA0m.mjs.map
+//# sourceMappingURL=autocomplete-B8L-dTmF.mjs.map

package/dist/{autocomplete-DJ3zbA0m.mjs.map → autocomplete-B8L-dTmF.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-DJ3zbA0m.mjs","sources":["../../../components/autocomplete/src/utils.ts","../../../components/autocomplete/src/useAutocomplete.ts","../../../components/autocomplete/src/autocomplete.tsx"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\n\n// Used to \"merge\" \"intersection types\". Used to get comments on the props to the docs.\nexport type Prettify<T> = {\n  [K in keyof T]: T[K];\n} & {};\n\nexport const useRefObject = <T>(value: T): RefObject<T> => {\n  return useRef<T>(value) as RefObject<T>;\n};\n\nexport const useOnClickOutside = (element: HTMLElement | null, callback: () => void) => {\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (element && !element.contains(event.target as Node)) {\n        callback();\n      }\n    },\n    [callback, element]\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [handleClickOutside]);\n};\n","import type { CSSProperties, ReactNode } from \"react\";\nimport { useRef, useState } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport type { ListboxItemProps, ListboxProps } from \"@purpur/listbox\";\n\nimport { useOnClickOutside, useRefObject } from \"./utils\";\n\nexport type AutocompleteOption = {\n  label: string;\n  id: string;\n  value?: string;\n  disabled?: boolean;\n};\n\nexport type InputProps = Omit<BaseProps<\"input\">, \"onFocus\" | \"onMouseDown\"> & {\n  onFocus: (event: React.FocusEvent<HTMLInputElement> | undefined) => void;\n  onMouseDown: (event: React.MouseEvent<HTMLInputElement> | undefined) => void;\n};\n\ntype ComboboxProps = {\n  /*\n   * Set to get combobox features. Use in combination with `noOptionsText`, `comboboxButtonAriaLabel` and Purpur TextField.\n   */\n  combobox: true;\n  /**\n   * An accessible label for the button that toggles the list of options for a combobox.\n   * */\n  comboboxButtonAriaLabel: string;\n  /*\n   * Shown when there are no options to show. Will be displayed inside a listbox item.\n   */\n  noOptionsText: ReactNode;\n};\n\ntype NoComboboxProps = {\n  combobox?: never;\n  comboboxButtonAriaLabel?: never;\n  /*\n   * Shown when there are no options to show. Will be displayed inside a listbox item.\n   */\n  noOptionsText?: ReactNode;\n};\n\nexport type UseAutocompleteResult<T extends AutocompleteOption> = {\n  /*\n   * Set to highlight the first option in the listbox when the input is focused.\n   */\n  highlightFirstOption?: boolean;\n  /*\n   * The default input value. Only to use when the input is uncontrolled.\n   */\n  defaultInputValue?: string;\n  /*\n   * The input value. Use this to control the input value.\n   */\n  inputValue?: string;\n  /*\n   * Invoked for each option. Use to control which options are shown.\n   */\n  filterOption?: (inputValue: string | undefined, option: T) => boolean;\n  /*\n   * Id will be used to prefix id:s of all elements.\n   */\n  id: string;\n  /*\n   * The label of the listbox (dropdown) displaying the options.\n   */\n  listboxLabel: string;\n  /*\n   * The height of the listbox. Number will be interpreted as px value. defaults to `calc(2 * var(--purpur-spacing-1200))`.\n   */\n  listboxMaxHeight?: string | number;\n  /*\n   * NOTE! Always use this instead of onBlur directly on the input element. Event handler invoked on input blur.\n   */\n  onInputBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /*\n   * NOTE! Always use this instead of onChange directly on the input element. Event handler invoked when the input value changes.\n   */\n  onInputChange?: (value: string) => void;\n  /*\n   * NOTE! Always use this instead of onFocus directly on the input element. Event handler invoked on input focus.\n   */\n  onInputFocus?: (event: React.FocusEvent<HTMLInputElement> | undefined) => undefined;\n  /*\n   * NOTE! Always use this instead of onKeyDown directly on the input element. Event handler invoked on input key down.\n   */\n  onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /*\n   * NOTE! Always use this instead of onMouseDown directly on the input element. Event handler invoked on input mouse down.\n   */\n  onInputMouseDown?: (event: React.MouseEvent<HTMLInputElement> | undefined) => undefined;\n  /*\n   * Set to open the listbox when input gets focus.\n   */\n  openOnFocus?: boolean;\n  /*\n   * Event handler invoked when an option is selected.\n   */\n  onSelect?: (option: T | undefined) => void;\n  /*\n   * The list of options. Could include custom props.\n   */\n  options: T[];\n  /*\n   * The selected option.\n   */\n  selectedOption?: T;\n  [\"data-testid\"]?: string;\n} & (ComboboxProps | NoComboboxProps);\n\nexport const useAutocomplete = <T extends AutocompleteOption>({\n  combobox,\n  comboboxButtonAriaLabel,\n  highlightFirstOption,\n  defaultInputValue,\n  inputValue,\n  filterOption,\n  id,\n  listboxLabel,\n  listboxMaxHeight,\n  onInputBlur,\n  onInputChange,\n  onInputFocus,\n  onInputKeyDown,\n  onInputMouseDown,\n  openOnFocus,\n  noOptionsText,\n  onSelect,\n  options,\n  selectedOption,\n  [\"data-testid\"]: dataTestid,\n}: UseAutocompleteResult<T>) => {\n  const [internalInputValue, setInternalInputValue] = useState(\n    ((typeof inputValue === \"string\" ? inputValue : defaultInputValue) || selectedOption?.label) ??\n      \"\"\n  );\n  const definiteInputValue = typeof inputValue === \"string\" ? inputValue : internalInputValue;\n  const [highlightedOption, setHighlightedOption] = useState<\n    (T & { isSetByClickEvent?: false }) | undefined\n  >(highlightFirstOption ? options[0] : undefined);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const internalRef = useRefObject<HTMLDivElement | null>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n  const optionRefs = useRef<Record<string, HTMLLIElement>>({});\n  const [listboxIsOpen, setListboxIsOpen] = useState(false);\n\n  function getTestId(name: string) {\n    return dataTestid ? `${dataTestid}-${name}` : undefined;\n  }\n\n  const closeListbox = () => {\n    setListboxIsOpen(false);\n    setHighlightedOption(undefined);\n  };\n\n  useOnClickOutside(internalRef.current, closeListbox);\n\n  const openListbox = ({ eventType }: { eventType: \"CLICK\" | \"KEYBOARD\" }) => {\n    setListboxIsOpen(true);\n    if (selectedOption) {\n      requestAnimationFrame(() => {\n        const isSetByClickEvent = eventType === \"CLICK\";\n        setHighlightedOption({ ...selectedOption, isSetByClickEvent });\n        scrollOptionIntoView(optionRefs.current[selectedOption.id]);\n      });\n    }\n  };\n\n  const filterOptions = (searchTerm: string | undefined) => {\n    if (filterOption) {\n      return options.filter((option) => filterOption(searchTerm, option));\n    }\n\n    if (!searchTerm) {\n      return options;\n    }\n\n    const searchTermChunks = searchTerm.toUpperCase().split(\" \") || [];\n    return options.filter((option) =>\n      searchTermChunks.every((chunk) =>\n        (option.value || option.label).toUpperCase().includes(chunk)\n      )\n    );\n  };\n\n  const getOptionsToShow = (searchTerm: string | undefined): (T | undefined)[] => {\n    return selectedOption && selectedOption?.label === searchTerm\n      ? options\n      : filterOptions(searchTerm);\n  };\n\n  const optionsToShow = getOptionsToShow(definiteInputValue);\n\n  const populateInputField = (value: string) => {\n    onInputChange?.(value);\n    setInternalInputValue(value);\n  };\n\n  const scrollOptionIntoView = (option: HTMLLIElement | undefined) => {\n    if (option) {\n      const optionRect = option.getBoundingClientRect();\n      const listboxRect = listboxRef.current?.getBoundingClientRect() || { top: 0, bottom: 0 };\n      const isOptionOutsideView =\n        optionRect.top < listboxRect.top || optionRect.bottom > listboxRect.bottom;\n      if (isOptionOutsideView) {\n        option.scrollIntoView({ block: \"nearest\" });\n      }\n    }\n  };\n\n  const selectOption = (option: T | undefined) => {\n    if (option) {\n      inputRef.current?.focus();\n      populateInputField(option.label);\n      onSelect?.(option);\n    }\n    closeListbox();\n  };\n\n  const findNextOption = (key: \"ArrowUp\" | \"ArrowDown\"): T | undefined => {\n    const index =\n      highlightFirstOption && !highlightedOption\n        ? 0\n        : optionsToShow.findIndex((option) => option && highlightedOption?.id === option.id);\n\n    const optionsLength = optionsToShow.length;\n\n    return key === \"ArrowDown\"\n      ? optionsToShow[(index ?? -1) + 1] || optionsToShow[0]\n      : optionsToShow[(index ?? optionsLength) - 1] || optionsToShow[optionsLength - 1];\n  };\n\n  const showListbox = listboxIsOpen && (!!optionsToShow.length || !!noOptionsText);\n\n  const highlightNextOption = (key: \"ArrowUp\" | \"ArrowDown\") => {\n    !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n    const nextOption = findNextOption(key);\n\n    setHighlightedOption(nextOption);\n    nextOption && scrollOptionIntoView(optionRefs.current[nextOption.id]);\n  };\n\n  const handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n    onInputKeyDown?.(event);\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        event.preventDefault(); // Preventing default to not move cursor in input\n        highlightNextOption(event.key);\n        break;\n      case \"Enter\": {\n        const optionToSelect = highlightedOption || (highlightFirstOption ? options[0] : undefined);\n        showListbox && selectOption(optionToSelect);\n        !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n        break;\n      }\n      case \"Escape\":\n      case \"Tab\":\n        closeListbox();\n        break;\n    }\n  };\n\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    const nextOptionsToShow = getOptionsToShow(e.target.value);\n    populateInputField(e.target.value);\n    setHighlightedOption(undefined);\n    !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n    highlightFirstOption &&\n      nextOptionsToShow[0] &&\n      scrollOptionIntoView(optionRefs.current[nextOptionsToShow[0].id]);\n  };\n\n  const handleOnMouseDown = (event: React.MouseEvent<HTMLInputElement> | undefined) => {\n    onInputMouseDown?.(event);\n    showListbox ? closeListbox() : openListbox({ eventType: \"CLICK\" });\n  };\n\n  const handleOnFocus = (event: React.FocusEvent<HTMLInputElement> | undefined) => {\n    onInputFocus?.(event);\n    !listboxIsOpen && openOnFocus && openListbox({ eventType: \"KEYBOARD\" });\n    inputRef.current?.select();\n  };\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {\n    onInputBlur?.(event);\n    // Use a timeout to allow click events on the listbox to fire before this check\n    setTimeout(() => {\n      if (\n        !inputRef.current?.contains(document.activeElement) &&\n        !listboxRef.current?.contains(document.activeElement)\n      ) {\n        closeListbox();\n\n        // If the blur happened due to a click inside the listbox for a combobox, don't reset the value\n        if (combobox) {\n          populateInputField(selectedOption ? selectedOption.label : \"\");\n        }\n      }\n    });\n  };\n\n  const listboxStyle: CSSProperties = {\n    maxHeight: typeof listboxMaxHeight === \"number\" ? `${listboxMaxHeight}px` : listboxMaxHeight,\n  };\n\n  const listboxProps: ListboxProps = {\n    \"aria-label\": listboxLabel,\n    \"aria-expanded\": showListbox,\n    \"data-testid\": getTestId(\"listbox\"),\n    id: `${id}-listbox`,\n    ref: listboxRef,\n    onMouseLeave: () => setHighlightedOption(undefined),\n    style: listboxMaxHeight ? listboxStyle : undefined,\n  };\n\n  const createListboxItemId = (option: T) => `${id}-listbox-item-${option.id}`;\n\n  const getListBoxItemProps = (option: T, index: number): ListboxItemProps => {\n    const handleOnMouseMove = () =>\n      option.id !== highlightedOption?.id &&\n      setHighlightedOption({ ...option, isSetByClickEvent: true });\n\n    const highlighted =\n      (option.id === highlightedOption?.id ||\n        (!!highlightFirstOption && !highlightedOption && index === 0)) &&\n      !highlightedOption?.isSetByClickEvent;\n\n    return {\n      \"data-testid\": getTestId(`listbox-item-${option.id}`),\n      id: createListboxItemId(option),\n      key: option.id,\n      onMouseMove: handleOnMouseMove,\n      onMouseUp: () => selectOption(option),\n      ref: (el) => {\n        if (el) {\n          optionRefs.current[option.id] = el;\n        }\n      },\n      tabIndex: -1,\n      selected: option.id === selectedOption?.id,\n      disabled: option.disabled,\n      highlighted,\n      hovered: option.id === highlightedOption?.id && !!highlightedOption?.isSetByClickEvent,\n    };\n  };\n\n  const inputProps: InputProps = {\n    \"aria-activedescendant\": highlightedOption ? createListboxItemId(highlightedOption) : undefined,\n    \"aria-autocomplete\": \"list\",\n    \"aria-controls\": listboxProps.id,\n    \"data-testid\": getTestId(\"input\"),\n    autoComplete: \"off\",\n    id: `${id}-input`,\n    onChange: handleOnChange,\n    onMouseDown: handleOnMouseDown,\n    onFocus: handleOnFocus,\n    onKeyDown: handleOnKeyDown,\n    onBlur: handleOnBlur,\n    ref: inputRef,\n    role: \"combobox\",\n    value: definiteInputValue,\n  };\n\n  return {\n    id,\n    inputProps,\n    internalRef,\n    optionsToShow,\n    showListbox,\n    noOptionsText,\n    combobox,\n    comboboxButtonAriaLabel,\n    getListBoxItemProps,\n    listboxProps,\n  };\n};\n","import type { ComponentPropsWithRef, ForwardedRef, ReactNode } from \"react\";\nimport React, { cloneElement, forwardRef } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { isTextField } from \"@purpur/text-field\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./autocomplete.module.scss\";\nimport type { AutocompleteOption, UseAutocompleteResult } from \"./useAutocomplete\";\nimport { useAutocomplete } from \"./useAutocomplete\";\nimport type { Prettify } from \"./utils\";\n\nconst cx = c.bind(styles);\n\ntype AutocompleteProps<T extends AutocompleteOption> = Prettify<\n  UseAutocompleteResult<T> & {\n    className?: string;\n    /**\n     * Render the input. `props` are native input props\n     */\n    renderInput: (props: ComponentPropsWithRef<\"input\">) => ReactNode;\n    /**\n     * Invoked for each given option. Use to customize the rendering of the options\n     */\n    renderOption?: (option: T) => ReactNode;\n  }\n>;\n\nconst rootClassName = \"purpur-autocomplete\";\n\nconst AutocompleteComponent = <T extends AutocompleteOption>(\n  { className, renderInput, renderOption, ...useAutocompleteProps }: AutocompleteProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) => {\n  const {\n    id,\n    inputProps,\n    internalRef,\n    optionsToShow,\n    showListbox,\n    noOptionsText,\n    combobox,\n    comboboxButtonAriaLabel,\n    getListBoxItemProps,\n    listboxProps,\n  } = useAutocomplete(useAutocompleteProps);\n\n  const renderListboxItem = (option: T, index: number) => {\n    const { key, ...listboxItemProps } = getListBoxItemProps(option, index);\n\n    return (\n      <Listbox.Item key={key} {...listboxItemProps}>\n        {renderOption ? renderOption?.(option) : option.label}\n      </Listbox.Item>\n    );\n  };\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    internalRef.current = node;\n    if (typeof ref === \"function\") {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  const getInputComponent = () => {\n    const input = renderInput(inputProps);\n    const isCombobox =\n      combobox && comboboxButtonAriaLabel && noOptionsText && input && isTextField(input);\n\n    if (isCombobox) {\n      const endAdornment = (\n        <>\n          {input.props.endAdornment}\n          <button\n            data-testid=\"chevron button\"\n            type=\"button\"\n            className={cx(`${rootClassName}__chevron-button`)}\n            onClick={() => {\n              inputProps.onFocus(undefined);\n              inputProps.onMouseDown(undefined);\n            }}\n            aria-label={comboboxButtonAriaLabel}\n            aria-expanded={showListbox}\n            aria-controls={listboxProps.id}\n          >\n            <IconChevronDown\n              size=\"sm\"\n              className={cx(`${rootClassName}__chevron-icon`, {\n                [`${rootClassName}__chevron-icon--up`]: showListbox,\n              })}\n            />\n          </button>\n        </>\n      );\n\n      return cloneElement(input, { endAdornment });\n    }\n\n    return input;\n  };\n\n  return (\n    <div id={id} ref={setRootRef} className={cx([rootClassName, className])}>\n      {getInputComponent()}\n      {showListbox && (\n        <Listbox {...listboxProps} className={cx(`${rootClassName}__listbox`)}>\n          {!optionsToShow.length ? (\n            <Listbox.Item noninteractive>{noOptionsText}</Listbox.Item>\n          ) : (\n            optionsToShow.filter((option): option is T => !!option).map(renderListboxItem)\n          )}\n        </Listbox>\n      )}\n    </div>\n  );\n};\n\nexport const Autocomplete = forwardRef(AutocompleteComponent);\nAutocomplete.displayName = \"Autocomplete\";\n\nexport type {\n  AutocompleteOption,\n  UseAutocompleteResult as UseAutocompleteOptions,\n} from \"./useAutocomplete\";\nexport { useAutocomplete } from \"./useAutocomplete\";\n"],"names":["useRefObject","value","useRef","useOnClickOutside","element","callback","handleClickOutside","useCallback","event","useEffect","useAutocomplete","combobox","comboboxButtonAriaLabel","highlightFirstOption","defaultInputValue","inputValue","filterOption","id","listboxLabel","listboxMaxHeight","onInputBlur","onInputChange","onInputFocus","onInputKeyDown","onInputMouseDown","openOnFocus","noOptionsText","onSelect","options","selectedOption","dataTestid","internalInputValue","setInternalInputValue","useState","definiteInputValue","highlightedOption","setHighlightedOption","inputRef","internalRef","listboxRef","optionRefs","listboxIsOpen","setListboxIsOpen","getTestId","name","closeListbox","openListbox","eventType","scrollOptionIntoView","filterOptions","searchTerm","option","searchTermChunks","chunk","getOptionsToShow","optionsToShow","populateInputField","optionRect","listboxRect","selectOption","findNextOption","key","index","optionsLength","showListbox","highlightNextOption","nextOption","handleOnKeyDown","optionToSelect","handleOnChange","nextOptionsToShow","handleOnMouseDown","handleOnFocus","handleOnBlur","listboxStyle","listboxProps","createListboxItemId","getListBoxItemProps","handleOnMouseMove","highlighted","el","inputProps","cx","c","styles","rootClassName","AutocompleteComponent","className","renderInput","renderOption","useAutocompleteProps","ref","renderListboxItem","listboxItemProps","jsx","Listbox","setRootRef","node","getInputComponent","input","isTextField","endAdornment","jsxs","Fragment","IconChevronDown","cloneElement","Autocomplete","forwardRef"],"mappings":"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"}
+{"version":3,"file":"autocomplete-B8L-dTmF.mjs","sources":["../../../components/autocomplete/src/utils.ts","../../../components/autocomplete/src/useAutocomplete.ts","../../../components/autocomplete/src/autocomplete.tsx"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\n\n// Used to \"merge\" \"intersection types\". Used to get comments on the props to the docs.\nexport type Prettify<T> = {\n  [K in keyof T]: T[K];\n} & {};\n\nexport const useRefObject = <T>(value: T): RefObject<T> => {\n  return useRef<T>(value) as RefObject<T>;\n};\n\nexport const useOnClickOutside = (element: HTMLElement | null, callback: () => void) => {\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (element && !element.contains(event.target as Node)) {\n        callback();\n      }\n    },\n    [callback, element]\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [handleClickOutside]);\n};\n","import type { CSSProperties, ReactNode } from \"react\";\nimport { useRef, useState } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport type { ListboxItemProps, ListboxProps } from \"@purpur/listbox\";\n\nimport { useOnClickOutside, useRefObject } from \"./utils\";\n\nexport type AutocompleteOption = {\n  label: string;\n  id: string;\n  value?: string;\n  disabled?: boolean;\n};\n\nexport type InputProps = Omit<BaseProps<\"input\">, \"onFocus\" | \"onMouseDown\"> & {\n  onFocus: (event: React.FocusEvent<HTMLInputElement> | undefined) => void;\n  onMouseDown: (event: React.MouseEvent<HTMLInputElement> | undefined) => void;\n};\n\ntype ComboboxProps = {\n  /*\n   * Set to get combobox features. Use in combination with `noOptionsText`, `comboboxButtonAriaLabel` and Purpur TextField.\n   */\n  combobox: true;\n  /**\n   * An accessible label for the button that toggles the list of options for a combobox.\n   * */\n  comboboxButtonAriaLabel: string;\n  /*\n   * Shown when there are no options to show. Will be displayed inside a listbox item.\n   */\n  noOptionsText: ReactNode;\n};\n\ntype NoComboboxProps = {\n  combobox?: never;\n  comboboxButtonAriaLabel?: never;\n  /*\n   * Shown when there are no options to show. Will be displayed inside a listbox item.\n   */\n  noOptionsText?: ReactNode;\n};\n\nexport type UseAutocompleteResult<T extends AutocompleteOption> = {\n  /*\n   * Set to highlight the first option in the listbox when the input is focused.\n   */\n  highlightFirstOption?: boolean;\n  /*\n   * The default input value. Only to use when the input is uncontrolled.\n   */\n  defaultInputValue?: string;\n  /*\n   * The input value. Use this to control the input value.\n   */\n  inputValue?: string;\n  /*\n   * Invoked for each option. Use to control which options are shown.\n   */\n  filterOption?: (inputValue: string | undefined, option: T) => boolean;\n  /*\n   * Id will be used to prefix id:s of all elements.\n   */\n  id: string;\n  /*\n   * The label of the listbox (dropdown) displaying the options.\n   */\n  listboxLabel: string;\n  /*\n   * The height of the listbox. Number will be interpreted as px value. defaults to `calc(2 * var(--purpur-spacing-1200))`.\n   */\n  listboxMaxHeight?: string | number;\n  /*\n   * NOTE! Always use this instead of onBlur directly on the input element. Event handler invoked on input blur.\n   */\n  onInputBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /*\n   * NOTE! Always use this instead of onChange directly on the input element. Event handler invoked when the input value changes.\n   */\n  onInputChange?: (value: string) => void;\n  /*\n   * NOTE! Always use this instead of onFocus directly on the input element. Event handler invoked on input focus.\n   */\n  onInputFocus?: (event: React.FocusEvent<HTMLInputElement> | undefined) => undefined;\n  /*\n   * NOTE! Always use this instead of onKeyDown directly on the input element. Event handler invoked on input key down.\n   */\n  onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /*\n   * NOTE! Always use this instead of onMouseDown directly on the input element. Event handler invoked on input mouse down.\n   */\n  onInputMouseDown?: (event: React.MouseEvent<HTMLInputElement> | undefined) => undefined;\n  /*\n   * Set to open the listbox when input gets focus.\n   */\n  openOnFocus?: boolean;\n  /*\n   * Event handler invoked when an option is selected.\n   */\n  onSelect?: (option: T | undefined) => void;\n  /*\n   * The list of options. Could include custom props.\n   */\n  options: T[];\n  /*\n   * The selected option.\n   */\n  selectedOption?: T;\n  [\"data-testid\"]?: string;\n} & (ComboboxProps | NoComboboxProps);\n\nexport const useAutocomplete = <T extends AutocompleteOption>({\n  combobox,\n  comboboxButtonAriaLabel,\n  highlightFirstOption,\n  defaultInputValue,\n  inputValue,\n  filterOption,\n  id,\n  listboxLabel,\n  listboxMaxHeight,\n  onInputBlur,\n  onInputChange,\n  onInputFocus,\n  onInputKeyDown,\n  onInputMouseDown,\n  openOnFocus,\n  noOptionsText,\n  onSelect,\n  options,\n  selectedOption,\n  [\"data-testid\"]: dataTestid,\n}: UseAutocompleteResult<T>) => {\n  const [internalInputValue, setInternalInputValue] = useState(\n    ((typeof inputValue === \"string\" ? inputValue : defaultInputValue) || selectedOption?.label) ??\n      \"\"\n  );\n  const definiteInputValue = typeof inputValue === \"string\" ? inputValue : internalInputValue;\n  const [highlightedOption, setHighlightedOption] = useState<\n    (T & { isSetByClickEvent?: false }) | undefined\n  >(highlightFirstOption ? options[0] : undefined);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const internalRef = useRefObject<HTMLDivElement | null>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n  const optionRefs = useRef<Record<string, HTMLLIElement>>({});\n  const [listboxIsOpen, setListboxIsOpen] = useState(false);\n\n  function getTestId(name: string) {\n    return dataTestid ? `${dataTestid}-${name}` : undefined;\n  }\n\n  const closeListbox = () => {\n    setListboxIsOpen(false);\n    setHighlightedOption(undefined);\n  };\n\n  useOnClickOutside(internalRef.current, closeListbox);\n\n  const openListbox = ({ eventType }: { eventType: \"CLICK\" | \"KEYBOARD\" }) => {\n    setListboxIsOpen(true);\n    if (selectedOption) {\n      requestAnimationFrame(() => {\n        const isSetByClickEvent = eventType === \"CLICK\";\n        setHighlightedOption({ ...selectedOption, isSetByClickEvent });\n        scrollOptionIntoView(optionRefs.current[selectedOption.id]);\n      });\n    }\n  };\n\n  const filterOptions = (searchTerm: string | undefined) => {\n    if (filterOption) {\n      return options.filter((option) => filterOption(searchTerm, option));\n    }\n\n    if (!searchTerm) {\n      return options;\n    }\n\n    const searchTermChunks = searchTerm.toUpperCase().split(\" \") || [];\n    return options.filter((option) =>\n      searchTermChunks.every((chunk) =>\n        (option.value || option.label).toUpperCase().includes(chunk)\n      )\n    );\n  };\n\n  const getOptionsToShow = (searchTerm: string | undefined): (T | undefined)[] => {\n    return selectedOption && selectedOption?.label === searchTerm\n      ? options\n      : filterOptions(searchTerm);\n  };\n\n  const optionsToShow = getOptionsToShow(definiteInputValue);\n\n  const populateInputField = (value: string) => {\n    onInputChange?.(value);\n    setInternalInputValue(value);\n  };\n\n  const scrollOptionIntoView = (option: HTMLLIElement | undefined) => {\n    if (option) {\n      const optionRect = option.getBoundingClientRect();\n      const listboxRect = listboxRef.current?.getBoundingClientRect() || { top: 0, bottom: 0 };\n      const isOptionOutsideView =\n        optionRect.top < listboxRect.top || optionRect.bottom > listboxRect.bottom;\n      if (isOptionOutsideView) {\n        option.scrollIntoView({ block: \"nearest\" });\n      }\n    }\n  };\n\n  const selectOption = (option: T | undefined) => {\n    if (option) {\n      inputRef.current?.focus();\n      populateInputField(option.label);\n      onSelect?.(option);\n    }\n    closeListbox();\n  };\n\n  const findNextOption = (key: \"ArrowUp\" | \"ArrowDown\"): T | undefined => {\n    const index =\n      highlightFirstOption && !highlightedOption\n        ? 0\n        : optionsToShow.findIndex((option) => option && highlightedOption?.id === option.id);\n\n    const optionsLength = optionsToShow.length;\n\n    return key === \"ArrowDown\"\n      ? optionsToShow[(index ?? -1) + 1] || optionsToShow[0]\n      : optionsToShow[(index ?? optionsLength) - 1] || optionsToShow[optionsLength - 1];\n  };\n\n  const showListbox = listboxIsOpen && (!!optionsToShow.length || !!noOptionsText);\n\n  const highlightNextOption = (key: \"ArrowUp\" | \"ArrowDown\") => {\n    !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n    const nextOption = findNextOption(key);\n\n    setHighlightedOption(nextOption);\n    nextOption && scrollOptionIntoView(optionRefs.current[nextOption.id]);\n  };\n\n  const handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n    onInputKeyDown?.(event);\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        event.preventDefault(); // Preventing default to not move cursor in input\n        highlightNextOption(event.key);\n        break;\n      case \"Enter\": {\n        const optionToSelect = highlightedOption || (highlightFirstOption ? options[0] : undefined);\n        showListbox && selectOption(optionToSelect);\n        !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n        break;\n      }\n      case \"Escape\":\n      case \"Tab\":\n        closeListbox();\n        break;\n    }\n  };\n\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    const nextOptionsToShow = getOptionsToShow(e.target.value);\n    populateInputField(e.target.value);\n    setHighlightedOption(undefined);\n    !showListbox && openListbox({ eventType: \"KEYBOARD\" });\n    highlightFirstOption &&\n      nextOptionsToShow[0] &&\n      scrollOptionIntoView(optionRefs.current[nextOptionsToShow[0].id]);\n  };\n\n  const handleOnMouseDown = (event: React.MouseEvent<HTMLInputElement> | undefined) => {\n    onInputMouseDown?.(event);\n    showListbox ? closeListbox() : openListbox({ eventType: \"CLICK\" });\n  };\n\n  const handleOnFocus = (event: React.FocusEvent<HTMLInputElement> | undefined) => {\n    onInputFocus?.(event);\n    !listboxIsOpen && openOnFocus && openListbox({ eventType: \"KEYBOARD\" });\n    inputRef.current?.select();\n  };\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {\n    onInputBlur?.(event);\n    // Use a timeout to allow click events on the listbox to fire before this check\n    setTimeout(() => {\n      if (\n        !inputRef.current?.contains(document.activeElement) &&\n        !listboxRef.current?.contains(document.activeElement)\n      ) {\n        closeListbox();\n\n        // If the blur happened due to a click inside the listbox for a combobox, don't reset the value\n        if (combobox) {\n          populateInputField(selectedOption ? selectedOption.label : \"\");\n        }\n      }\n    });\n  };\n\n  const listboxStyle: CSSProperties = {\n    maxHeight: typeof listboxMaxHeight === \"number\" ? `${listboxMaxHeight}px` : listboxMaxHeight,\n  };\n\n  const listboxProps: ListboxProps = {\n    \"aria-label\": listboxLabel,\n    \"aria-expanded\": showListbox,\n    \"data-testid\": getTestId(\"listbox\"),\n    id: `${id}-listbox`,\n    ref: listboxRef,\n    onMouseLeave: () => setHighlightedOption(undefined),\n    style: listboxMaxHeight ? listboxStyle : undefined,\n  };\n\n  const createListboxItemId = (option: T) => `${id}-listbox-item-${option.id}`;\n\n  const getListBoxItemProps = (option: T, index: number): ListboxItemProps => {\n    const handleOnMouseMove = () =>\n      option.id !== highlightedOption?.id &&\n      setHighlightedOption({ ...option, isSetByClickEvent: true });\n\n    const highlighted =\n      (option.id === highlightedOption?.id ||\n        (!!highlightFirstOption && !highlightedOption && index === 0)) &&\n      !highlightedOption?.isSetByClickEvent;\n\n    return {\n      \"data-testid\": getTestId(`listbox-item-${option.id}`),\n      id: createListboxItemId(option),\n      key: option.id,\n      onMouseMove: handleOnMouseMove,\n      onMouseUp: () => selectOption(option),\n      ref: (el) => {\n        if (el) {\n          optionRefs.current[option.id] = el;\n        }\n      },\n      tabIndex: -1,\n      selected: option.id === selectedOption?.id,\n      disabled: option.disabled,\n      highlighted,\n      hovered: option.id === highlightedOption?.id && !!highlightedOption?.isSetByClickEvent,\n    };\n  };\n\n  const inputProps: InputProps = {\n    \"aria-activedescendant\": highlightedOption ? createListboxItemId(highlightedOption) : undefined,\n    \"aria-autocomplete\": \"list\",\n    \"aria-controls\": listboxProps.id,\n    \"data-testid\": getTestId(\"input\"),\n    autoComplete: \"off\",\n    id: `${id}-input`,\n    onChange: handleOnChange,\n    onMouseDown: handleOnMouseDown,\n    onFocus: handleOnFocus,\n    onKeyDown: handleOnKeyDown,\n    onBlur: handleOnBlur,\n    ref: inputRef,\n    role: \"combobox\",\n    value: definiteInputValue,\n  };\n\n  return {\n    id,\n    inputProps,\n    internalRef,\n    optionsToShow,\n    showListbox,\n    noOptionsText,\n    combobox,\n    comboboxButtonAriaLabel,\n    getListBoxItemProps,\n    listboxProps,\n  };\n};\n","import type { ComponentPropsWithRef, ForwardedRef, ReactNode } from \"react\";\nimport React, { cloneElement, forwardRef } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { isTextField } from \"@purpur/text-field\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./autocomplete.module.scss\";\nimport type { AutocompleteOption, UseAutocompleteResult } from \"./useAutocomplete\";\nimport { useAutocomplete } from \"./useAutocomplete\";\nimport type { Prettify } from \"./utils\";\n\nconst cx = c.bind(styles);\n\ntype AutocompleteProps<T extends AutocompleteOption> = Prettify<\n  UseAutocompleteResult<T> & {\n    className?: string;\n    /**\n     * Render the input. `props` are native input props\n     */\n    renderInput: (props: ComponentPropsWithRef<\"input\">) => ReactNode;\n    /**\n     * Invoked for each given option. Use to customize the rendering of the options\n     */\n    renderOption?: (option: T) => ReactNode;\n  }\n>;\n\nconst rootClassName = \"purpur-autocomplete\";\n\nconst AutocompleteComponent = <T extends AutocompleteOption>(\n  { className, renderInput, renderOption, ...useAutocompleteProps }: AutocompleteProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) => {\n  const {\n    id,\n    inputProps,\n    internalRef,\n    optionsToShow,\n    showListbox,\n    noOptionsText,\n    combobox,\n    comboboxButtonAriaLabel,\n    getListBoxItemProps,\n    listboxProps,\n  } = useAutocomplete(useAutocompleteProps);\n\n  const renderListboxItem = (option: T, index: number) => {\n    const { key, ...listboxItemProps } = getListBoxItemProps(option, index);\n\n    return (\n      <Listbox.Item key={key} {...listboxItemProps}>\n        {renderOption ? renderOption?.(option) : option.label}\n      </Listbox.Item>\n    );\n  };\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    internalRef.current = node;\n    if (typeof ref === \"function\") {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  const getInputComponent = () => {\n    const input = renderInput(inputProps);\n    const isCombobox =\n      combobox && comboboxButtonAriaLabel && noOptionsText && input && isTextField(input);\n\n    if (isCombobox) {\n      const endAdornment = (\n        <>\n          {input.props.endAdornment}\n          <button\n            data-testid=\"chevron button\"\n            type=\"button\"\n            className={cx(`${rootClassName}__chevron-button`)}\n            onClick={() => {\n              inputProps.onFocus(undefined);\n              inputProps.onMouseDown(undefined);\n            }}\n            aria-label={comboboxButtonAriaLabel}\n            aria-expanded={showListbox}\n            aria-controls={listboxProps.id}\n          >\n            <IconChevronDown\n              size=\"sm\"\n              className={cx(`${rootClassName}__chevron-icon`, {\n                [`${rootClassName}__chevron-icon--up`]: showListbox,\n              })}\n            />\n          </button>\n        </>\n      );\n\n      return cloneElement(input, { endAdornment });\n    }\n\n    return input;\n  };\n\n  return (\n    <div id={id} ref={setRootRef} className={cx([rootClassName, className])}>\n      {getInputComponent()}\n      {showListbox && (\n        <Listbox {...listboxProps} className={cx(`${rootClassName}__listbox`)}>\n          {!optionsToShow.length ? (\n            <Listbox.Item noninteractive>{noOptionsText}</Listbox.Item>\n          ) : (\n            optionsToShow.filter((option): option is T => !!option).map(renderListboxItem)\n          )}\n        </Listbox>\n      )}\n    </div>\n  );\n};\n\n/* @deprecated use `Dropdown` or `SearchField` instead, this is only exported for backwards compatibility and will be removed in a future release */\nexport const Autocomplete = forwardRef(AutocompleteComponent);\nAutocomplete.displayName = \"Autocomplete\";\n\nexport type {\n  AutocompleteOption,\n  UseAutocompleteResult as UseAutocompleteOptions,\n} from \"./useAutocomplete\";\nexport { useAutocomplete } from \"./useAutocomplete\";\n"],"names":["useRefObject","value","useRef","useOnClickOutside","element","callback","handleClickOutside","useCallback","event","useEffect","useAutocomplete","combobox","comboboxButtonAriaLabel","highlightFirstOption","defaultInputValue","inputValue","filterOption","id","listboxLabel","listboxMaxHeight","onInputBlur","onInputChange","onInputFocus","onInputKeyDown","onInputMouseDown","openOnFocus","noOptionsText","onSelect","options","selectedOption","dataTestid","internalInputValue","setInternalInputValue","useState","definiteInputValue","highlightedOption","setHighlightedOption","inputRef","internalRef","listboxRef","optionRefs","listboxIsOpen","setListboxIsOpen","getTestId","name","closeListbox","openListbox","eventType","scrollOptionIntoView","filterOptions","searchTerm","option","searchTermChunks","chunk","getOptionsToShow","optionsToShow","populateInputField","optionRect","listboxRect","selectOption","findNextOption","key","index","optionsLength","showListbox","highlightNextOption","nextOption","handleOnKeyDown","optionToSelect","handleOnChange","nextOptionsToShow","handleOnMouseDown","handleOnFocus","handleOnBlur","listboxStyle","listboxProps","createListboxItemId","getListBoxItemProps","handleOnMouseMove","highlighted","el","inputProps","cx","c","styles","rootClassName","AutocompleteComponent","className","renderInput","renderOption","useAutocompleteProps","ref","renderListboxItem","listboxItemProps","jsx","Listbox","setRootRef","node","getInputComponent","input","isTextField","endAdornment","jsxs","Fragment","IconChevronDown","cloneElement","Autocomplete","forwardRef"],"mappings":"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"}

package/dist/autocomplete.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./autocomplete-B_OBQM2h.js");exports.Autocomplete=e.Autocomplete;exports.useAutocomplete=e.useAutocomplete;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./autocomplete-B421J7CS.js");exports.Autocomplete=e.Autocomplete;exports.useAutocomplete=e.useAutocomplete;
 //# sourceMappingURL=autocomplete.cjs.js.map

package/dist/autocomplete.es.js

@@ -1,4 +1,4 @@
-import { A as t, u } from "./autocomplete-DJ3zbA0m.mjs";
+import { A as t, u } from "./autocomplete-B8L-dTmF.mjs";
 export {
   t as Autocomplete,
   u as useAutocomplete