@reltio/components 1.4.876 → 1.4.880

package/components/ReltioMap/EntityMarker/EntityMarker.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,25 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -40,47 +20,43 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 = require("./icons/marker.inline.svg");
-var marker_hover_inline_svg_1 = require("./icons/marker-hover.inline.svg");
-var styles_1 = require("./styles");
+import React, { memo, useCallback, useContext, useRef, useState } from 'react';
+import { pathEq } from 'ramda';
+import { Marker, InfoBox } from '@react-google-maps/api';
+import ProfileCard from '../../ProfileCard/ProfileCard';
+import Popper from '../../Popper/Popper';
+import { debounce, svg2Url } from '@reltio/mdm-sdk';
+import { EntityMarkerContext } from '../../../contexts';
+import { MARKER } from './icons/marker.inline.svg';
+import { HOVERED_MARKER } from './icons/marker-hover.inline.svg';
+import { useStyles } from './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 hoveredMarkerIcon = svg2Url(HOVERED_MARKER);
+var markerIcon = svg2Url(MARKER);
 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 styles = useStyles();
+    var popperAnchor = useRef();
+    var _b = useState(false), hovered = _b[0], setHovered = _b[1];
+    var activeEntityUri = useContext(EntityMarkerContext).activeEntityUri;
+    var isActive = 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: {
+    var setHoveredDebounced = useCallback(debounce(setHovered, HIDE_DEBOUNCE_INTERVAL), []);
+    var onMouseOver = useCallback(function () { return setHoveredDebounced(true); }, [setHoveredDebounced]);
+    var onMouseOut = useCallback(function () { return setHoveredDebounced(false); }, [setHoveredDebounced]);
+    var handleClick = useCallback(function () { return onClick(marker); }, [onClick, marker]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Popper, { anchorEl: popperAnchor.current, open: hovered, className: styles.popper, modal: false, placement: "top" },
+            React.createElement(ProfileCard, { entity: marker.entity, onMouseOver: onMouseOver, onMouseOut: onMouseOut })),
+        React.createElement(Marker, __assign({ icon: {
                 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)),
-        react_1.default.createElement(api_1.InfoBox, { options: {
+        React.createElement(InfoBox, { options: {
                 alignBottom: true,
                 pane: 'mapPane',
                 pixelOffset: new google.maps.Size(0, -(MARKER_HEIGHT + MARKER_CARD_MARGIN)),
@@ -88,6 +64,6 @@ var EntityMarker = function (_a) {
                 enableEventPropagation: true,
                 disableAutoPan: true
             }, position: position },
-            react_1.default.createElement("span", { ref: popperAnchor }))));
+            React.createElement("span", { ref: popperAnchor }))));
 };
-exports.default = react_1.memo(EntityMarker);
+export default memo(EntityMarker);

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

@@ -1,4 +1 @@
-"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>";
+export var 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.js

@@ -1,4 +1 @@
-"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>";
+export var 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/styles.js

@@ -1,8 +1,5 @@
-"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({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     popper: {
         maxWidth: '263px',
         minWidth: '150px',

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

@@ -1,12 +1,9 @@
-"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) {
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+export 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 _b = useState(null), controlElement = _b[0], setControlElement = _b[1];
+    useEffect(function () {
         var controlDiv = document.createElement('div');
         var divIndex = map.controls[position].length;
         map.controls[position].push(controlDiv);
@@ -15,14 +12,13 @@ var MapControlContainer = function (_a) {
             map.controls[position].removeAt(divIndex);
         };
     }, [map, position]);
-    react_1.useEffect(function () {
+    useEffect(function () {
         if (controlElement && className) {
             controlElement.classList.add(className);
         }
     }, [className, controlElement]);
     if (controlElement) {
-        return react_dom_1.createPortal(children, controlElement);
+        return createPortal(children, controlElement);
     }
     return null;
 };
-exports.MapControlContainer = MapControlContainer;

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

@@ -1,23 +1,16 @@
-"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) {
+import React from 'react';
+import i18n from 'ui-i18n';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import { useStyles } from './styles';
+export var TopCenterMapControls = function (_a) {
     var isSearchOnMapMove = _a.isSearchOnMapMove, onChangeIsSearchOnMapMove = _a.onChangeIsSearchOnMapMove;
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var onChange = function (event) {
         onChangeIsSearchOnMapMove(event.target.checked);
     };
-    return (react_1.default.createElement(FormControlLabel_1.default, { classes: {
+    return (React.createElement(FormControlLabel, { 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') }));
+        }, control: React.createElement(Checkbox, { checked: isSearchOnMapMove, onChange: onChange, color: "primary", className: styles.checkbox }), label: i18n.text('Search as I move the map') }));
 };
-exports.TopCenterMapControls = TopCenterMapControls;

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

@@ -1,8 +1,5 @@
-"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({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     container: {
         height: '28px',
         marginRight: '7px',

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

@@ -1,40 +1,33 @@
-"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_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);
+import React from 'react';
+import i18n from 'ui-i18n';
+import Button from '@material-ui/core/Button';
+import { withTooltip } from '../../../../HOCs';
+import HighlightOffIcon from '@material-ui/icons/HighlightOff';
+import { MAP_DRAWING_MODES } from '../../constants';
+import RadiusIcon from '../../../../icons/Radius';
+import DrawIcon from '../../../../icons/Draw';
+import { useStyles } from './styles';
+export var ButtonWithTooltip = withTooltip(Button);
 var getIcon = function (mode) {
     switch (mode) {
-        case constants_1.MAP_DRAWING_MODES.CIRCLE:
-            return Radius_1.default;
-        case constants_1.MAP_DRAWING_MODES.POLYGON:
-            return Draw_1.default;
+        case MAP_DRAWING_MODES.CIRCLE:
+            return RadiusIcon;
+        case MAP_DRAWING_MODES.POLYGON:
+            return DrawIcon;
         default:
             return null;
     }
 };
-var TopRightMapControls = function (_a) {
+export 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 styles = 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) {
+    return (React.createElement("div", { className: styles.container }, drawingMode || hasActiveOverlay ? (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
+        React.createElement(HighlightOffIcon, { 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 })));
+        return (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },
+            React.createElement(Icon, { className: styles.icon })));
     }))));
 };
-exports.TopRightMapControls = TopRightMapControls;

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

@@ -1,8 +1,5 @@
-"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({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     container: {
         margin: '2px',
         display: 'flex',

package/components/ReltioMap/constants.js

@@ -1,11 +1,8 @@
-"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 = {
+export var MAP_DRAWING_MODES = {
     CIRCLE: 'circle',
     POLYGON: 'polygon'
 };
-exports.DEFAULT_OVERLAY_OPTIONS = {
+export var DEFAULT_OVERLAY_OPTIONS = {
     fillColor: 'rgb(242,82,82)',
     fillOpacity: 0.1,
     strokeWeight: 2,
@@ -14,4 +11,4 @@ exports.DEFAULT_OVERLAY_OPTIONS = {
     editable: true,
     zIndex: 1
 };
-exports.MAP_MINIMUM_SCALE_RADIUS = 0.001;
+export var MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/components/ReltioMap/helpers/index.js

@@ -1,13 +1,10 @@
-"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) {
+import { MAP_DRAWING_MODES, MAP_MINIMUM_SCALE_RADIUS } from '../constants';
+export var getMapBoundsPolygon = function (map) {
     var bounds = map.getBounds();
     var ne = bounds.getNorthEast();
     var sw = bounds.getSouthWest();
@@ -24,33 +21,30 @@ var getMapBoundsPolygon = function (map) {
     }
     return __spreadArray(__spreadArray(__spreadArray(__spreadArray([[neLat, neLng]], additionalPoint1), [[neLat, swLng], [swLat, swLng]]), additionalPoint2), [[swLat, neLng]]);
 };
-exports.getMapBoundsPolygon = getMapBoundsPolygon;
-var getDrawingMode = function (drawingMode) {
+export var getDrawingMode = function (drawingMode) {
     switch (drawingMode) {
-        case constants_1.MAP_DRAWING_MODES.CIRCLE:
+        case MAP_DRAWING_MODES.CIRCLE:
             return window.google.maps.drawing.OverlayType.CIRCLE;
-        case constants_1.MAP_DRAWING_MODES.POLYGON:
+        case MAP_DRAWING_MODES.POLYGON:
             return window.google.maps.drawing.OverlayType.POLYGON;
         default:
             return null;
     }
 };
-exports.getDrawingMode = getDrawingMode;
-var fitMapBoundsForMarkers = function (markers, map, overlay) {
+export 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));
+        bounds.extend(new window.google.maps.LatLng(center.lat() + MAP_MINIMUM_SCALE_RADIUS, center.lng() + MAP_MINIMUM_SCALE_RADIUS));
+        bounds.extend(new window.google.maps.LatLng(center.lat() - MAP_MINIMUM_SCALE_RADIUS, center.lng() - MAP_MINIMUM_SCALE_RADIUS));
     }
     map.fitBounds(bounds);
     if (overlay) {
-        exports.fitMapBoundsForOverlay(map, overlay, bounds);
+        fitMapBoundsForOverlay(map, overlay, bounds);
     }
 };
-exports.fitMapBoundsForMarkers = fitMapBoundsForMarkers;
-var fitMapBoundsForOverlay = function (map, overlay, existingBounds) {
+export var fitMapBoundsForOverlay = function (map, overlay, existingBounds) {
     if (overlay.path) {
         var bounds_1 = existingBounds || new window.google.maps.LatLngBounds();
         overlay.path.forEach(function (_a) {
@@ -60,4 +54,3 @@ var fitMapBoundsForOverlay = function (map, overlay, existingBounds) {
         map.fitBounds(bounds_1);
     }
 };
-exports.fitMapBoundsForOverlay = fitMapBoundsForOverlay;

package/components/ReltioMap/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,107 +9,83 @@ var __assign = (this && this.__assign) || function () {
     };
     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");
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { propEq, isEmpty, prop } from 'ramda';
+import { GoogleMap, useJsApiLoader, Polygon, DrawingManager, MarkerClusterer } from '@react-google-maps/api';
+import { MapControlContainer } from './MapControls/MapControlContainer/MapControlContrainer';
+import { TopRightMapControls } from './MapControls/TopRightMapControls/TopRightMapControls';
+import { TopCenterMapControls } from './MapControls/TopCenterMapControls/TopCenterMapControls';
+import { getMapBoundsPolygon, getDrawingMode, fitMapBoundsForMarkers, fitMapBoundsForOverlay } from './helpers';
+import EntityMarker from './EntityMarker/EntityMarker';
+import { DEFAULT_OVERLAY_OPTIONS, MAP_DRAWING_MODES } from '../../constants';
+import { useStyles } from './styles';
+import { usePrevious } from '../../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 prevMarkers = usePrevious(markers);
+    var prevActiveOverlay = usePrevious(activeOverlay);
     var apiIsLoaded = map && window.google;
-    react_1.useEffect(function () {
+    useEffect(function () {
         if (apiIsLoaded && !isSearchOnMapMove && markers.length && markers !== prevMarkers) {
-            helpers_1.fitMapBoundsForMarkers(markers, map, activeOverlay);
+            fitMapBoundsForMarkers(markers, map, activeOverlay);
         }
         else if (apiIsLoaded && activeOverlay && activeOverlay !== prevActiveOverlay) {
-            helpers_1.fitMapBoundsForOverlay(map, activeOverlay);
+            fitMapBoundsForOverlay(map, activeOverlay);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [map, markers, activeOverlay]);
 };
-var ReltioMap = function (_a) {
+export 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({
+    var styles = useStyles();
+    var _d = 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];
+    var mapMoveEndTimer = useRef(null);
+    var _e = useState(null), map = _e[0], setMap = _e[1];
+    var _f = useState(null), polygon = _f[0], setPolygon = _f[1];
+    var _g = 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);
+    var allOverlayOptions = useMemo(function () { return (__assign(__assign({}, DEFAULT_OVERLAY_OPTIONS), (overlayOptions || {}))); }, [overlayOptions]);
+    var handleChangeIsSearchOnMapMove = useCallback(function (isSearchOnMapMove) {
+        onMapBoundsChanged(isSearchOnMapMove ? getMapBoundsPolygon(map) : null);
         setDrawingMode(null);
         clearTimeout(mapMoveEndTimer.current);
     }, [map, onMapBoundsChanged]);
-    var handleMapMoveStart = react_1.useCallback(function () {
+    var handleMapMoveStart = useCallback(function () {
         clearTimeout(mapMoveEndTimer.current);
     }, []);
-    var handleMapMoveEnd = react_1.useCallback(function () {
+    var handleMapMoveEnd = useCallback(function () {
         if (isSearchOnMapMove) {
-            onMapBoundsChanged(helpers_1.getMapBoundsPolygon(map));
+            onMapBoundsChanged(getMapBoundsPolygon(map));
         }
     }, [isSearchOnMapMove, map, onMapBoundsChanged]);
-    var handleMapIdle = react_1.useCallback(function () {
+    var handleMapIdle = 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 handleOverlayChange = useCallback(function (e, propOverlay) {
         var _a;
         var stateOverlay = propOverlay ||
             (polygon && {
-                type: constants_1.MAP_DRAWING_MODES.POLYGON,
+                type: MAP_DRAWING_MODES.POLYGON,
                 overlay: polygon
             });
-        if (!ramda_1.isEmpty(stateOverlay) && typeof onOverlayUpdated === 'function') {
+        if (!isEmpty(stateOverlay) && typeof onOverlayUpdated === 'function') {
             var overlay_1 = stateOverlay.overlay, type = stateOverlay.type;
             var typeActions = (_a = {},
-                _a[constants_1.MAP_DRAWING_MODES.POLYGON] = function () {
+                _a[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 () {
+                _a[MAP_DRAWING_MODES.CIRCLE] = function () {
                     return { radius: overlay_1.getRadius() / 1000, center: overlay_1.getCenter() };
                 },
                 _a);
@@ -118,21 +93,21 @@ var ReltioMap = function (_a) {
             data && onOverlayUpdated({ data: data, type: type });
         }
     }, [onOverlayUpdated, polygon]);
-    var handleOverlayComplete = react_1.useCallback(function (type) { return function (overlay) {
+    var handleOverlayComplete = useCallback(function (type) { return function (overlay) {
         handleOverlayChange(null, { type: type, overlay: overlay });
         overlay.setMap(null);
         setDrawingMode(null);
     }; }, [handleOverlayChange]);
-    var handleClearOverlay = react_1.useCallback(function () {
+    var handleClearOverlay = 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 })); });
+            .filter(prop('point'))
+            .map(function (marker) { return (React.createElement(EntityMarker, { key: marker.id, marker: marker, clusterer: clusterer, onClick: onMarkerClicked })); });
     };
     var renderMarkerClusterer = function (options) {
-        return react_1.default.createElement(api_1.MarkerClusterer, { options: options }, renderMarkers);
+        return React.createElement(MarkerClusterer, { options: options }, renderMarkers);
     };
     if (loadError) {
         return null;
@@ -140,23 +115,22 @@ var ReltioMap = function (_a) {
     if (!isLoaded) {
         return loadingElement;
     }
-    return (react_1.default.createElement(api_1.GoogleMap, { mapTypeId: window.google.maps.MapTypeId.ROADMAP, options: {
+    return (React.createElement(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 }))),
+        map && isSearchEnabled && Boolean(drawingModes.length) && (React.createElement(MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_RIGHT, map: map },
+            React.createElement(TopRightMapControls, { hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+        map && isSearchEnabled && (React.createElement(MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_CENTER, map: map },
+            React.createElement(TopCenterMapControls, { onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
         markerClusterer ? renderMarkerClusterer(markerClustererOptions) : renderMarkers(),
-        !helpers_1.getDrawingMode(drawingMode) &&
+        !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: {
+            propEq('type', MAP_DRAWING_MODES.POLYGON, activeOverlay) && (React.createElement(Polygon, { onLoad: setPolygon, path: activeOverlay.path, editable: true, options: allOverlayOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
+        isSearchEnabled && Boolean(drawingModes.length) && (React.createElement(DrawingManager, { onPolygonComplete: handleOverlayComplete(MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(MAP_DRAWING_MODES.CIRCLE), drawingMode: getDrawingMode(drawingMode), options: {
                 drawingControl: false,
                 circleOptions: allOverlayOptions,
                 polygonOptions: allOverlayOptions
             } }))));
 };
-exports.ReltioMap = ReltioMap;