@semcore/bulk-textarea 16.0.0-prerelease.7 → 16.0.0
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 +38 -1
- package/lib/cjs/BulkTextarea.js +10 -8
- package/lib/cjs/BulkTextarea.js.map +1 -1
- package/lib/cjs/BulkTextarea.types.js.map +1 -1
- package/lib/cjs/components/InputField/InputField.js +42 -27
- package/lib/cjs/components/InputField/InputField.js.map +1 -1
- package/lib/cjs/components/InputField/InputField.types.js.map +1 -1
- package/lib/cjs/components/InputField/inputField.shadow.css +17 -7
- package/lib/es6/BulkTextarea.js +10 -8
- package/lib/es6/BulkTextarea.js.map +1 -1
- package/lib/es6/BulkTextarea.types.js.map +1 -1
- package/lib/es6/components/InputField/InputField.js +42 -27
- package/lib/es6/components/InputField/InputField.js.map +1 -1
- package/lib/es6/components/InputField/InputField.types.js.map +1 -1
- package/lib/es6/components/InputField/inputField.shadow.css +17 -7
- package/lib/esm/BulkTextarea.mjs +11 -8
- package/lib/esm/components/InputField/InputField.mjs +43 -27
- package/lib/esm/components/InputField/inputField.shadow.css +171 -0
- package/lib/types/BulkTextarea.d.ts +1 -1
- package/lib/types/BulkTextarea.types.d.ts +23 -21
- package/lib/types/components/InputField/InputField.d.ts +4 -4
- package/lib/types/components/InputField/InputField.types.d.ts +4 -4
- package/package.json +9 -9
|
@@ -14,24 +14,27 @@ import Tooltip from "@semcore/tooltip";
|
|
|
14
14
|
import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
|
|
15
15
|
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
16
16
|
import DOMPurify from "dompurify";
|
|
17
|
+
/*!__reshadow-styles__:"./inputField.shadow.css"*/
|
|
17
18
|
var style = (
|
|
18
19
|
/*__reshadow_css_start__*/
|
|
19
20
|
(sstyled.insert(
|
|
20
21
|
/*__inner_css_start__*/
|
|
21
|
-
'.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
22
|
+
'.___SInputField_1q3lj_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_1q3lj_gg_>div:empty::before{content:"1. "attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_1q3lj_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_1q3lj_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_1q3lj_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_1q3lj_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_1q3lj_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_1q3lj_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_1q3lj_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_1q3lj_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_1q3lj_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_1q3lj_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_1q3lj_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_1q3lj_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_1q3lj_gg_.__showErrors_1q3lj_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_1q3lj_gg_._size_m_1q3lj_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_1q3lj)*20px);max-height:calc((var(--maxRows_1q3lj) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_1q3lj_gg_._size_m_1q3lj_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_1q3lj_gg_._size_l_1q3lj_gg_>div:empty::before,.___SInputField_1q3lj_gg_._size_m_1q3lj_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_1q3lj_gg_._size_l_1q3lj_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_1q3lj)*24px);max-height:calc((var(--maxRows_1q3lj) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_1q3lj_gg_._size_l_1q3lj_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_1q3lj_gg_._state_normal_1q3lj_gg_:not(.__disabled_1q3lj_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_1q3lj_gg_._state_valid_1q3lj_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_1q3lj_gg_._state_valid_1q3lj_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5))}.___SInputField_1q3lj_gg_._state_invalid_1q3lj_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_1q3lj_gg_._state_invalid_1q3lj_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SInputField_1q3lj_gg_.__readonly_1q3lj_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_1q3lj_gg_.__disabled_1q3lj_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
|
|
23
|
+
/*__inner_css_end__*/
|
|
24
|
+
"1q3lj_gg_"
|
|
25
|
+
), /*__reshadow_css_end__*/
|
|
26
|
+
{
|
|
27
|
+
"__SInputField": "___SInputField_1q3lj_gg_",
|
|
28
|
+
"_showErrors": "__showErrors_1q3lj_gg_",
|
|
29
|
+
"_readonly": "__readonly_1q3lj_gg_",
|
|
30
|
+
"_disabled": "__disabled_1q3lj_gg_",
|
|
31
|
+
"_size_m": "_size_m_1q3lj_gg_",
|
|
32
|
+
"--minRows": "--minRows_1q3lj",
|
|
33
|
+
"--maxRows": "--maxRows_1q3lj",
|
|
34
|
+
"_size_l": "_size_l_1q3lj_gg_",
|
|
35
|
+
"_state_normal": "_state_normal_1q3lj_gg_",
|
|
36
|
+
"_state_valid": "_state_valid_1q3lj_gg_",
|
|
37
|
+
"_state_invalid": "_state_invalid_1q3lj_gg_"
|
|
35
38
|
})
|
|
36
39
|
);
|
|
37
40
|
var InputField = /* @__PURE__ */ function(_Component) {
|
|
@@ -95,8 +98,11 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
95
98
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
96
99
|
var _this2 = this;
|
|
97
100
|
var _this$props = this.props, value = _this$props.value, errors = _this$props.errors, errorIndex = _this$props.errorIndex, showErrors = _this$props.showErrors, disabled = _this$props.disabled, readonly = _this$props.readonly, highlightErrorIndex = _this$props.highlightErrorIndex, lineProcessing = _this$props.lineProcessing, _this$props$ariaDesc = _this$props["aria-describedby"], ariaDescribedby = _this$props$ariaDesc === void 0 ? "" : _this$props$ariaDesc;
|
|
98
|
-
if (prevProps.value !== value
|
|
99
|
-
this.
|
|
101
|
+
if (prevProps.value !== value) {
|
|
102
|
+
var currentValue = this.getValues().join(this.delimiter);
|
|
103
|
+
if (typeof value === "string" ? value !== currentValue : value.join(this.delimiter) !== currentValue) {
|
|
104
|
+
this.handleValueOutChange();
|
|
105
|
+
}
|
|
100
106
|
}
|
|
101
107
|
if (prevProps.showErrors !== showErrors || prevProps.errors.length !== errors.length) {
|
|
102
108
|
this.toggleAriaInvalid(showErrors, errors.length);
|
|
@@ -250,7 +256,6 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
250
256
|
}, {
|
|
251
257
|
key: "handleMouseDown",
|
|
252
258
|
value: function handleMouseDown(event) {
|
|
253
|
-
this.errorByInteraction = "keyboard";
|
|
254
259
|
var element = event.target;
|
|
255
260
|
if (element instanceof HTMLElement) {
|
|
256
261
|
this.toggleErrorsPopper("keyboardLineIndex", element);
|
|
@@ -299,6 +304,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
299
304
|
var validateOn = this.asProps.validateOn;
|
|
300
305
|
var value = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData("text/plain");
|
|
301
306
|
var listOfNodes = value ? this.prepareNodesForPaste(value) : [];
|
|
307
|
+
if (listOfNodes.length === 0) return;
|
|
302
308
|
var selection = document.getSelection();
|
|
303
309
|
if (selection !== null && selection !== void 0 && selection.anchorNode && selection !== null && selection !== void 0 && selection.focusNode) {
|
|
304
310
|
var anchorOffset = selection.anchorOffset;
|
|
@@ -323,17 +329,19 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
323
329
|
var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2, _ref3;
|
|
324
330
|
var before = (_anchorNode$textConte = anchorNode === null || anchorNode === void 0 ? void 0 : (_anchorNode$textConte2 = anchorNode.textContent) === null || _anchorNode$textConte2 === void 0 ? void 0 : _anchorNode$textConte2.substring(0, fromOffset)) !== null && _anchorNode$textConte !== void 0 ? _anchorNode$textConte : "";
|
|
325
331
|
var after = (_focusNode$textConten = focusNode === null || focusNode === void 0 ? void 0 : (_focusNode$textConten2 = focusNode.textContent) === null || _focusNode$textConten2 === void 0 ? void 0 : _focusNode$textConten2.substring(toOffset)) !== null && _focusNode$textConten !== void 0 ? _focusNode$textConten : "";
|
|
332
|
+
var noEmptyLineBefore = before.trim() === "" ? "" : before;
|
|
333
|
+
var noEmptyLineAfter = after.trim() === "" ? "" : after;
|
|
326
334
|
selection.deleteFromDocument();
|
|
327
335
|
if (documentPosition !== 0) {
|
|
328
336
|
this.textarea.removeChild(focusNode);
|
|
329
337
|
}
|
|
330
338
|
var firstNodeToInsert = listOfNodes.splice(0, 1)[0];
|
|
331
339
|
var _lastNodeToInsert = listOfNodes[listOfNodes.length - 1];
|
|
332
|
-
anchorNode.textContent = (_ref3 =
|
|
340
|
+
anchorNode.textContent = (_ref3 = noEmptyLineBefore + (firstNodeToInsert === null || firstNodeToInsert === void 0 ? void 0 : firstNodeToInsert.textContent)) !== null && _ref3 !== void 0 ? _ref3 : "";
|
|
333
341
|
anchorNode.after.apply(anchorNode, _toConsumableArray(listOfNodes));
|
|
334
342
|
if (_lastNodeToInsert) {
|
|
335
343
|
var _lastNodeToInsert$tex2, _lastNodeToInsert$tex3;
|
|
336
|
-
_lastNodeToInsert.textContent = ((_lastNodeToInsert$tex2 = _lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex2 !== void 0 ? _lastNodeToInsert$tex2 : "") +
|
|
344
|
+
_lastNodeToInsert.textContent = ((_lastNodeToInsert$tex2 = _lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex2 !== void 0 ? _lastNodeToInsert$tex2 : "") + noEmptyLineAfter;
|
|
337
345
|
textNode = _lastNodeToInsert.childNodes.item(0);
|
|
338
346
|
position = ((_lastNodeToInsert$tex3 = _lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex3 !== void 0 ? _lastNodeToInsert$tex3 : "").length;
|
|
339
347
|
this.validateLine(_lastNodeToInsert);
|
|
@@ -341,7 +349,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
341
349
|
} else {
|
|
342
350
|
var _anchorNode$textConte3, _anchorNode$textConte4;
|
|
343
351
|
position = ((_anchorNode$textConte3 = anchorNode.textContent) !== null && _anchorNode$textConte3 !== void 0 ? _anchorNode$textConte3 : "").length;
|
|
344
|
-
anchorNode.textContent = ((_anchorNode$textConte4 = anchorNode.textContent) !== null && _anchorNode$textConte4 !== void 0 ? _anchorNode$textConte4 : "") +
|
|
352
|
+
anchorNode.textContent = ((_anchorNode$textConte4 = anchorNode.textContent) !== null && _anchorNode$textConte4 !== void 0 ? _anchorNode$textConte4 : "") + noEmptyLineAfter;
|
|
345
353
|
textNode = anchorNode.childNodes.item(0);
|
|
346
354
|
this.validateLine(anchorNode);
|
|
347
355
|
this.setErrorIndex(anchorNode);
|
|
@@ -488,11 +496,12 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
488
496
|
this.setState({
|
|
489
497
|
visibleErrorPopper: false
|
|
490
498
|
});
|
|
491
|
-
var _this$asProps4 = this.asProps, validateOn = _this$asProps4.validateOn, onBlur = _this$asProps4.onBlur;
|
|
499
|
+
var _this$asProps4 = this.asProps, validateOn = _this$asProps4.validateOn, onBlur = _this$asProps4.onBlur, value = _this$asProps4.value;
|
|
492
500
|
if (validateOn.includes("blur")) {
|
|
493
501
|
this.recalculateErrors();
|
|
494
502
|
}
|
|
495
|
-
|
|
503
|
+
var valueToChange = typeof value === "string" ? this.getValues().join(this.delimiter) : this.getValues();
|
|
504
|
+
onBlur(valueToChange, event);
|
|
496
505
|
setTimeout(function() {
|
|
497
506
|
_this4.setState({
|
|
498
507
|
keyboardLineIndex: -1
|
|
@@ -704,8 +713,9 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
704
713
|
};
|
|
705
714
|
var skipEmptyLines = (_pasteProps$skipEmpty = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.skipEmptyLines) !== null && _pasteProps$skipEmpty !== void 0 ? _pasteProps$skipEmpty : this.skipEmptyLines;
|
|
706
715
|
var delimiter = (_pasteProps$delimiter = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.delimiter) !== null && _pasteProps$delimiter !== void 0 ? _pasteProps$delimiter : this.delimiter;
|
|
707
|
-
value.split(delimiter)
|
|
708
|
-
|
|
716
|
+
var lines = Array.isArray(value) ? value : value.split(delimiter);
|
|
717
|
+
lines.forEach(function(line, index) {
|
|
718
|
+
var preparedLine = lineProcessing(line, index, lines.length);
|
|
709
719
|
if (preparedLine === "" && skipEmptyLines === false || preparedLine !== "") {
|
|
710
720
|
var node = document.createElement("p");
|
|
711
721
|
if (preparedLine === "") {
|
|
@@ -771,7 +781,12 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
771
781
|
var values = [];
|
|
772
782
|
this.textarea.childNodes.forEach(function(node) {
|
|
773
783
|
var _node$textContent;
|
|
774
|
-
|
|
784
|
+
if (((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim()) === "") {
|
|
785
|
+
values.push("");
|
|
786
|
+
} else {
|
|
787
|
+
var _node$textContent2;
|
|
788
|
+
values.push((_node$textContent2 = node.textContent) !== null && _node$textContent2 !== void 0 ? _node$textContent2 : "");
|
|
789
|
+
}
|
|
775
790
|
});
|
|
776
791
|
return values;
|
|
777
792
|
}
|
|
@@ -828,6 +843,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
828
843
|
}
|
|
829
844
|
return newState;
|
|
830
845
|
}, function() {
|
|
846
|
+
_this10.errorByInteraction = key === "mouseLineIndex" ? "mouse" : "keyboard";
|
|
831
847
|
var trigger = isInvalidRow ? targetElement : _this10.textarea;
|
|
832
848
|
if (_this10.shouldChangePopperTrigger(trigger)) {
|
|
833
849
|
var _this10$setPopperTrig;
|
|
@@ -881,8 +897,8 @@ var InputField = /* @__PURE__ */ function(_Component) {
|
|
|
881
897
|
value: function validateLine(node) {
|
|
882
898
|
var lineValidation = this.asProps.lineValidation;
|
|
883
899
|
if (lineValidation && node instanceof HTMLElement) {
|
|
884
|
-
var _node$
|
|
885
|
-
var _lineValidation = lineValidation((_node$
|
|
900
|
+
var _node$textContent3;
|
|
901
|
+
var _lineValidation = lineValidation((_node$textContent3 = node.textContent) !== null && _node$textContent3 !== void 0 ? _node$textContent3 : "", this.getValues()), isValid = _lineValidation.isValid, errorMessage = _lineValidation.errorMessage;
|
|
886
902
|
if (!isValid) {
|
|
887
903
|
node.setAttribute("aria-invalid", "true");
|
|
888
904
|
node.dataset.errormessage = errorMessage;
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
SInputField > div {
|
|
2
|
+
box-sizing: content-box;
|
|
3
|
+
outline: none;
|
|
4
|
+
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
5
|
+
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
6
|
+
border-style: solid;
|
|
7
|
+
border-width: 1px;
|
|
8
|
+
overflow: auto;
|
|
9
|
+
position: relative;
|
|
10
|
+
|
|
11
|
+
background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
|
|
12
|
+
color: var(--intergalactic-text-primary, #191b23);
|
|
13
|
+
word-wrap: break-word;
|
|
14
|
+
word-break: break-word;
|
|
15
|
+
font-family: inherit;
|
|
16
|
+
|
|
17
|
+
&:empty::before {
|
|
18
|
+
content: '1. ' attr(placeholder);
|
|
19
|
+
color: var(--intergalactic-text-placeholder, #8a8e9b);
|
|
20
|
+
position: absolute;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:nth-child(even) {
|
|
24
|
+
color: red;
|
|
25
|
+
counter-increment: row;
|
|
26
|
+
margin-bottom: var(--intergalactic-spacing-1x, 4px);
|
|
27
|
+
position: relative;
|
|
28
|
+
word-break: break-all;
|
|
29
|
+
|
|
30
|
+
&::before {
|
|
31
|
+
content: counter(row) '.';
|
|
32
|
+
display: inline-block;
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
text-align: right;
|
|
35
|
+
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
36
|
+
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
> p {
|
|
41
|
+
counter-increment: row;
|
|
42
|
+
/*display: inline-block;*/
|
|
43
|
+
margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
|
|
44
|
+
position: relative;
|
|
45
|
+
word-break: break-all;
|
|
46
|
+
white-space: pre-wrap;
|
|
47
|
+
padding: 0 var(--intergalactic-spacing-5x, 20px) 0 var(--intergalactic-spacing-4x, 16px);
|
|
48
|
+
|
|
49
|
+
&:last-of-type {
|
|
50
|
+
margin-bottom: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&:not(:empty)::before {
|
|
54
|
+
content: counter(row) '.';
|
|
55
|
+
display: inline-block;
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
text-align: right;
|
|
58
|
+
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
59
|
+
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
60
|
+
|
|
61
|
+
position: absolute;
|
|
62
|
+
left: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&[data-over-max-rows='true'] {
|
|
66
|
+
background-color: var(--intergalactic-bg-secondary-critical, #fff0f7);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:has(p:nth-child(n + 10)) {
|
|
71
|
+
> p {
|
|
72
|
+
padding-left: var(--intergalactic-spacing-6x, 24px);
|
|
73
|
+
}
|
|
74
|
+
> p:nth-child(-n + 9)::before {
|
|
75
|
+
padding-left: var(--intergalactic-spacing-2x, 8px);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&:has(p:nth-child(n + 100)) {
|
|
80
|
+
> p {
|
|
81
|
+
padding-left: var(--intergalactic-spacing-8x, 32px);
|
|
82
|
+
}
|
|
83
|
+
> p:nth-child(-n + 9)::before {
|
|
84
|
+
padding-left: var(--intergalactic-spacing-4x, 16px);
|
|
85
|
+
}
|
|
86
|
+
> p:nth-child(n + 10)::before {
|
|
87
|
+
padding-left: var(--intergalactic-spacing-2x, 8px);
|
|
88
|
+
}
|
|
89
|
+
> p:nth-child(n + 100)::before {
|
|
90
|
+
padding-left: 0;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
SInputField[showErrors] > div[aria-invalid] > p[aria-invalid]:after {
|
|
96
|
+
content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo= ");
|
|
97
|
+
position: absolute;
|
|
98
|
+
right: 0;
|
|
99
|
+
top: var(--intergalactic-spacing-05x, 2px);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
SInputField[size='m'] > div {
|
|
103
|
+
padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);
|
|
104
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
105
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
106
|
+
|
|
107
|
+
min-height: calc(var(--minRows) * 20px);
|
|
108
|
+
/* (maxRowsLength - 1 * (rowsHeight + marginBottom)) + lastRowHeight */
|
|
109
|
+
max-height: calc((var(--maxRows) - 1) * (20px + var(--intergalactic-spacing-1x, 4px)) + 18px);
|
|
110
|
+
|
|
111
|
+
&:empty {
|
|
112
|
+
padding-left: var(--intergalactic-spacing-8x, 32px);
|
|
113
|
+
&::before {
|
|
114
|
+
left: var(--intergalactic-spacing-4x, 16px);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
SInputField[size='l'] > div {
|
|
120
|
+
padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);
|
|
121
|
+
font-size: var(--intergalactic-fs-300, 16px);
|
|
122
|
+
line-height: var(--intergalactic-lh-300, 150%);
|
|
123
|
+
|
|
124
|
+
min-height: calc(var(--minRows) * 24px);
|
|
125
|
+
max-height: calc((var(--maxRows) - 1) * (24px + var(--intergalactic-spacing-1x, 4px)) + 20px);
|
|
126
|
+
|
|
127
|
+
&:empty {
|
|
128
|
+
padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px));
|
|
129
|
+
&::before {
|
|
130
|
+
left: var(--intergalactic-spacing-4x, 16px);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
SInputField[state='normal']:not([disabled]) > div:focus {
|
|
137
|
+
&:focus {
|
|
138
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
139
|
+
border-color: var(--intergalactic-border-info-active, #006dca);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
SInputField[state='valid'] > div {
|
|
144
|
+
border-color: var(--intergalactic-border-success-active, #007c65);
|
|
145
|
+
|
|
146
|
+
&:focus {
|
|
147
|
+
box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5));
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
SInputField[state='invalid'] > div {
|
|
152
|
+
border-color: var(--intergalactic-border-critical-active, #d1002f);
|
|
153
|
+
|
|
154
|
+
&:focus {
|
|
155
|
+
box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5));
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
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%));
|
|
159
|
+
background-size: 6px 6px;
|
|
160
|
+
background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
|
|
161
|
+
border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
|
|
162
|
+
border-top-left-radius: var(--intergalactic-control-rounded, 6px);
|
|
163
|
+
background-repeat: repeat-y;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
SInputField[readonly] > div {
|
|
167
|
+
background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
|
|
168
|
+
}
|
|
169
|
+
SInputField[disabled] > div {
|
|
170
|
+
opacity: var(--intergalactic-disabled-opacity, 0.3);
|
|
171
|
+
}
|
|
@@ -4,30 +4,32 @@ import Button from '@semcore/button';
|
|
|
4
4
|
import { InputFieldProps } from './components/InputField/InputField';
|
|
5
5
|
import { CounterProps } from './components/Counter';
|
|
6
6
|
import { ErrorsNavigationProps } from './components/ErrorsNavigation';
|
|
7
|
-
export type BulkTextareaProps = {
|
|
8
|
-
value?: InputFieldProps['value'];
|
|
9
|
-
onChange?: InputFieldProps['onBlur'];
|
|
10
|
-
placeholder?: InputFieldProps['placeholder'];
|
|
11
|
-
size?: InputFieldProps['size'];
|
|
12
|
-
state?: InputFieldProps['state'];
|
|
13
|
-
disabled?: InputFieldProps['disabled'];
|
|
14
|
-
readonly?: InputFieldProps['readonly'];
|
|
15
|
-
minRows?: InputFieldProps['minRows'];
|
|
16
|
-
maxRows?: InputFieldProps['maxRows'];
|
|
17
|
-
validateOn?: InputFieldProps['validateOn'];
|
|
18
|
-
lineValidation?: InputFieldProps['lineValidation'];
|
|
19
|
-
linesDelimiters?: InputFieldProps['linesDelimiters'];
|
|
20
|
-
pasteProps?: InputFieldProps['pasteProps'];
|
|
21
|
-
maxLines?: InputFieldProps['maxLines'];
|
|
22
|
-
lineProcessing?: InputFieldProps['lineProcessing'];
|
|
23
|
-
errors?: InputFieldProps['errors'];
|
|
7
|
+
export type BulkTextareaProps<T extends string | string[]> = {
|
|
8
|
+
value?: InputFieldProps<T>['value'];
|
|
9
|
+
onChange?: InputFieldProps<T>['onBlur'];
|
|
10
|
+
placeholder?: InputFieldProps<T>['placeholder'];
|
|
11
|
+
size?: InputFieldProps<T>['size'];
|
|
12
|
+
state?: InputFieldProps<T>['state'];
|
|
13
|
+
disabled?: InputFieldProps<T>['disabled'];
|
|
14
|
+
readonly?: InputFieldProps<T>['readonly'];
|
|
15
|
+
minRows?: InputFieldProps<T>['minRows'];
|
|
16
|
+
maxRows?: InputFieldProps<T>['maxRows'];
|
|
17
|
+
validateOn?: InputFieldProps<T>['validateOn'];
|
|
18
|
+
lineValidation?: InputFieldProps<T>['lineValidation'];
|
|
19
|
+
linesDelimiters?: InputFieldProps<T>['linesDelimiters'];
|
|
20
|
+
pasteProps?: InputFieldProps<T>['pasteProps'];
|
|
21
|
+
maxLines?: InputFieldProps<T>['maxLines'];
|
|
22
|
+
lineProcessing?: InputFieldProps<T>['lineProcessing'];
|
|
23
|
+
errors?: InputFieldProps<T>['errors'];
|
|
24
24
|
showErrors?: boolean;
|
|
25
|
-
onErrorsChange?: InputFieldProps['onErrorsChange'];
|
|
26
|
-
onShowErrorsChange?: InputFieldProps['onShowErrorsChange'];
|
|
25
|
+
onErrorsChange?: InputFieldProps<T>['onErrorsChange'];
|
|
26
|
+
onShowErrorsChange?: InputFieldProps<T>['onShowErrorsChange'];
|
|
27
27
|
};
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
type BulkTextareaComponent = (<T extends string | string[]>(props: Intergalactic.InternalTypings.ComponentProps<'div', 'div', BoxProps & BulkTextareaProps<T>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', {}>;
|
|
29
|
+
export type BulkTextareaType<T extends string | string[]> = BulkTextareaComponent & {
|
|
30
|
+
InputField: Intergalactic.Component<'div', Pick<InputFieldProps<T>, 'commonErrorMessage' | 'id'> & Partial<BulkTextareaProps<T>> & BoxProps>;
|
|
30
31
|
Counter: Intergalactic.Component<'div', Partial<CounterProps>>;
|
|
31
32
|
ClearAll: typeof Button;
|
|
32
33
|
ErrorsNavigation: Intergalactic.Component<'div', Partial<ErrorsNavigationProps>>;
|
|
33
34
|
};
|
|
35
|
+
export {};
|
|
@@ -8,7 +8,7 @@ type State = {
|
|
|
8
8
|
} & {
|
|
9
9
|
visibleErrorPopper: boolean;
|
|
10
10
|
};
|
|
11
|
-
declare class InputField extends Component<InputFieldProps
|
|
11
|
+
declare class InputField<T extends string | string[]> extends Component<InputFieldProps<T>, {}, State, typeof InputField.enhance> {
|
|
12
12
|
static displayName: string;
|
|
13
13
|
static style: {
|
|
14
14
|
[key: string]: string;
|
|
@@ -46,14 +46,14 @@ declare class InputField extends Component<InputFieldProps, {}, State, typeof In
|
|
|
46
46
|
keyboardLineIndex: number;
|
|
47
47
|
mouseLineIndex: number;
|
|
48
48
|
};
|
|
49
|
-
constructor(props: InputFieldProps);
|
|
49
|
+
constructor(props: InputFieldProps<T>);
|
|
50
50
|
uncontrolledProps(): {
|
|
51
51
|
value: null;
|
|
52
52
|
linesCount: null;
|
|
53
53
|
errorIndex: null;
|
|
54
54
|
};
|
|
55
55
|
componentDidMount(): void;
|
|
56
|
-
componentDidUpdate(prevProps: InputFieldProps
|
|
56
|
+
componentDidUpdate(prevProps: InputFieldProps<T>, prevState: State): void;
|
|
57
57
|
componentWillUnmount(): void;
|
|
58
58
|
get isDisabled(): boolean;
|
|
59
59
|
get popperDescribedId(): string;
|
|
@@ -61,7 +61,7 @@ declare class InputField extends Component<InputFieldProps, {}, State, typeof In
|
|
|
61
61
|
errorMessage: string | null;
|
|
62
62
|
isCommonError: boolean;
|
|
63
63
|
};
|
|
64
|
-
createContentEditableElement(props: InputFieldProps): HTMLDivElement;
|
|
64
|
+
createContentEditableElement(props: InputFieldProps<T>): HTMLDivElement;
|
|
65
65
|
handleValueOutChange(): void;
|
|
66
66
|
handleScroll(): void;
|
|
67
67
|
handleMouseDown(event: MouseEvent): void;
|
|
@@ -6,7 +6,7 @@ type PasteProps = {
|
|
|
6
6
|
/**
|
|
7
7
|
* @default row.trim();
|
|
8
8
|
*/
|
|
9
|
-
lineProcessing?: (line: string) => string;
|
|
9
|
+
lineProcessing?: (line: string, lineIndex: number, totalLinesCount: number) => string;
|
|
10
10
|
/**
|
|
11
11
|
* @default true
|
|
12
12
|
*/
|
|
@@ -17,7 +17,7 @@ export type ErrorItem = {
|
|
|
17
17
|
lineNode?: Node;
|
|
18
18
|
errorMessage: string;
|
|
19
19
|
};
|
|
20
|
-
export type InputFieldProps = {
|
|
20
|
+
export type InputFieldProps<T extends string | string[]> = {
|
|
21
21
|
/**
|
|
22
22
|
* Unique id
|
|
23
23
|
*/
|
|
@@ -29,11 +29,11 @@ export type InputFieldProps = {
|
|
|
29
29
|
/**
|
|
30
30
|
* String to render in textarea. OnChanging value, it will go throw paste pipeline
|
|
31
31
|
*/
|
|
32
|
-
value:
|
|
32
|
+
value: T;
|
|
33
33
|
/**
|
|
34
34
|
* This component doesn't have default onChange callback, because we think that you need only the result after every changes/fixes
|
|
35
35
|
*/
|
|
36
|
-
onBlur: (value:
|
|
36
|
+
onBlur: (value: T, e: Event) => void;
|
|
37
37
|
/**
|
|
38
38
|
* Size of component
|
|
39
39
|
* @default m
|
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.0.0
|
|
4
|
+
"version": "16.0.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,18 +14,18 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "16.0.0
|
|
18
|
-
"@semcore/button": "16.0.0
|
|
19
|
-
"@semcore/typography": "16.0.0
|
|
20
|
-
"@semcore/counter": "16.0.0
|
|
21
|
-
"@semcore/icon": "16.0.0
|
|
22
|
-
"@semcore/popper": "16.0.0
|
|
23
|
-
"@semcore/tooltip": "16.0.0
|
|
17
|
+
"@semcore/flex-box": "16.0.0",
|
|
18
|
+
"@semcore/button": "16.0.0",
|
|
19
|
+
"@semcore/typography": "16.0.0",
|
|
20
|
+
"@semcore/counter": "16.0.0",
|
|
21
|
+
"@semcore/icon": "16.0.0",
|
|
22
|
+
"@semcore/popper": "16.0.0",
|
|
23
|
+
"@semcore/tooltip": "16.0.0",
|
|
24
24
|
"csstype": "3.0.8",
|
|
25
25
|
"dompurify": "3.2.3"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@semcore/base-components": "^16.0.0
|
|
28
|
+
"@semcore/base-components": "^16.0.0"
|
|
29
29
|
},
|
|
30
30
|
"repository": {
|
|
31
31
|
"type": "git",
|