intelicoreact 0.1.84 → 0.1.87

package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss

@@ -74,10 +74,11 @@
   }
 
   input[type="checkbox" i] {
-    &:indeterminate {
+    &:indeterminate + span {
       display: block;
       width: 100%;
       height: 100%;
+
       &:after {
         content: "";
         position: absolute;
@@ -89,6 +90,8 @@
         width: 100%;
         height: 100%;
         background-color: #6b81dd;
+        transform: rotate(0deg);
+        border: none;
       }
       &:before {
         content: "";

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -51,6 +51,11 @@ var InputCalendar = function InputCalendar(_ref) {
       isOpened = _useState2[0],
       setIsOpened = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isOpenedByOnFocus = _useState4[0],
+      setOpenedByOnFocus = _useState4[1];
+
   var calendarRef = (0, _react.useRef)(null);
   var formatedMinDate = (0, _momentTimezone.default)(minDate, format).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(minDate, format).format(format) : null;
   var formatedMaxDate = (0, _momentTimezone.default)(maxDate, format).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(maxDate, format).format(format) : null;
@@ -74,6 +79,10 @@ var InputCalendar = function InputCalendar(_ref) {
     return (0, _momentTimezone.default)(new Date()).format('L');
   };
 
+  (0, _react.useEffect)(function () {
+    if (!isOpened) setOpenedByOnFocus(false);
+  }, [isOpened]);
+
   var handleBlur = function handleBlur(e) {
     var value = e.target.value;
     if ((0, _momentTimezone.default)(value, format).format(format) === 'Invalid date') onChange('');else if ((0, _momentTimezone.default)(value, format).startOf('day').isBefore(momentMinDate, 'days')) onChange(formatedMinDate);else if ((0, _momentTimezone.default)(value, format).endOf('day').isAfter(momentMaxDate, 'days')) onChange(formatedMaxDate);else onChange((0, _momentTimezone.default)(value, format).format(format));
@@ -92,13 +101,16 @@ var InputCalendar = function InputCalendar(_ref) {
       return changeInputValue(e.target.value);
     },
     className: "calendar-dropdown",
-    onFocus: function onFocus() {
-      return setIsOpened(true);
+    onFocus: function onFocus(e) {
+      setOpenedByOnFocus(true);
+      setIsOpened(true);
     },
     onBlur: !isOpened ? handleBlur : function () {},
     onKeyUp: function onKeyUp(e) {
-      if (e.key === 'Enter') e.target.blur();
-      setIsOpened(false);
+      if (!isOpenedByOnFocus) {
+        if (e.key === 'Enter') e.target.blur();
+        setIsOpened(false);
+      }
     }
   }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
     date: getCalendarValue(value),

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,104 +9,73 @@ exports.default = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput/CheckboxInput"));
 
-var _utils = require("../../../Functions/utils");
-
 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 TieredCheckboxes = function TieredCheckboxes(_ref) {
   var items = _ref.items,
-      className = _ref.className;
-
-  var _useState = (0, _react.useState)(items),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      data = _useState2[0],
-      setData = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      checkAll = _useState4[0],
-      setCheckAll = _useState4[1];
-
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      checkedItems = _useState6[0],
-      setCheckedItems = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      isThirdStatement = _useState8[0],
-      setIsThirdStatement = _useState8[1];
-
-  var onChange = (0, _utils.handleObjectChange)(setData, function () {
-    return setData((0, _toConsumableArray2.default)(data));
-  });
-
-  var handleArrayChange = function handleArrayChange(e, index, childIndex) {
-    // change children checkboxes
-    if (childIndex || childIndex === 0) {
-      data[index].children[childIndex].value = e;
-
-      if (data[index].children.filter(function (item) {
-        return item.value === true;
-      }).length === data[index].children.length) {
-        data[index].value = true;
-        setIsThirdStatement(false);
-      } else if (data[index].children.filter(function (item) {
-        return item.value === true;
-      }).length === 0) {
-        setIsThirdStatement(false);
-      } else {
-        setIsThirdStatement(true);
-        data[index].value = false;
-      } // change parent checkboxes
-
-    } else {
-      data[index].children.forEach(function (elem) {
-        elem.value = e;
+      className = _ref.className,
+      onChange = _ref.onChange;
+  var handle = {
+    changeParent: function changeParent(value, key) {
+      var parent = items.find(function (item) {
+        return item.key === key;
+      });
+      parent.value = value;
+      if (value) parent.children.forEach(function (item) {
+        return item.value = true;
+      });else parent.children.forEach(function (item) {
+        return item.value = false;
       });
-      data[index].value = e;
-      setCheckAll(true);
-      setCheckedItems(data[index]);
-      setIsThirdStatement(false);
+      onChange((0, _toConsumableArray2.default)(items));
+    },
+    changeChild: function changeChild(value, key, parentKey) {
+      var parent = items.find(function (item) {
+        return item.key === parentKey;
+      });
+      parent.children.find(function (item) {
+        return item.key === key;
+      }).value = value;
+      if (parent.children.every(function (item) {
+        return item.value;
+      })) parent.value = true;else parent.value = false;
+      onChange((0, _toConsumableArray2.default)(items));
+    },
+    isAllChecked: function isAllChecked(item) {
+      return (item === null || item === void 0 ? void 0 : item.children.some(function (item) {
+        return item.value;
+      })) && !(item !== null && item !== void 0 && item.children.every(function (item) {
+        return item.value;
+      }));
     }
-
-    onChange(data);
   };
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('tiered-checkboxes', className)
-  }, data.map(function (parent, index) {
+  }, items.map(function (parent) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: parent.id,
-      className: "tiered-checkboxes--parents"
+      key: parent.key,
+      className: "tiered-checkboxes__parents"
     }, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
-      isThirdStatement: isThirdStatement,
+      isStark: handle.isAllChecked(parent),
       label: parent.label,
-      value: data[index].children.length === checkedItems.length ? checkAll : parent.value,
-      onChange: function onChange(e) {
-        return handleArrayChange(e, index);
+      value: parent.value,
+      onChange: function onChange(value) {
+        return handle.changeParent(value, parent.key);
       }
-    }), parent.children && parent.children.map(function (child, childIndex) {
+    }), parent.children && parent.children.map(function (child) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        key: child.id,
-        className: "tiered-checkboxes--children"
+        key: child.key,
+        className: "tiered-checkboxes__children"
       }, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
         label: child.label,
         value: child.value,
-        onChange: function onChange(e) {
-          return handleArrayChange(e, index, childIndex);
+        onChange: function onChange(value) {
+          return handle.changeChild(value, child.key, parent.key);
         }
       }));
     }));

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

@@ -1,9 +1,9 @@
 .tiered-checkboxes {
-  &--parents {
+  &__parents {
     margin-bottom: 25px;
   }
 
-  &--children {
+  &__children {
     margin-top: 10px;
     margin-left: 10px;
   }

package/dist/Atomic/UI/Modal/Modal.js

@@ -60,7 +60,9 @@ var Modal = function Modal(_ref) {
       closeBtnIcon = _ref.closeBtnIcon,
       forced = _ref.forced,
       btnClassNames = _ref.btnClassNames,
-      isCloseBtnIconPositionRight = _ref.isCloseBtnIconPositionRight;
+      isCloseBtnIconPositionRight = _ref.isCloseBtnIconPositionRight,
+      _ref$submitOnEnter = _ref.submitOnEnter,
+      submitOnEnter = _ref$submitOnEnter === void 0 ? true : _ref$submitOnEnter;
   if (!isOpen) return null;
 
   var renderModalTitle = function renderModalTitle() {
@@ -77,11 +79,12 @@ var Modal = function Modal(_ref) {
     }
   };
   (0, _react.useEffect)(function () {
+    if (!submitOnEnter) return false;
     document.addEventListener('keydown', handle.pressKey);
     return function () {
       return document.removeEventListener('keydown', handle.pressKey);
     };
-  }, []);
+  }, [submitOnEnter]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "modal-box j5"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -116,7 +119,8 @@ var Modal = function Modal(_ref) {
     label: closeBtnText || 'Cancel',
     disabled: closeBtnDisable,
     icon: closeBtnIcon,
-    isIconRight: isCloseBtnIconPositionRight
+    isIconRight: isCloseBtnIconPositionRight,
+    tabIndex: 1
   }), !noConfirmBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: function onClick() {
       return handle.confirm();

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

@@ -9,7 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -19,10 +23,16 @@ var Icons = _interopRequireWildcard(require("react-feather"));
 
 require("./NavLine.scss");
 
+var _utils = require("../../../Functions/utils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var NavLine = function NavLine(_ref) {
   var root = _ref.root,
       activeTab = _ref.activeTab,
@@ -32,16 +42,159 @@ var NavLine = function NavLine(_ref) {
       items = _ref.items,
       children = _ref.children,
       isLocal = _ref.isLocal,
-      mode = _ref.mode;
+      mode = _ref.mode,
+      _ref$scrollMode = _ref.scrollMode,
+      scrollMode = _ref$scrollMode === void 0 ? false : _ref$scrollMode;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      navLineItems = _useState2[0],
+      setNavLineItems = _useState2[1];
+
+  var wrapperRef = (0, _react.useRef)(null);
+  var wrapperInnerRef = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      wrapperRefWidth = _useState4[0],
+      setWrapperRefWidth = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      navLineItemsTotalWidth = _useState6[0],
+      setNavLineItemsTotalWidth = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      wrapperInnerScrollLeft = _useState8[0],
+      setWrapperInnerScrollLeft = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      navLineFirstItemOffset = _useState10[0],
+      setNavLineFirstItemOffset = _useState10[1];
+
+  var getVisibleNavLineItems = function getVisibleNavLineItems() {
+    return navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.filter(function (item) {
+      var ref = item.ref,
+          label = item.label;
+      var element = ref === null || ref === void 0 ? void 0 : ref.current;
+      if (!element) return false;
+
+      var _element$getBoundingC = element.getBoundingClientRect(),
+          x = _element$getBoundingC.x;
+
+      return x >= 0 && x <= wrapperRefWidth;
+    });
+  };
+
+  var getUnvisibleLeftSideNavLineItems = function getUnvisibleLeftSideNavLineItems() {
+    return navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.filter(function (item) {
+      var ref = item.ref,
+          label = item.label;
+      var element = ref === null || ref === void 0 ? void 0 : ref.current;
+      if (!element) return false;
+
+      var _element$getBoundingC2 = element.getBoundingClientRect(),
+          x = _element$getBoundingC2.x;
+
+      return x <= 0;
+    });
+  };
+
+  var scroll = function scroll() {
+    var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var wrapperInner = wrapperInnerRef === null || wrapperInnerRef === void 0 ? void 0 : wrapperInnerRef.current;
+    var leftOffset = wrapperInner.scrollLeft;
+    setWrapperInnerScrollLeft(leftOffset + offset - navLineFirstItemOffset / 2);
+    wrapperInner === null || wrapperInner === void 0 ? void 0 : wrapperInner.scrollBy({
+      left: offset,
+      behavior: 'smooth'
+    });
+  };
+
+  var scrollToPrevItem = function scrollToPrevItem() {
+    var _prevItem$ref, _prevItem$ref$current;
+
+    var navLineUnvisibleItems = getUnvisibleLeftSideNavLineItems();
+
+    var _navLineUnvisibleItem = navLineUnvisibleItems.reverse(),
+        _navLineUnvisibleItem2 = (0, _slicedToArray2.default)(_navLineUnvisibleItem, 1),
+        prevItem = _navLineUnvisibleItem2[0];
+
+    var prevItemProps = prevItem === null || prevItem === void 0 ? void 0 : (_prevItem$ref = prevItem.ref) === null || _prevItem$ref === void 0 ? void 0 : (_prevItem$ref$current = _prevItem$ref.current) === null || _prevItem$ref$current === void 0 ? void 0 : _prevItem$ref$current.getBoundingClientRect();
+    var scrollOffset = (prevItemProps === null || prevItemProps === void 0 ? void 0 : prevItemProps.x) - navLineFirstItemOffset / 2;
+    scroll(scrollOffset);
+  };
+
+  var scrollToNextItem = function scrollToNextItem() {
+    var _firstVisibleItem$ref, _firstVisibleItem$ref2, _secondVisibleItem$re, _secondVisibleItem$re2;
+
+    var navLineVisibleItems = getVisibleNavLineItems();
+
+    var _navLineVisibleItems = (0, _slicedToArray2.default)(navLineVisibleItems, 2),
+        firstVisibleItem = _navLineVisibleItems[0],
+        secondVisibleItem = _navLineVisibleItems[1];
+
+    var firstVisibleItemProps = firstVisibleItem === null || firstVisibleItem === void 0 ? void 0 : (_firstVisibleItem$ref = firstVisibleItem.ref) === null || _firstVisibleItem$ref === void 0 ? void 0 : (_firstVisibleItem$ref2 = _firstVisibleItem$ref.current) === null || _firstVisibleItem$ref2 === void 0 ? void 0 : _firstVisibleItem$ref2.getBoundingClientRect();
+    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 - navLineFirstItemOffset / 2;
+    scroll(scrollOffset);
+  }; // Count Total NavLine Items Width
+
+
+  (0, _react.useEffect)(function () {
+    var _navLineItems$0$ref$c, _navLineItems$, _navLineItems$$ref, _navLineItems$$ref$cu;
+
+    setNavLineItemsTotalWidth(function () {
+      return navLineItems.reduce(function (totalWidth, item) {
+        var _item$ref;
+
+        var element = item === null || item === void 0 ? void 0 : (_item$ref = item.ref) === null || _item$ref === void 0 ? void 0 : _item$ref.current;
+
+        if (element) {
+          var _element$getBoundingC3;
+
+          totalWidth += element === null || element === void 0 ? void 0 : (_element$getBoundingC3 = element.getBoundingClientRect()) === null || _element$getBoundingC3 === void 0 ? void 0 : _element$getBoundingC3.width;
+        }
+
+        return totalWidth;
+      }, 0);
+    });
+    setNavLineFirstItemOffset((_navLineItems$0$ref$c = (_navLineItems$ = navLineItems[0]) === null || _navLineItems$ === void 0 ? void 0 : (_navLineItems$$ref = _navLineItems$.ref) === null || _navLineItems$$ref === void 0 ? void 0 : (_navLineItems$$ref$cu = _navLineItems$$ref.current) === null || _navLineItems$$ref$cu === void 0 ? void 0 : _navLineItems$$ref$cu.getBoundingClientRect().x) !== null && _navLineItems$0$ref$c !== void 0 ? _navLineItems$0$ref$c : 0);
+  }, [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;
+
+    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);
+  }, [wrapperRef]); //Init NavLine Items
+
+  (0, _react.useEffect)(function () {
+    setNavLineItems(items.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        ref: /*#__PURE__*/(0, _react.createRef)()
+      });
+    }));
+  }, [items]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)({
       'nav-line': !variant
     }, {
       'nav-line--simple': variant === 'simple'
-    }, className)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner')
-  }, items.map(function (item) {
+    }, {
+      'nav-line--scroll-mode': scrollMode
+    }, className),
+    ref: scrollMode ? wrapperRef : null
+  }, scrollMode && wrapperInnerScrollLeft > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line--simple__arrow nav-line--simple__arrow--prev"
+  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronLeft, {
+    onClick: scrollToPrevItem
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner'),
+    ref: scrollMode ? wrapperInnerRef : null
+  }, navLineItems.map(function (item) {
+    var ref = item.ref;
     var Icon = Icons[item === null || item === void 0 ? void 0 : item.icon];
     return isLocal ? /*#__PURE__*/_react.default.createElement("span", {
       onClick: function onClick() {
@@ -56,7 +209,8 @@ var NavLine = function NavLine(_ref) {
         active: activeTab === item.tabId
       }, {
         disabled: item.disabled || mode === 'create' && item.tabId !== 'general'
-      })
+      }),
+      ref: (0, _utils.checkedRef)(ref)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "j4"
     }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
@@ -78,7 +232,8 @@ var NavLine = function NavLine(_ref) {
         active: activeTab === item.tabId
       }, {
         disabled: item.disabled || mode === 'create' && item.tabId !== 'general'
-      })
+      }),
+      ref: (0, _utils.checkedRef)(ref)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "j4"
     }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
@@ -90,6 +245,10 @@ var NavLine = function NavLine(_ref) {
     }, item.label), item.count !== undefined ? /*#__PURE__*/_react.default.createElement("span", {
       className: "nav-line--count ml5"
     }, "(", item.count || 0, ")") : null));
+  })), scrollMode && navLineItemsTotalWidth > wrapperRefWidth && wrapperRefWidth + wrapperInnerScrollLeft < navLineItemsTotalWidth && /*#__PURE__*/_react.default.createElement("div", {
+    className: "nav-line--simple__arrow nav-line--simple__arrow--next"
+  }, /*#__PURE__*/_react.default.createElement(Icons.ChevronRight, {
+    onClick: scrollToNextItem
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "nav-line__body"
   }, children));

package/dist/Atomic/UI/NavLine/NavLine.scss

@@ -54,10 +54,29 @@
     margin-left: -32px;
     margin-right: -32px;
     background-color: #f7fafc;
+    position: relative;
+    bottom: -19px;
     &:empty {
       padding: 0 32px;
     }
   }
+
+  &--scroll-mode{
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .nav-line--simple__inner{
+      flex-wrap: nowrap;
+      overflow: hidden;
+    }
+
+    .nav-line--simple__item {
+      flex-wrap: nowrap;
+      white-space: nowrap;
+      margin-bottom: 0;
+    }
+  }
 }
 
 .nav-line--simple {
@@ -113,6 +132,43 @@
     }
   }
 
+  &__arrow {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    height: 39px;
+    width: 16px;
+    background: #fff;
+    color:#424242;
+    box-sizing: border-box;
+    transition: all 0.5s;
+    z-index: 2;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &--prev{
+      left: 0;
+      top: 0;
+      border-radius: 8px 0 0 8px;
+      transform: translate(-75%, -2px);
+      box-shadow: 10px 0px 10px -5px #dddddd;
+    }
+
+    &--next{
+      right: 0;
+      top: 0;
+      border-radius: 0 8px 8px 0;
+      transform: translate(75%, -2px);
+      box-shadow: -10px 0px 10px -5px #dddddd;
+    }
+
+    svg {
+      width: 36px;
+    }
+  }
+
   &__body {
     padding: 15px 10px;
     font-size: 13px;
@@ -126,3 +182,4 @@
 .post-log-tab__body {
   background-color: #f7fafc;
 }
+

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

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  "activeTab": "",
+  "initialTab": "",
+  "variant": "simple",
+  "items": [{
+    "tabId": "",
+    "label": "All Industries"
+  }, {
+    "tabId": 0,
+    "label": "Doors"
+  }, {
+    "tabId": 1,
+    "label": "Flooring"
+  }, {
+    "tabId": 2,
+    "label": "Home Automation"
+  }, {
+    "tabId": 3,
+    "label": "HVAC"
+  }, {
+    "tabId": 4,
+    "label": "Pools and Spas"
+  }, {
+    "tabId": 5,
+    "label": "Roofing"
+  }, {
+    "tabId": 6,
+    "label": "Solar systems"
+  }, {
+    "tabId": 7,
+    "label": "Termite tenting"
+  }, {
+    "tabId": 8,
+    "label": "Water filtration"
+  }, {
+    "tabId": 9,
+    "label": "Water heaters"
+  }, {
+    "tabId": 10,
+    "label": "Windows"
+  }, {
+    "tabId": 11,
+    "label": "Audiology"
+  }, {
+    "tabId": 12,
+    "label": "Chiropractic"
+  }, {
+    "tabId": 13,
+    "label": "Cosmetic Surgery"
+  }, {
+    "tabId": 14,
+    "label": "Dental"
+  }, {
+    "tabId": 15,
+    "label": "Dermatology"
+  }, {
+    "tabId": 16,
+    "label": "Medical Devices"
+  }, {
+    "tabId": 17,
+    "label": "Non-invasive Cosmetics"
+  }, {
+    "tabId": 18,
+    "label": "Optometry"
+  }, {
+    "tabId": 19,
+    "label": "Vision"
+  }, {
+    "tabId": 20,
+    "label": "Weight Loss"
+  }, {
+    "tabId": 21,
+    "label": "Appliances"
+  }, {
+    "tabId": 22,
+    "label": "Electronics"
+  }, {
+    "tabId": 23,
+    "label": "Furniture"
+  }, {
+    "tabId": 24,
+    "label": "Mattress"
+  }, {
+    "tabId": 25,
+    "label": "Jewelry"
+  }, {
+    "tabId": 26,
+    "label": "Dog Training"
+  }, {
+    "tabId": 27,
+    "label": "Pet Retail"
+  }, {
+    "tabId": 28,
+    "label": "Veterinary"
+  }, {
+    "tabId": 29,
+    "label": "Coaching"
+  }, {
+    "tabId": 30,
+    "label": "Funeral"
+  }, {
+    "tabId": 31,
+    "label": "Legal"
+  }, {
+    "tabId": 32,
+    "label": "Tax resolution"
+  }]
+};
+exports.default = _default;

package/dist/Functions/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
+exports.checkedRef = exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -161,4 +161,12 @@ var firstLetterCapital = function firstLetterCapital(str) {
   return "".concat(str.charAt(0).toUpperCase()).concat(str.slice(1));
 };
 
-exports.firstLetterCapital = firstLetterCapital;
+exports.firstLetterCapital = firstLetterCapital;
+
+var checkedRef = function checkedRef(ref) {
+  return ref ? typeof ref === 'function' ? function (node) {
+    return ref(node, key);
+  } : ref : null;
+};
+
+exports.checkedRef = checkedRef;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.84",
-  "description": "hotfix/InputMaskOnChange | Add Possibility To Revert Clear Value and Masked Value in OnChange Callback",
+  "version": "0.1.87",
+  "description": "Nav Line Fixes",
   "main": "dist/index.js",
   "files": [
     "dist/*",