@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/STable/utils/useTableRowDnd.cjs

@@ -0,0 +1,308 @@
+const require_STable_types = require("../STable.types.cjs");
+const require_tableSizes = require("../constants/tableSizes.cjs");
+const require_tableDndShared = require("./tableDndShared.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+let _atlaskit_pragmatic_drag_and_drop_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+let _atlaskit_pragmatic_drag_and_drop_element_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+let _atlaskit_pragmatic_drag_and_drop_hitbox_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+let _atlaskit_pragmatic_drag_and_drop_element_disable_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
+let _atlaskit_pragmatic_drag_and_drop_auto_scroll_element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+//#region src/components/STable/utils/useTableRowDnd.ts
+/**
+* DnD строк: draggable/dropTarget регистрируются на `<tr>` из DOM-пула, данные
+* строки читаются лениво из data-index на момент жеста — переиспользование
+* элементов пула безопасно. Payload переживает размонтирование источника
+* (monitorForElements). Tree: edges top/bottom + drop-inside центральной зоной
+* (у групп мгновенно, у строк с задержкой), hover-раскрытие веток.
+*/
+var useTableRowDnd = ({ tableId, enabled, dragMode, snapshot, scrollElement, isRowDraggable, dragExpandDelayMs, dragInsideDelayMs, isExpanded, onHoverExpand, onReorder, onTreeDrop, resolveRowPreviewTitle }) => {
+	const rowCleanups = /* @__PURE__ */ new Map();
+	const draggingRowKey = (0, vue.shallowRef)();
+	const dropIndicator = (0, vue.shallowRef)();
+	const committedDropIndicator = (0, vue.shallowRef)();
+	const resolveRowByElement = (rowElement) => {
+		if (!(rowElement instanceof HTMLElement)) return;
+		const rowIndex = Number(rowElement.dataset.index);
+		if (!Number.isInteger(rowIndex)) return;
+		return snapshot.value.flatRows[rowIndex];
+	};
+	const isRowDragAllowed = (flatRow) => {
+		if (!flatRow || !(0, vue.toValue)(enabled)) return false;
+		if (flatRow.kind !== require_STable_types.ESTableRowKind.ROW && flatRow.kind !== require_STable_types.ESTableRowKind.GROUP) return false;
+		const draggablePredicate = (0, vue.toValue)(isRowDraggable);
+		return draggablePredicate ? draggablePredicate(flatRow.item) !== false : true;
+	};
+	/** Дроп в собственное поддерево запрещён. */
+	const isInsideSourceSubtree = (sourceKey, targetKey) => {
+		const { getSubtreeRangeByKey, getRowIndexByKey } = snapshot.value;
+		const sourceRange = getSubtreeRangeByKey(sourceKey);
+		const targetIndex = getRowIndexByKey(targetKey);
+		if (!sourceRange || targetIndex === void 0) return false;
+		return targetIndex >= sourceRange[0] && targetIndex <= sourceRange[1];
+	};
+	const hoverExpandTimer = (0, _vueuse_core.useTimeoutFn)(() => {
+		const targetKey = hoverExpandKey.value;
+		if (targetKey && !isExpanded(targetKey)) onHoverExpand(targetKey);
+	}, () => (0, vue.toValue)(dragExpandDelayMs) ?? 500, { immediate: false });
+	const hoverExpandKey = (0, vue.shallowRef)();
+	const insideArmTimer = (0, _vueuse_core.useTimeoutFn)(() => {
+		insideArmedKey.value = insideArmingKey.value;
+	}, () => (0, vue.toValue)(dragInsideDelayMs) ?? 1300, { immediate: false });
+	const insideArmingKey = (0, vue.shallowRef)();
+	const insideArmedKey = (0, vue.shallowRef)();
+	const scheduleHoverExpand = (flatRow) => {
+		if (!(flatRow.hasChildren || flatRow.kind === require_STable_types.ESTableRowKind.GROUP) || flatRow.expanded) return;
+		if (hoverExpandKey.value !== flatRow.key) {
+			hoverExpandKey.value = flatRow.key;
+			hoverExpandTimer.stop();
+			hoverExpandTimer.start();
+		}
+	};
+	const clearDragTimers = () => {
+		hoverExpandTimer.stop();
+		hoverExpandKey.value = void 0;
+		insideArmTimer.stop();
+		insideArmingKey.value = void 0;
+		insideArmedKey.value = void 0;
+	};
+	const resolveDropAction = (flatRow, targetElement, clientY, edge) => {
+		if ((0, vue.toValue)(dragMode) === require_STable_types.ESTableRowsDragMode.TREE) {
+			const targetRect = targetElement.getBoundingClientRect();
+			const centerZoneHalf = require_tableSizes.TABLE_DROP_INSIDE_RATIO * targetRect.height / 2;
+			if (Math.abs(clientY - (targetRect.top + targetRect.height / 2)) <= centerZoneHalf) {
+				if (flatRow.kind === require_STable_types.ESTableRowKind.GROUP || insideArmedKey.value === flatRow.key) return require_STable_types.ESTableDropAction.CHILD;
+				if (insideArmingKey.value !== flatRow.key) {
+					insideArmingKey.value = flatRow.key;
+					insideArmTimer.stop();
+					insideArmTimer.start();
+				}
+			} else if (insideArmingKey.value === flatRow.key) {
+				insideArmTimer.stop();
+				insideArmingKey.value = void 0;
+				insideArmedKey.value = void 0;
+			}
+		}
+		return edge === "top" ? require_STable_types.ESTableDropAction.BEFORE : require_STable_types.ESTableDropAction.AFTER;
+	};
+	/**
+	* Превью строки (Figma TableRowBasedList state=DND): карточка с главной ячейкой —
+	* шеврон, отступ уровня, иконка и заголовок как в строке. Нативный drag image браузер
+	* рисует полупрозрачным, поэтому превью — свой слой в body без прозрачности, который
+	* едет за курсором из onDrag; нативное превью гасится.
+	*/
+	let previewLayer;
+	/** Клон главной ячейки не должен дублировать id и попадать в таб-порядок. */
+	const stripClonedAttributes = (clone) => {
+		[clone, ...clone.querySelectorAll("[id], [tabindex]")].forEach((element) => {
+			element.removeAttribute("id");
+			element.removeAttribute("tabindex");
+		});
+	};
+	/** Главная ячейка строки: у строки данных — тело ячейки, у группы — контент с заголовком. */
+	const resolvePrimaryCellContent = (rowElement) => {
+		const content = rowElement.querySelector(".s-ui-table__cell--primary .s-ui-table__cell-body, .s-ui-table__cell--primary .s-ui-table__group-content");
+		const cell = content?.closest("td");
+		return content && cell ? {
+			content,
+			cell
+		} : void 0;
+	};
+	const buildRowPreview = (rowElement, flatRow) => {
+		const preview = document.createElement("div");
+		preview.className = "s-ui-table__row-drag-preview";
+		preview.setAttribute("aria-hidden", "true");
+		const primary = resolvePrimaryCellContent(rowElement);
+		if (!primary) {
+			preview.textContent = flatRow ? resolveRowPreviewTitle(flatRow) : "";
+			return preview;
+		}
+		const clone = primary.content.cloneNode(true);
+		if (clone instanceof Element) stripClonedAttributes(clone);
+		preview.style.inlineSize = `${Math.round(primary.cell.getBoundingClientRect().width)}px`;
+		preview.appendChild(clone);
+		return preview;
+	};
+	const movePreviewLayer = (clientX, clientY) => {
+		if (previewLayer) {
+			const offset = 8;
+			previewLayer.style.transform = `translate(${clientX + offset}px, ${clientY + offset}px)`;
+		}
+	};
+	const handlePreviewDragOver = (event) => {
+		movePreviewLayer(event.clientX, event.clientY);
+	};
+	const showPreviewLayer = (preview, clientX, clientY) => {
+		removePreviewLayer();
+		previewLayer = document.createElement("div");
+		previewLayer.className = "s-ui-table__row-drag-layer";
+		previewLayer.appendChild(preview);
+		document.body.appendChild(previewLayer);
+		document.addEventListener("dragover", handlePreviewDragOver);
+		movePreviewLayer(clientX, clientY);
+	};
+	const removePreviewLayer = () => {
+		document.removeEventListener("dragover", handlePreviewDragOver);
+		previewLayer?.remove();
+		previewLayer = void 0;
+	};
+	const registerRowElement = (rowElement) => {
+		if (!(rowElement instanceof HTMLElement)) {
+			rowCleanups.forEach((cleanup, registeredElement) => {
+				if (!registeredElement.isConnected) {
+					cleanup();
+					rowCleanups.delete(registeredElement);
+				}
+			});
+			return;
+		}
+		if (rowCleanups.has(rowElement)) return;
+		const cleanup = (0, _atlaskit_pragmatic_drag_and_drop_combine.combine)((0, _atlaskit_pragmatic_drag_and_drop_element_adapter.draggable)({
+			element: rowElement,
+			canDrag: () => {
+				return isRowDragAllowed(resolveRowByElement(rowElement));
+			},
+			getInitialData: () => {
+				const flatRow = resolveRowByElement(rowElement);
+				return {
+					type: require_tableDndShared.TABLE_ROW_DRAG_TYPE,
+					tableId,
+					rowKey: flatRow?.key ?? "",
+					rowIndex: flatRow?.index ?? -1
+				};
+			},
+			onGenerateDragPreview: ({ nativeSetDragImage, location }) => {
+				const preview = buildRowPreview(rowElement, resolveRowByElement(rowElement));
+				const { clientX, clientY } = location.current.input;
+				(0, _atlaskit_pragmatic_drag_and_drop_element_disable_native_drag_preview.disableNativeDragPreview)({ nativeSetDragImage });
+				showPreviewLayer(preview, clientX, clientY);
+			},
+			onDragStart: () => {
+				draggingRowKey.value = resolveRowByElement(rowElement)?.key;
+				committedDropIndicator.value = void 0;
+			},
+			onDrop: () => {
+				draggingRowKey.value = void 0;
+				dropIndicator.value = void 0;
+				clearDragTimers();
+				removePreviewLayer();
+			}
+		}), (0, _atlaskit_pragmatic_drag_and_drop_element_adapter.dropTargetForElements)({
+			element: rowElement,
+			canDrop: ({ source }) => {
+				if (!require_tableDndShared.isTableRowDragData(source.data, tableId)) return false;
+				const flatRow = resolveRowByElement(rowElement);
+				if (!flatRow || flatRow.key === source.data.rowKey) return false;
+				return !isInsideSourceSubtree(source.data.rowKey, flatRow.key);
+			},
+			getData: ({ input, element }) => {
+				return (0, _atlaskit_pragmatic_drag_and_drop_hitbox_closest_edge.attachClosestEdge)({ rowKey: resolveRowByElement(element)?.key ?? "" }, {
+					input,
+					element,
+					allowedEdges: ["top", "bottom"]
+				});
+			},
+			onDrag: ({ self, location }) => {
+				const flatRow = resolveRowByElement(rowElement);
+				if (!flatRow) return;
+				scheduleHoverExpand(flatRow);
+				const edgeValue = (0, _atlaskit_pragmatic_drag_and_drop_hitbox_closest_edge.extractClosestEdge)(self.data);
+				const edge = edgeValue === "top" || edgeValue === "bottom" ? edgeValue : null;
+				const action = resolveDropAction(flatRow, rowElement, location.current.input.clientY, edge);
+				const indicatorDepth = action === require_STable_types.ESTableDropAction.CHILD ? flatRow.depth + 1 : flatRow.depth;
+				const currentIndicator = dropIndicator.value;
+				if (currentIndicator?.targetKey !== flatRow.key || currentIndicator.action !== action || currentIndicator.depth !== indicatorDepth) dropIndicator.value = {
+					targetKey: flatRow.key,
+					action,
+					depth: indicatorDepth
+				};
+				committedDropIndicator.value = {
+					targetKey: flatRow.key,
+					action,
+					depth: indicatorDepth
+				};
+			},
+			onDragLeave: () => {
+				const flatRow = resolveRowByElement(rowElement);
+				if (dropIndicator.value?.targetKey === flatRow?.key) dropIndicator.value = void 0;
+				if (hoverExpandKey.value === flatRow?.key) {
+					hoverExpandTimer.stop();
+					hoverExpandKey.value = void 0;
+				}
+			}
+		}));
+		rowCleanups.set(rowElement, cleanup);
+	};
+	const stopRowMonitor = (0, _atlaskit_pragmatic_drag_and_drop_element_adapter.monitorForElements)({
+		canMonitor: ({ source }) => {
+			return require_tableDndShared.isTableRowDragData(source.data, tableId);
+		},
+		onDrop: ({ source, location }) => {
+			const finalIndicator = committedDropIndicator.value;
+			committedDropIndicator.value = void 0;
+			draggingRowKey.value = void 0;
+			dropIndicator.value = void 0;
+			clearDragTimers();
+			if (!location.current.dropTargets[0] || !finalIndicator || !require_tableDndShared.isTableRowDragData(source.data, tableId)) return;
+			const { flatRows, getRowIndexByKey } = snapshot.value;
+			const sourceIndex = getRowIndexByKey(source.data.rowKey);
+			const targetIndex = getRowIndexByKey(finalIndicator.targetKey);
+			const sourceRow = sourceIndex === void 0 ? void 0 : flatRows[sourceIndex];
+			const targetRow = targetIndex === void 0 ? void 0 : flatRows[targetIndex];
+			if (!sourceRow || !targetRow || sourceRow.key === targetRow.key) return;
+			if (isInsideSourceSubtree(sourceRow.key, targetRow.key)) return;
+			if ((0, vue.toValue)(dragMode) === require_STable_types.ESTableRowsDragMode.FLAT) {
+				if (finalIndicator.action === require_STable_types.ESTableDropAction.CHILD) return;
+				onReorder({
+					action: finalIndicator.action,
+					sourceKey: sourceRow.key,
+					sourceItem: sourceRow.item,
+					targetKey: targetRow.key,
+					targetItem: targetRow.item,
+					sourceIndex: sourceRow.index,
+					targetIndex: targetRow.index
+				});
+				return;
+			}
+			const isChildDrop = finalIndicator.action === require_STable_types.ESTableDropAction.CHILD;
+			const parentKey = isChildDrop ? targetRow.key : targetRow.parentKey;
+			const parentIndex = parentKey === void 0 ? void 0 : getRowIndexByKey(parentKey);
+			const parentRow = parentIndex === void 0 ? void 0 : flatRows[parentIndex];
+			onTreeDrop({
+				action: finalIndicator.action,
+				sourceKey: sourceRow.key,
+				sourceItem: sourceRow.item,
+				targetKey: targetRow.key,
+				targetItem: targetRow.item,
+				parentKey,
+				parentItem: parentRow?.item,
+				depth: isChildDrop ? targetRow.depth + 1 : targetRow.depth
+			});
+		}
+	});
+	let stopAutoScroll;
+	(0, vue.watch)(scrollElement, (containerElement) => {
+		stopAutoScroll?.();
+		stopAutoScroll = void 0;
+		if (containerElement) stopAutoScroll = (0, _atlaskit_pragmatic_drag_and_drop_auto_scroll_element.autoScrollForElements)({
+			element: containerElement,
+			canScroll: ({ source }) => require_tableDndShared.isTableRowDragData(source.data, tableId)
+		});
+	}, { immediate: true });
+	(0, vue.onBeforeUnmount)(() => {
+		stopRowMonitor();
+		stopAutoScroll?.();
+		removePreviewLayer();
+		rowCleanups.forEach((cleanup) => {
+			cleanup();
+		});
+		rowCleanups.clear();
+	});
+	return {
+		registerRowElement,
+		draggingRowKey,
+		dropIndicator
+	};
+};
+//#endregion
+exports.useTableRowDnd = useTableRowDnd;

package/dist/components/STable/utils/useTableRowDnd.js

@@ -0,0 +1,308 @@
+import { ESTableDropAction, ESTableRowKind, ESTableRowsDragMode } from "../STable.types.js";
+import { TABLE_DROP_INSIDE_RATIO } from "../constants/tableSizes.js";
+import { TABLE_ROW_DRAG_TYPE, isTableRowDragData } from "./tableDndShared.js";
+import { onBeforeUnmount, shallowRef, toValue, watch } from "vue";
+import { useTimeoutFn } from "@vueuse/core";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+//#region src/components/STable/utils/useTableRowDnd.ts
+/**
+* DnD строк: draggable/dropTarget регистрируются на `<tr>` из DOM-пула, данные
+* строки читаются лениво из data-index на момент жеста — переиспользование
+* элементов пула безопасно. Payload переживает размонтирование источника
+* (monitorForElements). Tree: edges top/bottom + drop-inside центральной зоной
+* (у групп мгновенно, у строк с задержкой), hover-раскрытие веток.
+*/
+var useTableRowDnd = ({ tableId, enabled, dragMode, snapshot, scrollElement, isRowDraggable, dragExpandDelayMs, dragInsideDelayMs, isExpanded, onHoverExpand, onReorder, onTreeDrop, resolveRowPreviewTitle }) => {
+	const rowCleanups = /* @__PURE__ */ new Map();
+	const draggingRowKey = shallowRef();
+	const dropIndicator = shallowRef();
+	const committedDropIndicator = shallowRef();
+	const resolveRowByElement = (rowElement) => {
+		if (!(rowElement instanceof HTMLElement)) return;
+		const rowIndex = Number(rowElement.dataset.index);
+		if (!Number.isInteger(rowIndex)) return;
+		return snapshot.value.flatRows[rowIndex];
+	};
+	const isRowDragAllowed = (flatRow) => {
+		if (!flatRow || !toValue(enabled)) return false;
+		if (flatRow.kind !== ESTableRowKind.ROW && flatRow.kind !== ESTableRowKind.GROUP) return false;
+		const draggablePredicate = toValue(isRowDraggable);
+		return draggablePredicate ? draggablePredicate(flatRow.item) !== false : true;
+	};
+	/** Дроп в собственное поддерево запрещён. */
+	const isInsideSourceSubtree = (sourceKey, targetKey) => {
+		const { getSubtreeRangeByKey, getRowIndexByKey } = snapshot.value;
+		const sourceRange = getSubtreeRangeByKey(sourceKey);
+		const targetIndex = getRowIndexByKey(targetKey);
+		if (!sourceRange || targetIndex === void 0) return false;
+		return targetIndex >= sourceRange[0] && targetIndex <= sourceRange[1];
+	};
+	const hoverExpandTimer = useTimeoutFn(() => {
+		const targetKey = hoverExpandKey.value;
+		if (targetKey && !isExpanded(targetKey)) onHoverExpand(targetKey);
+	}, () => toValue(dragExpandDelayMs) ?? 500, { immediate: false });
+	const hoverExpandKey = shallowRef();
+	const insideArmTimer = useTimeoutFn(() => {
+		insideArmedKey.value = insideArmingKey.value;
+	}, () => toValue(dragInsideDelayMs) ?? 1300, { immediate: false });
+	const insideArmingKey = shallowRef();
+	const insideArmedKey = shallowRef();
+	const scheduleHoverExpand = (flatRow) => {
+		if (!(flatRow.hasChildren || flatRow.kind === ESTableRowKind.GROUP) || flatRow.expanded) return;
+		if (hoverExpandKey.value !== flatRow.key) {
+			hoverExpandKey.value = flatRow.key;
+			hoverExpandTimer.stop();
+			hoverExpandTimer.start();
+		}
+	};
+	const clearDragTimers = () => {
+		hoverExpandTimer.stop();
+		hoverExpandKey.value = void 0;
+		insideArmTimer.stop();
+		insideArmingKey.value = void 0;
+		insideArmedKey.value = void 0;
+	};
+	const resolveDropAction = (flatRow, targetElement, clientY, edge) => {
+		if (toValue(dragMode) === ESTableRowsDragMode.TREE) {
+			const targetRect = targetElement.getBoundingClientRect();
+			const centerZoneHalf = TABLE_DROP_INSIDE_RATIO * targetRect.height / 2;
+			if (Math.abs(clientY - (targetRect.top + targetRect.height / 2)) <= centerZoneHalf) {
+				if (flatRow.kind === ESTableRowKind.GROUP || insideArmedKey.value === flatRow.key) return ESTableDropAction.CHILD;
+				if (insideArmingKey.value !== flatRow.key) {
+					insideArmingKey.value = flatRow.key;
+					insideArmTimer.stop();
+					insideArmTimer.start();
+				}
+			} else if (insideArmingKey.value === flatRow.key) {
+				insideArmTimer.stop();
+				insideArmingKey.value = void 0;
+				insideArmedKey.value = void 0;
+			}
+		}
+		return edge === "top" ? ESTableDropAction.BEFORE : ESTableDropAction.AFTER;
+	};
+	/**
+	* Превью строки (Figma TableRowBasedList state=DND): карточка с главной ячейкой —
+	* шеврон, отступ уровня, иконка и заголовок как в строке. Нативный drag image браузер
+	* рисует полупрозрачным, поэтому превью — свой слой в body без прозрачности, который
+	* едет за курсором из onDrag; нативное превью гасится.
+	*/
+	let previewLayer;
+	/** Клон главной ячейки не должен дублировать id и попадать в таб-порядок. */
+	const stripClonedAttributes = (clone) => {
+		[clone, ...clone.querySelectorAll("[id], [tabindex]")].forEach((element) => {
+			element.removeAttribute("id");
+			element.removeAttribute("tabindex");
+		});
+	};
+	/** Главная ячейка строки: у строки данных — тело ячейки, у группы — контент с заголовком. */
+	const resolvePrimaryCellContent = (rowElement) => {
+		const content = rowElement.querySelector(".s-ui-table__cell--primary .s-ui-table__cell-body, .s-ui-table__cell--primary .s-ui-table__group-content");
+		const cell = content?.closest("td");
+		return content && cell ? {
+			content,
+			cell
+		} : void 0;
+	};
+	const buildRowPreview = (rowElement, flatRow) => {
+		const preview = document.createElement("div");
+		preview.className = "s-ui-table__row-drag-preview";
+		preview.setAttribute("aria-hidden", "true");
+		const primary = resolvePrimaryCellContent(rowElement);
+		if (!primary) {
+			preview.textContent = flatRow ? resolveRowPreviewTitle(flatRow) : "";
+			return preview;
+		}
+		const clone = primary.content.cloneNode(true);
+		if (clone instanceof Element) stripClonedAttributes(clone);
+		preview.style.inlineSize = `${Math.round(primary.cell.getBoundingClientRect().width)}px`;
+		preview.appendChild(clone);
+		return preview;
+	};
+	const movePreviewLayer = (clientX, clientY) => {
+		if (previewLayer) {
+			const offset = 8;
+			previewLayer.style.transform = `translate(${clientX + offset}px, ${clientY + offset}px)`;
+		}
+	};
+	const handlePreviewDragOver = (event) => {
+		movePreviewLayer(event.clientX, event.clientY);
+	};
+	const showPreviewLayer = (preview, clientX, clientY) => {
+		removePreviewLayer();
+		previewLayer = document.createElement("div");
+		previewLayer.className = "s-ui-table__row-drag-layer";
+		previewLayer.appendChild(preview);
+		document.body.appendChild(previewLayer);
+		document.addEventListener("dragover", handlePreviewDragOver);
+		movePreviewLayer(clientX, clientY);
+	};
+	const removePreviewLayer = () => {
+		document.removeEventListener("dragover", handlePreviewDragOver);
+		previewLayer?.remove();
+		previewLayer = void 0;
+	};
+	const registerRowElement = (rowElement) => {
+		if (!(rowElement instanceof HTMLElement)) {
+			rowCleanups.forEach((cleanup, registeredElement) => {
+				if (!registeredElement.isConnected) {
+					cleanup();
+					rowCleanups.delete(registeredElement);
+				}
+			});
+			return;
+		}
+		if (rowCleanups.has(rowElement)) return;
+		const cleanup = combine(draggable({
+			element: rowElement,
+			canDrag: () => {
+				return isRowDragAllowed(resolveRowByElement(rowElement));
+			},
+			getInitialData: () => {
+				const flatRow = resolveRowByElement(rowElement);
+				return {
+					type: TABLE_ROW_DRAG_TYPE,
+					tableId,
+					rowKey: flatRow?.key ?? "",
+					rowIndex: flatRow?.index ?? -1
+				};
+			},
+			onGenerateDragPreview: ({ nativeSetDragImage, location }) => {
+				const preview = buildRowPreview(rowElement, resolveRowByElement(rowElement));
+				const { clientX, clientY } = location.current.input;
+				disableNativeDragPreview({ nativeSetDragImage });
+				showPreviewLayer(preview, clientX, clientY);
+			},
+			onDragStart: () => {
+				draggingRowKey.value = resolveRowByElement(rowElement)?.key;
+				committedDropIndicator.value = void 0;
+			},
+			onDrop: () => {
+				draggingRowKey.value = void 0;
+				dropIndicator.value = void 0;
+				clearDragTimers();
+				removePreviewLayer();
+			}
+		}), dropTargetForElements({
+			element: rowElement,
+			canDrop: ({ source }) => {
+				if (!isTableRowDragData(source.data, tableId)) return false;
+				const flatRow = resolveRowByElement(rowElement);
+				if (!flatRow || flatRow.key === source.data.rowKey) return false;
+				return !isInsideSourceSubtree(source.data.rowKey, flatRow.key);
+			},
+			getData: ({ input, element }) => {
+				return attachClosestEdge({ rowKey: resolveRowByElement(element)?.key ?? "" }, {
+					input,
+					element,
+					allowedEdges: ["top", "bottom"]
+				});
+			},
+			onDrag: ({ self, location }) => {
+				const flatRow = resolveRowByElement(rowElement);
+				if (!flatRow) return;
+				scheduleHoverExpand(flatRow);
+				const edgeValue = extractClosestEdge(self.data);
+				const edge = edgeValue === "top" || edgeValue === "bottom" ? edgeValue : null;
+				const action = resolveDropAction(flatRow, rowElement, location.current.input.clientY, edge);
+				const indicatorDepth = action === ESTableDropAction.CHILD ? flatRow.depth + 1 : flatRow.depth;
+				const currentIndicator = dropIndicator.value;
+				if (currentIndicator?.targetKey !== flatRow.key || currentIndicator.action !== action || currentIndicator.depth !== indicatorDepth) dropIndicator.value = {
+					targetKey: flatRow.key,
+					action,
+					depth: indicatorDepth
+				};
+				committedDropIndicator.value = {
+					targetKey: flatRow.key,
+					action,
+					depth: indicatorDepth
+				};
+			},
+			onDragLeave: () => {
+				const flatRow = resolveRowByElement(rowElement);
+				if (dropIndicator.value?.targetKey === flatRow?.key) dropIndicator.value = void 0;
+				if (hoverExpandKey.value === flatRow?.key) {
+					hoverExpandTimer.stop();
+					hoverExpandKey.value = void 0;
+				}
+			}
+		}));
+		rowCleanups.set(rowElement, cleanup);
+	};
+	const stopRowMonitor = monitorForElements({
+		canMonitor: ({ source }) => {
+			return isTableRowDragData(source.data, tableId);
+		},
+		onDrop: ({ source, location }) => {
+			const finalIndicator = committedDropIndicator.value;
+			committedDropIndicator.value = void 0;
+			draggingRowKey.value = void 0;
+			dropIndicator.value = void 0;
+			clearDragTimers();
+			if (!location.current.dropTargets[0] || !finalIndicator || !isTableRowDragData(source.data, tableId)) return;
+			const { flatRows, getRowIndexByKey } = snapshot.value;
+			const sourceIndex = getRowIndexByKey(source.data.rowKey);
+			const targetIndex = getRowIndexByKey(finalIndicator.targetKey);
+			const sourceRow = sourceIndex === void 0 ? void 0 : flatRows[sourceIndex];
+			const targetRow = targetIndex === void 0 ? void 0 : flatRows[targetIndex];
+			if (!sourceRow || !targetRow || sourceRow.key === targetRow.key) return;
+			if (isInsideSourceSubtree(sourceRow.key, targetRow.key)) return;
+			if (toValue(dragMode) === ESTableRowsDragMode.FLAT) {
+				if (finalIndicator.action === ESTableDropAction.CHILD) return;
+				onReorder({
+					action: finalIndicator.action,
+					sourceKey: sourceRow.key,
+					sourceItem: sourceRow.item,
+					targetKey: targetRow.key,
+					targetItem: targetRow.item,
+					sourceIndex: sourceRow.index,
+					targetIndex: targetRow.index
+				});
+				return;
+			}
+			const isChildDrop = finalIndicator.action === ESTableDropAction.CHILD;
+			const parentKey = isChildDrop ? targetRow.key : targetRow.parentKey;
+			const parentIndex = parentKey === void 0 ? void 0 : getRowIndexByKey(parentKey);
+			const parentRow = parentIndex === void 0 ? void 0 : flatRows[parentIndex];
+			onTreeDrop({
+				action: finalIndicator.action,
+				sourceKey: sourceRow.key,
+				sourceItem: sourceRow.item,
+				targetKey: targetRow.key,
+				targetItem: targetRow.item,
+				parentKey,
+				parentItem: parentRow?.item,
+				depth: isChildDrop ? targetRow.depth + 1 : targetRow.depth
+			});
+		}
+	});
+	let stopAutoScroll;
+	watch(scrollElement, (containerElement) => {
+		stopAutoScroll?.();
+		stopAutoScroll = void 0;
+		if (containerElement) stopAutoScroll = autoScrollForElements({
+			element: containerElement,
+			canScroll: ({ source }) => isTableRowDragData(source.data, tableId)
+		});
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		stopRowMonitor();
+		stopAutoScroll?.();
+		removePreviewLayer();
+		rowCleanups.forEach((cleanup) => {
+			cleanup();
+		});
+		rowCleanups.clear();
+	});
+	return {
+		registerRowElement,
+		draggingRowKey,
+		dropIndicator
+	};
+};
+//#endregion
+export { useTableRowDnd };