@semcore/bulk-textarea 16.6.2 → 17.0.0-prerelease.17

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.0] - 2026-02-18
+
+### BREAK
+
+- New major version.
+
 ## [16.6.2] - 2025-11-17
 
 ### Changed

package/README.md

@@ -2,7 +2,7 @@
 
 [![version](https://img.shields.io/npm/v/@semcore/bulk-textarea.svg)](https://www.npmjs.com/@semcore/bulk-textarea)
 [![downloads](https://img.shields.io/npm/dt/@semcore/bulk-textarea.svg)](https://www.npmjs.com/package/@semcore/bulk-textarea)
-[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/master/LICENSE)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
 
 > This component is part of the Intergalactic Design System
 
@@ -20,13 +20,13 @@ npm install @semcore/bulk-textarea
 
 ## 👤 Author
 
-[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
 
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome!
 
-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/master/CONTRIBUTING.md).
+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).
 
 ## Show your support
 
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
 
 ## 📝 License
 
-This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
+This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.

package/lib/cjs/BulkTextarea.js

@@ -1,299 +1,280 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
 var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
-var _flexBox = require("@semcore/flex-box");
 var _react = _interopRequireDefault(require("react"));
 var _ClearAll = require("./components/ClearAll");
 var _Counter = require("./components/Counter");
 var _ErrorsNavigation = require("./components/ErrorsNavigation");
 var _InputField = require("./components/InputField/InputField");
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
-var BulkTextareaRoot = /*#__PURE__*/function (_Component) {
-  function BulkTextareaRoot() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, BulkTextareaRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, BulkTextareaRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "inputFieldRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "clearAllButtonRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "nextButtonRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "prevButtonRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "counterRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "state", {
+class BulkTextareaRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "inputFieldRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "clearAllButtonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "nextButtonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "prevButtonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "counterRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "state", {
       linesCount: 0,
       isEmptyText: true,
       errorIndex: -1,
       highlightErrorIndex: false
     });
-    (0, _defineProperty2["default"])(_this, "handleChangeLinesCount", function (linesCount) {
-      var isEmpty = !linesCount;
-      _this.setState({
-        linesCount: linesCount,
+    (0, _defineProperty2.default)(this, "handleChangeLinesCount", linesCount => {
+      const isEmpty = !linesCount;
+      this.setState({
+        linesCount,
         isEmptyText: isEmpty
       });
       if (isEmpty) {
-        _this.handlers.showErrors(false);
-        _this.handlers.errors([]);
-        _this.handlers.state('normal');
+        this.handlers.showErrors(false);
+        this.handlers.errors([]);
+        this.handlers.state('normal');
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleClickClearAll", function (e) {
-      var _this$inputFieldRef$c;
-      _this.handlers.showErrors(false);
-      _this.handlers.errors([]);
-      _this.setState({
+    (0, _defineProperty2.default)(this, "handleClickClearAll", e => {
+      this.handlers.showErrors(false);
+      this.handlers.errors([]);
+      this.setState({
         errorIndex: -1
       });
-      _this.handlers.value('', e);
-      _this.handlers.state('normal');
-      var textarea = (_this$inputFieldRef$c = _this.inputFieldRef.current) === null || _this$inputFieldRef$c === void 0 ? void 0 : _this$inputFieldRef$c.querySelector('[role="textbox"]');
+      // @ts-ignore
+      this.handlers.value('', e);
+      this.handlers.state('normal');
+      const textarea = this.inputFieldRef.current?.querySelector('[role="textbox"]');
       if (textarea instanceof HTMLDivElement) {
         textarea.focus();
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleChangeErrorIndex", function (amount) {
-      return function () {
-        var _this$asProps$errors = _this.asProps.errors,
-          errors = _this$asProps$errors === void 0 ? [] : _this$asProps$errors;
-        var errorIndex = _this.state.errorIndex;
-        var itemsIndex = errors.length - 1;
-        var newIndex = errorIndex + amount;
-        if (newIndex < 0) {
-          newIndex = amount + itemsIndex + 1;
-        } else if (newIndex > itemsIndex) {
-          newIndex = newIndex - itemsIndex - 1;
-        }
-        if (!errors[newIndex]) {
-          _this.handleChangeErrorIndex(amount < 0 ? amount - 1 : amount + 1)();
-        } else {
-          _this.handlers.showErrors(false);
-          _this.setState({
-            errorIndex: -1
-          });
-          setTimeout(function () {
-            _this.handlers.showErrors(true);
-            _this.setState({
-              errorIndex: newIndex,
-              highlightErrorIndex: true
-            });
+    (0, _defineProperty2.default)(this, "handleChangeErrorIndex", amount => () => {
+      const {
+        errors = []
+      } = this.asProps;
+      const {
+        errorIndex
+      } = this.state;
+      const itemsIndex = errors.length - 1;
+      let newIndex = errorIndex + amount;
+      if (newIndex < 0) {
+        newIndex = amount + itemsIndex + 1;
+      } else if (newIndex > itemsIndex) {
+        newIndex = newIndex - itemsIndex - 1;
+      }
+      if (!errors[newIndex]) {
+        this.handleChangeErrorIndex(amount < 0 ? amount - 1 : amount + 1)();
+      } else {
+        this.handlers.showErrors(false);
+        this.setState({
+          errorIndex: -1
+        });
+        setTimeout(() => {
+          this.handlers.showErrors(true);
+          this.setState({
+            errorIndex: newIndex,
+            highlightErrorIndex: true
           });
-        }
-      };
+        });
+      }
     });
-    return _this;
   }
-  (0, _inherits2["default"])(BulkTextareaRoot, _Component);
-  return (0, _createClass2["default"])(BulkTextareaRoot, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        value: null,
-        state: null,
-        showErrors: null,
-        errors: null
-      };
-    }
-  }, {
-    key: "counterId",
-    get: function get() {
-      return "".concat(this.asProps.uid, "_counter");
-    }
-  }, {
-    key: "getInputFieldProps",
-    value: function getInputFieldProps() {
-      var _this2 = this;
-      var _this$asProps = this.asProps,
-        value = _this$asProps.value,
-        size = _this$asProps.size,
-        minRows = _this$asProps.minRows,
-        maxRows = _this$asProps.maxRows,
-        lineValidation = _this$asProps.lineValidation,
-        placeholder = _this$asProps.placeholder,
-        validateOn = _this$asProps.validateOn,
-        linesDelimiters = _this$asProps.linesDelimiters,
-        maxLines = _this$asProps.maxLines,
-        disabled = _this$asProps.disabled,
-        readonly = _this$asProps.readonly,
-        pasteProps = _this$asProps.pasteProps,
-        lineProcessing = _this$asProps.lineProcessing,
-        _this$asProps$errors2 = _this$asProps.errors,
-        errors = _this$asProps$errors2 === void 0 ? [] : _this$asProps$errors2,
-        showErrors = _this$asProps.showErrors,
-        onImmediatelyChange = _this$asProps.onImmediatelyChange;
-      var _this$state = this.state,
-        errorIndex = _this$state.errorIndex,
-        prevError = _this$state.prevError,
-        linesCount = _this$state.linesCount,
-        highlightErrorIndex = _this$state.highlightErrorIndex;
-      return (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
-        value: value,
-        size: size,
-        state: showErrors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? 'invalid' : 'normal',
-        disabled: disabled,
-        readonly: readonly,
-        minRows: minRows,
-        maxRows: maxRows,
-        maxLines: maxLines,
-        placeholder: placeholder,
-        prevError: prevError,
-        pasteProps: pasteProps,
-        linesCount: linesCount,
-        lineProcessing: lineProcessing,
-        onChangeLinesCount: this.handleChangeLinesCount,
-        onChangeLineIndex: function onChangeLineIndex() {
-          if (validateOn !== null && validateOn !== void 0 && validateOn.includes('blurLine')) {
-            _this2.handlers.showErrors(true);
-          }
-        },
-        onBlur: function onBlur(value, event) {
-          var _this2$props$onChange, _this2$props;
-          if (validateOn !== null && validateOn !== void 0 && validateOn.includes('blur') && (_core.lastInteraction.isKeyboard() || event instanceof FocusEvent && event.relatedTarget !== _this2.clearAllButtonRef.current)) {
-            _this2.handlers.showErrors(true);
+  uncontrolledProps() {
+    return {
+      value: null,
+      state: null,
+      showErrors: null,
+      errors: null
+    };
+  }
+  get counterId() {
+    return `${this.asProps.uid}_counter`;
+  }
+  getInputFieldProps() {
+    const {
+      value,
+      size,
+      minRows,
+      maxRows,
+      lineValidation,
+      placeholder,
+      validateOn,
+      linesDelimiters,
+      maxLines,
+      disabled,
+      readonly,
+      pasteProps,
+      lineProcessing,
+      errors = [],
+      showErrors,
+      onImmediatelyChange
+    } = this.asProps;
+    const {
+      errorIndex,
+      prevError,
+      linesCount,
+      highlightErrorIndex
+    } = this.state;
+    return {
+      value,
+      size,
+      state: showErrors && errors?.length > 0 ? 'invalid' : 'normal',
+      disabled,
+      readonly,
+      minRows,
+      maxRows,
+      maxLines,
+      placeholder,
+      prevError,
+      pasteProps,
+      linesCount,
+      lineProcessing,
+      onChangeLinesCount: this.handleChangeLinesCount,
+      onChangeLineIndex: () => {
+        if (validateOn?.includes('blurLine')) {
+          this.handlers.showErrors(true);
+        }
+      },
+      onBlur: (value, event) => {
+        if (validateOn?.includes('blur') && (_core.lastInteraction.isKeyboard() || event instanceof FocusEvent && event.relatedTarget !== this.clearAllButtonRef.current)) {
+          this.handlers.showErrors(true);
+        }
+        if (this.asProps.showErrors === false && (validateOn?.includes('blur') || validateOn?.includes('blurLine'))) {
+          setTimeout(() => {
+            this.nextButtonRef.current?.focus();
+          }, 250);
+        }
+        this.props.onChange?.(value, event);
+      },
+      showErrors,
+      validateOn,
+      lineValidation: lineValidation,
+      errors,
+      onErrorsChange: newErrors => {
+        const prevError = newErrors.length === 0 ? errors[0] : undefined;
+        this.handlers.errors(newErrors);
+        this.setState({
+          prevError
+        });
+        setTimeout(() => {
+          const {
+            showErrors,
+            errors
+          } = this.asProps;
+          if (showErrors) {
+            const newState = newErrors.length === 0 ? 'normal' : 'invalid';
+            this.handlers.state(newState);
           }
-          if (_this2.asProps.showErrors === false && (validateOn !== null && validateOn !== void 0 && validateOn.includes('blur') || validateOn !== null && validateOn !== void 0 && validateOn.includes('blurLine'))) {
-            setTimeout(function () {
-              var _this2$nextButtonRef$;
-              (_this2$nextButtonRef$ = _this2.nextButtonRef.current) === null || _this2$nextButtonRef$ === void 0 || _this2$nextButtonRef$.focus();
-            }, 250);
+          if (errors?.length === 0) {
+            this.handlers.showErrors(false);
+            setTimeout(() => {
+              this.setState({
+                prevError: undefined
+              });
+            }, 150);
           }
-          (_this2$props$onChange = (_this2$props = _this2.props).onChange) === null || _this2$props$onChange === void 0 || _this2$props$onChange.call(_this2$props, value, event);
-        },
-        showErrors: showErrors,
-        validateOn: validateOn,
-        lineValidation: lineValidation,
-        errors: errors,
-        onErrorsChange: function onErrorsChange(newErrors) {
-          var prevError = newErrors.length === 0 ? errors[0] : undefined;
-          _this2.handlers.errors(newErrors);
-          _this2.setState({
-            prevError: prevError
-          });
-          setTimeout(function () {
-            var _this2$asProps = _this2.asProps,
-              showErrors = _this2$asProps.showErrors,
-              errors = _this2$asProps.errors;
-            if (showErrors) {
-              var newState = newErrors.length === 0 ? 'normal' : 'invalid';
-              _this2.handlers.state(newState);
-            }
-            if ((errors === null || errors === void 0 ? void 0 : errors.length) === 0) {
-              _this2.handlers.showErrors(false);
-              setTimeout(function () {
-                _this2.setState({
-                  prevError: undefined
-                });
-              }, 150);
-            }
-          }, 10); // this timeout to be sure that code will be after state change
-        },
-        highlightErrorIndex: highlightErrorIndex,
-        errorIndex: errorIndex,
-        onErrorIndexChange: function onErrorIndexChange(newErrorIndex) {
-          var prevError = errors[errorIndex];
-          _this2.setState({
-            errorIndex: newErrorIndex,
-            prevError: prevError,
-            highlightErrorIndex: false
-          });
-        },
-        linesDelimiters: linesDelimiters,
-        ref: this.inputFieldRef
-      }, 'aria-describedby', this.counterId), "onImmediatelyChange", onImmediatelyChange);
-    }
-  }, {
-    key: "getCounterProps",
-    value: function getCounterProps() {
-      var _this$asProps2 = this.asProps,
-        maxLines = _this$asProps2.maxLines,
-        getI18nText = _this$asProps2.getI18nText,
-        size = _this$asProps2.size;
-      var _this$state2 = this.state,
-        linesCount = _this$state2.linesCount,
-        isEmptyText = _this$state2.isEmptyText;
-      var counterTheme = '';
-      if (linesCount === maxLines) {
-        counterTheme = 'warning';
-      } else if (linesCount > maxLines) {
-        counterTheme = 'danger';
-      }
-      return {
-        id: this.counterId,
-        ref: this.counterRef,
-        getI18nText: getI18nText,
-        theme: counterTheme,
-        linesCount: isEmptyText ? 0 : linesCount,
-        maxLines: maxLines,
-        size: size
-      };
-    }
-  }, {
-    key: "getClearAllProps",
-    value: function getClearAllProps() {
-      var _this$asProps3 = this.asProps,
-        size = _this$asProps3.size,
-        getI18nText = _this$asProps3.getI18nText,
-        disabled = _this$asProps3.disabled,
-        readonly = _this$asProps3.readonly;
-      return {
-        onClick: this.handleClickClearAll,
-        isHidden: this.state.isEmptyText,
-        size: size,
-        getI18nText: getI18nText,
-        ref: this.clearAllButtonRef,
-        disabled: disabled || readonly
-      };
-    }
-  }, {
-    key: "getErrorsNavigationProps",
-    value: function getErrorsNavigationProps() {
-      var _this$asProps4 = this.asProps,
-        size = _this$asProps4.size,
-        getI18nText = _this$asProps4.getI18nText,
-        disabled = _this$asProps4.disabled,
-        readonly = _this$asProps4.readonly,
-        _this$asProps4$errors = _this$asProps4.errors,
-        errors = _this$asProps4$errors === void 0 ? [] : _this$asProps4$errors,
-        showErrors = _this$asProps4.showErrors;
-      var errorIndex = this.state.errorIndex;
-      return {
-        size: size,
-        getI18nText: getI18nText,
-        errorIndex: errorIndex,
-        onPrevError: this.handleChangeErrorIndex(-1),
-        onNextError: this.handleChangeErrorIndex(1),
-        errorsCount: errors.map(Boolean).length,
-        showErrors: showErrors,
-        disabled: disabled || readonly || false,
-        nextButtonRef: this.nextButtonRef,
-        prevButtonRef: this.prevButtonRef
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps;
-      return /*#__PURE__*/_react["default"].createElement(_flexBox.Box, (0, _core.assignProps)({
-        "__excludeProps": ['onBlur', 'value', 'placeholder']
-      }, _ref));
+        }, 10); // this timeout to be sure that code will be after state change
+      },
+      highlightErrorIndex,
+      errorIndex,
+      onErrorIndexChange: newErrorIndex => {
+        const prevError = errors[errorIndex];
+        this.setState({
+          errorIndex: newErrorIndex,
+          prevError,
+          highlightErrorIndex: false
+        });
+      },
+      linesDelimiters,
+      ref: this.inputFieldRef,
+      ['aria-describedby']: this.counterId,
+      onImmediatelyChange
+    };
+  }
+  getCounterProps() {
+    const {
+      maxLines,
+      getI18nText,
+      size
+    } = this.asProps;
+    const {
+      linesCount,
+      isEmptyText
+    } = this.state;
+    let counterTheme = '';
+    if (linesCount === maxLines) {
+      counterTheme = 'warning';
+    } else if (linesCount > maxLines) {
+      counterTheme = 'danger';
     }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(BulkTextareaRoot, "displayName", 'BulkTextarea');
-(0, _defineProperty2["default"])(BulkTextareaRoot, "defaultProps", {
+    return {
+      id: this.counterId,
+      ref: this.counterRef,
+      getI18nText,
+      theme: counterTheme,
+      linesCount: isEmptyText ? 0 : linesCount,
+      maxLines,
+      size
+    };
+  }
+  getClearAllProps() {
+    const {
+      size,
+      getI18nText,
+      disabled,
+      readonly
+    } = this.asProps;
+    return {
+      onClick: this.handleClickClearAll,
+      isHidden: this.state.isEmptyText,
+      size,
+      getI18nText,
+      ref: this.clearAllButtonRef,
+      disabled: disabled || readonly
+    };
+  }
+  getErrorsNavigationProps() {
+    const {
+      size,
+      getI18nText,
+      disabled,
+      readonly,
+      errors = [],
+      showErrors
+    } = this.asProps;
+    const {
+      errorIndex
+    } = this.state;
+    return {
+      size,
+      getI18nText,
+      errorIndex: errorIndex,
+      onPrevError: this.handleChangeErrorIndex(-1),
+      onNextError: this.handleChangeErrorIndex(1),
+      errorsCount: errors.map(Boolean).length,
+      showErrors,
+      disabled: disabled || readonly || false,
+      nextButtonRef: this.nextButtonRef,
+      prevButtonRef: this.prevButtonRef
+    };
+  }
+  render() {
+    var _ref = this.asProps;
+    return /*#__PURE__*/_react.default.createElement(_baseComponents.Box, (0, _core.assignProps)({
+      "__excludeProps": ['onBlur', 'value', 'placeholder']
+    }, _ref));
+  }
+}
+(0, _defineProperty2.default)(BulkTextareaRoot, "displayName", 'BulkTextarea');
+(0, _defineProperty2.default)(BulkTextareaRoot, "defaultProps", {
   defaultValue: '',
   size: 'm',
   defaultState: 'normal',
@@ -305,14 +286,12 @@ var BulkTextareaRoot = /*#__PURE__*/function (_Component) {
   defaultErrors: [],
   defaultShowErrors: false
 });
-(0, _defineProperty2["default"])(BulkTextareaRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])()]);
-var BulkTextarea = function () {
-  return (0, _core.createComponent)(BulkTextareaRoot, {
-    InputField: _InputField.InputField,
-    Counter: _Counter.Counter,
-    ClearAll: _ClearAll.ClearAll,
-    ErrorsNavigation: _ErrorsNavigation.ErrorsNavigation
-  });
-}();
-var _default = exports["default"] = BulkTextarea;
+(0, _defineProperty2.default)(BulkTextareaRoot, "enhance", [(0, _i18nEnhance.default)(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID.default)()]);
+const BulkTextarea = (() => (0, _core.createComponent)(BulkTextareaRoot, {
+  InputField: _InputField.InputField,
+  Counter: _Counter.Counter,
+  ClearAll: _ClearAll.ClearAll,
+  ErrorsNavigation: _ErrorsNavigation.ErrorsNavigation
+}))();
+var _default = exports.default = BulkTextarea;
 //# sourceMappingURL=BulkTextarea.js.map