react-panel-layout 0.6.0 → 0.7.0

package/src/modules/drawer/types.ts

@@ -0,0 +1,102 @@
+/**
+ * @file Type definitions for Drawer swipe gesture handling.
+ */
+import type * as React from "react";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+
+/**
+ * Direction for drawer anchor (same as anchor edge).
+ */
+export type DrawerSwipeDirection = "left" | "right" | "top" | "bottom";
+
+/**
+ * Options for useDrawerSwipeInput hook.
+ */
+export type UseDrawerSwipeInputOptions = {
+  /** Container ref for edge detection zone (e.g., GridLayout container) */
+  edgeContainerRef: React.RefObject<HTMLElement | null>;
+  /** Drawer content ref (for close gesture) */
+  drawerContentRef: React.RefObject<HTMLElement | null>;
+  /** Drawer direction (anchor edge) */
+  direction: DrawerSwipeDirection;
+  /** Whether the drawer is currently open */
+  isOpen: boolean;
+  /** Callback when swipe should open the drawer */
+  onSwipeOpen: () => void;
+  /** Callback when swipe should close the drawer */
+  onSwipeClose: () => void;
+  /** Whether edge swipe to open is enabled. @default true */
+  enableEdgeSwipeOpen?: boolean;
+  /** Whether swipe to close is enabled. @default true */
+  enableSwipeClose?: boolean;
+  /** Width of edge detection zone in pixels. @default 20 */
+  edgeWidth?: number;
+  /** Dismiss threshold ratio (0-1). @default 0.3 */
+  dismissThreshold?: number;
+};
+
+/**
+ * Result from useDrawerSwipeInput hook.
+ */
+export type UseDrawerSwipeInputResult = {
+  /** Current operation state */
+  state: ContinuousOperationState;
+  /** Whether currently opening via edge swipe */
+  isOpening: boolean;
+  /** Whether currently closing via drag */
+  isClosing: boolean;
+  /** Progress (0-1) towards open/close threshold */
+  progress: number;
+  /** Displacement in pixels (primary axis) */
+  displacement: number;
+  /** Props for edge container (open gesture zone) */
+  edgeContainerProps: React.HTMLAttributes<HTMLElement> & {
+    style: React.CSSProperties;
+  };
+  /** Props for drawer content (close gesture zone) */
+  drawerContentProps: React.HTMLAttributes<HTMLElement> & {
+    style: React.CSSProperties;
+  };
+};
+
+/**
+ * Get animation axis from direction.
+ */
+export function getDrawerAnimationAxis(direction: DrawerSwipeDirection): "x" | "y" {
+  switch (direction) {
+    case "left":
+    case "right":
+      return "x";
+    case "top":
+    case "bottom":
+      return "y";
+  }
+}
+
+/**
+ * Get the sign for the close swipe direction.
+ * Left drawer closes by swiping left (-1).
+ * Right drawer closes by swiping right (+1).
+ * Top drawer closes by swiping up (-1).
+ * Bottom drawer closes by swiping down (+1).
+ */
+export function getDrawerCloseSwipeSign(direction: DrawerSwipeDirection): 1 | -1 {
+  switch (direction) {
+    case "left":
+      return -1;
+    case "right":
+      return 1;
+    case "top":
+      return -1;
+    case "bottom":
+      return 1;
+  }
+}
+
+/**
+ * Get the sign for the open swipe direction.
+ * This is the opposite of the close direction.
+ */
+export function getDrawerOpenSwipeSign(direction: DrawerSwipeDirection): 1 | -1 {
+  return (getDrawerCloseSwipeSign(direction) * -1) as 1 | -1;
+}

package/src/modules/drawer/useDrawerSwipeInput.spec.ts

@@ -0,0 +1,566 @@
+/**
+ * @file Tests for useDrawerSwipeInput hook.
+ */
+import { renderHook, act } from "@testing-library/react";
+import * as React from "react";
+import { useDrawerSwipeInput } from "./useDrawerSwipeInput.js";
+
+// ============================================================================
+// Test helpers (fakes instead of mocks)
+// ============================================================================
+
+type CallTracker = {
+  callCount: number;
+  call: () => void;
+};
+
+function createCallTracker(): CallTracker {
+  const tracker: CallTracker = {
+    callCount: 0,
+    call: () => {
+      tracker.callCount++;
+    },
+  };
+  return tracker;
+}
+
+describe("useDrawerSwipeInput", () => {
+  const createRef = (width = 300, height = 500): React.RefObject<HTMLDivElement> => {
+    const element = document.createElement("div");
+    Object.defineProperty(element, "clientWidth", { value: width });
+    Object.defineProperty(element, "clientHeight", { value: height });
+    const defaultRect: DOMRect = {
+      left: 0,
+      right: width,
+      top: 0,
+      bottom: height,
+      width,
+      height,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    };
+    Object.defineProperty(element, "getBoundingClientRect", {
+      value: () => defaultRect,
+    });
+    return { current: element };
+  };
+
+  /**
+   * Type guard for creating test pointer events.
+   * This pattern is allowed by lint rules for type assertions in test contexts.
+   */
+  function isPointerEvent(event: unknown): event is React.PointerEvent<HTMLElement> {
+    if (typeof event !== "object" || event === null) {
+      return false;
+    }
+    const e = event as Record<string, unknown>;
+    return (
+      typeof e.clientX === "number" &&
+      typeof e.clientY === "number" &&
+      typeof e.pointerId === "number" &&
+      typeof e.preventDefault === "function"
+    );
+  }
+
+  function createFakePointerEvent(props: {
+    clientX: number;
+    clientY: number;
+    pointerId?: number;
+    isPrimary?: boolean;
+    pointerType?: string;
+    button?: number;
+  }): React.PointerEvent<HTMLElement> {
+    const targetElement = document.createElement("div");
+    const nativeEvent = new PointerEvent("pointerdown", {
+      clientX: props.clientX,
+      clientY: props.clientY,
+      pointerId: props.pointerId ?? 1,
+      isPrimary: props.isPrimary ?? true,
+      pointerType: props.pointerType ?? "touch",
+      button: props.button ?? 0,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    const event = {
+      clientX: props.clientX,
+      clientY: props.clientY,
+      pointerId: props.pointerId ?? 1,
+      isPrimary: props.isPrimary ?? true,
+      pointerType: props.pointerType ?? "touch",
+      button: props.button ?? 0,
+      preventDefault: () => {},
+      stopPropagation: () => {},
+      target: targetElement,
+      currentTarget: targetElement,
+      nativeEvent,
+      persist: () => {},
+      isDefaultPrevented: () => false,
+      isPropagationStopped: () => false,
+      bubbles: true,
+      cancelable: true,
+      type: "pointerdown",
+      eventPhase: 0,
+      isTrusted: false,
+      timeStamp: Date.now(),
+      defaultPrevented: false,
+      // Additional properties for React.PointerEvent
+      altKey: false,
+      ctrlKey: false,
+      metaKey: false,
+      shiftKey: false,
+      detail: 0,
+      view: window,
+      screenX: 0,
+      screenY: 0,
+      pageX: props.clientX,
+      pageY: props.clientY,
+      movementX: 0,
+      movementY: 0,
+      buttons: 1,
+      relatedTarget: null,
+      getModifierState: () => false,
+      height: 1,
+      width: 1,
+      pressure: 0.5,
+      tangentialPressure: 0,
+      tiltX: 0,
+      tiltY: 0,
+      twist: 0,
+    };
+
+    if (!isPointerEvent(event)) {
+      throw new Error("Failed to create valid pointer event");
+    }
+
+    return event;
+  }
+
+  describe("initialization", () => {
+    it("starts with isOpening and isClosing false", () => {
+      const edgeContainerRef = createRef();
+      const drawerContentRef = createRef();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: false,
+          onSwipeOpen: () => {},
+          onSwipeClose: () => {},
+        }),
+      );
+
+      expect(result.current.isOpening).toBe(false);
+      expect(result.current.isClosing).toBe(false);
+      expect(result.current.progress).toBe(0);
+      expect(result.current.displacement).toBe(0);
+    });
+
+    it("provides container props", () => {
+      const edgeContainerRef = createRef();
+      const drawerContentRef = createRef();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: false,
+          onSwipeOpen: () => {},
+          onSwipeClose: () => {},
+        }),
+      );
+
+      expect(result.current.edgeContainerProps.style).toBeDefined();
+      expect(result.current.drawerContentProps.style).toBeDefined();
+    });
+  });
+
+  describe("edge swipe to open (left drawer)", () => {
+    it("calls onSwipeOpen when swiping from left edge", () => {
+      const edgeContainerRef = createRef(300);
+      const drawerContentRef = createRef(280);
+      const openTracker = createCallTracker();
+      const closeTracker = createCallTracker();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: false,
+          onSwipeOpen: openTracker.call,
+          onSwipeClose: closeTracker.call,
+          edgeWidth: 20,
+        }),
+      );
+
+      // Pointer down at left edge
+      const downEvent = createFakePointerEvent({ clientX: 10, clientY: 100 });
+
+      act(() => {
+        result.current.edgeContainerProps.onPointerDown?.(downEvent);
+      });
+
+      expect(result.current.isOpening).toBe(true);
+
+      // Swipe right (to open drawer) - must exceed threshold
+      const moveEvent = new PointerEvent("pointermove", {
+        clientX: 120,
+        clientY: 105,
+        pointerId: 1,
+      });
+
+      act(() => {
+        document.dispatchEvent(moveEvent);
+      });
+
+      // Pointer up
+      const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
+
+      act(() => {
+        document.dispatchEvent(upEvent);
+      });
+
+      expect(openTracker.callCount).toBe(1);
+      expect(closeTracker.callCount).toBe(0);
+    });
+
+    it("does not trigger open for reverse swipe direction", () => {
+      const edgeContainerRef = createRef(300);
+      const drawerContentRef = createRef(280);
+      const openTracker = createCallTracker();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: false,
+          onSwipeOpen: openTracker.call,
+          onSwipeClose: () => {},
+          edgeWidth: 20,
+        }),
+      );
+
+      // Pointer down at left edge
+      const downEvent = createFakePointerEvent({ clientX: 10, clientY: 100 });
+
+      act(() => {
+        result.current.edgeContainerProps.onPointerDown?.(downEvent);
+      });
+
+      // Swipe left (wrong direction)
+      const moveEvent = new PointerEvent("pointermove", {
+        clientX: 5,
+        clientY: 105,
+        pointerId: 1,
+      });
+
+      act(() => {
+        document.dispatchEvent(moveEvent);
+      });
+
+      // Pointer up
+      const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
+
+      act(() => {
+        document.dispatchEvent(upEvent);
+      });
+
+      expect(openTracker.callCount).toBe(0);
+    });
+  });
+
+  describe("edge swipe to open (right drawer)", () => {
+    it("calls onSwipeOpen when swiping from right edge", () => {
+      const edgeContainerRef = createRef(300);
+      const drawerContentRef = createRef(280);
+      const openTracker = createCallTracker();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "right",
+          isOpen: false,
+          onSwipeOpen: openTracker.call,
+          onSwipeClose: () => {},
+          edgeWidth: 20,
+        }),
+      );
+
+      // Pointer down at right edge (300 - 10 = 290)
+      const downEvent = createFakePointerEvent({ clientX: 290, clientY: 100 });
+
+      act(() => {
+        result.current.edgeContainerProps.onPointerDown?.(downEvent);
+      });
+
+      expect(result.current.isOpening).toBe(true);
+
+      // Swipe left (to open right drawer)
+      const moveEvent = new PointerEvent("pointermove", {
+        clientX: 180,
+        clientY: 105,
+        pointerId: 1,
+      });
+
+      act(() => {
+        document.dispatchEvent(moveEvent);
+      });
+
+      // Pointer up
+      const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
+
+      act(() => {
+        document.dispatchEvent(upEvent);
+      });
+
+      expect(openTracker.callCount).toBe(1);
+    });
+  });
+
+  describe("swipe to close", () => {
+    it("calls onSwipeClose when dragging drawer closed", () => {
+      const edgeContainerRef = createRef(300);
+      const drawerContentRef = createRef(280);
+      const closeTracker = createCallTracker();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: true,
+          onSwipeOpen: () => {},
+          onSwipeClose: closeTracker.call,
+          dismissThreshold: 0.3,
+        }),
+      );
+
+      // Pointer down on drawer content
+      const downEvent = createFakePointerEvent({ clientX: 100, clientY: 100 });
+
+      act(() => {
+        result.current.drawerContentProps.onPointerDown?.(downEvent);
+      });
+
+      // Wait for state update
+      act(() => {});
+
+      expect(result.current.isClosing).toBe(true);
+
+      // Drag left to close (100px is ~36% of 280px drawer)
+      const moveEvent = new PointerEvent("pointermove", {
+        clientX: 0,
+        clientY: 105,
+        pointerId: 1,
+      });
+
+      act(() => {
+        document.dispatchEvent(moveEvent);
+      });
+
+      // Pointer up
+      const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
+
+      act(() => {
+        document.dispatchEvent(upEvent);
+      });
+
+      expect(closeTracker.callCount).toBe(1);
+    });
+
+    it("does not close when below threshold", () => {
+      const edgeContainerRef = createRef(300);
+      const drawerContentRef = createRef(280);
+      const closeTracker = createCallTracker();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: true,
+          onSwipeOpen: () => {},
+          onSwipeClose: closeTracker.call,
+          dismissThreshold: 0.3,
+        }),
+      );
+
+      // Pointer down on drawer content
+      const downEvent = createFakePointerEvent({ clientX: 100, clientY: 100 });
+
+      act(() => {
+        result.current.drawerContentProps.onPointerDown?.(downEvent);
+      });
+
+      // Small drag (only 20px, less than 30% of 280px)
+      const moveEvent = new PointerEvent("pointermove", {
+        clientX: 80,
+        clientY: 105,
+        pointerId: 1,
+      });
+
+      act(() => {
+        document.dispatchEvent(moveEvent);
+      });
+
+      // Pointer up
+      const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
+
+      act(() => {
+        document.dispatchEvent(upEvent);
+      });
+
+      expect(closeTracker.callCount).toBe(0);
+    });
+  });
+
+  describe("disabled states", () => {
+    it("does not track edge swipe when enableEdgeSwipeOpen is false", () => {
+      const edgeContainerRef = createRef();
+      const drawerContentRef = createRef();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: false,
+          onSwipeOpen: () => {},
+          onSwipeClose: () => {},
+          enableEdgeSwipeOpen: false,
+        }),
+      );
+
+      const downEvent = createFakePointerEvent({ clientX: 10, clientY: 100 });
+
+      act(() => {
+        result.current.edgeContainerProps.onPointerDown?.(downEvent);
+      });
+
+      expect(result.current.isOpening).toBe(false);
+    });
+
+    it("does not track close swipe when enableSwipeClose is false", () => {
+      const edgeContainerRef = createRef();
+      const drawerContentRef = createRef();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: true,
+          onSwipeOpen: () => {},
+          onSwipeClose: () => {},
+          enableSwipeClose: false,
+        }),
+      );
+
+      const downEvent = createFakePointerEvent({ clientX: 100, clientY: 100 });
+
+      act(() => {
+        result.current.drawerContentProps.onPointerDown?.(downEvent);
+      });
+
+      expect(result.current.isClosing).toBe(false);
+    });
+
+    it("does not track edge swipe when drawer is already open", () => {
+      const edgeContainerRef = createRef();
+      const drawerContentRef = createRef();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: true, // Already open
+          onSwipeOpen: () => {},
+          onSwipeClose: () => {},
+        }),
+      );
+
+      const downEvent = createFakePointerEvent({ clientX: 10, clientY: 100 });
+
+      act(() => {
+        result.current.edgeContainerProps.onPointerDown?.(downEvent);
+      });
+
+      // Should not be opening because drawer is already open
+      expect(result.current.isOpening).toBe(false);
+    });
+
+    it("does not track close swipe when drawer is closed", () => {
+      const edgeContainerRef = createRef();
+      const drawerContentRef = createRef();
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: false, // Already closed
+          onSwipeOpen: () => {},
+          onSwipeClose: () => {},
+        }),
+      );
+
+      const downEvent = createFakePointerEvent({ clientX: 100, clientY: 100 });
+
+      act(() => {
+        result.current.drawerContentProps.onPointerDown?.(downEvent);
+      });
+
+      expect(result.current.isClosing).toBe(false);
+    });
+  });
+
+  describe("state output", () => {
+    it("provides correct ContinuousOperationState during open swipe", () => {
+      const edgeContainerRef = createRef(300);
+      const drawerContentRef = createRef(280);
+
+      const { result } = renderHook(() =>
+        useDrawerSwipeInput({
+          edgeContainerRef,
+          drawerContentRef,
+          direction: "left",
+          isOpen: false,
+          onSwipeOpen: () => {},
+          onSwipeClose: () => {},
+          edgeWidth: 20,
+        }),
+      );
+
+      // Initial state
+      expect(result.current.state.phase).toBe("idle");
+
+      // Pointer down at left edge
+      const downEvent = createFakePointerEvent({ clientX: 10, clientY: 100 });
+
+      act(() => {
+        result.current.edgeContainerProps.onPointerDown?.(downEvent);
+      });
+
+      // During swipe
+      const moveEvent = new PointerEvent("pointermove", {
+        clientX: 50,
+        clientY: 105,
+        pointerId: 1,
+      });
+
+      act(() => {
+        document.dispatchEvent(moveEvent);
+      });
+
+      expect(result.current.state.phase).toBe("operating");
+    });
+  });
+});