@reltio/components 1.4.2006 → 1.4.2007

package/cjs/ReltioMap/ReltioMap.js

@@ -33,35 +33,57 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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;
+};
 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 EntityMarker_1 = require("./components/EntityMarker");
-var MapControlContainer_1 = require("./components/MapControlContainer");
+var react_google_maps_1 = require("@vis.gl/react-google-maps");
 var TopRightMapControls_1 = require("./components/TopRightMapControls");
 var TopCenterMapControls_1 = require("./components/TopCenterMapControls");
 var helpers_1 = require("./helpers");
 var constants_1 = require("../constants");
 var useFitMapBounds_1 = require("./useFitMapBounds");
 var styles_1 = require("./styles");
+var ClusteredMarkers_1 = require("./components/ClusteredMarkers");
+var Polygon_1 = require("./components/Polygon");
+var DrawingManager_1 = require("./components/DrawingManager");
 var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
 var libraries = ['drawing'];
 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, _c = _a.overlayOptions, overlayOptions = _c === void 0 ? {} : _c, _d = _a.drawingModes, drawingModes = _d === void 0 ? [] : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _e = _a.mapOptions, mapOptions = _e === void 0 ? {} : _e, mapContainerClassName = _a.mapContainerClassName, _f = _a.onMapBoundsChanged, onMapBoundsChanged = _f === void 0 ? ramda_1.identity : _f, _g = _a.onOverlayUpdated, onOverlayUpdated = _g === void 0 ? ramda_1.identity : _g, _h = _a.onMarkerClicked, onMarkerClicked = _h === void 0 ? ramda_1.identity : _h;
+    var mapKey = _a.mapKey, restProps = __rest(_a, ["mapKey"]);
+    return (react_1.default.createElement(react_google_maps_1.APIProvider, { apiKey: mapKey, libraries: libraries },
+        react_1.default.createElement(InternalReltioMap, __assign({}, restProps))));
+};
+exports.ReltioMap = ReltioMap;
+var emptyObject = {};
+var emptyArray = [];
+var InternalReltioMap = (0, react_1.memo)(function (_a) {
+    var mapId = _a.mapId, _b = _a.markers, markers = _b === void 0 ? emptyArray : _b, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, _c = _a.overlayOptions, overlayOptions = _c === void 0 ? emptyObject : _c, _d = _a.drawingModes, drawingModes = _d === void 0 ? emptyArray : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _f = _a.mapOptions, mapOptions = _f === void 0 ? emptyObject : _f, mapContainerClassName = _a.mapContainerClassName, _g = _a.onMapBoundsChanged, onMapBoundsChanged = _g === void 0 ? ramda_1.identity : _g, _h = _a.onOverlayUpdated, onOverlayUpdated = _h === void 0 ? ramda_1.identity : _h, _j = _a.onMarkerClicked, onMarkerClicked = _j === void 0 ? ramda_1.identity : _j;
     var styles = (0, styles_1.useStyles)();
-    var _j = (0, api_1.useJsApiLoader)({
-        googleMapsApiKey: mapKey,
-        libraries: libraries
-    }), isLoaded = _j.isLoaded, loadError = _j.loadError;
     var mapMoveEndTimer = (0, react_1.useRef)(null);
-    var _k = (0, react_1.useState)(null), map = _k[0], setMap = _k[1];
-    var _l = (0, react_1.useState)(null), polygon = _l[0], setPolygon = _l[1];
-    var _m = (0, react_1.useState)(null), drawingMode = _m[0], setDrawingMode = _m[1];
+    var isLoaded = (0, react_google_maps_1.useApiIsLoaded)();
+    var map = (0, react_google_maps_1.useMap)();
+    var _k = (0, react_1.useState)(null), polygon = _k[0], setPolygon = _k[1];
+    var _l = (0, react_1.useState)(null), drawingMode = _l[0], setDrawingMode = _l[1];
     (0, useFitMapBounds_1.useFitMapBounds)({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
     var allOverlayOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, constants_1.DEFAULT_OVERLAY_OPTIONS), overlayOptions)); }, [overlayOptions]);
     var googleMapOptions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, constants_1.DEFAULT_GOOGLE_MAP_OPTIONS), mapOptions)); }, [mapOptions]);
+    var drawingManagerOptions = (0, react_1.useMemo)(function () { return ({
+        drawingControl: false,
+        polygonOptions: allOverlayOptions
+    }); }, [allOverlayOptions]);
+    var polygonOptions = (0, react_1.useMemo)(function () { return (__assign({ paths: activeOverlay === null || activeOverlay === void 0 ? void 0 : activeOverlay.path, editable: true }, allOverlayOptions)); }, [activeOverlay, allOverlayOptions]);
     var handleChangeIsSearchOnMapMove = (0, react_1.useCallback)(function (isSearchOnMapMove) {
         onMapBoundsChanged(isSearchOnMapMove ? (0, helpers_1.getMapBoundsPolygon)(map) : null);
         setDrawingMode(null);
@@ -81,7 +103,7 @@ var ReltioMap = function (_a) {
         clearTimeout(mapMoveEndTimer.current);
         mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
     }, [handleMapMoveEnd, isSearchOnMapMove]);
-    var handleOverlayChange = (0, react_1.useCallback)(function (e, propOverlay) {
+    var handleOverlayChange = (0, react_1.useCallback)(function (_e, propOverlay) {
         var _a;
         var _b;
         var polygonStateOverlay = polygon && { type: constants_1.MAP_DRAWING_MODES.POLYGON, overlay: polygon };
@@ -95,7 +117,10 @@ var ReltioMap = function (_a) {
                 .getArray()
                 .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
         };
-        var getCircleParameters = function () { return ({ radius: overlay.getRadius() / 1000, center: overlay.getCenter() }); };
+        var getCircleParameters = function () { return ({
+            radius: overlay.getRadius() / 1000,
+            center: overlay.getCenter()
+        }); };
         var typeActions = (_a = {},
             _a[constants_1.MAP_DRAWING_MODES.POLYGON] = getPolygonLatLngCoordinates,
             _a[constants_1.MAP_DRAWING_MODES.CIRCLE] = getCircleParameters,
@@ -113,17 +138,6 @@ var ReltioMap = function (_a) {
     var handleClearOverlay = (0, react_1.useCallback)(function () {
         onOverlayUpdated(null);
     }, [onOverlayUpdated]);
-    var renderMarkers = function (clusterer) {
-        return markers
-            .filter((0, ramda_1.prop)('point'))
-            .map(function (marker) { return (react_1.default.createElement(EntityMarker_1.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);
-    };
-    if (loadError) {
-        return null;
-    }
     if (!isLoaded) {
         return loadingElement;
     }
@@ -131,17 +145,13 @@ var ReltioMap = function (_a) {
     var shouldRenderRightMapControls = map && isSearchEnabled && Boolean(drawingModes.length);
     var shouldRenderCenterMapControls = map && isSearchEnabled;
     var shouldRenderPolygon = !(0, helpers_1.getDrawingMode)(drawingMode) && activeOverlay && (0, ramda_1.propEq)('type', constants_1.MAP_DRAWING_MODES.POLYGON, activeOverlay);
-    return (react_1.default.createElement(api_1.GoogleMap, { mapTypeId: window.google.maps.MapTypeId.ROADMAP, options: googleMapOptions, onLoad: setMap, zoom: defaultZoom, center: defaultCenter, onZoomChanged: handleMapMoveStart, onDragStart: handleMapMoveStart, onIdle: handleMapIdle, mapContainerClassName: mapContainerClassName },
-        shouldRenderRightMapControls && (react_1.default.createElement(MapControlContainer_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 }))),
-        shouldRenderCenterMapControls && (react_1.default.createElement(MapControlContainer_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(),
-        shouldRenderPolygon && (react_1.default.createElement(api_1.Polygon, { onLoad: setPolygon, path: activeOverlay.path, editable: true, options: allOverlayOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
-        shouldRenderDrawingManager && (react_1.default.createElement(api_1.DrawingManager, { onPolygonComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.CIRCLE), drawingMode: (0, helpers_1.getDrawingMode)(drawingMode), options: {
-                drawingControl: false,
-                circleOptions: allOverlayOptions,
-                polygonOptions: allOverlayOptions
-            } }))));
-};
-exports.ReltioMap = ReltioMap;
+    return (react_1.default.createElement(react_google_maps_1.Map, __assign({ mapId: mapId || 'mapId' }, googleMapOptions, { defaultZoom: defaultZoom, defaultCenter: defaultCenter, onZoomChanged: handleMapMoveStart, onDragstart: handleMapMoveStart, onIdle: handleMapIdle, className: mapContainerClassName }),
+        shouldRenderRightMapControls && (react_1.default.createElement(react_google_maps_1.MapControl, { position: react_google_maps_1.ControlPosition.TOP_RIGHT },
+            react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { className: styles.mapControlContainer, hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+        shouldRenderCenterMapControls && (react_1.default.createElement(react_google_maps_1.MapControl, { position: react_google_maps_1.ControlPosition.TOP_CENTER },
+            react_1.default.createElement(TopCenterMapControls_1.TopCenterMapControls, { className: styles.mapControlContainer, onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
+        react_1.default.createElement(ClusteredMarkers_1.ClusteredMarkers, { entityMarkers: markers, enabledClustering: markerClusterer, options: markerClustererOptions, onMarkerClick: onMarkerClicked }),
+        shouldRenderPolygon && (react_1.default.createElement(Polygon_1.Polygon, { onInit: setPolygon, options: polygonOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
+        shouldRenderDrawingManager && (react_1.default.createElement(DrawingManager_1.DrawingManager, { onPolygonComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.CIRCLE), drawingMode: (0, helpers_1.getDrawingMode)(drawingMode), options: drawingManagerOptions }))));
+});
+InternalReltioMap.displayName = 'InternalReltioMap';

package/cjs/ReltioMap/ReltioMap.spec.js

@@ -69,6 +69,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -78,22 +87,20 @@ var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var ramda_1 = require("ramda");
 var jest_mocks_1 = require("@googlemaps/jest-mocks");
-var api_1 = require("@react-google-maps/api");
 var constants_1 = require("../constants");
 var helpers = __importStar(require("./helpers"));
 var ReltioMap_1 = require("./ReltioMap");
-jest.mock('@react-google-maps/api', function () { return (__assign(__assign({}, jest.requireActual('@react-google-maps/api')), { useJsApiLoader: jest.fn() })); });
-jest.mock('./components/MapControlContainer', function () { return ({
-    MapControlContainer: function (_a) {
+jest.mock('@vis.gl/react-google-maps', function () { return (__assign(__assign({}, jest.requireActual('@vis.gl/react-google-maps')), { MapControl: function (_a) {
         var children = _a.children;
         return react_1.default.createElement(react_1.default.Fragment, null, children);
-    }
-}); });
+    } })); });
 describe('ReltioMap tests', function () {
     var defaultProps = {
         onOverlayUpdated: jest.fn(),
         onMarkerClicked: jest.fn(),
         isSearchEnabled: true,
+        defaultZoom: 10,
+        defaultCenter: { lat: 1, lng: 1 },
         mapKey: 'mapKey',
         loadingElement: react_1.default.createElement("div", null, "loading element")
     };
@@ -103,15 +110,30 @@ describe('ReltioMap tests', function () {
         return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(ReltioMap_1.ReltioMap, __assign({}, props)))), { user: user });
     };
     var drawingManagerInstance;
+    var drawingManagerConstructorSpy = jest.fn();
     beforeAll(function () {
         (0, jest_mocks_1.initialize)();
+        var OriginalMap = google.maps.Map;
+        jest.spyOn(google.maps, 'Map').mockImplementation(function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return new (OriginalMap.bind.apply(OriginalMap, __spreadArray([void 0], args, false)))();
+        });
         global.google.maps.drawing.DrawingManager = /** @class */ (function () {
             function DrawingManager() {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                this.addListener = jest.fn();
                 this.getDrawingMode = jest.fn();
                 this.getMap = jest.fn();
                 this.setDrawingMode = jest.fn();
                 this.setMap = jest.fn();
                 this.setOptions = jest.fn();
+                drawingManagerConstructorSpy.apply(void 0, args);
                 drawingManagerInstance = this;
             }
             return DrawingManager;
@@ -132,71 +154,101 @@ describe('ReltioMap tests', function () {
     });
     beforeEach(function () {
         drawingManagerInstance = null;
-        api_1.useJsApiLoader.mockReturnValue({ isLoaded: true, loadError: null });
     });
     afterEach(function () {
         jest.clearAllMocks();
         jest_mocks_1.mockInstances.clearAll();
     });
     var getEventHandler = function (target, event) {
-        return (0, ramda_1.findLast)(function (_a) {
+        var _a, _b;
+        return ((_a = (0, ramda_1.findLast)(function (_a) {
             var instance = _a[0], googleEventName = _a[1];
             return instance === target && googleEventName === event;
-        }, global.google.maps.event.addListener.mock.calls)[2];
+        }, global.google.maps.event.addListener.mock.calls)) === null || _a === void 0 ? void 0 : _a[2]) || ((_b = (0, ramda_1.findLast)(function (_a) {
+            var name = _a[0];
+            return name === event;
+        }, target.addListener.mock.calls)) === null || _b === void 0 ? void 0 : _b[1]);
     };
     var getLastInstance = function (instance) { return (0, ramda_1.last)(jest_mocks_1.mockInstances.get(instance)); };
     describe('general behaviour', function () {
         it('should render map controls', function () { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON] }));
-                expect(react_2.screen.getByLabelText('Draw area')).toBeInTheDocument();
-                expect(react_2.screen.getByText('Search as I move the map')).toBeInTheDocument();
-                return [2 /*return*/];
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON] }));
+                        _a = expect;
+                        return [4 /*yield*/, react_2.screen.findByLabelText('Draw area')];
+                    case 1:
+                        _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
+                        expect(react_2.screen.getByText('Search as I move the map')).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
             });
         }); });
         it('should combine mapOptions', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var mapOptions, mapMock;
+            var mapOptions;
             return __generator(this, function (_a) {
-                mapOptions = { mapTypeControl: true };
-                setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], mapOptions: mapOptions }));
-                mapMock = getLastInstance(jest_mocks_1.Map);
-                expect(mapMock.setOptions).toHaveBeenCalledWith({
-                    fullscreenControl: false,
-                    mapTypeControl: true,
-                    streetViewControl: false
-                });
-                return [2 /*return*/];
+                switch (_a.label) {
+                    case 0:
+                        mapOptions = { mapTypeControl: true };
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], mapOptions: mapOptions }));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(google.maps.Map).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining({
+                                    fullscreenControl: false,
+                                    mapTypeControl: true,
+                                    streetViewControl: false
+                                }));
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
             });
         }); });
-        it('should not render map controls', function () {
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], isSearchEnabled: false }));
-            expect(react_2.screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
-            expect(react_2.screen.queryByText('Search as I move the map')).not.toBeInTheDocument();
-        });
-        it('should render markers correctly', function () {
-            var markers = [
-                {
-                    point: { lat: 1, lng: 1 },
-                    visible: true,
-                    id: '123',
-                    entity: { uri: 'testUri', type: 'testType' },
-                    label: 'testMarker'
+        it('should not render map controls', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], isSearchEnabled: false }));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(react_2.screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(react_2.screen.queryByText('Search as I move the map')).not.toBeInTheDocument();
+                        return [2 /*return*/];
                 }
-            ];
-            var onMarkerClick = jest.fn();
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], onMarkerClicked: onMarkerClick, markers: markers }));
-            var markerMock = getLastInstance(jest_mocks_1.Marker);
-            getEventHandler(markerMock, 'click')();
-            expect(markerMock.setIcon).toHaveBeenCalled();
-            expect(onMarkerClick).toHaveBeenCalled();
-        });
-        it('should call useJsApiLoader with right params', function () {
-            setUpRTL(__assign({}, defaultProps));
-            expect(api_1.useJsApiLoader).toHaveBeenCalledWith({
-                googleMapsApiKey: 'mapKey',
-                libraries: ['drawing']
             });
-        });
+        }); });
+        it('should render markers correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var markers, onMarkerClick, markerMock;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        markers = [
+                            {
+                                point: { lat: 1, lng: 1 },
+                                visible: true,
+                                id: '123',
+                                entity: { uri: 'testUri', type: 'testType' },
+                                label: 'testMarker'
+                            }
+                        ];
+                        onMarkerClick = jest.fn();
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], onMarkerClicked: onMarkerClick, markers: markers }));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                markerMock = getLastInstance(jest_mocks_1.AdvancedMarkerElement);
+                                expect(markerMock).toBeDefined();
+                            })];
+                    case 1:
+                        _a.sent();
+                        getEventHandler(markerMock, 'click')();
+                        expect(onMarkerClick).toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('fitting bounds behavior', function () {
         it('should fit map bounds correctly if markers loaded later than map', function () {
@@ -365,7 +417,7 @@ describe('ReltioMap tests', function () {
                         };
                         _a = setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay })), user = _a.user, rerender = _a.rerender;
                         polygon = getLastInstance(jest_mocks_1.Polygon);
-                        expect(polygon.setPath).toHaveBeenCalledWith(activeOverlay.path);
+                        expect(polygon.setOptions).toHaveBeenCalledWith(expect.objectContaining({ paths: activeOverlay.path }));
                         newProps = __assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], activeOverlay: null });
                         rerender(react_1.default.createElement(ReltioMap_1.ReltioMap, __assign({}, newProps)));
                         return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Draw area'))];
@@ -376,56 +428,100 @@ describe('ReltioMap tests', function () {
                 }
             });
         }); });
-        it('should not render Polygon if "activeOverlay" prop is circle', function () {
-            var activeOverlay = {
-                type: constants_1.MAP_DRAWING_MODES.CIRCLE,
-                path: [{ lat: 1, lng: 1 }]
-            };
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay }));
-            expect(jest_mocks_1.mockInstances.get(jest_mocks_1.Polygon)).toHaveLength(0);
-        });
-        it('should call props.onOverlayUpdated on polygon mouse up', function () {
-            var activeOverlay = {
-                type: constants_1.MAP_DRAWING_MODES.POLYGON,
-                path: [
-                    { lat: 1, lng: 1 },
-                    { lat: 2, lng: 2 }
-                ]
-            };
-            var onOverlayUpdated = jest.fn();
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
-            var polygon = getLastInstance(jest_mocks_1.Polygon);
-            getEventHandler(polygon, 'mouseup')();
-            expect(onOverlayUpdated).toHaveBeenCalledWith({
-                type: constants_1.MAP_DRAWING_MODES.POLYGON,
-                data: []
+        it('should not render Polygon if "activeOverlay" prop is circle', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var activeOverlay;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        activeOverlay = {
+                            type: constants_1.MAP_DRAWING_MODES.CIRCLE,
+                            path: [{ lat: 1, lng: 1 }]
+                        };
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay }));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(jest_mocks_1.mockInstances.get(jest_mocks_1.Polygon)).toHaveLength(0);
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
             });
-            expect(polygon.setPath).toHaveBeenCalledWith(activeOverlay.path);
-        });
-        it('should call props.onOverlayUpdated on polygon drag end', function () {
-            var activeOverlay = {
-                type: constants_1.MAP_DRAWING_MODES.POLYGON,
-                path: [
-                    { lat: 1, lng: 1 },
-                    { lat: 2, lng: 2 }
-                ]
-            };
-            var onOverlayUpdated = jest.fn();
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
-            var polygon = getLastInstance(jest_mocks_1.Polygon);
-            getEventHandler(polygon, 'dragend')();
-            expect(onOverlayUpdated).toHaveBeenCalledWith({
-                type: constants_1.MAP_DRAWING_MODES.POLYGON,
-                data: []
+        }); });
+        it('should call props.onOverlayUpdated on polygon mouse up', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var activeOverlay, onOverlayUpdated, polygon;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        activeOverlay = {
+                            type: constants_1.MAP_DRAWING_MODES.POLYGON,
+                            path: [
+                                { lat: 1, lng: 1 },
+                                { lat: 2, lng: 2 }
+                            ]
+                        };
+                        onOverlayUpdated = jest.fn();
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
+                        polygon = getLastInstance(jest_mocks_1.Polygon);
+                        getEventHandler(polygon, 'mouseup')();
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onOverlayUpdated).toHaveBeenCalledWith({
+                                    type: constants_1.MAP_DRAWING_MODES.POLYGON,
+                                    data: []
+                                });
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(polygon.setOptions).toHaveBeenCalledWith(expect.objectContaining({ paths: activeOverlay.path }));
+                        return [2 /*return*/];
+                }
             });
-            expect(polygon.setPath).toHaveBeenCalledWith(activeOverlay.path);
-        });
+        }); });
+        it('should call props.onOverlayUpdated on polygon drag end', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var activeOverlay, onOverlayUpdated, polygon;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        activeOverlay = {
+                            type: constants_1.MAP_DRAWING_MODES.POLYGON,
+                            path: [
+                                { lat: 1, lng: 1 },
+                                { lat: 2, lng: 2 }
+                            ]
+                        };
+                        onOverlayUpdated = jest.fn();
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
+                        polygon = getLastInstance(jest_mocks_1.Polygon);
+                        getEventHandler(polygon, 'dragend')();
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onOverlayUpdated).toHaveBeenCalledWith({
+                                    type: constants_1.MAP_DRAWING_MODES.POLYGON,
+                                    data: []
+                                });
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(polygon.setOptions).toHaveBeenCalledWith(expect.objectContaining({ paths: activeOverlay.path }));
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('drawing behavior', function () {
-        it("shouldn't be in drawing mode by default", function () {
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.CIRCLE] }));
-            expect(drawingManagerInstance.setDrawingMode).not.toHaveBeenCalledWith(constants_1.MAP_DRAWING_MODES.CIRCLE);
-        });
+        it("shouldn't be in drawing mode by default", function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [constants_1.MAP_DRAWING_MODES.CIRCLE] }));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(drawingManagerInstance).not.toBe(null);
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(drawingManagerInstance.setDrawingMode).not.toHaveBeenCalledWith(constants_1.MAP_DRAWING_MODES.CIRCLE);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
         it('should change drawing mode on map control action', function () { return __awaiter(void 0, void 0, void 0, function () {
             var user;
             return __generator(this, function (_a) {
@@ -435,20 +531,40 @@ describe('ReltioMap tests', function () {
                         return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Draw area'))];
                     case 1:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenCalledWith(constants_1.MAP_DRAWING_MODES.CIRCLE);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: constants_1.MAP_DRAWING_MODES.CIRCLE }));
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("shouldn't render DrawingManager without drawingModes prop", function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setUpRTL(__assign({}, defaultProps));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(drawingManagerInstance).toBe(null);
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("shouldn't render TopRightMapControls without drawingModes prop", function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setUpRTL(__assign({}, defaultProps));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(react_2.screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(react_2.screen.queryByLabelText('Clear area')).not.toBeInTheDocument();
                         return [2 /*return*/];
                 }
             });
         }); });
-        it("shouldn't render DrawingManager without drawingModes prop", function () {
-            setUpRTL(__assign({}, defaultProps));
-            expect(drawingManagerInstance).toBe(null);
-        });
-        it("shouldn't render TopRightMapControls without drawingModes prop", function () {
-            setUpRTL(__assign({}, defaultProps));
-            expect(react_2.screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
-            expect(react_2.screen.queryByLabelText('Clear area')).not.toBeInTheDocument();
-        });
         it('should call props.onOverlayUpdated after polygon completing', function () { return __awaiter(void 0, void 0, void 0, function () {
             var onOverlayUpdated, user, overlay;
             return __generator(this, function (_a) {
@@ -459,7 +575,7 @@ describe('ReltioMap tests', function () {
                         return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Draw area'))];
                     case 1:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(constants_1.MAP_DRAWING_MODES.POLYGON);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: constants_1.MAP_DRAWING_MODES.POLYGON }));
                         overlay = {
                             setMap: jest.fn(),
                             getPath: function () { return ({
@@ -480,7 +596,7 @@ describe('ReltioMap tests', function () {
                             ]
                         });
                         expect(overlay.setMap).toHaveBeenCalledWith(null);
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(null);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: null }));
                         return [2 /*return*/];
                 }
             });
@@ -502,11 +618,11 @@ describe('ReltioMap tests', function () {
                         return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Draw area'))];
                     case 1:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(constants_1.MAP_DRAWING_MODES.POLYGON);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: constants_1.MAP_DRAWING_MODES.POLYGON }));
                         return [4 /*yield*/, user.click(react_2.screen.getByText('Search as I move the map'))];
                     case 2:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(null);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: null }));
                         expect(onMapBoundsChanged).toHaveBeenCalledWith(mapBoundsPolygon);
                         return [2 /*return*/];
                 }
@@ -522,14 +638,14 @@ describe('ReltioMap tests', function () {
                         return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Draw area'))];
                     case 1:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(constants_1.MAP_DRAWING_MODES.POLYGON);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: constants_1.MAP_DRAWING_MODES.POLYGON }));
                         return [4 /*yield*/, user.click(react_2.screen.getByText('Search as I move the map'))];
                     case 2:
                         _a.sent();
                         return [4 /*yield*/, user.click(react_2.screen.getByText('Search as I move the map'))];
                     case 3:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(null);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: null }));
                         expect(onMapBoundsChanged).toHaveBeenCalledWith(null);
                         return [2 /*return*/];
                 }

package/cjs/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.d.ts

@@ -0,0 +1,11 @@
+import { GeoPoint } from '@reltio/mdm-sdk';
+import React from 'react';
+import { ClusteredMarkersOptions } from '../../types';
+type Props = {
+    entityMarkers: GeoPoint[];
+    enabledClustering: boolean;
+    options?: ClusteredMarkersOptions;
+    onMarkerClick?: (marker: GeoPoint) => void;
+};
+export declare const ClusteredMarkers: React.MemoExoticComponent<({ entityMarkers, options, enabledClustering, onMarkerClick }: Props) => React.JSX.Element>;
+export {};