@oxyhq/bloom 0.79.0 → 0.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.79.0",
+  "version": "0.80.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -1154,6 +1154,20 @@
         "default": "./lib/commonjs/tabs/index.js"
       }
     },
+    "./tabs/expo-router": {
+      "react-native": {
+        "types": "./lib/typescript/module/tabs/expo-router/index.d.ts",
+        "default": "./src/tabs/expo-router/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/tabs/expo-router/index.d.ts",
+        "default": "./lib/module/tabs/expo-router/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/tabs/expo-router/index.d.ts",
+        "default": "./lib/commonjs/tabs/expo-router/index.js"
+      }
+    },
     "./checkbox": {
       "react-native": {
         "types": "./lib/typescript/module/checkbox/index.d.ts",
@@ -1267,6 +1281,20 @@
         "default": "./lib/commonjs/scroll/index.js"
       }
     },
+    "./scroll/expo-router": {
+      "react-native": {
+        "types": "./lib/typescript/module/scroll/expo-router/index.d.ts",
+        "default": "./src/scroll/expo-router/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/scroll/expo-router/index.d.ts",
+        "default": "./lib/module/scroll/expo-router/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/scroll/expo-router/index.d.ts",
+        "default": "./lib/commonjs/scroll/expo-router/index.js"
+      }
+    },
     "./content-panel": {
       "react-native": {
         "types": "./lib/typescript/module/content-panel/index.d.ts",

package/src/__tests__/BloomProvider.web.test.tsx

@@ -7,11 +7,11 @@
 // THROWS outside `ScrollRestorationProvider`, so anything scrollable that an
 // app renders beside — rather than under — that provider crashes the screen.
 //
-// These tests therefore assert the WEB binding: `provider/scroll-provider` is
-// mapped to the web implementation the same way a web bundler resolves the
-// `.web` sibling (jest has no platform-extension resolution of its own, so
-// without this mapping the suite would silently exercise the native no-op and
-// pass no matter what).
+// The provider itself is platform-agnostic (it holds a store and a router
+// adapter), so no platform mapping is needed here: the hook under test is
+// imported from the web barrel, and it reads the very context the provider
+// mounts. What BloomProvider still supplies — and what these tests assert
+// reaches the subtree — is the expo-router ADAPTER.
 
 import { createElement, type ReactNode } from 'react';
 import { act } from 'react';
@@ -20,8 +20,8 @@ import { createRoot, type Root } from 'react-dom/client';
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT =
   true;
 
-// Only the two navigation hooks `scroll/index.web` consumes; `virtual` keeps
-// the real (native-heavy) expo-router off the resolver.
+// Only the two navigation hooks `scroll/expo-router` consumes; `virtual` keeps the
+// real (native-heavy) expo-router off the resolver.
 jest.mock(
   'expo-router',
   () => {
@@ -36,14 +36,7 @@ jest.mock(
   { virtual: true },
 );
 
-// What a web bundler does with `provider/scroll-provider.web.ts`.
-jest.mock('../provider/scroll-provider', () => ({
-  ScrollRestorationProvider:
-    jest.requireActual<typeof import('../scroll/index.web')>('../scroll/index.web')
-      .ScrollRestorationProvider,
-}));
-
-// Imported AFTER the mocks are registered.
+// Imported AFTER the mock is registered.
 import { BloomProvider } from '../provider';
 import { useImageResolver } from '../image-resolver';
 import { useScrollRestoration } from '../scroll/index.web';

package/src/__tests__/Tabs.test.tsx

@@ -107,4 +107,191 @@ describe('Tabs', () => {
       triggerFor(getByText('Second')).props.accessibilityState.selected,
     ).toBe(true);
   });
+
+  /**
+   * The shape a real consumer outside this repo ships, spelled out so a later
+   * refactor of the controlled path cannot break it silently. OxyPay's wallet
+   * screen (`packages/frontend/app/(tabs)/index.tsx`) renders exactly this: a
+   * controlled `value` + `onValueChange`, `variant="underline"`, a `style`
+   * override zeroing the bottom border, and label-only triggers.
+   *
+   * A Bloom bump reaches it, and it has no test of its own here — so this is
+   * the only thing standing between that screen and a silent regression.
+   */
+  it('supports the controlled call shape a published consumer uses', () => {
+    const onValueChange = jest.fn();
+    const { getByText, getByTestId } = renderWithTheme(
+      <Tabs
+        value="overview"
+        onValueChange={onValueChange}
+        variant="underline"
+        style={{ borderBottomWidth: 0 }}
+        testID="tabs"
+      >
+        <TabsTrigger value="overview" label="Overview" />
+        <TabsTrigger value="activity" label="Activity" />
+      </Tabs>,
+    );
+
+    expect(getByTestId('tabs-indicator')).toBeTruthy();
+    expect(triggerFor(getByText('Overview')).props.accessibilityState.selected).toBe(true);
+    fireEvent.press(getByText('Activity'));
+    expect(onValueChange).toHaveBeenCalledWith('activity');
+  });
+
+  describe('focus-driven path (router adapter)', () => {
+    it('takes selection from isFocused rather than the bar value', () => {
+      // No `value` at all — the router owns the selection.
+      const { getByText } = renderWithTheme(
+        <Tabs testID="tabs">
+          <TabsTrigger value="a" label="First" isFocused={false} />
+          <TabsTrigger value="b" label="Second" isFocused />
+        </Tabs>,
+      );
+      expect(triggerFor(getByText('First')).props.accessibilityState.selected).toBe(false);
+      expect(triggerFor(getByText('Second')).props.accessibilityState.selected).toBe(true);
+    });
+
+    it('does NOT report a selection on press, because the caller navigates', () => {
+      // Two writers on one underline is the bug this prevents: the router
+      // moves it via `isFocused`, so the bar must not also move it on press.
+      const onValueChange = jest.fn();
+      const onPress = jest.fn();
+      const { getByText } = renderWithTheme(
+        <Tabs onValueChange={onValueChange} testID="tabs">
+          <TabsTrigger value="a" label="First" isFocused />
+          <TabsTrigger value="b" label="Second" isFocused={false} onPress={onPress} />
+        </Tabs>,
+      );
+      fireEvent.press(getByText('Second'));
+      expect(onPress).toHaveBeenCalled();
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+
+    it('still reports a selection on press when isFocused is absent', () => {
+      // The discriminator is `isFocused` being supplied AT ALL, not its value —
+      // so a controlled bar keeps working exactly as before.
+      const onValueChange = jest.fn();
+      const { getByText } = renderWithTheme(<Bar value="a" onValueChange={onValueChange} />);
+      fireEvent.press(getByText('Second'));
+      expect(onValueChange).toHaveBeenCalledWith('b');
+    });
+  });
+
+  describe('counts', () => {
+    it('renders a count beside the label and folds it into the a11y label', () => {
+      const { getByText, queryByText } = renderWithTheme(
+        <Tabs value="a" onValueChange={() => {}} testID="tabs">
+          <TabsTrigger value="a" label="First" count={3} />
+          <TabsTrigger value="b" label="Second" count={0} />
+        </Tabs>,
+      );
+      expect(getByText('3')).toBeTruthy();
+      // A zero count renders nothing at all rather than a literal "0".
+      expect(queryByText('0')).toBeNull();
+      expect(triggerFor(getByText('First')).props.accessibilityLabel).toBe('First, 3');
+      expect(triggerFor(getByText('Second')).props.accessibilityLabel).toBe('Second');
+    });
+
+    it('caps a large tally so it cannot stretch the tab', () => {
+      const { getByText } = renderWithTheme(
+        <Tabs value="a" onValueChange={() => {}} testID="tabs">
+          <TabsTrigger value="a" label="First" count={100} />
+          <TabsTrigger value="b" label="Second" count={99} />
+        </Tabs>,
+      );
+      expect(getByText('99+')).toBeTruthy();
+      expect(getByText('99')).toBeTruthy();
+    });
+  });
+
+  /**
+   * `hasSelection` — a strip that is rendered while NOTHING it lists is showing.
+   *
+   * Not hypothetical, and the reason it exists: a routed strip lives in the
+   * LAYOUT, and a layout renders its non-tab children too. A profile's
+   * `/followers` sits beside its tab routes under one layout, so on that route
+   * every trigger reports `isFocused={false}` and, without this, the underline
+   * stays parked on whichever tab was visited last — asserting a selection that
+   * is not there.
+   *
+   * The assertion is on OPACITY rather than position on purpose: fading is the
+   * whole response, and the underline must NOT travel to a sentinel, which
+   * would drag it across every tab on the way out.
+   */
+  describe('no selection', () => {
+    /**
+     * Drive the strip and read the underline back.
+     *
+     * The re-render after each step is load-bearing, not ceremony: the
+     * reanimated jest mock evaluates `useAnimatedStyle`'s mapper at RENDER time
+     * (`useAnimatedStyle: (fn) => fn()`), so a shared value written from a
+     * layout callback is not visible in the rendered style until something
+     * renders again. Without it every assertion here reads the mount frame and
+     * "no selection" and "selection" are indistinguishable.
+     */
+    function mount(props: Partial<React.ComponentProps<typeof Bar>> = {}) {
+      const utils = renderWithTheme(<Bar value="a" {...props} />);
+      const renderOnce = (next: Partial<React.ComponentProps<typeof Bar>>) =>
+        utils.rerender(
+          <BloomThemeProvider mode="light" colorPreset="teal">
+            <Bar value="a" {...props} {...next} />
+          </BloomThemeProvider>,
+        );
+      // Twice, for the same reason the mock forces a re-render at all: a prop
+      // change is applied by an EFFECT, which runs after the render that
+      // carried it, so the first pass still renders the previous value. The
+      // second pass has identical props, so no effect re-runs and nothing is
+      // written twice — it only re-evaluates the mapper.
+      const render = (next: Partial<React.ComponentProps<typeof Bar>>) => {
+        renderOnce(next);
+        renderOnce(next);
+      };
+      return {
+        ...utils,
+        settle: () => render({}),
+        update: render,
+        measureFirstTrigger() {
+          let node: ReactTestInstance | null = triggerFor(utils.getByText('First'));
+          while (node && node.props?.onLayout === undefined) node = node.parent;
+          if (!node) throw new Error('no onLayout ancestor found for the trigger');
+          fireEvent(node, 'layout', { nativeEvent: { layout: { x: 0, width: 80 } } });
+        },
+        opacity: () =>
+          flattenStyle(utils.getByTestId('tabs-indicator').props.style).opacity,
+      };
+    }
+
+    it('starts hidden so an unmeasured strip never flashes an underline at the origin', () => {
+      expect(mount().opacity()).toBe(0);
+    });
+
+    it('shows the underline once the active trigger has been measured', () => {
+      const bar = mount();
+      bar.measureFirstTrigger();
+      bar.settle();
+      expect(bar.opacity()).toBe(1);
+    });
+
+    it('fades the underline out when hasSelection is false', () => {
+      const bar = mount();
+      bar.measureFirstTrigger();
+      bar.settle();
+      expect(bar.opacity()).toBe(1);
+
+      bar.update({ hasSelection: false });
+      expect(bar.opacity()).toBe(0);
+    });
+  });
+
+  it('names the component when a trigger is rendered outside a Tabs', () => {
+    // Without a provider the old code read a DEFAULT context and silently did
+    // nothing — a strip that renders but never moves. Failing loudly is the
+    // point; the message has to name the component to be actionable.
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() =>
+      renderWithTheme(<TabsTrigger value="a" label="First" />),
+    ).toThrow(/TabsTrigger must be used within a Tabs/);
+    spy.mockRestore();
+  });
 });

package/src/__tests__/optional-peer-imports.test.ts

@@ -79,8 +79,13 @@ const ALLOWED: { peer: string; file: string; why: string }[] = [
   },
   {
     peer: 'expo-router',
-    file: 'scroll/index.web.tsx',
-    why: 'scroll restoration is expo-router-only by design — this is the import that keeps BloomProvider out of Vite/SPA consumers (see AGENTS.md "App Root Provider")',
+    file: 'scroll/expo-router/index.ts',
+    why: 'the whole point of this file is to BE the expo-router binding — it is reachable only from `@oxyhq/bloom/scroll/expo-router` and from BloomProvider, both of which are expo-router-only by construction; the scroll core itself no longer imports a router (see AGENTS.md "App Root Provider")',
+  },
+  {
+    peer: 'expo-router',
+    file: 'tabs/expo-router/RouterTabs.tsx',
+    why: 'same shape as the scroll binding above — this file exists to BE the expo-router binding for the tab strip and is reachable only from `@oxyhq/bloom/tabs/expo-router`; the tabs core imports no router, so a consumer on a different router (or none) still gets `@oxyhq/bloom/tabs`',
   },
 ];
 

package/src/__tests__/scroll-expo-router-adapter.test.tsx

@@ -0,0 +1,164 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// Exercises `scroll/expo-router` — the only module in the scroll primitive that
+// knows a router exists. What it has to get right is the CONTENT id: two
+// screens that show the same thing must produce the same id however they were
+// reached, and one entry recycled to show something else must not.
+//
+// `expo-router` is mocked (`virtual: true`) so jest never resolves the real,
+// native-heavy package; the mock returns the route object shape the real
+// `useRoute()` returns, which is all the adapter reads.
+
+import { createElement, type ReactNode } from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT =
+  true;
+
+interface FakeRoute {
+  key: string;
+  name: string;
+  params?: object;
+}
+
+let currentRoute: FakeRoute = { key: 'k', name: 'index', params: {} };
+
+jest.mock(
+  'expo-router',
+  () => ({
+    useRoute: () => currentRoute,
+    useFocusEffect: () => undefined,
+  }),
+  { virtual: true },
+);
+
+// Imported AFTER the mock is registered.
+import { expoRouterScrollAdapter } from '../scroll/expo-router';
+
+/** Render the adapter's content-id hook once for a given route object. */
+function contentIdFor(route: FakeRoute): string | null {
+  currentRoute = route;
+  let captured: string | null | undefined;
+
+  function Probe(): ReactNode {
+    captured = expoRouterScrollAdapter.useScreenContentId();
+    return null;
+  }
+
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root: Root = createRoot(container);
+  act(() => {
+    root.render(createElement(Probe));
+  });
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+
+  if (captured === undefined) throw new Error('content id was never captured');
+  return captured;
+}
+
+describe('expo-router scroll adapter', () => {
+  it('ignores the route key entirely — content is the whole identity', () => {
+    // Two different history entries showing the same thing are one screen as
+    // far as the offset store is concerned. That is what makes a tab press
+    // restore: measured on 56.2.10 and 57.0.9, tapping a tab mints a NEW
+    // route key, so an entry-keyed store would miss and open at the top.
+    const first = contentIdFor({ key: 'index-A', name: 'index', params: {} });
+    const second = contentIdFor({ key: 'index-C', name: 'index', params: {} });
+    expect(first).toBe(second);
+  });
+
+  it('distinguishes params under one route name (the recycle)', () => {
+    // expo-router reuses one route object — `route.key` included — when
+    // `NAVIGATE` targets the current route name and its dynamic segments match,
+    // i.e. when only the query changed. Without params in the id the two
+    // searches would share an offset.
+    const cats = contentIdFor({ key: 'Search-xyz', name: 'search', params: { q: 'cats' } });
+    const dogs = contentIdFor({ key: 'Search-xyz', name: 'search', params: { q: 'dogs' } });
+    expect(cats).not.toBe(dogs);
+  });
+
+  it('distinguishes content across different routes', () => {
+    const a = contentIdFor({ key: 'k', name: 'feeds/index', params: {} });
+    const b = contentIdFor({ key: 'k', name: 'saved/index', params: {} });
+    expect(a).not.toBe(b);
+  });
+
+  it('is insensitive to param insertion order', () => {
+    // expo-router rebuilds the params object on every navigation, so key order
+    // is not stable — an order-sensitive id would split one screen in two.
+    const first = contentIdFor({
+      key: 'k',
+      name: 'search',
+      params: { q: 'cats', sort: 'top' },
+    });
+    const second = contentIdFor({
+      key: 'k',
+      name: 'search',
+      params: { sort: 'top', q: 'cats' },
+    });
+    expect(first).toBe(second);
+  });
+
+  it('ignores the params that describe how a screen was reached, not what it shows', () => {
+    // `screen`/`params` are React Navigation's nested-navigator plumbing,
+    // `initial` is its anchor flag, and expo-router appends its own
+    // `__internal…` params to an ordinary navigation. All four vary with the
+    // route taken, not the content shown.
+    const plain = contentIdFor({ key: 'k', name: 'p', params: { id: '42' } });
+    const decorated = contentIdFor({
+      key: 'k',
+      name: 'p',
+      params: {
+        id: '42',
+        screen: 'p',
+        params: { id: '42' },
+        initial: false,
+        __internal_expo_router_no_animation: true,
+        __internal__expo_router_is_preview_navigation: true,
+        __internal_expo_router_zoom_transition_source_id: 'card-42',
+      },
+    });
+
+    expect(plain).toBe(decorated);
+  });
+
+  it('separates params that differ only in type or shape', () => {
+    const ids = [
+      contentIdFor({ key: 'k', name: 'p', params: { id: '1' } }),
+      contentIdFor({ key: 'k', name: 'p', params: { id: 1 } }),
+      contentIdFor({ key: 'k', name: 'p', params: { id: ['1'] } }),
+      contentIdFor({ key: 'k', name: 'p', params: {} }),
+      contentIdFor({ key: 'k', name: 'p', params: { id: undefined } }),
+    ];
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  it('describes a route with no params at all', () => {
+    const withoutParams = contentIdFor({ key: 'k', name: 'settings/index' });
+    const withEmptyParams = contentIdFor({
+      key: 'k',
+      name: 'settings/index',
+      params: {},
+    });
+    expect(withoutParams).toBe(withEmptyParams);
+    expect(withoutParams).toContain('settings/index');
+  });
+
+  it('survives a cyclic param object instead of hanging the render', () => {
+    // React Navigation expects serializable params but does not enforce it, and
+    // a serializer that a cycle can hang has no place on a render path.
+    const cyclic: Record<string, unknown> = { name: 'loop' };
+    cyclic.self = cyclic;
+
+    expect(() =>
+      contentIdFor({ key: 'k', name: 'p', params: { nested: cyclic } }),
+    ).not.toThrow();
+  });
+});