intelicoreact 0.0.78 → 0.0.83

package/dist/Atomic/FormElements/Input/Input.js

@@ -19,12 +19,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactFeather = require("react-feather");
-
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
 var _index = require("../../../Constants/index.constants");
 
+var _inputExecutor = require("../../../Functions/inputExecutor");
+
 require("./Input.scss");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,30 +37,30 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var Input = function Input(_ref) {
   var onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onKeyUp = _ref.onKeyUp,
+      isNotBlinkErrors = _ref.isNotBlinkErrors,
+      isPriceInput = _ref.isPriceInput,
+      isOnlyNumber = _ref.isOnlyNumber,
+      isOnlyString = _ref.isOnlyString,
+      isTwoDigitAfterDot = _ref.isTwoDigitAfterDot,
       disabled = _ref.disabled,
       withDelete = _ref.withDelete,
-      isNumeric = _ref.isNumeric,
-      _ref$numStep = _ref.numStep,
-      numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
-      _ref$min = _ref.min,
-      min = _ref$min === void 0 ? 0 : _ref$min,
-      max = _ref.max,
       value = _ref.value,
       placeholder = _ref.placeholder,
       className = _ref.className,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onKeyUp = _ref.onKeyUp,
       mask = _ref.mask,
       maskChar = _ref.maskChar,
       formatChars = _ref.formatChars,
       error = _ref.error,
       icon = _ref.icon,
       symbolsLimit = _ref.symbolsLimit,
-      isNotBlinkErrors = _ref.isNotBlinkErrors,
-      blinkTime = _ref.blinkTime;
+      blinkTime = _ref.blinkTime,
+      _ref$isFocusDefault = _ref.isFocusDefault,
+      isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault;
   var DEFAULT_BLINK_TIME = 100; // STATES
 
   var _useState = (0, _react.useState)(false),
@@ -84,21 +84,25 @@ var Input = function Input(_ref) {
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       isToHighlightError = _useState8[0],
-      setIsToHighlightError = _useState8[1]; // HANDLES
+      setIsToHighlightError = _useState8[1];
 
+  var onlyNumbers = _inputExecutor.formatInput.onlyNumbers,
+      onlyString = _inputExecutor.formatInput.onlyString;
+  var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
+      addCommas = _formatInput$priceInp.addCommas,
+      removeComma = _formatInput$priceInp.removeComma; // HANDLES
 
   var handle = {
     change: function change(e) {
       var inputValue = e.target ? e.target.value : e;
 
-      if (isNumeric || type === 'number' && inputValue !== '') {
-        inputValue = parseFloat(inputValue) || '';
-
-        if (min && +min > inputValue) {
-          inputValue = min;
-        } else if (max && +max < inputValue) inputValue = max;
-      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
+      if (symbolsLimit && inputValue.length > +symbolsLimit) {
+        inputValue = inputValue.substring(0, +symbolsLimit);
+      }
 
+      if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
+      if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
+      if (isOnlyString) inputValue = onlyString(inputValue);
       onChange(inputValue.toString());
     },
     toggleEdit: function toggleEdit() {
@@ -107,11 +111,21 @@ var Input = function Input(_ref) {
     },
     focus: function focus(e) {
       setIsFocused(true);
+      if (isPriceInput && isOnlyNumber) onChange(removeComma(value));
       if (onFocus) onFocus(e);
     },
     blur: function blur(e) {
       setIsFocused(false);
       setEditing(false);
+
+      if (isTwoDigitAfterDot) {
+        onChange(cutOffsingleDot(value));
+      }
+
+      if (isPriceInput && isOnlyNumber) {
+        onChange(addCommas(value));
+      }
+
       if (onBlur) onBlur(e);
     },
     keyUp: function keyUp(e) {
@@ -132,6 +146,11 @@ var Input = function Input(_ref) {
       if (onKeyUp) onKeyUp(e.keyCode, e);
     }
   };
+
+  function cutOffsingleDot(value) {
+    return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
+  }
+
   (0, _react.useEffect)(function () {
     if (isEditing) inputRef.current.focus();
   }, [isEditing, isFocused]);
@@ -144,9 +163,7 @@ var Input = function Input(_ref) {
     onChange: handle.change,
     onFocus: handle.focus,
     onBlur: handle.blur,
-    onKeyUp: handle.keyUp,
-    min: min,
-    max: max
+    onKeyUp: handle.keyUp
   }, maskChar ? {
     maskChar: maskChar
   } : {}), formatChars ? {
@@ -161,26 +178,10 @@ var Input = function Input(_ref) {
       }));
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
+    return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
       ref: inputRef,
-      type: isNumeric ? 'number' : type
-    })), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
-      className: "input__nums"
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      onClick: function onClick() {
-        return handle.change(value - numStep);
-      },
-      className: (0, _classnames.default)("input__num-btn", {
-        disabled: value <= min
-      })
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
-      onClick: function onClick() {
-        return handle.change(+value + +numStep);
-      },
-      className: (0, _classnames.default)("input__num-btn", {
-        disabled: value >= max
-      })
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
+      type: isPriceInput ? 'text' : type
+    }));
   }
 
   (0, _react.useEffect)(function () {
@@ -192,9 +193,12 @@ var Input = function Input(_ref) {
       }, blinkTime || DEFAULT_BLINK_TIME);
     }
   }, [isAttemptToChange]);
+  (0, _react.useEffect)(function () {
+    if (inputRef !== null && inputRef !== void 0 && inputRef.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
+  }, [inputRef, isFocusDefault]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
-  }, renderInput(), icon, withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
+  }, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("input__close", {
       hidden: !value
     }),

package/dist/Atomic/FormElements/Input/Input.stories.js

@@ -34,20 +34,23 @@ var _default = {
     error: {
       description: 'text - coloring input if is errored'
     },
+    isPriceInput: {
+      description: 'boolean - if true, the input will be styled as PriceInput'
+    },
     withDelete: {
       description: 'boolean - add clear-cross by hover'
     },
-    isNumeric: {
-      description: 'boolean - add plus/minus buttons, force input to numeric type'
+    isOnlyNumber: {
+      description: 'boolean - only numbers'
     },
-    numStep: {
-      description: 'number/text - plus/minus buttons factor (default: 1)'
+    isOnlyString: {
+      description: 'boolean - only strings'
     },
-    min: {
-      description: 'number/text - minimal number for numeric input'
+    isTwoDigitAfterDot: {
+      description: 'boolean - only two digits after dot'
     },
-    max: {
-      description: 'number/text - maximal number for numeric input'
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
     },
     placeholder: {
       description: 'text'
@@ -102,22 +105,17 @@ var Template = function Template(args) {
 var InputTemplate = Template.bind({});
 exports.InputTemplate = InputTemplate;
 InputTemplate.args = {
-  type: 'number',
+  type: 'text',
+  isFocusDefault: false,
+  isOnlyNumber: false,
+  isOnlyString: false,
+  isPriceInput: false,
+  isTwoDigitAfterDot: false,
   disabled: false,
   error: '',
+  mask: '',
   withDelete: true,
-  isNumeric: false,
-  numStep: 1,
-  // min: '0',
-  // max: '5',
+  symbolsLimit: 255,
   placeholder: 'Placeholder',
-  // mask: 'nnnnn0129',
-  // maskChar: '_',
-  // formatChars: {
-  //   'n': '[0-9]',
-  //   's': '[A-Za-z]',
-  //   '*': '[A-Za-z0-9]'
-  // },
-  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
-  symbolsLimit: 225
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
 };

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -205,7 +205,7 @@
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     background: #FFFFFF;
-
+    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
     &_right-position-once-element {
       justify-content: flex-end;
     }
@@ -222,15 +222,15 @@
     position: relative;
 
     width: 100%;
-    padding: 4px 8px 4px 32px;
+    padding: 0 20px 0 30px;
 
     text-transform: capitalize;
     white-space: nowrap;
     font-style: normal;
     font-weight: 300;
     font-family: var(--font-family);
-    font-size: var(--font-size);
-    line-height: var(--line-height);
+    font-size: 12px;
+    line-height: 24px;
     cursor: pointer;
 
     display: flex;
@@ -242,6 +242,9 @@
       // background-color: rgba(128, 128, 128, 0.1);
       background-color: #F2F2F8;
     }
+    &_active {
+      background: #f2f2f8;
+    }
 
     &-icon-active {
       position: absolute;
@@ -293,7 +296,7 @@
 
     &>div:not(.date-picker__inputs-separator) {
       width: 110px;
-      height: 100%;
+      min-height: 100%;
       margin-right: 9px;
 
       border: 1px solid var(--border-color);
@@ -323,6 +326,9 @@
     .date-picker__inputs-separator {
       margin-right: 9px;
     }
+    input {
+      font-weight: 300;
+    }
   }
 
   &__date-input {
@@ -348,7 +354,7 @@
 
     &>.dropdown__trigger {
       width: 100%;
-      height: 100%;
+      height: 28px;
       padding-left: 10px;
       padding-right: 15px;
 
@@ -592,3 +598,27 @@
     height: 100%;
   }
 }
+
+@media screen and (max-width: 992px) {
+  .opened-part__intervals-list {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 745px) {
+  .date-picker__inputs-block {
+    flex-flow: wrap;
+  }
+
+  .date-picker__header {
+    flex-flow: row wrap
+  }
+  .date-picker__calendars-wrapper {
+    display: block;
+    margin: auto;
+  }
+  .date-picker__calendars .range-calendar {
+    margin: 0!important;
+    width: 100%;
+  }
+}

package/dist/Atomic/FormElements/NumericInput/NumericInput.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactFeather = require("react-feather");
+
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+
+var _index = require("../../../Constants/index.constants");
+
+var _inputExecutor = require("../../../Functions/inputExecutor");
+
+require("./NumericInput.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var timerOutside;
+var timerFocus;
+
+var NumericInput = function NumericInput(_ref) {
+  var onChange = _ref.onChange,
+      disabled = _ref.disabled,
+      withDelete = _ref.withDelete,
+      _ref$numStep = _ref.numStep,
+      numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      max = _ref.max,
+      value = _ref.value,
+      placeholder = _ref.placeholder,
+      className = _ref.className,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onKeyUp = _ref.onKeyUp,
+      mask = _ref.mask,
+      maskChar = _ref.maskChar,
+      formatChars = _ref.formatChars,
+      error = _ref.error,
+      icon = _ref.icon,
+      symbolsLimit = _ref.symbolsLimit,
+      isNotBlinkErrors = _ref.isNotBlinkErrors,
+      blinkTime = _ref.blinkTime,
+      isPriceInput = _ref.isPriceInput,
+      _ref$isFocusDefault = _ref.isFocusDefault,
+      isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault;
+  var DEFAULT_BLINK_TIME = 200; //REFS
+
+  var inputRef = (0, _react.useRef)(null);
+  var decRef = (0, _react.useRef)(null);
+  var incRef = (0, _react.useRef)(null);
+  var wrapRef = (0, _react.useRef)(null);
+  var previousValueRef = (0, _react.useRef)(value); // STATES
+
+  var _useState = (0, _react.useState)(value || min || ''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(inputValue),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inputValueFormated = _useState4[0],
+      setInputValueFormated = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      intMemoVal = _useState6[0],
+      setIntMemoVal = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isFocused = _useState8[0],
+      setIsFocused = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isEditing = _useState10[0],
+      setEditing = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      isAttemptToChange = _useState12[0],
+      setIsAttemptToChange = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      isToHighlightError = _useState14[0],
+      setIsToHighlightError = _useState14[1];
+
+  var onlyNumbers = _inputExecutor.formatInput.onlyNumbers;
+  var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
+      addCommas = _formatInput$priceInp.addCommas,
+      removeComma = _formatInput$priceInp.removeComma; // HANDLES
+
+  var handle = {
+    change: function change(e) {
+      var inputValue = e.target ? onlyNumbers(e.target.value) : e;
+
+      if (inputValue && (decRef.current.contains(e.target) || incRef.current.contains(e.target))) {
+        inputValue = parseFloat(inputValue);
+
+        if (min && +min > inputValue) {
+          inputValue = min;
+        } else if (max && +max < inputValue) inputValue = max;
+      }
+
+      if (symbolsLimit) {
+        inputValue = inputValue.toString().substring(0, +symbolsLimit);
+      }
+
+      setInputValue(inputValue.toString());
+    },
+    clear: function clear() {
+      handle.change(min || '');
+    },
+    focus: function focus(e) {
+      if (isFocused) return;
+      setIsFocused(true);
+      if (onFocus) onFocus(e);
+    },
+    blur: function blur(e) {
+      if (!isFocused) return;
+      setIsFocused(false);
+      setEditing(false);
+      if (onBlur) onBlur(e);
+    },
+    keyUp: function keyUp(e) {
+      if (!isNotBlinkErrors) {
+        var _previousValueRef$cur;
+
+        var changedValue = '' + (value !== null && value !== void 0 ? value : '');
+        var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
+
+        var currentSet = function () {
+          if (previousValue.length < changedValue.length) return value.toString().slice(previousValue.length - changedValue.length);else return changedValue.toString().includes(e.key) ? e.key : '';
+        }();
+
+        if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
+        if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
+    },
+    decrement: function decrement(e) {
+      handle.change(intMemoVal - +numStep);
+    },
+    increment: function increment(e) {
+      handle.change(intMemoVal + +numStep);
+    }
+  }; //Check Outside Click
+
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (!wrapRef.current.contains(event.target)) {
+        setIsFocused(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside, true);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(false);
+      setIsToHighlightError(true);
+      setTimeout(function () {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]); //On Input Value Change
+
+  (0, _react.useEffect)(function () {
+    if (inputValue !== value) setIsFocused(true);
+    setInputValueFormated(isPriceInput ? isFocused ? removeComma(inputValue) : addCommas(inputValue) : inputValue);
+    setIntMemoVal(parseInt(inputValue));
+    if (typeof onChange === 'function') onChange(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString());
+  }, [inputValue]); //On Integer Value Change
+
+  (0, _react.useEffect)(function () {
+    if (isNaN(intMemoVal)) setIntMemoVal(min || 0);
+  }, [intMemoVal]); //On Focuse Change
+
+  (0, _react.useEffect)(function () {
+    setInputValueFormated(isPriceInput ? isFocused ? removeComma(inputValue) : addCommas(inputValue) : inputValue);
+
+    if (isFocused) {
+      var _inputRef$current;
+
+      if (typeof onFocus === 'function') onFocus({
+        target: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current
+      });
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    } else {
+      var _inputRef$current2;
+
+      if (typeof onBlur === 'function') onBlur({
+        target: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current
+      });
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+    }
+  }, [isFocused]);
+  (0, _react.useEffect)(function () {
+    if (inputRef !== null && inputRef !== void 0 && inputRef.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
+  }, [inputRef, isFocusDefault]);
+
+  function renderInput() {
+    var uniProps = _objectSpread(_objectSpread({
+      className: "input ".concat(className || ''),
+      placeholder: placeholder,
+      value: inputValueFormated,
+      disabled: disabled,
+      onChange: handle.change,
+      onFocus: function onFocus() {
+        setIsFocused(true);
+        setEditing(true);
+      },
+      onBlur: function onBlur() {
+        return setEditing(false);
+      },
+      onKeyUp: handle.keyUp,
+      min: min,
+      max: max
+    }, maskChar ? {
+      maskChar: maskChar
+    } : {}), formatChars ? {
+      formatChars: formatChars
+    } : {});
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
+      ref: inputRef,
+      type: "text"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "input__nums"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      ref: decRef,
+      onMouseDown: function onMouseDown(e) {
+        return handle.decrement(e);
+      },
+      className: (0, _classnames.default)("input__num-btn", {
+        disabled: +value <= min
+      })
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
+      ref: incRef,
+      onMouseDown: function onMouseDown(e) {
+        return handle.increment(e);
+      },
+      className: (0, _classnames.default)("input__num-btn", {
+        disabled: +value >= max
+      })
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: wrapRef,
+    className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
+  }, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("input__close", {
+      hidden: !inputValue
+    }),
+    onClick: function onClick() {
+      return handle.clear();
+    }
+  }));
+};
+
+var _default = NumericInput;
+exports.default = _default;