@base-ui/react 1.4.0 → 1.5.0

package/esm/tabs/tab/TabsTab.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import type { TabsRoot } from "../root/TabsRoot.js";
 /**
  * An individual interactive tab button that toggles the corresponding panel.

package/esm/tabs/tab/TabsTab.js

@@ -3,15 +3,15 @@
 import * as React from 'react';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useButton } from "../../use-button/index.js";
-import { ACTIVE_COMPOSITE_ITEM } from "../../composite/constants.js";
-import { useCompositeItem } from "../../composite/item/useCompositeItem.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { ACTIVE_COMPOSITE_ITEM } from "../../internals/composite/constants.js";
+import { useCompositeItem } from "../../internals/composite/item/useCompositeItem.js";
 import { useTabsRootContext } from "../root/TabsRootContext.js";
 import { useTabsListContext } from "../list/TabsListContext.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { activeElement, contains } from "../../floating-ui-react/utils.js";
 
 /**

package/esm/toast/action/ToastAction.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * Performs an action when clicked.
  * Renders a `<button>` element.

package/esm/toast/action/ToastAction.js

@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 import { useToastRootContext } from "../root/ToastRootContext.js";
-import { useButton } from "../../use-button/useButton.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useButton } from "../../internals/use-button/useButton.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Performs an action when clicked.

package/esm/toast/arrow/ToastArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
 /**
  * Displays an element positioned against the toast anchor.

package/esm/toast/arrow/ToastArrow.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useToastPositionerContext } from "../positioner/ToastPositionerContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Displays an element positioned against the toast anchor.

package/esm/toast/close/ToastClose.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * Closes the toast when clicked.
  * Renders a `<button>` element.

package/esm/toast/close/ToastClose.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { useToastRootContext } from "../root/ToastRootContext.js";
 import { useToastProviderContext } from "../provider/ToastProviderContext.js";
-import { useButton } from "../../use-button/useButton.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useButton } from "../../internals/use-button/useButton.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Closes the toast when clicked.

package/esm/toast/content/ToastContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A container for the contents of a toast.
  * Renders a `<div>` element.

package/esm/toast/content/ToastContent.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useToastRootContext } from "../root/ToastRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A container for the contents of a toast.

package/esm/toast/description/ToastDescription.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A description that describes the toast.
  * Can be used as the default message for the toast when no title is provided.

package/esm/toast/description/ToastDescription.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useId } from '@base-ui/utils/useId';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useToastRootContext } from "../root/ToastRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A description that describes the toast.

package/esm/toast/positioner/ToastPositioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ToastObject } from "../useToastManager.js";
 /**
  * Positions the toast against the anchor.

package/esm/toast/positioner/ToastPositioner.js

@@ -2,11 +2,12 @@
 
 import * as React from 'react';
 import { isElement } from '@floating-ui/utils/dom';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
-import { EMPTY_OBJECT, POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { POPUP_COLLISION_AVOIDANCE } from "../../internals/constants.js";
 import { ToastPositionerContext } from "./ToastPositionerContext.js";
 import { useFloatingRootContext } from "../../floating-ui-react/index.js";
-import { NOOP } from "../../utils/noop.js";
+import { NOOP } from "../../internals/noop.js";
 import { ToastRootCssVars } from "../root/ToastRootCssVars.js";
 import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 import { usePositioner } from "../../utils/usePositioner.js";

package/esm/toast/provider/ToastProvider.js

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ToastObject as ToastObjectType } from "../useToastManager.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * Groups all parts of an individual toast.
  * Renders a `<div>` element.
@@ -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/esm/toast/root/ToastRoot.js

@@ -3,18 +3,19 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
-import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
+import { ownerDocument } from '@base-ui/utils/owner';
 import { inertValue } from '@base-ui/utils/inertValue';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 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 { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 import { useToastProviderContext } from "../provider/ToastProviderContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
 import { ToastRootCssVars } from "./ToastRootCssVars.js";
-import { BASE_UI_SWIPE_IGNORE_SELECTOR, LEGACY_SWIPE_IGNORE_SELECTOR } from "../../utils/constants.js";
+import { BASE_UI_SWIPE_IGNORE_SELECTOR, LEGACY_SWIPE_IGNORE_SELECTOR } from "../../internals/constants.js";
+import { getDisplacement, getElementTransform } from "../../utils/useSwipeDismiss.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...transitionStatusMapping,
@@ -29,47 +30,6 @@ const REVERSE_CANCEL_THRESHOLD = 10;
 const OPPOSITE_DIRECTION_DAMPING_FACTOR = 0.5;
 const MIN_DRAG_THRESHOLD = 1;
 const TOAST_SWIPE_IGNORE_SELECTOR = `${BASE_UI_SWIPE_IGNORE_SELECTOR},${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 = 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.
@@ -127,6 +87,12 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     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);
@@ -142,11 +108,8 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     }
   });
 
-  /**
-   * 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 = useStableCallback((flushSync = false) => {
     const element = rootRef.current;
     if (!element) {
@@ -172,6 +135,15 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     }
   });
   useIsoLayoutEffect(recalculateHeight, [recalculateHeight]);
+  function setResolvedDragOffset(nextDragOffset) {
+    dragOffsetRef.current = nextDragOffset;
+    setDragOffset(nextDragOffset);
+  }
+  useIsoLayoutEffect(() => {
+    return () => {
+      dragAbortControllerRef.current?.abort();
+    };
+  }, []);
   function applyDirectionalDamping(deltaX, deltaY) {
     let newDeltaX = deltaX;
     let newDeltaY = deltaY;
@@ -200,6 +172,75 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       y: newDeltaY
     };
   }
+  const handleSwipeEnd = 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;
@@ -215,6 +256,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     cancelledSwipeRef.current = false;
     intendedSwipeDirectionRef.current = undefined;
     maxSwipeDisplacementRef.current = 0;
+    activePointerIdRef.current = event.pointerId;
     dragStartPosRef.current = {
       x: event.clientX,
       y: event.clientY
@@ -224,7 +266,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       const transform = getElementTransform(rootRef.current);
       initialTransformRef.current = transform;
       setInitialTransform(transform);
-      setDragOffset({
+      setResolvedDragOffset({
         x: transform.x,
         y: transform.y
       });
@@ -234,10 +276,23 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     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 = 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;
     }
 
@@ -343,89 +398,11 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
         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 || !contains(rootRef.current, activeElement(ownerDocument(rootRef.current)))) {
@@ -479,8 +456,8 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     '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: inertValue(toast.limited),
     style: {

package/esm/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/esm/toast/root/ToastRootDataAttributes.js

@@ -1,4 +1,4 @@
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 export let ToastRootDataAttributes = function (ToastRootDataAttributes) {
   /**
    * Present when the toast is expanded in the viewport.
@@ -6,7 +6,7 @@ export let ToastRootDataAttributes = function (ToastRootDataAttributes) {
    */
   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/esm/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/esm/toast/store.js

@@ -1,17 +1,17 @@
-import { ReactStore, createSelector, createSelectorMemoized } from '@base-ui/utils/store';
+import { ReactStore, createSelector } 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();
+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,
@@ -22,15 +22,16 @@ const toastMapSelector = createSelectorMemoized(state => state.toasts, toasts =>
       visibleIndex += 1;
     }
   });
-  return map;
-});
+  return metadata;
+}
+const toastMetadataSelector = state => state.toastMetadata;
 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),
+  toast: createSelector(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.value),
+  toastIndex: createSelector(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.domIndex ?? -1),
+  toastOffsetY: createSelector(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.offsetY ?? 0),
+  toastVisibleIndex: createSelector(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.visibleIndex ?? -1),
   hovering: createSelector(state => state.hovering),
   focused: createSelector(state => state.focused),
   expanded: createSelector(state => state.hovering || state.focused),
@@ -41,7 +42,10 @@ export class ToastStore extends ReactStore {
   timers = new Map();
   areTimersPaused = false;
   constructor(initialState) {
-    super(initialState, {}, selectors);
+    super({
+      ...initialState,
+      toastMetadata: createToastMetadata(initialState.toasts)
+    }, {}, selectors);
   }
   setFocused(focused) {
     this.set('focused', focused);
@@ -246,7 +250,8 @@ export class ToastStore extends ReactStore {
       } : item;
     });
     const updates = {
-      toasts: newToasts
+      toasts: newToasts,
+      toastMetadata: createToastMetadata(newToasts)
     };
     if (closeAll || toasts.length === 1) {
       updates.hovering = false;
@@ -358,7 +363,8 @@ export class ToastStore extends ReactStore {
   }
   setToasts(newToasts) {
     const updates = {
-      toasts: newToasts
+      toasts: newToasts,
+      toastMetadata: createToastMetadata(newToasts)
     };
     if (newToasts.length === 0) {
       updates.hovering = false;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A title that labels the toast.
  * Renders an `<h2>` element.