laif-ds 0.2.78 → 0.2.80

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

@@ -1,149 +1,197 @@
 "use client";
-import { jsxs as o, jsx as l } from "react/jsx-runtime";
-import { useState as v, useRef as T, useCallback as B, useMemo as S, useEffect as de, useLayoutEffect as ce } from "react";
-import { designTokens as i } from "../design-tokens.js";
-import { Badge as ue } from "./badge.js";
-import { Command as me, CommandInput as fe, CommandList as pe, CommandEmpty as he, CommandGroup as E, CommandItem as F } from "./command.js";
-import { Label as ge } from "./label.js";
-import { cn as z } from "../../lib/utils.js";
-import { Checkbox as ve } from "./checkbox.js";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useState as S, useRef as X, useCallback as k, useMemo as b, useEffect as pe, useLayoutEffect as ge } from "react";
+import { designTokens as m } from "../design-tokens.js";
+import { Badge as ve } from "./badge.js";
+import { Command as be, CommandInput as xe, CommandList as Ce, CommandEmpty as ye, CommandGroup as $, CommandItem as _ } from "./command.js";
+import { Label as we } from "./label.js";
+import { cn as C } from "../../lib/utils.js";
+import { Button as Ne } from "./button.js";
+import { Checkbox as Se } from "./checkbox.js";
 import { Icon as A } from "./icon.js";
-import { Popover as be, PopoverTrigger as Ce, PopoverContent as xe } from "./popover.js";
-import ye from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-const Ne = {
-  sm: i.sizes.sm,
-  default: i.sizes.default,
-  lg: i.sizes.lg
+import { Popover as ke, PopoverTrigger as Ae, PopoverContent as De } from "./popover.js";
+import ze from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const Pe = {
+  sm: m.sizes.sm,
+  default: m.sizes.default,
+  lg: m.sizes.lg
 };
-function Ve(O) {
+function Ge(y) {
   const {
-    multiple: t = !1,
-    options: m,
-    value: G,
-    defaultValue: W,
-    renderValue: g,
-    onValueChange: b,
-    onClear: C,
-    placeholder: X = "Seleziona...",
-    emptyPlaceholder: $ = "Nessun risultato",
-    searchPlaceholder: q = "Cerca...",
-    addItemPlaceholder: H = "Aggiungi",
-    itemCountMessage: J = (e) => `${e} elementi selezionati`,
-    maxSelectedMessage: K = (e) => `Puoi selezionare fino a ${e} elementi`,
-    label: k,
-    className: Q = "",
-    labelClassName: U = "",
-    wrpClassName: Y = "",
-    searchable: D = !1,
-    creatable: Z = !1,
-    noGroupLabel: L = "Nessun gruppo",
-    maxSelected: c,
-    showChipsInsteadOfCount: _ = !1,
-    disabled: x,
-    size: ee = "default",
-    isSingleSelectClearable: le = !1,
-    id: re,
-    "data-testid": ae
-  } = O, [h, y] = v(!1), [f, N] = v(""), w = T(null), I = T(null), [j, te] = v(0), P = Object.prototype.hasOwnProperty.call(O, "value"), [ne, se] = v(W), d = P ? G : ne, p = B(
+    multiple: r = !1,
+    options: d,
+    value: H,
+    defaultValue: J,
+    renderValue: w,
+    onValueChange: D,
+    onClear: z,
+    placeholder: K = "Seleziona...",
+    emptyPlaceholder: Q = "Nessun risultato",
+    searchPlaceholder: U = "Cerca...",
+    addItemPlaceholder: Y = "Aggiungi",
+    itemCountMessage: Z = (e) => `${e} elementi selezionati`,
+    maxSelectedMessage: ee = (e) => `Puoi selezionare fino a ${e} elementi`,
+    label: T,
+    className: le = "",
+    labelClassName: te = "",
+    wrpClassName: ae = "",
+    searchable: P = !1,
+    creatable: re = !1,
+    noGroupLabel: q = "Nessun gruppo",
+    maxSelected: s,
+    showChipsInsteadOfCount: ne = !1,
+    disabled: I,
+    size: se = "default",
+    isSingleSelectClearable: oe = !1,
+    id: ie,
+    "data-testid": ce
+  } = y, N = y.multiple ? y.selectableAll ?? !0 : !1, [x, L] = S(!1), [h, O] = S(""), V = X(null), M = X(null), [B, de] = S(0), j = Object.prototype.hasOwnProperty.call(y, "value"), [ue, fe] = S(J), p = j ? H : ue, u = k(
     (e) => {
-      P || se(e), b?.(
-        t ? Array.isArray(e) ? e : [] : Array.isArray(e) ? e[0] : e
+      j || fe(e), D?.(
+        r ? Array.isArray(e) ? e : [] : Array.isArray(e) ? e[0] : e
       );
     },
-    [P, t, b]
-  ), n = S(() => t ? Array.isArray(d) ? d : [] : d != null ? [d] : [], [d, t]), u = S(() => {
-    const e = m.filter((a) => n.includes(a.value));
-    if (t) {
-      const a = n.filter((r) => !e.find((s) => s.value === r)).map((r) => ({ value: r, label: r }));
-      return [...e, ...a];
+    [j, r, D]
+  ), n = b(() => r ? Array.isArray(p) ? p : [] : p != null ? [p] : [], [p, r]), g = b(() => {
+    const e = d.filter((t) => n.includes(t.value));
+    if (r) {
+      const t = n.filter((l) => !e.find((o) => o.value === l)).map((l) => ({ value: l, label: l }));
+      return [...e, ...t];
     } else if (n.length && !e.length)
       return [{ value: n[0], label: n[0] }];
     return e;
-  }, [m, n, t]), V = (e) => {
+  }, [d, n, r]), E = (e) => {
     if (!e.disabled)
-      if (t) {
-        const a = n.includes(e.value);
-        if (!a && c !== void 0 && n.length >= c)
+      if (r) {
+        const t = n.includes(e.value);
+        if (!t && s !== void 0 && n.length >= s)
           return;
-        p(
-          a ? n.filter((r) => r !== e.value) : [...n, e.value]
+        u(
+          t ? n.filter((l) => l !== e.value) : [...n, e.value]
         );
       } else
-        p(e.value), y(!1);
-  }, M = B(() => {
-    p(t ? [] : void 0), N(""), C && C();
-  }, [p, C, t]), oe = S(() => {
-    const e = m.some((a) => a.group);
-    return m.reduce((a, r) => {
-      const s = e ? r.group || L : "";
-      return a[s] = a[s] || [], a[s].push(r), a;
+        u(e.value), L(!1);
+  }, G = k(() => {
+    u(r ? [] : void 0), O(""), z && z();
+  }, [u, z, r]), W = k(
+    (e) => {
+      const t = h.toLocaleLowerCase();
+      return t ? (typeof e.label == "string" ? e.label : String(e.value)).toLocaleLowerCase().includes(t) : !0;
+    },
+    [h]
+  ), f = b(
+    () => d.filter((e) => !e.disabled && W(e)),
+    [d, W]
+  ), R = b(
+    () => f.filter((e) => n.includes(e.value)).length,
+    [f, n]
+  ), v = b(() => {
+    if (R === 0) return "none";
+    const e = s !== void 0 && n.length >= s;
+    return R >= f.length || e ? "all" : "some";
+  }, [
+    R,
+    f.length,
+    n.length,
+    s
+  ]), me = k(() => {
+    if (!r) return;
+    if (v === "all") {
+      const l = new Set(f.map((i) => i.value)), o = new Set(
+        d.filter((i) => i.fixed).map((i) => i.value)
+      ), F = n.filter(
+        (i) => !l.has(i) || o.has(i)
+      );
+      u(F);
+      return;
+    }
+    const e = new Set(n), t = [...n];
+    for (const l of f)
+      if (!e.has(l.value)) {
+        if (s !== void 0 && t.length >= s) break;
+        t.push(l.value), e.add(l.value);
+      }
+    u(t);
+  }, [
+    r,
+    v,
+    d,
+    n,
+    f,
+    s,
+    u
+  ]), he = b(() => {
+    const e = d.some((t) => t.group);
+    return d.reduce((t, l) => {
+      const o = e ? l.group || q : "";
+      return t[o] = t[o] || [], t[o].push(l), t;
     }, {});
-  }, [m, L]);
-  return de(() => {
-    w.current && te(w.current.getBoundingClientRect().width);
-  }, [h, n, m]), ce(() => {
-    if (!h) return;
+  }, [d, q]);
+  return pe(() => {
+    V.current && de(V.current.getBoundingClientRect().width);
+  }, [x, n, d]), ge(() => {
+    if (!x) return;
     const e = requestAnimationFrame(() => {
-      I.current && I.current?.scrollIntoView({
+      M.current && M.current?.scrollIntoView({
         behavior: "instant",
         block: "center"
       });
     });
     return () => cancelAnimationFrame(e);
-  }, [h]), /* @__PURE__ */ o("div", { className: z("flex flex-col gap-1.5", Y), children: [
-    k && /* @__PURE__ */ l(ge, { className: U, children: k }),
-    /* @__PURE__ */ o(
-      be,
+  }, [x]), /* @__PURE__ */ c("div", { className: C("flex flex-col gap-1.5", ae), children: [
+    T && /* @__PURE__ */ a(we, { className: te, children: T }),
+    /* @__PURE__ */ c(
+      ke,
       {
-        open: x ? !1 : h,
-        onOpenChange: (e) => !x && y(e),
+        open: I ? !1 : x,
+        onOpenChange: (e) => !I && L(e),
         modal: !0,
         children: [
-          /* @__PURE__ */ l(Ce, { asChild: !0, children: /* @__PURE__ */ o(
+          /* @__PURE__ */ a(Ae, { asChild: !0, children: /* @__PURE__ */ c(
             "div",
             {
-              ref: w,
-              id: re,
-              "data-testid": ae,
-              className: z(
-                i.input.base,
-                i.radius.default,
-                i.focusRingWithin,
+              ref: V,
+              id: ie,
+              "data-testid": ce,
+              className: C(
+                m.input.base,
+                m.radius.default,
+                m.focusRingWithin,
                 "flex w-full min-w-[100px] cursor-pointer items-center justify-between gap-2",
-                h && i.activeRing,
-                Ne[ee],
-                x && "cursor-not-allowed opacity-50",
-                Q
+                x && m.activeRing,
+                Pe[se],
+                I && "cursor-not-allowed opacity-50",
+                le
               ),
               children: [
-                u.length === 0 ? /* @__PURE__ */ l("span", { className: "text-d-muted-foreground", children: X }) : t ? /* @__PURE__ */ o("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-nowrap gap-1 overflow-auto", children: _ ? u.map(
-                    (e) => g ? g(e) : /* @__PURE__ */ o(
-                      ue,
+                g.length === 0 ? /* @__PURE__ */ a("span", { className: "text-d-muted-foreground", children: K }) : r ? /* @__PURE__ */ c("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-nowrap gap-1 overflow-auto", children: ne ? g.map(
+                    (e) => w ? w(e) : /* @__PURE__ */ c(
+                      ve,
                       {
                         variant: "secondary",
                         className: "hover:bg-d-secondary/100 bg-d-secondary/50 border-d-border flex cursor-pointer items-center gap-1 border",
-                        onClick: (a) => {
-                          a.stopPropagation(), V(e);
+                        onClick: (t) => {
+                          t.stopPropagation(), E(e);
                         },
                         children: [
                           e.label,
-                          !e.fixed && /* @__PURE__ */ l(A, { name: "X", size: "xs" })
+                          !e.fixed && /* @__PURE__ */ a(A, { name: "X", size: "xs" })
                         ]
                       },
                       e.value
                     )
-                  ) : /* @__PURE__ */ l("div", { children: J(u.length) }) }),
-                  t && /* @__PURE__ */ l(
+                  ) : /* @__PURE__ */ a("div", { children: Z(g.length) }) }),
+                  r && /* @__PURE__ */ a(
                     "div",
                     {
                       className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
                       onClick: (e) => {
-                        e.stopPropagation(), e.preventDefault(), M();
+                        e.stopPropagation(), e.preventDefault(), G();
                       },
                       onMouseDown: (e) => e.preventDefault(),
                       "aria-label": "Clear selection",
-                      children: /* @__PURE__ */ l(
+                      children: /* @__PURE__ */ a(
                         A,
                         {
                           name: "X",
@@ -153,19 +201,19 @@ function Ve(O) {
                       )
                     }
                   )
-                ] }) : /* @__PURE__ */ o("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ l("div", { className: "min-w-0 flex-1 truncate", children: g ? g(u[0]) : typeof u[0]?.label == "string" ? /* @__PURE__ */ l("span", { children: u[0]?.label }) : u[0]?.label }),
-                  le && d !== void 0 && d !== null && /* @__PURE__ */ l(
+                ] }) : /* @__PURE__ */ c("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ a("div", { className: "min-w-0 flex-1 truncate", children: w ? w(g[0]) : typeof g[0]?.label == "string" ? /* @__PURE__ */ a("span", { children: g[0]?.label }) : g[0]?.label }),
+                  oe && p !== void 0 && p !== null && /* @__PURE__ */ a(
                     "div",
                     {
                       role: "button",
                       className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
                       onClick: (e) => {
-                        e.stopPropagation(), e.preventDefault(), M();
+                        e.stopPropagation(), e.preventDefault(), G();
                       },
                       onMouseDown: (e) => e.preventDefault(),
                       "aria-label": "Clear selection",
-                      children: /* @__PURE__ */ l(
+                      children: /* @__PURE__ */ a(
                         A,
                         {
                           name: "X",
@@ -176,76 +224,117 @@ function Ve(O) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ l(ye, { className: "h-4 w-4 opacity-50" })
+                /* @__PURE__ */ a(ze, { className: "h-4 w-4 opacity-50" })
               ]
             }
           ) }),
-          /* @__PURE__ */ l(
-            xe,
+          /* @__PURE__ */ a(
+            De,
             {
               className: "p-0",
-              style: { width: j > 0 ? j : "auto" },
+              style: { width: B > 0 ? B : "auto" },
               align: "start",
               sideOffset: 4,
               avoidCollisions: !0,
               collisionPadding: 8,
-              children: /* @__PURE__ */ o(
-                me,
+              onOpenAutoFocus: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ c(
+                be,
                 {
-                  shouldFilter: D,
-                  filter: (e, a) => e.toLocaleLowerCase().includes(a.toLocaleLowerCase()) ? 1 : 0,
+                  shouldFilter: P,
+                  filter: (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()) ? 1 : 0,
                   className: "w-full",
                   children: [
-                    D && /* @__PURE__ */ l(
-                      fe,
+                    (P || r && N) && /* @__PURE__ */ c(
+                      "div",
                       {
-                        placeholder: q,
-                        className: "placeholder:text-d-muted-foreground",
-                        value: f,
-                        onValueChange: N
+                        className: C(
+                          "relative",
+                          r && N && "[&_[data-slot=command-d-input-wrapper]>svg]:hidden"
+                        ),
+                        children: [
+                          P ? /* @__PURE__ */ a(
+                            xe,
+                            {
+                              placeholder: U,
+                              className: C(
+                                "placeholder:text-d-muted-foreground",
+                                r && N && "pl-7"
+                              ),
+                              value: h,
+                              onValueChange: O
+                            }
+                          ) : /* @__PURE__ */ a("div", { className: "border-d-border h-9 border-b" }),
+                          r && N && /* @__PURE__ */ a(
+                            Ne,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "sm",
+                              disabled: f.length === 0,
+                              "aria-label": v === "all" ? "Deselect all" : "Select all",
+                              "aria-checked": v === "all" ? !0 : v === "some" ? "mixed" : !1,
+                              role: "checkbox",
+                              className: "text-d-muted-foreground hover:text-d-foreground absolute top-1/2 left-2 size-6 -translate-y-1/2 px-0",
+                              onMouseDown: (e) => {
+                                e.stopPropagation(), e.preventDefault();
+                              },
+                              onClick: (e) => {
+                                e.stopPropagation(), e.preventDefault(), me();
+                              },
+                              children: /* @__PURE__ */ a(
+                                A,
+                                {
+                                  name: f.length === 0 ? "SquareDot" : v === "all" ? "SquareCheck" : v === "some" ? "SquareMinus" : "Square",
+                                  size: "xs"
+                                }
+                              )
+                            }
+                          )
+                        ]
                       }
                     ),
-                    /* @__PURE__ */ o(pe, { className: "max-h-60 overflow-auto overscroll-contain", children: [
-                      /* @__PURE__ */ l(he, { children: $ }),
-                      Z && f && /* @__PURE__ */ l(E, { children: /* @__PURE__ */ l(
-                        F,
+                    /* @__PURE__ */ c(Ce, { className: "max-h-60 overflow-auto overscroll-contain", children: [
+                      /* @__PURE__ */ a(ye, { children: Q }),
+                      re && h && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(
+                        _,
                         {
                           className: "cursor-pointer",
                           onSelect: () => {
-                            f && (p(t ? [...n, f] : f), N(""), t || y(!1));
+                            h && (u(r ? [...n, h] : h), O(""), r || L(!1));
                           },
-                          children: /* @__PURE__ */ o("div", { className: "text-d-foreground text-xs", children: [
-                            H,
+                          children: /* @__PURE__ */ c("div", { className: "text-d-foreground text-xs", children: [
+                            Y,
                             " “",
-                            f,
+                            h,
                             "”"
                           ] })
                         }
                       ) }),
-                      Object.entries(oe).map(([e, a]) => /* @__PURE__ */ l(E, { heading: e || void 0, children: a.map((r) => {
-                        const s = n.includes(r.value), ie = t && c !== void 0 && !s && n.length >= c, R = r.disabled || ie;
-                        return /* @__PURE__ */ o(
-                          F,
+                      Object.entries(he).map(([e, t]) => /* @__PURE__ */ a($, { heading: e || void 0, children: t.map((l) => {
+                        const o = n.includes(l.value), F = r && s !== void 0 && !o && n.length >= s, i = l.disabled || F;
+                        return /* @__PURE__ */ c(
+                          _,
                           {
-                            ref: s ? I : null,
-                            value: typeof r.label == "string" ? r.label : String(r.value),
-                            onSelect: () => !R && V(r),
-                            className: z(
+                            ref: o ? M : null,
+                            value: typeof l.label == "string" ? l.label : String(l.value),
+                            onSelect: () => !i && E(l),
+                            className: C(
                               "cursor-pointer",
-                              i.dropdownItem.hover,
-                              R && "cursor-not-allowed opacity-50",
-                              !t && s && i.dropdownItem.selected
+                              m.dropdownItem.hover,
+                              i && "cursor-not-allowed opacity-50",
+                              !r && o && m.dropdownItem.selected
                             ),
                             children: [
-                              t && /* @__PURE__ */ l(ve, { checked: s, className: "mr-1" }),
-                              typeof r.label == "string" ? /* @__PURE__ */ l("span", { children: r.label }) : r.label
+                              r && /* @__PURE__ */ a(Se, { checked: o, className: "mr-1" }),
+                              typeof l.label == "string" ? /* @__PURE__ */ a("span", { children: l.label }) : l.label
                             ]
                           },
-                          r.value
+                          l.value
                         );
                       }) }, e))
                     ] }),
-                    t && c !== void 0 && n.length >= c && /* @__PURE__ */ l("div", { className: "border-d-border text-d-muted-foreground border-t px-2 py-1 text-xs", children: K(c) })
+                    r && s !== void 0 && n.length >= s && /* @__PURE__ */ a("div", { className: "border-d-border text-d-muted-foreground border-t px-2 py-1 text-xs", children: ee(s) })
                   ]
                 }
               )
@@ -257,5 +346,5 @@ function Ve(O) {
   ] });
 }
 export {
-  Ve as AppSelect
+  Ge as AppSelect
 };