react-panel-layout 0.6.1 → 0.7.0

package/src/demo/pages/Drawer/reveal-fullscreen/index.tsx

@@ -0,0 +1,135 @@
+/**
+ * @file Drawer - Reveal Mode Fullscreen Demo
+ *
+ * Standalone page demonstrating reveal mode with body-level transform.
+ * No SingleSamplePage wrapper - this is the entire page.
+ */
+import * as React from "react";
+import { Link } from "react-router";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { LayerDefinition, PanelLayoutConfig } from "../../../../types";
+import { FiArrowLeft, FiHome, FiSearch, FiBell, FiMail, FiUser, FiSettings } from "react-icons/fi";
+import styles from "./styles.module.css";
+
+const Page: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["content"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "content",
+      gridArea: "content",
+      component: (
+        <div className={styles.container}>
+          <header className={styles.header}>
+            <button type="button" className={styles.menuButton} onClick={() => setOpen(true)}>
+              <span className={styles.menuIcon} />
+            </button>
+            <h1 className={styles.title}>Reveal Mode Demo</h1>
+          </header>
+
+          <main className={styles.main}>
+            <div className={styles.card}>
+              <h2>Full-screen Reveal Mode</h2>
+              <p>
+                This page demonstrates the reveal animation mode without any wrapper.
+                The entire page slides to reveal the drawer behind it.
+              </p>
+              <p>
+                Try swiping from the left edge, or tap the menu button above.
+              </p>
+            </div>
+
+            <div className={styles.card}>
+              <h3>How it works</h3>
+              <ul className={styles.list}>
+                <li>Drawer is positioned behind the main content</li>
+                <li>Body element receives transform during animation</li>
+                <li>Swipe gestures work from the left edge</li>
+              </ul>
+            </div>
+
+            <Link to="/components/drawer/reveal" className={styles.backLink}>
+              <FiArrowLeft />
+              Back to Drawer demos
+            </Link>
+          </main>
+        </div>
+      ),
+    },
+    {
+      id: "drawer-reveal-fullscreen",
+      component: (
+        <div className={styles.drawerContent}>
+          <div className={styles.profile}>
+            <div className={styles.avatar}>U</div>
+            <div className={styles.profileInfo}>
+              <div className={styles.profileName}>User Name</div>
+              <div className={styles.profileHandle}>@username</div>
+            </div>
+          </div>
+
+          <nav className={styles.nav}>
+            <Link to="/" className={styles.navItem}>
+              <FiHome className={styles.navIcon} />
+              Home
+            </Link>
+            <a href="#" className={styles.navItem}>
+              <FiSearch className={styles.navIcon} />
+              Explore
+            </a>
+            <a href="#" className={styles.navItem}>
+              <FiBell className={styles.navIcon} />
+              Notifications
+            </a>
+            <a href="#" className={styles.navItem}>
+              <FiMail className={styles.navIcon} />
+              Messages
+            </a>
+            <a href="#" className={styles.navItem}>
+              <FiUser className={styles.navIcon} />
+              Profile
+            </a>
+            <a href="#" className={styles.navItem}>
+              <FiSettings className={styles.navIcon} />
+              Settings
+            </a>
+          </nav>
+
+          <button type="button" className={styles.closeButton} onClick={() => setOpen(false)}>
+            Close Menu
+          </button>
+        </div>
+      ),
+      drawer: {
+        open,
+        onStateChange: setOpen,
+        dismissible: true,
+        animationMode: "reveal",
+        swipeGestures: {
+          edgeSwipeOpen: true,
+          swipeClose: true,
+          edgeWidth: 24,
+          dismissThreshold: 0.3,
+        },
+      },
+      position: { left: 0 },
+      width: 280,
+      height: "100%",
+      zIndex: 1200,
+    },
+  ];
+
+  return <GridLayout config={config} layers={layers} root />;
+};
+
+export default Page;

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/Stack/components/StackBasics.spec.tsx

@@ -4,7 +4,9 @@
  * 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";
+
+// Empty export to make this file a module (prevents global scope pollution)
+export {};
 
 /**
  * Pure function version of the isExiting logic for testing.
@@ -83,69 +85,71 @@ describe("StackBasics panel calculation logic", () => {
 
   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);
+      // 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", isExiting, stack, depth);
+      const panelDepth = computePanelDepth("detail", isExitingStep3, step3.stack, step3.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);
+      // 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);
 
-      // 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);
+      const step2 = computeDeepNavState(2);
+      const detailIsExiting = computeIsExiting("detail", step2.exitingPanelId, step2.stack);
       expect(detailIsExiting).toBe(true);
 
-      // Push to detail again
-      stack = ["list", "detail"];
-      depth = 1;
-      // exitingPanelId still "detail"
-
-      const detailIsExitingAfterPush = computeIsExiting("detail", exitingPanelId, stack);
+      const step3 = computeDeepNavState(3);
+      const detailIsExitingAfterPush = computeIsExiting("detail", step3.exitingPanelId, step3.stack);
       expect(detailIsExitingAfterPush).toBe(false);
 
-      const detailDepth = computePanelDepth("detail", detailIsExitingAfterPush, stack, depth);
+      const detailDepth = computePanelDepth("detail", detailIsExitingAfterPush, step3.stack, step3.depth);
       expect(detailDepth).toBe(1);
     });
   });

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

@@ -4,7 +4,9 @@
  * 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";
+
+// Empty export to make this file a module (prevents global scope pollution)
+export {};
 
 /**
  * Pure function version of the isExiting logic for testing.
@@ -53,67 +55,55 @@ describe("StackTablet panel calculation logic", () => {
 
   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)
+      // Helper function to compute stack state for the final step
+      const computeFinalState = () => {
+        // Steps:
+        // 1. Initial: root active (stack: ["root"], depth: 0, exitingPanelId: null)
+        // 2. Push general (stack: ["root", "general"], depth: 1)
+        // 3. Back to root (stack: ["root"], depth: 0, exitingPanelId: "general")
+        // 4. Push general again BEFORE exitingPanelId clears
+        return {
+          stack: ["root", "general"] as readonly string[],
+          depth: 1,
+          exitingPanelId: "general",
+        };
+      };
+
+      const finalState = computeFinalState();
 
       // Now general should NOT be exiting because it's in the stack
-      const isExiting = computeIsExiting("general", exitingPanelId, stack);
+      const isExiting = computeIsExiting("general", finalState.exitingPanelId, finalState.stack);
       expect(isExiting).toBe(false);
 
       // Panel depth should be correct
-      const panelDepth = computePanelDepth("general", isExiting, stack, depth);
+      const panelDepth = computePanelDepth("general", isExiting, finalState.stack, finalState.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;
+      // Helper function to compute final state after rapid navigation
+      const computeSettingsNavState = () => {
+        // Steps:
+        // 1. Initial: root (stack: ["root"], depth: 0)
+        // 2. Click "General" (stack: ["root", "general"], depth: 1)
+        // 3. Click "About" (stack: ["root", "general", "about"], depth: 2)
+        // 4. Back to General (stack: ["root", "general"], depth: 1, exitingPanelId: "about")
+        // 5. Immediately back to root (stack: ["root"], depth: 0, exitingPanelId: "general")
+        // 6. Immediately push General again
+        return {
+          stack: ["root", "general"] as readonly string[],
+          depth: 1,
+          exitingPanelId: "general",
+        };
+      };
+
+      const finalState = computeSettingsNavState();
 
       // general should NOT be exiting
-      const isExiting = computeIsExiting("general", exitingPanelId, stack);
+      const isExiting = computeIsExiting("general", finalState.exitingPanelId, finalState.stack);
       expect(isExiting).toBe(false);
 
-      const panelDepth = computePanelDepth("general", isExiting, stack, depth);
+      const panelDepth = computePanelDepth("general", isExiting, finalState.stack, finalState.depth);
       expect(panelDepth).toBe(1);
     });
   });

package/src/demo/routes.tsx

@@ -28,6 +28,7 @@ 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 DR_Reveal from "./pages/Drawer/reveal";
 
 import DL_Modal from "./pages/Dialog/modal";
 import DL_Alerts from "./pages/Dialog/alerts";
@@ -93,6 +94,7 @@ export const demoCategories: DemoCategory[] = [
       { 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: "reveal", label: "Reveal Mode", path: "reveal", element: <DR_Reveal /> },
     ],
   },
   {

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

@@ -77,6 +77,7 @@ function createFullPointerEvent(
     width: 1,
     // UIEvent properties
     detail: 0,
+    // eslint-disable-next-line custom/no-as-outside-guard -- Required for React types compatibility
     view: window as unknown as React.AbstractView,
   };
 }

package/src/hooks/gesture/useNativeGestureGuard.spec.ts

@@ -12,13 +12,21 @@ type TestPointerEvent = React.PointerEvent<HTMLElement> & {
   wasDefaultPrevented: () => boolean;
 };
 
+/**
+ * Create a mock view for test events.
+ */
+function createMockView(): React.PointerEvent<HTMLElement>["view"] {
+  // eslint-disable-next-line custom/no-as-outside-guard -- test helper for view casting
+  return window as unknown as React.PointerEvent<HTMLElement>["view"];
+}
+
 /**
  * Creates a mock PointerEvent that satisfies the React.PointerEvent interface.
  */
 function createMockPointerEvent(props: {
   clientX: number;
   clientY: number;
-  pointerType: string;
+  pointerType: "mouse" | "touch" | "pen";
 }): TestPointerEvent {
   const noop = (): void => {};
   const noopBool = (): boolean => false;
@@ -82,7 +90,7 @@ function createMockPointerEvent(props: {
     width: 1,
     // UIEvent properties
     detail: 0,
-    view: window,
+    view: createMockView(),
   };
 }