@semcore/bulk-textarea 16.6.2 → 16.7.0-prerelease.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +4 -4
- package/lib/cjs/components/InputField/InputField.js +92 -79
- package/lib/cjs/components/InputField/InputField.js.map +1 -1
- package/lib/cjs/components/InputField/InputField.types.js.map +1 -1
- package/lib/es6/components/InputField/InputField.js +92 -79
- package/lib/es6/components/InputField/InputField.js.map +1 -1
- package/lib/es6/components/InputField/InputField.types.js.map +1 -1
- package/lib/esm/components/InputField/InputField.mjs +72 -65
- package/lib/types/components/InputField/InputField.types.d.ts +2 -0
- package/package.json +4 -4
|
@@ -18,22 +18,22 @@ var style = (
|
|
|
18
18
|
/*__reshadow_css_start__*/
|
|
19
19
|
(sstyled.insert(
|
|
20
20
|
/*__inner_css_start__*/
|
|
21
|
-
'.
|
|
21
|
+
'.___SInputField_7e9un_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_7e9un_gg_>div:empty::before{content:"1. "attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_7e9un_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_7e9un_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_7e9un_gg_>div>p{counter-increment:row;margin:0 0 var(--intergalactic-spacing-1x, 4px)0;position:relative;word-break:break-all;white-space:pre-wrap;padding:0 var(--intergalactic-spacing-5x, 20px)0 var(--intergalactic-spacing-4x, 16px)}.___SInputField_7e9un_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_7e9un_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);position:absolute;left:0}.___SInputField_7e9un_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p{padding-left:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-1x, 4px))}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+100)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+1000)::before{padding-left:0}.___SInputField_7e9un_gg_.__showErrors_7e9un_gg_>div[aria-invalid]>p[aria-invalid]:after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo=\\ );position:absolute;right:0;top:var(--intergalactic-spacing-05x, 2px)}.___SInputField_7e9un_gg_._size_m_7e9un_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_7e9un)*20px);max-height:calc((var(--maxRows_7e9un) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_7e9un_gg_._size_m_7e9un_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_7e9un_gg_._size_l_7e9un_gg_>div:empty::before,.___SInputField_7e9un_gg_._size_m_7e9un_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_7e9un_gg_._size_l_7e9un_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_7e9un)*24px);max-height:calc((var(--maxRows_7e9un) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_7e9un_gg_._size_l_7e9un_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_7e9un_gg_._state_normal_7e9un_gg_:not(.__disabled_7e9un_gg_)>div:focus{border-color:var(--intergalactic-border-info-active, #006dca);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width}.___SInputField_7e9un_gg_._state_valid_7e9un_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_7e9un_gg_._state_valid_7e9un_gg_>div:focus{border-color:var(--intergalactic-border-success-active, #007c65);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width;outline-color:var(--intergalactic-keyboard-focus-valid-outline, #009f81)}.___SInputField_7e9un_gg_._state_invalid_7e9un_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_7e9un_gg_._state_invalid_7e9un_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, #d1002f);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width;outline-color:var(--intergalactic-keyboard-focus-invalid-outline, #ff4953)}.___SInputField_7e9un_gg_.__readonly_7e9un_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_7e9un_gg_.__disabled_7e9un_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
|
|
22
22
|
/*__inner_css_end__*/
|
|
23
|
-
"
|
|
23
|
+
"7e9un_gg_"
|
|
24
24
|
), /*__reshadow_css_end__*/
|
|
25
25
|
{
|
|
26
|
-
"__SInputField": "
|
|
27
|
-
"_showErrors": "
|
|
28
|
-
"_readonly": "
|
|
29
|
-
"_disabled": "
|
|
30
|
-
"_size_m": "
|
|
31
|
-
"--minRows": "--
|
|
32
|
-
"--maxRows": "--
|
|
33
|
-
"_size_l": "
|
|
34
|
-
"_state_normal": "
|
|
35
|
-
"_state_valid": "
|
|
36
|
-
"_state_invalid": "
|
|
26
|
+
"__SInputField": "___SInputField_7e9un_gg_",
|
|
27
|
+
"_showErrors": "__showErrors_7e9un_gg_",
|
|
28
|
+
"_readonly": "__readonly_7e9un_gg_",
|
|
29
|
+
"_disabled": "__disabled_7e9un_gg_",
|
|
30
|
+
"_size_m": "_size_m_7e9un_gg_",
|
|
31
|
+
"--minRows": "--minRows_7e9un",
|
|
32
|
+
"--maxRows": "--maxRows_7e9un",
|
|
33
|
+
"_size_l": "_size_l_7e9un_gg_",
|
|
34
|
+
"_state_normal": "_state_normal_7e9un_gg_",
|
|
35
|
+
"_state_valid": "_state_valid_7e9un_gg_",
|
|
36
|
+
"_state_invalid": "_state_invalid_7e9un_gg_"
|
|
37
37
|
})
|
|
38
38
|
);
|
|
39
39
|
var InputField = /* @__PURE__ */ (function(_Component) {
|
|
@@ -104,7 +104,9 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
104
104
|
}, {
|
|
105
105
|
key: "componentDidMount",
|
|
106
106
|
value: function componentDidMount() {
|
|
107
|
-
var _this$containerRef$cu;
|
|
107
|
+
var _this$containerRef$cu, _this2 = this;
|
|
108
|
+
var _this$asProps = this.asProps, autoFocus = _this$asProps.autoFocus, disabled = _this$asProps.disabled;
|
|
109
|
+
_this$asProps.readonly;
|
|
108
110
|
(_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 || _this$containerRef$cu.append(this.textarea);
|
|
109
111
|
this.handleValueOutChange();
|
|
110
112
|
var config = {
|
|
@@ -115,11 +117,16 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
115
117
|
if (this.props.onImmediatelyChange) {
|
|
116
118
|
this.observer.observe(this.textarea, config);
|
|
117
119
|
}
|
|
120
|
+
if (autoFocus && !disabled) {
|
|
121
|
+
setTimeout(function() {
|
|
122
|
+
return _this2.textarea.focus();
|
|
123
|
+
}, 10);
|
|
124
|
+
}
|
|
118
125
|
}
|
|
119
126
|
}, {
|
|
120
127
|
key: "componentDidUpdate",
|
|
121
128
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
122
|
-
var
|
|
129
|
+
var _this3 = this;
|
|
123
130
|
var _this$props2 = this.props, value = _this$props2.value, errors = _this$props2.errors, errorIndex = _this$props2.errorIndex, showErrors = _this$props2.showErrors, disabled = _this$props2.disabled, readonly = _this$props2.readonly, highlightErrorIndex = _this$props2.highlightErrorIndex, lineProcessing = _this$props2.lineProcessing, _this$props2$ariaDes = _this$props2["aria-describedby"], ariaDescribedby = _this$props2$ariaDes === void 0 ? "" : _this$props2$ariaDes;
|
|
124
131
|
if (prevProps.value !== value) {
|
|
125
132
|
var currentValue = this.getValues().join(this.delimiter);
|
|
@@ -185,9 +192,9 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
185
192
|
}
|
|
186
193
|
this.validateLine(paragraph);
|
|
187
194
|
setTimeout(function() {
|
|
188
|
-
var newNode =
|
|
195
|
+
var newNode = _this3.textarea.childNodes.item(keyboardLineIndex);
|
|
189
196
|
if (newNode) {
|
|
190
|
-
|
|
197
|
+
_this3.setErrorIndex(newNode);
|
|
191
198
|
}
|
|
192
199
|
}, 0);
|
|
193
200
|
}
|
|
@@ -207,7 +214,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
207
214
|
}, {
|
|
208
215
|
key: "isDisabled",
|
|
209
216
|
get: function get() {
|
|
210
|
-
var _this$
|
|
217
|
+
var _this$asProps2 = this.asProps, disabled = _this$asProps2.disabled, readonly = _this$asProps2.readonly;
|
|
211
218
|
return Boolean(disabled || readonly);
|
|
212
219
|
}
|
|
213
220
|
}, {
|
|
@@ -220,7 +227,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
220
227
|
key: "errorMessage",
|
|
221
228
|
get: function get() {
|
|
222
229
|
var _errorItem$errorMessa, _errorItem, _errorItem2;
|
|
223
|
-
var _this$
|
|
230
|
+
var _this$asProps3 = this.asProps, errors = _this$asProps3.errors, errorIndex = _this$asProps3.errorIndex, commonErrorMessage = _this$asProps3.commonErrorMessage, prevError = _this$asProps3.prevError;
|
|
224
231
|
var _this$state = this.state, mouseLineIndex = _this$state.mouseLineIndex, keyboardLineIndex = _this$state.keyboardLineIndex;
|
|
225
232
|
var currentLineIndex = this.errorByInteraction === "keyboard" ? keyboardLineIndex : this.errorByInteraction === "mouse" ? mouseLineIndex : -1;
|
|
226
233
|
var errorItem = errors[errorIndex];
|
|
@@ -286,13 +293,13 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
286
293
|
}, {
|
|
287
294
|
key: "handleScroll",
|
|
288
295
|
value: function handleScroll() {
|
|
289
|
-
var
|
|
296
|
+
var _this4 = this;
|
|
290
297
|
if (this.scrollingTimeout) {
|
|
291
298
|
clearTimeout(this.scrollingTimeout);
|
|
292
299
|
}
|
|
293
300
|
this.isScrolling = true;
|
|
294
301
|
this.scrollingTimeout = window.setTimeout(function() {
|
|
295
|
-
|
|
302
|
+
_this4.isScrolling = false;
|
|
296
303
|
}, 50);
|
|
297
304
|
}
|
|
298
305
|
}, {
|
|
@@ -479,7 +486,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
479
486
|
} else if (childNodes.length === 1 && childNodes[0] instanceof HTMLBRElement) {
|
|
480
487
|
rowNode.innerHTML = this.emptyLineValue;
|
|
481
488
|
}
|
|
482
|
-
var _this$
|
|
489
|
+
var _this$asProps4 = this.asProps, errors = _this$asProps4.errors, showErrors = _this$asProps4.showErrors;
|
|
483
490
|
var isValid = this.validateLine(rowNode);
|
|
484
491
|
this.recalculateErrors();
|
|
485
492
|
this.setErrorIndex(rowNode);
|
|
@@ -532,19 +539,19 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
532
539
|
}, {
|
|
533
540
|
key: "handleBlur",
|
|
534
541
|
value: function handleBlur(event) {
|
|
535
|
-
var
|
|
542
|
+
var _this5 = this;
|
|
536
543
|
this.isFocusing = false;
|
|
537
544
|
this.setState({
|
|
538
545
|
visibleErrorPopper: false
|
|
539
546
|
});
|
|
540
|
-
var _this$
|
|
547
|
+
var _this$asProps5 = this.asProps, validateOn = _this$asProps5.validateOn, onBlur = _this$asProps5.onBlur, value = _this$asProps5.value;
|
|
541
548
|
if (validateOn.includes("blur")) {
|
|
542
549
|
this.recalculateErrors();
|
|
543
550
|
}
|
|
544
551
|
var valueToChange = typeof value === "string" ? this.getValues().join(this.delimiter) : this.getValues();
|
|
545
552
|
onBlur(valueToChange, event);
|
|
546
553
|
setTimeout(function() {
|
|
547
|
-
|
|
554
|
+
_this5.setState({
|
|
548
555
|
keyboardLineIndex: -1
|
|
549
556
|
});
|
|
550
557
|
}, 200);
|
|
@@ -552,7 +559,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
552
559
|
}, {
|
|
553
560
|
key: "handleKeyDown",
|
|
554
561
|
value: function handleKeyDown(event) {
|
|
555
|
-
var
|
|
562
|
+
var _this6 = this;
|
|
556
563
|
this.errorByInteraction = "keyboard";
|
|
557
564
|
var linesDelimiters = this.asProps.linesDelimiters;
|
|
558
565
|
var currentNode = this.getNodeFromSelection();
|
|
@@ -600,7 +607,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
600
607
|
this.recalculateLinesCount();
|
|
601
608
|
}
|
|
602
609
|
setTimeout(function() {
|
|
603
|
-
|
|
610
|
+
_this6.recalculateErrors();
|
|
604
611
|
}, 0);
|
|
605
612
|
this.toggleErrorsPopperByKeyboard(0);
|
|
606
613
|
}
|
|
@@ -633,7 +640,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
633
640
|
}
|
|
634
641
|
}
|
|
635
642
|
setTimeout(function() {
|
|
636
|
-
|
|
643
|
+
_this6.recalculateErrors();
|
|
637
644
|
}, 0);
|
|
638
645
|
this.toggleErrorsPopperByKeyboard(0);
|
|
639
646
|
}
|
|
@@ -660,7 +667,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
660
667
|
this.setErrorIndex(currentNode);
|
|
661
668
|
this.recalculateLinesCount();
|
|
662
669
|
setTimeout(function() {
|
|
663
|
-
|
|
670
|
+
_this6.recalculateErrors();
|
|
664
671
|
}, 0);
|
|
665
672
|
this.toggleErrorsPopperByKeyboard(0);
|
|
666
673
|
} else if (focusElement !== anchorElement && focusElement instanceof Text && anchorElement instanceof Text && (focusElement === null || focusElement === void 0 ? void 0 : focusElement.textContent) === (focusElement === null || focusElement === 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 || (_anchorElement$parent = anchorElement.parentNode) === null || _anchorElement$parent === void 0 ? void 0 : _anchorElement$parent.textContent) && anchorOffset === 0 && focusOffset === (focusElement === null || focusElement === void 0 || (_focusElement$parentN2 = focusElement.parentNode) === null || _focusElement$parentN2 === void 0 || (_focusElement$parentN2 = _focusElement$parentN2.textContent) === null || _focusElement$parentN2 === void 0 ? void 0 : _focusElement$parentN2.length)) {
|
|
@@ -699,7 +706,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
699
706
|
this.setErrorIndex(currentNode);
|
|
700
707
|
this.recalculateLinesCount();
|
|
701
708
|
setTimeout(function() {
|
|
702
|
-
|
|
709
|
+
_this6.recalculateErrors();
|
|
703
710
|
}, 0);
|
|
704
711
|
this.toggleErrorsPopperByKeyboard(0);
|
|
705
712
|
}
|
|
@@ -711,9 +718,9 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
711
718
|
}, {
|
|
712
719
|
key: "render",
|
|
713
720
|
value: function render() {
|
|
714
|
-
var _ref = this.asProps, _ref2, _this$containerRef$cu2,
|
|
721
|
+
var _ref = this.asProps, _ref2, _this$containerRef$cu2, _this7 = this;
|
|
715
722
|
var SInputField = Box;
|
|
716
|
-
var _this$
|
|
723
|
+
var _this$asProps6 = this.asProps, styles = _this$asProps6.styles, showErrors = _this$asProps6.showErrors;
|
|
717
724
|
var visibleErrorPopper = this.state.visibleErrorPopper;
|
|
718
725
|
var _this$errorMessage = this.errorMessage, errorMessage = _this$errorMessage.errorMessage, isCommonError = _this$errorMessage.isCommonError;
|
|
719
726
|
var visibleErrorTooltip = showErrors && visibleErrorPopper && Boolean(errorMessage) && !this.isDisabled;
|
|
@@ -730,12 +737,12 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
730
737
|
}
|
|
731
738
|
}), function(_ref3) {
|
|
732
739
|
var popper = _ref3.popper, setTrigger = _ref3.setTrigger;
|
|
733
|
-
if (!
|
|
734
|
-
|
|
735
|
-
|
|
740
|
+
if (!_this7.popper) {
|
|
741
|
+
_this7.setPopperTrigger = setTrigger;
|
|
742
|
+
_this7.popper = popper;
|
|
736
743
|
}
|
|
737
744
|
return /* @__PURE__ */ React.createElement(Tooltip.Popper, {
|
|
738
|
-
id:
|
|
745
|
+
id: _this7.popperDescribedId
|
|
739
746
|
}, errorMessage);
|
|
740
747
|
}), /* @__PURE__ */ React.createElement(SInputField, _ref2.cn("SInputField", _objectSpread({}, assignProps({
|
|
741
748
|
"ref": this.containerRef,
|
|
@@ -745,7 +752,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
745
752
|
}, {
|
|
746
753
|
key: "prepareNodesForPaste",
|
|
747
754
|
value: function prepareNodesForPaste(value) {
|
|
748
|
-
var _pasteProps$lineProce, _pasteProps$skipEmpty, _pasteProps$delimiter,
|
|
755
|
+
var _pasteProps$lineProce, _pasteProps$skipEmpty, _pasteProps$delimiter, _this8 = this;
|
|
749
756
|
var listOfNodes = [];
|
|
750
757
|
var pasteProps = this.asProps.pasteProps;
|
|
751
758
|
var lineProcessing = (_pasteProps$lineProce = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.lineProcessing) !== null && _pasteProps$lineProce !== void 0 ? _pasteProps$lineProce : function(line) {
|
|
@@ -760,15 +767,15 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
760
767
|
if (preparedLine === "" && skipEmptyLines === false || preparedLine !== "") {
|
|
761
768
|
var node = document.createElement("p");
|
|
762
769
|
if (preparedLine === "") {
|
|
763
|
-
node.innerHTML =
|
|
770
|
+
node.innerHTML = _this8.emptyLineValue;
|
|
764
771
|
} else if (preparedLine.trim() === "") {
|
|
765
772
|
var allSpacesRegExp = new RegExp("\\s", "g");
|
|
766
|
-
node.innerHTML = DOMPurify.sanitize(preparedLine.replace(allSpacesRegExp,
|
|
773
|
+
node.innerHTML = DOMPurify.sanitize(preparedLine.replace(allSpacesRegExp, _this8.spaceLineValue));
|
|
767
774
|
} else {
|
|
768
775
|
node.append(document.createTextNode(preparedLine));
|
|
769
776
|
}
|
|
770
777
|
listOfNodes.push(node);
|
|
771
|
-
|
|
778
|
+
_this8.validateLine(node);
|
|
772
779
|
}
|
|
773
780
|
});
|
|
774
781
|
return listOfNodes;
|
|
@@ -793,17 +800,17 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
793
800
|
}, {
|
|
794
801
|
key: "recalculateLinesCount",
|
|
795
802
|
value: function recalculateLinesCount() {
|
|
796
|
-
var
|
|
803
|
+
var _this9 = this;
|
|
797
804
|
if (this.linesCountTimeout) {
|
|
798
805
|
clearTimeout(this.linesCountTimeout);
|
|
799
806
|
}
|
|
800
807
|
this.linesCountTimeout = window.setTimeout(function() {
|
|
801
808
|
var lines = 0;
|
|
802
|
-
var
|
|
803
|
-
|
|
809
|
+
var _this9$asProps = _this9.asProps, maxLines = _this9$asProps.maxLines, linesCount = _this9$asProps.linesCount;
|
|
810
|
+
_this9.textarea.childNodes.forEach(function(node) {
|
|
804
811
|
if (node instanceof HTMLParagraphElement) {
|
|
805
812
|
node.dataset.overMaxRows = "false";
|
|
806
|
-
if (node.textContent !==
|
|
813
|
+
if (node.textContent !== _this9.getEmptyParagraph().textContent && node.textContent !== "") {
|
|
807
814
|
lines++;
|
|
808
815
|
if (lines > maxLines) {
|
|
809
816
|
node.dataset.overMaxRows = "true";
|
|
@@ -812,7 +819,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
812
819
|
}
|
|
813
820
|
});
|
|
814
821
|
if (linesCount !== lines) {
|
|
815
|
-
|
|
822
|
+
_this9.asProps.onChangeLinesCount(lines);
|
|
816
823
|
}
|
|
817
824
|
}, 100);
|
|
818
825
|
}
|
|
@@ -839,57 +846,57 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
839
846
|
}, {
|
|
840
847
|
key: "toggleErrorsPopperByKeyboard",
|
|
841
848
|
value: function toggleErrorsPopperByKeyboard(timer) {
|
|
842
|
-
var
|
|
849
|
+
var _this0 = this;
|
|
843
850
|
if (this.toggleErrorsPopperTimeout) {
|
|
844
851
|
clearTimeout(this.toggleErrorsPopperTimeout);
|
|
845
852
|
}
|
|
846
853
|
if (!this.isScrolling) {
|
|
847
854
|
setTimeout(function() {
|
|
848
|
-
var rowNode =
|
|
849
|
-
|
|
855
|
+
var rowNode = _this0.getNodeFromSelection();
|
|
856
|
+
_this0.toggleErrorsPopper("keyboardLineIndex", rowNode, timer);
|
|
850
857
|
}, 0);
|
|
851
858
|
} else {
|
|
852
859
|
this.toggleErrorsPopperTimeout = window.setTimeout(function() {
|
|
853
|
-
|
|
860
|
+
_this0.toggleErrorsPopperByKeyboard(timer);
|
|
854
861
|
}, 50);
|
|
855
862
|
}
|
|
856
863
|
}
|
|
857
864
|
}, {
|
|
858
865
|
key: "toggleErrorsPopper",
|
|
859
866
|
value: function toggleErrorsPopper(key, target, timer) {
|
|
860
|
-
var
|
|
867
|
+
var _this1 = this;
|
|
861
868
|
if (target instanceof HTMLDivElement || target instanceof HTMLParagraphElement) {
|
|
862
869
|
if (this.changeTriggerTimeout) {
|
|
863
870
|
clearTimeout(this.changeTriggerTimeout);
|
|
864
871
|
}
|
|
865
872
|
this.changeTriggerTimeout = window.setTimeout(function() {
|
|
866
|
-
var targetElement = target ===
|
|
873
|
+
var targetElement = target === _this1.textarea ? _this1.getNodeFromSelection() : target;
|
|
867
874
|
var lineIndex = -1;
|
|
868
875
|
var isInvalidRow = false;
|
|
869
876
|
if (targetElement instanceof HTMLParagraphElement) {
|
|
870
877
|
isInvalidRow = targetElement.getAttribute("aria-invalid") === "true";
|
|
871
|
-
lineIndex = Array.from(
|
|
872
|
-
} else if (targetElement ===
|
|
878
|
+
lineIndex = Array.from(_this1.textarea.childNodes).indexOf(targetElement);
|
|
879
|
+
} else if (targetElement === _this1.textarea) {
|
|
873
880
|
lineIndex = 0;
|
|
874
881
|
}
|
|
875
882
|
if (targetElement instanceof HTMLElement) {
|
|
876
|
-
|
|
883
|
+
_this1.setState(function(prevState) {
|
|
877
884
|
var newState = {
|
|
878
|
-
visibleErrorPopper:
|
|
885
|
+
visibleErrorPopper: _this1.isFocusing && Boolean(_this1.asProps.commonErrorMessage) ? true : isInvalidRow,
|
|
879
886
|
mouseLineIndex: prevState.mouseLineIndex,
|
|
880
887
|
keyboardLineIndex: prevState.keyboardLineIndex
|
|
881
888
|
};
|
|
882
|
-
if (
|
|
889
|
+
if (_this1.isFocusing || key === "mouseLineIndex" && isInvalidRow) {
|
|
883
890
|
newState[key] = lineIndex;
|
|
884
891
|
}
|
|
885
892
|
return newState;
|
|
886
893
|
}, function() {
|
|
887
|
-
|
|
888
|
-
var trigger = isInvalidRow ? targetElement :
|
|
889
|
-
if (
|
|
890
|
-
var
|
|
891
|
-
(
|
|
892
|
-
|
|
894
|
+
_this1.errorByInteraction = key === "mouseLineIndex" ? "mouse" : "keyboard";
|
|
895
|
+
var trigger = isInvalidRow ? targetElement : _this1.textarea;
|
|
896
|
+
if (_this1.shouldChangePopperTrigger(trigger)) {
|
|
897
|
+
var _this1$setPopperTrigg;
|
|
898
|
+
(_this1$setPopperTrigg = _this1.setPopperTrigger) === null || _this1$setPopperTrigg === void 0 || _this1$setPopperTrigg.call(_this1, trigger);
|
|
899
|
+
_this1.forceUpdate();
|
|
893
900
|
}
|
|
894
901
|
});
|
|
895
902
|
}
|
|
@@ -914,7 +921,7 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
914
921
|
}, {
|
|
915
922
|
key: "handleChangeErrorIndex",
|
|
916
923
|
value: function handleChangeErrorIndex(errorIndex) {
|
|
917
|
-
var _error$lineNode,
|
|
924
|
+
var _error$lineNode, _this10 = this;
|
|
918
925
|
var error = this.asProps.errors[errorIndex];
|
|
919
926
|
var childNodes = this.textarea.childNodes;
|
|
920
927
|
var node = error ? (_error$lineNode = error.lineNode) !== null && _error$lineNode !== void 0 ? _error$lineNode : childNodes.item(error.lineIndex) : null;
|
|
@@ -926,9 +933,9 @@ var InputField = /* @__PURE__ */ (function(_Component) {
|
|
|
926
933
|
setTimeout(function() {
|
|
927
934
|
var text = node.childNodes.item(0);
|
|
928
935
|
if (text instanceof Text) {
|
|
929
|
-
|
|
936
|
+
_this10.setSelection(text, 0, text.length);
|
|
930
937
|
} else {
|
|
931
|
-
|
|
938
|
+
_this10.setSelection(node, 0, 1);
|
|
932
939
|
}
|
|
933
940
|
}, 150);
|
|
934
941
|
}
|
|
@@ -99,6 +99,8 @@ export type InputFieldProps<T extends string | string[]> = {
|
|
|
99
99
|
* Function for process line after it was blurred
|
|
100
100
|
*/
|
|
101
101
|
lineProcessing?: (line: string, lines: string[]) => string;
|
|
102
|
+
/** Defines whether the input should receive focus on initial render */
|
|
103
|
+
autoFocus?: boolean;
|
|
102
104
|
/**
|
|
103
105
|
* Internal
|
|
104
106
|
*/
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/bulk-textarea",
|
|
3
3
|
"description": "Semrush BulkTextarea Component",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.7.0-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
"@semcore/button": "16.0.12",
|
|
19
19
|
"@semcore/typography": "16.3.2",
|
|
20
20
|
"@semcore/counter": "16.0.11",
|
|
21
|
-
"@semcore/icon": "16.7.
|
|
21
|
+
"@semcore/icon": "16.7.5-prerelease.1",
|
|
22
22
|
"@semcore/popper": "16.0.11",
|
|
23
23
|
"@semcore/tooltip": "16.0.11",
|
|
24
24
|
"dompurify": "3.2.3"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
-
"@semcore/base-components": "^16.0.
|
|
27
|
+
"@semcore/base-components": "^16.5.0-prerelease.1"
|
|
28
28
|
},
|
|
29
29
|
"repository": {
|
|
30
30
|
"type": "git",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/dompurify": "3.2.0",
|
|
36
|
-
"@semcore/core": "16.5.1",
|
|
36
|
+
"@semcore/core": "16.5.2-prerelease.1",
|
|
37
37
|
"@semcore/testing-utils": "1.0.0"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|