laif-ds 0.2.47 → 0.2.48

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

@@ -1,18 +1,18 @@
 "use client";
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as A from "react";
-import { useState as N, useEffect as j, useCallback as $ } from "react";
-import { useDebounce as ae } from "../../hooks/use-debounce.js";
-import { cva as ce } from "../../node_modules/class-variance-authority/dist/index.js";
-import { cn as L } from "../../lib/utils.js";
-import { Label as le } from "./label.js";
-import { Popover as ie, PopoverTrigger as de, PopoverContent as fe } from "./popover.js";
-import { Command as me, CommandInput as ue, CommandList as he, CommandEmpty as pe, CommandGroup as q, CommandItem as H } from "./command.js";
-import { Icon as X } from "./icon.js";
-import { Checkbox as ge } from "./checkbox.js";
-import xe from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
-import we from "../../node_modules/lucide-react/dist/esm/icons/check.js";
-const ye = ce(
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { useDebounce as le } from "../../hooks/use-debounce.js";
+import { cva as de } from "../../node_modules/class-variance-authority/dist/index.js";
+import * as S from "react";
+import { useState as p, useEffect as N, useCallback as j } from "react";
+import { cn as v } from "../../lib/utils.js";
+import { Checkbox as ie } from "./checkbox.js";
+import { Command as fe, CommandInput as me, CommandList as ue, CommandEmpty as he, CommandGroup as _, CommandItem as O } from "./command.js";
+import { Icon as Z } from "./icon.js";
+import { Label as ge } from "./label.js";
+import { Popover as pe, PopoverTrigger as xe, PopoverContent as we } from "./popover.js";
+import ye from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import Ne from "../../node_modules/lucide-react/dist/esm/icons/check.js";
+const be = de(
   "flex items-center justify-between whitespace-nowrap rounded-md border border-d-input bg-d-input px-3 py-2 data-[placeholder]:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 ",
   {
     variants: {
@@ -27,317 +27,303 @@ const ye = ce(
     }
   }
 );
-function De({
-  fetcher: a,
-  preload: c,
-  filterFn: f,
-  renderOption: k,
-  getOptionValue: m,
-  getDisplayValue: s,
-  notFound: u,
-  loadingSkeleton: M,
-  label: h,
-  labelClassName: p,
-  placeholder: _ = "Select...",
-  value: r,
-  onChange: i,
-  disabled: T = !1,
-  width: x = "200px",
-  triggerClassName: z,
-  noResultsMessage: D,
-  clearable: b = !0,
+function Ie({
+  fetcher: i,
+  initialOptions: t,
+  debounce: x = 300,
+  renderOptionItem: b,
+  resolveOptionValue: a,
+  renderSelectedValue: s,
+  notFound: h,
+  label: y,
+  placeholder: f = "Select...",
+  value: n,
+  onChange: g,
+  disabled: C = !1,
+  className: D,
+  wrpClassName: T,
+  noResultsMessage: z,
+  clearable: A = !0,
   multiple: l = !1,
-  size: J
+  size: V
 }) {
-  const [g, O] = N(!1), C = x === "auto", P = A.useRef(null), E = A.useRef(null), Q = A.useRef(null), Y = A.useRef(null), [Z, v] = N({ loading: !1, error: null }), [K, V] = N(""), S = ae(K, c ? 0 : 300), [I, F] = N(/* @__PURE__ */ new Map()), [w, R] = N([]), [B, ee] = N(
-    void 0
-  ), [G, ne] = N([]), W = A.useMemo(() => l || !r || w.length === 0 ? null : w.find((n) => m(n) === r) || null, [r, w, m, l]);
-  j(() => {
-    if (l && Array.isArray(r) && w.length > 0) {
-      const n = w.filter(
-        (t) => r.includes(m(t))
-      );
-      ne(n);
-    }
-  }, [r, w, m, l]), j(() => ((async () => {
-    try {
-      v({ loading: !0, error: null });
-      const t = c ? "__preload__" : "", o = await a("");
-      F((y) => new Map(y).set(t, o)), R(o);
-    } catch (t) {
-      v({
-        loading: !1,
-        error: t instanceof Error ? t.message : "Failed to fetch options"
-      });
-    } finally {
-      v((t) => ({ ...t, loading: !1 }));
-    }
-  })(), () => {
-    R([]), F(/* @__PURE__ */ new Map());
-  }), [a, c]), j(() => {
-    if (g)
-      if (c) {
-        const n = I.get("__preload__") || [];
-        if (S) {
-          const t = n.filter(
-            (o) => f ? f(o, S) : String(s(o)).toLowerCase().includes(S.toLowerCase())
-          );
-          R(t);
-        } else
-          R(n);
-      } else {
-        const n = S || "";
-        if (I.has(n)) {
-          const t = I.get(n);
-          R(t);
-        } else
-          (async () => {
-            try {
-              v({ loading: !0, error: null });
-              const o = await a(S);
-              F((y) => new Map(y).set(n, o)), R(o);
-            } catch (o) {
-              v({
-                loading: !1,
-                error: o instanceof Error ? o.message : "Failed to fetch options"
-              });
-            } finally {
-              v((o) => ({ ...o, loading: !1 }));
-            }
-          })();
+  const [m, E] = p(!1), L = S.useRef(null), P = S.useRef(null), ee = S.useRef(null), [re, F] = p({ loading: !1, error: null }), [U, ne] = p(""), I = le(U, x), [W, X] = p(/* @__PURE__ */ new Map()), [B, $] = p([]), [q, te] = p(0), [H, J] = p(() => t?.length ? new Map(
+    t.map((e) => [a(e), e])
+  ) : /* @__PURE__ */ new Map());
+  N(() => {
+    t?.length && (X((e) => {
+      const o = new Map(e);
+      return o.has("") || o.set("", t), o;
+    }), $((e) => e.length ? e : t), J((e) => {
+      const o = new Map(e);
+      return t.forEach((c) => o.set(a(c), c)), o;
+    }));
+  }, [t, a]);
+  const [M, Q] = p([]), R = j(
+    (e) => {
+      if (!e) {
+        Q([]);
+        return;
       }
-  }, [
-    g,
-    S,
-    c,
-    f,
-    I,
-    s,
-    a
-  ]), j(() => {
-    g && P.current && P.current.focus();
-  }, [g]), j(() => {
-    if (g && E.current && C) {
-      const n = E.current.getBoundingClientRect();
-      ee(n.width);
+      const c = (Array.isArray(e) ? e : [e]).map((d) => {
+        const w = H.get(d);
+        if (w) return w;
+        if (t?.length) {
+          const k = t.find(
+            (oe) => a(oe) === d
+          );
+          if (k) return k;
+        }
+        return B.find(
+          (k) => a(k) === d
+        ) ?? null;
+      }).filter(Boolean);
+      Q(c);
+    },
+    [H, a, t, B]
+  );
+  N(() => {
+    R(n);
+  }, [n, R]);
+  const G = S.useMemo(() => l ? null : M[0] ?? null, [l, M]);
+  N(() => {
+    if (!m) return;
+    const e = I || "";
+    if (W.has(e)) {
+      $(W.get(e));
+      return;
     }
-  }, [g, C]);
-  const re = $(
-    (n) => {
-      i?.(b && n === r ? "" : n), O(!1);
+    (async () => {
+      try {
+        F({ loading: !0, error: null });
+        const c = await i(I);
+        X((d) => new Map(d).set(e, c)), $(c), J((d) => {
+          const w = new Map(d);
+          return c.forEach((K) => w.set(a(K), K)), w;
+        });
+      } catch (c) {
+        F({
+          loading: !1,
+          error: c instanceof Error ? c.message : "Failed to fetch options"
+        });
+      } finally {
+        F((c) => ({ ...c, loading: !1 }));
+      }
+    })();
+  }, [m, I, W, i, a]), N(() => {
+    m && R(n);
+  }, [m, R, n]), N(() => {
+    m && L.current && L.current.focus();
+  }, [m]), N(() => {
+    if (!m || !P.current) return;
+    const e = P.current.getBoundingClientRect();
+    te(e.width);
+  }, [m]);
+  const se = j(
+    (e) => {
+      g?.(A && e === n ? "" : e), E(!1);
     },
-    [r, i, b]
-  ), te = $(
-    (n) => {
+    [n, g, A]
+  ), ce = j(
+    (e) => {
       if (!l) return;
-      const t = r, o = t.includes(n);
-      let y;
-      o ? y = t.filter((oe) => oe !== n) : y = [...t, n], i?.(y);
+      const o = Array.isArray(n) ? n : [], c = o.includes(e);
+      let d;
+      c ? d = o.filter((w) => w !== e) : d = [...o, e], g?.(d);
     },
-    [r, i, l]
-  ), se = $(
-    (n) => {
-      n.stopPropagation(), n.preventDefault(), i?.(l ? [] : ""), O(!1);
+    [n, g, l]
+  ), ae = j(
+    (e) => {
+      e.stopPropagation(), e.preventDefault(), g?.(l ? [] : ""), E(!1);
     },
-    [i]
-  ), U = A.useId();
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      className: L("grid grid-cols-1 space-y-1.5", C && "w-full"),
-      children: [
-        h && /* @__PURE__ */ e(le, { htmlFor: U, className: L(p, "w-fit"), children: h }),
-        /* @__PURE__ */ e("div", { ref: Q, className: "relative", "data-slot": "async-select", children: /* @__PURE__ */ d(ie, { open: g, onOpenChange: O, children: [
-          /* @__PURE__ */ e(de, { asChild: !0, children: /* @__PURE__ */ e(
-            "button",
-            {
-              id: U,
-              ref: E,
-              type: "button",
-              disabled: T,
-              className: L(
-                ye({ size: J }),
-                "!border-d-border/50 border !shadow-none",
-                T && "cursor-not-allowed opacity-50",
-                z,
-                "font-normal",
-                C && "w-full",
-                "focus-visible:ring-d-ring focus-visible:ring-1",
-                g && "ring-d-ring ring-1"
-              ),
-              style: C ? void 0 : { width: x },
-              children: /* @__PURE__ */ d("div", { className: "flex w-full flex-1 items-center justify-between overflow-hidden", children: [
-                l ? Array.isArray(r) && r.length > 0 ? /* @__PURE__ */ e("div", { className: "min-w-0 flex-1 truncate text-left", children: r.length === 1 ? G[0] && s(G[0]) : `${r.length} elementi selezionati` }) : /* @__PURE__ */ e("span", { className: "text-d-muted-foreground truncate text-left", children: _ }) : W ? /* @__PURE__ */ e("div", { className: "min-w-0 flex-1 truncate text-left", children: s(W) }) : /* @__PURE__ */ e("span", { className: "text-d-muted-foreground truncate text-left", children: _ }),
-                /* @__PURE__ */ d("div", { className: "flex flex-shrink-0 items-center justify-end gap-1", children: [
-                  b && (l && Array.isArray(r) && r.length > 0 || !l && W) && /* @__PURE__ */ e(
-                    "div",
-                    {
-                      className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
-                      onClick: se,
-                      onMouseDown: (n) => n.preventDefault(),
-                      "aria-label": "Clear selection",
-                      children: /* @__PURE__ */ e(
-                        X,
-                        {
-                          name: "X",
-                          size: "xs",
-                          className: "!text-d-foreground opacity-50"
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    X,
+    [g]
+  ), Y = S.useId();
+  return /* @__PURE__ */ u("div", { className: v("flex flex-col gap-2", T), children: [
+    y && /* @__PURE__ */ r(ge, { htmlFor: Y, children: y }),
+    /* @__PURE__ */ u(pe, { open: m, onOpenChange: E, children: [
+      /* @__PURE__ */ r(xe, { asChild: !0, children: /* @__PURE__ */ r(
+        "button",
+        {
+          id: Y,
+          ref: P,
+          type: "button",
+          disabled: C,
+          className: v(
+            be({ size: V }),
+            "!border-d-border/50 border !shadow-none",
+            C && "cursor-not-allowed opacity-50",
+            "font-normal",
+            "w-full",
+            "focus-visible:ring-d-ring focus-visible:ring-1",
+            m && "ring-d-ring ring-1",
+            D
+          ),
+          children: /* @__PURE__ */ u("div", { className: "flex w-full flex-1 items-center justify-between overflow-hidden", children: [
+            l ? Array.isArray(n) && n.length > 0 ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: n.length === 1 ? M[0] && s(M[0]) : `${n.length} elementi selezionati` }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }) : G ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: s(G) }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }),
+            /* @__PURE__ */ u("div", { className: "flex flex-shrink-0 items-center justify-end gap-1", children: [
+              A && (l && Array.isArray(n) && n.length > 0 || !l && G) && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
+                  onClick: ae,
+                  onMouseDown: (e) => e.preventDefault(),
+                  "aria-label": "Clear selection",
+                  children: /* @__PURE__ */ r(
+                    Z,
                     {
-                      name: "ChevronsUpDown",
+                      name: "X",
                       size: "xs",
                       className: "!text-d-foreground opacity-50"
                     }
                   )
-                ] })
-              ] })
-            }
-          ) }),
-          /* @__PURE__ */ e(
-            fe,
-            {
-              className: L("p-0"),
-              style: {
-                width: C ? B ? `${B}px` : void 0 : typeof x == "number" ? `${x}px` : x
-              },
-              align: "start",
-              side: "bottom",
-              sideOffset: 4,
-              onWheel: (n) => n.stopPropagation(),
-              avoidCollisions: !1,
-              children: /* @__PURE__ */ e(
-                be,
+                }
+              ),
+              /* @__PURE__ */ r(
+                Z,
                 {
-                  inputRef: P,
-                  commandListRef: Y,
-                  placeholder: _,
-                  searchTerm: K,
-                  onSearchTermChange: V,
-                  fetchState: Z,
-                  options: w,
-                  loadingSkeleton: M,
-                  notFound: u,
-                  noResultsMessage: D,
-                  multiple: l,
-                  value: r,
-                  getOptionValue: m,
-                  getDisplayValue: s,
-                  renderOption: k,
-                  onSelect: re,
-                  onSelectMultiple: te
+                  name: "ChevronsUpDown",
+                  size: "xs",
+                  className: "!text-d-foreground opacity-50"
                 }
               )
+            ] })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        we,
+        {
+          className: v("p-0"),
+          style: { width: q ? `${q}px` : void 0 },
+          align: "start",
+          side: "bottom",
+          sideOffset: 4,
+          onWheel: (e) => e.stopPropagation(),
+          avoidCollisions: !1,
+          children: /* @__PURE__ */ r(
+            Ae,
+            {
+              inputRef: L,
+              commandListRef: ee,
+              placeholder: f,
+              searchTerm: U,
+              onSearchTermChange: ne,
+              fetchState: re,
+              options: B,
+              notFound: h,
+              noResultsMessage: z,
+              multiple: l,
+              value: n,
+              resolveOptionValue: a,
+              renderSelectedValue: s,
+              renderOptionItem: b,
+              onSelect: se,
+              onSelectMultiple: ce
             }
           )
-        ] }) })
-      ]
-    }
-  );
+        }
+      )
+    ] })
+  ] });
 }
-function Ne({
-  option: a,
-  multiple: c,
-  value: f,
-  getOptionValue: k,
-  getDisplayValue: m,
-  renderOption: s,
-  onSelect: u,
-  onSelectMultiple: M
+function Ce({
+  option: i,
+  multiple: t,
+  value: x,
+  resolveOptionValue: b,
+  renderSelectedValue: a,
+  renderOptionItem: s,
+  onSelect: h,
+  onSelectMultiple: y
 }) {
-  const h = k(a);
-  let p = !1;
-  return c ? p = Array.isArray(f) && f.includes(h) : p = f === h, /* @__PURE__ */ e(
-    H,
+  const f = b(i);
+  let n = !1;
+  return t ? n = Array.isArray(x) && x.includes(f) : n = x === f, /* @__PURE__ */ r(
+    O,
     {
-      value: h,
-      onSelect: c ? M : u,
+      value: f,
+      onSelect: t ? y : h,
       className: "cursor-pointer",
-      children: /* @__PURE__ */ d("div", { className: "flex w-full items-center justify-between overflow-hidden", children: [
-        /* @__PURE__ */ d("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-          c && /* @__PURE__ */ e(ge, { checked: p }),
-          s ? /* @__PURE__ */ e("div", { className: "truncate", children: s(a) }) : /* @__PURE__ */ e("span", { className: "truncate", children: m(a) })
+      children: /* @__PURE__ */ u("div", { className: "flex w-full items-center justify-between overflow-hidden", children: [
+        /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          t && /* @__PURE__ */ r(ie, { checked: n }),
+          s ? /* @__PURE__ */ r("div", { className: "truncate", children: s(i) }) : /* @__PURE__ */ r("span", { className: "truncate", children: a(i) })
         ] }),
-        /* @__PURE__ */ e(
-          we,
+        /* @__PURE__ */ r(
+          Ne,
           {
-            className: L(
+            className: v(
               "ml-2 h-4 w-4 flex-shrink-0",
-              p ? "opacity-100" : "opacity-0"
+              n ? "opacity-100" : "opacity-0"
             )
           }
         )
       ] })
     },
-    h
+    f
   );
 }
-function be({
-  inputRef: a,
-  commandListRef: c,
-  placeholder: f,
-  searchTerm: k,
-  onSearchTermChange: m,
+function Ae({
+  inputRef: i,
+  commandListRef: t,
+  placeholder: x,
+  searchTerm: b,
+  onSearchTermChange: a,
   fetchState: s,
-  options: u,
-  loadingSkeleton: M,
-  notFound: h,
-  noResultsMessage: p,
-  multiple: _,
-  value: r,
-  getOptionValue: i,
-  getDisplayValue: T,
-  renderOption: x,
+  options: h,
+  notFound: y,
+  noResultsMessage: f,
+  multiple: n,
+  value: g,
+  resolveOptionValue: C,
+  renderSelectedValue: D,
+  renderOptionItem: T,
   onSelect: z,
-  onSelectMultiple: D
+  onSelectMultiple: A
 }) {
-  return /* @__PURE__ */ d(me, { shouldFilter: !1, className: "w-full border-none shadow-sm", children: [
-    /* @__PURE__ */ e(
-      ue,
+  return /* @__PURE__ */ u(fe, { shouldFilter: !1, className: "w-full border-none shadow-sm", children: [
+    /* @__PURE__ */ r(
+      me,
       {
-        ref: a,
-        placeholder: f,
+        ref: i,
+        placeholder: x,
         className: "placeholder:text-d-muted-foreground",
-        value: k,
-        onValueChange: m
+        value: b,
+        onValueChange: a
       }
     ),
-    s.loading && u.length > 0 && /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ e(xe, { className: "h-4 w-4 animate-spin" }) }),
-    /* @__PURE__ */ d(he, { ref: c, children: [
-      s.error && /* @__PURE__ */ e("div", { className: "text-d-destructive p-3 text-center", children: s.error }),
-      s.loading && u.length === 0 && (M || /* @__PURE__ */ e(Ce, {})),
-      !s.loading && !s.error && u.length === 0 && (h || /* @__PURE__ */ e(pe, { children: p || "No results found." })),
-      !s.loading && !s.error && u.length > 0 && /* @__PURE__ */ e(q, { children: u.map((b) => /* @__PURE__ */ e(
-        Ne,
+    s.loading && h.length > 0 && /* @__PURE__ */ r("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ r(ye, { className: "h-4 w-4 animate-spin" }) }),
+    /* @__PURE__ */ u(ue, { ref: t, children: [
+      s.error && /* @__PURE__ */ r("div", { className: "text-d-destructive p-3 text-center", children: s.error }),
+      s.loading && h.length === 0 && /* @__PURE__ */ r(Se, {}),
+      !s.loading && !s.error && h.length === 0 && (y || /* @__PURE__ */ r(he, { children: f || "No results found." })),
+      !s.loading && !s.error && h.length > 0 && /* @__PURE__ */ r(_, { children: h.map((l) => /* @__PURE__ */ r(
+        Ce,
         {
-          option: b,
-          multiple: _,
-          value: r,
-          getOptionValue: i,
-          getDisplayValue: T,
-          renderOption: x,
+          option: l,
+          multiple: n,
+          value: g,
+          resolveOptionValue: C,
+          renderSelectedValue: D,
+          renderOptionItem: T,
           onSelect: z,
-          onSelectMultiple: D
+          onSelectMultiple: A
         },
-        i(b)
+        C(l)
       )) })
     ] })
   ] });
 }
-function Ce() {
-  return /* @__PURE__ */ e(q, { children: [1, 2, 3].map((a) => /* @__PURE__ */ e(H, { disabled: !0, children: /* @__PURE__ */ d("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__ */ d("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" })
+function Se() {
+  return /* @__PURE__ */ r(_, { children: [1, 2, 3].map((i) => /* @__PURE__ */ r(O, { disabled: !0, children: /* @__PURE__ */ u("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ r("div", { className: "bg-d-secondary h-6 w-6 animate-pulse rounded-full" }),
+    /* @__PURE__ */ u("div", { className: "flex flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ r("div", { className: "bg-d-secondary h-4 w-24 animate-pulse rounded" }),
+      /* @__PURE__ */ r("div", { className: "bg-d-secondary h-3 w-16 animate-pulse rounded" })
     ] })
-  ] }) }, a)) });
+  ] }) }, i)) });
 }
 export {
-  De as AsyncSelect,
-  ye as selectTriggerVariants
+  Ie as AsyncSelect,
+  be as selectTriggerVariants
 };