@oxyhq/bloom 0.72.1 → 0.72.2

package/lib/commonjs/overlay/index.js

@@ -90,9 +90,21 @@ function OverlayRoot({
 }
 OverlayRoot.displayName = 'OverlayRoot';
 /**
- * Full-bleed blur + dim that dismisses the surface when pressed. Always takes
- * pointer events (that is its whole job), so anything that must stay pressable
- * goes INSIDE it as `children`, never as a sibling rendered over it.
+ * Full-bleed blur + dim that dismisses the surface when pressed.
+ *
+ * The dismiss target is a hit box that fills this component and sits BEHIND
+ * `children`, never around them. It used to wrap them, which read fine on
+ * native but is invalid on web: the hit box carries `accessibilityRole="button"`,
+ * so react-native-web renders it as a real `<button>` — and every control inside
+ * any Bloom surface (a dialog's own buttons, a menu's rows) became a nested
+ * `<button>`. React reports that as a hydration error, and the nested control's
+ * activation behaviour is undefined per the HTML spec.
+ *
+ * Hit testing is unchanged: the hit box still covers the whole area, `children`
+ * render above it and take their own presses, and a press that lands on empty
+ * space falls through to the hit box. Layout styles passed via `style` stay on
+ * the outer box, so a caller that centres its panel with this component (the
+ * centred dialog) keeps doing so.
  */
 const Backdrop = exports.Backdrop = /*#__PURE__*/(0, _react.memo)(function Backdrop({
   onPress,
@@ -134,35 +146,44 @@ const Backdrop = exports.Backdrop = /*#__PURE__*/(0, _react.memo)(function Backd
   const dimFade = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: (progress ? progress.value : 1) * staticOpacity * dimOpacity
   }), [progress, staticOpacity, dimOpacity]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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: [_reactNative.StyleSheet.absoluteFill, rootStyle],
-    children: [blurIntensity > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedBlurView, {
-      intensity: blurIntensity,
-      tint: blurTint
-      // Android's default blur is a no-op on many devices; this is the
-      // implementation that actually renders there.
-      ,
-      experimentalBlurMethod: "dimezisBlurView",
-      pointerEvents: "none",
-      style: [_reactNative.StyleSheet.absoluteFill, layerStyle, blurFade]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-      pointerEvents: "none",
-      style: [_reactNative.StyleSheet.absoluteFill, {
-        backgroundColor: resolvedDimColor
-      }, layerStyle, dimFade]
-    }), children]
-  });
+  return (
+    /*#__PURE__*/
+    // `box-none` so this box never takes a press itself: the hit box below and
+    // `children` above are what receive them.
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      pointerEvents: "box-none",
+      style: [_reactNative.StyleSheet.absoluteFill, rootStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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: _reactNative.StyleSheet.absoluteFill,
+        children: [blurIntensity > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedBlurView, {
+          intensity: blurIntensity,
+          tint: blurTint
+          // Android's default blur is a no-op on many devices; this is the
+          // implementation that actually renders there.
+          ,
+          experimentalBlurMethod: "dimezisBlurView",
+          pointerEvents: "none",
+          style: [_reactNative.StyleSheet.absoluteFill, layerStyle, blurFade]
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+          pointerEvents: "none",
+          style: [_reactNative.StyleSheet.absoluteFill, {
+            backgroundColor: resolvedDimColor
+          }, layerStyle, dimFade]
+        })]
+      }), children]
+    })
+  );
 });
 Backdrop.displayName = 'Backdrop';
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/overlay/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_expoBlur","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_webViewStyle","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedBlurView","Animated","createAnimatedComponent","BlurView","BACKDROP_BLUR_INTENSITY","exports","BACKDROP_DIM_OPACITY","OverlayRoot","children","style","testID","jsx","View","pointerEvents","styles","root","displayName","Backdrop","memo","onPress","progress","disabled","blurIntensity","blurTint","dimColor","dimOpacity","layerStyle","accessibilityLabel","inert","flat","StyleSheet","flatten","opacity","styleOpacity","backgroundColor","styleBackground","rootStyle","staticOpacity","resolvedDimColor","blurFade","useAnimatedStyle","value","dimFade","jsxs","Pressable","undefined","focusable","accessibilityRole","absoluteFill","intensity","tint","experimentalBlurMethod","create","position","Platform","OS","WEB_POSITION_FIXED","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["overlay/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_expoBlur","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_webViewStyle","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedBlurView","Animated","createAnimatedComponent","BlurView","BACKDROP_BLUR_INTENSITY","exports","BACKDROP_DIM_OPACITY","OverlayRoot","children","style","testID","jsx","View","pointerEvents","styles","root","displayName","Backdrop","memo","onPress","progress","disabled","blurIntensity","blurTint","dimColor","dimOpacity","layerStyle","accessibilityLabel","inert","flat","StyleSheet","flatten","opacity","styleOpacity","backgroundColor","styleBackground","rootStyle","staticOpacity","resolvedDimColor","blurFade","useAnimatedStyle","value","dimFade","jsxs","absoluteFill","Pressable","undefined","focusable","accessibilityRole","intensity","tint","experimentalBlurMethod","create","position","Platform","OS","WEB_POSITION_FIXED","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["overlay/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/overlay/index.js

@@ -83,9 +83,21 @@ export function OverlayRoot({
 }
 OverlayRoot.displayName = 'OverlayRoot';
 /**
- * Full-bleed blur + dim that dismisses the surface when pressed. Always takes
- * pointer events (that is its whole job), so anything that must stay pressable
- * goes INSIDE it as `children`, never as a sibling rendered over it.
+ * Full-bleed blur + dim that dismisses the surface when pressed.
+ *
+ * The dismiss target is a hit box that fills this component and sits BEHIND
+ * `children`, never around them. It used to wrap them, which read fine on
+ * native but is invalid on web: the hit box carries `accessibilityRole="button"`,
+ * so react-native-web renders it as a real `<button>` — and every control inside
+ * any Bloom surface (a dialog's own buttons, a menu's rows) became a nested
+ * `<button>`. React reports that as a hydration error, and the nested control's
+ * activation behaviour is undefined per the HTML spec.
+ *
+ * Hit testing is unchanged: the hit box still covers the whole area, `children`
+ * render above it and take their own presses, and a press that lands on empty
+ * space falls through to the hit box. Layout styles passed via `style` stay on
+ * the outer box, so a caller that centres its panel with this component (the
+ * centred dialog) keeps doing so.
  */
 export const Backdrop = /*#__PURE__*/memo(function Backdrop({
   onPress,
@@ -127,35 +139,44 @@ export const Backdrop = /*#__PURE__*/memo(function Backdrop({
   const dimFade = useAnimatedStyle(() => ({
     opacity: (progress ? progress.value : 1) * staticOpacity * dimOpacity
   }), [progress, staticOpacity, dimOpacity]);
-  return /*#__PURE__*/_jsxs(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, rootStyle],
-    children: [blurIntensity > 0 ? /*#__PURE__*/_jsx(AnimatedBlurView, {
-      intensity: blurIntensity,
-      tint: blurTint
-      // Android's default blur is a no-op on many devices; this is the
-      // implementation that actually renders there.
-      ,
-      experimentalBlurMethod: "dimezisBlurView",
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, layerStyle, blurFade]
-    }) : null, /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: resolvedDimColor
-      }, layerStyle, dimFade]
-    }), children]
-  });
+  return (
+    /*#__PURE__*/
+    // `box-none` so this box never takes a press itself: the hit box below and
+    // `children` above are what receive them.
+    _jsxs(View, {
+      pointerEvents: "box-none",
+      style: [StyleSheet.absoluteFill, rootStyle],
+      children: [/*#__PURE__*/_jsxs(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,
+        children: [blurIntensity > 0 ? /*#__PURE__*/_jsx(AnimatedBlurView, {
+          intensity: blurIntensity,
+          tint: blurTint
+          // Android's default blur is a no-op on many devices; this is the
+          // implementation that actually renders there.
+          ,
+          experimentalBlurMethod: "dimezisBlurView",
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, layerStyle, blurFade]
+        }) : null, /*#__PURE__*/_jsx(Animated.View, {
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, {
+            backgroundColor: resolvedDimColor
+          }, layerStyle, dimFade]
+        })]
+      }), children]
+    })
+  );
 });
 Backdrop.displayName = 'Backdrop';
 const styles = StyleSheet.create({

package/lib/module/overlay/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["memo","BlurView","Platform","Pressable","StyleSheet","View","Animated","useAnimatedStyle","WEB_POSITION_FIXED","jsx","_jsx","jsxs","_jsxs","AnimatedBlurView","createAnimatedComponent","BACKDROP_BLUR_INTENSITY","BACKDROP_DIM_OPACITY","OverlayRoot","children","style","testID","pointerEvents","styles","root","displayName","Backdrop","onPress","progress","disabled","blurIntensity","blurTint","dimColor","dimOpacity","layerStyle","accessibilityLabel","inert","flat","flatten","opacity","styleOpacity","backgroundColor","styleBackground","rootStyle","staticOpacity","resolvedDimColor","blurFade","value","dimFade","undefined","focusable","accessibilityRole","absoluteFill","intensity","tint","experimentalBlurMethod","create","position","OS","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["overlay/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["memo","BlurView","Platform","Pressable","StyleSheet","View","Animated","useAnimatedStyle","WEB_POSITION_FIXED","jsx","_jsx","jsxs","_jsxs","AnimatedBlurView","createAnimatedComponent","BACKDROP_BLUR_INTENSITY","BACKDROP_DIM_OPACITY","OverlayRoot","children","style","testID","pointerEvents","styles","root","displayName","Backdrop","onPress","progress","disabled","blurIntensity","blurTint","dimColor","dimOpacity","layerStyle","accessibilityLabel","inert","flat","flatten","opacity","styleOpacity","backgroundColor","styleBackground","rootStyle","staticOpacity","resolvedDimColor","blurFade","value","dimFade","absoluteFill","undefined","focusable","accessibilityRole","intensity","tint","experimentalBlurMethod","create","position","OS","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["overlay/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,IAAI,QAAwB,OAAO;AAC5C,SAASC,QAAQ,QAAQ,WAAW;AACpC,SACEC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,QAGC,cAAc;AACrB,OAAOC,QAAQ,IAAIC,gBAAgB,QAA0B,yBAAyB;AAEtF,SAASC,kBAAkB,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9D,MAAMC,gBAAgB,GAAGP,QAAQ,CAACQ,uBAAuB,CAACb,QAAQ,CAAC;;AAEnE;AACA;AACA;AACA;AACA,OAAO,MAAMc,uBAAuB,GAAG,EAAE;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAG,IAAI;AAQxC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAyB,CAAC,EAAE;EACzE,oBACEV,IAAA,CAACL,IAAI;IAACgB,aAAa,EAAC,UAAU;IAACF,KAAK,EAAE,CAACG,MAAM,CAACC,IAAI,EAAEJ,KAAK,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAAF,QAAA,EACxEA;EAAQ,CACL,CAAC;AAEX;AAEAD,WAAW,CAACO,WAAW,GAAG,aAAa;AAwCvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,gBAAGzB,IAAI,CAAC,SAASyB,QAAQA,CAAC;EAC7CC,OAAO;EACPC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAGd,uBAAuB;EACvCe,QAAQ,GAAG,MAAM;EACjBC,QAAQ,GAAG,MAAM;EACjBC,UAAU,GAAGhB,oBAAoB;EACjCG,KAAK;EACLc,UAAU;EACVf,QAAQ;EACRgB,kBAAkB,GAAG,SAAS;EAC9Bd;AACa,CAAC,EAAE;EAChB,MAAMe,KAAK,GAAGP,QAAQ,IAAI,CAACF,OAAO;;EAElC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMU,IAAe,GAAGhC,UAAU,CAACiC,OAAO,CAAClB,KAAK,CAAC,IAAI,CAAC,CAAC;EACvD,MAAM;IAAEmB,OAAO,EAAEC,YAAY;IAAEC,eAAe,EAAEC,eAAe;IAAE,GAAGC;EAAU,CAAC,GAAGN,IAAI;EACtF,MAAMO,aAAa,GAAG,OAAOJ,YAAY,KAAK,QAAQ,GAAGA,YAAY,GAAG,CAAC;EACzE,MAAMK,gBAAgB,GAAG,OAAOH,eAAe,KAAK,QAAQ,GAAGA,eAAe,GAAGV,QAAQ;;EAEzF;EACA,MAAMc,QAAQ,GAAGtC,gBAAgB,CAC/B,OAAO;IAAE+B,OAAO,EAAE,CAACX,QAAQ,GAAGA,QAAQ,CAACmB,KAAK,GAAG,CAAC,IAAIH;EAAc,CAAC,CAAC,EACpE,CAAChB,QAAQ,EAAEgB,aAAa,CAC1B,CAAC;EACD,MAAMI,OAAO,GAAGxC,gBAAgB,CAC9B,OAAO;IAAE+B,OAAO,EAAE,CAACX,QAAQ,GAAGA,QAAQ,CAACmB,KAAK,GAAG,CAAC,IAAIH,aAAa,GAAGX;EAAW,CAAC,CAAC,EACjF,CAACL,QAAQ,EAAEgB,aAAa,EAAEX,UAAU,CACtC,CAAC;EAED;IAAA;IACE;IACA;IACApB,KAAA,CAACP,IAAI;MAACgB,aAAa,EAAC,UAAU;MAACF,KAAK,EAAE,CAACf,UAAU,CAAC4C,YAAY,EAAEN,SAAS,CAAE;MAAAxB,QAAA,gBACzEN,KAAA,CAACT,SAAS;QACRkB,aAAa,EAAC,MAAM;QACpBK,OAAO,EAAES,KAAK,GAAGc,SAAS,GAAGvB,OAAQ;QACrCE,QAAQ,EAAEO;QACV;QACA;QACA;QAAA;QACAe,SAAS,EAAE,KAAM;QACjBC,iBAAiB,EAAEhB,KAAK,GAAGc,SAAS,GAAG,QAAS;QAChDf,kBAAkB,EAAEC,KAAK,GAAGc,SAAS,GAAGf,kBAAmB;QAC3Dd,MAAM,EAAEA,MAAO;QACfD,KAAK,EAAEf,UAAU,CAAC4C,YAAa;QAAA9B,QAAA,GAE9BW,aAAa,GAAG,CAAC,gBAChBnB,IAAA,CAACG,gBAAgB;UACfuC,SAAS,EAAEvB,aAAc;UACzBwB,IAAI,EAAEvB;UACN;UACA;UAAA;UACAwB,sBAAsB,EAAC,iBAAiB;UACxCjC,aAAa,EAAC,MAAM;UACpBF,KAAK,EAAE,CAACf,UAAU,CAAC4C,YAAY,EAAEf,UAAU,EAAEY,QAAQ;QAAE,CACxD,CAAC,GACA,IAAI,eACRnC,IAAA,CAACJ,QAAQ,CAACD,IAAI;UACZgB,aAAa,EAAC,MAAM;UACpBF,KAAK,EAAE,CAACf,UAAU,CAAC4C,YAAY,EAAE;YAAER,eAAe,EAAEI;UAAiB,CAAC,EAAEX,UAAU,EAAEc,OAAO;QAAE,CAC9F,CAAC;MAAA,CACO,CAAC,EACX7B,QAAQ;IAAA,CACL;EAAC;AAEX,CAAC,CAAC;AAEFO,QAAQ,CAACD,WAAW,GAAG,UAAU;AAEjC,MAAMF,MAAM,GAAGlB,UAAU,CAACmD,MAAM,CAAC;EAC/BhC,IAAI,EAAE;IACJ;IACA;IACA;IACA;IACA;IACAiC,QAAQ,EAAEtD,QAAQ,CAACuD,EAAE,KAAK,KAAK,GAAGjD,kBAAkB,GAAG,UAAU;IACjEkD,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/commonjs/overlay/index.d.ts

@@ -103,15 +103,27 @@ export interface BackdropProps {
      * express — the web dialog's CSS keyframes, for instance.
      */
     layerStyle?: StyleProp<ViewStyle>;
-    /** Rendered ON TOP of the dim, inside the press target (Dialog's panel does this). */
+    /** Rendered ON TOP of the dim, as a sibling of the press target (Dialog's panel does this). */
     children?: ReactNode;
     accessibilityLabel?: string;
     testID?: string;
 }
 /**
- * Full-bleed blur + dim that dismisses the surface when pressed. Always takes
- * pointer events (that is its whole job), so anything that must stay pressable
- * goes INSIDE it as `children`, never as a sibling rendered over it.
+ * Full-bleed blur + dim that dismisses the surface when pressed.
+ *
+ * The dismiss target is a hit box that fills this component and sits BEHIND
+ * `children`, never around them. It used to wrap them, which read fine on
+ * native but is invalid on web: the hit box carries `accessibilityRole="button"`,
+ * so react-native-web renders it as a real `<button>` — and every control inside
+ * any Bloom surface (a dialog's own buttons, a menu's rows) became a nested
+ * `<button>`. React reports that as a hydration error, and the nested control's
+ * activation behaviour is undefined per the HTML spec.
+ *
+ * Hit testing is unchanged: the hit box still covers the whole area, `children`
+ * render above it and take their own presses, and a press that lands on empty
+ * space falls through to the hit box. Layout styles passed via `style` stay on
+ * the outer box, so a caller that centres its panel with this component (the
+ * centred dialog) keeps doing so.
  */
 export declare const Backdrop: import("react").NamedExoticComponent<BackdropProps>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMvF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,sFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qDAuEnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMvF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,qDA2EnB,CAAC"}

package/lib/typescript/module/overlay/index.d.ts

@@ -103,15 +103,27 @@ export interface BackdropProps {
      * express — the web dialog's CSS keyframes, for instance.
      */
     layerStyle?: StyleProp<ViewStyle>;
-    /** Rendered ON TOP of the dim, inside the press target (Dialog's panel does this). */
+    /** Rendered ON TOP of the dim, as a sibling of the press target (Dialog's panel does this). */
     children?: ReactNode;
     accessibilityLabel?: string;
     testID?: string;
 }
 /**
- * Full-bleed blur + dim that dismisses the surface when pressed. Always takes
- * pointer events (that is its whole job), so anything that must stay pressable
- * goes INSIDE it as `children`, never as a sibling rendered over it.
+ * Full-bleed blur + dim that dismisses the surface when pressed.
+ *
+ * The dismiss target is a hit box that fills this component and sits BEHIND
+ * `children`, never around them. It used to wrap them, which read fine on
+ * native but is invalid on web: the hit box carries `accessibilityRole="button"`,
+ * so react-native-web renders it as a real `<button>` — and every control inside
+ * any Bloom surface (a dialog's own buttons, a menu's rows) became a nested
+ * `<button>`. React reports that as a hydration error, and the nested control's
+ * activation behaviour is undefined per the HTML spec.
+ *
+ * Hit testing is unchanged: the hit box still covers the whole area, `children`
+ * render above it and take their own presses, and a press that lands on empty
+ * space falls through to the hit box. Layout styles passed via `style` stay on
+ * the outer box, so a caller that centres its panel with this component (the
+ * centred dialog) keeps doing so.
  */
 export declare const Backdrop: import("react").NamedExoticComponent<BackdropProps>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMvF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,sFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qDAuEnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMvF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,qDA2EnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.72.1",
+  "version": "0.72.2",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/backdrop-nesting.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// The bug these tests exist for: `Backdrop`'s dismiss target carries
+// `accessibilityRole="button"`, which react-native-web renders as a real
+// `<button>`. While that target WRAPPED `children`, every control inside a
+// Bloom surface became a nested `<button>` — invalid HTML, reported by React as
+// a hydration error, and with activation behaviour the spec leaves undefined.
+// It reproduced on any dialog with a button in it (Mention's post-options menu:
+// "Dismiss Post options" containing "Insights").
+//
+// The fix makes the hit box a SIBLING behind `children`. These tests pin both
+// halves of that: no nesting, and the dismiss press still works.
+
+import { createElement } from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+// The whole point is what react-native-web puts in the DOM, so this suite runs
+// against the REAL RNW — the repo-wide `react-native` mock emits no host
+// elements and would make every assertion below vacuous.
+jest.mock('react-native', () => jest.requireActual('react-native-web'));
+
+import { Pressable, Text } from 'react-native';
+
+import { Backdrop } from '../overlay';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function render(node: ReturnType<typeof createElement>): { root: Root; container: HTMLElement } {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(node);
+  });
+  return { root, container };
+}
+
+describe('Backdrop DOM nesting (web)', () => {
+  it('does not make a pressable child a nested <button>', () => {
+    const { root, container } = render(
+      createElement(Backdrop, {
+        onPress: () => {},
+        accessibilityLabel: 'Dismiss Post options',
+        testID: 'backdrop',
+        children: createElement(
+          Pressable,
+          { accessibilityRole: 'button', accessibilityLabel: 'Insights', onPress: () => {} },
+          createElement(Text, null, 'Insights'),
+        ),
+      }),
+    );
+
+    // Vacuity floor: the child button must actually be in the DOM, otherwise
+    // "no nesting" would pass on an empty tree.
+    const inner = container.querySelector('[aria-label="Insights"]');
+    expect(inner?.tagName).toBe('BUTTON');
+    expect(container.querySelector('[aria-label="Dismiss Post options"]')?.tagName).toBe('BUTTON');
+
+    expect(container.querySelectorAll('button button')).toHaveLength(0);
+
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('still dismisses when the backdrop itself is pressed', () => {
+    const onPress = jest.fn();
+    const { root, container } = render(
+      createElement(Backdrop, { onPress, accessibilityLabel: 'Dismiss dialog', children: null }),
+    );
+
+    const hitBox = container.querySelector<HTMLElement>('[aria-label="Dismiss dialog"]');
+    expect(hitBox).not.toBeNull();
+    act(() => {
+      hitBox?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    expect(onPress).toHaveBeenCalledTimes(1);
+
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('emits no dismiss affordance at all when inert', () => {
+    const { root, container } = render(
+      createElement(Backdrop, { disabled: true, onPress: () => {}, children: null }),
+    );
+
+    expect(container.querySelectorAll('button')).toHaveLength(0);
+
+    act(() => root.unmount());
+    container.remove();
+  });
+});

package/src/overlay/index.tsx

@@ -124,16 +124,28 @@ export interface BackdropProps {
    * express — the web dialog's CSS keyframes, for instance.
    */
   layerStyle?: StyleProp<ViewStyle>;
-  /** Rendered ON TOP of the dim, inside the press target (Dialog's panel does this). */
+  /** Rendered ON TOP of the dim, as a sibling of the press target (Dialog's panel does this). */
   children?: ReactNode;
   accessibilityLabel?: string;
   testID?: string;
 }
 
 /**
- * Full-bleed blur + dim that dismisses the surface when pressed. Always takes
- * pointer events (that is its whole job), so anything that must stay pressable
- * goes INSIDE it as `children`, never as a sibling rendered over it.
+ * Full-bleed blur + dim that dismisses the surface when pressed.
+ *
+ * The dismiss target is a hit box that fills this component and sits BEHIND
+ * `children`, never around them. It used to wrap them, which read fine on
+ * native but is invalid on web: the hit box carries `accessibilityRole="button"`,
+ * so react-native-web renders it as a real `<button>` — and every control inside
+ * any Bloom surface (a dialog's own buttons, a menu's rows) became a nested
+ * `<button>`. React reports that as a hydration error, and the nested control's
+ * activation behaviour is undefined per the HTML spec.
+ *
+ * Hit testing is unchanged: the hit box still covers the whole area, `children`
+ * render above it and take their own presses, and a press that lands on empty
+ * space falls through to the hit box. Layout styles passed via `style` stay on
+ * the outer box, so a caller that centres its panel with this component (the
+ * centred dialog) keeps doing so.
  */
 export const Backdrop = memo(function Backdrop({
   onPress,
@@ -175,36 +187,40 @@ export const Backdrop = memo(function Backdrop({
   );
 
   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, rootStyle]}
-    >
-      {blurIntensity > 0 ? (
-        <AnimatedBlurView
-          intensity={blurIntensity}
-          tint={blurTint}
-          // Android's default blur is a no-op on many devices; this is the
-          // implementation that actually renders there.
-          experimentalBlurMethod="dimezisBlurView"
+    // `box-none` so this box never takes a press itself: the hit box below and
+    // `children` above are what receive them.
+    <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, rootStyle]}>
+      <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}
+      >
+        {blurIntensity > 0 ? (
+          <AnimatedBlurView
+            intensity={blurIntensity}
+            tint={blurTint}
+            // Android's default blur is a no-op on many devices; this is the
+            // implementation that actually renders there.
+            experimentalBlurMethod="dimezisBlurView"
+            pointerEvents="none"
+            style={[StyleSheet.absoluteFill, layerStyle, blurFade]}
+          />
+        ) : null}
+        <Animated.View
           pointerEvents="none"
-          style={[StyleSheet.absoluteFill, layerStyle, blurFade]}
+          style={[StyleSheet.absoluteFill, { backgroundColor: resolvedDimColor }, layerStyle, dimFade]}
         />
-      ) : null}
-      <Animated.View
-        pointerEvents="none"
-        style={[StyleSheet.absoluteFill, { backgroundColor: resolvedDimColor }, layerStyle, dimFade]}
-      />
+      </Pressable>
       {children}
-    </Pressable>
+    </View>
   );
 });