fluid-dnd 2.3.0 → 2.4.0

package/dist/core/events/insert.js

@@ -0,0 +1,80 @@
+import { getParentDraggableChildren, getSiblings } from '../utils/GetStyles';
+import getTranslationByDragging from '../events/dragAndDrop/getTranslationByDraggingAndEvent';
+import { IsHTMLElement } from '../utils/typesCheckers';
+import { removeTempChild } from '../tempChildren';
+import { DISABLE_TRANSITION, DRAGGABLE_CLASS } from '../utils/classes';
+import { addClass, containClass, removeClass } from '../utils/dom/classList';
+import { isTempElement, observeMutation } from '../utils/observer';
+import { useChangeDraggableStyles } from './changeDraggableStyles';
+export default function useInsertEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
+    const { delayBeforeInsert } = currentConfig;
+    const [removeElementDraggingStyles, _, dragEventOverElement] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
+    // #region Insert
+    const emitInsertEventToSiblings = (targetIndex, draggedElement, droppable, value, startInserting) => {
+        const translation = getTranslationByDragging(draggedElement, 'insert', currentConfig.direction, droppable);
+        const { onInsertEvent } = currentConfig;
+        const siblings = getParentDraggableChildren(droppable);
+        for (const [index, sibling] of siblings.entries()) {
+            if (!containClass(sibling, DRAGGABLE_CLASS)) {
+                continue;
+            }
+            if (index >= targetIndex) {
+                dragEventOverElement(sibling, translation);
+            }
+        }
+        startInserting();
+        setTimeout(() => {
+            onInsertEvent(targetIndex, value);
+            onFinishInsertElement(targetIndex, droppable, currentConfig);
+            removeElementDraggingStyles(draggedElement);
+            removeTranslateFromSiblings(draggedElement, parent);
+            removeTempChild(parent, 0, true);
+        }, delayBeforeInsert);
+    };
+    const removeTranslateFromSiblings = (element, parent) => {
+        const [siblings] = getSiblings(element, parent);
+        for (const sibling of [...siblings, element]) {
+            removeTranslateWhitoutTransition(sibling);
+        }
+    };
+    const removeTranslateWhitoutTransition = (element) => {
+        if (IsHTMLElement(element)) {
+            element.style.transition = '';
+            element.style.transform = '';
+        }
+    };
+    return [emitInsertEventToSiblings];
+}
+const childrenMutationFilter = (mutation) => {
+    const addedNodes = mutation.addedNodes
+        .values()
+        .filter((element) => !isTempElement(element))
+        .toArray();
+    return addedNodes.length > 0;
+};
+const onFinishInsertElement = (targetIndex, droppable, config) => {
+    const { insertingFromClass, animationDuration } = config;
+    const observer = observeMutation(() => {
+        const siblings = getParentDraggableChildren(droppable);
+        const newElement = siblings[targetIndex];
+        addClass(newElement, insertingFromClass);
+        addClass(newElement, DISABLE_TRANSITION);
+        setTimeout(() => {
+            removeClass(newElement, DISABLE_TRANSITION);
+            removeClass(newElement, insertingFromClass);
+            observer.disconnect();
+        }, animationDuration);
+    }, droppable, {
+        childList: true
+    }, childrenMutationFilter);
+};
+export const insertToListEmpty = (config, droppable, targetIndex, value) => {
+    if (!droppable) {
+        return;
+    }
+    const { onInsertEvent, delayBeforeInsert } = config;
+    setTimeout(() => {
+        onInsertEvent(targetIndex, value);
+        onFinishInsertElement(targetIndex, droppable, config);
+    }, delayBeforeInsert);
+};

package/dist/core/events/remove.d.ts

@@ -0,0 +1,4 @@
+import { CoreConfig } from '..';
+import { DroppableConfig } from '../config/configHandler';
+import HandlerPublisher from '@/core/HandlerPublisher';
+export default function useRemoveEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(targetIndex: number, draggedElement: HTMLElement, droppableConfig: DroppableConfig<T>, onFinishRemoveEvent: (element: HTMLElement) => void) => void, (draggedElement: HTMLElement) => void];

package/dist/core/events/remove.js

@@ -0,0 +1,51 @@
+import { getSiblings } from '../utils/GetStyles';
+import { moveTranslate } from '../utils/SetStyles';
+import getTranslationByDragging from './dragAndDrop/getTranslationByDraggingAndEvent';
+import { IsHTMLElement } from '../utils/typesCheckers';
+import { removeTempChild } from '../tempChildren';
+import { useChangeDraggableStyles } from './changeDraggableStyles';
+export default function useRemoveEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
+    const { animationDuration } = currentConfig;
+    const [removeElementDraggingStyles] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
+    const emitRemoveEventToSiblings = (targetIndex, draggedElement, droppableConfig, onFinishRemoveEvent) => {
+        if (!droppableConfig || !droppableConfig.droppable || !droppableConfig.config) {
+            return;
+        }
+        const { droppable, config } = droppableConfig;
+        let [siblings] = getSiblings(draggedElement, droppable);
+        siblings = [draggedElement, ...siblings].toReversed();
+        const translation = getTranslationByDragging(draggedElement, 'remove', config.direction, droppable);
+        for (const [index, sibling] of siblings.entries()) {
+            if (index >= targetIndex) {
+                startDragEventOverElement(sibling, translation);
+                setTimeout(() => {
+                    onFinishRemoveEvent(sibling);
+                }, animationDuration);
+            }
+        }
+    };
+    const emitFinishRemoveEventToSiblings = (draggedElement) => {
+        removeTempChild(parent, animationDuration, true);
+        setTimeout(() => {
+            removeElementDraggingStyles(draggedElement);
+            removeTranslateFromSiblings(draggedElement, parent);
+        }, animationDuration);
+    };
+    const startDragEventOverElement = (element, translation) => {
+        const { width, height } = translation;
+        moveTranslate(element, height, width);
+    };
+    const removeTranslateFromSiblings = (element, parent) => {
+        const [siblings] = getSiblings(element, parent);
+        for (const sibling of [...siblings, element]) {
+            removeTranslateWhitoutTransition(sibling);
+        }
+    };
+    const removeTranslateWhitoutTransition = (element) => {
+        if (IsHTMLElement(element)) {
+            element.style.transition = '';
+            element.style.transform = '';
+        }
+    };
+    return [emitRemoveEventToSiblings, emitFinishRemoveEventToSiblings];
+}

package/dist/core/{utils/scroll.d.ts → positioning/autoScroll.d.ts}

@@ -1,6 +1,4 @@
-import { ElementScroll } from 'index';
 import { Coordinate, Direction } from '..';
-export declare const scrollPercent: (direction: Direction, droppable: HTMLElement, droppableScroll: ElementScroll) => number;
 export declare const useScroll: (draggedElement: HTMLElement) => readonly [(direction: Direction, parent: HTMLElement, position: {
     top: number;
     left: number;

package/dist/core/{utils/scroll.js → positioning/autoScroll.js}

@@ -1,4 +1,4 @@
-import { draggableIsCompleteOutside, getPropByDirection } from './GetStyles';
+import { draggableIsCompleteOutside, getPropByDirection } from '../utils/GetStyles';
 const scrollByDirection = (element, direction, scrollAmount) => {
     if (scrollAmount == 0) {
         return;
@@ -10,10 +10,6 @@ const scrollByDirection = (element, direction, scrollAmount) => {
         element.scrollBy(scrollAmount, 0);
     }
 };
-export const scrollPercent = (direction, droppable, droppableScroll) => {
-    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
-    return droppableScroll[scrollElement] / (droppable[scrollDistance] - droppable[clientDistance]);
-};
 export const useScroll = (draggedElement) => {
     let lastScrollAmount = 0.5;
     const minScrollAmountDiff = 0.03;

package/dist/core/{utils/SetTransform.d.ts → positioning/usePositioning.d.ts}

@@ -1,6 +1,6 @@
 import { DragMouseTouchEvent, TransformEvent } from '../../../index';
 import { CoordinateMap, Direction } from '..';
-export declare const useTransform: (draggedElement: HTMLElement, coordinateTransforms: CoordinateMap[]) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
+export declare const usePositioning: (draggedElement: HTMLElement, coordinateTransforms: CoordinateMap[]) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
     pageX: number;
     pageY: number;
 }, direction?: Direction) => void, (event: DragMouseTouchEvent, element: HTMLElement) => void];

package/dist/core/{utils/SetTransform.js → positioning/usePositioning.js}

@@ -1,9 +1,9 @@
-import { getNearestFixedParentPosition, getPropByDirection, getValueFromProperty } from './GetStyles';
+import { getNearestFixedParentPosition, getPropByDirection, getValueFromProperty } from '../utils/GetStyles';
 import { HORIZONTAL, VERTICAL } from '..';
-import { useScroll } from './scroll';
-import { HANDLER_CLASS, DRAGGING_CLASS } from './classes';
-import { containClass } from './dom/classList';
-export const useTransform = (draggedElement, coordinateTransforms) => {
+import { useScroll } from './autoScroll';
+import { HANDLER_CLASS, DRAGGING_CLASS } from '../utils/classes';
+import { containClass } from '../utils/dom/classList';
+export const usePositioning = (draggedElement, coordinateTransforms) => {
     let currentOffset = { offsetX: 0, offsetY: 0 };
     let position = { top: 0, left: 0 };
     let translate = { x: 0, y: 0 };

package/dist/core/{utils/tempChildren.d.ts → tempChildren.d.ts}

@@ -1,5 +1,4 @@
-import { DroppableConfig } from "../configHandler";
-export declare const isTempElement: (element: Node) => boolean;
+import { DroppableConfig } from './config/configHandler';
 export declare const addTempChild: <T>(draggedElement: HTMLElement | undefined, parent: Element, ifStartDragging: boolean, droppableConfig?: DroppableConfig<T>, addingAnimationDuration?: number) => void;
 export declare const addTempChildOnInsert: <T>(draggedElement: HTMLElement | undefined, ifStartDragging: boolean, droppableConfig?: DroppableConfig<T>) => void;
 export declare const removeTempChildrens: (droppable: HTMLElement, parent: HTMLElement, droppableGroupClass: string | null, animationDuration: number, draggedElementIsOutside?: boolean) => void;

package/dist/core/{utils/tempChildren.js → tempChildren.js}

@@ -1,22 +1,14 @@
-import { HORIZONTAL, VERTICAL } from "..";
-import { getPropByDirection } from "./GetStyles";
-import { getGapPixels } from "./ParseStyles";
-import { setSizeStyles, setTranistion } from "./SetStyles";
-import { observeMutation } from "./observer";
-import getTranslationByDragging from "./translate/GetTranslationByDraggingAndEvent";
-import { scrollPercent } from "./scroll";
-import { TEMP_CHILD_CLASS } from ".";
-import { addClass, getClassesSelector } from "./dom/classList";
-import { IsHTMLElement } from "./touchDevice";
-const START_DRAG_EVENT = "startDrag";
-const timingFunction = "cubic-bezier(0.2, 0, 0, 1)";
+import { HORIZONTAL, VERTICAL } from '.';
+import { getPropByDirection } from './utils/GetStyles';
+import { getGapPixels } from './utils/ParseStyles';
+import { setSizeStyles, setTranistion } from './utils/SetStyles';
+import { observeMutation } from './utils/observer';
+import getTranslationByDragging from './events/dragAndDrop/getTranslationByDraggingAndEvent';
+import { TEMP_CHILD_CLASS } from './utils';
+import { addClass, getClassesSelector } from './utils/dom/classList';
+const START_DRAG_EVENT = 'startDrag';
+const timingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
 const DELAY_TIME = 50;
-export const isTempElement = (element) => {
-    if (!IsHTMLElement(element)) {
-        return false;
-    }
-    return element.classList.contains(TEMP_CHILD_CLASS);
-};
 const getDistance = (droppable, draggedElement, direction) => {
     let distances = getTranslationByDragging(draggedElement, START_DRAG_EVENT, direction, droppable);
     const gap = getGapPixels(droppable, direction);
@@ -29,10 +21,7 @@ const getDistance = (droppable, draggedElement, direction) => {
 const getlarge = (direction, draggedElement) => {
     const largeDirection = direction == HORIZONTAL ? VERTICAL : HORIZONTAL;
     const { distance, getRect } = getPropByDirection(largeDirection);
-    return [
-        getRect(draggedElement)[distance],
-        distance,
-    ];
+    return [getRect(draggedElement)[distance], distance];
 };
 const setSizes = (element, height, width) => {
     setSizeStyles(element, height, width);
@@ -47,6 +36,10 @@ const updateChildAfterCreated = (child, droppable, distances) => {
         observer.disconnect();
     };
 };
+const scrollPercent = (direction, droppable, droppableScroll) => {
+    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
+    return droppableScroll[scrollElement] / (droppable[scrollDistance] - droppable[clientDistance]);
+};
 const fixScrollInitialChange = (droppableConfig, ifStartDragging) => {
     if (!ifStartDragging) {
         return;
@@ -56,8 +49,7 @@ const fixScrollInitialChange = (droppableConfig, ifStartDragging) => {
     const scrollCompleted = scrollPercent(config.direction, droppable, scroll) > 0.99;
     const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
     if (scrollCompleted) {
-        droppable[scrollElement] =
-            droppable[scrollDistance] - droppable[clientDistance];
+        droppable[scrollElement] = droppable[scrollDistance] - droppable[clientDistance];
     }
 };
 const getTempChild = (draggedElement, ifStartDragging, droppableConfig, addingAnimationDuration) => {
@@ -70,12 +62,12 @@ const getTempChild = (draggedElement, ifStartDragging, droppableConfig, addingAn
     if (droppable.querySelector(`.${TEMP_CHILD_CLASS}`) || !draggedElement) {
         return;
     }
-    var tempChildTag = draggedElement.tagName == "LI" ? "DIV" : draggedElement.tagName;
+    var tempChildTag = draggedElement.tagName == 'LI' ? 'DIV' : draggedElement.tagName;
     var child = document.createElement(tempChildTag);
     addClass(child, TEMP_CHILD_CLASS);
     setSizes(child, 0, 0);
     const distances = getDistance(droppable, draggedElement, direction);
-    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, "width, min-width, height");
+    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, 'width, min-width, height');
     return [child, distances, droppable];
 };
 export const addTempChild = (draggedElement, parent, ifStartDragging, droppableConfig, addingAnimationDuration) => {
@@ -89,7 +81,7 @@ export const addTempChild = (draggedElement, parent, ifStartDragging, droppableC
     }
     observeMutation(updateChildAfterCreated(child, droppable, distances), droppable, {
         childList: true,
-        subtree: true,
+        subtree: true
     });
     droppable.appendChild(child);
 };
@@ -106,7 +98,7 @@ const setSizeAfterAppendChild = (child, size) => {
     return requestAnimationFrame(() => {
         setSizes(child, size.height, size.width);
         requestAnimationFrame(() => {
-            setTranistion(child, 0, timingFunction, "width, min-width, height");
+            setTranistion(child, 0, timingFunction, 'width, min-width, height');
         });
     });
 };
@@ -117,7 +109,8 @@ export const removeTempChildrens = (droppable, parent, droppableGroupClass, anim
     var children = document.querySelectorAll(`${getClassesSelector(droppableGroupClass)} > .${TEMP_CHILD_CLASS}`);
     children.forEach((tempChild) => {
         const childParent = tempChild.parentElement;
-        if ((childParent?.isSameNode(parent) || !draggedElementIsOutside && childParent?.isSameNode(droppable))) {
+        if (childParent?.isSameNode(parent) ||
+            (!draggedElementIsOutside && childParent?.isSameNode(droppable))) {
             return;
         }
         const tempChildElement = tempChild;

package/dist/core/useDraggable.js

@@ -1,13 +1,15 @@
 import { assignDraggingEvent, convetEventToDragMouseTouchEvent, moveTranslate, setCustomFixedSize, setEventWithInterval, setTranistion } from './utils/SetStyles';
-import { useTransform } from './utils/SetTransform';
-import useEmitEvents from './utils/events/emitEvents';
+import { usePositioning } from './positioning/usePositioning';
+import useRemoveEvents from './events/remove';
 import { DRAG_EVENT, draggableTargetTimingFunction, START_DRAG_EVENT, START_DROP_EVENT } from './utils';
-import ConfigHandler from './configHandler';
-import { IsHTMLElement, isTouchEvent } from './utils/touchDevice';
-import { addTempChild, addTempChildOnInsert, removeTempChildrens } from './utils/tempChildren';
-import { DroppableConfigurator } from './utils/droppableConfigurator';
+import ConfigHandler from './config/configHandler';
+import { IsHTMLElement, isTouchEvent } from './utils/typesCheckers';
+import { addTempChild, addTempChildOnInsert, removeTempChildrens } from './tempChildren';
+import { DroppableConfigurator } from './config/droppableConfigurator';
 import { addClass, containClass, getClassesList, getClassesSelector, removeClass, toggleClass } from './utils/dom/classList';
 import { DRAGGABLE_CLASS, DRAGGING_CLASS, DROPPABLE_CLASS, HANDLER_CLASS } from './utils/classes';
+import useDragAndDropEvents from './events/dragAndDrop/dragAndDrop';
+import useInsertEvents from './events/insert';
 var DraggingState;
 (function (DraggingState) {
     DraggingState[DraggingState["NOT_DRAGGING"] = 0] = "NOT_DRAGGING";
@@ -28,11 +30,13 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     let pagePosition = { pageX: 0, pageY: 0 };
     let delayTimeout;
     let initialTouch;
-    const [setTransform, updateTransformState] = useTransform(draggableElement, coordinateTransform);
+    const [setTransform, updateTransformState] = usePositioning(draggableElement, coordinateTransform);
     const endDraggingState = () => {
         draggingState = DraggingState.NOT_DRAGGING;
     };
-    const [emitEventToSiblings, emitRemoveEventToSiblings, emitInsertEventToSiblings, emitFinishRemoveEventToSiblings, toggleDraggingClass] = useEmitEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
+    const [emitRemoveEventToSiblings, emitFinishRemoveEventToSiblings] = useRemoveEvents(config, parent, handlerPublisher, endDraggingState);
+    const [emitDraggingEvent, emitDroppingEvent, toggleDraggingClass] = useDragAndDropEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
+    const [emitInsertEventToSiblings] = useInsertEvents(config, parent, handlerPublisher, endDraggingState);
     const setDraggable = () => {
         addClass(draggableElement, DRAGGABLE_CLASS);
     };
@@ -99,13 +103,13 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         }
         const { droppable, config } = droppableConfigurator.current;
         setTransform(draggableElement, droppable, pagePosition, config.direction);
-        emitEventToSiblings(draggableElement, DRAG_EVENT, windowScroll, droppableConfigurator.current);
+        emitDraggingEvent(draggableElement, DRAG_EVENT, droppableConfigurator.current);
     };
     const changeDroppable = (newdDroppableConfig, oldDroppableConfig) => {
         if (oldDroppableConfig &&
             draggingState == DraggingState.DRAGING &&
             !newdDroppableConfig?.droppable.isSameNode(oldDroppableConfig.droppable)) {
-            emitEventToSiblings(draggableElement, DRAG_EVENT, windowScroll, oldDroppableConfig);
+            emitDraggingEvent(draggableElement, DRAG_EVENT, oldDroppableConfig);
         }
     };
     const droppableConfigurator = new DroppableConfigurator(draggableElement, droppableGroupClass, parent, setTransformDragEvent, changeDroppable, config.mapFrom);
@@ -256,7 +260,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const startDragging = (event) => {
         addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.current);
         updateDraggingStateBeforeDragging();
-        emitEventToSiblings(draggableElement, START_DRAG_EVENT, windowScroll, droppableConfigurator.current);
+        emitDraggingEvent(draggableElement, START_DRAG_EVENT, droppableConfigurator.current);
         setDraggingStyles(draggableElement);
         updateTransformState(event, draggableElement);
     };
@@ -282,7 +286,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         draggingState = DraggingState.END_DRAGGING;
         removeDraggingStyles(draggableElement);
         if (draggableElement.classList.contains(DRAGGING_CLASS)) {
-            emitEventToSiblings(draggableElement, START_DROP_EVENT, windowScroll, isOutsideAllDroppables ? droppableConfigurator.initial : droppableConfigurator.current, index);
+            emitDroppingEvent(draggableElement, START_DROP_EVENT, isOutsideAllDroppables ? droppableConfigurator.initial : droppableConfigurator.current, windowScroll, index);
         }
     };
     const removeDraggingStyles = (element) => {

package/dist/core/utils/SetStyles.d.ts

@@ -1,8 +1,8 @@
-import { DragMouseTouchEvent, fixedSize } from "../../../index";
-type onTouchEvent = "ontouchstart" | "ontouchmove" | "ontouchend";
+import { DragMouseTouchEvent, fixedSize } from '../../../index';
+type onTouchEvent = 'ontouchstart' | 'ontouchmove' | 'ontouchend';
 declare const onMouseEvents: readonly ["onmouseup", "onmousedown", "onmousemove"];
 type onMouseEvent = (typeof onMouseEvents)[number];
-type TouchEventType = "touchstart" | "touchmove" | "touchend";
+type TouchEventType = 'touchstart' | 'touchmove' | 'touchend';
 declare const mouseEvents: readonly ["mouseup", "mousedown", "mousemove"];
 type MouseEventType = (typeof mouseEvents)[number];
 type DragEventCallback = (event: DragMouseTouchEvent) => void;

package/dist/core/utils/SetStyles.js

@@ -1,8 +1,8 @@
-import { HORIZONTAL, VERTICAL } from "..";
-import { getPropByDirection, getValueFromProperty } from "./GetStyles";
-import { IsHTMLElement, IsMouseEvent, isTouchEvent } from "./touchDevice";
-const onMouseEvents = ["onmouseup", "onmousedown", "onmousemove"];
-const mouseEvents = ["mouseup", "mousedown", "mousemove"];
+import { HORIZONTAL, VERTICAL } from '..';
+import { getPropByDirection, getValueFromProperty } from './GetStyles';
+import { IsHTMLElement, IsMouseEvent, isTouchEvent } from './typesCheckers';
+const onMouseEvents = ['onmouseup', 'onmousedown', 'onmousemove'];
+const mouseEvents = ['mouseup', 'mousedown', 'mousemove'];
 export const setSizeStyles = (element, height, width) => {
     if (!element) {
         return;
@@ -22,7 +22,7 @@ export const moveTranslate = (element, height, width) => {
         return;
     }
     if (width == 0 && height == 0) {
-        element.style.transform = "";
+        element.style.transform = '';
     }
     else {
         element.style.transform = `translate(${width}px,${height}px)`;
@@ -76,7 +76,7 @@ const getDefaultEvent = (event) => {
         screenY: 0,
         target,
         offsetX: 0,
-        offsetY: 0,
+        offsetY: 0
     };
 };
 const getOffsetFromEvent = (event, tempEvent) => {
@@ -91,7 +91,7 @@ const getOffsetFromEvent = (event, tempEvent) => {
         const element = event.target;
         return [
             getTouchEventOffset(element, HORIZONTAL),
-            getTouchEventOffset(element, VERTICAL),
+            getTouchEventOffset(element, VERTICAL)
         ];
     }
 };
@@ -111,7 +111,7 @@ export const convetEventToDragMouseTouchEvent = (event) => {
         screenY,
         target,
         offsetX,
-        offsetY,
+        offsetY
     };
 };
 const getEvent = (event) => {
@@ -130,7 +130,7 @@ const getOffset = (event, window, direction, element) => {
         boundingClientRect[before] -
         getValueFromProperty(element, borderBeforeWidth));
 };
-export const setTranistion = (element, duration, timingFunction = "ease-out", types = "transform") => {
+export const setTranistion = (element, duration, timingFunction = 'ease-out', types = 'transform') => {
     if (IsHTMLElement(element)) {
         element.style.transitionDuration = `${duration}ms`;
         element.style.transitionTimingFunction = `${timingFunction}`;
@@ -146,9 +146,9 @@ export const setEventWithInterval = (element, eventName, callback) => {
     };
 };
 const getStyles = (node) => {
-    var style = node.querySelector("style");
+    var style = node.querySelector('style');
     if (!style) {
-        var newStyle = document.createElement("style");
+        var newStyle = document.createElement('style');
         node.appendChild(newStyle);
         return newStyle;
     }

package/dist/core/utils/observer.d.ts

@@ -1 +1,2 @@
 export declare const observeMutation: (callback: (observer: MutationObserver, mutation: MutationRecord) => void, element: Element, options?: MutationObserverInit, mutationFilter?: (mutation: MutationRecord) => boolean) => MutationObserver;
+export declare const isTempElement: (element: Node) => boolean;

package/dist/core/utils/observer.js

@@ -1,3 +1,5 @@
+import { TEMP_CHILD_CLASS } from '.';
+import { IsHTMLElement } from './typesCheckers';
 export const observeMutation = (callback, element, options, mutationFilter = () => true) => {
     const observe = new MutationObserver((mutations) => {
         mutations = mutations.filter(mutationFilter);
@@ -9,3 +11,9 @@ export const observeMutation = (callback, element, options, mutationFilter = ()
     observe.observe(element, options);
     return observe;
 };
+export const isTempElement = (element) => {
+    if (!IsHTMLElement(element)) {
+        return false;
+    }
+    return element.classList.contains(TEMP_CHILD_CLASS);
+};

package/dist/index-2hBSSK9_.cjs

@@ -0,0 +1 @@
+"use strict";var we=Object.defineProperty;var Oe=(e,t,n)=>t in e?we(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var H=(e,t,n)=>Oe(e,typeof t!="symbol"?t+"":t,n);const W="horizontal",J="vertical",k="draggable",Pt="droppable",xt="handler-class",wt="dragging",$t="dragging-handler-class",Gt="dropping",ee="grabbing",ne="grab",Zt="disable-transition",tt=(e,t)=>e.classList.contains(t),ct=(e,t,n=!1)=>{e.classList.toggle(t,n)},Z=(e,t)=>{e.classList.add(t)},Tt=(e,t)=>{e.classList.remove(t)},Re=(e,t)=>Et(t).every(n=>tt(e,n)),ft=e=>e?`.${Et(e).join(".")}`:"",Le=(e,t)=>{if(!t)return;const n=Et(t);e.classList.add(...n)},Et=e=>e?e.split(" ").filter(t=>t):[],Fe=()=>{const{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}},Wt=e=>!e||e.trim().length==0||e=="normal"?0:parseFloat(e),Ne=e=>e?parseInt(e):-1,Pe=e=>{const t=getComputedStyle(e),n=new DOMMatrixReadOnly(t.transform);return{x:n.m41,y:n.m42}},se=(e,t)=>e.x1>t.x1?se(t,e):e.x2<t.x1?0:e.x2>=t.x2?e.x2-e.x1:e.x2-t.x1,bt=(e,t)=>!$e(e,t),$e=(e,t)=>{const{intersectionX:n,intersectionY:s,rect1:o,rect2:r}=oe(e,t);return s>=Math.min(o.height,r.height)/2&&n>=Math.min(o.width,r.width)/2},Ge=(e,t)=>!Ie(e,t),Ie=(e,t)=>{const{intersectionX:n,intersectionY:s}=oe(e,t);return s>=0&&n>=0},oe=(e,t)=>{const n=Mt(e),s=Mt(t),o=kt(n,s,J),r=kt(n,s,W);return{rect1:n,rect2:s,intersectionX:r,intersectionY:o}},kt=(e,t,n)=>{const{before:s,distance:o}=R(n);return se({x1:e[s],x2:e[s]+e[o]},{x1:t[s],x2:t[s]+t[o]})},N=(e,t)=>e?Wt(getComputedStyle(e)[t]):0,Jt=e=>{const{scrollLeft:t,scrollTop:n}=e;return{scrollLeft:t,scrollTop:n}},Mt=e=>e.getBoundingClientRect(),R=e=>{const t=e==W;return{beforeMargin:t?"marginLeft":"marginTop",afterMargin:t?"marginRight":"marginBottom",borderBeforeWidth:t?"borderLeftWidth":"borderTopWidth",before:t?"left":"top",after:t?"right":"down",gap:t?"columnGap":"rowGap",distance:t?"width":"height",axis:t?"x":"y",offset:t?"offsetX":"offsetY",scroll:t?"scrollX":"scrollY",scrollElement:t?"scrollLeft":"scrollTop",page:t?"pageX":"pageY",inner:t?"innerWidth":"innerHeight",offsetElement:t?"offsetLeft":"offsetTop",scrollDistance:t?"scrollWidth":"scrollHeight",clientDistance:t?"clientWidth":"clientHeight",paddingBefore:t?"paddingLeft":"paddingTop",getRect:Mt}},at=(e,t)=>Ye(e,t),re=e=>[...e.children].filter(n=>tt(n,k)),Ye=(e,t)=>{const n=[...t.children].filter(o=>tt(o,k)&&!o.isEqualNode(e)).toReversed(),s=[...t.children].findLastIndex(o=>o.isEqualNode(e));return[n,s,t]},Xe=e=>{let t=e.parentElement;for(;t;){if(window.getComputedStyle(t).position==="fixed")return t;t=t.parentElement}return null},ie=(e,t)=>{const{before:n,borderBeforeWidth:s}=R(t),o=Xe(e);return o?Mt(o)[n]+N(o,s):0},St=e=>window.TouchEvent&&e instanceof TouchEvent,K=e=>e instanceof HTMLElement,ce=e=>e instanceof MouseEvent,We=["onmouseup","onmousedown","onmousemove"],_e=(e,t,n)=>{e&&(e.style.height=`${t}px`,e.style.width=`${n}px`)},lt=(e,t,n)=>{!e||!K(e)||(n==0&&t==0?e.style.transform="":e.style.transform=`translate(${n}px,${t}px)`)},He=(e,t,n,s)=>{e[t]=o=>{if(o.defaultPrevented)return;s&&s(o);const r=It(o);n(r)}},Ft=(e,t,n,s)=>{n&&(Ve(t)?e[t]=n:He(e,t,n,s))},Ve=e=>We.includes(e),qe=e=>{const{target:t}=e;return{clientX:0,clientY:0,pageX:0,pageY:0,screenX:0,screenY:0,target:t,offsetX:0,offsetY:0}},ze=(e,t)=>{const n=(s,o)=>Ze(t,window,o,s);if(ce(e)){const{offsetX:s,offsetY:o}=e;return[s,o]}else{const s=e.target;return[n(s,W),n(s,J)]}},It=e=>{const t=je(e);if(!t)return qe(e);const[n,s]=ze(e,t),{clientX:o,clientY:r,pageX:a,pageY:i,screenX:f,screenY:l,target:m}=t;return{clientX:o,clientY:r,pageX:a,pageY:i,screenX:f,screenY:l,target:m,offsetX:n,offsetY:s}},je=e=>{if(St(e))return e.touches[0]??e.changedTouches[0];if(ce(e))return e},Ze=(e,t,n,s)=>{const{page:o,scroll:r,before:a,borderBeforeWidth:i,getRect:f}=R(n),l=f(s);return e[o]-t[r]-l[a]-N(s,i)},Ot=(e,t,n="ease-out",s="transform")=>{K(e)&&(e.style.transitionDuration=`${t}ms`,e.style.transitionTimingFunction=`${n}`,e.style.transitionProperty=`${s}`)},ae=(e,t,n)=>{!e||!K(e)||(e[t]=()=>{n()})},ke=e=>{var t=e.querySelector("style");if(!t){var n=document.createElement("style");return e.appendChild(n),n}return t},Je=(e,t)=>{const n=/\.-?[_a-zA-Z0-9-*\s<>():]+/g,[s]=t.match(n)||[];for(const o of e.cssRules){const[r]=o.cssText.match(n)||[];if(s===r)return!0}return!1},Ke=(e,t)=>{t.forEach(n=>{Qe(e,n)})},Qe=(e,t)=>{var s;var n=ke(e);n.sheet&&(Je(n.sheet,t)||(s=n.sheet)==null||s.insertRule(t,n.sheet.cssRules.length))},le=(e,t={})=>{for(const n of Object.keys(t)){const s=t[n];s!=null&&Ue(e,`--${n}`,s)}},Ue=(e,t,n)=>e&&e.style.setProperty(t,n),tn=(e,t,n)=>{n!=0&&(t==="vertical"?e.scrollBy(0,n):e.scrollBy(n,0))},en=e=>{let t=.5;const n=.03,s=(a,i,f,l)=>{const{before:m,distance:u,axis:D,getRect:b}=R(a),C=b(e)[u],O=b(i),S=f[m]-O[m]+l[D],v=O[u]-C,x=S/v,L=C/v,I=.25,P=.2,V=.8;let _=0;const $=Ge(e,i);!$&&x<P&&x>-L?_=o(x<0?0:x,P):!$&&x>V&&x<1+L&&(_=r(x,V));const q=I*C*_;t=Math.sign(q)*Math.min(Math.abs(q),Math.abs(t)+n),tn(i,a,t)},o=(a,i)=>Math.pow(a/i,1/3)-1,r=(a,i)=>Math.pow(1/(1-i)*(a-i),3);return[s]},nn=(e,t)=>{let n={offsetX:0,offsetY:0},s={top:0,left:0},o={x:0,y:0};const[r]=en(e),a=u=>{e.style.transform=`translate( ${u.x}px, ${u.y}px)`},i=u=>{e.style.top=`${u.top}px`,e.style.left=`${u.left}px`},f=(u,D,b,C)=>{const O=v=>{const{beforeMargin:x,borderBeforeWidth:L,before:I,offset:P,scroll:V,page:_,inner:$,distance:q,axis:nt,getRect:Q}=R(v),U=b[_],z=window[V],d=window[$],p=Q(u)[q],h=N(u,L),A=N(u,x),B=U-n[P],M=ie(u,v);if(B>=z-p/2&&B<=z+d){const F=B-s[I]-h-A-z-M;return S(v),F}return o[nt]},S=v=>{u&&tt(u,wt)&&v===C&&r(C,D,s,o)},E=v=>{const{axis:x}=R(v);o[x]=O(v),a(l())};E(W),E(J)},l=()=>{let u=o;for(const D of t)u=D(u,e);return u};return[f,(u,D)=>{const[b,C,O,S]=rn(u,D,e);s={top:b,left:C},i(s),n={offsetX:O,offsetY:S}}]},At=(e,t,n)=>{const{borderBeforeWidth:s,before:o,getRect:r}=R(e);return r(t)[o]-r(n)[o]-N(n,s)},sn=(e,t)=>{let{offsetX:n,offsetY:s,target:o}=e,r=on(o,t);const a=o;return a&&r&&!a.isSameNode(r)&&(n+=At(W,a,r),s+=At(J,a,r)),r&&t!=o&&(n+=At(W,r,t),s+=At(J,r,t)),[n,s]},on=(e,t)=>{const n=e==null?void 0:e.closest(`.${xt}`);return n&&n.isSameNode(t)?e:n},Kt=(e,t,n,s)=>{const{offset:o,beforeMargin:r,page:a,borderBeforeWidth:i,scroll:f}=R(e),l=ie(n,e);return t[a]-s[o]-N(n,r)-N(n,i)-window[f]-l},rn=(e,t,n)=>{const[s,o]=sn(e,n);return[Kt(J,e,t,{offsetX:s,offsetY:o}),Kt(W,e,t,{offsetX:s,offsetY:o}),s,o]},ue="startDrag",Bt="drag",fe="startDrop",ot="temp-child",de="cubic-bezier(0.2, 0, 0, 1)",Yt=e=>!e||e.length==0?0:Wt(e.replace("px","")),cn=(e,t)=>{const n=getComputedStyle(e)[t];if(n.match("%")){const o=Wt(n.replace("%","")),{width:r}=e.getBoundingClientRect();return r*(o/100)}return Yt(n)},_t=(e,t)=>{if(!(e instanceof Element))return[0,!1];const n=cn(e,t),s=getComputedStyle(e).display,o=n>0||s==="flex";return[n,o]},an=e=>{const{top:t,left:n}=getComputedStyle(e);return[Yt(t),Yt(n)]},ln=(e,t)=>{const{gap:n}=R(t),[s,o]=_t(e,n);return o?s:0};function ut(e,t,n,s,o=e.previousElementSibling,r=e.nextElementSibling){let{height:a,width:i}=un(n,e,o,r);return bt(e,s)&&t==Bt&&(a=0,i=0),{height:a,width:i}}const un=(e,t,n,s)=>{const{afterMargin:o,beforeMargin:r,distance:a,gap:i,getRect:f}=R(e),l=N(t,o),m=N(t,r),u=N(s,r),[D,b]=_t(t.parentElement,i),C=f(t)[a];if(b)return Qt(C,m,l,D,0,e);const[O,S,E]=fn(n,u,l,m,o);return Qt(C,S,O,0,E,e)},fn=(e,t,n,s,o)=>{const r=Math.max(t,n);let a=s,i=t;if(e){const f=N(e,o);a=Math.max(f,s),i=Math.max(i,f)}return[r,a,i]},Qt=(e,t,n,s,o,r)=>dn(r,e+t+n+s-o),dn=(e,t)=>e==W?{width:t,height:0}:{width:0,height:t},Ht=(e,t,n,s=()=>!0)=>{const o=new MutationObserver(r=>{if(r=r.filter(s),r.length>0){const a=r[0];e(o,a)}});return o.observe(t,n),o},Xt=e=>K(e)?e.classList.contains(ot):!1,gn="startDrag",ge="cubic-bezier(0.2, 0, 0, 1)",pe=50,pn=(e,t,n)=>{let s=ut(t,gn,n,e);const o=ln(e,n),{distance:r}=R(n);s[r]-=o;const[a,i]=hn(n,t);return s[i]=a,s},hn=(e,t)=>{const n=e==W?J:W,{distance:s,getRect:o}=R(n);return[o(t)[s],s]},dt=(e,t,n)=>{_e(e,t,n),e.style.minWidth=`${n}px`},mn=(e,t,n)=>s=>{t.contains(e)&&(dt(e,n.height,n.width),s.disconnect())},vn=(e,t,n)=>{const{scrollDistance:s,clientDistance:o,scrollElement:r}=R(e);return n[r]/(t[s]-t[o])},Sn=(e,t)=>{if(!t)return;const{droppable:n,config:s,scroll:o}=e,{direction:r}=s,a=vn(s.direction,n,o)>.99,{scrollDistance:i,clientDistance:f,scrollElement:l}=R(r);a&&(n[l]=n[i]-n[f])},he=(e,t,n,s)=>{if(!n)return;const{droppable:o,config:r}=n,{direction:a,animationDuration:i}=r;if(Sn(n,t),o.querySelector(`.${ot}`)||!e)return;var f=e.tagName=="LI"?"DIV":e.tagName,l=document.createElement(f);Z(l,ot),dt(l,0,0);const m=pn(o,e,a);return Ot(l,i,ge,"width, min-width, height"),[l,m,o]},Nt=(e,t,n,s,o)=>{const r=he(e,n,s);if(!r)return;const[a,i,f]=r;t.isSameNode(f)&&dt(a,i.height,i.width),Ht(mn(a,f,i),f,{childList:!0,subtree:!0}),f.appendChild(a)},Dn=(e,t,n)=>{const s=he(e,t,n);if(!s)return;const[o,r,a]=s;a.appendChild(o),Tn(o,r)},Tn=(e,t)=>requestAnimationFrame(()=>{dt(e,t.height,t.width),requestAnimationFrame(()=>{Ot(e,0,ge,"width, min-width, height")})}),bn=(e,t,n,s,o=!0)=>{if(n){var r=document.querySelectorAll(`${ft(n)} > .${ot}`);r.forEach(a=>{const i=a.parentElement;if(i!=null&&i.isSameNode(t)||!o&&(i!=null&&i.isSameNode(e)))return;dt(a,0,0),setTimeout(()=>{var l;(l=a.parentNode)==null||l.removeChild(a)},s+pe)})}},Dt=(e,t,n=!1)=>{var s=e.querySelectorAll(`.${ot}`);s.forEach(o=>{const r=o;n?(dt(r,0,0),setTimeout(()=>{e.contains(r)&&e.removeChild(r)},t+pe)):e.removeChild(o)})},Vt=(e,t,n)=>{const{handlerSelector:s,animationDuration:o}=e,r=l=>{n(),a(l,!1),l.style.transform="",l.style.transition="",l.style.top="",l.style.left="",le(l,{fixedHeight:"",fixedWidth:""})},a=(l,m)=>{ct(l,wt,m),i(m,l),t.toggleGrabClass(!m)},i=(l,m)=>{const u=m.querySelector(s);ct(document.body,ee,l),ct(u||m,$t,l)};return[r,a,(l,m)=>{const{width:u,height:D}=m;lt(l,D,u),Ot(l,o,de)}]};function En(e,t,n,s){const{animationDuration:o}=e,[r]=Vt(e,n,s),a=(u,D,b,C)=>{if(!b||!b.droppable||!b.config)return;const{droppable:O,config:S}=b;let[E]=at(D,O);E=[D,...E].toReversed();const v=ut(D,"remove",S.direction,O);for(const[x,L]of E.entries())x>=u&&(f(L,v),setTimeout(()=>{C(L)},o))},i=u=>{Dt(t,o,!0),setTimeout(()=>{r(u),l(u,t)},o)},f=(u,D)=>{const{width:b,height:C}=D;lt(u,C,b)},l=(u,D)=>{const[b]=at(u,D);for(const C of[...b,u])m(C)},m=u=>{K(u)&&(u.style.transition="",u.style.transform="")};return[a,i]}const j=class j{static addConfig(t,n){const s=j.configs.filter(r=>!r.droppable.isSameNode(t)),o=Jt(t);s.push({droppable:t,config:n,scroll:o}),j.configs=s}static updateScrolls(t,n){for(const s of j.configs){const{droppable:o}=s;(n&&Re(o,n)||o.isSameNode(t))&&(s.scroll=Jt(o))}}static getConfig(t){return j.configs.find(({droppable:s})=>s.isSameNode(t))}};H(j,"configs",[]),H(j,"removeObsoleteConfigs",()=>{const t=j.configs.filter(({droppable:n})=>document.contains(n));j.configs=t});let rt=j;const yn=(e,t)=>{const{config:n,droppable:s}=e,{onInsertEvent:o,onDragEnd:r}=n;return{...n,onDragEnd:f=>{const{index:l,value:m}=f;r({index:l,value:t(m,s)})},onInsertEvent:(f,l)=>o(f,t(l,s),!0)}};class Cn{constructor(t,n,s,o,r,a){H(this,"initial");H(this,"current");H(this,"parent");H(this,"draggableElement");H(this,"groupClass");H(this,"dragEvent");H(this,"changeDroppable");H(this,"mapFrom");this.parent=s,this.draggableElement=t,this.groupClass=n,this.dragEvent=o,this.mapFrom=a,this.initial=s?rt.getConfig(s):void 0,this.changeDroppable=r}getDraggableAncestor(t,n,s){return document.elementsFromPoint(t,n).filter(o=>!o.isSameNode(s))}getElementBelow(t,n,s=!0){const o=a=>{const[i]=a.getDraggableAncestor(n.clientX,n.clientY,t);return i};let r=null;return s?(t.hidden=!0,r=o(this),t.hidden=!1):r=o(this),r}getCurrent(t,n,s=!0){const o=this.getElementBelow(t,n,s);return!this.groupClass||!o?void 0:o.closest(ft(this.groupClass))}isOutsideOfAllDroppables(t){return(this.groupClass?Array.from(document.querySelectorAll(ft(this.groupClass))):[this.parent]).every(s=>bt(t,s))}isNotInsideAnotherDroppable(t,n){return!bt(t,n)||this.isOutsideOfAllDroppables(t)}onScrollEvent(){this.dragEvent()}setOnScroll(t){ae(t,"onscroll",()=>{this.onScrollEvent()})}getConfigFrom(t){const n=rt.getConfig(t);if(n)return t.isSameNode(this.parent)?n:{...n,config:yn(n,this.mapFrom)}}getCurrentConfig(t){var o;const n=this.draggableElement;if(this.current&&this.isNotInsideAnotherDroppable(n,(o=this.current)==null?void 0:o.droppable))return this.current;const s=this.getCurrent(n,t);return s?(K(s)&&!s.onscroll&&this.setOnScroll(s),this.getConfigFrom(s)):this.getConfigFrom(this.parent)}updateConfig(t){const n=this.current;this.current=this.getCurrentConfig(t),this.changeDroppable(this.current,n)}isOutside(t,n=!0){const s=this.draggableElement;return!this.getCurrent(s,t,n)}}const Ut=(e,t)=>{const{borderBeforeWidth:n,paddingBefore:s,axis:o,getRect:r}=R(e),a=N(t,n),i=N(t,s),f=r(t)[o];return a+i+f},An=(e,t)=>{const[n,s]=an(t),o=Ut(J,e);return[Ut(W,e)-s,o-n]};function xn(e,t,n,s,o,r,a,i,f){let l=0,m=0;const u=!!(n<0&&f);if(n===s&&!u)return te({height:l,width:m},e,o,a,u);const[D,b,C,O]=wn(t,n,s,f);if(u){const[h,A]=An(i,f);l+=A,m+=h}const{scrollElement:S,beforeMargin:E,afterMargin:v,distance:x,gap:L}=R(e),[I,P]=_t(i,L),[V,_,$]=Rn(E,v,D,b==null?void 0:b.previousElementSibling,O,P,u),[q,nt,Q]=On(E,v,x,C,I,P),U=Bn(nt,q,Q,_,V,I),z=u?i[S]:Mn(S,i,r),p=(O?U-$:$-U)-z;return e===J?l+=p:e===W&&(m+=p),te({height:l,width:m},e,o,a,u)}const Mn=(e,t,n)=>{const s=t[e],o=n[e];return s-o},Bn=(e,t,n,s,o,r)=>{const a=Math.max(t,o);return Math.max(n,s)+e+a+r},wn=(e,t,n,s)=>{const o=t<n,[r,a]=[t,n].toSorted((m,u)=>m-u),i=e[t]??s,f=e[n];let l=o?e.slice(r+1,a+1):e.slice(r,a);return r<0&&s&&(l=e.slice(r+1,a)),[i,f,l,o]},On=(e,t,n,s,o,r)=>{if(s.length==0)return[0,0,0];const a=N(s[0],e);let i=0,f=-a;for(const[l,m]of s.entries()){const u=m.getBoundingClientRect()[n],D=N(m,e);r&&(i+=D),r&&l>0?i+=o:i=Math.max(i,D),f+=i+u,i=N(m,t)}return[a,f,i]},te=(e,t,n,s,o)=>{const{scroll:r,distance:a}=R(t),i=window[r],f=n[r],l=o?0:f-2*i+s[r];return e[a]+=l,e},Rn=(e,t,n,s,o,r,a)=>{const i=o?n.previousElementSibling:s;return Ln(e,t,i,n,r,a)},Ln=(e,t,n,s,o,r)=>{if(o)return[0,0,0];const a=N(r?null:n,t),i=N(s,e);let f=Math.max(a,i);return[a,i,f]},Fn=50;function Nn(e,t,n,s,o,r){let a=t;const{direction:i,onRemoveAtEvent:f,animationDuration:l,draggingClass:m}=e,[u,D,b]=Vt(e,o,r),C=(d,p,h)=>{if(!h)return;const{droppable:A,config:B}=h,M=ut(d,p,B.direction,A);S(d,p,M,h)},O=(d,p,h,A,B)=>{if(!h)return;const{droppable:M,config:w}=h,F=ut(d,p,w.direction,M);L(d,p,F,A,h,B)},S=(d,p,h,A)=>{const{config:B,droppable:M}=A,[w]=at(d,M),F=bt(d,M);w.length==0&&v(h,1,B.direction,w);for(const[Y,G]of w.entries()){if(!tt(G,k))continue;const T=E(B.direction,d,G,h);if(!F&&T)h=T;else if(!F)continue;const X=w.length-Y;v(h,X,B.direction,w),p===ue?x(G,h):p===Bt&&b(G,h)}},E=(d,p,h,A)=>{const{before:B,distance:M,axis:w,getRect:F}=R(d),Y=F(p),G=F(h),T=Y[B],X=G[B],gt=G[M],pt=X+gt/2,ht=Pe(h)[w],et=pt-ht;return T>et?{height:0,width:0}:A},v=(d,p,h,A)=>{const B=A.filter(w=>tt(w,k)).length,{distance:M}=R(h);d[M]==0?a=Math.max(a,p):a=Math.min(a,p-1),a=Math.min(a,B)},x=(d,p)=>{const{width:h,height:A}=p;lt(d,A,h)},L=(d,p,h,A,B,M)=>{const{droppable:w,scroll:F,config:Y}=B,[G,T]=at(d,w),X=G.toReversed(),gt=T===-1?X.length:T;X.splice(gt,0,d);const[pt,ht,et]=I(d,T,X,w);h=ut(d,p,Y.direction,n,pt,ht);const Rt=Fe(),yt=xn(Y.direction,X,T,et,Rt,F,A,w,d);G.length==0&&P(void 0,h,d,yt);for(const[Lt,Ct]of G.toReversed().entries()){let mt=h;et-1>=Lt&&(mt={height:0,width:0}),p===fe&&!tt(Ct,ot)&&P(Ct,mt,d,yt)}V(et,d,Y,w,M)},I=(d,p,h,A)=>{const M=bt(d,A)?p:a,w=()=>p<M?[M,M+1]:p>M?[M-1,M]:[M-1,M+1],[F,Y]=w(),G=h[F]??null,T=h[Y]??null;return[G,T,M]},P=(d,p,h,A)=>{lt(d,p.height,p.width),lt(h,A.height,A.width)},V=(d,p,h,A,B)=>{const{onInsertEvent:M,onDragEnd:w}=h;Z(p,Gt),q(p,n,A,()=>{if(Tt(p,Gt),B!=null){const F=f(B,!0);F!=null&&(M(d,F,!0),w({value:F,index:d})),$(p),_()}})},_=()=>{if(s){var d=document.querySelectorAll(`${ft(s)} > .${k}`);for(const p of d)z(p)}},$=d=>{setTimeout(()=>{Tt(d,m)},Fn)},q=(d,p,h,A)=>{setTimeout(()=>{A&&A(),nt(p,h),Q(h),u(d),U(d,p),U(d,h)},l)},nt=(d,p)=>{d.isSameNode(p)?Dt(d,l):(Dt(d,l,!0),Dt(p,l))},Q=d=>{if(n.isSameNode(d))return;var[p]=n.querySelectorAll(`.${ot}`);if(!p)return;const{distance:h}=R(i);K(p)&&(p.style[h]="0px")},U=(d,p)=>{const[h]=at(d,p);for(const A of[...h,d])z(A)},z=d=>{K(d)&&(d.style.transition="",d.style.transform="")};return[C,O,D]}function Pn(e,t,n,s){const{delayBeforeInsert:o}=e,[r,a,i]=Vt(e,n,s),f=(u,D,b,C,O)=>{const S=ut(D,"insert",e.direction,b),{onInsertEvent:E}=e,v=re(b);for(const[x,L]of v.entries())tt(L,k)&&x>=u&&i(L,S);O(),setTimeout(()=>{E(u,C),me(u,b,e),r(D),l(D,t),Dt(t,0,!0)},o)},l=(u,D)=>{const[b]=at(u,D);for(const C of[...b,u])m(C)},m=u=>{K(u)&&(u.style.transition="",u.style.transform="")};return[f]}const $n=e=>e.addedNodes.values().filter(n=>!Xt(n)).toArray().length>0,me=(e,t,n)=>{const{insertingFromClass:s,animationDuration:o}=n,r=Ht(()=>{const i=re(t)[e];Z(i,s),Z(i,Zt),setTimeout(()=>{Tt(i,Zt),Tt(i,s),r.disconnect()},o)},t,{childList:!0},$n)},Gn=(e,t,n,s)=>{if(!t)return;const{onInsertEvent:o,delayBeforeInsert:r}=e;setTimeout(()=>{o(n,s),me(n,t,e)},r)};function In(e,t,n,s,o){const{handlerSelector:r,isDraggable:a,droppableGroup:i,animationDuration:f,delayBeforeRemove:l,draggingClass:m,removingClass:u,onRemoveAtEvent:D,droppableClass:b,onDragStart:C,delayBeforeTouchMoveEvent:O,coordinateTransform:S}=n,E=Et(i).map(c=>`droppable-group-${c}`).join(" ");let v=0,x={scrollX:0,scrollY:0},L={pageX:0,pageY:0},I,P;const[V,_]=nn(e,S),$=()=>{v=0},[q,nt]=En(n,s,o,$),[Q,U,z]=Nn(n,t,s,E,o,$),[d]=Pn(n,s,o,$),p=()=>{Z(e,k)},h=c=>{Z(c,xt),o.addSubscriber(c)},A=()=>{if(a(e)){const c=e.querySelector(r);h(c||e)}},B=()=>{A(),p()},M=c=>{const g=c==null?void 0:c.querySelector(`.${xt}`),y=g==null?void 0:g.parentElement;return g&&y&&tt(y,Pt)&&!y.isSameNode(s)?null:g},w=c=>{const g=M(c)??c;g&&a(c)&&(Ft(g,"onmousedown",mt("mousemove","mouseup")),Ft(g,"ontouchstart",mt("touchmove","touchend"),y=>{P={x:y.touches[0].clientX,y:y.touches[0].clientY}}),F(g)),c!=null&&c.isSameNode(g)||Ft(c,"onmousedown",ve),Z(s,Pt)},F=c=>{const g=c.querySelectorAll("img");Array.from(g).forEach(y=>{y.onmousedown=()=>!1})},Y=()=>{if(L.pageX==0&&L.pageY==0||!T.current)return;const{droppable:c,config:g}=T.current;V(e,c,L,g.direction),Q(e,Bt,T.current)},G=(c,g)=>{g&&v==2&&!(c!=null&&c.droppable.isSameNode(g.droppable))&&Q(e,Bt,g)},T=new Cn(e,E,s,Y,G,n.mapFrom),X=c=>{if(!T.current)return;const g=E?Array.from(document.querySelectorAll(ft(E))):[s];for(const y of g)y.classList.toggle(b,!c&&y.isSameNode(T.current.droppable))},gt=(c,g=!1)=>{T.updateConfig(c);const y=T.isOutside(c);X(y),v===1&&!g?zt(c):v===2&&(pt(y),be(c))},pt=(c=!0)=>{if(!T.current)return;const{droppable:g}=T.current;bn(g,s,E,f,c),!c&&Nt(e,s,v==1,T.current)},ht=c=>{if(St(c)&&P&&v==1){const g=Math.abs(c.touches[0].clientX-P.x),y=Math.abs(c.touches[0].clientY-P.y);if(Math.abs(g)>5&&Math.abs(y)>5)return clearTimeout(I),!1}return!0},et=c=>{clearTimeout(I);const g=It(c);if(St(c)&&c.cancelable&&v==2&&c.preventDefault(),St(c)&&!c.cancelable||!ht(c)){qt("touchmove",c);return}gt(g,St(c))},Rt=(c,g)=>{c=="touchmove"?I=setTimeout(()=>{g()},O):g()},yt=(c,g)=>{const{clientX:y,clientY:it}=c,st=document.elementFromPoint(y,it),vt=st==null?void 0:st.closest(`.${k}`);return vt&&g.isSameNode(vt)},Lt=c=>{const g=n.onGetValue(t);return{index:t,element:c,value:g}},Ct=c=>{T.updateConfig(c),X(T.isOutside(c)),zt(c)},mt=(c,g)=>y=>{if(!yt(y,e))return;rt.updateScrolls(s,E);const{scrollX:it,scrollY:st}=window;if(x={scrollX:it,scrollY:st},v===0){v=1;const vt=Lt(e);vt&&C(vt),Rt(c,()=>{c=="touchmove"&&Ct(y)}),document.addEventListener(c,et,{passive:!1}),Ee(s),document.addEventListener(g,Se(c),{once:!0})}},ve=c=>T.updateConfig(c),Se=c=>g=>{qt(c,g)},qt=(c,g)=>{X(!0);const y=It(g);Ce(T.isOutside(y,!1)),clearTimeout(I),document.removeEventListener(c,et),T.updateConfig(y);const it=T.getCurrentConfig(y);if(it){const{droppable:st}=it;De(st)}s.onscroll=null,$()},De=c=>{if(c.onscroll=null,!E)return;const g=Array.from(document.querySelectorAll(ft(E)));for(const y of g)K(y)&&(y.onscroll=null)},zt=c=>{Nt(e,s,v==1,T.current),Te(),Q(e,ue,T.current),Ae(e),_(c,e)},Te=()=>{v=2},be=c=>{const{pageX:g,pageY:y}=c;L={pageX:g,pageY:y},Y()},Ee=c=>ae(c,"onscroll",ye),ye=()=>Y(),Ce=c=>{if(v!==2&&v!==1){$();return}v=3,jt(e),e.classList.contains(wt)&&U(e,fe,c?T.initial:T.current,x,t)},jt=c=>{Ot(c,f,de),lt(c,0,0)},Ae=c=>{const{height:g,width:y}=c.getBoundingClientRect();le(c,{fixedHeight:`${g}px`,fixedWidth:`${y}px`}),z(c,!0),ct(c,m,!0),c.style.transition=""},xe=(c,g)=>{Tt(e,u),Nt(e,s,v==1,T.initial),q(c,e,g,y=>{jt(y),nt(e)}),D(t,!0)},Me=c=>{if(!T.initial)return;const g=T.initial;c==t&&(Z(e,u),setTimeout(()=>{xe(c,g)},l))},Be=(c,g)=>{(c===t||c===n.onGetLegth()&&t===c-1)&&d(c,e,s,g,()=>{Dn(e,v==1,T.initial)})};return B(),w(e),[Me,Be]}const Yn=(e,t)=>{e&&Le(t,e)},Xn=()=>{Ke(document.body,[`.${k}{touch-action:manipulation;user-select:none;box-sizing:border-box!important;-webkit-user-select:none;}`,`.${xt}{pointer-events:auto!important;}`,`.${ne}{cursor:grab;}`,".temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}",".droppable{box-sizing:border-box!important;}",`.${wt}{position:fixed;z-index:5000;width:var(--fixedWidth)!important;height:var(--fixedHeight)!important;}`,`.${$t}{pointer-events:none!important;}`,`.${Gt}{pointer-events:none!important;}`,`.${ee}{cursor:grabbing;}`,".disable-transition{transition:none!important;}"])};function Wn(e,t,n,s="index"){const o=s;let r=[],a=[];const{droppableGroup:i}=e;if(!n)return[r,a];const f=Et(i).map(l=>`droppable-group-${l}`).join(" ");Xn(),Yn(f,n);for(const l of n.children){const m=l.getAttribute(o),u=Ne(m),D=l;if(D&&u>=0){const[b,C]=In(D,u,e,n,t);r.push(b),a.push(C)}}return[r,a]}const _n=(e,t)=>{const n=(i,f)=>e.removeAtEvent(i,f),s=(i,f,l)=>e.insertEvent(i,f,l),o=()=>e.getLength(),r=i=>e.getValue(i),a=i=>i;return{direction:(t==null?void 0:t.direction)??J,handlerSelector:(t==null?void 0:t.handlerSelector)??k,draggingClass:(t==null?void 0:t.draggingClass)??"dragging",droppableClass:(t==null?void 0:t.droppableClass)??"droppable-hover",isDraggable:(t==null?void 0:t.isDraggable)??(()=>!0),onDragStart:(t==null?void 0:t.onDragStart)??(()=>{}),onDragEnd:(t==null?void 0:t.onDragEnd)??(()=>{}),droppableGroup:t==null?void 0:t.droppableGroup,onRemoveAtEvent:n,onInsertEvent:s,onGetLegth:o,onGetValue:r,animationDuration:(t==null?void 0:t.animationDuration)??200,removingClass:(t==null?void 0:t.removingClass)??"removing",insertingFromClass:(t==null?void 0:t.insertingFromClass)??"from-inserting",delayBeforeRemove:(t==null?void 0:t.delayBeforeRemove)??200,delayBeforeInsert:(t==null?void 0:t.delayBeforeInsert)??200,mapFrom:(t==null?void 0:t.mapFrom)??a,delayBeforeTouchMoveEvent:(t==null?void 0:t.delayBeforeTouchMoveEvent)??150,coordinateTransform:(t==null?void 0:t.coordinateTransform)??[i=>i]}};function Hn(e,t,n,s="index"){let o=[],r=[],a;const i=_n(e,n),f=S=>{for(const E of o)E(S)},l=(S,E)=>{if(i.onGetLegth()===0)e.insertToListEmpty(i,S,E);else for(const x of r)x(S,E)},m=S=>{const[E,v]=Wn(i,t,S,s);o=E,r=v},u=S=>{const E=S.addedNodes.values().filter(x=>!Xt(x)).toArray(),v=S.removedNodes.values().filter(x=>!Xt(x)).toArray();return E.length>0||v.length>0},D=S=>{a=Ht(()=>{m(S)},S,{childList:!0},u)},b=S=>{Z(S,Pt)},C=S=>{rt.addConfig(S,i)};return[f,l,S=>{if(S)return b(S),C(S),D(S),m(S),rt.removeObsoleteConfigs(),a}]}exports.GRAB_CLASS=ne;exports.addClass=Z;exports.dragAndDrop=Hn;exports.insertToListEmpty=Gn;exports.toggleClass=ct;