@octanejs/base-ui 0.1.50 → 0.1.52

package/src/toast/root/ToastRoot.tsrx

@@ -0,0 +1,563 @@
+'use client';
+import * as React from 'octane';
+import * as ReactDOM from 'octane';
+import { addEventListener } from '@octanejs/base-ui-utils/addEventListener';
+import { ownerDocument } from '@octanejs/base-ui-utils/owner';
+import { inertValue } from '@octanejs/base-ui-utils/inertValue';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { activeElement, contains, getTarget } from '../../floating-ui-react/utils';
+import type { BaseUIComponentProps, HTMLProps } from '../../internals/types';
+import type { ToastObject as ToastObjectType } from '../useToastManager';
+import { ToastRootContext } from './ToastRootContext';
+import { transitionStatusMapping } from '../../internals/stateAttributesMapping';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+import { useToastProviderContext } from '../provider/ToastProviderContext';
+import type { StateAttributesMapping } from '../../internals/getStateAttributesProps';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useOpenChangeComplete } from '../../internals/useOpenChangeComplete.tsrx';
+import {
+	BASE_UI_SWIPE_IGNORE_SELECTOR,
+	LEGACY_SWIPE_IGNORE_SELECTOR,
+} from '../../internals/constants';
+import { getDisplacement } from '../../utils/useSwipeDismiss';
+import { getElementTransform } from '../../utils/getElementTransform';
+import * as ToastRootCssVars from './ToastRootCssVars';
+import * as ToastRootDataAttributes from './ToastRootDataAttributes';
+
+export const toastRootStateAttributesMapping: StateAttributesMapping<ToastRootState> = {
+	...transitionStatusMapping,
+	swipeDirection(value) {
+		return value ? { [ToastRootDataAttributes.swipeDirection]: value } : null;
+	},
+};
+
+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}`;
+
+/**
+ * Groups all parts of an individual toast.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+export const ToastRoot = function ToastRoot(
+	componentPropsWithRef: React.PropsWithoutRef<ToastRoot.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		toast,
+		render,
+		className,
+		swipeDirection = ['down', 'right'],
+		style,
+		...elementProps
+	} = componentProps;
+
+	const isAnchored = toast.positionerProps?.anchor !== undefined;
+
+	let swipeDirections: ('up' | 'down' | 'left' | 'right')[] = [];
+	if (!isAnchored) {
+		swipeDirections = Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
+	}
+
+	const swipeEnabled = swipeDirections.length > 0;
+
+	const store = useToastProviderContext();
+
+	const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState<
+		'up' | 'down' | 'left' | 'right' | undefined
+	>(undefined);
+	const [isSwiping, setIsSwiping] = React.useState(false);
+	const [isRealSwipe, setIsRealSwipe] = React.useState(false);
+	const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
+	const [initialTransform, setInitialTransform] = React.useState({ x: 0, y: 0, scale: 1 });
+	const [titleId, setTitleId] = React.useState<string | undefined>();
+	const [descriptionId, setDescriptionId] = React.useState<string | undefined>();
+	const [lockedDirection, setLockedDirection] = React.useState<'horizontal' | 'vertical' | null>(
+		null,
+	);
+
+	const rootRef = React.useRef<HTMLDivElement | null>(null);
+	const lastToastIdRef = React.useRef<string | undefined>(undefined);
+	const dragStartPosRef = React.useRef({ x: 0, y: 0 });
+	const initialTransformRef = React.useRef({ x: 0, y: 0, scale: 1 });
+	const intendedSwipeDirectionRef = React.useRef<'up' | 'down' | 'left' | 'right' | undefined>(
+		undefined,
+	);
+	const maxSwipeDisplacementRef = React.useRef(0);
+	const cancelledSwipeRef = React.useRef(false);
+	const swipeCancelBaselineRef = React.useRef({ x: 0, y: 0 });
+	const isFirstPointerMoveRef = React.useRef(false);
+	const dragOffsetRef = React.useRef({ x: 0, y: 0 });
+	const activePointerIdRef = React.useRef<number | null>(null);
+	const dragAbortControllerRef = React.useRef<AbortController | null>(null);
+
+	const domIndex = store.useState('toastIndex', toast.id);
+	const visibleIndex = store.useState('toastVisibleIndex', toast.id);
+	const offsetY = store.useState('toastOffsetY', toast.id);
+	const focused = store.useState('focused');
+	const expanded = store.useState('expanded');
+
+	useOpenChangeComplete({
+		open: toast.transitionStatus !== 'ending',
+		ref: rootRef,
+		onComplete() {
+			if (toast.transitionStatus === 'ending') {
+				store.removeToast(toast.id);
+			}
+		},
+	});
+
+	// 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 = useStableCallback((flushSync: boolean = false) => {
+		const element = rootRef.current;
+		if (!element) {
+			return;
+		}
+
+		const previousHeight = element.style.height;
+		element.style.height = 'auto';
+
+		const height = element.offsetHeight;
+
+		element.style.height = previousHeight;
+
+		function update() {
+			store.updateToastInternal(toast.id, {
+				ref: rootRef,
+				height,
+				transitionStatus: undefined,
+			});
+		}
+
+		if (flushSync) {
+			ReactDOM.flushSync(update);
+		} else {
+			update();
+		}
+	});
+
+	// 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.
+	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: { x: number; y: number }) {
+		dragOffsetRef.current = nextDragOffset;
+		setDragOffset(nextDragOffset);
+	}
+
+	useIsoLayoutEffect(() => {
+		return () => {
+			dragAbortControllerRef.current?.abort();
+		};
+	}, []);
+
+	function applyDirectionalDamping(deltaX: number, deltaY: number) {
+		const damp = (delta: number) =>
+			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: dampX ? damp(deltaX) : deltaX,
+			y: dampY ? damp(deltaY) : deltaY,
+		};
+	}
+
+	const handleSwipeEnd = useStableCallback((event: React.PointerEvent | PointerEvent) => {
+		if (event.pointerId !== activePointerIdRef.current) {
+			return;
+		}
+
+		activePointerIdRef.current = null;
+		dragAbortControllerRef.current?.abort();
+		dragAbortControllerRef.current = null;
+		setIsSwiping(false);
+		setIsRealSwipe(false);
+		setLockedDirection(null);
+
+		const resolvedInitialTransform = initialTransformRef.current;
+
+		if (event.type === 'pointercancel' || cancelledSwipeRef.current) {
+			setResolvedDragOffset({ x: resolvedInitialTransform.x, y: resolvedInitialTransform.y });
+			setCurrentSwipeDirection(undefined);
+			return;
+		}
+
+		const resolvedDragOffset = dragOffsetRef.current;
+		const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
+		const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
+		let dismissDirection: 'up' | 'down' | 'left' | 'right' | undefined;
+
+		for (const direction of swipeDirections) {
+			if (getDisplacement(direction, deltaX, deltaY) > SWIPE_THRESHOLD) {
+				dismissDirection = direction;
+				break;
+			}
+		}
+
+		if (dismissDirection) {
+			setCurrentSwipeDirection(dismissDirection);
+			store.closeToast(toast.id);
+		} else {
+			setResolvedDragOffset({ x: resolvedInitialTransform.x, y: resolvedInitialTransform.y });
+			setCurrentSwipeDirection(undefined);
+		}
+	});
+
+	function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {
+		if (event.button !== 0) {
+			return;
+		}
+
+		if (event.pointerType === 'touch') {
+			store.pauseTimers();
+		}
+
+		const target = getTarget(event) as HTMLElement | null;
+
+		const isInteractiveElement = target?.closest(
+			`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`,
+		);
+
+		if (isInteractiveElement) {
+			return;
+		}
+
+		cancelledSwipeRef.current = false;
+		intendedSwipeDirectionRef.current = undefined;
+		maxSwipeDisplacementRef.current = 0;
+		activePointerIdRef.current = event.pointerId;
+		dragStartPosRef.current = { x: event.clientX, y: event.clientY };
+		swipeCancelBaselineRef.current = dragStartPosRef.current;
+
+		const element = event.currentTarget;
+
+		const transform = 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;
+
+		dragAbortControllerRef.current?.abort();
+		const dragAbortController = new AbortController();
+		dragAbortControllerRef.current = dragAbortController;
+
+		const doc = ownerDocument(element);
+		doc.addEventListener('pointerup', handleSwipeEnd, { signal: dragAbortController.signal });
+		doc.addEventListener('pointercancel', handleSwipeEnd, { signal: dragAbortController.signal });
+
+		element.setPointerCapture?.(event.pointerId);
+	}
+
+	function handlePointerMove(event: React.PointerEvent) {
+		if (event.pointerId !== activePointerIdRef.current) {
+			return;
+		}
+
+		// Prevent text selection on Safari
+		event.preventDefault();
+
+		if (isFirstPointerMoveRef.current) {
+			// Adjust the starting position to the current position on the first move
+			// to account for the delay between pointerdown and the first pointermove on iOS.
+			dragStartPosRef.current = { x: event.clientX, y: event.clientY };
+			isFirstPointerMoveRef.current = false;
+		}
+
+		const { clientY, clientX, movementX, movementY } = event;
+
+		if (
+			(movementY < 0 && clientY > swipeCancelBaselineRef.current.y) ||
+			(movementY > 0 && clientY < swipeCancelBaselineRef.current.y)
+		) {
+			swipeCancelBaselineRef.current = { x: swipeCancelBaselineRef.current.x, y: clientY };
+		}
+
+		if (
+			(movementX < 0 && clientX > swipeCancelBaselineRef.current.x) ||
+			(movementX > 0 && clientX < swipeCancelBaselineRef.current.x)
+		) {
+			swipeCancelBaselineRef.current = { x: clientX, y: swipeCancelBaselineRef.current.y };
+		}
+
+		const deltaX = clientX - dragStartPosRef.current.x;
+		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);
+				// `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: 'up' | 'down' | 'left' | 'right' | undefined;
+		if (!intendedSwipeDirectionRef.current) {
+			if (resolvedLockedDirection === 'vertical') {
+				if (deltaY > 0) {
+					candidate = 'down';
+				} else if (deltaY < 0) {
+					candidate = 'up';
+				}
+			} else if (resolvedLockedDirection === 'horizontal') {
+				if (deltaX > 0) {
+					candidate = 'right';
+				} else if (deltaX < 0) {
+					candidate = 'left';
+				}
+			} else if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+				candidate = deltaX > 0 ? 'right' : 'left';
+			} else {
+				candidate = deltaY > 0 ? 'down' : 'up';
+			}
+
+			if (candidate && swipeDirections.includes(candidate)) {
+				intendedSwipeDirectionRef.current = candidate;
+				maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
+				setCurrentSwipeDirection(candidate);
+			}
+		} else {
+			const direction = intendedSwipeDirectionRef.current;
+			const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
+
+			if (currentDisplacement > SWIPE_THRESHOLD) {
+				cancelledSwipeRef.current = false;
+				setCurrentSwipeDirection(direction);
+			} else if (
+				!(swipeDirections.includes('left') && swipeDirections.includes('right')) &&
+				!(swipeDirections.includes('up') && swipeDirections.includes('down')) &&
+				maxSwipeDisplacementRef.current - currentDisplacement >= REVERSE_CANCEL_THRESHOLD
+			) {
+				// Mark that a change-of-mind has occurred
+				cancelledSwipeRef.current = true;
+			}
+		}
+
+		const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
+		let newOffsetX = initialTransformRef.current.x;
+		let newOffsetY = initialTransformRef.current.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, y: newOffsetY });
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent) {
+		if (event.key === 'Escape') {
+			if (
+				!rootRef.current ||
+				!contains(rootRef.current, activeElement(ownerDocument(rootRef.current)))
+			) {
+				return;
+			}
+
+			store.closeToast(toast.id);
+		}
+	}
+
+	React.useEffect(() => {
+		const element = rootRef.current;
+		if (!swipeEnabled || !element) {
+			return undefined;
+		}
+
+		function preventDefaultTouchStart(event: TouchEvent) {
+			if (
+				activePointerIdRef.current === null ||
+				!contains(element, getTarget(event) as HTMLElement | null)
+			) {
+				return;
+			}
+
+			// React's pointermove preventDefault is not enough on iOS; this
+			// non-passive touchmove listener blocks native scrolling while dragging.
+			event.preventDefault();
+		}
+
+		return addEventListener(element, 'touchmove', preventDefaultTouchStart, { passive: false });
+	}, [swipeEnabled]);
+
+	function getDragStyles() {
+		const deltaX = dragOffset.x - initialTransform.x;
+		const deltaY = dragOffset.y - initialTransform.y;
+
+		return {
+			transition: isSwiping ? 'none' : undefined,
+			// 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.swipeMovementX]: `${deltaX}px`,
+			[ToastRootCssVars.swipeMovementY]: `${deltaY}px`,
+		};
+	}
+
+	const isHighPriority = toast.priority === 'high';
+
+	const defaultProps: HTMLProps = {
+		role: isHighPriority ? 'alertdialog' : 'dialog',
+		tabIndex: 0,
+		'aria-modal': false,
+		'aria-labelledby': titleId,
+		'aria-describedby': descriptionId,
+		'aria-hidden': isHighPriority && !focused ? true : undefined,
+		onPointerDown: swipeEnabled ? handlePointerDown : undefined,
+		onPointerMove: swipeEnabled ? handlePointerMove : undefined,
+		onPointerUp: swipeEnabled ? handleSwipeEnd : undefined,
+		onPointerCancel: swipeEnabled ? handleSwipeEnd : undefined,
+		onKeyDown: handleKeyDown,
+		inert: inertValue(toast.limited),
+		style: {
+			...getDragStyles(),
+			[ToastRootCssVars.index as string]:
+				toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
+			[ToastRootCssVars.offsetY as string]: `${offsetY}px`,
+			[ToastRootCssVars.height as string]: toast.height ? `${toast.height}px` : undefined,
+		},
+	};
+
+	const toastRoot: ToastRootContext = React.useMemo(
+		() => ({
+			toast,
+			setTitleId,
+			setDescriptionId,
+			recalculateHeight,
+			visibleIndex,
+			expanded,
+		}),
+		[toast, setTitleId, setDescriptionId, recalculateHeight, visibleIndex, expanded],
+	);
+
+	const state: ToastRootState = {
+		transitionStatus: toast.transitionStatus,
+		expanded,
+		limited: toast.limited || false,
+		type: toast.type,
+		swiping: isSwiping,
+		swipeDirection: currentSwipeDirection,
+	};
+
+	const element = useRenderElement('div', componentProps, {
+		ref: [forwardedRef, rootRef],
+		state,
+		stateAttributesMapping: toastRootStateAttributesMapping,
+		props: [defaultProps, elementProps],
+	});
+
+	return <ToastRootContext.Provider value={toastRoot}>{element}</ToastRootContext.Provider>;
+};
+
+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.
+	 */
+	expanded: boolean;
+	/**
+	 * Whether the toast was limited because the toast limit was exceeded.
+	 */
+	limited: boolean;
+	/**
+	 * The type of the toast.
+	 */
+	type: string | undefined;
+	/**
+	 * Whether the toast is being swiped.
+	 */
+	swiping: boolean;
+	/**
+	 * The direction the toast is being swiped.
+	 */
+	swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
+}
+
+export interface ToastRootProps extends BaseUIComponentProps<'div', ToastRootState> {
+	/**
+	 * The toast to render.
+	 */
+	toast: ToastRootToastObject<any>;
+	/**
+	 * Direction(s) in which the toast can be swiped to dismiss.
+	 * @default ['down', 'right']
+	 */
+	swipeDirection?:
+		'up' | 'down' | 'left' | 'right' | ('up' | 'down' | 'left' | 'right')[] | undefined;
+}
+
+export namespace ToastRoot {
+	export type ToastObject<Data extends object = any> = ToastRootToastObject<Data>;
+	export type State = ToastRootState;
+	export type Props = ToastRootProps;
+}

package/src/toast/root/ToastRootContext.ts

@@ -0,0 +1,25 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import type { ToastObject } from '../useToastManager';
+
+export interface ToastRootContext {
+	toast: ToastObject<any>;
+	setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
+	setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+	visibleIndex: number;
+	expanded: boolean;
+	recalculateHeight: (flushSync?: boolean) => void;
+}
+
+export const ToastRootContext = React.createContext<ToastRootContext | undefined>(undefined);
+
+export function useToastRootContext(): ToastRootContext {
+	const context = React.useContext(ToastRootContext);
+	if (!context) {
+		throw new Error(
+			'Base UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>.',
+		);
+	}
+	return context as ToastRootContext;
+}

package/src/toast/root/ToastRootCssVars.ts

@@ -0,0 +1,25 @@
+/**
+ * Indicates the index of the toast in the list.
+ * @type {number}
+ */
+export const index = '--toast-index';
+/**
+ * Indicates the vertical pixels offset of the toast in the list when expanded.
+ * @type {number}
+ */
+export const offsetY = '--toast-offset-y';
+/**
+ * Indicates the measured natural height of the toast in pixels.
+ * @type {number}
+ */
+export const height = '--toast-height';
+/**
+ * Indicates the horizontal swipe movement of the toast.
+ * @type {number}
+ */
+export const swipeMovementX = '--toast-swipe-movement-x';
+/**
+ * Indicates the vertical swipe movement of the toast.
+ * @type {number}
+ */
+export const swipeMovementY = '--toast-swipe-movement-y';

package/src/toast/root/ToastRootDataAttributes.ts

@@ -0,0 +1,35 @@
+import { TransitionStatusDataAttributes } from '../../internals/stateAttributesMapping';
+
+/**
+ * Present when the toast is expanded in the viewport.
+ * @type {boolean}
+ */
+export const expanded = 'data-expanded';
+/**
+ * Present when the toast was limited because the toast limit was exceeded.
+ * @type {boolean}
+ */
+export const limited = 'data-limited';
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export const type = 'data-type';
+/**
+ * Present when the toast is being swiped.
+ * @type {boolean}
+ */
+export const swiping = 'data-swiping';
+/**
+ * The direction the toast was swiped.
+ * @type {'up' | 'down' | 'left' | 'right'}
+ */
+export const swipeDirection = 'data-swipe-direction';
+/**
+ * Present when the toast begins animating in.
+ */
+export const startingStyle = TransitionStatusDataAttributes.startingStyle;
+/**
+ * Present when the toast is animating out.
+ */
+export const endingStyle = TransitionStatusDataAttributes.endingStyle;