laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
344 lines (343 loc) • 11.6 kB
JavaScript
"use client";
import { jsxs as d, jsx as e } from "react/jsx-runtime";
import * as A from "react";
import { useState as N, useEffect as j, useCallback as $ } from "react";
import { useDebounce as ae } from "../../hooks/use-debounce.js";
import { cva as ce } from "../../node_modules/class-variance-authority/dist/index.js";
import { cn as L } from "../../lib/utils.js";
import { Label as le } from "./label.js";
import { Popover as ie, PopoverTrigger as de, PopoverContent as fe } from "./popover.js";
import { Command as me, CommandInput as ue, CommandList as he, CommandEmpty as pe, CommandGroup as q, CommandItem as H } from "./command.js";
import { Icon as X } from "./icon.js";
import { Checkbox as ge } from "./checkbox.js";
import xe from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
import we from "../../node_modules/lucide-react/dist/esm/icons/check.js";
const ye = ce(
"flex items-center justify-between whitespace-nowrap rounded-md border border-d-input bg-d-input px-3 py-2 data-[placeholder]:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 ",
{
variants: {
size: {
default: "h-9 text-sm",
sm: "h-8 text-xs",
lg: "h-10 text-lg"
}
},
defaultVariants: {
size: "default"
}
}
);
function De({
fetcher: a,
preload: c,
filterFn: f,
renderOption: k,
getOptionValue: m,
getDisplayValue: s,
notFound: u,
loadingSkeleton: M,
label: h,
labelClassName: p,
placeholder: _ = "Select...",
value: r,
onChange: i,
disabled: T = !1,
width: x = "200px",
triggerClassName: z,
noResultsMessage: D,
clearable: b = !0,
multiple: l = !1,
size: J
}) {
const [g, O] = N(!1), C = x === "auto", P = A.useRef(null), E = A.useRef(null), Q = A.useRef(null), Y = A.useRef(null), [Z, v] = N({ loading: !1, error: null }), [K, V] = N(""), S = ae(K, c ? 0 : 300), [I, F] = N(/* @__PURE__ */ new Map()), [w, R] = N([]), [B, ee] = N(
void 0
), [G, ne] = N([]), W = A.useMemo(() => l || !r || w.length === 0 ? null : w.find((n) => m(n) === r) || null, [r, w, m, l]);
j(() => {
if (l && Array.isArray(r) && w.length > 0) {
const n = w.filter(
(t) => r.includes(m(t))
);
ne(n);
}
}, [r, w, m, l]), j(() => ((async () => {
try {
v({ loading: !0, error: null });
const t = c ? "__preload__" : "", o = await a("");
F((y) => new Map(y).set(t, o)), R(o);
} catch (t) {
v({
loading: !1,
error: t instanceof Error ? t.message : "Failed to fetch options"
});
} finally {
v((t) => ({ ...t, loading: !1 }));
}
})(), () => {
R([]), F(/* @__PURE__ */ new Map());
}), [a, c]), j(() => {
if (g)
if (c) {
const n = I.get("__preload__") || [];
if (S) {
const t = n.filter(
(o) => f ? f(o, S) : String(s(o)).toLowerCase().includes(S.toLowerCase())
);
R(t);
} else
R(n);
} else {
const n = S || "";
if (I.has(n)) {
const t = I.get(n);
R(t);
} else
(async () => {
try {
v({ loading: !0, error: null });
const o = await a(S);
F((y) => new Map(y).set(n, o)), R(o);
} catch (o) {
v({
loading: !1,
error: o instanceof Error ? o.message : "Failed to fetch options"
});
} finally {
v((o) => ({ ...o, loading: !1 }));
}
})();
}
}, [
g,
S,
c,
f,
I,
s,
a
]), j(() => {
g && P.current && P.current.focus();
}, [g]), j(() => {
if (g && E.current && C) {
const n = E.current.getBoundingClientRect();
ee(n.width);
}
}, [g, C]);
const re = $(
(n) => {
i?.(b && n === r ? "" : n), O(!1);
},
[r, i, b]
), te = $(
(n) => {
if (!l) return;
const t = r, o = t.includes(n);
let y;
o ? y = t.filter((oe) => oe !== n) : y = [...t, n], i?.(y);
},
[r, i, l]
), se = $(
(n) => {
n.stopPropagation(), n.preventDefault(), i?.(l ? [] : ""), O(!1);
},
[i]
), U = A.useId();
return /* @__PURE__ */ d(
"div",
{
className: L("grid grid-cols-1 space-y-1.5", C && "w-full"),
children: [
h && /* @__PURE__ */ e(le, { htmlFor: U, className: L(p, "w-fit"), children: h }),
/* @__PURE__ */ e("div", { ref: Q, className: "relative", "data-slot": "async-select", children: /* @__PURE__ */ d(ie, { open: g, onOpenChange: O, children: [
/* @__PURE__ */ e(de, { asChild: !0, children: /* @__PURE__ */ e(
"button",
{
id: U,
ref: E,
type: "button",
disabled: T,
className: L(
ye({ size: J }),
"!border-d-border/50 border !shadow-none",
T && "cursor-not-allowed opacity-50",
z,
"font-normal",
C && "w-full",
"focus-visible:ring-d-ring focus-visible:ring-1",
g && "ring-d-ring ring-1"
),
style: C ? void 0 : { width: x },
children: /* @__PURE__ */ d("div", { className: "flex w-full flex-1 items-center justify-between overflow-hidden", children: [
l ? Array.isArray(r) && r.length > 0 ? /* @__PURE__ */ e("div", { className: "min-w-0 flex-1 truncate text-left", children: r.length === 1 ? G[0] && s(G[0]) : `${r.length} elementi selezionati` }) : /* @__PURE__ */ e("span", { className: "text-d-muted-foreground truncate text-left", children: _ }) : W ? /* @__PURE__ */ e("div", { className: "min-w-0 flex-1 truncate text-left", children: s(W) }) : /* @__PURE__ */ e("span", { className: "text-d-muted-foreground truncate text-left", children: _ }),
/* @__PURE__ */ d("div", { className: "flex flex-shrink-0 items-center justify-end gap-1", children: [
b && (l && Array.isArray(r) && r.length > 0 || !l && W) && /* @__PURE__ */ e(
"div",
{
className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
onClick: se,
onMouseDown: (n) => n.preventDefault(),
"aria-label": "Clear selection",
children: /* @__PURE__ */ e(
X,
{
name: "X",
size: "xs",
className: "!text-d-foreground opacity-50"
}
)
}
),
/* @__PURE__ */ e(
X,
{
name: "ChevronsUpDown",
size: "xs",
className: "!text-d-foreground opacity-50"
}
)
] })
] })
}
) }),
/* @__PURE__ */ e(
fe,
{
className: L("p-0"),
style: {
width: C ? B ? `${B}px` : void 0 : typeof x == "number" ? `${x}px` : x
},
align: "start",
side: "bottom",
sideOffset: 4,
onWheel: (n) => n.stopPropagation(),
avoidCollisions: !1,
children: /* @__PURE__ */ e(
be,
{
inputRef: P,
commandListRef: Y,
placeholder: _,
searchTerm: K,
onSearchTermChange: V,
fetchState: Z,
options: w,
loadingSkeleton: M,
notFound: u,
noResultsMessage: D,
multiple: l,
value: r,
getOptionValue: m,
getDisplayValue: s,
renderOption: k,
onSelect: re,
onSelectMultiple: te
}
)
}
)
] }) })
]
}
);
}
function Ne({
option: a,
multiple: c,
value: f,
getOptionValue: k,
getDisplayValue: m,
renderOption: s,
onSelect: u,
onSelectMultiple: M
}) {
const h = k(a);
let p = !1;
return c ? p = Array.isArray(f) && f.includes(h) : p = f === h, /* @__PURE__ */ e(
H,
{
value: h,
onSelect: c ? M : u,
className: "cursor-pointer",
children: /* @__PURE__ */ d("div", { className: "flex w-full items-center justify-between overflow-hidden", children: [
/* @__PURE__ */ d("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
c && /* @__PURE__ */ e(ge, { checked: p }),
s ? /* @__PURE__ */ e("div", { className: "truncate", children: s(a) }) : /* @__PURE__ */ e("span", { className: "truncate", children: m(a) })
] }),
/* @__PURE__ */ e(
we,
{
className: L(
"ml-2 h-4 w-4 flex-shrink-0",
p ? "opacity-100" : "opacity-0"
)
}
)
] })
},
h
);
}
function be({
inputRef: a,
commandListRef: c,
placeholder: f,
searchTerm: k,
onSearchTermChange: m,
fetchState: s,
options: u,
loadingSkeleton: M,
notFound: h,
noResultsMessage: p,
multiple: _,
value: r,
getOptionValue: i,
getDisplayValue: T,
renderOption: x,
onSelect: z,
onSelectMultiple: D
}) {
return /* @__PURE__ */ d(me, { shouldFilter: !1, className: "w-full border-none shadow-sm", children: [
/* @__PURE__ */ e(
ue,
{
ref: a,
placeholder: f,
className: "placeholder:text-d-muted-foreground",
value: k,
onValueChange: m
}
),
s.loading && u.length > 0 && /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ e(xe, { className: "h-4 w-4 animate-spin" }) }),
/* @__PURE__ */ d(he, { ref: c, children: [
s.error && /* @__PURE__ */ e("div", { className: "text-d-destructive p-3 text-center", children: s.error }),
s.loading && u.length === 0 && (M || /* @__PURE__ */ e(Ce, {})),
!s.loading && !s.error && u.length === 0 && (h || /* @__PURE__ */ e(pe, { children: p || "No results found." })),
!s.loading && !s.error && u.length > 0 && /* @__PURE__ */ e(q, { children: u.map((b) => /* @__PURE__ */ e(
Ne,
{
option: b,
multiple: _,
value: r,
getOptionValue: i,
getDisplayValue: T,
renderOption: x,
onSelect: z,
onSelectMultiple: D
},
i(b)
)) })
] })
] });
}
function Ce() {
return /* @__PURE__ */ e(q, { children: [1, 2, 3].map((a) => /* @__PURE__ */ e(H, { disabled: !0, children: /* @__PURE__ */ d("div", { className: "flex w-full items-center gap-2", children: [
/* @__PURE__ */ e("div", { className: "bg-d-secondary h-6 w-6 animate-pulse rounded-full" }),
/* @__PURE__ */ d("div", { className: "flex flex-1 flex-col gap-1", children: [
/* @__PURE__ */ e("div", { className: "bg-d-secondary h-4 w-24 animate-pulse rounded" }),
/* @__PURE__ */ e("div", { className: "bg-d-secondary h-3 w-16 animate-pulse rounded" })
] })
] }) }, a)) });
}
export {
De as AsyncSelect,
ye as selectTriggerVariants
};