@starasia/dropdown 3.2.0 → 3.3.0

package/dist/dropdown.es.js

@@ -1,6 +1,6 @@
-import { jsxs as p, jsx as n, Fragment as G } from "react/jsx-runtime";
-import J, { useState as O, useRef as L, useEffect as x, forwardRef as Y } from "react";
-const _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+import { jsxs as t, jsx as n, Fragment as sn } from "react/jsx-runtime";
+import Y, { useState as P, useRef as I, useEffect as v, forwardRef as tn } from "react";
+const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -500,15 +500,15 @@ const _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   width: 100%;
 }
 `;
-function nn(e) {
-  const [l, i] = O(e), d = L(null), o = (r) => {
-    d.current && !d.current.contains(r.target) && i(!1);
+function ln(e) {
+  const [p, d] = P(e), l = I(null), o = (r) => {
+    l.current && !l.current.contains(r.target) && d(!1);
   };
-  return x(() => (document.addEventListener("click", o, !0), () => {
+  return v(() => (document.addEventListener("click", o, !0), () => {
     document.removeEventListener("click", o, !0);
-  }), []), { ref: d, isComponentVisible: l, setIsComponentVisible: i };
+  }), []), { ref: l, isComponentVisible: p, setIsComponentVisible: d };
 }
-const en = ({ ...e }) => /* @__PURE__ */ p(
+const pn = ({ ...e }) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -540,8 +540,8 @@ const en = ({ ...e }) => /* @__PURE__ */ p(
       )
     ]
   }
-), rn = ({ isChecked: e }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
-  /* @__PURE__ */ p("span", { className: "checkbox", children: [
+), cn = ({ isChecked: e }) => /* @__PURE__ */ t("div", { className: "checkbox-wrapper-30", children: [
+  /* @__PURE__ */ t("span", { className: "checkbox", children: [
     /* @__PURE__ */ n(
       "input",
       {
@@ -560,92 +560,92 @@ const en = ({ ...e }) => /* @__PURE__ */ p(
       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"
     }
   ) }) })
-] }), on = Y(
+] }), hn = tn(
   ({
     positionDropdown: e,
-    dropdownLists: l,
-    isComponentVisible: i,
-    searchAble: d,
+    dropdownLists: p,
+    isComponentVisible: d,
+    searchAble: l,
     onSearch: o,
     value: r,
-    handleChangeValue: c,
-    multiSelect: u,
-    searchValue: y,
-    highlightedIndex: h,
-    footer: g,
-    groupLabel: S,
-    onSelectAll: I
-  }, j) => {
-    const z = L([]);
-    x(() => {
+    handleChangeValue: y,
+    multiSelect: h,
+    searchValue: F,
+    highlightedIndex: x,
+    footer: A,
+    groupLabel: O,
+    onSelectAll: D
+  }, H) => {
+    const R = I([]);
+    v(() => {
       var a;
-      h >= 0 && z.current[h] && ((a = z.current[h]) == null || a.scrollIntoView({ block: "nearest" }));
-    }, [h]);
-    const A = d ? /* @__PURE__ */ p("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
-      /* @__PURE__ */ n(en, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
+      x >= 0 && R.current[x] && ((a = R.current[x]) == null || a.scrollIntoView({ block: "nearest" }));
+    }, [x]);
+    const j = l ? /* @__PURE__ */ t("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);
           },
-          value: y,
+          value: F,
           autoFocus: !0,
           placeholder: "Search..."
         }
       )
     ] }) : null;
-    return /* @__PURE__ */ n(G, { children: i ? /* @__PURE__ */ p(
+    return /* @__PURE__ */ n(sn, { children: d ? /* @__PURE__ */ t(
       "div",
       {
         className: "sa-input-dropdown-lists-container",
         onClick: (a) => a.stopPropagation(),
-        ref: j,
+        ref: H,
         children: [
-          e !== "top" && A,
-          /* @__PURE__ */ p(
+          e !== "top" && j,
+          /* @__PURE__ */ t(
             "div",
             {
-              className: `sa-input-dropdwon-item-container ${u ? "multi" : ""}`,
+              className: `sa-input-dropdwon-item-container ${h ? "multi" : ""}`,
               children: [
-                S && /* @__PURE__ */ p("div", { className: "sa-input-dropdown-section-header", children: [
-                  /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: S }),
-                  u && I && /* @__PURE__ */ n(
+                O && /* @__PURE__ */ t("div", { className: "sa-input-dropdown-section-header", children: [
+                  /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: O }),
+                  h && D && /* @__PURE__ */ n(
                     "button",
                     {
                       className: "sa-input-dropdown-section-select-all",
                       onClick: (a) => {
-                        a.stopPropagation(), I();
+                        a.stopPropagation(), D();
                       },
                       children: "Select all"
                     }
                   )
                 ] }),
-                l.map((a, B) => {
-                  const C = !!(r != null && r.find((b) => b.value === a.value));
-                  return /* @__PURE__ */ p(
+                p.map((a, S) => {
+                  const N = !!(r != null && r.find((g) => g.value === a.value));
+                  return /* @__PURE__ */ t(
                     "div",
                     {
                       className: [
                         "sa-input-dropdwon-item",
-                        C ? "active" : "",
-                        B === h ? "highlight" : "",
+                        N ? "active" : "",
+                        S === x ? "highlight" : "",
                         a.disable ? "sa-input-dropdwon-item-disable" : ""
                       ].filter(Boolean).join(" "),
-                      ref: (b) => {
-                        z.current[B] = b;
+                      ref: (g) => {
+                        R.current[S] = g;
                       },
-                      onClick: () => c(a.label, a.value),
+                      onClick: () => y(a.label, a.value),
                       children: [
-                        u && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ n(rn, { isChecked: C }) }),
-                        a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: J.cloneElement(a.icon, { width: 16 }) }),
-                        /* @__PURE__ */ p("div", { style: { minWidth: 0, flex: 1 }, children: [
+                        h && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ n(cn, { isChecked: N }) }),
+                        a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: Y.cloneElement(a.icon, { width: 16 }) }),
+                        /* @__PURE__ */ t("div", { style: { minWidth: 0, flex: 1 }, children: [
                           /* @__PURE__ */ n(
                             "p",
                             {
                               className: [
                                 "sa-input-dropdwon-item-text",
-                                C ? "active" : "",
+                                N ? "active" : "",
                                 a.disable ? "sa-input-dropdwon-item-disable" : ""
                               ].filter(Boolean).join(" "),
                               children: a.label
@@ -656,7 +656,7 @@ const en = ({ ...e }) => /* @__PURE__ */ p(
                             {
                               className: [
                                 "sa-input-dropdwon-item-text-description",
-                                C ? "active" : "",
+                                N ? "active" : "",
                                 a.disable ? "sa-input-dropdwon-item-disable" : ""
                               ].filter(Boolean).join(" "),
                               children: a.description
@@ -665,212 +665,249 @@ const en = ({ ...e }) => /* @__PURE__ */ p(
                         ] })
                       ]
                     },
-                    B
+                    S
                   );
                 })
               ]
             }
           ),
-          e === "top" && A,
-          g && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: g })
+          e === "top" && j,
+          A && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: A })
         ]
       }
     ) : null });
   }
-), an = ({
+), un = ({
   children: e,
-  handleChangePosition: l
+  handleChangePosition: p
 }) => {
-  const i = L(null);
-  x(() => {
-    var c;
+  const d = I(null);
+  v(() => {
+    var y;
     const o = () => {
-      if (i.current) {
-        let u = i.current.parentElement;
-        for (; u && !d(u); )
-          u = u.parentElement;
-        u && l();
+      if (d.current) {
+        let h = d.current.parentElement;
+        for (; h && !l(h); )
+          h = h.parentElement;
+        h && p();
       }
     };
-    let r = (c = i.current) == null ? void 0 : c.parentElement;
-    for (; r && !d(r); )
+    let r = (y = d.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 d = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
-  return /* @__PURE__ */ n("div", { ref: i, children: e });
-}, V = "sa-input-dropdown-styles", tn = (e) => {
-  if (!document.getElementById(V)) {
-    const l = document.createElement("style");
-    l.id = V, l.textContent = e, document.head.appendChild(l);
+  const l = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
+  return /* @__PURE__ */ n("div", { ref: d, children: e });
+}, Z = "sa-input-dropdown-styles", wn = (e) => {
+  if (!document.getElementById(Z)) {
+    const p = document.createElement("style");
+    p.id = Z, p.textContent = e, document.head.appendChild(p);
   }
 };
-tn(_);
-const K = ({
+wn(dn);
+const mn = ({
   dropdownLists: e,
-  onChange: l,
-  defaultValue: i,
-  value: d,
+  onChange: p,
+  defaultValue: d,
+  value: l,
   size: o = "md",
   multiSelect: r,
-  searchAble: c,
-  iconLeft: u,
-  placeholder: y,
-  onSearch: h,
-  error: g,
-  onBlur: S,
-  onFocus: I,
-  disable: j,
-  searchValue: z,
-  variant: A = "standard",
+  searchAble: y,
+  iconLeft: h,
+  placeholder: F,
+  onSearch: x,
+  error: A,
+  onBlur: O,
+  onFocus: D,
+  disable: H,
+  searchValue: R,
+  variant: j = "outline",
   footer: a,
-  groupLabel: B,
-  onSelectAll: C
+  groupLabel: S,
+  onSelectAll: N,
+  /* field wrapper */
+  label: g,
+  labelPosition: _ = "outside-top",
+  required: J,
+  optional: U,
+  description: E,
+  helperText: C,
+  errorText: u
 }) => {
-  const b = d !== void 0, W = L(), [w, R] = O(
-    b ? d || [] : i || []
-  ), [U, q] = O(""), [v, F] = O(-1), m = L(null), { isComponentVisible: k, ref: H, setIsComponentVisible: D } = nn(!1), M = () => {
-    D((t) => !t);
-  }, P = (t, s) => {
+  const z = l !== void 0, M = I(), T = A || !!u, [c, L] = P(
+    z ? l || [] : d || []
+  ), [nn, X] = P(""), [b, $] = P(-1), m = I(null), { isComponentVisible: k, ref: q, setIsComponentVisible: W } = ln(!1), en = () => {
+    W((i) => !i);
+  }, V = (i, s) => {
     if (r)
-      if (w == null ? void 0 : w.find((f) => f.value === s)) {
-        const f = w.filter((Q) => Q.value !== s);
-        b || R(f), l(f);
+      if (c == null ? void 0 : c.find((w) => w.value === s)) {
+        const w = c.filter((an) => an.value !== s);
+        z || L(w), p(w);
       } else {
-        const f = [...w, { label: t, value: s }];
-        b || R(f), l(f);
+        const w = [...c, { label: i, value: s }];
+        z || L(w), p(w);
       }
     else {
-      const N = [{ label: t, value: s }];
-      b || R(N), l(N), D(!1);
+      const f = [{ label: i, value: s }];
+      z || L(f), p(f), W(!1);
     }
   };
-  x(() => {
-    b && R(d || []);
-  }, [d]), x(() => {
-    b || JSON.stringify(W.current) === JSON.stringify(i) || (W.current = i, R(W.current || []));
-  }, [i]);
-  const X = () => w.length ? r ? w == null ? void 0 : w.map((t, s) => /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-item", children: [
-    /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }),
+  v(() => {
+    z && L(l || []);
+  }, [l]), v(() => {
+    z || JSON.stringify(M.current) === JSON.stringify(d) || (M.current = d, L(M.current || []));
+  }, [d]);
+  const rn = () => c.length ? r ? c == null ? void 0 : c.map((i, s) => /* @__PURE__ */ t("div", { className: "sa-input-dropdown-preview-item", children: [
+    /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: i == null ? void 0 : i.label }),
     /* @__PURE__ */ n(
-      sn,
+      bn,
       {
-        onClick: () => P(t.label, t.value)
+        onClick: (f) => {
+          f.stopPropagation(), V(i.label, i.value);
+        }
       }
     )
-  ] }, s)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: w == null ? void 0 : w[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: y }), E = () => {
-    if (H.current && m.current) {
-      const t = window.innerHeight, s = H.current.getBoundingClientRect(), N = m.current.getBoundingClientRect(), f = s.bottom + N.height;
-      m.current.style.left = `${s.left}px`, m.current.style.width = `${s.width}px`, f >= t - 10 ? (m.current.style.top = `${s.top - N.height - 5}px`, q("top")) : (m.current.style.top = `${s.top + s.height + 4}px`, q("bottom"));
+  ] }, s)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: F }), B = () => {
+    if (q.current && m.current) {
+      const i = window.innerHeight, s = q.current.getBoundingClientRect(), f = m.current.getBoundingClientRect(), w = s.bottom + f.height;
+      m.current.style.left = `${s.left}px`, m.current.style.width = `${s.width}px`, w >= i - 10 ? (m.current.style.top = `${s.top - f.height - 5}px`, X("top")) : (m.current.style.top = `${s.top + s.height + 4}px`, X("bottom"));
     }
   };
-  x(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
-    window.removeEventListener("scroll", E), window.removeEventListener("resize", E);
-  }), []), x(() => {
-    E();
-  }, [k]), x(() => {
-    k || F(-1);
+  v(() => (window.addEventListener("scroll", B), window.addEventListener("resize", B), () => {
+    window.removeEventListener("scroll", B), window.removeEventListener("resize", B);
+  }), []), v(() => {
+    B();
+  }, [k]), v(() => {
+    k || $(-1);
   }, [k]);
-  const Z = (t) => {
+  const on = (i) => {
     if (!k) {
-      (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), D(!0));
+      (i.key === "ArrowDown" || i.key === "Enter") && (i.preventDefault(), W(!0));
       return;
     }
-    switch (t.key) {
+    switch (i.key) {
       case "ArrowDown": {
-        t.preventDefault();
-        const s = T(e, v, 1);
-        s !== -1 && F(s);
+        i.preventDefault();
+        const s = Q(e, b, 1);
+        s !== -1 && $(s);
         break;
       }
       case "ArrowUp": {
-        t.preventDefault();
-        const s = T(e, v, -1);
-        s !== -1 && F(s);
+        i.preventDefault();
+        const s = Q(e, b, -1);
+        s !== -1 && $(s);
         break;
       }
       case "Enter": {
-        t.preventDefault(), v >= 0 && e[v] && !e[v].disable && P(
-          e[v].label,
-          e[v].value
+        i.preventDefault(), b >= 0 && e[b] && !e[b].disable && V(
+          e[b].label,
+          e[b].value
         );
         break;
       }
-      case "Escape": {
-        D(!1);
+      case "Escape":
+        W(!1);
         break;
-      }
     }
-  }, $ = dn(o);
-  return /* @__PURE__ */ n(an, { handleChangePosition: E, children: /* @__PURE__ */ p(
+  }, K = o === "lg" || o === "xl" ? 20 : 16, G = /* @__PURE__ */ n(un, { handleChangePosition: B, children: /* @__PURE__ */ t(
     "div",
     {
       className: [
         "sa-input-dropdown-container",
-        A,
+        j,
         `sa-input-dropdown-size-${o}`,
         k ? "active" : "",
-        g ? "error" : "",
-        j ? "disable" : ""
+        T ? "error" : "",
+        H ? "disable" : ""
       ].filter(Boolean).join(" "),
-      ref: H,
-      onClick: M,
-      onKeyDown: Z,
+      ref: q,
+      onClick: en,
+      onKeyDown: on,
       tabIndex: 0,
-      onBlur: S,
-      onFocus: I,
+      onBlur: O,
+      onFocus: D,
       children: [
-        /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-container", children: [
-          u ? /* @__PURE__ */ n(G, { children: J.cloneElement(u, {
-            width: $,
-            color: "var(--sa-dropdown-placeholder)",
-            style: { color: "var(--sa-dropdown-placeholder)" }
-          }) }) : null,
-          /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: X() }),
-          k ? /* @__PURE__ */ n(pn, { width: $ }) : /* @__PURE__ */ n(ln, { width: $ })
+        /* @__PURE__ */ t("div", { className: "sa-input-dropdown-preview-container", children: [
+          h ? Y.cloneElement(h, {
+            width: K,
+            style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 }
+          }) : null,
+          /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: rn() }),
+          k ? /* @__PURE__ */ n(vn, { width: K }) : /* @__PURE__ */ n(fn, { width: K })
         ] }),
         /* @__PURE__ */ n(
-          on,
+          hn,
           {
             dropdownLists: e,
-            handleChangeValue: P,
+            handleChangeValue: V,
             isComponentVisible: k,
-            positionDropdown: U,
-            searchAble: !!c,
-            value: w,
-            onSearch: h,
+            positionDropdown: nn,
+            searchAble: !!y,
+            value: c,
+            onSearch: x,
             ref: m,
             multiSelect: r,
-            searchValue: z,
-            highlightedIndex: v,
+            searchValue: R,
+            highlightedIndex: b,
             footer: a,
-            groupLabel: B,
-            onSelectAll: C
+            groupLabel: S,
+            onSelectAll: N
           }
         )
       ]
     }
   ) });
-}, T = (e, l, i) => {
-  const d = e.length;
-  let o = l + i;
-  for (; o >= 0 && o < d; ) {
+  return g ? _ === "outside-left" ? /* @__PURE__ */ t("div", { className: "sa-select-field sa-select-field-left", children: [
+    /* @__PURE__ */ t("div", { className: "sa-select-field-left-label", children: [
+      /* @__PURE__ */ t("div", { className: "sa-select-field-label-row", children: [
+        /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: g }),
+        U && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
+        J && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
+      ] }),
+      E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "sa-select-field-input-wrap", children: [
+      G,
+      C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
+      u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
+    ] })
+  ] }) : /* @__PURE__ */ t("div", { className: "sa-select-field", children: [
+    /* @__PURE__ */ t("div", { className: "sa-select-field-label-row", children: [
+      /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: g }),
+      U && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
+      J && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
+    ] }),
+    E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E }),
+    G,
+    C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
+    u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
+  ] }) : /* @__PURE__ */ t("div", { className: "sa-select-field", children: [
+    E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E }),
+    G,
+    C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
+    u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
+  ] });
+}, Q = (e, p, d) => {
+  const l = e.length;
+  let o = p + d;
+  for (; o >= 0 && o < l; ) {
     if (!e[o].disable)
       return o;
-    o += i;
+    o += d;
   }
-  if (i === 1) {
-    for (let r = 0; r < d; r++)
+  if (d === 1) {
+    for (let r = 0; r < l; r++)
       if (!e[r].disable)
         return r;
   } else
-    for (let r = d - 1; r >= 0; r--)
+    for (let r = l - 1; r >= 0; r--)
       if (!e[r].disable)
         return r;
   return -1;
-}, dn = (e) => e === "lg" || e === "xl" ? 20 : 16, sn = (e) => /* @__PURE__ */ n(
+}, bn = (e) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -878,6 +915,7 @@ const K = ({
     height: "14",
     viewBox: "0 0 18 18",
     fill: "none",
+    style: { flexShrink: 0, cursor: "pointer" },
     ...e,
     children: /* @__PURE__ */ n(
       "path",
@@ -890,7 +928,7 @@ const K = ({
       }
     )
   }
-), ln = ({ width: e = 16 }) => /* @__PURE__ */ n(
+), fn = ({ width: e = 16 }) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -910,7 +948,7 @@ const K = ({
       }
     )
   }
-), pn = ({ width: e = 16 }) => /* @__PURE__ */ n(
+), vn = ({ width: e = 16 }) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -930,41 +968,7 @@ const K = ({
       }
     )
   }
-), wn = ({
-  label: e,
-  labelPosition: l = "top",
-  required: i,
-  optional: d,
-  helperText: o,
-  helperTextTop: r,
-  errorMessage: c,
-  error: u,
-  ...y
-}) => {
-  const h = u || !!c, g = e ? /* @__PURE__ */ p("div", { className: "sa-select-field-label-row", children: [
-    /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: e }),
-    d && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
-    i && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
-  ] }) : null;
-  return l === "left" ? /* @__PURE__ */ p("div", { className: "sa-select-field sa-select-field-left", children: [
-    /* @__PURE__ */ p("div", { className: "sa-select-field-left-label", children: [
-      g,
-      r && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: r })
-    ] }),
-    /* @__PURE__ */ p("div", { className: "sa-select-field-input-wrap", children: [
-      /* @__PURE__ */ n(K, { ...y, error: h }),
-      o && !c && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: o }),
-      c && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: c })
-    ] })
-  ] }) : /* @__PURE__ */ p("div", { className: "sa-select-field", children: [
-    g,
-    r && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: r }),
-    /* @__PURE__ */ n(K, { ...y, error: h }),
-    o && !c && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: o }),
-    c && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: c })
-  ] });
-};
+);
 export {
-  K as Dropdown,
-  wn as SelectField
+  mn as Dropdown
 };

package/dist/dropdown.umd.js

@@ -1,4 +1,4 @@
-(function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u.Dropdown={},u.jsxRuntime,u.React))})(this,function(u,n,d){"use strict";const K=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+(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,d){"use strict";const Z=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -497,4 +497,4 @@
   height: 100%;
   width: 100%;
 }
-`;function G(e){const[p,t]=d.useState(e),i=d.useRef(null),o=r=>{i.current&&!i.current.contains(r.target)&&t(!1)};return d.useEffect(()=>(document.addEventListener("click",o,!0),()=>{document.removeEventListener("click",o,!0)}),[]),{ref:i,isComponentVisible:p,setIsComponentVisible:t}}const J=({...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"})]}),M=({isChecked:e})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:e}),n.jsx("svg",{children:n.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:n.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:n.jsx("path",{fill:"none",stroke:"currentColor",d:"M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"})})})]}),U=d.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:t,searchAble:i,onSearch:o,value:r,handleChangeValue:c,multiSelect:w,searchValue:m,highlightedIndex:f,footer:g,groupLabel:L,onSelectAll:I},O)=>{const z=d.useRef([]);d.useEffect(()=>{var a;f>=0&&z.current[f]&&((a=z.current[f])==null||a.scrollIntoView({block:"nearest"}))},[f]);const A=i?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(J,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{o&&o(a.target.value)},value:m,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:t?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:O,children:[e!=="top"&&A,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${w?"multi":""}`,children:[L&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:L}),w&&I&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),I()},children:"Select all"})]}),p.map((a,S)=>{const E=!!(r!=null&&r.find(b=>b.value===a.value));return n.jsxs("div",{className:["sa-input-dropdwon-item",E?"active":"",S===f?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:b=>{z.current[S]=b},onClick:()=>c(a.label,a.value),children:[w&&n.jsx("div",{style:{flexShrink:0},children:n.jsx(M,{isChecked:E})}),a.icon&&n.jsx("div",{style:{flexShrink:0},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",E?"active":"",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",E?"active":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},S)})]}),e==="top"&&A,g&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:g})]}):null})}),X=({children:e,handleChangePosition:p})=>{const t=d.useRef(null);d.useEffect(()=>{var c;const o=()=>{if(t.current){let w=t.current.parentElement;for(;w&&!i(w);)w=w.parentElement;w&&p()}};let r=(c=t.current)==null?void 0:c.parentElement;for(;r&&!i(r);)r=r.parentElement;return r&&r.addEventListener("scroll",o),o(),()=>{r&&r.removeEventListener("scroll",o)}},[]);const i=o=>o&&(o.scrollHeight>o.clientHeight||o.scrollWidth>o.clientWidth);return n.jsx("div",{ref:t,children:e})},T="sa-input-dropdown-styles";(e=>{if(!document.getElementById(T)){const p=document.createElement("style");p.id=T,p.textContent=e,document.head.appendChild(p)}})(K);const D=({dropdownLists:e,onChange:p,defaultValue:t,value:i,size:o="md",multiSelect:r,searchAble:c,iconLeft:w,placeholder:m,onSearch:f,error:g,onBlur:L,onFocus:I,disable:O,searchValue:z,variant:A="standard",footer:a,groupLabel:S,onSelectAll:E})=>{const b=i!==void 0,W=d.useRef(),[h,B]=d.useState(b?i||[]:t||[]),[nn,V]=d.useState(""),[x,F]=d.useState(-1),k=d.useRef(null),{isComponentVisible:y,ref:P,setIsComponentVisible:j}=G(!1),en=()=>{j(s=>!s)},H=(s,l)=>{if(r)if(h==null?void 0:h.find(v=>v.value===l)){const v=h.filter(an=>an.value!==l);b||B(v),p(v)}else{const v=[...h,{label:s,value:l}];b||B(v),p(v)}else{const N=[{label:s,value:l}];b||B(N),p(N),j(!1)}};d.useEffect(()=>{b&&B(i||[])},[i]),d.useEffect(()=>{b||JSON.stringify(W.current)===JSON.stringify(t)||(W.current=t,B(W.current||[]))},[t]);const rn=()=>h.length?r?h==null?void 0:h.map((s,l)=>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(Q,{onClick:()=>H(s.label,s.value)})]},l)):n.jsx("p",{style:{minWidth:"max-content"},children:h==null?void 0:h[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:m}),C=()=>{if(P.current&&k.current){const s=window.innerHeight,l=P.current.getBoundingClientRect(),N=k.current.getBoundingClientRect(),v=l.bottom+N.height;k.current.style.left=`${l.left}px`,k.current.style.width=`${l.width}px`,v>=s-10?(k.current.style.top=`${l.top-N.height-5}px`,V("top")):(k.current.style.top=`${l.top+l.height+4}px`,V("bottom"))}};d.useEffect(()=>(window.addEventListener("scroll",C),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}),[]),d.useEffect(()=>{C()},[y]),d.useEffect(()=>{y||F(-1)},[y]);const on=s=>{if(!y){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),j(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const l=$(e,x,1);l!==-1&&F(l);break}case"ArrowUp":{s.preventDefault();const l=$(e,x,-1);l!==-1&&F(l);break}case"Enter":{s.preventDefault(),x>=0&&e[x]&&!e[x].disable&&H(e[x].label,e[x].value);break}case"Escape":{j(!1);break}}},q=Z(o);return n.jsx(X,{handleChangePosition:C,children:n.jsxs("div",{className:["sa-input-dropdown-container",A,`sa-input-dropdown-size-${o}`,y?"active":"",g?"error":"",O?"disable":""].filter(Boolean).join(" "),ref:P,onClick:en,onKeyDown:on,tabIndex:0,onBlur:L,onFocus:I,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[w?n.jsx(n.Fragment,{children:d.cloneElement(w,{width:q,color:"var(--sa-dropdown-placeholder)",style:{color:"var(--sa-dropdown-placeholder)"}})}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:rn()}),y?n.jsx(_,{width:q}):n.jsx(Y,{width:q})]}),n.jsx(U,{dropdownLists:e,handleChangeValue:H,isComponentVisible:y,positionDropdown:nn,searchAble:!!c,value:h,onSearch:f,ref:k,multiSelect:r,searchValue:z,highlightedIndex:x,footer:a,groupLabel:S,onSelectAll:E})]})})},$=(e,p,t)=>{const i=e.length;let o=p+t;for(;o>=0&&o<i;){if(!e[o].disable)return o;o+=t}if(t===1){for(let r=0;r<i;r++)if(!e[r].disable)return r}else for(let r=i-1;r>=0;r--)if(!e[r].disable)return r;return-1},Z=e=>e==="lg"||e==="xl"?20:16,Q=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 18 18",fill:"none",...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),Y=({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"})}),_=({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"})}),R=({label:e,labelPosition:p="top",required:t,optional:i,helperText:o,helperTextTop:r,errorMessage:c,error:w,...m})=>{const f=w||!!c,g=e?n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:e}),i&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),t&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}):null;return p==="left"?n.jsxs("div",{className:"sa-select-field sa-select-field-left",children:[n.jsxs("div",{className:"sa-select-field-left-label",children:[g,r&&n.jsx("p",{className:"sa-select-field-helper-top",children:r})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[n.jsx(D,{...m,error:f}),o&&!c&&n.jsx("p",{className:"sa-select-field-helper",children:o}),c&&n.jsx("p",{className:"sa-select-field-error-msg",children:c})]})]}):n.jsxs("div",{className:"sa-select-field",children:[g,r&&n.jsx("p",{className:"sa-select-field-helper-top",children:r}),n.jsx(D,{...m,error:f}),o&&!c&&n.jsx("p",{className:"sa-select-field-helper",children:o}),c&&n.jsx("p",{className:"sa-select-field-error-msg",children:c})]})};u.Dropdown=D,u.SelectField=R,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+`;function Q(e){const[p,t]=d.useState(e),l=d.useRef(null),o=r=>{l.current&&!l.current.contains(r.target)&&t(!1)};return d.useEffect(()=>(document.addEventListener("click",o,!0),()=>{document.removeEventListener("click",o,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:t}}const Y=({...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"})]}),_=({isChecked:e})=>n.jsxs("div",{className:"checkbox-wrapper-30",children:[n.jsxs("span",{className:"checkbox",children:[n.jsx("input",{type:"checkbox",style:{pointerEvents:"none"},checked:e}),n.jsx("svg",{children:n.jsx("use",{xlinkHref:"#checkbox-30",className:"checkbox"})})]}),n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"},children:n.jsx("symbol",{id:"checkbox-30",viewBox:"0 0 22 22",children:n.jsx("path",{fill:"none",stroke:"currentColor",d:"M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"})})})]}),R=d.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:t,searchAble:l,onSearch:o,value:r,handleChangeValue:m,multiSelect:h,searchValue:P,highlightedIndex:x,footer:j,groupLabel:A,onSelectAll:D},F)=>{const B=d.useRef([]);d.useEffect(()=>{var a;x>=0&&B.current[x]&&((a=B.current[x])==null||a.scrollIntoView({block:"nearest"}))},[x]);const O=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(Y,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{o&&o(a.target.value)},value:P,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:t?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:F,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,L)=>{const E=!!(r!=null&&r.find(g=>g.value===a.value));return n.jsxs("div",{className:["sa-input-dropdwon-item",E?"active":"",L===x?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:g=>{B.current[L]=g},onClick:()=>m(a.label,a.value),children:[h&&n.jsx("div",{style:{flexShrink:0},children:n.jsx(_,{isChecked:E})}),a.icon&&n.jsx("div",{style:{flexShrink:0},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",E?"active":"",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",E?"active":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},L)})]}),e==="top"&&O,j&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:j})]}):null})}),nn=({children:e,handleChangePosition:p})=>{const t=d.useRef(null);d.useEffect(()=>{var m;const o=()=>{if(t.current){let h=t.current.parentElement;for(;h&&!l(h);)h=h.parentElement;h&&p()}};let r=(m=t.current)==null?void 0:m.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:t,children:e})},G="sa-input-dropdown-styles";(e=>{if(!document.getElementById(G)){const p=document.createElement("style");p.id=G,p.textContent=e,document.head.appendChild(p)}})(Z);const en=({dropdownLists:e,onChange:p,defaultValue:t,value:l,size:o="md",multiSelect:r,searchAble:m,iconLeft:h,placeholder:P,onSearch:x,error:j,onBlur:A,onFocus:D,disable:F,searchValue:B,variant:O="outline",footer:a,groupLabel:L,onSelectAll:E,label:g,labelPosition:sn="outside-top",required:U,optional:T,description:N,helperText:C,errorText:f})=>{const z=l!==void 0,H=d.useRef(),dn=j||!!f,[c,I]=d.useState(z?l||[]:t||[]),[tn,X]=d.useState(""),[u,M]=d.useState(-1),k=d.useRef(null),{isComponentVisible:y,ref:q,setIsComponentVisible:W}=Q(!1),ln=()=>{W(s=>!s)},$=(s,i)=>{if(r)if(c==null?void 0:c.find(w=>w.value===i)){const w=c.filter(hn=>hn.value!==i);z||I(w),p(w)}else{const w=[...c,{label:s,value:i}];z||I(w),p(w)}else{const v=[{label:s,value:i}];z||I(v),p(v),W(!1)}};d.useEffect(()=>{z&&I(l||[])},[l]),d.useEffect(()=>{z||JSON.stringify(H.current)===JSON.stringify(t)||(H.current=t,I(H.current||[]))},[t]);const pn=()=>c.length?r?c==null?void 0:c.map((s,i)=>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(),$(s.label,s.value)}})]},i)):n.jsx("p",{style:{minWidth:"max-content"},children:c==null?void 0:c[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:P}),S=()=>{if(q.current&&k.current){const s=window.innerHeight,i=q.current.getBoundingClientRect(),v=k.current.getBoundingClientRect(),w=i.bottom+v.height;k.current.style.left=`${i.left}px`,k.current.style.width=`${i.width}px`,w>=s-10?(k.current.style.top=`${i.top-v.height-5}px`,X("top")):(k.current.style.top=`${i.top+i.height+4}px`,X("bottom"))}};d.useEffect(()=>(window.addEventListener("scroll",S),window.addEventListener("resize",S),()=>{window.removeEventListener("scroll",S),window.removeEventListener("resize",S)}),[]),d.useEffect(()=>{S()},[y]),d.useEffect(()=>{y||M(-1)},[y]);const cn=s=>{if(!y){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),W(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const i=J(e,u,1);i!==-1&&M(i);break}case"ArrowUp":{s.preventDefault();const i=J(e,u,-1);i!==-1&&M(i);break}case"Enter":{s.preventDefault(),u>=0&&e[u]&&!e[u].disable&&$(e[u].label,e[u].value);break}case"Escape":W(!1);break}},V=o==="lg"||o==="xl"?20:16,K=n.jsx(nn,{handleChangePosition:S,children:n.jsxs("div",{className:["sa-input-dropdown-container",O,`sa-input-dropdown-size-${o}`,y?"active":"",dn?"error":"",F?"disable":""].filter(Boolean).join(" "),ref:q,onClick:ln,onKeyDown:cn,tabIndex:0,onBlur:A,onFocus:D,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[h?d.cloneElement(h,{width:V,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:pn()}),y?n.jsx(an,{width:V}):n.jsx(on,{width:V})]}),n.jsx(R,{dropdownLists:e,handleChangeValue:$,isComponentVisible:y,positionDropdown:tn,searchAble:!!m,value:c,onSearch:x,ref:k,multiSelect:r,searchValue:B,highlightedIndex:u,footer:a,groupLabel:L,onSelectAll:E})]})});return g?sn==="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:g}),T&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),U&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[K,C&&!f&&n.jsx("p",{className:"sa-select-field-helper",children:C}),f&&n.jsx("p",{className:"sa-select-field-error-msg",children:f})]})]}):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:g}),T&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),U&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N}),K,C&&!f&&n.jsx("p",{className:"sa-select-field-helper",children:C}),f&&n.jsx("p",{className:"sa-select-field-error-msg",children:f})]}):n.jsxs("div",{className:"sa-select-field",children:[N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N}),K,C&&!f&&n.jsx("p",{className:"sa-select-field-helper",children:C}),f&&n.jsx("p",{className:"sa-select-field-error-msg",children:f})]})},J=(e,p,t)=>{const l=e.length;let o=p+t;for(;o>=0&&o<l;){if(!e[o].disable)return o;o+=t}if(t===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},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"})}),on=({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"})}),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 10L8 6L12 10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});b.Dropdown=en,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export { Dropdown } from "./Dropdown";
-export { SelectField } from "./SelectField";
 export * from "./interface";

package/dist/interface.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 export interface IconPropsDropdown extends React.SVGProps<SVGSVGElement> {
 }
+export type DropdownSize = "sm" | "md" | "lg" | "xl";
+export type DropdownVariant = "standard" | "outline" | "flushed";
+export type DropdownLabelPosition = "outside-top" | "outside-left";
 export interface IDropdown {
     onChange: (props: {
         label: string;
@@ -21,7 +24,7 @@ export interface IDropdown {
         label: string;
         value: string;
     }[];
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: DropdownSize;
     error?: boolean;
     multiSelect?: boolean;
     searchAble?: boolean;
@@ -33,17 +36,15 @@ export interface IDropdown {
     onFocus?: (e: React.FocusEvent<HTMLDivElement, Element>) => void;
     disable?: boolean;
     searchValue?: string;
-    variant?: "standard" | "outline" | "flushed";
+    variant?: DropdownVariant;
     footer?: React.ReactNode;
     groupLabel?: string;
     onSelectAll?: () => void;
-}
-export interface ISelectField extends IDropdown {
-    label?: string;
-    labelPosition?: "top" | "left";
+    label?: React.ReactNode;
+    labelPosition?: DropdownLabelPosition;
     required?: boolean;
     optional?: boolean;
+    description?: string;
     helperText?: string;
-    helperTextTop?: string;
-    errorMessage?: string;
+    errorText?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/dropdown",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "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"
   }
-}
+}

package/dist/SelectField.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import { ISelectField } from "./interface";
-export declare const SelectField: React.FC<ISelectField>;