laif-ds 0.1.86 → 0.1.88

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

@@ -1,131 +1,155 @@
 "use client";
-import { jsx as r, jsxs as l, Fragment as B } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as C } from "../../lib/utils.js";
-import { Label as F } from "./label.js";
-import { Badge as E } from "./badge.js";
-import { Button as y } from "./button.js";
-import { Command as G, CommandList as V, CommandEmpty as X, CommandGroup as $, CommandItem as q } from "./command.js";
-import { inputVariants as H } from "./input.js";
-import { Checkbox as I } from "./checkbox.js";
-import { Icon as J } from "./icon.js";
-import { CommandPortal as K } from "./command-portal.js";
-import Q from "../../node_modules/lucide-react/dist/esm/icons/x.js";
-import T from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-const U = n.createContext({ size: "default" });
-function ie({
+import { jsx as r, jsxs as l, Fragment as F } from "react/jsx-runtime";
+import * as t from "react";
+import { useEffect as T } from "react";
+import { cn as p } from "../../lib/utils.js";
+import { Label as G } from "./label.js";
+import { Badge as V } from "./badge.js";
+import { Button as N } from "./button.js";
+import { Popover as X, PopoverTrigger as $, PopoverContent as q } from "./popover.js";
+import { Command as H, CommandList as I, CommandEmpty as J, CommandGroup as K, CommandItem as Q } from "./command.js";
+import { inputVariants as U } from "./input.js";
+import { Checkbox as Y } from "./checkbox.js";
+import { Icon as y } from "./icon.js";
+import Z from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const _ = t.createContext({ size: "default" });
+function me({
   options: s,
-  value: a,
+  value: n,
   onChange: o,
-  onClear: f,
+  onClear: h,
   placeholder: k = "Seleziona...",
   disabled: z = !1,
-  size: p = "default",
-  label: h,
+  size: g = "default",
+  label: b,
   labelClassName: M,
-  emptyMessage: j = "Nessun risultato trovato",
-  className: P,
-  filterPlaceholder: D = "Cerca...",
-  filterable: L = !1,
-  cancelLabel: R = "Cancella selezione",
+  emptyMessage: P = "Nessun risultato trovato",
+  className: R,
+  filterPlaceholder: j = "Cerca...",
+  filterable: D = !1,
+  cancelLabel: O = "Cancella selezione",
   cancelButtonLabel: S = "Cancella",
-  maxSelectedItems: t
+  maxSelectedItems: a
 }) {
-  const m = n.useId(), [u, b] = n.useState(!1), [d, g] = n.useState(""), v = n.useRef(null), w = n.useCallback(
+  const m = t.useId(), [d, L] = t.useState(!1), [c, v] = t.useState(""), [B, W] = t.useState(
+    void 0
+  ), A = t.useRef(null), f = t.useRef(null), w = t.useCallback(
     (e) => {
-      if (a.includes(e))
-        o(a.filter((i) => i !== e));
+      if (n.includes(e))
+        o(n.filter((i) => i !== e));
       else {
-        if (t && a.length >= t)
+        if (a && n.length >= a)
           return;
-        o([...a, e]);
+        o([...n, e]);
       }
     },
-    [a, o, t]
-  ), x = n.useCallback(() => {
-    o([]), g(""), f && f();
-  }, [o]), c = n.useMemo(() => s.filter((e) => a.includes(e.value)), [s, a]), O = n.useMemo(() => d ? s.filter(
-    (e) => e.label.toLowerCase().includes(d.toLowerCase())
-  ) : s, [s, d]), N = n.useMemo(() => t ? a.length >= t : !1, [a, t]);
-  return /* @__PURE__ */ r(U.Provider, { value: { size: p, id: m }, children: /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
-    h && /* @__PURE__ */ r(F, { htmlFor: m, className: M, children: h }),
-    /* @__PURE__ */ l(
+    [n, o, a]
+  ), x = t.useCallback(() => {
+    o([]), v(""), h && h();
+  }, [o]), u = t.useMemo(() => s.filter((e) => n.includes(e.value)), [s, n]), E = t.useMemo(() => c ? s.filter(
+    (e) => e.label.toLowerCase().includes(c.toLowerCase())
+  ) : s, [s, c]), C = t.useMemo(() => a ? n.length >= a : !1, [n, a]);
+  return T(() => {
+    if (d && f.current) {
+      const e = f.current.getBoundingClientRect();
+      W(e.width);
+    }
+  }, [d]), /* @__PURE__ */ r(_.Provider, { value: { size: g, id: m }, children: /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
+    b && /* @__PURE__ */ r(G, { htmlFor: m, className: M, children: b }),
+    /* @__PURE__ */ r(
       "div",
       {
-        ref: v,
+        ref: A,
         className: "relative w-full",
         "data-slot": "app-multiple-select-dropdown",
-        children: [
-          /* @__PURE__ */ l(
-            y,
+        children: /* @__PURE__ */ l(X, { open: d, onOpenChange: L, children: [
+          /* @__PURE__ */ r($, { asChild: !0, children: /* @__PURE__ */ l(
+            N,
             {
               id: m,
               type: "button",
               variant: "outline",
               role: "combobox",
-              "aria-expanded": u,
+              "aria-expanded": d,
               disabled: z,
-              className: C(
+              ref: f,
+              className: p(
                 "!bg-d-input relative w-full justify-between border font-normal",
                 "border-d-input ring-offset-background focus:ring-ring flex items-center rounded-md border whitespace-nowrap shadow-sm focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
                 "aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive",
-                P
+                R
               ),
-              onClick: () => b(!u),
               children: [
-                /* @__PURE__ */ r("div", { className: "flex w-full items-center gap-2 overflow-hidden", children: c.length > 0 ? /* @__PURE__ */ l(B, { children: [
+                /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between gap-2 overflow-hidden", children: u.length > 0 ? /* @__PURE__ */ l(F, { children: [
                   /* @__PURE__ */ l(
-                    E,
+                    V,
                     {
                       variant: "secondary",
-                      className: "flex items-center gap-1",
+                      className: "!bg-d-accent flex items-center gap-1",
                       children: [
-                        /* @__PURE__ */ r("span", { children: c.length }),
-                        c.length === 1 ? " elemento selezionato" : " elementi selezionati"
+                        /* @__PURE__ */ r("span", { children: u.length }),
+                        u.length === 1 ? " elemento selezionato" : " elementi selezionati"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ l(
+                  /* @__PURE__ */ r(
                     "div",
                     {
-                      className: "hover:bg-d-secondary flex h-5 w-5 items-center justify-center gap-1 rounded-full p-0",
+                      className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
                       onClick: (e) => {
                         e.stopPropagation(), e.preventDefault(), x();
                       },
-                      children: [
-                        /* @__PURE__ */ r(Q, { className: "h-3 w-3" }),
-                        /* @__PURE__ */ r("span", { className: "sr-only", children: R })
-                      ]
+                      onMouseDown: (e) => e.preventDefault(),
+                      "aria-label": O,
+                      children: /* @__PURE__ */ r(
+                        y,
+                        {
+                          name: "X",
+                          size: "xs",
+                          className: "!text-d-foreground opacity-50"
+                        }
+                      )
                     }
                   )
                 ] }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground", children: k }) }),
-                /* @__PURE__ */ r(T, { className: "ml-1 h-4 w-4 shrink-0 opacity-50" })
+                /* @__PURE__ */ r(Z, { className: "ml-1 h-4 w-4 shrink-0 opacity-50" })
               ]
             }
-          ),
+          ) }),
           /* @__PURE__ */ r(
-            K,
+            q,
             {
-              open: u,
-              triggerRef: v,
-              onClose: () => b(!1),
-              children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ l(G, { className: "bg-d-popover border-d-border w-full rounded-md border shadow-md", children: [
-                L && /* @__PURE__ */ l("div", { className: "border-d-border flex items-center justify-between border-b px-3", children: [
+              className: p("p-0"),
+              style: { width: B },
+              align: "start",
+              side: "bottom",
+              sideOffset: 4,
+              onWheel: (e) => e.stopPropagation(),
+              avoidCollisions: !1,
+              children: /* @__PURE__ */ l(H, { className: "bg-d-popover w-full rounded-md border border-none shadow-lg", children: [
+                D && /* @__PURE__ */ l("div", { className: "border-d-border flex items-center justify-between border-b px-3", children: [
                   /* @__PURE__ */ l("div", { className: "flex items-center", children: [
-                    /* @__PURE__ */ r(J, { name: "Search", className: "text-d-accent", size: "sm" }),
+                    /* @__PURE__ */ r(
+                      y,
+                      {
+                        name: "Search",
+                        className: "text-d-accent-foreground",
+                        size: "sm"
+                      }
+                    ),
                     /* @__PURE__ */ r(
                       "input",
                       {
                         id: "app-multiple-select-dropdown-filter",
-                        placeholder: D,
-                        value: d,
-                        onChange: (e) => g(e.target.value),
-                        className: `focus-visible:ring-none border-none focus-visible:border-none disabled:opacity-50 ${H({ size: p })} !shadow-none`
+                        placeholder: j,
+                        value: c,
+                        onChange: (e) => v(e.target.value),
+                        className: `focus-visible:ring-none border-none focus-visible:border-none disabled:opacity-50 ${U({ size: g })} !shadow-none`
                       }
                     )
                   ] }),
-                  c.length > 0 && /* @__PURE__ */ r(
-                    y,
+                  u.length > 0 && /* @__PURE__ */ r(
+                    N,
                     {
                       variant: "ghost",
                       size: "sm",
@@ -135,24 +159,23 @@ function ie({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ l(V, { className: "max-h-60 w-full overflow-auto", children: [
-                  /* @__PURE__ */ r(X, { children: j }),
-                  /* @__PURE__ */ r($, { children: O.map((e) => {
-                    const i = a.includes(e.value);
+                /* @__PURE__ */ l(I, { className: "max-h-60 w-full", children: [
+                  /* @__PURE__ */ r(J, { children: P }),
+                  /* @__PURE__ */ r(K, { children: E.map((e) => {
+                    const i = n.includes(e.value);
                     return /* @__PURE__ */ l(
-                      q,
+                      Q,
                       {
                         value: e.value,
-                        disabled: e.disabled || !i && N,
+                        disabled: e.disabled || !i && C,
                         onSelect: () => w(e.value),
-                        className: C(
+                        className: p(
                           "aria-selected:!bg-d-accent aria-selected:text-d-accent-foreground flex cursor-pointer items-center gap-2 px-2 py-1.5",
-                          (e.disabled || !i && N) && "cursor-not-allowed opacity-50"
+                          (e.disabled || !i && C) && "cursor-not-allowed opacity-50"
                         ),
-                        onPointerDown: (A) => A.stopPropagation(),
                         children: [
                           /* @__PURE__ */ r(
-                            I,
+                            Y,
                             {
                               checked: i,
                               className: "z-10 mr-2 flex-shrink-0",
@@ -168,14 +191,14 @@ function ie({
                     );
                   }) })
                 ] })
-              ] }) })
+              ] })
             }
           )
-        ]
+        ] })
       }
     )
   ] }) });
 }
 export {
-  ie as AppMultipleSelectDropdown
+  me as AppMultipleSelectDropdown
 };