@dynamix-layout/react
Version:
A powerful React component for creating dynamic, resizable, and draggable layouts.
1,108 lines (1,107 loc) • 36.3 kB
JavaScript
import $, { useState as we, useEffect as je, forwardRef as le, useMemo as Me, useRef as Ye, useCallback as Fe } from "react";
import { DynamixLayoutCore as M, Node as j } from "@dynamix-layout/core";
var De = { exports: {} }, Ee = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var _e;
function ze() {
if (_e) return Ee;
_e = 1;
var p = Symbol.for("react.transitional.element"), l = Symbol.for("react.fragment");
function d(b, v, T) {
var h = null;
if (T !== void 0 && (h = "" + T), v.key !== void 0 && (h = "" + v.key), "key" in v) {
T = {};
for (var W in v)
W !== "key" && (T[W] = v[W]);
} else T = v;
return v = T.ref, {
$$typeof: p,
type: b,
key: h,
ref: v !== void 0 ? v : null,
props: T
};
}
return Ee.Fragment = l, Ee.jsx = d, Ee.jsxs = d, Ee;
}
var Re = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Oe;
function Be() {
return Oe || (Oe = 1, process.env.NODE_ENV !== "production" && function() {
function p(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === he ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case q:
return "Fragment";
case X:
return "Profiler";
case B:
return "StrictMode";
case me:
return "Suspense";
case ue:
return "SuspenseList";
case pe:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case de:
return "Portal";
case N:
return (e.displayName || "Context") + ".Provider";
case P:
return (e._context.displayName || "Context") + ".Consumer";
case Y:
var a = e.render;
return e = e.displayName, e || (e = a.displayName || a.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case fe:
return a = e.displayName || null, a !== null ? a : p(e.type) || "Memo";
case ae:
a = e._payload, e = e._init;
try {
return p(e(a));
} catch {
}
}
return null;
}
function l(e) {
return "" + e;
}
function d(e) {
try {
l(e);
var a = !1;
} catch {
a = !0;
}
if (a) {
a = console;
var g = a.error, w = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return g.call(
a,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
w
), l(e);
}
}
function b(e) {
if (e === q) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === ae)
return "<...>";
try {
var a = p(e);
return a ? "<" + a + ">" : "<...>";
} catch {
return "<...>";
}
}
function v() {
var e = C.A;
return e === null ? null : e.getOwner();
}
function T() {
return Error("react-stack-top-frame");
}
function h(e) {
if (_.call(e, "key")) {
var a = Object.getOwnPropertyDescriptor(e, "key").get;
if (a && a.isReactWarning) return !1;
}
return e.key !== void 0;
}
function W(e, a) {
function g() {
c || (c = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
a
));
}
g.isReactWarning = !0, Object.defineProperty(e, "key", {
get: g,
configurable: !0
});
}
function ee() {
var e = p(this.type);
return A[e] || (A[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function te(e, a, g, w, L, O, V, I) {
return g = O.ref, e = {
$$typeof: oe,
type: e,
key: a,
props: O,
_owner: L
}, (g !== void 0 ? g : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: ee
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: V
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: I
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function re(e, a, g, w, L, O, V, I) {
var R = a.children;
if (R !== void 0)
if (w)
if (ge(R)) {
for (w = 0; w < R.length; w++)
ne(R[w]);
Object.freeze && Object.freeze(R);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else ne(R);
if (_.call(a, "key")) {
R = p(e);
var F = Object.keys(a).filter(function(ye) {
return ye !== "key";
});
w = 0 < F.length ? "{key: someKey, " + F.join(": ..., ") + ": ...}" : "{key: someKey}", J[R + w] || (F = 0 < F.length ? "{" + F.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
w,
R,
F,
R
), J[R + w] = !0);
}
if (R = null, g !== void 0 && (d(g), R = "" + g), h(a) && (d(a.key), R = "" + a.key), "key" in a) {
g = {};
for (var z in a)
z !== "key" && (g[z] = a[z]);
} else g = a;
return R && W(
g,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), te(
e,
R,
O,
L,
v(),
g,
V,
I
);
}
function ne(e) {
typeof e == "object" && e !== null && e.$$typeof === oe && e._store && (e._store.validated = 1);
}
var H = $, oe = Symbol.for("react.transitional.element"), de = Symbol.for("react.portal"), q = Symbol.for("react.fragment"), B = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), P = Symbol.for("react.consumer"), N = Symbol.for("react.context"), Y = Symbol.for("react.forward_ref"), me = Symbol.for("react.suspense"), ue = Symbol.for("react.suspense_list"), fe = Symbol.for("react.memo"), ae = Symbol.for("react.lazy"), pe = Symbol.for("react.activity"), he = Symbol.for("react.client.reference"), C = H.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _ = Object.prototype.hasOwnProperty, ge = Array.isArray, se = console.createTask ? console.createTask : function() {
return null;
};
H = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var c, A = {}, U = H["react-stack-bottom-frame"].bind(
H,
T
)(), ie = se(b(T)), J = {};
Re.Fragment = q, Re.jsx = function(e, a, g, w, L) {
var O = 1e4 > C.recentlyCreatedOwnerStacks++;
return re(
e,
a,
g,
!1,
w,
L,
O ? Error("react-stack-top-frame") : U,
O ? se(b(e)) : ie
);
}, Re.jsxs = function(e, a, g, w, L) {
var O = 1e4 > C.recentlyCreatedOwnerStacks++;
return re(
e,
a,
g,
!0,
w,
L,
O ? Error("react-stack-top-frame") : U,
O ? se(b(e)) : ie
);
};
}()), Re;
}
var ke;
function Ue() {
return ke || (ke = 1, process.env.NODE_ENV === "production" ? De.exports = ze() : De.exports = Be()), De.exports;
}
var f = Ue();
const He = ({
tabOutput: p,
rootId: l,
layoutTree: d,
updateJSON: b,
dimensions: v,
tabHeadHeight: T,
enableTabbar: h,
bondWidth: W,
minTabHeight: ee,
minTabWidth: te,
sliderUpdateTimeout: re,
windowResizeTimeout: ne,
disableSliderTimeout: H,
disableResizeTimeout: oe
}) => {
const de = $.useRef(/* @__PURE__ */ new Map()), q = $.useRef(/* @__PURE__ */ new Map()), B = $.useRef(/* @__PURE__ */ new Map()), X = $.useRef(/* @__PURE__ */ new Map()), P = $.useRef(null), N = $.useRef([]), [Y, me] = we(
d
), [ue, fe] = we(), [ae, pe] = we(), [he, C] = we(!1), _ = $.useRef(null), [ge, se] = we(!1), c = $.useRef({
src: void 0,
des: void 0,
area: void 0,
drag: !1
}), A = $.useRef({
sliderId: void 0,
isSliding: !1
}), U = $.useMemo(() => (M._bond = W, M._minH = ee, M._minW = te, new M({
tabs: p.keys,
tree: Y,
minW: te,
minH: ee,
bond: W,
uqid: l,
tabsIds: p.name
})), [Y, p, W, ee, te, l]), ie = (n) => {
const t = new Map(n);
fe(t);
}, J = (n) => {
const t = new Map(n);
pe(t);
};
j.cache.nodOpts.onChange((n) => {
n.forEach((t, i) => {
const r = B.current.get(i);
r && (r.style.width = `${t.nodDims.w}px`, r.style.height = `${t.nodDims.h}px`, r.style.left = `${t.nodDims.x}px`, r.style.top = `${t.nodDims.y}px`);
const u = de.current.get(i);
u && h && (u.style.width = `${t.nodDims.w}px`, u.style.height = h ? `${T}px` : "0px", u.style.left = `${t.nodDims.x}px`, u.style.top = `${t.nodDims.y}px`);
});
}), j.cache.bndOpts.onChange((n) => {
n.forEach((t, i) => {
const r = q.current.get(i);
r && (r.style.width = `${t.nodDims.w}px`, r.style.height = `${t.nodDims.h}px`, r.style.left = `${t.nodDims.x}px`, r.style.top = `${t.nodDims.y}px`);
});
}), j.cache.tabOpts.onChange((n) => {
n.forEach((t, i) => {
const r = X.current.get(i);
r && (r.style.width = `${t.nodDims.w}px`, r.style.height = h ? `${t.nodDims.h - T}px` : `${t.nodDims.h}px`, r.style.left = `${t.nodDims.x}px`, r.style.top = h ? `${t.nodDims.y + T}px` : `${t.nodDims.y}px`, r.style.display = t.nodOpen ? "block" : "none");
});
});
const e = (n) => {
A.current.isSliding && U.updateSlider(
A.current.sliderId,
{
x: n.clientX,
y: n.clientY
},
H,
re
);
}, a = (n) => {
if (!A.current.isSliding) return;
const t = n.currentTarget;
A.current.isSliding = !1, A.current.sliderId = void 0, b && b(M._root.toJSON()), t.releasePointerCapture(n.pointerId), t.removeEventListener("pointermove", e), t.removeEventListener("pointerup", a), t.removeEventListener("pointercancel", a);
}, g = (n) => {
n.preventDefault();
const t = n.currentTarget;
A.current.isSliding = !0, A.current.sliderId = t.id, t.setPointerCapture(n.pointerId), t.addEventListener("pointermove", e), t.addEventListener("pointerup", a), t.addEventListener("pointercancel", a);
}, w = $.useRef({}), L = (n, t, i) => {
if (!P.current || !c.current || !i)
return null;
c.current.des = i;
const r = i.getBoundingClientRect();
if (!r) return null;
const u = r.width, x = r.height, m = n - r.left, S = t - r.top;
let D, E, o, s, y;
m < u / 3 ? (D = "left", E = r.left, o = r.top, s = u / 2, y = x) : m > 2 * u / 3 ? (D = "right", E = r.left + u / 2, o = r.top, s = u / 2, y = x) : S < x / 3 ? (D = "top", E = r.left, o = r.top, s = u, y = x / 2) : S > 2 * x / 3 ? (D = "bottom", E = r.left, o = r.top + x / 2, s = u, y = x / 2) : (D = "contain", E = r.left + u * 0.1, o = r.top + x * 0.1, s = u * 0.8, y = x * 0.8);
const G = w.current;
(G.area !== D || G.left !== E || G.top !== o || G.width !== s || G.height !== y) && (I(E, o, s, y, D), w.current = {
area: D,
left: E,
top: o,
width: s,
height: y
}), c.current.area = D;
}, O = (n) => {
n.preventDefault(), n.stopPropagation(), n.dataTransfer && (n.dataTransfer.dropEffect = "move");
const t = n.currentTarget, i = Array.from(
t.childNodes
), r = n.clientX, u = n.clientY;
if (!P.current || !c.current || i.length === 0)
return;
const x = i[0].parentElement;
if (!x) return;
const m = x.getBoundingClientRect(), S = i[0], D = i[i.length - 1], E = S.getBoundingClientRect(), o = D.getBoundingClientRect();
let s = 6;
if (u < m.top || u > m.bottom) return;
if (r > o.right) {
const k = o.right + 1, Z = o.top, K = s - 2, Q = o.height, ce = "right";
I(k, Z, K, Q, ce), c.current.des = D, c.current.area = ce;
return;
}
if (r < E.left) {
const k = E.left - s + 1, Z = E.top, K = s - 2, Q = E.height, ce = "left";
I(k, Z, K, Q, ce), c.current.des = S, c.current.area = ce;
return;
}
let y = null, G = 1 / 0, ve = !1, Ne = 0;
for (let k = 0; k < i.length; k++) {
const Z = i[k].getBoundingClientRect(), K = Z.left + Z.width / 2, Q = Math.abs(r - K);
Q < G && (G = Q, y = i[k], ve = r < K, Ne = k);
}
if (i.length > 1 && (ve && Ne > 0 || !ve && Ne < i.length - 1) && (s = i[1].getBoundingClientRect().left - E.right), y) {
const k = y.getBoundingClientRect(), Z = ve ? k.left - s + 1 : k.right + 1, K = k.top, Q = s - 2, ce = k.height, Se = ve ? "left" : "right";
I(Z, K, Q, ce, Se), c.current.des = y, c.current.area = Se;
}
}, V = (n) => {
n.preventDefault(), n.stopPropagation(), n.dataTransfer && (n.dataTransfer.dropEffect = "move");
const t = n.currentTarget.dataset.area, i = n.currentTarget.dataset.uid;
if (!t || !i || !P.current || !c.current)
return;
c.current.des = n.currentTarget, c.current.area = t;
const r = v();
let u = r.x, x = r.y, m = r.w, S = r.h;
t === "left" ? (u = r.x, x = r.y, m = r.w / 2, S = r.h) : t === "right" ? (u = r.x + r.w / 2, x = r.y, m = r.w / 2, S = r.h) : t === "top" ? (u = r.x, x = r.y, m = r.w, S = r.h / 2) : t === "bottom" && (u = r.x, x = r.y + r.h / 2, m = r.w, S = r.h / 2), I(u, x, m, S, t);
}, I = (n, t, i, r, u) => {
const x = w.current;
if (x.area !== u || x.left !== n || x.top !== t || x.width !== i || x.height !== r) {
const m = P.current;
if (m) {
const S = {};
for (let D = 0; D < m.style.length; D++) {
const E = m.style[D];
E && (S[E] = m.style.getPropertyValue(E));
}
Object.assign(m.style, S, {
left: `${n}px`,
top: `${t}px`,
width: `${i}px`,
height: `${r}px`,
display: "block",
zIndex: "100"
}), w.current = {
area: u,
left: n,
top: t,
width: i,
height: r
};
}
}
}, R = (n) => {
if (n.stopPropagation(), C(!0), document.body.style.cursor = "move", n.currentTarget) {
if (n.dataTransfer) {
n.dataTransfer.effectAllowed = "move";
const t = document.createElement("div");
t.style.width = "1px", t.style.height = "1px", t.style.backgroundColor = "transparent", t.style.position = "absolute", t.style.top = "-1000px", document.body.appendChild(t), n.dataTransfer.setDragImage(t, 0, 0), setTimeout(() => {
t.parentNode && t.parentNode.removeChild(t);
}, 0);
}
N.current.forEach((t) => {
t && (t.style.display = "block", t.style.zIndex = "99");
}), B.current.forEach((t) => {
t && (t.style.display = "block", t.style.zIndex = "95");
}), c.current.src = n.currentTarget, c.current.drag = !0;
}
}, F = (n) => {
if (n.preventDefault(), n.stopPropagation(), document.body.style.cursor = "move", n.dataTransfer && (n.dataTransfer.dropEffect = "move"), !c.current?.src)
return;
const t = n.currentTarget, i = n.clientX, r = n.clientY;
_.current && cancelAnimationFrame(_.current), _.current = requestAnimationFrame(() => {
L(i, r, t);
});
}, z = (n) => {
if (document.body.style.cursor = "default", N.current.forEach((t) => {
t && (t.style.display = "none", t.style.zIndex = "-1");
}), B.current.forEach((t) => {
t && (t.style.display = "none", t.style.zIndex = "-1");
}), _.current && (cancelAnimationFrame(_.current), _.current = null), P.current && (P.current.style.display = "none", P.current.style.zIndex = "-1"), w.current = {}, c.current.drag = !1, !c.current?.src || !c.current?.des) {
c.current.area = void 0, c.current.src = void 0, c.current.des = void 0, C(!1);
return;
}
if (c.current.src === c.current.des) {
c.current.area = void 0, c.current.src = void 0, c.current.des = void 0, C(!1);
return;
}
if (c.current.src && c.current.des) {
if (!c.current.area) {
console.warn("No area specified for drag and drop"), C(!1);
return;
}
if (!U.updateTree(
c.current.src.dataset.uid,
c.current.des.dataset.uid,
c.current.area || "contain"
)) {
console.warn("Failed to update layout tree"), C(!1);
return;
}
requestAnimationFrame(() => {
ie(j.cache.nodOpts.get()), J(j.cache.bndOpts.get()), b && b(M._root.toJSON());
});
}
c.current.area = void 0, c.current.src = void 0, c.current.des = void 0, C(!1);
}, ye = (n) => {
n.preventDefault(), n.stopPropagation(), n.dataTransfer && (n.dataTransfer.dropEffect = "move");
}, Te = (n) => {
n.preventDefault(), n.stopPropagation();
}, xe = (n) => {
n.preventDefault(), n.stopPropagation();
}, be = (n) => {
const t = n.currentTarget, i = t.dataset.uid;
if (!i) return;
const r = j.cache.mapElem.get(i);
if (!(r instanceof j)) {
console.warn(`Element with uid ${i} is not a Node instance`);
return;
}
if (!r || !r.host || !r.host.unId) {
console.warn(`Node with uid ${i} not found in mapNode`);
return;
}
if (r.host.open == r.name) {
console.warn(`Node ${r.name} is already open`);
return;
}
const u = j.cache.nodOpts.get().get(r.host.unId);
if (!u || u.nodOpen && r?.open)
return;
r.host.open = r.name, u.nodOpen = r.name, t?.parentElement?.childNodes?.forEach((m) => {
m instanceof HTMLDivElement && m.dataset.uid !== i ? m.dataset.state = "inactive" : m.dataset.state = "active";
}), u.nodKids?.forEach((m) => {
m.nodName == r.name ? (m.nodOpen = !0, X.current.get(m.uidNode)?.style.setProperty("display", "block")) : (m.nodOpen = !1, X.current.get(m.uidNode)?.style.setProperty("display", "none"));
});
};
return je(() => {
const n = (i) => {
U.updateDimension(
v(),
i,
ne
);
};
n(!0);
const t = async (i) => n(oe ?? !1);
return window.addEventListener("resize", t), ie(j.cache.nodOpts.get()), J(j.cache.bndOpts.get()), j.cache.nodOpts.triggerChange(), j.cache.bndOpts.triggerChange(), j.cache.tabOpts.triggerChange(), b && b(M._root.toJSON()), () => {
window.removeEventListener("resize", t), _.current && cancelAnimationFrame(_.current);
};
}, [v, oe, ne]), je(() => (j.cache.nodOpts.triggerChange(), j.cache.bndOpts.triggerChange(), j.cache.tabOpts.triggerChange(), () => {
_.current && cancelAnimationFrame(_.current);
}), [ue, ae]), {
tabsets: ue,
sliders: ae,
tabsetsRef: de,
panelsRef: B,
tabsRef: X,
slidersRef: q,
layoutJSON: Y,
layoutInstance: U,
hoverElementRef: P,
rootSplitHoverEl: N,
dragging: he,
isUpdating: ge,
setIsUpdating: se,
setDragging: C,
setTabsets: fe,
setSliders: pe,
setLayoutJSON: me,
onDragStart: R,
onDragOver: F,
onDragEnd: z,
onDragEnter: ye,
onDragLeave: Te,
onDrop: xe,
onPointerDown: g,
updateActiveTab: be,
handleRootSplit: V,
handleNavbarDragOver: O
};
}, $e = le(({ children: p, active: l, ...d }, b) => /* @__PURE__ */ f.jsx(
"div",
{
ref: b,
...d,
"data-state": l ? "active" : "inactive",
className: `DefaultWrapTabLabel ${d.className || ""}`,
style: {
alignSelf: "center",
padding: "4px 6px",
boxSizing: "border-box",
fontSize: "14px",
borderRadius: "4px",
...d.style
},
children: p
}
));
$e.displayName = "DefaultWrapTabLabel";
const Ce = le(({ children: p, ...l }, d) => /* @__PURE__ */ f.jsx(
"div",
{
ref: d,
...l,
className: `DefaultWrapTabBody hide-scrollbar ${l.className || ""}`,
style: {
boxSizing: "border-box",
height: "100%",
width: "100%",
display: "grid",
overflow: "auto",
scrollbarWidth: "none",
msOverflowStyle: "none",
...l.style
},
children: p
}
));
Ce.displayName = "DefaultWrapTabBody";
const Pe = le(({ children: p, ...l }, d) => /* @__PURE__ */ f.jsx(
"div",
{
ref: d,
...l,
className: `DefaultWrapTabHead hide-scrollbar ${l.className || ""}`,
style: {
display: "grid",
gridAutoFlow: "column",
justifyContent: "start",
alignItems: "center",
gap: "6px",
paddingLeft: "8px",
backgroundColor: "#dfdfdf",
width: "100%",
boxSizing: "border-box",
height: "100%",
overflow: "auto",
placeItems: "self-start",
scrollbarWidth: "none",
msOverflowStyle: "none",
...l.style
},
children: p
}
));
Pe.displayName = "DefaultWrapTabHead";
const Ae = le(({ children: p, ...l }, d) => /* @__PURE__ */ f.jsx(
"div",
{
ref: d,
className: `DefaultWrapTabPanel ${l.className || ""}`,
...l,
style: {
display: "grid",
alignItems: "center",
placeItems: "self-start",
boxSizing: "border-box",
position: "absolute",
borderRadius: "8px",
...l.style
},
children: p
}
));
Ae.displayName = "DefaultWrapTabPanel";
const Le = le(({ children: p, ...l }, d) => /* @__PURE__ */ f.jsx(
"div",
{
ref: d,
className: `DefaultHoverElement ${l.className || ""}`,
...l,
style: {
position: "absolute",
display: "none",
zIndex: -1,
backgroundColor: "rgba(0, 175, 249, 0.5)",
justifyContent: "center",
alignItems: "center",
opacity: 0.7,
boxSizing: "border-box",
fontWeight: "bold",
pointerEvents: "none",
borderRadius: "10px",
transition: "all 0.2s ease",
border: "2px dashed rgb(0, 196, 42)",
...l.style
},
children: p
}
));
Le.displayName = "DefaultHoverElement";
const Ie = le(({ children: p, direction: l, ...d }, b) => /* @__PURE__ */ f.jsxs(
"div",
{
ref: b,
...d,
className: `DefaultSliderElement ${d.className || ""}`,
style: {
width: "100%",
height: "100%",
position: "absolute",
boxSizing: "border-box",
backgroundColor: "white",
zIndex: 9,
cursor: "grab",
...d.style
},
children: [
/* @__PURE__ */ f.jsx(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "4px",
height: "100%",
flexDirection: l ? "column" : "row"
},
children: l ? /* @__PURE__ */ f.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
style: { transform: "rotate(90deg)" },
children: [
/* @__PURE__ */ f.jsx("circle", { cx: "9", cy: "12", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "9", cy: "5", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "9", cy: "19", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "15", cy: "12", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "15", cy: "5", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "15", cy: "19", r: "1" })
]
}
) : /* @__PURE__ */ f.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "lucide lucide-grip-vertical size-2.5",
children: [
/* @__PURE__ */ f.jsx("circle", { cx: "9", cy: "12", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "9", cy: "5", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "9", cy: "19", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "15", cy: "12", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "15", cy: "5", r: "1" }),
/* @__PURE__ */ f.jsx("circle", { cx: "15", cy: "19", r: "1" })
]
}
)
}
),
p
]
}
));
Ie.displayName = "DefaultSliderElement";
const We = le(
({
children: p,
area: l,
size: d = { h: "20%", w: "6px" },
gap: b = "0px",
...v
}, T) => {
let h = {};
return l === "left" ? (h = {
borderTopRightRadius: "16px",
borderBottomRightRadius: "16px",
height: d.h,
left: b,
width: d.w
}, h.top = `calc(50% - ${h.height} / 2)`) : l === "top" ? (h = {
borderBottomLeftRadius: "16px",
borderBottomRightRadius: "16px",
width: d.h,
top: b,
height: d.w
}, h.left = `calc(50% - ${h.width} / 2)`) : l === "right" ? (h = {
borderTopLeftRadius: "16px",
borderBottomLeftRadius: "16px",
height: d.h,
right: b,
width: d.w
}, h.top = `calc(50% - ${h.height} / 2)`) : l === "bottom" && (h = {
borderTopLeftRadius: "16px",
borderTopRightRadius: "16px",
width: d.h,
bottom: b,
height: d.w
}, h.left = `calc(50% - ${h.width} / 2)`), /* @__PURE__ */ f.jsx(
"div",
{
ref: T,
...v,
className: `RootSplitterHoverEl ${v.className || ""}`,
style: {
position: "absolute",
zIndex: -1,
display: "none",
boxSizing: "border-box",
backgroundColor: "#0081f9",
cursor: "grab",
...h,
...v.style
},
children: p
}
);
}
);
We.displayName = "RootSplitterHoverEl";
const qe = (p) => {
const l = [], d = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new Map();
for (const [v, T] of p) {
const h = crypto.randomUUID();
l.push(v), d.set(v, {
uqid: h,
name: v,
node: T
}), b.set(v, h);
}
return {
keys: l,
maps: d,
name: b
};
}, Xe = $.forwardRef(
({
tabs: p,
bondWidth: l = M._bond,
minTabHeight: d = M._minH,
minTabWidth: b = M._minW,
updateJSON: v,
sliderUpdateTimeout: T = 2,
windowResizeTimeout: h = 2,
disableSliderTimeout: W = !0,
disableResizeTimeout: ee = !0,
HoverElement: te = Le,
enableTabbar: re = !0,
WrapTabLabel: ne = $e,
WrapTabPanel: H = Ae,
WrapTabHead: oe = Pe,
WrapTabBody: de = Ce,
SliderElement: q = Ie,
tabHeadHeight: B = M._minH,
tabNames: X = /* @__PURE__ */ new Map(),
layoutTree: P,
pad: N = {
t: 0,
b: 0,
l: 0,
r: 0
},
rootId: Y = "dynamix-layout-root",
hoverElementStyles: me,
sliderElementStyles: ue,
tabPanelElementStyles: fe,
tabBodyElementStyles: ae,
tabHeadElementStyles: pe,
tabLabelElementStyles: he,
RootSplitterHoverElStyles: C,
hoverElementClass: _,
sliderElementClass: ge,
tabPanelElementClass: se,
tabBodyElementClass: c,
tabHeadElementClass: A,
tabLabelElementClass: U,
RootSplitterHoverElClass: ie,
...J
}, e) => {
const a = Me(() => qe(p), [p]), g = Ye(null), w = typeof e == "function" ? g : e || g, L = Fe(() => {
const o = w.current;
if (!o) return { w: 0, h: 0, x: 0, y: 0 };
const s = o.getBoundingClientRect();
return {
w: s.width - (N.l + N.r),
h: s.height - (N.t + N.b),
x: s.left + N.l,
y: s.top + N.t
};
}, [w, N.l, N.r, N.t, N.b]), {
tabsetsRef: O,
slidersRef: V,
sliders: I,
tabsets: R,
hoverElementRef: F,
onDragEnd: z,
onDragOver: ye,
onDragStart: Te,
onDragEnter: xe,
onDragLeave: be,
onDrop: n,
dragging: t,
panelsRef: i,
onPointerDown: r,
handleNavbarDragOver: u,
updateActiveTab: x,
rootSplitHoverEl: m,
handleRootSplit: S,
tabsRef: D,
isUpdating: E
} = He({
tabOutput: a,
rootId: Y,
updateJSON: v,
enableTabbar: re,
layoutTree: P,
tabHeadHeight: B,
dimensions: L,
sliderUpdateTimeout: T,
windowResizeTimeout: h,
bondWidth: l,
minTabHeight: d,
minTabWidth: b,
disableSliderTimeout: W,
disableResizeTimeout: ee
});
return /* @__PURE__ */ f.jsxs(
"div",
{
id: Y,
ref: w,
...J,
"data-testid": Y,
className: t ? "is-dragging" : "",
style: {
position: "relative",
width: "100%",
height: "100%",
overflow: "hidden",
...J.style
},
children: [
re && R && Array.from(R.values()).map((o) => /* @__PURE__ */ f.jsxs($.Fragment, { children: [
/* @__PURE__ */ f.jsx(
H,
{
ref: (s) => {
const y = o.uidNode;
s ? i.current.set(y, s) : i.current.delete(y);
},
onDragEnd: z,
onDragOver: ye,
onDragEnter: xe,
onDragLeave: be,
onDrop: n,
"data-uid": o.uidNode,
"data-type": o.typNode,
className: "hide-scrollbar DefaultWrapTabPanel " + (se || ""),
style: {
position: "absolute",
...fe,
width: `${o.nodDims.w}px`,
height: `${o.nodDims.h}px`,
left: `${o.nodDims.x}px`,
top: `${o.nodDims.y}px`,
backgroundColor: "transparent"
}
}
),
/* @__PURE__ */ f.jsx(
oe,
{
draggable: !E,
"data-uid": o.uidNode,
"data-type": "tabset",
onDragOver: u,
onDragStart: Te,
onDragEnd: z,
onDragEnter: xe,
onDragLeave: be,
onDrop: n,
ref: (s) => {
const y = o.uidNode;
s ? O.current.set(y, s) : O.current.delete(y);
},
className: "hide-scrollbar " + (A || ""),
style: {
...pe,
position: "absolute",
zIndex: 99,
width: `${o.nodDims.w}px`,
height: `${B}px`,
left: `${o.nodDims.x}px`,
top: `${o.nodDims.y}px`,
cursor: E ? "wait" : "pointer"
},
children: o.nodKids && o.nodKids.map((s) => /* @__PURE__ */ f.jsx(
ne,
{
"data-uid": s.uidNode,
"data-type": "tab",
onDragStart: Te,
onDragEnd: z,
draggable: !E,
active: s.nodOpen,
className: "hide-scrollbar " + (U || ""),
style: {
cursor: E ? "wait" : "pointer",
...he
},
onClick: x,
children: X.get(s.nodName) || s.nodName
},
s.uidNode
))
}
)
] }, o.uidNode)),
a.keys.map((o) => {
const s = a.maps.get(o)?.uqid;
return /* @__PURE__ */ f.jsx(
de,
{
id: s,
draggable: !1,
"data-uid": s,
className: "hide-scrollbar " + (c || ""),
style: {
position: "absolute",
zIndex: 90,
overscrollBehavior: "contain",
...ae
},
ref: (y) => {
s && (y ? D.current.set(s, y) : D.current.delete(s));
},
children: a.maps.get(o)?.node || /* @__PURE__ */ f.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ f.jsx("span", { className: "text-gray-500", children: "No content" }) })
},
o
);
}),
I && Array.from(I.values()).map((o) => /* @__PURE__ */ f.jsx(
q,
{
id: o.uidNode,
"data-uid": o.uidNode,
direction: o.nodeDir,
onPointerDown: r,
className: "hide-scrollbar " + (ge || ""),
ref: (s) => {
const y = o.uidNode;
s ? V.current.set(y, s) : V.current.delete(y);
},
style: {
width: `${o.nodDims.w}px`,
height: `${o.nodDims.h}px`,
left: `${o.nodDims.x}px`,
top: `${o.nodDims.y}px`,
cursor: o.nodeDir ? "ns-resize" : "ew-resize",
...ue
}
},
o.uidNode
)),
/* @__PURE__ */ f.jsx(
te,
{
className: "hide-scrollbar " + (_ || ""),
style: { ...me },
ref: F
}
),
["left", "right", "top", "bottom"].map(
(o, s) => /* @__PURE__ */ f.jsx(
We,
{
onDragOver: S,
onDragEnd: z,
onDragEnter: xe,
onDragLeave: be,
onDrop: n,
"data-uid": Y,
"data-area": o,
className: "hide-scrollbar " + (ie || ""),
ref: (y) => {
y && (m.current[s] = y);
},
style: { ...C },
area: o,
size: { h: "25%", w: "8px" }
},
o
)
)
]
}
);
}
);
Xe.displayName = "DynamixLayout";
export {
Le as DefaultHoverElement,
Ie as DefaultSliderElement,
Ce as DefaultWrapTabBody,
Pe as DefaultWrapTabHead,
$e as DefaultWrapTabLabel,
Ae as DefaultWrapTabPanel,
Xe as DynamixLayout,
We as RootSplitterHoverEl,
qe as getTabOutput,
He as useDynamixLayout
};