guestbell-forms 2.0.297 → 2.0.299

package/build/components/tags/Tags.js

@@ -1,11 +1,9 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Tags = exports.TagsRaw = exports.defaultTagsTranslations = void 0;
+exports.defaultTagsTranslations = exports.default = exports.TagsRaw = exports.Tags = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -13,7 +11,7 @@ var _InputGroup = require("../inputGroup/InputGroup");
 
 var _Text = require("../text/Text");
 
-var _BaseInput2 = require("../base/input/BaseInput");
+var _BaseInput = require("../base/input/BaseInput");
 
 var _Button = require("../button/Button");
 
@@ -31,43 +29,15 @@ var _Portal = _interopRequireDefault(require("@material-ui/core/Portal"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -97,287 +67,181 @@ LeftArrowIcon.defaultProps = {
   viewBox: "0 0 24 24"
 };
 
-var defaultTagsTranslations = _objectSpread(_objectSpread({}, _BaseInput2.defaultBaseTranslations), {}, {
+const defaultTagsTranslations = _objectSpread(_objectSpread({}, _BaseInput.defaultBaseTranslations), {}, {
   addNew: 'Add new'
 });
 
 exports.defaultTagsTranslations = defaultTagsTranslations;
 
-var TagButtonComponent = function TagButtonComponent(p) {
-  return /*#__PURE__*/React.createElement("a", {
-    className: p.className,
-    id: p.id,
-    onClick: p.onClick
-  }, p.children);
-};
-
-var TagsRaw = /*#__PURE__*/function (_BaseInput) {
-  _inherits(TagsRaw, _BaseInput);
+const TagButtonComponent = p => /*#__PURE__*/React.createElement("a", {
+  className: p.className,
+  id: p.id,
+  onClick: p.onClick
+}, p.children);
 
-  var _super = _createSuper(TagsRaw);
-
-  function TagsRaw(props) {
+class TagsRaw extends _BaseInput.BaseInput {
+  constructor(props) {
     var _this;
 
-    _classCallCheck(this, TagsRaw);
-
-    _this = _super.call(this, props);
+    super(props);
+    _this = this;
 
-    _defineProperty(_assertThisInitialized(_this), "textRef", void 0);
+    _defineProperty(this, "textRef", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "suggestionsRef", void 0);
+    _defineProperty(this, "suggestionsRef", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "isMobile", false);
+    _defineProperty(this, "isMobile", false);
 
-    _defineProperty(_assertThisInitialized(_this), "onTextErrorsChanged", function (textErrors) {
-      return _this.setState(function () {
-        return {
-          textErrors: textErrors
-        };
-      }, function () {
-        return _this.handleErrors();
-      });
-    });
+    _defineProperty(this, "onTextErrorsChanged", textErrors => this.setState(() => ({
+      textErrors
+    }), () => this.handleErrors()));
 
-    _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
+    _defineProperty(this, "onFocus", e => {
       var _this$props$onFocus, _this$props;
 
-      (_this$props$onFocus = (_this$props = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props, e);
+      (_this$props$onFocus = (_this$props = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props, e);
 
-      if (!_this.state.suggestionsVisible) {
+      if (!this.state.suggestionsVisible) {
         var _this$props$onSuggest, _this$props2;
 
-        (_this$props$onSuggest = (_this$props2 = _this.props).onSuggestionsOpened) === null || _this$props$onSuggest === void 0 ? void 0 : _this$props$onSuggest.call(_this$props2);
+        (_this$props$onSuggest = (_this$props2 = this.props).onSuggestionsOpened) === null || _this$props$onSuggest === void 0 ? void 0 : _this$props$onSuggest.call(_this$props2);
       }
 
-      _this.setState(function () {
-        return {
-          textIsFocused: true,
-          suggestionsVisible: true,
-          touched: true
-        };
-      }, function () {
-        return _this.handleErrors();
-      });
-
-      _this.fetchExistingTags(_this.state.value);
+      this.setState(() => ({
+        textIsFocused: true,
+        suggestionsVisible: true,
+        touched: true
+      }), () => this.handleErrors());
+      this.fetchExistingTags(this.state.value);
+      const showMobileVersion = this.props.mobileVersionEnabled && this.isMobile && (this.state.textIsFocused || this.state.suggestionsVisible);
 
-      var showMobileVersion = _this.props.mobileVersionEnabled && _this.isMobile && (_this.state.textIsFocused || _this.state.suggestionsVisible);
-
-      if (!showMobileVersion && _this.props.mobileVersionEnabled && _this.isMobile) {
-        setTimeout(function () {
+      if (!showMobileVersion && this.props.mobileVersionEnabled && this.isMobile) {
+        setTimeout(() => {
           var _this$textRef$current;
 
-          return (_this$textRef$current = _this.textRef.current) === null || _this$textRef$current === void 0 ? void 0 : _this$textRef$current.focus();
+          return (_this$textRef$current = this.textRef.current) === null || _this$textRef$current === void 0 ? void 0 : _this$textRef$current.focus();
         }, 100);
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (suggestions) {
-      return /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) {
-          var existingTag, preselectedSuggestion, _preselectedSuggestion;
-
-          return regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  if (e.key === 'Tab') {
-                    _this.setState({
-                      suggestionsVisible: false,
-                      preselectedSuggestion: undefined
-                    });
-                  }
-
-                  if (!(e.key === 'Enter' && (_this.state.value !== '' || _this.state.preselectedSuggestion !== undefined) && _this.state.textErrors.length === 0)) {
-                    _context.next = 19;
-                    break;
-                  }
-
-                  e.preventDefault();
-                  e.stopPropagation();
-                  existingTag = _this.props.existingTags && _this.props.existingTags.find(function (et) {
-                    return et.name === _this.state.value;
-                  });
-
-                  if (!(_this.state.preselectedSuggestion !== undefined)) {
-                    _context.next = 10;
-                    break;
-                  }
-
-                  _this.props.onTagsChanged(_this.props.tags.concat(suggestions[_this.state.preselectedSuggestion]));
-
-                  _this.setState({
-                    value: '',
-                    preselectedSuggestion: undefined
-                  }, function () {
-                    _this.fetchExistingTags();
-
-                    _this.handleErrors();
-                  });
-
-                  _context.next = 19;
-                  break;
-
-                case 10:
-                  if (!existingTag) {
-                    _context.next = 15;
-                    break;
-                  }
-
-                  _this.props.onTagsChanged(_this.props.tags.concat(existingTag));
-
-                  _this.setState({
-                    value: ''
-                  }, function () {
-                    _this.fetchExistingTags();
-
-                    _this.handleErrors();
-                  });
-
-                  _context.next = 19;
-                  break;
-
-                case 15:
-                  if (!_this.props.allowNew) {
-                    _context.next = 19;
-                    break;
-                  }
-
-                  _context.next = 18;
-                  return _this.addNewTag();
-
-                case 18:
-                  _this.handleErrors();
-
-                case 19:
-                  if (suggestions.length > 0 && _this.state.suggestionsVisible) {
-                    if (e.key === 'ArrowUp') {
-                      preselectedSuggestion = _this.state.preselectedSuggestion === undefined ? suggestions.length - 1 : _this.state.preselectedSuggestion === 0 ? suggestions.length - 1 : _this.state.preselectedSuggestion - 1;
-
-                      _this.setState({
-                        preselectedSuggestion: preselectedSuggestion
-                      });
-                    } else if (e.key === 'ArrowDown') {
-                      _preselectedSuggestion = _this.state.preselectedSuggestion === undefined ? 0 : _this.state.preselectedSuggestion === suggestions.length - 1 ? 0 : _this.state.preselectedSuggestion + 1;
-
-                      _this.setState({
-                        preselectedSuggestion: _preselectedSuggestion
-                      });
-                    } else {
-                      _this.setState({
-                        preselectedSuggestion: undefined
-                      });
-                    }
-                  }
-
-                case 20:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
+    _defineProperty(this, "onKeyDown", suggestions => async e => {
+      if (e.key === 'Tab') {
+        this.setState({
+          suggestionsVisible: false,
+          preselectedSuggestion: undefined
+        });
+      }
 
-        return function (_x) {
-          return _ref.apply(this, arguments);
-        };
-      }();
-    });
+      if (e.key === 'Enter' && (this.state.value !== '' || this.state.preselectedSuggestion !== undefined) && this.state.textErrors.length === 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        const existingTag = this.props.existingTags && this.props.existingTags.find(et => et.name === this.state.value);
+
+        if (this.state.preselectedSuggestion !== undefined) {
+          this.props.onTagsChanged(this.props.tags.concat(suggestions[this.state.preselectedSuggestion]));
+          this.setState({
+            value: '',
+            preselectedSuggestion: undefined
+          }, () => {
+            this.fetchExistingTags();
+            this.handleErrors();
+          });
+        } else if (existingTag) {
+          this.props.onTagsChanged(this.props.tags.concat(existingTag));
+          this.setState({
+            value: ''
+          }, () => {
+            this.fetchExistingTags();
+            this.handleErrors();
+          });
+        } else if (this.props.allowNew) {
+          await this.addNewTag();
+          this.handleErrors();
+        }
+      }
 
-    _defineProperty(_assertThisInitialized(_this), "addNewTag", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var newTag;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return _this.props.onNewTagAdded(_this.state.value);
-
-            case 2:
-              newTag = _context2.sent;
-
-              _this.setState({
-                suggestionsVisible: _this.props.closeSuggestionsAfterCreate ? false : _this.state.suggestionsVisible
-              });
-
-              if (newTag) {
-                _this.props.onTagsChanged(_this.props.tags ? _this.props.tags.concat(newTag) : [newTag]);
-              }
-
-              _this.setState({
-                value: '',
-                textErrors: []
-              }, function () {
-                _this.fetchExistingTags();
-
-                _this.handleErrors();
-              });
-
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
+      if (suggestions.length > 0 && this.state.suggestionsVisible) {
+        if (e.key === 'ArrowUp') {
+          const preselectedSuggestion = this.state.preselectedSuggestion === undefined ? suggestions.length - 1 : this.state.preselectedSuggestion === 0 ? suggestions.length - 1 : this.state.preselectedSuggestion - 1;
+          this.setState({
+            preselectedSuggestion
+          });
+        } else if (e.key === 'ArrowDown') {
+          const preselectedSuggestion = this.state.preselectedSuggestion === undefined ? 0 : this.state.preselectedSuggestion === suggestions.length - 1 ? 0 : this.state.preselectedSuggestion + 1;
+          this.setState({
+            preselectedSuggestion
+          });
+        } else {
+          this.setState({
+            preselectedSuggestion: undefined
+          });
         }
-      }, _callee2);
-    })));
+      }
+    });
 
-    _defineProperty(_assertThisInitialized(_this), "onSuggestionSelected", function (tag, lastSelected) {
-      var newTags = _this.props.tags.concat(tag);
+    _defineProperty(this, "addNewTag", async () => {
+      const newTag = await this.props.onNewTagAdded(this.state.value);
+      this.setState({
+        suggestionsVisible: this.props.closeSuggestionsAfterCreate ? false : this.state.suggestionsVisible
+      });
 
-      _this.props.onTagsChanged(newTags);
+      if (newTag) {
+        this.props.onTagsChanged(this.props.tags ? this.props.tags.concat(newTag) : [newTag]);
+      }
 
-      var isMax = newTags.length === _this.props.maxTags;
-      var finalValue = !_this.props.allowNew && !isMax && !lastSelected ? _this.state.value : '';
+      this.setState({
+        value: '',
+        textErrors: []
+      }, () => {
+        this.fetchExistingTags();
+        this.handleErrors();
+      });
+    });
 
-      _this.setState({
+    _defineProperty(this, "onSuggestionSelected", (tag, lastSelected) => {
+      const newTags = this.props.tags.concat(tag);
+      this.props.onTagsChanged(newTags);
+      const isMax = newTags.length === this.props.maxTags;
+      const finalValue = !this.props.allowNew && !isMax && !lastSelected ? this.state.value : '';
+      this.setState({
         value: finalValue,
-        suggestionsVisible: isMax || _this.props.closeSuggestionsAfterCreate ? false : _this.state.suggestionsVisible,
+        suggestionsVisible: isMax || this.props.closeSuggestionsAfterCreate ? false : this.state.suggestionsVisible,
         preselectedSuggestion: undefined,
         textErrors: []
-      }, function () {
-        if (!_this.props.maxTags || _this.props.tags.length + 1 < _this.props.maxTags) {
-          _this.fetchExistingTags(finalValue);
+      }, () => {
+        if (!this.props.maxTags || this.props.tags.length + 1 < this.props.maxTags) {
+          this.fetchExistingTags(finalValue);
         }
 
-        _this.handleErrors();
+        this.handleErrors();
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
+    _defineProperty(this, "onBlur", () => {
       var _this$props$onBlur, _this$props3;
 
-      (_this$props$onBlur = (_this$props3 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props3);
-
-      _this.setState({
+      (_this$props$onBlur = (_this$props3 = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props3);
+      this.setState({
         textIsFocused: false,
         preselectedSuggestion: undefined
-      }, function () {
-        return _this.handleErrors();
-      });
+      }, () => this.handleErrors());
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onTextChanged", function (e, isValid) {
-      var value = e.target.value;
-
-      _this.setState(function () {
-        return {
-          value: value,
-          isValid: isValid,
-          textIsValid: isValid,
-          suggestionsVisible: true
-        };
-      }, function () {
-        return _this.handleErrors();
-      });
-
-      _this.fetchExistingTags(e.target.value);
+    _defineProperty(this, "onTextChanged", (e, isValid) => {
+      const value = e.target.value;
+      this.setState(() => ({
+        value,
+        isValid: isValid,
+        textIsValid: isValid,
+        suggestionsVisible: true
+      }), () => this.handleErrors());
+      this.fetchExistingTags(e.target.value);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleErrors", function () {
-      var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.tags;
+    _defineProperty(this, "handleErrors", function () {
+      let tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.tags;
 
-      var errors = _this.getErrors(tags);
+      let errors = _this.getErrors(tags);
 
       if (errors.length > 0) {
         _this.setInvalid(errors);
@@ -386,35 +250,25 @@ var TagsRaw = /*#__PURE__*/function (_BaseInput) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "tagClick", function (tag) {
-      return function () {
-        _this.props.onTagClick && _this.props.onTagClick(tag);
-      };
+    _defineProperty(this, "tagClick", tag => () => {
+      this.props.onTagClick && this.props.onTagClick(tag);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "tagRemoveClick", function (tag) {
-      return function (e) {
-        e.stopPropagation();
-
-        var newTags = _this.props.tags.filter(function (sv) {
-          return sv.id !== tag.id;
-        });
-        /*if (newTags.length === 0) {
-          setTimeout(() => this.focus(), 50);
-        }
-        this.setState({
-          suggestionsVisible: false,
-        });*/
-
-
-        _this.props.onTagsChanged && _this.props.onTagsChanged(newTags);
-
-        _this.handleErrors(newTags); // this.fetchExistingTags();
-
-      };
+    _defineProperty(this, "tagRemoveClick", tag => e => {
+      e.stopPropagation();
+      const newTags = this.props.tags.filter(sv => sv.id !== tag.id);
+      /*if (newTags.length === 0) {
+        setTimeout(() => this.focus(), 50);
+      }
+      this.setState({
+        suggestionsVisible: false,
+      });*/
+
+      this.props.onTagsChanged && this.props.onTagsChanged(newTags);
+      this.handleErrors(newTags); // this.fetchExistingTags();
     });
 
-    _this.state = _objectSpread(_objectSpread({}, _this.state), {}, {
+    this.state = _objectSpread(_objectSpread({}, this.state), {}, {
       textErrors: [],
       textIsFocused: false,
       suggestionsVisible: false,
@@ -422,316 +276,266 @@ var TagsRaw = /*#__PURE__*/function (_BaseInput) {
       textIsValid: false,
       fetchedExistingTags: []
     });
-    _this.textRef = /*#__PURE__*/React.createRef();
-    _this.suggestionsRef = /*#__PURE__*/React.createRef();
-    _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized(_this));
-    _this.handleLeaveMobileClick = _this.handleLeaveMobileClick.bind(_assertThisInitialized(_this));
+    this.textRef = /*#__PURE__*/React.createRef();
+    this.suggestionsRef = /*#__PURE__*/React.createRef();
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.handleLeaveMobileClick = this.handleLeaveMobileClick.bind(this);
 
     if (props.mobileVersionEnabled) {
       var _require;
 
-      _this.isMobile = (_require = require('react-device-detect')) === null || _require === void 0 ? void 0 : _require.isMobile;
+      this.isMobile = (_require = require('react-device-detect')) === null || _require === void 0 ? void 0 : _require.isMobile;
     }
-
-    return _this;
   }
 
-  _createClass(TagsRaw, [{
-    key: "focus",
-    value: function focus() {
-      if (this.textRef.current) {
-        this.textRef.current.focus();
-      }
+  focus() {
+    if (this.textRef.current) {
+      this.textRef.current.focus();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(oldProps) {
-      if (oldProps.tags !== this.props.tags || oldProps.validators !== this.props.validators || oldProps.customValidators !== this.props.customValidators || oldProps.required !== this.props.required) {
-        this.handleErrors(this.props.tags);
-      }
+  }
+
+  componentDidUpdate(oldProps) {
+    if (oldProps.tags !== this.props.tags || oldProps.validators !== this.props.validators || oldProps.customValidators !== this.props.customValidators || oldProps.required !== this.props.required) {
+      this.handleErrors(this.props.tags);
     }
-  }, {
-    key: "handleLeaveMobileClick",
-    value: function handleLeaveMobileClick() {
-      this.setState({
-        textIsFocused: false,
-        suggestionsVisible: false,
-        preselectedSuggestion: undefined
-      });
+  }
+
+  handleLeaveMobileClick() {
+    this.setState({
+      textIsFocused: false,
+      suggestionsVisible: false,
+      preselectedSuggestion: undefined
+    });
+  }
+
+  handleClickOutside(e) {
+    var _this$containerRef$cu, _this$containerRef$cu2;
+
+    if (!this.containerRef.current || (_this$containerRef$cu = this.containerRef.current.querySelector('.tags-input__tag__wrapper')) !== null && _this$containerRef$cu !== void 0 && _this$containerRef$cu.contains(e.target) || (_this$containerRef$cu2 = this.containerRef.current.querySelector('.tags-input__text-input')) !== null && _this$containerRef$cu2 !== void 0 && _this$containerRef$cu2.contains(e.target) || !this.suggestionsRef.current || this.suggestionsRef.current.contains(e.target)) {
+      return;
     }
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside(e) {
-      var _this$containerRef$cu,
-          _this$containerRef$cu2,
-          _this2 = this;
-
-      if (!this.containerRef.current || (_this$containerRef$cu = this.containerRef.current.querySelector('.tags-input__tag__wrapper')) !== null && _this$containerRef$cu !== void 0 && _this$containerRef$cu.contains(e.target) || (_this$containerRef$cu2 = this.containerRef.current.querySelector('.tags-input__text-input')) !== null && _this$containerRef$cu2 !== void 0 && _this$containerRef$cu2.contains(e.target) || !this.suggestionsRef.current || this.suggestionsRef.current.contains(e.target)) {
-        return;
-      }
 
-      if (this.state.suggestionsVisible) {
-        var _this$props$onSuggest2, _this$props4;
+    if (this.state.suggestionsVisible) {
+      var _this$props$onSuggest2, _this$props4;
 
-        (_this$props$onSuggest2 = (_this$props4 = this.props).onSuggestionsClosed) === null || _this$props$onSuggest2 === void 0 ? void 0 : _this$props$onSuggest2.call(_this$props4);
-      }
+      (_this$props$onSuggest2 = (_this$props4 = this.props).onSuggestionsClosed) === null || _this$props$onSuggest2 === void 0 ? void 0 : _this$props$onSuggest2.call(_this$props4);
+    }
 
-      this.setState({
-        suggestionsVisible: false,
-        preselectedSuggestion: undefined
-      });
+    this.setState({
+      suggestionsVisible: false,
+      preselectedSuggestion: undefined
+    });
 
-      if (this.props.addNewOnBlur && this.state.value) {
-        var suggestions = this.getSuggestions();
-        var existing = suggestions.find(function (s) {
-          return s.name === _this2.state.value;
-        });
+    if (this.props.addNewOnBlur && this.state.value) {
+      const suggestions = this.getSuggestions();
+      const existing = suggestions.find(s => s.name === this.state.value);
 
-        if (existing) {
-          this.onSuggestionSelected(existing, suggestions.length === 1);
-        } else if (this.props.allowNew) {
-          this.addNewTag();
-        }
+      if (existing) {
+        this.onSuggestionSelected(existing, suggestions.length === 1);
+      } else if (this.props.allowNew) {
+        this.addNewTag();
       }
-      /* else if (this.state.value) {
-      this.setState({ value: '' });
-      }*/
-
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mousedown', this.handleClickOutside);
-      document.addEventListener('touchstart', this.handleClickOutside);
-      this.handleErrors(this.props.tags);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.handleClickOutside);
-      document.removeEventListener('touchstart', this.handleClickOutside);
+    /* else if (this.state.value) {
+    this.setState({ value: '' });
+    }*/
 
-      _get(_getPrototypeOf(TagsRaw.prototype), "componentWillUnmount", this).call(this);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var translations = this.getTranslations(defaultTagsTranslations);
-      var textProps = this.props.textProps ? this.props.textProps : {};
-      var suggestions = this.getSuggestions();
-      var showMobileVersion = this.props.mobileVersionEnabled && this.isMobile && (this.state.textIsFocused || this.state.suggestionsVisible);
-      var LeaveMobileButton = showMobileVersion ? /*#__PURE__*/React.createElement(_Button.Button, {
-        className: "tags-input__leaveMobileTagsButton line-height--0",
-        onClick: this.handleLeaveMobileClick,
-        noShadow: true,
-        unobtrusive: true
-      }, /*#__PURE__*/React.createElement(LeftArrowIcon, null)) : undefined;
-      var showInput = Boolean((!this.props.maxTags || this.props.maxTags > (this.props.tags && this.props.tags.length)) && !this.props.readOnly);
-      return /*#__PURE__*/React.createElement(_Portal.default, {
-        container: document.body,
-        disablePortal: !showMobileVersion
-      }, /*#__PURE__*/React.createElement(_InputGroup.InputGroup, {
-        title: this.props.title,
-        tooltip: this.props.tooltip
-      }, /*#__PURE__*/React.createElement("div", _extends({}, this.props.id && {
-        id: this.props.id
-      }, {
-        className: (0, _classnames.default)('input__base tags-input', this.getValidationClass(), this.props.className, {
-          'tags-input--readOnly': this.props.readOnly,
-          'tags-input--hasPlaceholder': this.props.textProps && this.props.textProps.placeholder,
-          'tags-input--mobile': showMobileVersion
-        }),
-        ref: this.containerRef
-      }), showMobileVersion && /*#__PURE__*/React.createElement("div", {
-        className: "tags-input__mobileBackdrop"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "tags-input__tags__wrapper"
-      }, !showInput && showMobileVersion && LeaveMobileButton, this.props.tags && this.props.tags.length > 0 ? /*#__PURE__*/React.createElement("div", {
-        className: "tags-input__tag__wrapper"
-      }, this.props.tags.map(function (item, index) {
-        return _this3.renderTag(item, index);
-      })) : this.props.readOnly && /*#__PURE__*/React.createElement("div", {
-        className: "tags-input__tag__wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "tags-input__tag"
-      }, this.props.readonlyEmptyPlaceholder))), showInput && /*#__PURE__*/React.createElement("div", {
-        className: 'tags-input__tags__wrapper ' + (this.props.readOnly ? 'filled ' : '')
-      }, /*#__PURE__*/React.createElement(_Text.Text, _extends({
-        showClearButton: true
-      }, textProps, this.props.id && {
-        id: this.props.id + '-text-input'
-      }, {
-        ref: this.textRef,
-        required: this.props.tags.length > 0 ? false : this.props.required,
-        className: 'tags-input__text-input ' + (textProps.className ? textProps.className : ''),
-        onKeyDown: this.onKeyDown(suggestions),
-        onErrorsChanged: this.onTextErrorsChanged,
-        onChange: this.onTextChanged,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur,
-        value: this.state.value,
-        readOnly: this.props.readOnly,
-        showValidation: false,
-        ignoreContext: true,
-        validators: this.props.validators,
-        customValidators: this.props.customValidators,
-        before: LeaveMobileButton
-      })), this.state.suggestionsVisible && this.props.showSuggestions && /*#__PURE__*/React.createElement(_TagsSuggestions.default, _extends({}, this.props.id && {
-        id: this.props.id + '-text-input'
-      }, {
-        className: (0, _classnames.default)(this.props.tagsSuggestionsClassName),
-        innerRef: this.suggestionsRef,
-        anchorEl: this.containerRef.current,
-        allowNew: this.props.allowNew,
-        preselectedSuggestion: this.state.preselectedSuggestion,
-        loading: this.state.fetchingExistingTags || this.props.isLoading,
-        LoadingComponent: this.props.suggestionsLoadingComponent,
-        isVisible: this.state.suggestionsVisible,
-        EmptyComponent: this.props.suggestionsEmptyComponent,
-        WaitingForMoreInputComponent: this.props.waitingForMoreInputComponent,
-        isWaitingForMoreInput: this.state.value.length < this.props.minLettersToFetch,
-        tags: suggestions,
-        onSelected: this.onSuggestionSelected,
-        value: this.state.value,
-        AddNewTagComponent: this.props.allowNew && this.state.value !== '' && (!this.props.existingTags || !this.props.existingTags.find(function (e) {
-          return e.name === _this3.state.value;
-        })) && (!this.state.fetchedExistingTags || !this.state.fetchedExistingTags.find(function (e) {
-          return e.name === _this3.state.value;
-        })) && this.state.textIsValid && /*#__PURE__*/React.createElement(_Button.Button, _extends({}, this.props.id && {
-          id: this.props.id + '-add-new-button'
-        }, {
-          className: "tags-input__suggestion tags-input__add-new",
-          dropdown: true,
-          onClick: this.addNewTag
-        }), translations.addNew, " \"", this.state.value, "\""),
-        SuggestionTag: this.props.SuggestionTag,
-        popperProps: this.props.popperProps
-      }))), this.renderDefaultValidation(), this.props.label && /*#__PURE__*/React.createElement("label", {
-        className: this.state.value !== '' || this.state.textIsFocused || this.props.readOnly || this.props.tags.length >= this.props.maxTags || showMobileVersion ? 'label--focused' : ''
-      }, this.renderLabel()))));
-    }
-  }, {
-    key: "getErrors",
-    value: function getErrors(tags) {
-      var errors = [];
+  }
 
-      if (tags.length < this.props.maxTags) {
-        errors = errors.concat(this.state.textErrors);
-      }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside);
+    document.addEventListener('touchstart', this.handleClickOutside);
+    this.handleErrors(this.props.tags);
+  }
 
-      if (this.state.value !== '' && tags.length === 0 && this.props.required) {
-        errors = errors.concat(this.getTranslations(this.props.translations).required);
-      }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+    document.removeEventListener('touchstart', this.handleClickOutside);
+    super.componentWillUnmount();
+  }
 
-      if (this.state.value && this.props.allowNew && !this.state.textIsFocused) {
-        errors = errors.concat(this.props.valueNotAddedError);
-      }
+  render() {
+    const translations = this.getTranslations(defaultTagsTranslations);
+    const textProps = this.props.textProps ? this.props.textProps : {};
+    const suggestions = this.getSuggestions();
+    const showMobileVersion = this.props.mobileVersionEnabled && this.isMobile && (this.state.textIsFocused || this.state.suggestionsVisible);
+    const LeaveMobileButton = showMobileVersion ? /*#__PURE__*/React.createElement(_Button.Button, {
+      className: "tags-input__leaveMobileTagsButton line-height--0",
+      onClick: this.handleLeaveMobileClick,
+      noShadow: true,
+      unobtrusive: true
+    }, /*#__PURE__*/React.createElement(LeftArrowIcon, null)) : undefined;
+    const showInput = Boolean((!this.props.maxTags || this.props.maxTags > (this.props.tags && this.props.tags.length)) && !this.props.readOnly);
+    return /*#__PURE__*/React.createElement(_Portal.default, {
+      container: document.body,
+      disablePortal: !showMobileVersion
+    }, /*#__PURE__*/React.createElement(_InputGroup.InputGroup, {
+      title: this.props.title,
+      tooltip: this.props.tooltip
+    }, /*#__PURE__*/React.createElement("div", _extends({}, this.props.id && {
+      id: this.props.id
+    }, {
+      className: (0, _classnames.default)('input__base tags-input', this.getValidationClass(), this.props.className, {
+        'tags-input--readOnly': this.props.readOnly,
+        'tags-input--hasPlaceholder': this.props.textProps && this.props.textProps.placeholder,
+        'tags-input--mobile': showMobileVersion
+      }),
+      ref: this.containerRef
+    }), showMobileVersion && /*#__PURE__*/React.createElement("div", {
+      className: "tags-input__mobileBackdrop"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "tags-input__tags__wrapper"
+    }, !showInput && showMobileVersion && LeaveMobileButton, this.props.tags && this.props.tags.length > 0 ? /*#__PURE__*/React.createElement("div", {
+      className: "tags-input__tag__wrapper"
+    }, this.props.tags.map((item, index) => this.renderTag(item, index))) : this.props.readOnly && /*#__PURE__*/React.createElement("div", {
+      className: "tags-input__tag__wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "tags-input__tag"
+    }, this.props.readonlyEmptyPlaceholder))), showInput && /*#__PURE__*/React.createElement("div", {
+      className: 'tags-input__tags__wrapper ' + (this.props.readOnly ? 'filled ' : '')
+    }, /*#__PURE__*/React.createElement(_Text.Text, _extends({
+      showClearButton: true
+    }, textProps, this.props.id && {
+      id: this.props.id + '-text-input'
+    }, {
+      ref: this.textRef,
+      required: this.props.tags.length > 0 ? false : this.props.required,
+      className: 'tags-input__text-input ' + (textProps.className ? textProps.className : ''),
+      onKeyDown: this.onKeyDown(suggestions),
+      onErrorsChanged: this.onTextErrorsChanged,
+      onChange: this.onTextChanged,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      value: this.state.value,
+      readOnly: this.props.readOnly,
+      showValidation: false,
+      ignoreContext: true,
+      validators: this.props.validators,
+      customValidators: this.props.customValidators,
+      before: LeaveMobileButton
+    })), this.state.suggestionsVisible && this.props.showSuggestions && /*#__PURE__*/React.createElement(_TagsSuggestions.default, _extends({}, this.props.id && {
+      id: this.props.id + '-text-input'
+    }, {
+      className: (0, _classnames.default)(this.props.tagsSuggestionsClassName),
+      innerRef: this.suggestionsRef,
+      anchorEl: this.containerRef.current,
+      allowNew: this.props.allowNew,
+      preselectedSuggestion: this.state.preselectedSuggestion,
+      loading: this.state.fetchingExistingTags || this.props.isLoading,
+      LoadingComponent: this.props.suggestionsLoadingComponent,
+      isVisible: this.state.suggestionsVisible,
+      EmptyComponent: this.props.suggestionsEmptyComponent,
+      WaitingForMoreInputComponent: this.props.waitingForMoreInputComponent,
+      isWaitingForMoreInput: this.state.value.length < this.props.minLettersToFetch,
+      tags: suggestions,
+      onSelected: this.onSuggestionSelected,
+      value: this.state.value,
+      AddNewTagComponent: this.props.allowNew && this.state.value !== '' && (!this.props.existingTags || !this.props.existingTags.find(e => e.name === this.state.value)) && (!this.state.fetchedExistingTags || !this.state.fetchedExistingTags.find(e => e.name === this.state.value)) && this.state.textIsValid && /*#__PURE__*/React.createElement(_Button.Button, _extends({}, this.props.id && {
+        id: this.props.id + '-add-new-button'
+      }, {
+        className: "tags-input__suggestion tags-input__add-new",
+        dropdown: true,
+        onClick: this.addNewTag
+      }), translations.addNew, " \"", this.state.value, "\""),
+      SuggestionTag: this.props.SuggestionTag,
+      popperProps: this.props.popperProps
+    }))), this.renderDefaultValidation(), this.props.label && /*#__PURE__*/React.createElement("label", {
+      className: this.state.value !== '' || this.state.textIsFocused || this.props.readOnly || this.props.tags.length >= this.props.maxTags || showMobileVersion ? 'label--focused' : ''
+    }, this.renderLabel()))));
+  }
 
-      if (this.props.maxTags < (this.props.tags && this.props.tags.length)) {
-        errors = errors.concat(this.props.maxTagsSurpassedError);
-      }
+  getErrors(tags) {
+    let errors = [];
 
-      return errors.filter(function (i) {
-        return i;
-      });
+    if (tags.length < this.props.maxTags) {
+      errors = errors.concat(this.state.textErrors);
     }
-  }, {
-    key: "fetchExistingTags",
-    value: function fetchExistingTags() {
-      var _this4 = this;
-
-      var startsWith = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-      if (this.props.fetchExistingTags && startsWith.length >= this.props.minLettersToFetch) {
-        var timer = setTimeout(function () {
-          return _this4.setState(function () {
-            return {
-              fetchingExistingTags: true
-            };
-          });
-        }, this.props.loadingDelayMs);
-        this.props.fetchExistingTags(startsWith).then(function (fetchedExistingTags) {
-          clearTimeout(timer);
-
-          _this4.setState(function () {
-            return {
-              fetchedExistingTags: fetchedExistingTags,
-              fetchingExistingTags: false
-            };
-          });
-        });
-      }
+
+    if (this.state.value !== '' && tags.length === 0 && this.props.required) {
+      errors = errors.concat(this.getTranslations(this.props.translations).required);
     }
-  }, {
-    key: "getSuggestions",
-    value: function getSuggestions() {
-      var _this5 = this;
-
-      var existingTags = [].concat(this.props.existingTags ? this.props.existingTags : []).concat(this.state.fetchedExistingTags ? this.state.fetchedExistingTags : []);
-      var filteredTags = this.props.filterExistingTags(this.state.value ? this.state.value.toLowerCase() : '', existingTags);
-      var suggestions = filteredTags.filter(function (tag) {
-        return _this5.props.allowSameTagMultipleTimes || !_this5.props.tags.some(function (t) {
-          return t.id === tag.id;
-        });
-      }).slice(0, this.props.maxSuggestions);
-      return suggestions;
+
+    if (this.state.value && this.props.allowNew && !this.state.textIsFocused) {
+      errors = errors.concat(this.props.valueNotAddedError);
     }
-  }, {
-    key: "renderTag",
-    value: function renderTag(tag, index) {
-      var body = /*#__PURE__*/React.createElement(React.Fragment, null, tag.name, !this.props.readOnly && /*#__PURE__*/React.createElement(_Button.Button, _extends({}, this.props.id && {
-        id: this.props.id + '-tag-' + index.toString()
-      }, {
-        circular: true,
-        blank: true,
-        onClick: this.tagRemoveClick(tag),
-        className: "ml-1 transform-rotate--45 line-height--0 p-0",
-        Component: TagButtonComponent,
-        preventsDefault: false
-      }), /*#__PURE__*/React.createElement(PlusIcon, null)));
-      var className = (0, _classnames.default)('tags-input__tag', {
-        'tags-input__tag-chip': this.props.showChips
+
+    if (this.props.maxTags < (this.props.tags && this.props.tags.length)) {
+      errors = errors.concat(this.props.maxTagsSurpassedError);
+    }
+
+    return errors.filter(i => i);
+  }
+
+  fetchExistingTags() {
+    let startsWith = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+    if (this.props.fetchExistingTags && startsWith.length >= this.props.minLettersToFetch) {
+      const timer = setTimeout(() => this.setState(() => ({
+        fetchingExistingTags: true
+      })), this.props.loadingDelayMs);
+      this.props.fetchExistingTags(startsWith).then(fetchedExistingTags => {
+        clearTimeout(timer);
+        this.setState(() => ({
+          fetchedExistingTags,
+          fetchingExistingTags: false
+        }));
       });
+    }
+  }
 
-      if (this.props.onTagClick) {
-        return /*#__PURE__*/React.createElement(_Button.Button, {
-          onClick: this.tagClick(tag),
-          small: true,
-          className: className,
-          key: index
-        }, body);
-      }
+  getSuggestions() {
+    const existingTags = [].concat(this.props.existingTags ? this.props.existingTags : []).concat(this.state.fetchedExistingTags ? this.state.fetchedExistingTags : []);
+    const filteredTags = this.props.filterExistingTags(this.state.value ? this.state.value.toLowerCase() : '', existingTags);
+    let suggestions = filteredTags.filter(tag => this.props.allowSameTagMultipleTimes || !this.props.tags.some(t => t.id === tag.id)).slice(0, this.props.maxSuggestions);
+    return suggestions;
+  }
+
+  renderTag(tag, index) {
+    const body = /*#__PURE__*/React.createElement(React.Fragment, null, tag.name, !this.props.readOnly && /*#__PURE__*/React.createElement(_Button.Button, _extends({}, this.props.id && {
+      id: this.props.id + '-tag-' + index.toString()
+    }, {
+      circular: true,
+      blank: true,
+      onClick: this.tagRemoveClick(tag),
+      className: "ml-1 transform-rotate--45 line-height--0 p-0",
+      Component: TagButtonComponent,
+      preventsDefault: false
+    }), /*#__PURE__*/React.createElement(PlusIcon, null)));
+    const className = (0, _classnames.default)('tags-input__tag', {
+      'tags-input__tag-chip': this.props.showChips
+    });
 
-      return /*#__PURE__*/React.createElement("div", {
+    if (this.props.onTagClick) {
+      return /*#__PURE__*/React.createElement(_Button.Button, {
         onClick: this.tagClick(tag),
+        small: true,
         className: className,
         key: index
       }, body);
     }
-  }]);
 
-  return TagsRaw;
-}(_BaseInput2.BaseInput);
+    return /*#__PURE__*/React.createElement("div", {
+      onClick: this.tagClick(tag),
+      className: className,
+      key: index
+    }, body);
+  }
+
+}
 
 exports.TagsRaw = TagsRaw;
 
-_defineProperty(TagsRaw, "defaultProps", _objectSpread(_objectSpread({}, _BaseInput2.BaseInput.defaultProps), {}, {
+_defineProperty(TagsRaw, "defaultProps", _objectSpread(_objectSpread({}, _BaseInput.BaseInput.defaultProps), {}, {
   disabled: false,
   className: '',
   tags: [],
   existingTags: [],
   maxTags: 1000,
-  onTagsChanged: function onTagsChanged() {
-    return undefined;
-  },
-  onNewTagAdded: function onNewTagAdded(newTagName) {
-    return Promise.resolve({
-      name: newTagName,
-      id: new Date().getTime()
-    });
-  },
+  onTagsChanged: () => undefined,
+  onNewTagAdded: newTagName => Promise.resolve({
+    name: newTagName,
+    id: new Date().getTime()
+  }),
   valueNotAddedError: /*#__PURE__*/React.createElement("span", null, "You forgot to add tag"),
   maxTagsSurpassedError: /*#__PURE__*/React.createElement("span", null, "Maximum number of tags surpassed"),
   waitingForMoreInputComponent: /*#__PURE__*/React.createElement("span", null, "Waiting for more input..."),
@@ -741,11 +545,7 @@ _defineProperty(TagsRaw, "defaultProps", _objectSpread(_objectSpread({}, _BaseIn
   }),
   suggestionsEmptyComponent: 'No existing tags...',
   loadingDelayMs: 500,
-  filterExistingTags: function filterExistingTags(text, tags) {
-    return tags.filter(function (tag) {
-      return tag.name && tag.name.toLowerCase().startsWith(text);
-    });
-  },
+  filterExistingTags: (text, tags) => tags.filter(tag => tag.name && tag.name.toLowerCase().startsWith(text)),
   maxSuggestions: 5,
   addNewOnBlur: false,
   translations: defaultTagsTranslations,
@@ -754,7 +554,7 @@ _defineProperty(TagsRaw, "defaultProps", _objectSpread(_objectSpread({}, _BaseIn
   closeSuggestionsAfterCreate: false
 }));
 
-var Tags = (0, _withThemeContext.withThemeContext)( // tslint:disable-next-line: no-any
+const Tags = (0, _withThemeContext.withThemeContext)( // tslint:disable-next-line: no-any
 (0, _withFormContext.withFormContext)(TagsRaw), 'tags');
 exports.Tags = Tags;
 var _default = Tags;