react-panel-layout 0.6.0 → 0.6.1

package/src/modules/dialog/AlertDialog.tsx

@@ -0,0 +1,221 @@
+/**
+ * @file AlertDialog component for alert, confirm, and prompt dialogs
+ */
+import * as React from "react";
+import type { AlertDialogProps } from "./types";
+import { DialogContainer } from "./DialogContainer";
+import {
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelContent,
+} from "../../components/paneling/FloatingPanelFrame";
+import {
+  ALERT_DIALOG_WIDTH,
+  ALERT_DIALOG_BUTTON_GAP,
+  ALERT_DIALOG_ACTIONS_PADDING,
+  ALERT_DIALOG_MESSAGE_PADDING,
+  ALERT_DIALOG_INPUT_MARGIN_TOP,
+  FLOATING_PANEL_HEADER_PADDING_Y,
+  FLOATING_PANEL_HEADER_PADDING_X,
+  COLOR_PRIMARY,
+  COLOR_NODE_EDITOR_BORDER,
+} from "../../constants/styles";
+
+const alertDialogStyle: React.CSSProperties = {
+  width: ALERT_DIALOG_WIDTH,
+  maxWidth: "90vw",
+};
+
+const messageStyle: React.CSSProperties = {
+  padding: ALERT_DIALOG_MESSAGE_PADDING,
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+};
+
+const actionsStyle: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: ALERT_DIALOG_BUTTON_GAP,
+  padding: ALERT_DIALOG_ACTIONS_PADDING,
+  borderTop: `1px solid ${COLOR_NODE_EDITOR_BORDER}`,
+};
+
+const inputStyle: React.CSSProperties = {
+  width: "100%",
+  padding: "8px 12px",
+  marginTop: ALERT_DIALOG_INPUT_MARGIN_TOP,
+  border: `1px solid ${COLOR_NODE_EDITOR_BORDER}`,
+  borderRadius: "4px",
+  fontSize: "14px",
+  boxSizing: "border-box",
+};
+
+const buttonBaseStyle: React.CSSProperties = {
+  padding: "8px 16px",
+  borderRadius: "4px",
+  fontSize: "14px",
+  fontWeight: 500,
+  cursor: "pointer",
+  border: "none",
+  transition: "background-color 0.15s ease",
+};
+
+const primaryButtonStyle: React.CSSProperties = {
+  ...buttonBaseStyle,
+  backgroundColor: COLOR_PRIMARY,
+  color: "#fff",
+};
+
+const secondaryButtonStyle: React.CSSProperties = {
+  ...buttonBaseStyle,
+  backgroundColor: "transparent",
+  border: `1px solid ${COLOR_NODE_EDITOR_BORDER}`,
+  color: "inherit",
+};
+
+/**
+ * Internal component for alert, confirm, and prompt dialogs
+ */
+export const AlertDialog: React.FC<AlertDialogProps> = ({
+  type,
+  visible,
+  title,
+  message,
+  confirmLabel = "OK",
+  cancelLabel = "Cancel",
+  placeholder,
+  defaultValue = "",
+  inputType = "text",
+  onConfirm,
+  onCancel,
+  swipeDismissible,
+}) => {
+  // Default swipeDismissible: false for alert (shouldn't be accidentally dismissed), true otherwise
+  const effectiveSwipeDismissible = swipeDismissible ?? (type !== "alert");
+  const [inputValue, setInputValue] = React.useState(defaultValue);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Reset input value when dialog opens
+  React.useEffect(() => {
+    if (visible) {
+      setInputValue(defaultValue);
+    }
+  }, [visible, defaultValue]);
+
+  // Focus input when prompt dialog opens
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (type !== "prompt") {
+      return;
+    }
+    if (!inputRef.current) {
+      return;
+    }
+    // Small delay to ensure dialog is rendered
+    const timeoutId = setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 50);
+    return () => clearTimeout(timeoutId);
+  }, [visible, type]);
+
+  const handleConfirm = React.useCallback(() => {
+    if (type === "prompt") {
+      onConfirm(inputValue);
+    } else {
+      onConfirm();
+    }
+  }, [type, inputValue, onConfirm]);
+
+  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  }, []);
+
+  const handleInputKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleConfirm();
+      }
+    },
+    [handleConfirm],
+  );
+
+  // Prevent input events from bubbling up
+  const handleInputPointerDown = React.useCallback((event: React.PointerEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const computeDialogLabel = (): string => {
+    if (title) {
+      return title;
+    }
+    if (type === "prompt") {
+      return "Prompt";
+    }
+    if (type === "confirm") {
+      return "Confirm";
+    }
+    return "Alert";
+  };
+  const dialogLabel = computeDialogLabel();
+
+  return (
+    <DialogContainer
+      visible={visible}
+      onClose={onCancel}
+      position="center"
+      dismissible={type !== "alert"}
+      closeOnEscape={true}
+      ariaLabel={dialogLabel}
+      swipeDismissible={effectiveSwipeDismissible}
+    >
+      <div style={alertDialogStyle}>
+        <FloatingPanelFrame>
+          <React.Activity mode={title ? "visible" : "hidden"}>
+            <FloatingPanelHeader
+              style={{
+                padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,
+              }}
+            >
+              <FloatingPanelTitle>{title}</FloatingPanelTitle>
+            </FloatingPanelHeader>
+          </React.Activity>
+          <FloatingPanelContent style={{ padding: 0 }}>
+            <div style={messageStyle}>
+              {message}
+              <React.Activity mode={type === "prompt" ? "visible" : "hidden"}>
+                <input
+                  ref={inputRef}
+                  type={inputType}
+                  value={inputValue}
+                  onChange={handleInputChange}
+                  onKeyDown={handleInputKeyDown}
+                  onPointerDown={handleInputPointerDown}
+                  placeholder={placeholder}
+                  style={inputStyle}
+                  aria-label={placeholder ?? "Input"}
+                />
+              </React.Activity>
+            </div>
+            <div style={actionsStyle}>
+              <React.Activity mode={type !== "alert" ? "visible" : "hidden"}>
+                <button type="button" style={secondaryButtonStyle} onClick={onCancel}>
+                  {cancelLabel}
+                </button>
+              </React.Activity>
+              <button type="button" style={primaryButtonStyle} onClick={handleConfirm}>
+                {confirmLabel}
+              </button>
+            </div>
+          </FloatingPanelContent>
+        </FloatingPanelFrame>
+      </div>
+    </DialogContainer>
+  );
+};
+
+AlertDialog.displayName = "AlertDialog";

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";