react-panel-layout 0.6.0 → 0.6.1

package/src/modules/stack/useStackSwipeInput.spec.ts

@@ -4,16 +4,31 @@
 import { renderHook, act } from "@testing-library/react";
 import * as React from "react";
 import { useStackSwipeInput } from "./useStackSwipeInput.js";
-import type { UseStackNavigationResult, StackNavigationState } from "./types.js";
+import type { UseStackNavigationResult } from "./types.js";
 
 describe("useStackSwipeInput", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
+  type CallTracker = {
+    calls: ReadonlyArray<ReadonlyArray<unknown>>;
+    fn: (...args: ReadonlyArray<unknown>) => void;
+  };
 
-  afterEach(() => {
-    vi.useRealTimers();
-  });
+  const createCallTracker = (): CallTracker => {
+    const calls: Array<ReadonlyArray<unknown>> = [];
+    const fn = (...args: ReadonlyArray<unknown>): void => {
+      calls.push(args);
+    };
+    return { calls, fn };
+  };
+
+  type MockNavigationState = {
+    navigation: Pick<UseStackNavigationResult, "go" | "canGo" | "revealParent" | "dismissReveal" | "state">;
+    calls: {
+      go: CallTracker;
+      canGo: CallTracker;
+      revealParent: CallTracker;
+      dismissReveal: CallTracker;
+    };
+  };
 
   const createRef = (width = 300): React.RefObject<HTMLDivElement> => {
     const element = document.createElement("div");
@@ -29,25 +44,42 @@ describe("useStackSwipeInput", () => {
       y: 0,
       toJSON: () => ({}),
     };
-    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(defaultRect);
+    Object.defineProperty(element, "getBoundingClientRect", {
+      value: () => defaultRect,
+    });
     return { current: element };
   };
 
-  const createMockNavigation = (canGoBack = true): Pick<
-    UseStackNavigationResult,
-    "go" | "canGo" | "revealParent" | "dismissReveal" | "state"
-  > => ({
-    go: vi.fn(),
-    canGo: vi.fn().mockReturnValue(canGoBack),
-    revealParent: vi.fn(),
-    dismissReveal: vi.fn(),
-    state: {
-      stack: ["root", "detail"],
-      depth: 1,
-      isRevealing: false,
-      revealDepth: null,
-    },
-  });
+  const createMockNavigation = (canGoBack = true): MockNavigationState => {
+    const go = createCallTracker();
+    const canGo = createCallTracker();
+    const revealParent = createCallTracker();
+    const dismissReveal = createCallTracker();
+    const canGoFn = (direction: number): boolean => {
+      canGo.fn(direction);
+      return canGoBack;
+    };
+    return {
+      navigation: {
+        go: go.fn,
+        canGo: canGoFn,
+        revealParent: revealParent.fn,
+        dismissReveal: dismissReveal.fn,
+        state: {
+          stack: ["root", "detail"],
+          depth: 1,
+          isRevealing: false,
+          revealDepth: null,
+        },
+      },
+      calls: {
+        go,
+        canGo,
+        revealParent,
+        dismissReveal,
+      },
+    };
+  };
 
   /** Create a mock pointer event with preventDefault */
   const createMockPointerEvent = (props: {
@@ -70,7 +102,7 @@ describe("useStackSwipeInput", () => {
   describe("initialization", () => {
     it("starts with isEdgeSwiping false and progress 0", () => {
       const containerRef = createRef();
-      const navigation = createMockNavigation();
+      const { navigation } = createMockNavigation();
 
       const { result } = renderHook(() =>
         useStackSwipeInput({ containerRef, navigation }),
@@ -82,7 +114,7 @@ describe("useStackSwipeInput", () => {
 
     it("provides container props with style", () => {
       const containerRef = createRef();
-      const navigation = createMockNavigation();
+      const { navigation } = createMockNavigation();
 
       const { result } = renderHook(() =>
         useStackSwipeInput({ containerRef, navigation }),
@@ -95,7 +127,7 @@ describe("useStackSwipeInput", () => {
   describe("edge swipe to go back", () => {
     it("calls go(-1) when swiping from left edge", () => {
       const containerRef = createRef();
-      const navigation = createMockNavigation();
+      const { navigation, calls } = createMockNavigation();
 
       const { result } = renderHook(() =>
         useStackSwipeInput({
@@ -132,12 +164,13 @@ describe("useStackSwipeInput", () => {
         document.dispatchEvent(upEvent);
       });
 
-      expect(navigation.go).toHaveBeenCalledWith(-1);
+      expect(calls.go.calls).toHaveLength(1);
+      expect(calls.go.calls[0]?.[0]).toBe(-1);
     });
 
     it("does not activate when canGo returns false", () => {
       const containerRef = createRef();
-      const navigation = createMockNavigation(false);
+      const { navigation } = createMockNavigation(false);
 
       const { result } = renderHook(() =>
         useStackSwipeInput({
@@ -162,7 +195,7 @@ describe("useStackSwipeInput", () => {
   describe("progress tracking", () => {
     it("calculates progress based on displacement", () => {
       const containerRef = createRef(300);
-      const navigation = createMockNavigation();
+      const { navigation } = createMockNavigation();
 
       const { result } = renderHook(() =>
         useStackSwipeInput({
@@ -195,7 +228,7 @@ describe("useStackSwipeInput", () => {
 
     it("caps progress at 1.0", () => {
       const containerRef = createRef(300);
-      const navigation = createMockNavigation();
+      const { navigation } = createMockNavigation();
 
       const { result } = renderHook(() =>
         useStackSwipeInput({
@@ -230,7 +263,7 @@ describe("useStackSwipeInput", () => {
   describe("disabled state", () => {
     it("does not track when disabled", () => {
       const containerRef = createRef();
-      const navigation = createMockNavigation();
+      const { navigation } = createMockNavigation();
 
       const { result } = renderHook(() =>
         useStackSwipeInput({
@@ -253,7 +286,7 @@ describe("useStackSwipeInput", () => {
   describe("edge configuration", () => {
     it("respects custom edge width", () => {
       const containerRef = createRef();
-      const navigation = createMockNavigation();
+      const { navigation } = createMockNavigation();
 
       const { result } = renderHook(() =>
         useStackSwipeInput({

package/src/modules/stack/useStackSwipeInput.ts

@@ -71,7 +71,7 @@ export function useStackSwipeInput(options: UseStackSwipeInputOptions): UseStack
     containerRef,
     edge,
     edgeWidth,
-    enabled: enabled && navigation.canGo(-1), // Only enable if can go back
+    enabled: enabled ? navigation.canGo(-1) : false, // Only enable if can go back
     onSwipeEnd: handleSwipeEnd,
   });
 

package/src/sticky-header/StickyArea.tsx

@@ -9,6 +9,7 @@
  */
 import * as React from "react";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect";
+import { calculateStickyMetrics } from "./calculateStickyMetrics";
 import type { StickyAreaProps, StickyAreaState } from "./types";
 
 /**
@@ -127,63 +128,34 @@ export const StickyArea: React.FC<StickyAreaProps> = ({
       const liveRect = area.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
 
-      if (position === "top") {
-        // TOP: Cover expands upward during pull-down overscroll
-        // liveRect.top > 0 means element moved down (overscroll)
-        // liveRect.top < 0 means element scrolled up
-        const coverAreaHeight = Math.max(0, liveRect.height + liveRect.top);
-
-        if (coverAreaHeight !== prevHeight) {
-          coverArea.style.opacity = coverAreaHeight > 0 ? "1" : "0";
-          coverArea.style.height = `${coverAreaHeight}px`;
-          prevHeight = coverAreaHeight;
-        }
-
-        if (liveRect.left !== prevLeft || liveRect.width !== prevWidth) {
-          coverArea.style.left = `${liveRect.left}px`;
-          coverArea.style.width = `${liveRect.width}px`;
-          prevLeft = liveRect.left;
-          prevWidth = liveRect.width;
-        }
-
-        const isStuck = liveRect.top < 0;
-        const scrollOffset = Math.max(0, -liveRect.top);
-
-        const shouldUpdateState = isFirstRun ? true : isStuck !== prevIsStuck;
-        if (shouldUpdateState) {
-          isFirstRun = false;
-          prevIsStuck = isStuck;
-          updateState({ isStuck, scrollOffset });
-        }
-      } else {
-        // BOTTOM: Cover expands downward during pull-up overscroll
-        // liveRect.bottom < viewportHeight means element moved up (overscroll at bottom)
-        // liveRect.bottom > viewportHeight means element is below viewport
-        const distanceFromBottom = viewportHeight - liveRect.bottom;
-        const coverAreaHeight = Math.max(0, liveRect.height + distanceFromBottom);
-
-        if (coverAreaHeight !== prevHeight) {
-          coverArea.style.opacity = coverAreaHeight > 0 ? "1" : "0";
-          coverArea.style.height = `${coverAreaHeight}px`;
-          prevHeight = coverAreaHeight;
-        }
-
-        if (liveRect.left !== prevLeft || liveRect.width !== prevWidth) {
-          coverArea.style.left = `${liveRect.left}px`;
-          coverArea.style.width = `${liveRect.width}px`;
-          prevLeft = liveRect.left;
-          prevWidth = liveRect.width;
-        }
-
-        const isStuck = liveRect.bottom > viewportHeight;
-        const scrollOffset = Math.max(0, liveRect.bottom - viewportHeight);
-
-        const shouldUpdateState = isFirstRun ? true : isStuck !== prevIsStuck;
-        if (shouldUpdateState) {
-          isFirstRun = false;
-          prevIsStuck = isStuck;
-          updateState({ isStuck, scrollOffset });
-        }
+      // Calculate metrics using pure function
+      const { coverAreaHeight, isStuck, scrollOffset } = calculateStickyMetrics(
+        position,
+        liveRect,
+        viewportHeight
+      );
+
+      // Update height/opacity
+      if (coverAreaHeight !== prevHeight) {
+        coverArea.style.opacity = coverAreaHeight > 0 ? "1" : "0";
+        coverArea.style.height = `${coverAreaHeight}px`;
+        prevHeight = coverAreaHeight;
+      }
+
+      // Update left/width
+      if (liveRect.left !== prevLeft || liveRect.width !== prevWidth) {
+        coverArea.style.left = `${liveRect.left}px`;
+        coverArea.style.width = `${liveRect.width}px`;
+        prevLeft = liveRect.left;
+        prevWidth = liveRect.width;
+      }
+
+      // Update state
+      const shouldUpdateState = isFirstRun ? true : isStuck !== prevIsStuck;
+      if (shouldUpdateState) {
+        isFirstRun = false;
+        prevIsStuck = isStuck;
+        updateState({ isStuck, scrollOffset });
       }
     };
 

package/src/sticky-header/calculateStickyMetrics.spec.ts

@@ -0,0 +1,105 @@
+/**
+ * @file Tests for calculateStickyMetrics pure function.
+ *
+ * Verifies the calculation of coverAreaHeight, isStuck, and scrollOffset
+ * for both top and bottom positions under various scroll scenarios.
+ */
+import { calculateStickyMetrics, type ElementRect } from "./calculateStickyMetrics.js";
+
+describe("calculateStickyMetrics", () => {
+  describe("position: top", () => {
+    it("returns expanded coverAreaHeight during overscroll (pull-down)", () => {
+      const rect: ElementRect = { top: 50, bottom: 150, height: 100 };
+      const result = calculateStickyMetrics("top", rect, 800);
+
+      expect(result).toEqual({
+        coverAreaHeight: 150, // height + top = 100 + 50
+        isStuck: false,
+        scrollOffset: 0,
+      });
+    });
+
+    it("returns reduced coverAreaHeight during normal scroll", () => {
+      const rect: ElementRect = { top: -30, bottom: 70, height: 100 };
+      const result = calculateStickyMetrics("top", rect, 800);
+
+      expect(result).toEqual({
+        coverAreaHeight: 70, // height + top = 100 + (-30)
+        isStuck: true,
+        scrollOffset: 30,
+      });
+    });
+
+    it("returns exact height at boundary (top === 0)", () => {
+      const rect: ElementRect = { top: 0, bottom: 100, height: 100 };
+      const result = calculateStickyMetrics("top", rect, 800);
+
+      expect(result).toEqual({
+        coverAreaHeight: 100,
+        isStuck: false,
+        scrollOffset: 0,
+      });
+    });
+
+    it("clamps coverAreaHeight to 0 when fully scrolled past", () => {
+      const rect: ElementRect = { top: -150, bottom: -50, height: 100 };
+      const result = calculateStickyMetrics("top", rect, 800);
+
+      expect(result.coverAreaHeight).toBe(0);
+      expect(result.isStuck).toBe(true);
+      expect(result.scrollOffset).toBe(150);
+    });
+  });
+
+  describe("position: bottom", () => {
+    it("returns expanded coverAreaHeight during overscroll (pull-up)", () => {
+      const rect: ElementRect = { top: 600, bottom: 700, height: 100 };
+      const viewportHeight = 800;
+      const result = calculateStickyMetrics("bottom", rect, viewportHeight);
+
+      // distanceFromBottom = 800 - 700 = 100
+      // coverAreaHeight = 100 + 100 = 200
+      expect(result).toEqual({
+        coverAreaHeight: 200,
+        isStuck: false,
+        scrollOffset: 0,
+      });
+    });
+
+    it("returns reduced coverAreaHeight during normal scroll", () => {
+      const rect: ElementRect = { top: 750, bottom: 850, height: 100 };
+      const viewportHeight = 800;
+      const result = calculateStickyMetrics("bottom", rect, viewportHeight);
+
+      // distanceFromBottom = 800 - 850 = -50
+      // coverAreaHeight = 100 + (-50) = 50
+      expect(result).toEqual({
+        coverAreaHeight: 50,
+        isStuck: true,
+        scrollOffset: 50,
+      });
+    });
+
+    it("returns exact height at boundary (bottom === viewportHeight)", () => {
+      const rect: ElementRect = { top: 700, bottom: 800, height: 100 };
+      const viewportHeight = 800;
+      const result = calculateStickyMetrics("bottom", rect, viewportHeight);
+
+      expect(result).toEqual({
+        coverAreaHeight: 100,
+        isStuck: false,
+        scrollOffset: 0,
+      });
+    });
+
+    it("clamps coverAreaHeight to 0 when fully scrolled past", () => {
+      const rect: ElementRect = { top: 900, bottom: 1000, height: 100 };
+      const viewportHeight = 800;
+      const result = calculateStickyMetrics("bottom", rect, viewportHeight);
+
+      expect(result.coverAreaHeight).toBe(0);
+      expect(result.isStuck).toBe(true);
+      expect(result.scrollOffset).toBe(200);
+    });
+  });
+});

package/src/sticky-header/calculateStickyMetrics.ts

@@ -0,0 +1,50 @@
+/**
+ * @file Pure function for calculating sticky area metrics.
+ *
+ * Extracts the position-dependent calculation logic from StickyArea component
+ * to enable unit testing and reduce code duplication.
+ */
+import type { StickyAreaPosition } from "./types";
+
+/** Output metrics for sticky area layout. */
+export type StickyMetrics = {
+  coverAreaHeight: number;
+  isStuck: boolean;
+  scrollOffset: number;
+};
+
+/** Lightweight element bounding rect used for calculations. */
+export type ElementRect = {
+  top: number;
+  bottom: number;
+  height: number;
+};
+
+/**
+ * Calculate sticky area metrics based on element position and viewport.
+ *
+ * @param position - Whether the sticky area is at "top" or "bottom"
+ * @param rect - Element bounding rect (top, bottom, height)
+ * @param viewportHeight - Current viewport height
+ * @returns Calculated metrics for cover area height, stuck state, and scroll offset
+ */
+export function calculateStickyMetrics(
+  position: StickyAreaPosition,
+  rect: ElementRect,
+  viewportHeight: number
+): StickyMetrics {
+  if (position === "top") {
+    return {
+      coverAreaHeight: Math.max(0, rect.height + rect.top),
+      isStuck: rect.top < 0,
+      scrollOffset: Math.max(0, -rect.top),
+    };
+  }
+  // bottom
+  const distanceFromBottom = viewportHeight - rect.bottom;
+  return {
+    coverAreaHeight: Math.max(0, rect.height + distanceFromBottom),
+    isStuck: rect.bottom > viewportHeight,
+    scrollOffset: Math.max(0, rect.bottom - viewportHeight),
+  };
+}

package/src/types.ts

@@ -225,6 +225,24 @@ export type DrawerBehavior = {
     title?: string;
     showCloseButton?: boolean;
   };
+  /**
+   * Enable swipe gestures for opening/closing the drawer.
+   * - true: Enable both edge-swipe-to-open and swipe-to-close
+   * - false: Disable swipe gestures (default)
+   * - Object: Fine-grained control over swipe behavior
+   */
+  swipeGestures?:
+    | boolean
+    | {
+        /** Enable edge swipe from container to open. @default true */
+        edgeSwipeOpen?: boolean;
+        /** Enable swipe within drawer to close. @default true */
+        swipeClose?: boolean;
+        /** Width of edge detection zone in pixels. @default 20 */
+        edgeWidth?: number;
+        /** Threshold ratio (0-1) to trigger close. @default 0.3 */
+        dismissThreshold?: number;
+      };
 };
 
 // ============================================================================

package/src/window/index.ts

@@ -57,6 +57,7 @@ export { Drawer } from "../components/window/Drawer.js";
 export { DrawerLayers } from "../components/window/DrawerLayers.js";
 export { DialogOverlay } from "../components/window/DialogOverlay.js";
 export { PopupLayerPortal } from "../components/window/PopupLayerPortal.js";
+export { SwipeSafeZone } from "../components/gesture/SwipeSafeZone.js";
 
 // Hooks
 export { useFloatingState } from "../modules/window/useFloatingState.js";
@@ -65,3 +66,4 @@ export { useDrawerState } from "../modules/window/useDrawerState.js";
 // Types
 export type { FloatingWindowProps } from "../components/window/FloatingWindow.js";
 export type { DrawerProps } from "../components/window/Drawer.js";
+export type { SwipeSafeZoneProps } from "../components/gesture/SwipeSafeZone.js";