laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
377 lines (376 loc) • 13.8 kB
JavaScript
"use client";
import { jsx as u, jsxs as V, Fragment as U } from "react/jsx-runtime";
import { Command as ue, useCommandState as de } from "../../node_modules/cmdk/dist/index.js";
import * as o from "react";
import { useEffect as L, forwardRef as fe } from "react";
import { CommandPortal as ae } from "./command-portal.js";
import { Badge as oe } from "./badge.js";
import { CommandItem as G, Command as ce, CommandList as ve, CommandGroup as be } from "./command.js";
import { cn as g } from "../../lib/utils.js";
import { Label as me } from "./label.js";
import Y from "../../node_modules/lucide-react/dist/esm/icons/x.js";
function ge(i, l) {
const [d, b] = o.useState(i);
return L(() => {
const c = setTimeout(() => b(i), l);
return () => {
clearTimeout(c);
};
}, [i, l]), d;
}
function R(i, l) {
if (i.length === 0)
return {};
if (!l)
return {
"": i
};
const d = {};
return i.forEach((b) => {
const c = b[l] || "";
d[c] || (d[c] = []), d[c].push(b);
}), d;
}
function we(i, l) {
const d = JSON.parse(JSON.stringify(i));
for (const [b, c] of Object.entries(d))
d[b] = c.filter(
(_) => !l.find((v) => v.value === _.value)
);
return d;
}
function xe(i, l) {
for (const [, d] of Object.entries(i))
if (d.some((b) => l.find((c) => c.value === b.value)))
return !0;
return !1;
}
const Z = fe(({ className: i, ...l }, d) => de((c) => c.filtered.count === 0) ? /* @__PURE__ */ u(
"div",
{
ref: d,
className: g("py-6 text-center text-sm", i),
"cmdk-empty": "",
role: "presentation",
...l
}
) : null);
Z.displayName = "CommandEmpty";
const he = o.forwardRef(
({
value: i,
onChange: l,
placeholder: d,
defaultOptions: b = [],
options: c,
delay: _,
onSearch: v,
onSearchSync: I,
loadingIndicator: W,
emptyIndicator: C,
maxSelected: X = Number.MAX_SAFE_INTEGER,
onMaxSelected: E,
hidePlaceholderWhenSelected: H,
disabled: w,
groupBy: x,
className: B,
badgeClassName: S,
selectFirstItem: p = !0,
creatable: D = !1,
triggerSearchOnFocus: F = !1,
commandProps: n,
inputProps: s,
hideClearAllButton: P = !1,
label: M
}, ee) => {
const f = o.useRef(null), [h, T] = o.useState(!1), [te, $] = o.useState(!1), [q, Q] = o.useState(!1), J = o.useRef(null), [r, O] = o.useState(i || []), [N, z] = o.useState(
R(b, x)
), [m, A] = o.useState(""), y = ge(m, _ || 500);
o.useImperativeHandle(
ee,
() => ({
selectedValue: [...r],
input: f.current,
focus: () => {
var e;
return (e = f == null ? void 0 : f.current) == null ? void 0 : e.focus();
},
reset: () => O([])
}),
[r]
);
const k = (e) => {
J.current && !J.current.contains(e.target) && f.current && !f.current.contains(e.target) && (T(!1), f.current.blur());
}, K = o.useCallback(
(e) => {
const t = r.filter((a) => a.value !== e.value);
O(t), l == null || l(t);
},
[l, r]
), re = o.useCallback(
(e) => {
const t = f.current;
t && ((e.key === "Delete" || e.key === "Backspace") && t.value === "" && r.length > 0 && (r[r.length - 1].fixed || K(r[r.length - 1])), e.key === "Escape" && t.blur());
},
[K, r]
);
L(() => {
if (typeof document < "u")
return h ? (document.addEventListener("mousedown", k), document.addEventListener("touchend", k)) : (document.removeEventListener("mousedown", k), document.removeEventListener("touchend", k)), () => {
document.removeEventListener("mousedown", k), document.removeEventListener("touchend", k);
};
}, [h, k]), L(() => {
i && O(i);
}, [i]), L(() => {
if (!c || v)
return;
const e = R(c || [], x);
JSON.stringify(e) !== JSON.stringify(N) && z(e);
}, [b, c, x, v, N]), L(() => {
const e = () => {
const a = I == null ? void 0 : I(y);
z(R(a || [], x));
};
(async () => {
!I || !h || (F && e(), y && e());
})();
}, [y, x, h, F]), L(() => {
const e = async () => {
Q(!0);
const a = await (v == null ? void 0 : v(y));
z(R(a || [], x)), Q(!1);
};
(async () => {
!v || !h || (F && await e(), y && await e());
})();
}, [y, x, h, F]);
const le = () => {
if (!D || xe(N, [{ value: m, label: m }]) || r.find((t) => t.value === m))
return;
const e = /* @__PURE__ */ u(
G,
{
value: m,
className: "cursor-pointer",
onMouseDown: (t) => {
t.preventDefault(), t.stopPropagation();
},
onSelect: (t) => {
if (r.length >= X) {
E == null || E(r.length);
return;
}
A("");
const a = [...r, { value: t, label: t }];
O(a), l == null || l(a);
},
children: `Create "${m}"`
}
);
if (!v && m.length > 0 || v && y.length > 0 && !q)
return e;
}, ne = o.useCallback(() => {
if (C)
return v && !D && Object.keys(N).length === 0 ? /* @__PURE__ */ u(G, { value: "-", disabled: !0, children: C }) : /* @__PURE__ */ u(Z, { children: C });
}, [D, C, v, N]), se = o.useMemo(
() => we(N, r),
[N, r]
), ie = o.useCallback(() => {
if (n != null && n.filter)
return n.filter;
if (D)
return (e, t) => e.toLowerCase().includes(t.toLowerCase()) ? 1 : -1;
}, [D, n == null ? void 0 : n.filter]);
return /* @__PURE__ */ V("div", { className: "flex flex-col space-y-1.5", children: [
M && /* @__PURE__ */ u(me, { children: M }),
/* @__PURE__ */ V(
ce,
{
ref: J,
...n,
onKeyDown: (e) => {
var t;
re(e), (t = n == null ? void 0 : n.onKeyDown) == null || t.call(n, e);
},
className: g(
"h-auto overflow-visible bg-transparent shadow-sm",
n == null ? void 0 : n.className
),
shouldFilter: (n == null ? void 0 : n.shouldFilter) !== void 0 ? n.shouldFilter : !v,
filter: ie(),
children: [
/* @__PURE__ */ u(
"div",
{
className: g(
"border-d-input ring-offset-d-background focus-within:ring-d-ring min-h-10 rounded-md border text-base focus-within:ring-1 md:text-sm",
{
"px-3 py-2": r.length !== 0,
"cursor-text": !w && r.length !== 0,
"disabled:cursor-not-allowed disabled:opacity-50": w
},
B
),
onClick: () => {
var e;
w || (e = f == null ? void 0 : f.current) == null || e.focus();
},
children: /* @__PURE__ */ V("div", { className: "relative flex flex-wrap gap-1", children: [
r.map((e) => /* @__PURE__ */ V(
oe,
{
className: g(
"data-[disabled]:bg-d-secondary-foreground data-[disabled]:text-d-secondary data-[disabled]:hover:bg-d-secondary-foreground",
"data-[fixed]:bg-d-secondary-foreground data-[fixed]:text-d-secondary data-[fixed]:hover:bg-d-secondary-foreground",
S
),
"data-fixed": e.fixed,
"data-disabled": w || void 0,
children: [
e.label,
/* @__PURE__ */ u(
"button",
{
type: "button",
className: g(
"text-d-secondary-foreground ring-offset-d-background focus:ring-d-ring ml-1 rounded-full outline-none focus:ring-1 focus:ring-offset-2",
(w || e.fixed) && "hidden"
),
onKeyDown: (t) => {
t.key === "Enter" && K(e);
},
onMouseDown: (t) => {
t.preventDefault(), t.stopPropagation();
},
onClick: () => K(e),
children: /* @__PURE__ */ u(Y, { className: "text-d-secondary-foreground hover:text-d-foreground h-3 w-3" })
}
)
]
},
e.value
)),
/* @__PURE__ */ u(
ue.Input,
{
...s,
ref: f,
value: m,
disabled: w,
onValueChange: (e) => {
var t;
A(e), (t = s == null ? void 0 : s.onValueChange) == null || t.call(s, e);
},
onBlur: (e) => {
var t;
te || T(!1), (t = s == null ? void 0 : s.onBlur) == null || t.call(s, e);
},
onFocus: (e) => {
var t;
T(!0), (t = s == null ? void 0 : s.onFocus) == null || t.call(s, e);
},
placeholder: H && r.length !== 0 ? "" : d,
className: g(
"placeholder:text-d-muted-foreground flex-1 bg-transparent outline-none",
{
"w-full": H,
"px-3 py-2": r.length === 0,
"ml-1": r.length !== 0
},
s == null ? void 0 : s.className
)
}
),
/* @__PURE__ */ u(
"div",
{
className: g(
"bg-d-secondary/20 hover:bg-d-secondary/30 absolute top-0 right-0 z-20 flex cursor-pointer items-center justify-center rounded-full border p-1",
(P || w || r.length < 1 || r.filter((e) => e.fixed).length === r.length) && "hidden"
),
onClick: () => {
O(r.filter((e) => e.fixed)), l == null || l(r.filter((e) => e.fixed));
},
"aria-label": "Clear selection",
children: /* @__PURE__ */ u(Y, { size: 12, className: "text-d-foreground" })
}
)
] })
}
),
/* @__PURE__ */ u(
ae,
{
open: h,
triggerRef: J,
onClose: () => {
var e;
T(!1), (e = f.current) == null || e.blur();
},
children: /* @__PURE__ */ u(
ve,
{
className: "bg-d-popover text-d-popover-foreground animate-in w-full rounded-md border shadow-md outline-none",
onMouseLeave: () => {
$(!1);
},
onMouseEnter: () => {
$(!0);
},
onMouseUp: () => {
var e;
(e = f == null ? void 0 : f.current) == null || e.focus();
},
children: q ? /* @__PURE__ */ u(U, { children: W }) : /* @__PURE__ */ V(U, { children: [
ne(),
le(),
!p && /* @__PURE__ */ u(G, { value: "-", className: "hidden" }),
Object.entries(se).map(([e, t]) => /* @__PURE__ */ u(
be,
{
heading: e,
className: "h-full overflow-auto",
children: /* @__PURE__ */ u(U, { children: t.map((a) => /* @__PURE__ */ u(
G,
{
value: a.label,
disabled: a.disable,
onMouseDown: (j) => {
j.preventDefault(), j.stopPropagation();
},
onSelect: () => {
if (r.length >= X) {
E == null || E(r.length);
return;
}
A("");
const j = [...r, a];
O(j), l == null || l(j);
},
className: g(
"cursor-pointer",
a.disable && "text-d-secondary-foreground cursor-default"
),
children: a.label
},
a.value
)) })
},
e
))
] })
}
)
}
)
]
}
)
] });
}
);
he.displayName = "MultipleSelector";
export {
he as MultipleSelector,
ge as useDebounce
};