@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/select/select__filter.d.ts

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

package/components/select/select__filter.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+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 = {
+        inputRef: noop
+    };
+    componentWillUnmount() {
+        this.blur();
+    }
+    focus() {
+        const { input } = this;
+        if (input && input !== document.activeElement) {
+            sniffr.browser.name === 'firefox' ? input.select() : input.focus();
+        }
+    }
+    blur() {
+        if (this.input && this.input === document.activeElement) {
+            this.input.blur();
+        }
+    }
+    input;
+    inputRef = (el) => {
+        this.input = el;
+        this.props.inputRef(el);
+    };
+    render() {
+        const { className, listId, ...restProps } = this.props;
+        const classes = classNames(styles.filter, className);
+        return (<ActiveItemContext.ValueContext.Consumer>
+        {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>);
+    }
+}
+SelectFilter.propTypes = {
+    placeholder: PropTypes.string,
+    className: PropTypes.string,
+    inputRef: PropTypes.func,
+    listId: PropTypes.string,
+    activeItemId: PropTypes.string
+};

package/components/select/select__popup.d.ts

@@ -0,0 +1,166 @@
+/**
+ * @description Displays a popup with select's options.
+ */
+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';
+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> {
+    fn?: FilterFn<T> | null | undefined;
+    fuzzy?: boolean | null | undefined;
+    value?: string | null | undefined;
+    placeholder?: string | undefined;
+}
+export interface Multiple {
+    label?: string | null | undefined;
+    limit?: number | null | undefined;
+    selectAll?: boolean | null | undefined;
+    renderSelectedItemsDescription?: (selectedItems: SelectItem[], total: number) => ReactNode;
+    selectAllLabel?: string;
+    deselectAllLabel?: string;
+    removeSelectedItems?: boolean | null | undefined;
+}
+export interface TagsReset {
+    separator?: boolean | null | undefined;
+    label?: string | number | null | undefined;
+    glyph?: IconType | string | null | undefined;
+}
+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;
+    minWidth: number;
+    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;
+    ringPopupTarget: string | null;
+    onSelectAll: (isSelectAll: boolean) => void;
+    onEmptyPopupEnter: (e: KeyboardEvent) => void;
+    className?: string | null | undefined;
+    compact?: boolean | null | undefined;
+    dir?: 'ltr' | 'rtl' | undefined;
+    directions?: readonly Directions[] | undefined;
+    disabled?: boolean | undefined;
+    disableMoveOverflow?: boolean | null | undefined;
+    disableScrollToActive?: boolean | null | undefined;
+    filterValue?: string | undefined;
+    hidden?: boolean | null | undefined;
+    isInputMode?: boolean | undefined;
+    listId?: string | undefined;
+    left?: number | undefined;
+    renderOptimization?: boolean | undefined;
+    style?: CSSProperties | undefined;
+    top?: number | undefined;
+    multiple: boolean | Multiple;
+    selected: ListDataItem<T> | readonly ListDataItem<T>[] | null;
+    tags: Tags | boolean | null;
+}
+export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupProps<T>> {
+    static defaultProps: SelectPopupProps;
+    state: {
+        popupFilterShortcutsOptions: {
+            modal: boolean;
+            disabled: boolean;
+        };
+        tagsActiveIndex: null;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    isClickingPopup: boolean;
+    filter?: HTMLInputElement | null;
+    focusFilter(): void;
+    isEventTargetFilter(event: Event): boolean;
+    caret?: Caret | null;
+    handleNavigation(event: Event, navigateLeft?: boolean): void;
+    removeTag(tag?: ListDataItem<T>, event?: SyntheticEvent): void;
+    removeSelectedTag(): boolean;
+    handleBackspace(event: Event): boolean;
+    onFilterFocus: () => void;
+    popupFilterOnBlur: () => void;
+    private _togglePopupFilterShortcuts;
+    mouseDownHandler: () => void;
+    mouseUpHandler: () => void;
+    popup?: Popup | null;
+    isVisible(): boolean | null | undefined;
+    onListSelect: (selected: ListDataItem<T>, event?: Event | SyntheticEvent, opts?: SelectHandlerParams) => void;
+    tabPress: (event: Event) => void;
+    onClickHandler: () => void | undefined;
+    getFilter(): React.JSX.Element | null;
+    handleRemoveTag: (arg: ListDataItem<T>) => (event: SyntheticEvent) => void;
+    handleTagClick: (arg: ListDataItem<T>) => () => void;
+    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): React.JSX.Element | null;
+    handleSelectAll: () => void;
+    getSelectAll: () => false | React.JSX.Element;
+    private _adjustListMaxHeight;
+    popupRef: (el: Popup | null) => void;
+    list?: List<T> | null;
+    listRef: (el: List<T> | null) => void;
+    filterRef: (el: HTMLInputElement | null) => void;
+    shortcutsScope: string;
+    shortcutsMap: {
+        tab: (event: Event) => void;
+    };
+    popupFilterShortcutsMap: ShortcutsMap;
+    render(): React.JSX.Element;
+}
+export type SelectPopupAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof SelectPopup, SelectPopupProps<T>>;

package/components/select/select__popup.js

@@ -0,0 +1,408 @@
+/**
+ * @description Displays a popup with select's options.
+ */
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import searchIcon from '@jetbrains/icons/search';
+import memoizeOne from 'memoize-one';
+import PropTypes from 'prop-types';
+import Icon from '../icon/icon';
+import Popup, { getPopupContainer } from '../popup/popup';
+import { maxHeightForDirection } from '../popup/position';
+import { PopupTargetContext } from '../popup/popup.target';
+import List from '../list/list';
+import LoaderInline from '../loader-inline/loader-inline';
+import shortcutsHOC from '../shortcuts/shortcuts-hoc';
+import { getStyles } from '../global/dom';
+import getUID from '../global/get-uid';
+import memoize from '../global/memoize';
+import TagsList from '../tags-list/tags-list';
+import Caret from '../caret/caret';
+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';
+const FILTER_HEIGHT = 35;
+const TOOLBAR_HEIGHT = 49;
+function noop() { }
+const FilterWithShortcuts = shortcutsHOC(SelectFilter);
+export default class SelectPopup extends PureComponent {
+    static defaultProps = {
+        data: [],
+        activeIndex: null,
+        toolbar: null,
+        topbar: null,
+        filter: false,
+        filterIcon: null,
+        filterRef: noop,
+        multiple: false,
+        message: null,
+        anchorElement: null,
+        maxHeight: 600,
+        minWidth: 240,
+        loading: false,
+        onSelect: noop,
+        onCloseAttempt: noop,
+        onOutsideClick: noop,
+        onFilter: noop,
+        onClear: noop,
+        onLoadMore: noop,
+        selected: [],
+        tags: null,
+        ringPopupTarget: null,
+        onSelectAll: noop,
+        onEmptyPopupEnter: noop
+    };
+    state = {
+        popupFilterShortcutsOptions: {
+            modal: true,
+            disabled: true
+        },
+        tagsActiveIndex: null
+    };
+    componentDidMount() {
+        window.document.addEventListener('mouseup', this.mouseUpHandler);
+    }
+    componentWillUnmount() {
+        window.document.removeEventListener('mouseup', this.mouseUpHandler);
+    }
+    isClickingPopup = false; // This flag is set to true while an item in the popup is being clicked
+    filter;
+    focusFilter() {
+        setTimeout(() => this.filter?.focus());
+    }
+    isEventTargetFilter(event) {
+        return event.target instanceof Element && event.target.matches('input,textarea');
+    }
+    caret;
+    handleNavigation(event, navigateLeft) {
+        if (this.isEventTargetFilter(event) && this.caret != null &&
+            Number(this.caret.getPosition()) > 0 ||
+            !Array.isArray(this.props.selected)) {
+            return;
+        }
+        let newIndex = null;
+        if (navigateLeft) {
+            newIndex = this.state.tagsActiveIndex === null
+                ? this.props.selected.length - 1
+                : this.state.tagsActiveIndex - 1;
+        }
+        else if (this.state.tagsActiveIndex !== null) {
+            newIndex = this.state.tagsActiveIndex + 1;
+        }
+        if (newIndex !== null && (newIndex >= this.props.selected.length || newIndex < 0)) {
+            newIndex = null;
+            this.focusFilter();
+        }
+        this.setState({
+            tagsActiveIndex: newIndex
+        });
+    }
+    removeTag(tag, event) {
+        if (!Array.isArray(this.props.selected)) {
+            return;
+        }
+        const _tag = tag || this.props.selected.slice(0)[this.props.selected.length - 1];
+        if (_tag) {
+            this.onListSelect(_tag, event, { tryKeepOpen: true });
+            this.setState({
+                tagsActiveIndex: null
+            });
+            this.focusFilter();
+        }
+    }
+    removeSelectedTag() {
+        if (Array.isArray(this.props.selected) && this.state.tagsActiveIndex != null) {
+            this.removeTag(this.props.selected[this.state.tagsActiveIndex]);
+            return false;
+        }
+        return true;
+    }
+    handleBackspace(event) {
+        if (!this.props.tags) {
+            return true;
+        }
+        if (!this.isEventTargetFilter(event)) {
+            this.removeSelectedTag();
+            return false;
+        }
+        if ((event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) &&
+            !event.target.value) {
+            this.removeTag();
+            return false;
+        }
+        return true;
+    }
+    onFilterFocus = () => {
+        this._togglePopupFilterShortcuts(false);
+        this.setState({ tagsActiveIndex: null });
+    };
+    popupFilterOnBlur = () => {
+        if (this.state.tagsActiveIndex === null) {
+            this._togglePopupFilterShortcuts(true);
+        }
+    };
+    _togglePopupFilterShortcuts(shortcutsDisabled) {
+        this.setState({
+            popupFilterShortcutsOptions: {
+                modal: true,
+                disabled: shortcutsDisabled
+            }
+        });
+    }
+    mouseDownHandler = () => {
+        this.isClickingPopup = true;
+    };
+    mouseUpHandler = () => {
+        this.isClickingPopup = false;
+    };
+    popup;
+    isVisible() {
+        return this.popup && this.popup.isVisible();
+    }
+    onListSelect = (selected, event, opts) => {
+        const getSelectItemEvent = () => {
+            const customEvent = document.createEvent('Event');
+            customEvent.initEvent('select', true, false);
+            if (event && 'persist' in event) {
+                event.persist();
+            }
+            customEvent.originalEvent = event;
+            return customEvent;
+        };
+        this.props.onSelect(selected, getSelectItemEvent(), opts);
+    };
+    tabPress = (event) => {
+        this.props.onCloseAttempt(event, true);
+    };
+    onClickHandler = () => this.filter?.focus();
+    getFilter() {
+        if (this.props.filter || this.props.tags) {
+            return (<div className={styles.filterWrapper} data-test="ring-select-popup-filter">
+          {!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>);
+        }
+        return null;
+    }
+    handleRemoveTag = memoize((tag) => (event) => this.removeTag(tag, event));
+    handleTagClick = memoize((tag) => () => {
+        if (Array.isArray(this.props.selected)) {
+            this.setState({
+                tagsActiveIndex: this.props.selected.indexOf(tag)
+            });
+        }
+    });
+    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} customTagComponent={this.getCustomTag(this.props.tags)}/>
+      </div>);
+    }
+    getFilterWithTags() {
+        if (this.props.tags) {
+            const classes = classNames([
+                styles.filterWithTags,
+                {
+                    [styles.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
+                }
+            ]);
+            return (<div className={classes}>
+          {this.getTags()}
+          {this.getFilter()}
+        </div>);
+        }
+        return this.getFilter();
+    }
+    getBottomLine() {
+        const { loading, message, data } = this.props;
+        const hasMoreThanOneItem = data.length > 1;
+        return (loading || message) && (<div className={classNames(styles.bottomLine, {
+                [styles.bottomLineOverItem]: hasMoreThanOneItem
+            })}>
+        {loading && <LoaderInline />}
+
+        {message && (<div className={styles.message}>{message}</div>)}
+      </div>);
+    }
+    handleListResize = () => {
+        this.forceUpdate();
+    };
+    getList(ringPopupTarget) {
+        if (this.props.data.length) {
+            let { maxHeight } = this.props;
+            if (this.props.anchorElement) {
+                maxHeight = this._adjustListMaxHeight(this.props.hidden, maxHeight, ringPopupTarget);
+            }
+            if (this.props.filter) {
+                maxHeight -= FILTER_HEIGHT;
+            }
+            if (this.props.toolbar) {
+                maxHeight -= TOOLBAR_HEIGHT;
+            }
+            return (<List id={this.props.listId} maxHeight={maxHeight} data={this.props.data} activeIndex={this.props.activeIndex} ref={this.listRef} restoreActiveIndex activateFirstItem onSelect={this.onListSelect} onResize={this.handleListResize} onScrollToBottom={this.props.onLoadMore} hidden={this.props.hidden} shortcuts={!this.props.hidden} disableMoveOverflow={this.props.disableMoveOverflow} disableMoveDownOverflow={this.props.loading} disableScrollToActive={this.props.disableScrollToActive} compact={this.props.compact} renderOptimization={this.props.renderOptimization}/>);
+        }
+        return null;
+    }
+    handleSelectAll = () => {
+        if (Array.isArray(this.props.selected)) {
+            this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length);
+        }
+    };
+    getSelectAll = () => {
+        const multiple = this.props.multiple;
+        const activeFilters = this.props.data.filter(item => !item.disabled);
+        return Array.isArray(this.props.selected) && (<div className={styles.selectAll}>
+        {activeFilters.length === 0
+                ? (<span />)
+                : (<Button text inline onClick={this.handleSelectAll}>
+                {activeFilters.length !== this.props.selected.length
+                        ? multiple.selectAllLabel || 'Select all'
+                        : multiple.deselectAllLabel || 'Deselect all'}
+              </Button>)}
+        {multiple.renderSelectedItemsDescription?.(this.props.selected, activeFilters.length) || (<Text info>{`${this.props.selected.length} selected`}</Text>)}
+      </div>);
+    };
+    // Cache the value because this method is called
+    // inside `render` function which can be called N times
+    // and should be fast as possible.
+    // Cache invalidates each time hidden or userDefinedMaxHeight changes
+    _adjustListMaxHeight = memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {
+        if (hidden) {
+            return userDefinedMaxHeight;
+        }
+        // Calculate list's maximum height that can't
+        // get beyond the screen
+        // @see RG-1838, JT-48358
+        const minMaxHeight = 100;
+        const directions = this.props.directions || DEFAULT_DIRECTIONS;
+        // Note:
+        // Create a method which'll be called only when the popup opens and before
+        // render the list would be a better way
+        const anchorNode = this.props.anchorElement;
+        const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
+        return anchorNode != null
+            ? Math.min(directions.reduce((maxHeight, direction) => (Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null) ?? 0)), minMaxHeight), userDefinedMaxHeight)
+            : userDefinedMaxHeight;
+    });
+    popupRef = (el) => {
+        this.popup = el;
+    };
+    list;
+    listRef = (el) => {
+        this.list = el;
+    };
+    filterRef = (el) => {
+        this.filter = el;
+        this.caret = el && new Caret(el);
+    };
+    shortcutsScope = getUID('select-popup-');
+    shortcutsMap = {
+        tab: this.tabPress
+    };
+    popupFilterShortcutsMap = {
+        up: event => (this.list && this.list.upHandler(event)),
+        down: event => (this.list && this.list.downHandler(event)),
+        home: event => (this.list && this.list.homeHandler(event)),
+        end: event => (this.list && this.list.endHandler(event)),
+        enter: event => (this.list
+            ? this.list.enterHandler(event)
+            : this.props.onEmptyPopupEnter(event)),
+        esc: event => this.props.onCloseAttempt(event, true),
+        tab: event => this.tabPress(event),
+        backspace: event => this.handleBackspace(event),
+        del: () => this.removeSelectedTag(),
+        left: event => this.handleNavigation(event, true),
+        right: event => this.handleNavigation(event)
+    };
+    render() {
+        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 => {
+                const filterWithTags = this.getFilterWithTags();
+                const selectAll = multiple && typeof multiple === 'object' && !multiple.limit &&
+                    multiple.selectAll && this.getSelectAll();
+                const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
+                const bottomLine = this.getBottomLine();
+                const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || 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}
+                {list}
+                {bottomLine}
+                {toolbar}
+              </div>
+            </Popup>);
+            }}
+      </PopupTargetContext.Consumer>);
+    }
+}
+SelectPopup.propTypes = {
+    activeIndex: PropTypes.number,
+    anchorElement: PropTypes.instanceOf(HTMLElement),
+    className: PropTypes.string,
+    compact: PropTypes.bool,
+    data: PropTypes.array,
+    dir: PropTypes.oneOf(['ltr', 'rtl']),
+    directions: PropTypes.array,
+    disabled: PropTypes.bool,
+    disableMoveOverflow: PropTypes.bool,
+    disableScrollToActive: PropTypes.bool,
+    filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+            value: PropTypes.string,
+            placeholder: PropTypes.string
+        })]),
+    filterValue: PropTypes.string,
+    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,
+    maxHeight: PropTypes.number,
+    message: PropTypes.string,
+    minWidth: PropTypes.number,
+    multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+            label: PropTypes.string,
+            limit: PropTypes.number,
+            selectAll: PropTypes.bool
+        })]),
+    left: PropTypes.number,
+    loading: PropTypes.bool,
+    onClear: PropTypes.func,
+    onCloseAttempt: PropTypes.func,
+    onOutsideClick: PropTypes.func,
+    onEmptyPopupEnter: PropTypes.func,
+    onFilter: PropTypes.func,
+    onLoadMore: PropTypes.func,
+    onSelect: PropTypes.func,
+    onSelectAll: PropTypes.func,
+    renderOptimization: PropTypes.bool,
+    ringPopupTarget: PropTypes.string,
+    selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    style: PropTypes.object,
+    tags: PropTypes.object,
+    toolbar: PropTypes.node,
+    topbar: PropTypes.node,
+    top: PropTypes.number
+};