@base-ui/react 1.1.0 → 1.2.0

package/toast/close/ToastClose.js

@@ -25,13 +25,11 @@ const ToastClose = exports.ToastClose = /*#__PURE__*/React.forwardRef(function T
     nativeButton = true,
     ...elementProps
   } = componentProps;
-  const {
-    close,
-    expanded
-  } = (0, _ToastProviderContext.useToastContext)();
+  const store = (0, _ToastProviderContext.useToastProviderContext)();
   const {
     toast
   } = (0, _ToastRootContext.useToastRootContext)();
+  const expanded = store.useState('expanded');
   const [hasFocus, setHasFocus] = React.useState(false);
   const {
     getButtonProps,
@@ -40,16 +38,16 @@ const ToastClose = exports.ToastClose = /*#__PURE__*/React.forwardRef(function T
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
       'aria-hidden': !expanded && !hasFocus,
       onClick() {
-        close(toast.id);
+        store.closeToast(toast.id);
       },
       onFocus() {
         setHasFocus(true);

package/toast/content/ToastContent.js

@@ -51,10 +51,10 @@ const ToastContent = exports.ToastContent = /*#__PURE__*/React.forwardRef(functi
     };
   }, [recalculateHeight]);
   const behind = visibleIndex > 0;
-  const state = React.useMemo(() => ({
+  const state = {
     expanded,
     behind
-  }), [expanded, behind]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, contentRef],
     state,

package/toast/createToastManager.d.ts

@@ -2,13 +2,13 @@ import type { ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUp
 /**
  * Creates a new toast manager.
  */
-export declare function createToastManager(): ToastManager;
-export interface ToastManager {
+export declare function createToastManager<Data extends object = any>(): ToastManager<Data>;
+export interface ToastManager<Data extends object = any> {
   ' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
-  add: <Data extends object>(options: ToastManagerAddOptions<Data>) => string;
+  add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
   close: (id: string) => void;
-  update: <Data extends object>(id: string, updates: ToastManagerUpdateOptions<Data>) => void;
-  promise: <Value, Data extends object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
+  update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
+  promise: <Value, T extends Data = Data>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 }
 export interface ToastManagerEvent {
   action: 'add' | 'close' | 'update' | 'promise';

package/toast/createToastManager.js

@@ -9,7 +9,7 @@ var _generateId = require("@base-ui/utils/generateId");
  * Creates a new toast manager.
  */
 function createToastManager() {
-  const listeners = [];
+  const listeners = new Set();
   function emit(data) {
     listeners.forEach(listener => listener(data));
   }
@@ -17,12 +17,9 @@ function createToastManager() {
     // This should be private aside from ToastProvider needing to access it.
     // https://x.com/drosenwasser/status/1816947740032872664
     ' subscribe': function subscribe(listener) {
-      listeners.push(listener);
+      listeners.add(listener);
       return () => {
-        const index = listeners.indexOf(listener);
-        if (index !== -1) {
-          listeners.splice(index, 1);
-        }
+        listeners.delete(listener);
       };
     },
     add(options) {

package/toast/description/ToastDescription.js

@@ -27,14 +27,12 @@ const ToastDescription = exports.ToastDescription = /*#__PURE__*/React.forwardRe
     ...elementProps
   } = componentProps;
   const {
-    toast
+    toast,
+    setDescriptionId
   } = (0, _ToastRootContext.useToastRootContext)();
   const children = childrenProp ?? toast.description;
   const shouldRender = Boolean(children);
   const id = (0, _useId.useId)(idProp);
-  const {
-    setDescriptionId
-  } = (0, _ToastRootContext.useToastRootContext)();
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!shouldRender) {
       return undefined;
@@ -44,9 +42,9 @@ const ToastDescription = exports.ToastDescription = /*#__PURE__*/React.forwardRe
       setDescriptionId(undefined);
     };
   }, [shouldRender, id, setDescriptionId]);
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('p', componentProps, {
     ref: forwardedRef,
     state,

package/toast/positioner/ToastPositioner.d.ts

@@ -18,13 +18,13 @@ export interface ToastPositionerProps extends BaseUIComponentProps<'div', ToastP
   /**
    * An element to position the toast against.
    */
-  anchor?: Element | null;
+  anchor?: (Element | null) | undefined;
   /**
    * Which side of the anchor element to align the toast against.
    * May automatically change to avoid collisions.
    * @default 'top'
    */
-  side?: Side;
+  side?: Side | undefined;
   /**
    * The toast object associated with the positioner.
    */

package/toast/positioner/ToastPositioner.js

@@ -12,6 +12,7 @@ var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _constants = require("../../utils/constants");
+var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _ToastPositionerContext = require("./ToastPositionerContext");
 var _floatingUiReact = require("../../floating-ui-react");
 var _noop = require("../../utils/noop");
@@ -29,9 +30,7 @@ const ToastPositioner = exports.ToastPositioner = /*#__PURE__*/React.forwardRef(
     toast,
     ...props
   } = componentProps;
-  const {
-    toasts
-  } = (0, _ToastProviderContext.useToastContext)();
+  const store = (0, _ToastProviderContext.useToastProviderContext)();
   const positionerProps = toast.positionerProps ?? _constants.EMPTY_OBJECT;
   const {
     render,
@@ -51,8 +50,8 @@ const ToastPositioner = exports.ToastPositioner = /*#__PURE__*/React.forwardRef(
     ...elementProps
   } = props;
   const [positionerElement, setPositionerElement] = React.useState(null);
-  const domIndex = React.useMemo(() => toasts.indexOf(toast), [toast, toasts]);
-  const visibleIndex = React.useMemo(() => toasts.filter(t => t.transitionStatus !== 'ending').indexOf(toast), [toast, toasts]);
+  const domIndex = store.useState('toastIndex', toast.id);
+  const visibleIndex = store.useState('toastVisibleIndex', toast.id);
   const anchor = (0, _dom.isElement)(anchorProp) ? anchorProp : null;
   const floatingRootContext = (0, _floatingUiReact.useFloatingRootContext)({
     open: true,
@@ -103,7 +102,7 @@ const ToastPositioner = exports.ToastPositioner = /*#__PURE__*/React.forwardRef(
   }), [state, positioning.arrowRef, positioning.arrowStyles, positioning.arrowUncentered]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
-    props: [defaultProps, elementProps],
+    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(toast.transitionStatus), elementProps],
     ref: [forwardedRef, setPositionerElement],
     stateAttributesMapping: _popupStateMapping.popupStateMapping
   });

package/toast/positioner/ToastPositionerDataAttributes.js

@@ -14,11 +14,11 @@ let ToastPositionerDataAttributes = exports.ToastPositionerDataAttributes = func
    * Indicates which side the toast is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ToastPositionerDataAttributes["side"] = "data-side";
+  ToastPositionerDataAttributes[ToastPositionerDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the toast is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ToastPositionerDataAttributes["align"] = "data-align";
+  ToastPositionerDataAttributes[ToastPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   return ToastPositionerDataAttributes;
 }({});

package/toast/provider/ToastProvider.d.ts

@@ -13,17 +13,17 @@ export interface ToastProviderProps {
    * A value of `0` will prevent the toast from being dismissed automatically.
    * @default 5000
    */
-  timeout?: number;
+  timeout?: number | undefined;
   /**
    * The maximum number of toasts that can be displayed at once.
    * When the limit is reached, the oldest toast will be removed to make room for the new one.
    * @default 3
    */
-  limit?: number;
+  limit?: number | undefined;
   /**
    * A global manager for toasts to use outside of a React component.
    */
-  toastManager?: ToastManager;
+  toastManager?: ToastManager | undefined;
 }
 export declare namespace ToastProvider {
   type Props = ToastProviderProps;

package/toast/provider/ToastProvider.js

@@ -7,15 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToastProvider = void 0;
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _owner = require("@base-ui/utils/owner");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _generateId = require("@base-ui/utils/generateId");
-var _useTimeout = require("@base-ui/utils/useTimeout");
-var _utils = require("../../floating-ui-react/utils");
+var _useOnMount = require("@base-ui/utils/useOnMount");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _ToastProviderContext = require("./ToastProviderContext");
-var _focusVisible = require("../utils/focusVisible");
-var _resolvePromiseOptions = require("../utils/resolvePromiseOptions");
+var _store = require("../store");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Provides a context for creating and managing toasts.
@@ -29,255 +24,17 @@ const ToastProvider = exports.ToastProvider = function ToastProvider(props) {
     limit = 3,
     toastManager
   } = props;
-  const [toasts, setToasts] = React.useState([]);
-  const [hovering, setHovering] = React.useState(false);
-  const [focused, setFocused] = React.useState(false);
-  const [prevFocusElement, setPrevFocusElement] = React.useState(null);
-  if (toasts.length === 0) {
-    if (hovering) {
-      setHovering(false);
-    }
-    if (focused) {
-      setFocused(false);
-    }
-  }
-  const expanded = hovering || focused;
-  const timersRef = React.useRef(new Map());
-  const viewportRef = React.useRef(null);
-  const windowFocusedRef = React.useRef(true);
-  const isPausedRef = React.useRef(false);
-  function handleFocusManagement(toastId) {
-    const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(viewportRef.current));
-    if (!viewportRef.current || !(0, _utils.contains)(viewportRef.current, activeEl) || !(0, _focusVisible.isFocusVisible)(activeEl)) {
-      return;
-    }
-    const currentIndex = toasts.findIndex(toast => toast.id === 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) {
-        if (toasts[index].transitionStatus !== 'ending') {
-          nextToast = toasts[index];
-          break;
-        }
-        index -= 1;
-      }
-    }
-    if (nextToast) {
-      nextToast.ref?.current?.focus();
-    } else {
-      prevFocusElement?.focus({
-        preventScroll: true
-      });
-    }
-  }
-  const pauseTimers = (0, _useStableCallback.useStableCallback)(() => {
-    if (isPausedRef.current) {
-      return;
-    }
-    isPausedRef.current = true;
-    timersRef.current.forEach(timer => {
-      if (timer.timeout) {
-        timer.timeout.clear();
-        const elapsed = Date.now() - timer.start;
-        const remaining = timer.delay - elapsed;
-        timer.remaining = remaining > 0 ? remaining : 0;
-      }
-    });
-  });
-  const resumeTimers = (0, _useStableCallback.useStableCallback)(() => {
-    if (!isPausedRef.current) {
-      return;
-    }
-    isPausedRef.current = false;
-    timersRef.current.forEach((timer, id) => {
-      timer.remaining = timer.remaining > 0 ? timer.remaining : timer.delay;
-      timer.timeout ??= _useTimeout.Timeout.create();
-      timer.timeout.start(timer.remaining, () => {
-        timersRef.current.delete(id);
-        timer.callback();
-      });
-      timer.start = Date.now();
-    });
-  });
-  const close = (0, _useStableCallback.useStableCallback)(toastId => {
-    setToasts(prevToasts => {
-      const toastsWithEnding = prevToasts.map(toast => toast.id === toastId ? {
-        ...toast,
-        transitionStatus: 'ending',
-        height: 0
-      } : toast);
-      const activeToasts = toastsWithEnding.filter(t => t.transitionStatus !== 'ending');
-      return toastsWithEnding.map(toast => {
-        if (toast.transitionStatus === 'ending') {
-          return toast;
-        }
-        const isActiveToastLimited = activeToasts.indexOf(toast) >= limit;
-        return {
-          ...toast,
-          limited: isActiveToastLimited
-        };
-      });
-    });
-    const timer = timersRef.current.get(toastId);
-    if (timer && timer.timeout) {
-      timer.timeout.clear();
-      timersRef.current.delete(toastId);
-    }
-    const toast = toasts.find(t => t.id === toastId);
-    toast?.onClose?.();
-    handleFocusManagement(toastId);
-    if (toasts.length === 1) {
-      setHovering(false);
-      setFocused(false);
-    }
-  });
-  const remove = (0, _useStableCallback.useStableCallback)(toastId => {
-    setToasts(prev => prev.filter(toast => toast.id !== toastId));
-    const toast = toasts.find(t => t.id === toastId);
-    toast?.onRemove?.();
-  });
-  const scheduleTimer = (0, _useStableCallback.useStableCallback)((id, delay, callback) => {
-    const start = Date.now();
-    const shouldStartActive = windowFocusedRef.current && !hovering && !focused;
-    const currentTimeout = shouldStartActive ? _useTimeout.Timeout.create() : undefined;
-    currentTimeout?.start(delay, () => {
-      timersRef.current.delete(id);
-      callback();
-    });
-    timersRef.current.set(id, {
-      timeout: currentTimeout,
-      start: shouldStartActive ? start : 0,
-      delay,
-      remaining: delay,
-      callback
-    });
-  });
-  const add = (0, _useStableCallback.useStableCallback)(toast => {
-    const id = toast.id || (0, _generateId.generateId)('toast');
-    const toastToAdd = {
-      ...toast,
-      id,
-      transitionStatus: 'starting'
-    };
-    setToasts(prev => {
-      const updatedToasts = [toastToAdd, ...prev];
-      const activeToasts = updatedToasts.filter(t => t.transitionStatus !== 'ending');
-
-      // Mark oldest toasts for removal when over limit
-      if (activeToasts.length > limit) {
-        const excessCount = activeToasts.length - limit;
-        const oldestActiveToasts = activeToasts.slice(-excessCount);
-        return updatedToasts.map(t => oldestActiveToasts.some(old => old.id === t.id) ? {
-          ...t,
-          limited: true
-        } : {
-          ...t,
-          limited: false
-        });
-      }
-      return updatedToasts.map(t => ({
-        ...t,
-        limited: false
-      }));
-    });
-    const duration = toastToAdd.timeout ?? timeout;
-    if (toastToAdd.type !== 'loading' && duration > 0) {
-      scheduleTimer(id, duration, () => close(id));
-    }
-    if (hovering || focused || !windowFocusedRef.current) {
-      pauseTimers();
-    }
-    return id;
-  });
-  const update = (0, _useStableCallback.useStableCallback)((id, updates) => {
-    const prevToast = toasts.find(toast => toast.id === id) ?? null;
-    const nextToast = prevToast ? {
-      ...prevToast,
-      ...updates
-    } : null;
-
-    // Avoid race conditions if `update()` is called multiple times in a row
-    ReactDOM.flushSync(() => {
-      setToasts(prev => prev.map(toast => toast.id === id ? {
-        ...toast,
-        ...updates
-      } : toast));
-    });
-    if (!nextToast) {
-      return;
-    }
-    const nextTimeout = nextToast.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 = timersRef.current.has(id);
-    const timeoutChanged = prevTimeout !== nextTimeout;
-    const wasLoading = prevToast?.type === 'loading';
-    if (!shouldHaveTimer && hasTimer) {
-      const timer = timersRef.current.get(id);
-      timer?.timeout?.clear();
-      timersRef.current.delete(id);
-      return;
-    }
-
-    // Schedule or reschedule timer if needed
-    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading)) {
-      const timer = timersRef.current.get(id);
-      if (timer) {
-        timer.timeout?.clear();
-        timersRef.current.delete(id);
-      }
-      scheduleTimer(id, nextTimeout, () => close(id));
-      if (hovering || focused || !windowFocusedRef.current) {
-        pauseTimers();
-      }
-    }
-  });
-  const promise = (0, _useStableCallback.useStableCallback)((promiseValue, options) => {
-    // Create a loading toast (which does not auto-dismiss).
-    const loadingOptions = (0, _resolvePromiseOptions.resolvePromiseOptions)(options.loading);
-    const id = add({
-      ...loadingOptions,
-      type: 'loading'
-    });
-    const handledPromise = promiseValue.then(result => {
-      const successOptions = (0, _resolvePromiseOptions.resolvePromiseOptions)(options.success, result);
-      update(id, {
-        ...successOptions,
-        type: 'success',
-        timeout: successOptions.timeout
-      });
-      return result;
-    }).catch(error => {
-      const errorOptions = (0, _resolvePromiseOptions.resolvePromiseOptions)(options.error, error);
-      update(id, {
-        ...errorOptions,
-        type: 'error',
-        timeout: errorOptions.timeout
-      });
-      return Promise.reject(error);
-    });
-
-    // Private API used exclusively by `Manager` to handoff the promise
-    // back to the manager after it's handled here.
-    if ({}.hasOwnProperty.call(options, 'setPromise')) {
-      options.setPromise(handledPromise);
-    }
-    return handledPromise;
-  });
+  const store = (0, _useRefWithInit.useRefWithInit)(() => new _store.ToastStore({
+    timeout,
+    limit,
+    viewport: null,
+    toasts: [],
+    hovering: false,
+    focused: false,
+    isWindowFocused: true,
+    prevFocusElement: null
+  })).current;
+  (0, _useOnMount.useOnMount)(store.disposeEffect);
   React.useEffect(function subscribeToToastManager() {
     if (!toastManager) {
       return undefined;
@@ -288,40 +45,23 @@ const ToastProvider = exports.ToastProvider = function ToastProvider(props) {
     }) => {
       const id = options.id;
       if (action === 'promise' && options.promise) {
-        promise(options.promise, options);
+        store.promiseToast(options.promise, options);
       } else if (action === 'update' && id) {
-        update(id, options);
+        store.updateToast(id, options);
       } else if (action === 'close' && id) {
-        close(id);
+        store.closeToast(id);
       } else {
-        add(options);
+        store.addToast(options);
       }
     });
     return unsubscribe;
-  }, [add, update, scheduleTimer, timeout, toastManager, promise, close]);
-  const contextValue = React.useMemo(() => ({
-    toasts,
-    setToasts,
-    hovering,
-    setHovering,
-    focused,
-    setFocused,
-    expanded,
-    add,
-    close,
-    remove,
-    update,
-    promise,
-    pauseTimers,
-    resumeTimers,
-    prevFocusElement,
-    setPrevFocusElement,
-    viewportRef,
-    scheduleTimer,
-    windowFocusedRef
-  }), [add, close, focused, hovering, expanded, pauseTimers, prevFocusElement, promise, remove, resumeTimers, scheduleTimer, toasts, update]);
+  }, [store, timeout, toastManager]);
+  store.useSyncedValues({
+    timeout,
+    limit
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToastProviderContext.ToastContext.Provider, {
-    value: contextValue,
+    value: store,
     children: children
   });
 };

package/toast/provider/ToastProviderContext.d.ts

@@ -1,26 +1,5 @@
 import * as React from 'react';
-import type { ToastObject, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions } from "../useToastManager.js";
-export interface ToastContextValue<Data extends object> {
-  toasts: ToastObject<Data>[];
-  setToasts: React.Dispatch<React.SetStateAction<ToastObject<Data>[]>>;
-  hovering: boolean;
-  setHovering: React.Dispatch<React.SetStateAction<boolean>>;
-  focused: boolean;
-  setFocused: React.Dispatch<React.SetStateAction<boolean>>;
-  expanded: boolean;
-  add: (options: ToastManagerAddOptions<Data>) => string;
-  update: (id: string, options: ToastManagerUpdateOptions<Data>) => void;
-  promise: <Value>(value: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
-  close: (id: string) => void;
-  pauseTimers: () => void;
-  resumeTimers: () => void;
-  remove: (id: string) => void;
-  prevFocusElement: HTMLElement | null;
-  setPrevFocusElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-  viewportRef: React.RefObject<HTMLElement | null>;
-  windowFocusedRef: React.RefObject<boolean>;
-  scheduleTimer: (id: string, delay: number, callback: () => void) => void;
-}
-export type ToastContext<Data extends object> = ToastContextValue<Data>;
-export declare const ToastContext: React.Context<ToastContext<any> | undefined>;
-export declare function useToastContext(): ToastContext<any>;
+import { ToastStore } from "../store.js";
+export type ToastContext = ToastStore;
+export declare const ToastContext: React.Context<ToastStore | undefined>;
+export declare function useToastProviderContext(): ToastStore;

package/toast/provider/ToastProviderContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -6,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastContext = void 0;
-exports.useToastContext = useToastContext;
+exports.useToastProviderContext = useToastProviderContext;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 const ToastContext = exports.ToastContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ToastContext.displayName = "ToastContext";
-function useToastContext() {
+function useToastProviderContext() {
   const context = React.useContext(ToastContext);
   if (!context) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: useToastManager must be used within <Toast.Provider>.' : (0, _formatErrorMessage2.default)(73));

package/toast/root/ToastRoot.d.ts

@@ -32,7 +32,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')[];
+  swipeDirection?: ('up' | 'down' | 'left' | 'right' | ('up' | 'down' | 'left' | 'right')[]) | undefined;
 }
 export declare namespace ToastRoot {
   type ToastObject<Data extends object = any> = ToastRootToastObject<Data>;