@reltio/components 1.4.2000 → 1.4.2001

package/cjs/RCTree/RCTree.d.ts

@@ -1,27 +1,30 @@
 import { TreeNodeProps } from 'rc-tree';
 import React from 'react';
-import { RCTreeNode } from './types';
-type Props = {
-    treeData: RCTreeNode[];
-    renderNode?: (node: RCTreeNode & Record<string, unknown>) => React.ReactElement;
+import { InternalRCNode, RCTreeNode } from './types';
+type Props<Node extends RCTreeNode> = {
+    treeData: Node[];
+    renderNode?: (node: Node) => React.ReactElement;
     isVirtualized?: boolean;
     canDrag?: (params: {
-        node: RCTreeNode;
+        node: Node;
     }) => boolean;
     canDrop?: (params: {
-        nextParent: RCTreeNode;
-        node: RCTreeNode;
+        nextParent: Node;
+        node: Node;
     }) => boolean;
-    onDrop?: (treeData: RCTreeNode[], dragNode: RCTreeNode, parentNode: RCTreeNode) => void;
-    onLoadChildren?: (treeNode: RCTreeNode) => Promise<void>;
-    height?: number;
+    onDrop?: (treeData: Node[], dragNode: Node, parentNode: Node) => void;
+    onLoadChildren?: (treeNode: Node) => Promise<void>;
     defaultExpandAll?: boolean;
-    SwitchRenderer?: (props: any) => React.ReactElement;
+    SwitchRenderer?: (props: {
+        node: InternalRCNode<Node>;
+    }) => React.ReactElement;
+    LevelLinesRenderer?: (props: any) => React.ReactElement;
     className?: string;
     minItemHeight?: number;
     isLeaf?: (node: TreeNodeProps & Record<string, unknown>) => boolean;
-    scrollToNode?: RCTreeNode;
-    onChange?: (node: RCTreeNode[]) => void;
+    scrollToNode?: Node;
+    onChange?: (node: Node[]) => void;
+    height?: number;
 };
-export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, scrollToNode, onChange }: Props) => React.JSX.Element;
+export declare const RCTree: <Node extends RCTreeNode>({ treeData, isVirtualized, canDrag, canDrop, onDrop, onLoadChildren, defaultExpandAll, SwitchRenderer, LevelLinesRenderer, className, renderNode, minItemHeight, isLeaf, scrollToNode, onChange, height }: Props<Node>) => React.JSX.Element;
 export {};

package/cjs/RCTree/RCTree.js

@@ -43,24 +43,27 @@ 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 react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var RCTreeSwitchRenderer_1 = require("./RCTreeSwitchRenderer");
+var RCTreeLevelLines_1 = require("./RCTreeLevelLines");
 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 _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 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, _g = _a.defaultExpandAll, defaultExpandAll = _g === void 0 ? false : _g, _h = _a.SwitchRenderer, SwitchRenderer = _h === void 0 ? RCTreeSwitchRenderer_1.RCTreeSwitchRenderer : _h, _j = _a.LevelLinesRenderer, LevelLinesRenderer = _j === void 0 ? RCTreeLevelLines_1.RCTreeLevelLines : _j, className = _a.className, renderNode = _a.renderNode, _k = _a.minItemHeight, minItemHeight = _k === void 0 ? MIN_ROW_HEIGHT : _k, _l = _a.isLeaf, isLeaf = _l === void 0 ? helper_1.defaultIsLeaf : _l, scrollToNode = _a.scrollToNode, _m = _a.onChange, onChange = _m === void 0 ? ramda_1.identity : _m, height = _a.height;
     var styles = (0, styles_1.useStyles)();
     var treeRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
+    var _o = (0, react_1.useState)({ width: 0, height: 0 }), containerSize = _o[0], setContainerSize = _o[1];
     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)({
+    var _p = (0, useDnd_1.useDnd)({
         containerRef: containerRef,
         treeData: treeData,
         expandNode: expandNode,
@@ -69,7 +72,7 @@ var RCTree = function (_a) {
         onDrop: onDrop,
         canDrop: canDrop,
         canDrag: canDrag
-    }), treeProps = _m.treeProps, nodeDraggable = _m.nodeDraggable, dropNode = _m.dropNode, dragNode = _m.dragNode, dropPositionInfo = _m.dropPositionInfo;
+    }), treeProps = _p.treeProps, nodeDraggable = _p.nodeDraggable, dropNode = _p.dropNode, dragNode = _p.dragNode, dropPositionInfo = _p.dropPositionInfo;
     (0, react_1.useEffect)(function () {
         if (treeRef.current && scrollToNode) {
             treeRef.current.scrollTo({ key: String(scrollToNode.nodeId) });
@@ -84,9 +87,14 @@ var RCTree = function (_a) {
         }
         return treeData;
     }, [treeData, dragNode, dropNode, dropPositionInfo]);
+    (0, react_1.useEffect)(function () {
+        if (isVirtualized)
+            (0, helper_1.setTreeWidth)(containerRef, diplayedTreeData);
+    }, [diplayedTreeData, isVirtualized]);
     var expandedKeys = (0, react_1.useMemo)(function () {
         return (0, helper_1.getExpandedKeys)(diplayedTreeData);
     }, [diplayedTreeData]);
+    var levelLines = (0, react_1.useMemo)(function () { return (0, helper_1.getLevelLinesData)(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) {
@@ -96,21 +104,29 @@ var RCTree = function (_a) {
     var renderSwitcherIcon = (0, react_1.useCallback)(function (node) { return react_1.default.createElement(SwitchRenderer, { node: node }); }, []);
     var titleRender = function (node) {
         var _a;
+        var _b, _c;
         var draggedNodes = (0, helper_1.gatherNodeKeys)(dragNode);
-        return (react_1.default.createElement("div", { className: (0, classnames_1.default)((_a = {},
+        var width = (0, helper_1.calcNodeWidth)((_c = (_b = levelLines[node.key]) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.length, containerSize.width);
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.titleWrapper, (_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));
+                _a)), onMouseDown: helper_1.preventNodeDragging, style: { width: width } },
+            react_1.default.createElement(LevelLinesRenderer, { levelLine: levelLines[node.key] }),
+            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 },
+    var onContainerResize = (0, react_1.useCallback)(function (width, height) {
+        setContainerSize({ width: width, height: height });
+    }, []);
+    return diplayedTreeData ? (react_1.default.createElement("div", { ref: containerRef, className: (0, classnames_1.default)(styles.treeContainer) },
+        react_1.default.createElement(react_resize_detector_1.default, { handleWidth: true, handleHeight: true, onResize: onContainerResize }),
         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;
+            }, virtual: isVirtualized, itemHeight: minItemHeight, height: height || containerSize.height, onExpand: handleExpand, showIcon: false, switcherIcon: renderSwitcherIcon, defaultExpandAll: defaultExpandAll, expandedKeys: expandedKeys, 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/RCTreeLevelLines.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const RCTreeLevelLines: ({ levelLine }: {
+    levelLine: [boolean[], boolean];
+}) => React.JSX.Element;

package/cjs/RCTree/RCTreeLevelLines.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RCTreeLevelLines = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var helper_1 = require("./helper");
+var levelLinesStyles_1 = require("./levelLinesStyles");
+var LevelLine = function (_a) {
+    var _b;
+    var _c = _a.needDrawLine, needDrawLine = _c === void 0 ? false : _c, _d = _a.isLastLevelLine, isLastLevelLine = _d === void 0 ? false : _d, _e = _a.drawHorizontalLine, drawHorizontalLine = _e === void 0 ? false : _e;
+    var styles = (0, levelLinesStyles_1.useStyles)({});
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.levelLine, (_b = {},
+            _b[styles.showLine] = needDrawLine,
+            _b[styles.lastLevelLine] = isLastLevelLine,
+            _b[styles.horizontalLine] = drawHorizontalLine,
+            _b)) }));
+};
+var RCTreeLevelLines = function (_a) {
+    var levelLine = _a.levelLine;
+    var _b = levelLine || [], _c = _b[0], needDrawLines = _c === void 0 ? [] : _c, _d = _b[1], isLast = _d === void 0 ? false : _d;
+    var level = needDrawLines.length + 2;
+    var styles = (0, levelLinesStyles_1.useStyles)({ level: level });
+    return (react_1.default.createElement("div", { className: styles.levelLines, style: { left: "-".concat(helper_1.DEPTH_LEVEL_INDENT * level, "px") } }, needDrawLines
+        .map(function (needDrawLine, index) {
+        return react_1.default.createElement(LevelLine, { key: index, needDrawLine: needDrawLine });
+    })
+        .concat(react_1.default.createElement(LevelLine, { key: level, needDrawLine: true, drawHorizontalLine: true, isLastLevelLine: isLast }))));
+};
+exports.RCTreeLevelLines = RCTreeLevelLines;

package/cjs/RCTree/RCTreeSwitchRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InternalRCNode } from './types';
+type Props = {
+    node: InternalRCNode;
+};
+export declare const RCTreeSwitchRenderer: ({ node }: Props) => React.JSX.Element;
+export {};

package/cjs/RCTree/{DefaultSwitchRenderer.js → RCTreeSwitchRenderer.js}

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultSwitchRenderer = void 0;
+exports.RCTreeSwitchRenderer = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var styles_1 = require("./styles");
-var DefaultSwitchRenderer = function (_a) {
+var RCTreeSwitchRenderer = function (_a) {
     var node = _a.node;
     var styles = (0, styles_1.useStyles)();
     return !node.isLeaf ? (react_1.default.createElement("div", { className: styles.switcherButtonWrapper },
         react_1.default.createElement("div", { "aria-label": node.expanded ? 'Collapse' : 'Expand', className: (0, classnames_1.default)(styles.switcherButton, node.expanded ? styles.collapseButton : styles.expandButton) }))) : null;
 };
-exports.DefaultSwitchRenderer = DefaultSwitchRenderer;
+exports.RCTreeSwitchRenderer = RCTreeSwitchRenderer;

package/cjs/RCTree/helper.d.ts

@@ -1,17 +1,18 @@
 import React, { MouseEvent } from 'react';
 import { AddNodePosition, DropPositionInfo, InternalRCNode, RCTreeNode } from './types';
+export declare const DEPTH_LEVEL_INDENT = 16;
 export declare const defaultIsLeaf: ({ children }: {
     children?: unknown[];
 }) => boolean;
-type ConvertTreeDataProps<T> = {
-    data: T[];
+type ConvertTreeDataProps<Node> = {
+    data: Node[];
     parentPath?: number[];
-    isLeaf: (node: T) => boolean;
+    isLeaf: (node: Node) => boolean;
 };
-export declare const convertTreeData: ({ data, isLeaf }: ConvertTreeDataProps<RCTreeNode>) => InternalRCNode[];
+export declare const convertTreeData: <Node extends RCTreeNode>({ data, isLeaf }: ConvertTreeDataProps<Node>) => InternalRCNode<Node>[];
 export declare const getNodeAtPosition: (treeData: RCTreeNode[], pos: string) => any;
 export declare const getParentPos: (pos: string) => string;
-export declare const changeNodeAtPosition: (treeData: RCTreeNode[], pos: string, changeNode: (node: RCTreeNode) => RCTreeNode) => any;
+export declare const changeNodeAtPosition: <Node extends RCTreeNode>(treeData: Node[], pos: string, changeNode: (node: Node) => Node) => 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;
@@ -29,4 +30,8 @@ export declare const getDropNodePosition: (event: React.DragEvent<HTMLDivElement
 export declare const isDropIndicatorNode: (node: InternalRCNode) => boolean;
 export declare const gatherNodeKeys: (node: InternalRCNode) => string[];
 export declare const preventNodeDragging: (event: MouseEvent<HTMLDivElement>) => void;
+type LevelLinesData = Record<string, [boolean[], boolean]>;
+export declare const getLevelLinesData: (treeData: RCTreeNode[]) => LevelLinesData;
+export declare const setTreeWidth: (container: React.RefObject<HTMLDivElement>, data: RCTreeNode[]) => void;
+export declare const calcNodeWidth: (depth: number, containerWidth: number) => number;
 export {};

package/cjs/RCTree/helper.js

@@ -20,11 +20,14 @@ 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.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;
+exports.calcNodeWidth = exports.setTreeWidth = exports.getLevelLinesData = 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 = exports.DEPTH_LEVEL_INDENT = void 0;
 var ramda_1 = require("ramda");
 var types_1 = require("./types");
-var DEPTH_LEVEL_INDENT = 16;
+exports.DEPTH_LEVEL_INDENT = 16;
 var DROP_INDICATOR_NODE_KEY = '-1';
+var CONTAINER_PADDINGS = 29;
+var NODE_TITLE_MAX_WIDTH = 204;
+var INITIAL_NODE_DEPTH = 2;
 var defaultIsLeaf = function (_a) {
     var _b = _a.children, children = _b === void 0 ? [] : _b;
     return !children.length;
@@ -146,7 +149,7 @@ var findDepthPosition = function (event, dropNode) {
     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));
+    return Math.min(dropNodeLevel + 1, Math.max(Math.round(offsetX / exports.DEPTH_LEVEL_INDENT), dropNodeLevel));
 };
 var changePosLastIndex = function (pos, change) {
     var position = pos.split('-');
@@ -208,3 +211,46 @@ var preventNodeDragging = function (event) {
     event.preventDefault();
 };
 exports.preventNodeDragging = preventNodeDragging;
+var getLevelLinesData = function (treeData) {
+    var getLinesData = function (data, prevLinesData) {
+        return data.reduce(function (linesData, node, index) {
+            var isLast = index === data.length - 1;
+            linesData[String(node.nodeId)] = [prevLinesData, isLast];
+            if (node.children && node.expanded) {
+                var nextLinesData = prevLinesData.concat(!isLast);
+                return __assign(__assign({}, linesData), getLinesData(node.children, nextLinesData));
+            }
+            return linesData;
+        }, {});
+    };
+    return getLinesData(treeData, []);
+};
+exports.getLevelLinesData = getLevelLinesData;
+var getTreeMaxDepth = function (data, depth) {
+    if (depth === void 0) { depth = INITIAL_NODE_DEPTH; }
+    return data.reduce(function (maxDepth, node) {
+        return node.expanded && node.children
+            ? Math.max(maxDepth, getTreeMaxDepth(node.children, depth + 1))
+            : maxDepth;
+    }, depth);
+};
+var getTreeMaxWidth = function (data) {
+    return getTreeMaxDepth(data) * exports.DEPTH_LEVEL_INDENT + NODE_TITLE_MAX_WIDTH + CONTAINER_PADDINGS;
+};
+var setTreeWidth = function (container, data) {
+    var _a, _b;
+    if (container.current) {
+        var maxTreeWidth = getTreeMaxWidth(data);
+        var list = (_b = (_a = container.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('rc-tree-list-holder')[0]) === null || _b === void 0 ? void 0 : _b.firstChild;
+        if (list)
+            list.style.minWidth = "".concat(maxTreeWidth, "px");
+    }
+};
+exports.setTreeWidth = setTreeWidth;
+var calcNodeWidth = function (depth, containerWidth) {
+    if (depth === void 0) { depth = 0; }
+    var leftIndent = (depth + INITIAL_NODE_DEPTH) * exports.DEPTH_LEVEL_INDENT;
+    var paddings = leftIndent + CONTAINER_PADDINGS;
+    return Math.max(containerWidth - paddings, NODE_TITLE_MAX_WIDTH);
+};
+exports.calcNodeWidth = calcNodeWidth;

package/cjs/RCTree/index.d.ts

@@ -1 +1,3 @@
 export { RCTree } from './RCTree';
+export { RCTreeLevelLines } from './RCTreeLevelLines';
+export { RCTreeSwitchRenderer } from './RCTreeSwitchRenderer';

package/cjs/RCTree/index.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RCTree = void 0;
+exports.RCTreeSwitchRenderer = exports.RCTreeLevelLines = exports.RCTree = void 0;
 var RCTree_1 = require("./RCTree");
 Object.defineProperty(exports, "RCTree", { enumerable: true, get: function () { return RCTree_1.RCTree; } });
+var RCTreeLevelLines_1 = require("./RCTreeLevelLines");
+Object.defineProperty(exports, "RCTreeLevelLines", { enumerable: true, get: function () { return RCTreeLevelLines_1.RCTreeLevelLines; } });
+var RCTreeSwitchRenderer_1 = require("./RCTreeSwitchRenderer");
+Object.defineProperty(exports, "RCTreeSwitchRenderer", { enumerable: true, get: function () { return RCTreeSwitchRenderer_1.RCTreeSwitchRenderer; } });

package/cjs/RCTree/levelLinesStyles.d.ts

@@ -0,0 +1,5 @@
+type StyleProps = {
+    level?: number;
+};
+export declare const useStyles: (props: StyleProps) => import("@mui/styles").ClassNameMap<"showLine" | "levelLines" | "levelLine" | "lastLevelLine" | "horizontalLine">;
+export {};

package/cjs/RCTree/levelLinesStyles.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var helper_1 = require("./helper");
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    levelLines: function (_a) {
+        var level = _a.level;
+        return ({
+            position: 'absolute',
+            left: "-".concat(level * helper_1.DEPTH_LEVEL_INDENT, "px"),
+            display: 'flex',
+            paddingLeft: '7px',
+            cursor: 'initial',
+            bottom: 0,
+            top: 0,
+            zIndex: -1
+        });
+    },
+    levelLine: {
+        paddingLeft: '16px',
+        height: '100%',
+        position: 'relative'
+    },
+    showLine: {
+        '&:after': {
+            content: '""',
+            position: 'absolute',
+            height: '100%',
+            width: '1px',
+            left: '0',
+            top: '0',
+            bottom: '0',
+            backgroundColor: 'rgba(0, 122, 193, 0.3)'
+        }
+    },
+    lastLevelLine: {
+        '&:after': {
+            height: '14px'
+        }
+    },
+    horizontalLine: {
+        '&:before': {
+            content: '""',
+            height: '1px',
+            width: '4px',
+            position: 'absolute',
+            top: '14px',
+            left: '0',
+            backgroundColor: 'rgba(0, 122, 193, 0.3)'
+        }
+    }
+}); });

package/cjs/RCTree/styles.d.ts

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

package/cjs/RCTree/styles.js

@@ -4,11 +4,12 @@ exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     switcherButtonWrapper: {
-        paddingTop: '11px',
-        paddingLeft: '4px',
+        paddingTop: '13px',
+        paddingLeft: '2px',
         width: '12px',
         height: '12px',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        marginLeft: '2px'
     },
     switcherButton: {
         transition: 'transform .15s ease',
@@ -24,8 +25,12 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     expandButton: {
         transform: ' rotate(-90deg)'
     },
+    treeContainer: {
+        height: '100%'
+    },
     treeWrapper: {
-        border: 'none'
+        border: 'none',
+        height: '100%'
     },
     dropIndicator: {
         '&:before': {
@@ -36,11 +41,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
             top: 0,
             right: '23px',
             bottom: 0,
-            left: '-22px',
+            left: '-16px',
             zIndex: 1
-        },
-        '&>div': {
-            opacity: 0
         }
     },
     dropNotAllowed: {
@@ -55,17 +57,18 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     dragHandle: {
         cursor: 'move',
         color: theme.palette.text.secondary,
-        width: '16px'
+        width: '16px',
+        marginLeft: '5px',
+        marginTop: '3px'
     },
     dragHandleDragging: {
         visibility: 'hidden'
     },
+    titleWrapper: {
+        paddingRight: '11px'
+    },
     /* rc-tree/assets/index.css */
     '@global': {
-        '.rc-tree': {
-            margin: 0,
-            border: '1px solid transparent'
-        },
         '.rc-tree-focused:not(.rc-tree-active-focused)': {
             borderColor: 'cyan'
         },
@@ -119,9 +122,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
             verticalAlign: 'top',
             display: 'none!important'
         },
-        '.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop': {
-            cursor: 'auto'
-        },
         '.rc-tree .rc-tree-treenode span.rc-tree-checkbox': {
             width: '13px',
             height: '13px',
@@ -131,9 +131,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         '.rc-tree .rc-tree-treenode span.rc-tree-checkbox-checked': {
             backgroundPosition: '-14px 0'
         },
-        '.rc-tree .rc-tree-treenode span.rc-tree-checkbox-indeterminate': {
-            backgroundPosition: '-14px -28px'
-        },
+        '.rc-tree .rc-tree-treenode span.rc-tree-checkbox-indeterminate': {},
         '.rc-tree .rc-tree-treenode span.rc-tree-checkbox-disabled': {
             backgroundPosition: '0 -56px'
         },
@@ -201,16 +199,24 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
             marginRight: '2px',
             verticalAlign: 'top'
         },
-        '.rc-tree-indent': {
-            display: 'inline-block',
-            height: 0,
-            verticalAlign: 'bottom'
-        },
         '.rc-tree-indent-unit': {
             display: 'inline-block',
             width: '16px'
         },
         //Custom styles
+        '.rc-tree': {
+            margin: 0
+        },
+        '.rc-tree-indent': {
+            display: 'inline-block',
+            height: 0,
+            verticalAlign: 'bottom',
+            whiteSpace: 'nowrap'
+        },
+        '.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop': {
+            cursor: 'auto',
+            minWidth: '16px'
+        },
         '.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper': {
             position: 'relative',
             display: 'inline-block',
@@ -220,22 +226,21 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
             verticalAlign: 'top',
             cursor: 'pointer',
             height: 'auto',
-            paddingRight: '11px',
             flexGrow: 1
         },
         '.rc-tree .rc-tree-treenode': {
             margin: 0,
             padding: '0 0 0 18px',
-            lineHeight: '24px',
+            lineHeight: '10px',
             listStyle: 'none',
             outline: 0,
+            display: 'flex',
+            minHeight: '28px',
+            zIndex: 0,
             '&:hover': {
                 backgroundColor: 'rgba(0,0,0,0.06)'
             }
         },
-        '.rc-tree-treenode': {
-            display: 'flex'
-        },
         '.rc-tree-icon_loading': {
             display: 'none !important'
         },
@@ -247,13 +252,41 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
             display: 'inline-flex',
             justifyContent: 'center',
             width: '16px',
-            visibility: 'hidden'
+            visibility: 'hidden',
+            lineHeight: '12px'
         },
         '.rc-tree-treenode-draggable:hover .rc-tree-draggable-icon': {
             visibility: 'visible'
         },
         '.rc-tree-switcher-noop': {
             width: '16px'
+        },
+        '.rc-tree-switcher': {
+            position: 'relative',
+            cursor: 'pointer'
+        },
+        '.rc-tree-switcher.rc-tree-switcher_open': {
+            '&:after': {
+                content: '""',
+                position: 'absolute',
+                top: '28px',
+                bottom: 0,
+                width: '1px',
+                left: '7px',
+                backgroundColor: 'rgba(0, 122, 193, 0.3)'
+            }
+        },
+        '.rc-tree-list': {
+            height: '100%'
+        },
+        '.rc-tree-list-holder': {
+            height: '100%'
+        },
+        '.rc-tree-list-scrollbar-vertical': {
+            width: '6px !important'
+        },
+        '.rc-tree-list-scrollbar-thumb': {
+            background: 'rgba(0,0,0,.2) !important'
         }
     }
 }); });

package/cjs/RCTree/types.d.ts

@@ -5,9 +5,10 @@ export type RCTreeNode = {
     expanded?: boolean;
     children?: RCTreeNode[];
 };
-export type InternalRCNode = {
-    value: RCTreeNode;
+export type InternalRCNode<Node extends RCTreeNode = RCTreeNode> = {
+    value: Node;
     pos?: string;
+    expanded?: boolean;
 } & FieldDataNode<{
     key: string;
     title?: string;

package/cjs/RCTree/useDnd.d.ts

@@ -1,28 +1,28 @@
 import { DragEvent } from 'react';
 import { InternalRCNode, RCTreeNode } from './types';
-type Props = {
-    treeData: RCTreeNode[];
+type Props<Node extends RCTreeNode> = {
+    treeData: Node[];
     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;
+    onLoadChildren?: (treeNode: Node) => Promise<void>;
+    onChange?: (node: Node[]) => void;
+    onDrop?: (treeData: Node[], dragNode: Node, parentNode: Node) => void;
     canDrop?: (params: {
-        nextParent: RCTreeNode;
-        node: RCTreeNode;
+        nextParent: Node;
+        node: Node;
     }) => boolean;
     canDrag?: (params: {
-        node: RCTreeNode;
+        node: Node;
     }) => boolean;
 };
-export declare const useDnd: ({ treeData, containerRef, expandNode, onLoadChildren, onChange, onDrop: onDropProp, canDrop, canDrag }: Props) => {
+export declare const useDnd: <Node extends RCTreeNode>({ treeData, containerRef, expandNode, onLoadChildren, onChange, onDrop: onDropProp, canDrop, canDrag }: Props<Node>) => {
     treeProps: {
         onDragStart: ({ node }: {
-            node: InternalRCNode;
+            node: InternalRCNode<Node>;
         }) => void;
         onDragOver: ({ event, node }: {
             event: DragEvent<HTMLDivElement>;
-            node: InternalRCNode;
+            node: InternalRCNode<Node>;
         }) => void;
         onDragLeave: ({ event, node }: {
             event: any;
@@ -31,13 +31,13 @@ export declare const useDnd: ({ treeData, containerRef, expandNode, onLoadChildr
         onDrop: () => void;
         dropIndicatorRender: () => any;
         allowDrop: ({ dragNode, dropNode }: {
-            dragNode: InternalRCNode;
-            dropNode: InternalRCNode;
+            dragNode: InternalRCNode<Node>;
+            dropNode: InternalRCNode<Node>;
         }) => boolean;
     };
-    nodeDraggable: (node: InternalRCNode) => boolean;
-    dropNode: InternalRCNode;
-    dragNode: InternalRCNode;
+    nodeDraggable: (node: InternalRCNode<Node>) => boolean;
+    dropNode: InternalRCNode<Node>;
+    dragNode: InternalRCNode<Node>;
     dropPositionInfo: {
         pos: string;
         dropPosition: number;