@semcore/bulk-textarea 1.1.0-prerelease.9 → 1.1.0

package/lib/esm/components/InputField/InputField.mjs

@@ -0,0 +1,625 @@
+import ae from "@babel/runtime/helpers/esm/objectSpread2";
+import ne from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import U from "@babel/runtime/helpers/esm/toConsumableArray";
+import le from "@babel/runtime/helpers/esm/classCallCheck";
+import oe from "@babel/runtime/helpers/esm/createClass";
+import f from "@babel/runtime/helpers/esm/assertThisInitialized";
+import se from "@babel/runtime/helpers/esm/inherits";
+import de from "@babel/runtime/helpers/esm/createSuper";
+import L from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as ve } from "@semcore/utils/lib/core/index";
+import { sstyled as ue, assignProps as he, Component as ce } from "@semcore/core";
+import R from "react";
+import { Box as ge } from "@semcore/flex-box";
+import N from "@semcore/tooltip";
+import { extractAriaProps as $ } from "@semcore/utils/lib/ariaProps";
+import pe from "@semcore/utils/lib/uniqueID";
+import fe from "dompurify";
+var me = (
+  /*__reshadow_css_start__*/
+  (ve.insert(
+    /*__inner_css_start__*/
+    '.___SInputField_11fze_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;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);word-wrap:break-word;word-break:break-word;font-family:inherit}.___SInputField_11fze_gg_>div:empty::before{content:"1. "attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_11fze_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_11fze_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_11fze_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_11fze_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_11fze_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_11fze_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_11fze_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:8px}.___SInputField_11fze_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:16px}.___SInputField_11fze_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:8px}.___SInputField_11fze_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_11fze_gg_.__showErrors_11fze_gg_>div[aria-invalid]>p[aria-invalid]:after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo=\\ );position:absolute;right:0}.___SInputField_11fze_gg_._size_m_11fze_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_11fze)*20px);max-height:calc((var(--maxRows_11fze) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_11fze_gg_._size_l_11fze_gg_>div:empty,.___SInputField_11fze_gg_._size_m_11fze_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_11fze_gg_._size_m_11fze_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_11fze_gg_._size_l_11fze_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_11fze)*24px);max-height:calc((var(--maxRows_11fze) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_11fze_gg_._size_l_11fze_gg_>div:empty::before{left:calc(var(--intergalactic-spacing-4x, 16px) - var(--intergalactic-spacing-05x, 2px))}.___SInputField_11fze_gg_._state_normal_11fze_gg_:not(.__disabled_11fze_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_11fze_gg_._state_valid_11fze_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_11fze_gg_._state_valid_11fze_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5))}.___SInputField_11fze_gg_._state_invalid_11fze_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_11fze_gg_._state_invalid_11fze_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SInputField_11fze_gg_.__readonly_11fze_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_11fze_gg_.__disabled_11fze_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
+    "11fze_gg_"
+  ), {
+    __SInputField: "___SInputField_11fze_gg_",
+    _showErrors: "__showErrors_11fze_gg_",
+    _readonly: "__readonly_11fze_gg_",
+    _disabled: "__disabled_11fze_gg_",
+    _size_m: "_size_m_11fze_gg_",
+    "--minRows": "--minRows_11fze",
+    "--maxRows": "--maxRows_11fze",
+    _size_l: "_size_l_11fze_gg_",
+    _state_normal: "_state_normal_11fze_gg_",
+    _state_valid: "_state_valid_11fze_gg_",
+    _state_invalid: "_state_invalid_11fze_gg_"
+  })
+), G = /* @__PURE__ */ function(ee) {
+  se(O, ee);
+  var ie = de(O);
+  function O(o) {
+    var e;
+    return le(this, O), e = ie.call(this, o), L(f(e), "delimiter", `
+`), L(f(e), "skipEmptyLines", !0), L(f(e), "emptyLineValue", ""), L(f(e), "spaceLineValue", " "), L(f(e), "containerRef", /* @__PURE__ */ R.createRef()), L(f(e), "textarea", void 0), L(f(e), "popper", null), L(f(e), "setPopperTrigger", null), L(f(e), "errorByInteraction", null), L(f(e), "changeTriggerTimeout", 0), L(f(e), "isScrolling", !1), L(f(e), "scrollingTimeout", 0), L(f(e), "toggleErrorsPopperTimeout", 0), L(f(e), "isFocusing", !1), L(f(e), "linesCountTimeout", 0), L(f(e), "state", {
+      visibleErrorPopper: !1,
+      keyboardLineIndex: -1,
+      mouseLineIndex: -1
+    }), e.handlePaste = e.handlePaste.bind(f(e)), e.handleChange = e.handleChange.bind(f(e)), e.handleFocus = e.handleFocus.bind(f(e)), e.handleBlur = e.handleBlur.bind(f(e)), e.handleKeyDown = e.handleKeyDown.bind(f(e)), e.handleMouseDown = e.handleMouseDown.bind(f(e)), e.handleMouseMove = e.handleMouseMove.bind(f(e)), e.handleMouseLeave = e.handleMouseLeave.bind(f(e)), e.handleScroll = e.handleScroll.bind(f(e)), e.handleSelectAll = e.handleSelectAll.bind(f(e)), e.textarea = e.createContentEditableElement(o), e;
+  }
+  return oe(O, [{
+    key: "uncontrolledProps",
+    value: function() {
+      return {
+        value: null,
+        linesCount: null,
+        errorIndex: null
+      };
+    }
+  }, {
+    key: "componentDidMount",
+    value: function() {
+      var e;
+      (e = this.containerRef.current) === null || e === void 0 || e.append(this.textarea), this.handleValueOutChange();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function(e, i) {
+      var r = this, t = this.props, a = t.value, n = t.errors, l = t.errorIndex, d = t.showErrors, g = t.disabled, m = t.readonly, h = t.highlightErrorIndex, v = t.lineProcessing, s = t["aria-describedby"], I = s === void 0 ? "" : s;
+      e.value !== a && a !== this.getValues().join(this.delimiter) && this.handleValueOutChange(), (e.showErrors !== d || e.errors.length !== n.length) && (this.toggleAriaInvalid(d, n.length), d === !1 && this.textarea.setAttribute("aria-describedby", I)), e.errorIndex !== l && h && this.handleChangeErrorIndex(l), (e.disabled !== g || e.readonly !== m) && (this.isDisabled ? (this.textarea.setAttribute("contenteditable", "false"), this.removeEventListeners(this.textarea)) : (this.textarea.setAttribute("contenteditable", "true"), this.addEventListeners(this.textarea)), g ? this.textarea.setAttribute("tabindex", "-1") : this.textarea.setAttribute("tabindex", "0"));
+      var c = this.state.keyboardLineIndex;
+      if (i.keyboardLineIndex !== -1 && i.keyboardLineIndex !== c) {
+        if (v) {
+          var y, b = this.getValues(), E = v((y = b[i.keyboardLineIndex]) !== null && y !== void 0 ? y : "", b), x = document.createTextNode(E), k = this.textarea.childNodes.item(i.keyboardLineIndex);
+          k instanceof HTMLParagraphElement && (E === "" ? k.innerHTML = this.emptyLineValue : k.replaceChild(x, k.childNodes.item(0))), this.validateLine(k), setTimeout(function() {
+            var M = r.textarea.childNodes.item(c);
+            M && r.setErrorIndex(M);
+          }, 0);
+        }
+        d || this.recalculateErrors(), this.recalculateLinesCount(), this.asProps.onChangeLineIndex(c);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function() {
+      this.removeEventListeners(this.textarea);
+    }
+  }, {
+    key: "isDisabled",
+    get: function() {
+      var e = this.asProps, i = e.disabled, r = e.readonly;
+      return !!(i || r);
+    }
+  }, {
+    key: "popperDescribedId",
+    get: function() {
+      var e = this.asProps.uid;
+      return "bulk-textarea-".concat(e, "-popper-describedby");
+    }
+  }, {
+    key: "errorMessage",
+    get: function() {
+      var e, i, r, t = this.asProps, a = t.errors, n = t.errorIndex, l = t.commonErrorMessage, d = t.prevError, g = this.state, m = g.mouseLineIndex, h = g.keyboardLineIndex, v = this.errorByInteraction === "keyboard" ? h : this.errorByInteraction === "mouse" ? m : -1, s = a[n];
+      v !== -1 && (s = a.find(function(y) {
+        return (y == null ? void 0 : y.lineIndex) === v;
+      }));
+      var I = a.length === 0 && !d ? null : (e = (i = s) === null || i === void 0 ? void 0 : i.errorMessage) !== null && e !== void 0 ? e : l === "" || a.length === 0 ? d == null ? void 0 : d.errorMessage : l, c = !((r = s) !== null && r !== void 0 && r.errorMessage) && (l === "" || a.length === 0 ? !(d != null && d.errorMessage) : !0);
+      return {
+        errorMessage: I,
+        isCommonError: c
+      };
+    }
+  }, {
+    key: "createContentEditableElement",
+    value: function(e) {
+      var i = document.createElement("div");
+      i.setAttribute("contentEditable", e.disabled || e.readonly ? "false" : "true"), i.setAttribute("role", "textbox"), i.setAttribute("classname", "editable"), e.id && i.setAttribute("id", e.id), e.placeholder && i.setAttribute("placeholder", e.placeholder);
+      var r = $(e), t = r.extractedAriaProps;
+      for (var a in t) {
+        var n = e[a];
+        n && i.setAttribute(a, n);
+      }
+      return e.disabled ? i.setAttribute("tabIndex", "-1") : i.setAttribute("tabIndex", "0"), !e.disabled && !e.readonly ? this.addEventListeners(i) : i.addEventListener("keydown", this.handleSelectAll.bind(this)), i;
+    }
+  }, {
+    key: "handleValueOutChange",
+    value: function() {
+      var e = this.props, i = e.value, r = e.onChangeLinesCount;
+      if (i === "")
+        this.textarea.textContent = "", r(0);
+      else {
+        var t, a = this.prepareNodesForPaste(i);
+        (t = this.textarea).replaceChildren.apply(t, U(a)), this.recalculateLinesCount(), this.recalculateErrors();
+      }
+    }
+  }, {
+    key: "handleScroll",
+    value: function() {
+      var e = this;
+      this.scrollingTimeout && clearTimeout(this.scrollingTimeout), this.isScrolling = !0, this.scrollingTimeout = window.setTimeout(function() {
+        e.isScrolling = !1;
+      }, 50);
+    }
+  }, {
+    key: "handleMouseDown",
+    value: function(e) {
+      this.errorByInteraction = "keyboard";
+      var i = e.target;
+      i instanceof HTMLElement && (this.toggleErrorsPopper("keyboardLineIndex", i), this.setErrorIndex(i));
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function(e) {
+      this.errorByInteraction = "mouse";
+      var i = e.target;
+      i !== this.textarea && (this.isFocusing || i instanceof HTMLElement && i.getAttribute("aria-invalid") === "true" ? this.toggleErrorsPopper("mouseLineIndex", i) : this.setState({
+        visibleErrorPopper: !1
+      }));
+    }
+  }, {
+    key: "handleMouseLeave",
+    value: function(e) {
+      if (this.changeTriggerTimeout && clearTimeout(this.changeTriggerTimeout), this.isFocusing) {
+        this.errorByInteraction = "keyboard";
+        var i = this.getNodeFromSelection();
+        this.toggleErrorsPopper("keyboardLineIndex", i, 0), this.setState({
+          mouseLineIndex: -1
+        });
+      } else
+        this.setState({
+          visibleErrorPopper: !1
+        });
+    }
+  }, {
+    key: "handlePaste",
+    value: function(e) {
+      var i;
+      e.preventDefault();
+      var r = this.asProps.validateOn, t = (i = e.clipboardData) === null || i === void 0 ? void 0 : i.getData("text/plain"), a = t ? this.prepareNodesForPaste(t) : [], n = document.getSelection();
+      if (n != null && n.anchorNode && n !== null && n !== void 0 && n.focusNode) {
+        var l = n.anchorOffset, d = n.focusOffset, g = n.anchorNode.compareDocumentPosition(n.focusNode), m = this.getSelectionDirection(), h = m === "forward" ? n.anchorNode : n.focusNode, v = m === "forward" ? n.focusNode : n.anchorNode, s = m === "forward" ? l : d, I = m === "forward" ? d : l, c = h instanceof Text ? h.parentElement : h, y = v instanceof Text ? v.parentElement : v, b = null, E = null;
+        if (v === this.textarea) {
+          var x, k;
+          (x = this.textarea).replaceChildren.apply(x, U(a));
+          var M = a[a.length - 1];
+          b = M.childNodes.item(0), E = ((k = M.textContent) !== null && k !== void 0 ? k : "").length;
+        } else if (y instanceof HTMLParagraphElement && c instanceof HTMLParagraphElement) {
+          var z, A, P, C, w, F = (z = c == null || (A = c.textContent) === null || A === void 0 ? void 0 : A.substring(0, s)) !== null && z !== void 0 ? z : "", D = (P = y == null || (C = y.textContent) === null || C === void 0 ? void 0 : C.substring(I)) !== null && P !== void 0 ? P : "";
+          n.deleteFromDocument(), g !== 0 && this.textarea.removeChild(y);
+          var T = a.splice(0, 1)[0], u = a[a.length - 1];
+          if (c.textContent = (w = F + (T == null ? void 0 : T.textContent)) !== null && w !== void 0 ? w : "", c.after.apply(c, U(a)), u) {
+            var S, _;
+            u.textContent = ((S = u.textContent) !== null && S !== void 0 ? S : "") + D, b = u.childNodes.item(0), E = ((_ = u.textContent) !== null && _ !== void 0 ? _ : "").length, this.validateLine(u), this.setErrorIndex(u);
+          } else {
+            var p, H;
+            E = ((p = c.textContent) !== null && p !== void 0 ? p : "").length, c.textContent = ((H = c.textContent) !== null && H !== void 0 ? H : "") + D, b = c.childNodes.item(0), this.validateLine(c), this.setErrorIndex(c);
+          }
+        }
+        if (b instanceof Text) {
+          var B, K;
+          this.setSelection(b, (B = E) !== null && B !== void 0 ? B : 1, (K = E) !== null && K !== void 0 ? K : 1), this.toggleErrorsPopper("keyboardLineIndex", b.parentNode);
+        } else {
+          var V;
+          console.warn("incorrect child type", b, (V = b) === null || V === void 0 ? void 0 : V.parentNode);
+        }
+      }
+      this.recalculateLinesCount(), (r.includes("paste") || this.asProps.showErrors) && this.recalculateErrors();
+    }
+  }, {
+    key: "handleChange",
+    value: function(e) {
+      var i = e.target;
+      if (i instanceof HTMLDivElement && e instanceof InputEvent) {
+        var r, t = this.textarea.childNodes, a = t.item(0), n = t.item(1), l = document.getSelection();
+        if (a instanceof Text) {
+          var d, g = (d = a.textContent) !== null && d !== void 0 ? d : "", m = document.createElement("p"), h = document.createTextNode(g);
+          m.append(h), a.replaceWith(m), l == null || l.setPosition(m, g.length);
+        } else !a || a instanceof HTMLBRElement && t.length === 1 ? (this.textarea.textContent = "", this.setState({
+          keyboardLineIndex: 0
+        })) : a instanceof HTMLParagraphElement && !((r = a.textContent) !== null && r !== void 0 && r.trim()) && (t.length <= 1 || n instanceof HTMLBRElement) && (this.textarea.textContent = "", this.setState({
+          keyboardLineIndex: 0
+        }));
+        for (var v = 10, s = l == null ? void 0 : l.focusNode; ((I = s) === null || I === void 0 ? void 0 : I.parentNode) !== this.textarea && v > 0; ) {
+          var I, c;
+          s = (c = s) === null || c === void 0 ? void 0 : c.parentNode, v--;
+        }
+        if (s instanceof HTMLParagraphElement) {
+          var y, b, E = s.childNodes, x = (y = s.textContent) !== null && y !== void 0 ? y : "";
+          if (E.length > 1) {
+            var k, M = (k = E.item(0).textContent) === null || k === void 0 ? void 0 : k.length;
+            s.textContent = x, M && this.setSelection(s.childNodes.item(0), M, M);
+          }
+          if (x.length > 0) {
+            var z = x.at(0), A = x.at(x.length - 1);
+            if (z === this.getEmptyParagraph().textContent || A === this.getEmptyParagraph().textContent) {
+              var P = null;
+              z === this.getEmptyParagraph().textContent ? (s.textContent = x.substring(1), P = e.inputType === "deleteContentBackward" || e.inputType === "deleteContentForward" ? 0 : s.textContent.length) : A === this.getEmptyParagraph().textContent && (s.textContent = x.substring(0, x.length - 1), P = s.textContent.length), P && this.setSelection(s.childNodes.item(0), P, P);
+            }
+          } else E.length === 1 && E[0] instanceof HTMLBRElement && (s.innerHTML = this.emptyLineValue);
+          var C = this.asProps, w = C.errors, F = C.showErrors, D = this.validateLine(s);
+          this.recalculateErrors(), this.setErrorIndex(s), !D && F && this.toggleErrorsPopper("keyboardLineIndex", s, 0);
+          var T = !D || D && w.length === 1 && w[0].lineNode === s ? s : this.textarea;
+          if (F && ((b = this.popper) === null || b === void 0 ? void 0 : b.current.state.elements.reference) !== T)
+            if (this.shouldChangePopperTrigger(T)) {
+              var u;
+              (u = this.setPopperTrigger) === null || u === void 0 || u.call(this, T);
+            } else
+              this.setState({
+                visibleErrorPopper: !1
+              });
+        } else if (s === null) {
+          var S;
+          if ((S = this.setPopperTrigger) === null || S === void 0 || S.call(this, this.textarea), (l == null ? void 0 : l.focusNode) === this.textarea && this.textarea.childNodes.length > 1) {
+            var _ = l.focusOffset, p = this.textarea.childNodes.item(_ - 1), H = this.textarea.childNodes.item(_);
+            this.textarea.removeChild(H), p instanceof HTMLParagraphElement && (p.innerHTML = this.emptyLineValue), p && this.setSelection(p, 0, 0);
+          } else
+            this.setSelection(this.textarea, 0, 0);
+        }
+        this.recalculateLinesCount();
+      }
+    }
+  }, {
+    key: "handleFocus",
+    value: function(e) {
+      this.isFocusing = !0, this.errorByInteraction = "keyboard", this.asProps.showErrors ? this.toggleErrorsPopperByKeyboard(150) : this.toggleErrorsPopper("keyboardLineIndex", this.textarea);
+    }
+  }, {
+    key: "handleBlur",
+    value: function(e) {
+      var i = this;
+      this.isFocusing = !1, this.setState({
+        visibleErrorPopper: !1
+      });
+      var r = this.asProps, t = r.validateOn, a = r.onBlur;
+      t.includes("blur") && this.recalculateErrors(), a(this.getValues().join(this.delimiter), e), setTimeout(function() {
+        i.setState({
+          keyboardLineIndex: -1
+        });
+      }, 200);
+    }
+  }, {
+    key: "handleKeyDown",
+    value: function(e) {
+      var i = this;
+      this.errorByInteraction = "keyboard";
+      var r = this.asProps.linesDelimiters, t = this.getNodeFromSelection();
+      if (e.key === "Enter" || r != null && r.includes(e.key)) {
+        if (t === this.textarea && e.preventDefault(), t instanceof HTMLParagraphElement) {
+          var a, n = (a = t.textContent) === null || a === void 0 ? void 0 : a.trim();
+          if (!n)
+            e.preventDefault();
+          else {
+            var l, d, g, m;
+            e.preventDefault();
+            var h = document.getSelection(), v = (h == null ? void 0 : h.focusNode) instanceof Text ? h.focusNode : h == null || (l = h.focusNode) === null || l === void 0 ? void 0 : l.childNodes.item(0), s = h == null ? void 0 : h.focusOffset, I = "";
+            if (v instanceof Text && s !== void 0 && s !== ((d = v.textContent) === null || d === void 0 ? void 0 : d.length)) {
+              var c, y;
+              I = (c = (y = v.textContent) === null || y === void 0 ? void 0 : y.substring(s)) !== null && c !== void 0 ? c : this.emptyLineValue, v.textContent && (v.textContent = v.textContent.substring(0, s));
+            }
+            ((g = t.textContent) === null || g === void 0 ? void 0 : g.trim()) === "" && (t.innerHTML = this.emptyLineValue);
+            var b = document.createElement("p");
+            I ? b.textContent = I : b.innerHTML = this.emptyLineValue, t.after(b), this.setSelection(b, 0, 0), this.validateLine(t), this.validateLine(b), t.previousSibling && this.validateLine(t.previousSibling), this.setErrorIndex(b), ((m = b.textContent) === null || m === void 0 ? void 0 : m.trim()) !== "" && this.recalculateLinesCount(), setTimeout(function() {
+              i.recalculateErrors();
+            }, 0), this.toggleErrorsPopperByKeyboard(0);
+          }
+        }
+      } else if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight")
+        t instanceof HTMLParagraphElement && this.handleCursorMovement(t, e), this.toggleErrorsPopperByKeyboard(200);
+      else if (this.isDeleteKey(e) && t instanceof HTMLParagraphElement) {
+        var E;
+        if (((E = t.textContent) === null || E === void 0 ? void 0 : E.trim()) === "" && !this.isRangeSelection()) {
+          var x = t.previousSibling;
+          if (x instanceof HTMLParagraphElement) {
+            var k;
+            if (e.preventDefault(), this.textarea.removeChild(t), this.toggleErrorsPopperByKeyboard(0), ((k = x.textContent) === null || k === void 0 ? void 0 : k.trim()) === "" && x.previousSibling === null && this.textarea.childNodes.length === 1)
+              this.textarea.textContent = "", this.setSelection(this.textarea, 0, 0);
+            else if (x instanceof HTMLParagraphElement) {
+              var M, z, A = x.childNodes.item(0), P = (M = (z = A.textContent) === null || z === void 0 ? void 0 : z.length) !== null && M !== void 0 ? M : 0;
+              this.setSelection(A, P, P);
+            } else
+              console.warn("incorrect prevNode type", x);
+            setTimeout(function() {
+              i.recalculateErrors();
+            }, 0), this.toggleErrorsPopperByKeyboard(0);
+          }
+        } else if (this.isRangeSelection()) {
+          var C, w, F, D, T, u = document.getSelection(), S = this.getSelectionDirection(), _ = S === "backward" ? u == null ? void 0 : u.focusNode : u == null ? void 0 : u.anchorNode, p = S === "backward" ? u == null ? void 0 : u.anchorNode : u == null ? void 0 : u.focusNode, H = S === "backward" ? u == null ? void 0 : u.focusOffset : u == null ? void 0 : u.anchorOffset, B = S === "backward" ? u == null ? void 0 : u.anchorOffset : u == null ? void 0 : u.focusOffset;
+          if (_ === p && H === 0 && (p === t && B === 1 || B === ((C = t.textContent) === null || C === void 0 ? void 0 : C.length))) {
+            e.preventDefault();
+            var K = _ == null ? void 0 : _.parentElement, V = p == null ? void 0 : p.parentElement, W = this.textarea.childNodes;
+            K === W.item(0) && V === W.item(W.length - 1) ? (this.textarea.textContent = "", this.setSelection(this.textarea, 0, 0)) : (t.innerHTML = this.emptyLineValue, this.validateLine(t)), this.setErrorIndex(t), this.recalculateLinesCount(), setTimeout(function() {
+              i.recalculateErrors();
+            }, 0), this.toggleErrorsPopperByKeyboard(0);
+          } else if (p !== _ && p instanceof Text && _ instanceof Text && (p == null ? void 0 : p.textContent) === (p == null || (w = p.parentNode) === null || w === void 0 ? void 0 : w.textContent) && (_ == null ? void 0 : _.textContent) === (_ == null || (F = _.parentNode) === null || F === void 0 ? void 0 : F.textContent) && H === 0 && B === (p == null || (D = p.parentNode) === null || D === void 0 || (T = D.textContent) === null || T === void 0 ? void 0 : T.length)) {
+            e.preventDefault();
+            var te = Array.from(this.textarea.children), X = _.parentElement, j = p.parentElement, Y = this.textarea.childNodes;
+            if (X === Y.item(0) && j === Y.item(Y.length - 1))
+              this.textarea.textContent = "", this.setSelection(this.textarea, 0, 0);
+            else {
+              var Q = !1, Z = ne(te), q;
+              try {
+                for (Z.s(); !(q = Z.n()).done; ) {
+                  var J = q.value;
+                  if (J === X || Q)
+                    if (Q = !0, J === j) {
+                      j.innerHTML = this.emptyLineValue, this.setSelection(j, 0, 0);
+                      break;
+                    } else
+                      this.textarea.removeChild(J);
+                }
+              } catch (re) {
+                Z.e(re);
+              } finally {
+                Z.f();
+              }
+              this.validateLine(t);
+            }
+            this.setErrorIndex(t), this.recalculateLinesCount(), setTimeout(function() {
+              i.recalculateErrors();
+            }, 0), this.toggleErrorsPopperByKeyboard(0);
+          }
+        }
+      } else e.key === "z" && (e.ctrlKey || e.metaKey) && e.preventDefault();
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var e = this.asProps, i, r, t = this, a = ge, n = this.asProps, l = n.styles, d = n.showErrors, g = this.state.visibleErrorPopper, m = this.errorMessage, h = m.errorMessage, v = m.isCommonError, s = d && g && !!h && !this.isDisabled, I = $(this.asProps), c = I.__excludeProps;
+      return i = ue(l), /* @__PURE__ */ R.createElement(R.Fragment, null, /* @__PURE__ */ R.createElement(N, i.cn("Tooltip", {
+        interaction: "none",
+        placement: v ? "right-start" : "right",
+        visible: s,
+        theme: "warning",
+        offset: v ? void 0 : [0, 26],
+        preventOverflow: {
+          boundary: (r = this.containerRef.current) !== null && r !== void 0 ? r : void 0,
+          tether: !1
+        }
+      }), function(y) {
+        var b = y.popper, E = y.setTrigger;
+        return t.popper || (t.setPopperTrigger = E, t.popper = b), /* @__PURE__ */ R.createElement(N.Popper, {
+          id: t.popperDescribedId
+        }, h);
+      }), /* @__PURE__ */ R.createElement(a, i.cn("SInputField", ae({}, he({
+        ref: this.containerRef,
+        __excludeProps: ["onBlur", "value"].concat(U(c))
+      }, e)))));
+    }
+  }, {
+    key: "prepareNodesForPaste",
+    value: function(e) {
+      var i, r, t, a = this, n = [], l = this.asProps.pasteProps, d = (i = l == null ? void 0 : l.lineProcessing) !== null && i !== void 0 ? i : function(h) {
+        var v = h.trim();
+        return v === "" ? h : v;
+      }, g = (r = l == null ? void 0 : l.skipEmptyLines) !== null && r !== void 0 ? r : this.skipEmptyLines, m = (t = l == null ? void 0 : l.delimiter) !== null && t !== void 0 ? t : this.delimiter;
+      return e.split(m).forEach(function(h) {
+        var v = d(h);
+        if (v === "" && g === !1 || v !== "") {
+          var s = document.createElement("p");
+          if (v === "")
+            s.innerHTML = a.emptyLineValue;
+          else if (v.trim() === "") {
+            var I = new RegExp("\\s", "g");
+            s.innerHTML = fe.sanitize(v.replace(I, a.spaceLineValue));
+          } else
+            s.append(document.createTextNode(v));
+          n.push(s), a.validateLine(s);
+        }
+      }), n;
+    }
+  }, {
+    key: "recalculateErrors",
+    value: function() {
+      var e = [];
+      this.textarea.childNodes.forEach(function(i, r) {
+        if (i instanceof HTMLParagraphElement && i.getAttribute("aria-invalid") === "true") {
+          var t, a = {
+            errorMessage: (t = i.dataset.errormessage) !== null && t !== void 0 ? t : "",
+            lineNode: i,
+            lineIndex: r
+          };
+          e.push(a);
+        }
+      }), this.asProps.onErrorsChange(e);
+    }
+  }, {
+    key: "recalculateLinesCount",
+    value: function() {
+      var e = this;
+      this.linesCountTimeout && clearTimeout(this.linesCountTimeout), this.linesCountTimeout = window.setTimeout(function() {
+        var i = 0, r = e.asProps, t = r.maxLines, a = r.linesCount;
+        e.textarea.childNodes.forEach(function(n, l) {
+          n instanceof HTMLParagraphElement && (n.dataset.overMaxRows = "false", n.textContent !== e.getEmptyParagraph().textContent && n.textContent !== "" && (i++, i > t && (n.dataset.overMaxRows = "true")));
+        }), a !== i && e.asProps.onChangeLinesCount(i);
+      }, 100);
+    }
+  }, {
+    key: "getValues",
+    value: function() {
+      var e = [];
+      return this.textarea.childNodes.forEach(function(i) {
+        var r;
+        e.push((r = i.textContent) !== null && r !== void 0 ? r : "");
+      }), e;
+    }
+  }, {
+    key: "shouldChangePopperTrigger",
+    value: function(e) {
+      return this.textarea !== e || this.textarea === e && !!this.asProps.commonErrorMessage;
+    }
+  }, {
+    key: "toggleErrorsPopperByKeyboard",
+    value: function(e) {
+      var i = this;
+      this.toggleErrorsPopperTimeout && clearTimeout(this.toggleErrorsPopperTimeout), this.isScrolling ? this.toggleErrorsPopperTimeout = window.setTimeout(function() {
+        i.toggleErrorsPopperByKeyboard(e);
+      }, 50) : setTimeout(function() {
+        var r = i.getNodeFromSelection();
+        i.toggleErrorsPopper("keyboardLineIndex", r, e);
+      }, 0);
+    }
+  }, {
+    key: "toggleErrorsPopper",
+    value: function(e, i, r) {
+      var t = this;
+      i instanceof HTMLDivElement || i instanceof HTMLParagraphElement ? (this.changeTriggerTimeout && clearTimeout(this.changeTriggerTimeout), this.changeTriggerTimeout = window.setTimeout(function() {
+        var a = i === t.textarea ? t.getNodeFromSelection() : i, n = -1, l = !1;
+        a instanceof HTMLParagraphElement ? (l = a.getAttribute("aria-invalid") === "true", n = Array.from(t.textarea.childNodes).indexOf(a)) : a === t.textarea && (n = 0), a instanceof HTMLElement && t.setState(function(d) {
+          var g = {
+            visibleErrorPopper: t.isFocusing && t.asProps.commonErrorMessage ? !0 : l,
+            mouseLineIndex: d.mouseLineIndex,
+            keyboardLineIndex: d.keyboardLineIndex
+          };
+          return (t.isFocusing || e === "mouseLineIndex" && l) && (g[e] = n), g;
+        }, function() {
+          var d = l ? a : t.textarea;
+          if (t.shouldChangePopperTrigger(d)) {
+            var g;
+            (g = t.setPopperTrigger) === null || g === void 0 || g.call(t, d), t.forceUpdate();
+          }
+        });
+      }, r ?? 50)) : this.setState({
+        visibleErrorPopper: !1
+      });
+    }
+  }, {
+    key: "toggleAriaInvalid",
+    value: function(e, i) {
+      e && i > 0 ? (this.textarea.setAttribute("aria-describedby", this.popperDescribedId), this.textarea.setAttribute("aria-invalid", "true")) : (this.textarea.removeAttribute("aria-invalid"), this.textarea.removeAttribute("aria-describedby"));
+    }
+  }, {
+    key: "handleChangeErrorIndex",
+    value: function(e) {
+      var i, r = this, t = this.asProps.errors[e], a = this.textarea.childNodes, n = t ? (i = t.lineNode) !== null && i !== void 0 ? i : a.item(t.lineIndex) : null, l = document.getSelection();
+      l && n instanceof HTMLParagraphElement && (this.setState({
+        visibleErrorPopper: !1
+      }), setTimeout(function() {
+        var d = n.childNodes.item(0);
+        d instanceof Text ? r.setSelection(d, 0, d.length) : r.setSelection(n, 0, 1);
+      }, 150));
+    }
+  }, {
+    key: "validateLine",
+    value: function(e) {
+      var i = this.asProps.lineValidation;
+      if (i && e instanceof HTMLElement) {
+        var r, t = i((r = e.textContent) !== null && r !== void 0 ? r : "", this.getValues()), a = t.isValid, n = t.errorMessage;
+        return a ? (e.removeAttribute("aria-invalid"), e.dataset.errormessage = void 0) : (e.setAttribute("aria-invalid", "true"), e.dataset.errormessage = n), a;
+      }
+      return !0;
+    }
+  }, {
+    key: "setSelection",
+    value: function(e, i, r) {
+      var t = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "center", a = document.getSelection(), n = document.createRange();
+      n.setStart(e, i), n.setEnd(e, r), a == null || a.removeAllRanges(), a == null || a.addRange(n);
+      var l = e instanceof Text ? e.parentNode : e;
+      l instanceof HTMLElement && l.scrollIntoView({
+        block: t,
+        inline: t,
+        behavior: "smooth"
+      });
+    }
+  }, {
+    key: "getNodeFromSelection",
+    value: function() {
+      var e = document.getSelection(), i = (e == null ? void 0 : e.focusNode) instanceof Text ? e.focusNode.parentNode : e == null ? void 0 : e.focusNode;
+      return i ?? null;
+    }
+  }, {
+    key: "handleCursorMovement",
+    value: function(e, i) {
+      var r = null;
+      switch (i.key) {
+        case "ArrowUp":
+          i.preventDefault(), r = e.previousSibling;
+          break;
+        case "ArrowDown":
+          i.preventDefault(), r = e.nextSibling;
+          break;
+        case "ArrowLeft": {
+          e.textContent === this.getEmptyParagraph().textContent && (i.preventDefault(), r = e.previousSibling);
+          break;
+        }
+        case "ArrowRight":
+          e.textContent === this.getEmptyParagraph().textContent && (i.preventDefault(), r = e.nextSibling);
+      }
+      if (r instanceof HTMLParagraphElement) {
+        var t, a, n, l = document.getSelection(), d = r.childNodes.item(0), g = d instanceof Text ? d : r, m = (t = (a = r.textContent) === null || a === void 0 ? void 0 : a.trim()) !== null && t !== void 0 ? t : "", h = (n = l == null ? void 0 : l.focusOffset) !== null && n !== void 0 ? n : 0, v = h <= m.length ? h : m.length;
+        i.key === "ArrowLeft" ? v = m.length : i.key === "ArrowRight" && (v = 0), this.setSelection(g, v, v, "nearest");
+      }
+    }
+  }, {
+    key: "setErrorIndex",
+    value: function(e) {
+      var i = Array.from(this.textarea.childNodes).filter(function(r) {
+        return r instanceof Element && r.getAttribute("aria-invalid") === "true";
+      }).findIndex(function(r) {
+        return r === e;
+      });
+      this.handlers.errorIndex(i);
+    }
+  }, {
+    key: "isDeleteKey",
+    value: function(e) {
+      return e.key === "Backspace" || e.key === "x" && (e.ctrlKey || e.metaKey);
+    }
+  }, {
+    key: "getEmptyParagraph",
+    value: function() {
+      var e = document.createElement("p");
+      return e.innerHTML = this.emptyLineValue, e;
+    }
+  }, {
+    key: "addEventListeners",
+    value: function(e) {
+      e.addEventListener("paste", this.handlePaste), e.addEventListener("input", this.handleChange), e.addEventListener("focus", this.handleFocus), e.addEventListener("blur", this.handleBlur), e.addEventListener("keydown", this.handleKeyDown), e.addEventListener("mousedown", this.handleMouseDown), e.addEventListener("mousemove", this.handleMouseMove), e.addEventListener("mouseleave", this.handleMouseLeave), e.addEventListener("scroll", this.handleScroll), e.removeEventListener("keydown", this.handleSelectAll);
+    }
+  }, {
+    key: "removeEventListeners",
+    value: function(e) {
+      e.removeEventListener("paste", this.handlePaste), e.removeEventListener("input", this.handleChange), e.removeEventListener("focus", this.handleFocus), e.removeEventListener("blur", this.handleBlur), e.removeEventListener("keydown", this.handleKeyDown), e.removeEventListener("mousedown", this.handleMouseDown), e.removeEventListener("mousemove", this.handleMouseMove), e.removeEventListener("mouseleave", this.handleMouseLeave), e.removeEventListener("scroll", this.handleScroll), e.addEventListener("keydown", this.handleSelectAll);
+    }
+  }, {
+    key: "handleSelectAll",
+    value: function(e) {
+      if (e.key === "a" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        var i = e.target;
+        i instanceof HTMLElement && i === this.textarea && this.setSelection(i, 0, i.childNodes.length);
+      }
+    }
+  }, {
+    key: "isRangeSelection",
+    value: function() {
+      var e = document.getSelection();
+      return (e == null ? void 0 : e.focusNode) !== (e == null ? void 0 : e.anchorNode) || (e == null ? void 0 : e.focusOffset) !== (e == null ? void 0 : e.anchorOffset);
+    }
+  }, {
+    key: "getSelectionDirection",
+    value: function() {
+      var e = document.getSelection();
+      if (e != null && e.anchorNode && e !== null && e !== void 0 && e.focusNode) {
+        var i = e.anchorNode.compareDocumentPosition(e.focusNode);
+        return i === 0 && e.anchorOffset > e.focusOffset || // if nodes are the same
+        i === Node.DOCUMENT_POSITION_PRECEDING ? "backward" : "forward";
+      }
+      return null;
+    }
+  }]), O;
+}(ce);
+L(G, "displayName", "Textarea");
+L(G, "style", me);
+L(G, "enhance", [pe()]);
+L(G, "defaultProps", {
+  defaultValue: "",
+  size: "m",
+  state: "normal",
+  minRows: 2,
+  maxRows: 10,
+  defaultShowErrors: !1,
+  defaultErrorIndex: -1,
+  defaultLinesCount: 0
+});
+export {
+  G as InputField
+};

package/lib/esm/index.mjs

@@ -0,0 +1,4 @@
+import { default as o } from "./BulkTextarea.mjs";
+export {
+  o as default
+};