@snmt-react-ui/async-select 1.5.6 → 1.6.0

package/dist/async-select.js

@@ -1,8 +1,8 @@
 import "./index.css";
-import { jsx as t, Fragment as G, jsxs as c } from "react/jsx-runtime";
-import { createContext as q, forwardRef as J, useState as u, useRef as s1, useEffect as Z, useCallback as M, useContext as i1, useImperativeHandle as v1 } from "react";
+import { jsx as t, Fragment as I, jsxs as c } from "react/jsx-runtime";
+import { createContext as z, forwardRef as q, useState as u, useRef as s1, useEffect as E, useCallback as x, useContext as i1, useImperativeHandle as v1 } from "react";
 import { Select as N1, Flex as f1, Avatar as M1, Checkbox as x1, Typography as n1, Tag as h1, Popover as _1 } from "antd";
-const z = ({
+const $ = ({
   children: i,
   direction: o = "row",
   flexWrap: e = "nowrap",
@@ -38,8 +38,8 @@ const z = ({
     }
   );
 };
-var A = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(A || {});
-const c1 = q({
+var W = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(W || {});
+const c1 = z({
   locale: "en",
   theme: "light"
 });
@@ -53,7 +53,7 @@ const H1 = ({
   disableUncheck: w = !1
 }) => {
   const [g, s] = u(i), [p, k] = u(o);
-  Z(() => {
+  E(() => {
     s(i), k(o);
   }, [i, o]);
   const { theme: h } = i1(c1);
@@ -72,7 +72,7 @@ const H1 = ({
   );
 };
 var C = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(C || {});
-const a1 = q({
+const a1 = z({
   locale: "en",
   theme: "light"
 });
@@ -3120,7 +3120,7 @@ const V1 = ({
       }
     )
   }
-), $ = ({
+), P = ({
   name: i,
   width: o,
   height: e,
@@ -3130,13 +3130,13 @@ const V1 = ({
   onClick: g
 }) => {
   const [s, p] = u(r), { theme: k } = i1(a1), h = w ? k && k === "dark" ? C.GREY_LIGHT_4 : C.GREY_DARK_1 : l, n = w ? void 0 : g;
-  return Z(() => {
+  return E(() => {
     if (r) {
       n && !w && p(`${r} clickable`);
       return;
     }
     n && !w && p("clickable");
-  }, [n, r, w]), /* @__PURE__ */ t(G, { children: (() => {
+  }, [n, r, w]), /* @__PURE__ */ t(I, { children: (() => {
     switch (i) {
       case "nextIcon":
         return v2({ width: o, height: e, color: h, className: s, onClick: n });
@@ -3379,7 +3379,7 @@ const V1 = ({
       case "projects":
         return t5({ width: o, height: e, color: h, className: s, onClick: n });
       default:
-        return /* @__PURE__ */ t(G, { children: "No Icon provided" });
+        return /* @__PURE__ */ t(I, { children: "No Icon provided" });
     }
   })() });
 }, { Title: l5, Text: r5 } = n1, s5 = {
@@ -3387,7 +3387,7 @@ const V1 = ({
   h2: 2,
   h3: 3,
   h4: 4
-}, n5 = J(
+}, n5 = q(
   ({
     align: i = "inherit",
     variant: o = "body1",
@@ -3422,7 +3422,7 @@ const V1 = ({
   }
 );
 var d = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(d || {});
-const C1 = q({
+const C1 = z({
   locale: "en",
   theme: "light"
 });
@@ -6480,13 +6480,13 @@ const h5 = ({
   onClick: g
 }) => {
   const [s, p] = u(r), { theme: k } = i1(C1), h = w ? k && k === "dark" ? d.GREY_LIGHT_4 : d.GREY_DARK_1 : l, n = w ? void 0 : g;
-  return Z(() => {
+  return E(() => {
     if (r) {
       n && !w && p(`${r} clickable`);
       return;
     }
     n && !w && p("clickable");
-  }, [n, r, w]), /* @__PURE__ */ t(G, { children: (() => {
+  }, [n, r, w]), /* @__PURE__ */ t(I, { children: (() => {
     switch (i) {
       case "nextIcon":
         return e3({ width: o, height: e, color: h, className: s, onClick: n });
@@ -6729,12 +6729,12 @@ const h5 = ({
       case "projects":
         return j3({ width: o, height: e, color: h, className: s, onClick: n });
       default:
-        return /* @__PURE__ */ t(G, { children: "No Icon provided" });
+        return /* @__PURE__ */ t(I, { children: "No Icon provided" });
     }
   })() });
 };
 var d1 = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(d1 || {});
-const y3 = q({
+const y3 = z({
   locale: "en",
   theme: "light"
 });
@@ -6766,7 +6766,7 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
   h2: 2,
   h3: 3,
   h4: 4
-}, k1 = J(
+}, k1 = q(
   ({
     align: i = "inherit",
     variant: o = "body1",
@@ -6832,7 +6832,7 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
   extraOptions: w
 }) => {
   const [g, s] = u(!1);
-  Z(() => {
+  E(() => {
     i.length || s(!1);
   }, [i]);
   const p = (h) => {
@@ -6841,15 +6841,15 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
   if (!i.length)
     return null;
   const k = (h) => {
-    var n, H;
-    return ((n = r == null ? void 0 : r.find((x) => x.value === h)) == null ? void 0 : n.label) || ((H = w == null ? void 0 : w.find((x) => x.value === h)) == null ? void 0 : H.label) || h;
+    var n, V;
+    return ((n = r == null ? void 0 : r.find((_) => _.value === h)) == null ? void 0 : n.label) || ((V = w == null ? void 0 : w.find((_) => _.value === h)) == null ? void 0 : V.label) || h;
   };
   return /* @__PURE__ */ t("div", { onMouseDown: p, className: "wrapper", children: /* @__PURE__ */ t(
     b3,
     {
       content: (
         // 90: paddings + margins + gaps and so on
-        /* @__PURE__ */ t("div", { style: { maxWidth: e - 90 }, children: /* @__PURE__ */ t(z, { gap: 6, flexWrap: "wrap", children: i.map(({ value: h }) => /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { style: { maxWidth: e - 90 }, children: /* @__PURE__ */ t($, { gap: 6, flexWrap: "wrap", children: i.map(({ value: h }) => /* @__PURE__ */ t(
           w1,
           {
             onClose: () => o(h),
@@ -6862,7 +6862,7 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
       placement: "bottomRight",
       isOpen: g,
       setIsOpen: s,
-      children: /* @__PURE__ */ t(h1, { className: `overflow-button ${g ? "open" : ""}`, bordered: !1, children: /* @__PURE__ */ c(k1, { variant: "body4", color: g ? A.BLUE_PRIMARY : void 0, children: [
+      children: /* @__PURE__ */ t(h1, { className: `overflow-button ${g ? "open" : ""}`, bordered: !1, children: /* @__PURE__ */ c(k1, { variant: "body4", color: g ? W.BLUE_PRIMARY : void 0, children: [
         i.length,
         " more"
       ] }) })
@@ -6876,7 +6876,7 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
     backgroundSize: "20% calc(200% + 20px)"
   };
   return /* @__PURE__ */ t("span", { className: "snmt-loader", style: l });
-}, r1 = J(
+}, r1 = q(
   ({
     value: i,
     onChange: o,
@@ -6890,100 +6890,100 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
     clearable: k = !1,
     scrollThresholdValue: h = 50,
     onSearchChange: n,
-    onDropdownVisibleChange: H,
-    onScrollToEnd: D,
-    onPopupScroll: x,
-    id: b,
-    extraOptions: _,
-    dropdownRender: j,
-    optionRender: T,
-    isLoading: V,
+    onDropdownVisibleChange: V,
+    onScrollToEnd: B,
+    onPopupScroll: _,
+    id: J,
+    extraOptions: R,
+    dropdownRender: A,
+    optionRender: G,
+    isLoading: D,
     readOnly: f
-  }, F) => {
-    const [y, S] = u(!1), [R, W] = u(!1), [U, Y] = u(!0), [v, I] = u(i), m = s1(null);
-    Z(() => {
-      I(i);
+  }, j) => {
+    const [T, y] = u(!1), [S, H] = u(!1), [Z, Y] = u(!0), [v, K] = u(i), O = s1(null);
+    E(() => {
+      K(i);
     }, [i]);
-    const Q = (a) => {
-      S(a), H && H(a);
-    }, X = (a, L) => {
-      var N;
-      return !!((N = L == null ? void 0 : L.label) != null && N.toString().toLowerCase().includes(a.toLowerCase()));
-    }, K = () => {
-      W(!0);
-    }, E = () => {
-      W(!1);
-    }, B = M(
+    const m = (a) => {
+      y(a), V && V(a);
+    }, Q = (a, L) => {
+      var M;
+      return !!((M = L == null ? void 0 : L.label) != null && M.toString().toLowerCase().includes(a.toLowerCase()));
+    }, X = () => {
+      H(!0);
+    }, b = () => {
+      H(!1);
+    }, N = x(
       (a) => {
-        if (I(a), l) {
-          const N = a;
-          o == null || o(N);
+        if (K(a), l) {
+          const M = a;
+          o == null || o(M);
           return;
         }
         const L = a;
         o == null || o(L);
       },
       [l, o]
-    ), g1 = M(() => {
+    ), g1 = x(() => {
       if (!f) {
         if (l) {
-          B([]);
+          N([]);
           return;
         }
-        B("");
+        N("");
       }
-    }, [B, l, f]), P = M(
+    }, [N, l, f]), U = x(
       (a) => {
-        const L = v.filter((N) => N !== a);
-        B(L), I(L);
+        const L = v.filter((M) => M !== a);
+        N(L), K(L);
       },
-      [B, v]
-    ), t1 = M(
+      [N, v]
+    ), t1 = x(
       (a) => (v == null ? void 0 : v.indexOf(a)) === 0 ? (
         // if the search input is empty
         // then display the placeholder, else do not display it
-        /* @__PURE__ */ t("span", { className: "custom-placeholder", children: U ? e : "" })
-      ) : /* @__PURE__ */ t(G, {}),
-      [U, v, e]
+        /* @__PURE__ */ t("span", { className: "custom-placeholder", children: Z ? e : "" })
+      ) : /* @__PURE__ */ t(I, {}),
+      [Z, v, e]
     ), p1 = (a) => {
       a.preventDefault(), a.stopPropagation();
     }, L1 = async (a) => {
       const { target: L } = a;
-      L.scrollTop + L.offsetHeight >= L.scrollHeight - h && (D == null || D(!0)), x && await x(a);
-    }, e1 = M(
+      L.scrollTop + L.offsetHeight >= L.scrollHeight - h && (B == null || B(!0)), _ && await _(a);
+    }, e1 = x(
       (a) => {
-        var L, N;
-        return ((L = w.find((o1) => o1.value === a)) == null ? void 0 : L.label) || ((N = _ == null ? void 0 : _.find(
+        var L, M;
+        return ((L = w.find((o1) => o1.value === a)) == null ? void 0 : L.label) || ((M = R == null ? void 0 : R.find(
           (o1) => o1.value === a
-        )) == null ? void 0 : N.label) || a;
+        )) == null ? void 0 : M.label) || a;
       },
-      [_, w]
-    ), m1 = M(
+      [R, w]
+    ), m1 = x(
       (a) => {
         var L;
         return /* @__PURE__ */ t(
           F3,
           {
             values: a,
-            onTagClose: P,
-            maxWidth: ((L = m.current) == null ? void 0 : L.clientWidth) || 0,
+            onTagClose: U,
+            maxWidth: ((L = O.current) == null ? void 0 : L.clientWidth) || 0,
             disabled: s || f,
             options: w,
-            extraOptions: _
+            extraOptions: R
           }
         );
       },
-      [s, _, P, w, f]
-    ), u1 = M(
-      ({ label: a, value: L, mode: N }) => N === "filter" ? t1(L) : /* @__PURE__ */ t("div", { onMouseDown: p1, className: "tag-wrapper", children: /* @__PURE__ */ t(w1, { onClose: () => P(L), closable: !s, children: /* @__PURE__ */ t(k1, { variant: "body4", children: typeof a == "object" ? a : e1(L) }) }) }),
-      [s, e1, P, t1]
+      [s, R, U, w, f]
+    ), u1 = x(
+      ({ label: a, value: L, mode: M }) => M === "filter" ? t1(L) : /* @__PURE__ */ t("div", { onMouseDown: p1, className: "tag-wrapper", children: /* @__PURE__ */ t(w1, { onClose: () => U(L), closable: !s, children: /* @__PURE__ */ t(k1, { variant: "body4", children: typeof a == "object" ? a : e1(L) }) }) }),
+      [s, e1, U, t1]
     );
     return /* @__PURE__ */ c(
       "div",
       {
-        className: `snmt-select ${R ? "snmt-select-focused" : ""} 
+        className: `snmt-select ${S ? "snmt-select-focused" : ""} 
                 ${l ? "" : "snmt-select-single"} ${f ? "snmt-select-read-only" : ""}`,
-        ref: m,
+        ref: O,
         style: { width: g },
         children: [
           /* @__PURE__ */ t(
@@ -6991,19 +6991,19 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
             {
               className: "snmt-select-blank",
               popupClassName: f ? "dropdown-read-only" : "",
-              id: b,
-              ref: F,
+              id: J,
+              ref: j,
               showSearch: !!r,
-              filterOption: r && X,
-              onDropdownVisibleChange: Q,
+              filterOption: r && Q,
+              onDropdownVisibleChange: m,
               placeholder: e ? p ? `${e}*` : e : void 0,
               disabled: s,
               value: v || void 0,
               labelRender: (a) => e1(a.value),
               mode: l === "filter" ? "multiple" : l,
-              onChange: B,
-              onFocus: K,
-              onBlur: E,
+              onChange: N,
+              onFocus: X,
+              onBlur: b,
               onSearch: (a) => {
                 Y(!a), n && n(a);
               },
@@ -7013,45 +7013,45 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
               maxTagCount: "responsive",
               maxTagPlaceholder: m1,
               onPopupScroll: L1,
-              prefix: V && /* @__PURE__ */ t(l1, { size: 15 }),
-              suffixIcon: /* @__PURE__ */ t("div", { className: "wrapper-suffix-icon", children: l !== "filter" && /* @__PURE__ */ c(G, { children: [
-                v && !!v.length && (l || k) && /* @__PURE__ */ t("div", { onClick: g1, children: /* @__PURE__ */ t($, { name: "cancel" }) }),
+              prefix: D && /* @__PURE__ */ t(l1, { size: 15 }),
+              suffixIcon: /* @__PURE__ */ t("div", { className: "wrapper-suffix-icon", children: l !== "filter" && /* @__PURE__ */ c(I, { children: [
+                v && !!v.length && (l || k) && /* @__PURE__ */ t("div", { onClick: g1, children: /* @__PURE__ */ t(P, { name: "cancel" }) }),
                 /* @__PURE__ */ t(
-                  $,
+                  P,
                   {
                     name: "selectArrowIcon",
-                    color: s ? A.GREY_DARK_1 : A.GREY_DARK_5,
-                    className: y ? "select-arrow-rotated" : "select-arrow",
-                    onClick: () => S(!y)
+                    color: s ? W.GREY_DARK_1 : W.GREY_DARK_5,
+                    className: T ? "select-arrow-rotated" : "select-arrow",
+                    onClick: () => y(!T)
                   }
                 )
               ] }) }),
-              removeIcon: /* @__PURE__ */ t($, { name: "errorSmall", color: A.GREY_DARK_2 }),
+              removeIcon: /* @__PURE__ */ t(P, { name: "errorSmall", color: W.GREY_DARK_2 }),
               options: w,
-              optionRender: (a) => T ? T(a.data) : /* @__PURE__ */ c(z, { justifyContent: "space-between", alignItems: "center", flex: "1", children: [
-                /* @__PURE__ */ c(z, { alignItems: "center", gap: 12, children: [
+              optionRender: (a) => G ? G(a.data) : /* @__PURE__ */ c($, { justifyContent: "space-between", alignItems: "center", flex: "1", children: [
+                /* @__PURE__ */ c($, { alignItems: "center", gap: 12, children: [
                   l && /* @__PURE__ */ t(
                     H1,
                     {
                       checked: !!(v != null && v.includes(a.value))
                     }
                   ),
-                  /* @__PURE__ */ c(z, { alignItems: "center", gap: 8, children: [
+                  /* @__PURE__ */ c($, { alignItems: "center", gap: 8, children: [
                     a.data.image && /* @__PURE__ */ t(R1, { src: a.data.image, size: 20 }),
                     /* @__PURE__ */ t("span", { children: a.label })
                   ] })
                 ] }),
                 !l && v === a.value && /* @__PURE__ */ t(
-                  $,
+                  P,
                   {
                     name: "ok",
-                    color: A.BLUE_PRIMARY,
+                    color: W.BLUE_PRIMARY,
                     width: 16,
                     height: 16
                   }
                 )
               ] }),
-              dropdownRender: V ? () => /* @__PURE__ */ t(
+              dropdownRender: D ? () => /* @__PURE__ */ t(
                 "div",
                 {
                   style: {
@@ -7061,13 +7061,13 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
                   },
                   children: /* @__PURE__ */ t(l1, { size: 28 })
                 }
-              ) : (a) => j ? j(a) : a
+              ) : (a) => A ? A(a) : a
             }
           ),
           /* @__PURE__ */ t(
             "fieldset",
             {
-              className: `${R ? "fieldset-focused" : ""}
+              className: `${S ? "fieldset-focused" : ""}
                      ${s ? "fieldset-disabled" : ""} 
                      ${typeof i == "string" && i ? "fieldset-filled" : ""} 
                      ${typeof i == "object" && i != null && i.length ? "fieldset-filled" : ""}`,
@@ -7081,7 +7081,7 @@ const w1 = ({ children: i, width: o, size: e = "small", onClose: l, closable: r
 );
 function S3(i, o = 500) {
   const e = s1();
-  return Z(() => () => {
+  return E(() => () => {
     e.current && clearTimeout(e.current);
   }, []), (...r) => {
     const w = setTimeout(() => {
@@ -7090,10 +7090,10 @@ function S3(i, o = 500) {
     clearTimeout(e.current), e.current = w;
   };
 }
-const O = {
+const F = {
   limit: 100,
   offset: 0
-}, J3 = J(
+}, J3 = q(
   ({
     loadOptions: i,
     width: o,
@@ -7107,71 +7107,73 @@ const O = {
     loadOnClosedState: k,
     extraOptions: h,
     onDropdownVisibleChange: n,
-    optionRender: H,
-    dropdownRender: D,
-    readOnly: x
-  }, b) => {
-    const [_, j] = u([]), [T, V] = u(O), [f, F] = u(!1), [y, S] = u(null), R = M(
+    optionRender: V,
+    dropdownRender: B,
+    readOnly: _,
+    clearable: J
+  }, R) => {
+    const [A, G] = u([]), [D, f] = u(F), [j, T] = u(!1), [y, S] = u(null), H = x(
       async (m = !1, Q) => {
-        if (!f) {
-          F(!0);
+        if (!j) {
+          T(!0);
           try {
-            const X = m ? { ...O, search: Q } : T, K = await i(X);
-            j(
-              (E) => m ? K.options : [...E, ...K.options]
-            ), S(K.count), V((E) => ({
-              ...E,
-              offset: E.offset + E.limit
+            const X = m ? { ...F, search: Q } : D, b = await i(X);
+            G(
+              (N) => m ? b.options : [...N, ...b.options]
+            ), S(b.count), f((N) => ({
+              ...N,
+              offset: N.offset + N.limit
             }));
           } finally {
-            F(!1);
+            T(!1);
           }
         }
       },
-      [T, i, f]
-    ), W = S3(R), U = M(
+      [D, i, j]
+    ), Z = S3(H), Y = x(
       (m) => {
-        m === "" || m === void 0 || m === null ? (V(O), W(!0)) : W(!0, m);
+        m === "" || m === void 0 || m === null ? (f(F), Z(!0)) : Z(!0, m);
       },
-      [W]
-    ), Y = async (m) => {
-      m && y !== null && y > _.length && await R(!1);
-    }, v = M(
+      [Z]
+    ), v = async (m) => {
+      m && y !== null && y > A.length && await H(!1);
+    }, K = x(
       (m) => {
-        m && !k && (j([]), V(O), R(!0)), n == null || n(m);
+        m && !k && (G([]), f(F), H(!0)), n == null || n(m);
       },
       // eslint-disable-next-line
       [k]
     );
-    Z(() => {
-      k && R(!1);
+    E(() => {
+      k && H(!1);
     }, []);
-    const I = {
+    const O = {
       id: r,
       width: o,
-      options: _,
+      options: A,
       onChange: e,
-      ref: b,
+      ref: R,
       placeholder: s,
       search: !0,
       value: l,
-      onSearchChange: U,
-      onDropdownVisibleChange: v,
+      onSearchChange: Y,
+      onDropdownVisibleChange: K,
       scrollThresholdValue: g,
-      onScrollToEnd: Y,
+      onScrollToEnd: v,
       loadOnClosedState: k,
       disabled: w,
       extraOptions: h,
-      isLoading: f,
-      optionRender: H,
-      dropdownRender: D,
-      readOnly: x
+      isLoading: j,
+      optionRender: V,
+      dropdownRender: B,
+      readOnly: _,
+      clearable: J
     };
-    return v1(b, () => ({
+    return v1(R, () => ({
       refetchOptions: async () => {
-        V(O), await R(!0);
+        f(F), await H(!0);
       }
-    })), p ? /* @__PURE__ */ t(r1, { ...I, onChange: e, value: l, mode: p }) : /* @__PURE__ */ t("div", { className: "snmt-async-select", children: /* @__PURE__ */ t(r1, { ...I, onChange: e, value: l }) });
+    })), p ? /* @__PURE__ */ t(r1, { ...O, onChange: e, value: l, mode: p }) : /* @__PURE__ */ t("div", { className: "snmt-async-select", children: /* @__PURE__ */ t(r1, { ...O, onChange: e, value: l }) });
   }
 );
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@snmt-react-ui/async-select",
     "private": false,
-    "version": "1.5.6",
+    "version": "1.6.0",
     "type": "module",
     "main": "dist/async-select.js",
     "types": "dist/index.d.ts",
@@ -23,5 +23,5 @@
     "peerDependencies": {
         "antd": "^5.18.3"
     },
-    "gitHead": "e2ff17680fda94bf4ce3d1ca606108dc1a4d665c"
+    "gitHead": "a980976c645c51a1f9f8441a30d086e54736e823"
 }