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

package/components/Navbar/Navbar.js

@@ -1,41 +1,48 @@
-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";
+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';
+
 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 default Navbar;
+
+export { Navbar as default };

package/components/Navbar/SubNavbar.js

@@ -1,11 +1,15 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import "./styles.scss";
+import 'react';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
 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 default SubNavbar;
+
+export { SubNavbar as default };

package/components/Note.js

@@ -1,19 +1,23 @@
-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
-        })
-    });
+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
+    })
+  });
 }
-export default Note;
+
+export { Note as default };

package/components/OverlayModal/OverlayModal.js

@@ -1,59 +1,66 @@
-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?.();
+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?.();
+      }
     };
-    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
-                })
-            ]
+    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
         })
-    }) : null;
+      }), belowComponent && /*#__PURE__*/jsx("div", {
+        className: "overlay-modal-below",
+        children: belowComponent
+      })]
+    })
+  }) : null;
 };
-const OverlayModal_OverlayModal = OverlayModal;
-export default OverlayModal_OverlayModal;
+
+export { OverlayModal as default };

package/components/PageForm/index.js

@@ -1,35 +1,43 @@
-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";
+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';
+
 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);
-        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
-            })
-        ]
-    });
+  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
+    })]
+  });
 }
-export default PageForm;
+
+export { PageForm as default };