@reltio/components 1.4.1500 → 1.4.1502

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 (11) hide show
  1. package/cjs/components/HierarchyNodeTitle/HierarchyNodeTitle.js +2 -2
  2. package/cjs/components/ReltioGridLayout/ReltioGridLayout.js +7 -4
  3. package/cjs/components/ReltioGridLayout/styles.d.ts +1 -1
  4. package/cjs/components/ReltioGridLayout/styles.js +5 -5
  5. package/cjs/components/attributes/editMode/SimpleAttributeEditor/useAutopopulationContextValue.js +1 -1
  6. package/esm/components/HierarchyNodeTitle/HierarchyNodeTitle.js +2 -2
  7. package/esm/components/ReltioGridLayout/ReltioGridLayout.js +7 -4
  8. package/esm/components/ReltioGridLayout/styles.d.ts +1 -1
  9. package/esm/components/ReltioGridLayout/styles.js +5 -5
  10. package/esm/components/attributes/editMode/SimpleAttributeEditor/useAutopopulationContextValue.js +1 -1
  11. package/package.json +3 -3
package/cjs/components/HierarchyNodeTitle/HierarchyNodeTitle.js CHANGED
@@ -46,12 +46,12 @@ var HierarchyNodeTitle = function (_a) {
46
46
  var generateEntityUrl = (0, react_1.useContext)(contexts_1.UrlGeneratorsContext).generateEntityUrl;
47
47
  var _d = (0, useEntityDetails_1.useEntityDetails)(entityUri), isLoading = _d.isLoading, entityDetails = _d.entityDetails, showEntityDetails = _d.showEntityDetails, hideEntityDetails = _d.hideEntityDetails;
48
48
  var link = generateEntityUrl({ uiPath: uiPath, uri: entityUri });
49
- var showPopper = Boolean(entityDetails) || isLoading;
49
+ var showPopper = anchorEl && (Boolean(entityDetails) || isLoading);
50
50
  var handleClick = (0, react_1.useCallback)(function () {
51
51
  dispatch(mdm_module_1.ui.actions.openEntity({ uri: entityUri, viewId: viewId }));
52
52
  }, [dispatch, entityUri, viewId]);
53
53
  return (react_1.default.createElement(react_1.default.Fragment, null,
54
- react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.link, (_b = {}, _b[styles.selected] = isSelected, _b)), onMouseEnter: withEntityDetails ? showEntityDetails : undefined, onMouseLeave: withEntityDetails ? hideEntityDetails : undefined },
54
+ react_1.default.createElement("span", { "data-reltio-id": "reltio-hierarchy-node-title", className: (0, classnames_1.default)(styles.link, (_b = {}, _b[styles.selected] = isSelected, _b)), onMouseEnter: withEntityDetails ? showEntityDetails : undefined, onMouseLeave: withEntityDetails ? hideEntityDetails : undefined },
55
55
  react_1.default.createElement(Link_1.default, { to: link, onClick: handleClick }, title)),
56
56
  react_1.default.createElement(Popper_1.default, { anchorEl: anchorEl, className: styles.popper, open: showPopper, modal: false, placement: "top-start" },
57
57
  react_1.default.createElement(ProfileCard_1.default, { entity: entityDetails, variant: isLoading ? 'loading' : 'normal' }))));
package/cjs/components/ReltioGridLayout/ReltioGridLayout.js CHANGED
@@ -50,8 +50,9 @@ var ReltioGridLayout = function (_a) {
50
50
  var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, classes = _a.classes;
51
51
  var ref = (0, react_1.useRef)();
52
52
  var styles = (0, styles_1.useStyles)();
53
- var _c = (0, react_1.useState)(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
54
- var _d = (0, react_1.useState)(0), width = _d[0], setWidth = _d[1];
53
+ var _c = (0, react_1.useState)(null), resizingItemId = _c[0], setResizingItemId = _c[1];
54
+ var _d = (0, react_1.useState)(null), fullscreenItemId = _d[0], setFullscreenItemId = _d[1];
55
+ var _e = (0, react_1.useState)(0), width = _e[0], setWidth = _e[1];
55
56
  var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
56
57
  var processedLayout = (0, react_1.useMemo)(function () { return (0, helpers_1.reltioLayoutToReactGridLayout)(layout); }, [layout]);
57
58
  var onReltioLayoutChanged = (0, ramda_1.pipe)(helpers_1.reactGridLayoutToReltioLayout, (0, helpers_1.copyPropsFromPreviousLayout)(['autosizing'], layout), onLayoutChanged);
@@ -87,13 +88,15 @@ var ReltioGridLayout = function (_a) {
87
88
  react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
88
89
  !!width && (react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: (0, classnames_1.default)(classes.root, styles.gridLayout, (_b = {},
89
90
  _b[styles.gridFullscreen] = isFullscreenEnabled,
90
- _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
91
+ _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); } }, processedLayout.map(function (layoutItem) {
92
+ var _a;
91
93
  var isItemFullscreen = fullscreenItemId === layoutItem.i;
94
+ var isResizing = resizingItemId === layoutItem.i;
92
95
  var isAutosize = ((0, helpers_1.getReltioLayoutItemById)(layout, layoutItem.i) || {}).autosizing;
93
96
  var autosizeComponent = isAutosize
94
97
  ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
95
98
  : {};
96
- return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: (0, classnames_1.default)({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
99
+ return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: (0, classnames_1.default)((_a = { fullscreen: isItemFullscreen }, _a[styles.isResizing] = isResizing, _a), classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
97
100
  })))));
98
101
  };
99
102
  ReltioGridLayout.defaultProps = {
package/cjs/components/ReltioGridLayout/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen">;
1
+ export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen" | "isResizing">;
package/cjs/components/ReltioGridLayout/styles.js CHANGED
@@ -26,11 +26,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function (_) { return ({
26
26
  '&.cssTransforms': {
27
27
  transitionProperty: 'transform'
28
28
  },
29
- '&.resizing': {
30
- zIndex: 9,
31
- willChange: 'width, height',
32
- pointerEvents: 'none'
33
- },
34
29
  '&.react-draggable-dragging': {
35
30
  transition: 'none',
36
31
  zIndex: 8,
@@ -67,5 +62,10 @@ exports.useStyles = (0, styles_1.makeStyles)(function (_) { return ({
67
62
  '& .react-resizable-handle, & .react-grid-item': {
68
63
  visibility: 'hidden'
69
64
  }
65
+ },
66
+ isResizing: {
67
+ zIndex: 9,
68
+ willChange: 'width, height',
69
+ pointerEvents: 'none'
70
70
  }
71
71
  }); });
package/cjs/components/attributes/editMode/SimpleAttributeEditor/useAutopopulationContextValue.js CHANGED
@@ -34,7 +34,7 @@ var useAutopopulationContextValue = function (_a) {
34
34
  var autocompleteConfig = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getLookupAutocomplete);
35
35
  var autopopulationEnabled = enabled && (0, mdm_sdk_1.isAutopopulationEnabled)(autocompleteConfig, attributeTypeUri);
36
36
  var autopopulationId = autopopulationEnabled ? valueUri : null;
37
- var _b = ((0, react_redux_1.useSelector)(function (state) { return mdm_module_1.default.selectors.getDependentLookupEditorState(state, valueUri); }) || {}).isTouched, isTouched = _b === void 0 ? false : _b;
37
+ var _b = ((0, react_redux_1.useSelector)(function (state) { return autopopulationEnabled && mdm_module_1.default.selectors.getDependentLookupEditorState(state, valueUri); }) || {}).isTouched, isTouched = _b === void 0 ? false : _b;
38
38
  var onTouch = (0, react_1.useCallback)(function (valueUri) {
39
39
  dispatch(mdm_module_1.profile.dependentLookups.actions.dependentLookupsEditorTouched({ uri: valueUri, isTouched: true }));
40
40
  }, [dispatch]);
package/esm/components/HierarchyNodeTitle/HierarchyNodeTitle.js CHANGED
@@ -17,12 +17,12 @@ export var HierarchyNodeTitle = function (_a) {
17
17
  var generateEntityUrl = useContext(UrlGeneratorsContext).generateEntityUrl;
18
18
  var _d = useEntityDetails(entityUri), isLoading = _d.isLoading, entityDetails = _d.entityDetails, showEntityDetails = _d.showEntityDetails, hideEntityDetails = _d.hideEntityDetails;
19
19
  var link = generateEntityUrl({ uiPath: uiPath, uri: entityUri });
20
- var showPopper = Boolean(entityDetails) || isLoading;
20
+ var showPopper = anchorEl && (Boolean(entityDetails) || isLoading);
21
21
  var handleClick = useCallback(function () {
22
22
  dispatch(ui.actions.openEntity({ uri: entityUri, viewId: viewId }));
23
23
  }, [dispatch, entityUri, viewId]);
24
24
  return (React.createElement(React.Fragment, null,
25
- React.createElement("span", { className: classnames(styles.link, (_b = {}, _b[styles.selected] = isSelected, _b)), onMouseEnter: withEntityDetails ? showEntityDetails : undefined, onMouseLeave: withEntityDetails ? hideEntityDetails : undefined },
25
+ React.createElement("span", { "data-reltio-id": "reltio-hierarchy-node-title", className: classnames(styles.link, (_b = {}, _b[styles.selected] = isSelected, _b)), onMouseEnter: withEntityDetails ? showEntityDetails : undefined, onMouseLeave: withEntityDetails ? hideEntityDetails : undefined },
26
26
  React.createElement(Link, { to: link, onClick: handleClick }, title)),
27
27
  React.createElement(Popper, { anchorEl: anchorEl, className: styles.popper, open: showPopper, modal: false, placement: "top-start" },
28
28
  React.createElement(ProfileCard, { entity: entityDetails, variant: isLoading ? 'loading' : 'normal' }))));
package/esm/components/ReltioGridLayout/ReltioGridLayout.js CHANGED
@@ -22,8 +22,9 @@ var ReltioGridLayout = function (_a) {
22
22
  var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, classes = _a.classes;
23
23
  var ref = useRef();
24
24
  var styles = useStyles();
25
- var _c = useState(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
26
- var _d = useState(0), width = _d[0], setWidth = _d[1];
25
+ var _c = useState(null), resizingItemId = _c[0], setResizingItemId = _c[1];
26
+ var _d = useState(null), fullscreenItemId = _d[0], setFullscreenItemId = _d[1];
27
+ var _e = useState(0), width = _e[0], setWidth = _e[1];
27
28
  var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
28
29
  var processedLayout = useMemo(function () { return reltioLayoutToReactGridLayout(layout); }, [layout]);
29
30
  var onReltioLayoutChanged = pipe(reactGridLayoutToReltioLayout, copyPropsFromPreviousLayout(['autosizing'], layout), onLayoutChanged);
@@ -59,13 +60,15 @@ var ReltioGridLayout = function (_a) {
59
60
  React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
60
61
  !!width && (React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames(classes.root, styles.gridLayout, (_b = {},
61
62
  _b[styles.gridFullscreen] = isFullscreenEnabled,
62
- _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
63
+ _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); } }, processedLayout.map(function (layoutItem) {
64
+ var _a;
63
65
  var isItemFullscreen = fullscreenItemId === layoutItem.i;
66
+ var isResizing = resizingItemId === layoutItem.i;
64
67
  var isAutosize = (getReltioLayoutItemById(layout, layoutItem.i) || {}).autosizing;
65
68
  var autosizeComponent = isAutosize
66
69
  ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
67
70
  : {};
68
- return (React.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
71
+ return (React.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames((_a = { fullscreen: isItemFullscreen }, _a[styles.isResizing] = isResizing, _a), classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
69
72
  })))));
70
73
  };
71
74
  ReltioGridLayout.defaultProps = {
package/esm/components/ReltioGridLayout/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen">;
1
+ export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen" | "isResizing">;
package/esm/components/ReltioGridLayout/styles.js CHANGED
@@ -23,11 +23,6 @@ export var useStyles = makeStyles(function (_) { return ({
23
23
  '&.cssTransforms': {
24
24
  transitionProperty: 'transform'
25
25
  },
26
- '&.resizing': {
27
- zIndex: 9,
28
- willChange: 'width, height',
29
- pointerEvents: 'none'
30
- },
31
26
  '&.react-draggable-dragging': {
32
27
  transition: 'none',
33
28
  zIndex: 8,
@@ -64,5 +59,10 @@ export var useStyles = makeStyles(function (_) { return ({
64
59
  '& .react-resizable-handle, & .react-grid-item': {
65
60
  visibility: 'hidden'
66
61
  }
62
+ },
63
+ isResizing: {
64
+ zIndex: 9,
65
+ willChange: 'width, height',
66
+ pointerEvents: 'none'
67
67
  }
68
68
  }); });
package/esm/components/attributes/editMode/SimpleAttributeEditor/useAutopopulationContextValue.js CHANGED
@@ -8,7 +8,7 @@ export var useAutopopulationContextValue = function (_a) {
8
8
  var autocompleteConfig = useSelector(mdmModule.selectors.getLookupAutocomplete);
9
9
  var autopopulationEnabled = enabled && isAutopopulationEnabled(autocompleteConfig, attributeTypeUri);
10
10
  var autopopulationId = autopopulationEnabled ? valueUri : null;
11
- var _b = (useSelector(function (state) { return mdmModule.selectors.getDependentLookupEditorState(state, valueUri); }) || {}).isTouched, isTouched = _b === void 0 ? false : _b;
11
+ var _b = (useSelector(function (state) { return autopopulationEnabled && mdmModule.selectors.getDependentLookupEditorState(state, valueUri); }) || {}).isTouched, isTouched = _b === void 0 ? false : _b;
12
12
  var onTouch = useCallback(function (valueUri) {
13
13
  dispatch(profile.dependentLookups.actions.dependentLookupsEditorTouched({ uri: valueUri, isTouched: true }));
14
14
  }, [dispatch]);
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1500",
3
+ "version": "1.4.1502",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
7
7
  "dependencies": {
8
8
  "@date-io/moment": "^1.3.5",
9
9
  "@react-google-maps/api": "2.7.0",
10
- "@reltio/mdm-module": "^1.4.1500",
11
- "@reltio/mdm-sdk": "^1.4.1500",
10
+ "@reltio/mdm-module": "^1.4.1502",
11
+ "@reltio/mdm-sdk": "^1.4.1502",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",