react-panel-layout 0.5.2 → 0.6.0

package/src/components/window/DialogOverlay.tsx

@@ -0,0 +1,180 @@
+/**
+ * @file Dialog-based overlay component with automatic positioning
+ */
+import * as React from "react";
+import type { Position } from "../../types";
+import { calculateContextMenuPosition, getViewportInfo } from "../../utils/dialogUtils";
+import { ensureDialogPolyfill } from "../../utils/polyfills/createDialogPolyfill";
+import { useEffectEvent } from "../../hooks/useEffectEvent";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect";
+import { useResizeObserver } from "../../hooks/useResizeObserver";
+import { DIALOG_OVERLAY_Z_INDEX } from "../../constants/styles";
+
+const contextDialogStyle: React.CSSProperties = {
+  border: "none",
+  padding: 0,
+  background: "transparent",
+};
+
+const contextContentStyle: React.CSSProperties = {
+  position: "fixed",
+  zIndex: DIALOG_OVERLAY_Z_INDEX,
+};
+
+type DataAttributes = Record<string, string | number | boolean>;
+
+export type DialogOverlayProps = {
+  anchor: Position;
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  contentClassName?: string;
+  contentStyle?: React.CSSProperties;
+  dataAttributes?: Record<string, string | number | boolean | null | undefined>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onPositionChange?: (position: Position) => void;
+};
+
+const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+
+ensureDialogPolyfill();
+
+const DialogOverlayContent: React.FC<Omit<DialogOverlayProps, "visible">> = ({
+  anchor,
+  onClose,
+  children,
+  contentClassName,
+  contentStyle,
+  dataAttributes,
+  onKeyDown,
+  onPositionChange,
+}) => {
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const { rect } = useResizeObserver(contentRef, { box: "border-box" });
+
+  const computedPosition = React.useMemo(() => {
+    const viewport = getViewportInfo();
+    const width = rect?.width ?? 0;
+    const height = rect?.height ?? 0;
+    return calculateContextMenuPosition(anchor.x, anchor.y, width, height, viewport);
+  }, [anchor.x, anchor.y, rect?.width, rect?.height]);
+
+  const handlePositionChange = useEffectEvent(onPositionChange);
+
+  React.useEffect(() => {
+    handlePositionChange?.(computedPosition);
+  }, [computedPosition]);
+
+  const handleClose = useEffectEvent(onClose);
+
+  React.useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!(event.target instanceof Node)) {
+        return;
+      }
+      if (contentRef.current && !contentRef.current.contains(event.target)) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, []);
+
+  const mergedStyle: React.CSSProperties = React.useMemo(
+    () => ({
+      ...contextContentStyle,
+      ...contentStyle,
+      left: computedPosition.x,
+      top: computedPosition.y,
+    }),
+    [contentStyle, computedPosition.x, computedPosition.y],
+  );
+
+  const dataProps = React.useMemo<DataAttributes>(() => {
+    if (!dataAttributes) {
+      return {};
+    }
+    return Object.entries(dataAttributes).reduce<DataAttributes>((acc, [key, value]) => {
+      if (value === null || value === undefined) {
+        return acc;
+      }
+      acc[`data-${key}`] = value;
+      return acc;
+    }, {});
+  }, [dataAttributes]);
+
+  return (
+    <div
+      ref={contentRef}
+      className={contentClassName}
+      style={mergedStyle}
+      onKeyDown={onKeyDown}
+      {...dataProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+const DialogOverlayImpl: React.FC<DialogOverlayProps> = ({
+  visible,
+  onClose,
+  anchor,
+  children,
+  contentClassName,
+  contentStyle,
+  dataAttributes,
+  onKeyDown,
+  onPositionChange,
+}) => {
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!dialogRef.current) {
+      return;
+    }
+
+    const dialog = dialogRef.current;
+    if (visible) {
+      dialog.showModal();
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [visible]);
+
+  const handleCancel = React.useCallback(
+    (event: React.SyntheticEvent) => {
+      event.preventDefault();
+      onClose();
+    },
+    [onClose],
+  );
+
+  return (
+    <dialog ref={dialogRef} style={contextDialogStyle} onCancel={handleCancel}>
+      <React.Activity mode={visible ? "visible" : "hidden"}>
+        <DialogOverlayContent
+          anchor={anchor}
+          onClose={onClose}
+          contentClassName={contentClassName}
+          contentStyle={contentStyle}
+          dataAttributes={dataAttributes}
+          onKeyDown={onKeyDown}
+          onPositionChange={onPositionChange}
+        >
+          {children}
+        </DialogOverlayContent>
+      </React.Activity>
+    </dialog>
+  );
+};
+
+export const DialogOverlay: React.FC<DialogOverlayProps> = (props) => {
+  if (!isBrowser) {
+    return null;
+  }
+  return <DialogOverlayImpl {...props} />;
+};
+
+DialogOverlay.displayName = "DialogOverlay";

package/src/components/window/Drawer.tsx

@@ -0,0 +1,282 @@
+/**
+ * @file Drawer component
+ *
+ * Mobile-friendly slide-in panel with backdrop support.
+ */
+import * as React from "react";
+import type { DrawerBehavior, WindowPosition } from "../../types";
+import {
+  FloatingPanelCloseButton,
+  FloatingPanelContent,
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+} from "../paneling/FloatingPanelFrame";
+import {
+  DRAWER_HEADER_PADDING_Y,
+  DRAWER_HEADER_PADDING_X,
+  DRAWER_HEADER_GAP,
+  DRAWER_CONTENT_PADDING,
+  COLOR_DRAWER_BACKDROP,
+  DRAWER_TRANSITION_DURATION,
+  DRAWER_TRANSITION_EASING,
+} from "../../constants/styles";
+
+const drawerBackdropStyle: React.CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  background: COLOR_DRAWER_BACKDROP,
+};
+
+const drawerBaseStyle: React.CSSProperties = {
+  willChange: "transform",
+};
+
+const drawerPlacementStyles: Record<string, 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 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}`;
+};
+
+export type DrawerProps = {
+  id: string;
+  config: DrawerBehavior;
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  zIndex?: number;
+  width?: string | number;
+  height?: string | number;
+  position?: WindowPosition;
+};
+
+const shouldShowCloseButton = (dismissible: boolean, showClose: boolean): boolean => {
+  if (!dismissible) {
+    return false;
+  }
+  return showClose;
+};
+
+type DrawerContentProps = {
+  chrome: boolean;
+  frameStyle: React.CSSProperties;
+  header?: DrawerBehavior["header"];
+  dismissible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+const DrawerContent: React.FC<DrawerContentProps> = ({ chrome, frameStyle, header, dismissible, onClose, children }) => {
+  if (!chrome) {
+    return <>{children}</>;
+  }
+  return (
+    <FloatingPanelFrame style={frameStyle}>
+      <DrawerHeaderView header={header} dismissible={dismissible} onClose={onClose} />
+      <FloatingPanelContent
+        style={{ padding: DRAWER_CONTENT_PADDING, flex: 1, display: "flex", flexDirection: "column" }}
+      >
+        {children}
+      </FloatingPanelContent>
+    </FloatingPanelFrame>
+  );
+};
+
+const DrawerHeaderView: React.FC<{
+  header?: DrawerBehavior["header"];
+  dismissible: boolean;
+  onClose: () => void;
+}> = ({ header, dismissible, onClose }) => {
+  if (!header) {
+    return null;
+  }
+
+  const showCloseButton = header.showCloseButton ?? true;
+  const shouldShowClose = shouldShowCloseButton(dismissible, showCloseButton);
+
+  return (
+    <React.Activity mode={header ? "visible" : "hidden"}>
+      <FloatingPanelHeader
+        style={{ padding: `${DRAWER_HEADER_PADDING_Y} ${DRAWER_HEADER_PADDING_X}`, gap: DRAWER_HEADER_GAP }}
+      >
+        <React.Activity mode={header ? "visible" : "hidden"}>
+          <FloatingPanelTitle>{header.title}</FloatingPanelTitle>
+        </React.Activity>
+        <React.Activity mode={shouldShowClose ? "visible" : "hidden"}>
+          <FloatingPanelCloseButton
+            onClick={onClose}
+            aria-label="Close drawer"
+            style={{ marginLeft: "auto" }}
+          />
+        </React.Activity>
+      </FloatingPanelHeader>
+    </React.Activity>
+  );
+};
+
+export const Drawer: React.FC<DrawerProps> = ({
+  id,
+  config,
+  isOpen,
+  onClose,
+  children,
+  zIndex,
+  width,
+  height,
+  position,
+}) => {
+  const {
+    dismissible = true,
+    header,
+    chrome = true,
+    inline = false,
+    transitionMode = "css",
+    transitionDuration,
+    transitionEasing,
+  } = config;
+
+  const resolvePlacement = React.useCallback(
+    (anchor?: DrawerBehavior["anchor"], pos?: WindowPosition): "left" | "right" | "top" | "bottom" => {
+      // Prefer explicit anchor from config
+      if (anchor) {
+        return anchor;
+      }
+      // Fall back to inferring from position
+      if (!pos) {
+        return "right";
+      }
+      if (pos.left !== undefined) {
+        return "left";
+      }
+      if (pos.right !== undefined) {
+        return "right";
+      }
+      if (pos.top !== undefined) {
+        return "top";
+      }
+      if (pos.bottom !== undefined) {
+        return "bottom";
+      }
+      return "right";
+    },
+    [],
+  );
+
+  const placement = resolvePlacement(config.anchor, position);
+
+  const openTransforms: Record<string, string> = {
+    left: "translateX(0)",
+    right: "translateX(0)",
+    top: "translateY(0)",
+    bottom: "translateY(0)",
+  };
+
+  const drawerStyle = React.useMemo((): React.CSSProperties => {
+    const transitionValue = computeTransitionValue(transitionMode, transitionDuration, transitionEasing);
+
+    const style: React.CSSProperties = {
+      ...drawerBaseStyle,
+      ...(inline ? { position: "absolute" } : { position: "fixed" }),
+      ...drawerPlacementStyles[placement],
+      transform: isOpen ? openTransforms[placement] : drawerPlacementStyles[placement].transform,
+      transition: transitionValue,
+    };
+
+    if (zIndex !== undefined) {
+      style.zIndex = zIndex;
+    }
+
+    if (width !== undefined) {
+      style.width = typeof width === "number" ? `${width}px` : width;
+    }
+    if (height !== undefined) {
+      style.height = typeof height === "number" ? `${height}px` : height;
+    }
+
+    return style;
+  }, [height, inline, isOpen, placement, transitionDuration, transitionEasing, transitionMode, width, zIndex]);
+
+  const ariaLabel = header?.title ?? config.ariaLabel ?? "Drawer";
+
+  const backdropStyle = React.useMemo((): React.CSSProperties => {
+    const base = inline ? { ...drawerBackdropStyle, position: "absolute" as const } : drawerBackdropStyle;
+    const transitionValue = transitionMode === "none" ? undefined : `opacity ${transitionDuration ?? "220ms"} ease`;
+    return {
+      ...base,
+      opacity: isOpen ? 1 : 0,
+      pointerEvents: isOpen ? "auto" : "none",
+      transition: transitionValue,
+      zIndex: zIndex !== undefined ? zIndex - 1 : undefined,
+    };
+  }, [inline, isOpen, transitionDuration, transitionMode, zIndex]);
+
+  const frameStyle = React.useMemo((): React.CSSProperties => {
+    const isVertical = placement === "left" || placement === "right";
+    const style: React.CSSProperties = { borderRadius: 0 };
+    if (isVertical) {
+      style.height = "100%";
+    }
+    return style;
+  }, [placement]);
+
+  return (
+    <>
+      <div style={backdropStyle} onClick={dismissible ? onClose : undefined} />
+      <div
+        data-layer-id={id}
+        data-placement={placement}
+        style={drawerStyle}
+        role="dialog"
+        aria-modal={dismissible ? true : undefined}
+        aria-hidden={isOpen ? undefined : true}
+        aria-label={ariaLabel}
+      >
+        <DrawerContent
+          chrome={chrome}
+          frameStyle={frameStyle}
+          header={header}
+          dismissible={dismissible}
+          onClose={onClose}
+        >
+          {children}
+        </DrawerContent>
+      </div>
+    </>
+  );
+};

package/src/components/window/DrawerLayers.tsx

@@ -0,0 +1,58 @@
+/**
+ * @file DrawerLayers component
+ */
+import * as React from "react";
+import type { LayerDefinition } from "../../types";
+import { Drawer } from "./Drawer";
+import { useDrawerState } from "../../modules/window/useDrawerState";
+
+export type DrawerLayersProps = {
+  layers: LayerDefinition[];
+};
+
+export const DrawerLayers: React.FC<DrawerLayersProps> = ({ layers }) => {
+  const drawer = useDrawerState(layers);
+
+  const drawerLayers = React.useMemo(() => layers.filter((layer) => layer.drawer), [layers]);
+
+  const closeHandlers = React.useMemo(() => {
+    const handlers = new Map<string, () => void>();
+    drawerLayers.forEach((layer) => {
+      handlers.set(layer.id, () => drawer.close(layer.id));
+    });
+    return handlers;
+  }, [drawerLayers, drawer.close]);
+
+  return (
+    <>
+      {drawerLayers.map((layer) => {
+        if (!layer.drawer) {
+          return null;
+        }
+
+        const isOpen = drawer.state(layer.id);
+        const onClose = closeHandlers.get(layer.id);
+
+        if (!onClose) {
+          return null;
+        }
+
+        return (
+          <Drawer
+            key={layer.id}
+            id={layer.id}
+            config={layer.drawer}
+            isOpen={isOpen}
+            onClose={onClose}
+            zIndex={layer.zIndex}
+            width={layer.width}
+            height={layer.height}
+            position={layer.position}
+          >
+            {layer.component}
+          </Drawer>
+        );
+      })}
+    </>
+  );
+};

package/src/components/window/FloatingWindow.tsx

@@ -0,0 +1,95 @@
+/**
+ * @file FloatingWindow component with chrome support
+ *
+ * Renders floating panel content with optional built-in chrome (FloatingPanelFrame).
+ * When chrome is enabled and header is provided, header becomes the drag handle.
+ */
+import * as React from "react";
+import type { FloatingBehavior } from "../../types";
+import {
+  FloatingPanelCloseButton,
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelControls,
+  FloatingPanelContent,
+} from "../paneling/FloatingPanelFrame";
+
+export type FloatingWindowProps = {
+  id: string;
+  config: FloatingBehavior;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+type CloseButtonProps = {
+  onClick: () => void;
+};
+
+const CloseButton: React.FC<CloseButtonProps> = ({ onClick }) => (
+  <FloatingPanelControls>
+    <FloatingPanelCloseButton onClick={onClick} aria-label="Close window" data-drag-ignore="true" />
+  </FloatingPanelControls>
+);
+
+type FloatingWindowHeaderProps = {
+  header?: FloatingBehavior["header"];
+  draggable?: boolean;
+  onClose: () => void;
+};
+
+const FloatingWindowHeader: React.FC<FloatingWindowHeaderProps> = ({ header, draggable, onClose }) => {
+  if (!header) {
+    return null;
+  }
+
+  const showCloseButton = header.showCloseButton ?? false;
+  const dragHandleProps = draggable ? { "data-drag-handle": "true" } : {};
+  const cursorStyle = draggable ? "grab" : undefined;
+
+  return (
+    <FloatingPanelHeader {...dragHandleProps} style={{ cursor: cursorStyle }}>
+      {header.title ? <FloatingPanelTitle>{header.title}</FloatingPanelTitle> : null}
+      {showCloseButton ? <CloseButton onClick={onClose} /> : null}
+    </FloatingPanelHeader>
+  );
+};
+
+type FloatingWindowViewProps = {
+  header?: FloatingBehavior["header"];
+  draggable?: boolean;
+  chrome: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+const FloatingWindowView: React.FC<FloatingWindowViewProps> = ({ header, draggable, chrome, onClose, children }) => {
+  if (!chrome) {
+    return <>{children}</>;
+  }
+
+  return (
+    <FloatingPanelFrame style={{ height: "100%", width: "100%" }}>
+      <FloatingWindowHeader header={header} draggable={draggable} onClose={onClose} />
+      <FloatingPanelContent style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+        {children}
+      </FloatingPanelContent>
+    </FloatingPanelFrame>
+  );
+};
+
+export const FloatingWindow: React.FC<FloatingWindowProps> = ({ id, config, onClose, children }) => {
+  const chrome = config.chrome ?? false;
+  const draggable = config.draggable ?? false;
+  const ariaLabel = config.header?.title ?? config.ariaLabel ?? "Floating window";
+
+  return (
+    <div data-floating-window={id} role="dialog" aria-label={ariaLabel} style={{ height: "100%", width: "100%" }}>
+      <FloatingWindowView header={config.header} draggable={draggable} chrome={chrome} onClose={onClose}>
+        {children}
+      </FloatingWindowView>
+    </div>
+  );
+};
+
+FloatingWindow.displayName = "FloatingWindow";