laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
235 lines (234 loc) • 9.71 kB
JavaScript
"use client";
import { jsxs as s, jsx as l, Fragment as te } from "react/jsx-runtime";
import { designTokens as i } from "../design-tokens.js";
import { Badge as se } from "./badge.js";
import { Command as ie, CommandInput as oe, CommandList as de, CommandEmpty as ce, CommandGroup as R, CommandItem as A } from "./command.js";
import { Label as ue } from "./label.js";
import { cn as y } from "../../lib/utils.js";
import { useState as h, useRef as me, useMemo as P, useCallback as fe, useEffect as pe } from "react";
import { Checkbox as he } from "./checkbox.js";
import { Icon as S } from "./icon.js";
import { Popover as ge, PopoverTrigger as ve, PopoverContent as be } from "./popover.js";
import xe from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
const Ce = {
sm: i.sizes.sm,
default: i.sizes.default,
lg: i.sizes.lg
};
function je(z) {
const {
multiple: r = !1,
options: c,
value: B,
defaultValue: T,
onValueChange: W,
onClear: g,
placeholder: X = "Seleziona...",
emptyPlaceholder: E = "Nessun risultato",
searchPlaceholder: F = "Cerca...",
addItemPlaceholder: L = "Aggiungi",
itemCountMessage: $ = (e) => `${e} elementi selezionati`,
maxSelectedMessage: G = (e) => `Puoi selezionare fino a ${e} elementi`,
label: I,
className: q = "",
labelClassName: H = "",
wrpClassName: J = "",
searchable: D = !1,
creatable: K = !1,
groupBy: v = "group",
maxSelected: d,
showChipsInsteadOfCount: Q = !1,
disabled: b,
size: U = "default",
isSingleSelectClearable: Y = !1,
id: Z,
"data-testid": _
} = z, [x, C] = h(!1), [u, w] = h(""), N = me(null), [O, ee] = h(0), V = z.hasOwnProperty("value"), [le, ae] = h(T), o = V ? B : le, m = (e) => {
V || ae(e), W?.(e);
}, n = P(() => r ? Array.isArray(o) ? o : [] : o != null ? [o] : [], [o, r]), f = P(() => {
const e = c.filter((t) => n.includes(t.value));
if (r) {
const t = n.filter((a) => !e.find((p) => p.value === a)).map((a) => ({ value: a, label: a }));
return [...e, ...t];
} else if (n.length && !e.length)
return [{ value: n[0], label: n[0] }];
return e;
}, [c, n, r]), k = (e) => {
if (!e.disabled)
if (r) {
const t = n.includes(e.value);
if (!t && d !== void 0 && n.length >= d)
return;
m(
t ? n.filter((a) => a !== e.value) : [...n, e.value]
);
} else
m(e.value), C(!1);
}, j = fe(() => {
m(r ? [] : void 0), w(""), g && g();
}, [m, g, r]), re = P(() => v ? c.reduce(
(e, t) => {
const a = t[v] || "";
return e[a] = e[a] || [], e[a].push(t), e;
},
{}
) : { "": c }, [c, v]);
return pe(() => {
N.current && ee(N.current.getBoundingClientRect().width);
}, [x, n, c]), /* @__PURE__ */ s("div", { className: y("flex flex-col gap-1.5", J), children: [
I && /* @__PURE__ */ l(ue, { className: H, children: I }),
/* @__PURE__ */ s(
ge,
{
open: b ? !1 : x,
onOpenChange: (e) => !b && C(e),
modal: !0,
children: [
/* @__PURE__ */ l(ve, { asChild: !0, children: /* @__PURE__ */ s(
"div",
{
ref: N,
id: Z,
"data-testid": _,
className: y(
i.input.base,
i.radius.default,
i.focusRingWithin,
"flex w-full min-w-[100px] cursor-pointer items-center justify-between gap-2",
x && i.activeRing,
Ce[U],
b && "cursor-not-allowed opacity-50",
q
),
children: [
f.length === 0 ? /* @__PURE__ */ l("span", { className: "text-d-muted-foreground", children: X }) : r ? /* @__PURE__ */ s("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: Q ? /* @__PURE__ */ l(te, { children: f.map((e) => /* @__PURE__ */ s(
se,
{
variant: "secondary",
className: "hover:bg-d-secondary/100 bg-d-secondary/50 border-d-border flex cursor-pointer items-center gap-1 border",
onClick: (t) => {
t.stopPropagation(), k(e);
},
children: [
e.label,
!e.fixed && /* @__PURE__ */ l(S, { name: "X", size: "xs" })
]
},
e.value
)) }) : /* @__PURE__ */ l("div", { children: $(f.length) }) }),
r && /* @__PURE__ */ l(
"div",
{
className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
onClick: (e) => {
e.stopPropagation(), e.preventDefault(), j();
},
onMouseDown: (e) => e.preventDefault(),
"aria-label": "Clear selection",
children: /* @__PURE__ */ l(
S,
{
name: "X",
size: "xs",
className: "!text-d-foreground opacity-50"
}
)
}
)
] }) : /* @__PURE__ */ s("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: typeof f[0]?.label == "string" ? /* @__PURE__ */ l("span", { children: f[0]?.label }) : f[0]?.label }),
Y && o !== void 0 && o !== null && /* @__PURE__ */ l(
"div",
{
className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
onClick: (e) => {
e.stopPropagation(), e.preventDefault(), j();
},
onMouseDown: (e) => e.preventDefault(),
"aria-label": "Clear selection",
children: /* @__PURE__ */ l(
S,
{
name: "X",
size: "xs",
className: "!text-d-foreground opacity-50"
}
)
}
)
] }),
/* @__PURE__ */ l(xe, { className: "h-4 w-4 opacity-50" })
]
}
) }),
/* @__PURE__ */ l(
be,
{
className: "p-0",
style: { width: O > 0 ? O : "auto" },
align: "start",
sideOffset: 4,
avoidCollisions: !0,
collisionPadding: 8,
children: /* @__PURE__ */ s(ie, { shouldFilter: !!D, className: "w-full", children: [
D && /* @__PURE__ */ l(
oe,
{
placeholder: F,
className: "placeholder:text-d-muted-foreground",
value: u,
onValueChange: w
}
),
/* @__PURE__ */ s(de, { className: "max-h-60 overflow-auto overscroll-contain", children: [
/* @__PURE__ */ l(ce, { children: E }),
K && u && /* @__PURE__ */ l(R, { children: /* @__PURE__ */ l(
A,
{
className: "cursor-pointer",
onSelect: () => {
u && (m(r ? [...n, u] : u), w(""), !r && C(!1));
},
children: /* @__PURE__ */ s("div", { className: "text-d-foreground text-xs", children: [
L,
" “",
u,
"”"
] })
}
) }),
Object.entries(re).map(([e, t]) => /* @__PURE__ */ l(R, { heading: e || void 0, children: t.map((a) => {
const p = n.includes(a.value), ne = r && d !== void 0 && !p && n.length >= d, M = a.disabled || ne;
return /* @__PURE__ */ s(
A,
{
value: typeof a.label == "string" ? a.label : String(a.value),
onSelect: () => !M && k(a),
className: y(
"cursor-pointer",
i.dropdownItem.hover,
M && "cursor-not-allowed opacity-50",
!r && p && i.dropdownItem.selected
),
children: [
r && /* @__PURE__ */ l(he, { checked: p, className: "mr-1" }),
typeof a.label == "string" ? /* @__PURE__ */ l("span", { children: a.label }) : a.label
]
},
a.value
);
}) }, e))
] }),
r && d !== void 0 && n.length >= d && /* @__PURE__ */ l("div", { className: "border-d-border text-d-muted-foreground border-t px-2 py-1 text-xs", children: G(d) })
] })
}
)
]
}
)
] });
}
export {
je as AppSelect
};