@tcn/ui 0.10.0 → 0.12.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,2CA4ZrB"}

package/dist/inputs/suggestions/suggestion_list.js

@@ -1,106 +1,115 @@
-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 j, Fragment as de } from "react/jsx-runtime";
+import { BodyText as ge } 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 q } from "../../stacks/v_stack.js";
+import { ZStack as he } from "../../stacks/z_stack.js";
+import { clsx as H } from "clsx";
+import Z, { Children as me, isValidElement as we, useState as a, useRef as B, useLayoutEffect as h } from "react";
 import "../../utils/click_away_listener.js";
-import { FocusRedirect as fe } from "../../utils/focus_redirect.js";
+import { FocusRedirect as be } 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 xe } from "./suggestion_item.js";
+import { Option as X } 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 ke } 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 = "",
-  scrollToValue: g,
+import { Popper as Le } from "../../overlay/popper/legacy/popper.js";
+import '../../suggestion_list.css';const ye = "_suggestion-list_711fb17", Se = "_input_a0df060", K = { "suggestion-list": ye, input: Se }, C = 50, Me = 50;
+function Ye({
+  value: R = "",
+  initialSearchValue: E,
+  scrollToValue: m,
   anchorElement: l,
-  children: V,
-  onOptionSelect: h,
-  noSuggestionMessage: P = "-- No Matches --",
-  onClose: b,
-  onChange: F,
-  onKeyUp: H,
-  onKeyDown: _,
-  trimCustomInput: W = !1,
-  haveValueAsOption: $ = !1,
-  ...j
+  open: v = !1,
+  children: N,
+  onOptionSelect: w,
+  noSuggestionMessage: z = "-- No Matches --",
+  onClose: L,
+  onChange: O,
+  onKeyUp: T,
+  onKeyDown: U,
+  trimCustomInput: G = !1,
+  haveValueAsOption: P = !1,
+  restoreFocus: J = !0,
+  ...Q
 }) {
-  const x = pe.toArray(V).filter(
-    (e) => de(e) && e.type === U
-  ), [L, q] = a(() => {
-    if (g != null) {
-      const e = x.findIndex((o) => o.props.value === g);
+  const b = Z.useMemo(
+    () => me.toArray(N).filter(
+      (e) => we(e) && e.type === X
+    ),
+    [N]
+  ), [y, Y] = a(() => {
+    if (m != null) {
+      const e = b.findIndex((o) => o.props.value === m);
       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)
+  }), A = B(""), _ = B(!1), [ee, V] = a(C), [d, S] = a(y), [x, W] = a(R), c = B(null), [te, se] = a(b.length), [n, D] = a(
+    () => []
+  ), [ne, oe] = a(), [ie, re] = a();
+  function le(e) {
+    if (!_.current)
+      return;
+    _.current = !1;
+    const o = e.key, t = e.currentTarget, s = A.current = o;
+    if (A.current = "", s)
       switch (o) {
         case "Enter": {
-          if (n[f] == null) {
-            const p = W ? t.value.trim() : t.value;
-            if (p === "")
+          if (n[d] == null) {
+            const u = G ? t.value.trim() : t.value;
+            if (u === "")
               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 k = u.toLocaleLowerCase(), g = b.find(
+              (F) => F.props.value.toLocaleLowerCase() === k || F.props.label != null && F.props.label.toLocaleLowerCase() === k
+            ), p = g != null, $ = g?.props.label || u, f = g?.props.value || u;
             requestAnimationFrame(() => {
-              h && h(
-                le,
-                d,
-                K,
-                i?.props.obfuscate ?? !1
+              w && w(
+                f,
+                $,
+                p,
+                g?.props.obfuscate ?? !1
               );
             });
             break;
           }
-          const u = n[f].props;
-          if (u.disabled)
+          const i = n[d].props;
+          if (i.disabled)
             break;
           requestAnimationFrame(() => {
-            h && h(
-              u.value,
-              u.label,
+            w && w(
+              i.value,
+              i.label,
               !0,
-              u.obfuscate ?? !1
+              i.obfuscate ?? !1
             );
           });
           break;
         }
         case "Escape": {
-          b && b(t.value, t.selectionStart, t.selectionEnd);
+          L && L(t.value, t.selectionStart, t.selectionEnd);
           break;
         }
       }
-    H && H(e);
+    T && T(e);
   }
-  function se(e) {
+  function ce(e) {
     const o = e.key;
-    switch (M.current = o, o) {
+    switch (A.current = o, _.current = !0, o) {
       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 +117,13 @@ function Xe({
             t++;
           t === n.length && (t = -1);
         }
-        k(t), e.preventDefault();
+        S(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 +139,11 @@ function Xe({
             s--;
           s === -1 && (s = -1);
         }
-        k(s), e.preventDefault();
+        S(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 +151,130 @@ function Xe({
             t--;
           t === -1 && (t = -1);
         }
-        k(t), e.preventDefault();
+        S(t), e.preventDefault();
         break;
       }
     }
-    _ && _(e);
+    U && U(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);
-    });
-    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);
-  }
-  function ne() {
+  const M = Z.useCallback(
+    function(o, t) {
+      const s = b.filter((I) => {
+        const i = I.props, u = String(i.label).toLocaleLowerCase(), k = i.keywords?.map((f) => f.toLocaleLowerCase()) || [], g = String(i.value).toLocaleLowerCase(), p = o.toLocaleLowerCase();
+        return i.obfuscate ?? !1 ? u.includes(p) || k.some((f) => f.includes(p)) : u.includes(p) || k.some((f) => f.includes(p)) || g.includes(p);
+      });
+      return P && o.trim().length > 0 && !s.some((I) => I.props.value === o) && s.unshift(
+        /* @__PURE__ */ r(X, { value: o, label: o, keywords: [o], children: o }, "value")
+      ), se(s.length), s.slice(0, t);
+    },
+    [b, P]
+  );
+  function ae() {
     const e = c.current;
     e?.focus();
   }
-  function oe() {
+  function ue() {
     const e = c.current;
-    e != null && b && b(e.value, e.selectionStart, e.selectionEnd);
+    e != null && L && L(e.value, e.selectionStart, e.selectionEnd);
   }
-  function ie(e) {
+  function pe(e) {
     const o = e.currentTarget;
-    B(I), X(e.target.value);
-    const t = C(o.value, I);
-    E(t), F && F(e.target.value);
+    V(C), W(e.target.value);
+    const t = M(o.value, C);
+    D(t), O && O(e.target.value);
   }
-  function re() {
-    const e = Z + xe;
-    B(e);
-    const o = C(m, e);
-    E(o);
+  function fe() {
+    const e = ee + Me;
+    V(e);
+    const o = M(x, e);
+    D(o);
   }
-  return S(() => {
+  return h(() => {
     const e = c.current;
-    e != null && e.value.length > 0 ? e.select() : e?.focus();
-  }, []), S(() => {
+    v && (e != null && e.value.length > 0 ? e.select() : e?.focus());
+  }, [v]), h(() => {
     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);
+      oe(`${e.width}px`), re(`${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(() => {
-    if (g != null) {
+  }, [l]), h(() => {
+    if (m != null) {
       const e = n.findIndex(
-        (o) => o.props.value === g
+        (o) => o.props.value === m
       );
-      q(e);
+      Y(e);
     }
-  }, [n, g]), S(() => {
-    k(m === "" ? L : -1);
-  }, [m, L]), /* @__PURE__ */ r(
-    me,
+  }, [n, m]), h(() => {
+    S(x === "" ? y : -1);
+  }, [x, y]), h(() => {
+    W(E ?? "");
+  }, [E]), h(() => {
+    const e = M(R, C);
+    D(e);
+  }, [R, M]), /* @__PURE__ */ r(
+    Le,
     {
-      open: !0,
+      open: v,
       anchorElement: l,
-      onClose: oe,
+      onClose: ue,
       verticalAnchor: "top",
       verticalOrigin: "top",
       verticalOffset: -4,
-      children: /* @__PURE__ */ N(
-        O,
+      restoreFocus: J,
+      children: /* @__PURE__ */ j(
+        q,
         {
-          minHeight: `calc(${Y}, 8px)`,
+          minHeight: `calc(${ie}, 8px)`,
           maxHeight: "300px",
-          minWidth: J,
+          minWidth: ne,
           width: "auto",
           hAlign: "start",
-          className: R(A["suggestion-list"], "tcn-suggestion-list"),
+          className: H(K["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
+                value: x,
+                onKeyUp: le,
+                onKeyDown: ce,
+                onChange: pe,
+                className: H(K.input, "tcn-suggestion-list-search-input"),
+                ...Q
               },
               -1
             ),
-            /* @__PURE__ */ N(O, { children: [
+            /* @__PURE__ */ j(q, { children: [
               n.map((e, o) => /* @__PURE__ */ r(
-                ge,
+                xe,
                 {
                   option: e,
-                  isSelected: o === L && m !== "",
-                  isFocused: o === f,
-                  onClick: h
+                  isSelected: o === y && x !== "",
+                  isFocused: o === d,
+                  onClick: w
                 },
                 o
               )),
-              z > n.length && /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ r(he, { marginBlock: "8px", hierarchy: "tertiary", onClick: re, children: "Show More" }) })
+              te > n.length && /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(
+                ke,
+                {
+                  marginBlock: "8px",
+                  hierarchy: "tertiary",
+                  onClick: fe,
+                  children: "Show More"
+                },
+                "show-more"
+              ) })
             ] }),
             n.length === 0 && /* @__PURE__ */ r(
-              ue,
+              he,
               {
                 padding: "8px",
-                className: R(A["no-results"], "tcn-suggestion-list-no-results"),
-                children: /* @__PURE__ */ r(ae, { children: P })
+                className: H(K["no-results"], "tcn-suggestion-list-no-results"),
+                children: /* @__PURE__ */ r(ge, { children: z })
               }
             ),
-            /* @__PURE__ */ r(fe, { onRedirect: ne }, n.length + 1)
+            /* @__PURE__ */ r(be, { onRedirect: ae }, n.length + 1)
           ]
         }
       )
@@ -255,6 +282,6 @@ function Xe({
   );
 }
 export {
-  Xe as SuggestionList
+  Ye as SuggestionList
 };
 //# sourceMappingURL=suggestion_list.js.map