@octanejs/base-ui 0.1.50 → 0.1.52

package/src/tooltip/store/TooltipHandle.ts

@@ -0,0 +1,54 @@
+import { type TooltipStore, createNullTooltipStore, type TooltipHandleStore } from './TooltipStore';
+import { BasePopupHandle } from '../../utils/popups/popupHandle';
+
+/**
+ * Controls a Tooltip imperatively and associates detached `Tooltip.Trigger` components with a
+ * `Tooltip.Root`. Create one with `Tooltip.createHandle()` and pass it to the `handle` prop of the
+ * root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
+ */
+export class TooltipHandle<Payload> extends BasePopupHandle<
+	TooltipHandleStore<Payload>,
+	TooltipStore<Payload>
+> {
+	constructor() {
+		super(createNullTooltipStore<Payload>(), 'Tooltip');
+	}
+
+	/**
+	 * Opens the tooltip and associates it with the trigger with the given id.
+	 *
+	 * This method should only be called in an event handler or an effect (not during rendering).
+	 *
+	 * @param triggerId ID of the trigger to associate with the tooltip. The trigger must be a matching
+	 * `Tooltip.Trigger` with this handle passed as a prop.
+	 */
+	open(triggerId: string) {
+		this.openByTrigger(triggerId);
+	}
+
+	/**
+	 * Closes the tooltip.
+	 *
+	 * This method should only be called in an event handler or an effect (not during rendering).
+	 */
+	close() {
+		this.closePopup();
+	}
+
+	/**
+	 * Whether the tooltip is currently open. Returns `false` while no root is attached to the handle.
+	 */
+	get isOpen() {
+		return this.attachedStore?.select('open') ?? false;
+	}
+}
+
+/**
+ * Creates a new handle to connect a Tooltip.Root with detached Tooltip.Trigger components.
+ */
+export function createTooltipHandle<Payload>(): TooltipHandle<Payload> {
+	return new TooltipHandle<Payload>();
+}

package/src/tooltip/store/TooltipStore.ts

@@ -0,0 +1,148 @@
+import type * as React from 'octane';
+import { ReactStore } from '@octanejs/base-ui-utils/store';
+import { NOOP } from '@octanejs/base-ui-utils/empty';
+import { type TooltipRoot } from '../root/TooltipRoot.tsrx';
+import { createChangeEventDetails } from '../../internals/createBaseUIEventDetails';
+import { REASONS } from '../../internals/reasons';
+import { NullStore } from '../../utils/NullStore';
+import type { AdaptiveOriginMiddleware } from '../../utils/adaptiveOriginConstants';
+import {
+	applyPopupOpenChange,
+	createInitialPopupStoreState,
+	type PopupStoreContext,
+	popupStoreSelectors,
+	type PopupStoreState,
+	PopupTriggerMap,
+	type PopupTriggerStoreKeys,
+} from '../../utils/popups';
+
+export type State<Payload> = PopupStoreState<Payload> & {
+	disabled: boolean;
+	instantType: 'delay' | 'dismiss' | 'focus' | undefined;
+	isInstantPhase: boolean;
+	trackCursorAxis: 'none' | 'x' | 'y' | 'both';
+	disableHoverablePopup: boolean;
+	openChangeReason: TooltipRoot.ChangeEventReason | null;
+	closeOnClick: boolean;
+	closeDelay: number;
+	adaptiveOrigin: AdaptiveOriginMiddleware | undefined;
+};
+
+export type Context = PopupStoreContext<TooltipRoot.ChangeEventDetails> & {
+	readonly popupRef: React.RefObject<HTMLElement | null>;
+};
+
+const selectors = {
+	...popupStoreSelectors,
+	disabled: (state: State<unknown>) => state.disabled,
+	instantType: (state: State<unknown>) => state.instantType,
+	isInstantPhase: (state: State<unknown>) => state.isInstantPhase,
+	trackCursorAxis: (state: State<unknown>) => state.trackCursorAxis,
+	disableHoverablePopup: (state: State<unknown>) => state.disableHoverablePopup,
+	lastOpenChangeReason: (state: State<unknown>) => state.openChangeReason,
+	closeOnClick: (state: State<unknown>) => state.closeOnClick,
+	closeDelay: (state: State<unknown>) => state.closeDelay,
+	adaptiveOrigin: (state: State<unknown>): AdaptiveOriginMiddleware | undefined =>
+		state.adaptiveOrigin,
+};
+
+type Selectors = typeof selectors;
+
+/**
+ * The store view that detached handle-backed triggers read from. Both the real `TooltipStore` and
+ * the inert fallback store satisfy it, so a trigger can read from whichever store the handle
+ * currently exposes. Narrowed to the members a trigger actually uses — the trigger-data members plus
+ * `setOpen`/`cancelPendingOpen` (called directly by the trigger) and `useSyncedValue` — so the
+ * exposed surface can't bypass the open-change pipeline; on the detached fallback store every one of
+ * these mutations is a no-op.
+ */
+export type TooltipHandleStore<Payload> = Pick<
+	TooltipStore<Payload>,
+	PopupTriggerStoreKeys | 'setOpen' | 'cancelPendingOpen' | 'useSyncedValue'
+>;
+
+export class TooltipStore<Payload> extends ReactStore<
+	Readonly<State<Payload>>,
+	Context,
+	Selectors
+> {
+	constructor(
+		initialState: Partial<State<Payload>>,
+		floatingId: string | undefined,
+		nested: boolean,
+	) {
+		const triggerElements = new PopupTriggerMap();
+		super(
+			createInitialState<Payload>(initialState, triggerElements, floatingId, nested),
+			createInitialContext(triggerElements),
+			selectors,
+		);
+	}
+
+	setOpen = (
+		nextOpen: boolean,
+		eventDetails: Omit<TooltipRoot.ChangeEventDetails, 'preventUnmountOnClose'>,
+	) => {
+		applyPopupOpenChange(this, nextOpen, eventDetails as TooltipRoot.ChangeEventDetails, {
+			extraState: { openChangeReason: eventDetails.reason },
+		});
+	};
+
+	// Used by trigger clicks to clear a delayed hover open without reporting a public open-state change.
+	cancelPendingOpen(event: MouseEvent | PointerEvent) {
+		this.state.floatingRootContext.dispatchOpenChange(
+			false,
+			createChangeEventDetails(REASONS.triggerPress, event),
+		);
+	}
+}
+
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no `Tooltip.Root`
+ * is attached. It preserves a tooltip-specific trigger registry in context so detached triggers can
+ * register before migrating to the live root store. `setOpen`/`cancelPendingOpen` are no-ops
+ * (matching the inert reads/writes of `NullStore`), so a trigger can call them from hover/click
+ * handlers while detached without any effect.
+ */
+export function createNullTooltipStore<Payload>(): TooltipHandleStore<Payload> {
+	const triggerElements = new PopupTriggerMap();
+
+	const store = new NullStore<Readonly<State<Payload>>, Context, Selectors>(
+		Object.freeze(createInitialState<Payload>(undefined, triggerElements)),
+		Object.freeze(createInitialContext(triggerElements)),
+		selectors,
+	);
+	return Object.assign(store, { setOpen: NOOP, cancelPendingOpen: NOOP });
+}
+
+function createInitialState<Payload>(
+	initialState: Partial<State<Payload>> | undefined,
+	triggerElements: PopupTriggerMap,
+	floatingId?: string | undefined,
+	nested = false,
+): State<Payload> {
+	const state: State<Payload> = {
+		...createInitialPopupStoreState<Payload>(triggerElements, floatingId, nested),
+		disabled: false,
+		instantType: undefined,
+		isInstantPhase: false,
+		trackCursorAxis: 'none',
+		disableHoverablePopup: false,
+		openChangeReason: null,
+		closeOnClick: true,
+		closeDelay: 0,
+		adaptiveOrigin: undefined,
+		...initialState,
+	};
+
+	return state;
+}
+
+function createInitialContext(triggerElements: PopupTriggerMap): Context {
+	return {
+		popupRef: { current: null } as React.RefObject<HTMLElement | null | null>,
+		onOpenChange: undefined,
+		onOpenChangeComplete: undefined,
+		triggerElements,
+	};
+}

package/src/tooltip/trigger/TooltipTrigger.tsrx

@@ -0,0 +1,351 @@
+'use client';
+import type { HTMLProps } from '../../types';
+import * as React from 'octane';
+import { isElement } from '@floating-ui/utils/dom';
+import { fastComponentRef } from '@octanejs/base-ui-utils/fastHooks';
+import { useTimeout } from '@octanejs/base-ui-utils/useTimeout';
+import { useValueAsRef } from '@octanejs/base-ui-utils/useValueAsRef';
+import { useTooltipRootContext } from '../root/TooltipRootContext';
+import type { BaseUIComponentProps, BaseUIEvent } from '../../internals/types';
+import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { usePopupHandleStore, useTriggerDataForwarding } from '../../utils/popups';
+import { useBaseUiId } from '../../internals/useBaseUiId';
+import type { TooltipHandle } from '../store/TooltipHandle';
+import { useTooltipProviderContext } from '../provider/TooltipProviderContext';
+import {
+	safePolygon,
+	useDelayGroup,
+	useFocus,
+	useHoverReferenceInteraction,
+} from '../../floating-ui-react';
+import { contains } from '../../floating-ui-react/utils/element';
+import { isMouseLikePointerType } from '../../floating-ui-react/utils/event';
+import { createChangeEventDetails } from '../../internals/createBaseUIEventDetails';
+import { REASONS } from '../../internals/reasons';
+import { useHoverInteractionSharedState } from '../../floating-ui-react/hooks/useHoverInteractionSharedState';
+import { getDelay } from '../../floating-ui-react/hooks/useHoverShared';
+import * as TooltipTriggerDataAttributes from './TooltipTriggerDataAttributes';
+
+import { OPEN_DELAY } from '../utils/constants';
+
+const TOOLTIP_TRIGGER_IDENTIFIER = 'data-base-ui-tooltip-trigger';
+
+function getTargetElement(event: Event): Element | null {
+	if ('composedPath' in event) {
+		const path = event.composedPath();
+		for (let i = 0; i < path.length; i += 1) {
+			const element = path[i];
+			if (isElement(element)) {
+				return element;
+			}
+		}
+	}
+
+	const target = event.target;
+	if (isElement(target)) {
+		return target;
+	}
+
+	return null;
+}
+
+function closestEnabledTooltipTrigger(element: Element | null): Element | null {
+	let current = element;
+	while (current) {
+		const trigger = current.closest(`[${TOOLTIP_TRIGGER_IDENTIFIER}]`);
+		if (trigger) {
+			return trigger;
+		}
+
+		const root = current.getRootNode();
+		current = 'host' in root && isElement(root.host) ? root.host : null;
+	}
+
+	return null;
+}
+
+/**
+ * An element to attach the tooltip to.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+export const TooltipTrigger = fastComponentRef(function TooltipTrigger(
+	componentProps: TooltipTrigger.Props,
+	forwardedRef: React.Ref<Element>,
+) {
+	const {
+		render,
+		className,
+		style,
+		handle,
+		payload,
+		disabled: disabledProp,
+		delay,
+		closeOnClick = true,
+		closeDelay,
+		id: idProp,
+		...elementProps
+	} = componentProps;
+
+	const rootContext = useTooltipRootContext(true);
+	const handleStore = usePopupHandleStore(handle);
+	const store = handleStore ?? rootContext;
+	if (!store) {
+		throw new Error(
+			'Base UI: <Tooltip.Trigger> must be either used within a <Tooltip.Root> component or provided with a handle.',
+		);
+	}
+
+	const thisTriggerId = useBaseUiId(idProp);
+	const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
+	const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+	const floatingRootContext = store.useState('floatingRootContext');
+
+	const triggerElementRef = React.useRef<Element | null>(null);
+
+	const closeDelayWithDefault = closeDelay ?? 0;
+
+	const { registerTrigger, isMountedByThisTrigger } = useTriggerDataForwarding(
+		thisTriggerId,
+		triggerElementRef,
+		store,
+		{
+			payload,
+			closeOnClick,
+			closeDelay: closeDelayWithDefault,
+		},
+	);
+
+	const providerDelay = useTooltipProviderContext();
+	const { activeIdRef, delayRef, isInstantPhase, hasProvider } = useDelayGroup(
+		floatingRootContext,
+		{
+			open: isOpenedByThisTrigger,
+		},
+	);
+	const hoverInteraction = useHoverInteractionSharedState(floatingRootContext);
+
+	store.useSyncedValue('isInstantPhase', isInstantPhase);
+
+	const rootDisabled = store.useState('disabled');
+	const disabled = disabledProp ?? rootDisabled;
+	const disabledRef = useValueAsRef(disabled);
+	const trackCursorAxis = store.useState('trackCursorAxis');
+	const disableHoverablePopup = store.useState('disableHoverablePopup');
+
+	const isNestedTriggerHoveredRef = React.useRef(false);
+	const nestedTriggerOpenTimeout = useTimeout();
+	// Local copy so it can be cleared on mouseLeave without resetting the hover hook's own pointerType.
+	const pointerTypeRef = React.useRef<string | undefined>(undefined);
+
+	function getOpenDelay() {
+		// Adjacent tooltips open instantly while the group is active.
+		if (hasProvider && activeIdRef.current != null) {
+			return 0;
+		}
+		return delay ?? providerDelay ?? OPEN_DELAY;
+	}
+
+	function isEnabledNestedTriggerTarget(target: Element | null) {
+		const triggerEl = triggerElementRef.current;
+		if (!triggerEl || !target) {
+			return false;
+		}
+
+		const nearestTrigger = closestEnabledTooltipTrigger(target);
+		return (
+			nearestTrigger !== null && nearestTrigger !== triggerEl && contains(triggerEl, nearestTrigger)
+		);
+	}
+
+	function detectNestedTriggerHover(target: Element | null) {
+		const nestedTriggerHovered = isEnabledNestedTriggerTarget(target);
+
+		isNestedTriggerHoveredRef.current = nestedTriggerHovered;
+		if (nestedTriggerHovered) {
+			hoverInteraction.openChangeTimeout.clear();
+			hoverInteraction.restTimeout.clear();
+			hoverInteraction.restTimeoutPending = false;
+			nestedTriggerOpenTimeout.clear();
+		}
+		return nestedTriggerHovered;
+	}
+
+	const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
+		enabled: !disabled,
+		mouseOnly: true,
+		move: false,
+		handleClose: !disableHoverablePopup && trackCursorAxis !== 'both' ? safePolygon() : null,
+		restMs: getOpenDelay,
+		delay() {
+			if (closeDelay == null && hasProvider) {
+				return { close: getDelay(delayRef.current, 'close') };
+			}
+			return { close: closeDelayWithDefault };
+		},
+		triggerElementRef,
+		isActiveTrigger: isTriggerActive,
+		isClosing: () => store.select('transitionStatus') === 'ending',
+		shouldOpen() {
+			return !isNestedTriggerHoveredRef.current;
+		},
+	});
+
+	const focusProps = useFocus(floatingRootContext, { enabled: !disabled }).reference;
+
+	const handleNestedTriggerHover = (event: MouseEvent) => {
+		const wasNestedTriggerHovered = isNestedTriggerHoveredRef.current;
+		const target = getTargetElement(event);
+		const nestedTriggerHovered = detectNestedTriggerHover(target);
+		const triggerEl = triggerElementRef.current as HTMLElement | null;
+		const targetInsideTrigger = triggerEl && target && contains(triggerEl, target);
+
+		// Only close hover-opened parents. Focus/click-like opens remain owned by
+		// their original interaction and should not be clobbered by nested hover.
+		if (
+			nestedTriggerHovered &&
+			store.select('open') &&
+			store.select('lastOpenChangeReason') === REASONS.triggerHover
+		) {
+			store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+			return;
+		}
+
+		if (
+			wasNestedTriggerHovered &&
+			!nestedTriggerHovered &&
+			targetInsideTrigger &&
+			!disabledRef.current &&
+			!store.select('open') &&
+			triggerEl &&
+			// Match the hover hook's non-strict mouse fallback for mouse-only event sequences.
+			isMouseLikePointerType(pointerTypeRef.current)
+		) {
+			const open = () => {
+				if (!isNestedTriggerHoveredRef.current && !disabledRef.current && !store.select('open')) {
+					store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerEl));
+				}
+			};
+
+			const openDelay = getOpenDelay();
+
+			// With `move: false`, the hover hook only listens to mouseenter/mouseleave
+			// on the parent trigger. Leaving a nested child for the parent area fires
+			// no event the hook can react to, so reopen locally.
+			if (openDelay === 0) {
+				nestedTriggerOpenTimeout.clear();
+				open();
+			} else {
+				nestedTriggerOpenTimeout.start(openDelay, open);
+			}
+		}
+	};
+
+	const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+	const shouldApplyRootTriggerProps = isMountedByThisTrigger || trackCursorAxis !== 'none';
+
+	const state: TooltipTriggerState = { open: isOpenedByThisTrigger };
+
+	const element = useRenderElement('button', componentProps, {
+		state,
+		ref: [forwardedRef, registerTrigger, triggerElementRef],
+		props: [
+			hoverProps,
+			focusProps,
+			shouldApplyRootTriggerProps ? rootTriggerProps : undefined,
+			{
+				onMouseOver(event: React.MouseEvent) {
+					handleNestedTriggerHover(event);
+				},
+				onFocus(event: React.FocusEvent) {
+					if (isEnabledNestedTriggerTarget(getTargetElement(event))) {
+						(event as BaseUIEvent<React.FocusEvent<Element>>).preventBaseUIHandler();
+					}
+				},
+				onMouseLeave() {
+					isNestedTriggerHoveredRef.current = false;
+					nestedTriggerOpenTimeout.clear();
+					pointerTypeRef.current = undefined;
+				},
+				onPointerEnter(event: React.PointerEvent) {
+					pointerTypeRef.current = event.pointerType;
+				},
+				onPointerDown(event: React.PointerEvent) {
+					pointerTypeRef.current = event.pointerType;
+					store.set('closeOnClick', closeOnClick);
+					if (closeOnClick && !store.select('open')) {
+						store.cancelPendingOpen(event);
+					}
+				},
+				onClick(event) {
+					if (closeOnClick && !store.select('open')) {
+						store.cancelPendingOpen(event);
+					}
+				},
+				id: thisTriggerId,
+				[TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined,
+				[TOOLTIP_TRIGGER_IDENTIFIER]: disabled ? undefined : '',
+			} as HTMLProps<Element>,
+			elementProps,
+		],
+		stateAttributesMapping: triggerOpenStateMapping,
+	});
+
+	return element;
+}) as TooltipTrigger;
+
+export interface TooltipTrigger {
+	<Payload>(
+		componentProps: TooltipTrigger.Props<Payload> & React.RefAttributes<HTMLElement>,
+	): React.ReactElement;
+}
+
+export interface TooltipTriggerState {
+	/**
+	 * Whether the tooltip is currently open and was opened by this trigger.
+	 */
+	open: boolean;
+}
+
+export interface TooltipTriggerProps<Payload = unknown> extends BaseUIComponentProps<
+	'button',
+	TooltipTriggerState
+> {
+	/**
+	 * A handle to associate the trigger with a tooltip.
+	 */
+	handle?: TooltipHandle<Payload> | undefined;
+	/**
+	 * A payload to pass to the tooltip when it is opened.
+	 */
+	payload?: Payload | undefined;
+	/**
+	 * How long to wait before opening the tooltip on hover. Specified in milliseconds.
+	 * @default 600
+	 */
+	delay?: number | undefined;
+	/**
+	 * Whether the tooltip should close when this trigger is clicked.
+	 * @default true
+	 */
+	closeOnClick?: boolean | undefined;
+	/**
+	 * How long to wait before closing the tooltip. Specified in milliseconds.
+	 * @default 0
+	 */
+	closeDelay?: number | undefined;
+	/**
+	 * If `true`, the tooltip will not open when interacting with this trigger.
+	 * Note that this doesn't apply the `disabled` attribute to the trigger element.
+	 * If you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop.
+	 * @default false
+	 */
+	disabled?: boolean | undefined;
+}
+
+export namespace TooltipTrigger {
+	export type State = TooltipTriggerState;
+	export type Props<Payload = unknown> = TooltipTriggerProps<Payload>;
+}

package/src/tooltip/trigger/TooltipTriggerDataAttributes.ts

@@ -0,0 +1,10 @@
+import { CommonTriggerDataAttributes } from '../../utils/popupStateMapping';
+
+/**
+ * Present when the corresponding tooltip is open.
+ */
+export const popupOpen = CommonTriggerDataAttributes.popupOpen;
+/**
+ * Present when the trigger is disabled, either by the `disabled` prop or by a parent `<Tooltip.Root>` component.
+ */
+export const triggerDisabled = 'data-trigger-disabled';

package/src/tooltip/utils/constants.ts

@@ -0,0 +1 @@
+export const OPEN_DELAY = 600;

package/src/tooltip/viewport/TooltipViewport.tsrx

@@ -0,0 +1,75 @@
+'use client';
+import type * as React from 'octane';
+import { useTooltipRootContext } from '../root/TooltipRootContext';
+import { useTooltipPositionerContext } from '../positioner/TooltipPositionerContext';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { popupViewportStateMapping, usePopupViewport } from '../../utils/usePopupViewport.tsrx';
+
+/**
+ * A viewport for displaying content transitions.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+export const TooltipViewport = function TooltipViewport(
+	componentPropsWithRef: React.PropsWithoutRef<TooltipViewport.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, children, ...elementProps } = componentProps;
+
+	const store = useTooltipRootContext();
+	const positioner = useTooltipPositionerContext();
+
+	const instantType = store.useState('instantType');
+
+	const { children: childrenToRender, state: viewportState } = usePopupViewport({
+		store,
+		side: positioner.side,
+		children,
+	});
+
+	const state: TooltipViewportState = {
+		activationDirection: viewportState.activationDirection,
+		transitioning: viewportState.transitioning,
+		instant: instantType,
+	};
+
+	return useRenderElement('div', componentProps, {
+		state,
+		ref: forwardedRef,
+		props: [elementProps, { children: childrenToRender }],
+		stateAttributesMapping: popupViewportStateMapping,
+	});
+};
+
+export interface TooltipViewportState {
+	/**
+	 * The activation direction of the transitioned content.
+	 */
+	activationDirection: string | undefined;
+	/**
+	 * Whether the viewport is currently transitioning between contents.
+	 */
+	transitioning: boolean;
+	/**
+	 * Present if animations should be instant.
+	 */
+	instant: 'delay' | 'dismiss' | 'focus' | undefined;
+}
+
+export interface TooltipViewportProps extends BaseUIComponentProps<'div', TooltipViewportState> {
+	/**
+	 * The content to render inside the transition container.
+	 */
+	children?: React.OctaneNode;
+}
+
+export namespace TooltipViewport {
+	export type Props = TooltipViewportProps;
+	export type State = TooltipViewportState;
+}

package/src/tooltip/viewport/TooltipViewportCssVars.ts

@@ -0,0 +1,12 @@
+/**
+ * The width of the parent popup.
+ * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+ * It can be used to freeze the dimensions of the popup when animating between different content.
+ */
+export const popupWidth = '--popup-width';
+/**
+ * The height of the parent popup.
+ * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+ * It can be used to freeze the dimensions of the popup when animating between different content.
+ */
+export const popupHeight = '--popup-height';

package/src/tooltip/viewport/TooltipViewportDataAttributes.ts

@@ -0,0 +1,24 @@
+/**
+ * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+ */
+export const current = 'data-current';
+/**
+ * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+ */
+export const previous = 'data-previous';
+/**
+ * Indicates the direction from which the popup was activated.
+ * This can be used to create directional animations based on how the popup was triggered.
+ * Contains space-separated values for both horizontal and vertical axes.
+ * @type {`${'left' | 'right' | ''} ${'down' | 'up' | ''}`}
+ */
+export const activationDirection = 'data-activation-direction';
+/**
+ * Indicates that the viewport is currently transitioning between old and new content.
+ */
+export const transitioning = 'data-transitioning';
+/**
+ * Present if animations should be instant.
+ * @type {'delay' | 'dismiss' | 'focus'}
+ */
+export const instant = 'data-instant';