react-panel-layout 0.6.0 → 0.7.0

package/src/demo/pages/Drawer/reveal-fullscreen/styles.module.css

@@ -0,0 +1,233 @@
+/**
+ * @file Styles for Reveal Mode Fullscreen Demo
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  overflow-y: auto;
+  background: #fff;
+  color: #0f1419;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #eff3f4;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 100;
+}
+
+.menuButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.menuButton:hover {
+  background: rgba(15, 20, 25, 0.1);
+}
+
+.menuIcon {
+  position: relative;
+  width: 18px;
+  height: 2px;
+  background: #0f1419;
+  border-radius: 1px;
+}
+
+.menuIcon::before,
+.menuIcon::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #0f1419;
+  border-radius: 1px;
+}
+
+.menuIcon::before {
+  top: -6px;
+}
+
+.menuIcon::after {
+  top: 6px;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.main {
+  flex: 1;
+  padding: 20px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card {
+  padding: 20px;
+  background: #f7f9f9;
+  border-radius: 16px;
+}
+
+.card h2 {
+  margin: 0 0 12px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.card h3 {
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.card p {
+  margin: 0 0 12px;
+  color: #536471;
+  line-height: 1.5;
+}
+
+.card p:last-child {
+  margin-bottom: 0;
+}
+
+.list {
+  margin: 0;
+  padding-left: 20px;
+  color: #536471;
+  line-height: 1.8;
+}
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
+  padding: 12px 20px;
+  background: #1d9bf0;
+  color: #fff;
+  border-radius: 9999px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: background 0.15s ease;
+}
+
+.backLink:hover {
+  background: #1a8cd8;
+}
+
+/* Drawer content */
+.drawerContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 16px;
+  background: #fff;
+  border-right: 1px solid #eff3f4;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid #eff3f4;
+  margin-bottom: 8px;
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: #1d9bf0;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.profileInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.profileName {
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f1419;
+}
+
+.profileHandle {
+  font-size: 13px;
+  color: #536471;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  padding: 8px 0;
+}
+
+.navItem {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+  border-radius: 9999px;
+  color: #0f1419;
+  font-size: 20px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 0.2s ease;
+}
+
+.navItem:hover {
+  background: #e7e7e8;
+}
+
+.navIcon {
+  width: 26px;
+  height: 26px;
+}
+
+.closeButton {
+  padding: 14px;
+  background: #eff3f4;
+  border: none;
+  border-radius: 9999px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f1419;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.closeButton:hover {
+  background: #d7dbdc;
+}

package/src/demo/pages/Drawer/swipe/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file Drawer - Swipe Gestures page
+ */
+import * as React from "react";
+import { DrawerSwipe } from "../components/DrawerSwipe";
+import DrawerSwipeSource from "../components/DrawerSwipe.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="Drawer / Swipe Gestures" code={DrawerSwipeSource} codeTitle="DrawerSwipe.tsx" previewHeight={600}>
+      <DrawerSwipe />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Pivot/components/SwipeTabsPivot.tsx

@@ -22,6 +22,15 @@ type ContentItemsProps = {
   containerWidth: number;
 };
 
+type TabBarProps = {
+  contentContainerWidth: number;
+  items: PivotItem[];
+  pivot: UsePivotResult;
+  tabInputState: SwipeInputState;
+  tabWidth: number;
+  indicatorStyle: IndicatorStyle;
+};
+
 /** Renders content items */
 const ContentItems: React.FC<ContentItemsProps> = ({ items, pivot, inputState, containerWidth }) => {
   if (containerWidth <= 0) {
@@ -55,6 +64,43 @@ const ContentItems: React.FC<ContentItemsProps> = ({ items, pivot, inputState, c
   );
 };
 
+const TabBar: React.FC<TabBarProps> = ({
+  contentContainerWidth,
+  items,
+  pivot,
+  tabInputState,
+  tabWidth,
+  indicatorStyle,
+}) => {
+  if (contentContainerWidth <= 0) {
+    return null;
+  }
+
+  return (
+    <SwipePivotTabBar
+      items={items}
+      activeId={pivot.activeId}
+      activeIndex={pivot.activeIndex}
+      itemCount={pivot.itemCount}
+      inputState={tabInputState}
+      tabWidth={tabWidth}
+      viewportWidth={contentContainerWidth}
+      navigationMode={pivot.navigationMode}
+      fixedTabs={indicatorStyle === "sliding"}
+      renderTab={(item, isActive) => (
+        <button
+          className={indicatorStyle === "sliding" ? styles.tabIos : styles.tab}
+          data-active={isActive}
+          onClick={() => pivot.setActiveId(item.id)}
+        >
+          {item.label}
+        </button>
+      )}
+      renderIndicator={indicatorStyle === "sliding" ? SlidingIndicator : undefined}
+    />
+  );
+};
+
 const pageColors = ["#ffe0e0", "#e0ffe0", "#e0e0ff", "#fff0e0", "#f0e0ff"];
 
 const items: PivotItem[] = [
@@ -225,29 +271,14 @@ export const SwipeTabsPivot: React.FC = () => {
           className={styles.tabsContainer}
           data-style={indicatorStyle === "sliding" ? "ios" : undefined}
         >
-          {contentContainerWidth > 0 && (
-            <SwipePivotTabBar
-              items={items}
-              activeId={pivot.activeId}
-              activeIndex={pivot.activeIndex}
-              itemCount={pivot.itemCount}
-              inputState={tabInputState}
-              tabWidth={tabWidth}
-              viewportWidth={contentContainerWidth}
-              navigationMode={pivot.navigationMode}
-              fixedTabs={indicatorStyle === "sliding"}
-              renderTab={(item, isActive) => (
-                <button
-                  className={indicatorStyle === "sliding" ? styles.tabIos : styles.tab}
-                  data-active={isActive}
-                  onClick={() => pivot.setActiveId(item.id)}
-                >
-                  {item.label}
-                </button>
-              )}
-              renderIndicator={indicatorStyle === "sliding" ? SlidingIndicator : undefined}
-            />
-          )}
+          <TabBar
+            contentContainerWidth={contentContainerWidth}
+            items={items}
+            pivot={pivot}
+            tabInputState={tabInputState}
+            tabWidth={tabWidth}
+            indicatorStyle={indicatorStyle}
+          />
         </div>
 
         {/* Content area - uses original inputState */}

package/src/demo/pages/Pivot/swipe-debug/index.tsx

@@ -261,7 +261,7 @@ const SwipeDebugPage: React.FC = () => {
             [{log.time}] {log.message}
           </div>
         ))}
-        {logs.length === 0 && <div>No logs yet. Start swiping...</div>}
+        {logs.length === 0 ? <div>No logs yet. Start swiping...</div> : null}
       </div>
 
       {/* Manual navigation */}

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

@@ -0,0 +1,156 @@
+/**
+ * @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.
+ */
+
+// Empty export to make this file a module (prevents global scope pollution)
+export {};
+
+/**
+ * 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", () => {
+      // Helper function to compute stack state for each step
+      const computeStackState = (step: number) => {
+        if (step === 0) {
+          // Initial: list active
+          return { stack: ["list"] as readonly string[], depth: 0, exitingPanelId: null as string | null };
+        }
+        if (step === 1) {
+          // Push detail
+          return { stack: ["list", "detail"] as readonly string[], depth: 1, exitingPanelId: null as string | null };
+        }
+        if (step === 2) {
+          // Back to list (detail becomes exiting)
+          return { stack: ["list"] as readonly string[], depth: 0, exitingPanelId: "detail" };
+        }
+        // step === 3: Push detail again BEFORE exitingPanelId clears
+        return { stack: ["list", "detail"] as readonly string[], depth: 1, exitingPanelId: "detail" };
+      };
+
+      // Verify detail is exiting at step 2
+      const step2 = computeStackState(2);
+      const isExitingStep2 = computeIsExiting("detail", step2.exitingPanelId, step2.stack);
+      expect(isExitingStep2).toBe(true);
+
+      // Now detail should NOT be exiting because it's in the stack at step 3
+      const step3 = computeStackState(3);
+      const isExitingStep3 = computeIsExiting("detail", step3.exitingPanelId, step3.stack);
+      expect(isExitingStep3).toBe(false);
+
+      // Panel depth should be correct
+      const panelDepth = computePanelDepth("detail", isExitingStep3, step3.stack, step3.depth);
+      expect(panelDepth).toBe(1); // Not 2!
+    });
+
+    it("handles deep navigation with rapid back operations", () => {
+      // Helper function to compute stack state for each step
+      const computeDeepNavState = (step: number) => {
+        if (step === 0) {
+          // Initial: list → detail → edit
+          return { stack: ["list", "detail", "edit"] as readonly string[], depth: 2, exitingPanelId: null as string | null };
+        }
+        if (step === 1) {
+          // Back to detail (edit becomes exiting)
+          return { stack: ["list", "detail"] as readonly string[], depth: 1, exitingPanelId: "edit" };
+        }
+        if (step === 2) {
+          // Back to list immediately (detail becomes exiting)
+          return { stack: ["list"] as readonly string[], depth: 0, exitingPanelId: "detail" };
+        }
+        // step === 3: Push to detail again
+        return { stack: ["list", "detail"] as readonly string[], depth: 1, exitingPanelId: "detail" };
+      };
+
+      const step1 = computeDeepNavState(1);
+      const editIsExiting = computeIsExiting("edit", step1.exitingPanelId, step1.stack);
+      expect(editIsExiting).toBe(true);
+
+      const step2 = computeDeepNavState(2);
+      const detailIsExiting = computeIsExiting("detail", step2.exitingPanelId, step2.stack);
+      expect(detailIsExiting).toBe(true);
+
+      const step3 = computeDeepNavState(3);
+      const detailIsExitingAfterPush = computeIsExiting("detail", step3.exitingPanelId, step3.stack);
+      expect(detailIsExitingAfterPush).toBe(false);
+
+      const detailDepth = computePanelDepth("detail", detailIsExitingAfterPush, step3.stack, step3.depth);
+      expect(detailDepth).toBe(1);
+    });
+  });
+});