laif-ds 0.1.48 → 0.1.50

package/dist/components/ui/async-select.js

@@ -1,19 +1,19 @@
 "use client";
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import * as V from "react";
-import { useState as r, useEffect as y, useCallback as F } from "react";
-import { useDebounce as ee } from "../../hooks/use-debounce.js";
-import { cva as te } from "../../node_modules/class-variance-authority/dist/index.js";
-import { cn as D } from "../../lib/utils.js";
-import { Button as se } from "./button.js";
-import { Label as ne } from "./label.js";
-import { Command as oe, CommandInput as re, CommandList as ae, CommandEmpty as ie, CommandGroup as M, CommandItem as $ } from "./command.js";
-import { Popover as le, PopoverTrigger as ce, PopoverContent as de } from "./popover.js";
-import me from "../../node_modules/lucide-react/dist/esm/icons/x.js";
-import fe from "../../node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js";
-import pe from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
-import ue from "../../node_modules/lucide-react/dist/esm/icons/check.js";
-const he = te(
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import * as Y from "react";
+import { useState as c, useEffect as j, useCallback as D } from "react";
+import { useDebounce as Z } from "../../hooks/use-debounce.js";
+import { cva as _ } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn as k } from "../../lib/utils.js";
+import { Button as V } from "./button.js";
+import { Label as ee } from "./label.js";
+import { Command as te, CommandInput as oe, CommandList as se, CommandEmpty as ne, CommandGroup as O, CommandItem as A } from "./command.js";
+import { Popover as re, PopoverTrigger as ae, PopoverContent as ce } from "./popover.js";
+import ie from "../../node_modules/lucide-react/dist/esm/icons/x.js";
+import le from "../../node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js";
+import de from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import me from "../../node_modules/lucide-react/dist/esm/icons/check.js";
+const fe = _(
   "flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
   {
     variants: {
@@ -28,162 +28,179 @@ const he = te(
     }
   }
 );
-function Ee({
-  fetcher: l,
-  preload: d,
+function ke({
+  fetcher: i,
+  preload: m,
   filterFn: x,
-  renderOption: A,
-  getOptionValue: i,
-  getDisplayValue: B,
-  notFound: G,
-  loadingSkeleton: R,
-  label: c,
-  labelClassName: U,
-  placeholder: X = "Select...",
-  value: a,
-  onChange: m,
-  disabled: j = !1,
-  width: k = "200px",
-  className: q,
-  triggerClassName: H,
-  noResultsMessage: J,
+  renderOption: F,
+  getOptionValue: a,
+  getDisplayValue: w,
+  notFound: R,
+  loadingSkeleton: $,
+  label: l,
+  labelClassName: B,
+  placeholder: G = "Select...",
+  value: n,
+  onChange: p,
+  disabled: z = !1,
+  width: E = "200px",
+  className: M,
+  triggerClassName: U,
+  noResultsMessage: X,
   clearable: v = !0,
-  size: K
+  size: q
 }) {
-  const [f, Q] = r(!1), [E, N] = r(!1), [o, p] = r([]), [w, u] = r(!1), [b, h] = r(null), [C, S] = r(a), [z, L] = r(null), [O, W] = r(""), g = ee(O, d ? 0 : 300), [T, P] = r([]);
-  y(() => {
-    Q(!0), S(a);
-  }, [a]), y(() => {
-    if (a && o.length > 0) {
-      const t = o.find((s) => i(s) === a);
-      t && L(t);
-    }
-  }, [a, o, i]), y(() => {
-    f || (async () => {
-      try {
-        u(!0), h(null);
-        const s = await l(a);
-        P(s), p(s);
-      } catch (s) {
-        h(
-          s instanceof Error ? s.message : "Failed to fetch options"
-        );
-      } finally {
-        u(!1);
-      }
-    })();
-  }, [f, l, a]), y(() => {
-    const t = async () => {
-      try {
-        u(!0), h(null);
-        const s = await l(g);
-        P(s), p(s);
-      } catch (s) {
-        h(
-          s instanceof Error ? s.message : "Failed to fetch options"
+  const [u, N] = c(!1), [r, d] = c([]), [C, h] = c(!1), [b, g] = c(null), [S, y] = c(null), [I, H] = c(""), f = Z(I, m ? 0 : 300), [L, P] = c([]);
+  j(() => ((async () => {
+    try {
+      if (h(!0), g(null), m) {
+        console.log(
+          "[AsyncSelect] Preload attivo: caricamento completo dei dati"
         );
-      } finally {
-        u(!1);
+        const o = await i("");
+        P(o), d(o);
+      } else {
+        const o = await i(n);
+        d(o);
       }
-    };
-    f && d ? d && p(
-      g ? T.filter(
-        (s) => x ? x(s, g) : !0
-      ) : T
-    ) : t();
-  }, [l, g, f, d, x]);
-  const Y = F(
+    } catch (o) {
+      g(
+        o instanceof Error ? o.message : "Failed to fetch options"
+      );
+    } finally {
+      h(!1);
+    }
+  })(), () => {
+    d([]), P([]);
+  }), [i, n, m]), j(() => {
+    if (u)
+      if (m)
+        if (console.log(
+          "[AsyncSelect] Filtraggio locale dei dati con preload attivo"
+        ), f) {
+          const t = L.filter(
+            (o) => x ? x(o, f) : String(w(o)).toLowerCase().includes(f.toLowerCase())
+          );
+          d(t);
+        } else
+          d(L);
+      else
+        (async () => {
+          try {
+            h(!0), g(null);
+            const o = await i(f);
+            d(o);
+          } catch (o) {
+            g(
+              o instanceof Error ? o.message : "Failed to fetch options"
+            );
+          } finally {
+            h(!1);
+          }
+        })();
+  }, [
+    u,
+    f,
+    m,
+    x,
+    L,
+    w
+  ]), j(() => {
+    if (n && r.length > 0) {
+      const t = r.find((o) => a(o) === n);
+      y(t || null);
+    } else n || y(null);
+  }, [n, r, a]);
+  const J = D(
     (t) => {
-      const s = v && t === C ? "" : t;
-      S(s), L(
-        o.find((_) => i(_) === s) || null
-      ), m(s), N(!1);
+      const o = v && t === n ? "" : t, Q = r.find((W) => a(W) === o) || null;
+      y(Q), p(o), N(!1);
     },
-    [C, m, v, o, i]
-  ), Z = F(
+    [n, p, v, r, a]
+  ), K = D(
     (t) => {
-      t.stopPropagation(), t.preventDefault(), S(""), L(null), m(""), N(!1);
+      t.stopPropagation(), t.preventDefault(), y(null), p(""), N(!1);
     },
-    [m]
-  ), I = V.useId();
-  return /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
-    c && /* @__PURE__ */ e(ne, { htmlFor: I, className: U, children: c }),
-    /* @__PURE__ */ n(le, { open: E, onOpenChange: N, children: [
-      /* @__PURE__ */ e(ce, { asChild: !0, children: /* @__PURE__ */ e(
-        se,
+    [p]
+  ), T = Y.useId();
+  return /* @__PURE__ */ s("div", { className: "space-y-1.5", children: [
+    l && /* @__PURE__ */ e(ee, { htmlFor: T, className: B, children: l }),
+    /* @__PURE__ */ s(re, { open: u, onOpenChange: N, children: [
+      /* @__PURE__ */ e(ae, { asChild: !0, children: /* @__PURE__ */ e(
+        V,
         {
-          id: I,
+          id: T,
           variant: "ghost",
           role: "combobox",
-          "aria-expanded": E,
-          className: D(
-            he({ size: K }),
-            j && "cursor-not-allowed opacity-50",
-            H,
+          "aria-expanded": u,
+          className: k(
+            fe({ size: q }),
+            z && "cursor-not-allowed opacity-50",
+            U,
             "font-normal"
           ),
-          style: { width: k },
-          disabled: j,
-          children: /* @__PURE__ */ n("div", { className: "flex flex-1 items-center justify-between overflow-hidden", children: [
-            z ? /* @__PURE__ */ e("div", { className: "truncate", children: B(z) }) : /* @__PURE__ */ e("span", { className: "text-d-muted-foreground hover:text-d-foreground", children: X }),
-            /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
-              v && z && /* @__PURE__ */ e(
+          style: { width: E },
+          disabled: z,
+          children: /* @__PURE__ */ s("div", { className: "flex flex-1 items-center justify-between overflow-hidden", children: [
+            S ? /* @__PURE__ */ e("div", { className: "truncate", children: w(S) }) : /* @__PURE__ */ e("span", { className: "text-d-muted-foreground hover:text-d-foreground", children: G }),
+            /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
+              v && S && /* @__PURE__ */ e(
                 "div",
                 {
                   className: "bg-d-secondary/20 hover:bg-d-secondary/30 z-20 flex cursor-pointer items-center justify-center rounded-full border p-1",
-                  onClick: Z,
+                  onClick: K,
                   onMouseDown: (t) => t.preventDefault(),
                   "aria-label": "Clear selection",
-                  children: /* @__PURE__ */ e(me, { size: 8, className: "text-d-foreground" })
+                  children: /* @__PURE__ */ e(ie, { size: 8, className: "text-d-foreground" })
                 }
               ),
-              /* @__PURE__ */ e(fe, { className: "opacity-50", size: 10 })
+              /* @__PURE__ */ e(le, { className: "opacity-50", size: 10 })
             ] })
           ] })
         }
       ) }),
       /* @__PURE__ */ e(
-        de,
+        ce,
         {
-          style: { width: k },
-          className: D("p-0", q),
-          children: /* @__PURE__ */ n(oe, { shouldFilter: !1, children: [
-            /* @__PURE__ */ n("div", { className: "relative w-full border-b", children: [
+          style: { width: E },
+          className: k("p-0", M),
+          children: /* @__PURE__ */ s(te, { shouldFilter: !1, children: [
+            /* @__PURE__ */ s("div", { className: "relative w-full border-b", children: [
               /* @__PURE__ */ e(
-                re,
+                oe,
                 {
-                  placeholder: `Search ${typeof c == "string" ? c.toLowerCase() : "options"}...`,
-                  value: O,
+                  placeholder: `Search ${typeof l == "string" ? l.toLowerCase() : "options"}...`,
+                  value: I,
                   onValueChange: (t) => {
-                    W(t);
+                    H(t);
                   }
                 }
               ),
-              w && o.length > 0 && /* @__PURE__ */ e("div", { className: "absolute top-1/2 right-2 flex -translate-y-1/2 transform items-center", children: /* @__PURE__ */ e(pe, { className: "h-4 w-4 animate-spin" }) })
+              C && r.length > 0 && /* @__PURE__ */ e("div", { className: "absolute top-1/2 right-2 flex -translate-y-1/2 transform items-center", children: /* @__PURE__ */ e(de, { className: "h-4 w-4 animate-spin" }) })
             ] }),
-            /* @__PURE__ */ n(ae, { children: [
+            /* @__PURE__ */ s(se, { children: [
               b && /* @__PURE__ */ e("div", { className: "text-d-destructive p-3 text-center", children: b }),
-              w && o.length === 0 && (R || /* @__PURE__ */ e(ge, {})),
-              !w && !b && o.length === 0 && (G || /* @__PURE__ */ e(ie, { children: J ?? `No ${typeof c == "string" ? c.toLowerCase() : "options"} found.` })),
-              /* @__PURE__ */ e(M, { children: o.map((t) => /* @__PURE__ */ n(
-                $,
+              C && r.length === 0 && ($ || /* @__PURE__ */ e(pe, {})),
+              !C && !b && r.length === 0 && (R || /* @__PURE__ */ e(ne, { children: X ?? `No ${typeof l == "string" ? l.toLowerCase() : "options"} found.` })),
+              /* @__PURE__ */ e(O, { children: r.map((t) => /* @__PURE__ */ s(
+                A,
                 {
-                  value: i(t),
-                  onSelect: Y,
+                  value: a(t),
+                  onSelect: J,
                   children: [
-                    A(t),
+                    F(t),
                     /* @__PURE__ */ e(
-                      ue,
+                      me,
                       {
-                        className: D(
+                        className: k(
                           "ml-auto h-3 w-3",
-                          C === i(t) ? "opacity-100" : "opacity-0"
+                          n === a(t) ? "opacity-100" : "opacity-0"
                         )
                       }
                     )
                   ]
                 },
-                i(t)
+                a(t)
               )) })
             ] })
           ] })
@@ -192,15 +209,15 @@ function Ee({
     ] })
   ] });
 }
-function ge() {
-  return /* @__PURE__ */ e(M, { children: [1, 2, 3].map((l) => /* @__PURE__ */ e($, { disabled: !0, children: /* @__PURE__ */ n("div", { className: "flex w-full items-center gap-2", children: [
+function pe() {
+  return /* @__PURE__ */ e(O, { children: [1, 2, 3].map((i) => /* @__PURE__ */ e(A, { disabled: !0, children: /* @__PURE__ */ s("div", { className: "flex w-full items-center gap-2", children: [
     /* @__PURE__ */ e("div", { className: "bg-d-secondary h-6 w-6 animate-pulse rounded-full" }),
-    /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-1", children: [
+    /* @__PURE__ */ s("div", { className: "flex flex-1 flex-col gap-1", children: [
       /* @__PURE__ */ e("div", { className: "bg-d-secondary h-4 w-24 animate-pulse rounded" }),
       /* @__PURE__ */ e("div", { className: "bg-d-secondary h-3 w-16 animate-pulse rounded" })
     ] })
-  ] }) }, l)) });
+  ] }) }, i)) });
 }
 export {
-  Ee as AsyncSelect
+  ke as AsyncSelect
 };