@jetbrains/ring-ui 5.0.0-beta.9 → 5.0.3

package/dist/save-field-ng/save-field-ng.js

@@ -12,6 +12,7 @@ import 'react';
 import 'classnames';
 import 'prop-types';
 import '../global/data-tests.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../_helpers/loader-inline.js';
 import '../_helpers/button-set.js';
 import '@jetbrains/angular-elastic';
@@ -22,6 +23,7 @@ import '../global/sniffer.js';
 import 'sniffr';
 import '../global/ring-angular-component.js';
 import '../icon-ng/icon-ng.js';
+import 'core-js/modules/es.string.replace.js';
 import '../icon/icon__constants.js';
 import '../template-ng/template-ng.js';
 import '../_helpers/icon.js';
@@ -164,7 +166,7 @@ angularModule.directive('rgSaveField', ["RingMessageBundle", "$timeout", "$q", "
       }
 
       function addMultilineProcessing(controlName) {
-        const stopWatch = scope.$watch(`saveFieldForm.${controlName}`, control => {
+        const stopWatch = scope.$watch("saveFieldForm.".concat(controlName), control => {
           if (!control || !control.$formatters || !control.$parsers) {
             return;
           }

package/dist/save-field-ng/save-field-ng__template.js

@@ -1,34 +1,3 @@
-var template = `<div class="ring-save-field" ng-form="saveFieldForm" rg-shortcuts="ring-save-field" shortcuts-map="keyMap" shortcuts-focus="focus">
-  <span class="ring-save-field__transclude-placeholder" ng-transclude=""></span>
-
-  <rg-button
-    ng-show="saveFieldForm.$dirty && saveFieldForm.$valid"
-    mode="primary"
-    class="ring-save-field__button ng-hide"
-    ng-mousedown="cancelBlur()"
-
-    rg-promised-click="submitChanges($event)"
-    promised-mode="loader"
-  >
-    {{wording.save}}
-  </rg-button>
-
-  <rg-button
-    ng-show="saveFieldForm.$dirty && !loading"
-    class="ring-save-field__button ng-hide"
-    ng-click="cancelChanges($event)"
-    ng-mousedown="cancelBlur()"
-  >
-    {{wording.cancel}}
-  </rg-button>
-
-  <rg-button
-    ng-show="done"
-    ng-disabled="true"
-    class="ring-save-field__button ng-hide"
-  >
-    {{wording.saved}}
-  </rg-button>
-</div>`;
+var template = "<div class=\"ring-save-field\" ng-form=\"saveFieldForm\" rg-shortcuts=\"ring-save-field\" shortcuts-map=\"keyMap\" shortcuts-focus=\"focus\">\n  <span class=\"ring-save-field__transclude-placeholder\" ng-transclude=\"\"></span>\n\n  <rg-button\n    ng-show=\"saveFieldForm.$dirty && saveFieldForm.$valid\"\n    mode=\"primary\"\n    class=\"ring-save-field__button ng-hide\"\n    ng-mousedown=\"cancelBlur()\"\n\n    rg-promised-click=\"submitChanges($event)\"\n    promised-mode=\"loader\"\n  >\n    {{wording.save}}\n  </rg-button>\n\n  <rg-button\n    ng-show=\"saveFieldForm.$dirty && !loading\"\n    class=\"ring-save-field__button ng-hide\"\n    ng-click=\"cancelChanges($event)\"\n    ng-mousedown=\"cancelBlur()\"\n  >\n    {{wording.cancel}}\n  </rg-button>\n\n  <rg-button\n    ng-show=\"done\"\n    ng-disabled=\"true\"\n    class=\"ring-save-field__button ng-hide\"\n  >\n    {{wording.saved}}\n  </rg-button>\n</div>";
 
 export { template as default };

package/dist/select/select.d.ts

@@ -45,6 +45,7 @@ export interface CustomAnchorProps {
     buttonProps: ButtonHTMLAttributes<HTMLButtonElement> & DataTestProps;
     popup: ReactNode;
 }
+export declare type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
 export interface BaseSelectProps<T = unknown> {
     data: readonly SelectItem<T>[];
     filter: boolean | Filter<T>;
@@ -60,7 +61,7 @@ export interface BaseSelectProps<T = unknown> {
     maxHeight: number;
     hideArrow: boolean;
     directions: readonly Directions[];
-    label: string;
+    label: string | null;
     selectedLabel: ReactNode;
     inputPlaceholder: string;
     shortcutsEnabled: boolean;
@@ -68,7 +69,7 @@ export interface BaseSelectProps<T = unknown> {
     onLoadMore: () => void;
     onOpen: () => void;
     onFilter: (value: string) => void;
-    onFocus: () => void;
+    onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     onBlur: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
@@ -77,6 +78,7 @@ export interface BaseSelectProps<T = unknown> {
     onDone: () => void;
     onReset: () => void;
     dir: 'ltr' | 'rtl';
+    renderBottomToolbar?: () => ReactNode;
     height?: ControlsHeight | undefined;
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
@@ -93,7 +95,7 @@ export interface BaseSelectProps<T = unknown> {
     hint?: ReactNode;
     add?: Add | null | undefined;
     compact?: boolean | null | undefined;
-    customAnchor?: ((props: CustomAnchorProps) => ReactNode) | null | undefined;
+    customAnchor?: CustomAnchor | null | undefined;
     disableMoveOverflow?: boolean | null | undefined;
     disableScrollToActive?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
@@ -112,7 +114,7 @@ export interface MultipleSelectProps<T = unknown> extends BaseSelectProps<T> {
     onChange: (selected: SelectItem<T>[], event?: Event | SyntheticEvent) => void;
     tags?: Tags | boolean | null | undefined;
 }
-declare type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>;
+export declare type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>;
 interface AddButton {
     prefix: string | null | undefined;
     label: string;
@@ -161,8 +163,8 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         maxHeight: number;
         directions: Directions[];
         selected: null;
-        label: string;
-        selectedLabel: string;
+        label: null;
+        selectedLabel: null;
         inputPlaceholder: string;
         hint: null;
         shortcutsEnabled: boolean;
@@ -256,18 +258,14 @@ export declare type MultipleSelectAttrs<T = unknown> = JSX.LibraryManagedAttribu
 export declare type SelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<T>>;
 export declare const RerenderableSelect: {
     new (props: SelectProps<unknown>): {
-        _propsCache: Readonly<SelectProps<unknown>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        rerender(props?: Partial<SelectProps<unknown>>, callback?: (() => void) | undefined): void | Element | React.Component<SelectProps<unknown>, any, any>;
+        _propsCache: SelectProps<unknown> & React.RefAttributes<unknown>;
+        rerender(props?: Partial<SelectProps<unknown>>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        context: unknown;
         setState<K extends keyof SelectState<unknown>>(state: SelectState<unknown> | ((prevState: Readonly<SelectState<unknown>>, props: Readonly<SelectProps<unknown>>) => SelectState<unknown> | Pick<SelectState<unknown>, K> | null) | Pick<SelectState<unknown>, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         render(): React.ReactNode;
-        readonly props: Readonly<SelectProps<unknown>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<SelectProps<unknown>>;
         state: Readonly<SelectState<unknown>>;
         refs: {
             [key: string]: React.ReactInstance;

package/dist/select/select.js

@@ -1,9 +1,11 @@
 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 chevronDownIcon from '@jetbrains/icons/chevron-down';
-import closeIcon from '@jetbrains/icons/close';
+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';
@@ -55,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';
@@ -67,6 +69,7 @@ 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/loader-inline.js';
@@ -77,7 +80,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 
-var modules_9d0de074 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","select":"select_rui_bf62","value":"value_rui_bf62 ellipsis_rui_750f font_rui_750f","icons":"icons_rui_bf62","toolbar":"toolbar_rui_bf62","button":"button_rui_bf62","buttonSpaced":"buttonSpaced_rui_bf62","inputMode":"inputMode_rui_bf62","selectedIcon":"selectedIcon_rui_bf62 resetButton_rui_750f","clearIcon":"clearIcon_rui_bf62","sizeS":"sizeS_rui_bf62","sizeM":"sizeM_rui_bf62","sizeL":"sizeL_rui_bf62","sizeFULL":"sizeFULL_rui_bf62","sizeAUTO":"sizeAUTO_rui_bf62","buttonMode":"buttonMode_rui_bf62","open":"open_rui_bf62","buttonContainer":"buttonContainer_rui_bf62","buttonValue":"buttonValue_rui_bf62 ellipsis_rui_750f","buttonValueOpen":"buttonValueOpen_rui_bf62","label":"label_rui_bf62","disabled":"disabled_rui_bf62","avatar":"avatar_rui_bf62","popup":"popup_rui_bf62","chevron":"chevron_rui_bf62","chevronIcon":"chevronIcon_rui_bf62","heightS":"heightS_rui_bf62"};
+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
@@ -150,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
   }
 
@@ -302,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
@@ -714,6 +717,10 @@ class Select extends Component {
       nextState.selected = multiple ? [] : null;
     }
 
+    if (multiple && !nextState.selected) {
+      nextState.selected = prevState.selected;
+    }
+
     const {
       selected
     } = { ...prevState,
@@ -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(Button, {
+    }, 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,7 +1032,7 @@ class Select extends Component {
         disabled: this.props.disabled,
         onClick: this._clickHandler,
         style: {
-          backgroundImage: `url(${selected.icon})`
+          backgroundImage: "url(".concat(selected.icon, ")")
         }
       }));
     }
@@ -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[`height${this.props.height || this.context}`], {
-      [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
     });
 
@@ -1226,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,

package/dist/select/select__filter.js

@@ -1,4 +1,5 @@
 import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
 import 'prop-types';
 import 'classnames';
@@ -7,7 +8,7 @@ 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 '@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

@@ -21,6 +21,9 @@ 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 {
@@ -105,7 +108,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';
@@ -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';
@@ -60,7 +62,7 @@ import '../list/list__hint.js';
 import '../list/consts.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';
@@ -164,6 +166,9 @@ class SelectPopup extends PureComponent {
     });
 
     _defineProperty(this, "getSelectAll", () => {
+      var _multiple$renderSelec;
+
+      const multiple = this.props.multiple;
       const activeFilters = this.props.data.filter(item => !item.disabled);
       return Array.isArray(this.props.selected) && /*#__PURE__*/React.createElement("div", {
         className: modules_b607bec2.selectAll
@@ -171,9 +176,9 @@ class SelectPopup extends PureComponent {
         text: true,
         inline: true,
         onClick: this.handleSelectAll
-      }, activeFilters.length !== this.props.selected.length ? 'Select all' : 'Deselect all'), /*#__PURE__*/React.createElement(Text, {
+      }, activeFilters.length !== this.props.selected.length ? multiple.selectAllLabel || 'Select all' : multiple.deselectAllLabel || 'Deselect all'), ((_multiple$renderSelec = multiple.renderSelectedItemsDescription) === null || _multiple$renderSelec === void 0 ? void 0 : _multiple$renderSelec.call(multiple, this.props.selected, activeFilters.length)) || /*#__PURE__*/React.createElement(Text, {
         info: true
-      }, `${this.props.selected.length} selected`));
+      }, "".concat(this.props.selected.length, " selected")));
     });
 
     _defineProperty(this, "_adjustListMaxHeight", memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {

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

@@ -1,17 +1,20 @@
+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-down';
-import '@jetbrains/icons/close';
+import '@jetbrains/icons/close-12px';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
@@ -57,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';
@@ -435,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
+          });
         }
       }
       /**
@@ -585,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
 
 

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

@@ -1,12 +1,15 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import angular from 'angular';
-import { render, hydrate } from 'react-dom';
 import React from 'react';
+import { render, hydrate } from '../global/react-render-adapter.js';
 import { RerenderableSelect } from '../select/select.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-down';
-import '@jetbrains/icons/close';
+import '@jetbrains/icons/close-12px';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
@@ -53,7 +56,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';
@@ -80,7 +83,7 @@ import '../text/text.js';
 import '../_helpers/select__filter.js';
 
 class SelectLazy {
-  constructor(container, props, ctrl, type) {
+  constructor(container, props, ctrl, type, selectRef) {
     _defineProperty(this, "onClick", () => {
       this._clickHandler();
     });
@@ -90,6 +93,13 @@ class SelectLazy {
     this.props = props || {};
     this.type = type;
     this.node = container;
+    this.selectInstance = null;
+
+    this.selectRef = node => {
+      this.selectInstance = node;
+      selectRef(node);
+    };
+
     this._popup = {
       isVisible: angular.noop
     };
@@ -114,15 +124,21 @@ class SelectLazy {
   }
 
   attachEvents() {
-    this.container.addEventListener('click', this.onClick);
+    this.container.addEventListener('click', this.onClick, {
+      capture: true
+    });
   }
 
   detachEvents() {
-    this.container.removeEventListener('click', this.onClick);
+    this.container.removeEventListener('click', this.onClick, {
+      capture: true
+    });
   }
 
   render(props) {
-    this.reactSelect = /*#__PURE__*/React.createElement(RerenderableSelect, Object.assign({}, this.props, props || {}));
+    this.reactSelect = /*#__PURE__*/React.createElement(RerenderableSelect, _extends({}, Object.assign({}, this.props, props || {}), {
+      ref: this.selectRef
+    }));
     this.props = this.reactSelect.props;
 
     if (this.type !== 'dropdown') {
@@ -136,12 +152,14 @@ class SelectLazy {
     this.detachEvents();
 
     if (this.type === 'dropdown') {
-      this.ctrl.selectInstance = render(this.reactSelect, this.container);
+      var _this$selectInstance, _this$selectInstance$;
+
+      render(this.reactSelect, this.container); // Hack for React17, where click event is not triggered on just rendered Select node
+
+      (_this$selectInstance = this.selectInstance) === null || _this$selectInstance === void 0 ? void 0 : (_this$selectInstance$ = _this$selectInstance._openPopupIfClosed) === null || _this$selectInstance$ === void 0 ? void 0 : _this$selectInstance$.call(_this$selectInstance);
     } else {
-      this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
+      hydrate(this.reactSelect, this.container);
     }
-
-    this.ctrl.selectInstance._openPopupIfClosed();
   }
 
 }

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

@@ -10,7 +10,7 @@ class Options {
     let match;
 
     if (!(match = optionsString.match(this.constructor.OPTIONS_REGEXP))) {
-      throw new Error('Bad rgSelect expression format. Expected: [{item}] [[as] item.text] [select as item.selectLabel]' + ` [describe as {item.description}] [for] {item} in {items|dataSource(query)} [track by item.id], Received: ${optionsString}`);
+      throw new Error('Bad rgSelect expression format. Expected: [{item}] [[as] item.text] [select as item.selectLabel]' + " [describe as {item.description}] [for] {item} in {items|dataSource(query)} [track by item.id], Received: ".concat(optionsString));
     }
     /**
      * Now we can write only `item.value as item.label for item in items`
@@ -83,7 +83,7 @@ class Options {
     });
 
     if (matchedOptions.length > 1) {
-      throw new Error(`Error(rg-select): You can not have two options with same value(${toString(value)})`);
+      throw new Error("Error(rg-select): You can not have two options with same value(".concat(toString(value), ")"));
     }
 
     return matchedOptions[0];

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

@@ -12,12 +12,10 @@ export default function shortcutsHOC<P>(ComposedComponent: ComponentType<P> | st
     new (props: (P & ShortcutsHOCProps) | Readonly<P & ShortcutsHOCProps>): {
         _shortcutsScopeUid: string;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & ShortcutsHOCProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P & ShortcutsHOCProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -38,12 +36,10 @@ export default function shortcutsHOC<P>(ComposedComponent: ComponentType<P> | st
     new (props: P & ShortcutsHOCProps, context: any): {
         _shortcutsScopeUid: string;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & ShortcutsHOCProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P & ShortcutsHOCProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;