@base-ui/react 1.0.0 → 1.2.0

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

@@ -8,7 +8,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastRoot: React.ForwardRefExoticComponent<ToastRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToastRoot: React.ForwardRefExoticComponent<Omit<ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type ToastRootToastObject<Data extends object = any> = ToastObjectType<Data>;
 export interface ToastRootState {
   transitionStatus: TransitionStatus;
@@ -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 {};

package/esm/toast/store.js

@@ -0,0 +1,355 @@
+import { ReactStore, createSelector, createSelectorMemoized } from '@base-ui/utils/store';
+import { generateId } from '@base-ui/utils/generateId';
+import { ownerDocument } from '@base-ui/utils/owner';
+import { Timeout } from '@base-ui/utils/useTimeout';
+import { resolvePromiseOptions } from "./utils/resolvePromiseOptions.js";
+import { activeElement, contains, getTarget } from "../floating-ui-react/utils.js";
+import { isFocusVisible } from "./utils/focusVisible.js";
+const toastMapSelector = createSelectorMemoized(state => state.toasts, toasts => {
+  const map = new Map();
+  let visibleIndex = 0;
+  let offsetY = 0;
+  toasts.forEach((toast, toastIndex) => {
+    const isEnding = toast.transitionStatus === 'ending';
+    map.set(toast.id, {
+      value: toast,
+      domIndex: toastIndex,
+      visibleIndex: isEnding ? -1 : visibleIndex,
+      offsetY
+    });
+    offsetY += toast.height || 0;
+    if (!isEnding) {
+      visibleIndex += 1;
+    }
+  });
+  return map;
+});
+export const selectors = {
+  toasts: createSelector(state => state.toasts),
+  isEmpty: createSelector(state => state.toasts.length === 0),
+  toast: createSelector(toastMapSelector, (toastMap, id) => toastMap.get(id)?.value),
+  toastIndex: createSelector(toastMapSelector, (toastMap, id) => toastMap.get(id)?.domIndex ?? -1),
+  toastOffsetY: createSelector(toastMapSelector, (toastMap, id) => toastMap.get(id)?.offsetY ?? 0),
+  toastVisibleIndex: createSelector(toastMapSelector, (toastMap, id) => toastMap.get(id)?.visibleIndex ?? -1),
+  hovering: createSelector(state => state.hovering),
+  focused: createSelector(state => state.focused),
+  expanded: createSelector(state => state.hovering || state.focused),
+  expandedOrOutOfFocus: createSelector(state => state.hovering || state.focused || !state.isWindowFocused),
+  prevFocusElement: createSelector(state => state.prevFocusElement)
+};
+export class ToastStore extends ReactStore {
+  timers = new Map();
+  areTimersPaused = false;
+  constructor(initialState) {
+    super(initialState, {}, selectors);
+  }
+  setFocused(focused) {
+    this.set('focused', focused);
+  }
+  setHovering(hovering) {
+    this.set('hovering', hovering);
+  }
+  setIsWindowFocused(isWindowFocused) {
+    this.set('isWindowFocused', isWindowFocused);
+  }
+  setPrevFocusElement(prevFocusElement) {
+    this.set('prevFocusElement', prevFocusElement);
+  }
+  setViewport = viewport => {
+    this.set('viewport', viewport);
+  };
+  disposeEffect = () => {
+    return () => {
+      this.timers.forEach(timer => {
+        timer.timeout?.clear();
+      });
+      this.timers.clear();
+    };
+  };
+  removeToast(toastId) {
+    const index = selectors.toastIndex(this.state, toastId);
+    if (index === -1) {
+      return;
+    }
+    const toast = this.state.toasts[index];
+    toast?.onRemove?.();
+    const newToasts = [...this.state.toasts];
+    newToasts.splice(index, 1);
+    this.setToasts(newToasts);
+  }
+  addToast = toast => {
+    const {
+      toasts,
+      timeout,
+      limit
+    } = this.state;
+    const id = toast.id || generateId('toast');
+    const toastToAdd = {
+      ...toast,
+      id,
+      transitionStatus: 'starting'
+    };
+    const updatedToasts = [toastToAdd, ...toasts];
+    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);
+      const limitedIds = new Set(oldestActiveToasts.map(t => t.id));
+      this.setToasts(updatedToasts.map(t => {
+        const limited = limitedIds.has(t.id);
+        if (t.limited !== limited) {
+          return {
+            ...t,
+            limited
+          };
+        }
+        return t;
+      }));
+    } else {
+      this.setToasts(updatedToasts.map(t => t.limited ? {
+        ...t,
+        limited: false
+      } : t));
+    }
+    const duration = toastToAdd.timeout ?? timeout;
+    if (toastToAdd.type !== 'loading' && duration > 0) {
+      this.scheduleTimer(id, duration, () => this.closeToast(id));
+    }
+    if (selectors.expandedOrOutOfFocus(this.state)) {
+      this.pauseTimers();
+    }
+    return id;
+  };
+  updateToast = (id, updates) => {
+    this.updateToastInternal(id, updates);
+  };
+  updateToastInternal = (id, updates) => {
+    const {
+      timeout,
+      toasts
+    } = this.state;
+    const prevToast = selectors.toast(this.state, id) ?? null;
+    if (!prevToast) {
+      return;
+    }
+
+    // Ignore updates for toasts that are already closing.
+    // This prevents races where async updates (e.g. promise success/error)
+    // can block a dismissal from completing.
+    if (prevToast.transitionStatus === 'ending') {
+      return;
+    }
+    const nextToast = {
+      ...prevToast,
+      ...updates
+    };
+    this.setToasts(toasts.map(toast => toast.id === id ? {
+      ...toast,
+      ...updates
+    } : toast));
+    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 = this.timers.has(id);
+    const timeoutChanged = prevTimeout !== nextTimeout;
+    const wasLoading = prevToast?.type === 'loading';
+    if (!shouldHaveTimer && hasTimer) {
+      const timer = this.timers.get(id);
+      timer?.timeout?.clear();
+      this.timers.delete(id);
+      return;
+    }
+
+    // Schedule or reschedule timer if needed
+    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading)) {
+      const timer = this.timers.get(id);
+      if (timer) {
+        timer.timeout?.clear();
+        this.timers.delete(id);
+      }
+      this.scheduleTimer(id, nextTimeout, () => this.closeToast(id));
+      if (selectors.expandedOrOutOfFocus(this.state)) {
+        this.pauseTimers();
+      }
+    }
+  };
+  closeToast = toastId => {
+    const toast = selectors.toast(this.state, toastId);
+    toast?.onClose?.();
+    const {
+      limit,
+      toasts
+    } = this.state;
+    let activeIndex = 0;
+    const newToasts = toasts.map(item => {
+      if (item.id === toastId) {
+        return {
+          ...item,
+          transitionStatus: 'ending',
+          height: 0
+        };
+      }
+      if (item.transitionStatus === 'ending') {
+        return item;
+      }
+      const isLimited = activeIndex >= limit;
+      activeIndex += 1;
+      return item.limited !== isLimited ? {
+        ...item,
+        limited: isLimited
+      } : item;
+    });
+    const timer = this.timers.get(toastId);
+    if (timer && timer.timeout) {
+      timer.timeout.clear();
+      this.timers.delete(toastId);
+    }
+    this.handleFocusManagement(toastId);
+    this.setToasts(newToasts);
+  };
+  promiseToast = (promiseValue, options) => {
+    // Create a loading toast (which does not auto-dismiss).
+    const loadingOptions = resolvePromiseOptions(options.loading);
+    const id = this.addToast({
+      ...loadingOptions,
+      type: 'loading'
+    });
+    const handledPromise = promiseValue.then(result => {
+      const successOptions = resolvePromiseOptions(options.success, result);
+      this.updateToast(id, {
+        ...successOptions,
+        type: 'success',
+        timeout: successOptions.timeout
+      });
+      return result;
+    }).catch(error => {
+      const errorOptions = resolvePromiseOptions(options.error, error);
+      this.updateToast(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;
+  };
+  pauseTimers() {
+    if (this.areTimersPaused) {
+      return;
+    }
+    this.areTimersPaused = true;
+    this.timers.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;
+      }
+    });
+  }
+  resumeTimers() {
+    if (!this.areTimersPaused) {
+      return;
+    }
+    this.areTimersPaused = false;
+    this.timers.forEach((timer, id) => {
+      timer.remaining = timer.remaining > 0 ? timer.remaining : timer.delay;
+      timer.timeout ??= Timeout.create();
+      timer.timeout.start(timer.remaining, () => {
+        this.timers.delete(id);
+        timer.callback();
+      });
+      timer.start = Date.now();
+    });
+  }
+  restoreFocusToPrevElement() {
+    this.state.prevFocusElement?.focus({
+      preventScroll: true
+    });
+  }
+  handleDocumentPointerDown = event => {
+    if (event.pointerType !== 'touch') {
+      return;
+    }
+    const target = getTarget(event);
+    if (contains(this.state.viewport, target)) {
+      return;
+    }
+    this.resumeTimers();
+    this.update({
+      hovering: false,
+      focused: false
+    });
+  };
+  scheduleTimer(id, delay, callback) {
+    const start = Date.now();
+    const shouldStartActive = !selectors.expandedOrOutOfFocus(this.state);
+    const currentTimeout = shouldStartActive ? Timeout.create() : undefined;
+    currentTimeout?.start(delay, () => {
+      this.timers.delete(id);
+      callback();
+    });
+    this.timers.set(id, {
+      timeout: currentTimeout,
+      start: shouldStartActive ? start : 0,
+      delay,
+      remaining: delay,
+      callback
+    });
+  }
+  setToasts(newToasts) {
+    const updates = {
+      toasts: newToasts
+    };
+    if (newToasts.length === 0) {
+      updates.hovering = false;
+      updates.focused = false;
+    }
+    this.update(updates);
+  }
+  handleFocusManagement(toastId) {
+    const activeEl = activeElement(ownerDocument(this.state.viewport));
+    if (!this.state.viewport || !contains(this.state.viewport, activeEl) || !isFocusVisible(activeEl)) {
+      return;
+    }
+    const toasts = selectors.toasts(this.state);
+    const currentIndex = selectors.toastIndex(this.state, 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 {
+      this.restoreFocusToPrevElement();
+    }
+  }
+}

package/esm/toast/title/ToastTitle.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastTitle: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export interface ToastTitleState {
   /**
    * The type of the toast.

package/esm/toast/title/ToastTitle.js

@@ -21,14 +21,12 @@ export const ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(comp
     ...elementProps
   } = componentProps;
   const {
-    toast
+    toast,
+    setTitleId
   } = useToastRootContext();
   const children = childrenProp ?? toast.title;
   const shouldRender = Boolean(children);
   const id = useId(idProp);
-  const {
-    setTitleId
-  } = useToastRootContext();
   useIsoLayoutEffect(() => {
     if (!shouldRender) {
       return undefined;
@@ -38,9 +36,9 @@ export const ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(comp
       setTitleId(undefined);
     };
   }, [shouldRender, id, setTitleId]);
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = useRenderElement('h2', componentProps, {
     ref: forwardedRef,
     state,