@fangzsx/component-library 0.0.33 → 0.0.35

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 (3) hide show
  1. package/dist/components/PhoneAndCountryDropdown/index.d.ts +7 -2
  2. package/dist/components/PhoneAndCountryDropdown/index.js +123 -116
  3. package/package.json +1 -1
package/dist/components/PhoneAndCountryDropdown/index.d.ts CHANGED
@@ -3,12 +3,12 @@ import { default as React } from 'react';
3
3
  export interface CountryOption {
4
4
  iso: string;
5
5
  country: string;
6
- dialCode: string;
6
+ code: string;
7
7
  }
8
8
  export interface CountryValue {
9
9
  iso: string | null;
10
10
  country: string | null;
11
- dialCode: string | null;
11
+ code: string | null;
12
12
  countryCode: string | null;
13
13
  }
14
14
  export declare const PH_DEFAULT: CountryValue;
@@ -21,6 +21,8 @@ interface BaseProps {
21
21
  helperText?: string;
22
22
  disabled?: boolean;
23
23
  renderFlag?: (iso: string) => React.ReactNode;
24
+ /** Force the country error state externally (e.g. on form submit) */
25
+ forceError?: boolean;
24
26
  }
25
27
  interface PhoneMode extends BaseProps {
26
28
  mode: "phone";
@@ -28,6 +30,8 @@ interface PhoneMode extends BaseProps {
28
30
  onPhoneChange: (value: string) => void;
29
31
  phoneError?: boolean;
30
32
  phoneHelperText?: string;
33
+ /** Force the phone error state externally (e.g. on form submit) */
34
+ forcePhoneError?: boolean;
31
35
  }
32
36
  interface CountryMode extends BaseProps {
33
37
  mode: "country";
@@ -35,6 +39,7 @@ interface CountryMode extends BaseProps {
35
39
  onPhoneChange?: never;
36
40
  phoneError?: never;
37
41
  phoneHelperText?: never;
42
+ forcePhoneError?: never;
38
43
  }
39
44
  export type PhoneAndCountryDropdownProps = PhoneMode | CountryMode;
40
45
  export declare function PhoneAndCountryDropdown(props: PhoneAndCountryDropdownProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/PhoneAndCountryDropdown/index.js CHANGED
@@ -1,23 +1,23 @@
1
- import { jsx as e, jsxs as t, Fragment as N } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as t, Fragment as _ } from "react/jsx-runtime";
2
2
  import { c as B } from "../../createSvgIcon-C0YrvByi.js";
3
- import { Box as d, Typography as p, TextField as K, Popper as U, ClickAwayListener as Y, Paper as _, InputBase as G, InputAdornment as J, List as Q, ListItemButton as V, ListItemIcon as X, ListItemText as Z } from "@mui/material";
4
- import { useState as v, useRef as D, useEffect as $, useMemo as ee } from "react";
5
- const H = B(/* @__PURE__ */ e("path", {
3
+ import { Box as a, Typography as u, TextField as G, Popper as J, ClickAwayListener as Q, Paper as V, InputBase as X, InputAdornment as Z, List as $, ListItemButton as ee, ListItemIcon as oe, ListItemText as re } from "@mui/material";
4
+ import { useState as v, useRef as q, useEffect as ne, useMemo as te } from "react";
5
+ const R = B(/* @__PURE__ */ e("path", {
6
6
  d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
7
- }), "KeyboardArrowDown"), oe = B(/* @__PURE__ */ e("path", {
7
+ }), "KeyboardArrowDown"), ie = B(/* @__PURE__ */ e("path", {
8
8
  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
9
- }), "Search"), re = {
9
+ }), "Search"), se = {
10
10
  iso: "PH",
11
11
  country: "Philippines",
12
- dialCode: "63",
12
+ code: "63",
13
13
  countryCode: "PH"
14
- }, R = (n) => n.replace(/-/g, "");
15
- function ne(n) {
16
- return n.toUpperCase().split("").map((l) => String.fromCodePoint(127397 + l.charCodeAt(0))).join("");
14
+ }, k = (n) => n.replace(/-/g, "");
15
+ function ce(n) {
16
+ return n.toUpperCase().split("").map((c) => String.fromCodePoint(127397 + c.charCodeAt(0))).join("");
17
17
  }
18
- function te(n) {
18
+ function le(n) {
19
19
  return /* @__PURE__ */ e(
20
- d,
20
+ a,
21
21
  {
22
22
  component: "span",
23
23
  sx: {
@@ -27,36 +27,36 @@ function te(n) {
27
27
  textAlign: "center",
28
28
  userSelect: "none"
29
29
  },
30
- children: ne(n)
30
+ children: ce(n)
31
31
  }
32
32
  );
33
33
  }
34
- function k({
34
+ function E({
35
35
  anchorEl: n,
36
- open: l,
37
- options: x,
38
- searchValue: o,
36
+ open: c,
37
+ options: h,
38
+ searchValue: r,
39
39
  onSearchChange: w,
40
- onSelect: y,
41
- onClose: m,
42
- showDialCode: C,
40
+ onSelect: x,
41
+ onClose: y,
42
+ showcode: m,
43
43
  searchPlaceholder: i = "Search country or code",
44
- renderFlag: u
44
+ renderFlag: d
45
45
  }) {
46
- const f = D(null);
47
- $(() => {
48
- l && setTimeout(() => f.current?.focus(), 50);
49
- }, [l]);
50
- const a = ee(() => {
51
- const r = o.toLowerCase(), h = R(r);
52
- return x.filter(
53
- (c) => c.country.toLowerCase().includes(r) || c.dialCode.includes(r) || R(c.dialCode).includes(h) || c.iso.toLowerCase().includes(r)
46
+ const p = q(null);
47
+ ne(() => {
48
+ c && setTimeout(() => p.current?.focus(), 50);
49
+ }, [c]);
50
+ const f = te(() => {
51
+ const o = r.toLowerCase(), C = k(o);
52
+ return h.filter(
53
+ (s) => s.country.toLowerCase().includes(o) || s.code.includes(o) || k(s.code).includes(C) || s.iso.toLowerCase().includes(o)
54
54
  );
55
- }, [x, o]);
56
- return !l || !n ? null : /* @__PURE__ */ e(
57
- U,
55
+ }, [h, r]);
56
+ return !c || !n ? null : /* @__PURE__ */ e(
57
+ J,
58
58
  {
59
- open: l,
59
+ open: c,
60
60
  anchorEl: n,
61
61
  placement: "bottom-start",
62
62
  disablePortal: !1,
@@ -68,21 +68,21 @@ function k({
68
68
  { name: "offset", options: { offset: [0, 4] } },
69
69
  { name: "preventOverflow", options: { boundary: "viewport" } }
70
70
  ],
71
- children: /* @__PURE__ */ e(Y, { onClickAway: m, children: /* @__PURE__ */ t(_, { elevation: 4, sx: { borderRadius: 1.5, overflow: "hidden" }, children: [
72
- /* @__PURE__ */ e(d, { sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ e(
73
- G,
71
+ children: /* @__PURE__ */ e(Q, { onClickAway: y, children: /* @__PURE__ */ t(V, { elevation: 4, sx: { borderRadius: 1.5, overflow: "hidden" }, children: [
72
+ /* @__PURE__ */ e(a, { sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ e(
73
+ X,
74
74
  {
75
- inputRef: f,
75
+ inputRef: p,
76
76
  fullWidth: !0,
77
77
  placeholder: i,
78
- value: o,
79
- onChange: (r) => w(r.target.value),
80
- startAdornment: /* @__PURE__ */ e(J, { position: "start", children: /* @__PURE__ */ e(oe, { fontSize: "small", color: "action" }) }),
78
+ value: r,
79
+ onChange: (o) => w(o.target.value),
80
+ startAdornment: /* @__PURE__ */ e(Z, { position: "start", children: /* @__PURE__ */ e(ie, { fontSize: "small", color: "action" }) }),
81
81
  sx: { fontSize: 14 }
82
82
  }
83
83
  ) }),
84
84
  /* @__PURE__ */ t(
85
- Q,
85
+ $,
86
86
  {
87
87
  dense: !0,
88
88
  sx: {
@@ -91,28 +91,28 @@ function k({
91
91
  py: 0.5
92
92
  },
93
93
  children: [
94
- a.length === 0 && /* @__PURE__ */ e(p, { variant: "body2", color: "text.secondary", sx: { px: 2, py: 1 }, children: "No results found" }),
95
- a.map((r) => /* @__PURE__ */ t(
96
- V,
94
+ f.length === 0 && /* @__PURE__ */ e(u, { variant: "body2", color: "text.secondary", sx: { px: 2, py: 1 }, children: "No results found" }),
95
+ f.map((o) => /* @__PURE__ */ t(
96
+ ee,
97
97
  {
98
- onClick: () => y(r),
98
+ onClick: () => x(o),
99
99
  sx: { px: 2, py: 0.75 },
100
100
  children: [
101
- /* @__PURE__ */ e(X, { sx: { minWidth: 36 }, children: u(r.iso) }),
101
+ /* @__PURE__ */ e(oe, { sx: { minWidth: 36 }, children: d(o.iso) }),
102
102
  /* @__PURE__ */ e(
103
- Z,
103
+ re,
104
104
  {
105
- primary: r.country,
105
+ primary: o.country,
106
106
  primaryTypographyProps: { fontSize: 14 }
107
107
  }
108
108
  ),
109
- C && /* @__PURE__ */ t(p, { variant: "body2", color: "text.secondary", sx: { ml: 1, whiteSpace: "nowrap" }, children: [
109
+ m && /* @__PURE__ */ t(u, { variant: "body2", color: "text.secondary", sx: { ml: 1, whiteSpace: "nowrap" }, children: [
110
110
  "+",
111
- r.dialCode
111
+ o.code
112
112
  ] })
113
113
  ]
114
114
  },
115
- r.iso
115
+ o.iso
116
116
  ))
117
117
  ]
118
118
  }
@@ -121,37 +121,44 @@ function k({
121
121
  }
122
122
  );
123
123
  }
124
- function ce(n) {
124
+ function pe(n) {
125
125
  const {
126
- mode: l,
127
- options: x,
128
- value: o = re,
126
+ mode: c,
127
+ options: h,
128
+ value: r = se,
129
129
  onChange: w,
130
- searchPlaceholder: y,
131
- error: m = !1,
132
- helperText: C,
130
+ searchPlaceholder: x,
131
+ error: y = !1,
132
+ helperText: m,
133
133
  disabled: i = !1,
134
- renderFlag: u = te
135
- } = n, [f, a] = v(!1), [r, h] = v(""), [c, E] = v(!1), [b, S] = v(!1), g = D(null), P = (s) => {
134
+ renderFlag: d = le,
135
+ forceError: p = !1
136
+ } = n, [f, o] = v(!1), [C, s] = v(""), [D, F] = v(!1), [M, S] = v(!1), b = q(null), g = M || p, P = (l) => {
136
137
  w({
137
- iso: s.iso,
138
- country: s.country,
139
- dialCode: s.dialCode,
140
- countryCode: s.iso
141
- }), a(!1), h("");
138
+ iso: l.iso,
139
+ country: l.country,
140
+ code: l.code,
141
+ countryCode: l.iso
142
+ }), o(!1), s("");
142
143
  }, I = () => {
143
- a(!1), h("");
144
+ o(!1), s("");
144
145
  };
145
- if (l === "phone") {
146
- const { phoneNumber: s, onPhoneChange: q, phoneError: F, phoneHelperText: M } = n, O = F || c && !s.trim(), L = M || (c && !s.trim() ? "Phone number is required" : void 0), W = m || b && !o.iso, A = C || (b && !o.iso ? "Country is required" : void 0);
147
- return /* @__PURE__ */ t(d, { sx: { position: "relative" }, children: [
148
- /* @__PURE__ */ t(d, { sx: { display: "flex" }, children: [
146
+ if (c === "phone") {
147
+ const {
148
+ phoneNumber: l,
149
+ onPhoneChange: O,
150
+ phoneError: W,
151
+ phoneHelperText: j,
152
+ forcePhoneError: N = !1
153
+ } = n, L = D || N || p, K = W || L && !l.trim(), A = j || (L && !l.trim() ? "Phone number is required" : void 0), U = y || g && !r.iso, H = m || (g && !r.iso ? "Country is required" : void 0);
154
+ return /* @__PURE__ */ t(a, { sx: { position: "relative" }, children: [
155
+ /* @__PURE__ */ t(a, { sx: { display: "flex" }, children: [
149
156
  /* @__PURE__ */ t(
150
- d,
157
+ a,
151
158
  {
152
- ref: g,
159
+ ref: b,
153
160
  tabIndex: 0,
154
- onClick: () => !i && a(!0),
161
+ onClick: () => !i && o(!0),
155
162
  onBlur: () => S(!0),
156
163
  sx: {
157
164
  display: "flex",
@@ -160,7 +167,7 @@ function ce(n) {
160
167
  px: 1.5,
161
168
  height: 40,
162
169
  border: "1px solid",
163
- borderColor: W ? "error.main" : "rgba(0,0,0,0.23)",
170
+ borderColor: U ? "error.main" : "rgba(0,0,0,0.23)",
164
171
  borderRight: "none",
165
172
  borderRadius: "4px 0 0 4px",
166
173
  cursor: i ? "default" : "pointer",
@@ -172,15 +179,15 @@ function ce(n) {
172
179
  outline: "none"
173
180
  },
174
181
  children: [
175
- o.iso && /* @__PURE__ */ t(N, { children: [
176
- u(o.iso),
177
- /* @__PURE__ */ t(p, { variant: "body2", sx: { whiteSpace: "nowrap" }, children: [
182
+ r.iso && /* @__PURE__ */ t(_, { children: [
183
+ d(r.iso),
184
+ /* @__PURE__ */ t(u, { variant: "body2", sx: { whiteSpace: "nowrap" }, children: [
178
185
  "+",
179
- o.dialCode
186
+ r.code
180
187
  ] })
181
188
  ] }),
182
189
  /* @__PURE__ */ e(
183
- H,
190
+ R,
184
191
  {
185
192
  fontSize: "small",
186
193
  sx: { ml: "auto", color: "action.active" }
@@ -190,16 +197,16 @@ function ce(n) {
190
197
  }
191
198
  ),
192
199
  /* @__PURE__ */ e(
193
- K,
200
+ G,
194
201
  {
195
202
  fullWidth: !0,
196
203
  size: "small",
197
204
  type: "tel",
198
- value: s,
199
- onChange: (j) => q(j.target.value),
200
- onBlur: () => E(!0),
205
+ value: l,
206
+ onChange: (Y) => O(Y.target.value),
207
+ onBlur: () => F(!0),
201
208
  disabled: i,
202
- error: O,
209
+ error: K,
203
210
  sx: {
204
211
  "& .MuiOutlinedInput-root": {
205
212
  borderRadius: "0 4px 4px 0"
@@ -208,40 +215,40 @@ function ce(n) {
208
215
  }
209
216
  )
210
217
  ] }),
211
- (A || L) && /* @__PURE__ */ e(
212
- p,
218
+ (H || A) && /* @__PURE__ */ e(
219
+ u,
213
220
  {
214
221
  variant: "caption",
215
222
  color: "error",
216
223
  sx: { display: "block", mt: 0.5, ml: 0 },
217
- children: A || L
224
+ children: H || A
218
225
  }
219
226
  ),
220
227
  /* @__PURE__ */ e(
221
- k,
228
+ E,
222
229
  {
223
- anchorEl: g.current,
230
+ anchorEl: b.current,
224
231
  open: f,
225
- options: x,
226
- searchValue: r,
227
- onSearchChange: h,
232
+ options: h,
233
+ searchValue: C,
234
+ onSearchChange: s,
228
235
  onSelect: P,
229
236
  onClose: I,
230
- showDialCode: !0,
231
- searchPlaceholder: y,
232
- renderFlag: u
237
+ showcode: !0,
238
+ searchPlaceholder: x,
239
+ renderFlag: d
233
240
  }
234
241
  )
235
242
  ] });
236
243
  }
237
- const T = m || b && !o.iso, z = C || (b && !o.iso ? "Country is required" : void 0);
238
- return /* @__PURE__ */ t(d, { sx: { position: "relative" }, children: [
244
+ const T = y || g && !r.iso, z = m || (g && !r.iso ? "Country is required" : void 0);
245
+ return /* @__PURE__ */ t(a, { sx: { position: "relative" }, children: [
239
246
  /* @__PURE__ */ t(
240
- d,
247
+ a,
241
248
  {
242
- ref: g,
249
+ ref: b,
243
250
  tabIndex: 0,
244
- onClick: () => !i && a(!0),
251
+ onClick: () => !i && o(!0),
245
252
  onBlur: () => S(!0),
246
253
  sx: {
247
254
  display: "flex",
@@ -258,38 +265,38 @@ function ce(n) {
258
265
  outline: "none"
259
266
  },
260
267
  children: [
261
- o.countryCode && u(o.countryCode),
268
+ r.countryCode && d(r.countryCode),
262
269
  /* @__PURE__ */ e(
263
- p,
270
+ u,
264
271
  {
265
272
  variant: "body2",
266
- sx: { flex: 1, color: o.country ? "text.primary" : "text.secondary" },
267
- children: o.country ?? "Select country"
273
+ sx: { flex: 1, color: r.country ? "text.primary" : "text.secondary" },
274
+ children: r.country ?? "Select country"
268
275
  }
269
276
  ),
270
- /* @__PURE__ */ e(H, { fontSize: "small", sx: { color: "action.active" } })
277
+ /* @__PURE__ */ e(R, { fontSize: "small", sx: { color: "action.active" } })
271
278
  ]
272
279
  }
273
280
  ),
274
- z && /* @__PURE__ */ e(p, { variant: "caption", color: T ? "error" : "text.secondary", sx: { mt: 0.5, ml: 0.5 }, children: z }),
281
+ z && /* @__PURE__ */ e(u, { variant: "caption", color: T ? "error" : "text.secondary", sx: { mt: 0.5, ml: 0.5 }, children: z }),
275
282
  /* @__PURE__ */ e(
276
- k,
283
+ E,
277
284
  {
278
- anchorEl: g.current,
285
+ anchorEl: b.current,
279
286
  open: f,
280
- options: x,
281
- searchValue: r,
282
- onSearchChange: h,
287
+ options: h,
288
+ searchValue: C,
289
+ onSearchChange: s,
283
290
  onSelect: P,
284
291
  onClose: I,
285
- showDialCode: !1,
286
- searchPlaceholder: y,
287
- renderFlag: u
292
+ showcode: !1,
293
+ searchPlaceholder: x,
294
+ renderFlag: d
288
295
  }
289
296
  )
290
297
  ] });
291
298
  }
292
299
  export {
293
- re as PH_DEFAULT,
294
- ce as PhoneAndCountryDropdown
300
+ se as PH_DEFAULT,
301
+ pe as PhoneAndCountryDropdown
295
302
  };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@fangzsx/component-library",
3
3
  "author": "Jay Gilbert Garzon",
4
4
  "private": false,
5
- "version": "0.0.33",
5
+ "version": "0.0.35",
6
6
  "type": "module",
7
7
  "main": "dist/main.js",
8
8
  "types": "dist/main.d.ts",