react-panel-layout 0.6.0 → 0.7.0

package/src/components/window/Drawer.tsx

@@ -2,83 +2,56 @@
  * @file Drawer component
  *
  * Mobile-friendly slide-in panel with backdrop support.
+ * Supports swipe gestures for opening/closing.
+ * Supports reveal mode where content slides to show drawer behind.
  */
 import * as React from "react";
-import type { DrawerBehavior, WindowPosition } from "../../types";
+import type { DrawerBehavior, WindowPosition } from "../../types.js";
 import {
   FloatingPanelCloseButton,
   FloatingPanelContent,
   FloatingPanelFrame,
   FloatingPanelHeader,
   FloatingPanelTitle,
-} from "../paneling/FloatingPanelFrame";
+} from "../paneling/FloatingPanelFrame.js";
 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;
+} 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";
+import { useDrawerReveal, isRevealMode } from "./DrawerRevealContext.js";
+import { useRevealDrawerTransform } from "./useRevealDrawerTransform.js";
 
-  return `transform ${durationValue} ${easingValue}`;
-};
+// ============================================================================
+// Types
+// ============================================================================
 
 export type DrawerProps = {
   id: string;
   config: DrawerBehavior;
   isOpen: boolean;
   onClose: () => void;
+  onOpen?: () => void;
   children: React.ReactNode;
   zIndex?: number;
   width?: string | number;
@@ -86,12 +59,9 @@ export type DrawerProps = {
   position?: WindowPosition;
 };
 
-const shouldShowCloseButton = (dismissible: boolean, showClose: boolean): boolean => {
-  if (!dismissible) {
-    return false;
-  }
-  return showClose;
-};
+// ============================================================================
+// Sub-components
+// ============================================================================
 
 type DrawerContentProps = {
   chrome: boolean;
@@ -102,7 +72,14 @@ type DrawerContentProps = {
   children: React.ReactNode;
 };
 
-const DrawerContent: React.FC<DrawerContentProps> = ({ chrome, frameStyle, header, dismissible, onClose, children }) => {
+const DrawerContent: React.FC<DrawerContentProps> = ({
+  chrome,
+  frameStyle,
+  header,
+  dismissible,
+  onClose,
+  children,
+}) => {
   if (!chrome) {
     return <>{children}</>;
   }
@@ -118,43 +95,221 @@ const DrawerContent: React.FC<DrawerContentProps> = ({ chrome, frameStyle, heade
   );
 };
 
-const DrawerHeaderView: React.FC<{
+type DrawerHeaderViewProps = {
   header?: DrawerBehavior["header"];
   dismissible: boolean;
   onClose: () => void;
-}> = ({ header, dismissible, onClose }) => {
+};
+
+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}
+    />
+  );
+}
+
+/**
+ * Compute drawer size from props based on placement direction.
+ */
+function computeDrawerSize(
+  placement: string,
+  width: string | number | undefined,
+  height: string | number | undefined,
+): number {
+  const isHorizontal = placement === "left" || placement === "right";
+  if (isHorizontal) {
+    return typeof width === "number" ? width : 0;
+  }
+  return typeof height === "number" ? height : 0;
+}
+
+const DrawerHeaderView: React.FC<DrawerHeaderViewProps> = ({ header, dismissible, onClose }) => {
   if (!header) {
     return null;
   }
 
   const showCloseButton = header.showCloseButton ?? true;
-  const shouldShowClose = shouldShowCloseButton(dismissible, showCloseButton);
+  const shouldShow = 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>
+    <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 {
+  const revealMode = isRevealMode(config.animationMode);
+
+  return React.useMemo((): React.CSSProperties => {
+    // Position follows inline setting consistently for all modes:
+    // - inline: true → absolute (container-relative)
+    // - inline: false → fixed (viewport-relative)
+    const position = config.inline ? "absolute" : "fixed";
+    const placementStyle = getPlacementStyle(placement);
+
+    // In reveal mode, drawer transform is handled entirely by useRevealDrawerTransform hook.
+    // No transform or transition in React styles - the hook manages all DOM manipulation.
+    // This is critical to avoid conflicts between React styles and hook's direct DOM updates.
+    if (revealMode) {
+      return {
+        ...DRAWER_PANEL_BASE_STYLE,
+        position,
+        // Only position properties from placementStyle, NOT transform
+        top: placementStyle.top,
+        bottom: placementStyle.bottom,
+        left: placementStyle.left,
+        right: placementStyle.right,
+        // No transform here - hook manages it
+        // No transition - hook uses requestAnimationFrame
+        // z-index: 0 ensures drawer is behind #root (which has z-index: 1)
+        zIndex: 0,
+        // Hidden by default - hook will show when needed
+        visibility: "hidden",
+        pointerEvents: "none",
+        width: formatDimension(dimensions.width),
+        height: formatDimension(dimensions.height),
+      };
+    }
+
+    // Overlay mode (default): drawer slides over content
+    const effectiveMode = isSwipeOperating ? "none" : config.transitionMode;
+    const transitionValue = computeTransitionValue(
+      effectiveMode,
+      config.transitionDuration,
+      config.transitionEasing,
+    );
+
+    const transform = isOpen ? getOpenTransform(placement) : placementStyle.transform;
+
+    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, revealMode]);
+}
+
+function useBackdropStyle(
+  isOpen: boolean,
+  isSwipeOperating: boolean,
+  config: DrawerBehavior,
+  zIndex: number | undefined,
+  hookControlled: boolean,
+): React.CSSProperties {
+  const revealMode = isRevealMode(config.animationMode);
+
+  return React.useMemo((): React.CSSProperties => {
+    // In reveal mode, no backdrop is shown (content slides instead)
+    if (revealMode) {
+      return {
+        display: "none",
+      };
+    }
+
+    const position = config.inline ? "absolute" as const : "fixed" as const;
+
+    // When hook controls the backdrop (overlay mode with swipe enabled),
+    // don't set opacity or transition - the hook handles all animations via DOM
+    if (hookControlled) {
+      return {
+        ...DRAWER_BACKDROP_BASE_STYLE,
+        position,
+        // Initial state: hidden. Hook will manage opacity dynamically.
+        opacity: 0,
+        pointerEvents: "none",
+        zIndex: zIndex !== undefined ? zIndex - 1 : undefined,
+      };
+    }
+
+    const effectiveMode = isSwipeOperating ? "none" : config.transitionMode;
+    const transitionValue = computeBackdropTransition(effectiveMode, config.transitionDuration);
+
+    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, revealMode, hookControlled]);
+}
+
+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,
@@ -166,106 +321,142 @@ export const Drawer: React.FC<DrawerProps> = ({
     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 swipeConfig = parseSwipeGesturesConfig(config.swipeGestures);
   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,
-    };
+  // Refs
+  const drawerRef = React.useRef<HTMLDivElement>(null);
+  const backdropRef = React.useRef<HTMLDivElement>(null);
+  const edgeZoneRef = React.useRef<HTMLDivElement>(null);
 
-    if (zIndex !== undefined) {
-      style.zIndex = zIndex;
-    }
+  // Swipe callbacks
+  const handleSwipeOpen = React.useCallback(() => {
+    onOpen?.();
+    config.onStateChange?.(true);
+  }, [onOpen, config]);
 
-    if (width !== undefined) {
-      style.width = typeof width === "number" ? `${width}px` : width;
-    }
-    if (height !== undefined) {
-      style.height = typeof height === "number" ? `${height}px` : height;
-    }
+  const handleSwipeClose = React.useCallback(() => {
+    onClose();
+  }, [onClose]);
 
-    return style;
-  }, [height, inline, isOpen, placement, transitionDuration, transitionEasing, transitionMode, width, zIndex]);
+  // 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 ariaLabel = header?.title ?? config.ariaLabel ?? "Drawer";
+  // During "ended" phase, isOpen hasn't been updated yet, so we still need to
+  // disable transitions to avoid the drawer snapping to closed position briefly.
+  const isSwipeOperating = swipeState.phase === "operating" || swipeState.phase === "ended";
+  const revealMode = isRevealMode(config.animationMode);
 
-  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]);
+  // Apply swipe transform (only for overlay mode)
+  // In reveal mode, swipe transform is handled by useRevealDrawerTransform
+  const swipeTransformEnabled = swipeConfig.enabled ? !revealMode : false;
+  useDrawerSwipeTransform({
+    drawerRef,
+    backdropRef,
+    placement: placement as DrawerSwipeDirection,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    isOpen,
+    enabled: swipeTransformEnabled,
+  });
 
-  const frameStyle = React.useMemo((): React.CSSProperties => {
-    const isVertical = placement === "left" || placement === "right";
-    const style: React.CSSProperties = { borderRadius: 0 };
-    if (isVertical) {
-      style.height = "100%";
+  // Compute drawer size from props (single source of truth)
+  const drawerSize = computeDrawerSize(placement, width, height);
+
+  // Get gridRef from context for inline mode
+  const { gridRef } = useDrawerReveal();
+
+  // Apply reveal mode transform (handles both drawer and content animation)
+  // Enabled for both inline and non-inline reveal mode
+  useRevealDrawerTransform({
+    drawerRef,
+    placement: placement as DrawerPlacement,
+    drawerSize,
+    isOpen,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    enabled: revealMode,
+    inline,
+    gridRef: gridRef ?? undefined,
+    contentBackground: config.revealBackground,
+  });
+
+  // Computed styles
+  const drawerStyle = useDrawerPanelStyle(placement, isOpen, isSwipeOperating, config, { width, height, zIndex });
+  const backdropStyle = useBackdropStyle(isOpen, isSwipeOperating, config, zIndex, swipeTransformEnabled);
+  const frameStyle = useFrameStyle(placement);
+
+  // Edge zone style: merge positioning style with gesture handlers' style
+  // Edge zone positioning follows the inline setting for consistency with drawer and backdrop:
+  // - inline: true → position: absolute (container-relative)
+  // - inline: false → position: fixed (viewport-relative)
+  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 style;
-  }, [placement]);
+    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 (
     <>
-      <div style={backdropStyle} onClick={dismissible ? onClose : undefined} />
+      {edgeZoneElement}
+      <div
+        ref={backdropRef}
+        style={backdropStyle}
+        onClick={dismissible ? onClose : undefined}
+      />
       <div
+        ref={drawerRef}
         data-layer-id={id}
         data-placement={placement}
-        style={drawerStyle}
+        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}