@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/dist/select/select.js

@@ -1,26 +1,29 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.string.replace.js';
 import React, { Component, Fragment } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import chevronDown from '@jetbrains/icons/chevron-10px';
-import closeIcon from '@jetbrains/icons/close';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import closeIcon from '@jetbrains/icons/close-12px';
 import deepEqual from 'deep-equal';
 import '../dropdown/dropdown.js';
 import Avatar, { Size as Size$1 } from '../avatar/avatar.js';
 import Popup from '../popup/popup.js';
 import List, { ActiveItemContext } from '../list/list.js';
-import ThemedInput, { Size } from '../input/input.js';
+import { Size, Input } from '../input/input.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
-import ThemedButton from '../button/button.js';
+import { Button } from '../button/button.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import getUID from '../global/get-uid.js';
 import rerenderHOC from '../global/rerender-hoc.js';
 import fuzzyHighlight from '../global/fuzzy-highlight.js';
-import Theme from '../global/theme.js';
 import memoize from '../global/memoize.js';
 import { isArray } from '../global/typescript-utils.js';
+import { ControlsHeightContext } from '../global/controls-height.js';
 import SelectPopup from './select__popup.js';
 import { A as Anchor } from '../_helpers/anchor.js';
+import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
@@ -54,7 +57,7 @@ import '../_helpers/link.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
@@ -66,14 +69,10 @@ import '../list/consts.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../global/react-render-adapter.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';
@@ -81,7 +80,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 
-var modules_9d0de074 = {"unit":"8px","select":"select_rui_9815","value":"value_rui_9815 ellipsis_rui_750f font_rui_750f","icons":"icons_rui_9815","toolbar":"toolbar_rui_9815","button":"button_rui_9815","buttonSpaced":"buttonSpaced_rui_9815","inputMode":"inputMode_rui_9815","buttonMode":"buttonMode_rui_9815","selectedIcon":"selectedIcon_rui_9815 resetButton_rui_750f","clearIcon":"clearIcon_rui_9815","sizeS":"sizeS_rui_9815","sizeM":"sizeM_rui_9815","sizeL":"sizeL_rui_9815","sizeFULL":"sizeFULL_rui_9815","sizeAUTO":"sizeAUTO_rui_9815","materialMode":"materialMode_rui_9815","open":"open_rui_9815","buttonContainer":"buttonContainer_rui_9815","buttonValue":"buttonValue_rui_9815 ellipsis_rui_750f","buttonValueOpen":"buttonValueOpen_rui_9815","label":"label_rui_9815","disabled":"disabled_rui_9815","selectedLabel":"selectedLabel_rui_9815","avatar":"avatar_rui_9815","popup":"popup_rui_9815","chevron":"chevron_rui_9815","chevronIcon":"chevronIcon_rui_9815"};
+var modules_9d0de074 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","select":"select_rui_11de","value":"value_rui_11de ellipsis_rui_8bff font_rui_8bff","icons":"icons_rui_11de","toolbar":"toolbar_rui_11de","button":"button_rui_11de","buttonSpaced":"buttonSpaced_rui_11de","inputMode":"inputMode_rui_11de","selectedIcon":"selectedIcon_rui_11de resetButton_rui_8bff","clearIcon":"clearIcon_rui_11de","sizeS":"sizeS_rui_11de","sizeM":"sizeM_rui_11de","sizeL":"sizeL_rui_11de","sizeFULL":"sizeFULL_rui_11de","sizeAUTO":"sizeAUTO_rui_11de","buttonMode":"buttonMode_rui_11de","open":"open_rui_11de","buttonContainer":"buttonContainer_rui_11de","buttonValue":"buttonValue_rui_11de ellipsis_rui_8bff","buttonValueOpen":"buttonValueOpen_rui_11de","label":"label_rui_11de","disabled":"disabled_rui_11de","avatar":"avatar_rui_11de","popup":"popup_rui_11de","chevron":"chevron_rui_11de","chevronIcon":"chevronIcon_rui_11de","heightS":"heightS_rui_11de"};
 
 /**
  * @name Select
@@ -100,13 +99,13 @@ var Type;
   Type["INPUT"] = "INPUT";
   Type["CUSTOM"] = "CUSTOM";
   Type["INLINE"] = "INLINE";
-  Type["MATERIAL"] = "MATERIAL";
   Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
 })(Type || (Type = {}));
 
+const ICONS_OFFSET = 12;
 const ICON_WIDTH = 20;
 const getStyle = memoize(iconsLength => ({
-  paddingRight: iconsLength * ICON_WIDTH
+  paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
 }));
 
 const isInputMode = type => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
@@ -154,7 +153,7 @@ function getListItems(props, state, rawFilterString) {
   let data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : props.data;
   let filterString = rawFilterString.trim();
 
-  if (isInputMode(props.type) && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
+  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
   }
 
@@ -306,10 +305,10 @@ class Select extends Component {
 
     _defineProperty(this, "shortcutsScope", this.id);
 
-    _defineProperty(this, "listId", `${this.id}:list`);
+    _defineProperty(this, "listId", "".concat(this.id, ":list"));
 
-    _defineProperty(this, "_focusHandler", () => {
-      this.props.onFocus();
+    _defineProperty(this, "_focusHandler", e => {
+      this.props.onFocus(e);
       this.setState({
         shortcutsEnabled: true,
         focused: true
@@ -424,6 +423,16 @@ class Select extends Component {
       }
     });
 
+    _defineProperty(this, "_openPopupIfClosed", () => {
+      if (this.props.disabled || this.state.showPopup) {
+        return;
+      }
+
+      this.props.onBeforeOpen();
+
+      this._showPopup();
+    });
+
     _defineProperty(this, "_filterChangeHandler", e => {
       this._setFilter(e.currentTarget.value, e);
     });
@@ -646,12 +655,6 @@ class Select extends Component {
       return false;
     });
 
-    _defineProperty(this, "button", void 0);
-
-    _defineProperty(this, "buttonRef", el => {
-      this.button = el;
-    });
-
     _defineProperty(this, "filter", void 0);
 
     _defineProperty(this, "filterRef", el => {
@@ -714,6 +717,10 @@ class Select extends Component {
       nextState.selected = multiple ? [] : null;
     }
 
+    if (multiple && !nextState.selected) {
+      nextState.selected = prevState.selected;
+    }
+
     const {
       selected
     } = { ...prevState,
@@ -791,7 +798,7 @@ class Select extends Component {
       separator: reset.separator,
       key: reset.label,
       rgItemType: List.ListProps.Type.CUSTOM,
-      template: /*#__PURE__*/React.createElement(ThemedButton, {
+      template: /*#__PURE__*/React.createElement(Button, {
         text: true,
         className: modules_9d0de074.button,
         "data-test": "ring-select-reset-tags-button"
@@ -894,13 +901,14 @@ class Select extends Component {
 
   _hidePopup(tryFocusAnchor) {
     if (this.node && this.state.showPopup) {
-      this.setState({
+      this.setState(prevState => ({
         showPopup: false,
-        filterValue: ''
-      });
+        filterValue: this.props.allowAny ? prevState.filterValue : ''
+      }));
 
       if (tryFocusAnchor) {
-        const restoreFocusNode = this.props.targetElement || this.node.querySelector('[data-test~=ring-select__focus]');
+        const focusableSelectExists = this.node && this.node.querySelector('[data-test~=ring-select__focus]');
+        const restoreFocusNode = this.props.targetElement || focusableSelectExists;
 
         if (restoreFocusNode) {
           restoreFocusNode.focus();
@@ -911,14 +919,15 @@ class Select extends Component {
 
   getToolbar() {
     const {
-      hint
+      hint,
+      renderBottomToolbar
     } = this.props;
     const {
       prefix,
       label,
       delayed
     } = this.state.addButton || {};
-    const isToolbarHasElements = this.state.addButton || hint;
+    const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
 
     if (!isToolbarHasElements) {
       return null;
@@ -926,16 +935,16 @@ class Select extends Component {
 
     return /*#__PURE__*/React.createElement("div", {
       className: classNames({
-        [modules_9d0de074.toolbar]: !!this.state.addButton
+        [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
       }),
       "data-test": "ring-select-toolbar"
-    }, this.state.addButton && /*#__PURE__*/React.createElement(ThemedButton, {
+    }, renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/React.createElement(Button, {
       text: true,
       delayed: delayed,
       className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
       onClick: this.addHandler,
       "data-test": "ring-select-toolbar-button"
-    }, prefix ? `${prefix} ${label}` : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
+    }, prefix ? "".concat(prefix, " ").concat(label) : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
       label: hint,
       "data-test": "ring-select-toolbar-hint"
     }));
@@ -984,7 +993,9 @@ class Select extends Component {
   }
 
   _getLabel() {
-    return this.props.label || (typeof this.props.selectedLabel === 'string' ? this.props.selectedLabel : null) || 'Select an option';
+    var _ref2, _this$props$label;
+
+    return (_ref2 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref2 !== void 0 ? _ref2 : 'Select an option';
   }
 
   _getSelectedString() {
@@ -1021,13 +1032,13 @@ class Select extends Component {
         disabled: this.props.disabled,
         onClick: this._clickHandler,
         style: {
-          backgroundImage: `url(${selected.icon})`
+          backgroundImage: "url(".concat(selected.icon, ")")
         }
       }));
     }
 
     if (clear && !disabled && !this._selectionIsEmpty()) {
-      icons.push( /*#__PURE__*/React.createElement(ThemedButton, {
+      icons.push( /*#__PURE__*/React.createElement(Button, {
         title: "Clear selection",
         "data-test": "ring-clear-select",
         className: modules_9d0de074.clearIcon,
@@ -1039,11 +1050,11 @@ class Select extends Component {
     }
 
     if (!hideArrow) {
-      icons.push( /*#__PURE__*/React.createElement(ThemedButton, {
+      icons.push( /*#__PURE__*/React.createElement(Button, {
         title: "Toggle options popup",
         className: modules_9d0de074.chevron,
         iconClassName: modules_9d0de074.chevronIcon,
-        icon: chevronDown,
+        icon: chevronDownIcon,
         key: "hide",
         disabled: this.props.disabled,
         onClick: this._clickHandler
@@ -1085,8 +1096,8 @@ class Select extends Component {
     const {
       shortcutsEnabled
     } = this.state;
-    const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, {
-      [modules_9d0de074[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
+    const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, modules_9d0de074["height".concat(this.props.height || this.context)], {
+      [modules_9d0de074["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
       [modules_9d0de074.disabled]: this.props.disabled
     });
 
@@ -1111,7 +1122,8 @@ class Select extends Component {
         }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
           map: this.getShortcutsMap(),
           scope: this.shortcutsScope
-        }), /*#__PURE__*/React.createElement(ThemedInput, _extends({}, ariaProps, {
+        }), /*#__PURE__*/React.createElement(Input, _extends({}, ariaProps, {
+          height: this.props.height,
           autoComplete: "off",
           id: this.props.id,
           onClick: this._clickHandler,
@@ -1130,8 +1142,9 @@ class Select extends Component {
           "data-test": "ring-select__focus",
           enableShortcuts: shortcutsEnabled ? Object.keys({ ...this.getShortcutsMap(),
             ...((_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 ? void 0 : (_this$_popup5$list = _this$_popup5.list) === null || _this$_popup5$list === void 0 ? void 0 : _this$_popup5$list.shortcutsMap)
-          }) : undefined
-        })), this.props.type === Type.INPUT && iconsNode, this._renderPopup());
+          }) : undefined,
+          afterInput: this.props.type === Type.INPUT && iconsNode
+        })), this._renderPopup());
 
       case Type.BUTTON:
         return /*#__PURE__*/React.createElement("div", {
@@ -1143,7 +1156,8 @@ class Select extends Component {
           scope: this.shortcutsScope
         }), /*#__PURE__*/React.createElement("div", {
           className: modules_9d0de074.buttonContainer
-        }, /*#__PURE__*/React.createElement(ThemedButton, _extends({}, ariaProps, {
+        }, /*#__PURE__*/React.createElement(Button, _extends({}, ariaProps, {
+          height: this.props.height,
           id: this.props.id,
           onClick: this._clickHandler,
           className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
@@ -1154,31 +1168,6 @@ class Select extends Component {
           "data-test": "ring-select__button ring-select__focus"
         }), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), iconsNode), this._renderPopup());
 
-      case Type.MATERIAL:
-        return /*#__PURE__*/React.createElement("div", {
-          ref: this.nodeRef,
-          className: classNames(classes, modules_9d0de074.materialMode),
-          "data-test": joinDataTestAttributes('ring-select', dataTest)
-        }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-          map: this.getShortcutsMap(),
-          scope: this.shortcutsScope
-        }), !this._selectionIsEmpty() && this.props.selectedLabel && /*#__PURE__*/React.createElement("span", {
-          className: modules_9d0de074.selectedLabel
-        }, this.props.selectedLabel), /*#__PURE__*/React.createElement("button", _extends({}, ariaProps, {
-          id: this.props.id,
-          onClick: this._clickHandler,
-          type: "button",
-          disabled: this.props.disabled,
-          className: classNames(this.props.buttonClassName, modules_9d0de074.value, {
-            [modules_9d0de074.open]: this.state.showPopup,
-            [modules_9d0de074.label]: this._selectionIsEmpty()
-          }),
-          "aria-label": this._getLabel(),
-          style: style,
-          "data-test": "ring-select__focus",
-          ref: this.buttonRef
-        }), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), iconsNode, this._renderPopup());
-
       case Type.INLINE:
         return /*#__PURE__*/React.createElement("div", {
           className: classes,
@@ -1239,7 +1228,7 @@ _defineProperty(Select, "defaultProps", {
   disabled: false,
   loadingMessage: 'Loading...',
   notFoundMessage: 'No options found',
-  type: Type.MATERIAL,
+  type: Type.BUTTON,
   size: Size.M,
   targetElement: null,
   hideSelected: false,
@@ -1248,8 +1237,8 @@ _defineProperty(Select, "defaultProps", {
   maxHeight: 600,
   directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
   selected: null,
-  label: '',
-  selectedLabel: '',
+  label: null,
+  selectedLabel: null,
   inputPlaceholder: '',
   hint: null,
   shortcutsEnabled: false,
@@ -1272,12 +1261,12 @@ _defineProperty(Select, "defaultProps", {
   dir: 'ltr'
 });
 
+_defineProperty(Select, "contextType", ControlsHeightContext);
+
 _defineProperty(Select, "Type", Type);
 
 _defineProperty(Select, "Size", Size);
 
-_defineProperty(Select, "Theme", Theme);
-
 Select.propTypes = {
   className: PropTypes.string,
   buttonClassName: PropTypes.string,
@@ -1328,7 +1317,6 @@ Select.propTypes = {
   hideArrow: PropTypes.bool,
   compact: PropTypes.bool,
   size: PropTypes.oneOf(Object.values(Size)),
-  theme: PropTypes.string,
   customAnchor: PropTypes.func,
   disableMoveOverflow: PropTypes.bool,
   disableScrollToActive: PropTypes.bool,

package/dist/select/select__filter.js

@@ -1,13 +1,14 @@
 import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
 import 'prop-types';
 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 '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
 import '../button/button.js';
 import 'focus-visible';
@@ -17,6 +18,7 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
@@ -45,7 +47,7 @@ import '../avatar/avatar.js';
 import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';

package/dist/select/select__popup.d.ts

@@ -105,7 +105,7 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     getFilterWithTags(): JSX.Element | null;
     getBottomLine(): "" | JSX.Element | null;
     handleListResize: () => void;
-    getList(ringPopupTarget: string | undefined): JSX.Element | null;
+    getList(ringPopupTarget: string | Element | undefined): JSX.Element | null;
     handleSelectAll: () => void;
     getSelectAll: () => false | JSX.Element;
     private _adjustListMaxHeight;

package/dist/select/select__popup.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import searchIcon from '@jetbrains/icons/search';
@@ -9,7 +10,7 @@ import Popup, { getPopupContainer } from '../popup/popup.js';
 import { maxHeightForDirection } from '../popup/position.js';
 import { PopupTargetContext } from '../popup/popup.target.js';
 import List from '../list/list.js';
-import ThemedLoaderInline from '../loader-inline/loader-inline.js';
+import LoaderInline from '../loader-inline/loader-inline.js';
 import shortcutsHOC from '../shortcuts/shortcuts-hoc.js';
 import { getStyles } from '../global/dom.js';
 import getUID from '../global/get-uid.js';
@@ -17,7 +18,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 ThemedButton 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';
@@ -25,6 +26,7 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import 'react-dom';
 import '../global/schedule-raf.js';
 import '../global/data-tests.js';
@@ -49,7 +51,7 @@ import '../avatar/avatar.js';
 import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
@@ -58,23 +60,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/close-12px';
 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;
 
@@ -173,13 +169,13 @@ class SelectPopup extends PureComponent {
       const activeFilters = this.props.data.filter(item => !item.disabled);
       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(ThemedButton, {
+      }, activeFilters.length === 0 ? /*#__PURE__*/React.createElement("span", null) : /*#__PURE__*/React.createElement(Button, {
         text: true,
         inline: true,
         onClick: this.handleSelectAll
       }, activeFilters.length !== this.props.selected.length ? 'Select all' : 'Deselect all'), /*#__PURE__*/React.createElement(Text, {
         info: true
-      }, `${this.props.selected.length} selected`));
+      }, "".concat(this.props.selected.length, " selected")));
     });
 
     _defineProperty(this, "_adjustListMaxHeight", memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {
@@ -401,7 +397,7 @@ class SelectPopup extends PureComponent {
     } = this.props;
     return (loading || message) && /*#__PURE__*/React.createElement("div", {
       className: modules_b607bec2.bottomLine
-    }, loading && /*#__PURE__*/React.createElement(ThemedLoaderInline, null), message && /*#__PURE__*/React.createElement("div", {
+    }, loading && /*#__PURE__*/React.createElement(LoaderInline, null), message && /*#__PURE__*/React.createElement("div", {
       className: modules_b607bec2.message
     }, message));
   }
@@ -483,7 +479,7 @@ class SelectPopup extends PureComponent {
         minWidth: minWidth,
         onCloseAttempt: onCloseAttempt,
         directions: directions,
-        top: top || (isInputMode ? INPUT_MARGIN_COMPENSATION : undefined),
+        top: top,
         left: left,
         onMouseDown: this.mouseDownHandler,
         target: this.props.ringPopupTarget,

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

@@ -1,21 +1,26 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import angular from 'angular';
 import React from 'react';
-import { unmountComponentAtNode, render } from 'react-dom';
+import { unmountComponentAtNode, render } from '../global/react-render-adapter.js';
 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 'core-js/modules/web.dom-collections.iterator.js';
+import 'react-dom';
+import 'core-js/modules/es.string.replace.js';
 import 'classnames';
 import 'prop-types';
-import '@jetbrains/icons/chevron-10px';
-import '@jetbrains/icons/close';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/close-12px';
 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';
@@ -24,7 +29,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';
@@ -56,7 +60,7 @@ import '../_helpers/link.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
@@ -73,12 +77,7 @@ 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';
@@ -99,7 +98,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
   };
@@ -440,9 +438,19 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
         return sizes[ctrl.size] || sizes.FULL;
       }
 
+      function selectRef(instance) {
+        if (instance != null) {
+          ctrl.selectInstance = instance;
+        }
+      }
+
       function reRenderSelect(props) {
-        if (ctrl.selectInstance.node) {
-          ctrl.selectInstance.rerender(props);
+        var _ctrl$selectInstance;
+
+        if ((_ctrl$selectInstance = ctrl.selectInstance) !== null && _ctrl$selectInstance !== void 0 && _ctrl$selectInstance.node) {
+          ctrl.selectInstance.rerender({ ...props,
+            ref: selectRef
+          });
         }
       }
       /**
@@ -482,6 +490,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);
@@ -589,9 +598,11 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
         ctrl.config = angular.extend({}, ctrl.defaultConfig, ctrl.config || {});
 
         if (getType() === 'suggest' || getType() === 'input') {
-          ctrl.selectInstance = render( /*#__PURE__*/React.createElement(RerenderableSelect, ctrl.config), container);
+          render( /*#__PURE__*/React.createElement(RerenderableSelect, _extends({
+            ref: selectRef
+          }, ctrl.config)), container);
         } else {
-          ctrl.selectInstance = new SelectLazy(container, ctrl.config, ctrl, getType());
+          ctrl.selectInstance = new SelectLazy(container, ctrl.config, ctrl, getType(), selectRef);
         } // Preserve existing contents of the directive