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

package/components/SummaryBox.js

@@ -1,71 +1,73 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { Info } from "@mui/icons-material";
-import { Box, IconButton, Typography, useTheme } from "@mui/material";
-function SummaryBox({ title, value, variant = 'default', id, icon, onIconClick }) {
-    const theme = useTheme();
-    const summaryBoxStyles = useMemo(()=>{
-        switch(variant){
-            case 'default':
-                return {
-                    position: 'relative',
-                    borderRadius: 8,
-                    backgroundColor: theme.palette.neutral[200],
-                    padding: theme.spacing(2)
-                };
-            case 'available':
-                return {
-                    borderRadius: 8,
-                    backgroundColor: theme.palette.neutral[700],
-                    padding: theme.spacing(2),
-                    color: theme.palette.common.white
-                };
-            case 'full':
-                return {
-                    borderRadius: 8,
-                    backgroundColor: theme.palette.neutral[200],
-                    padding: theme.spacing(2),
-                    height: '100%',
-                    boxSizing: 'border-box'
-                };
-            default:
-                return {
-                    borderRadius: 8,
-                    backgroundColor: theme.palette.state[5],
-                    padding: theme.spacing(2),
-                    color: theme.palette.common.white
-                };
-        }
-    }, [
-        theme,
-        variant
-    ]);
-    return /*#__PURE__*/ jsxs(Box, {
-        id: id,
-        sx: summaryBoxStyles,
-        children: [
-            icon && /*#__PURE__*/ jsx(IconButton, {
-                onClick: onIconClick,
-                sx: {
-                    position: 'absolute',
-                    right: theme.spacing(2)
-                },
-                children: /*#__PURE__*/ jsx(Info, {})
-            }),
-            /*#__PURE__*/ jsx(Typography, {
-                component: "p",
-                children: title
-            }),
-            /*#__PURE__*/ jsx(Typography, {
-                component: "p",
-                variant: "h6",
-                sx: {
-                    fontWeight: theme.typography.fontWeightBold,
-                    whiteSpace: 'pre-line'
-                },
-                children: value
-            })
-        ]
-    });
+import { useMemo } from 'react';
+import { Info } from '@mui/icons-material';
+import { useTheme, Box, IconButton, Typography } from '@mui/material';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SummaryBox({
+  title,
+  value,
+  variant = 'default',
+  id,
+  icon,
+  onIconClick
+}) {
+  const theme = useTheme();
+  const summaryBoxStyles = useMemo(() => {
+    switch (variant) {
+      case 'default':
+        return {
+          position: 'relative',
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[200],
+          padding: theme.spacing(2)
+        };
+      case 'available':
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[700],
+          padding: theme.spacing(2),
+          color: theme.palette.common.white
+        };
+      case 'full':
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[200],
+          padding: theme.spacing(2),
+          height: '100%',
+          boxSizing: 'border-box'
+        };
+      default:
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.state[5],
+          padding: theme.spacing(2),
+          color: theme.palette.common.white
+        };
+    }
+  }, [theme, variant]);
+  return /*#__PURE__*/jsxs(Box, {
+    id: id,
+    sx: summaryBoxStyles,
+    children: [icon && /*#__PURE__*/jsx(IconButton, {
+      onClick: onIconClick,
+      sx: {
+        position: 'absolute',
+        right: theme.spacing(2)
+      },
+      children: /*#__PURE__*/jsx(Info, {})
+    }), /*#__PURE__*/jsx(Typography, {
+      component: "p",
+      children: title
+    }), /*#__PURE__*/jsx(Typography, {
+      component: "p",
+      variant: "h6",
+      sx: {
+        fontWeight: theme.typography.fontWeightBold,
+        whiteSpace: 'pre-line'
+      },
+      children: value
+    })]
+  });
 }
-export default SummaryBox;
+
+export { SummaryBox as default };

package/components/Tabs/index.js

@@ -1,137 +1,139 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Tab, Tooltip, useTheme } from "@mui/material";
-import { useDeviceInfo } from "../../utils/index.js";
-import Icon from "../Icon/Icon.js";
-const Tabs = ({ activeTab, children, onChangeTab, tabs, tabStyle, headerBorder = false, sx })=>{
-    const [selectedTab, setSelectedTab] = useState(activeTab ?? tabs[0]?.id ?? '');
-    const theme = useTheme();
-    const { isMobile } = useDeviceInfo();
-    const tabStyles = [
-        {
-            color: theme.palette.TwClrTxtSecondary,
-            fontSize: '16px',
-            fontWeight: 600,
-            lineHeight: '24px',
-            minHeight: theme.spacing(4.5),
-            padding: theme.spacing(1, 2),
-            textTransform: 'capitalize',
-            '&:hover': {
-                backgroundColor: theme.palette.TwClrBgHover
-            },
-            '&.Mui-selected': {
-                color: theme.palette.TwClrTxtBrand
-            },
-            '&.MuiTab-labelIcon': {
-                alignItems: 'center',
-                display: 'flex',
-                flexDirection: 'row'
-            },
-            '& .MuiTab-iconWrapper': {
-                fill: theme.palette.TwClrIcnSecondary,
-                marginBottom: 0,
-                marginRight: theme.spacing(1)
-            },
-            '&.Mui-selected .MuiTab-iconWrapper': {
-                fill: theme.palette.TwClrIcnBrand
+import { useState, useEffect, useMemo } from 'react';
+import { TabContext, TabList, TabPanel } from '@mui/lab';
+import { useTheme, Tab, Tooltip, Box } from '@mui/material';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Icon from '../Icon/Icon.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+const Tabs = ({
+  activeTab,
+  children,
+  onChangeTab,
+  tabs,
+  tabStyle,
+  headerBorder = false,
+  sx
+}) => {
+  const [selectedTab, setSelectedTab] = useState(activeTab ?? tabs[0]?.id ?? '');
+  const theme = useTheme();
+  const {
+    isMobile
+  } = useDeviceInfo();
+  const tabStyles = [{
+    color: theme.palette.TwClrTxtSecondary,
+    fontSize: '16px',
+    fontWeight: 600,
+    lineHeight: '24px',
+    minHeight: theme.spacing(4.5),
+    padding: theme.spacing(1, 2),
+    textTransform: 'capitalize',
+    '&:hover': {
+      backgroundColor: theme.palette.TwClrBgHover
+    },
+    '&.Mui-selected': {
+      color: theme.palette.TwClrTxtBrand
+    },
+    '&.MuiTab-labelIcon': {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    '& .MuiTab-iconWrapper': {
+      fill: theme.palette.TwClrIcnSecondary,
+      marginBottom: 0,
+      marginRight: theme.spacing(1)
+    },
+    '&.Mui-selected .MuiTab-iconWrapper': {
+      fill: theme.palette.TwClrIcnBrand
+    }
+  }, ...(Array.isArray(tabStyle) ? tabStyle : [tabStyle])];
+  const tabHeaderProps = {
+    borderBottom: headerBorder ? 1 : 0,
+    borderColor: 'divider',
+    margin: isMobile ? 0 : theme.spacing(0, 4)
+  };
+  const tabPanelStyles = {
+    padding: 0
+  };
+  const setTab = tab => {
+    if (onChangeTab) {
+      onChangeTab(tab);
+    } else {
+      setSelectedTab(tab);
+    }
+  };
+  useEffect(() => {
+    if (activeTab !== undefined) {
+      setSelectedTab(activeTab);
+    }
+  }, [activeTab]);
+  const renderedTabs = useMemo(() => tabs.map((tab, index) => {
+    const muiTab = /*#__PURE__*/jsx(Tab, {
+      disabled: tab.disabled,
+      icon: tab.icon ? /*#__PURE__*/jsx(Icon, {
+        name: tab.icon
+      }) : undefined,
+      label: /*#__PURE__*/jsxs(Fragment, {
+        children: [tab.label, tab.tooltip && !tab.disabled && /*#__PURE__*/jsx(Tooltip, {
+          title: tab.tooltip,
+          arrow: true,
+          placement: "top-start",
+          children: /*#__PURE__*/jsx("span", {
+            style: {
+              position: 'absolute',
+              inset: 0
             }
+          })
+        })]
+      }),
+      sx: tabStyles,
+      value: tab.id
+    }, index);
+    return tab.disabled ? /*#__PURE__*/jsx(Tooltip, {
+      title: tab.tooltip,
+      arrow: true,
+      placement: "top-start",
+      children: /*#__PURE__*/jsx("span", {
+        style: {
+          display: 'inline-flex'
         },
-        ...Array.isArray(tabStyle) ? tabStyle : [
-            tabStyle
-        ]
-    ];
-    const tabHeaderProps = {
-        borderBottom: headerBorder ? 1 : 0,
-        borderColor: 'divider',
-        margin: isMobile ? 0 : theme.spacing(0, 4)
-    };
-    const tabPanelStyles = {
-        padding: 0
-    };
-    const setTab = (tab)=>{
-        if (onChangeTab) onChangeTab(tab);
-        else setSelectedTab(tab);
-    };
-    useEffect(()=>{
-        if (void 0 !== activeTab) setSelectedTab(activeTab);
-    }, [
-        activeTab
-    ]);
-    const renderedTabs = useMemo(()=>tabs.map((tab, index)=>{
-            const muiTab = /*#__PURE__*/ jsx(Tab, {
-                disabled: tab.disabled,
-                icon: tab.icon ? /*#__PURE__*/ jsx(Icon, {
-                    name: tab.icon
-                }) : void 0,
-                label: /*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        tab.label,
-                        tab.tooltip && !tab.disabled && /*#__PURE__*/ jsx(Tooltip, {
-                            title: tab.tooltip,
-                            arrow: true,
-                            placement: "top-start",
-                            children: /*#__PURE__*/ jsx("span", {
-                                style: {
-                                    position: 'absolute',
-                                    inset: 0
-                                }
-                            })
-                        })
-                    ]
-                }),
-                sx: tabStyles,
-                value: tab.id
-            }, index);
-            return tab.disabled ? /*#__PURE__*/ jsx(Tooltip, {
-                title: tab.tooltip,
-                arrow: true,
-                placement: "top-start",
-                children: /*#__PURE__*/ jsx("span", {
-                    style: {
-                        display: 'inline-flex'
-                    },
-                    children: muiTab
-                })
-            }, index) : muiTab;
-        }), [
-        tabs
-    ]);
-    return /*#__PURE__*/ jsx(Box, {
-        sx: {
-            width: '100%',
-            ...sx
-        },
-        children: /*#__PURE__*/ jsxs(TabContext, {
-            value: selectedTab,
-            children: [
-                /*#__PURE__*/ jsx(Box, {
-                    sx: tabHeaderProps,
-                    className: "tab-header",
-                    children: /*#__PURE__*/ jsx(TabList, {
-                        onChange: (unused, value)=>setTab(value),
-                        sx: {
-                            minHeight: theme.spacing(4.5)
-                        },
-                        TabIndicatorProps: {
-                            style: {
-                                background: theme.palette.TwClrBgBrand,
-                                height: '4px'
-                            }
-                        },
-                        variant: 'scrollable',
-                        children: renderedTabs
-                    })
-                }),
-                children,
-                tabs.map((tab, index)=>/*#__PURE__*/ jsx(TabPanel, {
-                        sx: tabPanelStyles,
-                        value: tab.id,
-                        children: tab.children
-                    }, index))
-            ]
+        children: muiTab
+      })
+    }, index) : muiTab;
+  }), [tabs]);
+  return /*#__PURE__*/jsx(Box, {
+    sx: {
+      width: '100%',
+      ...sx
+    },
+    children: /*#__PURE__*/jsxs(TabContext, {
+      value: selectedTab,
+      children: [/*#__PURE__*/jsx(Box, {
+        sx: tabHeaderProps,
+        className: "tab-header",
+        children: /*#__PURE__*/jsx(TabList, {
+          onChange: (unused, value) => setTab(value),
+          sx: {
+            minHeight: theme.spacing(4.5)
+          },
+          TabIndicatorProps: {
+            style: {
+              background: theme.palette.TwClrBgBrand,
+              height: '4px'
+            }
+          },
+          variant: 'scrollable',
+          children: renderedTabs
         })
-    });
+      }), children, tabs.map((tab, index) => /*#__PURE__*/jsx(TabPanel, {
+        sx: tabPanelStyles,
+        value: tab.id,
+        children: tab.children
+      }, index))]
+    })
+  });
 };
-const components_Tabs = Tabs;
-export default components_Tabs;
+
+export { Tabs as default };