@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/select/select.js

@@ -0,0 +1,957 @@
+import React, { Component, Fragment } 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 } from '../list/list';
+import Input, { Size } from '../input/input';
+import ControlLabel 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 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 from './select__popup';
+import styles from './select.css';
+/**
+ * @name Select
+ */
+function noop() { }
+/**
+ * @enum {number}
+ */
+export var Type;
+(function (Type) {
+    Type["BUTTON"] = "BUTTON";
+    Type["INPUT"] = "INPUT";
+    Type["CUSTOM"] = "CUSTOM";
+    Type["INLINE"] = "INLINE";
+    Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
+})(Type || (Type = {}));
+const ICONS_OFFSET = 5;
+const ICON_WIDTH = 20;
+const getStyle = memoize((iconsLength) => ({
+    paddingRight: ICONS_OFFSET + 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) ||
+        typeof item.label !== 'string') {
+        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 (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(selected) {
+    return 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) && !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(selected, data) {
+    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 = ({ selectedLabel, label }) => {
+    if (selectedLabel != null) {
+        return selectedLabel;
+    }
+    return typeof label === 'string' ? label : '';
+};
+const getValueForFilter = (selected, type, filterValue) => (selected && !isArray(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.
+ */
+export default class Select extends Component {
+    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(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),
+                    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 = {
+        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, 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);
+        }
+    }
+    static contextType = ControlsHeightContext;
+    static Type = Type;
+    static Size = Size;
+    id = getUID('select-');
+    shortcutsScope = this.id;
+    listId = `${this.id}:list`;
+    _focusHandler = (e) => {
+        this.props.onFocus(e);
+        this.setState({
+            shortcutsEnabled: true,
+            focused: true
+        });
+    };
+    _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;
+    nodeRef = (el) => {
+        this.node = el;
+    };
+    _popup = null;
+    onEmptyPopupEnter = () => {
+        if (this.state.addButton) {
+            this.addHandler();
+        }
+    };
+    focus = () => {
+        const focusableSelectExists = this.node?.querySelector('[data-test~=ring-select__focus]');
+        const restoreFocusNode = this.props.targetElement || focusableSelectExists;
+        restoreFocusNode?.focus();
+    };
+    _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;
+    };
+    _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;
+    };
+    _inputShortcutHandler = () => {
+        if (this.state.focused && this._popup && !this._popup.isVisible()) {
+            this._clickHandler();
+        }
+    };
+    getValueForFilter(selected) {
+        return getValueForFilter(selected, this.props.type, this.state.filterValue);
+    }
+    _getSelectedIndex(selected, data) {
+        return getSelectedIndex(selected, data);
+    }
+    popupRef = (el) => {
+        this._popup = el;
+    };
+    _getResetOption() {
+        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, 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: (<Button text className={styles.button} data-test="ring-select-reset-tags-button" height={ControlsHeight.S}>
+          {reset.label}
+        </Button>),
+            glyph: reset.glyph,
+            onClick: resetHandler
+        };
+    }
+    _prependResetOption(shownData) {
+        const resetOption = this._getResetOption();
+        if (resetOption) {
+            const resetItems = [resetOption];
+            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);
+        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 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}/>);
+            }}
+      </I18nContext.Consumer>);
+    }
+    _showPopup() {
+        if (!this.node) {
+            return;
+        }
+        const shownData = this.getListItems(this.filterValue());
+        this.setState({
+            showPopup: true,
+            shownData
+        });
+    }
+    _hidePopup(tryFocusAnchor) {
+        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, 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 });
+            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) => {
+        this._setFilter(e.currentTarget.value, e);
+    };
+    _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();
+        });
+    };
+    _rebuildMultipleMap(selected) {
+        if (Array.isArray(selected)) {
+            this.setState({ multipleMap: buildMultipleMap(selected) });
+        }
+    }
+    _redrawPopup = () => {
+        if (this.props.multiple) {
+            setTimeout(() => {
+                this.isInputMode() && this.clearFilter();
+                this._showPopup();
+            }, 0);
+        }
+    };
+    _listSelectHandler = (selected, event, opts = {}) => {
+        const isItem = (item) => List.isItemType(List.ListProps.Type.ITEM, item);
+        const isCustomItem = (item) => 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(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;
+                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 = {
+                    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) => List.isItemType(List.ListProps.Type.ITEM, item);
+        const isCustomItem = (item) => List.isItemType(List.ListProps.Type.CUSTOM, item);
+        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 => ({ ...item, checkbox: isSelectAll })),
+                multipleMap: isSelectAll
+                    ? buildMultipleMap(this.props.data.filter(item => !item.disabled))
+                    : {}
+            };
+        }, this._redrawPopup);
+    };
+    _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 && !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) => {
+        this._setFilter('', e);
+    };
+    clear = (event) => {
+        if (event) {
+            event.stopPropagation();
+        }
+        const empty = this.props.multiple ? [] : null;
+        this.setState({
+            selected: empty,
+            selectedIndex: null,
+            filterValue: ''
+        }, () => {
+            if (this.props.onChange) {
+                this.props.onChange(empty, event);
+            }
+        });
+        return false;
+    };
+    _selectionIsEmpty() {
+        return (Array.isArray(this.state.selected) && !this.state.selected.length) ||
+            !this.state.selected;
+    }
+    _getLabel() {
+        return this.props.label ?? this.props.selectedLabel ?? 'Select an option';
+    }
+    _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;
+        }
+    }
+    _getIcons() {
+        const { selected } = this.state;
+        const { disabled, clear, hideArrow } = this.props;
+        const icons = [];
+        const height = this.props.height || this.context;
+        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;
+    }
+    _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;
+    filterRef = (el) => {
+        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) {
+        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.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,
+    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 const RerenderableSelect = rerenderHOC(Select);