@reltio/components 1.4.1991 → 1.4.1993

package/cjs/RCTree/useDnd.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDnd = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var types_1 = require("./types");
+var useScrollOnDrag_1 = require("./useScrollOnDrag");
+var useDelayedDragEventCall_1 = require("./useDelayedDragEventCall");
+var helper_1 = require("./helper");
+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 = (0, react_1.useState)(null), dragNode = _b[0], setDragNode = _b[1];
+    var _c = (0, react_1.useState)(null), dropNode = _c[0], setDropNode = _c[1];
+    var _d = (0, react_1.useState)(null), dropPositionInfo = _d[0], setDropPositionInfo = _d[1];
+    var _e = (0, useScrollOnDrag_1.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 = (0, react_1.useMemo)(function () {
+        return (0, helper_1.getExpandedKeys)(treeData);
+    }, [treeData]);
+    var expandDropNodeAtPosition = (0, react_1.useCallback)(function (pos, expanded) {
+        var node = (0, helper_1.getNodeAtPosition)(treeData, pos);
+        if (node && !expandedKeys.includes(node.nodeId)) {
+            expandNode(pos, expanded);
+            if (node.pending && onLoadChildren) {
+                onLoadChildren(node);
+            }
+        }
+    }, [expandNode, expandedKeys, onLoadChildren, treeData]);
+    var expandDropNode = (0, react_1.useCallback)(function (newDropPositionInfo) {
+        if (onChange && newDropPositionInfo.dropPosition === types_1.AddNodePosition.AsChild) {
+            var currentParentNodePos = (0, helper_1.slideNodePos)(newDropPositionInfo.pos, dragNode.pos);
+            if (currentParentNodePos.split('-').length > 1) {
+                expandDropNodeAtPosition(currentParentNodePos, true);
+            }
+        }
+    }, [dragNode, expandDropNodeAtPosition, onChange]);
+    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;
+        if (!(0, ramda_1.equals)(newDropPositionInfo, dropPositionInfo) && (!(0, helper_1.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 = (0, useDelayedDragEventCall_1.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) ? (0, helper_1.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 && (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);
+        }
+        setDragNode(null);
+        setDropNode(null);
+        onEndDragging();
+    };
+    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]);
+    return {
+        treeProps: {
+            onDragStart: onDragStart,
+            onDragOver: onDragOver,
+            onDragLeave: onDragLeave,
+            onDrop: onDrop,
+            dropIndicatorRender: dropIndicatorRender,
+            allowDrop: allowDrop
+        },
+        nodeDraggable: nodeDraggable,
+        dropNode: dropNode,
+        dragNode: dragNode,
+        dropPositionInfo: dropPositionInfo
+    };
+};
+exports.useDnd = useDnd;

package/cjs/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/cjs/RCTree/useScrollOnDrag.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollOnDrag = void 0;
+var react_1 = require("react");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var SCROLL_MARGIN = 50;
+var SPEED_MULTIPLIER = 25;
+var UPDATE_DATA_INTERVAL = 100;
+var useScrollOnDrag = function (scrollContainer) {
+    var scrolling = (0, react_1.useRef)(false);
+    var running = (0, react_1.useRef)(false);
+    var scrollData = (0, react_1.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 = (0, react_1.useCallback)((0, mdm_sdk_1.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 = (0, react_1.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 = (0, react_1.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();
+    };
+    (0, react_1.useEffect)(function () {
+        return function () {
+            removeListeners();
+        };
+    }, [removeListeners]);
+    return { onStartDragging: onStartDragging, onEndDragging: onEndDragging, getIsScrolling: getIsScrolling };
+};
+exports.useScrollOnDrag = useScrollOnDrag;

package/cjs/index.d.ts

@@ -284,7 +284,7 @@ export * from './types';
 export * from './constants';
 export { TestPerspectivesSettingsProvider } from './test-utils/TestPerspectiveSettingsProvider';
 export { TestStylesProvider } from './test-utils/TestStylesProvider';
-export { awaitMockPromises, deepFreeze, delayPromise, getMuiIconByName, getMuiIconsByName, mockBasicTableSizing, fixClicksOnResizablePanes, mockElementSizes, rerenderWrapper, FakeMouseEvent } from './test-utils';
+export { awaitMockPromises, deepFreeze, delayPromise, getMuiIconByName, getMuiIconsByName, mockBasicTableSizing, fixClicksOnResizablePanes, mockElementSizes, rerenderWrapper, FakeMouseEvent, mockComputedStyles } from './test-utils';
 export * from './features/activity-log';
 export * from './features/crosswalks';
 export * from './features/graph';

package/cjs/index.js

@@ -20,7 +20,7 @@ exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = expo
 exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.MetadataTypesSelector = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = void 0;
 exports.useReloadData = exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = void 0;
 exports.useMarkers = exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.SegmentationContext = void 0;
-exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = void 0;
+exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = void 0;
 // components
 var ActionButton_1 = require("./ActionButton");
 Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
@@ -639,6 +639,7 @@ Object.defineProperty(exports, "fixClicksOnResizablePanes", { enumerable: true,
 Object.defineProperty(exports, "mockElementSizes", { enumerable: true, get: function () { return test_utils_1.mockElementSizes; } });
 Object.defineProperty(exports, "rerenderWrapper", { enumerable: true, get: function () { return test_utils_1.rerenderWrapper; } });
 Object.defineProperty(exports, "FakeMouseEvent", { enumerable: true, get: function () { return test_utils_1.FakeMouseEvent; } });
+Object.defineProperty(exports, "mockComputedStyles", { enumerable: true, get: function () { return test_utils_1.mockComputedStyles; } });
 // features / activity-log
 __exportStar(require("./features/activity-log"), exports);
 // features / crosswalks

package/cjs/test-utils/index.d.ts

@@ -11,6 +11,7 @@ export declare const mockElementSizes: (element?: HTMLElement, defaults?: {
     mock: () => void;
     unmock: () => void;
 };
+export declare const mockComputedStyles: (styles?: {}) => () => void;
 export declare const mockBasicTableSizing: ({ width, height }?: {
     width?: number;
     height?: number;

package/cjs/test-utils/index.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -62,7 +73,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FakeMouseEvent = exports.getMuiIconsByName = exports.getMuiIconByName = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.mockElementSizes = exports.rerenderWrapper = exports.deepFreeze = exports.awaitMockPromises = exports.delayPromise = void 0;
+exports.FakeMouseEvent = exports.getMuiIconsByName = exports.getMuiIconByName = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.mockComputedStyles = exports.mockElementSizes = exports.rerenderWrapper = exports.deepFreeze = exports.awaitMockPromises = exports.delayPromise = void 0;
 var react_1 = require("@testing-library/react");
 var delayPromise = function (delay) {
     if (delay === void 0) { delay = 0; }
@@ -130,6 +141,19 @@ var mockElementSizes = function (element, defaults) {
     return { mock: mock, unmock: unmock };
 };
 exports.mockElementSizes = mockElementSizes;
+var mockComputedStyles = function (styles) {
+    if (styles === void 0) { styles = {}; }
+    var originalGetComputedStyle = window.getComputedStyle;
+    Object.defineProperty(window, 'getComputedStyle', {
+        value: function () { return (__assign(__assign({}, styles), { getPropertyValue: function () { return ''; } })); }
+    });
+    return function () {
+        Object.defineProperty(window, 'getComputedStyle', {
+            value: originalGetComputedStyle
+        });
+    };
+};
+exports.mockComputedStyles = mockComputedStyles;
 var mockBasicTableSizing = function (_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.width, width = _c === void 0 ? 2100 : _c, _d = _b.height, height = _d === void 0 ? 1000 : _d;
     var _e = (0, exports.mockElementSizes)(window.HTMLElement.prototype, { offsetHeight: height, offsetWidth: width }), mock = _e.mock, unmock = _e.unmock;

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

@@ -1,47 +1,86 @@
+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);
+};
 import classnames from 'classnames';
 import { assoc, identity } from 'ramda';
 import Tree from 'rc-tree';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import DragIndicator from '@mui/icons-material/DragIndicator';
 import { DefaultSwitchRenderer } from './DefaultSwitchRenderer';
-import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, getExpandedKeys } from './helper';
+import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, gatherNodeKeys, getExpandedKeys, isDropIndicatorNode, moveNode, preventNodeDragging } from './helper';
+import { useDnd } from './useDnd';
 import { useStyles } from './styles';
 var MIN_ROW_HEIGHT = 28;
 export 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 : _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 ? defaultIsLeaf : _h, scrollToNode = _a.scrollToNode, _j = _a.onChange, onChange = _j === void 0 ? 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 : _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 ? defaultIsLeaf : _k, scrollToNode = _a.scrollToNode, _l = _a.onChange, onChange = _l === void 0 ? identity : _l;
     var styles = useStyles();
-    var internalTreeData = useMemo(function () { return convertTreeData({ data: treeData, isLeaf: isLeaf }); }, [isLeaf, treeData]);
     var treeRef = useRef(null);
+    var containerRef = useRef(null);
+    var expandNode = useCallback(function (pos, expanded) {
+        var changeNode = assoc('expanded', expanded);
+        var newTreeData = changeNodeAtPosition(treeData, pos, changeNode);
+        if (newTreeData)
+            onChange(newTreeData);
+    }, [onChange, treeData]);
+    var _m = 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;
     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 = useCallback(function (_expandedKeys, data) {
-        if (onChange) {
-            var changeNode = assoc('expanded', data.expanded);
-            var newTreeData = changeNodeAtPosition(treeData, data.node.pos, changeNode);
-            if (newTreeData)
-                onChange(newTreeData);
+    var diplayedTreeData = 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 moveNode(treeData, dragNodeValue, dragNode.pos, dropPositionInfo);
         }
-    }, [treeData, onChange]);
+        return treeData;
+    }, [treeData, dragNode, dropNode, dropPositionInfo]);
     var expandedKeys = useMemo(function () {
-        return getExpandedKeys(treeData);
-    }, [treeData]);
+        return getExpandedKeys(diplayedTreeData);
+    }, [diplayedTreeData]);
+    var internalTreeData = useMemo(function () { return convertTreeData({ data: diplayedTreeData, isLeaf: isLeaf }); }, [isLeaf, diplayedTreeData]);
+    var handleExpand = useCallback(function (_expandedKeys, data) {
+        if (onChange && !dragNode) {
+            expandNode(data.node.pos, data.expanded);
+        }
+    }, [onChange, expandNode, dragNode]);
     var renderSwitcherIcon = useCallback(function (node) { return React.createElement(SwitchRenderer, { node: node }); }, []);
-    return internalTreeData ? (React.createElement(Tree, { 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: classnames(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 = gatherNodeKeys(dragNode);
+        return (React.createElement("div", { className: classnames((_a = {},
+                _a[styles.dropIndicator] = isDropIndicatorNode(node),
+                _a[styles.dropNotAllowed] = dropNode && !isDropIndicatorNode(dropNode),
+                _a[styles.draggedChildrenNode] = draggedNodes.includes(node.key),
+                _a)), onMouseDown: preventNodeDragging }, renderNode ? renderNode(node.value) : node.title));
+    };
+    var dragHandle = (React.createElement("span", { className: classnames(styles.dragHandle, (_b = {},
+            _b[styles.dragHandleDragging] = !!dragNode,
+            _b)) },
+        React.createElement(DragIndicator, null)));
+    return diplayedTreeData ? (React.createElement("div", { ref: containerRef },
+        React.createElement(Tree, __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: classnames(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;
 };

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