react-native-terra-ui 0.10.0 → 0.10.2

package/src/components/toast/hooks/use-toast-manager.tsx

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { DefaultToast } from "../Toast";
+import type {
+  ToastComponentProps,
+  ToastId,
+  ToastItem,
+  ToastManager,
+  ToastPlacement,
+  ToastShowConfig,
+} from "../types";
+import { setToastManager } from "../utils/controller";
+
+function createDefaultToastComponent(config: ToastShowConfig) {
+  return ({ id, hide, show }: ToastComponentProps) => (
+    <DefaultToast
+      id={id}
+      hide={(toastId) => hide(String(toastId))}
+      variant={config.variant}
+      label={config.label}
+      description={config.description}
+      icon={config.icon}
+      actionLabel={config.actionLabel}
+      showCloseButton={config.showCloseButton}
+      onActionPress={() => config.onActionPress?.({ show, hide })}
+    />
+  );
+}
+
+export function useToastManager(defaultPlacement: ToastPlacement, defaultDuration: number) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  // Synchronous state lets batched calls and lifecycle callbacks see the latest stack.
+  const toastsRef = useRef<ToastItem[]>([]);
+  const counterRef = useRef(0);
+  const timeoutsRef = useRef(new Map<ToastId, ReturnType<typeof setTimeout>>());
+
+  const commit = useCallback((next: ToastItem[]) => {
+    toastsRef.current = next;
+    setToasts(next);
+  }, []);
+
+  const clearToastTimeout = useCallback((id: ToastId) => {
+    const timeout = timeoutsRef.current.get(id);
+    if (timeout !== undefined) clearTimeout(timeout);
+    timeoutsRef.current.delete(id);
+  }, []);
+
+  const hide = useCallback<ToastManager["hide"]>(
+    (id) => {
+      const current = toastsRef.current;
+      const ids = new Set(
+        id === undefined ? current.slice(-1).map((toast) => toast.id) : Array.isArray(id) ? id : [id]
+      );
+      const removed = id === "all" ? current : current.filter((toast) => ids.has(toast.id));
+      if (removed.length === 0) return;
+
+      for (const toast of removed) clearToastTimeout(toast.id);
+      commit(id === "all" ? [] : current.filter((toast) => !ids.has(toast.id)));
+      for (const toast of removed) toast.onHide?.();
+    },
+    [clearToastTimeout, commit]
+  );
+
+  const show = useCallback<ToastManager["show"]>(
+    (options) => {
+      const config = typeof options === "string" ? { label: options } : options;
+      const item: ToastItem = {
+        id: config.id ?? `toast-${Date.now()}-${counterRef.current++}`,
+        component: "component" in config ? config.component : createDefaultToastComponent(config),
+        duration: config.duration ?? defaultDuration,
+        placement: config.placement ?? defaultPlacement,
+        onHide: config.onHide,
+      };
+      const current = toastsRef.current;
+      const removed = current.filter((toast) => toast.placement !== item.placement);
+      for (const toast of removed) clearToastTimeout(toast.id);
+      clearToastTimeout(item.id);
+      commit([
+        ...current.filter((toast) => toast.placement === item.placement && toast.id !== item.id),
+        item,
+      ]);
+
+      if (item.duration !== "persistent" && Number.isFinite(item.duration) && item.duration > 0) {
+        timeoutsRef.current.set(
+          item.id,
+          setTimeout(() => hide(item.id), item.duration)
+        );
+      }
+
+      // Finish the transaction before callbacks can replace or dismiss this item.
+      for (const toast of removed) toast.onHide?.();
+      if (toastsRef.current.includes(item)) config.onShow?.();
+      return item.id;
+    },
+    [clearToastTimeout, commit, defaultDuration, defaultPlacement, hide]
+  );
+
+  const manager = useMemo<ToastManager>(() => ({ show, hide }), [show, hide]);
+
+  useEffect(() => {
+    setToastManager(manager);
+    return () => setToastManager(null);
+  }, [manager]);
+
+  useEffect(() => {
+    const timeouts = timeoutsRef.current;
+    return () => {
+      for (const timeout of timeouts.values()) clearTimeout(timeout);
+      timeouts.clear();
+    };
+  }, []);
+
+  return { toasts, manager };
+}

package/src/components/toast/parts/ToastAnimatedItem.tsx

@@ -1,16 +1,15 @@
 import type { ReactElement } from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 
 import Animated, {
   Easing,
-  Extrapolation,
-  interpolate,
   Keyframe,
   type SharedValue,
   useAnimatedStyle,
   withSpring,
   withTiming,
 } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
 
 import type { ToastId, ToastPlacement } from "../types";
 
@@ -21,7 +20,8 @@ export interface ToastAnimatedItemProps {
   index: number;
   maxVisibleToasts: number;
   placement: ToastPlacement;
-  total: SharedValue<number>;
+  total: number;
+  frontId: ToastId;
 }
 
 export const enteringTop = new Keyframe({
@@ -72,12 +72,7 @@ export const exitingBottom = new Keyframe({
   },
 }).duration(150);
 
-const opacityValue = [1, 0] as [number, number];
-const opacityTimingConfig = { duration: 300 };
-const translateYValue = [0, 10] as [number, number];
-const translateYTimingConfig = { duration: 300 };
-const scaleValue = [1, 0.97] as [number, number];
-const scaleTimingConfig = { duration: 300 };
+const timingConfig = { duration: 300 };
 
 export function ToastAnimatedItem({
   children,
@@ -87,28 +82,14 @@ export function ToastAnimatedItem({
   maxVisibleToasts,
   placement,
   total,
+  frontId,
 }: ToastAnimatedItemProps) {
+  const depth = total - index - 1;
+  const isVisible = depth < maxVisibleToasts;
   const containerStyle = useAnimatedStyle(() => {
-    const heightEntries = Object.entries(heights.value);
-    const lastToastId = heightEntries[heightEntries.length - 1]?.[0];
-    const lastToastHeight = lastToastId ? heights.value[lastToastId] : undefined;
-    const totalValue = total.value;
+    const lastToastHeight = heights.value[frontId];
     const sign = placement === "top" ? 1 : -1;
 
-    const inputRange = [totalValue - 1, totalValue - 2];
-    const opacityInputRange = [totalValue - maxVisibleToasts, totalValue - maxVisibleToasts - 1];
-
-    const opacity = interpolate(index, opacityInputRange, opacityValue);
-    const translateY = interpolate(
-      index,
-      inputRange,
-      [translateYValue[0], translateYValue[1] * sign],
-      Extrapolation.CLAMP
-    );
-    const scale = interpolate(index, inputRange, scaleValue, {
-      extrapolateLeft: Extrapolation.CLAMP,
-    });
-
     return {
       height: lastToastHeight
         ? withSpring(lastToastHeight, {
@@ -117,11 +98,10 @@ export function ToastAnimatedItem({
             mass: 3,
           })
         : undefined,
-      pointerEvents: opacity === 0 ? "none" : "auto",
-      opacity: withTiming(opacity, opacityTimingConfig),
+      opacity: withTiming(isVisible ? 1 : 0, timingConfig),
       transform: [
-        { translateY: withTiming(translateY, translateYTimingConfig) },
-        { scale: withTiming(scale, scaleTimingConfig) },
+        { translateY: withTiming(Math.min(depth, 1) * 10 * sign, timingConfig) },
+        { scale: withTiming(Math.max(0, 1 - depth * 0.03), timingConfig) },
       ],
       zIndex: 1000 + index,
     };
@@ -134,23 +114,26 @@ export function ToastAnimatedItem({
       pointerEvents="box-none"
       style={[styles.position, placement === "top" ? styles.top : styles.bottom]}
     >
-      <Animated.View style={containerStyle}>{children}</Animated.View>
-      <View
-        pointerEvents="none"
-        aria-hidden
-        importantForAccessibility="no-hide-descendants"
-        accessibilityElementsHidden
-        style={styles.measurement}
-        onLayout={(event) => {
-          const measuredHeight = event.nativeEvent.layout.height;
-          heights.value = {
-            ...heights.value,
-            [id]: measuredHeight,
-          };
-        }}
+      <Animated.View
+        style={containerStyle}
+        pointerEvents={isVisible ? "box-none" : "none"}
+        accessibilityElementsHidden={!isVisible}
+        importantForAccessibility={isVisible ? "auto" : "no-hide-descendants"}
+        aria-hidden={!isVisible}
       >
-        {process.env.NODE_ENV === "test" ? null : children}
-      </View>
+        {/* An unconstrained child measures natural height without mounting a second copy. */}
+        <View
+          style={[styles.content, placement === "top" ? styles.top : styles.bottom]}
+          onLayout={(event) => {
+            const height = event.nativeEvent.layout.height;
+            if (heights.value[id] !== height) {
+              heights.value = { ...heights.value, [id]: height };
+            }
+          }}
+        >
+          {children}
+        </View>
+      </Animated.View>
     </Animated.View>
   );
 }
@@ -167,10 +150,9 @@ const styles = StyleSheet.create({
   bottom: {
     bottom: 0,
   },
-  measurement: {
+  content: {
     position: "absolute",
     left: 0,
     right: 0,
-    opacity: 0,
   },
 });

package/src/components/toast/parts/ToastOverlay.ios.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+import { FullWindowOverlay } from "react-native-screens";
+
+/**
+ * Lifts the toast viewport into a window of its own, above every presented
+ * view controller.
+ *
+ * Without this, a toast raised from a screen presented as `modal` or
+ * `formSheet` is invisible. `ToastProvider` sits above the app's navigator, so
+ * its viewport belongs to the root view controller's view; UIKit presents a
+ * sheet as a *separate* view controller on top of that one. They are different
+ * presentation layers, so no `zIndex` or `elevation` can lift the viewport over
+ * the sheet — the toast is mounted and animating, just underneath. The reader
+ * presses something, the app reports the result, and nothing appears.
+ *
+ * `FullWindowOverlay` hosts its children in its own `UIWindow`, which sits
+ * above presented controllers, so the viewport paints over a sheet the same way
+ * it paints over an ordinary screen.
+ *
+ * It covers the whole window, but it does not swallow the app's touches:
+ * `RNSFullWindowOverlay`'s `pointInside:` walks its subviews and answers NO
+ * anywhere they are not, so presses fall through to whatever is underneath.
+ *
+ * Mounted only alongside a non-empty viewport — `ToastViewport` returns `null`
+ * before reaching this — so an idle app carries no extra window.
+ */
+export function ToastOverlay({ children }: { children: ReactNode }) {
+  return <FullWindowOverlay>{children}</FullWindowOverlay>;
+}

package/src/components/toast/parts/ToastOverlay.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+/**
+ * Hosts the toast viewport where it already is, because on Android it is
+ * already in the right place.
+ *
+ * The iOS variant explains the problem: a sheet there is a separate view
+ * controller, so a toast in the root tree paints underneath it. Android does
+ * not have that problem for these screens. `react-native-screens` handles
+ * `formSheet` as a `StackPresentation` inside the screen stack (see
+ * `Screen.kt`), which lives in the Activity's own window — the same window as
+ * this provider — so the viewport's `elevation: 9999` puts it on top the
+ * ordinary way. Verified on an API 36 emulator: a toast raised from a
+ * `formSheet` route renders over that sheet.
+ *
+ * Not to be confused with `ScreenModalFragment`, which *is* a
+ * `BottomSheetDialogFragment` and so does carry its own `Window`. It backs a
+ * different presentation, not the `formSheet` route above. A toast raised from
+ * something hosted in a real `Dialog` — that fragment, or React Native's own
+ * `Modal` — would still be behind it, and `elevation` cannot cross windows.
+ * Untested, and left alone: `FullWindowOverlay` is iOS-only (elsewhere it warns
+ * and renders a plain `View`), so the remedy there would be to own a window
+ * too, via a React Native `Modal`, which brings its own back-button and
+ * touch-capture behaviour.
+ */
+export function ToastOverlay({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/src/components/toast/parts/ToastViewport.tsx

@@ -0,0 +1,104 @@
+import { useEffect } from "react";
+import { Keyboard, Platform } from "react-native";
+
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import type { ToastId, ToastItem, ToastManager, ToastPlacement, ToastProviderProps } from "../types";
+import { ToastAnimatedItem } from "./ToastAnimatedItem";
+import { ToastOverlay } from "./ToastOverlay";
+
+interface ToastViewportProps {
+  placement: ToastPlacement;
+  toasts: ToastItem[];
+  manager: ToastManager;
+  maxVisibleToasts: number;
+  offset?: ToastProviderProps["offset"];
+}
+
+export function ToastViewport({ placement, toasts, manager, maxVisibleToasts, offset }: ToastViewportProps) {
+  const safeAreaInsets = useSafeAreaInsets();
+  const heights = useSharedValue<Record<ToastId, number>>({});
+  const keyboardHeight = useSharedValue(0);
+
+  const baseBottom = offset?.bottom ?? safeAreaInsets.bottom + (Platform.OS === "ios" ? 6 : 12);
+  const baseTop = offset?.top ?? safeAreaInsets.top + (Platform.OS === "ios" ? 0 : 12);
+
+  useEffect(() => {
+    if (placement !== "bottom") return;
+    const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = Keyboard.addListener(showEvent, (e) => {
+      keyboardHeight.value = withTiming(e.endCoordinates.height);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      keyboardHeight.value = withTiming(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardHeight, placement]);
+
+  const gap = Platform.OS === "ios" ? 6 : 12;
+
+  const keyboardStyle = useAnimatedStyle(() => {
+    if (placement === "top") return { top: baseTop };
+    if (keyboardHeight.value > 0) {
+      return { bottom: keyboardHeight.value + gap };
+    }
+    return { bottom: baseBottom };
+  });
+
+  useEffect(() => {
+    const activeIds = new Set(toasts.map((toast) => toast.id));
+    const nextHeights: Record<ToastId, number> = {};
+    for (const [id, height] of Object.entries(heights.value)) {
+      if (activeIds.has(id)) {
+        nextHeights[id] = height;
+      }
+    }
+    heights.value = nextHeights;
+  }, [heights, toasts]);
+
+  const frontToast = toasts[toasts.length - 1];
+  if (!frontToast) return null;
+
+  return (
+    <ToastOverlay>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[
+          {
+            position: "absolute",
+            zIndex: 9999,
+            elevation: 9999,
+            left: offset?.left ?? safeAreaInsets.left + 12,
+            right: offset?.right ?? safeAreaInsets.right + 12,
+          },
+          keyboardStyle,
+        ]}
+      >
+        {toasts.map((toast, index) => (
+          <ToastAnimatedItem
+            key={toast.id}
+            heights={heights}
+            id={toast.id}
+            index={index}
+            maxVisibleToasts={maxVisibleToasts}
+            placement={placement}
+            total={toasts.length}
+            frontId={frontToast.id}
+          >
+            {toast.component({
+              id: toast.id,
+              index,
+              hide: manager.hide,
+              show: manager.show,
+            })}
+          </ToastAnimatedItem>
+        ))}
+      </Animated.View>
+    </ToastOverlay>
+  );
+}