intelicoreact 0.0.82 → 0.0.83

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

@@ -58,7 +58,9 @@ var Input = function Input(_ref) {
       error = _ref.error,
       icon = _ref.icon,
       symbolsLimit = _ref.symbolsLimit,
-      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),
@@ -109,19 +111,19 @@ var Input = function Input(_ref) {
     },
     focus: function focus(e) {
       setIsFocused(true);
-      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) onChange(removeComma(value));
+      if (isPriceInput && isOnlyNumber) onChange(removeComma(value));
       if (onFocus) onFocus(e);
     },
     blur: function blur(e) {
       setIsFocused(false);
       setEditing(false);
 
-      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) {
-        onChange(addCommas(value));
+      if (isTwoDigitAfterDot) {
+        onChange(cutOffsingleDot(value));
       }
 
-      if (isTwoDigitAfterDot && !isPriceInput) {
-        onChange(cutOffsingleDot(value));
+      if (isPriceInput && isOnlyNumber) {
+        onChange(addCommas(value));
       }
 
       if (onBlur) onBlur(e);
@@ -138,7 +140,6 @@ var Input = function Input(_ref) {
         }();
 
         if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
-        console.log(changedValue, previousValue);
         if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
       }
 
@@ -147,7 +148,7 @@ var Input = function Input(_ref) {
   };
 
   function cutOffsingleDot(value) {
-    return value.slice(-1) === '.' ? value.slice(0, -1) : value;
+    return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
   }
 
   (0, _react.useEffect)(function () {
@@ -192,6 +193,9 @@ 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 && /*#__PURE__*/_react.default.createElement("span", {

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

@@ -49,6 +49,9 @@ var _default = {
     isTwoDigitAfterDot: {
       description: 'boolean - only two digits after dot'
     },
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
+    },
     placeholder: {
       description: 'text'
     },
@@ -103,6 +106,7 @@ var InputTemplate = Template.bind({});
 exports.InputTemplate = InputTemplate;
 InputTemplate.args = {
   type: 'text',
+  isFocusDefault: false,
   isOnlyNumber: false,
   isOnlyString: false,
   isPriceInput: false,

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

@@ -37,6 +37,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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,
@@ -49,8 +52,6 @@ var NumericInput = function NumericInput(_ref) {
       value = _ref.value,
       placeholder = _ref.placeholder,
       className = _ref.className,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'number' : _ref$type,
       onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
       onKeyUp = _ref.onKeyUp,
@@ -62,38 +63,51 @@ var NumericInput = function NumericInput(_ref) {
       symbolsLimit = _ref.symbolsLimit,
       isNotBlinkErrors = _ref.isNotBlinkErrors,
       blinkTime = _ref.blinkTime,
-      isPriceInput = _ref.isPriceInput;
-  var DEFAULT_BLINK_TIME = 200; // STATES
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isEditing = _useState4[0],
-      setEditing = _useState4[1];
+      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 previousValueRef = (0, _react.useRef)(value);
+  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)(false),
+  var _useState5 = (0, _react.useState)(0),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isAttemptToChange = _useState6[0],
-      setIsAttemptToChange = _useState6[1];
+      intMemoVal = _useState6[0],
+      setIntMemoVal = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      isToHighlightError = _useState8[0],
-      setIsToHighlightError = _useState8[1];
+      isFocused = _useState8[0],
+      setIsFocused = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(0),
+  var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      intMemoVal = _useState10[0],
-      setIntMemoVal = _useState10[1];
+      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,
@@ -104,8 +118,8 @@ var NumericInput = function NumericInput(_ref) {
     change: function change(e) {
       var inputValue = e.target ? onlyNumbers(e.target.value) : e;
 
-      if (inputValue !== '') {
-        inputValue = parseFloat(inputValue) || '';
+      if (inputValue && (decRef.current.contains(e.target) || incRef.current.contains(e.target))) {
+        inputValue = parseFloat(inputValue);
 
         if (min && +min > inputValue) {
           inputValue = min;
@@ -116,37 +130,27 @@ var NumericInput = function NumericInput(_ref) {
         inputValue = inputValue.toString().substring(0, +symbolsLimit);
       }
 
-      setIntMemoVal(parseFloat(inputValue));
-      onChange(inputValue.toString());
+      setInputValue(inputValue.toString());
     },
-    toggleEdit: function toggleEdit() {
-      setEditing(!isEditing);
-      onChange('');
+    clear: function clear() {
+      handle.change(min || '');
     },
     focus: function focus(e) {
+      if (isFocused) return;
       setIsFocused(true);
-      if (isPriceInput) onChange(removeComma(value));
       if (onFocus) onFocus(e);
     },
     blur: function blur(e) {
+      if (!isFocused) return;
       setIsFocused(false);
       setEditing(false);
-
-      if (isPriceInput) {
-        if (!isFinite(value)) {
-          value = intMemoVal;
-        }
-
-        onChange(addCommas(value));
-      }
-
       if (onBlur) onBlur(e);
     },
     keyUp: function keyUp(e) {
       if (!isNotBlinkErrors) {
-        var _value, _previousValueRef$cur;
+        var _previousValueRef$cur;
 
-        var changedValue = '' + ((_value = value) !== null && _value !== void 0 ? _value : '');
+        var changedValue = '' + (value !== null && value !== void 0 ? value : '');
         var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
 
         var currentSet = function () {
@@ -159,23 +163,26 @@ var NumericInput = function NumericInput(_ref) {
 
       if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
     },
-    decrement: function decrement() {
+    decrement: function decrement(e) {
       handle.change(intMemoVal - +numStep);
     },
-    increment: function increment() {
+    increment: function increment(e) {
       handle.change(intMemoVal + +numStep);
     }
-  };
+  }; //Check Outside Click
 
-  var handleClickOutside = function handleClickOutside(event) {
-    if (inputRef.current && !inputRef.current.contains(event.target) && !decRef.current.contains(event.target) && !incRef.current.contains(event.target)) {
-      setTimeout(function () {
-        inputRef.current.focus();
-        inputRef.current.blur();
-      }, 0);
-    }
-  };
+  (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);
@@ -184,55 +191,82 @@ var NumericInput = function NumericInput(_ref) {
         setIsToHighlightError(false);
       }, blinkTime || DEFAULT_BLINK_TIME);
     }
-  }, [isAttemptToChange]);
+  }, [isAttemptToChange]); //On Input Value Change
+
   (0, _react.useEffect)(function () {
-    document.addEventListener('click', handleClickOutside, true);
-    return function () {
-      return document.removeEventListener('click', handleClickOutside, true);
-    };
-  }, []);
+    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 () {
-    if (isNaN(intMemoVal)) setIntMemoVal(min || '');
-  }, [intMemoVal]);
+    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 (isEditing || isFocused) inputRef.current.focus();
-  }, [isEditing, isFocused]);
-
-  var uniProps = _objectSpread(_objectSpread({
-    className: "input ".concat(className),
-    placeholder: placeholder,
-    value: value || '',
-    disabled: disabled,
-    onChange: handle.change,
-    onFocus: handle.focus,
-    onBlur: handle.blur,
-    onKeyUp: handle.keyUp,
-    min: min,
-    max: max
-  }, maskChar ? {
-    maskChar: maskChar
-  } : {}), formatChars ? {
-    formatChars: formatChars
-  } : {});
+    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: type
+      type: "text"
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "input__nums"
     }, /*#__PURE__*/_react.default.createElement("button", {
       ref: decRef,
-      onClick: function onClick() {
-        return handle.decrement();
+      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,
-      onClick: function onClick() {
-        return handle.increment();
+      onMouseDown: function onMouseDown(e) {
+        return handle.increment(e);
       },
       className: (0, _classnames.default)("input__num-btn", {
         disabled: +value >= max
@@ -241,12 +275,15 @@ var NumericInput = function NumericInput(_ref) {
   }
 
   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: !value
+      hidden: !inputValue
     }),
-    onClick: handle.toggleEdit
+    onClick: function onClick() {
+      return handle.clear();
+    }
   }));
 };
 

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

@@ -31,6 +31,9 @@ var _default = {
     disabled: {
       description: 'boolean'
     },
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
+    },
     isInitialFocus: {
       description: 'boolean - if true, the input will be focused on mount'
     },
@@ -55,13 +58,6 @@ var _default = {
     placeholder: {
       description: 'text'
     },
-    type: {
-      description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
-      control: {
-        type: 'select',
-        options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
-      }
-    },
     icon: {
       description: 'JSX'
     },
@@ -91,7 +87,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)('15000'),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
@@ -105,8 +101,8 @@ var Template = function Template(args) {
 var NumericInputTemplate = Template.bind({});
 exports.NumericInputTemplate = NumericInputTemplate;
 NumericInputTemplate.args = {
-  type: 'text',
   disabled: false,
+  isFocusDefault: false,
   error: '',
   isPriceInput: false,
   mask: '',
@@ -115,7 +111,7 @@ NumericInputTemplate.args = {
   numStep: 100,
   min: '0',
   max: '15000',
-  symbolsLimit: 2,
+  symbolsLimit: 5,
   placeholder: 'Placeholder',
   icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
 };

package/dist/Functions/inputExecutor.js

@@ -21,7 +21,7 @@ var formatInput = {
       return isFraction ? intPart + value.slice(value.indexOf('.')) : intPart;
     },
     removeComma: function removeComma(value) {
-      return parseFloat(value.toString().replace(/\,/g, ''));
+      return parseInt(value.toString().replace(/\,/g, ''));
     }
   },
   onlyNumbers: function onlyNumbers(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/Atomic/FormElements/Input/Input.js

@@ -28,7 +28,8 @@ const Input = ({
   error,
   icon,
   symbolsLimit,
-  blinkTime
+  blinkTime,
+  isFocusDefault = false
 }) => {
   const DEFAULT_BLINK_TIME = 100;
   // STATES
@@ -62,20 +63,19 @@ const Input = ({
     },
     focus: (e) => {
       setIsFocused(true);
-      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot)
-        onChange(removeComma(value));
+      if (isPriceInput && isOnlyNumber) onChange(removeComma(value));
 
       if (onFocus) onFocus(e);
     },
     blur: (e) => {
       setIsFocused(false);
       setEditing(false);
-      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) {
-        onChange(addCommas(value));
-      }
-      if (isTwoDigitAfterDot && !isPriceInput) {
+      if (isTwoDigitAfterDot) {
         onChange(cutOffsingleDot(value));
       }
+      if (isPriceInput && isOnlyNumber) {
+        onChange(addCommas(value));
+      }
       if (onBlur) onBlur(e);
     },
     keyUp: (e) => {
@@ -94,7 +94,6 @@ const Input = ({
         )
           setIsAttemptToChange(true);
 
-        console.log(changedValue, previousValue);
         if (KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet)
           previousValueRef.current = value;
         else previousValueRef.current = previousValue + currentSet[0];
@@ -105,7 +104,7 @@ const Input = ({
   };
 
   function cutOffsingleDot(value) {
-    return value.slice(-1) === '.' ? value.slice(0, -1) : value;
+    return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
   }
 
   useEffect(() => {
@@ -145,6 +144,11 @@ const Input = ({
     }
   }, [isAttemptToChange]);
 
+  useEffect(() => {
+    if (inputRef?.current && typeof isFocusDefault === 'boolean')
+      setIsFocused(isFocusDefault);
+  }, [inputRef, isFocusDefault]);
+
   return (
     <div
       className={cn(

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

@@ -29,6 +29,9 @@ export default {
     isTwoDigitAfterDot: {
       description: 'boolean - only two digits after dot'
     },
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
+    },
     placeholder: {
       description: 'text'
     },
@@ -76,6 +79,7 @@ export const InputTemplate = Template.bind({});
 
 InputTemplate.args = {
   type: 'text',
+  isFocusDefault: false,
   isOnlyNumber: false,
   isOnlyString: false,
   isPriceInput: false,

package/src/Atomic/FormElements/NumericInput/NumericInput.js

@@ -7,6 +7,9 @@ import { formatInput } from '../../../Functions/inputExecutor';
 
 import './NumericInput.scss';
 
+let timerOutside;
+let timerFocus;
+
 const NumericInput = ({
   onChange,
   disabled,
@@ -17,7 +20,6 @@ const NumericInput = ({
   value,
   placeholder,
   className,
-  type = 'number',
   onBlur,
   onFocus,
   onKeyUp,
@@ -29,21 +31,30 @@ const NumericInput = ({
   symbolsLimit,
   isNotBlinkErrors,
   blinkTime,
-  isPriceInput
+  isPriceInput,
+  isFocusDefault = false
 }) => {
   const DEFAULT_BLINK_TIME = 200;
-  // STATES
-  const [isFocused, setIsFocused] = useState(false);
-  const [isEditing, setEditing] = useState(false);
+
+  //REFS
   const inputRef = useRef(null);
   const decRef = useRef(null);
   const incRef = useRef(null);
+  const wrapRef = useRef(null);
+
   const previousValueRef = useRef(value);
-  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
-  const [isToHighlightError, setIsToHighlightError] = useState(false);
 
+  // STATES
+  const [inputValue, setInputValue] = useState(value || min || '');
+  const [inputValueFormated, setInputValueFormated] = useState(inputValue);
   const [intMemoVal, setIntMemoVal] = useState(0);
 
+  const [isFocused, setIsFocused] = useState(false);
+  const [isEditing, setEditing] = useState(false);
+
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
+
   const { onlyNumbers } = formatInput;
   const { addCommas, removeComma } = formatInput.priceInput;
 
@@ -51,8 +62,12 @@ const NumericInput = ({
   const handle = {
     change: (e) => {
       let inputValue = e.target ? onlyNumbers(e.target.value) : e;
-      if (inputValue !== '') {
-        inputValue = parseFloat(inputValue) || '';
+
+      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;
@@ -60,28 +75,21 @@ const NumericInput = ({
       if (symbolsLimit) {
         inputValue = inputValue.toString().substring(0, +symbolsLimit);
       }
-
-      setIntMemoVal(parseFloat(inputValue));
-      onChange(inputValue.toString());
+      setInputValue(inputValue.toString());
     },
-    toggleEdit: () => {
-      setEditing(!isEditing);
-      onChange('');
+    clear: () => {
+      handle.change(min || '');
     },
     focus: (e) => {
+      if (isFocused) return;
       setIsFocused(true);
-      if (isPriceInput) onChange(removeComma(value));
       if (onFocus) onFocus(e);
     },
     blur: (e) => {
+      if (!isFocused) return;
+
       setIsFocused(false);
       setEditing(false);
-      if (isPriceInput) {
-        if (!isFinite(value)) {
-          value = intMemoVal;
-        }
-        onChange(addCommas(value));
-      }
 
       if (onBlur) onBlur(e);
     },
@@ -110,27 +118,26 @@ const NumericInput = ({
 
       if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
     },
-    decrement: () => {
+    decrement: (e) => {
       handle.change(intMemoVal - +numStep);
     },
-    increment: () => {
+    increment: (e) => {
       handle.change(intMemoVal + +numStep);
     }
   };
 
-  const handleClickOutside = (event) => {
-    if (
-      inputRef.current &&
-      !inputRef.current.contains(event.target) &&
-      !decRef.current.contains(event.target) &&
-      !incRef.current.contains(event.target)
-    ) {
-      setTimeout(() => {
-        inputRef.current.focus();
-        inputRef.current.blur();
-      }, 0);
-    }
-  };
+  //Check Outside Click
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!wrapRef.current.contains(event.target)) {
+        setIsFocused(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('mousedown', handleClickOutside, true);
+  }, []);
 
   useEffect(() => {
     if (!isNotBlinkErrors && isAttemptToChange) {
@@ -142,51 +149,85 @@ const NumericInput = ({
     }
   }, [isAttemptToChange]);
 
+  //On Input Value Change
   useEffect(() => {
-    document.addEventListener('click', handleClickOutside, true);
-    return () =>
-      document.removeEventListener('click', handleClickOutside, true);
-  }, []);
+    if (inputValue !== value) setIsFocused(true);
 
+    setInputValueFormated(
+      isPriceInput
+        ? isFocused
+          ? removeComma(inputValue)
+          : addCommas(inputValue)
+        : inputValue
+    );
+    setIntMemoVal(parseInt(inputValue));
+
+    if (typeof onChange === 'function') onChange(inputValue?.toString());
+  }, [inputValue]);
+
+  //On Integer Value Change
   useEffect(() => {
-    if (isNaN(intMemoVal)) setIntMemoVal(min || '');
+    if (isNaN(intMemoVal)) setIntMemoVal(min || 0);
   }, [intMemoVal]);
 
+  //On Focuse Change
   useEffect(() => {
-    if (isEditing || isFocused) inputRef.current.focus();
-  }, [isEditing, isFocused]);
-
-  const uniProps = {
-    className: `input ${className}`,
-    placeholder,
-    value: value || '',
-    disabled,
-    onChange: handle.change,
-    onFocus: handle.focus,
-    onBlur: handle.blur,
-    onKeyUp: handle.keyUp,
-    min,
-    max,
-    ...(maskChar ? { maskChar } : {}),
-    ...(formatChars ? { formatChars } : {})
-  };
+    setInputValueFormated(
+      isPriceInput
+        ? isFocused
+          ? removeComma(inputValue)
+          : addCommas(inputValue)
+        : inputValue
+    );
+
+    if (isFocused) {
+      if (typeof onFocus === 'function') onFocus({ target: inputRef?.current });
+      inputRef?.current?.focus();
+    } else {
+      if (typeof onBlur === 'function') onBlur({ target: inputRef?.current });
+      inputRef?.current?.blur();
+    }
+  }, [isFocused]);
+
+  useEffect(() => {
+    if (inputRef?.current && typeof isFocusDefault === 'boolean')
+      setIsFocused(isFocusDefault);
+  }, [inputRef, isFocusDefault]);
 
   function renderInput() {
+    const uniProps = {
+      className: `input ${className || ''}`,
+      placeholder,
+      value: inputValueFormated,
+      disabled,
+      onChange: handle.change,
+      onFocus: () => {
+        setIsFocused(true);
+        setEditing(true);
+      },
+      onBlur: () => setEditing(false),
+      onKeyUp: handle.keyUp,
+      min,
+      max,
+      ...(maskChar ? { maskChar } : {}),
+      ...(formatChars ? { formatChars } : {})
+    };
+
     return (
       <>
-        <input {...uniProps} ref={inputRef} type={type} />
+        <input {...uniProps} ref={inputRef} type='text' />
 
         <div className='input__nums'>
           <button
             ref={decRef}
-            onClick={() => handle.decrement()}
+            onMouseDown={(e) => handle.decrement(e)}
             className={cn(`input__num-btn`, { disabled: +value <= min })}
           >
             <Minus />
           </button>
           <button
             ref={incRef}
-            onClick={() => handle.increment()}
+            onMouseDown={(e) => handle.increment(e)}
             className={cn(`input__num-btn`, { disabled: +value >= max })}
           >
             <Plus />
@@ -198,6 +239,7 @@ const NumericInput = ({
 
   return (
     <div
+      ref={wrapRef}
       className={cn(
         `input__wrap`,
         { [`input__wrap_focus`]: isFocused },
@@ -209,8 +251,8 @@ const NumericInput = ({
       {icon}
       {withDelete && (
         <span
-          className={cn(`input__close`, { hidden: !value })}
-          onClick={handle.toggleEdit}
+          className={cn(`input__close`, { hidden: !inputValue })}
+          onClick={() => handle.clear()}
         />
       )}
     </div>

package/src/Atomic/FormElements/NumericInput/NumericInput.stories.js

@@ -11,6 +11,9 @@ export default {
     disabled: {
       description: 'boolean'
     },
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
+    },
     isInitialFocus: {
       description: 'boolean - if true, the input will be focused on mount'
     },
@@ -35,25 +38,6 @@ export default {
     placeholder: {
       description: 'text'
     },
-    type: {
-      description:
-        "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
-      control: {
-        type: 'select',
-        options: [
-          'text',
-          'number',
-          'password',
-          'color',
-          'date',
-          'datetime-local',
-          'month',
-          'time',
-          'email',
-          'range'
-        ]
-      }
-    },
     icon: { description: 'JSX' },
     value: { description: '(* - required prop)' },
     className: { description: 'string' },
@@ -71,15 +55,15 @@ export default {
 };
 
 const Template = (args) => {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState('15000');
   return <NumericInput {...args} value={value} onChange={setValue} />;
 };
 
 export const NumericInputTemplate = Template.bind({});
 
 NumericInputTemplate.args = {
-  type: 'text',
   disabled: false,
+  isFocusDefault: false,
   error: '',
   isPriceInput: false,
   mask: '',
@@ -88,7 +72,7 @@ NumericInputTemplate.args = {
   numStep: 100,
   min: '0',
   max: '15000',
-  symbolsLimit: 2,
+  symbolsLimit: 5,
   placeholder: 'Placeholder',
   icon: <User />
 };

package/src/Functions/inputExecutor.js

@@ -4,38 +4,29 @@ export const formatInput = {
       value = value.toString();
       const isFraction = value.includes('.');
 
-      const valueBeforeDot = isFraction
-        ? value.slice(0, value.indexOf('.'))
-        : value;
+      const valueBeforeDot = isFraction ? value.slice(0, value.indexOf('.')) : value;
 
       const intPart = valueBeforeDot
         .split('')
         .reverse()
-        .reduce(
-          (acc, item, idx) =>
-            idx % 3 === 0 && idx !== 0 ? [...acc, ',', item] : [...acc, item],
-          []
-        )
+        .reduce((acc, item, idx) => (idx % 3 === 0 && idx !== 0 ? [...acc, ',', item] : [...acc, item]), [])
         .reverse()
         .join('');
 
       return isFraction ? intPart + value.slice(value.indexOf('.')) : intPart;
     },
     removeComma: (value) => {
-      return parseFloat(value.toString().replace(/\,/g, ''));
-    }
+      return parseInt(value.toString().replace(/\,/g, ''));
+    },
   },
   onlyNumbers: (value, isDot = false) => {
-    const val =
-      value.slice(0, 1) !== '0' && value.slice(0, 1) !== '.'
-        ? value
-        : value.slice(1);
+    const val = value.slice(0, 1) !== '0' && value.slice(0, 1) !== '.' ? value : value.slice(1);
     if (isDot) return twoDigitAfterDot(val.replace(/[^0-9.]/g, ''));
     else return +val.toString().replace(/\D/g, '');
   },
   onlyString: (value) => {
     return value.toString().replace(/[^a-z]/gi, '');
-  }
+  },
 };
 
 //обрезает числа после точки до 2х