@jetbrains/ring-ui-built 6.0.35 → 6.0.36

package/components/select/select.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, e as _extends, f as _classCallCheck, g as _callSuper, c as _objectWithoutProperties, o as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, e as _classCallCheck, f as _callSuper, c as _objectWithoutProperties, n as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.array.find.js';
@@ -13,7 +13,7 @@ import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/es.string.trim.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
-import React, { Fragment, Component } from 'react';
+import { Fragment, Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
@@ -36,8 +36,9 @@ import { I18nContext } from '../i18n/i18n-context.js';
 import composeRefs from '../global/composeRefs.js';
 import { refObject } from '../global/prop-types.js';
 import { isArray } from '../global/typescript-utils.js';
-import { ControlsHeight, ControlsHeightContext } from '../global/controls-height.js';
+import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
 import SelectPopup from './select__popup.js';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { A as Anchor } from '../_helpers/anchor.js';
 import 'core-js/modules/es.object.entries.js';
 import '@jetbrains/icons/chevron-10px';
@@ -91,6 +92,7 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
+import '../control-help/control-help.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
 import '../list/list__title.js';
@@ -109,9 +111,6 @@ import '../_helpers/select__filter.js';
 
 var modules_9d0de074 = {"button-shadow":"i__const_button_shadow_0","select":"select_rui_e9c2","value":"value_rui_e9c2 ellipsis_rui_f295 font_rui_f295","icons":"icons_rui_e9c2","light":"light_rui_2ac4","toolbar":"toolbar_rui_e9c2","button":"button_rui_e9c2","buttonSpaced":"buttonSpaced_rui_e9c2","inputMode":"inputMode_rui_e9c2","selectedIcon":"selectedIcon_rui_e9c2 resetButton_rui_f295","clearIcon":"clearIcon_rui_e9c2","sizeS":"sizeS_rui_e9c2","sizeM":"sizeM_rui_e9c2","sizeL":"sizeL_rui_e9c2","sizeFULL":"sizeFULL_rui_e9c2","sizeAUTO":"sizeAUTO_rui_e9c2","buttonMode":"buttonMode_rui_e9c2","open":"open_rui_e9c2","buttonContainer":"buttonContainer_rui_e9c2","buttonValue":"buttonValue_rui_e9c2 ellipsis_rui_f295","buttonValueOpen":"buttonValueOpen_rui_e9c2","buttonValueEmpty":"buttonValueEmpty_rui_e9c2","heightS":"heightS_rui_e9c2","label":"label_rui_e9c2","disabled":"disabled_rui_e9c2","avatar":"avatar_rui_e9c2","popup":"popup_rui_e9c2","chevron":"chevron_rui_e9c2","chevronIcon":"chevronIcon_rui_e9c2"};
 
-/**
- * @name Select
- */
 function noop() {}
 /**
  * @enum {number}
@@ -693,12 +692,13 @@ var Select = /*#__PURE__*/function (_Component) {
         separator: reset.separator,
         key: reset.label,
         rgItemType: List.ListProps.Type.CUSTOM,
-        template: /*#__PURE__*/React.createElement(Button, {
+        template: /*#__PURE__*/jsx(Button, {
           text: true,
           className: modules_9d0de074.button,
           "data-test": "ring-select-reset-tags-button",
-          height: ControlsHeight.S
-        }, reset.label),
+          height: ControlsHeight.S,
+          children: reset.label
+        }),
         glyph: reset.glyph,
         onClick: resetHandler
       };
@@ -727,59 +727,62 @@ var Select = /*#__PURE__*/function (_Component) {
         showPopup = _this$state2.showPopup,
         shownData = _this$state2.shownData;
       var _shownData = this._prependResetOption(shownData);
-      return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, function (_ref2) {
-        var translate = _ref2.translate;
-        var message;
-        if (_this3.props.loading) {
-          var _this3$props$loadingM;
-          message = (_this3$props$loadingM = _this3.props.loadingMessage) !== null && _this3$props$loadingM !== void 0 ? _this3$props$loadingM : translate('loading');
-        } else if (!shownData.length) {
-          var _this3$props$notFound;
-          message = (_this3$props$notFound = _this3.props.notFoundMessage) !== null && _this3$props$notFound !== void 0 ? _this3$props$notFound : translate('noOptionsFound');
+      return /*#__PURE__*/jsx(I18nContext.Consumer, {
+        children: function children(_ref2) {
+          var translate = _ref2.translate;
+          var message;
+          if (_this3.props.loading) {
+            var _this3$props$loadingM;
+            message = (_this3$props$loadingM = _this3.props.loadingMessage) !== null && _this3$props$loadingM !== void 0 ? _this3$props$loadingM : translate('loading');
+          } else if (!shownData.length) {
+            var _this3$props$notFound;
+            message = (_this3$props$notFound = _this3.props.notFoundMessage) !== null && _this3$props$notFound !== void 0 ? _this3$props$notFound : translate('noOptionsFound');
+          }
+          return /*#__PURE__*/jsx(SelectPopup, {
+            data: _shownData,
+            message: message,
+            toolbar: showPopup && _this3.getToolbar(),
+            topbar: _this3.getTopbar(),
+            loading: _this3.props.loading,
+            activeIndex: _this3.state.selectedIndex,
+            hidden: !showPopup,
+            ref: _this3.popupRef,
+            maxHeight: _this3.props.maxHeight,
+            minWidth: _this3.props.minWidth,
+            directions: _this3.props.directions,
+            className: _this3.props.popupClassName,
+            style: _this3.props.popupStyle,
+            top: _this3.props.top,
+            left: _this3.props.left,
+            offset: _this3.props.offset,
+            filter: _this3.isInputMode() ? false : _this3.props.filter // disable popup filter in INPUT mode
+            ,
+            filterIcon: _this3.props.filterIcon,
+            filterRef: _this3.props.filterRef,
+            multiple: _this3.props.multiple,
+            filterValue: _this3.state.filterValue,
+            anchorElement: anchorElement,
+            onCloseAttempt: _this3._onCloseAttempt,
+            onOutsideClick: _this3.props.onOutsideClick,
+            onSelect: _this3._listSelectHandler,
+            onSelectAll: _this3._listSelectAllHandler,
+            onFilter: _this3._filterChangeHandler,
+            onClear: _this3.clearFilter,
+            onLoadMore: _this3.props.onLoadMore,
+            isInputMode: _this3.isInputMode(),
+            selected: _this3.state.selected,
+            tags: _this3.props.tags,
+            compact: _this3.props.compact,
+            renderOptimization: _this3.props.renderOptimization,
+            ringPopupTarget: _this3.props.ringPopupTarget,
+            disableMoveOverflow: _this3.props.disableMoveOverflow,
+            disableScrollToActive: _this3.props.disableScrollToActive,
+            dir: _this3.props.dir,
+            onEmptyPopupEnter: _this3.onEmptyPopupEnter,
+            listId: _this3.listId,
+            preventListOverscroll: _this3.props.preventListOverscroll
+          });
         }
-        return /*#__PURE__*/React.createElement(SelectPopup, {
-          data: _shownData,
-          message: message,
-          toolbar: showPopup && _this3.getToolbar(),
-          topbar: _this3.getTopbar(),
-          loading: _this3.props.loading,
-          activeIndex: _this3.state.selectedIndex,
-          hidden: !showPopup,
-          ref: _this3.popupRef,
-          maxHeight: _this3.props.maxHeight,
-          minWidth: _this3.props.minWidth,
-          directions: _this3.props.directions,
-          className: _this3.props.popupClassName,
-          style: _this3.props.popupStyle,
-          top: _this3.props.top,
-          left: _this3.props.left,
-          filter: _this3.isInputMode() ? false : _this3.props.filter // disable popup filter in INPUT mode
-          ,
-          filterIcon: _this3.props.filterIcon,
-          filterRef: _this3.props.filterRef,
-          multiple: _this3.props.multiple,
-          filterValue: _this3.state.filterValue,
-          anchorElement: anchorElement,
-          onCloseAttempt: _this3._onCloseAttempt,
-          onOutsideClick: _this3.props.onOutsideClick,
-          onSelect: _this3._listSelectHandler,
-          onSelectAll: _this3._listSelectAllHandler,
-          onFilter: _this3._filterChangeHandler,
-          onClear: _this3.clearFilter,
-          onLoadMore: _this3.props.onLoadMore,
-          isInputMode: _this3.isInputMode(),
-          selected: _this3.state.selected,
-          tags: _this3.props.tags,
-          compact: _this3.props.compact,
-          renderOptimization: _this3.props.renderOptimization,
-          ringPopupTarget: _this3.props.ringPopupTarget,
-          disableMoveOverflow: _this3.props.disableMoveOverflow,
-          disableScrollToActive: _this3.props.disableScrollToActive,
-          dir: _this3.props.dir,
-          onEmptyPopupEnter: _this3.onEmptyPopupEnter,
-          listId: _this3.listId,
-          preventListOverscroll: _this3.props.preventListOverscroll
-        });
       });
     }
   }, {
@@ -796,21 +799,23 @@ var Select = /*#__PURE__*/function (_Component) {
       if (!isToolbarHasElements) {
         return null;
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/jsxs("div", {
         className: classNames({
           [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
         }),
-        "data-test": "ring-select-toolbar"
-      }, 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 ? "".concat(prefix, " ").concat(label) : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
-        label: hint,
-        "data-test": "ring-select-toolbar-hint"
-      }));
+        "data-test": "ring-select-toolbar",
+        children: [renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/jsx(Button, {
+          text: true,
+          delayed: delayed,
+          className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
+          onClick: this.addHandler,
+          "data-test": "ring-select-toolbar-button",
+          children: prefix ? "".concat(prefix, " ").concat(label) : label
+        }), hint && /*#__PURE__*/jsx(List.ListHint, {
+          label: hint,
+          "data-test": "ring-select-toolbar-hint"
+        })]
+      });
     }
   }, {
     key: "getTopbar",
@@ -904,41 +909,38 @@ var Select = /*#__PURE__*/function (_Component) {
       var icons = [];
       var height = this.props.height || this.context;
       if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
-        icons.push( /*#__PURE__*/React.createElement("button", {
+        icons.push( /*#__PURE__*/jsx("button", {
           title: "Toggle options popup",
           type: "button",
           className: modules_9d0de074.selectedIcon,
-          key: "selected",
           disabled: this.props.disabled,
           onClick: this._clickHandler,
           style: {
             backgroundImage: "url(".concat(selected.icon, ")")
           }
-        }));
+        }, "selected"));
       }
       if (clear && !disabled && !this._selectionIsEmpty()) {
-        icons.push( /*#__PURE__*/React.createElement(Button, {
+        icons.push( /*#__PURE__*/jsx(Button, {
           title: "Clear selection",
           "data-test": "ring-clear-select",
           className: modules_9d0de074.clearIcon,
-          key: "close",
           disabled: this.props.disabled,
           onClick: this.clear,
           height: height,
           icon: closeIcon
-        }));
+        }, "close"));
       }
       if (!hideArrow) {
-        icons.push( /*#__PURE__*/React.createElement(Button, {
+        icons.push( /*#__PURE__*/jsx(Button, {
           title: "Toggle options popup",
           className: modules_9d0de074.chevron,
           iconClassName: modules_9d0de074.chevronIcon,
           icon: chevronDownIcon,
-          key: "hide",
           disabled: this.props.disabled,
           height: height,
           onClick: this._clickHandler
-        }));
+        }, "hide"));
       }
       return icons;
     }
@@ -946,7 +948,7 @@ var Select = /*#__PURE__*/function (_Component) {
     key: "_getAvatar",
     value: function _getAvatar() {
       var _this$state$selected, _this$state$selected2;
-      return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && /*#__PURE__*/React.createElement(Avatar, {
+      return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && /*#__PURE__*/jsx(Avatar, {
         className: modules_9d0de074.avatar,
         url: this.state.selected.avatar,
         username: this.state.selected.username,
@@ -981,9 +983,10 @@ var Select = /*#__PURE__*/function (_Component) {
       });
       var icons = this._getIcons();
       var style = getStyle(icons.length);
-      var iconsNode = /*#__PURE__*/React.createElement("div", {
-        className: modules_9d0de074.icons
-      }, icons);
+      var iconsNode = /*#__PURE__*/jsx("div", {
+        className: modules_9d0de074.icons,
+        children: icons
+      });
       var ariaProps = this.state.showPopup ? {
         'aria-owns': this.listId,
         'aria-activedescendant': activeItemId,
@@ -994,116 +997,133 @@ var Select = /*#__PURE__*/function (_Component) {
       switch (this.props.type) {
         case Type.INPUT_WITHOUT_CONTROLS:
         case Type.INPUT:
-          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-            ref: this.nodeRef,
-            className: classNames(classes, modules_9d0de074.inputMode),
-            "data-test": joinDataTestAttributes('ring-select', dataTest)
-          }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-            map: this.getShortcutsMap(),
-            scope: this.shortcutsScope
-          }), /*#__PURE__*/React.createElement(Input, _extends({}, 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(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 || (_this$_popup5 = _this$_popup5.list) === null || _this$_popup5 === void 0 ? void 0 : _this$_popup5.shortcutsMap)) : undefined,
-            icon: this.props.filterIcon,
-            afterInput: this.props.type === Type.INPUT && iconsNode
-          })), this._renderPopup()), this.props.error && /*#__PURE__*/React.createElement("div", {
-            className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)])
-          }, this.props.error));
+          return /*#__PURE__*/jsxs(Fragment$1, {
+            children: [/*#__PURE__*/jsxs("div", {
+              ref: this.nodeRef,
+              className: classNames(classes, modules_9d0de074.inputMode),
+              "data-test": joinDataTestAttributes('ring-select', dataTest),
+              children: [shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
+                map: this.getShortcutsMap(),
+                scope: this.shortcutsScope
+              }), /*#__PURE__*/jsx(Input, _objectSpread2(_objectSpread2({}, 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(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 || (_this$_popup5 = _this$_popup5.list) === null || _this$_popup5 === void 0 ? void 0 : _this$_popup5.shortcutsMap)) : undefined,
+                icon: this.props.filterIcon,
+                afterInput: this.props.type === Type.INPUT && iconsNode
+              })), this._renderPopup()]
+            }), this.props.error && /*#__PURE__*/jsx("div", {
+              className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)]),
+              children: this.props.error
+            })]
+          });
         case Type.BUTTON:
-          return /*#__PURE__*/React.createElement("div", {
+          return /*#__PURE__*/jsxs("div", {
             ref: this.nodeRef,
             className: classNames(classes, modules_9d0de074.buttonMode),
-            "data-test": joinDataTestAttributes('ring-select', dataTest)
-          }, selectedLabel && /*#__PURE__*/React.createElement(ControlLabel, {
-            type: this.props.labelType,
-            disabled: this.props.disabled,
-            htmlFor: this.props.id
-          }, selectedLabel), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-            map: this.getShortcutsMap(),
-            scope: this.shortcutsScope
-          }), /*#__PURE__*/React.createElement("div", {
-            className: modules_9d0de074.buttonContainer
-          }, /*#__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, {
-              [modules_9d0de074.buttonValueOpen]: this.state.showPopup,
-              [modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
-            }),
-            disabled: this.props.disabled,
-            style: style,
-            "data-test": "ring-select__button ring-select__focus"
-          }), this._getAvatar(), this._getPlaceholder()), iconsNode), this._renderPopup());
-        case Type.INLINE:
-          return /*#__PURE__*/React.createElement("div", {
-            className: classes,
-            ref: this.nodeRef,
-            "data-test": joinDataTestAttributes('ring-select', dataTest)
-          }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
-            map: this.getShortcutsMap(),
-            scope: this.shortcutsScope
-          }), /*#__PURE__*/React.createElement(Anchor, _extends({}, ariaProps, {
-            className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
-            id: this.props.id,
-            onClick: this._clickHandler,
-            "data-test": "ring-select__focus",
-            disabled: this.props.disabled,
-            active: this.state.showPopup
-          }), this._getPlaceholder()), this._renderPopup());
-        default:
-          if (this.props.customAnchor) {
-            return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
+            "data-test": joinDataTestAttributes('ring-select', dataTest),
+            children: [selectedLabel && /*#__PURE__*/jsx(ControlLabel, {
+              type: this.props.labelType,
+              disabled: this.props.disabled,
+              htmlFor: this.props.id,
+              children: selectedLabel
+            }), shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
               map: this.getShortcutsMap(),
               scope: this.shortcutsScope
-            }), this.props.customAnchor({
-              wrapperProps: {
-                ref: this.nodeRef,
-                'data-test': joinDataTestAttributes('ring-select', dataTest)
-              },
-              buttonProps: _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+            }), /*#__PURE__*/jsxs("div", {
+              className: modules_9d0de074.buttonContainer,
+              children: [/*#__PURE__*/jsxs(Button, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+                height: this.props.height,
                 id: this.props.id,
                 onClick: this._clickHandler,
+                className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
+                  [modules_9d0de074.buttonValueOpen]: this.state.showPopup,
+                  [modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
+                }),
                 disabled: this.props.disabled,
-                children: this._getPlaceholder(),
-                'data-test': 'ring-select__focus'
-              }),
-              popup: this._renderPopup()
-            }));
+                style: style,
+                "data-test": "ring-select__button ring-select__focus",
+                children: [this._getAvatar(), this._getPlaceholder()]
+              })), iconsNode]
+            }), this._renderPopup()]
+          });
+        case Type.INLINE:
+          return /*#__PURE__*/jsxs("div", {
+            className: classes,
+            ref: this.nodeRef,
+            "data-test": joinDataTestAttributes('ring-select', dataTest),
+            children: [shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
+              map: this.getShortcutsMap(),
+              scope: this.shortcutsScope
+            }), /*#__PURE__*/jsx(Anchor, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+              className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
+              id: this.props.id,
+              onClick: this._clickHandler,
+              "data-test": "ring-select__focus",
+              disabled: this.props.disabled,
+              active: this.state.showPopup,
+              children: this._getPlaceholder()
+            })), this._renderPopup()]
+          });
+        default:
+          if (this.props.customAnchor) {
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [shortcutsEnabled && /*#__PURE__*/jsx(Shortcuts, {
+                map: this.getShortcutsMap(),
+                scope: this.shortcutsScope
+              }), this.props.customAnchor({
+                wrapperProps: {
+                  ref: this.nodeRef,
+                  'data-test': joinDataTestAttributes('ring-select', dataTest)
+                },
+                buttonProps: _objectSpread2(_objectSpread2({}, ariaProps), {}, {
+                  id: this.props.id,
+                  onClick: this._clickHandler,
+                  disabled: this.props.disabled,
+                  children: this._getPlaceholder(),
+                  'data-test': 'ring-select__focus'
+                }),
+                popup: this._renderPopup()
+              })]
+            });
           }
-          return /*#__PURE__*/React.createElement("span", {
+          return /*#__PURE__*/jsx("span", {
             id: this.props.id,
             ref: this.nodeRef,
-            "data-test": "ring-select"
-          }, this._renderPopup());
+            "data-test": "ring-select",
+            children: this._renderPopup()
+          });
       }
     }
   }, {
     key: "render",
     value: function render() {
       var _this4 = this;
-      return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, function (activeItemId) {
-        return _this4.renderSelect(activeItemId);
-      }));
+      return /*#__PURE__*/jsx(ActiveItemContext.Provider, {
+        children: /*#__PURE__*/jsx(ActiveItemContext.ValueContext.Consumer, {
+          children: function children(activeItemId) {
+            return _this4.renderSelect(activeItemId);
+          }
+        })
+      });
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -1232,7 +1252,8 @@ _defineProperty(Select, "defaultProps", {
   onReset: noop,
   tags: null,
   ringPopupTarget: null,
-  dir: 'ltr'
+  dir: 'ltr',
+  offset: 4
 });
 _defineProperty(Select, "contextType", ControlsHeightContext);
 _defineProperty(Select, "Type", Type);

package/components/select/select__filter.d.ts

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

package/components/select/select__filter.js

@@ -10,6 +10,7 @@ import '../global/sniffer.js';
 import '../list/list.js';
 import '../i18n/i18n-context.js';
 export { S as default } from '../_helpers/select__filter.js';
+import 'react/jsx-runtime';
 import 'core-js/modules/es.object.values.js';
 import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
@@ -35,6 +36,7 @@ import 'core-js/modules/es.regexp.to-string.js';
 import '../global/composeRefs.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import '../control-label/control-label.js';
+import '../control-help/control-help.js';
 import 'sniffr';
 import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.symbol.description.js';

package/components/select/select__popup.d.ts

@@ -1,7 +1,8 @@
 /**
  * @description Displays a popup with select's options.
  */
-import React, { ComponentType, CSSProperties, PureComponent, ReactNode, Ref, SyntheticEvent } from 'react';
+import { ComponentType, CSSProperties, PureComponent, ReactNode, Ref, SyntheticEvent } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 import Popup from '../popup/popup';
@@ -74,6 +75,7 @@ export interface SelectPopupProps<T = unknown> {
     renderOptimization?: boolean | undefined;
     style?: CSSProperties | undefined;
     top?: number | undefined;
+    offset?: number | undefined;
     multiple: boolean | Multiple;
     selected: ListDataItem<T> | readonly ListDataItem<T>[] | null;
     tags: Tags | boolean | null;
@@ -130,21 +132,21 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
         render: PropTypes.Requireable<(...args: any[]) => any>;
     }>, never> & Pick<import("../tag/tag").TagProps, never>, never> & {
         className?: string | null | undefined;
-        children?: React.ReactNode;
+        children?: 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;
+        render?: ((props: import("../tag/tag").TagRenderProps) => 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;
+    } & {}) => ReactNode) | undefined;
     getTags(): false | React.JSX.Element;
     getFilterWithTags(): React.JSX.Element | null;
     getBottomLine(): "" | React.JSX.Element | null;