select.tsx

import React, {
  ButtonHTMLAttributes,
  Component,
  ComponentType,
  CSSProperties,
  Fragment,
  HTMLAttributes,
  ReactNode,
  Ref,
  RefCallback,
  SyntheticEvent
} from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import chevronDownIcon from '@jetbrains/icons/chevron-down';
import closeIcon from '@jetbrains/icons/close-12px';
import deepEqual from 'deep-equal';

import {Anchor} from '../dropdown/dropdown';
import Avatar, {Size as AvatarSize} from '../avatar/avatar';
import Popup from '../popup/popup';
import List, {ActiveItemContext, SelectHandlerParams} from '../list/list';
import Input, {Size} from '../input/input';
import ControlLabel, {LabelType} from '../control-label/control-label';
import Shortcuts from '../shortcuts/shortcuts';
import Button from '../button/button';
import dataTests from '../global/data-tests';
import getUID from '../global/get-uid';
import rerenderHOC from '../global/rerender-hoc';
import fuzzyHighlight from '../global/fuzzy-highlight';
import memoize from '../global/memoize';
import {I18nContext} from '../i18n/i18n-context';

import {ListDataItem} from '../list/consts';

import {Directions} from '../popup/popup.consts';

import composeRefs from '../global/composeRefs';
import {refObject} from '../global/prop-types';
import {isArray} from '../global/typescript-utils';

import {ControlsHeight, ControlsHeightContext} from '../global/controls-height';

import inputStyles from '../input/input.css';

import SelectPopup, {Filter, FilterFn, Multiple, Tags} from './select__popup';
import styles from './select.css';


/**
 * @name Select
 */

function noop() {}

/**
 * @enum {number}
 */
export enum Type {
  BUTTON = 'BUTTON',
  INPUT = 'INPUT',
  CUSTOM = 'CUSTOM',
  INLINE = 'INLINE',
  INPUT_WITHOUT_CONTROLS = 'INPUT_WITHOUT_CONTROLS'
}

const ICONS_OFFSET = 5;
const ICON_WIDTH = 20;
const getStyle = memoize((iconsLength: number) => ({
  paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
}));

const isInputMode = (type: Type) => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;

type SelectItemData<T> = T & {
  key: string | number
  isResetItem?: boolean | null | undefined
  separator?: boolean | null | undefined
}

export type SelectItem<T = unknown> = ListDataItem<SelectItemData<T>>

function getLowerCaseLabel<T>(item: SelectItem<T>) {
  if (
    List.isItemType(List.ListProps.Type.SEPARATOR, item) ||
    List.isItemType(List.ListProps.Type.HINT, item) ||
    typeof item.label !== 'string'
  ) {
    return null;
  }

  return item.label.toLowerCase();
}

function doesLabelMatch<T>(itemToCheck: SelectItem<T>, fn: (label: string) => boolean) {
  const lowerCaseLabel = getLowerCaseLabel(itemToCheck);

  if (lowerCaseLabel == null) {
    return true;
  }

  return fn(lowerCaseLabel);
}

function getFilterFn<T>(filter: Filter<T> | boolean): FilterFn<T> {
  if (typeof filter === 'object') {
    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
    );
}

function buildMultipleMap<T>(selected: SelectItem<T>[]) {
  return selected.reduce((acc: Record<string, boolean>, item) => {
    acc[item.key] = true;
    return acc;
  }, {});
}

export interface Add {
  alwaysVisible?: boolean | null | undefined
  regexp?: RegExp | null | undefined
  minlength?: number | null | undefined
  label?: ((filterString: string) => string) | string | null | undefined
  prefix?: string | null | undefined
  delayed?: boolean | null | undefined
}

export interface DataTestProps {
  'data-test'?: string | null | undefined
}

export interface CustomAnchorProps {
  wrapperProps: HTMLAttributes<HTMLElement> & DataTestProps & {ref: RefCallback<HTMLElement>}
  buttonProps: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'children'> &
    {onClick: () => void} &
    DataTestProps,
  popup: ReactNode
}

export type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);

export interface BaseSelectProps<T = unknown> {
  data: readonly SelectItem<T>[]
  filter: boolean | Filter<T>
  filterIcon?: string | ComponentType | null | undefined
  filterRef?: Ref<HTMLInputElement>
  clear: boolean
  loading: boolean
  disabled: boolean
  loadingMessage?: string
  notFoundMessage?: string
  type: Type
  size: Size
  hideSelected: boolean
  allowAny: boolean
  maxHeight: number
  hideArrow: boolean
  showPopup: boolean
  directions: readonly Directions[]
  label: string | null
  selectedLabel: ReactNode
  labelType?: LabelType
  inputPlaceholder: string
  shortcutsEnabled: boolean
  tryKeepOpen?: boolean
  onBeforeOpen: () => void
  onLoadMore: () => void
  onOpen: () => void
  onFilter: (value: string) => void
  onFocus: (e: React.FocusEvent<HTMLInputElement>) => void
  onBlur: () => void
  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
  onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void
  onDeselect: (selected: SelectItem<T> | null) => void
  onOutsideClick: (e: PointerEvent) => void
  onAdd: (value: string) => void
  onDone: () => void
  onReset: () => void
  dir: 'ltr' | 'rtl'
  renderBottomToolbar?: () => ReactNode
  renderTopToolbar?: () => ReactNode
  height?: ControlsHeight | undefined
  targetElement?: HTMLElement | null | undefined
  className?: string | null | undefined
  buttonClassName?: string | null | undefined
  id?: string | undefined
  getInitial?: (() => string) | null | undefined
  minWidth?: number | undefined
  popupClassName?: string | null | undefined
  popupStyle?: CSSProperties | undefined
  top?: number | undefined
  left?: number | undefined
  renderOptimization?: boolean | undefined
  ringPopupTarget?: string | null | undefined
  preventListOverscroll?: boolean | undefined
  error?: ReactNode | null | undefined
  hint?: ReactNode
  add?: Add | null | undefined
  compact?: boolean | null | undefined
  customAnchor?: CustomAnchor | null | undefined
  disableMoveOverflow?: boolean | null | undefined
  disableScrollToActive?: boolean | null | undefined
  'data-test'?: string | null | undefined
}

export interface SingleSelectProps<T = unknown> extends BaseSelectProps<T> {
  multiple: false
  onClose: (selected: SelectItem<T> | null) => void
  onChange: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void
  selected?: SelectItem<T> | null | undefined
  tags?: null | undefined
}

export interface MultipleSelectProps<T = unknown> extends BaseSelectProps<T> {
  multiple: true | Multiple
  selected: readonly SelectItem<T>[]
  onClose: (selected: SelectItem<T>[]) => void
  onChange: (selected: SelectItem<T>[], event?: Event | SyntheticEvent) => void
  tags?: Tags | boolean | null | undefined
}

export type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>

interface AddButton {
  prefix: string | null | undefined
  label: string
  delayed: boolean
}

export interface SelectState<T = unknown> {
  data: SelectItem<T>[]
  shownData: SelectItem<T>[]
  selected: SelectItem<T> | SelectItem<T>[] | null | undefined
  selectedIndex: number | null
  filterValue: string
  shortcutsEnabled: boolean
  popupShortcuts: boolean
  showPopup: boolean
  prevData: readonly SelectItem<T>[]
  prevSelected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined
  prevMultiple: Multiple | boolean | null | undefined
  multipleMap: Record<string, boolean>
  addButton: AddButton | null
  focused?: boolean
}

function getListItems<T = unknown>(
  props: SelectProps<T>,
  state: Partial<SelectState<T>>,
  rawFilterString: string,
  data = props.data
) {
  let filterString = rawFilterString.trim();

  if (isInputMode(props.type) && !props.allowAny && state.selected &&
    !Array.isArray(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 = {...data[i]};
    if (check(item, lowerCaseString, data)) {
      exactMatch = (item.label === filterString);

      if (props.multiple &&
        !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
        item.checkbox = !!state.multipleMap?.[item.key];
      }

      if (
        props.multiple &&
        typeof props.multiple === 'object' &&
        props.multiple.limit &&
        Array.isArray(state.selected)
      ) {
        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 &&
          typeof props.multiple === 'object' &&
          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.delayed ?? true
      };
    }
  }

  return {filteredData, addButton};
}

function getSelectedIndex<T>(
  selected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined,
  data: readonly SelectItem<T>[]
) {
  const firstSelected = Array.isArray(selected) ? 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 = <T, >({selectedLabel, label}: SelectItem<T>): string => {
  if (selectedLabel != null) {
    return selectedLabel;
  }
  return typeof label === 'string' ? label : '';
};

const getValueForFilter = <T, >(
  selected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined,
  type: Type,
  filterValue: string
): string => (selected && !isArray(selected) && isInputMode(type)
    ? getItemLabel(selected)
    : filterValue);

function isSameSelected<T>(prevSelected: SelectItem<T>[], selected: SelectItem<T>[]) {
  if (!prevSelected || !selected || prevSelected.length !== selected.length) {
    return false;
  }

  const keysMap = selected.reduce((result: Record<string, boolean>, item) => {
    result[item.key] = true;
    return result;
  }, {});

  return prevSelected.every(it => keysMap[it.key]);
}

/**
 * @name Select
 * @constructor
 * @extends {Component}
 */
/**
 * Displays a select.
 */
export default class Select<T = unknown> extends Component<SelectProps<T>, SelectState<T>> {
  static defaultProps = {
    data: [],
    filter: false, // enable filter (not in INPUT modes)
    filterIcon: null,
    filterRef: noop,
    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
    type: Type.BUTTON,
    size: Size.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
    hideArrow: false, // hide dropdown arrow icon
    showPopup: false,

    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: null, // BUTTON or INPUT label (nothing selected)
    selectedLabel: null, // 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
    onOutsideClick: noop, // multi
    onChange: noop, // multi

    onAdd: noop, // search string as first argument

    onDone: noop,
    onReset: noop,

    tags: null,
    ringPopupTarget: null,
    dir: 'ltr'
  };

  static getDerivedStateFromProps<T = unknown>(
    nextProps: SelectProps<T>,
    prevState: SelectState<T>
  ) {
    const {multiple, data, type} = nextProps;
    const {prevSelected, prevData, prevMultiple, filterValue} = prevState;
    const nextState: Partial<SelectState<T>> = {
      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,
          ),
          filterValue: getValueForFilter(prevState.selected, type, filterValue)
        });
      }
    }

    if ('selected' in nextProps && nextProps.selected !== prevSelected) {
      const selected = nextProps.selected || (multiple ? [] : null);

      const selectedIndex = getSelectedIndex(
        selected,
        data || prevData,
      );

      Object.assign(nextState, {
        selected,
        filterValue: getValueForFilter(selected, type, filterValue)
      });

      if (!Array.isArray(prevSelected) || !Array.isArray(selected) ||
        !isSameSelected(prevSelected, selected)) {
        Object.assign(nextState, {selectedIndex});
      }
    }

    if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
      nextState.selected = multiple ? [] : null;
    }

    if (multiple && !nextState.selected) {
      nextState.selected = prevState.selected;
    }

    const {selected} = {...prevState, ...nextState};
    if (selected && Array.isArray(selected)) {
      nextState.multipleMap = buildMultipleMap(selected);
      const {filteredData, addButton} = getListItems(nextProps, nextState, filterValue, data);
      Object.assign(nextState, {shownData: filteredData, addButton});
    }

    return nextState;
  }

  state: SelectState<T> = {
    data: [],
    shownData: [],
    selected: (this.props.multiple ? [] : null),
    selectedIndex: null,
    filterValue: this.props.filter && typeof this.props.filter === 'object' &&
      this.props.filter.value || '',
    shortcutsEnabled: false,
    popupShortcuts: false,
    showPopup: this.props.showPopup,
    prevData: this.props.data,
    prevSelected: null,
    prevMultiple: this.props.multiple,
    multipleMap: {},
    addButton: null
  };

  componentDidUpdate(prevProps: SelectProps<T>, prevState: SelectState<T>) {
    const {showPopup, selected} = this.state;
    const {onClose, onOpen, onChange, multiple} = this.props;

    if (prevState.showPopup && !showPopup) {
      (onClose as (s: typeof selected) => void)(selected);
    } else if (!prevState.showPopup && showPopup) {
      onOpen();
    }

    if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
      (onChange as (s: typeof selected) => void)(selected);
    }
  }

  static contextType = ControlsHeightContext;
  static Type = Type;
  static Size = Size;

  id = getUID('select-');
  shortcutsScope = this.id;
  listId = `${this.id}:list`;
  private _focusHandler = (e: React.FocusEvent<HTMLInputElement>) => {
    this.props.onFocus(e);

    this.setState({
      shortcutsEnabled: true,
      focused: true
    });
  };

  private _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
      });
    }
  };

  node?: HTMLElement | null;
  nodeRef = (el: HTMLElement | null) => {
    this.node = el;
  };

  _popup: SelectPopup<SelectItemData<T>> | null = null;

  onEmptyPopupEnter = () => {
    if (this.state.addButton) {
      this.addHandler();
    }
  };

  focus = () => {
    const focusableSelectExists =
      this.node?.querySelector<HTMLElement>('[data-test~=ring-select__focus]');
    const restoreFocusNode = this.props.targetElement || focusableSelectExists;
    restoreFocusNode?.focus();
  };

  private _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;
  };

  private _onEsc = (event: KeyboardEvent) => {
    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()
    } as SelectItem<T>;

    this.setState({
      selected,
      filterValue: this.getValueForFilter(selected)
    }, () => {
      (this.props.onChange as (s: typeof selected, e?: Event) => void)(selected, event);
      this.props.onReset();
    });

    return undefined;
  };

  _inputShortcutHandler = () => {
    if (this.state.focused && this._popup && !this._popup.isVisible()) {
      this._clickHandler();
    }
  };

  getValueForFilter(selected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined): string {
    return getValueForFilter(selected, this.props.type, this.state.filterValue);
  }

  _getSelectedIndex(
    selected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined,
    data: readonly SelectItem<T>[]
  ) {
    return getSelectedIndex(selected, data);
  }

  popupRef = (el: SelectPopup<SelectItemData<T>> | null) => {
    this._popup = el;
  };

  _getResetOption(): SelectItem<T> | null {
    const isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
    const reset = this.props.tags && typeof this.props.tags === 'object'
      ? this.props.tags.reset
      : null;
    if (!isOptionsSelected || !reset) {
      return null;
    }

    const resetHandler = (item: SelectItem<T>, event: Event | SyntheticEvent) => {
      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: (
        <Button
          text
          className={styles.button}
          data-test="ring-select-reset-tags-button"
          height={ControlsHeight.S}
        >
          {reset.label}
        </Button>
      ),
      glyph: reset.glyph,
      onClick: resetHandler
    } as SelectItem<T>;
  }

  _prependResetOption(shownData: SelectItem<T>[]): SelectItem<T>[] {
    const resetOption = this._getResetOption();
    if (resetOption) {
      const resetItems = [resetOption];
      if (resetOption.separator) {
        resetItems.push({
          rgItemType: List.ListProps.Type.SEPARATOR
        } as SelectItem<T>);
      }
      return resetItems.concat(shownData);
    }
    return shownData;
  }

  private _renderPopup() {
    const anchorElement = this.props.targetElement || this.node;
    const {showPopup, shownData} = this.state;
    const _shownData = this._prependResetOption(shownData);

    return (
      <I18nContext.Consumer>
        {({translate}) => {
          let message;

          if (this.props.loading) {
            message = this.props.loadingMessage ?? translate('loading');
          } else if (!shownData.length) {
            message = this.props.notFoundMessage ?? translate('noOptionsFound');
          }

          return (
            <SelectPopup<SelectItemData<T>>
              data={_shownData}
              message={message}
              toolbar={showPopup && this.getToolbar()}
              topbar={this.getTopbar()}
              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
              filterIcon={this.props.filterIcon}
              filterRef={this.props.filterRef}
              multiple={this.props.multiple}
              filterValue={this.state.filterValue}
              anchorElement={anchorElement}
              onCloseAttempt={this._onCloseAttempt}
              onOutsideClick={this.props.onOutsideClick}
              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}
              preventListOverscroll={this.props.preventListOverscroll}
            />
          );
        }}
      </I18nContext.Consumer>
    );
  }

  _showPopup = () => {
    if (!this.node) {
      return;
    }

    const shownData = this.getListItems(this.filterValue());
    this.setState({
      showPopup: true,
      shownData
    });
  };

  _hidePopup = (tryFocusAnchor?: boolean) => {
    if (this.node && this.state.showPopup) {
      this.setState(prevState => ({
        showPopup: false,
        filterValue: this.props.allowAny ? prevState.filterValue : ''
      }));

      if (tryFocusAnchor) {
        this.focus();
      }
    }
  };

  addHandler = () => {
    const value = this.filterValue();
    this._hidePopup();
    this.props.onAdd(value);
  };

  getToolbar() {
    const {hint, renderBottomToolbar} = this.props;
    const {prefix, label, delayed} = this.state.addButton || {};
    const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
    if (!isToolbarHasElements) {
      return null;
    }

    return (
      <div
        className={classNames({
          [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
        })}
        data-test="ring-select-toolbar"
      >
        {renderBottomToolbar && renderBottomToolbar()}
        {this.state.addButton && (
          <Button
            text
            delayed={delayed}
            className={classNames(styles.button, styles.buttonSpaced)}
            onClick={this.addHandler}
            data-test="ring-select-toolbar-button"
          >
            {prefix ? `${prefix} ${label}` : label}
          </Button>
        )}
        {hint && (
          <List.ListHint
            label={hint}
            data-test="ring-select-toolbar-hint"
          />
        )}
      </div>
    );
  }

  getTopbar() {
    return this.props.renderTopToolbar?.();
  }

  getLowerCaseLabel = getLowerCaseLabel;
  doesLabelMatch = doesLabelMatch;

  getFilterFn() {
    return getFilterFn(this.props.filter);
  }

  getListItems(rawFilterString: string, data?: SelectItem<T>[]) {
    const {filteredData, addButton} = getListItems(this.props, this.state, rawFilterString, data);
    this.setState({addButton});

    return filteredData;
  }

  filterValue(): string
  filterValue(setValue: string): void
  filterValue(setValue?: string) {
    if (typeof setValue === 'string' || typeof setValue === 'number') {
      this.setState({filterValue: setValue});
      return undefined;
    } else {
      return this.state.filterValue;
    }
  }

  isInputMode() {
    return isInputMode(this.props.type);
  }

  _clickHandler = () => {
    if (!this.props.disabled) {
      if (this.state.showPopup) {
        this._hidePopup();
      } else {
        this.props.onBeforeOpen();
        this._showPopup();
      }
    }
  };

  _openPopupIfClosed = () => {
    if (this.props.disabled || this.state.showPopup) {
      return;
    }
    this.props.onBeforeOpen();
    this._showPopup();
  };

  _filterChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    this._setFilter(e.currentTarget.value, e);
  };

  private _setFilter = (value: string, event?: SyntheticEvent) => {
    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
      } as SelectItem<T>;
      this.setState({
        selected: filterValue === '' ? null : fakeSelected,
        selectedIndex: null
      }, () => {
        this.props.onSelect(fakeSelected, event);
        (this.props.onChange as (selected: SelectItem<T>, event?: SyntheticEvent) => void)(
          fakeSelected,
          event
        );
      });
    }
    !this._popup?.isVisible() && this.props.onBeforeOpen();

    this.setState({filterValue}, () => {
      this._showPopup();
    });
  };

  private _rebuildMultipleMap(selected: SelectItem<T> | readonly SelectItem<T>[] | null) {
    if (Array.isArray(selected)) {
      this.setState({multipleMap: buildMultipleMap(selected)});
    }
  }

  _redrawPopup = () => {
    if (this.props.multiple) {
      setTimeout(() => { //setTimeout solves events order and bubbling issue
        this.isInputMode() && this.clearFilter();
        this._showPopup();
      }, 0);
    }
  };

  _listSelectHandler = (
    selected: SelectItem<T>,
    event?: Event,
    opts: SelectHandlerParams = {}
  ) => {
    const isItem = (item: SelectItem<T>) => List.isItemType(List.ListProps.Type.ITEM, item);
    const isCustomItem = (item: SelectItem<T>) => List.isItemType(List.ListProps.Type.CUSTOM, item);
    const isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
    if (isSelectItemEvent) {
      event.preventDefault();
    }

    if ((!isItem(selected) && !isCustomItem(selected)) ||
      selected.disabled ||
      selected.isResetItem) {
      return;
    }

    const tryKeepOpen = this.props.tryKeepOpen ?? opts.tryKeepOpen;

    if (!this.props.multiple) {
      if (!tryKeepOpen) {
        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 as (selected: SelectItem<T>, event?: Event) => void)(selected, event);
      });
    } else {
      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 as SelectItem<T>[];
        let nextSelection: SelectItem<T>[];

        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 as (selected: SelectItem<T>[], event?: Event) => void)(
          nextSelection,
          event
        );

        const nextState: Partial<SelectState<T>> = {
          filterValue: '',
          selected: nextSelection,
          selectedIndex: this._getSelectedIndex(selected, this.props.data)
        };

        if (
          typeof this.props.multiple === 'object' && this.props.multiple.limit &&
          nextSelection.length === this.props.multiple.limit
        ) {
          nextState.shownData = prevState.shownData.
            map(item => (nextSelection.find(selectedItem => selectedItem.key === item.key)
              ? item
              : {...item, disabled: true}));
        }

        if (!prevState.multipleMap[selected.key]) {
          nextState.multipleMap = {...prevState.multipleMap, [selected.key]: true};
        } else {
          const {[selected.key]: _, ...restMultipleMap} = prevState.multipleMap;
          nextState.multipleMap = restMultipleMap;
        }

        return {...prevState, ...nextState};

      }, () => {
        if (tryKeepOpen) {
          this._redrawPopup();
        }
      });
    }
  };

  _listSelectAllHandler = (isSelectAll = true) => {
    const isItem = (item: SelectItem<T>) => List.isItemType(List.ListProps.Type.ITEM, item);
    const isCustomItem = (item: SelectItem<T>) => List.isItemType(List.ListProps.Type.CUSTOM, item);

    this.setState(prevState => {
      const currentSelection = prevState.selected as SelectItem<T>[];
      let nextSelection: SelectItem<T>[];

      if (isSelectAll) {
        nextSelection = this.props.data.filter(
          item => (isItem(item) || isCustomItem(item)) &&
            !item.disabled
        );
        nextSelection.
          filter(
            item => !(this.props.selected as SelectItem<T>[]).
              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 as (selected: SelectItem<T>[], event?: Event) => void)(
        nextSelection,
        event
      );

      return {
        filterValue: '',
        selected: nextSelection,
        selectedIndex: isSelectAll
          ? this._getSelectedIndex(
            nextSelection, this.props.data
          )
          : null,
        shownData: prevState.shownData.map(item => ({...item, checkbox: isSelectAll})),
        multipleMap: isSelectAll
          ? buildMultipleMap(this.props.data.filter(item => !item.disabled))
          : {}
      };
    }, this._redrawPopup);
  };

  private _onCloseAttempt = (event?: Event | SyntheticEvent, isEsc?: boolean) => {
    if (this.isInputMode()) {
      if (!this.props.allowAny) {
        if (this.props.hideSelected || !this.state.selected || this.props.multiple) {
          this.clearFilter();
        } else if (this.state.selected && !Array.isArray(this.state.selected)) {
          this.filterValue(getItemLabel(this.state.selected));
        }
      }
    }

    const isTagRemoved = this.props.tags && event && event.target &&
      event.target instanceof Element &&
      event.target.matches('[data-test="ring-tag-remove"]');

    if (!isTagRemoved) {
      this._hidePopup(isEsc);
    }
  };

  clearFilter = (e?: SyntheticEvent) => {
    this._setFilter('', e);
  };

  clear = (event?: Event | SyntheticEvent) => {
    if (event) {
      event.stopPropagation();
    }
    const empty = this.props.multiple ? [] : null;

    this.setState({
      selected: empty,
      selectedIndex: null,
      filterValue: ''
    }, () => {
      if (this.props.onChange) {
        (this.props.onChange as (
          selected: SelectItem<T> | SelectItem<T>[] | null,
          event?: Event | SyntheticEvent
        ) => void)(empty, event);
      }
    });

    return false;
  };

  _selectionIsEmpty() {
    return (Array.isArray(this.state.selected) && !this.state.selected.length) ||
      !this.state.selected;
  }

  private _getLabel() {
    return this.props.label ?? this.props.selectedLabel ?? 'Select an option';
  }

  private _getPlaceholder() {
    if (this._selectionIsEmpty()) {
      return this.props.label ?? 'Select an option';
    }
    return this._getSelectedString();
  }

  _getSelectedString() {
    if (Array.isArray(this.state.selected)) {
      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 this.state.selected != null ? getItemLabel(this.state.selected) : null;
    }
  }

  private _getIcons() {
    const {selected} = this.state;
    const {disabled, clear, hideArrow} = this.props;
    const icons = [];
    const height = this.props.height || (this.context as ControlsHeight);

    if (!Array.isArray(selected) && selected?.icon) {
      icons.push(
        <button
          title="Toggle options popup"
          type="button"
          className={styles.selectedIcon}
          key="selected"
          disabled={this.props.disabled}
          onClick={this._clickHandler}
          style={{backgroundImage: `url(${selected.icon})`}}
        />
      );
    }

    if (clear && !disabled && !this._selectionIsEmpty()) {
      icons.push(
        <Button
          title="Clear selection"
          data-test="ring-clear-select"
          className={styles.clearIcon}
          key="close"
          disabled={this.props.disabled}
          onClick={this.clear}
          height={height}
          icon={closeIcon}
        />
      );
    }

    if (!hideArrow) {
      icons.push(
        <Button
          title="Toggle options popup"
          className={styles.chevron}
          iconClassName={styles.chevronIcon}
          icon={chevronDownIcon}
          key="hide"
          disabled={this.props.disabled}
          height={height}
          onClick={this._clickHandler}
        />
      );
    }

    return icons;
  }

  private _getAvatar() {
    return !Array.isArray(this.state.selected) &&
      (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && (
      <Avatar
        className={styles.avatar}
        url={this.state.selected.avatar}
        username={this.state.selected.username}
        size={AvatarSize.Size20}
      />
    );
  }

  filter?: HTMLInputElement | null;
  filterRef = (el: HTMLInputElement | null) => {
    this.filter = el;
  };

  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: string | undefined) {
    const dataTest = this.props['data-test'];
    const {selectedLabel} = this.props;
    const {shortcutsEnabled} = this.state;
    const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.props.height || this.context}`], {
      [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
      [styles.disabled]: this.props.disabled
    });

    const icons = this._getIcons();

    const style = getStyle(icons.length);

    const iconsNode = <div className={styles.icons}>{icons}</div>;
    const ariaProps = this.state.showPopup
      ? {
        'aria-owns': this.listId,
        'aria-activedescendant': activeItemId,
        'aria-label': this.props.label ?? undefined
      }
      : {
        'aria-label': this.props.label ?? undefined
      };

    switch (this.props.type) {
      case Type.INPUT_WITHOUT_CONTROLS:
      case Type.INPUT: return (
        <>
          <div
            ref={this.nodeRef}
            className={classNames(classes, styles.inputMode)}
            data-test={dataTests('ring-select', dataTest)}
          >
            {shortcutsEnabled && (
              <Shortcuts
                map={this.getShortcutsMap()}
                scope={this.shortcutsScope}
              />
            )}
            <Input
              {...ariaProps}
              height={this.props.height}
              autoComplete="off"
              id={this.props.id}
              onClick={this._clickHandler}
              inputRef={composeRefs(this.filterRef, this.props.filterRef)}
              disabled={this.props.disabled}
              value={this.state.filterValue}
              borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS}
              style={style}
              size={Size.FULL}
              onChange={this._filterChangeHandler}
              onFocus={this._focusHandler}
              onBlur={this._blurHandler}

              // Input with error style without description
              error={this.props.error != null ? '' : null}
              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({
                  ...this.getShortcutsMap(),
                  ...this._popup?.list?.shortcutsMap
                })
                : undefined}
              icon={this.props.filterIcon}
              afterInput={this.props.type === Type.INPUT && iconsNode}
            />
            {this._renderPopup()}
          </div>
          {this.props.error && (
            <div
              className={classNames(
                inputStyles.errorText,
                inputStyles[`size${this.props.size}`],
              )}
            >
              {this.props.error}
            </div>
          )}
        </>
      );
      case Type.BUTTON:
        return (
          <div
            ref={this.nodeRef}
            className={classNames(classes, styles.buttonMode)}
            data-test={dataTests('ring-select', dataTest)}
          >
            {selectedLabel && (
              <ControlLabel
                type={this.props.labelType}
                disabled={this.props.disabled}
                htmlFor={this.props.id}
              >{selectedLabel}</ControlLabel>
            )}
            {shortcutsEnabled && (
              <Shortcuts
                map={this.getShortcutsMap()}
                scope={this.shortcutsScope}
              />
            )}
            <div className={styles.buttonContainer}>
              <Button
                {...ariaProps}
                height={this.props.height}
                id={this.props.id}
                onClick={this._clickHandler}
                className={classNames(
                  this.props.buttonClassName,
                  styles.buttonValue,
                  {
                    [styles.buttonValueOpen]: this.state.showPopup,
                    [styles.buttonValueEmpty]: this._selectionIsEmpty()
                  })
                }
                disabled={this.props.disabled}
                style={style}
                data-test="ring-select__button ring-select__focus"
              >
                {this._getAvatar()}
                {this._getPlaceholder()}
              </Button>
              {iconsNode}
            </div>
            {this._renderPopup()}
          </div>
        );

      case Type.INLINE:
        return (
          <div
            className={classes}
            ref={this.nodeRef}
            data-test={dataTests('ring-select', dataTest)}
          >
            {shortcutsEnabled && (
              <Shortcuts
                map={this.getShortcutsMap()}
                scope={this.shortcutsScope}
              />
            )}
            <Anchor
              {...ariaProps}
              className={this.props.buttonClassName ?? undefined}
              id={this.props.id}
              onClick={this._clickHandler}
              data-test="ring-select__focus"
              disabled={this.props.disabled}
              active={this.state.showPopup}
            >
              {this._getPlaceholder()}
            </Anchor>
            {this._renderPopup()}
          </div>
        );
      default:
        if (this.props.customAnchor) {
          return (
            <Fragment>
              {shortcutsEnabled && (
                <Shortcuts
                  map={this.getShortcutsMap()}
                  scope={this.shortcutsScope}
                />
              )}
              {this.props.customAnchor({
                wrapperProps: {
                  ref: this.nodeRef,
                  'data-test': dataTests('ring-select', dataTest)
                },
                buttonProps: {
                  ...ariaProps,
                  id: this.props.id,
                  onClick: this._clickHandler,
                  disabled: this.props.disabled,
                  children: this._getPlaceholder(),
                  'data-test': 'ring-select__focus'
                },
                popup: this._renderPopup()
              })}
            </Fragment>
          );
        }
        return (
          <span id={this.props.id} ref={this.nodeRef} data-test="ring-select">
            {this._renderPopup()}
          </span>
        );
    }
  }

  render() {
    return (
      <ActiveItemContext.Provider>
        <ActiveItemContext.ValueContext.Consumer>
          {activeItemId => this.renderSelect(activeItemId)}
        </ActiveItemContext.ValueContext.Consumer>
      </ActiveItemContext.Provider>
    );
  }
}

(Select as unknown as ComponentType<unknown>).propTypes = {
  className: PropTypes.string,
  buttonClassName: PropTypes.string,
  id: PropTypes.string,
  multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
  allowAny: PropTypes.bool,
  filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
  filterIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
  filterRef: PropTypes.oneOfType([
    PropTypes.func,
    refObject(PropTypes.instanceOf(HTMLInputElement))
  ]),

  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,
  onOutsideClick: 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,
  preventListOverscroll: PropTypes.bool,
  top: PropTypes.number,
  left: PropTypes.number,
  renderOptimization: PropTypes.bool,
  ringPopupTarget: PropTypes.string,
  error: 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,
  showPopup: PropTypes.bool,
  tryKeepOpen: PropTypes.bool,
  compact: PropTypes.bool,
  size: PropTypes.oneOf(Object.values(Size)),
  customAnchor: PropTypes.func,
  disableMoveOverflow: PropTypes.bool,
  disableScrollToActive: PropTypes.bool,
  dir: PropTypes.oneOf(['ltr', 'rtl']),
  'data-test': PropTypes.string
};

export type SingleSelectAttrs<T = unknown> =
  JSX.LibraryManagedAttributes<typeof Select, SingleSelectProps<T>>
export type MultipleSelectAttrs<T = unknown> =
  JSX.LibraryManagedAttributes<typeof Select, MultipleSelectProps<T>>
export type SelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<T>>

export const RerenderableSelect = rerenderHOC(Select);