mcr-design-systems 1.0.21 → 1.0.22

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

package/package.json

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