@commercetools/nimbus 3.7.0 → 3.8.0

package/dist/chunks/use-responsive-splitter-sizes-DLaAOdJ9.es.js

@@ -0,0 +1,572 @@
+import { t as e } from "./mergeProps-CLXn4wzB.es.js";
+import { t } from "./useObjectRef-CiW-zdxU.es.js";
+import { t as n } from "./useMove-CdmN5XVN.es.js";
+import { t as r } from "./useFocusRing-Cl-XMifT.es.js";
+import { t as i } from "./useSeparator-CVWAtvDQ.es.js";
+import { n as a, t as o } from "./normalize-messages-migTwRpM.es.js";
+import { C as s } from "./theme-B5nhOybu.es.js";
+import { t as c } from "./extract-style-props-YWZOestG.es.js";
+import { t as l } from "./merge-refs-C1GcH9iY.es.js";
+import { createContext as u, useCallback as d, useContext as f, useEffect as p, useId as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { jsx as y } from "react/jsx-runtime";
+import { createSlotRecipeContext as b, useSlotRecipe as x } from "@chakra-ui/react/styled-system";
+//#region src/components/splitter/splitter.slots.tsx
+var { withProvider: S, withContext: C } = b({ key: "nimbusSplitter" }), w = S("div", "root"), T = C("div", "pane"), E = C("div", "handle"), D = u(void 0), O = ({ size: e, delta: t, minSize: n, maxSize: r }) => Math.min(Math.max(e + t, n), r), k = (e) => e.collapsible ? Math.min(e.minSize, e.collapsedSize) : e.minSize, A = (e, t) => {
+	let n = k(e), r = e.maxSize;
+	return t ? {
+		min: n,
+		max: r
+	} : {
+		min: 100 - r,
+		max: 100 - n
+	};
+}, j = (e) => typeof e != "number" || !Number.isFinite(e) ? null : Math.min(Math.max(e, 0), 100), M = (e) => j(e) ?? 50, N = 1e-6, P = (e, t) => e === t ? !0 : e == null || t == null ? !1 : Math.abs(e - t) <= N, F = .001, I = (e) => e.includes("aside") && e.includes("main"), L = (e) => {
+	let { orientation: t, defaultSize: n, size: r, asideConfig: i, keyboardStep: a, isDoubleClickDisabled: o, isDisabled: s, collapsed: c, defaultCollapsed: l, onSizeChange: u, onSizeChangeEnd: f, onCollapsedChange: m } = e, [y, b] = v([]), [x, S] = v({}), C = r !== void 0, w = c !== void 0, T = (C ? j(r) : null) ?? M(n), E = (c ?? l ?? !1) && i.collapsible, D = E ? i.collapsedSize : T, [O, k] = v(D), A = _(D), N = _(r ?? null), L = _(!1), R = _(T), z = _(E ? T : null), [B, V] = v(l ?? !1), H = w ? c ?? !1 : B, U = _(E), W = d((e, t) => {
+		A.current = e, k(e), u?.(e), t.commit && f?.(e), U.current && e > i.collapsedSize + F && (U.current = !1, z.current = null, w || V(!1), m?.(!1));
+	}, [
+		u,
+		f,
+		i.collapsedSize,
+		w,
+		m
+	]), G = d((e) => W(e, { commit: !1 }), [W]), K = d((e) => {
+		e === void 0 ? f?.(A.current) : W(e, { commit: !0 });
+	}, [W, f]);
+	h(() => {
+		if (!I(y)) return;
+		let e = H, t = U.current;
+		if (e !== t && (!e || i.collapsible)) {
+			if (U.current = e, e) t || (z.current = A.current), A.current = i.collapsedSize, k(i.collapsedSize);
+			else {
+				let e = z.current;
+				z.current = null;
+				let t = e ?? R.current;
+				A.current = t, k(t);
+			}
+		}
+	}, [H, y]), h(() => {
+		I(y) && U.current && (P(i.collapsedSize, A.current) || (A.current = i.collapsedSize, k(i.collapsedSize)));
+	}, [i.collapsedSize, y]), h(() => {
+		if (!C || !I(y) || P(r, N.current)) return;
+		let e = j(r);
+		e !== null && (N.current = r ?? null, H ? z.current = e : P(e, A.current) || (A.current = e, k(e)));
+	}, [
+		r,
+		y,
+		H
+	]), p(() => {
+		typeof process < "u" && process.env.NODE_ENV !== "production" && !L.current && C && (n === void 0 ? f === void 0 && (L.current = !0, console.warn("[Splitter] `size` is controlled but `onSizeChangeEnd` is not set. After a drag or keyboard resize the splitter keeps that value and behaves as uncontrolled. Wire `onSizeChangeEnd` and feed the value back to stay controlled.")) : (L.current = !0, console.warn("[Splitter] Both `size` (controlled) and `defaultSize` (uncontrolled) were provided. `defaultSize` is ignored — pass one or the other.")));
+	}, [
+		C,
+		n,
+		f
+	]);
+	let q = d((e, t) => {
+		b((t) => t.includes(e) ? t : [...t, e]), S((n) => n[e] === t ? n : {
+			...n,
+			[e]: t
+		});
+	}, []), J = d((e) => {
+		b((t) => t.filter((t) => t !== e)), S((t) => {
+			if (!(e in t)) return t;
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, []), Y = d((e) => {
+		s || e !== H && (!e || i.collapsible) && (w || V(e), m?.(e));
+	}, [
+		s,
+		H,
+		i.collapsible,
+		w,
+		m
+	]), X = d(() => {
+		if (!I(y)) return;
+		let e = R.current;
+		H && (w || (U.current = !1, z.current = null, V(!1)), m?.(!1)), K(e);
+	}, [
+		y,
+		H,
+		w,
+		m,
+		K
+	]);
+	return g(() => ({
+		size: O,
+		setSize: G,
+		commitSize: K,
+		orientation: t,
+		keyboardStep: a,
+		isDoubleClickDisabled: o,
+		isDisabled: s,
+		asideConfig: i,
+		paneOrder: y,
+		paneDomIds: x,
+		registerPane: q,
+		unregisterPane: J,
+		collapsed: H,
+		setCollapsed: Y,
+		restoreDefaults: X
+	}), [
+		O,
+		G,
+		K,
+		t,
+		a,
+		o,
+		s,
+		i,
+		y,
+		x,
+		q,
+		J,
+		H,
+		Y,
+		X
+	]);
+}, R = ({ children: e, orientation: t = "horizontal", defaultSize: n, size: r, minSize: i, maxSize: a, collapsible: o, collapsedSize: s, onSizeChange: l, onSizeChangeEnd: u, collapsed: d, defaultCollapsed: f, onCollapsedChange: m, keyboardStep: h = 5, isDoubleClickDisabled: _ = !1, isDisabled: v = !1, ref: b, ...S }) => {
+	let [C, T] = x({ key: "nimbusSplitter" }).splitVariantProps({
+		orientation: t,
+		...S
+	}), [E, O] = c(T), k = L({
+		orientation: t,
+		defaultSize: n,
+		size: r,
+		asideConfig: g(() => ({
+			minSize: i ?? 0,
+			maxSize: a ?? 100,
+			collapsible: o ?? !1,
+			collapsedSize: s ?? 0
+		}), [
+			i,
+			a,
+			o,
+			s
+		]),
+		collapsed: d,
+		defaultCollapsed: f,
+		keyboardStep: h,
+		isDoubleClickDisabled: _,
+		isDisabled: v,
+		onSizeChange: l,
+		onSizeChangeEnd: u,
+		onCollapsedChange: m
+	}), A = k.paneOrder.length;
+	return p(() => {
+		typeof process < "u" && process.env.NODE_ENV !== "production" && A > 0 && A !== 2 && console.warn(`[Splitter] Expected one <Splitter.Aside> and one <Splitter.Main>, got ${A} pane(s). The Splitter primitive is 2-pane; nest a second Splitter inside a pane for 3+ regions.`);
+	}, [A]), /* @__PURE__ */ y(D.Provider, {
+		value: k,
+		children: /* @__PURE__ */ y(w, {
+			ref: b,
+			...C,
+			...E,
+			...O,
+			children: e
+		})
+	});
+};
+R.displayName = "Splitter.Root";
+//#endregion
+//#region src/components/splitter/hooks/use-splitter-context.ts
+var z = () => {
+	let e = f(D);
+	if (!e) throw Error("useSplitterContext must be used within a Splitter.Root");
+	return e;
+}, B = ({ paneRole: e, id: t, children: n, style: r, ref: i, ...a }) => {
+	let { size: o, orientation: s, registerPane: c, unregisterPane: l } = z(), u = m(), d = t ?? u;
+	h(() => (c(e, d), () => l(e)), [
+		e,
+		d,
+		c,
+		l
+	]);
+	let f = e === "aside" ? o : 100 - o, p = {
+		[s === "horizontal" ? "width" : "height"]: `${f}%`,
+		...r
+	};
+	return /* @__PURE__ */ y(T, {
+		ref: i,
+		id: d,
+		style: p,
+		...a,
+		children: n
+	});
+}, V = (e) => /* @__PURE__ */ y(B, {
+	paneRole: "aside",
+	...e
+});
+V.displayName = "Splitter.Aside";
+//#endregion
+//#region src/components/splitter/components/splitter.main.tsx
+var H = (e) => /* @__PURE__ */ y(B, {
+	paneRole: "main",
+	...e
+});
+H.displayName = "Splitter.Main";
+//#endregion
+//#region src/components/splitter/hooks/use-handle-keyboard.ts
+var U = ({ isReady: e, applyDelta: t }) => {
+	let { orientation: n, keyboardStep: r, isDisabled: i, collapsed: a, setCollapsed: o, asideConfig: s } = z(), c = d(() => {
+		e && !i && (a ? o(!1) : s.collapsible && o(!0));
+	}, [
+		e,
+		i,
+		a,
+		s.collapsible,
+		o
+	]);
+	return { onKeyDown: d((a) => {
+		if (e && !i) switch (a.key) {
+			case "ArrowLeft":
+				n === "horizontal" && (a.preventDefault(), t(-r, !0));
+				return;
+			case "ArrowRight":
+				n === "horizontal" && (a.preventDefault(), t(r, !0));
+				return;
+			case "ArrowUp":
+				n === "vertical" && (a.preventDefault(), t(-r, !0));
+				return;
+			case "ArrowDown":
+				n === "vertical" && (a.preventDefault(), t(r, !0));
+				return;
+			case "Home":
+				a.preventDefault(), t(-100, !0);
+				return;
+			case "End":
+				a.preventDefault(), t(100, !0);
+				return;
+			case "Enter":
+				a.preventDefault(), c();
+				return;
+		}
+	}, [
+		e,
+		i,
+		n,
+		r,
+		t,
+		c
+	]) };
+}, W = 1e-4, G = ({ handleRef: e, asideLeads: t, isReady: r, isResizeLocked: i }) => {
+	let { size: a, setSize: o, commitSize: s, orientation: c, isDisabled: l, asideConfig: u } = z(), f = d((e, n) => {
+		if (!r || l || i) return;
+		let c = t ? e : -e, d = O({
+			size: a,
+			delta: c,
+			minSize: u.minSize,
+			maxSize: u.maxSize
+		});
+		n ? s(d) : o(d);
+	}, [
+		r,
+		l,
+		i,
+		t,
+		a,
+		u.minSize,
+		u.maxSize,
+		o,
+		s
+	]), p = _(0), { moveProps: m } = n({
+		onMoveStart() {
+			p.current = 0;
+		},
+		onMove(t) {
+			if (!r || l || i) return;
+			let n = e.current?.parentElement;
+			if (!n) return;
+			let a = c === "horizontal" ? n.offsetWidth : n.offsetHeight;
+			if (a <= 0) return;
+			let o = c === "horizontal" ? t.deltaX : t.deltaY;
+			p.current += o / a * 100;
+			let s = p.current;
+			Math.abs(s) < W || (p.current -= s, f(s, !1));
+		},
+		onMoveEnd() {
+			!r || l || i || s();
+		}
+	});
+	return {
+		moveProps: m,
+		applyDelta: f
+	};
+}, K = {
+	en: o({ resizePanes: "Resize panes" }),
+	de: o({ resizePanes: "Bereiche vergrößern" }),
+	es: o({ resizePanes: "Ajustar tamaño de paneles" }),
+	"fr-FR": o({ resizePanes: "Modifier la taille du volet" }),
+	"pt-BR": o({ resizePanes: "Redimensionar painéis" })
+}, q = ({ "aria-label": n, "aria-labelledby": o, style: s, ref: c, ...u }) => {
+	let { size: f, orientation: p, isDoubleClickDisabled: m, isDisabled: h, asideConfig: g, paneOrder: v, paneDomIds: b, collapsed: x, restoreDefaults: S } = z(), C = a(K), w = n ?? C.format("resizePanes"), T = _(null), D = t(l(T, c)), O = v[0], k = v[1], j = !!O && !!k && O !== k, M = O === "aside", N = x, { moveProps: P, applyDelta: F } = G({
+		handleRef: D,
+		asideLeads: M,
+		isReady: j,
+		isResizeLocked: N
+	}), { onKeyDown: I } = U({
+		isReady: j,
+		applyDelta: F
+	}), { separatorProps: L } = i({
+		orientation: p,
+		"aria-label": w,
+		"aria-labelledby": o
+	}), { focusProps: R, isFocusVisible: B } = r(), V = d(() => {
+		h || m || x || S();
+	}, [
+		h,
+		m,
+		x,
+		S
+	]), { min: H, max: W } = A(g, M), q = j ? M ? f : 100 - f : 0, J = j ? b[O] : void 0, Y = j ? Math.round(q) : void 0, X = p === "horizontal" ? { left: `${q}%` } : { top: `${q}%` }, Z = e(L, P, R, {
+		tabIndex: h ? -1 : 0,
+		"aria-valuenow": Y,
+		"aria-valuemin": H,
+		"aria-valuemax": W,
+		"aria-valuetext": Y === void 0 ? void 0 : `${Y}%`,
+		"aria-orientation": p,
+		"aria-controls": J,
+		"aria-disabled": h || void 0,
+		"data-focus-visible": B || void 0,
+		"data-disabled": h || void 0,
+		"data-resize-locked": N || void 0,
+		onKeyDown: I,
+		onDoubleClick: V,
+		style: {
+			...X,
+			...s
+		}
+	}, u);
+	return /* @__PURE__ */ y(E, {
+		ref: D,
+		...Z
+	});
+};
+q.displayName = "Splitter.Handle";
+//#endregion
+//#region src/components/splitter/splitter.tsx
+var J = {
+	Root: R,
+	Aside: V,
+	Main: H,
+	Handle: q
+}, Y = [
+	"3xs",
+	"2xs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl",
+	"4xl",
+	"5xl",
+	"6xl",
+	"7xl",
+	"8xl",
+	"breakpoint-sm",
+	"breakpoint-md",
+	"breakpoint-lg",
+	"breakpoint-xl",
+	"breakpoint-2xl"
+], X = new Set(Y), Z = (e) => typeof e == "string" && X.has(e), ee = (e) => {
+	let t = s.size[e];
+	if (!t) return null;
+	let n = parseFloat(t.value);
+	return Number.isFinite(n) ? n : null;
+}, Q = (e) => typeof e == "number" && Number.isFinite(e) && e > 0, te = /^-?\d+(?:\.\d+)?%$/, ne = /^-?\d+(?:\.\d+)?$/, re = (e) => typeof e == "string" && te.test(e), ie = (e, t) => {
+	if (typeof e == "number") return Q(t) ? e / t * 100 : null;
+	if (re(e)) {
+		let t = parseFloat(e);
+		return Number.isFinite(t) ? t : null;
+	}
+	if (Z(e)) {
+		let n = ee(e);
+		return n === null || !Q(t) ? null : n / t * 100;
+	}
+	return null;
+}, ae = (e, t = 0, n = 100) => Math.min(n, Math.max(t, e)), oe = (e, t) => e / 100 * t, se = (e) => {
+	if (ne.test(e)) {
+		let t = parseFloat(e);
+		return Number.isFinite(t) ? t : null;
+	}
+	return Z(e) ? ee(e) : null;
+}, ce = (e) => typeof e == "object" && !!e, le = (e) => {
+	if (!ce(e)) return [{
+		thresholdPx: 0,
+		value: e
+	}];
+	let t = [];
+	for (let [n, r] of Object.entries(e)) {
+		if (r === void 0) continue;
+		let e = se(n);
+		e !== null && t.push({
+			thresholdPx: e,
+			value: r
+		});
+	}
+	return t.sort((e, t) => e.thresholdPx - t.thresholdPx), t;
+}, ue = (e, t) => le(e).find((e) => e.thresholdPx === t)?.value, de = (e, t, n) => {
+	if (e.length === 0) return null;
+	let r = ((t) => {
+		let n = e[0];
+		for (let r of e) if (r.thresholdPx <= t) n = r;
+		else break;
+		return n;
+	})(t), i = n?.activeThresholdPx, a = n?.deadbandPx ?? 0;
+	if (i == null || a <= 0 || r.thresholdPx === i) return r;
+	let o = e.findIndex((e) => e.thresholdPx === i);
+	if (o === -1) return r;
+	let s = e[o], c = e[o + 1]?.thresholdPx ?? Infinity;
+	return t >= i - a && t < c + a ? s : r;
+}, $ = (e, t, n) => {
+	let r = le(e);
+	if (r.length === 0) return {
+		percent: null,
+		thresholdPx: null
+	};
+	let i;
+	if (r.length === 1) i = r[0];
+	else {
+		if (!Q(t)) return {
+			percent: null,
+			thresholdPx: null
+		};
+		i = de(r, t, {
+			activeThresholdPx: n?.activeThresholdPx,
+			deadbandPx: n?.deadbandPx
+		});
+	}
+	if (!i) return {
+		percent: null,
+		thresholdPx: null
+	};
+	let a = n?.stored?.[i.thresholdPx];
+	if (a) {
+		let e = a.unit === "pct" ? a.value : Q(t) ? a.value / t * 100 : null;
+		if (e !== null) return {
+			percent: e,
+			thresholdPx: i.thresholdPx
+		};
+	}
+	return {
+		percent: ie(i.value, t),
+		thresholdPx: i.thresholdPx
+	};
+}, fe = (e) => {
+	if (typeof e != "object" || !e) return !1;
+	let t = e;
+	return (t.unit === "px" || t.unit === "pct") && typeof t.value == "number" && Number.isFinite(t.value);
+}, pe = (e) => {
+	if (!e) return null;
+	let t;
+	try {
+		t = JSON.parse(e);
+	} catch {
+		return null;
+	}
+	if (typeof t != "object" || !t) return null;
+	let n = t;
+	if (n.v !== 1 || typeof n.bands != "object") return null;
+	let r = {};
+	for (let [e, t] of Object.entries(n.bands ?? {})) {
+		let n = Number(e);
+		Number.isFinite(n) && fe(t) && (r[n] = t);
+	}
+	return r;
+}, me = (e) => JSON.stringify({
+	v: 1,
+	bands: e
+}), he = () => ({
+	getItem: (e) => {
+		try {
+			return typeof localStorage > "u" ? null : localStorage.getItem(e);
+		} catch {
+			return null;
+		}
+	},
+	setItem: (e, t) => {
+		try {
+			if (typeof localStorage > "u") return;
+			localStorage.setItem(e, t);
+		} catch {}
+	}
+}), ge = .05, _e = .5, ve = 2, ye = he(), be = (e) => {
+	let { orientation: t = "horizontal", size: n, minSize: r, maxSize: i, collapsedSize: a, persistKey: o, storage: s = ye, onCollapsedChange: c } = e, [l, u] = v(null), f = _(null), [m, h] = v(() => o ? pe(s.getItem(o)) ?? {} : {}), y = _(m);
+	y.current = m;
+	let b = _(null), x = _(null), [S, C] = v(void 0), w = _(!1), T = _({
+		size: n,
+		persistKey: o,
+		onCollapsedChange: c
+	});
+	T.current = {
+		size: n,
+		persistKey: o,
+		onCollapsedChange: c
+	};
+	let E = $(n, l, {
+		activeThresholdPx: b.current,
+		deadbandPx: ve,
+		stored: m
+	}), D = r === void 0 ? void 0 : $(r, l).percent ?? void 0, O = i === void 0 ? void 0 : $(i, l).percent ?? void 0, k = a === void 0 ? void 0 : $(a, l).percent ?? void 0, A = E.percent === null ? null : ae(E.percent, D ?? 0, O ?? 100);
+	p(() => {
+		E.thresholdPx !== null && (b.current = E.thresholdPx), A !== null && (x.current !== null && Math.abs(A - x.current) < ge || (x.current = A, C(A)));
+	}, [A, E.thresholdPx]);
+	let j = d((e) => {
+		if (!e) return;
+		let n = (e, n) => {
+			let r = t === "vertical" ? n : e;
+			!Number.isFinite(r) || r <= 0 || (f.current = r, u((e) => e !== null && Math.abs(e - r) < _e ? e : r));
+		}, r = e.getBoundingClientRect();
+		if (n(r.width, r.height), typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver((e) => {
+			let t = e[0];
+			t && n(t.contentRect.width, t.contentRect.height);
+		});
+		return i.observe(e), () => i.disconnect();
+	}, [t]), M = d((e) => {
+		if (w.current) return;
+		x.current = e, C(e);
+		let { size: t, persistKey: n } = T.current, r = f.current;
+		if (!n || r === null || r <= 0) return;
+		let { thresholdPx: i } = $(t, r, {
+			activeThresholdPx: b.current,
+			deadbandPx: ve
+		});
+		if (i === null) return;
+		let a = re(ue(t, i)) ? "pct" : "px", o = a === "pct" ? e : oe(e, r), c = {
+			...y.current,
+			[i]: {
+				unit: a,
+				value: o
+			}
+		};
+		y.current = c, h(c);
+		try {
+			s.setItem(n, me(c));
+		} catch {}
+	}, [s]), N = d((e) => {
+		w.current = e, T.current.onCollapsedChange?.(e);
+	}, []), P = S ?? A ?? void 0;
+	return { rootProps: g(() => {
+		let e = {
+			ref: j,
+			orientation: t,
+			onSizeChangeEnd: M,
+			onCollapsedChange: N
+		};
+		return P !== void 0 && (e.size = P), D !== void 0 && (e.minSize = D), O !== void 0 && (e.maxSize = O), k !== void 0 && (e.collapsedSize = k), e;
+	}, [
+		j,
+		t,
+		M,
+		N,
+		P,
+		D,
+		O,
+		k
+	]) };
+};
+//#endregion
+export { Y as n, J as r, be as t };
+
+//# sourceMappingURL=use-responsive-splitter-sizes-DLaAOdJ9.es.js.map