@reltio/components 1.4.1991 → 1.4.1993

package/cjs/HOCs/withDragHandle/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dragHandleContainer" | "dragHandleVisibilityArea" | "dragHandle" | "dragIcon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dragHandle" | "dragHandleContainer" | "dragHandleVisibilityArea" | "dragIcon">;

package/cjs/RCTree/RCTree.d.ts

@@ -4,10 +4,16 @@ import { RCTreeNode } from './types';
 type Props = {
     treeData: RCTreeNode[];
     renderNode?: (node: RCTreeNode & Record<string, unknown>) => React.ReactElement;
-    canDrag?: boolean;
     isVirtualized?: boolean;
-    canDrop?: (params: unknown) => boolean;
-    onLoadChildren?: (treeNode: unknown) => Promise<void>;
+    canDrag?: (params: {
+        node: RCTreeNode;
+    }) => boolean;
+    canDrop?: (params: {
+        nextParent: RCTreeNode;
+        node: RCTreeNode;
+    }) => boolean;
+    onDrop?: (treeData: RCTreeNode[], dragNode: RCTreeNode, parentNode: RCTreeNode) => void;
+    onLoadChildren?: (treeNode: RCTreeNode) => Promise<void>;
     height?: number;
     defaultExpandAll?: boolean;
     SwitchRenderer?: (props: any) => React.ReactElement;
@@ -17,5 +23,5 @@ type Props = {
     scrollToNode?: RCTreeNode;
     onChange?: (node: RCTreeNode[]) => void;
 };
-export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, scrollToNode, onChange }: Props) => React.JSX.Element;
+export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, scrollToNode, onChange }: Props) => React.JSX.Element;
 export {};

package/cjs/RCTree/RCTree.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -31,47 +42,75 @@ var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var rc_tree_1 = __importDefault(require("rc-tree"));
 var react_1 = __importStar(require("react"));
+var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
 var DefaultSwitchRenderer_1 = require("./DefaultSwitchRenderer");
 var helper_1 = require("./helper");
+var useDnd_1 = require("./useDnd");
 var styles_1 = require("./styles");
 var MIN_ROW_HEIGHT = 28;
 var RCTree = function (_a) {
-    var treeData = _a.treeData, _b = _a.isVirtualized, isVirtualized = _b === void 0 ? true : _b, _c = _a.canDrag, canDrag = _c === void 0 ? false : _c, _d = _a.canDrop, canDrop = _d === void 0 ? function () { return false; } : _d, onLoadChildren = _a.onLoadChildren, height = _a.height, _e = _a.defaultExpandAll, defaultExpandAll = _e === void 0 ? false : _e, _f = _a.SwitchRenderer, SwitchRenderer = _f === void 0 ? DefaultSwitchRenderer_1.DefaultSwitchRenderer : _f, className = _a.className, renderNode = _a.renderNode, _g = _a.minItemHeight, minItemHeight = _g === void 0 ? MIN_ROW_HEIGHT : _g, _h = _a.isLeaf, isLeaf = _h === void 0 ? helper_1.defaultIsLeaf : _h, scrollToNode = _a.scrollToNode, _j = _a.onChange, onChange = _j === void 0 ? ramda_1.identity : _j;
+    var _b;
+    var treeData = _a.treeData, _c = _a.isVirtualized, isVirtualized = _c === void 0 ? true : _c, _d = _a.canDrag, canDrag = _d === void 0 ? function () { return false; } : _d, _e = _a.canDrop, canDrop = _e === void 0 ? function () { return false; } : _e, _f = _a.onDrop, onDrop = _f === void 0 ? function () { } : _f, onLoadChildren = _a.onLoadChildren, height = _a.height, _g = _a.defaultExpandAll, defaultExpandAll = _g === void 0 ? false : _g, _h = _a.SwitchRenderer, SwitchRenderer = _h === void 0 ? DefaultSwitchRenderer_1.DefaultSwitchRenderer : _h, className = _a.className, renderNode = _a.renderNode, _j = _a.minItemHeight, minItemHeight = _j === void 0 ? MIN_ROW_HEIGHT : _j, _k = _a.isLeaf, isLeaf = _k === void 0 ? helper_1.defaultIsLeaf : _k, scrollToNode = _a.scrollToNode, _l = _a.onChange, onChange = _l === void 0 ? ramda_1.identity : _l;
     var styles = (0, styles_1.useStyles)();
-    var internalTreeData = (0, react_1.useMemo)(function () { return (0, helper_1.convertTreeData)({ data: treeData, isLeaf: isLeaf }); }, [isLeaf, treeData]);
     var treeRef = (0, react_1.useRef)(null);
+    var containerRef = (0, react_1.useRef)(null);
+    var expandNode = (0, react_1.useCallback)(function (pos, expanded) {
+        var changeNode = (0, ramda_1.assoc)('expanded', expanded);
+        var newTreeData = (0, helper_1.changeNodeAtPosition)(treeData, pos, changeNode);
+        if (newTreeData)
+            onChange(newTreeData);
+    }, [onChange, treeData]);
+    var _m = (0, useDnd_1.useDnd)({
+        containerRef: containerRef,
+        treeData: treeData,
+        expandNode: expandNode,
+        onLoadChildren: onLoadChildren,
+        onChange: onChange,
+        onDrop: onDrop,
+        canDrop: canDrop,
+        canDrag: canDrag
+    }), treeProps = _m.treeProps, nodeDraggable = _m.nodeDraggable, dropNode = _m.dropNode, dragNode = _m.dragNode, dropPositionInfo = _m.dropPositionInfo;
     (0, react_1.useEffect)(function () {
         if (treeRef.current && scrollToNode) {
             treeRef.current.scrollTo({ key: String(scrollToNode.nodeId) });
         }
     }, [scrollToNode]);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var handleDrop = function (_a) {
-        var node = _a.node, dragNode = _a.dragNode, dragNodesKeys = _a.dragNodesKeys;
-        // TODO: implement
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var handleDragEnter = function (_a) {
-        var event = _a.event, node = _a.node, expandedKeys = _a.expandedKeys;
-        // TODO: implement
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var dropIndicatorRender = function (_a) {
-        var dropPosition = _a.dropPosition, dropLevelOffset = _a.dropLevelOffset, indent = _a.indent, prefixCls = _a.prefixCls, direction = _a.direction;
-        // TODO: implement
-    };
-    var handleExpand = (0, react_1.useCallback)(function (_expandedKeys, data) {
-        if (onChange) {
-            var changeNode = (0, ramda_1.assoc)('expanded', data.expanded);
-            var newTreeData = (0, helper_1.changeNodeAtPosition)(treeData, data.node.pos, changeNode);
-            if (newTreeData)
-                onChange(newTreeData);
+    var diplayedTreeData = (0, react_1.useMemo)(function () {
+        if (dropNode && dragNode) {
+            if (dropNode.pos === dragNode.pos && dropNode.key === dragNode.key)
+                return treeData;
+            var dragNodeValue = __assign(__assign({}, dragNode.value), { nodeId: -1 });
+            return (0, helper_1.moveNode)(treeData, dragNodeValue, dragNode.pos, dropPositionInfo);
         }
-    }, [treeData, onChange]);
+        return treeData;
+    }, [treeData, dragNode, dropNode, dropPositionInfo]);
     var expandedKeys = (0, react_1.useMemo)(function () {
-        return (0, helper_1.getExpandedKeys)(treeData);
-    }, [treeData]);
+        return (0, helper_1.getExpandedKeys)(diplayedTreeData);
+    }, [diplayedTreeData]);
+    var internalTreeData = (0, react_1.useMemo)(function () { return (0, helper_1.convertTreeData)({ data: diplayedTreeData, isLeaf: isLeaf }); }, [isLeaf, diplayedTreeData]);
+    var handleExpand = (0, react_1.useCallback)(function (_expandedKeys, data) {
+        if (onChange && !dragNode) {
+            expandNode(data.node.pos, data.expanded);
+        }
+    }, [onChange, expandNode, dragNode]);
     var renderSwitcherIcon = (0, react_1.useCallback)(function (node) { return react_1.default.createElement(SwitchRenderer, { node: node }); }, []);
-    return internalTreeData ? (react_1.default.createElement(rc_tree_1.default, { allowDrop: canDrop, draggable: canDrag, onDragStart: function () { }, onDragEnter: handleDragEnter, onDrop: handleDrop, virtual: isVirtualized, itemHeight: minItemHeight, height: height, onExpand: handleExpand, showIcon: false, showLine: true, expandedKeys: expandedKeys, switcherIcon: renderSwitcherIcon, defaultExpandAll: defaultExpandAll, className: (0, classnames_1.default)(className, styles.treeWrapper), titleRender: renderNode ? function (node) { return renderNode(node.value); } : undefined, treeData: internalTreeData, selectable: false, loadData: onLoadChildren ? function (node) { return onLoadChildren(node.value); } : undefined, "data-reltio-id": "rc-tree", ref: treeRef })) : null;
+    var titleRender = function (node) {
+        var _a;
+        var draggedNodes = (0, helper_1.gatherNodeKeys)(dragNode);
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)((_a = {},
+                _a[styles.dropIndicator] = (0, helper_1.isDropIndicatorNode)(node),
+                _a[styles.dropNotAllowed] = dropNode && !(0, helper_1.isDropIndicatorNode)(dropNode),
+                _a[styles.draggedChildrenNode] = draggedNodes.includes(node.key),
+                _a)), onMouseDown: helper_1.preventNodeDragging }, renderNode ? renderNode(node.value) : node.title));
+    };
+    var dragHandle = (react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.dragHandle, (_b = {},
+            _b[styles.dragHandleDragging] = !!dragNode,
+            _b)) },
+        react_1.default.createElement(DragIndicator_1.default, null)));
+    return diplayedTreeData ? (react_1.default.createElement("div", { ref: containerRef },
+        react_1.default.createElement(rc_tree_1.default, __assign({ draggable: {
+                icon: dragHandle,
+                nodeDraggable: nodeDraggable
+            }, virtual: isVirtualized, itemHeight: minItemHeight, height: height, onExpand: handleExpand, showIcon: false, showLine: true, expandedKeys: expandedKeys, switcherIcon: renderSwitcherIcon, defaultExpandAll: defaultExpandAll, className: (0, classnames_1.default)(className, styles.treeWrapper), titleRender: titleRender, treeData: internalTreeData, selectable: false, loadData: onLoadChildren ? function (node) { return onLoadChildren(node.value); } : undefined, "data-reltio-id": "rc-tree", ref: treeRef }, treeProps)))) : null;
 };
 exports.RCTree = RCTree;

package/cjs/RCTree/helper.d.ts

@@ -1,4 +1,5 @@
-import { InternalRCNode, RCTreeNode } from './types';
+import React, { MouseEvent } from 'react';
+import { AddNodePosition, DropPositionInfo, InternalRCNode, RCTreeNode } from './types';
 export declare const defaultIsLeaf: ({ children }: {
     children?: unknown[];
 }) => boolean;
@@ -7,7 +8,25 @@ type ConvertTreeDataProps<T> = {
     parentPath?: number[];
     isLeaf: (node: T) => boolean;
 };
-export declare const convertTreeData: ({ data, parentPath, isLeaf }: ConvertTreeDataProps<RCTreeNode>) => InternalRCNode[];
+export declare const convertTreeData: ({ data, isLeaf }: ConvertTreeDataProps<RCTreeNode>) => InternalRCNode[];
+export declare const getNodeAtPosition: (treeData: RCTreeNode[], pos: string) => any;
+export declare const getParentPos: (pos: string) => string;
 export declare const changeNodeAtPosition: (treeData: RCTreeNode[], pos: string, changeNode: (node: RCTreeNode) => RCTreeNode) => any;
+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;
 export declare const getExpandedKeys: (nodes?: RCTreeNode[]) => any;
+export declare const slideNodePos: (dropNodePos: string, nodePos: string, backward?: boolean) => string;
+export declare const getDropNodePosition: (event: React.DragEvent<HTMLDivElement>, dropNode: InternalRCNode, prevDropPositionInfo: any) => {
+    pos: string;
+    dropPosition: AddNodePosition;
+    addToEnd?: undefined;
+} | {
+    pos: string;
+    dropPosition: AddNodePosition;
+    addToEnd: boolean;
+};
+export declare const isDropIndicatorNode: (node: InternalRCNode) => boolean;
+export declare const gatherNodeKeys: (node: InternalRCNode) => string[];
+export declare const preventNodeDragging: (event: MouseEvent<HTMLDivElement>) => void;
 export {};

package/cjs/RCTree/helper.js

@@ -20,32 +20,83 @@ 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.getExpandedKeys = exports.changeNodeAtPosition = exports.convertTreeData = exports.defaultIsLeaf = void 0;
+exports.preventNodeDragging = 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 = void 0;
 var ramda_1 = require("ramda");
+var types_1 = require("./types");
+var DEPTH_LEVEL_INDENT = 16;
+var DROP_INDICATOR_NODE_KEY = '-1';
 var defaultIsLeaf = function (_a) {
     var _b = _a.children, children = _b === void 0 ? [] : _b;
     return !children.length;
 };
 exports.defaultIsLeaf = defaultIsLeaf;
 var convertTreeData = function (_a) {
-    var data = _a.data, _b = _a.parentPath, parentPath = _b === void 0 ? [] : _b, isLeaf = _a.isLeaf;
+    var data = _a.data, isLeaf = _a.isLeaf;
     return data.map(function (item) {
         var _a;
-        var path = __spreadArray(__spreadArray([], parentPath, true), [item.nodeId], false);
-        return __assign({ key: String(item.nodeId), title: (_a = item.title) !== null && _a !== void 0 ? _a : '', value: __assign(__assign({}, item), { path: path }), isLeaf: isLeaf(item) }, (item.children &&
+        return __assign({ key: String(item.nodeId), title: (_a = item.title) !== null && _a !== void 0 ? _a : '', value: __assign({}, item), isLeaf: isLeaf(item) }, (item.children &&
             item.children.length && {
-            children: (0, exports.convertTreeData)({ data: item.children, parentPath: path, isLeaf: isLeaf })
+            children: (0, exports.convertTreeData)({ data: item.children, isLeaf: isLeaf })
         }));
     });
 };
 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;
+};
+exports.getNodeAtPosition = getNodeAtPosition;
+var getParentPos = function (pos) {
+    return pos.split('-').slice(0, -1).join('-');
+};
+exports.getParentPos = getParentPos;
 var changeNodeAtPosition = function (treeData, pos, changeNode) {
     var nodePath = getPathFromPosition(pos);
     var node = (0, ramda_1.path)(nodePath, treeData);
-    return node ? (0, ramda_1.assocPath)(nodePath, changeNode(node), treeData) : null;
+    return node ? (0, ramda_1.assocPath)(nodePath, changeNode(node), treeData) : treeData;
 };
 exports.changeNodeAtPosition = changeNodeAtPosition;
+var removeNodeAtPosition = function (treeData, pos) {
+    var nodePath = getPathFromPosition(pos);
+    var childrenPath = nodePath.slice(0, -1);
+    var nodeIndex = Number(nodePath[nodePath.length - 1]);
+    if (childrenPath.length > 0) {
+        var children = (0, ramda_1.path)(childrenPath)(treeData);
+        var newChildren = (0, ramda_1.remove)(nodeIndex, 1, children);
+        return (0, ramda_1.assocPath)(childrenPath, newChildren, treeData);
+    }
+    return (0, ramda_1.remove)(nodeIndex, 1, treeData);
+};
+exports.removeNodeAtPosition = removeNodeAtPosition;
+var insertNodeAtPosition = function (treeData, pos, dropPosition, node) {
+    var nodePath = getPathFromPosition(pos);
+    var childrenPath = nodePath.slice(0, -1);
+    var nodeIndex = Number(nodePath[nodePath.length - 1]);
+    var newNodeIndex = dropPosition === types_1.AddNodePosition.Top ? nodeIndex : nodeIndex + 1;
+    if (childrenPath.length > 0) {
+        var children = (0, ramda_1.path)(childrenPath, treeData);
+        if (!children)
+            return treeData;
+        var newChildren = (0, ramda_1.insert)(newNodeIndex, node, children);
+        return (0, ramda_1.assocPath)(childrenPath, newChildren, treeData);
+    }
+    return (0, ramda_1.insert)(newNodeIndex, node, treeData);
+};
+exports.insertNodeAtPosition = insertNodeAtPosition;
+var moveNode = function (treeData, dragNode, dragNodePos, dropPositionInfo) {
+    var pos = dropPositionInfo.pos, dropPosition = dropPositionInfo.dropPosition, _a = dropPositionInfo.addToEnd, addToEnd = _a === void 0 ? false : _a;
+    var removeNode = function (treeData) { return (0, exports.removeNodeAtPosition)(treeData, dragNodePos); };
+    var addNode = function (treeData) {
+        return dropPosition === types_1.AddNodePosition.AsChild
+            ? (0, exports.changeNodeAtPosition)(treeData, pos, function (node) {
+                return (0, ramda_1.pipe)((0, ramda_1.ifElse)((0, ramda_1.always)(addToEnd), (0, ramda_1.assoc)('children', __spreadArray(__spreadArray([], (node.children || []), true), [dragNode], false)), (0, ramda_1.assoc)('children', __spreadArray([dragNode], (node.children || []), true))), (0, ramda_1.assoc)('expanded', true))(node);
+            })
+            : (0, exports.insertNodeAtPosition)(treeData, pos, dropPosition, dragNode);
+    };
+    return (0, ramda_1.pipe)(removeNode, addNode)(treeData);
+};
+exports.moveNode = moveNode;
 var getExpandedKeys = function (nodes) {
     if (nodes === void 0) { nodes = []; }
     return nodes.reduce(function (expandedKeys, node) {
@@ -53,3 +104,107 @@ var getExpandedKeys = function (nodes) {
     }, []);
 };
 exports.getExpandedKeys = getExpandedKeys;
+var slideNodePos = function (dropNodePos, nodePos, backward) {
+    if (backward === void 0) { backward = false; }
+    var nodePosition = nodePos.split('-');
+    var nodeDepth = nodePosition.length - 1;
+    var nodeParentPosition = nodePosition.slice(0, -1);
+    var nodeParentPos = nodeParentPosition.join('-');
+    var dropNodePosition = dropNodePos.split('-');
+    if (dropNodePos.startsWith(nodeParentPos)) {
+        var nodeLastIndex = Number((0, ramda_1.last)(nodePosition));
+        var dropNodeIndexToChange = Number(dropNodePosition[nodeDepth]);
+        if (backward) {
+            if (nodeLastIndex < dropNodeIndexToChange) {
+                return dropNodePos.replace([nodeParentPos, dropNodeIndexToChange].join('-'), [nodeParentPos, dropNodeIndexToChange - 1].join('-'));
+            }
+        }
+        else {
+            if (nodeLastIndex <= dropNodeIndexToChange) {
+                return dropNodePos.replace([nodeParentPos, dropNodeIndexToChange].join('-'), [nodeParentPos, dropNodeIndexToChange + 1].join('-'));
+            }
+        }
+    }
+    return dropNodePos;
+};
+exports.slideNodePos = slideNodePos;
+var getNodeTopElement = function (target) {
+    return target.closest('.rc-tree-treenode');
+};
+var calcAddNodePosition = function (event) {
+    var nodeElement = getNodeTopElement(event.target);
+    if (!nodeElement)
+        return null;
+    var offsetY = event.clientY - nodeElement.getBoundingClientRect().top;
+    var treeNodeHeight = nodeElement.offsetHeight;
+    return offsetY < treeNodeHeight / 2 ? types_1.AddNodePosition.Top : types_1.AddNodePosition.Bottom;
+};
+var findDepthPosition = function (event, dropNode) {
+    var nodeElement = getNodeTopElement(event.target);
+    if (!nodeElement)
+        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;
+    return Math.min(dropNodeLevel + 1, Math.max(Math.round(offsetX / DEPTH_LEVEL_INDENT), dropNodeLevel));
+};
+var changePosLastIndex = function (pos, change) {
+    var position = pos.split('-');
+    var lastIndex = Number((0, ramda_1.last)(position));
+    return position
+        .slice(0, -1)
+        .concat(String(change(lastIndex)))
+        .join('-');
+};
+var getCurrentDropNodePos = function (dropPositionInfo) {
+    switch (dropPositionInfo.dropPosition) {
+        case types_1.AddNodePosition.Top:
+            return dropPositionInfo.pos;
+        case types_1.AddNodePosition.Bottom:
+            return changePosLastIndex(dropPositionInfo.pos, function (index) { return index + 1; });
+        case types_1.AddNodePosition.AsChild:
+            return "".concat(dropPositionInfo.pos, "-0");
+    }
+};
+var getDropNodePosition = function (event, dropNode, prevDropPositionInfo) {
+    var addNodePosition = calcAddNodePosition(event);
+    var depthPosition = findDepthPosition(event, dropNode);
+    if (addNodePosition === null || depthPosition === null)
+        return null;
+    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 lastIndex = Number((0, ramda_1.last)(position));
+    if (depthPosition === dropNodeDepth) {
+        return { pos: pos, dropPosition: addNodePosition };
+    }
+    if (addNodePosition === types_1.AddNodePosition.Top) {
+        if (lastIndex > 0) {
+            return {
+                pos: position
+                    .slice(0, -1)
+                    .concat(String(lastIndex - 1))
+                    .join('-'),
+                dropPosition: types_1.AddNodePosition.AsChild,
+                addToEnd: true
+            };
+        }
+        if (position.length > 2)
+            return { pos: position.slice(0, -1).join('-'), dropPosition: types_1.AddNodePosition.AsChild, addToEnd: false };
+        return { pos: pos, dropPosition: types_1.AddNodePosition.Top };
+    }
+    return { pos: pos, dropPosition: types_1.AddNodePosition.AsChild };
+};
+exports.getDropNodePosition = getDropNodePosition;
+var isDropIndicatorNode = function (node) { return (node === null || node === void 0 ? void 0 : node.key) === DROP_INDICATOR_NODE_KEY; };
+exports.isDropIndicatorNode = isDropIndicatorNode;
+var gatherNodeKeys = function (node) {
+    return node ? __spreadArray([node.key], (node.children ? node.children.flatMap(exports.gatherNodeKeys) : []), true) : [];
+};
+exports.gatherNodeKeys = gatherNodeKeys;
+var preventNodeDragging = function (event) {
+    event.preventDefault();
+};
+exports.preventNodeDragging = preventNodeDragging;

package/cjs/RCTree/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"expandButton" | "collapseButton" | "switcherButtonWrapper" | "switcherButton" | "treeWrapper" | "@global">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"expandButton" | "collapseButton" | "dropIndicator" | "switcherButtonWrapper" | "switcherButton" | "treeWrapper" | "dropNotAllowed" | "draggedChildrenNode" | "dragHandle" | "dragHandleDragging" | "@global">;

package/cjs/RCTree/styles.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     switcherButtonWrapper: {
-        paddingTop: '9px',
-        paddingLeft: '6px',
-        width: '16px',
-        height: '16px',
+        paddingTop: '11px',
+        paddingLeft: '4px',
+        width: '12px',
+        height: '12px',
         cursor: 'pointer'
     },
     switcherButton: {
@@ -27,6 +27,39 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     treeWrapper: {
         border: 'none'
     },
+    dropIndicator: {
+        '&:before': {
+            content: '""',
+            backgroundColor: '#e0eef9',
+            border: '1px dashed #2184D4',
+            position: 'absolute',
+            top: 0,
+            right: '23px',
+            bottom: 0,
+            left: '-22px',
+            zIndex: 1
+        },
+        '&>div': {
+            opacity: 0
+        }
+    },
+    dropNotAllowed: {
+        '&:before': {
+            backgroundColor: '#ffedee',
+            borderColor: '#FF6673'
+        }
+    },
+    draggedChildrenNode: {
+        opacity: 0.5
+    },
+    dragHandle: {
+        cursor: 'move',
+        color: theme.palette.text.secondary,
+        width: '16px'
+    },
+    dragHandleDragging: {
+        visibility: 'hidden'
+    },
     /* rc-tree/assets/index.css */
     '@global': {
         '.rc-tree': {
@@ -52,12 +85,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
             boxShadow: 'inset 0 0 0 2px red',
             content: "''"
         },
-        '.rc-tree .rc-tree-treenode.drop-container ~ .rc-tree-treenode': {
-            borderLeft: '2px solid chocolate'
-        },
-        '.rc-tree .rc-tree-treenode.drop-target': {
-            backgroundColor: 'yellowgreen'
-        },
         '.rc-tree .rc-tree-treenode.drop-target ~ .rc-tree-treenode': {
             borderLeft: 'none'
         },
@@ -155,11 +182,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         '.rc-tree-treenode-active': {
             background: 'rgba(0, 0, 0, 0.1)'
         },
-        '.rc-tree-node-selected': {
-            backgroundColor: '#ffe6b0',
-            boxShadow: '0 0 0 1px #ffb951',
-            opacity: 0.8
-        },
         '.rc-tree-icon__open': {
             marginRight: '2px',
             verticalAlign: 'top',
@@ -188,11 +210,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
             display: 'inline-block',
             width: '16px'
         },
-        '.rc-tree-draggable-icon': {
-            display: 'inline-flex',
-            justifyContent: 'center',
-            width: '16px'
-        },
         //Custom styles
         '.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper': {
             position: 'relative',
@@ -203,8 +220,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
             verticalAlign: 'top',
             cursor: 'pointer',
             height: 'auto',
-            width: '100%',
-            paddingRight: '11px'
+            paddingRight: '11px',
+            flexGrow: 1
         },
         '.rc-tree .rc-tree-treenode': {
             margin: 0,
@@ -225,6 +242,18 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         '.rc-tree-title': {
             display: 'inline-block',
             width: '100%'
+        },
+        '.rc-tree-draggable-icon': {
+            display: 'inline-flex',
+            justifyContent: 'center',
+            width: '16px',
+            visibility: 'hidden'
+        },
+        '.rc-tree-treenode-draggable:hover .rc-tree-draggable-icon': {
+            visibility: 'visible'
+        },
+        '.rc-tree-switcher-noop': {
+            width: '16px'
         }
     }
 }); });

package/cjs/RCTree/types.d.ts

@@ -7,7 +7,18 @@ export type RCTreeNode = {
 };
 export type InternalRCNode = {
     value: RCTreeNode;
+    pos?: string;
 } & FieldDataNode<{
     key: string;
     title?: string;
 }>;
+export type DropPositionInfo = {
+    pos: string;
+    dropPosition: number;
+    addToEnd?: boolean;
+};
+export declare enum AddNodePosition {
+    Bottom = 1,
+    Top = -1,
+    AsChild = 0
+}

package/cjs/RCTree/types.js

@@ -1,2 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddNodePosition = void 0;
+var AddNodePosition;
+(function (AddNodePosition) {
+    AddNodePosition[AddNodePosition["Bottom"] = 1] = "Bottom";
+    AddNodePosition[AddNodePosition["Top"] = -1] = "Top";
+    AddNodePosition[AddNodePosition["AsChild"] = 0] = "AsChild";
+})(AddNodePosition || (exports.AddNodePosition = AddNodePosition = {}));

package/cjs/RCTree/useDelayedDragEventCall.d.ts

@@ -0,0 +1,6 @@
+import { DragEvent } from 'react';
+import { InternalRCNode } from './types';
+export declare const useDelayedDragEventCall: (callback: (params: {
+    event: DragEvent<HTMLDivElement>;
+    node: InternalRCNode;
+}) => void, delay?: number) => ({ event, node }: any) => void;

package/cjs/RCTree/useDelayedDragEventCall.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDelayedDragEventCall = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var DELAY_TIMEOUT = 50;
+var useDelayedDragEventCall = function (callback, delay) {
+    if (delay === void 0) { delay = DELAY_TIMEOUT; }
+    var prevMousePosition = (0, react_1.useRef)(null);
+    var lastTimeChanged = (0, react_1.useRef)(0);
+    return (0, react_1.useCallback)(function (_a) {
+        var event = _a.event, node = _a.node;
+        var now = Date.now();
+        var newMousePosition = { x: event.clientX, y: event.clientY };
+        if (!(0, ramda_1.equals)(prevMousePosition === null || prevMousePosition === void 0 ? void 0 : prevMousePosition.current, newMousePosition)) {
+            lastTimeChanged.current = now;
+        }
+        var waitedTime = now - (lastTimeChanged === null || lastTimeChanged === void 0 ? void 0 : lastTimeChanged.current);
+        if (waitedTime > delay) {
+            lastTimeChanged.current = now;
+            callback({ event: event, node: node });
+        }
+        prevMousePosition.current = newMousePosition;
+    }, [callback, delay]);
+};
+exports.useDelayedDragEventCall = useDelayedDragEventCall;

package/cjs/RCTree/useDnd.d.ts

@@ -0,0 +1,47 @@
+import { DragEvent } from 'react';
+import { InternalRCNode, RCTreeNode } from './types';
+type Props = {
+    treeData: RCTreeNode[];
+    containerRef: React.RefObject<HTMLDivElement>;
+    expandNode: (pos: string, expanded: boolean) => void;
+    onLoadChildren?: (treeNode: RCTreeNode) => Promise<void>;
+    onChange?: (node: RCTreeNode[]) => void;
+    onDrop?: (treeData: RCTreeNode[], dragNode: RCTreeNode, parentNode: RCTreeNode) => void;
+    canDrop?: (params: {
+        nextParent: RCTreeNode;
+        node: RCTreeNode;
+    }) => boolean;
+    canDrag?: (params: {
+        node: RCTreeNode;
+    }) => boolean;
+};
+export declare const useDnd: ({ treeData, containerRef, expandNode, onLoadChildren, onChange, onDrop: onDropProp, canDrop, canDrag }: Props) => {
+    treeProps: {
+        onDragStart: ({ node }: {
+            node: InternalRCNode;
+        }) => void;
+        onDragOver: ({ event, node }: {
+            event: DragEvent<HTMLDivElement>;
+            node: InternalRCNode;
+        }) => void;
+        onDragLeave: ({ event, node }: {
+            event: any;
+            node: any;
+        }) => void;
+        onDrop: () => void;
+        dropIndicatorRender: () => any;
+        allowDrop: ({ dragNode, dropNode }: {
+            dragNode: InternalRCNode;
+            dropNode: InternalRCNode;
+        }) => boolean;
+    };
+    nodeDraggable: (node: InternalRCNode) => boolean;
+    dropNode: InternalRCNode;
+    dragNode: InternalRCNode;
+    dropPositionInfo: {
+        pos: string;
+        dropPosition: number;
+        addToEnd?: boolean;
+    };
+};
+export {};