@starasia/dropdown 1.0.6 → 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 n, jsxs as p, 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;
@@ -266,6 +266,11 @@ const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   /* 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;
@@ -397,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__ */ n(
+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__ */ n(
+    children: /* @__PURE__ */ a(
       "path",
       {
         d: "M4 9L12 17L20 9",
@@ -424,15 +429,15 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
       }
     )
   }
-), G = ({ ...a }) => /* @__PURE__ */ p(
+), T = ({ ...n }) => /* @__PURE__ */ p(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...a,
+    ...n,
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ a(
         "circle",
         {
           cx: "9.80547",
@@ -444,7 +449,7 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ a(
         "path",
         {
           d: "M15.0153 15.4043L17.9519 18.3333",
@@ -456,19 +461,19 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
       )
     ]
   }
-), K = ({ isChecked: a }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
+), X = ({ isChecked: n }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
   /* @__PURE__ */ p("span", { className: "checkbox", children: [
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ a(
       "input",
       {
         type: "checkbox",
         style: { pointerEvents: "none" },
-        checked: a
+        checked: n
       }
     ),
-    /* @__PURE__ */ n("svg", { children: /* @__PURE__ */ n("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
+    /* @__PURE__ */ a("svg", { children: /* @__PURE__ */ a("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
   ] }),
-  /* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ n("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ n(
+  /* @__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",
@@ -476,58 +481,55 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
       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,
+    positionDropdown: n,
+    dropdownLists: c,
+    isComponentVisible: s,
+    searchAble: d,
+    onSearch: i,
+    value: o,
+    handleChangeValue: g,
     multiSelect: l,
-    searchValue: v
-  }, I) => {
-    const [C, R] = y(0), [$, z] = y(), w = k(null);
+    searchValue: $,
+    highlightedIndex: v
+  }, N) => {
+    const [I, W] = R(0), f = z(null), x = z([]);
     return b(() => {
-      if (w.current) {
-        const r = w.current.getBoundingClientRect();
-        R(r.width);
+      if (f.current) {
+        const r = f.current.getBoundingClientRect();
+        W(r.width);
       }
-    }, [w, t]), b(() => {
-      i && v ? i.forEach((r) => {
-        if (r.label.startsWith(v || "")) {
-          z(r.value);
-          return;
-        }
-      }) : z(void 0);
-    }, [v, i]), /* @__PURE__ */ n(q, { children: t ? /* @__PURE__ */ p(
+    }, [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: (r) => r.stopPropagation(),
-        ref: I,
+        ref: N,
         children: [
-          c ? /* @__PURE__ */ p(
+          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__ */ n("div", { style: { display: "flex" }, children: /* @__PURE__ */ n(G, { strokeWidth: 2, width: 20 }) }),
-                /* @__PURE__ */ n(
+                /* @__PURE__ */ a("div", { style: { display: "flex" }, children: /* @__PURE__ */ a(T, { strokeWidth: 2, width: 20 }) }),
+                /* @__PURE__ */ a(
                   "input",
                   {
                     onChange: (r) => {
-                      o && o(r.target.value);
+                      i && i(r.target.value);
                     },
-                    value: v,
+                    value: $,
                     autoFocus: !0,
                     style: { width: "100%" }
                   }
@@ -535,44 +537,47 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
               ]
             }
           ) : null,
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ a(
             "div",
             {
               className: `starasia-input-dropdwon-item-container ${l ? "multi" : ""}`,
-              ref: w,
-              children: i.map((r, x) => {
-                const m = !!(e != null && e.find((E) => E.value === r.value));
+              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 ${m ? "active" : " "} ${r.disable ? "starasia-input-dropdwon-item-disable" : null}`,
-                    onClick: () => h(r.label, r.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: [
-                      l ? /* @__PURE__ */ n("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ n(K, { isChecked: m }) }) : null,
-                      r.icon ? /* @__PURE__ */ n("div", { children: F.cloneElement(r.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__ */ p("div", { children: [
-                        /* @__PURE__ */ n(
+                        /* @__PURE__ */ a(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text ${m ? "active" : null} ${r.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: r.label
                           }
                         ),
-                        r.description ? /* @__PURE__ */ n(
+                        r.description ? /* @__PURE__ */ a(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text-description ${m ? "active" : null} ${r.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"
                             },
@@ -582,7 +587,7 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
                       ] })
                     ]
                   },
-                  x
+                  w
                 );
               })
             }
@@ -591,149 +596,202 @@ const J = ({ ...a }) => /* @__PURE__ */ n(
       }
     ) : 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 l = t.current.parentElement;
-        for (; l && !c(l); )
+    var g;
+    const i = () => {
+      if (s.current) {
+        let l = s.current.parentElement;
+        for (; l && !d(l); )
           l = l.parentElement;
-        l && i();
+        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__ */ n("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,
+_(U);
+const or = ({
+  dropdownLists: n,
+  onChange: c,
+  defaultValue: s,
+  size: d = "md",
+  multiSelect: i,
+  searchAble: o,
+  iconLeft: g,
   placeholder: l,
-  onSearch: v,
-  error: I,
-  onBlur: C,
-  onFocus: R,
-  disable: $,
-  searchValue: z
+  onSearch: $,
+  error: v,
+  onBlur: N,
+  onFocus: I,
+  disable: W,
+  searchValue: f
 }) => {
-  const w = k(), [r, x] = y([]), [m, 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 (r == null ? void 0 : r.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 = [
-        ...r ? r.filter((D) => D.value !== d) : []
+        ...r ? r.filter((J) => J.value !== t) : []
       ];
-      x(u), i(u);
+      w(u), c(u);
     } else {
-      const u = [...r || [], { 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 = () => r.length ? o ? r == null ? void 0 : r.map((s, d) => /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-item", children: [
-    /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: s == null ? void 0 : s.label }, d),
-    /* @__PURE__ */ n(
-      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__ */ n("p", { style: { minWidth: "max-content" }, children: r == null ? void 0 : r[0].label }) : /* @__PURE__ */ n("p", { className: "starasia-input-dropdown-placeholder", children: l }), f = () => {
-    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", f), window.addEventListener("resize", f), () => {
-    window.removeEventListener("scroll", f), window.removeEventListener("resize", f);
+  b(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
+    window.removeEventListener("scroll", E), window.removeEventListener("resize", E);
   }), []), b(() => {
-    f();
-  }, [B]), /* @__PURE__ */ n(T, { handleChangePosition: f, children: /* @__PURE__ */ p(
+    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__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
-          h ? /* @__PURE__ */ n(q, { children: F.cloneElement(h, {
-            width: S(c),
+          g ? /* @__PURE__ */ a(H, { children: O.cloneElement(g, {
+            width: F(d),
             color: "#939E99",
             style: {
               color: "#939E99"
             }
           }) }) : null,
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ a(
             "div",
             {
               className: "starasia-input-dropdown-container-preview-item",
-              tabIndex: 100,
-              onBlur: C,
-              onFocus: R,
-              children: O()
+              children: M()
             }
           ),
-          /* @__PURE__ */ n(
-            J,
+          /* @__PURE__ */ a(
+            Q,
             {
               strokeWidth: 2,
-              width: S(c),
+              width: F(d),
               style: { color: "#939E99" }
             }
           )
         ] }),
-        /* @__PURE__ */ n(
-          Q,
+        /* @__PURE__ */ a(
+          Y,
           {
-            dropdownLists: a,
-            handleChangeValue: j,
-            isComponentVisible: B,
-            positionDropdown: m,
-            searchAble: !!e,
+            dropdownLists: n,
+            handleChangeValue: A,
+            isComponentVisible: C,
+            positionDropdown: y,
+            searchAble: !!o,
             value: r,
-            onSearch: v,
-            ref: g,
-            multiSelect: o,
-            searchValue: z
+            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__ */ n(
+}, rr = (n) => /* @__PURE__ */ a(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -741,8 +799,8 @@ const _ = ({
     height: "18",
     viewBox: "0 0 18 18",
     fill: "none",
-    ...a,
-    children: /* @__PURE__ */ n(
+    ...n,
+    children: /* @__PURE__ */ a(
       "path",
       {
         d: "M12 6L6 12M6.00001 6L12 12",
@@ -755,5 +813,5 @@ const _ = ({
   }
 );
 export {
-  _ as Dropdown
+  or as Dropdown
 };

package/dist/dropdown.umd.js

@@ -1,4 +1,4 @@
-(function(w,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],r):(w=typeof globalThis<"u"?globalThis:w||self,r(w.Dropdown={},w.jsxRuntime,w.React))})(this,function(w,r,o){"use strict";const q=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+(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;
@@ -264,6 +264,11 @@
   /* 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;
@@ -394,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})=>r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 24 24",fill:"none",color:"#939E99",children:r.jsx("path",{d:"M4 9L12 17L20 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})}),F=({...a})=>r.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...a,viewBox:"0 0 20 20",fill:"none",children:[r.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),O=({isChecked:a})=>r.jsxs("div",{className:"checkbox-wrapper-30",children:[r.jsxs("span",{className:"checkbox",children:[r.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:a}),r.jsx("svg",{children:r.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:r.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:r.jsx("path",{fill:"none",stroke:"currentColor",d:"M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"})})})]}),H=o.forwardRef(({positionDropdown:a,dropdownLists:e,isComponentVisible:t,searchAble:p,onSearch:i,value:s,handleChangeValue:g,multiSelect:l,searchValue:v},E)=>{const[m,z]=o.useState(0),[N,k]=o.useState(),h=o.useRef(null);return o.useEffect(()=>{if(h.current){const n=h.current.getBoundingClientRect();z(n.width)}},[h,t]),o.useEffect(()=>{e&&v?e.forEach(n=>{if(n.label.startsWith(v||"")){k(n.value);return}}):k(void 0)},[v,e]),r.jsx(r.Fragment,{children:t?r.jsxs("div",{className:"starasia-input-dropdown-lists-container",onClick:n=>n.stopPropagation(),ref:E,children:[p?r.jsxs("div",{className:"starasia-input-dropdown-container-dropdown-search",style:{order:a=="bottom"?0:2,position:"sticky",top:0,bottom:0,zIndex:1},children:[r.jsx("div",{style:{display:"flex"},children:r.jsx(F,{strokeWidth:2,width:20})}),r.jsx("input",{onChange:n=>{i&&i(n.target.value)},value:v,autoFocus:!0,style:{width:"100%"}})]}):null,r.jsx("div",{className:`starasia-input-dropdwon-item-container ${l?"multi":""}`,ref:h,children:e.map((n,x)=>{const f=!!(s!=null&&s.find(C=>C.value===n.value));return r.jsxs("div",{className:`starasia-input-dropdwon-item ${f?"active":" "} ${n.disable?"starasia-input-dropdwon-item-disable":null}`,onClick:()=>g(n.label,n.value),children:[l?r.jsx("div",{style:{marginRight:"8px"},children:r.jsx(O,{isChecked:f})}):null,n.icon?r.jsx("div",{children:o.cloneElement(n.icon,{width:16})}):null,r.jsxs("div",{children:[r.jsx("p",{className:`starasia-input-dropdwon-item-text ${f?"active":null} ${n.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${m-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:n.label}),n.description?r.jsx("p",{className:`starasia-input-dropdwon-item-text-description ${f?"active":null} ${n.disable?"starasia-input-dropdwon-item-disable":null}`,style:{textWrap:"nowrap",width:`${m-12}px`,overflow:"hidden",textOverflow:"ellipsis"},children:n.description}):null]})]},x)})})]}):null})}),M=({children:a,handleChangePosition:e})=>{const t=o.useRef(null);o.useEffect(()=>{var g;const i=()=>{if(t.current){let l=t.current.parentElement;for(;l&&!p(l);)l=l.parentElement;l&&e()}};let s=(g=t.current)==null?void 0:g.parentElement;for(;s&&!p(s);)s=s.parentElement;return s&&s.addEventListener("scroll",i),i(),()=>{s&&s.removeEventListener("scroll",i)}},[]);const p=i=>i&&(i.scrollHeight>i.clientHeight||i.scrollWidth>i.clientWidth);return r.jsx("div",{ref:t,children:a})},W="starasia-input-dropdown-styles";(a=>{if(!document.getElementById(W)){const e=document.createElement("style");e.id=W,e.textContent=a,document.head.appendChild(e)}})(q);const P=({dropdownLists:a,onChange:e,defaultValue:t,size:p="md",multiSelect:i,searchAble:s,iconLeft:g,placeholder:l,onSearch:v,error:E,onBlur:m,onFocus:z,disable:N,searchValue:k})=>{const h=o.useRef(),[n,x]=o.useState([]),[f,C]=o.useState(""),b=o.useRef(null),{isComponentVisible:I,ref:B,setIsComponentVisible:S}=A(!1),V=()=>{S(d=>!d)},j=(d,c)=>{if(!i)x([{label:d,value:c}]),e([{label:d,value:c}]),S(!1);else if(n==null?void 0:n.find(u=>u.value===c)){const u=[...n?n.filter(G=>G.value!==c):[]];x(u),e(u)}else{const u=[...n||[],{label:d,value:c}];x(u),e(u)}};o.useEffect(()=>{JSON.stringify(h.current)===JSON.stringify(t)||(h.current=t,x(h.current||[]))},[t]);const J=()=>n.length?i?n==null?void 0:n.map((d,c)=>r.jsxs("div",{className:"starasia-input-dropdown-preview-item",children:[r.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label},c),r.jsx(T,{onClick:()=>j(d.label,d.value)})]})):r.jsx("p",{style:{minWidth:"max-content"},children:n==null?void 0:n[0].label}):r.jsx("p",{className:"starasia-input-dropdown-placeholder",children:l}),y=()=>{if(B.current&&b.current){const d=window.innerHeight,c=B.current.getBoundingClientRect(),L=b.current.getBoundingClientRect(),u=c.bottom+L.height;b.current.style.left=`${c.left}px`,b.current.style.width=`${c.width}px`,u>=d-10?(b.current.style.top=`${c.top-L.height-5}px`,C("top")):(b.current.style.top=`${c.top+c.height}px`,C("bottom"))}};return o.useEffect(()=>(window.addEventListener("scroll",y),window.addEventListener("resize",y),()=>{window.removeEventListener("scroll",y),window.removeEventListener("resize",y)}),[]),o.useEffect(()=>{y()},[I]),r.jsx(M,{handleChangePosition:y,children:r.jsxs("div",{className:`starasia-input-dropdown-container ${N?"disable":""} starasia-input-dropdown-size-${p} ${I?"active":""} ${E?"error":""}`,ref:B,onClick:V,children:[r.jsxs("div",{className:"starasia-input-dropdown-preview-container",children:[g?r.jsx(r.Fragment,{children:o.cloneElement(g,{width:$(p),color:"#939E99",style:{color:"#939E99"}})}):null,r.jsx("div",{className:"starasia-input-dropdown-container-preview-item",tabIndex:100,onBlur:m,onFocus:z,children:J()}),r.jsx(D,{strokeWidth:2,width:$(p),style:{color:"#939E99"}})]}),r.jsx(H,{dropdownLists:a,handleChangeValue:j,isComponentVisible:I,positionDropdown:f,searchAble:!!s,value:n,onSearch:v,ref:b,multiSelect:i,searchValue:k})]})})},$=a=>{if(a==="sm")return 16;if(a==="md")return 16;if(a==="lg")return 20},T=a=>r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",...a,children:r.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})});w.Dropdown=P,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
+`;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.6",
+  "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"
   }
-}
+}