@reltio/components 1.4.1999 → 1.4.2001

package/esm/RCTree/RCTree.js

@@ -12,26 +12,29 @@ var __assign = (this && this.__assign) || function () {
 import classnames from 'classnames';
 import { assoc, identity } from 'ramda';
 import Tree from 'rc-tree';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import DragIndicator from '@mui/icons-material/DragIndicator';
-import { DefaultSwitchRenderer } from './DefaultSwitchRenderer';
-import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, gatherNodeKeys, getExpandedKeys, isDropIndicatorNode, moveNode, preventNodeDragging } from './helper';
+import ReactResizeDetector from 'react-resize-detector';
+import { RCTreeSwitchRenderer } from './RCTreeSwitchRenderer';
+import { RCTreeLevelLines } from './RCTreeLevelLines';
+import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, gatherNodeKeys, getExpandedKeys, isDropIndicatorNode, moveNode, preventNodeDragging, getLevelLinesData, setTreeWidth, calcNodeWidth } from './helper';
 import { useDnd } from './useDnd';
 import { useStyles } from './styles';
 var MIN_ROW_HEIGHT = 28;
 export 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 : _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 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 : _h, _j = _a.LevelLinesRenderer, LevelLinesRenderer = _j === void 0 ? 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 ? defaultIsLeaf : _l, scrollToNode = _a.scrollToNode, _m = _a.onChange, onChange = _m === void 0 ? identity : _m, height = _a.height;
     var styles = useStyles();
     var treeRef = useRef(null);
     var containerRef = useRef(null);
+    var _o = useState({ width: 0, height: 0 }), containerSize = _o[0], setContainerSize = _o[1];
     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({
+    var _p = useDnd({
         containerRef: containerRef,
         treeData: treeData,
         expandNode: expandNode,
@@ -40,7 +43,7 @@ export 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;
     useEffect(function () {
         if (treeRef.current && scrollToNode) {
             treeRef.current.scrollTo({ key: String(scrollToNode.nodeId) });
@@ -55,9 +58,14 @@ export var RCTree = function (_a) {
         }
         return treeData;
     }, [treeData, dragNode, dropNode, dropPositionInfo]);
+    useEffect(function () {
+        if (isVirtualized)
+            setTreeWidth(containerRef, diplayedTreeData);
+    }, [diplayedTreeData, isVirtualized]);
     var expandedKeys = useMemo(function () {
         return getExpandedKeys(diplayedTreeData);
     }, [diplayedTreeData]);
+    var levelLines = useMemo(function () { return getLevelLinesData(diplayedTreeData); }, [diplayedTreeData]);
     var internalTreeData = useMemo(function () { return convertTreeData({ data: diplayedTreeData, isLeaf: isLeaf }); }, [isLeaf, diplayedTreeData]);
     var handleExpand = useCallback(function (_expandedKeys, data) {
         if (onChange && !dragNode) {
@@ -67,20 +75,28 @@ export var RCTree = function (_a) {
     var renderSwitcherIcon = useCallback(function (node) { return React.createElement(SwitchRenderer, { node: node }); }, []);
     var titleRender = function (node) {
         var _a;
+        var _b, _c;
         var draggedNodes = gatherNodeKeys(dragNode);
-        return (React.createElement("div", { className: classnames((_a = {},
+        var width = 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.createElement("div", { className: classnames(styles.titleWrapper, (_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));
+                _a)), onMouseDown: preventNodeDragging, style: { width: width } },
+            React.createElement(LevelLinesRenderer, { levelLine: levelLines[node.key] }),
+            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 },
+    var onContainerResize = useCallback(function (width, height) {
+        setContainerSize({ width: width, height: height });
+    }, []);
+    return diplayedTreeData ? (React.createElement("div", { ref: containerRef, className: classnames(styles.treeContainer) },
+        React.createElement(ReactResizeDetector, { handleWidth: true, handleHeight: true, onResize: onContainerResize }),
         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;
+            }, virtual: isVirtualized, itemHeight: minItemHeight, height: height || containerSize.height, onExpand: handleExpand, showIcon: false, switcherIcon: renderSwitcherIcon, defaultExpandAll: defaultExpandAll, expandedKeys: expandedKeys, 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/RCTreeLevelLines.d.ts

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

package/esm/RCTree/RCTreeLevelLines.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classnames from 'classnames';
+import { DEPTH_LEVEL_INDENT } from './helper';
+import { useStyles } from './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 = useStyles({});
+    return (React.createElement("div", { className: classnames(styles.levelLine, (_b = {},
+            _b[styles.showLine] = needDrawLine,
+            _b[styles.lastLevelLine] = isLastLevelLine,
+            _b[styles.horizontalLine] = drawHorizontalLine,
+            _b)) }));
+};
+export 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 = useStyles({ level: level });
+    return (React.createElement("div", { className: styles.levelLines, style: { left: "-".concat(DEPTH_LEVEL_INDENT * level, "px") } }, needDrawLines
+        .map(function (needDrawLine, index) {
+        return React.createElement(LevelLine, { key: index, needDrawLine: needDrawLine });
+    })
+        .concat(React.createElement(LevelLine, { key: level, needDrawLine: true, drawHorizontalLine: true, isLastLevelLine: isLast }))));
+};

package/esm/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/esm/RCTree/{DefaultSwitchRenderer.js → RCTreeSwitchRenderer.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { useStyles } from './styles';
-export var DefaultSwitchRenderer = function (_a) {
+export var RCTreeSwitchRenderer = function (_a) {
     var node = _a.node;
     var styles = useStyles();
     return !node.isLeaf ? (React.createElement("div", { className: styles.switcherButtonWrapper },

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

@@ -20,8 +20,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { always, assoc, assocPath, ifElse, intersperse, insert, last, map, pipe, path, remove, split } from 'ramda';
 import { AddNodePosition } from './types';
-var DEPTH_LEVEL_INDENT = 16;
+export var 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;
 export var defaultIsLeaf = function (_a) {
     var _b = _a.children, children = _b === void 0 ? [] : _b;
     return !children.length;
@@ -191,3 +194,43 @@ export var gatherNodeKeys = function (node) {
 export var preventNodeDragging = function (event) {
     event.preventDefault();
 };
+export 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, []);
+};
+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) * DEPTH_LEVEL_INDENT + NODE_TITLE_MAX_WIDTH + CONTAINER_PADDINGS;
+};
+export 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");
+    }
+};
+export var calcNodeWidth = function (depth, containerWidth) {
+    if (depth === void 0) { depth = 0; }
+    var leftIndent = (depth + INITIAL_NODE_DEPTH) * DEPTH_LEVEL_INDENT;
+    var paddings = leftIndent + CONTAINER_PADDINGS;
+    return Math.max(containerWidth - paddings, NODE_TITLE_MAX_WIDTH);
+};

package/esm/RCTree/index.d.ts

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

package/esm/RCTree/index.js

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

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

@@ -0,0 +1,50 @@
+import { makeStyles } from '@mui/styles';
+import { DEPTH_LEVEL_INDENT } from './helper';
+export var useStyles = makeStyles(function () { return ({
+    levelLines: function (_a) {
+        var level = _a.level;
+        return ({
+            position: 'absolute',
+            left: "-".concat(level * 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/esm/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/esm/RCTree/styles.js

@@ -1,11 +1,12 @@
 import { makeStyles } from '@mui/styles';
 export var useStyles = 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',
@@ -21,8 +22,12 @@ export var useStyles = makeStyles(function (theme) { return ({
     expandButton: {
         transform: ' rotate(-90deg)'
     },
+    treeContainer: {
+        height: '100%'
+    },
     treeWrapper: {
-        border: 'none'
+        border: 'none',
+        height: '100%'
     },
     dropIndicator: {
         '&:before': {
@@ -33,11 +38,8 @@ export var useStyles = makeStyles(function (theme) { return ({
             top: 0,
             right: '23px',
             bottom: 0,
-            left: '-22px',
+            left: '-16px',
             zIndex: 1
-        },
-        '&>div': {
-            opacity: 0
         }
     },
     dropNotAllowed: {
@@ -52,17 +54,18 @@ export var useStyles = 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'
         },
@@ -116,9 +119,6 @@ export var useStyles = 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',
@@ -128,9 +128,7 @@ export var useStyles = 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'
         },
@@ -198,16 +196,24 @@ export var useStyles = 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',
@@ -217,22 +223,21 @@ export var useStyles = 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'
         },
@@ -244,13 +249,41 @@ export var useStyles = 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/esm/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/esm/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;

package/esm/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts

@@ -0,0 +1,36 @@
+import { Entity, Metadata } from '@reltio/mdm-sdk';
+export declare const createEntity: () => Entity;
+export declare const createMetadata: () => Metadata;
+export declare const selectedAttributeTypes: ({
+    description: string;
+    label: string;
+    name: string;
+    type: string;
+    uri: string;
+    attributes?: undefined;
+    access?: undefined;
+    referencedAttributeURIs?: undefined;
+} | {
+    label: string;
+    name: string;
+    type: string;
+    uri: string;
+    attributes: {
+        label: string;
+        name: string;
+        type: string;
+        uri: string;
+    }[];
+    description?: undefined;
+    access?: undefined;
+    referencedAttributeURIs?: undefined;
+} | {
+    label: string;
+    name: string;
+    access: string[];
+    type: string;
+    referencedAttributeURIs: string[];
+    uri: string;
+    description?: undefined;
+    attributes?: undefined;
+})[];