@base-ui/react 1.2.0 → 1.4.0

package/esm/toast/provider/ToastProvider.d.ts

@@ -6,6 +6,7 @@ import type { ToastManager } from "../createToastManager.js";
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
 export declare const ToastProvider: React.FC<ToastProvider.Props>;
+export interface ToastProviderState {}
 export interface ToastProviderProps {
   children?: React.ReactNode;
   /**
@@ -26,5 +27,6 @@ export interface ToastProviderProps {
   toastManager?: ToastManager | undefined;
 }
 export declare namespace ToastProvider {
+  type State = ToastProviderState;
   type Props = ToastProviderProps;
 }

package/esm/toast/provider/ToastProvider.js

@@ -43,7 +43,7 @@ export const ToastProvider = function ToastProvider(props) {
         store.promiseToast(options.promise, options);
       } else if (action === 'update' && id) {
         store.updateToast(id, options);
-      } else if (action === 'close' && id) {
+      } else if (action === 'close') {
         store.closeToast(id);
       } else {
         store.addToast(options);

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

@@ -11,19 +11,32 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 export declare const ToastRoot: React.ForwardRefExoticComponent<Omit<ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type ToastRootToastObject<Data extends object = any> = ToastObjectType<Data>;
 export interface ToastRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
-  /** Whether the toasts in the viewport are expanded. */
+  /**
+   * Whether the toasts in the viewport are expanded.
+   */
   expanded: boolean;
-  /** Whether the toast was removed due to exceeding the limit. */
+  /**
+   * Whether the toast was removed due to exceeding the limit.
+   */
   limited: boolean;
-  /** The type of the toast. */
+  /**
+   * The type of the toast.
+   */
   type: string | undefined;
-  /** Whether the toast is being swiped. */
+  /**
+   * Whether the toast is being swiped.
+   */
   swiping: boolean;
-  /** The direction the toast is being swiped. */
+  /**
+   * The direction the toast is being swiped.
+   */
   swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
 }
-export interface ToastRootProps extends BaseUIComponentProps<'div', ToastRoot.State> {
+export interface ToastRootProps extends BaseUIComponentProps<'div', ToastRootState> {
   /**
    * The toast to render.
    */
@@ -32,7 +45,7 @@ export interface ToastRootProps extends BaseUIComponentProps<'div', ToastRoot.St
    * Direction(s) in which the toast can be swiped to dismiss.
    * @default ['down', 'right']
    */
-  swipeDirection?: ('up' | 'down' | 'left' | 'right' | ('up' | 'down' | 'left' | 'right')[]) | undefined;
+  swipeDirection?: 'up' | 'down' | 'left' | 'right' | ('up' | 'down' | 'left' | 'right')[] | undefined;
 }
 export declare namespace ToastRoot {
   type ToastObject<Data extends object = any> = ToastRootToastObject<Data>;

package/esm/toast/root/ToastRoot.js

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { ownerDocument } from '@base-ui/utils/owner';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { ownerDocument, ownerWindow } 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';
@@ -13,6 +14,7 @@ import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { ToastRootCssVars } from "./ToastRootCssVars.js";
+import { BASE_UI_SWIPE_IGNORE_SELECTOR, LEGACY_SWIPE_IGNORE_SELECTOR } from "../../utils/constants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...transitionStatusMapping,
@@ -26,6 +28,7 @@ const SWIPE_THRESHOLD = 40;
 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':
@@ -41,7 +44,7 @@ function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = ownerWindow(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -80,6 +83,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     render,
     className,
     swipeDirection = ['down', 'right'],
+    style,
     ...elementProps
   } = componentProps;
   const isAnchored = toast.positionerProps?.anchor !== undefined;
@@ -204,7 +208,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       store.pauseTimers();
     }
     const target = getTarget(event.nativeEvent);
-    const isInteractiveElement = target ? target.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]') : false;
+    const isInteractiveElement = target ? target.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`) : false;
     if (isInteractiveElement) {
       return;
     }
@@ -409,6 +413,19 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       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)))) {
@@ -426,16 +443,13 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       return undefined;
     }
     function preventDefaultTouchStart(event) {
-      if (contains(element, event.target)) {
+      if (contains(element, getTarget(event))) {
         event.preventDefault();
       }
     }
-    element.addEventListener('touchmove', preventDefaultTouchStart, {
+    return addEventListener(element, 'touchmove', preventDefaultTouchStart, {
       passive: false
     });
-    return () => {
-      element.removeEventListener('touchmove', preventDefaultTouchStart);
-    };
   }, [swipeEnabled]);
   function getDragStyles() {
     if (!isSwiping && dragOffset.x === initialTransform.x && dragOffset.y === initialTransform.y && !dragDismissed) {
@@ -466,6 +480,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     onPointerDown: swipeEnabled ? handlePointerDown : undefined,
     onPointerMove: swipeEnabled ? handlePointerMove : undefined,
     onPointerUp: swipeEnabled ? handlePointerUp : undefined,
+    onPointerCancel: swipeEnabled ? handlePointerCancel : undefined,
     onKeyDown: handleKeyDown,
     inert: inertValue(toast.limited),
     style: {

package/esm/toast/root/ToastRootDataAttributes.js

@@ -1,4 +1,5 @@
-export let ToastRootDataAttributes = /*#__PURE__*/function (ToastRootDataAttributes) {
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let ToastRootDataAttributes = function (ToastRootDataAttributes) {
   /**
    * Present when the toast is expanded in the viewport.
    * @type {boolean}
@@ -27,10 +28,10 @@ export let ToastRootDataAttributes = /*#__PURE__*/function (ToastRootDataAttribu
   /**
    * Present when the toast is animating in.
    */
-  ToastRootDataAttributes["startingStyle"] = "data-starting-style";
+  ToastRootDataAttributes[ToastRootDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the toast is animating out.
    */
-  ToastRootDataAttributes["endingStyle"] = "data-ending-style";
+  ToastRootDataAttributes[ToastRootDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return ToastRootDataAttributes;
 }({});

package/esm/toast/store.d.ts

@@ -1,6 +1,13 @@
 import { ReactStore } from '@base-ui/utils/store';
 import { ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject } from "./useToastManager.js";
 type ToastInternalUpdateOptions<Data extends object> = Partial<Omit<ToastObject<Data>, 'id'>>;
+type UpdateToastBehavior = {
+  resetTimer?: boolean | undefined;
+  markUpdated?: boolean | undefined;
+};
+type RemoveToastBehavior = {
+  skipOnRemove?: boolean | undefined;
+};
 export type State = {
   toasts: ToastObject<any>[];
   hovering: boolean;
@@ -34,11 +41,11 @@ export declare class ToastStore extends ReactStore<State, {}, typeof selectors>
   setPrevFocusElement(prevFocusElement: HTMLElement | null): void;
   setViewport: (viewport: HTMLElement | null) => void;
   disposeEffect: () => () => void;
-  removeToast(toastId: string): void;
+  removeToast(toastId: string, behavior?: RemoveToastBehavior): void;
   addToast: <Data extends object>(toast: ToastManagerAddOptions<Data>) => string;
   updateToast: <Data extends object>(id: string, updates: ToastManagerUpdateOptions<Data>) => void;
-  updateToastInternal: <Data extends object>(id: string, updates: ToastInternalUpdateOptions<Data>) => void;
-  closeToast: (toastId: string) => void;
+  updateToastInternal: <Data extends object>(id: string, updates: ToastInternalUpdateOptions<Data>, behavior?: UpdateToastBehavior) => void;
+  closeToast: (toastId?: string) => void;
   promiseToast: <Value, Data extends object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
   pauseTimers(): void;
   resumeTimers(): void;

package/esm/toast/store.js

@@ -66,30 +66,53 @@ export class ToastStore extends ReactStore {
       this.timers.clear();
     };
   };
-  removeToast(toastId) {
+  removeToast(toastId, behavior = {}) {
     const index = selectors.toastIndex(this.state, toastId);
     if (index === -1) {
       return;
     }
     const toast = this.state.toasts[index];
-    toast?.onRemove?.();
+    if (!behavior.skipOnRemove) {
+      toast?.onRemove?.();
+    }
     const newToasts = [...this.state.toasts];
     newToasts.splice(index, 1);
     this.setToasts(newToasts);
   }
   addToast = toast => {
     const {
-      toasts,
       timeout,
       limit
     } = this.state;
     const id = toast.id || generateId('toast');
+    if (toast.id) {
+      const existingToast = selectors.toast(this.state, toast.id);
+      if (existingToast) {
+        if (existingToast.transitionStatus === 'ending') {
+          this.removeToast(toast.id, {
+            skipOnRemove: true
+          });
+        } else {
+          const {
+            id: ignoredId,
+            transitionStatus: ignoredTransitionStatus,
+            ...updates
+          } = toast;
+          this.updateToastInternal(toast.id, updates, {
+            resetTimer: true,
+            markUpdated: true
+          });
+          return toast.id;
+        }
+      }
+    }
     const toastToAdd = {
       ...toast,
       id,
+      updateKey: 0,
       transitionStatus: 'starting'
     };
-    const updatedToasts = [toastToAdd, ...toasts];
+    const updatedToasts = [toastToAdd, ...this.state.toasts];
     const activeToasts = updatedToasts.filter(t => t.transitionStatus !== 'ending');
 
     // Mark oldest toasts for removal when over limit
@@ -123,9 +146,11 @@ export class ToastStore extends ReactStore {
     return id;
   };
   updateToast = (id, updates) => {
-    this.updateToastInternal(id, updates);
+    this.updateToastInternal(id, updates, {
+      markUpdated: true
+    });
   };
-  updateToastInternal = (id, updates) => {
+  updateToastInternal = (id, updates, behavior = {}) => {
     const {
       timeout,
       toasts
@@ -143,12 +168,12 @@ export class ToastStore extends ReactStore {
     }
     const nextToast = {
       ...prevToast,
-      ...updates
+      ...updates,
+      ...(behavior.markUpdated && {
+        updateKey: (prevToast.updateKey ?? 0) + 1
+      })
     };
-    this.setToasts(toasts.map(toast => toast.id === id ? {
-      ...toast,
-      ...updates
-    } : toast));
+    this.setToasts(toasts.map(toast => toast.id === id ? nextToast : toast));
     const nextTimeout = nextToast.timeout ?? timeout;
     const prevTimeout = prevToast?.timeout ?? timeout;
     const timeoutUpdated = Object.hasOwn(updates, 'timeout');
@@ -164,7 +189,7 @@ export class ToastStore extends ReactStore {
     }
 
     // Schedule or reschedule timer if needed
-    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading)) {
+    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || behavior.resetTimer)) {
       const timer = this.timers.get(id);
       if (timer) {
         timer.timeout?.clear();
@@ -177,15 +202,33 @@ export class ToastStore extends ReactStore {
     }
   };
   closeToast = toastId => {
-    const toast = selectors.toast(this.state, toastId);
-    toast?.onClose?.();
+    const closeAll = toastId === undefined;
     const {
       limit,
       toasts
     } = this.state;
+    let toastsToClose;
+    if (closeAll) {
+      toastsToClose = toasts;
+      this.timers.forEach(timer => {
+        timer.timeout?.clear();
+      });
+      this.timers.clear();
+    } else {
+      const toast = selectors.toast(this.state, toastId);
+      if (!toast) {
+        return;
+      }
+      toastsToClose = [toast];
+      const timer = this.timers.get(toastId);
+      if (timer?.timeout) {
+        timer.timeout.clear();
+        this.timers.delete(toastId);
+      }
+    }
     let activeIndex = 0;
     const newToasts = toasts.map(item => {
-      if (item.id === toastId) {
+      if (closeAll || item.id === toastId) {
         return {
           ...item,
           transitionStatus: 'ending',
@@ -202,13 +245,20 @@ export class ToastStore extends ReactStore {
         limited: isLimited
       } : item;
     });
-    const timer = this.timers.get(toastId);
-    if (timer && timer.timeout) {
-      timer.timeout.clear();
-      this.timers.delete(toastId);
+    const updates = {
+      toasts: newToasts
+    };
+    if (closeAll || toasts.length === 1) {
+      updates.hovering = false;
+      updates.focused = false;
     }
+    this.update(updates);
+    toastsToClose.forEach(toast => {
+      if (toast.transitionStatus !== 'ending') {
+        toast.onClose?.();
+      }
+    });
     this.handleFocusManagement(toastId);
-    this.setToasts(newToasts);
   };
   promiseToast = (promiseValue, options) => {
     // Create a loading toast (which does not auto-dismiss).
@@ -321,6 +371,10 @@ export class ToastStore extends ReactStore {
     if (!this.state.viewport || !contains(this.state.viewport, activeEl) || !isFocusVisible(activeEl)) {
       return;
     }
+    if (toastId === undefined) {
+      this.restoreFocusToPrevElement();
+      return;
+    }
     const toasts = selectors.toasts(this.state);
     const currentIndex = selectors.toastIndex(this.state, toastId);
     let nextToast = null;

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

@@ -13,7 +13,7 @@ export interface ToastTitleState {
    */
   type: string | undefined;
 }
-export interface ToastTitleProps extends BaseUIComponentProps<'h2', ToastTitle.State> {}
+export interface ToastTitleProps extends BaseUIComponentProps<'h2', ToastTitleState> {}
 export declare namespace ToastTitle {
   type State = ToastTitleState;
   type Props = ToastTitleProps;

package/esm/toast/title/ToastTitle.js

@@ -16,6 +16,7 @@ export const ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(comp
   const {
     render,
     className,
+    style,
     id: idProp,
     children: childrenProp,
     ...elementProps

package/esm/toast/useToastManager.d.ts

@@ -38,11 +38,15 @@ export interface ToastObject<Data extends object> {
    * - `high` - The toast will be announced urgently.
    * @default 'low'
    */
-  priority?: ('low' | 'high') | undefined;
+  priority?: 'low' | 'high' | undefined;
   /**
    * The transition status of the toast.
    */
   transitionStatus?: 'starting' | 'ending' | undefined;
+  /**
+   * A counter that increments whenever the toast is updated or upserted.
+   */
+  updateKey?: number | undefined;
   /**
    * Determines if the toast was closed due to the limit being reached.
    */
@@ -76,19 +80,23 @@ export interface ToastManagerPositionerProps extends Omit<ToastPositionerProps,
   /**
    * An element to position the toast against.
    */
-  anchor?: (Element | null) | undefined;
+  anchor?: Element | null | undefined;
 }
 export interface UseToastManagerReturnValue<Data extends object = any> {
   toasts: ToastObject<Data>[];
   add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
-  close: (toastId: string) => void;
+  close: (toastId?: string) => void;
   update: <T extends Data = Data>(toastId: string, options: ToastManagerUpdateOptions<T>) => void;
   promise: <Value, T extends Data = Data>(promise: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 }
-export interface ToastManagerAddOptions<Data extends object> extends Omit<ToastObject<Data>, 'id' | 'animation' | 'height' | 'ref' | 'limited'> {
+export interface ToastManagerAddOptions<Data extends object> extends Omit<ToastObject<Data>, 'id' | 'animation' | 'height' | 'ref' | 'limited' | 'updateKey'> {
+  /**
+   * The unique identifier for the toast. Adding a toast with an existing ID
+   * updates it in place and refreshes its auto-dismiss timer.
+   */
   id?: string | undefined;
 }
-export interface ToastManagerUpdateOptions<Data extends object> extends Partial<Omit<ToastObject<Data>, 'id' | 'ref' | 'height' | 'transitionStatus' | 'limited'>> {}
+export interface ToastManagerUpdateOptions<Data extends object> extends Partial<Omit<ToastObject<Data>, 'id' | 'ref' | 'height' | 'transitionStatus' | 'limited' | 'updateKey'>> {}
 export interface ToastManagerPromiseOptions<Value, Data extends object> {
   loading: string | ToastManagerUpdateOptions<Data>;
   success: string | ToastManagerUpdateOptions<Data> | ((result: Value) => string | ToastManagerUpdateOptions<Data>);

package/esm/toast/viewport/ToastViewport.d.ts

@@ -13,7 +13,7 @@ export interface ToastViewportState {
    */
   expanded: boolean;
 }
-export interface ToastViewportProps extends BaseUIComponentProps<'div', ToastViewport.State> {}
+export interface ToastViewportProps extends BaseUIComponentProps<'div', ToastViewportState> {}
 export declare namespace ToastViewport {
   type State = ToastViewportState;
   type Props = ToastViewportProps;

package/esm/toast/viewport/ToastViewport.js

@@ -1,6 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import { useTimeout } from '@base-ui/utils/useTimeout';
@@ -22,6 +24,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -29,6 +32,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
   const windowFocusTimeout = useTimeout();
   const handlingFocusGuardRef = React.useRef(false);
   const markedReadyForMouseLeaveRef = React.useRef(false);
+  const touchActiveRef = React.useRef(false);
   const isEmpty = store.useState('isEmpty');
   const toasts = store.useState('toasts');
   const focused = store.useState('focused');
@@ -47,7 +51,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       if (isEmpty) {
         return;
       }
-      if (event.key === 'F6' && event.target !== viewport) {
+      if (event.key === 'F6' && getTarget(event) !== viewport) {
         event.preventDefault();
         store.setPrevFocusElement(activeElement(ownerDocument(viewport)));
         viewport?.focus({
@@ -58,10 +62,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       }
     }
     const win = ownerWindow(viewport);
-    win.addEventListener('keydown', handleGlobalKeyDown);
-    return () => {
-      win.removeEventListener('keydown', handleGlobalKeyDown);
-    };
+    return addEventListener(win, 'keydown', handleGlobalKeyDown);
   }, [store, isEmpty]);
   React.useEffect(() => {
     const viewport = store.state.viewport;
@@ -70,31 +71,26 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     }
     const win = ownerWindow(viewport);
     function handleWindowBlur(event) {
-      if (event.target !== win) {
+      if (getTarget(event) !== win) {
         return;
       }
       store.setIsWindowFocused(false);
       store.pauseTimers();
     }
     function handleWindowFocus(event) {
-      if (event.relatedTarget || event.target === win) {
+      if (event.relatedTarget) {
         return;
       }
       const target = getTarget(event);
       const activeEl = activeElement(ownerDocument(viewport));
-      if (!contains(viewport, target) || !isFocusVisible(activeEl)) {
+      if (target === win || !contains(viewport, target) || !isFocusVisible(activeEl)) {
         store.resumeTimers();
       }
 
       // Wait for the `handleFocus` event to fire.
       windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
     }
-    win.addEventListener('blur', handleWindowBlur, true);
-    win.addEventListener('focus', handleWindowFocus, true);
-    return () => {
-      win.removeEventListener('blur', handleWindowBlur, true);
-      win.removeEventListener('focus', handleWindowFocus, true);
-    };
+    return mergeCleanups(addEventListener(win, 'blur', handleWindowBlur, true), 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.
@@ -107,10 +103,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       return undefined;
     }
     const doc = ownerDocument(viewport);
-    doc.addEventListener('pointerdown', store.handleDocumentPointerDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', store.handleDocumentPointerDown, true);
-    };
+    return addEventListener(doc, 'pointerdown', store.handleDocumentPointerDown, true);
   }, [isEmpty, store]);
   function handleFocusGuard(event) {
     const viewport = store.state.viewport;
@@ -127,14 +120,15 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     }
   }
   function handleKeyDown(event) {
-    if (event.key === 'Tab' && event.shiftKey && event.target === store.state.viewport) {
+    if (event.key === 'Tab' && event.shiftKey && getTarget(event.nativeEvent) === store.state.viewport) {
       event.preventDefault();
       store.restoreFocusToPrevElement();
       store.resumeTimers();
     }
   }
-  React.useEffect(() => {
-    if (!store.state.isWindowFocused || hasTransitioningToasts || !markedReadyForMouseLeaveRef.current) {
+  function flushMouseLeave() {
+    const hasEndingToasts = store.state.toasts.some(toast => toast.transitionStatus === 'ending');
+    if (!store.state.isWindowFocused || hasEndingToasts || touchActiveRef.current || !markedReadyForMouseLeaveRef.current) {
       return;
     }
 
@@ -144,22 +138,35 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     store.resumeTimers();
     store.setHovering(false);
     markedReadyForMouseLeaveRef.current = false;
-  }, [hasTransitioningToasts, store]);
+  }
+  React.useEffect(flushMouseLeave, [hasTransitioningToasts, store]);
   function handleMouseEnter() {
     store.pauseTimers();
     store.setHovering(true);
     markedReadyForMouseLeaveRef.current = false;
   }
   function handleMouseLeave() {
-    if (hasTransitioningToasts) {
+    if (hasTransitioningToasts || touchActiveRef.current) {
       // When swiping to dismiss, wait until the transitions have settled
-      // to avoid the viewport collapsing while the user is interacting.
+      // or the touch interaction ends to avoid collapsing mid-gesture.
       markedReadyForMouseLeaveRef.current = true;
     } else {
       store.resumeTimers();
       store.setHovering(false);
     }
   }
+  function handlePointerDown(event) {
+    if (event.pointerType === 'touch') {
+      touchActiveRef.current = true;
+    }
+  }
+  function handlePointerEnd(event) {
+    if (event.pointerType !== 'touch') {
+      return;
+    }
+    touchActiveRef.current = false;
+    flushMouseLeave();
+  }
   function handleFocus() {
     if (handlingFocusGuardRef.current) {
       handlingFocusGuardRef.current = false;
@@ -172,7 +179,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     // Only set focused when the active element is focus-visible.
     // This prevents the viewport from staying expanded when clicking inside without
     // keyboard navigation.
-    if (isFocusVisible(ownerDocument(store.state.viewport).activeElement)) {
+    if (isFocusVisible(activeElement(ownerDocument(store.state.viewport)))) {
       store.setFocused(true);
       store.pauseTimers();
     }
@@ -197,7 +204,10 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     onFocus: handleFocus,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
-    onClick: handleFocus
+    onClick: handleFocus,
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerEnd,
+    onPointerCancel: handlePointerEnd
   };
   const state = {
     expanded

package/esm/toggle/Toggle.d.ts

@@ -21,7 +21,7 @@ export interface ToggleState {
    */
   disabled: boolean;
 }
-export interface ToggleProps<Value extends string> extends NativeButtonProps, BaseUIComponentProps<'button', Toggle.State> {
+export interface ToggleProps<Value extends string> extends NativeButtonProps, BaseUIComponentProps<'button', ToggleState> {
   /**
    * Whether the toggle button is currently pressed.
    * This is the controlled counterpart of `defaultPressed`.

package/esm/toggle/Toggle.js

@@ -34,6 +34,7 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     // cannot change button type
     value: valueProp,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
 
@@ -98,6 +99,7 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: refs,
       props: props