@reltio/components 1.4.2062 → 1.4.2064

package/ProfileMatchCard/ProfileMatchCard.test.js

@@ -109,7 +109,7 @@ describe('ProfileMatchCard tests', function () {
                     return [4 /*yield*/, user.click(screen.getAllByTestId('arrow-expand-button')[1])];
                 case 2:
                     _a.sent();
-                    expect(screen.getByTestId('match-rule-info')).toHaveTextContent('- HCP Same Country Code, SpecStatus');
+                    expect(screen.getByTestId('match-rule-info')).toHaveTextContent('• HCP Same Country Code, SpecStatus');
                     return [2 /*return*/];
             }
         });
@@ -141,7 +141,7 @@ describe('ProfileMatchCard tests', function () {
                     return [4 /*yield*/, user.click(screen.getAllByTestId('arrow-expand-button')[1])];
                 case 2:
                     _a.sent();
-                    expect(screen.getByTestId('match-rule-info')).toHaveTextContent('- HCP Same Country Code, SpecStatus90%');
+                    expect(screen.getByTestId('match-rule-info')).toHaveTextContent('• HCP Same Country Code, SpecStatus90%');
                     return [2 /*return*/];
             }
         });

package/RCTree/RCTree.js

@@ -17,7 +17,7 @@ import DragIndicator from '@mui/icons-material/DragIndicator';
 import ReactResizeDetector from 'react-resize-detector';
 import { RCTreeSwitchRenderer } from './RCTreeSwitchRenderer';
 import { RCTreeLevelLines } from './RCTreeLevelLines';
-import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, gatherNodeKeys, getExpandedKeys, isDropIndicatorNode, moveNode, getLevelLinesData, setTreeWidth, calcNodeWidth } from './helper';
+import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, gatherNodeKeys, getExpandedKeys, isDropIndicatorNode, moveNode, getLevelLinesData, calcNodeWidth, getTreeMaxWidth } from './helper';
 import { useDnd } from './useDnd';
 import { useStyles } from './styles';
 var MIN_ROW_HEIGHT = 28;
@@ -60,10 +60,6 @@ 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]);
@@ -103,10 +99,13 @@ export var RCTree = function (_a) {
     var onContainerResize = useCallback(function (width, height) {
         setContainerSize({ width: width, height: height });
     }, []);
+    var scrollWidth = useMemo(function () {
+        return isVirtualized ? Math.max(getTreeMaxWidth(diplayedTreeData), containerSize.width) : null;
+    }, [diplayedTreeData, isVirtualized, containerSize.width]);
     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 || 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;
+            }, 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, scrollWidth: scrollWidth, "data-reltio-id": "rc-tree", ref: treeRef }, treeProps)))) : null;
 };

package/RCTree/helper.d.ts

@@ -32,6 +32,6 @@ export declare const isDropIndicatorNode: (node: InternalRCNode) => boolean;
 export declare const gatherNodeKeys: (node: InternalRCNode) => string[];
 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 getTreeMaxWidth: (data: RCTreeNode[]) => number;
 export declare const calcNodeWidth: (depth: number, containerWidth: number) => number;
 export {};

package/RCTree/helper.js

@@ -224,18 +224,9 @@ var getTreeMaxDepth = function (data, depth) {
             : maxDepth;
     }, depth);
 };
-var getTreeMaxWidth = function (data) {
+export 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;

package/RCTree/styles.js

@@ -232,7 +232,6 @@ export var useStyles = makeStyles(function (theme) { return ({
             listStyle: 'none',
             outline: 0,
             display: 'flex',
-            minHeight: '28px',
             zIndex: 0,
             '&:hover:not(:has([data-rcTree-disable-hover="true"]))': {
                 backgroundColor: 'rgba(0,0,0,0.06)'
@@ -250,7 +249,7 @@ export var useStyles = makeStyles(function (theme) { return ({
             justifyContent: 'center',
             width: '16px',
             visibility: 'hidden',
-            lineHeight: '12px'
+            lineHeight: '13px'
         },
         '.rc-tree-treenode-draggable:hover .rc-tree-draggable-icon': {
             visibility: 'visible'
@@ -282,6 +281,9 @@ export var useStyles = makeStyles(function (theme) { return ({
         '.rc-tree-list-holder-inner': {
             minWidth: 'fit-content'
         },
+        '.rc-tree-list-scrollbar-horizontal': {
+            height: '6px !important'
+        },
         '.rc-tree-list-scrollbar-vertical': {
             width: '6px !important'
         },

package/SimpleMatchRules/SimpleMatchRules.js

@@ -19,7 +19,7 @@ export var SimpleMatchRules = function (_a) {
                     var relevancePercentage = formatRelevanceScore(matchRuleSummary);
                     return (React.createElement("div", { className: styles.matchRuleInfo, key: matchRule.uri, "data-reltio-id": "match-rule-info" },
                         React.createElement("div", { className: styles.matchRuleLabel },
-                            '- ',
+                            "\u2022\u00A0",
                             matchRule.negativeRule && (React.createElement(NegativeRuleIcon, { className: styles.negativeRuleIcon })), "".concat(matchRule.label)),
                         relevancePercentage && (React.createElement(Tooltip, { title: i18n.text('Relevance score') },
                             React.createElement("div", { className: styles.relevanceScore }, relevancePercentage)))));

package/SimpleMatchRules/SimpleMatchRules.test.js

@@ -8,7 +8,7 @@ describe('SimpleMatchRules tests', function () {
             { uri: 'uri2', label: 'label2', negativeRule: {} }
         ];
         render(React.createElement(SimpleMatchRules, { matchRules: matchRules }));
-        var ruleItems = screen.getAllByText(/^-\s+/);
+        var ruleItems = screen.getAllByText(/^•+/);
         expect(ruleItems).toHaveLength(2);
         expect(ruleItems[0]).toHaveTextContent(matchRules[0].label);
         expect(ruleItems[0].querySelector('svg')).not.toBeInTheDocument();

package/cjs/ProfileMatchCard/ProfileMatchCard.test.js

@@ -114,7 +114,7 @@ describe('ProfileMatchCard tests', function () {
                     return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('arrow-expand-button')[1])];
                 case 2:
                     _a.sent();
-                    expect(react_2.screen.getByTestId('match-rule-info')).toHaveTextContent('- HCP Same Country Code, SpecStatus');
+                    expect(react_2.screen.getByTestId('match-rule-info')).toHaveTextContent('• HCP Same Country Code, SpecStatus');
                     return [2 /*return*/];
             }
         });
@@ -146,7 +146,7 @@ describe('ProfileMatchCard tests', function () {
                     return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('arrow-expand-button')[1])];
                 case 2:
                     _a.sent();
-                    expect(react_2.screen.getByTestId('match-rule-info')).toHaveTextContent('- HCP Same Country Code, SpecStatus90%');
+                    expect(react_2.screen.getByTestId('match-rule-info')).toHaveTextContent('• HCP Same Country Code, SpecStatus90%');
                     return [2 /*return*/];
             }
         });

package/cjs/RCTree/RCTree.js

@@ -89,10 +89,6 @@ 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]);
@@ -132,11 +128,14 @@ var RCTree = function (_a) {
     var onContainerResize = (0, react_1.useCallback)(function (width, height) {
         setContainerSize({ width: width, height: height });
     }, []);
+    var scrollWidth = (0, react_1.useMemo)(function () {
+        return isVirtualized ? Math.max((0, helper_1.getTreeMaxWidth)(diplayedTreeData), containerSize.width) : null;
+    }, [diplayedTreeData, isVirtualized, containerSize.width]);
     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 || 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;
+            }, 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, scrollWidth: scrollWidth, "data-reltio-id": "rc-tree", ref: treeRef }, treeProps)))) : null;
 };
 exports.RCTree = RCTree;

package/cjs/RCTree/helper.d.ts

@@ -32,6 +32,6 @@ export declare const isDropIndicatorNode: (node: InternalRCNode) => boolean;
 export declare const gatherNodeKeys: (node: InternalRCNode) => string[];
 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 getTreeMaxWidth: (data: RCTreeNode[]) => number;
 export declare const calcNodeWidth: (depth: number, containerWidth: number) => number;
 export {};

package/cjs/RCTree/helper.js

@@ -20,7 +20,7 @@ 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.calcNodeWidth = exports.setTreeWidth = exports.getLevelLinesData = exports.gatherNodeKeys = exports.isDropIndicatorNode = exports.getDropNodePosition = exports.slideNodePos = exports.getExpandedKeys = exports.moveNode = exports.insertNodeAtPosition = exports.removeNodeAtPosition = exports.changeNodeAtPosition = exports.getDropNodeParent = exports.getParentPos = exports.getNodeAtPosition = exports.convertTreeData = exports.defaultIsLeaf = exports.DEPTH_LEVEL_INDENT = void 0;
+exports.calcNodeWidth = exports.getTreeMaxWidth = exports.getLevelLinesData = exports.gatherNodeKeys = exports.isDropIndicatorNode = exports.getDropNodePosition = exports.slideNodePos = exports.getExpandedKeys = exports.moveNode = exports.insertNodeAtPosition = exports.removeNodeAtPosition = exports.changeNodeAtPosition = exports.getDropNodeParent = exports.getParentPos = exports.getNodeAtPosition = exports.convertTreeData = exports.defaultIsLeaf = exports.DEPTH_LEVEL_INDENT = void 0;
 var ramda_1 = require("ramda");
 var types_1 = require("./types");
 exports.DEPTH_LEVEL_INDENT = 16;
@@ -245,16 +245,7 @@ var getTreeMaxDepth = function (data, 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;
+exports.getTreeMaxWidth = getTreeMaxWidth;
 var calcNodeWidth = function (depth, containerWidth) {
     if (depth === void 0) { depth = 0; }
     var leftIndent = (depth + INITIAL_NODE_DEPTH) * exports.DEPTH_LEVEL_INDENT;

package/cjs/RCTree/styles.js

@@ -235,7 +235,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
             listStyle: 'none',
             outline: 0,
             display: 'flex',
-            minHeight: '28px',
             zIndex: 0,
             '&:hover:not(:has([data-rcTree-disable-hover="true"]))': {
                 backgroundColor: 'rgba(0,0,0,0.06)'
@@ -253,7 +252,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
             justifyContent: 'center',
             width: '16px',
             visibility: 'hidden',
-            lineHeight: '12px'
+            lineHeight: '13px'
         },
         '.rc-tree-treenode-draggable:hover .rc-tree-draggable-icon': {
             visibility: 'visible'
@@ -285,6 +284,9 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         '.rc-tree-list-holder-inner': {
             minWidth: 'fit-content'
         },
+        '.rc-tree-list-scrollbar-horizontal': {
+            height: '6px !important'
+        },
         '.rc-tree-list-scrollbar-vertical': {
             width: '6px !important'
         },

package/cjs/SimpleMatchRules/SimpleMatchRules.js

@@ -25,7 +25,7 @@ var SimpleMatchRules = function (_a) {
                     var relevancePercentage = (0, mdm_sdk_1.formatRelevanceScore)(matchRuleSummary);
                     return (react_1.default.createElement("div", { className: styles.matchRuleInfo, key: matchRule.uri, "data-reltio-id": "match-rule-info" },
                         react_1.default.createElement("div", { className: styles.matchRuleLabel },
-                            '- ',
+                            "\u2022\u00A0",
                             matchRule.negativeRule && (react_1.default.createElement(NegativeRuleIcon_1.default, { className: styles.negativeRuleIcon })), "".concat(matchRule.label)),
                         relevancePercentage && (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Relevance score') },
                             react_1.default.createElement("div", { className: styles.relevanceScore }, relevancePercentage)))));

package/cjs/SimpleMatchRules/SimpleMatchRules.test.js

@@ -13,7 +13,7 @@ describe('SimpleMatchRules tests', function () {
             { uri: 'uri2', label: 'label2', negativeRule: {} }
         ];
         (0, react_2.render)(react_1.default.createElement(SimpleMatchRules_1.SimpleMatchRules, { matchRules: matchRules }));
-        var ruleItems = react_2.screen.getAllByText(/^-\s+/);
+        var ruleItems = react_2.screen.getAllByText(/^•+/);
         expect(ruleItems).toHaveLength(2);
         expect(ruleItems[0]).toHaveTextContent(matchRules[0].label);
         expect(ruleItems[0].querySelector('svg')).not.toBeInTheDocument();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2062",
+  "version": "1.4.2064",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -22,7 +22,7 @@
     "graphology-layout": "0.6.1",
     "graphology-layout-forceatlas2": "0.10.1",
     "memoize-one": "^5.1.0",
-    "rc-tree": "^5.8.8",
+    "rc-tree": "^5.12.4",
     "react-autosuggest": "^9.4.3",
     "react-dnd": "^9.4.0",
     "react-dnd-html5-backend": "^10.0.2",