react-panel-layout 0.6.0 → 0.7.0

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

@@ -1,11 +1,99 @@
 /**
  * @file Tests for useNativeGestureGuard hook.
  */
-/* eslint-disable custom/no-as-outside-guard -- test requires overrides */
 import { renderHook, act } from "@testing-library/react";
 import * as React from "react";
 import { useNativeGestureGuard } from "./useNativeGestureGuard.js";
 
+/**
+ * Extended PointerEvent type with test utility method.
+ */
+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: "mouse" | "touch" | "pen";
+}): TestPointerEvent {
+  const noop = (): void => {};
+  const noopBool = (): boolean => false;
+  const state = { preventDefaultCalled: false };
+
+  const element = document.createElement("div");
+  const nativeEvent = new PointerEvent("pointerdown", {
+    clientX: props.clientX,
+    clientY: props.clientY,
+    pointerType: props.pointerType,
+  });
+
+  return {
+    ...props,
+    // Test utility
+    wasDefaultPrevented: () => state.preventDefaultCalled,
+    // Event target
+    target: element,
+    currentTarget: element,
+    // Native event
+    nativeEvent,
+    // SyntheticEvent properties
+    bubbles: true,
+    cancelable: true,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: true,
+    preventDefault: () => {
+      state.preventDefaultCalled = true;
+    },
+    isDefaultPrevented: () => state.preventDefaultCalled,
+    stopPropagation: noop,
+    isPropagationStopped: noopBool,
+    persist: noop,
+    timeStamp: Date.now(),
+    type: "pointerdown",
+    // MouseEvent properties
+    altKey: false,
+    button: 0,
+    buttons: 1,
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    getModifierState: noopBool,
+    movementX: 0,
+    movementY: 0,
+    pageX: props.clientX,
+    pageY: props.clientY,
+    relatedTarget: null,
+    screenX: props.clientX,
+    screenY: props.clientY,
+    // PointerEvent properties
+    height: 1,
+    isPrimary: true,
+    pointerId: 1,
+    pressure: 0.5,
+    tangentialPressure: 0,
+    tiltX: 0,
+    tiltY: 0,
+    twist: 0,
+    width: 1,
+    // UIEvent properties
+    detail: 0,
+    view: createMockView(),
+  };
+}
+
 describe("useNativeGestureGuard", () => {
   const createRef = (rect: Partial<DOMRect> = {}): React.RefObject<HTMLDivElement> => {
     const element = document.createElement("div");
@@ -25,26 +113,6 @@ describe("useNativeGestureGuard", () => {
     return { current: element };
   };
 
-  /**
-   * Creates a fake pointer event with preventDefault tracking.
-   * Uses an object to track state instead of let variable.
-   */
-  const createFakePointerEvent = (props: {
-    clientX: number;
-    clientY: number;
-    pointerType: string;
-  }) => {
-    const state = { preventDefaultCalled: false };
-    const event = {
-      ...props,
-      preventDefault: () => {
-        state.preventDefaultCalled = true;
-      },
-      wasDefaultPrevented: () => state.preventDefaultCalled,
-    };
-    return event as unknown as React.PointerEvent<HTMLElement> & { wasDefaultPrevented: () => boolean };
-  };
-
   describe("overscroll behavior", () => {
     it("applies overscroll-behavior: contain when active and preventOverscroll is true", () => {
       const containerRef = createRef();
@@ -99,7 +167,7 @@ describe("useNativeGestureGuard", () => {
         }),
       );
 
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 10, // Within 20px edge zone
         clientY: 100,
         pointerType: "touch",
@@ -123,7 +191,7 @@ describe("useNativeGestureGuard", () => {
         }),
       );
 
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 50, // Outside 20px edge zone
         clientY: 100,
         pointerType: "touch",
@@ -147,7 +215,7 @@ describe("useNativeGestureGuard", () => {
         }),
       );
 
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 10, // Within edge zone
         clientY: 100,
         pointerType: "mouse", // Not touch
@@ -173,7 +241,7 @@ describe("useNativeGestureGuard", () => {
         }),
       );
 
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 10,
         clientY: 100,
         pointerType: "touch",
@@ -227,7 +295,7 @@ describe("useNativeGestureGuard", () => {
         }),
       );
 
-      const mockEventInCustomEdge = createFakePointerEvent({
+      const mockEventInCustomEdge = createMockPointerEvent({
         clientX: 40, // Within 50px edge, but outside default 20px
         clientY: 100,
         pointerType: "touch",
@@ -266,7 +334,7 @@ describe("useNativeGestureGuard", () => {
         }),
       );
 
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 10,
         clientY: 100,
         pointerType: "touch",
@@ -306,7 +374,7 @@ describe("useNativeGestureGuard", () => {
 
       expect(document.documentElement.style.overscrollBehavior).toBe("");
 
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 10,
         clientY: 100,
         pointerType: "touch",
@@ -335,7 +403,7 @@ describe("useNativeGestureGuard", () => {
       );
 
       // Simulate pointerdown to apply style
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 10,
         clientY: 100,
         pointerType: "touch",
@@ -369,7 +437,7 @@ describe("useNativeGestureGuard", () => {
       );
 
       // Simulate pointerdown to apply style
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 10,
         clientY: 100,
         pointerType: "touch",
@@ -397,7 +465,7 @@ describe("useNativeGestureGuard", () => {
         }),
       );
 
-      const mockEvent = createFakePointerEvent({
+      const mockEvent = createMockPointerEvent({
         clientX: 10,
         clientY: 100,
         pointerType: "touch",

package/src/hooks/gesture/useNativeGestureGuard.ts

@@ -57,7 +57,9 @@ export function useNativeGestureGuard(options: UseNativeGestureGuardOptions): Us
 
   // Apply overscroll-behavior to html synchronously (called from onPointerDown)
   const applyHtmlOverscroll = React.useCallback(() => {
-    if (!preventOverscroll) return;
+    if (!preventOverscroll) {
+      return;
+    }
 
     const html = document.documentElement;
     if (previousHtmlOverscrollRef.current === null) {

package/src/hooks/gesture/utils.ts

@@ -85,3 +85,105 @@ export const mergeGestureContainerProps = (
     style: mergedStyle,
   };
 };
+
+// ============================================================================
+// 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.
+ */
+export function isScrollableElement(element: HTMLElement): boolean {
+  const style = getComputedStyle(element);
+
+  const isScrollableX =
+    (style.overflowX === "scroll" || style.overflowX === "auto") &&
+    element.scrollWidth > element.clientWidth;
+
+  const isScrollableY =
+    (style.overflowY === "scroll" || style.overflowY === "auto") &&
+    element.scrollHeight > element.clientHeight;
+
+  if (isScrollableX) {
+    return true;
+  }
+  return isScrollableY;
+}
+
+/**
+ * Check if we should start drag based on scroll state.
+ * Returns false if the target is inside a scrollable element.
+ */
+export function shouldStartDrag(
+  event: React.PointerEvent,
+  container: HTMLElement,
+): boolean {
+  // eslint-disable-next-line no-restricted-syntax -- loop variable requires let
+  let current = event.target as HTMLElement | null;
+
+  while (current !== null && current !== container) {
+    if (isScrollableElement(current)) {
+      return false;
+    }
+    current = current.parentElement;
+  }
+
+  return true;
+}
+
+/**
+ * Check if an element or its ancestors are scrollable in the specified direction.
+ * Returns true if scrolling is possible and would block the swipe gesture.
+ *
+ * @param element - The target element to check
+ * @param container - The container boundary
+ * @param axis - The axis to check ("x" or "y")
+ * @param direction - The swipe direction (1 = right/down, -1 = left/up)
+ */
+export function isScrollableInDirection(
+  element: HTMLElement,
+  container: HTMLElement,
+  axis: "x" | "y",
+  direction: 1 | -1,
+): boolean {
+  // eslint-disable-next-line no-restricted-syntax -- loop variable requires let
+  let current: HTMLElement | null = element;
+
+  while (current !== null && current !== container) {
+    const style = getComputedStyle(current);
+    const isHorizontal = axis === "x";
+
+    const overflow = isHorizontal ? style.overflowX : style.overflowY;
+    const isScrollable = overflow === "scroll" || overflow === "auto";
+
+    if (isScrollable) {
+      const scrollSize = computeScrollSize(current, isHorizontal);
+
+      if (scrollSize > 0) {
+        const scrollPos = isHorizontal ? current.scrollLeft : current.scrollTop;
+
+        // If swiping in close direction and not at boundary, block swipe
+        if (direction === -1 && scrollPos > 1) {
+          return true; // Can scroll left/up, block swipe
+        }
+        if (direction === 1 && scrollPos < scrollSize - 1) {
+          return true; // Can scroll right/down, block swipe
+        }
+      }
+    }
+
+    current = current.parentElement;
+  }
+
+  return false;
+}

package/src/hooks/useAnimatedVisibility.spec.ts

@@ -5,9 +5,46 @@
  * 1. アニメーションなし → 即座にdisplay:none
  * 2. アニメーションあり → 完了待ってdisplay:none
  */
+import type * as React from "react";
 import { renderHook, act } from "@testing-library/react";
 import { useAnimatedVisibility } from "./useAnimatedVisibility.js";
 
+/**
+ * Create a mock AnimationEvent for testing.
+ */
+function createMockAnimationEvent(
+  target: Element,
+  currentTarget: Element,
+): React.AnimationEvent<Element> {
+  const noop = (): void => {};
+  const noopBool = (): boolean => false;
+  const nativeEvent = {
+    animationName: "test",
+    elapsedTime: 0,
+    pseudoElement: "",
+  } as AnimationEvent;
+  return {
+    target,
+    currentTarget,
+    nativeEvent,
+    bubbles: true,
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: true,
+    preventDefault: noop,
+    isDefaultPrevented: noopBool,
+    stopPropagation: noop,
+    isPropagationStopped: noopBool,
+    persist: noop,
+    timeStamp: Date.now(),
+    type: "animationend",
+    animationName: "test",
+    elapsedTime: 0,
+    pseudoElement: "",
+  };
+}
+
 describe("useAnimatedVisibility", () => {
   describe("initial state", () => {
     it("displays when initially visible", () => {
@@ -120,10 +157,7 @@ describe("useAnimatedVisibility", () => {
 
       // Simulate animationend event
       const sharedElement = document.createElement("div");
-      const mockEvent = {
-        target: sharedElement,
-        currentTarget: sharedElement,
-      } as unknown as React.AnimationEvent;
+      const mockEvent = createMockAnimationEvent(sharedElement, sharedElement);
 
       act(() => {
         result.current.props.onAnimationEnd(mockEvent);
@@ -149,10 +183,7 @@ describe("useAnimatedVisibility", () => {
       // Simulate animationend from a child element (target !== currentTarget)
       const parent = document.createElement("div");
       const child = document.createElement("div");
-      const mockEvent = {
-        target: child,
-        currentTarget: parent,
-      } as unknown as React.AnimationEvent;
+      const mockEvent = createMockAnimationEvent(child, parent);
 
       act(() => {
         result.current.props.onAnimationEnd(mockEvent);
@@ -188,14 +219,12 @@ describe("useAnimatedVisibility", () => {
 
   describe("timeout fallback", () => {
     it("hides after timeout if animationEnd never fires", async () => {
-      vi.useFakeTimers();
-
       const { result, rerender } = renderHook(
         ({ isVisible }) =>
           useAnimatedVisibility({
             isVisible,
             leaveAnimation: "fadeOut 200ms ease-out",
-            animationTimeout: 500,
+            animationTimeout: 10,
           }),
         { initialProps: { isVisible: true } },
       );
@@ -206,25 +235,21 @@ describe("useAnimatedVisibility", () => {
 
       // Advance time past timeout
       await act(async () => {
-        vi.advanceTimersByTime(600);
+        await new Promise((resolve) => setTimeout(resolve, 20));
       });
 
       // Should be hidden now (fallback triggered)
       expect(result.current.style.display).toBe("none");
       expect(result.current.state.isAnimatingOut).toBe(false);
-
-      vi.useRealTimers();
     });
 
     it("clears timeout when animationEnd fires before timeout", async () => {
-      vi.useFakeTimers();
-
       const { result, rerender } = renderHook(
         ({ isVisible }) =>
           useAnimatedVisibility({
             isVisible,
             leaveAnimation: "fadeOut 200ms ease-out",
-            animationTimeout: 500,
+            animationTimeout: 10,
           }),
         { initialProps: { isVisible: true } },
       );
@@ -233,10 +258,7 @@ describe("useAnimatedVisibility", () => {
 
       // Fire animationEnd before timeout
       const sharedElement = document.createElement("div");
-      const mockEvent = {
-        target: sharedElement,
-        currentTarget: sharedElement,
-      } as unknown as React.AnimationEvent;
+      const mockEvent = createMockAnimationEvent(sharedElement, sharedElement);
 
       act(() => {
         result.current.props.onAnimationEnd(mockEvent);
@@ -246,12 +268,10 @@ describe("useAnimatedVisibility", () => {
 
       // Advance past timeout - should not affect state
       await act(async () => {
-        vi.advanceTimersByTime(600);
+        await new Promise((resolve) => setTimeout(resolve, 20));
       });
 
       expect(result.current.style.display).toBe("none");
-
-      vi.useRealTimers();
     });
   });
 });

package/src/hooks/useAnimatedVisibility.ts

@@ -72,6 +72,32 @@ export function useAnimatedVisibility({
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Clear timeout on unmount
+  const shouldSkipLeaveAnimation = (
+    isSkipped: boolean,
+    animation: string | undefined,
+  ): boolean => {
+    if (isSkipped) {
+      return true;
+    }
+    if (!animation) {
+      return true;
+    }
+    if (animation === "none") {
+      return true;
+    }
+    return false;
+  };
+
+  const getShouldDisplay = (visible: boolean, animatingOut: boolean): boolean => {
+    if (visible) {
+      return true;
+    }
+    if (animatingOut) {
+      return true;
+    }
+    return false;
+  };
+
   React.useEffect(() => {
     return () => {
       if (timeoutRef.current) {
@@ -92,7 +118,7 @@ export function useAnimatedVisibility({
 
     if (wasVisible && !isVisible) {
       // Transitioning from visible to hidden
-      if (skipAnimation || !leaveAnimation || leaveAnimation === "none") {
+      if (shouldSkipLeaveAnimation(skipAnimation, leaveAnimation)) {
         // No animation, hide immediately
         setIsAnimatingOut(false);
       } else {
@@ -129,7 +155,7 @@ export function useAnimatedVisibility({
   // Element should be displayed if:
   // - It's visible, OR
   // - It's animating out (leave animation in progress)
-  const shouldDisplay = isVisible || isAnimatingOut;
+  const shouldDisplay = getShouldDisplay(isVisible, isAnimatingOut);
 
   return {
     state: {

package/src/hooks/useAnimationFrame.ts

@@ -40,6 +40,14 @@ export const easings = {
     }
     return 1 - Math.pow(-2 * t + 2, 3) / 2;
   },
+
+  /** Ease in expo (accelerating, for "suck in" effect) */
+  easeInExpo: (t: number): number => {
+    if (t === 0) {
+      return 0;
+    }
+    return Math.pow(2, 10 * t - 10);
+  },
 } as const;
 
 /**