@cube-dev/ui-kit 0.194.1 → 0.195.0

package/dist/components/content/Layout/LayoutPane.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -9,13 +9,64 @@ import { useTinyScrollbar } from "./hooks/useTinyScrollbar.js";
 import { clampSize } from "./utils.js";
 import { c } from "react/compiler-runtime";
 import { INNER_STYLES, OUTER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useEffectEvent, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusRing, useHover, useMove } from "react-aria";
 
 //#region src/components/content/Layout/LayoutPane.tsx
 const HANDLER_WIDTH = 9;
 const HANDLER_RESERVED = 5;
+/** Mounted panes by element: the axis each resizes along, and how it takes a size. */
+const mountedPanes = /* @__PURE__ */ new WeakMap();
+function setPaneSize(pane, size) {
+	pane.style.setProperty("--pane-size", `${size}px`);
+}
+/** The size an element is drawn at, or `NaN` when it is not drawn. */
+function getDrawnSize(element, isHorizontal) {
+	if (!element.getClientRects().length) return NaN;
+	const style = getComputedStyle(element);
+	return parseFloat(isHorizontal ? style.width : style.height);
+}
+function givesWay(element) {
+	return parseFloat(getComputedStyle(element).flexShrink) > 0;
+}
+/** How far a flex container's items run past its content box. */
+function getOverflow(container, isHorizontal) {
+	const style = getComputedStyle(container);
+	const rect = container.getBoundingClientRect();
+	const scale = (isHorizontal ? rect.width / container.offsetWidth : rect.height / container.offsetHeight) || 1;
+	const available = isHorizontal ? container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) : container.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+	let used = 0;
+	let count = 0;
+	for (const item of Array.from(container.children)) {
+		const itemStyle = getComputedStyle(item);
+		if (itemStyle.display === "none" || itemStyle.position === "absolute" || itemStyle.position === "fixed") continue;
+		const itemRect = item.getBoundingClientRect();
+		used += isHorizontal ? itemRect.width / scale + parseFloat(itemStyle.marginLeft) + parseFloat(itemStyle.marginRight) : itemRect.height / scale + parseFloat(itemStyle.marginTop) + parseFloat(itemStyle.marginBottom);
+		count += 1;
+	}
+	const gap = parseFloat(isHorizontal ? style.columnGap : style.rowGap) || 0;
+	return used + gap * Math.max(count - 1, 0) - available;
+}
+/**
+* The other drawn panes that give way along the same axis, when this one gives
+* way in a non-wrapping flex container along it.
+*/
+function getPanesBeside(pane, isHorizontal) {
+	const container = pane.parentElement;
+	if (!container || !givesWay(pane)) return [];
+	const style = getComputedStyle(container);
+	if (style.display !== "flex" && style.display !== "inline-flex" || style.flexDirection.startsWith("row") !== isHorizontal || style.flexWrap !== "nowrap") return [];
+	return Array.from(container.children).filter((item) => item !== pane && mountedPanes.get(item)?.isHorizontal === isHorizontal && givesWay(item) && Number.isFinite(getDrawnSize(item, isHorizontal)));
+}
+/**
+* Gives the panes beside a move back their own sizes and lets go of every
+* held pane.
+*/
+function undoMove(move) {
+	move.beside.forEach((item, index) => item.style.setProperty("--pane-size", move.besideSizes[index]));
+	move.held.forEach((item) => item.style.removeProperty("flex-shrink"));
+}
 const PaneElement = tasty({
 	as: "div",
 	qa: "LayoutPane",
@@ -259,7 +310,7 @@ function PaneResizeHandler(props) {
 	return t5;
 }
 function LayoutPane(props, ref) {
-	const $ = c(73);
+	const $ = c(92);
 	const { resizeEdge: t0, isResizable: t1, size: providedSize, defaultSize: t2, minSize, maxSize, onSizeChange, scrollbar: t3, styles, mods, children, innerRef: innerRefProp, innerProps, ...otherProps } = props;
 	const resizeEdge = t0 === void 0 ? "right" : t0;
 	const isResizable = t1 === void 0 ? false : t1;
@@ -304,17 +355,77 @@ function LayoutPane(props, ref) {
 		$[8] = t6;
 	} else t6 = $[8];
 	const clampValue = t6;
+	const moveRef = useRef(null);
 	let t7;
-	if ($[9] !== clampValue || $[10] !== combinedRef || $[11] !== isHorizontal || $[12] !== isResizable || $[13] !== onSizeChange) {
-		t7 = {
+	if ($[9] !== isHorizontal || $[10] !== size) {
+		t7 = (pane, pointerType) => {
+			const drawn = getDrawnSize(pane, isHorizontal);
+			const beside = getPanesBeside(pane, isHorizontal);
+			const rounded = Math.round(drawn);
+			const start = beside.length ? drawn : Math.abs(rounded - size) >= 1 ? rounded : size;
+			const move = {
+				target: start,
+				size: start,
+				start,
+				ownSize: pane.style.getPropertyValue("--pane-size"),
+				pointerType,
+				container: beside.length ? pane.parentElement : null,
+				beside,
+				besideSizes: beside.map(_temp),
+				held: [],
+				maxOverflow: 0
+			};
+			if (move.container) {
+				const side = isHorizontal ? "left" : "top";
+				const paneStart = pane.getBoundingClientRect()[side];
+				const sizes = beside.map((item_0) => getDrawnSize(item_0, isHorizontal));
+				move.maxOverflow = Math.max(getOverflow(move.container, isHorizontal), 0);
+				move.held = [pane, ...beside.filter((item_1) => item_1.getBoundingClientRect()[side] < paneStart)];
+				beside.forEach((item_2, index) => setPaneSize(item_2, sizes[index]));
+				move.held.forEach(_temp2);
+			}
+			return move;
+		};
+		$[9] = isHorizontal;
+		$[10] = size;
+		$[11] = t7;
+	} else t7 = $[11];
+	const beginMove = t7;
+	let t8;
+	if ($[12] !== clampValue || $[13] !== combinedRef || $[14] !== isHorizontal || $[15] !== onSizeChange) {
+		t8 = (move_0) => {
+			const finalSize = Math.round(clampValue(move_0.size));
+			const pane_0 = combinedRef.current;
+			if (move_0.container) {
+				if (finalSize === Math.round(move_0.start)) {
+					undoMove(move_0);
+					pane_0.style.setProperty("--pane-size", move_0.ownSize);
+					setSize(parseFloat(move_0.ownSize));
+					return;
+				}
+				setPaneSize(pane_0, finalSize);
+				const sizes_0 = move_0.beside.map((item_4) => Math.round(getDrawnSize(item_4, isHorizontal)));
+				undoMove(move_0);
+				move_0.beside.forEach((item_5, index_0) => {
+					if (Number.isFinite(sizes_0[index_0]) && sizes_0[index_0] !== Math.round(parseFloat(move_0.besideSizes[index_0]))) mountedPanes.get(item_5)?.adoptSize(sizes_0[index_0]);
+				});
+			}
+			setSize(finalSize);
+			onSizeChange?.(finalSize);
+		};
+		$[12] = clampValue;
+		$[13] = combinedRef;
+		$[14] = isHorizontal;
+		$[15] = onSizeChange;
+		$[16] = t8;
+	} else t8 = $[16];
+	const endMove = t8;
+	let t9;
+	if ($[17] !== beginMove || $[18] !== clampValue || $[19] !== combinedRef || $[20] !== endMove || $[21] !== isHorizontal || $[22] !== isResizable) {
+		t9 = {
 			onMoveStart() {
 				if (!isResizable) return;
 				setIsDragging(true);
-				const pane = combinedRef.current;
-				if (!pane) return;
-				const style = getComputedStyle(pane);
-				const drawn = Math.round(parseFloat(isHorizontal ? style.width : style.height));
-				setSize((current) => Number.isFinite(drawn) && Math.abs(drawn - current) >= 1 ? drawn : current);
 			},
 			onMove(e) {
 				if (!isResizable) return;
@@ -323,154 +434,211 @@ function LayoutPane(props, ref) {
 					const step = e.shiftKey ? 50 : 10;
 					delta = (isHorizontal ? e.deltaX : e.deltaY) * step;
 				} else delta = isHorizontal ? e.deltaX : e.deltaY;
-				setSize((currentSize) => clampValue(currentSize + delta));
+				if (!delta) return;
+				const pane_1 = combinedRef.current;
+				const move_1 = moveRef.current ?? beginMove(pane_1, e.pointerType);
+				moveRef.current = move_1;
+				move_1.target = move_1.target + delta;
+				let next = clampValue(move_1.target);
+				if (!move_1.container) move_1.target = next;
+				else {
+					setPaneSize(pane_1, next);
+					if (next > move_1.size) {
+						const excess = getOverflow(move_1.container, isHorizontal) - move_1.maxOverflow;
+						if (excess > 0) {
+							next = Math.max(next - excess, move_1.size);
+							setPaneSize(pane_1, next);
+						}
+					}
+				}
+				move_1.size = next;
+				setSize(next);
 			},
-			onMoveEnd() {
+			onMoveEnd(e_0) {
+				const move_2 = moveRef.current;
+				if (move_2?.container && move_2.pointerType !== e_0.pointerType) return;
+				moveRef.current = null;
 				setIsDragging(false);
-				setSize((currentSize_0) => {
-					const finalSize = Math.round(clampValue(currentSize_0));
-					onSizeChange?.(finalSize);
-					return finalSize;
-				});
+				if (move_2) endMove(move_2);
 			}
 		};
-		$[9] = clampValue;
-		$[10] = combinedRef;
-		$[11] = isHorizontal;
-		$[12] = isResizable;
-		$[13] = onSizeChange;
-		$[14] = t7;
-	} else t7 = $[14];
-	const { moveProps } = useMove(t7);
-	let t8;
-	let t9;
-	if ($[15] !== clampValue || $[16] !== isDragging || $[17] !== providedSize) {
-		t8 = () => {
+		$[17] = beginMove;
+		$[18] = clampValue;
+		$[19] = combinedRef;
+		$[20] = endMove;
+		$[21] = isHorizontal;
+		$[22] = isResizable;
+		$[23] = t9;
+	} else t9 = $[23];
+	const { moveProps } = useMove(t9);
+	let t10;
+	if ($[24] !== combinedRef || $[25] !== onSizeChange) {
+		t10 = (drawn_0) => {
+			setPaneSize(combinedRef.current, drawn_0);
+			setSize(drawn_0);
+			onSizeChange?.(drawn_0);
+		};
+		$[24] = combinedRef;
+		$[25] = onSizeChange;
+		$[26] = t10;
+	} else t10 = $[26];
+	const adoptSize = useEffectEvent(t10);
+	let t11;
+	if ($[27] !== adoptSize || $[28] !== combinedRef || $[29] !== isHorizontal) {
+		t11 = () => {
+			const pane_2 = combinedRef.current;
+			mountedPanes.set(pane_2, {
+				isHorizontal,
+				adoptSize: (drawn_1) => adoptSize(drawn_1)
+			});
+			return () => {
+				mountedPanes.delete(pane_2);
+				if (moveRef.current) undoMove(moveRef.current);
+				moveRef.current = null;
+			};
+		};
+		$[27] = adoptSize;
+		$[28] = combinedRef;
+		$[29] = isHorizontal;
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] !== combinedRef || $[32] !== isHorizontal) {
+		t12 = [combinedRef, isHorizontal];
+		$[31] = combinedRef;
+		$[32] = isHorizontal;
+		$[33] = t12;
+	} else t12 = $[33];
+	useEffect(t11, t12);
+	let t13;
+	let t14;
+	if ($[34] !== clampValue || $[35] !== isDragging || $[36] !== providedSize) {
+		t13 = () => {
 			if (prevProvidedSizeRef.current !== providedSize) {
 				prevProvidedSizeRef.current = providedSize;
 				if (typeof providedSize === "number" && !isDragging) setSize(clampValue(providedSize));
 			}
 		};
-		t9 = [
+		t14 = [
 			providedSize,
 			isDragging,
 			clampValue
 		];
-		$[15] = clampValue;
-		$[16] = isDragging;
-		$[17] = providedSize;
-		$[18] = t8;
-		$[19] = t9;
+		$[34] = clampValue;
+		$[35] = isDragging;
+		$[36] = providedSize;
+		$[37] = t13;
+		$[38] = t14;
 	} else {
-		t8 = $[18];
-		t9 = $[19];
+		t13 = $[37];
+		t14 = $[38];
 	}
-	useEffect(t8, t9);
-	let t10;
-	if ($[20] !== clampValue || $[21] !== defaultSize || $[22] !== onSizeChange) {
-		t10 = () => {
+	useEffect(t13, t14);
+	let t15;
+	if ($[39] !== clampValue || $[40] !== defaultSize || $[41] !== onSizeChange) {
+		t15 = () => {
 			const clampedSize = clampValue((typeof defaultSize === "number" ? defaultSize : parseInt(defaultSize, 10)) || 200);
 			setSize(clampedSize);
 			onSizeChange?.(clampedSize);
 		};
-		$[20] = clampValue;
-		$[21] = defaultSize;
-		$[22] = onSizeChange;
-		$[23] = t10;
-	} else t10 = $[23];
-	const handleResetSize = t10;
-	let t11;
-	if ($[24] !== handleHStyle || $[25] !== handleVStyle || $[26] !== isTinyScrollbar) {
-		t11 = isTinyScrollbar ? {
+		$[39] = clampValue;
+		$[40] = defaultSize;
+		$[41] = onSizeChange;
+		$[42] = t15;
+	} else t15 = $[42];
+	const handleResetSize = t15;
+	let t16;
+	if ($[43] !== handleHStyle || $[44] !== handleVStyle || $[45] !== isTinyScrollbar) {
+		t16 = isTinyScrollbar ? {
 			...handleVStyle,
 			...handleHStyle
 		} : {};
-		$[24] = handleHStyle;
-		$[25] = handleVStyle;
-		$[26] = isTinyScrollbar;
-		$[27] = t11;
-	} else t11 = $[27];
-	const scrollbarStyle = t11;
-	const t12 = !isResizable;
-	let t13;
-	if ($[28] !== debouncedHandlerHovered || $[29] !== isDragging || $[30] !== isHandlerFocused || $[31] !== isHovered || $[32] !== isScrolling || $[33] !== mods || $[34] !== resizeEdge || $[35] !== scrollbar || $[36] !== t12) {
-		t13 = {
+		$[43] = handleHStyle;
+		$[44] = handleVStyle;
+		$[45] = isTinyScrollbar;
+		$[46] = t16;
+	} else t16 = $[46];
+	const scrollbarStyle = t16;
+	const t17 = !isResizable;
+	let t18;
+	if ($[47] !== debouncedHandlerHovered || $[48] !== isDragging || $[49] !== isHandlerFocused || $[50] !== isHovered || $[51] !== isScrolling || $[52] !== mods || $[53] !== resizeEdge || $[54] !== scrollbar || $[55] !== t17) {
+		t18 = {
 			scrollbar,
 			hovered: isHovered,
 			scrolling: isScrolling,
 			handlerHovered: debouncedHandlerHovered,
 			focused: isHandlerFocused,
-			disabled: t12,
+			disabled: t17,
 			edge: resizeEdge,
 			drag: isDragging,
 			...mods
 		};
-		$[28] = debouncedHandlerHovered;
-		$[29] = isDragging;
-		$[30] = isHandlerFocused;
-		$[31] = isHovered;
-		$[32] = isScrolling;
-		$[33] = mods;
-		$[34] = resizeEdge;
-		$[35] = scrollbar;
-		$[36] = t12;
-		$[37] = t13;
-	} else t13 = $[37];
-	const paneMods = t13;
+		$[47] = debouncedHandlerHovered;
+		$[48] = isDragging;
+		$[49] = isHandlerFocused;
+		$[50] = isHovered;
+		$[51] = isScrolling;
+		$[52] = mods;
+		$[53] = resizeEdge;
+		$[54] = scrollbar;
+		$[55] = t17;
+		$[56] = t18;
+	} else t18 = $[56];
+	const paneMods = t18;
 	const finalStyles = mergeStyles(styles, outerStyles, innerStyles ? { Inner: innerStyles } : null);
-	const t14 = `${size}px`;
-	const t15 = minSize == null ? "initial" : typeof minSize === "number" ? `${minSize}px` : minSize;
-	let t16;
-	if ($[38] !== scrollbarStyle || $[39] !== t14 || $[40] !== t15) {
-		t16 = {
+	const t19 = `${size}px`;
+	const t20 = minSize == null ? "initial" : typeof minSize === "number" ? `${minSize}px` : minSize;
+	let t21;
+	if ($[57] !== scrollbarStyle || $[58] !== t19 || $[59] !== t20) {
+		t21 = {
 			...scrollbarStyle,
-			"--pane-size": t14,
-			"--pane-min-size": t15
+			"--pane-size": t19,
+			"--pane-min-size": t20
 		};
-		$[38] = scrollbarStyle;
-		$[39] = t14;
-		$[40] = t15;
-		$[41] = t16;
-	} else t16 = $[41];
-	const paneStyle = t16;
+		$[57] = scrollbarStyle;
+		$[58] = t19;
+		$[59] = t20;
+		$[60] = t21;
+	} else t21 = $[60];
+	const paneStyle = t21;
 	const T0 = PaneElement;
-	const t17 = filterBaseProps(otherProps, { eventProps: true });
-	let t18;
-	if ($[42] !== children) {
-		t18 = /* @__PURE__ */ jsx(LayoutContextReset, { children });
-		$[42] = children;
-		$[43] = t18;
-	} else t18 = $[43];
-	let t19;
-	if ($[44] !== combinedInnerRef || $[45] !== innerProps || $[46] !== t18) {
-		t19 = /* @__PURE__ */ jsx("div", {
+	const t22 = filterBaseProps(otherProps, { eventProps: true });
+	let t23;
+	if ($[61] !== children) {
+		t23 = /* @__PURE__ */ jsx(LayoutContextReset, { children });
+		$[61] = children;
+		$[62] = t23;
+	} else t23 = $[62];
+	let t24;
+	if ($[63] !== combinedInnerRef || $[64] !== innerProps || $[65] !== t23) {
+		t24 = /* @__PURE__ */ jsx("div", {
 			ref: combinedInnerRef,
 			"data-element": "Inner",
 			...innerProps,
-			children: t18
+			children: t23
 		});
-		$[44] = combinedInnerRef;
-		$[45] = innerProps;
-		$[46] = t18;
-		$[47] = t19;
-	} else t19 = $[47];
-	let t20;
-	if ($[48] !== hasOverflowY || $[49] !== isTinyScrollbar) {
-		t20 = isTinyScrollbar && hasOverflowY && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarV" });
-		$[48] = hasOverflowY;
-		$[49] = isTinyScrollbar;
-		$[50] = t20;
-	} else t20 = $[50];
-	let t21;
-	if ($[51] !== hasOverflowX || $[52] !== isTinyScrollbar) {
-		t21 = isTinyScrollbar && hasOverflowX && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarH" });
-		$[51] = hasOverflowX;
-		$[52] = isTinyScrollbar;
-		$[53] = t21;
-	} else t21 = $[53];
-	let t22;
-	if ($[54] !== handleResetSize || $[55] !== isResizable || $[56] !== moveProps || $[57] !== resizeEdge || $[58] !== setIsHandlerFocused || $[59] !== setIsHandlerHovered) {
-		t22 = isResizable && /* @__PURE__ */ jsx(PaneResizeHandler, {
+		$[63] = combinedInnerRef;
+		$[64] = innerProps;
+		$[65] = t23;
+		$[66] = t24;
+	} else t24 = $[66];
+	let t25;
+	if ($[67] !== hasOverflowY || $[68] !== isTinyScrollbar) {
+		t25 = isTinyScrollbar && hasOverflowY && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarV" });
+		$[67] = hasOverflowY;
+		$[68] = isTinyScrollbar;
+		$[69] = t25;
+	} else t25 = $[69];
+	let t26;
+	if ($[70] !== hasOverflowX || $[71] !== isTinyScrollbar) {
+		t26 = isTinyScrollbar && hasOverflowX && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarH" });
+		$[70] = hasOverflowX;
+		$[71] = isTinyScrollbar;
+		$[72] = t26;
+	} else t26 = $[72];
+	let t27;
+	if ($[73] !== handleResetSize || $[74] !== isResizable || $[75] !== moveProps || $[76] !== resizeEdge || $[77] !== setIsHandlerFocused || $[78] !== setIsHandlerHovered) {
+		t27 = isResizable && /* @__PURE__ */ jsx(PaneResizeHandler, {
 			edge: resizeEdge,
 			isDisabled: !isResizable,
 			moveProps,
@@ -478,44 +646,50 @@ function LayoutPane(props, ref) {
 			onHoverChange: setIsHandlerHovered,
 			onFocusChange: setIsHandlerFocused
 		});
-		$[54] = handleResetSize;
-		$[55] = isResizable;
-		$[56] = moveProps;
-		$[57] = resizeEdge;
-		$[58] = setIsHandlerFocused;
-		$[59] = setIsHandlerHovered;
-		$[60] = t22;
-	} else t22 = $[60];
-	let t23;
-	if ($[61] !== T0 || $[62] !== combinedRef || $[63] !== finalStyles || $[64] !== hoverProps || $[65] !== paneMods || $[66] !== paneStyle || $[67] !== t17 || $[68] !== t19 || $[69] !== t20 || $[70] !== t21 || $[71] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(T0, {
+		$[73] = handleResetSize;
+		$[74] = isResizable;
+		$[75] = moveProps;
+		$[76] = resizeEdge;
+		$[77] = setIsHandlerFocused;
+		$[78] = setIsHandlerHovered;
+		$[79] = t27;
+	} else t27 = $[79];
+	let t28;
+	if ($[80] !== T0 || $[81] !== combinedRef || $[82] !== finalStyles || $[83] !== hoverProps || $[84] !== paneMods || $[85] !== paneStyle || $[86] !== t22 || $[87] !== t24 || $[88] !== t25 || $[89] !== t26 || $[90] !== t27) {
+		t28 = /* @__PURE__ */ jsxs(T0, {
 			ref: combinedRef,
-			...t17,
+			...t22,
 			...hoverProps,
 			mods: paneMods,
 			styles: finalStyles,
 			style: paneStyle,
 			children: [
-				t19,
-				t20,
-				t21,
-				t22
+				t24,
+				t25,
+				t26,
+				t27
 			]
 		});
-		$[61] = T0;
-		$[62] = combinedRef;
-		$[63] = finalStyles;
-		$[64] = hoverProps;
-		$[65] = paneMods;
-		$[66] = paneStyle;
-		$[67] = t17;
-		$[68] = t19;
-		$[69] = t20;
-		$[70] = t21;
-		$[71] = t22;
-		$[72] = t23;
-	} else t23 = $[72];
-	return t23;
+		$[80] = T0;
+		$[81] = combinedRef;
+		$[82] = finalStyles;
+		$[83] = hoverProps;
+		$[84] = paneMods;
+		$[85] = paneStyle;
+		$[86] = t22;
+		$[87] = t24;
+		$[88] = t25;
+		$[89] = t26;
+		$[90] = t27;
+		$[91] = t28;
+	} else t28 = $[91];
+	return t28;
+}
+function _temp2(item_3) {
+	return item_3.style.setProperty("flex-shrink", "0");
+}
+function _temp(item) {
+	return item.style.getPropertyValue("--pane-size");
 }
 const _LayoutPane = forwardRef(LayoutPane);
 _LayoutPane.displayName = "Layout.Pane";