intelicoreact 0.2.3 → 0.2.6

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,36 +15,50 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput/CheckboxInput"));
 
+var _AccordionWithCheckbox = _interopRequireDefault(require("./partial/AccordionWithCheckbox"));
+
 require("./TieredCheckboxes.scss");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var RC = 'tiered-checkboxes';
+
 var TieredCheckboxes = function TieredCheckboxes(_ref) {
   var items = _ref.items,
       className = _ref.className,
       onChange = _ref.onChange,
-      isUseParentsClassesAsDataset = _ref.isUseParentsClassesAsDataset;
+      isUseParentsClassesAsDataset = _ref.isUseParentsClassesAsDataset,
+      isUseAccordionForGroup = _ref.isUseAccordionForGroup,
+      accordionIcons = _ref.accordionIcons;
   var handle = {
-    changeParent: function changeParent(value, key) {
+    changeParent: function changeParent(value, key, prop) {
       var parent = items.find(function (item) {
         return item.key === key;
       });
-      parent.value = value;
-      if (value) parent.children.filter(function (_ref2) {
-        var disabled = _ref2.disabled;
-        return !disabled;
-      }).forEach(function (item) {
-        return item.value = true;
-      });else parent.children.filter(function (_ref3) {
-        var disabled = _ref3.disabled;
-        return !disabled;
-      }).forEach(function (item) {
-        return item.value = false;
-      });
+      if (prop) parent[prop] = value;else parent.value = value;
+
+      if (!prop) {
+        if (value) parent.children.filter(function (_ref2) {
+          var disabled = _ref2.disabled;
+          return !disabled;
+        }).forEach(function (item) {
+          return item.value = true;
+        });else parent.children.filter(function (_ref3) {
+          var disabled = _ref3.disabled;
+          return !disabled;
+        }).forEach(function (item) {
+          return item.value = false;
+        });
+      }
+
       onChange((0, _toConsumableArray2.default)(items));
     },
     changeChild: function changeChild(value, key, parentKey) {
@@ -65,39 +81,55 @@ var TieredCheckboxes = function TieredCheckboxes(_ref) {
       }));
     }
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('tiered-checkboxes', className)
-  }, items.map(function (parent) {
-    var datasetProp = isUseParentsClassesAsDataset ? {
-      'data-key': parent === null || parent === void 0 ? void 0 : parent.className
-    } : {};
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
+  var Wrapper = (0, _react.useCallback)(function (_ref4) {
+    var children = _ref4.children,
+        datasetProp = _ref4.datasetProp,
+        parent = _ref4.parent;
+    return isUseAccordionForGroup ? /*#__PURE__*/_react.default.createElement(_AccordionWithCheckbox.default, {
       key: parent.key,
-      className: (0, _classnames.default)('tiered-checkboxes__parents', (0, _defineProperty2.default)({}, "".concat(parent.className), !isUseParentsClassesAsDataset))
+      RC: RC,
+      parent: parent,
+      datasetProp: datasetProp,
+      isUseParentsClassesAsDataset: isUseParentsClassesAsDataset,
+      className: "".concat(RC, "__mono-accordion"),
+      setIsOpen: function setIsOpen() {
+        return handle.changeParent(!parent.isOpen, parent.key, 'isOpen');
+      },
+      onChange: function onChange(value) {
+        return handle.changeParent(value, parent.key);
+      },
+      icon: !parent.isOpen ? (accordionIcons === null || accordionIcons === void 0 ? void 0 : accordionIcons[0]) || null : (accordionIcons === null || accordionIcons === void 0 ? void 0 : accordionIcons[1]) || null // disabled={parent.children?.every?.((child) => child.disabled)}
+
+    }, children) : /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
+      key: parent.key,
+      className: (0, _classnames.default)("".concat(RC, "__parents"), (0, _defineProperty2.default)({}, "".concat(parent.className), !isUseParentsClassesAsDataset))
     }), /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
       isStark: handle.isAllChecked(parent),
       label: parent.label,
-      value: parent.children.filter(function (_ref4) {
-        var disabled = _ref4.disabled;
-        return !disabled;
-      }).length && parent.children.filter(function (_ref5) {
-        var disabled = _ref5.disabled;
-        return !disabled;
-      }).every(function (_ref6) {
-        var value = _ref6.value;
-        return value;
-      }),
+      value: parent.value,
       onChange: function onChange(value) {
         return handle.changeParent(value, parent.key);
       },
-      disabled: parent.children.every(function (_ref7) {
-        var disabled = _ref7.disabled;
+      disabled: parent.children.every(function (_ref5) {
+        var disabled = _ref5.disabled;
         return disabled === true;
       })
-    }), parent.children && parent.children.map(function (child) {
+    }), children);
+  }, [isUseAccordionForGroup]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(RC, className)
+  }, items.map(function (parent) {
+    var datasetProp = isUseParentsClassesAsDataset && parent !== null && parent !== void 0 && parent.className ? {
+      'data-key': parent === null || parent === void 0 ? void 0 : parent.className
+    } : {};
+    return /*#__PURE__*/_react.default.createElement(Wrapper, {
+      key: parent.key,
+      datasetProp: datasetProp,
+      parent: parent
+    }, parent.children && parent.children.map(function (child) {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: child.key,
-        className: "tiered-checkboxes__children"
+        className: "".concat(RC, "__children")
       }, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
         label: child.label,
         value: child.value,

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.scss

@@ -7,4 +7,50 @@
     margin-top: 10px;
     margin-left: 10px;
   }
+
+  &__description-checked {
+    padding-left: 21px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    color: #757F8C;
+
+
+  }
+
+  .mono-accordion {
+    box-shadow: inset 0px -1px 0px #EBEFF2;
+
+    &_is-open {
+      border-bottom: 1px solid #EBEFF2;
+    }
+
+    &__head {
+      padding: 8px 4px 0 4px;
+    }
+
+    &__icon-container {
+      width: 20px;
+      height: 20px;
+      margin-top: -8px;
+    }
+
+    &__content-wrapper {
+      margin-top: 8px;
+      padding: 0;
+    }
+    .tiered-checkboxes__children {
+      margin: 0 0 14px 20px;
+    }
+
+    .checkbox-input_disabled + .tiered-checkboxes__description-checked {
+      opacity: 0.5;
+    }
+
+    .checkbox-input {
+      width: fit-content;
+    }
+  }
 }

package/dist/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _MonoAccordion = _interopRequireDefault(require("../../../UI/MonoAccordion/MonoAccordion"));
+
+var _CheckboxInput = _interopRequireDefault(require("../../CheckboxInput/CheckboxInput"));
+
+require("../TieredCheckboxes.scss");
+
+var AccordionWithCheckbox = function AccordionWithCheckbox(_ref) {
+  var _parent$children, _parent$children$some, _parent$children2, _parent$children2$eve, _parent$children3, _parent$children4;
+
+  var children = _ref.children,
+      parent = _ref.parent,
+      onChange = _ref.onChange,
+      className = _ref.className,
+      RC = _ref.RC,
+      setIsOpen = _ref.setIsOpen,
+      icon = _ref.icon,
+      disabled = _ref.disabled,
+      datasetProp = _ref.datasetProp,
+      isUseParentsClassesAsDataset = _ref.isUseParentsClassesAsDataset;
+  return /*#__PURE__*/_react.default.createElement(_MonoAccordion.default, {
+    datasetProp: datasetProp,
+    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(parent.className), !isUseParentsClassesAsDataset)),
+    isOpen: parent.isOpen,
+    onClick: setIsOpen,
+    icon: icon,
+    disabled: disabled // disabled={parent.children?.every?.((child) => child.disabled)}
+    ,
+    titleJSX: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+      className: "".concat(RC, "__checkbox-input"),
+      isStark: (parent === null || parent === void 0 ? void 0 : (_parent$children = parent.children) === null || _parent$children === void 0 ? void 0 : (_parent$children$some = _parent$children.some) === null || _parent$children$some === void 0 ? void 0 : _parent$children$some.call(_parent$children, function (item) {
+        return item.value;
+      })) && !(parent !== null && parent !== void 0 && (_parent$children2 = parent.children) !== null && _parent$children2 !== void 0 && (_parent$children2$eve = _parent$children2.every) !== null && _parent$children2$eve !== void 0 && _parent$children2$eve.call(_parent$children2, function (item) {
+        return item.value;
+      })),
+      label: parent.label,
+      value: parent.value,
+      onChange: onChange,
+      disabled: parent.children.every(function (_ref2) {
+        var disabled = _ref2.disabled;
+        return disabled === true;
+      })
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(RC, "__description-checked")
+    }, parent !== null && parent !== void 0 && (_parent$children3 = parent.children) !== null && _parent$children3 !== void 0 && _parent$children3.length ? "Selected ".concat(parent.children.filter(function (child) {
+      return child.value;
+    }).length, " from ").concat((_parent$children4 = parent.children) === null || _parent$children4 === void 0 ? void 0 : _parent$children4.length) : null))
+  }, children);
+};
+
+var _default = AccordionWithCheckbox;
+exports.default = _default;

package/dist/Atomic/UI/AdvancedTag/AdvTag.js

@@ -38,7 +38,8 @@ var AdvTag = function AdvTag(_ref) {
       merchants = item.merchants,
       warnLeft = item.warnLeft,
       warnLeftMsg = item.warnLeftMsg,
-      warnRightMsg = item.warnRightMsg;
+      warnRightMsg = item.warnRightMsg,
+      noPingTree = item.noPingTree;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss

@@ -34,7 +34,7 @@
         min-width: 80px;
         padding: 8px;
         z-index: 2;
-
+        white-space: nowrap;
         &:before {
             content: '';
             position: absolute;

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./MonoAccordion.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var RC = 'mono-accordion';
+
+var MonoAccordion = function MonoAccordion(_ref) {
+  var _cn;
+
+  var titleJSX = _ref.titleJSX,
+      icon = _ref.icon,
+      children = _ref.children,
+      isOpen = _ref.isOpen,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      _ref$datasetProp = _ref.datasetProp,
+      datasetProp = _ref$datasetProp === void 0 ? {} : _ref$datasetProp;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      maxHeight = _useState2[0],
+      setMaxHeight = _useState2[1];
+
+  var titleRef = (0, _react.useRef)();
+  var containerRef = (0, _react.useRef)();
+
+  var setHeight = function setHeight(value) {
+    if (value !== undefined) setMaxHeight(function (state) {
+      return "".concat(value, "px");
+    });else setMaxHeight(function (state) {
+      var _Array$from, _Array$from$reduce, _containerRef$current;
+
+      return "".concat((_Array$from = Array.from((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.childNodes)) === null || _Array$from === void 0 ? void 0 : (_Array$from$reduce = _Array$from.reduce) === null || _Array$from$reduce === void 0 ? void 0 : _Array$from$reduce.call(_Array$from, function (acc, el) {
+        return acc + el.offsetHeight;
+      }, 0), "px");
+    });
+  };
+
+  var handleClick = function handleClick(e) {
+    if (!Array.from(titleRef.current.childNodes).some(function (el) {
+      return el.contains(e.target);
+    })) {
+      onClick();
+      e.stopPropagation();
+    } else return e;
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    if (!isOpen) setHeight(0);else setHeight();
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
+    className: (0, _classnames.default)(RC, className, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_is-open"), isOpen), (0, _defineProperty2.default)(_cn, "".concat(RC, "_disabled"), disabled), _cn))
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__head"),
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: titleRef,
+    className: "".concat(RC, "__tile-container")
+  }, titleJSX), /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(RC, "__icon-container")
+  }, icon)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    style: {
+      maxHeight: maxHeight
+    },
+    className: (0, _classnames.default)("".concat(RC, "__container"))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__content-wrapper")
+  }, children)));
+};
+
+var _default = MonoAccordion;
+exports.default = _default;

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.scss

@@ -0,0 +1,64 @@
+@import "../../../scss/vars";
+@import "../../../scss/mixins";
+
+.mono-accordion {
+  height: fit-content;
+
+  &__head {
+    height: fit-content;
+    padding: 10px 15px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $color--gray-gentel;
+    }
+  }
+
+  &__icon-container {
+    width: fit-content;
+    height: 100%;
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__tile-container {
+    flex-grow: 1;
+  }
+
+  &__container {
+    transition: all 0.25s ease-out;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    overflow: hidden;
+    font-size: 13px;
+
+    @include custom-scroll;
+  }
+
+  &__content-wrapper{
+    padding: 0 15px;
+  }
+
+  &_open {
+    .mono-accordion__container {
+      transition: all 0.25s ease-out;
+      padding: 10px 15px;
+    }
+    .mono-accordion__content-wrapper {
+      pointer-events: initial;
+    }
+  }
+
+  &_disabled {
+    pointer-events: none;
+  }
+}

package/dist/Atomic/UI/MonoAccordion/partial/AnyOuterClass.scss

@@ -0,0 +1,39 @@
+.any-outer-class__mono-accordion {
+  &.mono-accordion {
+    border-radius: 6px 6px 0 0;
+    background: #F8FBFF;
+    border-bottom: #757F8C solid 1px;
+  }
+
+  .mono-accordion__head {
+    border-radius: 6px;
+  }
+
+  .mono-accordion__tile-container span:last-child{
+    color: #757F8C;
+  }
+
+  .mono-accordion__icon-container {
+    width: 20px;
+    height: 20px;
+  }
+
+  .mono-accordion__content-wrapper div{
+    font-style: italic;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:nth-of-type(1) {
+      margin-left: 20px;
+    }
+    &:nth-of-type(2) {
+      margin-left: 40px;
+    }
+    &:nth-of-type(3) {
+      margin-left: 60px;
+    }
+  }
+}

package/dist/Atomic/UI/NavLine/NavLine.js

@@ -11,6 +11,10 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -83,6 +87,52 @@ var NavLine = function NavLine(_ref) {
       navLineFirstItemOffset = _useState12[0],
       setNavLineFirstItemOffset = _useState12[1];
 
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      scrollQueue = _useState14[0],
+      setScrollQueue = _useState14[1];
+
+  var popScrollTask = function popScrollTask() {
+    if (!scrollQueue.length) return null;
+
+    var _scrollQueue = (0, _toArray2.default)(scrollQueue),
+        task = _scrollQueue[0],
+        rest = _scrollQueue.slice(1);
+
+    setScrollQueue(rest);
+    return task;
+  };
+
+  var pushScrollTask = function pushScrollTask(task) {
+    return setScrollQueue(function (queue) {
+      return [].concat((0, _toConsumableArray2.default)(queue), [task]);
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!scrollQueue.length) return false;
+    var task = popScrollTask();
+    if (!task) return false;
+
+    switch (task) {
+      case 'next':
+        scrollToNextItem();
+        break;
+
+      case 'prev':
+        scrollToPrevItem();
+        break;
+
+      default:
+        break;
+    }
+  }, [scrollQueue]);
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      isScrollBlocked = _useState16[0],
+      setScrollBlocked = _useState16[1];
+
   var getVisibleNavLineItems = function getVisibleNavLineItems() {
     var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
     var wrapperInnerProps = wrapperInner.getBoundingClientRect();
@@ -117,13 +167,22 @@ var NavLine = function NavLine(_ref) {
 
   var scroll = function scroll() {
     var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    if (isScrollBlocked) return false;
+    setScrollBlocked(true);
     var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
     var wrapperInnerProps = wrapperInner.getBoundingClientRect();
     var leftOffset = wrapperInner.scrollLeft;
-    setTotalScrolledItems(function (state) {
-      return offset > 0 ? ++state : --state;
+    wrapperInner === null || wrapperInner === void 0 ? void 0 : wrapperInner.addEventListener('scroll', function () {
+      setTotalScrolledItems(function (state) {
+        return offset > 0 ? ++state : --state;
+      });
+      setScrollLeft(leftOffset + offset);
+      setTimeout(function () {
+        return setScrollBlocked(false);
+      }, 200);
+    }, {
+      once: true
     });
-    setScrollLeft(leftOffset + offset);
     wrapperInner === null || wrapperInner === void 0 ? void 0 : wrapperInner.scrollBy({
       left: offset,
       behavior: 'smooth'
@@ -133,6 +192,7 @@ var NavLine = function NavLine(_ref) {
   var scrollToPrevItem = function scrollToPrevItem() {
     var _prevItem$ref, _prevItem$ref$current;
 
+    if (isScrollBlocked) return false;
     var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
     var navLineUnvisibleItems = getUnvisibleLeftSideNavLineItems();
 
@@ -161,8 +221,23 @@ var NavLine = function NavLine(_ref) {
     var secondVisibleItemProps = secondVisibleItem === null || secondVisibleItem === void 0 ? void 0 : (_secondVisibleItem$re = secondVisibleItem.ref) === null || _secondVisibleItem$re === void 0 ? void 0 : (_secondVisibleItem$re2 = _secondVisibleItem$re.current) === null || _secondVisibleItem$re2 === void 0 ? void 0 : _secondVisibleItem$re2.getBoundingClientRect();
     var scrollOffset = secondVisibleItemProps.x - wrapperInnerProps.x;
     scroll(scrollOffset);
-  }; // Count Total NavLine Items Width
+  };
+
+  var onWheel = function onWheel(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var deltaY = e.deltaY;
+    deltaY > 0 ? pushScrollTask('next') : pushScrollTask('prev');
+  };
 
+  (0, _react.useEffect)(function () {
+    var _wrapperRef$current;
+
+    if (!(wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current)) return false;
+    wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener("mousewheel", onWheel, {
+      passive: false
+    });
+  }, [wrapperRef]); // Count Total NavLine Items Width
 
   (0, _react.useEffect)(function () {
     var _navLineItems$0$ref$c, _navLineItems$, _navLineItems$$ref, _navLineItems$$ref$cu;
@@ -186,9 +261,9 @@ var NavLine = function NavLine(_ref) {
   }, [navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.length]); // Count Wrapper Width
 
   (0, _react.useEffect)(function () {
-    var _wrapperRef$current$g, _wrapperRef$current, _wrapperRef$current$g2;
+    var _wrapperRef$current$g, _wrapperRef$current2, _wrapperRef$current2$;
 
-    setWrapperRefWidth((_wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : (_wrapperRef$current$g2 = _wrapperRef$current.getBoundingClientRect()) === null || _wrapperRef$current$g2 === void 0 ? void 0 : _wrapperRef$current$g2.width) !== null && _wrapperRef$current$g !== void 0 ? _wrapperRef$current$g : 0);
+    setWrapperRefWidth((_wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : (_wrapperRef$current2$ = _wrapperRef$current2.getBoundingClientRect()) === null || _wrapperRef$current2$ === void 0 ? void 0 : _wrapperRef$current2$.width) !== null && _wrapperRef$current$g !== void 0 ? _wrapperRef$current$g : 0);
   }, [wrapperRef]); //Init NavLine Items
 
   (0, _react.useEffect)(function () {

package/dist/Functions/Portal.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(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 Portal = function Portal(_ref) {
+  var children = _ref.children,
+      parentSelector = _ref.parentSelector;
+
+  var _useState = (0, _react.useState)(function () {
+    return document.createElement('div');
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+      container = _useState2[0];
+
+  (0, _react.useEffect)(function () {
+    var _parent;
+
+    var parent;
+    if (parentSelector) parent = document.querySelector(parentSelector);else parent = document.body;
+    (_parent = parent) === null || _parent === void 0 ? void 0 : _parent.appendChild(container);
+    return function () {
+      var _parent2;
+
+      (_parent2 = parent) === null || _parent2 === void 0 ? void 0 : _parent2.removeChild(container);
+    };
+  }, []);
+  return /*#__PURE__*/_reactDom.default.createPortal(children, container);
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Portal);
+
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "description": "",
   "main": "dist/index.js",
   "files": [