laif-ds 0.2.74 → 0.2.76

package/dist/components/ui/tables/data-table/components/data-table-filters.js

@@ -1,80 +1,90 @@
 "use client";
-import { jsxs as p, Fragment as A, jsx as o } from "react/jsx-runtime";
-import { useState as q, useEffect as $ } from "react";
-import { Badge as f } from "../../../badge.js";
-import { Button as N } from "../../../button.js";
-import { Icon as y } from "../../../icon.js";
-import { Input as E } from "../../../input.js";
-import { Popover as S, PopoverTrigger as D, PopoverContent as _ } from "../../../popover.js";
-import { getIconFromColumnType as M } from "../data-table.service.js";
-import { DataTableAdvancedFilterComponent as R } from "./data-table-advanced-filter.js";
-import { DataTableStringFilter as z, DataTableNumberFilter as H, DataTableBooleanFilter as J, DataTableDateFilter as K, DataTableDateTimeFilter as Q, DataTableListSingleSelectFilter as U, DataTableListMultiSelectFilter as V } from "./data-table-simple-filters.js";
-function se({
+import { jsxs as p, Fragment as E, jsx as o } from "react/jsx-runtime";
+import { useState as M, useEffect as G } from "react";
+import { Badge as S } from "../../../badge.js";
+import { Button as P } from "../../../button.js";
+import { Icon as D } from "../../../icon.js";
+import { Input as R } from "../../../input.js";
+import { Popover as _, PopoverTrigger as w, PopoverContent as C } from "../../../popover.js";
+import { getIconFromColumnType as z } from "../data-table.service.js";
+import { DataTableAdvancedFilterComponent as J } from "./data-table-advanced-filter.js";
+import { DataTableStringFilter as K, DataTableNumberFilter as Q, DataTableBooleanFilter as U, DataTableDateFilter as V, DataTableDateTimeFilter as W, DataTableListSingleSelectFilter as X, DataTableListMultiSelectFilter as Y } from "./data-table-simple-filters.js";
+function ae({
   advancedFilterBadge: m,
-  setAdvancedFilterBadge: b,
+  setAdvancedFilterBadge: f,
   filterableColumns: h,
-  sortedFilterBadges: x,
+  sortedFilterBadges: I,
   setFilterBadges: d,
-  filterSearch: L,
-  setFilterSearch: I,
-  filteredColumns: P,
-  handleAddFilter: G,
+  filterSearch: j,
+  setFilterSearch: k,
+  filteredColumns: A,
+  handleAddFilter: q,
   handleAddAdvancedFilter: F,
+  pendingOpenFilterId: O,
+  onPendingOpenFilterHandled: N,
   i18n: s
 }) {
-  const [w, C] = q(/* @__PURE__ */ new Set()), j = w.has("add");
-  return $(() => {
+  const [x, T] = M(/* @__PURE__ */ new Set()), L = x.has("add");
+  return G(() => {
+    O && (T(/* @__PURE__ */ new Set([O])), N());
+  }, [O, N]), G(() => {
     if (d((e) => {
-      let c = !1;
-      const a = e.map((r) => {
+      let a = !1;
+      const i = e.map((r) => {
         if (r.columnType !== "list_single_select" && r.columnType !== "list_multi_select")
           return r;
-        const n = h.find((t) => t.id === r.columnId)?.column.columnDef.meta?.listOptions || [], g = new Set(n.map((t) => String(t.value)));
+        const n = (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          h.find((t) => t.id === r.columnId)?.column.columnDef.meta?.listOptions || []
+        ), g = new Set(n.map((t) => String(t.value)));
         if (r.columnType === "list_single_select") {
           const t = r.value;
-          return t !== void 0 && !g.has(String(t)) ? (c = !0, { ...r, value: void 0, listOptions: n }) : r.listOptions !== n ? { ...r, listOptions: n } : r;
+          return t !== void 0 && !g.has(String(t)) ? (a = !0, { ...r, value: void 0, listOptions: n }) : r.listOptions !== n ? { ...r, listOptions: n } : r;
         } else {
-          const t = Array.isArray(r.value) ? r.value : [], v = t.filter((i) => g.has(String(i)));
-          return v.length !== t.length ? (c = !0, {
+          const t = Array.isArray(r.value) ? r.value : [], v = t.filter((u) => g.has(String(u)));
+          return v.length !== t.length ? (a = !0, {
             ...r,
             value: v.length > 0 ? v : void 0,
             listOptions: n
           }) : r.listOptions !== n ? { ...r, listOptions: n } : r;
         }
       });
-      return c ? a : e;
+      return a ? i : e;
     }), m) {
       const e = (l) => {
         let n = !1;
         return { conditions: l.map((t) => {
           if (t.columnType !== "list_single_select" && t.columnType !== "list_multi_select")
             return t;
-          const i = h.find(
-            (u) => u.id === t.columnId
-          )?.column.columnDef.meta?.listOptions || [], O = new Set(i.map((u) => String(u.value)));
+          const u = (
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            h.find(
+              (c) => c.id === t.columnId
+            )?.column.columnDef.meta?.listOptions || []
+          ), b = new Set(u.map((c) => String(c.value)));
           if (t.columnType === "list_single_select") {
-            const u = t.value;
-            return u !== void 0 && !O.has(String(u)) ? (n = !0, {
+            const c = t.value;
+            return c !== void 0 && !b.has(String(c)) ? (n = !0, {
               ...t,
               value: void 0,
-              listOptions: i
-            }) : t.listOptions !== i ? { ...t, listOptions: i } : t;
+              listOptions: u
+            }) : t.listOptions !== u ? { ...t, listOptions: u } : t;
           } else {
-            const u = Array.isArray(t.value) ? t.value : [], T = u.filter((k) => O.has(String(k)));
-            return T.length !== u.length ? (n = !0, {
+            const c = Array.isArray(t.value) ? t.value : [], y = c.filter(($) => b.has(String($)));
+            return y.length !== c.length ? (n = !0, {
               ...t,
-              value: T.length > 0 ? T : void 0,
-              listOptions: i
-            }) : t.listOptions !== i ? { ...t, listOptions: i } : t;
+              value: y.length > 0 ? y : void 0,
+              listOptions: u
+            }) : t.listOptions !== u ? { ...t, listOptions: u } : t;
           }
         }), changed: n };
-      }, c = (l) => {
+      }, a = (l) => {
         let n = !1;
         const { conditions: g, changed: t } = e(l.conditions);
         t && (n = !0);
-        const v = l.groups?.map((i) => {
-          const { group: O, changed: u } = c(i);
-          return u && (n = !0), O;
+        const v = l.groups?.map((u) => {
+          const { group: b, changed: c } = a(u);
+          return c && (n = !0), b;
         });
         return {
           group: {
@@ -84,70 +94,71 @@ function se({
           },
           changed: n
         };
-      }, { group: a, changed: r } = c(
+      }, { group: i, changed: r } = a(
         m.rootGroup
       );
-      r && b({
+      r && f({
         ...m,
-        rootGroup: a
+        rootGroup: i
       });
     }
   }, [
     h,
     d,
     m,
-    b
-  ]), /* @__PURE__ */ p(A, { children: [
-    m && /* @__PURE__ */ p(S, { children: [
-      /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ p(
-        f,
+    f
+  ]), /* @__PURE__ */ p(E, { children: [
+    m && /* @__PURE__ */ p(_, { children: [
+      /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ p(
+        S,
         {
           className: "hover:border-d-border cursor-pointer hover:border",
           variant: "default",
           children: [
-            /* @__PURE__ */ o(y, { name: "ListFilter" }),
+            /* @__PURE__ */ o(D, { name: "ListFilter" }),
             s.filters.advancedFilter
           ]
         }
       ) }),
-      /* @__PURE__ */ o(_, { className: "w-[800px]", align: "start", children: /* @__PURE__ */ o(
-        R,
+      /* @__PURE__ */ o(C, { className: "w-[800px]", align: "start", children: /* @__PURE__ */ o(
+        J,
         {
           columns: h,
           onFilterChange: (e) => {
-            b(e || void 0);
+            f(e || void 0);
           },
           initialFilter: m,
           i18n: s
         }
       ) })
     ] }),
-    x.map((e) => {
-      const c = w.has(e.id);
+    I.map((e) => {
+      const a = x.has(e.id);
       return /* @__PURE__ */ p(
-        S,
+        _,
         {
-          onOpenChange: (a) => {
-            C((r) => {
+          open: a,
+          onOpenChange: (i) => {
+            T((r) => {
               const l = new Set(r);
-              return a ? l.add(e.id) : l.delete(e.id), l;
+              return i ? l.add(e.id) : l.delete(e.id), l;
             });
           },
           children: [
-            /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ p(
-              f,
+            /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ p(
+              S,
               {
                 variant: (e.value === void 0 || e.value === "") && !(e.operator === "eq_null" || e.operator === "n_eq_null" || e.operator === "checked" || e.operator === "unchecked") ? "ghost" : "default",
-                className: `hover:border-d-border flex cursor-pointer items-center gap-1 hover:border ${c && "border-d-foreground border"}`,
+                className: `hover:border-d-border flex cursor-pointer items-center gap-1 hover:border ${a && "border-d-foreground border"}`,
                 children: [
-                  /* @__PURE__ */ o(y, { name: "Filter" }),
+                  /* @__PURE__ */ o(D, { name: "Filter" }),
                   e.columnLabel || s.filters.value
                 ]
               }
             ) }),
-            /* @__PURE__ */ p(_, { align: "start", children: [
+            /* @__PURE__ */ p(C, { align: "start", children: [
               e.columnType === "string" && /* @__PURE__ */ o(
-                z,
+                K,
                 {
                   filter: e,
                   setFilterBadges: d,
@@ -155,7 +166,7 @@ function se({
                 }
               ),
               e.columnType === "number" && /* @__PURE__ */ o(
-                H,
+                Q,
                 {
                   filter: e,
                   setFilterBadges: d,
@@ -163,7 +174,7 @@ function se({
                 }
               ),
               e.columnType === "boolean" && /* @__PURE__ */ o(
-                J,
+                U,
                 {
                   filter: e,
                   setFilterBadges: d,
@@ -171,7 +182,7 @@ function se({
                 }
               ),
               e.columnType === "date" && /* @__PURE__ */ o(
-                K,
+                V,
                 {
                   filter: e,
                   setFilterBadges: d,
@@ -179,7 +190,7 @@ function se({
                 }
               ),
               e.columnType === "datetime" && /* @__PURE__ */ o(
-                Q,
+                W,
                 {
                   filter: e,
                   setFilterBadges: d,
@@ -187,11 +198,14 @@ function se({
                 }
               ),
               e.columnType === "list_single_select" && (() => {
-                const r = h.find(
-                  (l) => l.id === e.columnId
-                )?.column.columnDef.meta?.listOptions || e.listOptions || [];
+                const r = (
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  h.find(
+                    (l) => l.id === e.columnId
+                  )?.column.columnDef.meta?.listOptions || e.listOptions || []
+                );
                 return /* @__PURE__ */ o(
-                  U,
+                  X,
                   {
                     filter: { ...e, listOptions: r },
                     setFilterBadges: d,
@@ -200,11 +214,14 @@ function se({
                 );
               })(),
               e.columnType === "list_multi_select" && (() => {
-                const r = h.find(
-                  (l) => l.id === e.columnId
-                )?.column.columnDef.meta?.listOptions || e.listOptions || [];
+                const r = (
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  h.find(
+                    (l) => l.id === e.columnId
+                  )?.column.columnDef.meta?.listOptions || e.listOptions || []
+                );
                 return /* @__PURE__ */ o(
-                  V,
+                  Y,
                   {
                     filter: { ...e, listOptions: r },
                     setFilterBadges: d,
@@ -220,52 +237,55 @@ function se({
       );
     }),
     h?.length > 0 && /* @__PURE__ */ p(
-      S,
+      _,
       {
+        open: L,
         onOpenChange: (e) => {
-          C((c) => {
-            const a = new Set(c);
-            return e ? a.add("add") : a.delete("add"), a;
+          T((a) => {
+            const i = new Set(a);
+            return e ? i.add("add") : i.delete("add"), i;
           });
         },
         children: [
-          /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ p(
-            f,
+          /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ p(
+            S,
             {
               variant: "ghost",
-              className: `hover:border-d-border flex cursor-pointer items-center gap-1 hover:border ${j && "border-d-foreground border"}`,
+              className: `hover:border-d-border flex cursor-pointer items-center gap-1 hover:border ${L && "border-d-foreground border"}`,
               children: [
-                /* @__PURE__ */ o(y, { name: "FunnelPlus" }),
+                /* @__PURE__ */ o(D, { name: "FunnelPlus" }),
                 s.filters.addFilter
               ]
             }
           ) }),
-          /* @__PURE__ */ p(_, { className: "p-2", align: "start", children: [
+          /* @__PURE__ */ p(C, { className: "p-2", align: "start", children: [
             /* @__PURE__ */ o(
-              E,
+              R,
               {
                 className: "mb-1",
                 placeholder: s.filters.searchFilters,
                 iconLeft: "Search",
-                onChange: (e) => I(e.target.value),
-                value: L
+                onChange: (e) => k(e.target.value),
+                value: j
               }
             ),
-            /* @__PURE__ */ o("div", { className: "max-h-[400px] overflow-y-auto", children: P.map((e) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-              N,
+            /* @__PURE__ */ o("div", { className: "max-h-[400px] overflow-y-auto", children: A.map((e) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+              P,
               {
                 variant: "ghost",
                 className: "w-full justify-start",
-                iconLeft: M(
+                iconLeft: z(
                   e.column.columnDef.meta?.type
                 ),
-                onClick: () => G(e),
+                onClick: () => {
+                  q(e);
+                },
                 children: e.column.columnDef.meta?.headerLabel || (typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : "") || e.column.id
               }
             ) }, e.id)) }),
             /* @__PURE__ */ o("div", { className: "border-d-border mb-1 w-full border-b" }),
             /* @__PURE__ */ o(
-              N,
+              P,
               {
                 variant: "ghost",
                 className: "w-full justify-start",
@@ -282,5 +302,5 @@ function se({
   ] });
 }
 export {
-  se as DataTableFilters
+  ae as DataTableFilters
 };

package/dist/components/ui/tables/data-table/components/data-table-header.js

@@ -0,0 +1,211 @@
+"use client";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { flexRender as w } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import S from "react";
+import { cn as l } from "../../../../../lib/utils.js";
+import { Button as i } from "../../../button.js";
+import { Icon as m } from "../../../icon.js";
+import { Popover as D, PopoverTrigger as y, PopoverContent as N } from "../../../popover.js";
+import { TableHeader as I, TableRow as h, TableHead as C } from "../../../table.js";
+import { getPinnedStyle as z } from "../data-table.service.js";
+function F({
+  table: r,
+  headerRefs: g,
+  pinnedOffsets: d,
+  maxSortedColumns: c,
+  i18n: s,
+  searchbarGlobalFilter: f,
+  isColumnFiltered: p,
+  onAddFilter: v
+}) {
+  const [x, u] = S.useState({});
+  return /* @__PURE__ */ t(I, { children: r.getHeaderGroups().map((a) => /* @__PURE__ */ t(h, { children: a.headers.map((e) => /* @__PURE__ */ t(
+    C,
+    {
+      ref: (o) => {
+        g.current[e.column.id] = o;
+      },
+      className: l(
+        "bg-d-background sticky top-0 h-8 px-0",
+        e.column.columnDef.meta?.pinned ? "z-[49]" : "z-10",
+        e.column.columnDef.meta?.headerClassName
+      ),
+      style: z(
+        e.column.id,
+        d,
+        e.column.columnDef.meta?.pinned,
+        !0
+      ),
+      children: e.isPlaceholder ? null : /* @__PURE__ */ n(
+        D,
+        {
+          open: !!x[e.id],
+          onOpenChange: (o) => {
+            u((b) => ({
+              ...b,
+              [e.id]: o
+            }));
+          },
+          children: [
+            /* @__PURE__ */ t(
+              y,
+              {
+                asChild: !0,
+                onClick: (o) => {
+                  e.column.columnDef.meta?.sortable || e.column.columnDef.meta?.filterable || (o.preventDefault(), o.stopPropagation());
+                },
+                children: /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: l(
+                      "flex h-full items-center justify-between gap-2 px-2",
+                      e.column.columnDef.meta?.sortable || e.column.columnDef.meta?.filterable ? "hover:bg-d-secondary-foreground/10 cursor-pointer" : "cursor-not-allowed"
+                    ),
+                    children: [
+                      w(
+                        e.column.columnDef.header,
+                        e.getContext()
+                      ),
+                      /* @__PURE__ */ n("div", { className: "flex flex-row items-center gap-1", children: [
+                        e.column.columnDef.meta?.searchable && /* @__PURE__ */ t(
+                          m,
+                          {
+                            name: "Search",
+                            className: l(
+                              "text-d-foreground/30 max-h-3.5 max-w-3.5",
+                              !!f && "text-d-primary"
+                            )
+                          }
+                        ),
+                        e.column.columnDef.meta?.filterable && /* @__PURE__ */ t(
+                          m,
+                          {
+                            name: "Filter",
+                            className: l(
+                              "text-d-foreground/30 max-h-3.5 max-w-3.5",
+                              p(e.column.id) && "text-d-primary"
+                            )
+                          }
+                        ),
+                        e.column.columnDef.meta?.sortable && /* @__PURE__ */ n("div", { className: "flex flex-col py-1", children: [
+                          /* @__PURE__ */ t(
+                            i,
+                            {
+                              iconLeft: "ChevronUp",
+                              size: "icon",
+                              className: l(
+                                "hover:bg-d-foreground/10 max-h-4 max-w-6",
+                                e.column.getIsSorted() === "asc" && "hover:text-d-destructive hover:bg-d-destructive/20"
+                              ),
+                              variant: e.column.getIsSorted() === "asc" ? "ghost-accent" : "ghost",
+                              onClick: (o) => {
+                                e.column.getIsSorted() === "asc" ? e.column.clearSorting() : e.column.toggleSorting(!1, !0), o.stopPropagation(), o.preventDefault();
+                              },
+                              disabled: r.getState().sorting.length >= c && !e.column.getIsSorted()
+                            }
+                          ),
+                          /* @__PURE__ */ t(
+                            i,
+                            {
+                              iconLeft: "ChevronDown",
+                              size: "icon",
+                              className: l(
+                                "hover:bg-d-foreground/10 max-h-4 max-w-6",
+                                e.column.getIsSorted() === "desc" && "hover:text-d-destructive hover:bg-d-destructive/20"
+                              ),
+                              variant: e.column.getIsSorted() === "desc" ? "ghost-accent" : "ghost",
+                              onClick: (o) => {
+                                e.column.getIsSorted() === "desc" ? e.column.clearSorting() : e.column.toggleSorting(!0, !0), o.stopPropagation(), o.preventDefault();
+                              },
+                              disabled: r.getState().sorting.length >= c && !e.column.getIsSorted()
+                            }
+                          )
+                        ] })
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ t(N, { className: "w-40 p-0", children: /* @__PURE__ */ n("div", { className: "flex flex-col text-sm", children: [
+              e.column.columnDef.meta?.sortable && /* @__PURE__ */ n(
+                "div",
+                {
+                  className: l(
+                    "group hover:bg-d-secondary-foreground/5 relative flex cursor-pointer items-center justify-between rounded px-2 py-1.5",
+                    e.column.getIsSorted() && "bg-d-secondary-foreground/5",
+                    r.getState().sorting.length >= c && !e.column.getIsSorted() && "pointer-events-none cursor-not-allowed opacity-60"
+                  ),
+                  "aria-disabled": r.getState().sorting.length >= c && !e.column.getIsSorted(),
+                  children: [
+                    /* @__PURE__ */ t("span", { className: "text-md", children: s.sorting.sort }),
+                    /* @__PURE__ */ t(m, { name: "ChevronRight", size: "xs" }),
+                    /* @__PURE__ */ n("div", { className: "bg-d-background border-d-border absolute top-0 left-full ml-0 hidden w-48 flex-col rounded-md border p-1 shadow-md group-hover:flex", children: [
+                      /* @__PURE__ */ t(
+                        i,
+                        {
+                          className: "justify-start",
+                          variant: "ghost",
+                          size: "sm",
+                          iconLeft: e.column.columnDef.meta?.type === "number" ? "ArrowDown01" : e.column.columnDef.meta?.type === "string" ? "ArrowDownAz" : "ArrowDownNarrowWide",
+                          onClick: () => {
+                            !e.column.getIsSorted() && r.getState().sorting.length >= c || e.column.toggleSorting(!1, !0);
+                          },
+                          children: s.sorting.ascending
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        i,
+                        {
+                          className: "justify-start",
+                          variant: "ghost",
+                          size: "sm",
+                          iconLeft: e.column.columnDef.meta?.type === "number" ? "ArrowUp01" : e.column.columnDef.meta?.type === "string" ? "ArrowUpAz" : "ArrowUpNarrowWide",
+                          onClick: () => {
+                            !e.column.getIsSorted() && r.getState().sorting.length >= c || e.column.toggleSorting(!0, !0);
+                          },
+                          children: s.sorting.descending
+                        }
+                      ),
+                      e.column.getIsSorted() && /* @__PURE__ */ t(
+                        i,
+                        {
+                          className: "text-d-destructive/80 hover:text-d-destructive justify-start",
+                          variant: "ghost",
+                          size: "sm",
+                          iconLeft: "CircleX",
+                          onClick: () => e.column.clearSorting(),
+                          children: s.sorting.clearSort
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              e.column.columnDef.meta?.filterable && /* @__PURE__ */ n(
+                "div",
+                {
+                  className: "hover:bg-d-secondary-foreground/5 relative flex cursor-pointer items-center justify-between rounded px-2 py-1.5",
+                  onClick: () => {
+                    v(e), u((o) => ({
+                      ...o,
+                      [e.id]: !1
+                    }));
+                  },
+                  children: [
+                    /* @__PURE__ */ t("span", { className: "text-md", children: s.filters.filter }),
+                    /* @__PURE__ */ t(m, { name: "Filter", size: "xs" })
+                  ]
+                }
+              )
+            ] }) })
+          ]
+        }
+      )
+    },
+    e.id
+  )) }, a.id)) });
+}
+export {
+  F as DataTableHeaderComponent
+};

package/dist/components/ui/tables/data-table/components/data-table-searchbar.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import { Button as g } from "../../../button.js";
+import { useState as g, useRef as p, useEffect as x } from "react";
+import { Button as v } from "../../../button.js";
 import { cn as z } from "../../../../../lib/utils.js";
-import { useState as p, useRef as x, useEffect as v } from "react";
 import { Tooltip as D, TooltipTrigger as E, TooltipContent as L } from "../../../tooltip.js";
 function K({
   searchableColumnsHeaders: b = [],
@@ -14,12 +14,12 @@ function K({
   id: S,
   "data-testid": C
 }) {
-  const [s, c] = p(t || ""), [f, o] = p(
+  const [s, c] = g(t || ""), [f, o] = g(
     !!(t && t.length > 0)
-  ), B = "search_input_" + Math.random().toString(36).substring(2, 9), N = S ?? B, d = x(null), n = x(null);
-  v(() => {
+  ), B = "search_input_" + Math.random().toString(36).substring(2, 9), N = S ?? B, d = p(null), n = p(null);
+  x(() => {
     t && t.length > 0 ? (c(t), o(!0)) : (t === "" || t === void 0) && (c(""), o(!1));
-  }, [t]), v(() => (u && (n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+  }, [t]), x(() => (u && (n.current && clearTimeout(n.current), n.current = setTimeout(() => {
     u(s);
   }, h)), () => {
     n.current && clearTimeout(n.current);
@@ -43,7 +43,7 @@ function K({
   return /* @__PURE__ */ a("div", { className: z("relative", T), children: /* @__PURE__ */ l("div", { className: "flex items-center", children: [
     /* @__PURE__ */ l(D, { children: [
       /* @__PURE__ */ a(E, { asChild: !0, children: /* @__PURE__ */ a(
-        g,
+        v,
         {
           className: "h-6 w-6",
           iconLeft: "Search",
@@ -98,7 +98,7 @@ function K({
             }
           ),
           s !== "" && /* @__PURE__ */ a(
-            g,
+            v,
             {
               className: "text-muted-foreground hover:text-foreground hover:text-d-destructive absolute top-1 right-0 size-6",
               iconLeft: "X",