@base-ui/react 1.6.0 → 1.7.0

package/toast/store.js

@@ -11,6 +11,11 @@ var _useTimeout = require("@base-ui/utils/useTimeout");
 var _resolvePromiseOptions = require("./utils/resolvePromiseOptions");
 var _utils = require("../floating-ui-react/utils");
 var _focusVisible = require("./utils/focusVisible");
+/**
+ * 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.
+ */
+
 function createToastMetadata(toasts) {
   const metadata = new Map();
   let visibleIndex = 0;
@@ -49,19 +54,17 @@ function applyLimited(toasts, limit) {
     };
   });
 }
-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)(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),
-  expandedOrOutOfFocus: (0, _store.createSelector)(state => state.hovering || state.focused || !state.isWindowFocused),
-  prevFocusElement: (0, _store.createSelector)(state => state.prevFocusElement)
+  toasts: state => state.toasts,
+  isEmpty: state => state.toasts.length === 0,
+  toast: (state, id) => state.toastMetadata.get(id)?.value,
+  toastIndex: (state, id) => state.toastMetadata.get(id)?.domIndex ?? -1,
+  toastOffsetY: (state, id) => state.toastMetadata.get(id)?.offsetY ?? 0,
+  toastVisibleIndex: (state, id) => state.toastMetadata.get(id)?.visibleIndex ?? -1,
+  focused: state => state.focused,
+  expanded: state => state.hovering || state.focused,
+  expandedOrOutOfFocus: state => state.hovering || state.focused || !state.isWindowFocused,
+  prevFocusElement: state => state.prevFocusElement
 };
 class ToastStore extends _store.ReactStore {
   timers = new Map();
@@ -72,32 +75,20 @@ class ToastStore extends _store.ReactStore {
       toastMetadata: createToastMetadata(initialState.toasts)
     }, {}, 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);
   };
-  syncProviderProps(props) {
-    const limitChanged = this.state.limit !== props.limit;
-    if (this.state.timeout === props.timeout && !limitChanged) {
+  syncProviderProps(timeout, limit) {
+    const limitChanged = this.state.limit !== limit;
+    if (this.state.timeout === timeout && !limitChanged) {
       return;
     }
     const updates = {
-      timeout: props.timeout,
-      limit: props.limit
+      timeout,
+      limit
     };
     if (limitChanged) {
-      const newToasts = applyLimited(this.state.toasts, props.limit);
+      const newToasts = applyLimited(this.state.toasts, limit);
       updates.toasts = newToasts;
       updates.toastMetadata = createToastMetadata(newToasts);
     }
@@ -111,13 +102,13 @@ class ToastStore extends _store.ReactStore {
       this.timers.clear();
     };
   };
-  removeToast(toastId, behavior = {}) {
+  removeToast(toastId, skipOnRemove = false) {
     const index = selectors.toastIndex(this.state, toastId);
     if (index === -1) {
       return;
     }
     const toast = this.state.toasts[index];
-    if (!behavior.skipOnRemove) {
+    if (!skipOnRemove) {
       toast?.onRemove?.();
     }
     const newToasts = [...this.state.toasts];
@@ -134,19 +125,14 @@ class ToastStore extends _store.ReactStore {
       const existingToast = selectors.toast(this.state, toast.id);
       if (existingToast) {
         if (existingToast.transitionStatus === 'ending') {
-          this.removeToast(toast.id, {
-            skipOnRemove: true
-          });
+          this.removeToast(toast.id, true);
         } else {
           const {
             id: ignoredId,
             transitionStatus: ignoredTransitionStatus,
             ...updates
           } = toast;
-          this.updateToastInternal(toast.id, updates, {
-            resetTimer: true,
-            markUpdated: true
-          });
+          this.updateToastInternal(toast.id, updates, true, true);
           return toast.id;
         }
       }
@@ -169,16 +155,14 @@ class ToastStore extends _store.ReactStore {
     return id;
   };
   updateToast = (id, updates) => {
-    this.updateToastInternal(id, updates, {
-      markUpdated: true
-    });
+    this.updateToastInternal(id, updates, false, true);
   };
-  updateToastInternal = (id, updates, behavior = {}) => {
+  updateToastInternal = (id, updates, resetTimer = false, markUpdated = false) => {
     const {
       timeout,
       toasts
     } = this.state;
-    const prevToast = selectors.toast(this.state, id) ?? null;
+    const prevToast = selectors.toast(this.state, id);
     if (!prevToast) {
       return;
     }
@@ -192,25 +176,25 @@ class ToastStore extends _store.ReactStore {
     const nextToast = {
       ...prevToast,
       ...updates,
-      ...(behavior.markUpdated && {
-        updateKey: (prevToast.updateKey ?? 0) + 1
+      ...(markUpdated && {
+        updateKey: prevToast.updateKey + 1
       })
     };
     this.setToasts(toasts.map(toast => toast.id === id ? nextToast : toast));
     const nextTimeout = nextToast.timeout ?? timeout;
-    const prevTimeout = prevToast?.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';
+    const wasLoading = prevToast.type === 'loading';
     if (!shouldHaveTimer && hasTimer) {
       this.clearTimer(id);
       return;
     }
 
     // Schedule or reschedule timer if needed
-    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || behavior.resetTimer)) {
+    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || resetTimer)) {
       this.clearTimer(id);
       this.scheduleTimer(id, nextTimeout, () => this.closeToast(id));
       if (selectors.expandedOrOutOfFocus(this.state)) {
@@ -242,16 +226,7 @@ class ToastStore extends _store.ReactStore {
       height: 0
     } : item);
     const newToasts = applyLimited(endingToasts, limit);
-    const updates = {
-      toasts: newToasts,
-      toastMetadata: createToastMetadata(newToasts)
-    };
-    const hasActiveToasts = newToasts.some(toast => toast.transitionStatus !== 'ending');
-    if (!hasActiveToasts) {
-      updates.hovering = false;
-      updates.focused = false;
-    }
-    this.update(updates);
+    this.setToasts(newToasts, !newToasts.some(toast => toast.transitionStatus !== 'ending'));
     toastsToClose.forEach(toast => {
       if (toast.transitionStatus !== 'ending') {
         toast.onClose?.();
@@ -297,11 +272,14 @@ class ToastStore extends _store.ReactStore {
     }
     this.areTimersPaused = true;
     this.timers.forEach(timer => {
+      // Timers added while already paused have no running timeout, so their
+      // `remaining` is still the full delay and must be left alone.
       if (timer.timeout) {
         timer.timeout.clear();
-        const elapsed = Date.now() - timer.start;
-        const remaining = timer.delay - elapsed;
-        timer.remaining = remaining > 0 ? remaining : 0;
+        // `start` is stamped on every resume, so subtracting from `remaining`
+        // (rather than from the original delay) keeps repeated pause/resume
+        // cycles from handing the toast extra time.
+        timer.remaining = Math.max(timer.remaining - (Date.now() - timer.start), 0);
       }
     });
   }
@@ -352,7 +330,7 @@ class ToastStore extends _store.ReactStore {
     });
     this.timers.set(id, {
       timeout: currentTimeout,
-      start: shouldStartActive ? start : 0,
+      start,
       delay,
       remaining: delay,
       callback
@@ -382,12 +360,12 @@ class ToastStore extends _store.ReactStore {
       this.areTimersPaused = false;
     }
   }
-  setToasts(newToasts) {
+  setToasts(newToasts, clearInteraction = newToasts.length === 0) {
     const updates = {
       toasts: newToasts,
       toastMetadata: createToastMetadata(newToasts)
     };
-    if (newToasts.length === 0) {
+    if (clearInteraction) {
       updates.hovering = false;
       updates.focused = false;
     }
@@ -404,29 +382,17 @@ class ToastStore extends _store.ReactStore {
     }
     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) {
+    const scan = (from, step) => {
+      for (let index = from; index >= 0 && index < toasts.length; index += step) {
         if (toasts[index].transitionStatus !== 'ending') {
-          nextToast = toasts[index];
-          break;
+          return toasts[index];
         }
-        index -= 1;
       }
-    }
+      return null;
+    };
+
+    // Try to find the next toast that isn't animating out, then fall back to the previous one.
+    const nextToast = scan(currentIndex + 1, 1) ?? scan(currentIndex - 1, -1);
     if (nextToast) {
       nextToast.ref?.current?.focus();
     } else {

package/toast/store.mjs

@@ -1,10 +1,16 @@
-import { ReactStore, createSelector } from '@base-ui/utils/store';
+import { ReactStore } 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.mjs";
 import { activeElement, contains, getTarget } from "../floating-ui-react/utils.mjs";
 import { isFocusVisible } from "./utils/focusVisible.mjs";
+
+/**
+ * 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.
+ */
+
 function createToastMetadata(toasts) {
   const metadata = new Map();
   let visibleIndex = 0;
@@ -43,19 +49,17 @@ function applyLimited(toasts, limit) {
     };
   });
 }
-const toastMetadataSelector = state => state.toastMetadata;
 export const selectors = {
-  toasts: createSelector(state => state.toasts),
-  isEmpty: createSelector(state => state.toasts.length === 0),
-  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),
-  expandedOrOutOfFocus: createSelector(state => state.hovering || state.focused || !state.isWindowFocused),
-  prevFocusElement: createSelector(state => state.prevFocusElement)
+  toasts: state => state.toasts,
+  isEmpty: state => state.toasts.length === 0,
+  toast: (state, id) => state.toastMetadata.get(id)?.value,
+  toastIndex: (state, id) => state.toastMetadata.get(id)?.domIndex ?? -1,
+  toastOffsetY: (state, id) => state.toastMetadata.get(id)?.offsetY ?? 0,
+  toastVisibleIndex: (state, id) => state.toastMetadata.get(id)?.visibleIndex ?? -1,
+  focused: state => state.focused,
+  expanded: state => state.hovering || state.focused,
+  expandedOrOutOfFocus: state => state.hovering || state.focused || !state.isWindowFocused,
+  prevFocusElement: state => state.prevFocusElement
 };
 export class ToastStore extends ReactStore {
   timers = new Map();
@@ -66,32 +70,20 @@ export class ToastStore extends ReactStore {
       toastMetadata: createToastMetadata(initialState.toasts)
     }, {}, 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);
   };
-  syncProviderProps(props) {
-    const limitChanged = this.state.limit !== props.limit;
-    if (this.state.timeout === props.timeout && !limitChanged) {
+  syncProviderProps(timeout, limit) {
+    const limitChanged = this.state.limit !== limit;
+    if (this.state.timeout === timeout && !limitChanged) {
       return;
     }
     const updates = {
-      timeout: props.timeout,
-      limit: props.limit
+      timeout,
+      limit
     };
     if (limitChanged) {
-      const newToasts = applyLimited(this.state.toasts, props.limit);
+      const newToasts = applyLimited(this.state.toasts, limit);
       updates.toasts = newToasts;
       updates.toastMetadata = createToastMetadata(newToasts);
     }
@@ -105,13 +97,13 @@ export class ToastStore extends ReactStore {
       this.timers.clear();
     };
   };
-  removeToast(toastId, behavior = {}) {
+  removeToast(toastId, skipOnRemove = false) {
     const index = selectors.toastIndex(this.state, toastId);
     if (index === -1) {
       return;
     }
     const toast = this.state.toasts[index];
-    if (!behavior.skipOnRemove) {
+    if (!skipOnRemove) {
       toast?.onRemove?.();
     }
     const newToasts = [...this.state.toasts];
@@ -128,19 +120,14 @@ export class ToastStore extends ReactStore {
       const existingToast = selectors.toast(this.state, toast.id);
       if (existingToast) {
         if (existingToast.transitionStatus === 'ending') {
-          this.removeToast(toast.id, {
-            skipOnRemove: true
-          });
+          this.removeToast(toast.id, true);
         } else {
           const {
             id: ignoredId,
             transitionStatus: ignoredTransitionStatus,
             ...updates
           } = toast;
-          this.updateToastInternal(toast.id, updates, {
-            resetTimer: true,
-            markUpdated: true
-          });
+          this.updateToastInternal(toast.id, updates, true, true);
           return toast.id;
         }
       }
@@ -163,16 +150,14 @@ export class ToastStore extends ReactStore {
     return id;
   };
   updateToast = (id, updates) => {
-    this.updateToastInternal(id, updates, {
-      markUpdated: true
-    });
+    this.updateToastInternal(id, updates, false, true);
   };
-  updateToastInternal = (id, updates, behavior = {}) => {
+  updateToastInternal = (id, updates, resetTimer = false, markUpdated = false) => {
     const {
       timeout,
       toasts
     } = this.state;
-    const prevToast = selectors.toast(this.state, id) ?? null;
+    const prevToast = selectors.toast(this.state, id);
     if (!prevToast) {
       return;
     }
@@ -186,25 +171,25 @@ export class ToastStore extends ReactStore {
     const nextToast = {
       ...prevToast,
       ...updates,
-      ...(behavior.markUpdated && {
-        updateKey: (prevToast.updateKey ?? 0) + 1
+      ...(markUpdated && {
+        updateKey: prevToast.updateKey + 1
       })
     };
     this.setToasts(toasts.map(toast => toast.id === id ? nextToast : toast));
     const nextTimeout = nextToast.timeout ?? timeout;
-    const prevTimeout = prevToast?.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';
+    const wasLoading = prevToast.type === 'loading';
     if (!shouldHaveTimer && hasTimer) {
       this.clearTimer(id);
       return;
     }
 
     // Schedule or reschedule timer if needed
-    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || behavior.resetTimer)) {
+    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || resetTimer)) {
       this.clearTimer(id);
       this.scheduleTimer(id, nextTimeout, () => this.closeToast(id));
       if (selectors.expandedOrOutOfFocus(this.state)) {
@@ -236,16 +221,7 @@ export class ToastStore extends ReactStore {
       height: 0
     } : item);
     const newToasts = applyLimited(endingToasts, limit);
-    const updates = {
-      toasts: newToasts,
-      toastMetadata: createToastMetadata(newToasts)
-    };
-    const hasActiveToasts = newToasts.some(toast => toast.transitionStatus !== 'ending');
-    if (!hasActiveToasts) {
-      updates.hovering = false;
-      updates.focused = false;
-    }
-    this.update(updates);
+    this.setToasts(newToasts, !newToasts.some(toast => toast.transitionStatus !== 'ending'));
     toastsToClose.forEach(toast => {
       if (toast.transitionStatus !== 'ending') {
         toast.onClose?.();
@@ -291,11 +267,14 @@ export class ToastStore extends ReactStore {
     }
     this.areTimersPaused = true;
     this.timers.forEach(timer => {
+      // Timers added while already paused have no running timeout, so their
+      // `remaining` is still the full delay and must be left alone.
       if (timer.timeout) {
         timer.timeout.clear();
-        const elapsed = Date.now() - timer.start;
-        const remaining = timer.delay - elapsed;
-        timer.remaining = remaining > 0 ? remaining : 0;
+        // `start` is stamped on every resume, so subtracting from `remaining`
+        // (rather than from the original delay) keeps repeated pause/resume
+        // cycles from handing the toast extra time.
+        timer.remaining = Math.max(timer.remaining - (Date.now() - timer.start), 0);
       }
     });
   }
@@ -346,7 +325,7 @@ export class ToastStore extends ReactStore {
     });
     this.timers.set(id, {
       timeout: currentTimeout,
-      start: shouldStartActive ? start : 0,
+      start,
       delay,
       remaining: delay,
       callback
@@ -376,12 +355,12 @@ export class ToastStore extends ReactStore {
       this.areTimersPaused = false;
     }
   }
-  setToasts(newToasts) {
+  setToasts(newToasts, clearInteraction = newToasts.length === 0) {
     const updates = {
       toasts: newToasts,
       toastMetadata: createToastMetadata(newToasts)
     };
-    if (newToasts.length === 0) {
+    if (clearInteraction) {
       updates.hovering = false;
       updates.focused = false;
     }
@@ -398,29 +377,17 @@ export class ToastStore extends ReactStore {
     }
     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) {
+    const scan = (from, step) => {
+      for (let index = from; index >= 0 && index < toasts.length; index += step) {
         if (toasts[index].transitionStatus !== 'ending') {
-          nextToast = toasts[index];
-          break;
+          return toasts[index];
         }
-        index -= 1;
       }
-    }
+      return null;
+    };
+
+    // Try to find the next toast that isn't animating out, then fall back to the previous one.
+    const nextToast = scan(currentIndex + 1, 1) ?? scan(currentIndex - 1, -1);
     if (nextToast) {
       nextToast.ref?.current?.focus();
     } else {

package/toast/title/ToastTitle.js

@@ -7,10 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToastTitle = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useId = require("@base-ui/utils/useId");
-var _ToastRootContext = require("../root/ToastRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
+var _useToastLabelPart = require("../utils/useToastLabelPart");
 /**
  * A title that labels the toast.
  * Renders an `<h2>` element.
@@ -27,23 +25,13 @@ const ToastTitle = exports.ToastTitle = /*#__PURE__*/React.forwardRef(function T
     ...elementProps
   } = componentProps;
   const {
-    toast,
-    setTitleId
-  } = (0, _ToastRootContext.useToastRootContext)();
-  const children = childrenProp ?? toast.title;
-  const shouldRender = Boolean(children);
-  const id = (0, _useId.useId)(idProp);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!shouldRender) {
-      return undefined;
-    }
-    setTitleId(id);
-    return () => {
-      setTitleId(undefined);
-    };
-  }, [shouldRender, id, setTitleId]);
+    id,
+    children,
+    type,
+    setId
+  } = (0, _useToastLabelPart.useToastLabelPart)(idProp, childrenProp, 'title');
   const state = {
-    type: toast.type
+    type
   };
   const element = (0, _useRenderElement.useRenderElement)('h2', componentProps, {
     ref: forwardedRef,
@@ -54,9 +42,6 @@ const ToastTitle = exports.ToastTitle = /*#__PURE__*/React.forwardRef(function T
       children
     }
   });
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
+  return (0, _useToastLabelPart.useToastLabelElement)(element, id, setId);
 });
 if (process.env.NODE_ENV !== "production") ToastTitle.displayName = "ToastTitle";

package/toast/title/ToastTitle.mjs

@@ -1,10 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useId } from '@base-ui/utils/useId';
-import { useToastRootContext } from "../root/ToastRootContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { useToastLabelElement, useToastLabelPart } from "../utils/useToastLabelPart.mjs";
 
 /**
  * A title that labels the toast.
@@ -22,23 +20,13 @@ export const ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(comp
     ...elementProps
   } = componentProps;
   const {
-    toast,
-    setTitleId
-  } = useToastRootContext();
-  const children = childrenProp ?? toast.title;
-  const shouldRender = Boolean(children);
-  const id = useId(idProp);
-  useIsoLayoutEffect(() => {
-    if (!shouldRender) {
-      return undefined;
-    }
-    setTitleId(id);
-    return () => {
-      setTitleId(undefined);
-    };
-  }, [shouldRender, id, setTitleId]);
+    id,
+    children,
+    type,
+    setId
+  } = useToastLabelPart(idProp, childrenProp, 'title');
   const state = {
-    type: toast.type
+    type
   };
   const element = useRenderElement('h2', componentProps, {
     ref: forwardedRef,
@@ -49,9 +37,6 @@ export const ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(comp
       children
     }
   });
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
+  return useToastLabelElement(element, id, setId);
 });
 if (process.env.NODE_ENV !== "production") ToastTitle.displayName = "ToastTitle";

package/toast/useToastManager.js

@@ -2,22 +2,17 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToastManager = useToastManager;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _ToastProviderContext = require("./provider/ToastProviderContext");
 /**
  * Returns the array of toasts and methods to manage them.
  */
 function useToastManager() {
-  const store = React.useContext(_ToastProviderContext.ToastContext);
-  if (!store) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: useToastManager must be used within <Toast.Provider>.' : (0, _formatErrorMessage2.default)(73));
-  }
+  const store = (0, _ToastProviderContext.useToastProviderContext)();
   const toasts = store.useState('toasts');
   return React.useMemo(() => ({
     toasts,