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