ropav 0.2.0 → 0.3.0

package/dist/composables/use-drag-and-drop.js

@@ -0,0 +1,41 @@
+import { isVirtualDragging } from "./drag-manager.js";
+import { ListDropTargetDelegate } from "../utils/dnd-list-drop-target-delegate.js";
+import { useDraggableCollection } from "./use-draggable-collection.js";
+import { useDraggableCollectionState } from "./use-draggable-collection-state.js";
+import { useDraggableItem } from "./use-draggable-item.js";
+import { useDroppableItem } from "./use-droppable-item.js";
+import { useDropIndicator } from "./use-drop-indicator.js";
+import { useDroppableCollection } from "./use-droppable-collection.js";
+import { useDroppableCollectionState } from "./use-droppable-collection-state.js";
+//#region src/composables/use-drag-and-drop.ts
+/**
+* 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.
+*/
+var useDragAndDrop = (options) => {
+	const isDraggable = Boolean(options.getItems);
+	const isDroppable = Boolean(options.onDrop ?? options.onInsert ?? options.onItemDrop ?? options.onReorder ?? options.onMove ?? options.onRootDrop);
+	const hooks = { options };
+	if (isDraggable) {
+		hooks.useDraggableCollectionState = useDraggableCollectionState;
+		hooks.useDraggableCollection = useDraggableCollection;
+		hooks.useDraggableItem = useDraggableItem;
+		hooks.renderDragPreview = options.renderDragPreview;
+		hooks.isVirtualDragging = isVirtualDragging;
+	}
+	if (isDroppable) {
+		hooks.useDroppableCollectionState = useDroppableCollectionState;
+		hooks.useDroppableCollection = useDroppableCollection;
+		hooks.useDroppableItem = useDroppableItem;
+		hooks.useDropIndicator = useDropIndicator;
+		hooks.ListDropTargetDelegate = ListDropTargetDelegate;
+		hooks.dropTargetDelegate = options.dropTargetDelegate;
+	}
+	return { dragAndDropHooks: hooks };
+};
+//#endregion
+export { useDragAndDrop };

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

@@ -0,0 +1,62 @@
+import type { DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation } from "../utils/dnd-types";
+import type { PressEvent } from "./use-press";
+import type { ComputedRef, MaybeRefOrGetter, ShallowRef } from "vue";
+export interface UseDragOptions {
+    /** The items being dragged, read when the drag starts. */
+    getItems: () => DragItem[];
+    onDragStart?: (event: DragStartEvent) => void;
+    onDragMove?: (event: DragMoveEvent) => void;
+    /** Called when the drag ends, whether it was dropped or cancelled. */
+    onDragEnd?: (event: DragEndEvent) => void;
+    /** Which operations the drop side may choose from. Defaults to all three. */
+    getAllowedDropOperations?: () => DropOperation[];
+    /** A custom drag image. Without one the browser drags a picture of the element itself. */
+    preview?: ShallowRef<DragPreviewRenderer | null>;
+    /**
+     * Whether a separate focusable control starts the accessible drag.
+     *
+     * With one, the keyboard and screen reader handlers move off the draggable element and onto
+     * that control — otherwise Enter on the element would mean both "activate me" and "drag me".
+     */
+    hasDragButton?: MaybeRefOrGetter<boolean | undefined>;
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+}
+/** Listeners for the draggable element. Never spread these through `v-bind` — see below. */
+export interface UseDragHandlers {
+    onDragstart: (event: DragEvent) => void;
+    onDrag: (event: DragEvent) => void;
+    onDragend: (event: DragEvent) => void;
+    onPointerdown?: (event: PointerEvent) => void;
+    onKeydownCapture?: (event: KeyboardEvent) => void;
+    onKeyupCapture?: (event: KeyboardEvent) => void;
+    onClick?: (event: MouseEvent) => void;
+}
+export interface UseDragReturn {
+    /** Attributes for the draggable element. Attributes only, never listeners. */
+    attrs: ComputedRef<{
+        draggable: "true" | "false";
+        "aria-describedby"?: string;
+    }>;
+    handlers: UseDragHandlers;
+    /** Attributes for the explicit drag control, when there is one. */
+    dragButtonAttrs: ComputedRef<{
+        "aria-describedby": string | undefined;
+    }>;
+    /** Hand this to a `PressResponder`, so the control stays an ordinary `Button`. */
+    onDragButtonPress: (event: PressEvent) => void;
+    isDragging: ComputedRef<boolean>;
+}
+/**
+ * Drag behaviour for an element, ported from React Aria's `useDrag`.
+ *
+ * Covers three ways to start a drag, because the native one only serves a mouse: the HTML drag
+ * events for a pointer, Enter for the keyboard, and a click with no pointer behind it for a
+ * screen reader. The last two hand off to the drag session in `drag-manager.ts`.
+ *
+ * **`attrs` and `handlers` are separate, and that is load-bearing.** Vapor
+ * removes and re-adds every `on*` key that arrives through `v-bind` on each render, so a listener
+ * spread that way ends up behind the template's own and can be torn off mid-dispatch. A drag
+ * re-renders the instant it starts — `data-dragging` flips — so this is certain to bite rather
+ * than merely possible. Bind `attrs` with `v-bind`; attach `handlers` statically with `@event`.
+ */
+export declare const useDrag: (options: UseDragOptions) => UseDragReturn;

package/dist/composables/use-drag.js

@@ -0,0 +1,267 @@
+import { isIOS, isWebKit } from "../utils/platform.js";
+import { isVirtualClick, isVirtualPointerEvent } from "./use-press.js";
+import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";
+import { useDescription } from "./use-description.js";
+import { dndStrings } from "../i18n/dnd.js";
+import { DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED } from "../utils/dnd-constants.js";
+import { writeToDataTransfer } from "../utils/dnd-data-transfer.js";
+import { useDragModality } from "./drag-modality.js";
+import { beginDragging } from "./drag-manager.js";
+import { globalDropEffect, setGlobalAllowedDropOperations, setGlobalDropEffect } from "../utils/dnd-state.js";
+import { computed, onScopeDispose, shallowRef, toValue } from "vue";
+//#region src/composables/use-drag.ts
+/**
+* Drag behaviour for an element, ported from React Aria's `useDrag`.
+*
+* Covers three ways to start a drag, because the native one only serves a mouse: the HTML drag
+* events for a pointer, Enter for the keyboard, and a click with no pointer behind it for a
+* screen reader. The last two hand off to the drag session in `drag-manager.ts`.
+*
+* **`attrs` and `handlers` are separate, and that is load-bearing.** Vapor
+* removes and re-adds every `on*` key that arrives through `v-bind` on each render, so a listener
+* spread that way ends up behind the template's own and can be torn off mid-dispatch. A drag
+* re-renders the instant it starts — `data-dragging` flips — so this is certain to bite rather
+* than merely possible. Bind `attrs` with `v-bind`; attach `handlers` statically with `@event`.
+*/
+var useDrag = (options) => {
+	const draggingElement = shallowRef(null);
+	const isDragging = computed(() => draggingElement.value != null);
+	const modality = useDragModality();
+	/**
+	* The modality read at `pointerdown`, kept until `dragstart`.
+	*
+	* A screen reader's pass-through gesture arrives as a real drag, and by then it is
+	* indistinguishable from a mouse. The pointer event before it still carries the tell.
+	*/
+	let modalityOnPointerDown = null;
+	let lastX = 0;
+	let lastY = 0;
+	let releaseDropGuard = null;
+	const stringFormatter = useLocalizedStringFormatter(dndStrings);
+	/** How to start the drag, or — once it is running — how to cancel it. */
+	const description = computed(() => {
+		const key = {
+			keyboard: {
+				end: "endDragKeyboard",
+				start: "dragDescriptionKeyboard"
+			},
+			touch: {
+				end: "endDragTouch",
+				start: "dragDescriptionTouch"
+			},
+			virtual: {
+				end: "endDragVirtual",
+				start: "dragDescriptionVirtual"
+			}
+		}[modality.value];
+		return stringFormatter.value.format(isDragging.value ? key.end : key.start);
+	});
+	const { describedBy } = useDescription(description);
+	const allowedOperations = () => options.getAllowedDropOperations?.() ?? [
+		"move",
+		"copy",
+		"link"
+	];
+	/** Start the accessible drag — the keyboard and screen reader path. */
+	const startDragging = (target) => {
+		const rect = target.getBoundingClientRect();
+		options.onDragStart?.({
+			type: "dragstart",
+			x: rect.x + rect.width / 2,
+			y: rect.y + rect.height / 2
+		});
+		beginDragging({
+			allowedDropOperations: allowedOperations(),
+			element: target,
+			items: options.getItems(),
+			onDragEnd(event) {
+				draggingElement.value = null;
+				options.onDragEnd?.(event);
+			}
+		}, stringFormatter);
+		draggingElement.value = target;
+	};
+	const onDragstart = (event) => {
+		if (event.defaultPrevented) return;
+		event.stopPropagation();
+		if (modalityOnPointerDown === "virtual") {
+			event.preventDefault();
+			startDragging(event.target);
+			modalityOnPointerDown = null;
+			return;
+		}
+		options.onDragStart?.({
+			type: "dragstart",
+			x: event.clientX,
+			y: event.clientY
+		});
+		const items = options.getItems();
+		if (!event.dataTransfer) return;
+		event.dataTransfer.clearData?.();
+		writeToDataTransfer(event.dataTransfer, items);
+		let allowed = DROP_OPERATION.all;
+		if (options.getAllowedDropOperations) {
+			allowed = DROP_OPERATION.none;
+			for (const operation of options.getAllowedDropOperations()) allowed |= DROP_OPERATION[operation] || DROP_OPERATION.none;
+		}
+		setGlobalAllowedDropOperations(allowed);
+		event.dataTransfer.effectAllowed = EFFECT_ALLOWED[allowed] ?? "none";
+		applyPreview(event, items);
+		const onStrayDrop = (dropEvent) => {
+			dropEvent.preventDefault();
+			dropEvent.stopPropagation();
+			console.warn("Drags initiated from useDrag may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.");
+		};
+		window.addEventListener("drop", onStrayDrop, { once: true });
+		releaseDropGuard = () => window.removeEventListener("drop", onStrayDrop);
+		lastX = event.clientX;
+		lastY = event.clientY;
+		const target = event.target;
+		requestAnimationFrame(() => {
+			draggingElement.value = target;
+		});
+	};
+	/** Render the custom drag image, if the caller supplied one. */
+	const applyPreview = (event, items) => {
+		const render = options.preview?.value;
+		if (typeof render !== "function" || !event.dataTransfer) return;
+		const dataTransfer = event.dataTransfer;
+		const currentTarget = event.currentTarget;
+		render(items, (node, userX, userY) => {
+			if (!node) return;
+			const size = node.getBoundingClientRect();
+			const rect = currentTarget?.getBoundingClientRect();
+			let offsetX = rect ? event.clientX - rect.x : size.width / 2;
+			let offsetY = rect ? event.clientY - rect.y : size.height / 2;
+			if (offsetX > size.width || offsetY > size.height) {
+				offsetX = size.width / 2;
+				offsetY = size.height / 2;
+			}
+			if (typeof userX === "number" && typeof userY === "number") {
+				offsetX = userX;
+				offsetY = userY;
+			}
+			offsetX = Math.max(0, Math.min(offsetX, size.width));
+			offsetY = Math.max(0, Math.min(offsetY, size.height));
+			node.style.height = `${2 * Math.round(size.height / 2)}px`;
+			dataTransfer.setDragImage(node, offsetX, offsetY);
+		});
+	};
+	const onDrag = (event) => {
+		event.stopPropagation();
+		if (event.clientX === lastX && event.clientY === lastY) return;
+		options.onDragMove?.({
+			type: "dragmove",
+			x: event.clientX,
+			y: event.clientY
+		});
+		lastX = event.clientX;
+		lastY = event.clientY;
+	};
+	const onDragend = (event) => {
+		event.stopPropagation();
+		if (options.onDragEnd) options.onDragEnd({
+			dropOperation: DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect ?? event.dataTransfer?.dropEffect ?? "none"] ?? "cancel",
+			type: "dragend",
+			x: event.clientX,
+			y: event.clientY
+		});
+		draggingElement.value = null;
+		releaseDropGuard?.();
+		releaseDropGuard = null;
+		setGlobalAllowedDropOperations(DROP_OPERATION.none);
+		setGlobalDropEffect(void 0);
+	};
+	/**
+	* A drag whose element is removed by the drop never fires `dragend`.
+	*
+	* Reordering a list does exactly that, so without this the source would stay marked as
+	* dragging forever.
+	*
+	* @see https://bugzilla.mozilla.org/show_bug.cgi?id=460801
+	*/
+	onScopeDispose(() => {
+		releaseDropGuard?.();
+		const element = draggingElement.value;
+		if (!element || element.isConnected) return;
+		options.onDragEnd?.({
+			dropOperation: DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect ?? "none"] ?? "cancel",
+			type: "dragend",
+			x: 0,
+			y: 0
+		});
+		draggingElement.value = null;
+		setGlobalAllowedDropOperations(DROP_OPERATION.none);
+		setGlobalDropEffect(void 0);
+	});
+	const onDragButtonPress = (event) => {
+		if (event.pointerType !== "keyboard" && event.pointerType !== "virtual") return;
+		startDragging(event.target);
+	};
+	const onPointerdown = (event) => {
+		modalityOnPointerDown = isVirtualPointerEvent(event) ? "virtual" : event.pointerType;
+		if (modalityOnPointerDown === "virtual") return;
+		if (event.width < 1 && event.height < 1 && isIOS() && isWebKit()) {
+			modalityOnPointerDown = "virtual";
+			return;
+		}
+		const rect = event.currentTarget.getBoundingClientRect();
+		const offsetX = event.clientX - rect.x;
+		const offsetY = event.clientY - rect.y;
+		if (Math.abs(offsetX - rect.width / 2) <= .5 && Math.abs(offsetY - rect.height / 2) <= .5) modalityOnPointerDown = "virtual";
+	};
+	const onKeydownCapture = (event) => {
+		if (event.target !== event.currentTarget || event.key !== "Enter") return;
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const onKeyupCapture = (event) => {
+		if (event.target !== event.currentTarget || event.key !== "Enter") return;
+		event.preventDefault();
+		event.stopPropagation();
+		startDragging(event.target);
+	};
+	const onClick = (event) => {
+		if (!isVirtualClick(event) && modalityOnPointerDown !== "virtual") return;
+		event.preventDefault();
+		event.stopPropagation();
+		startDragging(event.target);
+	};
+	const hasDragButton = () => Boolean(toValue(options.hasDragButton));
+	const isDisabled = () => Boolean(toValue(options.isDisabled));
+	return {
+		attrs: computed(() => {
+			if (isDisabled()) return { draggable: "false" };
+			return {
+				draggable: "true",
+				...hasDragButton() ? {} : { "aria-describedby": describedBy.value }
+			};
+		}),
+		dragButtonAttrs: computed(() => ({ "aria-describedby": describedBy.value })),
+		handlers: {
+			onClick: (event) => {
+				if (isDisabled() || hasDragButton()) return;
+				onClick(event);
+			},
+			onDrag,
+			onDragend,
+			onDragstart,
+			onKeydownCapture: (event) => {
+				if (isDisabled() || hasDragButton()) return;
+				onKeydownCapture(event);
+			},
+			onKeyupCapture: (event) => {
+				if (isDisabled() || hasDragButton()) return;
+				onKeyupCapture(event);
+			},
+			onPointerdown: (event) => {
+				if (isDisabled() || hasDragButton()) return;
+				onPointerdown(event);
+			}
+		},
+		isDragging: computed(() => !isDisabled() && isDragging.value),
+		onDragButtonPress
+	};
+};
+//#endregion
+export { useDrag };

package/dist/composables/use-draggable-collection-state.d.ts

@@ -0,0 +1,39 @@
+import type { DragCollection, DragItem, DragKey, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DropOperation } from "../utils/dnd-types";
+import type { UseSelectionManagerReturn } from "./use-selection-manager";
+import type { ComputedRef, MaybeRefOrGetter, ShallowRef } from "vue";
+export interface UseDraggableCollectionStateOptions<T = unknown> {
+    collection: DragCollection<T>;
+    selectionManager: UseSelectionManagerReturn;
+    /** Builds the drag items for the keys being dragged, given their values. */
+    getItems: (keys: Set<DragKey>, items: T[]) => DragItem[];
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    onDragStart?: (event: DraggableCollectionStartEvent) => void;
+    onDragMove?: (event: DraggableCollectionMoveEvent) => void;
+    onDragEnd?: (event: DraggableCollectionEndEvent) => void;
+    preview?: ShallowRef<DragPreviewRenderer | null>;
+    getAllowedDropOperations?: () => DropOperation[];
+}
+export interface UseDraggableCollectionStateReturn<T = unknown> {
+    collection: DragCollection<T>;
+    selectionManager: UseSelectionManagerReturn;
+    /** The item the drag was started from. */
+    draggedKey: ComputedRef<DragKey | null>;
+    /** Every key travelling with the drag, which may be a whole selection. */
+    draggingKeys: ComputedRef<Set<DragKey>>;
+    isDisabled: ComputedRef<boolean>;
+    isDragging: (key: DragKey) => boolean;
+    getKeysForDrag: (key: DragKey) => Set<DragKey>;
+    getItems: (key: DragKey) => DragItem[];
+    preview?: ShallowRef<DragPreviewRenderer | null>;
+    getAllowedDropOperations?: () => DropOperation[];
+    startDrag: (key: DragKey, event: DragStartEvent) => void;
+    moveDrag: (event: DragMoveEvent) => void;
+    endDrag: (event: DraggableCollectionEndEvent) => void;
+}
+/**
+ * Drag state for a collection, ported from react-stately's `useDraggableCollectionState`.
+ *
+ * Owns the one question the drag layer cannot answer for itself: given the item the user grabbed,
+ * which items actually travel with it.
+ */
+export declare const useDraggableCollectionState: <T = unknown>(options: UseDraggableCollectionStateOptions<T>) => UseDraggableCollectionStateReturn<T>;

package/dist/composables/use-draggable-collection-state.js

@@ -0,0 +1,93 @@
+import { computed, shallowRef, toValue } from "vue";
+//#region src/composables/use-draggable-collection-state.ts
+/**
+* Drag state for a collection, ported from react-stately's `useDraggableCollectionState`.
+*
+* Owns the one question the drag layer cannot answer for itself: given the item the user grabbed,
+* which items actually travel with it.
+*/
+var useDraggableCollectionState = (options) => {
+	const { collection, selectionManager } = options;
+	const draggingKeys = shallowRef(/* @__PURE__ */ new Set());
+	const draggedKey = shallowRef(null);
+	/**
+	* Which keys travel with a drag started from this one.
+	*
+	* Dragging an item that is part of the selection drags the whole selection; dragging an
+	* unselected item drags only that item, leaving the selection alone. This is what macOS does,
+	* and doing otherwise would make a drag silently act on items the user cannot see.
+	*
+	* Descendants of another selected item are dropped from the set: moving a folder already moves
+	* everything inside it, and including both would move the children twice.
+	*/
+	const getKeysForDrag = (key) => {
+		const keys = /* @__PURE__ */ new Set();
+		if (!selectionManager.isSelected(key)) {
+			keys.add(key);
+			return keys;
+		}
+		const selected = selectionManager.selectedKeys.value;
+		for (const currentKey of selected) {
+			const node = collection.getItem(currentKey);
+			if (!node) continue;
+			let isDescendantOfSelected = false;
+			let parentKey = node.parentKey ?? null;
+			while (parentKey != null) {
+				if (selected.has(parentKey)) {
+					isDescendantOfSelected = true;
+					break;
+				}
+				parentKey = collection.getItem(parentKey)?.parentKey ?? null;
+			}
+			if (!isDescendantOfSelected) keys.add(currentKey);
+		}
+		return keys;
+	};
+	return {
+		collection,
+		draggedKey: computed(() => draggedKey.value),
+		draggingKeys: computed(() => draggingKeys.value),
+		endDrag(event) {
+			options.onDragEnd?.({
+				...event,
+				isInternal: event.isInternal,
+				keys: draggingKeys.value
+			});
+			draggingKeys.value = /* @__PURE__ */ new Set();
+			draggedKey.value = null;
+		},
+		getAllowedDropOperations: options.getAllowedDropOperations,
+		getItems(key) {
+			const keys = getKeysForDrag(key);
+			const values = [];
+			for (const currentKey of keys) {
+				const value = collection.getItem(currentKey)?.value;
+				if (value != null) values.push(value);
+			}
+			return options.getItems(keys, values);
+		},
+		getKeysForDrag,
+		isDisabled: computed(() => Boolean(toValue(options.isDisabled))),
+		isDragging: (key) => draggingKeys.value.has(key),
+		moveDrag(event) {
+			options.onDragMove?.({
+				...event,
+				keys: draggingKeys.value
+			});
+		},
+		preview: options.preview,
+		selectionManager,
+		startDrag(key, event) {
+			const keys = getKeysForDrag(key);
+			draggingKeys.value = keys;
+			draggedKey.value = key;
+			selectionManager.setFocused(false);
+			options.onDragStart?.({
+				...event,
+				keys
+			});
+		}
+	};
+};
+//#endregion
+export { useDraggableCollectionState };

package/dist/composables/use-draggable-collection.d.ts

@@ -0,0 +1,15 @@
+import type { UseDraggableCollectionStateReturn } from "./use-draggable-collection-state";
+import type { ShallowRef } from "vue";
+/**
+ * Marks this collection as the one a drag came from, ported from React Aria's
+ * `useDraggableCollection`.
+ *
+ * The entire job is one global assignment, and it is what lets the drop side tell a reorder from
+ * an insert: a drag from another application and a drag from the list next door look identical on
+ * the wire, so the only way to know is for the source to say so.
+ *
+ * React does this during render. Here it is an effect on the dragged keys, which fires at the
+ * same point in the drag — `startDrag` fills them, and this reacts to them appearing — and,
+ * importantly, still runs before the first `dragenter` reads the global state.
+ */
+export declare const useDraggableCollection: (state: UseDraggableCollectionStateReturn<unknown>, element: ShallowRef<HTMLElement | null>) => void;

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

@@ -0,0 +1,24 @@
+import { globalDndState, setDraggingCollectionRef } from "../utils/dnd-state.js";
+import { watchEffect } from "vue";
+//#region src/composables/use-draggable-collection.ts
+/**
+* Marks this collection as the one a drag came from, ported from React Aria's
+* `useDraggableCollection`.
+*
+* The entire job is one global assignment, and it is what lets the drop side tell a reorder from
+* an insert: a drag from another application and a drag from the list next door look identical on
+* the wire, so the only way to know is for the source to say so.
+*
+* React does this during render. Here it is an effect on the dragged keys, which fires at the
+* same point in the drag — `startDrag` fills them, and this reacts to them appearing — and,
+* importantly, still runs before the first `dragenter` reads the global state.
+*/
+var useDraggableCollection = (state, element) => {
+	watchEffect(() => {
+		if (state.draggingKeys.value.size === 0) return;
+		if (globalDndState.draggingCollectionRef?.value === element.value) return;
+		setDraggingCollectionRef(element);
+	});
+};
+//#endregion
+export { useDraggableCollection };

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

@@ -0,0 +1,35 @@
+import type { DragKey } from "../utils/dnd-types";
+import type { UseDragHandlers } from "./use-drag";
+import type { UseDraggableCollectionStateReturn } from "./use-draggable-collection-state";
+import type { PressEvent } from "./use-press";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseDraggableItemOptions {
+    key: DragKey;
+    /** Whether a separate focusable control starts the accessible drag for this item. */
+    hasDragButton?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Whether the item already does something on Enter or long press.
+     *
+     * When it does, that gesture cannot also mean "drag me" — so the keyboard path moves to
+     * Alt+Enter and the long-press hint is dropped, because long press selects instead.
+     */
+    hasAction?: MaybeRefOrGetter<boolean | undefined>;
+}
+export interface UseDraggableItemReturn {
+    attrs: ComputedRef<Record<string, unknown>>;
+    handlers: UseDragHandlers;
+    dragButtonAttrs: ComputedRef<{
+        "aria-describedby": string | undefined;
+        "aria-label": string | undefined;
+        isDisabled: boolean;
+    }>;
+    onDragButtonPress: (event: PressEvent) => void;
+}
+/**
+ * Drag behaviour for one item of a collection, ported from React Aria's `useDraggableItem`.
+ *
+ * A thin layer over `useDrag`, and almost all of it is about what the user is told: an item that
+ * is part of a multi-item selection has to announce how many items the drag will carry, because
+ * nothing on screen says so once the drag begins.
+ */
+export declare const useDraggableItem: (options: UseDraggableItemOptions, state: UseDraggableCollectionStateReturn<unknown>) => UseDraggableItemReturn;