@zohodesk/components 1.0.0-temp-55 → 1.0.0-temp-56

package/lib/ListItem/ListContainer.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -15,8 +17,14 @@ var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var ListContainer = function ListContainer(props) {
@@ -42,6 +50,18 @@ var ListContainer = function ListContainer(props) {
       onMouseEnter = props.onMouseEnter,
       onMouseOver = props.onMouseOver,
       eleRef = props.eleRef;
+  var responsiveFunc = (0, _react.useCallback)(function (_ref) {
+    var mediaQueryOR = _ref.mediaQueryOR;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }, []);
+
+  var _useResponsiveReceive = (0, _CustomResponsive.useResponsiveReceiver)('Helmet', responsiveFunc),
+      mobileToTab = _useResponsiveReceive.mobileToTab;
+
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected;
   var options = {};
@@ -65,7 +85,7 @@ var ListContainer = function ListContainer(props) {
     isCover: false,
     align: "vertical",
     alignBox: "row",
-    className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
+    className: "".concat(_ListItemModule["default"].list, "  ").concat(mobileToTab ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,

package/lib/ListItem/ListItem.js

@@ -135,7 +135,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: dataIdString,
         isLink: isLink,
         href: href,

package/lib/ListItem/ListItem.module.css

@@ -1,199 +1,210 @@
-.varClass {
-  /* listitem default variables */
-  --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
-  --listitem_border_width: 0;
-  --listitem_border_color: var(--zdt_listitem_default_border);
-  --listitem_bg_color: var(--zdt_listitem_default_bg);
-  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
-  --listitem_height: auto;
-  --listitem_min_height: 0;
-
-  /* listitem hover default variable */
-  --listitem_highlight_bg_color: var(--zdt_listitem_highlight_bg);
-
-  /* listitem tick icon default variables */
-  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    /*rtl: 0 0 0 var(--zd_size15)*/;
-}[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
-}
-.list {
-  composes: varClass;
-  position: relative;
-  list-style: none;
-  color: var(--listitem_text_color);
-  font-size: var(--zd_font_size13);
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
-  text-decoration: none;
-  padding: var(--listitem_padding);
-  border-width: var(--listitem_border_width);
-  border-style: solid;
-  border-color: var(--listitem_border_color);
-  cursor: pointer;
-}
-.list, .default, .secondary {
-  background-color: var(--listitem_bg_color);
-}
-[dir=ltr] .withBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .withBorder {
-  --listitem_border_width: 0 1px 0 0;
-}
-.active {
-  --listitem_border_color: var(--zdt_listitem_active_border);
-}
-[dir=ltr] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
-    var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
-}
-[dir=rtl] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
-}
-.medium {
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
-  --listitem_min_height: var(--zd_size35);
-}
-.large {
-  --listitem_height: var(--zd_size48);
-}
-[dir=ltr] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
-    var(--zd_size25)
-    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-}
-[dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
-}
-.value,
-.children {
-  composes: dotted from '../common/common.module.css';
-}
-.iconBox {
-  width: var(--zd_size20);
-  text-align: center;
-}
-[dir=ltr] .iconBox {
-  margin-right: var(--zd_size10);
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size10);
-}
-.iconBox,
-.leftAvatar {
-  font-size: 0;
-}
-.leftAvatar {
-  margin: var(--listitem_avatar_margin);
-}
-
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
-  background-color: var(--listitem_highlight_bg_color);
-}
-.activewithBorder {
-  --listitem_border_color: var(--zdt_listitem_active_border);
-}
-[dir=ltr] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 1px 0 0;
-}
-
-.defaultHover,
-.defaultEffect:hover,
-.defaultEffect:focus {
-  --listitem_bg_color: var(--zdt_listitem_highlight_bg);
-}
-.primaryHover,
-.primaryEffect:hover,
-.primaryEffect:focus {
-  --listitem_bg_color: var(--zdt_listitem_primary_bg);
-  --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
-}
-.secondaryHover,
-.secondaryEffect:hover,
-.secondaryEffect:focus {
-  --listitem_bg_color: var(--zdt_listitem_secondary_bg);
-  --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
-  --listitem_text_color: var(--zdt_listitem_secondary_text);
-}
-.darkHover,
-.darkEffect:hover,
-.darkEffect:focus {
-  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
-  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
-}
-.activedefault, .activeprimary, .activesecondary, .activedark {
-  background-color: var(--listitem_active_bg_color);
-}
-.activedefault,
-.activedefault:hover,
-.activeprimary,
-.activeprimary:hover {
-  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
-}
-.activesecondary {
-  --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
-  --listitem_text_color: var(--zdt_listitem_secondary_text);
-}
-.dark {
-  --listitem_bg_color: var(--zdt_listitem_dark_bg);
-  --listitem_text_color: var(--zdt_listitem_dark_text);
-}
-.activedark {
-  --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
-}
-
-.tickIcon,
-.defaultTick,
-.darkTick {
-  position: absolute;
-  color: var(--listitem_tickicon_color);
-}
-
-[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
-  right: var(--zd_size20);
-}
-
-[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
-  left: var(--zd_size20);
-}
-.defaultTick {
-  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}
-.darkTick {
-  --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
-}
-.defaultTick > i {
-  display: block;
-}
-[dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
-    var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
-}
-[dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
-}
-[dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
-    var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
-}
-[dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
-}
-[dir=ltr] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
-    var(--zd_size25)
-    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
-}
-[dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
-}
+.varClass {
+  /* listitem default variables */
+  --listitem_text_color: var(--zdt_listitem_default_text);
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_border_width: 0;
+  --listitem_border_color: var(--zdt_listitem_default_border);
+  --listitem_bg_color: var(--zdt_listitem_default_bg);
+  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
+  --listitem_height: auto;
+  --listitem_min_height: 0;
+
+  /* listitem hover default variable */
+  --listitem_highlight_bg_color: var(--zdt_listitem_highlight_bg);
+
+  /* listitem tick icon default variables */
+  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
+}[dir=ltr] .varClass {
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    /*rtl: 0 0 0 var(--zd_size15)*/;
+}[dir=rtl] .varClass {
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
+}
+.list {
+  composes: varClass;
+  position: relative;
+  list-style: none;
+  color: var(--listitem_text_color);
+  font-size: var(--zd_font_size13);
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
+  text-decoration: none;
+  padding: var(--listitem_padding);
+  border-width: var(--listitem_border_width);
+  border-style: solid;
+  border-color: var(--listitem_border_color);
+  cursor: pointer;
+}
+.list, .default, .secondary {
+  background-color: var(--listitem_bg_color);
+}
+[dir=ltr] .withBorder {
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .withBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
+.active {
+  --listitem_border_color: var(--zdt_listitem_active_border);
+}
+[dir=ltr] .small {
+  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
+    var(--zd_size5)
+    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
+}
+[dir=rtl] .small {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+}
+.medium {
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_min_height: var(--zd_size35);
+}
+.large {
+  --listitem_height: var(--zd_size48);
+}
+[dir=ltr] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
+    var(--zd_size25)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
+}
+[dir=rtl] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+}
+.value,
+.children {
+  composes: dotted from '../common/common.module.css';
+}
+.iconBox {
+  width: var(--zd_size20);
+  text-align: center;
+}
+[dir=ltr] .iconBox {
+  margin-right: var(--zd_size10);
+}
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size10);
+}
+.iconBox,
+.leftAvatar {
+  font-size: 0;
+}
+.leftAvatar {
+  margin: var(--listitem_avatar_margin);
+}
+
+.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+  background-color: var(--listitem_highlight_bg_color);
+}
+.activewithBorder {
+  --listitem_border_color: var(--zdt_listitem_active_border);
+}
+[dir=ltr] .activewithBorder {
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .activewithBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
+
+.defaultHover,
+.defaultEffect:hover,
+.defaultEffect:focus {
+  --listitem_bg_color: var(--zdt_listitem_highlight_bg);
+}
+.primaryHover,
+.primaryEffect:hover,
+.primaryEffect:focus {
+  --listitem_bg_color: var(--zdt_listitem_primary_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
+}
+.secondaryHover,
+.secondaryEffect:hover,
+.secondaryEffect:focus {
+  --listitem_bg_color: var(--zdt_listitem_secondary_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
+  --listitem_text_color: var(--zdt_listitem_secondary_text);
+}
+.darkHover,
+.darkEffect:hover,
+.darkEffect:focus {
+  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
+}
+.activedefault, .activeprimary, .activesecondary, .activedark {
+  background-color: var(--listitem_active_bg_color);
+}
+.activedefault,
+.activedefault:hover,
+.activeprimary,
+.activeprimary:hover {
+  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
+}
+.activesecondary {
+  --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
+  --listitem_text_color: var(--zdt_listitem_secondary_text);
+}
+.dark {
+  --listitem_bg_color: var(--zdt_listitem_dark_bg);
+  --listitem_text_color: var(--zdt_listitem_dark_text);
+}
+.activedark {
+  --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
+}
+
+.tickIcon,
+.defaultTick,
+.darkTick {
+  position: absolute;
+  color: var(--listitem_tickicon_color);
+}
+
+[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
+  right: var(--zd_size20);
+}
+
+[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
+  left: var(--zd_size20);
+}
+.defaultTick {
+  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
+}
+.darkTick {
+  --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
+}
+.defaultTick > i {
+  display: block;
+}
+[dir=ltr] .smallwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+    var(--zd_size5)
+    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
+}
+[dir=rtl] .smallwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+}
+[dir=ltr] .mediumwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+    var(--zd_size20)
+    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
+}
+[dir=rtl] .mediumwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
+}
+[dir=ltr] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
+    var(--zd_size25)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
+}
+[dir=rtl] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+}
+.responsiveHeight {
+  --listitem_height: var(--zd_size45);
+}
+[dir=ltr] .responsiveHeight {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
+    var(--zd_size20)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
+}
+[dir=rtl] .responsiveHeight {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+}

package/lib/ListItem/ListItemWithAvatar.js

@@ -147,7 +147,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         onClick: this.handleClick,
         onMouseEnter: this.handleMouseEnter,

package/lib/ListItem/ListItemWithCheckBox.js

@@ -125,7 +125,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
         onClick: this.onClick,
         onMouseOver: this.onHover,

package/lib/ListItem/ListItemWithIcon.js

@@ -132,7 +132,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customClass,
+        customClass: "".concat(customClass),
         dataId: dataIdString,
         isLink: isLink,
         href: href,

package/lib/ListItem/ListItemWithRadio.js

@@ -126,7 +126,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: dataId,
         onClick: this.onClick,
         onMouseOver: this.onHover,

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -484,8 +484,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       if (suggestionsLen && isPopupOpen && keyCode === 38) {
         //up arrow
 
-        /*if (hoverOption === 0) { //disable first to last option higlight
-          !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
+        /*if (hoverOption === 0) { //disable first to last option higlight
+          !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
         }*/
         if (hoverIndex) {
           this.setState({
@@ -495,9 +495,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
         //down arrow
 
-        /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-          //disable last to first option higlight
-          !isNextOptions && this.setState({ hoverOption: 0 });
+        /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
+          //disable last to first option higlight
+          !isNextOptions && this.setState({ hoverOption: 0 });
         }*/
         if (isNextOptions && suggestionsLen >= 5 && hoverIndex === suggestionsLen - 3) {
           getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);