@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/dist/select/select__filter.d.ts

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

package/dist/select/select__filter.js

@@ -5,9 +5,10 @@ import 'classnames';
 import '../input/input.js';
 import '../global/sniffer.js';
 import '../list/list.js';
+import '../global/controls-height.js';
 export { S as default } from '../_helpers/select__filter.js';
 import '@jetbrains/icons/close';
-import '../global/theme.js';
+import '../global/prop-types.js';
 import '../button/button.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
@@ -20,6 +21,7 @@ import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import 'sniffr';
 import 'react-virtualized/dist/es/List';

package/dist/select/select__popup.d.ts

@@ -0,0 +1,123 @@
+/**
+ * @description Displays a popup with select's options.
+ */
+import React, { CSSProperties, PureComponent, ReactNode, SyntheticEvent } from 'react';
+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 { SelectItem } from './select';
+export declare 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;
+    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;
+}
+export interface SelectPopupProps<T = unknown> {
+    data: readonly ListDataItem<T>[];
+    activeIndex: number | null;
+    toolbar: ReactNode;
+    filter: boolean | Filter<T>;
+    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;
+    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 | React.SyntheticEvent<Element, Event> | undefined, opts?: SelectHandlerParams | undefined) => void;
+    tabPress: (event: Event) => void;
+    onClickHandler: () => void | undefined;
+    getFilter(): 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;
+    handleListResize: () => void;
+    getList(ringPopupTarget: string | undefined): JSX.Element | null;
+    handleSelectAll: () => void;
+    getSelectAll: () => false | 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(): JSX.Element;
+}
+export declare type SelectPopupAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof SelectPopup, SelectPopupProps<T>>;

package/dist/select/select__popup.js

@@ -17,7 +17,7 @@ import memoize from '../global/memoize.js';
 import TagsList from '../tags-list/tags-list.js';
 import Caret from '../caret/caret.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
-import Button from '../button/button.js';
+import { Button } from '../button/button.js';
 import Text from '../text/text.js';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts.js';
 import { S as SelectFilter, m as modules_b607bec2 } from '../_helpers/select__filter.js';
@@ -58,21 +58,17 @@ import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
-import '../global/theme.js';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
+import '../_helpers/loader-inline.js';
 import '../tag/tag.js';
 import '@jetbrains/icons/close';
 import '@jetbrains/icons/chevron-10px';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../input/input.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 
-const INPUT_MARGIN_COMPENSATION = -14;
 const FILTER_HEIGHT = 35;
 const TOOLBAR_HEIGHT = 49;
 
@@ -93,6 +89,10 @@ class SelectPopup extends PureComponent {
 
     _defineProperty(this, "isClickingPopup", false);
 
+    _defineProperty(this, "filter", void 0);
+
+    _defineProperty(this, "caret", void 0);
+
     _defineProperty(this, "onFilterFocus", () => {
       this._togglePopupFilterShortcuts(false);
 
@@ -115,16 +115,14 @@ class SelectPopup extends PureComponent {
       this.isClickingPopup = false;
     });
 
+    _defineProperty(this, "popup", void 0);
+
     _defineProperty(this, "onListSelect", (selected, event, opts) => {
       const getSelectItemEvent = () => {
-        let customEvent;
-
-        if (document.createEvent) {
-          customEvent = document.createEvent('Event');
-          customEvent.initEvent('select', true, false);
-        }
+        const customEvent = document.createEvent('Event');
+        customEvent.initEvent('select', true, false);
 
-        if (event && event.persist) {
+        if (event && 'persist' in event) {
           event.persist();
         }
 
@@ -139,25 +137,35 @@ class SelectPopup extends PureComponent {
       this.props.onCloseAttempt(event, true);
     });
 
-    _defineProperty(this, "onClickHandler", () => this.filter.focus());
+    _defineProperty(this, "onClickHandler", () => {
+      var _this$filter;
+
+      return (_this$filter = this.filter) === null || _this$filter === void 0 ? void 0 : _this$filter.focus();
+    });
 
     _defineProperty(this, "handleRemoveTag", memoize(tag => event => this.removeTag(tag, event)));
 
     _defineProperty(this, "handleTagClick", memoize(tag => () => {
-      this.setState({
-        tagsActiveIndex: this.props.selected.indexOf(tag)
-      });
+      if (Array.isArray(this.props.selected)) {
+        this.setState({
+          tagsActiveIndex: this.props.selected.indexOf(tag)
+        });
+      }
     }));
 
     _defineProperty(this, "handleListResize", () => {
       this.forceUpdate();
     });
 
-    _defineProperty(this, "handleSelectAll", () => this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length));
+    _defineProperty(this, "handleSelectAll", () => {
+      if (Array.isArray(this.props.selected)) {
+        this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length);
+      }
+    });
 
     _defineProperty(this, "getSelectAll", () => {
       const activeFilters = this.props.data.filter(item => !item.disabled);
-      return /*#__PURE__*/React.createElement("div", {
+      return Array.isArray(this.props.selected) && /*#__PURE__*/React.createElement("div", {
         className: modules_b607bec2.selectAll
       }, activeFilters.length === 0 ? /*#__PURE__*/React.createElement("span", null) : /*#__PURE__*/React.createElement(Button, {
         text: true,
@@ -183,20 +191,26 @@ class SelectPopup extends PureComponent {
 
       const anchorNode = this.props.anchorElement;
       const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
-      return Math.min(directions.reduce((maxHeight, direction) => Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)), minMaxHeight), userDefinedMaxHeight);
+      return anchorNode != null ? Math.min(directions.reduce((maxHeight, direction) => {
+        var _maxHeightForDirectio;
+
+        return Math.max(maxHeight, (_maxHeightForDirectio = maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)) !== null && _maxHeightForDirectio !== void 0 ? _maxHeightForDirectio : 0);
+      }, minMaxHeight), userDefinedMaxHeight) : userDefinedMaxHeight;
     }));
 
     _defineProperty(this, "popupRef", el => {
       this.popup = el;
     });
 
+    _defineProperty(this, "list", void 0);
+
     _defineProperty(this, "listRef", el => {
       this.list = el;
     });
 
     _defineProperty(this, "filterRef", el => {
       this.filter = el;
-      this.caret = new Caret(this.filter);
+      this.caret = el && new Caret(el);
     });
 
     _defineProperty(this, "shortcutsScope", getUID('select-popup-'));
@@ -205,20 +219,18 @@ class SelectPopup extends PureComponent {
       tab: this.tabPress
     });
 
-    _defineProperty(this, "popupFilterShortcuts", {
-      map: {
-        up: event => this.list && this.list.upHandler(event),
-        down: event => this.list && this.list.downHandler(event),
-        home: event => this.list && this.list.homeHandler(event),
-        end: event => this.list && this.list.endHandler(event),
-        enter: event => this.list ? this.list.enterHandler(event) : this.props.onEmptyPopupEnter(event),
-        esc: event => this.props.onCloseAttempt(event, true),
-        tab: event => this.tabPress(event),
-        backspace: event => this.handleBackspace(event),
-        del: () => this.removeSelectedTag(),
-        left: () => this.handleNavigation(true),
-        right: () => this.handleNavigation()
-      }
+    _defineProperty(this, "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)
     });
   }
 
@@ -230,17 +242,20 @@ class SelectPopup extends PureComponent {
     window.document.removeEventListener('mouseup', this.mouseUpHandler);
   }
 
-  // This flag is set to true while an item in the popup is being clicked
   focusFilter() {
-    setTimeout(() => this.filter.focus());
+    setTimeout(() => {
+      var _this$filter2;
+
+      return (_this$filter2 = this.filter) === null || _this$filter2 === void 0 ? void 0 : _this$filter2.focus();
+    });
   }
 
   isEventTargetFilter(event) {
-    return event.target && event.target.matches('input,textarea');
+    return event.target instanceof Element && event.target.matches('input,textarea');
   }
 
-  handleNavigation(navigateLeft) {
-    if (this.isEventTargetFilter(event) && this.caret.getPosition() > 0) {
+  handleNavigation(event, navigateLeft) {
+    if (this.isEventTargetFilter(event) && this.caret != null && this.caret.getPosition() > 0 || !Array.isArray(this.props.selected)) {
       return;
     }
 
@@ -263,6 +278,10 @@ class SelectPopup extends PureComponent {
   }
 
   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) {
@@ -277,7 +296,7 @@ class SelectPopup extends PureComponent {
   }
 
   removeSelectedTag() {
-    if (this.state.tagsActiveIndex != null) {
+    if (Array.isArray(this.props.selected) && this.state.tagsActiveIndex != null) {
       this.removeTag(this.props.selected[this.state.tagsActiveIndex]);
       return false;
     }
@@ -295,7 +314,7 @@ class SelectPopup extends PureComponent {
       return false;
     }
 
-    if (!event.target.value) {
+    if ((event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) && !event.target.value) {
       this.removeTag();
       return false;
     }
@@ -327,19 +346,19 @@ class SelectPopup extends PureComponent {
         "data-test-custom": "ring-select-popup-filter-icon"
       }), /*#__PURE__*/React.createElement(FilterWithShortcuts, {
         rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
-        rgShortcutsMap: this.popupFilterShortcuts.map,
+        rgShortcutsMap: this.popupFilterShortcutsMap,
         value: this.props.filterValue,
         inputRef: this.filterRef,
         onBlur: this.popupFilterOnBlur,
         onFocus: this.onFilterFocus,
         className: "ring-js-shortcuts",
-        placeholder: this.props.filter.placeholder,
+        placeholder: typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined,
         onChange: this.props.onFilter,
         onClick: this.onClickHandler,
         onClear: this.props.onClear,
         "data-test-custom": "ring-select-popup-filter-input",
         listId: this.props.listId,
-        enableShortcuts: Object.keys(this.popupFilterShortcuts.map)
+        enableShortcuts: Object.keys(this.popupFilterShortcutsMap)
       }));
     }
 
@@ -347,7 +366,7 @@ class SelectPopup extends PureComponent {
   }
 
   getTags() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TagsList, {
+    return Array.isArray(this.props.selected) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TagsList, {
       tags: this.props.selected,
       activeIndex: this.state.tagsActiveIndex,
       handleRemove: this.handleRemoveTag,
@@ -443,7 +462,7 @@ class SelectPopup extends PureComponent {
     const classes = classNames(modules_b607bec2.popup, className);
     return /*#__PURE__*/React.createElement(PopupTargetContext.Consumer, null, ringPopupTarget => {
       const filterWithTags = this.getFilterWithTags();
-      const selectAll = multiple && !multiple.limit && multiple.selectAll && this.getSelectAll();
+      const 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;
@@ -458,7 +477,7 @@ class SelectPopup extends PureComponent {
         minWidth: minWidth,
         onCloseAttempt: onCloseAttempt,
         directions: directions,
-        top: top || (isInputMode ? INPUT_MARGIN_COMPENSATION : null),
+        top: top,
         left: left,
         onMouseDown: this.mouseDownHandler,
         target: this.props.ringPopupTarget,
@@ -475,7 +494,30 @@ class SelectPopup extends PureComponent {
 
 }
 
-_defineProperty(SelectPopup, "propTypes", {
+_defineProperty(SelectPopup, "defaultProps", {
+  data: [],
+  activeIndex: null,
+  toolbar: null,
+  filter: false,
+  multiple: false,
+  message: null,
+  anchorElement: null,
+  maxHeight: 600,
+  minWidth: 240,
+  loading: false,
+  onSelect: noop,
+  onCloseAttempt: noop,
+  onFilter: noop,
+  onClear: noop,
+  onLoadMore: noop,
+  selected: [],
+  tags: null,
+  ringPopupTarget: null,
+  onSelectAll: noop,
+  onEmptyPopupEnter: noop
+});
+
+SelectPopup.propTypes = {
   activeIndex: PropTypes.number,
   anchorElement: PropTypes.instanceOf(HTMLElement),
   className: PropTypes.string,
@@ -502,7 +544,7 @@ _defineProperty(SelectPopup, "propTypes", {
     limit: PropTypes.number,
     selectAll: PropTypes.bool
   })]),
-  left: PropTypes.bool,
+  left: PropTypes.number,
   loading: PropTypes.bool,
   onClear: PropTypes.func,
   onCloseAttempt: PropTypes.func,
@@ -518,29 +560,6 @@ _defineProperty(SelectPopup, "propTypes", {
   tags: PropTypes.object,
   toolbar: PropTypes.node,
   top: PropTypes.number
-});
-
-_defineProperty(SelectPopup, "defaultProps", {
-  data: [],
-  activeIndex: null,
-  toolbar: null,
-  filter: false,
-  multiple: false,
-  message: null,
-  anchorElement: null,
-  maxHeight: 600,
-  minWidth: 240,
-  loading: false,
-  onSelect: noop,
-  onCloseAttempt: noop,
-  onFilter: noop,
-  onClear: noop,
-  onLoadMore: noop,
-  selected: [],
-  tags: null,
-  ringPopupTarget: null,
-  onSelectAll: noop,
-  onEmptyPopupEnter: noop
-});
+};
 
 export { SelectPopup as default };

package/dist/select-ng/select-ng.js

@@ -4,17 +4,20 @@ import { unmountComponentAtNode, render } from 'react-dom';
 import getEventKey from '../global/get-event-key.js';
 import Select, { RerenderableSelect } from '../select/select.js';
 import MessageBundle from '../message-bundle-ng/message-bundle-ng.js';
+import { ControlsHeight } from '../global/controls-height.js';
 import SelectNgOptions from './select-ng__options.js';
 import SelectLazy from './select-ng__lazy.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'classnames';
 import 'prop-types';
-import '@jetbrains/icons/chevron-10px';
+import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
+import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
@@ -23,7 +26,6 @@ import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../button/button.js';
 import 'focus-visible';
-import '../global/theme.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../avatar/avatar.js';
@@ -64,18 +66,15 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
+import '../_helpers/loader-inline.js';
 import '../shortcuts/shortcuts-hoc.js';
 import '../tags-list/tags-list.js';
 import '../tag/tag.js';
@@ -96,7 +95,6 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
   const types = {
     input: Select.Type.INPUT,
     button: Select.Type.BUTTON,
-    material: Select.Type.MATERIAL,
     dropdown: Select.Type.CUSTOM,
     suggest: Select.Type.INPUT
   };
@@ -479,6 +477,7 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
           notFoundMessage: ctrl.notFoundMessage || RingMessageBundle.select_options_not_found(),
           targetElement: getType() === 'dropdown' ? element : null,
           size: getSelectSize(),
+          height: ControlsHeight.S,
           onBeforeOpen: () => {
             resetMemorizedOptions();
             ctrl.loadOptionsToSelect(ctrl.query);

package/dist/select-ng/select-ng__lazy.js

@@ -5,12 +5,14 @@ import React from 'react';
 import { RerenderableSelect } from '../select/select.js';
 import 'classnames';
 import 'prop-types';
-import '@jetbrains/icons/chevron-10px';
+import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
+import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
@@ -19,8 +21,8 @@ import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../button/button.js';
 import 'focus-visible';
-import '../global/theme.js';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
@@ -61,18 +63,15 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
+import '../_helpers/loader-inline.js';
 import '../shortcuts/shortcuts-hoc.js';
 import '../tags-list/tags-list.js';
 import '../tag/tag.js';
@@ -115,15 +114,11 @@ class SelectLazy {
   }
 
   attachEvents() {
-    this.container.addEventListener('click', this.onClick, {
-      capture: true
-    });
+    this.container.addEventListener('click', this.onClick);
   }
 
   detachEvents() {
-    this.container.removeEventListener('click', this.onClick, {
-      capture: true
-    });
+    this.container.removeEventListener('click', this.onClick);
   }
 
   render(props) {
@@ -142,11 +137,11 @@ class SelectLazy {
 
     if (this.type === 'dropdown') {
       this.ctrl.selectInstance = render(this.reactSelect, this.container);
-
-      this.ctrl.selectInstance._openPopupIfClosed();
     } else {
       this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
     }
+
+    this.ctrl.selectInstance._openPopupIfClosed();
   }
 
 }