@terraware/web-components 4.2.12 → 4.2.14-rc.0

package/components/AntSwitch/index.js

@@ -1,27 +1,21 @@
-"use strict";
-
-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");
-require("./styles.scss");
+import React, { useCallback } from 'react';
+import { Switch } from '@mui/material';
+import './styles.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
 const AntSwitch = props => {
   const {
     checked,
     disabled,
     onChange
   } = props;
-  const onChangeHandler = (0, _react.useCallback)((event, value) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  const onChangeHandler = useCallback((event, value) => {
+    onChange?.(value);
   }, [onChange]);
-  return /*#__PURE__*/_react.default.createElement(_material.Switch, {
+  return /*#__PURE__*/_jsx(Switch, {
     className: "ant-switch",
     checked: checked,
     disabled: disabled,
     onChange: onChangeHandler
   });
 };
-var _default = exports.default = AntSwitch;
+export default AntSwitch;

package/components/Autocomplete/Autocomplete.js

@@ -1,43 +1,36 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Autocomplete;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
-require("../Select/styles.scss");
-require("./styles.scss");
+import React from 'react';
+import { Box, Autocomplete as MUIAutocomplete, TextField } from '@mui/material';
+import Icon from '../Icon/Icon';
+import IconTooltip from '../IconTooltip';
+import '../Select/styles.scss';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isEmpty = value => ['', undefined].includes(value);
-function Autocomplete(_ref) {
-  let {
-    id,
-    label,
-    options,
-    onChange,
-    selected,
-    filterOptions,
-    freeSolo,
-    disabled,
-    className,
-    hideClearIcon,
-    isEqual,
-    placeholder,
-    errorText,
-    tooltipTitle,
-    required,
-    noOptionsText,
-    loading,
-    loadingText,
-    open,
-    onOpen,
-    onClose,
-    sx,
-    renderOption
-  } = _ref;
+export default function Autocomplete({
+  id,
+  label,
+  options,
+  onChange,
+  selected,
+  filterOptions,
+  freeSolo,
+  disabled,
+  className,
+  hideClearIcon,
+  isEqual,
+  placeholder,
+  errorText,
+  tooltipTitle,
+  required,
+  noOptionsText,
+  loading,
+  loadingText,
+  open,
+  onOpen,
+  onClose,
+  sx,
+  renderOption
+}) {
   const onChangeHandler = (event, value) => {
     if (event) {
       if (value) {
@@ -47,29 +40,34 @@ function Autocomplete(_ref) {
       }
     }
   };
-  const renderInput = params => /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "auto-complete ".concat(className),
-    sx: sx
-  }, label && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-label"
-  }, label, " ", required ? '*' : '', tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
-    placement: "top",
-    title: tooltipTitle
-  })), /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
-    variant: "outlined",
-    size: "small",
-    placeholder: placeholder,
-    className: errorText ? 'auto-complete--error' : ''
-  })), errorText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-label-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "error",
-    className: "textfield-error-text--icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-error-text"
-  }, errorText)));
+  const renderInput = params => /*#__PURE__*/_jsxs(Box, {
+    className: `auto-complete ${className}`,
+    sx: sx,
+    children: [label && /*#__PURE__*/_jsxs("label", {
+      htmlFor: id,
+      className: "textfield-label",
+      children: [label, " ", required ? '*' : '', tooltipTitle && /*#__PURE__*/_jsx(IconTooltip, {
+        placement: "top",
+        title: tooltipTitle
+      })]
+    }), /*#__PURE__*/_jsx(TextField, {
+      ...params,
+      variant: "outlined",
+      size: "small",
+      placeholder: placeholder,
+      className: errorText ? 'auto-complete--error' : ''
+    }), errorText && /*#__PURE__*/_jsxs("div", {
+      className: "textfield-label-container",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "error",
+        className: "textfield-error-text--icon"
+      }), /*#__PURE__*/_jsx("label", {
+        htmlFor: id,
+        className: "textfield-error-text",
+        children: errorText
+      })]
+    })]
+  });
   const optionalArgs = {};
   if (hideClearIcon) {
     optionalArgs.clearIcon = null;
@@ -79,16 +77,15 @@ function Autocomplete(_ref) {
   } else {
     optionalArgs.isOptionEqualToValue = (option, value) => option === value || isEmpty(option) && isEmpty(value);
   }
-  return /*#__PURE__*/_react.default.createElement(_material.Autocomplete, Object.assign({
+  return /*#__PURE__*/_jsx(MUIAutocomplete, {
     disabled: disabled,
     id: id,
     options: options,
     getOptionLabel: option => {
       if (typeof option === 'object') {
-        var _option$label;
-        return (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : '';
+        return option.label ?? '';
       }
-      return option !== null && option !== void 0 ? option : '';
+      return option ?? '';
     },
     onChange: onChangeHandler,
     onInputChange: (event, value) => freeSolo && onChangeHandler(event, value),
@@ -104,7 +101,7 @@ function Autocomplete(_ref) {
     open: open,
     onOpen: onOpen,
     onClose: onClose,
-    popupIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    popupIcon: /*#__PURE__*/_jsx(Icon, {
       name: loading ? 'spinner' : open ? 'chevronUp' : 'chevronDown',
       className: "auto-complete--icon-right",
       size: "medium"
@@ -124,8 +121,8 @@ function Autocomplete(_ref) {
       '& .MuiTouchRipple-root': {
         display: 'none'
       }
-    }
-  }, optionalArgs, {
+    },
+    ...optionalArgs,
     renderOption: renderOption
-  }));
+  });
 }

package/components/Badge/index.js

@@ -1,32 +1,28 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
+import React from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 const Badge = props => {
-  const theme = (0, _material.useTheme)();
+  const theme = useTheme();
   const backgroundColor = props.backgroundColor || theme.palette.TwClrBgSecondary;
   const borderColor = props.borderColor || theme.palette.TwClrBrdrSecondary;
   const labelColor = props.labelColor || borderColor;
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_jsx(Box, {
     component: "span",
     sx: {
       backgroundColor,
-      border: "1px solid ".concat(borderColor),
+      border: `1px solid ${borderColor}`,
       borderRadius: theme.spacing(1),
       display: 'inline-block',
       padding: theme.spacing(0.5, 1),
       width: 'fit-content'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    color: labelColor,
-    component: "span",
-    fontSize: "14px",
-    fontWeight: 500
-  }, props.label));
+    },
+    children: /*#__PURE__*/_jsx(Typography, {
+      color: labelColor,
+      component: "span",
+      fontSize: "14px",
+      fontWeight: 500,
+      children: props.label
+    })
+  });
 };
-var _default = exports.default = Badge;
+export default Badge;

package/components/BusySpinner/index.js

@@ -1,49 +1,44 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BusySpinner;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _hexRgb = _interopRequireDefault(require("hex-rgb"));
-function BusySpinner(_ref) {
-  let {
-    withSkrim,
-    noBackground
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+import React from 'react';
+import { Box, CircularProgress, useTheme } from '@mui/material';
+import hexRgb from 'hex-rgb';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function BusySpinner({
+  withSkrim,
+  noBackground
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(Box, {
     sx: {
       position: 'fixed',
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
-      backgroundColor: withSkrim ? "".concat((0, _hexRgb.default)("".concat(theme.palette.TwClrBaseGray025), {
+      backgroundColor: withSkrim ? `${hexRgb(`${theme.palette.TwClrBaseGray025}`, {
         alpha: 0.6,
         format: 'css'
-      })) : 'none',
+      })}` : 'none',
       zIndex: 2000,
-      backgroundImage: noBackground ? 'none' : 'linear-gradient(180deg,' + "".concat((0, _hexRgb.default)("".concat(theme.palette.TwClrBaseGreen050), {
+      backgroundImage: noBackground ? 'none' : 'linear-gradient(180deg,' + `${hexRgb(`${theme.palette.TwClrBaseGreen050}`, {
         alpha: 0,
         format: 'css'
-      }), " 0%,") + "".concat((0, _hexRgb.default)("".concat(theme.palette.TwClrBaseGreen050), {
+      })} 0%,` + `${hexRgb(`${theme.palette.TwClrBaseGreen050}`, {
         alpha: 0.24,
         format: 'css'
-      }), " 100%)")
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: theme.spacing(5),
-    flexDirection: "column",
-    height: "100%"
-  }, /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
-    sx: {
-      color: theme.palette.TwClrIcnBrand
-    }
-  })));
+      })} 100%)`
+    },
+    children: /*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: theme.spacing(5),
+      flexDirection: "column",
+      height: "100%",
+      children: /*#__PURE__*/_jsx(CircularProgress, {
+        sx: {
+          color: theme.palette.TwClrIcnBrand
+        }
+      })
+    })
+  });
 }

package/components/Button/Button.js

@@ -1,15 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Button;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
-function Button(props) {
+import React from 'react';
+import { ButtonBase } from '@mui/material';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Button(props) {
   const {
     onClick,
     label,
@@ -25,27 +19,29 @@ function Button(props) {
     style,
     sx
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_material.ButtonBase, {
+  return /*#__PURE__*/_jsxs(ButtonBase, {
     id: id,
     onClick: onClick,
-    className: "button ".concat(type, "-").concat(priority, " button--").concat(size, " ").concat(type, "-").concat(priority, "--").concat(size, " ").concat(icon && !processing ? 'button-with-icon' : '', " ").concat(rightIcon && !processing ? 'button-with-right-icon' : '', "\n      ").concat(!label ? 'button-no-label' : '', " ").concat(className !== null && className !== void 0 ? className : ''),
+    className: `button ${type}-${priority} button--${size} ${type}-${priority}--${size} ${icon && !processing ? 'button-with-icon' : ''} ${rightIcon && !processing ? 'button-with-right-icon' : ''}
+      ${!label ? 'button-no-label' : ''} ${className ?? ''}`,
     disabled: disabled,
     style: style,
     sx: [{
       '& path': {
         fill: 'currentColor'
       }
-    }, ...(Array.isArray(sx) ? sx : [sx])]
-  }, processing && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "spinner",
-    size: size,
-    className: "icon-spinner"
-  }), !processing && icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: icon,
-    size: size
-  }), !processing && !!label && label, !processing && rightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: rightIcon,
-    size: size,
-    className: "icon-right"
-  }));
+    }, ...(Array.isArray(sx) ? sx : [sx])],
+    children: [processing && /*#__PURE__*/_jsx(Icon, {
+      name: "spinner",
+      size: size,
+      className: "icon-spinner"
+    }), !processing && icon && /*#__PURE__*/_jsx(Icon, {
+      name: icon,
+      size: size
+    }), !processing && !!label && label, !processing && rightIcon && /*#__PURE__*/_jsx(Icon, {
+      name: rightIcon,
+      size: size,
+      className: "icon-right"
+    })]
+  });
 }

package/components/Button/button.test.js

@@ -1,25 +1,23 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _Button = _interopRequireDefault(require("./Button"));
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Button from './Button';
+import { jsx as _jsx } from "react/jsx-runtime";
 test('calls onClick prop when clicked', () => {
   const handleClick = jest.fn();
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  render(/*#__PURE__*/_jsx(Button, {
     onClick: handleClick,
     label: "Click me"
   }));
-  _react2.fireEvent.click(_react2.screen.getByText(/click me/i));
+  fireEvent.click(screen.getByText(/click me/i));
   expect(handleClick).toHaveBeenCalledTimes(1);
 });
 test('should not call onClick prop when button is disabled', () => {
   const handleClick = jest.fn();
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  render(/*#__PURE__*/_jsx(Button, {
     onClick: handleClick,
     label: "Click me",
     disabled: true
   }));
-  _react2.fireEvent.click(_react2.screen.getByText(/click me/i));
+  fireEvent.click(screen.getByText(/click me/i));
   expect(handleClick).toHaveBeenCalledTimes(0);
 });

package/components/Checkbox.js

@@ -1,14 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CheckboxStyle = void 0;
-exports.default = Checkbox;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-const CheckboxStyle = theme => ({
+import React from 'react';
+import { FormControlLabel, Checkbox as MUICheckbox, useTheme } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CheckboxStyle = theme => ({
   padding: theme.spacing(0, 1, 0, 0),
   '& .MuiSvgIcon-root': {
     fill: theme.palette.TwClrBrdrSecondary
@@ -25,16 +18,14 @@ const CheckboxStyle = theme => ({
     color: theme.palette.TwClrBgSelected
   },
   '&:focus > .MuiSvgIcon-root': {
-    border: "2px solid ".concat(theme.palette.TwClrBgSelected)
+    border: `2px solid ${theme.palette.TwClrBgSelected}`
   },
   '&.Mui-disabled': {
     opacity: 0.5
   }
 });
-exports.CheckboxStyle = CheckboxStyle;
-function Checkbox(props) {
-  var _props$value;
-  const theme = (0, _material.useTheme)();
+export default function Checkbox(props) {
+  const theme = useTheme();
   const onChange = (event, checked) => {
     if (props.indeterminate) {
       props.onChange(true);
@@ -42,17 +33,17 @@ function Checkbox(props) {
     }
     props.onChange(checked);
   };
-  return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+  return /*#__PURE__*/_jsx(FormControlLabel, {
     id: props.id,
     onChange: onChange,
     label: props.label,
     disabled: props.disabled,
-    control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+    control: /*#__PURE__*/_jsx(MUICheckbox, {
       disabled: props.disabled,
       disableRipple: true,
       id: 'check-' + props.id,
       indeterminate: props.indeterminate,
-      checked: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : false,
+      checked: props.value ?? false,
       size: "medium",
       sx: [CheckboxStyle(theme), ...(Array.isArray(props.sx) ? props.sx : [props.sx])]
     }),

package/components/Confirm/index.js

@@ -1,94 +1,87 @@
-"use strict";
+import React, { useMemo } from 'react';
+import { Typography, useTheme } from '@mui/material';
+import Button from '../Button/Button';
+import DialogBox from '../DialogBox/DialogBox';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Confirm;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _DialogBox = _interopRequireDefault(require("../DialogBox/DialogBox"));
 /**
  * A generic confirm modal built on top of DialogBox.
  * Most properties are optional with default values.
  * Required properties are commented as such.
  */
-
-function Confirm(_ref) {
-  let {
-    confirmButtonDisabled,
-    confirmButtonIcon,
-    confirmButtonId,
-    confirmButtonPriority,
-    confirmButtonText,
-    confirmButtonType,
-    closeButtonId,
-    closeButtonText,
-    message,
-    onClose,
-    onConfirm,
-    open,
-    size,
-    textStyle,
-    title
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  const middleButtons = (0, _react.useMemo)(() => {
-    const buttons = [/*#__PURE__*/_react.default.createElement(_Button.default, {
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export default function Confirm({
+  confirmButtonDisabled,
+  confirmButtonIcon,
+  confirmButtonId,
+  confirmButtonPriority,
+  confirmButtonText,
+  confirmButtonType,
+  closeButtonId,
+  closeButtonText,
+  message,
+  onClose,
+  onConfirm,
+  open,
+  size,
+  textStyle,
+  title
+}) {
+  const theme = useTheme();
+  const middleButtons = useMemo(() => {
+    const buttons = [/*#__PURE__*/_jsx(Button, {
       disabled: confirmButtonDisabled,
       icon: confirmButtonIcon,
       id: confirmButtonId || 'confirm-submit',
-      key: "button-2",
       label: confirmButtonText,
       onClick: onConfirm,
       priority: confirmButtonPriority || 'primary',
       type: confirmButtonType || 'productive'
-    })];
+    }, 'button-2')];
     if (onClose && closeButtonText) {
-      buttons.unshift(/*#__PURE__*/_react.default.createElement(_Button.default, {
+      buttons.unshift(/*#__PURE__*/_jsx(Button, {
         id: closeButtonId || 'confirm-close',
-        key: "button-1",
         label: closeButtonText,
         onClick: onClose,
         priority: "secondary",
         type: "passive"
-      }));
+      }, 'button-1'));
     }
     return buttons;
   }, [confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, onClose, onConfirm]);
-  const content = (0, _react.useMemo)(() => {
+  const content = useMemo(() => {
     const text = (str, key) => {
-      return /*#__PURE__*/_react.default.createElement(_material.Typography, {
+      return /*#__PURE__*/_jsx(Typography, {
         color: theme.palette.TwClrTxt,
         fontSize: "16px",
         fontWeight: 400,
-        key: key,
         lineHeight: "24px",
         textAlign: "center",
-        sx: (0, _objectSpread2.default)({
+        sx: {
           marginBottom: theme.spacing(1),
           '&:last-child': {
             marginBottom: 0
-          }
-        }, textStyle || {})
-      }, str);
+          },
+          ...(textStyle || {})
+        },
+        children: str
+      }, key);
     };
     if (typeof message === 'string') {
       return text(message);
     } else if (Array.isArray(message)) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.map((str, i) => text(str, "".concat(str, "_").concat(i))));
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: message.map((str, i) => text(str, `${str}_${i}`))
+      });
     } else {
       return message;
     }
   }, [message, textStyle, theme]);
-  return /*#__PURE__*/_react.default.createElement(_DialogBox.default, {
+  return /*#__PURE__*/_jsx(DialogBox, {
     onClose: onClose,
-    open: open !== null && open !== void 0 ? open : true,
+    open: open ?? true,
     title: title,
     size: size || 'medium',
-    middleButtons: middleButtons
-  }, content);
+    middleButtons: middleButtons,
+    children: content
+  });
 }