@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
699 lines (693 loc) • 22.7 kB
JavaScript
import * as i from "react";
import { useState as me } from "react";
import { c as pe, u as ge } from "./index-D2LZVjSn.mjs";
import "react-dom";
import { jsx as oe } from "react/jsx-runtime";
import { u as z } from "./index-0ioNhtNM.mjs";
var ye = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"select",
"span",
"svg",
"ul"
], be = ye.reduce((e, t) => {
const r = pe(`Primitive.${t}`), n = i.forwardRef((c, u) => {
const { asChild: l, ...a } = c, E = l ? r : t;
return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ oe(E, { ...a, ref: u });
});
return n.displayName = `Primitive.${t}`, { ...e, [t]: n };
}, {}), U = "focusScope.autoFocusOnMount", _ = "focusScope.autoFocusOnUnmount", Z = { bubbles: !1, cancelable: !0 }, Ee = "FocusScope", Se = i.forwardRef((e, t) => {
const {
loop: r = !1,
trapped: n = !1,
onMountAutoFocus: c,
onUnmountAutoFocus: u,
...l
} = e, [a, E] = i.useState(null), b = z(c), g = z(u), f = i.useRef(null), v = ge(t, (o) => E(o)), h = i.useRef({
paused: !1,
pause() {
this.paused = !0;
},
resume() {
this.paused = !1;
}
}).current;
i.useEffect(() => {
if (n) {
let o = function(p) {
if (h.paused || !a) return;
const y = p.target;
a.contains(y) ? f.current = y : k(f.current, { select: !0 });
}, s = function(p) {
if (h.paused || !a) return;
const y = p.relatedTarget;
y !== null && (a.contains(y) || k(f.current, { select: !0 }));
}, d = function(p) {
if (document.activeElement === document.body)
for (const S of p)
S.removedNodes.length > 0 && k(a);
};
document.addEventListener("focusin", o), document.addEventListener("focusout", s);
const m = new MutationObserver(d);
return a && m.observe(a, { childList: !0, subtree: !0 }), () => {
document.removeEventListener("focusin", o), document.removeEventListener("focusout", s), m.disconnect();
};
}
}, [n, a, h.paused]), i.useEffect(() => {
if (a) {
q.add(h);
const o = document.activeElement;
if (!a.contains(o)) {
const d = new CustomEvent(U, Z);
a.addEventListener(U, b), a.dispatchEvent(d), d.defaultPrevented || (we(Te(ce(a)), { select: !0 }), document.activeElement === o && k(a));
}
return () => {
a.removeEventListener(U, b), setTimeout(() => {
const d = new CustomEvent(_, Z);
a.addEventListener(_, g), a.dispatchEvent(d), d.defaultPrevented || k(o ?? document.body, { select: !0 }), a.removeEventListener(_, g), q.remove(h);
}, 0);
};
}
}, [a, b, g, h]);
const w = i.useCallback(
(o) => {
if (!r && !n || h.paused) return;
const s = o.key === "Tab" && !o.altKey && !o.ctrlKey && !o.metaKey, d = document.activeElement;
if (s && d) {
const m = o.currentTarget, [p, y] = Ce(m);
p && y ? !o.shiftKey && d === y ? (o.preventDefault(), r && k(p, { select: !0 })) : o.shiftKey && d === p && (o.preventDefault(), r && k(y, { select: !0 })) : d === m && o.preventDefault();
}
},
[r, n, h.paused]
);
return /* @__PURE__ */ oe(be.div, { tabIndex: -1, ...l, ref: v, onKeyDown: w });
});
Se.displayName = Ee;
function we(e, { select: t = !1 } = {}) {
const r = document.activeElement;
for (const n of e)
if (k(n, { select: t }), document.activeElement !== r) return;
}
function Ce(e) {
const t = ce(e), r = $(t, e), n = $(t.reverse(), e);
return [r, n];
}
function ce(e) {
const t = [], r = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
acceptNode: (n) => {
const c = n.tagName === "INPUT" && n.type === "hidden";
return n.disabled || n.hidden || c ? NodeFilter.FILTER_SKIP : n.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
for (; r.nextNode(); ) t.push(r.currentNode);
return t;
}
function $(e, t) {
for (const r of e)
if (!Re(r, { upTo: t })) return r;
}
function Re(e, { upTo: t }) {
if (getComputedStyle(e).visibility === "hidden") return !0;
for (; e; ) {
if (t !== void 0 && e === t) return !1;
if (getComputedStyle(e).display === "none") return !0;
e = e.parentElement;
}
return !1;
}
function ke(e) {
return e instanceof HTMLInputElement && "select" in e;
}
function k(e, { select: t = !1 } = {}) {
if (e && e.focus) {
const r = document.activeElement;
e.focus({ preventScroll: !0 }), e !== r && ke(e) && t && e.select();
}
}
var q = Ae();
function Ae() {
let e = [];
return {
add(t) {
const r = e[0];
t !== r && r?.pause(), e = Q(e, t), e.unshift(t);
},
remove(t) {
e = Q(e, t), e[0]?.resume();
}
};
}
function Q(e, t) {
const r = [...e], n = r.indexOf(t);
return n !== -1 && r.splice(n, 1), r;
}
function Te(e) {
return e.filter((t) => t.tagName !== "A");
}
var j = 0;
function bt() {
i.useEffect(() => {
const e = document.querySelectorAll("[data-radix-focus-guard]");
return document.body.insertAdjacentElement("afterbegin", e[0] ?? J()), document.body.insertAdjacentElement("beforeend", e[1] ?? J()), j++, () => {
j === 1 && document.querySelectorAll("[data-radix-focus-guard]").forEach((t) => t.remove()), j--;
};
}, []);
}
function J() {
const e = document.createElement("span");
return e.setAttribute("data-radix-focus-guard", ""), e.tabIndex = 0, e.style.outline = "none", e.style.opacity = "0", e.style.position = "fixed", e.style.pointerEvents = "none", e;
}
var C = function() {
return C = Object.assign || function(t) {
for (var r, n = 1, c = arguments.length; n < c; n++) {
r = arguments[n];
for (var u in r) Object.prototype.hasOwnProperty.call(r, u) && (t[u] = r[u]);
}
return t;
}, C.apply(this, arguments);
};
function ue(e, t) {
var r = {};
for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
if (e != null && typeof Object.getOwnPropertySymbols == "function")
for (var c = 0, n = Object.getOwnPropertySymbols(e); c < n.length; c++)
t.indexOf(n[c]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[c]) && (r[n[c]] = e[n[c]]);
return r;
}
function Ne(e, t, r) {
if (r || arguments.length === 2) for (var n = 0, c = t.length, u; n < c; n++)
(u || !(n in t)) && (u || (u = Array.prototype.slice.call(t, 0, n)), u[n] = t[n]);
return e.concat(u || Array.prototype.slice.call(t));
}
var W = "right-scroll-bar-position", B = "width-before-scroll-bar", Pe = "with-scroll-bars-hidden", Me = "--removed-body-scroll-bar-size";
function K(e, t) {
return typeof e == "function" ? e(t) : e && (e.current = t), e;
}
function Fe(e, t) {
var r = me(function() {
return {
// value
value: e,
// last callback
callback: t,
// "memoized" public interface
facade: {
get current() {
return r.value;
},
set current(n) {
var c = r.value;
c !== n && (r.value = n, r.callback(n, c));
}
}
};
})[0];
return r.callback = t, r.facade;
}
var Oe = typeof window < "u" ? i.useLayoutEffect : i.useEffect, ee = /* @__PURE__ */ new WeakMap();
function Le(e, t) {
var r = Fe(null, function(n) {
return e.forEach(function(c) {
return K(c, n);
});
});
return Oe(function() {
var n = ee.get(r);
if (n) {
var c = new Set(n), u = new Set(e), l = r.current;
c.forEach(function(a) {
u.has(a) || K(a, null);
}), u.forEach(function(a) {
c.has(a) || K(a, l);
});
}
ee.set(r, e);
}, [e]), r;
}
function Ie(e) {
return e;
}
function xe(e, t) {
t === void 0 && (t = Ie);
var r = [], n = !1, c = {
read: function() {
if (n)
throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");
return r.length ? r[r.length - 1] : e;
},
useMedium: function(u) {
var l = t(u, n);
return r.push(l), function() {
r = r.filter(function(a) {
return a !== l;
});
};
},
assignSyncMedium: function(u) {
for (n = !0; r.length; ) {
var l = r;
r = [], l.forEach(u);
}
r = {
push: function(a) {
return u(a);
},
filter: function() {
return r;
}
};
},
assignMedium: function(u) {
n = !0;
var l = [];
if (r.length) {
var a = r;
r = [], a.forEach(u), l = r;
}
var E = function() {
var g = l;
l = [], g.forEach(u);
}, b = function() {
return Promise.resolve().then(E);
};
b(), r = {
push: function(g) {
l.push(g), b();
},
filter: function(g) {
return l = l.filter(g), r;
}
};
}
};
return c;
}
function We(e) {
e === void 0 && (e = {});
var t = xe(null);
return t.options = C({ async: !0, ssr: !1 }, e), t;
}
var ie = function(e) {
var t = e.sideCar, r = ue(e, ["sideCar"]);
if (!t)
throw new Error("Sidecar: please provide `sideCar` property to import the right car");
var n = t.read();
if (!n)
throw new Error("Sidecar medium not found");
return i.createElement(n, C({}, r));
};
ie.isSideCarExport = !0;
function Be(e, t) {
return e.useMedium(t), ie;
}
var le = We(), H = function() {
}, D = i.forwardRef(function(e, t) {
var r = i.useRef(null), n = i.useState({
onScrollCapture: H,
onWheelCapture: H,
onTouchMoveCapture: H
}), c = n[0], u = n[1], l = e.forwardProps, a = e.children, E = e.className, b = e.removeScrollBar, g = e.enabled, f = e.shards, v = e.sideCar, h = e.noRelative, w = e.noIsolation, o = e.inert, s = e.allowPinchZoom, d = e.as, m = d === void 0 ? "div" : d, p = e.gapMode, y = ue(e, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]), S = v, A = Le([r, t]), R = C(C({}, y), c);
return i.createElement(
i.Fragment,
null,
g && i.createElement(S, { sideCar: le, removeScrollBar: b, shards: f, noRelative: h, noIsolation: w, inert: o, setCallbacks: u, allowPinchZoom: !!s, lockRef: r, gapMode: p }),
l ? i.cloneElement(i.Children.only(a), C(C({}, R), { ref: A })) : i.createElement(m, C({}, R, { className: E, ref: A }), a)
);
});
D.defaultProps = {
enabled: !0,
removeScrollBar: !0,
inert: !1
};
D.classNames = {
fullWidth: B,
zeroRight: W
};
var De = function() {
if (typeof __webpack_nonce__ < "u")
return __webpack_nonce__;
};
function Ue() {
if (!document)
return null;
var e = document.createElement("style");
e.type = "text/css";
var t = De();
return t && e.setAttribute("nonce", t), e;
}
function _e(e, t) {
e.styleSheet ? e.styleSheet.cssText = t : e.appendChild(document.createTextNode(t));
}
function je(e) {
var t = document.head || document.getElementsByTagName("head")[0];
t.appendChild(e);
}
var Ke = function() {
var e = 0, t = null;
return {
add: function(r) {
e == 0 && (t = Ue()) && (_e(t, r), je(t)), e++;
},
remove: function() {
e--, !e && t && (t.parentNode && t.parentNode.removeChild(t), t = null);
}
};
}, He = function() {
var e = Ke();
return function(t, r) {
i.useEffect(function() {
return e.add(t), function() {
e.remove();
};
}, [t && r]);
};
}, se = function() {
var e = He(), t = function(r) {
var n = r.styles, c = r.dynamic;
return e(n, c), null;
};
return t;
}, Ve = {
left: 0,
top: 0,
right: 0,
gap: 0
}, V = function(e) {
return parseInt(e || "", 10) || 0;
}, Xe = function(e) {
var t = window.getComputedStyle(document.body), r = t[e === "padding" ? "paddingLeft" : "marginLeft"], n = t[e === "padding" ? "paddingTop" : "marginTop"], c = t[e === "padding" ? "paddingRight" : "marginRight"];
return [V(r), V(n), V(c)];
}, Ye = function(e) {
if (e === void 0 && (e = "margin"), typeof window > "u")
return Ve;
var t = Xe(e), r = document.documentElement.clientWidth, n = window.innerWidth;
return {
left: t[0],
top: t[1],
right: t[2],
gap: Math.max(0, n - r + t[2] - t[0])
};
}, Ge = se(), M = "data-scroll-locked", ze = function(e, t, r, n) {
var c = e.left, u = e.top, l = e.right, a = e.gap;
return r === void 0 && (r = "margin"), `
.`.concat(Pe, ` {
overflow: hidden `).concat(n, `;
padding-right: `).concat(a, "px ").concat(n, `;
}
body[`).concat(M, `] {
overflow: hidden `).concat(n, `;
overscroll-behavior: contain;
`).concat([
t && "position: relative ".concat(n, ";"),
r === "margin" && `
padding-left: `.concat(c, `px;
padding-top: `).concat(u, `px;
padding-right: `).concat(l, `px;
margin-left:0;
margin-top:0;
margin-right: `).concat(a, "px ").concat(n, `;
`),
r === "padding" && "padding-right: ".concat(a, "px ").concat(n, ";")
].filter(Boolean).join(""), `
}
.`).concat(W, ` {
right: `).concat(a, "px ").concat(n, `;
}
.`).concat(B, ` {
margin-right: `).concat(a, "px ").concat(n, `;
}
.`).concat(W, " .").concat(W, ` {
right: 0 `).concat(n, `;
}
.`).concat(B, " .").concat(B, ` {
margin-right: 0 `).concat(n, `;
}
body[`).concat(M, `] {
`).concat(Me, ": ").concat(a, `px;
}
`);
}, te = function() {
var e = parseInt(document.body.getAttribute(M) || "0", 10);
return isFinite(e) ? e : 0;
}, Ze = function() {
i.useEffect(function() {
return document.body.setAttribute(M, (te() + 1).toString()), function() {
var e = te() - 1;
e <= 0 ? document.body.removeAttribute(M) : document.body.setAttribute(M, e.toString());
};
}, []);
}, $e = function(e) {
var t = e.noRelative, r = e.noImportant, n = e.gapMode, c = n === void 0 ? "margin" : n;
Ze();
var u = i.useMemo(function() {
return Ye(c);
}, [c]);
return i.createElement(Ge, { styles: ze(u, !t, c, r ? "" : "!important") });
}, Y = !1;
if (typeof window < "u")
try {
var O = Object.defineProperty({}, "passive", {
get: function() {
return Y = !0, !0;
}
});
window.addEventListener("test", O, O), window.removeEventListener("test", O, O);
} catch {
Y = !1;
}
var T = Y ? { passive: !1 } : !1, qe = function(e) {
return e.tagName === "TEXTAREA";
}, fe = function(e, t) {
if (!(e instanceof Element))
return !1;
var r = window.getComputedStyle(e);
return (
// not-not-scrollable
r[t] !== "hidden" && // contains scroll inside self
!(r.overflowY === r.overflowX && !qe(e) && r[t] === "visible")
);
}, Qe = function(e) {
return fe(e, "overflowY");
}, Je = function(e) {
return fe(e, "overflowX");
}, re = function(e, t) {
var r = t.ownerDocument, n = t;
do {
typeof ShadowRoot < "u" && n instanceof ShadowRoot && (n = n.host);
var c = de(e, n);
if (c) {
var u = ve(e, n), l = u[1], a = u[2];
if (l > a)
return !0;
}
n = n.parentNode;
} while (n && n !== r.body);
return !1;
}, et = function(e) {
var t = e.scrollTop, r = e.scrollHeight, n = e.clientHeight;
return [
t,
r,
n
];
}, tt = function(e) {
var t = e.scrollLeft, r = e.scrollWidth, n = e.clientWidth;
return [
t,
r,
n
];
}, de = function(e, t) {
return e === "v" ? Qe(t) : Je(t);
}, ve = function(e, t) {
return e === "v" ? et(t) : tt(t);
}, rt = function(e, t) {
return e === "h" && t === "rtl" ? -1 : 1;
}, nt = function(e, t, r, n, c) {
var u = rt(e, window.getComputedStyle(t).direction), l = u * n, a = r.target, E = t.contains(a), b = !1, g = l > 0, f = 0, v = 0;
do {
if (!a)
break;
var h = ve(e, a), w = h[0], o = h[1], s = h[2], d = o - s - u * w;
(w || d) && de(e, a) && (f += d, v += w);
var m = a.parentNode;
a = m && m.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? m.host : m;
} while (
// portaled content
!E && a !== document.body || // self content
E && (t.contains(a) || t === a)
);
return (g && Math.abs(f) < 1 || !g && Math.abs(v) < 1) && (b = !0), b;
}, L = function(e) {
return "changedTouches" in e ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [0, 0];
}, ne = function(e) {
return [e.deltaX, e.deltaY];
}, ae = function(e) {
return e && "current" in e ? e.current : e;
}, at = function(e, t) {
return e[0] === t[0] && e[1] === t[1];
}, ot = function(e) {
return `
.block-interactivity-`.concat(e, ` {pointer-events: none;}
.allow-interactivity-`).concat(e, ` {pointer-events: all;}
`);
}, ct = 0, N = [];
function ut(e) {
var t = i.useRef([]), r = i.useRef([0, 0]), n = i.useRef(), c = i.useState(ct++)[0], u = i.useState(se)[0], l = i.useRef(e);
i.useEffect(function() {
l.current = e;
}, [e]), i.useEffect(function() {
if (e.inert) {
document.body.classList.add("block-interactivity-".concat(c));
var o = Ne([e.lockRef.current], (e.shards || []).map(ae), !0).filter(Boolean);
return o.forEach(function(s) {
return s.classList.add("allow-interactivity-".concat(c));
}), function() {
document.body.classList.remove("block-interactivity-".concat(c)), o.forEach(function(s) {
return s.classList.remove("allow-interactivity-".concat(c));
});
};
}
}, [e.inert, e.lockRef.current, e.shards]);
var a = i.useCallback(function(o, s) {
if ("touches" in o && o.touches.length === 2 || o.type === "wheel" && o.ctrlKey)
return !l.current.allowPinchZoom;
var d = L(o), m = r.current, p = "deltaX" in o ? o.deltaX : m[0] - d[0], y = "deltaY" in o ? o.deltaY : m[1] - d[1], S, A = o.target, R = Math.abs(p) > Math.abs(y) ? "h" : "v";
if ("touches" in o && R === "h" && A.type === "range")
return !1;
var F = re(R, A);
if (!F)
return !0;
if (F ? S = R : (S = R === "v" ? "h" : "v", F = re(R, A)), !F)
return !1;
if (!n.current && "changedTouches" in o && (p || y) && (n.current = S), !S)
return !0;
var G = n.current || S;
return nt(G, s, o, G === "h" ? p : y);
}, []), E = i.useCallback(function(o) {
var s = o;
if (!(!N.length || N[N.length - 1] !== u)) {
var d = "deltaY" in s ? ne(s) : L(s), m = t.current.filter(function(S) {
return S.name === s.type && (S.target === s.target || s.target === S.shadowParent) && at(S.delta, d);
})[0];
if (m && m.should) {
s.cancelable && s.preventDefault();
return;
}
if (!m) {
var p = (l.current.shards || []).map(ae).filter(Boolean).filter(function(S) {
return S.contains(s.target);
}), y = p.length > 0 ? a(s, p[0]) : !l.current.noIsolation;
y && s.cancelable && s.preventDefault();
}
}
}, []), b = i.useCallback(function(o, s, d, m) {
var p = { name: o, delta: s, target: d, should: m, shadowParent: it(d) };
t.current.push(p), setTimeout(function() {
t.current = t.current.filter(function(y) {
return y !== p;
});
}, 1);
}, []), g = i.useCallback(function(o) {
r.current = L(o), n.current = void 0;
}, []), f = i.useCallback(function(o) {
b(o.type, ne(o), o.target, a(o, e.lockRef.current));
}, []), v = i.useCallback(function(o) {
b(o.type, L(o), o.target, a(o, e.lockRef.current));
}, []);
i.useEffect(function() {
return N.push(u), e.setCallbacks({
onScrollCapture: f,
onWheelCapture: f,
onTouchMoveCapture: v
}), document.addEventListener("wheel", E, T), document.addEventListener("touchmove", E, T), document.addEventListener("touchstart", g, T), function() {
N = N.filter(function(o) {
return o !== u;
}), document.removeEventListener("wheel", E, T), document.removeEventListener("touchmove", E, T), document.removeEventListener("touchstart", g, T);
};
}, []);
var h = e.removeScrollBar, w = e.inert;
return i.createElement(
i.Fragment,
null,
w ? i.createElement(u, { styles: ot(c) }) : null,
h ? i.createElement($e, { noRelative: e.noRelative, gapMode: e.gapMode }) : null
);
}
function it(e) {
for (var t = null; e !== null; )
e instanceof ShadowRoot && (t = e.host, e = e.host), e = e.parentNode;
return t;
}
const lt = Be(le, ut);
var st = i.forwardRef(function(e, t) {
return i.createElement(D, C({}, e, { ref: t, sideCar: lt }));
});
st.classNames = D.classNames;
var ft = function(e) {
if (typeof document > "u")
return null;
var t = Array.isArray(e) ? e[0] : e;
return t.ownerDocument.body;
}, P = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), x = {}, X = 0, he = function(e) {
return e && (e.host || he(e.parentNode));
}, dt = function(e, t) {
return t.map(function(r) {
if (e.contains(r))
return r;
var n = he(r);
return n && e.contains(n) ? n : (console.error("aria-hidden", r, "in not contained inside", e, ". Doing nothing"), null);
}).filter(function(r) {
return !!r;
});
}, vt = function(e, t, r, n) {
var c = dt(t, Array.isArray(e) ? e : [e]);
x[r] || (x[r] = /* @__PURE__ */ new WeakMap());
var u = x[r], l = [], a = /* @__PURE__ */ new Set(), E = new Set(c), b = function(f) {
!f || a.has(f) || (a.add(f), b(f.parentNode));
};
c.forEach(b);
var g = function(f) {
!f || E.has(f) || Array.prototype.forEach.call(f.children, function(v) {
if (a.has(v))
g(v);
else
try {
var h = v.getAttribute(n), w = h !== null && h !== "false", o = (P.get(v) || 0) + 1, s = (u.get(v) || 0) + 1;
P.set(v, o), u.set(v, s), l.push(v), o === 1 && w && I.set(v, !0), s === 1 && v.setAttribute(r, "true"), w || v.setAttribute(n, "true");
} catch (d) {
console.error("aria-hidden: cannot operate on ", v, d);
}
});
};
return g(t), a.clear(), X++, function() {
l.forEach(function(f) {
var v = P.get(f) - 1, h = u.get(f) - 1;
P.set(f, v), u.set(f, h), v || (I.has(f) || f.removeAttribute(n), I.delete(f)), h || f.removeAttribute(r);
}), X--, X || (P = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), x = {});
};
}, Et = function(e, t, r) {
r === void 0 && (r = "data-aria-hidden");
var n = Array.from(Array.isArray(e) ? e : [e]), c = ft(e);
return c ? (n.push.apply(n, Array.from(c.querySelectorAll("[aria-live], script"))), vt(n, c, r, "aria-hidden")) : function() {
return null;
};
};
export {
Se as F,
st as R,
Et as h,
bt as u
};