@tcn/ui 0.9.0 → 0.11.0

package/dist/inputs/phone_number_input/sip_input.js

@@ -0,0 +1,111 @@
+import { jsxs as h, Fragment as v, jsx as e } from "react/jsx-runtime";
+import g, { useLayoutEffect as F } from "react";
+import { NotebookIcon as L } from "@tcn/icons/notebook_icon.js";
+import { Input as R } from "../input/input.js";
+import "../../actions/button/base_button/base_button.js";
+import "../../actions/button/button_group/button_group.js";
+import "../../actions/button/slim_button/slim_button.js";
+import { Button as j } from "../../actions/button/button/button.js";
+import "../../actions/button/select_group/select_group.js";
+import "../../actions/button/select_group/single_select_group.js";
+import "../../actions/toggle/toggle.js";
+import { InputGroup as y } from "../input_group/input_group.js";
+import z from "clsx";
+import { usePhoneContext as V } from "./phone_number_context.js";
+import { PhoneNumberCountrySelectAdapter as _ } from "./phone_number_country_select_adapter.js";
+import { SuggestionList as q } from "../suggestions/suggestion_list.js";
+function eo({
+  disabled: n,
+  countries: k,
+  name: B,
+  "aria-label": S,
+  autoFocus: P,
+  placeholder: b
+}) {
+  const u = g.useRef(null), [i, t] = g.useState(null), l = i != null, {
+    phoneBook: s,
+    setValue: r,
+    setCountry: d,
+    ariaPhoneBookButtonLabel: I,
+    sipAddress: p,
+    setSipAddress: m,
+    focusNumberInput: c,
+    setFocusNumberInput: a
+  } = V(), C = s.length > 0;
+  function N(o) {
+    t(l ? null : o.currentTarget);
+  }
+  function f() {
+    t(null);
+  }
+  function x(o) {
+    f(), a(!0), r(o);
+  }
+  const A = k?.map((o) => ({
+    value: o,
+    label: o
+  })) || [];
+  function E(o) {
+    o !== "SIP" && (m(p), a(!0), r(""), d(o || "US"));
+  }
+  function O(o) {
+    m(o), r(`sip:${o}`);
+  }
+  return F(() => {
+    const o = u.current;
+    o == null || !c || requestAnimationFrame(() => {
+      o.value.length > 0 ? o.select() : o.focus();
+    });
+  }, [c]), /* @__PURE__ */ h(v, { children: [
+    /* @__PURE__ */ h(y, { children: [
+      /* @__PURE__ */ e(
+        _,
+        {
+          value: "SIP",
+          onChange: E,
+          options: A,
+          disabled: n
+        }
+      ),
+      /* @__PURE__ */ e(
+        R,
+        {
+          ref: u,
+          value: p,
+          disabled: n,
+          onChange: O,
+          name: B,
+          "aria-label": S,
+          autoFocus: P,
+          placeholder: b
+        }
+      ),
+      C && /* @__PURE__ */ e(
+        j,
+        {
+          disabled: n,
+          className: z("tcn-input-group-slot", "tcn-phone-number-phone-book"),
+          "aria-label": I,
+          onClick: N,
+          size: "md",
+          children: /* @__PURE__ */ e(L, { size: "md" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      q,
+      {
+        open: l,
+        anchorElement: i,
+        onOptionSelect: x,
+        onClose: f,
+        noSuggestionMessage: "No phone numbers found",
+        children: s
+      }
+    )
+  ] });
+}
+export {
+  eo as SipInput
+};
+//# sourceMappingURL=sip_input.js.map

package/dist/inputs/phone_number_input/sip_input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sip_input.js","sources":["../../../src/inputs/phone_number_input/sip_input.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Input } from '../input/input.js';\nimport { Button } from '../../actions/index.js';\nimport { InputGroup } from '../input_group/input_group.js';\nimport clsx from 'clsx';\nimport { usePhoneContext } from './phone_number_context.js';\nimport type { CountryCode } from 'libphonenumber-js';\nimport {\n  PhoneNumberCountrySelectAdapter,\n  type CountryOption,\n} from './phone_number_country_select_adapter.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\n\nexport interface SipInputProps {\n  onChange: (value: string) => void;\n  countries?: CountryCode[];\n  disabled?: boolean;\n  name?: string;\n  'aria-label'?: string;\n  autoFocus?: boolean;\n  placeholder?: string;\n}\n\nexport function SipInput({\n  disabled,\n  countries,\n  name,\n  'aria-label': ariaLabel,\n  autoFocus,\n  placeholder,\n}: SipInputProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [phoneBookElement, setPhoneBookElement] =\n    React.useState<HTMLButtonElement | null>(null);\n  const isPhoneBookOpen = phoneBookElement != null;\n\n  const {\n    phoneBook: phoneBookOptions,\n    setValue,\n    setCountry,\n    ariaPhoneBookButtonLabel,\n    sipAddress,\n    setSipAddress,\n    focusNumberInput,\n    setFocusNumberInput,\n  } = usePhoneContext();\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    closePhoneBook();\n    setFocusNumberInput(true);\n    setValue(value);\n  }\n\n  const options: CountryOption[] =\n    countries?.map(country => ({\n      value: country,\n      label: country,\n    })) || [];\n\n  function selectCountry(countryCode?: string) {\n    if (countryCode !== 'SIP') {\n      setSipAddress(sipAddress);\n      setFocusNumberInput(true);\n      setValue('');\n      setCountry((countryCode as CountryCode) || 'US');\n    }\n  }\n\n  function updateSipValue(value: string) {\n    setSipAddress(value);\n    setValue(`sip:${value}`);\n  }\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n\n    if (input == null || !focusNumberInput) {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      if (input.value.length > 0) {\n        input.select();\n      } else {\n        input.focus();\n      }\n    });\n  }, [focusNumberInput]);\n\n  return (\n    <>\n      <InputGroup>\n        <PhoneNumberCountrySelectAdapter\n          value=\"SIP\"\n          onChange={selectCountry}\n          options={options}\n          disabled={disabled}\n        />\n        <Input\n          ref={inputRef}\n          value={sipAddress}\n          disabled={disabled}\n          onChange={updateSipValue}\n          name={name}\n          aria-label={ariaLabel}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n        />\n        {showPhoneBook && (\n          <Button\n            disabled={disabled}\n            className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}\n            aria-label={ariaPhoneBookButtonLabel}\n            onClick={togglePhoneBook}\n            size=\"md\"\n          >\n            <NotebookIcon size=\"md\" />\n          </Button>\n        )}\n      </InputGroup>\n      <SuggestionList\n        open={isPhoneBookOpen}\n        anchorElement={phoneBookElement}\n        onOptionSelect={handlePhoneBookOptionSelect}\n        onClose={closePhoneBook}\n        noSuggestionMessage=\"No phone numbers found\"\n      >\n        {phoneBookOptions}\n      </SuggestionList>\n    </>\n  );\n}\n"],"names":["SipInput","disabled","countries","name","ariaLabel","autoFocus","placeholder","inputRef","React","phoneBookElement","setPhoneBookElement","isPhoneBookOpen","phoneBookOptions","setValue","setCountry","ariaPhoneBookButtonLabel","sipAddress","setSipAddress","focusNumberInput","setFocusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","value","options","country","selectCountry","countryCode","updateSipValue","useLayoutEffect","input","jsxs","Fragment","InputGroup","jsx","PhoneNumberCountrySelectAdapter","Input","Button","clsx","NotebookIcon","SuggestionList"],"mappings":";;;;;;;;;;;;;;;;AAwBO,SAASA,GAAS;AAAA,EACvB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,aAAAC;AACF,GAAkB;AAChB,QAAMC,IAAWC,EAAM,OAAyB,IAAI,GAC9C,CAACC,GAAkBC,CAAmB,IAC1CF,EAAM,SAAmC,IAAI,GACzCG,IAAkBF,KAAoB,MAEtC;AAAA,IACJ,WAAWG;AAAA,IACX,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAgBT,EAAiB,SAAS;AAEhD,WAASU,EAAgBC,GAAwC;AAC/D,IACEb,EADEC,IACkB,OAEAY,EAAE,aAFE;AAAA,EAI5B;AAEA,WAASC,IAAiB;AACxB,IAAAd,EAAoB,IAAI;AAAA,EAC1B;AAEA,WAASe,EAA4BC,GAAe;AAClD,IAAAF,EAAA,GACAL,EAAoB,EAAI,GACxBN,EAASa,CAAK;AAAA,EAChB;AAEA,QAAMC,IACJzB,GAAW,IAAI,CAAA0B,OAAY;AAAA,IACzB,OAAOA;AAAA,IACP,OAAOA;AAAA,EAAA,EACP,KAAK,CAAA;AAET,WAASC,EAAcC,GAAsB;AAC3C,IAAIA,MAAgB,UAClBb,EAAcD,CAAU,GACxBG,EAAoB,EAAI,GACxBN,EAAS,EAAE,GACXC,EAAYgB,KAA+B,IAAI;AAAA,EAEnD;AAEA,WAASC,EAAeL,GAAe;AACrC,IAAAT,EAAcS,CAAK,GACnBb,EAAS,OAAOa,CAAK,EAAE;AAAA,EACzB;AAEA,SAAAM,EAAgB,MAAM;AACpB,UAAMC,IAAQ1B,EAAS;AAEvB,IAAI0B,KAAS,QAAQ,CAACf,KAItB,sBAAsB,MAAM;AAC1B,MAAIe,EAAM,MAAM,SAAS,IACvBA,EAAM,OAAA,IAENA,EAAM,MAAA;AAAA,IAEV,CAAC;AAAA,EACH,GAAG,CAACf,CAAgB,CAAC,GAGnB,gBAAAgB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAUT;AAAA,UACV,SAAAF;AAAA,UACA,UAAA1B;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,gBAAAoC;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKhC;AAAA,UACL,OAAOS;AAAA,UACP,UAAAf;AAAA,UACA,UAAU8B;AAAA,UACV,MAAA5B;AAAA,UACA,cAAYC;AAAA,UACZ,WAAAC;AAAA,UACA,aAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDe,KACC,gBAAAgB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,UAAAvC;AAAA,UACA,WAAWwC,EAAK,wBAAwB,6BAA6B;AAAA,UACrE,cAAY1B;AAAA,UACZ,SAASO;AAAA,UACT,MAAK;AAAA,UAEL,UAAA,gBAAAe,EAACK,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B,GAEJ;AAAA,IACA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,MAAMhC;AAAA,QACN,eAAeF;AAAA,QACf,gBAAgBgB;AAAA,QAChB,SAASD;AAAA,QACT,qBAAoB;AAAA,QAEnB,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/inputs/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/inputs/select/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAOlE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,oGA2IjB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/inputs/select/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAOlE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,oGA0IjB,CAAC"}

package/dist/inputs/select/select.js

@@ -77,7 +77,7 @@ const he = F.forwardRef(function({
       W,
       {
         ref: B,
-        className: L(T, "tcn-select", O.select),
+        className: L(T, "tcn-select", "tcn-control", O.select),
         width: "100%",
         ...D,
         hAlign: "start",
@@ -89,9 +89,10 @@ const he = F.forwardRef(function({
         children: /* @__PURE__ */ u("span", { className: L(O.selectedLabel, "tcn-select-selected-label"), children: k })
       }
     ),
-    y && /* @__PURE__ */ u(
+    /* @__PURE__ */ u(
       Q,
       {
+        open: y,
         anchorElement: q,
         onClose: N,
         value: "",

package/dist/inputs/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={clsx(className, 'tcn-select', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>\n          {selectedLabel}\n        </span>\n      </Button>\n      {isSuggestionsOpen && (\n        <SuggestionList\n          anchorElement={anchorElement}\n          onClose={handleClose}\n          value={''}\n          scrollToValue={value || ''}\n          trimCustomInput={trimCustomInput}\n          onOptionSelect={handleSelection}\n          noSuggestionMessage={noOptionMatchedMessage}\n        >\n          {children}\n        </SuggestionList>\n      )}\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={clsx(className, 'tcn-select', 'tcn-control', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>\n          {selectedLabel}\n        </span>\n      </Button>\n      <SuggestionList\n        open={isSuggestionsOpen}\n        anchorElement={anchorElement}\n        onClose={handleClose}\n        value={''}\n        scrollToValue={value || ''}\n        trimCustomInput={trimCustomInput}\n        onOptionSelect={handleSelection}\n        noSuggestionMessage={noOptionMatchedMessage}\n      >\n        {children}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"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"}

package/dist/inputs/suggestions/suggestion_list.d.ts

@@ -1,15 +1,18 @@
 import { default as React } from 'react';
 export interface SuggestionListProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
     value?: string;
+    initialSearchValue?: string;
     scrollToValue?: string;
     anchorElement: HTMLElement | null;
+    open?: boolean;
     children?: React.ReactNode;
     onChange?: (value: string) => void;
     onOptionSelect?: (value: string, label: string | undefined, isSuggestion: boolean, obfuscate: boolean) => void;
     noSuggestionMessage?: React.ReactNode;
     trimCustomInput?: boolean;
     haveValueAsOption?: boolean;
+    restoreFocus?: boolean;
     onClose?: (inputValue: string, cursorStartPosition: number | null, cursorEndPosition: number | null) => void;
 }
-export declare function SuggestionList({ value, scrollToValue, anchorElement, children, onOptionSelect, noSuggestionMessage, onClose, onChange, onKeyUp, onKeyDown, trimCustomInput, haveValueAsOption, ...props }: SuggestionListProps): import("react/jsx-runtime").JSX.Element;
+export declare function SuggestionList({ value, initialSearchValue: searchValue, scrollToValue, anchorElement, open, children, onOptionSelect, noSuggestionMessage, onClose, onChange, onKeyUp, onKeyDown, trimCustomInput, haveValueAsOption, restoreFocus, ...props }: SuggestionListProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=suggestion_list.d.ts.map

package/dist/inputs/suggestions/suggestion_list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion_list.d.ts","sourceRoot":"","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,YAAY,EAAE,OAAO,EACrB,SAAS,EAAE,OAAO,KACf,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,CACR,UAAU,EAAE,MAAM,EAClB,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAC7B,IAAI,CAAC;CACX;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,cAAc,EACd,mBAAwC,EACxC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,iBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CA0XrB"}
+{"version":3,"file":"suggestion_list.d.ts","sourceRoot":"","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,YAAY,EAAE,OAAO,EACrB,SAAS,EAAE,OAAO,KACf,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,CACR,UAAU,EAAE,MAAM,EAClB,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAC7B,IAAI,CAAC;CACX;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAU,EACV,kBAAkB,EAAE,WAAW,EAC/B,aAAa,EACb,aAAa,EACb,IAAY,EACZ,QAAQ,EACR,cAAc,EACd,mBAAwC,EACxC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,iBAAyB,EACzB,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAyYrB"}

package/dist/inputs/suggestions/suggestion_list.js

@@ -1,82 +1,88 @@
-import { jsx as r, jsxs as N, Fragment as ce } from "react/jsx-runtime";
-import { BodyText as ae } from "../../typography/body_text/body_text.js";
+import { jsx as r, jsxs as P, Fragment as fe } from "react/jsx-runtime";
+import { BodyText as de } from "../../typography/body_text/body_text.js";
 import "../../typography/callout/callout.js";
 import "../../typography/caption/caption.js";
 import "../../typography/footnote/footnote.js";
 import "../../typography/headline/headline.js";
 import "../../typography/subheadline/subheadline.js";
 import "../../typography/title/title.js";
-import { VStack as O } from "../../stacks/v_stack.js";
-import { ZStack as ue } from "../../stacks/z_stack.js";
-import { clsx as R } from "clsx";
-import { Children as pe, isValidElement as de, useState as a, useRef as T, useLayoutEffect as S } from "react";
+import { VStack as W } from "../../stacks/v_stack.js";
+import { ZStack as ge } from "../../stacks/z_stack.js";
+import { clsx as D } from "clsx";
+import { Children as he, isValidElement as me, useState as a, useRef as F, useLayoutEffect as b } from "react";
 import "../../utils/click_away_listener.js";
-import { FocusRedirect as fe } from "../../utils/focus_redirect.js";
+import { FocusRedirect as we } from "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "../../draggable.module-BgelQsuJ.js";
-import { SuggestionItem as ge } from "./suggestion_item.js";
-import { Option as U } from "../options/option.js";
+import { SuggestionItem as be } from "./suggestion_item.js";
+import { Option as $ } from "../options/option.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
-import { Button as he } from "../../actions/button/button/button.js";
+import { Button as xe } from "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
 import "../../actions/toggle/toggle.js";
-import { Popper as me } from "../../overlay/popper/legacy/popper.js";
-import '../../suggestion_list.css';const we = "_suggestion-list_711fb17", be = "_input_a0df060", A = { "suggestion-list": we, input: be }, I = 50, xe = 50;
-function Xe({
-  value: D = "",
+import { Popper as Le } from "../../overlay/popper/legacy/popper.js";
+import '../../suggestion_list.css';const ke = "_suggestion-list_711fb17", ye = "_input_a0df060", H = { "suggestion-list": ke, input: ye }, I = 50, Se = 50;
+function Qe({
+  value: _ = "",
+  initialSearchValue: B,
   scrollToValue: g,
   anchorElement: l,
-  children: V,
+  open: M = !1,
+  children: j,
   onOptionSelect: h,
-  noSuggestionMessage: P = "-- No Matches --",
-  onClose: b,
-  onChange: F,
-  onKeyUp: H,
-  onKeyDown: _,
-  trimCustomInput: W = !1,
-  haveValueAsOption: $ = !1,
-  ...j
+  noSuggestionMessage: q = "-- No Matches --",
+  onClose: x,
+  onChange: K,
+  onKeyUp: E,
+  onKeyDown: N,
+  trimCustomInput: Z = !1,
+  haveValueAsOption: X = !1,
+  restoreFocus: z = !0,
+  ...G
 }) {
-  const x = pe.toArray(V).filter(
-    (e) => de(e) && e.type === U
-  ), [L, q] = a(() => {
+  const L = he.toArray(j).filter(
+    (e) => me(e) && e.type === $
+  ), [k, J] = a(() => {
     if (g != null) {
-      const e = x.findIndex((o) => o.props.value === g);
+      const e = L.findIndex((i) => i.props.value === g);
       if (e !== -1)
         return e;
     }
     return -1;
-  }), M = T(""), [Z, B] = a(I), [f, k] = a(L), [m, X] = a(D), c = T(null), [z, G] = a(x.length), [n, E] = a(
-    () => C(D, I)
-  ), [J, Q] = a(), [Y, ee] = a();
-  function te(e) {
-    const o = e.key, t = e.currentTarget, s = M.current = o;
-    if (M.current = "", s)
-      switch (o) {
+  }), C = F(""), v = F(!1), [Q, O] = a(I), [d, y] = a(k), [m, T] = a(_), c = F(null), [Y, ee] = a(L.length), [n, U] = a(
+    () => R(_, I)
+  ), [te, se] = a(), [ne, ie] = a();
+  function oe(e) {
+    if (!v.current)
+      return;
+    v.current = !1;
+    const i = e.key, t = e.currentTarget, s = C.current = i;
+    if (C.current = "", s)
+      switch (i) {
         case "Enter": {
-          if (n[f] == null) {
-            const p = W ? t.value.trim() : t.value;
+          if (n[d] == null) {
+            const p = Z ? t.value.trim() : t.value;
             if (p === "")
               return;
-            const y = p.toLocaleLowerCase(), i = x.find(
-              (v) => v.props.value.toLocaleLowerCase() === y || v.props.label != null && v.props.label.toLocaleLowerCase() === y
-            ), K = i != null, d = i?.props.label || p, le = i?.props.value || p;
+            const S = p.toLocaleLowerCase(), o = L.find(
+              (A) => A.props.value.toLocaleLowerCase() === S || A.props.label != null && A.props.label.toLocaleLowerCase() === S
+            ), V = o != null, f = o?.props.label || p, pe = o?.props.value || p;
             requestAnimationFrame(() => {
               h && h(
-                le,
-                d,
-                K,
-                i?.props.obfuscate ?? !1
+                pe,
+                f,
+                V,
+                o?.props.obfuscate ?? !1
               );
             });
             break;
           }
-          const u = n[f].props;
+          const u = n[d].props;
           if (u.disabled)
             break;
           requestAnimationFrame(() => {
@@ -90,17 +96,17 @@ function Xe({
           break;
         }
         case "Escape": {
-          b && b(t.value, t.selectionStart, t.selectionEnd);
+          x && x(t.value, t.selectionStart, t.selectionEnd);
           break;
         }
       }
-    H && H(e);
+    E && E(e);
   }
-  function se(e) {
-    const o = e.key;
-    switch (M.current = o, o) {
+  function re(e) {
+    const i = e.key;
+    switch (C.current = i, v.current = !0, i) {
       case "ArrowDown": {
-        let t = f + 1;
+        let t = d + 1;
         for (; t < n.length && n[t]?.props.disabled; )
           t++;
         if (t === n.length) {
@@ -108,13 +114,13 @@ function Xe({
             t++;
           t === n.length && (t = -1);
         }
-        k(t), e.preventDefault();
+        y(t), e.preventDefault();
         break;
       }
       case "Tab": {
         let t = 1;
         e.shiftKey && (t = -1);
-        let s = f + t;
+        let s = d + t;
         if (t > 0)
           for (; s < n.length && n[s]?.props.disabled; )
             s++;
@@ -130,11 +136,11 @@ function Xe({
             s--;
           s === -1 && (s = -1);
         }
-        k(s), e.preventDefault();
+        y(s), e.preventDefault();
         break;
       }
       case "ArrowUp": {
-        let t = f - 1;
+        let t = d - 1;
         for (; t >= 0 && n[t]?.props.disabled; )
           t--;
         if (t === -1) {
@@ -142,112 +148,115 @@ function Xe({
             t--;
           t === -1 && (t = -1);
         }
-        k(t), e.preventDefault();
+        y(t), e.preventDefault();
         break;
       }
     }
-    _ && _(e);
+    N && N(e);
   }
-  function C(e, o) {
-    const t = x.filter((s) => {
-      const w = s.props, u = String(w.label).toLocaleLowerCase(), p = w.keywords?.map((d) => d.toLocaleLowerCase()) || [], y = String(w.value).toLocaleLowerCase(), i = e.toLocaleLowerCase();
-      return w.obfuscate ?? !1 ? u.includes(i) || p.some((d) => d.includes(i)) : u.includes(i) || p.some((d) => d.includes(i)) || y.includes(i);
+  function R(e, i) {
+    const t = L.filter((s) => {
+      const w = s.props, u = String(w.label).toLocaleLowerCase(), p = w.keywords?.map((f) => f.toLocaleLowerCase()) || [], S = String(w.value).toLocaleLowerCase(), o = e.toLocaleLowerCase();
+      return w.obfuscate ?? !1 ? u.includes(o) || p.some((f) => f.includes(o)) : u.includes(o) || p.some((f) => f.includes(o)) || S.includes(o);
     });
-    return $ && e.trim().length > 0 && !t.some((s) => s.props.value === e) && t.unshift(
-      /* @__PURE__ */ r(U, { value: e, label: e, keywords: [e], children: e }, "value")
-    ), G(t.length), t.slice(0, o);
+    return X && e.trim().length > 0 && !t.some((s) => s.props.value === e) && t.unshift(
+      /* @__PURE__ */ r($, { value: e, label: e, keywords: [e], children: e }, "value")
+    ), ee(t.length), t.slice(0, i);
   }
-  function ne() {
+  function le() {
     const e = c.current;
     e?.focus();
   }
-  function oe() {
+  function ce() {
     const e = c.current;
-    e != null && b && b(e.value, e.selectionStart, e.selectionEnd);
+    e != null && x && x(e.value, e.selectionStart, e.selectionEnd);
   }
-  function ie(e) {
-    const o = e.currentTarget;
-    B(I), X(e.target.value);
-    const t = C(o.value, I);
-    E(t), F && F(e.target.value);
+  function ae(e) {
+    const i = e.currentTarget;
+    O(I), T(e.target.value);
+    const t = R(i.value, I);
+    U(t), K && K(e.target.value);
   }
-  function re() {
-    const e = Z + xe;
-    B(e);
-    const o = C(m, e);
-    E(o);
+  function ue() {
+    const e = Q + Se;
+    O(e);
+    const i = R(m, e);
+    U(i);
   }
-  return S(() => {
+  return b(() => {
     const e = c.current;
-    e != null && e.value.length > 0 ? e.select() : e?.focus();
-  }, []), S(() => {
+    M && (e != null && e.value.length > 0 ? e.select() : e?.focus());
+  }, [M]), b(() => {
     if (l != null) {
       const e = l.getBoundingClientRect();
-      Q(`${e.width}px`), ee(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
+      se(`${e.width}px`), ie(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
     }
-  }, [l]), S(() => {
+  }, [l]), b(() => {
     if (g != null) {
       const e = n.findIndex(
-        (o) => o.props.value === g
+        (i) => i.props.value === g
       );
-      q(e);
+      J(e);
     }
-  }, [n, g]), S(() => {
-    k(m === "" ? L : -1);
-  }, [m, L]), /* @__PURE__ */ r(
-    me,
+  }, [n, g]), b(() => {
+    y(m === "" ? k : -1);
+  }, [m, k]), b(() => {
+    T(B ?? "");
+  }, [B]), /* @__PURE__ */ r(
+    Le,
     {
-      open: !0,
+      open: M,
       anchorElement: l,
-      onClose: oe,
+      onClose: ce,
       verticalAnchor: "top",
       verticalOrigin: "top",
       verticalOffset: -4,
-      children: /* @__PURE__ */ N(
-        O,
+      restoreFocus: z,
+      children: /* @__PURE__ */ P(
+        W,
         {
-          minHeight: `calc(${Y}, 8px)`,
+          minHeight: `calc(${ne}, 8px)`,
           maxHeight: "300px",
-          minWidth: J,
+          minWidth: te,
           width: "auto",
           hAlign: "start",
-          className: R(A["suggestion-list"], "tcn-suggestion-list"),
+          className: D(H["suggestion-list"], "tcn-suggestion-list"),
           children: [
             /* @__PURE__ */ r(
               "input",
               {
                 ref: c,
                 value: m,
-                onKeyUp: te,
-                onKeyDown: se,
-                onChange: ie,
-                className: R(A.input, "tcn-suggestion-list-search-input"),
-                ...j
+                onKeyUp: oe,
+                onKeyDown: re,
+                onChange: ae,
+                className: D(H.input, "tcn-suggestion-list-search-input"),
+                ...G
               },
               -1
             ),
-            /* @__PURE__ */ N(O, { children: [
-              n.map((e, o) => /* @__PURE__ */ r(
-                ge,
+            /* @__PURE__ */ P(W, { children: [
+              n.map((e, i) => /* @__PURE__ */ r(
+                be,
                 {
                   option: e,
-                  isSelected: o === L && m !== "",
-                  isFocused: o === f,
+                  isSelected: i === k && m !== "",
+                  isFocused: i === d,
                   onClick: h
                 },
-                o
+                i
               )),
-              z > n.length && /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ r(he, { marginBlock: "8px", hierarchy: "tertiary", onClick: re, children: "Show More" }) })
+              Y > n.length && /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ r(xe, { marginBlock: "8px", hierarchy: "tertiary", onClick: ue, children: "Show More" }) })
             ] }),
             n.length === 0 && /* @__PURE__ */ r(
-              ue,
+              ge,
               {
                 padding: "8px",
-                className: R(A["no-results"], "tcn-suggestion-list-no-results"),
-                children: /* @__PURE__ */ r(ae, { children: P })
+                className: D(H["no-results"], "tcn-suggestion-list-no-results"),
+                children: /* @__PURE__ */ r(de, { children: q })
               }
             ),
-            /* @__PURE__ */ r(fe, { onRedirect: ne }, n.length + 1)
+            /* @__PURE__ */ r(we, { onRedirect: le }, n.length + 1)
           ]
         }
       )
@@ -255,6 +264,6 @@ function Xe({
   );
 }
 export {
-  Xe as SuggestionList
+  Qe as SuggestionList
 };
 //# sourceMappingURL=suggestion_list.js.map