@rpcbase/ui 0.157.0 → 0.158.0

package/dist/index19.js

@@ -0,0 +1,661 @@
+import { j as F } from "./index28.js";
+import * as n from "react";
+import $t from "react-select";
+import { cn as Oe } from "./index2.js";
+import { resolveMessages as qt } from "./index44.js";
+import { getLocaleCacheKey as _t, parseLocaleCacheKey as Ut, getCachedCountryOptions as Qt, toSelectedCountry as Jt, buildFallbackSelectedCountry as Gt, getValidCountry as Yt, DEFAULT_COUNTRY as at, COMMON_IDD_PREFIXES as Xt, normalizeSearchValue as Zt, optionMatchIndex as it } from "./index45.js";
+import { normalizeInputValue as Te, formatWithAsYouType as ve, sanitizeDigits as T, detectNationalPrefixForDisplay as ee, getSuggestionState as Me, injectNationalPrefixDisplay as Le, shouldDisplayExplicitCountrySelection as ze, getLengthIssue as Be, stripPrefix as ut } from "./index46.js";
+import { captureSelectionSnapshot as en, resolveSelection as Se, skipFormattingCharactersLeft as ct, skipFormattingCharactersRight as tn } from "./index47.js";
+import { suggestionSelectStyles as nn, SuggestionOption as on, NullComponent as De, HiddenControl as rn, formatCountryOption as sn, SuggestionContext as ln } from "./index48.js";
+import { getCountryCallingCode as O } from "./index49.js";
+const an = n.forwardRef(
+  function(dt, ft) {
+    const {
+      value: V,
+      defaultCountry: Ie,
+      country: M,
+      locale: pt,
+      onChange: Ae,
+      onCountryChange: je,
+      className: mt,
+      inputClassName: ht,
+      disabled: te,
+      readOnly: se,
+      selectProps: gt,
+      autofillShimName: Ct,
+      messages: We,
+      renderValidationMessage: yt,
+      ...bt
+    } = dt, {
+      onFocus: He,
+      onBlur: Ke,
+      onKeyDown: $e,
+      name: Ne,
+      autoComplete: xt,
+      ...vt
+    } = bt, L = typeof Ie == "string" || typeof M == "string", le = _t(pt), ae = n.useMemo(
+      () => Ut(le),
+      [le]
+    ), ie = n.useMemo(
+      () => qt(ae, We),
+      [ae, We]
+    ), N = n.useMemo(
+      () => Qt(ae, le),
+      [le, ae]
+    ), ue = n.useCallback(
+      (e) => {
+        const t = N.find((r) => r.value === e);
+        return t ? Jt(t) : Gt(e);
+      },
+      [N]
+    ), m = n.useMemo(() => {
+      const e = Yt(Ie ?? M ?? at);
+      return N.some((t) => t.value === e) ? e : N[0]?.value ?? at;
+    }, [N, M, Ie]), k = n.useRef(L), ne = n.useRef(null), z = n.useRef("");
+    if (!ne.current)
+      if (!V)
+        ne.current = {
+          country: m,
+          inputValue: "",
+          normalizedValue: "",
+          hasExplicitCountrySelection: !1
+        }, z.current = "";
+      else {
+        const e = L ? m : void 0, t = Te(V, e, { allowJustPlus: !0 });
+        if (!t)
+          ne.current = {
+            country: m,
+            inputValue: "",
+            normalizedValue: "",
+            hasExplicitCountrySelection: !1
+          }, z.current = "";
+        else {
+          const {
+            international: r,
+            phoneNumber: d,
+            detectedCountry: l,
+            inferredCountry: u,
+            hasExplicitInternationalPrefix: a
+          } = ve(t, e), o = l ?? void 0;
+          let s = o ?? m;
+          const i = T(V ?? ""), b = typeof V == "string" ? /^\s*\+/.test(V) : !1, g = T(r), _ = O(s), I = ee(
+            i,
+            g,
+            _,
+            b
+          ), H = Me(
+            t,
+            e,
+            d ?? void 0,
+            {
+              hasRemovedNationalPrefix: I,
+              detectedCountry: o,
+              hasExplicitInternationalPrefix: a
+            }
+          ), E = !H.shouldSuggest && !o ? u : void 0;
+          E && (s = E), (o || E) && (k.current = !0);
+          const K = O(s), ge = E ? ee(
+            i,
+            g,
+            K,
+            b
+          ) : I, Y = Le(r, K, {
+            force: ge
+          }), $ = o ?? void 0, P = k.current;
+          ne.current = {
+            country: s,
+            inputValue: Y,
+            normalizedValue: t,
+            hasExplicitCountrySelection: P && ze(H, {
+              detectedCountry: $,
+              hasExplicitInternationalPrefix: a
+            })
+          }, z.current = t;
+        }
+      }
+    const we = ne.current, [x, B] = n.useState(we.country), [ce, A] = n.useState(we.inputValue), [de, v] = n.useState(""), [Q, h] = n.useState(!1), [fe, C] = n.useState(-1), [St, qe] = n.useState(!1), [Dt, j] = n.useState(null), [_e, W] = n.useState(
+      we.hasExplicitCountrySelection
+    ), y = n.useRef(null), S = n.useRef(""), X = n.useRef(null), Z = n.useRef("smooth"), J = n.useRef(null), Ue = n.useCallback(() => {
+      const e = Z.current;
+      return Z.current = "smooth", e;
+    }, []), D = typeof M == "string", Re = D ? M : x, f = Re ?? m, oe = n.useRef(null);
+    n.useImperativeHandle(ft, () => oe.current, []), n.useLayoutEffect(() => {
+      const e = J.current;
+      if (!e)
+        return;
+      const t = oe.current;
+      if (J.current = null, !t)
+        return;
+      const { start: r, end: d } = e;
+      t.setSelectionRange(r, d);
+    }, [ce]);
+    const It = gt ?? {}, {
+      styles: Qe,
+      components: Je,
+      classNamePrefix: Nt,
+      formatOptionLabel: ke,
+      ...wt
+    } = It, { noOptionsMessage: Rt, ...kt } = wt, Vt = n.useMemo(
+      () => ({
+        ...nn,
+        ...Qe ?? {}
+      }),
+      [Qe]
+    ), Et = n.useMemo(() => {
+      const e = {
+        Control: rn,
+        IndicatorsContainer: De,
+        DropdownIndicator: De,
+        IndicatorSeparator: De,
+        ValueContainer: De
+      }, t = Je ?? {};
+      return t.Option ? {
+        ...e,
+        ...t
+      } : {
+        ...e,
+        ...t,
+        Option: on
+      };
+    }, [Je]), Ge = n.useRef(!1), w = n.useCallback(
+      (e) => {
+        Ge.current = !0;
+        const t = ue(e);
+        return je?.(e, t), t;
+      },
+      [je, ue]
+    );
+    n.useEffect(() => () => {
+      X.current != null && typeof window < "u" && window.clearTimeout(X.current);
+    }, []), n.useEffect(() => {
+      if (V == null)
+        return;
+      const e = k.current ? f : void 0, t = z.current, r = Te(V, e, {
+        allowJustPlus: !0,
+        previousValue: t
+      });
+      if (z.current = r, S.current = "", !r) {
+        A(""), h(!1), v(""), j(null), y.current = null, W(!1);
+        const R = L ? m : f;
+        !D && x !== R && (B(R), w(R));
+        return;
+      }
+      if (r === "0") {
+        A("0"), h(!1), v(""), j(null), y.current = null, W(!1);
+        return;
+      }
+      if (r === "+") {
+        A("+"), h(!0), v(""), j(null), y.current = null, W(!1);
+        const R = L ? m : f;
+        !D && x !== R && (B(R), w(R));
+        return;
+      }
+      const {
+        international: d,
+        phoneNumber: l,
+        detectedCountry: u,
+        inferredCountry: a,
+        hasExplicitInternationalPrefix: o
+      } = ve(r, e), s = u ?? void 0;
+      let i = s ?? e ?? f;
+      const b = T(V ?? ""), g = typeof V == "string" ? /^\s*\+/.test(V) : !1, _ = T(d), I = O(i), H = ee(
+        b,
+        _,
+        I,
+        g
+      ), E = Me(
+        r,
+        e,
+        l ?? void 0,
+        {
+          hasRemovedNationalPrefix: H,
+          detectedCountry: s,
+          hasExplicitInternationalPrefix: o
+        }
+      ), U = !E.shouldSuggest && !s ? a : void 0, K = U ?? i;
+      (s || U) && (k.current = !0), !D && K !== x && (B(K), w(K)), i = K, y.current && y.current !== i && (y.current = null);
+      const Y = O(i), $ = U ? ee(
+        b,
+        _,
+        Y,
+        g
+      ) : H, P = Le(d, Y, {
+        force: $
+      }), Ce = s ?? void 0, ye = y.current != null || ze(E, {
+        detectedCountry: Ce,
+        hasExplicitInternationalPrefix: o
+      });
+      A(P), h(E.shouldSuggest), v(E.query), j(k.current ? Be(r, i) : null), W(k.current && ye);
+    }, [
+      V,
+      f,
+      m,
+      L,
+      D,
+      w,
+      x
+    ]), n.useEffect(() => {
+      if (Ge.current || !k.current)
+        return;
+      const e = Re ?? m;
+      e && w(e);
+    }, [m, w, Re]), n.useEffect(() => {
+      D && M && M !== x && B(M);
+    }, [M, D, x]);
+    const G = n.useCallback(
+      (e) => {
+        const t = ue(e.country);
+        Ae?.({
+          ...e,
+          selectedCountry: t
+        });
+      },
+      [Ae, ue]
+    ), pe = n.useCallback(() => {
+      typeof window > "u" || (X.current != null && window.clearTimeout(X.current), X.current = window.setTimeout(() => {
+        S.current = "", X.current = null;
+      }, 800));
+    }, []), Pt = n.useCallback(
+      (e) => {
+        const t = e.target, r = en(t), d = t.value;
+        S.current = "";
+        const l = k.current ? f : void 0, u = l ? O(l) : "", a = T(d), o = d.trim().startsWith("+"), s = u ? a.startsWith(u) : !1, i = a.startsWith("0"), b = Xt.some((p) => a.startsWith(p)), g = !!l && !b && (s && a.slice(u.length).startsWith("0") || !o && i && a.length > 1 || o && i && a.length > 1 && !s), _ = z.current, I = Te(d, l, {
+          allowJustPlus: !0,
+          removeNationalPrefix: g,
+          previousValue: _
+        });
+        if (z.current = I, !I) {
+          A(""), h(!1), v(""), C(-1), j(null), y.current = null, W(!1), J.current = Se(r, "");
+          const p = L ? m : f;
+          !D && x !== p && (B(p), w(p));
+          const re = O(p);
+          G({
+            formattedInternational: "",
+            formattedNational: "",
+            e164: null,
+            country: p,
+            countryCallingCode: re,
+            nationalNumber: "",
+            rawInput: "",
+            isValid: !1
+          });
+          return;
+        }
+        if (I === "0") {
+          A("0"), h(!1), v(""), C(-1), j(null), y.current = null, W(!1), J.current = Se(r, "0");
+          const p = L ? m : f;
+          !D && x !== p && (B(p), w(p));
+          const re = O(p);
+          G({
+            formattedInternational: "0",
+            formattedNational: "0",
+            e164: null,
+            country: p,
+            countryCallingCode: re,
+            nationalNumber: "0",
+            rawInput: "0",
+            isValid: !1
+          });
+          return;
+        }
+        if (I === "+") {
+          A("+"), h(!0), v(""), C(0), j(null), y.current = null, W(!1), J.current = Se(r, "+");
+          const p = L ? m : f;
+          !D && x !== p && (B(p), w(p));
+          const re = O(p);
+          G({
+            formattedInternational: "+",
+            formattedNational: "",
+            e164: null,
+            country: p,
+            countryCallingCode: re,
+            nationalNumber: "",
+            rawInput: "+",
+            isValid: !1
+          });
+          return;
+        }
+        const {
+          international: H,
+          national: E,
+          phoneNumber: U,
+          detectedCountry: K,
+          inferredCountry: ge,
+          hasExplicitInternationalPrefix: Y
+        } = ve(I, l), $ = K ?? void 0;
+        let P = $ ?? l ?? f;
+        const Ce = T(H), st = O(P), ye = ee(
+          a,
+          Ce,
+          st,
+          o
+        ), R = Me(
+          I,
+          l,
+          U ?? void 0,
+          {
+            hasRemovedNationalPrefix: ye,
+            detectedCountry: $,
+            hasExplicitInternationalPrefix: Y
+          }
+        ), Fe = !R.shouldSuggest && !$ ? ge : void 0, be = Fe ?? P;
+        ($ || Fe) && (k.current = !0), !D && be !== x && (B(be), w(be)), P = be, y.current && y.current !== P && (y.current = null);
+        const xe = O(P), At = T(I), jt = ut(At, xe), Wt = Fe ? ee(
+          a,
+          Ce,
+          xe,
+          o
+        ) : ye, lt = Le(H, xe, {
+          force: Wt
+        }), Ht = $ ?? void 0;
+        J.current = Se(r, lt), A(lt), h(R.shouldSuggest), v(R.query), C(R.shouldSuggest ? 0 : -1), j(k.current ? Be(I, P) : null);
+        const Kt = y.current != null || ze(R, {
+          detectedCountry: Ht,
+          hasExplicitInternationalPrefix: Y
+        });
+        W(k.current && Kt), G({
+          formattedInternational: H,
+          formattedNational: E,
+          e164: U?.number ?? null,
+          country: P,
+          countryCallingCode: xe,
+          nationalNumber: jt,
+          rawInput: I,
+          isValid: U?.isValid() ?? !1
+        });
+      },
+      [
+        f,
+        G,
+        m,
+        L,
+        D,
+        w,
+        x
+      ]
+    ), Ve = n.useCallback(
+      (e) => {
+        if (!e)
+          return;
+        const t = T(z.current || ce), r = O(f);
+        let l = t.startsWith(r) ? t.slice(r.length) : t;
+        l ? l.startsWith(e.dialCode) || (l = `${e.dialCode}${l}`) : l = e.dialCode;
+        const u = `+${l}`;
+        z.current = u;
+        const { international: a, national: o, phoneNumber: s } = ve(
+          u,
+          e.value
+        ), i = e.value;
+        y.current = i, k.current = !0, A(a), J.current = {
+          start: a.length,
+          end: a.length
+        }, h(!1), v(""), C(-1), j(Be(u, i)), !D && i !== x && B(i), w(i);
+        const b = T(u), g = s?.countryCallingCode ?? e.dialCode, _ = ut(b, g);
+        W(!0), G({
+          formattedInternational: a,
+          formattedNational: o,
+          e164: s?.number ?? null,
+          country: i,
+          countryCallingCode: g,
+          nationalNumber: _,
+          rawInput: u,
+          isValid: s?.isValid() ?? !1
+        }), requestAnimationFrame(() => {
+          oe.current?.focus();
+        });
+      },
+      [f, G, ce, D, w, x]
+    ), c = n.useMemo(() => {
+      if (!Q)
+        return [];
+      const e = [], t = (o) => {
+        e.some((s) => s.value === o.value) || e.push(o);
+      }, r = N.find((o) => o.value === m), d = N.find((o) => o.value === f), l = de.trim(), u = T(l), a = Zt(l);
+      return !u && !a ? (r && t(r), d && t(d), N.forEach(t), e) : (u && N.filter((s) => s.dialCode.startsWith(u)).sort((s, i) => {
+        const b = s.dialCode === u, g = i.dialCode === u;
+        return b && !g ? -1 : !b && g ? 1 : s.dialCode.length - i.dialCode.length;
+      }).forEach(t), a && N.filter(
+        (s) => s.normalizedSearchableTokens.some((i) => i.includes(a))
+      ).sort((s, i) => {
+        const b = it(s.normalizedSearchableTokens, a), g = it(i.normalizedSearchableTokens, a);
+        return b !== g ? b - g : s.name.localeCompare(i.name);
+      }).forEach(t), d && t(d), r && t(r), e.length === 0 && N.forEach(t), e);
+    }, [f, N, de, m, Q]), q = St && Q && c.length > 0;
+    n.useEffect(() => {
+      q || (Z.current = "smooth");
+    }, [q]), n.useEffect(() => {
+      if (!q) {
+        C(-1);
+        return;
+      }
+      if (c.length === 0) {
+        C(-1);
+        return;
+      }
+      C((e) => e < 0 || e >= c.length ? 0 : e);
+    }, [c, q]);
+    const me = fe >= 0 ? c[fe] ?? null : null;
+    n.useEffect(() => {
+      fe < 0 && (Z.current = "smooth");
+    }, [fe]);
+    const Ye = n.useCallback(
+      (e) => {
+        const t = c.findIndex((r) => r.value === e.value);
+        t !== -1 && C(t);
+      },
+      [c]
+    ), Ee = n.useCallback(
+      (e, t) => ke ? ke(e, t) : sn(e),
+      [ke]
+    ), Xe = n.useCallback(
+      (e) => Ee(e, {
+        context: "menu",
+        inputValue: de,
+        selectValue: []
+      }),
+      [de, Ee]
+    ), Ft = n.useMemo(
+      () => ({
+        highlightedValue: me?.value ?? null,
+        setHighlightedOption: Ye,
+        renderOptionLabel: Xe,
+        consumeScrollBehavior: Ue
+      }),
+      [Ue, me, Xe, Ye]
+    ), he = N.find((e) => e.value === f), Ze = he?.flag ?? "", Ot = _e ? ie.selectedCountryLabel(he?.name ?? f ?? null) : ie.selectCountryLabel, et = _e && !!Ze, Pe = Dt === "TOO_LONG" ? ie.lengthTooLong(he?.name ?? f ?? null) : null, Tt = he?.name ?? f ?? null;
+    let tt = null;
+    if (Pe) {
+      const e = yt?.({
+        message: Pe,
+        code: "TOO_LONG",
+        countryName: Tt
+      });
+      tt = e === void 0 ? /* @__PURE__ */ F.jsx("p", { className: "mt-1 text-xs text-destructive", children: /* @__PURE__ */ F.jsx("span", { children: Pe }) }) : e;
+    }
+    const nt = n.useCallback(
+      (e) => {
+        S.current = `${S.current}${e}`.slice(-12), v(S.current), h(!0), pe();
+      },
+      [pe]
+    ), ot = n.useCallback(() => {
+      const e = S.current;
+      e && (S.current = e.slice(0, -1), v(S.current), S.current && pe());
+    }, [pe]), Mt = n.useCallback(
+      (e) => {
+        if ($e?.(e), e.defaultPrevented)
+          return;
+        const t = e.key;
+        if (e.metaKey || e.ctrlKey || e.altKey)
+          return;
+        const r = e.currentTarget, d = r.value, l = r.selectionStart ?? 0, u = r.selectionEnd ?? l, a = l === u;
+        if (t === "Backspace" && a) {
+          const o = ct(d, l);
+          o !== l && r.setSelectionRange(o, o);
+        } else if (t === "ArrowLeft" && a) {
+          const o = ct(d, l);
+          if (o !== l) {
+            e.preventDefault(), r.setSelectionRange(o, o);
+            return;
+          }
+        } else if (t === "ArrowRight" && a) {
+          const o = tn(d, u);
+          if (o !== u) {
+            e.preventDefault(), r.setSelectionRange(o, o);
+            return;
+          }
+        }
+        if (t === "ArrowDown") {
+          if (Z.current = e.repeat ? "auto" : "smooth", e.preventDefault(), !Q) {
+            h(!0), C(c.length > 0 ? 0 : -1);
+            return;
+          }
+          c.length > 0 && C((o) => o < 0 ? 0 : (o + 1) % c.length);
+          return;
+        }
+        if (t === "ArrowUp") {
+          if (Z.current = e.repeat ? "auto" : "smooth", e.preventDefault(), !Q) {
+            h(!0), C(c.length > 0 ? c.length - 1 : -1);
+            return;
+          }
+          c.length > 0 && C((o) => o < 0 ? c.length - 1 : (o - 1 + c.length) % c.length);
+          return;
+        }
+        if (/^[a-z]$/i.test(t)) {
+          e.preventDefault(), Q || (h(!0), C(c.length > 0 ? 0 : -1)), nt(t.toLowerCase());
+          return;
+        }
+        if (q) {
+          if (t === "Backspace" && S.current) {
+            e.preventDefault(), ot();
+            return;
+          }
+          if (t === "Escape") {
+            e.preventDefault(), S.current = "", v(""), h(!1);
+            return;
+          }
+          if (t === "Enter" && c.length > 0) {
+            e.preventDefault();
+            const o = me ?? c[0];
+            Ve(o);
+            return;
+          }
+        }
+      },
+      [
+        nt,
+        c,
+        Ve,
+        me,
+        $e,
+        ot,
+        Q,
+        q
+      ]
+    ), Lt = n.useCallback(
+      (e) => {
+        qe(!0), He?.(e);
+      },
+      [He]
+    ), zt = n.useCallback(
+      (e) => {
+        qe(!1), h(!1), S.current = "", v(""), Ke?.(e);
+      },
+      [Ke]
+    ), Bt = n.useCallback(() => {
+      te || se || (S.current = "", v(""), h(!0), C((e) => e < 0 ? 0 : e), requestAnimationFrame(() => {
+        oe.current?.focus();
+      }));
+    }, [te, se]), rt = Ct ?? (Ne ? `${Ne}_shim` : void 0);
+    return /* @__PURE__ */ F.jsxs("div", { className: Oe("relative flex flex-col", mt), children: [
+      /* @__PURE__ */ F.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ F.jsx(
+          "input",
+          {
+            ...vt,
+            ref: oe,
+            type: "tel",
+            className: Oe(
+              "flex h-10 w-full rounded-md border border-input bg-background py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+              "pl-11 pr-3",
+              ht
+            ),
+            name: Ne,
+            value: ce,
+            onChange: Pt,
+            onFocus: Lt,
+            onBlur: zt,
+            onKeyDown: Mt,
+            disabled: te,
+            readOnly: se,
+            autoComplete: xt ?? "off"
+          }
+        ),
+        /* @__PURE__ */ F.jsx(
+          "button",
+          {
+            type: "button",
+            className: Oe(
+              "absolute left-3 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded border text-lg leading-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              et ? "border-transparent" : "border-dashed border-border text-muted-foreground",
+              te ? "cursor-not-allowed opacity-50" : se ? "cursor-default" : "cursor-pointer hover:bg-muted"
+            ),
+            "aria-label": Ot,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: Bt,
+            tabIndex: -1,
+            disabled: te,
+            children: /* @__PURE__ */ F.jsx("span", { "aria-hidden": "true", children: et ? Ze : "?" })
+          }
+        )
+      ] }),
+      rt ? /* @__PURE__ */ F.jsx(
+        "input",
+        {
+          tabIndex: -1,
+          autoComplete: "tel",
+          name: rt,
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0"
+        }
+      ) : null,
+      /* @__PURE__ */ F.jsx(
+        "div",
+        {
+          className: "absolute left-0 top-full z-30 mt-1",
+          style: {
+            pointerEvents: q ? "auto" : "none",
+            width: "min(260px, 100%)"
+          },
+          onMouseDown: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ F.jsx(ln.Provider, { value: Ft, children: /* @__PURE__ */ F.jsx(
+            $t,
+            {
+              ...kt,
+              menuIsOpen: q,
+              options: c,
+              value: null,
+              components: Et,
+              styles: Vt,
+              isClearable: !1,
+              isSearchable: !1,
+              backspaceRemovesValue: !1,
+              tabSelectsValue: !1,
+              menuShouldScrollIntoView: !1,
+              onChange: Ve,
+              classNamePrefix: Nt ?? "phone-number-suggestions",
+              placeholder: "",
+              formatOptionLabel: Ee,
+              noOptionsMessage: Rt ?? (() => ie.noMatches)
+            }
+          ) })
+        }
+      ),
+      tt
+    ] });
+  }
+);
+an.displayName = "PhoneNumberInput";
+export {
+  an as PhoneNumberInput
+};
+//# sourceMappingURL=index19.js.map