@starasia/dropdown 2.0.2 → 3.0.0
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 +68 -68
- package/dist/dropdown.umd.js +27 -27
- package/package.json +1 -1
package/dist/dropdown.es.js
CHANGED
|
@@ -28,28 +28,28 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
28
28
|
--sa-dropdown-radius-lg: var(--sa-radii-lg, 0.75rem);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.
|
|
31
|
+
.sa-input-dropdown-size-sm {
|
|
32
32
|
--baseFont: var(--sa-font-size-sm, 12px);
|
|
33
33
|
--height: var(--sa-h-8, 32px);
|
|
34
34
|
--borderRadius: var(--sa-dropdown-radius);
|
|
35
35
|
--paddingInline: var(--sa-spacing-sm, 8px);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
.sa-input-dropdown-size-md {
|
|
39
39
|
--baseFont: var(--sa-font-size-md, 14px);
|
|
40
40
|
--height: 38px;
|
|
41
41
|
--borderRadius: var(--sa-dropdown-radius);
|
|
42
42
|
--paddingInline: var(--sa-spacing-3, 12px);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
.
|
|
45
|
+
.sa-input-dropdown-size-lg {
|
|
46
46
|
--baseFont: var(--sa-font-size-lg, 16px);
|
|
47
47
|
--height: var(--sa-h-12, 48px);
|
|
48
48
|
--borderRadius: var(--sa-dropdown-radius-lg);
|
|
49
49
|
--paddingInline: var(--sa-spacing-3, 12px);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
.
|
|
52
|
+
.sa-input-dropdown-container {
|
|
53
53
|
position: relative;
|
|
54
54
|
min-height: var(--height);
|
|
55
55
|
padding-inline: var(--paddingInline);
|
|
@@ -61,22 +61,22 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
61
61
|
font-size: var(--baseFont);
|
|
62
62
|
cursor: pointer;
|
|
63
63
|
}
|
|
64
|
-
.
|
|
64
|
+
.sa-input-dropdown-container.disable {
|
|
65
65
|
background-color: var(--sa-dropdown-bg-disabled);
|
|
66
66
|
cursor: not-allowed;
|
|
67
67
|
pointer-events: none;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
.
|
|
70
|
+
.sa-input-dropdown-container.error {
|
|
71
71
|
border-color: var(--sa-dropdown-border-error) !important;
|
|
72
72
|
}
|
|
73
|
-
.
|
|
73
|
+
.sa-input-dropdown-container.active {
|
|
74
74
|
border-color: var(--sa-dropdown-border-active);
|
|
75
75
|
box-shadow: var(--sa-dropdown-shadow-focus);
|
|
76
76
|
background-color: var(--sa-dropdown-bg);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
.
|
|
79
|
+
.sa-input-dropdown-preview-container {
|
|
80
80
|
display: flex;
|
|
81
81
|
flex-direction: row;
|
|
82
82
|
gap: var(--sa-spacing-sm, 8px);
|
|
@@ -86,7 +86,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
86
86
|
overflow-y: hidden;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
.
|
|
89
|
+
.sa-input-dropdown-lists-container {
|
|
90
90
|
/* position: absolute; */
|
|
91
91
|
position: fixed;
|
|
92
92
|
/* left: 0; */
|
|
@@ -109,16 +109,16 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
109
109
|
white-space: nowrap; */
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
.
|
|
112
|
+
.sa-input-dropdown-lists-container-bottom {
|
|
113
113
|
top: 100%;
|
|
114
114
|
margin-top: var(--sa-spacing-xs, 4px);
|
|
115
115
|
}
|
|
116
|
-
.
|
|
116
|
+
.sa-input-dropdown-lists-container-top {
|
|
117
117
|
bottom: 100%;
|
|
118
118
|
margin-bottom: var(--sa-spacing-xs, 4px);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
.
|
|
121
|
+
.sa-input-dropdown-container-dropdown-search {
|
|
122
122
|
display: flex;
|
|
123
123
|
align-items: center;
|
|
124
124
|
height: var(--height);
|
|
@@ -138,14 +138,14 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.
|
|
141
|
+
.sa-input-dropdwon-item-container {
|
|
142
142
|
display: flex;
|
|
143
143
|
flex-direction: column;
|
|
144
144
|
/* overflow: hidden; */
|
|
145
145
|
|
|
146
146
|
/* gap: var(--sa-spacing-xs, 0.25rem); */
|
|
147
147
|
}
|
|
148
|
-
.
|
|
148
|
+
.sa-input-dropdwon-item-container.multi {
|
|
149
149
|
display: flex;
|
|
150
150
|
flex-direction: column;
|
|
151
151
|
gap: 8px;
|
|
@@ -154,7 +154,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
154
154
|
/* gap: var(--sa-spacing-xs, 0.25rem); */
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
-
.
|
|
157
|
+
.sa-input-dropdwon-item {
|
|
158
158
|
/* max-height: var(--height); */
|
|
159
159
|
max-height: 58px;
|
|
160
160
|
box-sizing: border-box;
|
|
@@ -169,28 +169,28 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
169
169
|
overflow: hidden;
|
|
170
170
|
}
|
|
171
171
|
|
|
172
|
-
.
|
|
172
|
+
.sa-input-dropdwon-item:hover {
|
|
173
173
|
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
|
|
174
174
|
}
|
|
175
|
-
.
|
|
175
|
+
.sa-input-dropdwon-item.active {
|
|
176
176
|
/* color: var(--sa-dropdown-brand); */
|
|
177
177
|
/* border-radius: var(--borderRadius); */
|
|
178
178
|
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
|
|
179
179
|
/* background: var(--sa-dropdown-brand-subtle); */
|
|
180
180
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
181
181
|
}
|
|
182
|
-
.
|
|
182
|
+
.sa-input-dropdwon-item.highlight {
|
|
183
183
|
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 35%, transparent);
|
|
184
184
|
outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-secondary) 40%, transparent);
|
|
185
185
|
outline-offset: -2px;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
.
|
|
188
|
+
.sa-input-dropdwon-item-disable {
|
|
189
189
|
color: var(--sa-dropdown-color-disable) !important;
|
|
190
190
|
pointer-events: none;
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
-
.
|
|
193
|
+
.sa-input-dropdown-container-preview-item {
|
|
194
194
|
flex: 1;
|
|
195
195
|
display: flex;
|
|
196
196
|
gap: var(--sa-spacing-xs, 4px);
|
|
@@ -200,7 +200,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
200
200
|
padding-block: 4px;
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
-
.
|
|
203
|
+
.sa-input-dropdown-preview-item {
|
|
204
204
|
border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-active);
|
|
205
205
|
padding-inline: var(--paddingInline);
|
|
206
206
|
border-radius: var(--borderRadius);
|
|
@@ -212,28 +212,28 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
212
212
|
align-items: center;
|
|
213
213
|
gap: 2;
|
|
214
214
|
}
|
|
215
|
-
.
|
|
215
|
+
.sa-input-dropdown-placeholder {
|
|
216
216
|
color: var(--sa-dropdown-placeholder);
|
|
217
217
|
font-weight: var(--sa-font-weight-normal, 300);
|
|
218
218
|
}
|
|
219
219
|
|
|
220
|
-
.
|
|
220
|
+
.sa-input-dropdwon-item-text {
|
|
221
221
|
color: var(--sa-dropdown-text-primary);
|
|
222
222
|
/* font-size: 14px; */
|
|
223
223
|
font-size: inherit;
|
|
224
224
|
font-weight: 500;
|
|
225
225
|
}
|
|
226
|
-
.
|
|
226
|
+
.sa-input-dropdwon-item-text.active {
|
|
227
227
|
color: var(--sa-dropdown-brand);
|
|
228
228
|
}
|
|
229
229
|
|
|
230
|
-
.
|
|
230
|
+
.sa-input-dropdwon-item-text-description {
|
|
231
231
|
color: var(--sa-dropdown-text-secondary);
|
|
232
232
|
/* font-size: 14px; */
|
|
233
233
|
font-size: inherit;
|
|
234
234
|
font-weight: 400;
|
|
235
235
|
}
|
|
236
|
-
.
|
|
236
|
+
.sa-input-dropdwon-item-text-description.active {
|
|
237
237
|
color: var(--sa-dropdown-brand);
|
|
238
238
|
}
|
|
239
239
|
|
|
@@ -315,12 +315,12 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
315
315
|
}
|
|
316
316
|
`;
|
|
317
317
|
function G(r) {
|
|
318
|
-
const [c,
|
|
319
|
-
|
|
318
|
+
const [c, d] = R(r), s = z(null), a = (o) => {
|
|
319
|
+
s.current && !s.current.contains(o.target) && d(!1);
|
|
320
320
|
};
|
|
321
321
|
return b(() => (document.addEventListener("click", a, !0), () => {
|
|
322
322
|
document.removeEventListener("click", a, !0);
|
|
323
|
-
}), []), { ref:
|
|
323
|
+
}), []), { ref: s, isComponentVisible: c, setIsComponentVisible: d };
|
|
324
324
|
}
|
|
325
325
|
const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
326
326
|
"svg",
|
|
@@ -397,8 +397,8 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
397
397
|
({
|
|
398
398
|
positionDropdown: r,
|
|
399
399
|
dropdownLists: c,
|
|
400
|
-
isComponentVisible:
|
|
401
|
-
searchAble:
|
|
400
|
+
isComponentVisible: d,
|
|
401
|
+
searchAble: s,
|
|
402
402
|
onSearch: a,
|
|
403
403
|
value: o,
|
|
404
404
|
handleChangeValue: v,
|
|
@@ -412,20 +412,20 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
412
412
|
const n = m.current.getBoundingClientRect();
|
|
413
413
|
L(n.width);
|
|
414
414
|
}
|
|
415
|
-
}, [m,
|
|
415
|
+
}, [m, d]), b(() => {
|
|
416
416
|
var n;
|
|
417
417
|
g >= 0 && x.current[g] && ((n = x.current[g]) == null || n.scrollIntoView({ block: "nearest" }));
|
|
418
|
-
}, [g]), /* @__PURE__ */ e(V, { children:
|
|
418
|
+
}, [g]), /* @__PURE__ */ e(V, { children: d ? /* @__PURE__ */ p(
|
|
419
419
|
"div",
|
|
420
420
|
{
|
|
421
|
-
className: "
|
|
421
|
+
className: "sa-input-dropdown-lists-container",
|
|
422
422
|
onClick: (n) => n.stopPropagation(),
|
|
423
423
|
ref: N,
|
|
424
424
|
children: [
|
|
425
|
-
|
|
425
|
+
s ? /* @__PURE__ */ p(
|
|
426
426
|
"div",
|
|
427
427
|
{
|
|
428
|
-
className: "
|
|
428
|
+
className: "sa-input-dropdown-container-dropdown-search",
|
|
429
429
|
style: {
|
|
430
430
|
order: r == "bottom" ? 0 : 2,
|
|
431
431
|
position: "sticky",
|
|
@@ -452,14 +452,14 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
452
452
|
/* @__PURE__ */ e(
|
|
453
453
|
"div",
|
|
454
454
|
{
|
|
455
|
-
className: `
|
|
455
|
+
className: `sa-input-dropdwon-item-container ${l ? "multi" : ""}`,
|
|
456
456
|
ref: m,
|
|
457
457
|
children: c.map((n, h) => {
|
|
458
458
|
const k = !!(o != null && o.find((y) => y.value === n.value));
|
|
459
459
|
return /* @__PURE__ */ p(
|
|
460
460
|
"div",
|
|
461
461
|
{
|
|
462
|
-
className: `
|
|
462
|
+
className: `sa-input-dropdwon-item ${k ? "active" : ""} ${h === g ? "highlight" : ""} ${n.disable ? "sa-input-dropdwon-item-disable" : ""}`,
|
|
463
463
|
ref: (y) => {
|
|
464
464
|
x.current[h] = y;
|
|
465
465
|
},
|
|
@@ -473,7 +473,7 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
473
473
|
/* @__PURE__ */ e(
|
|
474
474
|
"p",
|
|
475
475
|
{
|
|
476
|
-
className: `
|
|
476
|
+
className: `sa-input-dropdwon-item-text ${k ? "active" : null} ${n.disable ? "sa-input-dropdwon-item-disable" : null}`,
|
|
477
477
|
style: {
|
|
478
478
|
textWrap: "nowrap",
|
|
479
479
|
width: `${I - 12}px`,
|
|
@@ -486,7 +486,7 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
486
486
|
n.description ? /* @__PURE__ */ e(
|
|
487
487
|
"p",
|
|
488
488
|
{
|
|
489
|
-
className: `
|
|
489
|
+
className: `sa-input-dropdwon-item-text-description ${k ? "active" : null} ${n.disable ? "sa-input-dropdwon-item-disable" : null}`,
|
|
490
490
|
style: {
|
|
491
491
|
textWrap: "nowrap",
|
|
492
492
|
width: `${I - 12}px`,
|
|
@@ -512,27 +512,27 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
512
512
|
children: r,
|
|
513
513
|
handleChangePosition: c
|
|
514
514
|
}) => {
|
|
515
|
-
const
|
|
515
|
+
const d = z(null);
|
|
516
516
|
b(() => {
|
|
517
517
|
var v;
|
|
518
518
|
const a = () => {
|
|
519
|
-
if (
|
|
520
|
-
let l =
|
|
521
|
-
for (; l && !
|
|
519
|
+
if (d.current) {
|
|
520
|
+
let l = d.current.parentElement;
|
|
521
|
+
for (; l && !s(l); )
|
|
522
522
|
l = l.parentElement;
|
|
523
523
|
l && c();
|
|
524
524
|
}
|
|
525
525
|
};
|
|
526
|
-
let o = (v =
|
|
527
|
-
for (; o && !
|
|
526
|
+
let o = (v = d.current) == null ? void 0 : v.parentElement;
|
|
527
|
+
for (; o && !s(o); )
|
|
528
528
|
o = o.parentElement;
|
|
529
529
|
return o && o.addEventListener("scroll", a), a(), () => {
|
|
530
530
|
o && o.removeEventListener("scroll", a);
|
|
531
531
|
};
|
|
532
532
|
}, []);
|
|
533
|
-
const
|
|
534
|
-
return /* @__PURE__ */ e("div", { ref:
|
|
535
|
-
}, F = "
|
|
533
|
+
const s = (a) => a && (a.scrollHeight > a.clientHeight || a.scrollWidth > a.clientWidth);
|
|
534
|
+
return /* @__PURE__ */ e("div", { ref: d, children: r });
|
|
535
|
+
}, F = "sa-input-dropdown-styles", _ = (r) => {
|
|
536
536
|
if (!document.getElementById(F)) {
|
|
537
537
|
const c = document.createElement("style");
|
|
538
538
|
c.id = F, c.textContent = r, document.head.appendChild(c);
|
|
@@ -542,8 +542,8 @@ _(U);
|
|
|
542
542
|
const on = ({
|
|
543
543
|
dropdownLists: r,
|
|
544
544
|
onChange: c,
|
|
545
|
-
defaultValue:
|
|
546
|
-
size:
|
|
545
|
+
defaultValue: d,
|
|
546
|
+
size: s = "md",
|
|
547
547
|
multiSelect: a,
|
|
548
548
|
searchAble: o,
|
|
549
549
|
iconLeft: v,
|
|
@@ -571,9 +571,9 @@ const on = ({
|
|
|
571
571
|
}
|
|
572
572
|
};
|
|
573
573
|
b(() => {
|
|
574
|
-
JSON.stringify(x.current) === JSON.stringify(
|
|
575
|
-
}, [
|
|
576
|
-
const S = () => n.length ? a ? n == null ? void 0 : n.map((t, i) => /* @__PURE__ */ p("div", { className: "
|
|
574
|
+
JSON.stringify(x.current) === JSON.stringify(d) || (x.current = d, h(x.current || []));
|
|
575
|
+
}, [d]);
|
|
576
|
+
const S = () => n.length ? a ? n == null ? void 0 : n.map((t, i) => /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-item", children: [
|
|
577
577
|
/* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }, i),
|
|
578
578
|
/* @__PURE__ */ e(
|
|
579
579
|
nn,
|
|
@@ -581,7 +581,7 @@ const on = ({
|
|
|
581
581
|
onClick: () => A(t.label, t.value)
|
|
582
582
|
}
|
|
583
583
|
)
|
|
584
|
-
] })) : /* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ e("p", { className: "
|
|
584
|
+
] })) : /* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ e("p", { className: "sa-input-dropdown-placeholder", children: l }), E = () => {
|
|
585
585
|
if (W.current && f.current) {
|
|
586
586
|
const t = window.innerHeight, i = W.current.getBoundingClientRect(), j = f.current.getBoundingClientRect(), w = i.bottom + j.height;
|
|
587
587
|
f.current.style.left = `${i.left}px`, f.current.style.width = `${i.width}px`, w >= t - 10 ? (f.current.style.top = `${i.top - j.height - 5}px`, y("top")) : (f.current.style.top = `${i.top + i.height}px`, y("bottom"));
|
|
@@ -628,7 +628,7 @@ const on = ({
|
|
|
628
628
|
return /* @__PURE__ */ e(Z, { handleChangePosition: E, children: /* @__PURE__ */ p(
|
|
629
629
|
"div",
|
|
630
630
|
{
|
|
631
|
-
className: `
|
|
631
|
+
className: `sa-input-dropdown-container ${L ? "disable" : ""} sa-input-dropdown-size-${s} ${C ? "active" : ""} ${g ? "error" : ""}`,
|
|
632
632
|
ref: W,
|
|
633
633
|
onClick: P,
|
|
634
634
|
onKeyDown: q,
|
|
@@ -636,9 +636,9 @@ const on = ({
|
|
|
636
636
|
onBlur: N,
|
|
637
637
|
onFocus: I,
|
|
638
638
|
children: [
|
|
639
|
-
/* @__PURE__ */ p("div", { className: "
|
|
639
|
+
/* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-container", children: [
|
|
640
640
|
v ? /* @__PURE__ */ e(V, { children: M.cloneElement(v, {
|
|
641
|
-
width: O(
|
|
641
|
+
width: O(s),
|
|
642
642
|
color: "var(--sa-color-gray-500, #8c8f97)",
|
|
643
643
|
style: {
|
|
644
644
|
color: "var(--sa-color-gray-500, #8c8f97)"
|
|
@@ -647,7 +647,7 @@ const on = ({
|
|
|
647
647
|
/* @__PURE__ */ e(
|
|
648
648
|
"div",
|
|
649
649
|
{
|
|
650
|
-
className: "
|
|
650
|
+
className: "sa-input-dropdown-container-preview-item",
|
|
651
651
|
children: S()
|
|
652
652
|
}
|
|
653
653
|
),
|
|
@@ -655,7 +655,7 @@ const on = ({
|
|
|
655
655
|
Q,
|
|
656
656
|
{
|
|
657
657
|
strokeWidth: 2,
|
|
658
|
-
width: O(
|
|
658
|
+
width: O(s),
|
|
659
659
|
style: { color: "var(--sa-color-gray-500, #8c8f97)" }
|
|
660
660
|
}
|
|
661
661
|
)
|
|
@@ -679,20 +679,20 @@ const on = ({
|
|
|
679
679
|
]
|
|
680
680
|
}
|
|
681
681
|
) });
|
|
682
|
-
}, H = (r, c,
|
|
683
|
-
const
|
|
684
|
-
let a = c +
|
|
685
|
-
for (; a >= 0 && a <
|
|
682
|
+
}, H = (r, c, d) => {
|
|
683
|
+
const s = r.length;
|
|
684
|
+
let a = c + d;
|
|
685
|
+
for (; a >= 0 && a < s; ) {
|
|
686
686
|
if (!r[a].disable)
|
|
687
687
|
return a;
|
|
688
|
-
a +=
|
|
688
|
+
a += d;
|
|
689
689
|
}
|
|
690
|
-
if (
|
|
691
|
-
for (let o = 0; o <
|
|
690
|
+
if (d === 1) {
|
|
691
|
+
for (let o = 0; o < s; o++)
|
|
692
692
|
if (!r[o].disable)
|
|
693
693
|
return o;
|
|
694
694
|
} else
|
|
695
|
-
for (let o =
|
|
695
|
+
for (let o = s - 1; o >= 0; o--)
|
|
696
696
|
if (!r[o].disable)
|
|
697
697
|
return o;
|
|
698
698
|
return -1;
|
package/dist/dropdown.umd.js
CHANGED
|
@@ -26,28 +26,28 @@
|
|
|
26
26
|
--sa-dropdown-radius-lg: var(--sa-radii-lg, 0.75rem);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.
|
|
29
|
+
.sa-input-dropdown-size-sm {
|
|
30
30
|
--baseFont: var(--sa-font-size-sm, 12px);
|
|
31
31
|
--height: var(--sa-h-8, 32px);
|
|
32
32
|
--borderRadius: var(--sa-dropdown-radius);
|
|
33
33
|
--paddingInline: var(--sa-spacing-sm, 8px);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.
|
|
36
|
+
.sa-input-dropdown-size-md {
|
|
37
37
|
--baseFont: var(--sa-font-size-md, 14px);
|
|
38
38
|
--height: 38px;
|
|
39
39
|
--borderRadius: var(--sa-dropdown-radius);
|
|
40
40
|
--paddingInline: var(--sa-spacing-3, 12px);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.
|
|
43
|
+
.sa-input-dropdown-size-lg {
|
|
44
44
|
--baseFont: var(--sa-font-size-lg, 16px);
|
|
45
45
|
--height: var(--sa-h-12, 48px);
|
|
46
46
|
--borderRadius: var(--sa-dropdown-radius-lg);
|
|
47
47
|
--paddingInline: var(--sa-spacing-3, 12px);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
.
|
|
50
|
+
.sa-input-dropdown-container {
|
|
51
51
|
position: relative;
|
|
52
52
|
min-height: var(--height);
|
|
53
53
|
padding-inline: var(--paddingInline);
|
|
@@ -59,22 +59,22 @@
|
|
|
59
59
|
font-size: var(--baseFont);
|
|
60
60
|
cursor: pointer;
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
.sa-input-dropdown-container.disable {
|
|
63
63
|
background-color: var(--sa-dropdown-bg-disabled);
|
|
64
64
|
cursor: not-allowed;
|
|
65
65
|
pointer-events: none;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.
|
|
68
|
+
.sa-input-dropdown-container.error {
|
|
69
69
|
border-color: var(--sa-dropdown-border-error) !important;
|
|
70
70
|
}
|
|
71
|
-
.
|
|
71
|
+
.sa-input-dropdown-container.active {
|
|
72
72
|
border-color: var(--sa-dropdown-border-active);
|
|
73
73
|
box-shadow: var(--sa-dropdown-shadow-focus);
|
|
74
74
|
background-color: var(--sa-dropdown-bg);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
.
|
|
77
|
+
.sa-input-dropdown-preview-container {
|
|
78
78
|
display: flex;
|
|
79
79
|
flex-direction: row;
|
|
80
80
|
gap: var(--sa-spacing-sm, 8px);
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
overflow-y: hidden;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
.
|
|
87
|
+
.sa-input-dropdown-lists-container {
|
|
88
88
|
/* position: absolute; */
|
|
89
89
|
position: fixed;
|
|
90
90
|
/* left: 0; */
|
|
@@ -107,16 +107,16 @@
|
|
|
107
107
|
white-space: nowrap; */
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
.
|
|
110
|
+
.sa-input-dropdown-lists-container-bottom {
|
|
111
111
|
top: 100%;
|
|
112
112
|
margin-top: var(--sa-spacing-xs, 4px);
|
|
113
113
|
}
|
|
114
|
-
.
|
|
114
|
+
.sa-input-dropdown-lists-container-top {
|
|
115
115
|
bottom: 100%;
|
|
116
116
|
margin-bottom: var(--sa-spacing-xs, 4px);
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
.
|
|
119
|
+
.sa-input-dropdown-container-dropdown-search {
|
|
120
120
|
display: flex;
|
|
121
121
|
align-items: center;
|
|
122
122
|
height: var(--height);
|
|
@@ -136,14 +136,14 @@
|
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
|
|
139
|
-
.
|
|
139
|
+
.sa-input-dropdwon-item-container {
|
|
140
140
|
display: flex;
|
|
141
141
|
flex-direction: column;
|
|
142
142
|
/* overflow: hidden; */
|
|
143
143
|
|
|
144
144
|
/* gap: var(--sa-spacing-xs, 0.25rem); */
|
|
145
145
|
}
|
|
146
|
-
.
|
|
146
|
+
.sa-input-dropdwon-item-container.multi {
|
|
147
147
|
display: flex;
|
|
148
148
|
flex-direction: column;
|
|
149
149
|
gap: 8px;
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
/* gap: var(--sa-spacing-xs, 0.25rem); */
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
.
|
|
155
|
+
.sa-input-dropdwon-item {
|
|
156
156
|
/* max-height: var(--height); */
|
|
157
157
|
max-height: 58px;
|
|
158
158
|
box-sizing: border-box;
|
|
@@ -167,28 +167,28 @@
|
|
|
167
167
|
overflow: hidden;
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
.
|
|
170
|
+
.sa-input-dropdwon-item:hover {
|
|
171
171
|
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
|
|
172
172
|
}
|
|
173
|
-
.
|
|
173
|
+
.sa-input-dropdwon-item.active {
|
|
174
174
|
/* color: var(--sa-dropdown-brand); */
|
|
175
175
|
/* border-radius: var(--borderRadius); */
|
|
176
176
|
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
|
|
177
177
|
/* background: var(--sa-dropdown-brand-subtle); */
|
|
178
178
|
/* box-shadow: 0px 0px 0px -1px #f0f0f0; */
|
|
179
179
|
}
|
|
180
|
-
.
|
|
180
|
+
.sa-input-dropdwon-item.highlight {
|
|
181
181
|
background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 35%, transparent);
|
|
182
182
|
outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-secondary) 40%, transparent);
|
|
183
183
|
outline-offset: -2px;
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
-
.
|
|
186
|
+
.sa-input-dropdwon-item-disable {
|
|
187
187
|
color: var(--sa-dropdown-color-disable) !important;
|
|
188
188
|
pointer-events: none;
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
.
|
|
191
|
+
.sa-input-dropdown-container-preview-item {
|
|
192
192
|
flex: 1;
|
|
193
193
|
display: flex;
|
|
194
194
|
gap: var(--sa-spacing-xs, 4px);
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
padding-block: 4px;
|
|
199
199
|
}
|
|
200
200
|
|
|
201
|
-
.
|
|
201
|
+
.sa-input-dropdown-preview-item {
|
|
202
202
|
border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-active);
|
|
203
203
|
padding-inline: var(--paddingInline);
|
|
204
204
|
border-radius: var(--borderRadius);
|
|
@@ -210,28 +210,28 @@
|
|
|
210
210
|
align-items: center;
|
|
211
211
|
gap: 2;
|
|
212
212
|
}
|
|
213
|
-
.
|
|
213
|
+
.sa-input-dropdown-placeholder {
|
|
214
214
|
color: var(--sa-dropdown-placeholder);
|
|
215
215
|
font-weight: var(--sa-font-weight-normal, 300);
|
|
216
216
|
}
|
|
217
217
|
|
|
218
|
-
.
|
|
218
|
+
.sa-input-dropdwon-item-text {
|
|
219
219
|
color: var(--sa-dropdown-text-primary);
|
|
220
220
|
/* font-size: 14px; */
|
|
221
221
|
font-size: inherit;
|
|
222
222
|
font-weight: 500;
|
|
223
223
|
}
|
|
224
|
-
.
|
|
224
|
+
.sa-input-dropdwon-item-text.active {
|
|
225
225
|
color: var(--sa-dropdown-brand);
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
-
.
|
|
228
|
+
.sa-input-dropdwon-item-text-description {
|
|
229
229
|
color: var(--sa-dropdown-text-secondary);
|
|
230
230
|
/* font-size: 14px; */
|
|
231
231
|
font-size: inherit;
|
|
232
232
|
font-weight: 400;
|
|
233
233
|
}
|
|
234
|
-
.
|
|
234
|
+
.sa-input-dropdwon-item-text-description.active {
|
|
235
235
|
color: var(--sa-dropdown-brand);
|
|
236
236
|
}
|
|
237
237
|
|
|
@@ -311,4 +311,4 @@
|
|
|
311
311
|
height: 100%;
|
|
312
312
|
width: 100%;
|
|
313
313
|
}
|
|
314
|
-
`;function H(e){const[l,
|
|
314
|
+
`;function H(e){const[l,i]=t.useState(e),c=t.useRef(null),a=o=>{c.current&&!c.current.contains(o.target)&&i(!1)};return t.useEffect(()=>(document.addEventListener("click",a,!0),()=>{document.removeEventListener("click",a,!0)}),[]),{ref:c,isComponentVisible:l,setIsComponentVisible:i}}const V=({...e})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 24 24",fill:"none",color:"var(--sa-color-gray-500, #8c8f97)",children:n.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),M=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),P=({isChecked:e})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:e}),n.jsx("svg",{children:n.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:n.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:n.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"})})})]}),q=t.forwardRef(({positionDropdown:e,dropdownLists:l,isComponentVisible:i,searchAble:c,onSearch:a,value:o,handleChangeValue:u,multiSelect:p,searchValue:B,highlightedIndex:f},$)=>{const[z,N]=t.useState(0),k=t.useRef(null),g=t.useRef([]);return t.useEffect(()=>{if(k.current){const r=k.current.getBoundingClientRect();N(r.width)}},[k,i]),t.useEffect(()=>{var r;f>=0&&g.current[f]&&((r=g.current[f])==null||r.scrollIntoView({block:"nearest"}))},[f]),n.jsx(n.Fragment,{children:i?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:r=>r.stopPropagation(),ref:$,children:[c?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",style:{order:e=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[n.jsx("div",{style:{display:"flex"},children:n.jsx(M,{strokeWidth:2,width:20})}),n.jsx("input",{onChange:r=>{a&&a(r.target.value)},value:B,autoFocus:!0,style:{width:"100%"}})]}):null,n.jsx("div",{className:`sa-input-dropdwon-item-container ${p?"multi":""}`,ref:k,children:l.map((r,b)=>{const y=!!(o!=null&&o.find(m=>m.value===r.value));return n.jsxs("div",{className:`sa-input-dropdwon-item ${y?"active":""} ${b===f?"highlight":""} ${r.disable?"sa-input-dropdwon-item-disable":""}`,ref:m=>{g.current[b]=m},onClick:()=>u(r.label,r.value),children:[p?n.jsx("div",{style:{marginRight:"8px"},children:n.jsx(P,{isChecked:y})}):null,r.icon?n.jsx("div",{children:t.cloneElement(r.icon,{width:16})}):null,n.jsxs("div",{children:[n.jsx("p",{className:`sa-input-dropdwon-item-text ${y?"active":null} ${r.disable?"sa-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.label}),r.description?n.jsx("p",{className:`sa-input-dropdwon-item-text-description ${y?"active":null} ${r.disable?"sa-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.description}):null]})]},b)})})]}):null})}),T=({children:e,handleChangePosition:l})=>{const i=t.useRef(null);t.useEffect(()=>{var u;const a=()=>{if(i.current){let p=i.current.parentElement;for(;p&&!c(p);)p=p.parentElement;p&&l()}};let o=(u=i.current)==null?void 0:u.parentElement;for(;o&&!c(o);)o=o.parentElement;return o&&o.addEventListener("scroll",a),a(),()=>{o&&o.removeEventListener("scroll",a)}},[]);const c=a=>a&&(a.scrollHeight>a.clientHeight||a.scrollWidth>a.clientWidth);return n.jsx("div",{ref:i,children:e})},S="sa-input-dropdown-styles";(e=>{if(!document.getElementById(S)){const l=document.createElement("style");l.id=S,l.textContent=e,document.head.appendChild(l)}})(O);const J=({dropdownLists:e,onChange:l,defaultValue:i,size:c="md",multiSelect:a,searchAble:o,iconLeft:u,placeholder:p,onSearch:B,error:f,onBlur:$,onFocus:z,disable:N,searchValue:k})=>{const g=t.useRef(),[r,b]=t.useState([]),[y,m]=t.useState(""),[v,D]=t.useState(-1),x=t.useRef(null),{isComponentVisible:C,ref:L,setIsComponentVisible:I}=H(!1),U=()=>{I(d=>!d)},W=(d,s)=>{if(!a)b([{label:d,value:s}]),l([{label:d,value:s}]),I(!1);else if(r==null?void 0:r.find(w=>w.value===s)){const w=[...r?r.filter(X=>X.value!==s):[]];b(w),l(w)}else{const w=[...r||[],{label:d,value:s}];b(w),l(w)}};t.useEffect(()=>{JSON.stringify(g.current)===JSON.stringify(i)||(g.current=i,b(g.current||[]))},[i]);const G=()=>r.length?a?r==null?void 0:r.map((d,s)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label},s),n.jsx(K,{onClick:()=>W(d.label,d.value)})]})):n.jsx("p",{style:{minWidth:"max-content"},children:r==null?void 0:r[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:p}),E=()=>{if(L.current&&x.current){const d=window.innerHeight,s=L.current.getBoundingClientRect(),j=x.current.getBoundingClientRect(),w=s.bottom+j.height;x.current.style.left=`${s.left}px`,x.current.style.width=`${s.width}px`,w>=d-10?(x.current.style.top=`${s.top-j.height-5}px`,m("top")):(x.current.style.top=`${s.top+s.height}px`,m("bottom"))}};t.useEffect(()=>(window.addEventListener("scroll",E),window.addEventListener("resize",E),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}),[]),t.useEffect(()=>{E()},[C]),t.useEffect(()=>{C||D(-1)},[C]);const Q=d=>{if(!C){(d.key==="ArrowDown"||d.key==="Enter")&&(d.preventDefault(),I(!0));return}switch(d.key){case"ArrowDown":{d.preventDefault();const s=A(e,v,1);s!==-1&&D(s);break}case"ArrowUp":{d.preventDefault();const s=A(e,v,-1);s!==-1&&D(s);break}case"Enter":{d.preventDefault(),v>=0&&e[v]&&!e[v].disable&&W(e[v].label,e[v].value);break}case"Escape":{I(!1);break}}};return n.jsx(T,{handleChangePosition:E,children:n.jsxs("div",{className:`sa-input-dropdown-container ${N?"disable":""} sa-input-dropdown-size-${c} ${C?"active":""} ${f?"error":""}`,ref:L,onClick:U,onKeyDown:Q,tabIndex:0,onBlur:$,onFocus:z,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[u?n.jsx(n.Fragment,{children:t.cloneElement(u,{width:F(c),color:"var(--sa-color-gray-500, #8c8f97)",style:{color:"var(--sa-color-gray-500, #8c8f97)"}})}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:G()}),n.jsx(V,{strokeWidth:2,width:F(c),style:{color:"var(--sa-color-gray-500, #8c8f97)"}})]}),n.jsx(q,{dropdownLists:e,handleChangeValue:W,isComponentVisible:C,positionDropdown:y,searchAble:!!o,value:r,onSearch:B,ref:x,multiSelect:a,searchValue:k,highlightedIndex:v})]})})},A=(e,l,i)=>{const c=e.length;let a=l+i;for(;a>=0&&a<c;){if(!e[a].disable)return a;a+=i}if(i===1){for(let o=0;o<c;o++)if(!e[o].disable)return o}else for(let o=c-1;o>=0;o--)if(!e[o].disable)return o;return-1},F=e=>{if(e==="sm")return 16;if(e==="md")return 16;if(e==="lg")return 20},K=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});h.Dropdown=J,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|