react-panel-layout 0.5.2 → 0.6.1

package/src/demo/pages/Stack/components/StackTablet.module.css

@@ -0,0 +1,299 @@
+/* Stack Tablet demo styles - iPad Settings-style stacking sidebar */
+
+/*
+ * Animation customization via CSS custom properties:
+ * --stack-duration: Animation duration
+ * --stack-easing: Animation easing curve
+ * --stack-shadow: Shadow for panels
+ * --stack-parallax: Parallax offset for underlying panels
+ */
+
+/*
+ * iOS Navigation Transition Reference:
+ * - Duration: 350ms (0.35s)
+ * - Easing: cubic-bezier(0.32, 0.72, 0, 1) - iOS spring-like curve
+ * - Push: new panel 100% → 0%, old panel 0% → -33%
+ * - Pop: current panel 0% → 100%, previous panel -33% → 0%
+ * - Shadow: left edge shadow on incoming panel
+ * - No scale transformation
+ */
+
+/* iOS-style push animation - start beyond 100% to account for shadow */
+@keyframes stack-ios-push {
+  0% {
+    transform: translateX(calc(100% + 40px));
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+/* iOS-style pop animation - exit beyond 100% so shadow also leaves */
+@keyframes stack-ios-pop {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(calc(100% + 40px));
+  }
+}
+
+/* Base stack panel */
+.stackPanel {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--rpl-color-surface, #fff);
+  transform-origin: center center;
+  /* iOS spring-like easing */
+  transition:
+    transform var(--stack-duration, 350ms) var(--stack-easing, cubic-bezier(0.32, 0.72, 0, 1)),
+    opacity var(--stack-duration, 350ms) var(--stack-easing, cubic-bezier(0.32, 0.72, 0, 1));
+  will-change: transform, opacity;
+}
+
+/* Entering animation (push) */
+.panelEntering {
+  animation: stack-ios-push var(--stack-duration, 350ms) var(--stack-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
+}
+
+/* Exiting animation (pop) */
+.panelExiting {
+  animation: stack-ios-pop var(--stack-duration, 350ms) var(--stack-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
+}
+
+.container {
+  display: flex;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--rpl-color-background, #f2f2f7);
+}
+
+/* Sidebar (left side) - contains stacking menus */
+.sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--rpl-color-surface, #fff);
+  border-right: 1px solid var(--rpl-color-border, #c6c6c8);
+}
+
+.sidebarContent {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Menu panel - each stacked panel has its own header */
+.menuPanel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--rpl-color-surface, #fff);
+}
+
+.panelHeader {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--rpl-color-border, #c6c6c8);
+  background: var(--rpl-color-surface, #fff);
+}
+
+.panelBackButton {
+  padding: 4px 0;
+  margin-bottom: 4px;
+  font-size: 17px;
+  color: var(--rpl-color-primary, #007aff);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.panelBackButton:hover {
+  text-decoration: underline;
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+/* Menu list */
+.menuList {
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.menuItem {
+  margin-bottom: 2px;
+}
+
+.menuButton {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  background: transparent;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s ease;
+  gap: 12px;
+}
+
+.menuButton:hover {
+  background: var(--rpl-color-surface-hover, #e5e5ea);
+}
+
+.menuButtonActive {
+  background: var(--rpl-color-primary, #007aff);
+}
+
+.menuButtonActive .menuLabel {
+  color: #fff;
+}
+
+.menuButtonActive .menuChevron {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.menuIcon {
+  font-size: 24px;
+  width: 32px;
+  text-align: center;
+}
+
+.menuLabel {
+  flex: 1;
+  font-size: 17px;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+.menuChevron {
+  font-size: 20px;
+  color: var(--rpl-color-text-tertiary, #c7c7cc);
+  font-weight: 600;
+}
+
+/* Leaf content (when no more children) */
+.leafContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  text-align: center;
+}
+
+.leafText {
+  margin: 0 0 8px 0;
+  font-size: 17px;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+.leafHint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--rpl-color-text-tertiary, #aeaeb2);
+}
+
+/* Detail panel (right side) */
+.detail {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--rpl-color-background, #f2f2f7);
+  min-width: 0;
+}
+
+.detailHeader {
+  padding: 16px 24px;
+  background: var(--rpl-color-surface, #fff);
+  border-bottom: 1px solid var(--rpl-color-border, #c6c6c8);
+}
+
+.detailTitle {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+.detailBody {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.detailList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--rpl-color-surface, #fff);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.detailItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--rpl-color-border, #c6c6c8);
+}
+
+.detailItem:last-child {
+  border-bottom: none;
+}
+
+.detailLabel {
+  font-size: 17px;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+.detailValue {
+  font-size: 17px;
+  color: var(--rpl-color-text-secondary, #8e8e93);
+}
+
+/* Debug info */
+.debugInfo {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--rpl-color-text-tertiary, #8e8e93);
+  background: var(--rpl-color-surface, #fff);
+  border-top: 1px solid var(--rpl-color-border, #c6c6c8);
+}
+
+.themeSelector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.themeSelector select {
+  padding: 2px 8px;
+  font-size: 12px;
+  border: 1px solid var(--rpl-color-border, #c6c6c8);
+  border-radius: 4px;
+  background: var(--rpl-color-surface, #fff);
+  color: var(--rpl-color-text-primary, #000);
+}

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);
+    });
+  });
+});