@oxyhq/bloom 0.72.1 → 0.73.0

package/src/menu/index.web.tsx

@@ -15,8 +15,9 @@ import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'rea
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { DialogControlProps } from '../dialog/types';
+import { OverlayRoot } from '../overlay';
 import { Portal } from '../portal/index.web';
-import { createDropdownZIndex } from '../styles/z-index';
+import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { resolveDropdownPlacement } from '../overlay/dropdown-placement';
 import { bloomShadowStyle } from '../design-tokens/shadows';
@@ -37,7 +38,6 @@ import type {
 
 export { useMenuContext };
 
-const menuZIndex = createDropdownZIndex();
 const VIEWPORT_GUTTER = 8;
 const MENU_OFFSET = 6;
 
@@ -266,24 +266,33 @@ export function MenuContent({
 
   return (
     <Portal>
-      <View
-        ref={attachDropdown}
-        style={[
-          styles.dropdown,
-          {
-            backgroundColor: theme.isDark
-              ? theme.colors.backgroundSecondary
-              : theme.colors.background,
-            borderColor: theme.colors.borderLight,
-            ...bloomShadowStyle('m'),
-          },
-          style,
-          styles.portaledDropdown,
-          position,
-        ]}
-      >
-        {children}
-      </View>
+      {/* `OverlayRoot` takes this menu's place in the open-order overlay stack.
+          The dropdown used to carry a fixed `zIndex` on the `dropdown` rung
+          (41), below the `overlay` rung a Dialog sits on (50/60) — so a menu
+          opened from inside a dialog rendered behind that dialog, whichever
+          opened last. It is `box-none`, so the area around the dropdown stays
+          click-through and the existing outside-press dismissal still sees the
+          press. */}
+      <OverlayRoot>
+        <View
+          ref={attachDropdown}
+          style={[
+            styles.dropdown,
+            {
+              backgroundColor: theme.isDark
+                ? theme.colors.backgroundSecondary
+                : theme.colors.background,
+              borderColor: theme.colors.borderLight,
+              ...bloomShadowStyle('m'),
+            },
+            style,
+            styles.portaledDropdown,
+            position,
+          ]}
+        >
+          {children}
+        </View>
+      </OverlayRoot>
     </Portal>
   );
 }
@@ -405,7 +414,10 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   openRoot: {
-    zIndex: menuZIndex.root,
+    // The INLINE trigger wrapper, still in the app's own document flow — this
+    // only lifts it over adjacent in-flow content while the menu is open. The
+    // portaled dropdown's depth is the overlay stack's business, not this.
+    zIndex: Z_INDEX.dropdown,
   },
   dropdown: {
     // Fixed from the outset, not only once positioned: the `Portal` root is a
@@ -420,7 +432,6 @@ const styles = StyleSheet.create({
     padding: 4,
     borderWidth: 1,
     overflow: 'hidden',
-    zIndex: menuZIndex.surface,
     // Overlay elevation applied at the usage site via `bloomShadowStyle('m')`.
     minWidth: 180,
   },

package/src/overlay/OverlayStacking.stories.tsx

@@ -0,0 +1,207 @@
+/**
+ * Stacked-overlay stories.
+ *
+ * These exist because overlay stacking used to be decided by hand-picked
+ * `zIndex` constants, so the answer to "which surface is on top" depended on
+ * WHICH KIND of surface each one was rather than on which one the user opened
+ * last. The failure was silent and total: the later surface rendered perfectly,
+ * fully interactive, entirely behind the earlier one — unreachable and
+ * undismissable.
+ *
+ * Every story opens a second surface from INSIDE a first one and puts a button
+ * in the second surface that writes into a result line. That makes the check a
+ * real one: drive it with actual input at the button's coordinates and the
+ * result only changes if the second surface genuinely received the press. A
+ * geometry read (`zIndex`, bounding boxes) would pass on a surface the user
+ * cannot touch. `src/__tests__/overlay-stack-order.test.ts` covers the ordering
+ * rule itself; `scripts/verify-overlay-stacking.mjs` drives these stories in a
+ * real browser.
+ */
+import React, { useRef, useState } from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { Button } from '../button';
+import { Dialog } from '../dialog/Dialog';
+import { useDialogControl } from '../dialog/context';
+import { Menu, MenuContent, MenuItem, MenuTrigger } from '../menu';
+
+const meta: Meta = {
+  title: 'Components/Overlay stacking',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+/** The line the harness reads. Starts at `idle`; the top surface writes to it. */
+function Result({ value }: { value: string }) {
+  return <Text testID="result">result: {value}</Text>;
+}
+
+/**
+ * The reported bug: a confirm dialog opened from a control inside an open bottom
+ * sheet. The dialog opens LAST, so it must be the surface that takes the press.
+ */
+function DialogOverSheet() {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const dialogControl = useDialogControl();
+  const [result, setResult] = useState('idle');
+
+  return (
+    <>
+      <Button testID="open-first" onPress={() => sheetRef.current?.present()}>
+        Open sheet
+      </Button>
+      <Result value={result} />
+
+      <BottomSheet ref={sheetRef}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Post options</Text>
+          <Button
+            testID="open-second"
+            variant="secondary"
+            onPress={() => dialogControl.open()}
+          >
+            Delete post
+          </Button>
+        </View>
+      </BottomSheet>
+
+      <Dialog
+        control={dialogControl}
+        testID="confirm-dialog"
+        title="Delete post?"
+        description="This cannot be undone."
+        actions={[
+          {
+            label: 'Delete',
+            color: 'destructive',
+            testID: 'top-action',
+            onPress: () => setResult('dialog'),
+          },
+          { label: 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </>
+  );
+}
+
+/** The mirror image: a sheet opened from inside an already-open dialog. */
+function SheetOverDialog() {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const dialogControl = useDialogControl();
+  const [result, setResult] = useState('idle');
+
+  return (
+    <>
+      <Button testID="open-first" onPress={() => dialogControl.open()}>
+        Open dialog
+      </Button>
+      <Result value={result} />
+
+      <Dialog control={dialogControl} testID="outer-dialog" title="Settings">
+        <Button
+          testID="open-second"
+          variant="secondary"
+          onPress={() => sheetRef.current?.present()}
+        >
+          Pick an option
+        </Button>
+      </Dialog>
+
+      <BottomSheet ref={sheetRef}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Options</Text>
+          <Button testID="top-action" variant="secondary" onPress={() => setResult('sheet')}>
+            Choose this
+          </Button>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+/** Two dialogs. The second must sit above the first. */
+function DialogOverDialog() {
+  const first = useDialogControl();
+  const second = useDialogControl();
+  const [result, setResult] = useState('idle');
+
+  return (
+    <>
+      <Button testID="open-first" onPress={() => first.open()}>
+        Open first dialog
+      </Button>
+      <Result value={result} />
+
+      <Dialog control={first} testID="first-dialog" title="First">
+        <Button testID="open-second" variant="secondary" onPress={() => second.open()}>
+          Open second dialog
+        </Button>
+      </Dialog>
+
+      <Dialog control={second} testID="second-dialog" title="Second">
+        <Button testID="top-action" variant="secondary" onPress={() => setResult('second')}>
+          Act
+        </Button>
+      </Dialog>
+    </>
+  );
+}
+
+/**
+ * A menu opened from inside a dialog. `Menu` sat on the `dropdown` rung of the
+ * scale (40/41) and the dialog on `overlay` (50/60), so the menu opened behind
+ * the dialog that launched it no matter what order they opened in.
+ */
+function MenuOverDialog() {
+  const control = useDialogControl();
+  const [result, setResult] = useState('idle');
+
+  return (
+    <>
+      <Button testID="open-first" onPress={() => control.open()}>
+        Open dialog
+      </Button>
+      <Result value={result} />
+
+      <Dialog control={control} testID="menu-host-dialog" title="Filters">
+        <Menu>
+          <MenuTrigger label="Sort by">
+            {({ props }) => (
+              <Button {...props} testID="open-second" variant="secondary">
+                Sort by
+              </Button>
+            )}
+          </MenuTrigger>
+          <MenuContent>
+            <MenuItem testID="top-action" label="Newest" onPress={() => setResult('menu')} />
+            <MenuItem label="Oldest" onPress={() => setResult('menu-oldest')} />
+          </MenuContent>
+        </Menu>
+      </Dialog>
+    </>
+  );
+}
+
+export const DialogOverSheetStory: Story = {
+  name: 'Dialog over sheet',
+  render: () => <DialogOverSheet />,
+};
+
+export const SheetOverDialogStory: Story = {
+  name: 'Sheet over dialog',
+  render: () => <SheetOverDialog />,
+};
+
+export const DialogOverDialogStory: Story = {
+  name: 'Dialog over dialog',
+  render: () => <DialogOverDialog />,
+};
+
+export const MenuOverDialogStory: Story = {
+  name: 'Menu over dialog',
+  render: () => <MenuOverDialog />,
+};

package/src/overlay/index.tsx

@@ -39,7 +39,7 @@
  * 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 { createContext, memo, useContext, useMemo, type ReactNode } from 'react';
 import { BlurView } from 'expo-blur';
 import {
   Platform,
@@ -52,9 +52,28 @@ import {
 import Animated, { useAnimatedStyle, type SharedValue } from 'react-native-reanimated';
 
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { layerForRank, type OverlayLayer } from './stack';
+import { useOverlayLayer } from './use-overlay-layer';
 
 const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
 
+/**
+ * The z-indices of the nearest enclosing `OverlayRoot`. Descendants that order
+ * themselves within a surface (a dialog's panel above its own backdrop) read
+ * this instead of picking their own numbers.
+ *
+ * The default is the first rank rather than 0, so a surface part rendered
+ * outside any `OverlayRoot` still lands in the overlay band instead of behind
+ * the app.
+ */
+const OverlayLayerContext = createContext<OverlayLayer>(layerForRank(1));
+OverlayLayerContext.displayName = 'BloomOverlayLayerContext';
+
+/** Z-indices of the enclosing overlay surface. See `OverlayRoot`. */
+export function useOverlayLayerContext(): OverlayLayer {
+  return useContext(OverlayLayerContext);
+}
+
 /**
  * One blur radius for every Bloom overlay. Surfaces differ in what they show,
  * not in how the app behind them recedes.
@@ -74,19 +93,92 @@ export interface OverlayRootProps {
   children?: ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  /**
+   * Opt OUT of the open-order stack and pin to a fixed depth. Only the toast
+   * layer does this — a notification has to stay visible over whatever is open,
+   * including a surface opened after it. Everything else must leave this unset
+   * so it stacks by open order; a hand-picked number here is precisely the bug
+   * `./stack.ts` exists to remove.
+   */
+  zIndex?: number;
 }
 
 /**
- * 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.
+ * Outermost node of a portaled surface. Three jobs:
+ *
+ *  - Fills the viewport.
+ *  - 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.
+ *  - Takes this surface's place in the overlay stack, so a surface opened later
+ *    paints above one opened earlier (see `./stack.ts`).
+ *
+ * Because the rank is taken on MOUNT, this must be rendered inside whatever
+ * guard makes the surface appear (`if (!isOpen) return null`), which is where
+ * every Bloom surface already puts it. Descendants that need to order
+ * themselves within the surface read `useOverlayLayerContext()`.
  */
-export function OverlayRoot({ children, style, testID }: OverlayRootProps) {
+export function OverlayRoot({ children, style, testID, zIndex }: OverlayRootProps) {
+  // Split into two components rather than branching on the hook: a pinned root
+  // must not CONSUME a rank either. The toast host is pinned and mounts for the
+  // whole life of the app, so holding a rank would keep the live set permanently
+  // non-empty — the counter would never reset and depths would climb for the
+  // rest of the session.
+  return zIndex === undefined ? (
+    <StackedOverlayRoot style={style} testID={testID}>
+      {children}
+    </StackedOverlayRoot>
+  ) : (
+    <PinnedOverlayRoot zIndex={zIndex} style={style} testID={testID}>
+      {children}
+    </PinnedOverlayRoot>
+  );
+}
+
+function StackedOverlayRoot({ children, style, testID }: Omit<OverlayRootProps, 'zIndex'>) {
+  const layer = useOverlayLayer();
   return (
-    <View pointerEvents="box-none" style={[styles.root, style]} testID={testID}>
+    <OverlayRootView layer={layer} style={style} testID={testID}>
       {children}
-    </View>
+    </OverlayRootView>
+  );
+}
+
+function PinnedOverlayRoot({
+  children,
+  style,
+  testID,
+  zIndex,
+}: OverlayRootProps & { zIndex: number }) {
+  // Outside the stack, so descendants must not read stack depths from it
+  // either — every slot is the pinned depth.
+  const layer = useMemo(
+    () => ({ root: zIndex, backdrop: zIndex, surface: zIndex }),
+    [zIndex],
+  );
+  return (
+    <OverlayRootView layer={layer} style={style} testID={testID}>
+      {children}
+    </OverlayRootView>
+  );
+}
+
+function OverlayRootView({
+  children,
+  style,
+  testID,
+  layer,
+}: Omit<OverlayRootProps, 'zIndex'> & { layer: OverlayLayer }) {
+  return (
+    <OverlayLayerContext.Provider value={layer}>
+      <View
+        pointerEvents="box-none"
+        style={[styles.root, { zIndex: layer.root }, style]}
+        testID={testID}
+      >
+        {children}
+      </View>
+    </OverlayLayerContext.Provider>
   );
 }
 
@@ -112,7 +204,10 @@ export interface BackdropProps {
   /** Dim opacity, 0–1. */
   dimOpacity?: number;
   /**
-   * Geometry for the press target: insets, z-index, layout. NOT opacity —
+   * Geometry for the press target: insets, layout. NOT a z-index — where this
+   * surface sits relative to others is `OverlayRoot`'s call (see `./stack.ts`),
+   * and within the surface the panel is simply rendered after this. NOT opacity
+   * either —
    * `backdrop-filter` samples nothing under an ancestor with `opacity < 1`
    * (the group composites in isolation), so a fade applied here silently kills
    * the blur. An `opacity` found in this style is redirected onto the layers;
@@ -124,16 +219,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 +282,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>
   );
 });
 
@@ -224,3 +335,13 @@ const styles = StyleSheet.create({
     bottom: 0,
   },
 });
+
+export {
+  layerForRank,
+  OVERLAY_STACK_BAND,
+  OVERLAY_STACK_BASE,
+  OVERLAY_STACK_MAX_RANK,
+  TOAST_LAYER_Z,
+  type OverlayLayer,
+} from './stack';
+export { useOverlayLayer } from './use-overlay-layer';