@zohodesk/dot 1.0.0-temp-89 → 1.0.0-temp.888

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

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _DropBox = _interopRequireDefault(require("@zohodesk/components/lib/DropBox/DropBox"));
+
 var _Popup = _interopRequireDefault(require("@zohodesk/components/lib/Popup/Popup"));
 
 var _Layout = require("@zohodesk/components/lib/Layout");
@@ -35,10 +37,6 @@ var _StatusListItem = _interopRequireDefault(require("../StatusListItem/StatusLi
 
 var _commonModule = _interopRequireDefault(require("@zohodesk/components/lib/common/common.module.css"));
 
-var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
-
-var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
-
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
@@ -184,7 +182,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
 
       if (prevProps.isPopupOpen != isPopupOpen) {
         setTimeout(function () {
-          isPopupOpen && isSearch ? _this2.searchInput && _this2.searchInput.focus() : _this2.hiddenInput && _this2.hiddenInput.focus();
+          isPopupOpen ? isSearch ? _this2.searchInput && _this2.searchInput.focus() : _this2.hiddenInput && _this2.hiddenInput.focus() : _this2.hiddenInput && _this2.hiddenInput.focus();
         }, 10);
       }
 
@@ -213,61 +211,54 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           togglePopup = _this$props4.togglePopup,
           onClick = _this$props4.onClick,
           boxPosition = _this$props4.boxPosition,
-          isPopupReady = _this$props4.isPopupReady,
+          isPopupOpen = _this$props4.isPopupOpen,
           isNextOptions = _this$props4.isNextOptions,
           getNextOptions = _this$props4.getNextOptions,
-          onTogglePopup = _this$props4.onTogglePopup,
-          isPopupOpen = _this$props4.isPopupOpen;
+          onTogglePopup = _this$props4.onTogglePopup;
 
-      if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+      if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
         e.preventDefault(); //prevent body scroll
       }
 
-      if (isPopupReady) {
-        switch (keyCode) {
-          case 40:
-            if (selectedIndex === totalIndex - 1) {
-              this.setState({
-                selectedIndex: 0
-              });
-            } else {
-              if (selectedIndex === totalIndex - 3) {
-                isNextOptions && getNextOptions && getNextOptions();
-              }
-
-              this.setState({
-                selectedIndex: selectedIndex + 1
-              });
+      switch (keyCode) {
+        case 40:
+          if (selectedIndex === totalIndex - 1) {
+            this.setState({
+              selectedIndex: 0
+            });
+          } else {
+            if (selectedIndex === totalIndex - 3) {
+              isNextOptions && getNextOptions && getNextOptions();
             }
 
-            break;
-
-          case 38:
-            if (selectedIndex === 0) {
-              this.setState({
-                selectedIndex: totalIndex - 1
-              });
-            } else {
-              this.setState({
-                selectedIndex: selectedIndex - 1
-              });
-            }
+            this.setState({
+              selectedIndex: selectedIndex + 1
+            });
+          }
 
-            break;
+          break;
+
+        case 38:
+          if (selectedIndex === 0) {
+            this.setState({
+              selectedIndex: totalIndex - 1
+            });
+          } else {
+            this.setState({
+              selectedIndex: selectedIndex - 1
+            });
+          }
 
-          case 13:
-            onClick && onClick(options[selectedIndex].name, e);
-            onTogglePopup && onTogglePopup(isPopupOpen);
-            togglePopup(e, boxPosition);
-            break;
+          break;
 
-          default:
-            break;
-        }
-      } else {
-        if (keyCode === 13 || keyCode === 40) {
+        case 13:
+          onClick && onClick(options[selectedIndex].name, e);
+          onTogglePopup && onTogglePopup(isPopupOpen);
           togglePopup(e, boxPosition);
-        }
+          break;
+
+        default:
+          break;
       }
     }
   }, {
@@ -318,16 +309,6 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         isNextOptions && getNextOptions && getNextOptions(e);
       }
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref) {
-      var mediaQueryOR = _ref.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "render",
     value: function render() {
@@ -420,96 +401,87 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         name: "ZD-down",
         iconClass: 'toggleDropIcon'.concat(" ", _StatusDropdownModule["default"].arrow, " ").concat(_StatusDropdownModule["default"]["".concat(arrowIconPosition, "_arrow")]),
         dataId: "statusdownarrow"
-      }) : null), isPopupOpen && isEditable ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref2) {
-        var tabletMode = _ref2.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          boxPosition: position,
-          isActive: isPopupReady,
-          onClick: removeClose,
-          size: boxSize,
-          right: right,
-          left: left,
-          top: top,
-          bottom: bottom,
-          isArrow: isArrow,
-          isAnimate: true,
-          getRef: getContainerRef,
-          customClass: {
-            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
-          },
-          needResponsive: needResponsive,
-          isResponsivePadding: true
-        }, /*#__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"], {
-          placeHolder: placeHolderText,
-          onChange: _this3.handleChange,
-          value: searchString,
-          onClear: _this3.onSearchClear,
-          size: searchBoxSize,
-          inputRef: _this3.searchInputRef,
-          onKeyDown: _this3.handleKeyDown,
-          a11y: {
-            ariaHaspopup: true,
-            ariaExpanded: true,
-            role: 'combobox',
-            ariaActivedescendant: value,
-            ariaOwns: ariaTitleId
-          }
-        })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: _StatusDropdownModule["default"].title
-        }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
-          htmlId: ariaTitleId,
-          text: title,
+      }) : null), isPopupOpen && isEditable ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+        boxPosition: position,
+        isActive: isPopupReady,
+        onClick: removeClose,
+        size: boxSize,
+        right: right,
+        left: left,
+        top: top,
+        bottom: bottom,
+        isArrow: isArrow,
+        isAnimate: true,
+        getRef: getContainerRef,
+        customClass: {
+          customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
+        },
+        needResponsive: needResponsive
+      }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: _StatusDropdownModule["default"].search
+      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchString,
+        onClear: this.onSearchClear,
+        size: searchBoxSize,
+        inputRef: this.searchInputRef,
+        onKeyDown: this.handleKeyDown,
+        a11y: {
+          ariaHaspopup: true,
+          ariaExpanded: true,
+          role: 'combobox',
+          ariaActivedescendant: value,
+          ariaOwns: ariaTitleId
+        }
+      })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: _StatusDropdownModule["default"].title
+      }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
+        htmlId: ariaTitleId,
+        text: title,
+        a11y: {
+          role: 'heading'
+        }
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        scroll: "vertical",
+        dataId: "".concat(dataId, "_list"),
+        className: _StatusDropdownModule["default"].maxHgt,
+        eleRef: this.scrollContentRef,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : 'menu',
+        "aria-labelledby": ariaTitleId,
+        tabindex: "0"
+      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          key: i
+        }, /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
+          dataId: "dataid_".concat(i),
+          value: item[keyName],
+          id: item[idName],
+          active: value === item[keyName],
+          onClick: _this3.onSelect.bind(_this3, item),
+          index: i,
+          highlight: selectedIndex === i,
+          needTick: needTick,
+          needBorder: false,
+          onMouseEnter: _this3.handleMouseEnter,
+          getRef: _this3.itemRef,
+          bulletColor: item[statusColor],
+          title: item[keyName],
           a11y: {
-            role: 'heading'
+            role: isSearch ? 'option' : 'menuitem',
+            ariaSelected: value === item[keyName]
           }
-        })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          scroll: "vertical",
-          flexible: true,
-          shrink: true,
-          dataId: "".concat(dataId, "_list"),
-          className: "".concat(tabletMode ? _StatusDropdownModule["default"].responsivemaxHgt : _StatusDropdownModule["default"].maxHgt),
-          eleRef: _this3.scrollContentRef,
-          onScroll: _this3.handleScroll,
-          role: isSearch ? 'listbox' : 'menu',
-          "aria-labelledby": ariaTitleId,
-          tabindex: "0"
-        }, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-            key: i
-          }, /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
-            dataId: "dataid_".concat(i),
-            value: item[keyName],
-            id: item[idName],
-            active: value === item[keyName],
-            onClick: _this3.onSelect.bind(_this3, item),
-            index: i,
-            highlight: selectedIndex === i,
-            needTick: needTick,
-            needBorder: false,
-            onMouseEnter: _this3.handleMouseEnter,
-            getRef: _this3.itemRef,
-            bulletColor: item[statusColor],
-            title: item[keyName],
-            a11y: {
-              role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: value === item[keyName]
-            }
-          }));
-        })) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
-          className: _StatusDropdownModule["default"].svgWrapper,
-          title: searchErrorText || 'No results',
-          description: searchEmptyHint,
-          size: "small",
-          getEmptyState: _this3.emptySearchSVG
-        }) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _StatusDropdownModule["default"].loader
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))));
-      }) : null);
+        }));
+      })) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
+        className: _StatusDropdownModule["default"].svgWrapper,
+        title: searchErrorText || 'oops !',
+        description: searchEmptyHint,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      }) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: _StatusDropdownModule["default"].loader
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))) : null);
     }
   }]);
 

package/lib/list/status/StatusDropdown/StatusDropdown.module.css

@@ -8,9 +8,6 @@
   max-height: var(--zd_size265);
   padding: var(--zd_size10) 0;
 }
-.responsivemaxHgt{
-  padding: var(--zd_size10) 0 0;
-}
 .title {
   padding-top: var(--zd_size6);
 }

package/lib/lookup/header/ModuleHeader/ModuleHeader.js

@@ -80,12 +80,11 @@ var ModuleHeader = /*#__PURE__*/function (_PureComponent) {
           miniDescription = _this$props.miniDescription,
           dataId = _this$props.dataId,
           closeTitle = _this$props.closeTitle,
-          onSearchKeyDown = _this$props.onSearchKeyDown,
-          palette = _this$props.palette;
+          onSearchKeyDown = _this$props.onSearchKeyDown;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)]),
+        className: "".concat(_lookupHeaderCommonModule["default"].container),
         isCover: false,
         wrap: "wrap",
         dataId: dataId
@@ -135,11 +134,7 @@ ModuleHeader.propTypes = {
   title: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   closeTitle: _propTypes["default"].string,
-  onSearchKeyDown: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'white'])
-};
-ModuleHeader.defaultProps = {
-  palette: 'default'
+  onSearchKeyDown: _propTypes["default"].func
 };
 
 if (false) {

package/lib/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js

@@ -66,24 +66,14 @@ var ModuleHeader__default = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var searchStr = this.state.searchStr;
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
         title: "Find Duplicate",
         needSearch: true,
         searchStr: searchStr,
         onSearchChange: this.handleSearch,
         searchPlaceHolder: "Search",
-        miniDescription: "Select a field to search for duplicate records",
-        onLookupClose: function onLookupClose() {}
-      }), /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], {
-        title: "Find Duplicate",
-        needSearch: true,
-        searchStr: searchStr,
-        onSearchChange: this.handleSearch,
-        searchPlaceHolder: "Search",
-        miniDescription: "Select a field to search for duplicate records",
-        onLookupClose: function onLookupClose() {},
-        palette: "white"
-      }));
+        miniDescription: "Select a field to search for duplicate records"
+      });
     }
   }]);
 

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

@@ -82,14 +82,13 @@ var TicketHeader = /*#__PURE__*/function (_Component) {
           needOnTypeSearch = _this$props.needOnTypeSearch,
           getSearchBoxRef = _this$props.getSearchBoxRef,
           needViewsList = _this$props.needViewsList,
-          i18nKeys = _this$props.i18nKeys,
-          palette = _this$props.palette;
+          i18nKeys = _this$props.i18nKeys;
       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),
+        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
         isCover: false,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -157,12 +156,10 @@ TicketHeader.propTypes = {
   title: _propTypes["default"].string,
   i18nKeys: _propTypes["default"].shape({
     menuEmptyMessage: _propTypes["default"].string
-  }),
-  palette: _propTypes["default"].oneOf(['default', 'white'])
+  })
 };
 TicketHeader.defaultProps = {
-  i18nKeys: {},
-  palette: 'default'
+  i18nKeys: {}
 };
 
 if (false) {

package/lib/lookup/header/ViewDropDown/ViewDropDown.js

@@ -15,16 +15,14 @@ var _Select = require("@zohodesk/components/lib/Select/Select");
 
 var _Popup = _interopRequireDefault(require("@zohodesk/components/lib/Popup/Popup"));
 
+var _DropBox = _interopRequireDefault(require("@zohodesk/components/lib/DropBox/DropBox"));
+
 var _ListItem = _interopRequireDefault(require("@zohodesk/components/lib/ListItem/ListItem"));
 
 var _DropDownSearch = _interopRequireDefault(require("@zohodesk/components/lib/DropDown/DropDownSearch"));
 
 var _Card = require("@zohodesk/components/lib/Card");
 
-var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
-
-var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
-
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _Layout = require("@zohodesk/components/lib/Layout");
@@ -84,16 +82,6 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
         this.handleKeyDown(e);
       }
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref) {
-      var mediaQueryOR = _ref.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "render",
     value: function render() {
@@ -137,67 +125,56 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
         name: "ZD-down",
         size: "7",
         iconClass: _ViewDropDownModule["default"].arrowIcon
-      }))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref2) {
-        var tabletMode = _ref2.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          isAnimate: true,
-          isArrow: false,
-          isActive: isPopupReady,
-          boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
-          getRef: getContainerRef,
-          onClick: removeClose,
-          animationStyle: animationStyle,
-          size: "large",
-          alignBox: "row",
-          isResponsivePadding: true
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true
-        }, /*#__PURE__*/_react["default"].createElement(_Card.Card, null, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_DropDownSearch["default"], {
-          value: searchStr,
-          onChange: _this2.handleSearch,
-          onKeyDown: _this2.onSearchKeyDown,
-          getRef: _this2.searchInputRef,
-          size: searchBoxSize,
-          variant: searchBoxVariant,
-          placeHolder: searchBoxPlaceHolder,
-          maxLength: maxLength
-        })) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-          shrink: true,
-          eleRef: _this2.suggestionContainerRef,
-          customClass: !tabletMode && dropBoxSize ? _ViewDropDownModule["default"][dropBoxSize] : ''
-        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].listItemContainer
-        }, suggestions.map(function () {
-          var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-          var index = arguments.length > 1 ? arguments[1] : undefined;
-          var id = option.id,
-              value = option.value;
-          return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            active: id === selectedId,
-            getRef: _this2.suggestionItemRef,
-            highlight: hoverIndex === index ? true : false,
-            id: id,
-            key: "".concat(id, "dropDown"),
-            onClick: _this2.handleChange,
-            onMouseEnter: _this2.handleMouseEnter,
-            size: "medium",
-            value: value,
-            index: index,
-            needTick: true,
-            needBorder: false
-          });
-        })) : isFetchingOptions ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          align: "both",
-          className: _ViewDropDownModule["default"].loader
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : searchStr ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].emptyState
-        }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].emptyState
-        }, emptyMessage)))));
-      }) : null);
+      }))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+        isAnimate: true,
+        isArrow: false,
+        isActive: isPopupReady,
+        boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
+        getRef: getContainerRef,
+        onClick: removeClose,
+        animationStyle: animationStyle,
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_Card.Card, null, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_DropDownSearch["default"], {
+        value: searchStr,
+        onChange: this.handleSearch,
+        onKeyDown: this.onSearchKeyDown,
+        getRef: this.searchInputRef,
+        size: searchBoxSize,
+        variant: searchBoxVariant,
+        placeHolder: searchBoxPlaceHolder,
+        maxLength: maxLength
+      })) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        eleRef: this.suggestionContainerRef,
+        customClass: dropBoxSize ? _ViewDropDownModule["default"][dropBoxSize] : ''
+      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: _ViewDropDownModule["default"].listItemContainer
+      }, suggestions.map(function () {
+        var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var index = arguments.length > 1 ? arguments[1] : undefined;
+        var id = option.id,
+            value = option.value;
+        return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+          active: id === selectedId,
+          getRef: _this2.suggestionItemRef,
+          highlight: hoverIndex === index ? true : false,
+          id: id,
+          key: "".concat(id, "dropDown"),
+          onClick: _this2.handleChange,
+          onMouseEnter: _this2.handleMouseEnter,
+          size: "medium",
+          value: value,
+          index: index,
+          needTick: true,
+          needBorder: false
+        });
+      })) : isFetchingOptions ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both",
+        className: _ViewDropDownModule["default"].loader
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : searchStr ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: _ViewDropDownModule["default"].emptyState
+      }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: _ViewDropDownModule["default"].emptyState
+      }, emptyMessage)))) : null);
     }
   }]);
 

package/lib/lookup/header/lookupHeaderCommon.module.css

@@ -1,19 +1,13 @@
 .container {
   min-height: var(--zd_size51);
   position: relative;
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
 }[dir=ltr] .container {
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
 }[dir=rtl] .container {
   padding: 0 var(--zd_size10) 0 var(--zd_size52);
 }
-.default {
-  background-color: var(--zdt_lookupheader_default_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
-}
-.white {
-  background-color: var(--zdt_lookupheader_white_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_white_border);
-}
 .searchContainer, .title {
   margin: 0 var(--zd_size20);
 }

package/lib/setup/header/Views/Views.js

@@ -62,14 +62,14 @@ var Views = /*#__PURE__*/function (_React$Component) {
         className: _ViewsModule["default"].container
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_ViewsModule["default"].icon, " ").concat(_ViewsModule["default"].first, " ").concat(isList ? _ViewsModule["default"].active : ''),
-        "data-title": !isList ? listTitle : null,
+        "data-title": !isList ? listTitle : '',
         onClick: onListClick
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-list22",
         size: "10"
       })), /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_ViewsModule["default"].icon, " ").concat(_ViewsModule["default"].last, "  ").concat(isGrid ? _ViewsModule["default"].active : ''),
-        "data-title": !isGrid ? gridTitle : null,
+        "data-title": !isGrid ? gridTitle : '',
         onClick: onGridClick
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-grid",