@voilajsx/uikit
Version:
Cross-platform React components with beautiful themes and OKLCH color sciences - Now with mobile (Capacitor) support
675 lines (669 loc) • 22.2 kB
JavaScript
import * as u from "react";
import { useState as he } from "react";
import { u as me } from "./index-DQH6odE9.js";
import { P as pe } from "./index-BVRIAMfe.js";
import { u as z } from "./index-0ioNhtNM.js";
import { jsx as ge } from "react/jsx-runtime";
var U = 0;
function gt() {
u.useEffect(() => {
const e = document.querySelectorAll("[data-radix-focus-guard]");
return document.body.insertAdjacentElement("afterbegin", e[0] ?? Z()), document.body.insertAdjacentElement("beforeend", e[1] ?? Z()), U++, () => {
U === 1 && document.querySelectorAll("[data-radix-focus-guard]").forEach((t) => t.remove()), U--;
};
}, []);
}
function Z() {
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 _ = "focusScope.autoFocusOnMount", j = "focusScope.autoFocusOnUnmount", q = { bubbles: !1, cancelable: !0 }, ye = "FocusScope", be = u.forwardRef((e, t) => {
const {
loop: n = !1,
trapped: r = !1,
onMountAutoFocus: c,
onUnmountAutoFocus: i,
...s
} = e, [a, S] = u.useState(null), b = z(c), g = z(i), f = u.useRef(null), v = me(t, (o) => S(o)), h = u.useRef({
paused: !1,
pause() {
this.paused = !0;
},
resume() {
this.paused = !1;
}
}).current;
u.useEffect(() => {
if (r) {
let o = function(p) {
if (h.paused || !a) return;
const y = p.target;
a.contains(y) ? f.current = y : k(f.current, { select: !0 });
}, l = 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 E of p)
E.removedNodes.length > 0 && k(a);
};
document.addEventListener("focusin", o), document.addEventListener("focusout", l);
const m = new MutationObserver(d);
return a && m.observe(a, { childList: !0, subtree: !0 }), () => {
document.removeEventListener("focusin", o), document.removeEventListener("focusout", l), m.disconnect();
};
}
}, [r, a, h.paused]), u.useEffect(() => {
if (a) {
$.add(h);
const o = document.activeElement;
if (!a.contains(o)) {
const d = new CustomEvent(_, q);
a.addEventListener(_, b), a.dispatchEvent(d), d.defaultPrevented || (Ee(ke(oe(a)), { select: !0 }), document.activeElement === o && k(a));
}
return () => {
a.removeEventListener(_, b), setTimeout(() => {
const d = new CustomEvent(j, q);
a.addEventListener(j, g), a.dispatchEvent(d), d.defaultPrevented || k(o ?? document.body, { select: !0 }), a.removeEventListener(j, g), $.remove(h);
}, 0);
};
}
}, [a, b, g, h]);
const w = u.useCallback(
(o) => {
if (!n && !r || h.paused) return;
const l = o.key === "Tab" && !o.altKey && !o.ctrlKey && !o.metaKey, d = document.activeElement;
if (l && d) {
const m = o.currentTarget, [p, y] = Se(m);
p && y ? !o.shiftKey && d === y ? (o.preventDefault(), n && k(p, { select: !0 })) : o.shiftKey && d === p && (o.preventDefault(), n && k(y, { select: !0 })) : d === m && o.preventDefault();
}
},
[n, r, h.paused]
);
return /* @__PURE__ */ ge(pe.div, { tabIndex: -1, ...s, ref: v, onKeyDown: w });
});
be.displayName = ye;
function Ee(e, { select: t = !1 } = {}) {
const n = document.activeElement;
for (const r of e)
if (k(r, { select: t }), document.activeElement !== n) return;
}
function Se(e) {
const t = oe(e), n = Q(t, e), r = Q(t.reverse(), e);
return [n, r];
}
function oe(e) {
const t = [], n = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
acceptNode: (r) => {
const c = r.tagName === "INPUT" && r.type === "hidden";
return r.disabled || r.hidden || c ? 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 (!we(n, { upTo: t })) return n;
}
function we(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 Ce(e) {
return e instanceof HTMLInputElement && "select" in e;
}
function k(e, { select: t = !1 } = {}) {
if (e && e.focus) {
const n = document.activeElement;
e.focus({ preventScroll: !0 }), e !== n && Ce(e) && t && e.select();
}
}
var $ = Re();
function Re() {
let e = [];
return {
add(t) {
const n = e[0];
t !== n && n?.pause(), e = J(e, t), e.unshift(t);
},
remove(t) {
e = J(e, t), e[0]?.resume();
}
};
}
function J(e, t) {
const n = [...e], r = n.indexOf(t);
return r !== -1 && n.splice(r, 1), n;
}
function ke(e) {
return e.filter((t) => t.tagName !== "A");
}
var Ae = function(e) {
if (typeof document > "u")
return null;
var t = Array.isArray(e) ? e[0] : e;
return t.ownerDocument.body;
}, T = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), L = {}, K = 0, ce = function(e) {
return e && (e.host || ce(e.parentNode));
}, Te = function(e, t) {
return t.map(function(n) {
if (e.contains(n))
return n;
var r = ce(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;
});
}, Ne = function(e, t, n, r) {
var c = Te(t, Array.isArray(e) ? e : [e]);
L[n] || (L[n] = /* @__PURE__ */ new WeakMap());
var i = L[n], s = [], a = /* @__PURE__ */ new Set(), S = new Set(c), b = function(f) {
!f || a.has(f) || (a.add(f), b(f.parentNode));
};
c.forEach(b);
var g = function(f) {
!f || S.has(f) || Array.prototype.forEach.call(f.children, function(v) {
if (a.has(v))
g(v);
else
try {
var h = v.getAttribute(r), w = h !== null && h !== "false", o = (T.get(v) || 0) + 1, l = (i.get(v) || 0) + 1;
T.set(v, o), i.set(v, l), s.push(v), o === 1 && w && O.set(v, !0), l === 1 && v.setAttribute(n, "true"), w || v.setAttribute(r, "true");
} catch (d) {
console.error("aria-hidden: cannot operate on ", v, d);
}
});
};
return g(t), a.clear(), K++, function() {
s.forEach(function(f) {
var v = T.get(f) - 1, h = i.get(f) - 1;
T.set(f, v), i.set(f, h), v || (O.has(f) || f.removeAttribute(r), O.delete(f)), h || f.removeAttribute(n);
}), K--, K || (T = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), L = {});
};
}, yt = function(e, t, n) {
n === void 0 && (n = "data-aria-hidden");
var r = Array.from(Array.isArray(e) ? e : [e]), c = Ae(e);
return c ? (r.push.apply(r, Array.from(c.querySelectorAll("[aria-live], script"))), Ne(r, c, n, "aria-hidden")) : function() {
return null;
};
}, C = function() {
return C = Object.assign || function(t) {
for (var n, r = 1, c = arguments.length; r < c; r++) {
n = arguments[r];
for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
}
return t;
}, C.apply(this, arguments);
};
function ue(e, t) {
var n = {};
for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
if (e != null && typeof Object.getOwnPropertySymbols == "function")
for (var c = 0, r = Object.getOwnPropertySymbols(e); c < r.length; c++)
t.indexOf(r[c]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[c]) && (n[r[c]] = e[r[c]]);
return n;
}
function Me(e, t, n) {
if (n || arguments.length === 2) for (var r = 0, c = t.length, i; r < c; r++)
(i || !(r in t)) && (i || (i = Array.prototype.slice.call(t, 0, r)), i[r] = t[r]);
return e.concat(i || Array.prototype.slice.call(t));
}
var W = "right-scroll-bar-position", B = "width-before-scroll-bar", Fe = "with-scroll-bars-hidden", Pe = "--removed-body-scroll-bar-size";
function H(e, t) {
return typeof e == "function" ? e(t) : e && (e.current = t), e;
}
function Oe(e, t) {
var n = he(function() {
return {
// value
value: e,
// last callback
callback: t,
// "memoized" public interface
facade: {
get current() {
return n.value;
},
set current(r) {
var c = n.value;
c !== r && (n.value = r, n.callback(r, c));
}
}
};
})[0];
return n.callback = t, n.facade;
}
var Le = typeof window < "u" ? u.useLayoutEffect : u.useEffect, ee = /* @__PURE__ */ new WeakMap();
function Ie(e, t) {
var n = Oe(null, function(r) {
return e.forEach(function(c) {
return H(c, r);
});
});
return Le(function() {
var r = ee.get(n);
if (r) {
var c = new Set(r), i = new Set(e), s = n.current;
c.forEach(function(a) {
i.has(a) || H(a, null);
}), i.forEach(function(a) {
c.has(a) || H(a, s);
});
}
ee.set(n, e);
}, [e]), n;
}
function xe(e) {
return e;
}
function We(e, t) {
t === void 0 && (t = xe);
var n = [], r = !1, c = {
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 s = t(i, r);
return n.push(s), function() {
n = n.filter(function(a) {
return a !== s;
});
};
},
assignSyncMedium: function(i) {
for (r = !0; n.length; ) {
var s = n;
n = [], s.forEach(i);
}
n = {
push: function(a) {
return i(a);
},
filter: function() {
return n;
}
};
},
assignMedium: function(i) {
r = !0;
var s = [];
if (n.length) {
var a = n;
n = [], a.forEach(i), s = n;
}
var S = function() {
var g = s;
s = [], g.forEach(i);
}, b = function() {
return Promise.resolve().then(S);
};
b(), n = {
push: function(g) {
s.push(g), b();
},
filter: function(g) {
return s = s.filter(g), n;
}
};
}
};
return c;
}
function Be(e) {
e === void 0 && (e = {});
var t = We(null);
return t.options = C({ async: !0, ssr: !1 }, e), t;
}
var ie = 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 u.createElement(r, C({}, n));
};
ie.isSideCarExport = !0;
function De(e, t) {
return e.useMedium(t), ie;
}
var le = Be(), V = function() {
}, D = u.forwardRef(function(e, t) {
var n = u.useRef(null), r = u.useState({
onScrollCapture: V,
onWheelCapture: V,
onTouchMoveCapture: V
}), c = r[0], i = r[1], s = e.forwardProps, a = e.children, S = e.className, b = e.removeScrollBar, g = e.enabled, f = e.shards, v = e.sideCar, h = e.noRelative, w = e.noIsolation, o = e.inert, l = 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"]), E = v, A = Ie([n, t]), R = C(C({}, y), c);
return u.createElement(
u.Fragment,
null,
g && u.createElement(E, { sideCar: le, removeScrollBar: b, shards: f, noRelative: h, noIsolation: w, inert: o, setCallbacks: i, allowPinchZoom: !!l, lockRef: n, gapMode: p }),
s ? u.cloneElement(u.Children.only(a), C(C({}, R), { ref: A })) : u.createElement(m, C({}, R, { className: S, ref: A }), 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 _e() {
if (!document)
return null;
var e = document.createElement("style");
e.type = "text/css";
var t = Ue();
return t && e.setAttribute("nonce", t), e;
}
function je(e, t) {
e.styleSheet ? e.styleSheet.cssText = t : e.appendChild(document.createTextNode(t));
}
function Ke(e) {
var t = document.head || document.getElementsByTagName("head")[0];
t.appendChild(e);
}
var He = function() {
var e = 0, t = null;
return {
add: function(n) {
e == 0 && (t = _e()) && (je(t, n), Ke(t)), e++;
},
remove: function() {
e--, !e && t && (t.parentNode && t.parentNode.removeChild(t), t = null);
}
};
}, Ve = function() {
var e = He();
return function(t, n) {
u.useEffect(function() {
return e.add(t), function() {
e.remove();
};
}, [t && n]);
};
}, se = function() {
var e = Ve(), t = function(n) {
var r = n.styles, c = n.dynamic;
return e(r, c), null;
};
return t;
}, Xe = {
left: 0,
top: 0,
right: 0,
gap: 0
}, X = function(e) {
return parseInt(e || "", 10) || 0;
}, Ye = function(e) {
var t = window.getComputedStyle(document.body), n = t[e === "padding" ? "paddingLeft" : "marginLeft"], r = t[e === "padding" ? "paddingTop" : "marginTop"], c = t[e === "padding" ? "paddingRight" : "marginRight"];
return [X(n), X(r), X(c)];
}, Ge = function(e) {
if (e === void 0 && (e = "margin"), typeof window > "u")
return Xe;
var t = Ye(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 = se(), F = "data-scroll-locked", Ze = function(e, t, n, r) {
var c = e.left, i = e.top, s = 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(F, `] {
overflow: hidden `).concat(r, `;
overscroll-behavior: contain;
`).concat([
t && "position: relative ".concat(r, ";"),
n === "margin" && `
padding-left: `.concat(c, `px;
padding-top: `).concat(i, `px;
padding-right: `).concat(s, `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(F, `] {
`).concat(Pe, ": ").concat(a, `px;
}
`);
}, te = function() {
var e = parseInt(document.body.getAttribute(F) || "0", 10);
return isFinite(e) ? e : 0;
}, qe = function() {
u.useEffect(function() {
return document.body.setAttribute(F, (te() + 1).toString()), function() {
var e = te() - 1;
e <= 0 ? document.body.removeAttribute(F) : document.body.setAttribute(F, e.toString());
};
}, []);
}, Qe = function(e) {
var t = e.noRelative, n = e.noImportant, r = e.gapMode, c = r === void 0 ? "margin" : r;
qe();
var i = u.useMemo(function() {
return Ge(c);
}, [c]);
return u.createElement(ze, { styles: Ze(i, !t, c, n ? "" : "!important") });
}, Y = !1;
if (typeof window < "u")
try {
var I = Object.defineProperty({}, "passive", {
get: function() {
return Y = !0, !0;
}
});
window.addEventListener("test", I, I), window.removeEventListener("test", I, I);
} catch {
Y = !1;
}
var N = Y ? { passive: !1 } : !1, $e = function(e) {
return e.tagName === "TEXTAREA";
}, fe = 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 && !$e(e) && n[t] === "visible")
);
}, Je = function(e) {
return fe(e, "overflowY");
}, et = function(e) {
return fe(e, "overflowX");
}, ne = function(e, t) {
var n = t.ownerDocument, r = t;
do {
typeof ShadowRoot < "u" && r instanceof ShadowRoot && (r = r.host);
var c = de(e, r);
if (c) {
var i = ve(e, r), s = i[1], a = i[2];
if (s > a)
return !0;
}
r = r.parentNode;
} while (r && r !== n.body);
return !1;
}, tt = function(e) {
var t = e.scrollTop, n = e.scrollHeight, r = e.clientHeight;
return [
t,
n,
r
];
}, nt = function(e) {
var t = e.scrollLeft, n = e.scrollWidth, r = e.clientWidth;
return [
t,
n,
r
];
}, de = function(e, t) {
return e === "v" ? Je(t) : et(t);
}, ve = function(e, t) {
return e === "v" ? tt(t) : nt(t);
}, rt = function(e, t) {
return e === "h" && t === "rtl" ? -1 : 1;
}, at = function(e, t, n, r, c) {
var i = rt(e, window.getComputedStyle(t).direction), s = i * r, a = n.target, S = t.contains(a), b = !1, g = s > 0, f = 0, v = 0;
do {
if (!a)
break;
var h = ve(e, a), w = h[0], o = h[1], l = h[2], d = o - l - i * 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
!S && a !== document.body || // self content
S && (t.contains(a) || t === a)
);
return (g && Math.abs(f) < 1 || !g && Math.abs(v) < 1) && (b = !0), b;
}, x = 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;
}, ot = function(e, t) {
return e[0] === t[0] && e[1] === t[1];
}, ct = function(e) {
return `
.block-interactivity-`.concat(e, ` {pointer-events: none;}
.allow-interactivity-`).concat(e, ` {pointer-events: all;}
`);
}, ut = 0, M = [];
function it(e) {
var t = u.useRef([]), n = u.useRef([0, 0]), r = u.useRef(), c = u.useState(ut++)[0], i = u.useState(se)[0], s = u.useRef(e);
u.useEffect(function() {
s.current = e;
}, [e]), u.useEffect(function() {
if (e.inert) {
document.body.classList.add("block-interactivity-".concat(c));
var o = Me([e.lockRef.current], (e.shards || []).map(ae), !0).filter(Boolean);
return o.forEach(function(l) {
return l.classList.add("allow-interactivity-".concat(c));
}), function() {
document.body.classList.remove("block-interactivity-".concat(c)), o.forEach(function(l) {
return l.classList.remove("allow-interactivity-".concat(c));
});
};
}
}, [e.inert, e.lockRef.current, e.shards]);
var a = u.useCallback(function(o, l) {
if ("touches" in o && o.touches.length === 2 || o.type === "wheel" && o.ctrlKey)
return !s.current.allowPinchZoom;
var d = x(o), m = n.current, p = "deltaX" in o ? o.deltaX : m[0] - d[0], y = "deltaY" in o ? o.deltaY : m[1] - d[1], E, A = o.target, R = Math.abs(p) > Math.abs(y) ? "h" : "v";
if ("touches" in o && R === "h" && A.type === "range")
return !1;
var P = ne(R, A);
if (!P)
return !0;
if (P ? E = R : (E = R === "v" ? "h" : "v", P = ne(R, A)), !P)
return !1;
if (!r.current && "changedTouches" in o && (p || y) && (r.current = E), !E)
return !0;
var G = r.current || E;
return at(G, l, o, G === "h" ? p : y);
}, []), S = u.useCallback(function(o) {
var l = o;
if (!(!M.length || M[M.length - 1] !== i)) {
var d = "deltaY" in l ? re(l) : x(l), m = t.current.filter(function(E) {
return E.name === l.type && (E.target === l.target || l.target === E.shadowParent) && ot(E.delta, d);
})[0];
if (m && m.should) {
l.cancelable && l.preventDefault();
return;
}
if (!m) {
var p = (s.current.shards || []).map(ae).filter(Boolean).filter(function(E) {
return E.contains(l.target);
}), y = p.length > 0 ? a(l, p[0]) : !s.current.noIsolation;
y && l.cancelable && l.preventDefault();
}
}
}, []), b = u.useCallback(function(o, l, d, m) {
var p = { name: o, delta: l, target: d, should: m, shadowParent: lt(d) };
t.current.push(p), setTimeout(function() {
t.current = t.current.filter(function(y) {
return y !== p;
});
}, 1);
}, []), g = u.useCallback(function(o) {
n.current = x(o), r.current = void 0;
}, []), f = u.useCallback(function(o) {
b(o.type, re(o), o.target, a(o, e.lockRef.current));
}, []), v = u.useCallback(function(o) {
b(o.type, x(o), o.target, a(o, e.lockRef.current));
}, []);
u.useEffect(function() {
return M.push(i), e.setCallbacks({
onScrollCapture: f,
onWheelCapture: f,
onTouchMoveCapture: v
}), document.addEventListener("wheel", S, N), document.addEventListener("touchmove", S, N), document.addEventListener("touchstart", g, N), function() {
M = M.filter(function(o) {
return o !== i;
}), document.removeEventListener("wheel", S, N), document.removeEventListener("touchmove", S, N), document.removeEventListener("touchstart", g, N);
};
}, []);
var h = e.removeScrollBar, w = e.inert;
return u.createElement(
u.Fragment,
null,
w ? u.createElement(i, { styles: ct(c) }) : null,
h ? u.createElement(Qe, { noRelative: e.noRelative, gapMode: e.gapMode }) : null
);
}
function lt(e) {
for (var t = null; e !== null; )
e instanceof ShadowRoot && (t = e.host, e = e.host), e = e.parentNode;
return t;
}
const st = De(le, it);
var ft = u.forwardRef(function(e, t) {
return u.createElement(D, C({}, e, { ref: t, sideCar: st }));
});
ft.classNames = D.classNames;
export {
be as F,
ft as R,
yt as h,
gt as u
};
//# sourceMappingURL=Combination-C0DFrmJW.js.map