@starasia/dropdown 3.4.2 → 3.5.1

package/dist/dropdown.es.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as n, Fragment as tn } from "react/jsx-runtime";
-import _, { useState as F, useRef as I, useEffect as x, forwardRef as dn } from "react";
+import _, { useState as F, useRef as I, useEffect as g, forwardRef as dn } from "react";
 const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
@@ -9,26 +9,28 @@ const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
 }
 
 :root {
+  /* Component tokens — all values point to semantic tokens (Layer 2)
+     with primitive/raw fallbacks so the component still renders if the
+     theme stylesheet hasn't been loaded yet. */
   --sa-dropdown-brand:               var(--sa-border-brand, #031f43);
   --sa-dropdown-brand-ring:          var(--sa-color-brand-100, #90caf9);
-  --sa-dropdown-brand-subtle:        var(--sa-color-brand-200, #99b3db);
   --sa-dropdown-bg:                  var(--sa-background-primary, #ffffff);
   --sa-dropdown-bg-neutral:          var(--sa-background-neutral, #f0f1f2);
-  --sa-dropdown-bg-selected:         #f8f8f8;
-  --sa-dropdown-bg-hover:            rgba(0, 0, 0, 0.04);
+  --sa-dropdown-bg-selected:         var(--sa-background-primary-inverse, #f8f8f8);
+  --sa-dropdown-bg-hover:            var(--sa-color-black-alpha-a5, rgba(0, 0, 0, 0.03));
   --sa-dropdown-bg-disabled:         var(--sa-background-neutral, #f0f1f2);
-  --sa-dropdown-bg-error:            #fff0f3;
-  --sa-dropdown-border-subtle:       rgba(11, 18, 14, 0.14);
+  --sa-dropdown-bg-error:            var(--sa-background-error-subtlest, #fff0f3);
+  --sa-dropdown-bg-chip:             var(--sa-background-brand-subtlest, #e6edf6);
+  --sa-dropdown-border-subtle:       var(--sa-border-subtle, rgba(11, 18, 14, 0.14));
   --sa-dropdown-border-active:       var(--sa-border-brand, #031f43);
-  --sa-dropdown-border-error-subtle: #ffb3c1;
-  --sa-dropdown-border-error:        var(--sa-color-error-500, #ff4d6d);
-  --sa-dropdown-color-disable:       var(--sa-color-gray-300, #dddee1);
+  --sa-dropdown-border-error-subtle: var(--sa-border-danger-subtle, #ffb3c1);
+  --sa-dropdown-color-disable:       var(--sa-text-disable, rgba(24, 26, 25, 0.56));
   --sa-dropdown-placeholder:         var(--sa-text-subtle, #505258);
-  --sa-dropdown-placeholder-subtle:  #6b6e76;
+  --sa-dropdown-placeholder-subtle:  var(--sa-text-subtlest, #6b6e76);
   --sa-dropdown-text-primary:        var(--sa-text-primary, #292a2e);
-  --sa-dropdown-text-secondary:      #6b6e76;
-  --sa-dropdown-text-error:          #a4133c;
-  --sa-dropdown-text-info:           #0073ab;
+  --sa-dropdown-text-secondary:      var(--sa-text-subtlest, #6b6e76);
+  --sa-dropdown-text-error:          var(--sa-text-error, #a4133c);
+  --sa-dropdown-text-info:           var(--sa-text-info, #0073ab);
   --sa-dropdown-ring-active:         0px 0px 0px 1.2px var(--sa-dropdown-brand-ring);
   --sa-dropdown-shadow-panel:        0px 8px 12px 0px rgba(30, 31, 33, 0.15), 0px 0px 1px 0px rgba(30, 31, 33, 0.31);
   --sa-dropdown-radius:              var(--sa-radii-sm, 6px);
@@ -176,7 +178,7 @@ const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   padding-inline: 8px;
   padding-block: 2px;
   border-radius: 4px;
-  background-color: var(--sa-color-brand-50, #e6edf6);
+  background-color: var(--sa-dropdown-bg-chip);
   color: var(--sa-dropdown-brand);
   height: max-content;
   font-size: 12px;
@@ -444,86 +446,13 @@ const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   margin: 0;
 }
 
-/* === CHECKBOX === */
-.checkbox-wrapper-30 .checkbox {
-  --bg: #fff;
-  --brdr: #d1d6ee;
-  --brdr-actv: var(--sa-background-brand, #04254f);
-  --brdr-hovr: #bbc1e1;
-  --dur: calc((var(--size, 2) / 2) * 0.6s);
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  position: relative;
-}
-.checkbox-wrapper-30 .checkbox:after {
-  content: "";
-  width: 100%;
-  padding-top: 100%;
-  display: block;
-}
-.checkbox-wrapper-30 .checkbox > * {
-  position: absolute;
-}
-.checkbox-wrapper-30 .checkbox input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
-  background-color: var(--newBgClr, var(--bg));
-  border-radius: calc(var(--size, 1) * 4px);
-  border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
-  color: var(--newBrdrClr, var(--brdr));
-  outline: none;
-  margin: 0;
-  padding: 0;
-  transition: all calc(var(--dur) / 3) linear;
-}
-.checkbox-wrapper-30 .checkbox input:hover,
-.checkbox-wrapper-30 .checkbox input:checked {
-  --newBrdr: calc(var(--size, 1) * 2);
-}
-.checkbox-wrapper-30 .checkbox input:hover {
-  --newBrdrClr: var(--brdr-hovr);
-}
-.checkbox-wrapper-30 .checkbox input:checked {
-  --newBrdrClr: var(--brdr-actv);
-  --newBgClr: var(--brdr-actv);
-}
-.checkbox-wrapper-30 .checkbox input:checked + svg {
-  --dashArray: 16 93;
-  --dashOffset: 109;
-}
-.checkbox-wrapper-30 .checkbox input:checked + svg {
-  color: white;
-  transition-delay: 0.1s;
-}
-.checkbox-wrapper-30 .checkbox svg {
-  fill: none;
-  left: 0;
-  pointer-events: none;
-  stroke: var(--stroke, var(--border-active));
-  stroke-dasharray: var(--dashArray, 93);
-  stroke-dashoffset: var(--dashOffset, 94);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2px;
-  top: 0;
-  transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
-}
-.checkbox-wrapper-30 .checkbox svg,
-.checkbox-wrapper-30 .checkbox input {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
 `;
 function ln(e) {
-  const [p, d] = F(e), s = I(null), o = (r) => {
-    s.current && !s.current.contains(r.target) && d(!1);
+  const [p, d] = F(e), s = I(null), r = (o) => {
+    s.current && !s.current.contains(o.target) && d(!1);
   };
-  return x(() => (document.addEventListener("click", o, !0), () => {
-    document.removeEventListener("click", o, !0);
+  return g(() => (document.addEventListener("click", r, !0), () => {
+    document.removeEventListener("click", r, !0);
   }), []), { ref: s, isComponentVisible: p, setIsComponentVisible: d };
 }
 const pn = ({ ...e }) => /* @__PURE__ */ l(
@@ -577,34 +506,34 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
       }
     )
   }
-), hn = dn(
+), un = dn(
   ({
     positionDropdown: e,
     dropdownLists: p,
     isComponentVisible: d,
     searchAble: s,
-    onSearch: o,
-    value: r,
-    handleChangeValue: k,
-    multiSelect: h,
+    onSearch: r,
+    value: o,
+    handleChangeValue: y,
+    multiSelect: u,
     searchValue: H,
-    highlightedIndex: g,
+    highlightedIndex: m,
     footer: A,
-    groupLabel: j,
-    onSelectAll: D
+    groupLabel: D,
+    onSelectAll: j
   }, M) => {
-    const z = I([]);
-    x(() => {
+    const L = I([]);
+    g(() => {
       var a;
-      g >= 0 && z.current[g] && ((a = z.current[g]) == null || a.scrollIntoView({ block: "nearest" }));
-    }, [g]);
+      m >= 0 && L.current[m] && ((a = L.current[m]) == null || a.scrollIntoView({ block: "nearest" }));
+    }, [m]);
     const O = s ? /* @__PURE__ */ l("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
       /* @__PURE__ */ n(pn, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
       /* @__PURE__ */ n(
         "input",
         {
           onChange: (a) => {
-            o && o(a.target.value);
+            r && r(a.target.value);
           },
           value: H,
           autoFocus: !0,
@@ -623,39 +552,39 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
           /* @__PURE__ */ l(
             "div",
             {
-              className: `sa-input-dropdwon-item-container ${h ? "multi" : ""}`,
+              className: `sa-input-dropdwon-item-container ${u ? "multi" : ""}`,
               children: [
-                j && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
-                  /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: j }),
-                  h && D && /* @__PURE__ */ n(
+                D && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
+                  /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: D }),
+                  u && j && /* @__PURE__ */ n(
                     "button",
                     {
                       className: "sa-input-dropdown-section-select-all",
                       onClick: (a) => {
-                        a.stopPropagation(), D();
+                        a.stopPropagation(), j();
                       },
                       children: "Select all"
                     }
                   )
                 ] }),
-                p.map((a, B) => {
-                  const W = !!(r != null && r.find((R) => R.value === a.value)), L = !!a.description;
+                p.map((a, R) => {
+                  const W = !!(o != null && o.find((S) => S.value === a.value)), z = !!a.description;
                   return /* @__PURE__ */ l(
                     "div",
                     {
                       className: [
                         "sa-input-dropdwon-item",
-                        L ? "has-description" : "",
+                        z ? "has-description" : "",
                         W ? "active" : "",
-                        B === g ? "highlight" : "",
+                        R === m ? "highlight" : "",
                         a.disable ? "sa-input-dropdwon-item-disable" : ""
                       ].filter(Boolean).join(" "),
-                      ref: (R) => {
-                        z.current[B] = R;
+                      ref: (S) => {
+                        L.current[R] = S;
                       },
-                      onClick: () => k(a.label, a.value),
+                      onClick: () => y(a.label, a.value),
                       children: [
-                        h && /* @__PURE__ */ n("div", { className: "sa-input-dropdwon-item-check", children: W && /* @__PURE__ */ n(cn, { width: 16 }) }),
+                        u && /* @__PURE__ */ n("div", { className: "sa-input-dropdwon-item-check", children: W && /* @__PURE__ */ n(cn, { width: 16 }) }),
                         a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0, display: "flex" }, children: _.cloneElement(a.icon, { width: 16 }) }),
                         /* @__PURE__ */ l("div", { style: { minWidth: 0, flex: 1 }, children: [
                           /* @__PURE__ */ n(
@@ -681,7 +610,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
                         ] })
                       ]
                     },
-                    B
+                    R
                   );
                 })
               ]
@@ -698,129 +627,136 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
   handleChangePosition: p
 }) => {
   const d = I(null);
-  x(() => {
-    var k;
-    const o = () => {
+  g(() => {
+    var y;
+    const r = () => {
       if (d.current) {
-        let h = d.current.parentElement;
-        for (; h && !s(h); )
-          h = h.parentElement;
-        h && p();
+        let u = d.current.parentElement;
+        for (; u && !s(u); )
+          u = u.parentElement;
+        u && p();
       }
     };
-    let r = (k = d.current) == null ? void 0 : k.parentElement;
-    for (; r && !s(r); )
-      r = r.parentElement;
-    return r && r.addEventListener("scroll", o), o(), () => {
-      r && r.removeEventListener("scroll", o);
+    let o = (y = d.current) == null ? void 0 : y.parentElement;
+    for (; o && !s(o); )
+      o = o.parentElement;
+    return o && o.addEventListener("scroll", r), r(), () => {
+      o && o.removeEventListener("scroll", r);
     };
   }, []);
-  const s = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
+  const s = (r) => r && (r.scrollHeight > r.clientHeight || r.scrollWidth > r.clientWidth);
   return /* @__PURE__ */ n("div", { ref: d, children: e });
-}, Q = "sa-input-dropdown-styles", un = (e) => {
-  if (!document.getElementById(Q)) {
+}, X = "sa-input-dropdown-styles", hn = (e) => {
+  if (!document.getElementById(X)) {
     const p = document.createElement("style");
-    p.id = Q, p.textContent = e, document.head.appendChild(p);
+    p.id = X, p.textContent = e, document.head.appendChild(p);
   }
 };
-un(sn);
+hn(sn);
 const mn = ({
   dropdownLists: e,
   onChange: p,
   defaultValue: d,
   value: s,
-  size: o = "md",
-  multiSelect: r,
-  searchAble: k,
-  iconLeft: h,
+  size: r = "md",
+  multiSelect: o,
+  searchAble: y,
+  iconLeft: u,
   placeholder: H,
-  onSearch: g,
+  onSearch: m,
   error: A,
-  onBlur: j,
-  onFocus: D,
+  onBlur: D,
+  onFocus: j,
   disable: M,
-  searchValue: z,
+  searchValue: L,
   variant: O = "outline",
   footer: a,
-  groupLabel: B,
+  groupLabel: R,
   onSelectAll: W,
   /* field wrapper */
-  label: L,
-  labelPosition: R = "outside-top",
+  label: z,
+  labelPosition: S = "outside-top",
   required: U,
-  optional: X,
-  description: y,
-  helperText: N,
+  optional: Z,
+  description: N,
+  helperText: E,
   errorText: w
 }) => {
-  const E = s !== void 0, $ = I(), T = A || !!w, [c, S] = F(
-    E ? s || [] : d || []
-  ), [nn, Z] = F(""), [f, V] = F(-1), v = I(null), { isComponentVisible: m, ref: q, setIsComponentVisible: P } = ln(!1), en = () => {
+  const C = s !== void 0, $ = I(), T = A || !!w, [c, B] = F(
+    C ? s || [] : d || []
+  ), [nn, Q] = F(""), [x, V] = F(-1), h = I(null), { isComponentVisible: f, ref: q, setIsComponentVisible: P } = ln(!1), en = () => {
     P((t) => !t);
-  }, K = (t, i) => {
-    if (r)
-      if (c == null ? void 0 : c.find((u) => u.value === i)) {
-        const u = c.filter((an) => an.value !== i);
-        E || S(u), p(u);
+  }, G = (t, i) => {
+    if (o)
+      if (c == null ? void 0 : c.find((b) => b.value === i)) {
+        const b = c.filter((an) => an.value !== i);
+        C || B(b), p(b);
       } else {
-        const u = [...c, { label: t, value: i }];
-        E || S(u), p(u);
+        const b = [...c, { label: t, value: i }];
+        C || B(b), p(b);
       }
     else {
-      const b = [{ label: t, value: i }];
-      E || S(b), p(b), P(!1);
+      const v = [{ label: t, value: i }];
+      C || B(v), p(v), P(!1);
     }
   };
-  x(() => {
-    E && S(s || []);
-  }, [s]), x(() => {
-    E || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, S($.current || []));
+  g(() => {
+    C && B(s || []);
+  }, [s]), g(() => {
+    C || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, B($.current || []));
   }, [d]);
-  const rn = () => c.length ? r ? c == null ? void 0 : c.map((t, i) => /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-item", children: [
+  const on = () => c.length ? o ? c == null ? void 0 : c.map((t, i) => /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-item", children: [
     /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }),
     /* @__PURE__ */ n(
       fn,
       {
-        onClick: (b) => {
-          b.stopPropagation(), K(t.label, t.value);
+        onClick: (v) => {
+          v.stopPropagation(), G(t.label, t.value);
         }
       }
     )
-  ] }, i)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: H }), C = () => {
-    if (q.current && v.current) {
-      const t = window.innerHeight, i = q.current.getBoundingClientRect(), b = v.current.getBoundingClientRect(), u = i.bottom + b.height;
-      v.current.style.left = `${i.left}px`, v.current.style.width = `${i.width}px`, u >= t - 10 ? (v.current.style.top = `${i.top - b.height - 5}px`, Z("top")) : (v.current.style.top = `${i.top + i.height + 4}px`, Z("bottom"));
+  ] }, i)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: H }), k = () => {
+    if (q.current && h.current) {
+      const t = window.innerHeight, i = q.current.getBoundingClientRect(), v = h.current.getBoundingClientRect(), b = i.bottom + v.height;
+      h.current.style.left = `${i.left}px`, h.current.style.width = `${i.width}px`, b >= t - 10 ? (h.current.style.top = `${i.top - v.height - 5}px`, Q("top")) : (h.current.style.top = `${i.top + i.height + 4}px`, Q("bottom"));
     }
   };
-  x(() => (window.addEventListener("scroll", C), window.addEventListener("resize", C), () => {
-    window.removeEventListener("scroll", C), window.removeEventListener("resize", C);
-  }), []), x(() => {
-    C();
-  }, [m]), x(() => {
-    m || V(-1);
-  }, [m]);
-  const on = (t) => {
-    if (!m) {
+  g(() => (window.addEventListener("scroll", k), window.addEventListener("resize", k), () => {
+    window.removeEventListener("scroll", k), window.removeEventListener("resize", k);
+  }), []), g(() => {
+    k();
+  }, [f]), g(() => {
+    if (!f || !h.current)
+      return;
+    const t = new ResizeObserver(() => {
+      k();
+    });
+    return t.observe(h.current), () => t.disconnect();
+  }, [f]), g(() => {
+    f || V(-1);
+  }, [f]);
+  const rn = (t) => {
+    if (!f) {
       (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), P(!0));
       return;
     }
     switch (t.key) {
       case "ArrowDown": {
         t.preventDefault();
-        const i = Y(e, f, 1);
+        const i = Y(e, x, 1);
         i !== -1 && V(i);
         break;
       }
       case "ArrowUp": {
         t.preventDefault();
-        const i = Y(e, f, -1);
+        const i = Y(e, x, -1);
         i !== -1 && V(i);
         break;
       }
       case "Enter": {
-        t.preventDefault(), f >= 0 && e[f] && !e[f].disable && K(
-          e[f].label,
-          e[f].value
+        t.preventDefault(), x >= 0 && e[x] && !e[x].disable && G(
+          e[x].label,
+          e[x].value
         );
         break;
       }
@@ -828,100 +764,100 @@ const mn = ({
         P(!1);
         break;
     }
-  }, G = o === "lg" || o === "xl" ? 20 : 16, J = /* @__PURE__ */ n(wn, { handleChangePosition: C, children: /* @__PURE__ */ l(
+  }, J = r === "lg" || r === "xl" ? 20 : 16, K = /* @__PURE__ */ n(wn, { handleChangePosition: k, children: /* @__PURE__ */ l(
     "div",
     {
       className: [
         "sa-input-dropdown-container",
         O,
-        `sa-input-dropdown-size-${o}`,
-        m ? "active" : "",
+        `sa-input-dropdown-size-${r}`,
+        f ? "active" : "",
         T ? "error" : "",
         M ? "disable" : ""
       ].filter(Boolean).join(" "),
       ref: q,
       onClick: en,
-      onKeyDown: on,
+      onKeyDown: rn,
       tabIndex: 0,
-      onBlur: j,
-      onFocus: D,
+      onBlur: D,
+      onFocus: j,
       children: [
         /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-container", children: [
-          h ? _.cloneElement(h, {
-            width: G,
+          u ? _.cloneElement(u, {
+            width: J,
             style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 }
           }) : null,
-          /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: rn() }),
-          m ? /* @__PURE__ */ n(xn, { width: G }) : /* @__PURE__ */ n(bn, { width: G })
+          /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: on() }),
+          f ? /* @__PURE__ */ n(gn, { width: J }) : /* @__PURE__ */ n(bn, { width: J })
         ] }),
         /* @__PURE__ */ n(
-          hn,
+          un,
           {
             dropdownLists: e,
-            handleChangeValue: K,
-            isComponentVisible: m,
+            handleChangeValue: G,
+            isComponentVisible: f,
             positionDropdown: nn,
-            searchAble: !!k,
+            searchAble: !!y,
             value: c,
-            onSearch: g,
-            ref: v,
-            multiSelect: r,
-            searchValue: z,
-            highlightedIndex: f,
+            onSearch: m,
+            ref: h,
+            multiSelect: o,
+            searchValue: L,
+            highlightedIndex: x,
             footer: a,
-            groupLabel: B,
+            groupLabel: R,
             onSelectAll: W
           }
         )
       ]
     }
   ) });
-  return L ? R === "outside-left" ? /* @__PURE__ */ l("div", { className: "sa-select-field sa-select-field-left", children: [
+  return z ? S === "outside-left" ? /* @__PURE__ */ l("div", { className: "sa-select-field sa-select-field-left", children: [
     /* @__PURE__ */ l("div", { className: "sa-select-field-left-label", children: [
       /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
-        /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: L }),
-        X && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
+        /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: z }),
+        Z && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
         U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
       ] }),
-      y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y })
+      N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N })
     ] }),
     /* @__PURE__ */ l("div", { className: "sa-select-field-input-wrap", children: [
-      J,
-      N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
+      K,
+      E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
       w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
     ] })
   ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
     /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
-      /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: L }),
-      X && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
+      /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: z }),
+      Z && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
       U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
     ] }),
-    y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y }),
-    J,
-    N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
+    N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N }),
+    K,
+    E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
     w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
   ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
-    y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y }),
-    J,
-    N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
+    N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N }),
+    K,
+    E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
     w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
   ] });
 }, Y = (e, p, d) => {
   const s = e.length;
-  let o = p + d;
-  for (; o >= 0 && o < s; ) {
-    if (!e[o].disable)
-      return o;
-    o += d;
+  let r = p + d;
+  for (; r >= 0 && r < s; ) {
+    if (!e[r].disable)
+      return r;
+    r += d;
   }
   if (d === 1) {
-    for (let r = 0; r < s; r++)
-      if (!e[r].disable)
-        return r;
+    for (let o = 0; o < s; o++)
+      if (!e[o].disable)
+        return o;
   } else
-    for (let r = s - 1; r >= 0; r--)
-      if (!e[r].disable)
-        return r;
+    for (let o = s - 1; o >= 0; o--)
+      if (!e[o].disable)
+        return o;
   return -1;
 }, fn = (e) => /* @__PURE__ */ n(
   "svg",
@@ -964,7 +900,7 @@ const mn = ({
       }
     )
   }
-), xn = ({ width: e = 16 }) => /* @__PURE__ */ n(
+), gn = ({ width: e = 16 }) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",

package/dist/dropdown.umd.js

@@ -1,4 +1,4 @@
-(function(b,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):(b=typeof globalThis<"u"?globalThis:b||self,n(b.Dropdown={},b.jsxRuntime,b.React))})(this,function(b,n,s){"use strict";const Q=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+(function(g,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):(g=typeof globalThis<"u"?globalThis:g||self,n(g.Dropdown={},g.jsxRuntime,g.React))})(this,function(g,n,d){"use strict";const X=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -7,26 +7,28 @@
 }
 
 :root {
+  /* Component tokens — all values point to semantic tokens (Layer 2)
+     with primitive/raw fallbacks so the component still renders if the
+     theme stylesheet hasn't been loaded yet. */
   --sa-dropdown-brand:               var(--sa-border-brand, #031f43);
   --sa-dropdown-brand-ring:          var(--sa-color-brand-100, #90caf9);
-  --sa-dropdown-brand-subtle:        var(--sa-color-brand-200, #99b3db);
   --sa-dropdown-bg:                  var(--sa-background-primary, #ffffff);
   --sa-dropdown-bg-neutral:          var(--sa-background-neutral, #f0f1f2);
-  --sa-dropdown-bg-selected:         #f8f8f8;
-  --sa-dropdown-bg-hover:            rgba(0, 0, 0, 0.04);
+  --sa-dropdown-bg-selected:         var(--sa-background-primary-inverse, #f8f8f8);
+  --sa-dropdown-bg-hover:            var(--sa-color-black-alpha-a5, rgba(0, 0, 0, 0.03));
   --sa-dropdown-bg-disabled:         var(--sa-background-neutral, #f0f1f2);
-  --sa-dropdown-bg-error:            #fff0f3;
-  --sa-dropdown-border-subtle:       rgba(11, 18, 14, 0.14);
+  --sa-dropdown-bg-error:            var(--sa-background-error-subtlest, #fff0f3);
+  --sa-dropdown-bg-chip:             var(--sa-background-brand-subtlest, #e6edf6);
+  --sa-dropdown-border-subtle:       var(--sa-border-subtle, rgba(11, 18, 14, 0.14));
   --sa-dropdown-border-active:       var(--sa-border-brand, #031f43);
-  --sa-dropdown-border-error-subtle: #ffb3c1;
-  --sa-dropdown-border-error:        var(--sa-color-error-500, #ff4d6d);
-  --sa-dropdown-color-disable:       var(--sa-color-gray-300, #dddee1);
+  --sa-dropdown-border-error-subtle: var(--sa-border-danger-subtle, #ffb3c1);
+  --sa-dropdown-color-disable:       var(--sa-text-disable, rgba(24, 26, 25, 0.56));
   --sa-dropdown-placeholder:         var(--sa-text-subtle, #505258);
-  --sa-dropdown-placeholder-subtle:  #6b6e76;
+  --sa-dropdown-placeholder-subtle:  var(--sa-text-subtlest, #6b6e76);
   --sa-dropdown-text-primary:        var(--sa-text-primary, #292a2e);
-  --sa-dropdown-text-secondary:      #6b6e76;
-  --sa-dropdown-text-error:          #a4133c;
-  --sa-dropdown-text-info:           #0073ab;
+  --sa-dropdown-text-secondary:      var(--sa-text-subtlest, #6b6e76);
+  --sa-dropdown-text-error:          var(--sa-text-error, #a4133c);
+  --sa-dropdown-text-info:           var(--sa-text-info, #0073ab);
   --sa-dropdown-ring-active:         0px 0px 0px 1.2px var(--sa-dropdown-brand-ring);
   --sa-dropdown-shadow-panel:        0px 8px 12px 0px rgba(30, 31, 33, 0.15), 0px 0px 1px 0px rgba(30, 31, 33, 0.31);
   --sa-dropdown-radius:              var(--sa-radii-sm, 6px);
@@ -174,7 +176,7 @@
   padding-inline: 8px;
   padding-block: 2px;
   border-radius: 4px;
-  background-color: var(--sa-color-brand-50, #e6edf6);
+  background-color: var(--sa-dropdown-bg-chip);
   color: var(--sa-dropdown-brand);
   height: max-content;
   font-size: 12px;
@@ -442,77 +444,4 @@
   margin: 0;
 }
 
-/* === CHECKBOX === */
-.checkbox-wrapper-30 .checkbox {
-  --bg: #fff;
-  --brdr: #d1d6ee;
-  --brdr-actv: var(--sa-background-brand, #04254f);
-  --brdr-hovr: #bbc1e1;
-  --dur: calc((var(--size, 2) / 2) * 0.6s);
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  position: relative;
-}
-.checkbox-wrapper-30 .checkbox:after {
-  content: "";
-  width: 100%;
-  padding-top: 100%;
-  display: block;
-}
-.checkbox-wrapper-30 .checkbox > * {
-  position: absolute;
-}
-.checkbox-wrapper-30 .checkbox input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
-  background-color: var(--newBgClr, var(--bg));
-  border-radius: calc(var(--size, 1) * 4px);
-  border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
-  color: var(--newBrdrClr, var(--brdr));
-  outline: none;
-  margin: 0;
-  padding: 0;
-  transition: all calc(var(--dur) / 3) linear;
-}
-.checkbox-wrapper-30 .checkbox input:hover,
-.checkbox-wrapper-30 .checkbox input:checked {
-  --newBrdr: calc(var(--size, 1) * 2);
-}
-.checkbox-wrapper-30 .checkbox input:hover {
-  --newBrdrClr: var(--brdr-hovr);
-}
-.checkbox-wrapper-30 .checkbox input:checked {
-  --newBrdrClr: var(--brdr-actv);
-  --newBgClr: var(--brdr-actv);
-}
-.checkbox-wrapper-30 .checkbox input:checked + svg {
-  --dashArray: 16 93;
-  --dashOffset: 109;
-}
-.checkbox-wrapper-30 .checkbox input:checked + svg {
-  color: white;
-  transition-delay: 0.1s;
-}
-.checkbox-wrapper-30 .checkbox svg {
-  fill: none;
-  left: 0;
-  pointer-events: none;
-  stroke: var(--stroke, var(--border-active));
-  stroke-dasharray: var(--dashArray, 93);
-  stroke-dashoffset: var(--dashOffset, 94);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2px;
-  top: 0;
-  transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
-}
-.checkbox-wrapper-30 .checkbox svg,
-.checkbox-wrapper-30 .checkbox input {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-`;function Y(e){const[p,i]=s.useState(e),l=s.useRef(null),o=r=>{l.current&&!l.current.contains(r.target)&&i(!1)};return s.useEffect(()=>(document.addEventListener("click",o,!0),()=>{document.removeEventListener("click",o,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const _=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),R=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3.5 8L6.5 11L12.5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),nn=s.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:o,value:r,handleChangeValue:y,multiSelect:h,searchValue:F,highlightedIndex:g,footer:I,groupLabel:A,onSelectAll:D},H)=>{const z=s.useRef([]);s.useEffect(()=>{var a;g>=0&&z.current[g]&&((a=z.current[g])==null||a.scrollIntoView({block:"nearest"}))},[g]);const O=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(_,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{o&&o(a.target.value)},value:F,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:i?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:H,children:[e!=="top"&&O,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${h?"multi":""}`,children:[A&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:A}),h&&D&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),D()},children:"Select all"})]}),p.map((a,S)=>{const P=!!(r!=null&&r.find(L=>L.value===a.value)),B=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",B?"has-description":"",P?"active":"",S===g?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:L=>{z.current[S]=L},onClick:()=>y(a.label,a.value),children:[h&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:P&&n.jsx(R,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:s.cloneElement(a.icon,{width:16})}),n.jsxs("div",{style:{minWidth:0,flex:1},children:[n.jsx("p",{className:["sa-input-dropdwon-item-text",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.label}),a.description&&n.jsx("p",{className:["sa-input-dropdwon-item-text-description",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},S)})]}),e==="top"&&O,I&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:I})]}):null})}),en=({children:e,handleChangePosition:p})=>{const i=s.useRef(null);s.useEffect(()=>{var y;const o=()=>{if(i.current){let h=i.current.parentElement;for(;h&&!l(h);)h=h.parentElement;h&&p()}};let r=(y=i.current)==null?void 0:y.parentElement;for(;r&&!l(r);)r=r.parentElement;return r&&r.addEventListener("scroll",o),o(),()=>{r&&r.removeEventListener("scroll",o)}},[]);const l=o=>o&&(o.scrollHeight>o.clientHeight||o.scrollWidth>o.clientWidth);return n.jsx("div",{ref:i,children:e})},J="sa-input-dropdown-styles";(e=>{if(!document.getElementById(J)){const p=document.createElement("style");p.id=J,p.textContent=e,document.head.appendChild(p)}})(Q);const rn=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:o="md",multiSelect:r,searchAble:y,iconLeft:h,placeholder:F,onSearch:g,error:I,onBlur:A,onFocus:D,disable:H,searchValue:z,variant:O="outline",footer:a,groupLabel:S,onSelectAll:P,label:B,labelPosition:L="outside-top",required:T,optional:X,description:m,helperText:E,errorText:w})=>{const N=l!==void 0,M=s.useRef(),sn=I||!!w,[c,j]=s.useState(N?l||[]:i||[]),[tn,Z]=s.useState(""),[u,q]=s.useState(-1),v=s.useRef(null),{isComponentVisible:k,ref:$,setIsComponentVisible:W}=Y(!1),ln=()=>{W(d=>!d)},V=(d,t)=>{if(r)if(c==null?void 0:c.find(f=>f.value===t)){const f=c.filter(hn=>hn.value!==t);N||j(f),p(f)}else{const f=[...c,{label:d,value:t}];N||j(f),p(f)}else{const x=[{label:d,value:t}];N||j(x),p(x),W(!1)}};s.useEffect(()=>{N&&j(l||[])},[l]),s.useEffect(()=>{N||JSON.stringify(M.current)===JSON.stringify(i)||(M.current=i,j(M.current||[]))},[i]);const pn=()=>c.length?r?c==null?void 0:c.map((d,t)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:d==null?void 0:d.label}),n.jsx(on,{onClick:x=>{x.stopPropagation(),V(d.label,d.value)}})]},t)):n.jsx("p",{style:{minWidth:"max-content"},children:c==null?void 0:c[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:F}),C=()=>{if($.current&&v.current){const d=window.innerHeight,t=$.current.getBoundingClientRect(),x=v.current.getBoundingClientRect(),f=t.bottom+x.height;v.current.style.left=`${t.left}px`,v.current.style.width=`${t.width}px`,f>=d-10?(v.current.style.top=`${t.top-x.height-5}px`,Z("top")):(v.current.style.top=`${t.top+t.height+4}px`,Z("bottom"))}};s.useEffect(()=>(window.addEventListener("scroll",C),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}),[]),s.useEffect(()=>{C()},[k]),s.useEffect(()=>{k||q(-1)},[k]);const cn=d=>{if(!k){(d.key==="ArrowDown"||d.key==="Enter")&&(d.preventDefault(),W(!0));return}switch(d.key){case"ArrowDown":{d.preventDefault();const t=U(e,u,1);t!==-1&&q(t);break}case"ArrowUp":{d.preventDefault();const t=U(e,u,-1);t!==-1&&q(t);break}case"Enter":{d.preventDefault(),u>=0&&e[u]&&!e[u].disable&&V(e[u].label,e[u].value);break}case"Escape":W(!1);break}},K=o==="lg"||o==="xl"?20:16,G=n.jsx(en,{handleChangePosition:C,children:n.jsxs("div",{className:["sa-input-dropdown-container",O,`sa-input-dropdown-size-${o}`,k?"active":"",sn?"error":"",H?"disable":""].filter(Boolean).join(" "),ref:$,onClick:ln,onKeyDown:cn,tabIndex:0,onBlur:A,onFocus:D,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[h?s.cloneElement(h,{width:K,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:pn()}),k?n.jsx(dn,{width:K}):n.jsx(an,{width:K})]}),n.jsx(nn,{dropdownLists:e,handleChangeValue:V,isComponentVisible:k,positionDropdown:tn,searchAble:!!y,value:c,onSearch:g,ref:v,multiSelect:r,searchValue:z,highlightedIndex:u,footer:a,groupLabel:S,onSelectAll:P})]})});return B?L==="outside-left"?n.jsxs("div",{className:"sa-select-field sa-select-field-left",children:[n.jsxs("div",{className:"sa-select-field-left-label",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:B}),X&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})]}):n.jsxs("div",{className:"sa-select-field",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:B}),X&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m}),G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]}):n.jsxs("div",{className:"sa-select-field",children:[m&&n.jsx("p",{className:"sa-select-field-helper-top",children:m}),G,E&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:E}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})},U=(e,p,i)=>{const l=e.length;let o=p+i;for(;o>=0&&o<l;){if(!e[o].disable)return o;o+=i}if(i===1){for(let r=0;r<l;r++)if(!e[r].disable)return r}else for(let r=l-1;r>=0;r--)if(!e[r].disable)return r;return-1},on=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 18 18",fill:"none",style:{flexShrink:0,cursor:"pointer"},...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),an=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),dn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 10L8 6L12 10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});b.Dropdown=rn,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
+`;function Y(e){const[p,i]=d.useState(e),l=d.useRef(null),r=o=>{l.current&&!l.current.contains(o.target)&&i(!1)};return d.useEffect(()=>(document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const _=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),R=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3.5 8L6.5 11L12.5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),nn=d.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:r,value:o,handleChangeValue:y,multiSelect:f,searchValue:F,highlightedIndex:k,footer:I,groupLabel:D,onSelectAll:A},H)=>{const S=d.useRef([]);d.useEffect(()=>{var a;k>=0&&S.current[k]&&((a=S.current[k])==null||a.scrollIntoView({block:"nearest"}))},[k]);const O=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(_,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{r&&r(a.target.value)},value:F,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:i?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:H,children:[e!=="top"&&O,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${f?"multi":""}`,children:[D&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:D}),f&&A&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),A()},children:"Select all"})]}),p.map((a,L)=>{const P=!!(o!=null&&o.find(B=>B.value===a.value)),z=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",z?"has-description":"",P?"active":"",L===k?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:B=>{S.current[L]=B},onClick:()=>y(a.label,a.value),children:[f&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:P&&n.jsx(R,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:d.cloneElement(a.icon,{width:16})}),n.jsxs("div",{style:{minWidth:0,flex:1},children:[n.jsx("p",{className:["sa-input-dropdwon-item-text",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.label}),a.description&&n.jsx("p",{className:["sa-input-dropdwon-item-text-description",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},L)})]}),e==="top"&&O,I&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:I})]}):null})}),en=({children:e,handleChangePosition:p})=>{const i=d.useRef(null);d.useEffect(()=>{var y;const r=()=>{if(i.current){let f=i.current.parentElement;for(;f&&!l(f);)f=f.parentElement;f&&p()}};let o=(y=i.current)==null?void 0:y.parentElement;for(;o&&!l(o);)o=o.parentElement;return o&&o.addEventListener("scroll",r),r(),()=>{o&&o.removeEventListener("scroll",r)}},[]);const l=r=>r&&(r.scrollHeight>r.clientHeight||r.scrollWidth>r.clientWidth);return n.jsx("div",{ref:i,children:e})},K="sa-input-dropdown-styles";(e=>{if(!document.getElementById(K)){const p=document.createElement("style");p.id=K,p.textContent=e,document.head.appendChild(p)}})(X);const on=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:r="md",multiSelect:o,searchAble:y,iconLeft:f,placeholder:F,onSearch:k,error:I,onBlur:D,onFocus:A,disable:H,searchValue:S,variant:O="outline",footer:a,groupLabel:L,onSelectAll:P,label:z,labelPosition:B="outside-top",required:T,optional:Z,description:E,helperText:N,errorText:w})=>{const C=l!==void 0,M=d.useRef(),dn=I||!!w,[c,j]=d.useState(C?l||[]:i||[]),[tn,Q]=d.useState(""),[x,q]=d.useState(-1),h=d.useRef(null),{isComponentVisible:u,ref:$,setIsComponentVisible:W}=Y(!1),ln=()=>{W(s=>!s)},V=(s,t)=>{if(o)if(c==null?void 0:c.find(b=>b.value===t)){const b=c.filter(fn=>fn.value!==t);C||j(b),p(b)}else{const b=[...c,{label:s,value:t}];C||j(b),p(b)}else{const v=[{label:s,value:t}];C||j(v),p(v),W(!1)}};d.useEffect(()=>{C&&j(l||[])},[l]),d.useEffect(()=>{C||JSON.stringify(M.current)===JSON.stringify(i)||(M.current=i,j(M.current||[]))},[i]);const pn=()=>c.length?o?c==null?void 0:c.map((s,t)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label}),n.jsx(rn,{onClick:v=>{v.stopPropagation(),V(s.label,s.value)}})]},t)):n.jsx("p",{style:{minWidth:"max-content"},children:c==null?void 0:c[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:F}),m=()=>{if($.current&&h.current){const s=window.innerHeight,t=$.current.getBoundingClientRect(),v=h.current.getBoundingClientRect(),b=t.bottom+v.height;h.current.style.left=`${t.left}px`,h.current.style.width=`${t.width}px`,b>=s-10?(h.current.style.top=`${t.top-v.height-5}px`,Q("top")):(h.current.style.top=`${t.top+t.height+4}px`,Q("bottom"))}};d.useEffect(()=>(window.addEventListener("scroll",m),window.addEventListener("resize",m),()=>{window.removeEventListener("scroll",m),window.removeEventListener("resize",m)}),[]),d.useEffect(()=>{m()},[u]),d.useEffect(()=>{if(!u||!h.current)return;const s=new ResizeObserver(()=>{m()});return s.observe(h.current),()=>s.disconnect()},[u]),d.useEffect(()=>{u||q(-1)},[u]);const cn=s=>{if(!u){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),W(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const t=U(e,x,1);t!==-1&&q(t);break}case"ArrowUp":{s.preventDefault();const t=U(e,x,-1);t!==-1&&q(t);break}case"Enter":{s.preventDefault(),x>=0&&e[x]&&!e[x].disable&&V(e[x].label,e[x].value);break}case"Escape":W(!1);break}},G=r==="lg"||r==="xl"?20:16,J=n.jsx(en,{handleChangePosition:m,children:n.jsxs("div",{className:["sa-input-dropdown-container",O,`sa-input-dropdown-size-${r}`,u?"active":"",dn?"error":"",H?"disable":""].filter(Boolean).join(" "),ref:$,onClick:ln,onKeyDown:cn,tabIndex:0,onBlur:D,onFocus:A,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[f?d.cloneElement(f,{width:G,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:pn()}),u?n.jsx(sn,{width:G}):n.jsx(an,{width:G})]}),n.jsx(nn,{dropdownLists:e,handleChangeValue:V,isComponentVisible:u,positionDropdown:tn,searchAble:!!y,value:c,onSearch:k,ref:h,multiSelect:o,searchValue:S,highlightedIndex:x,footer:a,groupLabel:L,onSelectAll:P})]})});return z?B==="outside-left"?n.jsxs("div",{className:"sa-select-field sa-select-field-left",children:[n.jsxs("div",{className:"sa-select-field-left-label",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:z}),Z&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[J,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})]}):n.jsxs("div",{className:"sa-select-field",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:z}),Z&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E}),J,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]}):n.jsxs("div",{className:"sa-select-field",children:[E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E}),J,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})},U=(e,p,i)=>{const l=e.length;let r=p+i;for(;r>=0&&r<l;){if(!e[r].disable)return r;r+=i}if(i===1){for(let o=0;o<l;o++)if(!e[o].disable)return o}else for(let o=l-1;o>=0;o--)if(!e[o].disable)return o;return-1},rn=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 18 18",fill:"none",style:{flexShrink:0,cursor:"pointer"},...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),an=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),sn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 10L8 6L12 10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});g.Dropdown=on,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});

package/package.json

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

package/dist/Checkbox.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-interface IProps {
-    isChecked: boolean;
-}
-declare const Checkbox: ({ isChecked }: IProps) => React.JSX.Element;
-export default Checkbox;