@base-ui/react 1.1.0 → 1.3.0

package/toast/root/ToastRoot.js

@@ -19,6 +19,7 @@ var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _ToastRootCssVars = require("./ToastRootCssVars");
+var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._stateAttributesMapping.transitionStatusMapping,
@@ -32,6 +33,7 @@ const SWIPE_THRESHOLD = 40;
 const REVERSE_CANCEL_THRESHOLD = 10;
 const OPPOSITE_DIRECTION_DAMPING_FACTOR = 0.5;
 const MIN_DRAG_THRESHOLD = 1;
+const TOAST_SWIPE_IGNORE_SELECTOR = `${_constants.BASE_UI_SWIPE_IGNORE_SELECTOR},${_constants.LEGACY_SWIPE_IGNORE_SELECTOR}`;
 function getDisplacement(direction, deltaX, deltaY) {
   switch (direction) {
     case 'up':
@@ -94,16 +96,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     swipeDirections = Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
   }
   const swipeEnabled = swipeDirections.length > 0;
-  const {
-    toasts,
-    focused,
-    close,
-    remove,
-    setToasts,
-    pauseTimers,
-    expanded,
-    setHovering
-  } = (0, _ToastProviderContext.useToastContext)();
+  const store = (0, _ToastProviderContext.useToastProviderContext)();
   const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState(undefined);
   const [isSwiping, setIsSwiping] = React.useState(false);
   const [isRealSwipe, setIsRealSwipe] = React.useState(false);
@@ -138,17 +131,17 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     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');
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: toast.transitionStatus !== 'ending',
     ref: rootRef,
     onComplete() {
       if (toast.transitionStatus === 'ending') {
-        remove(toast.id);
+        store.removeToast(toast.id);
       }
     }
   });
@@ -168,12 +161,13 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     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);
@@ -215,10 +209,10 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       return;
     }
     if (event.pointerType === 'touch') {
-      pauseTimers();
+      store.pauseTimers();
     }
     const target = (0, _utils.getTarget)(event.nativeEvent);
-    const isInteractiveElement = target ? target.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]') : false;
+    const isInteractiveElement = target ? target.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`) : false;
     if (isInteractiveElement) {
       return;
     }
@@ -239,7 +233,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
         y: transform.y
       });
     }
-    setHovering(true);
+    store.setHovering(true);
     setIsSwiping(true);
     setIsRealSwipe(false);
     setLockedDirection(null);
@@ -414,7 +408,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     if (shouldClose) {
       setCurrentSwipeDirection(dismissDirection);
       setDragDismissed(true);
-      close(toast.id);
+      store.closeToast(toast.id);
     } else {
       setDragOffset({
         x: initialTransform.x,
@@ -428,7 +422,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       if (!rootRef.current || !(0, _utils.contains)(rootRef.current, (0, _utils.activeElement)((0, _owner.ownerDocument)(rootRef.current)))) {
         return;
       }
-      close(toast.id);
+      store.closeToast(toast.id);
     }
   }
   React.useEffect(() => {
@@ -503,14 +497,14 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     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 = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, toastRoot.rootRef],
     state,

package/toast/root/ToastRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/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/toast/store.js

@@ -0,0 +1,391 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectors = exports.ToastStore = void 0;
+var _store = require("@base-ui/utils/store");
+var _generateId = require("@base-ui/utils/generateId");
+var _owner = require("@base-ui/utils/owner");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _resolvePromiseOptions = require("./utils/resolvePromiseOptions");
+var _utils = require("../floating-ui-react/utils");
+var _focusVisible = require("./utils/focusVisible");
+const toastMapSelector = (0, _store.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;
+});
+const selectors = exports.selectors = {
+  toasts: (0, _store.createSelector)(state => state.toasts),
+  isEmpty: (0, _store.createSelector)(state => state.toasts.length === 0),
+  toast: (0, _store.createSelector)(toastMapSelector, (toastMap, id) => toastMap.get(id)?.value),
+  toastIndex: (0, _store.createSelector)(toastMapSelector, (toastMap, id) => toastMap.get(id)?.domIndex ?? -1),
+  toastOffsetY: (0, _store.createSelector)(toastMapSelector, (toastMap, id) => toastMap.get(id)?.offsetY ?? 0),
+  toastVisibleIndex: (0, _store.createSelector)(toastMapSelector, (toastMap, id) => toastMap.get(id)?.visibleIndex ?? -1),
+  hovering: (0, _store.createSelector)(state => state.hovering),
+  focused: (0, _store.createSelector)(state => state.focused),
+  expanded: (0, _store.createSelector)(state => state.hovering || state.focused),
+  expandedOrOutOfFocus: (0, _store.createSelector)(state => state.hovering || state.focused || !state.isWindowFocused),
+  prevFocusElement: (0, _store.createSelector)(state => state.prevFocusElement)
+};
+class ToastStore extends _store.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 || (0, _generateId.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 closeAll = toastId === undefined;
+    const {
+      limit,
+      toasts
+    } = this.state;
+    let toastsToClose;
+    if (closeAll) {
+      toastsToClose = toasts;
+      this.timers.forEach(timer => {
+        timer.timeout?.clear();
+      });
+      this.timers.clear();
+    } else {
+      const toast = selectors.toast(this.state, toastId);
+      if (!toast) {
+        return;
+      }
+      toastsToClose = [toast];
+      const timer = this.timers.get(toastId);
+      if (timer?.timeout) {
+        timer.timeout.clear();
+        this.timers.delete(toastId);
+      }
+    }
+    let activeIndex = 0;
+    const newToasts = toasts.map(item => {
+      if (closeAll || 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 updates = {
+      toasts: newToasts
+    };
+    if (closeAll || toasts.length === 1) {
+      updates.hovering = false;
+      updates.focused = false;
+    }
+    this.update(updates);
+    toastsToClose.forEach(toast => {
+      if (toast.transitionStatus !== 'ending') {
+        toast.onClose?.();
+      }
+    });
+    this.handleFocusManagement(toastId);
+  };
+  promiseToast = (promiseValue, options) => {
+    // Create a loading toast (which does not auto-dismiss).
+    const loadingOptions = (0, _resolvePromiseOptions.resolvePromiseOptions)(options.loading);
+    const id = this.addToast({
+      ...loadingOptions,
+      type: 'loading'
+    });
+    const handledPromise = promiseValue.then(result => {
+      const successOptions = (0, _resolvePromiseOptions.resolvePromiseOptions)(options.success, result);
+      this.updateToast(id, {
+        ...successOptions,
+        type: 'success',
+        timeout: successOptions.timeout
+      });
+      return result;
+    }).catch(error => {
+      const errorOptions = (0, _resolvePromiseOptions.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 ??= _useTimeout.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 = (0, _utils.getTarget)(event);
+    if ((0, _utils.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 ? _useTimeout.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 = (0, _utils.activeElement)((0, _owner.ownerDocument)(this.state.viewport));
+    if (!this.state.viewport || !(0, _utils.contains)(this.state.viewport, activeEl) || !(0, _focusVisible.isFocusVisible)(activeEl)) {
+      return;
+    }
+    if (toastId === undefined) {
+      this.restoreFocusToPrevElement();
+      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();
+    }
+  }
+}
+exports.ToastStore = ToastStore;

package/toast/title/ToastTitle.d.ts

@@ -13,7 +13,7 @@ export interface ToastTitleState {
    */
   type: string | undefined;
 }
-export interface ToastTitleProps extends BaseUIComponentProps<'h2', ToastTitle.State> {}
+export interface ToastTitleProps extends BaseUIComponentProps<'h2', ToastTitleState> {}
 export declare namespace ToastTitle {
   type State = ToastTitleState;
   type Props = ToastTitleProps;

package/toast/title/ToastTitle.js

@@ -26,14 +26,12 @@ const ToastTitle = exports.ToastTitle = /*#__PURE__*/React.forwardRef(function T
     ...elementProps
   } = componentProps;
   const {
-    toast
+    toast,
+    setTitleId
   } = (0, _ToastRootContext.useToastRootContext)();
   const children = childrenProp ?? toast.title;
   const shouldRender = Boolean(children);
   const id = (0, _useId.useId)(idProp);
-  const {
-    setTitleId
-  } = (0, _ToastRootContext.useToastRootContext)();
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!shouldRender) {
       return undefined;
@@ -43,9 +41,9 @@ const ToastTitle = exports.ToastTitle = /*#__PURE__*/React.forwardRef(function T
       setTitleId(undefined);
     };
   }, [shouldRender, id, setTitleId]);
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('h2', componentProps, {
     ref: forwardedRef,
     state,