@appbaseio/reactivesearch-vue 3.0.0-rc.5.alpha.2 → 3.0.0-rc.5.alpha.4

package/dist/es/DropDown-59c3fbc7.js

@@ -1,690 +0,0 @@
-import { helper } from '@appbaseio/reactivecore';
-import { b as isFunction } from './index-b2212b15.js';
-import { _ as _transformOn } from './index-b9203a60.js';
-import { a as _taggedTemplateLiteralLoose, _ as _extends } from './_rollupPluginBabelHelpers-dac426db.js';
-import { createVNode, createTextVNode, mergeProps } from 'vue';
-import VueTypes from 'vue-types';
-import { styled } from '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-f1923c72.js';
-import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-3126d7b6.js';
-import computeScrollIntoView from 'compute-scroll-into-view';
-import { r as replaceDiacritics } from './utils-782d91c4.js';
-
-var _templateObject;
-var InputWrapper = styled('span')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
-
-var _templateObject$1;
-var IconGroup = styled('div')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgrid-gap: 6px;\n\tmargin: 0 10px;\n\theight: 100%;\n\n\t", ";\n\n\t", ";\n"])), function (_ref) {
-  var positionType = _ref.positionType;
-  if (positionType === 'absolute') {
-    return "\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t";
-  }
-  return null;
-}, function (_ref2) {
-  var groupPosition = _ref2.groupPosition;
-  return groupPosition === 'right' ? "\n\t\t\t\t\tright: 0;\n\t\t\t  " : "\n\t\t\t\t\tleft: 0;\n\t\t\t  ";
-});
-
-var _templateObject$2;
-var IconWrapper = styled('div')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmax-width: 23px;\n\twidth: max-content;\n\tcursor: pointer;\n\theight: 100%;\n\tmin-width: 20px;\n\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t\ttransform: scale(1.5);\n\t}\n\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"])), function (_ref) {
-  var _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? {} : _ref$theme;
-  return theme.colors ? theme.colors.primaryColor : 'unset';
-}, function (_ref2) {
-  var _ref2$theme = _ref2.theme,
-    theme = _ref2$theme === void 0 ? {} : _ref2$theme;
-  return theme.colors ? theme.colors.borderColor : '#000';
-});
-
-/**
- * Scroll node into view if necessary
- * @param {HTMLElement} node the element that should scroll into view
- * @param {HTMLElement} rootNode the root element of the component
- */
-// eslint-disable-next-line
-var scrollIntoView = function scrollIntoView(node, rootNode) {
-  if (node === null) {
-    return;
-  }
-  var actions = computeScrollIntoView(node, {
-    boundary: rootNode,
-    block: 'nearest',
-    scrollMode: 'if-needed'
-  });
-  actions.forEach(function (_ref) {
-    var el = _ref.el,
-      top = _ref.top,
-      left = _ref.left;
-    el.scrollTop = top;
-    el.scrollLeft = left;
-  });
-};
-
-var Downshift = {
-  // eslint-disable-next-line
-  props: ['isOpen', 'inputValue', 'selectedItem', 'highlightedIndex', 'handleChange',
-  // 'itemToString',
-  'handleMouseup'],
-  data: function data() {
-    return {
-      isMouseDown: false,
-      internal_isOpen: false,
-      internal_inputValue: '',
-      internal_selectedItem: null,
-      internal_highlightedIndex: null
-    };
-  },
-  computed: {
-    mergedState: function mergedState() {
-      var _this = this;
-      return Object.keys(this.$props).reduce(function (state, key) {
-        var _extends2;
-        return _extends({}, state, (_extends2 = {}, _extends2[key] = _this.isControlledProp(key) ? _this.$props[key] : _this["internal_" + key], _extends2));
-      }, {});
-    },
-    internalItemCount: function internalItemCount() {
-      return this.items.length;
-    }
-  },
-  mounted: function mounted() {
-    window.addEventListener('mousedown', this.handleWindowMousedown);
-    window.addEventListener('mouseup', this.handleWindowMouseup);
-  },
-  beforeUnmount: function beforeUnmount() {
-    window.removeEventListener('mousedown', this.handleWindowMousedown);
-    window.removeEventListener('mouseup', this.handleWindowMouseup);
-  },
-  methods: {
-    handleWindowMousedown: function handleWindowMousedown() {
-      this.isMouseDown = true;
-    },
-    handleWindowMouseup: function handleWindowMouseup(event) {
-      this.isMouseDown = false;
-      if ((event.target === this.$refs.rootNode || !this.$refs.rootNode.contains(event.target)) && this.mergedState.isOpen) {
-        // TODO: handle on outer click here
-        if (!this.isMouseDown) {
-          this.reset();
-          if (this.$props.handleMouseup) {
-            this.$props.handleMouseup({
-              isOpen: false
-            });
-          }
-        }
-      }
-    },
-    keyDownArrowDown: function keyDownArrowDown(event) {
-      event.preventDefault();
-      var amount = event.shiftKey ? 5 : 1;
-      if (this.mergedState.isOpen) {
-        this.changeHighlightedIndex(amount);
-      } else {
-        this.setState({
-          isOpen: true
-        });
-        this.setHighlightedIndex();
-      }
-    },
-    keyDownArrowUp: function keyDownArrowUp(event) {
-      event.preventDefault();
-      var amount = event.shiftKey ? -5 : -1;
-      if (this.mergedState.isOpen) {
-        this.changeHighlightedIndex(amount);
-      } else {
-        this.setState({
-          isOpen: true
-        });
-        this.setHighlightedIndex();
-      }
-    },
-    keyDownEnter: function keyDownEnter(event) {
-      if (this.mergedState.isOpen) {
-        event.preventDefault();
-        this.selectHighlightedItem();
-      }
-    },
-    keyDownEscape: function keyDownEscape(event) {
-      event.preventDefault();
-      this.reset();
-    },
-    selectHighlightedItem: function selectHighlightedItem() {
-      return this.selectItemAtIndex(this.mergedState.highlightedIndex);
-    },
-    selectItemAtIndex: function selectItemAtIndex(itemIndex) {
-      var item = this.items[itemIndex];
-      if (item == null) {
-        return;
-      }
-      this.selectItem(item);
-    },
-    selectItem: function selectItem(item) {
-      if (this.$props.handleChange) {
-        this.$props.handleChange(item);
-      }
-      function getInputValue() {
-        if (this.isControlledProp('selectedItem')) {
-          return '';
-        }
-        return typeof item === 'object' ? item.label || '' : item;
-      }
-      this.setState({
-        isOpen: false,
-        highlightedIndex: null,
-        selectedItem: item,
-        inputValue: getInputValue.call(this)
-      });
-    },
-    changeHighlightedIndex: function changeHighlightedIndex(moveAmount) {
-      if (this.internalItemCount < 0) {
-        return;
-      }
-      var highlightedIndex = this.mergedState.highlightedIndex;
-      var baseIndex = highlightedIndex;
-      if (baseIndex === null) {
-        baseIndex = moveAmount > 0 ? -1 : this.internalItemCount + 1;
-      }
-      var newIndex = baseIndex + moveAmount;
-      if (newIndex < 0) {
-        newIndex = this.internalItemCount;
-      } else if (newIndex > this.internalItemCount) {
-        newIndex = 0;
-      }
-      this.setHighlightedIndex(newIndex);
-    },
-    setHighlightedIndex: function setHighlightedIndex(highlightedIndex) {
-      if (highlightedIndex === void 0) {
-        highlightedIndex = null;
-      }
-      this.setState({
-        highlightedIndex: highlightedIndex
-      });
-      var element = document.getElementById("Downshift" + highlightedIndex);
-      scrollIntoView(element, this.rootNode);
-      // Implement scrollIntroView thingy
-    },
-    reset: function reset() {
-      var selectedItem = this.mergedState.selectedItem;
-      this.setState({
-        isOpen: false,
-        highlightedIndex: null,
-        inputValue: selectedItem
-      });
-    },
-    getItemProps: function getItemProps(_ref) {
-      var index = _ref.index,
-        item = _ref.item;
-      var newIndex = index;
-      if (index === undefined) {
-        if (this.$props.itemToString) {
-          this.items.push(this.$props.itemToString(item));
-        } else {
-          this.items.push(item);
-        }
-        newIndex = this.items.indexOf(item);
-      } else {
-        this.items[newIndex] = item;
-      }
-      return {
-        id: "Downshift" + newIndex
-      };
-    },
-    getItemEvents: function getItemEvents(_ref2) {
-      var index = _ref2.index,
-        item = _ref2.item;
-      var newIndex = index;
-      if (index === undefined) {
-        newIndex = this.items.indexOf(item);
-      }
-      var vm = this;
-      return {
-        mouseenter: function mouseenter() {
-          vm.setHighlightedIndex(newIndex);
-        },
-        click: function click(event) {
-          event.stopPropagation();
-          vm.selectItemAtIndex(newIndex);
-        }
-      };
-    },
-    getInputProps: function getInputProps(_ref3) {
-      var value = _ref3.value;
-      var inputValue = this.mergedState.inputValue;
-      if (value !== inputValue) {
-        this.setState({
-          inputValue: value
-        });
-      }
-      return {
-        value: inputValue
-      };
-    },
-    getButtonProps: function getButtonProps(_ref4) {
-      var _this2 = this;
-      var onClick = _ref4.onClick,
-        onKeyDown = _ref4.onKeyDown,
-        onKeyUp = _ref4.onKeyUp,
-        onBlur = _ref4.onBlur;
-      return {
-        click: function click(event) {
-          _this2.setState({
-            isOpen: true,
-            inputValue: event.target.value
-          });
-          if (onClick) {
-            onClick(event);
-          }
-        },
-        keydown: function keydown(event) {
-          if (event.key && _this2["keyDown" + event.key]) {
-            _this2["keyDown" + event.key].call(_this2, event);
-          }
-          if (onKeyDown) {
-            onKeyDown(event);
-          }
-        },
-        keyup: function keyup(event) {
-          if (onKeyUp) {
-            onKeyUp(event);
-          }
-        },
-        blur: function blur(event) {
-          if (onBlur) {
-            onBlur(event);
-          }
-        }
-      };
-    },
-    getInputEvents: function getInputEvents(_ref5) {
-      var _this3 = this;
-      var onInput = _ref5.onInput,
-        onBlur = _ref5.onBlur,
-        onFocus = _ref5.onFocus,
-        onKeyPress = _ref5.onKeyPress,
-        onKeyDown = _ref5.onKeyDown,
-        onKeyUp = _ref5.onKeyUp,
-        onClick = _ref5.onClick;
-      return {
-        input: function input(event) {
-          _this3.setState({
-            isOpen: true,
-            inputValue: event.target.value
-          });
-          if (onInput) {
-            onInput(event);
-          }
-        },
-        focus: function focus(event) {
-          if (onFocus) {
-            onFocus(event);
-          }
-        },
-        keydown: function keydown(event) {
-          if (event.key && _this3["keyDown" + event.key]) {
-            _this3["keyDown" + event.key].call(_this3, event);
-          }
-          if (onKeyDown) {
-            onKeyDown(event);
-          }
-        },
-        keypress: function keypress(event) {
-          if (onKeyPress) {
-            onKeyPress(event);
-          }
-        },
-        keyup: function keyup(event) {
-          if (onKeyUp) {
-            onKeyUp(event);
-          }
-        },
-        blur: function blur(event) {
-          if (onBlur) {
-            onBlur(event);
-          }
-          // TODO: implement isMouseDown
-          // this.reset()
-        },
-
-        click: onClick
-      };
-    },
-    getHelpersAndState: function getHelpersAndState() {
-      var getItemProps = this.getItemProps,
-        getItemEvents = this.getItemEvents,
-        getInputProps = this.getInputProps,
-        getInputEvents = this.getInputEvents,
-        getButtonProps = this.getButtonProps,
-        setHighlightedIndex = this.setHighlightedIndex;
-      return _extends({
-        getItemProps: getItemProps,
-        getItemEvents: getItemEvents,
-        getInputProps: getInputProps,
-        getInputEvents: getInputEvents,
-        getButtonProps: getButtonProps,
-        setHighlightedIndex: setHighlightedIndex
-      }, this.mergedState);
-    },
-    isControlledProp: function isControlledProp(prop) {
-      return this.$props[prop] !== undefined;
-    },
-    setState: function setState(stateToSet) {
-      var _this4 = this;
-      // eslint-disable-next-line
-      Object.keys(stateToSet).forEach(function (key) {
-        // eslint-disable-next-line
-        if (_this4.isControlledProp(key)) {
-          _this4.$emit(key + "Change", stateToSet[key]);
-          _this4.$emit(key + "-change", stateToSet[key]);
-        } else {
-          _this4["internal_" + key] = stateToSet[key];
-        }
-      });
-      this.$emit('stateChange', this.mergedState);
-      this.$emit('state-change', this.mergedState);
-    }
-  },
-  render: function render() {
-    this.items = [];
-    return createVNode("div", {
-      "ref": "rootNode"
-    }, [this.$slots["default"] && this.$slots["default"](_extends({}, this.getHelpersAndState()))]);
-  }
-};
-
-var CancelSvg = (function () {
-  return createVNode("svg", {
-    "alt": "Clear",
-    "class": "cancel-icon",
-    "xmlns": "http://www.w3.org/2000/svg",
-    "height": "20px",
-    "viewBox": "0 0 24 24",
-    "width": "20px"
-  }, [createVNode("title", null, [createTextVNode("Clear")]), createVNode("path", {
-    "d": "M0 0h24v24H0V0z",
-    "fill": "none"
-  }, null), createVNode("path", {
-    "d": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
-  }, null)]);
-});
-
-var _templateObject$3, _templateObject2;
-var small = "\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n";
-var dark = function dark(_ref) {
-  var theme = _ref.theme;
-  return "\n\tbackground-color: " + (theme.colors ? theme.colors.backgroundColor : '') + ";\n\tborder-color: " + (theme.colors ? theme.colors.borderColor : '') + ";\n\tcolor: " + (theme.colors ? theme.colors.textColor : '') + ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + (theme.colors ? theme.colors.backgroundColor : '') + ";\n\t}\n";
-};
-var Select = styled('button')(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 42px;\n\tborder-radius: 0;\n\toutline: none;\n\tpadding: 5px 12px;\n\tfont-size: 0.9rem;\n\tline-height: 1.2rem;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tcolor: #424242;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t", ";\n\n\t& > div {\n\t\twidth: calc(100% - 24px);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: #fcfcfc;\n\t}\n\n\t", ";\n"])), function (props) {
-  return props.small ? small : null;
-}, function (_ref2) {
-  var themePreset = _ref2.themePreset;
-  return themePreset === 'dark' && dark;
-});
-var Tick = styled('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.colors.primaryColor;
-});
-
-var _templateObject$4;
-var open = "\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n";
-var Chevron = styled('span')(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"])), function (props) {
-  return props.open ? open : null;
-});
-
-var getClassName = helper.getClassName;
-var Dropdown = {
-  data: function data() {
-    this.__state = {
-      isOpen: false,
-      searchTerm: ''
-    };
-    return this.__state;
-  },
-  inject: {
-    theme: {
-      from: 'theme_reactivesearch'
-    }
-  },
-  props: {
-    innerClass: types.style,
-    items: types.data,
-    keyField: VueTypes.string.def('key'),
-    labelField: VueTypes.string.def('label'),
-    multi: VueTypes.bool,
-    // change event
-    placeholder: types.string,
-    returnsObject: VueTypes.bool,
-    customLabelRenderer: types.func,
-    hasCustomRenderer: VueTypes.bool,
-    customRenderer: types.func,
-    renderItem: types.func,
-    renderNoResults: VueTypes.any,
-    handleChange: types.func,
-    transformData: types.func,
-    selectedItem: types.selectedValue,
-    showCount: VueTypes.bool,
-    single: VueTypes.bool,
-    small: VueTypes.bool.def(false),
-    themePreset: types.themePreset,
-    showSearch: VueTypes.bool,
-    showClear: VueTypes.bool,
-    searchPlaceholder: VueTypes.string.def('Type here to search...')
-  },
-  render: function render() {
-    var _this = this;
-    var _this$$props = this.$props,
-      items = _this$$props.items,
-      selectedItem = _this$$props.selectedItem,
-      placeholder = _this$$props.placeholder,
-      labelField = _this$$props.labelField,
-      keyField = _this$$props.keyField,
-      themePreset = _this$$props.themePreset,
-      renderItem = _this$$props.renderItem,
-      transformData = _this$$props.transformData,
-      footer = _this$$props.footer,
-      customLabelRenderer = _this$$props.customLabelRenderer,
-      hasCustomRenderer = _this$$props.hasCustomRenderer,
-      customRenderer = _this$$props.customRenderer;
-    var itemsToRender = items;
-    if (transformData) {
-      itemsToRender = transformData(itemsToRender);
-    }
-    var filteredItemsToRender = itemsToRender.filter(function (item) {
-      if (String(item[labelField]).length) {
-        if (_this.$props.showSearch && _this.$data.searchTerm) {
-          return replaceDiacritics(String(item[labelField])).toLowerCase().includes(replaceDiacritics(_this.$data.searchTerm.toLowerCase()));
-        }
-        return true;
-      }
-      return false;
-    });
-    return createVNode(Downshift, {
-      "isOpen": this.$data.isOpen,
-      "selectedItem": selectedItem,
-      "handleChange": this.onChange,
-      "handleMouseup": this.handleStateChange
-    }, {
-      "default": function _default(_ref) {
-        var getItemProps = _ref.getItemProps,
-          isOpen = _ref.isOpen,
-          highlightedIndex = _ref.highlightedIndex,
-          getButtonProps = _ref.getButtonProps,
-          getItemEvents = _ref.getItemEvents,
-          getInputEvents = _ref.getInputEvents;
-        return createVNode("div", {
-          "class": suggestionsContainer
-        }, [createVNode(Select, mergeProps(_transformOn(getButtonProps({
-          onClick: _this.toggle
-        })), {
-          "class": getClassName(_this.$props.innerClass, 'select') || '',
-          "title": selectedItem ? _this.renderToString(selectedItem) : placeholder,
-          "small": _this.$props.small,
-          "themePreset": _this.$props.themePreset
-        }), {
-          "default": function _default() {
-            return [customLabelRenderer ? customLabelRenderer(selectedItem) : createVNode("div", null, [selectedItem ? _this.renderToString(selectedItem) : placeholder]), createVNode(Chevron, {
-              "open": isOpen
-            }, null)];
-          }
-        }), hasCustomRenderer ? customRenderer(itemsToRender, {
-          getItemProps: getItemProps,
-          isOpen: isOpen,
-          highlightedIndex: highlightedIndex,
-          getButtonProps: getButtonProps,
-          getItemEvents: getItemEvents
-        }) : isOpen && itemsToRender.length ? createVNode("ul", {
-          "class": suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
-        }, [_this.$props.showSearch ? _this.renderSearchbox({
-          on: {
-            input: getInputEvents({
-              onInput: _this.handleInputChange
-            }).input
-          }
-        }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
-          var selected = _this.$props.multi // MultiDropdownList
-          && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
-          || Array.isArray(selectedItem) && selectedItem.find(function (value) {
-            return value[labelField] === item[labelField];
-          }));
-          if (!_this.$props.multi) selected = item.key === selectedItem;
-          return createVNode("li", mergeProps(getItemProps({
-            item: item
-          }), _transformOn(getItemEvents({
-            item: item
-          })), {
-            "key": item[keyField],
-            "class": "" + (selected ? 'active' : ''),
-            "style": {
-              backgroundColor: _this.getBackgroundColor(highlightedIndex === index, selected)
-            }
-          }), [renderItem ? renderItem({
-            label: item[labelField],
-            count: item.doc_count,
-            isChecked: selected && _this.$props.multi
-          }) : createVNode("div", null, [typeof item[labelField] === 'string' ? createVNode("span", {
-            "innerHTML": item[labelField]
-          }, null) : item[labelField], _this.$props.showCount && item.doc_count && createVNode("span", {
-            "class": getClassName(_this.$props.innerClass, 'count') || ''
-          }, [createTextVNode("\xA0("), item.doc_count, createTextVNode(")")])]), selected && _this.$props.multi ? createVNode(Tick, {
-            "class": getClassName(_this.$props.innerClass, 'icon') || ''
-          }, null) : null]);
-        }), footer]) : null]);
-      }
-    });
-  },
-  methods: {
-    toggle: function toggle() {
-      this.isOpen = !this.$data.isOpen;
-    },
-    close: function close() {
-      this.isOpen = false;
-    },
-    onChange: function onChange(item) {
-      if (this.$props.returnsObject) {
-        this.$props.handleChange(item);
-      } else {
-        this.$props.handleChange(item[this.$props.keyField]);
-      }
-      if (!this.$props.multi) {
-        this.isOpen = false;
-        this.searchTerm = '';
-      }
-    },
-    handleStateChange: function handleStateChange(_ref2) {
-      var isOpen = _ref2.isOpen;
-      this.isOpen = isOpen;
-    },
-    getBackgroundColor: function getBackgroundColor(highlighted, selected) {
-      var isDark = this.$props.themePreset === 'dark';
-      if (highlighted) {
-        return isDark ? '#555' : '#eee';
-      }
-      if (selected) {
-        return isDark ? '#686868' : '#fafafa';
-      }
-      return isDark ? '#424242' : '#fff';
-    },
-    handleInputChange: function handleInputChange(e) {
-      var value = e.target.value;
-      this.searchTerm = value;
-    },
-    clearSearchTerm: function clearSearchTerm() {
-      this.searchTerm = '';
-    },
-    renderToString: function renderToString(value) {
-      var _this2 = this;
-      var customLabelRenderer = this.$props.customLabelRenderer;
-      if (customLabelRenderer) {
-        var customLabel = customLabelRenderer(value);
-        if (typeof customLabel === 'string') {
-          return customLabel;
-        }
-      }
-      if (Array.isArray(value) && value.length) {
-        var arrayToRender = value.map(function (item) {
-          return _this2.renderToString(item);
-        });
-        return arrayToRender.join(', ');
-      }
-      if (value && typeof value === 'object') {
-        if (value[this.$props.labelField]) {
-          return value[this.$props.labelField];
-        }
-        if (Object.keys(value).length) {
-          return this.renderToString(Object.keys(value));
-        }
-        return this.$props.placeholder;
-      }
-      return value;
-    },
-    renderNoResult: function renderNoResult() {
-      var renderNoResults = this.$slots.renderNoResults || this.$props.renderNoResults;
-      return createVNode("p", {
-        "class": getClassName(this.$props.innerClass, 'noResults') || null
-      }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
-    },
-    renderSearchbox: function renderSearchbox(eventObject) {
-      var _this3 = this;
-      var _this$$props2 = this.$props,
-        componentId = _this$$props2.componentId,
-        searchPlaceholder = _this$$props2.searchPlaceholder,
-        showClear = _this$$props2.showClear,
-        themePreset = _this$$props2.themePreset,
-        innerClass = _this$$props2.innerClass;
-      var InputComponent = createVNode(Input, mergeProps({
-        "id": componentId + "-input",
-        "style": {
-          border: 0,
-          borderBottom: '1px solid #ddd'
-        },
-        "showIcon": false,
-        "showClear": showClear,
-        "class": getClassName(innerClass, 'input'),
-        "placeholder": searchPlaceholder,
-        "value": this.$data.searchTerm,
-        "themePreset": themePreset
-      }, eventObject), null);
-      if (showClear) {
-        return createVNode(InputWrapper, null, {
-          "default": function _default() {
-            return [InputComponent, _this3.searchTerm && createVNode(IconGroup, {
-              "groupPosition": "right",
-              "positionType": "absolute"
-            }, {
-              "default": function _default() {
-                return [createVNode(IconWrapper, {
-                  "onClick": _this3.clearSearchTerm,
-                  "isClearIcon": true
-                }, {
-                  "default": function _default() {
-                    return [createVNode(CancelSvg, null, null)];
-                  }
-                })];
-              }
-            })];
-          }
-        });
-      }
-      return InputComponent;
-    }
-  }
-};
-
-export { CancelSvg as C, Downshift as D, IconWrapper as I, IconGroup as a, InputWrapper as b, Dropdown as c };