fluid-dnd 2.4.0 → 2.5.1

package/dist/core/events/insert.js

@@ -1,16 +1,16 @@
 import { getParentDraggableChildren, getSiblings } from '../utils/GetStyles';
 import getTranslationByDragging from '../events/dragAndDrop/getTranslationByDraggingAndEvent';
-import { IsHTMLElement } from '../utils/typesCheckers';
-import { removeTempChild } from '../tempChildren';
+import { addTempChildOnInsert, 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';
+import { removeTranslateWhitoutTransition } from '../utils/SetStyles';
 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 emitInsertEventToSiblings = (targetIndex, draggedElement, droppable, value, droppableConfigurator) => {
         const translation = getTranslationByDragging(draggedElement, 'insert', currentConfig.direction, droppable);
         const { onInsertEvent } = currentConfig;
         const siblings = getParentDraggableChildren(droppable);
@@ -22,7 +22,7 @@ export default function useInsertEvents(currentConfig, parent, handlerPublisher,
                 dragEventOverElement(sibling, translation);
             }
         }
-        startInserting();
+        addTempChildOnInsert(draggedElement, false, droppableConfigurator);
         setTimeout(() => {
             onInsertEvent(targetIndex, value);
             onFinishInsertElement(targetIndex, droppable, currentConfig);
@@ -37,12 +37,6 @@ export default function useInsertEvents(currentConfig, parent, handlerPublisher,
             removeTranslateWhitoutTransition(sibling);
         }
     };
-    const removeTranslateWhitoutTransition = (element) => {
-        if (IsHTMLElement(element)) {
-            element.style.transition = '';
-            element.style.transform = '';
-        }
-    };
     return [emitInsertEventToSiblings];
 }
 const childrenMutationFilter = (mutation) => {

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

@@ -1,4 +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];
+export default function useRemoveEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(index: number, targetIndex: number, draggableElement: HTMLElement, config: DroppableConfig<T>) => void];

package/dist/core/events/remove.js

@@ -1,9 +1,10 @@
 import { getSiblings } from '../utils/GetStyles';
-import { moveTranslate } from '../utils/SetStyles';
+import { moveTranslate, removeTranslateWhitoutTransition, setTranistion } from '../utils/SetStyles';
 import getTranslationByDragging from './dragAndDrop/getTranslationByDraggingAndEvent';
-import { IsHTMLElement } from '../utils/typesCheckers';
-import { removeTempChild } from '../tempChildren';
+import { addTempChild, removeTempChild } from '../tempChildren';
 import { useChangeDraggableStyles } from './changeDraggableStyles';
+import { addClass, removeClass } from '../utils/dom/classList';
+import { draggableTargetTimingFunction } from '../utils';
 export default function useRemoveEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
     const { animationDuration } = currentConfig;
     const [removeElementDraggingStyles] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
@@ -17,7 +18,7 @@ export default function useRemoveEvents(currentConfig, parent, handlerPublisher,
         const translation = getTranslationByDragging(draggedElement, 'remove', config.direction, droppable);
         for (const [index, sibling] of siblings.entries()) {
             if (index >= targetIndex) {
-                startDragEventOverElement(sibling, translation);
+                moveTranslate(sibling, translation);
                 setTimeout(() => {
                     onFinishRemoveEvent(sibling);
                 }, animationDuration);
@@ -31,21 +32,34 @@ export default function useRemoveEvents(currentConfig, parent, handlerPublisher,
             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 = '';
+    const removeAt = (index, targetIndex, draggableElement, config) => {
+        const { removingClass, delayBeforeRemove } = currentConfig;
+        if (targetIndex == index) {
+            addClass(draggableElement, removingClass);
+            setTimeout(() => {
+                removeAfterRemovingClass(index, targetIndex, draggableElement, config);
+            }, delayBeforeRemove);
         }
     };
-    return [emitRemoveEventToSiblings, emitFinishRemoveEventToSiblings];
+    const removeAfterRemovingClass = (index, targetIndex, draggableElement, config) => {
+        const { removingClass, onRemoveAtEvent } = currentConfig;
+        removeClass(draggableElement, removingClass);
+        addTempChild(draggableElement, parent, false, config);
+        emitRemoveEventToSiblings(targetIndex, draggableElement, config, (sibling) => {
+            removeDraggingStyles(sibling);
+            emitFinishRemoveEventToSiblings(draggableElement);
+        });
+        onRemoveAtEvent(index, true);
+    };
+    const removeDraggingStyles = (element) => {
+        setTranistion(element, animationDuration, draggableTargetTimingFunction);
+        moveTranslate(element);
+    };
+    return [removeAt];
 }

package/dist/core/positioning/autoScroll.js

@@ -1,4 +1,4 @@
-import { draggableIsCompleteOutside, getPropByDirection } from '../utils/GetStyles';
+import { draggableIsCompleteOutside, getAxisValue, getBefore, getDistanceValue, getRect } from '../utils/GetStyles';
 const scrollByDirection = (element, direction, scrollAmount) => {
     if (scrollAmount == 0) {
         return;
@@ -14,11 +14,12 @@ export const useScroll = (draggedElement) => {
     let lastScrollAmount = 0.5;
     const minScrollAmountDiff = 0.03;
     const updateScrollByPosition = (direction, parent, position, translate) => {
-        const { before, distance, axis, getRect } = getPropByDirection(direction);
-        const distanceValue = getRect(draggedElement)[distance];
+        const [distanceValue] = getDistanceValue(direction, getRect(draggedElement));
         const parentBoundingClientRect = getRect(parent);
-        const positionInsideParent = position[before] - parentBoundingClientRect[before] + translate[axis];
-        const parentDistance = parentBoundingClientRect[distance];
+        const positionInsideParent = getBefore(direction, position) -
+            getBefore(direction, parentBoundingClientRect) +
+            getAxisValue(direction, translate);
+        const [parentDistance] = getDistanceValue(direction, parentBoundingClientRect);
         const totalDistance = parentDistance - distanceValue;
         const relativePosition = positionInsideParent / totalDistance;
         const relativeDistanceValue = distanceValue / totalDistance;

package/dist/core/positioning/usePositioning.d.ts

@@ -1,7 +1,7 @@
-import { DragMouseTouchEvent, TransformEvent } from '../../../index';
+import { DragMouseTouchEvent, ElementPosition, OffsetCoordinate, TransformEvent } from '../../../index';
 import { CoordinateMap, Direction } from '..';
 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];
-export declare const getTransformState: (event: TransformEvent, element: HTMLElement, draggable: Element) => [number, number, number, number];
+export declare const getTransformState: (event: TransformEvent, element: HTMLElement, draggable: Element) => [ElementPosition, OffsetCoordinate];

package/dist/core/positioning/usePositioning.js

@@ -1,4 +1,4 @@
-import { getNearestFixedParentPosition, getPropByDirection, getValueFromProperty } from '../utils/GetStyles';
+import { getAxisValue, getBefore, getBeforeMarginValue, getBorderBeforeWidthValue, getDistanceValue, getInnerDistance, getNearestFixedParentPosition, getOffsetValue, getPageValue, getPropByDirection, getRect, getScrollValue, hasTransform, isSameNode } from '../utils/GetStyles';
 import { HORIZONTAL, VERTICAL } from '..';
 import { useScroll } from './autoScroll';
 import { HANDLER_CLASS, DRAGGING_CLASS } from '../utils/classes';
@@ -11,33 +11,34 @@ export const usePositioning = (draggedElement, coordinateTransforms) => {
     const updateTranform = (newTranslate) => {
         draggedElement.style.transform = `translate( ${newTranslate.x}px, ${newTranslate.y}px)`;
     };
-    const updatePosition = (newPosition) => {
-        draggedElement.style.top = `${newPosition.top}px`;
-        draggedElement.style.left = `${newPosition.left}px`;
+    const updatePosition = (position) => {
+        draggedElement.style.top = `${position.top}px`;
+        draggedElement.style.left = `${position.left}px`;
     };
     const setTransform = (element, parent, pagePosition, direction) => {
         const getTranslateWihtDirection = (translateDirection) => {
-            const { beforeMargin, borderBeforeWidth, before, offset, scroll, page, inner, distance, axis, getRect } = getPropByDirection(translateDirection);
-            const pageValue = pagePosition[page];
-            const scrollValue = window[scroll];
-            const innerDistance = window[inner];
-            const distanceValue = getRect(element)[distance];
-            const border = getValueFromProperty(element, borderBeforeWidth);
-            const margin = getValueFromProperty(element, beforeMargin);
-            const elementPosittion = pageValue - currentOffset[offset];
+            const pageValue = getPageValue(translateDirection, pagePosition);
+            const scrollValue = getScrollValue(translateDirection, window);
+            const innerDistance = getInnerDistance(translateDirection, window);
+            const [distanceValue] = getDistanceValue(translateDirection, getRect(element));
+            const border = getBorderBeforeWidthValue(translateDirection, element);
+            const margin = getBeforeMarginValue(translateDirection, element);
+            const elementPosittion = pageValue - getOffsetValue(translateDirection, currentOffset);
             const beforefixecParentValue = getNearestFixedParentPosition(element, translateDirection);
             if (elementPosittion >= scrollValue - distanceValue / 2 &&
                 elementPosittion <= scrollValue + innerDistance) {
+                const parentPosition = getParentPosition(translateDirection, parent);
                 const newTranslate = elementPosittion -
-                    position[before] -
+                    getBefore(translateDirection, position) -
                     border -
                     margin -
                     scrollValue -
-                    beforefixecParentValue;
+                    beforefixecParentValue -
+                    parentPosition;
                 updateScroll(translateDirection);
                 return newTranslate;
             }
-            const defaultTransalation = translate[axis];
+            const defaultTransalation = getAxisValue(translateDirection, translate);
             return defaultTransalation;
         };
         const updateScroll = (translateDirection) => {
@@ -61,27 +62,23 @@ export const usePositioning = (draggedElement, coordinateTransforms) => {
         return coordinate;
     };
     const updateTransformState = (event, element) => {
-        const [top, left, offsetX, offsetY] = getTransformState(event, element, draggedElement);
-        position = {
-            top,
-            left
-        };
+        const [tempPosition, offset] = getTransformState(event, element, draggedElement);
+        position = tempPosition;
         updatePosition(position);
-        currentOffset = { offsetX, offsetY };
+        currentOffset = offset;
     };
     return [setTransform, updateTransformState];
 };
 const getOffsetWithDraggable = (direction, element, draggable) => {
-    const { borderBeforeWidth, before, getRect } = getPropByDirection(direction);
-    return (getRect(element)[before] -
-        getRect(draggable)[before] -
-        getValueFromProperty(draggable, borderBeforeWidth));
+    return (getBefore(direction, getRect(element)) -
+        getBefore(direction, getRect(draggable)) -
+        getBorderBeforeWidthValue(direction, draggable));
 };
 const getOffset = (event, draggable) => {
     let { offsetX, offsetY, target } = event;
     let targetHandler = getHandlerElementAncestor(target, draggable);
     const targetElement = target;
-    if (targetElement && targetHandler && !targetElement.isSameNode(targetHandler)) {
+    if (targetElement && targetHandler && !isSameNode(targetElement, targetHandler)) {
         offsetX += getOffsetWithDraggable(HORIZONTAL, targetElement, targetHandler);
         offsetY += getOffsetWithDraggable(VERTICAL, targetElement, targetHandler);
     }
@@ -89,37 +86,48 @@ const getOffset = (event, draggable) => {
         offsetX += getOffsetWithDraggable(HORIZONTAL, targetHandler, draggable);
         offsetY += getOffsetWithDraggable(VERTICAL, targetHandler, draggable);
     }
-    return [offsetX, offsetY];
+    return { offsetX, offsetY };
 };
 const getHandlerElementAncestor = (target, draggable) => {
     const targetHandler = target?.closest(`.${HANDLER_CLASS}`);
-    if (targetHandler && targetHandler.isSameNode(draggable)) {
+    if (targetHandler && isSameNode(draggable, targetHandler)) {
         return target;
     }
     return targetHandler;
 };
 const getPositionByDistance = (direction, event, element, offsetEvent) => {
-    const { offset, beforeMargin, page, borderBeforeWidth, scroll } = getPropByDirection(direction);
     const beforefixecParentValue = getNearestFixedParentPosition(element, direction);
-    return (event[page] -
-        offsetEvent[offset] -
-        getValueFromProperty(element, beforeMargin) -
-        getValueFromProperty(element, borderBeforeWidth) -
-        window[scroll] -
-        beforefixecParentValue);
+    const parent = element.parentElement;
+    const parentPosition = getParentPosition(direction, parent);
+    return (getPageValue(direction, event) -
+        getOffsetValue(direction, offsetEvent) -
+        getBeforeMarginValue(direction, element) -
+        getBorderBeforeWidthValue(direction, element) -
+        getScrollValue(direction, window) -
+        beforefixecParentValue -
+        parentPosition);
+};
+const getParentPosition = (direction, element) => {
+    return element && hasAncestorTransform(element) ? getBefore(direction, getRect(element)) : 0;
+};
+const hasAncestorTransform = (element) => {
+    let current = element;
+    while (current) {
+        const currentElementHasTransform = hasTransform(current);
+        if (currentElementHasTransform) {
+            return true;
+        }
+        current = current.parentElement;
+    }
+    return false;
 };
 export const getTransformState = (event, element, draggable) => {
-    const [offsetX, offsetY] = getOffset(event, draggable);
+    const offset = getOffset(event, draggable);
     return [
-        getPositionByDistance(VERTICAL, event, element, {
-            offsetX,
-            offsetY
-        }),
-        getPositionByDistance(HORIZONTAL, event, element, {
-            offsetX,
-            offsetY
-        }),
-        offsetX,
-        offsetY
+        {
+            top: getPositionByDistance(VERTICAL, event, element, offset),
+            left: getPositionByDistance(HORIZONTAL, event, element, offset)
+        },
+        offset
     ];
 };

package/dist/core/tempChildren.d.ts

@@ -1,5 +1,5 @@
 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 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;
 export declare const removeTempChild: (parent: HTMLElement, animationDuration: number, isAnimated?: boolean) => void;

package/dist/core/tempChildren.js

@@ -1,18 +1,19 @@
 import { HORIZONTAL, VERTICAL } from '.';
-import { getPropByDirection } from './utils/GetStyles';
+import { getDistanceValue, getPropByDirection, getRect, getScrollElementValue, isSameNode } 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 { NONE_TRANSLATE, 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;
+const TRANSITION_PROPERTY = 'width, min-width, height';
 const getDistance = (droppable, draggedElement, direction) => {
     let distances = getTranslationByDragging(draggedElement, START_DRAG_EVENT, direction, droppable);
     const gap = getGapPixels(droppable, direction);
-    const { distance } = getPropByDirection(direction);
+    const [, distance] = getDistanceValue(direction, distances);
     distances[distance] -= gap;
     const [large, largeDistance] = getlarge(direction, draggedElement);
     distances[largeDistance] = large;
@@ -20,54 +21,54 @@ 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];
+    const distanceValue = getDistanceValue(largeDirection, getRect(draggedElement));
+    return distanceValue;
 };
-const setSizes = (element, height, width) => {
-    setSizeStyles(element, height, width);
-    element.style.minWidth = `${width}px`;
+const setSizes = (element, translate = NONE_TRANSLATE) => {
+    setSizeStyles(element, translate);
+    element.style.minWidth = `${translate.width}px`;
 };
 const updateChildAfterCreated = (child, droppable, distances) => {
     return (observer) => {
         if (!droppable.contains(child)) {
             return;
         }
-        setSizes(child, distances.height, distances.width);
+        setSizes(child, distances);
         observer.disconnect();
     };
 };
+const overflowScroll = (droppable, direction) => {
+    const { scrollDistance, clientDistance } = getPropByDirection(direction);
+    return droppable[scrollDistance] - droppable[clientDistance];
+};
 const scrollPercent = (direction, droppable, droppableScroll) => {
-    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
-    return droppableScroll[scrollElement] / (droppable[scrollDistance] - droppable[clientDistance]);
+    const [scrollElementValue] = getScrollElementValue(direction, droppableScroll);
+    return scrollElementValue / overflowScroll(droppable, direction);
 };
-const fixScrollInitialChange = (droppableConfig, ifStartDragging) => {
+const fixScrollInitialChange = (droppable, config, scroll, ifStartDragging) => {
     if (!ifStartDragging) {
         return;
     }
-    const { droppable, config, scroll } = droppableConfig;
     const { direction } = config;
-    const scrollCompleted = scrollPercent(config.direction, droppable, scroll) > 0.99;
-    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
+    const scrollCompleted = scrollPercent(direction, droppable, scroll) > 0.99;
+    const [, scrollElement] = getScrollElementValue(direction, droppable);
     if (scrollCompleted) {
-        droppable[scrollElement] = droppable[scrollDistance] - droppable[clientDistance];
+        droppable[scrollElement] = overflowScroll(droppable, direction);
     }
 };
 const getTempChild = (draggedElement, ifStartDragging, droppableConfig, addingAnimationDuration) => {
-    if (!droppableConfig) {
-        return;
-    }
-    const { droppable, config } = droppableConfig;
+    const { droppable, config, scroll } = droppableConfig;
     const { direction, animationDuration } = config;
-    fixScrollInitialChange(droppableConfig, ifStartDragging);
+    fixScrollInitialChange(droppable, config, scroll, ifStartDragging);
     if (droppable.querySelector(`.${TEMP_CHILD_CLASS}`) || !draggedElement) {
         return;
     }
     var tempChildTag = draggedElement.tagName == 'LI' ? 'DIV' : draggedElement.tagName;
     var child = document.createElement(tempChildTag);
     addClass(child, TEMP_CHILD_CLASS);
-    setSizes(child, 0, 0);
+    setSizes(child);
     const distances = getDistance(droppable, draggedElement, direction);
-    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, 'width, min-width, height');
+    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, TRANSITION_PROPERTY);
     return [child, distances, droppable];
 };
 export const addTempChild = (draggedElement, parent, ifStartDragging, droppableConfig, addingAnimationDuration) => {
@@ -76,8 +77,8 @@ export const addTempChild = (draggedElement, parent, ifStartDragging, droppableC
         return;
     }
     const [child, distances, droppable] = result;
-    if (parent.isSameNode(droppable)) {
-        setSizes(child, distances.height, distances.width);
+    if (isSameNode(parent, droppable)) {
+        setSizes(child, distances);
     }
     observeMutation(updateChildAfterCreated(child, droppable, distances), droppable, {
         childList: true,
@@ -96,9 +97,9 @@ export const addTempChildOnInsert = (draggedElement, ifStartDragging, droppableC
 };
 const setSizeAfterAppendChild = (child, size) => {
     return requestAnimationFrame(() => {
-        setSizes(child, size.height, size.width);
+        setSizes(child, size);
         requestAnimationFrame(() => {
-            setTranistion(child, 0, timingFunction, 'width, min-width, height');
+            setTranistion(child, 0, timingFunction, TRANSITION_PROPERTY);
         });
     });
 };
@@ -109,12 +110,12 @@ 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 (isSameNode(parent, childParent) ||
+            (!draggedElementIsOutside && isSameNode(droppable, childParent))) {
             return;
         }
         const tempChildElement = tempChild;
-        setSizes(tempChildElement, 0, 0);
+        setSizes(tempChildElement);
         setTimeout(() => {
             tempChild.parentNode?.removeChild(tempChild);
         }, animationDuration + DELAY_TIME);
@@ -125,7 +126,7 @@ export const removeTempChild = (parent, animationDuration, isAnimated = false) =
     lastChildren.forEach((lastChild) => {
         const tempChildElement = lastChild;
         if (isAnimated) {
-            setSizes(tempChildElement, 0, 0);
+            setSizes(tempChildElement);
             setTimeout(() => {
                 if (parent.contains(tempChildElement)) {
                     parent.removeChild(tempChildElement);