laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
194 lines (193 loc) • 7.96 kB
JavaScript
"use client";
import { jsx as r, jsxs as l, Fragment as A } from "react/jsx-runtime";
import { Badge as B } from "./badge.js";
import { Command as E, CommandList as F, CommandEmpty as V, CommandGroup as G, CommandItem as X } from "./command.js";
import { Label as $ } from "./label.js";
import { cn as u } from "../../lib/utils.js";
import * as t from "react";
import { useEffect as q } from "react";
import { selectTriggerVariants as H } from "./async-select.js";
import { Checkbox as I } from "./checkbox.js";
import { Icon as x } from "./icon.js";
import { inputVariants as J } from "./input.js";
import { Popover as K, PopoverTrigger as Q, PopoverContent as U } from "./popover.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: C = "Seleziona...",
disabled: y = !1,
size: m = "default",
label: b,
labelClassName: k,
emptyMessage: M = "Nessun risultato trovato",
className: z,
searchPlaceholder: P = "Cerca...",
searchable: R = !0,
cancelLabel: j = "Cancella selezione",
maxSelectedItems: i
}) {
const f = t.useId(), [s, D] = t.useState(!1), [c, v] = t.useState(""), [O, S] = t.useState(
void 0
), L = t.useRef(null), p = t.useRef(null), w = t.useCallback(
(e) => {
if (n.includes(e))
o(n.filter((d) => d !== e));
else {
if (i && n.length >= i)
return;
o([...n, e]);
}
},
[n, o, i]
), T = t.useCallback(() => {
o([]), v(""), g && g();
}, [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]), N = t.useMemo(() => i ? n.length >= i : !1, [n, i]);
return q(() => {
if (s && p.current) {
const e = p.current.getBoundingClientRect();
S(e.width);
}
}, [s]), /* @__PURE__ */ r(Z.Provider, { value: { size: m, id: f }, children: /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
b && /* @__PURE__ */ r($, { htmlFor: f, className: u(k, "w-fit"), children: b }),
/* @__PURE__ */ r(
"div",
{
ref: L,
className: "relative w-full",
"data-slot": "app-multiple-select-dropdown",
children: /* @__PURE__ */ l(K, { open: s, onOpenChange: D, children: [
/* @__PURE__ */ r(Q, { asChild: !0, children: /* @__PURE__ */ l(
"button",
{
id: f,
type: "button",
role: "combobox",
"aria-expanded": s,
disabled: y,
ref: p,
className: u(
H({ 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 aria-invalid:border-d-destructive",
"focus-visible:ring-d-ring focus-visible:ring-1",
s && "ring-d-ring ring-1",
z
),
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(
B,
{
variant: "secondary",
className: "!bg-d-accent flex items-center gap-1",
children: [
/* @__PURE__ */ r("span", { children: h.length }),
h.length === 1 ? " elemento selezionato" : " elementi selezionati"
]
}
),
/* @__PURE__ */ r(
"div",
{
className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
onClick: (e) => {
e.stopPropagation(), e.preventDefault(), T();
},
onMouseDown: (e) => e.preventDefault(),
"aria-label": j,
children: /* @__PURE__ */ r(
x,
{
name: "X",
size: "xs",
className: "!text-d-foreground 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(
U,
{
className: u("p-0"),
style: { width: O },
align: "start",
side: "bottom",
sideOffset: 4,
onWheel: (e) => e.stopPropagation(),
avoidCollisions: !1,
children: /* @__PURE__ */ l(E, { 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(
x,
{
name: "Search",
className: "text-d-accent-foreground opacity-50",
size: "sm"
}
),
/* @__PURE__ */ r(
"input",
{
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 ${J({ size: m })} !shadow-none`
}
)
] }) }),
/* @__PURE__ */ l(F, { className: "max-h-60 w-full", children: [
/* @__PURE__ */ r(V, { children: M }),
/* @__PURE__ */ r(G, { children: W.map((e) => {
const d = n.includes(e.value);
return /* @__PURE__ */ l(
X,
{
value: e.value,
disabled: e.disabled || !d && N,
onSelect: () => w(e.value),
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 || !d && N) && "cursor-not-allowed opacity-50"
),
children: [
/* @__PURE__ */ r(
I,
{
checked: d,
className: "z-10 mr-2 flex-shrink-0",
onCheckedChange: () => {
w(e.value);
}
}
),
/* @__PURE__ */ r("span", { className: "flex-1 truncate", children: e.label })
]
},
e.value
);
}) })
] })
] })
}
)
] })
}
)
] }) });
}
export {
ue as AppMultipleSelectDropdown
};