@reltio/components 1.4.2006 → 1.4.2008

package/cjs/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/cjs/ReltioMap/components/DrawingManager/useDrawingManager.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawingManager = void 0;
+var react_google_maps_1 = require("@vis.gl/react-google-maps");
+var react_1 = require("react");
+var useDrawingManager = function (_a) {
+    var drawingMode = _a.drawingMode, onPolygonComplete = _a.onPolygonComplete, onCircleComplete = _a.onCircleComplete, options = _a.options;
+    var map = (0, react_google_maps_1.useMap)();
+    var drawing = (0, react_google_maps_1.useMapsLibrary)('drawing');
+    var _b = (0, react_1.useState)(null), drawingManager = _b[0], setDrawingManager = _b[1];
+    (0, react_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;
+};
+exports.useDrawingManager = useDrawingManager;

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

@@ -1,9 +1,10 @@
-import React from 'react';
-import { MarkerProps } from '@react-google-maps/api';
-import { EntityMarker as EntityMarkerType } from '../../types';
+import React, { ComponentProps } from 'react';
+import { AdvancedMarker } from '@vis.gl/react-google-maps';
+import { GeoPoint } from '@reltio/mdm-sdk';
 type Props = {
-    marker: EntityMarkerType;
-    onClick: (marker: EntityMarkerType) => void;
-} & Omit<MarkerProps, 'onClick' | 'icon' | 'position' | 'visible' | 'onMouseOver' | 'onMouseOut'>;
-declare const _default: React.MemoExoticComponent<({ marker, onClick, ...otherProps }: Props) => React.JSX.Element>;
+    marker: GeoPoint;
+    onClick: (marker: GeoPoint) => void;
+    clusterer?: (advancedMarker: google.maps.marker.AdvancedMarkerElement | null, id: string) => void;
+} & Omit<ComponentProps<typeof AdvancedMarker>, 'onClick' | 'position' | 'onMouseEnter' | 'onMouseLeave'>;
+declare const _default: React.MemoExoticComponent<({ marker, onClick, clusterer, ...otherProps }: Props) => React.JSX.Element>;
 export default _default;

package/cjs/ReltioMap/components/EntityMarker/EntityMarker.js

@@ -47,7 +47,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 react_google_maps_1 = require("@vis.gl/react-google-maps");
 var ProfileCard_1 = require("../../../ProfileCard");
 var Popper_1 = require("../../../Popper");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
@@ -56,39 +56,39 @@ var marker_inline_svg_1 = require("./icons/marker.inline.svg");
 var marker_hover_inline_svg_1 = require("./icons/marker-hover.inline.svg");
 var styles_1 = require("./styles");
 var HIDE_DEBOUNCE_INTERVAL = 50;
-var MARKER_WIDTH = 22;
 var MARKER_HEIGHT = 32;
 var MARKER_CARD_MARGIN = 8;
 var hoveredMarkerIcon = (0, mdm_sdk_1.svg2Url)(marker_hover_inline_svg_1.HOVERED_MARKER);
 var markerIcon = (0, mdm_sdk_1.svg2Url)(marker_inline_svg_1.MARKER);
 var EntityMarker = function (_a) {
-    var marker = _a.marker, onClick = _a.onClick, otherProps = __rest(_a, ["marker", "onClick"]);
+    var _b;
+    var marker = _a.marker, onClick = _a.onClick, clusterer = _a.clusterer, otherProps = __rest(_a, ["marker", "onClick", "clusterer"]);
     var styles = (0, styles_1.useStyles)();
-    var popperAnchor = (0, react_1.useRef)();
-    var _b = (0, react_1.useState)(false), hovered = _b[0], setHovered = _b[1];
+    var _c = (0, react_1.useState)(false), hovered = _c[0], setHovered = _c[1];
     var activeEntityUri = (0, react_1.useContext)(EntityMarkerContext_1.EntityMarkerContext).activeEntityUri;
     var isActive = (0, ramda_1.pathEq)(['entity', 'uri'], activeEntityUri, marker);
-    var position = { lat: marker.point.lat, lng: marker.point.lng };
+    var position = (0, react_1.useMemo)(function () { return ({ lat: marker.point.lat, lng: marker.point.lng }); }, [marker.point]);
     var setHoveredDebounced = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(setHovered, HIDE_DEBOUNCE_INTERVAL), []);
     var onMouseOver = (0, react_1.useCallback)(function () { return setHoveredDebounced(true); }, [setHoveredDebounced]);
     var onMouseOut = (0, react_1.useCallback)(function () { return setHoveredDebounced(false); }, [setHoveredDebounced]);
     var handleClick = (0, react_1.useCallback)(function () { return onClick(marker); }, [onClick, marker]);
+    var advancedMarkerRef = (0, react_1.useRef)(null);
+    var ref = (0, react_1.useCallback)(function (advancedMarker) {
+        clusterer === null || clusterer === void 0 ? void 0 : clusterer(advancedMarker, marker.id);
+        advancedMarkerRef.current = advancedMarker;
+    }, [clusterer, marker.id]);
+    var anchorEl = (_b = advancedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.element;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Popper_1.Popper, { anchorEl: popperAnchor.current, open: hovered, className: styles.popper, modal: false, placement: "top" },
-            react_1.default.createElement(ProfileCard_1.ProfileCard, { entity: marker.entity, onMouseOver: onMouseOver, onMouseOut: onMouseOut })),
-        react_1.default.createElement(api_1.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: {
-                alignBottom: true,
-                pane: 'mapPane',
-                pixelOffset: new google.maps.Size(0, -(MARKER_HEIGHT + MARKER_CARD_MARGIN)), //eslint-disable-line
-                closeBoxURL: '',
-                enableEventPropagation: true,
-                disableAutoPan: true
-            }, position: position },
-            react_1.default.createElement("span", { ref: popperAnchor }))));
+        anchorEl && (react_1.default.createElement(Popper_1.Popper, { anchorEl: anchorEl, open: hovered, className: styles.popper, modal: false, placement: "top", modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, MARKER_HEIGHT + MARKER_CARD_MARGIN]
+                    }
+                }
+            ] },
+            react_1.default.createElement(ProfileCard_1.ProfileCard, { entity: marker.entity, onMouseOver: onMouseOver, onMouseOut: onMouseOut }))),
+        react_1.default.createElement(react_google_maps_1.AdvancedMarker, __assign({ ref: ref, position: position, onClick: handleClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, otherProps),
+            react_1.default.createElement("img", { "data-reltio-id": "marker-icon", src: hovered || isActive ? hoveredMarkerIcon : markerIcon }))));
 };
 exports.default = (0, react_1.memo)(EntityMarker);

package/cjs/ReltioMap/components/EntityMarker/EntityMarker.spec.js

@@ -10,82 +10,167 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var api_1 = require("@react-google-maps/api");
-var ProfileCard_1 = require("../../../ProfileCard");
-var Popper_1 = require("../../../Popper");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var EntityMarker_1 = __importDefault(require("./EntityMarker"));
-var marker_inline_svg_1 = require("./icons/marker.inline.svg");
-var marker_hover_inline_svg_1 = require("./icons/marker-hover.inline.svg");
-var googleMock_test_data_1 = require("../../googleMock.test-data");
 var EntityMarkerContext_1 = require("../../../contexts/EntityMarkerContext");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var test_utils_1 = require("../../../test-utils");
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: jest.fn() })); });
-jest.mock('@react-google-maps/api', function () { return (__assign(__assign({}, jest.requireActual('@react-google-maps/api')), { Marker: jest.fn().mockImplementation(function () { return react_1.default.createElement("div", null); }), InfoBox: jest.fn().mockImplementation(function () { return react_1.default.createElement("div", null); }) })); });
-var markerUrl = (0, mdm_sdk_1.svg2Url)(marker_inline_svg_1.MARKER);
-var hoveredMarkerUrl = (0, mdm_sdk_1.svg2Url)(marker_hover_inline_svg_1.HOVERED_MARKER);
-describe('EntityMarker tests', function () {
-    beforeEach(function () { return (0, googleMock_test_data_1.setupGoogleMock)(); });
-    var markerProp = {
-        entity: { uri: '1' },
-        point: { lat: 1, lng: 2 }
+var marker_hover_inline_svg_1 = require("./icons/marker-hover.inline.svg");
+var marker_inline_svg_1 = require("./icons/marker.inline.svg");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: jest.fn(function (fn, _delay) { return jest.requireActual('@reltio/mdm-sdk').debounce(fn, 0); }) })); });
+jest.mock('@vis.gl/react-google-maps', function () {
+    // The only reason why all the mock stuff inlcuding 'requre' inside the jest.mock is that
+    // mocks with forwardRef doesn't work outside (in beforeEach/beforeAll)
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    var React = require('react');
+    var forwardRef = React.forwardRef, useRef = React.useRef, useImperativeHandle = React.useImperativeHandle;
+    // eslint-disable-next-line react/prop-types
+    var AdvancedMarker = forwardRef(function (_a, ref) {
+        var children = _a.children, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+        var divRef = useRef(null);
+        useImperativeHandle(ref, function () { return ({
+            element: divRef.current
+        }); });
+        return (React.createElement("div", { ref: divRef, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
+    });
+    AdvancedMarker.displayName = 'AdvancedMarker';
+    return __assign(__assign({}, jest.requireActual('@vis.gl/react-google-maps')), { AdvancedMarker: AdvancedMarker });
+});
+var hoveredMarkerIcon = (0, mdm_sdk_1.svg2Url)(marker_hover_inline_svg_1.HOVERED_MARKER);
+var markerIcon = (0, mdm_sdk_1.svg2Url)(marker_inline_svg_1.MARKER);
+describe('EntityMarker', function () {
+    var mockMarker = {
+        id: 'someId',
+        label: 'Entity 123',
+        point: { lat: 10, lng: 20 },
+        entity: { uri: 'entities/123', label: 'Entity label 123', type: 'hcp' }
     };
-    it('should render main parts', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(EntityMarker_1.default, { marker: markerProp }));
-        var popper = component.find(Popper_1.Popper);
-        expect(popper.length).toBe(1);
-        expect(popper.prop('open')).toBe(false);
-        var profileCard = popper.find(ProfileCard_1.ProfileCard);
-        expect(profileCard.length).toBe(1);
-        expect(profileCard.prop('entity')).toBe(markerProp.entity);
-        var marker = component.find(api_1.Marker);
-        expect(marker.length).toBe(1);
-        expect(marker.prop('position')).toEqual(markerProp.point);
-        expect(marker.prop('icon')).toMatchObject({
-            url: markerUrl
-        });
-        var infoBox = component.find(api_1.InfoBox);
-        expect(infoBox.length).toBe(1);
-        expect(infoBox.prop('options').disableAutoPan).toBe(true);
-        expect(infoBox.prop('position')).toEqual(markerProp.point);
+    var mockOnClick = jest.fn();
+    var metadata = { entityTypes: [], relationTypes: [] };
+    var defaultProps = { marker: mockMarker, onClick: mockOnClick };
+    var setUp = function (props, contextValue) {
+        if (props === void 0) { props = defaultProps; }
+        if (contextValue === void 0) { contextValue = {}; }
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata } }, children));
+        };
+        return (0, react_2.render)(react_1.default.createElement(EntityMarkerContext_1.EntityMarkerContext.Provider, { value: contextValue },
+            react_1.default.createElement(EntityMarker_1.default, __assign({}, props))), { wrapper: Providers });
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should show opened popper on marker mouse over and close it on mouse out', function () {
-        mdm_sdk_1.debounce.mockImplementation(function (cb) { return cb; });
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(EntityMarker_1.default, { marker: markerProp }));
-        expect(component.find(Popper_1.Popper).prop('open')).toBe(false);
-        component.find(api_1.Marker).prop('onMouseOver')();
-        (0, test_utils_1.rerenderWrapper)(component);
-        expect(component.find(Popper_1.Popper).prop('open')).toBe(true);
-        expect(component.find(api_1.Marker).prop('icon')).toMatchObject({
-            url: hoveredMarkerUrl
+    it('should render correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setUp();
+            expect(react_2.screen.getByTestId('marker-icon')).toHaveAttribute('src', markerIcon);
+            return [2 /*return*/];
         });
-        component.find(api_1.Marker).prop('onMouseOut')();
-        (0, test_utils_1.rerenderWrapper)(component);
-        expect(component.find(Popper_1.Popper).prop('open')).toBe(false);
-        expect(component.find(api_1.Marker).prop('icon')).toMatchObject({
-            url: markerUrl
+    }); });
+    it('should call onClick when marker is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setUp();
+                    return [4 /*yield*/, user_event_1.default.click(react_2.screen.getByTestId('marker-icon'))];
+                case 1:
+                    _a.sent();
+                    expect(mockOnClick).toHaveBeenCalledWith(mockMarker);
+                    return [2 /*return*/];
+            }
         });
-        expect(mdm_sdk_1.debounce).toHaveBeenCalled();
-    });
-    it('should call "onClick" prop with marker on marker click', function () {
-        var onClick = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(EntityMarker_1.default, { marker: markerProp, onClick: onClick }));
-        expect(onClick).not.toHaveBeenCalled();
-        component.find(api_1.Marker).prop('onClick')();
-        expect(onClick).toHaveBeenCalledWith(markerProp);
-    });
-    it('should render hovered icon for marker if marker is active', function () {
-        var contextValue = { activeEntityUri: markerProp.entity.uri };
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(EntityMarkerContext_1.EntityMarkerContext.Provider, { value: contextValue },
-            react_1.default.createElement(EntityMarker_1.default, { marker: markerProp })));
-        expect(component.find(api_1.Marker).prop('icon')).toMatchObject({
-            url: hoveredMarkerUrl
+    }); });
+    it('should show ProfileCard on mouse enter and hide on mouse leave', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setUp();
+                    return [4 /*yield*/, user_event_1.default.hover(react_2.screen.getByTestId('marker-icon'))];
+                case 1:
+                    _b.sent();
+                    _a = expect;
+                    return [4 /*yield*/, react_2.screen.findByText(mockMarker.entity.label)];
+                case 2:
+                    _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
+                    return [4 /*yield*/, user_event_1.default.unhover(react_2.screen.getByTestId('marker-icon'))];
+                case 3:
+                    _b.sent();
+                    expect(react_2.screen.queryByText(mockMarker.entity.label)).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-    });
+    }); });
+    it('should use hovered marker icon when hovered', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setUp();
+                    return [4 /*yield*/, user_event_1.default.hover(react_2.screen.getByTestId('marker-icon'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByTestId('marker-icon')).toHaveAttribute('src', hoveredMarkerIcon);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should use active marker icon when marker is active', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setUp(undefined, { activeEntityUri: mockMarker.entity.uri });
+            expect(react_2.screen.getByTestId('marker-icon')).toHaveAttribute('src', hoveredMarkerIcon);
+            return [2 /*return*/];
+        });
+    }); });
+    it('should call clusterer with advancedMarker and marker id', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var clusterer;
+        return __generator(this, function (_a) {
+            clusterer = jest.fn();
+            setUp(__assign(__assign({}, defaultProps), { clusterer: clusterer }));
+            expect(clusterer).toHaveBeenCalledWith(expect.objectContaining({ element: expect.any(HTMLElement) }), mockMarker.id);
+            return [2 /*return*/];
+        });
+    }); });
 });

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

@@ -0,0 +1,7 @@
+export declare const Polygon: import("react").ForwardRefExoticComponent<{
+    options: google.maps.PolygonOptions;
+} & {
+    onInit?: (polygon: google.maps.Polygon) => void;
+    onDragEnd?: (e: google.maps.MapMouseEvent) => void;
+    onMouseUp?: (e: google.maps.MapMouseEvent) => void;
+} & import("react").RefAttributes<google.maps.Polygon>>;

package/cjs/ReltioMap/components/Polygon/Polygon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Polygon = void 0;
+var react_1 = require("react");
+var usePolygon_1 = require("./usePolygon");
+exports.Polygon = (0, react_1.forwardRef)(function (props, ref) {
+    var polygon = (0, usePolygon_1.usePolygon)(props);
+    (0, react_1.useImperativeHandle)(ref, function () { return polygon; }, []);
+    return null;
+});
+exports.Polygon.displayName = 'Polygon';

package/cjs/ReltioMap/components/Polygon/index.d.ts

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

package/cjs/ReltioMap/components/Polygon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Polygon = void 0;
+var Polygon_1 = require("./Polygon");
+Object.defineProperty(exports, "Polygon", { enumerable: true, get: function () { return Polygon_1.Polygon; } });

package/cjs/ReltioMap/components/Polygon/usePolygon.d.ts

@@ -0,0 +1,10 @@
+type PolygonEventProps = {
+    onInit?: (polygon: google.maps.Polygon) => void;
+    onDragEnd?: (e: google.maps.MapMouseEvent) => void;
+    onMouseUp?: (e: google.maps.MapMouseEvent) => void;
+};
+export type PolygonProps = {
+    options: google.maps.PolygonOptions;
+} & PolygonEventProps;
+export declare const usePolygon: (props: PolygonProps) => google.maps.Polygon;
+export {};

package/cjs/ReltioMap/components/Polygon/usePolygon.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePolygon = void 0;
+var react_1 = require("react");
+var react_google_maps_1 = require("@vis.gl/react-google-maps");
+var usePolygon = function (props) {
+    var onInit = props.onInit, onDragEnd = props.onDragEnd, onMouseUp = props.onMouseUp, options = props.options;
+    var polygon = (0, react_1.useMemo)(function () { return new google.maps.Polygon(); }, []);
+    (0, react_1.useEffect)(function () {
+        polygon.setOptions(options);
+    }, [polygon, options]);
+    var map = (0, react_google_maps_1.useMap)();
+    (0, react_1.useEffect)(function () {
+        if (!map)
+            return;
+        polygon.setMap(map);
+        if (onInit) {
+            onInit(polygon);
+        }
+        return function () {
+            polygon.setMap(null);
+        };
+    }, [map]);
+    (0, react_1.useEffect)(function () {
+        if (!polygon)
+            return;
+        if (onDragEnd) {
+            google.maps.event.addListener(polygon, 'dragend', onDragEnd);
+        }
+        if (onMouseUp) {
+            google.maps.event.addListener(polygon, 'mouseup', onMouseUp);
+        }
+        return function () {
+            google.maps.event.clearInstanceListeners(polygon);
+        };
+    }, [polygon, onDragEnd, onMouseUp]);
+    return polygon;
+};
+exports.usePolygon = usePolygon;

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

@@ -1,7 +1,8 @@
 import React from 'react';
 type Props = {
+    className?: string;
     isSearchOnMapMove: boolean;
     onChangeIsSearchOnMapMove: (value: boolean) => void;
 };
-export declare const TopCenterMapControls: ({ isSearchOnMapMove, onChangeIsSearchOnMapMove }: Props) => React.JSX.Element;
+export declare const TopCenterMapControls: ({ className, isSearchOnMapMove, onChangeIsSearchOnMapMove }: Props) => React.JSX.Element;
 export {};

package/cjs/ReltioMap/components/TopCenterMapControls/TopCenterMapControls.js

@@ -10,14 +10,15 @@ var FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel
 var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 var styles_1 = require("./styles");
 var TopCenterMapControls = function (_a) {
-    var isSearchOnMapMove = _a.isSearchOnMapMove, onChangeIsSearchOnMapMove = _a.onChangeIsSearchOnMapMove;
+    var className = _a.className, isSearchOnMapMove = _a.isSearchOnMapMove, onChangeIsSearchOnMapMove = _a.onChangeIsSearchOnMapMove;
     var styles = (0, styles_1.useStyles)();
     var onChange = function (event) {
         onChangeIsSearchOnMapMove(event.target.checked);
     };
-    return (react_1.default.createElement(FormControlLabel_1.default, { classes: {
-            root: styles.container,
-            label: styles.label
-        }, control: react_1.default.createElement(Checkbox_1.default, { checked: isSearchOnMapMove, onChange: onChange, className: styles.checkbox }), label: ui_i18n_1.default.text('Search as I move the map') }));
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement(FormControlLabel_1.default, { classes: {
+                root: styles.container,
+                label: styles.label
+            }, control: react_1.default.createElement(Checkbox_1.default, { checked: isSearchOnMapMove, onChange: onChange, className: styles.checkbox }), label: ui_i18n_1.default.text('Search as I move the map') })));
 };
 exports.TopCenterMapControls = TopCenterMapControls;

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

@@ -38,11 +38,12 @@ export declare const ButtonWithTooltip: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLButtonElement>;
 }, "color" | "size" | "disabled" | "tabIndex" | "children" | "sx" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "startIcon" | "disableElevation" | "endIcon" | "fullWidth" | "variant">, "ref"> & React.RefAttributes<HTMLElement>>;
 type Props = {
+    className?: string;
     onDrawingModeChanged: (value: DrawingMode | null) => void;
     drawingMode: DrawingMode | null;
     drawingModes: DrawingModes;
     hasActiveOverlay: boolean;
     onClearOverlay: () => void;
 };
-export declare const TopRightMapControls: ({ drawingMode, drawingModes, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => React.JSX.Element;
+export declare const TopRightMapControls: ({ className, drawingMode, drawingModes, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => React.JSX.Element;
 export {};

package/cjs/ReltioMap/components/TopRightMapControls/TopRightMapControls.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopRightMapControls = exports.ButtonWithTooltip = void 0;
 var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Button_1 = __importDefault(require("@mui/material/Button"));
 var withTooltip_1 = require("../../../HOCs/withTooltip");
@@ -25,12 +26,12 @@ var getIcon = function (mode) {
     }
 };
 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 className = _a.className, drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
     var styles = (0, styles_1.useStyles)();
     var changeDrawingModeTo = function (drawingMode) { return function () {
         onDrawingModeChanged(drawingMode);
     }; };
-    return (react_1.default.createElement("div", { className: styles.container }, drawingMode || hasActiveOverlay ? (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.container, className) }, drawingMode || hasActiveOverlay ? (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
         react_1.default.createElement(HighlightOff_1.default, { className: styles.icon }))) : (drawingModes.map(function (mode) {
         var Icon = getIcon(mode);
         return (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },

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

@@ -4,7 +4,7 @@ exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     container: {
-        margin: '2px',
+        padding: '2px',
         display: 'flex',
         alignItems: 'center'
     },

package/cjs/ReltioMap/helpers.d.ts

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

package/cjs/ReltioMap/types.d.ts

@@ -1,8 +1,11 @@
-import { GeoPoint } from '@reltio/mdm-sdk';
+import { Marker } from '@googlemaps/markerclusterer';
 export type DrawingMode = 'circle' | 'polygon';
 export type DrawingModes = DrawingMode[];
-export type EntityMarker = GeoPoint & {
-    visible?: boolean;
+export type ClusteredMarkersOptions = {
+    maxZoom?: number;
+    calculator?: (markers: Marker[]) => {
+        title: string;
+    };
 };
 export type OverlayPath = Array<{
     lat: number;

package/cjs/features/graph/DataModelGraph/hooks/useFakeCenterNode.test.js

@@ -33,5 +33,6 @@ describe('useFakeCenterNode tests', function () {
             jest.advanceTimersByTime(1000);
         });
         expect(graph.hasNode(useFakeCenterNode_1.FAKE_CENTER_NODE_ID)).toBe(false);
+        jest.useRealTimers();
     });
 });