@base-ui/react 1.6.0 → 1.7.0

package/tabs/tab/TabsTab.js

@@ -9,11 +9,13 @@ exports.TabsTab = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _owner = require("@base-ui/utils/owner");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _useButton = require("../../internals/use-button");
 var _constants = require("../../internals/composite/constants");
 var _useCompositeItem = require("../../internals/composite/item/useCompositeItem");
+var _CompositeRootContext = require("../../internals/composite/root/CompositeRootContext");
 var _TabsRootContext = require("../root/TabsRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _TabsListContext = require("../list/TabsListContext");
@@ -40,17 +42,19 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
   const {
     value: activeTabValue,
     getTabPanelIdByValue,
+    onValueChange,
     orientation,
     tabActivationDirection
   } = (0, _TabsRootContext.useTabsRootContext)();
   const {
     activateOnFocus,
-    highlightedTabIndex,
-    onTabActivation,
     registerTabResizeObserverElement,
-    setHighlightedTabIndex,
     tabsListElement
   } = (0, _TabsListContext.useTabsListContext)();
+  const {
+    highlightedIndex,
+    onHighlightedIndexChange
+  } = (0, _CompositeRootContext.useCompositeRootContext)();
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const tabMetadata = React.useMemo(() => ({
     disabled,
@@ -68,14 +72,14 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
   });
   const active = value === activeTabValue;
   const isNavigatingRef = React.useRef(false);
-  const tabElementRef = React.useRef(null);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const tabElement = tabElementRef.current;
-    if (!tabElement) {
-      return undefined;
-    }
-    return registerTabResizeObserverElement(tabElement);
-  }, [registerTabResizeObserverElement]);
+  const unobserveTabElementRef = React.useRef(null);
+
+  // Registered from the ref callback rather than an effect so the observer
+  // follows the rendered element when the `render` prop swaps the host element.
+  const observeTabElement = (0, _useStableCallback.useStableCallback)(element => {
+    unobserveTabElementRef.current?.();
+    unobserveTabElementRef.current = element ? registerTabResizeObserverElement(element) : null;
+  });
 
   // Keep the highlighted item in sync with the currently active tab
   // when the value prop changes externally (controlled mode)
@@ -84,7 +88,7 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
       isNavigatingRef.current = false;
       return;
     }
-    if (!(active && index > -1 && highlightedTabIndex !== index)) {
+    if (!(active && index > -1 && highlightedIndex !== index)) {
       return;
     }
 
@@ -102,9 +106,9 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
     // Don't highlight disabled tabs to prevent them from interfering with keyboard navigation.
     // Keyboard focus (tabIndex) should remain on an enabled tab even when a disabled tab is selected.
     if (!disabled) {
-      setHighlightedTabIndex(index);
+      onHighlightedIndexChange(index);
     }
-  }, [active, index, highlightedTabIndex, setHighlightedTabIndex, disabled, tabsListElement]);
+  }, [active, index, highlightedIndex, onHighlightedIndexChange, disabled, tabsListElement]);
   const {
     getButtonProps,
     buttonRef
@@ -116,33 +120,28 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
   const tabPanelId = getTabPanelIdByValue(value);
   const isPressingRef = React.useRef(false);
   const isMainButtonRef = React.useRef(false);
+
+  // Both callers guard on `!active`, so the current value is never re-committed.
+  function activate(event) {
+    onValueChange(value, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent, undefined, {
+      activationDirection: 'none'
+    }));
+  }
   function onClick(event) {
     if (active || disabled) {
       return;
     }
-    onTabActivation(value, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent, undefined, {
-      activationDirection: 'none'
-    }));
+    activate(event);
   }
   function onFocus(event) {
-    if (active) {
-      return;
-    }
-
-    // Only highlight enabled tabs when focused (disabled tabs remain focusable via focusableWhenDisabled).
-    if (index > -1 && !disabled) {
-      setHighlightedTabIndex(index);
-    }
-    if (disabled) {
+    if (active || disabled) {
       return;
     }
     if (activateOnFocus && (!isPressingRef.current ||
     // keyboard or touch focus
-    isPressingRef.current && isMainButtonRef.current) // mouse focus
+    isMainButtonRef.current) // main mouse button focus
     ) {
-      onTabActivation(value, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent, undefined, {
-        activationDirection: 'none'
-      }));
+      activate(event);
     }
   }
   function onPointerDown(event) {
@@ -150,17 +149,21 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
       return;
     }
     isPressingRef.current = true;
-    function handlePointerUp() {
+    // Secondary presses (context menu, middle click) may focus the tab, but
+    // must not activate it with `activateOnFocus`.
+    isMainButtonRef.current = event.button === 0;
+
+    // Registered for every button so a secondary press doesn't leave the tab
+    // stuck in the pressing state, which would suppress later focus activation.
+    const doc = (0, _owner.ownerDocument)(event.currentTarget);
+    function handlePointerEnd() {
       isPressingRef.current = false;
       isMainButtonRef.current = false;
+      doc.removeEventListener('pointerup', handlePointerEnd);
+      doc.removeEventListener('pointercancel', handlePointerEnd);
     }
-    if (!event.button || event.button === 0) {
-      isMainButtonRef.current = true;
-      const doc = (0, _owner.ownerDocument)(event.currentTarget);
-      doc.addEventListener('pointerup', handlePointerUp, {
-        once: true
-      });
-    }
+    doc.addEventListener('pointerup', handlePointerEnd);
+    doc.addEventListener('pointercancel', handlePointerEnd);
   }
   const state = {
     disabled,
@@ -170,7 +173,7 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
   };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
-    ref: [forwardedRef, buttonRef, compositeRef, tabElementRef],
+    ref: [forwardedRef, buttonRef, compositeRef, observeTabElement],
     props: [compositeProps, {
       role: 'tab',
       'aria-controls': tabPanelId,

package/tabs/tab/TabsTab.mjs

@@ -3,11 +3,13 @@
 import * as React from 'react';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useButton } from "../../internals/use-button/index.mjs";
 import { ACTIVE_COMPOSITE_ITEM } from "../../internals/composite/constants.mjs";
 import { useCompositeItem } from "../../internals/composite/item/useCompositeItem.mjs";
+import { useCompositeRootContext } from "../../internals/composite/root/CompositeRootContext.mjs";
 import { useTabsRootContext } from "../root/TabsRootContext.mjs";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
 import { useTabsListContext } from "../list/TabsListContext.mjs";
@@ -35,17 +37,19 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   const {
     value: activeTabValue,
     getTabPanelIdByValue,
+    onValueChange,
     orientation,
     tabActivationDirection
   } = useTabsRootContext();
   const {
     activateOnFocus,
-    highlightedTabIndex,
-    onTabActivation,
     registerTabResizeObserverElement,
-    setHighlightedTabIndex,
     tabsListElement
   } = useTabsListContext();
+  const {
+    highlightedIndex,
+    onHighlightedIndexChange
+  } = useCompositeRootContext();
   const id = useBaseUiId(idProp);
   const tabMetadata = React.useMemo(() => ({
     disabled,
@@ -63,14 +67,14 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   });
   const active = value === activeTabValue;
   const isNavigatingRef = React.useRef(false);
-  const tabElementRef = React.useRef(null);
-  useIsoLayoutEffect(() => {
-    const tabElement = tabElementRef.current;
-    if (!tabElement) {
-      return undefined;
-    }
-    return registerTabResizeObserverElement(tabElement);
-  }, [registerTabResizeObserverElement]);
+  const unobserveTabElementRef = React.useRef(null);
+
+  // Registered from the ref callback rather than an effect so the observer
+  // follows the rendered element when the `render` prop swaps the host element.
+  const observeTabElement = useStableCallback(element => {
+    unobserveTabElementRef.current?.();
+    unobserveTabElementRef.current = element ? registerTabResizeObserverElement(element) : null;
+  });
 
   // Keep the highlighted item in sync with the currently active tab
   // when the value prop changes externally (controlled mode)
@@ -79,7 +83,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
       isNavigatingRef.current = false;
       return;
     }
-    if (!(active && index > -1 && highlightedTabIndex !== index)) {
+    if (!(active && index > -1 && highlightedIndex !== index)) {
       return;
     }
 
@@ -97,9 +101,9 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
     // Don't highlight disabled tabs to prevent them from interfering with keyboard navigation.
     // Keyboard focus (tabIndex) should remain on an enabled tab even when a disabled tab is selected.
     if (!disabled) {
-      setHighlightedTabIndex(index);
+      onHighlightedIndexChange(index);
     }
-  }, [active, index, highlightedTabIndex, setHighlightedTabIndex, disabled, tabsListElement]);
+  }, [active, index, highlightedIndex, onHighlightedIndexChange, disabled, tabsListElement]);
   const {
     getButtonProps,
     buttonRef
@@ -111,33 +115,28 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   const tabPanelId = getTabPanelIdByValue(value);
   const isPressingRef = React.useRef(false);
   const isMainButtonRef = React.useRef(false);
+
+  // Both callers guard on `!active`, so the current value is never re-committed.
+  function activate(event) {
+    onValueChange(value, createChangeEventDetails(REASONS.none, event.nativeEvent, undefined, {
+      activationDirection: 'none'
+    }));
+  }
   function onClick(event) {
     if (active || disabled) {
       return;
     }
-    onTabActivation(value, createChangeEventDetails(REASONS.none, event.nativeEvent, undefined, {
-      activationDirection: 'none'
-    }));
+    activate(event);
   }
   function onFocus(event) {
-    if (active) {
-      return;
-    }
-
-    // Only highlight enabled tabs when focused (disabled tabs remain focusable via focusableWhenDisabled).
-    if (index > -1 && !disabled) {
-      setHighlightedTabIndex(index);
-    }
-    if (disabled) {
+    if (active || disabled) {
       return;
     }
     if (activateOnFocus && (!isPressingRef.current ||
     // keyboard or touch focus
-    isPressingRef.current && isMainButtonRef.current) // mouse focus
+    isMainButtonRef.current) // main mouse button focus
     ) {
-      onTabActivation(value, createChangeEventDetails(REASONS.none, event.nativeEvent, undefined, {
-        activationDirection: 'none'
-      }));
+      activate(event);
     }
   }
   function onPointerDown(event) {
@@ -145,17 +144,21 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
       return;
     }
     isPressingRef.current = true;
-    function handlePointerUp() {
+    // Secondary presses (context menu, middle click) may focus the tab, but
+    // must not activate it with `activateOnFocus`.
+    isMainButtonRef.current = event.button === 0;
+
+    // Registered for every button so a secondary press doesn't leave the tab
+    // stuck in the pressing state, which would suppress later focus activation.
+    const doc = ownerDocument(event.currentTarget);
+    function handlePointerEnd() {
       isPressingRef.current = false;
       isMainButtonRef.current = false;
+      doc.removeEventListener('pointerup', handlePointerEnd);
+      doc.removeEventListener('pointercancel', handlePointerEnd);
     }
-    if (!event.button || event.button === 0) {
-      isMainButtonRef.current = true;
-      const doc = ownerDocument(event.currentTarget);
-      doc.addEventListener('pointerup', handlePointerUp, {
-        once: true
-      });
-    }
+    doc.addEventListener('pointerup', handlePointerEnd);
+    doc.addEventListener('pointercancel', handlePointerEnd);
   }
   const state = {
     disabled,
@@ -165,7 +168,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   };
   const element = useRenderElement('button', componentProps, {
     state,
-    ref: [forwardedRef, buttonRef, compositeRef, tabElementRef],
+    ref: [forwardedRef, buttonRef, compositeRef, observeTabElement],
     props: [compositeProps, {
       role: 'tab',
       'aria-controls': tabPanelId,

package/toast/action/ToastAction.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _ToastRootContext = require("../root/ToastRootContext");
 var _useButton = require("../../internals/use-button/useButton");
 var _useRenderElement = require("../../internals/useRenderElement");
+var _isRenderableNode = require("../utils/isRenderableNode");
 /**
  * Performs an action when clicked.
  * Renders a `<button>` element.
@@ -29,7 +30,6 @@ const ToastAction = exports.ToastAction = /*#__PURE__*/React.forwardRef(function
     toast
   } = (0, _ToastRootContext.useToastRootContext)();
   const computedChildren = toast.actionProps?.children ?? elementProps.children;
-  const shouldRender = Boolean(computedChildren);
   const {
     getButtonProps,
     buttonRef
@@ -47,9 +47,6 @@ const ToastAction = exports.ToastAction = /*#__PURE__*/React.forwardRef(function
       children: computedChildren
     }]
   });
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
+  return (0, _isRenderableNode.hasRenderableChildren)(element) ? element : null;
 });
 if (process.env.NODE_ENV !== "production") ToastAction.displayName = "ToastAction";

package/toast/action/ToastAction.mjs

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useToastRootContext } from "../root/ToastRootContext.mjs";
 import { useButton } from "../../internals/use-button/useButton.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { hasRenderableChildren } from "../utils/isRenderableNode.mjs";
 
 /**
  * Performs an action when clicked.
@@ -24,7 +25,6 @@ export const ToastAction = /*#__PURE__*/React.forwardRef(function ToastAction(co
     toast
   } = useToastRootContext();
   const computedChildren = toast.actionProps?.children ?? elementProps.children;
-  const shouldRender = Boolean(computedChildren);
   const {
     getButtonProps,
     buttonRef
@@ -42,9 +42,6 @@ export const ToastAction = /*#__PURE__*/React.forwardRef(function ToastAction(co
       children: computedChildren
     }]
   });
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
+  return hasRenderableChildren(element) ? element : null;
 });
 if (process.env.NODE_ENV !== "production") ToastAction.displayName = "ToastAction";

package/toast/arrow/ToastArrow.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
-import type { Side, Align } from "../../utils/useAnchorPositioning.mjs";
+import type { Side, Align } from "../../internals/useAnchorPositioning.mjs";
 /**
  * Displays an element positioned against the toast anchor.
  * Renders a `<div>` element.

package/toast/arrow/ToastArrow.d.ts

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

package/toast/arrow/ToastArrow.js

@@ -34,7 +34,7 @@ const ToastArrow = exports.ToastArrow = /*#__PURE__*/React.forwardRef(function T
     align,
     uncentered: arrowUncentered
   };
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],
     props: [{
@@ -42,6 +42,5 @@ const ToastArrow = exports.ToastArrow = /*#__PURE__*/React.forwardRef(function T
       'aria-hidden': true
     }, elementProps]
   });
-  return element;
 });
 if (process.env.NODE_ENV !== "production") ToastArrow.displayName = "ToastArrow";

package/toast/arrow/ToastArrow.mjs

@@ -29,7 +29,7 @@ export const ToastArrow = /*#__PURE__*/React.forwardRef(function ToastArrow(comp
     align,
     uncentered: arrowUncentered
   };
-  const element = useRenderElement('div', componentProps, {
+  return useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],
     props: [{
@@ -37,6 +37,5 @@ export const ToastArrow = /*#__PURE__*/React.forwardRef(function ToastArrow(comp
       'aria-hidden': true
     }, elementProps]
   });
-  return element;
 });
 if (process.env.NODE_ENV !== "production") ToastArrow.displayName = "ToastArrow";

package/toast/close/ToastClose.js

@@ -28,9 +28,9 @@ const ToastClose = exports.ToastClose = /*#__PURE__*/React.forwardRef(function T
   } = componentProps;
   const store = (0, _ToastProviderContext.useToastProviderContext)();
   const {
-    toast
+    toast,
+    expanded
   } = (0, _ToastRootContext.useToastRootContext)();
-  const expanded = store.useState('expanded');
   const [hasFocus, setHasFocus] = React.useState(false);
   const {
     getButtonProps,
@@ -42,7 +42,7 @@ const ToastClose = exports.ToastClose = /*#__PURE__*/React.forwardRef(function T
   const state = {
     type: toast.type
   };
-  const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
+  return (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
@@ -58,6 +58,5 @@ const ToastClose = exports.ToastClose = /*#__PURE__*/React.forwardRef(function T
       }
     }, elementProps, getButtonProps]
   });
-  return element;
 });
 if (process.env.NODE_ENV !== "production") ToastClose.displayName = "ToastClose";

package/toast/close/ToastClose.mjs

@@ -23,9 +23,9 @@ export const ToastClose = /*#__PURE__*/React.forwardRef(function ToastClose(comp
   } = componentProps;
   const store = useToastProviderContext();
   const {
-    toast
+    toast,
+    expanded
   } = useToastRootContext();
-  const expanded = store.useState('expanded');
   const [hasFocus, setHasFocus] = React.useState(false);
   const {
     getButtonProps,
@@ -37,7 +37,7 @@ export const ToastClose = /*#__PURE__*/React.forwardRef(function ToastClose(comp
   const state = {
     type: toast.type
   };
-  const element = useRenderElement('button', componentProps, {
+  return useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
@@ -53,6 +53,5 @@ export const ToastClose = /*#__PURE__*/React.forwardRef(function ToastClose(comp
       }
     }, elementProps, getButtonProps]
   });
-  return element;
 });
 if (process.env.NODE_ENV !== "production") ToastClose.displayName = "ToastClose";

package/toast/content/ToastContent.js

@@ -30,12 +30,9 @@ const ToastContent = exports.ToastContent = /*#__PURE__*/React.forwardRef(functi
   } = (0, _ToastRootContext.useToastRootContext)();
   const contentRef = React.useRef(null);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const node = contentRef.current;
-    if (!node) {
-      return undefined;
-    }
     recalculateHeight();
-    if (typeof ResizeObserver !== 'function' || typeof MutationObserver !== 'function') {
+    const node = contentRef.current;
+    if (!node || typeof ResizeObserver !== 'function' || typeof MutationObserver !== 'function') {
       return undefined;
     }
     const resizeObserver = new ResizeObserver(() => recalculateHeight(true));
@@ -56,11 +53,10 @@ const ToastContent = exports.ToastContent = /*#__PURE__*/React.forwardRef(functi
     expanded,
     behind
   };
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, contentRef],
     state,
     props: elementProps
   });
-  return element;
 });
 if (process.env.NODE_ENV !== "production") ToastContent.displayName = "ToastContent";

package/toast/content/ToastContent.mjs

@@ -25,12 +25,9 @@ export const ToastContent = /*#__PURE__*/React.forwardRef(function ToastContent(
   } = useToastRootContext();
   const contentRef = React.useRef(null);
   useIsoLayoutEffect(() => {
-    const node = contentRef.current;
-    if (!node) {
-      return undefined;
-    }
     recalculateHeight();
-    if (typeof ResizeObserver !== 'function' || typeof MutationObserver !== 'function') {
+    const node = contentRef.current;
+    if (!node || typeof ResizeObserver !== 'function' || typeof MutationObserver !== 'function') {
       return undefined;
     }
     const resizeObserver = new ResizeObserver(() => recalculateHeight(true));
@@ -51,11 +48,10 @@ export const ToastContent = /*#__PURE__*/React.forwardRef(function ToastContent(
     expanded,
     behind
   };
-  const element = useRenderElement('div', componentProps, {
+  return useRenderElement('div', componentProps, {
     ref: [forwardedRef, contentRef],
     state,
     props: elementProps
   });
-  return element;
 });
 if (process.env.NODE_ENV !== "production") ToastContent.displayName = "ToastContent";

package/toast/description/ToastDescription.js

@@ -7,10 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToastDescription = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useId = require("@base-ui/utils/useId");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _ToastRootContext = require("../root/ToastRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
+var _useToastLabelPart = require("../utils/useToastLabelPart");
 /**
  * A description that describes the toast.
  * Can be used as the default message for the toast when no title is provided.
@@ -28,23 +26,13 @@ const ToastDescription = exports.ToastDescription = /*#__PURE__*/React.forwardRe
     ...elementProps
   } = componentProps;
   const {
-    toast,
-    setDescriptionId
-  } = (0, _ToastRootContext.useToastRootContext)();
-  const children = childrenProp ?? toast.description;
-  const shouldRender = Boolean(children);
-  const id = (0, _useId.useId)(idProp);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!shouldRender) {
-      return undefined;
-    }
-    setDescriptionId(id);
-    return () => {
-      setDescriptionId(undefined);
-    };
-  }, [shouldRender, id, setDescriptionId]);
+    id,
+    children,
+    type,
+    setId
+  } = (0, _useToastLabelPart.useToastLabelPart)(idProp, childrenProp, 'description');
   const state = {
-    type: toast.type
+    type
   };
   const element = (0, _useRenderElement.useRenderElement)('p', componentProps, {
     ref: forwardedRef,
@@ -55,9 +43,6 @@ const ToastDescription = exports.ToastDescription = /*#__PURE__*/React.forwardRe
       children
     }
   });
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
+  return (0, _useToastLabelPart.useToastLabelElement)(element, id, setId);
 });
 if (process.env.NODE_ENV !== "production") ToastDescription.displayName = "ToastDescription";

package/toast/description/ToastDescription.mjs

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