@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.212

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,647 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToggleDropDown = undefined;
-
-var _ToggleDropDown$propT;
-
-var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _Icon = require('@zohodesk/icons/lib/Icon');
-
-var _Icon2 = _interopRequireDefault(_Icon);
-
-var _DropBox = require('@zohodesk/components/lib/DropBox/DropBox');
-
-var _DropBox2 = _interopRequireDefault(_DropBox);
-
-var _commonModule = require('@zohodesk/components/lib/common/common.module.css');
-
-var _commonModule2 = _interopRequireDefault(_commonModule);
-
-var _Popup = require('@zohodesk/components/lib/Popup/Popup');
-
-var _Popup2 = _interopRequireDefault(_Popup);
-
-var _Layout = require('@zohodesk/components/lib/Layout');
-
-var _ListItem = require('@zohodesk/components/lib/ListItem/ListItem');
-
-var _ListItem2 = _interopRequireDefault(_ListItem);
-
-var _ListItemWithIcon = require('@zohodesk/components/lib/ListItem/ListItemWithIcon');
-
-var _ListItemWithIcon2 = _interopRequireDefault(_ListItemWithIcon);
-
-var _DropDownHeading = require('@zohodesk/components/lib/DropDown/DropDownHeading');
-
-var _DropDownHeading2 = _interopRequireDefault(_DropDownHeading);
-
-var _TextBoxIcon = require('@zohodesk/components/lib/TextBoxIcon/TextBoxIcon');
-
-var _TextBoxIcon2 = _interopRequireDefault(_TextBoxIcon);
-
-var _Loader = require('@zohodesk/svg/lib/svg/Loader');
-
-var _Loader2 = _interopRequireDefault(_Loader);
-
-var _CommonEmptyState = require('../../emptystate/CommonEmptyState/CommonEmptyState');
-
-var _CommonEmptyState2 = _interopRequireDefault(_CommonEmptyState);
-
-var _EmptySearch = require('@zohodesk/svg/lib/svg/EmptySearch');
-
-var _EmptySearch2 = _interopRequireDefault(_EmptySearch);
-
-var _Common = require('@zohodesk/components/lib/utils/Common.js');
-
-var _TextBox = require('@zohodesk/components/lib/TextBox/TextBox');
-
-var _TextBox2 = _interopRequireDefault(_TextBox);
-
-var _ToggleDropDownModule = require('./ToggleDropDown.module.css');
-
-var _ToggleDropDownModule2 = _interopRequireDefault(_ToggleDropDownModule);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ToggleDropDown = exports.ToggleDropDown = function (_React$Component) {
-  _inherits(ToggleDropDown, _React$Component);
-
-  function ToggleDropDown(props) {
-    _classCallCheck(this, ToggleDropDown);
-
-    var _this = _possibleConstructorReturn(this, (ToggleDropDown.__proto__ || Object.getPrototypeOf(ToggleDropDown)).call(this, props));
-
-    _this.state = {
-      searchString: '',
-      selectedIndex: 0,
-      options: props.options,
-      seperatedOptions: props.seperatedOptions
-    };
-    _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);
-    return _this;
-  }
-
-  _createClass(ToggleDropDown, [{
-    key: 'inputRef',
-    value: function inputRef(el) {
-      this.hiddenInput = el;
-    }
-  }, {
-    key: 'itemRef',
-    value: function itemRef(ele, index, id) {
-      this['suggestion_' + id] = ele;
-    }
-  }, {
-    key: 'searchInputRef',
-    value: function searchInputRef(el) {
-      this.searchInput = el;
-    }
-  }, {
-    key: 'handleTogglePopup',
-    value: function handleTogglePopup(e) {
-      var _props = this.props,
-          togglePopup = _props.togglePopup,
-          boxPosition = _props.boxPosition,
-          onSelectLabel = _props.onSelectLabel,
-          isPopupOpen = _props.isPopupOpen;
-
-      !isPopupOpen && onSelectLabel && onSelectLabel(e);
-      togglePopup(e, boxPosition);
-    }
-  }, {
-    key: 'scrollContentRef',
-    value: function scrollContentRef(el) {
-      var isPopupOpen = this.props.isPopupOpen;
-
-      if (isPopupOpen) {
-        this.optionsContainer = el;
-      }
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.options.length != this.props.options.length) {
-        this.setState({
-          options: nextProps.options
-        });
-      }
-    }
-  }, {
-    key: 'onSelect',
-    value: function onSelect(element, e) {
-      var _props2 = this.props,
-          onClick = _props2.onClick,
-          togglePopup = _props2.togglePopup;
-
-      onClick && onClick(e, element);
-      togglePopup(e);
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
-      var _props3 = this.props,
-          isPopupOpen = _props3.isPopupOpen,
-          isSearch = _props3.isSearch,
-          idName = _props3.idName;
-      var _state = this.state,
-          selectedIndex = _state.selectedIndex,
-          options = _state.options,
-          seperatedOptions = _state.seperatedOptions;
-
-      if (prevProps.isPopupOpen != isPopupOpen) {
-        setTimeout(function () {
-          isPopupOpen ? isSearch ? _this2.searchInput.focus() : _this2.hiddenInput.focus() : _this2.hiddenInput.focus();
-        }, 10);
-      }
-      var mergeOptions = seperatedOptions ? options.concat(seperatedOptions) : options;
-      var option = mergeOptions[selectedIndex];
-      var id = option && option[idName] || {};
-      var selSuggestion = this['suggestion_' + id];
-      if (isPopupOpen) {
-        this.optionsContainer && (0, _Common.scrollTo)(this.optionsContainer, selSuggestion);
-      }
-    }
-  }, {
-    key: 'handleKeyDown',
-    value: function handleKeyDown(e) {
-      var keyCode = e.keyCode;
-      var _state2 = this.state,
-          selectedIndex = _state2.selectedIndex,
-          options = _state2.options,
-          seperatedOptions = _state2.seperatedOptions;
-
-      var totalIndex = seperatedOptions ? options.length + seperatedOptions.length : options.length;
-      var mergeOptions = seperatedOptions ? options.concat(seperatedOptions) : options;
-      var _props4 = this.props,
-          togglePopup = _props4.togglePopup,
-          onClick = _props4.onClick,
-          boxPosition = _props4.boxPosition,
-          isPopupOpen = _props4.isPopupOpen,
-          isNextOptions = _props4.isNextOptions,
-          getNextOptions = _props4.getNextOptions;
-
-      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(e, mergeOptions[selectedIndex]);
-          togglePopup(e, boxPosition);
-          break;
-      }
-    }
-  }, {
-    key: 'searchList',
-    value: function searchList(value) {
-      var _props5 = this.props,
-          options = _props5.options,
-          keyName = _props5.keyName,
-          seperatedOptions = _props5.seperatedOptions;
-
-      var foptions = options.filter(function (dept) {
-        return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
-      });
-      var fseperatedOptions = seperatedOptions && seperatedOptions.filter(function (dept) {
-        return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
-      });
-      var optionsObj = {
-        foptions: foptions,
-        fseperatedOptions: fseperatedOptions
-      };
-      return optionsObj;
-    }
-  }, {
-    key: 'handleChange',
-    value: function handleChange(value, e) {
-      var optionsObj = this.searchList(value);
-      this.setState({
-        searchString: value,
-        selectedIndex: -1,
-        options: optionsObj.foptions,
-        seperatedOptions: optionsObj.fseperatedOptions
-      });
-    }
-  }, {
-    key: 'onSearchClear',
-    value: function onSearchClear() {
-      var optionsObj = this.searchList('');
-      this.setState({
-        searchString: '',
-        options: optionsObj.foptions,
-        seperatedOptions: optionsObj.fseperatedOptions
-      });
-    }
-  }, {
-    key: 'handleMouseEnter',
-    value: function handleMouseEnter(id, value, index, e) {
-      this.setState({
-        selectedIndex: index
-      });
-    }
-  }, {
-    key: 'handleScroll',
-    value: function handleScroll(e) {
-      var _props6 = this.props,
-          isNextOptions = _props6.isNextOptions,
-          getNextOptions = _props6.getNextOptions;
-
-      if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-        isNextOptions && getNextOptions && getNextOptions(e);
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this3 = this;
-
-      var _state3 = this.state,
-          options = _state3.options,
-          selectedIndex = _state3.selectedIndex,
-          seperatedOptions = _state3.seperatedOptions;
-      var _props7 = this.props,
-          value = _props7.value,
-          removeClose = _props7.removeClose,
-          boxSize = _props7.boxSize,
-          keyName = _props7.keyName,
-          idName = _props7.idName,
-          title = _props7.title,
-          isSearch = _props7.isSearch,
-          isArrow = _props7.isArrow,
-          placeHolderText = _props7.placeHolderText,
-          className = _props7.className,
-          right = _props7.right,
-          left = _props7.left,
-          top = _props7.top,
-          bottom = _props7.bottom,
-          isPopupOpen = _props7.isPopupOpen,
-          isPopupReady = _props7.isPopupReady,
-          position = _props7.position,
-          getTargetRef = _props7.getTargetRef,
-          getContainerRef = _props7.getContainerRef,
-          dataId = _props7.dataId,
-          searchBoxSize = _props7.searchBoxSize,
-          searchEmptyHint = _props7.searchEmptyHint,
-          searchErrorText = _props7.searchErrorText,
-          activeStyle = _props7.activeStyle,
-          _props7$showOnHover = _props7.showOnHover,
-          showOnHover = _props7$showOnHover === undefined ? false : _props7$showOnHover,
-          isDisabled = _props7.isDisabled,
-          showIconOnHover = _props7.showIconOnHover,
-          isReadOnly = _props7.isReadOnly,
-          hoverStyle = _props7.hoverStyle,
-          isEditable = _props7.isEditable,
-          iconName = _props7.iconName,
-          iconSize = _props7.iconSize,
-          needTick = _props7.needTick,
-          dataTitle = _props7.dataTitle,
-          isDataLoaded = _props7.isDataLoaded,
-          children = _props7.children,
-          targetAlign = _props7.targetAlign,
-          needResponsive = _props7.needResponsive;
-      var searchString = this.state.searchString;
-
-      var containerClass = (className ? className : '') + ' ' + (isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? _ToggleDropDownModule2.default.hoverIcon : '') + ' ' + (isDisabled ? _commonModule2.default.disabled : isReadOnly ? _ToggleDropDownModule2.default.readOnly : !isEditable ? _ToggleDropDownModule2.default.cursorDefault : !showOnHover ? _ToggleDropDownModule2.default.cursor + ' ' + (hoverStyle ? hoverStyle : '') : (hoverStyle ? hoverStyle : '') + ' ' + _ToggleDropDownModule2.default.cursorDefault);
-      return _react2.default.createElement(
-        'div',
-        {
-          className: _ToggleDropDownModule2.default.posRel,
-          onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
-          onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
-        },
-        _react2.default.createElement(
-          _Layout.Container,
-          {
-            alignBox: 'row',
-            className: containerClass,
-            onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,
-            eleRef: getTargetRef,
-            align: targetAlign,
-            isCover: false,
-            dataId: dataId
-          },
-          _react2.default.createElement(
-            'div',
-            { className: _ToggleDropDownModule2.default.hiddenInput },
-            _react2.default.createElement(_TextBox2.default, {
-              type: 'text',
-              inputRef: this.inputRef,
-              onKeyDown: this.handleKeyDown,
-              needAppearance: false
-            })
-          ),
-          children ? children : _react2.default.createElement(
-            _react2.default.Fragment,
-            null,
-            iconName ? _react2.default.createElement(
-              _Layout.Box,
-              { className: _ToggleDropDownModule2.default.iconBox },
-              _react2.default.createElement(_Icon2.default, { name: iconName, size: iconSize })
-            ) : null,
-            _react2.default.createElement(
-              _Layout.Box,
-              {
-                className: _ToggleDropDownModule2.default.value + ' toggleDropText',
-                shrink: true,
-                tagName: 'span',
-                'data-title': dataTitle
-              },
-              value
-            ),
-            isEditable ? _react2.default.createElement(
-              _Layout.Box,
-              {
-                className: _ToggleDropDownModule2.default.arrow,
-                dataId: 'statusdownarrow',
-                tagName: 'span'
-              },
-              _react2.default.createElement(_Icon2.default, {
-                size: '6',
-                name: 'ZD-blockDownArrow',
-                iconClass: 'toggleDropIcon'
-              })
-            ) : null
-          )
-        ),
-        isPopupOpen ? _react2.default.createElement(
-          _DropBox2.default,
-          {
-            boxPosition: position,
-            isActive: isPopupReady,
-            onClick: removeClose,
-            size: boxSize,
-            right: right,
-            left: left,
-            top: top,
-            bottom: bottom,
-            isArrow: isArrow,
-            isAnimate: true,
-            getRef: getContainerRef,
-            className: _ToggleDropDownModule2.default.dropBoxContainer,
-            needResponsive: needResponsive
-          },
-          _react2.default.createElement(
-            _react2.default.Fragment,
-            null,
-            title && _react2.default.createElement(
-              'div',
-              { className: _ToggleDropDownModule2.default.title },
-              _react2.default.createElement(_DropDownHeading2.default, { text: title })
-            ),
-            isSearch ? _react2.default.createElement(
-              'div',
-              { className: _ToggleDropDownModule2.default.search },
-              _react2.default.createElement(
-                _TextBoxIcon2.default,
-                {
-                  placeHolder: placeHolderText,
-                  onChange: this.handleChange,
-                  value: searchString,
-                  onClear: this.onSearchClear,
-                  size: searchBoxSize,
-                  inputRef: this.searchInputRef,
-                  onKeyDown: this.handleKeyDown
-                },
-                _react2.default.createElement(_Icon2.default, { name: 'ZD-search', size: '13' })
-              )
-            ) : null,
-            _react2.default.createElement(
-              _Layout.Box,
-              {
-                scroll: 'vertical',
-                dataId: dataId + '_list',
-                className: _ToggleDropDownModule2.default.maxHgt,
-                eleRef: this.scrollContentRef,
-                onScroll: this.handleScroll
-              },
-              (options.length != 0 || seperatedOptions && seperatedOptions.length != 0) && isDataLoaded ? _react2.default.createElement(
-                _react2.default.Fragment,
-                null,
-                options.length != 0 && options[0].iconName ? _react2.default.createElement(
-                  _react2.default.Fragment,
-                  null,
-                  options.map(function (item, i) {
-                    var iconName = item.iconName,
-                        iconSize = item.iconSize;
-
-                    return _react2.default.createElement(_ListItemWithIcon2.default, {
-                      key: i,
-                      dataId: 'dataid_' + i,
-                      value: item[keyName],
-                      id: item[idName],
-                      active: value === item[keyName],
-                      onClick: _this3.onSelect.bind(_this3, item),
-                      index: i,
-                      highlight: selectedIndex === i,
-                      iconName: iconName,
-                      iconSize: iconSize,
-                      needTick: needTick,
-                      needBorder: false,
-                      onMouseEnter: _this3.handleMouseEnter,
-                      getRef: _this3.itemRef
-                    });
-                  })
-                ) : _react2.default.createElement(
-                  _react2.default.Fragment,
-                  null,
-                  options.map(function (item, i) {
-                    return _react2.default.createElement(_ListItem2.default, {
-                      key: i,
-                      dataId: 'dataid_' + 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
-                    });
-                  })
-                ),
-                seperatedOptions && seperatedOptions.length != 0 && _react2.default.createElement(
-                  _react2.default.Fragment,
-                  null,
-                  options.length != 0 && _react2.default.createElement('div', { className: _ToggleDropDownModule2.default.seperatedLine }),
-                  seperatedOptions[0].iconName ? _react2.default.createElement(
-                    _react2.default.Fragment,
-                    null,
-                    seperatedOptions.map(function (item, i) {
-                      var iconName = item.iconName,
-                          iconSize = item.iconSize;
-
-                      return _react2.default.createElement(_ListItemWithIcon2.default, {
-                        key: i,
-                        dataId: 'dataid_' + (i + options.length),
-                        value: item[keyName],
-                        id: item[idName],
-                        active: value === item[keyName],
-                        onClick: _this3.onSelect.bind(_this3, item),
-                        index: i + options.length,
-                        highlight: selectedIndex === i + options.length,
-                        iconName: iconName,
-                        iconSize: iconSize,
-                        needTick: needTick,
-                        isTick: value === item[keyName],
-                        onMouseEnter: _this3.handleMouseEnter,
-                        getRef: _this3.itemRef
-                      });
-                    })
-                  ) : _react2.default.createElement(
-                    _react2.default.Fragment,
-                    null,
-                    seperatedOptions.map(function (item, i) {
-                      return _react2.default.createElement(_ListItem2.default, {
-                        key: i,
-                        dataId: 'dataid_' + (i + options.length),
-                        value: item[keyName],
-                        id: item[idName],
-                        active: value === item[keyName],
-                        onClick: _this3.onSelect.bind(_this3, item),
-                        index: i + options.length,
-                        highlight: selectedIndex == i + options.length,
-                        needTick: needTick,
-                        isTick: value === item[keyName],
-                        onMouseEnter: _this3.handleMouseEnter,
-                        getRef: _this3.itemRef
-                      });
-                    })
-                  )
-                )
-              ) : isDataLoaded ? _react2.default.createElement(
-                _CommonEmptyState2.default,
-                {
-                  className: _ToggleDropDownModule2.default.svgWrapper,
-                  title: searchErrorText || 'oops !',
-                  description: searchEmptyHint
-                },
-                _react2.default.createElement(_EmptySearch2.default, { size: 'small' })
-              ) : _react2.default.createElement(
-                'div',
-                { className: _ToggleDropDownModule2.default.loader },
-                _react2.default.createElement(_Loader2.default, null)
-              )
-            )
-          )
-        ) : null
-      );
-    }
-  }]);
-
-  return ToggleDropDown;
-}(_react2.default.Component);
-
-if (false) {
-  ToggleDropDown.docs = {
-    componentGroup: 'Molecule'
-  };
-}
-
-ToggleDropDown.defaultProps = {
-  keyName: 'value',
-  idName: 'id',
-  isArrow: true,
-  searchBoxSize: 'small',
-  isDisabled: false,
-  showIconOnHover: false,
-  isReadOnly: false,
-  isEditable: true,
-  isDataLoaded: true,
-  needTick: true,
-  targetAlign: 'vertical',
-  needResponsive: true
-};
-
-ToggleDropDown.propTypes = (_ToggleDropDown$propT = {
-  activeStyle: _propTypes2.default.string,
-  bottom: _propTypes2.default.number,
-  boxPosition: _propTypes2.default.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  boxSize: _propTypes2.default.oneOf(['small', 'medium', 'mlarge', 'large']),
-  className: _propTypes2.default.string,
-  dataId: _propTypes2.default.string,
-  dataTitle: _propTypes2.default.string,
-  getContainerRef: _propTypes2.default.func,
-  getTargetRef: _propTypes2.default.func,
-  hoverStyle: _propTypes2.default.string,
-  iconName: _propTypes2.default.string,
-  iconSize: _propTypes2.default.string,
-  idName: _propTypes2.default.string,
-  isArrow: _propTypes2.default.bool,
-  isDataLoaded: _propTypes2.default.bool,
-  isDisabled: _propTypes2.default.bool,
-  isEditable: _propTypes2.default.bool,
-  isPopupOpen: _propTypes2.default.bool,
-  isPopupReady: _propTypes2.default.bool,
-  isReadOnly: _propTypes2.default.bool,
-  isSearch: _propTypes2.default.bool,
-  keyName: _propTypes2.default.string,
-  left: _propTypes2.default.number,
-  needTick: _propTypes2.default.bool,
-  onClick: _propTypes2.default.func,
-  options: _propTypes2.default.array.isRequired,
-  placeHolderText: _propTypes2.default.string,
-  position: _propTypes2.default.string,
-  removeClose: _propTypes2.default.func,
-  right: _propTypes2.default.number,
-  searchBoxSize: _propTypes2.default.oneOf(['small', 'medium', 'xmedium']),
-  searchEmptyHint: _propTypes2.default.string,
-  searchErrorText: _propTypes2.default.string,
-  showIconOnHover: _propTypes2.default.bool,
-  showOnHover: _propTypes2.default.bool,
-  title: _propTypes2.default.string,
-  togglePopup: _propTypes2.default.func,
-  value: _propTypes2.default.node
-}, _defineProperty(_ToggleDropDown$propT, 'isDataLoaded', _propTypes2.default.bool), _defineProperty(_ToggleDropDown$propT, 'children', _propTypes2.default.node), _defineProperty(_ToggleDropDown$propT, 'seperatedOptions', _propTypes2.default.array), _defineProperty(_ToggleDropDown$propT, 'targetAlign', _propTypes2.default.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_ToggleDropDown$propT, 'isNextOptions', _propTypes2.default.bool), _defineProperty(_ToggleDropDown$propT, 'getNextOptions', _propTypes2.default.func), _defineProperty(_ToggleDropDown$propT, 'needResponsive', _propTypes2.default.bool), _ToggleDropDown$propT);
-
-exports.default = (0, _Popup2.default)(ToggleDropDown);