@reltio/components 1.4.2042 → 1.4.2044

package/BarChart/BarChart.js

@@ -30,10 +30,7 @@ export var BarChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var _c = getBarChartSettings(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
     var _d = useDynamicYAxisWidth({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
-    var onBarClick = onItemClick && (function (_a) {
-        var group = _a.group;
-        return onItemClick(group);
-    });
+    var onBarClick = onItemClick && (function (data) { return onItemClick(data.group); });
     var clickable = useClickableChartStyle(onBarClick);
     return (React.createElement(BarChartWidget, __assign({ width: width, height: height, data: data }, barChart, { ref: chartRef }),
         React.createElement(CartesianGrid, __assign({}, cartesianGrid)),

package/RCTree/RCTree.js

@@ -52,7 +52,7 @@ export var RCTree = function (_a) {
         }
     }, [scrollToNode]);
     var diplayedTreeData = useMemo(function () {
-        if (dropNode && dragNode) {
+        if (dropNode && dragNode && dropPositionInfo) {
             if (dropNode.pos === dragNode.pos && dropNode.key === dragNode.key)
                 return treeData;
             var dragNodeValue = __assign(__assign({}, dragNode.value), { nodeId: -1 });

package/RCTree/helper.d.ts

@@ -10,9 +10,10 @@ type ConvertTreeDataProps<Node> = {
     isLeaf: (node: Node) => boolean;
 };
 export declare const convertTreeData: <Node extends RCTreeNode>({ data, isLeaf }: ConvertTreeDataProps<Node>) => InternalRCNode<Node>[];
-export declare const getNodeAtPosition: (treeData: RCTreeNode[], pos: string) => any;
+export declare const getNodeAtPosition: <Node extends RCTreeNode>(treeData: Node[], pos: string) => Node | null;
 export declare const getParentPos: (pos: string) => string;
-export declare const changeNodeAtPosition: <Node extends RCTreeNode>(treeData: Node[], pos: string, changeNode: (node: Node) => Node) => any;
+export declare const getDropNodeParent: <Node extends RCTreeNode>(treeData: Node[], dropPositionInfo: DropPositionInfo, dragNodePosition: string) => Node | null;
+export declare const changeNodeAtPosition: <Node extends RCTreeNode>(treeData: Node[], pos: string, changeNode: (node: Node) => Node) => Node[];
 export declare const removeNodeAtPosition: (treeData: RCTreeNode[], pos: string) => any;
 export declare const insertNodeAtPosition: (treeData: RCTreeNode[], pos: string, dropPosition: number, node: RCTreeNode) => any;
 export declare const moveNode: (treeData: RCTreeNode[], dragNode: RCTreeNode, dragNodePos: string, dropPositionInfo: DropPositionInfo) => any;

package/RCTree/helper.js

@@ -42,11 +42,22 @@ export var convertTreeData = function (_a) {
 var getPathFromPosition = pipe(split('-'), remove(0, 1), map(Number), intersperse('children'));
 export var getNodeAtPosition = function (treeData, pos) {
     var nodePath = getPathFromPosition(pos);
-    return nodePath.length > 0 ? path(nodePath, treeData) : null;
+    return nodePath.length > 0 ? path(nodePath, treeData) || null : null;
 };
 export var getParentPos = function (pos) {
     return pos.split('-').slice(0, -1).join('-');
 };
+export var getDropNodeParent = function (treeData, dropPositionInfo, dragNodePosition) {
+    var parentNodePosition = dropPositionInfo.dropPosition === AddNodePosition.AsChild
+        ? dropPositionInfo.pos
+        : getParentPos(dropPositionInfo.pos);
+    var parentNode = getNodeAtPosition(treeData, // current tree
+    // position in the current tree
+    slideNodePos(parentNodePosition, // position in the next tree
+    dragNodePosition, // position of drag node in the current tree
+    false));
+    return parentNode;
+};
 export var changeNodeAtPosition = function (treeData, pos, changeNode) {
     var nodePath = getPathFromPosition(pos);
     var node = path(nodePath, treeData);
@@ -125,7 +136,7 @@ var calcAddNodePosition = function (event) {
     var nodeElement = getNodeTopElement(event.target);
     if (!nodeElement)
         return null;
-    var offsetY = event.clientY - nodeElement.getBoundingClientRect().top;
+    var offsetY = event.clientY - nodeElement.getBoundingClientRect().top || 0;
     var treeNodeHeight = nodeElement.offsetHeight;
     return offsetY < treeNodeHeight / 2 ? AddNodePosition.Top : AddNodePosition.Bottom;
 };
@@ -135,7 +146,7 @@ var findDepthPosition = function (event, dropNode) {
         return null;
     var dropNodeLevel = dropNode.pos.split('-').length - 1;
     var leftPadding = parseFloat(window.getComputedStyle(nodeElement).paddingLeft) || 0;
-    var offsetX = event.clientX - nodeElement.getBoundingClientRect().left - leftPadding;
+    var offsetX = event.clientX - nodeElement.getBoundingClientRect().left - leftPadding || 0;
     return Math.min(dropNodeLevel + 1, Math.max(Math.round(offsetX / DEPTH_LEVEL_INDENT), dropNodeLevel));
 };
 var changePosLastIndex = function (pos, change) {
@@ -164,8 +175,8 @@ export var getDropNodePosition = function (event, dropNode, prevDropPositionInfo
     var pos = !prevDropPositionInfo || prevDropPositionInfo.addToEnd
         ? dropNode.pos
         : slideNodePos(dropNode.pos, getCurrentDropNodePos(prevDropPositionInfo), true);
-    var dropNodeDepth = pos.split('-').length - 1;
     var position = pos.split('-');
+    var dropNodeDepth = position.length - 1;
     var lastIndex = Number(last(position));
     if (depthPosition === dropNodeDepth) {
         return { pos: pos, dropPosition: addNodePosition };

package/RCTree/types.d.ts

@@ -3,6 +3,7 @@ export type RCTreeNode = {
     nodeId: number;
     title?: string;
     expanded?: boolean;
+    pending?: boolean;
     children?: RCTreeNode[];
 };
 export type InternalRCNode<Node extends RCTreeNode = RCTreeNode> = {

package/RCTree/useDnd.d.ts

@@ -1,5 +1,5 @@
 import { DragEvent } from 'react';
-import { InternalRCNode, RCTreeNode } from './types';
+import { InternalRCNode, RCTreeNode, DropPositionInfo } from './types';
 type Props<Node extends RCTreeNode> = {
     treeData: Node[];
     containerRef: React.RefObject<HTMLDivElement>;
@@ -30,18 +30,10 @@ export declare const useDnd: <Node extends RCTreeNode>({ treeData, containerRef,
         }) => void;
         onDrop: () => void;
         dropIndicatorRender: () => any;
-        allowDrop: ({ dragNode, dropNode }: {
-            dragNode: InternalRCNode<Node>;
-            dropNode: InternalRCNode<Node>;
-        }) => boolean;
     };
     nodeDraggable: (node: InternalRCNode<Node>) => boolean;
     dropNode: InternalRCNode<Node>;
     dragNode: InternalRCNode<Node>;
-    dropPositionInfo: {
-        pos: string;
-        dropPosition: number;
-        addToEnd?: boolean;
-    };
+    dropPositionInfo: DropPositionInfo;
 };
 export {};

package/RCTree/useDnd.js

@@ -3,7 +3,7 @@ import { equals } from 'ramda';
 import { AddNodePosition } from './types';
 import { useScrollOnDrag } from './useScrollOnDrag';
 import { useDelayedDragEventCall } from './useDelayedDragEventCall';
-import { getDropNodePosition, getExpandedKeys, getNodeAtPosition, getParentPos, isDropIndicatorNode, moveNode, slideNodePos } from './helper';
+import { getDropNodePosition, getExpandedKeys, getNodeAtPosition, isDropIndicatorNode, moveNode, slideNodePos, getDropNodeParent } from './helper';
 export var useDnd = function (_a) {
     var treeData = _a.treeData, containerRef = _a.containerRef, expandNode = _a.expandNode, onLoadChildren = _a.onLoadChildren, onChange = _a.onChange, onDropProp = _a.onDrop, canDrop = _a.canDrop, canDrag = _a.canDrag;
     var _b = useState(null), dragNode = _b[0], setDragNode = _b[1];
@@ -35,7 +35,7 @@ export var useDnd = function (_a) {
         }
     }, [expandNode, expandedKeys, onLoadChildren, treeData]);
     var expandDropNode = useCallback(function (newDropPositionInfo) {
-        if (onChange && newDropPositionInfo.dropPosition === AddNodePosition.AsChild) {
+        if (onChange && newDropPositionInfo.dropPosition === AddNodePosition.AsChild && dragNode) {
             var currentParentNodePos = slideNodePos(newDropPositionInfo.pos, dragNode.pos);
             if (currentParentNodePos.split('-').length > 1) {
                 expandDropNodeAtPosition(currentParentNodePos, true);
@@ -45,14 +45,23 @@ export var useDnd = function (_a) {
     var handleSetDropNode = useCallback(function (_a) {
         var event = _a.event, node = _a.node;
         var newDropPositionInfo = getDropNodePosition(event, node, dropPositionInfo) || dropPositionInfo;
+        var isNewDropPositionValid = newDropPositionInfo &&
+            dragNode &&
+            canDrop({
+                // Either drop node itself or its parent in the tree
+                nextParent: getDropNodeParent(treeData, newDropPositionInfo, dragNode.pos),
+                node: dragNode.value
+            });
         if (!equals(newDropPositionInfo, dropPositionInfo) && (!isDropIndicatorNode(node) || !dropNode)) {
-            setDropPositionInfo(newDropPositionInfo);
+            if (isNewDropPositionValid) {
+                setDropPositionInfo(newDropPositionInfo);
+            }
             expandDropNode(newDropPositionInfo);
         }
-        if (node.key !== (dropNode === null || dropNode === void 0 ? void 0 : dropNode.key)) {
+        if (node.key !== (dropNode === null || dropNode === void 0 ? void 0 : dropNode.key) && (!isDropIndicatorNode(node) || isNewDropPositionValid)) {
             setDropNode(node);
         }
-    }, [dropNode, dropPositionInfo, expandDropNode]);
+    }, [dragNode, dropNode, canDrop, dropPositionInfo, expandDropNode, treeData]);
     var delayedHandleDragOver = useDelayedDragEventCall(handleSetDropNode);
     var onDragOver = function (_a) {
         var event = _a.event, node = _a.node;
@@ -72,22 +81,18 @@ export var useDnd = function (_a) {
         }
     };
     var onDrop = function () {
-        if (dragNode && isDropIndicatorNode(dropNode)) {
-            var parentNodePosition = dropPositionInfo.dropPosition === AddNodePosition.AsChild
-                ? dropPositionInfo.pos
-                : getParentPos(dropPositionInfo.pos);
-            var parentNode = getNodeAtPosition(treeData, parentNodePosition);
-            var newTreeData = moveNode(treeData, dragNode.value, dragNode.pos, dropPositionInfo);
-            onDropProp(newTreeData, dragNode.value, parentNode);
+        if (dragNode && dropPositionInfo && isDropIndicatorNode(dropNode)) {
+            var parentNode = getDropNodeParent(treeData, dropPositionInfo, dragNode.pos);
+            if (canDrop({ nextParent: parentNode, node: dragNode.value })) {
+                var newTreeData = moveNode(treeData, dragNode.value, dragNode.pos, dropPositionInfo);
+                onDropProp(newTreeData, dragNode.value, parentNode);
+            }
         }
         setDragNode(null);
         setDropNode(null);
         onEndDragging();
+        window.removeEventListener('mousemove', handleDropOutsideTree);
     };
-    var allowDrop = useCallback(function (_a) {
-        var dragNode = _a.dragNode, dropNode = _a.dropNode;
-        return canDrop({ nextParent: dropNode.value, node: dragNode.value });
-    }, [canDrop]);
     var nodeDraggable = useCallback(function (node) {
         return canDrag({ node: node.value });
     }, [canDrag]);
@@ -97,8 +102,7 @@ export var useDnd = function (_a) {
             onDragOver: onDragOver,
             onDragLeave: onDragLeave,
             onDrop: onDrop,
-            dropIndicatorRender: dropIndicatorRender,
-            allowDrop: allowDrop
+            dropIndicatorRender: dropIndicatorRender
         },
         nodeDraggable: nodeDraggable,
         dropNode: dropNode,

package/cjs/BarChart/BarChart.js

@@ -36,10 +36,7 @@ var BarChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var _c = (0, helpers_1.getBarChartSettings)(options), barChart = _c.barChart, cartesianGrid = _c.cartesianGrid, bar = _c.bar, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis;
     var _d = (0, useDynamicYAxisWidth_1.useDynamicYAxisWidth)({ chartYAxisProps: yAxis }), chartRef = _d.chartRef, dynamicYAxisWidth = __rest(_d, ["chartRef"]);
-    var onBarClick = onItemClick && (function (_a) {
-        var group = _a.group;
-        return onItemClick(group);
-    });
+    var onBarClick = onItemClick && (function (data) { return onItemClick(data.group); });
     var clickable = (0, useClickableChartStyle_1.useClickableChartStyle)(onBarClick);
     return (react_1.default.createElement(recharts_1.BarChart, __assign({ width: width, height: height, data: data }, barChart, { ref: chartRef }),
         react_1.default.createElement(recharts_1.CartesianGrid, __assign({}, cartesianGrid)),

package/cjs/RCTree/RCTree.js

@@ -81,7 +81,7 @@ var RCTree = function (_a) {
         }
     }, [scrollToNode]);
     var diplayedTreeData = (0, react_1.useMemo)(function () {
-        if (dropNode && dragNode) {
+        if (dropNode && dragNode && dropPositionInfo) {
             if (dropNode.pos === dragNode.pos && dropNode.key === dragNode.key)
                 return treeData;
             var dragNodeValue = __assign(__assign({}, dragNode.value), { nodeId: -1 });

package/cjs/RCTree/helper.d.ts

@@ -10,9 +10,10 @@ type ConvertTreeDataProps<Node> = {
     isLeaf: (node: Node) => boolean;
 };
 export declare const convertTreeData: <Node extends RCTreeNode>({ data, isLeaf }: ConvertTreeDataProps<Node>) => InternalRCNode<Node>[];
-export declare const getNodeAtPosition: (treeData: RCTreeNode[], pos: string) => any;
+export declare const getNodeAtPosition: <Node extends RCTreeNode>(treeData: Node[], pos: string) => Node | null;
 export declare const getParentPos: (pos: string) => string;
-export declare const changeNodeAtPosition: <Node extends RCTreeNode>(treeData: Node[], pos: string, changeNode: (node: Node) => Node) => any;
+export declare const getDropNodeParent: <Node extends RCTreeNode>(treeData: Node[], dropPositionInfo: DropPositionInfo, dragNodePosition: string) => Node | null;
+export declare const changeNodeAtPosition: <Node extends RCTreeNode>(treeData: Node[], pos: string, changeNode: (node: Node) => Node) => Node[];
 export declare const removeNodeAtPosition: (treeData: RCTreeNode[], pos: string) => any;
 export declare const insertNodeAtPosition: (treeData: RCTreeNode[], pos: string, dropPosition: number, node: RCTreeNode) => any;
 export declare const moveNode: (treeData: RCTreeNode[], dragNode: RCTreeNode, dragNodePos: string, dropPositionInfo: DropPositionInfo) => any;

package/cjs/RCTree/helper.js

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcNodeWidth = exports.setTreeWidth = exports.getLevelLinesData = exports.gatherNodeKeys = exports.isDropIndicatorNode = exports.getDropNodePosition = exports.slideNodePos = exports.getExpandedKeys = exports.moveNode = exports.insertNodeAtPosition = exports.removeNodeAtPosition = exports.changeNodeAtPosition = exports.getParentPos = exports.getNodeAtPosition = exports.convertTreeData = exports.defaultIsLeaf = exports.DEPTH_LEVEL_INDENT = void 0;
+exports.calcNodeWidth = exports.setTreeWidth = exports.getLevelLinesData = exports.gatherNodeKeys = exports.isDropIndicatorNode = exports.getDropNodePosition = exports.slideNodePos = exports.getExpandedKeys = exports.moveNode = exports.insertNodeAtPosition = exports.removeNodeAtPosition = exports.changeNodeAtPosition = exports.getDropNodeParent = exports.getParentPos = exports.getNodeAtPosition = exports.convertTreeData = exports.defaultIsLeaf = exports.DEPTH_LEVEL_INDENT = void 0;
 var ramda_1 = require("ramda");
 var types_1 = require("./types");
 exports.DEPTH_LEVEL_INDENT = 16;
@@ -47,13 +47,25 @@ exports.convertTreeData = convertTreeData;
 var getPathFromPosition = (0, ramda_1.pipe)((0, ramda_1.split)('-'), (0, ramda_1.remove)(0, 1), (0, ramda_1.map)(Number), (0, ramda_1.intersperse)('children'));
 var getNodeAtPosition = function (treeData, pos) {
     var nodePath = getPathFromPosition(pos);
-    return nodePath.length > 0 ? (0, ramda_1.path)(nodePath, treeData) : null;
+    return nodePath.length > 0 ? (0, ramda_1.path)(nodePath, treeData) || null : null;
 };
 exports.getNodeAtPosition = getNodeAtPosition;
 var getParentPos = function (pos) {
     return pos.split('-').slice(0, -1).join('-');
 };
 exports.getParentPos = getParentPos;
+var getDropNodeParent = function (treeData, dropPositionInfo, dragNodePosition) {
+    var parentNodePosition = dropPositionInfo.dropPosition === types_1.AddNodePosition.AsChild
+        ? dropPositionInfo.pos
+        : (0, exports.getParentPos)(dropPositionInfo.pos);
+    var parentNode = (0, exports.getNodeAtPosition)(treeData, // current tree
+    // position in the current tree
+    (0, exports.slideNodePos)(parentNodePosition, // position in the next tree
+    dragNodePosition, // position of drag node in the current tree
+    false));
+    return parentNode;
+};
+exports.getDropNodeParent = getDropNodeParent;
 var changeNodeAtPosition = function (treeData, pos, changeNode) {
     var nodePath = getPathFromPosition(pos);
     var node = (0, ramda_1.path)(nodePath, treeData);
@@ -138,7 +150,7 @@ var calcAddNodePosition = function (event) {
     var nodeElement = getNodeTopElement(event.target);
     if (!nodeElement)
         return null;
-    var offsetY = event.clientY - nodeElement.getBoundingClientRect().top;
+    var offsetY = event.clientY - nodeElement.getBoundingClientRect().top || 0;
     var treeNodeHeight = nodeElement.offsetHeight;
     return offsetY < treeNodeHeight / 2 ? types_1.AddNodePosition.Top : types_1.AddNodePosition.Bottom;
 };
@@ -148,7 +160,7 @@ var findDepthPosition = function (event, dropNode) {
         return null;
     var dropNodeLevel = dropNode.pos.split('-').length - 1;
     var leftPadding = parseFloat(window.getComputedStyle(nodeElement).paddingLeft) || 0;
-    var offsetX = event.clientX - nodeElement.getBoundingClientRect().left - leftPadding;
+    var offsetX = event.clientX - nodeElement.getBoundingClientRect().left - leftPadding || 0;
     return Math.min(dropNodeLevel + 1, Math.max(Math.round(offsetX / exports.DEPTH_LEVEL_INDENT), dropNodeLevel));
 };
 var changePosLastIndex = function (pos, change) {
@@ -177,8 +189,8 @@ var getDropNodePosition = function (event, dropNode, prevDropPositionInfo) {
     var pos = !prevDropPositionInfo || prevDropPositionInfo.addToEnd
         ? dropNode.pos
         : (0, exports.slideNodePos)(dropNode.pos, getCurrentDropNodePos(prevDropPositionInfo), true);
-    var dropNodeDepth = pos.split('-').length - 1;
     var position = pos.split('-');
+    var dropNodeDepth = position.length - 1;
     var lastIndex = Number((0, ramda_1.last)(position));
     if (depthPosition === dropNodeDepth) {
         return { pos: pos, dropPosition: addNodePosition };

package/cjs/RCTree/types.d.ts

@@ -3,6 +3,7 @@ export type RCTreeNode = {
     nodeId: number;
     title?: string;
     expanded?: boolean;
+    pending?: boolean;
     children?: RCTreeNode[];
 };
 export type InternalRCNode<Node extends RCTreeNode = RCTreeNode> = {

package/cjs/RCTree/useDnd.d.ts

@@ -1,5 +1,5 @@
 import { DragEvent } from 'react';
-import { InternalRCNode, RCTreeNode } from './types';
+import { InternalRCNode, RCTreeNode, DropPositionInfo } from './types';
 type Props<Node extends RCTreeNode> = {
     treeData: Node[];
     containerRef: React.RefObject<HTMLDivElement>;
@@ -30,18 +30,10 @@ export declare const useDnd: <Node extends RCTreeNode>({ treeData, containerRef,
         }) => void;
         onDrop: () => void;
         dropIndicatorRender: () => any;
-        allowDrop: ({ dragNode, dropNode }: {
-            dragNode: InternalRCNode<Node>;
-            dropNode: InternalRCNode<Node>;
-        }) => boolean;
     };
     nodeDraggable: (node: InternalRCNode<Node>) => boolean;
     dropNode: InternalRCNode<Node>;
     dragNode: InternalRCNode<Node>;
-    dropPositionInfo: {
-        pos: string;
-        dropPosition: number;
-        addToEnd?: boolean;
-    };
+    dropPositionInfo: DropPositionInfo;
 };
 export {};

package/cjs/RCTree/useDnd.js

@@ -38,7 +38,7 @@ var useDnd = function (_a) {
         }
     }, [expandNode, expandedKeys, onLoadChildren, treeData]);
     var expandDropNode = (0, react_1.useCallback)(function (newDropPositionInfo) {
-        if (onChange && newDropPositionInfo.dropPosition === types_1.AddNodePosition.AsChild) {
+        if (onChange && newDropPositionInfo.dropPosition === types_1.AddNodePosition.AsChild && dragNode) {
             var currentParentNodePos = (0, helper_1.slideNodePos)(newDropPositionInfo.pos, dragNode.pos);
             if (currentParentNodePos.split('-').length > 1) {
                 expandDropNodeAtPosition(currentParentNodePos, true);
@@ -48,14 +48,23 @@ var useDnd = function (_a) {
     var handleSetDropNode = (0, react_1.useCallback)(function (_a) {
         var event = _a.event, node = _a.node;
         var newDropPositionInfo = (0, helper_1.getDropNodePosition)(event, node, dropPositionInfo) || dropPositionInfo;
+        var isNewDropPositionValid = newDropPositionInfo &&
+            dragNode &&
+            canDrop({
+                // Either drop node itself or its parent in the tree
+                nextParent: (0, helper_1.getDropNodeParent)(treeData, newDropPositionInfo, dragNode.pos),
+                node: dragNode.value
+            });
         if (!(0, ramda_1.equals)(newDropPositionInfo, dropPositionInfo) && (!(0, helper_1.isDropIndicatorNode)(node) || !dropNode)) {
-            setDropPositionInfo(newDropPositionInfo);
+            if (isNewDropPositionValid) {
+                setDropPositionInfo(newDropPositionInfo);
+            }
             expandDropNode(newDropPositionInfo);
         }
-        if (node.key !== (dropNode === null || dropNode === void 0 ? void 0 : dropNode.key)) {
+        if (node.key !== (dropNode === null || dropNode === void 0 ? void 0 : dropNode.key) && (!(0, helper_1.isDropIndicatorNode)(node) || isNewDropPositionValid)) {
             setDropNode(node);
         }
-    }, [dropNode, dropPositionInfo, expandDropNode]);
+    }, [dragNode, dropNode, canDrop, dropPositionInfo, expandDropNode, treeData]);
     var delayedHandleDragOver = (0, useDelayedDragEventCall_1.useDelayedDragEventCall)(handleSetDropNode);
     var onDragOver = function (_a) {
         var event = _a.event, node = _a.node;
@@ -75,22 +84,18 @@ var useDnd = function (_a) {
         }
     };
     var onDrop = function () {
-        if (dragNode && (0, helper_1.isDropIndicatorNode)(dropNode)) {
-            var parentNodePosition = dropPositionInfo.dropPosition === types_1.AddNodePosition.AsChild
-                ? dropPositionInfo.pos
-                : (0, helper_1.getParentPos)(dropPositionInfo.pos);
-            var parentNode = (0, helper_1.getNodeAtPosition)(treeData, parentNodePosition);
-            var newTreeData = (0, helper_1.moveNode)(treeData, dragNode.value, dragNode.pos, dropPositionInfo);
-            onDropProp(newTreeData, dragNode.value, parentNode);
+        if (dragNode && dropPositionInfo && (0, helper_1.isDropIndicatorNode)(dropNode)) {
+            var parentNode = (0, helper_1.getDropNodeParent)(treeData, dropPositionInfo, dragNode.pos);
+            if (canDrop({ nextParent: parentNode, node: dragNode.value })) {
+                var newTreeData = (0, helper_1.moveNode)(treeData, dragNode.value, dragNode.pos, dropPositionInfo);
+                onDropProp(newTreeData, dragNode.value, parentNode);
+            }
         }
         setDragNode(null);
         setDropNode(null);
         onEndDragging();
+        window.removeEventListener('mousemove', handleDropOutsideTree);
     };
-    var allowDrop = (0, react_1.useCallback)(function (_a) {
-        var dragNode = _a.dragNode, dropNode = _a.dropNode;
-        return canDrop({ nextParent: dropNode.value, node: dragNode.value });
-    }, [canDrop]);
     var nodeDraggable = (0, react_1.useCallback)(function (node) {
         return canDrag({ node: node.value });
     }, [canDrag]);
@@ -100,8 +105,7 @@ var useDnd = function (_a) {
             onDragOver: onDragOver,
             onDragLeave: onDragLeave,
             onDrop: onDrop,
-            dropIndicatorRender: dropIndicatorRender,
-            allowDrop: allowDrop
+            dropIndicatorRender: dropIndicatorRender
         },
         nodeDraggable: nodeDraggable,
         dropNode: dropNode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2042",
+  "version": "1.4.2044",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -36,7 +36,7 @@
     "react-simple-maps": "^3.0.0",
     "react-virtualized": "^9.22.5",
     "react-window": "^1.8.10",
-    "recharts": "^2.10.1",
+    "recharts": "^2.14.1",
     "sanitize-html": "^2.13.1",
     "sigma": "^2.4.0",
     "topojson-client": "^3.1.0"