ropav 0.2.0 → 0.3.0

package/dist/composables/use-disclosure-group.d.ts

@@ -0,0 +1,51 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export type DisclosureKey = string | number;
+export interface UseDisclosureGroupOptions {
+    /** Whether more than one item can be expanded at a time. */
+    allowsMultipleExpanded?: MaybeRefOrGetter<boolean | undefined>;
+    /** Expanded keys in uncontrolled mode. */
+    defaultExpandedKeys?: Iterable<DisclosureKey>;
+    /** Expanded keys in controlled mode. */
+    expandedKeys?: MaybeRefOrGetter<Iterable<DisclosureKey> | undefined>;
+    /** Whether the whole group is disabled. */
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Called with the next expanded key set whenever it changes. */
+    onExpandedChange?: (keys: Set<DisclosureKey>) => void;
+}
+export interface UseDisclosureGroupReturn {
+    /** Currently expanded keys. */
+    expandedKeys: ComputedRef<Set<DisclosureKey>>;
+    /** Whether more than one item can be expanded at a time. */
+    allowsMultipleExpanded: ComputedRef<boolean>;
+    /** Whether the whole group is disabled. */
+    isDisabled: ComputedRef<boolean>;
+    /** Whether a given item is expanded. */
+    isExpanded: (key: DisclosureKey) => boolean;
+    /** Expand an item. No-op while the group is disabled. */
+    expand: (key: DisclosureKey) => void;
+    /** Collapse an item. No-op while the group is disabled. */
+    collapse: (key: DisclosureKey) => void;
+    /** Toggle an item. No-op while the group is disabled. */
+    toggle: (key: DisclosureKey) => void;
+    /** Register a trigger element for keyboard navigation. Returns its cleanup. */
+    registerTrigger: (key: DisclosureKey, element: HTMLElement) => () => void;
+    /** `keydown` handler for a trigger. Moves focus on Arrow/Home/End. */
+    onTriggerKeydown: (event: KeyboardEvent) => void;
+}
+/**
+ * Expanded-key state and trigger keyboard navigation for a group of disclosures.
+ *
+ * Backs the Accordion. Supports single and multiple expansion, controlled and
+ * uncontrolled use, and Arrow/Home/End focus movement between triggers. Every trigger
+ * stays tabbable — the accordion pattern does not use roving tabindex.
+ *
+ * @example
+ * ```ts
+ * const group = useDisclosureGroup({
+ *   allowsMultipleExpanded: () => props.allowsMultipleExpanded,
+ *   expandedKeys: () => props.expandedKeys,
+ *   onExpandedChange: (keys) => emit("expandedChange", keys),
+ * });
+ * ```
+ */
+export declare const useDisclosureGroup: (options?: UseDisclosureGroupOptions) => UseDisclosureGroupReturn;

package/dist/composables/use-disclosure-group.js

@@ -0,0 +1,103 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { computed, toValue } from "vue";
+//#region src/composables/use-disclosure-group.ts
+/** Keys that move focus between triggers, per the WAI-ARIA Accordion pattern. */
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"Home",
+	"End"
+]);
+/**
+* Expanded-key state and trigger keyboard navigation for a group of disclosures.
+*
+* Backs the Accordion. Supports single and multiple expansion, controlled and
+* uncontrolled use, and Arrow/Home/End focus movement between triggers. Every trigger
+* stays tabbable — the accordion pattern does not use roving tabindex.
+*
+* @example
+* ```ts
+* const group = useDisclosureGroup({
+*   allowsMultipleExpanded: () => props.allowsMultipleExpanded,
+*   expandedKeys: () => props.expandedKeys,
+*   onExpandedChange: (keys) => emit("expandedChange", keys),
+* });
+* ```
+*/
+var useDisclosureGroup = (options = {}) => {
+	const allowsMultipleExpanded = computed(() => toValue(options.allowsMultipleExpanded) ?? false);
+	const isDisabled = computed(() => toValue(options.isDisabled) ?? false);
+	const { setState, state } = useControllableState({
+		defaultValue: new Set(options.defaultExpandedKeys ?? []),
+		onValueChange: options.onExpandedChange,
+		value: () => {
+			const keys = toValue(options.expandedKeys);
+			return keys === void 0 ? void 0 : new Set(keys);
+		}
+	});
+	const triggers = /* @__PURE__ */ new Map();
+	const isExpanded = (key) => state.value.has(key);
+	const expand = (key) => {
+		if (isDisabled.value || isExpanded(key)) return;
+		setState((previous) => new Set(allowsMultipleExpanded.value ? [...previous, key] : [key]));
+	};
+	const collapse = (key) => {
+		if (isDisabled.value || !isExpanded(key)) return;
+		setState((previous) => {
+			const next = new Set(previous);
+			next.delete(key);
+			return next;
+		});
+	};
+	const toggle = (key) => {
+		if (isExpanded(key)) collapse(key);
+		else expand(key);
+	};
+	const registerTrigger = (key, element) => {
+		triggers.set(key, element);
+		return () => {
+			if (triggers.get(key) === element) triggers.delete(key);
+		};
+	};
+	/**
+	* Registered triggers in document order. Registration order is not reliable —
+	* items can mount out of order — so position is resolved from the DOM itself.
+	*/
+	const orderedTriggers = () => [...triggers.values()].filter((element) => element.isConnected && !element.hasAttribute("disabled")).sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+	const onTriggerKeydown = (event) => {
+		if (!NAVIGATION_KEYS.has(event.key)) return;
+		const current = event.currentTarget;
+		if (!(current instanceof HTMLElement)) return;
+		const elements = orderedTriggers();
+		const index = elements.indexOf(current);
+		if (index === -1) return;
+		event.preventDefault();
+		let nextIndex;
+		switch (event.key) {
+			case "ArrowDown":
+				nextIndex = Math.min(index + 1, elements.length - 1);
+				break;
+			case "ArrowUp":
+				nextIndex = Math.max(index - 1, 0);
+				break;
+			case "Home":
+				nextIndex = 0;
+				break;
+			default: nextIndex = elements.length - 1;
+		}
+		elements[nextIndex]?.focus();
+	};
+	return {
+		allowsMultipleExpanded,
+		collapse,
+		expand,
+		expandedKeys: computed(() => state.value),
+		isDisabled,
+		isExpanded,
+		onTriggerKeydown,
+		registerTrigger,
+		toggle
+	};
+};
+//#endregion
+export { useDisclosureGroup };

package/dist/composables/use-disclosure-panel.d.ts

@@ -0,0 +1,29 @@
+import type { MaybeRefOrGetter } from "vue";
+export interface UseDisclosurePanelOptions {
+    /** Whether the panel is currently expanded. */
+    isExpanded: MaybeRefOrGetter<boolean>;
+}
+export interface UseDisclosurePanelReturn {
+    /** Template ref callback for the panel element. */
+    setPanelElement: (element: unknown) => void;
+}
+/**
+ * Drives the collapse of a panel that always stays in the DOM.
+ *
+ * The stylesheet animates `height: var(--disclosure-panel-height)` with `opacity` going to `1`
+ * only on `[data-expanded="true"]`, and nothing in CSS ever writes that variable — the height
+ * animation is a JS contract. This owns both halves of it: the variables the stylesheet reads,
+ * and the `hidden` attribute that keeps a collapsed panel out of the tab order and the
+ * accessibility tree.
+ *
+ * `hidden="until-found"` rather than plain `hidden`, so find-in-page can still reveal collapsed
+ * content. The browser drops the attribute itself when it does, so a caller wanting state to
+ * follow needs a `beforematch` listener of its own.
+ *
+ * @example
+ * ```ts
+ * const {setPanelElement} = useDisclosurePanel({isExpanded});
+ * // <div :ref="setPanelElement" :data-expanded="dataAttr(isExpanded)">
+ * ```
+ */
+export declare const useDisclosurePanel: (options: UseDisclosurePanelOptions) => UseDisclosurePanelReturn;

package/dist/composables/use-disclosure-panel.js

@@ -0,0 +1,68 @@
+import { shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-disclosure-panel.ts
+/**
+* Drives the collapse of a panel that always stays in the DOM.
+*
+* The stylesheet animates `height: var(--disclosure-panel-height)` with `opacity` going to `1`
+* only on `[data-expanded="true"]`, and nothing in CSS ever writes that variable — the height
+* animation is a JS contract. This owns both halves of it: the variables the stylesheet reads,
+* and the `hidden` attribute that keeps a collapsed panel out of the tab order and the
+* accessibility tree.
+*
+* `hidden="until-found"` rather than plain `hidden`, so find-in-page can still reveal collapsed
+* content. The browser drops the attribute itself when it does, so a caller wanting state to
+* follow needs a `beforematch` listener of its own.
+*
+* @example
+* ```ts
+* const {setPanelElement} = useDisclosurePanel({isExpanded});
+* // <div :ref="setPanelElement" :data-expanded="dataAttr(isExpanded)">
+* ```
+*/
+var useDisclosurePanel = (options) => {
+	const panelEl = shallowRef(null);
+	const setPanelElement = (element) => {
+		panelEl.value = element instanceof HTMLElement ? element : null;
+	};
+	/**
+	* `null` until the first pass has run, which is how the initial state is applied
+	* without animating open on mount.
+	*/
+	let wasExpanded = null;
+	const setSize = (panel, width, height) => {
+		panel.style.setProperty("--disclosure-panel-width", width);
+		panel.style.setProperty("--disclosure-panel-height", height);
+	};
+	const applyPanelState = (panel, expanded) => {
+		if (wasExpanded === null || !(typeof panel.getAnimations === "function")) {
+			if (expanded) {
+				panel.removeAttribute("hidden");
+				setSize(panel, "auto", "auto");
+			} else {
+				panel.setAttribute("hidden", "until-found");
+				setSize(panel, "0px", "0px");
+			}
+		} else if (expanded !== wasExpanded) {
+			if (expanded) {
+				panel.removeAttribute("hidden");
+				setSize(panel, `${panel.scrollWidth}px`, `${panel.scrollHeight}px`);
+				Promise.all(panel.getAnimations().map((animation) => animation.finished)).then(() => setSize(panel, "auto", "auto")).catch(() => {});
+			} else {
+				setSize(panel, `${panel.scrollWidth}px`, `${panel.scrollHeight}px`);
+				window.getComputedStyle(panel).height;
+				setSize(panel, "0px", "0px");
+				Promise.all(panel.getAnimations().map((animation) => animation.finished)).then(() => panel.setAttribute("hidden", "until-found")).catch(() => {});
+			}
+		}
+		wasExpanded = expanded;
+	};
+	watch([panelEl, () => toValue(options.isExpanded)], ([panel, expanded]) => {
+		if (panel) applyPanelState(panel, expanded);
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	return { setPanelElement };
+};
+//#endregion
+export { useDisclosurePanel };

package/dist/composables/use-dismissable.d.ts

@@ -0,0 +1,59 @@
+import type { MaybeRefOrGetter } from "vue";
+export interface UseDismissableOptions {
+    /** The overlay element. Interaction inside it never dismisses. */
+    overlayRef: MaybeRefOrGetter<Element | null | undefined>;
+    isOpen?: MaybeRefOrGetter<boolean | undefined>;
+    onClose?: () => void;
+    /** Whether interacting outside dismisses the overlay. @default false */
+    isDismissable?: MaybeRefOrGetter<boolean | undefined>;
+    /** @default false */
+    isKeyboardDismissDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Whether focus leaving the overlay dismisses it.
+     *
+     * Not the same question as `isDismissable`, and the two do not overlap: a popover that leaves
+     * the page live is not dismissed by a press outside — the press was meant for whatever it
+     * landed on — but tabbing away from it is the user leaving, and it has nothing left to say.
+     *
+     * @default false
+     */
+    shouldCloseOnBlur?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Filters which outside elements dismiss the overlay. Return `false` for an element that
+     * should be left alone — the trigger of an already-open submenu, for one.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+}
+export interface UseDismissableReturn {
+    /** Bind to the overlay so Escape dismisses it. */
+    onKeydown: (event: KeyboardEvent) => void;
+    /** Bind to the overlay so focus leaving it dismisses it, when `shouldCloseOnBlur` is set. */
+    onFocusout: (event: FocusEvent) => void;
+}
+/**
+ * Dismiss an overlay on Escape or on an interaction outside it, ported from React Aria's
+ * `useOverlay` and `useInteractOutside`.
+ *
+ * Dismissal is decided over two events rather than one. A pointerdown outside marks the
+ * interaction as started, and the *click* that follows is what dismisses: pressing down outside
+ * and releasing inside is a drag, not a dismissal, and using pointerup instead trips over
+ * Chrome on Android firing it in cases where no click follows.
+ *
+ * Escape and the outside click both stop at the innermost open overlay, so dismissing a submenu
+ * leaves the menu it came from open.
+ *
+ * Focus leaving is a third way out, off by default and asked for separately — `shouldCloseOnBlur`.
+ * It is the only way an overlay that leaves the page live gets closed by a pointer at all, since
+ * such an overlay is not dismissable by an outside press.
+ *
+ * @example
+ * ```ts
+ * const {onKeydown} = useDismissable({
+ *   isDismissable: true,
+ *   isOpen: () => state.isOpen.value,
+ *   onClose: state.close,
+ *   overlayRef: popoverElement,
+ * });
+ * ```
+ */
+export declare const useDismissable: (options: UseDismissableOptions) => UseDismissableReturn;

package/dist/composables/use-dismissable.js

@@ -0,0 +1,144 @@
+import { isInTopLayer } from "../utils/top-layer.js";
+import { isElementInAnyFocusScope } from "./use-focus-scope.js";
+import { computed, onScopeDispose, toValue, watch } from "vue";
+//#region src/composables/use-dismissable.ts
+/**
+* Open overlays, innermost last.
+*
+* Module-level on purpose: a click outside must dismiss exactly one overlay — the innermost —
+* and no single overlay can know whether another is nested inside it. React Aria keeps the same
+* list for the same reason.
+*/
+var visibleOverlays = [];
+/**
+* Dismiss an overlay on Escape or on an interaction outside it, ported from React Aria's
+* `useOverlay` and `useInteractOutside`.
+*
+* Dismissal is decided over two events rather than one. A pointerdown outside marks the
+* interaction as started, and the *click* that follows is what dismisses: pressing down outside
+* and releasing inside is a drag, not a dismissal, and using pointerup instead trips over
+* Chrome on Android firing it in cases where no click follows.
+*
+* Escape and the outside click both stop at the innermost open overlay, so dismissing a submenu
+* leaves the menu it came from open.
+*
+* Focus leaving is a third way out, off by default and asked for separately — `shouldCloseOnBlur`.
+* It is the only way an overlay that leaves the page live gets closed by a pointer at all, since
+* such an overlay is not dismissable by an outside press.
+*
+* @example
+* ```ts
+* const {onKeydown} = useDismissable({
+*   isDismissable: true,
+*   isOpen: () => state.isOpen.value,
+*   onClose: state.close,
+*   overlayRef: popoverElement,
+* });
+* ```
+*/
+var useDismissable = (options) => {
+	const layer = {};
+	const isOpen = computed(() => Boolean(toValue(options.isOpen)));
+	const isDismissable = computed(() => Boolean(toValue(options.isDismissable)));
+	const getOverlay = () => toValue(options.overlayRef) ?? null;
+	const isTopMost = () => visibleOverlays.at(-1) === layer;
+	const close = () => {
+		if (isTopMost()) options.onClose?.();
+	};
+	watch(isOpen, (open, _previous, onCleanup) => {
+		if (!open) return;
+		visibleOverlays.push(layer);
+		onCleanup(() => {
+			const index = visibleOverlays.indexOf(layer);
+			if (index >= 0) visibleOverlays.splice(index, 1);
+		});
+	}, { immediate: true });
+	/** Whether the event happened outside the overlay and is worth acting on. */
+	const isOutside = (event) => {
+		if (event.button > 0) return false;
+		const overlay = getOverlay();
+		if (!overlay) return false;
+		const target = event.target;
+		if (!(target instanceof Element) || !target.ownerDocument.documentElement.contains(target)) return false;
+		if (isInTopLayer(target)) return false;
+		return !event.composedPath().includes(overlay);
+	};
+	/** Whether the pointerdown that began this interaction was outside. */
+	let pointerDownWasOutside = false;
+	/** Which overlay was innermost when the interaction began, so a dismissal that opened another overlay does not also dismiss this one. */
+	let layerAtPointerDown;
+	const listeners = [];
+	const attach = () => {
+		if (!isDismissable.value || !isOpen.value || typeof document === "undefined") return;
+		const onPointerdown = (event) => {
+			if (!isOutside(event)) return;
+			layerAtPointerDown = visibleOverlays.at(-1);
+			if (options.shouldCloseOnInteractOutside && !options.shouldCloseOnInteractOutside(event.target)) return;
+			pointerDownWasOutside = true;
+			if (isTopMost()) event.stopPropagation();
+		};
+		const onClick = (event) => {
+			if (!pointerDownWasOutside) {
+				layerAtPointerDown = void 0;
+				return;
+			}
+			pointerDownWasOutside = false;
+			if (!isOutside(event)) {
+				layerAtPointerDown = void 0;
+				return;
+			}
+			if (options.shouldCloseOnInteractOutside && !options.shouldCloseOnInteractOutside(event.target)) {
+				layerAtPointerDown = void 0;
+				return;
+			}
+			if (isTopMost()) event.stopPropagation();
+			if (layerAtPointerDown === layer) close();
+			layerAtPointerDown = void 0;
+		};
+		document.addEventListener("pointerdown", onPointerdown, true);
+		document.addEventListener("click", onClick, true);
+		listeners.push(() => {
+			document.removeEventListener("pointerdown", onPointerdown, true);
+			document.removeEventListener("click", onClick, true);
+		});
+	};
+	const detach = () => {
+		for (const remove of listeners.splice(0)) remove();
+		pointerDownWasOutside = false;
+	};
+	watch([isOpen, isDismissable], () => {
+		detach();
+		attach();
+	}, { immediate: true });
+	onScopeDispose(() => detach(), true);
+	/**
+	* Dismiss when focus leaves the overlay entirely.
+	*
+	* `focusout` is dispatched at the element losing focus and bubbles, so this only ever runs for
+	* focus that was inside — which is the `onBlurWithin` of React Aria's `useFocusWithin`, the
+	* shape `useOverlay` reads there.
+	*/
+	const onFocusout = (event) => {
+		if (!toValue(options.shouldCloseOnBlur) || !isOpen.value) return;
+		const next = event.relatedTarget;
+		if (!(next instanceof Element)) return;
+		if (getOverlay()?.contains(next)) return;
+		if (isInTopLayer(next)) return;
+		if (isElementInAnyFocusScope(next)) return;
+		if (options.shouldCloseOnInteractOutside && !options.shouldCloseOnInteractOutside(next)) return;
+		options.onClose?.();
+	};
+	return {
+		onFocusout,
+		onKeydown: (event) => {
+			if (event.key !== "Escape") return;
+			if (toValue(options.isKeyboardDismissDisabled)) return;
+			if (!isTopMost()) return;
+			event.preventDefault();
+			event.stopPropagation();
+			options.onClose?.();
+		}
+	};
+};
+//#endregion
+export { useDismissable };

package/dist/composables/use-display-names.d.ts

@@ -0,0 +1,21 @@
+import type { ComputedRef } from "vue";
+export interface DisplayNames {
+    /**
+     * What this part of a date is called, in words.
+     *
+     * A method, not a bound property: on an engine with `dateTimeField` support this is
+     * `Intl.DisplayNames`'s own, which throws if it is pulled off the object and called alone.
+     */
+    of(field: Intl.DateTimeFormatPartTypes): string | undefined;
+}
+/**
+ * The names of the parts of a date, for labelling a field's segments.
+ *
+ * Ported from React Aria's `packages/react-aria/src/datepicker/useDisplayNames.ts`
+ * (react-aria 3.51.0).
+ *
+ * `Intl.DisplayNames` has shipped for a while, but its `dateTimeField` type only arrived in v2, so
+ * an engine can have the constructor and still reject the one type this needs — hence asking and
+ * falling back rather than feature-detecting.
+ */
+export declare const useDisplayNames: () => ComputedRef<DisplayNames>;

package/dist/composables/use-display-names.js

@@ -0,0 +1,44 @@
+import { useLocale } from "./use-locale.js";
+import { useLocalizedStringDictionary } from "./use-localized-string-formatter.js";
+import { datepickerStrings } from "../i18n/datepicker.js";
+import { computed } from "vue";
+//#region src/composables/use-display-names.ts
+var NAMED_FIELDS = /* @__PURE__ */ new Set([
+	"day",
+	"dayPeriod",
+	"era",
+	"hour",
+	"minute",
+	"month",
+	"second",
+	"timeZoneName",
+	"weekday",
+	"year"
+]);
+/**
+* The names of the parts of a date, for labelling a field's segments.
+*
+* Ported from React Aria's `packages/react-aria/src/datepicker/useDisplayNames.ts`
+* (react-aria 3.51.0).
+*
+* `Intl.DisplayNames` has shipped for a while, but its `dateTimeField` type only arrived in v2, so
+* an engine can have the constructor and still reject the one type this needs — hence asking and
+* falling back rather than feature-detecting.
+*/
+var useDisplayNames = () => {
+	const locale = useLocale();
+	const dictionary = useLocalizedStringDictionary(datepickerStrings);
+	return computed(() => {
+		try {
+			return new Intl.DisplayNames(locale.value.locale, { type: "dateTimeField" });
+		} catch {
+			return { of: (field) => {
+				if (!NAMED_FIELDS.has(field)) return void 0;
+				const name = dictionary.getStringForLocale(field, locale.value.locale);
+				return typeof name === "string" ? name : void 0;
+			} };
+		}
+	});
+};
+//#endregion
+export { useDisplayNames };

package/dist/composables/use-dnd-persisted-keys.d.ts

@@ -0,0 +1,17 @@
+import type { CollectionKey } from "./use-collection";
+import type { DragAndDropHooks } from "./use-drag-and-drop";
+import type { UseDroppableCollectionStateReturn } from "./use-droppable-collection-state";
+import type { ComputedRef } from "vue";
+/**
+ * The keys a virtualized collection has to keep rendered while a drag is in flight, ported from
+ * React Aria Components' `useDndPersistedKeys`.
+ *
+ * A windowed collection only renders what is on screen, and during a **keyboard or screen reader**
+ * drag that is not enough: the drop target is reached by pressing a key rather than by pointing
+ * at something, so it can be a row nobody has scrolled to, and its element has to exist for focus
+ * to move onto it. A pointer drag needs none of this — you cannot point at a row that is not on
+ * screen — which is why the whole thing is conditional on `isVirtualDragging`.
+ *
+ * The focused key is kept for the reason it always is: the roving tab stop lives on it.
+ */
+export declare const useDndPersistedKeys: (focusedKey: () => CollectionKey | null, dragAndDropHooks?: DragAndDropHooks, dropState?: UseDroppableCollectionStateReturn<unknown>) => ComputedRef<Set<CollectionKey>>;

package/dist/composables/use-dnd-persisted-keys.js

@@ -0,0 +1,36 @@
+import { computed } from "vue";
+//#region src/composables/use-dnd-persisted-keys.ts
+/**
+* The keys a virtualized collection has to keep rendered while a drag is in flight, ported from
+* React Aria Components' `useDndPersistedKeys`.
+*
+* A windowed collection only renders what is on screen, and during a **keyboard or screen reader**
+* drag that is not enough: the drop target is reached by pressing a key rather than by pointing
+* at something, so it can be a row nobody has scrolled to, and its element has to exist for focus
+* to move onto it. A pointer drag needs none of this — you cannot point at a row that is not on
+* screen — which is why the whole thing is conditional on `isVirtualDragging`.
+*
+* The focused key is kept for the reason it always is: the roving tab stop lives on it.
+*/
+var useDndPersistedKeys = (focusedKey, dragAndDropHooks, dropState) => computed(() => {
+	const keys = /* @__PURE__ */ new Set();
+	const focused = focusedKey();
+	if (focused != null) keys.add(focused);
+	const target = dropState?.target.value;
+	if (!dropState || !dragAndDropHooks?.isVirtualDragging?.() || target?.type !== "item") return keys;
+	/**
+	* Normalised to the row the indicator is rendered against.
+	*
+	* "After A" is drawn by whatever follows A, so persisting A itself would keep the wrong row
+	* alive and leave the indicator with nothing to attach to. Upstream additionally steps over
+	* the target's descendants here; a windowed collection is built from flat data in this build,
+	* so there are none to step over.
+	*/
+	if (target.dropPosition === "after") {
+		const nextKey = dropState.collection.getKeyAfter(target.key);
+		keys.add(nextKey ?? target.key);
+	} else keys.add(target.key);
+	return keys;
+});
+//#endregion
+export { useDndPersistedKeys };

package/dist/composables/use-drag-and-drop.d.ts

@@ -0,0 +1,77 @@
+import type { DragItem, DragKey, DragPreviewRenderer, DragType, DragTypes, DraggableCollectionEndEvent, DraggableCollectionStartEvent, DropOperation, DropTarget, DropTargetDelegate, DroppableCollectionActivateEvent, DroppableCollectionDropEvent, DroppableCollectionInsertDropEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, ItemDropTarget } from "../utils/dnd-types";
+import type { MaybeRefOrGetter } from "vue";
+import { ListDropTargetDelegate } from "../utils/dnd-list-drop-target-delegate";
+import { isVirtualDragging } from "./drag-manager";
+import { useDraggableCollection } from "./use-draggable-collection";
+import { useDraggableCollectionState } from "./use-draggable-collection-state";
+import { useDraggableItem } from "./use-draggable-item";
+import { useDropIndicator } from "./use-drop-indicator";
+import { useDroppableCollection } from "./use-droppable-collection";
+import { useDroppableCollectionState } from "./use-droppable-collection-state";
+import { useDroppableItem } from "./use-droppable-item";
+export interface DragAndDropOptions {
+    /**
+     * The items to put on the drag, for the keys being dragged.
+     *
+     * Supplying this is what makes the collection draggable at all.
+     */
+    getItems?: (keys: Set<DragKey>) => DragItem[];
+    /** A custom drag image. Without one the browser drags a picture of the rows themselves. */
+    renderDragPreview?: DragPreviewRenderer;
+    getAllowedDropOperations?: () => DropOperation[];
+    onDragStart?: (event: DraggableCollectionStartEvent) => void;
+    onDragEnd?: (event: DraggableCollectionEndEvent) => void;
+    /** Items from elsewhere dropped between two rows. */
+    onInsert?: (event: DroppableCollectionInsertDropEvent) => void | Promise<void>;
+    /** Items from elsewhere dropped on the collection itself. */
+    onRootDrop?: (event: DroppableCollectionRootDropEvent) => void | Promise<void>;
+    /** Items dropped onto a row rather than between two. */
+    onItemDrop?: (event: DroppableCollectionOnItemDropEvent) => void | Promise<void>;
+    /** Rows of this collection moved between siblings. */
+    onReorder?: (event: DroppableCollectionReorderEvent) => void | Promise<void>;
+    /** Rows of this collection moved anywhere, including onto a row or across parents. */
+    onMove?: (event: DroppableCollectionReorderEvent) => void | Promise<void>;
+    /** Replaces every handler above, for a caller that wants to route drops itself. */
+    onDrop?: (event: DroppableCollectionDropEvent) => void | Promise<void>;
+    onDropActivate?: (event: DroppableCollectionActivateEvent) => void;
+    acceptedDragTypes?: "all" | DragType[];
+    shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
+    getDropOperation?: (target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
+    /** Resolves a pointer position to a drop target. The collection supplies one by default. */
+    dropTargetDelegate?: DropTargetDelegate;
+    /** Suppresses both halves. */
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+}
+/**
+ * The hooks a collection reaches for, present only when the caller asked for that half.
+ *
+ * Handing the collection a bag of functions rather than importing them there is React Aria's
+ * shape, and it earns its keep for the same reason: a `ListBox` with no drag and drop never
+ * mentions these modules, so none of it reaches the bundle.
+ */
+export interface DragAndDropHooks {
+    options: DragAndDropOptions;
+    useDraggableCollectionState?: typeof useDraggableCollectionState;
+    useDraggableCollection?: typeof useDraggableCollection;
+    useDraggableItem?: typeof useDraggableItem;
+    useDroppableCollectionState?: typeof useDroppableCollectionState;
+    useDroppableCollection?: typeof useDroppableCollection;
+    useDroppableItem?: typeof useDroppableItem;
+    useDropIndicator?: typeof useDropIndicator;
+    ListDropTargetDelegate?: typeof ListDropTargetDelegate;
+    isVirtualDragging?: typeof isVirtualDragging;
+    renderDragPreview?: DragPreviewRenderer;
+    dropTargetDelegate?: DropTargetDelegate;
+}
+export interface UseDragAndDropReturn {
+    dragAndDropHooks: DragAndDropHooks;
+}
+/**
+ * Configures drag and drop for a collection.
+ *
+ * Which halves are switched on is inferred from the handlers given, rather than from a flag: a
+ * collection is draggable when it can say what its items *are*, and droppable when there is
+ * something it could do with what arrives. Declaring neither and still passing this in would be
+ * a no-op, so there is nothing to get out of step.
+ */
+export declare const useDragAndDrop: (options: DragAndDropOptions) => UseDragAndDropReturn;