@oxyhq/bloom 0.56.0 → 0.57.0

package/src/overlay/index.tsx

@@ -0,0 +1,115 @@
+/**
+ * The shared plumbing every portaled surface needs: an interactive ROOT and a
+ * press-to-dismiss BACKDROP. Dialog, BottomSheet, the image gallery, menus and
+ * toasts each used to hand-roll both, and each one got the web contract subtly
+ * wrong in its own way.
+ *
+ * ## The contract these two components encode
+ *
+ * Bloom's web `Portal` renders into `#bloom-portal-root`, which is
+ * `position: fixed; inset: 0; pointer-events: none` — an idle portal must let
+ * clicks reach the app underneath. `pointer-events` INHERITS in CSS, so every
+ * portaled descendant starts out click-through and has to opt back in.
+ *
+ * The opt-in only works through the `pointerEvents` **prop**. Passing it inside
+ * a `style` object (`style={{ pointerEvents: 'box-none' }}`) does NOT reach the
+ * DOM: react-native-web resolves the RN-only `box-none`/`box-only` values in
+ * `createDOMProps`, mapping the PROP onto its own class pair
+ * (`self { none !important }` + `> * { auto }`), while a style-object value is
+ * not valid CSS and is dropped. `pointerEvents: 'auto'`/`'none'` do survive as
+ * styles, which is what makes this so easy to get wrong — the two RN-only
+ * values silently do nothing. The symptom is brutal and silent: the whole
+ * surface — backdrop AND panel — renders perfectly and is completely
+ * click-through. Backdrop taps don't dismiss, buttons don't press, and the
+ * clicks land on whatever is behind the overlay (so a tap "through" a viewer
+ * navigates the page underneath). Only keyboard paths (Escape) keep working,
+ * which is what makes it look like a dismissal bug rather than a hit-testing
+ * one.
+ *
+ * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
+ * dimming layer; do not re-implement either with raw `View`s.
+ */
+import { memo, type ReactNode } from 'react';
+import { Platform, Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+
+export interface OverlayRootProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * Outermost node of a portaled surface. Fills the viewport and re-enables
+ * pointer events for its own children while empty gaps stay click-through
+ * (`box-none`), so a surface that only covers part of the screen never steals
+ * clicks from the app behind it.
+ */
+export function OverlayRoot({ children, style, testID }: OverlayRootProps) {
+  return (
+    <View pointerEvents="box-none" style={[styles.root, style]} testID={testID}>
+      {children}
+    </View>
+  );
+}
+
+OverlayRoot.displayName = 'OverlayRoot';
+
+export interface BackdropProps {
+  /** Dismiss handler. Omit (or pass `disabled`) for a backdrop that only dims. */
+  onPress?: () => void;
+  /** `true` keeps the dim but makes it inert — a blocking dialog, a busy state. */
+  disabled?: boolean;
+  /** Extra style (dim colour, animated opacity). Rendered over `absoluteFill`. */
+  style?: StyleProp<ViewStyle>;
+  /** Rendered inside the backdrop — e.g. a blur layer that must dim with it. */
+  children?: ReactNode;
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+/**
+ * Full-bleed dimming layer that dismisses the surface when pressed. Always
+ * takes pointer events (that is its whole job), so it must render UNDER the
+ * surface's panel in the tree, never over it.
+ */
+export const Backdrop = memo(function Backdrop({
+  onPress,
+  disabled = false,
+  style,
+  children,
+  accessibilityLabel = 'Dismiss',
+  testID,
+}: BackdropProps) {
+  const inert = disabled || !onPress;
+  return (
+    <Pressable
+      pointerEvents="auto"
+      onPress={inert ? undefined : onPress}
+      disabled={inert}
+      // A dimming layer is not a focus stop on web: Escape and the panel's own
+      // controls are the keyboard paths out. It stays labelled for screen
+      // readers that surface it as the dismiss affordance.
+      focusable={false}
+      accessibilityRole={inert ? undefined : 'button'}
+      accessibilityLabel={inert ? undefined : accessibilityLabel}
+      testID={testID}
+      style={[StyleSheet.absoluteFill, style]}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    // Web: the portal root is `fixed; inset: 0`, but a plain absolute child of
+    // it anchors to the document flow in some browsers once the page scrolls —
+    // pin this box to the viewport itself. Native: absolute fill inside the
+    // Outlet, which is already full-screen.
+    ...(Platform.OS === 'web'
+      ? { position: WEB_POSITION_FIXED, top: 0, left: 0, right: 0, bottom: 0 }
+      : StyleSheet.absoluteFillObject),
+  },
+});

package/src/portal/index.tsx

@@ -63,7 +63,7 @@ function createPortalGroup() {
   function Outlet() {
     const ctx = useContext(Context);
     if (Platform.OS === 'web') {
-      return <View style={styles.portalOutlet}>{ctx.outlet}</View>;
+      return <View pointerEvents="box-none" style={styles.portalOutlet}>{ctx.outlet}</View>;
     }
     return ctx.outlet;
   }
@@ -123,7 +123,9 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    pointerEvents: 'box-none',
+    // `box-none` rides on the PROP above — react-native-web only resolves that
+    // RN-only value from the prop path, so as a style entry it is silently
+    // inert and this full-viewport outlet swallows every click in the app.
     zIndex: Z_INDEX.portalRoot,
   },
 });

package/src/tab-bar/TabBarBase.tsx

@@ -440,7 +440,7 @@ function TabBarBody({
   );
 
   return (
-    <View {...viewProps} style={[styles.root, style]}>
+    <View {...viewProps} pointerEvents="box-none" style={[styles.root, style]}>
       {/* Progressive blur rising from the screen's bottom edge behind the pill.
           Rendered CONDITIONALLY, and as nothing at all when off: the band is
           full-bleed and 114pt tall at a zero bottom inset, so it blurs whatever
@@ -462,7 +462,7 @@ function TabBarBody({
           }}
         />
       )}
-      <View style={[styles.barWrap, { marginBottom: bottomOffset }, constrainedWrapStyle]}>
+      <View pointerEvents="box-none" style={[styles.barWrap, { marginBottom: bottomOffset }, constrainedWrapStyle]}>
         <GestureDetector gesture={gesture}>
           <Animated.View style={barStyle}>
             <Surface theme={theme} style={shapeStyle} />
@@ -642,17 +642,19 @@ export function createTabBarButton(Glyph: ComponentType<TabBarGlyphProps>) {
 
 const styles = StyleSheet.create({
   root: {
+    // `pointerEvents="box-none"` is passed as a PROP on the views using these
+    // styles, NOT as a style entry: react-native-web resolves the RN-only
+    // `box-none` value only from the prop path, so as a style it silently does
+    // nothing and this full-width bottom band swallows every click in it. RNW
+    // logs a deprecation notice for the prop exactly once per session — the
+    // trade against a dead strip across the bottom of every page is not close.
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
-    // In the style object, not as a prop: RN-Web deprecated the `pointerEvents`
-    // prop and warns on every render when it is used.
-    pointerEvents: 'box-none',
   },
   barWrap: {
     marginHorizontal: BAR_MARGIN,
-    pointerEvents: 'box-none',
   },
   highlight: {
     position: 'absolute',

package/src/toast/ToastHost.tsx

@@ -19,13 +19,14 @@
  *    swipe-to-dismiss would never receive touches. This provides its own, exactly
  *    as `bottom-sheet/index.web.tsx` does. Web consumers need no setup.
  *
- * `pointerEvents: 'box-none'` keeps the empty area click-through while the rows
+ * `OverlayRoot`'s `box-none` keeps the empty area click-through while the rows
  * themselves stay interactive.
  */
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
+import { OverlayRoot } from '../overlay';
 import { Portal } from '../portal/index.web';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { Z_INDEX } from '../styles/z-index';
@@ -33,9 +34,14 @@ import type { ToastHostProps } from './types';
 
 export function ToastHost({ children, ToasterOverlayWrapper }: ToastHostProps) {
   const content = (
-    <GestureHandlerRootView style={styles.host}>
-      {children}
-    </GestureHandlerRootView>
+    // `OverlayRoot` carries the pointer-events opt-in as a PROP; as a style
+    // entry it never reached the DOM, so the rows inherited the portal root's
+    // `pointer-events: none` and no toast could be pressed or swiped away.
+    <OverlayRoot style={styles.host}>
+      <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+        {children}
+      </GestureHandlerRootView>
+    </OverlayRoot>
   );
 
   return (
@@ -62,6 +68,5 @@ const styles = StyleSheet.create({
     // Inside `#bloom-portal-root` (which owns the document layer at 999999),
     // this keeps toasts above Dialog's surface (60) and tooltips (70).
     zIndex: Z_INDEX.toast,
-    pointerEvents: 'box-none',
   },
 });

package/src/zoomable-image-gallery/ZoomableImageGallery.tsx

@@ -28,6 +28,7 @@ import {
   GestureDetector,
 } from 'react-native-gesture-handler';
 import { useTheme } from '../theme/use-theme';
+import { Backdrop, OverlayRoot } from '../overlay';
 import { Portal } from '../portal';
 import { PressableWithHover } from '../pressable-with-hover';
 import {
@@ -423,19 +424,6 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
 
   React.useImperativeHandle(ref, () => ({ open }), [open]);
 
-  // Tapping the backdrop dismisses. Uses the same Gesture system as every
-  // other interaction in this component (image tap, pinch, pan, double-tap)
-  // instead of a plain RN Pressable, so the backdrop isn't the one interaction
-  // mixing two different event-handling systems under the same
-  // GestureHandlerRootView.
-  const backdropTapGesture = useMemo(
-    () =>
-      Gesture.Tap().onEnd(() => {
-        runOnJS(handleDismiss)();
-      }),
-    [handleDismiss]
-  );
-
   const panGesture = useMemo(
     () =>
       Gesture.Pan()
@@ -756,9 +744,16 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
   }, [handleDismiss, isOpen, pageTo]);
 
   const renderContent = () => (
-    <GestureHandlerRootView style={styles.modalContainer}>
-      <GestureDetector gesture={backdropTapGesture}>
-        <Animated.View style={StyleSheet.absoluteFill}>
+    <OverlayRoot style={styles.modalContainer}>
+      <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+        {/* Shared `Backdrop` (a Pressable) rather than a `Gesture.Tap()`: the
+            viewer renders through the web Portal, whose root is
+            `pointer-events: none`, and a gesture handler on a node that never
+            receives pointer events simply never fires — tapping the backdrop
+            did nothing on web while Escape still closed. `Backdrop` opts back
+            in via the `pointerEvents` PROP, the only form that reaches the DOM
+            (see `src/overlay`). */}
+        <Backdrop onPress={handleDismiss} accessibilityLabel="Close image viewer">
           <AnimatedBlurView
             intensity={80}
             tint={theme.isDark ? 'dark' : 'light'}
@@ -769,8 +764,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
               style={[StyleSheet.absoluteFill, { backgroundColor: theme.colors.overlay }, backdropStyle]}
             />
           </AnimatedBlurView>
-        </Animated.View>
-      </GestureDetector>
+        </Backdrop>
 
       <GestureDetector gesture={panGesture}>
         <Animated.View
@@ -961,8 +955,9 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
             </Animated.View>
           ) : null}
         </Animated.View>
-      </GestureDetector>
-    </GestureHandlerRootView>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    </OverlayRoot>
   );
 
   if (!isOpen) return null;