@base-ui/react 1.1.0 → 1.2.0

package/esm/toast/provider/ToastProvider.js

@@ -1,21 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { ownerDocument } from '@base-ui/utils/owner';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { generateId } from '@base-ui/utils/generateId';
-import { Timeout } from '@base-ui/utils/useTimeout';
-import { activeElement, contains } from "../../floating-ui-react/utils.js";
+import { useOnMount } from '@base-ui/utils/useOnMount';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { ToastContext } from "./ToastProviderContext.js";
-import { isFocusVisible } from "../utils/focusVisible.js";
-import { resolvePromiseOptions } from "../utils/resolvePromiseOptions.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ToastStore } from "../store.js";
+
 /**
  * Provides a context for creating and managing toasts.
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ToastProvider = function ToastProvider(props) {
   const {
     children,
@@ -23,255 +19,17 @@ export const ToastProvider = function ToastProvider(props) {
     limit = 3,
     toastManager
   } = props;
-  const [toasts, setToasts] = React.useState([]);
-  const [hovering, setHovering] = React.useState(false);
-  const [focused, setFocused] = React.useState(false);
-  const [prevFocusElement, setPrevFocusElement] = React.useState(null);
-  if (toasts.length === 0) {
-    if (hovering) {
-      setHovering(false);
-    }
-    if (focused) {
-      setFocused(false);
-    }
-  }
-  const expanded = hovering || focused;
-  const timersRef = React.useRef(new Map());
-  const viewportRef = React.useRef(null);
-  const windowFocusedRef = React.useRef(true);
-  const isPausedRef = React.useRef(false);
-  function handleFocusManagement(toastId) {
-    const activeEl = activeElement(ownerDocument(viewportRef.current));
-    if (!viewportRef.current || !contains(viewportRef.current, activeEl) || !isFocusVisible(activeEl)) {
-      return;
-    }
-    const currentIndex = toasts.findIndex(toast => toast.id === toastId);
-    let nextToast = null;
-
-    // Try to find the next toast that isn't animating out
-    let index = currentIndex + 1;
-    while (index < toasts.length) {
-      if (toasts[index].transitionStatus !== 'ending') {
-        nextToast = toasts[index];
-        break;
-      }
-      index += 1;
-    }
-
-    // Go backwards if no next toast is found
-    if (!nextToast) {
-      index = currentIndex - 1;
-      while (index >= 0) {
-        if (toasts[index].transitionStatus !== 'ending') {
-          nextToast = toasts[index];
-          break;
-        }
-        index -= 1;
-      }
-    }
-    if (nextToast) {
-      nextToast.ref?.current?.focus();
-    } else {
-      prevFocusElement?.focus({
-        preventScroll: true
-      });
-    }
-  }
-  const pauseTimers = useStableCallback(() => {
-    if (isPausedRef.current) {
-      return;
-    }
-    isPausedRef.current = true;
-    timersRef.current.forEach(timer => {
-      if (timer.timeout) {
-        timer.timeout.clear();
-        const elapsed = Date.now() - timer.start;
-        const remaining = timer.delay - elapsed;
-        timer.remaining = remaining > 0 ? remaining : 0;
-      }
-    });
-  });
-  const resumeTimers = useStableCallback(() => {
-    if (!isPausedRef.current) {
-      return;
-    }
-    isPausedRef.current = false;
-    timersRef.current.forEach((timer, id) => {
-      timer.remaining = timer.remaining > 0 ? timer.remaining : timer.delay;
-      timer.timeout ??= Timeout.create();
-      timer.timeout.start(timer.remaining, () => {
-        timersRef.current.delete(id);
-        timer.callback();
-      });
-      timer.start = Date.now();
-    });
-  });
-  const close = useStableCallback(toastId => {
-    setToasts(prevToasts => {
-      const toastsWithEnding = prevToasts.map(toast => toast.id === toastId ? {
-        ...toast,
-        transitionStatus: 'ending',
-        height: 0
-      } : toast);
-      const activeToasts = toastsWithEnding.filter(t => t.transitionStatus !== 'ending');
-      return toastsWithEnding.map(toast => {
-        if (toast.transitionStatus === 'ending') {
-          return toast;
-        }
-        const isActiveToastLimited = activeToasts.indexOf(toast) >= limit;
-        return {
-          ...toast,
-          limited: isActiveToastLimited
-        };
-      });
-    });
-    const timer = timersRef.current.get(toastId);
-    if (timer && timer.timeout) {
-      timer.timeout.clear();
-      timersRef.current.delete(toastId);
-    }
-    const toast = toasts.find(t => t.id === toastId);
-    toast?.onClose?.();
-    handleFocusManagement(toastId);
-    if (toasts.length === 1) {
-      setHovering(false);
-      setFocused(false);
-    }
-  });
-  const remove = useStableCallback(toastId => {
-    setToasts(prev => prev.filter(toast => toast.id !== toastId));
-    const toast = toasts.find(t => t.id === toastId);
-    toast?.onRemove?.();
-  });
-  const scheduleTimer = useStableCallback((id, delay, callback) => {
-    const start = Date.now();
-    const shouldStartActive = windowFocusedRef.current && !hovering && !focused;
-    const currentTimeout = shouldStartActive ? Timeout.create() : undefined;
-    currentTimeout?.start(delay, () => {
-      timersRef.current.delete(id);
-      callback();
-    });
-    timersRef.current.set(id, {
-      timeout: currentTimeout,
-      start: shouldStartActive ? start : 0,
-      delay,
-      remaining: delay,
-      callback
-    });
-  });
-  const add = useStableCallback(toast => {
-    const id = toast.id || generateId('toast');
-    const toastToAdd = {
-      ...toast,
-      id,
-      transitionStatus: 'starting'
-    };
-    setToasts(prev => {
-      const updatedToasts = [toastToAdd, ...prev];
-      const activeToasts = updatedToasts.filter(t => t.transitionStatus !== 'ending');
-
-      // Mark oldest toasts for removal when over limit
-      if (activeToasts.length > limit) {
-        const excessCount = activeToasts.length - limit;
-        const oldestActiveToasts = activeToasts.slice(-excessCount);
-        return updatedToasts.map(t => oldestActiveToasts.some(old => old.id === t.id) ? {
-          ...t,
-          limited: true
-        } : {
-          ...t,
-          limited: false
-        });
-      }
-      return updatedToasts.map(t => ({
-        ...t,
-        limited: false
-      }));
-    });
-    const duration = toastToAdd.timeout ?? timeout;
-    if (toastToAdd.type !== 'loading' && duration > 0) {
-      scheduleTimer(id, duration, () => close(id));
-    }
-    if (hovering || focused || !windowFocusedRef.current) {
-      pauseTimers();
-    }
-    return id;
-  });
-  const update = useStableCallback((id, updates) => {
-    const prevToast = toasts.find(toast => toast.id === id) ?? null;
-    const nextToast = prevToast ? {
-      ...prevToast,
-      ...updates
-    } : null;
-
-    // Avoid race conditions if `update()` is called multiple times in a row
-    ReactDOM.flushSync(() => {
-      setToasts(prev => prev.map(toast => toast.id === id ? {
-        ...toast,
-        ...updates
-      } : toast));
-    });
-    if (!nextToast) {
-      return;
-    }
-    const nextTimeout = nextToast.timeout ?? timeout;
-    const prevTimeout = prevToast?.timeout ?? timeout;
-    const timeoutUpdated = Object.hasOwn(updates, 'timeout');
-    const shouldHaveTimer = nextToast.transitionStatus !== 'ending' && nextToast.type !== 'loading' && nextTimeout > 0;
-    const hasTimer = timersRef.current.has(id);
-    const timeoutChanged = prevTimeout !== nextTimeout;
-    const wasLoading = prevToast?.type === 'loading';
-    if (!shouldHaveTimer && hasTimer) {
-      const timer = timersRef.current.get(id);
-      timer?.timeout?.clear();
-      timersRef.current.delete(id);
-      return;
-    }
-
-    // Schedule or reschedule timer if needed
-    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading)) {
-      const timer = timersRef.current.get(id);
-      if (timer) {
-        timer.timeout?.clear();
-        timersRef.current.delete(id);
-      }
-      scheduleTimer(id, nextTimeout, () => close(id));
-      if (hovering || focused || !windowFocusedRef.current) {
-        pauseTimers();
-      }
-    }
-  });
-  const promise = useStableCallback((promiseValue, options) => {
-    // Create a loading toast (which does not auto-dismiss).
-    const loadingOptions = resolvePromiseOptions(options.loading);
-    const id = add({
-      ...loadingOptions,
-      type: 'loading'
-    });
-    const handledPromise = promiseValue.then(result => {
-      const successOptions = resolvePromiseOptions(options.success, result);
-      update(id, {
-        ...successOptions,
-        type: 'success',
-        timeout: successOptions.timeout
-      });
-      return result;
-    }).catch(error => {
-      const errorOptions = resolvePromiseOptions(options.error, error);
-      update(id, {
-        ...errorOptions,
-        type: 'error',
-        timeout: errorOptions.timeout
-      });
-      return Promise.reject(error);
-    });
-
-    // Private API used exclusively by `Manager` to handoff the promise
-    // back to the manager after it's handled here.
-    if ({}.hasOwnProperty.call(options, 'setPromise')) {
-      options.setPromise(handledPromise);
-    }
-    return handledPromise;
-  });
+  const store = useRefWithInit(() => new ToastStore({
+    timeout,
+    limit,
+    viewport: null,
+    toasts: [],
+    hovering: false,
+    focused: false,
+    isWindowFocused: true,
+    prevFocusElement: null
+  })).current;
+  useOnMount(store.disposeEffect);
   React.useEffect(function subscribeToToastManager() {
     if (!toastManager) {
       return undefined;
@@ -282,40 +40,23 @@ export const ToastProvider = function ToastProvider(props) {
     }) => {
       const id = options.id;
       if (action === 'promise' && options.promise) {
-        promise(options.promise, options);
+        store.promiseToast(options.promise, options);
       } else if (action === 'update' && id) {
-        update(id, options);
+        store.updateToast(id, options);
       } else if (action === 'close' && id) {
-        close(id);
+        store.closeToast(id);
       } else {
-        add(options);
+        store.addToast(options);
       }
     });
     return unsubscribe;
-  }, [add, update, scheduleTimer, timeout, toastManager, promise, close]);
-  const contextValue = React.useMemo(() => ({
-    toasts,
-    setToasts,
-    hovering,
-    setHovering,
-    focused,
-    setFocused,
-    expanded,
-    add,
-    close,
-    remove,
-    update,
-    promise,
-    pauseTimers,
-    resumeTimers,
-    prevFocusElement,
-    setPrevFocusElement,
-    viewportRef,
-    scheduleTimer,
-    windowFocusedRef
-  }), [add, close, focused, hovering, expanded, pauseTimers, prevFocusElement, promise, remove, resumeTimers, scheduleTimer, toasts, update]);
+  }, [store, timeout, toastManager]);
+  store.useSyncedValues({
+    timeout,
+    limit
+  });
   return /*#__PURE__*/_jsx(ToastContext.Provider, {
-    value: contextValue,
+    value: store,
     children: children
   });
 };

package/esm/toast/provider/ToastProviderContext.d.ts

@@ -1,26 +1,5 @@
 import * as React from 'react';
-import type { ToastObject, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions } from "../useToastManager.js";
-export interface ToastContextValue<Data extends object> {
-  toasts: ToastObject<Data>[];
-  setToasts: React.Dispatch<React.SetStateAction<ToastObject<Data>[]>>;
-  hovering: boolean;
-  setHovering: React.Dispatch<React.SetStateAction<boolean>>;
-  focused: boolean;
-  setFocused: React.Dispatch<React.SetStateAction<boolean>>;
-  expanded: boolean;
-  add: (options: ToastManagerAddOptions<Data>) => string;
-  update: (id: string, options: ToastManagerUpdateOptions<Data>) => void;
-  promise: <Value>(value: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
-  close: (id: string) => void;
-  pauseTimers: () => void;
-  resumeTimers: () => void;
-  remove: (id: string) => void;
-  prevFocusElement: HTMLElement | null;
-  setPrevFocusElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-  viewportRef: React.RefObject<HTMLElement | null>;
-  windowFocusedRef: React.RefObject<boolean>;
-  scheduleTimer: (id: string, delay: number, callback: () => void) => void;
-}
-export type ToastContext<Data extends object> = ToastContextValue<Data>;
-export declare const ToastContext: React.Context<ToastContext<any> | undefined>;
-export declare function useToastContext(): ToastContext<any>;
+import { ToastStore } from "../store.js";
+export type ToastContext = ToastStore;
+export declare const ToastContext: React.Context<ToastStore | undefined>;
+export declare function useToastProviderContext(): ToastStore;

package/esm/toast/provider/ToastProviderContext.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ToastContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ToastContext.displayName = "ToastContext";
-export function useToastContext() {
+export function useToastProviderContext() {
   const context = React.useContext(ToastContext);
   if (!context) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: useToastManager must be used within <Toast.Provider>.' : _formatErrorMessage(73));

package/esm/toast/root/ToastRoot.d.ts

@@ -32,7 +32,7 @@ export interface ToastRootProps extends BaseUIComponentProps<'div', ToastRoot.St
    * Direction(s) in which the toast can be swiped to dismiss.
    * @default ['down', 'right']
    */
-  swipeDirection?: 'up' | 'down' | 'left' | 'right' | ('up' | 'down' | 'left' | 'right')[];
+  swipeDirection?: ('up' | 'down' | 'left' | 'right' | ('up' | 'down' | 'left' | 'right')[]) | undefined;
 }
 export declare namespace ToastRoot {
   type ToastObject<Data extends object = any> = ToastRootToastObject<Data>;

package/esm/toast/root/ToastRoot.js

@@ -9,7 +9,7 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { ToastRootContext } from "./ToastRootContext.js";
 import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useToastContext } from "../provider/ToastProviderContext.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { ToastRootCssVars } from "./ToastRootCssVars.js";
@@ -88,16 +88,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     swipeDirections = Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
   }
   const swipeEnabled = swipeDirections.length > 0;
-  const {
-    toasts,
-    focused,
-    close,
-    remove,
-    setToasts,
-    pauseTimers,
-    expanded,
-    setHovering
-  } = useToastContext();
+  const store = useToastProviderContext();
   const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState(undefined);
   const [isSwiping, setIsSwiping] = React.useState(false);
   const [isRealSwipe, setIsRealSwipe] = React.useState(false);
@@ -132,17 +123,17 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     y: 0
   });
   const isFirstPointerMoveRef = React.useRef(false);
-  const domIndex = React.useMemo(() => toasts.indexOf(toast), [toast, toasts]);
-  const visibleIndex = React.useMemo(() => toasts.filter(t => t.transitionStatus !== 'ending').indexOf(toast), [toast, toasts]);
-  const offsetY = React.useMemo(() => {
-    return toasts.slice(0, toasts.indexOf(toast)).reduce((acc, t) => acc + (t.height || 0), 0);
-  }, [toasts, toast]);
+  const domIndex = store.useState('toastIndex', toast.id);
+  const visibleIndex = store.useState('toastVisibleIndex', toast.id);
+  const offsetY = store.useState('toastOffsetY', toast.id);
+  const focused = store.useState('focused');
+  const expanded = store.useState('expanded');
   useOpenChangeComplete({
     open: toast.transitionStatus !== 'ending',
     ref: rootRef,
     onComplete() {
       if (toast.transitionStatus === 'ending') {
-        remove(toast.id);
+        store.removeToast(toast.id);
       }
     }
   });
@@ -162,12 +153,13 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     const height = element.offsetHeight;
     element.style.height = previousHeight;
     function update() {
-      setToasts(prev => prev.map(t => t.id === toast.id ? {
-        ...t,
+      store.updateToastInternal(toast.id, {
         ref: rootRef,
         height,
-        transitionStatus: undefined
-      } : t));
+        ...(toast.transitionStatus === 'starting' ? {
+          transitionStatus: undefined
+        } : {})
+      });
     }
     if (flushSync) {
       ReactDOM.flushSync(update);
@@ -209,7 +201,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       return;
     }
     if (event.pointerType === 'touch') {
-      pauseTimers();
+      store.pauseTimers();
     }
     const target = getTarget(event.nativeEvent);
     const isInteractiveElement = target ? target.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]') : false;
@@ -233,7 +225,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
         y: transform.y
       });
     }
-    setHovering(true);
+    store.setHovering(true);
     setIsSwiping(true);
     setIsRealSwipe(false);
     setLockedDirection(null);
@@ -408,7 +400,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     if (shouldClose) {
       setCurrentSwipeDirection(dismissDirection);
       setDragDismissed(true);
-      close(toast.id);
+      store.closeToast(toast.id);
     } else {
       setDragOffset({
         x: initialTransform.x,
@@ -422,7 +414,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       if (!rootRef.current || !contains(rootRef.current, activeElement(ownerDocument(rootRef.current)))) {
         return;
       }
-      close(toast.id);
+      store.closeToast(toast.id);
     }
   }
   React.useEffect(() => {
@@ -497,14 +489,14 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     visibleIndex,
     expanded
   }), [toast, titleId, descriptionId, isSwiping, currentSwipeDirection, recalculateHeight, domIndex, visibleIndex, expanded]);
-  const state = React.useMemo(() => ({
+  const state = {
     transitionStatus: toast.transitionStatus,
     expanded,
     limited: toast.limited || false,
     type: toast.type,
     swiping: toastRoot.swiping,
     swipeDirection: toastRoot.swipeDirection
-  }), [expanded, toast.transitionStatus, toast.limited, toast.type, toastRoot.swiping, toastRoot.swipeDirection]);
+  };
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, toastRoot.rootRef],
     state,

package/esm/toast/root/ToastRootContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ToastRootContext = /*#__PURE__*/React.createContext(undefined);

package/esm/toast/store.d.ts

@@ -0,0 +1,51 @@
+import { ReactStore } from '@base-ui/utils/store';
+import { ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject } from "./useToastManager.js";
+type ToastInternalUpdateOptions<Data extends object> = Partial<Omit<ToastObject<Data>, 'id'>>;
+export type State = {
+  toasts: ToastObject<any>[];
+  hovering: boolean;
+  focused: boolean;
+  timeout: number;
+  limit: number;
+  isWindowFocused: boolean;
+  viewport: HTMLElement | null;
+  prevFocusElement: HTMLElement | null;
+};
+export declare const selectors: {
+  toasts: (state: State) => ToastObject<any>[];
+  isEmpty: (state: State) => boolean;
+  toast: (args_0: State, id: string) => ToastObject<any> | undefined;
+  toastIndex: (args_0: State, id: string) => number;
+  toastOffsetY: (args_0: State, id: string) => number;
+  toastVisibleIndex: (args_0: State, id: string) => number;
+  hovering: (state: State) => boolean;
+  focused: (state: State) => boolean;
+  expanded: (state: State) => boolean;
+  expandedOrOutOfFocus: (state: State) => boolean;
+  prevFocusElement: (state: State) => HTMLElement | null;
+};
+export declare class ToastStore extends ReactStore<State, {}, typeof selectors> {
+  private timers;
+  private areTimersPaused;
+  constructor(initialState: State);
+  setFocused(focused: boolean): void;
+  setHovering(hovering: boolean): void;
+  setIsWindowFocused(isWindowFocused: boolean): void;
+  setPrevFocusElement(prevFocusElement: HTMLElement | null): void;
+  setViewport: (viewport: HTMLElement | null) => void;
+  disposeEffect: () => () => void;
+  removeToast(toastId: string): void;
+  addToast: <Data extends object>(toast: ToastManagerAddOptions<Data>) => string;
+  updateToast: <Data extends object>(id: string, updates: ToastManagerUpdateOptions<Data>) => void;
+  updateToastInternal: <Data extends object>(id: string, updates: ToastInternalUpdateOptions<Data>) => void;
+  closeToast: (toastId: string) => void;
+  promiseToast: <Value, Data extends object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
+  pauseTimers(): void;
+  resumeTimers(): void;
+  restoreFocusToPrevElement(): void;
+  handleDocumentPointerDown: (event: PointerEvent) => void;
+  private scheduleTimer;
+  private setToasts;
+  private handleFocusManagement;
+}
+export {};