@zohodesk/dot 1.0.0-beta.177 → 1.0.0-beta.180

package/README.md

@@ -2,6 +2,19 @@
 
 In this Library we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.180
+
+- TagsMultiSelect => scrollTop Issue Solved
+- TagsMultiSelectField => keyPress index fixed
+
+# 1.0.0-beta.179
+
+- ToggleDropDown => selectedId fix while opening the dropdown.
+
+# 1.0.0-beta.178
+
+- ReadUnreadIcon component added
+
 # 1.0.0-beta.177
 
 - TextEditorField => isReadOnly Ui Given

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -46,6 +46,7 @@ export class ToggleDropDown extends Component {
     this.getOptionsArray = this.getOptionsArray.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
+    this.getSelectedIndex = this.getSelectedIndex.bind(this);
   }
 
   emptySearchSVG() {
@@ -189,6 +190,8 @@ export class ToggleDropDown extends Component {
       } else {
         onDropDownClose && onDropDownClose();
       }
+
+      this.getSelectedIndex(optionsArr);
     }
   }
 
@@ -366,18 +369,31 @@ export class ToggleDropDown extends Component {
     } else {
       if (keyCode === 13 || keyCode === 40) {
         togglePopup(e, boxPosition);
+      }
+    }
+  }
 
-        for (let i = 0; i < optionsArr.length; i++) {
-          const selectedValue = optionsArr[i][keyName];
+  getSelectedIndex(optionsArr) {
+    const {
+      selectedId,
+      idName
+    } = this.props;
 
-          if (value === selectedValue) {
-            this.setState({
-              selectedIndex: i
-            });
-            break;
-          }
+    if (selectedId) {
+      for (let i = 0; i < optionsArr.length; i++) {
+        const indexId = optionsArr[i][idName];
+
+        if (selectedId === indexId) {
+          this.setState({
+            selectedIndex: i
+          });
+          break;
         }
       }
+    } else {
+      this.setState({
+        selectedIndex: -1
+      });
     }
   }
 

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -30,11 +30,17 @@ export default class TagsMultiSelect extends React.Component {
     let {
       onScroll,
       name,
-      noMoreData
+      noMoreData,
+      searchList
     } = this.props;
+    let {
+      containerRef
+    } = this;
 
     if (findScrollEnd(this.containerRef) && !noMoreData) {
       onScroll(name);
+      let selectItemRef = this[`selectedList_${searchList.length - 1}`];
+      scrollTo(containerRef, selectItemRef);
     }
   }
 
@@ -60,11 +66,13 @@ export default class TagsMultiSelect extends React.Component {
       }, 300);
     }
 
-    let selectItemRef = this[`selectedList_${selectSearchIndex}`];
-    let {
-      containerRef
-    } = this;
-    scrollTo(containerRef, selectItemRef);
+    if (selectSearchIndex != prevProps.selectSearchIndex) {
+      let selectItemRef = this[`selectedList_${selectSearchIndex}`];
+      let {
+        containerRef
+      } = this;
+      scrollTo(containerRef, selectItemRef);
+    }
   }
 
   emptySearchSVG() {

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -129,12 +129,12 @@ const TagsMultiSelectField = props => {
       }
     } else if (keyCode === 40) {
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
-        let newIndex = prevSelectedSuggestionIndex === options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
+        let newIndex = prevSelectedSuggestionIndex >= options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
         return newIndex;
       });
     } else if (keyCode === 38) {
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
-        let newIndex = prevSelectedSuggestionIndex <= 0 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
+        let newIndex = prevSelectedSuggestionIndex <= 0 || prevSelectedSuggestionIndex >= options.length - 1 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
         return newIndex;
       });
     } else if (keyCode === 8 && searchValue === '' & !isValueChanged) {

package/es/list/Icons/Icons.module.css

@@ -12,4 +12,4 @@
 }
 .redHover:hover {
   color: var(--zdt_icons_hover_red);
-}
+}

package/es/list/Icons/ReadUnreadIcon.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './Icons.module.css';
+export default class ReadUnreadIcon extends React.Component {
+  render() {
+    let {
+      onClick,
+      dataId,
+      dataTitle,
+      iconClass,
+      className,
+      isRead,
+      iconSize
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      onClick: onClick,
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      "data-id": dataId,
+      "data-title": dataTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isRead ? 'ZD-TK-read' : 'ZD-TK-unread',
+      size: iconSize,
+      iconClass: iconClass
+    }));
+  }
+
+}
+ReadUnreadIcon.defaultProps = {
+  isRead: false
+};
+ReadUnreadIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  onClick: PropTypes.func,
+  isRead: PropTypes.bool,
+  iconSize: PropTypes.string
+};

package/es/list/Icons/docs/FloatingIcons__default.docs.js

@@ -3,9 +3,15 @@ import FloatingIcons from '../FloatingIcons';
 import EditIcon from '../EditIcon';
 import DeleteIcon from '../DeleteIcon';
 import SmartIcon from '../SmartIcon';
+import ReadUnreadIcon from '../ReadUnreadIcon';
 export default class FloatingIcons__default extends Component {
   render() {
-    return /*#__PURE__*/React.createElement(FloatingIcons, null, /*#__PURE__*/React.createElement(EditIcon, null), /*#__PURE__*/React.createElement(DeleteIcon, null), /*#__PURE__*/React.createElement(SmartIcon, null));
+    return /*#__PURE__*/React.createElement(FloatingIcons, null, /*#__PURE__*/React.createElement(ReadUnreadIcon, {
+      isRead: true,
+      iconSize: "15"
+    }), /*#__PURE__*/React.createElement(ReadUnreadIcon, {
+      iconSize: "15"
+    }), /*#__PURE__*/React.createElement(EditIcon, null), /*#__PURE__*/React.createElement(DeleteIcon, null), /*#__PURE__*/React.createElement(SmartIcon, null));
   }
 
 }

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -111,6 +111,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
     _this.getOptionsArray = _this.getOptionsArray.bind(_assertThisInitialized(_this));
     _this.emptySearchSVG = _this.emptySearchSVG.bind(_assertThisInitialized(_this));
     _this.getAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
+    _this.getSelectedIndex = _this.getSelectedIndex.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -263,6 +264,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         } else {
           onDropDownClose && onDropDownClose();
         }
+
+        this.getSelectedIndex(optionsArr);
       }
     }
   }, {
@@ -433,27 +436,40 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
       } else {
         if (keyCode === 13 || keyCode === 40) {
           togglePopup(e, boxPosition);
+        }
+      }
+    }
+  }, {
+    key: "getSelectedIndex",
+    value: function getSelectedIndex(optionsArr) {
+      var _this$props9 = this.props,
+          selectedId = _this$props9.selectedId,
+          idName = _this$props9.idName;
 
-          for (var i = 0; i < optionsArr.length; i++) {
-            var selectedValue = optionsArr[i][keyName];
+      if (selectedId) {
+        for (var i = 0; i < optionsArr.length; i++) {
+          var indexId = optionsArr[i][idName];
 
-            if (value === selectedValue) {
-              this.setState({
-                selectedIndex: i
-              });
-              break;
-            }
+          if (selectedId === indexId) {
+            this.setState({
+              selectedIndex: i
+            });
+            break;
           }
         }
+      } else {
+        this.setState({
+          selectedIndex: -1
+        });
       }
     }
   }, {
     key: "onSearchAPI",
     value: function onSearchAPI() {
       var searchValue = this.state.searchValue;
-      var _this$props9 = this.props,
-          needSearchFetching = _this$props9.needSearchFetching,
-          onSearch = _this$props9.onSearch;
+      var _this$props10 = this.props,
+          needSearchFetching = _this$props10.needSearchFetching,
+          onSearch = _this$props10.onSearch;
 
       if (needSearchFetching && onSearch) {
         onSearch(searchValue);
@@ -496,9 +512,9 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleScroll",
     value: function handleScroll(e) {
-      var _this$props10 = this.props,
-          isNextOptions = _this$props10.isNextOptions,
-          getNextOptions = _this$props10.getNextOptions;
+      var _this$props11 = this.props,
+          isNextOptions = _this$props11.isNextOptions,
+          getNextOptions = _this$props11.getNextOptions;
       var searchValue = this.state.searchValue;
 
       if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
@@ -515,58 +531,58 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
       var _this$state3 = this.state,
           options = _this$state3.options,
           selectedIndex = _this$state3.selectedIndex;
-      var _this$props11 = this.props,
-          value = _this$props11.value,
-          removeClose = _this$props11.removeClose,
-          boxSize = _this$props11.boxSize,
-          keyName = _this$props11.keyName,
-          idName = _this$props11.idName,
-          title = _this$props11.title,
-          isSearch = _this$props11.isSearch,
-          isArrow = _this$props11.isArrow,
-          placeHolderText = _this$props11.placeHolderText,
-          className = _this$props11.className,
-          right = _this$props11.right,
-          left = _this$props11.left,
-          top = _this$props11.top,
-          bottom = _this$props11.bottom,
-          isOpen = _this$props11.isPopupOpen,
-          isPopupActive = _this$props11.isPopupActive,
-          needExternalPopupState = _this$props11.needExternalPopupState,
-          isPopupReady = _this$props11.isPopupReady,
-          position = _this$props11.position,
-          getTargetRef = _this$props11.getTargetRef,
-          getContainerRef = _this$props11.getContainerRef,
-          dataId = _this$props11.dataId,
-          searchBoxSize = _this$props11.searchBoxSize,
-          searchEmptyHint = _this$props11.searchEmptyHint,
-          searchErrorText = _this$props11.searchErrorText,
-          activeStyle = _this$props11.activeStyle,
-          showOnHover = _this$props11.showOnHover,
-          isDisabled = _this$props11.isDisabled,
-          showIconOnHover = _this$props11.showIconOnHover,
-          isReadOnly = _this$props11.isReadOnly,
-          hoverStyle = _this$props11.hoverStyle,
-          isEditable = _this$props11.isEditable,
-          iconName = _this$props11.iconName,
-          iconSize = _this$props11.iconSize,
-          needTick = _this$props11.needTick,
-          dataTitle = _this$props11.dataTitle,
-          isDataLoaded = _this$props11.isDataLoaded,
-          children = _this$props11.children,
-          needResponsive = _this$props11.needResponsive,
-          arrowIconPosition = _this$props11.arrowIconPosition,
-          isGroupDropDown = _this$props11.isGroupDropDown,
-          groupOptionsKey = _this$props11.groupOptionsKey,
-          groupNameKey = _this$props11.groupNameKey,
-          isToggleStateNeeded = _this$props11.isToggleStateNeeded,
-          selectedId = _this$props11.selectedId,
-          isPadding = _this$props11.isPadding,
-          isNeedEffect = _this$props11.isNeedEffect,
-          hoverType = _this$props11.hoverType,
-          palette = _this$props11.palette,
-          getFooter = _this$props11.getFooter,
-          customProps = _this$props11.customProps;
+      var _this$props12 = this.props,
+          value = _this$props12.value,
+          removeClose = _this$props12.removeClose,
+          boxSize = _this$props12.boxSize,
+          keyName = _this$props12.keyName,
+          idName = _this$props12.idName,
+          title = _this$props12.title,
+          isSearch = _this$props12.isSearch,
+          isArrow = _this$props12.isArrow,
+          placeHolderText = _this$props12.placeHolderText,
+          className = _this$props12.className,
+          right = _this$props12.right,
+          left = _this$props12.left,
+          top = _this$props12.top,
+          bottom = _this$props12.bottom,
+          isOpen = _this$props12.isPopupOpen,
+          isPopupActive = _this$props12.isPopupActive,
+          needExternalPopupState = _this$props12.needExternalPopupState,
+          isPopupReady = _this$props12.isPopupReady,
+          position = _this$props12.position,
+          getTargetRef = _this$props12.getTargetRef,
+          getContainerRef = _this$props12.getContainerRef,
+          dataId = _this$props12.dataId,
+          searchBoxSize = _this$props12.searchBoxSize,
+          searchEmptyHint = _this$props12.searchEmptyHint,
+          searchErrorText = _this$props12.searchErrorText,
+          activeStyle = _this$props12.activeStyle,
+          showOnHover = _this$props12.showOnHover,
+          isDisabled = _this$props12.isDisabled,
+          showIconOnHover = _this$props12.showIconOnHover,
+          isReadOnly = _this$props12.isReadOnly,
+          hoverStyle = _this$props12.hoverStyle,
+          isEditable = _this$props12.isEditable,
+          iconName = _this$props12.iconName,
+          iconSize = _this$props12.iconSize,
+          needTick = _this$props12.needTick,
+          dataTitle = _this$props12.dataTitle,
+          isDataLoaded = _this$props12.isDataLoaded,
+          children = _this$props12.children,
+          needResponsive = _this$props12.needResponsive,
+          arrowIconPosition = _this$props12.arrowIconPosition,
+          isGroupDropDown = _this$props12.isGroupDropDown,
+          groupOptionsKey = _this$props12.groupOptionsKey,
+          groupNameKey = _this$props12.groupNameKey,
+          isToggleStateNeeded = _this$props12.isToggleStateNeeded,
+          selectedId = _this$props12.selectedId,
+          isPadding = _this$props12.isPadding,
+          isNeedEffect = _this$props12.isNeedEffect,
+          hoverType = _this$props12.hoverType,
+          palette = _this$props12.palette,
+          getFooter = _this$props12.getFooter,
+          customProps = _this$props12.customProps;
       var _customProps$ToggleDr = customProps.ToggleDropDownProps,
           ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
           _customProps$DropBoxP = customProps.DropBoxProps,

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -86,10 +86,14 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           onScroll = _this$props.onScroll,
           name = _this$props.name,
-          noMoreData = _this$props.noMoreData;
+          noMoreData = _this$props.noMoreData,
+          searchList = _this$props.searchList;
+      var containerRef = this.containerRef;
 
       if ((0, _Common.findScrollEnd)(this.containerRef) && !noMoreData) {
         onScroll(name);
+        var selectItemRef = this["selectedList_".concat(searchList.length - 1)];
+        (0, _Common2.scrollTo)(containerRef, selectItemRef);
       }
     }
   }, {
@@ -118,9 +122,11 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         }, 300);
       }
 
-      var selectItemRef = this["selectedList_".concat(selectSearchIndex)];
-      var containerRef = this.containerRef;
-      (0, _Common2.scrollTo)(containerRef, selectItemRef);
+      if (selectSearchIndex != prevProps.selectSearchIndex) {
+        var selectItemRef = this["selectedList_".concat(selectSearchIndex)];
+        var containerRef = this.containerRef;
+        (0, _Common2.scrollTo)(containerRef, selectItemRef);
+      }
     }
   }, {
     key: "emptySearchSVG",

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -167,12 +167,12 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
       }
     } else if (keyCode === 40) {
       updateSelectedSuggestionIndex(function (prevSelectedSuggestionIndex) {
-        var newIndex = prevSelectedSuggestionIndex === options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
+        var newIndex = prevSelectedSuggestionIndex >= options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
         return newIndex;
       });
     } else if (keyCode === 38) {
       updateSelectedSuggestionIndex(function (prevSelectedSuggestionIndex) {
-        var newIndex = prevSelectedSuggestionIndex <= 0 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
+        var newIndex = prevSelectedSuggestionIndex <= 0 || prevSelectedSuggestionIndex >= options.length - 1 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
         return newIndex;
       });
     } else if (keyCode === 8 && searchValue === '' & !isValueChanged) {

package/lib/list/Icons/Icons.module.css

@@ -12,4 +12,4 @@
 }
 .redHover:hover {
   color: var(--zdt_icons_hover_red);
-}
+}

package/lib/list/Icons/ReadUnreadIcon.js

@@ -0,0 +1,90 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+
+var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var ReadUnreadIcon = /*#__PURE__*/function (_React$Component) {
+  _inherits(ReadUnreadIcon, _React$Component);
+
+  var _super = _createSuper(ReadUnreadIcon);
+
+  function ReadUnreadIcon() {
+    _classCallCheck(this, ReadUnreadIcon);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ReadUnreadIcon, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          onClick = _this$props.onClick,
+          dataId = _this$props.dataId,
+          dataTitle = _this$props.dataTitle,
+          iconClass = _this$props.iconClass,
+          className = _this$props.className,
+          isRead = _this$props.isRead,
+          iconSize = _this$props.iconSize;
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        onClick: onClick,
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        "data-id": dataId,
+        "data-title": dataTitle
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        name: isRead ? 'ZD-TK-read' : 'ZD-TK-unread',
+        size: iconSize,
+        iconClass: iconClass
+      }));
+    }
+  }]);
+
+  return ReadUnreadIcon;
+}(_react["default"].Component);
+
+exports["default"] = ReadUnreadIcon;
+ReadUnreadIcon.defaultProps = {
+  isRead: false
+};
+ReadUnreadIcon.propTypes = {
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  dataTitle: _propTypes["default"].string,
+  iconClass: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  isRead: _propTypes["default"].bool,
+  iconSize: _propTypes["default"].string
+};

package/lib/list/Icons/docs/FloatingIcons__default.docs.js

@@ -17,6 +17,8 @@ var _DeleteIcon = _interopRequireDefault(require("../DeleteIcon"));
 
 var _SmartIcon = _interopRequireDefault(require("../SmartIcon"));
 
+var _ReadUnreadIcon = _interopRequireDefault(require("../ReadUnreadIcon"));
+
 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); }
@@ -57,7 +59,12 @@ var FloatingIcons__default = /*#__PURE__*/function (_Component) {
   _createClass(FloatingIcons__default, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react["default"].createElement(_FloatingIcons["default"], null, /*#__PURE__*/_react["default"].createElement(_EditIcon["default"], null), /*#__PURE__*/_react["default"].createElement(_DeleteIcon["default"], null), /*#__PURE__*/_react["default"].createElement(_SmartIcon["default"], null));
+      return /*#__PURE__*/_react["default"].createElement(_FloatingIcons["default"], null, /*#__PURE__*/_react["default"].createElement(_ReadUnreadIcon["default"], {
+        isRead: true,
+        iconSize: "15"
+      }), /*#__PURE__*/_react["default"].createElement(_ReadUnreadIcon["default"], {
+        iconSize: "15"
+      }), /*#__PURE__*/_react["default"].createElement(_EditIcon["default"], null), /*#__PURE__*/_react["default"].createElement(_DeleteIcon["default"], null), /*#__PURE__*/_react["default"].createElement(_SmartIcon["default"], null));
     }
   }]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.177",
+  "version": "1.0.0-beta.180",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -30,9 +30,9 @@
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "1.0.0-beta.21",
+    "@zohodesk/variables": "1.0.0-beta.23",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-195",
+    "@zohodesk/components": "1.0.0-alpha-202",
     "@zohodesk/icons": "1.0.0-beta.79",
     "@zohodesk/svg": "1.0.0-beta.34",
     "@zohodesk/virtualizer": "1.0.3",
@@ -40,9 +40,9 @@
   },
   "peerDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "^1.0.0-beta.21",
+    "@zohodesk/variables": "^1.0.0-beta.23",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-195",
+    "@zohodesk/components": "1.0.0-alpha-202",
     "@zohodesk/icons": "^1.0.0-beta.79",
     "@zohodesk/svg": "^1.0.0-beta.34"
   },

package/src/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -45,6 +45,7 @@ export class ToggleDropDown extends Component {
     this.getOptionsArray = this.getOptionsArray.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
+    this.getSelectedIndex = this.getSelectedIndex.bind(this);
   }
 
   emptySearchSVG() {
@@ -156,6 +157,7 @@ export class ToggleDropDown extends Component {
       } else {
         onDropDownClose && onDropDownClose();
       }
+      this.getSelectedIndex(optionsArr);
     }
   }
 
@@ -306,17 +308,28 @@ export class ToggleDropDown extends Component {
     } else {
       if (keyCode === 13 || keyCode === 40) {
         togglePopup(e, boxPosition);
-        for (let i = 0; i < optionsArr.length; i++) {
-          const selectedValue = optionsArr[i][keyName];
-          if (value === selectedValue) {
-            this.setState({
-              selectedIndex: i
-            });
-            break;
-          }
+      }
+    }
+  }
+
+  getSelectedIndex(optionsArr) {
+    const { selectedId, idName } = this.props;
+    if(selectedId) {
+      for (let i = 0; i < optionsArr.length; i++) {
+        const indexId = optionsArr[i][idName];
+        if (selectedId === indexId) {
+          this.setState({
+            selectedIndex: i
+          });
+          break;
         }
       }
     }
+    else {
+      this.setState({
+        selectedIndex: -1
+      })
+    }
   }
 
   onSearchAPI() {

package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -25,9 +25,14 @@ export default class TagsMultiSelect extends React.Component {
   }
 
   onScroll() {
-    let { onScroll, name, noMoreData } = this.props;
+    let { onScroll, name, noMoreData, searchList } = this.props;
+    let {
+      containerRef
+    } = this;
     if (findScrollEnd(this.containerRef) && !noMoreData) {
       onScroll(name);
+      let selectItemRef = this[`selectedList_${searchList.length-1}`];
+      scrollTo(containerRef, selectItemRef);
     }
   }
 
@@ -52,9 +57,11 @@ export default class TagsMultiSelect extends React.Component {
         }
       }, 300);
     }
-    let selectItemRef = this[`selectedList_${selectSearchIndex}`];
-    let { containerRef } = this;
-    scrollTo(containerRef, selectItemRef);
+    if(selectSearchIndex != prevProps.selectSearchIndex){
+      let selectItemRef = this[`selectedList_${selectSearchIndex}`];
+      let { containerRef } = this;
+      scrollTo(containerRef, selectItemRef);
+    }
   }
 
   emptySearchSVG() {

package/src/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -110,7 +110,7 @@ const TagsMultiSelectField = props => {
     } else if (keyCode === 40) {
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
         let newIndex =
-          prevSelectedSuggestionIndex === options.length - 1
+          prevSelectedSuggestionIndex >= options.length - 1
             ? 0
             : prevSelectedSuggestionIndex + 1;
         return newIndex;
@@ -118,7 +118,7 @@ const TagsMultiSelectField = props => {
     } else if (keyCode === 38) {
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
         let newIndex =
-          prevSelectedSuggestionIndex <= 0
+          (prevSelectedSuggestionIndex <= 0 || prevSelectedSuggestionIndex >= options.length - 1)
             ? options.length - 1
             : prevSelectedSuggestionIndex - 1;
         return newIndex;

package/src/list/Icons/CompleteIcon.js

@@ -4,14 +4,8 @@ import Icon from '@zohodesk/icons/lib/Icon';
 import style from './Icons.module.css';
 export default class CompleteIcon extends React.Component {
   render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className,
-      iconSize
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, className, iconSize } =
+      this.props;
     return (
       <span
         onClick={onClick}

package/src/list/Icons/DeleteIcon.js

@@ -5,14 +5,8 @@ import Icon from '@zohodesk/icons/lib/Icon';
 
 export default class DeleteComponent extends React.Component {
   render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      iconSize,
-      className
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
+      this.props;
     return (
       <span
         onClick={onClick}

package/src/list/Icons/EditIcon.js

@@ -5,14 +5,8 @@ import Icon from '@zohodesk/icons/lib/Icon';
 
 export default class EditIcon extends React.Component {
   render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      iconSize,
-      className
-    } = this.props;
+    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
+      this.props;
     return (
       <span
         onClick={onClick}

package/src/list/Icons/FloatingIcons.js

@@ -29,4 +29,4 @@ if (__DOCS__) {
     folderName: 'List',
     componentGroup: 'FloatingIcons'
   };
-}
+}

package/src/list/Icons/Icons.module.css

@@ -12,4 +12,4 @@
 }
 .redHover:hover {
   color: var(--zdt_icons_hover_red);
-}
+}

package/src/list/Icons/ReadUnreadIcon.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './Icons.module.css';
+
+export default class ReadUnreadIcon extends React.Component {
+  render() {
+    let { onClick, dataId, dataTitle, iconClass, className, isRead, iconSize } =
+      this.props;
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon
+          name={isRead ? 'ZD-TK-read' : 'ZD-TK-unread'}
+          size={iconSize}
+          iconClass={iconClass}
+        />
+      </span>
+    );
+  }
+}
+
+ReadUnreadIcon.defaultProps = {
+  isRead: false
+};
+
+ReadUnreadIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  onClick: PropTypes.func,
+  isRead: PropTypes.bool,
+  iconSize: PropTypes.string
+};

package/src/list/Icons/docs/FloatingIcons__default.docs.js

@@ -3,11 +3,14 @@ import FloatingIcons from '../FloatingIcons';
 import EditIcon from '../EditIcon';
 import DeleteIcon from '../DeleteIcon';
 import SmartIcon from '../SmartIcon';
+import ReadUnreadIcon from '../ReadUnreadIcon';
 
 export default class FloatingIcons__default extends Component {
   render() {
     return (
       <FloatingIcons>
+        <ReadUnreadIcon isRead iconSize="15" />
+        <ReadUnreadIcon iconSize="15" />
         <EditIcon />
         <DeleteIcon />
         <SmartIcon />