@semcore/input-number 16.0.11 → 17.0.0-prerelease.17

package/lib/cjs/InputNumber.js

@@ -1,17 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 exports.parseValueWithMinMax = parseValueWithMinMax;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _assignProps4 = require("@semcore/core/lib/utils/assignProps");
@@ -22,116 +16,95 @@ var _react = _interopRequireDefault(require("react"));
 var _buttons = require("./buttons");
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 /*!__reshadow-styles__:"./style/input-number.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SValue_1npkq_gg_:focus~.___SControls_1npkq_gg_{display:flex}.___SControls_1npkq_gg_{display:none;flex-flow:column;justify-content:center;height:100%;box-sizing:border-box}.___SControls_1npkq_gg_.__showControls_1npkq_gg_{display:flex}.___SDown_1npkq_gg_,.___SUp_1npkq_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_1npkq_gg_:focus,.___SUp_1npkq_gg_:focus{outline:0}@media (hover:hover){.___SDown_1npkq_gg_:hover,.___SUp_1npkq_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SUp_1npkq_gg_{padding-bottom:1px}.___SDown_1npkq_gg_{padding-top:1px}.___SValue_1npkq_gg_::-webkit-inner-spin-button,.___SValue_1npkq_gg_::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.___SValue_1npkq_gg_._type_number_1npkq_gg_{-moz-appearance:textfield}.___SValue_1npkq_gg_.__disabled_1npkq_gg_~.___SControls_1npkq_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SValueHidden_1npkq_gg_{position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden}", /*__inner_css_end__*/"1npkq_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SValue_1jona_gg_:focus~.___SControls_1jona_gg_{display:flex}.___SControls_1jona_gg_{display:none;flex-flow:column;justify-content:center;height:100%;box-sizing:border-box}.___SControls_1jona_gg_.__showControls_1jona_gg_{display:flex}.___SDown_1jona_gg_,.___SUp_1jona_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_1jona_gg_:focus,.___SUp_1jona_gg_:focus{outline:0}@media (hover:hover){.___SDown_1jona_gg_:hover,.___SUp_1jona_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SUp_1jona_gg_{padding-bottom:1px}.___SDown_1jona_gg_{padding-top:1px}.___SValue_1jona_gg_::-webkit-inner-spin-button,.___SValue_1jona_gg_::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.___SValue_1jona_gg_._type_number_1jona_gg_{-moz-appearance:textfield}.___SValue_1jona_gg_.__disabled_1jona_gg_~.___SControls_1jona_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SValueHidden_1jona_gg_{position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden}", /*__inner_css_end__*/"1jona_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SValue": "___SValue_1npkq_gg_",
-  "__SControls": "___SControls_1npkq_gg_",
-  "_showControls": "__showControls_1npkq_gg_",
-  "__SUp": "___SUp_1npkq_gg_",
-  "__SDown": "___SDown_1npkq_gg_",
-  "_disabled": "__disabled_1npkq_gg_",
-  "__SValueHidden": "___SValueHidden_1npkq_gg_",
-  "_type_number": "_type_number_1npkq_gg_"
+  "__SValue": "___SValue_1jona_gg_",
+  "__SControls": "___SControls_1jona_gg_",
+  "_showControls": "__showControls_1jona_gg_",
+  "__SUp": "___SUp_1jona_gg_",
+  "__SDown": "___SDown_1jona_gg_",
+  "_disabled": "__disabled_1jona_gg_",
+  "__SValueHidden": "___SValueHidden_1jona_gg_",
+  "_type_number": "_type_number_1jona_gg_"
 });
-function parseValueWithMinMax(value) {
-  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Number.MIN_SAFE_INTEGER;
-  var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Number.MAX_SAFE_INTEGER;
+function parseValueWithMinMax(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
   return Math.max(min, Math.min(max, value));
 }
-var InputNumber = /*#__PURE__*/function (_Component) {
-  function InputNumber() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, InputNumber);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, InputNumber, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "inputRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "increment", function (event) {
-      var _this$inputRef$curren, _this$inputRef$curren2;
-      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 || (_this$inputRef$curren2 = _this$inputRef$curren.stepUp) === null || _this$inputRef$curren2 === void 0 || _this$inputRef$curren2.call(_this$inputRef$curren, event);
+class InputNumber extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "inputRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "increment", event => {
+      this.inputRef.current?.stepUp?.(event);
     });
-    (0, _defineProperty2["default"])(_this, "decrement", function (event) {
-      var _this$inputRef$curren3, _this$inputRef$curren4;
-      (_this$inputRef$curren3 = _this.inputRef.current) === null || _this$inputRef$curren3 === void 0 || (_this$inputRef$curren4 = _this$inputRef$curren3.stepDown) === null || _this$inputRef$curren4 === void 0 || _this$inputRef$curren4.call(_this$inputRef$curren3, event);
+    (0, _defineProperty2.default)(this, "decrement", event => {
+      this.inputRef.current?.stepDown?.(event);
     });
-    return _this;
   }
-  (0, _inherits2["default"])(InputNumber, _Component);
-  return (0, _createClass2["default"])(InputNumber, [{
-    key: "getValueProps",
-    value: function getValueProps() {
-      var numberFormatter = new Intl.NumberFormat(this.asProps.locale, {
-        style: 'decimal'
-      });
-      return {
-        inputRef: this.inputRef,
-        increment: this.increment,
-        decrement: this.decrement,
-        numberFormatter: numberFormatter
-      };
-    }
-  }, {
-    key: "getControlsProps",
-    value: function getControlsProps() {
-      var _this$asProps = this.asProps,
-        size = _this$asProps.size,
-        getI18nText = _this$asProps.getI18nText;
-      return {
-        size: size,
-        increment: this.increment,
-        decrement: this.decrement,
-        getI18nText: getI18nText
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref4;
-      var SInputNumber = _input["default"];
-      return _ref4 = (0, _core.sstyled)(this.asProps.style), /*#__PURE__*/_react["default"].createElement(SInputNumber, _ref4.cn("SInputNumber", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(InputNumber, "displayName", 'InputNumber');
-(0, _defineProperty2["default"])(InputNumber, "style", style);
-(0, _defineProperty2["default"])(InputNumber, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
-(0, _defineProperty2["default"])(InputNumber, "defaultProps", {
+  getValueProps() {
+    const numberFormatter = new Intl.NumberFormat(this.asProps.locale, {
+      style: 'decimal'
+    });
+    return {
+      inputRef: this.inputRef,
+      increment: this.increment,
+      decrement: this.decrement,
+      numberFormatter
+    };
+  }
+  getControlsProps() {
+    const {
+      size,
+      getI18nText
+    } = this.asProps;
+    return {
+      size,
+      increment: this.increment,
+      decrement: this.decrement,
+      getI18nText
+    };
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref4;
+    const SInputNumber = _input.default;
+    return _ref4 = (0, _core.sstyled)(this.asProps.style), /*#__PURE__*/_react.default.createElement(SInputNumber, _ref4.cn("SInputNumber", {
+      ...(0, _core.assignProps)({}, _ref)
+    }));
+  }
+}
+(0, _defineProperty2.default)(InputNumber, "displayName", 'InputNumber');
+(0, _defineProperty2.default)(InputNumber, "style", style);
+(0, _defineProperty2.default)(InputNumber, "enhance", [(0, _i18nEnhance.default)(_intergalacticDynamicLocales.localizedMessages)]);
+(0, _defineProperty2.default)(InputNumber, "defaultProps", {
   size: 'm',
   i18n: _intergalacticDynamicLocales.localizedMessages,
   locale: 'en'
 });
-var Value = /*#__PURE__*/function (_Component2) {
-  function Value() {
-    var _this2;
-    (0, _classCallCheck2["default"])(this, Value);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this2 = (0, _callSuper2["default"])(this, Value, [].concat(args));
-    (0, _defineProperty2["default"])(_this2, "valueInputRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this2, "cursorPosition", -1);
-    (0, _defineProperty2["default"])(_this2, "getFormattedValue", function (value) {
-      return value.replace(new RegExp("[".concat(_this2.separatorThousands, "]"), 'g'), '').replace(_this2.separatorDecimal, '.');
+class Value extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "valueInputRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "cursorPosition", -1);
+    (0, _defineProperty2.default)(this, "getFormattedValue", value => {
+      return value.replace(new RegExp(`[${this.separatorThousands}]`, 'g'), '').replace(this.separatorDecimal, '.');
     });
-    (0, _defineProperty2["default"])(_this2, "valueParser", function (value, prevValue, prevDisplayValue) {
-      var numberFormatter = _this2.props.numberFormatter;
-      var stringNumber = _this2.getFormattedValue(String(value));
+    (0, _defineProperty2.default)(this, "valueParser", (value, prevValue, prevDisplayValue) => {
+      const {
+        numberFormatter
+      } = this.props;
+      const stringNumber = this.getFormattedValue(String(value));
       if (Number.isNaN(Number(stringNumber))) {
         return {
           parsedValue: prevValue,
           displayValue: prevDisplayValue
         };
       }
-      var displayValue = '';
+      let displayValue = '';
       if (/\.[0-9]*0$/.test(stringNumber)) {
-        var _stringNumber$split = stringNumber.split(_this2.separatorDecimal),
-          _stringNumber$split2 = (0, _slicedToArray2["default"])(_stringNumber$split, 2),
-          _int = _stringNumber$split2[0],
-          decimal = _stringNumber$split2[1];
-        displayValue = numberFormatter.format(_int) + _this2.separatorDecimal + decimal;
+        const [int, decimal] = stringNumber.split(this.separatorDecimal);
+        displayValue = numberFormatter.format(int) + this.separatorDecimal + decimal;
       } else if (stringNumber !== '') {
         displayValue = numberFormatter.format(stringNumber);
       }
@@ -140,22 +113,24 @@ var Value = /*#__PURE__*/function (_Component2) {
         displayValue: displayValue
       };
     });
-    (0, _defineProperty2["default"])(_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;
+    (0, _defineProperty2.default)(this, "handleValidation", event => {
+      const {
+        value,
+        displayValue,
+        min,
+        max,
+        step
+      } = this.asProps;
+      const {
+        parsedValue
+      } = this.valueParser(event.currentTarget.value, value, displayValue);
+      const 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);
+        this.handlers.value('', event);
       } else {
-        var numberValue = parseValueWithMinMax(Number.parseFloat(parsedValue), min, max);
-        var rounded = _this2.round(numberValue % step, step);
+        let numberValue = parseValueWithMinMax(Number.parseFloat(parsedValue), min, max);
+        const rounded = this.round(numberValue % step, step);
         if (rounded !== 0) {
           if (rounded >= step / 2) {
             numberValue += step - rounded;
@@ -163,30 +138,31 @@ var Value = /*#__PURE__*/function (_Component2) {
             numberValue -= rounded;
           }
         }
-        var numberValueRounded = Number(numberValue.toFixed(roundCoefficient));
-        _this2.handlers.value(String(numberValueRounded), event);
+        const numberValueRounded = Number(numberValue.toFixed(roundCoefficient));
+        this.handlers.value(String(numberValueRounded), event);
       }
     });
-    (0, _defineProperty2["default"])(_this2, "onWheel", function (event) {
-      (0, _assignProps4.callAllEventHandlers)(_this2.asProps.onWheel, _this2.handleWheel)(event);
+    (0, _defineProperty2.default)(this, "onWheel", event => {
+      (0, _assignProps4.callAllEventHandlers)(this.asProps.onWheel, this.handleWheel)(event);
     });
-    (0, _defineProperty2["default"])(_this2, "handleWheel", function (event) {
-      if (event.target !== _this2.valueInputRef.current) return;
-      if (document.activeElement !== _this2.valueInputRef.current) return;
+    (0, _defineProperty2.default)(this, "handleWheel", event => {
+      if (event.target !== this.valueInputRef.current) return;
+      if (document.activeElement !== this.valueInputRef.current) return;
       event.preventDefault();
       if (event.wheelDelta > 0) {
-        _this2.stepUp(event);
+        this.stepUp(event);
       } else if (event.wheelDelta < 0) {
-        _this2.stepDown(event);
+        this.stepDown(event);
       }
     });
-    (0, _defineProperty2["default"])(_this2, "handleChange", function (event) {
-      var value = _this2.getFormattedValue(event.currentTarget.value);
-      var _this2$asProps2 = _this2.asProps,
-        numberFormatter = _this2$asProps2.numberFormatter,
-        prevValue = _this2$asProps2.value;
+    (0, _defineProperty2.default)(this, "handleChange", event => {
+      const value = this.getFormattedValue(event.currentTarget.value);
+      const {
+        numberFormatter,
+        value: prevValue
+      } = this.asProps;
       if (value === '.' || value === '-') {
-        _this2.handlers.displayValue(value);
+        this.handlers.displayValue(value);
         return false;
       }
       if (value.endsWith('-')) {
@@ -194,52 +170,54 @@ var Value = /*#__PURE__*/function (_Component2) {
       }
       if (value.endsWith('.')) {
         if (value.length > prevValue.length) {
-          _this2.handlers.displayValue(numberFormatter.format(value) + _this2.separatorDecimal);
+          this.handlers.displayValue(numberFormatter.format(value) + this.separatorDecimal);
           return false;
         } else {
-          _this2.handlers.value(value.slice(0, -1), event);
+          this.handlers.value(value.slice(0, -1), event);
           return false;
         }
       }
-      var digits = /^[0-9.-]+$/.test(value);
+      const digits = /^[0-9.-]+$/.test(value);
       if (digits || value === '') {
-        _this2.handlers.value(value, event);
+        this.handlers.value(value, event);
       }
     });
-    (0, _defineProperty2["default"])(_this2, "handleKeyUp", function (event) {
+    (0, _defineProperty2.default)(this, "handleKeyUp", event => {
       if (event.key === 'Shift') {
-        _this2.cursorPosition = -1;
+        this.cursorPosition = -1;
       }
     });
-    (0, _defineProperty2["default"])(_this2, "handleKeyDown", function (event) {
-      var element = event.currentTarget;
-      var value = element.value;
-      var length = value.length;
-      var displayValue = _this2.asProps.displayValue;
+    (0, _defineProperty2.default)(this, "handleKeyDown", event => {
+      const element = event.currentTarget;
+      const value = element.value;
+      const length = value.length;
+      const {
+        displayValue
+      } = this.asProps;
       if (event.key === '.' || event.key === ',') {
         // for the first decimal separator we should replace both ',' and '.' to '.' because of how js convert strings to numbers (with ',' it will be Number.NaN)
-        if (value.indexOf(_this2.separatorDecimal) === -1 && event.key === ',') {
+        if (value.indexOf(this.separatorDecimal) === -1 && event.key === ',') {
           event.currentTarget.value = value + '.';
-        } else if (value.indexOf(_this2.separatorDecimal) !== -1) {
+        } else if (value.indexOf(this.separatorDecimal) !== -1) {
           // we could press decimal separator second time - prevent this '1.5.'
           event.preventDefault();
           event.stopPropagation();
           return;
         }
       }
-      if (event.key === 'Backspace' && value.endsWith(_this2.separatorDecimal)) {
+      if (event.key === 'Backspace' && value.endsWith(this.separatorDecimal)) {
         event.preventDefault();
         event.stopPropagation();
-        _this2.handlers.displayValue(displayValue.slice(0, -1));
+        this.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 newValue = _this2.state.displayValue;
-          var index = newValue.lastIndexOf(afterSelection);
-          var selectionStart = index;
-          var selectionEnd = index;
+      if (element.selectionStart !== length && (event.key === 'Backspace' || event.key === this.separatorDecimal || ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(event.key))) {
+        const afterSelection = value.slice(element.selectionEnd);
+        requestAnimationFrame(() => {
+          const newValue = this.state.displayValue;
+          const index = newValue.lastIndexOf(afterSelection);
+          const selectionStart = index;
+          const selectionEnd = index;
           element.setSelectionRange(selectionStart, selectionEnd);
         });
       }
@@ -248,205 +226,194 @@ var Value = /*#__PURE__*/function (_Component2) {
       // Examples:
       // - Press ArrowLeft: `12,3|4 -> 12|,34`
       // - Press ArrowRight: `1|,55 -> 1,5|5`
-      var cursorIndex = 2;
-      if (event.shiftKey && _this2.cursorPosition === -1) {
-        _this2.cursorPosition = element.selectionStart;
+      const cursorIndex = 2;
+      if (event.shiftKey && this.cursorPosition === -1) {
+        this.cursorPosition = element.selectionStart;
       }
       switch (event.key) {
         case 'ArrowLeft':
           {
             event.preventDefault();
-            _this2.moveSelectionLeft(element, cursorIndex);
+            this.moveSelectionLeft(element, cursorIndex);
             break;
           }
         case 'ArrowRight':
           {
             event.preventDefault();
-            _this2.moveSelectionRight(element, cursorIndex);
+            this.moveSelectionRight(element, cursorIndex);
             break;
           }
         case 'ArrowDown':
           {
             event.preventDefault();
-            _this2.stepDown(event);
+            this.stepDown(event);
             break;
           }
         case 'ArrowUp':
           {
             event.preventDefault();
-            _this2.stepUp(event);
+            this.stepUp(event);
             break;
           }
       }
     });
-    (0, _defineProperty2["default"])(_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) {
+    (0, _defineProperty2.default)(this, "moveSelectionLeft", (element, cursorIndex) => {
+      const value = element.value;
+      const nextPosition = element.selectionStart - 1 >= 0 ? element.selectionStart - 1 : 0;
+      const cursorPosition = value[element.selectionStart - cursorIndex] === this.separatorThousands ? element.selectionStart - cursorIndex : nextPosition;
+      if (this.cursorPosition === -1) {
         // without shift
         element.setSelectionRange(cursorPosition, cursorPosition);
       } else {
-        if (element.selectionStart <= _this2.cursorPosition && element.selectionEnd === _this2.cursorPosition) {
+        if (element.selectionStart <= this.cursorPosition && element.selectionEnd === this.cursorPosition) {
           element.setSelectionRange(cursorPosition, element.selectionEnd);
         } else {
-          element.setSelectionRange(element.selectionStart, value[element.selectionEnd - cursorIndex] === _this2.separatorThousands ? element.selectionEnd - cursorIndex : element.selectionEnd - 1);
+          element.setSelectionRange(element.selectionStart, value[element.selectionEnd - cursorIndex] === this.separatorThousands ? element.selectionEnd - cursorIndex : element.selectionEnd - 1);
         }
       }
     });
-    (0, _defineProperty2["default"])(_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) {
+    (0, _defineProperty2.default)(this, "moveSelectionRight", (element, cursorIndex) => {
+      const value = element.value;
+      const nextPosition = element.selectionEnd + 1;
+      const cursorPosition = value[element.selectionEnd] === this.separatorThousands ? element.selectionEnd + cursorIndex : nextPosition;
+      if (this.cursorPosition === -1) {
         // without shift
         element.setSelectionRange(cursorPosition, cursorPosition);
       } else {
-        if (element.selectionEnd >= _this2.cursorPosition && element.selectionStart === _this2.cursorPosition) {
+        if (element.selectionEnd >= this.cursorPosition && element.selectionStart === this.cursorPosition) {
           element.setSelectionRange(element.selectionStart, cursorPosition);
         } else {
-          element.setSelectionRange(value[element.selectionStart] === _this2.separatorThousands ? element.selectionStart + cursorIndex : element.selectionStart + 1, element.selectionEnd);
+          element.setSelectionRange(value[element.selectionStart] === this.separatorThousands ? element.selectionStart + cursorIndex : element.selectionStart + 1, element.selectionEnd);
         }
       }
     });
-    (0, _defineProperty2["default"])(_this2, "handleClick", function (event) {
-      var element = event.target;
-      var value = element.value;
-      if (value[element.selectionStart - 1] === _this2.separatorThousands) {
+    (0, _defineProperty2.default)(this, "handleClick", event => {
+      const element = event.target;
+      const value = element.value;
+      if (value[element.selectionStart - 1] === this.separatorThousands) {
         element.setSelectionRange(element.selectionStart - 1, element.selectionEnd - 1);
       }
     });
-    (0, _defineProperty2["default"])(_this2, "handleBlur", function (event) {
-      _this2.cursorPosition = -1;
-      _this2.handleValidation(event);
+    (0, _defineProperty2.default)(this, "handleBlur", event => {
+      this.cursorPosition = -1;
+      this.handleValidation(event);
     });
-    (0, _defineProperty2["default"])(_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;
+    (0, _defineProperty2.default)(this, "stepUp", event => {
+      const {
+        max = Number.MAX_SAFE_INTEGER,
+        min,
+        step,
+        value
+      } = this.asProps;
+      let numberValue;
 
       // https://stackoverflow.com/questions/68010124/safari-number-input-stepup-stepdown-not-functioning-with-empty-value
       if (value === '') {
-        numberValue = min !== null && min !== void 0 ? min : 0;
+        numberValue = 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);
+        const newValue = numberValue + step <= max ? numberValue + step : max;
+        this.handlers.value(newValue.toString(), event);
       }
     });
-    (0, _defineProperty2["default"])(_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;
+    (0, _defineProperty2.default)(this, "stepDown", event => {
+      const {
+        max,
+        min = Number.MIN_SAFE_INTEGER,
+        step,
+        value
+      } = this.asProps;
+      let numberValue;
       if (value === '') {
-        numberValue = max !== null && max !== void 0 ? max : 0;
+        numberValue = 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);
+        const newValue = numberValue - step >= min ? numberValue - step : min;
+        this.handlers.value(newValue.toString(), event);
       }
     });
-    return _this2;
   }
-  (0, _inherits2["default"])(Value, _Component2);
-  return (0, _createClass2["default"])(Value, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      var _this3 = this;
-      return {
-        displayValue: null,
-        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 get() {
-      var numberFormatter = this.props.numberFormatter;
-      return numberFormatter.format(11.11).replace(/\d/g, '');
-    }
-  }, {
-    key: "separatorThousands",
-    get: function get() {
-      var numberFormatter = this.props.numberFormatter;
-      return numberFormatter.format(1111).replace(/\d/g, '');
-    }
-  }, {
-    key: "round",
-    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 componentDidMount() {
-      var _this$valueInputRef$c;
-      (_this$valueInputRef$c = this.valueInputRef.current) === null || _this$valueInputRef$c === 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;
+  uncontrolledProps() {
+    return {
+      displayValue: null,
+      value: [null, newValue => {
+        const {
+          value: prevValue,
+          displayValue: prevDisplayValue
+        } = this.asProps;
+        const {
+          parsedValue,
+          displayValue
+        } = this.valueParser(newValue, prevValue, prevDisplayValue);
         this.handlers.displayValue(displayValue);
-      }
+        return parsedValue;
+      }]
+    };
+  }
+  get separatorDecimal() {
+    const {
+      numberFormatter
+    } = this.props;
+    return numberFormatter.format(11.11).replace(/\d/g, '');
+  }
+  get separatorThousands() {
+    const {
+      numberFormatter
+    } = this.props;
+    return numberFormatter.format(1111).replace(/\d/g, '');
+  }
+  round(value, step) {
+    const countDecimals = Math.floor(step) === step ? 0 : step.toString().split('.')[1].length || 0;
+    return countDecimals === 0 ? Number.parseFloat(value) : Number.parseFloat(value).toPrecision(countDecimals);
+  }
+  // https://stackoverflow.com/questions/57358640/cancel-wheel-event-with-e-preventdefault-in-react-event-bubbling
+  componentDidMount() {
+    this.valueInputRef.current?.addEventListener('wheel', this.onWheel);
+    const {
+      inputRef,
+      value
+    } = this.asProps;
+    if (inputRef.current) {
+      inputRef.current.stepUp = this.stepUp;
+      inputRef.current.stepDown = this.stepDown;
     }
-  }, {
-    key: "componentDidUpdate",
-    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);
-      }
+    if (value !== '') {
+      const {
+        displayValue
+      } = this.valueParser(value, '', '');
+      this.handlers.displayValue(displayValue);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$valueInputRef$c2;
-      (_this$valueInputRef$c2 = this.valueInputRef.current) === null || _this$valueInputRef$c2 === void 0 || _this$valueInputRef$c2.removeEventListener('wheel', this.onWheel);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      const {
+        displayValue
+      } = this.valueParser(this.props.value, prevProps.value, prevProps.displayValue);
+      this.handlers.displayValue(displayValue);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps,
-        _ref5;
-      var SValue = _input["default"].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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SValue, _ref5.cn("SValue", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  }
+  componentWillUnmount() {
+    this.valueInputRef.current?.removeEventListener('wheel', this.onWheel);
+  }
+  render() {
+    var _ref2 = this.asProps,
+      _ref5;
+    const SValue = _input.default.Value;
+    const {
+      styles,
+      min,
+      max,
+      step,
+      forwardRef,
+      inputRef,
+      displayValue
+    } = this.asProps;
+    return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SValue, _ref5.cn("SValue", {
+      ...(0, _core.assignProps)({
         "autoComplete": 'off',
         "onBlur": this.handleValidation,
         "use:onChange": this.handleChange,
@@ -459,12 +426,12 @@ var Value = /*#__PURE__*/function (_Component2) {
         "min": min,
         "max": max,
         "step": step
-      }, _ref2)))));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(Value, "style", style);
-(0, _defineProperty2["default"])(Value, "defaultProps", {
+      }, _ref2)
+    })));
+  }
+}
+(0, _defineProperty2.default)(Value, "style", style);
+(0, _defineProperty2.default)(Value, "defaultProps", {
   defaultValue: '',
   defaultDisplayValue: '',
   step: 1
@@ -472,35 +439,39 @@ var Value = /*#__PURE__*/function (_Component2) {
 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["default"].Addon;
-  var SUp = 'button';
-  var SDown = 'button';
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SControls, _ref6.cn("SControls", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "aria-hidden": 'true'
-  }, _ref3))), /*#__PURE__*/_react["default"].createElement(SUp, _ref6.cn("SUp", {
+  const {
+    Children,
+    increment,
+    decrement,
+    size,
+    styles,
+    getI18nText
+  } = props;
+  const SControls = _input.default.Addon;
+  const SUp = 'button';
+  const SDown = 'button';
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SControls, _ref6.cn("SControls", {
+    ...(0, _core.assignProps)({
+      "aria-hidden": 'true'
+    }, _ref3)
+  }), /*#__PURE__*/_react.default.createElement(SUp, _ref6.cn("SUp", {
     "onClick": increment,
     "tabIndex": -1,
     "type": 'button',
     "size": size,
     "aria-label": getI18nText('increment')
-  }), /*#__PURE__*/_react["default"].createElement(_buttons.IncrementIcon, _ref6.cn("IncrementIcon", {}))), /*#__PURE__*/_react["default"].createElement(SDown, _ref6.cn("SDown", {
+  }), /*#__PURE__*/_react.default.createElement(_buttons.IncrementIcon, _ref6.cn("IncrementIcon", {}))), /*#__PURE__*/_react.default.createElement(SDown, _ref6.cn("SDown", {
     "onClick": decrement,
     "tabIndex": -1,
     "type": 'button',
     "size": size,
     "aria-label": getI18nText('decrement')
-  }), /*#__PURE__*/_react["default"].createElement(_buttons.DecrementIcon, _ref6.cn("DecrementIcon", {}))), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {})));
+  }), /*#__PURE__*/_react.default.createElement(_buttons.DecrementIcon, _ref6.cn("DecrementIcon", {}))), /*#__PURE__*/_react.default.createElement(Children, _ref6.cn("Children", {})));
 }
 Controls.style = style;
-var _default = exports["default"] = (0, _core.createComponent)(InputNumber, {
-  Value: Value,
-  Controls: Controls,
-  Addon: _input["default"].Addon
+var _default = exports.default = (0, _core.createComponent)(InputNumber, {
+  Value,
+  Controls,
+  Addon: _input.default.Addon
 });
 //# sourceMappingURL=InputNumber.js.map