@starasia/dropdown 2.0.2 → 3.1.0

package/dist/dropdown.es.js

@@ -1,6 +1,6 @@
-import { jsx as e, jsxs as p, Fragment as V } from "react/jsx-runtime";
-import M, { useState as R, useRef as z, useEffect as b, forwardRef as K } from "react";
-const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+import { jsx as r, jsxs as w, Fragment as M } from "react/jsx-runtime";
+import P, { useState as B, useRef as z, useEffect as v, forwardRef as G } from "react";
+const Q = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -28,28 +28,28 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   --sa-dropdown-radius-lg:     var(--sa-radii-lg, 0.75rem);
 }
 
-.starasia-input-dropdown-size-sm {
+.sa-input-dropdown-size-sm {
   --baseFont: var(--sa-font-size-sm, 12px);
   --height: var(--sa-h-8, 32px);
   --borderRadius: var(--sa-dropdown-radius);
   --paddingInline: var(--sa-spacing-sm, 8px);
 }
 
-.starasia-input-dropdown-size-md {
+.sa-input-dropdown-size-md {
   --baseFont: var(--sa-font-size-md, 14px);
   --height: 38px;
   --borderRadius: var(--sa-dropdown-radius);
   --paddingInline: var(--sa-spacing-3, 12px);
 }
 
-.starasia-input-dropdown-size-lg {
+.sa-input-dropdown-size-lg {
   --baseFont: var(--sa-font-size-lg, 16px);
   --height: var(--sa-h-12, 48px);
   --borderRadius: var(--sa-dropdown-radius-lg);
   --paddingInline: var(--sa-spacing-3, 12px);
 }
 
-.starasia-input-dropdown-container {
+.sa-input-dropdown-container {
   position: relative;
   min-height: var(--height);
   padding-inline: var(--paddingInline);
@@ -61,22 +61,22 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   font-size: var(--baseFont);
   cursor: pointer;
 }
-.starasia-input-dropdown-container.disable {
+.sa-input-dropdown-container.disable {
   background-color: var(--sa-dropdown-bg-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.starasia-input-dropdown-container.error {
+.sa-input-dropdown-container.error {
   border-color: var(--sa-dropdown-border-error) !important;
 }
-.starasia-input-dropdown-container.active {
+.sa-input-dropdown-container.active {
   border-color: var(--sa-dropdown-border-active);
   box-shadow: var(--sa-dropdown-shadow-focus);
   background-color: var(--sa-dropdown-bg);
 }
 
-.starasia-input-dropdown-preview-container {
+.sa-input-dropdown-preview-container {
   display: flex;
   flex-direction: row;
   gap: var(--sa-spacing-sm, 8px);
@@ -86,7 +86,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   overflow-y: hidden;
 }
 
-.starasia-input-dropdown-lists-container {
+.sa-input-dropdown-lists-container {
   /* position: absolute; */
   position: fixed;
   /* left: 0; */
@@ -109,16 +109,16 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   white-space: nowrap; */
 }
 
-.starasia-input-dropdown-lists-container-bottom {
+.sa-input-dropdown-lists-container-bottom {
   top: 100%;
   margin-top: var(--sa-spacing-xs, 4px);
 }
-.starasia-input-dropdown-lists-container-top {
+.sa-input-dropdown-lists-container-top {
   bottom: 100%;
   margin-bottom: var(--sa-spacing-xs, 4px);
 }
 
-.starasia-input-dropdown-container-dropdown-search {
+.sa-input-dropdown-container-dropdown-search {
   display: flex;
   align-items: center;
   height: var(--height);
@@ -138,14 +138,14 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   }
 }
 
-.starasia-input-dropdwon-item-container {
+.sa-input-dropdwon-item-container {
   display: flex;
   flex-direction: column;
   /* overflow: hidden; */
 
   /* gap: var(--sa-spacing-xs, 0.25rem); */
 }
-.starasia-input-dropdwon-item-container.multi {
+.sa-input-dropdwon-item-container.multi {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -154,7 +154,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   /* gap: var(--sa-spacing-xs, 0.25rem); */
 }
 
-.starasia-input-dropdwon-item {
+.sa-input-dropdwon-item {
   /* max-height: var(--height); */
   max-height: 58px;
   box-sizing: border-box;
@@ -169,28 +169,28 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   overflow: hidden;
 }
 
-.starasia-input-dropdwon-item:hover {
+.sa-input-dropdwon-item:hover {
   background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
 }
-.starasia-input-dropdwon-item.active {
+.sa-input-dropdwon-item.active {
   /* color: var(--sa-dropdown-brand); */
   /* border-radius: var(--borderRadius); */
   background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
   /* background: var(--sa-dropdown-brand-subtle); */
   /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
 }
-.starasia-input-dropdwon-item.highlight {
+.sa-input-dropdwon-item.highlight {
   background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 35%, transparent);
   outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-secondary) 40%, transparent);
   outline-offset: -2px;
 }
 
-.starasia-input-dropdwon-item-disable {
+.sa-input-dropdwon-item-disable {
   color: var(--sa-dropdown-color-disable) !important;
   pointer-events: none;
 }
 
-.starasia-input-dropdown-container-preview-item {
+.sa-input-dropdown-container-preview-item {
   flex: 1;
   display: flex;
   gap: var(--sa-spacing-xs, 4px);
@@ -200,7 +200,7 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   padding-block: 4px;
 }
 
-.starasia-input-dropdown-preview-item {
+.sa-input-dropdown-preview-item {
   border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-active);
   padding-inline: var(--paddingInline);
   border-radius: var(--borderRadius);
@@ -212,28 +212,28 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   align-items: center;
   gap: 2;
 }
-.starasia-input-dropdown-placeholder {
+.sa-input-dropdown-placeholder {
   color: var(--sa-dropdown-placeholder);
   font-weight: var(--sa-font-weight-normal, 300);
 }
 
-.starasia-input-dropdwon-item-text {
+.sa-input-dropdwon-item-text {
   color: var(--sa-dropdown-text-primary);
   /* font-size: 14px; */
   font-size: inherit;
   font-weight: 500;
 }
-.starasia-input-dropdwon-item-text.active {
+.sa-input-dropdwon-item-text.active {
   color: var(--sa-dropdown-brand);
 }
 
-.starasia-input-dropdwon-item-text-description {
+.sa-input-dropdwon-item-text-description {
   color: var(--sa-dropdown-text-secondary);
   /* font-size: 14px; */
   font-size: inherit;
   font-weight: 400;
 }
-.starasia-input-dropdwon-item-text-description.active {
+.sa-input-dropdwon-item-text-description.active {
   color: var(--sa-dropdown-brand);
 }
 
@@ -314,23 +314,23 @@ const U = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   width: 100%;
 }
 `;
-function G(r) {
-  const [c, s] = R(r), d = z(null), a = (o) => {
-    d.current && !d.current.contains(o.target) && s(!1);
+function T(n) {
+  const [l, i] = B(n), c = z(null), a = (o) => {
+    c.current && !c.current.contains(o.target) && i(!1);
   };
-  return b(() => (document.addEventListener("click", a, !0), () => {
+  return v(() => (document.addEventListener("click", a, !0), () => {
     document.removeEventListener("click", a, !0);
-  }), []), { ref: d, isComponentVisible: c, setIsComponentVisible: s };
+  }), []), { ref: c, isComponentVisible: l, setIsComponentVisible: i };
 }
-const Q = ({ ...r }) => /* @__PURE__ */ e(
+const X = ({ ...n }) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...r,
+    ...n,
     viewBox: "0 0 24 24",
     fill: "none",
     color: "var(--sa-color-gray-500, #8c8f97)",
-    children: /* @__PURE__ */ e(
+    children: /* @__PURE__ */ r(
       "path",
       {
         d: "M4 9L12 17L20 9",
@@ -341,15 +341,15 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
       }
     )
   }
-), T = ({ ...r }) => /* @__PURE__ */ p(
+), Y = ({ ...n }) => /* @__PURE__ */ w(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...r,
+    ...n,
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "circle",
         {
           cx: "9.80547",
@@ -361,7 +361,7 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ r(
         "path",
         {
           d: "M15.0153 15.4043L17.9519 18.3333",
@@ -373,19 +373,19 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
       )
     ]
   }
-), X = ({ isChecked: r }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
-  /* @__PURE__ */ p("span", { className: "checkbox", children: [
-    /* @__PURE__ */ e(
+), Z = ({ isChecked: n }) => /* @__PURE__ */ w("div", { className: "checkbox-wrapper-30", children: [
+  /* @__PURE__ */ w("span", { className: "checkbox", children: [
+    /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
         style: { pointerEvents: "none" },
-        checked: r
+        checked: n
       }
     ),
-    /* @__PURE__ */ e("svg", { children: /* @__PURE__ */ e("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
+    /* @__PURE__ */ r("svg", { children: /* @__PURE__ */ r("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
   ] }),
-  /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ e("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ e(
+  /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ r("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ r(
     "path",
     {
       fill: "none",
@@ -393,55 +393,55 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
       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"
     }
   ) }) })
-] }), Y = K(
+] }), _ = G(
   ({
-    positionDropdown: r,
-    dropdownLists: c,
-    isComponentVisible: s,
-    searchAble: d,
+    positionDropdown: n,
+    dropdownLists: l,
+    isComponentVisible: i,
+    searchAble: c,
     onSearch: a,
     value: o,
-    handleChangeValue: v,
-    multiSelect: l,
-    searchValue: $,
+    handleChangeValue: m,
+    multiSelect: p,
+    searchValue: I,
     highlightedIndex: g
-  }, N) => {
-    const [I, L] = R(0), m = z(null), x = z([]);
-    return b(() => {
-      if (m.current) {
-        const n = m.current.getBoundingClientRect();
-        L(n.width);
+  }, L) => {
+    const [$, D] = B(0), k = z(null), R = z([]);
+    return v(() => {
+      if (k.current) {
+        const e = k.current.getBoundingClientRect();
+        D(e.width);
       }
-    }, [m, s]), b(() => {
-      var n;
-      g >= 0 && x.current[g] && ((n = x.current[g]) == null || n.scrollIntoView({ block: "nearest" }));
-    }, [g]), /* @__PURE__ */ e(V, { children: s ? /* @__PURE__ */ p(
+    }, [k, i]), v(() => {
+      var e;
+      g >= 0 && R.current[g] && ((e = R.current[g]) == null || e.scrollIntoView({ block: "nearest" }));
+    }, [g]), /* @__PURE__ */ r(M, { children: i ? /* @__PURE__ */ w(
       "div",
       {
-        className: "starasia-input-dropdown-lists-container",
-        onClick: (n) => n.stopPropagation(),
-        ref: N,
+        className: "sa-input-dropdown-lists-container",
+        onClick: (e) => e.stopPropagation(),
+        ref: L,
         children: [
-          d ? /* @__PURE__ */ p(
+          c ? /* @__PURE__ */ w(
             "div",
             {
-              className: "starasia-input-dropdown-container-dropdown-search",
+              className: "sa-input-dropdown-container-dropdown-search",
               style: {
-                order: r == "bottom" ? 0 : 2,
+                order: n == "bottom" ? 0 : 2,
                 position: "sticky",
                 top: 0,
                 bottom: 0,
                 zIndex: 1
               },
               children: [
-                /* @__PURE__ */ e("div", { style: { display: "flex" }, children: /* @__PURE__ */ e(T, { strokeWidth: 2, width: 20 }) }),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ r("div", { style: { display: "flex" }, children: /* @__PURE__ */ r(Y, { strokeWidth: 2, width: 20 }) }),
+                /* @__PURE__ */ r(
                   "input",
                   {
-                    onChange: (n) => {
-                      a && a(n.target.value);
+                    onChange: (e) => {
+                      a && a(e.target.value);
                     },
-                    value: $,
+                    value: I,
                     autoFocus: !0,
                     style: { width: "100%" }
                   }
@@ -449,57 +449,57 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
               ]
             }
           ) : null,
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r(
             "div",
             {
-              className: `starasia-input-dropdwon-item-container ${l ? "multi" : ""}`,
-              ref: m,
-              children: c.map((n, h) => {
-                const k = !!(o != null && o.find((y) => y.value === n.value));
-                return /* @__PURE__ */ p(
+              className: `sa-input-dropdwon-item-container ${p ? "multi" : ""}`,
+              ref: k,
+              children: l.map((e, f) => {
+                const s = !!(o != null && o.find((h) => h.value === e.value));
+                return /* @__PURE__ */ w(
                   "div",
                   {
-                    className: `starasia-input-dropdwon-item ${k ? "active" : ""} ${h === g ? "highlight" : ""} ${n.disable ? "starasia-input-dropdwon-item-disable" : ""}`,
-                    ref: (y) => {
-                      x.current[h] = y;
+                    className: `sa-input-dropdwon-item ${s ? "active" : ""} ${f === g ? "highlight" : ""} ${e.disable ? "sa-input-dropdwon-item-disable" : ""}`,
+                    ref: (h) => {
+                      R.current[f] = h;
                     },
-                    onClick: () => v(n.label, n.value),
+                    onClick: () => m(e.label, e.value),
                     children: [
-                      l ? /* @__PURE__ */ e("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ e(X, { isChecked: k }) }) : null,
-                      n.icon ? /* @__PURE__ */ e("div", { children: M.cloneElement(n.icon, {
+                      p ? /* @__PURE__ */ r("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ r(Z, { isChecked: s }) }) : null,
+                      e.icon ? /* @__PURE__ */ r("div", { children: P.cloneElement(e.icon, {
                         width: 16
                       }) }) : null,
-                      /* @__PURE__ */ p("div", { children: [
-                        /* @__PURE__ */ e(
+                      /* @__PURE__ */ w("div", { children: [
+                        /* @__PURE__ */ r(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text ${k ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            className: `sa-input-dropdwon-item-text ${s ? "active" : null} ${e.disable ? "sa-input-dropdwon-item-disable" : null}`,
                             style: {
                               textWrap: "nowrap",
-                              width: `${I - 12}px`,
+                              width: `${$ - 12}px`,
                               overflow: "hidden",
                               textOverflow: "ellipsis"
                             },
-                            children: n.label
+                            children: e.label
                           }
                         ),
-                        n.description ? /* @__PURE__ */ e(
+                        e.description ? /* @__PURE__ */ r(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text-description ${k ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            className: `sa-input-dropdwon-item-text-description ${s ? "active" : null} ${e.disable ? "sa-input-dropdwon-item-disable" : null}`,
                             style: {
                               textWrap: "nowrap",
-                              width: `${I - 12}px`,
+                              width: `${$ - 12}px`,
                               overflow: "hidden",
                               textOverflow: "ellipsis"
                             },
-                            children: n.description
+                            children: e.description
                           }
                         ) : null
                       ] })
                     ]
                   },
-                  h
+                  f
                 );
               })
             }
@@ -508,202 +508,208 @@ const Q = ({ ...r }) => /* @__PURE__ */ e(
       }
     ) : null });
   }
-), Z = ({
-  children: r,
-  handleChangePosition: c
+), nn = ({
+  children: n,
+  handleChangePosition: l
 }) => {
-  const s = z(null);
-  b(() => {
-    var v;
+  const i = z(null);
+  v(() => {
+    var m;
     const a = () => {
-      if (s.current) {
-        let l = s.current.parentElement;
-        for (; l && !d(l); )
-          l = l.parentElement;
-        l && c();
+      if (i.current) {
+        let p = i.current.parentElement;
+        for (; p && !c(p); )
+          p = p.parentElement;
+        p && l();
       }
     };
-    let o = (v = s.current) == null ? void 0 : v.parentElement;
-    for (; o && !d(o); )
+    let o = (m = i.current) == null ? void 0 : m.parentElement;
+    for (; o && !c(o); )
       o = o.parentElement;
     return o && o.addEventListener("scroll", a), a(), () => {
       o && o.removeEventListener("scroll", a);
     };
   }, []);
-  const d = (a) => a && (a.scrollHeight > a.clientHeight || a.scrollWidth > a.clientWidth);
-  return /* @__PURE__ */ e("div", { ref: s, children: r });
-}, F = "starasia-input-dropdown-styles", _ = (r) => {
-  if (!document.getElementById(F)) {
-    const c = document.createElement("style");
-    c.id = F, c.textContent = r, document.head.appendChild(c);
+  const c = (a) => a && (a.scrollHeight > a.clientHeight || a.scrollWidth > a.clientWidth);
+  return /* @__PURE__ */ r("div", { ref: i, children: n });
+}, H = "sa-input-dropdown-styles", rn = (n) => {
+  if (!document.getElementById(H)) {
+    const l = document.createElement("style");
+    l.id = H, l.textContent = n, document.head.appendChild(l);
   }
 };
-_(U);
-const on = ({
-  dropdownLists: r,
-  onChange: c,
-  defaultValue: s,
-  size: d = "md",
-  multiSelect: a,
-  searchAble: o,
-  iconLeft: v,
-  placeholder: l,
-  onSearch: $,
-  error: g,
-  onBlur: N,
-  onFocus: I,
-  disable: L,
-  searchValue: m
+rn(Q);
+const tn = ({
+  dropdownLists: n,
+  onChange: l,
+  defaultValue: i,
+  value: c,
+  size: a = "md",
+  multiSelect: o,
+  searchAble: m,
+  iconLeft: p,
+  placeholder: I,
+  onSearch: g,
+  error: L,
+  onBlur: $,
+  onFocus: D,
+  disable: k,
+  searchValue: R
 }) => {
-  const x = z(), [n, h] = R([]), [k, y] = R(""), [u, D] = R(-1), f = z(null), { isComponentVisible: C, ref: W, setIsComponentVisible: B } = G(!1), P = () => {
-    B((t) => !t);
-  }, A = (t, i) => {
-    if (!a)
-      h([{ label: t, value: i }]), c([{ label: t, value: i }]), B(!1);
-    else if (n == null ? void 0 : n.find((w) => w.value === i)) {
-      const w = [
-        ...n ? n.filter((J) => J.value !== i) : []
-      ];
-      h(w), c(w);
-    } else {
-      const w = [...n || [], { label: t, value: i }];
-      h(w), c(w);
+  const e = c !== void 0, f = z(), [s, h] = B(
+    e ? c || [] : i || []
+  ), [V, F] = B(""), [b, W] = B(-1), x = z(null), { isComponentVisible: y, ref: A, setIsComponentVisible: N } = T(!1), q = () => {
+    N((t) => !t);
+  }, j = (t, d) => {
+    if (o)
+      if (s == null ? void 0 : s.find((u) => u.value === d)) {
+        const u = s.filter((U) => U.value !== d);
+        e || h(u), l(u);
+      } else {
+        const u = [...s, { label: t, value: d }];
+        e || h(u), l(u);
+      }
+    else {
+      const E = [{ label: t, value: d }];
+      e || h(E), l(E), N(!1);
     }
   };
-  b(() => {
-    JSON.stringify(x.current) === JSON.stringify(s) || (x.current = s, h(x.current || []));
-  }, [s]);
-  const S = () => n.length ? a ? n == null ? void 0 : n.map((t, i) => /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-item", children: [
-    /* @__PURE__ */ e("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }, i),
-    /* @__PURE__ */ e(
-      nn,
+  v(() => {
+    e && h(c || []);
+  }, [c]), v(() => {
+    e || JSON.stringify(f.current) === JSON.stringify(i) || (f.current = i, h(f.current || []));
+  }, [i]);
+  const J = () => s.length ? o ? s == null ? void 0 : s.map((t, d) => /* @__PURE__ */ w("div", { className: "sa-input-dropdown-preview-item", children: [
+    /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }, d),
+    /* @__PURE__ */ r(
+      on,
       {
-        onClick: () => A(t.label, t.value)
+        onClick: () => j(t.label, t.value)
       }
     )
-  ] })) : /* @__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 = () => {
-    if (W.current && f.current) {
-      const t = window.innerHeight, i = W.current.getBoundingClientRect(), j = f.current.getBoundingClientRect(), w = i.bottom + j.height;
-      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"));
+  ] })) : /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: s == null ? void 0 : s[0].label }) : /* @__PURE__ */ r("p", { className: "sa-input-dropdown-placeholder", children: I }), C = () => {
+    if (A.current && x.current) {
+      const t = window.innerHeight, d = A.current.getBoundingClientRect(), E = x.current.getBoundingClientRect(), u = d.bottom + E.height;
+      x.current.style.left = `${d.left}px`, x.current.style.width = `${d.width}px`, u >= t - 10 ? (x.current.style.top = `${d.top - E.height - 5}px`, F("top")) : (x.current.style.top = `${d.top + d.height}px`, F("bottom"));
     }
   };
-  b(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
-    window.removeEventListener("scroll", E), window.removeEventListener("resize", E);
-  }), []), b(() => {
-    E();
-  }, [C]), b(() => {
-    C || D(-1);
-  }, [C]);
-  const q = (t) => {
-    if (!C) {
-      (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), B(!0));
+  v(() => (window.addEventListener("scroll", C), window.addEventListener("resize", C), () => {
+    window.removeEventListener("scroll", C), window.removeEventListener("resize", C);
+  }), []), v(() => {
+    C();
+  }, [y]), v(() => {
+    y || W(-1);
+  }, [y]);
+  const K = (t) => {
+    if (!y) {
+      (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), N(!0));
       return;
     }
     switch (t.key) {
       case "ArrowDown": {
         t.preventDefault();
-        const i = H(r, u, 1);
-        i !== -1 && D(i);
+        const d = O(n, b, 1);
+        d !== -1 && W(d);
         break;
       }
       case "ArrowUp": {
         t.preventDefault();
-        const i = H(r, u, -1);
-        i !== -1 && D(i);
+        const d = O(n, b, -1);
+        d !== -1 && W(d);
         break;
       }
       case "Enter": {
-        t.preventDefault(), u >= 0 && r[u] && !r[u].disable && A(
-          r[u].label,
-          r[u].value
+        t.preventDefault(), b >= 0 && n[b] && !n[b].disable && j(
+          n[b].label,
+          n[b].value
         );
         break;
       }
       case "Escape": {
-        B(!1);
+        N(!1);
         break;
       }
     }
   };
-  return /* @__PURE__ */ e(Z, { handleChangePosition: E, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ r(nn, { handleChangePosition: C, children: /* @__PURE__ */ w(
     "div",
     {
-      className: `starasia-input-dropdown-container ${L ? "disable" : ""} starasia-input-dropdown-size-${d} ${C ? "active" : ""} ${g ? "error" : ""}`,
-      ref: W,
-      onClick: P,
-      onKeyDown: q,
+      className: `sa-input-dropdown-container ${k ? "disable" : ""} sa-input-dropdown-size-${a} ${y ? "active" : ""} ${L ? "error" : ""}`,
+      ref: A,
+      onClick: q,
+      onKeyDown: K,
       tabIndex: 0,
-      onBlur: N,
-      onFocus: I,
+      onBlur: $,
+      onFocus: D,
       children: [
-        /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
-          v ? /* @__PURE__ */ e(V, { children: M.cloneElement(v, {
-            width: O(d),
+        /* @__PURE__ */ w("div", { className: "sa-input-dropdown-preview-container", children: [
+          p ? /* @__PURE__ */ r(M, { children: P.cloneElement(p, {
+            width: S(a),
             color: "var(--sa-color-gray-500, #8c8f97)",
             style: {
               color: "var(--sa-color-gray-500, #8c8f97)"
             }
           }) }) : null,
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r(
             "div",
             {
-              className: "starasia-input-dropdown-container-preview-item",
-              children: S()
+              className: "sa-input-dropdown-container-preview-item",
+              children: J()
             }
           ),
-          /* @__PURE__ */ e(
-            Q,
+          /* @__PURE__ */ r(
+            X,
             {
               strokeWidth: 2,
-              width: O(d),
+              width: S(a),
               style: { color: "var(--sa-color-gray-500, #8c8f97)" }
             }
           )
         ] }),
-        /* @__PURE__ */ e(
-          Y,
+        /* @__PURE__ */ r(
+          _,
           {
-            dropdownLists: r,
-            handleChangeValue: A,
-            isComponentVisible: C,
-            positionDropdown: k,
-            searchAble: !!o,
-            value: n,
-            onSearch: $,
-            ref: f,
-            multiSelect: a,
-            searchValue: m,
-            highlightedIndex: u
+            dropdownLists: n,
+            handleChangeValue: j,
+            isComponentVisible: y,
+            positionDropdown: V,
+            searchAble: !!m,
+            value: s,
+            onSearch: g,
+            ref: x,
+            multiSelect: o,
+            searchValue: R,
+            highlightedIndex: b
           }
         )
       ]
     }
   ) });
-}, H = (r, c, s) => {
-  const d = r.length;
-  let a = c + s;
-  for (; a >= 0 && a < d; ) {
-    if (!r[a].disable)
+}, O = (n, l, i) => {
+  const c = n.length;
+  let a = l + i;
+  for (; a >= 0 && a < c; ) {
+    if (!n[a].disable)
       return a;
-    a += s;
+    a += i;
   }
-  if (s === 1) {
-    for (let o = 0; o < d; o++)
-      if (!r[o].disable)
+  if (i === 1) {
+    for (let o = 0; o < c; o++)
+      if (!n[o].disable)
         return o;
   } else
-    for (let o = d - 1; o >= 0; o--)
-      if (!r[o].disable)
+    for (let o = c - 1; o >= 0; o--)
+      if (!n[o].disable)
         return o;
   return -1;
-}, O = (r) => {
-  if (r === "sm")
+}, S = (n) => {
+  if (n === "sm")
     return 16;
-  if (r === "md")
+  if (n === "md")
     return 16;
-  if (r === "lg")
+  if (n === "lg")
     return 20;
-}, nn = (r) => /* @__PURE__ */ e(
+}, on = (n) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -711,8 +717,8 @@ const on = ({
     height: "18",
     viewBox: "0 0 18 18",
     fill: "none",
-    ...r,
-    children: /* @__PURE__ */ e(
+    ...n,
+    children: /* @__PURE__ */ r(
       "path",
       {
         d: "M12 6L6 12M6.00001 6L12 12",
@@ -725,5 +731,5 @@ const on = ({
   }
 );
 export {
-  on as Dropdown
+  tn as Dropdown
 };

package/dist/dropdown.umd.js

@@ -1,4 +1,4 @@
-(function(h,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(h=typeof globalThis<"u"?globalThis:h||self,n(h.Dropdown={},h.jsxRuntime,h.React))})(this,function(h,n,t){"use strict";const O=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+(function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u.Dropdown={},u.jsxRuntime,u.React))})(this,function(u,n,d){"use strict";const H=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -26,28 +26,28 @@
   --sa-dropdown-radius-lg:     var(--sa-radii-lg, 0.75rem);
 }
 
-.starasia-input-dropdown-size-sm {
+.sa-input-dropdown-size-sm {
   --baseFont: var(--sa-font-size-sm, 12px);
   --height: var(--sa-h-8, 32px);
   --borderRadius: var(--sa-dropdown-radius);
   --paddingInline: var(--sa-spacing-sm, 8px);
 }
 
-.starasia-input-dropdown-size-md {
+.sa-input-dropdown-size-md {
   --baseFont: var(--sa-font-size-md, 14px);
   --height: 38px;
   --borderRadius: var(--sa-dropdown-radius);
   --paddingInline: var(--sa-spacing-3, 12px);
 }
 
-.starasia-input-dropdown-size-lg {
+.sa-input-dropdown-size-lg {
   --baseFont: var(--sa-font-size-lg, 16px);
   --height: var(--sa-h-12, 48px);
   --borderRadius: var(--sa-dropdown-radius-lg);
   --paddingInline: var(--sa-spacing-3, 12px);
 }
 
-.starasia-input-dropdown-container {
+.sa-input-dropdown-container {
   position: relative;
   min-height: var(--height);
   padding-inline: var(--paddingInline);
@@ -59,22 +59,22 @@
   font-size: var(--baseFont);
   cursor: pointer;
 }
-.starasia-input-dropdown-container.disable {
+.sa-input-dropdown-container.disable {
   background-color: var(--sa-dropdown-bg-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.starasia-input-dropdown-container.error {
+.sa-input-dropdown-container.error {
   border-color: var(--sa-dropdown-border-error) !important;
 }
-.starasia-input-dropdown-container.active {
+.sa-input-dropdown-container.active {
   border-color: var(--sa-dropdown-border-active);
   box-shadow: var(--sa-dropdown-shadow-focus);
   background-color: var(--sa-dropdown-bg);
 }
 
-.starasia-input-dropdown-preview-container {
+.sa-input-dropdown-preview-container {
   display: flex;
   flex-direction: row;
   gap: var(--sa-spacing-sm, 8px);
@@ -84,7 +84,7 @@
   overflow-y: hidden;
 }
 
-.starasia-input-dropdown-lists-container {
+.sa-input-dropdown-lists-container {
   /* position: absolute; */
   position: fixed;
   /* left: 0; */
@@ -107,16 +107,16 @@
   white-space: nowrap; */
 }
 
-.starasia-input-dropdown-lists-container-bottom {
+.sa-input-dropdown-lists-container-bottom {
   top: 100%;
   margin-top: var(--sa-spacing-xs, 4px);
 }
-.starasia-input-dropdown-lists-container-top {
+.sa-input-dropdown-lists-container-top {
   bottom: 100%;
   margin-bottom: var(--sa-spacing-xs, 4px);
 }
 
-.starasia-input-dropdown-container-dropdown-search {
+.sa-input-dropdown-container-dropdown-search {
   display: flex;
   align-items: center;
   height: var(--height);
@@ -136,14 +136,14 @@
   }
 }
 
-.starasia-input-dropdwon-item-container {
+.sa-input-dropdwon-item-container {
   display: flex;
   flex-direction: column;
   /* overflow: hidden; */
 
   /* gap: var(--sa-spacing-xs, 0.25rem); */
 }
-.starasia-input-dropdwon-item-container.multi {
+.sa-input-dropdwon-item-container.multi {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -152,7 +152,7 @@
   /* gap: var(--sa-spacing-xs, 0.25rem); */
 }
 
-.starasia-input-dropdwon-item {
+.sa-input-dropdwon-item {
   /* max-height: var(--height); */
   max-height: 58px;
   box-sizing: border-box;
@@ -167,28 +167,28 @@
   overflow: hidden;
 }
 
-.starasia-input-dropdwon-item:hover {
+.sa-input-dropdwon-item:hover {
   background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
 }
-.starasia-input-dropdwon-item.active {
+.sa-input-dropdwon-item.active {
   /* color: var(--sa-dropdown-brand); */
   /* border-radius: var(--borderRadius); */
   background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 21%, transparent);
   /* background: var(--sa-dropdown-brand-subtle); */
   /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
 }
-.starasia-input-dropdwon-item.highlight {
+.sa-input-dropdwon-item.highlight {
   background-color: color-mix(in srgb, var(--sa-dropdown-brand-secondary) 35%, transparent);
   outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-secondary) 40%, transparent);
   outline-offset: -2px;
 }
 
-.starasia-input-dropdwon-item-disable {
+.sa-input-dropdwon-item-disable {
   color: var(--sa-dropdown-color-disable) !important;
   pointer-events: none;
 }
 
-.starasia-input-dropdown-container-preview-item {
+.sa-input-dropdown-container-preview-item {
   flex: 1;
   display: flex;
   gap: var(--sa-spacing-xs, 4px);
@@ -198,7 +198,7 @@
   padding-block: 4px;
 }
 
-.starasia-input-dropdown-preview-item {
+.sa-input-dropdown-preview-item {
   border: var(--sa-dropdown-border) solid var(--sa-dropdown-border-active);
   padding-inline: var(--paddingInline);
   border-radius: var(--borderRadius);
@@ -210,28 +210,28 @@
   align-items: center;
   gap: 2;
 }
-.starasia-input-dropdown-placeholder {
+.sa-input-dropdown-placeholder {
   color: var(--sa-dropdown-placeholder);
   font-weight: var(--sa-font-weight-normal, 300);
 }
 
-.starasia-input-dropdwon-item-text {
+.sa-input-dropdwon-item-text {
   color: var(--sa-dropdown-text-primary);
   /* font-size: 14px; */
   font-size: inherit;
   font-weight: 500;
 }
-.starasia-input-dropdwon-item-text.active {
+.sa-input-dropdwon-item-text.active {
   color: var(--sa-dropdown-brand);
 }
 
-.starasia-input-dropdwon-item-text-description {
+.sa-input-dropdwon-item-text-description {
   color: var(--sa-dropdown-text-secondary);
   /* font-size: 14px; */
   font-size: inherit;
   font-weight: 400;
 }
-.starasia-input-dropdwon-item-text-description.active {
+.sa-input-dropdwon-item-text-description.active {
   color: var(--sa-dropdown-brand);
 }
 
@@ -311,4 +311,4 @@
   height: 100%;
   width: 100%;
 }
-`;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"})});
+`;function M(r){const[p,s]=d.useState(r),l=d.useRef(null),a=o=>{l.current&&!l.current.contains(o.target)&&s(!1)};return d.useEffect(()=>(document.addEventListener("click",a,!0),()=>{document.removeEventListener("click",a,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:s}}const P=({...r})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...r,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})}),q=({...r})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...r,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"})]}),T=({isChecked:r})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:r}),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"})})})]}),V=d.forwardRef(({positionDropdown:r,dropdownLists:p,isComponentVisible:s,searchAble:l,onSearch:a,value:o,handleChangeValue:k,multiSelect:w,searchValue:N,highlightedIndex:f},D)=>{const[B,I]=d.useState(0),y=d.useRef(null),z=d.useRef([]);return d.useEffect(()=>{if(y.current){const e=y.current.getBoundingClientRect();I(e.width)}},[y,s]),d.useEffect(()=>{var e;f>=0&&z.current[f]&&((e=z.current[f])==null||e.scrollIntoView({block:"nearest"}))},[f]),n.jsx(n.Fragment,{children:s?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:e=>e.stopPropagation(),ref:D,children:[l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",style:{order:r=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[n.jsx("div",{style:{display:"flex"},children:n.jsx(q,{strokeWidth:2,width:20})}),n.jsx("input",{onChange:e=>{a&&a(e.target.value)},value:N,autoFocus:!0,style:{width:"100%"}})]}):null,n.jsx("div",{className:`sa-input-dropdwon-item-container ${w?"multi":""}`,ref:y,children:p.map((e,g)=>{const c=!!(o!=null&&o.find(h=>h.value===e.value));return n.jsxs("div",{className:`sa-input-dropdwon-item ${c?"active":""} ${g===f?"highlight":""} ${e.disable?"sa-input-dropdwon-item-disable":""}`,ref:h=>{z.current[g]=h},onClick:()=>k(e.label,e.value),children:[w?n.jsx("div",{style:{marginRight:"8px"},children:n.jsx(T,{isChecked:c})}):null,e.icon?n.jsx("div",{children:d.cloneElement(e.icon,{width:16})}):null,n.jsxs("div",{children:[n.jsx("p",{className:`sa-input-dropdwon-item-text ${c?"active":null} ${e.disable?"sa-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${B-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:e.label}),e.description?n.jsx("p",{className:`sa-input-dropdwon-item-text-description ${c?"active":null} ${e.disable?"sa-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${B-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:e.description}):null]})]},g)})})]}):null})}),J=({children:r,handleChangePosition:p})=>{const s=d.useRef(null);d.useEffect(()=>{var k;const a=()=>{if(s.current){let w=s.current.parentElement;for(;w&&!l(w);)w=w.parentElement;w&&p()}};let o=(k=s.current)==null?void 0:k.parentElement;for(;o&&!l(o);)o=o.parentElement;return o&&o.addEventListener("scroll",a),a(),()=>{o&&o.removeEventListener("scroll",a)}},[]);const l=a=>a&&(a.scrollHeight>a.clientHeight||a.scrollWidth>a.clientWidth);return n.jsx("div",{ref:s,children:r})},j="sa-input-dropdown-styles";(r=>{if(!document.getElementById(j)){const p=document.createElement("style");p.id=j,p.textContent=r,document.head.appendChild(p)}})(H);const K=({dropdownLists:r,onChange:p,defaultValue:s,value:l,size:a="md",multiSelect:o,searchAble:k,iconLeft:w,placeholder:N,onSearch:f,error:D,onBlur:B,onFocus:I,disable:y,searchValue:z})=>{const e=l!==void 0,g=d.useRef(),[c,h]=d.useState(e?l||[]:s||[]),[G,O]=d.useState(""),[b,L]=d.useState(-1),x=d.useRef(null),{isComponentVisible:m,ref:W,setIsComponentVisible:$}=M(!1),Q=()=>{$(t=>!t)},S=(t,i)=>{if(o)if(c==null?void 0:c.find(v=>v.value===i)){const v=c.filter(Z=>Z.value!==i);e||h(v),p(v)}else{const v=[...c,{label:t,value:i}];e||h(v),p(v)}else{const E=[{label:t,value:i}];e||h(E),p(E),$(!1)}};d.useEffect(()=>{e&&h(l||[])},[l]),d.useEffect(()=>{e||JSON.stringify(g.current)===JSON.stringify(s)||(g.current=s,h(g.current||[]))},[s]);const X=()=>c.length?o?c==null?void 0:c.map((t,i)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:t==null?void 0:t.label},i),n.jsx(U,{onClick:()=>S(t.label,t.value)})]})):n.jsx("p",{style:{minWidth:"max-content"},children:c==null?void 0:c[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:N}),C=()=>{if(W.current&&x.current){const t=window.innerHeight,i=W.current.getBoundingClientRect(),E=x.current.getBoundingClientRect(),v=i.bottom+E.height;x.current.style.left=`${i.left}px`,x.current.style.width=`${i.width}px`,v>=t-10?(x.current.style.top=`${i.top-E.height-5}px`,O("top")):(x.current.style.top=`${i.top+i.height}px`,O("bottom"))}};d.useEffect(()=>(window.addEventListener("scroll",C),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}),[]),d.useEffect(()=>{C()},[m]),d.useEffect(()=>{m||L(-1)},[m]);const Y=t=>{if(!m){(t.key==="ArrowDown"||t.key==="Enter")&&(t.preventDefault(),$(!0));return}switch(t.key){case"ArrowDown":{t.preventDefault();const i=A(r,b,1);i!==-1&&L(i);break}case"ArrowUp":{t.preventDefault();const i=A(r,b,-1);i!==-1&&L(i);break}case"Enter":{t.preventDefault(),b>=0&&r[b]&&!r[b].disable&&S(r[b].label,r[b].value);break}case"Escape":{$(!1);break}}};return n.jsx(J,{handleChangePosition:C,children:n.jsxs("div",{className:`sa-input-dropdown-container ${y?"disable":""} sa-input-dropdown-size-${a} ${m?"active":""} ${D?"error":""}`,ref:W,onClick:Q,onKeyDown:Y,tabIndex:0,onBlur:B,onFocus:I,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[w?n.jsx(n.Fragment,{children:d.cloneElement(w,{width:F(a),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:X()}),n.jsx(P,{strokeWidth:2,width:F(a),style:{color:"var(--sa-color-gray-500, #8c8f97)"}})]}),n.jsx(V,{dropdownLists:r,handleChangeValue:S,isComponentVisible:m,positionDropdown:G,searchAble:!!k,value:c,onSearch:f,ref:x,multiSelect:o,searchValue:z,highlightedIndex:b})]})})},A=(r,p,s)=>{const l=r.length;let a=p+s;for(;a>=0&&a<l;){if(!r[a].disable)return a;a+=s}if(s===1){for(let o=0;o<l;o++)if(!r[o].disable)return o}else for(let o=l-1;o>=0;o--)if(!r[o].disable)return o;return-1},F=r=>{if(r==="sm")return 16;if(r==="md")return 16;if(r==="lg")return 20},U=r=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...r,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});u.Dropdown=K,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/dist/interface.d.ts

@@ -16,6 +16,10 @@ export interface IDropdown {
         label: string;
         value: string;
     }[];
+    value?: {
+        label: string;
+        value: string;
+    }[];
     size?: "sm" | "md" | "lg";
     error?: boolean;
     multiSelect?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/dropdown",
-  "version": "2.0.2",
+  "version": "3.1.0",
   "description": "dropdown component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/dropdown.umd.js",