numora-react 2.0.5 → 3.0.1

package/src/index.tsx

@@ -2,13 +2,14 @@ import React, {
   useRef,
   useState,
   useEffect,
+  useLayoutEffect,
   forwardRef,
-  useImperativeHandle,
+  useCallback,
 } from 'react';
 import {
   FormatOn,
   ThousandStyle,
-  formatValue,
+  formatValueForDisplay,
   type CaretPositionInfo,
   type FormattingOptions,
 } from 'numora';
@@ -19,13 +20,13 @@ import {
   handleNumoraOnPaste,
 } from './handlers';
 
-interface NumoraInputProps
+export interface NumoraInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
     'onChange' | 'type' | 'inputMode'
   > {
   maxDecimals?: number;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ClipboardEvent<HTMLInputElement>) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 
   formatOn?: FormatOn;
   thousandSeparator?: string;
@@ -60,10 +61,11 @@ const NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref)
     ...rest
   } = props;
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const internalInputRef = useRef<HTMLInputElement>(null);
   const caretInfoRef = useRef<CaretPositionInfo | undefined>(undefined);
+  const lastCaretPosRef = useRef<number | null>(null);
 
-  const formattingOptions: FormattingOptions & { rawValueMode?: boolean } = {
+  const formattingOptions: FormattingOptions = {
     formatOn,
     thousandSeparator,
     ThousandStyle: thousandStyle,
@@ -75,130 +77,150 @@ const NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>((props, ref)
     rawValueMode,
   };
 
-  const getFormattedDefaultValue = (): string => {
-    if (defaultValue !== undefined) {
-      const { formatted } = formatValue(String(defaultValue), maxDecimals, formattingOptions);
+  const getInitialValue = (): string => {
+    const valueToFormat = controlledValue !== undefined ? controlledValue : defaultValue;
+    if (valueToFormat !== undefined) {
+      const { formatted } = formatValueForDisplay(String(valueToFormat), maxDecimals, formattingOptions);
       return formatted;
     }
     return '';
   };
 
-  const getInitialControlledValue = (): string => {
-    if (controlledValue !== undefined) {
-      const { formatted } = formatValue(String(controlledValue), maxDecimals, formattingOptions);
-      return formatted;
-    }
-    return '';
-  };
+  const [displayValue, setDisplayValue] = useState<string>(getInitialValue);
 
-  const [internalValue, setInternalValue] = useState<string>(getInitialControlledValue);
-
-  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
+  // Sync external ref with internal ref
+  useLayoutEffect(() => {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(internalInputRef.current);
+    } else {
+      ref.current = internalInputRef.current;
+    }
+  }, [ref]);
 
-  // When controlled value changes, normalize/format it for display
+  // When controlled value changes from outside, update display value
   useEffect(() => {
     if (controlledValue !== undefined) {
-      const { formatted } = formatValue(String(controlledValue), maxDecimals, formattingOptions);
-      setInternalValue(formatted);
-    }
-  }, [controlledValue, maxDecimals, formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength, enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);
-
-  const isControlled = controlledValue !== undefined;
-
-  const updateValue = (value: string) => {
-    if (isControlled) {
-      setInternalValue(value);
+      const { formatted } = formatValueForDisplay(String(controlledValue), maxDecimals, formattingOptions);
+      if (formatted !== displayValue) {
+        setDisplayValue(formatted);
+      }
     }
-  };
-
-  const syncEventValue = (
-    target: HTMLInputElement,
-    formattedValue: string,
-    rawValue?: string
-  ): void => {
-    Object.defineProperty(target, 'value', {
-      writable: true,
-      value: formattedValue,
-    });
-
-    if (rawValue !== undefined) {
-      Object.defineProperty(target, 'rawValue', {
-        writable: true,
-        value: rawValue,
-        enumerable: true,
-        configurable: true,
-      });
+  }, [controlledValue, maxDecimals, formattingOptions]);
+
+  // Restore cursor position after render
+  useLayoutEffect(() => {
+    if (internalInputRef.current && lastCaretPosRef.current !== null) {
+      const input = internalInputRef.current;
+      const pos = lastCaretPosRef.current;
+      input.setSelectionRange(pos, pos);
+      lastCaretPosRef.current = null;
     }
-  };
+  });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const { value, rawValue } = handleNumoraOnChange(e, {
       decimalMaxLength: maxDecimals,
       caretPositionBeforeChange: caretInfoRef.current,
       formattingOptions,
     });
+
+    // Store cursor position AFTER core library has calculated and set it
+    // The core library modifies the DOM element directly during handleNumoraOnChange
+    // Read from the input ref (which is the same element) to get the position set by the core library
+    if (internalInputRef.current) {
+      const cursorPos = internalInputRef.current.selectionStart;
+      if (cursorPos !== null && cursorPos !== undefined) {
+        lastCaretPosRef.current = cursorPos;
+      }
+    }
+
     caretInfoRef.current = undefined;
 
-    syncEventValue(e.target, value, rawValue);
-    updateValue(value);
+    // Add rawValue to the event object without overriding 'value' property
+    (e.target as any).rawValue = rawValue;
+
+    setDisplayValue(value);
 
     if (onChange) {
       onChange(e);
     }
-  };
+  }, [maxDecimals, formattingOptions, onChange]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    const coreCaretInfo = handleNumoraOnKeyDown(e, formattingOptions);
+    
+    // Always capture cursor position info, even if core library doesn't return it
+    // This is needed for cursor position calculation during normal typing (not just Delete/Backspace)
+    if (!coreCaretInfo && internalInputRef.current) {
+      const selectionStart = internalInputRef.current.selectionStart ?? 0;
+      const selectionEnd = internalInputRef.current.selectionEnd ?? 0;
+      caretInfoRef.current = {
+        selectionStart,
+        selectionEnd,
+      };
+    } else {
+      caretInfoRef.current = coreCaretInfo;
+    }
+    
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  }, [formattingOptions, onKeyDown]);
 
-  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLInputElement>) => {
     const { value, rawValue } = handleNumoraOnPaste(e, {
       decimalMaxLength: maxDecimals,
       formattingOptions,
     });
 
-    syncEventValue(e.target as HTMLInputElement, value, rawValue);
-    updateValue(value);
+    // For paste, we often want to move cursor to the end of pasted content
+    // handleNumoraOnPaste already handles DOM value and cursor, but React will overwrite it.
+    // So we capture where the core logic set the cursor.
+    lastCaretPosRef.current = (e.target as HTMLInputElement).selectionStart;
+    (e.target as any).rawValue = rawValue;
+
+    setDisplayValue(value);
 
     if (onPaste) {
       onPaste(e);
     }
-    if (onChange) {
-      onChange(e);
-    }
-  };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    caretInfoRef.current = handleNumoraOnKeyDown(e, formattingOptions);
-    if (onKeyDown) {
-      onKeyDown(e);
+    // Trigger onChange manually because paste event doesn't always trigger a ChangeEvent in all React versions
+    // when we preventDefault.
+    if (onChange) {
+      const changeEvent = e as unknown as React.ChangeEvent<HTMLInputElement>;
+      onChange(changeEvent);
     }
-  };
+  }, [maxDecimals, formattingOptions, onPaste, onChange]);
 
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+  const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
     const { value, rawValue } = handleNumoraOnBlur(e, {
       decimalMaxLength: maxDecimals,
       formattingOptions,
     });
 
-    syncEventValue(e.target, value, rawValue);
-    updateValue(value);
+    (e.target as any).rawValue = rawValue;
+    setDisplayValue(value);
 
     if (onBlur) {
       onBlur(e);
     }
-  };
+  }, [maxDecimals, formattingOptions, onBlur]);
 
   return (
     <input
       {...rest}
-      ref={inputRef}
-      {...(isControlled
-        ? { value: internalValue }
-        : { defaultValue: getFormattedDefaultValue() }
-      )}
+      ref={internalInputRef}
+      value={displayValue}
       onChange={handleChange}
-      onPaste={handlePaste}
       onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
       onBlur={handleBlur}
       type="text"
       inputMode="decimal"
+      spellCheck={false}
+      autoComplete="off"
     />
   );
 });