@terraware/web-components 4.2.26-rc.0 → 4.3.0

package/components/Markdown/index.js

@@ -1,7 +1,8 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { marked } from 'marked';
 import './styles.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
+
 const Markdown = ({
   value,
   style
@@ -14,7 +15,7 @@ const Markdown = ({
   useEffect(() => {
     void parseValue(value);
   }, [parseValue, value]);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "markdown",
     style: style,
     dangerouslySetInnerHTML: {
@@ -22,4 +23,5 @@ const Markdown = ({
     }
   });
 };
-export default Markdown;
+
+export { Markdown as default };

package/components/Message/Message.js

@@ -1,9 +1,12 @@
-import React from 'react';
-import { useDeviceInfo } from '../../utils';
-import Icon from '../Icon/Icon';
+import 'react';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Icon from '../Icon/Icon.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Message(props) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Message(props) {
   const {
     type,
     priority,
@@ -18,31 +21,31 @@ export default function Message(props) {
   const {
     isMobile
   } = useDeviceInfo();
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: `tw-message tw-message--${type} tw-message--${priority} ${isMobile ? 'tw-message--mobile' : ''}`,
-    children: [type === 'toast' && /*#__PURE__*/_jsx("div", {
+    children: [type === 'toast' && /*#__PURE__*/jsx("div", {
       className: "tw-message--left-side",
-      children: /*#__PURE__*/_jsx(Icon, {
+      children: /*#__PURE__*/jsx(Icon, {
         name: priority,
         className: "left-side--icon"
       })
-    }), /*#__PURE__*/_jsxs("div", {
+    }), /*#__PURE__*/jsxs("div", {
       className: "tw-message--container",
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/jsxs("div", {
         className: "tw-message--main-content",
-        children: [type === 'page' && /*#__PURE__*/_jsx(Icon, {
+        children: [type === 'page' && /*#__PURE__*/jsx(Icon, {
           name: priority,
           className: "main-content--icon"
-        }), /*#__PURE__*/_jsxs("div", {
+        }), /*#__PURE__*/jsxs("div", {
           className: "tw-message--main-body",
-          children: [title && /*#__PURE__*/_jsx("div", {
+          children: [title && /*#__PURE__*/jsx("div", {
             className: "tw-message--title-container",
-            children: /*#__PURE__*/_jsx("h4", {
+            children: /*#__PURE__*/jsx("h4", {
               children: title
             })
-          }), typeof body === 'string' ? /*#__PURE__*/_jsx("p", {
+          }), typeof body === 'string' ? /*#__PURE__*/jsx("p", {
             children: body
-          }) : body, type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/_jsx("div", {
+          }) : body, type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/jsx("div", {
             className: "tw-message--actions-container",
             children: pageButtons?.map((pageButton, index) => {
               const pageButtonWithKey = {
@@ -57,18 +60,20 @@ export default function Message(props) {
             })
           }) : null]
         })]
-      }), type === 'toast' && actionText ? /*#__PURE__*/_jsx("button", {
+      }), type === 'toast' && actionText ? /*#__PURE__*/jsx("button", {
         onClick: actionHandler,
         className: "tw-message--action-text",
         children: actionText
-      }) : showCloseButton ? /*#__PURE__*/_jsx("button", {
+      }) : showCloseButton ? /*#__PURE__*/jsx("button", {
         onClick: onClose,
         className: "icon-container",
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/jsx(Icon, {
           name: "close",
           className: "page-message--close-icon"
         })
       }) : null]
     })]
   });
-}
+}
+
+export { Message as default };

package/components/MultiSelect/index.js

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Box } from '@mui/material';
-import Icon from '../Icon/Icon';
-import IconTooltip from '../IconTooltip';
-import PillList from '../PillList';
+import Icon from '../Icon/Icon.js';
+import IconTooltip from '../IconTooltip/index.js';
+import PillList from '../PillList/index.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function MultiSelect(props) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function MultiSelect(props) {
   const {
     className,
     disabled,
@@ -58,46 +59,46 @@ export default function MultiSelect(props) {
       value: value ? valueRenderer(value) : missingValuePlaceholder || ''
     };
   }).filter(data => data.value);
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, {
     className: `multi-select ${className}`,
     sx: sx,
-    children: [label && /*#__PURE__*/_jsxs("label", {
+    children: [label && /*#__PURE__*/jsxs("label", {
       htmlFor: id,
       className: "multi-select__label",
-      children: [label, " ", tooltipTitle && /*#__PURE__*/_jsx(IconTooltip, {
+      children: [label, " ", tooltipTitle && /*#__PURE__*/jsx(IconTooltip, {
         title: tooltipTitle
       })]
-    }), /*#__PURE__*/_jsxs("div", {
+    }), /*#__PURE__*/jsxs("div", {
       className: `multi-select__container ${fullWidth ? 'multi-select__container--fullWidth' : ''}`,
       onBlur: onBlurHandler,
       tabIndex: 0,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/jsxs("div", {
         id: id,
         className: `multi-select__values${disabled ? '--disabled' : ''}${openedOptions ? ' open' : ''}${errorText ? ' error' : ''}`,
         onClick: toggleOptions,
-        children: [selectedOptions.length > 0 ? /*#__PURE__*/_jsx(PillList, {
+        children: [selectedOptions.length > 0 ? /*#__PURE__*/jsx(PillList, {
           data: valuesPillData,
           onRemove: onRemove,
           onClick: onPillClick,
           className: pillListClassName
-        }) : /*#__PURE__*/_jsx("p", {
+        }) : /*#__PURE__*/jsx("p", {
           className: "multi-select__placeholder-text",
           children: placeHolder
-        }), /*#__PURE__*/_jsx("div", {
+        }), /*#__PURE__*/jsx("div", {
           className: 'multi-select__values__icon-button',
           "aria-label": "show-options",
-          children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/jsx(Icon, {
             name: openedOptions ? 'chevronUp' : 'chevronDown',
             className: `multi-select__values__icon-right${disabled ? '--disabled' : ''}`
           })
         })]
-      }), options && unselectedOptions.length > 0 && openedOptions && /*#__PURE__*/_jsx("div", {
+      }), options && unselectedOptions.length > 0 && openedOptions && /*#__PURE__*/jsx("div", {
         className: "multi-select__options-container",
-        children: /*#__PURE__*/_jsx("ul", {
+        children: /*#__PURE__*/jsx("ul", {
           className: 'multi-select__options',
           children: unselectedOptions.map((optionKey, index) => {
             const optionValue = options.get(optionKey);
-            return /*#__PURE__*/_jsx("li", {
+            return /*#__PURE__*/jsx("li", {
               className: "select-value",
               onClick: () => onAdd(optionKey),
               children: optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || ''
@@ -105,20 +106,22 @@ export default function MultiSelect(props) {
           })
         })
       })]
-    }), helperText && /*#__PURE__*/_jsx("label", {
+    }), helperText && /*#__PURE__*/jsx("label", {
       htmlFor: id,
       className: "multi-select__help-text",
       children: helperText
-    }), errorText && /*#__PURE__*/_jsxs("div", {
+    }), errorText && /*#__PURE__*/jsxs("div", {
       className: "multi-select__error",
-      children: [/*#__PURE__*/_jsx(Icon, {
+      children: [/*#__PURE__*/jsx(Icon, {
         name: "error",
         className: "multi-select__error-icon"
-      }), /*#__PURE__*/_jsx("label", {
+      }), /*#__PURE__*/jsx("label", {
         htmlFor: id,
         className: "multi-select__error-text",
         children: errorText
       })]
     })]
   });
-}
+}
+
+export { MultiSelect as default };

package/components/Navbar/NavFooter.js

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

package/components/Navbar/NavItem.js

@@ -1,9 +1,10 @@
 import React, { useCallback } from 'react';
-import theme from '../../theme';
-import Icon from '../Icon/Icon';
+import theme from '../../theme.js';
+import Icon from '../Icon/Icon.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function NavItem(props) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function NavItem(props) {
   const {
     label,
     icon,
@@ -42,7 +43,7 @@ export default function NavItem(props) {
     }
   };
   const customLabel = typeof label !== 'string';
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: `
         nav-item 
         ${selected ? 'nav-item--selected' : ''}
@@ -50,30 +51,32 @@ export default function NavItem(props) {
         ${isFooter ? 'nav-item--footer' : ''}
         ${children ? 'nav-item--has-children' : ''}
       `,
-    children: [/*#__PURE__*/_jsxs("button", {
+    children: [/*#__PURE__*/jsxs("button", {
       className: `
           ${customLabel ? 'nav-item-custom-content' : 'nav-item-content'}
           ${disabled ? 'nav-item--disabled' : ''}
         `,
       onClick: onClickHandler,
       id: id,
-      children: [icon && /*#__PURE__*/_jsx(Icon, {
+      children: [icon && /*#__PURE__*/jsx(Icon, {
         name: icon,
         className: "nav-item--icon",
         fillColor: iconColor ?? theme.palette.TwClrIcnSecondary
-      }), !href && /*#__PURE__*/_jsx("span", {
+      }), !href && /*#__PURE__*/jsx("span", {
         className: "nav-item--label",
         children: label
-      }), href && /*#__PURE__*/_jsx("a", {
+      }), href && /*#__PURE__*/jsx("a", {
         className: "nav-item--label nav-item--anchor",
         href: href,
         rel: "noopener noreferrer",
         target: "_external",
         children: label
-      }), children && /*#__PURE__*/_jsx(Icon, {
+      }), children && /*#__PURE__*/jsx(Icon, {
         name: open ? 'chevronUp' : 'chevronDown',
         className: "nav-item--arrow"
       })]
     }), children && open && children]
   });
-}
+}
+
+export { NavItem as default };

package/components/Navbar/NavSection.js

@@ -1,18 +1,21 @@
-import React from 'react';
+import 'react';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function NavSection(props) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function NavSection(props) {
   const {
     title,
     separator = true
   } = props;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: "nav-section",
-    children: [separator && /*#__PURE__*/_jsx("div", {
+    children: [separator && /*#__PURE__*/jsx("div", {
       className: "divider"
-    }), title && /*#__PURE__*/_jsx("span", {
+    }), title && /*#__PURE__*/jsx("span", {
       className: `nav-section--title ${separator ? '' : 'no-separator'}`,
       children: title
     })]
   });
-}
+}
+
+export { NavSection as default };

package/components/Navbar/Navbar.js

@@ -1,10 +1,13 @@
-import React from 'react';
-import { Box, ButtonBase, useTheme } from '@mui/material';
-import { useDeviceInfo } from '../../utils';
-import Icon from '../Icon/Icon';
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Navbar(props) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Navbar(props) {
   const {
     children,
     setShowNavBar,
@@ -14,21 +17,21 @@ export default function Navbar(props) {
     isDesktop
   } = useDeviceInfo();
   const theme = useTheme();
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: 'navbar' + (backgroundTransparent ? ' transparent' : ''),
-    children: [!isDesktop && /*#__PURE__*/_jsx(Box, {
+    children: [!isDesktop && /*#__PURE__*/jsx(Box, {
       sx: {
         display: 'flex',
         justifyContent: 'start'
       },
-      children: /*#__PURE__*/_jsx(ButtonBase, {
+      children: /*#__PURE__*/jsx(ButtonBase, {
         onClick: () => setShowNavBar(false),
         sx: {
           background: 'none',
           border: 'none',
           cursor: 'pointer'
         },
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/jsx(Icon, {
           name: "close",
           size: "medium",
           style: {
@@ -40,4 +43,6 @@ export default function Navbar(props) {
       })
     }), children]
   });
-}
+}
+
+export { Navbar as default };

package/components/Navbar/SubNavbar.js

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

package/components/Note.js

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

package/components/OverlayModal/OverlayModal.js

@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { IconButton } from '@mui/material';
-import Icon from '../Icon/Icon';
+import Icon from '../Icon/Icon.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from 'react/jsx-runtime';
+
 const OverlayModal = props => {
   const {
     children,
@@ -32,33 +33,34 @@ const OverlayModal = props => {
       onClose?.();
     }
   };
-  return open ? /*#__PURE__*/_jsx("div", {
+  return open ? /*#__PURE__*/jsx("div", {
     className: 'overlay-modal-backdrop',
     onClick: handleBackdropClick,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/jsxs("div", {
       className: 'overlay-modal-container',
-      children: [/*#__PURE__*/_jsx(IconButton, {
+      children: [/*#__PURE__*/jsx(IconButton, {
         onClick: onClose,
         className: 'overlay-modal-close',
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/jsx(Icon, {
           size: 'xlarge',
           name: "close",
           className: 'icon-close'
         })
-      }), /*#__PURE__*/_jsx("div", {
+      }), /*#__PURE__*/jsx("div", {
         className: "overlay-modal",
         style: {
           minHeight
         },
-        children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/jsx("div", {
           className: "overlay-modal-content",
           children: children
         })
-      }), belowComponent && /*#__PURE__*/_jsx("div", {
+      }), belowComponent && /*#__PURE__*/jsx("div", {
         className: "overlay-modal-below",
         children: belowComponent
       })]
     })
   }) : null;
 };
-export default OverlayModal;
+
+export { OverlayModal as default };

package/components/PageForm/index.js

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { Box, useTheme } from '@mui/material';
-import useDeviceInfo from '../../utils/useDeviceInfo';
-import BusySpinner from '../BusySpinner';
-import FormBottomBar from '../FormBottomBar';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export default function PageForm(props) {
+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,
@@ -24,17 +25,19 @@ export default function PageForm(props) {
     await onSave(); // <-- we want all onSaves to be async
     setProcessing(false);
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [processing && /*#__PURE__*/_jsx(BusySpinner, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [processing && /*#__PURE__*/jsx(BusySpinner, {
       withSkrim: true
-    }), /*#__PURE__*/_jsx(Box, {
+    }), /*#__PURE__*/jsx(Box, {
       className: className,
       paddingBottom: hideEdit ? theme.spacing(4) : theme.spacing(isMobile ? 25 : 15),
       style: style,
       children: children
-    }), !hideEdit && /*#__PURE__*/_jsx(FormBottomBar, {
+    }), !hideEdit && /*#__PURE__*/jsx(FormBottomBar, {
       onSave: handleSave,
       ...bottomBarProps
     })]
   });
-}
+}
+
+export { PageForm as default };