intelicoreact 0.3.68 → 0.3.70

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

@@ -29,6 +29,8 @@ require("./Dropdown.scss");
 
 var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 
+var _reactDom = require("react-dom");
+
 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 || _typeof3(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; }
@@ -56,7 +58,10 @@ var Dropdown = function Dropdown(_ref) {
       isListTop = _ref.isListTop,
       _ref$isNotValidateASC = _ref.isNotValidateASCII,
       isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      fieldKey = _ref.fieldKey,
+      id = _ref.id;
+  var dropdownId = fieldKey || id;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -76,6 +81,7 @@ var Dropdown = function Dropdown(_ref) {
       isFocusedByClick = _useState6[0],
       setIsFocusedByClick = _useState6[1];
 
+  var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   if (!options) return null;
 
   var moveOtherToEnd = function moveOtherToEnd(options) {
@@ -157,9 +163,11 @@ var Dropdown = function Dropdown(_ref) {
   };
 
   var handleClickOutside = function handleClickOutside(event) {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+    var _getListContainer;
+
+    if (!((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(event.target))) {
       setIsOpen(false);
-      setSearchValue(null);
+      setSearchValue('');
     }
   };
 
@@ -242,6 +250,75 @@ var Dropdown = function Dropdown(_ref) {
       if (isWithAnyScrolling) callback(e);else if (Math.round(e.target.clientHeight + e.target.scrollTop + scrollingInaccuracy) >= e.target.scrollHeight) callback(e);
     }
   }, [filteredOptions]);
+
+  var getParentNode = function getParentNode() {
+    var _document$querySelect;
+
+    return (_document$querySelect = document.querySelector('div#root')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('div#app');
+  };
+
+  var initListContainer = function initListContainer() {
+    var dropdownList = document.createElement('div');
+    dropdownList.setAttribute('id', dropdownId);
+    dropdownList.classList.add('dropdown__container');
+    getParentNode().append(dropdownList);
+  };
+
+  var getListContainer = function getListContainer() {
+    return document.getElementById(dropdownId);
+  };
+
+  var setListContainerStyles = function setListContainerStyles() {
+    var _sw$getBoundingClient;
+
+    var lc = getListContainer();
+    if (!lc || !isOpen) return false;
+
+    var _dropdownRef$current$ = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current.getBoundingClientRect(),
+        width = _dropdownRef$current$.width,
+        height = _dropdownRef$current$.height,
+        left = _dropdownRef$current$.left,
+        top = _dropdownRef$current$.top,
+        bottom = _dropdownRef$current$.bottom;
+
+    var sw = lc.getElementsByClassName('dropdown__list')[0];
+    var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
+    lc.style.width = "".concat(width, "px");
+    lc.style.left = "".concat(left, "px");
+    lc.style.top = "".concat(windowHeight - top - height >= swHeight ? top + height : top - swHeight, "px");
+    lc.style.maxHeight = "".concat(swHeight, "px");
+  };
+
+  var renderListContainer = function renderListContainer() {
+    var lc = getListContainer();
+    if (!lc) return null;
+    return /*#__PURE__*/(0, _reactDom.createPortal)(getListMarkUp(), lc);
+  };
+
+  var getListMarkUp = function getListMarkUp() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__list"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-top"), isListTop)),
+      ref: dropdownListRef
+    }, depend.options.map(function (filteredOption) {
+      var _filteredOption$items2;
+
+      return (_filteredOption$items2 = filteredOption.items) !== null && _filteredOption$items2 !== void 0 && _filteredOption$items2.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption);
+    }), disabled && isOpen && /*#__PURE__*/_react.default.createElement(_DropdownLoader.default, null));
+  };
+
+  var closeList = handleClickOutside;
+  (0, _react.useEffect)(initListContainer, []);
+  (0, _react.useLayoutEffect)(function () {
+    window.addEventListener('resize', setListContainerStyles);
+    window.addEventListener('mousewheel', closeList);
+    return function () {
+      window.removeEventListener('resize', setListContainerStyles);
+      window.removeEventListener('mousewheel', closeList);
+    };
+  }, [getListContainer]);
+  (0, _react.useEffect)(function () {
+    setListContainerStyles();
+  }, [isOpen]);
   (0, _react.useEffect)(function () {
     if (!value) setSearchValue(null);
     document.addEventListener('click', handleClickOutside, true);
@@ -315,14 +392,7 @@ var Dropdown = function Dropdown(_ref) {
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
-  }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(RC, "__list"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-top"), isListTop)),
-    ref: dropdownListRef
-  }, depend.options.map(function (filteredOption) {
-    var _filteredOption$items2;
-
-    return (_filteredOption$items2 = filteredOption.items) !== null && _filteredOption$items2 !== void 0 && _filteredOption$items2.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption);
-  }), disabled && isOpen && /*#__PURE__*/_react.default.createElement(_DropdownLoader.default, null)));
+  }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && renderListContainer());
 };
 
 var _default = Dropdown;

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

@@ -7,6 +7,13 @@
   width: 100%;
   border-radius: 7px;
 
+  &__container {
+    display: block;
+    position: fixed;
+    z-index: 99999;
+    box-sizing: border-box;
+  }
+
   &__trigger {
     background: #ffffff;
     border: 1px solid #e2e5ec;
@@ -58,7 +65,6 @@
     padding: 5px 0;
     max-height: 320px;
     overflow-y: auto;
-    position: absolute;
     top: 100%;
     z-index: 6;
 
@@ -105,6 +111,9 @@
         line-height: 20px;
         letter-spacing: 0.2px;
         position: relative;
+        width: 100%;
+        text-align: left;
+
         &:after {
           content: "";
           position: absolute;

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = RangeSlider;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -27,6 +29,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
+
 // require('./lib/customEventListener.js');
 function RangeSlider(_ref) {
   var _value$from, _value$to;
@@ -97,13 +103,16 @@ function RangeSlider(_ref) {
 
   var _useState9 = (0, _react.useState)(null),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      tempValue = _useState10[0],
-      setTempValue = _useState10[1];
+      focusedType = _useState10[0],
+      setFocusedType = _useState10[1];
 
   var _useState11 = (0, _react.useState)(null),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      focusedType = _useState12[0],
-      setFocusedType = _useState12[1];
+      frezeedValues = _useState12[0],
+      setFrezeedValues = _useState12[1];
+
+  var fromValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.from : from;
+  var toValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.to : to;
 
   var _useState13 = (0, _react.useState)(null),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
@@ -130,10 +139,6 @@ function RangeSlider(_ref) {
       pointsPerPx = _useState22[0],
       setPointsPerPx = _useState22[1];
 
-  var countPointsPerPx = function countPointsPerPx(width) {
-    return (max - min) / width;
-  };
-
   var _useState23 = (0, _react.useState)(0),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
       extremumRange = _useState24[0],
@@ -144,10 +149,9 @@ function RangeSlider(_ref) {
       extremumWidth = _useState26[0],
       setExtremumWidth = _useState26[1];
 
-  (0, _react.useLayoutEffect)(function () {
-    setFromValue(value.from);
-    setToValue(value.to);
-  }, [value]);
+  var countPointsPerPx = function countPointsPerPx(width) {
+    return (max - min) / width;
+  };
 
   var resetRange = function resetRange() {
     setFrom(min);
@@ -159,11 +163,11 @@ function RangeSlider(_ref) {
   };
 
   var getRangeWidth = function getRangeWidth() {
-    return getTrackXByPoints(to) - getTrackXByPoints(from);
+    return getTrackXByPoints(toValue) - getTrackXByPoints(fromValue);
   };
 
   var getRangeOffset = function getRangeOffset() {
-    return getTrackXByPoints(from);
+    return getTrackXByPoints(fromValue);
   };
 
   var getXByPoints = function getXByPoints(pts) {
@@ -184,13 +188,29 @@ function RangeSlider(_ref) {
         if (validate) {
           if (value < min) {
             setFrom(min);
+            setFrezeedValues(function (v) {
+              return _objectSpread(_objectSpread({}, v), {}, {
+                from: min
+              });
+            });
             return;
           }
 
           if (value > to - minRange) {
             setFrom(to - minRange);
+            setFrezeedValues(function (v) {
+              return _objectSpread(_objectSpread({}, v), {}, {
+                from: to - minRange
+              });
+            });
             return;
           }
+
+          setFrezeedValues(function (v) {
+            return _objectSpread(_objectSpread({}, v), {}, {
+              from: value
+            });
+          });
         }
 
         setFrom(value);
@@ -200,13 +220,29 @@ function RangeSlider(_ref) {
         if (validate) {
           if (value > max) {
             setTo(max);
+            setFrezeedValues(function (v) {
+              return _objectSpread(_objectSpread({}, v), {}, {
+                to: max
+              });
+            });
             return;
           }
 
           if (value < from + minRange) {
             setTo(from + minRange);
+            setFrezeedValues(function (v) {
+              return _objectSpread(_objectSpread({}, v), {}, {
+                to: from + minRange
+              });
+            });
             return;
           }
+
+          setFrezeedValues(function (v) {
+            return _objectSpread(_objectSpread({}, v), {}, {
+              to: value
+            });
+          });
         }
 
         setTo(value);
@@ -236,28 +272,16 @@ function RangeSlider(_ref) {
   };
 
   var onRangeInputFocus = function onRangeInputFocus(e, type) {
-    setFocusedType(type);
-    setTempValue(type === 'from' ? from : to);
+    setFrezeedValues({
+      from: from,
+      to: to
+    });
   };
 
   var onRangeInputBlur = function onRangeInputBlur(e, type) {
-    onRangeChange(type, parseFloat(tempValue));
-    setTempValue(null);
-    setFocusedType(null);
+    onRangeChange(type, type === 'from' ? from : to);
   };
 
-  (0, _react.useLayoutEffect)(function () {
-    var _trackRef$current, _fromTriggerRef$curre, _fromTriggerRef$curre2, _toTriggerRef$current, _toTriggerRef$current2;
-
-    var _trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect(),
-        width = _trackRef$current$get.width,
-        x = _trackRef$current$get.x;
-
-    width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : (_fromTriggerRef$curre2 = _fromTriggerRef$curre.getBoundingClientRect()) === null || _fromTriggerRef$curre2 === void 0 ? void 0 : _fromTriggerRef$curre2.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : (_toTriggerRef$current2 = _toTriggerRef$current.getBoundingClientRect()) === null || _toTriggerRef$current2 === void 0 ? void 0 : _toTriggerRef$current2.width);
-    setPointsPerPx(countPointsPerPx(width));
-    setTrackWidth(width);
-    setTrackPosition(x);
-  }, [trackRef]);
   (0, _react.useEffect)(function () {
     var _value$from2, _value$to2;
 
@@ -299,11 +323,30 @@ function RangeSlider(_ref) {
     }
   }, [movingController]);
   (0, _react.useEffect)(function () {
-    return onChange({
+    setFrezeedValues(null);
+  }, [isTriggerMoved]);
+  (0, _react.useEffect)(function () {
+    onChange({
       from: from,
       to: to
     });
   }, [from, to]);
+  (0, _react.useLayoutEffect)(function () {
+    setFrom(value.from);
+    setTo(value.to);
+  }, [value]);
+  (0, _react.useLayoutEffect)(function () {
+    var _trackRef$current, _fromTriggerRef$curre, _fromTriggerRef$curre2, _toTriggerRef$current, _toTriggerRef$current2;
+
+    var _trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect(),
+        width = _trackRef$current$get.width,
+        x = _trackRef$current$get.x;
+
+    width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : (_fromTriggerRef$curre2 = _fromTriggerRef$curre.getBoundingClientRect()) === null || _fromTriggerRef$curre2 === void 0 ? void 0 : _fromTriggerRef$curre2.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : (_toTriggerRef$current2 = _toTriggerRef$current.getBoundingClientRect()) === null || _toTriggerRef$current2 === void 0 ? void 0 : _toTriggerRef$current2.width);
+    setPointsPerPx(countPointsPerPx(width));
+    setTrackWidth(width);
+    setTrackPosition(x);
+  }, [trackRef]);
 
   var renderLabel = function renderLabel() {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -318,7 +361,7 @@ function RangeSlider(_ref) {
       className: "range-slider__header__selected-range"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__header__selected-range--text"
-    }, "from ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(from) : from, " to ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(to) : to, rangeSymbol, unit), /*#__PURE__*/_react.default.createElement("div", {
+    }, "from ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(fromValue) : fromValue, " to ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(toValue) : toValue, rangeSymbol, unit), /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__header__selected-range--reset",
       onClick: resetRange
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null)));
@@ -337,14 +380,16 @@ function RangeSlider(_ref) {
       className: "range-slider__inputs--from"
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       "data-testid": "rangeSlider--input--".concat(testId, "--type-from"),
-      value: focusedType === 'from' ? tempValue : from.toString(),
+      value: from.toString(),
       onFocus: function onFocus(e) {
         return onRangeInputFocus(e, 'from');
       },
       onBlur: function onBlur(e) {
         return onRangeInputBlur(e, 'from');
       },
-      onChange: setTempValue,
+      onChange: function onChange(value) {
+        return onRangeChange('from', value, false);
+      },
       onlyNumbers: {
         type: 'float',
         decimalPlaces: decimalPlaces,
@@ -356,14 +401,16 @@ function RangeSlider(_ref) {
       className: "range-slider__inputs__input"
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       "data-testid": "rangeSlider--input--".concat(testId, "--type-to"),
-      value: focusedType === 'to' ? tempValue : to.toString(),
+      value: to.toString(),
       onFocus: function onFocus(e) {
         return onRangeInputFocus(e, 'to');
       },
       onBlur: function onBlur(e) {
         return onRangeInputBlur(e, 'to');
       },
-      onChange: setTempValue,
+      onChange: function onChange(value) {
+        return onRangeChange('to', value, false);
+      },
       onlyNumbers: {
         type: 'float',
         decimalPlaces: decimalPlaces,
@@ -387,10 +434,10 @@ function RangeSlider(_ref) {
 
   var renderTrackTriggers = function renderTrackTriggers() {
     var fromStyle = {
-      left: getTrackXByPoints(from).toString().concat('px')
+      left: getTrackXByPoints(fromValue).toString().concat('px')
     };
     var toStyle = {
-      left: getTrackXByPoints(to).toString().concat('px')
+      left: getTrackXByPoints(toValue).toString().concat('px')
     };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__track__range-triggers"

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -87,6 +87,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
       setSearchValue = _useState4[1];
 
   var dropdownRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
   var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   var singleLevelOptions = options === null || options === void 0 ? void 0 : options.reduce(function (acc, item) {
     return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(item.groupName ? item.list : [item]));
@@ -135,9 +136,11 @@ var TagsDropdown = function TagsDropdown(_ref) {
   };
 
   var getMarkupForElement = function getMarkupForElement(item) {
+    var _title$toString;
+
     var title = item.title || item.label;
     return title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') ? /*#__PURE__*/_react.default.createElement("button", {
-      key: item.value,
+      key: title === null || title === void 0 ? void 0 : (_title$toString = title.toString()) === null || _title$toString === void 0 ? void 0 : _title$toString.replace(/ /g, '_'),
       onClick: function onClick() {
         return onChangeHandler(item);
       },
@@ -239,10 +242,10 @@ var TagsDropdown = function TagsDropdown(_ref) {
     }, headerContent) : null, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(RC, "__list ").concat(headerContent ? "".concat(RC, "__list--with-header") : '', " ").concat(footerContent ? "".concat(RC, "__list--with-footer") : '')
     }, (options === null || options === void 0 ? void 0 : options.length) > 0 ? options === null || options === void 0 ? void 0 : options.map(function (option) {
-      var _option$list;
+      var _option$groupName, _option$groupName$toS, _option$list;
 
       return option.groupName ? /*#__PURE__*/_react.default.createElement("div", {
-        key: option.id,
+        key: (_option$groupName = option.groupName) === null || _option$groupName === void 0 ? void 0 : (_option$groupName$toS = _option$groupName.toString()) === null || _option$groupName$toS === void 0 ? void 0 : _option$groupName$toS.replace(/ /g, '_').concat(Date.now()),
         className: (0, _classnames.default)("".concat(RC, "-group"), option.className)
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(RC, "-group__name")
@@ -257,7 +260,14 @@ var TagsDropdown = function TagsDropdown(_ref) {
   };
 
   (0, _react.useEffect)(initListContainer, []);
-  var closeList = handleClickOutside;
+
+  var closeList = function closeList(e) {
+    var _inputRef$current;
+
+    handleClickOutside(e);
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+  };
+
   (0, _react.useLayoutEffect)(function () {
     window.addEventListener('resize', setListContainerStyles);
     window.addEventListener('mousewheel', closeList);
@@ -326,6 +336,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
       }
     });
   }), chosenOptions.length === 0 || !noTagsWrap ? /*#__PURE__*/_react.default.createElement("input", {
+    ref: inputRef,
     className: "".concat(RC, "__input"),
     value: searchValue,
     onChange: function onChange(e) {

package/dist/Atomic/UI/Hint/Hint.js

@@ -19,11 +19,17 @@ var _reactFeather = require("react-feather");
 
 require("./Hint.scss");
 
+var _reactDom = require("react-dom");
+
 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; }
 
+var time = (Date.now() * Math.random() / 1000).toString().replace(/\./g, "_");
+
 var Hint = function Hint(_ref) {
+  var _ref2;
+
   var hint = _ref.hint,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'right' : _ref$side,
@@ -33,7 +39,10 @@ var Hint = function Hint(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
       _ref$handleOpenType = _ref.handleOpenType,
-      handleOpenType = _ref$handleOpenType === void 0 ? 'click' : _ref$handleOpenType;
+      handleOpenType = _ref$handleOpenType === void 0 ? 'click' : _ref$handleOpenType,
+      key = _ref.key,
+      id = _ref.id;
+  var hintId = (_ref2 = key !== null && key !== void 0 ? key : id) !== null && _ref2 !== void 0 ? _ref2 : time;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -41,13 +50,69 @@ var Hint = function Hint(_ref) {
       setIsOpen = _useState2[1];
 
   var hintRef = (0, _react.useRef)(null);
+  var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
 
   var handleClickOutside = function handleClickOutside(event) {
-    if (hintRef.current && !hintRef.current.contains(event === null || event === void 0 ? void 0 : event.target)) {
+    if (!getHintContainer().contains(event === null || event === void 0 ? void 0 : event.target)) {
       setIsOpen(false);
     }
   };
 
+  var getParentNode = function getParentNode() {
+    var _document$querySelect;
+
+    return (_document$querySelect = document.querySelector('div#root')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('div#app');
+  };
+
+  var initHintContainer = function initHintContainer() {
+    var hint = document.createElement('div');
+    hint.setAttribute('id', hintId);
+    hint.classList.add('hint__container');
+    getParentNode().append(hint);
+  };
+
+  var getHintContainer = function getHintContainer() {
+    return document.getElementById(hintId);
+  };
+
+  var getHintMarkUp = function getHintMarkUp() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": 'test-hint-text',
+      className: (0, _classnames.default)('hint__text', "hint__text_".concat(side))
+    }, hint);
+  };
+
+  var setHintContainerStyles = function setHintContainerStyles() {
+    var _sw$getBoundingClient;
+
+    var hc = getHintContainer();
+    if (!hc || !isOpen) return false;
+
+    var _hintRef$current$getB = hintRef === null || hintRef === void 0 ? void 0 : hintRef.current.getBoundingClientRect(),
+        width = _hintRef$current$getB.width,
+        height = _hintRef$current$getB.height,
+        left = _hintRef$current$getB.left,
+        top = _hintRef$current$getB.top,
+        bottom = _hintRef$current$getB.bottom;
+
+    var sw = hc.getElementsByClassName('hint__text')[0];
+    var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
+    hc.style.width = isOpen ? width === null || width === void 0 ? void 0 : width.toString().concat('px') : 0;
+    hc.style.left = isOpen ? left === null || left === void 0 ? void 0 : left.toString().concat('px') : 0;
+    hc.style.top = isOpen ? top === null || top === void 0 ? void 0 : top.toString().concat('px') : 0;
+    hc.style.maxHeight = isOpen ? swHeight === null || swHeight === void 0 ? void 0 : swHeight.toString().concat('px') : 0;
+  };
+
+  var renderHintContainer = function renderHintContainer() {
+    var hc = getHintContainer();
+    if (!hc) return null;
+    return /*#__PURE__*/(0, _reactDom.createPortal)(getHintMarkUp(), hc);
+  };
+
+  (0, _react.useEffect)(initHintContainer, []);
+  (0, _react.useEffect)(function () {
+    setHintContainerStyles();
+  }, [isOpen]);
   (0, _react.useEffect)(function () {
     document.addEventListener('click', handleClickOutside, true);
     return function () {
@@ -106,10 +171,7 @@ var Hint = function Hint(_ref) {
     className: (0, _classnames.default)('hint__label', {
       'color--primary': isOpen
     })
-  }, label[0].toUpperCase() + label.slice(1))), isOpen && /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": 'test-hint-text',
-    className: (0, _classnames.default)('hint__text', "hint__text_".concat(side))
-  }, hint));
+  }, label[0].toUpperCase() + label.slice(1))), isOpen && renderHintContainer());
 };
 
 var _default = Hint;

package/dist/Atomic/UI/Hint/Hint.scss

@@ -3,6 +3,13 @@
   display: inline-block;
   font-size: 0;
 
+  &__container {
+    display: block;
+    position: fixed;
+    z-index: 99999;
+    box-sizing: border-box;
+  }
+
   &__button {
     display: flex;
     cursor: pointer;
@@ -68,8 +75,8 @@
     }
 
     &_left {
-      top: -2px;
-      right: 24px;
+      top: -4px;
+      right: 28px;
       &:before {
         top: 8px;
         right: -4.25px;
@@ -77,7 +84,7 @@
     }
 
     &_top {
-      bottom: 26px;
+      bottom: 8px;
       left: -4px;
       &:before {
         left: 8px;

package/dist/Atomic/UI/Tag/Tag.scss

@@ -50,7 +50,7 @@
     min-width: 80px;
     padding: 8px;
     z-index: 2;
-    top: 25px;
+    top: 30px;
     left: 2px;
 
     &:before {

package/dist/Classes/AbortableFetch.js

@@ -255,6 +255,14 @@ var AbortableFetch = /*#__PURE__*/function () {
               mergeProps = itemObj.mergeProps,
               isNoPathPrefix = itemObj.isNoPathPrefix,
               isSkipEveryPromiseCallback = itemObj.isSkipEveryPromiseCallback;
+          var safelyMergeProps = mergeProps instanceof Object && !Array.isArray(mergeProps) ? mergeProps : {};
+
+          var getMergeProps = function getMergeProps(key) {
+            var _safelyMergeProps$all;
+
+            return (_safelyMergeProps$all = safelyMergeProps.all) !== null && _safelyMergeProps$all !== void 0 ? _safelyMergeProps$all : safelyMergeProps[key];
+          };
+
           if (!path || typeof path !== 'string') return ac;
 
           var _ref3 = options || {},
@@ -272,30 +280,35 @@ var AbortableFetch = /*#__PURE__*/function () {
 
           return [].concat((0, _toConsumableArray2.default)(ac), [_objectSpread({
             path: path,
-            pathPrefix: mergeProps === 'onlyLocal' || isNoPathPrefix ? '' : (0, _classPrivateFieldGet2.default)(_this2, _pathPrefix) || '',
+            pathPrefix: getMergeProps('pathPrefix') === 'onlyLocal' || isNoPathPrefix ? '' : (0, _classPrivateFieldGet2.default)(_this2, _pathPrefix) || '',
             method: function () {
-              if (mergeProps === 'onlyLocal') return method || 'GET';
-              return mergeProps === 'onlyGlobal' ? (0, _classPrivateFieldGet2.default)(_this2, _method) || 'GET' : method || (0, _classPrivateFieldGet2.default)(_this2, _method) || 'GET';
+              if (getMergeProps('method') === 'onlyLocal') return method || 'GET';
+              return getMergeProps('method') === 'onlyGlobal' ? (0, _classPrivateFieldGet2.default)(_this2, _method) || 'GET' : method || (0, _classPrivateFieldGet2.default)(_this2, _method) || 'GET';
             }(),
             queryParameters: function () {
-              if (mergeProps === 'onlyLocal') return _this2.getQueryString(_this2.getQueryArray(queryParameters));
-              return mergeProps === 'onlyGlobal' ? _this2.getQueryString(_this2.getQueryArray((0, _classPrivateFieldGet2.default)(_this2, _queryParameters))) : _this2.getQueryString([].concat((0, _toConsumableArray2.default)(_this2.getQueryArray((0, _classPrivateFieldGet2.default)(_this2, _queryParameters))), (0, _toConsumableArray2.default)(_this2.getQueryArray(queryParameters))));
+              var _getMergeProps, _getMergeProps2;
+
+              if (((_getMergeProps = getMergeProps('queryParameters')) !== null && _getMergeProps !== void 0 ? _getMergeProps : getMergeProps('query')) === 'onlyLocal') {
+                return _this2.getQueryString(_this2.getQueryArray(queryParameters));
+              }
+
+              return ((_getMergeProps2 = getMergeProps('queryParameters')) !== null && _getMergeProps2 !== void 0 ? _getMergeProps2 : getMergeProps('query')) === 'onlyGlobal' ? _this2.getQueryString(_this2.getQueryArray((0, _classPrivateFieldGet2.default)(_this2, _queryParameters))) : _this2.getQueryString([].concat((0, _toConsumableArray2.default)(_this2.getQueryArray((0, _classPrivateFieldGet2.default)(_this2, _queryParameters))), (0, _toConsumableArray2.default)(_this2.getQueryArray(queryParameters))));
             }(),
             headers: function () {
-              if (mergeProps === 'onlyLocal') return _this2.getHeadersObj(headers || {});
-              return mergeProps === 'onlyGlobal' ? _this2.getHeadersObj(_objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _headers) || {})) : _this2.getHeadersObj(_objectSpread(_objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _headers) || {}), headers || {}));
+              if (getMergeProps('headers') === 'onlyLocal') return _this2.getHeadersObj(headers || {});
+              return getMergeProps('headers') === 'onlyGlobal' ? _this2.getHeadersObj(_objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _headers) || {})) : _this2.getHeadersObj(_objectSpread(_objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _headers) || {}), headers || {}));
             }(),
             body: function () {
-              if (mergeProps === 'onlyLocal') return body || null;
-              if (mergeProps === 'onlyGlobal') return (0, _classPrivateFieldGet2.default)(_this2, _body) || null;
+              if (getMergeProps('body') === 'onlyLocal') return body || null;
+              if (getMergeProps('body') === 'onlyGlobal') return (0, _classPrivateFieldGet2.default)(_this2, _body) || null;
 
               if (body && (0, _classPrivateFieldGet2.default)(_this2, _body) && (0, _typeof2.default)(body) === (0, _typeof2.default)((0, _classPrivateFieldGet2.default)(_this2, _body)) && (0, _typeof2.default)(body) === 'object') {
                 return Array.isArray(body) ? [].concat((0, _toConsumableArray2.default)((0, _classPrivateFieldGet2.default)(_this2, _body)), (0, _toConsumableArray2.default)(body)) : _objectSpread(_objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _body)), body);
               } else return body || (0, _classPrivateFieldGet2.default)(_this2, _body) || null;
             }(),
             options: function () {
-              if (mergeProps === 'onlyLocal') return _objectSpread({}, optionsRest || {});
-              return mergeProps === 'onlyGlobal' ? _objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _options) || {}) : _objectSpread(_objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _options) || {}), optionsRest || {});
+              if (getMergeProps('options') === 'onlyLocal') return _objectSpread({}, optionsRest || {});
+              return getMergeProps('options') === 'onlyGlobal' ? _objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _options) || {}) : _objectSpread(_objectSpread({}, (0, _classPrivateFieldGet2.default)(_this2, _options) || {}), optionsRest || {});
             }(),
             callback: callback,
             isSkipEveryPromiseCallback: isSkipEveryPromiseCallback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.3.68",
+  "version": "0.3.70",
   "description": "",
   "main": "dist/index.js",
   "files": [
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "node ../../IntelicoKitVersioningBot/main.js && babel src --out-dir dist --copy-files --no-copy-ignored",
+    "build": "babel src --out-dir dist --copy-files --no-copy-ignored",
     "release": "babel src --out-dir dist --copy-files --no-copy-ignored && npm publish && node ../../IntelicoKitVersioningBot/main.js"
   },
   "author": "Andrey Isakov",