@oxyhq/bloom 0.50.2 → 0.51.0

package/src/__tests__/toast-position-utils.test.ts

@@ -0,0 +1,259 @@
+import {
+  ESTIMATED_TOAST_HEIGHT,
+  MIN_STACK_SCALE_X,
+} from '../toast/constants';
+import {
+  calculateStackScaleX,
+  calculateToastPosition,
+  getOrderedToastIds,
+} from '../toast/position-utils';
+import type { ToastPosition, ToastProps } from '../toast/types';
+
+const toastWithId = (id: string | number): ToastProps => ({
+  id,
+  index: 0,
+  title: String(id),
+  numberOfToasts: 0,
+  orderedToastIds: [],
+});
+
+const HEIGHTS = { a: 50, b: 60, c: 70 };
+const ORDERED = ['a', 'b', 'c'];
+
+const positionAt = ({
+  index,
+  position,
+  enableStacking = false,
+  isExpanded = false,
+  gap = 8,
+  stackGap = 8,
+  allToastHeights = HEIGHTS,
+  orderedToastIds = ORDERED,
+  numberOfToasts = ORDERED.length,
+}: {
+  index: number;
+  position: ToastPosition;
+  enableStacking?: boolean;
+  isExpanded?: boolean;
+  gap?: number;
+  stackGap?: number;
+  allToastHeights?: Record<string | number, number>;
+  orderedToastIds?: Array<string | number>;
+  numberOfToasts?: number;
+}) =>
+  calculateToastPosition({
+    index,
+    numberOfToasts,
+    enableStacking,
+    position,
+    allToastHeights,
+    gap,
+    orderedToastIds,
+    isExpanded,
+    stackGap,
+  });
+
+describe('getOrderedToastIds', () => {
+  const toasts = [toastWithId('a'), toastWithId('b'), toastWithId('c')];
+
+  it.each<[ToastPosition, Array<string | number>]>([
+    ['top-center', ['c', 'b', 'a']],
+    ['bottom-center', ['a', 'b', 'c']],
+    ['center', ['a', 'b', 'c']],
+  ])('orders %s as %j when stacking is off', (position, expected) => {
+    expect(getOrderedToastIds(toasts, position, false)).toEqual(expected);
+  });
+
+  it('keeps the store order for every position when stacking is on', () => {
+    for (const position of [
+      'top-center',
+      'bottom-center',
+      'center',
+    ] as ToastPosition[]) {
+      expect(getOrderedToastIds(toasts, position, true)).toEqual([
+        'a',
+        'b',
+        'c',
+      ]);
+    }
+  });
+
+  it('does not mutate the toasts it was given', () => {
+    const input = [toastWithId('a'), toastWithId('b')];
+    getOrderedToastIds(input, 'top-center', false);
+    expect(input.map((t) => t.id)).toEqual(['a', 'b']);
+  });
+});
+
+describe('calculateToastPosition', () => {
+  describe('stacking off', () => {
+    it.each([
+      [0, 0],
+      [1, 58],
+      [2, 126],
+    ])('top-center index %i sits at %i', (index, expected) => {
+      expect(positionAt({ index, position: 'top-center' })).toBe(expected);
+    });
+
+    it.each([
+      [2, 0],
+      [1, -78],
+      [0, -146],
+    ])('bottom-center index %i sits at %i', (index, expected) => {
+      expect(positionAt({ index, position: 'bottom-center' })).toBe(expected);
+    });
+
+    it.each([
+      [2, -35],
+      [1, -113],
+    ])('center index %i sits at %i (half the front row above the line)', (
+      index,
+      expected,
+    ) => {
+      expect(positionAt({ index, position: 'center' })).toBe(expected);
+    });
+
+    it('falls back to the estimated height for unmeasured rows', () => {
+      expect(
+        positionAt({
+          index: 1,
+          position: 'top-center',
+          allToastHeights: {},
+          orderedToastIds: ['x', 'y'],
+          numberOfToasts: 2,
+        }),
+      ).toBe(ESTIMATED_TOAST_HEIGHT + 8);
+    });
+
+    it('treats a measured height of 0 as unmeasured', () => {
+      expect(
+        positionAt({
+          index: 1,
+          position: 'top-center',
+          allToastHeights: { x: 0, y: 0 },
+          orderedToastIds: ['x', 'y'],
+          numberOfToasts: 2,
+        }),
+      ).toBe(ESTIMATED_TOAST_HEIGHT + 8);
+    });
+
+    it('skips ids the ordering does not have yet', () => {
+      expect(
+        positionAt({
+          index: 2,
+          position: 'top-center',
+          orderedToastIds: ['a'],
+          numberOfToasts: 3,
+        }),
+      ).toBe(58);
+    });
+  });
+
+  describe('stacking on', () => {
+    it.each([
+      [0, 0],
+      [1, -2],
+      [2, -4],
+    ])('top-center index %i tucks behind the front row at %i', (
+      index,
+      expected,
+    ) => {
+      expect(
+        positionAt({ index, position: 'top-center', enableStacking: true }),
+      ).toBe(expected);
+    });
+
+    it.each([
+      [2, 0],
+      [1, -18],
+      [0, -36],
+    ])('bottom-center index %i tucks behind the front row at %i', (
+      index,
+      expected,
+    ) => {
+      expect(
+        positionAt({ index, position: 'bottom-center', enableStacking: true }),
+      ).toBe(expected);
+    });
+
+    it('applies the center shift to a stacked center position', () => {
+      // centerShift (-70/2) - (front 70 + 0 * stackGap - current 70)
+      expect(
+        positionAt({ index: 2, position: 'center', enableStacking: true }),
+      ).toBe(-35);
+    });
+
+    it('expands into a spaced list using stackGap as the gap', () => {
+      expect(
+        positionAt({
+          index: 1,
+          position: 'top-center',
+          enableStacking: true,
+          isExpanded: true,
+          gap: 20,
+          stackGap: 4,
+        }),
+      ).toBe(54);
+    });
+  });
+});
+
+describe('calculateStackScaleX', () => {
+  const scaleAt = ({
+    index,
+    numberOfToasts = 3,
+    enableStacking = true,
+    position = 'bottom-center' as ToastPosition,
+    isExpanded = false,
+    stackGap = 8,
+    screenWidth = 400,
+  }: {
+    index: number;
+    numberOfToasts?: number;
+    enableStacking?: boolean;
+    position?: ToastPosition;
+    isExpanded?: boolean;
+    stackGap?: number;
+    screenWidth?: number;
+  }) =>
+    calculateStackScaleX({
+      index,
+      numberOfToasts,
+      enableStacking,
+      position,
+      isExpanded,
+      stackGap,
+      screenWidth,
+    });
+
+  it.each([
+    ['stacking is off', { index: 0, enableStacking: false }],
+    ['there is only one row', { index: 0, numberOfToasts: 1 }],
+    ['the stack is expanded', { index: 0, isExpanded: true }],
+    ['the window has not been measured', { index: 0, screenWidth: 0 }],
+  ])('does not squeeze when %s', (_label, params) => {
+    expect(scaleAt(params)).toBe(1);
+  });
+
+  it('leaves the front row at full width and squeezes the ones behind it', () => {
+    // bottom-center: the front row is the LAST index.
+    expect(scaleAt({ index: 2 })).toBe(1);
+    expect(scaleAt({ index: 1 })).toBe(1 - 16 / 400);
+    expect(scaleAt({ index: 0 })).toBe(1 - 32 / 400);
+  });
+
+  it('measures depth from index 0 for a top-anchored stack', () => {
+    expect(scaleAt({ index: 0, position: 'top-center' })).toBe(1);
+    expect(scaleAt({ index: 1, position: 'top-center' })).toBe(1 - 16 / 400);
+  });
+
+  it('never squeezes past MIN_STACK_SCALE_X', () => {
+    expect(
+      scaleAt({ index: 0, numberOfToasts: 50, stackGap: 40, screenWidth: 200 }),
+    ).toBe(MIN_STACK_SCALE_X);
+  });
+
+  it('scales the squeeze with the window width', () => {
+    expect(scaleAt({ index: 1, screenWidth: 800 })).toBe(1 - 16 / 800);
+  });
+});

package/src/__tests__/toast-positioner-utils.test.ts

@@ -0,0 +1,214 @@
+import {
+  ESTIMATED_TOAST_HEIGHT,
+  OUTSIDE_PRESS_PADDING,
+} from '../toast/constants';
+import {
+  calculateOutsidePressableArea,
+  getContainerStyle,
+  getInsetValues,
+} from '../toast/positioner-utils';
+import type { ToastPosition } from '../toast/types';
+
+describe('getContainerStyle', () => {
+  /**
+   * The container must be FULL-BLEED, with all four insets pinned to 0. Rows are
+   * themselves absolutely positioned, so a container that sizes itself to its
+   * content has ZERO HEIGHT and every row lands outside its parent's box — which
+   * Android refuses to paint at `bottom-center`. `getInsetValues` supplies the edge
+   * offset, which `Positioner` applies as PADDING so rows stay inside.
+   */
+  it('is full-bleed, so a row can never be laid out outside it', () => {
+    expect(getContainerStyle()).toEqual({
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      alignItems: 'center',
+      overflow: 'visible',
+    });
+  });
+
+  it('never sizes itself to its content', () => {
+    const style = getContainerStyle();
+    expect(style.height).toBeUndefined();
+    expect(style.width).toBeUndefined();
+    // All four edges pinned is what gives it the host's size instead.
+    expect([style.top, style.right, style.bottom, style.left]).toEqual([
+      0, 0, 0, 0,
+    ]);
+  });
+
+  /**
+   * Load-bearing for swipe-to-dismiss and for the exit animation: both translate a
+   * row deliberately PAST the container edge (a left swipe by up to a full screen
+   * width, an exit by up to 150px). Clipping the container would cut the row off
+   * mid-gesture.
+   */
+  it('does not clip, because swipe and exit translate rows past its edge', () => {
+    expect(getContainerStyle().overflow).toBe('visible');
+  });
+
+  /**
+   * THE #26 INVARIANT, on the composition rather than on either half. `Positioner`
+   * layers `getInsetValues` over `getContainerStyle` in a style array, so the inset
+   * overrides exactly ONE of the four pinned edges and the opposite edge stays 0 —
+   * which is what keeps the box spanning the host and gives it a real height. If a
+   * future edit made `getInsetValues` return both edges, or dropped the opposite
+   * pin, the container would collapse to zero height again and every row would be
+   * laid out out of bounds.
+   */
+  it.each<[ToastPosition, 'top' | 'bottom' | null]>([
+    ['top-center', 'top'],
+    ['bottom-center', 'bottom'],
+    ['center', null],
+  ])('keeps a real height for %s: only the anchored edge moves', (position, anchored) => {
+    const merged = { ...getContainerStyle(), ...getInsetValues({ position }) };
+    const edges = { top: merged.top, right: merged.right, bottom: merged.bottom, left: merged.left };
+
+    // Every edge is still pinned — none became undefined.
+    expect(Object.values(edges).every((value) => value !== undefined)).toBe(true);
+
+    const moved = Object.entries(edges)
+      .filter(([, value]) => value !== 0)
+      .map(([key]) => key);
+    expect(moved).toEqual(anchored ? [anchored] : []);
+
+    // The opposite vertical edge staying 0 is what gives the box its height.
+    if (anchored) {
+      const opposite = anchored === 'top' ? 'bottom' : 'top';
+      expect(edges[opposite]).toBe(0);
+    }
+  });
+});
+
+describe('getInsetValues', () => {
+  it.each<[ToastPosition, 'top' | 'bottom']>([
+    ['top-center', 'top'],
+    ['bottom-center', 'bottom'],
+  ])('honours an explicit offset for %s', (position, edge) => {
+    expect(getInsetValues({ position, offset: 24 })).toEqual({ [edge]: 24 });
+  });
+
+  it('derives the inset from the safe area when no offset is given', () => {
+    expect(
+      getInsetValues({
+        position: 'bottom-center',
+        safeAreaInsets: { top: 47, bottom: 34 },
+      }),
+    ).toEqual({ bottom: 42 });
+
+    expect(
+      getInsetValues({
+        position: 'top-center',
+        safeAreaInsets: { top: 47, bottom: 34 },
+      }),
+    ).toEqual({ top: 55 });
+  });
+
+  it('falls back to 16 with no safe area and no offset', () => {
+    expect(getInsetValues({ position: 'bottom-center' })).toEqual({ bottom: 16 });
+    expect(getInsetValues({ position: 'top-center' })).toEqual({ top: 16 });
+  });
+
+  it('treats offset 0 as "derive from the safe area"', () => {
+    expect(
+      getInsetValues({
+        position: 'bottom-center',
+        offset: 0,
+        safeAreaInsets: { top: 0, bottom: 34 },
+      }),
+    ).toEqual({ bottom: 42 });
+  });
+
+  it('has no inset for the center position', () => {
+    expect(getInsetValues({ position: 'center', offset: 24 })).toEqual({});
+  });
+});
+
+describe('calculateOutsidePressableArea', () => {
+  it('reserves the measured stack height at the bottom', () => {
+    // 50 + 60 + one 8px gap + padding, below a 34px inset.
+    expect(
+      calculateOutsidePressableArea({
+        position: 'bottom-center',
+        toastHeights: { a: 50, b: 60 },
+        gap: 8,
+        visibleToasts: 3,
+        insetValues: { bottom: 34 },
+      }),
+    ).toEqual({
+      position: 'absolute',
+      top: 0,
+      bottom: 34 + 50 + 60 + 8 + OUTSIDE_PRESS_PADDING,
+      left: 0,
+      right: 0,
+    });
+  });
+
+  it('reserves the measured stack height at the top', () => {
+    expect(
+      calculateOutsidePressableArea({
+        position: 'top-center',
+        toastHeights: { a: 50, b: 60 },
+        gap: 8,
+        visibleToasts: 3,
+        insetValues: { top: 47 },
+      }),
+    ).toEqual({
+      position: 'absolute',
+      top: 47 + 50 + 60 + 8 + OUTSIDE_PRESS_PADDING,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    });
+  });
+
+  it('counts no more rows than visibleToasts', () => {
+    const area = calculateOutsidePressableArea({
+      position: 'bottom-center',
+      toastHeights: { a: 50, b: 60, c: 70 },
+      gap: 8,
+      visibleToasts: 2,
+      insetValues: { bottom: 0 },
+    });
+    // Only a + b, one gap, and the default 40 inset fallback.
+    expect(area.bottom).toBe(40 + 50 + 60 + 8 + OUTSIDE_PRESS_PADDING);
+  });
+
+  it('estimates the stack height before anything has been measured', () => {
+    const area = calculateOutsidePressableArea({
+      position: 'bottom-center',
+      toastHeights: {},
+      gap: 8,
+      visibleToasts: 3,
+      insetValues: { bottom: 16 },
+    });
+    expect(area.bottom).toBe(
+      16 + ESTIMATED_TOAST_HEIGHT * 3 + 8 * 2 + OUTSIDE_PRESS_PADDING,
+    );
+  });
+
+  it('charges no gap for a single row', () => {
+    const area = calculateOutsidePressableArea({
+      position: 'bottom-center',
+      toastHeights: { a: 50 },
+      gap: 8,
+      visibleToasts: 3,
+      insetValues: { bottom: 16 },
+    });
+    expect(area.bottom).toBe(16 + 50 + OUTSIDE_PRESS_PADDING);
+  });
+
+  it('has no pressable area for the center position', () => {
+    expect(
+      calculateOutsidePressableArea({
+        position: 'center',
+        toastHeights: { a: 50 },
+        gap: 8,
+        visibleToasts: 3,
+        insetValues: {},
+      }),
+    ).toEqual({ display: 'none' });
+  });
+});