@base-ui/react 1.2.0 → 1.4.0

package/toast/positioner/ToastPositioner.js

@@ -9,15 +9,13 @@ exports.ToastPositioner = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
 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");
 var _ToastRootCssVars = require("../root/ToastRootCssVars");
 var _ToastProviderContext = require("../provider/ToastProviderContext");
+var _usePositioner = require("../../utils/usePositioner");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the toast against the anchor.
@@ -47,6 +45,7 @@ const ToastPositioner = exports.ToastPositioner = /*#__PURE__*/React.forwardRef(
     sticky = positionerProps.sticky ?? false,
     disableAnchorTracking = positionerProps.disableAnchorTracking ?? false,
     collisionAvoidance = positionerProps.collisionAvoidance ?? _constants.POPUP_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = props;
   const [positionerElement, setPositionerElement] = React.useState(null);
@@ -78,36 +77,22 @@ const ToastPositioner = exports.ToastPositioner = /*#__PURE__*/React.forwardRef(
     keepMounted: true,
     collisionAvoidance
   });
-  const defaultProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    return {
-      role: 'presentation',
-      style: {
-        ...positioning.positionerStyles,
-        ...hiddenStyles,
-        [_ToastRootCssVars.ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex
-      }
-    };
-  }, [positioning.positionerStyles, toast.transitionStatus, domIndex, visibleIndex]);
   const state = React.useMemo(() => ({
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
   }), [positioning.side, positioning.align, positioning.anchorHidden]);
-  const contextValue = React.useMemo(() => ({
-    ...state,
-    arrowRef: positioning.arrowRef,
-    arrowStyles: positioning.arrowStyles,
-    arrowUncentered: positioning.arrowUncentered
-  }), [state, positioning.arrowRef, positioning.arrowStyles, positioning.arrowUncentered]);
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(toast.transitionStatus), elementProps],
-    ref: [forwardedRef, setPositionerElement],
-    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: {
+      ...positioning.positionerStyles,
+      [_ToastRootCssVars.ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex
+    },
+    transitionStatus: toast.transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToastPositionerContext.ToastPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: element
   });
 });

package/toast/positioner/ToastPositionerContext.d.ts

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-export interface ToastPositionerContext {
-  side: Side;
-  align: Align;
-  arrowRef: React.RefObject<Element | null>;
-  arrowUncentered: boolean;
-  arrowStyles: React.CSSProperties;
-}
+import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export type ToastPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles'>;
 export declare const ToastPositionerContext: React.Context<ToastPositionerContext | undefined>;
 export declare function useToastPositionerContext(): ToastPositionerContext;

package/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/toast/provider/ToastProvider.js

@@ -48,7 +48,7 @@ const ToastProvider = exports.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/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/toast/root/ToastRoot.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToastRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
 var _inertValue = require("@base-ui/utils/inertValue");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
@@ -19,6 +20,7 @@ var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _ToastRootCssVars = require("./ToastRootCssVars");
+var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._stateAttributesMapping.transitionStatusMapping,
@@ -32,6 +34,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 = `${_constants.BASE_UI_SWIPE_IGNORE_SELECTOR},${_constants.LEGACY_SWIPE_IGNORE_SELECTOR}`;
 function getDisplacement(direction, deltaX, deltaY) {
   switch (direction) {
     case 'up':
@@ -47,7 +50,7 @@ function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = (0, _owner.ownerWindow)(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -86,6 +89,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     render,
     className,
     swipeDirection = ['down', 'right'],
+    style,
     ...elementProps
   } = componentProps;
   const isAnchored = toast.positionerProps?.anchor !== undefined;
@@ -210,7 +214,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       store.pauseTimers();
     }
     const target = (0, _utils.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;
     }
@@ -415,6 +419,19 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       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 || !(0, _utils.contains)(rootRef.current, (0, _utils.activeElement)((0, _owner.ownerDocument)(rootRef.current)))) {
@@ -432,16 +449,13 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       return undefined;
     }
     function preventDefaultTouchStart(event) {
-      if ((0, _utils.contains)(element, event.target)) {
+      if ((0, _utils.contains)(element, (0, _utils.getTarget)(event))) {
         event.preventDefault();
       }
     }
-    element.addEventListener('touchmove', preventDefaultTouchStart, {
+    return (0, _addEventListener.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) {
@@ -472,6 +486,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     onPointerDown: swipeEnabled ? handlePointerDown : undefined,
     onPointerMove: swipeEnabled ? handlePointerMove : undefined,
     onPointerUp: swipeEnabled ? handlePointerUp : undefined,
+    onPointerCancel: swipeEnabled ? handlePointerCancel : undefined,
     onKeyDown: handleKeyDown,
     inert: (0, _inertValue.inertValue)(toast.limited),
     style: {

package/toast/root/ToastRootDataAttributes.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastRootDataAttributes = void 0;
-let ToastRootDataAttributes = exports.ToastRootDataAttributes = /*#__PURE__*/function (ToastRootDataAttributes) {
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let ToastRootDataAttributes = exports.ToastRootDataAttributes = function (ToastRootDataAttributes) {
   /**
    * Present when the toast is expanded in the viewport.
    * @type {boolean}
@@ -33,10 +34,10 @@ let ToastRootDataAttributes = exports.ToastRootDataAttributes = /*#__PURE__*/fun
   /**
    * Present when the toast is animating in.
    */
-  ToastRootDataAttributes["startingStyle"] = "data-starting-style";
+  ToastRootDataAttributes[ToastRootDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the toast is animating out.
    */
-  ToastRootDataAttributes["endingStyle"] = "data-ending-style";
+  ToastRootDataAttributes[ToastRootDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return ToastRootDataAttributes;
 }({});

package/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/toast/store.js

@@ -72,30 +72,53 @@ class ToastStore extends _store.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 || (0, _generateId.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
@@ -129,9 +152,11 @@ class ToastStore extends _store.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
@@ -149,12 +174,12 @@ class ToastStore extends _store.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');
@@ -170,7 +195,7 @@ class ToastStore extends _store.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();
@@ -183,15 +208,33 @@ class ToastStore extends _store.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',
@@ -208,13 +251,20 @@ class ToastStore extends _store.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).
@@ -327,6 +377,10 @@ class ToastStore extends _store.ReactStore {
     if (!this.state.viewport || !(0, _utils.contains)(this.state.viewport, activeEl) || !(0, _focusVisible.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/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/toast/title/ToastTitle.js

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

package/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/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;