ics-ui-kit 0.1.0-alpha.74 → 0.1.0-alpha.76

package/dist/components/search-select.js

@@ -1,14 +1,14 @@
-import { jsx as e, jsxs as D, Fragment as B } from "react/jsx-runtime";
-import M, { useState as L, useCallback as x, useEffect as E, forwardRef as Z, useMemo as P, useRef as q } from "react";
-import { T as F } from "../index-BVqs-uqP.js";
-import { u as H, S as fe } from "../SearchSelectTag-DFCX9zT1.js";
-import { b as Se, g as ee, C as re, c as te, e as ge, i as ve } from "../Command-BhbfL5wm.js";
-import { I as K } from "../Icon-DH3ev9GK.js";
-import { b as ye, P as j, a as _ } from "../Popover-Dvr7y0YY.js";
-import { m as be, s as Ce } from "../Select-d1VUmFM3.js";
+import { jsx as e, jsxs as D, Fragment as q } from "react/jsx-runtime";
+import F, { useState as w, useCallback as x, useEffect as A, forwardRef as ee, useMemo as M, useRef as H } from "react";
+import { T as Q } from "../index-BVqs-uqP.js";
+import { u as K, S as fe } from "../SearchSelectTag-DFCX9zT1.js";
+import { b as Se, g as re, C as te, c as ne, e as ge, i as ve } from "../Command-BhbfL5wm.js";
+import { I as j } from "../Icon-DH3ev9GK.js";
+import { b as ye, P as _, a as $ } from "../Popover-Dvr7y0YY.js";
+import { m as Ce, s as be } from "../Select-DRwv6-eZ.js";
 import { C as Ne } from "../chevron-down-CAOItu8X.js";
-import { C as ne } from "../check-CeyaOoZv.js";
-import { L as ae } from "../Loader-BpHiL6W-.js";
+import { C as ae } from "../check-CeyaOoZv.js";
+import { L as se } from "../Loader-BpHiL6W-.js";
 import { u as Oe } from "../useDebounce-BRah78CF.js";
 import { E as xe } from "../EmptyState-DRKjscH-.js";
 import { E as Ie } from "../ErrorState-B26k67-z.js";
@@ -21,220 +21,220 @@ const Te = ({
   onChange: a,
   valueOption: s
 }) => {
-  const [l, o] = L(void 0), f = x(
-    (u) => {
-      if (u !== void 0) {
-        const h = r.find((S) => S.value === u) || l;
-        h && h.value === u && (o(h), a?.(u, h));
+  const [l, c] = w(void 0), f = x(
+    (d) => {
+      if (d !== void 0) {
+        const u = r.find((S) => S.value === d) || l;
+        u && u.value === d && (c(u), a?.(d, u));
       }
     },
     [a, r, l]
-  ), [c, m] = H({
+  ), [o, h] = K({
     value: t,
     defaultValue: n,
     onChange: f
   });
-  E(() => {
-    if (c !== void 0) {
-      if (l && l.value === c)
+  A(() => {
+    if (o !== void 0) {
+      if (l && l.value === o)
         return;
-      const u = r.find((h) => h.value === c);
-      u ? o(u) : s && s.value === c && o(s);
+      const d = r.find((u) => u.value === o);
+      d ? c(d) : s && s.value === o && c(s);
     } else
-      o(void 0);
-  }, [c, r, l, s]);
-  const d = x(
-    (u) => {
-      const h = r.find((S) => S.label === u);
-      h && m(h.value);
+      c(void 0);
+  }, [o, r, l, s]);
+  const i = x(
+    (d) => {
+      const u = r.find((S) => S.label === d);
+      u && h(u.value);
     },
-    [m, r]
+    [h, r]
   );
   return {
-    selectedValue: c,
+    selectedValue: o,
     selectedOption: l,
-    setSelectedByLabel: d,
-    setSelectedValue: m
+    setSelectedByLabel: i,
+    setSelectedValue: h
   };
-}, De = F({
+}, De = Q({
   base: "self-center pl-1.5"
-}), se = ({ children: r, className: t }) => /* @__PURE__ */ e("span", { className: De({ className: t }), children: r }), Re = F({
+}), le = ({ children: r, className: t }) => /* @__PURE__ */ e("span", { className: De({ className: t }), children: r }), Re = Q({
   base: "pointer-events-none self-center pl-1.5 text-muted"
-}), Ve = ({ children: r, className: t }) => /* @__PURE__ */ e("span", { className: Re({ className: t }), children: r }), Pe = F({
-  extend: Ce,
+}), Ve = ({ children: r, className: t }) => /* @__PURE__ */ e("span", { className: Re({ className: t }), children: r }), Pe = Q({
+  extend: be,
   base: "group/search-select-trigger min-h-10 items-start py-[0.3125rem] pl-1.5 pr-3 lg:min-h-9 lg:py-[0.3125rem] lg:pl-1.5 lg:pr-2.5",
   slots: {
     buttonWrapper: "ml-auto flex gap-2.5 pl-2.5",
     iconWrapper: "min-h-7 lg:min-h-6",
     startIcon: "flex min-h-7 items-center pl-1.5 pr-0.5 text-muted lg:min-h-6",
-    clearButton: "h-auto p-0"
+    clearButton: "h-auto p-0 opacity-0 group-hover/search-select-trigger:opacity-100 group-focus-visible/search-select-trigger:opacity-100"
   }
-}), W = M.forwardRef(
-  ({ className: r, children: t, disabled: n, open: a, invalid: s, placeholder: l, startIcon: o, onClear: f, ...c }, m) => {
-    const d = Pe({ disabled: n, invalid: s });
+}), k = F.forwardRef(
+  ({ className: r, children: t, disabled: n, open: a, invalid: s, placeholder: l, startIcon: c, onClear: f, ...o }, h) => {
+    const i = Pe({ disabled: n, invalid: s });
     return /* @__PURE__ */ D(
       "button",
       {
-        ...c,
+        ...o,
         disabled: n,
-        className: d.base({ className: r }),
-        ref: m,
+        className: i.base({ className: r }),
+        ref: h,
         role: "combobox",
         "aria-expanded": a,
         "aria-invalid": s,
         "aria-haspopup": "listbox",
         children: [
-          o && /* @__PURE__ */ e("div", { className: d.startIcon(), children: o }),
+          c && /* @__PURE__ */ e("div", { className: i.startIcon(), children: c }),
           t !== void 0 ? t : /* @__PURE__ */ e(Ve, { children: l }),
-          /* @__PURE__ */ D("div", { className: d.buttonWrapper(), children: [
-            f && /* @__PURE__ */ e("div", { className: d.iconWrapper(), children: /* @__PURE__ */ e(be, { onClear: f, className: d.clearButton() }) }),
-            !n && /* @__PURE__ */ e("div", { className: d.iconWrapper(), children: /* @__PURE__ */ e(K, { icon: Ne, className: d.icon() }) })
+          /* @__PURE__ */ D("div", { className: i.buttonWrapper(), children: [
+            f && /* @__PURE__ */ e("div", { className: i.iconWrapper(), children: /* @__PURE__ */ e(Ce, { onClear: f, className: i.clearButton() }) }),
+            !n && /* @__PURE__ */ e("div", { className: i.iconWrapper(), children: /* @__PURE__ */ e(j, { icon: Ne, className: i.icon() }) })
           ] })
         ]
       }
     );
   }
 );
-W.displayName = "SearchSelectTrigger";
-const Me = F({
+k.displayName = "SearchSelectTrigger";
+const Me = Q({
   base: "w-full min-w-[var(--radix-popper-anchor-width)] border-secondary-border p-0"
-}), k = M.forwardRef(
+}), z = F.forwardRef(
   ({ className: r, children: t, ...n }, a) => /* @__PURE__ */ e(ye, { ref: a, className: Me({ className: r }), align: "start", ...n, children: t })
 );
-k.displayName = "SearchSelectContent";
-const $ = M.forwardRef(({ placeholder: r = "Find", ...t }, n) => /* @__PURE__ */ e(Se, { ref: n, placeholder: r, ...t }));
-$.displayName = "SearchSelectInput";
-const Ee = F({ base: "" }), le = Z(
+z.displayName = "SearchSelectContent";
+const G = F.forwardRef(({ placeholder: r = "Find", ...t }, n) => /* @__PURE__ */ e(Se, { ref: n, placeholder: r, ...t }));
+G.displayName = "SearchSelectInput";
+const Ee = Q({ base: "" }), oe = ee(
   (r, t) => {
     const {
       id: n,
       className: a,
       options: s,
       valueOption: l,
-      renderOption: o,
+      renderOption: c,
       placeholder: f = "Выберите значение",
-      value: c,
-      defaultValue: m,
-      onBlur: d,
-      onChange: u,
-      onClear: h,
+      value: o,
+      defaultValue: h,
+      onBlur: i,
+      onChange: d,
+      onClear: u,
       disabled: S,
       invalid: b,
-      searchPlaceholder: g = "Найти",
-      emptyText: i = "Результатов не найдено",
-      shouldFilter: N = !0,
-      footerContent: v,
-      onSearchChange: p,
-      onOpenChange: w,
+      searchPlaceholder: v = "Найти",
+      emptyText: g = "Результатов не найдено",
+      shouldFilter: p = !0,
+      footerContent: m,
+      onSearchChange: y,
+      onOpenChange: I,
       startIcon: R,
-      hideSearch: I,
+      hideSearch: L,
       ...V
-    } = r, [y, T] = L(!1), [C, A] = L(""), { selectedValue: G, selectedOption: Q, setSelectedByLabel: J } = Te({
+    } = r, [P, C] = w(!1), [T, N] = w(""), { selectedValue: E, selectedOption: W, setSelectedByLabel: J } = Te({
       options: s,
-      value: c,
-      defaultValue: m,
+      value: o,
+      defaultValue: h,
       valueOption: l,
-      onChange: u
+      onChange: d
     }), U = x(
       (O) => {
-        J(O), T(!1);
+        J(O), C(!1);
       },
-      [J, T]
-    ), ie = x(
+      [J, C]
+    ), de = x(
       (O) => {
-        A(O), p?.(O);
+        N(O), y?.(O);
       },
-      [p]
-    ), de = x(
+      [y]
+    ), ue = x(
       (O) => {
-        T(O), w?.(O);
+        C(O), I?.(O);
       },
-      [w]
-    ), ue = P(() => {
-      if (Q) {
-        if (o) {
-          const O = o({ option: Q, type: "trigger" });
+      [I]
+    ), X = M(() => {
+      if (W) {
+        if (c) {
+          const O = c({ option: W, type: "trigger" });
           if (O !== void 0)
             return O;
         }
-        return /* @__PURE__ */ e(se, { children: Q.label });
+        return /* @__PURE__ */ e(le, { children: W.label });
       }
-    }, [Q, o]), he = P(() => s.map((O, me) => {
-      const z = O.disabled ?? !1, X = G === O.value, pe = () => {
-        if (o) {
-          const Y = o({
+    }, [W, c]), he = M(() => s.map((O, pe) => {
+      const B = O.disabled ?? !1, Y = E === O.value, me = () => {
+        if (c) {
+          const Z = c({
             option: O,
             type: "list",
-            isSelected: X,
-            isDisabled: z,
-            searchQuery: C,
-            index: me
+            isSelected: Y,
+            isDisabled: B,
+            searchQuery: T,
+            index: pe
           });
-          if (Y !== void 0)
-            return Y;
+          if (Z !== void 0)
+            return Z;
         }
-        return /* @__PURE__ */ D(B, { children: [
+        return /* @__PURE__ */ D(q, { children: [
           O.label,
-          X && /* @__PURE__ */ e(K, { icon: ne, className: "ml-auto" })
+          Y && /* @__PURE__ */ e(j, { icon: ae, className: "ml-auto" })
         ] });
       };
       return /* @__PURE__ */ e(
-        ee,
+        re,
         {
           value: O.label,
-          onSelect: z ? void 0 : U,
-          disabled: z,
-          children: pe()
+          onSelect: B ? void 0 : U,
+          disabled: B,
+          children: me()
         },
         O.value
       );
-    }), [s, G, U, o, C]);
-    return /* @__PURE__ */ e(j, { ...V, open: y, onOpenChange: de, children: /* @__PURE__ */ D("div", { className: Ee({ className: a }), children: [
-      /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ e(
-        W,
+    }), [s, E, U, c, T]);
+    return /* @__PURE__ */ e(_, { ...V, open: P, onOpenChange: ue, children: /* @__PURE__ */ D("div", { className: Ee({ className: a }), children: [
+      /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e(
+        k,
         {
-          onClear: h,
+          onClear: X ? u : void 0,
           disabled: S,
           invalid: b,
-          open: y,
+          open: P,
           placeholder: f,
           id: n,
-          onBlur: d,
+          onBlur: i,
           ref: t,
           startIcon: R,
-          children: ue
+          children: X
         }
       ) }),
-      /* @__PURE__ */ e(k, { children: /* @__PURE__ */ D(re, { shouldFilter: N, children: [
-        !I && /* @__PURE__ */ e($, { placeholder: g, onValueChange: ie }),
-        /* @__PURE__ */ D(te, { className: "p-1", children: [
+      /* @__PURE__ */ e(z, { children: /* @__PURE__ */ D(te, { shouldFilter: p, children: [
+        !L && /* @__PURE__ */ e(G, { placeholder: v, onValueChange: de }),
+        /* @__PURE__ */ D(ne, { className: "p-1", children: [
           he,
-          /* @__PURE__ */ e(ge, { children: i }),
-          v
-        ] }, `list-${C}`)
+          /* @__PURE__ */ e(ge, { children: g }),
+          m
+        ] }, `list-${T}`)
       ] }) })
     ] }) });
   }
 );
-le.displayName = "SearchSelect";
-const Fe = F({
+oe.displayName = "SearchSelect";
+const Fe = Q({
   base: "py-2 text-center text-sm text-muted-foreground"
-}), ce = M.forwardRef(
+}), ce = F.forwardRef(
   ({ onLoad: r, hasMore: t, loadingText: n = "Загрузка...", className: a }, s) => {
-    const l = q(null), o = Fe({ className: a });
-    return M.useImperativeHandle(s, () => l.current), E(() => {
+    const l = H(null), c = Fe({ className: a });
+    return F.useImperativeHandle(s, () => l.current), A(() => {
       const f = l.current;
       if (!f || !t) return;
-      const c = new IntersectionObserver(
-        ([m]) => {
-          m.isIntersecting && r();
+      const o = new IntersectionObserver(
+        ([h]) => {
+          h.isIntersecting && r();
         },
         { rootMargin: "50px" }
       );
-      return c.observe(f), () => {
-        c.disconnect();
+      return o.observe(f), () => {
+        o.disconnect();
       };
-    }, [r, t]), t ? /* @__PURE__ */ e("div", { ref: l, className: o, children: /* @__PURE__ */ e(ae, { className: "flex-row", children: n }) }) : null;
+    }, [r, t]), t ? /* @__PURE__ */ e("div", { ref: l, className: c, children: /* @__PURE__ */ e(se, { className: "flex-row", children: n }) }) : null;
   }
 );
 ce.displayName = "LoadMoreTrigger";
@@ -247,87 +247,87 @@ const Ae = (r, t) => {
   for (let l = 0; l < n.length && s < a.length; l++)
     n[l] === a[s] && s++;
   return s === a.length ? 1 : 0;
-}, Qe = Z(
+}, Qe = ee(
   (r, t) => {
     const {
       options: n,
       pageSize: a = 50,
       filter: s = Ae,
       defaultValue: l,
-      value: o,
+      value: c,
       ...f
-    } = r, [c, m] = L(a), [d, u] = L(""), [h, S] = L(void 0);
-    E(() => m(a), [d, a]), E(() => {
-      const p = o || l;
-      p && !h && S(n.find((w) => w.value === p));
-    }, [l, o, n, h]);
-    const { visibleOptions: b, hasMoreItems: g } = P(() => {
-      const p = d ? n.map((I) => ({
-        option: I,
-        score: s(I.label, d)
-      })).filter(({ score: I }) => I > 0).sort((I, V) => V.score - I.score).map(({ option: I }) => I) : n, w = p.slice(0, c), R = c < p.length;
+    } = r, [o, h] = w(a), [i, d] = w(""), [u, S] = w(void 0);
+    A(() => h(a), [i, a]), A(() => {
+      const y = c || l;
+      y && !u && S(n.find((I) => I.value === y));
+    }, [l, c, n, u]);
+    const { visibleOptions: b, hasMoreItems: v } = M(() => {
+      const y = i ? n.map((L) => ({
+        option: L,
+        score: s(L.label, i)
+      })).filter(({ score: L }) => L > 0).sort((L, V) => V.score - L.score).map(({ option: L }) => L) : n, I = y.slice(0, o), R = o < y.length;
       return {
-        visibleOptions: w,
+        visibleOptions: I,
         hasMoreItems: R
       };
-    }, [n, d, c, s]), i = x(() => {
-      m((p) => p + a);
-    }, [a]), N = x((p) => {
-      u(p);
-    }, []), v = x(
-      (p) => {
-        p && d && u("");
+    }, [n, i, o, s]), g = x(() => {
+      h((y) => y + a);
+    }, [a]), p = x((y) => {
+      d(y);
+    }, []), m = x(
+      (y) => {
+        y && i && d("");
       },
-      [d, u]
+      [i, d]
     );
     return /* @__PURE__ */ e(
-      le,
+      oe,
       {
         ...f,
         ref: t,
         options: b,
-        value: o,
+        value: c,
         defaultValue: l,
-        valueOption: h,
+        valueOption: u,
         shouldFilter: !1,
-        footerContent: /* @__PURE__ */ e(ce, { onLoad: i, hasMore: g }),
-        onSearchChange: N,
-        onOpenChange: v
+        footerContent: /* @__PURE__ */ e(ce, { onLoad: g, hasMore: v }),
+        onSearchChange: p,
+        onOpenChange: m
       }
     );
   }
 );
 Qe.displayName = "LazySearchSelect";
-const We = M.forwardRef((r, t) => /* @__PURE__ */ e(ve, { ref: t, ...r }));
+const We = F.forwardRef((r, t) => /* @__PURE__ */ e(ve, { ref: t, ...r }));
 We.displayName = "SearchSelectSeparator";
 const ke = ({ loadOptions: r }) => {
-  const [t, n] = L([]), [a, s] = L("idle"), [l, o] = L(null), f = q(null), c = q(0), m = x(() => {
+  const [t, n] = w([]), [a, s] = w("idle"), [l, c] = w(null), f = H(null), o = H(0), h = x(() => {
     f.current && f.current.abort();
-  }, []), d = x(
-    async (u) => {
-      m();
-      const h = ++c.current, S = new AbortController();
-      f.current = S, s("loading"), o(null);
+  }, []), i = x(
+    async (d) => {
+      h();
+      const u = ++o.current, S = new AbortController();
+      f.current = S, s("loading"), c(null);
       try {
         const b = await r({
-          searchQuery: u,
+          searchQuery: d,
           signal: S.signal
         });
-        if (h !== c.current) return;
+        if (u !== o.current) return;
         n(b.options), s("success");
       } catch (b) {
-        if (b instanceof Error && b.name === "AbortError" || h !== c.current) return;
-        o(b instanceof Error ? b.message : "Неизвестная ошибка"), s("error");
+        if (b instanceof Error && b.name === "AbortError" || u !== o.current) return;
+        c(b instanceof Error ? b.message : "Неизвестная ошибка"), s("error");
       }
     },
-    [r, m]
+    [r, h]
   );
-  return E(() => () => m(), [m]), {
+  return A(() => () => h(), [h]), {
     options: t,
     loadingState: a,
     error: l,
-    loadData: d,
-    cancelRequests: m
+    loadData: i,
+    cancelRequests: h
   };
 }, ze = ({
   options: r,
@@ -336,107 +336,107 @@ const ke = ({ loadOptions: r }) => {
   isSelected: a,
   searchQuery: s,
   loadMode: l,
-  minInputLength: o,
+  minInputLength: c,
   onSelect: f,
-  renderOption: c,
-  loadingText: m,
-  errorText: d,
-  inputHintText: u,
-  emptyText: h
+  renderOption: o,
+  loadingText: h,
+  errorText: i,
+  inputHintText: d,
+  emptyText: u
 }) => {
-  const S = P(() => r.map((g, i) => ({
-    option: g,
-    index: i,
-    isSelected: a?.(g) ?? !1,
-    isDisabled: g.disabled ?? !1
+  const S = M(() => r.map((v, g) => ({
+    option: v,
+    index: g,
+    isSelected: a?.(v) ?? !1,
+    isDisabled: v.disabled ?? !1
   })), [r, a]), b = x(
     ({
-      option: g,
-      isSelected: i,
-      isDisabled: N,
-      index: v
+      option: v,
+      isSelected: g,
+      isDisabled: p,
+      index: m
     }) => {
-      if (c) {
-        const p = c({
-          option: g,
+      if (o) {
+        const y = o({
+          option: v,
           type: "list",
-          isSelected: i,
-          isDisabled: N,
+          isSelected: g,
+          isDisabled: p,
           searchQuery: s,
-          index: v
+          index: m
         });
-        if (p !== void 0)
-          return p;
+        if (y !== void 0)
+          return y;
       }
-      return /* @__PURE__ */ D(B, { children: [
-        g.label,
-        i && /* @__PURE__ */ e(K, { icon: ne, className: "ml-auto" })
+      return /* @__PURE__ */ D(q, { children: [
+        v.label,
+        g && /* @__PURE__ */ e(j, { icon: ae, className: "ml-auto" })
       ] });
     },
-    [c, s]
+    [o, s]
   );
-  return t === "error" ? /* @__PURE__ */ e(Ie, { className: "py-6", children: n || d }) : t === "loading" ? /* @__PURE__ */ e(ae, { className: "py-6", children: m }) : l === "input" && s.length < o ? /* @__PURE__ */ e(Le, { className: "py-6", children: u }) : r.length === 0 && t === "success" ? /* @__PURE__ */ e(xe, { className: "py-6", children: h }) : /* @__PURE__ */ e(B, { children: S.map(({ option: g, index: i, isSelected: N, isDisabled: v }) => /* @__PURE__ */ e(
-    ee,
+  return t === "error" ? /* @__PURE__ */ e(Ie, { className: "py-6", children: n || i }) : t === "loading" ? /* @__PURE__ */ e(se, { className: "py-6", children: h }) : l === "input" && s.length < c ? /* @__PURE__ */ e(Le, { className: "py-6", children: d }) : r.length === 0 && t === "success" ? /* @__PURE__ */ e(xe, { className: "py-6", children: u }) : /* @__PURE__ */ e(q, { children: S.map(({ option: v, index: g, isSelected: p, isDisabled: m }) => /* @__PURE__ */ e(
+    re,
     {
-      value: g.label,
-      onSelect: v ? void 0 : f,
-      disabled: v,
+      value: v.label,
+      onSelect: m ? void 0 : f,
+      disabled: m,
       children: b({
-        option: g,
-        isSelected: N,
-        isDisabled: v,
-        index: i
+        option: v,
+        isSelected: p,
+        isDisabled: m,
+        index: g
       })
     },
-    g.value
+    v.value
   )) });
-}, oe = (r) => {
+}, ie = (r) => {
   const {
     loadOptions: t,
     loadMode: n = "auto",
     minInputLength: a = 3,
     debounceMs: s = 300,
     searchPlaceholder: l = "Найти",
-    loadingText: o = "Загружаем...",
+    loadingText: c = "Загружаем...",
     errorText: f = "Ошибка загрузки",
-    inputHintText: c = "Введите текст для поиска",
-    emptyText: m = "Результатов не найдено",
-    renderOption: d,
-    onSelect: u,
-    isSelected: h,
+    inputHintText: o = "Введите текст для поиска",
+    emptyText: h = "Результатов не найдено",
+    renderOption: i,
+    onSelect: d,
+    isSelected: u,
     hideSearch: S
-  } = r, [b, g] = L(""), i = Oe(b, s), { options: N, loadingState: v, error: p, loadData: w } = ke({
+  } = r, [b, v] = w(""), g = Oe(b, s), { options: p, loadingState: m, error: y, loadData: I } = ke({
     loadOptions: t
-  }), R = P(() => n === "auto" ? !0 : n === "input" ? i.length >= a : !1, [n, i, a]);
-  E(() => {
-    R && w(i);
-  }, [R, i, w]);
-  const I = x(
+  }), R = M(() => n === "auto" ? !0 : n === "input" ? g.length >= a : !1, [n, g, a]);
+  A(() => {
+    R && I(g);
+  }, [R, g, I]);
+  const L = x(
     (V) => {
-      u(N.find((y) => y.label === V) || null);
+      d(p.find((P) => P.label === V) || null);
     },
-    [u, N]
+    [d, p]
   );
-  return /* @__PURE__ */ D(re, { shouldFilter: !1, children: [
-    !S && /* @__PURE__ */ e($, { placeholder: l, onValueChange: g }),
-    /* @__PURE__ */ e(te, { className: "p-1", children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ D(te, { shouldFilter: !1, children: [
+    !S && /* @__PURE__ */ e(G, { placeholder: l, onValueChange: v }),
+    /* @__PURE__ */ e(ne, { className: "p-1", children: /* @__PURE__ */ e(
       ze,
       {
-        options: N,
-        loadingState: v,
-        error: p,
-        isSelected: h,
-        searchQuery: i,
+        options: p,
+        loadingState: m,
+        error: y,
+        isSelected: u,
+        searchQuery: g,
         loadMode: n,
         minInputLength: a,
-        onSelect: I,
-        renderOption: d,
-        loadingText: o,
+        onSelect: L,
+        renderOption: i,
+        loadingText: c,
         errorText: f,
-        inputHintText: c,
-        emptyText: m
+        inputHintText: o,
+        emptyText: h
       }
-    ) }, `list-${i}`)
+    ) }, `list-${g}`)
   ] });
 }, ar = (r) => {
   const {
@@ -445,47 +445,47 @@ const ke = ({ loadOptions: r }) => {
     value: a,
     defaultValue: s,
     disabled: l,
-    invalid: o,
+    invalid: c,
     onChange: f,
-    startIcon: c,
-    onClear: m,
-    ...d
-  } = r, [u, h] = L(!1), [S, b] = H({
+    startIcon: o,
+    onClear: h,
+    ...i
+  } = r, [d, u] = w(!1), [S, b] = K({
     value: a,
     defaultValue: s,
     onChange: f
-  }), g = P(() => {
+  }), v = M(() => {
     if (S) {
       if (t) {
-        const v = t({ option: S, type: "trigger" });
-        if (v !== void 0)
-          return v;
+        const m = t({ option: S, type: "trigger" });
+        if (m !== void 0)
+          return m;
       }
-      return /* @__PURE__ */ e(se, { children: S.label });
+      return /* @__PURE__ */ e(le, { children: S.label });
     }
-  }, [S, t]), i = x(
-    (v) => {
-      v && b(v), h(!1);
+  }, [S, t]), g = x(
+    (m) => {
+      m && b(m), u(!1);
     },
-    [b, h]
-  ), N = x(
-    (v) => S?.value === v.value,
+    [b, u]
+  ), p = x(
+    (m) => S?.value === m.value,
     [S]
   );
-  return /* @__PURE__ */ D(j, { ...d, open: u, onOpenChange: h, children: [
-    /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ e(
-      W,
+  return /* @__PURE__ */ D(_, { ...i, open: d, onOpenChange: u, children: [
+    /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e(
+      k,
       {
         placeholder: n,
         disabled: l,
-        invalid: o,
-        open: u,
-        startIcon: c,
-        onClear: m,
-        children: g
+        invalid: c,
+        open: d,
+        startIcon: o,
+        onClear: v ? h : void 0,
+        children: v
       }
     ) }),
-    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(oe, { ...r, onSelect: i, isSelected: N }) })
+    /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(ie, { ...r, onSelect: g, isSelected: p }) })
   ] });
 }, Be = (r) => {
   const {
@@ -494,85 +494,86 @@ const ke = ({ loadOptions: r }) => {
     value: a,
     defaultValue: s,
     onChange: l,
-    disabled: o,
+    disabled: c,
     invalid: f,
-    keepOpenOnSelect: c = !0,
-    onClear: m,
-    onLabelClick: d,
-    renderOption: u,
-    startIcon: h,
-    ...S
-  } = r, [b, g] = L(!1), [i, N] = H({
+    keepOpenOnSelect: o = !0,
+    onClear: h,
+    onLabelClick: i,
+    renderOption: d,
+    startIcon: u,
+    portalContainer: S,
+    ...b
+  } = r, [v, g] = w(!1), [p, m] = K({
     value: a,
     defaultValue: s,
     onChange: l
-  }), v = x(
-    (y) => {
-      if (y) {
-        const T = i?.find((C) => C.value === y.value);
-        N(T ? (C) => C?.filter((A) => A.value !== y.value) || [] : (C) => [...C || [], y]);
+  }), y = x(
+    (C) => {
+      if (C) {
+        const T = p?.find((N) => N.value === C.value);
+        m(T ? (N) => N?.filter((E) => E.value !== C.value) || [] : (N) => [...N || [], C]);
       }
-      c || g(!1);
+      o || g(!1);
     },
-    [i, c, N, g]
-  ), p = x(
-    (y) => {
-      i?.find((C) => C.value === y.value) && N((C) => C?.filter((A) => A.value !== y.value) || []);
+    [p, o, m, g]
+  ), I = x(
+    (C) => {
+      p?.find((N) => N.value === C.value) && m((N) => N?.filter((E) => E.value !== C.value) || []);
     },
-    [i, N]
-  ), w = x(
-    (y) => i?.some((T) => T.value === y.value) ?? !1,
-    [i]
-  ), { handleKeyDown: R, isFocused: I } = we({
-    items: i || [],
-    onEnter: d,
-    onDelete: p
-  }), V = P(() => {
-    if (!(!i || i.length === 0))
-      return i.map((y, T) => {
-        if (u) {
-          const C = u({
-            option: y,
+    [p, m]
+  ), R = x(
+    (C) => p?.some((T) => T.value === C.value) ?? !1,
+    [p]
+  ), { handleKeyDown: L, isFocused: V } = we({
+    items: p || [],
+    onEnter: i,
+    onDelete: I
+  }), P = M(() => {
+    if (!(!p || p.length === 0))
+      return p.map((C, T) => {
+        if (d) {
+          const N = d({
+            option: C,
             type: "trigger",
             onClose: () => {
-              p(y);
+              I(C);
             }
           });
-          if (C !== void 0)
-            return C;
+          if (N !== void 0)
+            return N;
         }
         return /* @__PURE__ */ e(
           fe,
           {
-            onLabelClick: (C) => {
-              C.preventDefault(), d?.(y);
+            onLabelClick: (N) => {
+              N.preventDefault(), i?.(C);
             },
-            onClose: (C) => {
-              C.preventDefault(), p(y);
+            onClose: (N) => {
+              N.preventDefault(), I(C);
             },
-            isFocused: I(T),
-            children: y.label
+            isFocused: V(T),
+            children: C.label
           },
-          y.value
+          C.value
         );
       });
-  }, [i, u, p, d, I]);
-  return /* @__PURE__ */ e("div", { className: t, children: /* @__PURE__ */ D(j, { open: b, onOpenChange: g, ...S, children: [
-    /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ e(
-      W,
+  }, [p, d, I, i, V]);
+  return /* @__PURE__ */ e("div", { className: t, children: /* @__PURE__ */ D(_, { open: v, onOpenChange: g, ...b, children: [
+    /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e(
+      k,
       {
-        onKeyDown: R,
-        disabled: o,
-        open: b,
+        onKeyDown: L,
+        disabled: c,
+        open: v,
         placeholder: n,
         invalid: f,
-        startIcon: h,
-        onClear: m,
+        startIcon: u,
+        onClear: h,
         className: "h-auto lg:h-auto",
-        children: V && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5 pl-1.5 lg:gap-1", children: V })
+        children: P && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5 pl-1.5 lg:gap-1", children: P })
       }
     ) }),
-    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(oe, { ...r, onSelect: v, isSelected: w }) })
+    /* @__PURE__ */ e(z, { portalContainer: S, children: /* @__PURE__ */ e(ie, { ...r, onSelect: y, isSelected: R }) })
   ] }) });
 };
 Be.displayName = "MultiSelect";
@@ -582,12 +583,12 @@ export {
   Qe as LazySearchSelect,
   ce as LoadMoreTrigger,
   Be as MultiSelect,
-  le as SearchSelect,
-  k as SearchSelectContent,
-  $ as SearchSelectInput,
+  oe as SearchSelect,
+  z as SearchSelectContent,
+  G as SearchSelectInput,
   We as SearchSelectSeparator,
   fe as SearchSelectTag,
-  W as SearchSelectTrigger,
+  k as SearchSelectTrigger,
   Ae as defaultFuzzyFilter,
   ke as useAsyncDataLoader,
   Te as useSearchSelect