@starasia/dropdown 1.0.5 → 1.0.7

package/dist/DropdownList.d.ts

@@ -13,6 +13,7 @@ interface IProps {
     handleChangeValue: (label: string, values: string) => void;
     multiSelect: boolean | undefined;
     searchValue?: string;
+    highlightedIndex: number;
 }
 declare const DropdownList: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
 export default DropdownList;

package/dist/dropdown.es.js

@@ -1,6 +1,6 @@
-import { jsx as r, jsxs as l, Fragment as q } from "react/jsx-runtime";
-import F, { useState as y, useRef as k, useEffect as b, forwardRef as M } from "react";
-const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+import { jsx as a, jsxs as p, Fragment as H } from "react/jsx-runtime";
+import O, { 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");
 * {
   margin: 0;
   padding: 0;
@@ -10,67 +10,77 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
 :root {
   /* color */
   /* brand */
-  --starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default);
-  --starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default);
-  --starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
-  --starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
-  --starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
+  --starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
+  --starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
+  --starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
+  --starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
+  --starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
   /* gray */
   --starasia-ui-dropdown-color-primary-gray: var(
     --starasia-ui-color-gray-700,
-    #374151
+    rgba(55, 65, 81, 1)
   );
   --starasia-ui-dropdown-color-secondary-gray: var(
     --starasia-ui-color-gray-500,
-    #6b7280
+    rgba(107, 114, 128, 1)
   );
   --starasia-ui-dropdown-color-tertiary-gray: var(
     --starasia-ui-color-gray-300,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
   --starasia-ui-dropdown-color-quaternary-gray: var(
     --starasia-ui-color-gray-100,
-    #f3f4f6
+    rgba(243, 244, 246, 1)
   );
   --starasia-ui-dropdown-color-quinary-gray: var(
     --starasia-ui-color-gray-50,
-    #f9fafb
+    rgba(249, 250, 251, 1)
   );
   /* bg color */
   --starasia-ui-dropdown-background-color-primary: var(
     --starasia-ui-dropdown-color-secondary-blue,
-    #3b82f6
+    rgba(59, 130, 246, 1)
   );
   --starasia-ui-dropdown-background-color-secondary: var(
     --starasia-ui-dropdown-color-quinary-blue,
-    #eff6ff
+    rgba(239, 246, 255, 1)
   );
 
   /* disalble color */
   --starasia-ui-dropdown-color-disable: var(
     --starasia-ui-dropdown-color-tertiary-gray,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
 
   /* border color */
-  --starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default);
+  --starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
   --starasia-ui-dropdown-border-color-secondary: var(
     --starasia-ui-color-gray-300,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
   --starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
 
   --starasia-ui-dropdown-color-secondary-red: var(
     --starasia-ui-color-red-500,
-    #ef4444
+    rgba(239, 68, 68, 1)
   );
 
   /* plachoder color */
   --starasia-ui-dropdown-placholder-color: var(
     --starasia-ui-color-gray-200,
-    #c9cecc
+    rgba(201, 206, 204, 1)
   );
 
+  /* white */
+  --starasia-ui-dropdown-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
+  /* disabled bg */
+  --starasia-ui-dropdown-color-disabled-bg: rgba(242, 243, 242, 1);
+  /* text colors */
+  --starasia-ui-dropdown-color-text-primary: rgba(24, 26, 25, 1);
+  --starasia-ui-dropdown-color-text-secondary: rgba(120, 134, 127, 1);
+  /* shadow */
+  --starasia-ui-dropdown-box-shadow-list: rgba(0, 0, 0, 0.08);
+
   /* border width */
   --starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
 
@@ -79,7 +89,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   --starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
 
   /* shadow */
-  --starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.2);
+  --starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.2);
 
   /* below is for size,above is */
   --starasia-ui-dropdown-fontWeight-normal: var(
@@ -130,14 +140,14 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   display: flex;
   align-items: center;
   border: var(--starasia-ui-dropdown-border-width) solid
-    rgba(120, 134, 127, 0.2);
+    var(--starasia-ui-dropdown-border-color-tertiary);
   border-radius: var(--borderRadius);
-  background-color: white;
+  background-color: var(--starasia-ui-dropdown-color-white);
   font-size: var(--baseFont);
   cursor: pointer;
 }
 .starasia-input-dropdown-container.disable {
-  background-color: #f2f3f2;
+  background-color: var(--starasia-ui-dropdown-color-disabled-bg);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -148,7 +158,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
 .starasia-input-dropdown-container.active {
   border-color: var(--starasia-ui-dropdown-border-color-primary);
   box-shadow: var(--starasia-ui-dropdown-box-shadow);
-  background-color: white;
+  background-color: var(--starasia-ui-dropdown-color-white);
 }
 
 .starasia-input-dropdown-preview-container {
@@ -169,8 +179,8 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   border: var(--starasia-ui-dropdown-border-width) solid
     var(--starasia-ui-dropdown-border-color-tertiary);
   border-radius: var(--borderRadius);
-  background-color: #fffeff;
-  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.08);
+  background-color: var(--starasia-ui-dropdown-color-white);
+  box-shadow: 0px 8px 12px 0px var(--starasia-ui-dropdown-box-shadow-list);
   max-height: 312px;
   overflow-y: auto;
   z-index: 999;
@@ -205,7 +215,7 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   border-radius: var(--borderRadius);
   gap: var(--starasia-ui-dropdown-spacing-sm);
   padding-inline: var(--paddingInline);
-  background: white;
+  background: var(--starasia-ui-dropdown-color-white);
   & input {
     flex: 1;
     outline: none;
@@ -247,15 +257,20 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
 }
 
 .starasia-input-dropdwon-item:hover {
-  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
+  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
 }
 .starasia-input-dropdwon-item.active {
   /* color: var(--starasia-ui-dropdown-background-color-primary); */
   /* border-radius: var(--borderRadius); */
-  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
+  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
   /* background: var(--starasia-ui-dropdown-background-color-secondary); */
   /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
 }
+.starasia-input-dropdwon-item.highlight {
+  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.35);
+  outline: 2px solid rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.4);
+  outline-offset: -2px;
+}
 
 .starasia-input-dropdwon-item-disable {
   color: var(--starasia-ui-dropdown-color-disable) !important;
@@ -291,30 +306,30 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
 }
 
 .starasia-input-dropdwon-item-text {
-  color: #181a19;
+  color: var(--starasia-ui-dropdown-color-text-primary);
   /* font-size: 14px; */
   font-size: inherit;
   font-weight: 500;
 }
 .starasia-input-dropdwon-item-text.active {
-  color: var(--starasia-ui-brand-primary-default);
+  color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
 }
 
 .starasia-input-dropdwon-item-text-description {
-  color: #78867f;
+  color: var(--starasia-ui-dropdown-color-text-secondary);
   /* font-size: 14px; */
   font-size: inherit;
   font-weight: 400;
 }
 .starasia-input-dropdwon-item-text-description.active {
-  color: var(--starasia-ui-brand-primary-default);
+  color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
 }
 
 /* for checkbox */
 .checkbox-wrapper-30 .checkbox {
   --bg: #fff;
   --brdr: #d1d6ee;
-  --brdr-actv: var(--starasia-ui-brand-primary-default);
+  --brdr-actv: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
   --brdr-hovr: #bbc1e1;
   --dur: calc((var(--size, 2) / 2) * 0.6s);
   display: inline-block;
@@ -387,23 +402,23 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   width: 100%;
 }
 `;
-function V(a) {
-  const [i, t] = y(a), c = k(null), o = (e) => {
-    c.current && !c.current.contains(e.target) && t(!1);
+function G(n) {
+  const [c, s] = R(n), d = z(null), i = (o) => {
+    d.current && !d.current.contains(o.target) && s(!1);
   };
-  return b(() => (document.addEventListener("click", o, !0), () => {
-    document.removeEventListener("click", o, !0);
-  }), []), { ref: c, isComponentVisible: i, setIsComponentVisible: t };
+  return b(() => (document.addEventListener("click", i, !0), () => {
+    document.removeEventListener("click", i, !0);
+  }), []), { ref: d, isComponentVisible: c, setIsComponentVisible: s };
 }
-const J = ({ ...a }) => /* @__PURE__ */ r(
+const Q = ({ ...n }) => /* @__PURE__ */ a(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...a,
+    ...n,
     viewBox: "0 0 24 24",
     fill: "none",
     color: "#939E99",
-    children: /* @__PURE__ */ r(
+    children: /* @__PURE__ */ a(
       "path",
       {
         d: "M4 9L12 17L20 9",
@@ -414,15 +429,15 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
       }
     )
   }
-), G = ({ ...a }) => /* @__PURE__ */ l(
+), T = ({ ...n }) => /* @__PURE__ */ p(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...a,
+    ...n,
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "circle",
         {
           cx: "9.80547",
@@ -434,7 +449,7 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "path",
         {
           d: "M15.0153 15.4043L17.9519 18.3333",
@@ -446,19 +461,19 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
       )
     ]
   }
-), K = ({ isChecked: a }) => /* @__PURE__ */ l("div", { className: "checkbox-wrapper-30", children: [
-  /* @__PURE__ */ l("span", { className: "checkbox", children: [
-    /* @__PURE__ */ r(
+), X = ({ isChecked: n }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
+  /* @__PURE__ */ p("span", { className: "checkbox", children: [
+    /* @__PURE__ */ a(
       "input",
       {
         type: "checkbox",
         style: { pointerEvents: "none" },
-        checked: a
+        checked: n
       }
     ),
-    /* @__PURE__ */ r("svg", { children: /* @__PURE__ */ r("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
+    /* @__PURE__ */ a("svg", { children: /* @__PURE__ */ a("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
   ] }),
-  /* @__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(
+  /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ a("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ a(
     "path",
     {
       fill: "none",
@@ -466,58 +481,55 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
       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 = M(
+] }), Y = K(
   ({
-    positionDropdown: a,
-    dropdownLists: i,
-    isComponentVisible: t,
-    searchAble: c,
-    onSearch: o,
-    value: e,
-    handleChangeValue: h,
-    multiSelect: p,
-    searchValue: v
-  }, I) => {
-    const [C, R] = y(0), [$, z] = y(), w = k(null);
+    positionDropdown: n,
+    dropdownLists: c,
+    isComponentVisible: s,
+    searchAble: d,
+    onSearch: i,
+    value: o,
+    handleChangeValue: g,
+    multiSelect: l,
+    searchValue: $,
+    highlightedIndex: v
+  }, N) => {
+    const [I, W] = R(0), f = z(null), x = z([]);
     return b(() => {
-      if (w.current) {
-        const n = w.current.getBoundingClientRect();
-        R(n.width);
+      if (f.current) {
+        const r = f.current.getBoundingClientRect();
+        W(r.width);
       }
-    }, [w, t]), b(() => {
-      i && v ? i.forEach((n) => {
-        if (n.label.startsWith(v || "")) {
-          z(n.value);
-          return;
-        }
-      }) : z(void 0);
-    }, [v, i]), /* @__PURE__ */ r(q, { children: t ? /* @__PURE__ */ l(
+    }, [f, s]), b(() => {
+      var r;
+      v >= 0 && x.current[v] && ((r = x.current[v]) == null || r.scrollIntoView({ block: "nearest" }));
+    }, [v]), /* @__PURE__ */ a(H, { children: s ? /* @__PURE__ */ p(
       "div",
       {
         className: "starasia-input-dropdown-lists-container",
-        onClick: (n) => n.stopPropagation(),
-        ref: I,
+        onClick: (r) => r.stopPropagation(),
+        ref: N,
         children: [
-          c ? /* @__PURE__ */ l(
+          d ? /* @__PURE__ */ p(
             "div",
             {
               className: "starasia-input-dropdown-container-dropdown-search",
               style: {
-                order: a == "bottom" ? 0 : 2,
+                order: n == "bottom" ? 0 : 2,
                 position: "sticky",
                 top: 0,
                 bottom: 0,
                 zIndex: 1
               },
               children: [
-                /* @__PURE__ */ r("div", { style: { display: "flex" }, children: /* @__PURE__ */ r(G, { strokeWidth: 2, width: 20 }) }),
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ a("div", { style: { display: "flex" }, children: /* @__PURE__ */ a(T, { strokeWidth: 2, width: 20 }) }),
+                /* @__PURE__ */ a(
                   "input",
                   {
-                    onChange: (n) => {
-                      o && o(n.target.value);
+                    onChange: (r) => {
+                      i && i(r.target.value);
                     },
-                    value: v,
+                    value: $,
                     autoFocus: !0,
                     style: { width: "100%" }
                   }
@@ -525,54 +537,57 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
               ]
             }
           ) : null,
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "div",
             {
-              className: `starasia-input-dropdwon-item-container ${p ? "multi" : ""}`,
-              ref: w,
-              children: i.map((n, x) => {
-                const f = !!(e != null && e.find((E) => E.value === n.value));
-                return /* @__PURE__ */ l(
+              className: `starasia-input-dropdwon-item-container ${l ? "multi" : ""}`,
+              ref: f,
+              children: c.map((r, w) => {
+                const y = !!(o != null && o.find((k) => k.value === r.value));
+                return /* @__PURE__ */ p(
                   "div",
                   {
-                    className: `starasia-input-dropdwon-item ${f ? "active" : " "} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
-                    onClick: () => h(n.label, n.value),
+                    className: `starasia-input-dropdwon-item ${y ? "active" : ""} ${w === v ? "highlight" : ""} ${r.disable ? "starasia-input-dropdwon-item-disable" : ""}`,
+                    ref: (k) => {
+                      x.current[w] = k;
+                    },
+                    onClick: () => g(r.label, r.value),
                     children: [
-                      p ? /* @__PURE__ */ r("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ r(K, { isChecked: f }) }) : null,
-                      n.icon ? /* @__PURE__ */ r("div", { children: F.cloneElement(n.icon, {
+                      l ? /* @__PURE__ */ a("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ a(X, { isChecked: y }) }) : null,
+                      r.icon ? /* @__PURE__ */ a("div", { children: O.cloneElement(r.icon, {
                         width: 16
                       }) }) : null,
-                      /* @__PURE__ */ l("div", { children: [
-                        /* @__PURE__ */ r(
+                      /* @__PURE__ */ p("div", { children: [
+                        /* @__PURE__ */ a(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text ${f ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            className: `starasia-input-dropdwon-item-text ${y ? "active" : null} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
                             style: {
                               textWrap: "nowrap",
-                              width: `${C - 12}px`,
+                              width: `${I - 12}px`,
                               overflow: "hidden",
                               textOverflow: "ellipsis"
                             },
-                            children: n.label
+                            children: r.label
                           }
                         ),
-                        n.description ? /* @__PURE__ */ r(
+                        r.description ? /* @__PURE__ */ a(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text-description ${f ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            className: `starasia-input-dropdwon-item-text-description ${y ? "active" : null} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
                             style: {
                               textWrap: "nowrap",
-                              width: `${C - 12}px`,
+                              width: `${I - 12}px`,
                               overflow: "hidden",
                               textOverflow: "ellipsis"
                             },
-                            children: n.description
+                            children: r.description
                           }
                         ) : null
                       ] })
                     ]
                   },
-                  x
+                  w
                 );
               })
             }
@@ -581,149 +596,202 @@ const J = ({ ...a }) => /* @__PURE__ */ r(
       }
     ) : null });
   }
-), T = ({
-  children: a,
-  handleChangePosition: i
+), Z = ({
+  children: n,
+  handleChangePosition: c
 }) => {
-  const t = k(null);
+  const s = z(null);
   b(() => {
-    var h;
-    const o = () => {
-      if (t.current) {
-        let p = t.current.parentElement;
-        for (; p && !c(p); )
-          p = p.parentElement;
-        p && i();
+    var g;
+    const i = () => {
+      if (s.current) {
+        let l = s.current.parentElement;
+        for (; l && !d(l); )
+          l = l.parentElement;
+        l && c();
       }
     };
-    let e = (h = t.current) == null ? void 0 : h.parentElement;
-    for (; e && !c(e); )
-      e = e.parentElement;
-    return e && e.addEventListener("scroll", o), o(), () => {
-      e && e.removeEventListener("scroll", o);
+    let o = (g = s.current) == null ? void 0 : g.parentElement;
+    for (; o && !d(o); )
+      o = o.parentElement;
+    return o && o.addEventListener("scroll", i), i(), () => {
+      o && o.removeEventListener("scroll", i);
     };
   }, []);
-  const c = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
-  return /* @__PURE__ */ r("div", { ref: t, children: a });
-}, A = "starasia-input-dropdown-styles", U = (a) => {
-  if (!document.getElementById(A)) {
-    const i = document.createElement("style");
-    i.id = A, i.textContent = a, document.head.appendChild(i);
+  const d = (i) => i && (i.scrollHeight > i.clientHeight || i.scrollWidth > i.clientWidth);
+  return /* @__PURE__ */ a("div", { ref: s, children: n });
+}, S = "starasia-input-dropdown-styles", _ = (n) => {
+  if (!document.getElementById(S)) {
+    const c = document.createElement("style");
+    c.id = S, c.textContent = n, document.head.appendChild(c);
   }
 };
-U(P);
-const _ = ({
-  dropdownLists: a,
-  onChange: i,
-  defaultValue: t,
-  size: c = "md",
-  multiSelect: o,
-  searchAble: e,
-  iconLeft: h,
-  placeholder: p,
-  onSearch: v,
-  error: I,
-  onBlur: C,
-  onFocus: R,
-  disable: $,
-  searchValue: z
+_(U);
+const or = ({
+  dropdownLists: n,
+  onChange: c,
+  defaultValue: s,
+  size: d = "md",
+  multiSelect: i,
+  searchAble: o,
+  iconLeft: g,
+  placeholder: l,
+  onSearch: $,
+  error: v,
+  onBlur: N,
+  onFocus: I,
+  disable: W,
+  searchValue: f
 }) => {
-  const w = k(), [n, x] = y([]), [f, E] = y(""), g = k(null), { isComponentVisible: B, ref: L, setIsComponentVisible: N } = V(!1), H = () => {
-    N((s) => !s);
-  }, j = (s, d) => {
-    if (!o)
-      x([{ label: s, value: d }]), i([{ label: s, value: d }]), N(!1);
-    else if (n == null ? void 0 : n.find((u) => u.value === d)) {
+  const x = z(), [r, w] = R([]), [y, k] = R(""), [h, L] = R(-1), m = z(null), { isComponentVisible: C, ref: D, setIsComponentVisible: B } = G(!1), V = () => {
+    B((e) => !e);
+  }, A = (e, t) => {
+    if (!i)
+      w([{ label: e, value: t }]), c([{ label: e, value: t }]), B(!1);
+    else if (r == null ? void 0 : r.find((u) => u.value === t)) {
       const u = [
-        ...n ? n.filter((D) => D.value !== d) : []
+        ...r ? r.filter((J) => J.value !== t) : []
       ];
-      x(u), i(u);
+      w(u), c(u);
     } else {
-      const u = [...n || [], { label: s, value: d }];
-      x(u), i(u);
+      const u = [...r || [], { label: e, value: t }];
+      w(u), c(u);
     }
   };
   b(() => {
-    JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t, x(w.current || []));
-  }, [t]);
-  const O = () => n.length ? o ? n == null ? void 0 : n.map((s, d) => /* @__PURE__ */ l("div", { className: "starasia-input-dropdown-preview-item", children: [
-    /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: s == null ? void 0 : s.label }, d),
-    /* @__PURE__ */ r(
-      X,
+    JSON.stringify(x.current) === JSON.stringify(s) || (x.current = s, w(x.current || []));
+  }, [s]);
+  const M = () => r.length ? i ? r == null ? void 0 : r.map((e, t) => /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-item", children: [
+    /* @__PURE__ */ a("p", { style: { minWidth: "max-content" }, children: e == null ? void 0 : e.label }, t),
+    /* @__PURE__ */ a(
+      rr,
       {
-        onClick: () => j(s.label, s.value)
+        onClick: () => A(e.label, e.value)
       }
     )
-  ] })) : /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ r("p", { className: "starasia-input-dropdown-placeholder", children: p }), m = () => {
-    if (L.current && g.current) {
-      const s = window.innerHeight, d = L.current.getBoundingClientRect(), W = g.current.getBoundingClientRect(), u = d.bottom + W.height;
-      g.current.style.left = `${d.left}px`, g.current.style.width = `${d.width}px`, u >= s - 10 ? (g.current.style.top = `${d.top - W.height - 5}px`, E("top")) : (g.current.style.top = `${d.top + d.height}px`, E("bottom"));
+  ] })) : /* @__PURE__ */ a("p", { style: { minWidth: "max-content" }, children: r == null ? void 0 : r[0].label }) : /* @__PURE__ */ a("p", { className: "starasia-input-dropdown-placeholder", children: l }), E = () => {
+    if (D.current && m.current) {
+      const e = window.innerHeight, t = D.current.getBoundingClientRect(), j = m.current.getBoundingClientRect(), u = t.bottom + j.height;
+      m.current.style.left = `${t.left}px`, m.current.style.width = `${t.width}px`, u >= e - 10 ? (m.current.style.top = `${t.top - j.height - 5}px`, k("top")) : (m.current.style.top = `${t.top + t.height}px`, k("bottom"));
     }
   };
-  return b(() => (window.addEventListener("scroll", m), window.addEventListener("resize", m), () => {
-    window.removeEventListener("scroll", m), window.removeEventListener("resize", m);
+  b(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
+    window.removeEventListener("scroll", E), window.removeEventListener("resize", E);
   }), []), b(() => {
-    m();
-  }, [B]), /* @__PURE__ */ r(T, { handleChangePosition: m, children: /* @__PURE__ */ l(
+    E();
+  }, [C]), b(() => {
+    C || L(-1);
+  }, [C]);
+  const P = (e) => {
+    if (!C) {
+      (e.key === "ArrowDown" || e.key === "Enter") && (e.preventDefault(), B(!0));
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const t = q(n, h, 1);
+        t !== -1 && L(t);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const t = q(n, h, -1);
+        t !== -1 && L(t);
+        break;
+      }
+      case "Enter": {
+        e.preventDefault(), h >= 0 && n[h] && !n[h].disable && A(
+          n[h].label,
+          n[h].value
+        );
+        break;
+      }
+      case "Escape": {
+        B(!1);
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ a(Z, { handleChangePosition: E, children: /* @__PURE__ */ p(
     "div",
     {
-      className: `starasia-input-dropdown-container ${$ ? "disable" : ""} starasia-input-dropdown-size-${c} ${B ? "active" : ""} ${I ? "error" : ""}`,
-      ref: L,
-      onClick: H,
+      className: `starasia-input-dropdown-container ${W ? "disable" : ""} starasia-input-dropdown-size-${d} ${C ? "active" : ""} ${v ? "error" : ""}`,
+      ref: D,
+      onClick: V,
+      onKeyDown: P,
+      tabIndex: 0,
+      onBlur: N,
+      onFocus: I,
       children: [
-        /* @__PURE__ */ l("div", { className: "starasia-input-dropdown-preview-container", children: [
-          h ? /* @__PURE__ */ r(q, { children: F.cloneElement(h, {
-            width: S(c),
+        /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
+          g ? /* @__PURE__ */ a(H, { children: O.cloneElement(g, {
+            width: F(d),
             color: "#939E99",
             style: {
               color: "#939E99"
             }
           }) }) : null,
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "div",
             {
               className: "starasia-input-dropdown-container-preview-item",
-              tabIndex: 100,
-              onBlur: C,
-              onFocus: R,
-              children: O()
+              children: M()
             }
           ),
-          /* @__PURE__ */ r(
-            J,
+          /* @__PURE__ */ a(
+            Q,
             {
               strokeWidth: 2,
-              width: S(c),
+              width: F(d),
               style: { color: "#939E99" }
             }
           )
         ] }),
-        /* @__PURE__ */ r(
-          Q,
+        /* @__PURE__ */ a(
+          Y,
           {
-            dropdownLists: a,
-            handleChangeValue: j,
-            isComponentVisible: B,
-            positionDropdown: f,
-            searchAble: !!e,
-            value: n,
-            onSearch: v,
-            ref: g,
-            multiSelect: o,
-            searchValue: z
+            dropdownLists: n,
+            handleChangeValue: A,
+            isComponentVisible: C,
+            positionDropdown: y,
+            searchAble: !!o,
+            value: r,
+            onSearch: $,
+            ref: m,
+            multiSelect: i,
+            searchValue: f,
+            highlightedIndex: h
           }
         )
       ]
     }
   ) });
-}, S = (a) => {
-  if (a === "sm")
+}, q = (n, c, s) => {
+  const d = n.length;
+  let i = c + s;
+  for (; i >= 0 && i < d; ) {
+    if (!n[i].disable)
+      return i;
+    i += s;
+  }
+  if (s === 1) {
+    for (let o = 0; o < d; o++)
+      if (!n[o].disable)
+        return o;
+  } else
+    for (let o = d - 1; o >= 0; o--)
+      if (!n[o].disable)
+        return o;
+  return -1;
+}, F = (n) => {
+  if (n === "sm")
     return 16;
-  if (a === "md")
+  if (n === "md")
     return 16;
-  if (a === "lg")
+  if (n === "lg")
     return 20;
-}, X = (a) => /* @__PURE__ */ r(
+}, rr = (n) => /* @__PURE__ */ a(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -731,8 +799,8 @@ const _ = ({
     height: "18",
     viewBox: "0 0 18 18",
     fill: "none",
-    ...a,
-    children: /* @__PURE__ */ r(
+    ...n,
+    children: /* @__PURE__ */ a(
       "path",
       {
         d: "M12 6L6 12M6.00001 6L12 12",
@@ -745,5 +813,5 @@ const _ = ({
   }
 );
 export {
-  _ as Dropdown
+  or as Dropdown
 };

package/dist/dropdown.umd.js

@@ -1,4 +1,4 @@
-(function(w,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):(w=typeof globalThis<"u"?globalThis:w||self,n(w.Dropdown={},w.jsxRuntime,w.React))})(this,function(w,n,o){"use strict";const q=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+(function(w,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],r):(w=typeof globalThis<"u"?globalThis:w||self,r(w.Dropdown={},w.jsxRuntime,w.React))})(this,function(w,r,e){"use strict";const F=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -8,67 +8,77 @@
 :root {
   /* color */
   /* brand */
-  --starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default);
-  --starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default);
-  --starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
-  --starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
-  --starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
+  --starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
+  --starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
+  --starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
+  --starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
+  --starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
   /* gray */
   --starasia-ui-dropdown-color-primary-gray: var(
     --starasia-ui-color-gray-700,
-    #374151
+    rgba(55, 65, 81, 1)
   );
   --starasia-ui-dropdown-color-secondary-gray: var(
     --starasia-ui-color-gray-500,
-    #6b7280
+    rgba(107, 114, 128, 1)
   );
   --starasia-ui-dropdown-color-tertiary-gray: var(
     --starasia-ui-color-gray-300,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
   --starasia-ui-dropdown-color-quaternary-gray: var(
     --starasia-ui-color-gray-100,
-    #f3f4f6
+    rgba(243, 244, 246, 1)
   );
   --starasia-ui-dropdown-color-quinary-gray: var(
     --starasia-ui-color-gray-50,
-    #f9fafb
+    rgba(249, 250, 251, 1)
   );
   /* bg color */
   --starasia-ui-dropdown-background-color-primary: var(
     --starasia-ui-dropdown-color-secondary-blue,
-    #3b82f6
+    rgba(59, 130, 246, 1)
   );
   --starasia-ui-dropdown-background-color-secondary: var(
     --starasia-ui-dropdown-color-quinary-blue,
-    #eff6ff
+    rgba(239, 246, 255, 1)
   );
 
   /* disalble color */
   --starasia-ui-dropdown-color-disable: var(
     --starasia-ui-dropdown-color-tertiary-gray,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
 
   /* border color */
-  --starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default);
+  --starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
   --starasia-ui-dropdown-border-color-secondary: var(
     --starasia-ui-color-gray-300,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
   --starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
 
   --starasia-ui-dropdown-color-secondary-red: var(
     --starasia-ui-color-red-500,
-    #ef4444
+    rgba(239, 68, 68, 1)
   );
 
   /* plachoder color */
   --starasia-ui-dropdown-placholder-color: var(
     --starasia-ui-color-gray-200,
-    #c9cecc
+    rgba(201, 206, 204, 1)
   );
 
+  /* white */
+  --starasia-ui-dropdown-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
+  /* disabled bg */
+  --starasia-ui-dropdown-color-disabled-bg: rgba(242, 243, 242, 1);
+  /* text colors */
+  --starasia-ui-dropdown-color-text-primary: rgba(24, 26, 25, 1);
+  --starasia-ui-dropdown-color-text-secondary: rgba(120, 134, 127, 1);
+  /* shadow */
+  --starasia-ui-dropdown-box-shadow-list: rgba(0, 0, 0, 0.08);
+
   /* border width */
   --starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
 
@@ -77,7 +87,7 @@
   --starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
 
   /* shadow */
-  --starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.2);
+  --starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.2);
 
   /* below is for size,above is */
   --starasia-ui-dropdown-fontWeight-normal: var(
@@ -128,14 +138,14 @@
   display: flex;
   align-items: center;
   border: var(--starasia-ui-dropdown-border-width) solid
-    rgba(120, 134, 127, 0.2);
+    var(--starasia-ui-dropdown-border-color-tertiary);
   border-radius: var(--borderRadius);
-  background-color: white;
+  background-color: var(--starasia-ui-dropdown-color-white);
   font-size: var(--baseFont);
   cursor: pointer;
 }
 .starasia-input-dropdown-container.disable {
-  background-color: #f2f3f2;
+  background-color: var(--starasia-ui-dropdown-color-disabled-bg);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -146,7 +156,7 @@
 .starasia-input-dropdown-container.active {
   border-color: var(--starasia-ui-dropdown-border-color-primary);
   box-shadow: var(--starasia-ui-dropdown-box-shadow);
-  background-color: white;
+  background-color: var(--starasia-ui-dropdown-color-white);
 }
 
 .starasia-input-dropdown-preview-container {
@@ -167,8 +177,8 @@
   border: var(--starasia-ui-dropdown-border-width) solid
     var(--starasia-ui-dropdown-border-color-tertiary);
   border-radius: var(--borderRadius);
-  background-color: #fffeff;
-  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.08);
+  background-color: var(--starasia-ui-dropdown-color-white);
+  box-shadow: 0px 8px 12px 0px var(--starasia-ui-dropdown-box-shadow-list);
   max-height: 312px;
   overflow-y: auto;
   z-index: 999;
@@ -203,7 +213,7 @@
   border-radius: var(--borderRadius);
   gap: var(--starasia-ui-dropdown-spacing-sm);
   padding-inline: var(--paddingInline);
-  background: white;
+  background: var(--starasia-ui-dropdown-color-white);
   & input {
     flex: 1;
     outline: none;
@@ -245,15 +255,20 @@
 }
 
 .starasia-input-dropdwon-item:hover {
-  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
+  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
 }
 .starasia-input-dropdwon-item.active {
   /* color: var(--starasia-ui-dropdown-background-color-primary); */
   /* border-radius: var(--borderRadius); */
-  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
+  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.21);
   /* background: var(--starasia-ui-dropdown-background-color-secondary); */
   /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
 }
+.starasia-input-dropdwon-item.highlight {
+  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.35);
+  outline: 2px solid rgba(var(--starasia-ui-raw-color-brand-secondary, 144, 176, 218), 0.4);
+  outline-offset: -2px;
+}
 
 .starasia-input-dropdwon-item-disable {
   color: var(--starasia-ui-dropdown-color-disable) !important;
@@ -289,30 +304,30 @@
 }
 
 .starasia-input-dropdwon-item-text {
-  color: #181a19;
+  color: var(--starasia-ui-dropdown-color-text-primary);
   /* font-size: 14px; */
   font-size: inherit;
   font-weight: 500;
 }
 .starasia-input-dropdwon-item-text.active {
-  color: var(--starasia-ui-brand-primary-default);
+  color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
 }
 
 .starasia-input-dropdwon-item-text-description {
-  color: #78867f;
+  color: var(--starasia-ui-dropdown-color-text-secondary);
   /* font-size: 14px; */
   font-size: inherit;
   font-weight: 400;
 }
 .starasia-input-dropdwon-item-text-description.active {
-  color: var(--starasia-ui-brand-primary-default);
+  color: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
 }
 
 /* for checkbox */
 .checkbox-wrapper-30 .checkbox {
   --bg: #fff;
   --brdr: #d1d6ee;
-  --brdr-actv: var(--starasia-ui-brand-primary-default);
+  --brdr-actv: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
   --brdr-hovr: #bbc1e1;
   --dur: calc((var(--size, 2) / 2) * 0.6s);
   display: inline-block;
@@ -384,4 +399,4 @@
   height: 100%;
   width: 100%;
 }
-`;function A(a){const[e,t]=o.useState(a),p=o.useRef(null),i=s=>{p.current&&!p.current.contains(s.target)&&t(!1)};return o.useEffect(()=>(document.addEventListener("click",i,!0),()=>{document.removeEventListener("click",i,!0)}),[]),{ref:p,isComponentVisible:e,setIsComponentVisible:t}}const D=({...a})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 24 24",fill:"none",color:"#939E99",children:n.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),F=({...a})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...a,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"})]}),O=({isChecked:a})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:a}),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"})})})]}),H=o.forwardRef(({positionDropdown:a,dropdownLists:e,isComponentVisible:t,searchAble:p,onSearch:i,value:s,handleChangeValue:g,multiSelect:l,searchValue:v},E)=>{const[m,z]=o.useState(0),[N,k]=o.useState(),h=o.useRef(null);return o.useEffect(()=>{if(h.current){const r=h.current.getBoundingClientRect();z(r.width)}},[h,t]),o.useEffect(()=>{e&&v?e.forEach(r=>{if(r.label.startsWith(v||"")){k(r.value);return}}):k(void 0)},[v,e]),n.jsx(n.Fragment,{children:t?n.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:r=>r.stopPropagation(),ref:E,children:[p?n.jsxs("div",{className:"starasia-input-dropdown-container-dropdown-search",style:{order:a=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[n.jsx("div",{style:{display:"flex"},children:n.jsx(F,{strokeWidth:2,width:20})}),n.jsx("input",{onChange:r=>{i&&i(r.target.value)},value:v,autoFocus:!0,style:{width:"100%"}})]}):null,n.jsx("div",{className:`starasia-input-dropdwon-item-container ${l?"multi":""}`,ref:h,children:e.map((r,f)=>{const x=!!(s!=null&&s.find(C=>C.value===r.value));return n.jsxs("div",{className:`starasia-input-dropdwon-item ${x?"active":" "} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,onClick:()=>g(r.label,r.value),children:[l?n.jsx("div",{style:{marginRight:"8px"},children:n.jsx(O,{isChecked:x})}):null,r.icon?n.jsx("div",{children:o.cloneElement(r.icon,{width:16})}):null,n.jsxs("div",{children:[n.jsx("p",{className:`starasia-input-dropdwon-item-text ${x?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${m-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.label}),r.description?n.jsx("p",{className:`starasia-input-dropdwon-item-text-description ${x?"active":null} ${r.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${m-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:r.description}):null]})]},f)})})]}):null})}),M=({children:a,handleChangePosition:e})=>{const t=o.useRef(null);o.useEffect(()=>{var g;const i=()=>{if(t.current){let l=t.current.parentElement;for(;l&&!p(l);)l=l.parentElement;l&&e()}};let s=(g=t.current)==null?void 0:g.parentElement;for(;s&&!p(s);)s=s.parentElement;return s&&s.addEventListener("scroll",i),i(),()=>{s&&s.removeEventListener("scroll",i)}},[]);const p=i=>i&&(i.scrollHeight>i.clientHeight||i.scrollWidth>i.clientWidth);return n.jsx("div",{ref:t,children:a})},W="starasia-input-dropdown-styles";(a=>{if(!document.getElementById(W)){const e=document.createElement("style");e.id=W,e.textContent=a,document.head.appendChild(e)}})(q);const P=({dropdownLists:a,onChange:e,defaultValue:t,size:p="md",multiSelect:i,searchAble:s,iconLeft:g,placeholder:l,onSearch:v,error:E,onBlur:m,onFocus:z,disable:N,searchValue:k})=>{const h=o.useRef(),[r,f]=o.useState([]),[x,C]=o.useState(""),b=o.useRef(null),{isComponentVisible:I,ref:B,setIsComponentVisible:S}=A(!1),V=()=>{S(d=>!d)},j=(d,c)=>{if(!i)f([{label:d,value:c}]),e([{label:d,value:c}]),S(!1);else if(r==null?void 0:r.find(u=>u.value===c)){const u=[...r?r.filter(G=>G.value!==c):[]];f(u),e(u)}else{const u=[...r||[],{label:d,value:c}];f(u),e(u)}};o.useEffect(()=>{JSON.stringify(h.current)===JSON.stringify(t)||(h.current=t,f(h.current||[]))},[t]);const J=()=>r.length?i?r==null?void 0:r.map((d,c)=>n.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label},c),n.jsx(T,{onClick:()=>j(d.label,d.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:l}),y=()=>{if(B.current&&b.current){const d=window.innerHeight,c=B.current.getBoundingClientRect(),L=b.current.getBoundingClientRect(),u=c.bottom+L.height;b.current.style.left=`${c.left}px`,b.current.style.width=`${c.width}px`,u>=d-10?(b.current.style.top=`${c.top-L.height-5}px`,C("top")):(b.current.style.top=`${c.top+c.height}px`,C("bottom"))}};return o.useEffect(()=>(window.addEventListener("scroll",y),window.addEventListener("resize",y),()=>{window.removeEventListener("scroll",y),window.removeEventListener("resize",y)}),[]),o.useEffect(()=>{y()},[I]),n.jsx(M,{handleChangePosition:y,children:n.jsxs("div",{className:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${p} ${I?"active":""} ${E?"error":""}`,ref:B,onClick:V,children:[n.jsxs("div",{className:"starasia-input-dropdown-preview-container",children:[g?n.jsx(n.Fragment,{children:o.cloneElement(g,{width:$(p),color:"#939E99",style:{color:"#939E99"}})}):null,n.jsx("div",{className:"starasia-input-dropdown-container-preview-item",tabIndex:100,onBlur:m,onFocus:z,children:J()}),n.jsx(D,{strokeWidth:2,width:$(p),style:{color:"#939E99"}})]}),n.jsx(H,{dropdownLists:a,handleChangeValue:j,isComponentVisible:I,positionDropdown:x,searchAble:!!s,value:r,onSearch:v,ref:b,multiSelect:i,searchValue:k})]})})},$=a=>{if(a==="sm")return 16;if(a==="md")return 16;if(a==="lg")return 20},T=a=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...a,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});w.Dropdown=P,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
+`;function O(a){const[l,d]=e.useState(a),c=e.useRef(null),i=o=>{c.current&&!c.current.contains(o.target)&&d(!1)};return e.useEffect(()=>(document.addEventListener("click",i,!0),()=>{document.removeEventListener("click",i,!0)}),[]),{ref:c,isComponentVisible:l,setIsComponentVisible:d}}const H=({...a})=>r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 24 24",fill:"none",color:"#939E99",children:r.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),V=({...a})=>r.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 20 20",fill:"none",children:[r.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),M=({isChecked:a})=>r.jsxs("div",{className:"checkbox-wrapper-30",children:[r.jsxs("span",{className:"checkbox",children:[r.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:a}),r.jsx("svg",{children:r.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:r.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:r.jsx("path",{fill:"none",stroke:"currentColor",d:"M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"})})})]}),P=e.forwardRef(({positionDropdown:a,dropdownLists:l,isComponentVisible:d,searchAble:c,onSearch:i,value:o,handleChangeValue:g,multiSelect:p,searchValue:B,highlightedIndex:v},$)=>{const[z,N]=e.useState(0),y=e.useRef(null),f=e.useRef([]);return e.useEffect(()=>{if(y.current){const n=y.current.getBoundingClientRect();N(n.width)}},[y,d]),e.useEffect(()=>{var n;v>=0&&f.current[v]&&((n=f.current[v])==null||n.scrollIntoView({block:"nearest"}))},[v]),r.jsx(r.Fragment,{children:d?r.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:n=>n.stopPropagation(),ref:$,children:[c?r.jsxs("div",{className:"starasia-input-dropdown-container-dropdown-search",style:{order:a=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[r.jsx("div",{style:{display:"flex"},children:r.jsx(V,{strokeWidth:2,width:20})}),r.jsx("input",{onChange:n=>{i&&i(n.target.value)},value:B,autoFocus:!0,style:{width:"100%"}})]}):null,r.jsx("div",{className:`starasia-input-dropdwon-item-container ${p?"multi":""}`,ref:y,children:l.map((n,h)=>{const m=!!(o!=null&&o.find(k=>k.value===n.value));return r.jsxs("div",{className:`starasia-input-dropdwon-item ${m?"active":""} ${h===v?"highlight":""} ${n.disable?"starasia-input-dropdwon-item-disable":""}`,ref:k=>{f.current[h]=k},onClick:()=>g(n.label,n.value),children:[p?r.jsx("div",{style:{marginRight:"8px"},children:r.jsx(M,{isChecked:m})}):null,n.icon?r.jsx("div",{children:e.cloneElement(n.icon,{width:16})}):null,r.jsxs("div",{children:[r.jsx("p",{className:`starasia-input-dropdwon-item-text ${m?"active":null} ${n.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:n.label}),n.description?r.jsx("p",{className:`starasia-input-dropdwon-item-text-description ${m?"active":null} ${n.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${z-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:n.description}):null]})]},h)})})]}):null})}),T=({children:a,handleChangePosition:l})=>{const d=e.useRef(null);e.useEffect(()=>{var g;const i=()=>{if(d.current){let p=d.current.parentElement;for(;p&&!c(p);)p=p.parentElement;p&&l()}};let o=(g=d.current)==null?void 0:g.parentElement;for(;o&&!c(o);)o=o.parentElement;return o&&o.addEventListener("scroll",i),i(),()=>{o&&o.removeEventListener("scroll",i)}},[]);const c=i=>i&&(i.scrollHeight>i.clientHeight||i.scrollWidth>i.clientWidth);return r.jsx("div",{ref:d,children:a})},j="starasia-input-dropdown-styles";(a=>{if(!document.getElementById(j)){const l=document.createElement("style");l.id=j,l.textContent=a,document.head.appendChild(l)}})(F);const J=({dropdownLists:a,onChange:l,defaultValue:d,size:c="md",multiSelect:i,searchAble:o,iconLeft:g,placeholder:p,onSearch:B,error:v,onBlur:$,onFocus:z,disable:N,searchValue:y})=>{const f=e.useRef(),[n,h]=e.useState([]),[m,k]=e.useState(""),[b,W]=e.useState(-1),x=e.useRef(null),{isComponentVisible:E,ref:D,setIsComponentVisible:I}=O(!1),U=()=>{I(s=>!s)},L=(s,t)=>{if(!i)h([{label:s,value:t}]),l([{label:s,value:t}]),I(!1);else if(n==null?void 0:n.find(u=>u.value===t)){const u=[...n?n.filter(X=>X.value!==t):[]];h(u),l(u)}else{const u=[...n||[],{label:s,value:t}];h(u),l(u)}};e.useEffect(()=>{JSON.stringify(f.current)===JSON.stringify(d)||(f.current=d,h(f.current||[]))},[d]);const G=()=>n.length?i?n==null?void 0:n.map((s,t)=>r.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[r.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label},t),r.jsx(K,{onClick:()=>L(s.label,s.value)})]})):r.jsx("p",{style:{minWidth:"max-content"},children:n==null?void 0:n[0].label}):r.jsx("p",{className:"starasia-input-dropdown-placeholder",children:p}),C=()=>{if(D.current&&x.current){const s=window.innerHeight,t=D.current.getBoundingClientRect(),S=x.current.getBoundingClientRect(),u=t.bottom+S.height;x.current.style.left=`${t.left}px`,x.current.style.width=`${t.width}px`,u>=s-10?(x.current.style.top=`${t.top-S.height-5}px`,k("top")):(x.current.style.top=`${t.top+t.height}px`,k("bottom"))}};e.useEffect(()=>(window.addEventListener("scroll",C),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}),[]),e.useEffect(()=>{C()},[E]),e.useEffect(()=>{E||W(-1)},[E]);const Q=s=>{if(!E){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),I(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const t=A(a,b,1);t!==-1&&W(t);break}case"ArrowUp":{s.preventDefault();const t=A(a,b,-1);t!==-1&&W(t);break}case"Enter":{s.preventDefault(),b>=0&&a[b]&&!a[b].disable&&L(a[b].label,a[b].value);break}case"Escape":{I(!1);break}}};return r.jsx(T,{handleChangePosition:C,children:r.jsxs("div",{className:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${c} ${E?"active":""} ${v?"error":""}`,ref:D,onClick:U,onKeyDown:Q,tabIndex:0,onBlur:$,onFocus:z,children:[r.jsxs("div",{className:"starasia-input-dropdown-preview-container",children:[g?r.jsx(r.Fragment,{children:e.cloneElement(g,{width:q(c),color:"#939E99",style:{color:"#939E99"}})}):null,r.jsx("div",{className:"starasia-input-dropdown-container-preview-item",children:G()}),r.jsx(H,{strokeWidth:2,width:q(c),style:{color:"#939E99"}})]}),r.jsx(P,{dropdownLists:a,handleChangeValue:L,isComponentVisible:E,positionDropdown:m,searchAble:!!o,value:n,onSearch:B,ref:x,multiSelect:i,searchValue:y,highlightedIndex:b})]})})},A=(a,l,d)=>{const c=a.length;let i=l+d;for(;i>=0&&i<c;){if(!a[i].disable)return i;i+=d}if(d===1){for(let o=0;o<c;o++)if(!a[o].disable)return o}else for(let o=c-1;o>=0;o--)if(!a[o].disable)return o;return-1},q=a=>{if(a==="sm")return 16;if(a==="md")return 16;if(a==="lg")return 20},K=a=>r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...a,children:r.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});w.Dropdown=J,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/dropdown",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "dropdown component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/dropdown.umd.js",
@@ -12,10 +12,6 @@
     "dist/*.map",
     "dist/*.css"
   ],
-  "scripts": {
-    "dev": "vite --config vite.config.ts --port 3000",
-    "build": "vite build --config vite.config.ts"
-  },
   "keywords": [],
   "license": "ISC",
   "type": "module",
@@ -37,5 +33,9 @@
     "react-dom": "^18.2.0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19"
+  },
+  "scripts": {
+    "dev": "vite --config vite.config.ts --port 3000",
+    "build": "vite build --config vite.config.ts"
   }
-}
+}