@reltio/components 1.4.2006 → 1.4.2007

package/MapChart/components/Legend/styles.d.ts

@@ -2,5 +2,5 @@ type StylesProps = {
     colors: string[];
     width: number;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"alignBottom" | "legendContainer" | "alignTop" | "legendBar" | "legendLabel">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"legendContainer" | "alignTop" | "alignBottom" | "legendBar" | "legendLabel">;
 export {};

package/ProfileResizablePanes/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"pane" | "resizablePanesWrapper">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"resizablePanesWrapper" | "pane">;

package/ReltioMap/ReltioMap.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import { GoogleMapProps, MarkerClustererProps } from '@react-google-maps/api';
-import { DrawingModes, EntityMarker as Marker, MapBounds, Overlay, OverlayPath } from './types';
-type MarkerClustererOptions = MarkerClustererProps['options'];
+import { GeoPoint } from '@reltio/mdm-sdk';
+import { DrawingModes, MapBounds, Overlay, ClusteredMarkersOptions, DrawingMode } from './types';
 type Props = {
-    markers?: Marker[];
+    markers?: GeoPoint[];
     mapKey: string;
-    defaultZoom?: GoogleMapProps['zoom'];
-    defaultCenter?: GoogleMapProps['center'];
+    /** A map ID is required to use Advanced Markers. https://developers.google.com/maps/documentation/javascript/advanced-markers/overview */
+    mapId?: string;
+    defaultZoom?: number;
+    defaultCenter?: google.maps.LatLngLiteral;
     loadingElement: React.ReactElement;
     isSearchOnMapMove?: boolean;
     isSearchEnabled?: boolean;
@@ -14,15 +15,18 @@ type Props = {
     overlayOptions?: google.maps.PolygonOptions | google.maps.CircleOptions;
     drawingModes?: DrawingModes;
     markerClusterer?: boolean;
-    markerClustererOptions?: MarkerClustererOptions;
+    markerClustererOptions?: ClusteredMarkersOptions;
     mapOptions?: google.maps.MapOptions;
     mapContainerClassName?: string;
     onMapBoundsChanged?: (value: MapBounds | null) => void;
     onOverlayUpdated?: (value: {
-        data: OverlayPath;
-        type: string;
+        data: number[][] | {
+            radius: number;
+            center: google.maps.LatLng;
+        };
+        type: DrawingMode;
     }) => void;
-    onMarkerClicked?: (value: Marker) => void;
+    onMarkerClicked?: (value: GeoPoint) => void;
 };
-export declare const ReltioMap: ({ markers, mapKey, defaultZoom, defaultCenter, loadingElement, isSearchOnMapMove, isSearchEnabled, activeOverlay, overlayOptions, drawingModes, markerClusterer, markerClustererOptions, mapOptions, mapContainerClassName, onMapBoundsChanged, onOverlayUpdated, onMarkerClicked }: Props) => React.JSX.Element;
+export declare const ReltioMap: ({ mapKey, ...restProps }: Props) => React.JSX.Element;
 export {};

package/ReltioMap/ReltioMap.js

@@ -9,33 +9,54 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { propEq, isEmpty, prop, identity } from 'ramda';
-import { GoogleMap, useJsApiLoader, Polygon, DrawingManager, MarkerClusterer } from '@react-google-maps/api';
-import { EntityMarker } from './components/EntityMarker';
-import { MapControlContainer } from './components/MapControlContainer';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { propEq, isEmpty, identity } from 'ramda';
+import { APIProvider, ControlPosition, Map, MapControl, useApiIsLoaded, useMap } from '@vis.gl/react-google-maps';
 import { TopRightMapControls } from './components/TopRightMapControls';
 import { TopCenterMapControls } from './components/TopCenterMapControls';
 import { getMapBoundsPolygon, getDrawingMode } from './helpers';
 import { DEFAULT_GOOGLE_MAP_OPTIONS, DEFAULT_OVERLAY_OPTIONS, MAP_DRAWING_MODES } from '../constants';
 import { useFitMapBounds } from './useFitMapBounds';
 import { useStyles } from './styles';
+import { ClusteredMarkers } from './components/ClusteredMarkers';
+import { Polygon } from './components/Polygon';
+import { DrawingManager } from './components/DrawingManager';
 var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
 var libraries = ['drawing'];
 export var ReltioMap = function (_a) {
-    var _b = _a.markers, markers = _b === void 0 ? [] : _b, mapKey = _a.mapKey, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, _c = _a.overlayOptions, overlayOptions = _c === void 0 ? {} : _c, _d = _a.drawingModes, drawingModes = _d === void 0 ? [] : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _e = _a.mapOptions, mapOptions = _e === void 0 ? {} : _e, mapContainerClassName = _a.mapContainerClassName, _f = _a.onMapBoundsChanged, onMapBoundsChanged = _f === void 0 ? identity : _f, _g = _a.onOverlayUpdated, onOverlayUpdated = _g === void 0 ? identity : _g, _h = _a.onMarkerClicked, onMarkerClicked = _h === void 0 ? identity : _h;
+    var mapKey = _a.mapKey, restProps = __rest(_a, ["mapKey"]);
+    return (React.createElement(APIProvider, { apiKey: mapKey, libraries: libraries },
+        React.createElement(InternalReltioMap, __assign({}, restProps))));
+};
+var emptyObject = {};
+var emptyArray = [];
+var InternalReltioMap = memo(function (_a) {
+    var mapId = _a.mapId, _b = _a.markers, markers = _b === void 0 ? emptyArray : _b, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, _c = _a.overlayOptions, overlayOptions = _c === void 0 ? emptyObject : _c, _d = _a.drawingModes, drawingModes = _d === void 0 ? emptyArray : _d, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, _f = _a.mapOptions, mapOptions = _f === void 0 ? emptyObject : _f, mapContainerClassName = _a.mapContainerClassName, _g = _a.onMapBoundsChanged, onMapBoundsChanged = _g === void 0 ? identity : _g, _h = _a.onOverlayUpdated, onOverlayUpdated = _h === void 0 ? identity : _h, _j = _a.onMarkerClicked, onMarkerClicked = _j === void 0 ? identity : _j;
     var styles = useStyles();
-    var _j = useJsApiLoader({
-        googleMapsApiKey: mapKey,
-        libraries: libraries
-    }), isLoaded = _j.isLoaded, loadError = _j.loadError;
     var mapMoveEndTimer = useRef(null);
-    var _k = useState(null), map = _k[0], setMap = _k[1];
-    var _l = useState(null), polygon = _l[0], setPolygon = _l[1];
-    var _m = useState(null), drawingMode = _m[0], setDrawingMode = _m[1];
+    var isLoaded = useApiIsLoaded();
+    var map = useMap();
+    var _k = useState(null), polygon = _k[0], setPolygon = _k[1];
+    var _l = useState(null), drawingMode = _l[0], setDrawingMode = _l[1];
     useFitMapBounds({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
     var allOverlayOptions = useMemo(function () { return (__assign(__assign({}, DEFAULT_OVERLAY_OPTIONS), overlayOptions)); }, [overlayOptions]);
     var googleMapOptions = useMemo(function () { return (__assign(__assign({}, DEFAULT_GOOGLE_MAP_OPTIONS), mapOptions)); }, [mapOptions]);
+    var drawingManagerOptions = useMemo(function () { return ({
+        drawingControl: false,
+        polygonOptions: allOverlayOptions
+    }); }, [allOverlayOptions]);
+    var polygonOptions = useMemo(function () { return (__assign({ paths: activeOverlay === null || activeOverlay === void 0 ? void 0 : activeOverlay.path, editable: true }, allOverlayOptions)); }, [activeOverlay, allOverlayOptions]);
     var handleChangeIsSearchOnMapMove = useCallback(function (isSearchOnMapMove) {
         onMapBoundsChanged(isSearchOnMapMove ? getMapBoundsPolygon(map) : null);
         setDrawingMode(null);
@@ -55,7 +76,7 @@ export var ReltioMap = function (_a) {
         clearTimeout(mapMoveEndTimer.current);
         mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
     }, [handleMapMoveEnd, isSearchOnMapMove]);
-    var handleOverlayChange = useCallback(function (e, propOverlay) {
+    var handleOverlayChange = useCallback(function (_e, propOverlay) {
         var _a;
         var _b;
         var polygonStateOverlay = polygon && { type: MAP_DRAWING_MODES.POLYGON, overlay: polygon };
@@ -69,7 +90,10 @@ export var ReltioMap = function (_a) {
                 .getArray()
                 .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
         };
-        var getCircleParameters = function () { return ({ radius: overlay.getRadius() / 1000, center: overlay.getCenter() }); };
+        var getCircleParameters = function () { return ({
+            radius: overlay.getRadius() / 1000,
+            center: overlay.getCenter()
+        }); };
         var typeActions = (_a = {},
             _a[MAP_DRAWING_MODES.POLYGON] = getPolygonLatLngCoordinates,
             _a[MAP_DRAWING_MODES.CIRCLE] = getCircleParameters,
@@ -87,17 +111,6 @@ export var ReltioMap = function (_a) {
     var handleClearOverlay = useCallback(function () {
         onOverlayUpdated(null);
     }, [onOverlayUpdated]);
-    var renderMarkers = function (clusterer) {
-        return markers
-            .filter(prop('point'))
-            .map(function (marker) { return (React.createElement(EntityMarker, { key: marker.id, marker: marker, clusterer: clusterer, onClick: onMarkerClicked })); });
-    };
-    var renderMarkerClusterer = function (options) {
-        return React.createElement(MarkerClusterer, { options: options }, renderMarkers);
-    };
-    if (loadError) {
-        return null;
-    }
     if (!isLoaded) {
         return loadingElement;
     }
@@ -105,16 +118,13 @@ export var ReltioMap = function (_a) {
     var shouldRenderRightMapControls = map && isSearchEnabled && Boolean(drawingModes.length);
     var shouldRenderCenterMapControls = map && isSearchEnabled;
     var shouldRenderPolygon = !getDrawingMode(drawingMode) && activeOverlay && propEq('type', MAP_DRAWING_MODES.POLYGON, activeOverlay);
-    return (React.createElement(GoogleMap, { mapTypeId: window.google.maps.MapTypeId.ROADMAP, options: googleMapOptions, onLoad: setMap, zoom: defaultZoom, center: defaultCenter, onZoomChanged: handleMapMoveStart, onDragStart: handleMapMoveStart, onIdle: handleMapIdle, mapContainerClassName: mapContainerClassName },
-        shouldRenderRightMapControls && (React.createElement(MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_RIGHT, map: map },
-            React.createElement(TopRightMapControls, { hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
-        shouldRenderCenterMapControls && (React.createElement(MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_CENTER, map: map },
-            React.createElement(TopCenterMapControls, { onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
-        markerClusterer ? renderMarkerClusterer(markerClustererOptions) : renderMarkers(),
-        shouldRenderPolygon && (React.createElement(Polygon, { onLoad: setPolygon, path: activeOverlay.path, editable: true, options: allOverlayOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
-        shouldRenderDrawingManager && (React.createElement(DrawingManager, { onPolygonComplete: handleOverlayComplete(MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(MAP_DRAWING_MODES.CIRCLE), drawingMode: getDrawingMode(drawingMode), options: {
-                drawingControl: false,
-                circleOptions: allOverlayOptions,
-                polygonOptions: allOverlayOptions
-            } }))));
-};
+    return (React.createElement(Map, __assign({ mapId: mapId || 'mapId' }, googleMapOptions, { defaultZoom: defaultZoom, defaultCenter: defaultCenter, onZoomChanged: handleMapMoveStart, onDragstart: handleMapMoveStart, onIdle: handleMapIdle, className: mapContainerClassName }),
+        shouldRenderRightMapControls && (React.createElement(MapControl, { position: ControlPosition.TOP_RIGHT },
+            React.createElement(TopRightMapControls, { className: styles.mapControlContainer, hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+        shouldRenderCenterMapControls && (React.createElement(MapControl, { position: ControlPosition.TOP_CENTER },
+            React.createElement(TopCenterMapControls, { className: styles.mapControlContainer, onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
+        React.createElement(ClusteredMarkers, { entityMarkers: markers, enabledClustering: markerClusterer, options: markerClustererOptions, onMarkerClick: onMarkerClicked }),
+        shouldRenderPolygon && (React.createElement(Polygon, { onInit: setPolygon, options: polygonOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
+        shouldRenderDrawingManager && (React.createElement(DrawingManager, { onPolygonComplete: handleOverlayComplete(MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(MAP_DRAWING_MODES.CIRCLE), drawingMode: getDrawingMode(drawingMode), options: drawingManagerOptions }))));
+});
+InternalReltioMap.displayName = 'InternalReltioMap';