@oxyhq/bloom 0.50.2 → 0.51.0

package/src/toast/index.tsx

@@ -1,132 +1,56 @@
-import React, { isValidElement } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { nanoid } from 'nanoid/non-secure';
-import { toast as sonner, Toaster } from 'sonner-native';
-
-import { DURATION } from './const';
-import {
-  Icon as ToastIcon,
-  Outer as BaseOuter,
-  Text as ToastText,
-  ToastConfigProvider,
-} from './Toast';
-import type { BaseToastOptions, ToastType } from './types';
-
-export { DURATION } from './const';
-export { Action, Icon, Outer, Text, ToastConfigProvider } from './Toast';
-export type { ToastType, BaseToastOptions } from './types';
-
-/**
- * Toasts are rendered in a global outlet, which is placed at the top of the
- * component tree.
- */
-export function ToastOutlet() {
-  return <Toaster pauseWhenPageIsHidden gap={8} />;
-}
-
-function OuterWrapper({ children }: { children: React.ReactNode }) {
-  return (
-    <View style={wrapperStyles.container}>
-      <BaseOuter>{children}</BaseOuter>
-    </View>
-  );
-}
-
-/**
- * Direct access to the Sonner API. Use sparingly — `toast()` covers the
- * common case and keeps the surface tied to bloom's themed look.
- */
-export const api = sonner;
-
-function dispatch(
-  content: React.ReactNode,
-  type: ToastType,
-  options: BaseToastOptions = {},
-): void {
-  const id = nanoid();
-  if (typeof content === 'string') {
-    sonner.custom(
-      <ToastConfigProvider id={id} type={type}>
-        <OuterWrapper>
-          <ToastIcon />
-          <ToastText>{content}</ToastText>
-        </OuterWrapper>
-      </ToastConfigProvider>,
-      {
-        ...options,
-        id,
-        duration: options?.duration ?? DURATION,
-      },
-    );
-  } else if (isValidElement(content)) {
-    sonner.custom(
-      <ToastConfigProvider id={id} type={type}>
-        {content}
-      </ToastConfigProvider>,
-      {
-        ...options,
-        id,
-        duration: options?.duration ?? DURATION,
-      },
-    );
-  } else {
-    throw new Error(
-      `Toast can be a string or a React element, got ${typeof content}`,
-    );
-  }
-}
+import * as React from 'react';
+
+import { Toaster } from './Toaster';
+import type { ToasterProps } from './types';
+
+export { toast } from './toast-fns';
+export { Toaster } from './Toaster';
+export { toastDefaults } from './constants';
+
+export type {
+  AutoWiggle,
+  PromiseStyles,
+  PromiseToastOptions,
+  ToastAction,
+  ToastAnimation,
+  ToastEntryExitAnimation,
+  ToasterProps,
+  ToastFn,
+  ToastHostProps,
+  ToastOptions,
+  ToastPosition,
+  ToastProps,
+  ToastRef,
+  ToastStyles,
+  ToastSwipeDirection,
+  ToastTheme,
+  ToastType,
+  ToastVariant,
+} from './types';
 
 /**
- * Show a toast notification.
+ * The toast stack. Mount this ONCE near the app root — `OxyProvider` already
+ * does, so most apps never write it themselves.
  *
- * Pass a string for a simple text toast, or a React element for a custom
- * toast. The optional `options` argument accepts the standard Sonner
- * options plus a bloom `type` (defaults to `'default'`).
+ * Every default (position, swipe direction, offset, gap, `visibleToasts`,
+ * duration, pause-when-hidden) comes from `toastDefaults`, which `Toaster`
+ * applies; passing a prop here overrides exactly that one.
  *
- * ```ts
- * toast('Saved');
- * toast.success('Profile updated');
- * toast.error('Network error', { duration: 5000 });
- * toast.dismiss(id);
+ * ```tsx
+ * <ToastOutlet />
+ * <ToastOutlet position="top-center" visibleToasts={5} />
  * ```
  *
- * Pre-typed variants (`toast.success`, `toast.error`, `toast.warning`,
- * `toast.info`) are aliases for the corresponding `type`.
+ * On iOS a toast that must appear above a native modal needs the overlay host
+ * injected — Bloom does not depend on `react-native-screens` itself:
+ *
+ * ```tsx
+ * import { FullWindowOverlay } from 'react-native-screens';
+ * <ToastOutlet ToasterOverlayWrapper={FullWindowOverlay} />
+ * ```
  */
-export interface ToastFn {
-  (content: React.ReactNode, options?: BaseToastOptions): void;
-  success: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
-  error: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
-  warning: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
-  info: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
-  dismiss: (id?: string | number) => void;
+export function ToastOutlet(props: ToasterProps) {
+  return <Toaster {...props} />;
 }
 
-const toastImpl = ((content: React.ReactNode, options: BaseToastOptions = {}) => {
-  dispatch(content, options.type ?? 'default', options);
-}) as ToastFn;
-
-toastImpl.success = (content, options) => dispatch(content, 'success', options ?? {});
-toastImpl.error = (content, options) => dispatch(content, 'error', options ?? {});
-toastImpl.warning = (content, options) => dispatch(content, 'warning', options ?? {});
-toastImpl.info = (content, options) => dispatch(content, 'info', options ?? {});
-toastImpl.dismiss = (id) => sonner.dismiss(id);
-
-export const toast: ToastFn = toastImpl;
-
-/**
- * Alias of `toast` kept for compatibility with the original 0.4.x surface
- * where `show()` was the documented entry point. New code should prefer
- * `toast()` directly.
- */
-export const show: ToastFn = toastImpl;
-
-/** Re-export the Toast function type so callers can refer to it. */
-export type Toast = ToastFn;
-
-const wrapperStyles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 20,
-    width: '100%',
-  },
-});
+ToastOutlet.displayName = 'ToastOutlet';

package/src/toast/position-utils.ts

@@ -0,0 +1,149 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/position-utils.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * PURE geometry, called from plain JS. Upstream runs `calculateToastPosition`
+ * inside a Reanimated mapper (hence its `'worklet'` directive); Bloom computes the
+ * target in React and drives the shared value imperatively instead, because an
+ * animation returned from a mapper never ticks on web — see `use-animated-target.ts`.
+ * That also makes every function here directly unit-testable.
+ *
+ * Upstream's non-null assertions on the ordered id lookups are replaced with real
+ * guards: an id can genuinely be missing for a frame while the store's ordering
+ * and the rendered rows converge.
+ */
+import { ESTIMATED_TOAST_HEIGHT, MIN_STACK_SCALE_X } from './constants';
+import type { ToastPosition, ToastProps } from './types';
+
+export const getOrderedToastIds = (
+  toasts: ToastProps[],
+  position: ToastPosition,
+  enableStacking: boolean,
+): Array<string | number> => {
+  if (enableStacking) {
+    // Already in rendering order — the Toaster reverses top-center up front.
+    return toasts.map((t) => t.id);
+  }
+  return position === 'top-center'
+    ? toasts.map((t) => t.id).reverse()
+    : toasts.map((t) => t.id);
+};
+
+/**
+ * How much a buried row is squeezed horizontally, so the stack reads as depth.
+ *
+ * Scale rather than width: changing the real width would rewrap the text. Returns
+ * 1 (no squeeze) for a single row, an expanded stack, stacking turned off, or
+ * before the window width is known.
+ */
+export const calculateStackScaleX = ({
+  index,
+  numberOfToasts,
+  enableStacking,
+  position,
+  isExpanded,
+  stackGap,
+  screenWidth,
+}: {
+  index: number;
+  numberOfToasts: number;
+  enableStacking: boolean;
+  position: ToastPosition;
+  isExpanded: boolean;
+  stackGap: number;
+  screenWidth: number;
+}): number => {
+  if (!enableStacking || numberOfToasts <= 1 || isExpanded || screenWidth <= 0) {
+    return 1;
+  }
+
+  const distanceFromFront =
+    position === 'top-center' ? index : numberOfToasts - index - 1;
+  const narrowAmount = stackGap * distanceFromFront * 2;
+  return Math.max(MIN_STACK_SCALE_X, 1 - narrowAmount / screenWidth);
+};
+
+const heightOf = (
+  allToastHeights: Record<string | number, number>,
+  id: string | number | undefined,
+): number => {
+  if (id === undefined) {
+    return ESTIMATED_TOAST_HEIGHT;
+  }
+  // A measured 0 is not a real height — treat it as "not measured yet".
+  return allToastHeights[id] || ESTIMATED_TOAST_HEIGHT;
+};
+
+export const calculateToastPosition = ({
+  index,
+  numberOfToasts,
+  enableStacking,
+  position,
+  allToastHeights,
+  gap,
+  orderedToastIds,
+  isExpanded,
+  stackGap,
+}: {
+  index: number;
+  numberOfToasts: number;
+  enableStacking: boolean;
+  position: ToastPosition;
+  allToastHeights: Record<string | number, number>;
+  gap: number;
+  orderedToastIds: Array<string | number>;
+  isExpanded: boolean;
+  stackGap: number;
+}): number => {
+  const effectiveEnableStacking = enableStacking && !isExpanded;
+
+  // Center anchors at top:50% of the screen (top edge of toast = center line).
+  // Shift by -frontHeight/2 so the front toast is visually centered on the line.
+  const centerShift =
+    position === 'center'
+      ? -(heightOf(allToastHeights, orderedToastIds[numberOfToasts - 1]) / 2)
+      : 0;
+
+  if (effectiveEnableStacking) {
+    const currentHeight = heightOf(allToastHeights, orderedToastIds[index]);
+
+    if (position === 'top-center') {
+      const frontHeight = heightOf(allToastHeights, orderedToastIds[0]);
+      return frontHeight + index * stackGap - currentHeight;
+    }
+    // bottom-center and center
+    const frontHeight = heightOf(
+      allToastHeights,
+      orderedToastIds[numberOfToasts - 1],
+    );
+    const distFromFront = numberOfToasts - 1 - index;
+    return (
+      centerShift - (frontHeight + distFromFront * stackGap - currentHeight)
+    );
+  }
+
+  const effectiveGap = isExpanded ? stackGap : gap;
+
+  if (position === 'top-center') {
+    let totalOffset = 0;
+    for (let i = 0; i < index; i++) {
+      const toastId = orderedToastIds[i];
+      if (toastId === undefined) {
+        continue;
+      }
+      totalOffset += heightOf(allToastHeights, toastId) + effectiveGap;
+    }
+    return totalOffset;
+  }
+
+  // bottom-center and center
+  let totalOffset = 0;
+  for (let i = numberOfToasts - 1; i > index; i--) {
+    const toastId = orderedToastIds[i];
+    if (toastId === undefined) {
+      continue;
+    }
+    totalOffset += heightOf(allToastHeights, toastId) + effectiveGap;
+  }
+  return centerShift - totalOffset;
+};

package/src/toast/positioner-utils.ts

@@ -0,0 +1,142 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/positioner-utils.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * Pure geometry for the per-position container: `position: 'absolute'` is correct
+ * here because the toast host provides a viewport-sized containing block (see
+ * `ToastHost`), which is what keeps this module platform-agnostic.
+ *
+ * INVARIANT: a row must never be laid out outside its container's box. See
+ * `getContainerStyle`.
+ */
+import type { ViewStyle } from 'react-native';
+import { ESTIMATED_TOAST_HEIGHT, OUTSIDE_PRESS_PADDING } from './constants';
+import type { ToastPosition } from './types';
+
+/**
+ * ALL FOUR EDGES ARE PINNED, for every position. `Positioner` then overrides the
+ * one anchored edge with `getInsetValues`, so the container still spans the host in
+ * the other direction and always has a REAL HEIGHT.
+ *
+ * That is the whole point. This used to be `{position:'absolute', width:'100%'}`
+ * plus an inset of only `{bottom: N}` — and since every row inside is ITSELF
+ * `position:'absolute'`, the container had no in-flow content and measured ZERO
+ * HEIGHT, so every row was laid out entirely OUTSIDE its parent's box. Measured on
+ * web: a bottom-center container was a 0-height line at y=884 with its rows at
+ * y=784 and y=838, i.e. at NEGATIVE offsets (`top: -46px`) from a zero-height
+ * parent. The DOM does not clip, so web rendered it anyway; Android does not
+ * tolerate it, and `bottom-center` — the DEFAULT position — painted nothing at all.
+ *
+ * Two things that look like they would work here and do NOT:
+ *  - `justifyContent` cannot place the rows. They are absolutely positioned, so it
+ *    has no effect on them; the row's own anchor (`top: 0` / `bottom: 0` /
+ *    `top: '50%'`) does the placing.
+ *  - PADDING cannot supply the edge offset. In CSS an absolutely positioned child
+ *    resolves against its ancestor's PADDING BOX, so padding does not inset it —
+ *    while Yoga DOES inset it. Padding would have moved the rows on native and left
+ *    them at the screen edge on web. The offset therefore stays an inset on the
+ *    container itself, which behaves identically on both.
+ */
+export const getContainerStyle = (): ViewStyle => ({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  alignItems: 'center',
+  // Enter and exit animations translate a row past the container edge on purpose.
+  overflow: 'visible',
+});
+
+/**
+ * How far the stack sits from its screen edge. A falsy `offset` means "derive from
+ * the safe area": `inset + 8`, or 16 when there is no inset.
+ *
+ * `Positioner` applies this over ONE of `getContainerStyle`'s four pinned edges;
+ * `calculateOutsidePressableArea` reads the same numbers as a plain edge distance.
+ */
+export const getInsetValues = ({
+  position,
+  offset,
+  safeAreaInsets,
+}: {
+  position: ToastPosition;
+  offset?: number;
+  safeAreaInsets?: { top: number; bottom: number };
+}): { top?: number; bottom?: number } => {
+  const { top = 0, bottom = 0 } = safeAreaInsets || {};
+
+  if (position === 'bottom-center') {
+    if (offset) return { bottom: offset };
+    return { bottom: bottom > 0 ? bottom + 8 : 16 };
+  }
+
+  if (position === 'top-center') {
+    if (offset) return { top: offset };
+    return { top: top > 0 ? top + 8 : 16 };
+  }
+
+  return {};
+};
+
+/**
+ * The area OUTSIDE the toast stack, used to collapse an expanded stack on press.
+ * It deliberately stops short of the stack itself so a press on a toast still
+ * reaches the toast.
+ */
+export const calculateOutsidePressableArea = ({
+  position,
+  toastHeights,
+  gap,
+  visibleToasts,
+  insetValues,
+}: {
+  position: ToastPosition;
+  toastHeights: Record<string | number, number>;
+  gap: number;
+  visibleToasts: number;
+  insetValues: { top?: number; bottom?: number };
+}): ViewStyle => {
+  const measuredHeights = Object.values(toastHeights);
+  const hasMeasurements = measuredHeights.length > 0;
+
+  // Upstream counts `min(measured.length, visibleToasts)` rows and only THEN
+  // falls back to the estimate — which makes the fallback multiply by zero, so
+  // an unmeasured stack reserved nothing and the press area ran underneath it.
+  // Reserve a full stack instead: this area is only rendered while the stack is
+  // expanded, so over-reserving is the safe direction.
+  const rowCount = hasMeasurements
+    ? Math.min(measuredHeights.length, visibleToasts)
+    : visibleToasts;
+
+  const totalToastHeight = hasMeasurements
+    ? measuredHeights.slice(0, rowCount).reduce((sum, height) => sum + height, 0)
+    : ESTIMATED_TOAST_HEIGHT * rowCount;
+
+  const gapHeight = gap * Math.max(0, rowCount - 1);
+  const stackHeight = totalToastHeight + gapHeight + OUTSIDE_PRESS_PADDING;
+
+  if (position === 'top-center') {
+    const topOffset = (insetValues.top || 40) + stackHeight;
+    return {
+      position: 'absolute',
+      top: topOffset,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    };
+  }
+
+  if (position === 'bottom-center') {
+    const bottomOffset = (insetValues.bottom || 40) + stackHeight;
+    return {
+      position: 'absolute',
+      top: 0,
+      bottom: bottomOffset,
+      left: 0,
+      right: 0,
+    };
+  }
+
+  return { display: 'none' };
+};

package/src/toast/toast-comparator.ts

@@ -0,0 +1,41 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/toast-comparator.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * Drives `autoWiggleOnUpdate: 'toast-change'`: an update-by-id only wiggles the
+ * row when something a user can actually see changed. `description` is
+ * deliberately typed `string` (not `ReactNode`) so this stays a value compare —
+ * a ReactNode would differ on every parent re-render and wiggle forever.
+ */
+import { isToastAction, type ToastProps } from './types';
+
+const areActionsEqual = (a: ToastProps['action'], b: ToastProps['action']) => {
+  if (isToastAction(a) && isToastAction(b)) {
+    return a.label === b.label;
+  }
+
+  return a === b;
+};
+
+export const areToastsEqual = (a: ToastProps, b: ToastProps) => {
+  return (
+    a.id === b.id &&
+    a.title === b.title &&
+    a.variant === b.variant &&
+    a.description === b.description &&
+    a.closeButton === b.closeButton &&
+    a.invert === b.invert &&
+    a.position === b.position &&
+    a.dismissible === b.dismissible &&
+    a.icon === b.icon &&
+    a.jsx === b.jsx &&
+    a.duration === b.duration &&
+    a.style === b.style &&
+    a.styles === b.styles &&
+    a.important === b.important &&
+    a.richColors === b.richColors &&
+    a.promiseOptions === b.promiseOptions &&
+    areActionsEqual(a.action, b.action) &&
+    areActionsEqual(a.cancel, b.cancel)
+  );
+};

package/src/toast/toast-fns.ts

@@ -0,0 +1,104 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/toast-fns.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * This module is the ONLY translation layer between the public API and the
+ * engine:
+ *   - the public option `type` becomes the internal `variant` (`'default'` →
+ *     absent, so an unqualified toast renders neutral);
+ *   - a `ReactNode` content becomes either `title` (string) or `jsx` (element).
+ * Nothing downstream of here knows the word `type`.
+ */
+import { isValidElement, type ReactElement, type ReactNode } from 'react';
+import { toastStore } from './toast-store';
+import type {
+  PromiseToastOptions,
+  ToastFn,
+  ToastOptions,
+  ToastType,
+  ToastVariant,
+} from './types';
+
+const TYPE_TO_VARIANT: Record<ToastType, ToastVariant | undefined> = {
+  default: undefined,
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  loading: 'loading',
+};
+
+const resolveContent = (
+  content: ReactNode,
+): { title: string; jsx?: ReactNode } => {
+  if (typeof content === 'string') {
+    return { title: content };
+  }
+  if (isValidElement(content)) {
+    // A custom element owns the whole row, so there is no title to render.
+    return { title: '', jsx: content };
+  }
+  throw new Error(
+    `Toast can be a string or a React element, got ${typeof content}`,
+  );
+};
+
+const dispatch = (
+  content: ReactNode,
+  options: ToastOptions,
+  variant?: ToastVariant,
+): string | number => {
+  const { type, ...rest } = options;
+  return toastStore.addToast({
+    ...rest,
+    ...resolveContent(content),
+    variant: variant ?? (type === undefined ? undefined : TYPE_TO_VARIANT[type]),
+  });
+};
+
+export const toast: ToastFn = Object.assign(
+  (content: ReactNode, options: ToastOptions = {}) => dispatch(content, options),
+  {
+    success: (content: ReactNode, options: Omit<ToastOptions, 'type'> = {}) =>
+      dispatch(content, options, 'success'),
+
+    error: (content: ReactNode, options: Omit<ToastOptions, 'type'> = {}) =>
+      dispatch(content, options, 'error'),
+
+    warning: (content: ReactNode, options: Omit<ToastOptions, 'type'> = {}) =>
+      dispatch(content, options, 'warning'),
+
+    info: (content: ReactNode, options: Omit<ToastOptions, 'type'> = {}) =>
+      dispatch(content, options, 'info'),
+
+    loading: (content: ReactNode, options: Omit<ToastOptions, 'type'> = {}) =>
+      dispatch(content, options, 'loading'),
+
+    custom: (jsx: ReactElement, options: Omit<ToastOptions, 'type'> = {}) =>
+      dispatch(jsx, options),
+
+    promise: <T,>(promise: Promise<T>, options: PromiseToastOptions<T>) => {
+      const { loading, success, error, styles, ...rest } = options;
+      return toastStore.addToast({
+        ...rest,
+        title: loading,
+        variant: 'loading',
+        styles: styles?.loading,
+        promiseOptions: {
+          // Mapping the result to its title here is what keeps `PromiseOptions`
+          // non-generic — the store never sees the caller's result type.
+          promise: promise.then(success),
+          loading,
+          error,
+          styles,
+        },
+      });
+    },
+
+    dismiss: (id?: string | number) => toastStore.dismissToast(id),
+
+    wiggle: (id: string | number) => {
+      toastStore.wiggleToast(id);
+    },
+  },
+);