react-panel-layout 0.6.0 → 0.6.1

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

@@ -0,0 +1,263 @@
+/**
+ * @file Tests for drawerStyles utilities.
+ */
+import {
+  getPlacementStyle,
+  getOpenTransform,
+  getClosedTransform,
+  computeTransitionValue,
+  computeBackdropTransition,
+  isHorizontalPlacement,
+  formatDimension,
+  computeEdgeZoneStyle,
+} from "./drawerStyles.js";
+
+describe("drawerStyles", () => {
+  describe("getPlacementStyle", () => {
+    it("returns correct style for left placement", () => {
+      const style = getPlacementStyle("left");
+      expect(style.left).toBe(0);
+      expect(style.top).toBe(0);
+      expect(style.bottom).toBe(0);
+      expect(style.transform).toBe("translateX(-100%)");
+    });
+
+    it("returns correct style for right placement", () => {
+      const style = getPlacementStyle("right");
+      expect(style.right).toBe(0);
+      expect(style.top).toBe(0);
+      expect(style.bottom).toBe(0);
+      expect(style.transform).toBe("translateX(100%)");
+    });
+
+    it("returns correct style for top placement", () => {
+      const style = getPlacementStyle("top");
+      expect(style.top).toBe(0);
+      expect(style.left).toBe(0);
+      expect(style.right).toBe(0);
+      expect(style.transform).toBe("translateY(-100%)");
+    });
+
+    it("returns correct style for bottom placement", () => {
+      const style = getPlacementStyle("bottom");
+      expect(style.bottom).toBe(0);
+      expect(style.left).toBe(0);
+      expect(style.right).toBe(0);
+      expect(style.transform).toBe("translateY(100%)");
+    });
+  });
+
+  describe("getOpenTransform", () => {
+    it("returns translateX(0) for horizontal placements", () => {
+      expect(getOpenTransform("left")).toBe("translateX(0)");
+      expect(getOpenTransform("right")).toBe("translateX(0)");
+    });
+
+    it("returns translateY(0) for vertical placements", () => {
+      expect(getOpenTransform("top")).toBe("translateY(0)");
+      expect(getOpenTransform("bottom")).toBe("translateY(0)");
+    });
+  });
+
+  describe("getClosedTransform", () => {
+    it("returns correct closed transform for each placement", () => {
+      expect(getClosedTransform("left")).toBe("translateX(-100%)");
+      expect(getClosedTransform("right")).toBe("translateX(100%)");
+      expect(getClosedTransform("top")).toBe("translateY(-100%)");
+      expect(getClosedTransform("bottom")).toBe("translateY(100%)");
+    });
+  });
+
+  describe("computeTransitionValue", () => {
+    it("returns undefined when mode is none", () => {
+      expect(computeTransitionValue("none", undefined, undefined)).toBeUndefined();
+    });
+
+    it("returns transition with defaults when no values provided", () => {
+      const result = computeTransitionValue(undefined, undefined, undefined);
+      expect(result).toContain("transform");
+    });
+
+    it("uses provided duration and easing", () => {
+      const result = computeTransitionValue("css", "300ms", "ease-in-out");
+      expect(result).toBe("transform 300ms ease-in-out");
+    });
+  });
+
+  describe("computeBackdropTransition", () => {
+    it("returns undefined when mode is none", () => {
+      expect(computeBackdropTransition("none", undefined)).toBeUndefined();
+    });
+
+    it("returns opacity transition with defaults", () => {
+      const result = computeBackdropTransition(undefined, undefined);
+      expect(result).toContain("opacity");
+      expect(result).toContain("220ms");
+    });
+
+    it("uses provided duration", () => {
+      const result = computeBackdropTransition("css", "400ms");
+      expect(result).toBe("opacity 400ms ease");
+    });
+  });
+
+  describe("isHorizontalPlacement", () => {
+    it("returns true for left and right", () => {
+      expect(isHorizontalPlacement("left")).toBe(true);
+      expect(isHorizontalPlacement("right")).toBe(true);
+    });
+
+    it("returns false for top and bottom", () => {
+      expect(isHorizontalPlacement("top")).toBe(false);
+      expect(isHorizontalPlacement("bottom")).toBe(false);
+    });
+  });
+
+  describe("formatDimension", () => {
+    it("returns undefined for undefined input", () => {
+      expect(formatDimension(undefined)).toBeUndefined();
+    });
+
+    it("returns number with px suffix", () => {
+      expect(formatDimension(100)).toBe("100px");
+      expect(formatDimension(0)).toBe("0px");
+    });
+
+    it("returns string as-is", () => {
+      expect(formatDimension("50%")).toBe("50%");
+      expect(formatDimension("auto")).toBe("auto");
+    });
+  });
+
+  describe("computeEdgeZoneStyle", () => {
+    describe("positioning context", () => {
+      it("uses fixed positioning when inline is false", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "left",
+          inline: false,
+          edgeWidth: 20,
+          zIndex: 1000,
+        });
+        expect(style.position).toBe("fixed");
+      });
+
+      it("uses absolute positioning when inline is true", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "left",
+          inline: true,
+          edgeWidth: 20,
+          zIndex: 1000,
+        });
+        expect(style.position).toBe("absolute");
+      });
+    });
+
+    describe("left placement", () => {
+      it("positions at left edge with correct dimensions", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "left",
+          inline: false,
+          edgeWidth: 20,
+          zIndex: 1000,
+        });
+        expect(style.left).toBe(0);
+        expect(style.top).toBe(0);
+        expect(style.bottom).toBe(0);
+        expect(style.width).toBe(20);
+        expect(style.right).toBeUndefined();
+      });
+    });
+
+    describe("right placement", () => {
+      it("positions at right edge with correct dimensions", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "right",
+          inline: false,
+          edgeWidth: 30,
+          zIndex: 2000,
+        });
+        expect(style.right).toBe(0);
+        expect(style.top).toBe(0);
+        expect(style.bottom).toBe(0);
+        expect(style.width).toBe(30);
+        expect(style.left).toBeUndefined();
+      });
+    });
+
+    describe("top placement", () => {
+      it("positions at top edge with correct dimensions", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "top",
+          inline: false,
+          edgeWidth: 25,
+          zIndex: 1000,
+        });
+        expect(style.top).toBe(0);
+        expect(style.left).toBe(0);
+        expect(style.right).toBe(0);
+        expect(style.height).toBe(25);
+        expect(style.bottom).toBeUndefined();
+      });
+    });
+
+    describe("bottom placement", () => {
+      it("positions at bottom edge with correct dimensions", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "bottom",
+          inline: false,
+          edgeWidth: 40,
+          zIndex: 1000,
+        });
+        expect(style.bottom).toBe(0);
+        expect(style.left).toBe(0);
+        expect(style.right).toBe(0);
+        expect(style.height).toBe(40);
+        expect(style.top).toBeUndefined();
+      });
+    });
+
+    describe("zIndex handling", () => {
+      it("sets zIndex to provided value minus 2", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "left",
+          inline: false,
+          edgeWidth: 20,
+          zIndex: 1000,
+        });
+        expect(style.zIndex).toBe(998);
+      });
+
+      it("uses default zIndex of 1000 when zIndex is undefined", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "left",
+          inline: false,
+          edgeWidth: 20,
+          zIndex: undefined,
+        });
+        expect(style.zIndex).toBe(1000);
+      });
+    });
+
+    describe("common properties", () => {
+      it("has transparent background", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "left",
+          inline: false,
+          edgeWidth: 20,
+          zIndex: 1000,
+        });
+        expect(style.background).toBe("transparent");
+      });
+
+      it("has pointer events enabled", () => {
+        const style = computeEdgeZoneStyle({
+          placement: "left",
+          inline: false,
+          edgeWidth: 20,
+          zIndex: 1000,
+        });
+        expect(style.pointerEvents).toBe("auto");
+      });
+    });
+  });
+});

package/src/components/window/drawerStyles.ts

@@ -0,0 +1,228 @@
+/**
+ * @file Drawer style computation utilities.
+ *
+ * Provides pure functions for computing drawer styles based on configuration.
+ */
+import type * as React from "react";
+import type { DrawerBehavior } from "../../types.js";
+import {
+  COLOR_DRAWER_BACKDROP,
+  DRAWER_TRANSITION_DURATION,
+  DRAWER_TRANSITION_EASING,
+} from "../../constants/styles.js";
+
+/**
+ * Base backdrop style shared by backdrop and edge zone.
+ */
+export const DRAWER_BACKDROP_BASE_STYLE: React.CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  background: COLOR_DRAWER_BACKDROP,
+};
+
+/**
+ * Base drawer panel style.
+ */
+export const DRAWER_PANEL_BASE_STYLE: React.CSSProperties = {
+  willChange: "transform",
+};
+
+/**
+ * Placement-specific styles for drawer positioning.
+ */
+export type DrawerPlacement = "left" | "right" | "top" | "bottom";
+
+const PLACEMENT_STYLES: Record<DrawerPlacement, React.CSSProperties> = {
+  left: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    transform: "translateX(-100%)",
+  },
+  right: {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    transform: "translateX(100%)",
+  },
+  top: {
+    top: 0,
+    left: 0,
+    right: 0,
+    transform: "translateY(-100%)",
+  },
+  bottom: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    transform: "translateY(100%)",
+  },
+};
+
+const OPEN_TRANSFORMS: Record<DrawerPlacement, string> = {
+  left: "translateX(0)",
+  right: "translateX(0)",
+  top: "translateY(0)",
+  bottom: "translateY(0)",
+};
+
+/**
+ * Get placement-specific style.
+ */
+export function getPlacementStyle(placement: DrawerPlacement): React.CSSProperties {
+  return PLACEMENT_STYLES[placement];
+}
+
+/**
+ * Get transform value for open state.
+ */
+export function getOpenTransform(placement: DrawerPlacement): string {
+  return OPEN_TRANSFORMS[placement];
+}
+
+/**
+ * Get closed transform value.
+ */
+export function getClosedTransform(placement: DrawerPlacement): string {
+  return PLACEMENT_STYLES[placement].transform as string;
+}
+
+/**
+ * Compute CSS transition value.
+ */
+export function computeTransitionValue(
+  mode: DrawerBehavior["transitionMode"] | undefined,
+  duration: DrawerBehavior["transitionDuration"],
+  easing: DrawerBehavior["transitionEasing"],
+): string | undefined {
+  if (mode === "none") {
+    return undefined;
+  }
+
+  const durationValue = duration ?? DRAWER_TRANSITION_DURATION;
+  const easingValue = easing ?? DRAWER_TRANSITION_EASING;
+
+  return `transform ${durationValue} ${easingValue}`;
+}
+
+/**
+ * Compute backdrop transition value.
+ */
+export function computeBackdropTransition(
+  mode: DrawerBehavior["transitionMode"] | undefined,
+  duration: DrawerBehavior["transitionDuration"],
+): string | undefined {
+  if (mode === "none") {
+    return undefined;
+  }
+  return `opacity ${duration ?? "220ms"} ease`;
+}
+
+/**
+ * Check if placement is horizontal (left/right).
+ */
+export function isHorizontalPlacement(placement: DrawerPlacement): boolean {
+  return placement === "left" || placement === "right";
+}
+
+/**
+ * Format dimension value to CSS string.
+ */
+export function formatDimension(value: string | number | undefined): string | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+}
+
+// ============================================================================
+// Edge Zone Styles
+// ============================================================================
+
+/**
+ * Options for computing edge zone style.
+ */
+export type EdgeZoneStyleOptions = {
+  placement: DrawerPlacement;
+  inline: boolean;
+  edgeWidth: number;
+  zIndex: number | undefined;
+};
+
+/**
+ * Compute edge zone style based on placement and positioning context.
+ *
+ * The edge zone is positioned at the edge where the drawer appears from:
+ * - left drawer: left edge of the container
+ * - right drawer: right edge of the container
+ * - top drawer: top edge of the container
+ * - bottom drawer: bottom edge of the container
+ *
+ * When inline=true, uses absolute positioning (relative to parent container).
+ * When inline=false, uses fixed positioning (relative to viewport).
+ */
+export function computeEdgeZoneStyle(options: EdgeZoneStyleOptions): React.CSSProperties {
+  const { placement, inline, edgeWidth, zIndex } = options;
+  const position = inline ? "absolute" : "fixed";
+  const computedZIndex = zIndex !== undefined ? zIndex - 2 : 1000;
+
+  return getEdgeZoneStyleByPlacement(placement, position, edgeWidth, computedZIndex);
+}
+
+function getEdgeZoneStyleByPlacement(
+  placement: DrawerPlacement,
+  position: "absolute" | "fixed",
+  edgeWidth: number,
+  zIndex: number,
+): React.CSSProperties {
+  // Common base style
+  const base: React.CSSProperties = {
+    position,
+    zIndex,
+    background: "transparent",
+    pointerEvents: "auto",
+  };
+
+  // Placement-specific positioning
+  if (placement === "left") {
+    return {
+      ...base,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      width: edgeWidth,
+    };
+  }
+
+  if (placement === "right") {
+    return {
+      ...base,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      width: edgeWidth,
+    };
+  }
+
+  if (placement === "top") {
+    return {
+      ...base,
+      top: 0,
+      left: 0,
+      right: 0,
+      height: edgeWidth,
+    };
+  }
+
+  // bottom
+  return {
+    ...base,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: edgeWidth,
+  };
+}

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);
+    });
+  });
+});