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

package/components/FormBottomBar/index.js

@@ -9,62 +9,51 @@ var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _styles = require("@mui/styles");
-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';
-      }
-    }
-  };
-});
+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'
+  }
+}));
 function FormBottomBar(_ref) {
-  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
+  let {
+    cancelID,
+    saveID,
+    onCancel,
+    cancelButtonText,
+    saveButtonText,
+    saveDisabled,
+    onSave,
+    additionalRightButtons
+  } = _ref;
+  const {
+    isMobile,
+    isDesktop
+  } = (0, _useDeviceInfo.default)();
+  const classes = useStyles({
+    isMobile,
+    isDesktop
   });
   return /*#__PURE__*/_react.default.createElement(_material.AppBar, {
     position: "fixed",
@@ -86,19 +75,17 @@ function FormBottomBar(_ref) {
     className: classes.button
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.rightButtonGroup
-  }, 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, {
+  }, 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, {
     id: saveID || 'saveBottomBar',
     size: "medium",
     label: saveButtonText,

package/components/Icon/Icon.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { Size } from '../Size';
 import { IconName } from './icons';
 import './styles.scss';
@@ -6,7 +7,7 @@ export interface Props {
     fillColor?: string;
     name: IconName;
     size?: Size;
-    style?: Record<string, unknown>;
+    style?: CSSProperties;
 }
 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":"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"}
+{"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"}

package/components/Icon/Icon.js

@@ -9,28 +9,25 @@ var _react = _interopRequireDefault(require("react"));
 var _styles = require("@mui/styles");
 var _icons = _interopRequireDefault(require("./icons"));
 require("./styles.scss");
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    icon: {
-      '& path': {
-        fill: function fill(props) {
-          return props.fillColor;
-        }
-      }
+const useStyles = (0, _styles.makeStyles)(() => ({
+  icon: {
+    '& path': {
+      fill: props => props.fillColor
     }
-  };
-});
+  }
+}));
 function Icon(_ref) {
-  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
+  let {
+    size = 'small',
+    name,
+    className,
+    fillColor,
+    style
+  } = _ref;
+  const classes = useStyles({
+    fillColor
   });
-  var SVGComponent = _icons.default[name];
+  const 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"));
-var icons = {
+const icons = {
   blobbyGrayIconImage: _BlobbyGrayIconImage.default,
   blobbyGrayIconImport: _BlobbyGrayIconImport.default,
   blobbyGrayIconUploadToTheCloud: _BlobbyGrayIconUploadToTheCloud.default,
@@ -208,5 +208,4 @@ var icons = {
   warning: _Warning.default,
   wifi: _IconWifi.default
 };
-var _default = icons;
-exports.default = _default;
+var _default = exports.default = icons;

package/components/IconTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <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,55 +5,48 @@ 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");
-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
-      }
+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
     }
-  };
-});
+  }
+}));
 function IconTooltip(_ref) {
-  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
+  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 handleTooltipClose = function handleTooltipClose() {
+  const handleTooltipClose = () => {
     setOpen(false);
   };
-  var handleTooltipOpen = function handleTooltipOpen() {
+  const handleTooltipOpen = () => {
     setOpen(true);
   };
   return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {

package/components/Message/Message.d.ts

@@ -1,3 +1,4 @@
+/// <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,23 +5,25 @@ 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) {
-  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;
+  const {
+    type,
+    priority,
+    title,
+    body,
+    actionText,
+    actionHandler,
+    pageButtons,
+    showCloseButton,
+    onClose
+  } = props;
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
   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", {
@@ -42,13 +44,15 @@ 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(function (pageButton, index) {
-    var pageButtonWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton), {}, {
+  }, pageButtons === null || pageButtons === void 0 ? void 0 : pageButtons.map((pageButton, index) => {
+    const pageButtonWithKey = {
+      ...pageButton,
       key: "page-button-".concat(index),
-      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton.props), {}, {
+      props: {
+        ...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,24 +4,18 @@ 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', function () {
+test('show options when placeholder is clicked', () => {
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
-    onAdd: function onAdd() {
-      return undefined;
-    },
-    onRemove: function onRemove() {
-      return undefined;
-    },
+    onAdd: () => undefined,
+    onRemove: () => undefined,
     options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
-    valueRenderer: function valueRenderer(v) {
-      return v;
-    },
+    valueRenderer: v => v,
     selectedOptions: [],
     placeHolder: "Select..."
   }));
 
   // we should find the placeholder text
-  var placeHolder = _react.screen.getByText('Select...');
+  const placeHolder = _react.screen.getByText('Select...');
   expect(placeHolder).toBeInTheDocument();
 
   // we should not find the options yet
@@ -37,43 +31,35 @@ test('show options when placeholder is clicked', function () {
   expect(_react.screen.queryByText('bar')).toBeInTheDocument();
   expect(_react.screen.queryByText('baz')).toBeInTheDocument();
 });
-test('clicking an option calls the onAdd handler', function () {
-  var handleAdd = jest.fn();
+test('clicking an option calls the onAdd handler', () => {
+  const handleAdd = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
     onAdd: handleAdd,
-    onRemove: function onRemove() {
-      return undefined;
-    },
+    onRemove: () => undefined,
     options: new Map([[1, 'foo'], [2, 'bar'], [3, 'baz']]),
-    valueRenderer: function valueRenderer(v) {
-      return v;
-    },
+    valueRenderer: v => v,
     selectedOptions: [],
     placeHolder: "Select..."
   }));
 
   // click the dropdown chevron
-  var dropdown = _react.screen.getByLabelText('show-options');
+  const dropdown = _react.screen.getByLabelText('show-options');
   _react.fireEvent.click(dropdown);
 
   // click one of the options
-  var option = _react.screen.getByText('bar');
+  const 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', function () {
-  var handleRemove = jest.fn();
+test('clicking the pill remove button calls the onRemove handler', () => {
+  const handleRemove = jest.fn();
   (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
-    onAdd: function onAdd() {
-      return undefined;
-    },
+    onAdd: () => undefined,
     onRemove: handleRemove,
     options: new Map([[1, 'foo']]),
-    valueRenderer: function valueRenderer(v) {
-      return v;
-    },
+    valueRenderer: v => v,
     selectedOptions: [1]
   }));
 
@@ -81,7 +67,7 @@ test('clicking the pill remove button calls the onRemove handler', function () {
   expect(_react.screen.queryByText('foo')).toBeInTheDocument();
 
   // click the remove button
-  var removeButton = _react.screen.getByLabelText('remove');
+  const removeButton = _react.screen.getByLabelText('remove');
   _react.fireEvent.click(removeButton);
 
   // handleRemove should have been called with id 1

package/components/MultiSelect/index.d.ts

@@ -1,3 +1,4 @@
+/// <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,70 +1,62 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _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) {
-  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;
-    });
+  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);
     if (props.onFocus) {
       props.onFocus();
     }
   };
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (optionsVisible !== undefined) {
       setOpenedOptions(optionsVisible);
     }
   }, [optionsVisible]);
-  var onBlurHandler = function onBlurHandler() {
+  const onBlurHandler = () => {
     setOpenedOptions(false);
     if (props.onBlur) {
       props.onBlur();
     }
   };
-  var unselectedOptions = Array.from(options.keys()).filter(function (key) {
-    return !selectedOptions.includes(key);
-  });
-  var valuesPillData = selectedOptions.map(function (item) {
-    var value = options.get(item);
+  const unselectedOptions = Array.from(options.keys()).filter(key => !selectedOptions.includes(key));
+  const valuesPillData = selectedOptions.map(item => {
+    const value = options.get(item);
     return {
       id: item,
       value: value ? valueRenderer(value) : missingValuePlaceholder || ''
     };
-  }).filter(function (data) {
-    return data.value;
-  });
+  }).filter(data => data.value);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "multi-select ".concat(className)
   }, label && /*#__PURE__*/_react.default.createElement("label", {
@@ -97,14 +89,12 @@ function MultiSelect(props) {
     className: "multi-select__options-container"
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: 'multi-select__options'
-  }, unselectedOptions.map(function (optionKey, index) {
-    var optionValue = options.get(optionKey);
+  }, unselectedOptions.map((optionKey, index) => {
+    const optionValue = options.get(optionKey);
     return /*#__PURE__*/_react.default.createElement("li", {
       key: index,
       className: "select-value",
-      onClick: function onClick() {
-        return onAdd(optionKey);
-      }
+      onClick: () => onAdd(optionKey)
     }, optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || '');
   })))), helperText && /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id,

package/components/Navbar/NavFooter.js

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