@terraware/web-components 3.5.3 → 3.5.5

package/components/AntSwitch/index.d.ts

@@ -2,7 +2,7 @@ import './styles.scss';
 export type AntSwitchProps = {
     checked?: boolean;
     disabled?: boolean;
-    onChange: (checked: boolean) => void;
+    onChange?: (checked: boolean) => void;
 };
 declare const AntSwitch: (props: AntSwitchProps) => import("react/jsx-runtime").JSX.Element;
 export default AntSwitch;

package/components/AntSwitch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AntSwitch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,SAAS,UAAW,cAAc,4CAQvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AntSwitch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,QAAA,MAAM,SAAS,UAAW,cAAc,4CAQvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/AntSwitch/index.js

@@ -15,7 +15,7 @@ const AntSwitch = props => {
     onChange
   } = props;
   const onChangeHandler = (0, _react.useCallback)((event, value) => {
-    onChange(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
   }, [onChange]);
   return /*#__PURE__*/_react.default.createElement(_material.Switch, {
     className: "ant-switch",

package/components/Map/MapDrawer.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import './styles.scss';
+type MapDrawerSize = 'small' | 'medium';
+export type MapDrawerProp = {
+    children?: ReactNode;
+    onClose?: () => void;
+    open: boolean;
+    size: MapDrawerSize;
+    style?: CSSProperties;
+    title: string;
+};
+declare const MapDrawer: (props: MapDrawerProp) => import("react/jsx-runtime").JSX.Element | null;
+export default MapDrawer;
+//# sourceMappingURL=MapDrawer.d.ts.map

package/components/Map/MapDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapDrawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,eAAe,CAAC;AAGvB,KAAK,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,SAAS,UAAW,aAAa,mDAwBtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Map/MapDrawer.js

@@ -0,0 +1,44 @@
+"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 _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+var _utils = require("../../utils");
+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'),
+    border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary),
+    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;

package/components/Map/MapLegend.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { IconName } from '../Icon/icons';
+export type MapLayerItem = {
+    disabled?: boolean;
+    id: string;
+    label: string;
+    style: {
+        borderColor: string;
+        fillColor?: string;
+        fillPatternUrl?: string;
+        opacity?: number;
+    };
+};
+export type MapLayerGroup = {
+    type: 'layer';
+    items: MapLayerItem[];
+    setSelectedLayer: (id: string) => void;
+    selectedLayer: string;
+};
+export type MapFeatureItem = {
+    disabled?: boolean;
+    icon: IconName;
+    iconColor: string;
+    iconOpacity?: number;
+    id: string;
+    label: string;
+    setVisible?: (visible: boolean) => void;
+    visible: boolean;
+};
+export type MapFeatureGroup = {
+    type: 'feature';
+    items: MapFeatureItem[];
+};
+export type MapHighlightItem = {
+    label: string;
+    style: {
+        borderColor: string;
+        fillColor?: string;
+        fillPatternUrl?: string;
+        opacity?: number;
+    };
+};
+export type MapHighlightGroup = {
+    type: 'highlight';
+    items: MapHighlightItem[];
+    setVisible?: (visible: boolean) => void;
+    visible: boolean;
+};
+export type MapLegendGroup = {
+    disabled?: boolean;
+    tooltip?: string;
+    title: string;
+} & (MapFeatureGroup | MapLayerGroup | MapHighlightGroup);
+export type MapLegendProps = {
+    legends: MapLegendGroup[];
+};
+declare const MapLegend: ({ legends }: MapLegendProps) => JSX.Element;
+export default MapLegend;
+//# sourceMappingURL=MapLegend.d.ts.map

package/components/Map/MapLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLegend.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapLegend.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,CAAC,eAAe,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,SAAS,gBAAiB,cAAc,KAAG,WAgOhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Map/MapLegend.js

@@ -0,0 +1,180 @@
+"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 _utils = require("../../utils");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _AntSwitch = _interopRequireDefault(require("../AntSwitch"));
+const MapLegend = _ref => {
+  let {
+    legends
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const {
+    isMobile,
+    isDesktop
+  } = (0, _utils.useDeviceInfo)();
+  const borderRadius = (0, _react.useMemo)(() => {
+    if (isDesktop) {
+      return '0 8px 8px 0'; // right-side
+    } else {
+      return '0 0 8px 8px'; // bottom-side
+    }
+  }, [isDesktop]);
+  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, {
+      disabled: legend.disabled,
+      checked: legend.visible,
+      onChange: legend.setVisible
+    }) : undefined;
+    const titleComponent = /*#__PURE__*/_react.default.createElement(_material.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"
+    }))));
+    const itemComponents = legend.items.map((item, itemIndex) => {
+      const onClick = legend.disabled ? undefined : legend.type === 'layer' ? item.disabled ? undefined : () => legend.setSelectedLayer(item.id) : legend.type === 'feature' ? item.disabled ? undefined : () => {
+        var _setVisible, _ref2;
+        return (_setVisible = (_ref2 = item).setVisible) === null || _setVisible === void 0 ? void 0 : _setVisible.call(_ref2, !item.visible);
+      } : undefined;
+      const disabled = legend.disabled || (legend.type === 'layer' ? item.disabled : legend.type === 'feature' ? item.disabled : false) || false;
+      const selected = legend.type === 'layer' ? item.id === legend.selectedLayer : legend.type === 'feature' ? item.visible : false;
+      const logoComponent = () => {
+        var _layerItem$style$opac;
+        switch (legend.type) {
+          case 'feature':
+            const featureItem = item;
+            return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+              name: featureItem.icon,
+              fillColor: featureItem.iconColor,
+              style: {
+                marginRight: theme.spacing(1),
+                opacity: featureItem.iconOpacity
+              },
+              size: 'small'
+            });
+          case 'layer':
+          case 'highlight':
+            const layerItem = item;
+            const opacity = (_layerItem$style$opac = layerItem.style.opacity) !== null && _layerItem$style$opac !== void 0 ? _layerItem$style$opac : 1.0;
+            return /*#__PURE__*/_react.default.createElement(_material.Box, {
+              sx: {
+                border: "2px solid ".concat(layerItem.style.borderColor),
+                backgroundColor: layerItem.style.fillColor,
+                backgroundImage: layerItem.style.fillPatternUrl ? "url('".concat(layerItem.style.fillPatternUrl, "')") : undefined,
+                backgroundRepeat: 'repeat',
+                opacity: disabled ? 0.7 * opacity : opacity,
+                height: '16px',
+                width: '24px',
+                minWidth: '24px',
+                marginRight: theme.spacing(1)
+              }
+            });
+        }
+      };
+      const visibleComponent = () => {
+        switch (legend.type) {
+          case 'feature':
+            const featureItem = item;
+            const visibleIcon = featureItem.visible ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+              name: "iconEye"
+            }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+              name: "iconEyeOff"
+            });
+            return /*#__PURE__*/_react.default.createElement(_material.Box, {
+              display: "flex"
+            }, visibleIcon);
+          case 'layer':
+            const layerLegend = legend;
+            const layerItem = item;
+            return /*#__PURE__*/_react.default.createElement(_material.Box, {
+              display: "flex",
+              sx: {
+                visibility: layerItem.id === layerLegend.selectedLayer ? 'visible' : 'hidden'
+              }
+            }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+              name: "checkmark",
+              style: {
+                marginRight: theme.spacing(1)
+              }
+            }));
+          case 'highlight':
+            return undefined;
+        }
+      };
+      return /*#__PURE__*/_react.default.createElement(_material.Box, {
+        onClick: onClick,
+        display: "flex",
+        alignItems: "center",
+        sx: {
+          cursor: onClick ? 'pointer' : 'default',
+          background: selected ? theme.palette.TwClrBgSecondary : 'none',
+          borderRadius: theme.spacing(1),
+          padding: theme.spacing(1, 1),
+          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()));
+    });
+    return /*#__PURE__*/_react.default.createElement(_material.Box, {
+      key: legend.title,
+      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));
+  });
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    justifyItems: "flex-start",
+    border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary),
+    borderRadius: borderRadius,
+    padding: theme.spacing(2, 1),
+    flexDirection: 'column',
+    maxWidth: isDesktop ? '184px' : 'fill',
+    width: isDesktop ? 'auto' : 'fill',
+    margin: 0
+  }, legendComponents);
+};
+var _default = exports.default = MapLegend;

package/components/Map/styles.scss

@@ -0,0 +1,64 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+.map-drawer {
+  display: flex;
+  flex-direction: column;
+  background: $tw-clr-base-white;
+
+  &--mobile {
+    display: none;
+  }
+
+  &--small {
+    min-width: 280px;
+    width: 280px;
+  }
+  &--medium {
+    min-width: 420px;
+    width: 420px;
+  }
+
+  &--header {
+    padding: $tw-spc-base-x-small $tw-spc-base-xx-small;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      font-family: $tw-fnt-mssg-title-font-family;
+      font-size: $tw-fnt-mssg-title-font-size;
+      font-weight: $tw-fnt-mssg-title-font-weight;
+      line-height: $tw-fnt-mssg-title-line-height;
+      color: $tw-clr-txt;
+      text-align: center;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin: 0 $tw-spc-base-xx-small;
+      width: 100%;
+    }
+
+    .icon-close {
+      fill: $tw-clr-icn-secondary;
+      height: $tw-sz-base-medium;
+      width: $tw-sz-base-medium;
+    }
+  }
+
+  &--body {
+    background: $tw-clr-base-white;
+    padding: $tw-spc-base-small $tw-spc-base-x-small;
+    text-align: start;
+    overflow: auto;
+    white-space: pre-wrap;
+  }
+
+  &--message {
+    font-family: $tw-fnt-dlg-bx-message-font-family;
+    font-size: $tw-fnt-dlg-bx-message-font-size;
+    font-weight: $tw-fnt-dlg-bx-message-font-weight;
+    line-height: $tw-fnt-dlg-bx-message-line-height;
+    color: $tw-clr-txt;
+    width: 100%;
+    text-align: start;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "3.5.3",
+  "version": "3.5.5",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

package/stories/MapDrawer.stories.d.ts

@@ -0,0 +1,8 @@
+import { MapDrawerProp } from '../components/Map/MapDrawer';
+declare const _default: {
+    title: string;
+    component: (props: MapDrawerProp) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, MapDrawerProp>;
+//# sourceMappingURL=MapDrawer.stories.d.ts.map

package/stories/MapDrawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapDrawer.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapDrawer.stories.tsx"],"names":[],"mappings":"AAKA,OAAkB,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;;;;;AAGvE,wBAGE;AAuEF,eAAO,MAAM,OAAO,sGAAoB,CAAC"}

package/stories/MapLegend.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MapLegendProps } from '../components/Map/MapLegend';
+declare const _default: {
+    title: string;
+    component: ({ legends }: MapLegendProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, MapLegendProps>;
+//# sourceMappingURL=MapLegend.stories.d.ts.map

package/stories/MapLegend.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLegend.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapLegend.stories.tsx"],"names":[],"mappings":";AAEA,OAAkB,EAAkB,cAAc,EAAE,MAAM,6BAA6B,CAAC;;;;;AAKxF,wBAGE;AAkLF,eAAO,MAAM,OAAO,uGAAoB,CAAC"}