@semcore/bulk-textarea 1.0.1

package/lib/cjs/components/InputField/InputField.js

@@ -0,0 +1,1110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputField = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _index = require("@semcore/utils/lib/core/index");
+var _core = require("@semcore/core");
+var _react = _interopRequireDefault(require("react"));
+var _flexBox = require("@semcore/flex-box");
+var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
+var _ariaProps = require("@semcore/utils/lib/ariaProps");
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+var _dompurify = _interopRequireDefault(require("dompurify"));
+/*__reshadow-styles__:"./inputField.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SInputField_8zz08_gg_>div{box-sizing:content-box;outline:0;border-radius:var(--intergalactic-control-rounded, 6px);border-color:var(--intergalactic-border-primary, #c4c7cf);border-style:solid;border-width:1px;overflow:auto;position:relative;color:var(--intergalactic-text-primary, #191b23);word-wrap:break-word;word-break:break-word;font-family:inherit}.___SInputField_8zz08_gg_>div:empty::before{content:\"1. \"attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_8zz08_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_8zz08_gg_>div:nth-child(even)::before{content:counter(row)\".\";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SInputField_8zz08_gg_>div>p{counter-increment:row;display:flex;margin:0 0 var(--intergalactic-spacing-1x, 4px)0;position:relative;word-break:break-all;white-space:pre-wrap;padding-right:20px}.___SInputField_8zz08_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_8zz08_gg_>div>p:not(:empty)::before{content:counter(row)\".\";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SInputField_8zz08_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_8zz08_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:8px}.___SInputField_8zz08_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:16px}.___SInputField_8zz08_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:8px}.___SInputField_8zz08_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_8zz08_gg_.__showErrors_8zz08_gg_>div[aria-invalid]>p[aria-invalid]:after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo=\\ );position:absolute;right:0}.___SInputField_8zz08_gg_._size_m_8zz08_gg_>div{padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);min-height:calc(var(--minRows_8zz08)*20px);max-height:calc((var(--maxRows_8zz08) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_8zz08_gg_._size_l_8zz08_gg_>div:empty,.___SInputField_8zz08_gg_._size_m_8zz08_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_8zz08_gg_._size_m_8zz08_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_8zz08_gg_._size_l_8zz08_gg_>div{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);min-height:calc(var(--minRows_8zz08)*24px);max-height:calc((var(--maxRows_8zz08) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_8zz08_gg_._size_l_8zz08_gg_>div:empty::before{left:calc(var(--intergalactic-spacing-4x, 16px) - var(--intergalactic-spacing-05x, 2px))}.___SInputField_8zz08_gg_._state_normal_8zz08_gg_:not(.__disabled_8zz08_gg_)>div:focus:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SInputField_8zz08_gg_._state_valid_8zz08_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_8zz08_gg_._state_valid_8zz08_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5))}.___SInputField_8zz08_gg_._state_invalid_8zz08_gg_>div{border-color:var(--intergalactic-border-critical-active, #d1002f);background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px);background-repeat:repeat-y}.___SInputField_8zz08_gg_._state_invalid_8zz08_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SInputField_8zz08_gg_.__readonly_8zz08_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_8zz08_gg_.__disabled_8zz08_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}" /*__inner_css_end__*/, "8zz08_gg_") /*__reshadow_css_end__*/, {
+  "__SInputField": "___SInputField_8zz08_gg_",
+  "_showErrors": "__showErrors_8zz08_gg_",
+  "_readonly": "__readonly_8zz08_gg_",
+  "_disabled": "__disabled_8zz08_gg_",
+  "_size_m": "_size_m_8zz08_gg_",
+  "--minRows": "--minRows_8zz08",
+  "--maxRows": "--maxRows_8zz08",
+  "_size_l": "_size_l_8zz08_gg_",
+  "_state_normal": "_state_normal_8zz08_gg_",
+  "_state_valid": "_state_valid_8zz08_gg_",
+  "_state_invalid": "_state_invalid_8zz08_gg_"
+});
+var InputField = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(InputField, _Component);
+  var _super = (0, _createSuper2["default"])(InputField);
+  function InputField(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, InputField);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "delimiter", '\n');
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "skipEmptyLines", true);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "emptyLineValue", '');
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "spaceLineValue", ' ');
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "textarea", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popper", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setPopperTrigger", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "errorByInteraction", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTriggerTimeout", 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isScrolling", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollingTimeout", 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleErrorsPopperTimeout", 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isFocusing", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "linesCountTimeout", 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      visibleErrorPopper: false,
+      keyboardLineIndex: -1,
+      mouseLineIndex: -1
+    });
+    _this.handlePaste = _this.handlePaste.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleMouseDown = _this.handleMouseDown.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleMouseMove = _this.handleMouseMove.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleMouseLeave = _this.handleMouseLeave.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleScroll = _this.handleScroll.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleSelectAll = _this.handleSelectAll.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.textarea = _this.createContentEditableElement(props);
+    return _this;
+  }
+  (0, _createClass2["default"])(InputField, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        value: null,
+        linesCount: null,
+        errorIndex: null
+      };
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$containerRef$cu;
+      (_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 ? void 0 : _this$containerRef$cu.append(this.textarea);
+      this.handleValueOutChange();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this2 = this;
+      var _this$props = this.props,
+        value = _this$props.value,
+        errors = _this$props.errors,
+        errorIndex = _this$props.errorIndex,
+        showErrors = _this$props.showErrors,
+        disabled = _this$props.disabled,
+        readonly = _this$props.readonly,
+        highlightErrorIndex = _this$props.highlightErrorIndex,
+        lineProcessing = _this$props.lineProcessing,
+        _this$props$ariaDesc = _this$props['aria-describedby'],
+        ariaDescribedby = _this$props$ariaDesc === void 0 ? '' : _this$props$ariaDesc;
+      if (prevProps.value !== value && value !== this.getValues().join(this.delimiter)) {
+        this.handleValueOutChange();
+      }
+      if (prevProps.showErrors !== showErrors || prevProps.errors.length !== errors.length) {
+        this.toggleAriaInvalid(showErrors, errors.length);
+        if (showErrors === false) {
+          this.textarea.setAttribute('aria-describedby', ariaDescribedby);
+        }
+      }
+      if (prevProps.errorIndex !== errorIndex && highlightErrorIndex) {
+        this.handleChangeErrorIndex(errorIndex);
+      }
+      if (prevProps.disabled !== disabled || prevProps.readonly !== readonly) {
+        if (this.isDisabled) {
+          this.textarea.setAttribute('contenteditable', 'false');
+          this.removeEventListeners(this.textarea);
+        } else {
+          this.textarea.setAttribute('contenteditable', 'true');
+          this.addEventListeners(this.textarea);
+        }
+        if (disabled) {
+          this.textarea.setAttribute('tabindex', '-1');
+        } else {
+          this.textarea.setAttribute('tabindex', '0');
+        }
+      }
+      var keyboardLineIndex = this.state.keyboardLineIndex;
+      if (prevState.keyboardLineIndex !== -1 && prevState.keyboardLineIndex !== keyboardLineIndex) {
+        if (lineProcessing) {
+          var _lines$prevState$keyb;
+          var lines = this.getValues();
+          var newValue = lineProcessing((_lines$prevState$keyb = lines[prevState.keyboardLineIndex]) !== null && _lines$prevState$keyb !== void 0 ? _lines$prevState$keyb : '', lines);
+          var newValueTextNode = document.createTextNode(newValue);
+          var paragraph = this.textarea.childNodes.item(prevState.keyboardLineIndex);
+          if (paragraph instanceof HTMLParagraphElement) {
+            if (newValue === '') {
+              paragraph.innerHTML = this.emptyLineValue;
+            } else {
+              paragraph.replaceChild(newValueTextNode, paragraph.childNodes.item(0));
+            }
+          }
+          this.validateLine(paragraph);
+          setTimeout(function () {
+            var newNode = _this2.textarea.childNodes.item(keyboardLineIndex);
+            if (newNode) {
+              _this2.setErrorIndex(newNode);
+            }
+          }, 0); // need this timeout to update errorIndex to the new (usually empty) line
+        }
+
+        if (!showErrors) {
+          this.recalculateErrors();
+        }
+        this.recalculateLinesCount();
+        this.asProps.onChangeLineIndex(keyboardLineIndex);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.removeEventListeners(this.textarea);
+    }
+  }, {
+    key: "isDisabled",
+    get: function get() {
+      var _this$asProps = this.asProps,
+        disabled = _this$asProps.disabled,
+        readonly = _this$asProps.readonly;
+      return Boolean(disabled || readonly);
+    }
+  }, {
+    key: "popperDescribedId",
+    get: function get() {
+      var uid = this.asProps.uid;
+      return "bulk-textarea-".concat(uid, "-popper-describedby");
+    }
+  }, {
+    key: "errorMessage",
+    get: function get() {
+      var _ref3, _errorItem$errorMessa, _errorItem, _errorItem2;
+      var _this$asProps2 = this.asProps,
+        errors = _this$asProps2.errors,
+        errorIndex = _this$asProps2.errorIndex,
+        commonErrorMessage = _this$asProps2.commonErrorMessage,
+        lastError = _this$asProps2.lastError;
+      var _this$state = this.state,
+        mouseLineIndex = _this$state.mouseLineIndex,
+        keyboardLineIndex = _this$state.keyboardLineIndex;
+      var currentLineIndex = this.errorByInteraction === 'keyboard' ? keyboardLineIndex : this.errorByInteraction === 'mouse' ? mouseLineIndex : -1;
+      var errorItem = errors[errorIndex];
+      if (currentLineIndex !== -1) {
+        errorItem = errors.find(function (e) {
+          return (e === null || e === void 0 ? void 0 : e.lineIndex) === currentLineIndex;
+        });
+      }
+      var errorMessage = errors.length === 0 && !lastError // show any errors only if there are at least one error
+      ? null : (_ref3 = (_errorItem$errorMessa = (_errorItem = errorItem) === null || _errorItem === void 0 ? void 0 : _errorItem.errorMessage) !== null && _errorItem$errorMessa !== void 0 ? _errorItem$errorMessa : lastError === null || lastError === void 0 ? void 0 : lastError.errorMessage) !== null && _ref3 !== void 0 ? _ref3 : commonErrorMessage;
+      var isCommonError = !((_errorItem2 = errorItem) !== null && _errorItem2 !== void 0 && _errorItem2.errorMessage) && !(lastError !== null && lastError !== void 0 && lastError.errorMessage);
+      return {
+        errorMessage: errorMessage,
+        isCommonError: isCommonError
+      };
+    }
+  }, {
+    key: "createContentEditableElement",
+    value: function createContentEditableElement(props) {
+      var textarea = document.createElement('div');
+      textarea.setAttribute('contentEditable', props.disabled || props.readonly ? 'false' : 'true');
+      textarea.setAttribute('role', 'textbox');
+      textarea.setAttribute('classname', 'editable');
+      if (props.id) {
+        textarea.setAttribute('id', props.id);
+      }
+      if (props.placeholder) {
+        textarea.setAttribute('placeholder', props.placeholder);
+      }
+      var _extractAriaProps = (0, _ariaProps.extractAriaProps)(props),
+        extractedAriaProps = _extractAriaProps.extractedAriaProps;
+      for (var key in extractedAriaProps) {
+        var ariaProp = props[key];
+        if (ariaProp) {
+          textarea.setAttribute(key, ariaProp);
+        }
+      }
+      if (!props.disabled) {
+        textarea.setAttribute('tabIndex', '0');
+      } else {
+        textarea.setAttribute('tabIndex', '-1');
+      }
+      if (!props.disabled && !props.readonly) {
+        this.addEventListeners(textarea);
+      } else {
+        textarea.addEventListener('keydown', this.handleSelectAll.bind(this));
+      }
+      return textarea;
+    }
+  }, {
+    key: "handleValueOutChange",
+    value: function handleValueOutChange() {
+      var _this$props2 = this.props,
+        value = _this$props2.value,
+        onChangeLinesCount = _this$props2.onChangeLinesCount;
+      if (value === '') {
+        this.textarea.textContent = '';
+        onChangeLinesCount(0);
+      } else {
+        var _this$textarea;
+        var listOfNodes = this.prepareNodesForPaste(value);
+        (_this$textarea = this.textarea).replaceChildren.apply(_this$textarea, (0, _toConsumableArray2["default"])(listOfNodes));
+        this.recalculateLinesCount();
+      }
+    }
+  }, {
+    key: "handleScroll",
+    value: function handleScroll() {
+      var _this3 = this;
+      if (this.scrollingTimeout) {
+        clearTimeout(this.scrollingTimeout);
+      }
+      this.isScrolling = true;
+      this.scrollingTimeout = window.setTimeout(function () {
+        _this3.isScrolling = false;
+      }, 50);
+    }
+  }, {
+    key: "handleMouseDown",
+    value: function handleMouseDown(event) {
+      // we need to change keyboardLineIndex, because the caret in real on that current row
+      this.errorByInteraction = 'keyboard';
+      var element = event.target;
+      if (element instanceof HTMLElement) {
+        // we need to change keyboardLineIndex, because the caret in real on that current row
+        this.toggleErrorsPopper('keyboardLineIndex', element);
+        this.setErrorIndex(element);
+      }
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(event) {
+      this.errorByInteraction = 'mouse';
+      var element = event.target;
+      if (element !== this.textarea) {
+        if (this.isFocusing || element instanceof HTMLElement && element.getAttribute('aria-invalid') === 'true') {
+          this.toggleErrorsPopper('mouseLineIndex', element);
+        } else {
+          this.setState({
+            visibleErrorPopper: false
+          });
+        }
+      }
+    }
+  }, {
+    key: "handleMouseLeave",
+    value: function handleMouseLeave(event) {
+      if (this.changeTriggerTimeout) {
+        clearTimeout(this.changeTriggerTimeout);
+      }
+      if (this.isFocusing) {
+        this.errorByInteraction = 'keyboard';
+        var rowNode = this.getNodeFromSelection();
+        this.toggleErrorsPopper('keyboardLineIndex', rowNode, 0);
+        this.setState({
+          mouseLineIndex: -1
+        });
+      } else {
+        this.setState({
+          visibleErrorPopper: false
+        });
+      }
+    }
+  }, {
+    key: "handlePaste",
+    value: function handlePaste(event) {
+      var _event$clipboardData;
+      event.preventDefault();
+      var validateOn = this.asProps.validateOn;
+      var value = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text/plain');
+      var listOfNodes = value ? this.prepareNodesForPaste(value) : [];
+      var selection = document.getSelection();
+      if (selection !== null && selection !== void 0 && selection.anchorNode && selection !== null && selection !== void 0 && selection.focusNode) {
+        var anchorOffset = selection.anchorOffset;
+        var focusOffset = selection.focusOffset;
+        var documentPosition = selection.anchorNode.compareDocumentPosition(selection.focusNode);
+        var direction = this.getSelectionDirection();
+        var anchorElement = direction === 'forward' ? selection.anchorNode : selection.focusNode;
+        var focusElement = direction === 'forward' ? selection.focusNode : selection.anchorNode;
+        var fromOffset = direction === 'forward' ? anchorOffset : focusOffset;
+        var toOffset = direction === 'forward' ? focusOffset : anchorOffset;
+        var anchorNode = anchorElement instanceof Text ? anchorElement.parentElement : anchorElement;
+        var focusNode = focusElement instanceof Text ? focusElement.parentElement : focusElement;
+        var textNode = null;
+        var position = null;
+        if (focusElement === this.textarea) {
+          var _this$textarea2, _lastNodeToInsert$tex;
+          (_this$textarea2 = this.textarea).replaceChildren.apply(_this$textarea2, (0, _toConsumableArray2["default"])(listOfNodes));
+          var lastNodeToInsert = listOfNodes[listOfNodes.length - 1];
+          textNode = lastNodeToInsert.childNodes.item(0);
+          position = ((_lastNodeToInsert$tex = lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex !== void 0 ? _lastNodeToInsert$tex : '').length;
+        } else if (focusNode instanceof HTMLParagraphElement && anchorNode instanceof HTMLParagraphElement) {
+          var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2, _ref4;
+          var before = (_anchorNode$textConte = anchorNode === null || anchorNode === void 0 ? void 0 : (_anchorNode$textConte2 = anchorNode.textContent) === null || _anchorNode$textConte2 === void 0 ? void 0 : _anchorNode$textConte2.substring(0, fromOffset)) !== null && _anchorNode$textConte !== void 0 ? _anchorNode$textConte : '';
+          var after = (_focusNode$textConten = focusNode === null || focusNode === void 0 ? void 0 : (_focusNode$textConten2 = focusNode.textContent) === null || _focusNode$textConten2 === void 0 ? void 0 : _focusNode$textConten2.substring(toOffset)) !== null && _focusNode$textConten !== void 0 ? _focusNode$textConten : '';
+          selection.deleteFromDocument();
+          if (documentPosition !== 0) {
+            this.textarea.removeChild(focusNode);
+          }
+          var firstNodeToInsert = listOfNodes.splice(0, 1)[0];
+          var _lastNodeToInsert = listOfNodes[listOfNodes.length - 1];
+          anchorNode.textContent = (_ref4 = before + (firstNodeToInsert === null || firstNodeToInsert === void 0 ? void 0 : firstNodeToInsert.textContent)) !== null && _ref4 !== void 0 ? _ref4 : '';
+          anchorNode.after.apply(anchorNode, (0, _toConsumableArray2["default"])(listOfNodes));
+          if (_lastNodeToInsert) {
+            var _lastNodeToInsert$tex2, _lastNodeToInsert$tex3;
+            _lastNodeToInsert.textContent = ((_lastNodeToInsert$tex2 = _lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex2 !== void 0 ? _lastNodeToInsert$tex2 : '') + after;
+            textNode = _lastNodeToInsert.childNodes.item(0);
+            position = ((_lastNodeToInsert$tex3 = _lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex3 !== void 0 ? _lastNodeToInsert$tex3 : '').length;
+            this.validateLine(_lastNodeToInsert);
+            this.setErrorIndex(_lastNodeToInsert);
+          } else {
+            var _anchorNode$textConte3, _anchorNode$textConte4;
+            position = ((_anchorNode$textConte3 = anchorNode.textContent) !== null && _anchorNode$textConte3 !== void 0 ? _anchorNode$textConte3 : '').length;
+            anchorNode.textContent = ((_anchorNode$textConte4 = anchorNode.textContent) !== null && _anchorNode$textConte4 !== void 0 ? _anchorNode$textConte4 : '') + after;
+            textNode = anchorNode.childNodes.item(0);
+            this.validateLine(anchorNode);
+            this.setErrorIndex(anchorNode);
+          }
+        }
+        if (textNode instanceof Text) {
+          var _position, _position2;
+          this.setSelection(textNode, (_position = position) !== null && _position !== void 0 ? _position : 1, (_position2 = position) !== null && _position2 !== void 0 ? _position2 : 1);
+          this.toggleErrorsPopper('keyboardLineIndex', textNode.parentNode);
+        } else {
+          var _textNode;
+          console.warn('incorrect child type', textNode, (_textNode = textNode) === null || _textNode === void 0 ? void 0 : _textNode.parentNode);
+        }
+      }
+      this.recalculateLinesCount();
+      if (validateOn.includes('paste') || this.asProps.showErrors) {
+        this.recalculateErrors();
+      }
+    }
+  }, {
+    key: "handleChange",
+    value: function handleChange(event) {
+      var target = event.target;
+      if (target instanceof HTMLDivElement && event instanceof InputEvent) {
+        var _firstNode$textConten2;
+        var nodes = this.textarea.childNodes;
+        var firstNode = nodes.item(0);
+        var secondNode = nodes.item(1);
+        var selection = document.getSelection();
+        if (firstNode instanceof Text) {
+          var _firstNode$textConten;
+          var nodeText = (_firstNode$textConten = firstNode.textContent) !== null && _firstNode$textConten !== void 0 ? _firstNode$textConten : '';
+          var firstRow = document.createElement('p');
+          var text = document.createTextNode(nodeText);
+          firstRow.append(text);
+          firstNode.replaceWith(firstRow);
+          selection === null || selection === void 0 ? void 0 : selection.setPosition(firstRow, nodeText.length);
+        } else if (!firstNode || firstNode instanceof HTMLBRElement && nodes.length === 1) {
+          this.textarea.textContent = '';
+          this.setState({
+            keyboardLineIndex: 0
+          });
+        } else if (firstNode instanceof HTMLParagraphElement && !((_firstNode$textConten2 = firstNode.textContent) !== null && _firstNode$textConten2 !== void 0 && _firstNode$textConten2.trim())) {
+          if (nodes.length <= 1 || secondNode instanceof HTMLBRElement) {
+            this.textarea.textContent = '';
+            this.setState({
+              keyboardLineIndex: 0
+            });
+          }
+        }
+        var maxDeep = 10;
+        var rowNode = selection === null || selection === void 0 ? void 0 : selection.focusNode;
+        while (((_rowNode = rowNode) === null || _rowNode === void 0 ? void 0 : _rowNode.parentNode) !== this.textarea && maxDeep > 0) {
+          var _rowNode, _rowNode2;
+          rowNode = (_rowNode2 = rowNode) === null || _rowNode2 === void 0 ? void 0 : _rowNode2.parentNode;
+          maxDeep--;
+        }
+        if (rowNode instanceof HTMLParagraphElement) {
+          var _rowNode$textContent, _this$popper;
+          var childNodes = rowNode.childNodes;
+          var textContent = (_rowNode$textContent = rowNode.textContent) !== null && _rowNode$textContent !== void 0 ? _rowNode$textContent : '';
+          if (childNodes.length > 1) {
+            var _childNodes$item$text;
+            var offset = (_childNodes$item$text = childNodes.item(0).textContent) === null || _childNodes$item$text === void 0 ? void 0 : _childNodes$item$text.length;
+            rowNode.textContent = textContent;
+            if (offset) {
+              this.setSelection(rowNode.childNodes.item(0), offset, offset);
+            }
+          }
+          if (textContent.length > 0) {
+            var firstSymbol = textContent.at(0);
+            var lastSymbol = textContent.at(textContent.length - 1);
+            if (firstSymbol === this.getEmptyParagraph().textContent || lastSymbol === this.getEmptyParagraph().textContent) {
+              var _offset = null;
+              if (firstSymbol === this.getEmptyParagraph().textContent) {
+                rowNode.textContent = textContent.substring(1);
+                _offset = event.inputType === 'deleteContentBackward' || event.inputType === 'deleteContentForward' ? 0 : rowNode.textContent.length;
+              } else if (lastSymbol === this.getEmptyParagraph().textContent) {
+                rowNode.textContent = textContent.substring(0, textContent.length - 1);
+                _offset = rowNode.textContent.length;
+              }
+              if (_offset) {
+                this.setSelection(rowNode.childNodes.item(0), _offset, _offset);
+              }
+            }
+          } else if (childNodes.length === 1 && childNodes[0] instanceof HTMLBRElement) {
+            rowNode.innerHTML = this.emptyLineValue;
+          }
+          var _this$asProps3 = this.asProps,
+            errors = _this$asProps3.errors,
+            showErrors = _this$asProps3.showErrors;
+          var isValid = this.validateLine(rowNode);
+          this.recalculateErrors();
+          this.setErrorIndex(rowNode);
+          if (!isValid && showErrors) {
+            this.toggleErrorsPopper('keyboardLineIndex', rowNode, 0);
+          }
+          var trigger = !isValid || isValid && errors.length === 1 && errors[0].lineNode === rowNode ? rowNode : this.textarea;
+          if (showErrors && ((_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.current.state.elements.reference) !== trigger) {
+            var _this$setPopperTrigge;
+            (_this$setPopperTrigge = this.setPopperTrigger) === null || _this$setPopperTrigge === void 0 ? void 0 : _this$setPopperTrigge.call(this, trigger);
+          }
+        } else if (rowNode === null) {
+          var _this$setPopperTrigge2;
+          (_this$setPopperTrigge2 = this.setPopperTrigger) === null || _this$setPopperTrigge2 === void 0 ? void 0 : _this$setPopperTrigge2.call(this, this.textarea);
+          if ((selection === null || selection === void 0 ? void 0 : selection.focusNode) === this.textarea && this.textarea.childNodes.length > 1) {
+            var nodeIndex = selection.focusOffset;
+            var emptyParagraph = this.textarea.childNodes.item(nodeIndex - 1);
+            var emptyBr = this.textarea.childNodes.item(nodeIndex);
+            this.textarea.removeChild(emptyBr);
+            if (emptyParagraph instanceof HTMLParagraphElement) {
+              emptyParagraph.innerHTML = this.emptyLineValue;
+            }
+            if (emptyParagraph) {
+              this.setSelection(emptyParagraph, 0, 0);
+            }
+          } else {
+            this.setSelection(this.textarea, 0, 0);
+          }
+        }
+        this.recalculateLinesCount();
+      }
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus(event) {
+      this.isFocusing = true;
+      this.errorByInteraction = 'keyboard';
+      if (this.asProps.showErrors) {
+        this.toggleErrorsPopperByKeyboard(150);
+      } else {
+        this.toggleErrorsPopper('keyboardLineIndex', this.textarea);
+      }
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur(event) {
+      var _this4 = this;
+      this.isFocusing = false;
+      this.setState({
+        visibleErrorPopper: false
+      });
+      var _this$asProps4 = this.asProps,
+        validateOn = _this$asProps4.validateOn,
+        onBlur = _this$asProps4.onBlur;
+      if (validateOn.includes('blur')) {
+        this.recalculateErrors();
+      }
+      onBlur(this.getValues().join(this.delimiter), event);
+      setTimeout(function () {
+        _this4.setState({
+          keyboardLineIndex: -1
+        });
+      }, 200);
+    }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(event) {
+      var _this5 = this;
+      this.errorByInteraction = 'keyboard';
+      var linesDelimiters = this.asProps.linesDelimiters;
+      var currentNode = this.getNodeFromSelection();
+      if (event.key === 'Enter' || linesDelimiters !== null && linesDelimiters !== void 0 && linesDelimiters.includes(event.key)) {
+        if (currentNode === this.textarea) {
+          event.preventDefault();
+        }
+        if (currentNode instanceof HTMLParagraphElement) {
+          var _currentNode$textCont;
+          var currentRowValue = (_currentNode$textCont = currentNode.textContent) === null || _currentNode$textCont === void 0 ? void 0 : _currentNode$textCont.trim();
+          if (!currentRowValue) {
+            event.preventDefault();
+          } else {
+            var _selection$focusNode, _selectionNode$textCo, _currentNode$textCont2, _row$textContent;
+            event.preventDefault();
+            var selection = document.getSelection();
+            var selectionNode = (selection === null || selection === void 0 ? void 0 : selection.focusNode) instanceof Text ? selection.focusNode : selection === null || selection === void 0 ? void 0 : (_selection$focusNode = selection.focusNode) === null || _selection$focusNode === void 0 ? void 0 : _selection$focusNode.childNodes.item(0);
+            var selectionOffset = selection === null || selection === void 0 ? void 0 : selection.focusOffset;
+            var newRowValue = '';
+            if (selectionNode instanceof Text && selectionOffset !== undefined && selectionOffset !== ((_selectionNode$textCo = selectionNode.textContent) === null || _selectionNode$textCo === void 0 ? void 0 : _selectionNode$textCo.length)) {
+              var _selectionNode$textCo2, _selectionNode$textCo3;
+              newRowValue = (_selectionNode$textCo2 = (_selectionNode$textCo3 = selectionNode.textContent) === null || _selectionNode$textCo3 === void 0 ? void 0 : _selectionNode$textCo3.substring(selectionOffset)) !== null && _selectionNode$textCo2 !== void 0 ? _selectionNode$textCo2 : this.emptyLineValue;
+              if (selectionNode.textContent) {
+                selectionNode.textContent = selectionNode.textContent.substring(0, selectionOffset);
+              }
+            }
+            if (((_currentNode$textCont2 = currentNode.textContent) === null || _currentNode$textCont2 === void 0 ? void 0 : _currentNode$textCont2.trim()) === '') {
+              currentNode.innerHTML = this.emptyLineValue;
+            }
+            var row = document.createElement('p');
+            if (newRowValue) {
+              row.textContent = newRowValue;
+            } else {
+              row.innerHTML = this.emptyLineValue;
+            }
+            currentNode.after(row);
+            this.setSelection(row, 0, 0);
+            this.validateLine(currentNode);
+            this.validateLine(row);
+            if (currentNode.previousSibling) {
+              this.validateLine(currentNode.previousSibling);
+            }
+            this.setErrorIndex(row);
+            if (((_row$textContent = row.textContent) === null || _row$textContent === void 0 ? void 0 : _row$textContent.trim()) !== '') {
+              this.recalculateLinesCount();
+            }
+            setTimeout(function () {
+              _this5.recalculateErrors();
+            }, 0);
+            this.toggleErrorsPopperByKeyboard(0);
+          }
+        }
+      } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        if (currentNode instanceof HTMLParagraphElement) {
+          this.handleCursorMovement(currentNode, event);
+        }
+        this.toggleErrorsPopperByKeyboard(200);
+      } else if (this.isDeleteKey(event) && currentNode instanceof HTMLParagraphElement) {
+        var _currentNode$textCont3;
+        if (((_currentNode$textCont3 = currentNode.textContent) === null || _currentNode$textCont3 === void 0 ? void 0 : _currentNode$textCont3.trim()) === '' && !this.isRangeSelection()) {
+          // Backspace on empty row
+          var prevNode = currentNode.previousSibling;
+          if (prevNode instanceof HTMLParagraphElement) {
+            var _prevNode$textContent;
+            event.preventDefault();
+            this.textarea.removeChild(currentNode);
+            this.toggleErrorsPopperByKeyboard(0);
+            if (((_prevNode$textContent = prevNode.textContent) === null || _prevNode$textContent === void 0 ? void 0 : _prevNode$textContent.trim()) === '' && prevNode.previousSibling === null && this.textarea.childNodes.length === 1) {
+              this.textarea.textContent = '';
+              this.setSelection(this.textarea, 0, 0);
+            } else {
+              if (prevNode instanceof HTMLParagraphElement) {
+                var _text$textContent$len, _text$textContent;
+                var text = prevNode.childNodes.item(0);
+                var offset = (_text$textContent$len = (_text$textContent = text.textContent) === null || _text$textContent === void 0 ? void 0 : _text$textContent.length) !== null && _text$textContent$len !== void 0 ? _text$textContent$len : 0;
+                this.setSelection(text, offset, offset);
+              } else {
+                console.warn('incorrect prevNode type', prevNode);
+              }
+            }
+            setTimeout(function () {
+              _this5.recalculateErrors();
+            }, 0);
+            this.toggleErrorsPopperByKeyboard(0);
+          }
+        } else if (this.isRangeSelection()) {
+          var _currentNode$textCont4, _focusElement$parentN, _anchorElement$parent, _focusElement$parentN2, _focusElement$parentN3;
+          var _selection = document.getSelection();
+          var direction = this.getSelectionDirection();
+          var anchorElement = direction === 'backward' ? _selection === null || _selection === void 0 ? void 0 : _selection.focusNode : _selection === null || _selection === void 0 ? void 0 : _selection.anchorNode;
+          var focusElement = direction === 'backward' ? _selection === null || _selection === void 0 ? void 0 : _selection.anchorNode : _selection === null || _selection === void 0 ? void 0 : _selection.focusNode;
+          var anchorOffset = direction === 'backward' ? _selection === null || _selection === void 0 ? void 0 : _selection.focusOffset : _selection === null || _selection === void 0 ? void 0 : _selection.anchorOffset;
+          var focusOffset = direction === 'backward' ? _selection === null || _selection === void 0 ? void 0 : _selection.anchorOffset : _selection === null || _selection === void 0 ? void 0 : _selection.focusOffset;
+
+          // Backspace on selected full row
+          if (anchorElement === focusElement && anchorOffset === 0 && (focusElement === currentNode && focusOffset === 1 || focusOffset === ((_currentNode$textCont4 = currentNode.textContent) === null || _currentNode$textCont4 === void 0 ? void 0 : _currentNode$textCont4.length))) {
+            event.preventDefault();
+            var anchorParagraph = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.parentElement;
+            var focusParagraph = focusElement === null || focusElement === void 0 ? void 0 : focusElement.parentElement;
+            var childNodes = this.textarea.childNodes;
+            if (anchorParagraph === childNodes.item(0) && focusParagraph === childNodes.item(childNodes.length - 1)) {
+              this.textarea.textContent = '';
+              this.setSelection(this.textarea, 0, 0);
+            } else {
+              currentNode.innerHTML = this.emptyLineValue;
+              this.validateLine(currentNode);
+            }
+            this.setErrorIndex(currentNode);
+            this.recalculateLinesCount();
+            setTimeout(function () {
+              _this5.recalculateErrors();
+            }, 0);
+            this.toggleErrorsPopperByKeyboard(0);
+          }
+          // Backspace on selected few full rows
+          else if (focusElement !== anchorElement && focusElement instanceof Text && anchorElement instanceof Text && (focusElement === null || focusElement === void 0 ? void 0 : focusElement.textContent) === (focusElement === null || focusElement === void 0 ? void 0 : (_focusElement$parentN = focusElement.parentNode) === null || _focusElement$parentN === void 0 ? void 0 : _focusElement$parentN.textContent) && (anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.textContent) === (anchorElement === null || anchorElement === void 0 ? void 0 : (_anchorElement$parent = anchorElement.parentNode) === null || _anchorElement$parent === void 0 ? void 0 : _anchorElement$parent.textContent) && anchorOffset === 0 && focusOffset === (focusElement === null || focusElement === void 0 ? void 0 : (_focusElement$parentN2 = focusElement.parentNode) === null || _focusElement$parentN2 === void 0 ? void 0 : (_focusElement$parentN3 = _focusElement$parentN2.textContent) === null || _focusElement$parentN3 === void 0 ? void 0 : _focusElement$parentN3.length)) {
+            event.preventDefault();
+            var paragraphs = Array.from(this.textarea.children);
+            var _anchorParagraph = anchorElement.parentElement;
+            var _focusParagraph = focusElement.parentElement;
+            var _childNodes = this.textarea.childNodes;
+            if (_anchorParagraph === _childNodes.item(0) && _focusParagraph === _childNodes.item(_childNodes.length - 1)) {
+              this.textarea.textContent = '';
+              this.setSelection(this.textarea, 0, 0);
+            } else {
+              var isCleaning = false;
+              var _iterator = (0, _createForOfIteratorHelper2["default"])(paragraphs),
+                _step;
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  var paragraph = _step.value;
+                  if (paragraph === _anchorParagraph || isCleaning) {
+                    isCleaning = true;
+                    if (paragraph === _focusParagraph) {
+                      _focusParagraph.innerHTML = this.emptyLineValue;
+                      this.setSelection(_focusParagraph, 0, 0);
+                      break;
+                    } else {
+                      this.textarea.removeChild(paragraph);
+                    }
+                  }
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+              this.validateLine(currentNode);
+            }
+            this.setErrorIndex(currentNode);
+            this.recalculateLinesCount();
+            setTimeout(function () {
+              _this5.recalculateErrors();
+            }, 0);
+            this.toggleErrorsPopperByKeyboard(0);
+          }
+        }
+      } else if (event.key === 'z' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2,
+        _this$containerRef$cu2,
+        _this6 = this;
+      var SInputField = _flexBox.Box;
+      var _this$asProps5 = this.asProps,
+        styles = _this$asProps5.styles,
+        showErrors = _this$asProps5.showErrors;
+      var visibleErrorPopper = this.state.visibleErrorPopper;
+      var _this$errorMessage = this.errorMessage,
+        errorMessage = _this$errorMessage.errorMessage,
+        isCommonError = _this$errorMessage.isCommonError;
+      var visibleErrorTooltip = showErrors && visibleErrorPopper && Boolean(errorMessage) && !this.isDisabled;
+      var _extractAriaProps2 = (0, _ariaProps.extractAriaProps)(this.asProps),
+        __excludeProps = _extractAriaProps2.__excludeProps;
+      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], _ref2.cn("Tooltip", {
+        "interaction": 'none',
+        "placement": isCommonError ? 'right-start' : 'right',
+        "visible": visibleErrorTooltip,
+        "theme": 'warning',
+        "offset": isCommonError ? undefined : [0, 26],
+        "preventOverflow": {
+          boundary: (_this$containerRef$cu2 = this.containerRef.current) !== null && _this$containerRef$cu2 !== void 0 ? _this$containerRef$cu2 : undefined,
+          tether: false
+        }
+      }), function (_ref5) {
+        var popper = _ref5.popper,
+          setTrigger = _ref5.setTrigger;
+        if (!_this6.popper) {
+          _this6.setPopperTrigger = setTrigger;
+          // @ts-ignore
+          _this6.popper = popper;
+        }
+        return /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Popper, {
+          id: _this6.popperDescribedId
+        }, errorMessage);
+      }), /*#__PURE__*/_react["default"].createElement(SInputField, _ref2.cn("SInputField", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "ref": this.containerRef,
+        "__excludeProps": ['onBlur', 'value'].concat((0, _toConsumableArray2["default"])(__excludeProps))
+      }, _ref)))));
+    }
+  }, {
+    key: "prepareNodesForPaste",
+    value: function prepareNodesForPaste(value) {
+      var _pasteProps$lineProce,
+        _pasteProps$skipEmpty,
+        _pasteProps$delimiter,
+        _this7 = this;
+      var listOfNodes = [];
+      var pasteProps = this.asProps.pasteProps;
+      var lineProcessing = (_pasteProps$lineProce = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.lineProcessing) !== null && _pasteProps$lineProce !== void 0 ? _pasteProps$lineProce : function (line) {
+        var trimmedLine = line.trim();
+        return trimmedLine === '' ? line : trimmedLine;
+      };
+      var skipEmptyLines = (_pasteProps$skipEmpty = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.skipEmptyLines) !== null && _pasteProps$skipEmpty !== void 0 ? _pasteProps$skipEmpty : this.skipEmptyLines;
+      var delimiter = (_pasteProps$delimiter = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.delimiter) !== null && _pasteProps$delimiter !== void 0 ? _pasteProps$delimiter : this.delimiter;
+      value.split(delimiter).forEach(function (line) {
+        var preparedLine = lineProcessing(line);
+        if (preparedLine === '' && skipEmptyLines === false || preparedLine !== '') {
+          var node = document.createElement('p');
+          if (preparedLine === '') {
+            node.innerHTML = _this7.emptyLineValue;
+          } else if (preparedLine.trim() === '') {
+            var allSpacesRegExp = new RegExp('\\s', 'g');
+            node.innerHTML = _dompurify["default"].sanitize(preparedLine.replace(allSpacesRegExp, _this7.spaceLineValue));
+          } else {
+            node.append(document.createTextNode(preparedLine));
+          }
+          listOfNodes.push(node);
+          _this7.validateLine(node);
+        }
+      });
+      return listOfNodes;
+    }
+  }, {
+    key: "recalculateErrors",
+    value: function recalculateErrors() {
+      var errors = [];
+      this.textarea.childNodes.forEach(function (node, index) {
+        if (node instanceof HTMLParagraphElement && node.getAttribute('aria-invalid') === 'true') {
+          var _node$dataset$errorme;
+          var errorItem = {
+            errorMessage: (_node$dataset$errorme = node.dataset.errormessage) !== null && _node$dataset$errorme !== void 0 ? _node$dataset$errorme : '',
+            lineNode: node,
+            lineIndex: index
+          };
+          errors.push(errorItem);
+        }
+      });
+      this.asProps.onErrorsChange(errors);
+    }
+  }, {
+    key: "recalculateLinesCount",
+    value: function recalculateLinesCount() {
+      var _this8 = this;
+      if (this.linesCountTimeout) {
+        clearTimeout(this.linesCountTimeout);
+      }
+      this.linesCountTimeout = window.setTimeout(function () {
+        var lines = 0;
+        var _this8$asProps = _this8.asProps,
+          maxLines = _this8$asProps.maxLines,
+          linesCount = _this8$asProps.linesCount;
+        _this8.textarea.childNodes.forEach(function (node, index) {
+          if (node instanceof HTMLParagraphElement) {
+            node.dataset.overMaxRows = 'false';
+            if (node.textContent !== _this8.getEmptyParagraph().textContent && node.textContent !== '') {
+              lines++;
+              if (lines > maxLines) {
+                node.dataset.overMaxRows = 'true';
+              }
+            }
+          }
+        });
+        if (linesCount !== lines) {
+          _this8.asProps.onChangeLinesCount(lines);
+        }
+      }, 100);
+    }
+  }, {
+    key: "getValues",
+    value: function getValues() {
+      var values = [];
+      this.textarea.childNodes.forEach(function (node) {
+        var _node$textContent;
+        values.push((_node$textContent = node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : '');
+      });
+      return values;
+    }
+  }, {
+    key: "toggleErrorsPopperByKeyboard",
+    value: function toggleErrorsPopperByKeyboard(timer) {
+      var _this9 = this;
+      if (this.toggleErrorsPopperTimeout) {
+        clearTimeout(this.toggleErrorsPopperTimeout);
+      }
+      if (!this.isScrolling) {
+        setTimeout(function () {
+          var rowNode = _this9.getNodeFromSelection();
+          _this9.toggleErrorsPopper('keyboardLineIndex', rowNode, timer);
+        }, 0);
+      } else {
+        this.toggleErrorsPopperTimeout = window.setTimeout(function () {
+          _this9.toggleErrorsPopperByKeyboard(timer);
+        }, 50);
+      }
+    }
+  }, {
+    key: "toggleErrorsPopper",
+    value: function toggleErrorsPopper(key, target, timer) {
+      var _this10 = this;
+      if (target instanceof HTMLDivElement || target instanceof HTMLParagraphElement) {
+        if (this.changeTriggerTimeout) {
+          clearTimeout(this.changeTriggerTimeout);
+        }
+        this.changeTriggerTimeout = window.setTimeout(function () {
+          var targetElement = target === _this10.textarea ? _this10.getNodeFromSelection() : target;
+          var lineIndex = -1;
+          var isInvalidRow = false;
+          if (targetElement instanceof HTMLParagraphElement) {
+            isInvalidRow = targetElement.getAttribute('aria-invalid') === 'true';
+            lineIndex = Array.from(_this10.textarea.childNodes).indexOf(targetElement);
+          } else if (targetElement === _this10.textarea) {
+            lineIndex = 0;
+          }
+          if (targetElement instanceof HTMLElement) {
+            _this10.setState(function (prevState) {
+              var newState = {
+                visibleErrorPopper: _this10.isFocusing ? true : isInvalidRow,
+                mouseLineIndex: prevState.mouseLineIndex,
+                keyboardLineIndex: prevState.keyboardLineIndex
+              };
+              if (_this10.isFocusing || key === 'mouseLineIndex' && isInvalidRow) {
+                newState[key] = lineIndex;
+              }
+              return newState;
+            }, function () {
+              var _this10$setPopperTrig;
+              var trigger = isInvalidRow ? targetElement : _this10.textarea;
+              (_this10$setPopperTrig = _this10.setPopperTrigger) === null || _this10$setPopperTrig === void 0 ? void 0 : _this10$setPopperTrig.call(_this10, trigger);
+              _this10.forceUpdate();
+            });
+          }
+        }, timer !== null && timer !== void 0 ? timer : 50);
+      } else {
+        this.setState({
+          visibleErrorPopper: false
+        });
+      }
+    }
+  }, {
+    key: "toggleAriaInvalid",
+    value: function toggleAriaInvalid(showErrors, errorsLength) {
+      if (showErrors && errorsLength > 0) {
+        this.textarea.setAttribute('aria-describedby', this.popperDescribedId);
+        this.textarea.setAttribute('aria-invalid', 'true');
+      } else {
+        this.textarea.removeAttribute('aria-invalid');
+        this.textarea.removeAttribute('aria-describedby');
+      }
+    }
+  }, {
+    key: "handleChangeErrorIndex",
+    value: function handleChangeErrorIndex(errorIndex) {
+      var _error$lineNode,
+        _this11 = this;
+      var error = this.asProps.errors[errorIndex];
+      var childNodes = this.textarea.childNodes;
+      var node = error ? (_error$lineNode = error.lineNode) !== null && _error$lineNode !== void 0 ? _error$lineNode : childNodes.item(error.lineIndex) : null;
+      var selection = document.getSelection();
+      if (selection && node instanceof HTMLParagraphElement) {
+        this.setState({
+          visibleErrorPopper: false
+        });
+        setTimeout(function () {
+          var text = node.childNodes.item(0);
+          if (text instanceof Text) {
+            _this11.setSelection(text, 0, text.length);
+          } else {
+            _this11.setSelection(node, 0, 1);
+          }
+        }, 150);
+      }
+    }
+  }, {
+    key: "validateLine",
+    value: function validateLine(node) {
+      var lineValidation = this.asProps.lineValidation;
+      if (lineValidation && node instanceof HTMLElement) {
+        var _node$textContent2;
+        var _lineValidation = lineValidation((_node$textContent2 = node.textContent) !== null && _node$textContent2 !== void 0 ? _node$textContent2 : '', this.getValues()),
+          isValid = _lineValidation.isValid,
+          errorMessage = _lineValidation.errorMessage;
+        if (!isValid) {
+          node.setAttribute('aria-invalid', 'true');
+          node.dataset.errormessage = errorMessage;
+        } else {
+          node.removeAttribute('aria-invalid');
+          node.dataset.errormessage = undefined;
+        }
+        return isValid;
+      }
+      return true;
+    }
+  }, {
+    key: "setSelection",
+    value: function setSelection(node, start, end) {
+      var scrollType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'center';
+      var selection = document.getSelection();
+      var range = document.createRange();
+      range.setStart(node, start);
+      range.setEnd(node, end);
+      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+      var nodeToScroll = node instanceof Text ? node.parentNode : node;
+      if (nodeToScroll instanceof HTMLElement) {
+        nodeToScroll.scrollIntoView({
+          block: scrollType,
+          inline: scrollType,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, {
+    key: "getNodeFromSelection",
+    value: function getNodeFromSelection() {
+      var selection = document.getSelection();
+      var rowNode = (selection === null || selection === void 0 ? void 0 : selection.focusNode) instanceof Text ? selection.focusNode.parentNode : selection === null || selection === void 0 ? void 0 : selection.focusNode;
+      return rowNode !== null && rowNode !== void 0 ? rowNode : null;
+    }
+  }, {
+    key: "handleCursorMovement",
+    value: function handleCursorMovement(currentNode, event) {
+      var nextNode = null;
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          nextNode = currentNode.previousSibling;
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          nextNode = currentNode.nextSibling;
+          break;
+        case 'ArrowLeft':
+          {
+            if (currentNode.textContent === this.getEmptyParagraph().textContent) {
+              event.preventDefault();
+              nextNode = currentNode.previousSibling;
+            }
+            break;
+          }
+        case 'ArrowRight':
+          {
+            if (currentNode.textContent === this.getEmptyParagraph().textContent) {
+              event.preventDefault();
+              nextNode = currentNode.nextSibling;
+            }
+          }
+      }
+      if (nextNode instanceof HTMLParagraphElement) {
+        var _nextNode$textContent, _nextNode$textContent2, _selection$focusOffse;
+        var selection = document.getSelection();
+        var firstNode = nextNode.childNodes.item(0);
+        var nodeToSetSelection = firstNode instanceof Text ? firstNode : nextNode;
+        var textNode = (_nextNode$textContent = (_nextNode$textContent2 = nextNode.textContent) === null || _nextNode$textContent2 === void 0 ? void 0 : _nextNode$textContent2.trim()) !== null && _nextNode$textContent !== void 0 ? _nextNode$textContent : '';
+        var currentOffset = (_selection$focusOffse = selection === null || selection === void 0 ? void 0 : selection.focusOffset) !== null && _selection$focusOffse !== void 0 ? _selection$focusOffse : 0;
+        var offset = currentOffset <= textNode.length ? currentOffset : textNode.length;
+
+        // it only works if node is empty, that's why here we could set 0 or node.length
+        if (event.key === 'ArrowLeft') {
+          offset = textNode.length;
+        } else if (event.key === 'ArrowRight') {
+          offset = 0;
+        }
+        this.setSelection(nodeToSetSelection, offset, offset, 'nearest');
+      }
+    }
+  }, {
+    key: "setErrorIndex",
+    value: function setErrorIndex(nodeToCompare) {
+      var errorIndex = Array.from(this.textarea.childNodes).filter(function (node) {
+        return node instanceof Element && node.getAttribute('aria-invalid') === 'true';
+      }).findIndex(function (node) {
+        return node === nodeToCompare;
+      });
+      this.handlers.errorIndex(errorIndex);
+    }
+  }, {
+    key: "isDeleteKey",
+    value: function isDeleteKey(event) {
+      return event.key === 'Backspace' || event.key === 'x' && (event.ctrlKey || event.metaKey);
+    }
+  }, {
+    key: "getEmptyParagraph",
+    value: function getEmptyParagraph() {
+      var element = document.createElement('p');
+      element.innerHTML = this.emptyLineValue;
+      return element;
+    }
+  }, {
+    key: "addEventListeners",
+    value: function addEventListeners(textarea) {
+      textarea.addEventListener('paste', this.handlePaste);
+      textarea.addEventListener('input', this.handleChange);
+      textarea.addEventListener('focus', this.handleFocus);
+      textarea.addEventListener('blur', this.handleBlur);
+      textarea.addEventListener('keydown', this.handleKeyDown);
+      textarea.addEventListener('mousedown', this.handleMouseDown);
+      textarea.addEventListener('mousemove', this.handleMouseMove);
+      textarea.addEventListener('mouseleave', this.handleMouseLeave);
+      textarea.addEventListener('scroll', this.handleScroll);
+      textarea.removeEventListener('keydown', this.handleSelectAll);
+    }
+  }, {
+    key: "removeEventListeners",
+    value: function removeEventListeners(textarea) {
+      textarea.removeEventListener('paste', this.handlePaste);
+      textarea.removeEventListener('input', this.handleChange);
+      textarea.removeEventListener('focus', this.handleFocus);
+      textarea.removeEventListener('blur', this.handleBlur);
+      textarea.removeEventListener('keydown', this.handleKeyDown);
+      textarea.removeEventListener('mousedown', this.handleMouseDown);
+      textarea.removeEventListener('mousemove', this.handleMouseMove);
+      textarea.removeEventListener('mouseleave', this.handleMouseLeave);
+      textarea.removeEventListener('scroll', this.handleScroll);
+      textarea.addEventListener('keydown', this.handleSelectAll);
+    }
+  }, {
+    key: "handleSelectAll",
+    value: function handleSelectAll(event) {
+      if (event.key === 'a' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        var node = event.target;
+        if (node instanceof HTMLElement && node === this.textarea) {
+          this.setSelection(node, 0, node.childNodes.length);
+        }
+      }
+    }
+  }, {
+    key: "isRangeSelection",
+    value: function isRangeSelection() {
+      var selection = document.getSelection();
+      return (selection === null || selection === void 0 ? void 0 : selection.focusNode) !== (selection === null || selection === void 0 ? void 0 : selection.anchorNode) || (selection === null || selection === void 0 ? void 0 : selection.focusOffset) !== (selection === null || selection === void 0 ? void 0 : selection.anchorOffset);
+    }
+  }, {
+    key: "getSelectionDirection",
+    value: function getSelectionDirection() {
+      var selection = document.getSelection();
+      if (selection !== null && selection !== void 0 && selection.anchorNode && selection !== null && selection !== void 0 && selection.focusNode) {
+        var documentPosition = selection.anchorNode.compareDocumentPosition(selection.focusNode);
+        if (documentPosition === 0 && selection.anchorOffset > selection.focusOffset ||
+        // if nodes are the same
+        documentPosition === Node.DOCUMENT_POSITION_PRECEDING) {
+          return 'backward';
+        }
+        return 'forward';
+      }
+      return null;
+    }
+  }]);
+  return InputField;
+}(_core.Component);
+exports.InputField = InputField;
+(0, _defineProperty2["default"])(InputField, "displayName", 'Textarea');
+(0, _defineProperty2["default"])(InputField, "style", style);
+(0, _defineProperty2["default"])(InputField, "enhance", [(0, _uniqueID["default"])()]);
+(0, _defineProperty2["default"])(InputField, "defaultProps", {
+  defaultValue: '',
+  size: 'm',
+  state: 'normal',
+  minRows: 2,
+  maxRows: 10,
+  defaultShowErrors: false,
+  defaultErrorIndex: -1,
+  defaultLinesCount: 0
+});
+//# sourceMappingURL=InputField.js.map