@oxyhq/bloom 0.14.0 → 0.15.0

package/lib/typescript/module/responsive-sheet/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/responsive-sheet/index.web.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,eAAe,EAAE,gCAAgC,EAAE,MAAM,mBAAmB,CAAC;AACtF,YAAY,EACV,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/responsive-sheet/index.web.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,eAAe,EAAE,gCAAgC,EAAE,MAAM,uBAAuB,CAAC;AAC1F,YAAY,EACV,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

package/lib/typescript/module/responsive-sheet/types.d.ts

@@ -14,11 +14,14 @@ export interface ResponsiveSheetInset {
     right?: number;
 }
 /**
+ * @deprecated Use `<Dialog placement={{ base: 'bottom', md: 'left' }}>` from
+ * `@oxyhq/bloom/dialog` instead. `ResponsiveSheet` is now a thin wrapper over
+ * `<Dialog>` retained for the migration window.
+ *
  * A responsive overlay sheet: an anchored side-sheet on wide screens and a
  * bottom-sheet (with drag handle) on small screens, switching by viewport
  * width. It is a plain controlled component — the host drives `open`/`onClose`
- * from its own state. It renders in place (no portal) so the host can scope it
- * inside a themed/positioned subtree.
+ * from its own state.
  */
 export interface ResponsiveSheetProps {
     /** Whether the sheet is open. Controlled by the host. */

package/lib/typescript/module/responsive-sheet/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/responsive-sheet/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,gDAAgD;AAChD,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,oBAAoB;IACnC,yDAAyD;IACzD,IAAI,EAAE,OAAO,CAAC;IACd,4EAA4E;IAC5E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oFAAoF;IACpF,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/responsive-sheet/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,gDAAgD;AAChD,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,oBAAoB;IACnC,yDAAyD;IACzD,IAAI,EAAE,OAAO,CAAC;IACd,4EAA4E;IAC5E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oFAAoF;IACpF,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/DialogPlacement.test.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { act, fireEvent, render } from '@testing-library/react-native';
+
+import { Dialog } from '../dialog';
+import {
+  BREAKPOINT_MD,
+  useResolvedPlacement,
+  type DialogPlacement,
+  type ResponsiveDialogPlacement,
+} from '../dialog/placement';
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+
+// The RN test mock reports a 375px-wide viewport (below every breakpoint), so a
+// responsive `placement` map resolves to its `base`.
+const MOCK_VIEWPORT_WIDTH = 375;
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+/** Capture `useResolvedPlacement`'s output for a given input. */
+function ResolveProbe({
+  placement,
+  onResolve,
+}: {
+  placement: ResponsiveDialogPlacement | undefined;
+  onResolve: (p: DialogPlacement) => void;
+}) {
+  const resolved = useResolvedPlacement(placement);
+  onResolve(resolved);
+  return null;
+}
+
+function resolve(placement: ResponsiveDialogPlacement | undefined): DialogPlacement {
+  let captured: DialogPlacement = 'center';
+  renderWithTheme(
+    <ResolveProbe placement={placement} onResolve={(p) => { captured = p; }} />,
+  );
+  return captured;
+}
+
+describe('useResolvedPlacement', () => {
+  it('defaults to center when placement is undefined', () => {
+    expect(resolve(undefined)).toBe('center');
+  });
+
+  it('returns a plain string placement unchanged', () => {
+    expect(resolve('left')).toBe('left');
+    expect(resolve('right')).toBe('right');
+    expect(resolve('bottom')).toBe('bottom');
+    expect(resolve('center')).toBe('center');
+  });
+
+  it('resolves a responsive map to base below the first breakpoint', () => {
+    // Sanity: the mock viewport is narrower than md, so md/lg/xl never apply.
+    expect(MOCK_VIEWPORT_WIDTH).toBeLessThan(BREAKPOINT_MD);
+    expect(resolve({ base: 'bottom', md: 'left' })).toBe('bottom');
+    expect(resolve({ base: 'bottom', md: 'center' })).toBe('bottom');
+    expect(resolve({ base: 'bottom', sm: 'right', lg: 'center' })).toBe('bottom');
+  });
+
+  it('ignores higher breakpoint keys that exceed the viewport width', () => {
+    // Only `base` applies at 375px wide; the `xl` override does not engage.
+    expect(resolve({ base: 'right', xl: 'left' })).toBe('right');
+  });
+});
+
+describe('Dialog controlled open mode', () => {
+  it('does not render content while open is false', () => {
+    const { queryByText } = renderWithTheme(
+      <Dialog open={false} onClose={() => {}} title="Controlled">
+        <Text>Controlled body</Text>
+      </Dialog>,
+    );
+    expect(queryByText('Controlled body')).toBeNull();
+  });
+
+  it('renders content when open flips to true (no control needed)', () => {
+    const { getByText, rerender } = renderWithTheme(
+      <Dialog open={false} onClose={() => {}} title="Controlled">
+        <Text>Controlled body</Text>
+      </Dialog>,
+    );
+    rerender(
+      <BloomThemeProvider mode="light" colorPreset="teal">
+        <Dialog open onClose={() => {}} title="Controlled">
+          <Text>Controlled body</Text>
+        </Dialog>
+      </BloomThemeProvider>,
+    );
+    expect(getByText('Controlled body')).toBeTruthy();
+    expect(getByText('Controlled')).toBeTruthy();
+  });
+
+  it('unmounts after open flips back to false and the close settles', () => {
+    jest.useFakeTimers();
+    try {
+      const { getByText, queryByText, rerender } = renderWithTheme(
+        <Dialog open onClose={() => {}} title="Controlled">
+          <Text>Controlled body</Text>
+        </Dialog>,
+      );
+      expect(getByText('Controlled body')).toBeTruthy();
+
+      rerender(
+        <BloomThemeProvider mode="light" colorPreset="teal">
+          <Dialog open={false} onClose={() => {}} title="Controlled">
+            <Text>Controlled body</Text>
+          </Dialog>
+        </BloomThemeProvider>,
+      );
+      act(() => {
+        jest.advanceTimersByTime(500);
+      });
+      expect(queryByText('Controlled body')).toBeNull();
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('requests close via onClose exactly once when an action is pressed (no double-fire)', () => {
+    const onClose = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Dialog
+        open
+        onClose={onClose}
+        title="Controlled"
+        actions={[{ label: 'Done' }]}
+      />,
+    );
+    act(() => {
+      fireEvent.press(getByText('Done'));
+    });
+    // In controlled mode the action's close() requests dismissal via onClose
+    // once; the host (not the dialog) then flips `open`. It must not fire the
+    // close-completion onClose a second time.
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/__tests__/ResponsiveSheet.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { act, fireEvent, render } from '@testing-library/react-native';
+import { act, render } from '@testing-library/react-native';
 
-import { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from '../responsive-sheet';
+import { ResponsiveSheet } from '../responsive-sheet';
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
 
 function renderWithTheme(ui: React.ReactElement) {
@@ -13,9 +13,25 @@ function renderWithTheme(ui: React.ReactElement) {
   );
 }
 
+function rerenderWithTheme(
+  rerender: ReturnType<typeof render>['rerender'],
+  ui: React.ReactElement,
+) {
+  rerender(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
 const LABEL = 'Filters sheet';
 
-describe('ResponsiveSheet', () => {
+// `ResponsiveSheet` is now a deprecated thin wrapper over `<Dialog>`. These
+// tests verify the controlled wrapper contract it still owns (open/close
+// presence + delegation). The jest env reports a 375px-wide viewport (below
+// the default `md` breakpoint) so the wrapper resolves to the bottom-sheet
+// placement, which delegates to bloom's `BottomSheet`.
+describe('ResponsiveSheet (deprecated Dialog wrapper)', () => {
   it('renders children when open', () => {
     const { getByText } = renderWithTheme(
       <ResponsiveSheet open onClose={() => {}} label={LABEL}>
@@ -34,45 +50,7 @@ describe('ResponsiveSheet', () => {
     expect(queryByText('Sheet body')).toBeNull();
   });
 
-  // The backdrop animates its opacity from 0 -> BACKDROP_OPACITY on enter, so
-  // RNTL treats it as accessibility-hidden during the synchronous first frame.
-  // `includeHiddenElements` lets us assert its (real, interactive) press
-  // behavior without depending on the enter transition having committed.
-  const HIDDEN = { includeHiddenElements: true } as const;
-
-  it('calls onClose when the backdrop is pressed (default dismissOnBackdrop)', () => {
-    const onClose = jest.fn();
-    const { getByTestId } = renderWithTheme(
-      <ResponsiveSheet open onClose={onClose} label={LABEL}>
-        <Text>Sheet body</Text>
-      </ResponsiveSheet>,
-    );
-    fireEvent.press(getByTestId(RESPONSIVE_SHEET_BACKDROP_TESTID, HIDDEN));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('does NOT call onClose on backdrop press when dismissOnBackdrop is false', () => {
-    const onClose = jest.fn();
-    const { getByTestId } = renderWithTheme(
-      <ResponsiveSheet open onClose={onClose} label={LABEL} dismissOnBackdrop={false}>
-        <Text>Sheet body</Text>
-      </ResponsiveSheet>,
-    );
-    fireEvent.press(getByTestId(RESPONSIVE_SHEET_BACKDROP_TESTID, HIDDEN));
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('labels the panel and the dismiss backdrop distinctly', () => {
-    const { getByLabelText } = renderWithTheme(
-      <ResponsiveSheet open onClose={() => {}} label={LABEL}>
-        <Text>Sheet body</Text>
-      </ResponsiveSheet>,
-    );
-    expect(getByLabelText(LABEL, HIDDEN)).toBeTruthy();
-    expect(getByLabelText(`Dismiss ${LABEL}`, HIDDEN)).toBeTruthy();
-  });
-
-  it('keeps the panel mounted through the exit transition after closing', () => {
+  it('unmounts the body after a controlled close settles', () => {
     jest.useFakeTimers();
     try {
       const { getByText, queryByText, rerender } = renderWithTheme(
@@ -82,23 +60,29 @@ describe('ResponsiveSheet', () => {
       );
       expect(getByText('Sheet body')).toBeTruthy();
 
-      rerender(
-        <BloomThemeProvider mode="light" colorPreset="teal">
-          <ResponsiveSheet open={false} onClose={() => {}} label={LABEL}>
-            <Text>Sheet body</Text>
-          </ResponsiveSheet>
-        </BloomThemeProvider>,
+      rerenderWithTheme(
+        rerender,
+        <ResponsiveSheet open={false} onClose={() => {}} label={LABEL}>
+          <Text>Sheet body</Text>
+        </ResponsiveSheet>,
       );
-      // Still mounted immediately after close (exit transition in flight).
-      expect(getByText('Sheet body')).toBeTruthy();
 
-      // After the transition duration it unmounts.
+      // After the close animation/fallback settles the body is gone.
       act(() => {
-        jest.advanceTimersByTime(400);
+        jest.advanceTimersByTime(500);
       });
       expect(queryByText('Sheet body')).toBeNull();
     } finally {
       jest.useRealTimers();
     }
   });
+
+  it('forwards a custom label to the dialog surface', () => {
+    const { getByLabelText } = renderWithTheme(
+      <ResponsiveSheet open onClose={() => {}} label={LABEL}>
+        <Text>Sheet body</Text>
+      </ResponsiveSheet>,
+    );
+    expect(getByLabelText(LABEL)).toBeTruthy();
+  });
 });

package/src/dialog/CenteredDialog.tsx

@@ -26,6 +26,8 @@ const CLOSE_HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
 export const CENTERED_DIALOG_BACKDROP_TESTID = 'bloom-centered-dialog-backdrop';
 
 /**
+ * @deprecated Use `<Dialog placement="center">` instead.
+ *
  * Native variant of `<CenteredDialog>`.
  *
  * A controlled, centered modal: a transparent RN `Modal` (fade animation,

package/src/dialog/CenteredDialog.web.tsx

@@ -27,6 +27,8 @@ export const CENTERED_DIALOG_BACKDROP_TESTID = 'bloom-centered-dialog-backdrop';
 const stopPropagation = (e: { stopPropagation: () => void }) => e.stopPropagation();
 
 /**
+ * @deprecated Use `<Dialog placement="center">` instead.
+ *
  * Web variant of `<CenteredDialog>`.
  *
  * A centered modal card rendered into the Bloom Portal at the end of