group of bug fixes

src/components/RowMenu.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useEscapeLayer } from "../escape";
+import { useFocusTrap } from "../focus";
 import { Icon } from "./Icon";
 
 interface RowMenuProps {
   label: string;
   onDuplicate?: () => void;
+  onMove?: () => void;
   onDelete: () => void;
   onToggleTitle?: () => void;
   titleHidden?: boolean;
@@ -13,9 +15,10 @@ interface RowMenuProps {
   marginHidden?: boolean;
   onOpenChange?: (open: boolean) => void;
   className?: string;
+  tabIndex?: number;
 }
 
-export function RowMenu({ label, onDuplicate, onDelete, onToggleTitle, titleHidden, onToggleMargin, marginHidden, onOpenChange, className = "" }: RowMenuProps) {
+export function RowMenu({ label, onDuplicate, onMove, onDelete, onToggleTitle, titleHidden, onToggleMargin, marginHidden, onOpenChange, className = "", tabIndex }: RowMenuProps) {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -34,10 +37,7 @@ export function RowMenu({ label, onDuplicate, onDelete, onToggleTitle, titleHidd
     setOpen((v) => !v);
   };
 
-  useEffect(() => {
-    if (!open) return;
-    popRef.current?.querySelector<HTMLElement>(".row-menu-item")?.focus();
-  }, [open]);
+  useFocusTrap(popRef, open);
 
   useEscapeLayer(open, () => {
     setOpen(false);
@@ -89,6 +89,12 @@ export function RowMenu({ label, onDuplicate, onDelete, onToggleTitle, titleHidd
     onDuplicate?.();
   };
 
+  const moveOut = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setOpen(false);
+    onMove?.();
+  };
+
   const remove = (e: React.MouseEvent) => {
     e.stopPropagation();
     setOpen(false);
@@ -101,6 +107,7 @@ export function RowMenu({ label, onDuplicate, onDelete, onToggleTitle, titleHidd
         ref={btnRef}
         className={`row-menu-btn ${className}`}
         data-open={open}
+        tabIndex={tabIndex}
         title={label}
         onMouseDown={(e) => e.stopPropagation()}
         onClick={toggle}
@@ -136,6 +143,12 @@ export function RowMenu({ label, onDuplicate, onDelete, onToggleTitle, titleHidd
                 Duplicate
               </button>
             )}
+            {onMove && (
+              <button className="row-menu-item" onClick={moveOut}>
+                <Icon d="M4 12h13M13 8l4 4-4 4M20 4v16" size={14} />
+                Move to book…
+              </button>
+            )}
             <button className="row-menu-item danger" onClick={remove}>
               <Icon d="M5 7h14M10 7V5h4v2M7 7l1 13h8l1-13M10 11v6M14 11v6" size={14} />
               Delete