@starasia/dropdown 2.0.0 → 2.0.2
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 +56 -56
- package/dist/dropdown.umd.js +6 -6
- package/package.json +6 -6
package/dist/dropdown.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
1
|
+
import { jsx as e, jsxs as p, Fragment as V } from "react/jsx-runtime";
|
|
2
2
|
import M, { useState as R, useRef as z, useEffect as b, forwardRef as K } from "react";
|
|
3
3
|
const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
|
|
4
4
|
* {
|
|
@@ -12,17 +12,17 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
12
12
|
--sa-dropdown-brand-subtle: var(--sa-color-brand-50, #e6edf6);
|
|
13
13
|
--sa-dropdown-brand-secondary: var(--sa-color-brand-200, #99b3db);
|
|
14
14
|
--sa-dropdown-bg: var(--sa-background-primary, #ffffff);
|
|
15
|
-
--sa-dropdown-bg-disabled:
|
|
15
|
+
--sa-dropdown-bg-disabled: var(--sa-background-neutral, #f0f1f2);
|
|
16
16
|
--sa-dropdown-border: var(--sa-border, 1px);
|
|
17
|
-
--sa-dropdown-border-color:
|
|
17
|
+
--sa-dropdown-border-color: var(--sa-color-gray-alpha-a20, #78867f33);
|
|
18
18
|
--sa-dropdown-border-active: var(--sa-background-brand, #04254f);
|
|
19
19
|
--sa-dropdown-border-search: var(--sa-color-gray-300, #dddee1);
|
|
20
20
|
--sa-dropdown-border-error: var(--sa-color-error-500, #ff4d6d);
|
|
21
21
|
--sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
|
|
22
22
|
--sa-dropdown-placeholder: var(--sa-color-gray-400, #b7b9be);
|
|
23
|
-
--sa-dropdown-text-primary:
|
|
24
|
-
--sa-dropdown-text-secondary:
|
|
25
|
-
--sa-dropdown-shadow-list:
|
|
23
|
+
--sa-dropdown-text-primary: var(--sa-text-primary, #292a2e);
|
|
24
|
+
--sa-dropdown-text-secondary: var(--sa-text-subtle, #8c8f97);
|
|
25
|
+
--sa-dropdown-shadow-list: var(--sa-color-black-alpha-a8, #00000014);
|
|
26
26
|
--sa-dropdown-shadow-focus: 0px 0px 0px 2px var(--sa-color-brand-200, #99b3db);
|
|
27
27
|
--sa-dropdown-radius: var(--sa-radii-md, 0.5rem);
|
|
28
28
|
--sa-dropdown-radius-lg: var(--sa-radii-lg, 0.75rem);
|
|
@@ -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, s] = R(r), d = z(null), a = (o) => {
|
|
319
|
+
d.current && !d.current.contains(o.target) && s(!1);
|
|
320
320
|
};
|
|
321
321
|
return b(() => (document.addEventListener("click", a, !0), () => {
|
|
322
322
|
document.removeEventListener("click", a, !0);
|
|
323
|
-
}), []), { ref:
|
|
323
|
+
}), []), { ref: d, isComponentVisible: c, setIsComponentVisible: s };
|
|
324
324
|
}
|
|
325
325
|
const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
326
326
|
"svg",
|
|
@@ -329,7 +329,7 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
329
329
|
...r,
|
|
330
330
|
viewBox: "0 0 24 24",
|
|
331
331
|
fill: "none",
|
|
332
|
-
color: "#
|
|
332
|
+
color: "var(--sa-color-gray-500, #8c8f97)",
|
|
333
333
|
children: /* @__PURE__ */ e(
|
|
334
334
|
"path",
|
|
335
335
|
{
|
|
@@ -341,7 +341,7 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
341
341
|
}
|
|
342
342
|
)
|
|
343
343
|
}
|
|
344
|
-
), T = ({ ...r }) => /* @__PURE__ */
|
|
344
|
+
), T = ({ ...r }) => /* @__PURE__ */ p(
|
|
345
345
|
"svg",
|
|
346
346
|
{
|
|
347
347
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -373,8 +373,8 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
373
373
|
)
|
|
374
374
|
]
|
|
375
375
|
}
|
|
376
|
-
), X = ({ isChecked: r }) => /* @__PURE__ */
|
|
377
|
-
/* @__PURE__ */
|
|
376
|
+
), X = ({ isChecked: r }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
|
|
377
|
+
/* @__PURE__ */ p("span", { className: "checkbox", children: [
|
|
378
378
|
/* @__PURE__ */ e(
|
|
379
379
|
"input",
|
|
380
380
|
{
|
|
@@ -397,12 +397,12 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
397
397
|
({
|
|
398
398
|
positionDropdown: r,
|
|
399
399
|
dropdownLists: c,
|
|
400
|
-
isComponentVisible:
|
|
401
|
-
searchAble:
|
|
400
|
+
isComponentVisible: s,
|
|
401
|
+
searchAble: d,
|
|
402
402
|
onSearch: a,
|
|
403
403
|
value: o,
|
|
404
404
|
handleChangeValue: v,
|
|
405
|
-
multiSelect:
|
|
405
|
+
multiSelect: l,
|
|
406
406
|
searchValue: $,
|
|
407
407
|
highlightedIndex: g
|
|
408
408
|
}, N) => {
|
|
@@ -412,17 +412,17 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
412
412
|
const n = m.current.getBoundingClientRect();
|
|
413
413
|
L(n.width);
|
|
414
414
|
}
|
|
415
|
-
}, [m,
|
|
415
|
+
}, [m, s]), 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: s ? /* @__PURE__ */ p(
|
|
419
419
|
"div",
|
|
420
420
|
{
|
|
421
421
|
className: "starasia-input-dropdown-lists-container",
|
|
422
422
|
onClick: (n) => n.stopPropagation(),
|
|
423
423
|
ref: N,
|
|
424
424
|
children: [
|
|
425
|
-
|
|
425
|
+
d ? /* @__PURE__ */ p(
|
|
426
426
|
"div",
|
|
427
427
|
{
|
|
428
428
|
className: "starasia-input-dropdown-container-dropdown-search",
|
|
@@ -452,11 +452,11 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
452
452
|
/* @__PURE__ */ e(
|
|
453
453
|
"div",
|
|
454
454
|
{
|
|
455
|
-
className: `starasia-input-dropdwon-item-container ${
|
|
455
|
+
className: `starasia-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
|
-
return /* @__PURE__ */
|
|
459
|
+
return /* @__PURE__ */ p(
|
|
460
460
|
"div",
|
|
461
461
|
{
|
|
462
462
|
className: `starasia-input-dropdwon-item ${k ? "active" : ""} ${h === g ? "highlight" : ""} ${n.disable ? "starasia-input-dropdwon-item-disable" : ""}`,
|
|
@@ -465,11 +465,11 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
465
465
|
},
|
|
466
466
|
onClick: () => v(n.label, n.value),
|
|
467
467
|
children: [
|
|
468
|
-
|
|
468
|
+
l ? /* @__PURE__ */ e("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ e(X, { isChecked: k }) }) : null,
|
|
469
469
|
n.icon ? /* @__PURE__ */ e("div", { children: M.cloneElement(n.icon, {
|
|
470
470
|
width: 16
|
|
471
471
|
}) }) : null,
|
|
472
|
-
/* @__PURE__ */
|
|
472
|
+
/* @__PURE__ */ p("div", { children: [
|
|
473
473
|
/* @__PURE__ */ e(
|
|
474
474
|
"p",
|
|
475
475
|
{
|
|
@@ -512,26 +512,26 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
|
|
|
512
512
|
children: r,
|
|
513
513
|
handleChangePosition: c
|
|
514
514
|
}) => {
|
|
515
|
-
const
|
|
515
|
+
const s = z(null);
|
|
516
516
|
b(() => {
|
|
517
517
|
var v;
|
|
518
518
|
const a = () => {
|
|
519
|
-
if (
|
|
520
|
-
let
|
|
521
|
-
for (;
|
|
522
|
-
|
|
523
|
-
|
|
519
|
+
if (s.current) {
|
|
520
|
+
let l = s.current.parentElement;
|
|
521
|
+
for (; l && !d(l); )
|
|
522
|
+
l = l.parentElement;
|
|
523
|
+
l && c();
|
|
524
524
|
}
|
|
525
525
|
};
|
|
526
|
-
let o = (v =
|
|
527
|
-
for (; o && !
|
|
526
|
+
let o = (v = s.current) == null ? void 0 : v.parentElement;
|
|
527
|
+
for (; o && !d(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:
|
|
533
|
+
const d = (a) => a && (a.scrollHeight > a.clientHeight || a.scrollWidth > a.clientWidth);
|
|
534
|
+
return /* @__PURE__ */ e("div", { ref: s, children: r });
|
|
535
535
|
}, F = "starasia-input-dropdown-styles", _ = (r) => {
|
|
536
536
|
if (!document.getElementById(F)) {
|
|
537
537
|
const c = document.createElement("style");
|
|
@@ -542,12 +542,12 @@ _(U);
|
|
|
542
542
|
const on = ({
|
|
543
543
|
dropdownLists: r,
|
|
544
544
|
onChange: c,
|
|
545
|
-
defaultValue:
|
|
546
|
-
size:
|
|
545
|
+
defaultValue: s,
|
|
546
|
+
size: d = "md",
|
|
547
547
|
multiSelect: a,
|
|
548
548
|
searchAble: o,
|
|
549
549
|
iconLeft: v,
|
|
550
|
-
placeholder:
|
|
550
|
+
placeholder: l,
|
|
551
551
|
onSearch: $,
|
|
552
552
|
error: g,
|
|
553
553
|
onBlur: N,
|
|
@@ -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__ */
|
|
574
|
+
JSON.stringify(x.current) === JSON.stringify(s) || (x.current = s, h(x.current || []));
|
|
575
|
+
}, [s]);
|
|
576
|
+
const S = () => n.length ? a ? n == null ? void 0 : n.map((t, i) => /* @__PURE__ */ p("div", { className: "starasia-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: "starasia-input-dropdown-placeholder", children:
|
|
584
|
+
] })) : /* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ e("p", { className: "starasia-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"));
|
|
@@ -625,10 +625,10 @@ const on = ({
|
|
|
625
625
|
}
|
|
626
626
|
}
|
|
627
627
|
};
|
|
628
|
-
return /* @__PURE__ */ e(Z, { handleChangePosition: E, children: /* @__PURE__ */
|
|
628
|
+
return /* @__PURE__ */ e(Z, { handleChangePosition: E, children: /* @__PURE__ */ p(
|
|
629
629
|
"div",
|
|
630
630
|
{
|
|
631
|
-
className: `starasia-input-dropdown-container ${L ? "disable" : ""} starasia-input-dropdown-size-${
|
|
631
|
+
className: `starasia-input-dropdown-container ${L ? "disable" : ""} starasia-input-dropdown-size-${d} ${C ? "active" : ""} ${g ? "error" : ""}`,
|
|
632
632
|
ref: W,
|
|
633
633
|
onClick: P,
|
|
634
634
|
onKeyDown: q,
|
|
@@ -636,12 +636,12 @@ const on = ({
|
|
|
636
636
|
onBlur: N,
|
|
637
637
|
onFocus: I,
|
|
638
638
|
children: [
|
|
639
|
-
/* @__PURE__ */
|
|
639
|
+
/* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
|
|
640
640
|
v ? /* @__PURE__ */ e(V, { children: M.cloneElement(v, {
|
|
641
|
-
width: O(
|
|
642
|
-
color: "#
|
|
641
|
+
width: O(d),
|
|
642
|
+
color: "var(--sa-color-gray-500, #8c8f97)",
|
|
643
643
|
style: {
|
|
644
|
-
color: "#
|
|
644
|
+
color: "var(--sa-color-gray-500, #8c8f97)"
|
|
645
645
|
}
|
|
646
646
|
}) }) : null,
|
|
647
647
|
/* @__PURE__ */ e(
|
|
@@ -655,8 +655,8 @@ const on = ({
|
|
|
655
655
|
Q,
|
|
656
656
|
{
|
|
657
657
|
strokeWidth: 2,
|
|
658
|
-
width: O(
|
|
659
|
-
style: { color: "#
|
|
658
|
+
width: O(d),
|
|
659
|
+
style: { color: "var(--sa-color-gray-500, #8c8f97)" }
|
|
660
660
|
}
|
|
661
661
|
)
|
|
662
662
|
] }),
|
|
@@ -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, s) => {
|
|
683
|
+
const d = r.length;
|
|
684
|
+
let a = c + s;
|
|
685
|
+
for (; a >= 0 && a < d; ) {
|
|
686
686
|
if (!r[a].disable)
|
|
687
687
|
return a;
|
|
688
|
-
a +=
|
|
688
|
+
a += s;
|
|
689
689
|
}
|
|
690
|
-
if (
|
|
691
|
-
for (let o = 0; o <
|
|
690
|
+
if (s === 1) {
|
|
691
|
+
for (let o = 0; o < d; o++)
|
|
692
692
|
if (!r[o].disable)
|
|
693
693
|
return o;
|
|
694
694
|
} else
|
|
695
|
-
for (let o =
|
|
695
|
+
for (let o = d - 1; o >= 0; o--)
|
|
696
696
|
if (!r[o].disable)
|
|
697
697
|
return o;
|
|
698
698
|
return -1;
|
package/dist/dropdown.umd.js
CHANGED
|
@@ -10,17 +10,17 @@
|
|
|
10
10
|
--sa-dropdown-brand-subtle: var(--sa-color-brand-50, #e6edf6);
|
|
11
11
|
--sa-dropdown-brand-secondary: var(--sa-color-brand-200, #99b3db);
|
|
12
12
|
--sa-dropdown-bg: var(--sa-background-primary, #ffffff);
|
|
13
|
-
--sa-dropdown-bg-disabled:
|
|
13
|
+
--sa-dropdown-bg-disabled: var(--sa-background-neutral, #f0f1f2);
|
|
14
14
|
--sa-dropdown-border: var(--sa-border, 1px);
|
|
15
|
-
--sa-dropdown-border-color:
|
|
15
|
+
--sa-dropdown-border-color: var(--sa-color-gray-alpha-a20, #78867f33);
|
|
16
16
|
--sa-dropdown-border-active: var(--sa-background-brand, #04254f);
|
|
17
17
|
--sa-dropdown-border-search: var(--sa-color-gray-300, #dddee1);
|
|
18
18
|
--sa-dropdown-border-error: var(--sa-color-error-500, #ff4d6d);
|
|
19
19
|
--sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
|
|
20
20
|
--sa-dropdown-placeholder: var(--sa-color-gray-400, #b7b9be);
|
|
21
|
-
--sa-dropdown-text-primary:
|
|
22
|
-
--sa-dropdown-text-secondary:
|
|
23
|
-
--sa-dropdown-shadow-list:
|
|
21
|
+
--sa-dropdown-text-primary: var(--sa-text-primary, #292a2e);
|
|
22
|
+
--sa-dropdown-text-secondary: var(--sa-text-subtle, #8c8f97);
|
|
23
|
+
--sa-dropdown-shadow-list: var(--sa-color-black-alpha-a8, #00000014);
|
|
24
24
|
--sa-dropdown-shadow-focus: 0px 0px 0px 2px var(--sa-color-brand-200, #99b3db);
|
|
25
25
|
--sa-dropdown-radius: var(--sa-radii-md, 0.5rem);
|
|
26
26
|
--sa-dropdown-radius-lg: var(--sa-radii-lg, 0.75rem);
|
|
@@ -311,4 +311,4 @@
|
|
|
311
311
|
height: 100%;
|
|
312
312
|
width: 100%;
|
|
313
313
|
}
|
|
314
|
-
`;function H(e){const[
|
|
314
|
+
`;function H(e){const[l,d]=t.useState(e),c=t.useRef(null),a=o=>{c.current&&!c.current.contains(o.target)&&d(!1)};return t.useEffect(()=>(document.addEventListener("click",a,!0),()=>{document.removeEventListener("click",a,!0)}),[]),{ref:c,isComponentVisible:l,setIsComponentVisible:d}}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:d,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,d]),t.useEffect(()=>{var r;f>=0&&g.current[f]&&((r=g.current[f])==null||r.scrollIntoView({block:"nearest"}))},[f]),n.jsx(n.Fragment,{children:d?n.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:r=>r.stopPropagation(),ref:$,children:[c?n.jsxs("div",{className:"starasia-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:`starasia-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:`starasia-input-dropdwon-item ${y?"active":""} ${b===f?"highlight":""} ${r.disable?"starasia-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:`starasia-input-dropdwon-item-text ${y?"active":null} ${r.disable?"starasia-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:`starasia-input-dropdwon-item-text-description ${y?"active":null} ${r.disable?"starasia-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 d=t.useRef(null);t.useEffect(()=>{var u;const a=()=>{if(d.current){let p=d.current.parentElement;for(;p&&!c(p);)p=p.parentElement;p&&l()}};let o=(u=d.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:d,children:e})},S="starasia-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:d,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(s=>!s)},W=(s,i)=>{if(!a)b([{label:s,value:i}]),l([{label:s,value:i}]),I(!1);else if(r==null?void 0:r.find(w=>w.value===i)){const w=[...r?r.filter(X=>X.value!==i):[]];b(w),l(w)}else{const w=[...r||[],{label:s,value:i}];b(w),l(w)}};t.useEffect(()=>{JSON.stringify(g.current)===JSON.stringify(d)||(g.current=d,b(g.current||[]))},[d]);const G=()=>r.length?a?r==null?void 0:r.map((s,i)=>n.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label},i),n.jsx(K,{onClick:()=>W(s.label,s.value)})]})):n.jsx("p",{style:{minWidth:"max-content"},children:r==null?void 0:r[0].label}):n.jsx("p",{className:"starasia-input-dropdown-placeholder",children:p}),E=()=>{if(L.current&&x.current){const s=window.innerHeight,i=L.current.getBoundingClientRect(),j=x.current.getBoundingClientRect(),w=i.bottom+j.height;x.current.style.left=`${i.left}px`,x.current.style.width=`${i.width}px`,w>=s-10?(x.current.style.top=`${i.top-j.height-5}px`,m("top")):(x.current.style.top=`${i.top+i.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=s=>{if(!C){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),I(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const i=A(e,v,1);i!==-1&&D(i);break}case"ArrowUp":{s.preventDefault();const i=A(e,v,-1);i!==-1&&D(i);break}case"Enter":{s.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:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${c} ${C?"active":""} ${f?"error":""}`,ref:L,onClick:U,onKeyDown:Q,tabIndex:0,onBlur:$,onFocus:z,children:[n.jsxs("div",{className:"starasia-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:"starasia-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,d)=>{const c=e.length;let a=l+d;for(;a>=0&&a<c;){if(!e[a].disable)return a;a+=d}if(d===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"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starasia/dropdown",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "dropdown component for starasia UI",
|
|
5
5
|
"author": "Prawito Hudoro",
|
|
6
6
|
"main": "dist/dropdown.umd.js",
|
|
@@ -12,10 +12,6 @@
|
|
|
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
|
-
},
|
|
19
15
|
"keywords": [],
|
|
20
16
|
"license": "ISC",
|
|
21
17
|
"type": "module",
|
|
@@ -37,5 +33,9 @@
|
|
|
37
33
|
"react-dom": "^18.2.0",
|
|
38
34
|
"@types/react": "^18.2.55",
|
|
39
35
|
"@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
|
+
}
|