@dashfoo/react 0.6.2 → 0.6.4

package/dist/index.js

@@ -269,7 +269,7 @@ const usePersistence = (config, defaultModel) => {
 	const loadedKey = useRef(config?.key);
 	useEffect(() => {
 		if (config !== null && config.key !== loadedKey.current) {
-			console.warn("[dashfoo] persist key changed for a mounted layout; the displayed layout still reflects the previous key — remount (key={persistKey}) to load the new key");
+			console.warn("[dashfoo] persist key changed for a mounted layout; the displayed layout still reflects the previous key; remount (key={persistKey}) to load the new key");
 			loadedKey.current = config.key;
 		}
 	}, [config]);
@@ -352,7 +352,7 @@ const useContainerWidth = () => {
 		observerRef.current?.disconnect();
 		if (!element) return;
 		const observer = new ResizeObserver((entries) => {
-			const entry = entries[0];
+			const entry = entries.at(0);
 			if (entry) setWidth(entry.contentRect.width);
 		});
 		observer.observe(element);
@@ -591,7 +591,9 @@ const DragPreviewOverlay = ({ manager }) => {
 				y: PREVIEW_OFFSET.y + (rect ? point.y - rect.top : 0)
 			});
 		});
-		const offEnd = manager.monitor.addEventListener("dragend", () => setChip(null));
+		const offEnd = manager.monitor.addEventListener("dragend", () => {
+			setChip(null);
+		});
 		return () => {
 			offStart();
 			offEnd();
@@ -621,7 +623,9 @@ const DragPreviewOverlay = ({ manager }) => {
 //#region src/components/drag-root.tsx
 const DashfooDragProvider = ({ children }) => {
 	const [manager] = useState(createDragManager);
-	useInsertionEffect(() => () => manager.destroy(), [manager]);
+	useInsertionEffect(() => () => {
+		manager.destroy();
+	}, [manager]);
 	const [subjectStore] = useState(createDragSubjectStore);
 	return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
 		value: manager,
@@ -803,8 +807,12 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 				type: "OVER"
 			});
 		};
-		const handleMove = () => syncIntent();
-		const handleCollision = () => syncIntent();
+		const handleMove = () => {
+			syncIntent();
+		};
+		const handleCollision = () => {
+			syncIntent();
+		};
 		const handleEnd = (event) => {
 			if (event.canceled) {
 				actorRef.send({ type: "CANCEL" });
@@ -854,6 +862,39 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
 const FloatLayerContext = createContext(false);
 const useHasFloatLayer = () => useContext(FloatLayerContext);
 
+//#endregion
+//#region src/hooks/use-inline-rename.ts
+const useInlineRename = ({ currentName, inputRef, onCommit, onDone }) => {
+	const done = useRef(false);
+	useEffect(() => {
+		inputRef.current?.focus();
+		inputRef.current?.select();
+	}, [inputRef]);
+	const commit = (value) => {
+		const trimmed = value.trim();
+		if (trimmed && trimmed !== currentName) onCommit(trimmed);
+		onDone();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			done.current = true;
+			commit(event.currentTarget.value);
+		} else if (event.key === "Escape") {
+			done.current = true;
+			onDone();
+		}
+	};
+	const handleBlur = (event) => {
+		if (done.current) return;
+		done.current = true;
+		commit(event.currentTarget.value);
+	};
+	return {
+		handleBlur,
+		handleKeyDown
+	};
+};
+
 //#endregion
 //#region src/lib/float-geometry.ts
 const MIN_WIDTH = 200;
@@ -1085,7 +1126,9 @@ const panelDomId = (tabsetId) => `dashfoo-panel-${tabsetId}`;
 const tabButtonIn = (scope, tabsetId, tabId) => scope?.querySelector(`#${CSS.escape(tabDomId(tabsetId, tabId))}`) ?? null;
 const createTabsetStore = (initial) => createStore((set, get) => ({
 	...initial,
-	cancelRename: () => set({ editingTabId: null }),
+	cancelRename: () => {
+		set({ editingTabId: null });
+	},
 	closeTab: (tabId) => {
 		set({ restoreFocus: true });
 		get().dispatch({
@@ -1104,7 +1147,9 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 	overflowItems: [],
 	registerRenameInput: () => {
 		set((state) => ({ renameInputCount: state.renameInputCount + 1 }));
-		return () => set((state) => ({ renameInputCount: state.renameInputCount - 1 }));
+		return () => {
+			set((state) => ({ renameInputCount: state.renameInputCount - 1 }));
+		};
 	},
 	registerTablist: (element) => {
 		if (element) {
@@ -1116,11 +1161,13 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 		set({ tablistElement: null });
 	},
 	renameInputCount: 0,
-	renameTab: (tabId, name) => get().dispatch({
-		name,
-		tabId,
-		type: "renameTab"
-	}),
+	renameTab: (tabId, name) => {
+		get().dispatch({
+			name,
+			tabId,
+			type: "renameTab"
+		});
+	},
 	restoreFocus: false,
 	selectOverflowTab: (tabId) => {
 		const { dispatch, node, tablistElement } = get();
@@ -1143,7 +1190,7 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
 			tabsetId: node.id,
 			type: "selectTab"
 		});
-		if (options?.focus) {
+		if (options?.focus === true) {
 			const tabId = node.children[index]?.id;
 			if (tabId) tabButtonIn(tablistElement, node.id, tabId)?.focus();
 		}
@@ -1275,7 +1322,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 	useEffect(() => {
 		if (!open) return;
 		const handlePointerDown = (event) => {
-			if (event.target instanceof Node && !rootRef.current?.contains(event.target)) setOpen(false);
+			if (event.target instanceof Node && rootRef.current?.contains(event.target) !== true) setOpen(false);
 		};
 		document.addEventListener("pointerdown", handlePointerDown);
 		return () => {
@@ -1328,7 +1375,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 		}
 	};
 	const handleFocusOut = (event) => {
-		if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget)) return;
+		if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget) === true) return;
 		setOpen(false);
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -1354,7 +1401,9 @@ const TabOverflowMenu = ({ items, onSelect }) => {
 			tabIndex: -1,
 			children: items.map((item, index) => /* @__PURE__ */ jsx("button", {
 				"data-dashfoo": "tab-overflow-item",
-				onClick: () => handleSelect(item.id),
+				onClick: () => {
+					handleSelect(item.id);
+				},
 				ref: (node) => {
 					itemRefs.current[index] = node;
 				},
@@ -1385,7 +1434,9 @@ const overflowingIds = (tablist) => {
 	const box = tablist.getBoundingClientRect();
 	return [...tablist.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => {
 		const rect = tab.getBoundingClientRect();
-		return (rect.right > box.right + 1 || rect.left < box.left - 1) && tab.dataset.tabId ? [tab.dataset.tabId] : [];
+		const clipped = rect.right > box.right + 1 || rect.left < box.left - 1;
+		const tabId = tab.dataset.tabId;
+		return clipped && tabId !== void 0 && tabId !== "" ? [tabId] : [];
 	});
 };
 const useTabOverflow = (tablist, signature) => {
@@ -1686,28 +1737,23 @@ const RenameEditor = ({ defaultValue, onBlur, onKeyDown, ref: userRef, ...props
 	const { tab } = useTab();
 	const cancelRename = useTabset((state) => state.cancelRename);
 	const commitRename = useTabset((state) => state.commitRename);
-	const ref = useRef(null);
-	const done = useRef(false);
-	const refCallback = useMemo(() => mergeRefs(ref, userRef), [userRef]);
-	useEffect(() => {
-		ref.current?.focus();
-		ref.current?.select();
-	}, []);
+	const inputRef = useRef(null);
+	const rename = useInlineRename({
+		currentName: tab.name,
+		inputRef,
+		onCommit: (name) => {
+			commitRename(tab.id, name);
+		},
+		onDone: cancelRename
+	});
+	const refCallback = useMemo(() => mergeRefs(inputRef, userRef), [userRef]);
 	const handleKeyDown = (event) => {
 		onKeyDown?.(event);
-		if (event.key === "Enter") {
-			done.current = true;
-			commitRename(tab.id, event.currentTarget.value);
-		} else if (event.key === "Escape") {
-			done.current = true;
-			cancelRename();
-		}
+		rename.handleKeyDown(event);
 	};
 	const handleCommitOnBlur = (event) => {
 		onBlur?.(event);
-		if (done.current) return;
-		done.current = true;
-		commitRename(tab.id, event.currentTarget.value);
+		rename.handleBlur(event);
 	};
 	return /* @__PURE__ */ jsx("input", {
 		"aria-label": `Rename ${tab.name}`,
@@ -1977,7 +2023,6 @@ const RowView = ({ node, renderTabset }) => {
 	const orientation = node.orientation === "row" ? "horizontal" : "vertical";
 	const total = node.children.reduce((sum, child) => sum + (child.weight ?? 1), 0);
 	const desiredLayout = useMemo(() => layoutFromWeights(node.children, total), [node.children, total]);
-	const measured = useRef(false);
 	const groupRef = useRef(null);
 	const groupElement = useRef(null);
 	const syncing = useRef(false);
@@ -2031,11 +2076,8 @@ const RowView = ({ node, renderTabset }) => {
 		group.setLayout(target);
 		snapping.current = false;
 	};
-	const handleLayoutChanged = (layout) => {
-		if (!measured.current) {
-			measured.current = true;
-			return;
-		}
+	const handleLayoutChanged = (layout, meta) => {
+		if (!meta.isUserInteraction) return;
 		if (syncing.current) return;
 		const boundary = activeBoundary.current;
 		activeBoundary.current = null;
@@ -2123,43 +2165,29 @@ const CHIP_SIZE = {
 };
 const TAP_SLOP = 4;
 const FloatTitleEditor = ({ dispatch, node, onDone }) => {
-	const ref = useRef(null);
-	const done = useRef(false);
-	useEffect(() => {
-		ref.current?.focus();
-		ref.current?.select();
-	}, []);
-	const commit = (value) => {
-		const trimmed = value.trim();
-		if (trimmed && trimmed !== floatTitle(node)) dispatch({
-			floatId: node.id,
-			name: trimmed,
-			type: "renameFloat"
-		});
-		onDone();
-	};
-	const handleKeyDown = (event) => {
-		if (event.key === "Enter") {
-			done.current = true;
-			commit(event.currentTarget.value);
-		} else if (event.key === "Escape") {
-			done.current = true;
-			onDone();
-		}
-	};
-	const handleBlur = (event) => {
-		if (done.current) return;
-		done.current = true;
-		commit(event.currentTarget.value);
-	};
+	const inputRef = useRef(null);
+	const { handleBlur, handleKeyDown } = useInlineRename({
+		currentName: floatTitle(node),
+		inputRef,
+		onCommit: (name) => {
+			dispatch({
+				floatId: node.id,
+				name,
+				type: "renameFloat"
+			});
+		},
+		onDone
+	});
 	return /* @__PURE__ */ jsx("input", {
 		"aria-label": `Rename ${floatTitle(node)}`,
 		"data-dashfoo": "float-rename",
 		defaultValue: floatTitle(node),
 		onBlur: handleBlur,
 		onKeyDown: handleKeyDown,
-		onPointerDown: (event) => event.stopPropagation(),
-		ref,
+		onPointerDown: (event) => {
+			event.stopPropagation();
+		},
+		ref: inputRef,
 		style: titleStyle,
 		type: "text"
 	});
@@ -2169,11 +2197,15 @@ const FloatTitle = ({ dispatch, node, renamable }) => {
 	if (renamable && editing) return /* @__PURE__ */ jsx(FloatTitleEditor, {
 		dispatch,
 		node,
-		onDone: () => setEditing(false)
+		onDone: () => {
+			setEditing(false);
+		}
 	});
 	return /* @__PURE__ */ jsx("span", {
 		"data-dashfoo": "float-title",
-		onDoubleClick: renamable ? () => setEditing(true) : void 0,
+		onDoubleClick: renamable ? () => {
+			setEditing(true);
+		} : void 0,
 		style: titleStyle,
 		title: renamable ? "Double-click to rename" : void 0,
 		children: floatTitle(node)
@@ -2213,13 +2245,13 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 		if (prior && panel.hasPointerCapture?.(prior.pointerId)) panel.releasePointerCapture(prior.pointerId);
 		movedRef.current = false;
 		const edgeKey = event.currentTarget.dataset.edge;
-		const parent = panel.offsetParent;
+		const parent = panel.offsetParent instanceof HTMLElement ? panel.offsetParent : null;
 		const gesture = {
 			bounds: {
 				height: parent?.clientHeight ?? 0,
 				width: parent?.clientWidth ?? 0
 			},
-			edges: edgeKey ? EDGE_BY_KEY.get(edgeKey) ?? null : null,
+			edges: edgeKey === void 0 ? null : EDGE_BY_KEY.get(edgeKey) ?? null,
 			pointerId: event.pointerId,
 			start: node.geometry,
 			startX: event.clientX,
@@ -2234,9 +2266,9 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 		if (!gesture || event.pointerId !== gesture.pointerId) return;
 		gestureRef.current = null;
 		const panel = panelRef.current;
-		if (panel?.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
+		if (panel?.hasPointerCapture?.(event.pointerId) === true) panel.releasePointerCapture(event.pointerId);
 		if (!movedRef.current) {
-			if (node.minimized) restore();
+			if (node.minimized === true) restore();
 			return;
 		}
 		dispatch({
@@ -2264,11 +2296,11 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 			...gesture.start,
 			left: gesture.start.left + dx,
 			top: gesture.start.top + dy
-		}, gesture.bounds, node.minimized ? CHIP_SIZE : void 0);
+		}, gesture.bounds, node.minimized === true ? CHIP_SIZE : void 0);
 		latestRef.current = next;
 		panel.style.left = `${next.left}px`;
 		panel.style.top = `${next.top}px`;
-		if (!node.minimized) {
+		if (node.minimized !== true) {
 			panel.style.width = `${next.width}px`;
 			panel.style.height = `${next.height}px`;
 		}
@@ -2282,12 +2314,12 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 		if (!movedRef.current) return;
 		panel.style.left = `${gesture.start.left}px`;
 		panel.style.top = `${gesture.start.top}px`;
-		if (!node.minimized) {
+		if (node.minimized !== true) {
 			panel.style.width = `${gesture.start.width}px`;
 			panel.style.height = `${gesture.start.height}px`;
 		}
 	};
-	if (node.minimized) return /* @__PURE__ */ jsxs("button", {
+	if (node.minimized === true) return /* @__PURE__ */ jsxs("button", {
 		"aria-label": `Restore ${floatTitle(node)} panel`,
 		"data-dashfoo": "float-chip",
 		onKeyDown: (event) => {
@@ -2359,12 +2391,16 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 					editable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 						"aria-label": "Minimize panel",
 						"data-dashfoo": "float-minimize",
-						onClick: () => dispatch({
-							floatId: node.id,
-							minimized: true,
-							type: "setFloatMinimized"
-						}),
-						onPointerDown: (event) => event.stopPropagation(),
+						onClick: () => {
+							dispatch({
+								floatId: node.id,
+								minimized: true,
+								type: "setFloatMinimized"
+							});
+						},
+						onPointerDown: (event) => {
+							event.stopPropagation();
+						},
 						style: dockButtonStyle,
 						title: "Minimize panel",
 						type: "button",
@@ -2372,11 +2408,15 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
 					}), /* @__PURE__ */ jsx("button", {
 						"aria-label": "Dock panel back into the main layout",
 						"data-dashfoo": "float-dock",
-						onClick: () => dispatch({
-							floatId: node.id,
-							type: "dockFloat"
-						}),
-						onPointerDown: (event) => event.stopPropagation(),
+						onClick: () => {
+							dispatch({
+								floatId: node.id,
+								type: "dockFloat"
+							});
+						},
+						onPointerDown: (event) => {
+							event.stopPropagation();
+						},
 						style: dockButtonStyle,
 						title: "Dock panel back",
 						type: "button",
@@ -2438,7 +2478,9 @@ const FloatOverlay = ({ floats, global }) => {
 		children: floats.map((node) => /* @__PURE__ */ jsx(FloatPanel, {
 			global,
 			node,
-			onFocus: () => setTopId(node.id),
+			onFocus: () => {
+				setTopId(node.id);
+			},
 			zIndex: node.id === topId ? 2 : 1
 		}, node.id))
 	});
@@ -2495,48 +2537,62 @@ const DashfooLayout = forwardRef((props, ref) => {
 	});
 	const hasSharedManager = useContext(SharedDragManagerContext) !== null;
 	useImperativeHandle(ref, () => ({
-		addTab: (tab, target) => store.dispatch({
-			index: target.index,
-			location: target.location ?? "center",
-			tab,
-			targetId: target.targetId,
-			type: "addNode"
-		}),
+		addTab: (tab, target) => {
+			store.dispatch({
+				index: target.index,
+				location: target.location ?? "center",
+				tab,
+				targetId: target.targetId,
+				type: "addNode"
+			});
+		},
 		canRedo: store.canRedo,
 		canUndo: store.canUndo,
-		closeTab: (tabId) => store.dispatch({
-			tabId,
-			type: "deleteTab"
-		}),
+		closeTab: (tabId) => {
+			store.dispatch({
+				tabId,
+				type: "deleteTab"
+			});
+		},
 		dispatch: store.dispatch,
-		dockFloat: (floatId) => store.dispatch({
-			floatId,
-			type: "dockFloat"
-		}),
-		floatTab: (tabId) => store.dispatch({
-			tabId,
-			type: "floatTab"
-		}),
+		dockFloat: (floatId) => {
+			store.dispatch({
+				floatId,
+				type: "dockFloat"
+			});
+		},
+		floatTab: (tabId) => {
+			store.dispatch({
+				tabId,
+				type: "floatTab"
+			});
+		},
 		getModel: () => store.model,
-		maximizeTabset: (tabsetId) => store.dispatch({
-			tabsetId,
-			type: "setMaximizedTabset"
-		}),
+		maximizeTabset: (tabsetId) => {
+			store.dispatch({
+				tabsetId,
+				type: "setMaximizedTabset"
+			});
+		},
 		redo: store.redo,
-		renameTab: (tabId, name) => store.dispatch({
-			name,
-			tabId,
-			type: "renameTab"
-		}),
+		renameTab: (tabId, name) => {
+			store.dispatch({
+				name,
+				tabId,
+				type: "renameTab"
+			});
+		},
 		resetLayout: () => {
 			persistence.clear();
 			if (defaultModel !== void 0) store.setModel(defaultModel);
 		},
-		selectTab: (tabsetId, index) => store.dispatch({
-			index,
-			tabsetId,
-			type: "selectTab"
-		}),
+		selectTab: (tabsetId, index) => {
+			store.dispatch({
+				index,
+				tabsetId,
+				type: "selectTab"
+			});
+		},
 		undo: store.undo
 	}), [
 		defaultModel,
@@ -2562,13 +2618,12 @@ const DashfooLayout = forwardRef((props, ref) => {
 		responsive?.orientation,
 		store.model
 	]);
-	const isCompactRef = useRef(isCompact);
-	isCompactRef.current = isCompact;
+	const storeDispatch = store.dispatch;
 	const dispatch = useCallback((action) => {
-		if (isCompactRef.current && action.type === "adjustSplit") return;
-		store.dispatch(action);
-	}, [store]);
-	const maximized = view.maximizedTabsetId ? findTabset(view, view.maximizedTabsetId) : void 0;
+		if (isCompact && action.type === "adjustSplit") return;
+		storeDispatch(action);
+	}, [isCompact, storeDispatch]);
+	const maximized = view.maximizedTabsetId === void 0 ? void 0 : findTabset(view, view.maximizedTabsetId);
 	const tree = /* @__PURE__ */ jsx(Layout.FloatLayer, {
 		floats: store.model.floats ?? [],
 		global: store.model.global,