react-panel-layout 0.5.2 → 0.6.1

package/src/modules/dialog/DialogContainer.spec.tsx

@@ -0,0 +1,228 @@
+/**
+ * @file Tests for DialogContainer component
+ */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { DialogContainer } from "./DialogContainer";
+import * as React from "react";
+
+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 };
+};
+
+describe("DialogContainer", () => {
+  const originalShowModal = HTMLDialogElement.prototype.showModal;
+  const originalClose = HTMLDialogElement.prototype.close;
+  const dialogCallState = {
+    showModal: createCallTracker(),
+    close: createCallTracker(),
+  };
+
+  beforeEach(() => {
+    // Mock showModal and close for dialog element
+    dialogCallState.showModal = createCallTracker();
+    dialogCallState.close = createCallTracker();
+    HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
+      dialogCallState.showModal.fn();
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+      dialogCallState.close.fn();
+      this.removeAttribute("open");
+    };
+  });
+
+  afterEach(() => {
+    HTMLDialogElement.prototype.showModal = originalShowModal;
+    HTMLDialogElement.prototype.close = originalClose;
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  it("should render children when visible", () => {
+    render(
+      <DialogContainer visible={true} onClose={() => {}}>
+        <div data-testid="content">Hello</div>
+      </DialogContainer>,
+    );
+
+    expect(screen.getByTestId("content")).toBeInTheDocument();
+    expect(screen.getByTestId("content")).toHaveTextContent("Hello");
+  });
+
+  it("should call showModal when visible is true", () => {
+    render(
+      <DialogContainer visible={true} onClose={() => {}}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    expect(dialogCallState.showModal.calls).toHaveLength(1);
+  });
+
+  it("should call close when visible changes from true to false", () => {
+    const { rerender } = render(
+      <DialogContainer visible={true} onClose={() => {}}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    rerender(
+      <DialogContainer visible={false} onClose={() => {}}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    expect(dialogCallState.close.calls).toHaveLength(1);
+  });
+
+  it("should call onClose when Escape is pressed", () => {
+    const onClose = createCallTracker();
+    render(
+      <DialogContainer visible={true} onClose={onClose.fn}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    expect(dialog).not.toBeNull();
+
+    // Simulate cancel event (triggered by Escape key)
+    fireEvent(dialog!, new Event("cancel", { bubbles: true, cancelable: true }));
+
+    expect(onClose.calls).toHaveLength(1);
+  });
+
+  it("should NOT call onClose when Escape is pressed and closeOnEscape is false", () => {
+    const onClose = createCallTracker();
+    render(
+      <DialogContainer visible={true} onClose={onClose.fn} closeOnEscape={false}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    fireEvent(dialog!, new Event("cancel", { bubbles: true, cancelable: true }));
+
+    expect(onClose.calls).toHaveLength(0);
+  });
+
+  it("should call onClose when backdrop is clicked", () => {
+    const onClose = createCallTracker();
+    render(
+      <DialogContainer visible={true} onClose={onClose.fn}>
+        <div data-testid="content">Content</div>
+      </DialogContainer>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    // Click directly on dialog (backdrop area)
+    fireEvent.click(dialog!);
+
+    expect(onClose.calls).toHaveLength(1);
+  });
+
+  it("should NOT call onClose when content is clicked", () => {
+    const onClose = createCallTracker();
+    render(
+      <DialogContainer visible={true} onClose={onClose.fn}>
+        <div data-testid="content">Content</div>
+      </DialogContainer>,
+    );
+
+    const content = screen.getByTestId("content");
+    fireEvent.click(content);
+
+    expect(onClose.calls).toHaveLength(0);
+  });
+
+  it("should NOT call onClose when backdrop is clicked and dismissible is false", () => {
+    const onClose = createCallTracker();
+    render(
+      <DialogContainer visible={true} onClose={onClose.fn} dismissible={false}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    fireEvent.click(dialog!);
+
+    expect(onClose.calls).toHaveLength(0);
+  });
+
+  it("should apply aria attributes", () => {
+    render(
+      <DialogContainer
+        visible={true}
+        onClose={() => {}}
+        ariaLabel="Test dialog"
+        ariaLabelledBy="title-id"
+        ariaDescribedBy="desc-id"
+      >
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    expect(dialog).toHaveAttribute("aria-label", "Test dialog");
+    expect(dialog).toHaveAttribute("aria-labelledby", "title-id");
+    expect(dialog).toHaveAttribute("aria-describedby", "desc-id");
+  });
+
+  it("should prevent body scroll when visible", () => {
+    render(
+      <DialogContainer visible={true} onClose={() => {}}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    expect(document.body.style.overflow).toBe("hidden");
+  });
+
+  it("should restore body scroll on unmount", () => {
+    const { unmount } = render(
+      <DialogContainer visible={true} onClose={() => {}}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    expect(document.body.style.overflow).toBe("hidden");
+
+    unmount();
+
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("should NOT prevent body scroll when preventBodyScroll is false", () => {
+    render(
+      <DialogContainer visible={true} onClose={() => {}} preventBodyScroll={false}>
+        <div>Content</div>
+      </DialogContainer>,
+    );
+
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("should stop propagation on content pointer down to prevent backdrop detection", () => {
+    const onClose = createCallTracker();
+    render(
+      <DialogContainer visible={true} onClose={onClose.fn}>
+        <button data-testid="button">Click me</button>
+      </DialogContainer>,
+    );
+
+    const button = screen.getByTestId("button");
+    fireEvent.pointerDown(button);
+
+    // The click should not close the dialog because propagation is stopped
+    expect(onClose.calls).toHaveLength(0);
+  });
+});

package/src/modules/dialog/DialogContainer.tsx

@@ -0,0 +1,188 @@
+/**
+ * @file Base dialog container component using native <dialog> element
+ */
+import * as React from "react";
+import type { DialogContainerProps } from "./types.js";
+import { useDialogContainer } from "./useDialogContainer.js";
+import { SwipeDialogContainer } from "./SwipeDialogContainer.js";
+import {
+  COLOR_MODAL_BACKDROP,
+  MODAL_TRANSITION_DURATION,
+  MODAL_TRANSITION_EASING,
+} from "../../constants/styles.js";
+
+const dialogBaseStyle: React.CSSProperties = {
+  border: "none",
+  padding: 0,
+  background: "transparent",
+  maxWidth: "none",
+  maxHeight: "none",
+  overflow: "visible",
+};
+
+const contentWrapperStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none",
+};
+
+const contentStyle: React.CSSProperties = {
+  pointerEvents: "auto",
+};
+
+const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+
+type DialogContainerImplProps = DialogContainerProps;
+
+const DialogContainerImpl: React.FC<DialogContainerImplProps> = ({
+  visible,
+  onClose,
+  children,
+  position = "center",
+  dismissible = true,
+  closeOnEscape = true,
+  returnFocus = true,
+  preventBodyScroll = true,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  transitionMode = "css",
+  transitionDuration = MODAL_TRANSITION_DURATION,
+  transitionEasing = MODAL_TRANSITION_EASING,
+}) => {
+  const { dialogRef, dialogProps } = useDialogContainer({
+    visible,
+    onClose,
+    dismissible,
+    closeOnEscape,
+    returnFocus,
+    preventBodyScroll,
+  });
+
+  const backdropStyle = React.useMemo((): string => {
+    if (transitionMode === "none") {
+      return `
+        dialog::backdrop {
+          background: ${COLOR_MODAL_BACKDROP};
+        }
+      `;
+    }
+    return `
+      dialog::backdrop {
+        background: ${COLOR_MODAL_BACKDROP};
+        opacity: 0;
+        transition: opacity ${transitionDuration} ${transitionEasing};
+      }
+      dialog[open]::backdrop {
+        opacity: 1;
+      }
+    `;
+  }, [transitionMode, transitionDuration, transitionEasing]);
+
+  const computedContentWrapperStyle = React.useMemo((): React.CSSProperties => {
+    if (position === "center") {
+      return contentWrapperStyle;
+    }
+    // Absolute position
+    const style: React.CSSProperties = {
+      ...contentWrapperStyle,
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+    };
+    if (position.x !== undefined) {
+      style.left = position.x;
+    }
+    if (position.y !== undefined) {
+      style.top = position.y;
+    }
+    return style;
+  }, [position]);
+
+  const computedContentStyle = React.useMemo((): React.CSSProperties => {
+    if (transitionMode === "none") {
+      return contentStyle;
+    }
+    return {
+      ...contentStyle,
+      opacity: visible ? 1 : 0,
+      transform: visible ? "scale(1)" : "scale(0.95)",
+      transition: `opacity ${transitionDuration} ${transitionEasing}, transform ${transitionDuration} ${transitionEasing}`,
+    };
+  }, [visible, transitionMode, transitionDuration, transitionEasing]);
+
+  // Stop propagation on pointer down inside content to prevent backdrop click handling
+  const handleContentPointerDown = React.useCallback((event: React.PointerEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  return (
+    <>
+      <style>{backdropStyle}</style>
+      <dialog
+        ref={dialogRef}
+        style={dialogBaseStyle}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+        {...dialogProps}
+      >
+        <div style={computedContentWrapperStyle}>
+          <React.Activity mode={visible ? "visible" : "hidden"}>
+            <div style={computedContentStyle} onPointerDown={handleContentPointerDown}>
+              {children}
+            </div>
+          </React.Activity>
+        </div>
+      </dialog>
+    </>
+  );
+};
+
+/**
+ * Base container for dialog-based overlays using native <dialog> element.
+ * Opens in the browser's top layer, ensuring it appears above all other content.
+ *
+ * Supports three transition modes:
+ * - "none": No animation
+ * - "css": CSS-based fade/scale animation (default)
+ * - "swipe": Swipeable with multi-phase animation
+ *
+ * @example
+ * ```tsx
+ * <DialogContainer
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <div>Dialog content</div>
+ * </DialogContainer>
+ * ```
+ *
+ * @example Swipeable dialog
+ * ```tsx
+ * <DialogContainer
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   transitionMode="swipe"
+ *   openDirection="bottom"
+ * >
+ *   <div>Swipe down to close</div>
+ * </DialogContainer>
+ * ```
+ */
+export const DialogContainer: React.FC<DialogContainerProps> = (props) => {
+  if (!isBrowser) {
+    return null;
+  }
+
+  // Use SwipeDialogContainer for swipe mode
+  if (props.transitionMode === "swipe") {
+    return <SwipeDialogContainer {...props} />;
+  }
+
+  return <DialogContainerImpl {...props} />;
+};
+
+DialogContainer.displayName = "DialogContainer";

package/src/modules/dialog/Modal.spec.tsx

@@ -0,0 +1,220 @@
+/**
+ * @file Tests for Modal component
+ */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Modal } from "./Modal";
+
+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 };
+};
+
+describe("Modal", () => {
+  const originalShowModal = HTMLDialogElement.prototype.showModal;
+  const originalClose = HTMLDialogElement.prototype.close;
+
+  beforeEach(() => {
+    HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+      this.removeAttribute("open");
+    };
+  });
+
+  afterEach(() => {
+    HTMLDialogElement.prototype.showModal = originalShowModal;
+    HTMLDialogElement.prototype.close = originalClose;
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  it("should render children when visible", () => {
+    render(
+      <Modal visible={true} onClose={() => {}}>
+        <div data-testid="content">Modal content</div>
+      </Modal>,
+    );
+
+    expect(screen.getByTestId("content")).toBeInTheDocument();
+    expect(screen.getByTestId("content")).toHaveTextContent("Modal content");
+  });
+
+  it("should render header with title when provided", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} header={{ title: "Test Title" }}>
+        <div>Content</div>
+      </Modal>,
+    );
+
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+  });
+
+  it("should render close button in header when showCloseButton is true", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} header={{ title: "Title", showCloseButton: true }}>
+        <div>Content</div>
+      </Modal>,
+    );
+
+    expect(screen.getByRole("button", { name: "Close modal" })).toBeInTheDocument();
+  });
+
+  it("should NOT render close button when showCloseButton is false", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} header={{ title: "Title", showCloseButton: false }}>
+        <div>Content</div>
+      </Modal>,
+    );
+
+    expect(screen.queryByRole("button", { name: "Close modal" })).not.toBeInTheDocument();
+  });
+
+  it("should NOT render close button when dismissible is false", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} dismissible={false} header={{ title: "Title", showCloseButton: true }}>
+        <div>Content</div>
+      </Modal>,
+    );
+
+    expect(screen.queryByRole("button", { name: "Close modal" })).not.toBeInTheDocument();
+  });
+
+  it("should call onClose when close button is clicked", () => {
+    const onClose = createCallTracker();
+    render(
+      <Modal visible={true} onClose={onClose.fn} header={{ title: "Title" }}>
+        <div>Content</div>
+      </Modal>,
+    );
+
+    const closeButton = screen.getByRole("button", { name: "Close modal" });
+    fireEvent.click(closeButton);
+
+    expect(onClose.calls).toHaveLength(1);
+  });
+
+  it("should call onClose when Escape is pressed", () => {
+    const onClose = createCallTracker();
+    render(
+      <Modal visible={true} onClose={onClose.fn}>
+        <div>Content</div>
+      </Modal>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    fireEvent(dialog!, new Event("cancel", { bubbles: true, cancelable: true }));
+
+    expect(onClose.calls).toHaveLength(1);
+  });
+
+  it("should call onClose when backdrop is clicked", () => {
+    const onClose = createCallTracker();
+    render(
+      <Modal visible={true} onClose={onClose.fn}>
+        <div data-testid="content">Content</div>
+      </Modal>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    fireEvent.click(dialog!);
+
+    expect(onClose.calls).toHaveLength(1);
+  });
+
+  it("should NOT call onClose when content is clicked", () => {
+    const onClose = createCallTracker();
+    render(
+      <Modal visible={true} onClose={onClose.fn}>
+        <div data-testid="content">Content</div>
+      </Modal>,
+    );
+
+    const content = screen.getByTestId("content");
+    fireEvent.click(content);
+
+    expect(onClose.calls).toHaveLength(0);
+  });
+
+  it("should NOT render chrome when chrome is false", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} chrome={false} header={{ title: "Title" }}>
+        <div data-testid="content">Content</div>
+      </Modal>,
+    );
+
+    // Header should not be rendered when chrome is false
+    expect(screen.queryByText("Title")).not.toBeInTheDocument();
+    expect(screen.getByTestId("content")).toBeInTheDocument();
+  });
+
+  it("should set aria-label from header title", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} header={{ title: "Settings Dialog" }}>
+        <div>Content</div>
+      </Modal>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    expect(dialog).toHaveAttribute("aria-label", "Settings Dialog");
+  });
+
+  it("should use custom aria-label when provided", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} ariaLabel="Custom Label" header={{ title: "Title" }}>
+        <div>Content</div>
+      </Modal>,
+    );
+
+    const dialog = document.querySelector("dialog");
+    expect(dialog).toHaveAttribute("aria-label", "Custom Label");
+  });
+
+  it("should handle input focus without conflict", () => {
+    render(
+      <Modal visible={true} onClose={() => {}}>
+        <input data-testid="input" type="text" />
+      </Modal>,
+    );
+
+    const input = screen.getByTestId("input") as HTMLInputElement;
+    input.focus();
+    fireEvent.change(input, { target: { value: "test" } });
+
+    expect(input.value).toBe("test");
+  });
+
+  it("should render with custom width and height", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} width={500} height={400}>
+        <div data-testid="content">Content</div>
+      </Modal>,
+    );
+
+    const content = screen.getByTestId("content");
+    // Traverse: FloatingPanelContent > inner > overflow > shadow > computedStyle div
+    const styledDiv = content.parentElement?.parentElement?.parentElement?.parentElement?.parentElement;
+    expect(styledDiv).toHaveStyle({ width: "500px", height: "400px" });
+  });
+
+  it("should render with string width and height", () => {
+    render(
+      <Modal visible={true} onClose={() => {}} width="80%" height="auto">
+        <div data-testid="content">Content</div>
+      </Modal>,
+    );
+
+    const content = screen.getByTestId("content");
+    // Traverse: FloatingPanelContent > inner > overflow > shadow > computedStyle div
+    const styledDiv = content.parentElement?.parentElement?.parentElement?.parentElement?.parentElement;
+    expect(styledDiv).toHaveStyle({ width: "80%", height: "auto" });
+  });
+});