@starasia/dropdown 1.0.4 → 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 +105 -113
- package/dist/dropdown.umd.js +45 -53
- package/package.json +6 -6
package/dist/dropdown.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import F, { useState as
|
|
1
|
+
import { jsx as n, jsxs as p, Fragment as q } from "react/jsx-runtime";
|
|
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
|
* {
|
|
5
5
|
margin: 0;
|
|
@@ -9,86 +9,78 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
9
9
|
}
|
|
10
10
|
:root {
|
|
11
11
|
/* color */
|
|
12
|
-
/*
|
|
13
|
-
--starasia-ui-dropdown-color-primary-blue: var(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
);
|
|
17
|
-
--starasia-ui-dropdown-color-
|
|
18
|
-
--starasia-ui-color-blue-500,
|
|
19
|
-
#3b82f6
|
|
20
|
-
);
|
|
21
|
-
--starasia-ui-dropdown-color-tertiary-blue: var(
|
|
22
|
-
--starasia-ui-color-blue-300,
|
|
23
|
-
#93c5fd
|
|
24
|
-
);
|
|
25
|
-
--starasia-ui-dropdown-color-quaternary-blue: var(
|
|
26
|
-
--starasia-ui-color-blue-100,
|
|
27
|
-
#dbeafe
|
|
28
|
-
);
|
|
29
|
-
--starasia-ui-dropdown-color-quinary-blue: var(
|
|
30
|
-
--starasia-ui-color-blue-50,
|
|
31
|
-
#eff6ff
|
|
32
|
-
);
|
|
12
|
+
/* brand */
|
|
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));
|
|
33
18
|
/* gray */
|
|
34
19
|
--starasia-ui-dropdown-color-primary-gray: var(
|
|
35
20
|
--starasia-ui-color-gray-700,
|
|
36
|
-
|
|
21
|
+
rgba(55, 65, 81, 1)
|
|
37
22
|
);
|
|
38
23
|
--starasia-ui-dropdown-color-secondary-gray: var(
|
|
39
24
|
--starasia-ui-color-gray-500,
|
|
40
|
-
|
|
25
|
+
rgba(107, 114, 128, 1)
|
|
41
26
|
);
|
|
42
27
|
--starasia-ui-dropdown-color-tertiary-gray: var(
|
|
43
28
|
--starasia-ui-color-gray-300,
|
|
44
|
-
|
|
29
|
+
rgba(209, 213, 219, 1)
|
|
45
30
|
);
|
|
46
31
|
--starasia-ui-dropdown-color-quaternary-gray: var(
|
|
47
32
|
--starasia-ui-color-gray-100,
|
|
48
|
-
|
|
33
|
+
rgba(243, 244, 246, 1)
|
|
49
34
|
);
|
|
50
35
|
--starasia-ui-dropdown-color-quinary-gray: var(
|
|
51
36
|
--starasia-ui-color-gray-50,
|
|
52
|
-
|
|
37
|
+
rgba(249, 250, 251, 1)
|
|
53
38
|
);
|
|
54
39
|
/* bg color */
|
|
55
40
|
--starasia-ui-dropdown-background-color-primary: var(
|
|
56
41
|
--starasia-ui-dropdown-color-secondary-blue,
|
|
57
|
-
|
|
42
|
+
rgba(59, 130, 246, 1)
|
|
58
43
|
);
|
|
59
44
|
--starasia-ui-dropdown-background-color-secondary: var(
|
|
60
45
|
--starasia-ui-dropdown-color-quinary-blue,
|
|
61
|
-
|
|
46
|
+
rgba(239, 246, 255, 1)
|
|
62
47
|
);
|
|
63
48
|
|
|
64
49
|
/* disalble color */
|
|
65
50
|
--starasia-ui-dropdown-color-disable: var(
|
|
66
51
|
--starasia-ui-dropdown-color-tertiary-gray,
|
|
67
|
-
|
|
52
|
+
rgba(209, 213, 219, 1)
|
|
68
53
|
);
|
|
69
54
|
|
|
70
55
|
/* border color */
|
|
71
|
-
--starasia-ui-dropdown-border-color-primary: var(
|
|
72
|
-
--starasia-ui-color-blue-500,
|
|
73
|
-
#3b82f6
|
|
74
|
-
);
|
|
56
|
+
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
75
57
|
--starasia-ui-dropdown-border-color-secondary: var(
|
|
76
58
|
--starasia-ui-color-gray-300,
|
|
77
|
-
|
|
59
|
+
rgba(209, 213, 219, 1)
|
|
78
60
|
);
|
|
79
61
|
--starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
|
|
80
62
|
|
|
81
63
|
--starasia-ui-dropdown-color-secondary-red: var(
|
|
82
64
|
--starasia-ui-color-red-500,
|
|
83
|
-
|
|
65
|
+
rgba(239, 68, 68, 1)
|
|
84
66
|
);
|
|
85
67
|
|
|
86
68
|
/* plachoder color */
|
|
87
69
|
--starasia-ui-dropdown-placholder-color: var(
|
|
88
70
|
--starasia-ui-color-gray-200,
|
|
89
|
-
|
|
71
|
+
rgba(201, 206, 204, 1)
|
|
90
72
|
);
|
|
91
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
|
+
|
|
92
84
|
/* border width */
|
|
93
85
|
--starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
|
|
94
86
|
|
|
@@ -97,7 +89,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
97
89
|
--starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
|
|
98
90
|
|
|
99
91
|
/* shadow */
|
|
100
|
-
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(
|
|
92
|
+
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.2);
|
|
101
93
|
|
|
102
94
|
/* below is for size,above is */
|
|
103
95
|
--starasia-ui-dropdown-fontWeight-normal: var(
|
|
@@ -148,14 +140,14 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
148
140
|
display: flex;
|
|
149
141
|
align-items: center;
|
|
150
142
|
border: var(--starasia-ui-dropdown-border-width) solid
|
|
151
|
-
|
|
143
|
+
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
152
144
|
border-radius: var(--borderRadius);
|
|
153
|
-
background-color: white;
|
|
145
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
154
146
|
font-size: var(--baseFont);
|
|
155
147
|
cursor: pointer;
|
|
156
148
|
}
|
|
157
149
|
.starasia-input-dropdown-container.disable {
|
|
158
|
-
background-color:
|
|
150
|
+
background-color: var(--starasia-ui-dropdown-color-disabled-bg);
|
|
159
151
|
cursor: not-allowed;
|
|
160
152
|
pointer-events: none;
|
|
161
153
|
}
|
|
@@ -166,7 +158,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
166
158
|
.starasia-input-dropdown-container.active {
|
|
167
159
|
border-color: var(--starasia-ui-dropdown-border-color-primary);
|
|
168
160
|
box-shadow: var(--starasia-ui-dropdown-box-shadow);
|
|
169
|
-
background-color: white;
|
|
161
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
170
162
|
}
|
|
171
163
|
|
|
172
164
|
.starasia-input-dropdown-preview-container {
|
|
@@ -187,8 +179,8 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
187
179
|
border: var(--starasia-ui-dropdown-border-width) solid
|
|
188
180
|
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
189
181
|
border-radius: var(--borderRadius);
|
|
190
|
-
background-color:
|
|
191
|
-
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);
|
|
192
184
|
max-height: 312px;
|
|
193
185
|
overflow-y: auto;
|
|
194
186
|
z-index: 999;
|
|
@@ -223,7 +215,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
223
215
|
border-radius: var(--borderRadius);
|
|
224
216
|
gap: var(--starasia-ui-dropdown-spacing-sm);
|
|
225
217
|
padding-inline: var(--paddingInline);
|
|
226
|
-
background: white;
|
|
218
|
+
background: var(--starasia-ui-dropdown-color-white);
|
|
227
219
|
& input {
|
|
228
220
|
flex: 1;
|
|
229
221
|
outline: none;
|
|
@@ -265,12 +257,12 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
265
257
|
}
|
|
266
258
|
|
|
267
259
|
.starasia-input-dropdwon-item:hover {
|
|
268
|
-
background-color: rgba(
|
|
260
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
|
|
269
261
|
}
|
|
270
262
|
.starasia-input-dropdwon-item.active {
|
|
271
263
|
/* color: var(--starasia-ui-dropdown-background-color-primary); */
|
|
272
264
|
/* border-radius: var(--borderRadius); */
|
|
273
|
-
background-color: rgba(
|
|
265
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
|
|
274
266
|
/* background: var(--starasia-ui-dropdown-background-color-secondary); */
|
|
275
267
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
276
268
|
}
|
|
@@ -309,30 +301,30 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
309
301
|
}
|
|
310
302
|
|
|
311
303
|
.starasia-input-dropdwon-item-text {
|
|
312
|
-
color:
|
|
304
|
+
color: var(--starasia-ui-dropdown-color-text-primary);
|
|
313
305
|
/* font-size: 14px; */
|
|
314
306
|
font-size: inherit;
|
|
315
307
|
font-weight: 500;
|
|
316
308
|
}
|
|
317
309
|
.starasia-input-dropdwon-item-text.active {
|
|
318
|
-
color:
|
|
310
|
+
color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
319
311
|
}
|
|
320
312
|
|
|
321
313
|
.starasia-input-dropdwon-item-text-description {
|
|
322
|
-
color:
|
|
314
|
+
color: var(--starasia-ui-dropdown-color-text-secondary);
|
|
323
315
|
/* font-size: 14px; */
|
|
324
316
|
font-size: inherit;
|
|
325
317
|
font-weight: 400;
|
|
326
318
|
}
|
|
327
319
|
.starasia-input-dropdwon-item-text-description.active {
|
|
328
|
-
color:
|
|
320
|
+
color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
329
321
|
}
|
|
330
322
|
|
|
331
323
|
/* for checkbox */
|
|
332
324
|
.checkbox-wrapper-30 .checkbox {
|
|
333
325
|
--bg: #fff;
|
|
334
326
|
--brdr: #d1d6ee;
|
|
335
|
-
--brdr-actv:
|
|
327
|
+
--brdr-actv: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
336
328
|
--brdr-hovr: #bbc1e1;
|
|
337
329
|
--dur: calc((var(--size, 2) / 2) * 0.6s);
|
|
338
330
|
display: inline-block;
|
|
@@ -406,14 +398,14 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
406
398
|
}
|
|
407
399
|
`;
|
|
408
400
|
function V(a) {
|
|
409
|
-
const [i, t] =
|
|
401
|
+
const [i, t] = y(a), c = k(null), o = (e) => {
|
|
410
402
|
c.current && !c.current.contains(e.target) && t(!1);
|
|
411
403
|
};
|
|
412
404
|
return b(() => (document.addEventListener("click", o, !0), () => {
|
|
413
405
|
document.removeEventListener("click", o, !0);
|
|
414
406
|
}), []), { ref: c, isComponentVisible: i, setIsComponentVisible: t };
|
|
415
407
|
}
|
|
416
|
-
const J = ({ ...a }) => /* @__PURE__ */
|
|
408
|
+
const J = ({ ...a }) => /* @__PURE__ */ n(
|
|
417
409
|
"svg",
|
|
418
410
|
{
|
|
419
411
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -421,7 +413,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
421
413
|
viewBox: "0 0 24 24",
|
|
422
414
|
fill: "none",
|
|
423
415
|
color: "#939E99",
|
|
424
|
-
children: /* @__PURE__ */
|
|
416
|
+
children: /* @__PURE__ */ n(
|
|
425
417
|
"path",
|
|
426
418
|
{
|
|
427
419
|
d: "M4 9L12 17L20 9",
|
|
@@ -440,7 +432,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
440
432
|
viewBox: "0 0 20 20",
|
|
441
433
|
fill: "none",
|
|
442
434
|
children: [
|
|
443
|
-
/* @__PURE__ */
|
|
435
|
+
/* @__PURE__ */ n(
|
|
444
436
|
"circle",
|
|
445
437
|
{
|
|
446
438
|
cx: "9.80547",
|
|
@@ -452,7 +444,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
452
444
|
strokeLinejoin: "round"
|
|
453
445
|
}
|
|
454
446
|
),
|
|
455
|
-
/* @__PURE__ */
|
|
447
|
+
/* @__PURE__ */ n(
|
|
456
448
|
"path",
|
|
457
449
|
{
|
|
458
450
|
d: "M15.0153 15.4043L17.9519 18.3333",
|
|
@@ -466,7 +458,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
466
458
|
}
|
|
467
459
|
), K = ({ isChecked: a }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
|
|
468
460
|
/* @__PURE__ */ p("span", { className: "checkbox", children: [
|
|
469
|
-
/* @__PURE__ */
|
|
461
|
+
/* @__PURE__ */ n(
|
|
470
462
|
"input",
|
|
471
463
|
{
|
|
472
464
|
type: "checkbox",
|
|
@@ -474,9 +466,9 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
474
466
|
checked: a
|
|
475
467
|
}
|
|
476
468
|
),
|
|
477
|
-
/* @__PURE__ */
|
|
469
|
+
/* @__PURE__ */ n("svg", { children: /* @__PURE__ */ n("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
|
|
478
470
|
] }),
|
|
479
|
-
/* @__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(
|
|
480
472
|
"path",
|
|
481
473
|
{
|
|
482
474
|
fill: "none",
|
|
@@ -496,24 +488,24 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
496
488
|
multiSelect: l,
|
|
497
489
|
searchValue: v
|
|
498
490
|
}, I) => {
|
|
499
|
-
const [C, R] =
|
|
491
|
+
const [C, R] = y(0), [$, z] = y(), w = k(null);
|
|
500
492
|
return b(() => {
|
|
501
493
|
if (w.current) {
|
|
502
|
-
const
|
|
503
|
-
R(
|
|
494
|
+
const r = w.current.getBoundingClientRect();
|
|
495
|
+
R(r.width);
|
|
504
496
|
}
|
|
505
497
|
}, [w, t]), b(() => {
|
|
506
|
-
i && v ? i.forEach((
|
|
507
|
-
if (
|
|
508
|
-
z(
|
|
498
|
+
i && v ? i.forEach((r) => {
|
|
499
|
+
if (r.label.startsWith(v || "")) {
|
|
500
|
+
z(r.value);
|
|
509
501
|
return;
|
|
510
502
|
}
|
|
511
503
|
}) : z(void 0);
|
|
512
|
-
}, [v, i]), /* @__PURE__ */
|
|
504
|
+
}, [v, i]), /* @__PURE__ */ n(q, { children: t ? /* @__PURE__ */ p(
|
|
513
505
|
"div",
|
|
514
506
|
{
|
|
515
507
|
className: "starasia-input-dropdown-lists-container",
|
|
516
|
-
onClick: (
|
|
508
|
+
onClick: (r) => r.stopPropagation(),
|
|
517
509
|
ref: I,
|
|
518
510
|
children: [
|
|
519
511
|
c ? /* @__PURE__ */ p(
|
|
@@ -528,12 +520,12 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
528
520
|
zIndex: 1
|
|
529
521
|
},
|
|
530
522
|
children: [
|
|
531
|
-
/* @__PURE__ */
|
|
532
|
-
/* @__PURE__ */
|
|
523
|
+
/* @__PURE__ */ n("div", { style: { display: "flex" }, children: /* @__PURE__ */ n(G, { strokeWidth: 2, width: 20 }) }),
|
|
524
|
+
/* @__PURE__ */ n(
|
|
533
525
|
"input",
|
|
534
526
|
{
|
|
535
|
-
onChange: (
|
|
536
|
-
o && o(
|
|
527
|
+
onChange: (r) => {
|
|
528
|
+
o && o(r.target.value);
|
|
537
529
|
},
|
|
538
530
|
value: v,
|
|
539
531
|
autoFocus: !0,
|
|
@@ -543,54 +535,54 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
543
535
|
]
|
|
544
536
|
}
|
|
545
537
|
) : null,
|
|
546
|
-
/* @__PURE__ */
|
|
538
|
+
/* @__PURE__ */ n(
|
|
547
539
|
"div",
|
|
548
540
|
{
|
|
549
541
|
className: `starasia-input-dropdwon-item-container ${l ? "multi" : ""}`,
|
|
550
542
|
ref: w,
|
|
551
|
-
children: i.map((
|
|
552
|
-
const
|
|
543
|
+
children: i.map((r, x) => {
|
|
544
|
+
const m = !!(e != null && e.find((E) => E.value === r.value));
|
|
553
545
|
return /* @__PURE__ */ p(
|
|
554
546
|
"div",
|
|
555
547
|
{
|
|
556
|
-
className: `starasia-input-dropdwon-item ${
|
|
557
|
-
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),
|
|
558
550
|
children: [
|
|
559
|
-
l ? /* @__PURE__ */
|
|
560
|
-
|
|
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, {
|
|
561
553
|
width: 16
|
|
562
554
|
}) }) : null,
|
|
563
555
|
/* @__PURE__ */ p("div", { children: [
|
|
564
|
-
/* @__PURE__ */
|
|
556
|
+
/* @__PURE__ */ n(
|
|
565
557
|
"p",
|
|
566
558
|
{
|
|
567
|
-
className: `starasia-input-dropdwon-item-text ${
|
|
559
|
+
className: `starasia-input-dropdwon-item-text ${m ? "active" : null} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
|
|
568
560
|
style: {
|
|
569
561
|
textWrap: "nowrap",
|
|
570
562
|
width: `${C - 12}px`,
|
|
571
563
|
overflow: "hidden",
|
|
572
564
|
textOverflow: "ellipsis"
|
|
573
565
|
},
|
|
574
|
-
children:
|
|
566
|
+
children: r.label
|
|
575
567
|
}
|
|
576
568
|
),
|
|
577
|
-
|
|
569
|
+
r.description ? /* @__PURE__ */ n(
|
|
578
570
|
"p",
|
|
579
571
|
{
|
|
580
|
-
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}`,
|
|
581
573
|
style: {
|
|
582
574
|
textWrap: "nowrap",
|
|
583
575
|
width: `${C - 12}px`,
|
|
584
576
|
overflow: "hidden",
|
|
585
577
|
textOverflow: "ellipsis"
|
|
586
578
|
},
|
|
587
|
-
children:
|
|
579
|
+
children: r.description
|
|
588
580
|
}
|
|
589
581
|
) : null
|
|
590
582
|
] })
|
|
591
583
|
]
|
|
592
584
|
},
|
|
593
|
-
|
|
585
|
+
x
|
|
594
586
|
);
|
|
595
587
|
})
|
|
596
588
|
}
|
|
@@ -603,7 +595,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
603
595
|
children: a,
|
|
604
596
|
handleChangePosition: i
|
|
605
597
|
}) => {
|
|
606
|
-
const t =
|
|
598
|
+
const t = k(null);
|
|
607
599
|
b(() => {
|
|
608
600
|
var h;
|
|
609
601
|
const o = () => {
|
|
@@ -622,7 +614,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
|
|
|
622
614
|
};
|
|
623
615
|
}, []);
|
|
624
616
|
const c = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
|
|
625
|
-
return /* @__PURE__ */
|
|
617
|
+
return /* @__PURE__ */ n("div", { ref: t, children: a });
|
|
626
618
|
}, A = "starasia-input-dropdown-styles", U = (a) => {
|
|
627
619
|
if (!document.getElementById(A)) {
|
|
628
620
|
const i = document.createElement("style");
|
|
@@ -646,43 +638,43 @@ const _ = ({
|
|
|
646
638
|
disable: $,
|
|
647
639
|
searchValue: z
|
|
648
640
|
}) => {
|
|
649
|
-
const w =
|
|
641
|
+
const w = k(), [r, x] = y([]), [m, E] = y(""), g = k(null), { isComponentVisible: B, ref: L, setIsComponentVisible: N } = V(!1), H = () => {
|
|
650
642
|
N((s) => !s);
|
|
651
643
|
}, j = (s, d) => {
|
|
652
644
|
if (!o)
|
|
653
|
-
|
|
654
|
-
else if (
|
|
645
|
+
x([{ label: s, value: d }]), i([{ label: s, value: d }]), N(!1);
|
|
646
|
+
else if (r == null ? void 0 : r.find((u) => u.value === d)) {
|
|
655
647
|
const u = [
|
|
656
|
-
...
|
|
648
|
+
...r ? r.filter((D) => D.value !== d) : []
|
|
657
649
|
];
|
|
658
|
-
|
|
650
|
+
x(u), i(u);
|
|
659
651
|
} else {
|
|
660
|
-
const u = [...
|
|
661
|
-
|
|
652
|
+
const u = [...r || [], { label: s, value: d }];
|
|
653
|
+
x(u), i(u);
|
|
662
654
|
}
|
|
663
655
|
};
|
|
664
656
|
b(() => {
|
|
665
|
-
JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t,
|
|
657
|
+
JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t, x(w.current || []));
|
|
666
658
|
}, [t]);
|
|
667
|
-
const O = () =>
|
|
668
|
-
/* @__PURE__ */
|
|
669
|
-
/* @__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(
|
|
670
662
|
X,
|
|
671
663
|
{
|
|
672
664
|
onClick: () => j(s.label, s.value)
|
|
673
665
|
}
|
|
674
666
|
)
|
|
675
|
-
] })) : /* @__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 = () => {
|
|
676
668
|
if (L.current && g.current) {
|
|
677
669
|
const s = window.innerHeight, d = L.current.getBoundingClientRect(), W = g.current.getBoundingClientRect(), u = d.bottom + W.height;
|
|
678
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"));
|
|
679
671
|
}
|
|
680
672
|
};
|
|
681
|
-
return b(() => (window.addEventListener("scroll",
|
|
682
|
-
window.removeEventListener("scroll",
|
|
673
|
+
return b(() => (window.addEventListener("scroll", f), window.addEventListener("resize", f), () => {
|
|
674
|
+
window.removeEventListener("scroll", f), window.removeEventListener("resize", f);
|
|
683
675
|
}), []), b(() => {
|
|
684
|
-
|
|
685
|
-
}, [B]), /* @__PURE__ */
|
|
676
|
+
f();
|
|
677
|
+
}, [B]), /* @__PURE__ */ n(T, { handleChangePosition: f, children: /* @__PURE__ */ p(
|
|
686
678
|
"div",
|
|
687
679
|
{
|
|
688
680
|
className: `starasia-input-dropdown-container ${$ ? "disable" : ""} starasia-input-dropdown-size-${c} ${B ? "active" : ""} ${I ? "error" : ""}`,
|
|
@@ -690,14 +682,14 @@ const _ = ({
|
|
|
690
682
|
onClick: H,
|
|
691
683
|
children: [
|
|
692
684
|
/* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
|
|
693
|
-
h ? /* @__PURE__ */
|
|
685
|
+
h ? /* @__PURE__ */ n(q, { children: F.cloneElement(h, {
|
|
694
686
|
width: S(c),
|
|
695
687
|
color: "#939E99",
|
|
696
688
|
style: {
|
|
697
689
|
color: "#939E99"
|
|
698
690
|
}
|
|
699
691
|
}) }) : null,
|
|
700
|
-
/* @__PURE__ */
|
|
692
|
+
/* @__PURE__ */ n(
|
|
701
693
|
"div",
|
|
702
694
|
{
|
|
703
695
|
className: "starasia-input-dropdown-container-preview-item",
|
|
@@ -707,7 +699,7 @@ const _ = ({
|
|
|
707
699
|
children: O()
|
|
708
700
|
}
|
|
709
701
|
),
|
|
710
|
-
/* @__PURE__ */
|
|
702
|
+
/* @__PURE__ */ n(
|
|
711
703
|
J,
|
|
712
704
|
{
|
|
713
705
|
strokeWidth: 2,
|
|
@@ -716,15 +708,15 @@ const _ = ({
|
|
|
716
708
|
}
|
|
717
709
|
)
|
|
718
710
|
] }),
|
|
719
|
-
/* @__PURE__ */
|
|
711
|
+
/* @__PURE__ */ n(
|
|
720
712
|
Q,
|
|
721
713
|
{
|
|
722
714
|
dropdownLists: a,
|
|
723
715
|
handleChangeValue: j,
|
|
724
716
|
isComponentVisible: B,
|
|
725
|
-
positionDropdown:
|
|
717
|
+
positionDropdown: m,
|
|
726
718
|
searchAble: !!e,
|
|
727
|
-
value:
|
|
719
|
+
value: r,
|
|
728
720
|
onSearch: v,
|
|
729
721
|
ref: g,
|
|
730
722
|
multiSelect: o,
|
|
@@ -741,7 +733,7 @@ const _ = ({
|
|
|
741
733
|
return 16;
|
|
742
734
|
if (a === "lg")
|
|
743
735
|
return 20;
|
|
744
|
-
}, X = (a) => /* @__PURE__ */
|
|
736
|
+
}, X = (a) => /* @__PURE__ */ n(
|
|
745
737
|
"svg",
|
|
746
738
|
{
|
|
747
739
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -750,7 +742,7 @@ const _ = ({
|
|
|
750
742
|
viewBox: "0 0 18 18",
|
|
751
743
|
fill: "none",
|
|
752
744
|
...a,
|
|
753
|
-
children: /* @__PURE__ */
|
|
745
|
+
children: /* @__PURE__ */ n(
|
|
754
746
|
"path",
|
|
755
747
|
{
|
|
756
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;
|
|
@@ -7,86 +7,78 @@
|
|
|
7
7
|
}
|
|
8
8
|
:root {
|
|
9
9
|
/* color */
|
|
10
|
-
/*
|
|
11
|
-
--starasia-ui-dropdown-color-primary-blue: var(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
);
|
|
15
|
-
--starasia-ui-dropdown-color-
|
|
16
|
-
--starasia-ui-color-blue-500,
|
|
17
|
-
#3b82f6
|
|
18
|
-
);
|
|
19
|
-
--starasia-ui-dropdown-color-tertiary-blue: var(
|
|
20
|
-
--starasia-ui-color-blue-300,
|
|
21
|
-
#93c5fd
|
|
22
|
-
);
|
|
23
|
-
--starasia-ui-dropdown-color-quaternary-blue: var(
|
|
24
|
-
--starasia-ui-color-blue-100,
|
|
25
|
-
#dbeafe
|
|
26
|
-
);
|
|
27
|
-
--starasia-ui-dropdown-color-quinary-blue: var(
|
|
28
|
-
--starasia-ui-color-blue-50,
|
|
29
|
-
#eff6ff
|
|
30
|
-
);
|
|
10
|
+
/* brand */
|
|
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));
|
|
31
16
|
/* gray */
|
|
32
17
|
--starasia-ui-dropdown-color-primary-gray: var(
|
|
33
18
|
--starasia-ui-color-gray-700,
|
|
34
|
-
|
|
19
|
+
rgba(55, 65, 81, 1)
|
|
35
20
|
);
|
|
36
21
|
--starasia-ui-dropdown-color-secondary-gray: var(
|
|
37
22
|
--starasia-ui-color-gray-500,
|
|
38
|
-
|
|
23
|
+
rgba(107, 114, 128, 1)
|
|
39
24
|
);
|
|
40
25
|
--starasia-ui-dropdown-color-tertiary-gray: var(
|
|
41
26
|
--starasia-ui-color-gray-300,
|
|
42
|
-
|
|
27
|
+
rgba(209, 213, 219, 1)
|
|
43
28
|
);
|
|
44
29
|
--starasia-ui-dropdown-color-quaternary-gray: var(
|
|
45
30
|
--starasia-ui-color-gray-100,
|
|
46
|
-
|
|
31
|
+
rgba(243, 244, 246, 1)
|
|
47
32
|
);
|
|
48
33
|
--starasia-ui-dropdown-color-quinary-gray: var(
|
|
49
34
|
--starasia-ui-color-gray-50,
|
|
50
|
-
|
|
35
|
+
rgba(249, 250, 251, 1)
|
|
51
36
|
);
|
|
52
37
|
/* bg color */
|
|
53
38
|
--starasia-ui-dropdown-background-color-primary: var(
|
|
54
39
|
--starasia-ui-dropdown-color-secondary-blue,
|
|
55
|
-
|
|
40
|
+
rgba(59, 130, 246, 1)
|
|
56
41
|
);
|
|
57
42
|
--starasia-ui-dropdown-background-color-secondary: var(
|
|
58
43
|
--starasia-ui-dropdown-color-quinary-blue,
|
|
59
|
-
|
|
44
|
+
rgba(239, 246, 255, 1)
|
|
60
45
|
);
|
|
61
46
|
|
|
62
47
|
/* disalble color */
|
|
63
48
|
--starasia-ui-dropdown-color-disable: var(
|
|
64
49
|
--starasia-ui-dropdown-color-tertiary-gray,
|
|
65
|
-
|
|
50
|
+
rgba(209, 213, 219, 1)
|
|
66
51
|
);
|
|
67
52
|
|
|
68
53
|
/* border color */
|
|
69
|
-
--starasia-ui-dropdown-border-color-primary: var(
|
|
70
|
-
--starasia-ui-color-blue-500,
|
|
71
|
-
#3b82f6
|
|
72
|
-
);
|
|
54
|
+
--starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
73
55
|
--starasia-ui-dropdown-border-color-secondary: var(
|
|
74
56
|
--starasia-ui-color-gray-300,
|
|
75
|
-
|
|
57
|
+
rgba(209, 213, 219, 1)
|
|
76
58
|
);
|
|
77
59
|
--starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
|
|
78
60
|
|
|
79
61
|
--starasia-ui-dropdown-color-secondary-red: var(
|
|
80
62
|
--starasia-ui-color-red-500,
|
|
81
|
-
|
|
63
|
+
rgba(239, 68, 68, 1)
|
|
82
64
|
);
|
|
83
65
|
|
|
84
66
|
/* plachoder color */
|
|
85
67
|
--starasia-ui-dropdown-placholder-color: var(
|
|
86
68
|
--starasia-ui-color-gray-200,
|
|
87
|
-
|
|
69
|
+
rgba(201, 206, 204, 1)
|
|
88
70
|
);
|
|
89
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
|
+
|
|
90
82
|
/* border width */
|
|
91
83
|
--starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
|
|
92
84
|
|
|
@@ -95,7 +87,7 @@
|
|
|
95
87
|
--starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
|
|
96
88
|
|
|
97
89
|
/* shadow */
|
|
98
|
-
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(
|
|
90
|
+
--starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.2);
|
|
99
91
|
|
|
100
92
|
/* below is for size,above is */
|
|
101
93
|
--starasia-ui-dropdown-fontWeight-normal: var(
|
|
@@ -146,14 +138,14 @@
|
|
|
146
138
|
display: flex;
|
|
147
139
|
align-items: center;
|
|
148
140
|
border: var(--starasia-ui-dropdown-border-width) solid
|
|
149
|
-
|
|
141
|
+
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
150
142
|
border-radius: var(--borderRadius);
|
|
151
|
-
background-color: white;
|
|
143
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
152
144
|
font-size: var(--baseFont);
|
|
153
145
|
cursor: pointer;
|
|
154
146
|
}
|
|
155
147
|
.starasia-input-dropdown-container.disable {
|
|
156
|
-
background-color:
|
|
148
|
+
background-color: var(--starasia-ui-dropdown-color-disabled-bg);
|
|
157
149
|
cursor: not-allowed;
|
|
158
150
|
pointer-events: none;
|
|
159
151
|
}
|
|
@@ -164,7 +156,7 @@
|
|
|
164
156
|
.starasia-input-dropdown-container.active {
|
|
165
157
|
border-color: var(--starasia-ui-dropdown-border-color-primary);
|
|
166
158
|
box-shadow: var(--starasia-ui-dropdown-box-shadow);
|
|
167
|
-
background-color: white;
|
|
159
|
+
background-color: var(--starasia-ui-dropdown-color-white);
|
|
168
160
|
}
|
|
169
161
|
|
|
170
162
|
.starasia-input-dropdown-preview-container {
|
|
@@ -185,8 +177,8 @@
|
|
|
185
177
|
border: var(--starasia-ui-dropdown-border-width) solid
|
|
186
178
|
var(--starasia-ui-dropdown-border-color-tertiary);
|
|
187
179
|
border-radius: var(--borderRadius);
|
|
188
|
-
background-color:
|
|
189
|
-
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);
|
|
190
182
|
max-height: 312px;
|
|
191
183
|
overflow-y: auto;
|
|
192
184
|
z-index: 999;
|
|
@@ -221,7 +213,7 @@
|
|
|
221
213
|
border-radius: var(--borderRadius);
|
|
222
214
|
gap: var(--starasia-ui-dropdown-spacing-sm);
|
|
223
215
|
padding-inline: var(--paddingInline);
|
|
224
|
-
background: white;
|
|
216
|
+
background: var(--starasia-ui-dropdown-color-white);
|
|
225
217
|
& input {
|
|
226
218
|
flex: 1;
|
|
227
219
|
outline: none;
|
|
@@ -263,12 +255,12 @@
|
|
|
263
255
|
}
|
|
264
256
|
|
|
265
257
|
.starasia-input-dropdwon-item:hover {
|
|
266
|
-
background-color: rgba(
|
|
258
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
|
|
267
259
|
}
|
|
268
260
|
.starasia-input-dropdwon-item.active {
|
|
269
261
|
/* color: var(--starasia-ui-dropdown-background-color-primary); */
|
|
270
262
|
/* border-radius: var(--borderRadius); */
|
|
271
|
-
background-color: rgba(
|
|
263
|
+
background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
|
|
272
264
|
/* background: var(--starasia-ui-dropdown-background-color-secondary); */
|
|
273
265
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
274
266
|
}
|
|
@@ -307,30 +299,30 @@
|
|
|
307
299
|
}
|
|
308
300
|
|
|
309
301
|
.starasia-input-dropdwon-item-text {
|
|
310
|
-
color:
|
|
302
|
+
color: var(--starasia-ui-dropdown-color-text-primary);
|
|
311
303
|
/* font-size: 14px; */
|
|
312
304
|
font-size: inherit;
|
|
313
305
|
font-weight: 500;
|
|
314
306
|
}
|
|
315
307
|
.starasia-input-dropdwon-item-text.active {
|
|
316
|
-
color:
|
|
308
|
+
color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
317
309
|
}
|
|
318
310
|
|
|
319
311
|
.starasia-input-dropdwon-item-text-description {
|
|
320
|
-
color:
|
|
312
|
+
color: var(--starasia-ui-dropdown-color-text-secondary);
|
|
321
313
|
/* font-size: 14px; */
|
|
322
314
|
font-size: inherit;
|
|
323
315
|
font-weight: 400;
|
|
324
316
|
}
|
|
325
317
|
.starasia-input-dropdwon-item-text-description.active {
|
|
326
|
-
color:
|
|
318
|
+
color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
327
319
|
}
|
|
328
320
|
|
|
329
321
|
/* for checkbox */
|
|
330
322
|
.checkbox-wrapper-30 .checkbox {
|
|
331
323
|
--bg: #fff;
|
|
332
324
|
--brdr: #d1d6ee;
|
|
333
|
-
--brdr-actv:
|
|
325
|
+
--brdr-actv: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
|
|
334
326
|
--brdr-hovr: #bbc1e1;
|
|
335
327
|
--dur: calc((var(--size, 2) / 2) * 0.6s);
|
|
336
328
|
display: inline-block;
|
|
@@ -402,4 +394,4 @@
|
|
|
402
394
|
height: 100%;
|
|
403
395
|
width: 100%;
|
|
404
396
|
}
|
|
405
|
-
`;function A(a){const[e,t]=o.useState(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"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starasia/dropdown",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "dropdown component for starasia UI",
|
|
5
5
|
"author": "Prawito Hudoro",
|
|
6
6
|
"main": "dist/dropdown.umd.js",
|
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
"dist/*.map",
|
|
13
13
|
"dist/*.css"
|
|
14
14
|
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"dev": "vite --config vite.config.ts --port 3000",
|
|
17
|
+
"build": "vite build --config vite.config.ts"
|
|
18
|
+
},
|
|
15
19
|
"keywords": [],
|
|
16
20
|
"license": "ISC",
|
|
17
21
|
"type": "module",
|
|
@@ -33,9 +37,5 @@
|
|
|
33
37
|
"react-dom": "^18.2.0",
|
|
34
38
|
"@types/react": "^18.2.55",
|
|
35
39
|
"@types/react-dom": "^18.2.19"
|
|
36
|
-
},
|
|
37
|
-
"scripts": {
|
|
38
|
-
"dev": "vite --config vite.config.ts --port 3000",
|
|
39
|
-
"build": "vite build --config vite.config.ts"
|
|
40
40
|
}
|
|
41
|
-
}
|
|
41
|
+
}
|