@oxyhq/bloom 0.50.2 → 0.51.0

package/src/__tests__/toast-timers.test.ts

@@ -0,0 +1,163 @@
+import { ToastTimerRegistry } from '../toast/toast-timers';
+import { ENTERING_ANIMATION_DURATION } from '../toast/constants';
+
+describe('ToastTimerRegistry', () => {
+  let timers: ToastTimerRegistry;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    timers = new ToastTimerRegistry();
+  });
+
+  afterEach(() => {
+    timers.clearAll();
+    jest.useRealTimers();
+  });
+
+  it('fires after the enter animation plus the duration', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 1, duration: 4000, onComplete });
+
+    jest.advanceTimersByTime(ENTERING_ANIMATION_DURATION + 3999);
+    expect(onComplete).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('never starts a timer for a non-finite duration', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 'infinite', duration: Infinity, onComplete });
+    timers.start({ id: 'nan', duration: Number.NaN, onComplete });
+
+    jest.advanceTimersByTime(1_000_000);
+    expect(onComplete).not.toHaveBeenCalled();
+  });
+
+  it('clear stops a pending timer', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 1, duration: 1000, onComplete });
+    timers.clear(1);
+
+    jest.advanceTimersByTime(1_000_000);
+    expect(onComplete).not.toHaveBeenCalled();
+  });
+
+  it('clearAll stops every pending timer', () => {
+    const first = jest.fn();
+    const second = jest.fn();
+    timers.start({ id: 'a', duration: 1000, onComplete: first });
+    timers.start({ id: 'b', duration: 1000, onComplete: second });
+
+    timers.clearAll();
+    jest.advanceTimersByTime(1_000_000);
+
+    expect(first).not.toHaveBeenCalled();
+    expect(second).not.toHaveBeenCalled();
+  });
+
+  it('restarting an id replaces the previous timer instead of stacking one', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 1, duration: 1000, onComplete });
+    jest.advanceTimersByTime(500);
+    timers.start({ id: 1, duration: 1000, onComplete });
+
+    jest.advanceTimersByTime(1_000_000);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('pause banks the remaining time and resume runs only that remainder', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 1, duration: 4000, onComplete });
+
+    jest.advanceTimersByTime(1000);
+    timers.pause(1);
+
+    // Paused timers must survive an arbitrarily long background stint.
+    jest.advanceTimersByTime(1_000_000);
+    expect(onComplete).not.toHaveBeenCalled();
+
+    timers.resume(1);
+    jest.advanceTimersByTime(2999);
+    expect(onComplete).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('gives a resumed toast at least one second, however little was left', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 1, duration: 4000, onComplete });
+
+    jest.advanceTimersByTime(3900);
+    timers.pause(1);
+    timers.resume(1);
+
+    jest.advanceTimersByTime(999);
+    expect(onComplete).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('pausing twice does not double-subtract the elapsed time', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 1, duration: 4000, onComplete });
+
+    jest.advanceTimersByTime(1000);
+    timers.pause(1);
+    jest.advanceTimersByTime(1000);
+    timers.pause(1);
+
+    timers.resume(1);
+    jest.advanceTimersByTime(2999);
+    expect(onComplete).not.toHaveBeenCalled();
+    jest.advanceTimersByTime(1);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('resume is a no-op for an unknown or running timer', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 1, duration: 4000, onComplete });
+
+    timers.resume('unknown');
+    // Still running (not paused) — resume must not restart the clock.
+    timers.resume(1);
+
+    jest.advanceTimersByTime(ENTERING_ANIMATION_DURATION + 4000);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('pauseAll / resumeAll cover every registered timer', () => {
+    const first = jest.fn();
+    const second = jest.fn();
+    timers.start({ id: 'a', duration: 4000, onComplete: first });
+    timers.start({ id: 'b', duration: 6000, onComplete: second });
+
+    jest.advanceTimersByTime(1000);
+    timers.pauseAll();
+    jest.advanceTimersByTime(1_000_000);
+    expect(first).not.toHaveBeenCalled();
+    expect(second).not.toHaveBeenCalled();
+
+    timers.resumeAll();
+    jest.advanceTimersByTime(3000);
+    expect(first).toHaveBeenCalledTimes(1);
+    expect(second).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(2000);
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it('drops the record once a timer has fired, so resume cannot revive it', () => {
+    const onComplete = jest.fn();
+    timers.start({ id: 1, duration: 1000, onComplete });
+    jest.advanceTimersByTime(ENTERING_ANIMATION_DURATION + 1000);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+
+    timers.pause(1);
+    timers.resume(1);
+    jest.advanceTimersByTime(1_000_000);
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+});

package/src/__tests__/use-animated-target.test.tsx

@@ -0,0 +1,60 @@
+import { act, renderHook } from '@testing-library/react-native';
+import { Easing } from 'react-native-reanimated';
+
+import { useAnimatedTarget } from '../toast/use-animated-target';
+
+/**
+ * The point of this hook is WHERE the animation starts: assigned from JS, never
+ * returned from a mapper (which does not tick on web). That distinction is not
+ * observable under the reanimated test mock — it resolves `withTiming` straight
+ * to its destination — so it is guarded by the source assertion in
+ * `ToastHostWebFork.test.ts` and verified for real in a browser. What these tests
+ * pin is the value contract the row depends on.
+ */
+const CONFIG = { duration: 600, easing: Easing.linear };
+
+describe('useAnimatedTarget', () => {
+  it('starts at the initial target rather than at zero', () => {
+    const { result } = renderHook(() => useAnimatedTarget(120, CONFIG));
+    expect(result.current.value).toBe(120);
+  });
+
+  it('animates toward a changed target', () => {
+    const { result, rerender } = renderHook(
+      ({ target }: { target: number }) => useAnimatedTarget(target, CONFIG),
+      { initialProps: { target: 0 } },
+    );
+    expect(result.current.value).toBe(0);
+
+    act(() => {
+      rerender({ target: -140 });
+    });
+    // The reanimated test mock resolves withTiming to its destination value.
+    expect(result.current.value).toBe(-140);
+  });
+
+  it('keeps the same shared value across renders', () => {
+    const { result, rerender } = renderHook(
+      ({ target }: { target: number }) => useAnimatedTarget(target, CONFIG),
+      { initialProps: { target: 0 } },
+    );
+    const first = result.current;
+
+    act(() => {
+      rerender({ target: 10 });
+    });
+    expect(result.current).toBe(first);
+  });
+
+  it('does not re-assign when the target is unchanged', () => {
+    const { result, rerender } = renderHook(
+      ({ target }: { target: number }) => useAnimatedTarget(target, CONFIG),
+      { initialProps: { target: 42 } },
+    );
+
+    act(() => {
+      rerender({ target: 42 });
+    });
+    expect(result.current.value).toBe(42);
+  });
+});

package/src/__tests__/use-app-state.test.tsx

@@ -0,0 +1,127 @@
+import { AppState, type AppStateStatus } from 'react-native';
+import { act, renderHook } from '@testing-library/react-native';
+
+import {
+  subscribeToAppState,
+  useAppStateChange,
+} from '../toast/use-app-state';
+
+/**
+ * Both platform branches matter: RN-Web reports `AppState.isAvailable === false`
+ * during prerender (no document to listen to), where upstream's unconditional
+ * subscribe + `subscription.remove()` on unmount throws a `TypeError`.
+ */
+describe('subscribeToAppState', () => {
+  afterEach(() => {
+    AppState.isAvailable = true;
+    jest.restoreAllMocks();
+  });
+
+  it('subscribes and unsubscribes when AppState is available', () => {
+    const remove = jest.fn();
+    const addEventListener = jest
+      .spyOn(AppState, 'addEventListener')
+      .mockReturnValue({ remove });
+
+    const unsubscribe = subscribeToAppState(() => {});
+    expect(addEventListener).toHaveBeenCalledTimes(1);
+    expect(addEventListener.mock.calls[0]?.[0]).toBe('change');
+
+    unsubscribe();
+    expect(remove).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not subscribe, and returns a safe no-op, when AppState is unavailable', () => {
+    AppState.isAvailable = false;
+    const addEventListener = jest.spyOn(AppState, 'addEventListener');
+
+    const unsubscribe = subscribeToAppState(() => {});
+
+    expect(addEventListener).not.toHaveBeenCalled();
+    // The whole point: tearing down must not throw where there is no subscription.
+    expect(() => unsubscribe()).not.toThrow();
+  });
+});
+
+describe('useAppStateChange', () => {
+  const setup = () => {
+    const onBackground = jest.fn();
+    const onForeground = jest.fn();
+    const listeners: Array<(status: AppStateStatus) => void> = [];
+    const remove = jest.fn();
+
+    jest.spyOn(AppState, 'addEventListener').mockImplementation((_event, listener) => {
+      listeners.push(listener);
+      return { remove };
+    });
+
+    const hook = renderHook(() =>
+      useAppStateChange({ onBackground, onForeground }),
+    );
+
+    const emit = (status: AppStateStatus) => {
+      act(() => {
+        for (const listener of listeners) {
+          listener(status);
+        }
+      });
+    };
+
+    return { onBackground, onForeground, emit, remove, hook };
+  };
+
+  afterEach(() => {
+    AppState.isAvailable = true;
+    jest.restoreAllMocks();
+  });
+
+  it('reports leaving and returning to the foreground', () => {
+    const { onBackground, onForeground, emit } = setup();
+
+    emit('background');
+    expect(onBackground).toHaveBeenCalledTimes(1);
+    expect(onForeground).not.toHaveBeenCalled();
+
+    emit('active');
+    expect(onForeground).toHaveBeenCalledTimes(1);
+  });
+
+  it('reports one edge per transition, not one per event', () => {
+    const { onBackground, onForeground, emit } = setup();
+
+    // iOS emits `inactive` on the way to `background`; upstream treats both as a
+    // fresh backgrounding and pauses an already-paused timer again.
+    emit('inactive');
+    emit('background');
+    expect(onBackground).toHaveBeenCalledTimes(1);
+
+    emit('active');
+    emit('active');
+    expect(onForeground).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores an initial active event when the app was already active', () => {
+    const { onBackground, onForeground, emit } = setup();
+    emit('active');
+    expect(onForeground).not.toHaveBeenCalled();
+    expect(onBackground).not.toHaveBeenCalled();
+  });
+
+  it('removes its subscription on unmount', () => {
+    const { remove, hook } = setup();
+    hook.unmount();
+    expect(remove).toHaveBeenCalledTimes(1);
+  });
+
+  it('mounts and unmounts cleanly with no AppState subscription at all', () => {
+    AppState.isAvailable = false;
+    const onBackground = jest.fn();
+    const onForeground = jest.fn();
+
+    const hook = renderHook(() =>
+      useAppStateChange({ onBackground, onForeground }),
+    );
+    expect(() => hook.unmount()).not.toThrow();
+    expect(onBackground).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/use-toast-colors.test.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { buildTheme } from '../theme/build-theme';
+import { useToastColors } from '../toast/use-toast-colors';
+import type { ToastVariant } from '../toast/types';
+
+const MODE = 'light';
+const PRESET = 'oxy';
+const tokens = buildTheme(PRESET, MODE).colors;
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <BloomThemeProvider mode={MODE} colorPreset={PRESET}>
+    {children}
+  </BloomThemeProvider>
+);
+
+const colorsFor = (
+  variant: ToastVariant | undefined,
+  richColors = false,
+) =>
+  renderHook(() => useToastColors({ variant, richColors }), { wrapper }).result
+    .current;
+
+/** Every variant plus the absent one — the full key space of the resolver. */
+const ALL: Array<ToastVariant | undefined> = [
+  undefined,
+  'success',
+  'error',
+  'warning',
+  'info',
+  'loading',
+];
+
+describe('useToastColors', () => {
+  describe('by default (richColors off)', () => {
+    it('paints an identical neutral surface for every variant', () => {
+      const baseline = colorsFor(undefined);
+
+      for (const variant of ALL) {
+        const colors = colorsFor(variant);
+        expect({ variant, surface: colors.surface }).toEqual({
+          variant,
+          surface: baseline.surface,
+        });
+        expect({ variant, border: colors.border }).toEqual({
+          variant,
+          border: baseline.border,
+        });
+        expect({ variant, title: colors.title }).toEqual({
+          variant,
+          title: baseline.title,
+        });
+        expect({ variant, description: colors.description }).toEqual({
+          variant,
+          description: baseline.description,
+        });
+        expect({ variant, closeButton: colors.closeButton }).toEqual({
+          variant,
+          closeButton: baseline.closeButton,
+        });
+      }
+    });
+
+    it('uses the theme surface roles, never a brand *Subtle tint', () => {
+      const colors = colorsFor('success');
+      expect(colors.surface).toBe(tokens.backgroundSecondary);
+      expect(colors.border).toBe(tokens.border);
+      expect(colors.title).toBe(tokens.text);
+      expect(colors.description).toBe(tokens.textSecondary);
+      expect(colors.surface).not.toBe(tokens.primarySubtle);
+    });
+
+    it('never emits a brand token anywhere, for any variant or prop value', () => {
+      const brand = [
+        tokens.primarySubtle,
+        tokens.primarySubtleForeground,
+        tokens.negativeSubtle,
+        tokens.negativeSubtleForeground,
+        tokens.negative,
+        tokens.primary,
+      ];
+      for (const variant of ALL) {
+        for (const rich of [false, true]) {
+          const { action, ...flat } = colorsFor(variant, rich);
+          const emitted = [...Object.values(flat), ...Object.values(action)];
+          expect({
+            variant,
+            rich,
+            brandLeaks: emitted.filter((value) => brand.includes(value)),
+          }).toEqual({ variant, rich, brandLeaks: [] });
+        }
+      }
+    });
+
+    it.each<[ToastVariant | undefined, keyof typeof tokens]>([
+      ['success', 'success'],
+      ['error', 'error'],
+      ['warning', 'warning'],
+      ['info', 'info'],
+      ['loading', 'textSecondary'],
+      [undefined, 'textSecondary'],
+    ])('tints only the icon: %s -> colors.%s', (variant, token) => {
+      expect(colorsFor(variant).icon).toBe(tokens[token]);
+    });
+
+    it('keeps the action button neutral for every variant', () => {
+      const baseline = colorsFor(undefined).action;
+      expect(baseline.background).toBe(tokens.backgroundTertiary);
+      expect(baseline.pressedBackground).toBe(tokens.contrast50);
+
+      for (const variant of ALL) {
+        expect({ variant, action: colorsFor(variant).action }).toEqual({
+          variant,
+          action: baseline,
+        });
+      }
+    });
+  });
+
+  describe('with richColors', () => {
+    /** The four variants that carry a status colour. */
+    const STATUS: Array<[ToastVariant, keyof typeof tokens]> = [
+      ['success', 'success'],
+      ['error', 'error'],
+      ['warning', 'warning'],
+      ['info', 'info'],
+    ];
+
+    it('never tints the surface — that is the whole point of the prop', () => {
+      for (const variant of ALL) {
+        expect({ variant, surface: colorsFor(variant, true).surface }).toEqual({
+          variant,
+          surface: tokens.backgroundSecondary,
+        });
+      }
+    });
+
+    it.each(STATUS)(
+      'lifts border, title and icon to the status colour: %s',
+      (variant, token) => {
+        const colors = colorsFor(variant, true);
+        expect(colors.border).toBe(tokens[token]);
+        expect(colors.title).toBe(tokens[token]);
+        expect(colors.icon).toBe(tokens[token]);
+      },
+    );
+
+    it.each(STATUS)(
+      'never reaches for a brand token, so the %s icon keeps its hue with the prop on',
+      (variant) => {
+        expect(colorsFor(variant, true).icon).toBe(colorsFor(variant).icon);
+      },
+    );
+
+    it.each(STATUS)(
+      'leaves description, close button and actions neutral: %s',
+      (variant) => {
+        const rich = colorsFor(variant, true);
+        const plain = colorsFor(variant);
+        expect(rich.description).toBe(plain.description);
+        expect(rich.closeButton).toBe(plain.closeButton);
+        expect(rich.cancelText).toBe(plain.cancelText);
+        expect(rich.action).toEqual(plain.action);
+      },
+    );
+
+    it('leaves a variant-less and a loading toast completely untouched', () => {
+      expect(colorsFor(undefined, true)).toEqual(colorsFor(undefined));
+      expect(colorsFor('loading', true)).toEqual(colorsFor('loading'));
+    });
+
+    it('is still visibly different from the default for every status variant', () => {
+      for (const [variant] of STATUS) {
+        const rich = colorsFor(variant, true);
+        const plain = colorsFor(variant);
+        expect({ variant, changed: rich.border !== plain.border }).toEqual({
+          variant,
+          changed: true,
+        });
+        expect({ variant, changed: rich.title !== plain.title }).toEqual({
+          variant,
+          changed: true,
+        });
+      }
+    });
+  });
+});

package/src/__tests__/web-position-fixed.test.ts

@@ -0,0 +1,70 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+
+/**
+ * `position: fixed` is web-only CSS that React Native's `ViewStyle` does not
+ * model, so every web fork used to assert it inline. Thirteen sites spelled it
+ * `position: 'fixed' as 'absolute'` — not a widening but an outright FALSE
+ * assertion to the compiler (the value is not `'absolute'`), which would survive
+ * a rename and reads as if the style were absolute. One more used
+ * `as ViewStyle['position']`.
+ *
+ * They now all import `WEB_POSITION_FIXED`, whose single documented cast lives in
+ * `styles/web-view-style.ts`. This guard stops the inline spellings coming back.
+ */
+
+const SRC = join(__dirname, '..');
+
+function sourceFiles(dir: string): string[] {
+  return readdirSync(dir).flatMap((entry) => {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      return entry === '__tests__' ? [] : sourceFiles(full);
+    }
+    return /\.tsx?$/.test(entry) ? [full] : [];
+  });
+}
+
+const files = sourceFiles(SRC);
+
+describe('web position: fixed', () => {
+  it('resolves to the CSS value at runtime', () => {
+    expect(WEB_POSITION_FIXED).toBe('fixed');
+  });
+
+  it('finds source files to scan (guards against a broken walk)', () => {
+    expect(files.length).toBeGreaterThan(100);
+  });
+
+  it.each([
+    ["position: 'fixed' as 'absolute'", /position:\s*'fixed'\s+as\s+'absolute'/],
+    ["position: 'fixed' as ViewStyle['position']", /position:\s*'fixed'\s+as\s+ViewStyle/],
+    ['a bare position: fixed literal', /position:\s*'fixed'\s*,/],
+  ])('has no %s left in src', (_label, pattern) => {
+    const offenders = files.filter((file) => {
+      const source = readFileSync(file, 'utf8')
+        // Comments may still discuss the retired spelling.
+        .replace(/\/\*[\s\S]*?\*\//g, '')
+        .replace(/^\s*\/\/.*$/gm, '');
+      return pattern.test(source);
+    });
+    expect(offenders.map((f) => f.replace(`${SRC}/`, ''))).toEqual([]);
+  });
+
+  it('keeps the only cast inside styles/web-view-style.ts', () => {
+    const module = readFileSync(join(SRC, 'styles/web-view-style.ts'), 'utf8')
+      .replace(/\/\*[\s\S]*?\*\//g, '')
+      .replace(/^\s*\/\/.*$/gm, '');
+    expect(module.match(/ as /g)).toHaveLength(1);
+  });
+
+  it('is imported by every fork that positions something fixed', () => {
+    const importers = files.filter((file) =>
+      readFileSync(file, 'utf8').includes('WEB_POSITION_FIXED'),
+    );
+    // The 10 consumers plus the module that defines it.
+    expect(importers.length).toBeGreaterThanOrEqual(11);
+  });
+});

package/src/avatar-group/AvatarGroup.web.tsx

@@ -3,6 +3,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import { Portal } from '../portal';
 import { Z_INDEX } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { UserHoverCard } from '../user-hover-card';
 import {
   AvatarGroupBase,
@@ -133,7 +134,7 @@ const AvatarGroupWebComponent: React.FC<AvatarGroupProps> = (props) => {
 
 const webStyles = StyleSheet.create({
   floating: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     zIndex: Z_INDEX.tooltip,
   },
   card: {

package/src/bottom-sheet/index.web.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
 import { forwardRef } from 'react';
-import { StyleSheet, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Portal } from '../portal/index.web';
 import { Z_INDEX } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import {
     BottomSheetBase,
     type BottomSheetProps,
@@ -52,7 +53,7 @@ const webStyles = StyleSheet.create({
         // the sheet's own interactive descendants (backdrop, sheet) while empty
         // gaps stay click-through (`box-none`). `StyleSheet.absoluteFill` from
         // the sheet body then anchors to this box.
-        position: 'fixed' as ViewStyle['position'],
+        position: WEB_POSITION_FIXED,
         top: 0,
         left: 0,
         right: 0,

package/src/context-menu/index.web.tsx

@@ -20,6 +20,7 @@ import { Text } from '../typography';
 import { Portal } from '../portal/index.web';
 import { useInteractionState } from '../hooks/useInteractionState';
 import { createOverlayZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { ItemCtx, useItemContext } from './context';
 import type {
@@ -326,7 +327,7 @@ export function ContextMenuDivider() {
 
 const styles = StyleSheet.create({
   backdrop: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,
@@ -336,7 +337,7 @@ const styles = StyleSheet.create({
     pointerEvents: 'auto',
   },
   dropdown: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     zIndex: contextMenuZIndex.surface,
     borderRadius: 8,
     padding: 4,