@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/select/select.js

@@ -9,7 +9,7 @@ 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 InputLabel from '../input/input-label';
+import ControlLabel from '../control-label/control-label';
 import Shortcuts from '../shortcuts/shortcuts';
 import Button from '../button/button';
 import dataTests from '../global/data-tests';
@@ -17,6 +17,9 @@ 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';
@@ -29,7 +32,7 @@ function noop() { }
 /**
  * @enum {number}
  */
-var Type;
+export var Type;
 (function (Type) {
     Type["BUTTON"] = "BUTTON";
     Type["INPUT"] = "INPUT";
@@ -179,18 +182,19 @@ export default class Select extends Component {
     static defaultProps = {
         data: [],
         filter: false,
+        filterIcon: null,
+        filterRef: noop,
         multiple: false,
         clear: false,
         loading: false,
         disabled: false,
-        loadingMessage: 'Loading...',
-        notFoundMessage: 'No options found',
         type: Type.BUTTON,
         size: Size.M,
         targetElement: null,
         hideSelected: false,
         allowAny: false,
         hideArrow: false,
+        showPopup: false,
         maxHeight: 600,
         directions: [
             Popup.PopupProps.Directions.BOTTOM_RIGHT,
@@ -214,6 +218,7 @@ export default class Select extends Component {
         onKeyDown: noop,
         onSelect: noop,
         onDeselect: noop,
+        onOutsideClick: noop,
         onChange: noop,
         onAdd: noop,
         onDone: noop,
@@ -236,7 +241,7 @@ export default class Select extends Component {
             if (prevState.selected) {
                 Object.assign(nextState, {
                     selectedIndex: getSelectedIndex(prevState.selected, data),
-                    prevFilterValue: getValueForFilter(prevState.selected, type, filterValue)
+                    filterValue: getValueForFilter(prevState.selected, type, filterValue)
                 });
             }
         }
@@ -245,7 +250,7 @@ export default class Select extends Component {
             const selectedIndex = getSelectedIndex(selected, data || prevData);
             Object.assign(nextState, {
                 selected,
-                prevFilterValue: getValueForFilter(selected, type, filterValue)
+                filterValue: getValueForFilter(selected, type, filterValue)
             });
             if (!Array.isArray(prevSelected) || !Array.isArray(selected) ||
                 !isSameSelected(prevSelected, selected)) {
@@ -275,7 +280,7 @@ export default class Select extends Component {
             this.props.filter.value || '',
         shortcutsEnabled: false,
         popupShortcuts: false,
-        showPopup: false,
+        showPopup: this.props.showPopup,
         prevData: this.props.data,
         prevSelected: null,
         prevMultiple: this.props.multiple,
@@ -423,15 +428,19 @@ export default class Select extends Component {
         const anchorElement = this.props.targetElement || this.node;
         const { showPopup, shownData } = this.state;
         const _shownData = this._prependResetOption(shownData);
-        let message;
-        if (this.props.loading) {
-            message = this.props.loadingMessage;
-        }
-        else if (!shownData.length) {
-            message = this.props.notFoundMessage;
-        }
-        return (<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}/>);
+        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) {
@@ -439,7 +448,7 @@ export default class Select extends Component {
         }
         const shownData = this.getListItems(this.filterValue());
         this.setState({
-            showPopup: !!shownData.length || !this.props.allowAny,
+            showPopup: true,
             shownData
         });
     }
@@ -481,6 +490,9 @@ export default class Select extends Component {
         {hint && (<List.ListHint label={hint} data-test="ring-select-toolbar-hint"/>)}
       </div>);
     }
+    getTopbar() {
+        return this.props.renderTopToolbar?.();
+    }
     getLowerCaseLabel = getLowerCaseLabel;
     doesLabelMatch = doesLabelMatch;
     getFilterFn() {
@@ -576,8 +588,11 @@ export default class Select extends Component {
             selected.isResetItem) {
             return;
         }
+        const tryKeepOpen = this.props.tryKeepOpen ?? opts.tryKeepOpen;
         if (!this.props.multiple) {
-            this._hidePopup(isSelectItemEvent);
+            if (!tryKeepOpen) {
+                this._hidePopup(isSelectItemEvent);
+            }
             this.setState({
                 selected,
                 selectedIndex: this._getSelectedIndex(selected, this.props.data)
@@ -592,7 +607,6 @@ export default class Select extends Component {
             });
         }
         else {
-            const { tryKeepOpen } = opts;
             if (!tryKeepOpen) {
                 this._hidePopup(isSelectItemEvent);
             }
@@ -612,6 +626,7 @@ export default class Select extends Component {
                 }
                 this.props.onChange(nextSelection, event);
                 const nextState = {
+                    filterValue: '',
                     selected: nextSelection,
                     selectedIndex: this._getSelectedIndex(selected, this.props.data)
                 };
@@ -798,14 +813,14 @@ export default class Select extends Component {
             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={this.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 {...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} afterInput={this.props.type === Type.INPUT && iconsNode}/>
+                    : 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}`])}>
@@ -814,11 +829,12 @@ export default class Select extends Component {
         </>);
             case Type.BUTTON:
                 return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
-            {selectedLabel && (<InputLabel label={selectedLabel} disabled={this.props.disabled} htmlFor={this.props.id}/>)}
+            {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.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()}
@@ -876,6 +892,11 @@ Select.propTypes = {
     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,
@@ -888,6 +909,7 @@ Select.propTypes = {
     onBeforeOpen: PropTypes.func,
     onSelect: PropTypes.func,
     onDeselect: PropTypes.func,
+    onOutsideClick: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onKeyDown: PropTypes.func,
@@ -922,6 +944,8 @@ Select.propTypes = {
     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,

package/components/select/select__filter.d.ts

@@ -1,4 +1,4 @@
-import { Component, RefCallback } from 'react';
+import React, { Component, RefCallback } from 'react';
 import { InputAttrs } from '../input/input';
 declare function noop(): void;
 type SelectFilterProps = InputAttrs & {
@@ -7,7 +7,6 @@ type SelectFilterProps = InputAttrs & {
 };
 export default class SelectFilter extends Component<SelectFilterProps> {
     static defaultProps: {
-        placeholder: string;
         inputRef: typeof noop;
     };
     componentWillUnmount(): void;
@@ -15,6 +14,6 @@ export default class SelectFilter extends Component<SelectFilterProps> {
     blur(): void;
     input?: HTMLInputElement | HTMLTextAreaElement | null;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/components/select/select__filter.js

@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import Input from '../input/input';
 import sniffr from '../global/sniffer';
 import { ActiveItemContext } from '../list/list';
+import { I18nContext } from '../i18n/i18n-context';
 import styles from './select-popup.css';
 function noop() { }
 export default class SelectFilter extends Component {
     static defaultProps = {
-        placeholder: 'Filter items',
         inputRef: noop
     };
     componentWillUnmount() {
@@ -34,7 +34,9 @@ export default class SelectFilter extends Component {
         const { className, listId, ...restProps } = this.props;
         const classes = classNames(styles.filter, className);
         return (<ActiveItemContext.ValueContext.Consumer>
-        {activeItemId => (<Input {...restProps} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless inputRef={this.inputRef} className={classes}/>)}
+        {activeItemId => (<I18nContext.Consumer>
+            {({ translate }) => (<Input {...restProps} placeholder={restProps.placeholder ?? translate('filterItems')} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless inputRef={this.inputRef} className={classes}/>)}
+          </I18nContext.Consumer>)}
       </ActiveItemContext.ValueContext.Consumer>);
     }
 }

package/components/select/select__popup.d.ts

@@ -1,7 +1,8 @@
 /**
  * @description Displays a popup with select's options.
  */
-import React, { CSSProperties, PureComponent, ReactNode, SyntheticEvent } from 'react';
+import React, { ComponentType, CSSProperties, PureComponent, ReactNode, Ref, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 import Popup from '../popup/popup';
 import { Directions } from '../popup/position';
@@ -9,6 +10,7 @@ import List, { SelectHandlerParams } from '../list/list';
 import Caret from '../caret/caret';
 import { ListDataItem } from '../list/consts';
 import { ShortcutsMap } from '../shortcuts/core';
+import { TagAttrs } from '../tag/tag';
 import { SelectItem } from './select';
 export type FilterFn<T> = (itemToCheck: SelectItem<T>, checkString: string, data: readonly SelectItem<T>[]) => boolean;
 export interface Filter<T = unknown> {
@@ -33,12 +35,16 @@ export interface TagsReset {
 }
 export interface Tags {
     reset?: TagsReset | null | undefined;
+    customTagComponent?: (tag: TagAttrs) => ReactNode;
 }
 export interface SelectPopupProps<T = unknown> {
     data: readonly ListDataItem<T>[];
     activeIndex: number | null;
     toolbar: ReactNode;
+    topbar: ReactNode;
     filter: boolean | Filter<T>;
+    filterIcon?: string | ComponentType | null | undefined;
+    filterRef?: Ref<HTMLInputElement>;
     message: string | null;
     anchorElement: HTMLElement | null;
     maxHeight: number;
@@ -46,6 +52,7 @@ export interface SelectPopupProps<T = unknown> {
     loading: boolean;
     onSelect: (item: ListDataItem<T>, event: Event, params?: SelectHandlerParams) => void;
     onCloseAttempt: (e?: Event | SyntheticEvent, isEsc?: boolean | undefined) => void;
+    onOutsideClick: (e: PointerEvent) => void;
     onFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onLoadMore: () => void;
@@ -101,16 +108,49 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     onListSelect: (selected: ListDataItem<T>, event?: Event | SyntheticEvent, opts?: SelectHandlerParams) => void;
     tabPress: (event: Event) => void;
     onClickHandler: () => void | undefined;
-    getFilter(): JSX.Element | null;
+    getFilter(): React.JSX.Element | null;
     handleRemoveTag: (arg: ListDataItem<T>) => (event: SyntheticEvent) => void;
     handleTagClick: (arg: ListDataItem<T>) => () => void;
-    getTags(): false | JSX.Element;
-    getFilterWithTags(): JSX.Element | null;
-    getBottomLine(): "" | JSX.Element | null;
+    getCustomTag(tags: Tags | boolean | null): ((tag: Pick<Pick<import("../tag/tag").TagProps, keyof import("../tag/tag").TagProps> & Pick<PropTypes.InferProps<{
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        rgTagIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactComponentLike | null | undefined>>;
+        icon: PropTypes.Requireable<string>;
+        avatar: PropTypes.Requireable<string>;
+        rgTagTitle: PropTypes.Requireable<string>;
+        readOnly: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        focused: PropTypes.Requireable<boolean>;
+        angled: PropTypes.Requireable<boolean>;
+        backgroundColor: PropTypes.Requireable<string>;
+        textColor: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        render: PropTypes.Requireable<(...args: any[]) => any>;
+    }>, never> & Pick<import("../tag/tag").TagProps, never>, never> & {
+        className?: string | null | undefined;
+        children?: React.ReactNode;
+        onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
+        icon?: string | undefined;
+        disabled?: boolean | undefined;
+        avatar?: string | null | undefined;
+        readOnly?: boolean | undefined;
+        focused?: boolean | undefined;
+        render?: ((props: import("../tag/tag").TagRenderProps) => React.ReactNode) | undefined;
+        onRemove?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
+        rgTagIcon?: string | IconType | null | undefined;
+        rgTagTitle?: string | undefined;
+        angled?: boolean | null | undefined;
+        textColor?: string | undefined;
+        backgroundColor?: string | undefined;
+    } & {}) => React.ReactNode) | undefined;
+    getTags(): false | React.JSX.Element;
+    getFilterWithTags(): React.JSX.Element | null;
+    getBottomLine(): "" | React.JSX.Element | null;
     handleListResize: () => void;
-    getList(ringPopupTarget: string | Element | undefined): JSX.Element | null;
+    getList(ringPopupTarget: string | Element | undefined): React.JSX.Element | null;
     handleSelectAll: () => void;
-    getSelectAll: () => false | JSX.Element;
+    getSelectAll: () => false | React.JSX.Element;
     private _adjustListMaxHeight;
     popupRef: (el: Popup | null) => void;
     list?: List<T> | null;
@@ -121,6 +161,6 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
         tab: (event: Event) => void;
     };
     popupFilterShortcutsMap: ShortcutsMap;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type SelectPopupAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof SelectPopup, SelectPopupProps<T>>;

package/components/select/select__popup.js

@@ -22,6 +22,8 @@ import Shortcuts from '../shortcuts/shortcuts';
 import Button from '../button/button';
 import Text from '../text/text';
 import { ControlsHeight } from '../global/controls-height';
+import { refObject } from '../global/prop-types';
+import composeRefs from '../global/composeRefs';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts';
 import SelectFilter from './select__filter';
 import styles from './select-popup.css';
@@ -34,7 +36,10 @@ export default class SelectPopup extends PureComponent {
         data: [],
         activeIndex: null,
         toolbar: null,
+        topbar: null,
         filter: false,
+        filterIcon: null,
+        filterRef: noop,
         multiple: false,
         message: null,
         anchorElement: null,
@@ -43,6 +48,7 @@ export default class SelectPopup extends PureComponent {
         loading: false,
         onSelect: noop,
         onCloseAttempt: noop,
+        onOutsideClick: noop,
         onFilter: noop,
         onClear: noop,
         onLoadMore: noop,
@@ -75,7 +81,8 @@ export default class SelectPopup extends PureComponent {
     }
     caret;
     handleNavigation(event, navigateLeft) {
-        if (this.isEventTargetFilter(event) && this.caret != null && this.caret.getPosition() > 0 ||
+        if (this.isEventTargetFilter(event) && this.caret != null &&
+            Number(this.caret.getPosition()) > 0 ||
             !Array.isArray(this.props.selected)) {
             return;
         }
@@ -177,8 +184,8 @@ export default class SelectPopup extends PureComponent {
     getFilter() {
         if (this.props.filter || this.props.tags) {
             return (<div className={styles.filterWrapper} data-test="ring-select-popup-filter">
-          {!this.props.tags && (<Icon glyph={searchIcon} className={styles.filterIcon} data-test-custom="ring-select-popup-filter-icon"/>)}
-          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={this.filterRef} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object'
+          {!this.props.tags && (<Icon glyph={this.props.filterIcon ?? searchIcon} className={styles.filterIcon} data-test-custom="ring-select-popup-filter-icon"/>)}
+          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={composeRefs(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object'
                     ? this.props.filter.placeholder
                     : undefined} height={this.props.tags ? ControlsHeight.S : ControlsHeight.L} onChange={this.props.onFilter} onClick={this.onClickHandler} onClear={this.props.tags ? undefined : this.props.onClear} data-test-custom="ring-select-popup-filter-input" listId={this.props.listId} enableShortcuts={Object.keys(this.popupFilterShortcutsMap)}/>
         </div>);
@@ -193,9 +200,15 @@ export default class SelectPopup extends PureComponent {
             });
         }
     });
+    getCustomTag(tags) {
+        if (tags !== null && typeof tags !== 'boolean') {
+            return tags.customTagComponent;
+        }
+        return undefined;
+    }
     getTags() {
         return Array.isArray(this.props.selected) && (<div>
-        <TagsList tags={this.props.selected} activeIndex={this.state.tagsActiveIndex} handleRemove={this.handleRemoveTag} handleClick={this.handleTagClick} disabled={this.props.disabled}/>
+        <TagsList tags={this.props.selected} activeIndex={this.state.tagsActiveIndex} handleRemove={this.handleRemoveTag} handleClick={this.handleTagClick} disabled={this.props.disabled} customTagComponent={this.getCustomTag(this.props.tags)}/>
       </div>);
     }
     getFilterWithTags() {
@@ -278,7 +291,7 @@ export default class SelectPopup extends PureComponent {
         const anchorNode = this.props.anchorElement;
         const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
         return anchorNode != null
-            ? Math.min(directions.reduce((maxHeight, direction) => (Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : undefined) ?? 0)), minMaxHeight), userDefinedMaxHeight)
+            ? Math.min(directions.reduce((maxHeight, direction) => (Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null) ?? 0)), minMaxHeight), userDefinedMaxHeight)
             : userDefinedMaxHeight;
     });
     popupRef = (el) => {
@@ -312,7 +325,7 @@ export default class SelectPopup extends PureComponent {
         right: event => this.handleNavigation(event)
     };
     render() {
-        const { toolbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, directions, top, left, style, dir, filter } = this.props;
+        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, style, dir, filter } = this.props;
         const classes = classNames(styles.popup, className);
         return (<PopupTargetContext.Consumer>
         {ringPopupTarget => {
@@ -321,11 +334,12 @@ export default class SelectPopup extends PureComponent {
                     multiple.selectAll && this.getSelectAll();
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
-                const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} directions={directions} top={top} left={left} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
+                const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
+                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
               <div dir={dir}>
                 {!hidden && filter &&
                         (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
+                {topbar}
                 {/* Add empty div to prevent the change of List position in DOM*/}
                 {hidden ? <div /> : filterWithTags}
                 {selectAll}
@@ -354,6 +368,11 @@ SelectPopup.propTypes = {
             placeholder: PropTypes.string
         })]),
     filterValue: PropTypes.string,
+    filterIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+    filterRef: PropTypes.oneOfType([
+        PropTypes.func,
+        refObject(PropTypes.instanceOf(HTMLInputElement))
+    ]),
     hidden: PropTypes.bool,
     isInputMode: PropTypes.bool,
     listId: PropTypes.string,
@@ -369,6 +388,7 @@ SelectPopup.propTypes = {
     loading: PropTypes.bool,
     onClear: PropTypes.func,
     onCloseAttempt: PropTypes.func,
+    onOutsideClick: PropTypes.func,
     onEmptyPopupEnter: PropTypes.func,
     onFilter: PropTypes.func,
     onLoadMore: PropTypes.func,
@@ -380,5 +400,6 @@ SelectPopup.propTypes = {
     style: PropTypes.object,
     tags: PropTypes.object,
     toolbar: PropTypes.node,
+    topbar: PropTypes.node,
     top: PropTypes.number
 };

package/components/shortcuts/shortcuts-hoc.d.ts

@@ -11,7 +11,7 @@ export interface ShortcutsHOCProps {
 export default function shortcutsHOC<P extends {}>(ComposedComponent: ComponentType<P> | string): {
     new (props: (P & ShortcutsHOCProps) | Readonly<P & ShortcutsHOCProps>): {
         _shortcutsScopeUid: string;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -35,7 +35,7 @@ export default function shortcutsHOC<P extends {}>(ComposedComponent: ComponentT
     };
     new (props: P & ShortcutsHOCProps, context: any): {
         _shortcutsScopeUid: string;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/components/shortcuts/shortcuts.d.ts

@@ -24,5 +24,5 @@ export default class Shortcuts extends PureComponent<ShortcutsProps> {
     componentWillUnmount(): void;
     turnShorcutsOn(): void;
     turnShorcutsOff(): void;
-    render(): string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | null;
+    render(): string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null;
 }

package/components/tab-trap/tab-trap.d.ts

@@ -39,5 +39,5 @@ export default class TabTrap extends Component<TabTrapProps> {
     handleBlurIfWithoutFocus: (event: React.FocusEvent) => void;
     trapButtonNode?: HTMLElement | null;
     trapButtonRef: (node: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/table/cell.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, TdHTMLAttributes } from 'react';
+import React, { PureComponent, TdHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface CellProps extends TdHTMLAttributes<HTMLTableDataCellElement> {
     'data-test'?: string | null | undefined;
@@ -9,5 +9,5 @@ export default class Cell extends PureComponent<CellProps> {
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/table/disable-hover-hoc.d.ts

@@ -12,7 +12,7 @@ export default function disableHoverHOC<P extends DisableHoverAddProps>(Composed
         componentWillUnmount(): void;
         onMouseMove: () => void;
         onKeyDown: (e: KeyboardEvent) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -39,7 +39,7 @@ export default function disableHoverHOC<P extends DisableHoverAddProps>(Composed
         componentWillUnmount(): void;
         onMouseMove: () => void;
         onKeyDown: (e: KeyboardEvent) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/components/table/header-cell.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactNode, SyntheticEvent, ThHTMLAttributes } from 'react';
+import React, { PureComponent, ReactNode, SyntheticEvent, ThHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface Column<T = never> {
     id: string;
@@ -39,5 +39,5 @@ export default class HeaderCell extends PureComponent<HeaderCellProps> {
     sorted?: boolean;
     onClick: () => void;
     onChildrenClick(e: SyntheticEvent): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/table/header.d.ts

@@ -1,6 +1,5 @@
-import { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
+import React, { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
-import { Waypoint } from 'react-waypoint';
 import { Column, SortParams } from './header-cell';
 export interface HeaderProps {
     columns: readonly Column[];
@@ -49,19 +48,9 @@ export default class Header extends PureComponent<HeaderProps> {
         sortKey: string;
         sortOrder: boolean;
     };
-    state: {
-        fixed: boolean;
-        headerWidth: undefined;
-        widths: never[];
-    };
     id: string;
     onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
-    private _columnsRowNode?;
-    storeColumnsRowNode: (node: HTMLElement | null) => void;
-    onScrollIn: () => void;
-    onScrollOut: ({ currentPosition }: Waypoint.CallbackArgs) => void;
-    calculateColumnsWidths(columnsRowNode: HTMLElement | null | undefined): void;
-    createCells(widths?: never[]): JSX.Element[];
-    render(): JSX.Element;
+    createCells(widths?: never[]): React.JSX.Element[];
+    render(): React.JSX.Element;
 }
 export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;