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

package/dist/components/TextArea/TextArea.d.ts

@@ -2,10 +2,12 @@ import { FormEvent, TextareaHTMLAttributes } from 'react';
 import { ICommonProps } from '../../types';
 import { IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps } from '../WithMessages';
+import { ITextAreaCounterPosition } from './types';
 import { ITextAreaStyles } from './TextArea.styles';
 export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'>, Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
     value?: string;
     placeholder?: string;
+    counterPosition?: ITextAreaCounterPosition;
     /** @default false */
     isActive?: boolean;
     /**

package/dist/components/TextArea/TextArea.styles.d.ts

@@ -1,8 +1,10 @@
 import { ITweakStyles } from '../../theme';
-import { IControlWrapperStyles } from '../ControlWrapper';
+import { IWithPrefix } from '../../types';
+import { IControlWrapperSizes, IControlWrapperStyles } from '../ControlWrapper';
 import { IWithMessagesStyles } from '../WithMessages';
-export declare const useStyles: import("../../theme").IUseStyles<"textarea" | "autoSized" | "withLabel" | "wrapper" | "symbolsCount" | "symbolsCountError", unknown>;
+import { ITextAreaCounterPositions } from './types';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "textarea" | "autoSized" | "withLabel" | "wrapper" | "symbolsCount" | "symbolsCountError" | "symbolsCountActive" | "counter-default", unknown>;
 export type ITextAreaStyles = ITweakStyles<typeof useStyles, {
     tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
-}>;
+} & IWithPrefix<ITextAreaCounterPositions, 'counter-'> & IControlWrapperSizes>;

package/dist/components/TextArea/index.d.ts

@@ -1,2 +1,3 @@
 export * from './TextArea';
 export type { ITextAreaStyles } from './TextArea.styles';
+export * from './types';

package/dist/components/TextArea/types.d.ts

@@ -0,0 +1,4 @@
+import { IExtendableProps } from '../../types';
+export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {
+}
+export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

package/dist/true-react-common-ui-kit.js

@@ -29668,7 +29668,7 @@ var PhoneInputCountryList = function(param) {
     ]
   });
 };
-var DEFAULT_VALUE$1 = {
+var DEFAULT_VALUE = {
   phoneNumber: "",
   dialCode: ""
 };
@@ -29886,7 +29886,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
     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",
@@ -31329,6 +31329,9 @@ function _object_spread_props$6(target, source) {
   return target;
 }
 var useStyles$4 = createThemedStyles("TextArea", {
+  root: {
+    width: "100%"
+  },
   textarea: _object_spread_props$6(_object_spread$6({}, helpers.withScrollBar), {
     width: "100%",
     height: "100%",
@@ -31388,6 +31391,8 @@ var useStyles$4 = createThemedStyles("TextArea", {
   symbolsCountError: {
     color: "red"
   },
+  symbolsCountActive: {},
+  "counter-default": {},
   withLabel: {}
 });
 function _array_like_to_array(arr, len) {
@@ -31532,12 +31537,12 @@ function _unsupported_iterable_to_array(o, minLen) {
   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__ */ 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, size2 = _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, size2 = _param.size, groupPlacement = _param.groupPlacement, textAreaProps = _object_without_properties$3(_param, [
     "value",
     "placeholder",
     "name",
+    "counterPosition",
     "shouldFocusOnMount",
     "hasCounter",
     "shouldTrimAfterMaxLength",
@@ -31565,6 +31570,8 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var classes = useStyles$4({
     theme: tweakStyles
   });
+  var shouldShowCounter = hasCounter && isNotEmpty(maxLength);
+  var counterString = "".concat(value.length, " / ").concat(maxLength);
   var tweakWithMessagesStyles = useTweakStyles({
     tweakStyles,
     className: "tweakWithMessages",
@@ -31591,14 +31598,18 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
     setFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   };
-  var _obj2;
-  return /* @__PURE__ */ jsxs(WithMessages, {
-    errorMessage,
-    infoMessage,
-    tweakStyles: tweakWithMessagesStyles,
-    testId: getTestId(testId, "wrapper"),
-    children: [
-      /* @__PURE__ */ jsx(ControlWrapper, {
+  var _obj2, _obj1;
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(classes.root, isNotEmpty(size2) && classes[size2]),
+    style: {
+      "--counter-length": counterString.length
+    },
+    children: /* @__PURE__ */ jsx(WithMessages, {
+      errorMessage,
+      infoMessage,
+      tweakStyles: tweakWithMessagesStyles,
+      testId: getTestId(testId, "wrapper"),
+      children: /* @__PURE__ */ jsx(ControlWrapper, {
         label,
         tweakStyles: tweakControlWrapperStyles,
         isFocused: hasFocus,
@@ -31609,37 +31620,38 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
         groupPlacement,
         size: size2,
         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
-          }, addDataAttributes$1(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
+            }, addDataAttributes$1(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))
+            }, addDataAttributes$1({
+              counterPosition
+            })), {
+              children: counterString
+            }))
+          ]
         }))
-      }),
-      hasCounter && 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", {