@terraware/web-components 5.0.27 → 5.1.1-rc.0

package/components/Map/MapViewStyleControl.js

@@ -1,66 +1,62 @@
-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,
-  mapViewStyleNames,
-  setMapViewStyle
-}) => {
-  const theme = useTheme();
-  const viewOptions = useMemo(() => {
-    return MapViewStyles.map(style => ({
-      label: mapViewStyleNames?.(style) ?? style,
-      value: style
-    }));
-  }, [mapViewStyleNames]);
-  const onSelectMapViewStyle = useCallback(item => {
-    setMapViewStyle(item.value);
-  }, []);
-  const container = useMemo(() => {
-    if (containerId) {
-      return document.getElementById(containerId);
-    }
-  }, [containerId]);
-  return /*#__PURE__*/jsx(Box, {
-    sx: {
-      position: 'absolute',
-      top: '10px',
-      left: '45px',
-      zIndex: 10,
-      height: 28,
-      backgroundColor: `${theme.palette.TwClrBaseWhite}`,
-      borderRadius: '4px',
-      display: 'flex',
-      alignItems: 'center',
-      '& .MuiButtonBase-root': {
-        padding: 0
-      },
-      '& .MuiButtonBase-root.MuiMenuItem-root': {
-        fontSize: '12px'
-      },
-      '& svg': {
-        marginLeft: 0
-      }
-    },
-    children: /*#__PURE__*/jsx(PopoverMenu, {
-      anchor: /*#__PURE__*/jsx(Box, {
-        component: "span",
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { Box, useTheme } from "@mui/material";
+import PopoverMenu from "../PopoverMenu/index.js";
+import { MapViewStyles } from "./types.js";
+const MapViewStyleControl = ({ containerId, mapViewStyle, mapViewStyleNames, setMapViewStyle })=>{
+    const theme = useTheme();
+    const viewOptions = useMemo(()=>MapViewStyles.map((style)=>({
+                label: mapViewStyleNames?.(style) ?? style,
+                value: style
+            })), [
+        mapViewStyleNames
+    ]);
+    const onSelectMapViewStyle = useCallback((item)=>{
+        setMapViewStyle(item.value);
+    }, []);
+    const container = useMemo(()=>{
+        if (containerId) return document.getElementById(containerId);
+    }, [
+        containerId
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
         sx: {
-          fontSize: '12px',
-          paddingLeft: theme.spacing(0.5),
-          color: theme.palette.TwClrTxt
+            position: 'absolute',
+            top: '10px',
+            left: '45px',
+            zIndex: 10,
+            height: 28,
+            backgroundColor: `${theme.palette.TwClrBaseWhite}`,
+            borderRadius: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            '& .MuiButtonBase-root': {
+                padding: 0
+            },
+            '& .MuiButtonBase-root.MuiMenuItem-root': {
+                fontSize: '12px'
+            },
+            '& svg': {
+                marginLeft: 0
+            }
         },
-        children: mapViewStyleNames?.(mapViewStyle) ?? mapViewStyle
-      }),
-      container: container,
-      menuSections: [viewOptions],
-      onClick: onSelectMapViewStyle
-    })
-  });
+        children: /*#__PURE__*/ jsx(PopoverMenu, {
+            anchor: /*#__PURE__*/ jsx(Box, {
+                component: "span",
+                sx: {
+                    fontSize: '12px',
+                    paddingLeft: theme.spacing(0.5),
+                    color: theme.palette.TwClrTxt
+                },
+                children: mapViewStyleNames?.(mapViewStyle) ?? mapViewStyle
+            }),
+            container: container,
+            menuSections: [
+                viewOptions
+            ],
+            onClick: onSelectMapViewStyle
+        })
+    });
 };
-
-export { MapViewStyleControl as default };
+const Map_MapViewStyleControl = MapViewStyleControl;
+export default Map_MapViewStyleControl;

package/components/Map/ReactMapboxWrapper.js

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

package/components/Map/index.js

@@ -1,182 +1,163 @@
-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,
-    controlBottomLeft,
-    controlTopRight,
-    cursorInteract,
-    cursorMap,
-    disableDoubleClickZoom,
-    disableZoom,
-    drawerChildren,
-    drawerOpen,
-    drawerSize,
-    drawerTitle,
-    features,
-    hideFullScreenControl,
-    hideLegend,
-    hideMapViewStyleControl,
-    hideZoomControl,
-    initialSelectedLayerId,
-    initialMapViewStyle,
-    initialViewState,
-    mapContainerId,
-    mapId,
-    onClickCanvas,
-    setDrawerOpen,
-    token
-  } = props;
-  const [mapViewStyle, setMapViewStyle] = useState(initialMapViewStyle ?? 'Streets');
-  const [visibleHighlights, setVisibleHighlights] = useState([]);
-  const setHighlightVisible = useCallback(highlightId => visible => {
-    if (visible) {
-      setVisibleHighlights(_visibleHighlights => [..._visibleHighlights, highlightId]);
-    } else {
-      setVisibleHighlights(_visibleHighlights => _visibleHighlights.filter(_highlightId => _highlightId !== highlightId));
-    }
-  }, []);
-  const [visibleMarkers, setVisibleMarkers] = useState([]);
-  const setMarkerVisible = useCallback(markerGroupId => visible => {
-    if (visible) {
-      setVisibleMarkers(_visibleMarkers => [..._visibleMarkers, markerGroupId]);
-    } else {
-      setVisibleMarkers(_visibleMarkers => _visibleMarkers.filter(_markerGroupId => _markerGroupId !== markerGroupId));
-    }
-  }, []);
-  const [selectedLayer, setSelectedLayer] = useState(initialSelectedLayerId);
-  const legends = useMemo(() => {
-    return features?.map(feature => {
-      const baseLegendGroup = {
-        disabled: feature.sectionDisabled,
-        title: feature.sectionTitle,
-        tooltip: feature.sectionTooltip
-      };
-      switch (feature.type) {
-        case 'highlight':
-          return {
-            ...baseLegendGroup,
-            items: feature.legendItems,
-            type: 'highlight',
-            visible: visibleHighlights.findIndex(highlightId => highlightId === feature.highlight.highlightId) >= 0,
-            setVisible: setHighlightVisible(feature.highlight.highlightId)
-          };
-        case 'layer':
-          return {
-            ...baseLegendGroup,
-            items: feature.layers.map(layer => ({
-              disabled: layer.disabled,
-              id: layer.layerId,
-              label: layer.label,
-              style: layer.style
-            })),
-            selectedLayer,
-            setSelectedLayer,
-            type: 'layer'
-          };
-        case 'marker':
-          return {
-            ...baseLegendGroup,
-            items: feature.groups.map(group => ({
-              disabled: group.disabled,
-              id: group.markerGroupId,
-              label: group.label,
-              style: group.style,
-              setVisible: setMarkerVisible(group.markerGroupId),
-              visible: visibleMarkers.findIndex(markerId => markerId === group.markerGroupId) >= 0
-            })),
-            type: 'marker'
-          };
-      }
-    });
-  }, [features, selectedLayer, visibleHighlights, visibleMarkers]);
-  const layers = useMemo(() => {
-    return features?.filter(feature => feature.type === 'layer')?.flatMap(feature => feature.layers)?.filter(layer => layer.layerId === selectedLayer);
-  }, [features, selectedLayer]);
-  const highlightGroups = useMemo(() => {
-    return features?.filter(feature => feature.type === 'highlight')?.map(feature => feature.highlight)?.filter(highlight => visibleHighlights.findIndex(_highlightId => _highlightId === highlight.highlightId) >= 0);
-  }, [features, visibleHighlights]);
-  const markerGroups = useMemo(() => {
-    return features?.filter(feature => feature.type === 'marker')?.flatMap(feature => feature.groups).filter(group => visibleMarkers.findIndex(_markerId => _markerId === group.markerGroupId) >= 0);
-  }, [features, visibleMarkers]);
-  const mapViewState = useMemo(() => {
-    if (initialViewState) {
-      return initialViewState;
-    } else if (features) {
-      const coordinates = features.filter(feature => feature.type === 'layer').flatMap(feature => feature.layers).flatMap(layer => layer.features).map(geoFeature => geoFeature.geometry.coordinates).flat().flat().flat();
-      if (coordinates.length > 0) {
-        let minLat = Infinity;
-        let maxLat = -Infinity;
-        let minLng = Infinity;
-        let maxLng = -Infinity;
-        for (const [lng, lat] of coordinates) {
-          minLat = Math.min(minLat, lat);
-          maxLat = Math.max(maxLat, lat);
-          minLng = Math.min(minLng, lng);
-          maxLng = Math.max(maxLng, lng);
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import MapBox from "./MapBox.js";
+import MapContainer from "./MapContainer.js";
+import MapDrawer from "./MapDrawer.js";
+import MapLegend from "./MapLegend.js";
+const MapComponent = (props)=>{
+    const { clusterRadius, controlBottomLeft, controlTopRight, cursorInteract, cursorMap, disableDoubleClickZoom, disableZoom, drawerChildren, drawerOpen, drawerSize, drawerTitle, features, hideFullScreenControl, hideLegend, hideMapViewStyleControl, hideZoomControl, initialSelectedLayerId, initialMapViewStyle, initialViewState, mapContainerId, mapId, onClickCanvas, setDrawerOpen, token } = props;
+    const [mapViewStyle, setMapViewStyle] = useState(initialMapViewStyle ?? 'Streets');
+    const [visibleHighlights, setVisibleHighlights] = useState([]);
+    const setHighlightVisible = useCallback((highlightId)=>(visible)=>{
+            visible ? setVisibleHighlights((_visibleHighlights)=>[
+                    ..._visibleHighlights,
+                    highlightId
+                ]) : setVisibleHighlights((_visibleHighlights)=>_visibleHighlights.filter((_highlightId)=>_highlightId !== highlightId));
+        }, []);
+    const [visibleMarkers, setVisibleMarkers] = useState([]);
+    const setMarkerVisible = useCallback((markerGroupId)=>(visible)=>{
+            visible ? setVisibleMarkers((_visibleMarkers)=>[
+                    ..._visibleMarkers,
+                    markerGroupId
+                ]) : setVisibleMarkers((_visibleMarkers)=>_visibleMarkers.filter((_markerGroupId)=>_markerGroupId !== markerGroupId));
+        }, []);
+    const [selectedLayer, setSelectedLayer] = useState(initialSelectedLayerId);
+    const legends = useMemo(()=>features?.map((feature)=>{
+            const baseLegendGroup = {
+                disabled: feature.sectionDisabled,
+                title: feature.sectionTitle,
+                tooltip: feature.sectionTooltip
+            };
+            switch(feature.type){
+                case 'highlight':
+                    return {
+                        ...baseLegendGroup,
+                        items: feature.legendItems,
+                        type: 'highlight',
+                        visible: visibleHighlights.findIndex((highlightId)=>highlightId === feature.highlight.highlightId) >= 0,
+                        setVisible: setHighlightVisible(feature.highlight.highlightId)
+                    };
+                case 'layer':
+                    return {
+                        ...baseLegendGroup,
+                        items: feature.layers.map((layer)=>({
+                                disabled: layer.disabled,
+                                id: layer.layerId,
+                                label: layer.label,
+                                style: layer.style
+                            })),
+                        selectedLayer,
+                        setSelectedLayer,
+                        type: 'layer'
+                    };
+                case 'marker':
+                    return {
+                        ...baseLegendGroup,
+                        items: feature.groups.map((group)=>({
+                                disabled: group.disabled,
+                                id: group.markerGroupId,
+                                label: group.label,
+                                style: group.style,
+                                setVisible: setMarkerVisible(group.markerGroupId),
+                                visible: visibleMarkers.findIndex((markerId)=>markerId === group.markerGroupId) >= 0
+                            })),
+                        type: 'marker'
+                    };
+            }
+        }), [
+        features,
+        selectedLayer,
+        visibleHighlights,
+        visibleMarkers
+    ]);
+    const layers = useMemo(()=>features?.filter((feature)=>'layer' === feature.type)?.flatMap((feature)=>feature.layers)?.filter((layer)=>layer.layerId === selectedLayer), [
+        features,
+        selectedLayer
+    ]);
+    const highlightGroups = useMemo(()=>features?.filter((feature)=>'highlight' === feature.type)?.map((feature)=>feature.highlight)?.filter((highlight)=>visibleHighlights.findIndex((_highlightId)=>_highlightId === highlight.highlightId) >= 0), [
+        features,
+        visibleHighlights
+    ]);
+    const markerGroups = useMemo(()=>features?.filter((feature)=>'marker' === feature.type)?.flatMap((feature)=>feature.groups).filter((group)=>visibleMarkers.findIndex((_markerId)=>_markerId === group.markerGroupId) >= 0), [
+        features,
+        visibleMarkers
+    ]);
+    const mapViewState = useMemo(()=>{
+        if (initialViewState) return initialViewState;
+        else if (features) {
+            const coordinates = features.filter((feature)=>'layer' === feature.type).flatMap((feature)=>feature.layers).flatMap((layer)=>layer.features).map((geoFeature)=>geoFeature.geometry.coordinates).flat().flat().flat();
+            if (coordinates.length > 0) {
+                let minLat = 1 / 0;
+                let maxLat = -1 / 0;
+                let minLng = 1 / 0;
+                let maxLng = -1 / 0;
+                for (const [lng, lat] of coordinates){
+                    minLat = Math.min(minLat, lat);
+                    maxLat = Math.max(maxLat, lat);
+                    minLng = Math.min(minLng, lng);
+                    maxLng = Math.max(maxLng, lng);
+                }
+                const centerLng = (minLng + maxLng) / 2;
+                const centerLat = (minLat + maxLat) / 2;
+                return {
+                    latitude: centerLat,
+                    longitude: centerLng,
+                    zoom: 12
+                };
+            }
         }
-        const centerLng = (minLng + maxLng) / 2;
-        const centerLat = (minLat + maxLat) / 2;
-        return {
-          latitude: centerLat,
-          longitude: centerLng,
-          zoom: 12
-        };
-      }
-    }
-  }, [initialViewState]);
-  const mapImageUrls = useMemo(() => {
-    const layerFeatures = features?.filter(feature => feature.type === 'layer') ?? [];
-    const highlightFeatures = features?.filter(feature => feature.type === 'highlight') ?? [];
-    const layerImageUrls = layerFeatures.flatMap(feature => feature.layers).map(layer => layer.style.fillPatternUrl).filter(url => url !== undefined);
-    const highlightImageUrls = highlightFeatures.flatMap(feature => feature.highlight.highlights).map(highlight => highlight.style.fillPatternUrl).filter(url => url !== undefined);
-    const imageUrls = new Set(layerImageUrls);
-    highlightImageUrls.forEach(url => imageUrls.add(url));
-    return Array.from(imageUrls);
-  }, [features]);
-  return /*#__PURE__*/jsx(MapContainer, {
-    containerId: mapContainerId ?? 'map-container',
-    map: /*#__PURE__*/jsx(MapBox, {
-      clusterRadius: clusterRadius,
-      containerId: mapContainerId ?? 'map-container',
-      controlBottomLeft: controlBottomLeft,
-      controlTopRight: controlTopRight,
-      cursorInteract: cursorInteract,
-      cursorMap: cursorMap,
-      disableDoubleClickZoom: disableDoubleClickZoom,
-      disableZoom: disableZoom,
-      drawerOpen: drawerOpen,
-      hideFullScreenControl: hideFullScreenControl,
-      hideMapViewStyleControl: hideMapViewStyleControl,
-      hideZoomControl: hideZoomControl,
-      highlightGroups: highlightGroups,
-      initialViewState: mapViewState,
-      layers: layers,
-      mapId: mapId ?? 'mapId',
-      mapImageUrls: mapImageUrls,
-      mapViewStyle: mapViewStyle,
-      markerGroups: markerGroups,
-      onClickCanvas: onClickCanvas,
-      setMapViewStyle: setMapViewStyle,
-      token: token
-    }),
-    drawer: /*#__PURE__*/jsx(MapDrawer, {
-      open: drawerOpen ?? false,
-      onClose: () => setDrawerOpen?.(false),
-      size: drawerSize ?? 'small',
-      title: drawerTitle ?? '',
-      children: drawerChildren
-    }),
-    drawerOpen: drawerOpen,
-    legend: !hideLegend && legends && /*#__PURE__*/jsx(MapLegend, {
-      legends: legends
-    })
-  });
+    }, [
+        initialViewState
+    ]);
+    const mapImageUrls = useMemo(()=>{
+        const layerFeatures = features?.filter((feature)=>'layer' === feature.type) ?? [];
+        const highlightFeatures = features?.filter((feature)=>'highlight' === feature.type) ?? [];
+        const layerImageUrls = layerFeatures.flatMap((feature)=>feature.layers).map((layer)=>layer.style.fillPatternUrl).filter((url)=>void 0 !== url);
+        const highlightImageUrls = highlightFeatures.flatMap((feature)=>feature.highlight.highlights).map((highlight)=>highlight.style.fillPatternUrl).filter((url)=>void 0 !== url);
+        const imageUrls = new Set(layerImageUrls);
+        highlightImageUrls.forEach((url)=>imageUrls.add(url));
+        return Array.from(imageUrls);
+    }, [
+        features
+    ]);
+    return /*#__PURE__*/ jsx(MapContainer, {
+        containerId: mapContainerId ?? 'map-container',
+        map: /*#__PURE__*/ jsx(MapBox, {
+            clusterRadius: clusterRadius,
+            containerId: mapContainerId ?? 'map-container',
+            controlBottomLeft: controlBottomLeft,
+            controlTopRight: controlTopRight,
+            cursorInteract: cursorInteract,
+            cursorMap: cursorMap,
+            disableDoubleClickZoom: disableDoubleClickZoom,
+            disableZoom: disableZoom,
+            drawerOpen: drawerOpen,
+            hideFullScreenControl: hideFullScreenControl,
+            hideMapViewStyleControl: hideMapViewStyleControl,
+            hideZoomControl: hideZoomControl,
+            highlightGroups: highlightGroups,
+            initialViewState: mapViewState,
+            layers: layers,
+            mapId: mapId ?? 'mapId',
+            mapImageUrls: mapImageUrls,
+            mapViewStyle: mapViewStyle,
+            markerGroups: markerGroups,
+            onClickCanvas: onClickCanvas,
+            setMapViewStyle: setMapViewStyle,
+            token: token
+        }),
+        drawer: /*#__PURE__*/ jsx(MapDrawer, {
+            open: drawerOpen ?? false,
+            onClose: ()=>setDrawerOpen?.(false),
+            size: drawerSize ?? 'small',
+            title: drawerTitle ?? '',
+            children: drawerChildren
+        }),
+        drawerOpen: drawerOpen,
+        legend: !hideLegend && legends && /*#__PURE__*/ jsx(MapLegend, {
+            legends: legends
+        })
+    });
 };
-
-export { MapComponent as default };
+const Map = MapComponent;
+export default Map;

package/components/Map/types.js

@@ -1,20 +1,15 @@
-/**
- * Properties class for GeoJson, with a few reserved object defined.
- */
-
-// Each layer item will become a feature, with a property of id.
-
-// Each layer will become a set of features that have the same type.
-
-// Additional shading/annotations for map entities
-
-const MapViewStyles = ['Outdoors', 'Satellite', 'Light', 'Dark', 'Streets'];
+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'
+    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,28 +1,18 @@
-import { useEffect } from 'react';
-
-/**
- * Ensures that all given layers maintain strict order in the Mapbox layer stack.
- */
-const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
-  useEffect(() => {
-    const map = mapRef.current;
-    if (!map) {
-      return;
-    }
-
-    // Only move layers that exist
-    const existingLayerIds = orderedLayerIds.filter(id => map.getLayer(id));
-
-    // Reverse iterate so first in array ends up lowest
-    for (let i = existingLayerIds.length - 1; i >= 0; i--) {
-      const layerId = existingLayerIds[i];
-      try {
-        map.moveLayer(layerId, i < existingLayerIds.length - 1 ? existingLayerIds[i + 1] : undefined);
-      } catch (e) {
-        // moveLayer will throw if layer doesn't exist in current style
-      }
-    }
-  }, [mapRef, orderedLayerIds]);
+import { useEffect } from "react";
+const useMaintainLayerOrder = (mapRef, orderedLayerIds)=>{
+    useEffect(()=>{
+        const map = mapRef.current;
+        if (!map) return;
+        const existingLayerIds = orderedLayerIds.filter((id)=>map.getLayer(id));
+        for(let i = existingLayerIds.length - 1; i >= 0; i--){
+            const layerId = existingLayerIds[i];
+            try {
+                map.moveLayer(layerId, i < existingLayerIds.length - 1 ? existingLayerIds[i + 1] : void 0);
+            } catch (e) {}
+        }
+    }, [
+        mapRef,
+        orderedLayerIds
+    ]);
 };
-
 export { useMaintainLayerOrder };

package/components/Markdown/index.js

@@ -1,27 +1,26 @@
-import { useState, useCallback, useEffect } from 'react';
-import { marked } from 'marked';
-import './styles.scss';
-import { jsx } from 'react/jsx-runtime';
-
-const Markdown = ({
-  value,
-  style
-}) => {
-  const [html, setHtml] = useState();
-  const parseValue = useCallback(async _value => {
-    const _html = await marked.parse(_value);
-    setHtml(_html);
-  }, []);
-  useEffect(() => {
-    void parseValue(value);
-  }, [parseValue, value]);
-  return /*#__PURE__*/jsx("div", {
-    className: "markdown",
-    style: style,
-    dangerouslySetInnerHTML: {
-      __html: html ?? ''
-    }
-  });
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { marked } from "marked";
+import "./styles.scss";
+const Markdown = ({ value, style })=>{
+    const [html, setHtml] = useState();
+    const parseValue = useCallback(async (_value)=>{
+        const _html = await marked.parse(_value);
+        setHtml(_html);
+    }, []);
+    useEffect(()=>{
+        parseValue(value);
+    }, [
+        parseValue,
+        value
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "markdown",
+        style: style,
+        dangerouslySetInnerHTML: {
+            __html: html ?? ''
+        }
+    });
 };
-
-export { Markdown as default };
+const components_Markdown = Markdown;
+export default components_Markdown;