@oxyhq/bloom 0.46.0 → 0.48.0

package/src/dialog/Dialog.tsx

@@ -30,6 +30,14 @@ 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,6 +111,8 @@ function CenteredOrSideDialog({
   title,
   description,
   actions,
+  header,
+  scrollable,
   placement,
   layer,
   width = DEFAULT_SIDE_WIDTH,
@@ -119,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).
@@ -235,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}>
@@ -253,6 +283,9 @@ function CenteredOrSideDialog({
           description={description}
           titleId={titleId}
           descriptionId={descriptionId}
+          header={header}
+          headerController={headerController}
+          onHeaderDismiss={close}
           panelStyle={panelStyle}
           panelClassName={panelClassName}
           containerStyle={containerStyle}
@@ -271,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}
@@ -288,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>
@@ -324,6 +372,9 @@ function SideSheet({
   description,
   titleId,
   descriptionId,
+  header,
+  headerController,
+  onHeaderDismiss,
   panelStyle,
   panelClassName,
   containerStyle,
@@ -345,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>;
@@ -476,7 +530,23 @@ 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>
   );

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,
@@ -125,11 +133,13 @@ export function Dialog({ placement, ...rest }: DialogProps) {
 function CenterOrSideDialog({
   control,
   open: controlledOpen,
+  startOpen,
   onClose,
   testID,
   title,
   description,
   actions,
+  header,
   placement,
   layer,
   width = DEFAULT_SIDE_WIDTH,
@@ -137,6 +147,8 @@ function CenterOrSideDialog({
   inset,
   dismissOnBackdrop = true,
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
+  maxHeightRatio,
+  scrollable,
   style,
   panelStyle,
   panelClassName,
@@ -160,7 +172,13 @@ function CenterOrSideDialog({
   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.
@@ -299,9 +317,12 @@ 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}
               >
@@ -325,6 +346,8 @@ function CenterOrSideDialog({
             title={title}
             description={description}
             actions={actions}
+            header={header}
+            scrollable={scrollable}
             placement={resolvedPlacement}
             shown={!isClosing}
             width={width}
@@ -354,9 +377,12 @@ function DialogPanel({
   title,
   description,
   actions,
+  header,
   style,
   maxWidth,
   contentPadding,
+  maxHeightRatio,
+  scrollable,
   surfaceZIndex,
   isClosing,
   children,
@@ -366,16 +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
@@ -393,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)',
@@ -400,7 +450,6 @@ function DialogPanel({
           shadowOpacity: theme.isDark ? 0.4 : 0.1,
           shadowRadius: 30,
           shadowOffset: { width: 0, height: 4 },
-          padding: contentPadding,
           zIndex: surfaceZIndex,
         },
         isClosing
@@ -409,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>
   );
 }
@@ -439,6 +529,8 @@ function SheetSurface({
   title,
   description,
   actions,
+  header,
+  scrollable,
   placement,
   shown,
   width,
@@ -460,6 +552,8 @@ function SheetSurface({
   title?: string;
   description?: string;
   actions?: DialogAction[];
+  header?: DialogProps['header'];
+  scrollable?: boolean;
   placement: 'left' | 'right';
   shown: boolean;
   width: number;
@@ -479,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
@@ -588,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>
   );

package/src/dialog/DialogBottomSheet.tsx

@@ -12,6 +12,13 @@ import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
 import { DialogBody } from './DialogContent';
+import {
+  DIALOG_NAV_BAR_HEIGHT,
+  DialogHeaderProvider,
+  DialogLargeTitle,
+  DialogNavHeader,
+  useDialogHeaderController,
+} from './DialogHeader';
 import {
   DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
@@ -43,15 +50,18 @@ import type { DialogControlProps, DialogProps } from './types';
 export function DialogBottomSheet({
   control,
   open: controlledOpen,
+  startOpen,
   onClose,
   testID,
   title,
   description,
   actions,
+  header,
   maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
   showHandle = true,
   dismissOnBackdrop = true,
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
+  scrollable,
   style,
   panelStyle,
   panelClassName,
@@ -66,6 +76,7 @@ export function DialogBottomSheet({
   const closeCallbacks = useRef<(() => void)[]>([]);
   const titleId = useId();
   const descriptionId = useId();
+  const headerController = useDialogHeaderController();
 
   // Read the latest controlled flag / `onClose` inside stable callbacks without
   // re-binding them (the context + imperative handle depend on `close` staying
@@ -161,41 +172,95 @@ export function DialogBottomSheet({
   }, [theme.colors.background, maxHeightRatio, panelStyle]);
 
   // Does this dialog render bloom's declarative chrome (title / description /
-  // actions), or is it pure custom `children`? Pure custom children own their
-  // own layout and scrolling, so we render them through a NON-scrollable
-  // BottomSheet body — otherwise the sheet's internal ScrollView would wrap a
-  // child that already contains its own scroller, producing a scroll-in-scroll
-  // (double scroll container). Declarative dialogs are short and keep the
-  // sheet's default scrollable body so they degrade gracefully on small
-  // viewports. This only changes what `DialogBottomSheet` passes to
-  // `BottomSheet`; the standalone `BottomSheet` API and its `scrollable` default
-  // are unchanged for direct consumers.
+  // actions)? This no longer gates the SCROLL decision (that is now the explicit
+  // `scrollable` prop below) — it only opts declarative dialogs into the
+  // gorhom-style pan coordination for their internal ScrollView. A declarative
+  // dialog overflowing on a small viewport needs the coordinated pan so the body
+  // scrolls instead of the drag stealing every vertical gesture; pure-custom
+  // children keep the legacy always-active pan.
   const hasDeclarativeChrome =
     title !== undefined ||
     description !== undefined ||
     (actions !== undefined && actions.length > 0);
 
+  const scrollableResolved = scrollable ?? true;
+
+  const dialogBody = (
+    <DialogBody
+      titleId={titleId}
+      descriptionId={descriptionId}
+      title={title}
+      description={description}
+      actions={actions}
+    >
+      {children}
+    </DialogBody>
+  );
+
+  // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large
+  // collapsing title over the sheet's OWN scroll content. The bar floats via the
+  // BottomSheet `headerOverlay` slot; the sheet's scroll offset feeds the shared
+  // controller (`scrollY`) that drives the small-title cross-fade. `contentPadding`
+  // is dropped (the large title + screens own their padding).
+  const headerBody = header ? (
+    scrollableResolved ? (
+      <>
+        <DialogLargeTitle controller={headerController} header={header} />
+        <DialogHeaderProvider controller={headerController}>{dialogBody}</DialogHeaderProvider>
+      </>
+    ) : (
+      <>
+        <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
+        <DialogHeaderProvider controller={headerController}>{dialogBody}</DialogHeaderProvider>
+      </>
+    )
+  ) : null;
+
   return (
     <BottomSheet
       ref={ref}
+      // Seed the sheet's open state so a fresh mount that should be open renders
+      // visible on its FIRST commit instead of relying on a present()-in-effect
+      // that races the mount and flashes blank. In controlled mode that seed is
+      // `controlledOpen`; in imperative mode it is the surface's `startOpen`
+      // intent — which is what lets a responsive Dialog survive a resize
+      // placement swap (centered card → bottom sheet) STILL OPEN.
+      open={isControlled ? controlledOpen : startOpen}
       onDismiss={handleDismiss}
       onDismissAttempt={onDismissAttempt}
       enablePanDownToClose
-      showHandle={showHandle}
-      // Pure custom children own scrolling → opt OUT of BottomSheet's internal
-      // ScrollView so there is exactly ONE scroll container (no scroll-in-scroll).
-      scrollable={hasDeclarativeChrome}
-      // Declarative dialogs (title/description/actions) that overflow render a
-      // tall body inside BottomSheet's internal ScrollView. Opt those sheets into
+      // Nav-header mode hides the drag handle (the nav bar sits at the very top);
+      // drag-to-dismiss still works via the coordinated body pan.
+      showHandle={header ? false : showHandle}
+      // Content scrolls inside the sheet's internal ScrollView by default; the
+      // Dialog owns the scroll boundary. A surface whose content owns its own
+      // scroller (a FlatList / VirtualizedList) passes `scrollable={false}` to
+      // opt OUT so there is exactly ONE scroll container (no scroll-in-scroll,
+      // no "VirtualizedList inside a plain ScrollView" warning).
+      scrollable={scrollableResolved}
+      // Declarative dialogs (title/description/actions) that overflow — AND every
+      // nav-header page (its scroll content overflows by design) — need
       // gorhom-style pan coordination: the drag-to-dismiss pan only activates
       // when the ScrollView is at the top AND the finger moves down >8dp —
       // otherwise the ScrollView owns the touch. Without this the always-active
       // legacy body-pan steals vertical drags and a tall body cannot scroll
       // (dragging up dismisses the sheet / bleeds into the parent instead). The
       // standalone `BottomSheet` API keeps its legacy `manualActivation={false}`
-      // default, so direct consumers are unaffected. Gated on the same flag as
-      // `scrollable` because only the internal-ScrollView path needs it.
-      manualActivation={hasDeclarativeChrome}
+      // default, so direct consumers are unaffected.
+      manualActivation={header ? scrollableResolved : hasDeclarativeChrome}
+      // Feed the sheet's scroll offset into the nav header's collapse controller.
+      scrollY={header ? headerController.scrollY : undefined}
+      // Float the sticky nav bar over the scroll body (clipped to the sheet top).
+      headerOverlay={
+        header ? (
+          <DialogNavHeader
+            controller={headerController}
+            header={header}
+            onDismiss={close}
+            collapse={scrollableResolved}
+          />
+        ) : undefined
+      }
       // Stronger dim than a lone sheet so an underlying sheet's handle/content
       // doesn't bleed through when a Dialog is stacked over one.
       backdropOpacity={SHEET_BACKDROP_OPACITY + 0.3}
@@ -210,7 +275,9 @@ export function DialogBottomSheet({
           {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
           {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
           style={[
-            { padding: contentPadding },
+            // Nav-header mode: the large title + screens own their padding, so the
+            // wrapper adds none. Otherwise the Dialog's uniform content padding.
+            header ? null : { padding: contentPadding },
             // `containerStyle` carries the host's CSS-var theme scope; it wraps
             // the content subtree so descendants read the scoped palette.
             containerStyle,
@@ -218,15 +285,7 @@ export function DialogBottomSheet({
             panelStyle,
           ]}
         >
-          <DialogBody
-            titleId={titleId}
-            descriptionId={descriptionId}
-            title={title}
-            description={description}
-            actions={actions}
-          >
-            {children}
-          </DialogBody>
+          {header ? headerBody : dialogBody}
         </View>
       </Context.Provider>
     </BottomSheet>
@@ -242,15 +301,18 @@ export type DialogBottomSheetProps = Pick<
   DialogProps,
   | 'control'
   | 'open'
+  | 'startOpen'
   | 'onClose'
   | 'testID'
   | 'title'
   | 'description'
   | 'actions'
+  | 'header'
   | 'maxHeightRatio'
   | 'showHandle'
   | 'dismissOnBackdrop'
   | 'contentPadding'
+  | 'scrollable'
   | 'style'
   | 'panelStyle'
   | 'panelClassName'