@base-ui/react 1.6.0 → 1.7.0

package/toast/root/ToastRoot.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastRoot = void 0;
+exports.toastRootStateAttributesMapping = exports.ToastRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _addEventListener = require("@base-ui/utils/addEventListener");
@@ -19,11 +19,10 @@ var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
-var _ToastRootCssVars = require("./ToastRootCssVars");
 var _constants = require("../../internals/constants");
 var _useSwipeDismiss = require("../../utils/useSwipeDismiss");
 var _jsxRuntime = require("react/jsx-runtime");
-const stateAttributesMapping = {
+const toastRootStateAttributesMapping = exports.toastRootStateAttributesMapping = {
   ..._stateAttributesMapping.transitionStatusMapping,
   swipeDirection(value) {
     return value ? {
@@ -62,7 +61,6 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
   const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState(undefined);
   const [isSwiping, setIsSwiping] = React.useState(false);
   const [isRealSwipe, setIsRealSwipe] = React.useState(false);
-  const [dragDismissed, setDragDismissed] = React.useState(false);
   const [dragOffset, setDragOffset] = React.useState({
     x: 0,
     y: 0
@@ -76,6 +74,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
   const [descriptionId, setDescriptionId] = React.useState();
   const [lockedDirection, setLockedDirection] = React.useState(null);
   const rootRef = React.useRef(null);
+  const lastToastIdRef = React.useRef(undefined);
   const dragStartPosRef = React.useRef({
     x: 0,
     y: 0
@@ -116,6 +115,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
 
   // Recalculates the natural height of the toast and updates it in the toast manager.
   // `flushSync` avoids visual flickers when called from observer callbacks.
+  // The store ignores this write while the toast is transitioning out.
   const recalculateHeight = (0, _useStableCallback.useStableCallback)((flushSync = false) => {
     const element = rootRef.current;
     if (!element) {
@@ -129,9 +129,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       store.updateToastInternal(toast.id, {
         ref: rootRef,
         height,
-        ...(toast.transitionStatus === 'starting' ? {
-          transitionStatus: undefined
-        } : {})
+        transitionStatus: undefined
       });
     }
     if (flushSync) {
@@ -140,7 +138,34 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       update();
     }
   });
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(recalculateHeight, [recalculateHeight]);
+
+  // Initialize the toast on mount, and reinitialize when it begins a new lifecycle:
+  // re-adding an ending toast retains the same root instance (`key={toast.id}`), and
+  // index-keyed lists can hand an existing instance a different toast.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const previousToastId = lastToastIdRef.current;
+    // `recalculateHeight` clears the `starting` status itself, so bail out on the
+    // resulting re-run and on the later `ending` one, which the store discards anyway.
+    if (toast.transitionStatus !== 'starting' && previousToastId === toast.id) {
+      return;
+    }
+    if (previousToastId !== undefined) {
+      // A retained root keeps component-local swipe state from its previous lifecycle;
+      // clear it so the toast doesn't stay offset or exit in the swiped direction.
+      setCurrentSwipeDirection(undefined);
+      setInitialTransform({
+        x: 0,
+        y: 0,
+        scale: 1
+      });
+      setResolvedDragOffset({
+        x: 0,
+        y: 0
+      });
+    }
+    lastToastIdRef.current = toast.id;
+    recalculateHeight();
+  }, [recalculateHeight, toast.id, toast.transitionStatus]);
   function setResolvedDragOffset(nextDragOffset) {
     dragOffsetRef.current = nextDragOffset;
     setDragOffset(nextDragOffset);
@@ -151,31 +176,12 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     };
   }, []);
   function applyDirectionalDamping(deltaX, deltaY) {
-    let newDeltaX = deltaX;
-    let newDeltaY = deltaY;
-    if (!swipeDirections.includes('left') && !swipeDirections.includes('right')) {
-      newDeltaX = deltaX > 0 ? deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-    } else {
-      if (!swipeDirections.includes('right') && deltaX > 0) {
-        newDeltaX = deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
-      }
-      if (!swipeDirections.includes('left') && deltaX < 0) {
-        newDeltaX = -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-      }
-    }
-    if (!swipeDirections.includes('up') && !swipeDirections.includes('down')) {
-      newDeltaY = deltaY > 0 ? deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-    } else {
-      if (!swipeDirections.includes('down') && deltaY > 0) {
-        newDeltaY = deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
-      }
-      if (!swipeDirections.includes('up') && deltaY < 0) {
-        newDeltaY = -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-      }
-    }
+    const damp = delta => delta > 0 ? delta ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(delta) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    const dampX = deltaX > 0 && !swipeDirections.includes('right') || deltaX < 0 && !swipeDirections.includes('left');
+    const dampY = deltaY > 0 && !swipeDirections.includes('down') || deltaY < 0 && !swipeDirections.includes('up');
     return {
-      x: newDeltaX,
-      y: newDeltaY
+      x: dampX ? damp(deltaX) : deltaX,
+      y: dampY ? damp(deltaY) : deltaY
     };
   }
   const handleSwipeEnd = (0, _useStableCallback.useStableCallback)(event => {
@@ -197,47 +203,18 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       setCurrentSwipeDirection(undefined);
       return;
     }
-    let shouldClose = false;
     const resolvedDragOffset = dragOffsetRef.current;
     const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
     const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
     let dismissDirection;
     for (const direction of swipeDirections) {
-      switch (direction) {
-        case 'right':
-          if (deltaX > SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'right';
-          }
-          break;
-        case 'left':
-          if (deltaX < -SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'left';
-          }
-          break;
-        case 'down':
-          if (deltaY > SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'down';
-          }
-          break;
-        case 'up':
-          if (deltaY < -SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'up';
-          }
-          break;
-        default:
-          break;
-      }
-      if (shouldClose) {
+      if ((0, _useSwipeDismiss.getDisplacement)(direction, deltaX, deltaY) > SWIPE_THRESHOLD) {
+        dismissDirection = direction;
         break;
       }
     }
-    if (shouldClose) {
+    if (dismissDirection) {
       setCurrentSwipeDirection(dismissDirection);
-      setDragDismissed(true);
       store.closeToast(toast.id);
     } else {
       setResolvedDragOffset({
@@ -255,7 +232,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"],${TOAST_SWIPE_IGNORE_SELECTOR}`) : false;
+    const isInteractiveElement = target?.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`);
     if (isInteractiveElement) {
       return;
     }
@@ -268,34 +245,30 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       y: event.clientY
     };
     swipeCancelBaselineRef.current = dragStartPosRef.current;
-    if (rootRef.current) {
-      const transform = (0, _useSwipeDismiss.getElementTransform)(rootRef.current);
-      initialTransformRef.current = transform;
-      setInitialTransform(transform);
-      setResolvedDragOffset({
-        x: transform.x,
-        y: transform.y
-      });
-    }
-    store.setHovering(true);
+    const element = event.currentTarget;
+    const transform = (0, _useSwipeDismiss.getElementTransform)(element);
+    initialTransformRef.current = transform;
+    setInitialTransform(transform);
+    setResolvedDragOffset({
+      x: transform.x,
+      y: transform.y
+    });
+    store.set('hovering', true);
     setIsSwiping(true);
     setIsRealSwipe(false);
     setLockedDirection(null);
     isFirstPointerMoveRef.current = true;
-    const element = rootRef.current;
-    if (element) {
-      dragAbortControllerRef.current?.abort();
-      const dragAbortController = new AbortController();
-      dragAbortControllerRef.current = dragAbortController;
-      const doc = (0, _owner.ownerDocument)(element);
-      doc.addEventListener('pointerup', handleSwipeEnd, {
-        signal: dragAbortController.signal
-      });
-      doc.addEventListener('pointercancel', handleSwipeEnd, {
-        signal: dragAbortController.signal
-      });
-      element.setPointerCapture?.(event.pointerId);
-    }
+    dragAbortControllerRef.current?.abort();
+    const dragAbortController = new AbortController();
+    dragAbortControllerRef.current = dragAbortController;
+    const doc = (0, _owner.ownerDocument)(element);
+    doc.addEventListener('pointerup', handleSwipeEnd, {
+      signal: dragAbortController.signal
+    });
+    doc.addEventListener('pointercancel', handleSwipeEnd, {
+      signal: dragAbortController.signal
+    });
+    element.setPointerCapture?.(event.pointerId);
   }
   function handlePointerMove(event) {
     if (event.pointerId !== activePointerIdRef.current) {
@@ -335,30 +308,33 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     const deltaY = clientY - dragStartPosRef.current.y;
     const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
     const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
+    let resolvedLockedDirection = lockedDirection;
     if (!isRealSwipe) {
       const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
       if (movementDistance >= MIN_DRAG_THRESHOLD) {
         setIsRealSwipe(true);
-        if (lockedDirection === null) {
-          const hasHorizontal = swipeDirections.includes('left') || swipeDirections.includes('right');
-          const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
-          if (hasHorizontal && hasVertical) {
-            const absX = Math.abs(deltaX);
-            const absY = Math.abs(deltaY);
-            setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
-          }
+        // `lockedDirection` is always reset alongside `isRealSwipe`, so it is
+        // still `null` here. Locking is only meaningful when both axes are
+        // swipeable; otherwise the single axis already constrains the gesture.
+        const hasHorizontal = swipeDirections.includes('left') || swipeDirections.includes('right');
+        const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
+        if (hasHorizontal && hasVertical) {
+          const absX = Math.abs(deltaX);
+          const absY = Math.abs(deltaY);
+          resolvedLockedDirection = absX > absY ? 'horizontal' : 'vertical';
+          setLockedDirection(resolvedLockedDirection);
         }
       }
     }
     let candidate;
     if (!intendedSwipeDirectionRef.current) {
-      if (lockedDirection === 'vertical') {
+      if (resolvedLockedDirection === 'vertical') {
         if (deltaY > 0) {
           candidate = 'down';
         } else if (deltaY < 0) {
           candidate = 'up';
         }
-      } else if (lockedDirection === 'horizontal') {
+      } else if (resolvedLockedDirection === 'horizontal') {
         if (deltaX > 0) {
           candidate = 'right';
         } else if (deltaX < 0) {
@@ -388,21 +364,13 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
     let newOffsetX = initialTransformRef.current.x;
     let newOffsetY = initialTransformRef.current.y;
-    if (lockedDirection === 'horizontal') {
-      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
-        newOffsetX += dampedDelta.x;
-      }
-    } else if (lockedDirection === 'vertical') {
-      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
-        newOffsetY += dampedDelta.y;
-      }
-    } else {
-      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
-        newOffsetX += dampedDelta.x;
-      }
-      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
-        newOffsetY += dampedDelta.y;
-      }
+    const hasHorizontalDir = swipeDirections.includes('left') || swipeDirections.includes('right');
+    const hasVerticalDir = swipeDirections.includes('up') || swipeDirections.includes('down');
+    if (resolvedLockedDirection !== 'vertical' && hasHorizontalDir) {
+      newOffsetX += dampedDelta.x;
+    }
+    if (resolvedLockedDirection !== 'horizontal' && hasVerticalDir) {
+      newOffsetY += dampedDelta.y;
     }
     setResolvedDragOffset({
       x: newOffsetX,
@@ -418,11 +386,8 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     }
   }
   React.useEffect(() => {
-    if (!swipeEnabled) {
-      return undefined;
-    }
     const element = rootRef.current;
-    if (!element) {
+    if (!swipeEnabled || !element) {
       return undefined;
     }
     function preventDefaultTouchStart(event) {
@@ -439,12 +404,6 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     });
   }, [swipeEnabled]);
   function getDragStyles() {
-    if (!isSwiping && dragOffset.x === initialTransform.x && dragOffset.y === initialTransform.y && !dragDismissed) {
-      return {
-        [_ToastRootCssVars.ToastRootCssVars.swipeMovementX]: '0px',
-        [_ToastRootCssVars.ToastRootCssVars.swipeMovementY]: '0px'
-      };
-    }
     const deltaX = dragOffset.x - initialTransform.x;
     const deltaY = dragOffset.y - initialTransform.y;
     return {
@@ -452,8 +411,8 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
       transform: isSwiping ? `translateX(${dragOffset.x}px) translateY(${dragOffset.y}px) scale(${initialTransform.scale})` : undefined,
-      [_ToastRootCssVars.ToastRootCssVars.swipeMovementX]: `${deltaX}px`,
-      [_ToastRootCssVars.ToastRootCssVars.swipeMovementY]: `${deltaY}px`
+      ['--toast-swipe-movement-x']: `${deltaX}px`,
+      ['--toast-swipe-movement-y']: `${deltaY}px`
     };
   }
   const isHighPriority = toast.priority === 'high';
@@ -472,37 +431,31 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     inert: (0, _inertValue.inertValue)(toast.limited),
     style: {
       ...getDragStyles(),
-      [_ToastRootCssVars.ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
-      [_ToastRootCssVars.ToastRootCssVars.offsetY]: `${offsetY}px`,
-      [_ToastRootCssVars.ToastRootCssVars.height]: toast.height ? `${toast.height}px` : undefined
+      ['--toast-index']: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
+      ['--toast-offset-y']: `${offsetY}px`,
+      ['--toast-height']: toast.height ? `${toast.height}px` : undefined
     }
   };
   const toastRoot = React.useMemo(() => ({
-    rootRef,
     toast,
-    titleId,
     setTitleId,
-    descriptionId,
     setDescriptionId,
-    swiping: isSwiping,
-    swipeDirection: currentSwipeDirection,
     recalculateHeight,
-    index: domIndex,
     visibleIndex,
     expanded
-  }), [toast, titleId, descriptionId, isSwiping, currentSwipeDirection, recalculateHeight, domIndex, visibleIndex, expanded]);
+  }), [toast, setTitleId, setDescriptionId, recalculateHeight, visibleIndex, expanded]);
   const state = {
     transitionStatus: toast.transitionStatus,
     expanded,
     limited: toast.limited || false,
     type: toast.type,
-    swiping: toastRoot.swiping,
-    swipeDirection: toastRoot.swipeDirection
+    swiping: isSwiping,
+    swipeDirection: currentSwipeDirection
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: [forwardedRef, toastRoot.rootRef],
+    ref: [forwardedRef, rootRef],
     state,
-    stateAttributesMapping,
+    stateAttributesMapping: toastRootStateAttributesMapping,
     props: [defaultProps, elementProps]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToastRootContext.ToastRootContext.Provider, {