@reltio/components 1.4.816 → 1.4.820

package/components/CollaborationItem/CollaborationItem.d.ts

@@ -11,5 +11,5 @@ declare type Props = {
     messagesRef?: React.RefCallback<HTMLDivElement>;
     comment?: CommentType;
 };
-export declare const CollaborationItem: ({ uri, relatedObjectUris, objectType, classes, popperRef, messagesRef, comment }: Props) => JSX.Element;
+export declare const CollaborationItem: React.MemoExoticComponent<({ uri, relatedObjectUris, objectType, classes, popperRef, messagesRef, comment }: Props) => JSX.Element>;
 export {};

package/components/CollaborationItem/CollaborationItem.js

@@ -29,7 +29,7 @@ var Comment_1 = require("./Comment/Comment");
 var RepliedComment_1 = require("./RepliedComment/RepliedComment");
 var SendMessageArea_1 = require("./SendMessageArea/SendMessageArea");
 var styles_1 = require("./styles");
-var CollaborationItem = function (_a) {
+exports.CollaborationItem = react_1.memo(function (_a) {
     var uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, classes = _a.classes, popperRef = _a.popperRef, messagesRef = _a.messagesRef, comment = _a.comment;
     var inputRef = react_1.useRef();
     var styles = styles_1.useStyles({ classes: classes });
@@ -51,5 +51,4 @@ var CollaborationItem = function (_a) {
                 react_1.default.createElement(Box_1.default, { className: styles.replies }, comment.replies.map(function (reply) { return (react_1.default.createElement(RepliedComment_1.RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply })); }))),
             sendMessageArea)),
         !comment && sendMessageArea));
-};
-exports.CollaborationItem = CollaborationItem;
+});

package/components/ReltioMap/EntityMarker/EntityMarker.js

@@ -51,13 +51,15 @@ var ProfileCard_1 = __importDefault(require("../../ProfileCard/ProfileCard"));
 var Popper_1 = __importDefault(require("../../Popper/Popper"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var contexts_1 = require("../../../contexts");
-var marker_inline_svg_1 = __importDefault(require("./icons/marker.inline.svg"));
-var marker_hover_inline_svg_1 = __importDefault(require("./icons/marker-hover.inline.svg"));
+var marker_inline_svg_1 = require("./icons/marker.inline.svg");
+var marker_hover_inline_svg_1 = require("./icons/marker-hover.inline.svg");
 var styles_1 = require("./styles");
 var HIDE_DEBOUNCE_INTERVAL = 50;
 var MARKER_WIDTH = 22;
 var MARKER_HEIGHT = 32;
 var MARKER_CARD_MARGIN = 8;
+var hoveredMarkerIcon = mdm_sdk_1.svg2Url(marker_hover_inline_svg_1.HOVERED_MARKER);
+var markerIcon = mdm_sdk_1.svg2Url(marker_inline_svg_1.MARKER);
 var EntityMarker = function (_a) {
     var marker = _a.marker, onClick = _a.onClick, otherProps = __rest(_a, ["marker", "onClick"]);
     var styles = styles_1.useStyles();
@@ -74,7 +76,7 @@ var EntityMarker = function (_a) {
         react_1.default.createElement(Popper_1.default, { anchorEl: popperAnchor.current, open: hovered, className: styles.popper, modal: false, placement: "top" },
             react_1.default.createElement(ProfileCard_1.default, { entity: marker.entity, onMouseOver: onMouseOver, onMouseOut: onMouseOut })),
         react_1.default.createElement(api_1.Marker, __assign({ icon: {
-                url: hovered || isActive ? marker_hover_inline_svg_1.default : marker_inline_svg_1.default,
+                url: hovered || isActive ? hoveredMarkerIcon : markerIcon,
                 // needed for IE:
                 scaledSize: new google.maps.Size(MARKER_WIDTH, MARKER_HEIGHT) //eslint-disable-line
             }, position: position, onClick: handleClick, visible: marker.visible !== false, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, otherProps)),

package/components/ReltioMap/EntityMarker/icons/marker-hover.inline.svg.d.ts

@@ -0,0 +1 @@
+export declare const HOVERED_MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large (hover)</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large-(hover)\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.32\" cx=\"11\" cy=\"28.5\" rx=\"6\" ry=\"4.66666667\"></ellipse>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n        <path d=\"M20,2 L20,20 L14.755,20 L14.6905172,20.0815309 C14.3562717,20.5012516 14.0578656,20.8886742 13.7817711,21.2616986 L13.5786724,21.5390469 C11.92787,23.8181606 11.079024,25.6311217 11.0052669,27.2674145 L11.0052669,27.2674145 L11,27.5 L10.9968324,27.3203844 C10.9285422,25.3781621 9.75347502,23.1598866 7.22124201,20.0010865 L2,20 L2,2 L20,2 Z\" id=\"Path\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" mask=\"url(#mask-3)\"></path>\n    </g>\n</svg>";

package/components/ReltioMap/EntityMarker/icons/marker-hover.inline.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HOVERED_MARKER = void 0;
+exports.HOVERED_MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large (hover)</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large-(hover)\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.32\" cx=\"11\" cy=\"28.5\" rx=\"6\" ry=\"4.66666667\"></ellipse>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n        <path d=\"M20,2 L20,20 L14.755,20 L14.6905172,20.0815309 C14.3562717,20.5012516 14.0578656,20.8886742 13.7817711,21.2616986 L13.5786724,21.5390469 C11.92787,23.8181606 11.079024,25.6311217 11.0052669,27.2674145 L11.0052669,27.2674145 L11,27.5 L10.9968324,27.3203844 C10.9285422,25.3781621 9.75347502,23.1598866 7.22124201,20.0010865 L2,20 L2,2 L20,2 Z\" id=\"Path\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" mask=\"url(#mask-3)\"></path>\n    </g>\n</svg>";

package/components/ReltioMap/EntityMarker/icons/marker.inline.svg.d.ts

@@ -0,0 +1 @@
+export declare const MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M20,1 C20.5522847,1 21,1.44771525 21,2 L21,20 C21,20.5522847 20.5522847,21 20,21 L15.2374606,21.0021908 C14.9306693,21.3935449 14.6510143,21.7632851 14.3885453,22.1256523 C12.8309725,24.2760522 12,26.0137017 12,27.5 C12,28.0522847 11.5522847,28.5 11,28.5 C10.4477153,28.5 10,28.0522847 10,27.5 C10,25.7886708 8.84033182,23.6810997 6.73798027,21.0014567 L2,21 C1.44771525,21 1,20.5522847 1,20 L1,2 C1,1.44771525 1.44771525,1 2,1 L20,1 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.12\" cx=\"11\" cy=\"28.5\" rx=\"4.5\" ry=\"3.5\"></ellipse>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"Path-3\" fill=\"#FFFFFF\"></path>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n    </g>\n</svg>";

package/components/ReltioMap/EntityMarker/icons/marker.inline.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MARKER = void 0;
+exports.MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M20,1 C20.5522847,1 21,1.44771525 21,2 L21,20 C21,20.5522847 20.5522847,21 20,21 L15.2374606,21.0021908 C14.9306693,21.3935449 14.6510143,21.7632851 14.3885453,22.1256523 C12.8309725,24.2760522 12,26.0137017 12,27.5 C12,28.0522847 11.5522847,28.5 11,28.5 C10.4477153,28.5 10,28.0522847 10,27.5 C10,25.7886708 8.84033182,23.6810997 6.73798027,21.0014567 L2,21 C1.44771525,21 1,20.5522847 1,20 L1,2 C1,1.44771525 1.44771525,1 2,1 L20,1 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.12\" cx=\"11\" cy=\"28.5\" rx=\"4.5\" ry=\"3.5\"></ellipse>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"Path-3\" fill=\"#FFFFFF\"></path>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n    </g>\n</svg>";

package/components/ReltioMap/MapControls/TopRightMapControls/TopRightMapControls.js

@@ -10,16 +10,16 @@ var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var HOCs_1 = require("../../../../HOCs");
 var HighlightOff_1 = __importDefault(require("@material-ui/icons/HighlightOff"));
 var constants_1 = require("../../constants");
-var radius_svg_1 = __importDefault(require("./icons/radius.svg"));
-var draw_svg_1 = __importDefault(require("./icons/draw.svg"));
+var Radius_1 = __importDefault(require("../../../../icons/Radius"));
+var Draw_1 = __importDefault(require("../../../../icons/Draw"));
 var styles_1 = require("./styles");
 exports.ButtonWithTooltip = HOCs_1.withTooltip(Button_1.default);
 var getIcon = function (mode) {
     switch (mode) {
         case constants_1.MAP_DRAWING_MODES.CIRCLE:
-            return radius_svg_1.default;
+            return Radius_1.default;
         case constants_1.MAP_DRAWING_MODES.POLYGON:
-            return draw_svg_1.default;
+            return Draw_1.default;
         default:
             return null;
     }

package/components/attributes/inline/SimpleAttribute/SimpleAttribute.js

@@ -44,14 +44,21 @@ var SimpleAttribute = function (_a) {
     var _e = useAttributeState_1.useAttributeState(), isReadingMode = _e.isReadingMode, isEditingMode = _e.isEditingMode, isHovered = _e.isHovered, onMouseOver = _e.onMouseOver, onMouseOut = _e.onMouseOut, setReadingMode = _e.setReadingMode, setEditingMode = _e.setEditingMode;
     var containerRef = react_1.useRef();
     var id = mdm_sdk_1.getLastUriPart(attributeValue.uri);
-    var canEdit = allowEdit && mdm_sdk_1.checkMetadataForUpdate(mdm_sdk_1.ModeTypes.EDITING, attributeType) && !attributeType.system;
-    var canDelete = allowDelete && mdm_sdk_1.checkMetadataForDelete(mdm_sdk_1.ModeTypes.EDITING, attributeType) && !attributeType.system;
+    var crosswalkDisabled = mdm_sdk_1.isCrosswalkDisabled(crosswalk);
+    var canModifyAttribute = !attributeType.system && !crosswalkDisabled;
+    var canEdit = canModifyAttribute && allowEdit && mdm_sdk_1.checkMetadataForUpdate(mdm_sdk_1.ModeTypes.EDITING, attributeType);
+    var canDelete = canModifyAttribute && allowDelete && mdm_sdk_1.checkMetadataForDelete(mdm_sdk_1.ModeTypes.EDITING, attributeType);
     var isTemporary = mdm_sdk_1.isTempUri(attributeValue.uri);
     var showPin = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.pin);
     var showIgnore = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.ignored);
     var color = contexts_1.useCrosswalkColor(crosswalk);
     var _f = contexts_1.useCrosswalkHighlight(crosswalk), isHighlighted = _f.isHighlighted, isDimmed = _f.isDimmed, highlightCrosswalk = _f.highlightCrosswalk, removeHighlight = _f.removeHighlight;
-    var styles = styles_1.useStyles({ isFilled: isHighlighted, isOpaque: !isDimmed, color: color });
+    var styles = styles_1.useStyles({
+        variant: crosswalkDisabled ? 'outlined' : 'filled',
+        opaque: !isDimmed,
+        fullyColored: isHighlighted,
+        color: color
+    });
     var actions = [
         {
             crosswalk: crosswalk,

package/components/attributes/inline/SimpleAttribute/styles.d.ts

@@ -1,6 +1,7 @@
 declare type StylesProps = {
-    isFilled: boolean;
-    isOpaque: boolean;
+    variant: 'filled' | 'outlined';
+    fullyColored: boolean;
+    opaque: boolean;
     color: string;
 };
 export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"attributeValue" | "root" | "actions">;

package/components/attributes/inline/SimpleAttribute/styles.js

@@ -1,20 +1,43 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles(function () { return ({
     root: function (_a) {
-        var isFilled = _a.isFilled, isOpaque = _a.isOpaque, color = _a.color;
-        return ({
-            height: '28px',
+        var fullyColored = _a.fullyColored, opaque = _a.opaque, color = _a.color, variant = _a.variant;
+        return (__assign(__assign(__assign({ height: '28px' }, (variant === 'filled' && {
             borderRadius: '4px',
-            background: isFilled ? color : "linear-gradient(to right, " + color + " 8px, rgba(0, 0, 0, 0.05) 8px)",
-            display: 'flex',
-            alignItems: 'center',
-            maxWidth: '230px',
-            opacity: isOpaque ? 1 : 0.38,
-            transition: 'opacity 0.3s'
-        });
+            background: fullyColored ? color : "linear-gradient(to right, " + color + " 8px, rgba(0,0,0,0.05) 8px)"
+        })), (variant === 'outlined' && {
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                background: color,
+                borderRadius: '4px 0px 0px 4px',
+                width: '8px',
+                height: '100%'
+            },
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                boxSizing: 'border-box',
+                borderRadius: '4px',
+                border: fullyColored ? color + " solid 2px" : 'rgba(0,0,0,0.12) solid 1px',
+                width: '100%',
+                height: '100%'
+            }
+        })), { display: 'flex', alignItems: 'center', maxWidth: '230px', opacity: opaque ? 1 : 0.38, transition: 'opacity 0.3s', position: 'relative' }));
     },
     attributeValue: {
         marginLeft: '16px',

package/components/crosswalks/ColoredBlock/ColoredBlock.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 declare const ColoredBlock: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     color: string;
     opacity?: number;
+    variant?: 'filled' | 'outlined';
 } & React.RefAttributes<HTMLDivElement>>;
 export default ColoredBlock;

package/components/crosswalks/ColoredBlock/ColoredBlock.js

@@ -48,8 +48,8 @@ var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var styles_1 = require("./styles");
 var ColoredBlock = react_1.forwardRef(function (_a, ref) {
-    var color = _a.color, opacity = _a.opacity, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "children", "className"]);
-    var styles = styles_1.useColoredItemStyles({ color: color, opacity: opacity });
+    var color = _a.color, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? 'filled' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "variant", "children", "className"]);
+    var styles = styles_1.useColoredItemStyles({ color: color, opacity: opacity, variant: variant });
     return (react_1.default.createElement("div", __assign({ ref: ref, className: classnames_1.default(styles.item, className) }, props), children));
 });
 exports.default = ColoredBlock;

package/components/crosswalks/ColoredBlock/styles.d.ts

@@ -1,6 +1,7 @@
 declare type StylesProps = {
     color?: string;
     opacity?: number;
+    variant: 'filled' | 'outlined';
 };
 export declare const useColoredItemStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"item">;
 export {};

package/components/crosswalks/ColoredBlock/styles.js

@@ -1,14 +1,21 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColoredItemStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
 exports.useColoredItemStyles = styles_1.makeStyles({
     item: function (_a) {
-        var color = _a.color, opacity = _a.opacity;
-        return ({
-            backgroundColor: color,
-            opacity: opacity,
-            transition: 'opacity 0.3s'
-        });
+        var color = _a.color, opacity = _a.opacity, variant = _a.variant;
+        return (__assign(__assign(__assign({}, (variant === 'filled' && { backgroundColor: color })), (variant === 'outlined' && { border: color + " solid 2px" })), { opacity: opacity, transition: 'opacity 0.3s', boxSizing: 'border-box' }));
     }
 });

package/components/crosswalks/CrosswalkRow/CrosswalkRow.js

@@ -57,14 +57,15 @@ var CrosswalkRow = function (_a) {
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
     var sourceSystemLabel = mdm_sdk_1.getSourceSystemLabel(metadata, crosswalk.type);
     var crosswalkId = mdm_sdk_1.getLastUriPart(crosswalk.uri);
+    var crosswalkDisabled = mdm_sdk_1.isCrosswalkDisabled(crosswalk);
     var _j = react_dnd_1.useDrag({
         item: {
             type: 'Crosswalk',
             crosswalk: crosswalk
         },
-        canDrag: !mdm_sdk_1.isCrosswalkDisabled(crosswalk)
+        canDrag: !crosswalkDisabled
     }), drag = _j[1], preview = _j[2];
-    var canDelete = !mdm_sdk_1.isCrosswalkDisabled(crosswalk) && crosswalk.ownerType !== 'relation';
+    var canDelete = !crosswalkDisabled && crosswalk.ownerType !== 'relation';
     react_1.useEffect(function () {
         preview(react_dnd_html5_backend_1.getEmptyImage(), { captureDraggingState: true });
     }, []);
@@ -85,7 +86,7 @@ var CrosswalkRow = function (_a) {
     return (react_1.default.createElement("div", { className: styles.root, ref: ref },
         react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "XXS", className: styles.focusedIcon, icon: focusable && Visibility_1.default, onClick: function () { return toggleCrosswalkFocus(); }, disabled: !focusable, tooltipTitle: focusable && ui_i18n_1.default.text('Focus') }),
         react_1.default.createElement("div", { className: styles.crosswalkWrapper },
-            react_1.default.createElement(ColoredBlock_1.default, { ref: drag, className: styles.header, color: color, onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
+            react_1.default.createElement(ColoredBlock_1.default, { ref: drag, className: styles.header, color: color, variant: crosswalkDisabled ? 'outlined' : 'filled', onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
                 isDependent && react_1.default.createElement(NestedAttribute_1.default, { className: styles.dependentIcon }),
                 react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
                 react_1.default.createElement(SourceIcon_1.default, { className: styles.sourceIcon, sourceType: crosswalk.type }),

package/contexts/CollaborationContext/index.d.ts

@@ -3,7 +3,9 @@ import { CollaborationObjectTypes, Comment, CommentsMap, Reply } from '@reltio/m
 export declare const CollaborationContext: React.Context<{
     objectTypes?: CollaborationObjectTypes[];
     commentsMap: CommentsMap;
+    comments: Comment[];
     currentComment: Comment;
+    getComments: (uri: string, pageToken?: string) => void;
     getComment: (commentId: Comment['commentId']) => void;
     createComment: (params: Pick<Comment, 'content' | 'namedUsers' | 'objectType' | 'relatedObjectUris'> & {
         uri: string;
@@ -29,4 +31,5 @@ export declare const CollaborationContext: React.Context<{
     clearCurrentComment: () => void;
     sending: boolean;
     loading: boolean;
+    pageToken: string;
 }>;

package/contexts/CollaborationContext/index.js

@@ -7,9 +7,11 @@ exports.CollaborationContext = void 0;
 var react_1 = __importDefault(require("react"));
 var noop = function () { };
 exports.CollaborationContext = react_1.default.createContext({
+    comments: [],
     commentsMap: null,
     currentComment: null,
     getComment: noop,
+    getComments: function () { return new Promise(noop); },
     createComment: function () { return new Promise(noop); },
     editComment: function () { return new Promise(noop); },
     createReply: function () { return new Promise(noop); },
@@ -18,6 +20,7 @@ exports.CollaborationContext = react_1.default.createContext({
     clearCurrentComment: noop,
     deleteComment: noop,
     sending: false,
-    loading: false
+    loading: false,
+    pageToken: null
 });
 exports.CollaborationContext.displayName = 'CollaborationContext';

package/hooks/useCollaboration.d.ts

@@ -2,6 +2,7 @@ import { CollaborationObjectTypes, Comment, CommentsMap } from '@reltio/mdm-sdk'
 export declare const useCollaboration: (objectIds?: string[], objectTypes?: CollaborationObjectTypes[]) => {
     commentsMap: CommentsMap;
     currentComment: Comment;
+    comments: Comment[];
     getComment: (commentId: string) => void;
     createReply: ({ content, namedUsers, commentId, action, uri }: any) => Promise<void>;
     editComment: ({ content, namedUsers, objectType, uri, relatedObjectUris, commentId, replies }: any) => Promise<void>;
@@ -13,4 +14,6 @@ export declare const useCollaboration: (objectIds?: string[], objectTypes?: Coll
     sending: boolean;
     loading: boolean;
     objectTypes: CollaborationObjectTypes[];
+    getComments: (relatedObjectUri: string, pageToken?: string) => void;
+    pageToken: string;
 };

package/hooks/useCollaboration.js

@@ -33,10 +33,12 @@ var useCollaboration = function (objectIds, objectTypes) {
     var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
     var collaborationPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getCollaborationPath);
     var isCollaborationEnabled = react_redux_1.useSelector(mdm_module_1.default.selectors.isCollaborationEnabled);
-    var _a = react_1.useState(null), commentsMap = _a[0], setCommentsMap = _a[1];
-    var _b = react_1.useState(null), currentComment = _b[0], setCurrentComment = _b[1];
-    var _c = react_1.useState(false), sending = _c[0], setSending = _c[1];
-    var _d = react_1.useState(false), loading = _d[0], setLoading = _d[1];
+    var _a = react_1.useState(null), pageToken = _a[0], setPageToken = _a[1];
+    var _b = react_1.useState([]), comments = _b[0], setComments = _b[1];
+    var _c = react_1.useState(null), commentsMap = _c[0], setCommentsMap = _c[1];
+    var _d = react_1.useState(null), currentComment = _d[0], setCurrentComment = _d[1];
+    var _e = react_1.useState(false), sending = _e[0], setSending = _e[1];
+    var _f = react_1.useState(false), loading = _f[0], setLoading = _f[1];
     react_1.useEffect(function () {
         if (isCollaborationEnabled && entity) {
             var onError = function (e) {
@@ -49,6 +51,20 @@ var useCollaboration = function (objectIds, objectTypes) {
             setCommentsMap(null);
         }
     }, [entity, isCollaborationEnabled, tenant, collaborationPath, objectIds]);
+    var getComments = react_1.useCallback(function (relatedObjectUri, pageToken) {
+        mdm_sdk_1.getComments({ collaborationPath: collaborationPath, tenant: tenant, relatedObjectUri: relatedObjectUri, pageToken: pageToken })
+            .then(function (_a) {
+            var items = _a.items, nextPageToken = _a.nextPageToken;
+            setComments(function (prevComments) {
+                if (!pageToken) {
+                    return items;
+                }
+                return ramda_1.uniqBy(ramda_1.prop('commentId'), __spreadArray(__spreadArray([], prevComments), items));
+            });
+            setPageToken(nextPageToken);
+        })
+            .catch(catchErrorInRequest);
+    }, [collaborationPath, tenant]);
     var getComment = react_1.useCallback(function (commentId) {
         setLoading(true);
         mdm_sdk_1.getComment({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId })
@@ -62,17 +78,11 @@ var useCollaboration = function (objectIds, objectTypes) {
             var _a;
             return __assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = __spreadArray(__spreadArray([], (prevCommentsMap[uri] || [])), [{ commentId: comment.commentId, replies: 0, status: 'open' }]), _a));
         });
+        setComments(function (prevComments) { return __spreadArray([comment], prevComments); });
     };
-    var updateCommentInState = function (comment, uri) {
+    var updateCommentInState = function (comment) {
         setCurrentComment(comment);
-        setCommentsMap(function (prevCommentsMap) {
-            var _a;
-            var comments = (prevCommentsMap[uri] || []).map(function (c) {
-                return c.commentId === comment.commentId
-                    ? __assign(__assign({}, comment), { replies: (typeof comment.replies === 'number' ? comment.replies : comment.replies.length) || 0 }) : c;
-            });
-            return __assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = comments, _a));
-        });
+        setComments(ramda_1.map(ramda_1.when(ramda_1.propEq('commentId', comment.commentId), ramda_1.always(comment))));
     };
     var deleteCommentFromState = function (commentId, uri) {
         setCurrentComment(null);
@@ -81,6 +91,9 @@ var useCollaboration = function (objectIds, objectTypes) {
             var comments = prevCommentsMap[uri] || [];
             return __assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = comments.filter(function (c) { return c.commentId !== commentId; }), _a));
         });
+        setComments(function (prevComments) {
+            return prevComments.filter(function (comment) { return comment.commentId !== commentId; });
+        });
     };
     var createComment = react_1.useCallback(function (_a) {
         var content = _a.content, namedUsers = _a.namedUsers, objectType = _a.objectType, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris;
@@ -117,7 +130,7 @@ var useCollaboration = function (objectIds, objectTypes) {
             replies: replies
         };
         return mdm_sdk_1.updateComment({ collaborationPath: collaborationPath, tenant: tenant, data: data })
-            .then(function (comment) { return updateCommentInState(__assign(__assign({}, comment), { replies: replies }), uri); })
+            .then(function (comment) { return updateCommentInState(__assign(__assign({}, comment), { replies: replies })); })
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
     }, [collaborationPath, tenant]);
@@ -129,7 +142,7 @@ var useCollaboration = function (objectIds, objectTypes) {
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
     }, [collaborationPath, tenant]);
-    var updateReply = react_1.useCallback(function (reply, uri, commentId) {
+    var updateReplyInState = react_1.useCallback(function (reply, uri, commentId) {
         var newStatus = reply.action === 'resolve' ? 'resolved' : 'open';
         if (newStatus === 'resolved') {
             setCurrentComment(function (prevCurrentComment) {
@@ -154,6 +167,14 @@ var useCollaboration = function (objectIds, objectTypes) {
                 return comment;
             }), _a)));
         });
+        setComments(function (prevComments) {
+            return prevComments.map(function (comment) {
+                if (comment.commentId === commentId) {
+                    return __assign(__assign({}, comment), { status: newStatus, replies: __spreadArray(__spreadArray([], comment.replies), [reply]) });
+                }
+                return comment;
+            });
+        });
     }, []);
     var createReply = react_1.useCallback(function (_a) {
         var content = _a.content, namedUsers = _a.namedUsers, commentId = _a.commentId, action = _a.action, uri = _a.uri;
@@ -166,11 +187,11 @@ var useCollaboration = function (objectIds, objectTypes) {
         return mdm_sdk_1.createReply({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId, data: data })
             .then(function (_a) {
             var reply = _a[0];
-            return updateReply(reply, uri, commentId);
+            return updateReplyInState(reply, uri, commentId);
         })
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
-    }, [collaborationPath, tenant, updateReply]);
+    }, [collaborationPath, tenant, updateReplyInState]);
     var resolveThread = react_1.useCallback(function (_a) {
         var commentId = _a.commentId, uri = _a.uri;
         createReply({ content: '', namedUsers: [], commentId: commentId, action: 'resolve', uri: uri });
@@ -185,6 +206,7 @@ var useCollaboration = function (objectIds, objectTypes) {
     return {
         commentsMap: commentsMap,
         currentComment: currentComment,
+        comments: comments,
         getComment: getComment,
         createReply: createReply,
         editComment: editComment,
@@ -195,7 +217,9 @@ var useCollaboration = function (objectIds, objectTypes) {
         reOpenThread: reOpenThread,
         sending: sending,
         loading: loading,
-        objectTypes: objectTypes
+        objectTypes: objectTypes,
+        getComments: getComments,
+        pageToken: pageToken
     };
 };
 exports.useCollaboration = useCollaboration;

package/icons/Draw.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgDraw: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgDraw;

package/icons/Draw.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SvgDraw = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" }, props),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("path", { d: "M18.29 11.44a1.49 1.49 0 012.12 0l1.15 1.15c.59.58.59 1.53 0 2.12L16.27 20H13v-3.27zM18.174 4c0 1.71-.26 3.285-.932 4.563-.946 1.798-2.609 2.724-4.906 2.46l-.855-.116c-4.382-.544-6.626.53-6.626 3.609 0 1.968 1.105 2.924 3.267 3.304.692.121 1.306.165 2.234.176L11 18v2l-.698-.003c-1.016-.013-1.71-.063-2.526-.206-3.018-.53-4.921-2.176-4.921-5.274 0-4.819 3.71-6.378 9.52-5.505 1.575.237 2.506-.255 3.098-1.38.451-.858.666-2.02.697-3.307L16.174 4h2zM18 13.97l-3.45 3.45v1.03h1.03L19.03 15 18 13.97z", id: "draw_svg__a" })),
+        react_1.default.createElement("g", { stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" },
+            react_1.default.createElement("mask", { id: "draw_svg__b", fill: "#fff" },
+                react_1.default.createElement("use", { xlinkHref: "#draw_svg__a" })),
+            react_1.default.createElement("g", { mask: "url(#draw_svg__b)", fill: "#000", fillOpacity: 0.54 },
+                react_1.default.createElement("path", { d: "M0 0h24v24H0z" })))));
+};
+exports.default = SvgDraw;

package/icons/Polygon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgPolygon: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgPolygon;

package/icons/Polygon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SvgPolygon = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { d: "M3.796 11.99A2 2 0 114.855 8.19l5.19-3.77a2 2 0 113.911 0l5.19 3.77a2 2 0 111.058 3.798l-1.812 5.575a2 2 0 11-3.05 2.555H8.658a2 2 0 11-3.05-2.555L3.796 11.99zM5.987 9.77a1.991 1.991 0 01-.398 1.444l1.899 5.845c.596.15 1.086.566 1.334 1.115h6.356c.248-.55.738-.966 1.334-1.115l1.9-5.845a1.991 1.991 0 01-.4-1.444l-5.346-3.884a1.997 1.997 0 01-1.332 0L5.987 9.77z", fill: "#000", fillRule: "nonzero", stroke: "none", strokeWidth: 1, opacity: 0.54 })));
+};
+exports.default = SvgPolygon;

package/icons/Radius.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgRadius: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgRadius;

package/icons/Radius.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SvgRadius = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: 18, height: 18, viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { d: "M10.61 8.568A1.666 1.666 0 119.432 7.39l3.656-3.657a6.668 6.668 0 101.179 1.179L10.61 8.568zm-7.503 6.325A8.333 8.333 0 1114.893 3.107 8.333 8.333 0 013.107 14.893z", fill: "#000", stroke: "none", strokeWidth: 1, fillRule: "evenodd", opacity: 0.54 })));
+};
+exports.default = SvgRadius;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.816",
+  "version": "1.4.820",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
-    "@reltio/mdm-module": "^1.4.816",
-    "@reltio/mdm-sdk": "^1.4.816",
+    "@react-google-maps/api": "^2.7.0",
+    "@reltio/mdm-module": "^1.4.820",
+    "@reltio/mdm-sdk": "^1.4.820",
     "classnames": "^2.2.5",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",