@true-engineering/true-react-common-ui-kit 4.0.0-alpha21 → 4.0.0-alpha23

package/dist/true-react-common-ui-kit.umd.cjs

@@ -29655,7 +29655,7 @@
       ]
     });
   };
-  var DEFAULT_VALUE$1 = {
+  var DEFAULT_VALUE = {
     phoneNumber: "",
     dialCode: ""
   };
@@ -29873,7 +29873,7 @@
       return _array_like_to_array$2(o, minLen);
   }
   var PhoneInput = function(_param) {
-    var _param_locale = _param.locale, locale = _param_locale === void 0 ? "ru" : _param_locale, _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE$1 : _param_value, onChange = _param.onChange, data = _param.data, testId = _param.testId, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isActive = _param.isActive, tweakStyles = _param.tweakStyles, _param_codeSearchPlaceholder = _param.codeSearchPlaceholder, codeSearchPlaceholder = _param_codeSearchPlaceholder === void 0 ? "Поиск" : _param_codeSearchPlaceholder, _param_noMatchesLabel = _param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Ничего не найдено" : _param_noMatchesLabel, inputProps = _object_without_properties$5(_param, [
+    var _param_locale = _param.locale, locale = _param_locale === void 0 ? "ru" : _param_locale, _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, onChange = _param.onChange, data = _param.data, testId = _param.testId, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isActive = _param.isActive, tweakStyles = _param.tweakStyles, _param_codeSearchPlaceholder = _param.codeSearchPlaceholder, codeSearchPlaceholder = _param_codeSearchPlaceholder === void 0 ? "Поиск" : _param_codeSearchPlaceholder, _param_noMatchesLabel = _param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Ничего не найдено" : _param_noMatchesLabel, inputProps = _object_without_properties$5(_param, [
       "locale",
       "value",
       "onChange",
@@ -31316,6 +31316,9 @@
     return target;
   }
   var useStyles$4 = createThemedStyles("TextArea", {
+    root: {
+      width: "100%"
+    },
     textarea: _object_spread_props$6(_object_spread$6({}, helpers.withScrollBar), {
       width: "100%",
       height: "100%",
@@ -31375,6 +31378,8 @@
     symbolsCountError: {
       color: "red"
     },
+    symbolsCountActive: {},
+    "counter-default": {},
     withLabel: {}
   });
   function _array_like_to_array(arr, len) {
@@ -31519,12 +31524,12 @@
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
       return _array_like_to_array(o, minLen);
   }
-  var DEFAULT_VALUE = "";
   var TextArea = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, placeholder = _param.placeholder, name = _param.name, shouldFocusOnMount = _param.shouldFocusOnMount, _param_hasCounter = _param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, shouldTrimAfterMaxLength = _param.shouldTrimAfterMaxLength, _param_isAutoSized = _param.isAutoSized, isAutoSized = _param_isAutoSized === void 0 ? true : _param_isAutoSized, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, isActive = _param.isActive, maxLength = _param.maxLength, rows = _param.rows, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, label = _param.label, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isRequired = _param.isRequired, size = _param.size, groupPlacement = _param.groupPlacement, textAreaProps = _object_without_properties$3(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, placeholder = _param.placeholder, name = _param.name, _param_counterPosition = _param.counterPosition, counterPosition = _param_counterPosition === void 0 ? "default" : _param_counterPosition, shouldFocusOnMount = _param.shouldFocusOnMount, _param_hasCounter = _param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, shouldTrimAfterMaxLength = _param.shouldTrimAfterMaxLength, _param_isAutoSized = _param.isAutoSized, isAutoSized = _param_isAutoSized === void 0 ? true : _param_isAutoSized, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, isActive = _param.isActive, maxLength = _param.maxLength, rows = _param.rows, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, label = _param.label, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isRequired = _param.isRequired, size = _param.size, groupPlacement = _param.groupPlacement, textAreaProps = _object_without_properties$3(_param, [
       "value",
       "placeholder",
       "name",
+      "counterPosition",
       "shouldFocusOnMount",
       "hasCounter",
       "shouldTrimAfterMaxLength",
@@ -31552,6 +31557,8 @@
     var classes = useStyles$4({
       theme: tweakStyles
     });
+    var shouldShowCounter = hasCounter && trueReactPlatformHelpers.isNotEmpty(maxLength);
+    var counterString = "".concat(value.length, " / ").concat(maxLength);
     var tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
       className: "tweakWithMessages",
@@ -31578,14 +31585,18 @@
       setFocused(false);
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    var _obj2;
-    return /* @__PURE__ */ jsxs(WithMessages, {
-      errorMessage,
-      infoMessage,
-      tweakStyles: tweakWithMessagesStyles,
-      testId: trueReactPlatformHelpers.getTestId(testId, "wrapper"),
-      children: [
-        /* @__PURE__ */ jsx(ControlWrapper, {
+    var _obj2, _obj1;
+    return /* @__PURE__ */ jsx("div", {
+      className: clsx(classes.root, trueReactPlatformHelpers.isNotEmpty(size) && classes[size]),
+      style: {
+        "--counter-length": counterString.length
+      },
+      children: /* @__PURE__ */ jsx(WithMessages, {
+        errorMessage,
+        infoMessage,
+        tweakStyles: tweakWithMessagesStyles,
+        testId: trueReactPlatformHelpers.getTestId(testId, "wrapper"),
+        children: /* @__PURE__ */ jsx(ControlWrapper, {
           label,
           tweakStyles: tweakControlWrapperStyles,
           isFocused: hasFocus,
@@ -31596,37 +31607,38 @@
           groupPlacement,
           size,
           isFullWidth: true,
-          children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({
+          children: /* @__PURE__ */ jsxs("div", _object_spread_props$5(_object_spread$5({
             className: clsx(classes.wrapper, (_obj2 = {}, _define_property$5(_obj2, classes.autoSized, isAutoSized), _define_property$5(_obj2, classes.withLabel, hasLabel), _obj2))
           }, isAutoSized && {
             "data-value": value
           }), {
-            children: /* @__PURE__ */ jsx("textarea", _object_spread$5({
-              ref,
-              className: classes.textarea,
-              value,
-              disabled: isDisabled,
-              placeholder: hasPlaceholder ? placeholder : void 0,
-              maxLength: shouldTrimAfterMaxLength ? maxLength : void 0,
-              name,
-              rows,
-              onPaste,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onChange: handleChange,
-              autoFocus: shouldFocusOnMount
-            }, trueReactPlatformHelpers.addDataAttributes(data, testId), textAreaProps))
+            children: [
+              /* @__PURE__ */ jsx("textarea", _object_spread$5({
+                ref,
+                className: classes.textarea,
+                value,
+                disabled: isDisabled,
+                placeholder: hasPlaceholder ? placeholder : void 0,
+                maxLength: shouldTrimAfterMaxLength ? maxLength : void 0,
+                name,
+                rows,
+                onPaste,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onChange: handleChange,
+                autoFocus: shouldFocusOnMount
+              }, trueReactPlatformHelpers.addDataAttributes(data, testId), textAreaProps)),
+              shouldShowCounter && /* @__PURE__ */ jsx("span", _object_spread_props$5(_object_spread$5({
+                className: clsx(classes.symbolsCount, classes["counter-".concat(counterPosition)], (_obj1 = {}, _define_property$5(_obj1, classes.symbolsCountError, value.length > maxLength), _define_property$5(_obj1, classes.symbolsCountActive, hasFocus || hasValue), _obj1))
+              }, trueReactPlatformHelpers.addDataAttributes({
+                counterPosition
+              })), {
+                children: counterString
+              }))
+            ]
           }))
-        }),
-        hasCounter && trueReactPlatformHelpers.isNotEmpty(maxLength) && /* @__PURE__ */ jsxs("span", {
-          className: clsx(classes.symbolsCount, _define_property$5({}, classes.symbolsCountError, value.length > maxLength)),
-          children: [
-            value.length,
-            " / ",
-            maxLength
-          ]
         })
-      ]
+      })
     });
   });
   var useStyles$3 = createThemedStyles("TextButton", {