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