@terraware/web-components 4.2.13 → 4.2.14-rc.1

package/components/MultiSelect/index.js

@@ -1,18 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = MultiSelect;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
-var _PillList = _interopRequireDefault(require("../PillList"));
-require("./styles.scss");
-function MultiSelect(props) {
+import React, { useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+import Icon from '../Icon/Icon';
+import IconTooltip from '../IconTooltip';
+import PillList from '../PillList';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function MultiSelect(props) {
   const {
     className,
     disabled,
@@ -34,14 +27,14 @@ function MultiSelect(props) {
     tooltipTitle,
     valueRenderer
   } = props;
-  const [openedOptions, setOpenedOptions] = (0, _react.useState)(false);
+  const [openedOptions, setOpenedOptions] = useState(false);
   const toggleOptions = () => {
     setOpenedOptions(isOpen => !isOpen && !disabled);
     if (props.onFocus) {
       props.onFocus();
     }
   };
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (optionsVisible !== undefined) {
       setOpenedOptions(optionsVisible);
     }
@@ -65,56 +58,67 @@ function MultiSelect(props) {
       value: value ? valueRenderer(value) : missingValuePlaceholder || ''
     };
   }).filter(data => data.value);
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "multi-select ".concat(className),
-    sx: sx
-  }, label && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "multi-select__label"
-  }, label, " ", tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
-    title: tooltipTitle
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "multi-select__container ".concat(fullWidth ? 'multi-select__container--fullWidth' : ''),
-    onBlur: onBlurHandler,
-    tabIndex: 0
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: id,
-    className: "multi-select__values".concat(disabled ? '--disabled' : '').concat(openedOptions ? ' open' : '').concat(errorText ? ' error' : ''),
-    onClick: toggleOptions
-  }, selectedOptions.length > 0 ? /*#__PURE__*/_react.default.createElement(_PillList.default, {
-    data: valuesPillData,
-    onRemove: onRemove,
-    onClick: onPillClick,
-    className: pillListClassName
-  }) : /*#__PURE__*/_react.default.createElement("p", {
-    className: "multi-select__placeholder-text"
-  }, placeHolder), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'multi-select__values__icon-button',
-    "aria-label": "show-options"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: openedOptions ? 'chevronUp' : 'chevronDown',
-    className: "multi-select__values__icon-right".concat(disabled ? '--disabled' : '')
-  }))), options && unselectedOptions.length > 0 && openedOptions && /*#__PURE__*/_react.default.createElement("div", {
-    className: "multi-select__options-container"
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: 'multi-select__options'
-  }, unselectedOptions.map((optionKey, index) => {
-    const optionValue = options.get(optionKey);
-    return /*#__PURE__*/_react.default.createElement("li", {
-      key: index,
-      className: "select-value",
-      onClick: () => onAdd(optionKey)
-    }, optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || '');
-  })))), helperText && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "multi-select__help-text"
-  }, helperText), errorText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "multi-select__error"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "error",
-    className: "multi-select__error-icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "multi-select__error-text"
-  }, errorText)));
+  return /*#__PURE__*/_jsxs(Box, {
+    className: `multi-select ${className}`,
+    sx: sx,
+    children: [label && /*#__PURE__*/_jsxs("label", {
+      htmlFor: id,
+      className: "multi-select__label",
+      children: [label, " ", tooltipTitle && /*#__PURE__*/_jsx(IconTooltip, {
+        title: tooltipTitle
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `multi-select__container ${fullWidth ? 'multi-select__container--fullWidth' : ''}`,
+      onBlur: onBlurHandler,
+      tabIndex: 0,
+      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, {
+          data: valuesPillData,
+          onRemove: onRemove,
+          onClick: onPillClick,
+          className: pillListClassName
+        }) : /*#__PURE__*/_jsx("p", {
+          className: "multi-select__placeholder-text",
+          children: placeHolder
+        }), /*#__PURE__*/_jsx("div", {
+          className: 'multi-select__values__icon-button',
+          "aria-label": "show-options",
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: openedOptions ? 'chevronUp' : 'chevronDown',
+            className: `multi-select__values__icon-right${disabled ? '--disabled' : ''}`
+          })
+        })]
+      }), options && unselectedOptions.length > 0 && openedOptions && /*#__PURE__*/_jsx("div", {
+        className: "multi-select__options-container",
+        children: /*#__PURE__*/_jsx("ul", {
+          className: 'multi-select__options',
+          children: unselectedOptions.map((optionKey, index) => {
+            const optionValue = options.get(optionKey);
+            return /*#__PURE__*/_jsx("li", {
+              className: "select-value",
+              onClick: () => onAdd(optionKey),
+              children: optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || ''
+            }, index);
+          })
+        })
+      })]
+    }), helperText && /*#__PURE__*/_jsx("label", {
+      htmlFor: id,
+      className: "multi-select__help-text",
+      children: helperText
+    }), errorText && /*#__PURE__*/_jsxs("div", {
+      className: "multi-select__error",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "error",
+        className: "multi-select__error-icon"
+      }), /*#__PURE__*/_jsx("label", {
+        htmlFor: id,
+        className: "multi-select__error-text",
+        children: errorText
+      })]
+    })]
+  });
 }

package/components/Navbar/NavFooter.js

@@ -1,17 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = NavFooter;
-var _react = _interopRequireDefault(require("react"));
-require("./styles.scss");
-function NavFooter(props) {
+import React from 'react';
+import './styles.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function NavFooter(props) {
   const {
     children
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "nav-footer"
-  }, children);
+  return /*#__PURE__*/_jsx("div", {
+    className: "nav-footer",
+    children: children
+  });
 }

package/components/Navbar/NavItem.js

@@ -1,16 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = NavItem;
-var _react = _interopRequireWildcard(require("react"));
-var _theme = _interopRequireDefault(require("../../theme"));
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
-function NavItem(props) {
+import React, { useCallback } from 'react';
+import theme from '../../theme';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function NavItem(props) {
   const {
     label,
     icon,
@@ -24,7 +17,7 @@ function NavItem(props) {
     href
   } = props;
   const children = href ? null : childrenProps;
-  const hasChildrenSelected = (0, _react.useCallback)(() => {
+  const hasChildrenSelected = useCallback(() => {
     if (children && children.props && children.props.children) {
       const subChildren = children.props.children;
       if (Array.isArray(subChildren)) {
@@ -34,12 +27,12 @@ function NavItem(props) {
     }
     return false;
   }, [children]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (hasChildrenSelected()) {
       setOpen(true);
     }
   }, [children, hasChildrenSelected, selected]);
-  const [open, setOpen] = _react.default.useState(hasChildrenSelected());
+  const [open, setOpen] = React.useState(hasChildrenSelected());
   const onClickHandler = () => {
     if (!disabled) {
       setOpen(!open || hasChildrenSelected());
@@ -49,25 +42,38 @@ function NavItem(props) {
     }
   };
   const customLabel = typeof label !== 'string';
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n        nav-item \n        ".concat(selected ? 'nav-item--selected' : '', "\n        ").concat(hasChildrenSelected() ? 'nav-item--children-selected' : '', "\n        ").concat(isFooter ? 'nav-item--footer' : '', "\n        ").concat(children ? 'nav-item--has-children' : '', "\n      ")
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "\n          ".concat(customLabel ? 'nav-item-custom-content' : 'nav-item-content', "\n          ").concat(disabled ? 'nav-item--disabled' : '', "\n        "),
-    onClick: onClickHandler,
-    id: id
-  }, icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: icon,
-    className: "nav-item--icon",
-    fillColor: iconColor !== null && iconColor !== void 0 ? iconColor : _theme.default.palette.TwClrIcnSecondary
-  }), !href && /*#__PURE__*/_react.default.createElement("span", {
-    className: "nav-item--label"
-  }, label), href && /*#__PURE__*/_react.default.createElement("a", {
-    className: "nav-item--label nav-item--anchor",
-    href: href,
-    rel: "noopener noreferrer",
-    target: "_external"
-  }, label), children && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: open ? 'chevronUp' : 'chevronDown',
-    className: "nav-item--arrow"
-  })), children && open && children);
+  return /*#__PURE__*/_jsxs("div", {
+    className: `
+        nav-item 
+        ${selected ? 'nav-item--selected' : ''}
+        ${hasChildrenSelected() ? 'nav-item--children-selected' : ''}
+        ${isFooter ? 'nav-item--footer' : ''}
+        ${children ? 'nav-item--has-children' : ''}
+      `,
+    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, {
+        name: icon,
+        className: "nav-item--icon",
+        fillColor: iconColor ?? theme.palette.TwClrIcnSecondary
+      }), !href && /*#__PURE__*/_jsx("span", {
+        className: "nav-item--label",
+        children: label
+      }), href && /*#__PURE__*/_jsx("a", {
+        className: "nav-item--label nav-item--anchor",
+        href: href,
+        rel: "noopener noreferrer",
+        target: "_external",
+        children: label
+      }), children && /*#__PURE__*/_jsx(Icon, {
+        name: open ? 'chevronUp' : 'chevronDown',
+        className: "nav-item--arrow"
+      })]
+    }), children && open && children]
+  });
 }

package/components/Navbar/NavSection.js

@@ -1,22 +1,18 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = NavSection;
-var _react = _interopRequireDefault(require("react"));
-require("./styles.scss");
-function NavSection(props) {
+import React from 'react';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function NavSection(props) {
   const {
     title,
     separator = true
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "nav-section"
-  }, separator && /*#__PURE__*/_react.default.createElement("div", {
-    className: "divider"
-  }), title && /*#__PURE__*/_react.default.createElement("span", {
-    className: "nav-section--title ".concat(separator ? '' : 'no-separator')
-  }, title));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "nav-section",
+    children: [separator && /*#__PURE__*/_jsx("div", {
+      className: "divider"
+    }), title && /*#__PURE__*/_jsx("span", {
+      className: `nav-section--title ${separator ? '' : 'no-separator'}`,
+      children: title
+    })]
+  });
 }

package/components/Navbar/Navbar.js

@@ -1,16 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Navbar;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _utils = require("../../utils");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
-function Navbar(props) {
+import React from 'react';
+import { Box, ButtonBase, useTheme } from '@mui/material';
+import { useDeviceInfo } from '../../utils';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Navbar(props) {
   const {
     children,
     setShowNavBar,
@@ -18,29 +12,32 @@ function Navbar(props) {
   } = props;
   const {
     isDesktop
-  } = (0, _utils.useDeviceInfo)();
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'navbar' + (backgroundTransparent ? ' transparent' : '')
-  }, !isDesktop && /*#__PURE__*/_react.default.createElement(_material.Box, {
-    sx: {
-      display: 'flex',
-      justifyContent: 'start'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.ButtonBase, {
-    onClick: () => setShowNavBar(false),
-    sx: {
-      background: 'none',
-      border: 'none',
-      cursor: 'pointer'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "close",
-    size: "medium",
-    style: {
-      fill: theme.palette.TwClrIcnSecondary,
-      marginRight: '16px',
-      marginBottom: '8px'
-    }
-  }))), children);
+  } = 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]
+  });
 }

package/components/Navbar/SubNavbar.js

@@ -1,17 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SubNavbar;
-var _react = _interopRequireDefault(require("react"));
-require("./styles.scss");
-function SubNavbar(props) {
+import React from 'react';
+import './styles.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SubNavbar(props) {
   const {
     children
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "subnavbar"
-  }, children);
+  return /*#__PURE__*/_jsx("div", {
+    className: "subnavbar",
+    children: children
+  });
 }

package/components/Note.js

@@ -1,25 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Note;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-function Note(_ref) {
-  let {
-    children
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+import React from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default 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)
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    component: "p"
-  }, children));
+    },
+    children: /*#__PURE__*/_jsx(Typography, {
+      component: "p",
+      children: children
+    })
+  });
 }

package/components/OverlayModal/OverlayModal.js

@@ -1,15 +1,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
+import React, { useEffect } from 'react';
+import { IconButton } from '@mui/material';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const OverlayModal = props => {
   const {
     children,
@@ -20,13 +13,13 @@ const OverlayModal = props => {
     onClickOutClose = true,
     minHeight = '300px'
   } = props;
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (!open || !onEscapeClose) {
       return;
     }
     const handleEscape = event => {
       if (event.key === 'Escape') {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose?.();
       }
     };
     document.addEventListener('keydown', handleEscape);
@@ -36,30 +29,36 @@ const OverlayModal = props => {
   }, [open, onEscapeClose, onClose]);
   const handleBackdropClick = event => {
     if (onClickOutClose && event.target instanceof HTMLElement && event.target.classList.contains('overlay-modal-backdrop')) {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
+      onClose?.();
     }
   };
-  return open ? /*#__PURE__*/_react.default.createElement("div", {
+  return open ? /*#__PURE__*/_jsx("div", {
     className: 'overlay-modal-backdrop',
-    onClick: handleBackdropClick
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'overlay-modal-container'
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: onClose,
-    className: 'overlay-modal-close'
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    size: 'xlarge',
-    name: "close",
-    className: 'icon-close'
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "overlay-modal",
-    style: {
-      minHeight
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "overlay-modal-content"
-  }, children)), belowComponent && /*#__PURE__*/_react.default.createElement("div", {
-    className: "overlay-modal-below"
-  }, belowComponent))) : null;
+    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
+      })]
+    })
+  }) : null;
 };
-var _default = exports.default = OverlayModal;
+export default OverlayModal;