currency-fomatter 1.3.2 → 1.4.0

package/dist/cjs/components/currency/index.js

@@ -1,144 +1,95 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.unregisterLocale = exports.registerLocale = exports.formatWithIntl = exports.getAutoLocaleConfig = exports.createLocaleConfig = exports.getCompactLabels = exports.detectLocaleFormat = exports.getFormatOptionsFromLocale = exports.getLocaleConfig = exports.localePresets = exports.useCurrencyFormat = exports.defaultCompactDisplay = exports.parseCompact = exports.formatCompact = exports.parseCurrency = exports.formatCurrency = void 0;
 var tslib_1 = require("tslib");
-//@flow
-var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 var react_1 = tslib_1.__importStar(require("react"));
 var utils_1 = require("./utils");
-var propTypes = {
-    thousandSeparator: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.oneOf([true])]),
-    thousandSpacing: prop_types_1.default.oneOf(["2", "2s", "3", "4"]),
-    decimalSeparator: prop_types_1.default.string,
-    decimalScale: prop_types_1.default.number,
-    fixedDecimalScale: prop_types_1.default.bool,
-    displayType: prop_types_1.default.oneOf(["input", "text"]),
-    prefix: prop_types_1.default.string,
-    suffix: prop_types_1.default.string,
-    format: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.func]),
-    removeFormatting: prop_types_1.default.func,
-    mask: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.arrayOf(prop_types_1.default.string)]),
-    value: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
-    isNumericString: prop_types_1.default.bool,
-    customInput: prop_types_1.default.func,
-    allowNegative: prop_types_1.default.bool,
-    onValueChange: prop_types_1.default.func,
-    onKeyDown: prop_types_1.default.func,
-    onMouseUp: prop_types_1.default.func,
-    onChange: prop_types_1.default.func,
-    onFocus: prop_types_1.default.func,
-    onBlur: prop_types_1.default.func,
-    type: prop_types_1.default.oneOf(["text", "tel"]),
-    isAllowed: prop_types_1.default.func,
-    renderText: prop_types_1.default.func,
-    className: prop_types_1.default.string,
-    placeholder: prop_types_1.default.string
-};
-var CurrencyFormat = /** @class */ (function (_super) {
-    tslib_1.__extends(CurrencyFormat, _super);
-    function CurrencyFormat(props) {
-        var _this = _super.call(this, props) || this;
-        //validate props
-        _this.validateProps();
-        var formattedValue = _this.formatValueProp();
-        _this.state = {
-            value: formattedValue,
-            numAsString: _this.removeFormatting(formattedValue),
-        };
-        _this.onChange = _this.onChange.bind(_this);
-        _this.onKeyDown = _this.onKeyDown.bind(_this);
-        _this.onMouseUp = _this.onMouseUp.bind(_this);
-        _this.onFocus = _this.onFocus.bind(_this);
-        _this.onBlur = _this.onBlur.bind(_this);
-        return _this;
-    }
-    CurrencyFormat.prototype.componentDidUpdate = function (prevProps) {
-        this.updateValueIfRequired(prevProps);
-    };
-    CurrencyFormat.prototype.updateValueIfRequired = function (prevProps) {
-        var _a = this, props = _a.props, state = _a.state;
-        if (prevProps !== props) {
-            //validate props
-            this.validateProps();
-            var stateValue = state.value;
-            var lastNumStr = state.numAsString || "";
-            var formattedValue = props.value === undefined ? this.formatNumString(lastNumStr) : this.formatValueProp();
-            if (formattedValue !== stateValue) {
-                this.setState({
-                    value: formattedValue,
-                    numAsString: this.removeFormatting(formattedValue),
-                });
-            }
-        }
-    };
-    /** Misc methods **/
-    CurrencyFormat.prototype.getFloatString = function (num) {
-        if (num === void 0) { num = ""; }
-        var decimalSeparator = this.getSeparators().decimalSeparator;
-        var numRegex = this.getNumberRegex(true);
-        //remove negation for regex check
-        var hasNegation = num[0] === "-";
-        if (hasNegation)
-            num = num.replace("-", "");
-        num = (num.match(numRegex) || []).join("").replace(decimalSeparator, ".");
-        //remove extra decimals
-        var firstDecimalIndex = num.indexOf(".");
-        if (firstDecimalIndex !== -1) {
-            num = "".concat(num.substring(0, firstDecimalIndex), ".").concat(num
-                .substring(firstDecimalIndex + 1, num.length)
-                .replace(new RegExp((0, utils_1.escapeRegExp)(decimalSeparator), "g"), ""));
-        }
-        //add negation back
-        if (hasNegation)
-            num = "-" + num;
-        return num;
-    };
-    //returned regex assumes decimalSeparator is as per prop
-    CurrencyFormat.prototype.getNumberRegex = function (g, ignoreDecimalSeparator) {
-        var _a = this.props, format = _a.format, decimalScale = _a.decimalScale;
-        var decimalSeparator = this.getSeparators().decimalSeparator;
-        return new RegExp("\\d" +
-            (decimalSeparator && decimalScale !== 0 && !ignoreDecimalSeparator && !format
-                ? "|" + (0, utils_1.escapeRegExp)(decimalSeparator)
-                : ""), g ? "g" : undefined);
-    };
-    CurrencyFormat.prototype.getSeparators = function () {
-        var _a = this.props, decimalSeparator = _a.decimalSeparator, _b = _a.thousandSpacing, thousandSpacing = _b === void 0 ? "3" : _b;
-        var thousandSeparator = this.props.thousandSeparator;
-        if (thousandSeparator === true) {
-            thousandSeparator = ",";
+var utils_2 = require("./utils");
+Object.defineProperty(exports, "formatCurrency", { enumerable: true, get: function () { return utils_2.formatCurrency; } });
+Object.defineProperty(exports, "parseCurrency", { enumerable: true, get: function () { return utils_2.parseCurrency; } });
+Object.defineProperty(exports, "formatCompact", { enumerable: true, get: function () { return utils_2.formatCompact; } });
+Object.defineProperty(exports, "parseCompact", { enumerable: true, get: function () { return utils_2.parseCompact; } });
+Object.defineProperty(exports, "defaultCompactDisplay", { enumerable: true, get: function () { return utils_2.defaultCompactDisplay; } });
+// Re-export hooks
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useCurrencyFormat", { enumerable: true, get: function () { return hooks_1.useCurrencyFormat; } });
+// Re-export locales
+var locales_1 = require("./locales");
+Object.defineProperty(exports, "localePresets", { enumerable: true, get: function () { return locales_1.localePresets; } });
+Object.defineProperty(exports, "getLocaleConfig", { enumerable: true, get: function () { return locales_1.getLocaleConfig; } });
+Object.defineProperty(exports, "getFormatOptionsFromLocale", { enumerable: true, get: function () { return locales_1.getFormatOptionsFromLocale; } });
+// Dynamic locale detection
+Object.defineProperty(exports, "detectLocaleFormat", { enumerable: true, get: function () { return locales_1.detectLocaleFormat; } });
+Object.defineProperty(exports, "getCompactLabels", { enumerable: true, get: function () { return locales_1.getCompactLabels; } });
+Object.defineProperty(exports, "createLocaleConfig", { enumerable: true, get: function () { return locales_1.createLocaleConfig; } });
+Object.defineProperty(exports, "getAutoLocaleConfig", { enumerable: true, get: function () { return locales_1.getAutoLocaleConfig; } });
+Object.defineProperty(exports, "formatWithIntl", { enumerable: true, get: function () { return locales_1.formatWithIntl; } });
+// Custom locale registry
+Object.defineProperty(exports, "registerLocale", { enumerable: true, get: function () { return locales_1.registerLocale; } });
+Object.defineProperty(exports, "unregisterLocale", { enumerable: true, get: function () { return locales_1.unregisterLocale; } });
+// Props keys to omit when passing to DOM
+var PROPS_TO_OMIT = [
+    "value",
+    "format",
+    "decimalScale",
+    "decimalSeparator",
+    "thousandSpacing",
+    "thousandSeparator",
+    "mask",
+    "allowNegative",
+    "prefix",
+    "suffix",
+    "removeFormatting",
+    "fixedDecimalScale",
+    "isNumericString",
+    "isAllowed",
+    "onValueChange",
+    "onChange",
+    "onKeyDown",
+    "onMouseUp",
+    "onFocus",
+    "onBlur",
+    "type",
+    "displayType",
+    "customInput",
+    "renderText",
+    "getInputRef",
+];
+var CurrencyFormat = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = props.displayType, displayType = _a === void 0 ? "input" : _a, _b = props.decimalSeparator, decimalSeparator = _b === void 0 ? "." : _b, _c = props.thousandSpacing, thousandSpacing = _c === void 0 ? "3" : _c, _d = props.thousandSeparator, thousandSeparator = _d === void 0 ? "," : _d, _e = props.fixedDecimalScale, fixedDecimalScale = _e === void 0 ? false : _e, _f = props.prefix, prefix = _f === void 0 ? "" : _f, _g = props.suffix, suffix = _g === void 0 ? "" : _g, _h = props.allowNegative, allowNegative = _h === void 0 ? true : _h, _j = props.isNumericString, isNumericStringProp = _j === void 0 ? false : _j, _k = props.type, type = _k === void 0 ? "text" : _k, name = props.name, onValueChange = props.onValueChange, onChangeProp = props.onChange, onKeyDownProp = props.onKeyDown, onMouseUpProp = props.onMouseUp, onFocusProp = props.onFocus, onBlurProp = props.onBlur, isAllowed = props.isAllowed, format = props.format, decimalScale = props.decimalScale, _l = props.mask, mask = _l === void 0 ? " " : _l, removeFormattingProp = props.removeFormatting, valueProp = props.value, customInput = props.customInput, renderText = props.renderText, getInputRef = props.getInputRef, _m = props.className, className = _m === void 0 ? "" : _m, _o = props.placeholder, placeholder = _o === void 0 ? "" : _o, restProps = tslib_1.__rest(props, ["displayType", "decimalSeparator", "thousandSpacing", "thousandSeparator", "fixedDecimalScale", "prefix", "suffix", "allowNegative", "isNumericString", "type", "name", "onValueChange", "onChange", "onKeyDown", "onMouseUp", "onFocus", "onBlur", "isAllowed", "format", "decimalScale", "mask", "removeFormatting", "value", "customInput", "renderText", "getInputRef", "className", "placeholder"]);
+    // Refs
+    var inputRef = (0, react_1.useRef)(null);
+    var prevPropsRef = (0, react_1.useRef)(props);
+    // Forward ref
+    (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
+    // Helper functions using useCallback for memoization
+    var getSeparators = (0, react_1.useCallback)(function () {
+        var separator = thousandSeparator;
+        if (separator === true) {
+            separator = ",";
         }
         return {
             decimalSeparator: decimalSeparator,
-            thousandSeparator: thousandSeparator,
+            thousandSeparator: separator,
             thousandSpacing: thousandSpacing,
         };
-    };
-    CurrencyFormat.prototype.getMaskAtIndex = function (index) {
-        var _a = this.props.mask, mask = _a === void 0 ? " " : _a;
+    }, [decimalSeparator, thousandSeparator, thousandSpacing]);
+    var getMaskAtIndex = (0, react_1.useCallback)(function (index) {
         if (typeof mask === "string") {
             return mask;
         }
         return mask[index] || " ";
-    };
-    CurrencyFormat.prototype.validateProps = function () {
-        var mask = this.props.mask;
-        //validate decimalSeparator and thousandSeparator
-        var _a = this.getSeparators(), decimalSeparator = _a.decimalSeparator, thousandSeparator = _a.thousandSeparator;
-        if (decimalSeparator === thousandSeparator) {
-            throw new Error("\n          Decimal separator can't be same as thousand separator.\n\n          thousandSeparator: ".concat(thousandSeparator, " (thousandSeparator = {true} is same as thousandSeparator = \",\")\n          decimalSeparator: ").concat(decimalSeparator, " (default value for decimalSeparator is .)\n       "));
-        }
-        //validate mask
-        if (mask) {
-            var maskAsStr = mask === "string" ? mask : mask.toString();
-            if (maskAsStr.match(/\d/g)) {
-                throw new Error("\n          Mask ".concat(mask, " should not contain numeric character;\n        "));
-            }
-        }
-    };
-    CurrencyFormat.prototype.splitDecimal = function (numStr) {
-        var allowNegative = this.props.allowNegative;
-        var hasNagation = numStr[0] === "-";
-        var addNegation = hasNagation && allowNegative;
+    }, [mask]);
+    var getNumberRegex = (0, react_1.useCallback)(function (g, ignoreDecimalSeparator) {
+        var decSep = getSeparators().decimalSeparator;
+        return new RegExp("\\d" +
+            (decSep && decimalScale !== 0 && !ignoreDecimalSeparator && !format
+                ? "|" + (0, utils_1.escapeRegExp)(decSep)
+                : ""), g ? "g" : undefined);
+    }, [getSeparators, decimalScale, format]);
+    var splitDecimal = (0, react_1.useCallback)(function (numStr) {
+        var hasNegation = numStr[0] === "-";
+        var addNegation = hasNegation && allowNegative;
         numStr = numStr.replace("-", "");
         var parts = numStr.split(".");
         var beforeDecimal = parts[0];
@@ -146,130 +97,127 @@ var CurrencyFormat = /** @class */ (function (_super) {
         return {
             beforeDecimal: beforeDecimal,
             afterDecimal: afterDecimal,
-            hasNagation: hasNagation,
+            hasNegation: hasNegation,
             addNegation: addNegation,
         };
-    };
-    /** Misc methods end **/
-    /** caret specific methods **/
-    CurrencyFormat.prototype.setPatchedCaretPosition = function (el, caretPos, currentValue) {
-        /* setting caret position within timeout of 0ms is required for mobile chrome,
-    otherwise browser resets the caret position after we set it
-    We are also setting it without timeout so that in normal browser we don't see the flickering */
-        (0, utils_1.setCaretPosition)(el, caretPos);
-        setTimeout(function () {
-            if (el.value === currentValue)
-                (0, utils_1.setCaretPosition)(el, caretPos);
-        }, 0);
-    };
-    /* This keeps the caret within typing area so people can't type in between prefix or suffix */
-    CurrencyFormat.prototype.correctCaretPosition = function (value, caretPos, direction) {
-        var _a = this.props, prefix = _a.prefix, suffix = _a.suffix, format = _a.format;
-        //in case of format as number limit between prefix and suffix
-        if (!format) {
-            var hasNegation = value[0] === "-";
-            return Math.min(Math.max(caretPos, prefix.length + (hasNegation ? 1 : 0)), value.length - suffix.length);
+    }, [allowNegative]);
+    var getFloatString = (0, react_1.useCallback)(function (num) {
+        if (num === void 0) { num = ""; }
+        var decSep = getSeparators().decimalSeparator;
+        var numRegex = getNumberRegex(true);
+        // Remove negation for regex check
+        var hasNegation = num[0] === "-";
+        if (hasNegation)
+            num = num.replace("-", "");
+        num = (num.match(numRegex) || []).join("").replace(decSep, ".");
+        // Remove extra decimals
+        var firstDecimalIndex = num.indexOf(".");
+        if (firstDecimalIndex !== -1) {
+            num = "".concat(num.substring(0, firstDecimalIndex), ".").concat(num
+                .substring(firstDecimalIndex + 1, num.length)
+                .replace(new RegExp((0, utils_1.escapeRegExp)(decSep), "g"), ""));
         }
-        //in case if custom format method don't do anything
-        if (typeof format === "function")
-            return caretPos;
-        /* in case format is string find the closest # position from the caret position */
-        //in case the caretPos have input value on it don't do anything
-        if (format[caretPos] === "#" && (0, utils_1.charIsNumber)(value[caretPos]))
-            return caretPos;
-        //if caretPos is just after input value don't do anything
-        if (format[caretPos - 1] === "#" && (0, utils_1.charIsNumber)(value[caretPos - 1]))
-            return caretPos;
-        //find the nearest caret position
-        var firstHashPosition = format.indexOf("#");
-        var lastHashPosition = format.lastIndexOf("#");
-        //limit the cursor between the first # position and the last # position
-        caretPos = Math.min(Math.max(caretPos, firstHashPosition), lastHashPosition + 1);
-        var nextPos = format.substring(caretPos, format.length).indexOf("#");
-        var caretLeftBound = caretPos;
-        var caretRightBoud = caretPos + (nextPos === -1 ? 0 : nextPos);
-        //get the position where the last number is present
-        while (caretLeftBound > firstHashPosition &&
-            (format[caretLeftBound] !== "#" || !(0, utils_1.charIsNumber)(value[caretLeftBound]))) {
-            caretLeftBound -= 1;
-        }
-        var goToLeft = !(0, utils_1.charIsNumber)(value[caretRightBoud]) ||
-            (direction === "left" && caretPos !== firstHashPosition) ||
-            caretPos - caretLeftBound < caretRightBoud - caretPos;
-        return goToLeft ? caretLeftBound + 1 : caretRightBoud;
-    };
-    CurrencyFormat.prototype.getCaretPosition = function (inputValue, formattedValue, caretPos) {
-        var format = this.props.format;
-        var stateValue = this.state.value;
-        var numRegex = this.getNumberRegex(true);
-        var inputNumber = (inputValue.match(numRegex) || []).join("");
-        var formattedNumber = (formattedValue.match(numRegex) || []).join("");
-        var j, i;
-        j = 0;
-        for (i = 0; i < caretPos; i++) {
-            var currentInputChar = inputValue[i] || "";
-            var currentFormatChar = formattedValue[j] || "";
-            //no need to increase new cursor position if formatted value does not have those characters
-            //case inputValue = 1a23 and formattedValue =  123
-            if (!currentInputChar.match(numRegex) && currentInputChar !== currentFormatChar)
-                continue;
-            //When we are striping out leading zeros maintain the new cursor position
-            //Case inputValue = 00023 and formattedValue = 23;
-            if (currentInputChar === "0" &&
-                currentFormatChar.match(numRegex) &&
-                currentFormatChar !== "0" &&
-                inputNumber.length !== formattedNumber.length)
-                continue;
-            //we are not using currentFormatChar because j can change here
-            while (currentInputChar !== formattedValue[j] && j < formattedValue.length)
-                j++;
-            j++;
+        // Add negation back
+        if (hasNegation)
+            num = "-" + num;
+        return num;
+    }, [getSeparators, getNumberRegex]);
+    var formatThousand = (0, react_1.useCallback)(function (beforeDecimal, separator, spacing) {
+        if (spacing === void 0) { spacing = "3"; }
+        var digitalGroup;
+        switch (spacing) {
+            case utils_1.thousandGroupSpacing.two:
+                digitalGroup = /(\d)(?=(\d{2})+(?!\d))/g;
+                break;
+            case utils_1.thousandGroupSpacing.twoScaled:
+                digitalGroup = /(\d)(?=(((\d{2})+)(\d{1})(?!\d)))/g;
+                break;
+            case utils_1.thousandGroupSpacing.four:
+                digitalGroup = /(\d)(?=(\d{4})+(?!\d))/g;
+                break;
+            default:
+                digitalGroup = /(\d)(?=(\d{3})+(?!\d))/g;
         }
-        if (typeof format === "string" && !stateValue) {
-            //set it to the maximum value so it goes after the last number
-            j = formattedValue.length;
+        return beforeDecimal.replace(digitalGroup, "$1" + separator);
+    }, []);
+    var formatWithPattern = (0, react_1.useCallback)(function (numStr) {
+        if (typeof format !== "string")
+            return numStr;
+        var hashCount = 0;
+        var formattedNumberAry = format.split("");
+        for (var i = 0, ln = format.length; i < ln; i++) {
+            if (format[i] === "#") {
+                formattedNumberAry[i] =
+                    numStr[hashCount] || getMaskAtIndex(hashCount);
+                hashCount += 1;
+            }
         }
-        //correct caret position if its outside of editable area
-        j = this.correctCaretPosition(formattedValue, j);
-        return j;
-    };
-    /** caret specific methods ends **/
-    /** methods to remove formattting **/
-    CurrencyFormat.prototype.removePrefixAndSuffix = function (val) {
-        var _a = this.props, format = _a.format, prefix = _a.prefix, suffix = _a.suffix;
-        //remove prefix and suffix
+        return formattedNumberAry.join("");
+    }, [format, getMaskAtIndex]);
+    var formatAsNumber = (0, react_1.useCallback)(function (numStr) {
+        var _a = getSeparators(), tSep = _a.thousandSeparator, decSep = _a.decimalSeparator, tSpacing = _a.thousandSpacing;
+        var hasDecimalSeparator = numStr.indexOf(".") !== -1 || (decimalScale && fixedDecimalScale);
+        var _b = splitDecimal(numStr), beforeDecimal = _b.beforeDecimal, afterDecimal = _b.afterDecimal;
+        var addNegation = splitDecimal(numStr).addNegation;
+        // Apply decimal precision if defined
+        if (decimalScale !== undefined) {
+            afterDecimal = (0, utils_1.limitToScale)(afterDecimal, decimalScale, fixedDecimalScale);
+        }
+        if (tSep) {
+            beforeDecimal = formatThousand(beforeDecimal, tSep, tSpacing);
+        }
+        // Add prefix and suffix
+        if (prefix)
+            beforeDecimal = prefix + beforeDecimal;
+        if (suffix)
+            afterDecimal = afterDecimal + suffix;
+        // Restore negation sign
+        if (addNegation)
+            beforeDecimal = "-" + beforeDecimal;
+        return (beforeDecimal + ((hasDecimalSeparator && decSep) || "") + afterDecimal);
+    }, [
+        getSeparators,
+        decimalScale,
+        fixedDecimalScale,
+        splitDecimal,
+        formatThousand,
+        prefix,
+        suffix,
+    ]);
+    var removePrefixAndSuffix = (0, react_1.useCallback)(function (val) {
         if (!format && val) {
             var isNegative = val[0] === "-";
-            //remove negation sign
+            // Remove negation sign
             if (isNegative)
                 val = val.substring(1, val.length);
-            //remove prefix
-            val = prefix && val.indexOf(prefix) === 0 ? val.substring(prefix.length, val.length) : val;
-            //remove suffix
+            // Remove prefix
+            val =
+                prefix && val.indexOf(prefix) === 0
+                    ? val.substring(prefix.length, val.length)
+                    : val;
+            // Remove suffix
             var suffixLastIndex = val.lastIndexOf(suffix);
             val =
-                suffix && suffixLastIndex !== -1 && suffixLastIndex === val.length - suffix.length
+                suffix &&
+                    suffixLastIndex !== -1 &&
+                    suffixLastIndex === val.length - suffix.length
                     ? val.substring(0, suffixLastIndex)
                     : val;
-            //add negation sign back
+            // Add negation sign back
             if (isNegative)
                 val = "-" + val;
         }
         return val;
-    };
-    CurrencyFormat.prototype.removePatternFormatting = function (val) {
-        var format = this.props.format;
+    }, [format, prefix, suffix]);
+    var removePatternFormatting = (0, react_1.useCallback)(function (val) {
+        if (typeof format !== "string")
+            return val;
         var formatArray = format.split("#").filter(function (str) { return str !== ""; });
         var start = 0;
         var numStr = "";
         for (var i = 0, ln = formatArray.length; i <= ln; i++) {
             var part = formatArray[i] || "";
-            //if i is the last fragment take the index of end of the value
-            //For case like +1 (911) 911 91 91 having pattern +1 (###) ### ## ##
             var index = i === ln ? val.length : val.indexOf(part, start);
-            /* in any case if we don't find the pattern part in the value assume the val as numeric string
-      This will be also in case if user has started typing, in any other case it will not be -1
-      unless wrong prop value is provided */
             if (index === -1) {
                 numStr = val;
                 break;
@@ -280,194 +228,212 @@ var CurrencyFormat = /** @class */ (function (_super) {
             }
         }
         return (numStr.match(/\d/g) || []).join("");
-    };
-    CurrencyFormat.prototype.removeFormatting = function (val) {
-        var _a = this.props, format = _a.format, removeFormatting = _a.removeFormatting;
+    }, [format]);
+    var removeFormatting = (0, react_1.useCallback)(function (val) {
         if (!val)
             return val;
         if (!format) {
-            val = this.removePrefixAndSuffix(val);
-            val = this.getFloatString(val);
+            val = removePrefixAndSuffix(val);
+            val = getFloatString(val);
         }
         else if (typeof format === "string") {
-            val = this.removePatternFormatting(val);
+            val = removePatternFormatting(val);
         }
-        else if (typeof removeFormatting === "function") {
-            //condition need to be handled if format method is provide,
-            val = removeFormatting(val);
+        else if (typeof removeFormattingProp === "function") {
+            val = removeFormattingProp(val);
         }
         else {
             val = (val.match(/\d/g) || []).join("");
         }
         return val;
-    };
-    /** methods to remove formattting end **/
-    /*** format specific methods start ***/
-    /**
-     * Format when # based string is provided
-     * @param  {string} numStr Numeric String
-     * @return {string}        formatted Value
-     */
-    CurrencyFormat.prototype.formatWithPattern = function (numStr) {
-        var format = this.props.format;
-        var hashCount = 0;
-        var formattedNumberAry = format.split("");
-        for (var i = 0, ln = format.length; i < ln; i++) {
-            if (format[i] === "#") {
-                formattedNumberAry[i] = numStr[hashCount] || this.getMaskAtIndex(hashCount);
-                hashCount += 1;
-            }
-        }
-        return formattedNumberAry.join("");
-    };
-    /**
-     * Format the given string according to thousand separator and thousand spacing
-     * @param {*} beforeDecimal
-     * @param {*} thousandSeparator
-     * @param {*} thousandSpacing
-     */
-    CurrencyFormat.prototype.formatThousand = function (beforeDecimal, thousandSeparator, thousandSpacing) {
-        if (thousandSpacing === void 0) { thousandSpacing = "3"; }
-        var digitalGroup;
-        switch (thousandSpacing) {
-            case utils_1.thousandGroupSpacing.two:
-                digitalGroup = /(\d)(?=(\d{2})+(?!\d))/g;
-                break;
-            case utils_1.thousandGroupSpacing.twoScaled:
-                digitalGroup = /(\d)(?=(((\d{2})+)(\d{1})(?!\d)))/g;
-                break;
-            case utils_1.thousandGroupSpacing.four:
-                digitalGroup = /(\d)(?=(\d{4})+(?!\d))/g;
-                break;
-            default:
-                digitalGroup = /(\d)(?=(\d{3})+(?!\d))/g;
-        }
-        return beforeDecimal.replace(digitalGroup, "$1" + thousandSeparator);
-    };
-    /**
-     * @param  {string} numStr Numeric string/floatString] It always have decimalSeparator as .
-     * @return {string} formatted Value
-     */
-    CurrencyFormat.prototype.formatAsNumber = function (numStr) {
-        var _a = this.props, decimalScale = _a.decimalScale, fixedDecimalScale = _a.fixedDecimalScale, prefix = _a.prefix, suffix = _a.suffix;
-        var _b = this.getSeparators(), thousandSeparator = _b.thousandSeparator, decimalSeparator = _b.decimalSeparator, _c = _b.thousandSpacing, thousandSpacing = _c === void 0 ? "3" : _c;
-        var hasDecimalSeparator = numStr.indexOf(".") !== -1 || (decimalScale && fixedDecimalScale);
-        var _d = this.splitDecimal(numStr), beforeDecimal = _d.beforeDecimal, afterDecimal = _d.afterDecimal, addNegation = _d.addNegation; // eslint-disable-line prefer-const
-        //apply decimal precision if its defined
-        if (decimalScale !== undefined)
-            afterDecimal = (0, utils_1.limitToScale)(afterDecimal, decimalScale, fixedDecimalScale);
-        if (thousandSeparator) {
-            beforeDecimal = this.formatThousand(beforeDecimal, thousandSeparator, thousandSpacing);
-        }
-        //add prefix and suffix
-        if (prefix)
-            beforeDecimal = prefix + beforeDecimal;
-        if (suffix)
-            afterDecimal = afterDecimal + suffix;
-        //restore negation sign
-        if (addNegation)
-            beforeDecimal = "-" + beforeDecimal;
-        numStr = beforeDecimal + ((hasDecimalSeparator && decimalSeparator) || "") + afterDecimal;
-        return numStr;
-    };
-    CurrencyFormat.prototype.formatNumString = function (value) {
+    }, [
+        format,
+        removePrefixAndSuffix,
+        getFloatString,
+        removePatternFormatting,
+        removeFormattingProp,
+    ]);
+    var formatNumString = (0, react_1.useCallback)(function (value) {
         if (value === void 0) { value = ""; }
-        var format = this.props.format;
         var formattedValue = value;
         if (value === "") {
             formattedValue = "";
         }
         else if (value === "-" && !format) {
             formattedValue = "-";
-            value = "";
         }
         else if (typeof format === "string") {
-            formattedValue = this.formatWithPattern(formattedValue);
+            formattedValue = formatWithPattern(formattedValue);
         }
         else if (typeof format === "function") {
             formattedValue = format(formattedValue);
         }
         else {
-            formattedValue = this.formatAsNumber(formattedValue);
+            formattedValue = formatAsNumber(formattedValue);
         }
         return formattedValue;
-    };
-    CurrencyFormat.prototype.formatValueProp = function () {
-        var _a = this.props, format = _a.format, decimalScale = _a.decimalScale, fixedDecimalScale = _a.fixedDecimalScale;
-        var _b = this.props, value = _b.value, isNumericString = _b.isNumericString;
-        // if value is not defined return empty string
+    }, [format, formatWithPattern, formatAsNumber]);
+    var formatNegation = (0, react_1.useCallback)(function (value) {
+        if (value === void 0) { value = ""; }
+        var negationRegex = new RegExp("(-)");
+        var doubleNegationRegex = new RegExp("(-)(.)*(-)");
+        var hasNegation = negationRegex.test(value);
+        var removeNegationFlag = doubleNegationRegex.test(value);
+        value = value.replace(/-/g, "");
+        if (hasNegation && !removeNegationFlag && allowNegative) {
+            value = "-" + value;
+        }
+        return value;
+    }, [allowNegative]);
+    var formatInput = (0, react_1.useCallback)(function (value) {
+        if (value === void 0) { value = ""; }
+        if (!format) {
+            value = formatNegation(value);
+        }
+        value = removeFormatting(value);
+        return formatNumString(value);
+    }, [format, formatNegation, removeFormatting, formatNumString]);
+    var formatValueProp = (0, react_1.useCallback)(function () {
+        var value = valueProp;
+        var isNumericString = isNumericStringProp;
         if (value === undefined)
             return "";
         if (typeof value === "number") {
             value = value.toString();
             isNumericString = true;
         }
-        //round the number based on decimalScale
-        //format only if non formatted value is provided
         if (isNumericString && !format && typeof decimalScale === "number") {
             value = (0, utils_1.roundToPrecision)(value, decimalScale, fixedDecimalScale);
         }
-        var formattedValue = isNumericString ? this.formatNumString(value) : this.formatInput(value);
-        return formattedValue;
-    };
-    CurrencyFormat.prototype.formatNegation = function (value) {
-        if (value === void 0) { value = ""; }
-        var allowNegative = this.props.allowNegative;
-        var negationRegex = new RegExp("(-)");
-        var doubleNegationRegex = new RegExp("(-)(.)*(-)");
-        // Check number has '-' value
-        var hasNegation = negationRegex.test(value);
-        // Check number has 2 or more '-' values
-        var removeNegation = doubleNegationRegex.test(value);
-        //remove negation
-        value = value.replace(/-/g, "");
-        if (hasNegation && !removeNegation && allowNegative) {
-            value = "-" + value;
+        return isNumericString
+            ? formatNumString(value)
+            : formatInput(value);
+    }, [
+        valueProp,
+        isNumericStringProp,
+        format,
+        decimalScale,
+        fixedDecimalScale,
+        formatNumString,
+        formatInput,
+    ]);
+    // Validate props
+    var validateProps = (0, react_1.useCallback)(function () {
+        var _a = getSeparators(), decSep = _a.decimalSeparator, tSep = _a.thousandSeparator;
+        if (decSep === tSep) {
+            throw new Error("\n        Decimal separator can't be same as thousand separator.\n        thousandSeparator: ".concat(tSep, " (thousandSeparator = {true} is same as thousandSeparator = \",\")\n        decimalSeparator: ").concat(decSep, " (default value for decimalSeparator is .)\n      "));
         }
-        return value;
-    };
-    CurrencyFormat.prototype.formatInput = function (value) {
-        if (value === void 0) { value = ""; }
-        var format = this.props.format;
-        //format negation only if we are formatting as number
+        if (mask) {
+            var maskAsStr = typeof mask === "string" ? mask : mask.toString();
+            if (maskAsStr.match(/\d/g)) {
+                throw new Error("Mask ".concat(mask, " should not contain numeric character;"));
+            }
+        }
+    }, [getSeparators, mask]);
+    // Initial state calculation
+    var getInitialState = (0, react_1.useCallback)(function () {
+        var formattedValue = formatValueProp();
+        return {
+            value: formattedValue,
+            numAsString: removeFormatting(formattedValue),
+        };
+    }, [formatValueProp, removeFormatting]);
+    // State
+    var _p = (0, react_1.useState)(function () {
+        validateProps();
+        return getInitialState();
+    }), state = _p[0], setState = _p[1];
+    // Caret position helpers
+    var setPatchedCaretPosition = (0, react_1.useCallback)(function (el, caretPos, currentValue) {
+        (0, utils_1.setCaretPosition)(el, caretPos);
+        setTimeout(function () {
+            if (el.value === currentValue)
+                (0, utils_1.setCaretPosition)(el, caretPos);
+        }, 0);
+    }, []);
+    var correctCaretPosition = (0, react_1.useCallback)(function (value, caretPos, direction) {
         if (!format) {
-            value = this.formatNegation(value);
-        }
-        //remove formatting from number
-        value = this.removeFormatting(value);
-        return this.formatNumString(value);
-    };
-    /*** format specific methods end ***/
-    CurrencyFormat.prototype.isCharacterAFormat = function (caretPos, value) {
-        var _a = this.props, format = _a.format, prefix = _a.prefix, suffix = _a.suffix, decimalScale = _a.decimalScale, fixedDecimalScale = _a.fixedDecimalScale;
-        var decimalSeparator = this.getSeparators().decimalSeparator;
-        //check within format pattern
+            var hasNegation = value[0] === "-";
+            return Math.min(Math.max(caretPos, prefix.length + (hasNegation ? 1 : 0)), value.length - suffix.length);
+        }
+        if (typeof format === "function")
+            return caretPos;
+        if (typeof format === "string") {
+            if (format[caretPos] === "#" && (0, utils_1.charIsNumber)(value[caretPos])) {
+                return caretPos;
+            }
+            if (format[caretPos - 1] === "#" && (0, utils_1.charIsNumber)(value[caretPos - 1])) {
+                return caretPos;
+            }
+            var firstHashPosition = format.indexOf("#");
+            var lastHashPosition = format.lastIndexOf("#");
+            caretPos = Math.min(Math.max(caretPos, firstHashPosition), lastHashPosition + 1);
+            var nextPos = format.substring(caretPos, format.length).indexOf("#");
+            var caretLeftBound = caretPos;
+            var caretRightBound = caretPos + (nextPos === -1 ? 0 : nextPos);
+            while (caretLeftBound > firstHashPosition &&
+                (format[caretLeftBound] !== "#" ||
+                    !(0, utils_1.charIsNumber)(value[caretLeftBound]))) {
+                caretLeftBound -= 1;
+            }
+            var goToLeft = !(0, utils_1.charIsNumber)(value[caretRightBound]) ||
+                (direction === "left" && caretPos !== firstHashPosition) ||
+                caretPos - caretLeftBound < caretRightBound - caretPos;
+            return goToLeft ? caretLeftBound + 1 : caretRightBound;
+        }
+        return caretPos;
+    }, [format, prefix, suffix]);
+    var getCaretPosition = (0, react_1.useCallback)(function (inputValue, formattedValue, caretPos) {
+        var numRegex = getNumberRegex(true);
+        var inputNumber = (inputValue.match(numRegex) || []).join("");
+        var formattedNumber = (formattedValue.match(numRegex) || []).join("");
+        var j = 0;
+        for (var i = 0; i < caretPos; i++) {
+            var currentInputChar = inputValue[i] || "";
+            var currentFormatChar = formattedValue[j] || "";
+            if (!currentInputChar.match(numRegex) &&
+                currentInputChar !== currentFormatChar) {
+                continue;
+            }
+            if (currentInputChar === "0" &&
+                currentFormatChar.match(numRegex) &&
+                currentFormatChar !== "0" &&
+                inputNumber.length !== formattedNumber.length) {
+                continue;
+            }
+            while (currentInputChar !== formattedValue[j] &&
+                j < formattedValue.length) {
+                j++;
+            }
+            j++;
+        }
+        if (typeof format === "string" && !state.value) {
+            j = formattedValue.length;
+        }
+        j = correctCaretPosition(formattedValue, j);
+        return j;
+    }, [getNumberRegex, format, state.value, correctCaretPosition]);
+    var isCharacterAFormat = (0, react_1.useCallback)(function (caretPos, value) {
+        var decSep = getSeparators().decimalSeparator;
         if (typeof format === "string" && format[caretPos] !== "#")
             return true;
-        //check in number format
         if (!format &&
             (caretPos < prefix.length ||
                 caretPos >= value.length - suffix.length ||
-                (decimalScale && fixedDecimalScale && value[caretPos] === decimalSeparator))) {
+                (decimalScale && fixedDecimalScale && value[caretPos] === decSep))) {
             return true;
         }
         return false;
-    };
-    CurrencyFormat.prototype.checkIfFormatGotDeleted = function (start, end, value) {
+    }, [format, prefix, suffix, decimalScale, fixedDecimalScale, getSeparators]);
+    var checkIfFormatGotDeleted = (0, react_1.useCallback)(function (start, end, value) {
         for (var i = start; i < end; i++) {
-            if (this.isCharacterAFormat(i, value))
+            if (isCharacterAFormat(i, value))
                 return true;
         }
         return false;
-    };
-    /**
-     * This will check if any formatting got removed by the delete or backspace and reset the value
-     * It will also work as fallback if android chome keyDown handler does not work
-     **/
-    CurrencyFormat.prototype.correctInputValue = function (caretPos, lastValue, value) {
-        var format = this.props.format;
-        var lastNumStr = this.state.numAsString || "";
-        //don't do anyhting if something got added, or if value is empty string (when whole input is cleared)
+    }, [isCharacterAFormat]);
+    var correctInputValue = (0, react_1.useCallback)(function (caretPos, lastValue, value) {
+        var lastNumStr = state.numAsString || "";
         if (value.length >= lastValue.length || !value.length) {
             return value;
         }
@@ -477,219 +443,257 @@ var CurrencyFormat = /** @class */ (function (_super) {
         var deletedIndex = lastValueParts[1].lastIndexOf(newValueParts[1]);
         var diff = deletedIndex !== -1 ? lastValueParts[1].substring(0, deletedIndex) : "";
         var end = start + diff.length;
-        //if format got deleted reset the value to last value
-        if (this.checkIfFormatGotDeleted(start, end, lastValue)) {
+        if (checkIfFormatGotDeleted(start, end, lastValue)) {
             value = lastValue;
         }
-        //for numbers check if beforeDecimal got deleted and there is nothing after decimal,
-        //clear all numbers in such case while keeping the - sign
         if (!format) {
-            var numericString = this.removeFormatting(value);
-            var _a = this.splitDecimal(numericString), beforeDecimal = _a.beforeDecimal, afterDecimal = _a.afterDecimal, addNegation = _a.addNegation; // eslint-disable-line prefer-const
-            //clear only if something got deleted
-            if (numericString.length < lastNumStr.length && beforeDecimal === "" && !parseFloat(afterDecimal)) {
+            var numericString = removeFormatting(value);
+            var _a = splitDecimal(numericString), beforeDecimal = _a.beforeDecimal, afterDecimal = _a.afterDecimal, addNegation = _a.addNegation;
+            if (numericString.length < lastNumStr.length &&
+                beforeDecimal === "" &&
+                !parseFloat(afterDecimal)) {
                 return addNegation ? "-" : "";
             }
         }
         return value;
-    };
-    CurrencyFormat.prototype.onChange = function (e) {
-        e.persist();
+    }, [
+        state.numAsString,
+        format,
+        checkIfFormatGotDeleted,
+        removeFormatting,
+        splitDecimal,
+    ]);
+    // Event handlers
+    var handleChange = (0, react_1.useCallback)(function (e) {
         var el = e.target;
         var inputValue = el.value;
-        var _a = this, state = _a.state, props = _a.props;
-        var isAllowed = props.isAllowed;
         var lastValue = state.value || "";
-        /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
-        var currentCaretPosition = Math.max(el.selectionStart, el.selectionEnd);
-        inputValue = this.correctInputValue(currentCaretPosition, lastValue, inputValue);
-        var formattedValue = this.formatInput(inputValue) || "";
-        var numAsString = this.removeFormatting(formattedValue);
+        var currentCaretPosition = Math.max(el.selectionStart || 0, el.selectionEnd || 0);
+        inputValue = correctInputValue(currentCaretPosition, lastValue, inputValue);
+        var formattedValue = formatInput(inputValue) || "";
+        var numAsString = removeFormatting(formattedValue);
         var valueObj = {
             formattedValue: formattedValue,
             value: numAsString,
             floatValue: parseFloat(numAsString),
+            name: name,
         };
-        if (!isAllowed(valueObj)) {
+        if (isAllowed && !isAllowed(valueObj)) {
             formattedValue = lastValue;
         }
-        //set the value imperatively, this is required for IE fix
         el.value = formattedValue;
-        //get the caret position
-        var caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition);
-        //set caret position
-        this.setPatchedCaretPosition(el, caretPos, formattedValue);
-        //change the state
+        var caretPos = getCaretPosition(inputValue, formattedValue, currentCaretPosition);
+        setPatchedCaretPosition(el, caretPos, formattedValue);
         if (formattedValue !== lastValue) {
-            this.setState({ value: formattedValue, numAsString: numAsString }, function () {
-                props.onValueChange(valueObj);
-                props.onChange(e);
-            });
+            setState({ value: formattedValue, numAsString: numAsString });
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(valueObj, { event: e, source: "event" });
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
         }
         else {
-            props.onChange(e);
-        }
-    };
-    CurrencyFormat.prototype.onBlur = function (e) {
-        var _a = this, props = _a.props, state = _a.state;
-        var format = props.format, onBlur = props.onBlur;
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
+        }
+    }, [
+        state.value,
+        correctInputValue,
+        formatInput,
+        removeFormatting,
+        isAllowed,
+        getCaretPosition,
+        setPatchedCaretPosition,
+        onValueChange,
+        onChangeProp,
+        name,
+    ]);
+    var handleBlur = (0, react_1.useCallback)(function (e) {
         var numAsString = state.numAsString;
         var lastValue = state.value;
         if (!format) {
-            numAsString = (0, utils_1.fixLeadingZero)(numAsString);
-            var formattedValue = this.formatNumString(numAsString);
-            var valueObj_1 = {
+            numAsString = (0, utils_1.fixLeadingZero)(numAsString) || "";
+            var formattedValue = formatNumString(numAsString);
+            var valueObj = {
                 formattedValue: formattedValue,
                 value: numAsString,
                 floatValue: parseFloat(numAsString),
+                name: name,
             };
-            //change the state
             if (formattedValue !== lastValue) {
-                // the event needs to be persisted because its properties can be accessed in an asynchronous way
-                e.persist();
-                this.setState({ value: formattedValue, numAsString: numAsString }, function () {
-                    props.onValueChange(valueObj_1);
-                    onBlur(e);
-                });
+                setState({ value: formattedValue, numAsString: numAsString });
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(valueObj, { source: "event" });
+                onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(e);
                 return;
             }
         }
-        onBlur(e);
-    };
-    CurrencyFormat.prototype.onKeyDown = function (e) {
+        onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(e);
+    }, [state, format, formatNumString, onValueChange, onBlurProp, name]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
         var el = e.target;
         var key = e.key;
-        var selectionEnd = el.selectionEnd, value = el.value;
-        var selectionStart = el.selectionStart;
+        var selectionEnd = el.selectionEnd, value = el.value, selectionStart = el.selectionStart;
         var expectedCaretPosition;
-        var _a = this.props, decimalScale = _a.decimalScale, fixedDecimalScale = _a.fixedDecimalScale, prefix = _a.prefix, suffix = _a.suffix, format = _a.format, onKeyDown = _a.onKeyDown;
         var ignoreDecimalSeparator = decimalScale !== undefined && fixedDecimalScale;
-        var numRegex = this.getNumberRegex(false, ignoreDecimalSeparator);
+        var numRegex = getNumberRegex(false, ignoreDecimalSeparator);
         var negativeRegex = new RegExp("-");
         var isPatternFormat = typeof format === "string";
-        //Handle backspace and delete against non numerical/decimal characters or arrow keys
         if (key === "ArrowLeft" || key === "Backspace") {
-            expectedCaretPosition = selectionStart - 1;
+            expectedCaretPosition = (selectionStart || 0) - 1;
         }
         else if (key === "ArrowRight") {
-            expectedCaretPosition = selectionStart + 1;
+            expectedCaretPosition = (selectionStart || 0) + 1;
         }
         else if (key === "Delete") {
-            expectedCaretPosition = selectionStart;
+            expectedCaretPosition = selectionStart || 0;
         }
-        //if expectedCaretPosition is not set it means we don't want to Handle keyDown
-        //also if multiple characters are selected don't handle
-        if (expectedCaretPosition === undefined || selectionStart !== selectionEnd) {
-            onKeyDown(e);
+        if (expectedCaretPosition === undefined ||
+            selectionStart !== selectionEnd) {
+            onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
             return;
         }
         var newCaretPosition = expectedCaretPosition;
-        var leftBound = isPatternFormat ? format.indexOf("#") : prefix.length;
-        var rightBound = isPatternFormat ? format.lastIndexOf("#") + 1 : value.length - suffix.length;
+        var leftBound = isPatternFormat
+            ? format.indexOf("#")
+            : prefix.length;
+        var rightBound = isPatternFormat
+            ? format.lastIndexOf("#") + 1
+            : value.length - suffix.length;
         if (key === "ArrowLeft" || key === "ArrowRight") {
             var direction = key === "ArrowLeft" ? "left" : "right";
-            newCaretPosition = this.correctCaretPosition(value, expectedCaretPosition, direction);
+            newCaretPosition = correctCaretPosition(value, expectedCaretPosition, direction);
         }
         else if (key === "Delete" &&
             !numRegex.test(value[expectedCaretPosition]) &&
             !negativeRegex.test(value[expectedCaretPosition])) {
-            while (!numRegex.test(value[newCaretPosition]) && newCaretPosition < rightBound)
+            while (!numRegex.test(value[newCaretPosition]) &&
+                newCaretPosition < rightBound) {
                 newCaretPosition++;
+            }
         }
         else if (key === "Backspace" &&
             !numRegex.test(value[expectedCaretPosition]) &&
             !negativeRegex.test(value[expectedCaretPosition])) {
-            while (!numRegex.test(value[newCaretPosition - 1]) && newCaretPosition > leftBound) {
+            while (!numRegex.test(value[newCaretPosition - 1]) &&
+                newCaretPosition > leftBound) {
                 newCaretPosition--;
             }
-            newCaretPosition = this.correctCaretPosition(value, newCaretPosition, "left");
+            newCaretPosition = correctCaretPosition(value, newCaretPosition, "left");
         }
         if (newCaretPosition !== expectedCaretPosition ||
             expectedCaretPosition < leftBound ||
             expectedCaretPosition > rightBound) {
             e.preventDefault();
-            this.setPatchedCaretPosition(el, newCaretPosition, value);
-        }
-        /* NOTE: this is just required for unit test as we need to get the newCaretPosition,
-            Remove this when you find different solution */
-        if (e.isUnitTestRun) {
-            this.setPatchedCaretPosition(el, newCaretPosition, value);
-        }
-        this.props.onKeyDown(e);
-    };
-    /** required to handle the caret position when click anywhere within the input **/
-    CurrencyFormat.prototype.onMouseUp = function (e) {
+            setPatchedCaretPosition(el, newCaretPosition, value);
+        }
+        // For unit tests
+        if (e
+            .isUnitTestRun) {
+            setPatchedCaretPosition(el, newCaretPosition, value);
+        }
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+    }, [
+        decimalScale,
+        fixedDecimalScale,
+        getNumberRegex,
+        format,
+        prefix,
+        suffix,
+        correctCaretPosition,
+        setPatchedCaretPosition,
+        onKeyDownProp,
+    ]);
+    var handleMouseUp = (0, react_1.useCallback)(function (e) {
         var el = e.target;
         var selectionStart = el.selectionStart, selectionEnd = el.selectionEnd, value = el.value;
         if (selectionStart === selectionEnd) {
-            var caretPostion = this.correctCaretPosition(value, selectionStart);
-            if (caretPostion !== selectionStart) {
-                this.setPatchedCaretPosition(el, caretPostion, value);
+            var caretPosition = correctCaretPosition(value, selectionStart || 0);
+            if (caretPosition !== selectionStart) {
+                setPatchedCaretPosition(el, caretPosition, value);
             }
         }
-        this.props.onMouseUp(e);
-    };
-    CurrencyFormat.prototype.onFocus = function (e) {
-        var _this = this;
-        // Workaround Chrome and Safari bug https://bugs.chromium.org/p/chromium/issues/detail?id=779328
-        // (onFocus event target selectionStart is always 0 before setTimeout)
-        e.persist();
+        onMouseUpProp === null || onMouseUpProp === void 0 ? void 0 : onMouseUpProp(e);
+    }, [correctCaretPosition, setPatchedCaretPosition, onMouseUpProp]);
+    var handleFocus = (0, react_1.useCallback)(function (e) {
+        var el = e.target;
         setTimeout(function () {
-            var el = e.target;
             var selectionStart = el.selectionStart, value = el.value;
-            var caretPosition = _this.correctCaretPosition(value, selectionStart);
+            var caretPosition = correctCaretPosition(value, selectionStart || 0);
             if (caretPosition !== selectionStart) {
-                _this.setPatchedCaretPosition(el, caretPosition, value);
+                setPatchedCaretPosition(el, caretPosition, value);
             }
-            _this.props.onFocus(e);
+            onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(e);
         });
-    };
-    CurrencyFormat.prototype.render = function () {
-        var _a = this.props, type = _a.type, displayType = _a.displayType, customInput = _a.customInput, renderText = _a.renderText, placeholder = _a.placeholder, className = _a.className;
-        var value = this.state.value;
-        var otherProps = (0, utils_1.omit)(this.props, propTypes);
-        var inputProps = Object.assign({}, otherProps, {
-            type: type,
-            value: value.replace(/^\./, ""),
-            onChange: this.onChange,
-            onKeyDown: this.onKeyDown,
-            onMouseUp: this.onMouseUp,
-            onFocus: this.onFocus,
-            onBlur: this.onBlur,
-            placeholder: placeholder,
-            className: className
-        });
-        if (displayType === "text") {
-            return renderText ? value || null : react_1.default.createElement("span", tslib_1.__assign({}, otherProps), value);
-        }
-        else if (customInput) {
-            var CustomInput = customInput;
-            return react_1.default.createElement(CustomInput, tslib_1.__assign({}, inputProps));
-        }
-        return react_1.default.createElement("input", tslib_1.__assign({}, inputProps));
-    };
-    CurrencyFormat.defaultProps = {
-        displayType: "input",
-        decimalSeparator: ".",
-        thousandSpacing: "3",
-        thousandSeparator: ",",
-        fixedDecimalScale: false,
-        prefix: "",
-        suffix: "",
-        allowNegative: true,
-        isNumericString: false,
-        type: "text",
-        onValueChange: utils_1.noop,
-        onChange: utils_1.noop,
-        onKeyDown: utils_1.noop,
-        onMouseUp: utils_1.noop,
-        onFocus: utils_1.noop,
-        onBlur: utils_1.noop,
-        isAllowed: utils_1.returnTrue,
-        className: "",
-        placeholder: ""
-    };
-    return CurrencyFormat;
-}(react_1.Component));
+    }, [correctCaretPosition, setPatchedCaretPosition, onFocusProp]);
+    // Effect to validate props on mount and update
+    (0, react_1.useEffect)(function () {
+        validateProps();
+    }, [validateProps]);
+    // Effect to update value when props change
+    (0, react_1.useEffect)(function () {
+        var prevProps = prevPropsRef.current;
+        if (prevProps !== props) {
+            var lastNumStr = state.numAsString || "";
+            var formattedValue = valueProp === undefined
+                ? formatNumString(lastNumStr)
+                : formatValueProp();
+            if (formattedValue !== state.value) {
+                var newNumAsString = removeFormatting(formattedValue);
+                setState({
+                    value: formattedValue,
+                    numAsString: newNumAsString,
+                });
+                // Notify about prop-driven value change
+                if (onValueChange) {
+                    var valueObj = {
+                        formattedValue: formattedValue,
+                        value: newNumAsString,
+                        floatValue: parseFloat(newNumAsString),
+                        name: name,
+                    };
+                    onValueChange(valueObj, { source: "prop" });
+                }
+            }
+        }
+        prevPropsRef.current = props;
+    }, [
+        props,
+        valueProp,
+        state,
+        formatNumString,
+        formatValueProp,
+        removeFormatting,
+        onValueChange,
+        name,
+    ]);
+    // Effect to call getInputRef callback
+    (0, react_1.useEffect)(function () {
+        if (getInputRef) {
+            getInputRef(inputRef.current);
+        }
+    }, [getInputRef]);
+    // Get other props to pass to input
+    var otherProps = (0, react_1.useMemo)(function () { return (0, utils_1.omit)(restProps, PROPS_TO_OMIT); }, [restProps]);
+    // Build input props
+    var inputProps = (0, react_1.useMemo)(function () { return (tslib_1.__assign(tslib_1.__assign({}, otherProps), { type: type, name: name, value: (state.value || "").replace(/^\./, ""), onChange: handleChange, onKeyDown: handleKeyDown, onMouseUp: handleMouseUp, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, className: className, ref: inputRef })); }, [
+        otherProps,
+        type,
+        name,
+        state.value,
+        handleChange,
+        handleKeyDown,
+        handleMouseUp,
+        handleFocus,
+        handleBlur,
+        placeholder,
+        className,
+    ]);
+    // Render
+    if (displayType === "text") {
+        return renderText ? (react_1.default.createElement(react_1.default.Fragment, null, renderText(state.value || "", otherProps))) : (react_1.default.createElement("span", tslib_1.__assign({}, otherProps), state.value));
+    }
+    if (customInput) {
+        var CustomInput = customInput;
+        return react_1.default.createElement(CustomInput, tslib_1.__assign({}, inputProps));
+    }
+    return react_1.default.createElement("input", tslib_1.__assign({}, inputProps));
+});
+CurrencyFormat.displayName = "CurrencyFormat";
 exports.default = CurrencyFormat;
 //# sourceMappingURL=index.js.map