@zohodesk/dot 1.2.4 → 1.3.0

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

@@ -1,158 +1,136 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { defaultProps } from '../../../../list/status/StatusDropdown/props/defaultProps';
 import { propTypes } from '../../../../list/status/StatusDropdown/props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import { Box, Container } from '@zohodesk/components/lib/Layout';
-import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import Popup from '@zohodesk/components/es/v1/Popup/Popup';
+import { Box, Container } from '@zohodesk/components/es/v1/Layout';
+import DropDownHeading from '@zohodesk/components/es/v1/DropDown/DropDownHeading';
+import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import { scrollTo } from '@zohodesk/components/es/utils/Common';
+import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
-import commonStyle from '@zohodesk/components/lib/common/common.module.css';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import commonStyle from '@zohodesk/components/es/common/common.module.css';
+import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import style from '../../../../list/status/StatusDropdown/StatusDropdown.module.css';
-export class StatusDropdown extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchString: '',
-      selectedIndex: 0,
-      options: props.options
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.onSelect = this.onSelect.bind(this);
-    this.handleTogglePopup = this.handleTogglePopup.bind(this);
-    this.onSearchClear = this.onSearchClear.bind(this);
-    this.searchList = this.searchList.bind(this);
-    this.scrollContentRef = this.scrollContentRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.searchInputRef = this.searchInputRef.bind(this);
-    this.itemRef = this.itemRef.bind(this);
-    this.inputRef = this.inputRef.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.emptySearchSVG = this.emptySearchSVG.bind(this);
-    this.getAriaId = getUniqueId(this);
-  }
 
-  emptySearchSVG() {
+function StatusDropdown(props) {
+  let {
+    value,
+    removeClose,
+    boxSize,
+    keyName,
+    idName,
+    title,
+    isSearch,
+    isArrow,
+    placeHolderText,
+    className,
+    right,
+    left,
+    top,
+    bottom,
+    isPopupOpen: isOpen,
+    isPopupReady,
+    position,
+    getTargetRef,
+    getContainerRef,
+    dataId,
+    searchBoxSize,
+    searchEmptyHint,
+    searchErrorText,
+    activeStyle,
+    showOnHover = false,
+    isDisabled,
+    showIconOnHover,
+    isReadOnly,
+    hoverStyle,
+    isEditable,
+    needTick,
+    dataTitle,
+    isDataLoaded,
+    children,
+    targetAlign,
+    needResponsive,
+    arrowIconPosition,
+    statusColor,
+    needExternalPopupState = false,
+    isPopupActive = false,
+    needMultiLineText,
+    boxPosition,
+    togglePopup,
+    onTogglePopup,
+    onClick,
+    onSelectLabel,
+    isNextOptions,
+    getNextOptions,
+    options,
+    a11y = {}
+  } = props;
+  const [optionsList, setOptionsList] = useState(options);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [searchString, setSearchString] = useState('');
+  const hiddenInput = useRef(null);
+  const searchInput = useRef(null);
+  const optionsContainer = useRef(null);
+  const dropdown = useRef({});
+  const getAriaId = useUniqueId();
+  const {
+    tabIndex = 0,
+    ariaLabelledby,
+    ariaLabel
+  } = a11y;
+  let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
+  let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
+  let ariaTitleId = getAriaId();
+
+  function emptySearchSVG() {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
   }
 
-  inputRef(el) {
-    this.hiddenInput = el;
+  function handleInputRef(el) {
+    hiddenInput.current = el;
   }
 
-  itemRef(ele, index, id) {
-    this[`suggestion_${id}`] = ele;
+  function itemRef(ele, index, id) {
+    dropdown.current[`suggestion_${id}`] = ele;
   }
 
-  searchInputRef(el) {
-    this.searchInput = el;
+  function searchInputRef(el) {
+    searchInput.current = el;
   }
 
-  handleTogglePopup(e) {
-    let {
-      togglePopup,
-      boxPosition,
-      onSelectLabel,
-      isPopupOpen,
-      onTogglePopup
-    } = this.props;
+  function handleTogglePopup(e) {
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e, boxPosition);
   }
 
-  scrollContentRef(el) {
-    let {
-      isPopupOpen
-    } = this.props;
-
+  function scrollContentRef(el) {
     if (isPopupOpen) {
-      this.optionsContainer = el;
+      optionsContainer.current = el;
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.options.length != this.props.options.length) {
-      this.setState({
-        options: nextProps.options
-      });
-    }
-  }
-
-  onSelect(element, e) {
-    let {
-      onClick,
-      togglePopup,
-      isPopupOpen,
-      onTogglePopup
-    } = this.props;
+  function onSelect(element, e) {
     onClick && onClick(e, element);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e);
   }
 
-  componentDidUpdate(prevProps) {
-    let {
-      isPopupOpen,
-      isSearch,
-      idName
-    } = this.props;
-    let {
-      selectedIndex,
-      options
-    } = this.state;
-
-    if (prevProps.isPopupOpen != isPopupOpen) {
-      setTimeout(() => {
-        isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
-      }, 10);
-    }
-
-    let mergeOptions = options;
-    let option = mergeOptions[selectedIndex];
-    let id = option && option[idName] || {};
-    let selSuggestion = this[`suggestion_${id}`];
-
-    if (isPopupOpen) {
-      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-    }
-
-    if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
-      this.onSearchClear();
-    }
-  }
-
-  handleKeyDown(e) {
+  function handleKeyDown(e) {
     let {
       keyCode
     } = e;
-    let {
-      selectedIndex,
-      options
-    } = this.state;
-    let totalIndex = options.length;
-    let {
-      togglePopup,
-      onClick,
-      boxPosition,
-      isPopupReady,
-      isNextOptions,
-      getNextOptions,
-      onTogglePopup,
-      isPopupOpen
-    } = this.props;
+    let totalIndex = optionsList.length;
 
     if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
@@ -162,36 +140,28 @@ export class StatusDropdown extends React.Component {
       switch (keyCode) {
         case 40:
           if (selectedIndex === totalIndex - 1) {
-            this.setState({
-              selectedIndex: 0
-            });
+            setSelectedIndex(0);
           } else {
             if (selectedIndex === totalIndex - 3) {
               isNextOptions && getNextOptions && getNextOptions();
             }
 
-            this.setState({
-              selectedIndex: selectedIndex + 1
-            });
+            setSelectedIndex(selectedIndex + 1);
           }
 
           break;
 
         case 38:
           if (selectedIndex === 0) {
-            this.setState({
-              selectedIndex: totalIndex - 1
-            });
+            setSelectedIndex(totalIndex - 1);
           } else {
-            this.setState({
-              selectedIndex: selectedIndex - 1
-            });
+            setSelectedIndex(selectedIndex - 1);
           }
 
           break;
 
         case 13:
-          onClick && onClick(options[selectedIndex].name, e);
+          onClick && onClick(optionsList[selectedIndex].name, e);
           onTogglePopup && onTogglePopup(isPopupOpen);
           togglePopup(e, boxPosition);
           break;
@@ -206,50 +176,35 @@ export class StatusDropdown extends React.Component {
     }
   }
 
-  searchList(value) {
-    let {
-      options,
-      keyName
-    } = this.props;
+  function searchList(value) {
     let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
     return foptions;
   }
 
-  handleChange(value, e) {
-    let foptions = this.searchList(value);
-    this.setState({
-      searchString: value,
-      selectedIndex: -1,
-      options: foptions
-    });
+  function handleChange(value, e) {
+    let foptions = searchList(value);
+    setSearchString(value);
+    setSelectedIndex(-1);
+    setOptionsList(foptions);
   }
 
-  onSearchClear() {
-    let foptions = this.searchList('');
-    this.setState({
-      searchString: '',
-      options: foptions
-    });
+  function onSearchClear() {
+    let foptions = searchList('');
+    setSearchString('');
+    setOptionsList(foptions);
   }
 
-  handleMouseEnter(id, value, index, e) {
-    this.setState({
-      selectedIndex: index
-    });
+  function handleMouseEnter(id, value, index, e) {
+    setSelectedIndex(index);
   }
 
-  handleScroll(e) {
-    const {
-      isNextOptions,
-      getNextOptions
-    } = this.props;
-
+  function handleScroll(e) {
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
       isNextOptions && getNextOptions && getNextOptions(e);
     }
   }
 
-  responsiveFunc(_ref) {
+  function responsiveFunc(_ref) {
     let {
       mediaQueryOR
     } = _ref;
@@ -260,206 +215,160 @@ export class StatusDropdown extends React.Component {
     };
   }
 
-  render() {
-    let {
-      options,
-      selectedIndex
-    } = this.state;
-    let {
-      value,
-      removeClose,
-      boxSize,
-      keyName,
-      idName,
-      title,
-      isSearch,
-      isArrow,
-      placeHolderText,
-      className,
-      right,
-      left,
-      top,
-      bottom,
-      isPopupOpen: isOpen,
-      isPopupReady,
-      position,
-      getTargetRef,
-      getContainerRef,
-      dataId,
-      searchBoxSize,
-      searchEmptyHint,
-      searchErrorText,
-      activeStyle,
-      showOnHover = false,
-      isDisabled,
-      showIconOnHover,
-      isReadOnly,
-      hoverStyle,
-      isEditable,
-      needTick,
-      dataTitle,
-      isDataLoaded,
-      children,
-      targetAlign,
-      needResponsive,
-      arrowIconPosition,
-      statusColor,
-      needExternalPopupState = false,
-      isPopupActive = false,
-      needMultiLineText,
-      a11y = {}
-    } = this.props;
-    const {
-      tabIndex = 0,
-      ariaLabelledby,
-      ariaLabel
-    } = a11y;
-    let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
+  useEffectCallOnlyAfterState(() => {
+    setOptionsList(options);
+  }, [options.length]);
+  useEffectCallOnlyAfterState(() => {
+    setTimeout(() => {
+      isPopupOpen && isSearch ? searchInput.current && searchInput.current.focus() : hiddenInput.current && hiddenInput.current.focus();
+    }, 10);
+    let mergeOptions = optionsList;
+    let option = mergeOptions[selectedIndex];
+    let id = option && option[idName] || {};
+    let selSuggestion = dropdown.current[`suggestion_${id}`];
+
+    if (isPopupOpen) {
+      optionsContainer.current && scrollTo(optionsContainer.current, selSuggestion);
+      onSearchClear();
+    }
+  }, [isPopupOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.posRel,
+    onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined,
+    onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined
+  }, /*#__PURE__*/React.createElement(Container, {
+    tagName: "button",
+    alignBox: "row",
+    className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
+    onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : null,
+    eleRef: getTargetRef,
+    align: targetAlign,
+    isCover: false,
+    dataId: dataId,
+    onClick: removeClose,
+    disabled: isDisabled || isReadOnly ? true : false,
+    "aria-haspopup": true,
+    "aria-expanded": isPopupOpen && isEditable ? true : false,
+    tabIndex: tabIndex,
+    "aria-labelledby": ariaLabelledby,
+    "aria-label": ariaLabel,
+    "aria-disabled": isDisabled || isReadOnly
+  }, isEditable ? /*#__PURE__*/React.createElement("div", {
+    className: style.hiddenInput
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    type: "text",
+    inputRef: handleInputRef,
+    onKeyDown: handleKeyDown,
+    needAppearance: false,
+    placeHolder: placeHolderText
+  })) : null, children ? children : /*#__PURE__*/React.createElement(Box, {
+    className: `${style.value} toggleDropText`,
+    shrink: true,
+    tagName: "span",
+    "data-title": dataTitle
+  }, value), isEditable ? /*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
+    size: "7",
+    name: "ZD-down",
+    iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
+    dataId: "statusdownarrow"
+  }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: "Helmet"
+  }, _ref2 => {
     let {
-      searchString
-    } = this.state;
-    let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
-    let ariaTitleId = this.getAriaId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.posRel,
-      onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
-      onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
-    }, /*#__PURE__*/React.createElement(Container, {
-      tagName: "button",
-      alignBox: "row",
-      className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
-      onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
-      eleRef: getTargetRef,
-      align: targetAlign,
-      isCover: false,
-      dataId: dataId,
+      tabletMode
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      boxPosition: position,
+      isActive: isPopupReady,
       onClick: removeClose,
-      disabled: isDisabled || isReadOnly ? true : false,
-      "aria-haspopup": true,
-      "aria-expanded": isPopupOpen && isEditable ? true : false,
-      tabIndex: tabIndex,
-      "aria-labelledby": ariaLabelledby,
-      "aria-label": ariaLabel,
-      "aria-disabled": isDisabled || isReadOnly
-    }, isEditable ? /*#__PURE__*/React.createElement("div", {
-      className: style.hiddenInput
-    }, /*#__PURE__*/React.createElement(TextBox, {
-      type: "text",
-      inputRef: this.inputRef,
-      onKeyDown: this.handleKeyDown,
-      needAppearance: false,
-      placeHolder: placeHolderText
-    })) : null, children ? children : /*#__PURE__*/React.createElement(Box, {
-      className: `${style.value} toggleDropText`,
+      size: boxSize,
+      right: right,
+      left: left,
+      top: top,
+      bottom: bottom,
+      isArrow: isArrow,
+      isAnimate: true,
+      getRef: getContainerRef,
+      customClass: {
+        customDropBoxWrap: style.dropBoxContainer
+      },
+      needResponsive: needResponsive,
+      isResponsivePadding: true
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+      className: style.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      placeHolder: placeHolderText,
+      onChange: handleChange,
+      value: searchString,
+      onClear: onSearchClear,
+      size: searchBoxSize,
+      inputRef: searchInputRef,
+      onKeyDown: handleKeyDown,
+      a11y: {
+        ariaHaspopup: true,
+        ariaExpanded: true,
+        role: 'combobox',
+        ariaActivedescendant: value,
+        ariaOwns: ariaTitleId
+      }
+    })) : null, title && optionsList.length != 0 && /*#__PURE__*/React.createElement(Box, {
+      className: style.title
+    }, /*#__PURE__*/React.createElement(DropDownHeading, {
+      htmlId: ariaTitleId,
+      text: title,
+      a11y: {
+        role: 'heading'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      scroll: "vertical",
+      flexible: true,
       shrink: true,
-      tagName: "span",
-      "data-title": dataTitle
-    }, value), isEditable ? /*#__PURE__*/React.createElement(Icon, {
-      "aria-hidden": true,
-      size: "7",
-      name: "ZD-down",
-      iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
-      dataId: "statusdownarrow"
-    }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        boxPosition: position,
-        isActive: isPopupReady,
-        onClick: removeClose,
-        size: boxSize,
-        right: right,
-        left: left,
-        top: top,
-        bottom: bottom,
-        isArrow: isArrow,
-        isAnimate: true,
-        getRef: getContainerRef,
-        customClass: {
-          customDropBoxWrap: style.dropBoxContainer
-        },
-        needResponsive: needResponsive,
-        isResponsivePadding: true
-      }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
-        className: style.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        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.createElement(Box, {
-        className: style.title
-      }, /*#__PURE__*/React.createElement(DropDownHeading, {
-        htmlId: ariaTitleId,
-        text: title,
-        a11y: {
-          role: 'heading'
-        }
-      })), /*#__PURE__*/React.createElement(Box, {
-        scroll: "vertical",
-        flexible: true,
-        shrink: true,
-        dataId: `${dataId}_list`,
-        preventParentScroll: "vertical",
-        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
-        eleRef: this.scrollContentRef,
-        onScroll: this.handleScroll,
-        role: isSearch ? 'listbox' : 'menu',
-        "aria-labelledby": ariaTitleId,
-        tabindex: "0"
-      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
-        key: i
-      }, /*#__PURE__*/React.createElement(StatusListItem, {
-        dataId: `dataid_${i}`,
-        value: item[keyName],
-        id: item[idName],
-        active: value === item[keyName],
-        onClick: this.onSelect.bind(this, item),
-        index: i,
-        highlight: selectedIndex === i,
-        needTick: needTick,
-        needBorder: false,
-        onMouseEnter: this.handleMouseEnter,
-        getRef: this.itemRef,
-        bulletColor: item[statusColor],
-        title: item[keyName],
-        needMultiLineText: needMultiLineText,
-        a11y: {
-          role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: value === item[keyName]
-        }
-      })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
-        className: style.svgWrapper,
-        title: searchErrorText || 'No results',
-        description: searchEmptyHint,
-        size: "small",
-        getEmptyState: this.emptySearchSVG
-      }) : /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)))));
-    }) : null);
-  }
-
-} // if (__DOCS__) {
-//   StatusDropdown.docs = {
-//     componentGroup: 'Molecule'
-//   };
-// }
+      dataId: `${dataId}_list`,
+      preventParentScroll: "vertical",
+      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+      eleRef: scrollContentRef,
+      onScroll: handleScroll,
+      role: isSearch ? 'listbox' : 'menu',
+      "aria-labelledby": ariaTitleId,
+      tabindex: "0"
+    }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, optionsList.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: i
+    }, /*#__PURE__*/React.createElement(StatusListItem, {
+      dataId: `dataid_${i}`,
+      value: item[keyName],
+      id: item[idName],
+      active: value === item[keyName],
+      onClick: e => onSelect(item, e),
+      index: i,
+      highlight: selectedIndex === i,
+      needTick: needTick,
+      needBorder: false,
+      onMouseEnter: handleMouseEnter,
+      getRef: itemRef,
+      bulletColor: item[statusColor],
+      title: item[keyName],
+      needMultiLineText: needMultiLineText,
+      a11y: {
+        role: isSearch ? 'option' : 'menuitem',
+        ariaSelected: value === item[keyName]
+      }
+    })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+      className: style.svgWrapper,
+      title: searchErrorText || 'No results',
+      description: searchEmptyHint,
+      size: "small",
+      getEmptyState: emptySearchSVG
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)))));
+  }) : null);
+}
 
 StatusDropdown.defaultProps = defaultProps;
 StatusDropdown.propTypes = propTypes;
-export default Popup(StatusDropdown);
+const StatusDropdown_Component = Popup(StatusDropdown);
+StatusDropdown_Component.defaultProps = StatusDropdown.defaultProps;
+StatusDropdown_Component.propTypes = StatusDropdown.propTypes;
+export default StatusDropdown_Component;