@reltio/components 1.4.1499 → 1.4.1501

package/cjs/components/HierarchyNodeTitle/HierarchyNodeTitle.js

@@ -46,12 +46,12 @@ var HierarchyNodeTitle = function (_a) {
     var generateEntityUrl = (0, react_1.useContext)(contexts_1.UrlGeneratorsContext).generateEntityUrl;
     var _d = (0, useEntityDetails_1.useEntityDetails)(entityUri), isLoading = _d.isLoading, entityDetails = _d.entityDetails, showEntityDetails = _d.showEntityDetails, hideEntityDetails = _d.hideEntityDetails;
     var link = generateEntityUrl({ uiPath: uiPath, uri: entityUri });
-    var showPopper = Boolean(entityDetails) || isLoading;
+    var showPopper = anchorEl && (Boolean(entityDetails) || isLoading);
     var handleClick = (0, react_1.useCallback)(function () {
         dispatch(mdm_module_1.ui.actions.openEntity({ uri: entityUri, viewId: viewId }));
     }, [dispatch, entityUri, viewId]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        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 },
+        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 },
             react_1.default.createElement(Link_1.default, { to: link, onClick: handleClick }, title)),
         react_1.default.createElement(Popper_1.default, { anchorEl: anchorEl, className: styles.popper, open: showPopper, modal: false, placement: "top-start" },
             react_1.default.createElement(ProfileCard_1.default, { entity: entityDetails, variant: isLoading ? 'loading' : 'normal' }))));

package/cjs/components/ReltioGridLayout/ReltioGridLayout.js

@@ -50,8 +50,9 @@ var ReltioGridLayout = function (_a) {
     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;
     var ref = (0, react_1.useRef)();
     var styles = (0, styles_1.useStyles)();
-    var _c = (0, react_1.useState)(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
-    var _d = (0, react_1.useState)(0), width = _d[0], setWidth = _d[1];
+    var _c = (0, react_1.useState)(null), resizingItemId = _c[0], setResizingItemId = _c[1];
+    var _d = (0, react_1.useState)(null), fullscreenItemId = _d[0], setFullscreenItemId = _d[1];
+    var _e = (0, react_1.useState)(0), width = _e[0], setWidth = _e[1];
     var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
     var processedLayout = (0, react_1.useMemo)(function () { return (0, helpers_1.reltioLayoutToReactGridLayout)(layout); }, [layout]);
     var onReltioLayoutChanged = (0, ramda_1.pipe)(helpers_1.reactGridLayoutToReltioLayout, (0, helpers_1.copyPropsFromPreviousLayout)(['autosizing'], layout), onLayoutChanged);
@@ -87,13 +88,15 @@ var ReltioGridLayout = function (_a) {
         react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
         !!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 = {},
                 _b[styles.gridFullscreen] = isFullscreenEnabled,
-                _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
+                _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); } }, processedLayout.map(function (layoutItem) {
+            var _a;
             var isItemFullscreen = fullscreenItemId === layoutItem.i;
+            var isResizing = resizingItemId === layoutItem.i;
             var isAutosize = ((0, helpers_1.getReltioLayoutItemById)(layout, layoutItem.i) || {}).autosizing;
             var autosizeComponent = isAutosize
                 ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
                 : {};
-            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)));
+            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)));
         })))));
 };
 ReltioGridLayout.defaultProps = {

package/cjs/components/ReltioGridLayout/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen" | "isResizing">;

package/cjs/components/ReltioGridLayout/styles.js

@@ -26,11 +26,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function (_) { return ({
             '&.cssTransforms': {
                 transitionProperty: 'transform'
             },
-            '&.resizing': {
-                zIndex: 9,
-                willChange: 'width, height',
-                pointerEvents: 'none'
-            },
             '&.react-draggable-dragging': {
                 transition: 'none',
                 zIndex: 8,
@@ -67,5 +62,10 @@ exports.useStyles = (0, styles_1.makeStyles)(function (_) { return ({
         '& .react-resizable-handle, & .react-grid-item': {
             visibility: 'hidden'
         }
+    },
+    isResizing: {
+        zIndex: 9,
+        willChange: 'width, height',
+        pointerEvents: 'none'
     }
 }); });

package/cjs/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -110,8 +110,9 @@ var SimpleAttributeEditor = function (_a) {
     var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete;
     var hasError = !!errorMessage;
     var deletedProps = deleted ? { disabled: true } : {};
+    var isProfilePerspectiveView = (0, react_1.useContext)(contexts_1.ProfilePerspectiveViewContext);
     var autopopulationContextValue = (0, useAutopopulationContextValue_1.useAutopopulationContextValue)({
-        enabled: Boolean(dependentLookupEditorContext),
+        enabled: isProfilePerspectiveView && (0, mdm_sdk_1.isDependentLookupAttrType)(attributeType),
         attributeTypeUri: attributeType === null || attributeType === void 0 ? void 0 : attributeType.uri,
         valueUri: attributeValue.uri
     }).autopopulationContextValue;

package/esm/components/HierarchyNodeTitle/HierarchyNodeTitle.js

@@ -17,12 +17,12 @@ export var HierarchyNodeTitle = function (_a) {
     var generateEntityUrl = useContext(UrlGeneratorsContext).generateEntityUrl;
     var _d = useEntityDetails(entityUri), isLoading = _d.isLoading, entityDetails = _d.entityDetails, showEntityDetails = _d.showEntityDetails, hideEntityDetails = _d.hideEntityDetails;
     var link = generateEntityUrl({ uiPath: uiPath, uri: entityUri });
-    var showPopper = Boolean(entityDetails) || isLoading;
+    var showPopper = anchorEl && (Boolean(entityDetails) || isLoading);
     var handleClick = useCallback(function () {
         dispatch(ui.actions.openEntity({ uri: entityUri, viewId: viewId }));
     }, [dispatch, entityUri, viewId]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: classnames(styles.link, (_b = {}, _b[styles.selected] = isSelected, _b)), onMouseEnter: withEntityDetails ? showEntityDetails : undefined, onMouseLeave: withEntityDetails ? hideEntityDetails : undefined },
+        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 },
             React.createElement(Link, { to: link, onClick: handleClick }, title)),
         React.createElement(Popper, { anchorEl: anchorEl, className: styles.popper, open: showPopper, modal: false, placement: "top-start" },
             React.createElement(ProfileCard, { entity: entityDetails, variant: isLoading ? 'loading' : 'normal' }))));

package/esm/components/ReltioGridLayout/ReltioGridLayout.js

@@ -22,8 +22,9 @@ var ReltioGridLayout = function (_a) {
     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;
     var ref = useRef();
     var styles = useStyles();
-    var _c = useState(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
-    var _d = useState(0), width = _d[0], setWidth = _d[1];
+    var _c = useState(null), resizingItemId = _c[0], setResizingItemId = _c[1];
+    var _d = useState(null), fullscreenItemId = _d[0], setFullscreenItemId = _d[1];
+    var _e = useState(0), width = _e[0], setWidth = _e[1];
     var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
     var processedLayout = useMemo(function () { return reltioLayoutToReactGridLayout(layout); }, [layout]);
     var onReltioLayoutChanged = pipe(reactGridLayoutToReltioLayout, copyPropsFromPreviousLayout(['autosizing'], layout), onLayoutChanged);
@@ -59,13 +60,15 @@ var ReltioGridLayout = function (_a) {
         React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
         !!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 = {},
                 _b[styles.gridFullscreen] = isFullscreenEnabled,
-                _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
+                _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); } }, processedLayout.map(function (layoutItem) {
+            var _a;
             var isItemFullscreen = fullscreenItemId === layoutItem.i;
+            var isResizing = resizingItemId === layoutItem.i;
             var isAutosize = (getReltioLayoutItemById(layout, layoutItem.i) || {}).autosizing;
             var autosizeComponent = isAutosize
                 ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
                 : {};
-            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)));
+            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)));
         })))));
 };
 ReltioGridLayout.defaultProps = {

package/esm/components/ReltioGridLayout/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen" | "isResizing">;

package/esm/components/ReltioGridLayout/styles.js

@@ -23,11 +23,6 @@ export var useStyles = makeStyles(function (_) { return ({
             '&.cssTransforms': {
                 transitionProperty: 'transform'
             },
-            '&.resizing': {
-                zIndex: 9,
-                willChange: 'width, height',
-                pointerEvents: 'none'
-            },
             '&.react-draggable-dragging': {
                 transition: 'none',
                 zIndex: 8,
@@ -64,5 +59,10 @@ export var useStyles = makeStyles(function (_) { return ({
         '& .react-resizable-handle, & .react-grid-item': {
             visibility: 'hidden'
         }
+    },
+    isResizing: {
+        zIndex: 9,
+        willChange: 'width, height',
+        pointerEvents: 'none'
     }
 }); });

package/esm/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
@@ -38,7 +38,7 @@ import { attributeValueToEditorValue, prepareChangeData } from './utils';
 import withAsyncMount from '../../../../HOCs/withAsyncMount/withAsyncMount';
 import { getDependentLookupEditorContext } from './selectors/getDependentLookupEditorContext';
 import { withContext } from '../../../../HOCs';
-import { ScrollToErrorContext, DependentLookupAutopopulationContext } from '../../../../contexts';
+import { ScrollToErrorContext, DependentLookupAutopopulationContext, ProfilePerspectiveViewContext } from '../../../../contexts';
 import { useScrollToAttributeError } from '../../../../hooks';
 import { useAutopopulationContextValue } from './useAutopopulationContextValue';
 import { useStyles } from './styles';
@@ -82,8 +82,9 @@ var SimpleAttributeEditor = function (_a) {
     var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete;
     var hasError = !!errorMessage;
     var deletedProps = deleted ? { disabled: true } : {};
+    var isProfilePerspectiveView = useContext(ProfilePerspectiveViewContext);
     var autopopulationContextValue = useAutopopulationContextValue({
-        enabled: Boolean(dependentLookupEditorContext),
+        enabled: isProfilePerspectiveView && isDependentLookupAttrType(attributeType),
         attributeTypeUri: attributeType === null || attributeType === void 0 ? void 0 : attributeType.uri,
         valueUri: attributeValue.uri
     }).autopopulationContextValue;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1499",
+  "version": "1.4.1501",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1499",
-    "@reltio/mdm-sdk": "^1.4.1499",
+    "@reltio/mdm-module": "^1.4.1501",
+    "@reltio/mdm-sdk": "^1.4.1501",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",