@reltio/components 1.4.1992 → 1.4.1994

package/esm/RCTree/helper.js

@@ -18,27 +18,73 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { assocPath, intersperse, map, pipe, path, remove, split } from 'ramda';
+import { always, assoc, assocPath, ifElse, intersperse, insert, last, map, pipe, path, remove, split } from 'ramda';
+import { AddNodePosition } from './types';
+var DEPTH_LEVEL_INDENT = 16;
+var DROP_INDICATOR_NODE_KEY = '-1';
 export var defaultIsLeaf = function (_a) {
     var _b = _a.children, children = _b === void 0 ? [] : _b;
     return !children.length;
 };
 export 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: convertTreeData({ data: item.children, parentPath: path, isLeaf: isLeaf })
+            children: convertTreeData({ data: item.children, isLeaf: isLeaf })
         }));
     });
 };
 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;
+};
+export var getParentPos = function (pos) {
+    return pos.split('-').slice(0, -1).join('-');
+};
 export var changeNodeAtPosition = function (treeData, pos, changeNode) {
     var nodePath = getPathFromPosition(pos);
     var node = path(nodePath, treeData);
-    return node ? assocPath(nodePath, changeNode(node), treeData) : null;
+    return node ? assocPath(nodePath, changeNode(node), treeData) : treeData;
+};
+export 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 = path(childrenPath)(treeData);
+        var newChildren = remove(nodeIndex, 1, children);
+        return assocPath(childrenPath, newChildren, treeData);
+    }
+    return remove(nodeIndex, 1, treeData);
+};
+export 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 === AddNodePosition.Top ? nodeIndex : nodeIndex + 1;
+    if (childrenPath.length > 0) {
+        var children = path(childrenPath, treeData);
+        if (!children)
+            return treeData;
+        var newChildren = insert(newNodeIndex, node, children);
+        return assocPath(childrenPath, newChildren, treeData);
+    }
+    return insert(newNodeIndex, node, treeData);
+};
+export 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 removeNodeAtPosition(treeData, dragNodePos); };
+    var addNode = function (treeData) {
+        return dropPosition === AddNodePosition.AsChild
+            ? changeNodeAtPosition(treeData, pos, function (node) {
+                return pipe(ifElse(always(addToEnd), assoc('children', __spreadArray(__spreadArray([], (node.children || []), true), [dragNode], false)), assoc('children', __spreadArray([dragNode], (node.children || []), true))), assoc('expanded', true))(node);
+            })
+            : insertNodeAtPosition(treeData, pos, dropPosition, dragNode);
+    };
+    return pipe(removeNode, addNode)(treeData);
 };
 export var getExpandedKeys = function (nodes) {
     if (nodes === void 0) { nodes = []; }
@@ -46,3 +92,102 @@ export var getExpandedKeys = function (nodes) {
         return expandedKeys.concat(node.expanded ? [String(node.nodeId)] : []).concat(getExpandedKeys(node.children));
     }, []);
 };
+export 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(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;
+};
+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 ? AddNodePosition.Top : 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(last(position));
+    return position
+        .slice(0, -1)
+        .concat(String(change(lastIndex)))
+        .join('-');
+};
+var getCurrentDropNodePos = function (dropPositionInfo) {
+    switch (dropPositionInfo.dropPosition) {
+        case AddNodePosition.Top:
+            return dropPositionInfo.pos;
+        case AddNodePosition.Bottom:
+            return changePosLastIndex(dropPositionInfo.pos, function (index) { return index + 1; });
+        case AddNodePosition.AsChild:
+            return "".concat(dropPositionInfo.pos, "-0");
+    }
+};
+export 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
+        : slideNodePos(dropNode.pos, getCurrentDropNodePos(prevDropPositionInfo), true);
+    var dropNodeDepth = pos.split('-').length - 1;
+    var position = pos.split('-');
+    var lastIndex = Number(last(position));
+    if (depthPosition === dropNodeDepth) {
+        return { pos: pos, dropPosition: addNodePosition };
+    }
+    if (addNodePosition === AddNodePosition.Top) {
+        if (lastIndex > 0) {
+            return {
+                pos: position
+                    .slice(0, -1)
+                    .concat(String(lastIndex - 1))
+                    .join('-'),
+                dropPosition: AddNodePosition.AsChild,
+                addToEnd: true
+            };
+        }
+        if (position.length > 2)
+            return { pos: position.slice(0, -1).join('-'), dropPosition: AddNodePosition.AsChild, addToEnd: false };
+        return { pos: pos, dropPosition: AddNodePosition.Top };
+    }
+    return { pos: pos, dropPosition: AddNodePosition.AsChild };
+};
+export var isDropIndicatorNode = function (node) { return (node === null || node === void 0 ? void 0 : node.key) === DROP_INDICATOR_NODE_KEY; };
+export var gatherNodeKeys = function (node) {
+    return node ? __spreadArray([node.key], (node.children ? node.children.flatMap(gatherNodeKeys) : []), true) : [];
+};
+export var preventNodeDragging = function (event) {
+    event.preventDefault();
+};

package/esm/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/esm/RCTree/styles.js

@@ -1,10 +1,10 @@
 import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
+export var useStyles = makeStyles(function (theme) { return ({
     switcherButtonWrapper: {
-        paddingTop: '9px',
-        paddingLeft: '6px',
-        width: '16px',
-        height: '16px',
+        paddingTop: '11px',
+        paddingLeft: '4px',
+        width: '12px',
+        height: '12px',
         cursor: 'pointer'
     },
     switcherButton: {
@@ -24,6 +24,39 @@ export var useStyles = 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': {
@@ -49,12 +82,6 @@ export var useStyles = 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'
         },
@@ -152,11 +179,6 @@ export var useStyles = 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',
@@ -185,11 +207,6 @@ export var useStyles = 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',
@@ -200,8 +217,8 @@ export var useStyles = makeStyles(function () { return ({
             verticalAlign: 'top',
             cursor: 'pointer',
             height: 'auto',
-            width: '100%',
-            paddingRight: '11px'
+            paddingRight: '11px',
+            flexGrow: 1
         },
         '.rc-tree .rc-tree-treenode': {
             margin: 0,
@@ -222,6 +239,18 @@ export var useStyles = 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/esm/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/esm/RCTree/types.js

@@ -1 +1,6 @@
-export {};
+export var AddNodePosition;
+(function (AddNodePosition) {
+    AddNodePosition[AddNodePosition["Bottom"] = 1] = "Bottom";
+    AddNodePosition[AddNodePosition["Top"] = -1] = "Top";
+    AddNodePosition[AddNodePosition["AsChild"] = 0] = "AsChild";
+})(AddNodePosition || (AddNodePosition = {}));

package/esm/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/esm/RCTree/useDelayedDragEventCall.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from 'react';
+import { equals } from 'ramda';
+var DELAY_TIMEOUT = 50;
+export var useDelayedDragEventCall = function (callback, delay) {
+    if (delay === void 0) { delay = DELAY_TIMEOUT; }
+    var prevMousePosition = useRef(null);
+    var lastTimeChanged = useRef(0);
+    return useCallback(function (_a) {
+        var event = _a.event, node = _a.node;
+        var now = Date.now();
+        var newMousePosition = { x: event.clientX, y: event.clientY };
+        if (!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]);
+};

package/esm/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 {};

package/esm/RCTree/useDnd.js

@@ -0,0 +1,108 @@
+import { useCallback, useMemo, useState } from 'react';
+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';
+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];
+    var _c = useState(null), dropNode = _c[0], setDropNode = _c[1];
+    var _d = useState(null), dropPositionInfo = _d[0], setDropPositionInfo = _d[1];
+    var _e = useScrollOnDrag(containerRef), onStartDragging = _e.onStartDragging, onEndDragging = _e.onEndDragging, getIsScrolling = _e.getIsScrolling;
+    var handleDropOutsideTree = function () {
+        setDragNode(null);
+        setDropNode(null);
+        onEndDragging();
+        window.removeEventListener('mousemove', handleDropOutsideTree);
+    };
+    var onDragStart = function (_a) {
+        var node = _a.node;
+        setDragNode(node);
+        onStartDragging();
+        window.addEventListener('mousemove', handleDropOutsideTree);
+    };
+    var expandedKeys = useMemo(function () {
+        return getExpandedKeys(treeData);
+    }, [treeData]);
+    var expandDropNodeAtPosition = useCallback(function (pos, expanded) {
+        var node = getNodeAtPosition(treeData, pos);
+        if (node && !expandedKeys.includes(node.nodeId)) {
+            expandNode(pos, expanded);
+            if (node.pending && onLoadChildren) {
+                onLoadChildren(node);
+            }
+        }
+    }, [expandNode, expandedKeys, onLoadChildren, treeData]);
+    var expandDropNode = useCallback(function (newDropPositionInfo) {
+        if (onChange && newDropPositionInfo.dropPosition === AddNodePosition.AsChild) {
+            var currentParentNodePos = slideNodePos(newDropPositionInfo.pos, dragNode.pos);
+            if (currentParentNodePos.split('-').length > 1) {
+                expandDropNodeAtPosition(currentParentNodePos, true);
+            }
+        }
+    }, [dragNode, expandDropNodeAtPosition, onChange]);
+    var handleSetDropNode = useCallback(function (_a) {
+        var event = _a.event, node = _a.node;
+        var newDropPositionInfo = getDropNodePosition(event, node, dropPositionInfo) || dropPositionInfo;
+        if (!equals(newDropPositionInfo, dropPositionInfo) && (!isDropIndicatorNode(node) || !dropNode)) {
+            setDropPositionInfo(newDropPositionInfo);
+            expandDropNode(newDropPositionInfo);
+        }
+        if (node.key !== (dropNode === null || dropNode === void 0 ? void 0 : dropNode.key)) {
+            setDropNode(node);
+        }
+    }, [dropNode, dropPositionInfo, expandDropNode]);
+    var delayedHandleDragOver = useDelayedDragEventCall(handleSetDropNode);
+    var onDragOver = function (_a) {
+        var event = _a.event, node = _a.node;
+        var isScrolling = getIsScrolling();
+        if (!isScrolling)
+            delayedHandleDragOver({ event: event, node: node });
+    };
+    var dropIndicatorRender = function () {
+        return null;
+    };
+    var onDragLeave = function (_a) {
+        var _b, _c;
+        var event = _a.event, node = _a.node;
+        var draggedChildrenNodes = ((_b = dragNode === null || dragNode === void 0 ? void 0 : dragNode.value) === null || _b === void 0 ? void 0 : _b.expanded) ? getExpandedKeys((_c = dragNode.value) === null || _c === void 0 ? void 0 : _c.children) : [];
+        if (draggedChildrenNodes.includes(node.key)) {
+            handleSetDropNode({ event: event, node: node });
+        }
+    };
+    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);
+        }
+        setDragNode(null);
+        setDropNode(null);
+        onEndDragging();
+    };
+    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]);
+    return {
+        treeProps: {
+            onDragStart: onDragStart,
+            onDragOver: onDragOver,
+            onDragLeave: onDragLeave,
+            onDrop: onDrop,
+            dropIndicatorRender: dropIndicatorRender,
+            allowDrop: allowDrop
+        },
+        nodeDraggable: nodeDraggable,
+        dropNode: dropNode,
+        dragNode: dragNode,
+        dropPositionInfo: dropPositionInfo
+    };
+};

package/esm/RCTree/useScrollOnDrag.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const useScrollOnDrag: (scrollContainer: React.MutableRefObject<HTMLDivElement>) => {
+    onStartDragging: () => void;
+    onEndDragging: () => void;
+    getIsScrolling: () => boolean;
+};

package/esm/RCTree/useScrollOnDrag.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { throttle } from '@reltio/mdm-sdk';
+var SCROLL_MARGIN = 50;
+var SPEED_MULTIPLIER = 25;
+var UPDATE_DATA_INTERVAL = 100;
+export var useScrollOnDrag = function (scrollContainer) {
+    var scrolling = useRef(false);
+    var running = useRef(false);
+    var scrollData = useRef(null);
+    var getIsScrolling = function () {
+        return scrolling === null || scrolling === void 0 ? void 0 : scrolling.current;
+    };
+    var onStartDragging = function () {
+        var container = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current;
+        if (container && typeof container.addEventListener === 'function') {
+            container.addEventListener('dragover', updateScrollData);
+            window.addEventListener('dragover', updateScrollData);
+            running.current = true;
+        }
+    };
+    var updateScrollData = useCallback(throttle(function (event) {
+        var container = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current;
+        if (!container || !running.current)
+            return;
+        var holder = container.getElementsByClassName('rc-tree-list-holder')[0];
+        var calcSpeed = function () {
+            var clientY = event.clientY, clientX = event.clientX;
+            var _a = container.getBoundingClientRect(), top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right;
+            var maxScroll = holder.scrollHeight - holder.clientHeight;
+            var insideContainer = clientY > top && clientY < bottom && clientX >= left && clientX <= right;
+            if (insideContainer) {
+                if (clientY - top < SCROLL_MARGIN && holder.scrollTop > 0) {
+                    return (clientY - top - SCROLL_MARGIN) / SCROLL_MARGIN;
+                }
+                else if (bottom - clientY < SCROLL_MARGIN && holder.scrollTop < maxScroll) {
+                    return -(bottom - clientY - SCROLL_MARGIN) / SCROLL_MARGIN;
+                }
+            }
+            return 0;
+        };
+        if (holder) {
+            scrollData.current = calcSpeed();
+            if (scrollData.current) {
+                runScrolling(holder);
+            }
+        }
+    }, UPDATE_DATA_INTERVAL), []);
+    var removeListeners = useCallback(function () {
+        var container = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current;
+        if (container && typeof container.removeEventListener === 'function') {
+            container.removeEventListener('dragover', updateScrollData);
+        }
+        window.removeEventListener('dragover', updateScrollData);
+    }, [scrollContainer, updateScrollData]);
+    var onEndDragging = useCallback(function () {
+        scrolling.current = false;
+        scrollData.current = null;
+        running.current = false;
+        removeListeners();
+    }, [removeListeners]);
+    var runScrolling = function (holder) {
+        if (scrolling === null || scrolling === void 0 ? void 0 : scrolling.current) {
+            return;
+        }
+        scrolling.current = true;
+        var scroll = function () {
+            if (scrolling.current && scrollData.current) {
+                holder.scrollTop += scrollData.current * SPEED_MULTIPLIER;
+                requestAnimationFrame(scroll);
+            }
+            else {
+                scrolling.current = false;
+            }
+        };
+        scroll();
+    };
+    useEffect(function () {
+        return function () {
+            removeListeners();
+        };
+    }, [removeListeners]);
+    return { onStartDragging: onStartDragging, onEndDragging: onEndDragging, getIsScrolling: getIsScrolling };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1992",
+  "version": "1.4.1994",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1888",
+    "@reltio/mdm-sdk": "^1.4.1889",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
     "d3-hierarchy": "^2.0.0",