@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
447 lines (444 loc) • 15.2 kB
JavaScript
import * as i from "react";
import { u as Ee, d as j, a as he, c as ye, b as _, e as De } from "./index-Cva-e5M4.js";
import { u as S, S as be } from "./index-B_6_jmOO.js";
import { P as Ce, D as Ae } from "./index-D_76wh4w.js";
import { P as N } from "./index-D7QNmo_D.js";
import { jsx as f, jsxs as q, Fragment as B } from "react/jsx-runtime";
import { P as W } from "./index-Dj1pom3_.js";
import { R as Re } from "./Combination-b348x__d.js";
var Ne = i.useId || (() => {
}), Oe = 0;
function M(e) {
const [n, t] = i.useState(Ne());
return Ee(() => {
t((o) => o ?? String(Oe++));
}, [e]), n ? `radix-${n}` : "";
}
var x = "focusScope.autoFocusOnMount", w = "focusScope.autoFocusOnUnmount", V = { bubbles: !1, cancelable: !0 }, _e = "FocusScope", Q = i.forwardRef((e, n) => {
const {
loop: t = !1,
trapped: o = !1,
onMountAutoFocus: a,
onUnmountAutoFocus: r,
...c
} = e, [s, g] = i.useState(null), m = j(a), h = j(r), u = i.useRef(null), d = S(n, (l) => g(l)), p = i.useRef({
paused: !1,
pause() {
this.paused = !0;
},
resume() {
this.paused = !1;
}
}).current;
i.useEffect(() => {
if (o) {
let l = function(D) {
if (p.paused || !s) return;
const y = D.target;
s.contains(y) ? u.current = y : C(u.current, { select: !0 });
}, b = function(D) {
if (p.paused || !s) return;
const y = D.relatedTarget;
y !== null && (s.contains(y) || C(u.current, { select: !0 }));
}, v = function(D) {
if (document.activeElement === document.body)
for (const H of D)
H.removedNodes.length > 0 && C(s);
};
document.addEventListener("focusin", l), document.addEventListener("focusout", b);
const O = new MutationObserver(v);
return s && O.observe(s, { childList: !0, subtree: !0 }), () => {
document.removeEventListener("focusin", l), document.removeEventListener("focusout", b), O.disconnect();
};
}
}, [o, s, p.paused]), i.useEffect(() => {
if (s) {
Z.add(p);
const l = document.activeElement;
if (!s.contains(l)) {
const v = new CustomEvent(x, V);
s.addEventListener(x, m), s.dispatchEvent(v), v.defaultPrevented || (Ie(Me(X(s)), { select: !0 }), document.activeElement === l && C(s));
}
return () => {
s.removeEventListener(x, m), setTimeout(() => {
const v = new CustomEvent(w, V);
s.addEventListener(w, h), s.dispatchEvent(v), v.defaultPrevented || C(l ?? document.body, { select: !0 }), s.removeEventListener(w, h), Z.remove(p);
}, 0);
};
}
}, [s, m, h, p]);
const I = i.useCallback(
(l) => {
if (!t && !o || p.paused) return;
const b = l.key === "Tab" && !l.altKey && !l.ctrlKey && !l.metaKey, v = document.activeElement;
if (b && v) {
const O = l.currentTarget, [D, y] = Pe(O);
D && y ? !l.shiftKey && v === y ? (l.preventDefault(), t && C(D, { select: !0 })) : l.shiftKey && v === D && (l.preventDefault(), t && C(y, { select: !0 })) : v === O && l.preventDefault();
}
},
[t, o, p.paused]
);
return /* @__PURE__ */ f(N.div, { tabIndex: -1, ...c, ref: d, onKeyDown: I });
});
Q.displayName = _e;
function Ie(e, { select: n = !1 } = {}) {
const t = document.activeElement;
for (const o of e)
if (C(o, { select: n }), document.activeElement !== t) return;
}
function Pe(e) {
const n = X(e), t = Y(n, e), o = Y(n.reverse(), e);
return [t, o];
}
function X(e) {
const n = [], t = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
acceptNode: (o) => {
const a = o.tagName === "INPUT" && o.type === "hidden";
return o.disabled || o.hidden || a ? NodeFilter.FILTER_SKIP : o.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
for (; t.nextNode(); ) n.push(t.currentNode);
return n;
}
function Y(e, n) {
for (const t of e)
if (!Te(t, { upTo: n })) return t;
}
function Te(e, { upTo: n }) {
if (getComputedStyle(e).visibility === "hidden") return !0;
for (; e; ) {
if (n !== void 0 && e === n) return !1;
if (getComputedStyle(e).display === "none") return !0;
e = e.parentElement;
}
return !1;
}
function Fe(e) {
return e instanceof HTMLInputElement && "select" in e;
}
function C(e, { select: n = !1 } = {}) {
if (e && e.focus) {
const t = document.activeElement;
e.focus({ preventScroll: !0 }), e !== t && Fe(e) && n && e.select();
}
}
var Z = Se();
function Se() {
let e = [];
return {
add(n) {
const t = e[0];
n !== t && (t == null || t.pause()), e = z(e, n), e.unshift(n);
},
remove(n) {
var t;
e = z(e, n), (t = e[0]) == null || t.resume();
}
};
}
function z(e, n) {
const t = [...e], o = t.indexOf(n);
return o !== -1 && t.splice(o, 1), t;
}
function Me(e) {
return e.filter((n) => n.tagName !== "A");
}
var L = 0;
function xe() {
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()), L++, () => {
L === 1 && document.querySelectorAll("[data-radix-focus-guard]").forEach((n) => n.remove()), L--;
};
}, []);
}
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 we = function(e) {
if (typeof document > "u")
return null;
var n = Array.isArray(e) ? e[0] : e;
return n.ownerDocument.body;
}, R = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), T = {}, k = 0, ee = function(e) {
return e && (e.host || ee(e.parentNode));
}, Le = function(e, n) {
return n.map(function(t) {
if (e.contains(t))
return t;
var o = ee(t);
return o && e.contains(o) ? o : (console.error("aria-hidden", t, "in not contained inside", e, ". Doing nothing"), null);
}).filter(function(t) {
return !!t;
});
}, ke = function(e, n, t, o) {
var a = Le(n, Array.isArray(e) ? e : [e]);
T[t] || (T[t] = /* @__PURE__ */ new WeakMap());
var r = T[t], c = [], s = /* @__PURE__ */ new Set(), g = new Set(a), m = function(u) {
!u || s.has(u) || (s.add(u), m(u.parentNode));
};
a.forEach(m);
var h = function(u) {
!u || g.has(u) || Array.prototype.forEach.call(u.children, function(d) {
if (s.has(d))
h(d);
else
try {
var p = d.getAttribute(o), I = p !== null && p !== "false", l = (R.get(d) || 0) + 1, b = (r.get(d) || 0) + 1;
R.set(d, l), r.set(d, b), c.push(d), l === 1 && I && P.set(d, !0), b === 1 && d.setAttribute(t, "true"), I || d.setAttribute(o, "true");
} catch (v) {
console.error("aria-hidden: cannot operate on ", d, v);
}
});
};
return h(n), s.clear(), k++, function() {
c.forEach(function(u) {
var d = R.get(u) - 1, p = r.get(u) - 1;
R.set(u, d), r.set(u, p), d || (P.has(u) || u.removeAttribute(o), P.delete(u)), p || u.removeAttribute(t);
}), k--, k || (R = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), T = {});
};
}, We = function(e, n, t) {
t === void 0 && (t = "data-aria-hidden");
var o = Array.from(Array.isArray(e) ? e : [e]), a = we(e);
return a ? (o.push.apply(o, Array.from(a.querySelectorAll("[aria-live]"))), ke(o, a, t, "aria-hidden")) : function() {
return null;
};
}, U = "Dialog", [te, et] = ye(U), [Ue, E] = te(U), ne = (e) => {
const {
__scopeDialog: n,
children: t,
open: o,
defaultOpen: a,
onOpenChange: r,
modal: c = !0
} = e, s = i.useRef(null), g = i.useRef(null), [m = !1, h] = he({
prop: o,
defaultProp: a,
onChange: r
});
return /* @__PURE__ */ f(
Ue,
{
scope: n,
triggerRef: s,
contentRef: g,
contentId: M(),
titleId: M(),
descriptionId: M(),
open: m,
onOpenChange: h,
onOpenToggle: i.useCallback(() => h((u) => !u), [h]),
modal: c,
children: t
}
);
};
ne.displayName = U;
var oe = "DialogTrigger", re = i.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...o } = e, a = E(oe, t), r = S(n, a.triggerRef);
return /* @__PURE__ */ f(
N.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": a.open,
"aria-controls": a.contentId,
"data-state": $(a.open),
...o,
ref: r,
onClick: _(e.onClick, a.onOpenToggle)
}
);
}
);
re.displayName = oe;
var K = "DialogPortal", [Ke, ae] = te(K, {
forceMount: void 0
}), se = (e) => {
const { __scopeDialog: n, forceMount: t, children: o, container: a } = e, r = E(K, n);
return /* @__PURE__ */ f(Ke, { scope: n, forceMount: t, children: i.Children.map(o, (c) => /* @__PURE__ */ f(W, { present: t || r.open, children: /* @__PURE__ */ f(Ce, { asChild: !0, container: a, children: c }) })) });
};
se.displayName = K;
var F = "DialogOverlay", ie = i.forwardRef(
(e, n) => {
const t = ae(F, e.__scopeDialog), { forceMount: o = t.forceMount, ...a } = e, r = E(F, e.__scopeDialog);
return r.modal ? /* @__PURE__ */ f(W, { present: o || r.open, children: /* @__PURE__ */ f(Ge, { ...a, ref: n }) }) : null;
}
);
ie.displayName = F;
var Ge = i.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...o } = e, a = E(F, t);
return (
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
// ie. when `Overlay` and `Content` are siblings
/* @__PURE__ */ f(Re, { as: be, allowPinchZoom: !0, shards: [a.contentRef], children: /* @__PURE__ */ f(
N.div,
{
"data-state": $(a.open),
...o,
ref: n,
style: { pointerEvents: "auto", ...o.style }
}
) })
);
}
), A = "DialogContent", ce = i.forwardRef(
(e, n) => {
const t = ae(A, e.__scopeDialog), { forceMount: o = t.forceMount, ...a } = e, r = E(A, e.__scopeDialog);
return /* @__PURE__ */ f(W, { present: o || r.open, children: r.modal ? /* @__PURE__ */ f($e, { ...a, ref: n }) : /* @__PURE__ */ f(He, { ...a, ref: n }) });
}
);
ce.displayName = A;
var $e = i.forwardRef(
(e, n) => {
const t = E(A, e.__scopeDialog), o = i.useRef(null), a = S(n, t.contentRef, o);
return i.useEffect(() => {
const r = o.current;
if (r) return We(r);
}, []), /* @__PURE__ */ f(
ue,
{
...e,
ref: a,
trapFocus: t.open,
disableOutsidePointerEvents: !0,
onCloseAutoFocus: _(e.onCloseAutoFocus, (r) => {
var c;
r.preventDefault(), (c = t.triggerRef.current) == null || c.focus();
}),
onPointerDownOutside: _(e.onPointerDownOutside, (r) => {
const c = r.detail.originalEvent, s = c.button === 0 && c.ctrlKey === !0;
(c.button === 2 || s) && r.preventDefault();
}),
onFocusOutside: _(
e.onFocusOutside,
(r) => r.preventDefault()
)
}
);
}
), He = i.forwardRef(
(e, n) => {
const t = E(A, e.__scopeDialog), o = i.useRef(!1), a = i.useRef(!1);
return /* @__PURE__ */ f(
ue,
{
...e,
ref: n,
trapFocus: !1,
disableOutsidePointerEvents: !1,
onCloseAutoFocus: (r) => {
var c, s;
(c = e.onCloseAutoFocus) == null || c.call(e, r), r.defaultPrevented || (o.current || (s = t.triggerRef.current) == null || s.focus(), r.preventDefault()), o.current = !1, a.current = !1;
},
onInteractOutside: (r) => {
var g, m;
(g = e.onInteractOutside) == null || g.call(e, r), r.defaultPrevented || (o.current = !0, r.detail.originalEvent.type === "pointerdown" && (a.current = !0));
const c = r.target;
((m = t.triggerRef.current) == null ? void 0 : m.contains(c)) && r.preventDefault(), r.detail.originalEvent.type === "focusin" && a.current && r.preventDefault();
}
}
);
}
), ue = i.forwardRef(
(e, n) => {
const { __scopeDialog: t, trapFocus: o, onOpenAutoFocus: a, onCloseAutoFocus: r, ...c } = e, s = E(A, t), g = i.useRef(null), m = S(n, g);
return xe(), /* @__PURE__ */ q(B, { children: [
/* @__PURE__ */ f(
Q,
{
asChild: !0,
loop: !0,
trapped: o,
onMountAutoFocus: a,
onUnmountAutoFocus: r,
children: /* @__PURE__ */ f(
Ae,
{
role: "dialog",
id: s.contentId,
"aria-describedby": s.descriptionId,
"aria-labelledby": s.titleId,
"data-state": $(s.open),
...c,
ref: m,
onDismiss: () => s.onOpenChange(!1)
}
)
}
),
/* @__PURE__ */ q(B, { children: [
/* @__PURE__ */ f(je, { titleId: s.titleId }),
/* @__PURE__ */ f(Be, { contentRef: g, descriptionId: s.descriptionId })
] })
] });
}
), G = "DialogTitle", le = i.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...o } = e, a = E(G, t);
return /* @__PURE__ */ f(N.h2, { id: a.titleId, ...o, ref: n });
}
);
le.displayName = G;
var fe = "DialogDescription", de = i.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...o } = e, a = E(fe, t);
return /* @__PURE__ */ f(N.p, { id: a.descriptionId, ...o, ref: n });
}
);
de.displayName = fe;
var pe = "DialogClose", ve = i.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...o } = e, a = E(pe, t);
return /* @__PURE__ */ f(
N.button,
{
type: "button",
...o,
ref: n,
onClick: _(e.onClick, () => a.onOpenChange(!1))
}
);
}
);
ve.displayName = pe;
function $(e) {
return e ? "open" : "closed";
}
var me = "DialogTitleWarning", [tt, ge] = De(me, {
contentName: A,
titleName: G,
docsSlug: "dialog"
}), je = ({ titleId: e }) => {
const n = ge(me), t = `\`${n.contentName}\` requires a \`${n.titleName}\` for the component to be accessible for screen reader users.
If you want to hide the \`${n.titleName}\`, you can wrap it with our VisuallyHidden component.
For more information, see https://radix-ui.com/primitives/docs/components/${n.docsSlug}`;
return i.useEffect(() => {
e && (document.getElementById(e) || console.error(t));
}, [t, e]), null;
}, qe = "DialogDescriptionWarning", Be = ({ contentRef: e, descriptionId: n }) => {
const o = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${ge(qe).contentName}}.`;
return i.useEffect(() => {
var r;
const a = (r = e.current) == null ? void 0 : r.getAttribute("aria-describedby");
n && a && (document.getElementById(n) || console.warn(o));
}, [o, e, n]), null;
}, nt = ne, ot = re, rt = se, at = ie, st = ce, it = le, ct = de, ut = ve;
export {
st as C,
le as D,
at as O,
rt as P,
nt as R,
it as T,
tt as W,
se as a,
ut as b,
et as c,
ct as d,
ot as e,
M as u
};