@cdx-ui/components 0.1.6 → 0.2.0

package/src/providers/toast/insets-container.tsx

@@ -1,12 +1,21 @@
 import type { ReactNode } from 'react';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { Platform, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { SafeAreaInsetsContext, type EdgeInsets } from 'react-native-safe-area-context';
 import { FullWindowOverlay, NOTIFICATION_OVERLAY_Z_INDEX } from '@cdx-ui/primitives';
 import type { ToastInsets } from './types';
 
 const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
 
+/**
+ * The viewport spans the whole window, so every full-size layer in it must let
+ * pointer events through to the page. React Native Web only expands `box-none`
+ * for `StyleSheet.create` styles, not inline style objects.
+ */
+export const passThroughStyles = StyleSheet.create({
+  boxNone: { pointerEvents: 'box-none' },
+});
+
 interface InsetsContainerProps {
   /**
    * When true, uses a regular View instead of FullWindowOverlay on iOS.
@@ -41,6 +50,8 @@ interface InsetsContainerProps {
    * Custom wrapper function to wrap the toast content
    * Receives children and should return a component that wraps them
    * The wrapper should apply flex: 1 (via className or style) to ensure proper layout
+   * and `pointerEvents: 'box-none'` (from a `StyleSheet.create` style) so it does not block
+   * interaction with the page behind
    * Can be any component wrapper - KeyboardAvoidingView, View, or any custom component
    */
   contentWrapper?: (children: ReactNode) => React.ReactElement;
@@ -199,20 +210,23 @@ export function InsetsContainer({
   const content = (
     <View
       ref={containerRef}
-      className="absolute web:fixed inset-0 pointer-events-box-none"
+      className="absolute web:fixed inset-0"
       role="region"
       aria-label={announceLabel}
       {...(Platform.OS === 'web' && {
         'aria-live': 'polite',
         'aria-atomic': false,
       })}
-      style={{
-        ...(Platform.OS === 'web' ? { zIndex: NOTIFICATION_OVERLAY_Z_INDEX } : {}),
-        paddingTop: finalInsets.top,
-        paddingBottom: finalInsets.bottom,
-        paddingLeft: finalInsets.left,
-        paddingRight: finalInsets.right,
-      }}
+      style={[
+        passThroughStyles.boxNone,
+        {
+          ...(Platform.OS === 'web' ? { zIndex: NOTIFICATION_OVERLAY_Z_INDEX } : {}),
+          paddingTop: finalInsets.top,
+          paddingBottom: finalInsets.bottom,
+          paddingLeft: finalInsets.left,
+          paddingRight: finalInsets.right,
+        },
+      ]}
     >
       {contentWrapper ? contentWrapper(children) : children}
     </View>

package/src/providers/toast/provider.tsx

@@ -12,7 +12,7 @@ import { useSharedValue } from 'react-native-reanimated';
 import { createPortalFn, useOverlayStackRegistration } from '@cdx-ui/primitives';
 import { DefaultToast } from '../../components/Toast';
 import type { ToastPlacement } from '../../components/Toast/types';
-import { InsetsContainer } from './insets-container';
+import { InsetsContainer, passThroughStyles } from './insets-container';
 import { ToastLifecycleContext, type ToastLifecycleContextValue } from './lifecycle.context';
 import { toastReducer } from './reducer';
 import { ToastConfigContext } from './toast-config.context';
@@ -177,6 +177,7 @@ export function ToastProvider({
   disableFullWindowOverlay = false,
   unstable_accessibilityContainerViewIsModal,
   announceLabel,
+  container,
 }: Readonly<ToastProviderProps>) {
   const [toasts, dispatch] = useReducer(toastReducer, []);
 
@@ -185,7 +186,19 @@ export function ToastProvider({
    */
   const globalConfig = useMemo<ToastGlobalConfig | undefined>(() => defaultProps, [defaultProps]);
 
-  const isToastVisible = toasts.length > 0;
+  const usesWebPortal =
+    Platform.OS === 'web' && createPortalFn !== undefined && typeof document !== 'undefined';
+
+  /**
+   * A `null` container renders no viewport, so no toast can play its exit
+   * transition or be seen. Timers hold until it attaches, and hides remove
+   * directly instead of waiting on a transition that will never run.
+   */
+  const isViewportDetached = usesWebPortal && container === null;
+  const viewportDetachedRef = useRef(isViewportDetached);
+  viewportDetachedRef.current = isViewportDetached;
+
+  const isToastVisible = toasts.length > 0 && !isViewportDetached;
 
   const placementStacks = useToastPlacementStacks();
 
@@ -287,12 +300,13 @@ export function ToastProvider({
    * On web this only marks toasts as `pendingRemoval` so their CSS exit
    * transition can play; the actual removal happens when the toast
    * component calls `remove(id)` on transition end.
-   * On native this dispatches removal directly — Reanimated's `exiting`
-   * layout animation plays before unmount.
+   * On native, and on web while the container is `null`, this dispatches
+   * removal directly — Reanimated's `exiting` layout animation plays before
+   * unmount, and a detached web viewport has no transition to wait on.
    */
   const hide = useCallback(
     (ids?: (string & {}) | string[] | 'all') => {
-      const isWeb = Platform.OS === 'web';
+      const playsWebExit = Platform.OS === 'web' && !viewportDetachedRef.current;
 
       if (ids === undefined) {
         if (toasts.length === 0) return;
@@ -318,7 +332,7 @@ export function ToastProvider({
           lastToast.onHide();
         }
 
-        if (isWeb) {
+        if (playsWebExit) {
           dispatch({ type: 'MARK_CLOSED', payload: { ids: [lastToast.id] } });
         } else {
           remove([lastToast.id]);
@@ -340,7 +354,7 @@ export function ToastProvider({
 
         if (targetIds.length === 0) return;
 
-        if (isWeb) {
+        if (playsWebExit) {
           dispatch({ type: 'MARK_CLOSED', payload: { ids: targetIds } });
         } else {
           remove(targetIds);
@@ -367,7 +381,7 @@ export function ToastProvider({
 
         if (targetIds.length === 0) return;
 
-        if (isWeb) {
+        if (playsWebExit) {
           dispatch({ type: 'MARK_CLOSED', payload: { ids: targetIds } });
         } else {
           remove(targetIds);
@@ -404,6 +418,7 @@ export function ToastProvider({
    */
   const resumeAll = useCallback(() => {
     pausedRef.current = false;
+    if (viewportDetachedRef.current) return;
 
     const now = Date.now();
     timersRef.current.forEach((entry, id) => {
@@ -421,6 +436,24 @@ export function ToastProvider({
     });
   }, []);
 
+  useEffect(() => {
+    if (isViewportDetached) {
+      pauseAll();
+    } else {
+      resumeAll();
+    }
+  }, [isViewportDetached, pauseAll, resumeAll]);
+
+  /**
+   * Detaching the container unmounts toasts mid-exit, and an unmounted toast
+   * never reports its transition end.
+   */
+  useEffect(() => {
+    if (!isViewportDetached) return;
+    const pendingIds = toasts.filter((toast) => toast.pendingRemoval).map((toast) => toast.id);
+    if (pendingIds.length > 0) remove(pendingIds);
+  }, [isViewportDetached, remove, toasts]);
+
   const lifecycleContextValue = useMemo<ToastLifecycleContextValue>(() => {
     const pending = new Set<string>();
     const frontmostByPlacement = new Map<ToastPlacement, string>();
@@ -541,7 +574,7 @@ export function ToastProvider({
           };
           timersRef.current.set(id, entry);
 
-          if (pausedRef.current) {
+          if (pausedRef.current || viewportDetachedRef.current) {
             clearTimeout(timer);
             entry.timer = null;
           }
@@ -567,7 +600,7 @@ export function ToastProvider({
   );
 
   useOverlayStackRegistration({
-    active: toasts.length > 0,
+    active: isToastVisible,
     capabilities: [],
     id: 'forge-ui-toast-viewport',
     groupId: 'forge-ui-notifications',
@@ -595,7 +628,7 @@ export function ToastProvider({
         resumeAll={resumeAll}
         hide={hide}
       >
-        <View className="flex-1">
+        <View className="flex-1" style={passThroughStyles.boxNone}>
           {toasts.map((toastItem) => {
             const placement = toastItem.placement;
             const index = placementIndexes[placement];
@@ -619,10 +652,11 @@ export function ToastProvider({
       </InsetsContainer>
     ) : null;
 
-  const renderedToastViewport =
-    Platform.OS === 'web' && toastViewport && createPortalFn && typeof document !== 'undefined'
-      ? createPortalFn(toastViewport, document.body)
-      : toastViewport;
+  let renderedToastViewport: React.ReactNode = toastViewport;
+  if (usesWebPortal && toastViewport && createPortalFn) {
+    renderedToastViewport =
+      container === null ? null : createPortalFn(toastViewport, container ?? document.body);
+  }
 
   return (
     <ToastConfigContext.Provider value={globalConfig}>

package/src/providers/toast/types.ts

@@ -79,16 +79,21 @@ export interface ToastProviderProps {
    * Custom wrapper function to wrap the toast content
    * Receives children and should return a component that wraps them
    * The wrapper should apply flex: 1 (via className or style) to ensure proper layout
+   * and `pointerEvents: 'box-none'` so it does not block interaction with the page behind.
+   * On web, `box-none` only takes effect from a `StyleSheet.create` style, not an inline object.
    * Can be any component wrapper - KeyboardAvoidingView, View, or any custom component
    *
    * @example
    * ```tsx
+   * const styles = StyleSheet.create({ passThrough: { pointerEvents: 'box-none' } });
+   *
    * <ToastProvider
    *   contentWrapper={(children) => (
    *     <KeyboardAvoidingView
    *       behavior="padding"
    *       keyboardVerticalOffset={24}
    *       className="flex-1"
+   *       style={styles.passThrough}
    *     >
    *       {children}
    *     </KeyboardAvoidingView>
@@ -105,6 +110,16 @@ export interface ToastProviderProps {
    * @platform web
    */
   announceLabel?: string;
+  /**
+   * Element that receives the toast viewport instead of `document.body`.
+   *
+   * Use it to keep toasts inside an embedded surface, such as a device preview. The fixed
+   * viewport stays inside the container only when an ancestor of it creates a containing
+   * block for fixed descendants, for example through a `transform`. While `null`, such as
+   * before a callback ref attaches, no viewport renders.
+   * @platform web
+   */
+  container?: Element | null;
   /**
    * Children to render
    */
@@ -170,8 +185,9 @@ export interface ToastShowConfig extends Pick<
    */
   duration?: number | 'persistent';
   /**
-   * Optional ID for the toast
-   * If not provided, one will be generated automatically
+   * Optional ID for the toast.
+   * If omitted, one is generated. If a toast with this id is already in the
+   * stack, `show` returns that id and does not add another.
    */
   id?: string;
   /**
@@ -221,8 +237,9 @@ export interface ToastShowConfig extends Pick<
  */
 export interface ToastShowOptionsWithComponent {
   /**
-   * Optional ID for the toast
-   * If not provided, one will be generated automatically
+   * Optional ID for the toast.
+   * If omitted, one is generated. If a toast with this id is already in the
+   * stack, `show` returns that id and does not add another.
    */
   id?: string;
   /**

package/src/styles/constants.ts

@@ -9,6 +9,19 @@ export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
 export const DISABLED_CURSOR =
   'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
 
+// ─── Content color ───────────────────────────────────────
+// The `color` variant shared by `Text` and `Icon`.
+export const CONTENT_COLOR = {
+  primary: 'text-content-primary',
+  secondary: 'text-content-secondary',
+  tertiary: 'text-content-tertiary',
+  action: 'text-content-action',
+  danger: 'text-content-danger',
+  warning: 'text-content-warning',
+  success: 'text-content-success',
+  info: 'text-content-info',
+} as const;
+
 // Web-only iOS Safari focus-zoom guard. Figma Viewport=Narrow (<600px) uses body/lg
 // (16px / 24px); Viewport=Wide (≥600px) keeps the size variant's original px size.
 export const WEB_NARROW_FIELD_TEXT = 'web:max-[600px]:text-base web:max-[600px]:leading-normal';