@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/components/Map/MapBox.js

@@ -0,0 +1,479 @@
+"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");
+const MapBox = props => {
+  const {
+    clusterRadius,
+    containerId,
+    controlBottomLeft,
+    controlTopRight,
+    cursorInteract,
+    cursorMap,
+    disableDoubleClickZoom,
+    disableZoom,
+    drawerOpen,
+    layers: featureGroups,
+    hideFullScreenControl,
+    hideMapViewStyleControl,
+    hideZoomControl,
+    highlightGroups,
+    initialViewState,
+    mapId,
+    mapImageUrls,
+    mapViewStyle,
+    markerGroups,
+    onClickCanvas,
+    setMapViewStyle,
+    token
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const mapRef = (0, _react.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 => {
+      if (!map.hasImage(url)) {
+        map.loadImage(url, (error, image) => {
+          if (image) {
+            map.addImage(url, image, {
+              sdf: true
+            });
+          }
+        });
+      }
+    });
+  }, [mapImageUrls]);
+  const mapRefCallback = (0, _react.useCallback)(map => {
+    if (map !== null) {
+      mapRef.current = map;
+      setZoom(map.getZoom());
+      loadImages(map);
+    }
+  }, []);
+  const onMove = (0, _react.useCallback)(view => {
+    setZoom(view.viewState.zoom);
+  }, []);
+  const clusterMarkers = (0, _react.useCallback)((map, markers) => {
+    if (!map || map.getZoom() > 15) {
+      // Too zoomed in. Return all marker as is
+      return markers.map(marker => [marker]);
+    }
+    const visited = new Set();
+    const markerPixels = {};
+    markers.forEach(marker => {
+      markerPixels[marker.id] = map.project({
+        lat: marker.latitude,
+        lon: marker.longitude
+      });
+    });
+    const clusters = [];
+    markers.forEach((marker, idx) => {
+      if (!visited.has(marker.id)) {
+        const cluster = [marker];
+        markers.slice(idx + 1).forEach(otherMarker => {
+          if (!visited.has(otherMarker.id)) {
+            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)) {
+              cluster.push(otherMarker);
+              visited.add(otherMarker.id);
+            }
+          }
+        });
+        clusters.push(cluster);
+      }
+    });
+    return clusters;
+  }, [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);
+  }, [featureGroups]);
+  const geojson = (0, _react.useMemo)(() => {
+    const features = featureGroups === null || featureGroups === void 0 ? void 0 : 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),
+          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
+        };
+        return {
+          type: 'Feature',
+          geometry: feature.geometry,
+          properties
+        };
+      });
+    });
+    return features ? {
+      type: 'FeatureCollection',
+      features
+    } : undefined;
+  }, [featureGroups]);
+  const {
+    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"),
+        source: 'mapData',
+        type: "line",
+        paint: {
+          'line-color': group.style.borderColor,
+          'line-width': 2
+        },
+        filter: ['==', ['get', 'layerId'], group.layerId]
+      });
+    });
+    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 selectedOpacity = opacity * 2;
+      const hoverOpacity = opacity * 1.5;
+      const hoverAndSelectedOpacity = opacity * 2.5;
+      const groupFilter = ['==', ['get', 'layerId'], group.layerId];
+      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 _textLayers = featureGroups === null || featureGroups === void 0 ? void 0 : 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"),
+        source: 'mapData',
+        type: 'symbol',
+        layout: {
+          'text-field': ['get', 'label'],
+          'text-size': 14,
+          'text-line-height': 20,
+          'text-font': ['Open Sans Bold', 'Arial Unicode MS Regular'],
+          'text-anchor': 'center',
+          'text-justify': 'center'
+        },
+        paint: {
+          'text-color': '#ffffff'
+        },
+        filter: ['all', groupFilter, labelFilter]
+      });
+    });
+    return {
+      borderLayers: _borderLayers !== null && _borderLayers !== void 0 ? _borderLayers : [],
+      fillLayers: _fillLayers !== null && _fillLayers !== void 0 ? _fillLayers : [],
+      textLayers: _textLayers !== null && _textLayers !== void 0 ? _textLayers : []
+    };
+  }, [featureGroups, hoverFeatureId]);
+  const highlightLayers = (0, _react.useMemo)(() => {
+    var _highlightGroups$flat;
+    return (_highlightGroups$flat = highlightGroups === null || highlightGroups === void 0 ? void 0 : 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),
+          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-color': highlight.style.fillColor,
+            'fill-opacity': (_highlight$style$opac2 = highlight.style.opacity) !== null && _highlight$style$opac2 !== void 0 ? _highlight$style$opac2 : 0.5
+          },
+          filter: ['all', ['has', 'layerFeatureId'], ['match', ['get', 'layerFeatureId'], highlightFeatureIds, true, false]]
+        });
+      });
+    })) !== null && _highlightGroups$flat !== void 0 ? _highlightGroups$flat : [];
+  }, [highlightGroups]);
+  const markersComponents = (0, _react.useMemo)(() => {
+    return markerGroups === null || markerGroups === void 0 ? void 0 : 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, {
+            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);
+              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'
+          }));
+        } 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, {
+            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({
+                center: {
+                  lat: latAvg,
+                  lon: lngAvg
+                },
+                zoom: (zoom !== null && zoom !== void 0 ? 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'
+          }));
+        }
+      });
+    });
+  }, [markerGroups, theme, zoom]);
+  const onMouseMove = (0, _react.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) {
+        const topPriorityFeature = properties.reduce((top, current) => {
+          return current.priority > top.priority ? current : top;
+        }, properties[0]);
+        setHoverFeatureId(topPriorityFeature.id);
+        return;
+      }
+    }
+    setHoverFeatureId(undefined);
+  }, []);
+  (0, _react.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();
+    });
+    observer.observe(mapRef.current.getContainer());
+    return () => observer.disconnect();
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!mapRef.current) {
+      return;
+    }
+    mapRef.current.resize();
+  }, [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'), []);
+
+  // 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'), []);
+
+  // 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 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) => {
+          return current.priority > top.priority ? current : top;
+        }, properties[0]);
+        const clickedItem = featureGroups.flatMap(group => group.features).find(feature => feature.featureId === topPriorityFeature.id);
+        if (clickedItem && clickedItem.onClick) {
+          clickedItem.onClick();
+          return;
+        }
+      }
+      // If feature not clickable or not handled, fall through to canvas
+    }
+    if (onClickCanvas !== undefined) {
+      onClickCanvas(event);
+    }
+  }, [featureGroups, onClickCanvas]);
+  const orderedLayerIds = (0, _react.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,
+    attributionControl: false,
+    cursor: cursor,
+    doubleClickZoom: !disableZoom && !disableDoubleClickZoom,
+    interactiveLayerIds: interactiveLayerIds,
+    initialViewState: initialViewState,
+    mapboxAccessToken: token,
+    mapStyle: _types.stylesUrl[mapViewStyle],
+    ref: mapRefCallback,
+    scrollZoom: !disableZoom,
+    style: {
+      width: 'auto',
+      height: isDesktop ? 'auto' : '80vh',
+      flexGrow: isDesktop ? 1 : undefined
+    },
+    onClick: onMapClick,
+    onMove: onMove,
+    onMouseEnter: onMouseEnter,
+    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);
+};
+var _default = exports.default = MapBox;

package/components/Map/MapContainer.js

@@ -0,0 +1,30 @@
+"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");
+const MapContainer = props => {
+  const {
+    containerId,
+    drawer,
+    drawerOpen,
+    legend,
+    map
+  } = props;
+  const {
+    isDesktop
+  } = (0, _utils.useDeviceInfo)();
+  const drawerOnly = (0, _react.useMemo)(() => !isDesktop && drawerOpen, [drawerOpen, isDesktop]);
+  return /*#__PURE__*/_react.default.createElement("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);
+};
+var _default = exports.default = MapContainer;

package/components/Map/MapDateSliderControl.js

@@ -0,0 +1,66 @@
+"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 _material = require("@mui/material");
+var _luxon = require("luxon");
+var _date = require("../../utils/date");
+var _Slider = _interopRequireDefault(require("../Slider"));
+const MapDateSliderControl = _ref => {
+  let {
+    dates,
+    selectedDate,
+    onChange
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const earliestDate = (0, _react.useMemo)(() => {
+    return dates.reduce((earliest, current) => {
+      return current < earliest ? current : earliest;
+    });
+  }, [dates]);
+  const latestDate = (0, _react.useMemo)(() => {
+    return dates.reduce((latest, current) => {
+      return current > latest ? current : latest;
+    });
+  }, [dates]);
+  const marks = (0, _react.useMemo)(() => {
+    return dates.map(date => ({
+      value: date.valueOf()
+    }));
+  }, [dates]);
+  const getDateString = date => (0, _date.getShortDate)(date);
+  const getDateLabel = date => /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    fontSize: "12px"
+  }, getDateString(date));
+  return /*#__PURE__*/_react.default.createElement(_material.Card, {
+    style: {
+      border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary),
+      borderRadius: '8px',
+      display: 'flex',
+      flexDirection: 'column',
+      padding: theme.spacing(2),
+      maxWidth: '270px',
+      width: dates.length > 1 ? '270px' : undefined
+    }
+  }, selectedDate && /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    fontSize: "14px",
+    fontWeight: 600,
+    textAlign: "right"
+  }, getDateString(selectedDate)), dates.length > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Slider.default, {
+    value: selectedDate.valueOf(),
+    min: earliestDate.valueOf(),
+    max: latestDate.valueOf(),
+    marks: marks,
+    valueLabelDisplay: "off",
+    onChange: value => onChange(_luxon.DateTime.fromMillis(value))
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    justifyContent: "space-between"
+  }, getDateLabel(earliestDate), getDateLabel(latestDate))));
+};
+var _default = exports.default = MapDateSliderControl;

package/components/Map/MapDrawer.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+const MapDrawer = props => {
+  const {
+    children,
+    onClose,
+    open,
+    size,
+    style,
+    title
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const {
+    isDesktop
+  } = (0, _utils.useDeviceInfo)();
+  return open ? /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "map-drawer map-drawer".concat(isDesktop ? "--".concat(size) : '--mobile'),
+    borderLeft: isDesktop ? "1px solid ".concat(theme.palette.TwClrBrdrTertiary) : undefined,
+    borderRight: isDesktop ? "1px solid ".concat(theme.palette.TwClrBrdrTertiary) : undefined,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "map-drawer--header"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: onClose,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: "icon-close"
+  }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: 'map-drawer--body'
+  }, children)) : null;
+};
+var _default = exports.default = MapDrawer;