react-panel-layout 0.6.0 → 0.6.1

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

package/src/constants/styles.ts

@@ -259,3 +259,22 @@ export const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;
  */
 export const HORIZONTAL_DIVIDER_WIDTH = "var(--rpl-size-horizontal-divider-width, 4px)";
 export const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = "var(--rpl-space-horizontal-divider-hit-area-offset, 4px)";
+
+/**
+ * Modal
+ */
+export const COLOR_MODAL_BACKDROP = "var(--rpl-color-modal-backdrop, rgba(0, 0, 0, 0.5))";
+export const MODAL_TRANSITION_DURATION = "var(--rpl-modal-transition-duration, 200ms)";
+export const MODAL_TRANSITION_EASING = "var(--rpl-modal-transition-easing, ease-out)";
+export const MODAL_MIN_WIDTH = "var(--rpl-modal-min-width, 280px)";
+export const MODAL_MAX_WIDTH = "var(--rpl-modal-max-width, 90vw)";
+export const MODAL_MAX_HEIGHT = "var(--rpl-modal-max-height, 85vh)";
+
+/**
+ * Alert Dialog
+ */
+export const ALERT_DIALOG_WIDTH = "var(--rpl-alert-dialog-width, 320px)";
+export const ALERT_DIALOG_BUTTON_GAP = "var(--rpl-alert-dialog-button-gap, 8px)";
+export const ALERT_DIALOG_ACTIONS_PADDING = "var(--rpl-alert-dialog-actions-padding, 12px)";
+export const ALERT_DIALOG_MESSAGE_PADDING = "var(--rpl-alert-dialog-message-padding, 16px)";
+export const ALERT_DIALOG_INPUT_MARGIN_TOP = "var(--rpl-alert-dialog-input-margin-top, 12px)";

package/src/demo/pages/Dialog/alerts/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Dialog - Alerts page
+ */
+import * as React from "react";
+import { AlertDialogDemo } from "../components/AlertDialogDemo";
+import AlertDialogDemoSource from "../components/AlertDialogDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Dialog / Alert, Confirm, Prompt"
+      code={AlertDialogDemoSource}
+      codeTitle="AlertDialogDemo.tsx"
+      previewHeight={520}
+    >
+      <AlertDialogDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Dialog/card/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Dialog - Card Expansion page (Apple Music style)
+ */
+import * as React from "react";
+import { CardExpandDemo } from "../components/CardExpandDemo.js";
+import CardExpandDemoSource from "../components/CardExpandDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout/index.js";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Dialog / Card Expansion"
+      code={CardExpandDemoSource}
+      codeTitle="CardExpandDemo.tsx"
+      previewHeight={600}
+    >
+      <CardExpandDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Dialog/components/AlertDialogDemo.tsx

@@ -0,0 +1,124 @@
+/**
+ * @file Alert, Confirm, Prompt dialog demo
+ */
+import * as React from "react";
+import { useDialog } from "../../../../modules/dialog/useDialog";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DialogDemos.module.css";
+
+export const AlertDialogDemo: React.FC = () => {
+  const { alert, confirm, prompt, Outlet } = useDialog();
+  const [lastResult, setLastResult] = React.useState<string>("");
+
+  const handleAlert = async () => {
+    await alert({
+      title: "Information",
+      message: "This is an alert dialog. It displays information and waits for acknowledgment.",
+      okLabel: "Got it",
+    });
+    setLastResult("alert: acknowledged");
+  };
+
+  const handleConfirm = async () => {
+    const result = await confirm({
+      title: "Confirm Action",
+      message: "Are you sure you want to proceed? This action cannot be undone.",
+      confirmLabel: "Proceed",
+      cancelLabel: "Cancel",
+    });
+    setLastResult(`confirm: ${result ? "confirmed" : "cancelled"}`);
+  };
+
+  const handlePrompt = async () => {
+    const result = await prompt({
+      title: "Enter Name",
+      message: "Please enter your name:",
+      placeholder: "John Doe",
+      defaultValue: "",
+    });
+    setLastResult(`prompt: ${result === null ? "cancelled" : `"${result}"`}`);
+  };
+
+  const handlePasswordPrompt = async () => {
+    const result = await prompt({
+      title: "Enter Password",
+      message: "Please enter your password:",
+      inputType: "password",
+      confirmLabel: "Submit",
+    });
+    setLastResult(`password prompt: ${result === null ? "cancelled" : "(password entered)"}`);
+  };
+
+  const handleSequence = async () => {
+    await alert("First, let me explain...");
+
+    const proceed = await confirm({
+      message: "Would you like to continue with the setup?",
+      confirmLabel: "Yes",
+      cancelLabel: "No",
+    });
+
+    if (!proceed) {
+      setLastResult("sequence: cancelled at step 2");
+      return;
+    }
+
+    const name = await prompt({
+      message: "What is your name?",
+      defaultValue: "Anonymous",
+    });
+
+    if (name === null) {
+      setLastResult("sequence: cancelled at step 3");
+      return;
+    }
+
+    await alert(`Hello, ${name}! Setup complete.`);
+    setLastResult(`sequence: completed with name "${name}"`);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.section}>
+        <h3>Alert Dialog</h3>
+        <p>Simple information dialog that waits for acknowledgment.</p>
+        <DemoButton variant="primary" size="md" onClick={handleAlert}>
+          Show Alert
+        </DemoButton>
+      </div>
+
+      <div className={styles.section}>
+        <h3>Confirm Dialog</h3>
+        <p>Yes/No dialog that returns a boolean result.</p>
+        <DemoButton variant="primary" size="md" onClick={handleConfirm}>
+          Show Confirm
+        </DemoButton>
+      </div>
+
+      <div className={styles.section}>
+        <h3>Prompt Dialog</h3>
+        <p>Input dialog that returns the entered value or null if cancelled.</p>
+        <div className={styles.buttonGroup}>
+          <DemoButton variant="primary" size="md" onClick={handlePrompt}>
+            Show Prompt
+          </DemoButton>
+          <DemoButton variant="secondary" size="md" onClick={handlePasswordPrompt}>
+            Password Prompt
+          </DemoButton>
+        </div>
+      </div>
+
+      <div className={styles.section}>
+        <h3>Dialog Sequence</h3>
+        <p>Chain multiple dialogs together using async/await.</p>
+        <DemoButton variant="primary" size="md" onClick={handleSequence}>
+          Start Sequence
+        </DemoButton>
+      </div>
+
+      {lastResult ? <div className={styles.resultBox}>Last result: {lastResult}</div> : null}
+
+      <Outlet />
+    </div>
+  );
+};