react-panel-layout 0.6.0 → 0.6.1

package/src/demo/pages/Stack/components/StackTablet.tsx

@@ -8,6 +8,7 @@ import { useStackNavigation } from "../../../../modules/stack/useStackNavigation
 import { useStackSwipeInput } from "../../../../modules/stack/useStackSwipeInput.js";
 import { SwipeStackContent } from "../../../../modules/stack/SwipeStackContent.js";
 import { useResizeObserver } from "../../../../hooks/useResizeObserver.js";
+import { toContinuousOperationState } from "../../../../hooks/gesture/types.js";
 import type { StackPanel } from "../../../../modules/stack/types.js";
 import styles from "./StackTablet.module.css";
 import "../../../styles/stack-themes.css";
@@ -271,36 +272,53 @@ export const StackTablet: React.FC<StackTabletProps> = ({ theme = "ios" }) => {
   // Get visible panels: active + behind (for swipe reveal) + exiting (for back animation)
   const { stack, depth } = navigation.state;
 
-  // Track exiting panel when navigating back
-  const [exitingPanelId, setExitingPanelId] = React.useState<string | null>(null);
+  // Track exiting panel when navigating back.
+  // CRITICAL: exitingPanelId must be computed synchronously during render
+  // to prevent the exiting panel from being unmounted for a frame.
+  // If the panel unmounts, it loses its position state and causes a visual jump.
   const prevDepthRef = React.useRef(depth);
   const prevStackRef = React.useRef<ReadonlyArray<string>>(stack);
+  const exitingPanelClearTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [exitingPanelState, setExitingPanelState] = React.useState<string | null>(null);
 
-  // Detect when we navigate back and need to animate out
-  React.useLayoutEffect(() => {
-    const prevDepth = prevDepthRef.current;
-    const prevStack = prevStackRef.current;
+  // Compute exiting panel ID synchronously during render
+  // This ensures the panel stays in the render tree even on the navigation change render
+  const prevDepth = prevDepthRef.current;
+  const prevStack = prevStackRef.current;
+  const isNavigatingBack = depth < prevDepth;
+  const computedExitingId = isNavigatingBack ? (prevStack[prevDepth] ?? null) : null;
+
+  // Use computed value if navigating back, otherwise use state (for timeout-based cleanup)
+  const exitingPanelId = computedExitingId ?? exitingPanelState;
 
+  // Update refs and state in effect
+  React.useLayoutEffect(() => {
     // Update refs
     prevDepthRef.current = depth;
     prevStackRef.current = stack;
 
-    // Check if we went back (depth decreased)
-    if (depth < prevDepth) {
-      // The panel at prevDepth is exiting
-      const exitingId = prevStack[prevDepth];
-      if (exitingId != null) {
-        setExitingPanelId(exitingId);
-
-        // Clear exiting panel after animation completes
-        const timeoutId = setTimeout(() => {
-          setExitingPanelId(null);
-        }, THEME_DURATIONS[selectedTheme]);
+    // If we just started navigating back, update state and schedule cleanup
+    if (computedExitingId != null) {
+      setExitingPanelState(computedExitingId);
 
-        return () => clearTimeout(timeoutId);
+      // Clear any existing timeout
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
       }
+
+      // Clear exiting panel after animation completes
+      exitingPanelClearTimeoutRef.current = setTimeout(() => {
+        setExitingPanelState(null);
+        exitingPanelClearTimeoutRef.current = null;
+      }, THEME_DURATIONS[selectedTheme]);
     }
-  }, [depth, stack, selectedTheme]);
+
+    return () => {
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
+      }
+    };
+  }, [depth, stack, selectedTheme, computedExitingId]);
 
   const visiblePanelIds = React.useMemo(() => {
     const ids = [stack[depth]]; // Active panel
@@ -327,7 +345,10 @@ export const StackTablet: React.FC<StackTabletProps> = ({ theme = "ios" }) => {
               return null;
             }
 
-            const isExiting = panelId === exitingPanelId;
+            // Panel is only "exiting" if it matches exitingPanelId AND is not in current stack
+            // This prevents the bug where a re-pushed panel is incorrectly treated as exiting
+            const isInCurrentStack = stack.includes(panelId);
+            const isExiting = panelId === exitingPanelId && !isInCurrentStack;
             // For exiting panels, use depth + 1 since they were previously at the active position
             const panelDepth = isExiting ? depth + 1 : stack.indexOf(panelId);
             const isActive = panelDepth === depth && !isExiting;
@@ -339,7 +360,7 @@ export const StackTablet: React.FC<StackTabletProps> = ({ theme = "ios" }) => {
                 depth={panelDepth}
                 navigationDepth={depth}
                 isActive={isActive}
-                inputState={inputState}
+                operationState={toContinuousOperationState(inputState)}
                 containerSize={containerSize}
                 animateOnMount={true}
                 animationDuration={THEME_DURATIONS[selectedTheme]}

package/src/demo/routes.tsx

@@ -27,6 +27,13 @@ import PL_Overlays from "./pages/PanelLayout/draggable-overlays";
 import DR_Basics from "./pages/Drawer/basics";
 import DR_Menu from "./pages/Drawer/menu";
 import DR_Animations from "./pages/Drawer/animations";
+import DR_Swipe from "./pages/Drawer/swipe";
+
+import DL_Modal from "./pages/Dialog/modal";
+import DL_Alerts from "./pages/Dialog/alerts";
+import DL_CustomAlert from "./pages/Dialog/custom-alert";
+import DL_Swipe from "./pages/Dialog/swipe";
+import DL_Card from "./pages/Dialog/card";
 
 import PS_Preview from "./pages/PanelSystem/preview";
 import PS_Tabbar from "./pages/PanelSystem/tabbar";
@@ -46,7 +53,7 @@ import ST_Tablet from "./pages/Stack/tablet";
 
 import SH_Basics from "./pages/StickyHeader/basics";
 
-import { FiGrid, FiLayers, FiColumns, FiMaximize2, FiBox, FiCpu, FiSmartphone, FiSidebar, FiNavigation, FiImage } from "react-icons/fi";
+import { FiGrid, FiLayers, FiColumns, FiMaximize2, FiBox, FiCpu, FiSmartphone, FiSidebar, FiNavigation, FiImage, FiMessageSquare } from "react-icons/fi";
 
 export type DemoPage = {
   id: string;
@@ -85,6 +92,20 @@ export const demoCategories: DemoCategory[] = [
       { id: "basics", label: "Basics", path: "basics", element: <DR_Basics /> },
       { id: "menu", label: "Menu", path: "menu", element: <DR_Menu /> },
       { id: "animations", label: "Animations", path: "animations", element: <DR_Animations /> },
+      { id: "swipe", label: "Swipe Gestures", path: "swipe", element: <DR_Swipe /> },
+    ],
+  },
+  {
+    id: "dialog",
+    label: "Dialog",
+    icon: <FiMessageSquare />,
+    base: "/components/dialog",
+    pages: [
+      { id: "modal", label: "Modal", path: "modal", element: <DL_Modal /> },
+      { id: "alerts", label: "Alert / Confirm / Prompt", path: "alerts", element: <DL_Alerts /> },
+      { id: "custom-alert", label: "Custom Alert Component", path: "custom-alert", element: <DL_CustomAlert /> },
+      { id: "swipe", label: "Swipe Dismiss", path: "swipe", element: <DL_Swipe /> },
+      { id: "card", label: "Card Expansion", path: "card", element: <DL_Card /> },
     ],
   },
   {

package/src/dialog/index.ts

@@ -0,0 +1,85 @@
+/**
+ * @file Dialog entry point - Modal and alert/confirm/prompt dialogs
+ * @packageDocumentation
+ *
+ * This is a subpath export entry point for `react-panel-layout/dialog`.
+ *
+ * ## Overview
+ * Dialog provides modal dialogs and imperative alert/confirm/prompt APIs
+ * using native HTML dialog element for proper accessibility and top-layer rendering.
+ *
+ * ## Installation
+ * ```ts
+ * import { Modal, useDialog, DialogContainer } from "react-panel-layout/dialog";
+ * ```
+ *
+ * ## Modal Usage
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Modal
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   header={{ title: "Settings" }}
+ * >
+ *   <form>
+ *     <input type="text" placeholder="Name" />
+ *     <button type="submit">Save</button>
+ *   </form>
+ * </Modal>
+ * ```
+ *
+ * ## useDialog Hook Usage
+ * ```tsx
+ * function MyComponent() {
+ *   const { alert, confirm, prompt, Outlet } = useDialog();
+ *
+ *   const handleClick = async () => {
+ *     await alert("Hello!");
+ *
+ *     const confirmed = await confirm({
+ *       message: "Are you sure?",
+ *       confirmLabel: "Yes",
+ *       cancelLabel: "No",
+ *     });
+ *
+ *     if (confirmed) {
+ *       const name = await prompt({
+ *         message: "Enter your name:",
+ *         defaultValue: "Anonymous",
+ *       });
+ *       console.log("Name:", name);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleClick}>Show dialogs</button>
+ *       <Outlet />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+
+// Components
+export { Modal } from "../modules/dialog/Modal.js";
+export { DialogContainer } from "../modules/dialog/DialogContainer.js";
+export { AlertDialog } from "../modules/dialog/AlertDialog.js";
+
+// Hooks
+export { useDialog } from "../modules/dialog/useDialog.js";
+export { useDialogContainer } from "../modules/dialog/useDialogContainer.js";
+
+// Types
+export type {
+  ModalProps,
+  ModalHeader,
+  DialogContainerProps,
+  DialogTransitionMode,
+  AlertOptions,
+  ConfirmOptions,
+  PromptOptions,
+  AlertDialogProps,
+  UseDialogReturn,
+} from "../modules/dialog/types.js";

package/src/hooks/gesture/testing/createGestureSimulator.spec.ts

@@ -1,158 +1,162 @@
 /**
  * @file Tests for gesture simulator utilities.
  */
-/* eslint-disable no-restricted-globals, no-restricted-properties -- test utilities need vi for timing and mocks */
 import {
   createGestureSimulator,
   createMockContainer,
   createMockContainerRef,
 } from "./createGestureSimulator.js";
 
-describe("createGestureSimulator", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
+type EventTracker = {
+  calls: ReadonlyArray<PointerEvent>;
+  handler: (event: Event) => void;
+};
 
-  afterEach(() => {
-    vi.useRealTimers();
-  });
+const createEventTracker = (): EventTracker => {
+  const calls: PointerEvent[] = [];
+  const handler = (event: Event): void => {
+    calls.push(event as PointerEvent);
+  };
+  return { calls, handler };
+};
 
+describe("createGestureSimulator", () => {
   describe("pointerDown", () => {
     it("dispatches pointerdown event", () => {
       const simulator = createGestureSimulator();
-      const handler = vi.fn();
-      document.addEventListener("pointerdown", handler);
+      const tracker = createEventTracker();
+      document.addEventListener("pointerdown", tracker.handler);
 
       simulator.pointerDown(100, 200);
 
-      expect(handler).toHaveBeenCalledTimes(1);
-      const event = handler.mock.calls[0][0] as PointerEvent;
+      expect(tracker.calls).toHaveLength(1);
+      const event = tracker.calls[0] as PointerEvent;
       expect(event.clientX).toBe(100);
       expect(event.clientY).toBe(200);
       expect(event.pointerType).toBe("touch");
       expect(event.pointerId).toBe(1);
 
-      document.removeEventListener("pointerdown", handler);
+      document.removeEventListener("pointerdown", tracker.handler);
     });
   });
 
   describe("pointerMove", () => {
     it("dispatches pointermove event after pointerdown", () => {
       const simulator = createGestureSimulator();
-      const handler = vi.fn();
-      document.addEventListener("pointermove", handler);
+      const tracker = createEventTracker();
+      document.addEventListener("pointermove", tracker.handler);
 
       simulator.pointerDown(100, 100);
       simulator.pointerMove(150, 120);
 
-      expect(handler).toHaveBeenCalledTimes(1);
-      const event = handler.mock.calls[0][0] as PointerEvent;
+      expect(tracker.calls).toHaveLength(1);
+      const event = tracker.calls[0] as PointerEvent;
       expect(event.clientX).toBe(150);
       expect(event.clientY).toBe(120);
 
-      document.removeEventListener("pointermove", handler);
+      document.removeEventListener("pointermove", tracker.handler);
     });
 
     it("does not dispatch pointermove if pointer is not down", () => {
       const simulator = createGestureSimulator();
-      const handler = vi.fn();
-      document.addEventListener("pointermove", handler);
+      const tracker = createEventTracker();
+      document.addEventListener("pointermove", tracker.handler);
 
       simulator.pointerMove(150, 120);
 
-      expect(handler).not.toHaveBeenCalled();
+      expect(tracker.calls).toHaveLength(0);
 
-      document.removeEventListener("pointermove", handler);
+      document.removeEventListener("pointermove", tracker.handler);
     });
   });
 
   describe("pointerUp", () => {
     it("dispatches pointerup event", () => {
       const simulator = createGestureSimulator();
-      const handler = vi.fn();
-      document.addEventListener("pointerup", handler);
+      const tracker = createEventTracker();
+      document.addEventListener("pointerup", tracker.handler);
 
       simulator.pointerDown(100, 100);
       simulator.pointerUp();
 
-      expect(handler).toHaveBeenCalledTimes(1);
+      expect(tracker.calls).toHaveLength(1);
 
-      document.removeEventListener("pointerup", handler);
+      document.removeEventListener("pointerup", tracker.handler);
     });
 
     it("does not dispatch pointerup if pointer is not down", () => {
       const simulator = createGestureSimulator();
-      const handler = vi.fn();
-      document.addEventListener("pointerup", handler);
+      const tracker = createEventTracker();
+      document.addEventListener("pointerup", tracker.handler);
 
       simulator.pointerUp();
 
-      expect(handler).not.toHaveBeenCalled();
+      expect(tracker.calls).toHaveLength(0);
 
-      document.removeEventListener("pointerup", handler);
+      document.removeEventListener("pointerup", tracker.handler);
     });
   });
 
   describe("swipe", () => {
     it("dispatches complete swipe sequence", () => {
       const simulator = createGestureSimulator();
-      const downHandler = vi.fn();
-      const moveHandler = vi.fn();
-      const upHandler = vi.fn();
+      const downTracker = createEventTracker();
+      const moveTracker = createEventTracker();
+      const upTracker = createEventTracker();
 
-      document.addEventListener("pointerdown", downHandler);
-      document.addEventListener("pointermove", moveHandler);
-      document.addEventListener("pointerup", upHandler);
+      document.addEventListener("pointerdown", downTracker.handler);
+      document.addEventListener("pointermove", moveTracker.handler);
+      document.addEventListener("pointerup", upTracker.handler);
 
       simulator.swipe({ x: 100, y: 100 }, { x: 200, y: 100 }, 5);
 
-      expect(downHandler).toHaveBeenCalledTimes(1);
-      expect(moveHandler).toHaveBeenCalledTimes(5); // 5 steps
-      expect(upHandler).toHaveBeenCalledTimes(1);
+      expect(downTracker.calls).toHaveLength(1);
+      expect(moveTracker.calls).toHaveLength(5); // 5 steps
+      expect(upTracker.calls).toHaveLength(1);
 
       // Check intermediate positions
-      const lastMove = moveHandler.mock.calls[4][0] as PointerEvent;
+      const lastMove = moveTracker.calls[4] as PointerEvent;
       expect(lastMove.clientX).toBe(200);
       expect(lastMove.clientY).toBe(100);
 
-      document.removeEventListener("pointerdown", downHandler);
-      document.removeEventListener("pointermove", moveHandler);
-      document.removeEventListener("pointerup", upHandler);
+      document.removeEventListener("pointerdown", downTracker.handler);
+      document.removeEventListener("pointermove", moveTracker.handler);
+      document.removeEventListener("pointerup", upTracker.handler);
     });
   });
 
   describe("edgeSwipe", () => {
     it("simulates left edge swipe", () => {
       const simulator = createGestureSimulator();
-      const downHandler = vi.fn();
-      const upHandler = vi.fn();
+      const downTracker = createEventTracker();
+      const upTracker = createEventTracker();
 
-      document.addEventListener("pointerdown", downHandler);
-      document.addEventListener("pointerup", upHandler);
+      document.addEventListener("pointerdown", downTracker.handler);
+      document.addEventListener("pointerup", upTracker.handler);
 
       simulator.edgeSwipe("left", 100, 300);
 
-      expect(downHandler).toHaveBeenCalledTimes(1);
-      const downEvent = downHandler.mock.calls[0][0] as PointerEvent;
+      expect(downTracker.calls).toHaveLength(1);
+      const downEvent = downTracker.calls[0] as PointerEvent;
       expect(downEvent.clientX).toBe(10); // Edge offset
-      expect(upHandler).toHaveBeenCalledTimes(1);
+      expect(upTracker.calls).toHaveLength(1);
 
-      document.removeEventListener("pointerdown", downHandler);
-      document.removeEventListener("pointerup", upHandler);
+      document.removeEventListener("pointerdown", downTracker.handler);
+      document.removeEventListener("pointerup", upTracker.handler);
     });
 
     it("simulates right edge swipe", () => {
       const simulator = createGestureSimulator();
-      const downHandler = vi.fn();
+      const downTracker = createEventTracker();
 
-      document.addEventListener("pointerdown", downHandler);
+      document.addEventListener("pointerdown", downTracker.handler);
 
       simulator.edgeSwipe("right", 100, 300);
 
-      const downEvent = downHandler.mock.calls[0][0] as PointerEvent;
+      const downEvent = downTracker.calls[0] as PointerEvent;
       expect(downEvent.clientX).toBe(290); // containerSize - edgeOffset
 
-      document.removeEventListener("pointerdown", downHandler);
+      document.removeEventListener("pointerdown", downTracker.handler);
     });
   });
 
@@ -172,28 +176,28 @@ describe("createGestureSimulator", () => {
   describe("options", () => {
     it("respects custom pointer type", () => {
       const simulator = createGestureSimulator({ pointerType: "mouse" });
-      const handler = vi.fn();
-      document.addEventListener("pointerdown", handler);
+      const tracker = createEventTracker();
+      document.addEventListener("pointerdown", tracker.handler);
 
       simulator.pointerDown(100, 100);
 
-      const event = handler.mock.calls[0][0] as PointerEvent;
+      const event = tracker.calls[0] as PointerEvent;
       expect(event.pointerType).toBe("mouse");
 
-      document.removeEventListener("pointerdown", handler);
+      document.removeEventListener("pointerdown", tracker.handler);
     });
 
     it("respects custom pointer ID", () => {
       const simulator = createGestureSimulator({ pointerId: 5 });
-      const handler = vi.fn();
-      document.addEventListener("pointerdown", handler);
+      const tracker = createEventTracker();
+      document.addEventListener("pointerdown", tracker.handler);
 
       simulator.pointerDown(100, 100);
 
-      const event = handler.mock.calls[0][0] as PointerEvent;
+      const event = tracker.calls[0] as PointerEvent;
       expect(event.pointerId).toBe(5);
 
-      document.removeEventListener("pointerdown", handler);
+      document.removeEventListener("pointerdown", tracker.handler);
     });
   });
 });