@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.8c4d9f045a

package/AutoComplete/MultiAutoComplete.js

@@ -1,65 +1,107 @@
-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";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["options", "allowFreeInput", "useSimpleValues", "unique", "value", "onChange", "valueProp", "textProp", "onInput", "validation", "useMultipleSelectionList", "description"],
+"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 * as 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 "@svgr/webpack!./icons/baseline-close-24px.svg";
-import { ReactComponent as PrevIcon } from "@svgr/webpack!./icons/navigate_before-24px.svg";
-import { ReactComponent as NextIcon } from "@svgr/webpack!./icons/navigate_next-24px.svg";
-import { ReactComponent as PrevAllIcon } from "@svgr/webpack!./icons/skip_previous-24px.svg";
-import { ReactComponent as NextAllIcon } from "@svgr/webpack!./icons/skip_next-24px.svg";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!./icons/baseline-close-24px.svg";
-import { ReactComponent as ReorderIcon } from "@svgr/webpack!./icons/reorder_black_24dp.svg";
-import { css } from "emotion";
-import { ListItemGraphic } from "../List";
+var listItemMetaClassName = /*#__PURE__*/(0, _emotion.css)({
+  display: "table"
+}, "label:listItemMetaClassName;");
+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,
@@ -69,107 +111,66 @@ var listStyles = /*#__PURE__*/css({
   }
 }, "label:listStyles;");
 
-function Spinner() {
-  return /*#__PURE__*/React.createElement(MaterialSpinner, {
+var Spinner = function Spinner() {
+  return /*#__PURE__*/_react.default.createElement(_reactSpinnerMaterial.default, {
     size: 24,
     spinnerColor: "#fa5723",
     spinnerWidth: 2,
     visible: true
   });
-}
-
-var DEFAULT_PER_PAGE = 10;
-
-function paginateMultipleSelection(multipleSelection, limit, page, search) {
-  // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
-  var data = Array.isArray(multipleSelection) ? multipleSelection.map(function (item, index) {
-    return _objectSpread(_objectSpread({}, item), {}, {
-      index: index
-    });
-  }) : [];
-
-  if (typeof search === "string" && search) {
-    data = data.filter(function (item) {
-      return typeof item.name === "string" && item.name.toLowerCase().includes(search.toLowerCase());
-    });
-  }
+};
 
-  var lastPage = Math.ceil(data.length / limit);
-  var totalCount = data.length;
-  page = page || lastPage;
-  data = data.slice((page - 1) * limit, page * limit);
-  var from = 0;
-  var to = 0;
+var OptionsList = function OptionsList(_ref) {
+  var getMenuProps = _ref.getMenuProps,
+      children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
+    z: 1
+  }, /*#__PURE__*/_react.default.createElement("ul", Object.assign({
+    className: (0, _classnames.default)("multi-autocomplete__options-list", listStyles)
+  }, getMenuProps()), children));
+};
 
-  if (data.length) {
-    from = (page - 1) * limit + 1;
-    to = from + (data.length - 1);
-  }
+var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(MultiAutoComplete, _React$Component);
 
-  var meta = {
-    hasData: data.length > 0,
-    totalCount: totalCount,
-    from: from,
-    to: to,
-    page: page,
-    lastPage: lastPage,
-    limit: limit,
-    hasPrevious: page > 1,
-    hasNext: page < lastPage
-  };
-  return {
-    data: data,
-    meta: meta
-  };
-}
-
-export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
-  _inherits(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;
@@ -180,15 +181,34 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           allowFreeInput = _this$props.allowFreeInput,
           useSimpleValues = _this$props.useSimpleValues,
           options = _this$props.options;
-      var filtered = options.filter(function (item) {
+      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) {
+          var existingValue = filtered.includes(this.state.inputValue);
+
+          if (!existingValue) {
+            filtered.unshift(this.state.inputValue);
+          }
+        } else {
+          var _existingValue = filtered.find(function (item) {
+            return _this2.state.inputValue === (0, _utils.getOptionText)(item, _this2.props);
+          });
+
+          if (!_existingValue) {
+            filtered.unshift((0, _defineProperty2.default)({}, this.props.textProp, this.state.inputValue));
+          }
+        }
+      }
+
+      return filtered.filter(function (item) {
         // We need to filter received options.
         // 1) If "unique" prop was passed, we don't want to show already picked options again.
         if (unique) {
-          var values = value;
-
           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;
             }
@@ -201,99 +221,134 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         }
 
         if (item.aliases) {
-          return findInAliases(item, _this2.state.inputValue);
-        }
-
-        return getOptionText(item, _this2.props).toLowerCase().includes(_this2.state.inputValue.toLowerCase());
-      }); // If free input is allowed, prepend typed value to the list.
-
-      if (allowFreeInput && this.state.inputValue) {
-        if (useSimpleValues) {
-          var existingValue = filtered.includes(this.state.inputValue);
-
-          if (!existingValue) {
-            filtered.unshift(this.state.inputValue);
-          }
-        } else {
-          var _existingValue = filtered.find(function (item) {
-            return _this2.state.inputValue === getOptionText(item, _this2.props);
-          });
-
-          if (!_existingValue) {
-            filtered.unshift(_defineProperty({}, this.props.textProp, this.state.inputValue));
-          }
+          return (0, _utils.findInAliases)(item, _this2.state.inputValue);
         }
-      }
 
-      return filtered;
+        return (0, _utils.getOptionText)(item, _this2.props).toLowerCase().includes(_this2.state.inputValue.toLowerCase());
+      });
     }
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
-     * @param options
-     * @param isOpen
-     * @param highlightedIndex
-     * @param selectedItem
-     * @param getMenuProps
-     * @param getItemProps
-     * @returns {*}
      */
 
   }, {
     key: "renderOptions",
-    value: function renderOptions(_ref) {
+    value: function renderOptions(params) {
       var _this3 = this;
 
-      var options = _ref.options,
-          isOpen = _ref.isOpen,
-          highlightedIndex = _ref.highlightedIndex,
-          getMenuProps = _ref.getMenuProps,
-          getItemProps = _ref.getItemProps;
+      var options = params.options,
+          isOpen = params.isOpen,
+          highlightedIndex = params.highlightedIndex,
+          getMenuProps = params.getMenuProps,
+          getItemProps = params.getItemProps;
 
       if (!isOpen) {
         return null;
       }
+      /**
+       * Suggest user to start typing when there are no options available to choose from.
+       */
+
+
+      if (!this.state.inputValue && !options.length) {
+        return /*#__PURE__*/_react.default.createElement(OptionsList, {
+          getMenuProps: getMenuProps
+        }, /*#__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."))));
+        }, "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));
       })));
     }
+  }, {
+    key: "paginateMultipleSelection",
+    value: function paginateMultipleSelection() {
+      var _this4 = this;
+
+      var value = this.props.value;
+      var limit = 10;
+      var page = this.state.multipleSelectionPage;
+      var search = this.state.multipleSelectionSearch; // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
+
+      var data = Array.isArray(value) ? value.map(function (option, index) {
+        return {
+          option: option,
+          index: index
+        };
+      }) : [];
+
+      if (search) {
+        data = data.filter(function (item) {
+          return (0, _utils.getOptionText)(item.option, _this4.props).toLowerCase().includes(search.toLowerCase());
+        });
+      }
+
+      var lastPage = Math.ceil(data.length / limit);
+      var totalCount = data.length;
+      page = page || lastPage;
+      data = data.slice((page - 1) * limit, page * limit);
+      var from = 0;
+      var to = 0;
+
+      if (data.length) {
+        from = (page - 1) * limit + 1;
+        to = from + (data.length - 1);
+      }
+
+      var meta = {
+        hasData: data.length > 0,
+        totalCount: totalCount,
+        from: from,
+        to: to,
+        page: page,
+        lastPage: lastPage,
+        limit: limit,
+        hasPrevious: page > 1,
+        hasNext: page < lastPage
+      };
+      return {
+        data: data,
+        meta: meta
+      };
+    }
     /**
      * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for
      * rendering selected items (we are using already existing "Chips" component).
-     * @returns {*}
      */
 
   }, {
     key: "renderMultipleSelection",
     value: function renderMultipleSelection() {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props2 = this.props,
           value = _this$props2.value,
@@ -301,65 +356,68 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props2.disabled,
           useMultipleSelectionList = _this$props2.useMultipleSelectionList,
           description = _this$props2.description,
-          renderListItemLabel = _this$props2.renderListItemLabel;
+          renderListItemLabel = _this$props2.renderListItemLabel,
+          renderListItemOptions = _this$props2.renderListItemOptions;
 
       if (useMultipleSelectionList) {
-        var _paginateMultipleSele = paginateMultipleSelection(value, DEFAULT_PER_PAGE, this.state.multipleSelectionPage, this.state.multipleSelectionSearch),
-            data = _paginateMultipleSele.data,
-            meta = _paginateMultipleSele.meta;
+        var _this$paginateMultipl = this.paginateMultipleSelection(),
+            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,
+          "data-testid": "pb.pagination.search",
           onChange: function onChange(value) {
-            _this4.setMultipleSelectionSearch(value);
+            _this5.setMultipleSelectionSearch(value);
 
-            _this4.setMultipleSelectionPage(value ? 1 : 0);
+            _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 _this4.setMultipleSelectionPage(1);
+            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 _this4.setMultipleSelectionPage(meta.page - 1);
+            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 _this4.setMultipleSelectionPage(meta.page + 1);
+            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 _this4.setMultipleSelectionPage(meta.lastPage);
+            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, _this4.props), "-").concat(index);
+          var key = "".concat((0, _utils.getOptionValue)(item.option, _this5.props), "-").concat(index);
 
-          if (_this4.state.reorderFormVisible === key) {
-            return /*#__PURE__*/React.createElement(ListItem, {
+          if (_this5.state.reorderFormVisible === key) {
+            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, {
-              value: _this4.state.reorderFormValue,
+              icon: /*#__PURE__*/_react.default.createElement(_reorder_black_24dp.ReactComponent, null)
+            })), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+              value: _this5.state.reorderFormValue,
+              "data-testid": "pb.pagination.input",
               onKeyDown: function onKeyDown(e) {
                 var key = e.key;
 
@@ -369,19 +427,21 @@ 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]);
-                  onChange(newValue);
+
+                  if (onChange) {
+                    onChange(newValue);
+                  }
                 }
 
-                _this4.setState({
+                _this5.setState({
                   reorderFormVisible: "",
                   reorderFormValue: ""
                 });
               },
               onChange: function onChange(value) {
-                return _this4.setState({
+                return _this5.setState({
                   reorderFormValue: value
                 });
               },
@@ -389,38 +449,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() {
-              _this4.setState({
+              _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.call(_this4, item), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(IconButton, {
-            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+          }, 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.default.createElement(_Button.IconButton, {
+            icon: /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
+            className: iconButtonClassName,
             onClick: function onClick() {
-              if (onChange) {
-                onChange([].concat(_toConsumableArray(value.slice(0, item.index)), _toConsumableArray(value.slice(item.index + 1))));
+              if (!onChange) {
+                return;
               }
+
+              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;
@@ -429,17 +494,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, _this4.props),
-          key: "".concat(getOptionValue(item, _this4.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) {
-              onChange([].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1))));
+            if (!onChange) {
+              return;
             }
+
+            onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, index)), (0, _toConsumableArray2.default)(value.slice(index + 1))));
           }
         });
       }));
@@ -447,78 +514,72 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
       var props = this.props,
           _this$props3 = this.props,
-          rawOptions = _this$props3.options,
-          allowFreeInput = _this$props3.allowFreeInput,
-          useSimpleValues = _this$props3.useSimpleValues,
           unique = _this$props3.unique,
           value = _this$props3.value,
           _onChange = _this$props3.onChange,
-          valueProp = _this$props3.valueProp,
-          textProp = _this$props3.textProp,
           onInput = _this$props3.onInput,
           _this$props3$validati = _this$props3.validation,
           validation = _this$props3$validati === void 0 ? {
-        isValid: null
+        isValid: null,
+        message: null
       } : _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, {
-        defaultSelectedItem: null // @ts-ignore
+      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) {
-          if (!_this5.assignedValueAfterClearing.set) {
-            _this5.assignedValueAfterClearing = {
+          if (!_this6.assignedValueAfterClearing.set) {
+            _this6.assignedValueAfterClearing = {
               set: true,
               selection: selection
             };
 
-            _this5.downshift.current.clearSelection();
+            _this6.downshift.current.clearSelection();
 
-            _this5.setMultipleSelectionPage(0);
+            _this6.setMultipleSelectionPage(0);
 
             return;
           }
 
-          if (_this5.assignedValueAfterClearing.set) {
-            _this5.setState({
+          if (_this6.assignedValueAfterClearing.set) {
+            _this6.setState({
               inputValue: ""
             });
 
-            _this5.assignedValueAfterClearing.set = false;
+            _this6.assignedValueAfterClearing.set = false;
 
             if (Array.isArray(value)) {
-              _onChange && _onChange([].concat(_toConsumableArray(value), [_this5.assignedValueAfterClearing.selection]));
+              _onChange && _onChange([].concat((0, _toConsumableArray2.default)(value), [_this6.assignedValueAfterClearing.selection]));
             } else {
-              _onChange && _onChange([_this5.assignedValueAfterClearing.selection]);
+              _onChange && _onChange([_this6.assignedValueAfterClearing.selection]);
             }
           }
         }
       }, 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: _this5.props.loading && /*#__PURE__*/React.createElement(Spinner, null),
+          trailingIcon: _this6.props.loading && /*#__PURE__*/_react.default.createElement(Spinner, null),
           onChange: function onChange(e) {
             return e;
           },
@@ -528,8 +589,8 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           onKeyUp: function onKeyUp(e) {
             var inputValue = e.target.value || ""; // Set current input value into state and trigger onInput if different.
 
-            if (inputValue !== _this5.state.inputValue) {
-              _this5.setState({
+            if (inputValue !== _this6.state.inputValue) {
+              _this6.setState({
                 inputValue: inputValue
               }, function () {
                 onInput && onInput(inputValue);
@@ -540,30 +601,38 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
             openMenu();
             otherInputProps.onFocus && otherInputProps.onFocus(e);
           }
-        }))), _this5.renderOptions(_objectSpread(_objectSpread({}, rest), {}, {
+        }))), _this6.renderOptions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
           unique: unique,
           options: options
-        })), _this5.renderMultipleSelection());
+        })), _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,
   options: [],
   useSimpleValues: false,
   useMultipleSelectionList: false,
+
+  /**
+   * 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);
   }
 });