@lucasols/dnd-kit-sortable 0.1.3 → 0.2.0

package/dist/index.d.ts

@@ -1,9 +1,137 @@
-export { SortableContext } from './components';
-export type { SortableContextProps } from './components';
-export { useSortable, defaultAnimateLayoutChanges, defaultNewIndexGetter, } from './hooks';
-export type { UseSortableArguments, AnimateLayoutChanges, NewIndexGetter, } from './hooks';
-export { horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, verticalListSortingStrategy, } from './strategies';
-export { sortableKeyboardCoordinates } from './sensors';
-export { arrayMove, arraySwap } from './utilities';
-export { hasSortableData } from './types';
-export type { SortableData, SortingStrategy } from './types';
+import React from "react";
+import { Active, ClientRect, Data, DraggableNode, DroppableContainer, KeyboardCoordinateGetter, Over, UniqueIdentifier, UseDraggableArguments, UseDroppableArguments } from "@lucasols/dnd-kit-core";
+import { Transform, Transition } from "@lucasols/dnd-kit-utilities";
+//#region src/types/disabled.d.ts
+interface Disabled {
+  draggable?: boolean;
+  droppable?: boolean;
+}
+//#endregion
+//#region src/types/data.d.ts
+type SortableData = {
+  sortable: {
+    containerId: UniqueIdentifier;
+    items: UniqueIdentifier[];
+    index: number;
+  };
+};
+//#endregion
+//#region src/types/strategies.d.ts
+type SortingStrategy = (args: {
+  activeNodeRect: ClientRect | null;
+  activeIndex: number;
+  index: number;
+  rects: ClientRect[];
+  overIndex: number;
+}) => Transform | null;
+//#endregion
+//#region src/types/type-guard.d.ts
+export declare function hasSortableData<T extends Active | Over | DraggableNode | DroppableContainer>(entry: T | null | undefined): entry is T & {
+  data: {
+    current: Data<SortableData>;
+  };
+};
+//#endregion
+//#region src/components/SortableContext.d.ts
+interface Props {
+  children: React.ReactNode;
+  items: (UniqueIdentifier | {
+    id: UniqueIdentifier;
+  })[];
+  strategy?: SortingStrategy;
+  id?: string;
+  disabled?: boolean | Disabled;
+}
+export declare function SortableContext({ children, id, items: userDefinedItems, strategy, disabled: disabledProp }: Props): React.JSX.Element;
+//#endregion
+//#region src/hooks/types.d.ts
+type SortableTransition = Pick<Transition, 'easing' | 'duration'>;
+type AnimateLayoutChanges = (args: {
+  active: Active | null;
+  containerId: UniqueIdentifier;
+  isDragging: boolean;
+  isSorting: boolean;
+  id: UniqueIdentifier;
+  index: number;
+  items: UniqueIdentifier[];
+  previousItems: UniqueIdentifier[];
+  previousContainerId: UniqueIdentifier;
+  newIndex: number;
+  transition: SortableTransition | null;
+  wasDragging: boolean;
+}) => boolean;
+interface NewIndexGetterArguments {
+  id: UniqueIdentifier;
+  items: UniqueIdentifier[];
+  activeIndex: number;
+  overIndex: number;
+}
+type NewIndexGetter = (args: NewIndexGetterArguments) => number;
+//#endregion
+//#region src/hooks/useSortable.d.ts
+interface Arguments extends Omit<UseDraggableArguments, 'disabled'>, Pick<UseDroppableArguments, 'resizeObserverConfig'> {
+  animateLayoutChanges?: AnimateLayoutChanges;
+  disabled?: boolean | Disabled;
+  getNewIndex?: NewIndexGetter;
+  strategy?: SortingStrategy;
+  transition?: SortableTransition | null;
+}
+export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled: localDisabled, data: customData, getNewIndex, id, strategy: localStrategy, resizeObserverConfig, transition }: Arguments): {
+  active: import("@lucasols/dnd-kit-core").Active | null;
+  activeIndex: number;
+  attributes: import("@lucasols/dnd-kit-core").DraggableAttributes;
+  data: SortableData & {
+    [x: string]: any;
+  };
+  rect: import("react").RefObject<import("@lucasols/dnd-kit-core").ClientRect | null>;
+  index: number;
+  newIndex: number;
+  items: import("@lucasols/dnd-kit-core").UniqueIdentifier[];
+  isOver: boolean;
+  isSorting: boolean;
+  isDragging: boolean;
+  listeners: import("@lucasols/dnd-kit-core").DraggableSyntheticListeners;
+  node: import("react").RefObject<HTMLElement | null>;
+  overIndex: number;
+  over: import("@lucasols/dnd-kit-core").Over | null;
+  setNodeRef: (node: HTMLElement | null) => void;
+  setActivatorNodeRef: (element: HTMLElement | null) => void;
+  setDroppableNodeRef: (element: HTMLElement | null) => void;
+  setDraggableNodeRef: (element: HTMLElement | null) => void;
+  transform: import("@lucasols/dnd-kit-utilities").Transform | null;
+  transition: string | undefined;
+};
+//#endregion
+//#region src/hooks/defaults.d.ts
+export declare const defaultNewIndexGetter: NewIndexGetter;
+export declare const defaultAnimateLayoutChanges: AnimateLayoutChanges;
+//#endregion
+//#region src/strategies/horizontalListSorting.d.ts
+export declare const horizontalListSortingStrategy: SortingStrategy;
+//#endregion
+//#region src/strategies/rectSorting.d.ts
+export declare const rectSortingStrategy: SortingStrategy;
+//#endregion
+//#region src/strategies/rectSwapping.d.ts
+export declare const rectSwappingStrategy: SortingStrategy;
+//#endregion
+//#region src/strategies/verticalListSorting.d.ts
+export declare const verticalListSortingStrategy: SortingStrategy;
+//#endregion
+//#region src/sensors/keyboard/sortableKeyboardCoordinates.d.ts
+export declare const sortableKeyboardCoordinates: KeyboardCoordinateGetter;
+//#endregion
+//#region src/utilities/arrayMove.d.ts
+/**
+ * Move an array item to a different position. Returns a new array with the item moved to the new position.
+ */
+export declare function arrayMove<T>(array: T[], from: number, to: number): T[];
+//#endregion
+//#region src/utilities/arraySwap.d.ts
+/**
+ * Swap an array item to a different position. Returns a new array with the item swapped to the new position.
+ */
+export declare function arraySwap<T>(array: T[], from: number, to: number): T[];
+//#endregion
+export type { AnimateLayoutChanges, NewIndexGetter, Props as SortableContextProps, SortableData, SortingStrategy, Arguments as UseSortableArguments };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,8 +1,521 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./dnd-kit-sortable.cjs.production.min.js')
-} else {
-  module.exports = require('./dnd-kit-sortable.cjs.development.js')
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { KeyboardCode, closestCorners, getClientRect, getFirstCollision, getScrollableAncestors, useDndContext, useDraggable, useDroppable } from "@lucasols/dnd-kit-core";
+import { CSS, isKeyboardEvent, subtract, useCombinedRefs, useIsomorphicLayoutEffect, useUniqueId } from "@lucasols/dnd-kit-utilities";
+//#region src/utilities/arrayMove.ts
+/**
+* Move an array item to a different position. Returns a new array with the item moved to the new position.
+*/
+function arrayMove(array, from, to) {
+	const newArray = array.slice();
+	newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
+	return newArray;
+}
+//#endregion
+//#region src/utilities/arraySwap.ts
+/**
+* Swap an array item to a different position. Returns a new array with the item swapped to the new position.
+*/
+function arraySwap(array, from, to) {
+	const newArray = array.slice();
+	newArray[from] = array[to];
+	newArray[to] = array[from];
+	return newArray;
+}
+//#endregion
+//#region src/utilities/getSortedRects.ts
+function getSortedRects(items, rects) {
+	return items.reduce((accumulator, id, index) => {
+		const rect = rects.get(id);
+		if (rect) accumulator[index] = rect;
+		return accumulator;
+	}, Array(items.length));
+}
+//#endregion
+//#region src/utilities/isValidIndex.ts
+function isValidIndex(index) {
+	return index !== null && index >= 0;
+}
+//#endregion
+//#region src/utilities/itemsEqual.ts
+function itemsEqual(a, b) {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+//#endregion
+//#region src/utilities/normalizeDisabled.ts
+function normalizeDisabled(disabled) {
+	if (typeof disabled === "boolean") return {
+		draggable: disabled,
+		droppable: disabled
+	};
+	return disabled;
+}
+//#endregion
+//#region src/strategies/horizontalListSorting.ts
+const defaultScale$1 = {
+	scaleX: 1,
+	scaleY: 1
+};
+const horizontalListSortingStrategy = ({ rects, activeNodeRect: fallbackActiveRect, activeIndex, overIndex, index }) => {
+	const activeNodeRect = rects[activeIndex] ?? fallbackActiveRect;
+	if (!activeNodeRect) return null;
+	const itemGap = getItemGap$1(rects, index, activeIndex);
+	if (index === activeIndex) {
+		const newIndexRect = rects[overIndex];
+		if (!newIndexRect) return null;
+		return {
+			x: activeIndex < overIndex ? newIndexRect.left + newIndexRect.width - (activeNodeRect.left + activeNodeRect.width) : newIndexRect.left - activeNodeRect.left,
+			y: 0,
+			...defaultScale$1
+		};
+	}
+	if (index > activeIndex && index <= overIndex) return {
+		x: -activeNodeRect.width - itemGap,
+		y: 0,
+		...defaultScale$1
+	};
+	if (index < activeIndex && index >= overIndex) return {
+		x: activeNodeRect.width + itemGap,
+		y: 0,
+		...defaultScale$1
+	};
+	return {
+		x: 0,
+		y: 0,
+		...defaultScale$1
+	};
+};
+function getItemGap$1(rects, index, activeIndex) {
+	const currentRect = rects[index];
+	const previousRect = rects[index - 1];
+	const nextRect = rects[index + 1];
+	if (!currentRect || !previousRect && !nextRect) return 0;
+	if (activeIndex < index) return previousRect ? currentRect.left - (previousRect.left + previousRect.width) : nextRect.left - (currentRect.left + currentRect.width);
+	return nextRect ? nextRect.left - (currentRect.left + currentRect.width) : currentRect.left - (previousRect.left + previousRect.width);
+}
+//#endregion
+//#region src/strategies/rectSorting.ts
+const rectSortingStrategy = ({ rects, activeIndex, overIndex, index }) => {
+	const newRects = arrayMove(rects, overIndex, activeIndex);
+	const oldRect = rects[index];
+	const newRect = newRects[index];
+	if (!newRect || !oldRect) return null;
+	return {
+		x: newRect.left - oldRect.left,
+		y: newRect.top - oldRect.top,
+		scaleX: newRect.width / oldRect.width,
+		scaleY: newRect.height / oldRect.height
+	};
+};
+//#endregion
+//#region src/strategies/rectSwapping.ts
+const rectSwappingStrategy = ({ activeIndex, index, rects, overIndex }) => {
+	let oldRect;
+	let newRect;
+	if (index === activeIndex) {
+		oldRect = rects[index];
+		newRect = rects[overIndex];
+	}
+	if (index === overIndex) {
+		oldRect = rects[index];
+		newRect = rects[activeIndex];
+	}
+	if (!newRect || !oldRect) return null;
+	return {
+		x: newRect.left - oldRect.left,
+		y: newRect.top - oldRect.top,
+		scaleX: newRect.width / oldRect.width,
+		scaleY: newRect.height / oldRect.height
+	};
+};
+//#endregion
+//#region src/strategies/verticalListSorting.ts
+const defaultScale = {
+	scaleX: 1,
+	scaleY: 1
+};
+const verticalListSortingStrategy = ({ activeIndex, activeNodeRect: fallbackActiveRect, index, rects, overIndex }) => {
+	const activeNodeRect = rects[activeIndex] ?? fallbackActiveRect;
+	if (!activeNodeRect) return null;
+	if (index === activeIndex) {
+		const overIndexRect = rects[overIndex];
+		if (!overIndexRect) return null;
+		return {
+			x: 0,
+			y: activeIndex < overIndex ? overIndexRect.top + overIndexRect.height - (activeNodeRect.top + activeNodeRect.height) : overIndexRect.top - activeNodeRect.top,
+			...defaultScale
+		};
+	}
+	const itemGap = getItemGap(rects, index, activeIndex);
+	if (index > activeIndex && index <= overIndex) return {
+		x: 0,
+		y: -activeNodeRect.height - itemGap,
+		...defaultScale
+	};
+	if (index < activeIndex && index >= overIndex) return {
+		x: 0,
+		y: activeNodeRect.height + itemGap,
+		...defaultScale
+	};
+	return {
+		x: 0,
+		y: 0,
+		...defaultScale
+	};
+};
+function getItemGap(clientRects, index, activeIndex) {
+	const currentRect = clientRects[index];
+	const previousRect = clientRects[index - 1];
+	const nextRect = clientRects[index + 1];
+	if (!currentRect) return 0;
+	if (activeIndex < index) return previousRect ? currentRect.top - (previousRect.top + previousRect.height) : nextRect ? nextRect.top - (currentRect.top + currentRect.height) : 0;
+	return nextRect ? nextRect.top - (currentRect.top + currentRect.height) : previousRect ? currentRect.top - (previousRect.top + previousRect.height) : 0;
 }
+//#endregion
+//#region src/components/SortableContext.tsx
+const ID_PREFIX = "Sortable";
+const Context = React.createContext({
+	activeIndex: -1,
+	containerId: ID_PREFIX,
+	disableTransforms: false,
+	items: [],
+	overIndex: -1,
+	useDragOverlay: false,
+	sortedRects: [],
+	strategy: rectSortingStrategy,
+	disabled: {
+		draggable: false,
+		droppable: false
+	}
+});
+function SortableContext({ children, id, items: userDefinedItems, strategy = rectSortingStrategy, disabled: disabledProp = false }) {
+	const { active, dragOverlay, droppableRects, over, measureDroppableContainers } = useDndContext();
+	const containerId = useUniqueId(ID_PREFIX, id);
+	const useDragOverlay = Boolean(dragOverlay.rect !== null);
+	const items = useMemo(() => userDefinedItems.map((item) => typeof item === "object" && "id" in item ? item.id : item), [userDefinedItems]);
+	const isDragging = active != null;
+	const activeIndex = active ? items.indexOf(active.id) : -1;
+	const overIndex = over ? items.indexOf(over.id) : -1;
+	const previousItemsRef = useRef(items);
+	const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
+	const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
+	const disabled = normalizeDisabled(disabledProp);
+	useIsomorphicLayoutEffect(() => {
+		if (itemsHaveChanged && isDragging) measureDroppableContainers(items);
+	}, [
+		itemsHaveChanged,
+		items,
+		isDragging,
+		measureDroppableContainers
+	]);
+	useEffect(() => {
+		previousItemsRef.current = items;
+	}, [items]);
+	const contextValue = useMemo(() => ({
+		activeIndex,
+		containerId,
+		disabled,
+		disableTransforms,
+		items,
+		overIndex,
+		useDragOverlay,
+		sortedRects: getSortedRects(items, droppableRects),
+		strategy
+	}), [
+		activeIndex,
+		containerId,
+		disabled.draggable,
+		disabled.droppable,
+		disableTransforms,
+		items,
+		overIndex,
+		droppableRects,
+		useDragOverlay,
+		strategy
+	]);
+	return /* @__PURE__ */ React.createElement(Context.Provider, { value: contextValue }, children);
+}
+//#endregion
+//#region src/hooks/defaults.ts
+const defaultNewIndexGetter = ({ id, items, activeIndex, overIndex }) => arrayMove(items, activeIndex, overIndex).indexOf(id);
+const defaultAnimateLayoutChanges = ({ containerId, isSorting, wasDragging, index, items, newIndex, previousItems, previousContainerId, transition }) => {
+	if (!transition || !wasDragging) return false;
+	if (previousItems !== items && index === newIndex) return false;
+	if (isSorting) return true;
+	return newIndex !== index && containerId === previousContainerId;
+};
+const defaultTransition = {
+	duration: 200,
+	easing: "ease"
+};
+const transitionProperty = "transform";
+const disabledTransition = CSS.Transition.toString({
+	property: transitionProperty,
+	duration: 0,
+	easing: "linear"
+});
+const defaultAttributes = { roleDescription: "sortable" };
+//#endregion
+//#region src/hooks/utilities/useDerivedTransform.ts
+function useDerivedTransform({ disabled, index, node, rect }) {
+	const [derivedTransform, setDerivedtransform] = useState(null);
+	const previousIndex = useRef(index);
+	useIsomorphicLayoutEffect(() => {
+		if (!disabled && index !== previousIndex.current && node.current) {
+			const initial = rect.current;
+			if (initial) {
+				const current = getClientRect(node.current, { ignoreTransform: true });
+				const delta = {
+					x: initial.left - current.left,
+					y: initial.top - current.top,
+					scaleX: initial.width / current.width,
+					scaleY: initial.height / current.height
+				};
+				if (delta.x || delta.y) setDerivedtransform(delta);
+			}
+		}
+		if (index !== previousIndex.current) previousIndex.current = index;
+	}, [
+		disabled,
+		index,
+		node,
+		rect
+	]);
+	useEffect(() => {
+		if (derivedTransform) setDerivedtransform(null);
+	}, [derivedTransform]);
+	return derivedTransform;
+}
+//#endregion
+//#region src/hooks/useSortable.ts
+function useSortable({ animateLayoutChanges = defaultAnimateLayoutChanges, attributes: userDefinedAttributes, disabled: localDisabled, data: customData, getNewIndex = defaultNewIndexGetter, id, strategy: localStrategy, resizeObserverConfig, transition = defaultTransition }) {
+	const { items, containerId, activeIndex, disabled: globalDisabled, disableTransforms, sortedRects, overIndex, useDragOverlay, strategy: globalStrategy } = useContext(Context);
+	const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
+	const index = items.indexOf(id);
+	const data = useMemo(() => ({
+		sortable: {
+			containerId,
+			index,
+			items
+		},
+		...customData
+	}), [
+		containerId,
+		customData,
+		index,
+		items
+	]);
+	const itemsAfterCurrentSortable = useMemo(() => items.slice(items.indexOf(id)), [items, id]);
+	const { rect, node, isOver, setNodeRef: setDroppableNodeRef } = useDroppable({
+		id,
+		data,
+		disabled: disabled.droppable,
+		resizeObserverConfig: {
+			updateMeasurementsFor: itemsAfterCurrentSortable,
+			...resizeObserverConfig
+		}
+	});
+	const { active, activatorEvent, activeNodeRect, attributes, setNodeRef: setDraggableNodeRef, listeners, isDragging, over, setActivatorNodeRef, transform } = useDraggable({
+		id,
+		data,
+		attributes: {
+			...defaultAttributes,
+			...userDefinedAttributes
+		},
+		disabled: disabled.draggable
+	});
+	const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
+	const isSorting = Boolean(active);
+	const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
+	const shouldDisplaceDragSource = !useDragOverlay && isDragging;
+	const finalTransform = displaceItem ? (shouldDisplaceDragSource && displaceItem ? transform : null) ?? (localStrategy ?? globalStrategy)({
+		rects: sortedRects,
+		activeNodeRect,
+		activeIndex,
+		overIndex,
+		index
+	}) : null;
+	const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
+		id,
+		items,
+		activeIndex,
+		overIndex
+	}) : index;
+	const activeId = active?.id;
+	const previous = useRef({
+		activeId,
+		items,
+		newIndex,
+		containerId
+	});
+	const itemsHaveChanged = items !== previous.current.items;
+	const shouldAnimateLayoutChanges = animateLayoutChanges({
+		active,
+		containerId,
+		isDragging,
+		isSorting,
+		id,
+		index,
+		items,
+		newIndex: previous.current.newIndex,
+		previousItems: previous.current.items,
+		previousContainerId: previous.current.containerId,
+		transition,
+		wasDragging: previous.current.activeId != null
+	});
+	const derivedTransform = useDerivedTransform({
+		disabled: !shouldAnimateLayoutChanges,
+		index,
+		node,
+		rect
+	});
+	useEffect(() => {
+		if (isSorting && previous.current.newIndex !== newIndex) previous.current.newIndex = newIndex;
+		if (containerId !== previous.current.containerId) previous.current.containerId = containerId;
+		if (items !== previous.current.items) previous.current.items = items;
+	}, [
+		isSorting,
+		newIndex,
+		containerId,
+		items
+	]);
+	useEffect(() => {
+		if (activeId === previous.current.activeId) return;
+		if (activeId && !previous.current.activeId) {
+			previous.current.activeId = activeId;
+			return;
+		}
+		const timeoutId = setTimeout(() => {
+			previous.current.activeId = activeId;
+		}, 50);
+		return () => clearTimeout(timeoutId);
+	}, [activeId]);
+	return {
+		active,
+		activeIndex,
+		attributes,
+		data,
+		rect,
+		index,
+		newIndex,
+		items,
+		isOver,
+		isSorting,
+		isDragging,
+		listeners,
+		node,
+		overIndex,
+		over,
+		setNodeRef,
+		setActivatorNodeRef,
+		setDroppableNodeRef,
+		setDraggableNodeRef,
+		transform: derivedTransform ?? finalTransform,
+		transition: getTransition()
+	};
+	function getTransition() {
+		if (derivedTransform || itemsHaveChanged && previous.current.newIndex === index) return disabledTransition;
+		if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) return;
+		if (isSorting || shouldAnimateLayoutChanges) return CSS.Transition.toString({
+			...transition,
+			property: transitionProperty
+		});
+	}
+}
+function normalizeLocalDisabled(localDisabled, globalDisabled) {
+	if (typeof localDisabled === "boolean") return {
+		draggable: localDisabled,
+		droppable: false
+	};
+	return {
+		draggable: localDisabled?.draggable ?? globalDisabled.draggable,
+		droppable: localDisabled?.droppable ?? globalDisabled.droppable
+	};
+}
+//#endregion
+//#region src/types/type-guard.ts
+function hasSortableData(entry) {
+	if (!entry) return false;
+	const data = entry.data.current;
+	if (data && "sortable" in data && typeof data.sortable === "object" && "containerId" in data.sortable && "items" in data.sortable && "index" in data.sortable) return true;
+	return false;
+}
+//#endregion
+//#region src/sensors/keyboard/sortableKeyboardCoordinates.ts
+const directions = [
+	KeyboardCode.Down,
+	KeyboardCode.Right,
+	KeyboardCode.Up,
+	KeyboardCode.Left
+];
+const sortableKeyboardCoordinates = (event, { context: { active, collisionRect, droppableRects, droppableContainers, over, scrollableAncestors } }) => {
+	if (directions.includes(event.code)) {
+		event.preventDefault();
+		if (!active || !collisionRect) return;
+		const filteredContainers = [];
+		droppableContainers.getEnabled().forEach((entry) => {
+			if (!entry || entry?.disabled) return;
+			const rect = droppableRects.get(entry.id);
+			if (!rect) return;
+			switch (event.code) {
+				case KeyboardCode.Down:
+					if (collisionRect.top < rect.top) filteredContainers.push(entry);
+					break;
+				case KeyboardCode.Up:
+					if (collisionRect.top > rect.top) filteredContainers.push(entry);
+					break;
+				case KeyboardCode.Left:
+					if (collisionRect.left > rect.left) filteredContainers.push(entry);
+					break;
+				case KeyboardCode.Right: if (collisionRect.left < rect.left) filteredContainers.push(entry);
+			}
+		});
+		const collisions = closestCorners({
+			active,
+			collisionRect,
+			droppableRects,
+			droppableContainers: filteredContainers,
+			pointerCoordinates: null
+		});
+		let closestId = getFirstCollision(collisions, "id");
+		if (closestId === over?.id && collisions.length > 1) closestId = collisions[1].id;
+		if (closestId != null) {
+			const activeDroppable = droppableContainers.get(active.id);
+			const newDroppable = droppableContainers.get(closestId);
+			const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
+			const newNode = newDroppable?.node.current;
+			if (newNode && newRect && activeDroppable && newDroppable) {
+				const hasDifferentScrollAncestors = getScrollableAncestors(newNode).some((element, index) => scrollableAncestors[index] !== element);
+				const hasSameContainer = isSameContainer(activeDroppable, newDroppable);
+				const isAfterActive = isAfter(activeDroppable, newDroppable);
+				const offset = hasDifferentScrollAncestors || !hasSameContainer ? {
+					x: 0,
+					y: 0
+				} : {
+					x: isAfterActive ? collisionRect.width - newRect.width : 0,
+					y: isAfterActive ? collisionRect.height - newRect.height : 0
+				};
+				const rectCoordinates = {
+					x: newRect.left,
+					y: newRect.top
+				};
+				return offset.x && offset.y ? rectCoordinates : subtract(rectCoordinates, offset);
+			}
+		}
+	}
+};
+function isSameContainer(a, b) {
+	if (!hasSortableData(a) || !hasSortableData(b)) return false;
+	return a.data.current.sortable.containerId === b.data.current.sortable.containerId;
+}
+function isAfter(a, b) {
+	if (!hasSortableData(a) || !hasSortableData(b)) return false;
+	if (!isSameContainer(a, b)) return false;
+	return a.data.current.sortable.index < b.data.current.sortable.index;
+}
+//#endregion
+export { SortableContext, arrayMove, arraySwap, defaultAnimateLayoutChanges, defaultNewIndexGetter, hasSortableData, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy };
+
+//# sourceMappingURL=index.js.map