@rolster/react-components 19.8.21 → 19.9.0

package/dist/esm/components/atoms/AreaText/AreaText.d.ts

@@ -7,6 +7,9 @@ export interface AreaTextProps extends RlsComponent {
     disabled?: boolean;
     formControl?: RolsterReactAreaTextControl<string>;
     identifier?: string;
+    maxLength?: number;
+    maxRows?: number;
+    minRows?: number;
     onBlur?: () => void;
     onEnter?: () => void;
     onFocus?: () => void;
@@ -16,9 +19,8 @@ export interface AreaTextProps extends RlsComponent {
     placeholder?: string;
     readOnly?: boolean;
     resize?: CSSProperties['resize'];
-    rows?: number;
     value?: string;
 }
-declare function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows, value }: AreaTextProps): import("react/jsx-runtime").JSX.Element;
+declare function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, value }: AreaTextProps): import("react/jsx-runtime").JSX.Element;
 export declare const RlsAreaText: import("react").MemoExoticComponent<typeof RlsAreaTextComponent>;
 export {};

package/dist/esm/components/atoms/AreaText/AreaText.js

@@ -1,41 +1,110 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { renderClassStatus } from '../../../helpers/css';
-function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows = 1, value }) {
+const AREA_TEXT_MAX_ROWS = 8;
+const AREA_TEXT_MIN_ROWS = 3;
+function writeAreaValue(element, valueArea) {
+    const rawArea = element.value;
+    if (rawArea === valueArea) {
+        return;
+    }
+    const selection = element.selectionStart;
+    const offset = valueArea.length - rawArea.length;
+    const caret = Math.max(0, Math.min(selection + offset, valueArea.length));
+    element.value = valueArea;
+    element.setSelectionRange(caret, caret);
+}
+function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
     const valueInitial = String(formControl?.value ?? value ?? '');
+    const rowsMin = minRows ?? AREA_TEXT_MIN_ROWS;
+    const rowsMax = Math.max(maxRows ?? AREA_TEXT_MAX_ROWS, rowsMin);
     const [valueArea, setValueArea] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
     const elementRef = useRef(null);
     const areaRef = formControl?.elementRef ?? elementRef;
-    const changeIsInternal = useRef(false);
+    const composing = useRef(false);
+    const valueSent = useRef(formControl?.value);
+    const valueSource = useRef(formControl ? formControl.value : value);
+    const heightIsManual = useRef(false);
+    const heightApplied = useRef(0);
     const refreshHeight = useCallback(() => {
         const element = areaRef.current;
-        if (element) {
-            element.style.height = 'auto';
-            element.style.height = `${element.scrollHeight}px`;
+        if (!element || heightIsManual.current) {
+            return;
+        }
+        element.style.height = 'auto';
+        const { lineHeight, paddingBottom, paddingTop } = getComputedStyle(element);
+        const heightLine = parseFloat(lineHeight);
+        const heightContent = element.scrollHeight;
+        if (!heightLine) {
+            element.style.height = `${heightContent}px`;
+            heightApplied.current = heightContent;
+            return;
         }
-    }, [areaRef]);
+        const heightPadding = parseFloat(paddingTop) + parseFloat(paddingBottom);
+        const heightMin = heightLine * rowsMin + heightPadding;
+        const heightMax = heightLine * rowsMax + heightPadding;
+        const height = Math.min(Math.max(heightContent, heightMin), heightMax);
+        element.style.height = `${height}px`;
+        element.style.overflowY = heightContent > heightMax ? 'auto' : 'hidden';
+        heightApplied.current = height;
+    }, [areaRef, rowsMax, rowsMin]);
     useEffect(() => {
-        if (!changeIsInternal.current) {
-            const nextValue = String(formControl?.value ?? value ?? '');
+        const source = formControl ? formControl.value : value;
+        const isEcho = Object.is(source, valueSent.current);
+        const isSame = Object.is(source, valueSource.current);
+        valueSource.current = source;
+        if (!isEcho && !isSame) {
+            const nextValue = String(source ?? '');
             if (valueArea !== nextValue) {
                 setValueArea(nextValue);
             }
         }
-        changeIsInternal.current = false;
     }, [formControl?.value, value, valueArea]);
     useEffect(() => {
         refreshHeight();
     }, [refreshHeight, valueArea]);
-    const onChangeArea = useCallback((event) => {
-        const nextValue = event.target.value;
-        changeIsInternal.current = true;
+    useEffect(() => {
+        const element = areaRef.current;
+        if (!element ||
+            resize === 'none' ||
+            typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            if (heightIsManual.current || !heightApplied.current) {
+                return;
+            }
+            if (Math.abs(element.offsetHeight - heightApplied.current) > 1) {
+                heightIsManual.current = true;
+                element.style.overflowY = 'auto';
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [areaRef, resize]);
+    const applyArea = useCallback((element) => {
+        const rawArea = element.value;
+        const formatter = formControl?.formatter;
+        const nextValue = formatter && formControl?.formatOn !== 'blur' && !composing.current
+            ? (formatter(rawArea) ?? '')
+            : rawArea;
+        writeAreaValue(element, nextValue);
+        valueSent.current = nextValue;
         onValue?.(nextValue);
         setValueArea(nextValue);
         formControl?.setValue(nextValue);
-        event.target.style.height = 'auto';
-        event.target.style.height = `${event.target.scrollHeight}px`;
     }, [formControl, onValue]);
+    const onChangeArea = useCallback((event) => {
+        applyArea(event.target);
+    }, [applyArea]);
+    const onCompositionStart = useCallback(() => {
+        composing.current = true;
+    }, []);
+    const onCompositionEnd = useCallback((event) => {
+        composing.current = false;
+        applyArea(event.currentTarget);
+    }, [applyArea]);
     const onKeyDownArea = useCallback((event) => {
         onKeyDown?.(event);
         if (event.key === 'Enter') {
@@ -55,12 +124,14 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         setFocused(() => false);
         onBlur?.();
     }, [formControl, onBlur]);
+    const disabledArea = formControl?.disabled || disabled;
     const className = renderClassStatus('rls-area-text', {
-        disabled: formControl?.disabled || disabled,
+        disabled: disabledArea,
         focused: formControl?.focused ?? focused,
-        readonly: readOnly
+        readonly: readOnly,
+        resizable: resize !== 'none' && !disabledArea && !readOnly
     });
-    return (_jsxs("div", { id: identifier, className: className, children: [_jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, rows: rows, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), _jsx("span", { className: "rls-area-text__value", children: valueArea })] }));
+    return (_jsxs("div", { id: identifier, className: className, children: [_jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), _jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
 }
 export const RlsAreaText = memo(RlsAreaTextComponent);
 //# sourceMappingURL=AreaText.js.map

package/dist/esm/components/atoms/AreaText/AreaText.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/AreaText/AreaText.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AreaText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/AreaText/AreaText.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/atoms/Input/Input.js

@@ -1,30 +1,82 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { renderClassStatus } from '../../../helpers/css';
+function valueToInput(value) {
+    return value ? String(value) : '';
+}
+function selectionStartOf(element) {
+    try {
+        // Lanza o retorna null en inputs sin selección (number, email, etc.)
+        return element.selectionStart;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Escribe el valor formateado directamente en el DOM y conserva la posición
+ * del cursor, corrigiéndola por la diferencia de longitud. Es necesario
+ * porque, cuando el formateador rechaza un carácter, el estado del control
+ * no cambia y React no vuelve a escribir el input.
+ */
+function writeInputValue(element, valueInput) {
+    const rawInput = element.value;
+    if (rawInput === valueInput) {
+        return;
+    }
+    const selection = selectionStartOf(element);
+    element.value = valueInput;
+    if (selection !== null) {
+        const offset = valueInput.length - rawInput.length;
+        const caret = Math.max(0, Math.min(selection + offset, valueInput.length));
+        element.setSelectionRange(caret, caret);
+    }
+}
 function RlsInputComponent({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
-    const valueInitial = (formControl?.value ?? value) ? String(value) : '';
-    const [valueInput, setValueInput] = useState(valueInitial);
+    const [valueInput, setValueInput] = useState(() => valueToInput(formControl?.value ?? value));
     const [focused, setFocused] = useState(false);
-    const changeIsInternal = useRef(false);
+    const composing = useRef(false);
+    const valueSent = useRef(formControl?.value);
     useEffect(() => {
-        if (!changeIsInternal.current && formControl) {
-            const valueControl = formControl.value ? String(formControl.value) : '';
+        if (formControl && !Object.is(formControl.value, valueSent.current)) {
+            const valueControl = valueToInput(formControl.value);
             if (valueInput !== valueControl) {
                 setValueInput(valueControl);
             }
         }
-        changeIsInternal.current = false;
     }, [formControl?.value]);
-    const onChangeInput = useCallback((event) => {
-        const valueInput = event.target.value;
-        const value = type === 'number'
-            ? parseFloat((+valueInput).toFixed(decimals))
-            : valueInput;
-        changeIsInternal.current = true;
+    const applyInput = useCallback((element) => {
+        const rawInput = element.value;
+        const parsed = type === 'number'
+            ? parseFloat((+rawInput).toFixed(decimals))
+            : rawInput;
+        const formatter = formControl?.formatter;
+        const value = formatter && formControl?.formatOn !== 'blur' && !composing.current
+            ? formatter(parsed)
+            : parsed;
+        const textInput = Object.is(value, parsed)
+            ? rawInput
+            : type === 'number'
+                ? Number.isNaN(value)
+                    ? ''
+                    : String(value)
+                : valueToInput(value);
+        writeInputValue(element, textInput);
+        valueSent.current = value;
         onValue?.(value);
-        setValueInput(valueInput);
+        setValueInput(textInput);
         formControl?.setValue(value);
     }, [formControl, onValue, type, decimals]);
+    const onChangeInput = useCallback((event) => {
+        applyInput(event.target);
+    }, [applyInput]);
+    const onCompositionStart = useCallback(() => {
+        composing.current = true;
+    }, []);
+    const onCompositionEnd = useCallback((event) => {
+        composing.current = false;
+        applyInput(event.currentTarget);
+    }, [applyInput]);
     const onKeyDownInput = useCallback((event) => {
         onKeyDown?.(event);
         if (event.key === 'Enter') {
@@ -48,7 +100,7 @@ function RlsInputComponent({ children, decimals, disabled, formControl, identifi
         disabled: formControl?.disabled || disabled,
         focused: formControl?.focused ?? focused
     });
-    return (_jsxs("div", { id: identifier, className: className, children: [_jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), _jsx("span", { className: "rls-input__value", children: children })] }));
+    return (_jsxs("div", { id: identifier, className: className, children: [_jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), _jsx("span", { className: "rls-input__value", children: children })] }));
 }
 export const RlsInput = memo(RlsInputComponent);
 //# sourceMappingURL=Input.js.map

package/dist/esm/components/atoms/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/atoms/Skeleton/Skeleton.d.ts

@@ -1,4 +1,8 @@
 import { RlsComponent } from '../../definitions';
-declare function RlsSkeletonComponent({ rlsTheme }: RlsComponent): import("react/jsx-runtime").JSX.Element;
+export type RlsSkeletonAnimation = 'shimmer' | 'pulse' | 'wave';
+export interface SkeletonProps extends RlsComponent {
+    animation?: RlsSkeletonAnimation;
+}
+declare function RlsSkeletonComponent({ animation, rlsTheme }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 export declare const RlsSkeleton: import("react").MemoExoticComponent<typeof RlsSkeletonComponent>;
 export {};

package/dist/esm/components/atoms/Skeleton/Skeleton.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
-function RlsSkeletonComponent({ rlsTheme }) {
-    return _jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
+import { renderClassStatus } from '../../../helpers/css';
+function RlsSkeletonComponent({ animation, rlsTheme }) {
+    const className = renderClassStatus('rls-skeleton', {
+        animation: animation !== 'shimmer' && animation
+    });
+    return _jsx("div", { className: className, "rls-theme": rlsTheme });
 }
 export const RlsSkeleton = memo(RlsSkeletonComponent);
 //# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/atoms/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,SAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAgB;IACtD,OAAO,cAAK,SAAS,EAAC,cAAc,eAAY,QAAQ,GAAQ,CAAC;AACnE,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD,SAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAiB;IAClE,MAAM,SAAS,GAAG,iBAAiB,CAAC,cAAc,EAAE;QAClD,SAAS,EAAE,SAAS,KAAK,SAAS,IAAI,SAAS;KAChD,CAAC,CAAC;IAEH,OAAO,cAAK,SAAS,EAAE,SAAS,eAAa,QAAQ,GAAQ,CAAC;AAChE,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC"}

package/dist/esm/components/atoms/SkeletonText/SkeletonText.d.ts

@@ -1,7 +1,9 @@
 import { RlsComponent } from '../../definitions';
+import { RlsSkeletonAnimation } from '../Skeleton/Skeleton';
 interface SkeletonTextProps extends RlsComponent {
     active?: boolean;
+    animation?: RlsSkeletonAnimation;
 }
-declare function RlsSkeletonTextComponent({ active, children, rlsTheme }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+declare function RlsSkeletonTextComponent({ active, animation, children, rlsTheme }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
 export declare const RlsSkeletonText: import("react").MemoExoticComponent<typeof RlsSkeletonTextComponent>;
 export {};

package/dist/esm/components/atoms/SkeletonText/SkeletonText.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { RlsSkeleton } from '../Skeleton/Skeleton';
-function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
-    return (_jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (_jsx(RlsSkeleton, {})) : (_jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
+function RlsSkeletonTextComponent({ active, animation, children, rlsTheme }) {
+    return (_jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (_jsx(RlsSkeleton, { animation: animation })) : (_jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
 export const RlsSkeletonText = memo(RlsSkeletonTextComponent);
 //# sourceMappingURL=SkeletonText.js.map

package/dist/esm/components/atoms/SkeletonText/SkeletonText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMnD,SAAS,wBAAwB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,QAAQ,EACU;IAClB,OAAO,CACL,cAAK,SAAS,EAAC,mBAAmB,eAAY,QAAQ,YACnD,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,WAAW,KAAG,CAChB,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAO,CAC3D,GACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAwB,MAAM,sBAAsB,CAAC;AAOzE,SAAS,wBAAwB,CAAC,EAChC,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACU;IAClB,OAAO,CACL,cAAK,SAAS,EAAC,mBAAmB,eAAY,QAAQ,YACnD,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,GAAI,CACtC,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAO,CAC3D,GACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC"}

package/dist/esm/components/molecules/FieldArea/FieldArea.d.ts

@@ -1,6 +1,7 @@
 import { AreaTextProps, RolsterReactAreaTextControl } from '../../atoms/AreaText/AreaText';
 import { RlsComponent } from '../../definitions';
 interface FieldAreaProps extends AreaTextProps, RlsComponent {
+    counter?: boolean;
     formControl?: RolsterReactAreaTextControl<string>;
     msgErrorDisabled?: boolean;
 }

package/dist/esm/components/molecules/FieldArea/FieldArea.js

@@ -1,20 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { renderClassStatus } from '../../../helpers/css';
 import { RlsAreaText } from '../../atoms/AreaText/AreaText';
 import { RlsMessageFormError } from '../MessageFormError/MessageFormError';
 function RlsFieldAreaComponent(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { children, formControl, identifier, maxLength, rlsTheme } = props;
+    const { onValue } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
+    const valueSource = formControl?.value ?? props.value;
+    const [valueLength, setValueLength] = useState(() => {
+        return (valueSource ?? '').length;
+    });
+    useEffect(() => {
+        if (valueSource !== undefined) {
+            setValueLength(valueSource.length);
+        }
+    }, [valueSource]);
+    const onValueArea = useCallback((value) => {
+        setValueLength(value.length);
+        onValue?.(value);
+    }, [onValue]);
     const className = renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
         focused: formControl?.focused && !disabled,
         readonly: props.readOnly
     }, 'rls-field-area');
-    return (_jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && _jsx("span", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsx("div", { className: "rls-field-box__body", children: _jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (_jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && _jsx("span", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsx("div", { className: "rls-field-box__body", children: _jsx(RlsAreaText, { ...props, onValue: onValueArea }) }) }), props.counter && (_jsx("span", { className: "rls-field-box__helper rls-field-area__counter", children: maxLength ? `${valueLength} / ${maxLength}` : valueLength })), !props.msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 export const RlsFieldArea = memo(RlsFieldAreaComponent);
 //# sourceMappingURL=FieldArea.js.map

package/dist/esm/components/molecules/FieldArea/FieldArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldArea.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FieldArea/FieldArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAEL,WAAW,EAEZ,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAO3E,SAAS,qBAAqB,CAAC,KAAqB;IAClD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE9D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,WAAW,EAAE,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC;IACjD,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5C,MAAM,SAAS,GAAG,iBAAiB,CACjC,eAAe,EACf;QACE,QAAQ;QACR,KAAK,EAAE,WAAW,EAAE,KAAK;QACzB,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,QAAQ;QAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB,EACD,gBAAgB,CACjB,CAAC;IAEF,OAAO,CACL,eAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,eAAa,QAAQ,aAC3D,QAAQ,IAAI,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EAErE,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,WAAW,OAAK,KAAK,GAAI,GACtB,GACF,EAEL,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAC1B,KAAC,mBAAmB,IAClB,SAAS,EAAC,sBAAsB,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"FieldArea.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FieldArea/FieldArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAEL,WAAW,EAEZ,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAQ3E,SAAS,qBAAqB,CAAC,KAAqB;IAClD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE1B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,WAAW,EAAE,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC;IACjD,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC;IAEtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAClD,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAa,EAAE,EAAE;QAChB,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC7B,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,SAAS,GAAG,iBAAiB,CACjC,eAAe,EACf;QACE,QAAQ;QACR,KAAK,EAAE,WAAW,EAAE,KAAK;QACzB,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,QAAQ;QAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB,EACD,gBAAgB,CACjB,CAAC;IAEF,OAAO,CACL,eAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,eAAa,QAAQ,aAC3D,QAAQ,IAAI,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EAErE,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,WAAW,OAAK,KAAK,EAAE,OAAO,EAAE,WAAW,GAAI,GAC5C,GACF,EAEL,KAAK,CAAC,OAAO,IAAI,CAChB,eAAM,SAAS,EAAC,+CAA+C,YAC5D,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,GACrD,CACR,EAEA,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAC1B,KAAC,mBAAmB,IAClB,SAAS,EAAC,sBAAsB,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/react-components",
-  "version": "19.8.21",
+  "version": "19.9.0",
   "type": "module",
   "description": "Package containing UI components for React Project.",
   "license": "MIT",
@@ -43,14 +43,14 @@
     "@rolster/dates": "^4.1.7",
     "@rolster/i18n": "^3.1.4",
     "@rolster/react": "^19.0.1",
-    "@rolster/react-forms": "^19.5.11",
+    "@rolster/react-forms": "^19.6.0",
     "@rolster/strings": "^3.1.2",
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@rolster/rollup": "^2.2.0",
-    "@rolster/styles-foundations": "^3.5.22",
+    "@rolster/styles-foundations": "^3.5.24",
     "@rolster/types": "^1.1.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",