@oxyhq/bloom 0.16.1 → 0.16.2

package/src/__tests__/DialogBottomSheet.test.tsx

@@ -5,6 +5,34 @@ import { act, fireEvent, render } from '@testing-library/react-native';
 import { Dialog, useDialogControl } from '../dialog';
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
 
+/**
+ * Minimal shape of a `react-test-renderer` JSON node — enough to walk the tree
+ * by host `type` string without depending on `@types/react-test-renderer`.
+ */
+type RenderedNode = {
+  type: string;
+  children: Array<RenderedNode | string> | null;
+};
+
+/** Count host nodes of a given `type` in a rendered `toJSON()` tree. */
+function countNodesByType(
+  tree: RenderedNode | RenderedNode[] | null,
+  type: string,
+): number {
+  if (tree === null) return 0;
+  const roots = Array.isArray(tree) ? tree : [tree];
+  let count = 0;
+  for (const node of roots) {
+    if (node.type === type) count += 1;
+    if (node.children) {
+      for (const child of node.children) {
+        if (typeof child !== 'string') count += countNodesByType(child, type);
+      }
+    }
+  }
+  return count;
+}
+
 /**
  * The Dialog `bottom` placement must delegate to the shared cross-platform
  * `BottomSheet` (via `DialogBottomSheet`) — the SAME surface native and web use
@@ -127,4 +155,105 @@ describe('Dialog bottom placement delegates to BottomSheet', () => {
     expect(flattened.backgroundColor).toBe('rebeccapurple');
     expect(flattened.paddingTop).toBe(7);
   });
+
+  it('applies the default 20px content padding when contentPadding is omitted', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const { getByTestId } = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog control={c} placement="bottom" testID="default-pad">
+              <Text>Body</Text>
+            </Dialog>
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    const content = getByTestId('default-pad');
+    const flattened = Array.isArray(content.props.style)
+      ? Object.assign({}, ...content.props.style.filter(Boolean))
+      : content.props.style;
+    // Omitting `contentPadding` keeps the legacy 20px chrome padding.
+    expect(flattened.padding).toBe(20);
+  });
+
+  it('removes the body padding when contentPadding={0} (host owns its insets)', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const { getByTestId } = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog control={c} placement="bottom" testID="flush-pad" contentPadding={0}>
+              <Text>Flush body</Text>
+            </Dialog>
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    const content = getByTestId('flush-pad');
+    const flattened = Array.isArray(content.props.style)
+      ? Object.assign({}, ...content.props.style.filter(Boolean))
+      : content.props.style;
+    // `contentPadding={0}` yields flush content the host pads itself.
+    expect(flattened.padding).toBe(0);
+  });
+
+  it('does NOT wrap pure custom children in a second scroll container (no scroll-in-scroll)', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const result = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog control={c} placement="bottom">
+              <Text>Custom children own their own scrolling</Text>
+            </Dialog>
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    // Pure custom children → DialogBottomSheet passes `scrollable={false}` to
+    // BottomSheet, so the sheet does NOT add its internal ScrollView. A child
+    // that contains its own scroller is then the ONLY scroll container.
+    const tree: RenderedNode | RenderedNode[] | null = result.toJSON();
+    expect(countNodesByType(tree, 'Animated.ScrollView')).toBe(0);
+  });
+
+  it('keeps the internal scrollable body for declarative dialogs (title/description/actions)', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const result = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog
+              control={c}
+              placement="bottom"
+              title="Confirm"
+              description="Short declarative body."
+              actions={[{ label: 'OK' }]}
+            />
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    // Declarative chrome → the default scrollable body is retained, so a long
+    // title/description list still scrolls gracefully on a small viewport.
+    const tree: RenderedNode | RenderedNode[] | null = result.toJSON();
+    expect(countNodesByType(tree, 'Animated.ScrollView')).toBe(1);
+  });
 });

package/src/dialog/Dialog.tsx

@@ -32,6 +32,7 @@ import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
 import {
   ANIMATION_DURATION,
+  DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_SIDE_WIDTH,
   DIALOG_SHEET_BACKDROP_TESTID,
   PANEL_RADIUS,
@@ -106,6 +107,7 @@ function CenteredOrSideDialog({
   width = DEFAULT_SIDE_WIDTH,
   inset,
   dismissOnBackdrop = true,
+  contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
   style,
   panelStyle,
   panelClassName,
@@ -242,6 +244,7 @@ function CenteredOrSideDialog({
           width={width}
           inset={inset}
           dismissOnBackdrop={dismissOnBackdrop}
+          contentPadding={contentPadding}
           testID={testID}
           label={label}
           title={title}
@@ -283,7 +286,7 @@ 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.
-            { paddingTop: 20, paddingHorizontal: 20, paddingBottom: 20 },
+            { padding: contentPadding },
             { backgroundColor: theme.colors.background },
             style,
             panelStyle,
@@ -311,6 +314,7 @@ function SideSheet({
   width,
   inset,
   dismissOnBackdrop,
+  contentPadding,
   testID,
   label,
   title,
@@ -330,6 +334,7 @@ function SideSheet({
   width: number;
   inset?: DialogInset;
   dismissOnBackdrop: boolean;
+  contentPadding: number;
   testID?: string;
   label?: string;
   title?: string;
@@ -461,7 +466,7 @@ function SideSheet({
         ]}
         pointerEvents="auto"
       >
-        <View style={sideStyles.body}>{children}</View>
+        <View style={{ padding: contentPadding }}>{children}</View>
       </Animated.View>
     </View>
   );
@@ -484,9 +489,6 @@ const sideStyles = StyleSheet.create({
     shadowOffset: { width: 0, height: 8 },
     elevation: 12,
   },
-  body: {
-    padding: 20,
-  },
 });
 
 /**

package/src/dialog/Dialog.web.tsx

@@ -27,6 +27,7 @@ import {
   ANIMATION_DURATION,
   CENTER_FADE_OUT_DURATION,
   DEFAULT_CENTER_MAX_WIDTH,
+  DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_SIDE_WIDTH,
   DIALOG_SHEET_BACKDROP_TESTID,
   EASE_OUT,
@@ -106,6 +107,7 @@ function CenterOrSideDialog({
   maxWidth = DEFAULT_CENTER_MAX_WIDTH,
   inset,
   dismissOnBackdrop = true,
+  contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
   style,
   panelStyle,
   panelClassName,
@@ -260,6 +262,7 @@ function CenterOrSideDialog({
                 actions={actions}
                 style={style}
                 maxWidth={maxWidth}
+                contentPadding={contentPadding}
                 isClosing={isClosing}
               >
                 {children}
@@ -287,6 +290,7 @@ function CenterOrSideDialog({
             width={width}
             inset={inset}
             dismissOnBackdrop={dismissOnBackdrop}
+            contentPadding={contentPadding}
             onDismiss={close}
             panelStyle={panelStyle}
             panelClassName={panelClassName}
@@ -310,6 +314,7 @@ function DialogPanel({
   actions,
   style,
   maxWidth,
+  contentPadding,
   isClosing,
   children,
 }: {
@@ -320,6 +325,7 @@ function DialogPanel({
   actions?: DialogAction[];
   style?: DialogProps['style'];
   maxWidth: number;
+  contentPadding: number;
   isClosing: boolean;
   children?: React.ReactNode;
 }) {
@@ -350,7 +356,7 @@ function DialogPanel({
           shadowOpacity: theme.isDark ? 0.4 : 0.1,
           shadowRadius: 30,
           shadowOffset: { width: 0, height: 4 },
-          padding: 20,
+          padding: contentPadding,
           zIndex: dialogZIndex.surface,
         },
         isClosing
@@ -394,6 +400,7 @@ function SheetSurface({
   width,
   inset,
   dismissOnBackdrop,
+  contentPadding,
   onDismiss,
   panelStyle,
   panelClassName,
@@ -412,6 +419,7 @@ function SheetSurface({
   width: number;
   inset?: DialogInset;
   dismissOnBackdrop: boolean;
+  contentPadding: number;
   onDismiss: () => void;
   panelStyle?: StyleProp<ViewStyle>;
   panelClassName?: string;
@@ -528,7 +536,7 @@ function SheetSurface({
         ]}
         pointerEvents="auto"
       >
-        <View style={sheetStyles.body}>
+        <View style={{ padding: contentPadding }}>
           <DialogBody
             titleId={titleId}
             descriptionId={descriptionId}
@@ -641,9 +649,6 @@ const sheetStyles = {
     shadowOffset: { width: 0, height: 8 },
     zIndex: dialogZIndex.surface,
   } as ViewStyle,
-  body: {
-    padding: 20,
-  } as ViewStyle,
 };
 
 /**

package/src/dialog/DialogBottomSheet.tsx

@@ -13,18 +13,13 @@ import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
 import { DialogBody } from './DialogContent';
 import {
+  DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
   PANEL_RADIUS,
   SHEET_BACKDROP_OPACITY,
 } from './placement';
 import type { DialogControlProps, DialogProps } from './types';
 
-/**
- * Padding of the bottom-sheet content container (px). Matches the side-sheet
- * and centered-panel body padding so every placement reads identically.
- */
-const SHEET_CONTENT_PADDING = 20;
-
 /**
  * Shared `BottomSheet`-backed surface for the `bottom` placement, used by BOTH
  * `Dialog.tsx` (native) and `Dialog.web.tsx` (web). `BottomSheet` is itself a
@@ -56,6 +51,7 @@ export function DialogBottomSheet({
   maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
   showHandle = true,
   dismissOnBackdrop = true,
+  contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
   style,
   panelStyle,
   panelClassName,
@@ -164,6 +160,21 @@ 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.
+  const hasDeclarativeChrome =
+    title !== undefined ||
+    description !== undefined ||
+    (actions !== undefined && actions.length > 0);
+
   return (
     <BottomSheet
       ref={ref}
@@ -171,6 +182,9 @@ export function DialogBottomSheet({
       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}
       // 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}
@@ -185,7 +199,7 @@ export function DialogBottomSheet({
           {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
           {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
           style={[
-            { padding: SHEET_CONTENT_PADDING },
+            { padding: contentPadding },
             // `containerStyle` carries the host's CSS-var theme scope; it wraps
             // the content subtree so descendants read the scoped palette.
             containerStyle,
@@ -225,6 +239,7 @@ export type DialogBottomSheetProps = Pick<
   | 'maxHeightRatio'
   | 'showHandle'
   | 'dismissOnBackdrop'
+  | 'contentPadding'
   | 'style'
   | 'panelStyle'
   | 'panelClassName'

package/src/dialog/placement.ts

@@ -60,6 +60,17 @@ export const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
 /** Corner radius shared by the side-sheet panel and the bottom-sheet top. */
 export const PANEL_RADIUS = 20;
 
+/**
+ * Default inner padding (px) of the dialog content container, applied uniformly
+ * across every placement (centered panel, side-sheet body, bottom-sheet body)
+ * so the chrome reads identically regardless of which surface resolves. This is
+ * the legacy value — omitting the `contentPadding` prop keeps 20px everywhere,
+ * byte-for-byte unchanged. A host that owns its own insets (e.g. custom
+ * `children` that already manage padding) can override it via
+ * `Dialog`'s `contentPadding` prop (e.g. `contentPadding={0}`).
+ */
+export const DEFAULT_DIALOG_CONTENT_PADDING = 20;
+
 /** Open/close transition duration (ms). ~280ms ease-out reads smooth. */
 export const ANIMATION_DURATION = 280;
 

package/src/dialog/types.ts

@@ -134,6 +134,18 @@ export type DialogProps = React.PropsWithChildren<{
   inset?: DialogInset;
   /** Whether to render the drag handle in bottom-sheet mode. Defaults to `true`. */
   showHandle?: boolean;
+  /**
+   * Inner padding (px) of the dialog content container, applied uniformly across
+   * every placement (centered panel, side-sheet body, bottom-sheet body).
+   * Defaults to `20`.
+   *
+   * The default chrome padding is correct for the declarative
+   * `title`/`description`/`actions` layout, but a host passing pure custom
+   * `children` that already own their insets can set `contentPadding={0}` to
+   * render flush content and manage padding itself. Omitting the prop keeps the
+   * 20px default on every surface.
+   */
+  contentPadding?: number;
   /** Whether tapping the backdrop dismisses the dialog. Defaults to `true`. */
   dismissOnBackdrop?: boolean;
   /**