numora-react 3.0.2 → 3.1.0

package/dist/index.mjs

@@ -1,429 +1,8 @@
-import require$$0, { forwardRef, useRef, useState, useLayoutEffect, useEffect, useCallback } from 'react';
-import { handleOnChangeNumoraInput, handleOnKeyDownNumoraInput, handleOnPasteNumoraInput, FormatOn, formatValueForDisplay, ThousandStyle, removeThousandSeparators } from 'numora';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useState, useLayoutEffect, useEffect, useCallback } from 'react';
+import { handleOnChangeNumoraInput, handleOnKeyDownNumoraInput, handleOnPasteNumoraInput, FormatOn, formatValueForDisplay, ThousandStyle, validateNumoraInputOptions, removeThousandSeparators } from 'numora';
 export { FormatOn, ThousandStyle } from 'numora';
 
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production = {};
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_production;
-
-function requireReactJsxRuntime_production () {
-	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
-	hasRequiredReactJsxRuntime_production = 1;
-	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-	function jsxProd(type, config, maybeKey) {
-	  var key = null;
-	  void 0 !== maybeKey && (key = "" + maybeKey);
-	  void 0 !== config.key && (key = "" + config.key);
-	  if ("key" in config) {
-	    maybeKey = {};
-	    for (var propName in config)
-	      "key" !== propName && (maybeKey[propName] = config[propName]);
-	  } else maybeKey = config;
-	  config = maybeKey.ref;
-	  return {
-	    $$typeof: REACT_ELEMENT_TYPE,
-	    type: type,
-	    key: key,
-	    ref: void 0 !== config ? config : null,
-	    props: maybeKey
-	  };
-	}
-	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
-	reactJsxRuntime_production.jsx = jsxProd;
-	reactJsxRuntime_production.jsxs = jsxProd;
-	return reactJsxRuntime_production;
-}
-
-var reactJsxRuntime_development = {};
-
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_development;
-
-function requireReactJsxRuntime_development () {
-	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-	hasRequiredReactJsxRuntime_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function getComponentNameFromType(type) {
-	      if (null == type) return null;
-	      if ("function" === typeof type)
-	        return type.$$typeof === REACT_CLIENT_REFERENCE
-	          ? null
-	          : type.displayName || type.name || null;
-	      if ("string" === typeof type) return type;
-	      switch (type) {
-	        case REACT_FRAGMENT_TYPE:
-	          return "Fragment";
-	        case REACT_PROFILER_TYPE:
-	          return "Profiler";
-	        case REACT_STRICT_MODE_TYPE:
-	          return "StrictMode";
-	        case REACT_SUSPENSE_TYPE:
-	          return "Suspense";
-	        case REACT_SUSPENSE_LIST_TYPE:
-	          return "SuspenseList";
-	        case REACT_ACTIVITY_TYPE:
-	          return "Activity";
-	      }
-	      if ("object" === typeof type)
-	        switch (
-	          ("number" === typeof type.tag &&
-	            console.error(
-	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-	            ),
-	          type.$$typeof)
-	        ) {
-	          case REACT_PORTAL_TYPE:
-	            return "Portal";
-	          case REACT_CONTEXT_TYPE:
-	            return type.displayName || "Context";
-	          case REACT_CONSUMER_TYPE:
-	            return (type._context.displayName || "Context") + ".Consumer";
-	          case REACT_FORWARD_REF_TYPE:
-	            var innerType = type.render;
-	            type = type.displayName;
-	            type ||
-	              ((type = innerType.displayName || innerType.name || ""),
-	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
-	            return type;
-	          case REACT_MEMO_TYPE:
-	            return (
-	              (innerType = type.displayName || null),
-	              null !== innerType
-	                ? innerType
-	                : getComponentNameFromType(type.type) || "Memo"
-	            );
-	          case REACT_LAZY_TYPE:
-	            innerType = type._payload;
-	            type = type._init;
-	            try {
-	              return getComponentNameFromType(type(innerType));
-	            } catch (x) {}
-	        }
-	      return null;
-	    }
-	    function testStringCoercion(value) {
-	      return "" + value;
-	    }
-	    function checkKeyStringCoercion(value) {
-	      try {
-	        testStringCoercion(value);
-	        var JSCompiler_inline_result = !1;
-	      } catch (e) {
-	        JSCompiler_inline_result = true;
-	      }
-	      if (JSCompiler_inline_result) {
-	        JSCompiler_inline_result = console;
-	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
-	        var JSCompiler_inline_result$jscomp$0 =
-	          ("function" === typeof Symbol &&
-	            Symbol.toStringTag &&
-	            value[Symbol.toStringTag]) ||
-	          value.constructor.name ||
-	          "Object";
-	        JSCompiler_temp_const.call(
-	          JSCompiler_inline_result,
-	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-	          JSCompiler_inline_result$jscomp$0
-	        );
-	        return testStringCoercion(value);
-	      }
-	    }
-	    function getTaskName(type) {
-	      if (type === REACT_FRAGMENT_TYPE) return "<>";
-	      if (
-	        "object" === typeof type &&
-	        null !== type &&
-	        type.$$typeof === REACT_LAZY_TYPE
-	      )
-	        return "<...>";
-	      try {
-	        var name = getComponentNameFromType(type);
-	        return name ? "<" + name + ">" : "<...>";
-	      } catch (x) {
-	        return "<...>";
-	      }
-	    }
-	    function getOwner() {
-	      var dispatcher = ReactSharedInternals.A;
-	      return null === dispatcher ? null : dispatcher.getOwner();
-	    }
-	    function UnknownOwner() {
-	      return Error("react-stack-top-frame");
-	    }
-	    function hasValidKey(config) {
-	      if (hasOwnProperty.call(config, "key")) {
-	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-	        if (getter && getter.isReactWarning) return false;
-	      }
-	      return void 0 !== config.key;
-	    }
-	    function defineKeyPropWarningGetter(props, displayName) {
-	      function warnAboutAccessingKey() {
-	        specialPropKeyWarningShown ||
-	          ((specialPropKeyWarningShown = true),
-	          console.error(
-	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-	            displayName
-	          ));
-	      }
-	      warnAboutAccessingKey.isReactWarning = true;
-	      Object.defineProperty(props, "key", {
-	        get: warnAboutAccessingKey,
-	        configurable: true
-	      });
-	    }
-	    function elementRefGetterWithDeprecationWarning() {
-	      var componentName = getComponentNameFromType(this.type);
-	      didWarnAboutElementRef[componentName] ||
-	        ((didWarnAboutElementRef[componentName] = true),
-	        console.error(
-	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-	        ));
-	      componentName = this.props.ref;
-	      return void 0 !== componentName ? componentName : null;
-	    }
-	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
-	      var refProp = props.ref;
-	      type = {
-	        $$typeof: REACT_ELEMENT_TYPE,
-	        type: type,
-	        key: key,
-	        props: props,
-	        _owner: owner
-	      };
-	      null !== (void 0 !== refProp ? refProp : null)
-	        ? Object.defineProperty(type, "ref", {
-	            enumerable: false,
-	            get: elementRefGetterWithDeprecationWarning
-	          })
-	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
-	      type._store = {};
-	      Object.defineProperty(type._store, "validated", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: 0
-	      });
-	      Object.defineProperty(type, "_debugInfo", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: null
-	      });
-	      Object.defineProperty(type, "_debugStack", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugStack
-	      });
-	      Object.defineProperty(type, "_debugTask", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugTask
-	      });
-	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
-	      return type;
-	    }
-	    function jsxDEVImpl(
-	      type,
-	      config,
-	      maybeKey,
-	      isStaticChildren,
-	      debugStack,
-	      debugTask
-	    ) {
-	      var children = config.children;
-	      if (void 0 !== children)
-	        if (isStaticChildren)
-	          if (isArrayImpl(children)) {
-	            for (
-	              isStaticChildren = 0;
-	              isStaticChildren < children.length;
-	              isStaticChildren++
-	            )
-	              validateChildKeys(children[isStaticChildren]);
-	            Object.freeze && Object.freeze(children);
-	          } else
-	            console.error(
-	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-	            );
-	        else validateChildKeys(children);
-	      if (hasOwnProperty.call(config, "key")) {
-	        children = getComponentNameFromType(type);
-	        var keys = Object.keys(config).filter(function (k) {
-	          return "key" !== k;
-	        });
-	        isStaticChildren =
-	          0 < keys.length
-	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
-	            : "{key: someKey}";
-	        didWarnAboutKeySpread[children + isStaticChildren] ||
-	          ((keys =
-	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
-	          console.error(
-	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
-	            isStaticChildren,
-	            children,
-	            keys,
-	            children
-	          ),
-	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
-	      }
-	      children = null;
-	      void 0 !== maybeKey &&
-	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
-	      hasValidKey(config) &&
-	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
-	      if ("key" in config) {
-	        maybeKey = {};
-	        for (var propName in config)
-	          "key" !== propName && (maybeKey[propName] = config[propName]);
-	      } else maybeKey = config;
-	      children &&
-	        defineKeyPropWarningGetter(
-	          maybeKey,
-	          "function" === typeof type
-	            ? type.displayName || type.name || "Unknown"
-	            : type
-	        );
-	      return ReactElement(
-	        type,
-	        children,
-	        maybeKey,
-	        getOwner(),
-	        debugStack,
-	        debugTask
-	      );
-	    }
-	    function validateChildKeys(node) {
-	      isValidElement(node)
-	        ? node._store && (node._store.validated = 1)
-	        : "object" === typeof node &&
-	          null !== node &&
-	          node.$$typeof === REACT_LAZY_TYPE &&
-	          ("fulfilled" === node._payload.status
-	            ? isValidElement(node._payload.value) &&
-	              node._payload.value._store &&
-	              (node._payload.value._store.validated = 1)
-	            : node._store && (node._store.validated = 1));
-	    }
-	    function isValidElement(object) {
-	      return (
-	        "object" === typeof object &&
-	        null !== object &&
-	        object.$$typeof === REACT_ELEMENT_TYPE
-	      );
-	    }
-	    var React = require$$0,
-	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
-	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
-	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
-	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
-	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
-	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
-	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
-	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
-	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
-	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
-	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
-	      ReactSharedInternals =
-	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-	      hasOwnProperty = Object.prototype.hasOwnProperty,
-	      isArrayImpl = Array.isArray,
-	      createTask = console.createTask
-	        ? console.createTask
-	        : function () {
-	            return null;
-	          };
-	    React = {
-	      react_stack_bottom_frame: function (callStackForError) {
-	        return callStackForError();
-	      }
-	    };
-	    var specialPropKeyWarningShown;
-	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
-	      React,
-	      UnknownOwner
-	    )();
-	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-	    var didWarnAboutKeySpread = {};
-	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        false,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        true,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	  })();
-	return reactJsxRuntime_development;
-}
-
-var hasRequiredJsxRuntime;
-
-function requireJsxRuntime () {
-	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
-	hasRequiredJsxRuntime = 1;
-
-	if (process.env.NODE_ENV === 'production') {
-	  jsxRuntime.exports = requireReactJsxRuntime_production();
-	} else {
-	  jsxRuntime.exports = requireReactJsxRuntime_development();
-	}
-	return jsxRuntime.exports;
-}
-
-var jsxRuntimeExports = requireJsxRuntime();
-
 function handleNumoraOnChange(e, options) {
     const { formatted, raw } = handleOnChangeNumoraInput(e.nativeEvent, options.decimalMaxLength, options.caretPositionBeforeChange, options.formattingOptions);
     return {
@@ -455,12 +34,52 @@ function handleNumoraOnBlur(e, options) {
     };
 }
 
+/**
+ * Creates a complete synthetic change event from a real HTMLInputElement.
+ * Used when a change needs to be signalled without an actual DOM change event
+ * (e.g. after paste with preventDefault, or after a controlled-value reformat).
+ */
+function createSyntheticChangeEvent(input) {
+    const nativeEvent = new Event('change', { bubbles: true, cancelable: false });
+    return {
+        nativeEvent,
+        target: input,
+        currentTarget: input,
+        type: 'change',
+        bubbles: true,
+        cancelable: false,
+        defaultPrevented: false,
+        eventPhase: Event.AT_TARGET,
+        isTrusted: false,
+        timeStamp: Date.now(),
+        isDefaultPrevented: () => false,
+        isPropagationStopped: () => false,
+        persist: () => { },
+        preventDefault: () => { },
+        stopPropagation: () => { },
+        stopImmediatePropagation: () => { },
+    };
+}
 const NumoraInput = forwardRef((props, ref) => {
-    const { maxDecimals = 2, onChange, onPaste, onBlur, onKeyDown, onFocus, formatOn = FormatOn.Blur, thousandSeparator = ',', thousandStyle = ThousandStyle.Thousand, decimalSeparator = '.', decimalMinLength, enableCompactNotation = false, enableNegative = false, enableLeadingZeros = false, rawValueMode = false, value: controlledValue, defaultValue, ...rest } = props;
+    const { maxDecimals = 2, onChange, onPaste, onBlur, onKeyDown, onFocus, onRawValueChange, formatOn = FormatOn.Blur, thousandSeparator = ',', thousandStyle = ThousandStyle.Thousand, decimalSeparator = '.', decimalMinLength, enableCompactNotation = false, enableNegative = false, enableLeadingZeros = false, rawValueMode = false, value: controlledValue, defaultValue, ...rest } = props;
+    validateNumoraInputOptions({
+        decimalMaxLength: maxDecimals,
+        decimalMinLength,
+        formatOn,
+        thousandSeparator,
+        thousandStyle,
+        decimalSeparator,
+        enableCompactNotation,
+        enableNegative,
+        enableLeadingZeros,
+        rawValueMode,
+    });
     const internalInputRef = useRef(null);
     const caretInfoRef = useRef(undefined);
     const lastCaretPosRef = useRef(null);
-    const formattingOptions = {
+    // Memoize to give callbacks a stable reference - avoids recreating all
+    // useCallback functions on every render when primitive props haven't changed.
+    const formattingOptions = useMemo(() => ({
         formatOn,
         thousandSeparator,
         ThousandStyle: thousandStyle,
@@ -470,7 +89,8 @@ const NumoraInput = forwardRef((props, ref) => {
         enableNegative,
         enableLeadingZeros,
         rawValueMode,
-    };
+    }), [formatOn, thousandSeparator, thousandStyle, decimalSeparator, decimalMinLength,
+        enableCompactNotation, enableNegative, enableLeadingZeros, rawValueMode]);
     const getInitialValue = () => {
         const valueToFormat = controlledValue !== undefined ? controlledValue : defaultValue;
         if (valueToFormat !== undefined) {
@@ -480,6 +100,11 @@ const NumoraInput = forwardRef((props, ref) => {
         return '';
     };
     const [displayValue, setDisplayValue] = useState(getInitialValue);
+    // Track the current displayValue via a ref so the controlled-value useEffect
+    // can compare against it without adding displayValue as a dependency (which
+    // would cause the effect to re-run on every keystroke).
+    const displayValueRef = useRef(displayValue);
+    displayValueRef.current = displayValue;
     // Sync external ref with internal ref
     useLayoutEffect(() => {
         if (!ref)
@@ -491,18 +116,25 @@ const NumoraInput = forwardRef((props, ref) => {
             ref.current = internalInputRef.current;
         }
     }, [ref]);
-    // When controlled value changes from outside, update display value
+    // When the controlled value or formatting options change, reformat the display.
+    // Uses displayValueRef (not displayValue in deps) to avoid re-running on every keystroke.
+    // Does NOT call onChange - that would create a circular loop with react-hook-form Controller.
     useEffect(() => {
         if (controlledValue !== undefined) {
-            const { formatted } = formatValueForDisplay(String(controlledValue), maxDecimals, formattingOptions);
-            if (formatted !== displayValue) {
+            const { formatted, raw } = formatValueForDisplay(String(controlledValue), maxDecimals, formattingOptions);
+            if (formatted !== displayValueRef.current) {
                 setDisplayValue(formatted);
+                if (internalInputRef.current) {
+                    internalInputRef.current.rawValue = raw;
+                }
+                onRawValueChange?.(raw);
             }
         }
-    }, [controlledValue, maxDecimals, formattingOptions.ThousandStyle, formattingOptions.decimalSeparator, formattingOptions.decimalMinLength,
-        formattingOptions.enableCompactNotation, formattingOptions.enableLeadingZeros, formattingOptions.enableNegative,
-        formattingOptions.formatOn, formattingOptions.rawValueMode, formattingOptions.thousandSeparator]);
-    // Restore cursor position after render
+    }, [controlledValue, maxDecimals, formattingOptions, onRawValueChange]);
+    // Restore cursor position after render.
+    // No dependency array is intentional: this must run after every render so it catches
+    // the re-render triggered by setDisplayValue in handleChange/handlePaste.
+    // lastCaretPosRef is a ref (not reactive), so it cannot be a dependency.
     useLayoutEffect(() => {
         if (internalInputRef.current && lastCaretPosRef.current !== null) {
             const input = internalInputRef.current;
@@ -512,15 +144,11 @@ const NumoraInput = forwardRef((props, ref) => {
         }
     });
     const handleChange = useCallback((e) => {
-        console.log('handleChange', e);
         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) {
@@ -529,16 +157,14 @@ const NumoraInput = forwardRef((props, ref) => {
         }
         caretInfoRef.current = undefined;
         e.target.rawValue = rawValue;
+        onRawValueChange?.(rawValue);
         setDisplayValue(value);
         if (onChange) {
             onChange(e);
         }
-    }, [maxDecimals, formattingOptions, onChange]);
+    }, [maxDecimals, formattingOptions, onChange, onRawValueChange]);
     const handleKeyDown = useCallback((e) => {
-        console.log('handleKeyDown', e);
         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;
@@ -559,45 +185,46 @@ const NumoraInput = forwardRef((props, ref) => {
             decimalMaxLength: maxDecimals,
             formattingOptions,
         });
-        // 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.selectionStart;
         e.target.rawValue = rawValue;
+        onRawValueChange?.(rawValue);
         setDisplayValue(value);
         if (onPaste) {
             onPaste(e);
         }
-        // Trigger onChange manually because paste event doesn't always trigger a ChangeEvent in all React versions
-        // when we preventDefault.
+        // Paste calls e.preventDefault() internally, so React's onChange never fires.
+        // We synthesise a proper change event so consumers see a typed ChangeEvent.
         if (onChange) {
-            const changeEvent = e;
-            onChange(changeEvent);
+            onChange(createSyntheticChangeEvent(e.target));
         }
-    }, [maxDecimals, formattingOptions, onPaste, onChange]);
+    }, [maxDecimals, formattingOptions, onPaste, onChange, onRawValueChange]);
     const handleFocus = useCallback((e) => {
-        console.log('handleFocus', e);
-        if (formattingOptions.formatOn === FormatOn.Blur && formattingOptions.thousandSeparator) {
-            const unformattedValue = removeThousandSeparators(displayValue, formattingOptions.thousandSeparator);
-            setDisplayValue(unformattedValue);
+        if (formattingOptions.formatOn === FormatOn.Blur &&
+            formattingOptions.thousandSeparator &&
+            formattingOptions.ThousandStyle !== ThousandStyle.None) {
+            // Read directly from the DOM element to avoid a stale displayValue closure
+            // and to eliminate displayValue from the deps array (which would recreate
+            // this callback on every keystroke).
+            const currentValue = e.target.value;
+            setDisplayValue(removeThousandSeparators(currentValue, formattingOptions.thousandSeparator));
         }
         if (onFocus) {
             onFocus(e);
         }
-    }, [formattingOptions, onFocus, displayValue]);
+    }, [formattingOptions, onFocus]);
     const handleBlur = useCallback((e) => {
-        console.log('handleBlur', e);
         const { value, rawValue } = handleNumoraOnBlur(e, {
             decimalMaxLength: maxDecimals,
             formattingOptions,
         });
         e.target.rawValue = rawValue;
+        onRawValueChange?.(rawValue);
         setDisplayValue(value);
         if (onBlur) {
             onBlur(e);
         }
-    }, [maxDecimals, formattingOptions, onBlur]);
-    return (jsxRuntimeExports.jsx("input", { ...rest, ref: internalInputRef, value: displayValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: handleFocus, onBlur: handleBlur, type: "text", inputMode: "decimal", spellCheck: false, autoComplete: "off" }));
+    }, [maxDecimals, formattingOptions, onBlur, onRawValueChange]);
+    return (jsx("input", { ...rest, ref: internalInputRef, value: displayValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: handleFocus, onBlur: handleBlur, type: "text", inputMode: "decimal", spellCheck: false, autoComplete: "off" }));
 });
 NumoraInput.displayName = 'NumoraInput';