@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/AutoComplete/MultiAutoComplete.js

@@ -0,0 +1,638 @@
+"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
+      };
+      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).
+     */
+
+  }, {
+    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)));
+      }
+
+      var hasItems = Array.isArray(value) && value.length;
+
+      if (!hasItems) {
+        return null;
+      }
+
+      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());
+      }));
+    }
+  }]);
+  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));
+  },
+
+  /**
+   * 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);
+  }
+});