@oxyhq/bloom 0.14.0 → 0.16.0

package/lib/module/dialog/Dialog.web.js

@@ -1,14 +1,15 @@
 "use strict";
 
 import React, { createContext, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { Portal } from "../portal/index.web.js";
 import { createOverlayZIndex } from "../styles/z-index.js";
 import { useTheme } from "../theme/use-theme.js";
 import { Context, useDialogContext, useDialogControl } from "./context.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FADE_OUT_DURATION = 150;
+import { ANIMATION_DURATION, CENTER_FADE_OUT_DURATION, DEFAULT_CENTER_MAX_WIDTH, DEFAULT_MAX_HEIGHT_RATIO, DEFAULT_SIDE_WIDTH, DIALOG_SHEET_BACKDROP_TESTID, EASE_OUT, HANDLE_HEIGHT, HANDLE_RADIUS, HANDLE_WIDTH, PANEL_RADIUS, SHEET_BACKDROP_OPACITY, SIDE_SHEET_MIN_GUTTER, useResolvedPlacement } from "./placement.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const FADE_OUT_DURATION = CENTER_FADE_OUT_DURATION;
 const dialogZIndex = createOverlayZIndex();
 const stopPropagation = e => e.stopPropagation();
 const ClosingContext = /*#__PURE__*/createContext(false);
@@ -16,40 +17,94 @@ const ClosingContext = /*#__PURE__*/createContext(false);
 /**
  * Web variant of `<Dialog>`.
  *
- * A centered modal card rendered into the bloom Portal at the end of
- * `document.body`. Same prop API as native — `title`, `description`,
- * `actions`, or arbitrary `children` — so call sites are platform
- * agnostic.
+ * A centered modal card (default) rendered into the bloom Portal at the end of
+ * `document.body`, or — when `placement` is `left`/`right`/`bottom` — an
+ * anchored side-sheet or bottom-sheet. Same prop API as native, so call sites
+ * are platform agnostic.
+ *
+ * Open/close is driven by EITHER the imperative `control` (legacy) OR the
+ * controlled `open` prop. When `open` is provided it wins.
  *
  * Accessibility: the panel has `role="dialog"` and the `title`/`description`
  * props (when provided) become the `aria-labelledby` / `aria-describedby`
  * targets. Pressing the backdrop dismisses. Pressing `Escape` dismisses.
  * Focus is locked inside the dialog while it's open.
+ *
+ * Web motion never uses reanimated `exiting` (which throws `removeChild` on
+ * concurrent React unmounts): the centered card uses CSS keyframes and the
+ * side/bottom modes use self-contained CSS transitions on a
+ * mounted-through-exit node.
  */
 export function Dialog({
   control,
+  open: controlledOpen,
   onClose,
   testID,
   title,
   description,
   actions,
+  placement,
+  width = DEFAULT_SIDE_WIDTH,
+  maxWidth = DEFAULT_CENTER_MAX_WIDTH,
+  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
+  inset,
+  showHandle = true,
+  dismissOnBackdrop = true,
   style,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
   label,
   children
 }) {
+  // Controlled mode is opt-in: when `open` is a boolean the host owns the
+  // visible state; otherwise the legacy imperative `control` path drives it.
+  const isControlled = controlledOpen !== undefined;
+  const resolvedPlacement = useResolvedPlacement(placement);
   const [isOpen, setIsOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const closeCallbacksRef = useRef([]);
+  // Read the latest controlled flag inside stable callbacks without re-binding.
+  const isControlledRef = useRef(isControlled);
+  isControlledRef.current = isControlled;
   const open = useCallback(() => {
     setIsClosing(false);
     setIsOpen(true);
   }, []);
+
+  // A dismissal request (backdrop, Escape, action button). In controlled mode
+  // it asks the host to close via `onClose` (the host flips `open`); in
+  // imperative mode it starts the exit animation directly. Either way an
+  // optional callback runs after the dialog has finished closing.
   const close = useCallback(cb => {
     if (typeof cb === 'function') {
       closeCallbacksRef.current.push(cb);
     }
+    if (isControlledRef.current) {
+      onCloseRef.current?.();
+      return;
+    }
     setIsClosing(true);
   }, []);
+
+  // `onClose` mirrored into a ref so `close` stays referentially stable (the
+  // dialog context + imperative handle depend on it).
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  // In controlled mode, mirror the `open` prop into the internal open/closing
+  // state machine so both modes share the same exit-animation lifecycle.
+  useEffect(() => {
+    if (!isControlled) return;
+    if (controlledOpen) {
+      setIsClosing(false);
+      setIsOpen(true);
+    } else {
+      setIsClosing(true);
+    }
+  }, [isControlled, controlledOpen]);
+  const exitDuration = resolvedPlacement === 'center' ? FADE_OUT_DURATION : ANIMATION_DURATION;
   useEffect(() => {
     if (!isClosing) return;
     const timer = setTimeout(() => {
@@ -66,16 +121,22 @@ export function Dialog({
           }
         }
       }
-      onClose?.();
-    }, FADE_OUT_DURATION);
+      // Imperative mode fires `onClose` when the exit settles. Controlled mode
+      // already requested the close through `onClose` (the host then flipped
+      // `open`), so it must NOT fire it a second time here.
+      if (!isControlledRef.current) onCloseRef.current?.();
+    }, exitDuration);
     return () => clearTimeout(timer);
-  }, [isClosing, onClose]);
+  }, [isClosing, exitDuration]);
 
   // Escape-to-close while open. The listener is intentionally scoped to the
   // open lifetime so stacked dialogs don't fight for the keydown — the
-  // top-most one wins via document-level event order.
+  // top-most one wins via document-level event order. Escape honors
+  // `dismissOnBackdrop`: a blocking dialog (e.g. an unanswered confirm) is not
+  // dismissible by Escape, matching the backdrop's behavior. The default
+  // (`dismissOnBackdrop` true) is unchanged — Escape still closes.
   useEffect(() => {
-    if (!isOpen || typeof document === 'undefined') return;
+    if (!isOpen || !dismissOnBackdrop || typeof document === 'undefined') return;
     const handler = e => {
       if (e.key === 'Escape') {
         e.stopPropagation();
@@ -84,8 +145,8 @@ export function Dialog({
     };
     document.addEventListener('keydown', handler);
     return () => document.removeEventListener('keydown', handler);
-  }, [close, isOpen]);
-  useImperativeHandle(control.ref, () => ({
+  }, [close, dismissOnBackdrop, isOpen]);
+  useImperativeHandle(control?.ref, () => ({
     open,
     close
   }), [open, close]);
@@ -94,46 +155,121 @@ export function Dialog({
     isWithinDialog: true
   }), [close]);
   if (!isOpen) return null;
+  if (resolvedPlacement === 'center') {
+    return /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Context.Provider, {
+        value: context,
+        children: /*#__PURE__*/_jsxs(ClosingContext.Provider, {
+          value: isClosing,
+          children: [/*#__PURE__*/_jsx(RemoveScrollBar, {}), /*#__PURE__*/_jsxs(Pressable, {
+            onPress: dismissOnBackdrop ? () => close() : undefined,
+            disabled: !dismissOnBackdrop
+            // `pointerEvents: 'auto'` opts back in from the Portal root's
+            // `pointer-events: none`, which is set so the idle portal
+            // doesn't intercept clicks on the underlying app.
+            ,
+            style: {
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: dialogZIndex.backdrop,
+              alignItems: 'center',
+              justifyContent: 'center',
+              paddingHorizontal: 20,
+              pointerEvents: 'auto'
+            },
+            children: [/*#__PURE__*/_jsx(DialogBackdrop, {
+              isClosing: isClosing
+            }), /*#__PURE__*/_jsx(DialogPanel, {
+              testID: testID,
+              label: label,
+              title: title,
+              description: description,
+              actions: actions,
+              style: style,
+              maxWidth: maxWidth,
+              isClosing: isClosing,
+              children: children
+            })]
+          })]
+        })
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(Portal, {
     children: /*#__PURE__*/_jsx(Context.Provider, {
       value: context,
       children: /*#__PURE__*/_jsxs(ClosingContext.Provider, {
         value: isClosing,
-        children: [/*#__PURE__*/_jsx(RemoveScrollBar, {}), /*#__PURE__*/_jsxs(Pressable, {
-          onPress: () => close()
-          // `pointerEvents: 'auto'` opts back in from the Portal root's
-          // `pointer-events: none`, which is set so the idle portal
-          // doesn't intercept clicks on the underlying app.
-          ,
-          style: {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: dialogZIndex.backdrop,
-            alignItems: 'center',
-            justifyContent: 'center',
-            paddingHorizontal: 20,
-            pointerEvents: 'auto'
-          },
-          children: [/*#__PURE__*/_jsx(DialogBackdrop, {
-            isClosing: isClosing
-          }), /*#__PURE__*/_jsx(DialogPanel, {
-            testID: testID,
-            label: label,
-            title: title,
-            description: description,
-            actions: actions,
-            style: style,
-            isClosing: isClosing,
-            children: children
-          })]
+        children: [/*#__PURE__*/_jsx(RemoveScrollBar, {}), /*#__PURE__*/_jsx(SheetSurface, {
+          testID: testID,
+          label: label,
+          title: title,
+          description: description,
+          actions: actions,
+          placement: resolvedPlacement,
+          shown: !isClosing,
+          width: width,
+          maxHeightRatio: maxHeightRatio,
+          inset: inset,
+          showHandle: showHandle,
+          dismissOnBackdrop: dismissOnBackdrop,
+          onDismiss: close,
+          panelStyle: panelStyle,
+          panelClassName: panelClassName,
+          containerStyle: containerStyle,
+          containerClassName: containerClassName,
+          style: style,
+          children: children
         })]
       })
     })
   });
 }
+
+/**
+ * Renders the dialog's body: optional declarative title + description, any
+ * `children`, then the action row. Shared by the centered panel and the
+ * side/bottom sheet so all placements present identical content. The
+ * `titleId`/`descriptionId` are wired by the caller onto the `role="dialog"`
+ * element for `aria-labelledby` / `aria-describedby`.
+ */
+function DialogBody({
+  titleId,
+  descriptionId,
+  title,
+  description,
+  actions,
+  children
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [title ? /*#__PURE__*/_jsx(Text, {
+      nativeID: titleId,
+      style: {
+        fontSize: 22,
+        fontWeight: '600',
+        color: theme.colors.text,
+        paddingBottom: description ? 4 : 16,
+        lineHeight: 30
+      },
+      children: title
+    }) : null, description ? /*#__PURE__*/_jsx(Text, {
+      nativeID: descriptionId,
+      style: {
+        fontSize: 16,
+        color: theme.colors.textSecondary,
+        paddingBottom: 16,
+        lineHeight: 22
+      },
+      children: description
+    }) : null, children, actions && actions.length > 0 ? /*#__PURE__*/_jsx(ActionRow, {
+      actions: actions
+    }) : null]
+  });
+}
 function DialogPanel({
   testID,
   label,
@@ -141,13 +277,14 @@ function DialogPanel({
   description,
   actions,
   style,
+  maxWidth,
   isClosing,
   children
 }) {
   const theme = useTheme();
   const titleId = useId();
   const descriptionId = useId();
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsx(View, {
     role: "dialog",
     "aria-label": label,
     "aria-labelledby": title ? titleId : undefined,
@@ -160,7 +297,7 @@ function DialogPanel({
       position: 'relative',
       borderRadius: 20,
       width: '100%',
-      maxWidth: 480,
+      maxWidth,
       backgroundColor: theme.colors.background,
       borderWidth: 1,
       borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
@@ -178,30 +315,196 @@ function DialogPanel({
     } : {
       animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s'
     }, style],
-    children: [title ? /*#__PURE__*/_jsx(Text, {
-      nativeID: titleId,
-      style: {
-        fontSize: 22,
-        fontWeight: '600',
-        color: theme.colors.text,
-        paddingBottom: description ? 4 : 16,
-        lineHeight: 30
-      },
-      children: title
-    }) : null, description ? /*#__PURE__*/_jsx(Text, {
-      nativeID: descriptionId,
-      style: {
-        fontSize: 16,
-        color: theme.colors.textSecondary,
-        paddingBottom: 16,
-        lineHeight: 22
-      },
-      children: description
-    }) : null, children, actions && actions.length > 0 ? /*#__PURE__*/_jsx(ActionRow, {
-      actions: actions
-    }) : null]
+    children: /*#__PURE__*/_jsx(DialogBody, {
+      titleId: titleId,
+      descriptionId: descriptionId,
+      title: title,
+      description: description,
+      actions: actions,
+      children: children
+    })
+  });
+}
+export { DIALOG_SHEET_BACKDROP_TESTID };
+
+/**
+ * Side-sheet / bottom-sheet surface for the `left`/`right`/`bottom`
+ * placements. Pure CSS transitions: the
+ * node stays mounted through the exit while a `shown` flag drives the
+ * transform/opacity, so both directions animate without reanimated `exiting`.
+ */
+function SheetSurface({
+  testID,
+  label,
+  title,
+  description,
+  actions,
+  placement,
+  shown,
+  width,
+  maxHeightRatio,
+  inset,
+  showHandle,
+  dismissOnBackdrop,
+  onDismiss,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
+  style,
+  children
+}) {
+  const theme = useTheme();
+  const titleId = useId();
+  const descriptionId = useId();
+  const {
+    width: viewportWidth,
+    height: viewportHeight
+  } = useWindowDimensions();
+
+  // Defer the entry transition by a frame so the start state paints before the
+  // browser animates to `shown`. `entered` is false on the first committed
+  // frame, then flips true so the CSS transition runs.
+  const frameRef = useRef(null);
+  const [entered, setEntered] = useState(false);
+  useEffect(() => {
+    frameRef.current = scheduleFrame(() => {
+      frameRef.current = scheduleFrame(() => setEntered(true));
+    });
+    return () => {
+      if (frameRef.current !== null) cancelFrame(frameRef.current);
+      frameRef.current = null;
+    };
+  }, []);
+  const visible = shown && entered;
+  const isBottom = placement === 'bottom';
+  const panelTransition = useMemo(() => ({
+    transitionProperty: 'transform, opacity',
+    transitionDuration: `${ANIMATION_DURATION}ms`,
+    transitionTimingFunction: EASE_OUT
+  }), []);
+  const backdropTransition = useMemo(() => ({
+    transitionProperty: 'opacity',
+    transitionDuration: `${ANIMATION_DURATION}ms`,
+    transitionTimingFunction: EASE_OUT
+  }), []);
+  const panelGeometry = useMemo(() => {
+    if (isBottom) {
+      return {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        maxHeight: Math.round(viewportHeight * maxHeightRatio),
+        borderTopLeftRadius: PANEL_RADIUS,
+        borderTopRightRadius: PANEL_RADIUS,
+        transform: [{
+          translateY: visible ? 0 : '100%'
+        }],
+        opacity: visible ? 1 : 0
+      };
+    }
+    const insetTop = inset?.top ?? 0;
+    const insetBottom = inset?.bottom ?? 0;
+    const insetLeft = inset?.left ?? 0;
+    const insetRight = inset?.right ?? 0;
+    const anchorInset = placement === 'left' ? insetLeft : insetRight;
+    const oppositeInset = placement === 'left' ? insetRight : insetLeft;
+    const available = viewportWidth - anchorInset - oppositeInset - SIDE_SHEET_MIN_GUTTER;
+    const cappedWidth = Math.max(0, Math.min(width, available));
+    const hiddenSign = placement === 'left' ? '-100%' : '100%';
+    return {
+      top: insetTop,
+      bottom: insetBottom,
+      [placement]: anchorInset,
+      width: cappedWidth,
+      borderRadius: PANEL_RADIUS,
+      transform: [{
+        translateX: visible ? 0 : hiddenSign
+      }],
+      opacity: visible ? 1 : 0
+    };
+  }, [isBottom, visible, placement, width, inset, viewportWidth, viewportHeight, maxHeightRatio]);
+  const handleBackdropPress = useCallback(() => {
+    if (dismissOnBackdrop) onDismiss();
+  }, [dismissOnBackdrop, onDismiss]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [sheetStyles.root, containerStyle],
+    ...(containerClassName ? {
+      className: containerClassName
+    } : {}),
+    pointerEvents: "box-none",
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID,
+      accessibilityRole: "button",
+      accessibilityLabel: label ? `Dismiss ${label}` : 'Dismiss dialog',
+      onPress: handleBackdropPress,
+      disabled: !dismissOnBackdrop,
+      style: [sheetStyles.backdrop, backdropTransition, {
+        opacity: visible ? SHEET_BACKDROP_OPACITY : 0
+      }]
+    }), /*#__PURE__*/_jsxs(View, {
+      role: "dialog",
+      "aria-label": label,
+      "aria-labelledby": title ? titleId : undefined,
+      "aria-describedby": description ? descriptionId : undefined,
+      accessibilityViewIsModal: true,
+      testID: testID,
+      onStartShouldSetResponder: () => true,
+      onResponderRelease: stopPropagation,
+      onClick: stopPropagation,
+      ...(panelClassName ? {
+        className: panelClassName
+      } : {}),
+      style: [sheetStyles.panel, {
+        backgroundColor: theme.colors.background,
+        shadowColor: theme.colors.shadow
+      }, panelGeometry, panelTransition, panelStyle, style],
+      pointerEvents: "auto",
+      children: [isBottom && showHandle ? /*#__PURE__*/_jsx(View, {
+        style: sheetStyles.handleRow,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [sheetStyles.handle, {
+            backgroundColor: theme.colors.border
+          }]
+        })
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: sheetStyles.body,
+        children: /*#__PURE__*/_jsx(DialogBody, {
+          titleId: titleId,
+          descriptionId: descriptionId,
+          title: title,
+          description: description,
+          actions: actions,
+          children: children
+        })
+      })]
+    })]
   });
 }
+
+/**
+ * Opaque token returned by `scheduleFrame`. `requestAnimationFrame` returns a
+ * number; the `setTimeout` fallback returns a timer handle.
+ */
+
+function scheduleFrame(cb) {
+  if (typeof requestAnimationFrame === 'function') {
+    return {
+      raf: requestAnimationFrame(cb)
+    };
+  }
+  return {
+    timer: setTimeout(cb, 0)
+  };
+}
+function cancelFrame(token) {
+  if ('raf' in token) {
+    if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(token.raf);
+    return;
+  }
+  clearTimeout(token.timer);
+}
 function ActionRow({
   actions
 }) {
@@ -336,6 +639,50 @@ export function AutoMountedDialog({
     onClose: onResolve
   });
 }
+const sheetStyles = {
+  root: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: dialogZIndex.backdrop
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#000'
+  },
+  panel: {
+    position: 'absolute',
+    overflow: 'hidden',
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    zIndex: dialogZIndex.surface
+  },
+  handleRow: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 8,
+    paddingBottom: 4
+  },
+  handle: {
+    width: HANDLE_WIDTH,
+    height: HANDLE_HEIGHT,
+    borderRadius: HANDLE_RADIUS,
+    opacity: 0.5
+  },
+  body: {
+    padding: 20
+  }
+};
 
 /**
  * CSS keyframes required for web dialog animations.
@@ -347,6 +694,9 @@ export function AutoMountedDialog({
  * @keyframes bloomDialogZoomFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
  * @keyframes bloomDialogZoomFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
  * ```
+ *
+ * The `left`/`right`/`bottom` placements do NOT depend on this — they animate
+ * via self-contained inline CSS transitions and need no keyframe injection.
  */
 export const BLOOM_DIALOG_CSS = `
 @keyframes bloomDialogFadeIn { from { opacity: 0; } to { opacity: 1; } }