react-panel-layout 0.5.2 → 0.6.1

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

@@ -0,0 +1,331 @@
+/**
+ * @file Tests for useDialogContainer hook
+ */
+import * as React from "react";
+import { renderHook, act } from "@testing-library/react";
+import { useDialogContainer } from "./useDialogContainer";
+
+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 };
+};
+
+/**
+ * Mock SyntheticEvent with call tracking.
+ */
+type MockSyntheticEvent = React.SyntheticEvent & {
+  preventDefault: (() => void) & { calls: number };
+};
+
+/**
+ * Creates a mock React.SyntheticEvent with preventDefault tracking.
+ */
+function createMockSyntheticEvent(): MockSyntheticEvent {
+  const noop = (): void => {};
+  const noopBool = (): boolean => false;
+  const element = document.createElement("div");
+
+  const preventDefaultFn = (): void => {
+    preventDefaultFn.calls += 1;
+  };
+  preventDefaultFn.calls = 0;
+
+  return {
+    preventDefault: preventDefaultFn,
+    target: element,
+    currentTarget: element,
+    nativeEvent: new Event("test"),
+    bubbles: true,
+    cancelable: true,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: true,
+    isDefaultPrevented: noopBool,
+    stopPropagation: noop,
+    isPropagationStopped: noopBool,
+    persist: noop,
+    timeStamp: Date.now(),
+    type: "test",
+  };
+}
+
+/**
+ * Creates a mock React.MouseEvent for dialog interactions.
+ */
+function createMockMouseEvent(
+  target: EventTarget,
+  currentTarget: EventTarget,
+): React.MouseEvent<HTMLDialogElement> {
+  const noop = (): void => {};
+  const noopBool = (): boolean => false;
+  const nativeEvent = new MouseEvent("click");
+
+  return {
+    target,
+    currentTarget,
+    nativeEvent,
+    bubbles: true,
+    cancelable: true,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: true,
+    preventDefault: noop,
+    isDefaultPrevented: noopBool,
+    stopPropagation: noop,
+    isPropagationStopped: noopBool,
+    persist: noop,
+    timeStamp: Date.now(),
+    type: "click",
+    // MouseEvent properties
+    altKey: false,
+    button: 0,
+    buttons: 1,
+    clientX: 0,
+    clientY: 0,
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    getModifierState: noopBool,
+    movementX: 0,
+    movementY: 0,
+    pageX: 0,
+    pageY: 0,
+    relatedTarget: null,
+    screenX: 0,
+    screenY: 0,
+    // UIEvent properties
+    detail: 0,
+    view: window,
+  };
+}
+
+describe("useDialogContainer", () => {
+  const dialogState = {
+    dialog: document.createElement("dialog") as HTMLDialogElement,
+    showModal: createCallTracker(),
+    close: createCallTracker(),
+  };
+
+  beforeEach(() => {
+    // Create mock dialog element
+    dialogState.dialog = document.createElement("dialog");
+    dialogState.showModal = createCallTracker();
+    dialogState.close = createCallTracker();
+    dialogState.dialog.showModal = () => {
+      dialogState.showModal.fn();
+    };
+    dialogState.dialog.close = () => {
+      dialogState.close.fn();
+    };
+    Object.defineProperty(dialogState.dialog, "open", {
+      value: false,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  it("should return dialogRef and dialogProps", () => {
+    const onClose = createCallTracker();
+    const { result } = renderHook(() =>
+      useDialogContainer({
+        visible: false,
+        onClose: onClose.fn,
+      }),
+    );
+
+    expect(result.current.dialogRef).toBeDefined();
+    expect(result.current.dialogProps).toBeDefined();
+    expect(result.current.dialogProps.onCancel).toBeInstanceOf(Function);
+    expect(result.current.dialogProps.onClick).toBeInstanceOf(Function);
+  });
+
+  it("should call showModal when visible becomes true", () => {
+    const onClose = createCallTracker();
+    const { result, rerender } = renderHook(
+      ({ visible }) =>
+        useDialogContainer({
+          visible,
+          onClose: onClose.fn,
+        }),
+      { initialProps: { visible: false } },
+    );
+
+    // Assign mock dialog to ref
+    act(() => {
+      (result.current.dialogRef as React.MutableRefObject<HTMLDialogElement | null>).current = dialogState.dialog;
+    });
+
+    // Make visible
+    rerender({ visible: true });
+
+    expect(dialogState.showModal.calls).toHaveLength(1);
+  });
+
+  it("should call close when visible becomes false", () => {
+    const onClose = createCallTracker();
+    const { result, rerender } = renderHook(
+      ({ visible }) =>
+        useDialogContainer({
+          visible,
+          onClose: onClose.fn,
+        }),
+      { initialProps: { visible: true } },
+    );
+
+    // Assign mock dialog to ref and set as open
+    act(() => {
+      (result.current.dialogRef as React.MutableRefObject<HTMLDialogElement | null>).current = dialogState.dialog;
+      Object.defineProperty(dialogState.dialog, "open", { value: true, configurable: true });
+    });
+
+    // Make invisible
+    rerender({ visible: false });
+
+    expect(dialogState.close.calls).toHaveLength(1);
+  });
+
+  it("should prevent default on cancel event and call onClose when closeOnEscape is true", () => {
+    const onClose = createCallTracker();
+    const { result } = renderHook(() =>
+      useDialogContainer({
+        visible: true,
+        onClose: onClose.fn,
+        closeOnEscape: true,
+      }),
+    );
+
+    const mockEvent = createMockSyntheticEvent();
+
+    act(() => {
+      result.current.dialogProps.onCancel(mockEvent);
+    });
+
+    expect(mockEvent.preventDefault.calls).toBeGreaterThan(0);
+    expect(onClose.calls).toHaveLength(1);
+  });
+
+  it("should prevent default on cancel event but NOT call onClose when closeOnEscape is false", () => {
+    const onClose = createCallTracker();
+    const { result } = renderHook(() =>
+      useDialogContainer({
+        visible: true,
+        onClose: onClose.fn,
+        closeOnEscape: false,
+      }),
+    );
+
+    const mockEvent = createMockSyntheticEvent();
+
+    act(() => {
+      result.current.dialogProps.onCancel(mockEvent);
+    });
+
+    expect(mockEvent.preventDefault.calls).toBeGreaterThan(0);
+    expect(onClose.calls).toHaveLength(0);
+  });
+
+  it("should call onClose on backdrop click when dismissible is true", () => {
+    const onClose = createCallTracker();
+    const { result } = renderHook(() =>
+      useDialogContainer({
+        visible: true,
+        onClose: onClose.fn,
+        dismissible: true,
+      }),
+    );
+
+    // Simulate click on dialog element itself (backdrop area)
+    const mockEvent = createMockMouseEvent(dialogState.dialog, dialogState.dialog);
+
+    act(() => {
+      result.current.dialogProps.onClick(mockEvent);
+    });
+
+    expect(onClose.calls).toHaveLength(1);
+  });
+
+  it("should NOT call onClose on backdrop click when dismissible is false", () => {
+    const onClose = createCallTracker();
+    const { result } = renderHook(() =>
+      useDialogContainer({
+        visible: true,
+        onClose: onClose.fn,
+        dismissible: false,
+      }),
+    );
+
+    const mockEvent = createMockMouseEvent(dialogState.dialog, dialogState.dialog);
+
+    act(() => {
+      result.current.dialogProps.onClick(mockEvent);
+    });
+
+    expect(onClose.calls).toHaveLength(0);
+  });
+
+  it("should NOT call onClose when click is on content (not backdrop)", () => {
+    const onClose = createCallTracker();
+    const { result } = renderHook(() =>
+      useDialogContainer({
+        visible: true,
+        onClose: onClose.fn,
+        dismissible: true,
+      }),
+    );
+
+    const contentElement = document.createElement("div");
+
+    // Click on content inside dialog
+    const mockEvent = createMockMouseEvent(contentElement, dialogState.dialog);
+
+    act(() => {
+      result.current.dialogProps.onClick(mockEvent);
+    });
+
+    expect(onClose.calls).toHaveLength(0);
+  });
+
+  it("should set body overflow to hidden when visible and preventBodyScroll is true", () => {
+    const onClose = createCallTracker();
+    const { unmount } = renderHook(() =>
+      useDialogContainer({
+        visible: true,
+        onClose: onClose.fn,
+        preventBodyScroll: true,
+      }),
+    );
+
+    expect(document.body.style.overflow).toBe("hidden");
+
+    unmount();
+
+    // Should restore
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("should NOT set body overflow when preventBodyScroll is false", () => {
+    const onClose = createCallTracker();
+    renderHook(() =>
+      useDialogContainer({
+        visible: true,
+        onClose: onClose.fn,
+        preventBodyScroll: false,
+      }),
+    );
+
+    expect(document.body.style.overflow).toBe("");
+  });
+});

package/src/modules/dialog/useDialogContainer.ts

@@ -0,0 +1,150 @@
+/**
+ * @file Hook for managing dialog element lifecycle
+ */
+import * as React from "react";
+import { useEffectEvent } from "../../hooks/useEffectEvent";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect";
+
+export type UseDialogContainerOptions = {
+  /** Whether the dialog is visible */
+  visible: boolean;
+  /** Callback when dialog should close */
+  onClose: () => void;
+  /** Whether clicking backdrop closes the dialog (default: true) */
+  dismissible?: boolean;
+  /** Whether pressing Escape closes the dialog (default: true) */
+  closeOnEscape?: boolean;
+  /** Whether to return focus to previous element on close (default: true) */
+  returnFocus?: boolean;
+  /** Whether to prevent body scroll when open (default: true) */
+  preventBodyScroll?: boolean;
+};
+
+export type UseDialogContainerReturn = {
+  /** Ref to attach to the dialog element */
+  dialogRef: React.RefObject<HTMLDialogElement | null>;
+  /** Props to spread onto the dialog element */
+  dialogProps: {
+    onCancel: (event: React.SyntheticEvent) => void;
+    onClick: (event: React.MouseEvent<HTMLDialogElement>) => void;
+  };
+};
+
+const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+
+/**
+ * Hook for managing native dialog element lifecycle
+ *
+ * @example
+ * ```tsx
+ * function MyDialog({ visible, onClose }) {
+ *   const { dialogRef, dialogProps } = useDialogContainer({
+ *     visible,
+ *     onClose,
+ *   });
+ *
+ *   return (
+ *     <dialog ref={dialogRef} {...dialogProps}>
+ *       <div>Dialog content</div>
+ *     </dialog>
+ *   );
+ * }
+ * ```
+ */
+export const useDialogContainer = (options: UseDialogContainerOptions): UseDialogContainerReturn => {
+  const {
+    visible,
+    onClose,
+    dismissible = true,
+    closeOnEscape = true,
+    returnFocus = true,
+    preventBodyScroll = true,
+  } = options;
+
+  const dialogRef = React.useRef<HTMLDialogElement | null>(null);
+  const previousActiveElementRef = React.useRef<Element | null>(null);
+
+  const handleClose = useEffectEvent(onClose);
+
+  // Open/close dialog based on visibility
+  useIsomorphicLayoutEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog || !isBrowser) {
+      return;
+    }
+
+    if (visible) {
+      // Store currently focused element before opening
+      if (returnFocus) {
+        previousActiveElementRef.current = document.activeElement;
+      }
+
+      // Open as modal (this puts it in the top layer, above all other content)
+      if (!dialog.open) {
+        dialog.showModal();
+      }
+    } else if (dialog.open) {
+      dialog.close();
+
+      // Return focus to previously focused element
+      if (returnFocus && previousActiveElementRef.current instanceof HTMLElement) {
+        previousActiveElementRef.current.focus();
+        previousActiveElementRef.current = null;
+      }
+    }
+  }, [visible, returnFocus]);
+
+  // Prevent body scroll when dialog is open
+  React.useEffect(() => {
+    if (!isBrowser || !preventBodyScroll || !visible) {
+      return;
+    }
+
+    const originalOverflow = document.body.style.overflow;
+    const originalPaddingRight = document.body.style.paddingRight;
+
+    // Calculate scrollbar width to prevent layout shift
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+    document.body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  }, [visible, preventBodyScroll]);
+
+  // Handle cancel event (Escape key)
+  const handleCancel = React.useCallback(
+    (event: React.SyntheticEvent) => {
+      event.preventDefault();
+      if (closeOnEscape) {
+        handleClose();
+      }
+    },
+    [closeOnEscape, handleClose],
+  );
+
+  // Handle click on dialog (for backdrop click detection)
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLDialogElement>) => {
+      // Check if click was on the dialog backdrop (::backdrop pseudo-element area)
+      // The dialog element itself is the backdrop; clicking on it directly means backdrop click
+      if (dismissible && event.target === event.currentTarget) {
+        handleClose();
+      }
+    },
+    [dismissible, handleClose],
+  );
+
+  return {
+    dialogRef,
+    dialogProps: {
+      onCancel: handleCancel,
+      onClick: handleClick,
+    },
+  };
+};

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

@@ -0,0 +1,157 @@
+/**
+ * @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();
+  },
+);
+
+describe("useDialogSwipeInput", () => {
+  const createMockContainer = (dimensions: { width: number; height: number }) => {
+    const container = document.createElement("div");
+    Object.defineProperty(container, "clientWidth", { value: dimensions.width });
+    Object.defineProperty(container, "clientHeight", { value: dimensions.height });
+    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 });
+      const containerRef = { current: container };
+
+      const { result } = renderHook(() =>
+        useDialogSwipeInput({
+          containerRef,
+          openDirection: "bottom",
+          enabled: true,
+          onSwipeDismiss: vi.fn(),
+        }),
+      );
+
+      expect(result.current.state.phase).toBe("idle");
+      expect(result.current.isOperating).toBe(false);
+      expect(result.current.displacement).toBe(0);
+    });
+
+    it("should provide containerProps with touch-action style", () => {
+      const container = createMockContainer({ width: 400, height: 300 });
+      const containerRef = { current: container };
+
+      const { result } = renderHook(() =>
+        useDialogSwipeInput({
+          containerRef,
+          openDirection: "bottom",
+          enabled: true,
+          onSwipeDismiss: vi.fn(),
+        }),
+      );
+
+      expect(result.current.containerProps.style).toBeDefined();
+      expect(result.current.containerProps.style.touchAction).toBeDefined();
+    });
+  });
+
+  describe("free 2D movement", () => {
+    it("should use touch-action none for free movement", () => {
+      const container = createMockContainer({ width: 400, height: 300 });
+      const containerRef = { current: container };
+
+      const { result } = renderHook(() =>
+        useDialogSwipeInput({
+          containerRef,
+          openDirection: "bottom",
+          enabled: true,
+          onSwipeDismiss: vi.fn(),
+        }),
+      );
+
+      // Free 2D movement requires touch-action: none
+      expect(result.current.containerProps.style.touchAction).toBe("none");
+    });
+
+    it("should provide displacement2D for 2D transform", () => {
+      const container = createMockContainer({ width: 400, height: 300 });
+      const containerRef = { current: container };
+
+      const { result } = renderHook(() =>
+        useDialogSwipeInput({
+          containerRef,
+          openDirection: "left",
+          enabled: true,
+          onSwipeDismiss: vi.fn(),
+        }),
+      );
+
+      // Should provide 2D displacement
+      expect(result.current.displacement2D).toEqual({ x: 0, y: 0 });
+    });
+  });
+
+  describe("enabled state", () => {
+    it("should not respond to pointer events when disabled", () => {
+      const container = createMockContainer({ width: 400, height: 300 });
+      const containerRef = { current: container };
+
+      const { result } = renderHook(() =>
+        useDialogSwipeInput({
+          containerRef,
+          openDirection: "bottom",
+          enabled: false,
+          onSwipeDismiss: vi.fn(),
+        }),
+      );
+
+      // Try to trigger pointer down
+      const pointerEvent = new PointerEvent("pointerdown", {
+        pointerId: 1,
+        clientX: 100,
+        clientY: 100,
+      });
+
+      act(() => {
+        result.current.containerProps.onPointerDown?.(
+          pointerEvent as unknown as React.PointerEvent,
+        );
+      });
+
+      expect(result.current.state.phase).toBe("idle");
+    });
+  });
+
+  describe("progress calculation", () => {
+    it("should return 0 progress when not swiping", () => {
+      const container = createMockContainer({ width: 400, height: 300 });
+      const containerRef = { current: container };
+
+      const { result } = renderHook(() =>
+        useDialogSwipeInput({
+          containerRef,
+          openDirection: "bottom",
+          enabled: true,
+          onSwipeDismiss: vi.fn(),
+        }),
+      );
+
+      expect(result.current.progress).toBe(0);
+    });
+  });
+});