@semcore/input-number 16.0.0-prerelease.6 → 16.0.0-prerelease.9

package/lib/esm/InputNumber.mjs

@@ -1,321 +1,450 @@
-import A from "@babel/runtime/helpers/esm/slicedToArray";
-import w from "@babel/runtime/helpers/esm/objectSpread2";
-import x from "@babel/runtime/helpers/esm/classCallCheck";
-import I from "@babel/runtime/helpers/esm/createClass";
-import d from "@babel/runtime/helpers/esm/assertThisInitialized";
-import C from "@babel/runtime/helpers/esm/inherits";
-import k from "@babel/runtime/helpers/esm/createSuper";
-import l from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent as M, sstyled as V, assignProps as R, Component as $ } from "@semcore/core";
-import m from "react";
-import D from "@semcore/input";
-import { IncrementIcon as z, DecrementIcon as W } from "./buttons.mjs";
-import { localizedMessages as F } from "./translations/__intergalactic-dynamic-locales.mjs";
-import K from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { forkRef as L } from "@semcore/core/lib/utils/ref";
-import { callAllEventHandlers as B } from "@semcore/core/lib/utils/assignProps";
-var N = (
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import React from "react";
+import Input from "@semcore/input";
+import { IncrementIcon, DecrementIcon } from "./buttons.mjs";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { forkRef } from "@semcore/core/lib/utils/ref";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+var style = (
   /*__reshadow_css_start__*/
-  (V.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     ".___SValue_1l7h4_gg_:focus~.___SControls_1l7h4_gg_{display:flex}.___SControls_1l7h4_gg_{display:none;flex-flow:column;justify-content:center;height:100%;box-sizing:border-box}.___SControls_1l7h4_gg_.__showControls_1l7h4_gg_{display:flex}.___SDown_1l7h4_gg_,.___SUp_1l7h4_gg_{padding:0;width:16px;color:var(--intergalactic-icon-secondary-neutral, #a9abb6);box-sizing:border-box;display:inline-flex;justify-content:center;border:0;background:0 0;cursor:pointer}.___SDown_1l7h4_gg_:focus,.___SUp_1l7h4_gg_:focus{outline:0}@media (hover:hover){.___SDown_1l7h4_gg_:hover,.___SUp_1l7h4_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SUp_1l7h4_gg_{padding-bottom:1px}.___SDown_1l7h4_gg_{padding-top:1px}.___SValue_1l7h4_gg_::-webkit-inner-spin-button,.___SValue_1l7h4_gg_::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.___SValue_1l7h4_gg_._type_number_1l7h4_gg_{-moz-appearance:textfield}.___SValue_1l7h4_gg_.__disabled_1l7h4_gg_~.___SControls_1l7h4_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SValueHidden_1l7h4_gg_{position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden}",
     "1l7h4_gg_"
   ), {
-    __SValue: "___SValue_1l7h4_gg_",
-    __SControls: "___SControls_1l7h4_gg_",
-    _showControls: "__showControls_1l7h4_gg_",
-    __SUp: "___SUp_1l7h4_gg_",
-    __SDown: "___SDown_1l7h4_gg_",
-    _disabled: "__disabled_1l7h4_gg_",
-    __SValueHidden: "___SValueHidden_1l7h4_gg_",
-    _type_number: "_type_number_1l7h4_gg_"
+    "__SValue": "___SValue_1l7h4_gg_",
+    "__SControls": "___SControls_1l7h4_gg_",
+    "_showControls": "__showControls_1l7h4_gg_",
+    "__SUp": "___SUp_1l7h4_gg_",
+    "__SDown": "___SDown_1l7h4_gg_",
+    "_disabled": "__disabled_1l7h4_gg_",
+    "__SValueHidden": "___SValueHidden_1l7h4_gg_",
+    "_type_number": "_type_number_1l7h4_gg_"
   })
 );
-function G(f) {
-  var g = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : Number.MIN_SAFE_INTEGER, c = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : Number.MAX_SAFE_INTEGER;
-  return Math.max(g, Math.min(c, f));
+function parseValueWithMinMax(value) {
+  var min = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : Number.MIN_SAFE_INTEGER;
+  var max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : Number.MAX_SAFE_INTEGER;
+  return Math.max(min, Math.min(max, value));
 }
-var P = /* @__PURE__ */ function(f) {
-  C(c, f);
-  var g = k(c);
-  function c() {
-    var r;
-    x(this, c);
-    for (var n = arguments.length, s = new Array(n), o = 0; o < n; o++)
-      s[o] = arguments[o];
-    return r = g.call.apply(g, [this].concat(s)), l(d(r), "inputRef", /* @__PURE__ */ m.createRef()), l(d(r), "increment", function(e) {
-      var t, a;
-      (t = r.inputRef.current) === null || t === void 0 || (a = t.stepUp) === null || a === void 0 || a.call(t, e);
-    }), l(d(r), "decrement", function(e) {
-      var t, a;
-      (t = r.inputRef.current) === null || t === void 0 || (a = t.stepDown) === null || a === void 0 || a.call(t, e);
-    }), r;
+var InputNumber = /* @__PURE__ */ function(_Component) {
+  _inherits(InputNumber2, _Component);
+  var _super = _createSuper(InputNumber2);
+  function InputNumber2() {
+    var _this;
+    _classCallCheck(this, InputNumber2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "increment", function(event) {
+      var _this$inputRef$curren, _this$inputRef$curren2;
+      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : (_this$inputRef$curren2 = _this$inputRef$curren.stepUp) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.call(_this$inputRef$curren, event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "decrement", function(event) {
+      var _this$inputRef$curren3, _this$inputRef$curren4;
+      (_this$inputRef$curren3 = _this.inputRef.current) === null || _this$inputRef$curren3 === void 0 ? void 0 : (_this$inputRef$curren4 = _this$inputRef$curren3.stepDown) === null || _this$inputRef$curren4 === void 0 ? void 0 : _this$inputRef$curren4.call(_this$inputRef$curren3, event);
+    });
+    return _this;
   }
-  return I(c, [{
+  _createClass(InputNumber2, [{
     key: "getValueProps",
-    value: function() {
-      var n = new Intl.NumberFormat(this.asProps.locale, {
+    value: function getValueProps() {
+      var numberFormatter = new Intl.NumberFormat(this.asProps.locale, {
         style: "decimal"
       });
       return {
         inputRef: this.inputRef,
         increment: this.increment,
         decrement: this.decrement,
-        numberFormatter: n
+        numberFormatter
       };
     }
   }, {
     key: "getControlsProps",
-    value: function() {
-      var n = this.asProps, s = n.size, o = n.getI18nText;
+    value: function getControlsProps() {
+      var _this$asProps = this.asProps, size = _this$asProps.size, getI18nText = _this$asProps.getI18nText;
       return {
-        size: s,
+        size,
         increment: this.increment,
         decrement: this.decrement,
-        getI18nText: o
+        getI18nText
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var n = this.asProps, s, o = D;
-      return s = V(this.asProps.style), /* @__PURE__ */ m.createElement(o, s.cn("SInputNumber", w({}, R({}, n))));
+    value: function render() {
+      var _ref = this.asProps, _ref4;
+      var SInputNumber = Input;
+      return _ref4 = sstyled(this.asProps.style), /* @__PURE__ */ React.createElement(SInputNumber, _ref4.cn("SInputNumber", _objectSpread({}, assignProps({}, _ref))));
     }
-  }]), c;
-}($);
-l(P, "displayName", "InputNumber");
-l(P, "style", N);
-l(P, "enhance", [K(F)]);
-l(P, "defaultProps", {
+  }]);
+  return InputNumber2;
+}(Component);
+_defineProperty(InputNumber, "displayName", "InputNumber");
+_defineProperty(InputNumber, "style", style);
+_defineProperty(InputNumber, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(InputNumber, "defaultProps", {
   size: "m",
-  i18n: F,
+  i18n: localizedMessages,
   locale: "en"
 });
-var E = /* @__PURE__ */ function(f) {
-  C(c, f);
-  var g = k(c);
-  function c() {
-    var r;
-    x(this, c);
-    for (var n = arguments.length, s = new Array(n), o = 0; o < n; o++)
-      s[o] = arguments[o];
-    return r = g.call.apply(g, [this].concat(s)), l(d(r), "valueInputRef", /* @__PURE__ */ m.createRef()), l(d(r), "cursorPosition", -1), l(d(r), "getFormattedValue", function(e) {
-      return e.replace(new RegExp("[".concat(r.separatorThousands, "]"), "g"), "").replace(r.separatorDecimal, ".");
-    }), l(d(r), "valueParser", function(e, t, a) {
-      var u = r.props.numberFormatter, i = r.getFormattedValue(String(e));
-      if (Number.isNaN(Number(i)))
+var Value = /* @__PURE__ */ function(_Component2) {
+  _inherits(Value2, _Component2);
+  var _super2 = _createSuper(Value2);
+  function Value2() {
+    var _this2;
+    _classCallCheck(this, Value2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "valueInputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this2), "cursorPosition", -1);
+    _defineProperty(_assertThisInitialized(_this2), "getFormattedValue", function(value) {
+      return value.replace(new RegExp("[".concat(_this2.separatorThousands, "]"), "g"), "").replace(_this2.separatorDecimal, ".");
+    });
+    _defineProperty(_assertThisInitialized(_this2), "valueParser", function(value, prevValue, prevDisplayValue) {
+      var numberFormatter = _this2.props.numberFormatter;
+      var stringNumber = _this2.getFormattedValue(String(value));
+      if (Number.isNaN(Number(stringNumber))) {
         return {
-          parsedValue: t,
-          displayValue: a
+          parsedValue: prevValue,
+          displayValue: prevDisplayValue
         };
-      var h = "";
-      if (/\.[0-9]*0$/.test(i)) {
-        var p = i.split(r.separatorDecimal), _ = A(p, 2), v = _[0], y = _[1];
-        h = u.format(v) + r.separatorDecimal + y;
-      } else i !== "" && (h = u.format(i));
+      }
+      var displayValue = "";
+      if (/\.[0-9]*0$/.test(stringNumber)) {
+        var _stringNumber$split = stringNumber.split(_this2.separatorDecimal), _stringNumber$split2 = _slicedToArray(_stringNumber$split, 2), _int = _stringNumber$split2[0], decimal = _stringNumber$split2[1];
+        displayValue = numberFormatter.format(_int) + _this2.separatorDecimal + decimal;
+      } else if (stringNumber !== "") {
+        displayValue = numberFormatter.format(stringNumber);
+      }
       return {
-        parsedValue: i,
-        displayValue: h
+        parsedValue: stringNumber,
+        displayValue
       };
-    }), l(d(r), "handleValidation", function(e) {
-      var t = r.asProps, a = t.value, u = t.displayValue, i = t.min, h = t.max, p = t.step, _ = r.valueParser(e.currentTarget.value, a, u), v = _.parsedValue, y = p < 1 ? p.toString().split(".")[1].length : 1;
-      if (Number.isNaN(a) || Number.isNaN(Number.parseFloat(v)))
-        e.currentTarget.value = "", r.handlers.value("", e);
-      else {
-        var S = G(Number.parseFloat(v), i, h), b = r.round(S % p, p);
-        b !== 0 && (b >= p / 2 ? S += p - b : Math.abs(b) < p && (S -= b));
-        var U = Number(S.toFixed(y));
-        r.handlers.value(String(U), e);
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handleValidation", function(event) {
+      var _this2$asProps = _this2.asProps, value = _this2$asProps.value, displayValue = _this2$asProps.displayValue, min = _this2$asProps.min, max = _this2$asProps.max, step = _this2$asProps.step;
+      var _this2$valueParser = _this2.valueParser(event.currentTarget.value, value, displayValue), parsedValue = _this2$valueParser.parsedValue;
+      var roundCoefficient = step < 1 ? step.toString().split(".")[1].length : 1;
+      if (Number.isNaN(value) || Number.isNaN(Number.parseFloat(parsedValue))) {
+        event.currentTarget.value = "";
+        _this2.handlers.value("", event);
+      } else {
+        var numberValue = parseValueWithMinMax(Number.parseFloat(parsedValue), min, max);
+        var rounded = _this2.round(numberValue % step, step);
+        if (rounded !== 0) {
+          if (rounded >= step / 2) {
+            numberValue += step - rounded;
+          } else if (Math.abs(rounded) < step) {
+            numberValue -= rounded;
+          }
+        }
+        var numberValueRounded = Number(numberValue.toFixed(roundCoefficient));
+        _this2.handlers.value(String(numberValueRounded), event);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this2), "onWheel", function(event) {
+      callAllEventHandlers(_this2.asProps.onWheel, _this2.handleWheel)(event);
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handleWheel", function(event) {
+      if (event.target !== _this2.valueInputRef.current) return;
+      if (document.activeElement !== _this2.valueInputRef.current) return;
+      event.preventDefault();
+      if (event.wheelDelta > 0) {
+        _this2.stepUp(event);
+      } else if (event.wheelDelta < 0) {
+        _this2.stepDown(event);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handleChange", function(event) {
+      var value = _this2.getFormattedValue(event.currentTarget.value);
+      var _this2$asProps2 = _this2.asProps, numberFormatter = _this2$asProps2.numberFormatter, prevValue = _this2$asProps2.value;
+      if (value === "." || value === "-") {
+        _this2.handlers.displayValue(value);
+        return false;
+      }
+      if (value.endsWith("-")) {
+        return false;
+      }
+      if (value.endsWith(".")) {
+        if (value.length > prevValue.length) {
+          _this2.handlers.displayValue(numberFormatter.format(value) + _this2.separatorDecimal);
+          return false;
+        } else {
+          _this2.handlers.value(value.slice(0, -1), event);
+          return false;
+        }
+      }
+      var digits = /[0-9.-]+/.test(value);
+      if (digits || value === "") {
+        _this2.handlers.value(value, event);
       }
-    }), l(d(r), "onWheel", function(e) {
-      B(r.asProps.onWheel, r.handleWheel)(e);
-    }), l(d(r), "handleWheel", function(e) {
-      e.target === r.valueInputRef.current && document.activeElement === r.valueInputRef.current && (e.preventDefault(), e.wheelDelta > 0 ? r.stepUp(e) : e.wheelDelta < 0 && r.stepDown(e));
-    }), l(d(r), "handleChange", function(e) {
-      var t = r.getFormattedValue(e.currentTarget.value), a = r.asProps, u = a.numberFormatter, i = a.value;
-      if (t === "." || t === "-")
-        return r.handlers.displayValue(t), !1;
-      if (t.endsWith("-"))
-        return !1;
-      if (t.endsWith("."))
-        return t.length > i.length ? (r.handlers.displayValue(u.format(t) + r.separatorDecimal), !1) : (r.handlers.value(t.slice(0, -1), e), !1);
-      var h = /[0-9.-]+/.test(t);
-      (h || t === "") && r.handlers.value(t, e);
-    }), l(d(r), "handleKeyUp", function(e) {
-      e.key === "Shift" && (r.cursorPosition = -1);
-    }), l(d(r), "handleKeyDown", function(e) {
-      var t = e.currentTarget, a = t.value, u = a.length, i = r.asProps.displayValue;
-      if (e.key === "." || e.key === ",") {
-        if (a.indexOf(r.separatorDecimal) === -1 && e.key === ",")
-          e.currentTarget.value = a + ".";
-        else if (a.indexOf(r.separatorDecimal) !== -1) {
-          e.preventDefault(), e.stopPropagation();
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handleKeyUp", function(event) {
+      if (event.key === "Shift") {
+        _this2.cursorPosition = -1;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handleKeyDown", function(event) {
+      var element = event.currentTarget;
+      var value = element.value;
+      var length = value.length;
+      var displayValue = _this2.asProps.displayValue;
+      if (event.key === "." || event.key === ",") {
+        if (value.indexOf(_this2.separatorDecimal) === -1 && event.key === ",") {
+          event.currentTarget.value = value + ".";
+        } else if (value.indexOf(_this2.separatorDecimal) !== -1) {
+          event.preventDefault();
+          event.stopPropagation();
           return;
         }
       }
-      if (e.key === "Backspace" && a.endsWith(r.separatorDecimal))
-        return e.preventDefault(), e.stopPropagation(), r.handlers.displayValue(i.slice(0, -1)), !1;
-      if (t.selectionStart !== u && (e.key === "Backspace" || e.key === r.separatorDecimal || ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(e.key))) {
-        var h = a.slice(t.selectionEnd);
+      if (event.key === "Backspace" && value.endsWith(_this2.separatorDecimal)) {
+        event.preventDefault();
+        event.stopPropagation();
+        _this2.handlers.displayValue(displayValue.slice(0, -1));
+        return false;
+      }
+      if (element.selectionStart !== length && (event.key === "Backspace" || event.key === _this2.separatorDecimal || ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(event.key))) {
+        var afterSelection = value.slice(element.selectionEnd);
         requestAnimationFrame(function() {
-          var _ = r.state.displayValue, v = _.lastIndexOf(h), y = v, S = v;
-          t.setSelectionRange(y, S);
+          var newValue = _this2.state.displayValue;
+          var index = newValue.lastIndexOf(afterSelection);
+          var selectionStart = index;
+          var selectionEnd = index;
+          element.setSelectionRange(selectionStart, selectionEnd);
         });
       }
-      var p = 2;
-      switch (e.shiftKey && r.cursorPosition === -1 && (r.cursorPosition = t.selectionStart), e.key) {
+      var cursorIndex = 2;
+      if (event.shiftKey && _this2.cursorPosition === -1) {
+        _this2.cursorPosition = element.selectionStart;
+      }
+      switch (event.key) {
         case "ArrowLeft": {
-          e.preventDefault(), r.moveSelectionLeft(t, p);
+          event.preventDefault();
+          _this2.moveSelectionLeft(element, cursorIndex);
           break;
         }
         case "ArrowRight": {
-          e.preventDefault(), r.moveSelectionRight(t, p);
+          event.preventDefault();
+          _this2.moveSelectionRight(element, cursorIndex);
           break;
         }
         case "ArrowDown": {
-          e.preventDefault(), r.stepDown(e);
+          event.preventDefault();
+          _this2.stepDown(event);
           break;
         }
         case "ArrowUp": {
-          e.preventDefault(), r.stepUp(e);
+          event.preventDefault();
+          _this2.stepUp(event);
           break;
         }
       }
-    }), l(d(r), "moveSelectionLeft", function(e, t) {
-      var a = e.value, u = e.selectionStart - 1 >= 0 ? e.selectionStart - 1 : 0, i = a[e.selectionStart - t] === r.separatorThousands ? e.selectionStart - t : u;
-      r.cursorPosition === -1 ? e.setSelectionRange(i, i) : e.selectionStart <= r.cursorPosition && e.selectionEnd === r.cursorPosition ? e.setSelectionRange(i, e.selectionEnd) : e.setSelectionRange(e.selectionStart, a[e.selectionEnd - t] === r.separatorThousands ? e.selectionEnd - t : e.selectionEnd - 1);
-    }), l(d(r), "moveSelectionRight", function(e, t) {
-      var a = e.value, u = e.selectionEnd + 1, i = a[e.selectionEnd] === r.separatorThousands ? e.selectionEnd + t : u;
-      r.cursorPosition === -1 ? e.setSelectionRange(i, i) : e.selectionEnd >= r.cursorPosition && e.selectionStart === r.cursorPosition ? e.setSelectionRange(e.selectionStart, i) : e.setSelectionRange(a[e.selectionStart] === r.separatorThousands ? e.selectionStart + t : e.selectionStart + 1, e.selectionEnd);
-    }), l(d(r), "handleClick", function(e) {
-      var t = e.target, a = t.value;
-      a[t.selectionStart - 1] === r.separatorThousands && t.setSelectionRange(t.selectionStart - 1, t.selectionEnd - 1);
-    }), l(d(r), "handleBlur", function(e) {
-      r.cursorPosition = -1, r.handleValidation(e);
-    }), l(d(r), "stepUp", function(e) {
-      var t = r.asProps, a = t.max, u = a === void 0 ? Number.MAX_SAFE_INTEGER : a, i = t.min, h = t.step, p = t.value, _;
-      if (p === "" ? _ = i ?? 0 : _ = Number.parseFloat(p), !Number.isNaN(_)) {
-        var v = _ + h <= u ? _ + h : u;
-        r.handlers.value(v.toString(), e);
+    });
+    _defineProperty(_assertThisInitialized(_this2), "moveSelectionLeft", function(element, cursorIndex) {
+      var value = element.value;
+      var nextPosition = element.selectionStart - 1 >= 0 ? element.selectionStart - 1 : 0;
+      var cursorPosition = value[element.selectionStart - cursorIndex] === _this2.separatorThousands ? element.selectionStart - cursorIndex : nextPosition;
+      if (_this2.cursorPosition === -1) {
+        element.setSelectionRange(cursorPosition, cursorPosition);
+      } else {
+        if (element.selectionStart <= _this2.cursorPosition && element.selectionEnd === _this2.cursorPosition) {
+          element.setSelectionRange(cursorPosition, element.selectionEnd);
+        } else {
+          element.setSelectionRange(element.selectionStart, value[element.selectionEnd - cursorIndex] === _this2.separatorThousands ? element.selectionEnd - cursorIndex : element.selectionEnd - 1);
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this2), "moveSelectionRight", function(element, cursorIndex) {
+      var value = element.value;
+      var nextPosition = element.selectionEnd + 1;
+      var cursorPosition = value[element.selectionEnd] === _this2.separatorThousands ? element.selectionEnd + cursorIndex : nextPosition;
+      if (_this2.cursorPosition === -1) {
+        element.setSelectionRange(cursorPosition, cursorPosition);
+      } else {
+        if (element.selectionEnd >= _this2.cursorPosition && element.selectionStart === _this2.cursorPosition) {
+          element.setSelectionRange(element.selectionStart, cursorPosition);
+        } else {
+          element.setSelectionRange(value[element.selectionStart] === _this2.separatorThousands ? element.selectionStart + cursorIndex : element.selectionStart + 1, element.selectionEnd);
+        }
       }
-    }), l(d(r), "stepDown", function(e) {
-      var t = r.asProps, a = t.max, u = t.min, i = u === void 0 ? Number.MIN_SAFE_INTEGER : u, h = t.step, p = t.value, _;
-      if (p === "" ? _ = a ?? 0 : _ = Number.parseFloat(p), !Number.isNaN(_)) {
-        var v = _ - h >= i ? _ - h : i;
-        r.handlers.value(v.toString(), e);
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handleClick", function(event) {
+      var element = event.target;
+      var value = element.value;
+      if (value[element.selectionStart - 1] === _this2.separatorThousands) {
+        element.setSelectionRange(element.selectionStart - 1, element.selectionEnd - 1);
       }
-    }), r;
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handleBlur", function(event) {
+      _this2.cursorPosition = -1;
+      _this2.handleValidation(event);
+    });
+    _defineProperty(_assertThisInitialized(_this2), "stepUp", function(event) {
+      var _this2$asProps3 = _this2.asProps, _this2$asProps3$max = _this2$asProps3.max, max = _this2$asProps3$max === void 0 ? Number.MAX_SAFE_INTEGER : _this2$asProps3$max, min = _this2$asProps3.min, step = _this2$asProps3.step, value = _this2$asProps3.value;
+      var numberValue;
+      if (value === "") {
+        numberValue = min !== null && min !== void 0 ? min : 0;
+      } else {
+        numberValue = Number.parseFloat(value);
+      }
+      if (!Number.isNaN(numberValue)) {
+        var newValue = numberValue + step <= max ? numberValue + step : max;
+        _this2.handlers.value(newValue.toString(), event);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this2), "stepDown", function(event) {
+      var _this2$asProps4 = _this2.asProps, max = _this2$asProps4.max, _this2$asProps4$min = _this2$asProps4.min, min = _this2$asProps4$min === void 0 ? Number.MIN_SAFE_INTEGER : _this2$asProps4$min, step = _this2$asProps4.step, value = _this2$asProps4.value;
+      var numberValue;
+      if (value === "") {
+        numberValue = max !== null && max !== void 0 ? max : 0;
+      } else {
+        numberValue = Number.parseFloat(value);
+      }
+      if (!Number.isNaN(numberValue)) {
+        var newValue = numberValue - step >= min ? numberValue - step : min;
+        _this2.handlers.value(newValue.toString(), event);
+      }
+    });
+    return _this2;
   }
-  return I(c, [{
+  _createClass(Value2, [{
     key: "uncontrolledProps",
-    value: function() {
-      var n = this;
+    value: function uncontrolledProps() {
+      var _this3 = this;
       return {
         displayValue: null,
-        value: [null, function(s) {
-          var o = n.asProps, e = o.value, t = o.displayValue, a = n.valueParser(s, e, t), u = a.parsedValue, i = a.displayValue;
-          return n.handlers.displayValue(i), u;
+        value: [null, function(newValue) {
+          var _this3$asProps = _this3.asProps, prevValue = _this3$asProps.value, prevDisplayValue = _this3$asProps.displayValue;
+          var _this3$valueParser = _this3.valueParser(newValue, prevValue, prevDisplayValue), parsedValue = _this3$valueParser.parsedValue, displayValue = _this3$valueParser.displayValue;
+          _this3.handlers.displayValue(displayValue);
+          return parsedValue;
         }]
       };
     }
   }, {
     key: "separatorDecimal",
-    get: function() {
-      var n = this.props.numberFormatter;
-      return n.format(11.11).replace(/\d/g, "");
+    get: function get() {
+      var numberFormatter = this.props.numberFormatter;
+      return numberFormatter.format(11.11).replace(/\d/g, "");
     }
   }, {
     key: "separatorThousands",
-    get: function() {
-      var n = this.props.numberFormatter;
-      return n.format(1111).replace(/\d/g, "");
+    get: function get() {
+      var numberFormatter = this.props.numberFormatter;
+      return numberFormatter.format(1111).replace(/\d/g, "");
     }
   }, {
     key: "round",
-    value: function(n, s) {
-      var o = Math.floor(s) === s ? 0 : s.toString().split(".")[1].length || 0;
-      return o === 0 ? Number.parseFloat(n) : Number.parseFloat(n).toPrecision(o);
+    value: function round(value, step) {
+      var countDecimals = Math.floor(step) === step ? 0 : step.toString().split(".")[1].length || 0;
+      return countDecimals === 0 ? Number.parseFloat(value) : Number.parseFloat(value).toPrecision(countDecimals);
     }
   }, {
     key: "componentDidMount",
     value: (
       // https://stackoverflow.com/questions/57358640/cancel-wheel-event-with-e-preventdefault-in-react-event-bubbling
-      function() {
-        var n;
-        (n = this.valueInputRef.current) === null || n === void 0 || n.addEventListener("wheel", this.onWheel);
-        var s = this.asProps, o = s.inputRef, e = s.value;
-        if (o.current && (o.current.stepUp = this.stepUp, o.current.stepDown = this.stepDown), e !== "") {
-          var t = this.valueParser(e, "", ""), a = t.displayValue;
-          this.handlers.displayValue(a);
+      function componentDidMount() {
+        var _this$valueInputRef$c;
+        (_this$valueInputRef$c = this.valueInputRef.current) === null || _this$valueInputRef$c === void 0 ? void 0 : _this$valueInputRef$c.addEventListener("wheel", this.onWheel);
+        var _this$asProps2 = this.asProps, inputRef = _this$asProps2.inputRef, value = _this$asProps2.value;
+        if (inputRef.current) {
+          inputRef.current.stepUp = this.stepUp;
+          inputRef.current.stepDown = this.stepDown;
+        }
+        if (value !== "") {
+          var _this$valueParser = this.valueParser(value, "", ""), displayValue = _this$valueParser.displayValue;
+          this.handlers.displayValue(displayValue);
         }
       }
     )
   }, {
     key: "componentDidUpdate",
-    value: function(n) {
-      if (n.value !== this.props.value) {
-        var s = this.valueParser(this.props.value, n.value, n.displayValue), o = s.displayValue;
-        this.handlers.displayValue(o);
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.value !== this.props.value) {
+        var _this$valueParser2 = this.valueParser(this.props.value, prevProps.value, prevProps.displayValue), displayValue = _this$valueParser2.displayValue;
+        this.handlers.displayValue(displayValue);
       }
     }
   }, {
     key: "componentWillUnmount",
-    value: function() {
-      var n;
-      (n = this.valueInputRef.current) === null || n === void 0 || n.removeEventListener("wheel", this.onWheel);
+    value: function componentWillUnmount() {
+      var _this$valueInputRef$c2;
+      (_this$valueInputRef$c2 = this.valueInputRef.current) === null || _this$valueInputRef$c2 === void 0 ? void 0 : _this$valueInputRef$c2.removeEventListener("wheel", this.onWheel);
     }
   }, {
     key: "render",
-    value: function() {
-      var n = this.asProps, s, o = D.Value, e = this.asProps, t = e.styles, a = e.min, u = e.max, i = e.step, h = e.forwardRef, p = e.inputRef, _ = e.displayValue;
-      return s = V(t), /* @__PURE__ */ m.createElement(m.Fragment, null, /* @__PURE__ */ m.createElement(o, s.cn("SValue", w({}, R({
-        autoComplete: "off",
-        onBlur: this.handleValidation,
+    value: function render() {
+      var _ref2 = this.asProps, _ref5;
+      var SValue = Input.Value;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, min = _this$asProps3.min, max = _this$asProps3.max, step = _this$asProps3.step, forwardRef = _this$asProps3.forwardRef, inputRef = _this$asProps3.inputRef, displayValue = _this$asProps3.displayValue;
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
+        "autoComplete": "off",
+        "onBlur": this.handleValidation,
         "use:onChange": this.handleChange,
-        onKeyDown: this.handleKeyDown,
-        onKeyUp: this.handleKeyUp,
-        onClick: this.handleClick,
-        "use:ref": L(this.valueInputRef, p, h),
-        "use:value": _,
-        inputMode: Number.isInteger(i) ? "numeric" : "decimal",
-        min: a,
-        max: u,
-        step: i
-      }, n)))));
+        "onKeyDown": this.handleKeyDown,
+        "onKeyUp": this.handleKeyUp,
+        "onClick": this.handleClick,
+        "use:ref": forkRef(this.valueInputRef, inputRef, forwardRef),
+        "use:value": displayValue,
+        "inputMode": Number.isInteger(step) ? "numeric" : "decimal",
+        "min": min,
+        "max": max,
+        "step": step
+      }, _ref2)))));
     }
-  }]), c;
-}($);
-l(E, "style", N);
-l(E, "defaultProps", {
+  }]);
+  return Value2;
+}(Component);
+_defineProperty(Value, "style", style);
+_defineProperty(Value, "defaultProps", {
   defaultValue: "",
   defaultDisplayValue: "",
   step: 1
 });
-function T(f) {
-  var g = arguments[0], c, r = f.Children, n = f.increment, s = f.decrement, o = f.size, e = f.styles, t = f.getI18nText, a = D.Addon, u = "button", i = "button";
-  return c = V(e), /* @__PURE__ */ m.createElement(a, c.cn("SControls", w({}, R({
+function Controls(props) {
+  var _ref3 = arguments[0], _ref6;
+  var Children = props.Children, increment = props.increment, decrement = props.decrement, size = props.size, styles = props.styles, getI18nText = props.getI18nText;
+  var SControls = Input.Addon;
+  var SUp = "button";
+  var SDown = "button";
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SControls, _ref6.cn("SControls", _objectSpread({}, assignProps({
     "aria-hidden": "true"
-  }, g))), /* @__PURE__ */ m.createElement(u, c.cn("SUp", {
-    onClick: n,
-    tabIndex: -1,
-    type: "button",
-    size: o,
-    "aria-label": t("increment")
-  }), /* @__PURE__ */ m.createElement(z, c.cn("IncrementIcon", {}))), /* @__PURE__ */ m.createElement(i, c.cn("SDown", {
-    onClick: s,
-    tabIndex: -1,
-    type: "button",
-    size: o,
-    "aria-label": t("decrement")
-  }), /* @__PURE__ */ m.createElement(W, c.cn("DecrementIcon", {}))), /* @__PURE__ */ m.createElement(r, c.cn("Children", {})));
+  }, _ref3))), /* @__PURE__ */ React.createElement(SUp, _ref6.cn("SUp", {
+    "onClick": increment,
+    "tabIndex": -1,
+    "type": "button",
+    "size": size,
+    "aria-label": getI18nText("increment")
+  }), /* @__PURE__ */ React.createElement(IncrementIcon, _ref6.cn("IncrementIcon", {}))), /* @__PURE__ */ React.createElement(SDown, _ref6.cn("SDown", {
+    "onClick": decrement,
+    "tabIndex": -1,
+    "type": "button",
+    "size": size,
+    "aria-label": getI18nText("decrement")
+  }), /* @__PURE__ */ React.createElement(DecrementIcon, _ref6.cn("DecrementIcon", {}))), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
 }
-T.style = N;
-const se = M(P, {
-  Value: E,
-  Controls: T,
-  Addon: D.Addon
+Controls.style = style;
+const InputNumber$1 = createComponent(InputNumber, {
+  Value,
+  Controls,
+  Addon: Input.Addon
 });
 export {
-  se as default,
-  G as parseValueWithMinMax
+  InputNumber$1 as default,
+  parseValueWithMinMax
 };

package/lib/esm/buttons.mjs

@@ -1,24 +1,25 @@
-import e from "react";
-var n = function() {
-  return /* @__PURE__ */ e.createElement("svg", {
+import React from "react";
+var IncrementIcon = function IncrementIcon2() {
+  return /* @__PURE__ */ React.createElement("svg", {
     fill: "currentColor",
     width: "10",
     height: "5",
     viewBox: "0 0 10 5"
-  }, /* @__PURE__ */ e.createElement("path", {
+  }, /* @__PURE__ */ React.createElement("path", {
     d: "M0,5l5,-5l5,5Z"
   }));
-}, c = function() {
-  return /* @__PURE__ */ e.createElement("svg", {
+};
+var DecrementIcon = function DecrementIcon2() {
+  return /* @__PURE__ */ React.createElement("svg", {
     fill: "currentColor",
     width: "10",
     height: "5",
     viewBox: "0 0 10 5"
-  }, /* @__PURE__ */ e.createElement("path", {
+  }, /* @__PURE__ */ React.createElement("path", {
     d: "M0,0l10,0l-5,5Z"
   }));
 };
 export {
-  c as DecrementIcon,
-  n as IncrementIcon
+  DecrementIcon,
+  IncrementIcon
 };

package/lib/esm/index.mjs

@@ -1,8 +1,8 @@
-import { default as n, parseValueWithMinMax as o } from "./InputNumber.mjs";
-import { DecrementIcon as a, IncrementIcon as c } from "./buttons.mjs";
+import { default as default2, parseValueWithMinMax } from "./InputNumber.mjs";
+import { DecrementIcon, IncrementIcon } from "./buttons.mjs";
 export {
-  a as DecrementIcon,
-  c as IncrementIcon,
-  n as default,
-  o as parseValueWithMinMax
+  DecrementIcon,
+  IncrementIcon,
+  default2 as default,
+  parseValueWithMinMax
 };

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

package/lib/esm/translations/de.json.mjs

@@ -1,9 +1,11 @@
-const e = "Zahl erhöhen", n = "Zahl verringern", r = {
-  increment: e,
-  decrement: n
+const increment = "Zahl erhöhen";
+const decrement = "Zahl verringern";
+const de = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  r as default,
-  e as increment
+  decrement,
+  de as default,
+  increment
 };

package/lib/esm/translations/en.json.mjs

@@ -1,9 +1,11 @@
-const e = "Increment number", n = "Decrement number", t = {
-  increment: e,
-  decrement: n
+const increment = "Increment number";
+const decrement = "Decrement number";
+const en = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  t as default,
-  e as increment
+  decrement,
+  en as default,
+  increment
 };

package/lib/esm/translations/es.json.mjs

@@ -1,9 +1,11 @@
-const e = "Incrementar número", n = "Descenso de número", t = {
-  increment: e,
-  decrement: n
+const increment = "Incrementar número";
+const decrement = "Descenso de número";
+const es = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  t as default,
-  e as increment
+  decrement,
+  es as default,
+  increment
 };

package/lib/esm/translations/fr.json.mjs

@@ -1,9 +1,11 @@
-const e = "Incrémenter le nombre", n = "Décrémenter le nombre", r = {
-  increment: e,
-  decrement: n
+const increment = "Incrémenter le nombre";
+const decrement = "Décrémenter le nombre";
+const fr = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  r as default,
-  e as increment
+  decrement,
+  fr as default,
+  increment
 };

package/lib/esm/translations/it.json.mjs

@@ -1,9 +1,11 @@
-const e = "Aumenta il numero", n = "Riduci il numero", t = {
-  increment: e,
-  decrement: n
+const increment = "Aumenta il numero";
+const decrement = "Riduci il numero";
+const it = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  t as default,
-  e as increment
+  decrement,
+  it as default,
+  increment
 };

package/lib/esm/translations/ja.json.mjs

@@ -1,9 +1,11 @@
-const e = "上昇番号", n = "下降番号", t = {
-  increment: e,
-  decrement: n
+const increment = "上昇番号";
+const decrement = "下降番号";
+const ja = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  t as default,
-  e as increment
+  decrement,
+  ja as default,
+  increment
 };

package/lib/esm/translations/ko.json.mjs

@@ -1,9 +1,11 @@
-const e = "더 큰 숫자 입력", n = "더 작은 숫자 입력", t = {
-  increment: e,
-  decrement: n
+const increment = "더 큰 숫자 입력";
+const decrement = "더 작은 숫자 입력";
+const ko = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  t as default,
-  e as increment
+  decrement,
+  ko as default,
+  increment
 };

package/lib/esm/translations/nl.json.mjs

@@ -1,9 +1,11 @@
-const e = "Nummer verhogen", n = "Nummer verlagen", r = {
-  increment: e,
-  decrement: n
+const increment = "Nummer verhogen";
+const decrement = "Nummer verlagen";
+const nl = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  r as default,
-  e as increment
+  decrement,
+  nl as default,
+  increment
 };

package/lib/esm/translations/pl.json.mjs

@@ -1,9 +1,11 @@
-const e = "Zwiększ liczbę", n = "Zmniejsz liczbę", c = {
-  increment: e,
-  decrement: n
+const increment = "Zwiększ liczbę";
+const decrement = "Zmniejsz liczbę";
+const pl = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  c as default,
-  e as increment
+  decrement,
+  pl as default,
+  increment
 };

package/lib/esm/translations/pt.json.mjs

@@ -1,9 +1,11 @@
-const e = "Aumentar número", n = "Diminuir número", t = {
-  increment: e,
-  decrement: n
+const increment = "Aumentar número";
+const decrement = "Diminuir número";
+const pt = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  t as default,
-  e as increment
+  decrement,
+  pt as default,
+  increment
 };

package/lib/esm/translations/sv.json.mjs

@@ -1,9 +1,11 @@
-const n = "Ökning av antal", e = "Minskning av antal", t = {
-  increment: n,
-  decrement: e
+const increment = "Ökning av antal";
+const decrement = "Minskning av antal";
+const sv = {
+  increment,
+  decrement
 };
 export {
-  e as decrement,
-  t as default,
-  n as increment
+  decrement,
+  sv as default,
+  increment
 };

package/lib/esm/translations/tr.json.mjs

@@ -1,9 +1,11 @@
-const e = "Sayıyı artır", t = "Sayıyı azalt", n = {
-  increment: e,
-  decrement: t
+const increment = "Sayıyı artır";
+const decrement = "Sayıyı azalt";
+const tr = {
+  increment,
+  decrement
 };
 export {
-  t as decrement,
-  n as default,
-  e as increment
+  decrement,
+  tr as default,
+  increment
 };

package/lib/esm/translations/vi.json.mjs

@@ -1,9 +1,11 @@
-const e = "Tăng số", n = "Giảm số", t = {
-  increment: e,
-  decrement: n
+const increment = "Tăng số";
+const decrement = "Giảm số";
+const vi = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  t as default,
-  e as increment
+  decrement,
+  vi as default,
+  increment
 };

package/lib/esm/translations/zh.json.mjs

@@ -1,9 +1,11 @@
-const e = "增量", n = "减量", t = {
-  increment: e,
-  decrement: n
+const increment = "增量";
+const decrement = "减量";
+const zh = {
+  increment,
+  decrement
 };
 export {
-  n as decrement,
-  t as default,
-  e as increment
+  decrement,
+  zh as default,
+  increment
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/input-number",
   "description": "Semrush InputNumber Component",
-  "version": "16.0.0-prerelease.6",
+  "version": "16.0.0-prerelease.9",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,11 +14,11 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/input": "16.0.0-prerelease.6",
-    "@semcore/flex-box": "16.0.0-prerelease.6"
+    "@semcore/input": "16.0.0-prerelease.9",
+    "@semcore/flex-box": "16.0.0-prerelease.9"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.6"
+    "@semcore/base-components": "^16.0.0-prerelease.9"
   },
   "repository": {
     "type": "git",