ropav 0.2.0 → 0.3.0

package/dist/composables/use-droppable-collection.js

@@ -0,0 +1,422 @@
+import { setInteractionModality } from "./use-interaction-states.js";
+import { useLocale } from "./use-locale.js";
+import { DIRECTORY_DRAG_TYPE } from "../utils/dnd-constants.js";
+import { dragTypesFromSet, getTypes } from "../utils/dnd-data-transfer.js";
+import { registerDropTarget } from "./drag-manager.js";
+import { registerDroppableCollection } from "./droppable-collection-registry.js";
+import { useAutoScroll } from "./use-auto-scroll.js";
+import { clearGlobalDnDState, globalDndState, isInternalDropOperation, setDropCollectionRef } from "../utils/dnd-state.js";
+import { navigateDropTarget } from "../utils/dnd-drop-target-navigation.js";
+import { useDrop } from "./use-drop.js";
+import { computed, onScopeDispose, useId, watch } from "vue";
+//#region src/composables/use-droppable-collection.ts
+/** How long to wait for a drop handler's async work before deciding where focus lands. */
+var FOCUS_AFTER_DROP_DELAY = 50;
+var collectionKeys = (collection) => new Set(collection.getKeys());
+/**
+* Drop behaviour for a whole collection, ported from React Aria's `useDroppableCollection`.
+*
+* Ties the three layers together: `useDrop` for the pointer, the drag session for the keyboard,
+* and the drop state for deciding what is allowed. Most of the length is the keyboard half —
+* a pointer picks a target directly, whereas every arrow key has to search for the next target
+* that would actually accept the drag.
+*/
+var useDroppableCollection = (options, state, element) => {
+	const id = useId();
+	const locale = useLocale();
+	const autoScroll = useAutoScroll(element);
+	registerDroppableCollection(state, {
+		element,
+		id
+	});
+	/** The target the pointer last resolved to, held between `getDropOperationForPoint` and enter. */
+	let nextTarget = null;
+	let dropOperation = null;
+	let droppingState = null;
+	/**
+	* Route a drop to whichever specific handler fits, when the caller gave no `onDrop`.
+	*
+	* The same gesture means different things by target: between items from outside is an insert,
+	* between items from inside is a reorder, onto an item is an item drop.
+	*/
+	const defaultOnDrop = async (event) => {
+		const accepted = options.acceptedDragTypes ?? "all";
+		const { draggingKeys } = globalDndState;
+		const isInternal = isInternalDropOperation(element);
+		const { dropOperation: operation, items, target } = event;
+		let filtered = items;
+		if (accepted !== "all" || options.shouldAcceptItemDrop) filtered = items.filter((item) => {
+			const itemTypes = item.kind === "directory" ? /* @__PURE__ */ new Set([DIRECTORY_DRAG_TYPE]) : item.kind === "file" ? /* @__PURE__ */ new Set([item.type]) : new Set(item.types);
+			if (accepted !== "all" && !accepted.some((type) => itemTypes.has(type))) return false;
+			if (target.type === "item" && target.dropPosition === "on" && options.shouldAcceptItemDrop) return options.shouldAcceptItemDrop(target, { has: (type) => itemTypes.has(type) });
+			return true;
+		});
+		if (filtered.length === 0) return;
+		if (target.type === "root") {
+			await options.onRootDrop?.({
+				dropOperation: operation,
+				items: filtered
+			});
+			return;
+		}
+		if (target.dropPosition === "on") await options.onItemDrop?.({
+			dropOperation: operation,
+			isInternal,
+			items: filtered,
+			target
+		});
+		if (isInternal) await options.onMove?.({
+			dropOperation: operation,
+			keys: draggingKeys,
+			target
+		});
+		if (target.dropPosition !== "on") {
+			if (!isInternal) await options.onInsert?.({
+				dropOperation: operation,
+				items: filtered,
+				target
+			});
+			if (isInternal) await options.onReorder?.({
+				dropOperation: operation,
+				keys: draggingKeys,
+				target
+			});
+		}
+	};
+	/**
+	* Where focus lands once a drop has been applied.
+	*
+	* The collection has usually changed underneath by now, so this compares against what was
+	* recorded at drop time. Inserted items are selected and focused so the user can see what
+	* arrived; a reorder focuses the moved row instead.
+	*/
+	const updateFocusAfterDrop = () => {
+		if (!droppingState) return;
+		const { collectionSize, draggingKeys, focusedKey, hadFocus, isInternal, keys, target } = droppingState;
+		const { selectionManager } = state;
+		const currentKeys = collectionKeys(state.collection);
+		if (currentKeys.size > collectionSize) {
+			const inserted = [...currentKeys].filter((key) => !keys.has(key));
+			if (inserted.length > 0) {
+				selectionManager.setSelectedKeys(inserted);
+				if (selectionManager.focusedKey.value === focusedKey) {
+					selectionManager.setFocusedKey(inserted[0]);
+					if (selectionManager.selectionMode.value === "none") setInteractionModality("keyboard");
+				}
+			}
+		} else if (focusedKey != null && selectionManager.focusedKey.value === focusedKey && isInternal && target.type === "item" && target.dropPosition !== "on" && draggingKeys.has(state.collection.getItem(focusedKey)?.parentKey ?? "")) {
+			selectionManager.setFocusedKey(state.collection.getItem(focusedKey)?.parentKey ?? null);
+			setInteractionModality("keyboard");
+		} else if (selectionManager.focusedKey.value === focusedKey && target.type === "item" && target.dropPosition === "on" && state.collection.getItem(target.key) != null) {
+			selectionManager.setFocusedKey(target.key);
+			setInteractionModality("keyboard");
+		} else if (selectionManager.focusedKey.value != null && !selectionManager.isSelected(selectionManager.focusedKey.value)) setInteractionModality("keyboard");
+		selectionManager.setFocused(true);
+		/**
+		* Put real focus back where the collection just decided it belongs.
+		*
+		* Everything above settles the *focused key*, which moves the roving tab stop but not the
+		* caret. During a keyboard drag the caret is on the drop indicator, and the drop unmounts it
+		* — so without this last step focus falls to the document and a keyboard user is returned to
+		* the page with the collection behind them. `preventFocusOnDrop` tells the drag session to
+		* leave focus to the collection precisely so this can happen here.
+		*
+		* Only when the collection had focus to begin with: a pointer drop from elsewhere on the page
+		* must not steal it.
+		*/
+		const landOn = selectionManager.focusedKey.value;
+		if (!hadFocus || landOn == null) return;
+		const active = document.activeElement;
+		if (element.value && active && element.value.contains(active)) return;
+		options.keyboardDelegate.focusKey?.(landOn);
+	};
+	const applyDrop = (event, target) => {
+		droppingState = {
+			collectionSize: collectionKeys(state.collection).size,
+			draggingKeys: globalDndState.draggingKeys,
+			focusedKey: state.selectionManager.focusedKey.value,
+			hadFocus: Boolean(element.value && document.activeElement && element.value.contains(document.activeElement)),
+			isInternal: isInternalDropOperation(element),
+			keys: collectionKeys(state.collection),
+			selectedKeys: state.selectionManager.selectedKeys.value,
+			target,
+			timeout: void 0
+		};
+		(options.onDrop ?? defaultOnDrop)({
+			dropOperation: event.dropOperation,
+			items: event.items,
+			target,
+			type: "drop",
+			x: event.x,
+			y: event.y
+		});
+		droppingState.timeout = setTimeout(() => {
+			updateFocusAfterDrop();
+			droppingState = null;
+		}, FOCUS_AFTER_DROP_DELAY);
+	};
+	watch(() => collectionKeys(state.collection).size, () => {
+		if (droppingState) updateFocusAfterDrop();
+	});
+	onScopeDispose(() => {
+		if (droppingState?.timeout) clearTimeout(droppingState.timeout);
+	});
+	const drop = useDrop({
+		getDropOperationForPoint(types, allowedOperations, x, y) {
+			const { dropCollectionRef } = globalDndState;
+			const isInternal = isInternalDropOperation(element);
+			const isValid = (candidate) => state.getDropOperation({
+				allowedOperations,
+				draggingKeys: globalDndState.draggingKeys,
+				isInternal,
+				target: candidate,
+				types
+			}) !== "cancel";
+			let target = options.dropTargetDelegate.getDropTargetFromPoint(x, y, isValid);
+			if (!target) {
+				dropOperation = "cancel";
+				nextTarget = null;
+				return "cancel";
+			}
+			dropOperation = state.getDropOperation({
+				allowedOperations,
+				draggingKeys: globalDndState.draggingKeys,
+				isInternal,
+				target,
+				types
+			});
+			if (dropOperation === "cancel") {
+				const rootTarget = { type: "root" };
+				const rootOperation = state.getDropOperation({
+					allowedOperations,
+					draggingKeys: globalDndState.draggingKeys,
+					isInternal,
+					target: rootTarget,
+					types
+				});
+				if (rootOperation !== "cancel") {
+					target = rootTarget;
+					dropOperation = rootOperation;
+				}
+			}
+			if (dropOperation !== "cancel" && element.value !== dropCollectionRef?.value) setDropCollectionRef(element);
+			nextTarget = dropOperation === "cancel" ? null : target;
+			return dropOperation;
+		},
+		onDrop(event) {
+			setDropCollectionRef(element);
+			if (state.target.value) applyDrop(event, state.target.value);
+			if (globalDndState.draggingCollectionRef == null) clearGlobalDnDState();
+		},
+		onDropActivate(event) {
+			if (state.target.value?.type === "item") options.onDropActivate?.({
+				target: state.target.value,
+				type: "dropactivate",
+				x: event.x,
+				y: event.y
+			});
+		},
+		onDropEnter() {
+			if (nextTarget != null) state.setTarget(nextTarget);
+		},
+		onDropExit() {
+			setDropCollectionRef(void 0);
+			state.setTarget(null);
+			autoScroll.stop();
+		},
+		onDropMove(event) {
+			if (nextTarget != null) state.setTarget(nextTarget);
+			autoScroll.move(event.x, event.y);
+		},
+		ref: element
+	});
+	const getNextTarget = (target, wrap = true, key = "down") => navigateDropTarget(options.keyboardDelegate, state.collection, target, key, locale.value.direction === "rtl", wrap);
+	const getPreviousTarget = (target, wrap = true) => getNextTarget(target, wrap, "up");
+	/**
+	* Keep stepping until a target the drag would actually be accepted by.
+	*
+	* Most positions in a collection are invalid for any given drag — dropping an item next to
+	* itself, say — so a single step would often land nowhere useful. The root is counted because
+	* wrapping passes through it, and seeing it twice means the whole collection was searched.
+	*/
+	const nextValidTarget = (target, types, allowedDropOperations, step, wrap = true) => {
+		const isInternal = isInternalDropOperation(element);
+		const dragTypes = dragTypesFromSet(types);
+		let seenRoot = 0;
+		let operation;
+		let candidate = target;
+		do {
+			const stepped = step(candidate, wrap);
+			if (!stepped) return null;
+			candidate = stepped;
+			operation = state.getDropOperation({
+				allowedOperations: allowedDropOperations,
+				draggingKeys: globalDndState.draggingKeys,
+				isInternal,
+				target: stepped,
+				types: dragTypes
+			});
+			if (candidate.type === "root") seenRoot++;
+		} while (operation === "cancel" && !state.isDropTarget(candidate) && seenRoot < 2);
+		return operation === "cancel" ? null : candidate;
+	};
+	/**
+	* Where a keyboard drag starts from when it first enters the collection.
+	*
+	* After the focused item, so the drop lands where the user was already looking. When that item
+	* is part of the selection the anchor moves to the end of it — unless the focus is at the
+	* *start* of a multi-item selection, which reads as an intent to move upwards.
+	*/
+	const defaultEnterTarget = (types, allowedDropOperations) => {
+		const { selectionManager } = state;
+		let key = selectionManager.focusedKey.value;
+		let dropPosition = "after";
+		if (key != null && selectionManager.isSelected(key)) {
+			if (selectionManager.selectedKeys.value.size > 1 && selectionManager.firstSelectedKey.value === key) dropPosition = "before";
+			else key = selectionManager.lastSelectedKey.value;
+		}
+		if (key == null) return nextValidTarget(null, types, allowedDropOperations, getNextTarget);
+		const target = {
+			dropPosition,
+			key,
+			type: "item"
+		};
+		if (state.getDropOperation({
+			allowedOperations: allowedDropOperations,
+			draggingKeys: globalDndState.draggingKeys,
+			isInternal: isInternalDropOperation(element),
+			target,
+			types: dragTypesFromSet(types)
+		}) !== "cancel") return target;
+		return nextValidTarget(target, types, allowedDropOperations, getNextTarget, false) ?? nextValidTarget(target, types, allowedDropOperations, getPreviousTarget, false);
+	};
+	/** A page's worth of movement, which has to clamp at both ends rather than stop dead. */
+	const pageTarget = (direction, types, allowedDropOperations) => {
+		const { keyboardDelegate } = options;
+		let target = state.target.value;
+		if (!target) return nextValidTarget(null, types, allowedDropOperations, direction === "down" ? getNextTarget : getPreviousTarget);
+		if (direction === "up" && target.type === "item") {
+			if (target.key === keyboardDelegate.getFirstKey?.()) return { type: "root" };
+			let nextKey = keyboardDelegate.getKeyPageAbove?.(target.key) ?? null;
+			let dropPosition = target.dropPosition;
+			if (nextKey == null) {
+				nextKey = keyboardDelegate.getFirstKey?.() ?? null;
+				dropPosition = "before";
+			}
+			if (nextKey == null) return null;
+			target = {
+				dropPosition,
+				key: nextKey,
+				type: "item"
+			};
+		} else if (direction === "down") {
+			const startKey = target.type === "item" ? target.key : keyboardDelegate.getFirstKey?.();
+			let nextKey = startKey != null ? keyboardDelegate.getKeyPageBelow?.(startKey) ?? null : null;
+			let dropPosition = target.type === "item" ? target.dropPosition : "after";
+			if (nextKey == null || target.type === "item" && target.key === keyboardDelegate.getLastKey?.()) {
+				nextKey = keyboardDelegate.getLastKey?.() ?? null;
+				dropPosition = "after";
+			}
+			if (nextKey == null) return null;
+			target = {
+				dropPosition,
+				key: nextKey,
+				type: "item"
+			};
+		}
+		if (state.getDropOperation({
+			allowedOperations: allowedDropOperations,
+			draggingKeys: globalDndState.draggingKeys,
+			isInternal: isInternalDropOperation(element),
+			target,
+			types: dragTypesFromSet(types)
+		}) !== "cancel") return target;
+		const forwards = direction === "down" ? getNextTarget : getPreviousTarget;
+		const backwards = direction === "down" ? getPreviousTarget : getNextTarget;
+		return nextValidTarget(target, types, allowedDropOperations, forwards, false) ?? nextValidTarget(target, types, allowedDropOperations, backwards, false);
+	};
+	watch([element, () => locale.value.direction], ([node], _previous, onCleanup) => {
+		if (!node) return;
+		onCleanup(registerDropTarget({
+			element: node,
+			getDropOperation(types, allowedOperations) {
+				const dragTypes = dragTypesFromSet(types);
+				if (state.target.value) return state.getDropOperation({
+					allowedOperations,
+					draggingKeys: globalDndState.draggingKeys,
+					isInternal: isInternalDropOperation(element),
+					target: state.target.value,
+					types: dragTypes
+				});
+				return nextValidTarget(null, types, allowedOperations, getNextTarget) ? "move" : "cancel";
+			},
+			onDrop(event, target) {
+				setDropCollectionRef(element);
+				if (state.target.value) applyDrop(event, target ?? state.target.value);
+			},
+			onDropActivate(event, target) {
+				if (target?.type === "item" && target.dropPosition === "on") options.onDropActivate?.({
+					target,
+					type: "dropactivate",
+					x: event.x,
+					y: event.y
+				});
+			},
+			onDropEnter(_event, drag) {
+				setDropCollectionRef(element);
+				state.setTarget(defaultEnterTarget(getTypes(drag.items), drag.allowedDropOperations));
+			},
+			onDropExit() {
+				setDropCollectionRef(void 0);
+				state.setTarget(null);
+			},
+			onDropTargetEnter(target) {
+				state.setTarget(target);
+			},
+			onKeyDown(event, drag) {
+				const { keyboardDelegate } = options;
+				const types = getTypes(drag.items);
+				const allowed = drag.allowedDropOperations;
+				const arrow = (key, available) => {
+					if (!available) return;
+					state.setTarget(nextValidTarget(state.target.value, types, allowed, (target, wrap) => getNextTarget(target, wrap, key)));
+				};
+				switch (event.key) {
+					case "ArrowDown":
+						arrow("down", keyboardDelegate.getKeyBelow);
+						break;
+					case "ArrowUp":
+						arrow("up", keyboardDelegate.getKeyAbove);
+						break;
+					case "ArrowLeft":
+						arrow("left", keyboardDelegate.getKeyLeftOf);
+						break;
+					case "ArrowRight":
+						arrow("right", keyboardDelegate.getKeyRightOf);
+						break;
+					case "Home":
+						if (keyboardDelegate.getFirstKey) state.setTarget(nextValidTarget(null, types, allowed, getNextTarget));
+						break;
+					case "End":
+						if (keyboardDelegate.getLastKey) state.setTarget(nextValidTarget(null, types, allowed, getPreviousTarget));
+						break;
+					case "PageDown":
+						if (keyboardDelegate.getKeyPageBelow) state.setTarget(pageTarget("down", types, allowed) ?? state.target.value);
+						break;
+					case "PageUp": if (keyboardDelegate.getKeyPageAbove) state.setTarget(pageTarget("up", types, allowed) ?? state.target.value);
+				}
+				options.onKeyDown?.(event);
+			},
+			preventFocusOnDrop: true
+		}));
+	}, { immediate: true });
+	return {
+		attrs: computed(() => ({
+			"aria-describedby": void 0,
+			id
+		})),
+		handlers: drop.handlers
+	};
+};
+//#endregion
+export { useDroppableCollection };

package/dist/composables/use-droppable-item.d.ts

@@ -0,0 +1,27 @@
+import type { DropTarget } from "../utils/dnd-types";
+import type { UseDroppableCollectionStateReturn } from "./use-droppable-collection-state";
+import type { ComputedRef, ShallowRef } from "vue";
+export interface UseDroppableItemOptions {
+    /** The position within the collection this element stands for. */
+    target: DropTarget;
+    /** A control that opens the target without dropping — a tree row's disclosure, say. */
+    activateButtonRef?: ShallowRef<HTMLElement | null>;
+}
+export interface UseDroppableItemReturn {
+    attrs: ComputedRef<{
+        "aria-describedby"?: string;
+        "aria-hidden"?: "true";
+    }>;
+    handlers: {
+        onClick: () => void;
+    };
+    isDropTarget: ComputedRef<boolean>;
+}
+/**
+ * Drop behaviour for one item of a collection, ported from React Aria's `useDroppableItem`.
+ *
+ * Registers the item with the keyboard drag session so Tab can reach it, and hides it from
+ * assistive technology while a drag it cannot accept is in flight — otherwise a screen reader
+ * user would tab through targets that will refuse them.
+ */
+export declare const useDroppableItem: (options: UseDroppableItemOptions, state: UseDroppableCollectionStateReturn<unknown>, element: ShallowRef<HTMLElement | null>) => UseDroppableItemReturn;

package/dist/composables/use-droppable-item.js

@@ -0,0 +1,60 @@
+import { getTypes } from "../utils/dnd-data-transfer.js";
+import { registerDropItem, useDragSession } from "./drag-manager.js";
+import { getDroppableCollectionElement } from "./droppable-collection-registry.js";
+import { globalDndState, isInternalDropOperation } from "../utils/dnd-state.js";
+import { useVirtualDrop } from "./use-virtual-drop.js";
+import { computed, watch } from "vue";
+//#region src/composables/use-droppable-item.ts
+/**
+* Drop behaviour for one item of a collection, ported from React Aria's `useDroppableItem`.
+*
+* Registers the item with the keyboard drag session so Tab can reach it, and hides it from
+* assistive technology while a drag it cannot accept is in flight — otherwise a screen reader
+* user would tab through targets that will refuse them.
+*/
+var useDroppableItem = (options, state, element) => {
+	const virtual = useVirtualDrop();
+	const session = useDragSession();
+	const collectionElement = getDroppableCollectionElement(state);
+	watch([element, () => options.target], ([node], _previous, onCleanup) => {
+		if (!node) return;
+		onCleanup(registerDropItem({
+			activateButtonRef: options.activateButtonRef,
+			element: node,
+			getDropOperation: (types, allowedOperations) => state.getDropOperation({
+				allowedOperations,
+				draggingKeys: globalDndState.draggingKeys,
+				isInternal: isInternalDropOperation(collectionElement),
+				target: options.target,
+				types: { has: (type) => types.has(type) }
+			}),
+			target: options.target
+		}));
+	}, { immediate: true });
+	/** Whether the drag in flight could actually land here. */
+	const isValidDropTarget = computed(() => {
+		const dragSession = session.value;
+		if (!dragSession) return false;
+		return state.getDropOperation({
+			allowedOperations: dragSession.dragTarget.allowedDropOperations,
+			draggingKeys: globalDndState.draggingKeys,
+			isInternal: isInternalDropOperation(collectionElement),
+			target: options.target,
+			types: { has: (type) => getTypes(dragSession.dragTarget.items).has(type) }
+		}) !== "cancel";
+	});
+	const isDropTarget = computed(() => state.isDropTarget(options.target));
+	watch([isDropTarget, session], ([isTarget, dragSession]) => {
+		if (isTarget && dragSession) element.value?.focus();
+	});
+	return {
+		attrs: computed(() => ({
+			...virtual.attrs.value,
+			...session.value && !isValidDropTarget.value ? { "aria-hidden": "true" } : {}
+		})),
+		handlers: virtual.handlers,
+		isDropTarget
+	};
+};
+//#endregion
+export { useDroppableItem };

package/dist/composables/use-enter-exit.d.ts

@@ -0,0 +1,47 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseEnterExitOptions {
+    /** The animated element. */
+    elementRef: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /** Whether the element should be present. */
+    isOpen: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether the element is ready to animate in. An overlay is not: it has to be measured and
+     * positioned first, and animating from where it was laid out would be a slide from the wrong
+     * place.
+     *
+     * @default true
+     */
+    isReady?: MaybeRefOrGetter<boolean | undefined>;
+}
+export interface UseEnterExitReturn {
+    /** Whether the element should be in the DOM: open, or still animating out. */
+    isPresent: ComputedRef<boolean>;
+    /** Render as `data-entering`, which the stylesheet keys the entry animation on. */
+    isEntering: ComputedRef<boolean>;
+    /** Render as `data-exiting`. */
+    isExiting: ComputedRef<boolean>;
+}
+/**
+ * Keep an element mounted until its exit animation has finished, ported from React Aria's
+ * `useEnterAnimation` and `useExitAnimation`.
+ *
+ * An exit animation is a contradiction on its own terms: the element has to be gone, and it has
+ * to still be there to animate. This resolves it by keeping the element present through the
+ * animation and reporting the state as `data-exiting` while it runs, then unmounting.
+ *
+ * The animations are read off the element rather than timed, so the duration lives in the
+ * stylesheet — the one place that knows it — and no number here can fall out of step with it.
+ *
+ * jsdom implements no animations at all, so there the states resolve immediately and the exit is
+ * instant. Both animations are covered in the browser suites instead.
+ *
+ * @example
+ * ```ts
+ * const {isEntering, isExiting, isPresent} = useEnterExit({
+ *   elementRef: popoverElement,
+ *   isOpen: () => state.isOpen.value,
+ *   isReady: () => placement.value !== null,
+ * });
+ * ```
+ */
+export declare const useEnterExit: (options: UseEnterExitOptions) => UseEnterExitReturn;

package/dist/composables/use-enter-exit.js

@@ -0,0 +1,114 @@
+import { computed, nextTick, onScopeDispose, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-enter-exit.ts
+/**
+* Keep an element mounted until its exit animation has finished, ported from React Aria's
+* `useEnterAnimation` and `useExitAnimation`.
+*
+* An exit animation is a contradiction on its own terms: the element has to be gone, and it has
+* to still be there to animate. This resolves it by keeping the element present through the
+* animation and reporting the state as `data-exiting` while it runs, then unmounting.
+*
+* The animations are read off the element rather than timed, so the duration lives in the
+* stylesheet — the one place that knows it — and no number here can fall out of step with it.
+*
+* jsdom implements no animations at all, so there the states resolve immediately and the exit is
+* instant. Both animations are covered in the browser suites instead.
+*
+* @example
+* ```ts
+* const {isEntering, isExiting, isPresent} = useEnterExit({
+*   elementRef: popoverElement,
+*   isOpen: () => state.isOpen.value,
+*   isReady: () => placement.value !== null,
+* });
+* ```
+*/
+var useEnterExit = (options) => {
+	const entering = shallowRef(true);
+	const exitState = shallowRef(toValue(options.isOpen) ? "open" : "closed");
+	const getElement = () => toValue(options.elementRef) ?? null;
+	const isReady = computed(() => toValue(options.isReady) ?? true);
+	const isEntering = computed(() => entering.value && isReady.value);
+	const isExiting = computed(() => exitState.value === "exiting");
+	let cancelled = false;
+	/**
+	* The latest wait of each phase, so a superseded one cannot resolve over the top of it.
+	*
+	* One counter per phase rather than one shared: entry and exit are waited for independently, and
+	* a single counter meant an exit beginning while the entry was still animating invalidated that
+	* entry's wait for good. Nothing ever cleared the entry state after that, and the element stayed
+	* at the first frame of its entry animation — scaled down and fully transparent, so an overlay
+	* closed and reopened quickly became invisible until it was destroyed.
+	*/
+	const generations = {
+		entering: 0,
+		exiting: 0
+	};
+	/**
+	* Resolve once every animation running on the element has settled.
+	*
+	* The animations are read a tick after being asked for, not straight away: the state that
+	* triggers them is rendered as an attribute, and reading before that attribute is in the DOM
+	* finds no animations at all — which would clear the state again and leave the animation never
+	* playing.
+	*/
+	const whenSettled = (phase, onEnd) => {
+		const current = ++generations[phase];
+		nextTick(() => {
+			if (cancelled || current !== generations[phase]) return;
+			const element = getElement();
+			if (!element || typeof element.getAnimations !== "function") {
+				onEnd();
+				return;
+			}
+			const animations = element.getAnimations();
+			if (animations.length === 0) {
+				onEnd();
+				return;
+			}
+			Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+				if (!cancelled && current === generations[phase]) onEnd();
+			});
+		});
+	};
+	watch([isEntering, () => getElement()], ([active]) => {
+		if (!active) return;
+		const element = getElement();
+		if (element && typeof element.getAnimations === "function") {
+			for (const animation of element.getAnimations()) if (typeof CSSTransition !== "undefined" && animation instanceof CSSTransition) animation.cancel();
+		}
+		whenSettled("entering", () => {
+			entering.value = false;
+		});
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch(() => toValue(options.isOpen), (isOpen) => {
+		if (isOpen) {
+			exitState.value = "open";
+			entering.value = true;
+			return;
+		}
+		if (exitState.value === "open") exitState.value = "exiting";
+	}, { flush: "sync" });
+	watch([isExiting, () => getElement()], ([active]) => {
+		if (!active) return;
+		whenSettled("exiting", () => {
+			if (exitState.value === "exiting") exitState.value = "closed";
+		});
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onScopeDispose(() => {
+		cancelled = true;
+	}, true);
+	return {
+		isEntering,
+		isExiting,
+		isPresent: computed(() => toValue(options.isOpen) || isExiting.value)
+	};
+};
+//#endregion
+export { useEnterExit };