@rolster/react-components 19.8.21 → 19.9.0

package/dist/es/index.mjs

@@ -482,41 +482,110 @@ function RlsAmountComponent({ value, className, decimals, rlsTheme, symbol }) {
 }
 const RlsAmount = memo(RlsAmountComponent);
 
-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;
         }
-    }, [areaRef]);
+        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;
+        }
+        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') {
@@ -536,12 +605,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 (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.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 }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", children: valueArea })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.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 }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
 }
 const RlsAreaText = memo(RlsAreaTextComponent);
 
@@ -648,8 +719,11 @@ function RlsCheckBoxControlComponent({ formControl, disabled, identifier, rlsThe
 }
 const RlsCheckBoxControl = memo(RlsCheckBoxControlComponent);
 
-function RlsSkeletonComponent({ rlsTheme }) {
-    return jsxRuntimeExports.jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
+function RlsSkeletonComponent({ animation, rlsTheme }) {
+    const className = renderClassStatus('rls-skeleton', {
+        animation: animation !== 'shimmer' && animation
+    });
+    return jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme });
 }
 const RlsSkeleton = memo(RlsSkeletonComponent);
 
@@ -667,30 +741,82 @@ function RlsImageComponent({ src, rlsTheme }) {
 }
 const RlsImage = memo(RlsImageComponent);
 
+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') {
@@ -714,7 +840,7 @@ function RlsInputComponent({ children, decimals, disabled, formControl, identifi
         disabled: formControl?.disabled || disabled,
         focused: formControl?.focused ?? focused
     });
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.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 }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.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 }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 const RlsInput = memo(RlsInputComponent);
 
@@ -1258,8 +1384,8 @@ function RlsRadioButtonComponent({ checked, disabled, identifier, rlsTheme, onCl
 }
 const RlsRadioButton = memo(RlsRadioButtonComponent);
 
-function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
+function RlsSkeletonTextComponent({ active, animation, children, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, { animation: animation })) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
 const RlsSkeletonText = memo(RlsSkeletonTextComponent);
 
@@ -1548,17 +1674,31 @@ function RlsMessageFormErrorComponent({ className, formControl }) {
 const RlsMessageFormError = memo(RlsMessageFormErrorComponent);
 
 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 (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props, onValue: onValueArea }) }) }), props.counter && (jsxRuntimeExports.jsx("span", { className: "rls-field-box__helper rls-field-area__counter", children: maxLength ? `${valueLength} / ${maxLength}` : valueLength })), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldArea = memo(RlsFieldAreaComponent);