react-panel-layout 0.6.1 → 0.7.0

package/src/hooks/gesture/utils.ts

@@ -90,6 +90,16 @@ export const mergeGestureContainerProps = (
 // Scroll Detection Utilities
 // ============================================================================
 
+/**
+ * Compute scroll size for an element based on axis.
+ */
+function computeScrollSize(element: HTMLElement, isHorizontal: boolean): number {
+  if (isHorizontal) {
+    return element.scrollWidth - element.clientWidth;
+  }
+  return element.scrollHeight - element.clientHeight;
+}
+
 /**
  * Check if an element is scrollable in any direction.
  */
@@ -104,7 +114,10 @@ export function isScrollableElement(element: HTMLElement): boolean {
     (style.overflowY === "scroll" || style.overflowY === "auto") &&
     element.scrollHeight > element.clientHeight;
 
-  return isScrollableX || isScrollableY;
+  if (isScrollableX) {
+    return true;
+  }
+  return isScrollableY;
 }
 
 /**
@@ -154,9 +167,7 @@ export function isScrollableInDirection(
     const isScrollable = overflow === "scroll" || overflow === "auto";
 
     if (isScrollable) {
-      const scrollSize = isHorizontal
-        ? current.scrollWidth - current.clientWidth
-        : current.scrollHeight - current.clientHeight;
+      const scrollSize = computeScrollSize(current, isHorizontal);
 
       if (scrollSize > 0) {
         const scrollPos = isHorizontal ? current.scrollLeft : current.scrollTop;

package/src/hooks/useAnimatedVisibility.spec.ts

@@ -13,9 +13,9 @@ import { useAnimatedVisibility } from "./useAnimatedVisibility.js";
  * Create a mock AnimationEvent for testing.
  */
 function createMockAnimationEvent(
-  target: EventTarget,
-  currentTarget: EventTarget,
-): React.AnimationEvent {
+  target: Element,
+  currentTarget: Element,
+): React.AnimationEvent<Element> {
   const noop = (): void => {};
   const noopBool = (): boolean => false;
   const nativeEvent = {

package/src/hooks/useOperationContinuity.spec.ts

@@ -5,6 +5,8 @@ import * as React from "react";
 import { renderHook } from "@testing-library/react";
 import { useOperationContinuity } from "./useOperationContinuity.js";
 
+type TestRole = "active" | "behind" | "hidden";
+
 const StrictModeWrapper = ({ children }: { children: React.ReactNode }): React.ReactNode => {
   return React.createElement(React.StrictMode, null, children);
 };
@@ -157,8 +159,9 @@ describe("useOperationContinuity", () => {
      */
     it("detects value change when it happens simultaneously with retention ending", () => {
       const { result, rerender } = renderHook(
-        ({ role, displacement }) => useOperationContinuity(role, displacement > 0),
-        { initialProps: { role: "active" as const, displacement: 500 } },
+        ({ role, displacement }: { role: TestRole; displacement: number }) =>
+          useOperationContinuity(role, displacement > 0),
+        { initialProps: { role: "active" as TestRole, displacement: 500 } },
       );
 
       // During swipe: role="active", retaining
@@ -198,8 +201,9 @@ describe("useOperationContinuity", () => {
       // any retention (no swipe operation). We should NOT report changedDuringOperation
       // because this is normal navigation, not an operation-related change.
       const { result, rerender } = renderHook(
-        ({ role, displacement }) => useOperationContinuity(role, displacement > 0),
-        { initialProps: { role: "active" as const, displacement: 0 } },
+        ({ role, displacement }: { role: TestRole; displacement: number }) =>
+          useOperationContinuity(role, displacement > 0),
+        { initialProps: { role: "active" as TestRole, displacement: 0 } },
       );
 
       expect(result.current.value).toBe("active");
@@ -220,8 +224,9 @@ describe("useOperationContinuity", () => {
       // Simulates: behind panel becomes active during swipe
       // displacement > 0, so we should retain the previous role
       const { result, rerender } = renderHook(
-        ({ role, displacement }) => useOperationContinuity(role, displacement > 0),
-        { initialProps: { role: "behind" as const, displacement: 100 } },
+        ({ role, displacement }: { role: TestRole; displacement: number }) =>
+          useOperationContinuity(role, displacement > 0),
+        { initialProps: { role: "behind" as TestRole, displacement: 100 } },
       );
 
       expect(result.current.value).toBe("behind");
@@ -241,8 +246,9 @@ describe("useOperationContinuity", () => {
     it("maintains role continuity during swipe (active -> hidden)", () => {
       // Simulates: over-swipe where active panel becomes hidden
       const { result, rerender } = renderHook(
-        ({ role, displacement }) => useOperationContinuity(role, displacement > 0),
-        { initialProps: { role: "active" as const, displacement: 400 } },
+        ({ role, displacement }: { role: TestRole; displacement: number }) =>
+          useOperationContinuity(role, displacement > 0),
+        { initialProps: { role: "active" as TestRole, displacement: 400 } },
       );
 
       expect(result.current.value).toBe("active");
@@ -262,8 +268,9 @@ describe("useOperationContinuity", () => {
       // This test demonstrates the intended use case:
       // Use changedDuringOperation to decide whether to animate on operation end
       const { result, rerender } = renderHook(
-        ({ role, displacement }) => useOperationContinuity(role, displacement > 0),
-        { initialProps: { role: "behind" as const, displacement: 100 } },
+        ({ role, displacement }: { role: TestRole; displacement: number }) =>
+          useOperationContinuity(role, displacement > 0),
+        { initialProps: { role: "behind" as TestRole, displacement: 100 } },
       );
 
       // Simulate role change during swipe

package/src/hooks/useOperationContinuity.ts

@@ -90,21 +90,21 @@ export function useOperationContinuity<T>(
   // Derive operationJustEnded from transition: true → false
   // This is idempotent - safe for StrictMode double-render
   const wasRetaining = prevShouldRetainRef.current;
-  const operationJustEnded = wasRetaining && !shouldRetainPrevious;
+  const operationJustEnded = wasRetaining ? !shouldRetainPrevious : false;
 
   // Check if value diverged from retained value
   // This includes both current-render divergence and previously-tracked divergence
   const valueDiverged = value !== retainedValueRef.current;
-  const currentlyDiverged = shouldRetainPrevious && valueDiverged;
+  const currentlyDiverged = shouldRetainPrevious ? valueDiverged : false;
 
   // Derive changedDuringOperation
   // True if:
   // 1. Value diverged during retention (tracked from previous renders via ref)
   // 2. Value diverges right now during retention (immediate comparison)
   // 3. Value diverged at the moment retention ends
-  const changedDuringRetention = changedDuringRetentionRef.current || currentlyDiverged;
-  const changedAtExit = operationJustEnded && valueDiverged;
-  const changedDuringOperation = changedDuringRetention || changedAtExit;
+  const changedDuringRetention = changedDuringRetentionRef.current ? true : currentlyDiverged;
+  const changedAtExit = operationJustEnded ? valueDiverged : false;
+  const changedDuringOperation = changedDuringRetention ? true : changedAtExit;
 
   // Determine effective value
   // During retention: use retained value

package/src/hooks/useSharedElementTransition.ts

@@ -12,7 +12,10 @@ import { flushSync } from "react-dom";
  * Check if View Transitions API is supported.
  */
 export function supportsViewTransitions(): boolean {
-  return typeof document !== "undefined" && "startViewTransition" in document;
+  if (typeof document === "undefined") {
+    return false;
+  }
+  return "startViewTransition" in document;
 }
 
 type ViewTransitionHandle = {
@@ -36,6 +39,25 @@ export function startViewTransition(callback: () => void): ViewTransitionHandle
 /** Default dismiss threshold (30% of viewport height) */
 const DEFAULT_DISMISS_THRESHOLD = 0.3;
 
+/**
+ * Compute transform string for swipe displacement.
+ */
+function computeSwipeTransform(
+  isSwiping: boolean,
+  displacement: { x: number; y: number },
+): string | undefined {
+  if (isSwiping) {
+    return `translate(${displacement.x}px, ${displacement.y}px)`;
+  }
+  if (displacement.x !== 0) {
+    return `translate(${displacement.x}px, ${displacement.y}px)`;
+  }
+  if (displacement.y !== 0) {
+    return `translate(${displacement.x}px, ${displacement.y}px)`;
+  }
+  return undefined;
+}
+
 /** Velocity threshold for quick flick dismissal (px/ms) */
 const VELOCITY_THRESHOLD = 0.5;
 
@@ -174,7 +196,7 @@ export function useSharedElementTransition<T>(
   }, []);
 
   const collapse = React.useCallback(() => {
-    if (!expandedItem) return;
+    if (!expandedItem) {return;}
 
     setIsSwiping(false);
 
@@ -222,7 +244,8 @@ export function useSharedElementTransition<T>(
     setDisplacement({ x: dx, y: dy });
   }, [isSwiping]);
 
-  const handlePointerUp = React.useCallback((event: React.PointerEvent) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- event parameter required by React handler signature
+  const handlePointerUp = React.useCallback((_event: React.PointerEvent) => {
     if (!isSwiping || !startPointRef.current) {
       return;
     }
@@ -267,7 +290,7 @@ export function useSharedElementTransition<T>(
       // - The pending item (clicked card, for old state capture during expand)
       // - The collapsing item (card returning to, for new state capture during collapse)
       // - Never to other cards (they don't participate in the transition)
-      const shouldHaveTransitionName = isThisItemPending || isThisItemCollapsing;
+      const shouldHaveTransitionName = isThisItemPending ? true : isThisItemCollapsing;
 
       return {
         style: {
@@ -291,9 +314,7 @@ export function useSharedElementTransition<T>(
       const name = nameArray[nameIndex];
 
       // Apply transform during swipe
-      const transform = isSwiping || displacement.x !== 0 || displacement.y !== 0
-        ? `translate(${displacement.x}px, ${displacement.y}px)`
-        : undefined;
+      const transform = computeSwipeTransform(isSwiping, displacement);
 
       return {
         style: {

package/src/modules/dialog/dialogAnimationUtils.spec.ts

@@ -1,7 +1,6 @@
 /**
  * @file Tests for dialog animation utilities
  */
-import { describe, expect, it } from "vitest";
 import {
   computeCloseTransform,
   computeOpenTransform,

package/src/modules/dialog/useDialogContainer.spec.ts

@@ -18,6 +18,14 @@ const createCallTracker = (): CallTracker => {
   return { calls, fn };
 };
 
+/**
+ * Create a mock view for test events.
+ */
+function createMockView(): React.MouseEvent<HTMLDialogElement>["view"] {
+  // eslint-disable-next-line custom/no-as-outside-guard -- test helper for view casting
+  return window as unknown as React.MouseEvent<HTMLDialogElement>["view"];
+}
+
 /**
  * Mock SyntheticEvent with call tracking.
  */
@@ -61,8 +69,8 @@ function createMockSyntheticEvent(): MockSyntheticEvent {
  * Creates a mock React.MouseEvent for dialog interactions.
  */
 function createMockMouseEvent(
-  target: EventTarget,
-  currentTarget: EventTarget,
+  target: HTMLElement,
+  currentTarget: HTMLDialogElement,
 ): React.MouseEvent<HTMLDialogElement> {
   const noop = (): void => {};
   const noopBool = (): boolean => false;
@@ -103,7 +111,7 @@ function createMockMouseEvent(
     screenY: 0,
     // UIEvent properties
     detail: 0,
-    view: window,
+    view: createMockView(),
   };
 }
 

package/src/modules/dialog/useDialogSwipeInput.spec.ts

@@ -1,20 +1,52 @@
 /**
  * @file Tests for useDialogSwipeInput hook
  */
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderHook, act } from "@testing-library/react";
 import * as React from "react";
 import { useDialogSwipeInput } from "./useDialogSwipeInput.js";
 
-// Mock ResizeObserver
-vi.stubGlobal(
-  "ResizeObserver",
-  class {
-    observe = vi.fn();
-    unobserve = vi.fn();
-    disconnect = vi.fn();
-  },
-);
+/**
+ * Call tracker for testing callbacks.
+ */
+type CallTracker = {
+  calls: ReadonlyArray<ReadonlyArray<unknown>>;
+  fn: (...args: ReadonlyArray<unknown>) => void;
+};
+
+const createCallTracker = (): CallTracker => {
+  const calls: Array<ReadonlyArray<unknown>> = [];
+  const fn = (...args: ReadonlyArray<unknown>): void => {
+    calls.push(args);
+  };
+  return { calls, fn };
+};
+
+/**
+ * Cast native PointerEvent to React.PointerEvent for testing.
+ */
+function asReactPointerEvent(e: PointerEvent): React.PointerEvent<HTMLElement> {
+  // eslint-disable-next-line custom/no-as-outside-guard -- test helper for event casting
+  return e as unknown as React.PointerEvent<HTMLElement>;
+}
+
+// Simple ResizeObserver mock
+const originalResizeObserver = globalThis.ResizeObserver;
+
+// eslint-disable-next-line no-restricted-syntax -- mock class needed for ResizeObserver
+class MockResizeObserver {
+  observe(): void {}
+  unobserve(): void {}
+  disconnect(): void {}
+}
+
+beforeEach(() => {
+  // eslint-disable-next-line custom/no-as-outside-guard -- test mock assignment
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => {
+  globalThis.ResizeObserver = originalResizeObserver;
+});
 
 describe("useDialogSwipeInput", () => {
   const createMockContainer = (dimensions: { width: number; height: number }) => {
@@ -24,15 +56,6 @@ describe("useDialogSwipeInput", () => {
     return container;
   };
 
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    vi.clearAllMocks();
-  });
-
   describe("initialization", () => {
     it("should return idle state initially", () => {
       const container = createMockContainer({ width: 400, height: 300 });
@@ -43,7 +66,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -61,7 +84,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -80,7 +103,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -97,7 +120,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "left",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -116,7 +139,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: false,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -128,9 +151,7 @@ describe("useDialogSwipeInput", () => {
       });
 
       act(() => {
-        result.current.containerProps.onPointerDown?.(
-          pointerEvent as unknown as React.PointerEvent,
-        );
+        result.current.containerProps.onPointerDown?.(asReactPointerEvent(pointerEvent));
       });
 
       expect(result.current.state.phase).toBe("idle");
@@ -147,7 +168,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 

package/src/modules/dialog/useDialogSwipeInput.ts

@@ -17,6 +17,36 @@ import {
 import type { DialogOpenDirection } from "./dialogAnimationUtils.js";
 import { getAnimationAxis, getDirectionSign } from "./dialogAnimationUtils.js";
 
+/**
+ * Get sign from displacement value.
+ */
+function getSignFromDisplacement(value: number): -1 | 0 | 1 {
+  if (value > 0) {
+    return 1;
+  }
+  if (value < 0) {
+    return -1;
+  }
+  return 0;
+}
+
+type TrackingPoint = { timestamp: number } | null;
+
+/**
+ * Compute velocity from tracking points.
+ */
+function computeSwipeVelocity(
+  start: TrackingPoint,
+  current: TrackingPoint,
+  primaryValue: number,
+): number {
+  if (start === null || current === null) {
+    return 0;
+  }
+  const duration = Math.max(1, current.timestamp - start.timestamp);
+  return Math.abs(primaryValue) / duration;
+}
+
 /**
  * Default dismiss threshold (30% of container size).
  */
@@ -77,7 +107,10 @@ function isScrollableElement(element: HTMLElement): boolean {
     (style.overflowY === "scroll" || style.overflowY === "auto") &&
     element.scrollHeight > element.clientHeight;
 
-  return isScrollableX || isScrollableY;
+  if (isScrollableX) {
+    return true;
+  }
+  return isScrollableY;
 }
 
 /**
@@ -206,7 +239,7 @@ export function useDialogSwipeInput(
     if (containerSize <= 0) {
       return 0;
     }
-    const sign = primaryDisplacement > 0 ? 1 : primaryDisplacement < 0 ? -1 : 0;
+    const sign = getSignFromDisplacement(primaryDisplacement);
     if (sign !== expectedSign) {
       return 0; // Wrong direction
     }
@@ -244,13 +277,11 @@ export function useDialogSwipeInput(
         if (containerSize > 0) {
           const finalDisplacement = lastDisplacementRef.current;
           const primaryValue = axis === "x" ? finalDisplacement.x : finalDisplacement.y;
-          const sign = primaryValue > 0 ? 1 : primaryValue < 0 ? -1 : 0;
+          const sign = getSignFromDisplacement(primaryValue);
 
           if (sign === expectedSign) {
             const ratio = Math.abs(primaryValue) / containerSize;
-            const velocity = tracking.start && tracking.current
-              ? Math.abs(primaryValue) / Math.max(1, tracking.current.timestamp - tracking.start.timestamp)
-              : 0;
+            const velocity = computeSwipeVelocity(tracking.start, tracking.current, primaryValue);
 
             if (ratio >= dismissThreshold || velocity >= VELOCITY_THRESHOLD) {
               onSwipeDismiss();

package/src/modules/dialog/useDialogTransform.spec.ts

@@ -1,67 +1,94 @@
 /**
  * @file Tests for useDialogTransform hook
  */
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderHook, act, waitFor } from "@testing-library/react";
 import { useDialogTransform } from "./useDialogTransform.js";
 import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
 import { IDLE_CONTINUOUS_OPERATION_STATE } from "../../hooks/gesture/types.js";
 
 // Mock ResizeObserver
-const mockResizeObserver = vi.fn();
-vi.stubGlobal("ResizeObserver", class {
-  constructor(callback: ResizeObserverCallback) {
-    mockResizeObserver(callback);
-  }
-  observe = vi.fn();
-  unobserve = vi.fn();
-  disconnect = vi.fn();
-});
+const createMockResizeObserver = () => {
+  const callbacks: ResizeObserverCallback[] = [];
+  return {
+    callbacks,
+    MockClass: class {
+      constructor(callback: ResizeObserverCallback) {
+        callbacks.push(callback);
+      }
+      observe(): void {
+        // no-op
+      }
+      unobserve(): void {
+        // no-op
+      }
+      disconnect(): void {
+        // no-op
+      }
+    },
+  };
+};
+
+const { MockClass: MockResizeObserver } = createMockResizeObserver();
+globalThis.ResizeObserver = MockResizeObserver;
 
 describe("useDialogTransform", () => {
-  let rafCallbacks: FrameRequestCallback[] = [];
-  let rafId = 0;
+  const createRAFTracker = () => {
+    const callbacks: FrameRequestCallback[] = [];
+    const tracker = { callbacks, nextId: 0 };
+    return tracker;
+  };
 
-  beforeEach(() => {
-    rafCallbacks = [];
-    rafId = 0;
+  const rafTracker = createRAFTracker();
+  const originalRAF = globalThis.requestAnimationFrame;
+  const originalCAF = globalThis.cancelAnimationFrame;
 
-    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
-      rafCallbacks.push(cb);
-      return ++rafId;
-    });
-    vi.stubGlobal("cancelAnimationFrame", (id: number) => {
+  beforeEach(() => {
+    rafTracker.callbacks.length = 0;
+    rafTracker.nextId = 0;
+
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback): number => {
+      rafTracker.callbacks.push(cb);
+      rafTracker.nextId += 1;
+      return rafTracker.nextId;
+    };
+    globalThis.cancelAnimationFrame = (): void => {
       // Mock cancel
-    });
+    };
   });
 
   afterEach(() => {
-    vi.unstubAllGlobals();
-    vi.clearAllMocks();
+    globalThis.requestAnimationFrame = originalRAF;
+    globalThis.cancelAnimationFrame = originalCAF;
   });
 
   const runAnimationFrames = (count = 1, deltaMs = 16) => {
     const now = performance.now();
     for (let i = 0; i < count; i++) {
-      const callbacks = [...rafCallbacks];
-      rafCallbacks = [];
+      const callbacks = [...rafTracker.callbacks];
+      rafTracker.callbacks.length = 0;
       callbacks.forEach(cb => cb(now + deltaMs * (i + 1)));
     }
   };
 
   const createMockElement = (dimensions: { width: number; height: number }) => {
+    const setPropertyCalls: Array<{ prop: string; value: string }> = [];
+    // eslint-disable-next-line custom/no-as-outside-guard -- Required for DOM mock
     return {
       clientWidth: dimensions.width,
       clientHeight: dimensions.height,
       style: {
         transform: "",
-        setProperty: vi.fn(),
+        setProperty: (prop: string, value: string): void => {
+          setPropertyCalls.push({ prop, value });
+        },
         viewTransitionName: "",
       },
+      _setPropertyCalls: setPropertyCalls,
     } as unknown as HTMLDivElement;
   };
 
   const createMockBackdrop = () => {
+    // eslint-disable-next-line custom/no-as-outside-guard -- Required for DOM mock
     return {
       style: {
         opacity: "",
@@ -140,7 +167,10 @@ describe("useDialogTransform", () => {
       const backdrop = createMockBackdrop();
       const elementRef = { current: element };
       const backdropRef = { current: backdrop };
-      const onOpenComplete = vi.fn();
+      const onOpenCompleteCalls: unknown[] = [];
+      const onOpenComplete = (): void => {
+        onOpenCompleteCalls.push(undefined);
+      };
 
       const { result, rerender } = renderHook(
         ({ visible }) =>
@@ -170,7 +200,7 @@ describe("useDialogTransform", () => {
         expect(result.current.phase).toBe("open");
       });
 
-      expect(onOpenComplete).toHaveBeenCalled();
+      expect(onOpenCompleteCalls.length).toBeGreaterThan(0);
     });
   });
 
@@ -218,7 +248,10 @@ describe("useDialogTransform", () => {
       const backdrop = createMockBackdrop();
       const elementRef = { current: element };
       const backdropRef = { current: backdrop };
-      const onCloseComplete = vi.fn();
+      const onCloseCompleteCalls: unknown[] = [];
+      const onCloseComplete = (): void => {
+        onCloseCompleteCalls.push(undefined);
+      };
 
       const { result, rerender } = renderHook(
         ({ visible }) =>
@@ -260,7 +293,7 @@ describe("useDialogTransform", () => {
         expect(result.current.phase).toBe("closed");
       });
 
-      expect(onCloseComplete).toHaveBeenCalled();
+      expect(onCloseCompleteCalls.length).toBeGreaterThan(0);
     });
   });