@jetbrains/ring-ui 4.1.0-beta.3 → 4.1.1

package/dist/select.js

@@ -1,1920 +0,0 @@
-import { b as _defineProperty, _ as _objectWithoutProperties, a as _extends, c as _objectSpread2, d as _toPropertyKey } from './_helpers/_rollupPluginBabelHelpers.js';
-import React, { Component, PureComponent, Fragment } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import chevronDown from '@jetbrains/icons/chevron-10px';
-import closeIcon from '@jetbrains/icons/close';
-import deepEqual from 'deep-equal';
-import { Anchor } from './dropdown.js';
-import Avatar, { Size } from './avatar.js';
-import { a as DEFAULT_DIRECTIONS, g as getPopupContainer, m as maxHeightForDirection, P as Popup } from './_helpers/popup.js';
-import { A as ActiveItemContext, L as List, g as getEventKey } from './_helpers/list.js';
-import Input, { Size as Size$1 } from './input.js';
-import Shortcuts from './shortcuts.js';
-import { B as Button, m as modules_e81895c9 } from './_helpers/button.js';
-import { j as joinDataTestAttributes } from './_helpers/data-tests.js';
-import { g as getUID } from './_helpers/get-uid.js';
-import { r as rerenderHOC } from './_helpers/rerender-hoc.js';
-import { a as ThemeContext, T as Theme } from './_helpers/theme.js';
-import { m as memoize } from './_helpers/memoize.js';
-import searchIcon from '@jetbrains/icons/search';
-import memoizeOne from 'memoize-one';
-import Icon from './icon.js';
-import { a as PopupTargetContext } from './_helpers/popup.target.js';
-import LoaderInline from './loader-inline.js';
-import { f as getStyles } from './_helpers/dom.js';
-import TagsList from './tags-list.js';
-import Caret from './caret.js';
-import Text from './text.js';
-import { s as sniffr } from './_helpers/sniffer.js';
-import 'util-deprecate';
-import 'focus-visible';
-import './_helpers/clickableLink.js';
-import './_helpers/url.js';
-import 'react-dom';
-import './_helpers/schedule-raf.js';
-import './tab-trap.js';
-import 'react-virtualized/dist/es/List';
-import 'react-virtualized/dist/es/AutoSizer';
-import 'react-virtualized/dist/es/WindowScroller';
-import 'react-virtualized/dist/es/CellMeasurer';
-import './link.js';
-import './checkbox.js';
-import '@jetbrains/icons/checkmark';
-import '@jetbrains/icons/remove-10px';
-import 'combokeys';
-import 'sniffr';
-import 'conic-gradient';
-import './tag.js';
-
-/** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
-const marker = '**';
-function fuzzyHighlight(needle, haystack, caseSensitive = false) {
-  const ndl = caseSensitive ? needle : needle.toLowerCase();
-  const hstck = caseSensitive ? haystack : haystack.toLowerCase();
-
-  const result = (matched, highlight = haystack) => ({
-    matched,
-    highlight
-  });
-
-  const hlen = hstck.length;
-  const nlen = ndl.length;
-
-  if (nlen > hlen) {
-    return result(false);
-  }
-
-  if (nlen === hlen) {
-    const matched = ndl === hstck;
-    return result(matched, matched ? `${marker}${haystack}${marker}` : haystack);
-  }
-
-  let highlight = '';
-  let on = false;
-  let j = 0;
-  /* eslint-disable no-labels */
-
-  outer: for (let i = 0; i < nlen; i++) {
-    const nch = ndl[i];
-
-    while (j < hlen) {
-      const hch = hstck[j];
-      const match = hch === nch; // Don't turn highlight on for space characters
-
-      const nextOn = match && /\S/.test(hch);
-
-      if (nextOn !== on) {
-        highlight += marker;
-      }
-
-      highlight += haystack[j++];
-      on = nextOn;
-
-      if (match) {
-        continue outer;
-      }
-    }
-
-    return result(false);
-  }
-  /* eslint-enable */
-
-
-  if (on) {
-    highlight += marker;
-  }
-
-  highlight += haystack.slice(j);
-  return result(true, highlight);
-}
-
-function shortcutsHOC(ComposedComponent) {
-  var _class, _temp;
-
-  return _temp = _class = class WithShortcuts extends React.Component {
-    constructor(...args) {
-      super(...args);
-
-      _defineProperty(this, "_shortcutsScopeUid", getUID('rg-shortcuts-'));
-    }
-
-    render() {
-      const _this$props = this.props,
-            {
-        rgShortcutsOptions,
-        rgShortcutsMap
-      } = _this$props,
-            props = _objectWithoutProperties(_this$props, ["rgShortcutsOptions", "rgShortcutsMap"]);
-
-      return /*#__PURE__*/React.createElement(Shortcuts, {
-        scope: this._shortcutsScopeUid,
-        map: rgShortcutsMap,
-        options: rgShortcutsOptions,
-        disabled: rgShortcutsOptions.disabled
-      }, /*#__PURE__*/React.createElement(ComposedComponent, props));
-    }
-
-  }, _defineProperty(_class, "propTypes", {
-    rgShortcutsOptions: PropTypes.object,
-    rgShortcutsMap: PropTypes.object
-  }), _temp;
-}
-
-var modules_b607bec2 = {"unit":"8px","filterWithTags":"selectPopup_filterWithTags__7e997a1d","filterWrapper":"selectPopup_filterWrapper__7e997a1d","filterWithTagsFocused":"selectPopup_filterWithTagsFocused__7e997a1d","filter":"selectPopup_filter__7e997a1d","filterIcon":"selectPopup_filterIcon__7e997a1d","bottomLine":"selectPopup_bottomLine__7e997a1d","message":"selectPopup_message__7e997a1d","selectAll":"selectPopup_selectAll__7e997a1d"};
-
-function noop$2() {}
-
-class SelectFilter extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "inputRef", el => {
-      this.input = el;
-      this.props.inputRef(el);
-    });
-  }
-
-  componentWillUnmount() {
-    this.blur();
-  }
-
-  focus() {
-    const {
-      input
-    } = this;
-
-    if (input && input !== document.activeElement) {
-      sniffr.browser.name === 'firefox' ? input.select() : input.focus();
-    }
-  }
-
-  blur() {
-    if (this.input && this.input === document.activeElement) {
-      this.input.blur();
-    }
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      className,
-      listId
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["className", "listId"]);
-
-    const classes = classNames(modules_b607bec2.filter, className);
-    return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
-      "aria-owns": listId,
-      "aria-activedescendant": activeItemId,
-      autoComplete: "off",
-      autoFocus: true,
-      borderless: true,
-      inputRef: this.inputRef,
-      className: classes
-    })));
-  }
-
-}
-
-_defineProperty(SelectFilter, "propTypes", {
-  placeholder: PropTypes.string,
-  className: PropTypes.string,
-  inputRef: PropTypes.func,
-  listId: PropTypes.string,
-  activeItemId: PropTypes.string
-});
-
-_defineProperty(SelectFilter, "defaultProps", {
-  placeholder: 'Filter items',
-  inputRef: noop$2
-});
-
-const INPUT_MARGIN_COMPENSATION = -14;
-const FILTER_HEIGHT = 35;
-const TOOLBAR_HEIGHT = 49;
-
-function noop$1() {}
-
-const FilterWithShortcuts = shortcutsHOC(SelectFilter);
-class SelectPopup extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      popupFilterShortcutsOptions: {
-        modal: true,
-        disabled: true
-      },
-      tagsActiveIndex: null
-    });
-
-    _defineProperty(this, "isClickingPopup", false);
-
-    _defineProperty(this, "onFilterFocus", () => {
-      this._togglePopupFilterShortcuts(false);
-
-      this.setState({
-        tagsActiveIndex: null
-      });
-    });
-
-    _defineProperty(this, "popupFilterOnBlur", () => {
-      if (this.state.tagsActiveIndex === null) {
-        this._togglePopupFilterShortcuts(true);
-      }
-    });
-
-    _defineProperty(this, "mouseDownHandler", () => {
-      this.isClickingPopup = true;
-    });
-
-    _defineProperty(this, "mouseUpHandler", () => {
-      this.isClickingPopup = false;
-    });
-
-    _defineProperty(this, "onListSelect", (selected, event, opts) => {
-      const getSelectItemEvent = () => {
-        let customEvent;
-
-        if (document.createEvent) {
-          customEvent = document.createEvent('Event');
-          customEvent.initEvent('select', true, false);
-        }
-
-        if (event && event.persist) {
-          event.persist();
-        }
-
-        customEvent.originalEvent = event;
-        return customEvent;
-      };
-
-      this.props.onSelect(selected, getSelectItemEvent(), opts);
-    });
-
-    _defineProperty(this, "tabPress", event => {
-      this.props.onCloseAttempt(event, true);
-    });
-
-    _defineProperty(this, "onClickHandler", () => this.filter.focus());
-
-    _defineProperty(this, "handleRemoveTag", memoize(tag => event => this.removeTag(tag, event)));
-
-    _defineProperty(this, "handleTagClick", memoize(tag => () => {
-      this.setState({
-        tagsActiveIndex: this.props.selected.indexOf(tag)
-      });
-    }));
-
-    _defineProperty(this, "handleListResize", () => {
-      this.forceUpdate();
-    });
-
-    _defineProperty(this, "handleSelectAll", () => this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length));
-
-    _defineProperty(this, "getSelectAll", () => {
-      const activeFilters = this.props.data.filter(item => !item.disabled);
-      return /*#__PURE__*/React.createElement("div", {
-        className: modules_b607bec2.selectAll
-      }, activeFilters.length === 0 ? /*#__PURE__*/React.createElement("span", null) : /*#__PURE__*/React.createElement(Button, {
-        text: true,
-        inline: true,
-        onClick: this.handleSelectAll
-      }, activeFilters.length !== this.props.selected.length ? 'Select all' : 'Deselect all'), /*#__PURE__*/React.createElement(Text, {
-        info: true
-      }, `${this.props.selected.length} selected`));
-    });
-
-    _defineProperty(this, "_adjustListMaxHeight", memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {
-      if (hidden) {
-        return userDefinedMaxHeight;
-      } // Calculate list's maximum height that can't
-      // get beyond the screen
-      // @see RG-1838, JT-48358
-
-
-      const minMaxHeight = 100;
-      const directions = this.props.directions || DEFAULT_DIRECTIONS; // Note:
-      // Create a method which'll be called only when the popup opens and before
-      // render the list would be a better way
-
-      const anchorNode = this.props.anchorElement;
-      const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
-      return Math.min(directions.reduce((maxHeight, direction) => Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)), minMaxHeight), userDefinedMaxHeight);
-    }));
-
-    _defineProperty(this, "popupRef", el => {
-      this.popup = el;
-    });
-
-    _defineProperty(this, "listRef", el => {
-      this.list = el;
-    });
-
-    _defineProperty(this, "filterRef", el => {
-      this.filter = el;
-      this.caret = new Caret(this.filter);
-    });
-
-    _defineProperty(this, "shortcutsScope", getUID('select-popup-'));
-
-    _defineProperty(this, "shortcutsMap", {
-      tab: this.tabPress
-    });
-
-    _defineProperty(this, "popupFilterShortcuts", {
-      map: {
-        up: event => this.list && this.list.upHandler(event),
-        down: event => this.list && this.list.downHandler(event),
-        home: event => this.list && this.list.homeHandler(event),
-        end: event => this.list && this.list.endHandler(event),
-        enter: event => this.list ? this.list.enterHandler(event) : this.props.onEmptyPopupEnter(event),
-        esc: event => this.props.onCloseAttempt(event, true),
-        tab: event => this.tabPress(event),
-        backspace: event => this.handleBackspace(event),
-        del: () => this.removeSelectedTag(),
-        left: () => this.handleNavigation(true),
-        right: () => this.handleNavigation()
-      }
-    });
-  }
-
-  componentDidMount() {
-    window.document.addEventListener('mouseup', this.mouseUpHandler);
-  }
-
-  componentWillUnmount() {
-    window.document.removeEventListener('mouseup', this.mouseUpHandler);
-  }
-
-  // This flag is set to true while an item in the popup is being clicked
-  focusFilter() {
-    setTimeout(() => this.filter.focus());
-  }
-
-  isEventTargetFilter(event) {
-    return event.target && event.target.matches('input,textarea');
-  }
-
-  handleNavigation(navigateLeft) {
-    if (this.isEventTargetFilter(event) && this.caret.getPosition() > 0) {
-      return;
-    }
-
-    let newIndex = null;
-
-    if (navigateLeft) {
-      newIndex = this.state.tagsActiveIndex === null ? this.props.selected.length - 1 : this.state.tagsActiveIndex - 1;
-    } else if (this.state.tagsActiveIndex !== null) {
-      newIndex = this.state.tagsActiveIndex + 1;
-    }
-
-    if (newIndex !== null && (newIndex >= this.props.selected.length || newIndex < 0)) {
-      newIndex = null;
-      this.focusFilter();
-    }
-
-    this.setState({
-      tagsActiveIndex: newIndex
-    });
-  }
-
-  removeTag(tag, event) {
-    const _tag = tag || this.props.selected.slice(0)[this.props.selected.length - 1];
-
-    if (_tag) {
-      this.onListSelect(_tag, event, {
-        tryKeepOpen: true
-      });
-      this.setState({
-        tagsActiveIndex: null
-      });
-      this.focusFilter();
-    }
-  }
-
-  removeSelectedTag() {
-    if (this.state.tagsActiveIndex != null) {
-      this.removeTag(this.props.selected[this.state.tagsActiveIndex]);
-      return false;
-    }
-
-    return true;
-  }
-
-  handleBackspace(event) {
-    if (!this.props.tags) {
-      return true;
-    }
-
-    if (!this.isEventTargetFilter(event)) {
-      this.removeSelectedTag();
-      return false;
-    }
-
-    if (!event.target.value) {
-      this.removeTag();
-      return false;
-    }
-
-    return true;
-  }
-
-  _togglePopupFilterShortcuts(shortcutsDisabled) {
-    this.setState({
-      popupFilterShortcutsOptions: {
-        modal: true,
-        disabled: shortcutsDisabled
-      }
-    });
-  }
-
-  isVisible() {
-    return this.popup && this.popup.isVisible();
-  }
-
-  getFilter() {
-    if (this.props.filter || this.props.tags) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: modules_b607bec2.filterWrapper,
-        "data-test": "ring-select-popup-filter"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        glyph: searchIcon,
-        className: modules_b607bec2.filterIcon,
-        "data-test-custom": "ring-select-popup-filter-icon"
-      }), /*#__PURE__*/React.createElement(FilterWithShortcuts, {
-        rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
-        rgShortcutsMap: this.popupFilterShortcuts.map,
-        value: this.props.filterValue,
-        inputRef: this.filterRef,
-        onBlur: this.popupFilterOnBlur,
-        onFocus: this.onFilterFocus,
-        className: "ring-js-shortcuts",
-        placeholder: this.props.filter.placeholder,
-        onChange: this.props.onFilter,
-        onClick: this.onClickHandler,
-        onClear: this.props.onClear,
-        "data-test-custom": "ring-select-popup-filter-input",
-        listId: this.props.listId
-      }));
-    }
-
-    return null;
-  }
-
-  getTags() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TagsList, {
-      tags: this.props.selected,
-      activeIndex: this.state.tagsActiveIndex,
-      handleRemove: this.handleRemoveTag,
-      handleClick: this.handleTagClick,
-      disabled: this.props.disabled
-    }));
-  }
-
-  getFilterWithTags() {
-    if (this.props.tags) {
-      const classes = classNames([modules_b607bec2.filterWithTags, {
-        [modules_b607bec2.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
-      }]);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes
-      }, this.getTags(), this.getFilter());
-    }
-
-    return this.getFilter();
-  }
-
-  getBottomLine() {
-    const {
-      loading,
-      message
-    } = this.props;
-    return (loading || message) && /*#__PURE__*/React.createElement("div", {
-      className: modules_b607bec2.bottomLine
-    }, loading && /*#__PURE__*/React.createElement(LoaderInline, null), message && /*#__PURE__*/React.createElement("div", {
-      className: modules_b607bec2.message
-    }, message));
-  }
-
-  getList(ringPopupTarget) {
-    if (this.props.data.length) {
-      let {
-        maxHeight
-      } = this.props;
-
-      if (this.props.anchorElement) {
-        maxHeight = this._adjustListMaxHeight(this.props.hidden, maxHeight, ringPopupTarget);
-      }
-
-      if (this.props.filter) {
-        maxHeight -= FILTER_HEIGHT;
-      }
-
-      if (this.props.toolbar) {
-        maxHeight -= TOOLBAR_HEIGHT;
-      }
-
-      return /*#__PURE__*/React.createElement(List, {
-        id: this.props.listId,
-        maxHeight: maxHeight,
-        data: this.props.data,
-        activeIndex: this.props.activeIndex,
-        ref: this.listRef,
-        restoreActiveIndex: true,
-        activateFirstItem: true,
-        onSelect: this.onListSelect,
-        onResize: this.handleListResize,
-        onScrollToBottom: this.props.onLoadMore,
-        hidden: this.props.hidden,
-        shortcuts: !this.props.hidden,
-        disableMoveOverflow: this.props.disableMoveOverflow,
-        disableMoveDownOverflow: this.props.loading,
-        disableScrollToActive: this.props.disableScrollToActive,
-        compact: this.props.compact,
-        renderOptimization: this.props.renderOptimization
-      });
-    }
-
-    return null;
-  }
-
-  render() {
-    const {
-      toolbar,
-      className,
-      multiple,
-      hidden,
-      isInputMode,
-      anchorElement,
-      minWidth,
-      onCloseAttempt,
-      directions,
-      top,
-      left,
-      style,
-      dir,
-      filter
-    } = this.props;
-    const classes = classNames(modules_b607bec2.popup, className);
-    return /*#__PURE__*/React.createElement(PopupTargetContext.Consumer, null, ringPopupTarget => {
-      const filterWithTags = this.getFilterWithTags();
-      const selectAll = multiple && !multiple.limit && multiple.selectAll && this.getSelectAll();
-      const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
-      const bottomLine = this.getBottomLine();
-      const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar;
-      return /*#__PURE__*/React.createElement(Popup, {
-        trapFocus: false,
-        ref: this.popupRef,
-        hidden: hidden || !hasContent,
-        attached: isInputMode,
-        className: classes,
-        dontCloseOnAnchorClick: true,
-        anchorElement: anchorElement,
-        minWidth: minWidth,
-        onCloseAttempt: onCloseAttempt,
-        directions: directions,
-        top: top || (isInputMode ? INPUT_MARGIN_COMPENSATION : null),
-        left: left,
-        onMouseDown: this.mouseDownHandler,
-        target: this.props.ringPopupTarget,
-        autoCorrectTopOverflow: false,
-        style: style
-      }, /*#__PURE__*/React.createElement("div", {
-        dir: dir
-      }, !hidden && filter && /*#__PURE__*/React.createElement(Shortcuts, {
-        map: this.shortcutsMap,
-        scope: this.shortcutsScope
-      }), hidden ? /*#__PURE__*/React.createElement("div", null) : filterWithTags, selectAll, list, bottomLine, toolbar));
-    });
-  }
-
-}
-
-_defineProperty(SelectPopup, "propTypes", {
-  activeIndex: PropTypes.number,
-  anchorElement: PropTypes.instanceOf(HTMLElement),
-  className: PropTypes.string,
-  compact: PropTypes.bool,
-  data: PropTypes.array,
-  dir: PropTypes.oneOf(['ltr', 'rtl']),
-  directions: PropTypes.array,
-  disabled: PropTypes.bool,
-  disableMoveOverflow: PropTypes.bool,
-  disableScrollToActive: PropTypes.bool,
-  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    value: PropTypes.string,
-    placeholder: PropTypes.string
-  })]),
-  filterValue: PropTypes.string,
-  hidden: PropTypes.bool,
-  isInputMode: PropTypes.bool,
-  listId: PropTypes.string,
-  maxHeight: PropTypes.number,
-  message: PropTypes.string,
-  minWidth: PropTypes.number,
-  multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    label: PropTypes.string,
-    limit: PropTypes.number,
-    selectAll: PropTypes.bool
-  })]),
-  left: PropTypes.bool,
-  loading: PropTypes.bool,
-  onClear: PropTypes.func,
-  onCloseAttempt: PropTypes.func,
-  onEmptyPopupEnter: PropTypes.func,
-  onFilter: PropTypes.func,
-  onLoadMore: PropTypes.func,
-  onSelect: PropTypes.func,
-  onSelectAll: PropTypes.func,
-  renderOptimization: PropTypes.bool,
-  ringPopupTarget: PropTypes.string,
-  selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  style: PropTypes.object,
-  tags: PropTypes.object,
-  toolbar: PropTypes.node,
-  top: PropTypes.number
-});
-
-_defineProperty(SelectPopup, "defaultProps", {
-  data: [],
-  activeIndex: null,
-  toolbar: null,
-  filter: false,
-  multiple: false,
-  message: null,
-  anchorElement: null,
-  maxHeight: 600,
-  minWidth: 240,
-  loading: false,
-  onSelect: noop$1,
-  onCloseAttempt: noop$1,
-  onFilter: noop$1,
-  onClear: noop$1,
-  onLoadMore: noop$1,
-  selected: [],
-  tags: null,
-  ringPopupTarget: null,
-  onSelectAll: noop$1,
-  onEmptyPopupEnter: noop$1
-});
-
-var modules_9d0de074 = {"unit":"8px","resetButton":"global_resetButton__0f8f4370","select":"select_select__695ec655","value":"select_value__695ec655 global_ellipsis__0f8f4370 global_font__0f8f4370","icons":"select_icons__695ec655","toolbar":"select_toolbar__695ec655","button":"select_button__695ec655","buttonSpaced":"select_buttonSpaced__695ec655","inputMode":"select_inputMode__695ec655","buttonMode":"select_buttonMode__695ec655","selectedIcon":"select_selectedIcon__695ec655 global_resetButton__0f8f4370","clearIcon":"select_clearIcon__695ec655","sizeS":"select_sizeS__695ec655","sizeM":"select_sizeM__695ec655","sizeL":"select_sizeL__695ec655","sizeFULL":"select_sizeFULL__695ec655","sizeAUTO":"select_sizeAUTO__695ec655","materialMode":"select_materialMode__695ec655","open":"select_open__695ec655","buttonValue":"select_buttonValue__695ec655 global_ellipsis__0f8f4370","buttonValueOpen":"select_buttonValueOpen__695ec655","label":"select_label__695ec655","disabled":"select_disabled__695ec655","selectedLabel":"select_selectedLabel__695ec655","avatar":"select_avatar__695ec655","popup":"select_popup__695ec655","chevron":"select_chevron__695ec655","chevronIcon":"select_chevronIcon__695ec655"};
-
-/**
- * @name Select
- */
-
-function noop() {}
-/**
- * @enum {number}
- */
-
-
-const Type = {
-  BUTTON: 'BUTTON',
-  INPUT: 'INPUT',
-  CUSTOM: 'CUSTOM',
-  INLINE: 'INLINE',
-  MATERIAL: 'MATERIAL',
-  INPUT_WITHOUT_CONTROLS: 'INPUT_WITHOUT_CONTROLS'
-};
-const ICON_WIDTH = 20;
-const getStyle = memoize(iconsLength => ({
-  paddingRight: iconsLength * ICON_WIDTH
-}));
-
-const isInputMode = type => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
-
-function getLowerCaseLabel(item) {
-  if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || List.isItemType(List.ListProps.Type.HINT, item) || item.label == null) {
-    return null;
-  }
-
-  return item.label.toLowerCase();
-}
-
-function doesLabelMatch(itemToCheck, fn) {
-  const lowerCaseLabel = getLowerCaseLabel(itemToCheck);
-
-  if (lowerCaseLabel == null) {
-    return true;
-  }
-
-  return fn(lowerCaseLabel);
-}
-
-function getFilterFn(filter) {
-  if (filter.fn) {
-    return filter.fn;
-  }
-
-  if (filter.fuzzy) {
-    return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => fuzzyHighlight(checkString, lowerCaseLabel).matched);
-  }
-
-  return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => lowerCaseLabel.indexOf(checkString) >= 0);
-}
-
-const buildMultipleMap = selected => selected.reduce((acc, item) => {
-  acc[item.key] = true;
-  return acc;
-}, {});
-
-function getListItems(props, state, rawFilterString, data = props.data) {
-  let filterString = rawFilterString.trim();
-
-  if (isInputMode(props.type) && state.selected && filterString === state.selected.label) {
-    filterString = ''; // ignore multiple if it is exactly the selected item
-  }
-
-  const lowerCaseString = filterString.toLowerCase();
-  const filteredData = [];
-  let exactMatch = false;
-  const check = getFilterFn(props.filter);
-
-  for (let i = 0; i < data.length; i++) {
-    const item = _objectSpread2({}, data[i]);
-
-    if (check(item, lowerCaseString, data)) {
-      exactMatch = item.label === filterString;
-
-      if (props.multiple && !props.multiple.removeSelectedItems) {
-        item.checkbox = !!state.multipleMap[item.key];
-      }
-
-      if (props.multiple && props.multiple.limit) {
-        item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(selectedItem => selectedItem.key === item.key);
-      } // Ignore item if it's multiple and is already selected
-
-
-      if (!(props.multiple && props.multiple.removeSelectedItems && state.multipleMap[item.key])) {
-        filteredData.push(item);
-      }
-    }
-  }
-
-  let addButton = null;
-  const {
-    add
-  } = props;
-
-  if (add && filterString && !exactMatch || add && add.alwaysVisible) {
-    if (!(add.regexp && !add.regexp.test(filterString)) && !(add.minlength && filterString.length < +add.minlength) || add.alwaysVisible) {
-      let label;
-
-      if (add.label) {
-        label = typeof add.label === 'function' ? add.label(filterString) : add.label;
-      } else {
-        label = filterString;
-      }
-
-      addButton = {
-        prefix: add.prefix,
-        label,
-        delayed: add.hasOwnProperty('delayed') ? add.delayed : true
-      };
-    }
-  }
-
-  return {
-    filteredData,
-    addButton
-  };
-}
-
-function getSelectedIndex(selected, data, multiple) {
-  const firstSelected = multiple ? selected[0] : selected;
-
-  if (firstSelected == null) {
-    return null;
-  }
-
-  for (let i = 0; i < data.length; i++) {
-    const item = data[i];
-
-    if (item.key === undefined) {
-      continue;
-    }
-
-    if (item.key === firstSelected.key) {
-      return i;
-    }
-  }
-
-  return null;
-}
-
-const getItemLabel = ({
-  selectedLabel,
-  label
-}) => selectedLabel != null ? selectedLabel : label;
-
-const getValueForFilter = (selected, type, filterValue) => selected && isInputMode(type) ? getItemLabel(selected) : filterValue;
-
-function isSameSelected(prevSelected, selected) {
-  if (!prevSelected || !selected || prevSelected.length !== selected.length) {
-    return false;
-  }
-
-  const keysMap = selected.reduce((result, item) => {
-    result[item.key] = true;
-    return result;
-  }, {});
-  return prevSelected.every(it => keysMap[it.key]);
-}
-/**
- * @name Select
- * @constructor
- * @extends {Component}
- */
-
-/**
- * Displays a select.
- */
-
-
-class Select extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      data: [],
-      shownData: [],
-      selected: this.props.multiple ? [] : null,
-      selectedIndex: null,
-      filterValue: this.props.filter && this.props.filter.value || '',
-      shortcutsEnabled: false,
-      popupShortcuts: false,
-      showPopup: false,
-      prevData: this.props.data,
-      prevSelected: null,
-      prevMultiple: this.props.multiple,
-      multipleMap: {},
-      addButton: null
-    });
-
-    _defineProperty(this, "id", getUID('select-'));
-
-    _defineProperty(this, "shortcutsScope", this.id);
-
-    _defineProperty(this, "listId", `${this.id}:list`);
-
-    _defineProperty(this, "_focusHandler", () => {
-      this.props.onFocus();
-      this.setState({
-        shortcutsEnabled: true,
-        focused: true
-      });
-    });
-
-    _defineProperty(this, "_blurHandler", () => {
-      this.props.onBlur();
-
-      if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup) {
-        window.setTimeout(() => {
-          this.setState({
-            showPopup: false
-          });
-        });
-      }
-
-      if (!this._popup.isClickingPopup) {
-        this.setState({
-          shortcutsEnabled: false,
-          focused: false
-        });
-      }
-    });
-
-    _defineProperty(this, "nodeRef", el => {
-      this.node = el;
-    });
-
-    _defineProperty(this, "_popup", null);
-
-    _defineProperty(this, "onEmptyPopupEnter", () => {
-      if (this.state.addButton) {
-        this.addHandler();
-      }
-    });
-
-    _defineProperty(this, "_onEnter", () => {
-      if (this.state.addButton && this.state.shownData.length === 0) {
-        this.addHandler();
-      }
-
-      this.props.onDone();
-
-      if (!this._popup.isVisible() && this.props.allowAny) {
-        return true;
-      }
-
-      return undefined;
-    });
-
-    _defineProperty(this, "_onEsc", event => {
-      if (!this._popup.isVisible()) {
-        return true;
-      } else if (this.props.multiple || !this.props.getInitial) {
-        return false;
-      }
-
-      const selected = {
-        key: Math.random(),
-        label: this.props.getInitial()
-      };
-      this.setState({
-        selected,
-        filterValue: this.getValueForFilter(selected)
-      }, () => {
-        this.props.onChange(selected, event);
-        this.props.onReset();
-      });
-      return undefined;
-    });
-
-    _defineProperty(this, "_inputShortcutHandler", () => {
-      if (this.state.focused && this._popup && !this._popup.isVisible()) {
-        this._clickHandler();
-      }
-    });
-
-    _defineProperty(this, "popupRef", el => {
-      this._popup = el;
-    });
-
-    _defineProperty(this, "addHandler", () => {
-      const value = this.filterValue();
-
-      this._hidePopup();
-
-      this.props.onAdd(value);
-    });
-
-    _defineProperty(this, "getLowerCaseLabel", getLowerCaseLabel);
-
-    _defineProperty(this, "doesLabelMatch", doesLabelMatch);
-
-    _defineProperty(this, "_clickHandler", () => {
-      if (!this.props.disabled) {
-        if (this.state.showPopup) {
-          this._hidePopup();
-        } else {
-          this.props.onBeforeOpen();
-
-          this._showPopup();
-        }
-      }
-    });
-
-    _defineProperty(this, "_selectButtonKeyboardHack", event => {
-      const key = getEventKey(event);
-
-      if (key === 'Enter' || key === ' ') {
-        this._clickHandler();
-      }
-    });
-
-    _defineProperty(this, "_filterChangeHandler", e => {
-      this._setFilter(e.target.value, e);
-    });
-
-    _defineProperty(this, "_setFilter", (value, event = {}) => {
-      if (this.isInputMode() && !this.state.focused) {
-        return;
-      }
-
-      if (value === this.state.filterValue) {
-        return;
-      }
-
-      const filterValue = value.replace(/^\s+/g, '');
-      this.props.onFilter(filterValue);
-
-      if (this.props.allowAny) {
-        const fakeSelected = {
-          key: Math.random(),
-          label: filterValue
-        };
-        this.setState({
-          selected: filterValue === '' ? null : fakeSelected,
-          selectedIndex: null
-        }, () => {
-          this.props.onSelect(fakeSelected, event);
-          this.props.onChange(fakeSelected, event);
-        });
-      }
-
-      !this._popup.isVisible() && this.props.onBeforeOpen();
-      this.setState({
-        filterValue
-      }, () => {
-        this._showPopup();
-      });
-    });
-
-    _defineProperty(this, "_redrawPopup", () => {
-      if (this.props.multiple) {
-        setTimeout(() => {
-          //setTimeout solves events order and bubbling issue
-          this.isInputMode() && this.clearFilter();
-
-          this._showPopup();
-        }, 0);
-      }
-    });
-
-    _defineProperty(this, "_listSelectHandler", (selected, event, opts = {}) => {
-      const isItem = List.isItemType.bind(null, List.ListProps.Type.ITEM);
-      const isCustomItem = List.isItemType.bind(null, List.ListProps.Type.CUSTOM);
-      const isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
-
-      if (isSelectItemEvent) {
-        event.preventDefault();
-      }
-
-      if (!isItem(selected) && !isCustomItem(selected) || selected.disabled || selected.isResetItem) {
-        return;
-      }
-
-      if (!this.props.multiple) {
-        this._hidePopup(isSelectItemEvent);
-
-        this.setState({
-          selected,
-          selectedIndex: this._getSelectedIndex(selected, this.props.data)
-        }, () => {
-          const newFilterValue = this.isInputMode() && !this.props.hideSelected ? getItemLabel(selected) : '';
-          this.filterValue(newFilterValue);
-          this.props.onFilter(newFilterValue);
-          this.props.onSelect(selected, event);
-          this.props.onChange(selected, event);
-        });
-      } else {
-        const {
-          tryKeepOpen
-        } = opts;
-
-        if (!tryKeepOpen) {
-          this._hidePopup(isSelectItemEvent);
-        }
-
-        if (selected.key == null) {
-          throw new Error('Multiple selection requires each item to have the "key" property');
-        }
-
-        this.setState(prevState => {
-          const currentSelection = prevState.selected;
-          let nextSelection;
-
-          if (!prevState.multipleMap[selected.key]) {
-            nextSelection = currentSelection.concat(selected);
-            this.props.onSelect && this.props.onSelect(selected, event);
-          } else {
-            nextSelection = currentSelection.filter(item => item.key !== selected.key);
-            this.props.onDeselect && this.props.onDeselect(selected);
-          }
-
-          this.props.onChange(nextSelection, event);
-          const nextState = {
-            selected: nextSelection,
-            selectedIndex: this._getSelectedIndex(selected, this.props.data)
-          };
-
-          if (this.props.multiple.limit && nextSelection.length === this.props.multiple.limit) {
-            nextState.shownData = prevState.shownData.map(item => nextSelection.find(selectedItem => selectedItem.key === item.key) ? item : _objectSpread2(_objectSpread2({}, item), {}, {
-              disabled: true
-            }));
-          }
-
-          if (!prevState.multipleMap[selected.key]) {
-            nextState.multipleMap = _objectSpread2(_objectSpread2({}, prevState.multipleMap), {}, {
-              [selected.key]: true
-            });
-          } else {
-            const _prevState$multipleMa = prevState.multipleMap,
-                  _selected$key = selected.key,
-                  restMultipleMap = _objectWithoutProperties(_prevState$multipleMa, [_selected$key].map(_toPropertyKey));
-
-            nextState.multipleMap = restMultipleMap;
-          }
-
-          return nextState;
-        }, () => {
-          if (tryKeepOpen) {
-            this._redrawPopup();
-          }
-        });
-      }
-    });
-
-    _defineProperty(this, "_listSelectAllHandler", (isSelectAll = true) => {
-      const isItem = List.isItemType.bind(null, List.ListProps.Type.ITEM);
-      const isCustomItem = List.isItemType.bind(null, List.ListProps.Type.CUSTOM);
-      this.setState(prevState => {
-        const currentSelection = prevState.selected;
-        let nextSelection;
-
-        if (isSelectAll) {
-          nextSelection = this.props.data.filter(item => (isItem(item) || isCustomItem(item)) && !item.disabled);
-          nextSelection.filter(item => !this.props.selected.find(selectedItem => item.key === selectedItem.key)).forEach(item => {
-            this.props.onSelect && this.props.onSelect(item);
-          });
-        } else {
-          nextSelection = [];
-          currentSelection.forEach(item => {
-            this.props.onDeselect && this.props.onDeselect(item);
-          });
-        }
-
-        this.props.onChange(nextSelection, event);
-        return {
-          filterValue: '',
-          selected: nextSelection,
-          selectedIndex: isSelectAll ? this._getSelectedIndex(nextSelection, this.props.data) : null,
-          shownData: prevState.shownData.map(item => _objectSpread2(_objectSpread2({}, item), {}, {
-            checkbox: isSelectAll
-          })),
-          multipleMap: isSelectAll ? buildMultipleMap(this.props.data.filter(item => !item.disabled)) : {}
-        };
-      }, this._redrawPopup);
-    });
-
-    _defineProperty(this, "_onCloseAttempt", (event, isEsc) => {
-      if (this.isInputMode()) {
-        if (!this.props.allowAny) {
-          if (this.props.hideSelected || !this.state.selected || this.props.multiple) {
-            this.clearFilter();
-          } else if (this.state.selected) {
-            this.filterValue(getItemLabel(this.state.selected));
-          }
-        }
-      }
-
-      const isTagRemoved = this.props.tags && event && event.target && event.target.matches('[data-test="ring-tag-remove"]');
-
-      if (!isTagRemoved) {
-        this._hidePopup(isEsc);
-      }
-    });
-
-    _defineProperty(this, "clearFilter", e => {
-      this._setFilter('', e);
-    });
-
-    _defineProperty(this, "clear", event => {
-      if (event) {
-        event.stopPropagation();
-      }
-
-      const empty = Select._getEmptyValue(this.props.multiple);
-
-      this.setState({
-        selected: empty,
-        selectedIndex: null,
-        filterValue: ''
-      }, () => {
-        if (this.props.onChange) {
-          this.props.onChange(empty, event);
-        }
-      });
-      return false;
-    });
-
-    _defineProperty(this, "popupRef", el => {
-      this._popup = el;
-    });
-
-    _defineProperty(this, "buttonRef", el => {
-      this.button = el;
-    });
-
-    _defineProperty(this, "filterRef", el => {
-      this.filter = el;
-    });
-  }
-
-  static _getEmptyValue(multiple) {
-    return multiple ? [] : null;
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const {
-      multiple,
-      data,
-      type
-    } = nextProps;
-    const {
-      prevSelected,
-      prevData,
-      prevMultiple,
-      filterValue
-    } = prevState;
-    const nextState = {
-      prevData: data,
-      prevSelected: nextProps.selected,
-      prevMultiple: multiple
-    };
-
-    if ('data' in nextProps && data !== prevData) {
-      const {
-        filteredData,
-        addButton
-      } = getListItems(nextProps, prevState, filterValue, data);
-      Object.assign(nextState, {
-        shownData: filteredData,
-        addButton
-      });
-
-      if (prevState.selected) {
-        Object.assign(nextState, {
-          selectedIndex: getSelectedIndex(prevState.selected, data, multiple),
-          prevFilterValue: getValueForFilter(prevState.selected, type, filterValue)
-        });
-      }
-    }
-
-    if ('selected' in nextProps && nextProps.selected !== prevSelected) {
-      const selected = nextProps.selected || Select._getEmptyValue(multiple);
-
-      const selectedIndex = getSelectedIndex(selected, data || prevData, multiple);
-      Object.assign(nextState, {
-        selected,
-        prevFilterValue: getValueForFilter(selected, type, filterValue)
-      });
-
-      if (!multiple || !isSameSelected(prevSelected, selected)) {
-        Object.assign(nextState, {
-          selectedIndex
-        });
-      }
-    }
-
-    if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
-      nextState.selected = Select._getEmptyValue(multiple);
-    }
-
-    const {
-      selected
-    } = _objectSpread2(_objectSpread2({}, prevState), nextState);
-
-    if (selected && multiple) {
-      nextState.multipleMap = buildMultipleMap(selected);
-      const {
-        filteredData,
-        addButton
-      } = getListItems(nextProps, nextState, filterValue, data);
-      Object.assign(nextState, {
-        shownData: filteredData,
-        addButton
-      });
-    }
-
-    return nextState;
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      showPopup,
-      selected
-    } = this.state;
-    const {
-      onClose,
-      onOpen,
-      onChange,
-      multiple
-    } = this.props;
-
-    if (prevState.showPopup && !showPopup) {
-      onClose(selected);
-    } else if (!prevState.showPopup && showPopup) {
-      onOpen();
-    }
-
-    if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
-      onChange(selected);
-    }
-  }
-
-  getValueForFilter(selected) {
-    return getValueForFilter(selected, this.props.type, this.state.filterValue);
-  }
-
-  _getSelectedIndex(selected, data) {
-    return getSelectedIndex(selected, data, this.props.multiple);
-  }
-
-  _getResetOption() {
-    const isOptionsSelected = this.state.selected && this.state.selected.length;
-    const hasTagsResetProp = this.props.tags && this.props.tags.reset;
-
-    if (!isOptionsSelected || !hasTagsResetProp) {
-      return null;
-    }
-
-    const {
-      reset
-    } = this.props.tags;
-
-    const resetHandler = (item, event) => {
-      this.clear(event);
-      this.clearFilter();
-      this.props.onFilter('');
-      this.setState(prevState => ({
-        shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
-        multipleMap: {}
-      }));
-
-      this._redrawPopup();
-    };
-
-    return {
-      isResetItem: true,
-      separator: reset.separator,
-      key: reset.label,
-      rgItemType: List.ListProps.Type.CUSTOM,
-      template: /*#__PURE__*/React.createElement(Button, {
-        text: true,
-        className: modules_9d0de074.button,
-        "data-test": "ring-select-reset-tags-button"
-      }, reset.label),
-      glyph: reset.glyph,
-      onClick: resetHandler
-    };
-  }
-
-  _prependResetOption(shownData) {
-    const resetOption = this._getResetOption();
-
-    const margin = {
-      rgItemType: List.ListProps.Type.MARGIN
-    };
-
-    if (resetOption) {
-      const resetItems = [margin, resetOption, margin];
-
-      if (resetOption.separator) {
-        resetItems.push({
-          rgItemType: List.ListProps.Type.SEPARATOR
-        });
-      }
-
-      return resetItems.concat(shownData);
-    }
-
-    return shownData;
-  }
-
-  _renderPopup() {
-    const anchorElement = this.props.targetElement || this.node;
-    const {
-      showPopup,
-      shownData
-    } = this.state;
-
-    const _shownData = this._prependResetOption(shownData);
-
-    let message = null;
-
-    if (this.props.loading) {
-      message = this.props.loadingMessage;
-    } else if (!shownData.length) {
-      message = this.props.notFoundMessage;
-    }
-
-    return /*#__PURE__*/React.createElement(SelectPopup, {
-      data: _shownData,
-      message: message,
-      toolbar: showPopup && this.getToolbar(),
-      loading: this.props.loading,
-      activeIndex: this.state.selectedIndex,
-      hidden: !showPopup,
-      ref: this.popupRef,
-      maxHeight: this.props.maxHeight,
-      minWidth: this.props.minWidth,
-      directions: this.props.directions,
-      className: this.props.popupClassName,
-      style: this.props.popupStyle,
-      top: this.props.top,
-      left: this.props.left,
-      filter: this.isInputMode() ? false : this.props.filter // disable popup filter in INPUT mode
-      ,
-      multiple: this.props.multiple,
-      filterValue: this.state.filterValue,
-      anchorElement: anchorElement,
-      onCloseAttempt: this._onCloseAttempt,
-      onSelect: this._listSelectHandler,
-      onSelectAll: this._listSelectAllHandler,
-      onFilter: this._filterChangeHandler,
-      onClear: this.clearFilter,
-      onLoadMore: this.props.onLoadMore,
-      isInputMode: this.isInputMode(),
-      selected: this.state.selected,
-      tags: this.props.tags,
-      compact: this.props.compact,
-      renderOptimization: this.props.renderOptimization,
-      ringPopupTarget: this.props.ringPopupTarget,
-      disableMoveOverflow: this.props.disableMoveOverflow,
-      disableScrollToActive: this.props.disableScrollToActive,
-      dir: this.props.dir,
-      onEmptyPopupEnter: this.onEmptyPopupEnter,
-      listId: this.listId
-    });
-  }
-
-  _showPopup() {
-    if (!this.node) {
-      return;
-    }
-
-    const shownData = this.getListItems(this.filterValue());
-    this.setState({
-      showPopup: !!shownData.length || !this.props.allowAny,
-      shownData
-    });
-  }
-
-  _hidePopup(tryFocusAnchor) {
-    if (this.node && this.state.showPopup) {
-      this.setState({
-        showPopup: false,
-        filterValue: ''
-      });
-
-      if (tryFocusAnchor) {
-        const restoreFocusNode = this.props.targetElement || this.node.querySelector('[data-test~=ring-select__focus]');
-
-        if (restoreFocusNode) {
-          restoreFocusNode.focus();
-        }
-      }
-    }
-  }
-
-  getToolbar() {
-    const {
-      hint
-    } = this.props;
-    const {
-      prefix,
-      label,
-      delayed
-    } = this.state.addButton || {};
-    const isToolbarHasElements = this.state.addButton || hint;
-
-    if (!isToolbarHasElements) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames({
-        [modules_9d0de074.toolbar]: !!this.state.addButton
-      }),
-      "data-test": "ring-select-toolbar"
-    }, this.state.addButton && /*#__PURE__*/React.createElement(Button, {
-      text: true,
-      delayed: delayed,
-      className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
-      onClick: this.addHandler,
-      "data-test": "ring-select-toolbar-button"
-    }, prefix ? `${prefix} ${label}` : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
-      label: hint,
-      "data-test": "ring-select-toolbar-hint"
-    }));
-  }
-
-  getFilterFn() {
-    return getFilterFn(this.props.filter);
-  }
-
-  getListItems(rawFilterString, data) {
-    const {
-      filteredData,
-      addButton
-    } = getListItems(this.props, this.state, rawFilterString, data);
-    this.setState({
-      addButton
-    });
-    return filteredData;
-  }
-
-  filterValue(setValue) {
-    if (typeof setValue === 'string' || typeof setValue === 'number') {
-      this.setState({
-        filterValue: setValue
-      });
-    } else {
-      return this.state.filterValue;
-    }
-
-    return undefined;
-  }
-
-  isInputMode() {
-    return isInputMode(this.props.type);
-  }
-
-  _rebuildMultipleMap(selected, multiple) {
-    if (selected && multiple) {
-      this.setState({
-        multipleMap: buildMultipleMap(selected)
-      });
-    }
-  }
-
-  _selectionIsEmpty() {
-    return this.props.multiple && !this.state.selected.length || !this.state.selected;
-  }
-
-  _getLabel() {
-    return this.props.label || this.props.selectedLabel || 'Select an option';
-  }
-
-  _getSelectedString() {
-    if (this.props.multiple) {
-      const labels = [];
-
-      for (let i = 0; i < this.state.selected.length; i++) {
-        labels.push(getItemLabel(this.state.selected[i]));
-      }
-
-      return labels.filter(Boolean).join(', ');
-    } else {
-      return getItemLabel(this.state.selected);
-    }
-  }
-
-  _getIcons() {
-    const {
-      selected
-    } = this.state;
-    const {
-      disabled,
-      clear,
-      hideArrow
-    } = this.props;
-    const icons = [];
-
-    if (selected !== null && selected !== void 0 && selected.icon) {
-      icons.push( /*#__PURE__*/React.createElement("button", {
-        title: "Toggle options popup",
-        type: "button",
-        className: modules_9d0de074.selectedIcon,
-        key: "selected",
-        onClick: this._clickHandler,
-        style: {
-          backgroundImage: `url(${selected.icon})`
-        }
-      }));
-    }
-
-    if (clear && !disabled && !this._selectionIsEmpty()) {
-      icons.push( /*#__PURE__*/React.createElement(Button, {
-        title: "Clear selection",
-        "data-test": "ring-clear-select",
-        className: modules_9d0de074.clearIcon,
-        key: "close",
-        onClick: this.clear,
-        icon: closeIcon
-      }));
-    }
-
-    if (!hideArrow) {
-      icons.push( /*#__PURE__*/React.createElement(Button, {
-        title: "Toggle options popup",
-        className: modules_9d0de074.chevron,
-        iconClassName: modules_9d0de074.chevronIcon,
-        icon: chevronDown,
-        key: "hide",
-        onClick: this._clickHandler
-      }));
-    }
-
-    return icons;
-  }
-
-  _getAvatar() {
-    return this.state.selected && this.state.selected.avatar && /*#__PURE__*/React.createElement(Avatar, {
-      className: modules_9d0de074.avatar,
-      url: this.state.selected.avatar,
-      size: Size.Size20
-    });
-  }
-
-  getShortcutsMap() {
-    return {
-      enter: this._onEnter,
-      esc: this._onEsc,
-      up: this._inputShortcutHandler,
-      down: this._inputShortcutHandler,
-      right: noop,
-      left: noop,
-      'shift+up': noop,
-      'shift+down': noop,
-      space: noop
-    };
-  }
-
-  renderSelect(activeItemId) {
-    var _this$_popup, _this$_popup$list;
-
-    const dataTest = this.props['data-test'];
-    const {
-      shortcutsEnabled
-    } = this.state;
-    const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, {
-      [modules_9d0de074[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
-      [modules_9d0de074.disabled]: this.props.disabled
-    });
-
-    const icons = this._getIcons();
-
-    const style = getStyle(icons.length);
-    const iconsNode = /*#__PURE__*/React.createElement("span", {
-      className: modules_9d0de074.icons
-    }, icons);
-    const ariaProps = this.state.showPopup ? {
-      'aria-owns': this.listId,
-      'aria-activedescendant': activeItemId
-    } : {};
-
-    switch (this.props.type) {
-      case Type.INPUT_WITHOUT_CONTROLS:
-      case Type.INPUT:
-        return /*#__PURE__*/React.createElement("div", {
-          ref: this.nodeRef,
-          className: classNames(classes, modules_9d0de074.inputMode),
-          "data-test": joinDataTestAttributes('ring-select', dataTest)
-        }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-          map: this.getShortcutsMap(),
-          scope: this.shortcutsScope
-        }), /*#__PURE__*/React.createElement(Input, _extends({}, ariaProps, {
-          autoComplete: "off",
-          id: this.props.id,
-          onClick: this._clickHandler,
-          inputRef: this.filterRef,
-          disabled: this.props.disabled,
-          value: this.state.filterValue,
-          borderless: this.props.type === Type.INPUT_WITHOUT_CONTROLS,
-          style: style,
-          size: Size$1.FULL,
-          onChange: this._filterChangeHandler,
-          onFocus: this._focusHandler,
-          onBlur: this._blurHandler,
-          label: this.props.type === Type.INPUT ? this._getLabel() : null,
-          placeholder: this.props.inputPlaceholder,
-          onKeyDown: this.props.onKeyDown,
-          "data-test": "ring-select__focus",
-          enableShortcuts: shortcutsEnabled ? Object.keys(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup = this._popup) === null || _this$_popup === void 0 ? void 0 : (_this$_popup$list = _this$_popup.list) === null || _this$_popup$list === void 0 ? void 0 : _this$_popup$list.shortcutsMap)) : undefined
-        })), this.props.type === Type.INPUT && iconsNode, this._renderPopup());
-
-      case Type.BUTTON:
-        return /*#__PURE__*/React.createElement("div", {
-          ref: this.nodeRef,
-          className: classNames(classes, modules_9d0de074.buttonMode),
-          "data-test": joinDataTestAttributes('ring-select', dataTest)
-        }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-          map: this.getShortcutsMap(),
-          scope: this.shortcutsScope
-        }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, contextTheme => /*#__PURE__*/React.createElement("div", _extends({}, ariaProps, {
-          id: this.props.id,
-          onClick: this._clickHandler,
-          onKeyPress: this._selectButtonKeyboardHack,
-          className: classNames(modules_e81895c9.button, modules_e81895c9[this.props.theme || contextTheme || Theme.LIGHT], modules_9d0de074.buttonValue, {
-            [modules_9d0de074.buttonValueOpen]: this.state.showPopup
-          }),
-          role: "button",
-          tabIndex: 0,
-          disabled: this.props.disabled,
-          style: style,
-          "data-test": "ring-select__button ring-select__focus"
-        }), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString(), iconsNode)), this._renderPopup());
-
-      case Type.MATERIAL:
-        return /*#__PURE__*/React.createElement("div", {
-          ref: this.nodeRef,
-          className: classNames(classes, modules_9d0de074.materialMode),
-          "data-test": joinDataTestAttributes('ring-select', dataTest)
-        }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-          map: this.getShortcutsMap(),
-          scope: this.shortcutsScope
-        }), !this._selectionIsEmpty() && this.props.selectedLabel && /*#__PURE__*/React.createElement("span", {
-          className: modules_9d0de074.selectedLabel
-        }, this.props.selectedLabel), /*#__PURE__*/React.createElement("button", _extends({}, ariaProps, {
-          id: this.props.id,
-          onClick: this._clickHandler,
-          type: "button",
-          disabled: this.props.disabled,
-          className: classNames(modules_9d0de074.value, {
-            [modules_9d0de074.open]: this.state.showPopup,
-            [modules_9d0de074.label]: this._selectionIsEmpty()
-          }),
-          "aria-label": this._getLabel(),
-          style: style,
-          "data-test": "ring-select__focus",
-          ref: this.buttonRef
-        }), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), iconsNode, this._renderPopup());
-
-      case Type.INLINE:
-        return /*#__PURE__*/React.createElement("div", {
-          className: classes,
-          ref: this.nodeRef,
-          "data-test": joinDataTestAttributes('ring-select', dataTest)
-        }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-          map: this.getShortcutsMap(),
-          scope: this.shortcutsScope
-        }), /*#__PURE__*/React.createElement(Anchor, _extends({}, ariaProps, {
-          id: this.props.id,
-          onClick: this._clickHandler,
-          "data-test": "ring-select__focus",
-          disabled: this.props.disabled,
-          active: this.state.showPopup
-        }), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), this._renderPopup());
-
-      default:
-        if (this.props.customAnchor) {
-          return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-            map: this.getShortcutsMap(),
-            scope: this.shortcutsScope
-          }), this.props.customAnchor({
-            wrapperProps: {
-              ref: this.nodeRef,
-              'data-test': joinDataTestAttributes('ring-select', dataTest)
-            },
-            buttonProps: _objectSpread2(_objectSpread2({}, ariaProps), {}, {
-              id: this.props.id,
-              onClick: this._clickHandler,
-              disabled: this.props.disabled,
-              children: this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString(),
-              'data-test': 'ring-select_focus'
-            }),
-            popup: this._renderPopup()
-          }));
-        }
-
-        return /*#__PURE__*/React.createElement("span", {
-          id: this.props.id,
-          ref: this.nodeRef,
-          "data-test": "ring-select"
-        }, this._renderPopup());
-    }
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => this.renderSelect(activeItemId)));
-  }
-
-}
-
-_defineProperty(Select, "propTypes", {
-  className: PropTypes.string,
-  id: PropTypes.string,
-  multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  allowAny: PropTypes.bool,
-  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  getInitial: PropTypes.func,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  onDone: PropTypes.func,
-  onFilter: PropTypes.func,
-  onChange: PropTypes.func,
-  onReset: PropTypes.func,
-  onLoadMore: PropTypes.func,
-  onAdd: PropTypes.func,
-  onBeforeOpen: PropTypes.func,
-  onSelect: PropTypes.func,
-  onDeselect: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  data: PropTypes.array,
-  tags: PropTypes.object,
-  targetElement: PropTypes.object,
-  loading: PropTypes.bool,
-  loadingMessage: PropTypes.string,
-  notFoundMessage: PropTypes.string,
-  maxHeight: PropTypes.number,
-  minWidth: PropTypes.number,
-  directions: PropTypes.array,
-  popupClassName: PropTypes.string,
-  popupStyle: PropTypes.object,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  renderOptimization: PropTypes.bool,
-  ringPopupTarget: PropTypes.string,
-  hint: List.ListHint.propTypes.label,
-  add: PropTypes.object,
-  type: PropTypes.oneOf(Object.values(Type)),
-  disabled: PropTypes.bool,
-  hideSelected: PropTypes.bool,
-  label: PropTypes.string,
-  selectedLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  inputPlaceholder: PropTypes.string,
-  clear: PropTypes.bool,
-  hideArrow: PropTypes.bool,
-  compact: PropTypes.bool,
-  size: PropTypes.oneOf(Object.values(Size$1)),
-  theme: PropTypes.string,
-  customAnchor: PropTypes.func,
-  disableMoveOverflow: PropTypes.bool,
-  disableScrollToActive: PropTypes.bool,
-  dir: PropTypes.oneOf(['ltr', 'rtl']),
-  'data-test': PropTypes.string
-});
-
-_defineProperty(Select, "defaultProps", {
-  data: [],
-  filter: false,
-  // enable filter (not in INPUT modes)
-  multiple: false,
-  // multiple can be an object - see demo for more information
-  clear: false,
-  // enable clear button that clears the "selected" state
-  loading: false,
-  // show a loading indicator while data is loading
-  disabled: false,
-  // disable select
-  loadingMessage: 'Loading...',
-  notFoundMessage: 'No options found',
-  type: Type.MATERIAL,
-  size: Size$1.M,
-  targetElement: null,
-  // element to bind the popup to (select BUTTON or INPUT by default)
-  hideSelected: false,
-  // INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
-  allowAny: false,
-  // INPUT mode: allows any value to be entered, hides the dropdown icon
-  hideArrow: false,
-  // hide dropdown arrow icon
-  maxHeight: 600,
-  // height of the options list, including the filter and the 'Add' button
-  directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
-  selected: null,
-  // current selection (item / array of items)
-  label: '',
-  // BUTTON or INPUT label (nothing selected)
-  selectedLabel: '',
-  // BUTTON or INPUT label (something selected)
-  inputPlaceholder: '',
-  // Placeholder for input modes
-  hint: null,
-  // hint text to display under the list
-  shortcutsEnabled: false,
-  onBeforeOpen: noop,
-  onLoadMore: noop,
-  onOpen: noop,
-  onClose: noop,
-  onFilter: noop,
-  // search string as first argument
-  onFocus: noop,
-  onBlur: noop,
-  onKeyDown: noop,
-  onSelect: noop,
-  // single + multi
-  onDeselect: noop,
-  // multi
-  onChange: noop,
-  // multi
-  onAdd: noop,
-  // search string as first argument
-  onDone: noop,
-  onReset: noop,
-  tags: null,
-  onRemoveTag: noop,
-  ringPopupTarget: null,
-  dir: 'ltr'
-});
-
-_defineProperty(Select, "Type", Type);
-
-_defineProperty(Select, "Size", Size$1);
-
-_defineProperty(Select, "Theme", Theme);
-
-const RerenderableSelect = rerenderHOC(Select);
-
-export default Select;
-export { RerenderableSelect };