@base-ui/react 1.6.0 → 1.7.0

package/toast/root/ToastRoot.mjs

@@ -13,11 +13,10 @@ import { transitionStatusMapping } from "../../internals/stateAttributesMapping.
 import { useToastProviderContext } from "../provider/ToastProviderContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
-import { ToastRootCssVars } from "./ToastRootCssVars.mjs";
 import { BASE_UI_SWIPE_IGNORE_SELECTOR, LEGACY_SWIPE_IGNORE_SELECTOR } from "../../internals/constants.mjs";
 import { getDisplacement, getElementTransform } from "../../utils/useSwipeDismiss.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const stateAttributesMapping = {
+export const toastRootStateAttributesMapping = {
   ...transitionStatusMapping,
   swipeDirection(value) {
     return value ? {
@@ -56,7 +55,6 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
   const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState(undefined);
   const [isSwiping, setIsSwiping] = React.useState(false);
   const [isRealSwipe, setIsRealSwipe] = React.useState(false);
-  const [dragDismissed, setDragDismissed] = React.useState(false);
   const [dragOffset, setDragOffset] = React.useState({
     x: 0,
     y: 0
@@ -70,6 +68,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
   const [descriptionId, setDescriptionId] = React.useState();
   const [lockedDirection, setLockedDirection] = React.useState(null);
   const rootRef = React.useRef(null);
+  const lastToastIdRef = React.useRef(undefined);
   const dragStartPosRef = React.useRef({
     x: 0,
     y: 0
@@ -110,6 +109,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
 
   // Recalculates the natural height of the toast and updates it in the toast manager.
   // `flushSync` avoids visual flickers when called from observer callbacks.
+  // The store ignores this write while the toast is transitioning out.
   const recalculateHeight = useStableCallback((flushSync = false) => {
     const element = rootRef.current;
     if (!element) {
@@ -123,9 +123,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       store.updateToastInternal(toast.id, {
         ref: rootRef,
         height,
-        ...(toast.transitionStatus === 'starting' ? {
-          transitionStatus: undefined
-        } : {})
+        transitionStatus: undefined
       });
     }
     if (flushSync) {
@@ -134,7 +132,34 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       update();
     }
   });
-  useIsoLayoutEffect(recalculateHeight, [recalculateHeight]);
+
+  // Initialize the toast on mount, and reinitialize when it begins a new lifecycle:
+  // re-adding an ending toast retains the same root instance (`key={toast.id}`), and
+  // index-keyed lists can hand an existing instance a different toast.
+  useIsoLayoutEffect(() => {
+    const previousToastId = lastToastIdRef.current;
+    // `recalculateHeight` clears the `starting` status itself, so bail out on the
+    // resulting re-run and on the later `ending` one, which the store discards anyway.
+    if (toast.transitionStatus !== 'starting' && previousToastId === toast.id) {
+      return;
+    }
+    if (previousToastId !== undefined) {
+      // A retained root keeps component-local swipe state from its previous lifecycle;
+      // clear it so the toast doesn't stay offset or exit in the swiped direction.
+      setCurrentSwipeDirection(undefined);
+      setInitialTransform({
+        x: 0,
+        y: 0,
+        scale: 1
+      });
+      setResolvedDragOffset({
+        x: 0,
+        y: 0
+      });
+    }
+    lastToastIdRef.current = toast.id;
+    recalculateHeight();
+  }, [recalculateHeight, toast.id, toast.transitionStatus]);
   function setResolvedDragOffset(nextDragOffset) {
     dragOffsetRef.current = nextDragOffset;
     setDragOffset(nextDragOffset);
@@ -145,31 +170,12 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     };
   }, []);
   function applyDirectionalDamping(deltaX, deltaY) {
-    let newDeltaX = deltaX;
-    let newDeltaY = deltaY;
-    if (!swipeDirections.includes('left') && !swipeDirections.includes('right')) {
-      newDeltaX = deltaX > 0 ? deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-    } else {
-      if (!swipeDirections.includes('right') && deltaX > 0) {
-        newDeltaX = deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
-      }
-      if (!swipeDirections.includes('left') && deltaX < 0) {
-        newDeltaX = -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-      }
-    }
-    if (!swipeDirections.includes('up') && !swipeDirections.includes('down')) {
-      newDeltaY = deltaY > 0 ? deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-    } else {
-      if (!swipeDirections.includes('down') && deltaY > 0) {
-        newDeltaY = deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
-      }
-      if (!swipeDirections.includes('up') && deltaY < 0) {
-        newDeltaY = -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-      }
-    }
+    const damp = delta => delta > 0 ? delta ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(delta) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    const dampX = deltaX > 0 && !swipeDirections.includes('right') || deltaX < 0 && !swipeDirections.includes('left');
+    const dampY = deltaY > 0 && !swipeDirections.includes('down') || deltaY < 0 && !swipeDirections.includes('up');
     return {
-      x: newDeltaX,
-      y: newDeltaY
+      x: dampX ? damp(deltaX) : deltaX,
+      y: dampY ? damp(deltaY) : deltaY
     };
   }
   const handleSwipeEnd = useStableCallback(event => {
@@ -191,47 +197,18 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       setCurrentSwipeDirection(undefined);
       return;
     }
-    let shouldClose = false;
     const resolvedDragOffset = dragOffsetRef.current;
     const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
     const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
     let dismissDirection;
     for (const direction of swipeDirections) {
-      switch (direction) {
-        case 'right':
-          if (deltaX > SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'right';
-          }
-          break;
-        case 'left':
-          if (deltaX < -SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'left';
-          }
-          break;
-        case 'down':
-          if (deltaY > SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'down';
-          }
-          break;
-        case 'up':
-          if (deltaY < -SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'up';
-          }
-          break;
-        default:
-          break;
-      }
-      if (shouldClose) {
+      if (getDisplacement(direction, deltaX, deltaY) > SWIPE_THRESHOLD) {
+        dismissDirection = direction;
         break;
       }
     }
-    if (shouldClose) {
+    if (dismissDirection) {
       setCurrentSwipeDirection(dismissDirection);
-      setDragDismissed(true);
       store.closeToast(toast.id);
     } else {
       setResolvedDragOffset({
@@ -249,7 +226,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       store.pauseTimers();
     }
     const target = getTarget(event.nativeEvent);
-    const isInteractiveElement = target ? target.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`) : false;
+    const isInteractiveElement = target?.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`);
     if (isInteractiveElement) {
       return;
     }
@@ -262,34 +239,30 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       y: event.clientY
     };
     swipeCancelBaselineRef.current = dragStartPosRef.current;
-    if (rootRef.current) {
-      const transform = getElementTransform(rootRef.current);
-      initialTransformRef.current = transform;
-      setInitialTransform(transform);
-      setResolvedDragOffset({
-        x: transform.x,
-        y: transform.y
-      });
-    }
-    store.setHovering(true);
+    const element = event.currentTarget;
+    const transform = getElementTransform(element);
+    initialTransformRef.current = transform;
+    setInitialTransform(transform);
+    setResolvedDragOffset({
+      x: transform.x,
+      y: transform.y
+    });
+    store.set('hovering', true);
     setIsSwiping(true);
     setIsRealSwipe(false);
     setLockedDirection(null);
     isFirstPointerMoveRef.current = true;
-    const element = rootRef.current;
-    if (element) {
-      dragAbortControllerRef.current?.abort();
-      const dragAbortController = new AbortController();
-      dragAbortControllerRef.current = dragAbortController;
-      const doc = ownerDocument(element);
-      doc.addEventListener('pointerup', handleSwipeEnd, {
-        signal: dragAbortController.signal
-      });
-      doc.addEventListener('pointercancel', handleSwipeEnd, {
-        signal: dragAbortController.signal
-      });
-      element.setPointerCapture?.(event.pointerId);
-    }
+    dragAbortControllerRef.current?.abort();
+    const dragAbortController = new AbortController();
+    dragAbortControllerRef.current = dragAbortController;
+    const doc = ownerDocument(element);
+    doc.addEventListener('pointerup', handleSwipeEnd, {
+      signal: dragAbortController.signal
+    });
+    doc.addEventListener('pointercancel', handleSwipeEnd, {
+      signal: dragAbortController.signal
+    });
+    element.setPointerCapture?.(event.pointerId);
   }
   function handlePointerMove(event) {
     if (event.pointerId !== activePointerIdRef.current) {
@@ -329,30 +302,33 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     const deltaY = clientY - dragStartPosRef.current.y;
     const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
     const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
+    let resolvedLockedDirection = lockedDirection;
     if (!isRealSwipe) {
       const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
       if (movementDistance >= MIN_DRAG_THRESHOLD) {
         setIsRealSwipe(true);
-        if (lockedDirection === null) {
-          const hasHorizontal = swipeDirections.includes('left') || swipeDirections.includes('right');
-          const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
-          if (hasHorizontal && hasVertical) {
-            const absX = Math.abs(deltaX);
-            const absY = Math.abs(deltaY);
-            setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
-          }
+        // `lockedDirection` is always reset alongside `isRealSwipe`, so it is
+        // still `null` here. Locking is only meaningful when both axes are
+        // swipeable; otherwise the single axis already constrains the gesture.
+        const hasHorizontal = swipeDirections.includes('left') || swipeDirections.includes('right');
+        const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
+        if (hasHorizontal && hasVertical) {
+          const absX = Math.abs(deltaX);
+          const absY = Math.abs(deltaY);
+          resolvedLockedDirection = absX > absY ? 'horizontal' : 'vertical';
+          setLockedDirection(resolvedLockedDirection);
         }
       }
     }
     let candidate;
     if (!intendedSwipeDirectionRef.current) {
-      if (lockedDirection === 'vertical') {
+      if (resolvedLockedDirection === 'vertical') {
         if (deltaY > 0) {
           candidate = 'down';
         } else if (deltaY < 0) {
           candidate = 'up';
         }
-      } else if (lockedDirection === 'horizontal') {
+      } else if (resolvedLockedDirection === 'horizontal') {
         if (deltaX > 0) {
           candidate = 'right';
         } else if (deltaX < 0) {
@@ -382,21 +358,13 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
     let newOffsetX = initialTransformRef.current.x;
     let newOffsetY = initialTransformRef.current.y;
-    if (lockedDirection === 'horizontal') {
-      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
-        newOffsetX += dampedDelta.x;
-      }
-    } else if (lockedDirection === 'vertical') {
-      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
-        newOffsetY += dampedDelta.y;
-      }
-    } else {
-      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
-        newOffsetX += dampedDelta.x;
-      }
-      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
-        newOffsetY += dampedDelta.y;
-      }
+    const hasHorizontalDir = swipeDirections.includes('left') || swipeDirections.includes('right');
+    const hasVerticalDir = swipeDirections.includes('up') || swipeDirections.includes('down');
+    if (resolvedLockedDirection !== 'vertical' && hasHorizontalDir) {
+      newOffsetX += dampedDelta.x;
+    }
+    if (resolvedLockedDirection !== 'horizontal' && hasVerticalDir) {
+      newOffsetY += dampedDelta.y;
     }
     setResolvedDragOffset({
       x: newOffsetX,
@@ -412,11 +380,8 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     }
   }
   React.useEffect(() => {
-    if (!swipeEnabled) {
-      return undefined;
-    }
     const element = rootRef.current;
-    if (!element) {
+    if (!swipeEnabled || !element) {
       return undefined;
     }
     function preventDefaultTouchStart(event) {
@@ -433,12 +398,6 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     });
   }, [swipeEnabled]);
   function getDragStyles() {
-    if (!isSwiping && dragOffset.x === initialTransform.x && dragOffset.y === initialTransform.y && !dragDismissed) {
-      return {
-        [ToastRootCssVars.swipeMovementX]: '0px',
-        [ToastRootCssVars.swipeMovementY]: '0px'
-      };
-    }
     const deltaX = dragOffset.x - initialTransform.x;
     const deltaY = dragOffset.y - initialTransform.y;
     return {
@@ -446,8 +405,8 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
       transform: isSwiping ? `translateX(${dragOffset.x}px) translateY(${dragOffset.y}px) scale(${initialTransform.scale})` : undefined,
-      [ToastRootCssVars.swipeMovementX]: `${deltaX}px`,
-      [ToastRootCssVars.swipeMovementY]: `${deltaY}px`
+      ['--toast-swipe-movement-x']: `${deltaX}px`,
+      ['--toast-swipe-movement-y']: `${deltaY}px`
     };
   }
   const isHighPriority = toast.priority === 'high';
@@ -466,37 +425,31 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     inert: inertValue(toast.limited),
     style: {
       ...getDragStyles(),
-      [ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
-      [ToastRootCssVars.offsetY]: `${offsetY}px`,
-      [ToastRootCssVars.height]: toast.height ? `${toast.height}px` : undefined
+      ['--toast-index']: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
+      ['--toast-offset-y']: `${offsetY}px`,
+      ['--toast-height']: toast.height ? `${toast.height}px` : undefined
     }
   };
   const toastRoot = React.useMemo(() => ({
-    rootRef,
     toast,
-    titleId,
     setTitleId,
-    descriptionId,
     setDescriptionId,
-    swiping: isSwiping,
-    swipeDirection: currentSwipeDirection,
     recalculateHeight,
-    index: domIndex,
     visibleIndex,
     expanded
-  }), [toast, titleId, descriptionId, isSwiping, currentSwipeDirection, recalculateHeight, domIndex, visibleIndex, expanded]);
+  }), [toast, setTitleId, setDescriptionId, recalculateHeight, visibleIndex, expanded]);
   const state = {
     transitionStatus: toast.transitionStatus,
     expanded,
     limited: toast.limited || false,
     type: toast.type,
-    swiping: toastRoot.swiping,
-    swipeDirection: toastRoot.swipeDirection
+    swiping: isSwiping,
+    swipeDirection: currentSwipeDirection
   };
   const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, toastRoot.rootRef],
+    ref: [forwardedRef, rootRef],
     state,
-    stateAttributesMapping,
+    stateAttributesMapping: toastRootStateAttributesMapping,
     props: [defaultProps, elementProps]
   });
   return /*#__PURE__*/_jsx(ToastRootContext.Provider, {

package/toast/root/ToastRootContext.d.mts

@@ -2,14 +2,8 @@ import * as React from 'react';
 import type { ToastObject } from "../useToastManager.mjs";
 export interface ToastRootContext {
   toast: ToastObject<any>;
-  rootRef: React.RefObject<HTMLElement | null>;
-  titleId: string | undefined;
   setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  descriptionId: string | undefined;
   setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  swiping: boolean;
-  swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
-  index: number;
   visibleIndex: number;
   expanded: boolean;
   recalculateHeight: (flushSync?: boolean) => void;

package/toast/root/ToastRootContext.d.ts

@@ -2,14 +2,8 @@ import * as React from 'react';
 import type { ToastObject } from "../useToastManager.js";
 export interface ToastRootContext {
   toast: ToastObject<any>;
-  rootRef: React.RefObject<HTMLElement | null>;
-  titleId: string | undefined;
   setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  descriptionId: string | undefined;
   setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  swiping: boolean;
-  swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
-  index: number;
   visibleIndex: number;
   expanded: boolean;
   recalculateHeight: (flushSync?: boolean) => void;

package/toast/root/ToastRootDataAttributes.d.mts

@@ -25,7 +25,7 @@ export declare enum ToastRootDataAttributes {
    */
   swipeDirection = "data-swipe-direction",
   /**
-   * Present when the toast is animating in.
+   * Present when the toast begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/toast/root/ToastRootDataAttributes.d.ts

@@ -25,7 +25,7 @@ export declare enum ToastRootDataAttributes {
    */
   swipeDirection = "data-swipe-direction",
   /**
-   * Present when the toast is animating in.
+   * Present when the toast begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/toast/root/ToastRootDataAttributes.js

@@ -32,7 +32,7 @@ let ToastRootDataAttributes = exports.ToastRootDataAttributes = function (ToastR
    */
   ToastRootDataAttributes["swipeDirection"] = "data-swipe-direction";
   /**
-   * Present when the toast is animating in.
+   * Present when the toast begins animating in.
    */
   ToastRootDataAttributes[ToastRootDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/toast/root/ToastRootDataAttributes.mjs

@@ -26,7 +26,7 @@ export let ToastRootDataAttributes = function (ToastRootDataAttributes) {
    */
   ToastRootDataAttributes["swipeDirection"] = "data-swipe-direction";
   /**
-   * Present when the toast is animating in.
+   * Present when the toast begins animating in.
    */
   ToastRootDataAttributes[ToastRootDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/toast/store.d.mts

@@ -1,15 +1,15 @@
 import { ReactStore } from '@base-ui/utils/store';
 import { ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject } from "./useToastManager.mjs";
-type ToastInternalUpdateOptions<Data extends object> = Partial<Omit<ToastObject<Data>, 'id'>>;
-type UpdateToastBehavior = {
-  resetTimer?: boolean | undefined;
-  markUpdated?: boolean | undefined;
-};
-type RemoveToastBehavior = {
-  skipOnRemove?: boolean | undefined;
+type ToastInternalUpdateOptions<Data extends object> = Partial<Omit<ToastObject<Data>, 'id' | 'updateKey'>>;
+/**
+ * A toast once it lives in the store. `addToast` is the only way in and it always
+ * assigns `updateKey`, so unlike the public `ToastObject` it is never missing.
+ */
+export type StoredToast<Data extends object = any> = ToastObject<Data> & {
+  updateKey: number;
 };
 export type State = {
-  toasts: ToastObject<any>[];
+  toasts: StoredToast[];
   toastMetadata: Map<string, ToastMetadata>;
   hovering: boolean;
   focused: boolean;
@@ -20,20 +20,19 @@ export type State = {
   prevFocusElement: HTMLElement | null;
 };
 type ToastMetadata = {
-  value: ToastObject<any>;
+  value: StoredToast;
   domIndex: number;
   visibleIndex: number;
   offsetY: number;
 };
 type InitialState = Omit<State, 'toastMetadata'>;
 export declare const selectors: {
-  toasts: (state: State) => ToastObject<any>[];
+  toasts: (state: State) => StoredToast<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;
+  toast: (state: State, id: string) => StoredToast<any> | undefined;
+  toastIndex: (state: State, id: string) => number;
+  toastOffsetY: (state: State, id: string) => number;
+  toastVisibleIndex: (state: State, id: string) => number;
   focused: (state: State) => boolean;
   expanded: (state: State) => boolean;
   expandedOrOutOfFocus: (state: State) => boolean;
@@ -43,17 +42,13 @@ export declare class ToastStore extends ReactStore<State, {}, typeof selectors>
   private timers;
   private areTimersPaused;
   constructor(initialState: InitialState);
-  setFocused(focused: boolean): void;
-  setHovering(hovering: boolean): void;
-  setIsWindowFocused(isWindowFocused: boolean): void;
-  setPrevFocusElement(prevFocusElement: HTMLElement | null): void;
   setViewport: (viewport: HTMLElement | null) => void;
-  syncProviderProps(props: Pick<State, 'timeout' | 'limit'>): void;
+  syncProviderProps(timeout: number, limit: number): void;
   disposeEffect: () => () => void;
-  removeToast(toastId: string, behavior?: RemoveToastBehavior): void;
+  removeToast(toastId: string, skipOnRemove?: boolean): 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>, behavior?: UpdateToastBehavior) => void;
+  updateToastInternal: <Data extends object>(id: string, updates: ToastInternalUpdateOptions<Data>, resetTimer?: boolean, markUpdated?: boolean) => void;
   closeToast: (toastId?: string) => void;
   promiseToast: <Value, Data extends object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
   pauseTimers(): void;

package/toast/store.d.ts

@@ -1,15 +1,15 @@
 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'>>;
-type UpdateToastBehavior = {
-  resetTimer?: boolean | undefined;
-  markUpdated?: boolean | undefined;
-};
-type RemoveToastBehavior = {
-  skipOnRemove?: boolean | undefined;
+type ToastInternalUpdateOptions<Data extends object> = Partial<Omit<ToastObject<Data>, 'id' | 'updateKey'>>;
+/**
+ * A toast once it lives in the store. `addToast` is the only way in and it always
+ * assigns `updateKey`, so unlike the public `ToastObject` it is never missing.
+ */
+export type StoredToast<Data extends object = any> = ToastObject<Data> & {
+  updateKey: number;
 };
 export type State = {
-  toasts: ToastObject<any>[];
+  toasts: StoredToast[];
   toastMetadata: Map<string, ToastMetadata>;
   hovering: boolean;
   focused: boolean;
@@ -20,20 +20,19 @@ export type State = {
   prevFocusElement: HTMLElement | null;
 };
 type ToastMetadata = {
-  value: ToastObject<any>;
+  value: StoredToast;
   domIndex: number;
   visibleIndex: number;
   offsetY: number;
 };
 type InitialState = Omit<State, 'toastMetadata'>;
 export declare const selectors: {
-  toasts: (state: State) => ToastObject<any>[];
+  toasts: (state: State) => StoredToast<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;
+  toast: (state: State, id: string) => StoredToast<any> | undefined;
+  toastIndex: (state: State, id: string) => number;
+  toastOffsetY: (state: State, id: string) => number;
+  toastVisibleIndex: (state: State, id: string) => number;
   focused: (state: State) => boolean;
   expanded: (state: State) => boolean;
   expandedOrOutOfFocus: (state: State) => boolean;
@@ -43,17 +42,13 @@ export declare class ToastStore extends ReactStore<State, {}, typeof selectors>
   private timers;
   private areTimersPaused;
   constructor(initialState: InitialState);
-  setFocused(focused: boolean): void;
-  setHovering(hovering: boolean): void;
-  setIsWindowFocused(isWindowFocused: boolean): void;
-  setPrevFocusElement(prevFocusElement: HTMLElement | null): void;
   setViewport: (viewport: HTMLElement | null) => void;
-  syncProviderProps(props: Pick<State, 'timeout' | 'limit'>): void;
+  syncProviderProps(timeout: number, limit: number): void;
   disposeEffect: () => () => void;
-  removeToast(toastId: string, behavior?: RemoveToastBehavior): void;
+  removeToast(toastId: string, skipOnRemove?: boolean): 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>, behavior?: UpdateToastBehavior) => void;
+  updateToastInternal: <Data extends object>(id: string, updates: ToastInternalUpdateOptions<Data>, resetTimer?: boolean, markUpdated?: boolean) => void;
   closeToast: (toastId?: string) => void;
   promiseToast: <Value, Data extends object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
   pauseTimers(): void;