@semcore/bulk-textarea 16.6.2 → 16.7.0-prerelease.2
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
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/@semcore/bulk-textarea)
|
|
4
4
|
[](https://www.npmjs.com/package/@semcore/bulk-textarea)
|
|
5
|
-
[](https://github.com/semrush/intergalactic/blob/
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
|
|
6
6
|
|
|
7
7
|
> This component is part of the Intergalactic Design System
|
|
8
8
|
|
|
@@ -20,13 +20,13 @@ npm install @semcore/bulk-textarea
|
|
|
20
20
|
|
|
21
21
|
## 👤 Author
|
|
22
22
|
|
|
23
|
-
[UI-kit team](https://github.com/semrush/intergalactic/blob/
|
|
23
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
24
24
|
|
|
25
25
|
## 🤝 Contributing
|
|
26
26
|
|
|
27
27
|
Contributions, issues and feature requests are welcome!
|
|
28
28
|
|
|
29
|
-
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/
|
|
29
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
|
|
30
30
|
|
|
31
31
|
## Show your support
|
|
32
32
|
|
|
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
|
|
|
34
34
|
|
|
35
35
|
## 📝 License
|
|
36
36
|
|
|
37
|
-
This project is [MIT](https://github.com/semrush/intergalactic/blob/
|
|
37
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.
|
|
@@ -21,20 +21,20 @@ var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
|
|
|
21
21
|
var _dompurify = _interopRequireDefault(require("dompurify"));
|
|
22
22
|
var _react = _interopRequireDefault(require("react"));
|
|
23
23
|
/*!__reshadow-styles__:"./inputField.shadow.css"*/
|
|
24
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
24
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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)}", /*__inner_css_end__*/"7e9un_gg_"),
|
|
25
25
|
/*__reshadow_css_end__*/
|
|
26
26
|
{
|
|
27
|
-
"__SInputField": "
|
|
28
|
-
"_showErrors": "
|
|
29
|
-
"_readonly": "
|
|
30
|
-
"_disabled": "
|
|
31
|
-
"_size_m": "
|
|
32
|
-
"--minRows": "--
|
|
33
|
-
"--maxRows": "--
|
|
34
|
-
"_size_l": "
|
|
35
|
-
"_state_normal": "
|
|
36
|
-
"_state_valid": "
|
|
37
|
-
"_state_invalid": "
|
|
27
|
+
"__SInputField": "___SInputField_7e9un_gg_",
|
|
28
|
+
"_showErrors": "__showErrors_7e9un_gg_",
|
|
29
|
+
"_readonly": "__readonly_7e9un_gg_",
|
|
30
|
+
"_disabled": "__disabled_7e9un_gg_",
|
|
31
|
+
"_size_m": "_size_m_7e9un_gg_",
|
|
32
|
+
"--minRows": "--minRows_7e9un",
|
|
33
|
+
"--maxRows": "--maxRows_7e9un",
|
|
34
|
+
"_size_l": "_size_l_7e9un_gg_",
|
|
35
|
+
"_state_normal": "_state_normal_7e9un_gg_",
|
|
36
|
+
"_state_valid": "_state_valid_7e9un_gg_",
|
|
37
|
+
"_state_invalid": "_state_invalid_7e9un_gg_"
|
|
38
38
|
});
|
|
39
39
|
var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
40
40
|
function InputField(props) {
|
|
@@ -105,7 +105,12 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
105
105
|
}, {
|
|
106
106
|
key: "componentDidMount",
|
|
107
107
|
value: function componentDidMount() {
|
|
108
|
-
var _this$containerRef$cu
|
|
108
|
+
var _this$containerRef$cu,
|
|
109
|
+
_this2 = this;
|
|
110
|
+
var _this$asProps = this.asProps,
|
|
111
|
+
autoFocus = _this$asProps.autoFocus,
|
|
112
|
+
disabled = _this$asProps.disabled,
|
|
113
|
+
readonly = _this$asProps.readonly;
|
|
109
114
|
(_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 || _this$containerRef$cu.append(this.textarea);
|
|
110
115
|
this.handleValueOutChange();
|
|
111
116
|
var config = {
|
|
@@ -116,11 +121,19 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
116
121
|
if (this.props.onImmediatelyChange) {
|
|
117
122
|
this.observer.observe(this.textarea, config);
|
|
118
123
|
}
|
|
124
|
+
if (autoFocus && !disabled) {
|
|
125
|
+
/* Safari & Firefox may silently ignore programmatic focus calls with very short
|
|
126
|
+
delays (<10ms). Using 10ms as a safe threshold based on observed behavior.
|
|
127
|
+
*/
|
|
128
|
+
setTimeout(function () {
|
|
129
|
+
return _this2.textarea.focus();
|
|
130
|
+
}, 10);
|
|
131
|
+
}
|
|
119
132
|
}
|
|
120
133
|
}, {
|
|
121
134
|
key: "componentDidUpdate",
|
|
122
135
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
123
|
-
var
|
|
136
|
+
var _this3 = this;
|
|
124
137
|
var _this$props2 = this.props,
|
|
125
138
|
value = _this$props2.value,
|
|
126
139
|
errors = _this$props2.errors,
|
|
@@ -196,9 +209,9 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
196
209
|
}
|
|
197
210
|
this.validateLine(paragraph);
|
|
198
211
|
setTimeout(function () {
|
|
199
|
-
var newNode =
|
|
212
|
+
var newNode = _this3.textarea.childNodes.item(keyboardLineIndex);
|
|
200
213
|
if (newNode) {
|
|
201
|
-
|
|
214
|
+
_this3.setErrorIndex(newNode);
|
|
202
215
|
}
|
|
203
216
|
}, 0); // need this timeout to update errorIndex to the new (usually empty) line
|
|
204
217
|
}
|
|
@@ -218,9 +231,9 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
218
231
|
}, {
|
|
219
232
|
key: "isDisabled",
|
|
220
233
|
get: function get() {
|
|
221
|
-
var _this$
|
|
222
|
-
disabled = _this$
|
|
223
|
-
readonly = _this$
|
|
234
|
+
var _this$asProps2 = this.asProps,
|
|
235
|
+
disabled = _this$asProps2.disabled,
|
|
236
|
+
readonly = _this$asProps2.readonly;
|
|
224
237
|
return Boolean(disabled || readonly);
|
|
225
238
|
}
|
|
226
239
|
}, {
|
|
@@ -233,11 +246,11 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
233
246
|
key: "errorMessage",
|
|
234
247
|
get: function get() {
|
|
235
248
|
var _errorItem$errorMessa, _errorItem, _errorItem2;
|
|
236
|
-
var _this$
|
|
237
|
-
errors = _this$
|
|
238
|
-
errorIndex = _this$
|
|
239
|
-
commonErrorMessage = _this$
|
|
240
|
-
prevError = _this$
|
|
249
|
+
var _this$asProps3 = this.asProps,
|
|
250
|
+
errors = _this$asProps3.errors,
|
|
251
|
+
errorIndex = _this$asProps3.errorIndex,
|
|
252
|
+
commonErrorMessage = _this$asProps3.commonErrorMessage,
|
|
253
|
+
prevError = _this$asProps3.prevError;
|
|
241
254
|
var _this$state = this.state,
|
|
242
255
|
mouseLineIndex = _this$state.mouseLineIndex,
|
|
243
256
|
keyboardLineIndex = _this$state.keyboardLineIndex;
|
|
@@ -309,13 +322,13 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
309
322
|
}, {
|
|
310
323
|
key: "handleScroll",
|
|
311
324
|
value: function handleScroll() {
|
|
312
|
-
var
|
|
325
|
+
var _this4 = this;
|
|
313
326
|
if (this.scrollingTimeout) {
|
|
314
327
|
clearTimeout(this.scrollingTimeout);
|
|
315
328
|
}
|
|
316
329
|
this.isScrolling = true;
|
|
317
330
|
this.scrollingTimeout = window.setTimeout(function () {
|
|
318
|
-
|
|
331
|
+
_this4.isScrolling = false;
|
|
319
332
|
}, 50);
|
|
320
333
|
}
|
|
321
334
|
}, {
|
|
@@ -504,9 +517,9 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
504
517
|
} else if (childNodes.length === 1 && childNodes[0] instanceof HTMLBRElement) {
|
|
505
518
|
rowNode.innerHTML = this.emptyLineValue;
|
|
506
519
|
}
|
|
507
|
-
var _this$
|
|
508
|
-
errors = _this$
|
|
509
|
-
showErrors = _this$
|
|
520
|
+
var _this$asProps4 = this.asProps,
|
|
521
|
+
errors = _this$asProps4.errors,
|
|
522
|
+
showErrors = _this$asProps4.showErrors;
|
|
510
523
|
var isValid = this.validateLine(rowNode);
|
|
511
524
|
this.recalculateErrors();
|
|
512
525
|
this.setErrorIndex(rowNode);
|
|
@@ -559,22 +572,22 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
559
572
|
}, {
|
|
560
573
|
key: "handleBlur",
|
|
561
574
|
value: function handleBlur(event) {
|
|
562
|
-
var
|
|
575
|
+
var _this5 = this;
|
|
563
576
|
this.isFocusing = false;
|
|
564
577
|
this.setState({
|
|
565
578
|
visibleErrorPopper: false
|
|
566
579
|
});
|
|
567
|
-
var _this$
|
|
568
|
-
validateOn = _this$
|
|
569
|
-
onBlur = _this$
|
|
570
|
-
value = _this$
|
|
580
|
+
var _this$asProps5 = this.asProps,
|
|
581
|
+
validateOn = _this$asProps5.validateOn,
|
|
582
|
+
onBlur = _this$asProps5.onBlur,
|
|
583
|
+
value = _this$asProps5.value;
|
|
571
584
|
if (validateOn.includes('blur')) {
|
|
572
585
|
this.recalculateErrors();
|
|
573
586
|
}
|
|
574
587
|
var valueToChange = typeof value === 'string' ? this.getValues().join(this.delimiter) : this.getValues();
|
|
575
588
|
onBlur(valueToChange, event);
|
|
576
589
|
setTimeout(function () {
|
|
577
|
-
|
|
590
|
+
_this5.setState({
|
|
578
591
|
keyboardLineIndex: -1
|
|
579
592
|
});
|
|
580
593
|
}, 200);
|
|
@@ -582,7 +595,7 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
582
595
|
}, {
|
|
583
596
|
key: "handleKeyDown",
|
|
584
597
|
value: function handleKeyDown(event) {
|
|
585
|
-
var
|
|
598
|
+
var _this6 = this;
|
|
586
599
|
this.errorByInteraction = 'keyboard';
|
|
587
600
|
var linesDelimiters = this.asProps.linesDelimiters;
|
|
588
601
|
var currentNode = this.getNodeFromSelection();
|
|
@@ -630,7 +643,7 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
630
643
|
this.recalculateLinesCount();
|
|
631
644
|
}
|
|
632
645
|
setTimeout(function () {
|
|
633
|
-
|
|
646
|
+
_this6.recalculateErrors();
|
|
634
647
|
}, 0);
|
|
635
648
|
this.toggleErrorsPopperByKeyboard(0);
|
|
636
649
|
}
|
|
@@ -665,7 +678,7 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
665
678
|
}
|
|
666
679
|
}
|
|
667
680
|
setTimeout(function () {
|
|
668
|
-
|
|
681
|
+
_this6.recalculateErrors();
|
|
669
682
|
}, 0);
|
|
670
683
|
this.toggleErrorsPopperByKeyboard(0);
|
|
671
684
|
}
|
|
@@ -694,7 +707,7 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
694
707
|
this.setErrorIndex(currentNode);
|
|
695
708
|
this.recalculateLinesCount();
|
|
696
709
|
setTimeout(function () {
|
|
697
|
-
|
|
710
|
+
_this6.recalculateErrors();
|
|
698
711
|
}, 0);
|
|
699
712
|
this.toggleErrorsPopperByKeyboard(0);
|
|
700
713
|
} 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)) {
|
|
@@ -735,7 +748,7 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
735
748
|
this.setErrorIndex(currentNode);
|
|
736
749
|
this.recalculateLinesCount();
|
|
737
750
|
setTimeout(function () {
|
|
738
|
-
|
|
751
|
+
_this6.recalculateErrors();
|
|
739
752
|
}, 0);
|
|
740
753
|
this.toggleErrorsPopperByKeyboard(0);
|
|
741
754
|
}
|
|
@@ -750,11 +763,11 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
750
763
|
var _ref = this.asProps,
|
|
751
764
|
_ref2,
|
|
752
765
|
_this$containerRef$cu2,
|
|
753
|
-
|
|
766
|
+
_this7 = this;
|
|
754
767
|
var SInputField = _flexBox.Box;
|
|
755
|
-
var _this$
|
|
756
|
-
styles = _this$
|
|
757
|
-
showErrors = _this$
|
|
768
|
+
var _this$asProps6 = this.asProps,
|
|
769
|
+
styles = _this$asProps6.styles,
|
|
770
|
+
showErrors = _this$asProps6.showErrors;
|
|
758
771
|
var visibleErrorPopper = this.state.visibleErrorPopper;
|
|
759
772
|
var _this$errorMessage = this.errorMessage,
|
|
760
773
|
errorMessage = _this$errorMessage.errorMessage,
|
|
@@ -775,13 +788,13 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
775
788
|
}), function (_ref3) {
|
|
776
789
|
var popper = _ref3.popper,
|
|
777
790
|
setTrigger = _ref3.setTrigger;
|
|
778
|
-
if (!
|
|
779
|
-
|
|
791
|
+
if (!_this7.popper) {
|
|
792
|
+
_this7.setPopperTrigger = setTrigger;
|
|
780
793
|
// @ts-ignore
|
|
781
|
-
|
|
794
|
+
_this7.popper = popper;
|
|
782
795
|
}
|
|
783
796
|
return /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Popper, {
|
|
784
|
-
id:
|
|
797
|
+
id: _this7.popperDescribedId
|
|
785
798
|
}, errorMessage);
|
|
786
799
|
}), /*#__PURE__*/_react["default"].createElement(SInputField, _ref2.cn("SInputField", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
787
800
|
"ref": this.containerRef,
|
|
@@ -794,7 +807,7 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
794
807
|
var _pasteProps$lineProce,
|
|
795
808
|
_pasteProps$skipEmpty,
|
|
796
809
|
_pasteProps$delimiter,
|
|
797
|
-
|
|
810
|
+
_this8 = this;
|
|
798
811
|
var listOfNodes = [];
|
|
799
812
|
var pasteProps = this.asProps.pasteProps;
|
|
800
813
|
var lineProcessing = (_pasteProps$lineProce = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.lineProcessing) !== null && _pasteProps$lineProce !== void 0 ? _pasteProps$lineProce : function (line) {
|
|
@@ -809,15 +822,15 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
809
822
|
if (preparedLine === '' && skipEmptyLines === false || preparedLine !== '') {
|
|
810
823
|
var node = document.createElement('p');
|
|
811
824
|
if (preparedLine === '') {
|
|
812
|
-
node.innerHTML =
|
|
825
|
+
node.innerHTML = _this8.emptyLineValue;
|
|
813
826
|
} else if (preparedLine.trim() === '') {
|
|
814
827
|
var allSpacesRegExp = new RegExp('\\s', 'g');
|
|
815
|
-
node.innerHTML = _dompurify["default"].sanitize(preparedLine.replace(allSpacesRegExp,
|
|
828
|
+
node.innerHTML = _dompurify["default"].sanitize(preparedLine.replace(allSpacesRegExp, _this8.spaceLineValue));
|
|
816
829
|
} else {
|
|
817
830
|
node.append(document.createTextNode(preparedLine));
|
|
818
831
|
}
|
|
819
832
|
listOfNodes.push(node);
|
|
820
|
-
|
|
833
|
+
_this8.validateLine(node);
|
|
821
834
|
}
|
|
822
835
|
});
|
|
823
836
|
return listOfNodes;
|
|
@@ -842,19 +855,19 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
842
855
|
}, {
|
|
843
856
|
key: "recalculateLinesCount",
|
|
844
857
|
value: function recalculateLinesCount() {
|
|
845
|
-
var
|
|
858
|
+
var _this9 = this;
|
|
846
859
|
if (this.linesCountTimeout) {
|
|
847
860
|
clearTimeout(this.linesCountTimeout);
|
|
848
861
|
}
|
|
849
862
|
this.linesCountTimeout = window.setTimeout(function () {
|
|
850
863
|
var lines = 0;
|
|
851
|
-
var
|
|
852
|
-
maxLines =
|
|
853
|
-
linesCount =
|
|
854
|
-
|
|
864
|
+
var _this9$asProps = _this9.asProps,
|
|
865
|
+
maxLines = _this9$asProps.maxLines,
|
|
866
|
+
linesCount = _this9$asProps.linesCount;
|
|
867
|
+
_this9.textarea.childNodes.forEach(function (node) {
|
|
855
868
|
if (node instanceof HTMLParagraphElement) {
|
|
856
869
|
node.dataset.overMaxRows = 'false';
|
|
857
|
-
if (node.textContent !==
|
|
870
|
+
if (node.textContent !== _this9.getEmptyParagraph().textContent && node.textContent !== '') {
|
|
858
871
|
lines++;
|
|
859
872
|
if (lines > maxLines) {
|
|
860
873
|
node.dataset.overMaxRows = 'true';
|
|
@@ -863,7 +876,7 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
863
876
|
}
|
|
864
877
|
});
|
|
865
878
|
if (linesCount !== lines) {
|
|
866
|
-
|
|
879
|
+
_this9.asProps.onChangeLinesCount(lines);
|
|
867
880
|
}
|
|
868
881
|
}, 100);
|
|
869
882
|
}
|
|
@@ -890,57 +903,57 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
890
903
|
}, {
|
|
891
904
|
key: "toggleErrorsPopperByKeyboard",
|
|
892
905
|
value: function toggleErrorsPopperByKeyboard(timer) {
|
|
893
|
-
var
|
|
906
|
+
var _this0 = this;
|
|
894
907
|
if (this.toggleErrorsPopperTimeout) {
|
|
895
908
|
clearTimeout(this.toggleErrorsPopperTimeout);
|
|
896
909
|
}
|
|
897
910
|
if (!this.isScrolling) {
|
|
898
911
|
setTimeout(function () {
|
|
899
|
-
var rowNode =
|
|
900
|
-
|
|
912
|
+
var rowNode = _this0.getNodeFromSelection();
|
|
913
|
+
_this0.toggleErrorsPopper('keyboardLineIndex', rowNode, timer);
|
|
901
914
|
}, 0);
|
|
902
915
|
} else {
|
|
903
916
|
this.toggleErrorsPopperTimeout = window.setTimeout(function () {
|
|
904
|
-
|
|
917
|
+
_this0.toggleErrorsPopperByKeyboard(timer);
|
|
905
918
|
}, 50);
|
|
906
919
|
}
|
|
907
920
|
}
|
|
908
921
|
}, {
|
|
909
922
|
key: "toggleErrorsPopper",
|
|
910
923
|
value: function toggleErrorsPopper(key, target, timer) {
|
|
911
|
-
var
|
|
924
|
+
var _this1 = this;
|
|
912
925
|
if (target instanceof HTMLDivElement || target instanceof HTMLParagraphElement) {
|
|
913
926
|
if (this.changeTriggerTimeout) {
|
|
914
927
|
clearTimeout(this.changeTriggerTimeout);
|
|
915
928
|
}
|
|
916
929
|
this.changeTriggerTimeout = window.setTimeout(function () {
|
|
917
|
-
var targetElement = target ===
|
|
930
|
+
var targetElement = target === _this1.textarea ? _this1.getNodeFromSelection() : target;
|
|
918
931
|
var lineIndex = -1;
|
|
919
932
|
var isInvalidRow = false;
|
|
920
933
|
if (targetElement instanceof HTMLParagraphElement) {
|
|
921
934
|
isInvalidRow = targetElement.getAttribute('aria-invalid') === 'true';
|
|
922
|
-
lineIndex = Array.from(
|
|
923
|
-
} else if (targetElement ===
|
|
935
|
+
lineIndex = Array.from(_this1.textarea.childNodes).indexOf(targetElement);
|
|
936
|
+
} else if (targetElement === _this1.textarea) {
|
|
924
937
|
lineIndex = 0;
|
|
925
938
|
}
|
|
926
939
|
if (targetElement instanceof HTMLElement) {
|
|
927
|
-
|
|
940
|
+
_this1.setState(function (prevState) {
|
|
928
941
|
var newState = {
|
|
929
|
-
visibleErrorPopper:
|
|
942
|
+
visibleErrorPopper: _this1.isFocusing && Boolean(_this1.asProps.commonErrorMessage) ? true : isInvalidRow,
|
|
930
943
|
mouseLineIndex: prevState.mouseLineIndex,
|
|
931
944
|
keyboardLineIndex: prevState.keyboardLineIndex
|
|
932
945
|
};
|
|
933
|
-
if (
|
|
946
|
+
if (_this1.isFocusing || key === 'mouseLineIndex' && isInvalidRow) {
|
|
934
947
|
newState[key] = lineIndex;
|
|
935
948
|
}
|
|
936
949
|
return newState;
|
|
937
950
|
}, function () {
|
|
938
|
-
|
|
939
|
-
var trigger = isInvalidRow ? targetElement :
|
|
940
|
-
if (
|
|
941
|
-
var
|
|
942
|
-
(
|
|
943
|
-
|
|
951
|
+
_this1.errorByInteraction = key === 'mouseLineIndex' ? 'mouse' : 'keyboard';
|
|
952
|
+
var trigger = isInvalidRow ? targetElement : _this1.textarea;
|
|
953
|
+
if (_this1.shouldChangePopperTrigger(trigger)) {
|
|
954
|
+
var _this1$setPopperTrigg;
|
|
955
|
+
(_this1$setPopperTrigg = _this1.setPopperTrigger) === null || _this1$setPopperTrigg === void 0 || _this1$setPopperTrigg.call(_this1, trigger);
|
|
956
|
+
_this1.forceUpdate();
|
|
944
957
|
}
|
|
945
958
|
});
|
|
946
959
|
}
|
|
@@ -966,7 +979,7 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
966
979
|
key: "handleChangeErrorIndex",
|
|
967
980
|
value: function handleChangeErrorIndex(errorIndex) {
|
|
968
981
|
var _error$lineNode,
|
|
969
|
-
|
|
982
|
+
_this10 = this;
|
|
970
983
|
var error = this.asProps.errors[errorIndex];
|
|
971
984
|
var childNodes = this.textarea.childNodes;
|
|
972
985
|
var node = error ? (_error$lineNode = error.lineNode) !== null && _error$lineNode !== void 0 ? _error$lineNode : childNodes.item(error.lineIndex) : null;
|
|
@@ -978,9 +991,9 @@ var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
|
978
991
|
setTimeout(function () {
|
|
979
992
|
var text = node.childNodes.item(0);
|
|
980
993
|
if (text instanceof Text) {
|
|
981
|
-
|
|
994
|
+
_this10.setSelection(text, 0, text.length);
|
|
982
995
|
} else {
|
|
983
|
-
|
|
996
|
+
_this10.setSelection(node, 0, 1);
|
|
984
997
|
}
|
|
985
998
|
}, 150);
|
|
986
999
|
}
|