@terraware/web-components 2.16.3 → 2.16.4-rc.0

package/components/Note.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface Props {
     children: string;
 }

package/components/Note.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/components/Note.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQ7D"}
+{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/components/Note.tsx"],"names":[],"mappings":";AAaA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQ7D"}

package/components/Note.js

@@ -8,19 +8,19 @@ exports.default = Note;
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _react = _interopRequireDefault(require("react"));
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    note: {
-      borderRadius: 8,
-      backgroundColor: theme.palette.neutral[200],
-      marginBottom: theme.spacing(3),
-      padding: theme.spacing(2)
-    }
-  };
-});
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  note: {
+    borderRadius: 8,
+    backgroundColor: theme.palette.neutral[200],
+    marginBottom: theme.spacing(3),
+    padding: theme.spacing(2)
+  }
+}));
 function Note(_ref) {
-  var children = _ref.children;
-  var classes = useStyles();
+  let {
+    children
+  } = _ref;
+  const classes = useStyles();
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     className: classes.note
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {

package/components/PageForm/index.js

@@ -6,50 +6,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = PageForm;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _useDeviceInfo2 = _interopRequireDefault(require("../../utils/useDeviceInfo"));
+var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
 var _FormBottomBar = _interopRequireDefault(require("../FormBottomBar"));
 var _BusySpinner = _interopRequireDefault(require("../BusySpinner"));
-var _excluded = ["children", "className", "hideEdit", "onSave"];
 function PageForm(props) {
-  var children = props.children,
-    className = props.className,
-    hideEdit = props.hideEdit,
-    onSave = props.onSave,
-    bottomBarProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var theme = (0, _material.useTheme)();
-  var _useDeviceInfo = (0, _useDeviceInfo2.default)(),
-    isMobile = _useDeviceInfo.isMobile;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    processing = _useState2[0],
-    setProcessing = _useState2[1];
-  var handleSave = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setProcessing(true);
-            _context.next = 3;
-            return onSave();
-          case 3:
-            // <-- we want all onSaves to be async
-            setProcessing(false);
-          case 4:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function handleSave() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+  const {
+    children,
+    className,
+    hideEdit,
+    onSave,
+    ...bottomBarProps
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const {
+    isMobile
+  } = (0, _useDeviceInfo.default)();
+  const [processing, setProcessing] = (0, _react.useState)(false);
+  const handleSave = async () => {
+    setProcessing(true);
+    await onSave(); // <-- we want all onSaves to be async
+    setProcessing(false);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, processing && /*#__PURE__*/_react.default.createElement(_BusySpinner.default, {
     withSkrim: true
   }), /*#__PURE__*/_react.default.createElement(_material.Box, {

package/components/PhotoChooser/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type PhotoChooserErrorType = {
     title: string;
     text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotoChooser/index.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAyBF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA6G1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotoChooser/index.tsx"],"names":[],"mappings":";AASA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAyBF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA6G1E"}

package/components/PhotoChooser/index.js

@@ -1,13 +1,11 @@
 "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 = PhotoChooser;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
@@ -15,77 +13,68 @@ var _utils = require("../../utils");
 var _ErrorBox = _interopRequireDefault(require("../ErrorBox/ErrorBox"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _FileChooser = _interopRequireDefault(require("../FileChooser"));
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    removePhoto: {
-      position: 'absolute',
-      top: -10,
-      right: -10,
-      backgroundColor: theme.palette.TwClrBgDanger
-    },
-    error: {
-      width: 'auto',
-      marginBottom: theme.spacing(2),
-      '&.mobile': {
-        width: 'auto'
-      }
-    },
-    thumbnail: {
-      margin: 'auto auto',
-      objectFit: 'contain',
-      display: 'flex',
-      maxWidth: '120px',
-      maxHeight: '120px'
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  removePhoto: {
+    position: 'absolute',
+    top: -10,
+    right: -10,
+    backgroundColor: theme.palette.TwClrBgDanger
+  },
+  error: {
+    width: 'auto',
+    marginBottom: theme.spacing(2),
+    '&.mobile': {
+      width: 'auto'
     }
-  };
-});
+  },
+  thumbnail: {
+    margin: 'auto auto',
+    objectFit: 'contain',
+    display: 'flex',
+    maxWidth: '120px',
+    maxHeight: '120px'
+  }
+}));
 function PhotoChooser(props) {
-  var title = props.title,
-    description = props.description,
-    onPhotosChanged = props.onPhotosChanged,
-    multipleSelection = props.multipleSelection,
-    error = props.error,
-    selectedFile = props.selectedFile,
-    uploadText = props.uploadText,
-    uploadMobileDescription = props.uploadMobileDescription,
-    uploadDescription = props.uploadDescription,
-    photoSelectedText = props.photoSelectedText,
-    chooseFileText = props.chooseFileText,
-    replaceFileText = props.replaceFileText,
-    maxPhotos = props.maxPhotos;
-  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
-    isMobile = _useDeviceInfo.isMobile;
-  var classes = useStyles();
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    files = _useState2[0],
-    setFiles = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    filesData = _useState4[0],
-    setFilesData = _useState4[1];
-  var divRef = (0, _react.useRef)(null);
-  var theme = (0, _material.useTheme)();
-  var removeFileAtIndex = function removeFileAtIndex(index) {
-    var filesList = (0, _toConsumableArray2.default)(files);
+  const {
+    title,
+    description,
+    onPhotosChanged,
+    multipleSelection,
+    error,
+    selectedFile,
+    uploadText,
+    uploadMobileDescription,
+    uploadDescription,
+    photoSelectedText,
+    chooseFileText,
+    replaceFileText,
+    maxPhotos
+  } = props;
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
+  const classes = useStyles();
+  const [files, setFiles] = (0, _react.useState)([]);
+  const [filesData, setFilesData] = (0, _react.useState)([]);
+  const divRef = (0, _react.useRef)(null);
+  const theme = (0, _material.useTheme)();
+  const removeFileAtIndex = index => {
+    const filesList = [...files];
     filesList.splice(index, 1);
     setFiles(filesList);
   };
-  var onChoosingFiles = function onChoosingFiles() {
+  const onChoosingFiles = () => {
     var _divRef$current;
     (_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.focus();
   };
-  (0, _react.useEffect)(function () {
-    var filesDataList = files.map(function (file) {
-      return URL.createObjectURL(file);
-    });
+  (0, _react.useEffect)(() => {
+    const filesDataList = files.map(file => URL.createObjectURL(file));
     setFilesData(filesDataList);
     onPhotosChanged(files);
-    return function () {
+    return () => {
       // we need to clean this up to avoid a memory leak
-      filesDataList.forEach(function (fileData) {
-        return URL.revokeObjectURL(fileData);
-      });
+      filesDataList.forEach(fileData => URL.revokeObjectURL(fileData));
     };
   }, [files]);
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
@@ -104,11 +93,9 @@ function PhotoChooser(props) {
     fontWeight: 400,
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(2)
-  }, Array.isArray(description) ? description.map(function (txt, i) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: i
-    }, txt);
-  }) : description), error && /*#__PURE__*/_react.default.createElement(_ErrorBox.default, {
+  }, Array.isArray(description) ? description.map((txt, i) => /*#__PURE__*/_react.default.createElement("div", {
+    key: i
+  }, txt)) : description), error && /*#__PURE__*/_react.default.createElement(_ErrorBox.default, {
     title: error.title,
     text: error.text,
     className: classes.error
@@ -117,7 +104,7 @@ function PhotoChooser(props) {
     flexDirection: "row",
     flexWrap: "wrap",
     marginBottom: theme.spacing(2)
-  }, filesData.map(function (fileData, index) {
+  }, filesData.map((fileData, index) => {
     var _files$index;
     return /*#__PURE__*/_react.default.createElement(_material.Box, {
       key: index,
@@ -129,9 +116,7 @@ function PhotoChooser(props) {
       border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
     }, /*#__PURE__*/_react.default.createElement(_Button.default, {
       icon: "iconTrashCan",
-      onClick: function onClick() {
-        return removeFileAtIndex(index);
-      },
+      onClick: () => removeFileAtIndex(index),
       size: "small",
       className: classes.removePhoto
     }), /*#__PURE__*/_react.default.createElement("img", {

package/components/Pill/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './styles.scss';
 type PillProps<IdType> = {
     id: IdType;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AAEvB,KAAK,SAAS,CAAC,MAAM,IAAI;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CA+B1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pill/index.tsx"],"names":[],"mappings":";AAGA,OAAO,eAAe,CAAC;AAEvB,KAAK,SAAS,CAAC,MAAM,IAAI;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CA+B1E"}

package/components/Pill/index.js

@@ -10,18 +10,20 @@ var _react = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 require("./styles.scss");
 function Pill(props) {
-  var id = props.id,
-    label = props.label,
-    value = props.value,
-    _onClick = props.onClick,
-    onRemove = props.onRemove,
-    className = props.className;
+  const {
+    id,
+    label,
+    value,
+    onClick,
+    onRemove,
+    className
+  } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "pill ".concat(className !== null && className !== void 0 ? className : ''),
-    onClick: function onClick(ev) {
+    onClick: ev => {
       ev.stopPropagation();
-      if (_onClick) {
-        _onClick(id);
+      if (onClick) {
+        onClick(id);
       }
     }
   }, label && /*#__PURE__*/_react.default.createElement("p", {
@@ -29,7 +31,7 @@ function Pill(props) {
   }, label, ":"), /*#__PURE__*/_react.default.createElement("p", {
     className: "value".concat(label ? '' : ' value--no-label')
   }, value), onRemove ? /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: function onClick(ev) {
+    onClick: ev => {
       ev.stopPropagation();
       onRemove(id);
     },

package/components/PillList/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './styles.scss';
 export type PillListItem<IdType> = {
     id: IdType;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PillList/index.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAkBlF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PillList/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,MAAM,IAAI;IAClC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAkBlF"}

package/components/PillList/index.js

@@ -9,21 +9,21 @@ var _react = _interopRequireDefault(require("react"));
 var _Pill = _interopRequireDefault(require("../Pill"));
 require("./styles.scss");
 function PillList(props) {
-  var data = props.data,
-    onClick = props.onClick,
-    onRemove = props.onRemove,
-    className = props.className;
+  const {
+    data,
+    onClick,
+    onRemove,
+    className
+  } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "pill-list"
-  }, data.map(function (item, index) {
-    return /*#__PURE__*/_react.default.createElement(_Pill.default, {
-      key: index,
-      id: item.id,
-      label: item.label,
-      value: item.value,
-      onClick: item.onClick || onClick,
-      onRemove: item.onRemove || onRemove,
-      className: item.className || className
-    });
-  }));
+  }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_Pill.default, {
+    key: index,
+    id: item.id,
+    label: item.label,
+    value: item.value,
+    onClick: item.onClick || onClick,
+    onRemove: item.onRemove || onRemove,
+    className: item.className || className
+  })));
 }

package/components/PopoverMenu/Popover.js

@@ -5,37 +5,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = PopoverDropdown;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 function PopoverDropdown(props) {
-  var sections = props.sections,
-    handleClick = props.handleClick,
-    anchorElement = props.anchorElement,
-    setAnchorElement = props.setAnchorElement,
-    itemRenderer = props.itemRenderer,
-    menuAlign = props.menuAlign;
-  var theme = (0, _material.useTheme)();
-  var handleClose = function handleClose() {
+  const {
+    sections,
+    handleClick,
+    anchorElement,
+    setAnchorElement,
+    itemRenderer,
+    menuAlign
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const handleClose = () => {
     setAnchorElement(null);
   };
-  var _onClick = function onClick(item) {
+  const onClick = item => {
     if (item.onClick) {
       item.onClick();
     }
     handleClick(item);
   };
-  var itemStyles = function itemStyles(type) {
-    return {
-      color: type === 'destructive' ? theme.palette.TwClrTxtDanger : theme.palette.TwClrTxt,
-      '& .MuiMenuItem-root:hover': {
-        backgroundColor: theme.palette.TwClrBgSelectedGhostHover
-      },
-      '&.MuiMenuItem-root:active': {
-        backgroundColor: theme.palette.TwClrBgSelectedGhostActive
-      }
-    };
-  };
+  const itemStyles = type => ({
+    color: type === 'destructive' ? theme.palette.TwClrTxtDanger : theme.palette.TwClrTxt,
+    '& .MuiMenuItem-root:hover': {
+      backgroundColor: theme.palette.TwClrBgSelectedGhostHover
+    },
+    '&.MuiMenuItem-root:active': {
+      backgroundColor: theme.palette.TwClrBgSelectedGhostActive
+    }
+  });
   return /*#__PURE__*/_react.default.createElement(_material.Popover, {
     id: "simple-popover",
     open: Boolean(anchorElement),
@@ -62,22 +61,20 @@ function PopoverDropdown(props) {
     sx: {
       padding: 0
     }
-  }, sections === null || sections === void 0 ? void 0 : sections.map(function (section, index) {
-    var elements = [];
+  }, sections === null || sections === void 0 ? void 0 : sections.map((section, index) => {
+    let elements = [];
     if (index > 0) {
       elements.push( /*#__PURE__*/_react.default.createElement(_material.ListItem, null, "---"));
     }
-    elements = [].concat((0, _toConsumableArray2.default)(elements), (0, _toConsumableArray2.default)(section.map(function (item, itemIndex) {
+    elements = [...elements, ...section.map((item, itemIndex) => {
       return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-        onClick: function onClick() {
-          return _onClick(item);
-        },
+        onClick: () => onClick(item),
         key: "option-".concat(itemIndex),
         sx: itemStyles(item.type),
         disableRipple: true,
         disabled: item.disabled
       }, itemRenderer ? itemRenderer(item) : item.label);
-    })));
+    })];
     return elements;
   })));
 }

package/components/PopoverMenu/index.js

@@ -1,50 +1,46 @@
 "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 = PopoverMenu;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _material = require("@mui/material");
 var _styles = require("@mui/styles");
 var _Popover = _interopRequireDefault(require("./Popover"));
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    iconContainer: {
-      height: '48px',
-      borderRadius: '16px',
-      padding: theme.spacing(1.5, 2)
-    },
-    icon: {
-      width: '32px',
-      height: '32px'
-    },
-    chevronDown: {
-      marginLeft: '8px',
-      fill: theme.palette.TwClrIcn
-    }
-  };
-});
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  iconContainer: {
+    height: '48px',
+    borderRadius: '16px',
+    padding: theme.spacing(1.5, 2)
+  },
+  icon: {
+    width: '32px',
+    height: '32px'
+  },
+  chevronDown: {
+    marginLeft: '8px',
+    fill: theme.palette.TwClrIcn
+  }
+}));
 function PopoverMenu(_ref) {
-  var anchor = _ref.anchor,
-    menuSections = _ref.menuSections,
-    onClick = _ref.onClick;
-  var classes = useStyles();
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    anchorEl = _useState2[0],
-    setAnchorEl = _useState2[1];
-  var handleClick = function handleClick(event) {
+  let {
+    anchor,
+    menuSections,
+    onClick
+  } = _ref;
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const handleClick = event => {
     setAnchorEl(event.currentTarget);
   };
-  var handleClose = function handleClose() {
+  const handleClose = () => {
     setAnchorEl(null);
   };
-  var onItemClick = function onItemClick(selectedItem) {
+  const onItemClick = selectedItem => {
     if (onClick) {
       onClick(selectedItem);
     }

package/components/PopoverMultiSelect/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './styles.scss';
 import { Section } from '../PopoverMenu/Popover';
 export type PopoverMultiSelectProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PopoverMultiSelect/index.tsx"],"names":[],"mappings":"AAIA,OAAO,eAAe,CAAC;AACvB,OAAgB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA8CtF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PopoverMultiSelect/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AACvB,OAAgB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA8CtF"}