react-panel-layout 0.6.1 → 0.7.0

package/src/modules/pivot/SwipePivotContent.spec.tsx

@@ -11,47 +11,58 @@ import type { SwipeInputState } from "../../hooks/gesture/types.js";
  * Used to polyfill Web Animations API for JSDOM testing.
  */
 const createMockAnimation = (): Animation => {
-  const animation = {} as Animation;
   const animationState = {
-    resolveFinished: (value: Animation): void => {
-      void value;
-    },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- required for Promise resolve callback
+    resolveFinished: (_anim: Animation): void => {},
+    playState: "running" as AnimationPlayState,
   };
 
-  animation.currentTime = 0;
-  animation.effect = null;
-  animation.id = "";
-  animation.oncancel = null;
-  animation.onfinish = null;
-  animation.onremove = null;
-  animation.pending = false;
-  animation.playState = "running";
-  animation.playbackRate = 1;
-  animation.replaceState = "active";
-  animation.startTime = 0;
-  animation.timeline = null;
-  animation.finished = new Promise((resolve) => {
-    animationState.resolveFinished = resolve;
-  });
-  animation.ready = Promise.resolve(animation);
-  animation.cancel = () => {
-    animation.playState = "idle";
-  };
-  animation.finish = () => {
-    animation.playState = "finished";
-    animationState.resolveFinished(animation);
+  const animation: Animation = {
+    currentTime: 0,
+    effect: null,
+    id: "",
+    oncancel: null,
+    onfinish: null,
+    onremove: null,
+    get pending() {
+      return false;
+    },
+    get playState() {
+      return animationState.playState;
+    },
+    playbackRate: 1,
+    get replaceState() {
+      return "active" as AnimationReplaceState;
+    },
+    startTime: 0,
+    timeline: null,
+    get finished() {
+      return new Promise<Animation>((resolve) => {
+        animationState.resolveFinished = resolve;
+      });
+    },
+    get ready() {
+      return Promise.resolve(animation);
+    },
+    cancel() {
+      animationState.playState = "idle";
+    },
+    finish() {
+      animationState.playState = "finished";
+      animationState.resolveFinished(animation);
+    },
+    commitStyles() {},
+    pause() {},
+    persist() {},
+    play() {},
+    reverse() {},
+    updatePlaybackRate() {},
+    addEventListener() {},
+    removeEventListener() {},
+    dispatchEvent() {
+      return true;
+    },
   };
-  animation.commitStyles = () => {};
-  animation.pause = () => {};
-  animation.persist = () => {};
-  animation.play = () => {};
-  animation.reverse = () => {};
-  animation.updatePlaybackRate = () => {};
-
-  // EventTarget methods
-  animation.addEventListener = () => {};
-  animation.removeEventListener = () => {};
-  animation.dispatchEvent = () => true;
 
   return animation;
 };

package/src/modules/pivot/usePivotSwipeInput.spec.ts

@@ -372,9 +372,9 @@ describe("usePivotSwipeInput", () => {
 
       // Mock performance.now() to control velocity calculation
       // 80px / 200ms = 0.4 px/ms (under 0.5 threshold)
-      let mockTime = 0;
+      const mockTimeState = { value: 0 };
       const originalPerformanceNow = performance.now;
-      performance.now = () => mockTime;
+      performance.now = () => mockTimeState.value;
 
       try {
         const { result } = renderHook(() =>
@@ -391,7 +391,7 @@ describe("usePivotSwipeInput", () => {
         );
 
         // Pointer down at time 0
-        mockTime = 0;
+        mockTimeState.value = 0;
         const downEvent = {
           clientX: 200,
           clientY: 100,
@@ -407,7 +407,7 @@ describe("usePivotSwipeInput", () => {
 
         // 小さな移動 (80px left) at time 200ms
         // velocity = 80px / 200ms = 0.4 px/ms (under 0.5 threshold)
-        mockTime = 200;
+        mockTimeState.value = 200;
         const moveEvent = new PointerEvent("pointermove", {
           clientX: 200 - smallDisplacement,
           clientY: 102,
@@ -492,9 +492,9 @@ describe("usePivotSwipeInput", () => {
 
       // Mock performance.now() to control velocity calculation
       // 60px / 200ms = 0.3 px/ms (under 0.5 threshold)
-      let mockTime = 0;
+      const mockTimeState = { value: 0 };
       const originalPerformanceNow = performance.now;
-      performance.now = () => mockTime;
+      performance.now = () => mockTimeState.value;
 
       try {
         // デフォルト閾値: distanceThreshold: 100px, velocityThreshold: 0.5 px/ms
@@ -506,7 +506,7 @@ describe("usePivotSwipeInput", () => {
           }),
         );
 
-        mockTime = 0;
+        mockTimeState.value = 0;
         const downEvent = {
           clientX: 200,
           clientY: 100,
@@ -522,7 +522,7 @@ describe("usePivotSwipeInput", () => {
 
         // 60pxは新しいデフォルト閾値(100px)未満
         // velocity = 60px / 200ms = 0.3 px/ms (under 0.5 threshold)
-        mockTime = 200;
+        mockTimeState.value = 200;
         const moveEvent = new PointerEvent("pointermove", {
           clientX: 140, // -60px (< 100px threshold)
           clientY: 102,

package/src/modules/stack/swipeTransitionContinuity.spec.tsx

@@ -88,7 +88,7 @@ describe("Swipe transition continuity", () => {
      */
     it("behind panel should NOT animate after completing 100% swipe back", () => {
       const containerSize = 400;
-      const behindOffset = -0.3; // -120px
+      // Behind offset: -0.3 = -120px
 
       // Step 1: Render behind panel at depth 0, navigationDepth 1
       const { container, rerender } = render(

package/src/types.ts

@@ -186,6 +186,9 @@ export type PivotBehavior = {
   transitionMode?: "css" | "none";
 };
 
+/** Animation mode for drawer appearance */
+export type DrawerAnimationMode = "overlay" | "reveal";
+
 // Drawer behavior configuration for mobile-friendly slide-in panels
 export type DrawerBehavior = {
   /** Optional controlled state */
@@ -199,6 +202,12 @@ export type DrawerBehavior = {
    * - When not specified, inferred from position prop
    */
   anchor?: "left" | "right" | "top" | "bottom";
+  /**
+   * Animation mode for drawer appearance.
+   * - "overlay" (default): Drawer slides over the content
+   * - "reveal": Content slides away to reveal the drawer behind
+   */
+  animationMode?: DrawerAnimationMode;
   /**
    * Transition mode for drawer visibility.
    * - "css" (default) uses CSS transform transitions.
@@ -243,6 +252,12 @@ export type DrawerBehavior = {
         /** Threshold ratio (0-1) to trigger close. @default 0.3 */
         dismissThreshold?: number;
       };
+  /**
+   * Background color for content element in reveal mode.
+   * Applied to create stacking context during reveal animation.
+   * @default "#fff"
+   */
+  revealBackground?: string;
 };
 
 // ============================================================================