@commercetools/nimbus 3.1.0 → 3.2.0

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

@@ -0,0 +1,583 @@
+import { t as e } from "./mergeProps-CGu7R6EG.esm.js";
+import { t } from "./useObjectRef-ClgudS2C.esm.js";
+import { t as n } from "./useMove-BCbuxYxv.esm.js";
+import { t as r } from "./useFocusRing-CYpmjNkh.esm.js";
+import { t as i } from "./useSeparator-BARleHFH.esm.js";
+import { n as a, t as o } from "./normalize-messages-CKl8ms10.esm.js";
+import { t as s } from "./extract-style-props-4RoFSvGV.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, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _ } from "react/jsx-runtime";
+import { createSlotRecipeContext as v, useSlotRecipe as y } from "@chakra-ui/react/styled-system";
+import { themeTokens as b } from "@commercetools/nimbus-tokens";
+//#region src/components/splitter/splitter.slots.tsx
+var { withProvider: x, withContext: S } = v({ key: "nimbusSplitter" }), C = x("div", "root"), w = S("div", "pane"), T = S("div", "handle"), E = l(void 0), D = ({ size: e, delta: t, minSize: n, maxSize: r }) => Math.min(Math.max(e + t, n), r), O = (e) => e.collapsible ? Math.min(e.minSize, e.collapsedSize) : e.minSize, k = (e, t) => {
+	let n = O(e), r = e.maxSize;
+	return t ? {
+		min: n,
+		max: r
+	} : {
+		min: 100 - r,
+		max: 100 - n
+	};
+}, A = (e) => typeof e != "number" || !Number.isFinite(e) ? null : Math.min(Math.max(e, 0), 100), j = (e) => A(e) ?? 50, M = 1e-6, N = (e, t) => e === t ? !0 : e == null || t == null ? !1 : Math.abs(e - t) <= M, P = .001, F = (e) => e.includes("aside") && e.includes("main"), I = (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: _ } = e, [v, y] = g([]), [b, x] = g({}), S = r !== void 0, C = c !== void 0, w = (S ? A(r) : null) ?? j(n), T = (c ?? l ?? !1) && i.collapsible, E = T ? i.collapsedSize : w, [D, O] = g(E), k = h(E), M = h(r ?? null), I = h(!1), L = h(w), R = h(T ? w : null), [z, B] = g(l ?? !1), V = C ? c ?? !1 : z, H = h(T), U = u((e, t) => {
+		k.current = e, O(e), d?.(e), t.commit && p?.(e), H.current && e > i.collapsedSize + P && (H.current = !1, R.current = null, C || B(!1), _?.(!1));
+	}, [
+		d,
+		p,
+		i.collapsedSize,
+		C,
+		_
+	]), W = u((e) => U(e, { commit: !1 }), [U]), G = u((e) => {
+		e === void 0 ? p?.(k.current) : U(e, { commit: !0 });
+	}, [U, p]);
+	f(() => {
+		if (!F(v)) return;
+		let e = V, t = H.current;
+		if (e !== t && !(e && !i.collapsible)) if (H.current = e, e) t || (R.current = k.current), k.current = i.collapsedSize, O(i.collapsedSize);
+		else {
+			let e = R.current;
+			R.current = null;
+			let t = e ?? L.current;
+			k.current = t, O(t);
+		}
+	}, [V, v]), f(() => {
+		if (!S || !F(v) || N(r, M.current)) return;
+		let e = A(r);
+		if (e !== null) {
+			if (M.current = r ?? null, V) {
+				R.current = e;
+				return;
+			}
+			N(e, k.current) || (k.current = e, O(e));
+		}
+	}, [
+		r,
+		v,
+		V
+	]), f(() => {
+		typeof process > "u" || process.env.NODE_ENV === "production" || I.current || !S || (n === void 0 ? p === void 0 && (I.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.")) : (I.current = !0, console.warn("[Splitter] Both `size` (controlled) and `defaultSize` (uncontrolled) were provided. `defaultSize` is ignored — pass one or the other.")));
+	}, [
+		S,
+		n,
+		p
+	]);
+	let K = u((e, t) => {
+		y((t) => t.includes(e) ? t : [...t, e]), x((n) => n[e] === t ? n : {
+			...n,
+			[e]: t
+		});
+	}, []), q = u((e) => {
+		y((t) => t.filter((t) => t !== e)), x((t) => {
+			if (!(e in t)) return t;
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, []), J = u((e) => {
+		s || e !== V && (e && !i.collapsible || (C || B(e), _?.(e)));
+	}, [
+		s,
+		V,
+		i.collapsible,
+		C,
+		_
+	]), Y = u(() => {
+		if (!F(v)) return;
+		let e = L.current;
+		V && (C || (H.current = !1, R.current = null, B(!1)), _?.(!1)), G(e);
+	}, [
+		v,
+		V,
+		C,
+		_,
+		G
+	]);
+	return m(() => ({
+		size: D,
+		setSize: W,
+		commitSize: G,
+		orientation: t,
+		keyboardStep: a,
+		isDoubleClickDisabled: o,
+		isDisabled: s,
+		asideConfig: i,
+		paneOrder: v,
+		paneDomIds: b,
+		registerPane: K,
+		unregisterPane: q,
+		collapsed: V,
+		setCollapsed: J,
+		restoreDefaults: Y
+	}), [
+		D,
+		W,
+		G,
+		t,
+		a,
+		o,
+		s,
+		i,
+		v,
+		b,
+		K,
+		q,
+		V,
+		J,
+		Y
+	]);
+}, L = ({ 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: h, keyboardStep: g = 5, isDoubleClickDisabled: v = !1, isDisabled: b = !1, ref: x, ...S }) => {
+	let [w, T] = y({ key: "nimbusSplitter" }).splitVariantProps({
+		orientation: t,
+		...S
+	}), [D, O] = s(T), k = I({
+		orientation: t,
+		defaultSize: n,
+		size: r,
+		asideConfig: m(() => ({
+			minSize: i ?? 0,
+			maxSize: a ?? 100,
+			collapsible: o ?? !1,
+			collapsedSize: c ?? 0
+		}), [
+			i,
+			a,
+			o,
+			c
+		]),
+		collapsed: d,
+		defaultCollapsed: p,
+		keyboardStep: g,
+		isDoubleClickDisabled: v,
+		isDisabled: b,
+		onSizeChange: l,
+		onSizeChangeEnd: u,
+		onCollapsedChange: h
+	}), 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__ */ _(E.Provider, {
+		value: k,
+		children: /* @__PURE__ */ _(C, {
+			ref: x,
+			...w,
+			...D,
+			...O,
+			children: e
+		})
+	});
+};
+L.displayName = "Splitter.Root";
+//#endregion
+//#region src/components/splitter/hooks/use-splitter-context.ts
+var R = () => {
+	let e = d(E);
+	if (!e) throw Error("useSplitterContext must be used within a Splitter.Root");
+	return e;
+}, z = ({ paneRole: e, id: t, children: n, style: r, ref: i, ...a }) => {
+	let { size: o, orientation: s, registerPane: c, unregisterPane: l } = R(), u = p(), d = t ?? u;
+	f(() => (c(e, d), () => l(e)), [
+		e,
+		d,
+		c,
+		l
+	]);
+	let m = e === "aside" ? o : 100 - o;
+	return /* @__PURE__ */ _(w, {
+		ref: i,
+		id: d,
+		style: {
+			[s === "horizontal" ? "width" : "height"]: `${m}%`,
+			...r
+		},
+		...a,
+		children: n
+	});
+}, B = (e) => /* @__PURE__ */ _(z, {
+	paneRole: "aside",
+	...e
+});
+B.displayName = "Splitter.Aside";
+//#endregion
+//#region src/components/splitter/components/splitter.main.tsx
+var V = (e) => /* @__PURE__ */ _(z, {
+	paneRole: "main",
+	...e
+});
+V.displayName = "Splitter.Main";
+//#endregion
+//#region src/components/splitter/hooks/use-handle-keyboard.ts
+var H = ({ isReady: e, applyDelta: t }) => {
+	let { orientation: n, keyboardStep: r, isDisabled: i, collapsed: a, setCollapsed: o, asideConfig: s } = R(), 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
+	]) };
+}, U = 1e-4, W = ({ handleRef: e, asideLeads: t, isReady: r, isResizeLocked: i }) => {
+	let { size: a, setSize: o, commitSize: s, orientation: c, isDisabled: l, asideConfig: d } = R(), f = u((e, n) => {
+		if (!r || l || i) return;
+		let c = D({
+			size: a,
+			delta: t ? e : -e,
+			minSize: d.minSize,
+			maxSize: d.maxSize
+		});
+		n ? s(c) : o(c);
+	}, [
+		r,
+		l,
+		i,
+		t,
+		a,
+		d.minSize,
+		d.maxSize,
+		o,
+		s
+	]), p = h(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) < U || (p.current -= s, f(s, !1));
+		},
+		onMoveEnd() {
+			!r || l || i || s();
+		}
+	});
+	return {
+		moveProps: m,
+		applyDelta: f
+	};
+}, G = {
+	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" })
+}, K = ({ "aria-label": n, "aria-labelledby": o, style: s, ref: l, ...d }) => {
+	let { size: f, orientation: p, isDoubleClickDisabled: m, isDisabled: g, asideConfig: v, paneOrder: y, paneDomIds: b, collapsed: x, restoreDefaults: S } = R(), C = a(G), w = n ?? C.format("resizePanes"), E = t(c(h(null), l)), D = y[0], O = y[1], A = !!D && !!O && D !== O, j = D === "aside", M = x, { moveProps: N, applyDelta: P } = W({
+		handleRef: E,
+		asideLeads: j,
+		isReady: A,
+		isResizeLocked: M
+	}), { onKeyDown: F } = H({
+		isReady: A,
+		applyDelta: P
+	}), { separatorProps: I } = i({
+		orientation: p,
+		"aria-label": w,
+		"aria-labelledby": o
+	}), { focusProps: L, isFocusVisible: z } = r(), B = u(() => {
+		g || m || S();
+	}, [
+		g,
+		m,
+		S
+	]), { min: V, max: U } = k(v, j), K = A ? j ? f : 100 - f : 0, q = A ? b[D] : void 0, J = A ? Math.round(K) : void 0, Y = p === "horizontal" ? { left: `${K}%` } : { top: `${K}%` };
+	return /* @__PURE__ */ _(T, {
+		ref: E,
+		...e(I, N, L, {
+			tabIndex: g ? -1 : 0,
+			"aria-valuenow": J,
+			"aria-valuemin": V,
+			"aria-valuemax": U,
+			"aria-valuetext": J === void 0 ? void 0 : `${J}%`,
+			"aria-orientation": p,
+			"aria-controls": q,
+			"aria-disabled": g || void 0,
+			"data-focus-visible": z || void 0,
+			"data-disabled": g || void 0,
+			"data-resize-locked": M || void 0,
+			onKeyDown: F,
+			onDoubleClick: B,
+			style: {
+				...Y,
+				...s
+			}
+		}, d)
+	});
+};
+K.displayName = "Splitter.Handle";
+//#endregion
+//#region src/components/splitter/splitter.tsx
+var q = {
+	Root: L,
+	Aside: B,
+	Main: V,
+	Handle: K
+}, J = [
+	"3xs",
+	"2xs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl",
+	"4xl",
+	"5xl",
+	"6xl",
+	"7xl",
+	"8xl",
+	"breakpoint-sm",
+	"breakpoint-md",
+	"breakpoint-lg",
+	"breakpoint-xl",
+	"breakpoint-2xl"
+], Y = new Set(J), X = (e) => typeof e == "string" && Y.has(e), Z = (e) => {
+	let t = b.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, ee = /^-?\d+(?:\.\d+)?%$/, te = /^-?\d+(?:\.\d+)?$/, ne = (e) => typeof e == "string" && ee.test(e), re = (e, t) => {
+	if (typeof e == "number") return Q(t) ? e / t * 100 : null;
+	if (ne(e)) {
+		let t = parseFloat(e);
+		return Number.isFinite(t) ? t : null;
+	}
+	if (X(e)) {
+		let n = Z(e);
+		return n === null || !Q(t) ? null : n / t * 100;
+	}
+	return null;
+}, ie = (e, t = 0, n = 100) => Math.min(n, Math.max(t, e)), ae = (e, t) => e / 100 * t, oe = (e) => {
+	if (te.test(e)) {
+		let t = parseFloat(e);
+		return Number.isFinite(t) ? t : null;
+	}
+	return X(e) ? Z(e) : null;
+}, se = (e) => typeof e == "object" && !!e, ce = (e) => {
+	if (!se(e)) return [{
+		thresholdPx: 0,
+		value: e
+	}];
+	let t = [];
+	for (let [n, r] of Object.entries(e)) {
+		if (r === void 0) continue;
+		let e = oe(n);
+		e !== null && t.push({
+			thresholdPx: e,
+			value: r
+		});
+	}
+	return t.sort((e, t) => e.thresholdPx - t.thresholdPx), t;
+}, le = (e, t) => ce(e).find((e) => e.thresholdPx === t)?.value, ue = (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 = ce(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 = ue(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: re(i.value, t),
+		thresholdPx: i.thresholdPx
+	};
+}, de = (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);
+}, fe = (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) && de(t) && (r[n] = t);
+	}
+	return r;
+}, pe = (e) => JSON.stringify({
+	v: 1,
+	bands: e
+}), me = () => ({
+	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 {}
+	}
+}), he = .05, ge = .5, _e = 2, ve = me(), ye = (e) => {
+	let { orientation: t = "horizontal", size: n, minSize: r, maxSize: i, collapsedSize: a, persistKey: o, storage: s = ve, onCollapsedChange: c } = e, [l, d] = g(null), p = h(null), [_, v] = g(() => o ? fe(s.getItem(o)) ?? {} : {}), y = h(_);
+	y.current = _;
+	let b = h(null), x = h(null), [S, C] = g(void 0), w = h(!1), T = h({
+		size: n,
+		persistKey: o,
+		onCollapsedChange: c
+	});
+	T.current = {
+		size: n,
+		persistKey: o,
+		onCollapsedChange: c
+	};
+	let E = $(n, l, {
+		activeThresholdPx: b.current,
+		deadbandPx: _e,
+		stored: _
+	}), 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 : ie(E.percent, D ?? 0, O ?? 100);
+	f(() => {
+		E.thresholdPx !== null && (b.current = E.thresholdPx), A !== null && (x.current !== null && Math.abs(A - x.current) < he || (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) < ge ? e : r));
+		};
+		if (typeof ResizeObserver > "u") {
+			let t = e.getBoundingClientRect();
+			n(t.width, t.height);
+			return;
+		}
+		let r = new ResizeObserver((e) => {
+			let t = e[0];
+			t && n(t.contentRect.width, t.contentRect.height);
+		});
+		return r.observe(e), () => r.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: _e
+		});
+		if (i === null) return;
+		let a = ne(le(t, i)) ? "pct" : "px", o = a === "pct" ? e : ae(e, r), c = {
+			...y.current,
+			[i]: {
+				unit: a,
+				value: o
+			}
+		};
+		y.current = c, v(c);
+		try {
+			s.setItem(n, pe(c));
+		} catch {}
+	}, [s]), N = u((e) => {
+		w.current = e, T.current.onCollapsedChange?.(e);
+	}, []), P = S ?? A ?? void 0;
+	return { rootProps: m(() => {
+		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 { V as a, K as i, J as n, B as o, q as r, L as s, ye as t };
+
+//# sourceMappingURL=use-responsive-splitter-sizes-HQ-JjaLl.esm.js.map