mcr-design-systems 1.0.25 → 1.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/InputBase/index.js +89 -86
  2. package/dist/components/InputPassword/index.js +28 -28
  3. package/dist/components/PhoneInput/index.js +162 -142
  4. package/package.json +1 -1
package/dist/components/InputBase/index.js CHANGED
@@ -1,11 +1,11 @@
1
- import { jsxs as I, jsx as u } from "react/jsx-runtime";
2
- import r, { forwardRef as D, useState as H, useMemo as B, useEffect as R, memo as _ } from "react";
1
+ import { jsxs as I, jsx as o } from "react/jsx-runtime";
2
+ import c, { forwardRef as $, useState as H, useMemo as B, useEffect as R, memo as _ } from "react";
3
3
  import { inputBaseVariants as F, textAreaVariants as K } from "./variants.js";
4
4
  import W from "../Icon/Icon.js";
5
5
  import { cn as f } from "../../shared/utils/cn.js";
6
6
  import { dataTestId as q } from "../../shared/utils/dataTestId.js";
7
- const A = (n) => {
8
- switch (n) {
7
+ const A = (t) => {
8
+ switch (t) {
9
9
  case "sm":
10
10
  return 16;
11
11
  case "md":
@@ -15,174 +15,177 @@ const A = (n) => {
15
15
  default:
16
16
  return 20;
17
17
  }
18
- }, N = D(
18
+ }, N = $(
19
19
  ({
20
- disabled: n,
21
- readOnly: a,
22
- endAdornment: l,
23
- className: V,
24
- color: w,
20
+ disabled: t,
21
+ readOnly: s,
22
+ endAdornment: u,
23
+ className: w,
24
+ color: T,
25
25
  sizeVariant: v = "md",
26
26
  startAdornment: b,
27
27
  InputComponent: y,
28
- containerProps: z,
29
- containerRef: T,
28
+ containerProps: V,
29
+ containerRef: z,
30
30
  width: C,
31
31
  iconsSize: S,
32
32
  error: j,
33
- clearText: M,
33
+ clearText: D,
34
34
  optionalProps: h,
35
35
  // inputSize,
36
36
  ...e
37
- }, k) => {
38
- const [L, g] = H(!1), o = S || A(v), m = B(
37
+ }, M) => {
38
+ const [k, g] = H(!1), m = S || A(v), p = B(
39
39
  () => `inputbase-input-${Math.random().toString(36).substring(2, 9)}`,
40
40
  []
41
- ), p = B(
41
+ ), d = B(
42
42
  () => `inputbase-textarea-${Math.random().toString(36).substring(2, 9)}`,
43
43
  []
44
44
  );
45
45
  R(() => {
46
- const t = e.value;
47
- if (t !== void 0) {
48
- g(String(t).length > 0);
46
+ const n = e.value;
47
+ if (n !== void 0) {
48
+ g(String(n).length > 0);
49
49
  return;
50
50
  }
51
- const i = () => {
52
- const c = e.type === "textarea" ? document.getElementById(p) : document.getElementById(m);
53
- if (c) {
51
+ const a = () => {
52
+ const r = e.type === "textarea" ? document.getElementById(d) : document.getElementById(p);
53
+ if (r) {
54
54
  const x = () => {
55
- g(c.value.length > 0);
55
+ g(r.value.length > 0);
56
56
  };
57
- return x(), c.addEventListener("input", x), () => {
58
- c.removeEventListener("input", x);
57
+ return x(), r.addEventListener("input", x), () => {
58
+ r.removeEventListener("input", x);
59
59
  };
60
60
  }
61
- }, d = i();
62
- if (!d) {
63
- const c = setTimeout(() => {
64
- i();
61
+ }, l = a();
62
+ if (!l) {
63
+ const r = setTimeout(() => {
64
+ a();
65
65
  }, 100);
66
- return () => clearTimeout(c);
66
+ return () => clearTimeout(r);
67
67
  }
68
- return d;
69
- }, [e.type, e.value, m, p]);
70
- const E = M && L ? /* @__PURE__ */ u(
68
+ return l;
69
+ }, [e.type, e.value, p, d]);
70
+ const E = D && k ? /* @__PURE__ */ o(
71
71
  W,
72
72
  {
73
73
  name: "x-circle",
74
74
  variant: "solid",
75
- size: o,
75
+ size: m,
76
76
  className: "cursor-pointer text-fg-neutral-subtle",
77
- onClick: () => {
78
- g(!1);
79
- const t = e.type === "textarea" ? document.getElementById(p) : document.getElementById(m);
80
- if (t) {
81
- if (t.value = "", e.onChange) {
82
- const i = {
83
- target: t,
84
- currentTarget: t,
77
+ onClick: (n) => {
78
+ n.preventDefault(), n.stopPropagation(), g(!1);
79
+ const a = e.type === "textarea" ? document.getElementById(d) : document.getElementById(p);
80
+ if (a) {
81
+ if (a.value = "", e.onChange) {
82
+ const l = {
83
+ target: a,
84
+ currentTarget: a,
85
85
  type: "change",
86
86
  bubbles: !0
87
87
  };
88
- e.onChange(i);
88
+ e.onChange(l);
89
89
  } else {
90
- const i = new Event("input", { bubbles: !0 }), d = new Event("change", { bubbles: !0 });
91
- t.dispatchEvent(i), t.dispatchEvent(d);
90
+ const l = new Event("input", { bubbles: !0 }), r = new Event("change", { bubbles: !0 });
91
+ a.dispatchEvent(l), a.dispatchEvent(r);
92
92
  }
93
- t?.focus();
93
+ setTimeout(() => {
94
+ a?.focus();
95
+ }, 0);
94
96
  }
95
97
  },
96
98
  "aria-label": "Clear text"
97
99
  }
98
- ) : null, s = E && l ? /* @__PURE__ */ I("div", { className: "flex items-center gap-2", children: [
100
+ ) : null, i = E && u ? /* @__PURE__ */ I("div", { className: "flex items-center gap-2", children: [
99
101
  E,
100
- r.isValidElement(l) ? r.cloneElement(
101
- l,
102
+ c.isValidElement(u) ? c.cloneElement(
103
+ u,
102
104
  {
103
- size: o
105
+ size: m
104
106
  }
105
- ) : l
106
- ] }) : E || l, $ = {
107
+ ) : u
108
+ ] }) : E || u, L = {
107
109
  sm: "h-4",
108
110
  md: "h-5",
109
111
  lg: "h-6"
110
112
  };
111
- return /* @__PURE__ */ u("div", { className: "relative justify-center items-center", children: /* @__PURE__ */ I(
113
+ return /* @__PURE__ */ o("div", { className: "relative justify-center items-center", children: /* @__PURE__ */ I(
112
114
  "div",
113
115
  {
114
116
  ...q("InputBase"),
115
- ref: T,
116
- ...z,
117
+ ref: z,
118
+ ...V,
117
119
  className: F({
118
- disabled: !!n,
119
- className: V,
120
- color: w,
120
+ disabled: !!t,
121
+ className: w,
122
+ color: T,
121
123
  size: e?.type === "textarea" ? void 0 : v,
122
- readOnly: !!a,
124
+ readOnly: !!s,
123
125
  error: !!j
124
126
  }),
125
127
  style: { minWidth: C ?? "100%" },
126
128
  children: [
127
- b && /* @__PURE__ */ u(
129
+ b && /* @__PURE__ */ o(
128
130
  "div",
129
131
  {
130
132
  className: f("flex cursor-pointer items-center justify-center", {
131
- "color-icon-disabled": n || a,
132
- "cursor-pointer": !n || a
133
+ "color-icon-disabled": t || s,
134
+ "cursor-pointer": !t || s
133
135
  }),
134
- children: r.cloneElement(b, {
136
+ children: c.cloneElement(b, {
135
137
  // color: disabled || readOnly ? 'disabled' : 'currentColor',
136
- size: o
138
+ size: m
137
139
  })
138
140
  }
139
141
  ),
140
- y ? r.cloneElement(
142
+ y ? c.cloneElement(
141
143
  y,
142
144
  {
143
- id: e?.type === "textarea" ? p : void 0,
145
+ id: e?.type === "textarea" ? d : void 0,
144
146
  className: f(
145
147
  e?.type === "textarea" ? K({
146
148
  size: h?.sizeTextArea,
147
- disabled: !!n,
148
- readOnly: !!a
149
+ disabled: !!t,
150
+ readOnly: !!s
149
151
  }) : void 0,
150
152
  "w-full appearance-none bg-transparent outline-none",
151
153
  h?.textAreaClassName
152
154
  ),
153
- disabled: n || a,
155
+ disabled: t || s,
154
156
  ...e
155
157
  },
156
158
  null
157
- ) : /* @__PURE__ */ u(
159
+ ) : /* @__PURE__ */ o(
158
160
  "input",
159
161
  {
160
- id: e.type === "textarea" ? void 0 : m,
162
+ id: e.type === "textarea" ? void 0 : p,
161
163
  className: f(
162
- "w-full appearance-none bg-transparent font-sans outline-none",
163
- $[v || "md"]
164
+ "w-full appearance-none bg-transparent font-sans outline-none text-fg-neutral-main",
165
+ L[v || "md"]
164
166
  ),
165
- ref: k,
166
- disabled: n || a,
167
+ ref: M,
168
+ disabled: t || s,
167
169
  ...e,
168
- onKeyDown: (t) => {
169
- e?.type === "number" && ["e", "E", "+", "-", "."].includes(t.key) && t.preventDefault();
170
+ onKeyDown: (n) => {
171
+ e?.type === "number" && ["e", "E", "+", "-", "."].includes(n.key) && n.preventDefault();
170
172
  }
171
173
  }
172
174
  ),
173
- s && /* @__PURE__ */ u(
175
+ i && /* @__PURE__ */ o(
174
176
  "div",
175
177
  {
176
178
  className: f("max-h flex items-center justify-center", {
177
- "color-icon-disabled": n || a,
178
- "cursor-pointer": !n || a
179
+ "color-icon-disabled": t || s,
180
+ "cursor-pointer": !t || s
179
181
  }),
180
- children: r.isValidElement(s) && s.type === "div" ? s : r.isValidElement(s) ? r.cloneElement(
181
- s,
182
+ onMouseDown: (n) => n.preventDefault(),
183
+ children: c.isValidElement(i) && i.type === "div" ? i : c.isValidElement(i) ? c.cloneElement(
184
+ i,
182
185
  {
183
- size: o
186
+ size: m
184
187
  }
185
- ) : s
188
+ ) : i
186
189
  }
187
190
  )
188
191
  ]
@@ -191,7 +194,7 @@ const A = (n) => {
191
194
  }
192
195
  );
193
196
  N.displayName = "InputBase";
194
- const P = _(N);
197
+ const Z = _(N);
195
198
  export {
196
- P as default
199
+ Z as default
197
200
  };
package/dist/components/InputPassword/index.js CHANGED
@@ -1,43 +1,43 @@
1
- import { jsxs as x, jsx as e } from "react/jsx-runtime";
2
- import { forwardRef as y, useState as g } from "react";
3
- import h from "../InputBase/index.js";
1
+ import { jsxs as g, jsx as e } from "react/jsx-runtime";
2
+ import { forwardRef as y, useState as h } from "react";
3
+ import v from "../InputBase/index.js";
4
4
  import I from "../TextField/HelperText.js";
5
- import v from "../Icon/Icon.js";
6
- const N = y(
5
+ import N from "../Icon/Icon.js";
6
+ const V = y(
7
7
  ({
8
8
  helperText: a,
9
- error: i = !1,
10
- showHelperIcon: r = !0,
11
- helperIconCustom: l,
12
- helperTextClassName: d,
13
- defaultVisible: m = !1,
9
+ error: n = !1,
10
+ showHelperIcon: l = !0,
11
+ helperIconCustom: d,
12
+ helperTextClassName: m,
13
+ defaultVisible: c = !1,
14
14
  visible: t,
15
- onVisibilityChange: c,
16
- className: u,
15
+ onVisibilityChange: u,
16
+ className: p,
17
17
  ...s
18
18
  }, f) => {
19
- const [p, b] = g(m), o = t !== void 0 ? t : p, w = () => {
20
- if (s.disabled)
19
+ const [b, w] = h(c), o = t !== void 0 ? t : b, x = (r) => {
20
+ if (r.preventDefault(), r.stopPropagation(), s.disabled)
21
21
  return;
22
- const n = !o;
23
- t === void 0 && b(n), c?.(n);
22
+ const i = !o;
23
+ t === void 0 && w(i), u?.(i);
24
24
  };
25
- return /* @__PURE__ */ x("div", { className: "w-full [&_input[type='password']::-ms-reveal]:hidden [&_input[type='password']::-ms-clear]:hidden", children: [
25
+ return /* @__PURE__ */ g("div", { className: "w-full [&_input[type='password']::-ms-reveal]:hidden [&_input[type='password']::-ms-clear]:hidden", children: [
26
26
  /* @__PURE__ */ e(
27
- h,
27
+ v,
28
28
  {
29
29
  ...s,
30
30
  ref: f,
31
31
  type: o ? "text" : "password",
32
- error: i,
33
- className: u,
32
+ error: n,
33
+ className: p,
34
34
  clearText: !0,
35
35
  endAdornment: /* @__PURE__ */ e(
36
- v,
36
+ N,
37
37
  {
38
38
  name: o ? "eye" : "eye-off",
39
39
  className: `transition-colors ${s.disabled ? "bg-bg-input-disabled cursor-not-allowed" : "cursor-pointer hover:text-fg-neutral-rest text-fg-neutral-subtle"}`,
40
- onClick: w
40
+ onClick: x
41
41
  }
42
42
  )
43
43
  }
@@ -46,16 +46,16 @@ const N = y(
46
46
  I,
47
47
  {
48
48
  text: a,
49
- error: i,
50
- haveIcon: r,
51
- iconsCustom: l,
52
- className: d
49
+ error: n,
50
+ haveIcon: l,
51
+ iconsCustom: d,
52
+ className: m
53
53
  }
54
54
  ) })
55
55
  ] });
56
56
  }
57
57
  );
58
- N.displayName = "InputPassword";
58
+ V.displayName = "InputPassword";
59
59
  export {
60
- N as default
60
+ V as default
61
61
  };
package/dist/components/PhoneInput/index.js CHANGED
@@ -1,27 +1,27 @@
1
- import { jsxs as g, jsx as i } from "react/jsx-runtime";
2
- import * as a from "react";
3
- import Z from "../../node_modules/libphonenumber-js/examples.mobile.json.js";
4
- import { cn as v } from "../../shared/utils/cn.js";
5
- import { COUNTRIES_DATA as ee } from "../../shared/flags/countries-data.js";
6
- import { FLAG_POSITIONS as te } from "../../shared/flags/flag-positions.js";
7
- import { FLAG_BASE64 as oe } from "../../shared/flags/base64.js";
8
- import { phoneInputVariants as re } from "./helper/variants.js";
9
- import { Dropdown as ne } from "../Dropdown/index.js";
10
- import { Typography as z } from "../Typography/index.js";
11
- import L from "../Icon/Icon.js";
12
- import ae from "./FagDefault.js";
13
- import { getExampleNumber as se } from "../../node_modules/libphonenumber-js/min/exports/getExampleNumber.js";
14
- import { AsYouType as ie } from "../../node_modules/libphonenumber-js/min/exports/AsYouType.js";
15
- const M = ({
16
- countryCode: n
1
+ import { jsxs as x, jsx as l } from "react/jsx-runtime";
2
+ import * as r from "react";
3
+ import re from "../../node_modules/libphonenumber-js/examples.mobile.json.js";
4
+ import { cn as F } from "../../shared/utils/cn.js";
5
+ import { COUNTRIES_DATA as oe } from "../../shared/flags/countries-data.js";
6
+ import { FLAG_POSITIONS as se } from "../../shared/flags/flag-positions.js";
7
+ import { FLAG_BASE64 as ae } from "../../shared/flags/base64.js";
8
+ import { phoneInputVariants as ie } from "./helper/variants.js";
9
+ import { Dropdown as ce } from "../Dropdown/index.js";
10
+ import { Typography as B } from "../Typography/index.js";
11
+ import _ from "../Icon/Icon.js";
12
+ import le from "./FagDefault.js";
13
+ import { getExampleNumber as de } from "../../node_modules/libphonenumber-js/min/exports/getExampleNumber.js";
14
+ import { AsYouType as ue } from "../../node_modules/libphonenumber-js/min/exports/AsYouType.js";
15
+ const $ = ({
16
+ countryCode: a
17
17
  }) => {
18
- const t = te[n];
19
- return /* @__PURE__ */ i("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ i(ae, {}) : /* @__PURE__ */ i(
18
+ const t = se[a];
19
+ return /* @__PURE__ */ l("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ l(le, {}) : /* @__PURE__ */ l(
20
20
  "div",
21
21
  {
22
- className: v(),
22
+ className: F(),
23
23
  style: {
24
- backgroundImage: `url('${oe}')`,
24
+ backgroundImage: `url('${ae}')`,
25
25
  backgroundPosition: `${t.x}px ${t.y}px`,
26
26
  backgroundSize: "512px 512px",
27
27
  width: "32px",
@@ -30,96 +30,101 @@ const M = ({
30
30
  }
31
31
  }
32
32
  ) });
33
- }, ce = (n) => {
33
+ }, fe = (a) => {
34
34
  try {
35
- const t = se(
36
- n.toUpperCase(),
37
- Z
35
+ const t = de(
36
+ a.toUpperCase(),
37
+ re
38
38
  );
39
39
  if (t)
40
40
  return t.formatNational();
41
41
  } catch {
42
42
  console.warn(
43
- `Could not get example number for country code: ${n}`
43
+ `Could not get example number for country code: ${a}`
44
44
  );
45
45
  }
46
46
  return "Enter phone number";
47
- }, A = (n, t) => {
48
- if (!n || !n.trim()) return "";
47
+ }, j = (a, t) => {
48
+ if (!a || !a.trim()) return "";
49
49
  try {
50
- const s = new ie(t.toUpperCase()), d = n.replace(/[^\d]/g, "");
51
- if (!d) return "";
52
- let r = "";
53
- for (const S of d)
54
- r = s.input(S);
55
- return t.toLowerCase() === "us" && d.length === 3 && r.includes(")") && (r = r.replace(")", "")), r || d;
50
+ const c = new ue(t.toUpperCase()), m = a.replace(/[^\d]/g, "");
51
+ if (!m) return "";
52
+ let s = "";
53
+ for (const N of m)
54
+ s = c.input(N);
55
+ return t.toLowerCase() === "us" && m.length === 3 && s.includes(")") && (s = s.replace(")", "")), s || m;
56
56
  } catch {
57
- return n.replace(/[^\d]/g, "") || "";
57
+ return a.replace(/[^\d]/g, "") || "";
58
58
  }
59
- }, le = a.forwardRef(
59
+ }, me = r.forwardRef(
60
60
  ({
61
- onCountryChange: n,
61
+ onCountryChange: a,
62
62
  value: t = "",
63
- onValueChange: s,
64
- placeholder: d,
65
- countries: r = ee,
66
- showSearch: S = !1,
67
- searchPlaceholder: B = "Search countries",
68
- className: _,
69
- size: x = "md",
70
- "data-testid": $,
71
- error: E,
72
- clearText: j,
73
- defaultCountryCode: P,
63
+ onValueChange: c,
64
+ placeholder: m,
65
+ countries: s = oe,
66
+ showSearch: N = !1,
67
+ searchPlaceholder: U = "Search countries",
68
+ className: V,
69
+ size: w = "md",
70
+ "data-testid": G,
71
+ error: Q,
72
+ clearText: W,
73
+ defaultCountryCode: k,
74
74
  // placeholder = 'Enter phone number',
75
- ...U
76
- }, V) => {
77
- const [T, G] = a.useState(!1), [Q, D] = a.useState(!1), [l, W] = a.useState(
78
- P || r[0]?.code || "us"
79
- ), [y, F] = a.useState(""), R = a.useRef(null), k = T, I = a.useCallback((e) => {
80
- G(e), e || F("");
81
- }, []), p = a.useMemo(
82
- () => r.find((e) => e.code === l) || r[0],
83
- [r, l]
75
+ ...Y
76
+ }, y) => {
77
+ const [E, q] = r.useState(!1), [H, L] = r.useState(!1), [d, J] = r.useState(
78
+ k || s[0]?.code || "us"
79
+ ), [v, M] = r.useState(""), O = r.useRef(null), P = r.useRef(null), C = r.useRef(null), T = E, R = r.useCallback((e) => {
80
+ q(e), e || M("");
81
+ }, []), p = r.useMemo(
82
+ () => s.find((e) => e.code === d) || s[0],
83
+ [s, d]
84
84
  );
85
- console.log(p, P);
86
- const Y = a.useMemo(() => d || ce(l), [l, d]), N = re({
87
- size: x,
88
- opened: k,
89
- inputFocused: Q
90
- }), q = a.useCallback(
85
+ console.log(p, k), r.useLayoutEffect(() => {
86
+ if (C.current && P.current) {
87
+ const { start: e, end: n } = C.current;
88
+ P.current.setSelectionRange(e, n), C.current = null;
89
+ }
90
+ });
91
+ const K = r.useMemo(() => m || fe(d), [d, m]), D = ie({
92
+ size: w,
93
+ opened: T,
94
+ inputFocused: H
95
+ }), X = r.useCallback(
91
96
  (e) => {
92
- if (n?.(e), I(!1), W(e.code), t && t.trim()) {
93
- const o = A(
97
+ if (a?.(e), R(!1), J(e.code), t && t.trim()) {
98
+ const n = j(
94
99
  t,
95
100
  e.code
96
101
  );
97
- s?.({
98
- formatted: o,
102
+ c?.({
103
+ formatted: n,
99
104
  raw: t,
100
105
  country: e
101
106
  });
102
107
  }
103
108
  },
104
- [n, I, t, s]
105
- ), H = a.useMemo(() => r.filter(
106
- (e) => e.name.toLowerCase().includes(y.toLowerCase()) || e.code.toLowerCase().includes(y.toLowerCase())
109
+ [a, R, t, c]
110
+ ), Z = r.useMemo(() => s.filter(
111
+ (e) => e.name.toLowerCase().includes(v.toLowerCase()) || e.code.toLowerCase().includes(v.toLowerCase())
107
112
  ).map((e) => ({
108
113
  label: e.name,
109
114
  value: e.code,
110
- icon: /* @__PURE__ */ i(M, { countryCode: e.code }),
115
+ icon: /* @__PURE__ */ l($, { countryCode: e.code }),
111
116
  startIconSize: "auto",
112
117
  endIconSize: "auto",
113
- endIcon: /* @__PURE__ */ g(z, { variants: "body", size: "sm", color: "fg-neutral-subtlest", children: [
118
+ endIcon: /* @__PURE__ */ x(B, { variants: "body", size: "sm", color: "fg-neutral-subtlest", children: [
114
119
  "+",
115
120
  e.dial_code
116
121
  ] })
117
- })), [r, y]), J = j ? /* @__PURE__ */ i(
122
+ })), [s, v]), ee = W ? /* @__PURE__ */ l(
118
123
  "div",
119
124
  {
120
125
  onMouseDown: (e) => {
121
126
  e.preventDefault(), e.stopPropagation(), setTimeout(() => {
122
- s && s({
127
+ c && c({
123
128
  formatted: "",
124
129
  raw: "",
125
130
  country: p
@@ -130,8 +135,8 @@ const M = ({
130
135
  role: "button",
131
136
  tabIndex: 0,
132
137
  "aria-label": "Clear text",
133
- children: /* @__PURE__ */ i(
134
- L,
138
+ children: /* @__PURE__ */ l(
139
+ _,
135
140
  {
136
141
  name: "x-circle",
137
142
  variant: "solid",
@@ -139,97 +144,110 @@ const M = ({
139
144
  sm: 16,
140
145
  md: 20,
141
146
  lg: 24
142
- }[x],
147
+ }[w],
143
148
  className: "cursor-pointer text-fg-neutral-subtle"
144
149
  }
145
150
  )
146
151
  }
147
- ) : null, K = a.useCallback(
152
+ ) : null, te = r.useCallback(
148
153
  (e) => {
149
- const o = e.target.value, b = t, C = e.target.selectionStart || 0, O = o.length < b.length;
150
- if (o.length > 20) {
154
+ const n = e.target.value, b = t, g = e.target.selectionStart || 0, z = e.target.selectionEnd || 0, A = n.length < b.length;
155
+ if (n.length > 20) {
151
156
  e.preventDefault();
152
157
  return;
153
158
  }
154
- if (/^[0-9\s\-()+ ]*$/.test(o) || o === "") {
155
- const h = o.replace(/[^\d]/g, ""), X = b.replace(/[^\d]/g, "");
156
- if (O && h === X) {
157
- s?.({
158
- formatted: o,
159
- raw: o.replace(/[^\d]/g, ""),
159
+ if (/^[0-9\s\-()+ ]*$/.test(n) || n === "") {
160
+ const S = n.replace(/[^\d]/g, ""), ne = b.replace(/[^\d]/g, "");
161
+ if (A && S === ne) {
162
+ c?.({
163
+ formatted: n,
164
+ raw: n.replace(/[^\d]/g, ""),
160
165
  country: p
161
- }), setTimeout(() => {
162
- e.target && e.target.setSelectionRange(C, C);
163
- }, 0);
166
+ }), C.current = {
167
+ start: g,
168
+ end: g
169
+ };
164
170
  return;
165
171
  }
166
- const u = h ? A(h, l) : "";
167
- let m = C;
168
- if (u !== o)
169
- if (O) {
170
- const w = o.slice(0, C).replace(/[^\d]/g, "").length;
172
+ const u = S ? j(S, d) : "";
173
+ let o = g, I = z;
174
+ if (u !== n)
175
+ if (A) {
176
+ const h = b.slice(0, g).replace(/[^\d]/g, "").length;
171
177
  let f = 0;
172
- for (let c = 0; c < u.length; c++)
173
- if (/\d/.test(u[c]) && (f++, f === w)) {
174
- m = c + 1;
178
+ o = 0;
179
+ for (let i = 0; i < u.length; i++) {
180
+ if (/\d/.test(u[i]) && (f++, f === h)) {
181
+ o = i + 1;
175
182
  break;
176
183
  }
177
- m = Math.max(0, m);
184
+ f < h && (o = i + 1);
185
+ }
186
+ o = Math.max(
187
+ 0,
188
+ Math.min(o, u.length)
189
+ ), I = o;
178
190
  } else {
179
- const w = h.length;
191
+ const h = n.slice(0, g).replace(/[^\d]/g, "").length;
180
192
  let f = 0;
181
- for (let c = 0; c < u.length; c++)
182
- if (/\d/.test(u[c]) && (f++, f === w)) {
183
- m = c + 1;
193
+ o = 0;
194
+ for (let i = 0; i < u.length; i++) {
195
+ if (/\d/.test(u[i]) && (f++, f === h)) {
196
+ o = i + 1;
184
197
  break;
185
198
  }
186
- f < w && (m = u.length);
199
+ f < h && (o = i + 1);
200
+ }
201
+ (f < h || o === 0) && (o = u.length), I = o;
187
202
  }
188
- s?.({
203
+ else
204
+ o = g, I = z;
205
+ c?.({
189
206
  formatted: u,
190
- raw: h,
207
+ raw: S,
191
208
  country: p
192
- }), setTimeout(() => {
193
- e.target && e.target.setSelectionRange(m, m);
194
- }, 0);
209
+ }), C.current = {
210
+ start: o,
211
+ end: I
212
+ };
195
213
  }
196
214
  },
197
- [p, s, l, t]
215
+ [p, c, d, t]
198
216
  );
199
- return /* @__PURE__ */ g("div", { className: v("flex items-center", _), ref: R, children: [
200
- /* @__PURE__ */ i(
201
- ne,
217
+ return /* @__PURE__ */ x("div", { className: F("flex items-center", V), ref: O, children: [
218
+ /* @__PURE__ */ l(
219
+ ce,
202
220
  {
203
- open: T,
204
- onOpenChange: I,
205
- items: H,
206
- value: l,
221
+ open: E,
222
+ onOpenChange: R,
223
+ items: Z,
224
+ value: d,
207
225
  onValueChange: (e) => {
208
- const o = r.find(
226
+ const n = s.find(
209
227
  (b) => b.code === e
210
228
  );
211
- o && q(o);
229
+ n && X(n);
212
230
  },
213
231
  align: "start",
214
232
  "data-testid": "align-start-dropdown",
215
- search: S,
216
- searchPlaceholder: B,
233
+ search: N,
234
+ searchPlaceholder: U,
217
235
  enableVirtualization: !0,
218
236
  onSearchChange: (e) => {
219
- F(e);
237
+ M(e);
220
238
  },
221
- width: R.current?.clientWidth || "auto",
222
- children: /* @__PURE__ */ g("div", { className: N.countryButton(), children: [
223
- /* @__PURE__ */ i(M, { countryCode: l }),
224
- /* @__PURE__ */ g("div", { className: "flex gap-xs-4", children: [
225
- /* @__PURE__ */ g(z, { variants: "body", size: "md", color: "fg-neutral-main", children: [
239
+ width: O.current?.clientWidth || "auto",
240
+ children: /* @__PURE__ */ x("div", { className: D.countryButton(), children: [
241
+ /* @__PURE__ */ l($, { countryCode: d }),
242
+ /* @__PURE__ */ x("div", { className: "flex gap-xs-4", children: [
243
+ /* @__PURE__ */ x(B, { variants: "body", size: "md", color: "fg-neutral-main", children: [
226
244
  "+",
227
245
  p.dial_code
228
246
  ] }),
229
- /* @__PURE__ */ i(
230
- L,
247
+ /* @__PURE__ */ l(
248
+ _,
231
249
  {
232
- name: k ? "chevron-up" : "chevron-down",
250
+ name: T ? "chevron-up" : "chevron-down",
233
251
  size: 16,
234
252
  className: "text-fg-neutral-main"
235
253
  }
@@ -238,28 +256,30 @@ const M = ({
238
256
  ] })
239
257
  }
240
258
  ),
241
- /* @__PURE__ */ g("div", { className: N.inputContainer({ error: E, size: x }), children: [
242
- /* @__PURE__ */ i(
259
+ /* @__PURE__ */ x("div", { className: D.inputContainer({ error: Q, size: w }), children: [
260
+ /* @__PURE__ */ l(
243
261
  "input",
244
262
  {
245
- ...U,
246
- ref: V,
247
- className: v(N.input({ size: x })),
248
- placeholder: Y,
263
+ ...Y,
264
+ ref: (e) => {
265
+ P.current = e, typeof y == "function" ? y(e) : y && (y.current = e);
266
+ },
267
+ className: F(D.input({ size: w })),
268
+ placeholder: K,
249
269
  value: t,
250
- onChange: K,
251
- onFocus: () => D(!0),
252
- onBlur: () => D(!1),
253
- "data-testid": $
270
+ onChange: te,
271
+ onFocus: () => L(!0),
272
+ onBlur: () => L(!1),
273
+ "data-testid": G
254
274
  }
255
275
  ),
256
- J
276
+ ee
257
277
  ] })
258
278
  ] });
259
279
  }
260
280
  );
261
- le.displayName = "PhoneInput";
281
+ me.displayName = "PhoneInput";
262
282
  export {
263
- le as PhoneInput,
264
- le as default
283
+ me as PhoneInput,
284
+ me as default
265
285
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mcr-design-systems",
3
3
  "private": false,
4
- "version": "1.0.25",
4
+ "version": "1.0.27",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",