@commercetools/nimbus 3.2.0 → 3.4.0

package/dist/chunks/use-responsive-splitter-sizes-BgEYraHy.esm.js

@@ -0,0 +1,582 @@
+import { t as e } from "./mergeProps-BJ6-Ao_L.esm.js";
+import { t } from "./useObjectRef-B_3vY5-Q.esm.js";
+import { t as n } from "./useMove-DshCmF8x.esm.js";
+import { t as r } from "./useFocusRing-CgvZuPOT.esm.js";
+import { t as i } from "./useSeparator-C9gYJRve.esm.js";
+import { n as a, t as o } from "./normalize-messages-B_f-0I5n.esm.js";
+import { t as s } from "./extract-style-props-D519tVOc.esm.js";
+import { t as c } from "./merge-refs-C1GcH9iY.esm.js";
+import { createContext as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v } from "react/jsx-runtime";
+import { createSlotRecipeContext as y, useSlotRecipe as b } from "@chakra-ui/react/styled-system";
+import { themeTokens as x } from "@commercetools/nimbus-tokens";
+//#region src/components/splitter/splitter.slots.tsx
+var { withProvider: S, withContext: C } = y({ key: "nimbusSplitter" }), w = S("div", "root"), T = C("div", "pane"), E = C("div", "handle"), D = l(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: d, onSizeChangeEnd: p, onCollapsedChange: v } = e, [y, b] = _([]), [x, S] = _({}), 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] = _(D), A = g(D), N = g(r ?? null), L = g(!1), R = g(T), z = g(E ? T : null), [B, V] = _(l ?? !1), H = w ? c ?? !1 : B, U = g(E), W = u((e, t) => {
+		A.current = e, k(e), d?.(e), t.commit && p?.(e), U.current && e > i.collapsedSize + F && (U.current = !1, z.current = null, w || V(!1), v?.(!1));
+	}, [
+		d,
+		p,
+		i.collapsedSize,
+		w,
+		v
+	]), G = u((e) => W(e, { commit: !1 }), [W]), K = u((e) => {
+		e === void 0 ? p?.(A.current) : W(e, { commit: !0 });
+	}, [W, p]);
+	m(() => {
+		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]), m(() => {
+		I(y) && U.current && (P(i.collapsedSize, A.current) || (A.current = i.collapsedSize, k(i.collapsedSize)));
+	}, [i.collapsedSize, y]), m(() => {
+		if (!C || !I(y) || P(r, N.current)) return;
+		let e = j(r);
+		if (e !== null) {
+			if (N.current = r ?? null, H) {
+				z.current = e;
+				return;
+			}
+			P(e, A.current) || (A.current = e, k(e));
+		}
+	}, [
+		r,
+		y,
+		H
+	]), f(() => {
+		typeof process > "u" || process.env.NODE_ENV === "production" || L.current || !C || (n === void 0 ? p === 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,
+		p
+	]);
+	let q = u((e, t) => {
+		b((t) => t.includes(e) ? t : [...t, e]), S((n) => n[e] === t ? n : {
+			...n,
+			[e]: t
+		});
+	}, []), J = u((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 = u((e) => {
+		s || e !== H && (e && !i.collapsible || (w || V(e), v?.(e)));
+	}, [
+		s,
+		H,
+		i.collapsible,
+		w,
+		v
+	]), X = u(() => {
+		if (!I(y)) return;
+		let e = R.current;
+		H && (w || (U.current = !1, z.current = null, V(!1)), v?.(!1)), K(e);
+	}, [
+		y,
+		H,
+		w,
+		v,
+		K
+	]);
+	return h(() => ({
+		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: c, onSizeChange: l, onSizeChangeEnd: u, collapsed: d, defaultCollapsed: p, onCollapsedChange: m, keyboardStep: g = 5, isDoubleClickDisabled: _ = !1, isDisabled: y = !1, ref: x, ...S }) => {
+	let [C, T] = b({ key: "nimbusSplitter" }).splitVariantProps({
+		orientation: t,
+		...S
+	}), [E, O] = s(T), k = L({
+		orientation: t,
+		defaultSize: n,
+		size: r,
+		asideConfig: h(() => ({
+			minSize: i ?? 0,
+			maxSize: a ?? 100,
+			collapsible: o ?? !1,
+			collapsedSize: c ?? 0
+		}), [
+			i,
+			a,
+			o,
+			c
+		]),
+		collapsed: d,
+		defaultCollapsed: p,
+		keyboardStep: g,
+		isDoubleClickDisabled: _,
+		isDisabled: y,
+		onSizeChange: l,
+		onSizeChangeEnd: u,
+		onCollapsedChange: m
+	}), A = k.paneOrder.length;
+	return f(() => {
+		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__ */ v(D.Provider, {
+		value: k,
+		children: /* @__PURE__ */ v(w, {
+			ref: x,
+			...C,
+			...E,
+			...O,
+			children: e
+		})
+	});
+};
+R.displayName = "Splitter.Root";
+//#endregion
+//#region src/components/splitter/hooks/use-splitter-context.ts
+var z = () => {
+	let e = d(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 = p(), d = t ?? u;
+	m(() => (c(e, d), () => l(e)), [
+		e,
+		d,
+		c,
+		l
+	]);
+	let f = e === "aside" ? o : 100 - o;
+	return /* @__PURE__ */ v(T, {
+		ref: i,
+		id: d,
+		style: {
+			[s === "horizontal" ? "width" : "height"]: `${f}%`,
+			...r
+		},
+		...a,
+		children: n
+	});
+}, V = (e) => /* @__PURE__ */ v(B, {
+	paneRole: "aside",
+	...e
+});
+V.displayName = "Splitter.Aside";
+//#endregion
+//#region src/components/splitter/components/splitter.main.tsx
+var H = (e) => /* @__PURE__ */ v(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 = u(() => {
+		if (!(!e || i)) {
+			if (a) {
+				o(!1);
+				return;
+			}
+			s.collapsible && o(!0);
+		}
+	}, [
+		e,
+		i,
+		a,
+		s.collapsible,
+		o
+	]);
+	return { onKeyDown: u((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: d } = z(), f = u((e, n) => {
+		if (!r || l || i) return;
+		let c = t ? e : -e, u = O({
+			size: a,
+			delta: c,
+			minSize: d.minSize,
+			maxSize: d.maxSize
+		});
+		n ? s(u) : o(u);
+	}, [
+		r,
+		l,
+		i,
+		t,
+		a,
+		d.minSize,
+		d.maxSize,
+		o,
+		s
+	]), p = g(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: "Resize panes" }),
+	es: o({ resizePanes: "Resize panes" }),
+	"fr-FR": o({ resizePanes: "Resize panes" }),
+	"pt-BR": o({ resizePanes: "Resize panes" })
+}, q = ({ "aria-label": n, "aria-labelledby": o, style: s, ref: l, ...d }) => {
+	let { size: f, orientation: p, isDoubleClickDisabled: m, isDisabled: h, asideConfig: _, paneOrder: y, paneDomIds: b, collapsed: x, restoreDefaults: S } = z(), C = a(K), w = n ?? C.format("resizePanes"), T = t(c(g(null), l)), D = y[0], O = y[1], k = !!D && !!O && D !== O, j = D === "aside", M = x, { moveProps: N, applyDelta: P } = G({
+		handleRef: T,
+		asideLeads: j,
+		isReady: k,
+		isResizeLocked: M
+	}), { onKeyDown: F } = U({
+		isReady: k,
+		applyDelta: P
+	}), { separatorProps: I } = i({
+		orientation: p,
+		"aria-label": w,
+		"aria-labelledby": o
+	}), { focusProps: L, isFocusVisible: R } = r(), B = u(() => {
+		h || m || x || S();
+	}, [
+		h,
+		m,
+		x,
+		S
+	]), { min: V, max: H } = A(_, j), W = k ? j ? f : 100 - f : 0, q = k ? b[D] : void 0, J = k ? Math.round(W) : void 0, Y = p === "horizontal" ? { left: `${W}%` } : { top: `${W}%` };
+	return /* @__PURE__ */ v(E, {
+		ref: T,
+		...e(I, N, L, {
+			tabIndex: h ? -1 : 0,
+			"aria-valuenow": J,
+			"aria-valuemin": V,
+			"aria-valuemax": H,
+			"aria-valuetext": J === void 0 ? void 0 : `${J}%`,
+			"aria-orientation": p,
+			"aria-controls": q,
+			"aria-disabled": h || void 0,
+			"data-focus-visible": R || void 0,
+			"data-disabled": h || void 0,
+			"data-resize-locked": M || void 0,
+			onKeyDown: F,
+			onDoubleClick: B,
+			style: {
+				...Y,
+				...s
+			}
+		}, d)
+	});
+};
+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 = x.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, d] = _(null), p = g(null), [m, v] = _(() => o ? pe(s.getItem(o)) ?? {} : {}), y = g(m);
+	y.current = m;
+	let b = g(null), x = g(null), [S, C] = _(void 0), w = g(!1), T = g({
+		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);
+	f(() => {
+		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 = u((e) => {
+		if (!e) return;
+		let n = (e, n) => {
+			let r = t === "vertical" ? n : e;
+			!Number.isFinite(r) || r <= 0 || (p.current = r, d((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 = u((e) => {
+		if (w.current) return;
+		x.current = e, C(e);
+		let { size: t, persistKey: n } = T.current, r = p.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, v(c);
+		try {
+			s.setItem(n, me(c));
+		} catch {}
+	}, [s]), N = u((e) => {
+		w.current = e, T.current.onCollapsedChange?.(e);
+	}, []), P = S ?? A ?? void 0;
+	return { rootProps: h(() => {
+		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 { H as a, q as i, Y as n, V as o, J as r, R as s, be as t };
+
+//# sourceMappingURL=use-responsive-splitter-sizes-BgEYraHy.esm.js.map