react-panel-layout 0.5.2 → 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

@@ -0,0 +1,301 @@
+/**
+ * @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 { 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",
+    title: "Items",
+    content: null, // Will be replaced with dynamic content
+  },
+  {
+    id: "detail",
+    title: "Item Detail",
+    content: null,
+  },
+  {
+    id: "edit",
+    title: "Edit Item",
+    content: null,
+  },
+];
+
+// Sample data
+const listItems = [
+  { id: 1, name: "Document 1", description: "A sample document" },
+  { id: 2, name: "Document 2", description: "Another document" },
+  { id: 3, name: "Document 3", description: "Yet another document" },
+];
+
+type BackButtonProps = {
+  onClick: () => void;
+  disabled: boolean;
+};
+
+const BackButton: React.FC<BackButtonProps> = ({ onClick, disabled }) => (
+  <button className={styles.backButton} onClick={onClick} disabled={disabled}>
+    ← Back
+  </button>
+);
+
+type EditButtonProps = {
+  onClick: () => void;
+};
+
+const EditButton: React.FC<EditButtonProps> = ({ onClick }) => (
+  <button className={styles.actionButton} onClick={onClick}>
+    Edit
+  </button>
+);
+
+export const StackBasics: React.FC = () => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [selectedItem, setSelectedItem] = React.useState<typeof listItems[0] | null>(null);
+
+  const navigation = useStackNavigation({
+    panels,
+    displayMode: "overlay",
+    transitionMode: "none", // Using direct DOM manipulation
+  });
+
+  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");
+  };
+
+  const handleEdit = () => {
+    navigation.push("edit");
+  };
+
+  const backButtonProps = navigation.getBackButtonProps();
+
+  const getHeaderTitle = (): string => {
+    if (navigation.state.depth === 0) {
+      return "Items";
+    }
+    if (navigation.state.depth === 1) {
+      return selectedItem?.name ?? "";
+    }
+    if (navigation.state.depth === 2) {
+      return "Edit";
+    }
+    return "";
+  };
+
+  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}>
+        {renderBackButton()}
+        <h1 className={styles.title}>{getHeaderTitle()}</h1>
+        {showEditButton ? <EditButton onClick={handleEdit} /> : null}
+      </header>
+
+      {/* Stack content area */}
+      <div
+        ref={containerRef}
+        className={styles.stackContainer}
+        {...containerProps}
+      >
+        {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 */}
+      <div className={styles.debugInfo}>
+        <span>Depth: {navigation.state.depth}</span>
+        <span>Current: {navigation.currentPanelId}</span>
+        {isEdgeSwiping ? <span>Swiping: {Math.round(progress * 100)}%</span> : null}
+      </div>
+    </div>
+  );
+};