@reltio/components 1.4.1949 → 1.4.1951

package/cjs/RCTree/RCTree.d.ts

@@ -14,6 +14,7 @@ type Props = {
     className?: string;
     minItemHeight?: number;
     isLeaf?: (node: TreeNodeProps & Record<string, unknown>) => boolean;
+    onChange?: (node: RCTreeNode[]) => void;
 };
-export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf }: Props) => React.JSX.Element;
+export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, onChange, }: Props) => React.JSX.Element;
 export {};

package/cjs/RCTree/RCTree.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RCTree = void 0;
 var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
 var rc_tree_1 = __importDefault(require("rc-tree"));
 var classnames_1 = __importDefault(require("classnames"));
 var DefaultSwitchRenderer_1 = require("./DefaultSwitchRenderer");
@@ -35,7 +36,7 @@ var helper_1 = require("./helper");
 var styles_1 = require("./styles");
 var MIN_ROW_HEIGHT = 28;
 var RCTree = function (_a) {
-    var treeData = _a.treeData, _b = _a.isVirtualized, isVirtualized = _b === void 0 ? true : _b, _c = _a.canDrag, canDrag = _c === void 0 ? false : _c, _d = _a.canDrop, canDrop = _d === void 0 ? function () { return false; } : _d, onLoadChildren = _a.onLoadChildren, height = _a.height, _e = _a.defaultExpandAll, defaultExpandAll = _e === void 0 ? false : _e, _f = _a.SwitchRenderer, SwitchRenderer = _f === void 0 ? DefaultSwitchRenderer_1.DefaultSwitchRenderer : _f, className = _a.className, renderNode = _a.renderNode, _g = _a.minItemHeight, minItemHeight = _g === void 0 ? MIN_ROW_HEIGHT : _g, _h = _a.isLeaf, isLeaf = _h === void 0 ? helper_1.defaultIsLeaf : _h;
+    var treeData = _a.treeData, _b = _a.isVirtualized, isVirtualized = _b === void 0 ? true : _b, _c = _a.canDrag, canDrag = _c === void 0 ? false : _c, _d = _a.canDrop, canDrop = _d === void 0 ? function () { return false; } : _d, onLoadChildren = _a.onLoadChildren, height = _a.height, _e = _a.defaultExpandAll, defaultExpandAll = _e === void 0 ? false : _e, _f = _a.SwitchRenderer, SwitchRenderer = _f === void 0 ? DefaultSwitchRenderer_1.DefaultSwitchRenderer : _f, className = _a.className, renderNode = _a.renderNode, _g = _a.minItemHeight, minItemHeight = _g === void 0 ? MIN_ROW_HEIGHT : _g, _h = _a.isLeaf, isLeaf = _h === void 0 ? helper_1.defaultIsLeaf : _h, _j = _a.onChange, onChange = _j === void 0 ? ramda_1.identity : _j;
     var styles = (0, styles_1.useStyles)();
     var internalTreeData = (0, react_1.useMemo)(function () { return (0, helper_1.convertTreeData)({ data: treeData, isLeaf: isLeaf }); }, [isLeaf, treeData]);
     // eslint-disable-next-line no-unused-vars
@@ -56,7 +57,18 @@ var RCTree = function (_a) {
         var dropPosition = _a.dropPosition, dropLevelOffset = _a.dropLevelOffset, indent = _a.indent, prefixCls = _a.prefixCls, direction = _a.direction;
         // TODO: implement
     };
+    var handleExpand = (0, react_1.useCallback)(function (_expandedKeys, data) {
+        if (onChange) {
+            var changeNode = (0, ramda_1.assoc)('expanded', data.expanded);
+            var newTreeData = (0, helper_1.changeNodeAtPosition)(treeData, data.node.pos, changeNode);
+            if (newTreeData)
+                onChange(newTreeData);
+        }
+    }, [treeData, onChange]);
+    var expandedKeys = (0, react_1.useMemo)(function () {
+        return (0, helper_1.getExpandedKeys)(treeData);
+    }, [treeData]);
     var renderSwitcherIcon = (0, react_1.useCallback)(function (node) { return react_1.default.createElement(SwitchRenderer, { node: node }); }, []);
-    return internalTreeData ? (react_1.default.createElement(rc_tree_1.default, { allowDrop: canDrop, draggable: canDrag, onDragStart: function () { }, onDragEnter: handleDragEnter, onDrop: handleDrop, virtual: isVirtualized, itemHeight: minItemHeight, height: height, showIcon: false, showLine: true, switcherIcon: renderSwitcherIcon, defaultExpandAll: defaultExpandAll, className: (0, classnames_1.default)(className, styles.treeWrapper), titleRender: renderNode ? function (node) { return renderNode(node.value); } : undefined, treeData: internalTreeData, selectable: false, loadData: onLoadChildren ? function (node) { return onLoadChildren(node.value); } : undefined, "data-reltio-id": "rc-tree" })) : null;
+    return internalTreeData ? (react_1.default.createElement(rc_tree_1.default, { allowDrop: canDrop, draggable: canDrag, onDragStart: function () { }, onDragEnter: handleDragEnter, onDrop: handleDrop, virtual: isVirtualized, itemHeight: minItemHeight, height: height, onExpand: handleExpand, showIcon: false, showLine: true, expandedKeys: expandedKeys, switcherIcon: renderSwitcherIcon, defaultExpandAll: defaultExpandAll, className: (0, classnames_1.default)(className, styles.treeWrapper), titleRender: renderNode ? function (node) { return renderNode(node.value); } : undefined, treeData: internalTreeData, selectable: false, loadData: onLoadChildren ? function (node) { return onLoadChildren(node.value); } : undefined, "data-reltio-id": "rc-tree" })) : null;
 };
 exports.RCTree = RCTree;

package/cjs/RCTree/helper.d.ts

@@ -1,12 +1,13 @@
-import { TreeNodeProps } from 'rc-tree';
-import { RCTreeNode } from './types';
+import { InternalRCNode, RCTreeNode } from './types';
 export declare const defaultIsLeaf: ({ children }: {
     children?: unknown[];
 }) => boolean;
-type Props = {
-    data: Array<RCTreeNode & Record<string, unknown>>;
+type ConvertTreeDataProps<T> = {
+    data: T[];
     parentPath?: number[];
-    isLeaf: (node: TreeNodeProps & Record<string, unknown>) => boolean;
+    isLeaf: (node: T) => boolean;
 };
-export declare const convertTreeData: ({ data, parentPath, isLeaf }: Props) => any;
+export declare const convertTreeData: ({ data, parentPath, isLeaf }: ConvertTreeDataProps<RCTreeNode>) => InternalRCNode[];
+export declare const changeNodeAtPosition: (treeData: RCTreeNode[], pos: string, changeNode: (node: RCTreeNode) => RCTreeNode) => any;
+export declare const getExpandedKeys: (nodes?: RCTreeNode[]) => any;
 export {};

package/cjs/RCTree/helper.js

@@ -20,7 +20,8 @@ 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.convertTreeData = exports.defaultIsLeaf = void 0;
+exports.getExpandedKeys = exports.changeNodeAtPosition = exports.convertTreeData = exports.defaultIsLeaf = void 0;
+var ramda_1 = require("ramda");
 var defaultIsLeaf = function (_a) {
     var _b = _a.children, children = _b === void 0 ? [] : _b;
     return !children.length;
@@ -31,10 +32,26 @@ var convertTreeData = function (_a) {
     return data.map(function (item) {
         var _a;
         var path = __spreadArray(__spreadArray([], parentPath, true), [item.nodeId], false);
-        return __assign({ key: item.nodeId, value: __assign(__assign({}, item), { path: path }), title: (_a = item.title) !== null && _a !== void 0 ? _a : '', isLeaf: isLeaf(item) }, (item.children &&
+        return __assign({ key: String(item.nodeId), title: (_a = item.title) !== null && _a !== void 0 ? _a : '', value: __assign(__assign({}, item), { path: path }), isLeaf: isLeaf(item) }, (item.children &&
             item.children.length && {
             children: (0, exports.convertTreeData)({ data: item.children, parentPath: path, isLeaf: isLeaf })
         }));
     });
 };
 exports.convertTreeData = convertTreeData;
+var getPathFromPosition = (0, ramda_1.pipe)((0, ramda_1.split)('-'), (0, ramda_1.remove)(0, 1), (0, ramda_1.map)(Number), (0, ramda_1.intersperse)('children'));
+var changeNodeAtPosition = function (treeData, pos, changeNode) {
+    var nodePath = getPathFromPosition(pos);
+    var node = (0, ramda_1.path)(nodePath, treeData);
+    return node ? (0, ramda_1.assocPath)(nodePath, changeNode(node), treeData) : null;
+};
+exports.changeNodeAtPosition = changeNodeAtPosition;
+var getExpandedKeys = function (nodes) {
+    if (nodes === void 0) { nodes = []; }
+    return nodes.reduce(function (expandedKeys, node) {
+        return expandedKeys
+            .concat(node.expanded ? [String(node.nodeId)] : [])
+            .concat((0, exports.getExpandedKeys)(node.children));
+    }, []);
+};
+exports.getExpandedKeys = getExpandedKeys;

package/cjs/RCTree/styles.js

@@ -8,7 +8,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         paddingLeft: '6px',
         width: '16px',
         height: '16px',
-        backgroundColor: 'white',
         cursor: 'pointer'
     },
     switcherButton: {
@@ -37,14 +36,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         '.rc-tree-focused:not(.rc-tree-active-focused)': {
             borderColor: 'cyan'
         },
-        '.rc-tree .rc-tree-treenode': {
-            margin: 0,
-            padding: 0,
-            lineHeight: '24px',
-            whiteSpace: 'nowrap',
-            listStyle: 'none',
-            outline: 0
-        },
         '.rc-tree .rc-tree-treenode .draggable': {
             color: '#333',
             userSelect: 'none'
@@ -78,17 +69,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
             margin: 0,
             padding: '0 0 0 18px'
         },
-        '.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper': {
-            position: 'relative',
-            display: 'inline-block',
-            height: '24px',
-            margin: 0,
-            padding: 0,
-            textDecoration: 'none',
-            verticalAlign: 'top',
-            cursor: 'pointer'
-        },
-        '.rc-tree .rc-tree-treenode span.rc-tree-switcher, .rc-tree .rc-tree-treenode span.rc-tree-checkbox, .rc-tree .rc-tree-treenode span.rc-tree-iconEle': {
+        '.rc-tree .rc-tree-treenode span.rc-tree-checkbox, .rc-tree .rc-tree-treenode span.rc-tree-iconEle': {
             display: 'inline-block',
             width: '16px',
             height: '16px',
@@ -114,12 +95,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         '.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop': {
             cursor: 'auto'
         },
-        '.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open': {
-            backgroundPosition: '-93px -56px'
-        },
-        '.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close': {
-            backgroundPosition: '-75px -56px'
-        },
         '.rc-tree .rc-tree-treenode span.rc-tree-checkbox': {
             width: '13px',
             height: '13px',
@@ -204,9 +179,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
             marginRight: '2px',
             verticalAlign: 'top'
         },
-        '.rc-tree-title': {
-            display: 'inline-block'
-        },
         '.rc-tree-indent': {
             display: 'inline-block',
             height: 0,
@@ -222,14 +194,37 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
             width: '16px'
         },
         //Custom styles
-        '.rc-tree-node-content-wrapper': {
-            height: 'auto !important'
+        '.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper': {
+            position: 'relative',
+            display: 'inline-block',
+            margin: 0,
+            padding: 0,
+            textDecoration: 'none',
+            verticalAlign: 'top',
+            cursor: 'pointer',
+            height: 'auto',
+            width: '100%',
+            paddingRight: '11px'
+        },
+        '.rc-tree .rc-tree-treenode': {
+            margin: 0,
+            padding: '0 0 0 18px',
+            lineHeight: '24px',
+            listStyle: 'none',
+            outline: 0,
+            '&:hover': {
+                backgroundColor: 'rgba(0,0,0,0.06)'
+            },
         },
         '.rc-tree-treenode': {
             display: 'flex'
         },
         '.rc-tree-icon_loading': {
             display: 'none !important'
-        }
+        },
+        '.rc-tree-title': {
+            display: 'inline-block',
+            width: '100%'
+        },
     }
 }); });

package/cjs/RCTree/types.d.ts

@@ -1,4 +1,13 @@
+import { FieldDataNode } from 'rc-tree';
 export type RCTreeNode = {
     nodeId: number;
+    title?: string;
+    expanded?: boolean;
     children?: RCTreeNode[];
 };
+export type InternalRCNode = {
+    value: RCTreeNode;
+} & FieldDataNode<{
+    key: string;
+    title?: string;
+}>;

package/esm/RCTree/RCTree.d.ts

@@ -14,6 +14,7 @@ type Props = {
     className?: string;
     minItemHeight?: number;
     isLeaf?: (node: TreeNodeProps & Record<string, unknown>) => boolean;
+    onChange?: (node: RCTreeNode[]) => void;
 };
-export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf }: Props) => React.JSX.Element;
+export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, onChange, }: Props) => React.JSX.Element;
 export {};

package/esm/RCTree/RCTree.js

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
+import { assoc, identity } from 'ramda';
 import Tree from 'rc-tree';
 import classnames from 'classnames';
 import { DefaultSwitchRenderer } from './DefaultSwitchRenderer';
-import { convertTreeData, defaultIsLeaf } from './helper';
+import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, getExpandedKeys } from './helper';
 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;
+    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, _j = _a.onChange, onChange = _j === void 0 ? identity : _j;
     var styles = useStyles();
     var internalTreeData = useMemo(function () { return convertTreeData({ data: treeData, isLeaf: isLeaf }); }, [isLeaf, treeData]);
     // eslint-disable-next-line no-unused-vars
@@ -27,6 +28,17 @@ export var RCTree = 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);
+        }
+    }, [treeData, onChange]);
+    var expandedKeys = useMemo(function () {
+        return getExpandedKeys(treeData);
+    }, [treeData]);
     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, showIcon: false, showLine: true, 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" })) : null;
+    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" })) : null;
 };

package/esm/RCTree/helper.d.ts

@@ -1,12 +1,13 @@
-import { TreeNodeProps } from 'rc-tree';
-import { RCTreeNode } from './types';
+import { InternalRCNode, RCTreeNode } from './types';
 export declare const defaultIsLeaf: ({ children }: {
     children?: unknown[];
 }) => boolean;
-type Props = {
-    data: Array<RCTreeNode & Record<string, unknown>>;
+type ConvertTreeDataProps<T> = {
+    data: T[];
     parentPath?: number[];
-    isLeaf: (node: TreeNodeProps & Record<string, unknown>) => boolean;
+    isLeaf: (node: T) => boolean;
 };
-export declare const convertTreeData: ({ data, parentPath, isLeaf }: Props) => any;
+export declare const convertTreeData: ({ data, parentPath, isLeaf }: ConvertTreeDataProps<RCTreeNode>) => InternalRCNode[];
+export declare const changeNodeAtPosition: (treeData: RCTreeNode[], pos: string, changeNode: (node: RCTreeNode) => RCTreeNode) => any;
+export declare const getExpandedKeys: (nodes?: RCTreeNode[]) => any;
 export {};

package/esm/RCTree/helper.js

@@ -18,6 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+import { assocPath, intersperse, map, pipe, path, remove, split } from 'ramda';
 export var defaultIsLeaf = function (_a) {
     var _b = _a.children, children = _b === void 0 ? [] : _b;
     return !children.length;
@@ -27,9 +28,23 @@ export var convertTreeData = function (_a) {
     return data.map(function (item) {
         var _a;
         var path = __spreadArray(__spreadArray([], parentPath, true), [item.nodeId], false);
-        return __assign({ key: item.nodeId, value: __assign(__assign({}, item), { path: path }), title: (_a = item.title) !== null && _a !== void 0 ? _a : '', isLeaf: isLeaf(item) }, (item.children &&
+        return __assign({ key: String(item.nodeId), title: (_a = item.title) !== null && _a !== void 0 ? _a : '', value: __assign(__assign({}, item), { path: path }), isLeaf: isLeaf(item) }, (item.children &&
             item.children.length && {
             children: convertTreeData({ data: item.children, parentPath: path, isLeaf: isLeaf })
         }));
     });
 };
+var getPathFromPosition = pipe(split('-'), remove(0, 1), map(Number), intersperse('children'));
+export var changeNodeAtPosition = function (treeData, pos, changeNode) {
+    var nodePath = getPathFromPosition(pos);
+    var node = path(nodePath, treeData);
+    return node ? assocPath(nodePath, changeNode(node), treeData) : null;
+};
+export var getExpandedKeys = function (nodes) {
+    if (nodes === void 0) { nodes = []; }
+    return nodes.reduce(function (expandedKeys, node) {
+        return expandedKeys
+            .concat(node.expanded ? [String(node.nodeId)] : [])
+            .concat(getExpandedKeys(node.children));
+    }, []);
+};

package/esm/RCTree/styles.js

@@ -5,7 +5,6 @@ export var useStyles = makeStyles(function () { return ({
         paddingLeft: '6px',
         width: '16px',
         height: '16px',
-        backgroundColor: 'white',
         cursor: 'pointer'
     },
     switcherButton: {
@@ -34,14 +33,6 @@ export var useStyles = makeStyles(function () { return ({
         '.rc-tree-focused:not(.rc-tree-active-focused)': {
             borderColor: 'cyan'
         },
-        '.rc-tree .rc-tree-treenode': {
-            margin: 0,
-            padding: 0,
-            lineHeight: '24px',
-            whiteSpace: 'nowrap',
-            listStyle: 'none',
-            outline: 0
-        },
         '.rc-tree .rc-tree-treenode .draggable': {
             color: '#333',
             userSelect: 'none'
@@ -75,17 +66,7 @@ export var useStyles = makeStyles(function () { return ({
             margin: 0,
             padding: '0 0 0 18px'
         },
-        '.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper': {
-            position: 'relative',
-            display: 'inline-block',
-            height: '24px',
-            margin: 0,
-            padding: 0,
-            textDecoration: 'none',
-            verticalAlign: 'top',
-            cursor: 'pointer'
-        },
-        '.rc-tree .rc-tree-treenode span.rc-tree-switcher, .rc-tree .rc-tree-treenode span.rc-tree-checkbox, .rc-tree .rc-tree-treenode span.rc-tree-iconEle': {
+        '.rc-tree .rc-tree-treenode span.rc-tree-checkbox, .rc-tree .rc-tree-treenode span.rc-tree-iconEle': {
             display: 'inline-block',
             width: '16px',
             height: '16px',
@@ -111,12 +92,6 @@ export var useStyles = makeStyles(function () { return ({
         '.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop': {
             cursor: 'auto'
         },
-        '.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open': {
-            backgroundPosition: '-93px -56px'
-        },
-        '.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close': {
-            backgroundPosition: '-75px -56px'
-        },
         '.rc-tree .rc-tree-treenode span.rc-tree-checkbox': {
             width: '13px',
             height: '13px',
@@ -201,9 +176,6 @@ export var useStyles = makeStyles(function () { return ({
             marginRight: '2px',
             verticalAlign: 'top'
         },
-        '.rc-tree-title': {
-            display: 'inline-block'
-        },
         '.rc-tree-indent': {
             display: 'inline-block',
             height: 0,
@@ -219,14 +191,37 @@ export var useStyles = makeStyles(function () { return ({
             width: '16px'
         },
         //Custom styles
-        '.rc-tree-node-content-wrapper': {
-            height: 'auto !important'
+        '.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper': {
+            position: 'relative',
+            display: 'inline-block',
+            margin: 0,
+            padding: 0,
+            textDecoration: 'none',
+            verticalAlign: 'top',
+            cursor: 'pointer',
+            height: 'auto',
+            width: '100%',
+            paddingRight: '11px'
+        },
+        '.rc-tree .rc-tree-treenode': {
+            margin: 0,
+            padding: '0 0 0 18px',
+            lineHeight: '24px',
+            listStyle: 'none',
+            outline: 0,
+            '&:hover': {
+                backgroundColor: 'rgba(0,0,0,0.06)'
+            },
         },
         '.rc-tree-treenode': {
             display: 'flex'
         },
         '.rc-tree-icon_loading': {
             display: 'none !important'
-        }
+        },
+        '.rc-tree-title': {
+            display: 'inline-block',
+            width: '100%'
+        },
     }
 }); });

package/esm/RCTree/types.d.ts

@@ -1,4 +1,13 @@
+import { FieldDataNode } from 'rc-tree';
 export type RCTreeNode = {
     nodeId: number;
+    title?: string;
+    expanded?: boolean;
     children?: RCTreeNode[];
 };
+export type InternalRCNode = {
+    value: RCTreeNode;
+} & FieldDataNode<{
+    key: string;
+    title?: string;
+}>;

package/package.json

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