@oxyhq/bloom 0.48.0 → 0.49.1

package/src/dialog/DialogBottomSheet.tsx

@@ -6,7 +6,13 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { View, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { type AnimatedStyle } from 'react-native-reanimated';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
@@ -19,6 +25,7 @@ import {
   DialogNavHeader,
   useDialogHeaderController,
 } from './DialogHeader';
+import { DialogMorphContent, useDialogMorph } from './DialogMorph';
 import {
   DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
@@ -62,6 +69,7 @@ export function DialogBottomSheet({
   dismissOnBackdrop = true,
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
   scrollable,
+  morph,
   style,
   panelStyle,
   panelClassName,
@@ -72,6 +80,7 @@ export function DialogBottomSheet({
 }: DialogBottomSheetProps) {
   const isControlled = controlledOpen !== undefined;
   const theme = useTheme();
+  const { height: viewportHeight } = useWindowDimensions();
   const ref = useRef<BottomSheetRef>(null);
   const closeCallbacks = useRef<(() => void)[]>([]);
   const titleId = useId();
@@ -155,10 +164,23 @@ export function DialogBottomSheet({
     [dismissOnBackdrop],
   );
 
+  const scrollableResolved = scrollable ?? true;
+
+  // Size morphing across an in-place content swap. The sheet is anchored at the
+  // bottom, so animating its height makes it grow/shrink from that edge; its
+  // width is fixed by the placement. The sheet's own `maxHeight` (the ratio
+  // percentage + the safe-area clamp inside `BottomSheet`) does the exact
+  // capping — the viewport is just the bound the reshape may not exceed.
+  const morphState = useDialogMorph({
+    enabled: morph !== false,
+    measurable: scrollableResolved,
+    maxHeight: viewportHeight,
+  });
+
   // `panelStyle` paints the sheet surface (e.g. a brand background). It composes
   // AFTER the BottomSheet's internal background so a host palette wins; the
   // shape (radius, max height) is supplied here and remains overridable.
-  const sheetStyle = useMemo<StyleProp<ViewStyle>>(() => {
+  const sheetStyle = useMemo<StyleProp<AnimatedStyle<ViewStyle>>>(() => {
     const maxHeightPercent: `${number}%` = `${Math.round(maxHeightRatio * 100)}%`;
     return [
       {
@@ -168,8 +190,11 @@ export function DialogBottomSheet({
         maxHeight: maxHeightPercent,
       },
       panelStyle,
+      // Drives the card's `height` only while a morph is in flight; at rest it
+      // resolves to `height: 'auto'` — the sheet's normal content sizing.
+      morphState.panelStyle,
     ];
-  }, [theme.colors.background, maxHeightRatio, panelStyle]);
+  }, [theme.colors.background, maxHeightRatio, panelStyle, morphState.panelStyle]);
 
   // Does this dialog render bloom's declarative chrome (title / description /
   // actions)? This no longer gates the SCROLL decision (that is now the explicit
@@ -183,8 +208,6 @@ export function DialogBottomSheet({
     description !== undefined ||
     (actions !== undefined && actions.length > 0);
 
-  const scrollableResolved = scrollable ?? true;
-
   const dialogBody = (
     <DialogBody
       titleId={titleId}
@@ -264,6 +287,8 @@ export function DialogBottomSheet({
       // 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}
+      // Measures the sheet card — the size a morph starts from.
+      onLayout={morphState.onPanelLayout}
       style={sheetStyle}
     >
       <Context.Provider value={context}>
@@ -285,7 +310,12 @@ export function DialogBottomSheet({
             panelStyle,
           ]}
         >
-          {header ? headerBody : dialogBody}
+          {/* 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 : dialogBody}
+          </DialogMorphContent>
         </View>
       </Context.Provider>
     </BottomSheet>
@@ -313,6 +343,7 @@ export type DialogBottomSheetProps = Pick<
   | 'dismissOnBackdrop'
   | 'contentPadding'
   | 'scrollable'
+  | 'morph'
   | 'style'
   | 'panelStyle'
   | 'panelClassName'

package/src/dialog/DialogHeader.tsx

@@ -89,6 +89,7 @@ function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null
   if (!a || !b) return false;
   return (
     a.title === b.title &&
+    a.titleContent === b.titleContent &&
     a.subtitle === b.subtitle &&
     a.largeTitle === b.largeTitle &&
     a.left === b.left &&
@@ -181,6 +182,7 @@ export function useDialogHeader(config: DialogHeaderConfig | null | undefined):
   }, [
     store,
     config?.title,
+    config?.titleContent,
     config?.subtitle,
     config?.largeTitle,
     config?.left,
@@ -235,7 +237,10 @@ export const DialogNavHeader = memo(function DialogNavHeader({
   const config = useMergedHeaderConfig(header, controller.store);
   const { scrollY, largeTitleHeight } = controller;
 
-  const hasLargeTitle = collapse && (config.largeTitle ?? true) && !!config.title;
+  // A branded `titleContent` owns the bar centre outright: it is always visible,
+  // so there is nothing to collapse and no large in-content title to collapse under.
+  const hasLargeTitle =
+    collapse && !config.titleContent && (config.largeTitle ?? true) && !!config.title;
 
   const titleStyle = useAnimatedStyle(() => {
     // When there is no large title to collapse under, the bar title is always
@@ -294,15 +299,17 @@ export const DialogNavHeader = memo(function DialogNavHeader({
           testID="dialog-nav-title"
           style={[styles.centerTitle, titleStyle]}
         >
-          {config.title ? (
+          {config.titleContent ?? null}
+          {!config.titleContent && config.title ? (
             <Text numberOfLines={1} style={[styles.smallTitle, { color: theme.colors.text }]}>
               {config.title}
             </Text>
           ) : null}
           {/* The subtitle rides along ONLY in the static (non-collapsing) bar —
               own-scroller screens whose subtitle is a short count. A large-title
-              screen keeps a clean single-line collapsed title. */}
-          {!hasLargeTitle && config.subtitle ? (
+              screen keeps a clean single-line collapsed title, and a branded
+              `titleContent` bar carries no supporting copy at all. */}
+          {!hasLargeTitle && !config.titleContent && config.subtitle ? (
             <Text
               numberOfLines={1}
               style={[styles.smallSubtitle, { color: theme.colors.textSecondary }]}
@@ -336,7 +343,9 @@ export const DialogLargeTitle = memo(function DialogLargeTitle({
   const config = useMergedHeaderConfig(header, controller.store);
   const { largeTitleHeight } = controller;
 
-  const hasLargeTitle = (config.largeTitle ?? true) && !!config.title;
+  // A branded `titleContent` lives in the bar and never collapses, so the
+  // surface starts flush under the bar with no large title above it.
+  const hasLargeTitle = !config.titleContent && (config.largeTitle ?? true) && !!config.title;
 
   const onLayout = (e: LayoutChangeEvent) => {
     largeTitleHeight.value = e.nativeEvent.layout.height;