fluid-dnd 2.3.0 → 2.4.0

package/dist/{HandlerPublisher-BNn5KECH.cjs → HandlerPublisher-B68XPAcH.cjs}

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-BYT3HBbe.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;
+"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-2hBSSK9_.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;

package/dist/{HandlerPublisher-xM3zyGAn.js → HandlerPublisher-pcX0Zmas.js}

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
 var e = (a, s, l) => s in a ? d(a, s, { enumerable: !0, configurable: !0, writable: !0, value: l }) : a[s] = l;
 var r = (a, s, l) => e(a, typeof s != "symbol" ? s + "" : s, l);
-import { a as h, t as n, G as t } from "./index-m7C-XuaH.js";
+import { a as h, t as n, G as t } from "./index-DFXw7kYo.js";
 class c {
   constructor() {
     r(this, "handlers");

package/dist/core/{configHandler.d.ts → config/configHandler.d.ts}

@@ -1,5 +1,5 @@
-import { ElementScroll } from "../../index";
-import { CoreConfig } from ".";
+import { ElementScroll } from '../../../index';
+import { CoreConfig } from '..';
 export type DroppableConfig<T> = {
     droppable: HTMLElement;
     config: CoreConfig<T>;

package/dist/core/{configHandler.js → config/configHandler.js}

@@ -1,5 +1,5 @@
-import { getScrollElement } from "./utils/GetStyles";
-import { containstClasses } from "./utils/dom/classList";
+import { getScrollElement } from '../utils/GetStyles';
+import { containstClasses } from '../utils/dom/classList';
 export default class ConfigHandler {
     static configs = [];
     static addConfig(droppable, config) {
@@ -8,7 +8,7 @@ export default class ConfigHandler {
         configs.push({
             droppable,
             config,
-            scroll,
+            scroll
         });
         ConfigHandler.configs = configs;
     }
@@ -19,8 +19,7 @@ export default class ConfigHandler {
     static updateScrolls(currentDroppable, droppableGroupClass) {
         for (const configHandler of ConfigHandler.configs) {
             const { droppable } = configHandler;
-            if ((droppableGroupClass &&
-                containstClasses(droppable, droppableGroupClass)) ||
+            if ((droppableGroupClass && containstClasses(droppable, droppableGroupClass)) ||
                 droppable.isSameNode(currentDroppable)) {
                 configHandler.scroll = getScrollElement(droppable);
             }

package/dist/core/{utils → config}/droppableConfigurator.d.ts

@@ -1,6 +1,6 @@
-import { DroppableConfig } from "../configHandler";
-import { DragMouseTouchEvent } from "../../../index";
-import { MapFrom } from "..";
+import { DroppableConfig } from './configHandler';
+import { DragMouseTouchEvent } from '../../../index';
+import { MapFrom } from '..';
 export declare class DroppableConfigurator<T> {
     initial: DroppableConfig<any> | undefined;
     current: DroppableConfig<T> | undefined;

package/dist/core/{utils → config}/droppableConfigurator.js

@@ -1,9 +1,24 @@
-import ConfigHandler from "../configHandler";
-import { draggableIsOutside } from "./GetStyles";
-import { IsHTMLElement } from "./touchDevice";
-import { setEventWithInterval } from "./SetStyles";
-import { getClassesSelector } from "./dom/classList";
-import { MapConfig } from "./config";
+import ConfigHandler from './configHandler';
+import { draggableIsOutside } from '../utils/GetStyles';
+import { IsHTMLElement } from '../utils/typesCheckers';
+import { setEventWithInterval } from '../utils/SetStyles';
+import { getClassesSelector } from '../utils/dom/classList';
+const MapConfig = (coreConfig, mapFrom) => {
+    const { config, droppable } = coreConfig;
+    const { onInsertEvent, onDragEnd } = config;
+    const mapOnInsertEvent = (index, value) => {
+        return onInsertEvent(index, mapFrom(value, droppable), true);
+    };
+    const mapOnDragEnd = (eventData) => {
+        const { index, value } = eventData;
+        onDragEnd({ index, value: mapFrom(value, droppable) });
+    };
+    return {
+        ...config,
+        onDragEnd: mapOnDragEnd,
+        onInsertEvent: mapOnInsertEvent
+    };
+};
 export class DroppableConfigurator {
     initial;
     current;
@@ -52,7 +67,9 @@ export class DroppableConfigurator {
         return currentDroppable;
     }
     isOutsideOfAllDroppables(currentElement) {
-        const droppables = this.groupClass ? Array.from(document.querySelectorAll(getClassesSelector(this.groupClass))) : [this.parent];
+        const droppables = this.groupClass
+            ? Array.from(document.querySelectorAll(getClassesSelector(this.groupClass)))
+            : [this.parent];
         return droppables.every((droppable) => draggableIsOutside(currentElement, droppable));
     }
     isNotInsideAnotherDroppable(currentElement, droppable) {
@@ -62,9 +79,10 @@ export class DroppableConfigurator {
     onScrollEvent() {
         this.dragEvent();
     }
-    ;
     setOnScroll(droppable) {
-        setEventWithInterval(droppable, "onscroll", () => { this.onScrollEvent(); });
+        setEventWithInterval(droppable, 'onscroll', () => {
+            this.onScrollEvent();
+        });
     }
     getConfigFrom(element) {
         const coreConfig = ConfigHandler.getConfig(element);
@@ -81,8 +99,7 @@ export class DroppableConfigurator {
     }
     getCurrentConfig(event) {
         const currentElement = this.draggableElement;
-        if (this.current &&
-            this.isNotInsideAnotherDroppable(currentElement, this.current?.droppable)) {
+        if (this.current && this.isNotInsideAnotherDroppable(currentElement, this.current?.droppable)) {
             return this.current;
         }
         const currentDroppable = this.getCurrent(currentElement, event);

package/dist/core/dragAndDrop.d.ts

@@ -1,4 +1,4 @@
-import { ListCondig } from ".";
-import { Config } from ".";
-import HandlerPublisher from "./HandlerPublisher";
+import { ListCondig } from '.';
+import { Config } from '.';
+import HandlerPublisher from './HandlerPublisher';
 export default function dragAndDrop<T>(listCondig: ListCondig<T>, handlerPublisher: HandlerPublisher, config?: Config<T>, indexAttr?: string): readonly [(index: number) => void, (index: number, value: T) => void, (parent: HTMLElement | null | undefined) => MutationObserver | undefined];

package/dist/core/dragAndDrop.js

@@ -1,10 +1,48 @@
-import { getConfig } from "./utils/config";
-import useDroppable from "./useDroppable";
-import ConfigHandler from "./configHandler";
-import { observeMutation } from "./utils/observer";
-import { addClass } from "./utils/dom/classList";
-import { DROPPABLE_CLASS } from "./utils/classes";
-import { isTempElement } from "./utils/tempChildren";
+import { VERTICAL } from '.';
+import useDroppable from './useDroppable';
+import ConfigHandler from './config/configHandler';
+import { isTempElement, observeMutation } from './utils/observer';
+import { addClass } from './utils/dom/classList';
+import { DRAGGABLE_CLASS, DROPPABLE_CLASS } from './utils/classes';
+const getConfig = (listCondig, config) => {
+    const onRemoveAtEvent = (index, sync) => {
+        return listCondig.removeAtEvent(index, sync);
+    };
+    const onInsertEvent = (index, value, sync) => {
+        return listCondig.insertEvent(index, value, sync);
+    };
+    const onGetLegth = () => {
+        return listCondig.getLength();
+    };
+    const onGetValue = (index) => {
+        return listCondig.getValue(index);
+    };
+    const defaultMapFrom = (object) => {
+        return object;
+    };
+    return {
+        direction: config?.direction ?? VERTICAL,
+        handlerSelector: config?.handlerSelector ?? DRAGGABLE_CLASS,
+        draggingClass: config?.draggingClass ?? 'dragging',
+        droppableClass: config?.droppableClass ?? 'droppable-hover',
+        isDraggable: config?.isDraggable ?? (() => true),
+        onDragStart: config?.onDragStart ?? (() => { }),
+        onDragEnd: config?.onDragEnd ?? (() => { }),
+        droppableGroup: config?.droppableGroup,
+        onRemoveAtEvent,
+        onInsertEvent,
+        onGetLegth,
+        onGetValue,
+        animationDuration: config?.animationDuration ?? 200,
+        removingClass: config?.removingClass ?? 'removing',
+        insertingFromClass: config?.insertingFromClass ?? 'from-inserting',
+        delayBeforeRemove: config?.delayBeforeRemove ?? 200,
+        delayBeforeInsert: config?.delayBeforeInsert ?? 200,
+        mapFrom: config?.mapFrom ?? defaultMapFrom,
+        delayBeforeTouchMoveEvent: config?.delayBeforeTouchMoveEvent ?? 150,
+        coordinateTransform: config?.coordinateTransform ?? [(coordinate) => coordinate]
+    };
+};
 export default function dragAndDrop(listCondig, handlerPublisher, config, indexAttr = 'index') {
     let removeAtFromElements = [];
     let insertAtFromElements = [];
@@ -32,8 +70,14 @@ export default function dragAndDrop(listCondig, handlerPublisher, config, indexA
         insertAtFromElements = insertAtFromElementList;
     };
     const childrenMutationFilter = (mutation) => {
-        const addedNodes = mutation.addedNodes.values().filter((element) => !isTempElement(element)).toArray();
-        const removedNodes = mutation.removedNodes.values().filter((element) => !isTempElement(element)).toArray();
+        const addedNodes = mutation.addedNodes
+            .values()
+            .filter((element) => !isTempElement(element))
+            .toArray();
+        const removedNodes = mutation.removedNodes
+            .values()
+            .filter((element) => !isTempElement(element))
+            .toArray();
         return addedNodes.length > 0 || removedNodes.length > 0;
     };
     const observeChildrens = (parent) => {

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

@@ -0,0 +1,4 @@
+import { Translate } from 'index';
+import { CoreConfig } from '..';
+import HandlerPublisher from '../HandlerPublisher';
+export declare const useChangeDraggableStyles: <T>(currentConfig: CoreConfig<T>, handlerPublisher: HandlerPublisher, endDraggingAction: () => void) => readonly [(element: HTMLElement) => void, (element: Element, force: boolean) => void, (element: Element, translation: Translate) => void];

package/dist/core/events/changeDraggableStyles.js

@@ -0,0 +1,40 @@
+import { DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, GRABBING_CLASS } from '../utils/classes';
+import { toggleClass } from '../utils/dom/classList';
+import { moveTranslate, setCustomFixedSize, setTranistion } from '../utils/SetStyles';
+import { draggableTargetTimingFunction } from '../utils';
+export const useChangeDraggableStyles = (currentConfig, handlerPublisher, endDraggingAction) => {
+    const { handlerSelector, animationDuration } = currentConfig;
+    const removeElementDraggingStyles = (element) => {
+        endDraggingAction();
+        toggleDraggingClass(element, false);
+        element.style.transform = '';
+        element.style.transition = '';
+        element.style.top = '';
+        element.style.left = '';
+        setCustomFixedSize(element, {
+            fixedHeight: '',
+            fixedWidth: ''
+        });
+    };
+    const toggleDraggingClass = (element, force) => {
+        toggleClass(element, DRAGGING_CLASS, force);
+        toogleHandlerDraggingClass(force, element);
+        handlerPublisher.toggleGrabClass(!force);
+    };
+    const toogleHandlerDraggingClass = (force, element) => {
+        const handlerElement = element.querySelector(handlerSelector);
+        toggleClass(document.body, GRABBING_CLASS, force);
+        if (handlerElement) {
+            toggleClass(handlerElement, DRAGGING_HANDLER_CLASS, force);
+        }
+        else {
+            toggleClass(element, DRAGGING_HANDLER_CLASS, force);
+        }
+    };
+    const dragEventOverElement = (element, translation) => {
+        const { width, height } = translation;
+        moveTranslate(element, height, width);
+        setTranistion(element, animationDuration, draggableTargetTimingFunction);
+    };
+    return [removeElementDraggingStyles, toggleDraggingClass, dragEventOverElement];
+};

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

@@ -0,0 +1,9 @@
+import { WindowScroll } from '../../../../index';
+import { CoreConfig } from '../..';
+import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT } from '../../utils';
+import { DroppableConfig } from '../../config/configHandler';
+import HandlerPublisher from '../../HandlerPublisher';
+type DraggingEvent = typeof DRAG_EVENT | typeof START_DRAG_EVENT;
+type DropEvent = 'drop' | typeof START_DROP_EVENT;
+export default function useDragAndDropEvents<T>(currentConfig: CoreConfig<T>, index: number, parent: HTMLElement, droppableGroupClass: string | null, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(draggedElement: HTMLElement, event: DraggingEvent, droppableConfig: DroppableConfig<T> | undefined) => void, (draggedElement: HTMLElement, event: DropEvent, droppableConfig: DroppableConfig<T> | undefined, initialWindowScroll: WindowScroll, positionOnSourceDroppable?: number) => void, (element: Element, force: boolean) => void];
+export {};

package/dist/core/{utils/events/emitEvents.js → events/dragAndDrop/dragAndDrop.js}

@@ -1,79 +1,33 @@
-import { draggableIsOutside, getParentDraggableChildren, getPropByDirection, getSiblings, getTransform, getWindowScroll, } from "../GetStyles";
-import { moveTranslate, setCustomFixedSize, setTranistion } from "../SetStyles";
-import getTranslationByDragging from "../translate/GetTranslationByDraggingAndEvent";
-import getTranslateBeforeDropping from "../translate/GetTranslateBeforeDropping";
-import { DRAG_EVENT, draggableTargetTimingFunction, IsDropEvent, START_DRAG_EVENT, START_DROP_EVENT, TEMP_CHILD_CLASS } from "..";
-import { IsHTMLElement } from "../touchDevice";
-import { isTempElement, removeTempChild } from "../tempChildren";
-import { DISABLE_TRANSITION, DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRABBING_CLASS } from "../classes";
-import { addClass, containClass, getClassesSelector, removeClass, toggleClass } from "../dom/classList";
-import { observeMutation } from "../observer";
+import { draggableIsOutside, getPropByDirection, getSiblings, getTransform, getWindowScroll } from '../../utils/GetStyles';
+import { moveTranslate } from '../../utils/SetStyles';
+import getTranslationByDragging from './getTranslationByDraggingAndEvent';
+import getTranslateBeforeDropping from './getTranslateBeforeDropping';
+import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT, TEMP_CHILD_CLASS } from '../../utils';
+import { IsHTMLElement } from '../../utils/typesCheckers';
+import { removeTempChild } from '../../tempChildren';
+import { DRAGGABLE_CLASS, DROPPING_CLASS } from '../../utils/classes';
+import { addClass, containClass, getClassesSelector, removeClass } from '../../utils/dom/classList';
+import { useChangeDraggableStyles } from '../changeDraggableStyles';
 const DELAY_TIME_TO_SWAP = 50;
-export default function useEmitEvents(currentConfig, index, parent, droppableGroupClass, handlerPublisher, endDraggingAction) {
+export default function useDragAndDropEvents(currentConfig, index, parent, droppableGroupClass, handlerPublisher, endDraggingAction) {
     let actualIndex = index;
-    const { direction, handlerSelector, onRemoveAtEvent, animationDuration, delayBeforeInsert, draggingClass } = currentConfig;
-    const emitEventToSiblings = (draggedElement, event, initialWindowScroll, droppableConfig, positionOnSourceDroppable) => {
+    const { direction, onRemoveAtEvent, animationDuration, draggingClass } = currentConfig;
+    const [removeElementDraggingStyles, toggleDraggingClass, dragEventOverElement] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
+    const emitDraggingEvent = (draggedElement, event, droppableConfig) => {
         if (!droppableConfig) {
             return;
         }
         const { droppable, config } = droppableConfig;
         const tranlation = getTranslationByDragging(draggedElement, event, config.direction, droppable);
-        const dropping = IsDropEvent(event);
-        if (!dropping) {
-            emitDraggingEventToSiblings(draggedElement, event, tranlation, droppableConfig);
-        }
-        else {
-            emitDroppingEventToSiblings(draggedElement, event, tranlation, initialWindowScroll, droppableConfig, positionOnSourceDroppable);
-        }
+        emitDraggingEventToSiblings(draggedElement, event, tranlation, droppableConfig);
     };
-    // #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);
-    };
-    // #region Remove
-    const emitRemoveEventToSiblings = (targetIndex, draggedElement, droppableConfig, onFinishRemoveEvent) => {
-        if (!droppableConfig ||
-            !droppableConfig.droppable ||
-            !droppableConfig.config) {
+    const emitDroppingEvent = (draggedElement, event, droppableConfig, initialWindowScroll, positionOnSourceDroppable) => {
+        if (!droppableConfig) {
             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 tranlation = getTranslationByDragging(draggedElement, event, config.direction, droppable);
+        emitDroppingEventToSiblings(draggedElement, event, tranlation, initialWindowScroll, droppableConfig, positionOnSourceDroppable);
     };
     // #region Drag events
     const emitDraggingEventToSiblings = (draggedElement, event, translation, droppableConfig) => {
@@ -134,17 +88,12 @@ export default function useEmitEvents(currentConfig, index, parent, droppableGro
         const { width, height } = translation;
         moveTranslate(element, height, width);
     };
-    const dragEventOverElement = (element, translation) => {
-        const { width, height } = translation;
-        moveTranslate(element, height, width);
-        setTranistion(element, animationDuration, draggableTargetTimingFunction);
-    };
     // #region Drop events
     const emitDroppingEventToSiblings = (draggedElement, event, translation, initialWindowScroll, droppableConfig, positionOnSourceDroppable) => {
         const { droppable, scroll, config } = droppableConfig;
         const [siblings, positionOnDroppable] = getSiblings(draggedElement, droppable);
         const allSiblings = siblings.toReversed();
-        const realPositionOnDroppable = (positionOnDroppable === -1) ? allSiblings.length : positionOnDroppable;
+        const realPositionOnDroppable = positionOnDroppable === -1 ? allSiblings.length : positionOnDroppable;
         allSiblings.splice(realPositionOnDroppable, 0, draggedElement);
         const [previousElement, nextElement, targetIndex] = getPreviousAndNextElement(draggedElement, positionOnDroppable, allSiblings, droppable);
         translation = getTranslationByDragging(draggedElement, event, config.direction, parent, previousElement, nextElement);
@@ -158,8 +107,7 @@ export default function useEmitEvents(currentConfig, index, parent, droppableGro
             if (targetIndex - 1 >= index) {
                 newTranslation = { height: 0, width: 0 };
             }
-            if (event === START_DROP_EVENT &&
-                !containClass(sibling, TEMP_CHILD_CLASS)) {
+            if (event === START_DROP_EVENT && !containClass(sibling, TEMP_CHILD_CLASS)) {
                 startDropEventOverElement(sibling, newTranslation, draggedElement, draggableTranslation);
             }
         }
@@ -182,11 +130,7 @@ export default function useEmitEvents(currentConfig, index, parent, droppableGro
         const [previousIndex, nextIndex] = getPreviousAndNextElementIndex();
         const previousElement = allSiblings[previousIndex] ?? null;
         const nextElement = allSiblings[nextIndex] ?? null;
-        return [
-            previousElement,
-            nextElement,
-            targetIndex,
-        ];
+        return [previousElement, nextElement, targetIndex];
     };
     const startDropEventOverElement = (targetElement, translation, element, sourceElementTranlation) => {
         moveTranslate(targetElement, translation.height, translation.width);
@@ -251,7 +195,7 @@ export default function useEmitEvents(currentConfig, index, parent, droppableGro
         }
         const { distance } = getPropByDirection(direction);
         if (IsHTMLElement(lastChildren)) {
-            lastChildren.style[distance] = "0px";
+            lastChildren.style[distance] = '0px';
         }
     };
     const removeTranslateFromSiblings = (element, parent) => {
@@ -262,72 +206,9 @@ export default function useEmitEvents(currentConfig, index, parent, droppableGro
     };
     const removeTranslateWhitoutTransition = (element) => {
         if (IsHTMLElement(element)) {
-            element.style.transition = "";
-            element.style.transform = "";
-        }
-    };
-    const removeElementDraggingStyles = (element) => {
-        endDraggingAction();
-        toggleDraggingClass(element, false);
-        element.style.transform = "";
-        element.style.transition = "";
-        element.style.top = "";
-        element.style.left = "";
-        setCustomFixedSize(element, {
-            fixedHeight: '',
-            fixedWidth: ''
-        });
-    };
-    const toogleHandlerDraggingClass = (force, element) => {
-        const handlerElement = element.querySelector(handlerSelector);
-        toggleClass(document.body, GRABBING_CLASS, force);
-        if (handlerElement) {
-            toggleClass(handlerElement, DRAGGING_HANDLER_CLASS, force);
-        }
-        else {
-            toggleClass(element, DRAGGING_HANDLER_CLASS, force);
+            element.style.transition = '';
+            element.style.transform = '';
         }
     };
-    const toggleDraggingClass = (element, force) => {
-        toggleClass(element, DRAGGING_CLASS, force);
-        toogleHandlerDraggingClass(force, element);
-        handlerPublisher.toggleGrabClass(!force);
-    };
-    return [
-        emitEventToSiblings,
-        emitRemoveEventToSiblings,
-        emitInsertEventToSiblings,
-        emitFinishRemoveEventToSiblings,
-        toggleDraggingClass,
-    ];
+    return [emitDraggingEvent, emitDroppingEvent, toggleDraggingClass];
 }
-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/{utils/translate/GetTranslateBeforeDropping.d.ts → events/dragAndDrop/getTranslateBeforeDropping.d.ts}

@@ -1,5 +1,5 @@
-import { Direction } from "../..";
-import { Translate, WindowScroll } from "../../../../index";
+import { Direction } from '../..';
+import { Translate, WindowScroll } from '../../../../index';
 export default function getTranslateBeforeDropping(direction: Direction, siblings: Element[], sourceIndex: number, targetIndex: number, scroll: WindowScroll, previousScroll: {
     scrollLeft: number;
     scrollTop: number;

package/dist/core/{utils/translate/GetTranslateBeforeDropping.js → events/dragAndDrop/getTranslateBeforeDropping.js}

@@ -1,6 +1,6 @@
-import { HORIZONTAL, VERTICAL } from "../..";
-import { getPropByDirection, getValueFromProperty, } from "../GetStyles";
-import { gapAndDisplayInformation, getBeforeStyles } from "../ParseStyles";
+import { HORIZONTAL, VERTICAL } from '../..';
+import { getPropByDirection, getValueFromProperty } from '../../utils/GetStyles';
+import { gapAndDisplayInformation, getBeforeStyles } from '../../utils/ParseStyles';
 const getContentPosition = (direction, droppable) => {
     const { borderBeforeWidth, paddingBefore, axis, getRect } = getPropByDirection(direction);
     const borderBeforeWidthDroppable = getValueFromProperty(droppable, borderBeforeWidth);
@@ -12,10 +12,7 @@ const getGroupTranslate = (droppable, draggable) => {
     const [top, left] = getBeforeStyles(draggable);
     const verticalContentPosition = getContentPosition(VERTICAL, droppable);
     const horizontalContentPosition = getContentPosition(HORIZONTAL, droppable);
-    return [
-        horizontalContentPosition - left,
-        verticalContentPosition - top
-    ];
+    return [horizontalContentPosition - left, verticalContentPosition - top];
 };
 export default function getTranslateBeforeDropping(direction, siblings, sourceIndex, targetIndex, scroll, previousScroll, initialWindowScroll, droppable, draggable) {
     let height = 0;
@@ -30,9 +27,9 @@ export default function getTranslateBeforeDropping(direction, siblings, sourceIn
         height += y;
         width += x;
     }
-    const { scrollElement, beforeMargin: beforeMarginProp, afterMargin: afterMarginProp, distance: spaceProp, gap: gapStyle, } = getPropByDirection(direction);
+    const { scrollElement, beforeMargin: beforeMarginProp, afterMargin: afterMarginProp, distance: spaceProp, gap: gapStyle } = getPropByDirection(direction);
     const [gap, hasGaps] = gapAndDisplayInformation(droppable, gapStyle);
-    const [afterMarginOutside, beforeMarginOutside, spaceBeforeDraggedElement,] = getBeforeAfterMarginBaseOnDraggedDirection(beforeMarginProp, afterMarginProp, sourceElement, targetElement?.previousElementSibling, isDraggedFoward, hasGaps, isGroupDropping);
+    const [afterMarginOutside, beforeMarginOutside, spaceBeforeDraggedElement] = getBeforeAfterMarginBaseOnDraggedDirection(beforeMarginProp, afterMarginProp, sourceElement, targetElement?.previousElementSibling, isDraggedFoward, hasGaps, isGroupDropping);
     const [beforeSpace, space, afterSpace] = spaceWithMargins(beforeMarginProp, afterMarginProp, spaceProp, siblingsBetween, gap, hasGaps);
     const spaceBetween = getSpaceBetween(space, beforeSpace, afterSpace, beforeMarginOutside, afterMarginOutside, gap);
     const scrollChange = isGroupDropping
@@ -71,12 +68,7 @@ const getElementsRange = (siblings, sourceIndex, targetIndex, draggable) => {
     if (firstIndex < 0 && draggable) {
         siblingsBetween = siblings.slice(firstIndex + 1, secondIndex);
     }
-    return [
-        sourceElement,
-        targetElement,
-        siblingsBetween,
-        isDraggedFoward,
-    ];
+    return [sourceElement, targetElement, siblingsBetween, isDraggedFoward];
 };
 const spaceWithMargins = (beforeMargin, afterMargin, distance, siblings, gap, hasGaps) => {
     if (siblings.length == 0) {

package/dist/core/{utils/translate/GetTranslationByDraggingAndEvent.d.ts → events/dragAndDrop/getTranslationByDraggingAndEvent.d.ts}

@@ -1,5 +1,5 @@
-import { Direction } from "../..";
-import { DragAndDropEvent } from "..";
+import { Direction } from '../..';
+import { DragAndDropEvent } from '../../utils';
 export default function getTranslationByDraggingAndEvent(current: HTMLElement, event: DragAndDropEvent, direction: Direction, droppable: HTMLElement, previousElement?: Element | null, nextElement?: Element | null): {
     height: number;
     width: number;

package/dist/core/{utils/translate/GetTranslationByDraggingAndEvent.js → events/dragAndDrop/getTranslationByDraggingAndEvent.js}

@@ -1,7 +1,7 @@
-import { HORIZONTAL } from "../..";
-import { DRAG_EVENT } from "..";
-import { draggableIsOutside, getPropByDirection, getValueFromProperty, } from "../GetStyles";
-import { gapAndDisplayInformation } from "../ParseStyles";
+import { HORIZONTAL } from '../..';
+import { DRAG_EVENT } from '../../utils';
+import { draggableIsOutside, getPropByDirection, getValueFromProperty } from '../../utils/GetStyles';
+import { gapAndDisplayInformation } from '../../utils/ParseStyles';
 export default function getTranslationByDraggingAndEvent(current, event, direction, droppable, previousElement = current.previousElementSibling, nextElement = current.nextElementSibling) {
     let { height, width } = getTranslationByDragging(direction, current, previousElement, nextElement);
     const intersection = draggableIsOutside(current, droppable);

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

@@ -0,0 +1,4 @@
+import { CoreConfig } from '../index';
+import HandlerPublisher from '../HandlerPublisher';
+export default function useInsertEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(targetIndex: number, draggedElement: HTMLElement, droppable: HTMLElement, value: T, startInserting: () => void) => void];
+export declare const insertToListEmpty: <T>(config: CoreConfig<T>, droppable: HTMLElement | undefined | null, targetIndex: number, value: T) => void;