@terraware/web-components 2.14.1-rc.1001 → 2.14.1-rc.2

package/components/FormBottomBar/index.js

@@ -9,51 +9,62 @@ var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _styles = require("@mui/styles");
-var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  bottomBar: {
-    background: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray025, "00,") + "".concat(theme.palette.TwClrBaseGray025, "80, ").concat(theme.palette.TwClrBaseGray025, "80,") + "".concat(theme.palette.TwClrBaseGray025, "00)"),
-    backdropFilter: 'blur(16px)',
-    borderTop: '1px solid',
-    borderImage: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray300, "00,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "FF,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "00) 1"),
-    boxShadow: 'none',
-    justifyContent: 'space-between',
-    display: 'flex',
-    flexDirection: props => props.isMobile ? 'column-reverse' : 'row',
-    padding: props => props.isDesktop ? '16px 24px' : "16px 24px ".concat(theme.spacing(5)),
-    width: props => props.isDesktop ? 'calc(100% - 200px)' : '100%',
-    zIndex: 1000
-  },
-  button: {
-    marginTop: props => props.isMobile ? theme.spacing(1) : 'auto'
-  },
-  rightButtons: {
-    marginTop: props => props.isMobile ? theme.spacing(1) : 'auto',
-    marginRight: theme.spacing(1)
-  },
-  rightButtonGroup: {
-    display: 'flex',
-    flexDirection: props => props.isMobile ? 'column-reverse' : 'row'
-  }
-}));
+var _useDeviceInfo2 = _interopRequireDefault(require("../../utils/useDeviceInfo"));
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    bottomBar: {
+      background: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray025, "00,") + "".concat(theme.palette.TwClrBaseGray025, "80, ").concat(theme.palette.TwClrBaseGray025, "80,") + "".concat(theme.palette.TwClrBaseGray025, "00)"),
+      backdropFilter: 'blur(16px)',
+      borderTop: '1px solid',
+      borderImage: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray300, "00,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "FF,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "00) 1"),
+      boxShadow: 'none',
+      justifyContent: 'space-between',
+      display: 'flex',
+      flexDirection: function flexDirection(props) {
+        return props.isMobile ? 'column-reverse' : 'row';
+      },
+      padding: function padding(props) {
+        return props.isDesktop ? '16px 24px' : "16px 24px ".concat(theme.spacing(5));
+      },
+      width: function width(props) {
+        return props.isDesktop ? 'calc(100% - 200px)' : '100%';
+      },
+      zIndex: 1000
+    },
+    button: {
+      marginTop: function marginTop(props) {
+        return props.isMobile ? theme.spacing(1) : 'auto';
+      }
+    },
+    rightButtons: {
+      marginTop: function marginTop(props) {
+        return props.isMobile ? theme.spacing(1) : 'auto';
+      },
+      marginRight: theme.spacing(1)
+    },
+    rightButtonGroup: {
+      display: 'flex',
+      flexDirection: function flexDirection(props) {
+        return props.isMobile ? 'column-reverse' : 'row';
+      }
+    }
+  };
+});
 function FormBottomBar(_ref) {
-  let {
-    cancelID,
-    saveID,
-    onCancel,
-    cancelButtonText,
-    saveButtonText,
-    saveDisabled,
-    onSave,
-    additionalRightButtons
-  } = _ref;
-  const {
-    isMobile,
-    isDesktop
-  } = (0, _useDeviceInfo.default)();
-  const classes = useStyles({
-    isMobile,
-    isDesktop
+  var cancelID = _ref.cancelID,
+    saveID = _ref.saveID,
+    onCancel = _ref.onCancel,
+    cancelButtonText = _ref.cancelButtonText,
+    saveButtonText = _ref.saveButtonText,
+    saveDisabled = _ref.saveDisabled,
+    onSave = _ref.onSave,
+    additionalRightButtons = _ref.additionalRightButtons;
+  var _useDeviceInfo = (0, _useDeviceInfo2.default)(),
+    isMobile = _useDeviceInfo.isMobile,
+    isDesktop = _useDeviceInfo.isDesktop;
+  var classes = useStyles({
+    isMobile: isMobile,
+    isDesktop: isDesktop
   });
   return /*#__PURE__*/_react.default.createElement(_material.AppBar, {
     position: "fixed",
@@ -75,17 +86,19 @@ function FormBottomBar(_ref) {
     className: classes.button
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.rightButtonGroup
-  }, additionalRightButtons && additionalRightButtons.map(btn => /*#__PURE__*/_react.default.createElement(_Button.default, {
-    id: btn.id,
-    key: btn.id,
-    priority: btn.buttonPriority,
-    type: btn.buttonType,
-    size: "medium",
-    label: btn.text,
-    onClick: btn.onClick,
-    className: classes.rightButtons,
-    disabled: btn.disabled
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, additionalRightButtons && additionalRightButtons.map(function (btn) {
+    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+      id: btn.id,
+      key: btn.id,
+      priority: btn.buttonPriority,
+      type: btn.buttonType,
+      size: "medium",
+      label: btn.text,
+      onClick: btn.onClick,
+      className: classes.rightButtons,
+      disabled: btn.disabled
+    });
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: saveID || 'saveBottomBar',
     size: "medium",
     label: saveButtonText,

package/components/Icon/Icon.d.ts

@@ -1,4 +1,3 @@
-import { CSSProperties } from 'react';
 import { Size } from '../Size';
 import { IconName } from './icons';
 import './styles.scss';
@@ -7,7 +6,7 @@ export interface Props {
     fillColor?: string;
     name: IconName;
     size?: Size;
-    style?: CSSProperties;
+    style?: Record<string, unknown>;
 }
 export default function Icon({ size, name, className, fillColor, style }: Props): JSX.Element;
 //# sourceMappingURL=Icon.d.ts.map

package/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAc,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,eAAe,CAAC;AAcvB,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,IAAc,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAUtG"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAc,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,eAAe,CAAC;AAcvB,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,IAAc,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAUtG"}

package/components/Icon/Icon.js

@@ -9,25 +9,28 @@ var _react = _interopRequireDefault(require("react"));
 var _styles = require("@mui/styles");
 var _icons = _interopRequireDefault(require("./icons"));
 require("./styles.scss");
-const useStyles = (0, _styles.makeStyles)(() => ({
-  icon: {
-    '& path': {
-      fill: props => props.fillColor
+var useStyles = (0, _styles.makeStyles)(function () {
+  return {
+    icon: {
+      '& path': {
+        fill: function fill(props) {
+          return props.fillColor;
+        }
+      }
     }
-  }
-}));
+  };
+});
 function Icon(_ref) {
-  let {
-    size = 'small',
-    name,
-    className,
-    fillColor,
-    style
-  } = _ref;
-  const classes = useStyles({
-    fillColor
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    name = _ref.name,
+    className = _ref.className,
+    fillColor = _ref.fillColor,
+    style = _ref.style;
+  var classes = useStyles({
+    fillColor: fillColor
   });
-  const SVGComponent = _icons.default[name];
+  var SVGComponent = _icons.default[name];
   return /*#__PURE__*/_react.default.createElement(SVGComponent, {
     className: "tw-icon tw-icon--".concat(size, " ").concat(className !== null && className !== void 0 ? className : '', " ").concat(fillColor ? classes.icon : ''),
     style: style

package/components/Icon/icons/index.js

@@ -105,7 +105,7 @@ var _UploadCloud = _interopRequireDefault(require("../../svg/UploadCloud"));
 var _Warning = _interopRequireDefault(require("../../svg/Warning"));
 var _IconWifi = _interopRequireDefault(require("../../svg/IconWifi"));
 var _IconMarker = _interopRequireDefault(require("../../svg/IconMarker"));
-const icons = {
+var icons = {
   blobbyGrayIconImage: _BlobbyGrayIconImage.default,
   blobbyGrayIconImport: _BlobbyGrayIconImport.default,
   blobbyGrayIconUploadToTheCloud: _BlobbyGrayIconUploadToTheCloud.default,
@@ -208,4 +208,5 @@ const icons = {
   warning: _Warning.default,
   wifi: _IconWifi.default
 };
-var _default = exports.default = icons;
+var _default = icons;
+exports.default = _default;

package/components/IconTooltip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from '@mui/material';
 import { IconName } from '../Icon/icons';
 export type IconTooltipProps = {

package/components/IconTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconTooltip/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAkB,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2BzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAiB,EACjB,SAAuB,EACvB,KAAK,EACL,kBAAkB,GACnB,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiChC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconTooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2BzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAiB,EACjB,SAAuB,EACvB,KAAK,EACL,kBAAkB,GACnB,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiChC"}

package/components/IconTooltip/index.js

@@ -5,48 +5,55 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = IconTooltip;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _utils = require("../../utils");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  arrow: {
-    color: theme.palette.TwClrBaseGray800
-  },
-  icon: {
-    fill: theme.palette.TwClrIcnSecondary,
-    marginLeft: '4px',
-    marginRight: props => props.disableRightMargin ? '0px' : '4px',
-    verticalAlign: 'text-top'
-  },
-  tooltip: {
-    backgroundColor: theme.palette.TwClrBaseGray800,
-    color: theme.palette.TwClrBaseWhite,
-    padding: '8px',
-    '& a': {
-      color: theme.palette.TwClrBaseWhite
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    arrow: {
+      color: theme.palette.TwClrBaseGray800
+    },
+    icon: {
+      fill: theme.palette.TwClrIcnSecondary,
+      marginLeft: '4px',
+      marginRight: function marginRight(props) {
+        return props.disableRightMargin ? '0px' : '4px';
+      },
+      verticalAlign: 'text-top'
+    },
+    tooltip: {
+      backgroundColor: theme.palette.TwClrBaseGray800,
+      color: theme.palette.TwClrBaseWhite,
+      padding: '8px',
+      '& a': {
+        color: theme.palette.TwClrBaseWhite
+      }
     }
-  }
-}));
+  };
+});
 function IconTooltip(_ref) {
-  let {
-    iconName = 'info',
-    placement = 'top-start',
-    title,
-    disableRightMargin
-  } = _ref;
-  const [open, setOpen] = _react.default.useState(false);
-  const {
-    isMobile
-  } = (0, _utils.useDeviceInfo)();
-  const classes = useStyles({
-    disableRightMargin
+  var _ref$iconName = _ref.iconName,
+    iconName = _ref$iconName === void 0 ? 'info' : _ref$iconName,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top-start' : _ref$placement,
+    title = _ref.title,
+    disableRightMargin = _ref.disableRightMargin;
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
+    isMobile = _useDeviceInfo.isMobile;
+  var classes = useStyles({
+    disableRightMargin: disableRightMargin
   });
-  const handleTooltipClose = () => {
+  var handleTooltipClose = function handleTooltipClose() {
     setOpen(false);
   };
-  const handleTooltipOpen = () => {
+  var handleTooltipOpen = function handleTooltipOpen() {
     setOpen(true);
   };
   return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {

package/components/Message/Message.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './styles.scss';
 export interface Props {
     type: 'page' | 'toast';

package/components/Message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAIvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkDhE"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AACA,OAAO,eAAe,CAAC;AAIvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkDhE"}

package/components/Message/Message.js

@@ -5,25 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Message;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _utils = require("../../utils");
 function Message(props) {
-  const {
-    type,
-    priority,
-    title,
-    body,
-    actionText,
-    actionHandler,
-    pageButtons,
-    showCloseButton,
-    onClose
-  } = props;
-  const {
-    isMobile
-  } = (0, _utils.useDeviceInfo)();
+  var type = props.type,
+    priority = props.priority,
+    title = props.title,
+    body = props.body,
+    actionText = props.actionText,
+    actionHandler = props.actionHandler,
+    pageButtons = props.pageButtons,
+    showCloseButton = props.showCloseButton,
+    onClose = props.onClose;
+  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
+    isMobile = _useDeviceInfo.isMobile;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "tw-message tw-message--".concat(type, " tw-message--").concat(priority, " ").concat(isMobile ? 'tw-message--mobile' : '')
   }, type === 'toast' && /*#__PURE__*/_react.default.createElement("div", {
@@ -44,15 +42,13 @@ function Message(props) {
     className: "tw-message--title-container"
   }, /*#__PURE__*/_react.default.createElement("h4", null, title)), typeof body === 'string' ? /*#__PURE__*/_react.default.createElement("p", null, body) : body, type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
     className: "tw-message--actions-container"
-  }, pageButtons === null || pageButtons === void 0 ? void 0 : pageButtons.map((pageButton, index) => {
-    const pageButtonWithKey = {
-      ...pageButton,
+  }, pageButtons === null || pageButtons === void 0 ? void 0 : pageButtons.map(function (pageButton, index) {
+    var pageButtonWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton), {}, {
       key: "page-button-".concat(index),
-      props: {
-        ...pageButton.props,
+      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton.props), {}, {
         size: pageButton.props.size || 'medium'
-      }
-    };
+      })
+    });
     return pageButtonWithKey;
   })) : null)), type === 'toast' && actionText ? /*#__PURE__*/_react.default.createElement("button", {
     onClick: actionHandler,

package/components/MultiSelect/MultiSelect.test.js

@@ -4,18 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require("."));
-test('show options when placeholder is clicked', () => {
+test('show options when placeholder is clicked', function () {
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
-    onAdd: () => undefined,
-    onRemove: () => undefined,
+    onAdd: function onAdd() {
+      return undefined;
+    },
+    onRemove: function onRemove() {
+      return undefined;
+    },
     options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
-    valueRenderer: v => v,
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
     selectedOptions: [],
     placeHolder: "Select..."
   }));
 
   // we should find the placeholder text
-  const placeHolder = _react.screen.getByText('Select...');
+  var placeHolder = _react.screen.getByText('Select...');
   expect(placeHolder).toBeInTheDocument();
 
   // we should not find the options yet
@@ -31,35 +37,43 @@ test('show options when placeholder is clicked', () => {
   expect(_react.screen.queryByText('bar')).toBeInTheDocument();
   expect(_react.screen.queryByText('baz')).toBeInTheDocument();
 });
-test('clicking an option calls the onAdd handler', () => {
-  const handleAdd = jest.fn();
+test('clicking an option calls the onAdd handler', function () {
+  var handleAdd = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
     onAdd: handleAdd,
-    onRemove: () => undefined,
+    onRemove: function onRemove() {
+      return undefined;
+    },
     options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
-    valueRenderer: v => v,
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
     selectedOptions: [],
     placeHolder: "Select..."
   }));
 
   // click the dropdown chevron
-  const dropdown = _react.screen.getByLabelText('show-options');
+  var dropdown = _react.screen.getByLabelText('show-options');
   _react.fireEvent.click(dropdown);
 
   // click one of the options
-  const option = _react.screen.getByText('bar');
+  var option = _react.screen.getByText('bar');
   _react.fireEvent.click(option);
 
   // addHandler should have been called with id 2
   expect(handleAdd).toBeCalledWith(2);
 });
-test('clicking the pill remove button calls the onRemove handler', () => {
-  const handleRemove = jest.fn();
+test('clicking the pill remove button calls the onRemove handler', function () {
+  var handleRemove = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
-    onAdd: () => undefined,
+    onAdd: function onAdd() {
+      return undefined;
+    },
     onRemove: handleRemove,
     options: new Map([[1, 'foo']]),
-    valueRenderer: v => v,
+    valueRenderer: function valueRenderer(v) {
+      return v;
+    },
     selectedOptions: [1]
   }));
 
@@ -67,7 +81,7 @@ test('clicking the pill remove button calls the onRemove handler', () => {
   expect(_react.screen.queryByText('foo')).toBeInTheDocument();
 
   // click the remove button
-  const removeButton = _react.screen.getByLabelText('remove');
+  var removeButton = _react.screen.getByLabelText('remove');
   _react.fireEvent.click(removeButton);
 
   // handleRemove should have been called with id 1

package/components/MultiSelect/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './styles.scss';
 import { TooltipProps } from '@mui/material';
 export type MultiSelectProps<K, V> = {

package/components/MultiSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA0GpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA0GpF"}

package/components/MultiSelect/index.js

@@ -1,62 +1,70 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = MultiSelect;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 require("./styles.scss");
 var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _PillList = _interopRequireDefault(require("../PillList"));
 function MultiSelect(props) {
-  const {
-    className,
-    disabled,
-    fullWidth,
-    helperText,
-    id,
-    label,
-    missingValuePlaceholder,
-    onAdd,
-    onRemove,
-    onPillClick,
-    options,
-    optionsVisible,
-    pillListClassName,
-    placeHolder,
-    selectedOptions,
-    tooltipTitle,
-    valueRenderer
-  } = props;
-  const [openedOptions, setOpenedOptions] = (0, _react.useState)(false);
-  const toggleOptions = () => {
-    setOpenedOptions(isOpen => !isOpen && !disabled);
+  var className = props.className,
+    disabled = props.disabled,
+    fullWidth = props.fullWidth,
+    helperText = props.helperText,
+    id = props.id,
+    label = props.label,
+    missingValuePlaceholder = props.missingValuePlaceholder,
+    onAdd = props.onAdd,
+    onRemove = props.onRemove,
+    onPillClick = props.onPillClick,
+    options = props.options,
+    optionsVisible = props.optionsVisible,
+    pillListClassName = props.pillListClassName,
+    placeHolder = props.placeHolder,
+    selectedOptions = props.selectedOptions,
+    tooltipTitle = props.tooltipTitle,
+    valueRenderer = props.valueRenderer;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    openedOptions = _useState2[0],
+    setOpenedOptions = _useState2[1];
+  var toggleOptions = function toggleOptions() {
+    setOpenedOptions(function (isOpen) {
+      return !isOpen && !disabled;
+    });
     if (props.onFocus) {
       props.onFocus();
     }
   };
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (optionsVisible !== undefined) {
       setOpenedOptions(optionsVisible);
     }
   }, [optionsVisible]);
-  const onBlurHandler = () => {
+  var onBlurHandler = function onBlurHandler() {
     setOpenedOptions(false);
     if (props.onBlur) {
       props.onBlur();
     }
   };
-  const unselectedOptions = Array.from(options.keys()).filter(key => !selectedOptions.includes(key));
-  const valuesPillData = selectedOptions.map(item => {
-    const value = options.get(item);
+  var unselectedOptions = Array.from(options.keys()).filter(function (key) {
+    return !selectedOptions.includes(key);
+  });
+  var valuesPillData = selectedOptions.map(function (item) {
+    var value = options.get(item);
     return {
       id: item,
       value: value ? valueRenderer(value) : missingValuePlaceholder || ''
     };
-  }).filter(data => data.value);
+  }).filter(function (data) {
+    return data.value;
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "multi-select ".concat(className)
   }, label && /*#__PURE__*/_react.default.createElement("label", {
@@ -89,12 +97,14 @@ function MultiSelect(props) {
     className: "multi-select__options-container"
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: 'multi-select__options'
-  }, unselectedOptions.map((optionKey, index) => {
-    const optionValue = options.get(optionKey);
+  }, unselectedOptions.map(function (optionKey, index) {
+    var optionValue = options.get(optionKey);
     return /*#__PURE__*/_react.default.createElement("li", {
       key: index,
       className: "select-value",
-      onClick: () => onAdd(optionKey)
+      onClick: function onClick() {
+        return onAdd(optionKey);
+      }
     }, optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || '');
   })))), helperText && /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id,

package/components/Navbar/NavFooter.js

@@ -8,9 +8,7 @@ exports.default = NavFooter;
 var _react = _interopRequireDefault(require("react"));
 require("./styles.scss");
 function NavFooter(props) {
-  const {
-    children
-  } = props;
+  var children = props.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "nav-footer"
   }, children);