@webiny/ui 0.0.0-unstable.fcdad0bc61 → 0.0.0-unstable.fdd9228b5d

package/AutoComplete/MultiAutoComplete.js

@@ -1,638 +1,87 @@
-"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"];
-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__*/(0, _emotion.css)({
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      borderBottom: "2px solid #fa5723",
-      padding: "6px 0"
-    }, "label:bar;"),
-    pages: /*#__PURE__*/(0, _emotion.css)({
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center"
-    }, "label:pages;"),
-    searchInput: /*#__PURE__*/(0, _emotion.css)({
-      height: "42px !important"
-    }, "label:searchInput;"),
-    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__*/(0, _emotion.css)({
-      color: "var(--mdc-theme-text-secondary-on-background)"
-    }, "label:secondaryText;")
-  }
-};
-var listStyles = /*#__PURE__*/(0, _emotion.css)({
-  "&.multi-autocomplete__options-list": {
-    listStyle: "none",
-    paddingLeft: 0,
-    "& li": {
-      margin: 0
-    }
-  }
-}, "label:listStyles;");
-
-var Spinner = function Spinner() {
-  return /*#__PURE__*/_react.default.createElement(_reactSpinnerMaterial.default, {
-    size: 24,
-    spinnerColor: "#fa5723",
-    spinnerWidth: 2,
-    visible: true
-  });
-};
-
-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));
-};
-
-var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(MultiAutoComplete, _React$Component);
-
-  var _super = (0, _createSuper2.default)(MultiAutoComplete);
-
-  function MultiAutoComplete() {
-    var _this;
-
-    (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));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      inputValue: "",
-      multipleSelectionPage: 0,
-      multipleSelectionSearch: "",
-      reorderFormVisible: "",
-      reorderFormValue: ""
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downshift", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "assignedValueAfterClearing", {
-      set: false,
-      selection: null
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setMultipleSelectionPage", function (multipleSelectionPage) {
-      _this.setState({
-        multipleSelectionPage: multipleSelectionPage
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setMultipleSelectionSearch", function (multipleSelectionSearch) {
-      _this.setState({
-        multipleSelectionSearch: multipleSelectionSearch
-      });
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(MultiAutoComplete, [{
-    key: "getOptions",
-    value: function getOptions() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          unique = _this$props.unique,
-          value = _this$props.value,
-          allowFreeInput = _this$props.allowFreeInput,
-          useSimpleValues = _this$props.useSimpleValues,
-          options = _this$props.options;
-      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) {
-          if (Array.isArray(values)) {
-            if (values.find(function (value) {
-              return (0, _utils.getOptionValue)(value, _this2.props) === (0, _utils.getOptionValue)(item, _this2.props);
-            })) {
-              return false;
-            }
-          }
-        } // 2) At the end, we want to show only options that are matched by typed text.
-
-
-        if (!_this2.state.inputValue) {
-          return true;
-        }
-
-        if (item.aliases) {
-          return (0, _utils.findInAliases)(item, _this2.state.inputValue);
-        }
-
-        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.
-     */
-
-  }, {
-    key: "renderOptions",
-    value: function renderOptions(params) {
-      var _this3 = this;
-
-      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.default.createElement(_Elevation.Elevation, {
-          z: 1
-        }, /*#__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.default.createElement(_Elevation.Elevation, {
-        z: 1
-      }, /*#__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 = (0, _utils.getOptionValue)(item, _this3.props); // Base classes.
-
-        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.default.createElement("li", Object.assign({
-          key: itemValue + index
-        }, getItemProps({
-          index: index,
-          item: item,
-          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
-      };
+import React, { useCallback, useMemo } from "react";
+import { MultiAutoComplete as AdminMultiAutoComplete } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `MultiAutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export const MultiAutoComplete = ({
+  onChange,
+  value = [],
+  valueProp = "id",
+  textProp = "name",
+  renderItem,
+  noResultFound,
+  useSimpleValues,
+  loading,
+  allowFreeInput,
+  unique = true,
+  renderMultipleSelection,
+  onInput,
+  ...props
+}) => {
+  const getOption = useCallback(option => {
+    if (useSimpleValues) {
       return {
-        data: data,
-        meta: meta
+        label: option,
+        value: option,
+        item: option
       };
     }
-    /**
-     * 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).
-     */
-
-  }, {
-    key: "renderMultipleSelection",
-    value: function renderMultipleSelection() {
-      var _this5 = this;
-
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange,
-          disabled = _this$props2.disabled,
-          useMultipleSelectionList = _this$props2.useMultipleSelectionList,
-          description = _this$props2.description,
-          renderListItemLabel = _this$props2.renderListItemLabel,
-          renderListItemOptions = _this$props2.renderListItemOptions;
-
-      if (useMultipleSelectionList) {
-        var _this$paginateMultipl = this.paginateMultipleSelection(),
-            data = _this$paginateMultipl.data,
-            meta = _this$paginateMultipl.meta;
-
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-          className: style.pagination.bar
-        }, /*#__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) {
-            _this5.setMultipleSelectionSearch(value);
-
-            _this5.setMultipleSelectionPage(value ? 1 : 0);
-          }
-        })), /*#__PURE__*/_react.default.createElement("div", {
-          className: style.pagination.pages
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: meta.hasData ? "" : style.pagination.secondaryText
-        }, 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.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.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.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.default.createElement(_List.List, {
-          className: style.pagination.list
-        }, meta.hasData ? data.map(function (item, index) {
-          var key = "".concat((0, _utils.getOptionValue)(item.option, _this5.props), "-").concat(index);
-
-          if (_this5.state.reorderFormVisible === key) {
-            return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
-              key: key
-            }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-              disabled: true,
-              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;
-
-                if (key !== "Escape" && key !== "Enter") {
-                  return;
-                }
-
-                if (key === "Enter") {
-                  // Reorder the item.
-                  var newValue = (0, _toConsumableArray2.default)(value);
-                  newValue.splice(e.target.value - 1, 0, newValue.splice(item.index, 1)[0]);
-
-                  if (onChange) {
-                    onChange(newValue);
-                  }
-                }
-
-                _this5.setState({
-                  reorderFormVisible: "",
-                  reorderFormValue: ""
-                });
-              },
-              onChange: function onChange(value) {
-                return _this5.setState({
-                  reorderFormValue: value
-                });
-              },
-              type: "number",
-              autoFocus: true,
-              className: style.pagination.searchInput,
-              placeholder: "Type a new order number and press Enter, or press Esc to cancel."
-            }), /*#__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.default.createElement(_List.ListItem, {
-            key: key
-          }, /*#__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.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.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) {
-                return;
-              }
-
-              onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, item.index)), (0, _toConsumableArray2.default)(value.slice(item.index + 1))));
-            }
-          })));
-        }) : /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement("span", {
-          className: style.pagination.secondaryText
-        }, "Nothing to show."))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description)));
+    return {
+      label: option[textProp],
+      value: option[valueProp],
+      disabled: option.disabled,
+      item: option
+    };
+  }, [textProp, valueProp, useSimpleValues]);
+  const options = useMemo(() => {
+    return props.options.map(option => {
+      return getOption(option);
+    });
+  }, [props.options]);
+  const values = useMemo(() => {
+    if (!value) {
+      return [];
+    }
+    return value.map(val => {
+      if (typeof val === "string") {
+        return val;
       }
-
-      var hasItems = Array.isArray(value) && value.length;
-
-      if (!hasItems) {
-        return null;
+      return val[valueProp];
+    }).filter(Boolean);
+  }, [value, valueProp]);
+  const onValuesChange = useCallback(values => {
+    const selectedOptions = [];
+    for (const value of values) {
+      const option = options.find(option => option.value === value);
+      if (option) {
+        selectedOptions.push(option);
+      } else {
+        selectedOptions.push(getOption(value));
       }
-
-      return /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
-        disabled: disabled
-      }, value.map(function (item, index) {
-        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((0, _toConsumableArray2.default)(value.slice(0, index)), (0, _toConsumableArray2.default)(value.slice(index + 1))));
-          }
-        });
-      }));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this6 = this;
-
-      var props = this.props,
-          _this$props3 = this.props,
-          unique = _this$props3.unique,
-          value = _this$props3.value,
-          _onChange = _this$props3.onChange,
-          onInput = _this$props3.onInput,
-          _this$props3$validati = _this$props3.validation,
-          validation = _this$props3$validati === void 0 ? {
-        isValid: null,
-        message: null
-      } : _this$props3$validati,
-          useMultipleSelectionList = _this$props3.useMultipleSelectionList,
-          description = _this$props3.description,
-          otherInputProps = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-      var options = this.getOptions();
-      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: _styles.autoCompleteStyle,
-        itemToString: function itemToString(item) {
-          return item && (0, _utils.getOptionText)(item, props);
-        },
-        ref: this.downshift,
-        onChange: function onChange(selection) {
-          if (!_this6.assignedValueAfterClearing.set) {
-            _this6.assignedValueAfterClearing = {
-              set: true,
-              selection: selection
-            };
-
-            _this6.downshift.current.clearSelection();
-
-            _this6.setMultipleSelectionPage(0);
-
-            return;
-          }
-
-          if (_this6.assignedValueAfterClearing.set) {
-            _this6.setState({
-              inputValue: ""
-            });
-
-            _this6.assignedValueAfterClearing.set = false;
-
-            if (Array.isArray(value)) {
-              _onChange && _onChange([].concat((0, _toConsumableArray2.default)(value), [_this6.assignedValueAfterClearing.selection]));
-            } else {
-              _onChange && _onChange([_this6.assignedValueAfterClearing.selection]);
-            }
-          }
-        }
-      }, function (_ref2) {
-        var getInputProps = _ref2.getInputProps,
-            openMenu = _ref2.openMenu,
-            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.default.createElement(Spinner, null),
-          onChange: function onChange(e) {
-            return e;
-          },
-          onBlur: function onBlur(e) {
-            return e;
-          },
-          onKeyUp: function onKeyUp(e) {
-            var inputValue = e.target.value || ""; // Set current input value into state and trigger onInput if different.
-
-            if (inputValue !== _this6.state.inputValue) {
-              _this6.setState({
-                inputValue: inputValue
-              }, function () {
-                onInput && onInput(inputValue);
-              });
-            }
-          },
-          onFocus: function onFocus(e) {
-            openMenu();
-            otherInputProps.onFocus && otherInputProps.onFocus(e);
-          }
-        }))), _this6.renderOptions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
-          unique: unique,
-          options: options
-        })), _this6.renderMultipleSelection());
-      }));
+    const selectedItems = selectedOptions.map(option => option.item);
+    onChange?.(selectedItems);
+  }, [onChange, options]);
+  const selectedOptionRenderer = useMemo(() => {
+    if (renderMultipleSelection === null) {
+      return () => null;
     }
-  }]);
-  return MultiAutoComplete;
-}(_react.default.Component);
-
-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.default.createElement(_Typography.Typography, {
-      use: "body2"
-    }, (0, _utils.getOptionText)(item, this.props));
-  },
+    return renderMultipleSelection;
+  }, [renderMultipleSelection]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminMultiAutoComplete, Object.assign({}, props, {
+    size: "lg",
+    values: values,
+    options: options,
+    optionRenderer: renderItem,
+    selectedOptionRenderer: selectedOptionRenderer,
+    emptyMessage: noResultFound,
+    onValuesChange: onValuesChange,
+    onValueSearch: onInput,
+    loading: loading,
+    allowFreeInput: allowFreeInput,
+    uniqueValues: unique
+  })));
+};
 
-  /**
-   * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
-   */
-  renderListItemLabel: function renderListItemLabel(item) {
-    return (0, _utils.getOptionText)(item, this.props);
-  }
-});
+//# sourceMappingURL=MultiAutoComplete.js.map