react-intl-number-input 0.5.1 → 0.8.1

package/README.md

@@ -1,76 +1,59 @@
 # react-intl-number-input
-A React component for masked and formatted number input.
+
+A React component for masked and formatted number input with `Intl.NumberFormat` locale support.
 
 [Demo](https://nandorip.github.io/react-intl-number-input/example/dist/)
 
 ## Requirements
 
-- Node.js 18+ (recommended: latest LTS)
-- React / ReactDOM: `>=16.8.0 <20`
+- React: `>=16.8.0 <20`
 
 ## Install
 
-```
+```bash
 npm install react-intl-number-input
 ```
 
-## Development
-
-```
-npm install
-npm start
-```
-
-Open `http://localhost:3001`.
-
-## Scripts
-
-- `npm start`: runs webpack dev server
-- `npm run build`: builds the demo bundle in `example/dist`
-- `npm run transpile`: transpiles library source from `src` to `dist`
-- `npm test`: runs unit tests with Jest
-- `npm run publish-demo`: builds and deploys demo to GitHub Pages
-
 ## Usage
 
 ```javascript
-import React from 'react'
+import React, { useState } from 'react';
 import IntlNumberInput from 'react-intl-number-input';
-
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value: 0,
-      maskedValue: 0,
-    }
-
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(event, value, maskedValue) {
-    event.preventDefault();
-    this.setState({ value, maskedValue });
-  }
-
-  render() {
-    return (
-      <div>
-        <p>
-          <IntlNumberInput onChange={this.handleChange} />
-        </p>
-        <p>
-          value: {this.state.value}
-        </p>
-        <p>
-          maskedValue: {this.state.maskedValue}
-        </p>
-      </div>
-    );
-  }
+
+function App() {
+  const [value, setValue] = useState(0);
+  const [maskedValue, setMaskedValue] = useState('0.00');
+
+  const handleChange = (event, nextValue, nextMaskedValue) => {
+    setValue(nextValue);
+    setMaskedValue(nextMaskedValue);
+  };
+
+  return (
+    <div>
+      <IntlNumberInput onChange={handleChange} />
+      <p>value: {value}</p>
+      <p>maskedValue: {maskedValue}</p>
+    </div>
+  );
 }
+```
 
+### TypeScript
+
+```typescript
+import IntlNumberInput, {
+  IntlNumberInputProps,
+  ControlsRenderProps,
+} from 'react-intl-number-input';
+
+const props: IntlNumberInputProps = {
+  locale: 'pt-BR',
+  precision: 2,
+  onChange: (event, value, maskedValue) => {
+    console.log(value, maskedValue);
+  },
+};
 ```
 
 React 18+:
@@ -78,7 +61,7 @@ React 18+:
 ```javascript
 import { createRoot } from 'react-dom/client';
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById('root'));
 root.render(<App />);
 ```
 
@@ -87,47 +70,120 @@ React 16/17:
 ```javascript
 import ReactDOM from 'react-dom';
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | :---: | --- |
+| value | `number` \| `string` | `0` | Controlled numeric value |
+| locale | `string` | `'en-US'` | BCP 47 language tag ([Intl locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation)) |
+| prefix | `string` | `''` | Prefix shown in the masked value |
+| suffix | `string` | `''` | Suffix shown in the masked value |
+| precision | `number` | `2` | Fraction digits (clamped to `0`–`20`) |
+| onChange | `function` | — | `(event, value, maskedValue) => void` |
+| onBlur | `function` | — | `(event, value, maskedValue) => void` |
+| disabled | `boolean` | `false` | Disables the input |
+| autoFocus | `boolean` | — | Native input autofocus |
+| minValue | `number` | — | Minimum allowed value |
+| maxValue | `number` | — | Maximum allowed value |
+| showStepButtons | `boolean` | `false` | Renders built-in +/- step buttons (ignored when `renderControls` is set) |
+| renderControls | `function` | — | `(props: ControlsRenderProps) => ReactNode` — custom stepper UI |
+| step | `number` | `1` | Step increment in display units (e.g. `1` with `precision={2}` adds `0.01`) |
+| inputMode | `'numeric'` \| `'decimal'` | auto | Overrides mobile keyboard mode |
+| className | `string` | — | Input CSS class |
+| style | `object` | — | Input inline styles |
+| id | `string` | — | Input id |
+| name | `string` | — | Input name |
+| placeholder | `string` | — | Input placeholder |
+| readOnly | `boolean` | — | Read-only input |
+| required | `boolean` | — | Required input |
+| tabIndex | `number` | — | Input tab index |
+
+The component also accepts standard `<input>` attributes such as `ref`, `onFocus`, `onKeyDown`, `aria-*`, `data-*`, and `autoComplete`. Custom `onChange` and `onBlur` callbacks receive the clamped numeric value and the formatted masked string.
+
+## Examples
+
+```javascript
+// maskedValue: 1,234,567.89
+<IntlNumberInput />
+```
+
+```javascript
+// maskedValue: 12,345.6789
+<IntlNumberInput precision={4} />
+```
+
+```javascript
+// maskedValue: $1,234,567.89
+<IntlNumberInput prefix="$" />
+```
+
+```javascript
+// maskedValue: 1,234%
+<IntlNumberInput suffix="%" precision={0} />
+```
+
+```javascript
+// maskedValue: 12.50% — type digits only; decimal is implied by precision
+<IntlNumberInput suffix="%" precision={2} />
+```
+
+```javascript
+// maskedValue: R$ 1.234.567,89
+<IntlNumberInput locale="pt-BR" prefix="R$ " precision={2} />
+```
+
+```javascript
+// With min/max and step buttons
+<IntlNumberInput
+  value={50}
+  minValue={0}
+  maxValue={100}
+  step={5}
+  precision={0}
+  showStepButtons
+  onChange={(event, value) => console.log(value)}
+/>
+```
+
+```javascript
+// Custom controls (layout is up to you — wrap in a parent div as needed)
+<div className="amount-field">
+  <IntlNumberInput
+    value={12.34}
+    precision={2}
+    step={1}
+    minValue={0}
+    maxValue={100}
+    onChange={(event, value) => console.log(value)}
+    renderControls={({ increment, decrement, setValue, value, formattedValue, min, max, disabled }) => (
+      <div className="amount-controls">
+        <button type="button" onClick={() => decrement()} disabled={disabled}>-</button>
+        <span>{formattedValue}</span>
+        <button type="button" onClick={() => increment()} disabled={disabled}>+</button>
+        <button type="button" onClick={() => setValue(max ?? value)} disabled={disabled}>
+          Max
+        </button>
+      </div>
+    )}
+  />
+</div>
 ```
-
-## Properties
-
-| Name | Type | Default Value | Description |
-| --- | --- | :---: | --- |
-| value | number or string | 0 | Initial numeric value |
-| locale | string | 'en-US' | BCP 47 language tag. Defines a language code and a country or region code.<br>[Intl Locale Identification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation) *e.g.* 'de-DE', 'pt-BR' and 'ja-JP' |
-| prefix | string | '' | String used as prefix for the masked value |
-| suffix | string  | '' | String used as suffix for the masked value |
-| precision | number | 2 | Number of fraction digits to use |
-| onChange | function | n/a | `(event, value, maskedValue) => {}`<br>Callback function to handle value changes |
-
-## Examples
-
-```javascript
-    // maskedValue: 1,234,567.89
-    <IntlNumberInput />
-```
-
-```javascript
-    // maskedValue: 12,345.6789
-    <IntlNumberInput precision={4} />
-```
-
-```javascript
-    // maskedValue: $1,234,567.89
-    <IntlNumberInput prefix="$" />
-```
-
-```javascript
-    // maskedValue: 1,234%
-    <IntlNumberInput suffix="%" precision={0} />
-```
-
-```javascript
-    // maskedValue: R$ 1.234.567,89
-    <IntlNumberInput
-      locale="pt-BR"
-      prefix="R$ "
-      precision={2}
-    />
-```
+
+`renderControls` replaces `showStepButtons` when both are provided. The component renders the `<input>` and your controls as siblings (no wrapper), so you control layout in the parent.
+
+## How input works
+
+Users type digits; the component applies locale formatting and optional prefix/suffix. For `precision={2}`, typing `1234` becomes `12.34`. Negative values are supported when `-` is present in the input.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, testing, and publishing instructions.
+
+Local development requires Node.js `^22.18.0` or `>=24.11.0` (Babel 8). The published package has no Node.js version constraint for consumers.
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for release history.

package/dist/index.d.ts

@@ -1,14 +1,31 @@
-import * as React from 'react';
-
-export interface IntlNumberInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  locale?: string;
-  prefix?: string;
-  suffix?: string;
-  precision?: number;
-  value?: number | string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number, maskedValue: string) => void;
+import React from 'react';
+export interface ControlsRenderProps {
+    increment: (multiplier?: number) => void;
+    decrement: (multiplier?: number) => void;
+    setValue: (value: number) => void;
+    value: number;
+    min?: number;
+    max?: number;
+    disabled: boolean;
+    step: number;
+    precision: number;
+    formattedValue: string;
 }
-
-declare const IntlNumberInput: React.ForwardRefExoticComponent<IntlNumberInputProps & React.RefAttributes<HTMLInputElement>>;
-
-export default IntlNumberInput;
+type IntlNumberInputOwnProps = {
+    locale?: string;
+    prefix?: string;
+    suffix?: string;
+    precision?: number;
+    value?: number | string;
+    showStepButtons?: boolean;
+    step?: number;
+    minValue?: number;
+    maxValue?: number;
+    inputMode?: 'numeric' | 'decimal';
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number, maskedValue: string) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: number, maskedValue: string) => void;
+    renderControls?: (props: ControlsRenderProps) => React.ReactNode;
+};
+export type IntlNumberInputProps = IntlNumberInputOwnProps & Omit<React.ComponentPropsWithoutRef<'input'>, keyof IntlNumberInputOwnProps | 'value' | 'type' | 'defaultValue' | 'children'>;
+declare const _default: React.NamedExoticComponent<IntlNumberInputOwnProps & Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "children" | "defaultValue" | "type" | keyof IntlNumberInputOwnProps> & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/dist/index.js

@@ -1,171 +1,253 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-var IntlNumberInput = /*#__PURE__*/function (_Component) {
-  function IntlNumberInput(props) {
-    var _this;
-    _classCallCheck(this, IntlNumberInput);
-    _this = _callSuper(this, IntlNumberInput, [props]);
-    _this.state = {
-      maskedValue: '0',
-      value: 0
-    };
-    return _this;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function sanitizeString(str) {
+  return str.replace(/<[^>]*>/g, '');
+}
+function resolveLocale(locale) {
+  try {
+    const supported = Intl.NumberFormat.supportedLocalesOf([locale]);
+    return supported.length > 0 ? supported[0] : 'en-US';
+  } catch {
+    return 'en-US';
+  }
+}
+function isValidNumber(value) {
+  return Number.isFinite(value) && !Number.isNaN(value);
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function clampToBounds(value, min, max) {
+  let result = value;
+  if (min !== undefined && result < min) {
+    result = min;
+  }
+  if (max !== undefined && result > max) {
+    result = max;
   }
-  _inherits(IntlNumberInput, _Component);
-  return _createClass(IntlNumberInput, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.setMaskedValue(this.props.value);
+  return result;
+}
+const IntlNumberInput = /*#__PURE__*/(0, _react.forwardRef)(function IntlNumberInput({
+  locale = 'en-US',
+  prefix = '',
+  suffix = '',
+  precision = 2,
+  value,
+  showStepButtons = false,
+  step = 1,
+  minValue,
+  maxValue,
+  inputMode: inputModeProp,
+  onChange,
+  onBlur,
+  disabled = false,
+  renderControls,
+  ...inputProps
+}, ref) {
+  const safePrecision = (0, _react.useMemo)(() => {
+    if (typeof precision !== 'number' || Number.isNaN(precision)) return 2;
+    return clamp(Math.round(precision), 0, 20);
+  }, [precision]);
+  const safeStep = (0, _react.useMemo)(() => {
+    if (typeof step !== 'number' || Number.isNaN(step) || step <= 0) return 1;
+    return step;
+  }, [step]);
+  const [effectiveMin, effectiveMax] = (0, _react.useMemo)(() => {
+    if (minValue !== undefined && maxValue !== undefined && minValue > maxValue) {
+      return [maxValue, minValue];
+    }
+    return [minValue, maxValue];
+  }, [minValue, maxValue]);
+  const getPrecisionValue = (0, _react.useCallback)(p => {
+    return Math.pow(10, p);
+  }, []);
+  const getNumberValue = (0, _react.useCallback)(strValue => {
+    const inputValue = String(strValue || '');
+    const hasNegativeSign = inputValue.includes('-');
+    const onlyDigits = inputValue.replace(/[^0-9]/g, '');
+    if (!onlyDigits) {
+      return hasNegativeSign ? -0 : 0;
+    }
+    const numberValue = Number(onlyDigits);
+    const parsedValue = numberValue / getPrecisionValue(safePrecision);
+    return hasNegativeSign ? -parsedValue : parsedValue;
+  }, [getPrecisionValue, safePrecision]);
+  const numberFormatter = (0, _react.useMemo)(() => {
+    const options = {
+      style: 'decimal',
+      minimumFractionDigits: safePrecision,
+      maximumFractionDigits: safePrecision
+    };
+    const resolvedLocale = resolveLocale(locale);
+    return new Intl.NumberFormat(resolvedLocale, options);
+  }, [locale, safePrecision]);
+  const formatNumber = (0, _react.useCallback)(val => {
+    let numberValue;
+    if (typeof val === 'string') {
+      numberValue = getNumberValue(val);
+    } else {
+      numberValue = val;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.value !== this.props.value) {
-        this.setMaskedValue(this.props.value);
-      }
+    if (!isValidNumber(numberValue)) {
+      numberValue = 0;
     }
-  }, {
-    key: "setMaskedValue",
-    value: function setMaskedValue() {
-      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      this.setState({
-        maskedValue: this.formatNumber(value)
-      });
+    numberValue = clampToBounds(numberValue, effectiveMin, effectiveMax);
+    const formattedNumber = numberFormatter.format(numberValue);
+    const safePrefix = sanitizeString(prefix);
+    const safeSuffix = sanitizeString(suffix);
+    return `${safePrefix}${formattedNumber}${safeSuffix}`;
+  }, [getNumberValue, numberFormatter, prefix, suffix, effectiveMin, effectiveMax]);
+  const getInitialValue = (0, _react.useCallback)(() => {
+    const initial = value !== undefined ? value : 0;
+    return formatNumber(initial);
+  }, [value, formatNumber]);
+  const getInitialNumericValue = (0, _react.useCallback)(() => {
+    const initial = value !== undefined ? value : 0;
+    if (typeof initial === 'string') {
+      return getNumberValue(initial);
     }
-  }, {
-    key: "getMaskedValue",
-    value: function getMaskedValue() {
-      return this.state.maskedValue;
+    return initial;
+  }, [value, getNumberValue]);
+  const [maskedValue, setMaskedValue] = (0, _react.useState)(getInitialValue);
+  const numericValueRef = (0, _react.useRef)(getInitialNumericValue());
+  (0, _react.useEffect)(() => {
+    if (value === undefined) return;
+    const numericVal = typeof value === 'string' ? getNumberValue(value) : value;
+    const clamped = clampToBounds(numericVal, effectiveMin, effectiveMax);
+    setMaskedValue(formatNumber(clamped));
+    numericValueRef.current = clamped;
+  }, [value, formatNumber, getNumberValue, effectiveMin, effectiveMax]);
+  const handleChange = (0, _react.useCallback)(event => {
+    const rawValue = event.target.value;
+    const newValue = getNumberValue(rawValue);
+    if (!isValidNumber(newValue)) {
+      return;
     }
-  }, {
-    key: "getValue",
-    value: function getValue() {
-      return this.state.value;
+    const clampedValue = clampToBounds(newValue, effectiveMin, effectiveMax);
+    const newMaskedValue = formatNumber(clampedValue);
+    setMaskedValue(newMaskedValue);
+    numericValueRef.current = clampedValue;
+    if (onChange) {
+      onChange(event, clampedValue, newMaskedValue);
     }
-  }, {
-    key: "getPrecisionValue",
-    value: function getPrecisionValue(precision) {
-      return Math.pow(10, precision);
+  }, [getNumberValue, formatNumber, effectiveMin, effectiveMax, onChange]);
+  const handleBlur = (0, _react.useCallback)(event => {
+    const rawValue = event.target.value;
+    const currentValue = getNumberValue(rawValue);
+    const clampedValue = clampToBounds(currentValue, effectiveMin, effectiveMax);
+    const formattedValue = formatNumber(clampedValue);
+    setMaskedValue(formattedValue);
+    numericValueRef.current = clampedValue;
+    if (onBlur) {
+      onBlur(event, clampedValue, formattedValue);
     }
-  }, {
-    key: "getNumberValue",
-    value: function getNumberValue(strValue) {
-      var numberValue = Number(strValue.replace(/[^0-9]/g, ''));
-      return numberValue / this.getPrecisionValue(this.props.precision);
+  }, [getNumberValue, formatNumber, effectiveMin, effectiveMax, onBlur]);
+  const handleStep = (0, _react.useCallback)((delta, multiplier = 1) => {
+    if (disabled) return;
+    const currentValue = numericValueRef.current;
+    const stepValue = safeStep / Math.pow(10, safePrecision) * multiplier;
+    const newValue = clampToBounds(currentValue + delta * stepValue, effectiveMin, effectiveMax);
+    const newMaskedValue = formatNumber(newValue);
+    setMaskedValue(newMaskedValue);
+    numericValueRef.current = newValue;
+    const syntheticEvent = {
+      target: {
+        value: newMaskedValue,
+        name: inputProps.name || '',
+        id: inputProps.id || ''
+      },
+      preventDefault: () => {}
+    };
+    if (onChange) {
+      onChange(syntheticEvent, newValue, newMaskedValue);
     }
-  }, {
-    key: "formatNumber",
-    value: function formatNumber() {
-      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var numberValue = value;
-      if (typeof numberValue === 'string') {
-        numberValue = this.getNumberValue(numberValue);
-      }
-      var formattedNumber = new Intl.NumberFormat(this.props.locale, {
-        style: 'decimal',
-        minimumFractionDigits: this.props.precision,
-        maximumFractionDigits: this.props.precision
-      }).format(numberValue);
-      return "".concat(this.props.prefix).concat(formattedNumber).concat(this.props.suffix);
+  }, [disabled, safeStep, safePrecision, effectiveMin, effectiveMax, formatNumber, onChange, inputProps.name, inputProps.id]);
+  const increment = (0, _react.useCallback)((multiplier = 1) => handleStep(1, multiplier), [handleStep]);
+  const decrement = (0, _react.useCallback)((multiplier = 1) => handleStep(-1, multiplier), [handleStep]);
+  const setValue = (0, _react.useCallback)(newValue => {
+    const clampedValue = clampToBounds(newValue, effectiveMin, effectiveMax);
+    const newMaskedValue = formatNumber(clampedValue);
+    setMaskedValue(newMaskedValue);
+    numericValueRef.current = clampedValue;
+    const syntheticEvent = {
+      target: {
+        value: newMaskedValue,
+        name: inputProps.name || '',
+        id: inputProps.id || ''
+      },
+      preventDefault: () => {}
+    };
+    if (onChange) {
+      onChange(syntheticEvent, clampedValue, newMaskedValue);
     }
-  }, {
-    key: "updateValues",
-    value: function updateValues(event) {
-      var value = this.getNumberValue(event.target.value);
-      var maskedValue = this.formatNumber(value);
-      return [value, maskedValue];
+  }, [effectiveMin, effectiveMax, formatNumber, onChange, inputProps.name, inputProps.id]);
+  const inputMode = (0, _react.useMemo)(() => {
+    if (inputModeProp) {
+      return inputModeProp;
     }
-  }, {
-    key: "handleChange",
-    value: function handleChange(event) {
-      var _this2 = this;
-      event.preventDefault();
-      var _this$updateValues = this.updateValues(event),
-        _this$updateValues2 = _slicedToArray(_this$updateValues, 2),
-        value = _this$updateValues2[0],
-        maskedValue = _this$updateValues2[1];
-      event.persist();
-      if (this.props.onChange && maskedValue) {
-        this.setState({
-          value: value,
-          maskedValue: maskedValue
-        }, function () {
-          _this2.props.onChange(event, value, maskedValue);
-        });
-      }
+    return safePrecision > 0 ? 'decimal' : 'numeric';
+  }, [inputModeProp, safePrecision]);
+  const inputElement = /*#__PURE__*/_react.default.createElement("input", {
+    ref: ref,
+    type: "text",
+    inputMode: inputMode,
+    value: maskedValue,
+    disabled: disabled,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    ...inputProps
+  });
+  if (renderControls) {
+    const controlsProps = {
+      increment,
+      decrement,
+      setValue,
+      value: numericValueRef.current,
+      min: effectiveMin,
+      max: effectiveMax,
+      disabled,
+      step: safeStep,
+      precision: safePrecision,
+      formattedValue: maskedValue
+    };
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inputElement, renderControls(controlsProps));
+  }
+  if (!showStepButtons) {
+    return inputElement;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '4px'
     }
-  }, {
-    key: "customProps",
-    value: function customProps() {
-      var customProps = _objectSpread({}, this.props);
-      delete customProps.locale;
-      delete customProps.prefix;
-      delete customProps.suffix;
-      delete customProps.precision;
-      delete customProps.autoFocus;
-      delete customProps.value;
-      delete customProps.onChange;
-      return customProps;
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: () => handleStep(-1),
+    disabled: disabled,
+    "aria-label": "Decrease value",
+    style: {
+      padding: '4px 8px',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.5 : 1
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      return /*#__PURE__*/_react["default"].createElement("input", _extends({
-        value: this.state.maskedValue,
-        disabled: this.props.disabled,
-        onChange: function onChange(e) {
-          return _this3.handleChange(e);
-        }
-      }, this.customProps()));
+  }, "-"), inputElement, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: () => handleStep(1),
+    disabled: disabled,
+    "aria-label": "Increase value",
+    style: {
+      padding: '4px 8px',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.5 : 1
     }
-  }]);
-}(_react.Component);
-IntlNumberInput.propTypes = {
-  locale: _propTypes["default"].string.isRequired,
-  prefix: _propTypes["default"].string.isRequired,
-  suffix: _propTypes["default"].string.isRequired,
-  precision: _propTypes["default"].number.isRequired,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
-  disabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func
-};
-IntlNumberInput.defaultProps = {
-  locale: 'en-US',
-  prefix: '',
-  suffix: '',
-  precision: 2
-};
-var _default = exports["default"] = IntlNumberInput;
+  }, "+"));
+});
+IntlNumberInput.displayName = 'IntlNumberInput';
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(IntlNumberInput);

package/package.json

@@ -1,13 +1,34 @@
 {
   "name": "react-intl-number-input",
-  "version": "0.5.1",
+  "version": "0.8.1",
   "description": "A React component for masked and formatted number input.",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
   "scripts": {
     "test": "jest --runInBand",
+    "dev": "webpack serve --mode development",
     "start": "webpack serve --mode development",
-    "transpile": "babel src -d dist --copy-files --no-copy-ignored --ignore \"**/*.test.jsx\"",
-    "prepublishOnly": "npm run transpile",
+    "transpile": "babel src -d dist --extensions \".ts,.tsx\" --ignore \"**/*.test.ts\" --ignore \"**/*.test.tsx\"",
+    "build:types": "tsc --emitDeclarationOnly",
+    "prepublishOnly": "npm test && npm run transpile && npm run build:types",
     "build": "webpack --mode production",
     "deploy": "gh-pages -d example/dist",
     "publish-demo": "npm run build && npm run deploy"
@@ -25,7 +46,8 @@
     "money",
     "number",
     "intl",
-    "input"
+    "input",
+    "typescript"
   ],
   "author": "Fernando Pires Reherman <nandorip@live.com>",
   "license": "MIT",
@@ -34,35 +56,32 @@
   },
   "homepage": "https://github.com/nandorip/react-intl-number-input#readme",
   "peerDependencies": {
-    "react": ">=16.8.0 <20",
-    "react-dom": ">=16.8.0 <20"
-  },
-  "dependencies": {
-    "prop-types": "^15.8.1"
+    "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/core": "^7.27.4",
-    "@babel/plugin-transform-object-rest-spread": "^7.28.4",
-    "@babel/preset-env": "^7.29.5",
-    "@babel/preset-react": "^7.27.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "babel-jest": "^30.2.0",
-    "babel-loader": "^10.0.0",
+    "@babel/cli": "^8.0.4",
+    "@babel/core": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
+    "@babel/preset-react": "^8.0.1",
+    "@babel/preset-typescript": "^8.0.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.18",
+    "babel-jest": "^30.4.1",
+    "babel-loader": "^10.1.1",
     "gh-pages": "^6.3.0",
-    "html-webpack-plugin": "^5.6.4",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "webpack": "^5.101.3",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.4"
+    "html-webpack-plugin": "^5.6.8",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^7.0.2",
+    "webpack": "^5.109.2",
+    "webpack-cli": "^7.2.2",
+    "webpack-dev-server": "^6.0.0"
   },
   "overrides": {
     "fast-uri": "^3.1.1",
-    "follow-redirects": "^1.16.0",
-    "uuid": "^11.1.1"
+    "js-yaml": "^4.1.1"
   }
 }

package/jest.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  testEnvironment: "jsdom",
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
-  moduleFileExtensions: ["js", "jsx"],
-  testMatch: ["**/*.test.jsx"]
-};

package/jest.setup.js

@@ -1 +0,0 @@
-import "@testing-library/jest-dom";