@zohodesk/dot 1.0.0-temp-38 → 1.0.0-temp-39

package/src/list/status/StatusDropdown/StatusDropdown.js

@@ -1,538 +1,544 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
-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 Loader from '@zohodesk/svg/lib/svg/Loader';
-import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
-import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import StatusListItem from '../StatusListItem/StatusListItem';
-import commonStyle from '@zohodesk/components/lib/common/common.module.css';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
-import style from './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() {
-    return <EmptySearch size='small' />;
-  }
-
-  inputRef(el) {
-    this.hiddenInput = el;
-  }
-
-  itemRef(ele, index, id) {
-    this[`suggestion_${id}`] = ele;
-  }
-
-  searchInputRef(el) {
-    this.searchInput = el;
-  }
-
-  handleTogglePopup(e) {
-    let {
-      togglePopup,
-      boxPosition,
-      onSelectLabel,
-      isPopupOpen,
-      onTogglePopup
-    } = this.props;
-    !isPopupOpen && onSelectLabel && onSelectLabel(e);
-    onTogglePopup && onTogglePopup(isPopupOpen);
-    togglePopup(e, boxPosition);
-  }
-
-  scrollContentRef(el) {
-    let { isPopupOpen } = this.props;
-    if (isPopupOpen) {
-      this.optionsContainer = el;
-    }
-  }
-
-  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;
-    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()
-          : 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) {
-    let { keyCode } = e;
-    let { selectedIndex, options } = this.state;
-    let totalIndex = options.length;
-    let {
-      togglePopup,
-      onClick,
-      boxPosition,
-      isPopupOpen,
-      isNextOptions,
-      getNextOptions,
-      onTogglePopup
-    } = this.props;
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-      e.preventDefault(); //prevent body scroll
-    }
-    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 });
-        }
-        break;
-      case 38:
-        if (selectedIndex === 0) {
-          this.setState({ selectedIndex: totalIndex - 1 });
-        } else {
-          this.setState({ selectedIndex: selectedIndex - 1 });
-        }
-        break;
-      case 13:
-        onClick && onClick(options[selectedIndex].name, e);
-        onTogglePopup && onTogglePopup(isPopupOpen);
-        togglePopup(e, boxPosition);
-        break;
-      default:
-        break;
-    }
-  }
-
-  searchList(value) {
-    let { options, keyName } = this.props;
-    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
-    });
-  }
-
-  onSearchClear() {
-    let foptions = this.searchList('');
-    this.setState({
-      searchString: '',
-      options: foptions
-    });
-  }
-
-  handleMouseEnter(id, value, index, e) {
-    this.setState({
-      selectedIndex: index
-    });
-  }
-
-  handleScroll(e) {
-    const { isNextOptions, getNextOptions } = this.props;
-    if (
-      e.target.scrollTop + e.target.offsetHeight >
-      e.target.scrollHeight - 1
-    ) {
-      isNextOptions && getNextOptions && getNextOptions(e);
-    }
-  }
-
-  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
-    } = this.props;
-    let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
-    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 (
-      <div
-        className={style.posRel}
-        onMouseEnter={
-          showOnHover && !isDisabled && !isReadOnly && isEditable
-            ? this.handleTogglePopup
-            : undefined
-        }
-        onMouseLeave={
-          showOnHover && !isDisabled && !isReadOnly && isEditable
-            ? this.handleTogglePopup
-            : undefined
-        }
-      >
-        <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}
-          onClick={removeClose}
-          disabled={isDisabled || isReadOnly ? true : false}
-          aria-haspopup={true}
-          aria-expanded={isPopupOpen && isEditable ? true : false}
-        >
-          {isEditable ? (
-            <div className={style.hiddenInput}>
-              <TextBox
-                type='text'
-                inputRef={this.inputRef}
-                onKeyDown={this.handleKeyDown}
-                needAppearance={false}
-                placeHolder={placeHolderText}
-              />
-            </div>
-          ) : null}
-          {children ? (
-            children
-          ) : (
-            <Box
-              className={`${style.value} toggleDropText`}
-              shrink
-              tagName='span'
-              data-title={dataTitle}
-            >
-              {value}
-            </Box>
-          )}
-          {isEditable ? (
-            <Icon
-              aria-hidden={true}
-              size='7'
-              name='ZD-down'
-              iconClass={`${'toggleDropIcon'} ${style.arrow} ${
-                style[`${arrowIconPosition}_arrow`]
-              }`}
-              dataId='statusdownarrow'
-            />
-          ) : null}
-        </Container>
-        {isPopupOpen && isEditable ? (
-          <DropBox
-            boxPosition={position}
-            isActive={isPopupReady}
-            onClick={removeClose}
-            size={boxSize}
-            right={right}
-            left={left}
-            top={top}
-            bottom={bottom}
-            isArrow={isArrow}
-            isAnimate
-            getRef={getContainerRef}
-            customClass={{
-              customDropBoxWrap: style.dropBoxContainer
-            }}
-            needResponsive={needResponsive}
-          >
-            <React.Fragment>
-              {isSearch ? (
-                <div className={style.search}>
-                  <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
-                    }}
-                  />
-                </div>
-              ) : null}
-              {title && options.length != 0 && (
-                <div className={style.title}>
-                  <DropDownHeading
-                    htmlId={ariaTitleId}
-                    text={title}
-                    a11y={{
-                      role: 'heading'
-                    }}
-                  />
-                </div>
-              )}
-              <Box
-                scroll='vertical'
-                dataId={`${dataId}_list`}
-                className={style.maxHgt}
-                eleRef={this.scrollContentRef}
-                onScroll={this.handleScroll}
-                role={isSearch ? 'listbox' : 'menu'}
-                aria-labelledby={ariaTitleId}
-                tabindex='0'
-              >
-                {options.length != 0 && isDataLoaded ? (
-                  <React.Fragment>
-                    {options.map((item, i) => (
-                      <React.Fragment key={i}>
-                        <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]}
-                          a11y={{
-                            role: isSearch ? 'option' : 'menuitem',
-                            ariaSelected: value === item[keyName]
-                          }}
-                        />
-                      </React.Fragment>
-                    ))}
-                  </React.Fragment>
-                ) : isDataLoaded ? (
-                  <CommonEmptyState
-                    className={style.svgWrapper}
-                    title={searchErrorText || 'oops !'}
-                    description={searchEmptyHint}
-                    size='small'
-                    getEmptyState={this.emptySearchSVG}
-                  />
-                ) : (
-                  <div className={style.loader}>
-                    <Loader />
-                  </div>
-                )}
-              </Box>
-            </React.Fragment>
-          </DropBox>
-        ) : null}
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  StatusDropdown.docs = {
-    componentGroup: 'Molecule'
-  };
-}
-
-StatusDropdown.defaultProps = {
-  keyName: 'name',
-  idName: 'key',
-  isArrow: false,
-  searchBoxSize: 'small',
-  isDisabled: false,
-  showIconOnHover: false,
-  isReadOnly: false,
-  isEditable: true,
-  isDataLoaded: true,
-  needTick: true,
-  targetAlign: 'vertical',
-  needResponsive: true,
-  arrowIconPosition: 'default',
-  boxSize: 'medium',
-  needExternalPopupState: false,
-  statusColor: 'statusColor'
-};
-
-StatusDropdown.propTypes = {
-  activeStyle: PropTypes.string,
-  arrowIconPosition: PropTypes.oneOf(['default', 'overlay']),
-  bottom: PropTypes.number,
-  boxPosition: PropTypes.oneOf([
-    'bottomRight',
-    'bottomLeft',
-    'bottomCenter',
-    'topRight',
-    'topLeft',
-    'topCenter',
-    'rightTop',
-    'rightBottom',
-    'rightCenter',
-    'leftTop',
-    'leftBottom',
-    'leftCenter'
-  ]),
-  boxSize: PropTypes.oneOf(['small', 'medium', 'mlarge', 'large']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  hoverStyle: PropTypes.string,
-  idName: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isEditable: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupActive: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearch: PropTypes.bool,
-  keyName: PropTypes.string,
-  left: PropTypes.number,
-  needExternalPopupState: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onClick: PropTypes.func,
-  onTogglePopup: PropTypes.func,
-  options: PropTypes.array.isRequired,
-  placeHolderText: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  right: PropTypes.number,
-  searchBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  searchEmptyHint: PropTypes.string,
-  searchErrorText: PropTypes.string,
-  showIconOnHover: PropTypes.bool,
-  showOnHover: PropTypes.bool,
-  statusColor: PropTypes.string,
-  targetAlign: PropTypes.oneOf([
-    'vertical',
-    'horizontal',
-    'both',
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'between',
-    'around'
-  ]),
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  value: PropTypes.node
-};
-
-export default Popup(StatusDropdown);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+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 Loader from '@zohodesk/svg/lib/svg/Loader';
+import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
+import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import StatusListItem from '../StatusListItem/StatusListItem';
+import commonStyle from '@zohodesk/components/lib/common/common.module.css';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import style from './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() {
+    return <EmptySearch size='small' />;
+  }
+
+  inputRef(el) {
+    this.hiddenInput = el;
+  }
+
+  itemRef(ele, index, id) {
+    this[`suggestion_${id}`] = ele;
+  }
+
+  searchInputRef(el) {
+    this.searchInput = el;
+  }
+
+  handleTogglePopup(e) {
+    let {
+      togglePopup,
+      boxPosition,
+      onSelectLabel,
+      isPopupOpen,
+      onTogglePopup
+    } = this.props;
+    !isPopupOpen && onSelectLabel && onSelectLabel(e);
+    onTogglePopup && onTogglePopup(isPopupOpen);
+    togglePopup(e, boxPosition);
+  }
+
+  scrollContentRef(el) {
+    let { isPopupOpen } = this.props;
+    if (isPopupOpen) {
+      this.optionsContainer = el;
+    }
+  }
+
+  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;
+    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()
+          : 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) {
+    let { keyCode } = e;
+    let { selectedIndex, options } = this.state;
+    let totalIndex = options.length;
+    let {
+      togglePopup,
+      onClick,
+      boxPosition,
+      isPopupOpen,
+      isNextOptions,
+      getNextOptions,
+      onTogglePopup
+    } = this.props;
+    if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+      e.preventDefault(); //prevent body scroll
+    }
+    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 });
+        }
+        break;
+      case 38:
+        if (selectedIndex === 0) {
+          this.setState({ selectedIndex: totalIndex - 1 });
+        } else {
+          this.setState({ selectedIndex: selectedIndex - 1 });
+        }
+        break;
+      case 13:
+        onClick && onClick(options[selectedIndex].name, e);
+        onTogglePopup && onTogglePopup(isPopupOpen);
+        togglePopup(e, boxPosition);
+        break;
+      default:
+        break;
+    }
+  }
+
+  searchList(value) {
+    let { options, keyName } = this.props;
+    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
+    });
+  }
+
+  onSearchClear() {
+    let foptions = this.searchList('');
+    this.setState({
+      searchString: '',
+      options: foptions
+    });
+  }
+
+  handleMouseEnter(id, value, index, e) {
+    this.setState({
+      selectedIndex: index
+    });
+  }
+
+  handleScroll(e) {
+    const { isNextOptions, getNextOptions } = this.props;
+    if (
+      e.target.scrollTop + e.target.offsetHeight >
+      e.target.scrollHeight - 1
+    ) {
+      isNextOptions && getNextOptions && getNextOptions(e);
+    }
+  }
+
+  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
+    } = this.props;
+    let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
+    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 (
+      <div
+        className={style.posRel}
+        onMouseEnter={
+          showOnHover && !isDisabled && !isReadOnly && isEditable
+            ? this.handleTogglePopup
+            : undefined
+        }
+        onMouseLeave={
+          showOnHover && !isDisabled && !isReadOnly && isEditable
+            ? this.handleTogglePopup
+            : undefined
+        }
+      >
+        <Container
+          tagName='button'
+          alignBox='row'
+          className={`${style.container} ${containerClass} ${btnStyle.buttonReset}`}
+          onMouseDown={
+            !showOnHover &&
+            !isDisabled &&
+            !isReadOnly &&
+            isEditable &&
+            this.handleTogglePopup
+          }
+          eleRef={getTargetRef}
+          align={targetAlign}
+          isCover={false}
+          dataId={dataId}
+          onClick={removeClose}
+          disabled={isDisabled || isReadOnly ? true : false}
+          aria-haspopup={true}
+          aria-expanded={isPopupOpen && isEditable ? true : false}
+        >
+          {isEditable ? (
+            <div className={style.hiddenInput}>
+              <TextBox
+                type='text'
+                inputRef={this.inputRef}
+                onKeyDown={this.handleKeyDown}
+                needAppearance={false}
+                placeHolder={placeHolderText}
+              />
+            </div>
+          ) : null}
+          {children ? (
+            children
+          ) : (
+            <Box
+              className={`${style.value} toggleDropText`}
+              shrink
+              tagName='span'
+              data-title={dataTitle}
+            >
+              {value}
+            </Box>
+          )}
+          {isEditable ? (
+            <Icon
+              aria-hidden={true}
+              size='7'
+              name='ZD-down'
+              iconClass={`${'toggleDropIcon'} ${style.arrow} ${
+                style[`${arrowIconPosition}_arrow`]
+              }`}
+              dataId='statusdownarrow'
+            />
+          ) : null}
+        </Container>
+        {isPopupOpen && isEditable ? (
+          <DropBox
+            boxPosition={position}
+            isActive={isPopupReady}
+            onClick={removeClose}
+            size={boxSize}
+            right={right}
+            left={left}
+            top={top}
+            bottom={bottom}
+            isArrow={isArrow}
+            isAnimate
+            getRef={getContainerRef}
+            customClass={{
+              customDropBoxWrap: style.dropBoxContainer
+            }}
+            needResponsive={needResponsive}
+          >
+            <React.Fragment>
+              {isSearch ? (
+                <div className={style.search}>
+                  <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
+                    }}
+                  />
+                </div>
+              ) : null}
+              {title && options.length != 0 && (
+                <div className={style.title}>
+                  <DropDownHeading
+                    htmlId={ariaTitleId}
+                    text={title}
+                    a11y={{
+                      role: 'heading'
+                    }}
+                  />
+                </div>
+              )}
+              <Box
+                scroll='vertical'
+                dataId={`${dataId}_list`}
+                className={style.maxHgt}
+                eleRef={this.scrollContentRef}
+                onScroll={this.handleScroll}
+                role={isSearch ? 'listbox' : 'menu'}
+                aria-labelledby={ariaTitleId}
+                tabindex='0'
+              >
+                {options.length != 0 && isDataLoaded ? (
+                  <React.Fragment>
+                    {options.map((item, i) => (
+                      <React.Fragment key={i}>
+                        <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]}
+                          a11y={{
+                            role: isSearch ? 'option' : 'menuitem',
+                            ariaSelected: value === item[keyName]
+                          }}
+                        />
+                      </React.Fragment>
+                    ))}
+                  </React.Fragment>
+                ) : isDataLoaded ? (
+                  <CommonEmptyState
+                    className={style.svgWrapper}
+                    title={searchErrorText || 'oops !'}
+                    description={searchEmptyHint}
+                    size='small'
+                    getEmptyState={this.emptySearchSVG}
+                  />
+                ) : (
+                  <div className={style.loader}>
+                    <Loader />
+                  </div>
+                )}
+              </Box>
+            </React.Fragment>
+          </DropBox>
+        ) : null}
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  StatusDropdown.docs = {
+    componentGroup: 'Molecule'
+  };
+}
+
+StatusDropdown.defaultProps = {
+  keyName: 'name',
+  idName: 'key',
+  isArrow: false,
+  searchBoxSize: 'small',
+  isDisabled: false,
+  showIconOnHover: false,
+  isReadOnly: false,
+  isEditable: true,
+  isDataLoaded: true,
+  needTick: true,
+  targetAlign: 'vertical',
+  needResponsive: true,
+  arrowIconPosition: 'default',
+  boxSize: 'medium',
+  needExternalPopupState: false,
+  statusColor: 'statusColor'
+};
+
+StatusDropdown.propTypes = {
+  activeStyle: PropTypes.string,
+  arrowIconPosition: PropTypes.oneOf(['default', 'overlay']),
+  bottom: PropTypes.number,
+  boxPosition: PropTypes.oneOf([
+    'bottomRight',
+    'bottomLeft',
+    'bottomCenter',
+    'topRight',
+    'topLeft',
+    'topCenter',
+    'rightTop',
+    'rightBottom',
+    'rightCenter',
+    'leftTop',
+    'leftBottom',
+    'leftCenter'
+  ]),
+  boxSize: PropTypes.oneOf(['small', 'medium', 'mlarge', 'large']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  hoverStyle: PropTypes.string,
+  idName: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isDataLoaded: PropTypes.bool,
+  isDataLoaded: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isEditable: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupActive: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearch: PropTypes.bool,
+  keyName: PropTypes.string,
+  left: PropTypes.number,
+  needExternalPopupState: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onTogglePopup: PropTypes.func,
+  options: PropTypes.array.isRequired,
+  placeHolderText: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  right: PropTypes.number,
+  searchBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  searchEmptyHint: PropTypes.string,
+  searchErrorText: PropTypes.string,
+  showIconOnHover: PropTypes.bool,
+  showOnHover: PropTypes.bool,
+  statusColor: PropTypes.string,
+  targetAlign: PropTypes.oneOf([
+    'vertical',
+    'horizontal',
+    'both',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'between',
+    'around'
+  ]),
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  value: PropTypes.node
+};
+
+export default Popup(StatusDropdown);