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

package/components/Navbar/Navbar.js

@@ -1,48 +1,41 @@
-import 'react';
-import { useTheme, Box, ButtonBase } 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';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Box, ButtonBase, useTheme } from "@mui/material";
+import { useDeviceInfo } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
 function Navbar(props) {
-  const {
-    children,
-    setShowNavBar,
-    backgroundTransparent
-  } = props;
-  const {
-    isDesktop
-  } = useDeviceInfo();
-  const theme = useTheme();
-  return /*#__PURE__*/jsxs("div", {
-    className: 'navbar' + (backgroundTransparent ? ' transparent' : ''),
-    children: [!isDesktop && /*#__PURE__*/jsx(Box, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'start'
-      },
-      children: /*#__PURE__*/jsx(ButtonBase, {
-        onClick: () => setShowNavBar(false),
-        sx: {
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer'
-        },
-        children: /*#__PURE__*/jsx(Icon, {
-          name: "close",
-          size: "medium",
-          style: {
-            fill: theme.palette.TwClrIcnSecondary,
-            marginRight: '16px',
-            marginBottom: '8px'
-          }
-        })
-      })
-    }), children]
-  });
+    const { children, setShowNavBar, backgroundTransparent } = props;
+    const { isDesktop } = useDeviceInfo();
+    const theme = useTheme();
+    return /*#__PURE__*/ jsxs("div", {
+        className: 'navbar' + (backgroundTransparent ? ' transparent' : ''),
+        children: [
+            !isDesktop && /*#__PURE__*/ jsx(Box, {
+                sx: {
+                    display: 'flex',
+                    justifyContent: 'start'
+                },
+                children: /*#__PURE__*/ jsx(ButtonBase, {
+                    onClick: ()=>setShowNavBar(false),
+                    sx: {
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer'
+                    },
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        name: "close",
+                        size: "medium",
+                        style: {
+                            fill: theme.palette.TwClrIcnSecondary,
+                            marginRight: '16px',
+                            marginBottom: '8px'
+                        }
+                    })
+                })
+            }),
+            children
+        ]
+    });
 }
-
-export { Navbar as default };
+export default Navbar;

package/components/Navbar/SubNavbar.js

@@ -1,15 +1,11 @@
-import 'react';
-import './styles.scss';
-import { jsx } from 'react/jsx-runtime';
-
+import { jsx } from "react/jsx-runtime";
+import "react";
+import "./styles.scss";
 function SubNavbar(props) {
-  const {
-    children
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    className: "subnavbar",
-    children: children
-  });
+    const { children } = props;
+    return /*#__PURE__*/ jsx("div", {
+        className: "subnavbar",
+        children: children
+    });
 }
-
-export { SubNavbar as default };
+export default SubNavbar;

package/components/Note.js

@@ -1,23 +1,19 @@
-import 'react';
-import { useTheme, Box, Typography } from '@mui/material';
-import { jsx } from 'react/jsx-runtime';
-
-function Note({
-  children
-}) {
-  const theme = useTheme();
-  return /*#__PURE__*/jsx(Box, {
-    sx: {
-      borderRadius: 8,
-      backgroundColor: theme.palette.neutral[200],
-      marginBottom: theme.spacing(3),
-      padding: theme.spacing(2)
-    },
-    children: /*#__PURE__*/jsx(Typography, {
-      component: "p",
-      children: children
-    })
-  });
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box, Typography, useTheme } from "@mui/material";
+function Note({ children }) {
+    const theme = useTheme();
+    return /*#__PURE__*/ jsx(Box, {
+        sx: {
+            borderRadius: 8,
+            backgroundColor: theme.palette.neutral[200],
+            marginBottom: theme.spacing(3),
+            padding: theme.spacing(2)
+        },
+        children: /*#__PURE__*/ jsx(Typography, {
+            component: "p",
+            children: children
+        })
+    });
 }
-
-export { Note as default };
+export default Note;

package/components/OverlayModal/OverlayModal.js

@@ -1,66 +1,59 @@
-import { useEffect } from 'react';
-import { IconButton } from '@mui/material';
-import Icon from '../Icon/Icon.js';
-import './styles.scss';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const OverlayModal = props => {
-  const {
-    children,
-    belowComponent,
-    open,
-    onClose,
-    onEscapeClose = true,
-    onClickOutClose = true,
-    minHeight = '300px'
-  } = props;
-  useEffect(() => {
-    if (!open || !onEscapeClose) {
-      return;
-    }
-    const handleEscape = event => {
-      if (event.key === 'Escape') {
-        onClose?.();
-      }
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { IconButton } from "@mui/material";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
+const OverlayModal = (props)=>{
+    const { children, belowComponent, open, onClose, onEscapeClose = true, onClickOutClose = true, minHeight = '300px' } = props;
+    useEffect(()=>{
+        if (!open || !onEscapeClose) return;
+        const handleEscape = (event)=>{
+            if ('Escape' === event.key) onClose?.();
+        };
+        document.addEventListener('keydown', handleEscape);
+        return ()=>{
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [
+        open,
+        onEscapeClose,
+        onClose
+    ]);
+    const handleBackdropClick = (event)=>{
+        if (onClickOutClose && event.target instanceof HTMLElement && event.target.classList.contains('overlay-modal-backdrop')) onClose?.();
     };
-    document.addEventListener('keydown', handleEscape);
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [open, onEscapeClose, onClose]);
-  const handleBackdropClick = event => {
-    if (onClickOutClose && event.target instanceof HTMLElement && event.target.classList.contains('overlay-modal-backdrop')) {
-      onClose?.();
-    }
-  };
-  return open ? /*#__PURE__*/jsx("div", {
-    className: 'overlay-modal-backdrop',
-    onClick: handleBackdropClick,
-    children: /*#__PURE__*/jsxs("div", {
-      className: 'overlay-modal-container',
-      children: [/*#__PURE__*/jsx(IconButton, {
-        onClick: onClose,
-        className: 'overlay-modal-close',
-        children: /*#__PURE__*/jsx(Icon, {
-          size: 'xlarge',
-          name: "close",
-          className: 'icon-close'
-        })
-      }), /*#__PURE__*/jsx("div", {
-        className: "overlay-modal",
-        style: {
-          minHeight
-        },
-        children: /*#__PURE__*/jsx("div", {
-          className: "overlay-modal-content",
-          children: children
+    return open ? /*#__PURE__*/ jsx("div", {
+        className: 'overlay-modal-backdrop',
+        onClick: handleBackdropClick,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: 'overlay-modal-container',
+            children: [
+                /*#__PURE__*/ jsx(IconButton, {
+                    onClick: onClose,
+                    className: 'overlay-modal-close',
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        size: 'xlarge',
+                        name: "close",
+                        className: 'icon-close'
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "overlay-modal",
+                    style: {
+                        minHeight
+                    },
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: "overlay-modal-content",
+                        children: children
+                    })
+                }),
+                belowComponent && /*#__PURE__*/ jsx("div", {
+                    className: "overlay-modal-below",
+                    children: belowComponent
+                })
+            ]
         })
-      }), belowComponent && /*#__PURE__*/jsx("div", {
-        className: "overlay-modal-below",
-        children: belowComponent
-      })]
-    })
-  }) : null;
+    }) : null;
 };
-
-export { OverlayModal as default };
+const OverlayModal_OverlayModal = OverlayModal;
+export default OverlayModal_OverlayModal;

package/components/PageForm/index.js

@@ -1,43 +1,35 @@
-import { useState } from 'react';
-import { useTheme, Box } from '@mui/material';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-import BusySpinner from '../BusySpinner/index.js';
-import FormBottomBar from '../FormBottomBar/index.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, useTheme } from "@mui/material";
+import useDeviceInfo from "../../utils/useDeviceInfo.js";
+import BusySpinner from "../BusySpinner/index.js";
+import FormBottomBar from "../FormBottomBar/index.js";
 function PageForm(props) {
-  const {
-    children,
-    className,
-    hideEdit,
-    onSave,
-    style,
-    ...bottomBarProps
-  } = props;
-  const theme = useTheme();
-  const {
-    isMobile
-  } = useDeviceInfo();
-  const [processing, setProcessing] = useState(false);
-  const handleSave = async () => {
-    setProcessing(true);
-    // eslint-disable-next-line @typescript-eslint/await-thenable
-    await onSave(); // <-- we want all onSaves to be async
-    setProcessing(false);
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [processing && /*#__PURE__*/jsx(BusySpinner, {
-      withSkrim: true
-    }), /*#__PURE__*/jsx(Box, {
-      className: className,
-      paddingBottom: hideEdit ? theme.spacing(4) : theme.spacing(isMobile ? 25 : 15),
-      style: style,
-      children: children
-    }), !hideEdit && /*#__PURE__*/jsx(FormBottomBar, {
-      onSave: handleSave,
-      ...bottomBarProps
-    })]
-  });
+    const { children, className, hideEdit, onSave, style, ...bottomBarProps } = props;
+    const theme = useTheme();
+    const { isMobile } = useDeviceInfo();
+    const [processing, setProcessing] = useState(false);
+    const handleSave = async ()=>{
+        setProcessing(true);
+        await onSave();
+        setProcessing(false);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            processing && /*#__PURE__*/ jsx(BusySpinner, {
+                withSkrim: true
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                className: className,
+                paddingBottom: hideEdit ? theme.spacing(4) : theme.spacing(isMobile ? 25 : 15),
+                style: style,
+                children: children
+            }),
+            !hideEdit && /*#__PURE__*/ jsx(FormBottomBar, {
+                onSave: handleSave,
+                ...bottomBarProps
+            })
+        ]
+    });
 }
-
-export { PageForm as default };
+export default PageForm;