react-panel-layout 0.6.0 → 0.6.1

package/src/demo/pages/Stack/components/StackBasics.spec.tsx

@@ -0,0 +1,152 @@
+/**
+ * @file Tests for StackBasics component logic.
+ *
+ * These tests focus on the panel visibility and depth calculation logic,
+ * particularly around the exitingPanelId handling during rapid navigation.
+ */
+import { describe, it, expect } from "vitest";
+
+/**
+ * Pure function version of the isExiting logic for testing.
+ * This matches the logic in StackBasics.tsx.
+ */
+function computeIsExiting(
+  panelId: string,
+  exitingPanelId: string | null,
+  stack: readonly string[],
+): boolean {
+  // FIX: Check if panel is in current stack - if so, it's not exiting
+  const isInCurrentStack = stack.includes(panelId);
+  return panelId === exitingPanelId && !isInCurrentStack;
+}
+
+/**
+ * Pure function version of panelDepth calculation.
+ */
+function computePanelDepth(
+  panelId: string,
+  isExiting: boolean,
+  stack: readonly string[],
+  depth: number,
+): number {
+  return isExiting ? depth + 1 : stack.indexOf(panelId);
+}
+
+describe("StackBasics panel calculation logic", () => {
+  describe("isExiting calculation", () => {
+    it("returns true when panel is exitingPanelId and not in stack", () => {
+      // Back navigation: detail was removed from stack but exitingPanelId is set
+      const result = computeIsExiting("detail", "detail", ["list"]);
+      expect(result).toBe(true);
+    });
+
+    it("returns false when panel is in current stack even if it matches exitingPanelId", () => {
+      // Bug scenario: user pushed detail again before exitingPanelId timeout cleared
+      // detail is in stack but exitingPanelId is still "detail"
+      const result = computeIsExiting("detail", "detail", ["list", "detail"]);
+      expect(result).toBe(false);
+    });
+
+    it("returns false when panel does not match exitingPanelId", () => {
+      const result = computeIsExiting("list", "detail", ["list"]);
+      expect(result).toBe(false);
+    });
+
+    it("returns false when exitingPanelId is null", () => {
+      const result = computeIsExiting("detail", null, ["list", "detail"]);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe("panelDepth calculation", () => {
+    it("returns correct depth for active panel in stack", () => {
+      const isExiting = computeIsExiting("detail", null, ["list", "detail"]);
+      const depth = computePanelDepth("detail", isExiting, ["list", "detail"], 1);
+      expect(depth).toBe(1);
+    });
+
+    it("returns depth + 1 for exiting panel", () => {
+      const isExiting = computeIsExiting("detail", "detail", ["list"]);
+      const depth = computePanelDepth("detail", isExiting, ["list"], 0);
+      expect(depth).toBe(1); // 0 + 1
+    });
+
+    it("returns correct depth for re-pushed panel (not exiting)", () => {
+      // Bug scenario: detail was exiting but got re-pushed
+      // Should use stack.indexOf, not depth + 1
+      const stack = ["list", "detail"];
+      const isExiting = computeIsExiting("detail", "detail", stack);
+      const depth = computePanelDepth("detail", isExiting, stack, 1);
+      expect(depth).toBe(1); // stack.indexOf("detail") = 1, NOT depth + 1 = 2
+    });
+  });
+
+  describe("rapid navigation scenarios", () => {
+    it("handles push → back → push sequence correctly", () => {
+      // Initial: list active
+      let stack: readonly string[] = ["list"];
+      let depth = 0;
+      let exitingPanelId: string | null = null;
+
+      // Push detail
+      stack = ["list", "detail"];
+      depth = 1;
+
+      // Back to list (detail becomes exiting)
+      stack = ["list"];
+      depth = 0;
+      exitingPanelId = "detail";
+
+      // Verify detail is exiting
+      let isExiting = computeIsExiting("detail", exitingPanelId, stack);
+      expect(isExiting).toBe(true);
+
+      // Push detail again BEFORE exitingPanelId clears
+      stack = ["list", "detail"];
+      depth = 1;
+      // exitingPanelId is still "detail" (timeout hasn't fired yet)
+
+      // Now detail should NOT be exiting because it's in the stack
+      isExiting = computeIsExiting("detail", exitingPanelId, stack);
+      expect(isExiting).toBe(false);
+
+      // Panel depth should be correct
+      const panelDepth = computePanelDepth("detail", isExiting, stack, depth);
+      expect(panelDepth).toBe(1); // Not 2!
+    });
+
+    it("handles deep navigation with rapid back operations", () => {
+      // Initial: list → detail → edit
+      let stack: readonly string[] = ["list", "detail", "edit"];
+      let depth = 2;
+      let exitingPanelId: string | null = null;
+
+      // Back to detail (edit becomes exiting)
+      stack = ["list", "detail"];
+      depth = 1;
+      exitingPanelId = "edit";
+
+      const editIsExiting = computeIsExiting("edit", exitingPanelId, stack);
+      expect(editIsExiting).toBe(true);
+
+      // Back to list immediately (detail becomes exiting, edit timeout still pending)
+      stack = ["list"];
+      depth = 0;
+      exitingPanelId = "detail"; // Updated to detail
+
+      const detailIsExiting = computeIsExiting("detail", exitingPanelId, stack);
+      expect(detailIsExiting).toBe(true);
+
+      // Push to detail again
+      stack = ["list", "detail"];
+      depth = 1;
+      // exitingPanelId still "detail"
+
+      const detailIsExitingAfterPush = computeIsExiting("detail", exitingPanelId, stack);
+      expect(detailIsExitingAfterPush).toBe(false);
+
+      const detailDepth = computePanelDepth("detail", detailIsExitingAfterPush, stack, depth);
+      expect(detailDepth).toBe(1);
+    });
+  });
+});

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

@@ -1,13 +1,18 @@
 /**
  * @file Stack Navigation demo - iOS-style hierarchical navigation
+ * Uses SwipeStackContent for direct DOM manipulation during swipe gestures.
  */
 import * as React from "react";
 import { useStackNavigation } from "../../../../modules/stack/useStackNavigation.js";
 import { useStackSwipeInput } from "../../../../modules/stack/useStackSwipeInput.js";
-import { StackContent } from "../../../../modules/stack/StackContent.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 "./Stack.module.css";
 
+const ANIMATION_DURATION = 300;
+
 const panels: StackPanel[] = [
   {
     id: "list",
@@ -61,16 +66,78 @@ export const StackBasics: React.FC = () => {
   const navigation = useStackNavigation({
     panels,
     displayMode: "overlay",
-    transitionMode: "css",
+    transitionMode: "none", // Using direct DOM manipulation
   });
 
-  const { isEdgeSwiping, progress, containerProps } = useStackSwipeInput({
+  const { isEdgeSwiping, progress, inputState, containerProps } = useStackSwipeInput({
     containerRef,
     navigation,
     edge: "left",
     edgeWidth: 30,
   });
 
+  // Track container size for SwipeStackContent
+  const { rect } = useResizeObserver(containerRef, { box: "border-box" });
+  const containerSize = rect?.width ?? 0;
+
+  const { stack, depth } = navigation.state;
+
+  // 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.
+  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);
+
+  // Compute exiting panel ID synchronously during render
+  const prevDepth = prevDepthRef.current;
+  const prevStack = prevStackRef.current;
+  const isNavigatingBack = depth < prevDepth;
+  const computedExitingId = isNavigatingBack ? (prevStack[prevDepth] ?? null) : null;
+  const exitingPanelId = computedExitingId ?? exitingPanelState;
+
+  // Update refs and state in effect
+  React.useLayoutEffect(() => {
+    prevDepthRef.current = depth;
+    prevStackRef.current = stack;
+
+    if (computedExitingId != null) {
+      setExitingPanelState(computedExitingId);
+
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
+      }
+
+      exitingPanelClearTimeoutRef.current = setTimeout(() => {
+        setExitingPanelState(null);
+        exitingPanelClearTimeoutRef.current = null;
+      }, ANIMATION_DURATION);
+    }
+
+    return () => {
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
+      }
+    };
+  }, [depth, stack, computedExitingId]);
+
+  // Get visible panel IDs: active + behind (for swipe reveal) + exiting (for back animation)
+  const visiblePanelIds = React.useMemo(() => {
+    const ids: string[] = [];
+    // Behind panel (if exists)
+    if (depth > 0) {
+      ids.push(stack[depth - 1]);
+    }
+    // Active panel
+    ids.push(stack[depth]);
+    // Include exiting panel if not already in the list
+    if (exitingPanelId != null && !ids.includes(exitingPanelId)) {
+      ids.push(exitingPanelId);
+    }
+    return ids;
+  }, [stack, depth, exitingPanelId]);
+
   const handleItemClick = (item: typeof listItems[0]) => {
     setSelectedItem(item);
     navigation.push("detail");
@@ -98,11 +165,93 @@ export const StackBasics: React.FC = () => {
   const showBackButton = navigation.state.depth > 0;
   const showEditButton = navigation.state.depth === 1;
 
+  const renderBackButton = (): React.ReactNode => {
+    if (!showBackButton) {
+      return null;
+    }
+    return <BackButton onClick={backButtonProps.onClick} disabled={backButtonProps.disabled} />;
+  };
+
+  const renderPanelContent = (panelId: string): React.ReactNode => {
+    if (panelId === "list") {
+      return (
+        <div className={styles.panel}>
+          <ul className={styles.list}>
+            {listItems.map((item) => (
+              <li key={item.id} className={styles.listItem}>
+                <button
+                  className={styles.listItemButton}
+                  onClick={() => handleItemClick(item)}
+                >
+                  <span className={styles.listItemName}>{item.name}</span>
+                  <span className={styles.listItemDesc}>{item.description}</span>
+                  <span className={styles.chevron}>→</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    }
+
+    if (panelId === "detail") {
+      return (
+        <div className={styles.panel}>
+          <div className={styles.detailContent}>
+            <h2>{selectedItem?.name}</h2>
+            <p>{selectedItem?.description}</p>
+            <div className={styles.detailMeta}>
+              <span>ID: {selectedItem?.id}</span>
+            </div>
+            <p className={styles.hint}>
+              Swipe from the left edge to go back, or tap the Back button.
+            </p>
+          </div>
+        </div>
+      );
+    }
+
+    if (panelId === "edit") {
+      return (
+        <div className={styles.panel}>
+          <div className={styles.editContent}>
+            <h2>Edit {selectedItem?.name}</h2>
+            <div className={styles.form}>
+              <label className={styles.label}>
+                Name
+                <input
+                  type="text"
+                  className={styles.input}
+                  defaultValue={selectedItem?.name}
+                />
+              </label>
+              <label className={styles.label}>
+                Description
+                <textarea
+                  className={styles.textarea}
+                  defaultValue={selectedItem?.description}
+                />
+              </label>
+            </div>
+            <button
+              className={styles.saveButton}
+              onClick={() => navigation.go(-1)}
+            >
+              Save Changes
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
   return (
     <div className={styles.container}>
       {/* Header */}
       <header className={styles.header}>
-        {showBackButton && <BackButton onClick={backButtonProps.onClick} disabled={backButtonProps.disabled} />}
+        {renderBackButton()}
         <h1 className={styles.title}>{getHeaderTitle()}</h1>
         {showEditButton ? <EditButton onClick={handleEdit} /> : null}
       </header>
@@ -113,97 +262,32 @@ export const StackBasics: React.FC = () => {
         className={styles.stackContainer}
         {...containerProps}
       >
-        {/* List Panel */}
-        <StackContent
-          id="list"
-          depth={0}
-          isActive={navigation.currentPanelId === "list"}
-          displayMode="overlay"
-          transitionMode="css"
-          navigationState={navigation.state}
-          swipeProgress={navigation.currentPanelId === "list" ? progress : undefined}
-        >
-          <div className={styles.panel}>
-            <ul className={styles.list}>
-              {listItems.map((item) => (
-                <li key={item.id} className={styles.listItem}>
-                  <button
-                    className={styles.listItemButton}
-                    onClick={() => handleItemClick(item)}
-                  >
-                    <span className={styles.listItemName}>{item.name}</span>
-                    <span className={styles.listItemDesc}>{item.description}</span>
-                    <span className={styles.chevron}>→</span>
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </StackContent>
-
-        {/* Detail Panel */}
-        <StackContent
-          id="detail"
-          depth={1}
-          isActive={navigation.currentPanelId === "detail"}
-          displayMode="overlay"
-          transitionMode="css"
-          navigationState={navigation.state}
-          swipeProgress={navigation.currentPanelId === "detail" ? progress : undefined}
-        >
-          <div className={styles.panel}>
-            <div className={styles.detailContent}>
-              <h2>{selectedItem?.name}</h2>
-              <p>{selectedItem?.description}</p>
-              <div className={styles.detailMeta}>
-                <span>ID: {selectedItem?.id}</span>
-              </div>
-              <p className={styles.hint}>
-                Swipe from the left edge to go back, or tap the Back button.
-              </p>
-            </div>
-          </div>
-        </StackContent>
-
-        {/* Edit Panel */}
-        <StackContent
-          id="edit"
-          depth={2}
-          isActive={navigation.currentPanelId === "edit"}
-          displayMode="overlay"
-          transitionMode="css"
-          navigationState={navigation.state}
-          swipeProgress={navigation.currentPanelId === "edit" ? progress : undefined}
-        >
-          <div className={styles.panel}>
-            <div className={styles.editContent}>
-              <h2>Edit {selectedItem?.name}</h2>
-              <div className={styles.form}>
-                <label className={styles.label}>
-                  Name
-                  <input
-                    type="text"
-                    className={styles.input}
-                    defaultValue={selectedItem?.name}
-                  />
-                </label>
-                <label className={styles.label}>
-                  Description
-                  <textarea
-                    className={styles.textarea}
-                    defaultValue={selectedItem?.description}
-                  />
-                </label>
-              </div>
-              <button
-                className={styles.saveButton}
-                onClick={() => navigation.go(-1)}
-              >
-                Save Changes
-              </button>
-            </div>
-          </div>
-        </StackContent>
+        {visiblePanelIds.map((panelId) => {
+          // 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;
+
+          return (
+            <SwipeStackContent
+              key={panelId}
+              id={panelId}
+              depth={panelDepth}
+              navigationDepth={depth}
+              isActive={isActive}
+              operationState={toContinuousOperationState(inputState)}
+              containerSize={containerSize}
+              animateOnMount={true}
+              animationDuration={ANIMATION_DURATION}
+              displayMode="overlay"
+            >
+              {renderPanelContent(panelId)}
+            </SwipeStackContent>
+          );
+        })}
       </div>
 
       {/* Debug info */}

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

@@ -0,0 +1,120 @@
+/**
+ * @file Tests for StackTablet component logic.
+ *
+ * These tests focus on the panel visibility and depth calculation logic,
+ * particularly around the exitingPanelId handling during rapid navigation.
+ */
+import { describe, it, expect } from "vitest";
+
+/**
+ * Pure function version of the isExiting logic for testing.
+ * This matches the logic in StackTablet.tsx.
+ */
+function computeIsExiting(
+  panelId: string,
+  exitingPanelId: string | null,
+  stack: readonly string[],
+): boolean {
+  // FIX: Check if panel is in current stack - if so, it's not exiting
+  const isInCurrentStack = stack.includes(panelId);
+  return panelId === exitingPanelId && !isInCurrentStack;
+}
+
+/**
+ * Pure function version of panelDepth calculation.
+ */
+function computePanelDepth(
+  panelId: string,
+  isExiting: boolean,
+  stack: readonly string[],
+  depth: number,
+): number {
+  return isExiting ? depth + 1 : stack.indexOf(panelId);
+}
+
+describe("StackTablet panel calculation logic", () => {
+  describe("isExiting calculation", () => {
+    it("returns false when panel is in current stack even if it matches exitingPanelId", () => {
+      // Bug scenario: user pushed panel again before exitingPanelId timeout cleared
+      const result = computeIsExiting("general", "general", ["root", "general"]);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe("panelDepth calculation", () => {
+    it("returns correct depth for re-pushed panel (not exiting)", () => {
+      // Bug scenario: general was exiting but got re-pushed
+      const stack = ["root", "general"];
+      const isExiting = computeIsExiting("general", "general", stack);
+      const depth = computePanelDepth("general", isExiting, stack, 1);
+      expect(depth).toBe(1); // stack.indexOf("general") = 1, NOT depth + 1 = 2
+    });
+  });
+
+  describe("rapid navigation scenarios", () => {
+    it("handles push → back → push sequence correctly", () => {
+      // Initial: root active
+      let stack: readonly string[] = ["root"];
+      let depth = 0;
+      let exitingPanelId: string | null = null;
+
+      // Push general
+      stack = ["root", "general"];
+      depth = 1;
+
+      // Back to root (general becomes exiting)
+      stack = ["root"];
+      depth = 0;
+      exitingPanelId = "general";
+
+      // Push general again BEFORE exitingPanelId clears
+      stack = ["root", "general"];
+      depth = 1;
+      // exitingPanelId is still "general" (timeout hasn't fired yet)
+
+      // Now general should NOT be exiting because it's in the stack
+      const isExiting = computeIsExiting("general", exitingPanelId, stack);
+      expect(isExiting).toBe(false);
+
+      // Panel depth should be correct
+      const panelDepth = computePanelDepth("general", isExiting, stack, depth);
+      expect(panelDepth).toBe(1); // Not 2!
+    });
+
+    it("handles Settings menu rapid navigation", () => {
+      // Simulating actual Settings menu navigation
+      let stack: readonly string[] = ["root"];
+      let depth = 0;
+      let exitingPanelId: string | null = null;
+
+      // Click "General"
+      stack = ["root", "general"];
+      depth = 1;
+
+      // Click "About"
+      stack = ["root", "general", "about"];
+      depth = 2;
+
+      // Back to General
+      stack = ["root", "general"];
+      depth = 1;
+      exitingPanelId = "about";
+
+      // Immediately back to root
+      stack = ["root"];
+      depth = 0;
+      exitingPanelId = "general";
+
+      // Immediately push General again
+      stack = ["root", "general"];
+      depth = 1;
+
+      // general should NOT be exiting
+      const isExiting = computeIsExiting("general", exitingPanelId, stack);
+      expect(isExiting).toBe(false);
+
+      const panelDepth = computePanelDepth("general", isExiting, stack, depth);
+      expect(panelDepth).toBe(1);
+    });
+  });
+});