react-panel-layout 0.6.0 → 0.6.1

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

package/src/modules/dialog/Modal.tsx

@@ -0,0 +1,182 @@
+/**
+ * @file Modal component - Centered modal dialog with optional chrome
+ */
+import * as React from "react";
+import type { ModalProps } from "./types";
+import { DialogContainer } from "./DialogContainer";
+import {
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelContent,
+  FloatingPanelCloseButton,
+} from "../../components/paneling/FloatingPanelFrame";
+import {
+  MODAL_MIN_WIDTH,
+  MODAL_MAX_WIDTH,
+  MODAL_MAX_HEIGHT,
+  FLOATING_PANEL_HEADER_PADDING_Y,
+  FLOATING_PANEL_HEADER_PADDING_X,
+  FLOATING_PANEL_GAP,
+} from "../../constants/styles";
+
+const modalContentStyle: React.CSSProperties = {
+  minWidth: MODAL_MIN_WIDTH,
+  maxWidth: MODAL_MAX_WIDTH,
+  maxHeight: MODAL_MAX_HEIGHT,
+  display: "flex",
+  flexDirection: "column",
+};
+
+type ModalContentProps = {
+  header?: ModalProps["header"];
+  dismissible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  contentStyle?: React.CSSProperties;
+};
+
+const ModalContentWithChrome: React.FC<ModalContentProps> = ({
+  header,
+  dismissible,
+  onClose,
+  children,
+  contentStyle,
+}) => {
+  const showCloseButton = header?.showCloseButton ?? true;
+  const shouldShowClose = dismissible ? showCloseButton : false;
+
+  const hasHeader = header !== undefined;
+
+  return (
+    <FloatingPanelFrame>
+      <React.Activity mode={hasHeader ? "visible" : "hidden"}>
+        <FloatingPanelHeader
+          style={{
+            padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,
+            gap: FLOATING_PANEL_GAP,
+          }}
+        >
+          <FloatingPanelTitle>{header?.title}</FloatingPanelTitle>
+          <React.Activity mode={shouldShowClose ? "visible" : "hidden"}>
+            <FloatingPanelCloseButton onClick={onClose} aria-label="Close modal" style={{ marginLeft: "auto" }} />
+          </React.Activity>
+        </FloatingPanelHeader>
+      </React.Activity>
+      <FloatingPanelContent style={{ flex: 1, overflow: "auto", ...contentStyle }}>{children}</FloatingPanelContent>
+    </FloatingPanelFrame>
+  );
+};
+
+type ModalContentRendererProps = ModalContentProps & {
+  chrome: boolean;
+};
+
+const ModalContentRenderer: React.FC<ModalContentRendererProps> = ({ chrome, children, ...chromeProps }) => {
+  if (chrome) {
+    return <ModalContentWithChrome {...chromeProps}>{children}</ModalContentWithChrome>;
+  }
+  return <>{children}</>;
+};
+
+/**
+ * Modal component for displaying centered dialogs.
+ * Uses native <dialog> element for proper accessibility and top-layer rendering.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Modal
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   header={{ title: "Settings" }}
+ * >
+ *   <form>
+ *     <input type="text" placeholder="Name" />
+ *     <button type="submit">Save</button>
+ *   </form>
+ * </Modal>
+ * ```
+ */
+export const Modal: React.FC<ModalProps> = ({
+  visible,
+  onClose,
+  children,
+  header,
+  width,
+  height,
+  maxWidth,
+  maxHeight,
+  chrome = true,
+  dismissible = true,
+  closeOnEscape = true,
+  preventBodyScroll = true,
+  returnFocus = true,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  transitionMode = "css",
+  transitionDuration,
+  transitionEasing,
+  contentStyle: propContentStyle,
+  swipeDismissible,
+  openDirection = "center",
+  useViewTransition = false,
+}) => {
+  const computedStyle = React.useMemo((): React.CSSProperties => {
+    const style: React.CSSProperties = { ...modalContentStyle };
+
+    if (width !== undefined) {
+      style.width = typeof width === "number" ? `${width}px` : width;
+    }
+    if (height !== undefined) {
+      style.height = typeof height === "number" ? `${height}px` : height;
+    }
+    if (maxWidth !== undefined) {
+      style.maxWidth = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+    }
+    if (maxHeight !== undefined) {
+      style.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+    }
+
+    return style;
+  }, [width, height, maxWidth, maxHeight]);
+
+  const effectiveAriaLabel = ariaLabel ?? header?.title ?? "Modal";
+
+  return (
+    <DialogContainer
+      visible={visible}
+      onClose={onClose}
+      position="center"
+      dismissible={dismissible}
+      closeOnEscape={closeOnEscape}
+      preventBodyScroll={preventBodyScroll}
+      returnFocus={returnFocus}
+      ariaLabel={effectiveAriaLabel}
+      ariaLabelledBy={ariaLabelledBy}
+      ariaDescribedBy={ariaDescribedBy}
+      transitionMode={transitionMode}
+      transitionDuration={transitionDuration}
+      transitionEasing={transitionEasing}
+      swipeDismissible={swipeDismissible}
+      openDirection={openDirection}
+      useViewTransition={useViewTransition}
+    >
+      <div style={computedStyle}>
+        <ModalContentRenderer
+          chrome={chrome}
+          header={header}
+          dismissible={dismissible}
+          onClose={onClose}
+          contentStyle={propContentStyle}
+        >
+          {children}
+        </ModalContentRenderer>
+      </div>
+    </DialogContainer>
+  );
+};
+
+Modal.displayName = "Modal";

package/src/modules/dialog/SwipeDialogContainer.tsx

@@ -0,0 +1,208 @@
+/**
+ * @file Swipeable dialog container component.
+ *
+ * This component extends the base dialog functionality with swipe-to-dismiss
+ * and multi-phase animations. It uses native <dialog> element for top layer
+ * positioning and custom transform animations.
+ */
+import * as React from "react";
+import type { DialogContainerProps } from "./types.js";
+import { useDialogContainer } from "./useDialogContainer.js";
+import { useDialogSwipeInput } from "./useDialogSwipeInput.js";
+import { useDialogTransform } from "./useDialogTransform.js";
+import { COLOR_MODAL_BACKDROP } 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",
+  willChange: "transform, opacity",
+};
+
+const backdropStyle: React.CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  background: COLOR_MODAL_BACKDROP,
+  pointerEvents: "auto",
+  willChange: "opacity",
+};
+
+/**
+ * Swipeable dialog container with multi-phase animation.
+ *
+ * Uses native <dialog> for top layer positioning and custom JS animations
+ * for swipe-to-dismiss functionality.
+ */
+export const SwipeDialogContainer: React.FC<DialogContainerProps> = ({
+  visible,
+  onClose,
+  children,
+  position = "center",
+  dismissible = true,
+  closeOnEscape = true,
+  returnFocus = true,
+  preventBodyScroll = true,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  swipeDismissible = true,
+  openDirection = "center",
+  useViewTransition = false,
+}) => {
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const backdropRef = React.useRef<HTMLDivElement>(null);
+
+  // Base dialog lifecycle management
+  const { dialogRef, dialogProps } = useDialogContainer({
+    visible,
+    onClose,
+    dismissible,
+    closeOnEscape,
+    returnFocus,
+    preventBodyScroll,
+  });
+
+  // Swipe input detection - free 2D movement
+  const swipeEnabled = swipeDismissible ? visible : false;
+  const {
+    state: swipeState,
+    containerProps: swipeContainerProps,
+    displacement,
+    displacement2D,
+    isOperating,
+  } = useDialogSwipeInput({
+    containerRef: contentRef,
+    openDirection,
+    enabled: swipeEnabled,
+    onSwipeDismiss: onClose,
+  });
+
+  // Transform and animation management
+  const { phase, isAnimating, triggerClose } = useDialogTransform({
+    elementRef: contentRef,
+    backdropRef,
+    visible,
+    openDirection,
+    swipeState,
+    displacement,
+    displacement2D,
+    useViewTransition,
+    onCloseComplete: onClose,
+  });
+
+  // Handle backdrop click
+  const handleBackdropClick = React.useCallback(() => {
+    if (!dismissible) {
+      return;
+    }
+    if (isOperating) {
+      return;
+    }
+    if (isAnimating) {
+      return;
+    }
+    triggerClose();
+  }, [dismissible, isOperating, isAnimating, triggerClose]);
+
+  // Compute content wrapper style based on position
+  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]);
+
+  // Merge swipe container props with content style
+  // Note: We don't use React.Activity here because it uses display:none,
+  // which prevents dimension measurement needed for animations.
+  // Instead, we use visibility and opacity controlled by the animation.
+  const mergedContentStyle = React.useMemo((): React.CSSProperties => {
+    const style: React.CSSProperties = {
+      ...contentStyle,
+      ...swipeContainerProps.style,
+    };
+
+    // When closed, hide the content but keep it in layout for dimension measurement
+    if (phase === "closed") {
+      style.visibility = "hidden";
+      style.pointerEvents = "none";
+    }
+
+    return style;
+  }, [swipeContainerProps.style, phase]);
+
+  // Stop propagation on content pointer events
+  const handleContentPointerDown = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    swipeContainerProps.onPointerDown?.(event);
+    // Don't stop propagation - let swipe input handle it
+  }, [swipeContainerProps]);
+
+  // Hide dialog styling (we use our own backdrop)
+  const hideNativeBackdrop = `
+    dialog::backdrop {
+      background: transparent;
+    }
+  `;
+
+  return (
+    <>
+      <style>{hideNativeBackdrop}</style>
+      <dialog
+        ref={dialogRef}
+        style={dialogBaseStyle}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+        {...dialogProps}
+      >
+        {/* Custom backdrop for animated opacity */}
+        <div
+          ref={backdropRef}
+          style={backdropStyle}
+          onClick={handleBackdropClick}
+          aria-hidden="true"
+        />
+
+        <div style={computedContentWrapperStyle}>
+          <div
+            ref={contentRef}
+            style={mergedContentStyle}
+            onPointerDown={handleContentPointerDown}
+          >
+            {children}
+          </div>
+        </div>
+      </dialog>
+    </>
+  );
+};
+
+SwipeDialogContainer.displayName = "SwipeDialogContainer";