numora-react 1.0.2 → 1.0.3

package/dist/index.cjs.js

@@ -14,22 +14,24 @@ const DEFAULT_PROPS = {
   spellCheck: false,
   step: 'any'
 };
-const NumoraInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    maxDecimals = 2,
-    onChange,
-    formatOn = numora.FormatOn.Blur,
-    thousandSeparator = ',',
-    thousandStyle = numora.ThousandStyle.Thousand,
-    decimalSeparator = '.',
-    decimalMinLength,
-    enableCompactNotation = false,
-    enableNegative = false,
-    enableLeadingZeros = false,
-    rawValueMode = false,
-    ...props
-  } = _ref;
+const NumoraInput = /*#__PURE__*/React.forwardRef(({
+  maxDecimals = 2,
+  onChange,
+  formatOn = numora.FormatOn.Blur,
+  thousandSeparator = ',',
+  thousandStyle = numora.ThousandStyle.Thousand,
+  decimalSeparator = '.',
+  decimalMinLength,
+  enableCompactNotation = false,
+  enableNegative = false,
+  enableLeadingZeros = false,
+  rawValueMode = false,
+  ...props
+}, ref) => {
   const [caretPositionBeforeChange, setCaretPositionBeforeChange] = React.useState();
+  const inputRef = React.useRef(null);
+  const isUserInputRef = React.useRef(false);
+  const previousValueRef = React.useRef(typeof props.value === 'string' ? props.value : props.value?.toString());
   const formattingOptions = {
     formatOn,
     thousandSeparator,
@@ -41,6 +43,23 @@ const NumoraInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     enableLeadingZeros,
     rawValueMode
   };
+  // Handle programmatic value changes (when value prop changes externally)
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const currentValue = typeof props.value === 'string' ? props.value : props.value !== undefined ? String(props.value) : undefined;
+    const previousValue = previousValueRef.current;
+    // Only format if value changed externally (not from user input)
+    if (!isUserInputRef.current && currentValue !== previousValue && currentValue !== undefined) {
+      const formatted = numora.formatValueForNumora(currentValue, maxDecimals, formattingOptions);
+      // Only update if formatted value differs from current input value
+      if (input.value !== formatted) {
+        input.value = formatted;
+      }
+    }
+    previousValueRef.current = currentValue;
+    isUserInputRef.current = false;
+  }, [props.value, maxDecimals, formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength, enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);
   function handleOnKeyDown(e) {
     const caretInfo = numora.handleOnKeyDownNumoraInput(e.nativeEvent, formattingOptions);
     if (caretInfo) {
@@ -57,11 +76,13 @@ const NumoraInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }
   function handleOnChange(e) {
+    isUserInputRef.current = true;
     numora.handleOnChangeNumoraInput(e.nativeEvent, maxDecimals, caretPositionBeforeChange, formattingOptions);
     setCaretPositionBeforeChange(undefined);
     if (onChange) onChange(e);
   }
   function handleOnPaste(e) {
+    isUserInputRef.current = true;
     numora.handleOnPasteNumoraInput(e.nativeEvent, maxDecimals, formattingOptions);
     if (onChange) onChange(e);
   }
@@ -79,10 +100,19 @@ const NumoraInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       props.onBlur(e);
     }
   }
+  // Combine refs: forward the ref and also store it internally
+  const setRefs = React.useCallback(node => {
+    inputRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   return jsxRuntime.jsx("input", {
     ...DEFAULT_PROPS,
     ...props,
-    ref: ref,
+    ref: setRefs,
     onChange: handleOnChange,
     onKeyDown: handleOnKeyDown,
     onPaste: handleOnPaste,

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ClipboardEvent, forwardRef } from 'react';\nimport {\n  NumoraInput,\n  FormatOn,\n  ThousandStyle,\n  FormattingOptions,\n  CaretPositionInfo,\n  handleOnChangeNumoraInput,\n  handleOnPasteNumoraInput,\n  handleOnKeyDownNumoraInput,\n} from 'numora';\n\ninterface NumoraInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'inputMode'> {\n  maxDecimals?: number;\n  onChange?: (e: ChangeEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>) => void;\n\n  // Formatting options\n  formatOn?: FormatOn;\n  thousandSeparator?: string;\n  thousandStyle?: ThousandStyle;\n  decimalSeparator?: string;\n  decimalMinLength?: number;\n\n  // Feature flags\n  enableCompactNotation?: boolean;\n  enableNegative?: boolean;\n  enableLeadingZeros?: boolean;\n  rawValueMode?: boolean;\n}\n\nconst DEFAULT_PROPS = {\n  autoComplete: 'off',\n  autoCorrect: 'off',\n  autoCapitalize: 'none',\n  minLength: 1,\n  placeholder: '0.0',\n  pattern: '^[0-9]*[.,]?[0-9]*$',\n  spellCheck: false,\n  step: 'any',\n};\n\nconst NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>(\n  ({\n    maxDecimals = 2,\n    onChange,\n    formatOn = FormatOn.Blur,\n    thousandSeparator = ',',\n    thousandStyle = ThousandStyle.Thousand,\n    decimalSeparator = '.',\n    decimalMinLength,\n    enableCompactNotation = false,\n    enableNegative = false,\n    enableLeadingZeros = false,\n    rawValueMode = false,\n    ...props\n  }: NumoraInputProps, ref: React.Ref<HTMLInputElement>) => {\n    const [caretPositionBeforeChange, setCaretPositionBeforeChange] =\n      React.useState<CaretPositionInfo>();\n\n    const formattingOptions: FormattingOptions = {\n      formatOn,\n      thousandSeparator,\n      ThousandStyle: thousandStyle as any,\n      decimalSeparator,\n      decimalMinLength,\n      enableCompactNotation,\n      enableNegative,\n      enableLeadingZeros,\n      rawValueMode,\n    };\n\n    function handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {\n      const caretInfo = handleOnKeyDownNumoraInput(e.nativeEvent, formattingOptions);\n\n      if (caretInfo) {\n        setCaretPositionBeforeChange(caretInfo);\n      } else {\n        const input = e.currentTarget;\n        setCaretPositionBeforeChange({\n          selectionStart: input.selectionStart ?? 0,\n          selectionEnd: input.selectionEnd ?? 0,\n        });\n      }\n\n      if (props.onKeyDown) {\n        props.onKeyDown(e);\n      }\n    }\n\n    function handleOnChange(e: ChangeEvent<HTMLInputElement>): void {\n      handleOnChangeNumoraInput(\n        e.nativeEvent,\n        maxDecimals,\n        caretPositionBeforeChange,\n        formattingOptions\n      );\n      setCaretPositionBeforeChange(undefined);\n      if (onChange) onChange(e);\n    }\n\n    function handleOnPaste(e: ClipboardEvent<HTMLInputElement>): void {\n      handleOnPasteNumoraInput(e.nativeEvent, maxDecimals, formattingOptions);\n      if (onChange) onChange(e);\n    }\n\n    function handleOnFocus(e: React.FocusEvent<HTMLInputElement>): void {\n      if (formatOn === FormatOn.Blur && thousandSeparator) {\n        const target = e.currentTarget;\n        target.value = target.value.replace(\n          new RegExp(thousandSeparator.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'g'),\n          ''\n        );\n      }\n\n      if (props.onFocus) {\n        props.onFocus(e);\n      }\n    }\n\n    function handleOnBlur(e: React.FocusEvent<HTMLInputElement>): void {\n      if (props.onBlur) {\n        props.onBlur(e);\n      }\n    }\n\n    return (\n      <input\n        {...DEFAULT_PROPS}\n        {...props}\n        ref={ref}\n        onChange={handleOnChange}\n        onKeyDown={handleOnKeyDown}\n        onPaste={handleOnPaste}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        type=\"text\"\n        inputMode=\"decimal\"\n      />\n    );\n  }\n);\n\nNumoraInput.displayName = 'NumoraInput';\n\nexport { NumoraInput };\nexport { FormatOn, ThousandStyle } from 'numora';\nexport type { FormattingOptions, CaretPositionInfo } from 'numora';\n"],"names":["DEFAULT_PROPS","autoComplete","autoCorrect","autoCapitalize","minLength","placeholder","pattern","spellCheck","step","NumoraInput","forwardRef","_ref","ref","maxDecimals","onChange","formatOn","FormatOn","Blur","thousandSeparator","thousandStyle","ThousandStyle","Thousand","decimalSeparator","decimalMinLength","enableCompactNotation","enableNegative","enableLeadingZeros","rawValueMode","props","caretPositionBeforeChange","setCaretPositionBeforeChange","React","useState","formattingOptions","handleOnKeyDown","e","caretInfo","handleOnKeyDownNumoraInput","nativeEvent","input","currentTarget","selectionStart","selectionEnd","onKeyDown","handleOnChange","handleOnChangeNumoraInput","undefined","handleOnPaste","handleOnPasteNumoraInput","handleOnFocus","target","value","replace","RegExp","onFocus","handleOnBlur","onBlur","_jsx","onPaste","type","inputMode","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ClipboardEvent, forwardRef, useEffect, useRef } from 'react';\nimport {\n  FormatOn,\n  ThousandStyle,\n  FormattingOptions,\n  CaretPositionInfo,\n  handleOnChangeNumoraInput,\n  handleOnPasteNumoraInput,\n  handleOnKeyDownNumoraInput,\n  formatValueForNumora,\n} from 'numora';\n\ninterface NumoraInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'inputMode'> {\n  maxDecimals?: number;\n  onChange?: (e: ChangeEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>) => void;\n\n  // Formatting options\n  formatOn?: FormatOn;\n  thousandSeparator?: string;\n  thousandStyle?: ThousandStyle;\n  decimalSeparator?: string;\n  decimalMinLength?: number;\n\n  // Feature flags\n  enableCompactNotation?: boolean;\n  enableNegative?: boolean;\n  enableLeadingZeros?: boolean;\n  rawValueMode?: boolean;\n}\n\nconst DEFAULT_PROPS = {\n  autoComplete: 'off',\n  autoCorrect: 'off',\n  autoCapitalize: 'none',\n  minLength: 1,\n  placeholder: '0.0',\n  pattern: '^[0-9]*[.,]?[0-9]*$',\n  spellCheck: false,\n  step: 'any',\n};\n\nconst NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>(\n  ({\n    maxDecimals = 2,\n    onChange,\n    formatOn = FormatOn.Blur,\n    thousandSeparator = ',',\n    thousandStyle = ThousandStyle.Thousand,\n    decimalSeparator = '.',\n    decimalMinLength,\n    enableCompactNotation = false,\n    enableNegative = false,\n    enableLeadingZeros = false,\n    rawValueMode = false,\n    ...props\n  }: NumoraInputProps, ref: React.Ref<HTMLInputElement>) => {\n    const [caretPositionBeforeChange, setCaretPositionBeforeChange] =\n      React.useState<CaretPositionInfo>();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const isUserInputRef = useRef(false);\n    const previousValueRef = useRef<string | undefined>(\n      typeof props.value === 'string' ? props.value : props.value?.toString()\n    );\n\n    const formattingOptions: FormattingOptions = {\n      formatOn,\n      thousandSeparator,\n      ThousandStyle: thousandStyle as any,\n      decimalSeparator,\n      decimalMinLength,\n      enableCompactNotation,\n      enableNegative,\n      enableLeadingZeros,\n      rawValueMode,\n    };\n\n    // Handle programmatic value changes (when value prop changes externally)\n    useEffect(() => {\n      const input = inputRef.current;\n      if (!input) return;\n\n      const currentValue = typeof props.value === 'string'\n        ? props.value\n        : props.value !== undefined\n          ? String(props.value)\n          : undefined;\n      const previousValue = previousValueRef.current;\n\n      // Only format if value changed externally (not from user input)\n      if (!isUserInputRef.current && currentValue !== previousValue && currentValue !== undefined) {\n        const formatted = formatValueForNumora(\n          currentValue,\n          maxDecimals,\n          formattingOptions\n        );\n\n        // Only update if formatted value differs from current input value\n        if (input.value !== formatted) {\n          input.value = formatted;\n        }\n      }\n\n      previousValueRef.current = currentValue;\n      isUserInputRef.current = false;\n    }, [props.value, maxDecimals, formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength, enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);\n\n    function handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {\n      const caretInfo = handleOnKeyDownNumoraInput(e.nativeEvent, formattingOptions);\n\n      if (caretInfo) {\n        setCaretPositionBeforeChange(caretInfo);\n      } else {\n        const input = e.currentTarget;\n        setCaretPositionBeforeChange({\n          selectionStart: input.selectionStart ?? 0,\n          selectionEnd: input.selectionEnd ?? 0,\n        });\n      }\n\n      if (props.onKeyDown) {\n        props.onKeyDown(e);\n      }\n    }\n\n    function handleOnChange(e: ChangeEvent<HTMLInputElement>): void {\n      isUserInputRef.current = true;\n      handleOnChangeNumoraInput(\n        e.nativeEvent,\n        maxDecimals,\n        caretPositionBeforeChange,\n        formattingOptions\n      );\n      setCaretPositionBeforeChange(undefined);\n      if (onChange) onChange(e);\n    }\n\n    function handleOnPaste(e: ClipboardEvent<HTMLInputElement>): void {\n      isUserInputRef.current = true;\n      handleOnPasteNumoraInput(e.nativeEvent, maxDecimals, formattingOptions);\n      if (onChange) onChange(e);\n    }\n\n    function handleOnFocus(e: React.FocusEvent<HTMLInputElement>): void {\n      if (formatOn === FormatOn.Blur && thousandSeparator) {\n        const target = e.currentTarget;\n        target.value = target.value.replace(\n          new RegExp(thousandSeparator.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'g'),\n          ''\n        );\n      }\n\n      if (props.onFocus) {\n        props.onFocus(e);\n      }\n    }\n\n    function handleOnBlur(e: React.FocusEvent<HTMLInputElement>): void {\n      if (props.onBlur) {\n        props.onBlur(e);\n      }\n    }\n\n    // Combine refs: forward the ref and also store it internally\n    const setRefs = React.useCallback((node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    }, [ref]);\n\n    return (\n      <input\n        {...DEFAULT_PROPS}\n        {...props}\n        ref={setRefs}\n        onChange={handleOnChange}\n        onKeyDown={handleOnKeyDown}\n        onPaste={handleOnPaste}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        type=\"text\"\n        inputMode=\"decimal\"\n      />\n    );\n  }\n);\n\nNumoraInput.displayName = 'NumoraInput';\n\nexport { NumoraInput };\nexport { FormatOn, ThousandStyle } from 'numora';\nexport type { FormattingOptions, CaretPositionInfo } from 'numora';\n"],"names":["DEFAULT_PROPS","autoComplete","autoCorrect","autoCapitalize","minLength","placeholder","pattern","spellCheck","step","NumoraInput","forwardRef","maxDecimals","onChange","formatOn","FormatOn","Blur","thousandSeparator","thousandStyle","ThousandStyle","Thousand","decimalSeparator","decimalMinLength","enableCompactNotation","enableNegative","enableLeadingZeros","rawValueMode","props","ref","caretPositionBeforeChange","setCaretPositionBeforeChange","React","useState","inputRef","useRef","isUserInputRef","previousValueRef","value","toString","formattingOptions","useEffect","input","current","currentValue","undefined","String","previousValue","formatted","formatValueForNumora","handleOnKeyDown","e","caretInfo","handleOnKeyDownNumoraInput","nativeEvent","currentTarget","selectionStart","selectionEnd","onKeyDown","handleOnChange","handleOnChangeNumoraInput","handleOnPaste","handleOnPasteNumoraInput","handleOnFocus","target","replace","RegExp","onFocus","handleOnBlur","onBlur","setRefs","useCallback","node","_jsx","onPaste","type","inputMode","displayName"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, ClipboardEvent } from 'react';
-import { NumoraInput, FormatOn, ThousandStyle } from 'numora';
+import { FormatOn, ThousandStyle } from 'numora';
 interface NumoraInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'inputMode'> {
     maxDecimals?: number;
     onChange?: (e: ChangeEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>) => void;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef } from 'react';
-import { FormatOn, ThousandStyle, handleOnPasteNumoraInput, handleOnKeyDownNumoraInput, handleOnChangeNumoraInput } from 'numora';
+import React, { forwardRef, useRef, useEffect } from 'react';
+import { formatValueForNumora, ThousandStyle, FormatOn, handleOnPasteNumoraInput, handleOnKeyDownNumoraInput, handleOnChangeNumoraInput } from 'numora';
 export { FormatOn, ThousandStyle } from 'numora';
 
 const DEFAULT_PROPS = {
@@ -13,22 +13,24 @@ const DEFAULT_PROPS = {
   spellCheck: false,
   step: 'any'
 };
-const NumoraInput = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    maxDecimals = 2,
-    onChange,
-    formatOn = FormatOn.Blur,
-    thousandSeparator = ',',
-    thousandStyle = ThousandStyle.Thousand,
-    decimalSeparator = '.',
-    decimalMinLength,
-    enableCompactNotation = false,
-    enableNegative = false,
-    enableLeadingZeros = false,
-    rawValueMode = false,
-    ...props
-  } = _ref;
+const NumoraInput = /*#__PURE__*/forwardRef(({
+  maxDecimals = 2,
+  onChange,
+  formatOn = FormatOn.Blur,
+  thousandSeparator = ',',
+  thousandStyle = ThousandStyle.Thousand,
+  decimalSeparator = '.',
+  decimalMinLength,
+  enableCompactNotation = false,
+  enableNegative = false,
+  enableLeadingZeros = false,
+  rawValueMode = false,
+  ...props
+}, ref) => {
   const [caretPositionBeforeChange, setCaretPositionBeforeChange] = React.useState();
+  const inputRef = React.useRef(null);
+  const isUserInputRef = useRef(false);
+  const previousValueRef = useRef(typeof props.value === 'string' ? props.value : props.value?.toString());
   const formattingOptions = {
     formatOn,
     thousandSeparator,
@@ -40,6 +42,23 @@ const NumoraInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     enableLeadingZeros,
     rawValueMode
   };
+  // Handle programmatic value changes (when value prop changes externally)
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const currentValue = typeof props.value === 'string' ? props.value : props.value !== undefined ? String(props.value) : undefined;
+    const previousValue = previousValueRef.current;
+    // Only format if value changed externally (not from user input)
+    if (!isUserInputRef.current && currentValue !== previousValue && currentValue !== undefined) {
+      const formatted = formatValueForNumora(currentValue, maxDecimals, formattingOptions);
+      // Only update if formatted value differs from current input value
+      if (input.value !== formatted) {
+        input.value = formatted;
+      }
+    }
+    previousValueRef.current = currentValue;
+    isUserInputRef.current = false;
+  }, [props.value, maxDecimals, formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength, enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);
   function handleOnKeyDown(e) {
     const caretInfo = handleOnKeyDownNumoraInput(e.nativeEvent, formattingOptions);
     if (caretInfo) {
@@ -56,11 +75,13 @@ const NumoraInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }
   function handleOnChange(e) {
+    isUserInputRef.current = true;
     handleOnChangeNumoraInput(e.nativeEvent, maxDecimals, caretPositionBeforeChange, formattingOptions);
     setCaretPositionBeforeChange(undefined);
     if (onChange) onChange(e);
   }
   function handleOnPaste(e) {
+    isUserInputRef.current = true;
     handleOnPasteNumoraInput(e.nativeEvent, maxDecimals, formattingOptions);
     if (onChange) onChange(e);
   }
@@ -78,10 +99,19 @@ const NumoraInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       props.onBlur(e);
     }
   }
+  // Combine refs: forward the ref and also store it internally
+  const setRefs = React.useCallback(node => {
+    inputRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   return jsx("input", {
     ...DEFAULT_PROPS,
     ...props,
-    ref: ref,
+    ref: setRefs,
     onChange: handleOnChange,
     onKeyDown: handleOnKeyDown,
     onPaste: handleOnPaste,

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ClipboardEvent, forwardRef } from 'react';\nimport {\n  NumoraInput,\n  FormatOn,\n  ThousandStyle,\n  FormattingOptions,\n  CaretPositionInfo,\n  handleOnChangeNumoraInput,\n  handleOnPasteNumoraInput,\n  handleOnKeyDownNumoraInput,\n} from 'numora';\n\ninterface NumoraInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'inputMode'> {\n  maxDecimals?: number;\n  onChange?: (e: ChangeEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>) => void;\n\n  // Formatting options\n  formatOn?: FormatOn;\n  thousandSeparator?: string;\n  thousandStyle?: ThousandStyle;\n  decimalSeparator?: string;\n  decimalMinLength?: number;\n\n  // Feature flags\n  enableCompactNotation?: boolean;\n  enableNegative?: boolean;\n  enableLeadingZeros?: boolean;\n  rawValueMode?: boolean;\n}\n\nconst DEFAULT_PROPS = {\n  autoComplete: 'off',\n  autoCorrect: 'off',\n  autoCapitalize: 'none',\n  minLength: 1,\n  placeholder: '0.0',\n  pattern: '^[0-9]*[.,]?[0-9]*$',\n  spellCheck: false,\n  step: 'any',\n};\n\nconst NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>(\n  ({\n    maxDecimals = 2,\n    onChange,\n    formatOn = FormatOn.Blur,\n    thousandSeparator = ',',\n    thousandStyle = ThousandStyle.Thousand,\n    decimalSeparator = '.',\n    decimalMinLength,\n    enableCompactNotation = false,\n    enableNegative = false,\n    enableLeadingZeros = false,\n    rawValueMode = false,\n    ...props\n  }: NumoraInputProps, ref: React.Ref<HTMLInputElement>) => {\n    const [caretPositionBeforeChange, setCaretPositionBeforeChange] =\n      React.useState<CaretPositionInfo>();\n\n    const formattingOptions: FormattingOptions = {\n      formatOn,\n      thousandSeparator,\n      ThousandStyle: thousandStyle as any,\n      decimalSeparator,\n      decimalMinLength,\n      enableCompactNotation,\n      enableNegative,\n      enableLeadingZeros,\n      rawValueMode,\n    };\n\n    function handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {\n      const caretInfo = handleOnKeyDownNumoraInput(e.nativeEvent, formattingOptions);\n\n      if (caretInfo) {\n        setCaretPositionBeforeChange(caretInfo);\n      } else {\n        const input = e.currentTarget;\n        setCaretPositionBeforeChange({\n          selectionStart: input.selectionStart ?? 0,\n          selectionEnd: input.selectionEnd ?? 0,\n        });\n      }\n\n      if (props.onKeyDown) {\n        props.onKeyDown(e);\n      }\n    }\n\n    function handleOnChange(e: ChangeEvent<HTMLInputElement>): void {\n      handleOnChangeNumoraInput(\n        e.nativeEvent,\n        maxDecimals,\n        caretPositionBeforeChange,\n        formattingOptions\n      );\n      setCaretPositionBeforeChange(undefined);\n      if (onChange) onChange(e);\n    }\n\n    function handleOnPaste(e: ClipboardEvent<HTMLInputElement>): void {\n      handleOnPasteNumoraInput(e.nativeEvent, maxDecimals, formattingOptions);\n      if (onChange) onChange(e);\n    }\n\n    function handleOnFocus(e: React.FocusEvent<HTMLInputElement>): void {\n      if (formatOn === FormatOn.Blur && thousandSeparator) {\n        const target = e.currentTarget;\n        target.value = target.value.replace(\n          new RegExp(thousandSeparator.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'g'),\n          ''\n        );\n      }\n\n      if (props.onFocus) {\n        props.onFocus(e);\n      }\n    }\n\n    function handleOnBlur(e: React.FocusEvent<HTMLInputElement>): void {\n      if (props.onBlur) {\n        props.onBlur(e);\n      }\n    }\n\n    return (\n      <input\n        {...DEFAULT_PROPS}\n        {...props}\n        ref={ref}\n        onChange={handleOnChange}\n        onKeyDown={handleOnKeyDown}\n        onPaste={handleOnPaste}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        type=\"text\"\n        inputMode=\"decimal\"\n      />\n    );\n  }\n);\n\nNumoraInput.displayName = 'NumoraInput';\n\nexport { NumoraInput };\nexport { FormatOn, ThousandStyle } from 'numora';\nexport type { FormattingOptions, CaretPositionInfo } from 'numora';\n"],"names":["DEFAULT_PROPS","autoComplete","autoCorrect","autoCapitalize","minLength","placeholder","pattern","spellCheck","step","NumoraInput","forwardRef","_ref","ref","maxDecimals","onChange","formatOn","FormatOn","Blur","thousandSeparator","thousandStyle","ThousandStyle","Thousand","decimalSeparator","decimalMinLength","enableCompactNotation","enableNegative","enableLeadingZeros","rawValueMode","props","caretPositionBeforeChange","setCaretPositionBeforeChange","React","useState","formattingOptions","handleOnKeyDown","e","caretInfo","handleOnKeyDownNumoraInput","nativeEvent","input","currentTarget","selectionStart","selectionEnd","onKeyDown","handleOnChange","handleOnChangeNumoraInput","undefined","handleOnPaste","handleOnPasteNumoraInput","handleOnFocus","target","value","replace","RegExp","onFocus","handleOnBlur","onBlur","_jsx","onPaste","type","inputMode","displayName"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ClipboardEvent, forwardRef, useEffect, useRef } from 'react';\nimport {\n  FormatOn,\n  ThousandStyle,\n  FormattingOptions,\n  CaretPositionInfo,\n  handleOnChangeNumoraInput,\n  handleOnPasteNumoraInput,\n  handleOnKeyDownNumoraInput,\n  formatValueForNumora,\n} from 'numora';\n\ninterface NumoraInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'inputMode'> {\n  maxDecimals?: number;\n  onChange?: (e: ChangeEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>) => void;\n\n  // Formatting options\n  formatOn?: FormatOn;\n  thousandSeparator?: string;\n  thousandStyle?: ThousandStyle;\n  decimalSeparator?: string;\n  decimalMinLength?: number;\n\n  // Feature flags\n  enableCompactNotation?: boolean;\n  enableNegative?: boolean;\n  enableLeadingZeros?: boolean;\n  rawValueMode?: boolean;\n}\n\nconst DEFAULT_PROPS = {\n  autoComplete: 'off',\n  autoCorrect: 'off',\n  autoCapitalize: 'none',\n  minLength: 1,\n  placeholder: '0.0',\n  pattern: '^[0-9]*[.,]?[0-9]*$',\n  spellCheck: false,\n  step: 'any',\n};\n\nconst NumoraInput = forwardRef<HTMLInputElement, NumoraInputProps>(\n  ({\n    maxDecimals = 2,\n    onChange,\n    formatOn = FormatOn.Blur,\n    thousandSeparator = ',',\n    thousandStyle = ThousandStyle.Thousand,\n    decimalSeparator = '.',\n    decimalMinLength,\n    enableCompactNotation = false,\n    enableNegative = false,\n    enableLeadingZeros = false,\n    rawValueMode = false,\n    ...props\n  }: NumoraInputProps, ref: React.Ref<HTMLInputElement>) => {\n    const [caretPositionBeforeChange, setCaretPositionBeforeChange] =\n      React.useState<CaretPositionInfo>();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const isUserInputRef = useRef(false);\n    const previousValueRef = useRef<string | undefined>(\n      typeof props.value === 'string' ? props.value : props.value?.toString()\n    );\n\n    const formattingOptions: FormattingOptions = {\n      formatOn,\n      thousandSeparator,\n      ThousandStyle: thousandStyle as any,\n      decimalSeparator,\n      decimalMinLength,\n      enableCompactNotation,\n      enableNegative,\n      enableLeadingZeros,\n      rawValueMode,\n    };\n\n    // Handle programmatic value changes (when value prop changes externally)\n    useEffect(() => {\n      const input = inputRef.current;\n      if (!input) return;\n\n      const currentValue = typeof props.value === 'string'\n        ? props.value\n        : props.value !== undefined\n          ? String(props.value)\n          : undefined;\n      const previousValue = previousValueRef.current;\n\n      // Only format if value changed externally (not from user input)\n      if (!isUserInputRef.current && currentValue !== previousValue && currentValue !== undefined) {\n        const formatted = formatValueForNumora(\n          currentValue,\n          maxDecimals,\n          formattingOptions\n        );\n\n        // Only update if formatted value differs from current input value\n        if (input.value !== formatted) {\n          input.value = formatted;\n        }\n      }\n\n      previousValueRef.current = currentValue;\n      isUserInputRef.current = false;\n    }, [props.value, maxDecimals, formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength, enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);\n\n    function handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {\n      const caretInfo = handleOnKeyDownNumoraInput(e.nativeEvent, formattingOptions);\n\n      if (caretInfo) {\n        setCaretPositionBeforeChange(caretInfo);\n      } else {\n        const input = e.currentTarget;\n        setCaretPositionBeforeChange({\n          selectionStart: input.selectionStart ?? 0,\n          selectionEnd: input.selectionEnd ?? 0,\n        });\n      }\n\n      if (props.onKeyDown) {\n        props.onKeyDown(e);\n      }\n    }\n\n    function handleOnChange(e: ChangeEvent<HTMLInputElement>): void {\n      isUserInputRef.current = true;\n      handleOnChangeNumoraInput(\n        e.nativeEvent,\n        maxDecimals,\n        caretPositionBeforeChange,\n        formattingOptions\n      );\n      setCaretPositionBeforeChange(undefined);\n      if (onChange) onChange(e);\n    }\n\n    function handleOnPaste(e: ClipboardEvent<HTMLInputElement>): void {\n      isUserInputRef.current = true;\n      handleOnPasteNumoraInput(e.nativeEvent, maxDecimals, formattingOptions);\n      if (onChange) onChange(e);\n    }\n\n    function handleOnFocus(e: React.FocusEvent<HTMLInputElement>): void {\n      if (formatOn === FormatOn.Blur && thousandSeparator) {\n        const target = e.currentTarget;\n        target.value = target.value.replace(\n          new RegExp(thousandSeparator.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'g'),\n          ''\n        );\n      }\n\n      if (props.onFocus) {\n        props.onFocus(e);\n      }\n    }\n\n    function handleOnBlur(e: React.FocusEvent<HTMLInputElement>): void {\n      if (props.onBlur) {\n        props.onBlur(e);\n      }\n    }\n\n    // Combine refs: forward the ref and also store it internally\n    const setRefs = React.useCallback((node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    }, [ref]);\n\n    return (\n      <input\n        {...DEFAULT_PROPS}\n        {...props}\n        ref={setRefs}\n        onChange={handleOnChange}\n        onKeyDown={handleOnKeyDown}\n        onPaste={handleOnPaste}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        type=\"text\"\n        inputMode=\"decimal\"\n      />\n    );\n  }\n);\n\nNumoraInput.displayName = 'NumoraInput';\n\nexport { NumoraInput };\nexport { FormatOn, ThousandStyle } from 'numora';\nexport type { FormattingOptions, CaretPositionInfo } from 'numora';\n"],"names":["DEFAULT_PROPS","autoComplete","autoCorrect","autoCapitalize","minLength","placeholder","pattern","spellCheck","step","NumoraInput","forwardRef","maxDecimals","onChange","formatOn","FormatOn","Blur","thousandSeparator","thousandStyle","ThousandStyle","Thousand","decimalSeparator","decimalMinLength","enableCompactNotation","enableNegative","enableLeadingZeros","rawValueMode","props","ref","caretPositionBeforeChange","setCaretPositionBeforeChange","React","useState","inputRef","useRef","isUserInputRef","previousValueRef","value","toString","formattingOptions","useEffect","input","current","currentValue","undefined","String","previousValue","formatted","formatValueForNumora","handleOnKeyDown","e","caretInfo","handleOnKeyDownNumoraInput","nativeEvent","currentTarget","selectionStart","selectionEnd","onKeyDown","handleOnChange","handleOnChangeNumoraInput","handleOnPaste","handleOnPasteNumoraInput","handleOnFocus","target","replace","RegExp","onFocus","handleOnBlur","onBlur","setRefs","useCallback","node","_jsx","onPaste","type","inputMode","displayName"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "numora-react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Numora for React - Headless finance input library",
   "homepage": "https://numora.xyz/",
   "type": "module",
@@ -51,7 +51,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "numora": "2.0.1"
+    "numora": "^2.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.26.10",