@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
481 lines (475 loc) • 15.1 kB
JavaScript
import * as l from "react";
import { useState as te } from "react";
var S = function() {
return S = Object.assign || function(t) {
for (var n, r = 1, a = arguments.length; r < a; r++) {
n = arguments[r];
for (var c in n) Object.prototype.hasOwnProperty.call(n, c) && (t[c] = n[c]);
}
return t;
}, S.apply(this, arguments);
};
function Q(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 a = 0, r = Object.getOwnPropertySymbols(e); a < r.length; a++)
t.indexOf(r[a]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[a]) && (n[r[a]] = e[r[a]]);
return n;
}
function re(e, t, n) {
if (n || arguments.length === 2) for (var r = 0, a = t.length, c; r < a; r++)
(c || !(r in t)) && (c || (c = Array.prototype.slice.call(t, 0, r)), c[r] = t[r]);
return e.concat(c || Array.prototype.slice.call(t));
}
var x = "right-scroll-bar-position", O = "width-before-scroll-bar", ne = "with-scroll-bars-hidden", ae = "--removed-body-scroll-bar-size";
function W(e, t) {
return typeof e == "function" ? e(t) : e && (e.current = t), e;
}
function oe(e, t) {
var n = te(function() {
return {
// value
value: e,
// last callback
callback: t,
// "memoized" public interface
facade: {
get current() {
return n.value;
},
set current(r) {
var a = n.value;
a !== r && (n.value = r, n.callback(r, a));
}
}
};
})[0];
return n.callback = t, n.facade;
}
var ce = typeof window < "u" ? l.useLayoutEffect : l.useEffect, H = /* @__PURE__ */ new WeakMap();
function ie(e, t) {
var n = oe(null, function(r) {
return e.forEach(function(a) {
return W(a, r);
});
});
return ce(function() {
var r = H.get(n);
if (r) {
var a = new Set(r), c = new Set(e), u = n.current;
a.forEach(function(i) {
c.has(i) || W(i, null);
}), c.forEach(function(i) {
a.has(i) || W(i, u);
});
}
H.set(n, e);
}, [e]), n;
}
function le(e) {
return e;
}
function ue(e, t) {
t === void 0 && (t = le);
var n = [], r = !1, a = {
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(c) {
var u = t(c, r);
return n.push(u), function() {
n = n.filter(function(i) {
return i !== u;
});
};
},
assignSyncMedium: function(c) {
for (r = !0; n.length; ) {
var u = n;
n = [], u.forEach(c);
}
n = {
push: function(i) {
return c(i);
},
filter: function() {
return n;
}
};
},
assignMedium: function(c) {
r = !0;
var u = [];
if (n.length) {
var i = n;
n = [], i.forEach(c), u = n;
}
var m = function() {
var v = u;
u = [], v.forEach(c);
}, g = function() {
return Promise.resolve().then(m);
};
g(), n = {
push: function(v) {
u.push(v), g();
},
filter: function(v) {
return u = u.filter(v), n;
}
};
}
};
return a;
}
function fe(e) {
e === void 0 && (e = {});
var t = ue(null);
return t.options = S({ async: !0, ssr: !1 }, e), t;
}
var _ = function(e) {
var t = e.sideCar, n = Q(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 l.createElement(r, S({}, n));
};
_.isSideCarExport = !0;
function se(e, t) {
return e.useMedium(t), _;
}
var U = fe(), D = function() {
}, A = l.forwardRef(function(e, t) {
var n = l.useRef(null), r = l.useState({
onScrollCapture: D,
onWheelCapture: D,
onTouchMoveCapture: D
}), a = r[0], c = r[1], u = e.forwardProps, i = e.children, m = e.className, g = e.removeScrollBar, v = e.enabled, C = e.shards, k = e.sideCar, E = e.noRelative, R = e.noIsolation, o = e.inert, f = e.allowPinchZoom, h = e.as, s = h === void 0 ? "div" : h, y = e.gapMode, b = Q(e, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]), d = k, w = ie([n, t]), p = S(S({}, b), a);
return l.createElement(
l.Fragment,
null,
v && l.createElement(d, { sideCar: U, removeScrollBar: g, shards: C, noRelative: E, noIsolation: R, inert: o, setCallbacks: c, allowPinchZoom: !!f, lockRef: n, gapMode: y }),
u ? l.cloneElement(l.Children.only(i), S(S({}, p), { ref: w })) : l.createElement(s, S({}, p, { className: m, ref: w }), i)
);
});
A.defaultProps = {
enabled: !0,
removeScrollBar: !0,
inert: !1
};
A.classNames = {
fullWidth: O,
zeroRight: x
};
var de = function() {
if (typeof __webpack_nonce__ < "u")
return __webpack_nonce__;
};
function ve() {
if (!document)
return null;
var e = document.createElement("style");
e.type = "text/css";
var t = de();
return t && e.setAttribute("nonce", t), e;
}
function he(e, t) {
e.styleSheet ? e.styleSheet.cssText = t : e.appendChild(document.createTextNode(t));
}
function me(e) {
var t = document.head || document.getElementsByTagName("head")[0];
t.appendChild(e);
}
var ge = function() {
var e = 0, t = null;
return {
add: function(n) {
e == 0 && (t = ve()) && (he(t, n), me(t)), e++;
},
remove: function() {
e--, !e && t && (t.parentNode && t.parentNode.removeChild(t), t = null);
}
};
}, ye = function() {
var e = ge();
return function(t, n) {
l.useEffect(function() {
return e.add(t), function() {
e.remove();
};
}, [t && n]);
};
}, K = function() {
var e = ye(), t = function(n) {
var r = n.styles, a = n.dynamic;
return e(r, a), null;
};
return t;
}, Se = {
left: 0,
top: 0,
right: 0,
gap: 0
}, X = function(e) {
return parseInt(e || "", 10) || 0;
}, be = function(e) {
var t = window.getComputedStyle(document.body), n = t[e === "padding" ? "paddingLeft" : "marginLeft"], r = t[e === "padding" ? "paddingTop" : "marginTop"], a = t[e === "padding" ? "paddingRight" : "marginRight"];
return [X(n), X(r), X(a)];
}, we = function(e) {
if (e === void 0 && (e = "margin"), typeof window > "u")
return Se;
var t = be(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])
};
}, pe = K(), T = "data-scroll-locked", Ce = function(e, t, n, r) {
var a = e.left, c = e.top, u = e.right, i = e.gap;
return n === void 0 && (n = "margin"), `
.`.concat(ne, ` {
overflow: hidden `).concat(r, `;
padding-right: `).concat(i, "px ").concat(r, `;
}
body[`).concat(T, `] {
overflow: hidden `).concat(r, `;
overscroll-behavior: contain;
`).concat([
t && "position: relative ".concat(r, ";"),
n === "margin" && `
padding-left: `.concat(a, `px;
padding-top: `).concat(c, `px;
padding-right: `).concat(u, `px;
margin-left:0;
margin-top:0;
margin-right: `).concat(i, "px ").concat(r, `;
`),
n === "padding" && "padding-right: ".concat(i, "px ").concat(r, ";")
].filter(Boolean).join(""), `
}
.`).concat(x, ` {
right: `).concat(i, "px ").concat(r, `;
}
.`).concat(O, ` {
margin-right: `).concat(i, "px ").concat(r, `;
}
.`).concat(x, " .").concat(x, ` {
right: 0 `).concat(r, `;
}
.`).concat(O, " .").concat(O, ` {
margin-right: 0 `).concat(r, `;
}
body[`).concat(T, `] {
`).concat(ae, ": ").concat(i, `px;
}
`);
}, F = function() {
var e = parseInt(document.body.getAttribute(T) || "0", 10);
return isFinite(e) ? e : 0;
}, Ee = function() {
l.useEffect(function() {
return document.body.setAttribute(T, (F() + 1).toString()), function() {
var e = F() - 1;
e <= 0 ? document.body.removeAttribute(T) : document.body.setAttribute(T, e.toString());
};
}, []);
}, Re = function(e) {
var t = e.noRelative, n = e.noImportant, r = e.gapMode, a = r === void 0 ? "margin" : r;
Ee();
var c = l.useMemo(function() {
return we(a);
}, [a]);
return l.createElement(pe, { styles: Ce(c, !t, a, n ? "" : "!important") });
}, Y = !1;
if (typeof window < "u")
try {
var L = Object.defineProperty({}, "passive", {
get: function() {
return Y = !0, !0;
}
});
window.addEventListener("test", L, L), window.removeEventListener("test", L, L);
} catch {
Y = !1;
}
var P = Y ? { passive: !1 } : !1, ke = function(e) {
return e.tagName === "TEXTAREA";
}, $ = 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 && !ke(e) && n[t] === "visible")
);
}, Pe = function(e) {
return $(e, "overflowY");
}, Ne = function(e) {
return $(e, "overflowX");
}, z = function(e, t) {
var n = t.ownerDocument, r = t;
do {
typeof ShadowRoot < "u" && r instanceof ShadowRoot && (r = r.host);
var a = q(e, r);
if (a) {
var c = J(e, r), u = c[1], i = c[2];
if (u > i)
return !0;
}
r = r.parentNode;
} while (r && r !== n.body);
return !1;
}, Te = function(e) {
var t = e.scrollTop, n = e.scrollHeight, r = e.clientHeight;
return [
t,
n,
r
];
}, Me = function(e) {
var t = e.scrollLeft, n = e.scrollWidth, r = e.clientWidth;
return [
t,
n,
r
];
}, q = function(e, t) {
return e === "v" ? Pe(t) : Ne(t);
}, J = function(e, t) {
return e === "v" ? Te(t) : Me(t);
}, Le = function(e, t) {
return e === "h" && t === "rtl" ? -1 : 1;
}, Be = function(e, t, n, r, a) {
var c = Le(e, window.getComputedStyle(t).direction), u = c * r, i = n.target, m = t.contains(i), g = !1, v = u > 0, C = 0, k = 0;
do {
if (!i)
break;
var E = J(e, i), R = E[0], o = E[1], f = E[2], h = o - f - c * R;
(R || h) && q(e, i) && (C += h, k += R);
var s = i.parentNode;
i = s && s.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? s.host : s;
} while (
// portaled content
!m && i !== document.body || // self content
m && (t.contains(i) || t === i)
);
return (v && Math.abs(C) < 1 || !v && Math.abs(k) < 1) && (g = !0), g;
}, B = function(e) {
return "changedTouches" in e ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [0, 0];
}, Z = function(e) {
return [e.deltaX, e.deltaY];
}, G = function(e) {
return e && "current" in e ? e.current : e;
}, xe = function(e, t) {
return e[0] === t[0] && e[1] === t[1];
}, Oe = function(e) {
return `
.block-interactivity-`.concat(e, ` {pointer-events: none;}
.allow-interactivity-`).concat(e, ` {pointer-events: all;}
`);
}, Ae = 0, N = [];
function Ie(e) {
var t = l.useRef([]), n = l.useRef([0, 0]), r = l.useRef(), a = l.useState(Ae++)[0], c = l.useState(K)[0], u = l.useRef(e);
l.useEffect(function() {
u.current = e;
}, [e]), l.useEffect(function() {
if (e.inert) {
document.body.classList.add("block-interactivity-".concat(a));
var o = re([e.lockRef.current], (e.shards || []).map(G), !0).filter(Boolean);
return o.forEach(function(f) {
return f.classList.add("allow-interactivity-".concat(a));
}), function() {
document.body.classList.remove("block-interactivity-".concat(a)), o.forEach(function(f) {
return f.classList.remove("allow-interactivity-".concat(a));
});
};
}
}, [e.inert, e.lockRef.current, e.shards]);
var i = l.useCallback(function(o, f) {
if ("touches" in o && o.touches.length === 2 || o.type === "wheel" && o.ctrlKey)
return !u.current.allowPinchZoom;
var h = B(o), s = n.current, y = "deltaX" in o ? o.deltaX : s[0] - h[0], b = "deltaY" in o ? o.deltaY : s[1] - h[1], d, w = o.target, p = Math.abs(y) > Math.abs(b) ? "h" : "v";
if ("touches" in o && p === "h" && w.type === "range")
return !1;
var j = window.getSelection(), I = j && j.anchorNode, ee = I ? I === w || I.contains(w) : !1;
if (ee)
return !1;
var M = z(p, w);
if (!M)
return !0;
if (M ? d = p : (d = p === "v" ? "h" : "v", M = z(p, w)), !M)
return !1;
if (!r.current && "changedTouches" in o && (y || b) && (r.current = d), !d)
return !0;
var V = r.current || d;
return Be(V, f, o, V === "h" ? y : b);
}, []), m = l.useCallback(function(o) {
var f = o;
if (!(!N.length || N[N.length - 1] !== c)) {
var h = "deltaY" in f ? Z(f) : B(f), s = t.current.filter(function(d) {
return d.name === f.type && (d.target === f.target || f.target === d.shadowParent) && xe(d.delta, h);
})[0];
if (s && s.should) {
f.cancelable && f.preventDefault();
return;
}
if (!s) {
var y = (u.current.shards || []).map(G).filter(Boolean).filter(function(d) {
return d.contains(f.target);
}), b = y.length > 0 ? i(f, y[0]) : !u.current.noIsolation;
b && f.cancelable && f.preventDefault();
}
}
}, []), g = l.useCallback(function(o, f, h, s) {
var y = { name: o, delta: f, target: h, should: s, shadowParent: We(h) };
t.current.push(y), setTimeout(function() {
t.current = t.current.filter(function(b) {
return b !== y;
});
}, 1);
}, []), v = l.useCallback(function(o) {
n.current = B(o), r.current = void 0;
}, []), C = l.useCallback(function(o) {
g(o.type, Z(o), o.target, i(o, e.lockRef.current));
}, []), k = l.useCallback(function(o) {
g(o.type, B(o), o.target, i(o, e.lockRef.current));
}, []);
l.useEffect(function() {
return N.push(c), e.setCallbacks({
onScrollCapture: C,
onWheelCapture: C,
onTouchMoveCapture: k
}), document.addEventListener("wheel", m, P), document.addEventListener("touchmove", m, P), document.addEventListener("touchstart", v, P), function() {
N = N.filter(function(o) {
return o !== c;
}), document.removeEventListener("wheel", m, P), document.removeEventListener("touchmove", m, P), document.removeEventListener("touchstart", v, P);
};
}, []);
var E = e.removeScrollBar, R = e.inert;
return l.createElement(
l.Fragment,
null,
R ? l.createElement(c, { styles: Oe(a) }) : null,
E ? l.createElement(Re, { noRelative: e.noRelative, gapMode: e.gapMode }) : null
);
}
function We(e) {
for (var t = null; e !== null; )
e instanceof ShadowRoot && (t = e.host, e = e.host), e = e.parentNode;
return t;
}
const De = se(U, Ie);
var Xe = l.forwardRef(function(e, t) {
return l.createElement(A, S({}, e, { ref: t, sideCar: De }));
});
Xe.classNames = A.classNames;
export {
Xe as R
};