npm - @oxyhq/bloom - Versions diffs - 0.89.0 → 1.0.0 - Mend

@oxyhq/bloom 0.89.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3390) hide show

package/src/__tests__/Dialog.web.test.tsx DELETED Viewed

@@ -1,101 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import { act } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { BloomThemeProvider } from '../theme/BloomThemeProvider';
-import { Dialog } from '../dialog/Dialog.web';
-import { useDialogControl } from '../dialog/context';
-// react-dom 19 logs a guard unless this flag is set in test environments.
-(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-const DIALOG_STYLE_ID = 'bloom-dialog-web-css';
-let container: HTMLDivElement;
-let root: Root;
-function Harness({
-  onControl,
-}: {
-  onControl: (control: ReturnType<typeof useDialogControl>) => void;
-}) {
-  const control = useDialogControl();
-  React.useEffect(() => {
-    onControl(control);
-  }, [control, onControl]);
-  return (
-    <Dialog
-      control={control}
-      title="Delete item?"
-      description="This cannot be undone."
-      actions={[{ label: 'OK' }]}
-    />
-  );
-}
-function mount(ui: React.ReactElement): void {
-  act(() => {
-    root.render(
-      <BloomThemeProvider mode="light" colorPreset="teal">
-        {ui}
-      </BloomThemeProvider>,
-    );
-  });
-}
-beforeEach(() => {
-  // Ensure a clean document between runs — the injection is guarded by id, so a
-  // leftover tag would make the "injects on mount" assertion pass vacuously.
-  document.getElementById(DIALOG_STYLE_ID)?.remove();
-  container = document.createElement('div');
-  document.body.appendChild(container);
-  root = createRoot(container);
-});
-afterEach(() => {
-  act(() => root.unmount());
-  container.remove();
-  document.getElementById(DIALOG_STYLE_ID)?.remove();
-});
-describe('Dialog.web keyframe self-injection', () => {
-  it('injects the bloomDialog @keyframes stylesheet into <head> on mount', () => {
-    expect(document.getElementById(DIALOG_STYLE_ID)).toBeNull();
-    let control: ReturnType<typeof useDialogControl> | undefined;
-    mount(<Harness onControl={(c) => { control = c; }} />);
-    const styleEl = document.getElementById(DIALOG_STYLE_ID);
-    expect(styleEl).not.toBeNull();
-    expect(styleEl?.tagName).toBe('STYLE');
-    expect(styleEl?.parentElement).toBe(document.head);
-    const css = styleEl?.textContent ?? '';
-    expect(css).toContain('@keyframes bloomDialogZoomFadeIn');
-    expect(css).toContain('@keyframes bloomDialogZoomFadeOut');
-    // The backdrop's own fade is NOT a keyframe: it rides a shared value, so
-    // the dim can never be driven past its own opacity (see the black-flash
-    // regression below).
-    expect(css).not.toContain('@keyframes bloomDialogFadeIn');
-    expect(css).not.toContain('@keyframes bloomDialogFadeOut');
-    // Opening the dialog (the path that actually plays the animation) must not
-    // duplicate the stylesheet.
-    act(() => { control?.open(); });
-    expect(document.querySelectorAll(`#${DIALOG_STYLE_ID}`).length).toBe(1);
-  });
-  it('does not inject a second stylesheet when multiple dialogs mount', () => {
-    mount(
-      <>
-        <Harness onControl={() => {}} />
-        <Harness onControl={() => {}} />
-      </>,
-    );
-    expect(document.querySelectorAll(`#${DIALOG_STYLE_ID}`).length).toBe(1);
-  });
-});

package/src/__tests__/DialogBottomSheet.test.tsx DELETED Viewed

@@ -1,284 +0,0 @@
-import React, { createRef } from 'react';
-import { Text, type View } from 'react-native';
-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
- * — instead of a bespoke CSS slide-up sheet. These tests pin that delegation:
- * the declarative content renders through the sheet, the close lifecycle bridges
- * `open`/`onClose` correctly, and brand theming (`panelStyle` surface paint +
- * `containerStyle` theme scope) threads through to the sheet surface.
- *
- * The jest environment resolves `../dialog` to the native barrel (`Dialog.tsx`),
- * which routes `bottom` through `DialogBottomSheet` → `BottomSheet`. The web
- * fork (`Dialog.web.tsx`) routes through the EXACT same `DialogBottomSheet`, so
- * this delegation is one shared code path across platforms.
- */
-function renderWithTheme(ui: React.ReactElement) {
-  return render(
-    <BloomThemeProvider mode="light" colorPreset="teal">
-      {ui}
-    </BloomThemeProvider>,
-  );
-}
-function Harness({
-  children,
-}: {
-  children: (control: ReturnType<typeof useDialogControl>) => React.ReactNode;
-}) {
-  const control = useDialogControl();
-  return <>{children(control)}</>;
-}
-describe('Dialog bottom placement delegates to BottomSheet', () => {
-  it('does not render bottom-sheet content until opened', () => {
-    const { queryByText } = renderWithTheme(
-      <Harness>
-        {(control) => (
-          <Dialog control={control} placement="bottom" title="Sheet title">
-            <Text>Sheet body</Text>
-          </Dialog>
-        )}
-      </Harness>,
-    );
-    // BottomSheet keeps its subtree unmounted until present() — proof the bottom
-    // placement is the sheet, not an always-mounted CSS panel.
-    expect(queryByText('Sheet title')).toBeNull();
-    expect(queryByText('Sheet body')).toBeNull();
-  });
-  it('renders declarative title + description + actions through the sheet when opened', () => {
-    let control: ReturnType<typeof useDialogControl> | undefined;
-    const { getByText } = renderWithTheme(
-      <Harness>
-        {(c) => {
-          control = c;
-          return (
-            <Dialog
-              control={c}
-              placement="bottom"
-              title="Delete item?"
-              description="This cannot be undone."
-              actions={[{ label: 'Delete', color: 'destructive' }, { label: 'Cancel', color: 'cancel' }]}
-            />
-          );
-        }}
-      </Harness>,
-    );
-    act(() => {
-      control?.open();
-    });
-    expect(getByText('Delete item?')).toBeTruthy();
-    expect(getByText('This cannot be undone.')).toBeTruthy();
-    expect(getByText('Delete')).toBeTruthy();
-    expect(getByText('Cancel')).toBeTruthy();
-  });
-  it('requests close via onClose exactly once on action press in controlled mode (no double-fire)', () => {
-    const onClose = jest.fn();
-    const { getByText } = renderWithTheme(
-      <Dialog open onClose={onClose} placement="bottom" title="Confirm" actions={[{ label: 'Done' }]} />,
-    );
-    act(() => {
-      fireEvent.press(getByText('Done'));
-    });
-    // 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);
-  });
-  it('threads panelStyle (brand surface) and containerStyle (theme scope) onto the sheet content', () => {
-    let control: ReturnType<typeof useDialogControl> | undefined;
-    const panelRef = createRef<View>();
-    const { getByTestId } = renderWithTheme(
-      <Harness>
-        {(c) => {
-          control = c;
-          return (
-            <Dialog
-              control={c}
-              placement="bottom"
-              testID="brand-sheet"
-              panelStyle={{ backgroundColor: 'rebeccapurple' }}
-              containerStyle={{ paddingTop: 7 }}
-            >
-              <Text ref={panelRef}>Branded</Text>
-            </Dialog>
-          );
-        }}
-      </Harness>,
-    );
-    act(() => {
-      control?.open();
-    });
-    const content = getByTestId('brand-sheet');
-    const flattened = Array.isArray(content.props.style)
-      ? Object.assign({}, ...content.props.style.filter(Boolean))
-      : content.props.style;
-    // panelStyle paints the surface; containerStyle (theme-var scope) wraps the
-    // content subtree. Both land on the sheet content container.
-    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('wraps pure custom children in the internal scroll container by default (Dialog owns scroll)', () => {
-    let control: ReturnType<typeof useDialogControl> | undefined;
-    const result = renderWithTheme(
-      <Harness>
-        {(c) => {
-          control = c;
-          return (
-            <Dialog control={c} placement="bottom">
-              <Text>Custom children scroll inside the sheet by default</Text>
-            </Dialog>
-          );
-        }}
-      </Harness>,
-    );
-    act(() => {
-      control?.open();
-    });
-    // Pure custom children default to `scrollable` (undefined → true), so the
-    // sheet DOES add its internal ScrollView and the screen — stripped of its
-    // own scroller — scrolls inside it. The Dialog owns the scroll boundary.
-    const tree: RenderedNode | RenderedNode[] | null = result.toJSON();
-    expect(countNodesByType(tree, 'Animated.ScrollView')).toBe(1);
-  });
-  it('opts custom children OUT of the internal scroll container when scrollable={false}', () => {
-    let control: ReturnType<typeof useDialogControl> | undefined;
-    const result = renderWithTheme(
-      <Harness>
-        {(c) => {
-          control = c;
-          return (
-            <Dialog control={c} placement="bottom" scrollable={false}>
-              <Text>Owns its own FlatList</Text>
-            </Dialog>
-          );
-        }}
-      </Harness>,
-    );
-    act(() => {
-      control?.open();
-    });
-    // A surface whose content owns its own scroller (a FlatList / VirtualizedList)
-    // passes `scrollable={false}`, so the sheet does NOT add its internal
-    // ScrollView — the child is then the ONLY scroll container (no scroll-in-
-    // scroll, no "VirtualizedList inside a plain ScrollView" warning).
-    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/__tests__/DialogMorph.test.tsx DELETED Viewed

@@ -1,230 +0,0 @@
-import React from 'react';
-import { act, render } from '@testing-library/react-native';
-import type { LayoutChangeEvent, ViewStyle } from 'react-native';
-import {
-  DialogMorphContent,
-  useDialogFrame,
-  useDialogMorph,
-} from '../dialog/DialogMorph';
-/**
- * Size morphing across an in-place content swap.
- *
- * These assert the STATE MACHINE — when the panel height is taken over and when
- * it is handed back to natural sizing. The reanimated mock settles `withTiming`
- * synchronously, so the frame-by-frame interpolation is NOT observable here; it
- * is verified in a real browser, the only place reanimated's web mapper ticks.
- */
-const layout = (height: number): LayoutChangeEvent =>
-  ({
-    nativeEvent: { layout: { x: 0, y: 0, width: 320, height } },
-  }) as LayoutChangeEvent;
-interface HarnessProps {
-  morphEnabled?: boolean;
-  measurable?: boolean;
-  frameKey: string;
-  frameMorph?: boolean;
-  onState: (state: {
-    panelStyle: ViewStyle;
-    onPanelLayout: (e: LayoutChangeEvent) => void;
-    onContentLayout: (e: LayoutChangeEvent) => void;
-  }) => void;
-}
-/** Drives one surface: measurement in, panel style + a frame-declaring child out. */
-function Harness({
-  morphEnabled = true,
-  measurable = true,
-  frameKey,
-  frameMorph,
-  onState,
-}: HarnessProps) {
-  const morph = useDialogMorph({ enabled: morphEnabled, measurable, maxHeight: 800 });
-  onState({
-    panelStyle: morph.panelStyle as ViewStyle,
-    onPanelLayout: morph.onPanelLayout,
-    onContentLayout: morph.onContentLayout,
-  });
-  return (
-    <DialogMorphContent morph={morph}>
-      <Frame frameKey={frameKey} frameMorph={frameMorph} />
-    </DialogMorphContent>
-  );
-}
-function Frame({ frameKey, frameMorph }: { frameKey: string; frameMorph?: boolean }) {
-  useDialogFrame({ key: frameKey, morph: frameMorph });
-  return null;
-}
-/** Mount the harness and return a handle for driving layout + swapping frames. */
-function mountHarness(props: Omit<Partial<HarnessProps>, 'onState' | 'frameKey'> = {}) {
-  let state: Parameters<HarnessProps['onState']>[0] | null = null;
-  const onState: HarnessProps['onState'] = (next) => {
-    state = next;
-  };
-  const element = (frameKey: string, extra: Omit<Partial<HarnessProps>, 'onState'> = {}) => (
-    <Harness frameKey={frameKey} onState={onState} {...props} {...extra} />
-  );
-  const { rerender, unmount } = render(element('a'));
-  const read = () => {
-    if (!state) throw new Error('harness did not render');
-    return state;
-  };
-  return {
-    /** The panel height the surface currently resolves to. */
-    panelHeight: () => read().panelStyle.height,
-    /** Report the panel's and then the content's laid-out heights. */
-    measure(panelHeight: number, contentHeight: number) {
-      act(() => {
-        read().onPanelLayout(layout(panelHeight));
-        read().onContentLayout(layout(contentHeight));
-      });
-    },
-    /**
-     * Report only the content's natural height (the incoming frame settling).
-     * Followed by a re-render: the mock's `useAnimatedStyle` only re-evaluates
-     * on render, whereas the real one re-runs on the shared-value write.
-     */
-    measureContent(contentHeight: number, frameKey = 'b') {
-      act(() => read().onContentLayout(layout(contentHeight)));
-      rerender(element(frameKey));
-    },
-    /** Declare a frame, then re-render so the resulting panel style is observable. */
-    swapTo(frameKey: string, extra: Omit<Partial<HarnessProps>, 'onState'> = {}) {
-      rerender(element(frameKey, extra));
-      rerender(element(frameKey, extra));
-    },
-    unmount,
-  };
-}
-describe('Dialog size morphing', () => {
-  it('leaves the panel naturally sized until a frame actually changes', () => {
-    const h = mountHarness();
-    expect(h.panelHeight()).toBe('auto');
-    h.measure(300, 298);
-    expect(h.panelHeight()).toBe('auto');
-    // Re-declaring the SAME frame is not a swap.
-    h.swapTo('a');
-    expect(h.panelHeight()).toBe('auto');
-    h.unmount();
-  });
-  it('pins the panel at the outgoing size, then releases onto the incoming one', () => {
-    const h = mountHarness();
-    h.measure(300, 298);
-    h.swapTo('b');
-    // Held at the size the outgoing frame was painted at — no jump while the
-    // incoming content is still being measured.
-    expect(h.panelHeight()).toBe(300);
-    // The incoming frame reports 500 of natural height; the panel carries the
-    // 2px of chrome calibrated from the outgoing frame, then hands the height
-    // back so later content changes size the panel normally again.
-    h.measureContent(500);
-    expect(h.panelHeight()).toBe('auto');
-    h.unmount();
-  });
-  it('releases the pin even when the incoming frame is taller than the bound', () => {
-    const h = mountHarness();
-    h.measure(300, 300);
-    h.swapTo('b');
-    expect(h.panelHeight()).toBe(300);
-    h.measureContent(5000);
-    expect(h.panelHeight()).toBe('auto');
-    h.unmount();
-  });
-  it('releases without reshaping when the incoming frame fills the space it is given', () => {
-    const h = mountHarness();
-    h.measure(300, 300);
-    h.swapTo('b');
-    expect(h.panelHeight()).toBe(300);
-    // A child that flexes to its container measures ~0 inside a content-sized
-    // wrapper; collapsing the panel onto that would empty the surface.
-    h.measureContent(0);
-    expect(h.panelHeight()).toBe('auto');
-    h.unmount();
-  });
-  it('never pins when nothing has been measured yet', () => {
-    const h = mountHarness();
-    h.swapTo('b');
-    expect(h.panelHeight()).toBe('auto');
-    h.unmount();
-  });
-  it('honours the per-frame morph opt-out', () => {
-    const h = mountHarness();
-    h.measure(300, 300);
-    h.swapTo('b', { frameMorph: false });
-    expect(h.panelHeight()).toBe('auto');
-    h.unmount();
-  });
-  it('honours the surface-level morph opt-out', () => {
-    const h = mountHarness({ morphEnabled: false });
-    h.measure(300, 300);
-    h.swapTo('b');
-    expect(h.panelHeight()).toBe('auto');
-    h.unmount();
-  });
-  it('does not pin a surface whose content owns its own size', () => {
-    const h = mountHarness({ measurable: false });
-    h.measure(300, 300);
-    h.swapTo('b');
-    expect(h.panelHeight()).toBe('auto');
-    h.unmount();
-  });
-  it('drives maxWidth only on a placement that can vary it', () => {
-    let fixedWidth: ViewStyle | null = null;
-    let varyingWidth: ViewStyle | null = null;
-    render(
-      <WidthHarness
-        onStyle={(s) => {
-          fixedWidth = s;
-        }}
-      />,
-    );
-    render(
-      <WidthHarness
-        maxWidth={480}
-        onStyle={(s) => {
-          varyingWidth = s;
-        }}
-      />,
-    );
-    expect((fixedWidth as unknown as ViewStyle).maxWidth).toBeUndefined();
-    expect((varyingWidth as unknown as ViewStyle).maxWidth).toBe(480);
-  });
-});
-function WidthHarness({
-  maxWidth,
-  onStyle,
-}: {
-  maxWidth?: number;
-  onStyle: (style: ViewStyle) => void;
-}) {
-  const morph = useDialogMorph({ enabled: true, measurable: true, maxHeight: 800, maxWidth });
-  onStyle(morph.panelStyle as ViewStyle);
-  return null;
-}
-describe('useDialogFrame outside a morph-capable surface', () => {
-  it('is a no-op (a side sheet, or a plain confirm dialog)', () => {
-    expect(() => render(<Frame frameKey="only" />)).not.toThrow();
-  });
-});