@oxyhq/bloom 0.16.0 → 0.16.1

package/src/dialog/Dialog.web.tsx

@@ -10,11 +10,8 @@ import React, {
 } from 'react';
 import {
   Pressable,
-  Text,
-  TouchableOpacity,
   useWindowDimensions,
   View,
-  type GestureResponderEvent,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
@@ -22,29 +19,24 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
-import type { ThemeColors } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
-import { Context, useDialogContext, useDialogControl } from './context';
+import { Context, useDialogControl } from './context';
+import { DialogBody } from './DialogContent';
+import { DialogBottomSheet } from './DialogBottomSheet';
 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,
-  type DialogPlacement,
 } from './placement';
 import type {
   DialogAction,
-  DialogActionColor,
   DialogControlProps,
   DialogInset,
   DialogProps,
@@ -61,9 +53,10 @@ const ClosingContext = createContext(false);
  * Web variant of `<Dialog>`.
  *
  * 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.
+ * `document.body`, an anchored side-sheet for `left`/`right`, or — for
+ * `bottom` — bloom's cross-platform `BottomSheet` (the SAME component native
+ * uses), so the bottom placement drags-to-dismiss on web too. 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.
@@ -75,10 +68,32 @@ const ClosingContext = createContext(false);
  *
  * 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.
+ * side modes use self-contained CSS transitions on a mounted-through-exit
+ * node. The bottom placement animates via `BottomSheet`'s shared-value/gesture
+ * animation (no `exiting` layout animation).
  */
-export function Dialog({
+export function Dialog({ placement, ...rest }: DialogProps) {
+  const resolvedPlacement = useResolvedPlacement(placement);
+
+  // `bottom` routes to the shared cross-platform `BottomSheet` surface — the
+  // SAME component native uses — so drag-to-dismiss works on web too and there
+  // is no duplicated CSS slide-up sheet. `center` (default) and the side-sheets
+  // keep their DOM-portal implementation below. Each branch is its own
+  // component so the dispatcher only ever calls `useResolvedPlacement`, keeping
+  // the rules-of-hooks contract intact across a responsive placement change.
+  if (resolvedPlacement === 'bottom') {
+    return <DialogBottomSheet {...rest} />;
+  }
+  return <CenterOrSideDialog {...rest} placement={resolvedPlacement} />;
+}
+
+/**
+ * Web `center` (default) and `left`/`right` placements. The centered card is a
+ * DOM-portal modal; the side placements are CSS-transition sheets. The `bottom`
+ * placement is handled separately by `DialogBottomSheet` (bloom's cross-platform
+ * `BottomSheet`).
+ */
+function CenterOrSideDialog({
   control,
   open: controlledOpen,
   onClose,
@@ -89,9 +104,7 @@ export function Dialog({
   placement,
   width = DEFAULT_SIDE_WIDTH,
   maxWidth = DEFAULT_CENTER_MAX_WIDTH,
-  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
   inset,
-  showHandle = true,
   dismissOnBackdrop = true,
   style,
   panelStyle,
@@ -100,11 +113,11 @@ export function Dialog({
   containerClassName,
   label,
   children,
-}: DialogProps) {
+}: Omit<DialogProps, 'placement'> & { placement: 'center' | 'left' | 'right' }) {
   // 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 resolvedPlacement = placement;
 
   const [isOpen, setIsOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
@@ -272,9 +285,7 @@ export function Dialog({
             placement={resolvedPlacement}
             shown={!isClosing}
             width={width}
-            maxHeightRatio={maxHeightRatio}
             inset={inset}
-            showHandle={showHandle}
             dismissOnBackdrop={dismissOnBackdrop}
             onDismiss={close}
             panelStyle={panelStyle}
@@ -291,64 +302,6 @@ export function Dialog({
   );
 }
 
-/**
- * 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,
-}: {
-  titleId: string;
-  descriptionId: string;
-  title?: string;
-  description?: string;
-  actions?: DialogAction[];
-  children?: React.ReactNode;
-}) {
-  const theme = useTheme();
-  return (
-    <>
-      {title ? (
-        <Text
-          nativeID={titleId}
-          style={{
-            fontSize: 22,
-            fontWeight: '600',
-            color: theme.colors.text,
-            paddingBottom: description ? 4 : 16,
-            lineHeight: 30,
-          }}
-        >
-          {title}
-        </Text>
-      ) : null}
-      {description ? (
-        <Text
-          nativeID={descriptionId}
-          style={{
-            fontSize: 16,
-            color: theme.colors.textSecondary,
-            paddingBottom: 16,
-            lineHeight: 22,
-          }}
-        >
-          {description}
-        </Text>
-      ) : null}
-      {children}
-      {actions && actions.length > 0 ? <ActionRow actions={actions} /> : null}
-    </>
-  );
-}
-
 function DialogPanel({
   testID,
   label,
@@ -422,10 +375,13 @@ function DialogPanel({
 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
+ * Side-sheet surface for the `left`/`right` 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`.
+ *
+ * The `bottom` placement is NOT handled here — it routes through
+ * `DialogBottomSheet` (bloom's cross-platform `BottomSheet`) so it shares one
+ * implementation with native and supports drag-to-dismiss on web.
  */
 function SheetSurface({
   testID,
@@ -436,9 +392,7 @@ function SheetSurface({
   placement,
   shown,
   width,
-  maxHeightRatio,
   inset,
-  showHandle,
   dismissOnBackdrop,
   onDismiss,
   panelStyle,
@@ -453,12 +407,10 @@ function SheetSurface({
   title?: string;
   description?: string;
   actions?: DialogAction[];
-  placement: Exclude<DialogPlacement, 'center'>;
+  placement: 'left' | 'right';
   shown: boolean;
   width: number;
-  maxHeightRatio: number;
   inset?: DialogInset;
-  showHandle: boolean;
   dismissOnBackdrop: boolean;
   onDismiss: () => void;
   panelStyle?: StyleProp<ViewStyle>;
@@ -471,7 +423,7 @@ function SheetSurface({
   const theme = useTheme();
   const titleId = useId();
   const descriptionId = useId();
-  const { width: viewportWidth, height: viewportHeight } = useWindowDimensions();
+  const { width: viewportWidth } = 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
@@ -489,7 +441,6 @@ function SheetSurface({
   }, []);
 
   const visible = shown && entered;
-  const isBottom = placement === 'bottom';
 
   const panelTransition = useMemo<ViewStyle>(
     () =>
@@ -512,19 +463,6 @@ function SheetSurface({
   );
 
   const panelGeometry = useMemo<ViewStyle>(() => {
-    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,
-      } as ViewStyle;
-    }
-
     const insetTop = inset?.top ?? 0;
     const insetBottom = inset?.bottom ?? 0;
     const insetLeft = inset?.left ?? 0;
@@ -544,7 +482,7 @@ function SheetSurface({
       transform: [{ translateX: visible ? 0 : hiddenSign }],
       opacity: visible ? 1 : 0,
     } as ViewStyle;
-  }, [isBottom, visible, placement, width, inset, viewportWidth, viewportHeight, maxHeightRatio]);
+  }, [visible, placement, width, inset, viewportWidth]);
 
   const handleBackdropPress = useCallback(() => {
     if (dismissOnBackdrop) onDismiss();
@@ -590,11 +528,6 @@ function SheetSurface({
         ]}
         pointerEvents="auto"
       >
-        {isBottom && showHandle ? (
-          <View style={sheetStyles.handleRow} pointerEvents="none">
-            <View style={[sheetStyles.handle, { backgroundColor: theme.colors.border }]} />
-          </View>
-        ) : null}
         <View style={sheetStyles.body}>
           <DialogBody
             titleId={titleId}
@@ -632,88 +565,6 @@ function cancelFrame(token: FrameToken): void {
   clearTimeout(token.timer);
 }
 
-function ActionRow({ actions }: { actions: DialogAction[] }) {
-  return (
-    <View style={{ width: '100%', gap: 8, justifyContent: 'flex-end' }}>
-      {actions.map((action, idx) => (
-        <ActionButton
-          key={`${action.label}-${idx}`}
-          action={action}
-        />
-      ))}
-    </View>
-  );
-}
-
-function ActionButton({ action }: { action: DialogAction }) {
-  const { close } = useDialogContext();
-  const theme = useTheme();
-  const color: DialogActionColor = action.color ?? 'default';
-  const shouldCloseOnPress = action.shouldCloseOnPress ?? true;
-
-  const { background, foreground } = getActionPalette(color, theme.colors);
-
-  const handlePress = useCallback(
-    (e: GestureResponderEvent) => {
-      const onPress = action.onPress;
-      if (color === 'cancel') {
-        close(onPress ? () => onPress(e) : undefined);
-        return;
-      }
-      if (shouldCloseOnPress) {
-        close(onPress ? () => onPress(e) : undefined);
-      } else {
-        onPress?.(e);
-      }
-    },
-    [action.onPress, close, color, shouldCloseOnPress],
-  );
-
-  return (
-    <TouchableOpacity
-      style={{
-        borderRadius: 9999,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: background,
-        opacity: action.disabled ? 0.5 : 1,
-        paddingVertical: 12,
-        paddingHorizontal: 24,
-      }}
-      onPress={handlePress}
-      disabled={action.disabled}
-      activeOpacity={0.7}
-      testID={action.testID}
-    >
-      <Text style={{ fontSize: 16, fontWeight: '500', color: foreground }}>
-        {action.label}
-      </Text>
-    </TouchableOpacity>
-  );
-}
-
-function getActionPalette(
-  color: DialogActionColor,
-  colors: ThemeColors,
-): { background: string; foreground: string } {
-  switch (color) {
-    case 'destructive':
-      return {
-        background: colors.negative,
-        foreground: colors.negativeForeground,
-      };
-    case 'cancel':
-      return { background: colors.contrast50, foreground: colors.text };
-    case 'default':
-      return { background: colors.primary, foreground: colors.primaryForeground };
-    /* c8 ignore next 3 -- TS exhaustiveness guard */
-    default: {
-      const _exhaustive: never = color;
-      return { background: colors.primary, foreground: colors.primaryForeground };
-    }
-  }
-}
-
 function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
   const style: ViewStyle[] = [
     {
@@ -790,18 +641,6 @@ const sheetStyles = {
     shadowOffset: { width: 0, height: 8 },
     zIndex: dialogZIndex.surface,
   } as ViewStyle,
-  handleRow: {
-    width: '100%',
-    alignItems: 'center',
-    paddingTop: 8,
-    paddingBottom: 4,
-  } as ViewStyle,
-  handle: {
-    width: HANDLE_WIDTH,
-    height: HANDLE_HEIGHT,
-    borderRadius: HANDLE_RADIUS,
-    opacity: 0.5,
-  } as ViewStyle,
   body: {
     padding: 20,
   } as ViewStyle,
@@ -818,8 +657,9 @@ const sheetStyles = {
  * @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.
+ * The `left`/`right` placements do NOT depend on this — they animate via
+ * self-contained inline CSS transitions and need no keyframe injection. The
+ * `bottom` placement uses bloom's `BottomSheet` (reanimated) and needs none.
  */
 export const BLOOM_DIALOG_CSS = `
 @keyframes bloomDialogFadeIn { from { opacity: 0; } to { opacity: 1; } }

package/src/dialog/DialogBottomSheet.tsx

@@ -0,0 +1,235 @@
+import React, {
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { useTheme } from '../theme/use-theme';
+import { Context } from './context';
+import { DialogBody } from './DialogContent';
+import {
+  DEFAULT_MAX_HEIGHT_RATIO,
+  PANEL_RADIUS,
+  SHEET_BACKDROP_OPACITY,
+} from './placement';
+import type { DialogControlProps, DialogProps } from './types';
+
+/**
+ * Padding of the bottom-sheet content container (px). Matches the side-sheet
+ * and centered-panel body padding so every placement reads identically.
+ */
+const SHEET_CONTENT_PADDING = 20;
+
+/**
+ * Shared `BottomSheet`-backed surface for the `bottom` placement, used by BOTH
+ * `Dialog.tsx` (native) and `Dialog.web.tsx` (web). `BottomSheet` is itself a
+ * single cross-platform implementation (react-native-gesture-handler +
+ * reanimated, drag-to-dismiss on web and native alike), so routing the bottom
+ * placement through here gives ONE code path with drag working everywhere — no
+ * duplicated CSS slide-up sheet.
+ *
+ * This component owns the entire open↔present/dismiss bridge and the Dialog →
+ * BottomSheet prop mapping in one place:
+ *
+ *   - `open` (controlled) / `control` (imperative) → `present()` / `dismiss()`
+ *   - `onClose`                                     → fired once the sheet settles
+ *   - `maxHeightRatio`                              → sheet `maxHeight`
+ *   - `showHandle` / `dismissOnBackdrop` / `label`  → forwarded to the surface
+ *   - `panelStyle`                                  → paints the sheet surface
+ *   - `containerStyle`                              → wraps the content subtree
+ *     so a host's CSS-var theme scope (`vars()`) still applies to descendants
+ *   - `title` / `description` / `actions` / `children` → declarative body
+ */
+export function DialogBottomSheet({
+  control,
+  open: controlledOpen,
+  onClose,
+  testID,
+  title,
+  description,
+  actions,
+  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
+  showHandle = true,
+  dismissOnBackdrop = true,
+  style,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
+  label,
+  children,
+}: DialogBottomSheetProps) {
+  const isControlled = controlledOpen !== undefined;
+  const theme = useTheme();
+  const ref = useRef<BottomSheetRef>(null);
+  const closeCallbacks = useRef<(() => void)[]>([]);
+  const titleId = useId();
+  const descriptionId = useId();
+
+  // Read the latest controlled flag / `onClose` inside stable callbacks without
+  // re-binding them (the context + imperative handle depend on `close` staying
+  // referentially stable).
+  const isControlledRef = useRef(isControlled);
+  isControlledRef.current = isControlled;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  // Drain queued close callbacks atomically — capturing the list and resetting
+  // it before invocation ensures a callback that synchronously re-opens the
+  // dialog (and queues fresh callbacks) does not see the old ones replayed
+  // against the new session.
+  const callQueuedCallbacks = useCallback(() => {
+    const queued = closeCallbacks.current;
+    closeCallbacks.current = [];
+    for (const cb of queued) {
+      try {
+        cb();
+      } catch (e) {
+        if (typeof console !== 'undefined' && console.error) {
+          console.error('Dialog close callback error:', e);
+        }
+      }
+    }
+  }, []);
+
+  const open = useCallback(() => {
+    ref.current?.present();
+  }, []);
+
+  // A dismissal request (backdrop, pan-to-close, action button). In controlled
+  // mode it asks the host to close via `onClose` (the host flips `open`); in
+  // imperative mode it dismisses the surface directly. The optional callback
+  // runs once the dialog has finished closing.
+  const close = useCallback<DialogControlProps['close']>((cb) => {
+    if (typeof cb === 'function') {
+      closeCallbacks.current.push(cb);
+    }
+    if (isControlledRef.current) {
+      onCloseRef.current?.();
+      return;
+    }
+    ref.current?.dismiss();
+  }, []);
+
+  // Fired when the sheet has finished closing. Drains queued callbacks, then
+  // fires `onClose` ONLY in imperative mode — controlled mode already requested
+  // the close through `onClose` (the host then flipped `open`), so firing it
+  // again here would double-call it.
+  const handleDismiss = useCallback(() => {
+    callQueuedCallbacks();
+    if (!isControlledRef.current) onCloseRef.current?.();
+  }, [callQueuedCallbacks]);
+
+  // In controlled mode, mirror the `open` prop onto the underlying sheet so both
+  // modes share one lifecycle.
+  useEffect(() => {
+    if (!isControlled) return;
+    if (controlledOpen) {
+      ref.current?.present();
+    } else {
+      ref.current?.dismiss();
+    }
+  }, [isControlled, controlledOpen]);
+
+  useImperativeHandle(control?.ref, () => ({ open, close }), [open, close]);
+
+  const context = useMemo(() => ({ close, isWithinDialog: true }), [close]);
+
+  // Backdrop press → dismiss, unless the host disabled it. Returning `false`
+  // from `onDismissAttempt` blocks the BottomSheet's own backdrop/pan dismissal,
+  // which is how `dismissOnBackdrop: false` maps onto the single sheet API.
+  const onDismissAttempt = useCallback(
+    () => dismissOnBackdrop,
+    [dismissOnBackdrop],
+  );
+
+  // `panelStyle` paints the sheet surface (e.g. a brand background). It composes
+  // AFTER the BottomSheet's internal background so a host palette wins; the
+  // shape (radius, max height) is supplied here and remains overridable.
+  const sheetStyle = useMemo<StyleProp<ViewStyle>>(() => {
+    const maxHeightPercent: `${number}%` = `${Math.round(maxHeightRatio * 100)}%`;
+    return [
+      {
+        backgroundColor: theme.colors.background,
+        borderTopLeftRadius: PANEL_RADIUS + 4,
+        borderTopRightRadius: PANEL_RADIUS + 4,
+        maxHeight: maxHeightPercent,
+      },
+      panelStyle,
+    ];
+  }, [theme.colors.background, maxHeightRatio, panelStyle]);
+
+  return (
+    <BottomSheet
+      ref={ref}
+      onDismiss={handleDismiss}
+      onDismissAttempt={onDismissAttempt}
+      enablePanDownToClose
+      showHandle={showHandle}
+      // Stronger dim than a lone sheet so an underlying sheet's handle/content
+      // doesn't bleed through when a Dialog is stacked over one.
+      backdropOpacity={SHEET_BACKDROP_OPACITY + 0.3}
+      style={sheetStyle}
+    >
+      <Context.Provider value={context}>
+        <View
+          testID={testID}
+          accessibilityLabel={label}
+          aria-labelledby={title ? titleId : undefined}
+          aria-describedby={description ? descriptionId : undefined}
+          {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
+          {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
+          style={[
+            { padding: SHEET_CONTENT_PADDING },
+            // `containerStyle` carries the host's CSS-var theme scope; it wraps
+            // the content subtree so descendants read the scoped palette.
+            containerStyle,
+            style,
+            panelStyle,
+          ]}
+        >
+          <DialogBody
+            titleId={titleId}
+            descriptionId={descriptionId}
+            title={title}
+            description={description}
+            actions={actions}
+          >
+            {children}
+          </DialogBody>
+        </View>
+      </Context.Provider>
+    </BottomSheet>
+  );
+}
+
+/**
+ * Props the shared bottom-sheet surface consumes — the `bottom`-relevant subset
+ * of `DialogProps`. `width`, `maxWidth`, and `inset` are placement-specific to
+ * the side/centered surfaces and intentionally excluded.
+ */
+export type DialogBottomSheetProps = Pick<
+  DialogProps,
+  | 'control'
+  | 'open'
+  | 'onClose'
+  | 'testID'
+  | 'title'
+  | 'description'
+  | 'actions'
+  | 'maxHeightRatio'
+  | 'showHandle'
+  | 'dismissOnBackdrop'
+  | 'style'
+  | 'panelStyle'
+  | 'panelClassName'
+  | 'containerStyle'
+  | 'containerClassName'
+  | 'label'
+  | 'children'
+>;