@dashfoo/react 0.6.1 → 0.6.3

package/dist/index.js

@@ -854,6 +854,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;
@@ -1686,28 +1719,21 @@ 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 +2003,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 +2056,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,35 +2145,17 @@ 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({
+	const inputRef = useRef(null);
+	const { handleBlur, handleKeyDown } = useInlineRename({
+		currentName: floatTitle(node),
+		inputRef,
+		onCommit: (name) => dispatch({
 			floatId: node.id,
-			name: trimmed,
+			name,
 			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);
-	};
+		}),
+		onDone
+	});
 	return /* @__PURE__ */ jsx("input", {
 		"aria-label": `Rename ${floatTitle(node)}`,
 		"data-dashfoo": "float-rename",
@@ -2159,7 +2163,7 @@ const FloatTitleEditor = ({ dispatch, node, onDone }) => {
 		onBlur: handleBlur,
 		onKeyDown: handleKeyDown,
 		onPointerDown: (event) => event.stopPropagation(),
-		ref,
+		ref: inputRef,
 		style: titleStyle,
 		type: "text"
 	});
@@ -2562,12 +2566,11 @@ 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]);
+		if (isCompact && action.type === "adjustSplit") return;
+		storeDispatch(action);
+	}, [isCompact, storeDispatch]);
 	const maximized = view.maximizedTabsetId ? findTabset(view, view.maximizedTabsetId) : void 0;
 	const tree = /* @__PURE__ */ jsx(Layout.FloatLayer, {
 		floats: store.model.floats ?? [],