@zohodesk/dot 1.4.13 → 1.4.15

package/lib/lookup/header/TicketHeader/TicketHeader.js

@@ -23,6 +23,8 @@ var _ViewDropDown = _interopRequireDefault(require("../ViewDropDown/ViewDropDown
 
 var _Layout = require("@zohodesk/components/lib/Layout");
 
+var _useDragger = _interopRequireDefault(require("../../../Hooks/Dragger/useDragger"));
+
 var _lookupHeaderCommonModule = _interopRequireDefault(require("../lookupHeaderCommon.module.css"));
 
 var _lookupHeaderCommonResponsiveModule = _interopRequireDefault(require("../lookupHeaderCommonResponsive.module.css"));
@@ -35,117 +37,102 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _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); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+/*** Libraries ***/
 
-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); }; }
+/*** Components ***/
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+/*** CSS ***/
 
 /* eslint-disable react/forbid-component-props */
-var TicketHeader = /*#__PURE__*/function (_Component) {
-  _inherits(TicketHeader, _Component);
-
-  var _super = _createSuper(TicketHeader);
-
-  function TicketHeader() {
-    _classCallCheck(this, TicketHeader);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(TicketHeader, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          needSearch = _this$props.needSearch,
-          onLookupClose = _this$props.onLookupClose,
-          searchStr = _this$props.searchStr,
-          onSearchChange = _this$props.onSearchChange,
-          searchPlaceHolder = _this$props.searchPlaceHolder,
-          title = _this$props.title,
-          selectedViewId = _this$props.selectedViewId,
-          onSelectView = _this$props.onSelectView,
-          allViews = _this$props.allViews,
-          onSearch = _this$props.onSearch,
-          needOnTypeSearch = _this$props.needOnTypeSearch,
-          getSearchBoxRef = _this$props.getSearchBoxRef,
-          needViewsList = _this$props.needViewsList,
-          i18nKeys = _this$props.i18nKeys,
-          palette = _this$props.palette;
-      var _i18nKeys$menuEmptyMe = i18nKeys.menuEmptyMessage,
-          menuEmptyMessage = _i18nKeys$menuEmptyMe === void 0 ? 'No matches found' : _i18nKeys$menuEmptyMe;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        align: "vertical",
-        alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
-        isCover: false,
-        wrap: "wrap"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _lookupHeaderCommonModule["default"].closeContainer
-      }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
-        onClose: onLookupClose,
-        dataId: "close"
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "column",
-        className: "".concat(_TicketHeaderModule["default"].innerContainer),
-        isCover: false,
-        wrap: "wrap",
-        dataId: "lookupView"
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _lookupHeaderCommonModule["default"].title
-      }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
-        text: title
-      })), needViewsList ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_TicketHeaderModule["default"].dropdown),
-        dataId: "filterIdselected"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TicketHeaderModule["default"].menuWrapper
-      }, /*#__PURE__*/_react["default"].createElement(_ViewDropDown["default"], {
-        dropBoxSize: "small",
-        emptyMessage: menuEmptyMessage,
-        needSearch: true,
-        onChange: onSelectView,
-        options: allViews,
-        textField: "displayLabel",
-        selectedValue: selectedViewId,
-        needCloseOnSelect: true
-      }))) : null)), needSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_lookupHeaderCommonModule["default"].searchContainer, " ").concat(_lookupHeaderCommonResponsiveModule["default"].searchContainer, " ").concat(_TicketHeaderModule["default"].searchContainer)
-      }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
-        onSearch: onSearch,
-        searchStr: searchStr,
-        onChange: onSearchChange,
-        placeHolder: searchPlaceHolder,
-        dataId: "search",
-        needOnTypeSearch: needOnTypeSearch,
-        getRef: getSearchBoxRef
-      })) : null);
-    }
-  }]);
-
-  return TicketHeader;
-}(_react.Component);
-
-exports["default"] = TicketHeader;
+function TicketHeader(props) {
+  var needSearch = props.needSearch,
+      onLookupClose = props.onLookupClose,
+      searchStr = props.searchStr,
+      onSearchChange = props.onSearchChange,
+      searchPlaceHolder = props.searchPlaceHolder,
+      title = props.title,
+      selectedViewId = props.selectedViewId,
+      onSelectView = props.onSelectView,
+      allViews = props.allViews,
+      onSearch = props.onSearch,
+      needOnTypeSearch = props.needOnTypeSearch,
+      getSearchBoxRef = props.getSearchBoxRef,
+      needViewsList = props.needViewsList,
+      i18nKeys = props.i18nKeys,
+      palette = props.palette,
+      dragBoundaryLimit = props.dragBoundaryLimit;
+  var _i18nKeys$menuEmptyMe = i18nKeys.menuEmptyMessage,
+      menuEmptyMessage = _i18nKeys$menuEmptyMe === void 0 ? 'No matches found' : _i18nKeys$menuEmptyMe;
+  var dragRef = (0, _react.useRef)(null); //dragRef
+
+  (0, _useDragger["default"])({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
+    isCover: false,
+    wrap: "wrap",
+    eleRef: dragRef,
+    "data-drag-hook": "true"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "column",
+    className: "".concat(_TicketHeaderModule["default"].innerContainer),
+    isCover: false,
+    wrap: "wrap",
+    dataId: "lookupView"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _lookupHeaderCommonModule["default"].title
+  }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+    text: title
+  })), needViewsList ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_TicketHeaderModule["default"].dropdown),
+    dataId: "filterIdselected"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _TicketHeaderModule["default"].menuWrapper
+  }, /*#__PURE__*/_react["default"].createElement(_ViewDropDown["default"], {
+    dropBoxSize: "small",
+    emptyMessage: menuEmptyMessage,
+    needSearch: true,
+    onChange: onSelectView,
+    options: allViews,
+    textField: "displayLabel",
+    selectedValue: selectedViewId,
+    needCloseOnSelect: true
+  }))) : null)), needSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_lookupHeaderCommonModule["default"].searchContainer, " ").concat(_lookupHeaderCommonResponsiveModule["default"].searchContainer, " ").concat(_TicketHeaderModule["default"].searchContainer)
+  }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
+    onSearch: onSearch,
+    searchStr: searchStr,
+    onChange: onSearchChange,
+    placeHolder: searchPlaceHolder,
+    dataId: "search",
+    needOnTypeSearch: needOnTypeSearch,
+    getRef: getSearchBoxRef
+  })) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _lookupHeaderCommonModule["default"].closeContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+    onClose: onLookupClose,
+    dataId: "close"
+  })));
+}
+
 TicketHeader.propTypes = _propTypes.propTypes;
-TicketHeader.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+TicketHeader.defaultProps = _defaultProps.defaultProps;
+var MemoizedTicketHeader = /*#__PURE__*/(0, _react.memo)(TicketHeader);
+MemoizedTicketHeader.propTypes = _propTypes.propTypes;
+MemoizedTicketHeader.defaultProps = _defaultProps.defaultProps;
+MemoizedTicketHeader.displayName = 'TicketHeader';
+var _default = MemoizedTicketHeader; // if (__DOCS__) {
 //   TicketHeader.docs = {
 //     componentGroup: 'Lookup'
 //   };
-// }
+// }
+
+exports["default"] = _default;

package/lib/lookup/header/TicketHeader/props/defaultProps.js

@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = void 0;
 var defaultProps = {
   i18nKeys: {},
-  palette: 'default'
+  palette: 'default',
+  dragBoundaryLimit: {
+    top: 0,
+    left: 50,
+    right: 50,
+    bottom: 50
+  }
 };
 exports.defaultProps = defaultProps;

package/lib/lookup/header/TicketHeader/props/propTypes.js

@@ -26,6 +26,7 @@ var propTypes = {
   i18nKeys: _propTypes["default"].shape({
     menuEmptyMessage: _propTypes["default"].string
   }),
-  palette: _propTypes["default"].oneOf(['default', 'white'])
+  palette: _propTypes["default"].oneOf(['default', 'white']),
+  dragBoundaryLimit: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/v1/list/Thread/Thread.js

@@ -20,12 +20,11 @@ var _ThreadModule = _interopRequireDefault(require("../../../list/Thread/Thread.
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var Thread = function Thread(props) {
-  var threadCount = props.count,
+  var count = props.count,
       className = props.className,
       iconTitle = props.iconTitle,
       dataId = props.dataId,
       align = props.align;
-  var count = threadCount === '0' ? '1' : threadCount;
   return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     customClass: "".concat(_ThreadModule["default"].container, " ").concat(_ThreadModule["default"]["align_".concat(align)], " ").concat(className),
     title: iconTitle,

package/lib/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -29,10 +29,6 @@ var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"))
 
 var _EmptySearch = _interopRequireDefault(require("@zohodesk/svg/lib/emptystate/version3/EmptySearch"));
 
-var _Common = require("@zohodesk/components/es/utils/Common");
-
-var _TextBox = _interopRequireDefault(require("@zohodesk/components/es/v1/TextBox/TextBox"));
-
 var _CommonEmptyState = _interopRequireDefault(require("../../../emptystate/CommonEmptyState/CommonEmptyState"));
 
 var _StatusListItem = _interopRequireDefault(require("../StatusListItem/StatusListItem"));
@@ -117,7 +113,7 @@ function StatusDropdown(props) {
       onTogglePopup = props.onTogglePopup,
       onClick = props.onClick,
       onSelectLabel = props.onSelectLabel,
-      isNextOptions = props.isNextOptions,
+      isFetchingOptions = props.isFetchingOptions,
       getNextOptions = props.getNextOptions,
       options = props.options,
       _props$a11y = props.a11y,
@@ -128,20 +124,11 @@ function StatusDropdown(props) {
       optionsList = _useState2[0],
       setOptionsList = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(0),
+  var _useState3 = (0, _react.useState)(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      selectedIndex = _useState4[0],
-      setSelectedIndex = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      searchString = _useState6[0],
-      setSearchString = _useState6[1];
-
-  var hiddenInput = (0, _react.useRef)(null);
-  var searchInput = (0, _react.useRef)(null);
-  var optionsContainer = (0, _react.useRef)(null);
-  var dropdown = (0, _react.useRef)({});
+      searchString = _useState4[0],
+      setSearchString = _useState4[1];
+
   var getAriaId = (0, _IdProvider.useUniqueId)();
   var _a11y$tabIndex = a11y.tabIndex,
       tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
@@ -157,84 +144,18 @@ function StatusDropdown(props) {
     });
   }
 
-  function handleInputRef(el) {
-    hiddenInput.current = el;
-  }
-
-  function itemRef(ele, index, id) {
-    dropdown.current["suggestion_".concat(id)] = ele;
-  }
-
-  function searchInputRef(el) {
-    searchInput.current = el;
-  }
-
   function handleTogglePopup(e) {
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e, boxPosition);
   }
 
-  function scrollContentRef(el) {
-    if (isPopupOpen) {
-      optionsContainer.current = el;
-    }
-  }
-
   function onSelect(element, e) {
     onClick && onClick(e, element);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e);
   }
 
-  function handleKeyDown(e) {
-    var keyCode = e.keyCode;
-    var totalIndex = optionsList.length;
-
-    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    }
-
-    if (isPopupReady) {
-      switch (keyCode) {
-        case 40:
-          if (selectedIndex === totalIndex - 1) {
-            setSelectedIndex(0);
-          } else {
-            if (selectedIndex === totalIndex - 3) {
-              isNextOptions && getNextOptions && getNextOptions();
-            }
-
-            setSelectedIndex(selectedIndex + 1);
-          }
-
-          break;
-
-        case 38:
-          if (selectedIndex === 0) {
-            setSelectedIndex(totalIndex - 1);
-          } else {
-            setSelectedIndex(selectedIndex - 1);
-          }
-
-          break;
-
-        case 13:
-          onClick && onClick(optionsList[selectedIndex].name, e);
-          onTogglePopup && onTogglePopup(isPopupOpen);
-          togglePopup(e, boxPosition);
-          break;
-
-        default:
-          break;
-      }
-    } else {
-      if (keyCode === 13 || keyCode === 40) {
-        togglePopup(e, boxPosition);
-      }
-    }
-  }
-
   function searchList(value) {
     var foptions = options.filter(function (dept) {
       return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
@@ -245,7 +166,6 @@ function StatusDropdown(props) {
   function handleChange(value, e) {
     var foptions = searchList(value);
     setSearchString(value);
-    setSelectedIndex(-1);
     setOptionsList(foptions);
   }
 
@@ -255,13 +175,9 @@ function StatusDropdown(props) {
     setOptionsList(foptions);
   }
 
-  function handleMouseEnter(id, value, index, e) {
-    setSelectedIndex(index);
-  }
-
   function handleScroll(e) {
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-      isNextOptions && getNextOptions && getNextOptions(e);
+      getNextOptions && getNextOptions(e);
     }
   }
 
@@ -278,18 +194,7 @@ function StatusDropdown(props) {
     setOptionsList(options);
   }, [options.length]);
   (0, _hooks.useEffectCallOnlyAfterState)(function () {
-    setTimeout(function () {
-      isPopupOpen && isSearch ? searchInput.current && searchInput.current.focus() : hiddenInput.current && hiddenInput.current.focus();
-    }, 10);
-    var mergeOptions = optionsList;
-    var option = mergeOptions[selectedIndex];
-    var id = option && option[idName] || {};
-    var selSuggestion = dropdown.current["suggestion_".concat(id)];
-
-    if (isPopupOpen) {
-      optionsContainer.current && (0, _Common.scrollTo)(optionsContainer.current, selSuggestion);
-      onSearchClear();
-    }
+    isPopupOpen && onSearchClear();
   }, [isPopupOpen]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _StatusDropdownModule["default"].posRel,
@@ -299,12 +204,11 @@ function StatusDropdown(props) {
     tagName: "button",
     alignBox: "row",
     className: "".concat(_StatusDropdownModule["default"].container, " ").concat(containerClass, " ").concat(_semanticButtonModule["default"].buttonReset),
-    onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : null,
+    onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : null,
     eleRef: getTargetRef,
     align: targetAlign,
     isCover: false,
     dataId: dataId,
-    onClick: removeClose,
     disabled: isDisabled || isReadOnly ? true : false,
     "aria-haspopup": isSearch ? 'listbox' : 'menu',
     "aria-expanded": isPopupReady && isEditable ? true : false,
@@ -312,15 +216,7 @@ function StatusDropdown(props) {
     "aria-labelledby": ariaLabelledby,
     "aria-label": ariaLabel,
     "aria-disabled": isDisabled || isReadOnly
-  }, isEditable ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _StatusDropdownModule["default"].hiddenInput
-  }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
-    type: "text",
-    inputRef: handleInputRef,
-    onKeyDown: handleKeyDown,
-    needAppearance: false,
-    placeHolder: placeHolderText
-  })) : null, children ? children : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+  }, children ? children : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     className: "".concat(_StatusDropdownModule["default"].value, " toggleDropText"),
     shrink: true,
     tagName: "span",
@@ -352,7 +248,16 @@ function StatusDropdown(props) {
         customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
       },
       needResponsive: needResponsive,
-      isResponsivePadding: true
+      isResponsivePadding: true,
+      needFocusScope: true,
+      onClose: handleTogglePopup,
+      customProps: {
+        focusScopeProps: {
+          searchValue: searchString,
+          loadNextOptions: getNextOptions,
+          isFetchingOptions: isFetchingOptions
+        }
+      }
     }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
       className: _StatusDropdownModule["default"].search
     }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -361,8 +266,11 @@ function StatusDropdown(props) {
       value: searchString,
       onClear: onSearchClear,
       size: searchBoxSize,
-      inputRef: searchInputRef,
-      onKeyDown: handleKeyDown,
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
       a11y: {
         ariaHaspopup: isSearch ? 'listbox' : 'menu',
         ariaExpanded: isPopupReady,
@@ -385,38 +293,39 @@ function StatusDropdown(props) {
       dataId: "".concat(dataId, "_list"),
       preventParentScroll: "vertical",
       className: "".concat(tabletMode ? _StatusDropdownModule["default"].responsivemaxHgt : _StatusDropdownModule["default"].maxHgt),
-      eleRef: scrollContentRef,
       onScroll: handleScroll,
       role: isSearch ? 'listbox' : 'menu',
-      "aria-labelledby": ariaTitleId,
-      tabindex: "-1"
+      tabindex: "-1",
+      isScrollAttribute: true
     }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, optionsList.map(function (item, i) {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-        key: i
-      }, /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
+      var listItemText = item[keyName];
+      var isActive = value === listItemText;
+      return /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
+        key: i,
         dataId: "dataid_".concat(i),
-        value: item[keyName],
+        value: listItemText,
         id: item[idName],
-        active: value === item[keyName],
+        active: isActive,
         onClick: function onClick(e) {
           return onSelect(item, e);
         },
         index: i,
-        highlight: selectedIndex === i,
         needTick: needTick,
         needBorder: false,
-        onMouseEnter: handleMouseEnter,
-        getRef: itemRef,
         bulletColor: item[statusColor],
-        title: item[keyName],
+        title: listItemText,
         needMultiLineText: needMultiLineText,
+        autoHover: true,
         a11y: {
           role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: value === item[keyName],
-          'data-a11y-list-active': selectedIndex === i
+          ariaSelected: isActive,
+          ariaLabel: listItemText
         }
-      }));
-    })) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
+      });
+    }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
       className: _StatusDropdownModule["default"].svgWrapper,
       title: searchErrorText || 'No results',
       description: searchEmptyHint,

package/lib/v1/list/status/StatusDropdown/props/defaultProps.js

@@ -21,6 +21,7 @@ var defaultProps = {
   boxSize: 'medium',
   needExternalPopupState: false,
   statusColor: 'statusColor',
-  needMultiLineText: false
+  needMultiLineText: false,
+  isFetchingOptions: false
 };
 exports.defaultProps = defaultProps;

package/lib/v1/list/status/StatusDropdown/props/propTypes.js

@@ -30,5 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isNextOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

package/lib/v1/list/status/StatusListItem/StatusListItem.js

@@ -58,7 +58,10 @@ function StatusListItem(props) {
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected,
       _a11y$ariaHidden = a11y.ariaHidden,
-      ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+      ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden,
+      ariaLabel = a11y.ariaLabel,
+      _a11y$insetFocus = a11y.insetFocus,
+      insetFocus = _a11y$insetFocus === void 0 ? true : _a11y$insetFocus;
 
   if (isLink) {
     options.href = href;
@@ -83,6 +86,8 @@ function StatusListItem(props) {
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     role: role,
     "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
+    "data-a11y-inset-focus": insetFocus,
     isCover: false,
     align: "baseline",
     alignBox: "row",

package/lib/v1/lookup/Lookup/Lookup.js

@@ -53,7 +53,8 @@ function Lookup(props) {
       needFocusScope = props.needFocusScope,
       customProps = props.customProps,
       onKeyDown = props.onKeyDown,
-      isMinHeight = props.isMinHeight;
+      isMinHeight = props.isMinHeight,
+      lookupClass = props.lookupClass;
 
   var _a11y$role = a11y.role,
       role = _a11y$role === void 0 ? 'dialog' : _a11y$role,
@@ -103,7 +104,7 @@ function Lookup(props) {
     "aria-label": ariaLabel,
     "aria-modal": ariaModal,
     id: htmlId,
-    className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")]),
+    className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")], " ").concat(lookupClass ? lookupClass : ''),
     "data-id": dataId,
     "data-test-id": dataId
   }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/v1/lookup/Lookup/props/propTypes.js

@@ -14,7 +14,7 @@ var propTypes = {
   customClass: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   isActive: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
+  size: _propTypes["default"].oneOf(['small', 'xmedium', 'medium', 'large', 'xlarge', 'full']),
   htmlId: _propTypes["default"].string,
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
@@ -29,6 +29,7 @@ var propTypes = {
   forwardRef: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   onClose: _propTypes["default"].func,
-  isMinHeight: _propTypes["default"].bool
+  isMinHeight: _propTypes["default"].bool,
+  lookupClass: _propTypes["default"].string
 };
 exports.propTypes = propTypes;