@webiny/ui 5.27.0 → 5.28.0-beta.0

package/AutoComplete/MultiAutoComplete.js

@@ -1,71 +1,107 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiAutoComplete = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _downshift = _interopRequireDefault(require("downshift"));
+
+var _reactSpinnerMaterial = _interopRequireDefault(require("react-spinner-material"));
+
+var _Input = require("../Input");
+
+var _Chips = require("../Chips");
+
+var _utils = require("./utils");
+
+var _List = require("../List");
+
+var _Button = require("../Button");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Elevation = require("../Elevation");
+
+var _Typography = require("../Typography");
+
+var _styles = require("./styles");
+
+var _FormElementMessage = require("../FormElementMessage");
+
+var _baselineClose24px = require("./icons/baseline-close-24px.svg");
+
+var _navigate_before24px = require("./icons/navigate_before-24px.svg");
+
+var _navigate_next24px = require("./icons/navigate_next-24px.svg");
+
+var _skip_previous24px = require("./icons/skip_previous-24px.svg");
+
+var _skip_next24px = require("./icons/skip_next-24px.svg");
+
+var _reorder_black_24dp = require("./icons/reorder_black_24dp.svg");
+
+var _emotion = require("emotion");
+
 var _excluded = ["unique", "value", "onChange", "onInput", "validation", "useMultipleSelectionList", "description"],
     _excluded2 = ["getInputProps", "openMenu"];
-import React from "react";
-import Downshift from "downshift";
-import MaterialSpinner from "react-spinner-material";
-import { Input } from "../Input";
-import { Chips, Chip } from "../Chips";
-import { getOptionValue, getOptionText, findInAliases } from "./utils";
-import { List, ListItem, ListItemMeta } from "../List";
-import { IconButton } from "../Button";
-import classNames from "classnames";
-import { Elevation } from "../Elevation";
-import { Typography } from "../Typography";
-import { autoCompleteStyle, suggestionList } from "./styles";
-import { FormElementMessage } from "../FormElementMessage";
-import { ReactComponent as BaselineCloseIcon } from "./icons/baseline-close-24px.svg";
-import { ReactComponent as PrevIcon } from "./icons/navigate_before-24px.svg";
-import { ReactComponent as NextIcon } from "./icons/navigate_next-24px.svg";
-import { ReactComponent as PrevAllIcon } from "./icons/skip_previous-24px.svg";
-import { ReactComponent as NextAllIcon } from "./icons/skip_next-24px.svg";
-import { ReactComponent as DeleteIcon } from "./icons/baseline-close-24px.svg";
-import { ReactComponent as ReorderIcon } from "./icons/reorder_black_24dp.svg";
-import { css } from "emotion";
-import { ListItemGraphic } from "../List";
-var listItemMetaClassName = /*#__PURE__*/css({
+var listItemMetaClassName = /*#__PURE__*/(0, _emotion.css)({
   display: "table"
 }, "label:listItemMetaClassName;");
-var iconButtonClassName = /*#__PURE__*/css({
+var iconButtonClassName = /*#__PURE__*/(0, _emotion.css)({
   display: "table-cell !important"
 }, "label:iconButtonClassName;");
 var style = {
   pagination: {
-    bar: /*#__PURE__*/css({
+    bar: /*#__PURE__*/(0, _emotion.css)({
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       borderBottom: "2px solid #fa5723",
       padding: "6px 0"
     }, "label:bar;"),
-    pages: /*#__PURE__*/css({
+    pages: /*#__PURE__*/(0, _emotion.css)({
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center"
     }, "label:pages;"),
-    searchInput: /*#__PURE__*/css({
+    searchInput: /*#__PURE__*/(0, _emotion.css)({
       height: "42px !important"
     }, "label:searchInput;"),
-    list: /*#__PURE__*/css({
+    list: /*#__PURE__*/(0, _emotion.css)({
       padding: "0 0 5px 0 !important",
       ".mdc-list-item": {
         borderBottom: "1px solid var(--mdc-theme-on-background)"
       }
     }, "label:list;"),
-    secondaryText: /*#__PURE__*/css({
+    secondaryText: /*#__PURE__*/(0, _emotion.css)({
       color: "var(--mdc-theme-text-secondary-on-background)"
     }, "label:secondaryText;")
   }
 };
-var listStyles = /*#__PURE__*/css({
+var listStyles = /*#__PURE__*/(0, _emotion.css)({
   "&.multi-autocomplete__options-list": {
     listStyle: "none",
     paddingLeft: 0,
@@ -76,7 +112,7 @@ var listStyles = /*#__PURE__*/css({
 }, "label:listStyles;");
 
 var Spinner = function Spinner() {
-  return /*#__PURE__*/React.createElement(MaterialSpinner, {
+  return /*#__PURE__*/_react.default.createElement(_reactSpinnerMaterial.default, {
     size: 24,
     spinnerColor: "#fa5723",
     spinnerWidth: 2,
@@ -87,60 +123,54 @@ var Spinner = function Spinner() {
 var OptionsList = function OptionsList(_ref) {
   var getMenuProps = _ref.getMenuProps,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(Elevation, {
+  return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
     z: 1
-  }, /*#__PURE__*/React.createElement("ul", Object.assign({
-    className: classNames("multi-autocomplete__options-list", listStyles)
+  }, /*#__PURE__*/_react.default.createElement("ul", Object.assign({
+    className: (0, _classnames.default)("multi-autocomplete__options-list", listStyles)
   }, getMenuProps()), children));
 };
 
-export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
-  _inherits(MultiAutoComplete, _React$Component);
+var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(MultiAutoComplete, _React$Component);
 
-  var _super = _createSuper(MultiAutoComplete);
+  var _super = (0, _createSuper2.default)(MultiAutoComplete);
 
   function MultiAutoComplete() {
     var _this;
 
-    _classCallCheck(this, MultiAutoComplete);
+    (0, _classCallCheck2.default)(this, MultiAutoComplete);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       inputValue: "",
       multipleSelectionPage: 0,
       multipleSelectionSearch: "",
       reorderFormVisible: "",
       reorderFormValue: ""
     });
-
-    _defineProperty(_assertThisInitialized(_this), "downshift", /*#__PURE__*/React.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "assignedValueAfterClearing", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downshift", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "assignedValueAfterClearing", {
       set: false,
       selection: null
     });
-
-    _defineProperty(_assertThisInitialized(_this), "setMultipleSelectionPage", function (multipleSelectionPage) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setMultipleSelectionPage", function (multipleSelectionPage) {
       _this.setState({
         multipleSelectionPage: multipleSelectionPage
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "setMultipleSelectionSearch", function (multipleSelectionSearch) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setMultipleSelectionSearch", function (multipleSelectionSearch) {
       _this.setState({
         multipleSelectionSearch: multipleSelectionSearch
       });
     });
-
     return _this;
   }
 
-  _createClass(MultiAutoComplete, [{
+  (0, _createClass2.default)(MultiAutoComplete, [{
     key: "getOptions",
     value: function getOptions() {
       var _this2 = this;
@@ -151,10 +181,8 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           allowFreeInput = _this$props.allowFreeInput,
           useSimpleValues = _this$props.useSimpleValues,
           options = _this$props.options;
-      var values = Array.isArray(value) ? _toConsumableArray(value) : [];
-
-      var filtered = _toConsumableArray(options); // If free input is allowed, prepend typed value to the list.
-
+      var values = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+      var filtered = (0, _toConsumableArray2.default)(options); // If free input is allowed, prepend typed value to the list.
 
       if (allowFreeInput && this.state.inputValue) {
         if (useSimpleValues) {
@@ -165,11 +193,11 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           }
         } else {
           var _existingValue = filtered.find(function (item) {
-            return _this2.state.inputValue === getOptionText(item, _this2.props);
+            return _this2.state.inputValue === (0, _utils.getOptionText)(item, _this2.props);
           });
 
           if (!_existingValue) {
-            filtered.unshift(_defineProperty({}, this.props.textProp, this.state.inputValue));
+            filtered.unshift((0, _defineProperty2.default)({}, this.props.textProp, this.state.inputValue));
           }
         }
       }
@@ -180,7 +208,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         if (unique) {
           if (Array.isArray(values)) {
             if (values.find(function (value) {
-              return getOptionValue(value, _this2.props) === getOptionValue(item, _this2.props);
+              return (0, _utils.getOptionValue)(value, _this2.props) === (0, _utils.getOptionValue)(item, _this2.props);
             })) {
               return false;
             }
@@ -193,10 +221,10 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         }
 
         if (item.aliases) {
-          return findInAliases(item, _this2.state.inputValue);
+          return (0, _utils.findInAliases)(item, _this2.state.inputValue);
         }
 
-        return getOptionText(item, _this2.props).toLowerCase().includes(_this2.state.inputValue.toLowerCase());
+        return (0, _utils.getOptionText)(item, _this2.props).toLowerCase().includes(_this2.state.inputValue.toLowerCase());
       });
     }
     /**
@@ -223,41 +251,41 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
 
 
       if (!this.state.inputValue && !options.length) {
-        return /*#__PURE__*/React.createElement(OptionsList, {
+        return /*#__PURE__*/_react.default.createElement(OptionsList, {
           getMenuProps: getMenuProps
-        }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
+        }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
           use: "body2"
         }, "Start typing to find entry")));
       }
 
       if (!options.length) {
-        return /*#__PURE__*/React.createElement(Elevation, {
+        return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
           z: 1
-        }, /*#__PURE__*/React.createElement("ul", Object.assign({
-          className: classNames("multi-autocomplete__options-list", listStyles)
-        }, getMenuProps()), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
+        }, /*#__PURE__*/_react.default.createElement("ul", Object.assign({
+          className: (0, _classnames.default)("multi-autocomplete__options-list", listStyles)
+        }, getMenuProps()), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
           use: "body2"
         }, "No results."), this.props.noResultFound)));
       }
 
       var renderItem = this.props.renderItem;
-      return /*#__PURE__*/React.createElement(Elevation, {
+      return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
         z: 1
-      }, /*#__PURE__*/React.createElement("ul", Object.assign({
-        className: classNames("multi-autocomplete__options-list", listStyles)
+      }, /*#__PURE__*/_react.default.createElement("ul", Object.assign({
+        className: (0, _classnames.default)("multi-autocomplete__options-list", listStyles)
       }, getMenuProps()), options.map(function (item, index) {
         var _itemClassNames;
 
-        var itemValue = getOptionValue(item, _this3.props); // Base classes.
+        var itemValue = (0, _utils.getOptionValue)(item, _this3.props); // Base classes.
 
-        var itemClassNames = (_itemClassNames = {}, _defineProperty(_itemClassNames, suggestionList, true), _defineProperty(_itemClassNames, "highlighted", highlightedIndex === index), _defineProperty(_itemClassNames, "selected", false), _itemClassNames); // Render the item.
+        var itemClassNames = (_itemClassNames = {}, (0, _defineProperty2.default)(_itemClassNames, _styles.suggestionList, true), (0, _defineProperty2.default)(_itemClassNames, "highlighted", highlightedIndex === index), (0, _defineProperty2.default)(_itemClassNames, "selected", false), _itemClassNames); // Render the item.
 
-        return /*#__PURE__*/React.createElement("li", Object.assign({
+        return /*#__PURE__*/_react.default.createElement("li", Object.assign({
           key: itemValue + index
         }, getItemProps({
           index: index,
           item: item,
-          className: classNames(itemClassNames)
+          className: (0, _classnames.default)(itemClassNames)
         })), renderItem.call(_this3, item, index));
       })));
     }
@@ -280,7 +308,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
 
       if (search) {
         data = data.filter(function (item) {
-          return getOptionText(item.option, _this4.props).toLowerCase().includes(search.toLowerCase());
+          return (0, _utils.getOptionText)(item.option, _this4.props).toLowerCase().includes(search.toLowerCase());
         });
       }
 
@@ -336,9 +364,9 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
             data = _this$paginateMultipl.data,
             meta = _this$paginateMultipl.meta;
 
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
           className: style.pagination.bar
-        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, {
           className: style.pagination.searchInput,
           placeholder: "Search selected...",
           value: this.state.multipleSelectionSearch,
@@ -347,46 +375,46 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
 
             _this5.setMultipleSelectionPage(value ? 1 : 0);
           }
-        })), /*#__PURE__*/React.createElement("div", {
+        })), /*#__PURE__*/_react.default.createElement("div", {
           className: style.pagination.pages
-        }, /*#__PURE__*/React.createElement("div", {
+        }, /*#__PURE__*/_react.default.createElement("div", {
           className: meta.hasData ? "" : style.pagination.secondaryText
-        }, meta.from, " - ", meta.to, " of ", meta.totalCount), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(PrevAllIcon, null),
+        }, meta.from, " - ", meta.to, " of ", meta.totalCount), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+          icon: /*#__PURE__*/_react.default.createElement(_skip_previous24px.ReactComponent, null),
           disabled: !meta.hasData || meta.page === 1,
           onClick: function onClick() {
             return _this5.setMultipleSelectionPage(1);
           }
-        }), /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(PrevIcon, null),
+        }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+          icon: /*#__PURE__*/_react.default.createElement(_navigate_before24px.ReactComponent, null),
           disabled: !meta.hasData || !meta.hasPrevious,
           onClick: function onClick() {
             return _this5.setMultipleSelectionPage(meta.page - 1);
           }
-        }), /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(NextIcon, null),
+        }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+          icon: /*#__PURE__*/_react.default.createElement(_navigate_next24px.ReactComponent, null),
           disabled: !meta.hasData || !meta.hasNext,
           onClick: function onClick() {
             return _this5.setMultipleSelectionPage(meta.page + 1);
           }
-        }), /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(NextAllIcon, null),
+        }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+          icon: /*#__PURE__*/_react.default.createElement(_skip_next24px.ReactComponent, null),
           disabled: !meta.hasData || meta.page === meta.lastPage,
           onClick: function onClick() {
             return _this5.setMultipleSelectionPage(meta.lastPage);
           }
-        })))), /*#__PURE__*/React.createElement(List, {
+        })))), /*#__PURE__*/_react.default.createElement(_List.List, {
           className: style.pagination.list
         }, meta.hasData ? data.map(function (item, index) {
-          var key = "".concat(getOptionValue(item.option, _this5.props), "-").concat(index);
+          var key = "".concat((0, _utils.getOptionValue)(item.option, _this5.props), "-").concat(index);
 
           if (_this5.state.reorderFormVisible === key) {
-            return /*#__PURE__*/React.createElement(ListItem, {
+            return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
               key: key
-            }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
+            }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
               disabled: true,
-              icon: /*#__PURE__*/React.createElement(ReorderIcon, null)
-            })), /*#__PURE__*/React.createElement(Input, {
+              icon: /*#__PURE__*/_react.default.createElement(_reorder_black_24dp.ReactComponent, null)
+            })), /*#__PURE__*/_react.default.createElement(_Input.Input, {
               value: _this5.state.reorderFormValue,
               onKeyDown: function onKeyDown(e) {
                 var key = e.key;
@@ -397,8 +425,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
 
                 if (key === "Enter") {
                   // Reorder the item.
-                  var newValue = _toConsumableArray(value);
-
+                  var newValue = (0, _toConsumableArray2.default)(value);
                   newValue.splice(e.target.value - 1, 0, newValue.splice(item.index, 1)[0]);
 
                   if (onChange) {
@@ -420,43 +447,43 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
               autoFocus: true,
               className: style.pagination.searchInput,
               placeholder: "Type a new order number and press Enter, or press Esc to cancel."
-            }), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(IconButton, {
-              icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+            }), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+              icon: /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
               disabled: true
             })));
           }
 
-          return /*#__PURE__*/React.createElement(ListItem, {
+          return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
             key: key
-          }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
-            icon: /*#__PURE__*/React.createElement(ReorderIcon, null),
+          }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+            icon: /*#__PURE__*/_react.default.createElement(_reorder_black_24dp.ReactComponent, null),
             onClick: function onClick() {
               _this5.setState({
                 reorderFormVisible: key
               });
             }
-          })), /*#__PURE__*/React.createElement("div", {
+          })), /*#__PURE__*/_react.default.createElement("div", {
             style: {
               color: "var(--mdc-theme-text-secondary-on-background)",
               marginRight: 8,
               minWidth: 32
             }
-          }, item.index + 1, "."), " ", renderListItemLabel && renderListItemLabel.call(_this5, item.option), /*#__PURE__*/React.createElement(ListItemMeta, {
+          }, item.index + 1, "."), " ", renderListItemLabel && renderListItemLabel.call(_this5, item.option), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, {
             className: listItemMetaClassName
-          }, renderListItemOptions && renderListItemOptions.call(_this5, item.option), /*#__PURE__*/React.createElement(IconButton, {
-            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+          }, renderListItemOptions && renderListItemOptions.call(_this5, item.option), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+            icon: /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
             className: iconButtonClassName,
             onClick: function onClick() {
               if (!onChange) {
                 return;
               }
 
-              onChange([].concat(_toConsumableArray(value.slice(0, item.index)), _toConsumableArray(value.slice(item.index + 1))));
+              onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, item.index)), (0, _toConsumableArray2.default)(value.slice(item.index + 1))));
             }
           })));
-        }) : /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement("span", {
+        }) : /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement("span", {
           className: style.pagination.secondaryText
-        }, "Nothing to show."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormElementMessage, null, description)));
+        }, "Nothing to show."))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description)));
       }
 
       var hasItems = Array.isArray(value) && value.length;
@@ -465,19 +492,19 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Chips, {
+      return /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
         disabled: disabled
       }, value.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(Chip, {
-          label: getOptionText(item, _this5.props),
-          key: "".concat(getOptionValue(item, _this5.props), "-").concat(index),
-          trailingIcon: /*#__PURE__*/React.createElement(BaselineCloseIcon, null),
+        return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
+          label: (0, _utils.getOptionText)(item, _this5.props),
+          key: "".concat((0, _utils.getOptionValue)(item, _this5.props), "-").concat(index),
+          trailingIcon: /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
           onRemove: function onRemove() {
             if (!onChange) {
               return;
             }
 
-            onChange([].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1))));
+            onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, index)), (0, _toConsumableArray2.default)(value.slice(index + 1))));
           }
         });
       }));
@@ -500,17 +527,16 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
       } : _this$props3$validati,
           useMultipleSelectionList = _this$props3.useMultipleSelectionList,
           description = _this$props3.description,
-          otherInputProps = _objectWithoutProperties(_this$props3, _excluded);
-
+          otherInputProps = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       var options = this.getOptions();
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(autoCompleteStyle, props.className)
-      }, /*#__PURE__*/React.createElement(Downshift, {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(_styles.autoCompleteStyle, props.className)
+      }, /*#__PURE__*/_react.default.createElement(_downshift.default, {
         defaultSelectedItem: null // @ts-ignore there is no className on Downshift
         ,
-        className: autoCompleteStyle,
+        className: _styles.autoCompleteStyle,
         itemToString: function itemToString(item) {
-          return item && getOptionText(item, props);
+          return item && (0, _utils.getOptionText)(item, props);
         },
         ref: this.downshift,
         onChange: function onChange(selection) {
@@ -535,7 +561,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
             _this6.assignedValueAfterClearing.set = false;
 
             if (Array.isArray(value)) {
-              _onChange && _onChange([].concat(_toConsumableArray(value), [_this6.assignedValueAfterClearing.selection]));
+              _onChange && _onChange([].concat((0, _toConsumableArray2.default)(value), [_this6.assignedValueAfterClearing.selection]));
             } else {
               _onChange && _onChange([_this6.assignedValueAfterClearing.selection]);
             }
@@ -544,15 +570,14 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
       }, function (_ref2) {
         var getInputProps = _ref2.getInputProps,
             openMenu = _ref2.openMenu,
-            rest = _objectWithoutProperties(_ref2, _excluded2);
-
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, getInputProps(_objectSpread(_objectSpread({}, otherInputProps), {}, {
+            rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+        return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, getInputProps((0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherInputProps), {}, {
           // @ts-ignore
           validation: validation,
           // Only pass description if not using "useMultipleSelectionList".
           description: useMultipleSelectionList ? null : description,
           rawOnChange: true,
-          trailingIcon: _this6.props.loading && /*#__PURE__*/React.createElement(Spinner, null),
+          trailingIcon: _this6.props.loading && /*#__PURE__*/_react.default.createElement(Spinner, null),
           onChange: function onChange(e) {
             return e;
           },
@@ -574,18 +599,18 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
             openMenu();
             otherInputProps.onFocus && otherInputProps.onFocus(e);
           }
-        }))), _this6.renderOptions(_objectSpread(_objectSpread({}, rest), {}, {
+        }))), _this6.renderOptions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
           unique: unique,
           options: options
         })), _this6.renderMultipleSelection());
       }));
     }
   }]);
-
   return MultiAutoComplete;
-}(React.Component);
+}(_react.default.Component);
 
-_defineProperty(MultiAutoComplete, "defaultProps", {
+exports.MultiAutoComplete = MultiAutoComplete;
+(0, _defineProperty2.default)(MultiAutoComplete, "defaultProps", {
   valueProp: "id",
   textProp: "name",
   unique: true,
@@ -597,15 +622,15 @@ _defineProperty(MultiAutoComplete, "defaultProps", {
    * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.
    */
   renderItem: function renderItem(item) {
-    return /*#__PURE__*/React.createElement(Typography, {
+    return /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
       use: "body2"
-    }, getOptionText(item, this.props));
+    }, (0, _utils.getOptionText)(item, this.props));
   },
 
   /**
    * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
    */
   renderListItemLabel: function renderListItemLabel(item) {
-    return getOptionText(item, this.props);
+    return (0, _utils.getOptionText)(item, this.props);
   }
 });