laif-ds 0.2.3 → 0.2.4

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

@@ -1,43 +1,41 @@
 "use client";
 import { jsx as r, jsxs as l, Fragment as A } from "react/jsx-runtime";
 import * as t from "react";
-import { useEffect as E } from "react";
-import { cn as m } from "../../lib/utils.js";
-import { Label as F } from "./label.js";
-import { Badge as V } from "./badge.js";
-import { Button as G } 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 { useEffect as B } from "react";
+import { cn as u } from "../../lib/utils.js";
+import { Label as E } from "./label.js";
+import { Badge as F } from "./badge.js";
+import { Popover as V, PopoverTrigger as G, PopoverContent as X } from "./popover.js";
+import { Command as $, CommandList as q, CommandEmpty as H, CommandGroup as I, CommandItem as J } from "./command.js";
+import { inputVariants as K } from "./input.js";
+import { Checkbox as Q } from "./checkbox.js";
 import { Icon as N } from "./icon.js";
-import { selectTriggerVariants as Z } from "./async-select.js";
-import _ from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-const ee = t.createContext({ size: "default" });
-function pe({
+import { selectTriggerVariants as U } from "./async-select.js";
+import Y from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const Z = t.createContext({ size: "default" });
+function ue({
   options: a,
   value: n,
   onChange: o,
   onClear: g,
-  placeholder: y = "Seleziona...",
-  disabled: k = !1,
-  size: f = "default",
+  placeholder: C = "Seleziona...",
+  disabled: y = !1,
+  size: m = "default",
   label: b,
-  labelClassName: z,
+  labelClassName: k,
   emptyMessage: M = "Nessun risultato trovato",
-  className: P,
-  searchPlaceholder: R = "Cerca...",
-  searchable: j = !0,
-  cancelLabel: D = "Cancella selezione",
-  cancelButtonLabel: O = "Cancella",
+  className: z,
+  searchPlaceholder: P = "Cerca...",
+  searchable: R = !0,
+  cancelLabel: j = "Cancella selezione",
   maxSelectedItems: i
 }) {
-  const p = t.useId(), [s, S] = t.useState(!1), [d, v] = t.useState(""), [L, B] = t.useState(
+  const f = t.useId(), [s, D] = t.useState(!1), [c, v] = t.useState(""), [O, S] = t.useState(
     void 0
-  ), T = t.useRef(null), h = t.useRef(null), w = t.useCallback(
+  ), L = t.useRef(null), p = t.useRef(null), w = t.useCallback(
     (e) => {
       if (n.includes(e))
-        o(n.filter((c) => c !== e));
+        o(n.filter((d) => d !== e));
       else {
         if (i && n.length >= i)
           return;
@@ -45,53 +43,53 @@ function pe({
       }
     },
     [n, o, i]
-  ), x = t.useCallback(() => {
+  ), T = t.useCallback(() => {
     o([]), v(""), g && g();
-  }, [o]), u = t.useMemo(() => a.filter((e) => n.includes(e.value)), [a, n]), W = t.useMemo(() => d ? a.filter(
-    (e) => e.label.toLowerCase().includes(d.toLowerCase())
-  ) : a, [a, d]), C = t.useMemo(() => i ? n.length >= i : !1, [n, i]);
-  return E(() => {
-    if (s && h.current) {
-      const e = h.current.getBoundingClientRect();
-      B(e.width);
+  }, [o]), h = t.useMemo(() => a.filter((e) => n.includes(e.value)), [a, n]), W = t.useMemo(() => c ? a.filter(
+    (e) => e.label.toLowerCase().includes(c.toLowerCase())
+  ) : a, [a, c]), x = t.useMemo(() => i ? n.length >= i : !1, [n, i]);
+  return B(() => {
+    if (s && p.current) {
+      const e = p.current.getBoundingClientRect();
+      S(e.width);
     }
-  }, [s]), /* @__PURE__ */ r(ee.Provider, { value: { size: f, id: p }, children: /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
-    b && /* @__PURE__ */ r(F, { htmlFor: p, className: m(z, "w-fit"), children: b }),
+  }, [s]), /* @__PURE__ */ r(Z.Provider, { value: { size: m, id: f }, children: /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
+    b && /* @__PURE__ */ r(E, { htmlFor: f, className: u(k, "w-fit"), children: b }),
     /* @__PURE__ */ r(
       "div",
       {
-        ref: T,
+        ref: L,
         className: "relative w-full",
         "data-slot": "app-multiple-select-dropdown",
-        children: /* @__PURE__ */ l(X, { open: s, onOpenChange: S, children: [
-          /* @__PURE__ */ r($, { asChild: !0, children: /* @__PURE__ */ l(
+        children: /* @__PURE__ */ l(V, { open: s, onOpenChange: D, children: [
+          /* @__PURE__ */ r(G, { asChild: !0, children: /* @__PURE__ */ l(
             "button",
             {
-              id: p,
+              id: f,
               type: "button",
               role: "combobox",
               "aria-expanded": s,
-              disabled: k,
-              ref: h,
-              className: m(
-                Z({ size: f }),
+              disabled: y,
+              ref: p,
+              className: u(
+                U({ size: m }),
                 "!bg-d-input hover:bg-d-input/50 relative w-full justify-between font-normal",
                 "ring-offset-background border-d-border/50 flex items-center rounded-md border whitespace-nowrap 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",
                 "focus-visible:ring-d-ring focus-visible:ring-1",
                 s && "ring-d-ring ring-1",
-                P
+                z
               ),
               children: [
-                /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between gap-2 overflow-hidden", children: u.length > 0 ? /* @__PURE__ */ l(A, { children: [
+                /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between gap-2 overflow-hidden", children: h.length > 0 ? /* @__PURE__ */ l(A, { children: [
                   /* @__PURE__ */ l(
-                    V,
+                    F,
                     {
                       variant: "secondary",
                       className: "!bg-d-accent flex items-center gap-1",
                       children: [
-                        /* @__PURE__ */ r("span", { children: u.length }),
-                        u.length === 1 ? " elemento selezionato" : " elementi selezionati"
+                        /* @__PURE__ */ r("span", { children: h.length }),
+                        h.length === 1 ? " elemento selezionato" : " elementi selezionati"
                       ]
                     }
                   ),
@@ -100,10 +98,10 @@ function pe({
                     {
                       className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
                       onClick: (e) => {
-                        e.stopPropagation(), e.preventDefault(), x();
+                        e.stopPropagation(), e.preventDefault(), T();
                       },
                       onMouseDown: (e) => e.preventDefault(),
-                      "aria-label": D,
+                      "aria-label": j,
                       children: /* @__PURE__ */ r(
                         N,
                         {
@@ -114,73 +112,61 @@ function pe({
                       )
                     }
                   )
-                ] }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground", children: y }) }),
-                /* @__PURE__ */ r(_, { className: "ml-1 h-4 w-4 shrink-0 opacity-50" })
+                ] }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground", children: C }) }),
+                /* @__PURE__ */ r(Y, { className: "ml-1 h-4 w-4 shrink-0 opacity-50" })
               ]
             }
           ) }),
           /* @__PURE__ */ r(
-            q,
+            X,
             {
-              className: m("p-0"),
-              style: { width: L },
+              className: u("p-0"),
+              style: { width: O },
               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", children: [
-                j && /* @__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(
-                      N,
-                      {
-                        name: "Search",
-                        className: "text-d-accent-foreground opacity-50",
-                        size: "sm"
-                      }
-                    ),
-                    /* @__PURE__ */ r(
-                      "input",
-                      {
-                        id: "app-multiple-select-dropdown-filter",
-                        placeholder: R,
-                        value: d,
-                        onChange: (e) => v(e.target.value),
-                        className: `focus-visible:ring-none border-none focus-visible:border-none disabled:opacity-50 ${U({ size: f })} !shadow-none`
-                      }
-                    )
-                  ] }),
-                  u.length > 0 && /* @__PURE__ */ r(
-                    G,
+              children: /* @__PURE__ */ l($, { className: "bg-d-popover w-full rounded-md border border-none", children: [
+                R && /* @__PURE__ */ r("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(
+                    N,
+                    {
+                      name: "Search",
+                      className: "text-d-accent-foreground opacity-50",
+                      size: "sm"
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "input",
                     {
-                      variant: "ghost",
-                      size: "sm",
-                      className: "h-6 px-2 text-xs",
-                      onClick: x,
-                      children: O
+                      id: "app-multiple-select-dropdown-filter",
+                      placeholder: P,
+                      value: c,
+                      onChange: (e) => v(e.target.value),
+                      className: `focus-visible:ring-none border-none focus-visible:border-none disabled:opacity-50 ${K({ size: m })} !shadow-none`
                     }
                   )
-                ] }),
-                /* @__PURE__ */ l(I, { className: "max-h-60 w-full", children: [
-                  /* @__PURE__ */ r(J, { children: M }),
-                  /* @__PURE__ */ r(K, { children: W.map((e) => {
-                    const c = n.includes(e.value);
+                ] }) }),
+                /* @__PURE__ */ l(q, { className: "max-h-60 w-full", children: [
+                  /* @__PURE__ */ r(H, { children: M }),
+                  /* @__PURE__ */ r(I, { children: W.map((e) => {
+                    const d = n.includes(e.value);
                     return /* @__PURE__ */ l(
-                      Q,
+                      J,
                       {
                         value: e.value,
-                        disabled: e.disabled || !c && C,
+                        disabled: e.disabled || !d && x,
                         onSelect: () => w(e.value),
-                        className: m(
+                        className: u(
                           "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 || !c && C) && "cursor-not-allowed opacity-50"
+                          (e.disabled || !d && x) && "cursor-not-allowed opacity-50"
                         ),
                         children: [
                           /* @__PURE__ */ r(
-                            Y,
+                            Q,
                             {
-                              checked: c,
+                              checked: d,
                               className: "z-10 mr-2 flex-shrink-0",
                               onCheckedChange: () => {
                                 console.log("checkbox change for:", e.value), w(e.value);
@@ -203,5 +189,5 @@ function pe({
   ] }) });
 }
 export {
-  pe as AppMultipleSelectDropdown
+  ue as AppMultipleSelectDropdown
 };

package/dist/index.d.ts

@@ -143,7 +143,7 @@ declare interface AppEditorProps {
 
 declare type AppEditorToolbar = "block-format" | "font-format" | "history";
 
-export declare function AppMultipleSelectDropdown({ options, value, onChange, onClear, placeholder, disabled, size, label, labelClassName, emptyMessage, className, searchPlaceholder, searchable, cancelLabel, cancelButtonLabel, maxSelectedItems, }: MultipleSelectDropdownProps): JSX.Element;
+export declare function AppMultipleSelectDropdown({ options, value, onChange, onClear, placeholder, disabled, size, label, labelClassName, emptyMessage, className, searchPlaceholder, searchable, cancelLabel, maxSelectedItems, }: MultipleSelectDropdownProps): JSX.Element;
 
 export declare interface AppMultipleSelectOption {
     value: string;
@@ -1209,7 +1209,6 @@ declare interface MultipleSelectDropdownProps {
     searchable?: boolean;
     maxSelectedItems?: number;
     cancelLabel?: string;
-    cancelButtonLabel?: string;
 }
 
 export declare const MultipleSelector: React_2.ForwardRefExoticComponent<MultipleSelectorProps & React_2.RefAttributes<MultipleSelectorRef>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "laif-ds",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",