@terraware/web-components 5.0.27 → 5.1.0

package/components/Map/MapContainer.js

@@ -1,30 +1,26 @@
-import { useMemo } from 'react';
-import 'lodash';
-import 'luxon';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-import './styles.scss';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-const MapContainer = props => {
-  const {
-    containerId,
-    drawer,
-    drawerOpen,
-    legend,
-    map
-  } = props;
-  const {
-    isDesktop
-  } = useDeviceInfo();
-  const drawerOnly = useMemo(() => !isDesktop && drawerOpen, [drawerOpen, isDesktop]);
-  return /*#__PURE__*/jsxs("div", {
-    id: containerId,
-    className: `map-container map-container${isDesktop ? '--desktop' : `--mobile${drawerOpen ? '-drawer-open' : ''}`}`,
-    children: [/*#__PURE__*/jsx("div", {
-      className: `map-holder${drawerOnly ? ' map-holder--hidden' : ''}`,
-      children: map
-    }), drawerOpen && drawer, !drawerOnly && legend]
-  });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useDeviceInfo } from "../../utils/index.js";
+import "./styles.scss";
+const MapContainer = (props)=>{
+    const { containerId, drawer, drawerOpen, legend, map } = props;
+    const { isDesktop } = useDeviceInfo();
+    const drawerOnly = useMemo(()=>!isDesktop && drawerOpen, [
+        drawerOpen,
+        isDesktop
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        id: containerId,
+        className: `map-container map-container${isDesktop ? '--desktop' : `--mobile${drawerOpen ? '-drawer-open' : ''}`}`,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `map-holder${drawerOnly ? ' map-holder--hidden' : ''}`,
+                children: map
+            }),
+            drawerOpen && drawer,
+            !drawerOnly && legend
+        ]
+    });
 };
-
-export { MapContainer as default };
+const Map_MapContainer = MapContainer;
+export default Map_MapContainer;

package/components/Map/MapDateSliderControl.js

@@ -1,66 +1,66 @@
-import { useMemo } from 'react';
-import { useTheme, Card, Typography, Box } from '@mui/material';
-import { DateTime } from 'luxon';
-import { getShortDate } from '../../utils/date.js';
-import Slider from '../Slider/index.js';
-import { jsxs, jsx, 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;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, Card, Typography, useTheme } from "@mui/material";
+import { DateTime } from "luxon";
+import { getShortDate } from "../../utils/date.js";
+import Slider from "../Slider/index.js";
+const MapDateSliderControl = ({ dates, selectedDate, onChange })=>{
+    const theme = useTheme();
+    const earliestDate = useMemo(()=>dates.reduce((earliest, current)=>current < earliest ? current : earliest), [
+        dates
+    ]);
+    const latestDate = useMemo(()=>dates.reduce((latest, current)=>current > latest ? current : latest), [
+        dates
+    ]);
+    const marks = useMemo(()=>dates.map((date)=>({
+                value: date.valueOf()
+            })), [
+        dates
+    ]);
+    const getDateString = (date)=>getShortDate(date);
+    const getDateLabel = (date)=>/*#__PURE__*/ jsx(Typography, {
+            fontSize: "12px",
+            children: getDateString(date)
+        });
+    return /*#__PURE__*/ jsxs(Card, {
+        style: {
+            border: `1px solid ${theme.palette.TwClrBrdrTertiary}`,
+            borderRadius: '8px',
+            display: 'flex',
+            flexDirection: 'column',
+            padding: theme.spacing(2),
+            maxWidth: '270px',
+            width: dates.length > 1 ? '270px' : void 0
+        },
+        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)
+                        ]
+                    })
+                ]
+            })
+        ]
     });
-  }, [dates]);
-  const latestDate = useMemo(() => {
-    return dates.reduce((latest, current) => {
-      return current > latest ? current : latest;
-    });
-  }, [dates]);
-  const marks = useMemo(() => {
-    return dates.map(date => ({
-      value: date.valueOf()
-    }));
-  }, [dates]);
-  const getDateString = date => getShortDate(date);
-  const getDateLabel = date => /*#__PURE__*/jsx(Typography, {
-    fontSize: "12px",
-    children: getDateString(date)
-  });
-  return /*#__PURE__*/jsxs(Card, {
-    style: {
-      border: `1px solid ${theme.palette.TwClrBrdrTertiary}`,
-      borderRadius: '8px',
-      display: 'flex',
-      flexDirection: 'column',
-      padding: theme.spacing(2),
-      maxWidth: '270px',
-      width: dates.length > 1 ? '270px' : undefined
-    },
-    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)]
-      })]
-    })]
-  });
 };
-
-export { MapDateSliderControl as default };
+const Map_MapDateSliderControl = MapDateSliderControl;
+export default Map_MapDateSliderControl;

package/components/Map/MapDrawer.js

@@ -1,48 +1,42 @@
-import 'react';
-import { useTheme, Box, IconButton } from '@mui/material';
-import 'lodash';
-import 'luxon';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-import Icon from '../Icon/Icon.js';
-import './styles.scss';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-const MapDrawer = props => {
-  const {
-    children,
-    onClose,
-    open,
-    size,
-    style,
-    title
-  } = props;
-  const theme = useTheme();
-  const {
-    isDesktop
-  } = 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;
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Box, IconButton, useTheme } from "@mui/material";
+import { useDeviceInfo } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
+const MapDrawer = (props)=>{
+    const { children, onClose, open, size, style, title } = props;
+    const theme = useTheme();
+    const { isDesktop } = useDeviceInfo();
+    return open ? /*#__PURE__*/ jsxs(Box, {
+        className: `map-drawer map-drawer${isDesktop ? `--${size}` : '--mobile'}`,
+        borderLeft: isDesktop ? `1px solid ${theme.palette.TwClrBrdrTertiary}` : void 0,
+        borderRight: isDesktop ? `1px solid ${theme.palette.TwClrBrdrTertiary}` : void 0,
+        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;
 };
-
-export { MapDrawer as default };
+const Map_MapDrawer = MapDrawer;
+export default Map_MapDrawer;

package/components/Map/MapLegend.js

@@ -1,178 +1,182 @@
-import 'react';
-import { useTheme, Typography, Tooltip, Box } from '@mui/material';
-import 'lodash';
-import 'luxon';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-import AntSwitch from '../AntSwitch/index.js';
-import Icon from '../Icon/Icon.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const MapLegend = ({
-  legends
-}) => {
-  const theme = useTheme();
-  const {
-    isMobile,
-    isDesktop
-  } = useDeviceInfo();
-  const legendComponents = legends.map((legend, index) => {
-    const isFirst = index === 0;
-    const isLast = index === legends.length - 1;
-    const switchComponent = legend.type === 'highlight' ? /*#__PURE__*/jsx(AntSwitch, {
-      disabled: legend.disabled,
-      checked: legend.visible,
-      onChange: legend.setVisible
-    }) : undefined;
-    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),
-      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 : () => 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__*/jsx(Icon, {
-            name: item.style.iconName,
-            fillColor: item.style.iconColor,
-            style: {
-              marginRight: theme.spacing(1)
-            },
-            size: 'small'
-          });
-        } else {
-          return /*#__PURE__*/jsx(Box, {
-            display: 'flex',
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Box, Tooltip, Typography, useTheme } from "@mui/material";
+import { useDeviceInfo } from "../../utils/index.js";
+import AntSwitch from "../AntSwitch/index.js";
+import Icon from "../Icon/Icon.js";
+const MapLegend = ({ legends })=>{
+    const theme = useTheme();
+    const { isMobile, isDesktop } = useDeviceInfo();
+    const legendComponents = legends.map((legend, index)=>{
+        const isFirst = 0 === index;
+        const isLast = index === legends.length - 1;
+        const switchComponent = 'highlight' === legend.type ? /*#__PURE__*/ jsx(AntSwitch, {
+            disabled: legend.disabled,
+            checked: legend.visible,
+            onChange: legend.setVisible
+        }) : void 0;
+        const titleComponent = /*#__PURE__*/ jsxs(Typography, {
+            fontSize: "16px",
+            fontWeight: 600,
+            width: isMobile ? '100%' : void 0,
+            marginRight: isMobile ? 0 : theme.spacing(4),
+            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 ? void 0 : 'layer' === legend.type ? item.disabled ? void 0 : ()=>legend.setSelectedLayer(item.id) : 'marker' === legend.type ? item.disabled ? void 0 : ()=>item.setVisible?.(!item.visible) : void 0;
+            const disabled = legend.disabled || ('layer' === legend.type ? item.disabled : 'marker' === legend.type ? item.disabled : false) || false;
+            const selected = 'layer' === legend.type ? item.id === legend.selectedLayer : 'marker' === legend.type ? item.visible : false;
+            const logoComponent = ()=>{
+                if ('icon' === item.style.type) return /*#__PURE__*/ jsx(Icon, {
+                    name: item.style.iconName,
+                    fillColor: item.style.iconColor,
+                    style: {
+                        marginRight: theme.spacing(1)
+                    },
+                    size: 'small'
+                });
+                else return /*#__PURE__*/ jsx(Box, {
+                    display: 'flex',
+                    sx: {
+                        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)
+                    },
+                    children: /*#__PURE__*/ jsx(Box, {
+                        height: '16px',
+                        width: '24px',
+                        sx: {
+                            backgroundColor: item.style.fillColor,
+                            backgroundImage: item.style.fillPatternUrl ? `url('${item.style.fillPatternUrl}')` : void 0,
+                            backgroundRepeat: 'repeat',
+                            opacity: item.style.opacity ?? 0.2
+                        }
+                    })
+                });
+            };
+            const visibleComponent = ()=>{
+                switch(legend.type){
+                    case 'marker':
+                        const featureItem = item;
+                        const visibleIcon = featureItem.visible ? /*#__PURE__*/ jsx(Icon, {
+                            name: "iconEye"
+                        }) : /*#__PURE__*/ jsx(Icon, {
+                            name: "iconEyeOff"
+                        });
+                        return /*#__PURE__*/ jsx(Box, {
+                            display: "flex",
+                            children: visibleIcon
+                        });
+                    case 'layer':
+                        const layerItem = item;
+                        return /*#__PURE__*/ jsx(Box, {
+                            display: "flex",
+                            sx: {
+                                visibility: layerItem.id === legend.selectedLayer ? 'visible' : 'hidden'
+                            },
+                            children: /*#__PURE__*/ jsx(Icon, {
+                                name: "checkmark",
+                                style: {
+                                    marginRight: theme.spacing(1)
+                                }
+                            })
+                        });
+                    case 'highlight':
+                        return;
+                }
+            };
+            return /*#__PURE__*/ jsxs(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',
+                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__*/ jsx(Box, {
             sx: {
-              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)
+                opacity: legend.disabled ? 0.7 : 1
             },
-            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
-              }
+            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
+                ]
             })
-          });
-        }
-      };
-      const visibleComponent = () => {
-        switch (legend.type) {
-          case 'marker':
-            const featureItem = item;
-            const visibleIcon = featureItem.visible ? /*#__PURE__*/jsx(Icon, {
-              name: "iconEye"
-            }) : /*#__PURE__*/jsx(Icon, {
-              name: "iconEyeOff"
-            });
-            return /*#__PURE__*/jsx(Box, {
-              display: "flex",
-              children: visibleIcon
-            });
-          case 'layer':
-            const layerItem = item;
-            return /*#__PURE__*/jsx(Box, {
-              display: "flex",
-              sx: {
-                visibility: layerItem.id === legend.selectedLayer ? 'visible' : 'hidden'
-              },
-              children: /*#__PURE__*/jsx(Icon, {
-                name: "checkmark",
-                style: {
-                  marginRight: theme.spacing(1)
-                }
-              })
-            });
-          case 'highlight':
-            return undefined;
-        }
-      };
-      return /*#__PURE__*/jsxs(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',
-        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}`);
+        }, legend.title);
     });
-    return /*#__PURE__*/jsx(Box, {
-      sx: {
-        opacity: legend.disabled ? 0.7 : 1
-      },
-      borderBottom: isLast ? 'none' : `1px solid ${theme.palette.TwClrBrdrTertiary}`,
-      children: /*#__PURE__*/jsxs(Box, {
-        paddingBottom: 2,
-        paddingTop: isFirst ? 0 : 2,
+    return /*#__PURE__*/ jsx(Box, {
+        bgcolor: theme.palette.TwClrBaseWhite,
+        display: "flex",
+        justifyItems: "flex-start",
+        padding: theme.spacing(2, 1),
         flexDirection: 'column',
-        children: [/*#__PURE__*/jsxs(Box, {
-          display: "flex",
-          alignItems: 'center',
-          paddingLeft: theme.spacing(1),
-          children: [switchComponent, titleComponent]
-        }), itemComponents]
-      })
-    }, legend.title);
-  });
-  return /*#__PURE__*/jsx(Box, {
-    bgcolor: theme.palette.TwClrBaseWhite,
-    display: "flex",
-    justifyItems: "flex-start",
-    padding: theme.spacing(2, 1),
-    flexDirection: 'column',
-    maxWidth: isDesktop ? '184px' : 'stretch',
-    minWidth: isDesktop ? '160px' : undefined,
-    width: isDesktop ? 'auto' : 'stretch',
-    margin: 0,
-    overflow: 'scroll',
-    children: legendComponents
-  });
+        maxWidth: isDesktop ? '184px' : 'stretch',
+        minWidth: isDesktop ? '160px' : void 0,
+        width: isDesktop ? 'auto' : 'stretch',
+        margin: 0,
+        overflow: 'scroll',
+        children: legendComponents
+    });
 };
-
-export { MapLegend as default };
+const Map_MapLegend = MapLegend;
+export default Map_MapLegend;