@oxyhq/bloom 0.45.0 → 0.48.0

package/src/dialog/Dialog.tsx

@@ -25,11 +25,19 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
-import { Z_INDEX } from '../styles/z-index';
+import { Z_INDEX, Z_INDEX_LAYER_STEP } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogControl } from './context';
 import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
+import {
+  DIALOG_NAV_BAR_HEIGHT,
+  type DialogHeaderController,
+  DialogHeaderProvider,
+  DialogLargeTitle,
+  DialogNavHeader,
+  useDialogHeaderController,
+} from './DialogHeader';
 import {
   ANIMATION_DURATION,
   DEFAULT_DIALOG_CONTENT_PADDING,
@@ -103,7 +111,10 @@ function CenteredOrSideDialog({
   title,
   description,
   actions,
+  header,
+  scrollable,
   placement,
+  layer,
   width = DEFAULT_SIDE_WIDTH,
   inset,
   dismissOnBackdrop = true,
@@ -118,6 +129,8 @@ function CenteredOrSideDialog({
 }: Omit<DialogProps, 'placement'> & { placement: 'center' | 'left' | 'right' }) {
   const isControlled = controlledOpen !== undefined;
   const isSide = placement === 'left' || placement === 'right';
+  const headerController = useDialogHeaderController();
+  const scrollableResolved = scrollable ?? true;
 
   // Imperative open state for the side placement (the BottomSheet path owns its
   // own visibility via its ref instead).
@@ -234,6 +247,24 @@ function CenteredOrSideDialog({
     </DialogBody>
   );
 
+  // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large
+  // collapsing title over its own scroll content. The large title + screen body
+  // scroll under the bar, feeding the shared collapse controller. `contentPadding`
+  // is dropped (the large title + screens own their padding).
+  const headerBody = header ? (
+    scrollableResolved ? (
+      <>
+        <DialogLargeTitle controller={headerController} header={header} />
+        <DialogHeaderProvider controller={headerController}>{bodyNode}</DialogHeaderProvider>
+      </>
+    ) : (
+      <>
+        <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
+        <DialogHeaderProvider controller={headerController}>{bodyNode}</DialogHeaderProvider>
+      </>
+    )
+  ) : null;
+
   if (isSide) {
     return (
       <Context.Provider value={context}>
@@ -241,6 +272,7 @@ function CenteredOrSideDialog({
           open={sideOpen}
           onDismiss={handleDismiss}
           side={placement}
+          layer={layer}
           width={width}
           inset={inset}
           dismissOnBackdrop={dismissOnBackdrop}
@@ -251,6 +283,9 @@ function CenteredOrSideDialog({
           description={description}
           titleId={titleId}
           descriptionId={descriptionId}
+          header={header}
+          headerController={headerController}
+          onHeaderDismiss={close}
           panelStyle={panelStyle}
           panelClassName={panelClassName}
           containerStyle={containerStyle}
@@ -269,7 +304,21 @@ function CenteredOrSideDialog({
       onDismiss={handleDismiss}
       enablePanDownToClose
       detached
-      showHandle
+      // Nav-header mode hides the drag handle (the nav bar sits at the very top)
+      // and coordinates the body pan with the scroll so content scrolls.
+      showHandle={!header}
+      manualActivation={!!header}
+      scrollY={header ? headerController.scrollY : undefined}
+      headerOverlay={
+        header ? (
+          <DialogNavHeader
+            controller={headerController}
+            header={header}
+            onDismiss={close}
+            collapse={scrollableResolved}
+          />
+        ) : undefined
+      }
       // Stronger dim when a Dialog is stacked over another sheet so the
       // underlying sheet's handle/content doesn't bleed through.
       backdropOpacity={0.7}
@@ -286,13 +335,14 @@ function CenteredOrSideDialog({
             // Detached BottomSheet already adds `marginBottom: insets.bottom + 16`
             // to the sheet container — the floating card sits ABOVE the
             // system gesture bar, so we don't add `insets.bottom` here.
-            { padding: contentPadding },
+            // Nav-header mode: the large title + screens own their padding.
+            header ? null : { padding: contentPadding },
             { backgroundColor: theme.colors.background },
             style,
             panelStyle,
           ]}
         >
-          {bodyNode}
+          {header ? headerBody : bodyNode}
         </View>
       </Context.Provider>
     </BottomSheet>
@@ -311,6 +361,7 @@ function SideSheet({
   open,
   onDismiss,
   side,
+  layer,
   width,
   inset,
   dismissOnBackdrop,
@@ -321,6 +372,9 @@ function SideSheet({
   description,
   titleId,
   descriptionId,
+  header,
+  headerController,
+  onHeaderDismiss,
   panelStyle,
   panelClassName,
   containerStyle,
@@ -331,6 +385,7 @@ function SideSheet({
   open: boolean;
   onDismiss: () => void;
   side: 'left' | 'right';
+  layer?: number;
   width: number;
   inset?: DialogInset;
   dismissOnBackdrop: boolean;
@@ -341,6 +396,9 @@ function SideSheet({
   description?: string;
   titleId: string;
   descriptionId: string;
+  header?: DialogProps['header'];
+  headerController: DialogHeaderController;
+  onHeaderDismiss: () => void;
   panelStyle?: StyleProp<ViewStyle>;
   panelClassName?: string;
   containerStyle?: StyleProp<ViewStyle>;
@@ -433,7 +491,13 @@ function SideSheet({
 
   return (
     <View
-      style={[sideStyles.root, containerStyle]}
+      style={[
+        sideStyles.root,
+        // Per-layer offset so a side dialog stacked on top of another (surface
+        // stack) paints above it. Layer 0 → offset 0 → unchanged.
+        { zIndex: Z_INDEX.fullscreen + Z_INDEX_LAYER_STEP * (layer ?? 0) },
+        containerStyle,
+      ]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
       pointerEvents="box-none"
     >
@@ -466,16 +530,33 @@ function SideSheet({
         ]}
         pointerEvents="auto"
       >
-        <View style={{ padding: contentPadding }}>{children}</View>
+        {header ? (
+          // Nav-header mode on a side drawer: a static titled bar (the drawer body
+          // has no Dialog scroll offset to drive a collapse) over content inset
+          // below the bar.
+          <View style={{ flex: 1, minHeight: 0 }}>
+            <DialogNavHeader
+              controller={headerController}
+              header={header}
+              onDismiss={onHeaderDismiss}
+              collapse={false}
+            />
+            <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
+            <DialogHeaderProvider controller={headerController}>{children}</DialogHeaderProvider>
+          </View>
+        ) : (
+          <View style={{ padding: contentPadding }}>{children}</View>
+        )}
       </Animated.View>
     </View>
   );
 }
 
 const sideStyles = StyleSheet.create({
+  // `zIndex` is applied inline (`Z_INDEX.fullscreen + layer offset`) so a side
+  // dialog stacked on top of another paints above it in the surface stack.
   root: {
     ...StyleSheet.absoluteFill,
-    zIndex: Z_INDEX.fullscreen,
   },
   backdrop: {
     ...StyleSheet.absoluteFill,

package/src/dialog/Dialog.web.tsx

@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import {
   Pressable,
+  ScrollView,
   useWindowDimensions,
   View,
   type StyleProp,
@@ -20,9 +21,16 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
-import { Context, useDialogControl } from './context';
+import { Context, useDialogContext, useDialogControl } from './context';
 import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
+import {
+  DIALOG_NAV_BAR_HEIGHT,
+  DialogHeaderProvider,
+  DialogLargeTitle,
+  DialogNavHeader,
+  useDialogHeaderController,
+} from './DialogHeader';
 import {
   ANIMATION_DURATION,
   CENTER_FADE_OUT_DURATION,
@@ -44,7 +52,6 @@ import type {
 } from './types';
 
 const FADE_OUT_DURATION = CENTER_FADE_OUT_DURATION;
-const dialogZIndex = createOverlayZIndex();
 
 const stopPropagation = (e: { stopPropagation: () => void }) => e.stopPropagation();
 
@@ -126,17 +133,22 @@ export function Dialog({ placement, ...rest }: DialogProps) {
 function CenterOrSideDialog({
   control,
   open: controlledOpen,
+  startOpen,
   onClose,
   testID,
   title,
   description,
   actions,
+  header,
   placement,
+  layer,
   width = DEFAULT_SIDE_WIDTH,
   maxWidth = DEFAULT_CENTER_MAX_WIDTH,
   inset,
   dismissOnBackdrop = true,
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
+  maxHeightRatio,
+  scrollable,
   style,
   panelStyle,
   panelClassName,
@@ -150,12 +162,23 @@ function CenterOrSideDialog({
   // stylesheet is present by the time the animated surface mounts).
   useDialogCss();
 
+  // Per-layer overlay z-indices, so a dialog presented on top of another (via
+  // the surface stack) paints above it. Defaults to layer 0 — the offset is 0,
+  // so a lone dialog's z is byte-for-byte unchanged.
+  const dialogZIndex = useMemo(() => createOverlayZIndex(layer ?? 0), [layer]);
+
   // 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 = placement;
 
-  const [isOpen, setIsOpen] = useState(false);
+  // Seed the initial visible state so a branch that mounts while the surface is
+  // already open (the imperative `startOpen` intent) or under a truthy
+  // controlled `open` renders open on its FIRST commit — this is what lets a
+  // responsive Dialog survive a placement swap (centered card ↔ bottom sheet on
+  // resize) without going blank. `startOpen` never flips the close semantics;
+  // the imperative `control.close()` still drives the exit + post-exit onClose.
+  const [isOpen, setIsOpen] = useState(() => controlledOpen ?? startOpen ?? false);
   const [isClosing, setIsClosing] = useState(false);
   const closeCallbacksRef = useRef<(() => void)[]>([]);
   // Read the latest controlled flag inside stable callbacks without re-binding.
@@ -294,9 +317,13 @@ function CenterOrSideDialog({
                 title={title}
                 description={description}
                 actions={actions}
+                header={header}
                 style={style}
                 maxWidth={maxWidth}
                 contentPadding={contentPadding}
+                maxHeightRatio={maxHeightRatio}
+                scrollable={scrollable}
+                surfaceZIndex={dialogZIndex.surface}
                 isClosing={isClosing}
               >
                 {children}
@@ -319,12 +346,16 @@ function CenterOrSideDialog({
             title={title}
             description={description}
             actions={actions}
+            header={header}
+            scrollable={scrollable}
             placement={resolvedPlacement}
             shown={!isClosing}
             width={width}
             inset={inset}
             dismissOnBackdrop={dismissOnBackdrop}
             contentPadding={contentPadding}
+            backdropZIndex={dialogZIndex.backdrop}
+            surfaceZIndex={dialogZIndex.surface}
             onDismiss={close}
             panelStyle={panelStyle}
             panelClassName={panelClassName}
@@ -346,9 +377,13 @@ function DialogPanel({
   title,
   description,
   actions,
+  header,
   style,
   maxWidth,
   contentPadding,
+  maxHeightRatio,
+  scrollable,
+  surfaceZIndex,
   isClosing,
   children,
 }: {
@@ -357,15 +392,33 @@ function DialogPanel({
   title?: string;
   description?: string;
   actions?: DialogAction[];
+  header?: DialogProps['header'];
   style?: DialogProps['style'];
   maxWidth: number;
   contentPadding: number;
+  maxHeightRatio?: number;
+  scrollable?: boolean;
+  surfaceZIndex: number;
   isClosing: boolean;
   children?: React.ReactNode;
 }) {
   const theme = useTheme();
+  const { close } = useDialogContext();
   const titleId = useId();
   const descriptionId = useId();
+  const headerController = useDialogHeaderController();
+
+  const body = (
+    <DialogBody
+      titleId={titleId}
+      descriptionId={descriptionId}
+      title={title}
+      description={description}
+      actions={actions}
+    >
+      {children}
+    </DialogBody>
+  );
 
   return (
     <View
@@ -383,6 +436,13 @@ function DialogPanel({
           borderRadius: 20,
           width: '100%',
           maxWidth,
+          // The Dialog OWNS the size cap + scroll boundary (its content renders
+          // bare, edge-to-edge). Short content stays natural; tall content is
+          // capped at `maxHeightRatio` of the viewport and scrolls inside the
+          // rounded card (via the ScrollView below) — consumers never add their
+          // own height cap / ScrollView. `overflow: hidden` clips to the radius.
+          maxHeight: `${Math.round((maxHeightRatio ?? 0.9) * 100)}%`,
+          overflow: 'hidden',
           backgroundColor: theme.colors.background,
           borderWidth: 1,
           borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
@@ -390,8 +450,7 @@ function DialogPanel({
           shadowOpacity: theme.isDark ? 0.4 : 0.1,
           shadowRadius: 30,
           shadowOffset: { width: 0, height: 4 },
-          padding: contentPadding,
-          zIndex: dialogZIndex.surface,
+          zIndex: surfaceZIndex,
         },
         isClosing
           ? ({ animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
@@ -399,15 +458,56 @@ function DialogPanel({
         style,
       ]}
     >
-      <DialogBody
-        titleId={titleId}
-        descriptionId={descriptionId}
-        title={title}
-        description={description}
-        actions={actions}
-      >
-        {children}
-      </DialogBody>
+      {header ? (
+        // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large
+        // collapsing title over its own scroll content (see `DialogHeader`). The
+        // bar overlays; the large title + screen body scroll under it, feeding
+        // the shared scroll offset that drives the small-title cross-fade.
+        <>
+          <DialogNavHeader
+            controller={headerController}
+            header={header}
+            onDismiss={close}
+            collapse={scrollable !== false}
+          />
+          {scrollable === false ? (
+            <View style={{ flex: 1, minHeight: 0 }}>
+              <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
+              <DialogHeaderProvider controller={headerController}>{body}</DialogHeaderProvider>
+            </View>
+          ) : (
+            <ScrollView
+              style={{ flexShrink: 1 }}
+              contentContainerStyle={{ paddingBottom: contentPadding }}
+              showsVerticalScrollIndicator={false}
+              scrollEventThrottle={16}
+              onScroll={(e) => {
+                headerController.scrollY.value = e.nativeEvent.contentOffset.y;
+              }}
+            >
+              <DialogLargeTitle controller={headerController} header={header} />
+              <DialogHeaderProvider controller={headerController}>{body}</DialogHeaderProvider>
+            </ScrollView>
+          )}
+        </>
+      ) : scrollable === false ? (
+        // The content owns its own scrolling (a FlatList / VirtualizedList or a
+        // nested ScrollView). Render it bare in a bounded flex box — the card's
+        // `maxHeight` + `overflow: hidden` cap it and `flex: 1` + `minHeight: 0`
+        // hand the child a bounded height to scroll into — with NO wrapping
+        // ScrollView, so a VirtualizedList never nests inside one.
+        <View style={{ flex: 1, minHeight: 0, padding: contentPadding }}>
+          {body}
+        </View>
+      ) : (
+        <ScrollView
+          style={{ flexShrink: 1 }}
+          contentContainerStyle={{ padding: contentPadding }}
+          showsVerticalScrollIndicator={false}
+        >
+          {body}
+        </ScrollView>
+      )}
     </View>
   );
 }
@@ -429,12 +529,16 @@ function SheetSurface({
   title,
   description,
   actions,
+  header,
+  scrollable,
   placement,
   shown,
   width,
   inset,
   dismissOnBackdrop,
   contentPadding,
+  backdropZIndex,
+  surfaceZIndex,
   onDismiss,
   panelStyle,
   panelClassName,
@@ -448,12 +552,16 @@ function SheetSurface({
   title?: string;
   description?: string;
   actions?: DialogAction[];
+  header?: DialogProps['header'];
+  scrollable?: boolean;
   placement: 'left' | 'right';
   shown: boolean;
   width: number;
   inset?: DialogInset;
   dismissOnBackdrop: boolean;
   contentPadding: number;
+  backdropZIndex: number;
+  surfaceZIndex: number;
   onDismiss: () => void;
   panelStyle?: StyleProp<ViewStyle>;
   panelClassName?: string;
@@ -465,6 +573,7 @@ function SheetSurface({
   const theme = useTheme();
   const titleId = useId();
   const descriptionId = useId();
+  const headerController = useDialogHeaderController();
   const { width: viewportWidth } = useWindowDimensions();
 
   // Defer the entry transition by a frame so the start state paints before the
@@ -532,7 +641,7 @@ function SheetSurface({
 
   return (
     <View
-      style={[sheetStyles.root, containerStyle]}
+      style={[sheetStyles.root, { zIndex: backdropZIndex }, containerStyle]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
       pointerEvents="box-none"
     >
@@ -562,7 +671,11 @@ function SheetSurface({
         {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
         style={[
           sheetStyles.panel,
-          { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow },
+          {
+            backgroundColor: theme.colors.background,
+            shadowColor: theme.colors.shadow,
+            zIndex: surfaceZIndex,
+          },
           panelGeometry,
           panelTransition,
           panelStyle,
@@ -570,17 +683,53 @@ function SheetSurface({
         ]}
         pointerEvents="auto"
       >
-        <View style={{ padding: contentPadding }}>
-          <DialogBody
-            titleId={titleId}
-            descriptionId={descriptionId}
-            title={title}
-            description={description}
-            actions={actions}
-          >
-            {children}
-          </DialogBody>
-        </View>
+        {header ? (
+          // Nav-header mode on a side drawer: a static titled bar (the drawer
+          // body does not own a Dialog scroll offset to drive a collapse) over
+          // the content, which is inset below the bar.
+          <View style={{ flex: 1, minHeight: 0 }}>
+            <DialogNavHeader
+              controller={headerController}
+              header={header}
+              onDismiss={onDismiss}
+              collapse={false}
+            />
+            <ScrollView
+              style={{ flexShrink: 1 }}
+              contentContainerStyle={{ paddingTop: DIALOG_NAV_BAR_HEIGHT, paddingBottom: contentPadding }}
+              showsVerticalScrollIndicator={false}
+              scrollEventThrottle={16}
+              scrollEnabled={scrollable !== false}
+              onScroll={(e) => {
+                headerController.scrollY.value = e.nativeEvent.contentOffset.y;
+              }}
+            >
+              <DialogHeaderProvider controller={headerController}>
+                <DialogBody
+                  titleId={titleId}
+                  descriptionId={descriptionId}
+                  title={title}
+                  description={description}
+                  actions={actions}
+                >
+                  {children}
+                </DialogBody>
+              </DialogHeaderProvider>
+            </ScrollView>
+          </View>
+        ) : (
+          <View style={{ padding: contentPadding }}>
+            <DialogBody
+              titleId={titleId}
+              descriptionId={descriptionId}
+              title={title}
+              description={description}
+              actions={actions}
+            >
+              {children}
+            </DialogBody>
+          </View>
+        )}
       </View>
     </View>
   );
@@ -659,13 +808,15 @@ export function AutoMountedDialog({
 }
 
 const sheetStyles = {
+  // `zIndex` for the root (backdrop) and panel (surface) is applied inline from
+  // the per-layer `createOverlayZIndex(layer)` in `SheetSurface`, so a side
+  // dialog stacked on top of another (surface stack) paints above it.
   root: {
     position: 'fixed' as 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: dialogZIndex.backdrop,
   } as ViewStyle,
   backdrop: {
     position: 'absolute',
@@ -681,7 +832,6 @@ const sheetStyles = {
     shadowOpacity: 0.18,
     shadowRadius: 24,
     shadowOffset: { width: 0, height: 8 },
-    zIndex: dialogZIndex.surface,
   } as ViewStyle,
 };