@terraware/web-components 5.0.27-rc.0 → 5.0.27

package/components/Map/MapContainer.js

@@ -1,26 +1,30 @@
-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
-        ]
-    });
+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]
+  });
 };
-const Map_MapContainer = MapContainer;
-export default Map_MapContainer;
+
+export { MapContainer as default };

package/components/Map/MapDateSliderControl.js

@@ -1,66 +1,66 @@
-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)
-                        ]
-                    })
-                ]
-            })
-        ]
+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;
     });
+  }, [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)]
+      })]
+    })]
+  });
 };
-const Map_MapDateSliderControl = MapDateSliderControl;
-export default Map_MapDateSliderControl;
+
+export { MapDateSliderControl as default };

package/components/Map/MapDrawer.js

@@ -1,42 +1,48 @@
-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;
+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;
 };
-const Map_MapDrawer = MapDrawer;
-export default Map_MapDrawer;
+
+export { MapDrawer as default };

package/components/Map/MapLegend.js

@@ -1,182 +1,178 @@
-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, {
+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',
             sx: {
-                opacity: legend.disabled ? 0.7 : 1
+              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)
             },
-            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
-                ]
+            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
+              }
             })
-        }, legend.title);
-    });
-    return /*#__PURE__*/ jsx(Box, {
-        bgcolor: theme.palette.TwClrBaseWhite,
+          });
+        }
+      };
+      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",
-        justifyItems: "flex-start",
-        padding: theme.spacing(2, 1),
-        flexDirection: 'column',
-        maxWidth: isDesktop ? '184px' : 'stretch',
-        minWidth: isDesktop ? '160px' : void 0,
-        width: isDesktop ? 'auto' : 'stretch',
-        margin: 0,
-        overflow: 'scroll',
-        children: legendComponents
+        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: {
+        opacity: legend.disabled ? 0.7 : 1
+      },
+      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__*/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
+  });
 };
-const Map_MapLegend = MapLegend;
-export default Map_MapLegend;
+
+export { MapLegend as default };