@terraware/web-components 4.2.13 → 4.2.14-rc.1

package/components/Map/MapBox.js

@@ -1,21 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _mapbox = require("react-map-gl/mapbox");
-var _material = require("@mui/material");
-require("mapbox-gl/dist/mapbox-gl.css");
-var _utils = require("../../utils");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _MapViewStyleControl = _interopRequireDefault(require("./MapViewStyleControl"));
-var _ReactMapboxWrapper = _interopRequireDefault(require("./ReactMapboxWrapper"));
-var _types = require("./types");
-var _useMaintainLayerOrder = require("./useMaintainLayerOrder");
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FullscreenControl, Layer, Marker, NavigationControl, Source } from 'react-map-gl/mapbox';
+import { Box, useTheme } from '@mui/material';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { useDeviceInfo } from '../../utils';
+import Icon from '../Icon/Icon';
+import MapViewStyleControl from './MapViewStyleControl';
+import ReactMapbox from './ReactMapboxWrapper';
+import { stylesUrl } from './types';
+import { useMaintainLayerOrder } from './useMaintainLayerOrder';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const MapBox = props => {
   const {
     clusterRadius,
@@ -41,16 +34,16 @@ const MapBox = props => {
     setMapViewStyle,
     token
   } = props;
-  const theme = (0, _material.useTheme)();
-  const mapRef = (0, _react.useRef)(null);
+  const theme = useTheme();
+  const mapRef = useRef(null);
   const {
     isDesktop
-  } = (0, _utils.useDeviceInfo)();
-  const [cursor, setCursor] = (0, _react.useState)('auto');
-  const [hoverFeatureId, setHoverFeatureId] = (0, _react.useState)();
-  const [zoom, setZoom] = (0, _react.useState)();
-  const loadImages = (0, _react.useCallback)(map => {
-    mapImageUrls === null || mapImageUrls === void 0 ? void 0 : mapImageUrls.forEach(url => {
+  } = useDeviceInfo();
+  const [cursor, setCursor] = useState('auto');
+  const [hoverFeatureId, setHoverFeatureId] = useState();
+  const [zoom, setZoom] = useState();
+  const loadImages = useCallback(map => {
+    mapImageUrls?.forEach(url => {
       if (!map.hasImage(url)) {
         map.loadImage(url, (error, image) => {
           if (image) {
@@ -62,17 +55,17 @@ const MapBox = props => {
       }
     });
   }, [mapImageUrls]);
-  const mapRefCallback = (0, _react.useCallback)(map => {
+  const mapRefCallback = useCallback(map => {
     if (map !== null) {
       mapRef.current = map;
       setZoom(map.getZoom());
       loadImages(map);
     }
   }, []);
-  const onMove = (0, _react.useCallback)(view => {
+  const onMove = useCallback(view => {
     setZoom(view.viewState.zoom);
   }, []);
-  const clusterMarkers = (0, _react.useCallback)((map, markers) => {
+  const clusterMarkers = useCallback((map, markers) => {
     if (!map || map.getZoom() > 15) {
       // Too zoomed in. Return all marker as is
       return markers.map(marker => [marker]);
@@ -94,7 +87,7 @@ const MapBox = props => {
             const dx = markerPixels[marker.id].x - markerPixels[otherMarker.id].x;
             const dy = markerPixels[marker.id].y - markerPixels[otherMarker.id].y;
             const dist = Math.sqrt(dx * dx + dy * dy);
-            if (dist <= (clusterRadius !== null && clusterRadius !== void 0 ? clusterRadius : 40)) {
+            if (dist <= (clusterRadius ?? 40)) {
               cluster.push(otherMarker);
               visited.add(otherMarker.id);
             }
@@ -107,22 +100,20 @@ const MapBox = props => {
   }, [clusterRadius]);
 
   // Find all layers with at least some clickable elements
-  const interactiveLayerIds = (0, _react.useMemo)(() => {
-    var _featureGroups$filter;
-    return featureGroups === null || featureGroups === void 0 ? void 0 : (_featureGroups$filter = featureGroups.filter(group => group.features.some(feature => feature.onClick !== undefined))) === null || _featureGroups$filter === void 0 ? void 0 : _featureGroups$filter.map(group => group.layerId);
+  const interactiveLayerIds = useMemo(() => {
+    return featureGroups?.filter(group => group.features.some(feature => feature.onClick !== undefined))?.map(group => group.layerId);
   }, [featureGroups]);
-  const geojson = (0, _react.useMemo)(() => {
-    const features = featureGroups === null || featureGroups === void 0 ? void 0 : featureGroups.flatMap(group => {
+  const geojson = useMemo(() => {
+    const features = featureGroups?.flatMap(group => {
       return group.features.map(feature => {
-        var _feature$priority, _feature$selected;
         const properties = {
           id: feature.featureId,
           clickable: feature.onClick !== undefined,
           label: feature.label,
-          layerFeatureId: "".concat(group.layerId, "/").concat(feature.featureId),
+          layerFeatureId: `${group.layerId}/${feature.featureId}`,
           layerId: group.layerId,
-          priority: (_feature$priority = feature.priority) !== null && _feature$priority !== void 0 ? _feature$priority : 0,
-          selected: (_feature$selected = feature.selected) !== null && _feature$selected !== void 0 ? _feature$selected : false
+          priority: feature.priority ?? 0,
+          selected: feature.selected ?? false
         };
         return {
           type: 'Feature',
@@ -140,11 +131,10 @@ const MapBox = props => {
     borderLayers,
     fillLayers,
     textLayers
-  } = (0, _react.useMemo)(() => {
-    const _borderLayers = featureGroups === null || featureGroups === void 0 ? void 0 : featureGroups.map(group => {
-      return /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
-        key: "".concat(group.layerId, "-border"),
-        id: "".concat(group.layerId, "-border"),
+  } = useMemo(() => {
+    const _borderLayers = featureGroups?.map(group => {
+      return /*#__PURE__*/_jsx(Layer, {
+        id: `${group.layerId}-border`,
         source: 'mapData',
         type: "line",
         paint: {
@@ -152,11 +142,10 @@ const MapBox = props => {
           'line-width': 2
         },
         filter: ['==', ['get', 'layerId'], group.layerId]
-      });
+      }, `${group.layerId}-border`);
     });
-    const _fillLayers = featureGroups === null || featureGroups === void 0 ? void 0 : featureGroups.map(group => {
-      var _group$style$opacity;
-      const opacity = Math.min(0.4, (_group$style$opacity = group.style.opacity) !== null && _group$style$opacity !== void 0 ? _group$style$opacity : 0.2);
+    const _fillLayers = featureGroups?.map(group => {
+      const opacity = Math.min(0.4, group.style.opacity ?? 0.2);
       const selectedOpacity = opacity * 2;
       const hoverOpacity = opacity * 1.5;
       const hoverAndSelectedOpacity = opacity * 2.5;
@@ -164,78 +153,74 @@ const MapBox = props => {
       const clickableFilter = ['==', ['get', 'clickable'], true];
       const selectedFilter = ['==', ['get', 'selected'], true];
       const notSelectedFilter = ['==', ['get', 'selected'], false];
-      const hoverFilter = ['==', ['get', 'id'], hoverFeatureId !== null && hoverFeatureId !== void 0 ? hoverFeatureId : null];
-      const notHoverFilter = ['!=', ['get', 'id'], hoverFeatureId !== null && hoverFeatureId !== void 0 ? hoverFeatureId : null];
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
-        key: group.layerId,
-        id: group.layerId,
-        source: 'mapData',
-        type: 'fill',
-        paint: {
-          'fill-opacity': 0
-        },
-        filter: ['all', groupFilter, clickableFilter]
-      }), /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
-        key: "".concat(group.layerId, "-unselected"),
-        id: "".concat(group.layerId, "-unselected"),
-        source: 'mapData',
-        type: 'fill',
-        paint: group.style.fillPatternUrl ? {
-          'fill-pattern': group.style.fillPatternUrl,
-          'fill-opacity': opacity
-        } : {
-          'fill-color': group.style.fillColor,
-          'fill-opacity': opacity
-        },
-        filter: ['all', groupFilter, notSelectedFilter, notHoverFilter]
-      }), /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
-        key: "".concat(group.layerId, "-selected"),
-        id: "".concat(group.layerId, "-selected"),
-        slot: 'bottom',
-        source: 'mapData',
-        type: 'fill',
-        paint: group.style.fillPatternUrl ? {
-          'fill-pattern': group.style.fillPatternUrl,
-          'fill-opacity': selectedOpacity
-        } : {
-          'fill-color': group.style.fillColor,
-          'fill-opacity': selectedOpacity
-        },
-        filter: ['all', groupFilter, selectedFilter, notHoverFilter]
-      }), /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
-        key: "".concat(group.layerId, "-hover"),
-        id: "".concat(group.layerId, "-hover"),
-        source: 'mapData',
-        type: 'fill',
-        paint: group.style.fillPatternUrl ? {
-          'fill-pattern': group.style.fillPatternUrl,
-          'fill-opacity': hoverOpacity
-        } : {
-          'fill-color': group.style.fillColor,
-          'fill-opacity': hoverOpacity
-        },
-        filter: ['all', groupFilter, hoverFilter, notSelectedFilter]
-      }), /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
-        key: "".concat(group.layerId, "-selected-hover"),
-        id: "".concat(group.layerId, "-selected-hover"),
-        source: 'mapData',
-        type: 'fill',
-        paint: group.style.fillPatternUrl ? {
-          'fill-pattern': group.style.fillPatternUrl,
-          'fill-opacity': hoverAndSelectedOpacity
-        } : {
-          'fill-color': group.style.fillColor,
-          'fill-opacity': hoverAndSelectedOpacity
-        },
-        filter: ['all', groupFilter, hoverFilter, selectedFilter]
-      }));
+      const hoverFilter = ['==', ['get', 'id'], hoverFeatureId ?? null];
+      const notHoverFilter = ['!=', ['get', 'id'], hoverFeatureId ?? null];
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Layer, {
+          id: group.layerId,
+          source: 'mapData',
+          type: 'fill',
+          paint: {
+            'fill-opacity': 0
+          },
+          filter: ['all', groupFilter, clickableFilter]
+        }, group.layerId), /*#__PURE__*/_jsx(Layer, {
+          id: `${group.layerId}-unselected`,
+          source: 'mapData',
+          type: 'fill',
+          paint: group.style.fillPatternUrl ? {
+            'fill-pattern': group.style.fillPatternUrl,
+            'fill-opacity': opacity
+          } : {
+            'fill-color': group.style.fillColor,
+            'fill-opacity': opacity
+          },
+          filter: ['all', groupFilter, notSelectedFilter, notHoverFilter]
+        }, `${group.layerId}-unselected`), /*#__PURE__*/_jsx(Layer, {
+          id: `${group.layerId}-selected`,
+          slot: 'bottom',
+          source: 'mapData',
+          type: 'fill',
+          paint: group.style.fillPatternUrl ? {
+            'fill-pattern': group.style.fillPatternUrl,
+            'fill-opacity': selectedOpacity
+          } : {
+            'fill-color': group.style.fillColor,
+            'fill-opacity': selectedOpacity
+          },
+          filter: ['all', groupFilter, selectedFilter, notHoverFilter]
+        }, `${group.layerId}-selected`), /*#__PURE__*/_jsx(Layer, {
+          id: `${group.layerId}-hover`,
+          source: 'mapData',
+          type: 'fill',
+          paint: group.style.fillPatternUrl ? {
+            'fill-pattern': group.style.fillPatternUrl,
+            'fill-opacity': hoverOpacity
+          } : {
+            'fill-color': group.style.fillColor,
+            'fill-opacity': hoverOpacity
+          },
+          filter: ['all', groupFilter, hoverFilter, notSelectedFilter]
+        }, `${group.layerId}-hover`), /*#__PURE__*/_jsx(Layer, {
+          id: `${group.layerId}-selected-hover`,
+          source: 'mapData',
+          type: 'fill',
+          paint: group.style.fillPatternUrl ? {
+            'fill-pattern': group.style.fillPatternUrl,
+            'fill-opacity': hoverAndSelectedOpacity
+          } : {
+            'fill-color': group.style.fillColor,
+            'fill-opacity': hoverAndSelectedOpacity
+          },
+          filter: ['all', groupFilter, hoverFilter, selectedFilter]
+        }, `${group.layerId}-selected-hover`)]
+      });
     });
-    const _textLayers = featureGroups === null || featureGroups === void 0 ? void 0 : featureGroups.map(group => {
+    const _textLayers = featureGroups?.map(group => {
       const groupFilter = ['==', ['get', 'layerId'], group.layerId];
       const labelFilter = ['has', 'label'];
-      return /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
-        key: "".concat(group.layerId, "-label"),
-        id: "".concat(group.layerId, "-label"),
+      return /*#__PURE__*/_jsx(Layer, {
+        id: `${group.layerId}-label`,
         source: 'mapData',
         type: 'symbol',
         layout: {
@@ -250,108 +235,101 @@ const MapBox = props => {
           'text-color': '#ffffff'
         },
         filter: ['all', groupFilter, labelFilter]
-      });
+      }, `${group.layerId}-label`);
     });
     return {
-      borderLayers: _borderLayers !== null && _borderLayers !== void 0 ? _borderLayers : [],
-      fillLayers: _fillLayers !== null && _fillLayers !== void 0 ? _fillLayers : [],
-      textLayers: _textLayers !== null && _textLayers !== void 0 ? _textLayers : []
+      borderLayers: _borderLayers ?? [],
+      fillLayers: _fillLayers ?? [],
+      textLayers: _textLayers ?? []
     };
   }, [featureGroups, hoverFeatureId]);
-  const highlightLayers = (0, _react.useMemo)(() => {
-    var _highlightGroups$flat;
-    return (_highlightGroups$flat = highlightGroups === null || highlightGroups === void 0 ? void 0 : highlightGroups.flatMap(group => {
+  const highlightLayers = useMemo(() => {
+    return highlightGroups?.flatMap(group => {
       return group.highlights.map((highlight, index) => {
-        var _highlight$style$opac, _highlight$style$opac2;
-        const highlightFeatureIds = highlight.featureIds.map(_ref => {
-          let {
-            layerId,
-            featureId
-          } = _ref;
-          return "".concat(layerId, "/").concat(featureId);
-        });
-        return /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
-          key: "highlight-".concat(group.highlightId, "-").concat(index),
-          id: "highlight-".concat(group.highlightId, "-").concat(index),
+        const highlightFeatureIds = highlight.featureIds.map(({
+          layerId,
+          featureId
+        }) => `${layerId}/${featureId}`);
+        return /*#__PURE__*/_jsx(Layer, {
+          id: `highlight-${group.highlightId}-${index}`,
           source: 'mapData',
           type: 'fill',
           paint: highlight.style.fillPatternUrl ? {
             'fill-pattern': highlight.style.fillPatternUrl,
-            'fill-opacity': (_highlight$style$opac = highlight.style.opacity) !== null && _highlight$style$opac !== void 0 ? _highlight$style$opac : 0.5
+            'fill-opacity': highlight.style.opacity ?? 0.5
           } : {
             'fill-color': highlight.style.fillColor,
-            'fill-opacity': (_highlight$style$opac2 = highlight.style.opacity) !== null && _highlight$style$opac2 !== void 0 ? _highlight$style$opac2 : 0.5
+            'fill-opacity': highlight.style.opacity ?? 0.5
           },
           filter: ['all', ['has', 'layerFeatureId'], ['match', ['get', 'layerFeatureId'], highlightFeatureIds, true, false]]
-        });
+        }, `highlight-${group.highlightId}-${index}`);
       });
-    })) !== null && _highlightGroups$flat !== void 0 ? _highlightGroups$flat : [];
+    }) ?? [];
   }, [highlightGroups]);
-  const markersComponents = (0, _react.useMemo)(() => {
-    return markerGroups === null || markerGroups === void 0 ? void 0 : markerGroups.flatMap(markerGroup => {
+  const markersComponents = useMemo(() => {
+    return markerGroups?.flatMap(markerGroup => {
       // cluster markers here
       const clusteredMarkers = clusterMarkers(mapRef.current, markerGroup.markers);
       return clusteredMarkers.map((markers, i) => {
         if (markers.length === 1) {
           const marker = markers[0];
-          return /*#__PURE__*/_react.default.createElement(_mapbox.Marker, {
+          return /*#__PURE__*/_jsx(Marker, {
             className: "map-marker",
-            key: "marker-".concat(i),
             longitude: marker.longitude,
             latitude: marker.latitude,
             anchor: "center",
             onClick: event => {
-              var _marker$onClick;
-              (_marker$onClick = marker.onClick) === null || _marker$onClick === void 0 ? void 0 : _marker$onClick.call(marker);
+              marker.onClick?.();
               event.originalEvent.stopPropagation();
             },
             style: {
               backgroundColor: marker.selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
-            }
-          }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-            fillColor: marker.selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
-            name: markerGroup.style.iconName,
-            size: 'small'
-          }));
+            },
+            children: /*#__PURE__*/_jsx(Icon, {
+              fillColor: marker.selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
+              name: markerGroup.style.iconName,
+              size: 'small'
+            })
+          }, `marker-${i}`);
         } else if (markers.length > 1) {
           const latSum = markers.reduce((sum, marker) => sum + marker.latitude, 0);
           const lngSum = markers.reduce((sum, marker) => sum + marker.longitude, 0);
           const latAvg = latSum / markers.length;
           const lngAvg = lngSum / markers.length;
           const selected = markers.some(marker => marker.selected);
-          return /*#__PURE__*/_react.default.createElement(_mapbox.Marker, {
+          return /*#__PURE__*/_jsxs(Marker, {
             className: "map-marker map-marker--cluster",
-            key: "marker-".concat(i),
             longitude: lngAvg,
             latitude: latAvg,
             anchor: "center",
             onClick: event => {
-              var _mapRef$current;
-              (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.easeTo({
+              mapRef.current?.easeTo({
                 center: {
                   lat: latAvg,
                   lon: lngAvg
                 },
-                zoom: (zoom !== null && zoom !== void 0 ? zoom : 10) + 1,
+                zoom: (zoom ?? 10) + 1,
                 duration: 500
               });
               event.originalEvent.stopPropagation();
             },
             style: {
               backgroundColor: selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
-            }
-          }, /*#__PURE__*/_react.default.createElement("p", {
-            className: "count"
-          }, markers.length), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-            fillColor: selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
-            name: markerGroup.style.iconName,
-            size: 'small'
-          }));
+            },
+            children: [/*#__PURE__*/_jsx("p", {
+              className: "count",
+              children: markers.length
+            }), /*#__PURE__*/_jsx(Icon, {
+              fillColor: selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
+              name: markerGroup.style.iconName,
+              size: 'small'
+            })]
+          }, `marker-${i}`);
         }
       });
     });
   }, [markerGroups, theme, zoom]);
-  const onMouseMove = (0, _react.useCallback)(event => {
+  const onMouseMove = useCallback(event => {
     if (event.features && event.features.length) {
       const properties = event.features.map(feature => feature.properties).filter(featureProperties => featureProperties && featureProperties.id !== undefined && featureProperties.priority !== undefined && featureProperties.clickable);
       if (properties.length) {
@@ -364,18 +342,17 @@ const MapBox = props => {
     }
     setHoverFeatureId(undefined);
   }, []);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (!mapRef.current) {
       return;
     }
     const observer = new ResizeObserver(() => {
-      var _mapRef$current2;
-      (_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.resize();
+      mapRef.current?.resize();
     });
     observer.observe(mapRef.current.getContainer());
     return () => observer.disconnect();
   }, []);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (!mapRef.current) {
       return;
     }
@@ -383,17 +360,16 @@ const MapBox = props => {
   }, [drawerOpen]);
 
   // Hovering interactive layers
-  const onMouseEnter = (0, _react.useCallback)(() => setCursor(cursorInteract !== null && cursorInteract !== void 0 ? cursorInteract : 'pointer'), [cursorInteract]);
-  const onMouseLeave = (0, _react.useCallback)(() => setCursor('auto'), []);
+  const onMouseEnter = useCallback(() => setCursor(cursorInteract ?? 'pointer'), [cursorInteract]);
+  const onMouseLeave = useCallback(() => setCursor('auto'), []);
 
   // Entering and exiting canvases
-  const onMouseOver = (0, _react.useCallback)(() => setCursor(cursorMap !== null && cursorMap !== void 0 ? cursorMap : 'auto'), [cursorMap]);
-  const onMouseOut = (0, _react.useCallback)(() => setCursor('auto'), []);
+  const onMouseOver = useCallback(() => setCursor(cursorMap ?? 'auto'), [cursorMap]);
+  const onMouseOut = useCallback(() => setCursor('auto'), []);
 
   // On layer click
-  const onMapClick = (0, _react.useCallback)(event => {
-    var _event$features;
-    if (featureGroups && (_event$features = event.features) !== null && _event$features !== void 0 && _event$features.length) {
+  const onMapClick = useCallback(event => {
+    if (featureGroups && event.features?.length) {
       const properties = event.features.map(feature => feature.properties).filter(featureProperties => featureProperties && featureProperties.id !== undefined && featureProperties.priority !== undefined && featureProperties.clickable);
       if (properties.length) {
         const topPriorityFeature = properties.reduce((top, current) => {
@@ -411,19 +387,18 @@ const MapBox = props => {
       onClickCanvas(event);
     }
   }, [featureGroups, onClickCanvas]);
-  const orderedLayerIds = (0, _react.useMemo)(() => {
+  const orderedLayerIds = useMemo(() => {
     return [...fillLayers.map(layer => layer.props.id), ...highlightLayers.map(layer => layer.props.id), ...borderLayers.map(layer => layer.props.id), ...textLayers.map(layer => layer.props.id)];
   }, [borderLayers, fillLayers, highlightLayers, textLayers]);
-  (0, _useMaintainLayerOrder.useMaintainLayerOrder)(mapRef, orderedLayerIds);
-  return /*#__PURE__*/_react.default.createElement(_ReactMapboxWrapper.default, {
-    key: mapId,
+  useMaintainLayerOrder(mapRef, orderedLayerIds);
+  return /*#__PURE__*/_jsxs(ReactMapbox, {
     attributionControl: false,
     cursor: cursor,
     doubleClickZoom: !disableZoom && !disableDoubleClickZoom,
     interactiveLayerIds: interactiveLayerIds,
     initialViewState: initialViewState,
     mapboxAccessToken: token,
-    mapStyle: _types.stylesUrl[mapViewStyle],
+    mapStyle: stylesUrl[mapViewStyle],
     ref: mapRefCallback,
     scrollZoom: !disableZoom,
     style: {
@@ -437,43 +412,47 @@ const MapBox = props => {
     onMouseLeave: onMouseLeave,
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
-    onMouseMove: onMouseMove
-  }, isDesktop && !hideFullScreenControl && /*#__PURE__*/_react.default.createElement(_mapbox.FullscreenControl, {
-    position: "top-left",
-    containerId: containerId
-  }), !hideZoomControl && /*#__PURE__*/_react.default.createElement(_mapbox.NavigationControl, {
-    showCompass: false,
-    style: {
-      marginRight: theme.spacing(2),
-      marginBottom: theme.spacing(2)
-    },
-    position: "bottom-right"
-  }), !hideMapViewStyleControl && /*#__PURE__*/_react.default.createElement(_MapViewStyleControl.default, {
-    containerId: containerId,
-    mapViewStyle: mapViewStyle,
-    setMapViewStyle: setMapViewStyle
-  }), controlTopRight && /*#__PURE__*/_react.default.createElement(_material.Box, {
-    sx: {
-      height: 'max-content',
-      position: 'absolute',
-      right: theme.spacing(2),
-      top: theme.spacing(2),
-      width: 'max-content',
-      zIndex: 1000
-    }
-  }, controlTopRight), controlBottomLeft && /*#__PURE__*/_react.default.createElement(_material.Box, {
-    style: {
-      height: 'max-content',
-      position: 'absolute',
-      left: theme.spacing(2),
-      bottom: theme.spacing(4),
-      width: 'max-content',
-      zIndex: 1000
-    }
-  }, controlBottomLeft), geojson && /*#__PURE__*/_react.default.createElement(_mapbox.Source, {
-    id: "mapData",
-    type: "geojson",
-    data: geojson
-  }, fillLayers, highlightLayers, borderLayers, textLayers), markersComponents);
+    onMouseMove: onMouseMove,
+    children: [isDesktop && !hideFullScreenControl && /*#__PURE__*/_jsx(FullscreenControl, {
+      position: "top-left",
+      containerId: containerId
+    }), !hideZoomControl && /*#__PURE__*/_jsx(NavigationControl, {
+      showCompass: false,
+      style: {
+        marginRight: theme.spacing(2),
+        marginBottom: theme.spacing(2)
+      },
+      position: "bottom-right"
+    }), !hideMapViewStyleControl && /*#__PURE__*/_jsx(MapViewStyleControl, {
+      containerId: containerId,
+      mapViewStyle: mapViewStyle,
+      setMapViewStyle: setMapViewStyle
+    }), controlTopRight && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        height: 'max-content',
+        position: 'absolute',
+        right: theme.spacing(2),
+        top: theme.spacing(2),
+        width: 'max-content',
+        zIndex: 1000
+      },
+      children: controlTopRight
+    }), controlBottomLeft && /*#__PURE__*/_jsx(Box, {
+      style: {
+        height: 'max-content',
+        position: 'absolute',
+        left: theme.spacing(2),
+        bottom: theme.spacing(4),
+        width: 'max-content',
+        zIndex: 1000
+      },
+      children: controlBottomLeft
+    }), geojson && /*#__PURE__*/_jsxs(Source, {
+      id: "mapData",
+      type: "geojson",
+      data: geojson,
+      children: [fillLayers, highlightLayers, borderLayers, textLayers]
+    }), markersComponents]
+  }, mapId);
 };
-var _default = exports.default = MapBox;
+export default MapBox;

package/components/Map/MapContainer.js

@@ -1,13 +1,7 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _utils = require("../../utils");
-require("./styles.scss");
+import React, { useMemo } from 'react';
+import { useDeviceInfo } from '../../utils';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MapContainer = props => {
   const {
     containerId,
@@ -18,13 +12,15 @@ const MapContainer = props => {
   } = props;
   const {
     isDesktop
-  } = (0, _utils.useDeviceInfo)();
-  const drawerOnly = (0, _react.useMemo)(() => !isDesktop && drawerOpen, [drawerOpen, isDesktop]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  } = useDeviceInfo();
+  const drawerOnly = useMemo(() => !isDesktop && drawerOpen, [drawerOpen, isDesktop]);
+  return /*#__PURE__*/_jsxs("div", {
     id: containerId,
-    className: "map-container map-container".concat(isDesktop ? '--desktop' : "--mobile".concat(drawerOpen ? '-drawer-open' : ''))
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "map-holder".concat(drawerOnly ? ' map-holder--hidden' : '')
-  }, map), drawerOpen && drawer, !drawerOnly && legend);
+    className: `map-container map-container${isDesktop ? '--desktop' : `--mobile${drawerOpen ? '-drawer-open' : ''}`}`,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `map-holder${drawerOnly ? ' map-holder--hidden' : ''}`,
+      children: map
+    }), drawerOpen && drawer, !drawerOnly && legend]
+  });
 };
-var _default = exports.default = MapContainer;
+export default MapContainer;