@reltio/components 1.4.2006 → 1.4.2007

package/ReltioMap/ReltioMap.spec.js

@@ -45,27 +45,34 @@ 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));
+};
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { findLast, last } from 'ramda';
-import { OverlayView, initialize, mockInstances, Marker, Map, Polygon } from '@googlemaps/jest-mocks';
-import { useJsApiLoader } from '@react-google-maps/api';
+import { OverlayView, initialize, mockInstances, AdvancedMarkerElement, Map, Polygon } from '@googlemaps/jest-mocks';
 import { MAP_DRAWING_MODES } from '../constants';
 import * as helpers from './helpers';
 import { ReltioMap } from './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.createElement(React.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.createElement("div", null, "loading element")
     };
@@ -75,15 +82,30 @@ describe('ReltioMap tests', function () {
         return __assign(__assign({}, render(React.createElement(ReltioMap, __assign({}, props)))), { user: user });
     };
     var drawingManagerInstance;
+    var drawingManagerConstructorSpy = jest.fn();
     beforeAll(function () {
         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;
@@ -104,71 +126,101 @@ describe('ReltioMap tests', function () {
     });
     beforeEach(function () {
         drawingManagerInstance = null;
-        useJsApiLoader.mockReturnValue({ isLoaded: true, loadError: null });
     });
     afterEach(function () {
         jest.clearAllMocks();
         mockInstances.clearAll();
     });
     var getEventHandler = function (target, event) {
-        return findLast(function (_a) {
+        var _a, _b;
+        return ((_a = 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 = 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 last(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: [MAP_DRAWING_MODES.POLYGON] }));
-                expect(screen.getByLabelText('Draw area')).toBeInTheDocument();
-                expect(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: [MAP_DRAWING_MODES.POLYGON] }));
+                        _a = expect;
+                        return [4 /*yield*/, screen.findByLabelText('Draw area')];
+                    case 1:
+                        _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
+                        expect(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: [MAP_DRAWING_MODES.POLYGON], mapOptions: mapOptions }));
-                mapMock = getLastInstance(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: [MAP_DRAWING_MODES.POLYGON], mapOptions: mapOptions }));
+                        return [4 /*yield*/, 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: [MAP_DRAWING_MODES.POLYGON], isSearchEnabled: false }));
-            expect(screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
-            expect(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: [MAP_DRAWING_MODES.POLYGON], isSearchEnabled: false }));
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(screen.queryByText('Search as I move the map')).not.toBeInTheDocument();
+                        return [2 /*return*/];
                 }
-            ];
-            var onMarkerClick = jest.fn();
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], onMarkerClicked: onMarkerClick, markers: markers }));
-            var markerMock = getLastInstance(Marker);
-            getEventHandler(markerMock, 'click')();
-            expect(markerMock.setIcon).toHaveBeenCalled();
-            expect(onMarkerClick).toHaveBeenCalled();
-        });
-        it('should call useJsApiLoader with right params', function () {
-            setUpRTL(__assign({}, defaultProps));
-            expect(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: [MAP_DRAWING_MODES.POLYGON], onMarkerClicked: onMarkerClick, markers: markers }));
+                        return [4 /*yield*/, waitFor(function () {
+                                markerMock = getLastInstance(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 () {
@@ -337,7 +389,7 @@ describe('ReltioMap tests', function () {
                         };
                         _a = setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay })), user = _a.user, rerender = _a.rerender;
                         polygon = getLastInstance(Polygon);
-                        expect(polygon.setPath).toHaveBeenCalledWith(activeOverlay.path);
+                        expect(polygon.setOptions).toHaveBeenCalledWith(expect.objectContaining({ paths: activeOverlay.path }));
                         newProps = __assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: null });
                         rerender(React.createElement(ReltioMap, __assign({}, newProps)));
                         return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
@@ -348,56 +400,100 @@ describe('ReltioMap tests', function () {
                 }
             });
         }); });
-        it('should not render Polygon if "activeOverlay" prop is circle', function () {
-            var activeOverlay = {
-                type: MAP_DRAWING_MODES.CIRCLE,
-                path: [{ lat: 1, lng: 1 }]
-            };
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay }));
-            expect(mockInstances.get(Polygon)).toHaveLength(0);
-        });
-        it('should call props.onOverlayUpdated on polygon mouse up', function () {
-            var activeOverlay = {
-                type: MAP_DRAWING_MODES.POLYGON,
-                path: [
-                    { lat: 1, lng: 1 },
-                    { lat: 2, lng: 2 }
-                ]
-            };
-            var onOverlayUpdated = jest.fn();
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
-            var polygon = getLastInstance(Polygon);
-            getEventHandler(polygon, 'mouseup')();
-            expect(onOverlayUpdated).toHaveBeenCalledWith({
-                type: 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: MAP_DRAWING_MODES.CIRCLE,
+                            path: [{ lat: 1, lng: 1 }]
+                        };
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay }));
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(mockInstances.get(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: MAP_DRAWING_MODES.POLYGON,
-                path: [
-                    { lat: 1, lng: 1 },
-                    { lat: 2, lng: 2 }
-                ]
-            };
-            var onOverlayUpdated = jest.fn();
-            setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
-            var polygon = getLastInstance(Polygon);
-            getEventHandler(polygon, 'dragend')();
-            expect(onOverlayUpdated).toHaveBeenCalledWith({
-                type: 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: MAP_DRAWING_MODES.POLYGON,
+                            path: [
+                                { lat: 1, lng: 1 },
+                                { lat: 2, lng: 2 }
+                            ]
+                        };
+                        onOverlayUpdated = jest.fn();
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
+                        polygon = getLastInstance(Polygon);
+                        getEventHandler(polygon, 'mouseup')();
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(onOverlayUpdated).toHaveBeenCalledWith({
+                                    type: 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: MAP_DRAWING_MODES.POLYGON,
+                            path: [
+                                { lat: 1, lng: 1 },
+                                { lat: 2, lng: 2 }
+                            ]
+                        };
+                        onOverlayUpdated = jest.fn();
+                        setUpRTL(__assign(__assign({}, defaultProps), { drawingModes: [MAP_DRAWING_MODES.POLYGON], activeOverlay: activeOverlay, onOverlayUpdated: onOverlayUpdated }));
+                        polygon = getLastInstance(Polygon);
+                        getEventHandler(polygon, 'dragend')();
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(onOverlayUpdated).toHaveBeenCalledWith({
+                                    type: 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: [MAP_DRAWING_MODES.CIRCLE] }));
-            expect(drawingManagerInstance.setDrawingMode).not.toHaveBeenCalledWith(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: [MAP_DRAWING_MODES.CIRCLE] }));
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(drawingManagerInstance).not.toBe(null);
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(drawingManagerInstance.setDrawingMode).not.toHaveBeenCalledWith(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) {
@@ -407,20 +503,40 @@ describe('ReltioMap tests', function () {
                         return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
                     case 1:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenCalledWith(MAP_DRAWING_MODES.CIRCLE);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: 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*/, 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*/, waitFor(function () {
+                                expect(screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(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(screen.queryByLabelText('Draw area')).not.toBeInTheDocument();
-            expect(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) {
@@ -431,7 +547,7 @@ describe('ReltioMap tests', function () {
                         return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
                     case 1:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(MAP_DRAWING_MODES.POLYGON);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: MAP_DRAWING_MODES.POLYGON }));
                         overlay = {
                             setMap: jest.fn(),
                             getPath: function () { return ({
@@ -452,7 +568,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*/];
                 }
             });
@@ -474,11 +590,11 @@ describe('ReltioMap tests', function () {
                         return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
                     case 1:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(MAP_DRAWING_MODES.POLYGON);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: MAP_DRAWING_MODES.POLYGON }));
                         return [4 /*yield*/, user.click(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*/];
                 }
@@ -494,14 +610,14 @@ describe('ReltioMap tests', function () {
                         return [4 /*yield*/, user.click(screen.getByLabelText('Draw area'))];
                     case 1:
                         _a.sent();
-                        expect(drawingManagerInstance.setDrawingMode).toHaveBeenLastCalledWith(MAP_DRAWING_MODES.POLYGON);
+                        expect(drawingManagerConstructorSpy).toHaveBeenCalledWith(expect.objectContaining({ drawingMode: MAP_DRAWING_MODES.POLYGON }));
                         return [4 /*yield*/, user.click(screen.getByText('Search as I move the map'))];
                     case 2:
                         _a.sent();
                         return [4 /*yield*/, user.click(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/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 {};

package/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.js

@@ -0,0 +1,58 @@
+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);
+};
+import { MarkerClusterer } from '@googlemaps/markerclusterer';
+import { useMap } from '@vis.gl/react-google-maps';
+import { omit, prop } from 'ramda';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { EntityMarker } from '../EntityMarker';
+import { CustomClusterRenderer } from './CustomClusterRenderer';
+export var ClusteredMarkers = memo(function (_a) {
+    var entityMarkers = _a.entityMarkers, options = _a.options, enabledClustering = _a.enabledClustering, onMarkerClick = _a.onMarkerClick;
+    var _b = useState({}), markers = _b[0], setMarkers = _b[1];
+    var map = useMap();
+    var clusterer = useMemo(function () {
+        if (!enabledClustering || !map)
+            return null;
+        return new MarkerClusterer({
+            map: map,
+            renderer: new CustomClusterRenderer(options),
+            algorithmOptions: { maxZoom: options === null || options === void 0 ? void 0 : options.maxZoom }
+        });
+    }, [map, options, enabledClustering]);
+    useEffect(function () {
+        return function () {
+            clusterer === null || clusterer === void 0 ? void 0 : clusterer.onRemove();
+        };
+    }, [entityMarkers]);
+    useEffect(function () {
+        if (!clusterer)
+            return;
+        clusterer.clearMarkers();
+        clusterer.addMarkers(Object.values(markers));
+    }, [clusterer, markers]);
+    var setMarkerRef = useCallback(function (marker, key) {
+        setMarkers(function (markers) {
+            var _a;
+            if (marker && !markers[key]) {
+                return __assign(__assign({}, markers), (_a = {}, _a[key] = marker, _a));
+            }
+            else if (!marker && markers[key]) {
+                return omit([key], markers);
+            }
+            else {
+                return markers;
+            }
+        });
+    }, []);
+    return (React.createElement(React.Fragment, null, entityMarkers.filter(prop('point')).map(function (marker) { return (React.createElement(EntityMarker, { key: marker.id, marker: marker, clusterer: enabledClustering ? setMarkerRef : undefined, onClick: onMarkerClick })); })));
+});
+ClusteredMarkers.displayName = 'ClusteredMarkers';

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

@@ -0,0 +1,8 @@
+import { Marker, Renderer, Cluster, ClusterStats } from '@googlemaps/markerclusterer';
+import { ClusteredMarkersOptions } from '../../types';
+export declare class CustomClusterRenderer implements Renderer {
+    private options;
+    private defaultRenderer;
+    constructor(options: ClusteredMarkersOptions);
+    render(cluster: Cluster, stats: ClusterStats, map: google.maps.Map): Marker;
+}

package/ReltioMap/components/ClusteredMarkers/CustomClusterRenderer.js

@@ -0,0 +1,18 @@
+import { DefaultRenderer } from '@googlemaps/markerclusterer';
+var CustomClusterRenderer = /** @class */ (function () {
+    function CustomClusterRenderer(options) {
+        this.options = options;
+        this.defaultRenderer = new DefaultRenderer();
+    }
+    CustomClusterRenderer.prototype.render = function (cluster, stats, map) {
+        var _a;
+        var element = this.defaultRenderer.render(cluster, stats, map);
+        if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.calculator) && element instanceof google.maps.marker.AdvancedMarkerElement) {
+            var title = this.options.calculator(cluster.markers).title;
+            element.title = title;
+        }
+        return element;
+    };
+    return CustomClusterRenderer;
+}());
+export { CustomClusterRenderer };

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

@@ -0,0 +1 @@
+export { ClusteredMarkers } from './ClusteredMarkers';

package/ReltioMap/components/ClusteredMarkers/index.js

@@ -0,0 +1 @@
+export { ClusteredMarkers } from './ClusteredMarkers';

package/ReltioMap/components/DrawingManager/DrawingManager.d.ts

@@ -0,0 +1,2 @@
+import { DrawingManagerProps } from './useDrawingManager';
+export declare const DrawingManager: (props: DrawingManagerProps) => any;

package/ReltioMap/components/DrawingManager/DrawingManager.js

@@ -0,0 +1,5 @@
+import { useDrawingManager } from './useDrawingManager';
+export var DrawingManager = function (props) {
+    useDrawingManager(props);
+    return null;
+};

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

@@ -0,0 +1 @@
+export { DrawingManager } from './DrawingManager';

package/ReltioMap/components/DrawingManager/index.js

@@ -0,0 +1 @@
+export { DrawingManager } from './DrawingManager';

package/ReltioMap/components/DrawingManager/useDrawingManager.d.ts

@@ -0,0 +1,7 @@
+export type DrawingManagerProps = {
+    drawingMode: google.maps.drawing.OverlayType;
+    onPolygonComplete?: (polygon: google.maps.Polygon) => void;
+    onCircleComplete?: (circle: google.maps.Circle) => void;
+    options: google.maps.drawing.DrawingManagerOptions;
+};
+export declare const useDrawingManager: ({ drawingMode, onPolygonComplete, onCircleComplete, options }: DrawingManagerProps) => google.maps.drawing.DrawingManager;

package/ReltioMap/components/DrawingManager/useDrawingManager.js

@@ -0,0 +1,36 @@
+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);
+};
+import { useMap, useMapsLibrary } from '@vis.gl/react-google-maps';
+import { useEffect, useState } from 'react';
+export var useDrawingManager = function (_a) {
+    var drawingMode = _a.drawingMode, onPolygonComplete = _a.onPolygonComplete, onCircleComplete = _a.onCircleComplete, options = _a.options;
+    var map = useMap();
+    var drawing = useMapsLibrary('drawing');
+    var _b = useState(null), drawingManager = _b[0], setDrawingManager = _b[1];
+    useEffect(function () {
+        if (!map || !drawing)
+            return;
+        var newDrawingManager = new drawing.DrawingManager(__assign({ map: map, drawingMode: drawingMode }, options));
+        if (onPolygonComplete) {
+            newDrawingManager.addListener('polygoncomplete', onPolygonComplete);
+        }
+        if (onCircleComplete) {
+            newDrawingManager.addListener('circlecomplete', onCircleComplete);
+        }
+        setDrawingManager(newDrawingManager);
+        return function () {
+            google.maps.event.clearInstanceListeners(newDrawingManager);
+            newDrawingManager.setMap(null);
+        };
+    }, [drawing, map, options, drawingMode, onPolygonComplete, onCircleComplete]);
+    return drawingManager;
+};