react-panel-layout 0.5.2 → 0.6.1

package/src/components/window/drawerSwipeConfig.spec.ts

@@ -0,0 +1,131 @@
+/**
+ * @file Tests for drawerSwipeConfig utilities.
+ */
+import {
+  parseSwipeGesturesConfig,
+  resolvePlacement,
+  shouldShowEdgeZone,
+} from "./drawerSwipeConfig.js";
+
+describe("drawerSwipeConfig", () => {
+  describe("parseSwipeGesturesConfig", () => {
+    it("returns disabled config for false", () => {
+      const config = parseSwipeGesturesConfig(false);
+      expect(config.enabled).toBe(false);
+      expect(config.edgeSwipeOpen).toBe(false);
+      expect(config.swipeClose).toBe(false);
+    });
+
+    it("returns disabled config for undefined", () => {
+      const config = parseSwipeGesturesConfig(undefined);
+      expect(config.enabled).toBe(false);
+    });
+
+    it("returns enabled defaults for true", () => {
+      const config = parseSwipeGesturesConfig(true);
+      expect(config.enabled).toBe(true);
+      expect(config.edgeSwipeOpen).toBe(true);
+      expect(config.swipeClose).toBe(true);
+      expect(config.edgeWidth).toBe(20);
+      expect(config.dismissThreshold).toBe(0.3);
+    });
+
+    it("parses object config with defaults", () => {
+      const config = parseSwipeGesturesConfig({});
+      expect(config.enabled).toBe(true);
+      expect(config.edgeSwipeOpen).toBe(true);
+      expect(config.swipeClose).toBe(true);
+    });
+
+    it("respects object config overrides", () => {
+      const config = parseSwipeGesturesConfig({
+        edgeSwipeOpen: false,
+        swipeClose: true,
+        edgeWidth: 40,
+        dismissThreshold: 0.5,
+      });
+      expect(config.enabled).toBe(true);
+      expect(config.edgeSwipeOpen).toBe(false);
+      expect(config.swipeClose).toBe(true);
+      expect(config.edgeWidth).toBe(40);
+      expect(config.dismissThreshold).toBe(0.5);
+    });
+  });
+
+  describe("resolvePlacement", () => {
+    it("returns anchor if provided", () => {
+      expect(resolvePlacement("left", undefined)).toBe("left");
+      expect(resolvePlacement("right", { left: 0 })).toBe("right");
+    });
+
+    it("returns right as default when no anchor or position", () => {
+      expect(resolvePlacement(undefined, undefined)).toBe("right");
+    });
+
+    it("infers left from position.left", () => {
+      expect(resolvePlacement(undefined, { left: 0 })).toBe("left");
+    });
+
+    it("infers right from position.right", () => {
+      expect(resolvePlacement(undefined, { right: 0 })).toBe("right");
+    });
+
+    it("infers top from position.top", () => {
+      expect(resolvePlacement(undefined, { top: 0 })).toBe("top");
+    });
+
+    it("infers bottom from position.bottom", () => {
+      expect(resolvePlacement(undefined, { bottom: 0 })).toBe("bottom");
+    });
+
+    it("prioritizes left over other positions", () => {
+      expect(resolvePlacement(undefined, { left: 0, right: 0 })).toBe("left");
+    });
+  });
+
+  describe("shouldShowEdgeZone", () => {
+    const enabledConfig = {
+      enabled: true,
+      edgeSwipeOpen: true,
+      swipeClose: true,
+      edgeWidth: 20,
+      dismissThreshold: 0.3,
+    };
+
+    const disabledConfig = {
+      enabled: false,
+      edgeSwipeOpen: false,
+      swipeClose: false,
+      edgeWidth: 20,
+      dismissThreshold: 0.3,
+    };
+
+    const noEdgeSwipeConfig = {
+      enabled: true,
+      edgeSwipeOpen: false,
+      swipeClose: true,
+      edgeWidth: 20,
+      dismissThreshold: 0.3,
+    };
+
+    it("returns false when config is disabled", () => {
+      expect(shouldShowEdgeZone(disabledConfig, false, false)).toBe(false);
+    });
+
+    it("returns false when edgeSwipeOpen is disabled", () => {
+      expect(shouldShowEdgeZone(noEdgeSwipeConfig, false, false)).toBe(false);
+    });
+
+    it("returns true when drawer is closed", () => {
+      expect(shouldShowEdgeZone(enabledConfig, false, false)).toBe(true);
+    });
+
+    it("returns true when actively opening", () => {
+      expect(shouldShowEdgeZone(enabledConfig, true, true)).toBe(true);
+    });
+
+    it("returns false when drawer is open and not opening", () => {
+      expect(shouldShowEdgeZone(enabledConfig, true, false)).toBe(false);
+    });
+  });
+});

package/src/components/window/drawerSwipeConfig.ts

@@ -0,0 +1,112 @@
+/**
+ * @file Drawer swipe gesture configuration parsing.
+ *
+ * Normalizes swipeGestures config from DrawerBehavior into a consistent shape.
+ */
+import type { DrawerBehavior, WindowPosition } from "../../types.js";
+import type { DrawerPlacement } from "./drawerStyles.js";
+
+/**
+ * Normalized swipe gesture configuration.
+ */
+export type NormalizedSwipeConfig = {
+  enabled: boolean;
+  edgeSwipeOpen: boolean;
+  swipeClose: boolean;
+  edgeWidth: number;
+  dismissThreshold: number;
+};
+
+const DEFAULT_EDGE_WIDTH = 20;
+const DEFAULT_DISMISS_THRESHOLD = 0.3;
+
+const DISABLED_CONFIG: NormalizedSwipeConfig = {
+  enabled: false,
+  edgeSwipeOpen: false,
+  swipeClose: false,
+  edgeWidth: DEFAULT_EDGE_WIDTH,
+  dismissThreshold: DEFAULT_DISMISS_THRESHOLD,
+};
+
+const ENABLED_DEFAULT_CONFIG: NormalizedSwipeConfig = {
+  enabled: true,
+  edgeSwipeOpen: true,
+  swipeClose: true,
+  edgeWidth: DEFAULT_EDGE_WIDTH,
+  dismissThreshold: DEFAULT_DISMISS_THRESHOLD,
+};
+
+/**
+ * Parse swipeGestures config into normalized options.
+ */
+export function parseSwipeGesturesConfig(
+  swipeGestures: DrawerBehavior["swipeGestures"],
+): NormalizedSwipeConfig {
+  if (swipeGestures === true) {
+    return ENABLED_DEFAULT_CONFIG;
+  }
+
+  if (swipeGestures === false || swipeGestures === undefined) {
+    return DISABLED_CONFIG;
+  }
+
+  return {
+    enabled: true,
+    edgeSwipeOpen: swipeGestures.edgeSwipeOpen ?? true,
+    swipeClose: swipeGestures.swipeClose ?? true,
+    edgeWidth: swipeGestures.edgeWidth ?? DEFAULT_EDGE_WIDTH,
+    dismissThreshold: swipeGestures.dismissThreshold ?? DEFAULT_DISMISS_THRESHOLD,
+  };
+}
+
+/**
+ * Resolve drawer placement from anchor and position.
+ */
+export function resolvePlacement(
+  anchor: DrawerBehavior["anchor"],
+  position: WindowPosition | undefined,
+): DrawerPlacement {
+  if (anchor) {
+    return anchor;
+  }
+
+  if (!position) {
+    return "right";
+  }
+
+  if (position.left !== undefined) {
+    return "left";
+  }
+  if (position.right !== undefined) {
+    return "right";
+  }
+  if (position.top !== undefined) {
+    return "top";
+  }
+  if (position.bottom !== undefined) {
+    return "bottom";
+  }
+
+  return "right";
+}
+
+/**
+ * Determine if edge zone should be visible.
+ */
+export function shouldShowEdgeZone(
+  config: NormalizedSwipeConfig,
+  isOpen: boolean,
+  isOpening: boolean,
+): boolean {
+  if (!config.enabled) {
+    return false;
+  }
+  if (!config.edgeSwipeOpen) {
+    return false;
+  }
+  // Show when closed or actively opening
+  if (!isOpen) {
+    return true;
+  }
+  return isOpening;
+}

package/src/components/window/useDrawerSwipeTransform.spec.ts

@@ -0,0 +1,234 @@
+/**
+ * @file Tests for useDrawerSwipeTransform hook.
+ */
+import { renderHook } from "@testing-library/react";
+import * as React from "react";
+import { useDrawerSwipeTransform } from "./useDrawerSwipeTransform.js";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+
+describe("useDrawerSwipeTransform", () => {
+  const createDivRef = (width = 300, height = 500): React.RefObject<HTMLDivElement> => {
+    const element = document.createElement("div");
+    Object.defineProperty(element, "clientWidth", { value: width });
+    Object.defineProperty(element, "clientHeight", { value: height });
+    return { current: element };
+  };
+
+  const idleState: ContinuousOperationState = {
+    phase: "idle",
+    displacement: { x: 0, y: 0 },
+    velocity: { x: 0, y: 0 },
+  };
+
+  const operatingState: ContinuousOperationState = {
+    phase: "operating",
+    displacement: { x: 50, y: 0 },
+    velocity: { x: 1, y: 0 },
+  };
+
+  const endedState: ContinuousOperationState = {
+    phase: "ended",
+    displacement: { x: 0, y: 0 },
+    velocity: { x: 0, y: 0 },
+  };
+
+  describe("when disabled", () => {
+    it("does not apply transforms", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "left",
+          swipeState: operatingState,
+          displacement: 50,
+          isOpening: true,
+          isClosing: false,
+          enabled: false,
+        }),
+      );
+
+      expect(drawerRef.current?.style.transform).toBe("");
+    });
+  });
+
+  describe("when closing", () => {
+    it("applies translateX for left drawer", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "left",
+          swipeState: operatingState,
+          displacement: 50,
+          isOpening: false,
+          isClosing: true,
+          enabled: true,
+        }),
+      );
+
+      // Left drawer closes with negative translateX
+      expect(drawerRef.current?.style.transform).toBe("translateX(-50px)");
+    });
+
+    it("applies translateX for right drawer", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "right",
+          swipeState: operatingState,
+          displacement: 50,
+          isOpening: false,
+          isClosing: true,
+          enabled: true,
+        }),
+      );
+
+      // Right drawer closes with positive translateX
+      expect(drawerRef.current?.style.transform).toBe("translateX(50px)");
+    });
+
+    it("applies translateY for bottom drawer", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "bottom",
+          swipeState: operatingState,
+          displacement: 50,
+          isOpening: false,
+          isClosing: true,
+          enabled: true,
+        }),
+      );
+
+      // Bottom drawer closes with positive translateY
+      expect(drawerRef.current?.style.transform).toBe("translateY(50px)");
+    });
+
+    it("updates backdrop opacity based on progress", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "left",
+          swipeState: operatingState,
+          displacement: 150, // 50% of 300px width
+          isOpening: false,
+          isClosing: true,
+          enabled: true,
+        }),
+      );
+
+      // 150px / 300px = 50% progress, so opacity = 1 - 0.5 = 0.5
+      expect(backdropRef.current?.style.opacity).toBe("0.5");
+    });
+  });
+
+  describe("when opening", () => {
+    it("applies opening transform for left drawer", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "left",
+          swipeState: operatingState,
+          displacement: 100,
+          isOpening: true,
+          isClosing: false,
+          enabled: true,
+        }),
+      );
+
+      // Left drawer starts at -300px (width), opening 100px means -200px
+      expect(drawerRef.current?.style.transform).toBe("translateX(-200px)");
+    });
+
+    it("updates backdrop opacity during opening", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "left",
+          swipeState: operatingState,
+          displacement: 150,
+          isOpening: true,
+          isClosing: false,
+          enabled: true,
+        }),
+      );
+
+      expect(backdropRef.current?.style.opacity).toBe("0.5");
+    });
+  });
+
+  describe("reset on swipe end", () => {
+    it("clears transform when swipe ends", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      // First apply a transform
+      drawerRef.current!.style.transform = "translateX(-50px)";
+      backdropRef.current!.style.opacity = "0.5";
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "left",
+          swipeState: endedState,
+          displacement: 0,
+          isOpening: false,
+          isClosing: false,
+          enabled: true,
+        }),
+      );
+
+      expect(drawerRef.current?.style.transform).toBe("");
+      expect(backdropRef.current?.style.opacity).toBe("");
+    });
+  });
+
+  describe("idle state", () => {
+    it("does not apply transforms in idle state", () => {
+      const drawerRef = createDivRef();
+      const backdropRef = createDivRef();
+
+      renderHook(() =>
+        useDrawerSwipeTransform({
+          drawerRef,
+          backdropRef,
+          placement: "left",
+          swipeState: idleState,
+          displacement: 0,
+          isOpening: false,
+          isClosing: false,
+          enabled: true,
+        }),
+      );
+
+      expect(drawerRef.current?.style.transform).toBe("");
+    });
+  });
+});

package/src/components/window/useDrawerSwipeTransform.ts

@@ -0,0 +1,129 @@
+/**
+ * @file Hook for applying real-time transform during drawer swipe gestures.
+ *
+ * Handles DOM manipulation for smooth swipe animations.
+ */
+import * as React from "react";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+import { getDrawerAnimationAxis, getDrawerCloseSwipeSign } from "../../modules/drawer/types.js";
+import type { DrawerSwipeDirection } from "../../modules/drawer/types.js";
+
+type UseDrawerSwipeTransformOptions = {
+  drawerRef: React.RefObject<HTMLDivElement | null>;
+  backdropRef: React.RefObject<HTMLDivElement | null>;
+  placement: DrawerSwipeDirection;
+  swipeState: ContinuousOperationState;
+  displacement: number;
+  isOpening: boolean;
+  isClosing: boolean;
+  enabled: boolean;
+};
+
+/**
+ * Apply real-time transform to drawer and backdrop during swipe.
+ */
+export function useDrawerSwipeTransform(options: UseDrawerSwipeTransformOptions): void {
+  const {
+    drawerRef,
+    backdropRef,
+    placement,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    enabled,
+  } = options;
+
+  const isOperating = swipeState.phase === "operating";
+
+  // Apply real-time transform during swipe
+  React.useLayoutEffect(() => {
+    if (!enabled || !isOperating) {
+      return;
+    }
+
+    const drawer = drawerRef.current;
+    const backdrop = backdropRef.current;
+
+    if (!drawer) {
+      return;
+    }
+
+    const axis = getDrawerAnimationAxis(placement);
+    const closeSign = getDrawerCloseSwipeSign(placement);
+    const drawerSize = axis === "x" ? drawer.clientWidth : drawer.clientHeight;
+
+    if (drawerSize <= 0) {
+      return;
+    }
+
+    const translateFn = axis === "x" ? "translateX" : "translateY";
+
+    if (isClosing) {
+      applyClosingTransform(drawer, backdrop, translateFn, closeSign, displacement, drawerSize);
+    } else if (isOpening) {
+      applyOpeningTransform(drawer, backdrop, translateFn, closeSign, displacement, drawerSize);
+    }
+  }, [enabled, isOperating, isClosing, isOpening, displacement, placement, drawerRef, backdropRef]);
+
+  // Reset transform after swipe ends
+  React.useLayoutEffect(() => {
+    if (!enabled || swipeState.phase !== "ended") {
+      return;
+    }
+
+    const drawer = drawerRef.current;
+    const backdrop = backdropRef.current;
+
+    if (drawer) {
+      drawer.style.transform = "";
+    }
+    if (backdrop) {
+      backdrop.style.opacity = "";
+    }
+  }, [enabled, swipeState.phase, drawerRef, backdropRef]);
+}
+
+function applyClosingTransform(
+  drawer: HTMLDivElement,
+  backdrop: HTMLDivElement | null,
+  translateFn: "translateX" | "translateY",
+  closeSign: 1 | -1,
+  displacement: number,
+  drawerSize: number,
+): void {
+  const translate = closeSign * displacement;
+  drawer.style.transform = `${translateFn}(${translate}px)`;
+
+  const progress = Math.min(displacement / drawerSize, 1);
+  if (backdrop) {
+    backdrop.style.opacity = String(1 - progress);
+  }
+}
+
+function applyOpeningTransform(
+  drawer: HTMLDivElement,
+  backdrop: HTMLDivElement | null,
+  translateFn: "translateX" | "translateY",
+  closeSign: 1 | -1,
+  displacement: number,
+  drawerSize: number,
+): void {
+  const closedPosition = closeSign * drawerSize;
+  const translate = closedPosition + closeSign * -1 * displacement;
+  const clampedTranslate = clampTranslate(translate, closeSign);
+  drawer.style.transform = `${translateFn}(${clampedTranslate}px)`;
+
+  const progress = Math.min(displacement / drawerSize, 1);
+  if (backdrop) {
+    backdrop.style.opacity = String(progress);
+    backdrop.style.pointerEvents = "auto";
+  }
+}
+
+function clampTranslate(translate: number, closeSign: 1 | -1): number {
+  if (closeSign > 0) {
+    return Math.max(0, translate);
+  }
+  return Math.min(0, translate);
+}