laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
181 lines (180 loc) • 7.67 kB
JavaScript
"use client";
import { jsx as r, jsxs as l, Fragment as A } from "react/jsx-runtime";
import * as n from "react";
import { cn as N } from "../../lib/utils.js";
import { Label as B } from "./label.js";
import { Badge as F } from "./badge.js";
import { Button as C } from "./button.js";
import { Command as E, CommandList as G, CommandEmpty as V, CommandGroup as X, CommandItem as $ } from "./command.js";
import { inputVariants as q } from "./input.js";
import { Checkbox as H } from "./checkbox.js";
import { Icon as I } from "./icon.js";
import { CommandPortal as J } from "./command-portal.js";
import K from "../../node_modules/lucide-react/dist/esm/icons/x.js";
import Q from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
const T = n.createContext({ size: "default" });
function oe({
options: s,
value: a,
onChange: o,
placeholder: y = "Seleziona...",
disabled: k = !1,
size: f = "default",
label: p,
labelClassName: z,
emptyMessage: M = "Nessun risultato trovato",
className: j,
filterPlaceholder: P = "Cerca...",
filterable: D = !1,
cancelLabel: L = "Cancella selezione",
cancelButtonLabel: R = "Cancella",
maxSelectedItems: t
}) {
const m = n.useId(), [u, h] = n.useState(!1), [c, b] = n.useState(""), g = n.useRef(null), v = n.useCallback(
(e) => {
if (a.includes(e))
o(a.filter((i) => i !== e));
else {
if (t && a.length >= t)
return;
o([...a, e]);
}
},
[a, o, t]
), w = n.useCallback(() => {
o([]), b("");
}, [o]), d = n.useMemo(() => s.filter((e) => a.includes(e.value)), [s, a]), S = n.useMemo(() => c ? s.filter(
(e) => e.label.toLowerCase().includes(c.toLowerCase())
) : s, [s, c]), x = n.useMemo(() => t ? a.length >= t : !1, [a, t]);
return /* @__PURE__ */ r(T.Provider, { value: { size: f, id: m }, children: /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
p && /* @__PURE__ */ r(B, { htmlFor: m, className: z, children: p }),
/* @__PURE__ */ l(
"div",
{
ref: g,
className: "relative w-full",
"data-slot": "app-multiple-select-dropdown",
children: [
/* @__PURE__ */ l(
C,
{
id: m,
type: "button",
variant: "outline",
role: "combobox",
"aria-expanded": u,
disabled: k,
className: N(
"relative w-full justify-between border bg-transparent font-normal",
"border-d-input ring-offset-background focus:ring-ring flex items-center rounded-md border !bg-transparent 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",
j
),
onClick: () => h(!u),
children: [
/* @__PURE__ */ r("div", { className: "flex w-full items-center gap-2 overflow-hidden", children: d.length > 0 ? /* @__PURE__ */ l(A, { children: [
/* @__PURE__ */ l(
F,
{
variant: "secondary",
className: "flex items-center gap-1",
children: [
/* @__PURE__ */ r("span", { children: d.length }),
d.length === 1 ? " elemento selezionato" : " elementi selezionati"
]
}
),
/* @__PURE__ */ l(
"div",
{
className: "hover:bg-d-secondary flex h-5 w-5 items-center justify-center gap-1 rounded-full p-0",
onClick: (e) => {
e.stopPropagation(), e.preventDefault(), w();
},
children: [
/* @__PURE__ */ r(K, { className: "h-3 w-3" }),
/* @__PURE__ */ r("span", { className: "sr-only", children: L })
]
}
)
] }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground", children: y }) }),
/* @__PURE__ */ r(Q, { className: "ml-1 h-4 w-4 shrink-0 opacity-50" })
]
}
),
/* @__PURE__ */ r(
J,
{
open: u,
triggerRef: g,
onClose: () => h(!1),
children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ l(E, { className: "bg-d-popover w-full rounded-md border shadow-md", children: [
D && /* @__PURE__ */ l("div", { className: "flex items-center justify-between border-b px-3", children: [
/* @__PURE__ */ l("div", { className: "flex items-center", children: [
/* @__PURE__ */ r(I, { name: "Search", className: "text-d-accent", size: "sm" }),
/* @__PURE__ */ r(
"input",
{
id: "app-multiple-select-dropdown-filter",
placeholder: P,
value: c,
onChange: (e) => b(e.target.value),
className: `focus-visible:ring-none border-none focus-visible:border-none disabled:opacity-50 ${q({ size: f })} !shadow-none`
}
)
] }),
d.length > 0 && /* @__PURE__ */ r(
C,
{
variant: "ghost",
size: "sm",
className: "h-6 px-2 text-xs",
onClick: w,
children: R
}
)
] }),
/* @__PURE__ */ l(G, { className: "max-h-60 w-full overflow-auto", children: [
/* @__PURE__ */ r(V, { children: M }),
/* @__PURE__ */ r(X, { children: S.map((e) => {
const i = a.includes(e.value);
return /* @__PURE__ */ l(
$,
{
value: e.value,
disabled: e.disabled || !i && x,
onSelect: () => v(e.value),
className: N(
"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 && x) && "cursor-not-allowed opacity-50"
),
onPointerDown: (O) => O.stopPropagation(),
children: [
/* @__PURE__ */ r(
H,
{
checked: i,
className: "mr-2 flex-shrink-0",
onCheckedChange: () => {
console.log("checkbox change for:", e.value), v(e.value);
}
}
),
/* @__PURE__ */ r("span", { className: "flex-1 truncate", children: e.label })
]
},
e.value
);
}) })
] })
] }) })
}
)
]
}
)
] }) });
}
export {
oe as AppMultipleSelectDropdown
};