react-panel-layout 0.5.2 → 0.6.1

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,369 @@
+/**
+ * @file Drawer component
+ *
+ * Mobile-friendly slide-in panel with backdrop support.
+ * Supports swipe gestures for opening/closing.
+ */
+import * as React from "react";
+import type { DrawerBehavior, WindowPosition } from "../../types.js";
+import {
+  FloatingPanelCloseButton,
+  FloatingPanelContent,
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+} from "../paneling/FloatingPanelFrame.js";
+import {
+  DRAWER_HEADER_PADDING_Y,
+  DRAWER_HEADER_PADDING_X,
+  DRAWER_HEADER_GAP,
+  DRAWER_CONTENT_PADDING,
+} from "../../constants/styles.js";
+import { useDrawerSwipeInput } from "../../modules/drawer/useDrawerSwipeInput.js";
+import type { DrawerSwipeDirection } from "../../modules/drawer/types.js";
+import {
+  DRAWER_BACKDROP_BASE_STYLE,
+  DRAWER_PANEL_BASE_STYLE,
+  getPlacementStyle,
+  getOpenTransform,
+  computeTransitionValue,
+  computeBackdropTransition,
+  formatDimension,
+  computeEdgeZoneStyle,
+} from "./drawerStyles.js";
+import type { DrawerPlacement } from "./drawerStyles.js";
+import {
+  parseSwipeGesturesConfig,
+  resolvePlacement,
+  shouldShowEdgeZone,
+} from "./drawerSwipeConfig.js";
+import { useDrawerSwipeTransform } from "./useDrawerSwipeTransform.js";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type DrawerProps = {
+  id: string;
+  config: DrawerBehavior;
+  isOpen: boolean;
+  onClose: () => void;
+  onOpen?: () => void;
+  children: React.ReactNode;
+  zIndex?: number;
+  width?: string | number;
+  height?: string | number;
+  position?: WindowPosition;
+};
+
+// ============================================================================
+// Sub-components
+// ============================================================================
+
+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>
+  );
+};
+
+type DrawerHeaderViewProps = {
+  header?: DrawerBehavior["header"];
+  dismissible: boolean;
+  onClose: () => void;
+};
+
+function shouldShowCloseButton(dismissible: boolean, showCloseButton: boolean): boolean {
+  if (!dismissible) {
+    return false;
+  }
+  return showCloseButton;
+}
+
+function renderCloseButton(
+  shouldShow: boolean,
+  onClose: () => void,
+): React.ReactNode {
+  if (!shouldShow) {
+    return null;
+  }
+  return (
+    <FloatingPanelCloseButton
+      onClick={onClose}
+      aria-label="Close drawer"
+      style={{ marginLeft: "auto" }}
+    />
+  );
+}
+
+function renderEdgeZone(
+  showEdgeZone: boolean,
+  edgeZoneRef: React.RefObject<HTMLDivElement | null>,
+  edgeZoneStyle: React.CSSProperties,
+  onPointerDown: ((e: React.PointerEvent<HTMLElement>) => void) | undefined,
+  placement: string,
+): React.ReactNode {
+  if (!showEdgeZone) {
+    return null;
+  }
+  return (
+    <div
+      ref={edgeZoneRef}
+      style={edgeZoneStyle}
+      onPointerDown={onPointerDown}
+      data-drawer-edge-zone={placement}
+    />
+  );
+}
+
+const DrawerHeaderView: React.FC<DrawerHeaderViewProps> = ({ header, dismissible, onClose }) => {
+  if (!header) {
+    return null;
+  }
+
+  const showCloseButton = header.showCloseButton ?? true;
+  const shouldShow = shouldShowCloseButton(dismissible, showCloseButton);
+
+  return (
+    <FloatingPanelHeader
+      style={{ padding: `${DRAWER_HEADER_PADDING_Y} ${DRAWER_HEADER_PADDING_X}`, gap: DRAWER_HEADER_GAP }}
+    >
+      <FloatingPanelTitle>{header.title}</FloatingPanelTitle>
+      {renderCloseButton(shouldShow, onClose)}
+    </FloatingPanelHeader>
+  );
+};
+
+// ============================================================================
+// Style computation hooks
+// ============================================================================
+
+function useDrawerPanelStyle(
+  placement: DrawerPlacement,
+  isOpen: boolean,
+  isSwipeOperating: boolean,
+  config: DrawerBehavior,
+  dimensions: { width?: string | number; height?: string | number; zIndex?: number },
+): React.CSSProperties {
+  return React.useMemo((): React.CSSProperties => {
+    const effectiveMode = isSwipeOperating ? "none" : config.transitionMode;
+    const transitionValue = computeTransitionValue(
+      effectiveMode,
+      config.transitionDuration,
+      config.transitionEasing,
+    );
+
+    const placementStyle = getPlacementStyle(placement);
+    const transform = isOpen ? getOpenTransform(placement) : placementStyle.transform;
+    const position = config.inline ? "absolute" : "fixed";
+
+    return {
+      ...DRAWER_PANEL_BASE_STYLE,
+      position,
+      ...placementStyle,
+      transform,
+      transition: transitionValue,
+      zIndex: dimensions.zIndex,
+      width: formatDimension(dimensions.width),
+      height: formatDimension(dimensions.height),
+    };
+  }, [placement, isOpen, isSwipeOperating, config, dimensions]);
+}
+
+function useBackdropStyle(
+  placement: DrawerPlacement,
+  isOpen: boolean,
+  isSwipeOperating: boolean,
+  config: DrawerBehavior,
+  zIndex: number | undefined,
+): React.CSSProperties {
+  return React.useMemo((): React.CSSProperties => {
+    const effectiveMode = isSwipeOperating ? "none" : config.transitionMode;
+    const transitionValue = computeBackdropTransition(effectiveMode, config.transitionDuration);
+    const position = config.inline ? "absolute" as const : "fixed" as const;
+
+    return {
+      ...DRAWER_BACKDROP_BASE_STYLE,
+      position,
+      opacity: isOpen ? 1 : 0,
+      pointerEvents: isOpen ? "auto" : "none",
+      transition: transitionValue,
+      zIndex: zIndex !== undefined ? zIndex - 1 : undefined,
+    };
+  }, [isOpen, isSwipeOperating, config, zIndex]);
+}
+
+function useFrameStyle(placement: DrawerPlacement): React.CSSProperties {
+  return React.useMemo((): React.CSSProperties => {
+    const style: React.CSSProperties = { borderRadius: 0 };
+    if (placement === "left" || placement === "right") {
+      style.height = "100%";
+    }
+    return style;
+  }, [placement]);
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export const Drawer: React.FC<DrawerProps> = ({
+  id,
+  config,
+  isOpen,
+  onClose,
+  onOpen,
+  children,
+  zIndex,
+  width,
+  height,
+  position,
+}) => {
+  const {
+    dismissible = true,
+    header,
+    chrome = true,
+    inline = false,
+  } = config;
+
+  const swipeConfig = parseSwipeGesturesConfig(config.swipeGestures);
+  const placement = resolvePlacement(config.anchor, position);
+
+  // Refs
+  const drawerRef = React.useRef<HTMLDivElement>(null);
+  const backdropRef = React.useRef<HTMLDivElement>(null);
+  const edgeZoneRef = React.useRef<HTMLDivElement>(null);
+
+  // Swipe callbacks
+  const handleSwipeOpen = React.useCallback(() => {
+    onOpen?.();
+    config.onStateChange?.(true);
+  }, [onOpen, config]);
+
+  const handleSwipeClose = React.useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  // Swipe input handling
+  const {
+    state: swipeState,
+    displacement,
+    edgeContainerProps,
+    drawerContentProps,
+    isOpening,
+    isClosing,
+  } = useDrawerSwipeInput({
+    edgeContainerRef: edgeZoneRef,
+    drawerContentRef: drawerRef,
+    direction: placement as DrawerSwipeDirection,
+    isOpen,
+    onSwipeOpen: handleSwipeOpen,
+    onSwipeClose: handleSwipeClose,
+    enableEdgeSwipeOpen: swipeConfig.edgeSwipeOpen,
+    enableSwipeClose: swipeConfig.swipeClose,
+    edgeWidth: swipeConfig.edgeWidth,
+    dismissThreshold: swipeConfig.dismissThreshold,
+  });
+
+  const isSwipeOperating = swipeState.phase === "operating";
+
+  // Apply swipe transform
+  useDrawerSwipeTransform({
+    drawerRef,
+    backdropRef,
+    placement: placement as DrawerSwipeDirection,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    enabled: swipeConfig.enabled,
+  });
+
+  // Computed styles
+  const drawerStyle = useDrawerPanelStyle(placement, isOpen, isSwipeOperating, config, { width, height, zIndex });
+  const backdropStyle = useBackdropStyle(placement, isOpen, isSwipeOperating, config, zIndex);
+  const frameStyle = useFrameStyle(placement);
+
+  // Edge zone style: merge positioning style with gesture handlers' style
+  const edgeZoneStyle = React.useMemo((): React.CSSProperties => {
+    const positioningStyle = computeEdgeZoneStyle({
+      placement,
+      inline,
+      edgeWidth: swipeConfig.edgeWidth,
+      zIndex,
+    });
+    // Merge with gesture container styles (touchAction, etc.)
+    return { ...positioningStyle, ...edgeContainerProps.style };
+  }, [placement, inline, swipeConfig.edgeWidth, zIndex, edgeContainerProps.style]);
+
+  // Merged drawer style with swipe props
+  const mergedDrawerStyle = React.useMemo((): React.CSSProperties => {
+    if (!swipeConfig.enabled) {
+      return drawerStyle;
+    }
+    return { ...drawerStyle, ...drawerContentProps.style };
+  }, [swipeConfig.enabled, drawerStyle, drawerContentProps.style]);
+
+  // Visibility flags
+  const showEdgeZone = shouldShowEdgeZone(swipeConfig, isOpen, isOpening);
+  const ariaLabel = header?.title ?? config.ariaLabel ?? "Drawer";
+
+  const edgeZoneElement = renderEdgeZone(showEdgeZone, edgeZoneRef, edgeZoneStyle, edgeContainerProps.onPointerDown, placement);
+
+  return (
+    <>
+      {edgeZoneElement}
+      <div
+        ref={backdropRef}
+        style={backdropStyle}
+        onClick={dismissible ? onClose : undefined}
+      />
+      <div
+        ref={drawerRef}
+        data-layer-id={id}
+        data-placement={placement}
+        style={mergedDrawerStyle}
+        role="dialog"
+        aria-modal={dismissible ? true : undefined}
+        aria-hidden={isOpen ? undefined : true}
+        aria-label={ariaLabel}
+        onPointerDown={swipeConfig.enabled ? drawerContentProps.onPointerDown : undefined}
+      >
+        <DrawerContent
+          chrome={chrome}
+          frameStyle={frameStyle}
+          header={header}
+          dismissible={dismissible}
+          onClose={onClose}
+        >
+          {children}
+        </DrawerContent>
+      </div>
+    </>
+  );
+};

package/src/components/window/DrawerLayers.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file DrawerLayers component
+ */
+import * as React from "react";
+import type { LayerDefinition } from "../../types.js";
+import { Drawer } from "./Drawer.js";
+import { useDrawerState } from "../../modules/window/useDrawerState.js";
+
+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]);
+
+  const openHandlers = React.useMemo(() => {
+    const handlers = new Map<string, () => void>();
+    drawerLayers.forEach((layer) => {
+      handlers.set(layer.id, () => drawer.open(layer.id));
+    });
+    return handlers;
+  }, [drawerLayers, drawer.open]);
+
+  return (
+    <>
+      {drawerLayers.map((layer) => {
+        if (!layer.drawer) {
+          return null;
+        }
+
+        const isOpen = drawer.state(layer.id);
+        const onClose = closeHandlers.get(layer.id);
+        const onOpen = openHandlers.get(layer.id);
+
+        if (!onClose) {
+          return null;
+        }
+
+        return (
+          <Drawer
+            key={layer.id}
+            id={layer.id}
+            config={layer.drawer}
+            isOpen={isOpen}
+            onClose={onClose}
+            onOpen={onOpen}
+            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";