@reltio/components 1.4.2063 → 1.4.2065

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/RCTree/RCTree.js +5 -6
  2. package/RCTree/helper.d.ts +1 -1
  3. package/RCTree/helper.js +1 -10
  4. package/RCTree/styles.js +4 -2
  5. package/cjs/RCTree/RCTree.js +4 -5
  6. package/cjs/RCTree/helper.d.ts +1 -1
  7. package/cjs/RCTree/helper.js +2 -11
  8. package/cjs/RCTree/styles.js +4 -2
  9. package/package.json +3 -3
package/RCTree/RCTree.js CHANGED
@@ -17,7 +17,7 @@ import DragIndicator from '@mui/icons-material/DragIndicator';
17
17
  import ReactResizeDetector from 'react-resize-detector';
18
18
  import { RCTreeSwitchRenderer } from './RCTreeSwitchRenderer';
19
19
  import { RCTreeLevelLines } from './RCTreeLevelLines';
20
- import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, gatherNodeKeys, getExpandedKeys, isDropIndicatorNode, moveNode, getLevelLinesData, setTreeWidth, calcNodeWidth } from './helper';
20
+ import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, gatherNodeKeys, getExpandedKeys, isDropIndicatorNode, moveNode, getLevelLinesData, calcNodeWidth, getTreeMaxWidth } from './helper';
21
21
  import { useDnd } from './useDnd';
22
22
  import { useStyles } from './styles';
23
23
  var MIN_ROW_HEIGHT = 28;
@@ -60,10 +60,6 @@ export var RCTree = function (_a) {
60
60
  }
61
61
  return treeData;
62
62
  }, [treeData, dragNode, dropNode, dropPositionInfo]);
63
- useEffect(function () {
64
- if (isVirtualized)
65
- setTreeWidth(containerRef, diplayedTreeData);
66
- }, [diplayedTreeData, isVirtualized]);
67
63
  var expandedKeys = useMemo(function () {
68
64
  return getExpandedKeys(diplayedTreeData);
69
65
  }, [diplayedTreeData]);
@@ -103,10 +99,13 @@ export var RCTree = function (_a) {
103
99
  var onContainerResize = useCallback(function (width, height) {
104
100
  setContainerSize({ width: width, height: height });
105
101
  }, []);
102
+ var scrollWidth = useMemo(function () {
103
+ return isVirtualized ? Math.max(getTreeMaxWidth(diplayedTreeData), containerSize.width) : null;
104
+ }, [diplayedTreeData, isVirtualized, containerSize.width]);
106
105
  return diplayedTreeData ? (React.createElement("div", { ref: containerRef, className: classnames(styles.treeContainer) },
107
106
  React.createElement(ReactResizeDetector, { handleWidth: true, handleHeight: true, onResize: onContainerResize }),
108
107
  React.createElement(Tree, __assign({ draggable: {
109
108
  icon: dragHandle,
110
109
  nodeDraggable: nodeDraggable
111
- }, 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;
110
+ }, 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;
112
111
  };
package/RCTree/helper.d.ts CHANGED
@@ -32,6 +32,6 @@ export declare const isDropIndicatorNode: (node: InternalRCNode) => boolean;
32
32
  export declare const gatherNodeKeys: (node: InternalRCNode) => string[];
33
33
  type LevelLinesData = Record<string, [boolean[], boolean]>;
34
34
  export declare const getLevelLinesData: (treeData: RCTreeNode[]) => LevelLinesData;
35
- export declare const setTreeWidth: (container: React.RefObject<HTMLDivElement>, data: RCTreeNode[]) => void;
35
+ export declare const getTreeMaxWidth: (data: RCTreeNode[]) => number;
36
36
  export declare const calcNodeWidth: (depth: number, containerWidth: number) => number;
37
37
  export {};
package/RCTree/helper.js CHANGED
@@ -224,18 +224,9 @@ var getTreeMaxDepth = function (data, depth) {
224
224
  : maxDepth;
225
225
  }, depth);
226
226
  };
227
- var getTreeMaxWidth = function (data) {
227
+ export var getTreeMaxWidth = function (data) {
228
228
  return getTreeMaxDepth(data) * DEPTH_LEVEL_INDENT + NODE_TITLE_MAX_WIDTH + CONTAINER_PADDINGS;
229
229
  };
230
- export var setTreeWidth = function (container, data) {
231
- var _a, _b;
232
- if (container.current) {
233
- var maxTreeWidth = getTreeMaxWidth(data);
234
- 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;
235
- if (list)
236
- list.style.minWidth = "".concat(maxTreeWidth, "px");
237
- }
238
- };
239
230
  export var calcNodeWidth = function (depth, containerWidth) {
240
231
  if (depth === void 0) { depth = 0; }
241
232
  var leftIndent = (depth + INITIAL_NODE_DEPTH) * DEPTH_LEVEL_INDENT;
package/RCTree/styles.js CHANGED
@@ -232,7 +232,6 @@ export var useStyles = makeStyles(function (theme) { return ({
232
232
  listStyle: 'none',
233
233
  outline: 0,
234
234
  display: 'flex',
235
- minHeight: '28px',
236
235
  zIndex: 0,
237
236
  '&:hover:not(:has([data-rcTree-disable-hover="true"]))': {
238
237
  backgroundColor: 'rgba(0,0,0,0.06)'
@@ -250,7 +249,7 @@ export var useStyles = makeStyles(function (theme) { return ({
250
249
  justifyContent: 'center',
251
250
  width: '16px',
252
251
  visibility: 'hidden',
253
- lineHeight: '12px'
252
+ lineHeight: '13px'
254
253
  },
255
254
  '.rc-tree-treenode-draggable:hover .rc-tree-draggable-icon': {
256
255
  visibility: 'visible'
@@ -282,6 +281,9 @@ export var useStyles = makeStyles(function (theme) { return ({
282
281
  '.rc-tree-list-holder-inner': {
283
282
  minWidth: 'fit-content'
284
283
  },
284
+ '.rc-tree-list-scrollbar-horizontal': {
285
+ height: '6px !important'
286
+ },
285
287
  '.rc-tree-list-scrollbar-vertical': {
286
288
  width: '6px !important'
287
289
  },
package/cjs/RCTree/RCTree.js CHANGED
@@ -89,10 +89,6 @@ var RCTree = function (_a) {
89
89
  }
90
90
  return treeData;
91
91
  }, [treeData, dragNode, dropNode, dropPositionInfo]);
92
- (0, react_1.useEffect)(function () {
93
- if (isVirtualized)
94
- (0, helper_1.setTreeWidth)(containerRef, diplayedTreeData);
95
- }, [diplayedTreeData, isVirtualized]);
96
92
  var expandedKeys = (0, react_1.useMemo)(function () {
97
93
  return (0, helper_1.getExpandedKeys)(diplayedTreeData);
98
94
  }, [diplayedTreeData]);
@@ -132,11 +128,14 @@ var RCTree = function (_a) {
132
128
  var onContainerResize = (0, react_1.useCallback)(function (width, height) {
133
129
  setContainerSize({ width: width, height: height });
134
130
  }, []);
131
+ var scrollWidth = (0, react_1.useMemo)(function () {
132
+ return isVirtualized ? Math.max((0, helper_1.getTreeMaxWidth)(diplayedTreeData), containerSize.width) : null;
133
+ }, [diplayedTreeData, isVirtualized, containerSize.width]);
135
134
  return diplayedTreeData ? (react_1.default.createElement("div", { ref: containerRef, className: (0, classnames_1.default)(styles.treeContainer) },
136
135
  react_1.default.createElement(react_resize_detector_1.default, { handleWidth: true, handleHeight: true, onResize: onContainerResize }),
137
136
  react_1.default.createElement(rc_tree_1.default, __assign({ draggable: {
138
137
  icon: dragHandle,
139
138
  nodeDraggable: nodeDraggable
140
- }, 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;
139
+ }, 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;
141
140
  };
142
141
  exports.RCTree = RCTree;
package/cjs/RCTree/helper.d.ts CHANGED
@@ -32,6 +32,6 @@ export declare const isDropIndicatorNode: (node: InternalRCNode) => boolean;
32
32
  export declare const gatherNodeKeys: (node: InternalRCNode) => string[];
33
33
  type LevelLinesData = Record<string, [boolean[], boolean]>;
34
34
  export declare const getLevelLinesData: (treeData: RCTreeNode[]) => LevelLinesData;
35
- export declare const setTreeWidth: (container: React.RefObject<HTMLDivElement>, data: RCTreeNode[]) => void;
35
+ export declare const getTreeMaxWidth: (data: RCTreeNode[]) => number;
36
36
  export declare const calcNodeWidth: (depth: number, containerWidth: number) => number;
37
37
  export {};
package/cjs/RCTree/helper.js CHANGED
@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
20
20
  return to.concat(ar || Array.prototype.slice.call(from));
21
21
  };
22
22
  Object.defineProperty(exports, "__esModule", { value: true });
23
- 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;
23
+ 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;
24
24
  var ramda_1 = require("ramda");
25
25
  var types_1 = require("./types");
26
26
  exports.DEPTH_LEVEL_INDENT = 16;
@@ -245,16 +245,7 @@ var getTreeMaxDepth = function (data, depth) {
245
245
  var getTreeMaxWidth = function (data) {
246
246
  return getTreeMaxDepth(data) * exports.DEPTH_LEVEL_INDENT + NODE_TITLE_MAX_WIDTH + CONTAINER_PADDINGS;
247
247
  };
248
- var setTreeWidth = function (container, data) {
249
- var _a, _b;
250
- if (container.current) {
251
- var maxTreeWidth = getTreeMaxWidth(data);
252
- 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;
253
- if (list)
254
- list.style.minWidth = "".concat(maxTreeWidth, "px");
255
- }
256
- };
257
- exports.setTreeWidth = setTreeWidth;
248
+ exports.getTreeMaxWidth = getTreeMaxWidth;
258
249
  var calcNodeWidth = function (depth, containerWidth) {
259
250
  if (depth === void 0) { depth = 0; }
260
251
  var leftIndent = (depth + INITIAL_NODE_DEPTH) * exports.DEPTH_LEVEL_INDENT;
package/cjs/RCTree/styles.js CHANGED
@@ -235,7 +235,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
235
235
  listStyle: 'none',
236
236
  outline: 0,
237
237
  display: 'flex',
238
- minHeight: '28px',
239
238
  zIndex: 0,
240
239
  '&:hover:not(:has([data-rcTree-disable-hover="true"]))': {
241
240
  backgroundColor: 'rgba(0,0,0,0.06)'
@@ -253,7 +252,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
253
252
  justifyContent: 'center',
254
253
  width: '16px',
255
254
  visibility: 'hidden',
256
- lineHeight: '12px'
255
+ lineHeight: '13px'
257
256
  },
258
257
  '.rc-tree-treenode-draggable:hover .rc-tree-draggable-icon': {
259
258
  visibility: 'visible'
@@ -285,6 +284,9 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
285
284
  '.rc-tree-list-holder-inner': {
286
285
  minWidth: 'fit-content'
287
286
  },
287
+ '.rc-tree-list-scrollbar-horizontal': {
288
+ height: '6px !important'
289
+ },
288
290
  '.rc-tree-list-scrollbar-vertical': {
289
291
  width: '6px !important'
290
292
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.2063",
3
+ "version": "1.4.2065",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./index.js",
@@ -11,7 +11,7 @@
11
11
  "@fluentui/react-context-selector": "^9.1.26",
12
12
  "@googlemaps/markerclusterer": "^2.5.3",
13
13
  "@react-sigma/core": "3.4.0",
14
- "@reltio/mdm-sdk": "^1.4.1915",
14
+ "@reltio/mdm-sdk": "^1.4.1916",
15
15
  "@vis.gl/react-google-maps": "^1.3.0",
16
16
  "d3-cloud": "^1.2.5",
17
17
  "d3-geo": "^2.0.1",
@@ -22,7 +22,7 @@
22
22
  "graphology-layout": "0.6.1",
23
23
  "graphology-layout-forceatlas2": "0.10.1",
24
24
  "memoize-one": "^5.1.0",
25
- "rc-tree": "^5.8.8",
25
+ "rc-tree": "^5.12.4",
26
26
  "react-autosuggest": "^9.4.3",
27
27
  "react-dnd": "^9.4.0",
28
28
  "react-dnd-html5-backend": "^10.0.2",