@reltio/components 1.4.809 → 1.4.813

package/components/ReltioMap/EntityMarker/EntityMarker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MarkerProps } from '@react-google-maps/api';
+import { EntityMarker as EntityMarkerType } from '../types';
+declare type Props = {
+    marker: EntityMarkerType;
+    onClick: (marker: EntityMarkerType) => void;
+} & Omit<MarkerProps, 'onClick' | 'icon' | 'position' | 'visible' | 'onMouseOver' | 'onMouseOut'>;
+declare const _default: React.MemoExoticComponent<({ marker, onClick, ...otherProps }: Props) => JSX.Element>;
+export default _default;

package/components/ReltioMap/EntityMarker/EntityMarker.js

@@ -0,0 +1,91 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var api_1 = require("@react-google-maps/api");
+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 styles_1 = require("./styles");
+var HIDE_DEBOUNCE_INTERVAL = 50;
+var MARKER_WIDTH = 22;
+var MARKER_HEIGHT = 32;
+var MARKER_CARD_MARGIN = 8;
+var EntityMarker = function (_a) {
+    var marker = _a.marker, onClick = _a.onClick, otherProps = __rest(_a, ["marker", "onClick"]);
+    var styles = styles_1.useStyles();
+    var popperAnchor = react_1.useRef();
+    var _b = react_1.useState(false), hovered = _b[0], setHovered = _b[1];
+    var activeEntityUri = react_1.useContext(contexts_1.EntityMarkerContext).activeEntityUri;
+    var isActive = ramda_1.pathEq(['entity', 'uri'], activeEntityUri, marker);
+    var position = { lat: marker.point.lat, lng: marker.point.lng };
+    var setHoveredDebounced = react_1.useCallback(mdm_sdk_1.debounce(setHovered, HIDE_DEBOUNCE_INTERVAL), []);
+    var onMouseOver = react_1.useCallback(function () { return setHoveredDebounced(true); }, [setHoveredDebounced]);
+    var onMouseOut = react_1.useCallback(function () { return setHoveredDebounced(false); }, [setHoveredDebounced]);
+    var handleClick = react_1.useCallback(function () { return onClick(marker); }, [onClick, marker]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        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,
+                // 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)),
+        react_1.default.createElement(api_1.InfoBox, { options: {
+                alignBottom: true,
+                pane: 'mapPane',
+                pixelOffset: new google.maps.Size(0, -(MARKER_HEIGHT + MARKER_CARD_MARGIN)),
+                closeBoxURL: '',
+                enableEventPropagation: true,
+                disableAutoPan: true
+            }, position: position },
+            react_1.default.createElement("span", { ref: popperAnchor }))));
+};
+exports.default = react_1.memo(EntityMarker);

package/components/ReltioMap/EntityMarker/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"popper">;

package/components/ReltioMap/EntityMarker/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    popper: {
+        maxWidth: '263px',
+        minWidth: '150px',
+        boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
+        backgroundColor: 'white',
+        borderRadius: '2px'
+    }
+});

package/components/ReltioMap/MapControls/MapControlContainer/MapControlContrainer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MapInstance } from '../../types';
+declare type Props = {
+    children: React.ReactNode;
+    className?: string;
+    position: number;
+    map: MapInstance;
+};
+export declare const MapControlContainer: ({ children, className, position, map }: Props) => React.ReactPortal;
+export {};

package/components/ReltioMap/MapControls/MapControlContainer/MapControlContrainer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapControlContainer = void 0;
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var MapControlContainer = function (_a) {
+    var children = _a.children, className = _a.className, position = _a.position, map = _a.map;
+    var _b = react_1.useState(null), controlElement = _b[0], setControlElement = _b[1];
+    react_1.useEffect(function () {
+        var controlDiv = document.createElement('div');
+        var divIndex = map.controls[position].length;
+        map.controls[position].push(controlDiv);
+        setControlElement(controlDiv);
+        return function () {
+            map.controls[position].removeAt(divIndex);
+        };
+    }, [map, position]);
+    react_1.useEffect(function () {
+        if (controlElement && className) {
+            controlElement.classList.add(className);
+        }
+    }, [className, controlElement]);
+    if (controlElement) {
+        return react_dom_1.createPortal(children, controlElement);
+    }
+    return null;
+};
+exports.MapControlContainer = MapControlContainer;

package/components/ReltioMap/MapControls/TopCenterMapControls/TopCenterMapControls.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    isSearchOnMapMove: boolean;
+    onChangeIsSearchOnMapMove: (value: boolean) => void;
+};
+export declare const TopCenterMapControls: ({ isSearchOnMapMove, onChangeIsSearchOnMapMove }: Props) => JSX.Element;
+export {};

package/components/ReltioMap/MapControls/TopCenterMapControls/TopCenterMapControls.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopCenterMapControls = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlLabel"));
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
+var styles_1 = require("./styles");
+var TopCenterMapControls = function (_a) {
+    var isSearchOnMapMove = _a.isSearchOnMapMove, onChangeIsSearchOnMapMove = _a.onChangeIsSearchOnMapMove;
+    var styles = styles_1.useStyles();
+    var onChange = function (event) {
+        onChangeIsSearchOnMapMove(event.target.checked);
+    };
+    return (react_1.default.createElement(FormControlLabel_1.default, { classes: {
+            root: styles.container,
+            label: styles.label
+        }, control: react_1.default.createElement(Checkbox_1.default, { checked: isSearchOnMapMove, onChange: onChange, color: "primary", className: styles.checkbox }), label: ui_i18n_1.default.text('Search as I move the map') }));
+};
+exports.TopCenterMapControls = TopCenterMapControls;

package/components/ReltioMap/MapControls/TopCenterMapControls/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "checkbox" | "container">;

package/components/ReltioMap/MapControls/TopCenterMapControls/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    container: {
+        height: '28px',
+        marginRight: '7px',
+        marginLeft: 0
+    },
+    label: {
+        fontSize: '11px',
+        alignSelf: 'center',
+        lineHeight: '13px',
+        marginLeft: '2px',
+        letterSpacing: 0
+    },
+    checkbox: {
+        width: '20px',
+        height: '20px',
+        padding: '5px',
+        '& svg': {
+            width: '16px',
+            height: '16px'
+        }
+    }
+});

package/components/ReltioMap/MapControls/TopRightMapControls/TopRightMapControls.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { DrawingMode, DrawingModes } from '../../types';
+export declare const ButtonWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
+    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+    tooltipPlacement: import("prop-types").Requireable<string>;
+    showForDisabled: import("prop-types").Requireable<boolean>;
+}, never>> & Partial<import("prop-types").InferPropsInner<Pick<{
+    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+    tooltipPlacement: import("prop-types").Requireable<string>;
+    showForDisabled: import("prop-types").Requireable<boolean>;
+}, "tooltipTitle" | "tooltipPlacement" | "showForDisabled">>> & {
+    children?: React.ReactNode;
+    color?: import("@material-ui/core").PropTypes.Color;
+    disabled?: boolean;
+    disableElevation?: boolean;
+    disableFocusRipple?: boolean;
+    endIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    href?: string;
+    size?: "medium" | "large" | "small";
+    startIcon?: React.ReactNode;
+    variant?: "text" | "outlined" | "contained";
+} & {
+    action?: React.Ref<import("@material-ui/core").ButtonBaseActions>;
+    buttonRef?: React.Ref<unknown>;
+    centerRipple?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    disableRipple?: boolean;
+    disableTouchRipple?: boolean;
+    focusRipple?: boolean;
+    focusVisibleClassName?: string;
+    onFocusVisible?: React.FocusEventHandler<any>;
+    tabIndex?: string | number;
+    TouchRippleProps?: Partial<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleProps>;
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").ExtendButtonBaseTypeMap<import("@material-ui/core/Button").ButtonTypeMap<{}, "button">>> & Pick<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}, "type" | "hidden" | "name" | "prefix" | "value" | "defaultValue" | "id" | "title" | "translate" | "ref" | "onScroll" | "form" | "slot" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget">>;
+declare type Props = {
+    onDrawingModeChanged: (value: DrawingMode | null) => void;
+    drawingMode: DrawingMode | null;
+    drawingModes: DrawingModes;
+    hasActiveOverlay: boolean;
+    onClearOverlay: () => void;
+};
+export declare const TopRightMapControls: ({ drawingMode, drawingModes, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopRightMapControls = exports.ButtonWithTooltip = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+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 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;
+        case constants_1.MAP_DRAWING_MODES.POLYGON:
+            return draw_svg_1.default;
+        default:
+            return null;
+    }
+};
+var TopRightMapControls = function (_a) {
+    var drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
+    var styles = styles_1.useStyles();
+    var changeDrawingModeTo = function (drawingMode) { return function () {
+        onDrawingModeChanged(drawingMode);
+    }; };
+    return (react_1.default.createElement("div", { className: styles.container }, drawingMode || hasActiveOverlay ? (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
+        react_1.default.createElement(HighlightOff_1.default, { className: styles.icon }))) : (drawingModes.map(function (mode) {
+        var Icon = getIcon(mode);
+        return (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },
+            react_1.default.createElement(Icon, { className: styles.icon })));
+    }))));
+};
+exports.TopRightMapControls = TopRightMapControls;

package/components/ReltioMap/MapControls/TopRightMapControls/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "icon" | "container">;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    container: {
+        margin: '2px',
+        display: 'flex',
+        alignItems: 'center'
+    },
+    button: {
+        color: 'rgba(0,0,0,0.54)',
+        padding: 0,
+        height: '24px',
+        width: '24px',
+        minWidth: 0
+    },
+    icon: {
+        width: '20px',
+        height: '20px'
+    }
+});

package/components/ReltioMap/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const MAP_DRAWING_MODES: {
+    CIRCLE: string;
+    POLYGON: string;
+};
+export declare const DEFAULT_OVERLAY_OPTIONS: {
+    fillColor: string;
+    fillOpacity: number;
+    strokeWeight: number;
+    strokeColor: string;
+    clickable: boolean;
+    editable: boolean;
+    zIndex: number;
+};
+export declare const MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/components/ReltioMap/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.MAP_DRAWING_MODES = void 0;
+exports.MAP_DRAWING_MODES = {
+    CIRCLE: 'circle',
+    POLYGON: 'polygon'
+};
+exports.DEFAULT_OVERLAY_OPTIONS = {
+    fillColor: 'rgb(242,82,82)',
+    fillOpacity: 0.1,
+    strokeWeight: 2,
+    strokeColor: '#F25252',
+    clickable: false,
+    editable: true,
+    zIndex: 1
+};
+exports.MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/components/ReltioMap/helpers/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="google.maps" />
+import { DrawingMode, EntityMarker, Overlay, MapInstance } from '../types';
+export declare const getMapBoundsPolygon: (map: MapInstance) => any[];
+export declare const getDrawingMode: (drawingMode: DrawingMode) => google.maps.drawing.OverlayType.CIRCLE | google.maps.drawing.OverlayType.POLYGON;
+export declare const fitMapBoundsForMarkers: (markers: EntityMarker[], map: MapInstance, overlay: Overlay) => void;
+export declare const fitMapBoundsForOverlay: (map: MapInstance, overlay: Overlay, existingBounds?: any) => void;

package/components/ReltioMap/helpers/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fitMapBoundsForOverlay = exports.fitMapBoundsForMarkers = exports.getDrawingMode = exports.getMapBoundsPolygon = void 0;
+var constants_1 = require("../constants");
+var getMapBoundsPolygon = function (map) {
+    var bounds = map.getBounds();
+    var ne = bounds.getNorthEast();
+    var sw = bounds.getSouthWest();
+    var neLat = ne.lat(), neLng = ne.lng(), swLat = sw.lat(), swLng = sw.lng();
+    var additionalPoint1 = [];
+    var additionalPoint2 = [];
+    if (!((neLng === 180 && swLng === -180) || (neLng === -180 && swLng === 180))) {
+        // excluding corner case when we see more than one "map unfolding" (in this case google maps automatically set 180 and -180),
+        // we can't describe map bounds as just rectangle, because lng distance can be more than 180",
+        // so we need to add additional points to have correct polygon
+        var center = bounds.getCenter();
+        additionalPoint1.push([neLat, center.lng()]);
+        additionalPoint2.push([swLat, center.lng()]);
+    }
+    return __spreadArray(__spreadArray(__spreadArray(__spreadArray([[neLat, neLng]], additionalPoint1), [[neLat, swLng], [swLat, swLng]]), additionalPoint2), [[swLat, neLng]]);
+};
+exports.getMapBoundsPolygon = getMapBoundsPolygon;
+var getDrawingMode = function (drawingMode) {
+    switch (drawingMode) {
+        case constants_1.MAP_DRAWING_MODES.CIRCLE:
+            return window.google.maps.drawing.OverlayType.CIRCLE;
+        case constants_1.MAP_DRAWING_MODES.POLYGON:
+            return window.google.maps.drawing.OverlayType.POLYGON;
+        default:
+            return null;
+    }
+};
+exports.getDrawingMode = getDrawingMode;
+var fitMapBoundsForMarkers = function (markers, map, overlay) {
+    var bounds = new window.google.maps.LatLngBounds();
+    markers.forEach(function (marker) { return bounds.extend(marker.point); });
+    if (markers.length === 1) {
+        var center = bounds.getCenter();
+        bounds.extend(new window.google.maps.LatLng(center.lat() + constants_1.MAP_MINIMUM_SCALE_RADIUS, center.lng() + constants_1.MAP_MINIMUM_SCALE_RADIUS));
+        bounds.extend(new window.google.maps.LatLng(center.lat() - constants_1.MAP_MINIMUM_SCALE_RADIUS, center.lng() - constants_1.MAP_MINIMUM_SCALE_RADIUS));
+    }
+    map.fitBounds(bounds);
+    if (overlay) {
+        exports.fitMapBoundsForOverlay(map, overlay, bounds);
+    }
+};
+exports.fitMapBoundsForMarkers = fitMapBoundsForMarkers;
+var fitMapBoundsForOverlay = function (map, overlay, existingBounds) {
+    if (overlay.path) {
+        var bounds_1 = existingBounds || new window.google.maps.LatLngBounds();
+        overlay.path.forEach(function (_a) {
+            var lat = _a.lat, lng = _a.lng;
+            return bounds_1.extend(new window.google.maps.LatLng(lat, lng));
+        });
+        map.fitBounds(bounds_1);
+    }
+};
+exports.fitMapBoundsForOverlay = fitMapBoundsForOverlay;

package/components/ReltioMap/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+/// <reference types="google.maps" />
+import { GoogleMapProps, MarkerClustererProps } from '@react-google-maps/api';
+import { DrawingModes, EntityMarker as Marker, MapBounds, Overlay, OverlayPath } from './types';
+declare type Props = {
+    markers: Marker[];
+    mapKey: string;
+    defaultZoom: GoogleMapProps['zoom'];
+    defaultCenter: GoogleMapProps['center'];
+    loadingElement: JSX.Element;
+    isSearchOnMapMove?: boolean;
+    isSearchEnabled?: boolean;
+    activeOverlay?: Overlay;
+    overlayOptions?: google.maps.PolygonOptions | google.maps.CircleOptions;
+    drawingModes?: DrawingModes;
+    markerClusterer?: boolean;
+    markerClustererOptions?: MarkerClustererProps['options'];
+    mapContainerClassName: string;
+    onMapBoundsChanged?: (value: MapBounds | null) => void;
+    onOverlayUpdated?: (value: {
+        data: OverlayPath;
+        type: string;
+    }) => void;
+    onMarkerClicked?: (value: Marker) => void;
+};
+export declare const ReltioMap: ({ markers, mapKey, defaultZoom, defaultCenter, loadingElement, isSearchOnMapMove, isSearchEnabled, activeOverlay, overlayOptions, drawingModes, markerClusterer, markerClustererOptions, mapContainerClassName, onMapBoundsChanged, onOverlayUpdated, onMarkerClicked }: Props) => JSX.Element;
+export {};

package/components/ReltioMap/index.js

@@ -0,0 +1,162 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReltioMap = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var api_1 = require("@react-google-maps/api");
+var MapControlContrainer_1 = require("./MapControls/MapControlContainer/MapControlContrainer");
+var TopRightMapControls_1 = require("./MapControls/TopRightMapControls/TopRightMapControls");
+var TopCenterMapControls_1 = require("./MapControls/TopCenterMapControls/TopCenterMapControls");
+var helpers_1 = require("./helpers");
+var EntityMarker_1 = __importDefault(require("./EntityMarker/EntityMarker"));
+var constants_1 = require("../../constants");
+var styles_1 = require("./styles");
+var hooks_1 = require("../../hooks");
+var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
+var libraries = ['drawing'];
+var useFitMapBounds = function (_a) {
+    var markers = _a.markers, activeOverlay = _a.activeOverlay, isSearchOnMapMove = _a.isSearchOnMapMove, map = _a.map;
+    var prevMarkers = hooks_1.usePrevious(markers);
+    var prevActiveOverlay = hooks_1.usePrevious(activeOverlay);
+    var apiIsLoaded = map && window.google;
+    react_1.useEffect(function () {
+        if (apiIsLoaded && !isSearchOnMapMove && markers.length && markers !== prevMarkers) {
+            helpers_1.fitMapBoundsForMarkers(markers, map, activeOverlay);
+        }
+        else if (apiIsLoaded && activeOverlay && activeOverlay !== prevActiveOverlay) {
+            helpers_1.fitMapBoundsForOverlay(map, activeOverlay);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [map, markers, activeOverlay]);
+};
+var ReltioMap = function (_a) {
+    var _b = _a.markers, markers = _b === void 0 ? [] : _b, mapKey = _a.mapKey, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, overlayOptions = _a.overlayOptions, _c = _a.drawingModes, drawingModes = _c === void 0 ? [] : _c, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, mapContainerClassName = _a.mapContainerClassName, onMapBoundsChanged = _a.onMapBoundsChanged, onOverlayUpdated = _a.onOverlayUpdated, onMarkerClicked = _a.onMarkerClicked;
+    var styles = styles_1.useStyles();
+    var _d = api_1.useJsApiLoader({
+        googleMapsApiKey: mapKey,
+        libraries: libraries
+    }), isLoaded = _d.isLoaded, loadError = _d.loadError;
+    var mapMoveEndTimer = react_1.useRef(null);
+    var _e = react_1.useState(null), map = _e[0], setMap = _e[1];
+    var _f = react_1.useState(null), polygon = _f[0], setPolygon = _f[1];
+    var _g = react_1.useState(null), drawingMode = _g[0], setDrawingMode = _g[1];
+    useFitMapBounds({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
+    var allOverlayOptions = react_1.useMemo(function () { return (__assign(__assign({}, constants_1.DEFAULT_OVERLAY_OPTIONS), (overlayOptions || {}))); }, [overlayOptions]);
+    var handleChangeIsSearchOnMapMove = react_1.useCallback(function (isSearchOnMapMove) {
+        onMapBoundsChanged(isSearchOnMapMove ? helpers_1.getMapBoundsPolygon(map) : null);
+        setDrawingMode(null);
+        clearTimeout(mapMoveEndTimer.current);
+    }, [map, onMapBoundsChanged]);
+    var handleMapMoveStart = react_1.useCallback(function () {
+        clearTimeout(mapMoveEndTimer.current);
+    }, []);
+    var handleMapMoveEnd = react_1.useCallback(function () {
+        if (isSearchOnMapMove) {
+            onMapBoundsChanged(helpers_1.getMapBoundsPolygon(map));
+        }
+    }, [isSearchOnMapMove, map, onMapBoundsChanged]);
+    var handleMapIdle = react_1.useCallback(function () {
+        if (isSearchOnMapMove) {
+            clearTimeout(mapMoveEndTimer.current);
+            mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
+        }
+    }, [handleMapMoveEnd, isSearchOnMapMove]);
+    var handleOverlayChange = react_1.useCallback(function (e, propOverlay) {
+        var _a;
+        var stateOverlay = propOverlay ||
+            (polygon && {
+                type: constants_1.MAP_DRAWING_MODES.POLYGON,
+                overlay: polygon
+            });
+        if (!ramda_1.isEmpty(stateOverlay) && typeof onOverlayUpdated === 'function') {
+            var overlay_1 = stateOverlay.overlay, type = stateOverlay.type;
+            var typeActions = (_a = {},
+                _a[constants_1.MAP_DRAWING_MODES.POLYGON] = function () {
+                    return overlay_1
+                        .getPath()
+                        .getArray()
+                        .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
+                },
+                _a[constants_1.MAP_DRAWING_MODES.CIRCLE] = function () {
+                    return { radius: overlay_1.getRadius() / 1000, center: overlay_1.getCenter() };
+                },
+                _a);
+            var data = typeActions[type] && typeActions[type]();
+            data && onOverlayUpdated({ data: data, type: type });
+        }
+    }, [onOverlayUpdated, polygon]);
+    var handleOverlayComplete = react_1.useCallback(function (type) { return function (overlay) {
+        handleOverlayChange(null, { type: type, overlay: overlay });
+        overlay.setMap(null);
+        setDrawingMode(null);
+    }; }, [handleOverlayChange]);
+    var handleClearOverlay = react_1.useCallback(function () {
+        onOverlayUpdated(null);
+    }, [onOverlayUpdated]);
+    var renderMarkers = function (clusterer) {
+        return markers
+            .filter(ramda_1.prop('point'))
+            .map(function (marker) { return (react_1.default.createElement(EntityMarker_1.default, { key: marker.id, marker: marker, clusterer: clusterer, onClick: onMarkerClicked })); });
+    };
+    var renderMarkerClusterer = function (options) {
+        return react_1.default.createElement(api_1.MarkerClusterer, { options: options }, renderMarkers);
+    };
+    if (loadError) {
+        return null;
+    }
+    if (!isLoaded) {
+        return loadingElement;
+    }
+    return (react_1.default.createElement(api_1.GoogleMap, { mapTypeId: window.google.maps.MapTypeId.ROADMAP, options: {
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: false
+        }, onLoad: setMap, zoom: defaultZoom, center: defaultCenter, onZoomChanged: handleMapMoveStart, onDragStart: handleMapMoveStart, onIdle: handleMapIdle, mapContainerClassName: mapContainerClassName },
+        map && isSearchEnabled && Boolean(drawingModes.length) && (react_1.default.createElement(MapControlContrainer_1.MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_RIGHT, map: map },
+            react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+        map && isSearchEnabled && (react_1.default.createElement(MapControlContrainer_1.MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_CENTER, map: map },
+            react_1.default.createElement(TopCenterMapControls_1.TopCenterMapControls, { onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
+        markerClusterer ? renderMarkerClusterer(markerClustererOptions) : renderMarkers(),
+        !helpers_1.getDrawingMode(drawingMode) &&
+            activeOverlay &&
+            ramda_1.propEq('type', constants_1.MAP_DRAWING_MODES.POLYGON, activeOverlay) && (react_1.default.createElement(api_1.Polygon, { onLoad: setPolygon, path: activeOverlay.path, editable: true, options: allOverlayOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
+        isSearchEnabled && Boolean(drawingModes.length) && (react_1.default.createElement(api_1.DrawingManager, { onPolygonComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.CIRCLE), drawingMode: helpers_1.getDrawingMode(drawingMode), options: {
+                drawingControl: false,
+                circleOptions: allOverlayOptions,
+                polygonOptions: allOverlayOptions
+            } }))));
+};
+exports.ReltioMap = ReltioMap;

package/components/ReltioMap/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"mapControlContainer">;

package/components/ReltioMap/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    mapControlContainer: {
+        borderRadius: '2px',
+        backgroundColor: '#FFFFFF',
+        boxShadow: '0 1px 3px 0 rgba(0,0,0,0.15)',
+        margin: '10px'
+    }
+});

package/components/ReltioMap/types.d.ts

@@ -0,0 +1,23 @@
+import { Entity } from '@reltio/mdm-sdk';
+export declare type DrawingMode = 'circle' | 'polygon';
+export declare type DrawingModes = DrawingMode[];
+export declare type EntityMarker = {
+    entity: Entity;
+    id: string;
+    label: string;
+    point: {
+        lat: number;
+        lng: number;
+    };
+    visible?: boolean;
+};
+export declare type OverlayPath = Array<{
+    lat: number;
+    lng: number;
+}>;
+export declare type Overlay = {
+    path: OverlayPath;
+    type: string;
+};
+export declare type MapInstance = any;
+export declare type MapBounds = [number, number][];

package/components/ReltioMap/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/attributes/inline/ComplexAttribute/ComplexAttribute.js

@@ -58,7 +58,7 @@ var ComplexAttribute = function (_a) {
             react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
             react_1.default.createElement("span", null,
                 label,
-                crosswalks.map(function (crosswalk) { return (react_1.default.createElement(CrosswalkIcon_1.default, { key: crosswalk.value, crosswalk: crosswalk, className: styles.crosswalkIcon })); })),
+                crosswalks.map(function (crosswalk) { return (react_1.default.createElement(CrosswalkIcon_1.default, { key: mdm_sdk_1.getCrosswalkId(crosswalk), crosswalk: crosswalk, className: styles.crosswalkIcon })); })),
             react_1.default.createElement(index_1.Spacer, null),
             react_1.default.createElement("div", { className: styles.actions },
                 showPin && react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } }),

package/components/crosswalks/CrosswalkAttributes/styles.js

@@ -21,7 +21,8 @@ exports.useStyles = styles_1.makeStyles(function (theme) { return ({
     attributeValue: {
         paddingLeft: 10,
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        flexGrow: 1
     },
     input: {
         paddingTop: 14,
@@ -29,7 +30,7 @@ exports.useStyles = styles_1.makeStyles(function (theme) { return ({
         fontSize: 13
     },
     editor: {
-        width: 225
+        flexGrow: 1
     },
     moreButton: {
         marginLeft: 24

package/components/crosswalks/CrosswalkEditor/CrosswalkEditor.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { Crosswalk } from '@reltio/mdm-sdk';
 declare type Props = {
+    className?: string;
     onAdd: (event: Omit<Crosswalk, 'uri'>) => void;
     onClose: () => void;
 };
-declare const CrosswalkEditor: ({ onAdd, onClose }: Props) => JSX.Element;
+declare const CrosswalkEditor: ({ className, onAdd, onClose }: Props) => JSX.Element;
 export default CrosswalkEditor;

package/components/crosswalks/CrosswalkEditor/CrosswalkEditor.js

@@ -30,14 +30,14 @@ var CrosswalkAttributes_1 = __importDefault(require("../CrosswalkAttributes/Cros
 var ramda_1 = require("ramda");
 var styles_1 = require("./styles");
 var CrosswalkEditor = function (_a) {
-    var onAdd = _a.onAdd, onClose = _a.onClose;
+    var className = _a.className, onAdd = _a.onAdd, onClose = _a.onClose;
     var styles = styles_1.useStyles();
     var _b = react_1.useState({ type: '', value: '' }), newCrosswalk = _b[0], setNewCrosswalk = _b[1];
     var handleAdd = function () {
         onAdd(newCrosswalk);
         onClose();
     };
-    return (react_1.default.createElement("div", { className: styles.wrapper },
+    return (react_1.default.createElement("div", { className: className },
         react_1.default.createElement(Typography_1.default, { variant: 'body1', className: styles.caption }, ui_i18n_1.default.text('Add crosswalk')),
         react_1.default.createElement(CrosswalkAttributes_1.default, { crosswalk: newCrosswalk, onDeleteAttribute: function (attributeName) {
                 setNewCrosswalk(ramda_1.dissoc(attributeName));

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"caption" | "wrapper" | "cancelButton" | "controlButtons">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"caption" | "cancelButton" | "controlButtons">;

package/components/crosswalks/CrosswalkEditor/styles.js

@@ -8,14 +8,10 @@ exports.useStyles = styles_1.makeStyles({
         paddingTop: 16,
         paddingBottom: 8
     },
-    wrapper: {
-        paddingLeft: 25
-    },
     controlButtons: {
         display: 'flex',
         justifyContent: 'flex-end',
         paddingBottom: 10,
-        paddingRight: 30,
         paddingTop: 20
     },
     cancelButton: {

package/components/crosswalks/hooks/useCrosswalkActions.d.ts

@@ -0,0 +1,12 @@
+import { AddCrosswalkEvent, DeleteCrosswalkEvent, EditCrosswalkEvent } from '../types';
+declare type Props = {
+    onLoad?: () => void;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+};
+export declare const useCrosswalkActions: ({ onLoad, onSuccess, onError }: Props) => {
+    addCrosswalk: ({ entity, contributorCrosswalk, crosswalk }: AddCrosswalkEvent) => void;
+    editCrosswalk: ({ entityUri, crosswalkId, attributeName, value }: EditCrosswalkEvent) => void;
+    deleteCrosswalk: ({ entityUri, crosswalkId }: DeleteCrosswalkEvent) => void;
+};
+export {};

package/components/crosswalks/hooks/useCrosswalkActions.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrosswalkActions = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var core_1 = require("../../../core");
+var useCrosswalkActions = function (_a) {
+    var _b = _a.onLoad, onLoad = _b === void 0 ? core_1.noop : _b, _c = _a.onSuccess, onSuccess = _c === void 0 ? core_1.noop : _c, _d = _a.onError, onError = _d === void 0 ? core_1.noop : _d;
+    var handleAction = react_1.useCallback(function (request) {
+        onLoad();
+        request
+            .then(function () {
+            onSuccess();
+        })
+            .catch(onError);
+    }, [onLoad, onError, onSuccess]);
+    var addCrosswalkAction = react_1.useCallback(function (_a) {
+        var entity = _a.entity, contributorCrosswalk = _a.contributorCrosswalk, crosswalk = _a.crosswalk;
+        var promise = contributorCrosswalk
+            ? mdm_sdk_1.addCrosswalkInContributor({
+                entityTypeUri: entity.type,
+                contributorCrosswalkType: contributorCrosswalk.type,
+                contributorCrosswalkValue: contributorCrosswalk.value,
+                contributorCrosswalkSourceTable: contributorCrosswalk.sourceTable,
+                crosswalkType: crosswalk.type,
+                crosswalkValue: crosswalk.value,
+                crosswalkSourceTable: crosswalk.sourceTable,
+                crosswalkDeleteDate: crosswalk.deleteDate
+            })
+            : mdm_sdk_1.addCrosswalk({ entityUri: entity.uri, crosswalk: crosswalk });
+        ramda_1.pipe(ramda_1.andThen(function (_a) {
+            var errors = _a[0].errors;
+            if (errors)
+                throw errors;
+        }), handleAction)(promise);
+    }, [handleAction]);
+    var editCrosswalkAction = react_1.useCallback(function (_a) {
+        var entityUri = _a.entityUri, crosswalkId = _a.crosswalkId, attributeName = _a.attributeName, value = _a.value;
+        ramda_1.pipe(ramda_1.ifElse(function (_a) {
+            var value = _a.value;
+            return ramda_1.isNil(value);
+        }, mdm_sdk_1.deleteCrosswalkAttribute, mdm_sdk_1.editCrosswalkAttribute), ramda_1.andThen(function (response) {
+            if (!response[0].successful)
+                throw new Error(ui_i18n_1.default.text('Failed to edit crosswalk'));
+            return response;
+        }), handleAction)({
+            entityUri: entityUri,
+            crosswalkId: crosswalkId,
+            attributeName: attributeName,
+            value: value
+        });
+    }, [handleAction]);
+    var deleteCrosswalkAction = react_1.useCallback(function (_a) {
+        var entityUri = _a.entityUri, crosswalkId = _a.crosswalkId;
+        ramda_1.pipe(mdm_sdk_1.deleteCrosswalk, ramda_1.andThen(function (response) {
+            if (response.status === 'failed')
+                throw new Error(ui_i18n_1.default.text('Failed to delete crosswalk'));
+            return response;
+        }), handleAction)({
+            entityUri: entityUri,
+            crosswalkId: crosswalkId
+        });
+    }, [handleAction]);
+    return {
+        addCrosswalk: addCrosswalkAction,
+        editCrosswalk: editCrosswalkAction,
+        deleteCrosswalk: deleteCrosswalkAction
+    };
+};
+exports.useCrosswalkActions = useCrosswalkActions;

package/components/crosswalks/index.d.ts

@@ -1,8 +1,9 @@
 export { default as AttributesTable } from './AttributesTable/AttributesTable';
 export { useModifiedEntity } from './hooks/useModifiedEntity';
+export { useCrosswalkActions } from './hooks/useCrosswalkActions';
 export { default as CrosswalkDragLayer } from './CrosswalkDragLayer/CrosswalkDragLayer';
 export { default as SourceCrosswalksRow } from './SourceCrosswalksRow/SourceCrosswalksRow';
 export { default as CrosswalkEditor } from './CrosswalkEditor/CrosswalkEditor';
 export { CrosswalkType } from './types';
-export type { CrosswalksByTypes } from './types';
+export type { CrosswalksByTypes, AddCrosswalkEvent, EditCrosswalkEvent, DeleteCrosswalkEvent } from './types';
 export { groupCrosswalksByTypesAndSources } from './utils/legend';

package/components/crosswalks/index.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.groupCrosswalksByTypesAndSources = exports.CrosswalkType = exports.CrosswalkEditor = exports.SourceCrosswalksRow = exports.CrosswalkDragLayer = exports.useModifiedEntity = exports.AttributesTable = void 0;
+exports.groupCrosswalksByTypesAndSources = exports.CrosswalkType = exports.CrosswalkEditor = exports.SourceCrosswalksRow = exports.CrosswalkDragLayer = exports.useCrosswalkActions = exports.useModifiedEntity = exports.AttributesTable = void 0;
 var AttributesTable_1 = require("./AttributesTable/AttributesTable");
 Object.defineProperty(exports, "AttributesTable", { enumerable: true, get: function () { return __importDefault(AttributesTable_1).default; } });
 var useModifiedEntity_1 = require("./hooks/useModifiedEntity");
 Object.defineProperty(exports, "useModifiedEntity", { enumerable: true, get: function () { return useModifiedEntity_1.useModifiedEntity; } });
+var useCrosswalkActions_1 = require("./hooks/useCrosswalkActions");
+Object.defineProperty(exports, "useCrosswalkActions", { enumerable: true, get: function () { return useCrosswalkActions_1.useCrosswalkActions; } });
 var CrosswalkDragLayer_1 = require("./CrosswalkDragLayer/CrosswalkDragLayer");
 Object.defineProperty(exports, "CrosswalkDragLayer", { enumerable: true, get: function () { return __importDefault(CrosswalkDragLayer_1).default; } });
 var SourceCrosswalksRow_1 = require("./SourceCrosswalksRow/SourceCrosswalksRow");

package/components/crosswalks/types/AddCrosswalkEvent.d.ts

@@ -0,0 +1,6 @@
+import { Crosswalk, Entity, Relation } from '@reltio/mdm-sdk';
+export declare type AddCrosswalkEvent = {
+    entity: Entity | Relation;
+    contributorCrosswalk?: Crosswalk;
+    crosswalk: Omit<Crosswalk, 'uri'>;
+};

package/components/crosswalks/types/AddCrosswalkEvent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/crosswalks/types/DeleteCrosswalkEvent.d.ts

@@ -0,0 +1,4 @@
+export declare type DeleteCrosswalkEvent = {
+    entityUri: string;
+    crosswalkId: string;
+};

package/components/crosswalks/types/DeleteCrosswalkEvent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/crosswalks/types/EditCrosswalkEvent.d.ts

@@ -0,0 +1,6 @@
+export declare type EditCrosswalkEvent = {
+    entityUri: string;
+    crosswalkId: string;
+    attributeName: string;
+    value?: string;
+};

package/components/crosswalks/types/EditCrosswalkEvent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/crosswalks/types/index.d.ts

@@ -2,3 +2,6 @@ export type { CrosswalksByOwnerTypeMap } from './CrosswalksByOwnerTypeMap';
 export type { CreateAttributeEvent } from './CreateAttributeEvent';
 export { CrosswalkType } from './CrosswalkType';
 export type { CrosswalksByTypes } from './CrosswalksByTypes';
+export type { AddCrosswalkEvent } from './AddCrosswalkEvent';
+export type { DeleteCrosswalkEvent } from './DeleteCrosswalkEvent';
+export type { EditCrosswalkEvent } from './EditCrosswalkEvent';

package/components/index.d.ts

@@ -115,4 +115,5 @@ export { default as Marginator } from './Marginator/Marginator';
 export { default as ConfirmationDialog } from './ConfirmationDialog/ConfirmationDialog';
 export { default as ConfirmDeleteDialog } from './ConfirmDeleteDialog/ConfirmDeleteDialog';
 export * from './crosswalks';
+export { ReltioMap } from './ReltioMap';
 export { default as ErrorMessage } from './ErrorWrapper/ErrorMessage';

package/components/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ScoreLabel = exports.Score = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = void 0;
-exports.ErrorMessage = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = void 0;
+exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -248,5 +248,7 @@ Object.defineProperty(exports, "ConfirmationDialog", { enumerable: true, get: fu
 var ConfirmDeleteDialog_1 = require("./ConfirmDeleteDialog/ConfirmDeleteDialog");
 Object.defineProperty(exports, "ConfirmDeleteDialog", { enumerable: true, get: function () { return __importDefault(ConfirmDeleteDialog_1).default; } });
 __exportStar(require("./crosswalks"), exports);
+var ReltioMap_1 = require("./ReltioMap");
+Object.defineProperty(exports, "ReltioMap", { enumerable: true, get: function () { return ReltioMap_1.ReltioMap; } });
 var ErrorMessage_1 = require("./ErrorWrapper/ErrorMessage");
 Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return __importDefault(ErrorMessage_1).default; } });

package/constants/index.d.ts

@@ -1,3 +1,4 @@
 export { COMMENTS_CONTAINER_VISIBILITY_AREA } from "./classnames";
 export { ALWAYS_VISIBLE_TYPE_URIS } from "./attributes";
 export { SortingType, ColumnFilterType, ColumnsDataType, QueryBuilderAttributeType, QueryBuilderAttributeDataType } from "./prop-types";
+export { MAP_DRAWING_MODES, DEFAULT_OVERLAY_OPTIONS, MAP_MINIMUM_SCALE_RADIUS } from "./map";

package/constants/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ALWAYS_VISIBLE_TYPE_URIS = exports.COMMENTS_CONTAINER_VISIBILITY_AREA = exports.QueryBuilderAttributeDataType = exports.QueryBuilderAttributeType = exports.ColumnsDataType = exports.ColumnFilterType = exports.SortingType = void 0;
+exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.MAP_DRAWING_MODES = exports.ALWAYS_VISIBLE_TYPE_URIS = exports.COMMENTS_CONTAINER_VISIBILITY_AREA = exports.QueryBuilderAttributeDataType = exports.QueryBuilderAttributeType = exports.ColumnsDataType = exports.ColumnFilterType = exports.SortingType = void 0;
 var prop_types_1 = require("./prop-types");
 Object.defineProperty(exports, "SortingType", { enumerable: true, get: function () { return prop_types_1.SortingType; } });
 Object.defineProperty(exports, "ColumnFilterType", { enumerable: true, get: function () { return prop_types_1.ColumnFilterType; } });
@@ -11,3 +11,7 @@ var classnames_1 = require("./classnames");
 Object.defineProperty(exports, "COMMENTS_CONTAINER_VISIBILITY_AREA", { enumerable: true, get: function () { return classnames_1.COMMENTS_CONTAINER_VISIBILITY_AREA; } });
 var attributes_1 = require("./attributes");
 Object.defineProperty(exports, "ALWAYS_VISIBLE_TYPE_URIS", { enumerable: true, get: function () { return attributes_1.ALWAYS_VISIBLE_TYPE_URIS; } });
+var map_1 = require("./map");
+Object.defineProperty(exports, "MAP_DRAWING_MODES", { enumerable: true, get: function () { return map_1.MAP_DRAWING_MODES; } });
+Object.defineProperty(exports, "DEFAULT_OVERLAY_OPTIONS", { enumerable: true, get: function () { return map_1.DEFAULT_OVERLAY_OPTIONS; } });
+Object.defineProperty(exports, "MAP_MINIMUM_SCALE_RADIUS", { enumerable: true, get: function () { return map_1.MAP_MINIMUM_SCALE_RADIUS; } });

package/constants/map.d.ts

@@ -0,0 +1,14 @@
+export declare const MAP_DRAWING_MODES: {
+    CIRCLE: string;
+    POLYGON: string;
+};
+export declare const DEFAULT_OVERLAY_OPTIONS: {
+    fillColor: string;
+    fillOpacity: number;
+    strokeWeight: number;
+    strokeColor: string;
+    clickable: boolean;
+    editable: boolean;
+    zIndex: number;
+};
+export declare const MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/constants/map.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.MAP_DRAWING_MODES = void 0;
+exports.MAP_DRAWING_MODES = {
+    CIRCLE: 'circle',
+    POLYGON: 'polygon'
+};
+exports.DEFAULT_OVERLAY_OPTIONS = {
+    fillColor: 'rgb(242,82,82)',
+    fillOpacity: 0.1,
+    strokeWeight: 2,
+    strokeColor: '#F25252',
+    clickable: false,
+    editable: true,
+    zIndex: 1
+};
+exports.MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/contexts/EntityMarkerContext/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Value = {
+    activeEntityUri?: string;
+};
+export declare const EntityMarkerContext: React.Context<Value>;
+export {};

package/contexts/EntityMarkerContext/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityMarkerContext = void 0;
+var react_1 = __importDefault(require("react"));
+exports.EntityMarkerContext = react_1.default.createContext({});
+exports.EntityMarkerContext.displayName = 'EntityMarkerContext';

package/contexts/index.d.ts

@@ -9,5 +9,6 @@ export { PivotingAttributeContext } from "./PivotingAttributeContext";
 export { ProfilePerspectiveViewContext } from "./ProfilePerspectiveViewContext";
 export { IdContext } from "./IdContext";
 export { EntitiesMapContext } from "./EntitiesMapContext";
+export { EntityMarkerContext } from "./EntityMarkerContext";
 export { CrosswalksDisplayProvider, useCrosswalkColor, useCrosswalkFocus, useCrosswalkHighlight, useHighlightedCrosswalks } from "./CrosswalksDisplayContext";
 export { ExpandedAttributesProvider, useAttributeExpanded } from "./ExpandedAttributesContext";

package/contexts/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
+exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
 var AsyncMountContext_1 = require("./AsyncMountContext");
 Object.defineProperty(exports, "AsyncMountContext", { enumerable: true, get: function () { return AsyncMountContext_1.AsyncMountContext; } });
 var HistoryAppearanceContext_1 = require("./HistoryAppearanceContext");
@@ -32,3 +32,5 @@ Object.defineProperty(exports, "useHighlightedCrosswalks", { enumerable: true, g
 var ExpandedAttributesContext_1 = require("./ExpandedAttributesContext");
 Object.defineProperty(exports, "ExpandedAttributesProvider", { enumerable: true, get: function () { return ExpandedAttributesContext_1.ExpandedAttributesProvider; } });
 Object.defineProperty(exports, "useAttributeExpanded", { enumerable: true, get: function () { return ExpandedAttributesContext_1.useAttributeExpanded; } });
+var EntityMarkerContext_1 = require("./EntityMarkerContext");
+Object.defineProperty(exports, "EntityMarkerContext", { enumerable: true, get: function () { return EntityMarkerContext_1.EntityMarkerContext; } });

package/package.json

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