@starasia/dropdown 1.0.5 → 1.0.6
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.
- package/dist/dropdown.es.js +109 -99
- package/dist/dropdown.umd.js +44 -34
- package/package.json +1 -1
package/dist/dropdown.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as n, jsxs as p, Fragment as q } from "react/jsx-runtime";
|
|
2
2
|
import F, { useState as y, useRef as k, useEffect as b, forwardRef as M } from "react";
|
|
3
3
|
const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
|
|
4
4
|
* {
|
|
@@ -10,67 +10,77 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
10
10
|
:root {
|
|
11
11
|
/* color */
|
|
12
12
|
/* brand */
|
|
13
|
-
--starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
14
|
-
--starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
15
|
-
--starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
16
|
-
--starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
17
|
-
--starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
13
|
+
--starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
14
|
+
--starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
15
|
+
--starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
|
|
16
|
+
--starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
17
|
+
--starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
18
18
|
/* gray */
|
|
19
19
|
--starasia-ui-dropdown-color-primary-gray: var(
|
|
20
20
|
--starasia-ui-color-gray-700,
|
|
21
|
-
|
|
21
|
+
rgba(55, 65, 81, 1)
|
|
22
22
|
);
|
|
23
23
|
--starasia-ui-dropdown-color-secondary-gray: var(
|
|
24
24
|
--starasia-ui-color-gray-500,
|
|
25
|
-
|
|
25
|
+
rgba(107, 114, 128, 1)
|
|
26
26
|
);
|
|
27
27
|
--starasia-ui-dropdown-color-tertiary-gray: var(
|
|
28
28
|
--starasia-ui-color-gray-300,
|
|
29
|
-
|
|
29
|
+
rgba(209, 213, 219, 1)
|
|
30
30
|
);
|
|
31
31
|
--starasia-ui-dropdown-color-quaternary-gray: var(
|
|
32
32
|
--starasia-ui-color-gray-100,
|
|
33
|
-
|
|
33
|
+
rgba(243, 244, 246, 1)
|
|
34
34
|
);
|
|
35
35
|
--starasia-ui-dropdown-color-quinary-gray: var(
|
|
36
36
|
--starasia-ui-color-gray-50,
|
|
37
|
-
|
|
37
|
+
rgba(249, 250, 251, 1)
|
|
38
38
|
);
|
|
39
39
|
/* bg color */
|
|
40
40
|
--starasia-ui-dropdown-background-color-primary: var(
|
|
41
41
|
--starasia-ui-dropdown-color-secondary-blue,
|
|
42
|
-
|
|
42
|
+
rgba(59, 130, 246, 1)
|
|
43
43
|
);
|
|
44
44
|
--starasia-ui-dropdown-background-color-secondary: var(
|
|
45
45
|
--starasia-ui-dropdown-color-quinary-blue,
|
|
46
|
-
|
|
46
|
+
rgba(239, 246, 255, 1)
|
|
47
47
|
);
|
|
48
48
|
|
|
49
49
|
/* disalble color */
|
|
50
50
|
--starasia-ui-dropdown-color-disable: var(
|
|
51
51
|
--starasia-ui-dropdown-color-tertiary-gray,
|
|
52
|
-
|
|
52
|
+
rgba(209, 213, 219, 1)
|
|
53
53
|
);
|
|
54
54
|
|
|
55
55
|
/* border color */
|
|
56
|
-
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default);
|
|
56
|
+
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
57
57
|
--starasia-ui-dropdown-border-color-secondary: var(
|
|
58
58
|
--starasia-ui-color-gray-300,
|
|
59
|
-
|
|
59
|
+
rgba(209, 213, 219, 1)
|
|
60
60
|
);
|
|
61
61
|
--starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
|
|
62
62
|
|
|
63
63
|
--starasia-ui-dropdown-color-secondary-red: var(
|
|
64
64
|
--starasia-ui-color-red-500,
|
|
65
|
-
|
|
65
|
+
rgba(239, 68, 68, 1)
|
|
66
66
|
);
|
|
67
67
|
|
|
68
68
|
/* plachoder color */
|
|
69
69
|
--starasia-ui-dropdown-placholder-color: var(
|
|
70
70
|
--starasia-ui-color-gray-200,
|
|
71
|
-
|
|
71
|
+
rgba(201, 206, 204, 1)
|
|
72
72
|
);
|
|
73
73
|
|
|
74
|
+
/* white */
|
|
75
|
+
--starasia-ui-dropdown-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
|
|
76
|
+
/* disabled bg */
|
|
77
|
+
--starasia-ui-dropdown-color-disabled-bg: rgba(242, 243, 242, 1);
|
|
78
|
+
/* text colors */
|
|
79
|
+
--starasia-ui-dropdown-color-text-primary: rgba(24, 26, 25, 1);
|
|
80
|
+
--starasia-ui-dropdown-color-text-secondary: rgba(120, 134, 127, 1);
|
|
81
|
+
/* shadow */
|
|
82
|
+
--starasia-ui-dropdown-box-shadow-list: rgba(0, 0, 0, 0.08);
|
|
83
|
+
|
|
74
84
|
/* border width */
|
|
75
85
|
--starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
|
|
76
86
|
|
|
@@ -79,7 +89,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
79
89
|
--starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
|
|
80
90
|
|
|
81
91
|
/* shadow */
|
|
82
|
-
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.2);
|
|
92
|
+
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.2);
|
|
83
93
|
|
|
84
94
|
/* below is for size,above is */
|
|
85
95
|
--starasia-ui-dropdown-fontWeight-normal: var(
|
|
@@ -130,14 +140,14 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
130
140
|
display: flex;
|
|
131
141
|
align-items: center;
|
|
132
142
|
border: var(--starasia-ui-dropdown-border-width) solid
|
|
133
|
-
|
|
143
|
+
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
134
144
|
border-radius: var(--borderRadius);
|
|
135
|
-
background-color: white;
|
|
145
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
136
146
|
font-size: var(--baseFont);
|
|
137
147
|
cursor: pointer;
|
|
138
148
|
}
|
|
139
149
|
.starasia-input-dropdown-container.disable {
|
|
140
|
-
background-color:
|
|
150
|
+
background-color: var(--starasia-ui-dropdown-color-disabled-bg);
|
|
141
151
|
cursor: not-allowed;
|
|
142
152
|
pointer-events: none;
|
|
143
153
|
}
|
|
@@ -148,7 +158,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
148
158
|
.starasia-input-dropdown-container.active {
|
|
149
159
|
border-color: var(--starasia-ui-dropdown-border-color-primary);
|
|
150
160
|
box-shadow: var(--starasia-ui-dropdown-box-shadow);
|
|
151
|
-
background-color: white;
|
|
161
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
152
162
|
}
|
|
153
163
|
|
|
154
164
|
.starasia-input-dropdown-preview-container {
|
|
@@ -169,8 +179,8 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
169
179
|
border: var(--starasia-ui-dropdown-border-width) solid
|
|
170
180
|
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
171
181
|
border-radius: var(--borderRadius);
|
|
172
|
-
background-color:
|
|
173
|
-
box-shadow: 0px 8px 12px 0px
|
|
182
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
183
|
+
box-shadow: 0px 8px 12px 0px var(--starasia-ui-dropdown-box-shadow-list);
|
|
174
184
|
max-height: 312px;
|
|
175
185
|
overflow-y: auto;
|
|
176
186
|
z-index: 999;
|
|
@@ -205,7 +215,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
205
215
|
border-radius: var(--borderRadius);
|
|
206
216
|
gap: var(--starasia-ui-dropdown-spacing-sm);
|
|
207
217
|
padding-inline: var(--paddingInline);
|
|
208
|
-
background: white;
|
|
218
|
+
background: var(--starasia-ui-dropdown-color-white);
|
|
209
219
|
& input {
|
|
210
220
|
flex: 1;
|
|
211
221
|
outline: none;
|
|
@@ -247,12 +257,12 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
247
257
|
}
|
|
248
258
|
|
|
249
259
|
.starasia-input-dropdwon-item:hover {
|
|
250
|
-
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
|
|
260
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
|
|
251
261
|
}
|
|
252
262
|
.starasia-input-dropdwon-item.active {
|
|
253
263
|
/* color: var(--starasia-ui-dropdown-background-color-primary); */
|
|
254
264
|
/* border-radius: var(--borderRadius); */
|
|
255
|
-
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
|
|
265
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
|
|
256
266
|
/* background: var(--starasia-ui-dropdown-background-color-secondary); */
|
|
257
267
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
258
268
|
}
|
|
@@ -291,30 +301,30 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
291
301
|
}
|
|
292
302
|
|
|
293
303
|
.starasia-input-dropdwon-item-text {
|
|
294
|
-
color:
|
|
304
|
+
color: var(--starasia-ui-dropdown-color-text-primary);
|
|
295
305
|
/* font-size: 14px; */
|
|
296
306
|
font-size: inherit;
|
|
297
307
|
font-weight: 500;
|
|
298
308
|
}
|
|
299
309
|
.starasia-input-dropdwon-item-text.active {
|
|
300
|
-
color: var(--starasia-ui-brand-primary-default);
|
|
310
|
+
color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
301
311
|
}
|
|
302
312
|
|
|
303
313
|
.starasia-input-dropdwon-item-text-description {
|
|
304
|
-
color:
|
|
314
|
+
color: var(--starasia-ui-dropdown-color-text-secondary);
|
|
305
315
|
/* font-size: 14px; */
|
|
306
316
|
font-size: inherit;
|
|
307
317
|
font-weight: 400;
|
|
308
318
|
}
|
|
309
319
|
.starasia-input-dropdwon-item-text-description.active {
|
|
310
|
-
color: var(--starasia-ui-brand-primary-default);
|
|
320
|
+
color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
311
321
|
}
|
|
312
322
|
|
|
313
323
|
/* for checkbox */
|
|
314
324
|
.checkbox-wrapper-30 .checkbox {
|
|
315
325
|
--bg: #fff;
|
|
316
326
|
--brdr: #d1d6ee;
|
|
317
|
-
--brdr-actv: var(--starasia-ui-brand-primary-default);
|
|
327
|
+
--brdr-actv: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
318
328
|
--brdr-hovr: #bbc1e1;
|
|
319
329
|
--dur: calc((var(--size, 2) / 2) * 0.6s);
|
|
320
330
|
display: inline-block;
|
|
@@ -395,7 +405,7 @@ function V(a) {
|
|
|
395
405
|
document.removeEventListener("click", o, !0);
|
|
396
406
|
}), []), { ref: c, isComponentVisible: i, setIsComponentVisible: t };
|
|
397
407
|
}
|
|
398
|
-
const J = ({ ...a }) => /* @__PURE__ */
|
|
408
|
+
const J = ({ ...a }) => /* @__PURE__ */ n(
|
|
399
409
|
"svg",
|
|
400
410
|
{
|
|
401
411
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -403,7 +413,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
403
413
|
viewBox: "0 0 24 24",
|
|
404
414
|
fill: "none",
|
|
405
415
|
color: "#939E99",
|
|
406
|
-
children: /* @__PURE__ */
|
|
416
|
+
children: /* @__PURE__ */ n(
|
|
407
417
|
"path",
|
|
408
418
|
{
|
|
409
419
|
d: "M4 9L12 17L20 9",
|
|
@@ -414,7 +424,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
414
424
|
}
|
|
415
425
|
)
|
|
416
426
|
}
|
|
417
|
-
), G = ({ ...a }) => /* @__PURE__ */
|
|
427
|
+
), G = ({ ...a }) => /* @__PURE__ */ p(
|
|
418
428
|
"svg",
|
|
419
429
|
{
|
|
420
430
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -422,7 +432,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
422
432
|
viewBox: "0 0 20 20",
|
|
423
433
|
fill: "none",
|
|
424
434
|
children: [
|
|
425
|
-
/* @__PURE__ */
|
|
435
|
+
/* @__PURE__ */ n(
|
|
426
436
|
"circle",
|
|
427
437
|
{
|
|
428
438
|
cx: "9.80547",
|
|
@@ -434,7 +444,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
434
444
|
strokeLinejoin: "round"
|
|
435
445
|
}
|
|
436
446
|
),
|
|
437
|
-
/* @__PURE__ */
|
|
447
|
+
/* @__PURE__ */ n(
|
|
438
448
|
"path",
|
|
439
449
|
{
|
|
440
450
|
d: "M15.0153 15.4043L17.9519 18.3333",
|
|
@@ -446,9 +456,9 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
446
456
|
)
|
|
447
457
|
]
|
|
448
458
|
}
|
|
449
|
-
), K = ({ isChecked: a }) => /* @__PURE__ */
|
|
450
|
-
/* @__PURE__ */
|
|
451
|
-
/* @__PURE__ */
|
|
459
|
+
), K = ({ isChecked: a }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
|
|
460
|
+
/* @__PURE__ */ p("span", { className: "checkbox", children: [
|
|
461
|
+
/* @__PURE__ */ n(
|
|
452
462
|
"input",
|
|
453
463
|
{
|
|
454
464
|
type: "checkbox",
|
|
@@ -456,9 +466,9 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
456
466
|
checked: a
|
|
457
467
|
}
|
|
458
468
|
),
|
|
459
|
-
/* @__PURE__ */
|
|
469
|
+
/* @__PURE__ */ n("svg", { children: /* @__PURE__ */ n("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
|
|
460
470
|
] }),
|
|
461
|
-
/* @__PURE__ */
|
|
471
|
+
/* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ n("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ n(
|
|
462
472
|
"path",
|
|
463
473
|
{
|
|
464
474
|
fill: "none",
|
|
@@ -475,30 +485,30 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
475
485
|
onSearch: o,
|
|
476
486
|
value: e,
|
|
477
487
|
handleChangeValue: h,
|
|
478
|
-
multiSelect:
|
|
488
|
+
multiSelect: l,
|
|
479
489
|
searchValue: v
|
|
480
490
|
}, I) => {
|
|
481
491
|
const [C, R] = y(0), [$, z] = y(), w = k(null);
|
|
482
492
|
return b(() => {
|
|
483
493
|
if (w.current) {
|
|
484
|
-
const
|
|
485
|
-
R(
|
|
494
|
+
const r = w.current.getBoundingClientRect();
|
|
495
|
+
R(r.width);
|
|
486
496
|
}
|
|
487
497
|
}, [w, t]), b(() => {
|
|
488
|
-
i && v ? i.forEach((
|
|
489
|
-
if (
|
|
490
|
-
z(
|
|
498
|
+
i && v ? i.forEach((r) => {
|
|
499
|
+
if (r.label.startsWith(v || "")) {
|
|
500
|
+
z(r.value);
|
|
491
501
|
return;
|
|
492
502
|
}
|
|
493
503
|
}) : z(void 0);
|
|
494
|
-
}, [v, i]), /* @__PURE__ */
|
|
504
|
+
}, [v, i]), /* @__PURE__ */ n(q, { children: t ? /* @__PURE__ */ p(
|
|
495
505
|
"div",
|
|
496
506
|
{
|
|
497
507
|
className: "starasia-input-dropdown-lists-container",
|
|
498
|
-
onClick: (
|
|
508
|
+
onClick: (r) => r.stopPropagation(),
|
|
499
509
|
ref: I,
|
|
500
510
|
children: [
|
|
501
|
-
c ? /* @__PURE__ */
|
|
511
|
+
c ? /* @__PURE__ */ p(
|
|
502
512
|
"div",
|
|
503
513
|
{
|
|
504
514
|
className: "starasia-input-dropdown-container-dropdown-search",
|
|
@@ -510,12 +520,12 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
510
520
|
zIndex: 1
|
|
511
521
|
},
|
|
512
522
|
children: [
|
|
513
|
-
/* @__PURE__ */
|
|
514
|
-
/* @__PURE__ */
|
|
523
|
+
/* @__PURE__ */ n("div", { style: { display: "flex" }, children: /* @__PURE__ */ n(G, { strokeWidth: 2, width: 20 }) }),
|
|
524
|
+
/* @__PURE__ */ n(
|
|
515
525
|
"input",
|
|
516
526
|
{
|
|
517
|
-
onChange: (
|
|
518
|
-
o && o(
|
|
527
|
+
onChange: (r) => {
|
|
528
|
+
o && o(r.target.value);
|
|
519
529
|
},
|
|
520
530
|
value: v,
|
|
521
531
|
autoFocus: !0,
|
|
@@ -525,48 +535,48 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
525
535
|
]
|
|
526
536
|
}
|
|
527
537
|
) : null,
|
|
528
|
-
/* @__PURE__ */
|
|
538
|
+
/* @__PURE__ */ n(
|
|
529
539
|
"div",
|
|
530
540
|
{
|
|
531
|
-
className: `starasia-input-dropdwon-item-container ${
|
|
541
|
+
className: `starasia-input-dropdwon-item-container ${l ? "multi" : ""}`,
|
|
532
542
|
ref: w,
|
|
533
|
-
children: i.map((
|
|
534
|
-
const
|
|
535
|
-
return /* @__PURE__ */
|
|
543
|
+
children: i.map((r, x) => {
|
|
544
|
+
const m = !!(e != null && e.find((E) => E.value === r.value));
|
|
545
|
+
return /* @__PURE__ */ p(
|
|
536
546
|
"div",
|
|
537
547
|
{
|
|
538
|
-
className: `starasia-input-dropdwon-item ${
|
|
539
|
-
onClick: () => h(
|
|
548
|
+
className: `starasia-input-dropdwon-item ${m ? "active" : " "} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
|
|
549
|
+
onClick: () => h(r.label, r.value),
|
|
540
550
|
children: [
|
|
541
|
-
|
|
542
|
-
|
|
551
|
+
l ? /* @__PURE__ */ n("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ n(K, { isChecked: m }) }) : null,
|
|
552
|
+
r.icon ? /* @__PURE__ */ n("div", { children: F.cloneElement(r.icon, {
|
|
543
553
|
width: 16
|
|
544
554
|
}) }) : null,
|
|
545
|
-
/* @__PURE__ */
|
|
546
|
-
/* @__PURE__ */
|
|
555
|
+
/* @__PURE__ */ p("div", { children: [
|
|
556
|
+
/* @__PURE__ */ n(
|
|
547
557
|
"p",
|
|
548
558
|
{
|
|
549
|
-
className: `starasia-input-dropdwon-item-text ${
|
|
559
|
+
className: `starasia-input-dropdwon-item-text ${m ? "active" : null} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
|
|
550
560
|
style: {
|
|
551
561
|
textWrap: "nowrap",
|
|
552
562
|
width: `${C - 12}px`,
|
|
553
563
|
overflow: "hidden",
|
|
554
564
|
textOverflow: "ellipsis"
|
|
555
565
|
},
|
|
556
|
-
children:
|
|
566
|
+
children: r.label
|
|
557
567
|
}
|
|
558
568
|
),
|
|
559
|
-
|
|
569
|
+
r.description ? /* @__PURE__ */ n(
|
|
560
570
|
"p",
|
|
561
571
|
{
|
|
562
|
-
className: `starasia-input-dropdwon-item-text-description ${
|
|
572
|
+
className: `starasia-input-dropdwon-item-text-description ${m ? "active" : null} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
|
|
563
573
|
style: {
|
|
564
574
|
textWrap: "nowrap",
|
|
565
575
|
width: `${C - 12}px`,
|
|
566
576
|
overflow: "hidden",
|
|
567
577
|
textOverflow: "ellipsis"
|
|
568
578
|
},
|
|
569
|
-
children:
|
|
579
|
+
children: r.description
|
|
570
580
|
}
|
|
571
581
|
) : null
|
|
572
582
|
] })
|
|
@@ -590,10 +600,10 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
590
600
|
var h;
|
|
591
601
|
const o = () => {
|
|
592
602
|
if (t.current) {
|
|
593
|
-
let
|
|
594
|
-
for (;
|
|
595
|
-
|
|
596
|
-
|
|
603
|
+
let l = t.current.parentElement;
|
|
604
|
+
for (; l && !c(l); )
|
|
605
|
+
l = l.parentElement;
|
|
606
|
+
l && i();
|
|
597
607
|
}
|
|
598
608
|
};
|
|
599
609
|
let e = (h = t.current) == null ? void 0 : h.parentElement;
|
|
@@ -604,7 +614,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
604
614
|
};
|
|
605
615
|
}, []);
|
|
606
616
|
const c = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
|
|
607
|
-
return /* @__PURE__ */
|
|
617
|
+
return /* @__PURE__ */ n("div", { ref: t, children: a });
|
|
608
618
|
}, A = "starasia-input-dropdown-styles", U = (a) => {
|
|
609
619
|
if (!document.getElementById(A)) {
|
|
610
620
|
const i = document.createElement("style");
|
|
@@ -620,7 +630,7 @@ const _ = ({
|
|
|
620
630
|
multiSelect: o,
|
|
621
631
|
searchAble: e,
|
|
622
632
|
iconLeft: h,
|
|
623
|
-
placeholder:
|
|
633
|
+
placeholder: l,
|
|
624
634
|
onSearch: v,
|
|
625
635
|
error: I,
|
|
626
636
|
onBlur: C,
|
|
@@ -628,58 +638,58 @@ const _ = ({
|
|
|
628
638
|
disable: $,
|
|
629
639
|
searchValue: z
|
|
630
640
|
}) => {
|
|
631
|
-
const w = k(), [
|
|
641
|
+
const w = k(), [r, x] = y([]), [m, E] = y(""), g = k(null), { isComponentVisible: B, ref: L, setIsComponentVisible: N } = V(!1), H = () => {
|
|
632
642
|
N((s) => !s);
|
|
633
643
|
}, j = (s, d) => {
|
|
634
644
|
if (!o)
|
|
635
645
|
x([{ label: s, value: d }]), i([{ label: s, value: d }]), N(!1);
|
|
636
|
-
else if (
|
|
646
|
+
else if (r == null ? void 0 : r.find((u) => u.value === d)) {
|
|
637
647
|
const u = [
|
|
638
|
-
...
|
|
648
|
+
...r ? r.filter((D) => D.value !== d) : []
|
|
639
649
|
];
|
|
640
650
|
x(u), i(u);
|
|
641
651
|
} else {
|
|
642
|
-
const u = [...
|
|
652
|
+
const u = [...r || [], { label: s, value: d }];
|
|
643
653
|
x(u), i(u);
|
|
644
654
|
}
|
|
645
655
|
};
|
|
646
656
|
b(() => {
|
|
647
657
|
JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t, x(w.current || []));
|
|
648
658
|
}, [t]);
|
|
649
|
-
const O = () =>
|
|
650
|
-
/* @__PURE__ */
|
|
651
|
-
/* @__PURE__ */
|
|
659
|
+
const O = () => r.length ? o ? r == null ? void 0 : r.map((s, d) => /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-item", children: [
|
|
660
|
+
/* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: s == null ? void 0 : s.label }, d),
|
|
661
|
+
/* @__PURE__ */ n(
|
|
652
662
|
X,
|
|
653
663
|
{
|
|
654
664
|
onClick: () => j(s.label, s.value)
|
|
655
665
|
}
|
|
656
666
|
)
|
|
657
|
-
] })) : /* @__PURE__ */
|
|
667
|
+
] })) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: r == null ? void 0 : r[0].label }) : /* @__PURE__ */ n("p", { className: "starasia-input-dropdown-placeholder", children: l }), f = () => {
|
|
658
668
|
if (L.current && g.current) {
|
|
659
669
|
const s = window.innerHeight, d = L.current.getBoundingClientRect(), W = g.current.getBoundingClientRect(), u = d.bottom + W.height;
|
|
660
670
|
g.current.style.left = `${d.left}px`, g.current.style.width = `${d.width}px`, u >= s - 10 ? (g.current.style.top = `${d.top - W.height - 5}px`, E("top")) : (g.current.style.top = `${d.top + d.height}px`, E("bottom"));
|
|
661
671
|
}
|
|
662
672
|
};
|
|
663
|
-
return b(() => (window.addEventListener("scroll",
|
|
664
|
-
window.removeEventListener("scroll",
|
|
673
|
+
return b(() => (window.addEventListener("scroll", f), window.addEventListener("resize", f), () => {
|
|
674
|
+
window.removeEventListener("scroll", f), window.removeEventListener("resize", f);
|
|
665
675
|
}), []), b(() => {
|
|
666
|
-
|
|
667
|
-
}, [B]), /* @__PURE__ */
|
|
676
|
+
f();
|
|
677
|
+
}, [B]), /* @__PURE__ */ n(T, { handleChangePosition: f, children: /* @__PURE__ */ p(
|
|
668
678
|
"div",
|
|
669
679
|
{
|
|
670
680
|
className: `starasia-input-dropdown-container ${$ ? "disable" : ""} starasia-input-dropdown-size-${c} ${B ? "active" : ""} ${I ? "error" : ""}`,
|
|
671
681
|
ref: L,
|
|
672
682
|
onClick: H,
|
|
673
683
|
children: [
|
|
674
|
-
/* @__PURE__ */
|
|
675
|
-
h ? /* @__PURE__ */
|
|
684
|
+
/* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
|
|
685
|
+
h ? /* @__PURE__ */ n(q, { children: F.cloneElement(h, {
|
|
676
686
|
width: S(c),
|
|
677
687
|
color: "#939E99",
|
|
678
688
|
style: {
|
|
679
689
|
color: "#939E99"
|
|
680
690
|
}
|
|
681
691
|
}) }) : null,
|
|
682
|
-
/* @__PURE__ */
|
|
692
|
+
/* @__PURE__ */ n(
|
|
683
693
|
"div",
|
|
684
694
|
{
|
|
685
695
|
className: "starasia-input-dropdown-container-preview-item",
|
|
@@ -689,7 +699,7 @@ const _ = ({
|
|
|
689
699
|
children: O()
|
|
690
700
|
}
|
|
691
701
|
),
|
|
692
|
-
/* @__PURE__ */
|
|
702
|
+
/* @__PURE__ */ n(
|
|
693
703
|
J,
|
|
694
704
|
{
|
|
695
705
|
strokeWidth: 2,
|
|
@@ -698,15 +708,15 @@ const _ = ({
|
|
|
698
708
|
}
|
|
699
709
|
)
|
|
700
710
|
] }),
|
|
701
|
-
/* @__PURE__ */
|
|
711
|
+
/* @__PURE__ */ n(
|
|
702
712
|
Q,
|
|
703
713
|
{
|
|
704
714
|
dropdownLists: a,
|
|
705
715
|
handleChangeValue: j,
|
|
706
716
|
isComponentVisible: B,
|
|
707
|
-
positionDropdown:
|
|
717
|
+
positionDropdown: m,
|
|
708
718
|
searchAble: !!e,
|
|
709
|
-
value:
|
|
719
|
+
value: r,
|
|
710
720
|
onSearch: v,
|
|
711
721
|
ref: g,
|
|
712
722
|
multiSelect: o,
|
|
@@ -723,7 +733,7 @@ const _ = ({
|
|
|
723
733
|
return 16;
|
|
724
734
|
if (a === "lg")
|
|
725
735
|
return 20;
|
|
726
|
-
}, X = (a) => /* @__PURE__ */
|
|
736
|
+
}, X = (a) => /* @__PURE__ */ n(
|
|
727
737
|
"svg",
|
|
728
738
|
{
|
|
729
739
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -732,7 +742,7 @@ const _ = ({
|
|
|
732
742
|
viewBox: "0 0 18 18",
|
|
733
743
|
fill: "none",
|
|
734
744
|
...a,
|
|
735
|
-
children: /* @__PURE__ */
|
|
745
|
+
children: /* @__PURE__ */ n(
|
|
736
746
|
"path",
|
|
737
747
|
{
|
|
738
748
|
d: "M12 6L6 12M6.00001 6L12 12",
|
package/dist/dropdown.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(w,
|
|
1
|
+
(function(w,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],r):(w=typeof globalThis<"u"?globalThis:w||self,r(w.Dropdown={},w.jsxRuntime,w.React))})(this,function(w,r,o){"use strict";const q=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
|
|
2
2
|
* {
|
|
3
3
|
margin: 0;
|
|
4
4
|
padding: 0;
|
|
@@ -8,67 +8,77 @@
|
|
|
8
8
|
:root {
|
|
9
9
|
/* color */
|
|
10
10
|
/* brand */
|
|
11
|
-
--starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
12
|
-
--starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
13
|
-
--starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
14
|
-
--starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
15
|
-
--starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
11
|
+
--starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
12
|
+
--starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
13
|
+
--starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
|
|
14
|
+
--starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
15
|
+
--starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
16
16
|
/* gray */
|
|
17
17
|
--starasia-ui-dropdown-color-primary-gray: var(
|
|
18
18
|
--starasia-ui-color-gray-700,
|
|
19
|
-
|
|
19
|
+
rgba(55, 65, 81, 1)
|
|
20
20
|
);
|
|
21
21
|
--starasia-ui-dropdown-color-secondary-gray: var(
|
|
22
22
|
--starasia-ui-color-gray-500,
|
|
23
|
-
|
|
23
|
+
rgba(107, 114, 128, 1)
|
|
24
24
|
);
|
|
25
25
|
--starasia-ui-dropdown-color-tertiary-gray: var(
|
|
26
26
|
--starasia-ui-color-gray-300,
|
|
27
|
-
|
|
27
|
+
rgba(209, 213, 219, 1)
|
|
28
28
|
);
|
|
29
29
|
--starasia-ui-dropdown-color-quaternary-gray: var(
|
|
30
30
|
--starasia-ui-color-gray-100,
|
|
31
|
-
|
|
31
|
+
rgba(243, 244, 246, 1)
|
|
32
32
|
);
|
|
33
33
|
--starasia-ui-dropdown-color-quinary-gray: var(
|
|
34
34
|
--starasia-ui-color-gray-50,
|
|
35
|
-
|
|
35
|
+
rgba(249, 250, 251, 1)
|
|
36
36
|
);
|
|
37
37
|
/* bg color */
|
|
38
38
|
--starasia-ui-dropdown-background-color-primary: var(
|
|
39
39
|
--starasia-ui-dropdown-color-secondary-blue,
|
|
40
|
-
|
|
40
|
+
rgba(59, 130, 246, 1)
|
|
41
41
|
);
|
|
42
42
|
--starasia-ui-dropdown-background-color-secondary: var(
|
|
43
43
|
--starasia-ui-dropdown-color-quinary-blue,
|
|
44
|
-
|
|
44
|
+
rgba(239, 246, 255, 1)
|
|
45
45
|
);
|
|
46
46
|
|
|
47
47
|
/* disalble color */
|
|
48
48
|
--starasia-ui-dropdown-color-disable: var(
|
|
49
49
|
--starasia-ui-dropdown-color-tertiary-gray,
|
|
50
|
-
|
|
50
|
+
rgba(209, 213, 219, 1)
|
|
51
51
|
);
|
|
52
52
|
|
|
53
53
|
/* border color */
|
|
54
|
-
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default);
|
|
54
|
+
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
55
55
|
--starasia-ui-dropdown-border-color-secondary: var(
|
|
56
56
|
--starasia-ui-color-gray-300,
|
|
57
|
-
|
|
57
|
+
rgba(209, 213, 219, 1)
|
|
58
58
|
);
|
|
59
59
|
--starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
|
|
60
60
|
|
|
61
61
|
--starasia-ui-dropdown-color-secondary-red: var(
|
|
62
62
|
--starasia-ui-color-red-500,
|
|
63
|
-
|
|
63
|
+
rgba(239, 68, 68, 1)
|
|
64
64
|
);
|
|
65
65
|
|
|
66
66
|
/* plachoder color */
|
|
67
67
|
--starasia-ui-dropdown-placholder-color: var(
|
|
68
68
|
--starasia-ui-color-gray-200,
|
|
69
|
-
|
|
69
|
+
rgba(201, 206, 204, 1)
|
|
70
70
|
);
|
|
71
71
|
|
|
72
|
+
/* white */
|
|
73
|
+
--starasia-ui-dropdown-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
|
|
74
|
+
/* disabled bg */
|
|
75
|
+
--starasia-ui-dropdown-color-disabled-bg: rgba(242, 243, 242, 1);
|
|
76
|
+
/* text colors */
|
|
77
|
+
--starasia-ui-dropdown-color-text-primary: rgba(24, 26, 25, 1);
|
|
78
|
+
--starasia-ui-dropdown-color-text-secondary: rgba(120, 134, 127, 1);
|
|
79
|
+
/* shadow */
|
|
80
|
+
--starasia-ui-dropdown-box-shadow-list: rgba(0, 0, 0, 0.08);
|
|
81
|
+
|
|
72
82
|
/* border width */
|
|
73
83
|
--starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
|
|
74
84
|
|
|
@@ -77,7 +87,7 @@
|
|
|
77
87
|
--starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
|
|
78
88
|
|
|
79
89
|
/* shadow */
|
|
80
|
-
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.2);
|
|
90
|
+
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.2);
|
|
81
91
|
|
|
82
92
|
/* below is for size,above is */
|
|
83
93
|
--starasia-ui-dropdown-fontWeight-normal: var(
|
|
@@ -128,14 +138,14 @@
|
|
|
128
138
|
display: flex;
|
|
129
139
|
align-items: center;
|
|
130
140
|
border: var(--starasia-ui-dropdown-border-width) solid
|
|
131
|
-
|
|
141
|
+
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
132
142
|
border-radius: var(--borderRadius);
|
|
133
|
-
background-color: white;
|
|
143
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
134
144
|
font-size: var(--baseFont);
|
|
135
145
|
cursor: pointer;
|
|
136
146
|
}
|
|
137
147
|
.starasia-input-dropdown-container.disable {
|
|
138
|
-
background-color:
|
|
148
|
+
background-color: var(--starasia-ui-dropdown-color-disabled-bg);
|
|
139
149
|
cursor: not-allowed;
|
|
140
150
|
pointer-events: none;
|
|
141
151
|
}
|
|
@@ -146,7 +156,7 @@
|
|
|
146
156
|
.starasia-input-dropdown-container.active {
|
|
147
157
|
border-color: var(--starasia-ui-dropdown-border-color-primary);
|
|
148
158
|
box-shadow: var(--starasia-ui-dropdown-box-shadow);
|
|
149
|
-
background-color: white;
|
|
159
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
150
160
|
}
|
|
151
161
|
|
|
152
162
|
.starasia-input-dropdown-preview-container {
|
|
@@ -167,8 +177,8 @@
|
|
|
167
177
|
border: var(--starasia-ui-dropdown-border-width) solid
|
|
168
178
|
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
169
179
|
border-radius: var(--borderRadius);
|
|
170
|
-
background-color:
|
|
171
|
-
box-shadow: 0px 8px 12px 0px
|
|
180
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
181
|
+
box-shadow: 0px 8px 12px 0px var(--starasia-ui-dropdown-box-shadow-list);
|
|
172
182
|
max-height: 312px;
|
|
173
183
|
overflow-y: auto;
|
|
174
184
|
z-index: 999;
|
|
@@ -203,7 +213,7 @@
|
|
|
203
213
|
border-radius: var(--borderRadius);
|
|
204
214
|
gap: var(--starasia-ui-dropdown-spacing-sm);
|
|
205
215
|
padding-inline: var(--paddingInline);
|
|
206
|
-
background: white;
|
|
216
|
+
background: var(--starasia-ui-dropdown-color-white);
|
|
207
217
|
& input {
|
|
208
218
|
flex: 1;
|
|
209
219
|
outline: none;
|
|
@@ -245,12 +255,12 @@
|
|
|
245
255
|
}
|
|
246
256
|
|
|
247
257
|
.starasia-input-dropdwon-item:hover {
|
|
248
|
-
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
|
|
258
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
|
|
249
259
|
}
|
|
250
260
|
.starasia-input-dropdwon-item.active {
|
|
251
261
|
/* color: var(--starasia-ui-dropdown-background-color-primary); */
|
|
252
262
|
/* border-radius: var(--borderRadius); */
|
|
253
|
-
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
|
|
263
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
|
|
254
264
|
/* background: var(--starasia-ui-dropdown-background-color-secondary); */
|
|
255
265
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
256
266
|
}
|
|
@@ -289,30 +299,30 @@
|
|
|
289
299
|
}
|
|
290
300
|
|
|
291
301
|
.starasia-input-dropdwon-item-text {
|
|
292
|
-
color:
|
|
302
|
+
color: var(--starasia-ui-dropdown-color-text-primary);
|
|
293
303
|
/* font-size: 14px; */
|
|
294
304
|
font-size: inherit;
|
|
295
305
|
font-weight: 500;
|
|
296
306
|
}
|
|
297
307
|
.starasia-input-dropdwon-item-text.active {
|
|
298
|
-
color: var(--starasia-ui-brand-primary-default);
|
|
308
|
+
color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
299
309
|
}
|
|
300
310
|
|
|
301
311
|
.starasia-input-dropdwon-item-text-description {
|
|
302
|
-
color:
|
|
312
|
+
color: var(--starasia-ui-dropdown-color-text-secondary);
|
|
303
313
|
/* font-size: 14px; */
|
|
304
314
|
font-size: inherit;
|
|
305
315
|
font-weight: 400;
|
|
306
316
|
}
|
|
307
317
|
.starasia-input-dropdwon-item-text-description.active {
|
|
308
|
-
color: var(--starasia-ui-brand-primary-default);
|
|
318
|
+
color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
309
319
|
}
|
|
310
320
|
|
|
311
321
|
/* for checkbox */
|
|
312
322
|
.checkbox-wrapper-30 .checkbox {
|
|
313
323
|
--bg: #fff;
|
|
314
324
|
--brdr: #d1d6ee;
|
|
315
|
-
--brdr-actv: var(--starasia-ui-brand-primary-default);
|
|
325
|
+
--brdr-actv: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
316
326
|
--brdr-hovr: #bbc1e1;
|
|
317
327
|
--dur: calc((var(--size, 2) / 2) * 0.6s);
|
|
318
328
|
display: inline-block;
|
|
@@ -384,4 +394,4 @@
|
|
|
384
394
|
height: 100%;
|
|
385
395
|
width: 100%;
|
|
386
396
|
}
|
|
387
|
-
`;function A(a){const[e,t]=o.useState(a),p=o.useRef(null),i=s=>{p.current&&!p.current.contains(s.target)&&t(!1)};return o.useEffect(()=>(document.addEventListener("click",i,!0),()=>{document.removeEventListener("click",i,!0)}),[]),{ref:p,isComponentVisible:e,setIsComponentVisible:t}}const D=({...a})=>
|
|
397
|
+
`;function A(a){const[e,t]=o.useState(a),p=o.useRef(null),i=s=>{p.current&&!p.current.contains(s.target)&&t(!1)};return o.useEffect(()=>(document.addEventListener("click",i,!0),()=>{document.removeEventListener("click",i,!0)}),[]),{ref:p,isComponentVisible:e,setIsComponentVisible:t}}const D=({...a})=>r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 24 24",fill:"none",color:"#939E99",children:r.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),F=({...a})=>r.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 20 20",fill:"none",children:[r.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),O=({isChecked:a})=>r.jsxs("div",{className:"checkbox-wrapper-30",children:[r.jsxs("span",{className:"checkbox",children:[r.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:a}),r.jsx("svg",{children:r.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:r.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:r.jsx("path",{fill:"none",stroke:"currentColor",d:"M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"})})})]}),H=o.forwardRef(({positionDropdown:a,dropdownLists:e,isComponentVisible:t,searchAble:p,onSearch:i,value:s,handleChangeValue:g,multiSelect:l,searchValue:v},E)=>{const[m,z]=o.useState(0),[N,k]=o.useState(),h=o.useRef(null);return o.useEffect(()=>{if(h.current){const n=h.current.getBoundingClientRect();z(n.width)}},[h,t]),o.useEffect(()=>{e&&v?e.forEach(n=>{if(n.label.startsWith(v||"")){k(n.value);return}}):k(void 0)},[v,e]),r.jsx(r.Fragment,{children:t?r.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:n=>n.stopPropagation(),ref:E,children:[p?r.jsxs("div",{className:"starasia-input-dropdown-container-dropdown-search",style:{order:a=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[r.jsx("div",{style:{display:"flex"},children:r.jsx(F,{strokeWidth:2,width:20})}),r.jsx("input",{onChange:n=>{i&&i(n.target.value)},value:v,autoFocus:!0,style:{width:"100%"}})]}):null,r.jsx("div",{className:`starasia-input-dropdwon-item-container ${l?"multi":""}`,ref:h,children:e.map((n,x)=>{const f=!!(s!=null&&s.find(C=>C.value===n.value));return r.jsxs("div",{className:`starasia-input-dropdwon-item ${f?"active":" "} ${n.disable?"starasia-input-dropdwon-item-disable":null}`,onClick:()=>g(n.label,n.value),children:[l?r.jsx("div",{style:{marginRight:"8px"},children:r.jsx(O,{isChecked:f})}):null,n.icon?r.jsx("div",{children:o.cloneElement(n.icon,{width:16})}):null,r.jsxs("div",{children:[r.jsx("p",{className:`starasia-input-dropdwon-item-text ${f?"active":null} ${n.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${m-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:n.label}),n.description?r.jsx("p",{className:`starasia-input-dropdwon-item-text-description ${f?"active":null} ${n.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${m-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:n.description}):null]})]},x)})})]}):null})}),M=({children:a,handleChangePosition:e})=>{const t=o.useRef(null);o.useEffect(()=>{var g;const i=()=>{if(t.current){let l=t.current.parentElement;for(;l&&!p(l);)l=l.parentElement;l&&e()}};let s=(g=t.current)==null?void 0:g.parentElement;for(;s&&!p(s);)s=s.parentElement;return s&&s.addEventListener("scroll",i),i(),()=>{s&&s.removeEventListener("scroll",i)}},[]);const p=i=>i&&(i.scrollHeight>i.clientHeight||i.scrollWidth>i.clientWidth);return r.jsx("div",{ref:t,children:a})},W="starasia-input-dropdown-styles";(a=>{if(!document.getElementById(W)){const e=document.createElement("style");e.id=W,e.textContent=a,document.head.appendChild(e)}})(q);const P=({dropdownLists:a,onChange:e,defaultValue:t,size:p="md",multiSelect:i,searchAble:s,iconLeft:g,placeholder:l,onSearch:v,error:E,onBlur:m,onFocus:z,disable:N,searchValue:k})=>{const h=o.useRef(),[n,x]=o.useState([]),[f,C]=o.useState(""),b=o.useRef(null),{isComponentVisible:I,ref:B,setIsComponentVisible:S}=A(!1),V=()=>{S(d=>!d)},j=(d,c)=>{if(!i)x([{label:d,value:c}]),e([{label:d,value:c}]),S(!1);else if(n==null?void 0:n.find(u=>u.value===c)){const u=[...n?n.filter(G=>G.value!==c):[]];x(u),e(u)}else{const u=[...n||[],{label:d,value:c}];x(u),e(u)}};o.useEffect(()=>{JSON.stringify(h.current)===JSON.stringify(t)||(h.current=t,x(h.current||[]))},[t]);const J=()=>n.length?i?n==null?void 0:n.map((d,c)=>r.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[r.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label},c),r.jsx(T,{onClick:()=>j(d.label,d.value)})]})):r.jsx("p",{style:{minWidth:"max-content"},children:n==null?void 0:n[0].label}):r.jsx("p",{className:"starasia-input-dropdown-placeholder",children:l}),y=()=>{if(B.current&&b.current){const d=window.innerHeight,c=B.current.getBoundingClientRect(),L=b.current.getBoundingClientRect(),u=c.bottom+L.height;b.current.style.left=`${c.left}px`,b.current.style.width=`${c.width}px`,u>=d-10?(b.current.style.top=`${c.top-L.height-5}px`,C("top")):(b.current.style.top=`${c.top+c.height}px`,C("bottom"))}};return o.useEffect(()=>(window.addEventListener("scroll",y),window.addEventListener("resize",y),()=>{window.removeEventListener("scroll",y),window.removeEventListener("resize",y)}),[]),o.useEffect(()=>{y()},[I]),r.jsx(M,{handleChangePosition:y,children:r.jsxs("div",{className:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${p} ${I?"active":""} ${E?"error":""}`,ref:B,onClick:V,children:[r.jsxs("div",{className:"starasia-input-dropdown-preview-container",children:[g?r.jsx(r.Fragment,{children:o.cloneElement(g,{width:$(p),color:"#939E99",style:{color:"#939E99"}})}):null,r.jsx("div",{className:"starasia-input-dropdown-container-preview-item",tabIndex:100,onBlur:m,onFocus:z,children:J()}),r.jsx(D,{strokeWidth:2,width:$(p),style:{color:"#939E99"}})]}),r.jsx(H,{dropdownLists:a,handleChangeValue:j,isComponentVisible:I,positionDropdown:f,searchAble:!!s,value:n,onSearch:v,ref:b,multiSelect:i,searchValue:k})]})})},$=a=>{if(a==="sm")return 16;if(a==="md")return 16;if(a==="lg")return 20},T=a=>r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...a,children:r.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});w.Dropdown=P,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
|