@base-ui/react 1.4.1 → 1.5.0

package/tabs/root/TabsRoot.js

@@ -14,6 +14,8 @@ var _useRenderElement = require("../../internals/useRenderElement");
 var _CompositeList = require("../../internals/composite/list/CompositeList");
 var _TabsRootContext = require("./TabsRootContext");
 var _stateAttributesMapping = require("./stateAttributesMapping");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups the tabs and the corresponding panels.
@@ -33,9 +35,9 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
     ...elementProps
   } = componentProps;
 
-  // Track whether the user explicitly provided a `defaultValue` prop.
+  // Track whether the user explicitly provided a defined `defaultValue` prop.
   // Used to determine if we should honor a disabled tab selection.
-  const hasExplicitDefaultValueProp = Object.hasOwn(componentProps, 'defaultValue');
+  const hasExplicitDefaultValueProp = componentProps.defaultValue !== undefined;
   const tabPanelRefs = React.useRef([]);
   const [mountedTabPanels, setMountedTabPanels] = React.useState(() => new Map());
   const [value, setValue] = (0, _useControlled.useControlled)({
@@ -103,6 +105,11 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
     }
     setValue(newValue);
   });
+  const notifyAutomaticValueChange = (0, _useStableCallback.useStableCallback)((nextValue, reason) => {
+    onValueChangeProp?.(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, undefined, undefined, {
+      activationDirection: 'none'
+    }));
+  });
   const registerMountedTabPanel = (0, _useStableCallback.useStableCallback)((panelValue, panelId) => {
     setMountedTabPanels(prev => {
       if (prev.get(panelValue) === panelId) {
@@ -170,38 +177,78 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
     return undefined;
   }, [tabMap]);
 
-  // Automatically switch to the first enabled tab when:
-  // - The current selection is disabled (and wasn't explicitly set via defaultValue)
-  // - The current selection is missing (tab was removed from DOM)
-  // Falls back to null if all tabs are disabled.
+  // Implicit uncontrolled selections are still automatic changes, so notify
+  // once when the tabs first register. Explicit defaults are treated as user-owned.
+  const shouldNotifyInitialValueChangeRef = React.useRef(!hasExplicitDefaultValueProp);
+  // An explicit defaultValue can intentionally point at a disabled tab on mount.
+  // Once that selection becomes valid, later disabled states should fall back.
+  const shouldHonorDisabledDefaultValueRef = React.useRef(hasExplicitDefaultValueProp);
+  const didRegisterTabsRef = React.useRef(false);
+
+  // Uncontrolled roots own automatic fallback. Controlled roots keep the exact
+  // value supplied by the parent, even when that tab is disabled or missing.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (isControlled || tabMap.size === 0) {
+    if (isControlled) {
       return;
     }
+    function commitAutomaticValueChange(fallbackValue, fallbackReason) {
+      setValue(fallbackValue);
+      // Automatic fallbacks are not directional transitions; reset the direction
+      // alongside the value so the batched commit keeps both in sync.
+      setActivationDirectionState(prev => {
+        if (prev.previousValue === fallbackValue && prev.tabActivationDirection === 'none') {
+          return prev;
+        }
+        return {
+          previousValue: fallbackValue,
+          tabActivationDirection: 'none'
+        };
+      });
+      notifyAutomaticValueChange(fallbackValue, fallbackReason);
+      // Mark the initial notification as delivered only after the consumer
+      // callback returns. The fallback value is queued first so automatic
+      // consistency updates are not cancelable through a throwing handler.
+      shouldNotifyInitialValueChangeRef.current = false;
+    }
+    if (tabMap.size === 0) {
+      if (!didRegisterTabsRef.current || value === null) {
+        return;
+      }
+      commitAutomaticValueChange(null, _reasons.REASONS.missing);
+      return;
+    }
+    didRegisterTabsRef.current = true;
     const selectionIsDisabled = selectedTabMetadata?.disabled;
     const selectionIsMissing = selectedTabMetadata == null && value !== null;
-    const shouldHonorExplicitDefaultSelection = hasExplicitDefaultValueProp && selectionIsDisabled && value === defaultValueProp;
-    if (shouldHonorExplicitDefaultSelection) {
-      return;
+    if (!selectionIsDisabled && value === defaultValueProp) {
+      shouldHonorDisabledDefaultValueRef.current = false;
     }
-    if (!selectionIsDisabled && !selectionIsMissing) {
+    if (shouldHonorDisabledDefaultValueRef.current && selectionIsDisabled && value === defaultValueProp) {
       return;
     }
-    const fallbackValue = firstEnabledTabValue ?? null;
-    if (value === fallbackValue) {
+    const shouldNotifyInitialValueChange = shouldNotifyInitialValueChangeRef.current;
+    if (selectionIsDisabled || selectionIsMissing) {
+      const fallbackValue = firstEnabledTabValue ?? null;
+      if (value === fallbackValue) {
+        // Already at the fallback value; no commit or notification needed,
+        // but record that the implicit-initial transition has resolved.
+        shouldNotifyInitialValueChangeRef.current = false;
+        return;
+      }
+      let fallbackReason = _reasons.REASONS.missing;
+      if (shouldNotifyInitialValueChange) {
+        fallbackReason = _reasons.REASONS.initial;
+      } else if (selectionIsDisabled) {
+        fallbackReason = _reasons.REASONS.disabled;
+      }
+      commitAutomaticValueChange(fallbackValue, fallbackReason);
       return;
     }
-    setValue(fallbackValue);
-    setActivationDirectionState(prev => {
-      if (prev.tabActivationDirection === 'none') {
-        return prev;
-      }
-      return {
-        ...prev,
-        tabActivationDirection: 'none'
-      };
-    });
-  }, [defaultValueProp, firstEnabledTabValue, hasExplicitDefaultValueProp, isControlled, selectedTabMetadata, setValue, tabMap, value]);
+    if (shouldNotifyInitialValueChange && selectedTabMetadata != null) {
+      notifyAutomaticValueChange(value, _reasons.REASONS.initial);
+      shouldNotifyInitialValueChangeRef.current = false;
+    }
+  }, [defaultValueProp, firstEnabledTabValue, isControlled, notifyAutomaticValueChange, selectedTabMetadata, setValue, tabMap, value]);
   const state = {
     orientation,
     tabActivationDirection

package/tabs/root/TabsRootContext.d.ts

@@ -20,12 +20,10 @@ export interface TabsRootContext {
   getTabElementBySelectedValue: (selectedValue: TabsTab.Value | undefined) => HTMLElement | null;
   /**
    * Gets the `id` attribute of the Tab that corresponds to the given TabPanel value.
-   * @param (any) panelValue Value to find the Tab for.
    */
   getTabIdByPanelValue: (panelValue: TabsTab.Value) => string | undefined;
   /**
    * Gets the `id` attribute of the TabPanel that corresponds to the given Tab value.
-   * @param (any) tabValue Value to find the TabPanel for.
    */
   getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
   registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;

package/toast/provider/ToastProvider.js

@@ -55,7 +55,7 @@ const ToastProvider = exports.ToastProvider = function ToastProvider(props) {
       }
     });
     return unsubscribe;
-  }, [store, timeout, toastManager]);
+  }, [store, toastManager]);
   store.useSyncedValues({
     timeout,
     limit

package/toast/root/ToastRoot.d.ts

@@ -20,7 +20,7 @@ export interface ToastRootState {
    */
   expanded: boolean;
   /**
-   * Whether the toast was removed due to exceeding the limit.
+   * Whether the toast was limited because the toast limit was exceeded.
    */
   limited: boolean;
   /**

package/toast/root/ToastRoot.js

@@ -21,6 +21,7 @@ var _useRenderElement = require("../../internals/useRenderElement");
 var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 var _ToastRootCssVars = require("./ToastRootCssVars");
 var _constants = require("../../internals/constants");
+var _useSwipeDismiss = require("../../utils/useSwipeDismiss");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._stateAttributesMapping.transitionStatusMapping,
@@ -35,47 +36,6 @@ 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':
-      return -deltaY;
-    case 'down':
-      return deltaY;
-    case 'left':
-      return -deltaX;
-    case 'right':
-      return deltaX;
-    default:
-      return 0;
-  }
-}
-function getElementTransform(element) {
-  const computedStyle = (0, _owner.ownerWindow)(element).getComputedStyle(element);
-  const transform = computedStyle.transform;
-  let translateX = 0;
-  let translateY = 0;
-  let scale = 1;
-  if (transform && transform !== 'none') {
-    const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
-    if (matrix) {
-      const values = matrix[1].split(', ').map(parseFloat);
-      if (values.length === 6) {
-        translateX = values[4];
-        translateY = values[5];
-        scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
-      } else if (values.length === 16) {
-        translateX = values[12];
-        translateY = values[13];
-        scale = values[0];
-      }
-    }
-  }
-  return {
-    x: translateX,
-    y: translateY,
-    scale
-  };
-}
 
 /**
  * Groups all parts of an individual toast.
@@ -133,6 +93,12 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     y: 0
   });
   const isFirstPointerMoveRef = React.useRef(false);
+  const dragOffsetRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const activePointerIdRef = React.useRef(null);
+  const dragAbortControllerRef = React.useRef(null);
   const domIndex = store.useState('toastIndex', toast.id);
   const visibleIndex = store.useState('toastVisibleIndex', toast.id);
   const offsetY = store.useState('toastOffsetY', toast.id);
@@ -148,11 +114,8 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     }
   });
 
-  /**
-   * Recalculates the natural height of the toast and updates it in the toast manager.
-   * @param flushSync Whether to flush the update synchronously. Use in observer
-   * callbacks to avoid visual flickers.
-   */
+  // Recalculates the natural height of the toast and updates it in the toast manager.
+  // `flushSync` avoids visual flickers when called from observer callbacks.
   const recalculateHeight = (0, _useStableCallback.useStableCallback)((flushSync = false) => {
     const element = rootRef.current;
     if (!element) {
@@ -178,6 +141,15 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     }
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(recalculateHeight, [recalculateHeight]);
+  function setResolvedDragOffset(nextDragOffset) {
+    dragOffsetRef.current = nextDragOffset;
+    setDragOffset(nextDragOffset);
+  }
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    return () => {
+      dragAbortControllerRef.current?.abort();
+    };
+  }, []);
   function applyDirectionalDamping(deltaX, deltaY) {
     let newDeltaX = deltaX;
     let newDeltaY = deltaY;
@@ -206,6 +178,75 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       y: newDeltaY
     };
   }
+  const handleSwipeEnd = (0, _useStableCallback.useStableCallback)(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+    activePointerIdRef.current = null;
+    dragAbortControllerRef.current?.abort();
+    dragAbortControllerRef.current = null;
+    setIsSwiping(false);
+    setIsRealSwipe(false);
+    setLockedDirection(null);
+    const resolvedInitialTransform = initialTransformRef.current;
+    if (event.type === 'pointercancel' || cancelledSwipeRef.current) {
+      setResolvedDragOffset({
+        x: resolvedInitialTransform.x,
+        y: resolvedInitialTransform.y
+      });
+      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) {
+        break;
+      }
+    }
+    if (shouldClose) {
+      setCurrentSwipeDirection(dismissDirection);
+      setDragDismissed(true);
+      store.closeToast(toast.id);
+    } else {
+      setResolvedDragOffset({
+        x: resolvedInitialTransform.x,
+        y: resolvedInitialTransform.y
+      });
+      setCurrentSwipeDirection(undefined);
+    }
+  });
   function handlePointerDown(event) {
     if (event.button !== 0) {
       return;
@@ -221,16 +262,17 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     cancelledSwipeRef.current = false;
     intendedSwipeDirectionRef.current = undefined;
     maxSwipeDisplacementRef.current = 0;
+    activePointerIdRef.current = event.pointerId;
     dragStartPosRef.current = {
       x: event.clientX,
       y: event.clientY
     };
     swipeCancelBaselineRef.current = dragStartPosRef.current;
     if (rootRef.current) {
-      const transform = getElementTransform(rootRef.current);
+      const transform = (0, _useSwipeDismiss.getElementTransform)(rootRef.current);
       initialTransformRef.current = transform;
       setInitialTransform(transform);
-      setDragOffset({
+      setResolvedDragOffset({
         x: transform.x,
         y: transform.y
       });
@@ -240,10 +282,23 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     setIsRealSwipe(false);
     setLockedDirection(null);
     isFirstPointerMoveRef.current = true;
-    rootRef.current?.setPointerCapture(event.pointerId);
+    const element = rootRef.current;
+    if (element) {
+      dragAbortControllerRef.current?.abort();
+      const dragAbortController = new AbortController();
+      dragAbortControllerRef.current = dragAbortController;
+      const doc = (0, _owner.ownerDocument)(element);
+      doc.addEventListener('pointerup', handleSwipeEnd, {
+        signal: dragAbortController.signal
+      });
+      doc.addEventListener('pointercancel', handleSwipeEnd, {
+        signal: dragAbortController.signal
+      });
+      element.setPointerCapture?.(event.pointerId);
+    }
   }
   function handlePointerMove(event) {
-    if (!isSwiping) {
+    if (event.pointerId !== activePointerIdRef.current) {
       return;
     }
 
@@ -316,12 +371,12 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       }
       if (candidate && swipeDirections.includes(candidate)) {
         intendedSwipeDirectionRef.current = candidate;
-        maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
+        maxSwipeDisplacementRef.current = (0, _useSwipeDismiss.getDisplacement)(candidate, deltaX, deltaY);
         setCurrentSwipeDirection(candidate);
       }
     } else {
       const direction = intendedSwipeDirectionRef.current;
-      const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
+      const currentDisplacement = (0, _useSwipeDismiss.getDisplacement)(direction, cancelDeltaX, cancelDeltaY);
       if (currentDisplacement > SWIPE_THRESHOLD) {
         cancelledSwipeRef.current = false;
         setCurrentSwipeDirection(direction);
@@ -349,89 +404,11 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
         newOffsetY += dampedDelta.y;
       }
     }
-    setDragOffset({
+    setResolvedDragOffset({
       x: newOffsetX,
       y: newOffsetY
     });
   }
-  function handlePointerUp(event) {
-    if (!isSwiping) {
-      return;
-    }
-    setIsSwiping(false);
-    setIsRealSwipe(false);
-    setLockedDirection(null);
-    rootRef.current?.releasePointerCapture(event.pointerId);
-    if (cancelledSwipeRef.current) {
-      setDragOffset({
-        x: initialTransform.x,
-        y: initialTransform.y
-      });
-      setCurrentSwipeDirection(undefined);
-      return;
-    }
-    let shouldClose = false;
-    const deltaX = dragOffset.x - initialTransform.x;
-    const deltaY = dragOffset.y - initialTransform.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) {
-        break;
-      }
-    }
-    if (shouldClose) {
-      setCurrentSwipeDirection(dismissDirection);
-      setDragDismissed(true);
-      store.closeToast(toast.id);
-    } else {
-      setDragOffset({
-        x: initialTransform.x,
-        y: initialTransform.y
-      });
-      setCurrentSwipeDirection(undefined);
-    }
-  }
-  function handlePointerCancel() {
-    if (!isSwiping) {
-      return;
-    }
-    setIsSwiping(false);
-    setIsRealSwipe(false);
-    setLockedDirection(null);
-    setDragOffset({
-      x: initialTransform.x,
-      y: initialTransform.y
-    });
-    setCurrentSwipeDirection(undefined);
-  }
   function handleKeyDown(event) {
     if (event.key === 'Escape') {
       if (!rootRef.current || !(0, _utils.contains)(rootRef.current, (0, _utils.activeElement)((0, _owner.ownerDocument)(rootRef.current)))) {
@@ -485,8 +462,8 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     'aria-hidden': isHighPriority && !focused ? true : undefined,
     onPointerDown: swipeEnabled ? handlePointerDown : undefined,
     onPointerMove: swipeEnabled ? handlePointerMove : undefined,
-    onPointerUp: swipeEnabled ? handlePointerUp : undefined,
-    onPointerCancel: swipeEnabled ? handlePointerCancel : undefined,
+    onPointerUp: swipeEnabled ? handleSwipeEnd : undefined,
+    onPointerCancel: swipeEnabled ? handleSwipeEnd : undefined,
     onKeyDown: handleKeyDown,
     inert: (0, _inertValue.inertValue)(toast.limited),
     style: {

package/toast/root/ToastRootDataAttributes.d.ts

@@ -5,7 +5,7 @@ export declare enum ToastRootDataAttributes {
    */
   expanded = "data-expanded",
   /**
-   * Present when the toast was removed due to exceeding the limit.
+   * Present when the toast was limited because the toast limit was exceeded.
    * @type {boolean}
    */
   limited = "data-limited",

package/toast/root/ToastRootDataAttributes.js

@@ -12,7 +12,7 @@ let ToastRootDataAttributes = exports.ToastRootDataAttributes = function (ToastR
    */
   ToastRootDataAttributes["expanded"] = "data-expanded";
   /**
-   * Present when the toast was removed due to exceeding the limit.
+   * Present when the toast was limited because the toast limit was exceeded.
    * @type {boolean}
    */
   ToastRootDataAttributes["limited"] = "data-limited";

package/toast/store.d.ts

@@ -10,6 +10,7 @@ type RemoveToastBehavior = {
 };
 export type State = {
   toasts: ToastObject<any>[];
+  toastMetadata: Map<string, ToastMetadata>;
   hovering: boolean;
   focused: boolean;
   timeout: number;
@@ -18,6 +19,13 @@ export type State = {
   viewport: HTMLElement | null;
   prevFocusElement: HTMLElement | null;
 };
+type ToastMetadata = {
+  value: ToastObject<any>;
+  domIndex: number;
+  visibleIndex: number;
+  offsetY: number;
+};
+type InitialState = Omit<State, 'toastMetadata'>;
 export declare const selectors: {
   toasts: (state: State) => ToastObject<any>[];
   isEmpty: (state: State) => boolean;
@@ -34,7 +42,7 @@ export declare const selectors: {
 export declare class ToastStore extends ReactStore<State, {}, typeof selectors> {
   private timers;
   private areTimersPaused;
-  constructor(initialState: State);
+  constructor(initialState: InitialState);
   setFocused(focused: boolean): void;
   setHovering(hovering: boolean): void;
   setIsWindowFocused(isWindowFocused: boolean): void;

package/toast/store.js

@@ -11,13 +11,13 @@ 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();
+function createToastMetadata(toasts) {
+  const metadata = new Map();
   let visibleIndex = 0;
   let offsetY = 0;
   toasts.forEach((toast, toastIndex) => {
     const isEnding = toast.transitionStatus === 'ending';
-    map.set(toast.id, {
+    metadata.set(toast.id, {
       value: toast,
       domIndex: toastIndex,
       visibleIndex: isEnding ? -1 : visibleIndex,
@@ -28,15 +28,16 @@ const toastMapSelector = (0, _store.createSelectorMemoized)(state => state.toast
       visibleIndex += 1;
     }
   });
-  return map;
-});
+  return metadata;
+}
+const toastMetadataSelector = state => state.toastMetadata;
 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),
+  toast: (0, _store.createSelector)(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.value),
+  toastIndex: (0, _store.createSelector)(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.domIndex ?? -1),
+  toastOffsetY: (0, _store.createSelector)(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.offsetY ?? 0),
+  toastVisibleIndex: (0, _store.createSelector)(toastMetadataSelector, (toastMetadata, id) => toastMetadata.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),
@@ -47,7 +48,10 @@ class ToastStore extends _store.ReactStore {
   timers = new Map();
   areTimersPaused = false;
   constructor(initialState) {
-    super(initialState, {}, selectors);
+    super({
+      ...initialState,
+      toastMetadata: createToastMetadata(initialState.toasts)
+    }, {}, selectors);
   }
   setFocused(focused) {
     this.set('focused', focused);
@@ -252,7 +256,8 @@ class ToastStore extends _store.ReactStore {
       } : item;
     });
     const updates = {
-      toasts: newToasts
+      toasts: newToasts,
+      toastMetadata: createToastMetadata(newToasts)
     };
     if (closeAll || toasts.length === 1) {
       updates.hovering = false;
@@ -364,7 +369,8 @@ class ToastStore extends _store.ReactStore {
   }
   setToasts(newToasts) {
     const updates = {
-      toasts: newToasts
+      toasts: newToasts,
+      toastMetadata: createToastMetadata(newToasts)
     };
     if (newToasts.length === 0) {
       updates.hovering = false;

package/toast/useToastManager.d.ts

@@ -48,7 +48,7 @@ export interface ToastObject<Data extends object> {
    */
   updateKey?: number | undefined;
   /**
-   * Determines if the toast was closed due to the limit being reached.
+   * Determines if the toast was limited because the toast limit was exceeded.
    */
   limited?: boolean | undefined;
   /**

package/toast/viewport/ToastViewport.js

@@ -45,6 +45,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
   const prevFocusElement = store.useState('prevFocusElement');
   const frontmostHeight = toasts[0]?.height ?? 0;
   const hasTransitioningToasts = React.useMemo(() => toasts.some(toast => toast.transitionStatus === 'ending'), [toasts]);
+  const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
 
   // Listen globally for F6 so we can force-focus the viewport.
   React.useEffect(() => {
@@ -234,7 +235,6 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
       })
     }]
   });
-  const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [!isEmpty && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
       onFocus: handleFocusGuard