@oxyhq/bloom 0.31.0 → 0.32.1

package/src/alert-dialog/AlertDialog.tsx

@@ -1,6 +1,7 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useEffect, useRef } from 'react';
 
 import type { DialogAction, DialogProps } from '../dialog';
+import { useDialogControl } from '../dialog/context';
 import type { AlertDialogProps } from './types';
 
 type DialogComponent = React.ComponentType<DialogProps>;
@@ -22,6 +23,19 @@ type DialogComponent = React.ComponentType<DialogProps>;
  * imperative `confirm()` helper + `<AlertDialogHost />` to trigger a confirm
  * from an event handler without owning visible state.
  *
+ * Control mode — IMPERATIVE, not controlled. `AlertDialog` keeps its public
+ * *controlled* API (`visible` boolean + `onClose`) but internally bridges it
+ * onto the Dialog's imperative `useDialogControl()` handle, so `confirm()`
+ * drives `<Dialog>` through the EXACT uncontrolled/imperative internals
+ * Mention's `ConfirmPrompt` uses. That is the code path that actually plays the
+ * exit animation on dismiss: imperative `close()` sets `isClosing`, runs the
+ * exit animation, and fires `onClose` only once it settles. The controlled path
+ * instead fires `onClose` synchronously — and because `<AlertDialogHost />`
+ * resolves + drops the queue entry inside `onClose`, the surface would then
+ * unmount instantly, skipping the exit animation entirely. Bridging to
+ * imperative mode eliminates that fork so `confirm()` and Mention's
+ * `ConfirmPrompt` are pixel/timing identical.
+ *
  * The centered card uses the Dialog default `maxWidth` (480px) for full visual
  * parity with the shared confirm surface.
  */
@@ -37,34 +51,64 @@ export function createAlertDialog(Dialog: DialogComponent) {
     onCancel,
     destructive = false,
     hideCancel = false,
-    dismissible = false,
+    dismissible = true,
     cardStyle,
     testID,
   }: AlertDialogProps) {
-    // Confirm resolves + closes SYNCHRONOUSLY, in this order, and must NOT go
-    // through the Dialog's auto-close (`shouldCloseOnPress: false`). In
-    // controlled mode `close()` fires `onClose` FIRST, and the `confirm()` host
-    // wires `onClose` to resolve the promise as *cancelled* (`false`). Running
-    // `onConfirm` (resolve `true`, which removes the queue entry) before
-    // `onClose` (now a no-op for that entry) is what makes the confirm button
-    // resolve `true`.
-    const handleConfirm = useCallback(() => {
-      onConfirm?.();
+    const control = useDialogControl();
+
+    // Bridge the public *controlled* `visible` prop onto the Dialog's
+    // imperative open/close. Opening on mount straight from an effect (no
+    // `setTimeout`) mirrors bloom's own `AutoMountedDialog` (which backs
+    // `alert()`) — the canonical fresh-mount imperative-open pattern:
+    // `<AlertDialogHost />` mounts a FRESH `AlertDialog` per confirm
+    // (`key={id}`) with the final content already committed, so there is no
+    // stale-content window to defer past and the entry animation curve stays
+    // identical to Mention's. `control` is referentially stable (memoised on
+    // its id), so this effect only re-runs when `visible` actually flips. When
+    // a direct consumer flips `visible` to `false`, we imperatively `close()`
+    // so the exit animation still plays.
+    const closingFromPropRef = useRef(false);
+    useEffect(() => {
+      if (visible) {
+        control.open();
+        return;
+      }
+      closingFromPropRef.current = true;
+      control.close();
+    }, [visible, control]);
+
+    // The Dialog fires `onClose` after the exit animation settles (imperative
+    // mode). Forward ONLY user-initiated dismissals (backdrop / Escape / cancel)
+    // to the consumer — a consumer-initiated close (they flipped `visible` to
+    // `false`) must not re-enter `onClose`, preserving the previous controlled
+    // semantics where a programmatic close does not fire `onClose`.
+    const handleClose = useCallback(() => {
+      if (closingFromPropRef.current) {
+        closingFromPropRef.current = false;
+        return;
+      }
       onClose();
-    }, [onConfirm, onClose]);
+    }, [onClose]);
 
+    // Confirm/cancel map onto the Dialog's declarative action row. Both keep the
+    // default `shouldCloseOnPress` (true): the button runs the exit animation
+    // FIRST, then invokes `onPress` as a close-completion callback — so
+    // `onConfirm` resolves the `confirm()` promise as the surface animates out,
+    // exactly like Mention. `onConfirm` (resolve `true`, drains the entry) runs
+    // just BEFORE the Dialog's own post-close `onClose` (→ `handleClose` →
+    // resolve `false`, now a no-op for the drained entry), which is what makes
+    // the confirm button win the double-resolution guard.
     const actions: DialogAction[] = [
       {
         label: confirmLabel,
-        onPress: handleConfirm,
+        onPress: onConfirm,
         color: destructive ? 'destructive' : 'default',
-        shouldCloseOnPress: false,
       },
     ];
     if (!hideCancel) {
-      // The `cancel` color auto-dismisses via the Dialog's `close()`, which in
-      // controlled mode fires `onClose` (the host resolves `false`). `onCancel`
-      // runs after the surface finishes closing.
+      // The `cancel` color auto-dismisses via the Dialog's `close()` (exit
+      // animation), then runs `onCancel` as a close-completion callback.
       actions.push({
         label: cancelLabel,
         onPress: onCancel,
@@ -74,11 +118,14 @@ export function createAlertDialog(Dialog: DialogComponent) {
 
     return (
       <Dialog
-        open={visible}
-        onClose={onClose}
+        control={control}
+        onClose={handleClose}
         placement="center"
-        // Alert dialogs are blocking by default — the backdrop / Escape only
-        // dismiss when the caller opts in via `dismissible`.
+        // Alert dialogs dismiss on backdrop / Escape by default (matching the
+        // shared Dialog default and Mention's `ConfirmPrompt`). A backdrop /
+        // Escape dismissal can only ever resolve the confirm as cancelled
+        // (`false`), never the destructive action — callers that need a truly
+        // blocking confirm opt out with `dismissible={false}`.
         dismissOnBackdrop={dismissible}
         title={title}
         description={description}

package/src/alert-dialog/types.ts

@@ -27,8 +27,10 @@ export interface AlertDialogProps {
   /** Render only the confirm button (no cancel). Defaults to `false`. */
   hideCancel?: boolean;
   /**
-   * Tap-outside / Escape dismisses. Defaults to `false` — alert dialogs are
-   * usually blocking until answered.
+   * Tap-outside / Escape dismisses. Defaults to `true` — matching the shared
+   * `Dialog` default and Mention's `ConfirmPrompt`. A backdrop / Escape
+   * dismissal always resolves the confirm as cancelled (`false`), so it is
+   * safe by default; pass `false` for a truly blocking confirm.
    */
   dismissible?: boolean;
   cardStyle?: StyleProp<ViewStyle>;
@@ -42,5 +44,9 @@ export interface ConfirmOptions {
   cancelLabel?: string;
   destructive?: boolean;
   hideCancel?: boolean;
+  /**
+   * Tap-outside / Escape dismisses (resolving `false`). Defaults to `true`;
+   * pass `false` for a blocking confirm that must be answered by a button.
+   */
   dismissible?: boolean;
 }

package/src/button/Button.web.tsx

@@ -9,11 +9,10 @@ import React, {
   type ReactElement,
 } from 'react';
 
-import type { ViewStyle } from 'react-native';
-
 import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
 import { SpinnerIcon } from '../loading/SpinnerIcon.web';
+import { flattenWebStyle } from '../styles/flatten-web-style';
 import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
@@ -218,37 +217,6 @@ function resolveVariantStyle(
   }
 }
 
-// ---------------------------------------------------------------------------
-//  Style normalization
-//
-//  Callers idiomatically pass `style` as a React-Native `StyleProp` — most
-//  often an ARRAY (`style={[base, cond && override]}`, possibly nested and
-//  containing falsy holes from `cond && {...}`). The DOM `<button>` below needs
-//  a SINGLE plain object: spreading a raw array into an object literal produces
-//  numeric keys (`"0"`, `"1"`, …), which React then assigns onto the real
-//  `CSSStyleDeclaration`, throwing
-//  `Failed to set an indexed property [0] on 'CSSStyleDeclaration'`. Flatten the
-//  StyleProp into one object here, once, before it reaches either merge site.
-//  Later entries win, mirroring React-Native array-style precedence.
-//
-//  `StyleNode` is a readonly-closed recursion type (RN's own `StyleProp` array
-//  member yields `readonly` sub-arrays that aren't assignable back to
-//  `StyleProp`, so it can't be recursed over directly). `ButtonProps['style']`
-//  is assignable to it, so call sites pass `style` with no cast.
-// ---------------------------------------------------------------------------
-
-type StyleNode = ViewStyle | false | null | undefined | '' | ReadonlyArray<StyleNode>;
-
-function flattenStyle(style: StyleNode): CSSProperties {
-  if (Array.isArray(style)) {
-    return style.reduce<CSSProperties>(
-      (merged, entry) => Object.assign(merged, flattenStyle(entry)),
-      {},
-    );
-  }
-  return style && typeof style === 'object' ? (style as CSSProperties) : {};
-}
-
 // ---------------------------------------------------------------------------
 //  Component
 // ---------------------------------------------------------------------------
@@ -350,9 +318,11 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
 
   const spinnerColor = loadingColor ?? variantStyle.textColor;
 
-  // Normalize the caller's `style` (single object, array, or falsy) into one
-  // flat plain object ONCE, so neither merge site below spreads a raw array.
-  const resolvedStyle = flattenStyle(style);
+  // Normalize the caller's `style` (single object, StyleProp array, or falsy)
+  // into ONE flat plain object here, once, so neither raw-DOM merge site below
+  // spreads a StyleProp array (which would leak numeric keys onto the button's
+  // CSSStyleDeclaration). See `flattenWebStyle` for the full rationale.
+  const resolvedStyle = flattenWebStyle(style);
 
   const content = (
     <>

package/src/fab/Fab.web.tsx

@@ -10,6 +10,7 @@ import React, {
 
 import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
+import { flattenWebStyle } from '../styles/flatten-web-style';
 import type { FabPlacement, FabProps, FabSize, FabVariant } from './types';
 
 export type { FabProps, FabVariant, FabSize, FabPlacement } from './types';
@@ -261,12 +262,20 @@ const FabWebComponent: React.FC<FabProps> = ({
   const ariaLabel = ariaLabelProp ?? accessibilityLabel ?? label;
   const composedClassName = ['bloom-fab'].concat(className ? [className] : []).join(' ');
 
+  // Normalize `style`/`labelStyle` (single object, StyleProp array — the native
+  // fork passes `style={[placementStyle(...), {...}, style]}` — or falsy) into
+  // ONE flat plain object each, so neither raw-DOM merge site below spreads a
+  // StyleProp array (which would leak numeric keys onto the element's
+  // CSSStyleDeclaration). See `flattenWebStyle` for the full rationale.
+  const resolvedStyle = flattenWebStyle(style);
+  const resolvedLabelStyle = flattenWebStyle(labelStyle);
+
   return (
     <button
       id={resolvedId}
       type={type}
       className={composedClassName}
-      style={{ ...containerStyle, ...(style as CSSProperties) }}
+      style={{ ...containerStyle, ...resolvedStyle }}
       onClick={handleClick}
       disabled={disabled}
       aria-disabled={disabled || undefined}
@@ -288,7 +297,7 @@ const FabWebComponent: React.FC<FabProps> = ({
           {content}
         </span>
       )}
-      {isExtended && <span style={labelStyle as CSSProperties}>{label}</span>}
+      {isExtended && <span style={resolvedLabelStyle}>{label}</span>}
     </button>
   );
 };

package/src/styles/flatten-web-style.ts

@@ -0,0 +1,58 @@
+import type { CSSProperties } from 'react';
+import type { TextStyle, ViewStyle } from 'react-native';
+
+// ---------------------------------------------------------------------------
+//  flattenWebStyle — StyleProp → plain CSSProperties, for raw-DOM web forks.
+//
+//  A handful of Bloom's `.web.tsx` forks (`Button.web.tsx`, `Fab.web.tsx`)
+//  render REAL HTML elements through react-dom (`<button>`, `<span>`), NOT
+//  react-native-web components. Their `style` prop is therefore a single plain
+//  `CSSProperties` object that React commits straight to a live
+//  `CSSStyleDeclaration`.
+//
+//  Callers, however, pass `style` as a React-Native `StyleProp` — most often an
+//  ARRAY (`style={[base, cond && override]}`, possibly nested, with falsy holes
+//  from `cond && {...}`). Spreading a raw array into an object literal produces
+//  numeric keys ("0", "1", …), which React then assigns onto the DOM node's
+//  `CSSStyleDeclaration`, throwing:
+//    `Failed to set an indexed property [0] on 'CSSStyleDeclaration'`.
+//
+//  Why NOT `StyleSheet.flatten` (the convention the RNW-component forks such as
+//  `list/index.web.tsx` use): these raw-DOM forks have NO other react-native
+//  runtime dependency. Reaching for `StyleSheet.flatten` would couple them to
+//  the `react-native` → `react-native-web` bundler alias they otherwise never
+//  need — a coupling the jsdom test environment does not provide (its
+//  `react-native` mock stubs `flatten` as an identity no-op, so an array would
+//  pass through unflattened and the raw-DOM render would crash under test). A
+//  dependency-free flatten is provably correct in every bundling/test context,
+//  so it is the right convention for THIS sub-class of forks specifically.
+//
+//  `StyleNode` is a readonly-closed recursion type: RN's own `StyleProp` array
+//  members are `readonly` and its `RegisteredStyle` members are branded numbers,
+//  neither of which is assignable back to `StyleProp` for direct recursion.
+//  `StyleProp<ViewStyle>` / `StyleProp<TextStyle>` ARE assignable to it, so call
+//  sites pass `style` / `labelStyle` with no cast. Later entries win, mirroring
+//  React-Native array-style precedence; falsy holes and unresolved registered-
+//  style ids (bare numbers — not resolvable without the RN runtime, and never
+//  passed to a raw-DOM fork in practice) are skipped.
+// ---------------------------------------------------------------------------
+
+type StyleNode =
+  | ViewStyle
+  | TextStyle
+  | number
+  | false
+  | null
+  | undefined
+  | ''
+  | ReadonlyArray<StyleNode>;
+
+export function flattenWebStyle(style: StyleNode): CSSProperties {
+  if (Array.isArray(style)) {
+    return style.reduce<CSSProperties>(
+      (merged, entry) => Object.assign(merged, flattenWebStyle(entry)),
+      {},
+    );
+  }
+  return style && typeof style === 'object' ? (style as CSSProperties) : {};
+}