@tcn/ui 0.12.4 → 0.12.6

package/dist/inputs/phone_number_input/phone_number_country_select_adapter.js

@@ -1,13 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
 import b from "react";
-import { Select as g } from "../select/select.js";
+import { Select as I } from "../select/select.js";
 import { Option as d } from "../options/option.js";
-import I from "clsx";
-import { countriesPhoneInformation as P } from "./countries_phone_information.js";
+import P from "clsx";
+import { countriesPhoneInformation as g } from "./countries_phone_information.js";
 import { usePhoneContext as v } from "./phone_number_context.js";
-const n = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
-P.forEach((r) => {
-  u.set(r.code, r), n.has(r.prefix) ? n.get(r.prefix)?.push(r) : n.set(r.prefix, [r]);
+const n = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
+g.forEach((r) => {
+  f.set(r.code, r), n.has(r.prefix) ? n.get(r.prefix)?.push(r) : n.set(r.prefix, [r]);
 });
 function F(r) {
   for (let t = 5; t > 1; t--) {
@@ -18,7 +18,7 @@ function F(r) {
         return i;
     }
   }
-  return u.get("US");
+  return f.get("US");
 }
 function U({
   value: r,
@@ -29,21 +29,21 @@ function U({
   "aria-label": l
 }) {
   const {
-    setValue: p,
-    sipAddress: f,
+    setValue: u,
+    sipAddress: p,
     allowSip: h,
     value: x,
     setFocusNumberInput: c
   } = v(), S = b.useCallback(
     (e) => {
       if (e === "SIP") {
-        p(`sip:${f}`), c(!0);
+        u(`sip:${p}`), c(!0);
         return;
       }
       t(e === "ZZ" ? void 0 : e);
     },
-    [t, f, p, c]
-  ), m = s.filter((e) => !e.divider).map((e) => u.get(e.value || "ZZ")).filter((e) => e != null).sort((e, Z) => e.code === "US" ? -1 : Number(e.prefix) - Number(Z.prefix)).map((e) => /* @__PURE__ */ a(
+    [t, p, u, c]
+  ), m = s.filter((e) => !e.divider).map((e) => f.get(e.value || "ZZ")).filter((e) => e != null).sort((e, Z) => e.code === "US" ? -1 : Number(e.prefix) - Number(Z.prefix)).map((e) => /* @__PURE__ */ a(
     d,
     {
       value: e?.code || "ZZ",
@@ -56,13 +56,13 @@ function U({
   return (h || x?.startsWith("sip:")) && m.unshift(
     /* @__PURE__ */ a(d, { value: "SIP", label: "sip:", keywords: ["sip"], children: "SIP" }, "SIP")
   ), /* @__PURE__ */ a(
-    g,
+    I,
     {
       value: r || "ZZ",
       onChange: S,
       disabled: o,
       "aria-label": l ?? "Country",
-      className: I(i, "tcn-input-group-slot"),
+      className: P(i, "tcn-control-set-item"),
       width: "auto",
       children: m
     }
@@ -70,7 +70,7 @@ function U({
 }
 export {
   U as PhoneNumberCountrySelectAdapter,
-  u as countryCodeMap,
+  f as countryCodeMap,
   n as countryPrefixMap,
   F as getCountryFromValue
 };

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

@@ -1 +1 @@
-{"version":3,"file":"phone_number_country_select_adapter.js","sources":["../../../src/inputs/phone_number_input/phone_number_country_select_adapter.tsx"],"sourcesContent":["import React from 'react';\nimport { Select } from '../select/select.js';\nimport { Option } from '../options/option.js';\nimport clsx from 'clsx';\nimport {\n  countriesPhoneInformation,\n  CountryPhoneInformation,\n} from './countries_phone_information.js';\nimport { usePhoneContext } from './phone_number_context.js';\n\nexport const countryPrefixMap: Map<string, CountryPhoneInformation[]> = new Map();\nexport const countryCodeMap: Map<string, CountryPhoneInformation> = new Map();\ncountriesPhoneInformation.forEach(i => {\n  countryCodeMap.set(i.code, i);\n  if (countryPrefixMap.has(i.prefix)) {\n    countryPrefixMap.get(i.prefix)?.push(i);\n  } else {\n    countryPrefixMap.set(i.prefix, [i]);\n  }\n});\n\nexport function getCountryFromValue(value: string) {\n  for (let x = 5; x > 1; x--) {\n    const prefix = value.slice(0, x);\n    const countriesInformation = countryPrefixMap.get(prefix);\n\n    if (countriesInformation != null) {\n      const countryInformation = countriesInformation.find(c => c.code === 'US');\n\n      if (countryInformation != null) {\n        return countryInformation;\n      }\n    }\n  }\n\n  return countryCodeMap.get('US');\n}\n\nexport interface CountryOption {\n  value?: string;\n  label?: string;\n  divider?: boolean;\n}\n\nexport interface CountrySelectProps {\n  value?: string;\n  onChange: (value?: string) => void;\n  options: CountryOption[];\n  disabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport function PhoneNumberCountrySelectAdapter({\n  value,\n  onChange,\n  options,\n  disabled,\n  className,\n  'aria-label': ariaLabel,\n}: CountrySelectProps) {\n  const {\n    setValue,\n    sipAddress,\n    allowSip,\n    value: phoneValue,\n    setFocusNumberInput,\n  } = usePhoneContext();\n\n  const handleChange = React.useCallback(\n    (newValue: string) => {\n      if (newValue === 'SIP') {\n        setValue(`sip:${sipAddress}`);\n        setFocusNumberInput(true);\n        return;\n      }\n\n      onChange(newValue === 'ZZ' ? undefined : newValue);\n    },\n    [onChange, sipAddress, setValue, setFocusNumberInput]\n  );\n\n  const items = options\n    .filter(opt => !opt.divider)\n    .map(opt => countryCodeMap.get(opt.value || 'ZZ'))\n    .filter(country => country != null)\n    .sort((a, b) => {\n      if (a.code === 'US') {\n        return -1;\n      }\n      return Number(a.prefix) - Number(b.prefix);\n    })\n    .map(country => {\n      return (\n        <Option\n          key={country?.code || 'ZZ'}\n          value={country?.code || 'ZZ'}\n          label={country.prefix || ''}\n          keywords={country.keywords}\n        >\n          {`${country.prefix} (${country.code}) ${country.unicodeFlag}`}\n        </Option>\n      );\n    });\n\n  if (allowSip || phoneValue?.startsWith('sip:')) {\n    items.unshift(\n      <Option key=\"SIP\" value=\"SIP\" label=\"sip:\" keywords={['sip']}>\n        SIP\n      </Option>\n    );\n  }\n\n  return (\n    <Select\n      value={value || 'ZZ'}\n      onChange={handleChange}\n      disabled={disabled}\n      aria-label={ariaLabel ?? 'Country'}\n      className={clsx(className, 'tcn-input-group-slot')}\n      width=\"auto\"\n    >\n      {items}\n    </Select>\n  );\n}\n"],"names":["countryPrefixMap","countryCodeMap","countriesPhoneInformation","i","getCountryFromValue","value","x","prefix","countriesInformation","countryInformation","c","PhoneNumberCountrySelectAdapter","onChange","options","disabled","className","ariaLabel","setValue","sipAddress","allowSip","phoneValue","setFocusNumberInput","usePhoneContext","handleChange","React","newValue","items","opt","country","a","b","jsx","Option","Select","clsx"],"mappings":";;;;;;;AAUO,MAAMA,wBAA+D,IAAA,GAC/DC,wBAA2D,IAAA;AACxEC,EAA0B,QAAQ,CAAAC,MAAK;AACrC,EAAAF,EAAe,IAAIE,EAAE,MAAMA,CAAC,GACxBH,EAAiB,IAAIG,EAAE,MAAM,IAC/BH,EAAiB,IAAIG,EAAE,MAAM,GAAG,KAAKA,CAAC,IAEtCH,EAAiB,IAAIG,EAAE,QAAQ,CAACA,CAAC,CAAC;AAEtC,CAAC;AAEM,SAASC,EAAoBC,GAAe;AACjD,WAASC,IAAI,GAAGA,IAAI,GAAGA,KAAK;AAC1B,UAAMC,IAASF,EAAM,MAAM,GAAGC,CAAC,GACzBE,IAAuBR,EAAiB,IAAIO,CAAM;AAExD,QAAIC,KAAwB,MAAM;AAChC,YAAMC,IAAqBD,EAAqB,KAAK,CAAAE,MAAKA,EAAE,SAAS,IAAI;AAEzE,UAAID,KAAsB;AACxB,eAAOA;AAAA,IAEX;AAAA,EACF;AAEA,SAAOR,EAAe,IAAI,IAAI;AAChC;AAiBO,SAASU,EAAgC;AAAA,EAC9C,OAAAN;AAAA,EACA,UAAAO;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAcC;AAChB,GAAuB;AACrB,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAOC;AAAA,IACP,qBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAeC,EAAM;AAAA,IACzB,CAACC,MAAqB;AACpB,UAAIA,MAAa,OAAO;AACtB,QAAAR,EAAS,OAAOC,CAAU,EAAE,GAC5BG,EAAoB,EAAI;AACxB;AAAA,MACF;AAEA,MAAAT,EAASa,MAAa,OAAO,SAAYA,CAAQ;AAAA,IACnD;AAAA,IACA,CAACb,GAAUM,GAAYD,GAAUI,CAAmB;AAAA,EAAA,GAGhDK,IAAQb,EACX,OAAO,CAAAc,MAAO,CAACA,EAAI,OAAO,EAC1B,IAAI,CAAAA,MAAO1B,EAAe,IAAI0B,EAAI,SAAS,IAAI,CAAC,EAChD,OAAO,CAAAC,MAAWA,KAAW,IAAI,EACjC,KAAK,CAACC,GAAGC,MACJD,EAAE,SAAS,OACN,KAEF,OAAOA,EAAE,MAAM,IAAI,OAAOC,EAAE,MAAM,CAC1C,EACA,IAAI,CAAAF,MAED,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOJ,GAAS,QAAQ;AAAA,MACxB,OAAOA,EAAQ,UAAU;AAAA,MACzB,UAAUA,EAAQ;AAAA,MAEjB,UAAA,GAAGA,EAAQ,MAAM,KAAKA,EAAQ,IAAI,KAAKA,EAAQ,WAAW;AAAA,IAAA;AAAA,IALtDA,GAAS,QAAQ;AAAA,EAAA,CAQ3B;AAEH,UAAIT,KAAYC,GAAY,WAAW,MAAM,MAC3CM,EAAM;AAAA,IACJ,gBAAAK,EAACC,GAAA,EAAiB,OAAM,OAAM,OAAM,QAAO,UAAU,CAAC,KAAK,GAAG,UAAA,MAAA,GAAlD,KAEZ;AAAA,EAAA,GAKF,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAO5B,KAAS;AAAA,MAChB,UAAUkB;AAAA,MACV,UAAAT;AAAA,MACA,cAAYE,KAAa;AAAA,MACzB,WAAWkB,EAAKnB,GAAW,sBAAsB;AAAA,MACjD,OAAM;AAAA,MAEL,UAAAW;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"phone_number_country_select_adapter.js","sources":["../../../src/inputs/phone_number_input/phone_number_country_select_adapter.tsx"],"sourcesContent":["import React from 'react';\nimport { Select } from '../select/select.js';\nimport { Option } from '../options/option.js';\nimport clsx from 'clsx';\nimport {\n  countriesPhoneInformation,\n  CountryPhoneInformation,\n} from './countries_phone_information.js';\nimport { usePhoneContext } from './phone_number_context.js';\n\nexport const countryPrefixMap: Map<string, CountryPhoneInformation[]> = new Map();\nexport const countryCodeMap: Map<string, CountryPhoneInformation> = new Map();\ncountriesPhoneInformation.forEach(i => {\n  countryCodeMap.set(i.code, i);\n  if (countryPrefixMap.has(i.prefix)) {\n    countryPrefixMap.get(i.prefix)?.push(i);\n  } else {\n    countryPrefixMap.set(i.prefix, [i]);\n  }\n});\n\nexport function getCountryFromValue(value: string) {\n  for (let x = 5; x > 1; x--) {\n    const prefix = value.slice(0, x);\n    const countriesInformation = countryPrefixMap.get(prefix);\n\n    if (countriesInformation != null) {\n      const countryInformation = countriesInformation.find(c => c.code === 'US');\n\n      if (countryInformation != null) {\n        return countryInformation;\n      }\n    }\n  }\n\n  return countryCodeMap.get('US');\n}\n\nexport interface CountryOption {\n  value?: string;\n  label?: string;\n  divider?: boolean;\n}\n\nexport interface CountrySelectProps {\n  value?: string;\n  onChange: (value?: string) => void;\n  options: CountryOption[];\n  disabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport function PhoneNumberCountrySelectAdapter({\n  value,\n  onChange,\n  options,\n  disabled,\n  className,\n  'aria-label': ariaLabel,\n}: CountrySelectProps) {\n  const {\n    setValue,\n    sipAddress,\n    allowSip,\n    value: phoneValue,\n    setFocusNumberInput,\n  } = usePhoneContext();\n\n  const handleChange = React.useCallback(\n    (newValue: string) => {\n      if (newValue === 'SIP') {\n        setValue(`sip:${sipAddress}`);\n        setFocusNumberInput(true);\n        return;\n      }\n\n      onChange(newValue === 'ZZ' ? undefined : newValue);\n    },\n    [onChange, sipAddress, setValue, setFocusNumberInput]\n  );\n\n  const items = options\n    .filter(opt => !opt.divider)\n    .map(opt => countryCodeMap.get(opt.value || 'ZZ'))\n    .filter(country => country != null)\n    .sort((a, b) => {\n      if (a.code === 'US') {\n        return -1;\n      }\n      return Number(a.prefix) - Number(b.prefix);\n    })\n    .map(country => {\n      return (\n        <Option\n          key={country?.code || 'ZZ'}\n          value={country?.code || 'ZZ'}\n          label={country.prefix || ''}\n          keywords={country.keywords}\n        >\n          {`${country.prefix} (${country.code}) ${country.unicodeFlag}`}\n        </Option>\n      );\n    });\n\n  if (allowSip || phoneValue?.startsWith('sip:')) {\n    items.unshift(\n      <Option key=\"SIP\" value=\"SIP\" label=\"sip:\" keywords={['sip']}>\n        SIP\n      </Option>\n    );\n  }\n\n  return (\n    <Select\n      value={value || 'ZZ'}\n      onChange={handleChange}\n      disabled={disabled}\n      aria-label={ariaLabel ?? 'Country'}\n      className={clsx(className, 'tcn-control-set-item')}\n      width=\"auto\"\n    >\n      {items}\n    </Select>\n  );\n}\n"],"names":["countryPrefixMap","countryCodeMap","countriesPhoneInformation","i","getCountryFromValue","value","x","prefix","countriesInformation","countryInformation","c","PhoneNumberCountrySelectAdapter","onChange","options","disabled","className","ariaLabel","setValue","sipAddress","allowSip","phoneValue","setFocusNumberInput","usePhoneContext","handleChange","React","newValue","items","opt","country","a","b","jsx","Option","Select","clsx"],"mappings":";;;;;;;AAUO,MAAMA,wBAA+D,IAAA,GAC/DC,wBAA2D,IAAA;AACxEC,EAA0B,QAAQ,CAAAC,MAAK;AACrC,EAAAF,EAAe,IAAIE,EAAE,MAAMA,CAAC,GACxBH,EAAiB,IAAIG,EAAE,MAAM,IAC/BH,EAAiB,IAAIG,EAAE,MAAM,GAAG,KAAKA,CAAC,IAEtCH,EAAiB,IAAIG,EAAE,QAAQ,CAACA,CAAC,CAAC;AAEtC,CAAC;AAEM,SAASC,EAAoBC,GAAe;AACjD,WAASC,IAAI,GAAGA,IAAI,GAAGA,KAAK;AAC1B,UAAMC,IAASF,EAAM,MAAM,GAAGC,CAAC,GACzBE,IAAuBR,EAAiB,IAAIO,CAAM;AAExD,QAAIC,KAAwB,MAAM;AAChC,YAAMC,IAAqBD,EAAqB,KAAK,CAAAE,MAAKA,EAAE,SAAS,IAAI;AAEzE,UAAID,KAAsB;AACxB,eAAOA;AAAA,IAEX;AAAA,EACF;AAEA,SAAOR,EAAe,IAAI,IAAI;AAChC;AAiBO,SAASU,EAAgC;AAAA,EAC9C,OAAAN;AAAA,EACA,UAAAO;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAcC;AAChB,GAAuB;AACrB,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAOC;AAAA,IACP,qBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAeC,EAAM;AAAA,IACzB,CAACC,MAAqB;AACpB,UAAIA,MAAa,OAAO;AACtB,QAAAR,EAAS,OAAOC,CAAU,EAAE,GAC5BG,EAAoB,EAAI;AACxB;AAAA,MACF;AAEA,MAAAT,EAASa,MAAa,OAAO,SAAYA,CAAQ;AAAA,IACnD;AAAA,IACA,CAACb,GAAUM,GAAYD,GAAUI,CAAmB;AAAA,EAAA,GAGhDK,IAAQb,EACX,OAAO,CAAAc,MAAO,CAACA,EAAI,OAAO,EAC1B,IAAI,CAAAA,MAAO1B,EAAe,IAAI0B,EAAI,SAAS,IAAI,CAAC,EAChD,OAAO,CAAAC,MAAWA,KAAW,IAAI,EACjC,KAAK,CAACC,GAAGC,MACJD,EAAE,SAAS,OACN,KAEF,OAAOA,EAAE,MAAM,IAAI,OAAOC,EAAE,MAAM,CAC1C,EACA,IAAI,CAAAF,MAED,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOJ,GAAS,QAAQ;AAAA,MACxB,OAAOA,EAAQ,UAAU;AAAA,MACzB,UAAUA,EAAQ;AAAA,MAEjB,UAAA,GAAGA,EAAQ,MAAM,KAAKA,EAAQ,IAAI,KAAKA,EAAQ,WAAW;AAAA,IAAA;AAAA,IALtDA,GAAS,QAAQ;AAAA,EAAA,CAQ3B;AAEH,UAAIT,KAAYC,GAAY,WAAW,MAAM,MAC3CM,EAAM;AAAA,IACJ,gBAAAK,EAACC,GAAA,EAAiB,OAAM,OAAM,OAAM,QAAO,UAAU,CAAC,KAAK,GAAG,UAAA,MAAA,GAAlD,KAEZ;AAAA,EAAA,GAKF,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAO5B,KAAS;AAAA,MAChB,UAAUkB;AAAA,MACV,UAAAT;AAAA,MACA,cAAYE,KAAa;AAAA,MACzB,WAAWkB,EAAKnB,GAAW,sBAAsB;AAAA,MACjD,OAAM;AAAA,MAEL,UAAAW;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/inputs/phone_number_input/phone_number_input.js

@@ -1,4 +1,4 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import e, { useLayoutEffect as x } from "react";
 import w from "react-phone-number-input";
 import "react-phone-number-input/style.css";
@@ -9,15 +9,15 @@ import { Option as L } from "../options/option.js";
 import { PhoneNumberInputAdapter as R } from "./phone_number_input_adapter.js";
 import { clsx as U } from "clsx";
 import { SipInput as W } from "./sip_input.js";
-import { defaultCountries as g } from "./countries_phone_information.js";
-import '../../phone_number_input.css';const q = "_phone-number-input_5c4483d", z = { "phone-number-input": q };
+import { defaultCountries as q } from "./countries_phone_information.js";
+import '../../phone_number_input.css';const z = "_phone-number-input_5c4483d", D = { "phone-number-input": z };
 function tt({
   value: t = "",
   allowSip: m = !0,
   onChange: n,
   defaultCountry: k = "US",
-  allowedCountryCodes: p,
-  disabled: u,
+  allowedCountryCodes: s,
+  disabled: p,
   name: i,
   "aria-label": f,
   autoFocus: c,
@@ -29,16 +29,16 @@ function tt({
   children: h,
   ...E
 }) {
-  const [s, b] = e.useState(!1), r = t?.toLocaleLowerCase().startsWith("sip:") || !1, [y, M] = e.useState(r ? "" : t), [N, C] = e.useState(
-    r ? t?.substring(4).trim() : ""
+  const [u, b] = e.useState(!1), o = t?.toLocaleLowerCase().startsWith("sip:") || !1, [y, M] = e.useState(o ? "" : t), [N, C] = e.useState(
+    o ? t?.substring(4).trim() : ""
   ), [I, j] = e.useState(
     k
   );
-  p = p || g, x(() => {
-    r && C(t?.substring(4).trim() || "");
-  }, [r, t]), x(() => {
-    s && b(!1);
-  }, [s]);
+  s = s || q, x(() => {
+    o && C(t?.substring(4).trim() || "");
+  }, [o, t]), x(() => {
+    u && b(!1);
+  }, [u]);
   const S = e.useMemo(() => e.Children.toArray(h).filter(
     (P) => e.isValidElement(P) && P.type === L
   ), [h]), A = e.useMemo(() => ({
@@ -48,13 +48,13 @@ function tt({
     setValue: n,
     ariaPhoneBookButtonLabel: d,
     ariaSelectLabel: l,
-    disabled: u,
+    disabled: p,
     setCountry: j,
     sipAddress: N,
     setSipAddress: C,
     cachedNumber: y,
     setCachedNumber: M,
-    focusNumberInput: s,
+    focusNumberInput: u,
     setFocusNumberInput: b
   }), [
     t,
@@ -63,33 +63,33 @@ function tt({
     n,
     d,
     l,
-    u,
+    p,
     N,
     y,
-    s
+    u
   ]);
-  return r ? /* @__PURE__ */ o(_, { value: A, children: /* @__PURE__ */ o(
+  return o ? /* @__PURE__ */ r(_, { value: A, children: /* @__PURE__ */ r(
     W,
     {
       onChange: n,
-      disabled: u,
+      disabled: p,
       name: i,
       "aria-label": f,
       autoFocus: c,
       placeholder: a,
-      countries: p
+      countries: s
     }
-  ) }) : /* @__PURE__ */ o(_, { value: A, children: /* @__PURE__ */ o(B, { ...E, children: /* @__PURE__ */ o(
+  ) }) : /* @__PURE__ */ r(_, { value: A, children: /* @__PURE__ */ r(B, { ...E, children: /* @__PURE__ */ r(
     w,
     {
       value: t,
       onChange: n,
       defaultCountry: I,
       country: I,
-      countries: p,
+      countries: s,
       countrySelectComponent: H,
       inputComponent: R,
-      disabled: u,
+      disabled: p,
       name: i,
       "aria-label": f,
       autoFocus: c,
@@ -97,9 +97,9 @@ function tt({
       onCountryChange: O,
       limitMaxLength: V,
       className: U(
-        z["phone-number-input"],
+        D["phone-number-input"],
         "tcn-phone-number-input",
-        "tcn-input-group"
+        "tcn-control-set"
       ),
       displayInitialValueAsLocalNumber: !0,
       addInternationalOption: !1

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

@@ -1 +1 @@
-{"version":3,"file":"phone_number_input.js","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport PhoneInput from 'react-phone-number-input';\nimport 'react-phone-number-input/style.css';\nimport type { CountryCode } from 'libphonenumber-js';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport styles from './phone_number_input.module.css';\nimport { PhoneBookProvider, type PhoneContext } from './phone_number_context.js';\nimport { PhoneNumberCountrySelectAdapter } from './phone_number_country_select_adapter.js';\nimport { type OptionProps, Option } from '../options/option.js';\nimport { PhoneNumberInputAdapter } from './phone_number_input_adapter.js';\nimport { clsx } from 'clsx';\nimport { SipInput } from './sip_input.js';\nimport { defaultCountries } from './countries_phone_information.js';\n\nexport interface PhoneNumberInputProps\n  extends Omit<HStackProps, 'onChange' | 'children'> {\n  value?: string;\n  allowSip?: boolean;\n  onChange: (value?: string) => void;\n  defaultCountry?: string;\n  allowedCountryCodes?: string[];\n  disabled?: boolean;\n  name?: string;\n  'aria-label'?: string;\n  autoFocus?: boolean;\n  placeholder?: string;\n  className?: string;\n  width?: string;\n  onCountryChange?: (country: CountryCode) => void;\n  limitMaxLength?: boolean;\n  ariaSelectLabel?: string;\n  ariaPhoneBookButtonLabel?: string;\n  children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n}\n\nexport function PhoneNumberInput({\n  value = '',\n  allowSip = true,\n  onChange,\n  defaultCountry = 'US',\n  allowedCountryCodes: countries,\n  disabled,\n  name,\n  'aria-label': ariaLabel,\n  autoFocus,\n  placeholder,\n  onCountryChange,\n  limitMaxLength,\n  ariaSelectLabel,\n  ariaPhoneBookButtonLabel,\n  children,\n  ...props\n}: PhoneNumberInputProps) {\n  const [focusNumberInput, setFocusNumberInput] = React.useState<boolean>(false);\n  const isSip = value?.toLocaleLowerCase().startsWith('sip:') || false;\n  const [cachedNumber, setCachedNumber] = React.useState<string>(isSip ? '' : value);\n  const [sipAddress, setSipAddress] = React.useState<string>(\n    isSip ? value?.substring(4).trim() : ''\n  );\n  const [country, setCountry] = React.useState<CountryCode | undefined>(\n    defaultCountry as CountryCode\n  );\n\n  countries = countries || defaultCountries;\n\n  useLayoutEffect(() => {\n    if (isSip) {\n      setSipAddress(value?.substring(4).trim() || '');\n    }\n  }, [isSip, value]);\n\n  useLayoutEffect(() => {\n    if (focusNumberInput) {\n      setFocusNumberInput(false);\n    }\n  }, [focusNumberInput]);\n\n  // Extract valid Option components from children\n  const phoneBookOptions = React.useMemo(() => {\n    return React.Children.toArray(children).filter(\n      (child): child is React.ReactElement<OptionProps> =>\n        React.isValidElement(child) && child.type === Option\n    );\n  }, [children]);\n\n  const phoneContext = React.useMemo<PhoneContext>(() => {\n    return {\n      value,\n      allowSip,\n      phoneBook: phoneBookOptions,\n      setValue: onChange,\n      ariaPhoneBookButtonLabel,\n      ariaSelectLabel,\n      disabled,\n      setCountry,\n      sipAddress,\n      setSipAddress,\n      cachedNumber,\n      setCachedNumber,\n      focusNumberInput,\n      setFocusNumberInput,\n    };\n  }, [\n    value,\n    allowSip,\n    phoneBookOptions,\n    onChange,\n    ariaPhoneBookButtonLabel,\n    ariaSelectLabel,\n    disabled,\n    sipAddress,\n    cachedNumber,\n    focusNumberInput,\n  ]);\n\n  if (isSip) {\n    return (\n      <PhoneBookProvider value={phoneContext}>\n        <SipInput\n          onChange={onChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          countries={countries as CountryCode[]}\n        />\n      </PhoneBookProvider>\n    );\n  }\n\n  return (\n    <PhoneBookProvider value={phoneContext}>\n      <HStack {...props}>\n        <PhoneInput\n          value={value}\n          onChange={onChange}\n          defaultCountry={country}\n          country={country}\n          countries={countries as CountryCode[]}\n          countrySelectComponent={PhoneNumberCountrySelectAdapter}\n          inputComponent={PhoneNumberInputAdapter}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          onCountryChange={onCountryChange}\n          limitMaxLength={limitMaxLength}\n          className={clsx(\n            styles['phone-number-input'],\n            'tcn-phone-number-input',\n            'tcn-input-group'\n          )}\n          displayInitialValueAsLocalNumber\n          addInternationalOption={false}\n        />\n      </HStack>\n    </PhoneBookProvider>\n  );\n}\n"],"names":["PhoneNumberInput","value","allowSip","onChange","defaultCountry","countries","disabled","name","ariaLabel","autoFocus","placeholder","onCountryChange","limitMaxLength","ariaSelectLabel","ariaPhoneBookButtonLabel","children","props","focusNumberInput","setFocusNumberInput","React","isSip","cachedNumber","setCachedNumber","sipAddress","setSipAddress","country","setCountry","defaultCountries","useLayoutEffect","phoneBookOptions","child","Option","phoneContext","jsx","PhoneBookProvider","SipInput","HStack","PhoneInput","PhoneNumberCountrySelectAdapter","PhoneNumberInputAdapter","clsx","styles"],"mappings":"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"}
+{"version":3,"file":"phone_number_input.js","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport PhoneInput from 'react-phone-number-input';\nimport 'react-phone-number-input/style.css';\nimport type { CountryCode } from 'libphonenumber-js';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport styles from './phone_number_input.module.css';\nimport { PhoneBookProvider, type PhoneContext } from './phone_number_context.js';\nimport { PhoneNumberCountrySelectAdapter } from './phone_number_country_select_adapter.js';\nimport { type OptionProps, Option } from '../options/option.js';\nimport { PhoneNumberInputAdapter } from './phone_number_input_adapter.js';\nimport { clsx } from 'clsx';\nimport { SipInput } from './sip_input.js';\nimport { defaultCountries } from './countries_phone_information.js';\n\nexport interface PhoneNumberInputProps\n  extends Omit<HStackProps, 'onChange' | 'children'> {\n  value?: string;\n  allowSip?: boolean;\n  onChange: (value?: string) => void;\n  defaultCountry?: string;\n  allowedCountryCodes?: string[];\n  disabled?: boolean;\n  name?: string;\n  'aria-label'?: string;\n  autoFocus?: boolean;\n  placeholder?: string;\n  className?: string;\n  width?: string;\n  onCountryChange?: (country: CountryCode) => void;\n  limitMaxLength?: boolean;\n  ariaSelectLabel?: string;\n  ariaPhoneBookButtonLabel?: string;\n  children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n}\n\nexport function PhoneNumberInput({\n  value = '',\n  allowSip = true,\n  onChange,\n  defaultCountry = 'US',\n  allowedCountryCodes: countries,\n  disabled,\n  name,\n  'aria-label': ariaLabel,\n  autoFocus,\n  placeholder,\n  onCountryChange,\n  limitMaxLength,\n  ariaSelectLabel,\n  ariaPhoneBookButtonLabel,\n  children,\n  ...props\n}: PhoneNumberInputProps) {\n  const [focusNumberInput, setFocusNumberInput] = React.useState<boolean>(false);\n  const isSip = value?.toLocaleLowerCase().startsWith('sip:') || false;\n  const [cachedNumber, setCachedNumber] = React.useState<string>(isSip ? '' : value);\n  const [sipAddress, setSipAddress] = React.useState<string>(\n    isSip ? value?.substring(4).trim() : ''\n  );\n  const [country, setCountry] = React.useState<CountryCode | undefined>(\n    defaultCountry as CountryCode\n  );\n\n  countries = countries || defaultCountries;\n\n  useLayoutEffect(() => {\n    if (isSip) {\n      setSipAddress(value?.substring(4).trim() || '');\n    }\n  }, [isSip, value]);\n\n  useLayoutEffect(() => {\n    if (focusNumberInput) {\n      setFocusNumberInput(false);\n    }\n  }, [focusNumberInput]);\n\n  // Extract valid Option components from children\n  const phoneBookOptions = React.useMemo(() => {\n    return React.Children.toArray(children).filter(\n      (child): child is React.ReactElement<OptionProps> =>\n        React.isValidElement(child) && child.type === Option\n    );\n  }, [children]);\n\n  const phoneContext = React.useMemo<PhoneContext>(() => {\n    return {\n      value,\n      allowSip,\n      phoneBook: phoneBookOptions,\n      setValue: onChange,\n      ariaPhoneBookButtonLabel,\n      ariaSelectLabel,\n      disabled,\n      setCountry,\n      sipAddress,\n      setSipAddress,\n      cachedNumber,\n      setCachedNumber,\n      focusNumberInput,\n      setFocusNumberInput,\n    };\n  }, [\n    value,\n    allowSip,\n    phoneBookOptions,\n    onChange,\n    ariaPhoneBookButtonLabel,\n    ariaSelectLabel,\n    disabled,\n    sipAddress,\n    cachedNumber,\n    focusNumberInput,\n  ]);\n\n  if (isSip) {\n    return (\n      <PhoneBookProvider value={phoneContext}>\n        <SipInput\n          onChange={onChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          countries={countries as CountryCode[]}\n        />\n      </PhoneBookProvider>\n    );\n  }\n\n  return (\n    <PhoneBookProvider value={phoneContext}>\n      <HStack {...props}>\n        <PhoneInput\n          value={value}\n          onChange={onChange}\n          defaultCountry={country}\n          country={country}\n          countries={countries as CountryCode[]}\n          countrySelectComponent={PhoneNumberCountrySelectAdapter}\n          inputComponent={PhoneNumberInputAdapter}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          onCountryChange={onCountryChange}\n          limitMaxLength={limitMaxLength}\n          className={clsx(\n            styles['phone-number-input'],\n            'tcn-phone-number-input',\n            'tcn-control-set'\n          )}\n          displayInitialValueAsLocalNumber\n          addInternationalOption={false}\n        />\n      </HStack>\n    </PhoneBookProvider>\n  );\n}\n"],"names":["PhoneNumberInput","value","allowSip","onChange","defaultCountry","countries","disabled","name","ariaLabel","autoFocus","placeholder","onCountryChange","limitMaxLength","ariaSelectLabel","ariaPhoneBookButtonLabel","children","props","focusNumberInput","setFocusNumberInput","React","isSip","cachedNumber","setCachedNumber","sipAddress","setSipAddress","country","setCountry","defaultCountries","useLayoutEffect","phoneBookOptions","child","Option","phoneContext","jsx","PhoneBookProvider","SipInput","HStack","PhoneInput","PhoneNumberCountrySelectAdapter","PhoneNumberInputAdapter","clsx","styles"],"mappings":"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"}

package/dist/inputs/phone_number_input/phone_number_input_adapter.js

@@ -1,4 +1,4 @@
-import { jsxs as S, Fragment as A, jsx as n } from "react/jsx-runtime";
+import { jsxs as S, Fragment as A, jsx as e } from "react/jsx-runtime";
 import { NotebookIcon as C } from "@tcn/icons/notebook_icon.js";
 import f from "clsx";
 import { forwardRef as F, useState as R, useRef as y, useCallback as z, useLayoutEffect as E } from "react";
@@ -12,72 +12,72 @@ import { usePhoneContext as j } from "./phone_number_context.js";
 import { getCountryFromValue as T } from "./phone_number_country_select_adapter.js";
 import { Input as V } from "../input/input.js";
 import { useForkRef as q } from "../../utils/hooks/use_fork_ref.js";
-const to = F(function({ onChange: e, value: t = "", className: a, ...h }, g) {
+const to = F(function({ onChange: n, value: t = "", className: a, ...h }, g) {
   t = t.toString();
   const [s, r] = R(
     null
-  ), u = s != null, c = y(null), d = q(g, c), {
+  ), c = s != null, u = y(null), d = q(g, u), {
     phoneBook: l,
     setValue: k,
     ariaPhoneBookButtonLabel: b,
     disabled: B,
     setFocusNumberInput: P,
-    focusNumberInput: p
+    focusNumberInput: m
   } = j(), x = l.length > 0;
   function I(o) {
-    r(u ? null : o.currentTarget);
+    r(c ? null : o.currentTarget);
   }
-  function m() {
+  function p() {
     r(null);
   }
   function N(o) {
-    m(), P(!0), k(o);
+    p(), P(!0), k(o);
   }
   const O = z(
     (o, i) => {
-      if (!e) return;
-      e(i ?? {
+      if (!n) return;
+      n(i ?? {
         target: { value: o },
         currentTarget: { value: o }
       });
     },
-    [e]
+    [n]
   );
   if (t.startsWith("+")) {
     const i = T(t)?.prefix?.length || 0;
     t = t.substring(i);
   }
   return E(() => {
-    const o = c?.current;
-    o == null || !p || requestAnimationFrame(() => {
+    const o = u?.current;
+    o == null || !m || requestAnimationFrame(() => {
       o.value.length > 0 ? o.select() : o.focus();
     });
-  }, [p]), /* @__PURE__ */ S(A, { children: [
-    /* @__PURE__ */ n(
+  }, [m]), /* @__PURE__ */ S(A, { children: [
+    /* @__PURE__ */ e(
       V,
       {
         ref: d,
         value: t,
         ...h,
-        className: f(a, "tcn-input-group-slot"),
+        className: f(a, "tcn-control-set-item"),
         onChange: O
       }
     ),
-    x && /* @__PURE__ */ n(
+    x && /* @__PURE__ */ e(
       L,
       {
         disabled: B,
-        className: f("tcn-input-group-slot", "tcn-phone-number-phone-book"),
+        className: f("tcn-control-set-item", "tcn-phone-number-phone-book"),
         "aria-label": b,
         onClick: I,
         size: "md",
-        children: /* @__PURE__ */ n(C, { size: "md" })
+        children: /* @__PURE__ */ e(C, { size: "md" })
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ e(
       w,
       {
-        open: u,
+        open: c,
         anchorElement: s,
         horizontalAnchor: "end",
         horizontalOrigin: "end",
@@ -85,7 +85,7 @@ const to = F(function({ onChange: e, value: t = "", className: a, ...h }, g) {
         verticalOrigin: "top",
         width: "300px",
         onOptionSelect: N,
-        onClose: m,
+        onClose: p,
         noSuggestionMessage: "No phone numbers found",
         children: l
       }

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

@@ -1 +1 @@
-{"version":3,"file":"phone_number_input_adapter.js","sources":["../../../src/inputs/phone_number_input/phone_number_input_adapter.tsx"],"sourcesContent":["import { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport clsx from 'clsx';\nimport { forwardRef, useState, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { usePhoneContext } from './phone_number_context.js';\nimport { getCountryFromValue } from './phone_number_country_select_adapter.js';\nimport { Input } from '../input/input.js';\nimport { useForkRef } from '../../utils/hooks/use_fork_ref.js';\n\n/**\n * Bridges `@tcn/ui/inputs` Input (onChange: (value, event?) => void)\n * with react-phone-number-input's expectation (onChange: (event) => void).\n */\nexport const PhoneNumberInputAdapter = forwardRef<\n  HTMLInputElement,\n  React.InputHTMLAttributes<HTMLInputElement>\n>(function InputAdapter({ onChange, value = '', className, ...rest }, ref) {\n  value = value.toString();\n  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n    null\n  );\n  const isPhoneBookOpen = phoneBookElement != null;\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  const {\n    phoneBook: phoneBookOptions,\n    setValue,\n    ariaPhoneBookButtonLabel,\n    disabled,\n    setFocusNumberInput,\n    focusNumberInput,\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 handleChange = useCallback(\n    (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n      if (!onChange) return;\n      const e =\n        event ??\n        ({\n          target: { value },\n          currentTarget: { value },\n        } as React.ChangeEvent<HTMLInputElement>);\n      onChange(e);\n    },\n    [onChange]\n  );\n\n  if (value.startsWith('+')) {\n    const country = getCountryFromValue(value);\n    const prefixLength = country?.prefix?.length || 0;\n    value = value.substring(prefixLength);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef?.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      <Input\n        ref={forkedRef}\n        value={value}\n        {...(rest as any)}\n        className={clsx(className, 'tcn-input-group-slot')}\n        onChange={handleChange}\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      <SuggestionList\n        open={isPhoneBookOpen}\n        anchorElement={phoneBookElement}\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n        verticalAnchor=\"top\"\n        verticalOrigin=\"top\"\n        width=\"300px\"\n        onOptionSelect={handlePhoneBookOptionSelect}\n        onClose={closePhoneBook}\n        noSuggestionMessage=\"No phone numbers found\"\n      >\n        {phoneBookOptions}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["PhoneNumberInputAdapter","forwardRef","onChange","value","className","rest","ref","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","internalInputRef","useRef","forkedRef","useForkRef","phoneBookOptions","setValue","ariaPhoneBookButtonLabel","disabled","setFocusNumberInput","focusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","handleChange","useCallback","event","prefixLength","getCountryFromValue","useLayoutEffect","input","jsxs","Fragment","jsx","Input","clsx","Button","NotebookIcon","SuggestionList"],"mappings":";;;;;;;;;;;;;;AAcO,MAAMA,KAA0BC,EAGrC,SAAsB,EAAE,UAAAC,GAAU,OAAAC,IAAQ,IAAI,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACzE,EAAAH,IAAQA,EAAM,SAAA;AACd,QAAM,CAACI,GAAkBC,CAAmB,IAAIC;AAAA,IAC9C;AAAA,EAAA,GAEIC,IAAkBH,KAAoB,MACtCI,IAAmBC,EAAgC,IAAI,GACvDC,IAAYC,EAAWR,GAAKK,CAAgB,GAE5C;AAAA,IACJ,WAAWI;AAAA,IACX,UAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,UAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAgBP,EAAiB,SAAS;AAEhD,WAASQ,EAAgBC,GAAwC;AAC/D,IACEhB,EADEE,IACkB,OAEAc,EAAE,aAFE;AAAA,EAI5B;AAEA,WAASC,IAAiB;AACxB,IAAAjB,EAAoB,IAAI;AAAA,EAC1B;AAEA,WAASkB,EAA4BvB,GAAe;AAClD,IAAAsB,EAAA,GACAN,EAAoB,EAAI,GACxBH,EAASb,CAAK;AAAA,EAChB;AAEA,QAAMwB,IAAeC;AAAA,IACnB,CAACzB,GAAe0B,MAAgD;AAC9D,UAAI,CAAC3B,EAAU;AAOf,MAAAA,EALE2B,KACC;AAAA,QACC,QAAQ,EAAE,OAAA1B,EAAAA;AAAAA,QACV,eAAe,EAAE,OAAAA,EAAAA;AAAAA,MAAM,CAEjB;AAAA,IACZ;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,MAAIC,EAAM,WAAW,GAAG,GAAG;AAEzB,UAAM2B,IADUC,EAAoB5B,CAAK,GACX,QAAQ,UAAU;AAChD,IAAAA,IAAQA,EAAM,UAAU2B,CAAY;AAAA,EACtC;AAEA,SAAAE,EAAgB,MAAM;AACpB,UAAMC,IAAQtB,GAAkB;AAEhC,IAAIsB,KAAS,QAAQ,CAACb,KAItB,sBAAsB,MAAM;AAC1B,MAAIa,EAAM,MAAM,SAAS,IACvBA,EAAM,OAAA,IAENA,EAAM,MAAA;AAAA,IAEV,CAAC;AAAA,EACH,GAAG,CAACb,CAAgB,CAAC,GAGnB,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKxB;AAAA,QACL,OAAAV;AAAA,QACC,GAAIE;AAAA,QACL,WAAWiC,EAAKlC,GAAW,sBAAsB;AAAA,QACjD,UAAUuB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEXL,KACC,gBAAAc;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAArB;AAAA,QACA,WAAWoB,EAAK,wBAAwB,6BAA6B;AAAA,QACrE,cAAYrB;AAAA,QACZ,SAASM;AAAA,QACT,MAAK;AAAA,QAEL,UAAA,gBAAAa,EAACI,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5B,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAM/B;AAAA,QACN,eAAeH;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,gBAAe;AAAA,QACf,OAAM;AAAA,QACN,gBAAgBmB;AAAA,QAChB,SAASD;AAAA,QACT,qBAAoB;AAAA,QAEnB,UAAAV;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"phone_number_input_adapter.js","sources":["../../../src/inputs/phone_number_input/phone_number_input_adapter.tsx"],"sourcesContent":["import { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport clsx from 'clsx';\nimport { forwardRef, useState, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { usePhoneContext } from './phone_number_context.js';\nimport { getCountryFromValue } from './phone_number_country_select_adapter.js';\nimport { Input } from '../input/input.js';\nimport { useForkRef } from '../../utils/hooks/use_fork_ref.js';\n\n/**\n * Bridges `@tcn/ui/inputs` Input (onChange: (value, event?) => void)\n * with react-phone-number-input's expectation (onChange: (event) => void).\n */\nexport const PhoneNumberInputAdapter = forwardRef<\n  HTMLInputElement,\n  React.InputHTMLAttributes<HTMLInputElement>\n>(function InputAdapter({ onChange, value = '', className, ...rest }, ref) {\n  value = value.toString();\n  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n    null\n  );\n  const isPhoneBookOpen = phoneBookElement != null;\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  const {\n    phoneBook: phoneBookOptions,\n    setValue,\n    ariaPhoneBookButtonLabel,\n    disabled,\n    setFocusNumberInput,\n    focusNumberInput,\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 handleChange = useCallback(\n    (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n      if (!onChange) return;\n      const e =\n        event ??\n        ({\n          target: { value },\n          currentTarget: { value },\n        } as React.ChangeEvent<HTMLInputElement>);\n      onChange(e);\n    },\n    [onChange]\n  );\n\n  if (value.startsWith('+')) {\n    const country = getCountryFromValue(value);\n    const prefixLength = country?.prefix?.length || 0;\n    value = value.substring(prefixLength);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef?.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      <Input\n        ref={forkedRef}\n        value={value}\n        {...(rest as any)}\n        className={clsx(className, 'tcn-control-set-item')}\n        onChange={handleChange}\n      />\n      {showPhoneBook && (\n        <Button\n          disabled={disabled}\n          className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}\n          aria-label={ariaPhoneBookButtonLabel}\n          onClick={togglePhoneBook}\n          size=\"md\"\n        >\n          <NotebookIcon size=\"md\" />\n        </Button>\n      )}\n      <SuggestionList\n        open={isPhoneBookOpen}\n        anchorElement={phoneBookElement}\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n        verticalAnchor=\"top\"\n        verticalOrigin=\"top\"\n        width=\"300px\"\n        onOptionSelect={handlePhoneBookOptionSelect}\n        onClose={closePhoneBook}\n        noSuggestionMessage=\"No phone numbers found\"\n      >\n        {phoneBookOptions}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["PhoneNumberInputAdapter","forwardRef","onChange","value","className","rest","ref","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","internalInputRef","useRef","forkedRef","useForkRef","phoneBookOptions","setValue","ariaPhoneBookButtonLabel","disabled","setFocusNumberInput","focusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","handleChange","useCallback","event","prefixLength","getCountryFromValue","useLayoutEffect","input","jsxs","Fragment","jsx","Input","clsx","Button","NotebookIcon","SuggestionList"],"mappings":";;;;;;;;;;;;;;AAcO,MAAMA,KAA0BC,EAGrC,SAAsB,EAAE,UAAAC,GAAU,OAAAC,IAAQ,IAAI,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACzE,EAAAH,IAAQA,EAAM,SAAA;AACd,QAAM,CAACI,GAAkBC,CAAmB,IAAIC;AAAA,IAC9C;AAAA,EAAA,GAEIC,IAAkBH,KAAoB,MACtCI,IAAmBC,EAAgC,IAAI,GACvDC,IAAYC,EAAWR,GAAKK,CAAgB,GAE5C;AAAA,IACJ,WAAWI;AAAA,IACX,UAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,UAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAgBP,EAAiB,SAAS;AAEhD,WAASQ,EAAgBC,GAAwC;AAC/D,IACEhB,EADEE,IACkB,OAEAc,EAAE,aAFE;AAAA,EAI5B;AAEA,WAASC,IAAiB;AACxB,IAAAjB,EAAoB,IAAI;AAAA,EAC1B;AAEA,WAASkB,EAA4BvB,GAAe;AAClD,IAAAsB,EAAA,GACAN,EAAoB,EAAI,GACxBH,EAASb,CAAK;AAAA,EAChB;AAEA,QAAMwB,IAAeC;AAAA,IACnB,CAACzB,GAAe0B,MAAgD;AAC9D,UAAI,CAAC3B,EAAU;AAOf,MAAAA,EALE2B,KACC;AAAA,QACC,QAAQ,EAAE,OAAA1B,EAAAA;AAAAA,QACV,eAAe,EAAE,OAAAA,EAAAA;AAAAA,MAAM,CAEjB;AAAA,IACZ;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,MAAIC,EAAM,WAAW,GAAG,GAAG;AAEzB,UAAM2B,IADUC,EAAoB5B,CAAK,GACX,QAAQ,UAAU;AAChD,IAAAA,IAAQA,EAAM,UAAU2B,CAAY;AAAA,EACtC;AAEA,SAAAE,EAAgB,MAAM;AACpB,UAAMC,IAAQtB,GAAkB;AAEhC,IAAIsB,KAAS,QAAQ,CAACb,KAItB,sBAAsB,MAAM;AAC1B,MAAIa,EAAM,MAAM,SAAS,IACvBA,EAAM,OAAA,IAENA,EAAM,MAAA;AAAA,IAEV,CAAC;AAAA,EACH,GAAG,CAACb,CAAgB,CAAC,GAGnB,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKxB;AAAA,QACL,OAAAV;AAAA,QACC,GAAIE;AAAA,QACL,WAAWiC,EAAKlC,GAAW,sBAAsB;AAAA,QACjD,UAAUuB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEXL,KACC,gBAAAc;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAArB;AAAA,QACA,WAAWoB,EAAK,wBAAwB,6BAA6B;AAAA,QACrE,cAAYrB;AAAA,QACZ,SAASM;AAAA,QACT,MAAK;AAAA,QAEL,UAAA,gBAAAa,EAACI,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5B,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAM/B;AAAA,QACN,eAAeH;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,gBAAe;AAAA,QACf,OAAM;AAAA,QACN,gBAAgBmB;AAAA,QAChB,SAASD;AAAA,QACT,qBAAoB;AAAA,QAEnB,UAAAV;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/inputs/phone_number_input/sip_input.js

@@ -7,7 +7,7 @@ import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
 import { Button as R } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
-import { InputGroup as j } from "../input_group/input_group.js";
+import { ControlSet as j } from "../control_set/control_set.js";
 import w from "clsx";
 import { usePhoneContext as y } from "./phone_number_context.js";
 import { PhoneNumberCountrySelectAdapter as V } from "./phone_number_country_select_adapter.js";
@@ -16,22 +16,22 @@ function Z({
   disabled: n,
   countries: d,
   name: k,
-  "aria-label": B,
-  autoFocus: S,
+  "aria-label": S,
+  autoFocus: B,
   placeholder: P
 }) {
-  const i = g.useRef(null), [u, t] = g.useState(null), l = u != null, {
+  const i = g.useRef(null), [l, t] = g.useState(null), u = l != null, {
     phoneBook: s,
     setValue: r,
     setCountry: b,
-    ariaPhoneBookButtonLabel: I,
+    ariaPhoneBookButtonLabel: C,
     sipAddress: p,
     setSipAddress: c,
     focusNumberInput: m,
     setFocusNumberInput: a
-  } = y(), C = s.length > 0;
+  } = y(), I = s.length > 0;
   function x(o) {
-    t(l ? null : o.currentTarget);
+    t(u ? null : o.currentTarget);
   }
   function h() {
     t(null);
@@ -73,17 +73,17 @@ function Z({
           disabled: n,
           onChange: v,
           name: k,
-          "aria-label": B,
-          autoFocus: S,
+          "aria-label": S,
+          autoFocus: B,
           placeholder: P
         }
       ),
-      C && /* @__PURE__ */ e(
+      I && /* @__PURE__ */ e(
         R,
         {
           disabled: n,
-          className: w("tcn-input-group-slot", "tcn-phone-number-phone-book"),
-          "aria-label": I,
+          className: w("tcn-control-set-item", "tcn-phone-number-phone-book"),
+          "aria-label": C,
           onClick: x,
           size: "md",
           children: /* @__PURE__ */ e(F, { size: "md" })
@@ -93,8 +93,8 @@ function Z({
     /* @__PURE__ */ e(
       _,
       {
-        open: l,
-        anchorElement: u,
+        open: u,
+        anchorElement: l,
         onOptionSelect: A,
         onClose: h,
         width: "300px",

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

@@ -1 +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        width=\"300px\"\n        noSuggestionMessage=\"No phone numbers found\"\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n        verticalAnchor=\"top\"\n        verticalOrigin=\"top\"\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":"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"}
+{"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 { ControlSet } from '../control_set/control_set.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      <ControlSet>\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-control-set-item', 'tcn-phone-number-phone-book')}\n            aria-label={ariaPhoneBookButtonLabel}\n            onClick={togglePhoneBook}\n            size=\"md\"\n          >\n            <NotebookIcon size=\"md\" />\n          </Button>\n        )}\n      </ControlSet>\n      <SuggestionList\n        open={isPhoneBookOpen}\n        anchorElement={phoneBookElement}\n        onOptionSelect={handlePhoneBookOptionSelect}\n        onClose={closePhoneBook}\n        width=\"300px\"\n        noSuggestionMessage=\"No phone numbers found\"\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n        verticalAnchor=\"top\"\n        verticalOrigin=\"top\"\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","ControlSet","jsx","PhoneNumberCountrySelectAdapter","Input","Button","clsx","NotebookIcon","SuggestionList"],"mappings":"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"}

package/dist/inputs/select/select.js

@@ -34,7 +34,7 @@ const de = F.forwardRef(function({
 }, K) {
   const M = F.Children.toArray(
     t
-  ), l = c(""), j = c(!1), h = c(!1), [q, S] = w(null), i = c(null), [y, b] = w(!1), B = J(K, i), R = Z(M, m || ""), k = R == null ? x || "" : R.props.label;
+  ), l = c(""), j = c(!1), h = c(!1), [q, y] = w(null), i = c(null), [S, b] = w(!1), B = J(K, i), R = Z(M, m || ""), k = R == null ? x || "" : R.props.label;
   function _() {
     b(!0);
   }
@@ -58,14 +58,14 @@ const de = F.forwardRef(function({
     l.current = s, n && n(e);
   }
   function I(e) {
-    S(e.currentTarget);
+    y(e.currentTarget);
     const s = l.current = e.key;
     l.current = "";
     const r = e.key;
-    s && (r === "Enter" || r === " ") && (y ? o() : _()), f && f(e);
+    s && (r === "Enter" || r === " ") && (S ? o() : _()), f && f(e);
   }
   function P(e) {
-    S(e.currentTarget), j.current = document.activeElement === e.currentTarget, p && p(e);
+    y(e.currentTarget), j.current = document.activeElement === e.currentTarget, p && p(e);
   }
   function z(e) {
     h.current && (h.current = !1, o()), _(), d && d(e);
@@ -75,7 +75,7 @@ const de = F.forwardRef(function({
       W,
       {
         ref: B,
-        className: L(T, "tcn-select", "tcn-control", O.select),
+        className: L(T, "tcn-select", "tcn-entry", O.select),
         width: "100%",
         ...D,
         hAlign: "start",
@@ -90,7 +90,7 @@ const de = F.forwardRef(function({
     /* @__PURE__ */ u(
       Q,
       {
-        open: y,
+        open: S,
         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', '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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"}
+{"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-entry', 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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"}