mainstack-design-system 1.23.1 → 1.23.2

package/dist/mainstack-design-system633.js

@@ -1,178 +1,409 @@
 'use client';
-import { jsx as a, Fragment as S } from "react/jsx-runtime";
-import { D as U } from "./index-eeqUt-Tb.js";
-import { b as V } from "./index-RoCFhqzC.js";
-import { useResponsivePopoverDrawerContext as X } from "./mainstack-design-system617.js";
-import * as E from "react";
-import { useId as T, useRef as x, useContext as A, useInsertionEffect as _, useMemo as z, Children as B, isValidElement as F, useState as b } from "react";
-import { M as G, i as O, u as Y, L as q } from "./MotionConfigContext-SYEZVO_k.js";
-import { u as W, P as J, b as Q } from "./use-presence-Dept-wE7.js";
-function k(e, r) {
-  if (typeof e == "function")
-    return e(r);
-  e != null && (e.current = r);
-}
-function Z(...e) {
-  return (r) => {
-    let t = !1;
-    const o = e.map((s) => {
-      const n = k(s, r);
-      return !t && typeof n == "function" && (t = !0), n;
+import { jsxs as q, jsx as it } from "react/jsx-runtime";
+import w, { useRef as lt, useState as v, useCallback as B, useEffect as O, forwardRef as st } from "react";
+import { InputRoot as ft } from "./mainstack-design-system455.js";
+import { InputField as ct } from "./mainstack-design-system456.js";
+import "./mainstack-design-system454.js";
+import { w as S, x as yt, y as F, A as J, z as L, B as pt, C as mt, P as m, I as dt, D as Ct, E as K, F as gt, G as ht, c as Nt, k as bt } from "./utils-C21jc49d.js";
+import { usePhoneNumberContext as vt } from "./mainstack-design-system604.js";
+function A(t, n) {
+  return Tt(t) || It(t, n) || Ot(t, n) || At();
+}
+function At() {
+  throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
+}
+function Ot(t, n) {
+  if (t) {
+    if (typeof t == "string") return z(t, n);
+    var e = Object.prototype.toString.call(t).slice(8, -1);
+    if (e === "Object" && t.constructor && (e = t.constructor.name), e === "Map" || e === "Set") return Array.from(t);
+    if (e === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)) return z(t, n);
+  }
+}
+function z(t, n) {
+  (n == null || n > t.length) && (n = t.length);
+  for (var e = 0, a = new Array(n); e < n; e++) a[e] = t[e];
+  return a;
+}
+function It(t, n) {
+  var e = t == null ? null : typeof Symbol < "u" && t[Symbol.iterator] || t["@@iterator"];
+  if (e != null) {
+    var a, r, o, s, f = [], c = !0, u = !1;
+    try {
+      if (o = (e = e.call(t)).next, n !== 0) for (; !(c = (a = o.call(e)).done) && (f.push(a.value), f.length !== n); c = !0) ;
+    } catch (l) {
+      u = !0, r = l;
+    } finally {
+      try {
+        if (!c && e.return != null && (s = e.return(), Object(s) !== s)) return;
+      } finally {
+        if (u) throw r;
+      }
+    }
+    return f;
+  }
+}
+function Tt(t) {
+  if (Array.isArray(t)) return t;
+}
+function Pt(t) {
+  var n = this, e = t.value, a = t.onChange, r = t.country, o = t.defaultCountry, s = t.international, f = t.withCountryCallingCode, c = t.useNationalFormatForDefaultCountryValue, u = t.metadata;
+  typeof f == "boolean" && !(r && s) && console.error("[react-phone-number-input] `withCountryCallingCode` property can only be used together with `country` and `international` properties"), r && o && console.error("[react-phone-number-input] When `country` property is passed, `defaultCountry` property has no effect and therefore shouldn't be passed"), typeof s == "boolean" && !r && console.error("[react-phone-number-input] `international` property can only be used together with `country` property");
+  var l = Ft({
+    international: s,
+    country: r,
+    defaultCountry: o,
+    withCountryCallingCode: f
+  }), y = lt(), C = function(p, d, b) {
+    console.error("[react-phone-number-input] Expected phone number ".concat(p, " to correspond to country ").concat(d, " but ").concat(b ? "in reality it corresponds to country " + b : "it doesn't", ".")), y.current = !0;
+  }, g = function(p) {
+    return e && yt(e), wt(e, r, o, l, c, u, function() {
+      p && p.onCountryMismatch && p.onCountryMismatch();
+      for (var d = arguments.length, b = new Array(d), P = 0; P < d; P++)
+        b[P] = arguments[P];
+      C.apply(n, b);
     });
-    if (t)
-      return () => {
-        for (let s = 0; s < o.length; s++) {
-          const n = o[s];
-          typeof n == "function" ? n() : k(e[s], null);
+  }, j = v(r), I = A(j, 2), E = I[0], X = I[1], Z = v(o), V = A(Z, 2), tt = V[0], et = V[1], nt = v(g()), D = A(nt, 2), rt = D[0], h = D[1], at = v(e), M = A(at, 2), T = M[0], N = M[1], ot = v(), W = A(ot, 2);
+  W[0];
+  var k = W[1], U = B(function() {
+    return k({});
+  }, [k]);
+  function Y(i) {
+    if (i) {
+      l === "NATIONAL_PART_OF_INTERNATIONAL" && (i = "+".concat(F(r, u)).concat(i));
+      var p = new J(r || o, u);
+      return p.input(i), p.getNumberValue();
+    }
+  }
+  O(function() {
+    e !== T && (N(e), h(g()));
+  }, [e]), O(function() {
+    if (r !== E) {
+      X(r);
+      var i, p = g({
+        onCountryMismatch: function() {
+          i = !0;
+        }
+      });
+      h(p), i && N(Y(p));
+    }
+  }, [r]), O(function() {
+    o !== tt && (et(o), h(g()));
+  }, [o]), O(function() {
+    T !== e && a(T);
+  }, [T]);
+  var ut = B(function(i) {
+    var p;
+    if (r)
+      if (l === "INTERNATIONAL") {
+        var d = S(r, u);
+        if (i.indexOf(d) !== 0) {
+          if (i && i[0] !== "+")
+            i = d + i;
+          else if (!y.current) return h(d), N(void 0), U();
         }
-      };
+      } else
+        i && i[0] === "+" && (i = i.slice(1));
+    else o || i && i[0] !== "+" && (i = "+" + i);
+    i && (p = Y(i)), h(i), N(p);
+  }, [r, l, o, u, h, N, U, y]);
+  return {
+    phoneDigits: rt,
+    setPhoneDigits: ut,
+    inputFormat: l
   };
 }
-function ee(...e) {
-  return E.useCallback(Z(...e), e);
+function wt(t, n, e, a, r, o, s) {
+  if (n && a === "INTERNATIONAL") {
+    var f = S(n, o);
+    return t ? (t.indexOf(f) !== 0 && s(t, n), t) : f;
+  }
+  if (!t)
+    return "";
+  if (!n && !e)
+    return t;
+  var c = new J(void 0, o);
+  c.input(t);
+  var u = c.getNumber();
+  if (u)
+    if (n)
+      switch (u.country && u.country !== n ? s(t, n, u.country) : u.countryCallingCode !== F(n, o) && s(t, n), a) {
+        case "NATIONAL":
+          return L(u.formatNational());
+        case "NATIONAL_PART_OF_INTERNATIONAL":
+          return L(pt(u.formatInternational(), S(n, o)));
+        case "INTERNATIONAL":
+          throw new Error('`inputFormat: "INTERNATIONAL"` case should\'ve already been handled earlier in the code');
+        case "INTERNATIONAL_OR_NATIONAL":
+          throw new Error('`inputFormat: "INTERNATIONAL_OR_NATIONAL"` is not possible when `country` is fixed');
+        default:
+          throw new Error("Unknown `inputFormat`: ".concat(a));
+      }
+    else
+      return u.countryCallingCode && u.countryCallingCode === F(e, o) && r ? L(u.formatNational()) : t;
+  else
+    return "";
+}
+function Ft(t) {
+  var n = t.international, e = t.country, a = t.defaultCountry, r = t.withCountryCallingCode;
+  return e ? n ? r ? "INTERNATIONAL" : "NATIONAL_PART_OF_INTERNATIONAL" : "NATIONAL" : a ? "INTERNATIONAL_OR_NATIONAL" : "INTERNATIONAL";
 }
-class te extends E.Component {
-  getSnapshotBeforeUpdate(r) {
-    const t = this.props.childRef.current;
-    if (t && r.isPresent && !this.props.isPresent) {
-      const o = t.offsetParent, s = O(o) && o.offsetWidth || 0, n = this.props.sizeRef.current;
-      n.height = t.offsetHeight || 0, n.width = t.offsetWidth || 0, n.top = t.offsetTop, n.left = t.offsetLeft, n.right = s - n.width - n.left;
+var Rt = ["Component", "country", "defaultCountry", "useNationalFormatForDefaultCountryValue", "value", "onChange", "metadata", "international", "withCountryCallingCode"];
+function _() {
+  return _ = Object.assign ? Object.assign.bind() : function(t) {
+    for (var n = 1; n < arguments.length; n++) {
+      var e = arguments[n];
+      for (var a in e)
+        Object.prototype.hasOwnProperty.call(e, a) && (t[a] = e[a]);
     }
-    return null;
+    return t;
+  }, _.apply(this, arguments);
+}
+function jt(t, n) {
+  if (t == null) return {};
+  var e = Et(t, n), a, r;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(t);
+    for (r = 0; r < o.length; r++)
+      a = o[r], !(n.indexOf(a) >= 0) && Object.prototype.propertyIsEnumerable.call(t, a) && (e[a] = t[a]);
   }
+  return e;
+}
+function Et(t, n) {
+  if (t == null) return {};
+  var e = {}, a = Object.keys(t), r, o;
+  for (o = 0; o < a.length; o++)
+    r = a[o], !(n.indexOf(r) >= 0) && (e[r] = t[r]);
+  return e;
+}
+function R(t, n) {
+  var e = t.Component, a = t.country, r = t.defaultCountry, o = t.useNationalFormatForDefaultCountryValue, s = o === void 0 ? !0 : o, f = t.value, c = t.onChange, u = t.metadata, l = t.international, y = t.withCountryCallingCode, C = jt(t, Rt), g = Pt({
+    value: f,
+    onChange: c,
+    country: a,
+    defaultCountry: r,
+    international: l,
+    withCountryCallingCode: y,
+    useNationalFormatForDefaultCountryValue: s,
+    metadata: u
+  }), j = g.phoneDigits, I = g.setPhoneDigits, E = g.inputFormat;
+  return /* @__PURE__ */ w.createElement(e, _({}, C, {
+    ref: n,
+    metadata: u,
+    inputFormat: E,
+    international: l,
+    withCountryCallingCode: y,
+    country: a || r,
+    value: j,
+    onChange: I
+  }));
+}
+R = /* @__PURE__ */ w.forwardRef(R);
+R.propTypes = {
+  /**
+   * The phone number (in E.164 format).
+   * Examples: `"+12"`, `"+12133734253"`.
+   * An "empty" `value` could be represented by any "falsy" value like `undefined`, `null` or an empty string `""`.
+   */
+  value: m.string,
+  /**
+   * A function of `value: string?`.
+   * Updates the `value` property (to `undefined` in case it's empty).
+   */
+  onChange: m.func.isRequired,
+  /**
+   * A two-letter country code for formatting `value`
+   * as a national phone number (example: `(213) 373-4253`),
+   * or as an international phone number without "country calling code"
+   * if `international` property is passed (example: `213 373 4253`).
+   * Example: "US".
+   * If no `country` is passed then `value`
+   * is formatted as an international phone number.
+   * (example: `+1 213 373 4253`)
+   */
+  country: m.string,
+  /**
+   * A two-letter country code for formatting `value`
+   * when a user inputs a national phone number (example: `(213) 373-4253`).
+   * The user can still input a phone number in international format.
+   * Example: "US".
+   * `country` and `defaultCountry` properties are mutually exclusive.
+   */
+  defaultCountry: m.string,
+  /**
+   * If `country` property is passed along with `international={true}` property
+   * then the phone number will be input in "international" format for that `country`
+   * (without "country calling code").
+   * For example, if `country="US"` property is passed to "without country select" input
+   * then the phone number will be input in the "national" format for `US` (`(213) 373-4253`).
+   * But if both `country="US"` and `international={true}` properties are passed then
+   * the phone number will be input in the "international" format for `US` (`213 373 4253`)
+   * (without "country calling code" `+1`).
+   */
+  international: m.bool,
+  /**
+   * If `country` and `international` properties are set,
+   * then by default it won't include "country calling code" in the input field.
+   * To change that, pass `withCountryCallingCode` property,
+   * and it will include "country calling code" in the input field.
+   */
+  withCountryCallingCode: m.bool,
+  /**
+   * A component that renders the `<input/>` itself and also
+   * parses and formats its `value` as the user inputs it.
+   * See `InputBasic.js` and `InputSmart.js` for an example.
+   */
+  Component: m.elementType.isRequired,
   /**
-   * Required with getSnapshotBeforeUpdate to stop React complaining.
+   * When `defaultCountry` is defined and the initial `value` corresponds to `defaultCountry`,
+   * then the `value` will be formatted as a national phone number by default.
+   * To format the initial `value` of `defaultCountry` as an international number instead
+   * set `useNationalFormatForDefaultCountryValue` property to `true`.
    */
-  componentDidUpdate() {
+  useNationalFormatForDefaultCountryValue: m.bool,
+  /**
+   * `libphonenumber-js` metadata.
+   */
+  metadata: mt
+};
+var Lt = ["type", "autoComplete", "smartCaret", "metadata"];
+function x() {
+  return x = Object.assign ? Object.assign.bind() : function(t) {
+    for (var n = 1; n < arguments.length; n++) {
+      var e = arguments[n];
+      for (var a in e)
+        Object.prototype.hasOwnProperty.call(e, a) && (t[a] = e[a]);
+    }
+    return t;
+  }, x.apply(this, arguments);
+}
+function St(t, n) {
+  if (t == null) return {};
+  var e = _t(t, n), a, r;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(t);
+    for (r = 0; r < o.length; r++)
+      a = o[r], !(n.indexOf(a) >= 0) && Object.prototype.propertyIsEnumerable.call(t, a) && (e[a] = t[a]);
   }
-  render() {
-    return this.props.children;
+  return e;
+}
+function _t(t, n) {
+  if (t == null) return {};
+  var e = {}, a = Object.keys(t), r, o;
+  for (o = 0; o < a.length; o++)
+    r = a[o], !(n.indexOf(r) >= 0) && (e[r] = t[r]);
+  return e;
+}
+function Q(t) {
+  function n(e, a) {
+    var r = e.type, o = r === void 0 ? "tel" : r, s = e.autoComplete, f = s === void 0 ? "tel" : s, c = e.smartCaret, u = c === void 0 ? !0 : c, l = e.metadata, y = l === void 0 ? t : l, C = St(e, Lt);
+    return /* @__PURE__ */ w.createElement(R, x({}, C, {
+      type: o,
+      autoComplete: f,
+      metadata: y,
+      ref: a,
+      Component: u ? dt : Ct
+    }));
   }
+  return n = /* @__PURE__ */ w.forwardRef(n), n.propTypes = {
+    /**
+     * HTML `<input/>` `type` attribute.
+     */
+    type: m.string,
+    /**
+     * HTML `<input/>` `autocomplete` attribute.
+     */
+    autoComplete: m.string,
+    /**
+     * By default, the caret position is being "intelligently" managed
+     * while a user inputs a phone number.
+     * This "smart" caret behavior can be turned off
+     * by passing `smartCaret={false}` property.
+     * This is just an "escape hatch" for any possible caret position issues.
+     */
+    // Is `true` by default.
+    smartCaret: m.bool,
+    /**
+     * `libphonenumber-js` metadata.
+     */
+    metadata: m.object
+  }, n;
+}
+Q();
+function $(t, n) {
+  var e = Array.prototype.slice.call(n);
+  return e.push(K), t.apply(this, e);
+}
+Q(K);
+function G() {
+  return $(ht, arguments);
+}
+function H() {
+  return $(F, arguments);
 }
-function ne({ children: e, isPresent: r, anchorX: t, root: o }) {
-  const s = T(), n = x(null), h = x({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    right: 0
-  }), { nonce: v } = A(G), P = ee(n, e?.ref);
-  return _(() => {
-    const { width: i, height: g, top: l, left: u, right: p } = h.current;
-    if (r || !n.current || !i || !g)
-      return;
-    const m = t === "left" ? `left: ${u}` : `right: ${p}`;
-    n.current.dataset.motionPopId = s;
-    const f = document.createElement("style");
-    v && (f.nonce = v);
-    const y = o ?? document.head;
-    return y.appendChild(f), f.sheet && f.sheet.insertRule(`
-          [data-motion-pop-id="${s}"] {
-            position: absolute !important;
-            width: ${i}px !important;
-            height: ${g}px !important;
-            ${m}px !important;
-            top: ${l}px !important;
-          }
-        `), () => {
-      y.contains(f) && y.removeChild(f);
+function xt() {
+  return $(gt, arguments);
+}
+const $t = st(
+  ({
+    placeholder: t = "000 - 000 - 000",
+    disabled: n,
+    ...e
+  }, a) => {
+    const {
+      activeCountry: r,
+      isDisabled: o,
+      value: s,
+      onValueChange: f,
+      setActiveCountry: c
+    } = vt(), u = (l) => {
+      if (!l) return "";
+      const y = G(l);
+      if (y)
+        return y.nationalNumber;
+      let C = "";
+      return r && xt(r) && (C = H(r)), l.replace(`+${C}`, "");
     };
-  }, [r]), a(te, { isPresent: r, childRef: n, sizeRef: h, children: E.cloneElement(e, { ref: P }) });
-}
-const re = ({ children: e, initial: r, isPresent: t, onExitComplete: o, custom: s, presenceAffectsLayout: n, mode: h, anchorX: v, root: P }) => {
-  const i = W(oe), g = T();
-  let l = !0, u = z(() => (l = !1, {
-    id: g,
-    initial: r,
-    isPresent: t,
-    custom: s,
-    onExitComplete: (p) => {
-      i.set(p, !0);
-      for (const m of i.values())
-        if (!m)
-          return;
-      o && o();
-    },
-    register: (p) => (i.set(p, !1), () => i.delete(p))
-  }), [t, i, o]);
-  return n && l && (u = { ...u }), z(() => {
-    i.forEach((p, m) => i.set(m, !1));
-  }, [t]), E.useEffect(() => {
-    !t && !i.size && o && o();
-  }, [t]), h === "popLayout" && (e = a(ne, { isPresent: t, anchorX: v, root: P, children: e })), a(J.Provider, { value: u, children: e });
-};
-function oe() {
-  return /* @__PURE__ */ new Map();
-}
-const R = (e) => e.key || "";
-function I(e) {
-  const r = [];
-  return B.forEach(e, (t) => {
-    F(t) && r.push(t);
-  }), r;
-}
-const N = ({ children: e, custom: r, initial: t = !0, onExitComplete: o, presenceAffectsLayout: s = !0, mode: n = "sync", propagate: h = !1, anchorX: v = "left", root: P }) => {
-  const [i, g] = Q(h), l = z(() => I(e), [e]), u = h && !i ? [] : l.map(R), p = x(!0), m = x(l), f = W(() => /* @__PURE__ */ new Map()), [y, j] = b(l), [C, L] = b(l);
-  Y(() => {
-    p.current = !1, m.current = l;
-    for (let d = 0; d < C.length; d++) {
-      const c = R(C[d]);
-      u.includes(c) ? f.delete(c) : f.get(c) !== !0 && f.set(c, !1);
-    }
-  }, [C, u.length, u.join("-")]);
-  const M = [];
-  if (l !== y) {
-    let d = [...l];
-    for (let c = 0; c < C.length; c++) {
-      const w = C[c], D = R(w);
-      u.includes(D) || (d.splice(c, 0, w), M.push(w));
-    }
-    return n === "wait" && M.length && (d = M), L(I(d)), j(l), null;
+    return O(() => {
+      if (s && !r) {
+        const l = G(s);
+        l && c(l.country);
+      }
+    }, [r, c, s]), /* @__PURE__ */ q(
+      ft,
+      {
+        "data-slot": "phone-number-digit-field",
+        className: "mds:has-disabled:opacity-50",
+        children: [
+          /* @__PURE__ */ q("p", { className: Nt("mds:body-extrasmall-regular"), children: [
+            "(+",
+            H(r || "US"),
+            ")"
+          ] }),
+          /* @__PURE__ */ it(
+            ct,
+            {
+              ...e,
+              disabled: n || o,
+              placeholder: t,
+              value: u(s),
+              onChange: (l) => {
+                const y = bt({
+                  value: l.target.value,
+                  activeCountry: r
+                });
+                f && (l.target.value = y.digit, f(y));
+              },
+              ref: a
+            }
+          )
+        ]
+      }
+    );
   }
-  process.env.NODE_ENV !== "production" && n === "wait" && C.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
-  const { forceRender: H } = A(q);
-  return a(S, { children: C.map((d) => {
-    const c = R(d), w = h && !i ? !1 : l === C || u.includes(c), D = () => {
-      if (f.has(c))
-        f.set(c, !0);
-      else
-        return;
-      let $ = !0;
-      f.forEach((K) => {
-        K || ($ = !1);
-      }), $ && (H?.(), L(m.current), h && g?.(), o && o());
-    };
-    return a(re, { isPresent: w, initial: !p.current || t ? void 0 : !1, custom: r, presenceAffectsLayout: s, mode: n, root: P, onExitComplete: w ? void 0 : D, anchorX: v, children: d }, c);
-  }) });
-}, pe = ({
-  children: e,
-  ...r
-}) => {
-  const { isDesktop: t, open: o } = X();
-  return t ? /* @__PURE__ */ a(V, { forceMount: !0, ...r, children: /* @__PURE__ */ a(N, { children: o ? /* @__PURE__ */ a(
-    "div",
-    {
-      className: "mds:relative mds:z-100",
-      "data-slot": "responsive-popover-drawer-portal",
-      children: e
-    }
-  ) : null }) }) : /* @__PURE__ */ a(
-    U.Portal,
-    {
-      forceMount: !0,
-      "data-slot": "responsive-popover-drawer-portal",
-      ...r,
-      children: /* @__PURE__ */ a(N, { children: o ? /* @__PURE__ */ a(
-        "div",
-        {
-          className: "mds:relative mds:z-100",
-          "data-slot": "responsive-popover-drawer-portal",
-          children: e
-        }
-      ) : null })
-    }
-  );
-};
+);
+$t.displayName = "PhoneNumberDigitField";
 export {
-  pe as ResponsivePopoverDrawerPortal
+  $t as PhoneNumberDigitField
 };