@reltio/components 1.4.2257 → 1.4.2259

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

@@ -6,6 +6,7 @@ type Props = {
     enabledClustering: boolean;
     options?: ClusteredMarkersOptions;
     onMarkerClick?: (marker: GeoPoint) => void;
+    disabled?: boolean;
 };
-export declare const ClusteredMarkers: React.MemoExoticComponent<({ entityMarkers, options, enabledClustering, onMarkerClick }: Props) => React.JSX.Element>;
+export declare const ClusteredMarkers: React.MemoExoticComponent<({ entityMarkers, options, enabledClustering, onMarkerClick, disabled }: Props) => React.JSX.Element>;
 export {};

package/cjs/ReltioMap/components/ClusteredMarkers/ClusteredMarkers.js

@@ -42,28 +42,26 @@ var react_1 = __importStar(require("react"));
 var EntityMarker_1 = require("../EntityMarker");
 var CustomClusterRenderer_1 = require("./CustomClusterRenderer");
 exports.ClusteredMarkers = (0, react_1.memo)(function (_a) {
-    var entityMarkers = _a.entityMarkers, options = _a.options, enabledClustering = _a.enabledClustering, onMarkerClick = _a.onMarkerClick;
+    var entityMarkers = _a.entityMarkers, options = _a.options, enabledClustering = _a.enabledClustering, onMarkerClick = _a.onMarkerClick, disabled = _a.disabled;
     var _b = (0, react_1.useState)({}), markers = _b[0], setMarkers = _b[1];
     var map = (0, react_google_maps_1.useMap)();
     var clusterer = (0, react_1.useMemo)(function () {
         if (!enabledClustering || !map)
             return null;
-        return new markerclusterer_1.MarkerClusterer({
-            map: map,
-            renderer: new CustomClusterRenderer_1.CustomClusterRenderer(options),
-            algorithmOptions: { maxZoom: options === null || options === void 0 ? void 0 : options.maxZoom }
-        });
-    }, [map, options, enabledClustering]);
-    (0, react_1.useEffect)(function () {
-        return function () {
-            clusterer === null || clusterer === void 0 ? void 0 : clusterer.onRemove();
-        };
-    }, [entityMarkers]);
+        return new markerclusterer_1.MarkerClusterer(__assign({ map: map, renderer: new CustomClusterRenderer_1.CustomClusterRenderer(options), algorithmOptions: { maxZoom: options === null || options === void 0 ? void 0 : options.maxZoom } }, (disabled
+            ? {
+                onClusterClick: null
+            }
+            : {})));
+    }, [map, options, enabledClustering, disabled]);
     (0, react_1.useEffect)(function () {
         if (!clusterer)
             return;
         clusterer.clearMarkers();
         clusterer.addMarkers(Object.values(markers));
+        return function () {
+            clusterer.onRemove();
+        };
     }, [clusterer, markers]);
     var setMarkerRef = (0, react_1.useCallback)(function (marker, key) {
         setMarkers(function (markers) {
@@ -79,6 +77,6 @@ exports.ClusteredMarkers = (0, react_1.memo)(function (_a) {
             }
         });
     }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null, entityMarkers.filter((0, ramda_1.prop)('point')).map(function (marker) { return (react_1.default.createElement(EntityMarker_1.EntityMarker, { key: marker.id, marker: marker, clusterer: enabledClustering ? setMarkerRef : undefined, onClick: onMarkerClick })); })));
+    return (react_1.default.createElement(react_1.default.Fragment, null, entityMarkers.filter((0, ramda_1.prop)('point')).map(function (marker) { return (react_1.default.createElement(EntityMarker_1.EntityMarker, { key: marker.id, marker: marker, clusterer: enabledClustering ? setMarkerRef : undefined, onClick: onMarkerClick, disabled: disabled })); })));
 });
 exports.ClusteredMarkers.displayName = 'ClusteredMarkers';

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

@@ -5,6 +5,7 @@ type Props = {
     marker: GeoPoint;
     onClick: (marker: GeoPoint) => void;
     clusterer?: (advancedMarker: google.maps.marker.AdvancedMarkerElement | null, id: string) => void;
+    disabled?: boolean;
 } & Omit<ComponentProps<typeof AdvancedMarker>, 'onClick' | 'position' | 'onMouseEnter' | 'onMouseLeave'>;
-declare const _default: React.MemoExoticComponent<({ marker, onClick, clusterer, ...otherProps }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ marker, onClick, clusterer, disabled, ...otherProps }: Props) => React.JSX.Element>;
 export default _default;

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

@@ -62,7 +62,7 @@ var hoveredMarkerIcon = (0, mdm_sdk_1.svg2Url)(marker_hover_inline_svg_1.HOVERED
 var markerIcon = (0, mdm_sdk_1.svg2Url)(marker_inline_svg_1.MARKER);
 var EntityMarker = function (_a) {
     var _b;
-    var marker = _a.marker, onClick = _a.onClick, clusterer = _a.clusterer, otherProps = __rest(_a, ["marker", "onClick", "clusterer"]);
+    var marker = _a.marker, onClick = _a.onClick, clusterer = _a.clusterer, disabled = _a.disabled, otherProps = __rest(_a, ["marker", "onClick", "clusterer", "disabled"]);
     var styles = (0, styles_1.useStyles)();
     var _c = (0, react_1.useState)(false), hovered = _c[0], setHovered = _c[1];
     var activeEntityUri = (0, react_1.useContext)(EntityMarkerContext_1.EntityMarkerContext).activeEntityUri;
@@ -79,7 +79,7 @@ var EntityMarker = function (_a) {
     }, [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,
-        anchorEl && (react_1.default.createElement(Popper_1.Popper, { anchorEl: anchorEl, open: hovered, className: styles.popper, modal: false, placement: "top", modifiers: [
+        anchorEl && !disabled && (react_1.default.createElement(Popper_1.Popper, { anchorEl: anchorEl, open: hovered, className: styles.popper, modal: false, placement: "top", modifiers: [
                 {
                     name: 'offset',
                     options: {
@@ -88,7 +88,7 @@ var EntityMarker = function (_a) {
                 }
             ] },
             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(react_google_maps_1.AdvancedMarker, __assign({ ref: ref, position: position, onClick: disabled ? undefined : handleClick, onMouseEnter: disabled ? undefined : onMouseOver, onMouseLeave: disabled ? undefined : 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/PolygonDrawing/PolygonDrawing.d.ts

@@ -0,0 +1,4 @@
+import { UsePolygonDrawingParams } from './usePolygonDrawing';
+type PolygonDrawingProps = Omit<UsePolygonDrawingParams, 'map'>;
+export declare const PolygonDrawing: (props: PolygonDrawingProps) => any;
+export {};

package/cjs/ReltioMap/components/PolygonDrawing/PolygonDrawing.js

@@ -0,0 +1,22 @@
+"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.PolygonDrawing = void 0;
+var react_google_maps_1 = require("@vis.gl/react-google-maps");
+var usePolygonDrawing_1 = require("./usePolygonDrawing");
+var PolygonDrawing = function (props) {
+    var map = (0, react_google_maps_1.useMap)();
+    (0, usePolygonDrawing_1.usePolygonDrawing)(__assign(__assign({}, props), { map: map }));
+    return null;
+};
+exports.PolygonDrawing = PolygonDrawing;

package/cjs/ReltioMap/components/PolygonDrawing/crosshair.inline.svg.d.ts

@@ -0,0 +1 @@
+export declare const CROSSHAIR = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" shape-rendering=\"crispEdges\">\n  <g fill=\"#FFFFFF\">\n    <rect x=\"6\" y=\"0\" width=\"3\" height=\"1\"/>\n    <rect x=\"6\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"0\" y=\"6\" width=\"7\" height=\"1\"/>\n    <rect x=\"8\" y=\"6\" width=\"7\" height=\"1\"/>\n    <rect x=\"0\" y=\"7\" width=\"1\" height=\"1\"/>\n    <rect x=\"14\" y=\"7\" width=\"1\" height=\"1\"/>\n    <rect x=\"0\" y=\"8\" width=\"7\" height=\"1\"/>\n    <rect x=\"8\" y=\"8\" width=\"7\" height=\"1\"/>\n    <rect x=\"6\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"13\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"13\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"14\" width=\"3\" height=\"1\"/>\n  </g>\n  <g fill=\"#000000\">\n    <rect x=\"7\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"6\" width=\"1\" height=\"1\"/>\n    <rect x=\"1\" y=\"7\" width=\"13\" height=\"1\"/>\n    <rect x=\"7\" y=\"8\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"13\" width=\"1\" height=\"1\"/>\n  </g>\n</svg>";

package/cjs/ReltioMap/components/PolygonDrawing/crosshair.inline.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CROSSHAIR = void 0;
+exports.CROSSHAIR = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" shape-rendering=\"crispEdges\">\n  <g fill=\"#FFFFFF\">\n    <rect x=\"6\" y=\"0\" width=\"3\" height=\"1\"/>\n    <rect x=\"6\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"0\" y=\"6\" width=\"7\" height=\"1\"/>\n    <rect x=\"8\" y=\"6\" width=\"7\" height=\"1\"/>\n    <rect x=\"0\" y=\"7\" width=\"1\" height=\"1\"/>\n    <rect x=\"14\" y=\"7\" width=\"1\" height=\"1\"/>\n    <rect x=\"0\" y=\"8\" width=\"7\" height=\"1\"/>\n    <rect x=\"8\" y=\"8\" width=\"7\" height=\"1\"/>\n    <rect x=\"6\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"13\" width=\"1\" height=\"1\"/>\n    <rect x=\"8\" y=\"13\" width=\"1\" height=\"1\"/>\n    <rect x=\"6\" y=\"14\" width=\"3\" height=\"1\"/>\n  </g>\n  <g fill=\"#000000\">\n    <rect x=\"7\" y=\"1\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"2\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"3\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"4\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"5\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"6\" width=\"1\" height=\"1\"/>\n    <rect x=\"1\" y=\"7\" width=\"13\" height=\"1\"/>\n    <rect x=\"7\" y=\"8\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"9\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"10\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"11\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"12\" width=\"1\" height=\"1\"/>\n    <rect x=\"7\" y=\"13\" width=\"1\" height=\"1\"/>\n  </g>\n</svg>";

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

@@ -0,0 +1,2 @@
+export { PolygonDrawing } from './PolygonDrawing';
+export { usePolygonDrawing } from './usePolygonDrawing';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePolygonDrawing = exports.PolygonDrawing = void 0;
+var PolygonDrawing_1 = require("./PolygonDrawing");
+Object.defineProperty(exports, "PolygonDrawing", { enumerable: true, get: function () { return PolygonDrawing_1.PolygonDrawing; } });
+var usePolygonDrawing_1 = require("./usePolygonDrawing");
+Object.defineProperty(exports, "usePolygonDrawing", { enumerable: true, get: function () { return usePolygonDrawing_1.usePolygonDrawing; } });

package/cjs/ReltioMap/components/PolygonDrawing/polygonRingHelpers.d.ts

@@ -0,0 +1,5 @@
+export declare const buildPolygonFromVertices: (vertices: readonly google.maps.LatLng[], options: google.maps.PolygonOptions) => google.maps.Polygon;
+export declare const serializeRing: (vertices: readonly google.maps.LatLng[]) => [number, number][];
+export declare const validateRing: (vertices: readonly google.maps.LatLng[] | null | undefined) => boolean;
+/** Drops the last vertex when it duplicates the previous (e.g. double-click emits an extra click at the same lat/lng). */
+export declare const dedupeTrailingDuplicateVertex: (vertices: readonly google.maps.LatLng[]) => google.maps.LatLng[];

package/cjs/ReltioMap/components/PolygonDrawing/polygonRingHelpers.js

@@ -0,0 +1,50 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dedupeTrailingDuplicateVertex = exports.validateRing = exports.serializeRing = exports.buildPolygonFromVertices = void 0;
+var buildPolygonFromVertices = function (vertices, options) {
+    return new google.maps.Polygon(__assign({ paths: __spreadArray([], vertices, true), map: null }, options));
+};
+exports.buildPolygonFromVertices = buildPolygonFromVertices;
+var serializeRing = function (vertices) {
+    return vertices.map(function (v) { return [v.lat(), v.lng()]; });
+};
+exports.serializeRing = serializeRing;
+var validateRing = function (vertices) {
+    var _a;
+    return ((_a = vertices === null || vertices === void 0 ? void 0 : vertices.length) !== null && _a !== void 0 ? _a : 0) >= 3;
+};
+exports.validateRing = validateRing;
+/** Drops the last vertex when it duplicates the previous (e.g. double-click emits an extra click at the same lat/lng). */
+var dedupeTrailingDuplicateVertex = function (vertices) {
+    var out = __spreadArray([], vertices, true);
+    if (out.length < 2) {
+        return out;
+    }
+    var last = out[out.length - 1];
+    var prev = out[out.length - 2];
+    if (last && prev && last.equals(prev)) {
+        out.pop();
+    }
+    return out;
+};
+exports.dedupeTrailingDuplicateVertex = dedupeTrailingDuplicateVertex;

package/cjs/ReltioMap/components/PolygonDrawing/useDrawingCursors.d.ts

@@ -0,0 +1,6 @@
+export declare const MAP_DRAWING_CROSSHAIR_CURSOR: string;
+type DrawingCursors = {
+    reapplyCursors: () => void;
+};
+export declare const useDrawingCursors: (map: google.maps.Map | null, isActive: boolean) => DrawingCursors;
+export {};

package/cjs/ReltioMap/components/PolygonDrawing/useDrawingCursors.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawingCursors = exports.MAP_DRAWING_CROSSHAIR_CURSOR = void 0;
+var react_1 = require("react");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var crosshair_inline_svg_1 = require("./crosshair.inline.svg");
+var helpers_1 = require("../../helpers");
+var crosshairCursorDataUrl = (0, mdm_sdk_1.svg2CursorUrl)(crosshair_inline_svg_1.CROSSHAIR);
+exports.MAP_DRAWING_CROSSHAIR_CURSOR = "url(\"".concat(crosshairCursorDataUrl, "\") 7 7, crosshair");
+var useDrawingCursors = function (map, isActive) {
+    var applyDrawingCursorsIfChangedRef = (0, react_1.useRef)(function () { });
+    var reapplyCursors = (0, react_1.useCallback)(function () {
+        applyDrawingCursorsIfChangedRef.current();
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!map || !isActive) {
+            return undefined;
+        }
+        var mapDiv = map.getDiv();
+        var isMapDragging = false;
+        var lastCursor = '';
+        var moRaf = null;
+        var getCurrentCursor = function () { return (isMapDragging ? 'grabbing' : exports.MAP_DRAWING_CROSSHAIR_CURSOR); };
+        var applyInlineCursorOnAdvancedMarkers = function (cursor) {
+            if (!(0, helpers_1.isDomElement)(mapDiv)) {
+                return;
+            }
+            mapDiv.querySelectorAll('gmp-advanced-marker').forEach(function (el) {
+                if (el instanceof HTMLElement) {
+                    el.style.setProperty('cursor', cursor, 'important');
+                }
+            });
+        };
+        var apply = function () {
+            var cursor = getCurrentCursor();
+            if ((0, helpers_1.isDomElement)(mapDiv)) {
+                if (lastCursor !== cursor) {
+                    lastCursor = cursor;
+                    mapDiv.style.setProperty('cursor', cursor, 'important');
+                }
+                applyInlineCursorOnAdvancedMarkers(cursor);
+            }
+        };
+        var applyAfterDomMutations = function () {
+            if (!(0, helpers_1.isDomElement)(mapDiv) || moRaf !== null) {
+                return;
+            }
+            moRaf = requestAnimationFrame(function () {
+                moRaf = null;
+                applyInlineCursorOnAdvancedMarkers(getCurrentCursor());
+            });
+        };
+        var mapDomObserver = (0, helpers_1.isDomElement)(mapDiv) ? new MutationObserver(applyAfterDomMutations) : null;
+        if (mapDomObserver) {
+            mapDomObserver.observe(mapDiv, { childList: true, subtree: true });
+        }
+        var reapplyCursorsToDom = function () {
+            lastCursor = '';
+            apply();
+        };
+        applyDrawingCursorsIfChangedRef.current = reapplyCursorsToDom;
+        var dragStartListener = map.addListener('dragstart', function () {
+            isMapDragging = true;
+            apply();
+        });
+        var dragEndListener = map.addListener('dragend', function () {
+            isMapDragging = false;
+            apply();
+        });
+        apply();
+        return function () {
+            applyDrawingCursorsIfChangedRef.current = function () { };
+            if (moRaf !== null) {
+                cancelAnimationFrame(moRaf);
+            }
+            mapDomObserver === null || mapDomObserver === void 0 ? void 0 : mapDomObserver.disconnect();
+            if ((0, helpers_1.isDomElement)(mapDiv)) {
+                mapDiv.querySelectorAll('gmp-advanced-marker').forEach(function (el) {
+                    if (el instanceof HTMLElement) {
+                        el.style.removeProperty('cursor');
+                    }
+                });
+                mapDiv.style.removeProperty('cursor');
+            }
+            google.maps.event.removeListener(dragStartListener);
+            google.maps.event.removeListener(dragEndListener);
+        };
+    }, [map, isActive]);
+    return { reapplyCursors: reapplyCursors };
+};
+exports.useDrawingCursors = useDrawingCursors;

package/cjs/ReltioMap/components/PolygonDrawing/usePolygonDrawing.d.ts

@@ -0,0 +1,9 @@
+export { MAP_DRAWING_CROSSHAIR_CURSOR } from './useDrawingCursors';
+export type UsePolygonDrawingParams = {
+    map: google.maps.Map | null;
+    isActive: boolean;
+    previewPolylineOptions: google.maps.PolylineOptions;
+    completedPolygonOptions: google.maps.PolygonOptions;
+    onPolygonComplete: (polygon: google.maps.Polygon) => void;
+};
+export declare const usePolygonDrawing: ({ map, isActive, previewPolylineOptions, completedPolygonOptions, onPolygonComplete }: UsePolygonDrawingParams) => void;

package/cjs/ReltioMap/components/PolygonDrawing/usePolygonDrawing.js

@@ -0,0 +1,202 @@
+"use strict";
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePolygonDrawing = exports.MAP_DRAWING_CROSSHAIR_CURSOR = void 0;
+var react_1 = require("react");
+var helpers_1 = require("../../helpers");
+var polygonRingHelpers_1 = require("./polygonRingHelpers");
+var useDrawingCursors_1 = require("./useDrawingCursors");
+var usePreviewPolylines_1 = require("./usePreviewPolylines");
+var useVertexHandles_1 = require("./useVertexHandles");
+var useDrawingCursors_2 = require("./useDrawingCursors");
+Object.defineProperty(exports, "MAP_DRAWING_CROSSHAIR_CURSOR", { enumerable: true, get: function () { return useDrawingCursors_2.MAP_DRAWING_CROSSHAIR_CURSOR; } });
+var usePolygonDrawing = function (_a) {
+    var map = _a.map, isActive = _a.isActive, previewPolylineOptions = _a.previewPolylineOptions, completedPolygonOptions = _a.completedPolygonOptions, onPolygonComplete = _a.onPolygonComplete;
+    var _b = (0, react_1.useState)([]), vertices = _b[0], setVertices = _b[1];
+    var verticesRef = (0, react_1.useRef)([]);
+    var completionLockRef = (0, react_1.useRef)(false);
+    var previewPolylineOptionsRef = (0, react_1.useRef)(previewPolylineOptions);
+    previewPolylineOptionsRef.current = previewPolylineOptions;
+    verticesRef.current = vertices;
+    var prevDisableDoubleClickZoom = (0, react_1.useRef)(undefined);
+    var prevClickableIcons = (0, react_1.useRef)(undefined);
+    var prevDraggableCursor = (0, react_1.useRef)(undefined);
+    var syncDisposeVertexHandlesRef = (0, react_1.useRef)(function () { });
+    (0, react_1.useEffect)(function () {
+        if (map && isActive) {
+            setVertices([]);
+            completionLockRef.current = false;
+        }
+        else if (!isActive) {
+            setVertices([]);
+        }
+    }, [map, isActive]);
+    var reapplyCursors = (0, useDrawingCursors_1.useDrawingCursors)(map, isActive).reapplyCursors;
+    var _c = (0, usePreviewPolylines_1.usePreviewPolylines)(map, previewPolylineOptionsRef, isActive), polylineRef = _c.polylineRef, rubberBandPolylineRef = _c.rubberBandPolylineRef, handleZIndexRef = _c.handleZIndexRef;
+    var reapplyCursorsRef = (0, react_1.useRef)(reapplyCursors);
+    reapplyCursorsRef.current = reapplyCursors;
+    var onPolygonCompleteRef = (0, react_1.useRef)(onPolygonComplete);
+    onPolygonCompleteRef.current = onPolygonComplete;
+    var completedPolygonOptionsRef = (0, react_1.useRef)(completedPolygonOptions);
+    completedPolygonOptionsRef.current = completedPolygonOptions;
+    var tryComplete = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (completionLockRef.current) {
+            return;
+        }
+        var verts = (0, polygonRingHelpers_1.dedupeTrailingDuplicateVertex)(verticesRef.current);
+        if (!(0, polygonRingHelpers_1.validateRing)(verts)) {
+            return;
+        }
+        completionLockRef.current = true;
+        syncDisposeVertexHandlesRef.current();
+        (_a = rubberBandPolylineRef.current) === null || _a === void 0 ? void 0 : _a.setPath([]);
+        var polygon = (0, polygonRingHelpers_1.buildPolygonFromVertices)(verts, completedPolygonOptionsRef.current);
+        (_b = polylineRef.current) === null || _b === void 0 ? void 0 : _b.setPath([]);
+        setVertices([]);
+        reapplyCursorsRef.current();
+        onPolygonCompleteRef.current(polygon);
+    }, [polylineRef, rubberBandPolylineRef]);
+    var resetDraftPolygon = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (verticesRef.current.length === 0) {
+            return;
+        }
+        setVertices([]);
+        (_a = polylineRef.current) === null || _a === void 0 ? void 0 : _a.setPath([]);
+        (_b = rubberBandPolylineRef.current) === null || _b === void 0 ? void 0 : _b.setPath([]);
+        reapplyCursorsRef.current();
+    }, [polylineRef, rubberBandPolylineRef]);
+    var tryCompleteRef = (0, react_1.useRef)(tryComplete);
+    tryCompleteRef.current = tryComplete;
+    var resetDraftPolygonRef = (0, react_1.useRef)(resetDraftPolygon);
+    resetDraftPolygonRef.current = resetDraftPolygon;
+    var previewPathVertexCountRef = (0, react_1.useRef)(0);
+    (0, useVertexHandles_1.useVertexHandles)({
+        map: map,
+        isActive: isActive,
+        vertices: vertices,
+        handleZIndexRef: handleZIndexRef,
+        onFirstHandleClick: tryComplete,
+        syncDisposeRef: syncDisposeVertexHandlesRef
+    });
+    (0, react_1.useEffect)(function () {
+        if (!isActive) {
+            previewPathVertexCountRef.current = 0;
+            return;
+        }
+        var line = polylineRef.current;
+        var band = rubberBandPolylineRef.current;
+        if (!line) {
+            return;
+        }
+        var path = line.getPath();
+        var prev = previewPathVertexCountRef.current;
+        var vertexCount = vertices.length;
+        if (vertexCount === 0) {
+            if (path.getLength() > 0) {
+                path.clear();
+            }
+            band === null || band === void 0 ? void 0 : band.setPath([]);
+            previewPathVertexCountRef.current = 0;
+            return;
+        }
+        var pathLen = path.getLength();
+        if (vertexCount < prev) {
+            line.setPath(vertices);
+        }
+        else if (vertexCount === prev + 1 && pathLen === prev) {
+            var added = vertices[vertexCount - 1];
+            if (added) {
+                path.push(added);
+            }
+        }
+        else if (vertexCount !== prev || pathLen !== vertexCount) {
+            line.setPath(vertices);
+        }
+        previewPathVertexCountRef.current = vertexCount;
+        var last = vertices[vertexCount - 1];
+        if (last) {
+            band === null || band === void 0 ? void 0 : band.setPath([last, last]);
+        }
+    }, [isActive, vertices, polylineRef, rubberBandPolylineRef]);
+    (0, react_1.useEffect)(function () {
+        if (!map || !isActive) {
+            return undefined;
+        }
+        prevDisableDoubleClickZoom.current = map.get('disableDoubleClickZoom');
+        prevClickableIcons.current = map.get('clickableIcons');
+        prevDraggableCursor.current = map.get('draggableCursor');
+        var mapDiv = map.getDiv();
+        var rubber = rubberBandPolylineRef;
+        var updateRubberBand = function (latLngFromEvent) {
+            var _a, _b, _c;
+            var verts = verticesRef.current;
+            if (!verts.length || !latLngFromEvent) {
+                (_a = rubber.current) === null || _a === void 0 ? void 0 : _a.setPath([]);
+                return;
+            }
+            var last = verts[verts.length - 1];
+            if (!last) {
+                (_b = rubber.current) === null || _b === void 0 ? void 0 : _b.setPath([]);
+                return;
+            }
+            (_c = rubber.current) === null || _c === void 0 ? void 0 : _c.setPath([last, latLngFromEvent]);
+        };
+        map.setOptions({
+            disableDoubleClickZoom: true,
+            clickableIcons: false,
+            draggableCursor: useDrawingCursors_1.MAP_DRAWING_CROSSHAIR_CURSOR
+        });
+        var mouseMoveListener = map.addListener('mousemove', function (e) {
+            var _a;
+            updateRubberBand((_a = e.latLng) !== null && _a !== void 0 ? _a : null);
+        });
+        var onDrawingClick = function (e) {
+            var latLng = e.latLng;
+            if (!latLng) {
+                return;
+            }
+            if (completionLockRef.current) {
+                return;
+            }
+            setVertices(function (vs) { return __spreadArray(__spreadArray([], vs, true), [latLng], false); });
+        };
+        var clickListener = map.addListener('click', onDrawingClick);
+        var onMapDivDblClick = function (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            tryCompleteRef.current();
+        };
+        var onMapDivMouseLeave = function () {
+            resetDraftPolygonRef.current();
+        };
+        if ((0, helpers_1.isDomElement)(mapDiv)) {
+            mapDiv.addEventListener('dblclick', onMapDivDblClick, true);
+            mapDiv.addEventListener('mouseleave', onMapDivMouseLeave);
+        }
+        return function () {
+            var _a;
+            if ((0, helpers_1.isDomElement)(mapDiv)) {
+                mapDiv.removeEventListener('dblclick', onMapDivDblClick, true);
+                mapDiv.removeEventListener('mouseleave', onMapDivMouseLeave);
+            }
+            google.maps.event.removeListener(mouseMoveListener);
+            google.maps.event.removeListener(clickListener);
+            map.setOptions({
+                disableDoubleClickZoom: (_a = prevDisableDoubleClickZoom.current) !== null && _a !== void 0 ? _a : false,
+                clickableIcons: prevClickableIcons.current !== undefined ? prevClickableIcons.current : true,
+                draggableCursor: prevDraggableCursor.current
+            });
+        };
+    }, [map, isActive]);
+};
+exports.usePolygonDrawing = usePolygonDrawing;

package/cjs/ReltioMap/components/PolygonDrawing/usePreviewPolylines.d.ts

@@ -0,0 +1,7 @@
+import { type MutableRefObject, type RefObject } from 'react';
+export type PreviewPolylinesRefs = {
+    polylineRef: RefObject<google.maps.Polyline | null>;
+    rubberBandPolylineRef: RefObject<google.maps.Polyline | null>;
+    handleZIndexRef: RefObject<number>;
+};
+export declare const usePreviewPolylines: (map: google.maps.Map | null, previewPolylineOptionsRef: MutableRefObject<google.maps.PolylineOptions>, isActive: boolean) => PreviewPolylinesRefs;

package/cjs/ReltioMap/components/PolygonDrawing/usePreviewPolylines.js

@@ -0,0 +1,42 @@
+"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.usePreviewPolylines = void 0;
+var react_1 = require("react");
+var usePreviewPolylines = function (map, previewPolylineOptionsRef, isActive) {
+    var polylineRef = (0, react_1.useRef)(null);
+    var rubberBandPolylineRef = (0, react_1.useRef)(null);
+    var handleZIndexRef = (0, react_1.useRef)(4);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!map || !isActive) {
+            return undefined;
+        }
+        var options = previewPolylineOptionsRef.current;
+        var polyline = new google.maps.Polyline(__assign(__assign({ map: map, path: [] }, options), { clickable: false, draggable: false, editable: false }));
+        var previewBandZ = ((_a = options.zIndex) !== null && _a !== void 0 ? _a : 2) + 1;
+        var rubberBandPolyline = new google.maps.Polyline(__assign(__assign({ map: map, path: [] }, options), { clickable: false, draggable: false, editable: false, zIndex: previewBandZ, strokeOpacity: Math.min(1, typeof options.strokeOpacity === 'number' ? options.strokeOpacity * 0.65 : 0.65) }));
+        handleZIndexRef.current = previewBandZ + 2;
+        polylineRef.current = polyline;
+        rubberBandPolylineRef.current = rubberBandPolyline;
+        return function () {
+            polyline.setMap(null);
+            rubberBandPolyline.setMap(null);
+            polylineRef.current = null;
+            rubberBandPolylineRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [map, isActive]);
+    return { polylineRef: polylineRef, rubberBandPolylineRef: rubberBandPolylineRef, handleZIndexRef: handleZIndexRef };
+};
+exports.usePreviewPolylines = usePreviewPolylines;

package/cjs/ReltioMap/components/PolygonDrawing/useVertexHandles.d.ts

@@ -0,0 +1,14 @@
+import { type MutableRefObject, type RefObject } from 'react';
+export type UseVertexHandlesParams = {
+    map: google.maps.Map | null;
+    isActive: boolean;
+    vertices: readonly google.maps.LatLng[];
+    handleZIndexRef: RefObject<number>;
+    onFirstHandleClick: () => void;
+    syncDisposeRef: MutableRefObject<() => void>;
+};
+/**
+ * N circular vertex markers. The first is clickable to close the ring; others swallow clicks to avoid
+ * double map-handling.
+ */
+export declare const useVertexHandles: ({ map, isActive, vertices, handleZIndexRef, onFirstHandleClick, syncDisposeRef }: UseVertexHandlesParams) => void;