react-panel-layout 0.6.0 → 0.6.1

package/src/components/gesture/SwipeSafeZone.tsx

@@ -0,0 +1,69 @@
+/**
+ * @file SwipeSafeZone component
+ *
+ * A wrapper component that marks an area as exempt from swipe gesture detection.
+ * Content inside this zone will not trigger swipe-to-close or other swipe gestures.
+ *
+ * Use this for:
+ * - Scrollable content areas
+ * - Input fields and text areas
+ * - Interactive elements that need drag/swipe for their own purposes
+ */
+import * as React from "react";
+
+/**
+ * Data attribute used to identify swipe-safe zones.
+ * Swipe gesture handlers should check for this attribute on target elements.
+ */
+export const SWIPE_SAFE_ZONE_ATTR = "data-swipe-safe-zone";
+
+export type SwipeSafeZoneProps = {
+  /** Content to render inside the safe zone */
+  children: React.ReactNode;
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+};
+
+/**
+ * SwipeSafeZone marks an area where swipe gestures should not be triggered.
+ *
+ * @example
+ * ```tsx
+ * <SwipeSafeZone>
+ *   <ScrollableList items={items} />
+ * </SwipeSafeZone>
+ * ```
+ */
+export const SwipeSafeZone: React.FC<SwipeSafeZoneProps> = ({
+  children,
+  className,
+  style,
+}) => {
+  return (
+    <div
+      className={className}
+      style={style}
+      data-swipe-safe-zone="true"
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Check if an element is inside a SwipeSafeZone.
+ */
+export function isInSwipeSafeZone(element: HTMLElement, container: HTMLElement): boolean {
+  let current: HTMLElement | null = element;
+
+  while (current && current !== container) {
+    if (current.hasAttribute(SWIPE_SAFE_ZONE_ATTR)) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+
+  return false;
+}

package/src/components/window/Drawer.tsx

@@ -2,83 +2,53 @@
  * @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";
+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";
 
-  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 +56,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 +69,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 +92,152 @@ 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}
+    />
+  );
+}
+
+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 {
+  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,
@@ -166,106 +249,110 @@ 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";
+  const isSwipeOperating = swipeState.phase === "operating";
 
-  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
+  useDrawerSwipeTransform({
+    drawerRef,
+    backdropRef,
+    placement: placement as DrawerSwipeDirection,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    enabled: swipeConfig.enabled,
+  });
 
-  const frameStyle = React.useMemo((): React.CSSProperties => {
-    const isVertical = placement === "left" || placement === "right";
-    const style: React.CSSProperties = { borderRadius: 0 };
-    if (isVertical) {
-      style.height = "100%";
+  // 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 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}

package/src/components/window/DrawerLayers.tsx

@@ -2,9 +2,9 @@
  * @file DrawerLayers component
  */
 import * as React from "react";
-import type { LayerDefinition } from "../../types";
-import { Drawer } from "./Drawer";
-import { useDrawerState } from "../../modules/window/useDrawerState";
+import type { LayerDefinition } from "../../types.js";
+import { Drawer } from "./Drawer.js";
+import { useDrawerState } from "../../modules/window/useDrawerState.js";
 
 export type DrawerLayersProps = {
   layers: LayerDefinition[];
@@ -23,6 +23,14 @@ export const DrawerLayers: React.FC<DrawerLayersProps> = ({ layers }) => {
     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) => {
@@ -32,6 +40,7 @@ export const DrawerLayers: React.FC<DrawerLayersProps> = ({ layers }) => {
 
         const isOpen = drawer.state(layer.id);
         const onClose = closeHandlers.get(layer.id);
+        const onOpen = openHandlers.get(layer.id);
 
         if (!onClose) {
           return null;
@@ -44,6 +53,7 @@ export const DrawerLayers: React.FC<DrawerLayersProps> = ({ layers }) => {
             config={layer.drawer}
             isOpen={isOpen}
             onClose={onClose}
+            onOpen={onOpen}
             zIndex={layer.zIndex}
             width={layer.width}
             height={layer.height}