intelicoreact 0.1.1 → 0.1.4

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _TextSwitcher = _interopRequireDefault(require("../TextSwitcher/TextSwitcher"));
+
+require("./AdvancedStatus.scss");
+
+var AdvancedStatus = function AdvancedStatus(_ref) {
+  var onChange = _ref.onChange,
+      inactiveText = _ref.inactiveText,
+      activeText = _ref.activeText,
+      value = _ref.value,
+      disabled = _ref.disabled;
+  var isUndefined = value === undefined || value === null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)('advanced-status', {
+      'advanced-status_undefined': isUndefined,
+      'advanced-status_disabled': disabled
+    })
+  }, /*#__PURE__*/React.createElement(_TextSwitcher.default, {
+    onChange: onChange,
+    isIncluded: value,
+    inactiveText: inactiveText,
+    activeText: activeText,
+    className: "advanced-status__switcher"
+  }));
+};
+
+var _default = AdvancedStatus;
+exports.default = _default;

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.scss

@@ -0,0 +1,57 @@
+@import '../../../scss/vars';
+
+.advanced-status {
+  &__switcher {
+    height: fit-content;
+    min-height: 28px;
+    border: none;
+
+    .text-switcher__btn {
+      cursor: pointer;
+      min-width: 58px;
+      white-space: nowrap;
+      padding: 0 14px;
+      height: 100%;
+      position: relative;
+      z-index: 2;
+      background-color: transparent;
+
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
+      
+      text-transform: capitalize;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      color: $color--primary;
+
+      &_off {
+        color: #1E1E2D;;
+      }
+    }
+
+    .text-switcher__slider {
+      border: 1px solid $color--primary;
+      background-color: transparent;
+    }
+  }
+
+  &_undefined, &_disabled {
+    .advanced-status__switcher {
+      cursor: auto;
+      pointer-events: none;
+    }
+  }
+
+  &_undefined {
+    .text-switcher__slider {
+      border: none;
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateAdvancedStatus = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AdvancedStatus = _interopRequireDefault(require("./AdvancedStatus"));
+
+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; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/AdvancedStatus',
+  component: _AdvancedStatus.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var buttonStyles = {
+    border: '1px solid black',
+    padding: '10px',
+    marginTop: '10px'
+  };
+  (0, _react.useEffect)(function () {
+    if (value === null) setTimeout(function () {
+      return setValue(args.value);
+    }, 1500);
+    console.log(value);
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AdvancedStatus.default, (0, _extends2.default)({}, args, {
+    value: value,
+    onChange: setValue
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    style: buttonStyles,
+    disabled: value === null,
+    onClick: function onClick() {
+      return setValue(null);
+    }
+  }, "Reload"));
+};
+
+var TemplateAdvancedStatus = Template.bind({});
+exports.TemplateAdvancedStatus = TemplateAdvancedStatus;
+TemplateAdvancedStatus.args = {
+  value: false,
+  className: '',
+  activeText: 'Approved',
+  inactiveText: 'Review',
+  disabled: false
+};

package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -28,19 +30,20 @@ var CheckboxInput = function CheckboxInput(_ref) {
     htmlFor: id
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("checkbox-input__input", (0, _defineProperty2.default)({}, "checkbox-input__input_checked", value))
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    id: id,
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, id ? (0, _defineProperty2.default)({
+    id: id
+  }, 'data-id', id) : {}, {
     type: "checkbox",
     className: "checkbox-input__checkbox",
     onChange: function onChange(e) {
       return _onChange(!value, e);
     },
-    checked: value,
+    checked: value !== null && value !== void 0 ? value : false,
     disabled: disabled,
     ref: function ref(elem) {
       if (elem) elem.indeterminate = isStark;
     }
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  })), /*#__PURE__*/_react.default.createElement("span", {
     className: "checkbox-input__mark"
   })), label && /*#__PURE__*/_react.default.createElement("div", {
     className: "checkbox-input__label"

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

@@ -49,5 +49,5 @@ Checkbox.args = {
   value: true,
   disabled: false,
   forced: false,
-  isStark: true
+  isStark: false
 };

package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput/CheckboxInput"));
+
+require("./CheckboxesLine.scss");
+
+var CheckboxesLine = function CheckboxesLine(props) {
+  var field = props.field,
+      onChange = props.onChange;
+
+  var _ref = field !== null && field !== void 0 ? field : props || {},
+      items = _ref.items,
+      value = _ref.value,
+      disabled = _ref.disabled,
+      isPositionColumn = _ref.isPositionColumn,
+      className = _ref.className;
+
+  var handleChange = function handleChange(val, id, e) {
+    onChange(val ? [].concat((0, _toConsumableArray2.default)(value), [id]) : (0, _toConsumableArray2.default)(value.filter(function (el) {
+      return el !== id;
+    })));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('checkboxes-line', {
+      'checkboxes-line_column': isPositionColumn
+    }, className)
+  }, (items === null || items === void 0 ? void 0 : items.map(function (item, idx) {
+    var _value$includes;
+
+    return /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+      id: item.id,
+      className: "checkboxes-line__checkbox-input",
+      key: item.label,
+      label: item.label,
+      value: (value === null || value === void 0 ? void 0 : (_value$includes = value.includes) === null || _value$includes === void 0 ? void 0 : _value$includes.call(value, item.id)) || false,
+      disabled: disabled,
+      onChange: function onChange(val, e) {
+        return handleChange(val, item.id, e);
+      }
+    });
+  })) || null);
+};
+
+var _default = CheckboxesLine;
+exports.default = _default;

package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.scss

@@ -0,0 +1,29 @@
+.checkboxes-line {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  &__checkbox-input {
+    width: fit-content;
+    margin-right: 10px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &_column {
+    flex-flow: column wrap;
+    align-items: flex-start;
+
+    .checkboxes-line__checkbox-input {
+      margin-right: 0;
+      margin-bottom: 10px;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateCheckboxesLine = exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CheckboxesLine = _interopRequireDefault(require("./CheckboxesLine"));
+
+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; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/CheckboxesLine',
+  component: _CheckboxesLine.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(args.value),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    return console.log(value);
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_CheckboxesLine.default, (0, _extends2.default)({}, args, {
+    value: value,
+    onChange: setValue
+  }));
+};
+
+var TemplateCheckboxesLine = Template.bind({});
+exports.TemplateCheckboxesLine = TemplateCheckboxesLine;
+TemplateCheckboxesLine.args = (0, _defineProperty2.default)({
+  items: [{
+    label: ' - 1',
+    id: '1'
+  }, {
+    label: ' - 2',
+    id: '2'
+  }, {
+    label: ' - 3',
+    id: '3'
+  }, {
+    label: ' - 4',
+    id: '4'
+  }, {
+    label: ' - 5',
+    id: '5'
+  }, {
+    label: ' - 6',
+    id: '6'
+  }],
+  value: [],
+  disabled: false,
+  isPositionColumn: true,
+  className: ''
+}, "disabled", false);

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -38,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RC = 'dropdown';
 
 var Dropdown = function Dropdown(_ref) {
-  var _options$find;
+  var _options$find, _filteredOptions$find;
 
   var _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
@@ -212,13 +212,16 @@ var Dropdown = function Dropdown(_ref) {
       if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object') removeEventListener('scroll', doScrollCallback);
     };
   }, [isOpen, dropdownListRef]);
+  var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
+    return option.value === value;
+  })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, {
       disabled: disabled
     }),
     ref: dropdownRef
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
+    className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? 'input__wrap--focus' : '', " ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
     onClick: function onClick() {
       return !isSearchable ? setIsOpen(!isOpen) : null;
     }
@@ -233,9 +236,11 @@ var Dropdown = function Dropdown(_ref) {
       e.target.select();
       setIsOpen(true);
     }
-  }) : /*#__PURE__*/_react.default.createElement("span", {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "text"
-  }, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
+  }, selectedLabel || placeholder), postfixText && /*#__PURE__*/_react.default.createElement("span", {
+    className: "dropdown__list-item-postfix"
+  }, postfixText)), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
     onClick: function onClick() {
       return setIsOpen(!isOpen);

package/dist/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -119,6 +119,10 @@
         opacity: 0.3;
         pointer-events: none;
       }
+
+      &-postfix {
+        margin-left: 5px;
+      }
     }
 
     &--with-label {

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

@@ -33,7 +33,9 @@ var _default = {
       description: 'string - current option'
     },
     isSearchable: {
-      description: 'boolean - enable search'
+      description: 'boolean - enable search',
+      type: 'boolean',
+      defaultValue: false
     },
     onChange: {
       description: 'callback return selected value'
@@ -107,7 +109,7 @@ DropdownTemplate.args = {
   entity: 'entity',
   value: 'drop6',
   placeholder: 'Placeholder',
-  isSearchable: true,
+  // isSearchable: true,
   options: [{
     label: 'Dropdown2',
     value: 'drop2',

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

@@ -23,7 +23,7 @@ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
 var _index = require("../../../Constants/index.constants");
 
-var _inputExecutor = require("../../../Functions/inputExecutor");
+var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 
 require("./Input.scss");
 
@@ -35,16 +35,16 @@ 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 Input = function Input(_ref) {
-  var onChange = _ref.onChange,
+var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var isSelect = _ref.isSelect,
+      onChange = _ref.onChange,
       onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
       onKeyUp = _ref.onKeyUp,
       isNotBlinkErrors = _ref.isNotBlinkErrors,
       isPriceInput = _ref.isPriceInput,
-      isOnlyNumber = _ref.isOnlyNumber,
+      onlyNumbers = _ref.onlyNumbers,
       isOnlyString = _ref.isOnlyString,
-      isTwoDigitAfterDot = _ref.isTwoDigitAfterDot,
       disabled = _ref.disabled,
       withDelete = _ref.withDelete,
       value = _ref.value,
@@ -62,7 +62,9 @@ var Input = function Input(_ref) {
       symbolsLimit = _ref.symbolsLimit,
       blinkTime = _ref.blinkTime,
       _ref$isFocusDefault = _ref.isFocusDefault,
-      isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault;
+      isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault,
+      _ref$isNotValidateASC = _ref.isNotValidateASCII,
+      isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC;
   var DEFAULT_BLINK_TIME = 100; // STATES
 
   var _useState = (0, _react.useState)(false),
@@ -75,7 +77,10 @@ var Input = function Input(_ref) {
       isEditing = _useState4[0],
       setEditing = _useState4[1];
 
-  var inputRef = (0, _react.useRef)(null);
+  var inputInnerRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useMemo)(function () {
+    return ref || inputInnerRef;
+  }, [ref]);
   var previousValueRef = (0, _react.useRef)(value);
 
   var _useState5 = (0, _react.useState)(false),
@@ -88,24 +93,20 @@ var Input = function Input(_ref) {
       isToHighlightError = _useState8[0],
       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;
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      onInputHover = _useState10[0],
+      setOnInputHover = _useState10[1];
+
+  var isUseBitDepthPoints = !!onlyNumbers && isPriceInput;
   var isUseErrorsBlink = !isNotBlinkErrors && !mask; // HANDLES
 
   var handle = {
     change: function change(e) {
       var inputValue = e.target ? e.target.value : e;
-
-      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, softStringMode);
+      if (type === 'text' && !isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
+      if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
+      if (onlyNumbers && isOnlyString || isOnlyString) inputValue = (0, _fieldValueFormatters.formatToLetters)(inputValue, softStringMode);else if (onlyNumbers) inputValue = (0, _fieldValueFormatters.filterNumeric)(inputValue, onlyNumbers);
       onChange(inputValue.toString());
     },
     toggleEdit: function toggleEdit() {
@@ -114,21 +115,16 @@ var Input = function Input(_ref) {
     },
     focus: function focus(e) {
       setIsFocused(true);
-      if (isPriceInput && isOnlyNumber) onChange(removeComma(value));
+      if (onlyNumbers) onChange((0, _fieldValueFormatters.formatToRemoveComa)(value));
       if (onFocus) onFocus(e);
     },
     blur: function blur(e) {
       setIsFocused(false);
       setEditing(false);
-
-      if (isTwoDigitAfterDot) {
-        onChange(cutOffsingleDot(value));
-      }
-
-      if (isPriceInput && isOnlyNumber) {
-        onChange(addCommas(value));
-      }
-
+      var value = e.target.value;
+      if (onlyNumbers) value = (0, _fieldValueFormatters.formatToCutOffDotAtTheEnd)(value);
+      if (isUseBitDepthPoints) value = (0, _fieldValueFormatters.formatToAddBitDepthPoints)(value);
+      if (onlyNumbers || isUseBitDepthPoints) onChange(value);
       if (onBlur) onBlur(e);
     },
     keyUp: function keyUp(e) {
@@ -168,33 +164,25 @@ var Input = function Input(_ref) {
     }
   };
 
-  function cutOffsingleDot(value) {
-    return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
-  }
-
-  (0, _react.useEffect)(function () {
-    if (isEditing) 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
-  }, maskChar ? {
-    maskChar: maskChar
-  } : {}), formatChars ? {
-    formatChars: formatChars
-  } : {});
-
   function renderInput() {
+    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
+    }, maskChar ? {
+      maskChar: maskChar
+    } : {}), formatChars ? {
+      formatChars: formatChars
+    } : {});
+
     if (mask) {
       return /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, uniProps, {
-        ref: inputRef,
+        inputRef: inputRef,
         mask: mask
       }));
     }
@@ -205,6 +193,12 @@ var Input = function Input(_ref) {
     }));
   }
 
+  (0, _react.useEffect)(function () {
+    if (isEditing) inputRef.current.focus();
+  }, [isEditing, isFocused]);
+  (0, _react.useEffect)(function () {
+    setEditing(isSelect !== null && isSelect !== void 0 ? isSelect : false);
+  }, [isSelect]);
   (0, _react.useEffect)(function () {
     if (isUseErrorsBlink && isAttemptToChange) {
       setIsAttemptToChange(null);
@@ -219,14 +213,20 @@ var Input = function Input(_ref) {
     setEditing(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", {
+    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)),
+    onMouseEnter: function onMouseEnter() {
+      return setOnInputHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setOnInputHover(false);
+    }
+  }, renderInput(), icon, withDelete && onInputHover && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("input__close", {
       hidden: !value
     }),
     onClick: handle.toggleEdit
   }));
-};
+});
 
 var _default = Input;
 exports.default = _default;