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

package/components/Map/index.js

@@ -1,17 +1,9 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _MapBox = _interopRequireDefault(require("./MapBox"));
-var _MapContainer = _interopRequireDefault(require("./MapContainer"));
-var _MapDrawer = _interopRequireDefault(require("./MapDrawer"));
-var _MapLegend = _interopRequireDefault(require("./MapLegend"));
+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";
 const MapComponent = props => {
   const {
     clusterRadius,
@@ -39,26 +31,26 @@ const MapComponent = props => {
     setDrawerOpen,
     token
   } = props;
-  const [mapViewStyle, setMapViewStyle] = (0, _react.useState)(initialMapViewStyle !== null && initialMapViewStyle !== void 0 ? initialMapViewStyle : 'Streets');
-  const [visibleHighlights, setVisibleHighlights] = (0, _react.useState)([]);
-  const setHighlightVisible = (0, _react.useCallback)(highlightId => visible => {
+  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] = (0, _react.useState)([]);
-  const setMarkerVisible = (0, _react.useCallback)(markerGroupId => visible => {
+  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] = (0, _react.useState)(initialSelectedLayerId);
-  const legends = (0, _react.useMemo)(() => {
-    return features === null || features === void 0 ? void 0 : features.map(feature => {
+  const [selectedLayer, setSelectedLayer] = useState(initialSelectedLayerId);
+  const legends = useMemo(() => {
+    return features?.map(feature => {
       const baseLegendGroup = {
         disabled: feature.sectionDisabled,
         title: feature.sectionTitle,
@@ -66,14 +58,16 @@ const MapComponent = props => {
       };
       switch (feature.type) {
         case 'highlight':
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseLegendGroup), {}, {
+          return {
+            ...baseLegendGroup,
             items: feature.legendItems,
             type: 'highlight',
             visible: visibleHighlights.findIndex(highlightId => highlightId === feature.highlight.highlightId) >= 0,
             setVisible: setHighlightVisible(feature.highlight.highlightId)
-          });
+          };
         case 'layer':
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseLegendGroup), {}, {
+          return {
+            ...baseLegendGroup,
             items: feature.layers.map(layer => ({
               disabled: layer.disabled,
               id: layer.layerId,
@@ -83,9 +77,10 @@ const MapComponent = props => {
             selectedLayer,
             setSelectedLayer,
             type: 'layer'
-          });
+          };
         case 'marker':
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseLegendGroup), {}, {
+          return {
+            ...baseLegendGroup,
             items: feature.groups.map(group => ({
               disabled: group.disabled,
               id: group.markerGroupId,
@@ -95,23 +90,20 @@ const MapComponent = props => {
               visible: visibleMarkers.findIndex(markerId => markerId === group.markerGroupId) >= 0
             })),
             type: 'marker'
-          });
+          };
       }
     });
   }, [features, selectedLayer, visibleHighlights, visibleMarkers]);
-  const layers = (0, _react.useMemo)(() => {
-    var _features$filter, _features$filter$flat;
-    return features === null || features === void 0 ? void 0 : (_features$filter = features.filter(feature => feature.type === 'layer')) === null || _features$filter === void 0 ? void 0 : (_features$filter$flat = _features$filter.flatMap(feature => feature.layers)) === null || _features$filter$flat === void 0 ? void 0 : _features$filter$flat.filter(layer => layer.layerId === selectedLayer);
+  const layers = useMemo(() => {
+    return features?.filter(feature => feature.type === 'layer')?.flatMap(feature => feature.layers)?.filter(layer => layer.layerId === selectedLayer);
   }, [features, selectedLayer]);
-  const highlightGroups = (0, _react.useMemo)(() => {
-    var _features$filter2, _features$filter2$map;
-    return features === null || features === void 0 ? void 0 : (_features$filter2 = features.filter(feature => feature.type === 'highlight')) === null || _features$filter2 === void 0 ? void 0 : (_features$filter2$map = _features$filter2.map(feature => feature.highlight)) === null || _features$filter2$map === void 0 ? void 0 : _features$filter2$map.filter(highlight => visibleHighlights.findIndex(_highlightId => _highlightId === highlight.highlightId) >= 0);
+  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 = (0, _react.useMemo)(() => {
-    var _features$filter3;
-    return features === null || features === void 0 ? void 0 : (_features$filter3 = features.filter(feature => feature.type === 'marker')) === null || _features$filter3 === void 0 ? void 0 : _features$filter3.flatMap(feature => feature.groups).filter(group => visibleMarkers.findIndex(_markerId => _markerId === group.markerGroupId) >= 0);
+  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 = (0, _react.useMemo)(() => {
+  const mapViewState = useMemo(() => {
     if (initialViewState) {
       return initialViewState;
     } else if (features) {
@@ -137,21 +129,20 @@ const MapComponent = props => {
       }
     }
   }, [initialViewState]);
-  const mapImageUrls = (0, _react.useMemo)(() => {
-    var _features$filter4, _features$filter5;
-    const layerFeatures = (_features$filter4 = features === null || features === void 0 ? void 0 : features.filter(feature => feature.type === 'layer')) !== null && _features$filter4 !== void 0 ? _features$filter4 : [];
-    const highlightFeatures = (_features$filter5 = features === null || features === void 0 ? void 0 : features.filter(feature => feature.type === 'highlight')) !== null && _features$filter5 !== void 0 ? _features$filter5 : [];
+  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__*/_react.default.createElement(_MapContainer.default, {
-    containerId: mapContainerId !== null && mapContainerId !== void 0 ? mapContainerId : 'map-container',
-    map: /*#__PURE__*/_react.default.createElement(_MapBox.default, {
+  return /*#__PURE__*/_jsx(MapContainer, {
+    containerId: mapContainerId ?? 'map-container',
+    map: /*#__PURE__*/_jsx(MapBox, {
       clusterRadius: clusterRadius,
-      containerId: mapContainerId !== null && mapContainerId !== void 0 ? mapContainerId : 'map-container',
+      containerId: mapContainerId ?? 'map-container',
       controlBottomLeft: controlBottomLeft,
       controlTopRight: controlTopRight,
       cursorInteract: cursorInteract,
@@ -165,7 +156,7 @@ const MapComponent = props => {
       highlightGroups: highlightGroups,
       initialViewState: mapViewState,
       layers: layers,
-      mapId: mapId !== null && mapId !== void 0 ? mapId : 'mapId',
+      mapId: mapId ?? 'mapId',
       mapImageUrls: mapImageUrls,
       mapViewStyle: mapViewStyle,
       markerGroups: markerGroups,
@@ -173,16 +164,17 @@ const MapComponent = props => {
       setMapViewStyle: setMapViewStyle,
       token: token
     }),
-    drawer: /*#__PURE__*/_react.default.createElement(_MapDrawer.default, {
-      open: drawerOpen !== null && drawerOpen !== void 0 ? drawerOpen : false,
-      onClose: () => setDrawerOpen === null || setDrawerOpen === void 0 ? void 0 : setDrawerOpen(false),
-      size: drawerSize !== null && drawerSize !== void 0 ? drawerSize : 'small',
-      title: drawerTitle !== null && drawerTitle !== void 0 ? drawerTitle : ''
-    }, drawerChildren),
+    drawer: /*#__PURE__*/_jsx(MapDrawer, {
+      open: drawerOpen ?? false,
+      onClose: () => setDrawerOpen?.(false),
+      size: drawerSize ?? 'small',
+      title: drawerTitle ?? '',
+      children: drawerChildren
+    }),
     drawerOpen: drawerOpen,
-    legend: !hideLegend && legends && /*#__PURE__*/_react.default.createElement(_MapLegend.default, {
+    legend: !hideLegend && legends && /*#__PURE__*/_jsx(MapLegend, {
       legends: legends
     })
   });
 };
-var _default = exports.default = MapComponent;
+export default MapComponent;

package/components/Map/types.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.stylesUrl = exports.MapViewStyles = void 0;
 /**
  * Properties class for GeoJson, with a few reserved object defined.
  */
@@ -14,8 +8,8 @@ exports.stylesUrl = exports.MapViewStyles = void 0;
 
 // Additional shading/annotations for map entities
 
-const MapViewStyles = exports.MapViewStyles = ['Outdoors', 'Satellite', 'Light', 'Dark', 'Streets'];
-const stylesUrl = exports.stylesUrl = {
+export const MapViewStyles = ['Outdoors', 'Satellite', 'Light', 'Dark', 'Streets'];
+export 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',

package/components/Map/useMaintainLayerOrder.js

@@ -1,15 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useMaintainLayerOrder = void 0;
-var _react = require("react");
+import { useEffect } from 'react';
 /**
  * Ensures that all given layers maintain strict order in the Mapbox layer stack.
  */
-const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
-  (0, _react.useEffect)(() => {
+export const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
+  useEffect(() => {
     const map = mapRef.current;
     if (!map) {
       return;
@@ -28,5 +22,4 @@ const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
       }
     }
   }, [mapRef, orderedLayerIds]);
-};
-exports.useMaintainLayerOrder = useMaintainLayerOrder;
+};

package/components/Markdown/index.js

@@ -1,30 +1,23 @@
-"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 _marked = require("marked");
-require("./styles.scss");
-const Markdown = _ref => {
-  let {
-    value
-  } = _ref;
-  const [html, setHtml] = (0, _react.useState)();
-  const parseValue = (0, _react.useCallback)(async _value => {
-    const _html = await _marked.marked.parse(_value);
+import React, { useCallback, useEffect, useState } from 'react';
+import { marked } from 'marked';
+import './styles.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Markdown = ({
+  value
+}) => {
+  const [html, setHtml] = useState();
+  const parseValue = useCallback(async _value => {
+    const _html = await marked.parse(_value);
     setHtml(_html);
   }, []);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     void parseValue(value);
   }, [value]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "markdown",
     dangerouslySetInnerHTML: {
-      __html: html !== null && html !== void 0 ? html : ''
+      __html: html ?? ''
     }
   });
 };
-var _default = exports.default = Markdown;
+export default Markdown;

package/components/Message/Message.js

@@ -1,16 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Message;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireDefault(require("react"));
-var _utils = require("../../utils");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
-function Message(props) {
+import React from 'react';
+import { useDeviceInfo } from '../../utils';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Message(props) {
   const {
     type,
     priority,
@@ -24,43 +17,58 @@ function Message(props) {
   } = props;
   const {
     isMobile
-  } = (0, _utils.useDeviceInfo)();
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "tw-message tw-message--".concat(type, " tw-message--").concat(priority, " ").concat(isMobile ? 'tw-message--mobile' : '')
-  }, type === 'toast' && /*#__PURE__*/_react.default.createElement("div", {
-    className: "tw-message--left-side"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: priority,
-    className: "left-side--icon"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "tw-message--container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "tw-message--main-content"
-  }, type === 'page' && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: priority,
-    className: "main-content--icon"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "tw-message--main-body"
-  }, title && /*#__PURE__*/_react.default.createElement("div", {
-    className: "tw-message--title-container"
-  }, /*#__PURE__*/_react.default.createElement("h4", null, title)), typeof body === 'string' ? /*#__PURE__*/_react.default.createElement("p", null, body) : body, type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "tw-message--actions-container"
-  }, pageButtons === null || pageButtons === void 0 ? void 0 : pageButtons.map((pageButton, index) => {
-    const pageButtonWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton), {}, {
-      key: "page-button-".concat(index),
-      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton.props), {}, {
-        size: pageButton.props.size || 'medium'
+  } = useDeviceInfo();
+  return /*#__PURE__*/_jsxs("div", {
+    className: `tw-message tw-message--${type} tw-message--${priority} ${isMobile ? 'tw-message--mobile' : ''}`,
+    children: [type === 'toast' && /*#__PURE__*/_jsx("div", {
+      className: "tw-message--left-side",
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: priority,
+        className: "left-side--icon"
       })
-    });
-    return pageButtonWithKey;
-  })) : null)), type === 'toast' && actionText ? /*#__PURE__*/_react.default.createElement("button", {
-    onClick: actionHandler,
-    className: "tw-message--action-text"
-  }, actionText) : showCloseButton ? /*#__PURE__*/_react.default.createElement("button", {
-    onClick: onClose,
-    className: "icon-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "close",
-    className: "page-message--close-icon"
-  })) : null));
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "tw-message--container",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "tw-message--main-content",
+        children: [type === 'page' && /*#__PURE__*/_jsx(Icon, {
+          name: priority,
+          className: "main-content--icon"
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "tw-message--main-body",
+          children: [title && /*#__PURE__*/_jsx("div", {
+            className: "tw-message--title-container",
+            children: /*#__PURE__*/_jsx("h4", {
+              children: title
+            })
+          }), typeof body === 'string' ? /*#__PURE__*/_jsx("p", {
+            children: body
+          }) : body, type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/_jsx("div", {
+            className: "tw-message--actions-container",
+            children: pageButtons?.map((pageButton, index) => {
+              const pageButtonWithKey = {
+                ...pageButton,
+                key: `page-button-${index}`,
+                props: {
+                  ...pageButton.props,
+                  size: pageButton.props.size || 'medium'
+                }
+              };
+              return pageButtonWithKey;
+            })
+          }) : null]
+        })]
+      }), type === 'toast' && actionText ? /*#__PURE__*/_jsx("button", {
+        onClick: actionHandler,
+        className: "tw-message--action-text",
+        children: actionText
+      }) : showCloseButton ? /*#__PURE__*/_jsx("button", {
+        onClick: onClose,
+        className: "icon-container",
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "close",
+          className: "page-message--close-icon"
+        })
+      }) : null]
+    })]
+  });
 }

package/components/MultiSelect/MultiSelect.test.js

@@ -1,11 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _ = _interopRequireDefault(require("."));
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import MultiSelect from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
 test('show options when placeholder is clicked', () => {
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.default, {
+  render(/*#__PURE__*/_jsx(MultiSelect, {
     onAdd: () => undefined,
     onRemove: () => undefined,
     options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
@@ -15,25 +13,25 @@ test('show options when placeholder is clicked', () => {
   }));
 
   // we should find the placeholder text
-  const placeHolder = _react2.screen.getByText('Select...');
+  const placeHolder = screen.getByText('Select...');
   expect(placeHolder).toBeInTheDocument();
 
   // we should not find the options yet
-  expect(_react2.screen.queryByText('foo')).not.toBeInTheDocument();
-  expect(_react2.screen.queryByText('bar')).not.toBeInTheDocument();
-  expect(_react2.screen.queryByText('baz')).not.toBeInTheDocument();
+  expect(screen.queryByText('foo')).not.toBeInTheDocument();
+  expect(screen.queryByText('bar')).not.toBeInTheDocument();
+  expect(screen.queryByText('baz')).not.toBeInTheDocument();
 
   // click the placeholder
-  _react2.fireEvent.click(placeHolder);
+  fireEvent.click(placeHolder);
 
   // now the options should be visible
-  expect(_react2.screen.queryByText('foo')).toBeInTheDocument();
-  expect(_react2.screen.queryByText('bar')).toBeInTheDocument();
-  expect(_react2.screen.queryByText('baz')).toBeInTheDocument();
+  expect(screen.queryByText('foo')).toBeInTheDocument();
+  expect(screen.queryByText('bar')).toBeInTheDocument();
+  expect(screen.queryByText('baz')).toBeInTheDocument();
 });
 test('clicking an option calls the onAdd handler', () => {
   const handleAdd = jest.fn();
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.default, {
+  render(/*#__PURE__*/_jsx(MultiSelect, {
     onAdd: handleAdd,
     onRemove: () => undefined,
     options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
@@ -43,19 +41,19 @@ test('clicking an option calls the onAdd handler', () => {
   }));
 
   // click the dropdown chevron
-  const dropdown = _react2.screen.getByLabelText('show-options');
-  _react2.fireEvent.click(dropdown);
+  const dropdown = screen.getByLabelText('show-options');
+  fireEvent.click(dropdown);
 
   // click one of the options
-  const option = _react2.screen.getByText('bar');
-  _react2.fireEvent.click(option);
+  const option = screen.getByText('bar');
+  fireEvent.click(option);
 
   // addHandler should have been called with id 2
   expect(handleAdd).toBeCalledWith(2);
 });
 test('clicking the pill remove button calls the onRemove handler', () => {
   const handleRemove = jest.fn();
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_.default, {
+  render(/*#__PURE__*/_jsx(MultiSelect, {
     onAdd: () => undefined,
     onRemove: handleRemove,
     options: new Map([[1, 'foo']]),
@@ -64,11 +62,11 @@ test('clicking the pill remove button calls the onRemove handler', () => {
   }));
 
   // find a pill with the 'foo' text
-  expect(_react2.screen.queryByText('foo')).toBeInTheDocument();
+  expect(screen.queryByText('foo')).toBeInTheDocument();
 
   // click the remove button
-  const removeButton = _react2.screen.getByLabelText('remove');
-  _react2.fireEvent.click(removeButton);
+  const removeButton = screen.getByLabelText('remove');
+  fireEvent.click(removeButton);
 
   // handleRemove should have been called with id 1
   expect(handleRemove).toBeCalledWith(1);