@oxyhq/bloom 0.46.0 → 0.49.0

package/src/combobox/Combobox.tsx

@@ -12,7 +12,7 @@ import { useTheme } from '../theme/use-theme';
 import { useControllableState } from '../hooks/useControllableState';
 import { Text } from '../typography';
 import { Item } from '../item';
-import { SearchInput } from '../search-input';
+import { Search } from '../search';
 import { borderRadius, fontSize, space } from '../styles/tokens';
 import {
   ChevronTopBottom_Stroke2_Corner0_Rounded as ChevronUpDownIcon,
@@ -55,7 +55,7 @@ function defaultFilter<T>(option: ComboboxOption<T>, query: string): boolean {
  * `.web` resolution. The combobox logic is single-source.
  *
  * `Combobox` is a filterable autocomplete select that delegates its overlay to
- * Bloom's `Popover` and composes `SearchInput` + `Item`. The trigger + panel
+ * Bloom's `Popover` and composes `Search` + `Item`. The trigger + panel
  * read the overlay control from `Popover` context (via an inner component) so
  * selecting an option reliably closes the overlay on every platform.
  */
@@ -153,7 +153,7 @@ export function createCombobox(PopoverImpl: PopoverModule) {
 
         <PopoverImpl.PopoverContent label={accessibleLabel} placement="bottom-start" minWidth={240}>
           <View style={styles.searchWrap}>
-            <SearchInput
+            <Search
               ref={searchRef}
               label={label ?? 'Search'}
               value={query}

package/src/command/Command.tsx

@@ -12,7 +12,7 @@ import { useControllableState } from '../hooks/useControllableState';
 import { Text } from '../typography';
 import { Item } from '../item';
 import { Kbd } from '../kbd';
-import { SearchInput } from '../search-input';
+import { Search } from '../search';
 import { fontSize, space } from '../styles/tokens';
 import type { DialogProps } from '../dialog';
 import { useDialogControl } from '../dialog/context';
@@ -46,7 +46,7 @@ interface FlatEntry {
  * relies on implicit `.web` resolution. The body is single-source.
  *
  * `Command` is a ⌘K command palette built on `<Dialog placement="center">`,
- * `SearchInput`, an `Item` results list and `Kbd` shortcut hints. Items group
+ * `Search`, an `Item` results list and `Kbd` shortcut hints. Items group
  * by their `group` field (ungrouped first). On web the list is
  * keyboard-navigable (Up/Down/Enter); on native, tap to select.
  *
@@ -231,7 +231,7 @@ export function createCommand(Dialog: DialogComponent) {
       testID={testID}>
       <View {...webKeyHandler}>
         <View style={[styles.searchWrap, { borderBottomColor: theme.colors.borderLight }]}>
-          <SearchInput
+          <Search
             ref={searchRef}
             label={placeholder}
             placeholder={placeholder}

package/src/dialog/Dialog.tsx

@@ -30,6 +30,15 @@ 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 { DialogMorphContent, useDialogMorph } from './DialogMorph';
 import {
   ANIMATION_DURATION,
   DEFAULT_DIALOG_CONTENT_PADDING,
@@ -103,6 +112,9 @@ function CenteredOrSideDialog({
   title,
   description,
   actions,
+  header,
+  scrollable,
+  morph,
   placement,
   layer,
   width = DEFAULT_SIDE_WIDTH,
@@ -119,6 +131,21 @@ 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;
+  const { height: viewportHeight } = useWindowDimensions();
+
+  // Size morphing across an in-place content swap. The detached centered card
+  // is content-hugging, so animating its height reshapes it about its own
+  // centre; the side placements are anchored top-to-bottom at a fixed width and
+  // have no size to morph, so they never pin (`measurable: false`). The card's
+  // own `maxHeight` (inside `BottomSheet`) does the exact capping — the viewport
+  // is just the bound the reshape may not exceed.
+  const morphState = useDialogMorph({
+    enabled: morph !== false && !isSide,
+    measurable: scrollableResolved && !isSide,
+    maxHeight: viewportHeight,
+  });
 
   // Imperative open state for the side placement (the BottomSheet path owns its
   // own visibility via its ref instead).
@@ -211,16 +238,21 @@ function CenteredOrSideDialog({
     [close],
   );
 
-  const sheetStyle = useMemo(
-    () => ({
-      maxWidth: 500,
-      backgroundColor: theme.colors.background,
-      // All four corners rounded — bloom's BottomSheet defaults to top-only
-      // radius in flush mode, but we use `detached` so the whole card is
-      // floating and rounded uniformly.
-      borderRadius: 20,
-    }),
-    [theme.colors.background],
+  const sheetStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [
+      {
+        maxWidth: 500,
+        backgroundColor: theme.colors.background,
+        // All four corners rounded — bloom's BottomSheet defaults to top-only
+        // radius in flush mode, but we use `detached` so the whole card is
+        // floating and rounded uniformly.
+        borderRadius: 20,
+      },
+      // Drives the card's `height` only while a morph is in flight; at rest it
+      // resolves to `height: 'auto'` — the card's normal content sizing.
+      morphState.panelStyle,
+    ],
+    [theme.colors.background, morphState.panelStyle],
   );
 
   const bodyNode = (
@@ -235,6 +267,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 +303,9 @@ function CenteredOrSideDialog({
           description={description}
           titleId={titleId}
           descriptionId={descriptionId}
+          header={header}
+          headerController={headerController}
+          onHeaderDismiss={close}
           panelStyle={panelStyle}
           panelClassName={panelClassName}
           containerStyle={containerStyle}
@@ -271,10 +324,26 @@ 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}
+      // Measures the floating card — the size a morph starts from.
+      onLayout={morphState.onPanelLayout}
       style={sheetStyle}
     >
       <Context.Provider value={context}>
@@ -288,13 +357,19 @@ 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}
+          {/* The morph layer is its own node INSIDE the class-name'd container:
+              a className'd component's `onLayout` never fires on web, and this
+              one has to measure the incoming frame. */}
+          <DialogMorphContent morph={morphState}>
+            {header ? headerBody : bodyNode}
+          </DialogMorphContent>
         </View>
       </Context.Provider>
     </BottomSheet>
@@ -324,6 +399,9 @@ function SideSheet({
   description,
   titleId,
   descriptionId,
+  header,
+  headerController,
+  onHeaderDismiss,
   panelStyle,
   panelClassName,
   containerStyle,
@@ -345,6 +423,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 +557,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,24 +10,35 @@ import React, {
 } from 'react';
 import {
   Pressable,
+  ScrollView,
   useWindowDimensions,
   View,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
+import Animated from 'react-native-reanimated';
 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 { DialogMorphContent, useDialogMorph } from './DialogMorph';
 import {
   ANIMATION_DURATION,
   CENTER_FADE_OUT_DURATION,
   DEFAULT_CENTER_MAX_WIDTH,
   DEFAULT_DIALOG_CONTENT_PADDING,
+  DEFAULT_MAX_HEIGHT_RATIO,
   DEFAULT_SIDE_WIDTH,
   DIALOG_SHEET_BACKDROP_TESTID,
   EASE_OUT,
@@ -125,11 +136,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 +150,9 @@ function CenterOrSideDialog({
   inset,
   dismissOnBackdrop = true,
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
+  maxHeightRatio,
+  scrollable,
+  morph,
   style,
   panelStyle,
   panelClassName,
@@ -160,7 +176,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 +321,13 @@ function CenterOrSideDialog({
                 title={title}
                 description={description}
                 actions={actions}
+                header={header}
                 style={style}
                 maxWidth={maxWidth}
                 contentPadding={contentPadding}
+                maxHeightRatio={maxHeightRatio}
+                scrollable={scrollable}
+                morph={morph}
                 surfaceZIndex={dialogZIndex.surface}
                 isClosing={isClosing}
               >
@@ -325,6 +351,8 @@ function CenterOrSideDialog({
             title={title}
             description={description}
             actions={actions}
+            header={header}
+            scrollable={scrollable}
             placement={resolvedPlacement}
             shown={!isClosing}
             width={width}
@@ -354,9 +382,13 @@ function DialogPanel({
   title,
   description,
   actions,
+  header,
   style,
   maxWidth,
   contentPadding,
+  maxHeightRatio,
+  scrollable,
+  morph,
   surfaceZIndex,
   isClosing,
   children,
@@ -366,24 +398,56 @@ function DialogPanel({
   title?: string;
   description?: string;
   actions?: DialogAction[];
+  header?: DialogProps['header'];
   style?: DialogProps['style'];
   maxWidth: number;
   contentPadding: number;
+  maxHeightRatio?: number;
+  scrollable?: boolean;
+  morph?: boolean;
   surfaceZIndex: number;
   isClosing: boolean;
   children?: React.ReactNode;
 }) {
   const theme = useTheme();
+  const { close } = useDialogContext();
   const titleId = useId();
   const descriptionId = useId();
+  const headerController = useDialogHeaderController();
+  const { height: viewportHeight } = useWindowDimensions();
+  const heightRatio = maxHeightRatio ?? DEFAULT_MAX_HEIGHT_RATIO;
+
+  // Size morphing across an in-place content swap. The centered card is the one
+  // placement whose width can vary too, so `maxWidth` is handed over as well.
+  // The card's own `maxHeight` (the ratio percentage below) does the exact
+  // capping — the viewport is just the bound the reshape may not exceed.
+  const morphState = useDialogMorph({
+    enabled: morph !== false,
+    measurable: scrollable !== false,
+    maxHeight: viewportHeight,
+    maxWidth,
+  });
+
+  const body = (
+    <DialogBody
+      titleId={titleId}
+      descriptionId={descriptionId}
+      title={title}
+      description={description}
+      actions={actions}
+    >
+      {children}
+    </DialogBody>
+  );
 
   return (
-    <View
+    <Animated.View
       role="dialog"
       aria-label={label}
       aria-labelledby={title ? titleId : undefined}
       aria-describedby={description ? descriptionId : undefined}
       testID={testID}
+      onLayout={morphState.onPanelLayout}
       onStartShouldSetResponder={() => true}
       onResponderRelease={stopPropagation}
       {...({ onClick: stopPropagation } as Record<string, unknown>)}
@@ -393,6 +457,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(heightRatio * 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,25 +471,74 @@ function DialogPanel({
           shadowOpacity: theme.isDark ? 0.4 : 0.1,
           shadowRadius: 30,
           shadowOffset: { width: 0, height: 4 },
-          padding: contentPadding,
           zIndex: surfaceZIndex,
         },
         isClosing
           ? ({ animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
           : ({ animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s' } as ViewStyle),
+        // Drives `height` (and `maxWidth`) only while a morph is in flight; at
+        // rest it resolves to `height: 'auto'` — the natural sizing above. Placed
+        // before `style` so a consumer's explicit size still wins.
+        morphState.panelStyle,
         style,
       ]}
     >
-      <DialogBody
-        titleId={titleId}
-        descriptionId={descriptionId}
-        title={title}
-        description={description}
-        actions={actions}
-      >
-        {children}
-      </DialogBody>
-    </View>
+      {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 ? (
+            <DialogMorphContent morph={morphState} style={{ flex: 1, minHeight: 0 }}>
+              <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
+              <DialogHeaderProvider controller={headerController}>{body}</DialogHeaderProvider>
+            </DialogMorphContent>
+          ) : (
+            <ScrollView
+              style={{ flexShrink: 1 }}
+              contentContainerStyle={{ paddingBottom: contentPadding }}
+              showsVerticalScrollIndicator={false}
+              scrollEventThrottle={16}
+              onScroll={(e) => {
+                headerController.scrollY.value = e.nativeEvent.contentOffset.y;
+              }}
+            >
+              <DialogMorphContent morph={morphState}>
+                <DialogLargeTitle controller={headerController} header={header} />
+                <DialogHeaderProvider controller={headerController}>{body}</DialogHeaderProvider>
+              </DialogMorphContent>
+            </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.
+        <DialogMorphContent
+          morph={morphState}
+          style={{ flex: 1, minHeight: 0, padding: contentPadding }}
+        >
+          {body}
+        </DialogMorphContent>
+      ) : (
+        <ScrollView
+          style={{ flexShrink: 1 }}
+          contentContainerStyle={{ padding: contentPadding }}
+          showsVerticalScrollIndicator={false}
+        >
+          <DialogMorphContent morph={morphState}>{body}</DialogMorphContent>
+        </ScrollView>
+      )}
+    </Animated.View>
   );
 }
 
@@ -439,6 +559,8 @@ function SheetSurface({
   title,
   description,
   actions,
+  header,
+  scrollable,
   placement,
   shown,
   width,
@@ -460,6 +582,8 @@ function SheetSurface({
   title?: string;
   description?: string;
   actions?: DialogAction[];
+  header?: DialogProps['header'];
+  scrollable?: boolean;
   placement: 'left' | 'right';
   shown: boolean;
   width: number;
@@ -479,6 +603,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 +713,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>
   );