@terraware/web-components 4.2.12 → 4.2.14-rc.0

package/components/Map/MapDateSliderControl.js

@@ -1,66 +1,64 @@
-"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)(() => {
+import React, { useMemo } from 'react';
+import { Box, Card, Typography, useTheme } 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";
+const MapDateSliderControl = ({
+  dates,
+  selectedDate,
+  onChange
+}) => {
+  const theme = useTheme();
+  const earliestDate = useMemo(() => {
     return dates.reduce((earliest, current) => {
       return current < earliest ? current : earliest;
     });
   }, [dates]);
-  const latestDate = (0, _react.useMemo)(() => {
+  const latestDate = useMemo(() => {
     return dates.reduce((latest, current) => {
       return current > latest ? current : latest;
     });
   }, [dates]);
-  const marks = (0, _react.useMemo)(() => {
+  const marks = 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, {
+  const getDateString = date => getShortDate(date);
+  const getDateLabel = date => /*#__PURE__*/_jsx(Typography, {
+    fontSize: "12px",
+    children: getDateString(date)
+  });
+  return /*#__PURE__*/_jsxs(Card, {
     style: {
-      border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary),
+      border: `1px solid ${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))));
+    },
+    children: [selectedDate && /*#__PURE__*/_jsx(Typography, {
+      fontSize: "14px",
+      fontWeight: 600,
+      textAlign: "right",
+      children: getDateString(selectedDate)
+    }), 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, {
+        display: "flex",
+        justifyContent: "space-between",
+        children: [getDateLabel(earliestDate), getDateLabel(latestDate)]
+      })]
+    })]
+  });
 };
-var _default = exports.default = MapDateSliderControl;
+export default MapDateSliderControl;

package/components/Map/MapDrawer.js

@@ -1,15 +1,9 @@
-"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");
+import React from 'react';
+import { Box, IconButton, useTheme } from '@mui/material';
+import { useDeviceInfo } from '../../utils';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MapDrawer = props => {
   const {
     children,
@@ -19,27 +13,32 @@ const MapDrawer = props => {
     style,
     title
   } = props;
-  const theme = (0, _material.useTheme)();
+  const theme = 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;
+  } = useDeviceInfo();
+  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, {
+      className: "map-drawer--header",
+      children: [/*#__PURE__*/_jsx("p", {
+        className: "title",
+        children: title
+      }), /*#__PURE__*/_jsx(IconButton, {
+        onClick: onClose,
+        size: "small",
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "close",
+          className: "icon-close"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: 'map-drawer--body',
+      children: children
+    })]
+  }) : null;
 };
-var _default = exports.default = MapDrawer;
+export default MapDrawer;

package/components/Map/MapLegend.js

@@ -1,62 +1,55 @@
-"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 _AntSwitch = _interopRequireDefault(require("../AntSwitch"));
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-const MapLegend = _ref => {
-  let {
-    legends
-  } = _ref;
-  const theme = (0, _material.useTheme)();
+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";
+const MapLegend = ({
+  legends
+}) => {
+  const theme = useTheme();
   const {
     isMobile,
     isDesktop
-  } = (0, _utils.useDeviceInfo)();
+  } = useDeviceInfo();
   const legendComponents = legends.map((legend, index) => {
     const isFirst = index === 0;
     const isLast = index === legends.length - 1;
-    const switchComponent = legend.type === 'highlight' ? /*#__PURE__*/_react.default.createElement(_AntSwitch.default, {
+    const switchComponent = legend.type === 'highlight' ? /*#__PURE__*/_jsx(AntSwitch, {
       disabled: legend.disabled,
       checked: legend.visible,
       onChange: legend.setVisible
     }) : undefined;
-    const titleComponent = /*#__PURE__*/_react.default.createElement(_material.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)
-    }, legend.title, legend.tooltip && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-      title: legend.tooltip,
-      sx: {
-        display: 'inline-block',
-        verticalAlign: 'text-top',
-        marginLeft: theme.spacing(1)
-      }
-    }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-      display: "flex"
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      fillColor: theme.palette.TwClrIcnInfo,
-      name: "info",
-      size: "small"
-    }))));
+      paddingLeft: switchComponent ? theme.spacing(1) : theme.spacing(0),
+      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, {
+          display: "flex",
+          children: /*#__PURE__*/_jsx(Icon, {
+            fillColor: theme.palette.TwClrIcnInfo,
+            name: "info",
+            size: "small"
+          })
+        })
+      })]
+    });
     const itemComponents = legend.items.map((item, itemIndex) => {
-      const onClick = legend.disabled ? undefined : legend.type === 'layer' ? item.disabled ? undefined : () => legend.setSelectedLayer(item.id) : legend.type === 'marker' ? item.disabled ? undefined : () => {
-        var _setVisible, _ref2;
-        return (_setVisible = (_ref2 = item).setVisible) === null || _setVisible === void 0 ? void 0 : _setVisible.call(_ref2, !item.visible);
-      } : undefined;
+      const onClick = legend.disabled ? undefined : legend.type === 'layer' ? item.disabled ? undefined : () => legend.setSelectedLayer(item.id) : legend.type === 'marker' ? item.disabled ? undefined : () => item.setVisible?.(!item.visible) : undefined;
       const disabled = legend.disabled || (legend.type === 'layer' ? item.disabled : legend.type === 'marker' ? item.disabled : false) || false;
       const selected = legend.type === 'layer' ? item.id === legend.selectedLayer : legend.type === 'marker' ? item.visible : false;
       const logoComponent = () => {
         if (item.style.type === 'icon') {
-          return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          return /*#__PURE__*/_jsx(Icon, {
             name: item.style.iconName,
             fillColor: item.style.iconColor,
             style: {
@@ -65,59 +58,61 @@ const MapLegend = _ref => {
             size: 'small'
           });
         } else {
-          var _item$style$borderCol, _item$style$opacity;
-          return /*#__PURE__*/_react.default.createElement(_material.Box, {
+          return /*#__PURE__*/_jsx(Box, {
             display: 'flex',
             sx: {
-              border: "2px solid ".concat((_item$style$borderCol = item.style.borderColor) !== null && _item$style$borderCol !== void 0 ? _item$style$borderCol : theme.palette.TwClrBaseGreen300),
+              border: `2px solid ${item.style.borderColor ?? theme.palette.TwClrBaseGreen300}`,
               opacity: disabled ? 0.7 : 1.0,
               height: '16px',
               width: '24px',
               minWidth: '24px',
               marginRight: theme.spacing(1)
-            }
-          }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-            height: '16px',
-            width: '24px',
-            sx: {
-              backgroundColor: item.style.fillColor,
-              backgroundImage: item.style.fillPatternUrl ? "url('".concat(item.style.fillPatternUrl, "')") : undefined,
-              backgroundRepeat: 'repeat',
-              opacity: (_item$style$opacity = item.style.opacity) !== null && _item$style$opacity !== void 0 ? _item$style$opacity : 0.2
-            }
-          }));
+            },
+            children: /*#__PURE__*/_jsx(Box, {
+              height: '16px',
+              width: '24px',
+              sx: {
+                backgroundColor: item.style.fillColor,
+                backgroundImage: item.style.fillPatternUrl ? `url('${item.style.fillPatternUrl}')` : undefined,
+                backgroundRepeat: 'repeat',
+                opacity: item.style.opacity ?? 0.2
+              }
+            })
+          });
         }
       };
       const visibleComponent = () => {
         switch (legend.type) {
           case 'marker':
             const featureItem = item;
-            const visibleIcon = featureItem.visible ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            const visibleIcon = featureItem.visible ? /*#__PURE__*/_jsx(Icon, {
               name: "iconEye"
-            }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            }) : /*#__PURE__*/_jsx(Icon, {
               name: "iconEyeOff"
             });
-            return /*#__PURE__*/_react.default.createElement(_material.Box, {
-              display: "flex"
-            }, visibleIcon);
+            return /*#__PURE__*/_jsx(Box, {
+              display: "flex",
+              children: visibleIcon
+            });
           case 'layer':
             const layerItem = item;
-            return /*#__PURE__*/_react.default.createElement(_material.Box, {
+            return /*#__PURE__*/_jsx(Box, {
               display: "flex",
               sx: {
                 visibility: layerItem.id === legend.selectedLayer ? 'visible' : 'hidden'
-              }
-            }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-              name: "checkmark",
-              style: {
-                marginRight: theme.spacing(1)
-              }
-            }));
+              },
+              children: /*#__PURE__*/_jsx(Icon, {
+                name: "checkmark",
+                style: {
+                  marginRight: theme.spacing(1)
+                }
+              })
+            });
           case 'highlight':
             return undefined;
         }
       };
-      return /*#__PURE__*/_react.default.createElement(_material.Box, {
+      return /*#__PURE__*/_jsxs(Box, {
         onClick: onClick,
         display: "flex",
         alignItems: "center",
@@ -129,35 +124,40 @@ const MapLegend = _ref => {
           opacity: disabled ? '0.5' : 1
         },
         justifyContent: 'space-between',
-        key: "".concat(index, "-").concat(itemIndex)
-      }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        paddingRight: theme.spacing(1)
-      }, logoComponent(), /*#__PURE__*/_react.default.createElement(_material.Typography, {
-        fontSize: "14px",
-        fontWeight: 400
-      }, item.label)), /*#__PURE__*/_react.default.createElement(_material.Box, {
-        display: "flex"
-      }, visibleComponent()));
+        children: [/*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          paddingRight: theme.spacing(1),
+          children: [logoComponent(), /*#__PURE__*/_jsx(Typography, {
+            fontSize: "14px",
+            fontWeight: 400,
+            children: item.label
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          display: "flex",
+          children: visibleComponent()
+        })]
+      }, `${index}-${itemIndex}`);
     });
-    return /*#__PURE__*/_react.default.createElement(_material.Box, {
-      key: legend.title,
+    return /*#__PURE__*/_jsx(Box, {
       sx: {
         opacity: legend.disabled ? 0.7 : 1
       },
-      borderBottom: isLast ? 'none' : "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
-    }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-      paddingBottom: 2,
-      paddingTop: isFirst ? 0 : 2,
-      flexDirection: 'column'
-    }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-      display: "flex",
-      alignItems: 'center',
-      paddingLeft: theme.spacing(1)
-    }, switchComponent, titleComponent), itemComponents));
+      borderBottom: isLast ? 'none' : `1px solid ${theme.palette.TwClrBrdrTertiary}`,
+      children: /*#__PURE__*/_jsxs(Box, {
+        paddingBottom: 2,
+        paddingTop: isFirst ? 0 : 2,
+        flexDirection: 'column',
+        children: [/*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: 'center',
+          paddingLeft: theme.spacing(1),
+          children: [switchComponent, titleComponent]
+        }), itemComponents]
+      })
+    }, legend.title);
   });
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_jsx(Box, {
     bgcolor: theme.palette.TwClrBaseWhite,
     display: "flex",
     justifyItems: "flex-start",
@@ -167,7 +167,8 @@ const MapLegend = _ref => {
     minWidth: isDesktop ? '160px' : undefined,
     width: isDesktop ? 'auto' : 'stretch',
     margin: 0,
-    overflow: 'scroll'
-  }, legendComponents);
+    overflow: 'scroll',
+    children: legendComponents
+  });
 };
-var _default = exports.default = MapLegend;
+export default MapLegend;

package/components/Map/MapViewStyleControl.js

@@ -1,49 +1,37 @@
-"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 _PopoverMenu = _interopRequireDefault(require("../PopoverMenu"));
-var _types = require("./types");
-const MapViewStyleControl = _ref => {
-  var _mapViewStyleNames2;
-  let {
-    containerId,
-    mapViewStyle,
-    mapViewStyleNames,
-    setMapViewStyle
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  const viewOptions = (0, _react.useMemo)(() => {
-    return _types.MapViewStyles.map(style => {
-      var _mapViewStyleNames;
-      return {
-        label: (_mapViewStyleNames = mapViewStyleNames === null || mapViewStyleNames === void 0 ? void 0 : mapViewStyleNames(style)) !== null && _mapViewStyleNames !== void 0 ? _mapViewStyleNames : style,
-        value: style
-      };
-    });
+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";
+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 = (0, _react.useCallback)(item => {
+  const onSelectMapViewStyle = useCallback(item => {
     setMapViewStyle(item.value);
   }, []);
-  const container = (0, _react.useMemo)(() => {
+  const container = useMemo(() => {
     if (containerId) {
       return document.getElementById(containerId);
     }
   }, [containerId]);
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_jsx(Box, {
     sx: {
       position: 'absolute',
       top: '10px',
       left: '45px',
       zIndex: 10,
       height: 28,
-      backgroundColor: "".concat(theme.palette.TwClrBaseWhite),
+      backgroundColor: `${theme.palette.TwClrBaseWhite}`,
       borderRadius: '4px',
       display: 'flex',
       alignItems: 'center',
@@ -56,19 +44,21 @@ const MapViewStyleControl = _ref => {
       '& svg': {
         marginLeft: 0
       }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_PopoverMenu.default, {
-    anchor: /*#__PURE__*/_react.default.createElement(_material.Box, {
-      component: "span",
-      sx: {
-        fontSize: '12px',
-        paddingLeft: theme.spacing(0.5),
-        color: theme.palette.TwClrTxt
-      }
-    }, (_mapViewStyleNames2 = mapViewStyleNames === null || mapViewStyleNames === void 0 ? void 0 : mapViewStyleNames(mapViewStyle)) !== null && _mapViewStyleNames2 !== void 0 ? _mapViewStyleNames2 : 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
+    })
+  });
 };
-var _default = exports.default = MapViewStyleControl;
+export default MapViewStyleControl;

package/components/Map/ReactMapboxWrapper.js

@@ -1,9 +1,2 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _mapbox = _interopRequireDefault(require("react-map-gl/mapbox"));
-var _default = exports.default = _mapbox.default;
+import ReactMapbox from 'react-map-gl/mapbox';
+export default ReactMapbox;