@base-ui/react 1.6.0 → 1.7.0

package/toast/useToastManager.mjs

@@ -1,16 +1,12 @@
 'use client';
 
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
-import { ToastContext } from "./provider/ToastProviderContext.mjs";
+import { useToastProviderContext } from "./provider/ToastProviderContext.mjs";
 /**
  * Returns the array of toasts and methods to manage them.
  */
 export function useToastManager() {
-  const store = React.useContext(ToastContext);
-  if (!store) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: useToastManager must be used within <Toast.Provider>.' : _formatErrorMessage(73));
-  }
+  const store = useToastProviderContext();
   const toasts = store.useState('toasts');
   return React.useMemo(() => ({
     toasts,

package/toast/utils/isRenderableNode.d.mts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function isRenderableNode(node: React.ReactNode): boolean;
+export declare function hasRenderableChildren(element: React.ReactNode): boolean;

package/toast/utils/isRenderableNode.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function isRenderableNode(node: React.ReactNode): boolean;
+export declare function hasRenderableChildren(element: React.ReactNode): boolean;

package/toast/utils/isRenderableNode.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasRenderableChildren = hasRenderableChildren;
+exports.isRenderableNode = isRenderableNode;
+var React = _interopRequireWildcard(require("react"));
+function isRenderableNode(node) {
+  if (node == null || typeof node === 'boolean' || node === '') {
+    return false;
+  }
+  if (Array.isArray(node)) {
+    return node.some(isRenderableNode);
+  }
+  return true;
+}
+function hasRenderableChildren(element) {
+  return /*#__PURE__*/React.isValidElement(element) && isRenderableNode(element.props.children);
+}

package/toast/utils/isRenderableNode.mjs

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export function isRenderableNode(node) {
+  if (node == null || typeof node === 'boolean' || node === '') {
+    return false;
+  }
+  if (Array.isArray(node)) {
+    return node.some(isRenderableNode);
+  }
+  return true;
+}
+export function hasRenderableChildren(element) {
+  return /*#__PURE__*/React.isValidElement(element) && isRenderableNode(element.props.children);
+}

package/toast/utils/test-utils.d.mts

@@ -1,8 +1 @@
-/**
- * @internal
- */
-export declare function Button(): import("react/jsx-runtime").JSX.Element;
-/**
- * @internal
- */
-export declare function List(): import("react/jsx-runtime").JSX.Element[];
+export {};

package/toast/utils/test-utils.d.ts

@@ -1,8 +1 @@
-/**
- * @internal
- */
-export declare function Button(): import("react/jsx-runtime").JSX.Element;
-/**
- * @internal
- */
-export declare function List(): import("react/jsx-runtime").JSX.Element[];
+export {};

package/toast/utils/useToastLabelPart.d.mts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Shared logic for `Toast.Title` and `Toast.Description`, which only differ by the rendered tag,
+ * the fallback content, and which id setter they register with. Resolves the content and returns
+ * the pieces each part passes to `useRenderElement` and `useToastLabelElement`.
+ */
+export declare function useToastLabelPart(idProp: string | undefined, childrenProp: React.ReactNode, part: 'title' | 'description'): {
+  id: string | undefined;
+  children: React.ReactNode;
+  type: string | undefined;
+  setId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+/**
+ * Mounts the evaluated label element only when it carries renderable content (so a `render` prop's
+ * own children count, while a childless styling-only `render` stays conditional), registering the
+ * generated id with the root while the part renders.
+ */
+export declare function useToastLabelElement(element: React.ReactElement | null, id: string | undefined, setId: React.Dispatch<React.SetStateAction<string | undefined>>): React.ReactElement | null;

package/toast/utils/useToastLabelPart.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Shared logic for `Toast.Title` and `Toast.Description`, which only differ by the rendered tag,
+ * the fallback content, and which id setter they register with. Resolves the content and returns
+ * the pieces each part passes to `useRenderElement` and `useToastLabelElement`.
+ */
+export declare function useToastLabelPart(idProp: string | undefined, childrenProp: React.ReactNode, part: 'title' | 'description'): {
+  id: string | undefined;
+  children: React.ReactNode;
+  type: string | undefined;
+  setId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+/**
+ * Mounts the evaluated label element only when it carries renderable content (so a `render` prop's
+ * own children count, while a childless styling-only `render` stays conditional), registering the
+ * generated id with the root while the part renders.
+ */
+export declare function useToastLabelElement(element: React.ReactElement | null, id: string | undefined, setId: React.Dispatch<React.SetStateAction<string | undefined>>): React.ReactElement | null;

package/toast/utils/useToastLabelPart.js

@@ -0,0 +1,52 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToastLabelElement = useToastLabelElement;
+exports.useToastLabelPart = useToastLabelPart;
+var _useId = require("@base-ui/utils/useId");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _ToastRootContext = require("../root/ToastRootContext");
+var _isRenderableNode = require("./isRenderableNode");
+/**
+ * Shared logic for `Toast.Title` and `Toast.Description`, which only differ by the rendered tag,
+ * the fallback content, and which id setter they register with. Resolves the content and returns
+ * the pieces each part passes to `useRenderElement` and `useToastLabelElement`.
+ */
+function useToastLabelPart(idProp, childrenProp, part) {
+  const {
+    toast,
+    setTitleId,
+    setDescriptionId
+  } = (0, _ToastRootContext.useToastRootContext)();
+  const setId = part === 'title' ? setTitleId : setDescriptionId;
+  const children = childrenProp ?? (part === 'title' ? toast.title : toast.description);
+  const id = (0, _useId.useId)(idProp);
+  return {
+    id,
+    children,
+    type: toast.type,
+    setId
+  };
+}
+
+/**
+ * Mounts the evaluated label element only when it carries renderable content (so a `render` prop's
+ * own children count, while a childless styling-only `render` stays conditional), registering the
+ * generated id with the root while the part renders.
+ */
+function useToastLabelElement(element, id, setId) {
+  const shouldRender = (0, _isRenderableNode.hasRenderableChildren)(element);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!shouldRender) {
+      return undefined;
+    }
+    setId(id);
+    return () => {
+      setId(currentId => currentId === id ? undefined : currentId);
+    };
+  }, [shouldRender, id, setId]);
+  return shouldRender ? element : null;
+}

package/toast/utils/useToastLabelPart.mjs

@@ -0,0 +1,47 @@
+'use client';
+
+import { useId } from '@base-ui/utils/useId';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useToastRootContext } from "../root/ToastRootContext.mjs";
+import { hasRenderableChildren } from "./isRenderableNode.mjs";
+
+/**
+ * Shared logic for `Toast.Title` and `Toast.Description`, which only differ by the rendered tag,
+ * the fallback content, and which id setter they register with. Resolves the content and returns
+ * the pieces each part passes to `useRenderElement` and `useToastLabelElement`.
+ */
+export function useToastLabelPart(idProp, childrenProp, part) {
+  const {
+    toast,
+    setTitleId,
+    setDescriptionId
+  } = useToastRootContext();
+  const setId = part === 'title' ? setTitleId : setDescriptionId;
+  const children = childrenProp ?? (part === 'title' ? toast.title : toast.description);
+  const id = useId(idProp);
+  return {
+    id,
+    children,
+    type: toast.type,
+    setId
+  };
+}
+
+/**
+ * Mounts the evaluated label element only when it carries renderable content (so a `render` prop's
+ * own children count, while a childless styling-only `render` stays conditional), registering the
+ * generated id with the root while the part renders.
+ */
+export function useToastLabelElement(element, id, setId) {
+  const shouldRender = hasRenderableChildren(element);
+  useIsoLayoutEffect(() => {
+    if (!shouldRender) {
+      return undefined;
+    }
+    setId(id);
+    return () => {
+      setId(currentId => currentId === id ? undefined : currentId);
+    };
+  }, [shouldRender, id, setId]);
+  return shouldRender ? element : null;
+}

package/toast/viewport/ToastViewport.js

@@ -17,7 +17,6 @@ var _FocusGuard = require("../../utils/FocusGuard");
 var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _focusVisible = require("../utils/focusVisible");
-var _ToastViewportCssVars = require("./ToastViewportCssVars");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A container viewport for toasts.
@@ -43,44 +42,37 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
   const focused = store.useState('focused');
   const expanded = store.useState('expanded');
   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.
+  const frontmostHeight = toasts[0]?.height;
+  const hasTransitioningToasts = toasts.some(toast => toast.transitionStatus === 'ending');
+  const highPriorityToasts = toasts.filter(toast => toast.priority === 'high');
   React.useEffect(() => {
+    // `store.state.viewport` isn't available on the first render, since the portal node hasn't yet
+    // been created. Depending on `isEmpty` ensures the listeners are attached once toasts exist and
+    // the viewport ref is available.
     const viewport = store.state.viewport;
-    if (!viewport) {
+    if (!viewport || isEmpty) {
       return undefined;
     }
+    const win = (0, _owner.ownerWindow)(viewport);
+    const doc = (0, _owner.ownerDocument)(viewport);
+
+    // Listen globally for F6 so we can force-focus the viewport.
     function handleGlobalKeyDown(event) {
-      if (isEmpty) {
-        return;
-      }
       if (event.key === 'F6' && (0, _utils.getTarget)(event) !== viewport) {
         event.preventDefault();
-        store.setPrevFocusElement((0, _utils.activeElement)((0, _owner.ownerDocument)(viewport)));
+        store.set('prevFocusElement', (0, _utils.activeElement)(doc));
         viewport?.focus({
           preventScroll: true
         });
         store.pauseTimers();
-        store.setFocused(true);
+        store.set('focused', true);
       }
     }
-    const win = (0, _owner.ownerWindow)(viewport);
-    return (0, _addEventListener.addEventListener)(win, 'keydown', handleGlobalKeyDown);
-  }, [store, isEmpty]);
-  React.useEffect(() => {
-    const viewport = store.state.viewport;
-    if (!viewport || isEmpty) {
-      return undefined;
-    }
-    const win = (0, _owner.ownerWindow)(viewport);
     function handleWindowBlur(event) {
       if ((0, _utils.getTarget)(event) !== win) {
         return;
       }
-      store.setIsWindowFocused(false);
+      store.set('isWindowFocused', false);
       store.pauseTimers();
     }
     function handleWindowFocus(event) {
@@ -94,39 +86,18 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
       }
 
       // Wait for the `handleFocus` event to fire.
-      windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
+      windowFocusTimeout.start(0, () => store.set('isWindowFocused', true));
     }
-    return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(win, 'blur', handleWindowBlur, true), (0, _addEventListener.addEventListener)(win, 'focus', handleWindowFocus, true));
-  }, [store, windowFocusTimeout,
-  // `store.state.viewport` isn't available on the first render,
-  // since the portal node hasn't yet been created.
-  // By adding this dependency, we ensure the window listeners
-  // are added when toasts have been created, once the ref is available.
-  isEmpty]);
-  React.useEffect(() => {
-    const viewport = store.state.viewport;
-    if (!viewport || isEmpty) {
-      return undefined;
-    }
-    const doc = (0, _owner.ownerDocument)(viewport);
-    return (0, _addEventListener.addEventListener)(doc, 'pointerdown', store.handleDocumentPointerDown, true);
-  }, [isEmpty, store]);
+    return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(win, 'keydown', handleGlobalKeyDown), (0, _addEventListener.addEventListener)(win, 'blur', handleWindowBlur, true), (0, _addEventListener.addEventListener)(win, 'focus', handleWindowFocus, true), (0, _addEventListener.addEventListener)(doc, 'pointerdown', store.handleDocumentPointerDown, true));
+  }, [store, windowFocusTimeout, isEmpty]);
   function handleFocusGuard(event) {
-    const viewport = store.state.viewport;
-    if (!viewport) {
-      return;
-    }
     handlingFocusGuardRef.current = true;
 
     // If we're coming off the container, move to the first toast that can hold
     // focus, skipping toasts that are animating out or inert because they're limited.
-    if (event.relatedTarget === viewport) {
-      const firstFocusableToast = toasts.find(toast => toast.transitionStatus !== 'ending' && !toast.limited);
-      if (firstFocusableToast) {
-        firstFocusableToast.ref?.current?.focus();
-      } else {
-        store.restoreFocusToPrevElement();
-      }
+    const firstFocusableToast = event.relatedTarget === store.state.viewport ? toasts.find(toast => toast.transitionStatus !== 'ending' && !toast.limited) : undefined;
+    if (firstFocusableToast) {
+      firstFocusableToast.ref?.current?.focus();
     } else {
       store.restoreFocusToPrevElement();
     }
@@ -134,9 +105,11 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
   function handleKeyDown(event) {
     if (event.key === 'Tab' && event.shiftKey && (0, _utils.getTarget)(event.nativeEvent) === store.state.viewport) {
       event.preventDefault();
+      // Restoring focus blurs the viewport, and `handleBlur` resumes the timers
+      // from there. Resuming here as well would also fire when the previously
+      // focused element lives inside the viewport, letting toasts dismiss out
+      // from under the keyboard.
       store.restoreFocusToPrevElement();
-      // Shift+Tab is explicit keyboard navigation out of the viewport.
-      store.resumeTimers();
     }
   }
   function flushMouseLeave() {
@@ -151,13 +124,13 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     if (store.state.isWindowFocused) {
       store.resumeTimers();
     }
-    store.setHovering(false);
+    store.set('hovering', false);
     markedReadyForMouseLeaveRef.current = false;
   }
   React.useEffect(flushMouseLeave, [hasTransitioningToasts, store]);
   function handleMouseEnter() {
     store.pauseTimers();
-    store.setHovering(true);
+    store.set('hovering', true);
     markedReadyForMouseLeaveRef.current = false;
   }
   function resumeTimersIfWindowFocused() {
@@ -166,15 +139,10 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     }
   }
   function handleMouseLeave() {
-    const hasEndingToasts = store.state.toasts.some(toast => toast.transitionStatus === 'ending');
-    if (hasEndingToasts || touchActiveRef.current) {
-      // When swiping to dismiss, wait until the transitions have settled
-      // or the touch interaction ends to avoid collapsing mid-gesture.
-      markedReadyForMouseLeaveRef.current = true;
-    } else {
-      resumeTimersIfWindowFocused();
-      store.setHovering(false);
-    }
+    // Defer to `flushMouseLeave`: while toasts are transitioning out or a touch gesture is active it
+    // records the intent and collapses later; otherwise it collapses immediately.
+    markedReadyForMouseLeaveRef.current = true;
+    flushMouseLeave();
   }
   function handlePointerDown(event) {
     if (event.pointerType === 'touch') {
@@ -201,7 +169,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     // This prevents the viewport from staying expanded when clicking inside without
     // keyboard navigation.
     if ((0, _focusVisible.isFocusVisible)((0, _utils.activeElement)((0, _owner.ownerDocument)(store.state.viewport)))) {
-      store.setFocused(true);
+      store.set('focused', true);
       store.pauseTimers();
     }
   }
@@ -209,7 +177,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     if (!focused || (0, _utils.contains)(store.state.viewport, event.relatedTarget)) {
       return;
     }
-    store.setFocused(false);
+    store.set('focused', false);
     resumeTimersIfWindowFocused();
   }
   const defaultProps = {
@@ -228,32 +196,28 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     onClick: handleFocus,
     onPointerDown: handlePointerDown,
     onPointerUp: handlePointerEnd,
-    onPointerCancel: handlePointerEnd
+    onPointerCancel: handlePointerEnd,
+    style: {
+      ['--toast-frontmost-height']: frontmostHeight ? `${frontmostHeight}px` : undefined
+    }
   };
   const state = {
     expanded
   };
+  const focusGuard = !isEmpty && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+    onFocus: handleFocusGuard
+  });
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, store.setViewport],
     state,
-    props: [defaultProps, {
-      style: {
-        [_ToastViewportCssVars.ToastViewportCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined
-      }
-    }, elementProps, {
+    props: [defaultProps, elementProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [!isEmpty && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
-          onFocus: handleFocusGuard
-        }), children, !isEmpty && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
-          onFocus: handleFocusGuard
-        })]
+        children: [focusGuard, children, focusGuard]
       })
     }]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [!isEmpty && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
-      onFocus: handleFocusGuard
-    }), element, !focused && highPriorityToasts.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [focusGuard, element, !focused && highPriorityToasts.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: _visuallyHidden.visuallyHidden,
       children: highPriorityToasts.map(toast => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         role: "alert",