mcr-design-systems 1.0.21 → 1.0.23

package/dist/components/MenuItem/index.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as T } from "react/jsx-runtime";
 import * as R from "react";
 import { cn as i } from "../../shared/utils/cn.js";
-import { dataTestId as y } from "../../shared/utils/dataTestId.js";
-import x from "../Icon/Icon.js";
+import { dataTestId as x } from "../../shared/utils/dataTestId.js";
+import y from "../Icon/Icon.js";
 import { menuItemVariants as j } from "./helper/variants.js";
 import { Typography as S } from "../Typography/index.js";
 import { Tooltip as q } from "../Tooltip/index.js";
@@ -10,15 +10,15 @@ import { useTruncateTooltip as A } from "../../shared/hooks/useTruncateTooltip.j
 const D = R.forwardRef(
   ({
     label: m,
-    disabled: z = !1,
-    icon: c,
-    endIcon: l,
-    shortcut: o,
-    selected: s = !1,
-    showCheckmark: g = !1,
-    className: d,
-    "data-testid": n,
-    onSelect: f,
+    disabled: g = !1,
+    icon: o,
+    endIcon: c,
+    shortcut: l,
+    selected: n = !1,
+    showCheckmark: z = !1,
+    className: f,
+    "data-testid": s,
+    onSelect: d,
     children: u,
     size: b,
     variant: k,
@@ -28,13 +28,13 @@ const D = R.forwardRef(
     endIconSize: E = "md",
     ...h
   }, N) => {
-    const a = j({ size: b, variant: k, state: w, selected: s }), { textRef: I, isTruncated: M } = A(), v = (r, t) => r ? typeof r == "string" ? /* @__PURE__ */ e(x, { name: r, size: 16, className: t }) : typeof r == "function" ? /* @__PURE__ */ e("span", { className: t, children: r(s) }) : /* @__PURE__ */ e("span", { className: t, children: r }) : null;
+    const a = j({ size: b, variant: k, state: w, selected: n }), { textRef: I, isTruncated: M } = A(), v = (r, t) => r ? typeof r == "string" ? /* @__PURE__ */ e(y, { name: r, size: 16, className: t }) : typeof r == "function" ? /* @__PURE__ */ e("span", { className: t, children: r(n) }) : /* @__PURE__ */ e("span", { className: t, children: r }) : null;
     return u ? /* @__PURE__ */ e(
       "div",
       {
         ref: N,
-        className: i(a.item(), d),
-        onClick: f,
+        className: i(a.item(), f),
+        onClick: d,
         onMouseEnter: (r) => {
           r.preventDefault();
         },
@@ -44,7 +44,7 @@ const D = R.forwardRef(
           );
           t && document.activeElement === t && (r.currentTarget.blur(), t.focus());
         },
-        ...n && y(n),
+        ...s && x(s),
         ...h,
         children: u
       }
@@ -54,37 +54,40 @@ const D = R.forwardRef(
         ref: N,
         className: i(
           a.item({
-            disabled: z
+            disabled: g
           }),
-          d
+          f
         ),
-        onClick: f,
-        ...n && y(n),
+        onClick: d,
+        ...s && x(s),
         ...h,
         children: [
-          g && s && /* @__PURE__ */ e("div", { className: a.indicator(), children: /* @__PURE__ */ e(x, { name: "check", size: 12 }) }),
-          c && /* @__PURE__ */ e(
+          z && n && /* @__PURE__ */ e("div", { className: a.indicator(), children: /* @__PURE__ */ e(y, { name: "check", size: 12 }) }),
+          o && /* @__PURE__ */ e(
             "span",
             {
               className: a.iconStart({
                 size: C || "md"
               }),
-              children: v(c)
+              children: v(o)
             }
           ),
           p ? /* @__PURE__ */ e("span", { className: a.label(), children: p }) : /* @__PURE__ */ e(q, { content: m, disabled: !M, showArrow: !1, children: /* @__PURE__ */ e(
             S,
             {
               ref: I,
-              variants: "body",
+              variants: n ? "action-emphasize" : "body",
               size: "md",
-              className: i(a.label(), "text-left"),
+              className: i(a.label(), "text-left", {
+                "text-fg-selected-rest": n,
+                "text-fg-neutral-main": !n
+              }),
               children: m
             }
           ) }),
           /* @__PURE__ */ T("div", { className: a.endContent(), children: [
-            o && /* @__PURE__ */ e("span", { className: a.shortcut(), children: o }),
-            l && /* @__PURE__ */ e("span", { className: a.iconEnd({ size: E || "md" }), children: v(l) })
+            l && /* @__PURE__ */ e("span", { className: a.shortcut(), children: l }),
+            c && /* @__PURE__ */ e("span", { className: a.iconEnd({ size: E || "md" }), children: v(c) })
           ] })
         ]
       }

package/dist/components/PhoneInput/index.js

@@ -1,27 +1,27 @@
-import { jsxs as m, jsx as c } from "react/jsx-runtime";
-import * as n from "react";
-import q from "../../node_modules/libphonenumber-js/examples.mobile.json.js";
-import { cn as w } from "../../shared/utils/cn.js";
-import { COUNTRIES_DATA as H } from "../../shared/flags/countries-data.js";
-import { FLAG_POSITIONS as J } from "../../shared/flags/flag-positions.js";
-import { FLAG_BASE64 as K } from "../../shared/flags/base64.js";
-import { phoneInputVariants as X } from "./helper/variants.js";
-import { Dropdown as Z } from "../Dropdown/index.js";
-import { Typography as P } from "../Typography/index.js";
-import D from "../Icon/Icon.js";
-import ee from "./FagDefault.js";
-import { getExampleNumber as te } from "../../node_modules/libphonenumber-js/min/exports/getExampleNumber.js";
-import { AsYouType as oe } from "../../node_modules/libphonenumber-js/min/exports/AsYouType.js";
-const F = ({
-  countryCode: o
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import * as a from "react";
+import Z from "../../node_modules/libphonenumber-js/examples.mobile.json.js";
+import { cn as v } from "../../shared/utils/cn.js";
+import { COUNTRIES_DATA as ee } from "../../shared/flags/countries-data.js";
+import { FLAG_POSITIONS as te } from "../../shared/flags/flag-positions.js";
+import { FLAG_BASE64 as oe } from "../../shared/flags/base64.js";
+import { phoneInputVariants as re } from "./helper/variants.js";
+import { Dropdown as ne } from "../Dropdown/index.js";
+import { Typography as z } from "../Typography/index.js";
+import L from "../Icon/Icon.js";
+import ae from "./FagDefault.js";
+import { getExampleNumber as se } from "../../node_modules/libphonenumber-js/min/exports/getExampleNumber.js";
+import { AsYouType as ie } from "../../node_modules/libphonenumber-js/min/exports/AsYouType.js";
+const M = ({
+  countryCode: n
 }) => {
-  const t = J[o];
-  return /* @__PURE__ */ c("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ c(ee, {}) : /* @__PURE__ */ c(
+  const t = te[n];
+  return /* @__PURE__ */ i("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ i(ae, {}) : /* @__PURE__ */ i(
     "div",
     {
-      className: w(),
+      className: v(),
       style: {
-        backgroundImage: `url('${K}')`,
+        backgroundImage: `url('${oe}')`,
         backgroundPosition: `${t.x}px ${t.y}px`,
         backgroundSize: "512px 512px",
         width: "32px",
@@ -30,99 +30,99 @@ const F = ({
       }
     }
   ) });
-}, re = (o) => {
+}, ce = (n) => {
   try {
-    const t = te(
-      o.toUpperCase(),
-      q
+    const t = se(
+      n.toUpperCase(),
+      Z
     );
     if (t)
       return t.formatNational();
   } catch {
     console.warn(
-      `Could not get example number for country code: ${o}`
+      `Could not get example number for country code: ${n}`
     );
   }
   return "Enter phone number";
-}, O = (o, t) => {
-  if (!o || !o.trim()) return "";
+}, A = (n, t) => {
+  if (!n || !n.trim()) return "";
   try {
-    const a = new oe(t.toUpperCase()), l = o.replace(/[^\d]/g, "");
-    if (!l) return "";
-    let s = "";
-    for (const h of l)
-      s = a.input(h);
-    return s || l;
+    const s = new ie(t.toUpperCase()), d = n.replace(/[^\d]/g, "");
+    if (!d) return "";
+    let r = "";
+    for (const S of d)
+      r = s.input(S);
+    return t.toLowerCase() === "us" && d.length === 3 && r.includes(")") && (r = r.replace(")", "")), r || d;
   } catch {
-    return o.replace(/[^\d]/g, "") || "";
+    return n.replace(/[^\d]/g, "") || "";
   }
-}, ne = n.forwardRef(
+}, le = a.forwardRef(
   ({
-    onCountryChange: o,
+    onCountryChange: n,
     value: t = "",
-    onValueChange: a,
-    placeholder: l,
-    countries: s = H,
-    showSearch: h = !1,
-    searchPlaceholder: T = "Search countries",
-    className: z,
-    size: p = "md",
-    "data-testid": R,
-    error: k,
-    clearText: A,
-    defaultCountryCode: y,
+    onValueChange: s,
+    placeholder: d,
+    countries: r = ee,
+    showSearch: S = !1,
+    searchPlaceholder: B = "Search countries",
+    className: _,
+    size: x = "md",
+    "data-testid": $,
+    error: E,
+    clearText: j,
+    defaultCountryCode: P,
     // placeholder = 'Enter phone number',
-    ...L
-  }, M) => {
-    const [C, _] = n.useState(!1), [$, I] = n.useState(!1), [i, B] = n.useState(
-      y || s[0]?.code || "us"
-    ), [g, N] = n.useState(""), S = n.useRef(null), v = C, x = n.useCallback((e) => {
-      _(e), e || N("");
-    }, []), d = n.useMemo(
-      () => s.find((e) => e.code === i) || s[0],
-      [s, i]
+    ...U
+  }, V) => {
+    const [T, G] = a.useState(!1), [Q, D] = a.useState(!1), [l, W] = a.useState(
+      P || r[0]?.code || "us"
+    ), [y, F] = a.useState(""), R = a.useRef(null), k = T, I = a.useCallback((e) => {
+      G(e), e || F("");
+    }, []), p = a.useMemo(
+      () => r.find((e) => e.code === l) || r[0],
+      [r, l]
     );
-    console.log(d, y);
-    const E = n.useMemo(() => l || re(i), [i, l]), b = X({
-      size: p,
-      opened: v,
-      inputFocused: $
-    }), j = n.useCallback(
+    console.log(p, P);
+    const Y = a.useMemo(() => d || ce(l), [l, d]), N = re({
+      size: x,
+      opened: k,
+      inputFocused: Q
+    }), q = a.useCallback(
       (e) => {
-        if (o?.(e), x(!1), B(e.code), t && t.trim()) {
-          const r = O(
+        if (n?.(e), I(!1), W(e.code), t && t.trim()) {
+          const o = A(
             t,
             e.code
           );
-          a?.({
-            formatted: r,
+          s?.({
+            formatted: o,
             raw: t,
             country: e
           });
         }
       },
-      [o, x, t, a]
-    ), U = n.useMemo(() => s.filter(
-      (e) => e.name.toLowerCase().includes(g.toLowerCase()) || e.code.toLowerCase().includes(g.toLowerCase())
+      [n, I, t, s]
+    ), H = a.useMemo(() => r.filter(
+      (e) => e.name.toLowerCase().includes(y.toLowerCase()) || e.code.toLowerCase().includes(y.toLowerCase())
     ).map((e) => ({
       label: e.name,
       value: e.code,
-      icon: /* @__PURE__ */ c(F, { countryCode: e.code }),
+      icon: /* @__PURE__ */ i(M, { countryCode: e.code }),
       startIconSize: "auto",
       endIconSize: "auto",
-      endIcon: /* @__PURE__ */ m(P, { variants: "body", size: "sm", color: "fg-neutral-subtlest", children: [
+      endIcon: /* @__PURE__ */ g(z, { variants: "body", size: "sm", color: "fg-neutral-subtlest", children: [
         "+",
         e.dial_code
       ] })
-    })), [s, g]), V = A ? /* @__PURE__ */ c(
+    })), [r, y]), J = j ? /* @__PURE__ */ i(
       "div",
       {
         onMouseDown: (e) => {
           e.preventDefault(), e.stopPropagation(), setTimeout(() => {
-            a && a({
+            s && s({
               formatted: "",
               raw: "",
-              country: d
+              country: p
             });
           }, 0);
         },
@@ -130,8 +130,8 @@ const F = ({
         role: "button",
         tabIndex: 0,
         "aria-label": "Clear text",
-        children: /* @__PURE__ */ c(
-          D,
+        children: /* @__PURE__ */ i(
+          L,
           {
             name: "x-circle",
             variant: "solid",
@@ -139,95 +139,127 @@ const F = ({
               sm: 16,
               md: 20,
               lg: 24
-            }[p],
+            }[x],
             className: "cursor-pointer text-fg-neutral-subtle"
           }
         )
       }
-    ) : null, G = n.useCallback(
+    ) : null, K = a.useCallback(
       (e) => {
-        const r = e.target.value, u = t, Q = r.length < u.length;
-        if (r.length > 20) {
+        const o = e.target.value, b = t, C = e.target.selectionStart || 0, O = o.length < b.length;
+        if (o.length > 20) {
           e.preventDefault();
           return;
         }
-        if (/^[0-9\s\-()+ ]*$/.test(r) || r === "") {
-          const f = r.replace(/[^\d]/g, ""), W = u.replace(/[^\d]/g, "");
-          if (Q && f === W) {
-            a?.({
-              formatted: r,
-              raw: r.replace(/[^\d]/g, ""),
-              country: d
-            });
+        if (/^[0-9\s\-()+ ]*$/.test(o) || o === "") {
+          const h = o.replace(/[^\d]/g, ""), X = b.replace(/[^\d]/g, "");
+          if (O && h === X) {
+            s?.({
+              formatted: o,
+              raw: o.replace(/[^\d]/g, ""),
+              country: p
+            }), setTimeout(() => {
+              e.target && e.target.setSelectionRange(C, C);
+            }, 0);
             return;
           }
-          const Y = f ? O(f, i) : "";
-          a?.({
-            formatted: Y,
-            raw: f,
-            country: d
-          });
+          const u = h ? A(h, l) : "";
+          let m = C;
+          if (u !== o)
+            if (O) {
+              const w = o.slice(0, C).replace(/[^\d]/g, "").length;
+              let f = 0;
+              for (let c = 0; c < u.length; c++)
+                if (/\d/.test(u[c]) && (f++, f === w)) {
+                  m = c + 1;
+                  break;
+                }
+              m = Math.max(0, m);
+            } else {
+              const w = h.length;
+              let f = 0;
+              for (let c = 0; c < u.length; c++)
+                if (/\d/.test(u[c]) && (f++, f === w)) {
+                  m = c + 1;
+                  break;
+                }
+              f < w && (m = u.length);
+            }
+          s?.({
+            formatted: u,
+            raw: h,
+            country: p
+          }), setTimeout(() => {
+            e.target && e.target.setSelectionRange(m, m);
+          }, 0);
         }
       },
-      [d, a, i, t]
+      [p, s, l, t]
     );
-    return /* @__PURE__ */ m("div", { className: w("flex items-center", z), ref: S, children: [
-      /* @__PURE__ */ c(
-        Z,
+    return /* @__PURE__ */ g("div", { className: v("flex items-center", _), ref: R, children: [
+      /* @__PURE__ */ i(
+        ne,
         {
-          open: C,
-          onOpenChange: x,
-          items: U,
-          value: i,
+          open: T,
+          onOpenChange: I,
+          items: H,
+          value: l,
           onValueChange: (e) => {
-            const r = s.find(
-              (u) => u.code === e
+            const o = r.find(
+              (b) => b.code === e
             );
-            r && j(r);
+            o && q(o);
           },
           align: "start",
           "data-testid": "align-start-dropdown",
-          search: h,
-          searchPlaceholder: T,
+          search: S,
+          searchPlaceholder: B,
           enableVirtualization: !0,
           onSearchChange: (e) => {
-            N(e);
+            F(e);
           },
-          width: S.current?.clientWidth || "auto",
-          children: /* @__PURE__ */ m("div", { className: b.countryButton(), children: [
-            /* @__PURE__ */ c(F, { countryCode: i }),
-            /* @__PURE__ */ m("div", { className: "flex gap-xs-4", children: [
-              /* @__PURE__ */ m(P, { variants: "body", size: "md", children: [
+          width: R.current?.clientWidth || "auto",
+          children: /* @__PURE__ */ g("div", { className: N.countryButton(), children: [
+            /* @__PURE__ */ i(M, { countryCode: l }),
+            /* @__PURE__ */ g("div", { className: "flex gap-xs-4", children: [
+              /* @__PURE__ */ g(z, { variants: "body", size: "md", color: "fg-neutral-main", children: [
                 "+",
-                d.dial_code
+                p.dial_code
               ] }),
-              /* @__PURE__ */ c(D, { name: v ? "chevron-up" : "chevron-down", size: 16 })
+              /* @__PURE__ */ i(
+                L,
+                {
+                  name: k ? "chevron-up" : "chevron-down",
+                  size: 16,
+                  className: "text-fg-neutral-main"
+                }
+              )
             ] })
           ] })
         }
       ),
-      /* @__PURE__ */ m("div", { className: b.inputContainer({ error: k, size: p }), children: [
-        /* @__PURE__ */ c(
+      /* @__PURE__ */ g("div", { className: N.inputContainer({ error: E, size: x }), children: [
+        /* @__PURE__ */ i(
           "input",
           {
-            ...L,
-            ref: M,
-            className: w(b.input({ size: p })),
-            placeholder: E,
+            ...U,
+            ref: V,
+            className: v(N.input({ size: x })),
+            placeholder: Y,
             value: t,
-            onChange: G,
-            onFocus: () => I(!0),
-            onBlur: () => I(!1),
-            "data-testid": R
+            onChange: K,
+            onFocus: () => D(!0),
+            onBlur: () => D(!1),
+            "data-testid": $
           }
         ),
-        V
+        J
       ] })
     ] });
   }
 );
-ne.displayName = "PhoneInput";
+le.displayName = "PhoneInput";
 export {
-  ne as PhoneInput,
-  ne as default
+  le as PhoneInput,
+  le as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcr-design-systems",
   "private": false,
-  "version": "1.0.21",
+  "version": "1.0.23",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",