@terraware/web-components 4.2.26-rc.0 → 4.3.0

package/components/Map/MapBox.js

@@ -1,14 +1,16 @@
-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 { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import ReactMapbox, { Layer, Marker, FullscreenControl, NavigationControl, Source } from 'react-map-gl/mapbox';
+import { useTheme, Box } 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";
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Icon from '../Icon/Icon.js';
+import MapViewStyleControl from './MapViewStyleControl.js';
+import { stylesUrl } from './types.js';
+import { useMaintainLayerOrder } from './useMaintainLayerOrder.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
 const MapBox = props => {
   const {
     clusterRadius,
@@ -133,7 +135,7 @@ const MapBox = props => {
     textLayers
   } = useMemo(() => {
     const _borderLayers = featureGroups?.map(group => {
-      return /*#__PURE__*/_jsx(Layer, {
+      return /*#__PURE__*/jsx(Layer, {
         id: `${group.layerId}-border`,
         source: 'mapData',
         type: "line",
@@ -155,8 +157,8 @@ const MapBox = props => {
       const notSelectedFilter = ['==', ['get', 'selected'], false];
       const hoverFilter = ['==', ['get', 'id'], hoverFeatureId ?? null];
       const notHoverFilter = ['!=', ['get', 'id'], hoverFeatureId ?? null];
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Layer, {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Layer, {
           id: group.layerId,
           source: 'mapData',
           type: 'fill',
@@ -164,7 +166,7 @@ const MapBox = props => {
             'fill-opacity': 0
           },
           filter: ['all', groupFilter, clickableFilter]
-        }, group.layerId), /*#__PURE__*/_jsx(Layer, {
+        }, group.layerId), /*#__PURE__*/jsx(Layer, {
           id: `${group.layerId}-unselected`,
           source: 'mapData',
           type: 'fill',
@@ -176,7 +178,7 @@ const MapBox = props => {
             'fill-opacity': opacity
           },
           filter: ['all', groupFilter, notSelectedFilter, notHoverFilter]
-        }, `${group.layerId}-unselected`), /*#__PURE__*/_jsx(Layer, {
+        }, `${group.layerId}-unselected`), /*#__PURE__*/jsx(Layer, {
           id: `${group.layerId}-selected`,
           slot: 'bottom',
           source: 'mapData',
@@ -189,7 +191,7 @@ const MapBox = props => {
             'fill-opacity': selectedOpacity
           },
           filter: ['all', groupFilter, selectedFilter, notHoverFilter]
-        }, `${group.layerId}-selected`), /*#__PURE__*/_jsx(Layer, {
+        }, `${group.layerId}-selected`), /*#__PURE__*/jsx(Layer, {
           id: `${group.layerId}-hover`,
           source: 'mapData',
           type: 'fill',
@@ -201,7 +203,7 @@ const MapBox = props => {
             'fill-opacity': hoverOpacity
           },
           filter: ['all', groupFilter, hoverFilter, notSelectedFilter]
-        }, `${group.layerId}-hover`), /*#__PURE__*/_jsx(Layer, {
+        }, `${group.layerId}-hover`), /*#__PURE__*/jsx(Layer, {
           id: `${group.layerId}-selected-hover`,
           source: 'mapData',
           type: 'fill',
@@ -219,7 +221,7 @@ const MapBox = props => {
     const _textLayers = featureGroups?.map(group => {
       const groupFilter = ['==', ['get', 'layerId'], group.layerId];
       const labelFilter = ['has', 'label'];
-      return /*#__PURE__*/_jsx(Layer, {
+      return /*#__PURE__*/jsx(Layer, {
         id: `${group.layerId}-label`,
         source: 'mapData',
         type: 'symbol',
@@ -250,7 +252,7 @@ const MapBox = props => {
           layerId,
           featureId
         }) => `${layerId}/${featureId}`);
-        return /*#__PURE__*/_jsx(Layer, {
+        return /*#__PURE__*/jsx(Layer, {
           id: `highlight-${group.highlightId}-${index}`,
           source: 'mapData',
           type: 'fill',
@@ -273,7 +275,7 @@ const MapBox = props => {
       return clusteredMarkers.map((markers, i) => {
         if (markers.length === 1) {
           const marker = markers[0];
-          return /*#__PURE__*/_jsx(Marker, {
+          return /*#__PURE__*/jsx(Marker, {
             className: "map-marker",
             longitude: marker.longitude,
             latitude: marker.latitude,
@@ -285,7 +287,7 @@ const MapBox = props => {
             style: {
               backgroundColor: marker.selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
             },
-            children: /*#__PURE__*/_jsx(Icon, {
+            children: /*#__PURE__*/jsx(Icon, {
               fillColor: marker.selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
               name: markerGroup.style.iconName,
               size: 'small'
@@ -297,7 +299,7 @@ const MapBox = props => {
           const latAvg = latSum / markers.length;
           const lngAvg = lngSum / markers.length;
           const selected = markers.some(marker => marker.selected);
-          return /*#__PURE__*/_jsxs(Marker, {
+          return /*#__PURE__*/jsxs(Marker, {
             className: "map-marker map-marker--cluster",
             longitude: lngAvg,
             latitude: latAvg,
@@ -316,10 +318,10 @@ const MapBox = props => {
             style: {
               backgroundColor: selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
             },
-            children: [/*#__PURE__*/_jsx("p", {
+            children: [/*#__PURE__*/jsx("p", {
               className: "count",
               children: markers.length
-            }), /*#__PURE__*/_jsx(Icon, {
+            }), /*#__PURE__*/jsx(Icon, {
               fillColor: selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
               name: markerGroup.style.iconName,
               size: 'small'
@@ -391,7 +393,7 @@ const MapBox = props => {
     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]);
   useMaintainLayerOrder(mapRef, orderedLayerIds);
-  return /*#__PURE__*/_jsxs(ReactMapbox, {
+  return /*#__PURE__*/jsxs(ReactMapbox, {
     attributionControl: false,
     cursor: cursor,
     doubleClickZoom: !disableZoom && !disableDoubleClickZoom,
@@ -413,21 +415,21 @@ const MapBox = props => {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseMove: onMouseMove,
-    children: [isDesktop && !hideFullScreenControl && /*#__PURE__*/_jsx(FullscreenControl, {
+    children: [isDesktop && !hideFullScreenControl && /*#__PURE__*/jsx(FullscreenControl, {
       position: "top-left",
       containerId: containerId
-    }), !hideZoomControl && /*#__PURE__*/_jsx(NavigationControl, {
+    }), !hideZoomControl && /*#__PURE__*/jsx(NavigationControl, {
       showCompass: false,
       style: {
         marginRight: theme.spacing(2),
         marginBottom: theme.spacing(2)
       },
       position: "bottom-right"
-    }), !hideMapViewStyleControl && /*#__PURE__*/_jsx(MapViewStyleControl, {
+    }), !hideMapViewStyleControl && /*#__PURE__*/jsx(MapViewStyleControl, {
       containerId: containerId,
       mapViewStyle: mapViewStyle,
       setMapViewStyle: setMapViewStyle
-    }), controlTopRight && /*#__PURE__*/_jsx(Box, {
+    }), controlTopRight && /*#__PURE__*/jsx(Box, {
       sx: {
         height: 'max-content',
         position: 'absolute',
@@ -437,7 +439,7 @@ const MapBox = props => {
         zIndex: 1000
       },
       children: controlTopRight
-    }), controlBottomLeft && /*#__PURE__*/_jsx(Box, {
+    }), controlBottomLeft && /*#__PURE__*/jsx(Box, {
       style: {
         height: 'max-content',
         position: 'absolute',
@@ -447,7 +449,7 @@ const MapBox = props => {
         zIndex: 1000
       },
       children: controlBottomLeft
-    }), geojson && /*#__PURE__*/_jsxs(Source, {
+    }), geojson && /*#__PURE__*/jsxs(Source, {
       id: "mapData",
       type: "geojson",
       data: geojson,
@@ -455,4 +457,5 @@ const MapBox = props => {
     }), markersComponents]
   }, mapId);
 };
-export default MapBox;
+
+export { MapBox as default };

package/components/Map/MapContainer.js

@@ -1,7 +1,10 @@
-import React, { useMemo } from 'react';
-import { useDeviceInfo } from '../../utils';
+import { useMemo } from 'react';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 const MapContainer = props => {
   const {
     containerId,
@@ -14,13 +17,14 @@ const MapContainer = props => {
     isDesktop
   } = useDeviceInfo();
   const drawerOnly = useMemo(() => !isDesktop && drawerOpen, [drawerOpen, isDesktop]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     id: containerId,
     className: `map-container map-container${isDesktop ? '--desktop' : `--mobile${drawerOpen ? '-drawer-open' : ''}`}`,
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/jsx("div", {
       className: `map-holder${drawerOnly ? ' map-holder--hidden' : ''}`,
       children: map
     }), drawerOpen && drawer, !drawerOnly && legend]
   });
 };
-export default MapContainer;
+
+export { MapContainer as default };

package/components/Map/MapDateSliderControl.js

@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
-import { Box, Card, Typography, useTheme } from '@mui/material';
+import { useMemo } from 'react';
+import { useTheme, Card, Typography, Box } from '@mui/material';
 import { DateTime } from 'luxon';
-import { getShortDate } from '../../utils/date';
-import Slider from '../Slider';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getShortDate } from '../../utils/date.js';
+import Slider from '../Slider/index.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
 const MapDateSliderControl = ({
   dates,
   selectedDate,
@@ -26,11 +27,11 @@ const MapDateSliderControl = ({
     }));
   }, [dates]);
   const getDateString = date => getShortDate(date);
-  const getDateLabel = date => /*#__PURE__*/_jsx(Typography, {
+  const getDateLabel = date => /*#__PURE__*/jsx(Typography, {
     fontSize: "12px",
     children: getDateString(date)
   });
-  return /*#__PURE__*/_jsxs(Card, {
+  return /*#__PURE__*/jsxs(Card, {
     style: {
       border: `1px solid ${theme.palette.TwClrBrdrTertiary}`,
       borderRadius: '8px',
@@ -40,20 +41,20 @@ const MapDateSliderControl = ({
       maxWidth: '270px',
       width: dates.length > 1 ? '270px' : undefined
     },
-    children: [selectedDate && /*#__PURE__*/_jsx(Typography, {
+    children: [selectedDate && /*#__PURE__*/jsx(Typography, {
       fontSize: "14px",
       fontWeight: 600,
       textAlign: "right",
       children: getDateString(selectedDate)
-    }), dates.length > 1 && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Slider, {
+    }), dates.length > 1 && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Slider, {
         value: selectedDate.valueOf(),
         min: earliestDate.valueOf(),
         max: latestDate.valueOf(),
         marks: marks,
         valueLabelDisplay: "off",
         onChange: value => onChange(DateTime.fromMillis(value))
-      }), /*#__PURE__*/_jsxs(Box, {
+      }), /*#__PURE__*/jsxs(Box, {
         display: "flex",
         justifyContent: "space-between",
         children: [getDateLabel(earliestDate), getDateLabel(latestDate)]
@@ -61,4 +62,5 @@ const MapDateSliderControl = ({
     })]
   });
 };
-export default MapDateSliderControl;
+
+export { MapDateSliderControl as default };

package/components/Map/MapDrawer.js

@@ -1,9 +1,12 @@
-import React from 'react';
-import { Box, IconButton, useTheme } from '@mui/material';
-import { useDeviceInfo } from '../../utils';
-import Icon from '../Icon/Icon';
+import 'react';
+import { useTheme, Box, IconButton } from '@mui/material';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Icon from '../Icon/Icon.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 const MapDrawer = props => {
   const {
     children,
@@ -17,28 +20,29 @@ const MapDrawer = props => {
   const {
     isDesktop
   } = useDeviceInfo();
-  return open ? /*#__PURE__*/_jsxs(Box, {
+  return open ? /*#__PURE__*/jsxs(Box, {
     className: `map-drawer map-drawer${isDesktop ? `--${size}` : '--mobile'}`,
     borderLeft: isDesktop ? `1px solid ${theme.palette.TwClrBrdrTertiary}` : undefined,
     borderRight: isDesktop ? `1px solid ${theme.palette.TwClrBrdrTertiary}` : undefined,
     style: style,
-    children: [/*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/jsxs(Box, {
       className: "map-drawer--header",
-      children: [/*#__PURE__*/_jsx("p", {
+      children: [/*#__PURE__*/jsx("p", {
         className: "title",
         children: title
-      }), /*#__PURE__*/_jsx(IconButton, {
+      }), /*#__PURE__*/jsx(IconButton, {
         onClick: onClose,
         size: "small",
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/jsx(Icon, {
           name: "close",
           className: "icon-close"
         })
       })]
-    }), /*#__PURE__*/_jsx(Box, {
+    }), /*#__PURE__*/jsx(Box, {
       className: 'map-drawer--body',
       children: children
     })]
   }) : null;
 };
-export default MapDrawer;
+
+export { MapDrawer as default };

package/components/Map/MapLegend.js

@@ -1,9 +1,12 @@
-import React from 'react';
-import { Box, Tooltip, Typography, useTheme } from '@mui/material';
-import { useDeviceInfo } from '../../utils';
-import AntSwitch from '../AntSwitch';
-import Icon from '../Icon/Icon';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'react';
+import { useTheme, Typography, Tooltip, Box } from '@mui/material';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import AntSwitch from '../AntSwitch/index.js';
+import Icon from '../Icon/Icon.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
 const MapLegend = ({
   legends
 }) => {
@@ -15,27 +18,27 @@ const MapLegend = ({
   const legendComponents = legends.map((legend, index) => {
     const isFirst = index === 0;
     const isLast = index === legends.length - 1;
-    const switchComponent = legend.type === 'highlight' ? /*#__PURE__*/_jsx(AntSwitch, {
+    const switchComponent = legend.type === 'highlight' ? /*#__PURE__*/jsx(AntSwitch, {
       disabled: legend.disabled,
       checked: legend.visible,
       onChange: legend.setVisible
     }) : undefined;
-    const titleComponent = /*#__PURE__*/_jsxs(Typography, {
+    const titleComponent = /*#__PURE__*/jsxs(Typography, {
       fontSize: "16px",
       fontWeight: 600,
       width: isMobile ? '100%' : undefined,
       marginRight: isMobile ? 0 : theme.spacing(4),
       paddingLeft: switchComponent ? theme.spacing(1) : theme.spacing(0),
-      children: [legend.title, legend.tooltip && /*#__PURE__*/_jsx(Tooltip, {
+      children: [legend.title, legend.tooltip && /*#__PURE__*/jsx(Tooltip, {
         title: legend.tooltip,
         sx: {
           display: 'inline-block',
           verticalAlign: 'text-top',
           marginLeft: theme.spacing(1)
         },
-        children: /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/jsx(Box, {
           display: "flex",
-          children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/jsx(Icon, {
             fillColor: theme.palette.TwClrIcnInfo,
             name: "info",
             size: "small"
@@ -49,7 +52,7 @@ const MapLegend = ({
       const selected = legend.type === 'layer' ? item.id === legend.selectedLayer : legend.type === 'marker' ? item.visible : false;
       const logoComponent = () => {
         if (item.style.type === 'icon') {
-          return /*#__PURE__*/_jsx(Icon, {
+          return /*#__PURE__*/jsx(Icon, {
             name: item.style.iconName,
             fillColor: item.style.iconColor,
             style: {
@@ -58,7 +61,7 @@ const MapLegend = ({
             size: 'small'
           });
         } else {
-          return /*#__PURE__*/_jsx(Box, {
+          return /*#__PURE__*/jsx(Box, {
             display: 'flex',
             sx: {
               border: `2px solid ${item.style.borderColor ?? theme.palette.TwClrBaseGreen300}`,
@@ -68,7 +71,7 @@ const MapLegend = ({
               minWidth: '24px',
               marginRight: theme.spacing(1)
             },
-            children: /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/jsx(Box, {
               height: '16px',
               width: '24px',
               sx: {
@@ -85,23 +88,23 @@ const MapLegend = ({
         switch (legend.type) {
           case 'marker':
             const featureItem = item;
-            const visibleIcon = featureItem.visible ? /*#__PURE__*/_jsx(Icon, {
+            const visibleIcon = featureItem.visible ? /*#__PURE__*/jsx(Icon, {
               name: "iconEye"
-            }) : /*#__PURE__*/_jsx(Icon, {
+            }) : /*#__PURE__*/jsx(Icon, {
               name: "iconEyeOff"
             });
-            return /*#__PURE__*/_jsx(Box, {
+            return /*#__PURE__*/jsx(Box, {
               display: "flex",
               children: visibleIcon
             });
           case 'layer':
             const layerItem = item;
-            return /*#__PURE__*/_jsx(Box, {
+            return /*#__PURE__*/jsx(Box, {
               display: "flex",
               sx: {
                 visibility: layerItem.id === legend.selectedLayer ? 'visible' : 'hidden'
               },
-              children: /*#__PURE__*/_jsx(Icon, {
+              children: /*#__PURE__*/jsx(Icon, {
                 name: "checkmark",
                 style: {
                   marginRight: theme.spacing(1)
@@ -112,7 +115,7 @@ const MapLegend = ({
             return undefined;
         }
       };
-      return /*#__PURE__*/_jsxs(Box, {
+      return /*#__PURE__*/jsxs(Box, {
         onClick: onClick,
         display: "flex",
         alignItems: "center",
@@ -124,31 +127,31 @@ const MapLegend = ({
           opacity: disabled ? '0.5' : 1
         },
         justifyContent: 'space-between',
-        children: [/*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/jsxs(Box, {
           display: "flex",
           alignItems: "center",
           paddingRight: theme.spacing(1),
-          children: [logoComponent(), /*#__PURE__*/_jsx(Typography, {
+          children: [logoComponent(), /*#__PURE__*/jsx(Typography, {
             fontSize: "14px",
             fontWeight: 400,
             children: item.label
           })]
-        }), /*#__PURE__*/_jsx(Box, {
+        }), /*#__PURE__*/jsx(Box, {
           display: "flex",
           children: visibleComponent()
         })]
       }, `${index}-${itemIndex}`);
     });
-    return /*#__PURE__*/_jsx(Box, {
+    return /*#__PURE__*/jsx(Box, {
       sx: {
         opacity: legend.disabled ? 0.7 : 1
       },
       borderBottom: isLast ? 'none' : `1px solid ${theme.palette.TwClrBrdrTertiary}`,
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: /*#__PURE__*/jsxs(Box, {
         paddingBottom: 2,
         paddingTop: isFirst ? 0 : 2,
         flexDirection: 'column',
-        children: [/*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/jsxs(Box, {
           display: "flex",
           alignItems: 'center',
           paddingLeft: theme.spacing(1),
@@ -157,7 +160,7 @@ const MapLegend = ({
       })
     }, legend.title);
   });
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/jsx(Box, {
     bgcolor: theme.palette.TwClrBaseWhite,
     display: "flex",
     justifyItems: "flex-start",
@@ -171,4 +174,5 @@ const MapLegend = ({
     children: legendComponents
   });
 };
-export default MapLegend;
+
+export { MapLegend as default };

package/components/Map/MapViewStyleControl.js

@@ -1,8 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
-import { Box, useTheme } from '@mui/material';
-import PopoverMenu from '../PopoverMenu';
-import { MapViewStyles } from './types';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from 'react';
+import { useTheme, Box } from '@mui/material';
+import PopoverMenu from '../PopoverMenu/index.js';
+import { MapViewStyles } from './types.js';
+import { jsx } from 'react/jsx-runtime';
+
 const MapViewStyleControl = ({
   containerId,
   mapViewStyle,
@@ -24,7 +25,7 @@ const MapViewStyleControl = ({
       return document.getElementById(containerId);
     }
   }, [containerId]);
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/jsx(Box, {
     sx: {
       position: 'absolute',
       top: '10px',
@@ -45,8 +46,8 @@ const MapViewStyleControl = ({
         marginLeft: 0
       }
     },
-    children: /*#__PURE__*/_jsx(PopoverMenu, {
-      anchor: /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/jsx(PopoverMenu, {
+      anchor: /*#__PURE__*/jsx(Box, {
         component: "span",
         sx: {
           fontSize: '12px',
@@ -61,4 +62,5 @@ const MapViewStyleControl = ({
     })
   });
 };
-export default MapViewStyleControl;
+
+export { MapViewStyleControl as default };

package/components/Map/ReactMapboxWrapper.js

@@ -1,2 +1,2 @@
 import ReactMapbox from 'react-map-gl/mapbox';
-export default ReactMapbox;
+export { default } from 'react-map-gl/mapbox';

package/components/Map/index.js

@@ -1,9 +1,10 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import MapBox from './MapBox';
-import MapContainer from './MapContainer';
-import MapDrawer from './MapDrawer';
-import MapLegend from './MapLegend';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import MapBox from './MapBox.js';
+import MapContainer from './MapContainer.js';
+import MapDrawer from './MapDrawer.js';
+import MapLegend from './MapLegend.js';
+import { jsx } from 'react/jsx-runtime';
+
 const MapComponent = props => {
   const {
     clusterRadius,
@@ -138,9 +139,9 @@ const MapComponent = props => {
     highlightImageUrls.forEach(url => imageUrls.add(url));
     return Array.from(imageUrls);
   }, [features]);
-  return /*#__PURE__*/_jsx(MapContainer, {
+  return /*#__PURE__*/jsx(MapContainer, {
     containerId: mapContainerId ?? 'map-container',
-    map: /*#__PURE__*/_jsx(MapBox, {
+    map: /*#__PURE__*/jsx(MapBox, {
       clusterRadius: clusterRadius,
       containerId: mapContainerId ?? 'map-container',
       controlBottomLeft: controlBottomLeft,
@@ -164,7 +165,7 @@ const MapComponent = props => {
       setMapViewStyle: setMapViewStyle,
       token: token
     }),
-    drawer: /*#__PURE__*/_jsx(MapDrawer, {
+    drawer: /*#__PURE__*/jsx(MapDrawer, {
       open: drawerOpen ?? false,
       onClose: () => setDrawerOpen?.(false),
       size: drawerSize ?? 'small',
@@ -172,9 +173,10 @@ const MapComponent = props => {
       children: drawerChildren
     }),
     drawerOpen: drawerOpen,
-    legend: !hideLegend && legends && /*#__PURE__*/_jsx(MapLegend, {
+    legend: !hideLegend && legends && /*#__PURE__*/jsx(MapLegend, {
       legends: legends
     })
   });
 };
-export default MapComponent;
+
+export { MapComponent as default };

package/components/Map/types.js

@@ -8,11 +8,13 @@
 
 // Additional shading/annotations for map entities
 
-export const MapViewStyles = ['Outdoors', 'Satellite', 'Light', 'Dark', 'Streets'];
-export const stylesUrl = {
+const MapViewStyles = ['Outdoors', 'Satellite', 'Light', 'Dark', 'Streets'];
+const stylesUrl = {
   Outdoors: 'mapbox://styles/mapbox/outdoors-v12?optimize=true',
   Satellite: 'mapbox://styles/mapbox/satellite-streets-v12?optimize=true',
   Streets: 'mapbox://styles/mapbox/streets-v12?optimize=true',
   Light: 'mapbox://styles/mapbox/light-v11?optimize=true',
   Dark: 'mapbox://styles/mapbox/dark-v11?optimize=true'
-};
+};
+
+export { MapViewStyles, stylesUrl };

package/components/Map/useMaintainLayerOrder.js

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
+
 /**
  * Ensures that all given layers maintain strict order in the Mapbox layer stack.
  */
-export const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
+const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
   useEffect(() => {
     const map = mapRef.current;
     if (!map) {
@@ -22,4 +23,6 @@ export const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
       }
     }
   }, [mapRef, orderedLayerIds]);
-};
+};
+
+export { useMaintainLayerOrder };