@oxyhq/bloom 0.50.2 → 0.51.0

package/src/toast/ToastContent.tsx

@@ -0,0 +1,405 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/toast.tsx:440-689
+ * (MIT © Gunnar Torfi Steinarsson — see the top-level NOTICE), restyled with
+ * Bloom's design tokens and absorbing the surface/text/action styling from
+ * Bloom's previous `Toast.tsx`.
+ *
+ * This is the DEFAULT renderer. A consumer who passes `jsx` (via `toast.custom`)
+ * owns the whole row and this file is not involved.
+ *
+ * W11 — the surface elevation comes from `bloomShadowStyle('s')`, which is a
+ * `boxShadow` on web and RN `shadow*`/`elevation` on native. Upstream hardcodes
+ * iOS-only `shadowOpacity`/`shadowRadius` values, so its toast has no shadow on
+ * web (no `boxShadow`) and none on iOS either (no `shadowColor`).
+ */
+import * as React from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { useInteractionState } from '../hooks/useInteractionState';
+import { TimesLarge_Stroke2_Corner0_Rounded as TimesIcon } from '../icons/Times';
+import { borderRadius, fontSize, space } from '../styles/tokens';
+import { ToastIcon } from './ToastIcon';
+import { useToastColors, type ToastActionColors } from './use-toast-colors';
+import {
+  isToastAction,
+  type ToastAction,
+  type ToasterProps,
+  type ToastProps,
+} from './types';
+
+export type ToastContentProps = Pick<
+  ToastProps,
+  | 'id'
+  | 'title'
+  | 'description'
+  | 'variant'
+  | 'icon'
+  | 'action'
+  | 'cancel'
+  | 'close'
+  | 'closeButton'
+  | 'dismissible'
+  | 'richColors'
+  | 'promiseOptions'
+  | 'styles'
+  | 'style'
+  | 'actionButtonStyle'
+  | 'actionButtonTextStyle'
+  | 'cancelButtonStyle'
+  | 'cancelButtonTextStyle'
+  | 'allowFontScaling'
+  | 'maxFontSizeMultiplier'
+  | 'backgroundComponent'
+> & {
+  unstyled: boolean;
+  onDismiss: (id: string | number) => void;
+  /** Variant icon overrides from the outlet (`icons={{ success: … }}`). */
+  icons: ToastIcons;
+};
+
+type ToastIcons = NonNullable<ToasterProps['icons']>;
+
+export function ToastContent({
+  id,
+  title,
+  description,
+  variant,
+  icon,
+  icons,
+  action,
+  cancel,
+  close,
+  closeButton,
+  dismissible,
+  richColors = false,
+  promiseOptions,
+  styles: styleOverrides,
+  style,
+  unstyled,
+  onDismiss,
+  actionButtonStyle,
+  actionButtonTextStyle,
+  cancelButtonStyle,
+  cancelButtonTextStyle,
+  allowFontScaling,
+  maxFontSizeMultiplier,
+  backgroundComponent,
+}: ToastContentProps) {
+  const colors = useToastColors({ variant, richColors });
+  const isLoading = Boolean(promiseOptions) || variant === 'loading';
+
+  const surfaceStyle: ViewStyle | undefined = unstyled
+    ? undefined
+    : {
+        backgroundColor: colors.surface,
+        borderColor: colors.border,
+      };
+
+  const textProps = { allowFontScaling, maxFontSizeMultiplier };
+
+  return (
+    <View
+      style={[
+        unstyled ? undefined : styles.surface,
+        surfaceStyle,
+        // A custom background needs the surface transparent and clipped so it can
+        // paint edge to edge underneath the content.
+        backgroundComponent ? styles.hostedBackground : undefined,
+        styleOverrides?.toast,
+        style,
+      ]}
+    >
+      {backgroundComponent}
+      <View
+        style={[
+          unstyled ? undefined : styles.row,
+          // With a description the row is tall, so the icon sits at the top
+          // instead of being centred against two lines of text.
+          unstyled || !description ? undefined : styles.rowWithDescription,
+          backgroundComponent ? styles.aboveBackground : undefined,
+          styleOverrides?.toastContent,
+        ]}
+      >
+        <ToastLeadingIcon
+          variant={variant}
+          icon={icon}
+          icons={icons}
+          isLoading={isLoading}
+          color={colors.icon}
+        />
+
+        <View style={[styles.textContainer, styleOverrides?.textContainer]}>
+          <Text
+            {...textProps}
+            style={[
+              unstyled ? undefined : styles.title,
+              unstyled ? undefined : { color: colors.title },
+              styleOverrides?.title,
+            ]}
+          >
+            {title}
+          </Text>
+
+          {description ? (
+            <Text
+              {...textProps}
+              style={[
+                unstyled ? undefined : styles.description,
+                unstyled ? undefined : { color: colors.description },
+                styleOverrides?.description,
+              ]}
+            >
+              {description}
+            </Text>
+          ) : null}
+
+          {action || cancel ? (
+            <View
+              style={[
+                unstyled ? undefined : styles.buttons,
+                styleOverrides?.buttons,
+              ]}
+            >
+              {isToastAction(action) ? (
+                <ToastActionButton
+                  action={action}
+                  colors={colors.action}
+                  buttonStyle={actionButtonStyle}
+                  textStyle={actionButtonTextStyle}
+                  {...textProps}
+                />
+              ) : (
+                action
+              )}
+              {isToastAction(cancel) ? (
+                <ToastActionButton
+                  action={{
+                    label: cancel.label,
+                    onClick: () => {
+                      cancel.onClick();
+                      onDismiss(id);
+                    },
+                  }}
+                  colors={colors.action}
+                  transparent
+                  buttonStyle={cancelButtonStyle}
+                  textStyle={[{ color: colors.cancelText }, cancelButtonTextStyle]}
+                  {...textProps}
+                />
+              ) : (
+                cancel
+              )}
+            </View>
+          ) : null}
+        </View>
+
+        <ToastCloseButton
+          id={id}
+          close={close}
+          closeButton={closeButton}
+          dismissible={dismissible}
+          color={colors.closeButton}
+          onDismiss={onDismiss}
+          buttonStyle={styleOverrides?.closeButton}
+          iconStyle={styleOverrides?.closeButtonIcon}
+        />
+      </View>
+    </View>
+  );
+}
+
+ToastContent.displayName = 'ToastContent';
+
+function ToastLeadingIcon({
+  variant,
+  icon,
+  icons,
+  isLoading,
+  color,
+}: {
+  variant: ToastProps['variant'];
+  icon: ToastProps['icon'];
+  icons: ToastIcons;
+  isLoading: boolean;
+  color: string;
+}) {
+  if (isLoading) {
+    return <>{icons.loading ?? <ToastIcon variant="loading" color={color} />}</>;
+  }
+  if (icon) {
+    return <>{icon}</>;
+  }
+  if (variant && icons[variant]) {
+    return <>{icons[variant]}</>;
+  }
+  return <ToastIcon variant={variant} color={color} />;
+}
+
+function ToastActionButton({
+  action,
+  colors,
+  transparent,
+  buttonStyle,
+  textStyle,
+  allowFontScaling,
+  maxFontSizeMultiplier,
+}: {
+  action: ToastAction;
+  colors: ToastActionColors;
+  transparent?: boolean;
+  buttonStyle?: ViewStyle;
+  textStyle?: TextStyle | Array<TextStyle | undefined>;
+  allowFontScaling?: boolean;
+  maxFontSizeMultiplier?: number;
+}) {
+  // Driven from state rather than Pressable's function-form `style`, which
+  // react-native-css swallows on web (dropping the base padding/radius).
+  const { state: pressed, onIn, onOut } = useInteractionState();
+
+  return (
+    <Pressable
+      onPress={action.onClick}
+      onPressIn={onIn}
+      onPressOut={onOut}
+      accessibilityRole="button"
+      style={[
+        styles.actionButton,
+        transparent
+          ? undefined
+          : {
+              backgroundColor: pressed
+                ? colors.pressedBackground
+                : colors.background,
+            },
+        buttonStyle,
+      ]}
+    >
+      <Text
+        numberOfLines={1}
+        allowFontScaling={allowFontScaling}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
+        style={[
+          styles.actionButtonText,
+          { color: pressed ? colors.pressedText : colors.text },
+          textStyle,
+        ]}
+      >
+        {action.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+function ToastCloseButton({
+  id,
+  close,
+  closeButton,
+  dismissible,
+  color,
+  onDismiss,
+  buttonStyle,
+  iconStyle,
+}: {
+  id: string | number;
+  close: ToastProps['close'];
+  closeButton: ToastProps['closeButton'];
+  dismissible: boolean | undefined;
+  color: string;
+  onDismiss: (id: string | number) => void;
+  buttonStyle?: ViewStyle;
+  iconStyle?: ViewStyle;
+}) {
+  const handlePress = React.useCallback(() => {
+    onDismiss(id);
+  }, [onDismiss, id]);
+
+  if (!dismissible) {
+    return null;
+  }
+  if (close) {
+    return <>{close}</>;
+  }
+  if (!closeButton) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      hitSlop={CLOSE_BUTTON_HIT_SLOP}
+      accessibilityRole="button"
+      style={buttonStyle}
+    >
+      <TimesIcon size="md" fill={color} style={iconStyle} />
+    </Pressable>
+  );
+}
+
+const CLOSE_BUTTON_HIT_SLOP = 10;
+
+const styles = StyleSheet.create({
+  surface: {
+    justifyContent: 'center',
+    paddingHorizontal: space.lg,
+    paddingVertical: space.md,
+    marginHorizontal: space.lg,
+    borderRadius: borderRadius.md,
+    borderWidth: StyleSheet.hairlineWidth,
+    ...bloomShadowStyle('s'),
+  },
+  hostedBackground: {
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+  },
+  aboveBackground: {
+    position: 'relative',
+    zIndex: 1,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: space.md,
+  },
+  rowWithDescription: {
+    alignItems: 'flex-start',
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: fontSize.md,
+    fontWeight: '600',
+    lineHeight: 20,
+  },
+  description: {
+    fontSize: fontSize.sm,
+    lineHeight: 20,
+    marginTop: space._2xs,
+  },
+  buttons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: space.sm,
+    marginTop: space.md,
+  },
+  actionButton: {
+    flexGrow: 0,
+    alignSelf: 'flex-start',
+    paddingHorizontal: space.md,
+    paddingVertical: space.xs,
+    borderRadius: borderRadius.sm,
+  },
+  actionButtonText: {
+    fontSize: fontSize.sm,
+    fontWeight: '600',
+    lineHeight: 20,
+  },
+});

package/src/toast/ToastHost.native.tsx

@@ -0,0 +1,31 @@
+/**
+ * Bloom-original — the NATIVE toast host. Metro selects this file; every other
+ * bundler resolves the sibling `ToastHost.tsx` (web/default).
+ *
+ * On native the rows render inline in the app's own view hierarchy, which is what
+ * makes them respect the safe area and the app-root `GestureHandlerRootView` that
+ * consumers already mount. So there is nothing to portal — the host only applies
+ * the optional overlay wrapper.
+ *
+ * `react-native-screens` is deliberately NOT imported (D6). Upstream statically
+ * imports `FullWindowOverlay` from it, an undeclared dependency that only works
+ * because apps happen to install it. A consumer who needs a toast above a native
+ * iOS modal injects it themselves:
+ *
+ * ```tsx
+ * import { FullWindowOverlay } from 'react-native-screens';
+ * <ToastOutlet ToasterOverlayWrapper={FullWindowOverlay} />
+ * ```
+ */
+import * as React from 'react';
+
+import type { ToastHostProps } from './types';
+
+export function ToastHost({ children, ToasterOverlayWrapper }: ToastHostProps) {
+  if (ToasterOverlayWrapper) {
+    return <ToasterOverlayWrapper>{children}</ToasterOverlayWrapper>;
+  }
+  return <>{children}</>;
+}
+
+ToastHost.displayName = 'ToastHost';

package/src/toast/ToastHost.tsx

@@ -0,0 +1,67 @@
+/**
+ * Bloom-original — the WEB / default toast host. Metro selects
+ * `ToastHost.native.tsx` on iOS and Android; every other bundler (and a
+ * consumer's `tsc`) sees this file, matching the `.native` split convention
+ * `design-tokens/shadows.ts` already uses.
+ *
+ * Two jobs, both of which are why the rest of the engine can stay universal:
+ *
+ *  - W7: it portals into `#bloom-portal-root` and provides a `position: fixed`,
+ *    full-viewport containing block. `Positioner`'s `position: 'absolute'` would
+ *    otherwise anchor to the nearest positioned ancestor — react-native-web's
+ *    `View` defaults to `relative`, so a deeply-mounted outlet would anchor to a
+ *    provider somewhere in the tree instead of the viewport. A `Positioner.web`
+ *    with `position: fixed` would NOT be enough: `fixed` is still contained by any
+ *    ancestor `transform`/`filter`/`contain`, which is exactly why `Dialog` and
+ *    `BottomSheet` portal too. Sharing the one portal root also keeps a single
+ *    document-level overlay layer rather than a second competing one.
+ *  - W8: portaled content sits outside the app-root `GestureHandlerRootView`, so
+ *    swipe-to-dismiss would never receive touches. This provides its own, exactly
+ *    as `bottom-sheet/index.web.tsx` does. Web consumers need no setup.
+ *
+ * `pointerEvents: 'box-none'` keeps the empty area click-through while the rows
+ * themselves stay interactive.
+ */
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import { Portal } from '../portal/index.web';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { Z_INDEX } from '../styles/z-index';
+import type { ToastHostProps } from './types';
+
+export function ToastHost({ children, ToasterOverlayWrapper }: ToastHostProps) {
+  const content = (
+    <GestureHandlerRootView style={styles.host}>
+      {children}
+    </GestureHandlerRootView>
+  );
+
+  return (
+    <Portal>
+      {ToasterOverlayWrapper ? (
+        <ToasterOverlayWrapper>{content}</ToasterOverlayWrapper>
+      ) : (
+        content
+      )}
+    </Portal>
+  );
+}
+
+ToastHost.displayName = 'ToastHost';
+
+const styles = StyleSheet.create({
+  host: {
+    // Full-viewport containing block for `Positioner`'s `position: 'absolute'`.
+    position: WEB_POSITION_FIXED,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    // Inside `#bloom-portal-root` (which owns the document layer at 999999),
+    // this keeps toasts above Dialog's surface (60) and tooltips (70).
+    zIndex: Z_INDEX.toast,
+    pointerEvents: 'box-none',
+  },
+});

package/src/toast/ToastIcon.tsx

@@ -0,0 +1,55 @@
+/**
+ * Replaces sonner-native v0.26.4's `src/icons.tsx` (MIT © Gunnar Torfi
+ * Steinarsson — see the top-level NOTICE), which ships its own inline SVG paths
+ * and imports `react-native-svg` directly. Bloom maps variants onto its own icon
+ * set instead, so the toast picks up icon changes with the rest of the library.
+ *
+ * The spinner is RN's `ActivityIndicator` rather than Bloom's `Loading`: the
+ * `./loading` subpath is web-forked, so importing it from this universal file
+ * would resolve to the native (Reanimated) build under bundlers that do not
+ * apply `.web` extension resolution, and to the web build under those that do —
+ * platform-dependent behaviour from one import. `ActivityIndicator` is universal
+ * (react-native-web renders a CSS-animated SVG, so nothing depends on a
+ * Reanimated mapper ticking on web) and a consumer who wants Bloom's spinner can
+ * still pass `icons={{ loading: <Loading … /> }}` on the outlet.
+ */
+import { ActivityIndicator } from 'react-native';
+
+import { CircleCheck_Stroke2_Corner0_Rounded as CircleCheckIcon } from '../icons/CircleCheck';
+import { CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon } from '../icons/CircleInfo';
+import { CircleX_Stroke2_Corner0_Rounded as CircleXIcon } from '../icons/CircleX';
+import { Warning_Stroke2_Corner0_Rounded as WarningIcon } from '../icons/Warning';
+import type { ToastVariant } from './types';
+
+const ICON_MAP: Record<
+  Exclude<ToastVariant, 'loading'>,
+  typeof CircleCheckIcon
+> = {
+  success: CircleCheckIcon,
+  error: CircleXIcon,
+  warning: WarningIcon,
+  info: CircleInfoIcon,
+};
+
+export function ToastIcon({
+  variant,
+  color,
+}: {
+  variant: ToastVariant | undefined;
+  color: string;
+}) {
+  // No variant means a neutral toast, which carries no icon of its own — a
+  // caller who wants one passes `icon`.
+  if (!variant) {
+    return null;
+  }
+
+  if (variant === 'loading') {
+    return <ActivityIndicator size="small" color={color} />;
+  }
+
+  const Icon = ICON_MAP[variant];
+  return <Icon fill={color} size="md" />;
+}
+
+ToastIcon.displayName = 'ToastIcon';