@rolster/react-components 19.8.22 → 19.9.0

package/dist/es/index.mjs

@@ -484,6 +484,17 @@ const RlsAmount = memo(RlsAmountComponent);
 
 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;
@@ -492,7 +503,9 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
     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(() => {
@@ -518,13 +531,16 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         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();
@@ -548,13 +564,28 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         observer.observe(element);
         return () => observer.disconnect();
     }, [areaRef, resize]);
-    const onChangeArea = useCallback((event) => {
-        const nextValue = event.target.value;
-        changeIsInternal.current = true;
+    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);
     }, [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') {
@@ -581,7 +612,7 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         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: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", 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);
 
@@ -710,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') {
@@ -757,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);