@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
206 lines (205 loc) • 6.25 kB
JavaScript
import * as s from "react";
import { c as v } from "./index-hURUNS5V.mjs";
import { c as V } from "./index-Bj70Jptv.mjs";
import { c as $, u as j } from "./index-D2LZVjSn.mjs";
import { c as z } from "./index-DFZozV_h.mjs";
import { u as q } from "./index-C3vaq8Fy.mjs";
import "react-dom";
import { jsx as f } from "react/jsx-runtime";
import { u as J } from "./index-0ioNhtNM.mjs";
import { u as Q } from "./index-DOCb3WPZ.mjs";
import { u as W } from "./index-ByaXH_ih.mjs";
var X = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"select",
"span",
"svg",
"ul"
], x = X.reduce((e, o) => {
const n = $(`Primitive.${o}`), t = s.forwardRef((I, b) => {
const { asChild: d, ...g } = I, F = d ? n : o;
return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ f(F, { ...g, ref: b });
});
return t.displayName = `Primitive.${o}`, { ...e, [o]: t };
}, {}), _ = "rovingFocusGroup.onEntryFocus", Z = { bubbles: !1, cancelable: !0 }, R = "RovingFocusGroup", [P, G, ee] = V(R), [oe, Re] = z(
R,
[ee]
), [te, re] = oe(R), O = s.forwardRef(
(e, o) => /* @__PURE__ */ f(P.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ f(P.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ f(ne, { ...e, ref: o }) }) })
);
O.displayName = R;
var ne = s.forwardRef((e, o) => {
const {
__scopeRovingFocusGroup: n,
orientation: t,
loop: I = !1,
dir: b,
currentTabStopId: d,
defaultCurrentTabStopId: g,
onCurrentTabStopIdChange: F,
onEntryFocus: p,
preventScrollOnEntryFocus: a = !1,
...w
} = e, S = s.useRef(null), C = j(o, S), E = W(b), [T, r] = Q({
prop: d,
defaultProp: g ?? null,
onChange: F,
caller: R
}), [i, h] = s.useState(!1), u = J(p), l = G(n), y = s.useRef(!1), [L, D] = s.useState(0);
return s.useEffect(() => {
const c = S.current;
if (c)
return c.addEventListener(_, u), () => c.removeEventListener(_, u);
}, [u]), /* @__PURE__ */ f(
te,
{
scope: n,
orientation: t,
dir: E,
loop: I,
currentTabStopId: T,
onItemFocus: s.useCallback(
(c) => r(c),
[r]
),
onItemShiftTab: s.useCallback(() => h(!0), []),
onFocusableItemAdd: s.useCallback(
() => D((c) => c + 1),
[]
),
onFocusableItemRemove: s.useCallback(
() => D((c) => c - 1),
[]
),
children: /* @__PURE__ */ f(
x.div,
{
tabIndex: i || L === 0 ? -1 : 0,
"data-orientation": t,
...w,
ref: C,
style: { outline: "none", ...e.style },
onMouseDown: v(e.onMouseDown, () => {
y.current = !0;
}),
onFocus: v(e.onFocus, (c) => {
const U = !y.current;
if (c.target === c.currentTarget && U && !i) {
const N = new CustomEvent(_, Z);
if (c.currentTarget.dispatchEvent(N), !N.defaultPrevented) {
const A = l().filter((m) => m.focusable), B = A.find((m) => m.active), Y = A.find((m) => m.id === T), H = [B, Y, ...A].filter(
Boolean
).map((m) => m.ref.current);
k(H, a);
}
}
y.current = !1;
}),
onBlur: v(e.onBlur, () => h(!1))
}
)
}
);
}), K = "RovingFocusGroupItem", M = s.forwardRef(
(e, o) => {
const {
__scopeRovingFocusGroup: n,
focusable: t = !0,
active: I = !1,
tabStopId: b,
children: d,
...g
} = e, F = q(), p = b || F, a = re(K, n), w = a.currentTabStopId === p, S = G(n), { onFocusableItemAdd: C, onFocusableItemRemove: E, currentTabStopId: T } = a;
return s.useEffect(() => {
if (t)
return C(), () => E();
}, [t, C, E]), /* @__PURE__ */ f(
P.ItemSlot,
{
scope: n,
id: p,
focusable: t,
active: I,
children: /* @__PURE__ */ f(
x.span,
{
tabIndex: w ? 0 : -1,
"data-orientation": a.orientation,
...g,
ref: o,
onMouseDown: v(e.onMouseDown, (r) => {
t ? a.onItemFocus(p) : r.preventDefault();
}),
onFocus: v(e.onFocus, () => a.onItemFocus(p)),
onKeyDown: v(e.onKeyDown, (r) => {
if (r.key === "Tab" && r.shiftKey) {
a.onItemShiftTab();
return;
}
if (r.target !== r.currentTarget) return;
const i = ae(r, a.orientation, a.dir);
if (i !== void 0) {
if (r.metaKey || r.ctrlKey || r.altKey || r.shiftKey) return;
r.preventDefault();
let u = S().filter((l) => l.focusable).map((l) => l.ref.current);
if (i === "last") u.reverse();
else if (i === "prev" || i === "next") {
i === "prev" && u.reverse();
const l = u.indexOf(r.currentTarget);
u = a.loop ? ue(u, l + 1) : u.slice(l + 1);
}
setTimeout(() => k(u));
}
}),
children: typeof d == "function" ? d({ isCurrentTabStop: w, hasTabStop: T != null }) : d
}
)
}
);
}
);
M.displayName = K;
var se = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last"
};
function ce(e, o) {
return o !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
}
function ae(e, o, n) {
const t = ce(e.key, n);
if (!(o === "vertical" && ["ArrowLeft", "ArrowRight"].includes(t)) && !(o === "horizontal" && ["ArrowUp", "ArrowDown"].includes(t)))
return se[t];
}
function k(e, o = !1) {
const n = document.activeElement;
for (const t of e)
if (t === n || (t.focus({ preventScroll: o }), document.activeElement !== n)) return;
}
function ue(e, o) {
return e.map((n, t) => e[(o + t) % e.length]);
}
var we = O, Se = M;
export {
Se as I,
we as R,
Re as c
};