@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
289 lines (288 loc) • 8.9 kB
JavaScript
import { jsx as a, jsxs as O } from "react/jsx-runtime";
import { c as m } from "./index-2NvaPZWc.mjs";
import { X as j } from "./x-DwXuuFO_.mjs";
import * as p from "react";
import { u as z, c as K, a as P } from "./index-CBSFK5oB.mjs";
import { u as _, c as X } from "./index-CB1Wkg0G.mjs";
import { D as U } from "./index-e9WAJWP9.mjs";
import { P as V, h as W, R as Z, u as q, F as B } from "./index-D5vghtYb.mjs";
import { u as J } from "./index-D59fTEgK.mjs";
import { c as w, R as Q, A as N, a as Y, C as ee } from "./index-BiEE5p2P.mjs";
import { P as b } from "./index-dgd0uIiN.mjs";
import { P as E } from "./index-8-FPuQXg.mjs";
var R = "Popover", [y, be] = K(R, [
w
]), g = w(), [oe, d] = y(R), F = (e) => {
const {
__scopePopover: o,
children: n,
open: s,
defaultOpen: r,
onOpenChange: t,
modal: c = !1
} = e, i = g(o), l = p.useRef(null), [u, h] = p.useState(!1), [C, f] = z({
prop: s,
defaultProp: r ?? !1,
onChange: t,
caller: R
});
return /* @__PURE__ */ a(Q, { ...i, children: /* @__PURE__ */ a(
oe,
{
scope: o,
contentId: J(),
triggerRef: l,
open: C,
onOpenChange: f,
onOpenToggle: p.useCallback(() => f((x) => !x), [f]),
hasCustomAnchor: u,
onCustomAnchorAdd: p.useCallback(() => h(!0), []),
onCustomAnchorRemove: p.useCallback(() => h(!1), []),
modal: c,
children: n
}
) });
};
F.displayName = R;
var S = "PopoverAnchor", re = p.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, r = d(S, n), t = g(n), { onCustomAnchorAdd: c, onCustomAnchorRemove: i } = r;
return p.useEffect(() => (c(), () => i()), [c, i]), /* @__PURE__ */ a(N, { ...t, ...s, ref: o });
}
);
re.displayName = S;
var D = "PopoverTrigger", M = p.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, r = d(D, n), t = g(n), c = _(o, r.triggerRef), i = /* @__PURE__ */ a(
E.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": r.open,
"aria-controls": r.contentId,
"data-state": G(r.open),
...s,
ref: c,
onClick: P(e.onClick, r.onOpenToggle)
}
);
return r.hasCustomAnchor ? i : /* @__PURE__ */ a(N, { asChild: !0, ...t, children: i });
}
);
M.displayName = D;
var A = "PopoverPortal", [te, ne] = y(A, {
forceMount: void 0
}), T = (e) => {
const { __scopePopover: o, forceMount: n, children: s, container: r } = e, t = d(A, o);
return /* @__PURE__ */ a(te, { scope: o, forceMount: n, children: /* @__PURE__ */ a(b, { present: n || t.open, children: /* @__PURE__ */ a(V, { asChild: !0, container: r, children: s }) }) });
};
T.displayName = A;
var v = "PopoverContent", k = p.forwardRef(
(e, o) => {
const n = ne(v, e.__scopePopover), { forceMount: s = n.forceMount, ...r } = e, t = d(v, e.__scopePopover);
return /* @__PURE__ */ a(b, { present: s || t.open, children: t.modal ? /* @__PURE__ */ a(se, { ...r, ref: o }) : /* @__PURE__ */ a(ce, { ...r, ref: o }) });
}
);
k.displayName = v;
var ae = X("PopoverContent.RemoveScroll"), se = p.forwardRef(
(e, o) => {
const n = d(v, e.__scopePopover), s = p.useRef(null), r = _(o, s), t = p.useRef(!1);
return p.useEffect(() => {
const c = s.current;
if (c) return W(c);
}, []), /* @__PURE__ */ a(Z, { as: ae, allowPinchZoom: !0, children: /* @__PURE__ */ a(
I,
{
...e,
ref: r,
trapFocus: n.open,
disableOutsidePointerEvents: !0,
onCloseAutoFocus: P(e.onCloseAutoFocus, (c) => {
var i;
c.preventDefault(), t.current || (i = n.triggerRef.current) == null || i.focus();
}),
onPointerDownOutside: P(
e.onPointerDownOutside,
(c) => {
const i = c.detail.originalEvent, l = i.button === 0 && i.ctrlKey === !0, u = i.button === 2 || l;
t.current = u;
},
{ checkForDefaultPrevented: !1 }
),
onFocusOutside: P(
e.onFocusOutside,
(c) => c.preventDefault(),
{ checkForDefaultPrevented: !1 }
)
}
) });
}
), ce = p.forwardRef(
(e, o) => {
const n = d(v, e.__scopePopover), s = p.useRef(!1), r = p.useRef(!1);
return /* @__PURE__ */ a(
I,
{
...e,
ref: o,
trapFocus: !1,
disableOutsidePointerEvents: !1,
onCloseAutoFocus: (t) => {
var c, i;
(c = e.onCloseAutoFocus) == null || c.call(e, t), t.defaultPrevented || (s.current || (i = n.triggerRef.current) == null || i.focus(), t.preventDefault()), s.current = !1, r.current = !1;
},
onInteractOutside: (t) => {
var l, u;
(l = e.onInteractOutside) == null || l.call(e, t), t.defaultPrevented || (s.current = !0, t.detail.originalEvent.type === "pointerdown" && (r.current = !0));
const c = t.target;
((u = n.triggerRef.current) == null ? void 0 : u.contains(c)) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && r.current && t.preventDefault();
}
}
);
}
), I = p.forwardRef(
(e, o) => {
const {
__scopePopover: n,
trapFocus: s,
onOpenAutoFocus: r,
onCloseAutoFocus: t,
disableOutsidePointerEvents: c,
onEscapeKeyDown: i,
onPointerDownOutside: l,
onFocusOutside: u,
onInteractOutside: h,
...C
} = e, f = d(v, n), x = g(n);
return q(), /* @__PURE__ */ a(
B,
{
asChild: !0,
loop: !0,
trapped: s,
onMountAutoFocus: r,
onUnmountAutoFocus: t,
children: /* @__PURE__ */ a(
U,
{
asChild: !0,
disableOutsidePointerEvents: c,
onInteractOutside: h,
onEscapeKeyDown: i,
onPointerDownOutside: l,
onFocusOutside: u,
onDismiss: () => f.onOpenChange(!1),
children: /* @__PURE__ */ a(
ee,
{
"data-state": G(f.open),
role: "dialog",
id: f.contentId,
...x,
...C,
ref: o,
style: {
...C.style,
"--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-popover-content-available-width": "var(--radix-popper-available-width)",
"--radix-popover-content-available-height": "var(--radix-popper-available-height)",
"--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
}
}
)
}
)
}
);
}
), $ = "PopoverClose", H = p.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, r = d($, n);
return /* @__PURE__ */ a(
E.button,
{
type: "button",
...s,
ref: o,
onClick: P(e.onClick, () => r.onOpenChange(!1))
}
);
}
);
H.displayName = $;
var ie = "PopoverArrow", L = p.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, r = g(n);
return /* @__PURE__ */ a(Y, { ...r, ...s, ref: o });
}
);
L.displayName = ie;
function G(e) {
return e ? "open" : "closed";
}
var pe = F, le = M, ue = T, de = k, fe = H, ve = L;
const Ee = pe, ye = le, Pe = ve, Fe = ({
className: e,
...o
}) => /* @__PURE__ */ a(
"div",
{
className: m(
"flex flex-col space-y-1.5 text-center sm:text-left",
e
),
...o
}
), Se = ({ className: e, ...o }) => /* @__PURE__ */ a("h6", { className: m("text-lg font-semibold", e), ...o }), De = ({
className: e,
...o
}) => /* @__PURE__ */ a("p", { className: m("text-muted-foreground text-sm", e), ...o }), Me = ({
className: e,
...o
}) => /* @__PURE__ */ O(
fe,
{
className: m(
"focus-ring text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition hover:opacity-100 disabled:pointer-events-none",
e
),
...o,
children: [
/* @__PURE__ */ a(j, { className: "size-4" }),
/* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
]
}
), Te = ({
className: e,
children: o,
align: n = "center",
sideOffset: s = 4,
arrow: r,
...t
}) => /* @__PURE__ */ a(ue, { children: /* @__PURE__ */ O(
de,
{
align: n,
sideOffset: s,
className: m(
"animate-entrance-fade-slide bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-sm outline-hidden",
e
),
...t,
children: [
o,
r && /* @__PURE__ */ a(Pe, { className: "fill-popover", width: 12, height: 8 })
]
}
) });
export {
Ee as P,
ye as a,
Pe as b,
Fe as c,
Se as d,
De as e,
Me as f,
Te as g
};