@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
224 lines (223 loc) • 6.53 kB
JavaScript
import { jsx as r, jsxs as u, Fragment as k } from "react/jsx-runtime";
import { createContext as O, useState as C, useEffect as R, useRef as N, useCallback as j, useLayoutEffect as B, useContext as W } from "react";
import { c as w } from "./index-2NvaPZWc.mjs";
import { B as P } from "./Badge-98kREz_v.mjs";
import { B as F } from "./Button-nH76KtOO.mjs";
import { C as V, f as z, d as G, b as U, c as q, e as D, g as L } from "./Command-tGp1Ep9F.mjs";
import { e as T, b as X, g as H } from "./Popover-B_eTNIg4.mjs";
import J from "./check-BND_cTIg.mjs";
import K from "./chevrons-up-down-DxKd5T4c.mjs";
import Q from "./x-0Nj1BYxw.mjs";
import { i as Y, a as Z } from "./isUndefined-DTeEysaY.mjs";
const I = O(null), M = () => {
const e = W(I);
if (e == null)
throw new Error(
"useMultiSelectContext must be used within a MultiSelectContext"
);
return e;
}, de = ({
children: e,
values: t,
defaultValues: a,
onValuesChange: o
}) => {
const [c, l] = C(!1), [f, m] = C(
new Set(t ?? a)
), [y, x] = C(/* @__PURE__ */ new Map()), b = (i) => {
const n = new Set(f);
n.has(i) ? n.delete(i) : n.add(i), m(n), o?.(Array.from(n));
}, h = (i, n) => {
x((p) => p.get(i) === n ? p : new Map(p).set(i, n));
};
return /* @__PURE__ */ r(
I.Provider,
{
value: {
open: c,
setOpen: l,
selectedValues: t ? new Set(t) : f,
toggleValue: b,
items: y,
onItemAdded: h
},
children: /* @__PURE__ */ r(T, { open: c, onOpenChange: l, children: e })
}
);
}, ue = ({
role: e = "combobox",
"aria-expanded": t,
className: a,
children: o,
...c
}) => {
const { open: l } = M();
return /* @__PURE__ */ r(H, { asChild: !0, children: /* @__PURE__ */ u(
F,
{
...c,
"data-slot": "multi-select-trigger",
role: e,
size: null,
variant: null,
"aria-expanded": t ?? l,
className: w(
"group border-input bg-surface-primary ring-offset-surface placeholder:text-muted-foreground focus-ring flex h-auto min-h-10 w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm",
"[&>span]:line-clamp-1 [&>span]:text-left",
"disabled:cursor-not-allowed disabled:opacity-50",
a
),
children: [
o,
/* @__PURE__ */ r(K, { className: "size-4 shrink-0 opacity-50 transition group-hover:opacity-80" })
]
}
) });
}, me = ({
placeholder: e,
clickToRemove: t = !0,
className: a,
overflowBehavior: o = "wrap-when-open",
...c
}) => {
const { selectedValues: l, toggleValue: f, items: m, open: y } = M(), [x, b] = C(0), h = N(null), i = N(null), n = o === "wrap" || o === "wrap-when-open" && y, p = j(() => {
if (h.current == null) return;
const s = h.current, d = i.current, S = s.querySelectorAll(
"[data-selected-item]"
);
d != null && (d.style.display = "none"), S.forEach((g) => g.style.removeProperty("display"));
let v = 0;
for (let g = S.length - 1; g >= 0; g--) {
const E = S[g];
if (s.scrollWidth <= s.clientWidth)
break;
v = S.length - g, E.style.display = "none", d?.style.removeProperty("display");
}
b(v);
}, []);
B(() => {
p();
}, [l, p, n]);
const A = (s) => {
h.current = s;
const d = new ResizeObserver(p);
return d.observe(s), () => {
d.disconnect(), h.current = null;
};
};
return l.size === 0 && e ? /* @__PURE__ */ r(
"span",
{
"data-slot": "multi-select-value",
className: "text-muted-foreground w-full min-w-0 overflow-hidden font-normal",
children: e
}
) : /* @__PURE__ */ u(
"div",
{
...c,
"data-slot": "multi-select-value",
ref: A,
className: w(
"flex w-full gap-1.5 overflow-hidden",
n && "h-full flex-wrap",
a
),
children: [
Array.from(l).filter((s) => m.has(s)).map((s) => /* @__PURE__ */ u(
P,
{
variant: "secondary",
"data-selected-item": !0,
className: w(
"group/badge flex items-center gap-1 transition",
"active:scale-95"
),
onClick: t ? (d) => {
d.stopPropagation(), f(s);
} : void 0,
children: [
m.get(s),
t && /* @__PURE__ */ r(Q, { className: "size-2.5 stroke-3 opacity-50 transition group-hover/badge:opacity-100" })
]
},
s
)),
/* @__PURE__ */ u(
P,
{
variant: "secondary",
ref: i,
className: w((x <= 0 || n) && "hidden"),
children: [
"+",
x
]
}
)
]
}
);
}, _ = (e) => {
const t = {
placeholder: "Search...",
emptyMessage: "No results found."
};
return Y(e) ? t : Z(e) ? e ? t : null : {
placeholder: e.placeholder ?? t.placeholder,
emptyMessage: e.emptyMessage ?? t.emptyMessage
};
}, pe = ({
search: e = !0,
children: t,
...a
}) => {
const o = _(e);
return /* @__PURE__ */ u(k, { children: [
/* @__PURE__ */ r("div", { className: "hidden", "aria-hidden": "true", children: /* @__PURE__ */ r(V, { "aria-hidden": "true", tabIndex: -1, children: /* @__PURE__ */ r(z, { "aria-hidden": "true", tabIndex: -1, children: t }) }) }),
/* @__PURE__ */ r(X, { className: "min-w-[var(--radix-popover-trigger-width)] !p-0", children: /* @__PURE__ */ u(V, { ...a, children: [
o ? /* @__PURE__ */ r(G, { placeholder: o.placeholder }) : /* @__PURE__ */ r("button", { autoFocus: !0, className: "sr-only" }),
/* @__PURE__ */ u(z, { children: [
o && /* @__PURE__ */ r(U, { children: o.emptyMessage }),
t
] })
] }) })
] });
}, fe = ({
value: e,
children: t,
badgeLabel: a,
onSelect: o,
...c
}) => {
const { toggleValue: l, selectedValues: f, onItemAdded: m } = M(), y = f.has(e);
return R(() => {
m(e, a ?? t);
}, [e, t, m, a]), /* @__PURE__ */ u(
D,
{
...c,
onSelect: () => {
l(e), o?.(e);
},
children: [
/* @__PURE__ */ r(
J,
{
className: w("size-4", y ? "opacity-100" : "opacity-0")
}
),
t
]
}
);
}, he = (e) => /* @__PURE__ */ r(q, { ...e }), ge = (e) => /* @__PURE__ */ r(L, { ...e });
export {
de as M,
pe as a,
he as b,
fe as c,
ge as d,
ue as e,
me as f
};