@jetbrains/ring-ui 4.1.28 → 4.2.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [4.2.0]
+
+### React 18 support
+
+To enable the new root API, add the following code before any rendering:
+```js
+import * as client from 'react-dom/client'
+import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
+
+setClient(client)
+```
+
 ## [4.1.0]
 
 ### Pre-built version

package/components/alert/alert.test.js

@@ -41,11 +41,11 @@ describe('Alert', () => {
     should.not.exist(screen.queryByRole('button', {name: 'close alert'}));
   });
 
-  it('should call onCloseRequest on click by close button', () => {
+  it('should call onCloseRequest on click by close button', async () => {
     const closeSpy = sandbox.spy();
     render(<Alert onCloseRequest={closeSpy}>{'Test element'}</Alert>);
     const closeElement = screen.queryByRole('button', {name: 'close alert'});
-    userEvent.click(closeElement);
+    await userEvent.click(closeElement);
     closeSpy.should.have.been.called;
   });
 

package/components/alert-service/alert-service.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {render} from 'react-dom';
 
+import {render} from '../global/react-render-adapter';
 import getUID from '../global/get-uid';
 
 import Alert, {ANIMATION_TIME, Container as AlertContainer} from '../alert/alert';

package/components/auth-dialog-service/auth-dialog-service.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {render} from 'react-dom';
 
+import {render} from '../global/react-render-adapter';
 import AuthDialog from '../auth-dialog/auth-dialog';
 
 /**

package/components/confirm-service/confirm-service.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {render} from 'react-dom';
 
+import {render} from '../global/react-render-adapter';
 import Confirm from '../confirm/confirm';
 
 /**

package/components/confirm-service/confirm-service.test.js

@@ -1,6 +1,6 @@
 import {Simulate} from 'react-dom/test-utils';
-import {unmountComponentAtNode} from 'react-dom';
 
+import {unmountComponentAtNode} from '../global/react-render-adapter';
 import islandStyles from '../island/island.css';
 
 import confirm, {containerElement} from './confirm-service';

package/components/global/angular-component-factory.js

@@ -1,8 +1,8 @@
 import angular from 'angular';
 
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
 
+import {render, unmountComponentAtNode} from './react-render-adapter';
 import RingAngularComponent from './ring-angular-component';
 
 import DomRenderer from './react-dom-renderer';

package/components/global/react-render-adapter.js

@@ -0,0 +1,36 @@
+// Allows overriding ReactDOM.render when using React 18:
+// import * as client from 'react-dom/client'
+// import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
+//
+// setClient(client)
+import {
+  render as legacyRender,
+  unmountComponentAtNode as legacyUnmountComponentAtNode,
+  hydrate as legacyHydrate
+} from 'react-dom';
+
+/* eslint-disable import/no-mutable-exports */
+export let render = legacyRender;
+export let unmountComponentAtNode = legacyUnmountComponentAtNode;
+export let hydrate = legacyHydrate;
+/* eslint-enable */
+
+export function setClient({createRoot, hydrateRoot}) {
+  const roots = new WeakMap();
+
+  render = (element, container) => {
+    let root = roots.get(container);
+    if (root == null) {
+      root = createRoot(container);
+      roots.set(container, root);
+    }
+    root.render(element);
+  };
+
+  unmountComponentAtNode = container => roots.get(container)?.unmount();
+
+  hydrate = (element, container) => {
+    const root = hydrateRoot(container, element);
+    roots.set(container, root);
+  };
+}

package/components/global/rerender-hoc.js

@@ -1,5 +1,7 @@
 import {createElement} from 'react';
-import {render} from 'react-dom';
+
+import {render} from './react-render-adapter';
+import composeRefs from './composeRefs';
 
 /**
  * Wraps a component to add a "rerender" method
@@ -28,8 +30,9 @@ export default function rerenderHOC(ComposedComponent, {captureNode} = {captureN
       }
 
       this._propsCache = Object.assign({}, this.props, this._propsCache, props);
+      this._propsCache.ref = composeRefs(this._propsCache.ref, callback);
 
-      return render(createElement(this.constructor, this._propsCache), container, callback);
+      render(createElement(this.constructor, this._propsCache), container);
     }
   };
 }

package/components/login-dialog/service.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
+
+import {render, unmountComponentAtNode} from '../global/react-render-adapter';
 
 import LoginDialog from './login-dialog';
 

package/components/select-ng/select-ng.js

@@ -1,8 +1,8 @@
 import angular from 'angular';
 
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
 
+import {render, unmountComponentAtNode} from '../global/react-render-adapter';
 import getEventKey from '../global/get-event-key';
 import Select, {RerenderableSelect} from '../select/select';
 import MessageBundle from '../message-bundle-ng/message-bundle-ng';
@@ -375,9 +375,15 @@ 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);
+        if (ctrl.selectInstance?.node) {
+          ctrl.selectInstance.rerender({...props, ref: selectRef});
         }
       }
 
@@ -516,9 +522,14 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
         ctrl.config = angular.extend({}, ctrl.defaultConfig, ctrl.config || {});
 
         if (getType() === 'suggest' || getType() === 'input') {
-          ctrl.selectInstance = render(<RerenderableSelect {...ctrl.config}/>, container);
+          render(
+            <RerenderableSelect
+              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/components/select-ng/select-ng__lazy.js

@@ -1,17 +1,18 @@
 import angular from 'angular';
 
-import {render, hydrate} from 'react-dom';
 import React from 'react';
 
+import {render, hydrate} from '../global/react-render-adapter';
 import {RerenderableSelect} from '../select/select';
 
 class SelectLazy {
-  constructor(container, props, ctrl, type) {
+  constructor(container, props, ctrl, type, selectRef) {
     this.container = container;
     this.ctrl = ctrl;
     this.props = props || {};
     this.type = type;
     this.node = container;
+    this.selectRef = selectRef;
     this._popup = {
       isVisible: angular.noop
     };
@@ -46,7 +47,12 @@ class SelectLazy {
   }
 
   render(props) {
-    this.reactSelect = <RerenderableSelect {...Object.assign({}, this.props, props || {})}/>;
+    this.reactSelect = (
+      <RerenderableSelect
+        ref={this.selectRef}
+        {...Object.assign({}, this.props, props || {})}
+      />
+    );
     this.props = this.reactSelect.props;
 
     if (this.type !== 'dropdown') {
@@ -58,10 +64,9 @@ class SelectLazy {
   _clickHandler() {
     this.detachEvents();
     if (this.type === 'dropdown') {
-      this.ctrl.selectInstance = render(this.reactSelect, this.container);
-      this.ctrl.selectInstance._openPopupIfClosed();
+      render(this.reactSelect, this.container);
     } else {
-      this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
+      hydrate(this.reactSelect, this.container);
     }
   }
 }

package/components/select-ng/select-ng__lazy.test.js

@@ -67,7 +67,9 @@ describe('Select Lazy', () => {
 
 
   function renderLazySelect(type = 'button') {
-    const lazySelect = new SelectLazy(containerNode, {}, ctrl, type);
+    const lazySelect = new SelectLazy(containerNode, {}, ctrl, type, instance => {
+      ctrl.selectInstance = instance;
+    });
     lazySelect.render();
     return lazySelect;
   }

package/components/table/table.examples.js

@@ -236,7 +236,9 @@ basic.argTypes = {
   },
   caption: {
     control: {disable: true}
-  }
+  },
+  onSelect: {},
+  onReorder: {}
 };
 basic.storyName = 'basic';
 

package/components/tooltip-ng/tooltip-ng.js

@@ -1,9 +1,9 @@
 import angular from 'angular';
 
 import {createElement} from 'react';
-import {render} from 'react-dom';
 import classNames from 'classnames';
 
+import {render} from '../global/react-render-adapter';
 import Popup from '../popup/popup';
 
 import './tooltip-ng.css';
@@ -58,15 +58,18 @@ name.factory('RgTooltipPopup', function RgTooltipPopupDirective() {
       trapFocus: false
     };
 
-    this.renderPopup = props => {
-      this.popup = render(
-        createElement(Popup, {
-          ...this.defaultProps,
-          ...props
-        }, this.text),
-        this.wrapperElement
-      );
-    };
+    this.renderPopup = props => render(
+      createElement(Popup, {
+        ...this.defaultProps,
+        ...props,
+        ref: instance => {
+          if (instance != null) {
+            this.popup = instance;
+          }
+        }
+      }, this.text),
+      this.wrapperElement
+    );
 
     this.displayTooltip = customClass => {
       const text = textGetter();

package/components/user-agreement/service.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
 
+import {render, unmountComponentAtNode} from '../global/react-render-adapter';
 import Storage from '../storage/storage';
 import alertService from '../alert-service/alert-service';
 import Link from '../link/link';

package/dist/alert-service/alert-service.js

@@ -1,10 +1,11 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter.js';
 import getUID from '../global/get-uid.js';
 import Alert, { ANIMATION_TIME } from '../alert/alert.js';
 import Alerts from '../alert/container.js';
+import 'react-dom';
 import 'classnames';
 import 'prop-types';
 import '@jetbrains/icons/exception';

package/dist/auth/auth.js

@@ -11,6 +11,7 @@ import 'react';
 import 'prop-types';
 import '../alert-service/alert-service.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/auth/auth__core.js

@@ -15,6 +15,7 @@ import '../storage/storage.js';
 import '../storage/storage__local.js';
 import '../alert-service/alert-service.js';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/auth/down-notification.js

@@ -6,6 +6,7 @@ import Link from '../link/link.js';
 import Group from '../group/group.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/container.js';

package/dist/auth/iframe-flow.js

@@ -3,9 +3,10 @@ import React from 'react';
 import showAuthDialog from '../login-dialog/service.js';
 import Link from '../link/link.js';
 import AuthResponseParser from './response-parser.js';
+import '../global/react-render-adapter.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react-dom';
 import '../login-dialog/login-dialog.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'prop-types';
 import '../dialog/dialog.js';
 import 'classnames';

package/dist/auth/landing.js

@@ -14,6 +14,7 @@ import './down-notification.js';
 import 'react';
 import 'prop-types';
 import '../alert-service/alert-service.js';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/auth/storage.js

@@ -4,6 +4,7 @@ import '../storage/storage__local.js';
 import '../alert-service/alert-service.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/auth-dialog-service/auth-dialog-service.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter.js';
 import AuthDialog from '../auth-dialog/auth-dialog.js';
-import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react-dom';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.string.replace.js';
 import 'prop-types';
 import 'classnames';

package/dist/auth-ng/auth-ng.js

@@ -12,6 +12,7 @@ import 'react';
 import 'prop-types';
 import '../alert-service/alert-service.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/avatar-editor-ng/avatar-editor-ng.js

@@ -7,6 +7,7 @@ import template from './avatar-editor-ng__template.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/avatar-ng/avatar-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';

package/dist/badge-ng/badge-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';

package/dist/confirm-ng/confirm-ng.js

@@ -2,10 +2,11 @@ import angular from 'angular';
 import confirm from '../confirm-service/confirm-service.js';
 import MessageBundle from '../message-bundle-ng/message-bundle-ng.js';
 import 'react';
+import '../global/react-render-adapter.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react-dom';
 import '../confirm/confirm.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'prop-types';
 import '../dialog/dialog.js';
 import 'classnames';

package/dist/confirm-service/confirm-service.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter.js';
 import Confirm from '../confirm/confirm.js';
-import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react-dom';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'prop-types';
 import '../dialog/dialog.js';
 import 'classnames';

package/dist/data-list-ng/data-list-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';

package/dist/global/angular-component-factory.js

@@ -2,9 +2,10 @@ import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import angular from 'angular';
 import React from 'react';
-import { unmountComponentAtNode, render } from 'react-dom';
+import { unmountComponentAtNode, render } from './react-render-adapter.js';
 import RingAngularComponent from './ring-angular-component.js';
 import Renderer from './react-dom-renderer.js';
+import 'react-dom';
 import 'prop-types';
 
 function getAngularComponentName(name) {

package/dist/global/react-render-adapter.js

@@ -0,0 +1,41 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { render as render$1, unmountComponentAtNode as unmountComponentAtNode$1, hydrate as hydrate$1 } from 'react-dom';
+
+/* eslint-disable import/no-mutable-exports */
+
+let render = render$1;
+let unmountComponentAtNode = unmountComponentAtNode$1;
+let hydrate = hydrate$1;
+/* eslint-enable */
+
+function setClient(_ref) {
+  let {
+    createRoot,
+    hydrateRoot
+  } = _ref;
+  const roots = new WeakMap();
+
+  render = (element, container) => {
+    let root = roots.get(container);
+
+    if (root == null) {
+      root = createRoot(container);
+      roots.set(container, root);
+    }
+
+    root.render(element);
+  };
+
+  unmountComponentAtNode = container => {
+    var _roots$get;
+
+    return (_roots$get = roots.get(container)) === null || _roots$get === void 0 ? void 0 : _roots$get.unmount();
+  };
+
+  hydrate = (element, container) => {
+    const root = hydrateRoot(container, element);
+    roots.set(container, root);
+  };
+}
+
+export { hydrate, render, setClient, unmountComponentAtNode };

package/dist/global/rerender-hoc.js

@@ -1,7 +1,9 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { render } from './react-render-adapter.js';
+import composeRefs from './composeRefs.js';
+import 'react-dom';
 
 /**
  * Wraps a component to add a "rerender" method
@@ -43,7 +45,8 @@ function rerenderHOC(ComposedComponent) {
       }
 
       this._propsCache = Object.assign({}, this.props, this._propsCache, props);
-      return render( /*#__PURE__*/createElement(this.constructor, this._propsCache), container, callback);
+      this._propsCache.ref = composeRefs(this._propsCache.ref, callback);
+      render( /*#__PURE__*/createElement(this.constructor, this._propsCache), container);
     }
 
   };

package/dist/header/header.js

@@ -75,6 +75,7 @@ import '../auth/response-parser.js';
 import 'es6-error';
 import '../auth/down-notification.js';
 import '../alert-service/alert-service.js';
+import '../global/react-render-adapter.js';
 import '../alert/alert.js';
 import '@jetbrains/icons/exception';
 import '@jetbrains/icons/warning';

package/dist/header/smart-profile.js

@@ -43,6 +43,7 @@ import '../link/clickableLink.js';
 import '../_helpers/link.js';
 import '../group/group.js';
 import '../_helpers/group.js';
+import '../global/react-render-adapter.js';
 import '../global/listeners.js';
 import '../http/http.js';
 import '../global/promise-with-timeout.js';

package/dist/header/smart-services.js

@@ -13,6 +13,7 @@ import 'es6-error';
 import '../global/url.js';
 import '../auth/down-notification.js';
 import '../alert-service/alert-service.js';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/login-dialog/service.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { unmountComponentAtNode, render } from 'react-dom';
+import { unmountComponentAtNode, render } from '../global/react-render-adapter.js';
 import LoginDialog from './login-dialog.js';
-import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react-dom';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'prop-types';
 import '../dialog/dialog.js';
 import 'classnames';

package/dist/pager/pager.js

@@ -71,6 +71,8 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
+import '../global/react-render-adapter.js';
+import '../global/composeRefs.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';

package/dist/pager-ng/pager-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';
@@ -76,6 +77,7 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
+import '../global/composeRefs.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';

package/dist/permissions-ng/permissions-ng.js

@@ -14,6 +14,7 @@ import 'react';
 import 'prop-types';
 import '../alert-service/alert-service.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/progress-bar-ng/progress-bar-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';

package/dist/query-assist/query-assist.js

@@ -71,6 +71,8 @@ import 'conic-gradient';
 import '../global/supports-css.js';
 import '../global/inject-styles.js';
 import '../global/radial-gradient-mask.js';
+import '../global/react-render-adapter.js';
+import '../global/composeRefs.js';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
 

package/dist/query-assist-ng/query-assist-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';
@@ -74,6 +75,7 @@ import '../global/supports-css.js';
 import '../global/inject-styles.js';
 import '../global/radial-gradient-mask.js';
 import '../global/rerender-hoc.js';
+import '../global/composeRefs.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';

package/dist/select/select.js

@@ -65,6 +65,8 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../_helpers/input.js';
+import '../global/react-render-adapter.js';
+import '../global/composeRefs.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
 import '../_helpers/inject-styles.js';

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

@@ -1,13 +1,14 @@
+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 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';
@@ -68,6 +69,7 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
+import '../global/composeRefs.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';
@@ -439,9 +441,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
+          });
         }
       }
       /**
@@ -588,9 +600,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,9 +1,10 @@
-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';
@@ -65,6 +66,7 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
+import '../global/composeRefs.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';
@@ -83,7 +85,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();
     });
@@ -93,6 +95,7 @@ class SelectLazy {
     this.props = props || {};
     this.type = type;
     this.node = container;
+    this.selectRef = selectRef;
     this._popup = {
       isVisible: angular.noop
     };
@@ -129,7 +132,9 @@ class SelectLazy {
   }
 
   render(props) {
-    this.reactSelect = /*#__PURE__*/React.createElement(RerenderableSelect, Object.assign({}, this.props, props || {}));
+    this.reactSelect = /*#__PURE__*/React.createElement(RerenderableSelect, _extends({
+      ref: this.selectRef
+    }, Object.assign({}, this.props, props || {})));
     this.props = this.reactSelect.props;
 
     if (this.type !== 'dropdown') {
@@ -143,11 +148,9 @@ class SelectLazy {
     this.detachEvents();
 
     if (this.type === 'dropdown') {
-      this.ctrl.selectInstance = render(this.reactSelect, this.container);
-
-      this.ctrl.selectInstance._openPopupIfClosed();
+      render(this.reactSelect, this.container);
     } else {
-      this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
+      hydrate(this.reactSelect, this.container);
     }
   }
 

package/dist/storage/storage.js

@@ -4,6 +4,7 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import '../alert-service/alert-service.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/storage/storage__local.js

@@ -2,6 +2,7 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import alertService from '../alert-service/alert-service.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../alert/alert.js';

package/dist/table-legacy-ng/table-legacy-ng.js

@@ -23,6 +23,7 @@ import '../global/schedule-raf.js';
 import '../pager-ng/pager-ng.js';
 import '../global/angular-component-factory.js';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/react-dom-renderer.js';
 import 'prop-types';
@@ -88,6 +89,7 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
+import '../global/composeRefs.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';

package/dist/table-legacy-ng/table-legacy-ng__pager.js

@@ -5,6 +5,7 @@ import '../global/angular-component-factory.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';
@@ -78,6 +79,7 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
+import '../global/composeRefs.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';

package/dist/table-ng/smart-table-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';

package/dist/table-ng/table-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';

package/dist/tags-input/tags-input.js

@@ -80,6 +80,8 @@ import '../shortcuts/shortcuts-hoc.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 import '../tag/tag.js';
+import '../global/react-render-adapter.js';
+import '../global/composeRefs.js';
 
 var modules_5aa8aaf3 = {"tagsInput":"tagsInput_rui_1a67","tagsInputLegacyMode":"tagsInputLegacyMode_rui_1a67","tagsList":"tagsList_rui_1a67","tag":"tag_rui_1a67","tagsInputDisabled":"tagsInputDisabled_rui_1a67","underline":"underline_rui_1a67","tagsInputFocused":"tagsInputFocused_rui_1a67","tagsSelect":"tagsSelect_rui_1a67","focusUnderline":"focusUnderline_rui_1a67"};
 

package/dist/tags-input-ng/tags-input-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';
@@ -69,6 +70,7 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
+import '../global/composeRefs.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';

package/dist/toggle-ng/toggle-ng.js

@@ -4,6 +4,7 @@ import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'angular';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';

package/dist/tooltip-ng/tooltip-ng.js

@@ -1,10 +1,11 @@
 import angular from 'angular';
 import { createElement } from 'react';
-import { render } from 'react-dom';
 import classNames from 'classnames';
+import { render } from '../global/react-render-adapter.js';
 import Popup from '../popup/popup.js';
-import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react-dom';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.string.replace.js';
 import 'prop-types';
 import '../global/get-uid.js';
@@ -65,11 +66,14 @@ name.factory('RgTooltipPopup', function RgTooltipPopupDirective() {
       trapFocus: false
     };
 
-    this.renderPopup = props => {
-      this.popup = render( /*#__PURE__*/createElement(Popup, { ...this.defaultProps,
-        ...props
-      }, this.text), this.wrapperElement);
-    };
+    this.renderPopup = props => render( /*#__PURE__*/createElement(Popup, { ...this.defaultProps,
+      ...props,
+      ref: instance => {
+        if (instance != null) {
+          this.popup = instance;
+        }
+      }
+    }, this.text), this.wrapperElement);
 
     this.displayTooltip = customClass => {
       const text = textGetter();

package/dist/user-agreement/service.js

@@ -1,13 +1,14 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { render, unmountComponentAtNode } from '../global/react-render-adapter.js';
 import ActualStorage from '../storage/storage.js';
 import alertService from '../alert-service/alert-service.js';
 import Link from '../link/link.js';
 import Alert from '../alert/alert.js';
 import Group from '../group/group.js';
 import UserAgreement from './user-agreement.js';
+import 'react-dom';
 import '../storage/storage__local.js';
 import '../global/get-uid.js';
 import 'classnames';

package/dist/user-card-ng/user-card-ng.js

@@ -5,6 +5,7 @@ import UserCardTooltip from '../user-card/tooltip.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
+import '../global/react-render-adapter.js';
 import 'react-dom';
 import '../global/ring-angular-component.js';
 import '../global/react-dom-renderer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.1.28",
+  "version": "4.2.0",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -75,22 +75,22 @@
     "@primer/octicons": "^17.0.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-replace": "^4.0.0",
-    "@storybook/addon-a11y": "6.4.19",
-    "@storybook/addon-docs": "6.4.19",
-    "@storybook/addon-essentials": "6.4.19",
-    "@storybook/addon-storyshots": "6.4.3",
-    "@storybook/addon-storyshots-puppeteer": "6.4.3",
-    "@storybook/addon-storysource": "6.4.19",
-    "@storybook/addons": "6.4.19",
-    "@storybook/builder-webpack5": "6.4.19",
-    "@storybook/client-api": "6.4.19",
-    "@storybook/core": "6.4.19",
-    "@storybook/html": "6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/source-loader": "6.4.19",
-    "@storybook/theming": "6.4.19",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^13.5.0",
+    "@storybook/addon-a11y": "6.5.0-alpha.59",
+    "@storybook/addon-docs": "6.5.0-alpha.59",
+    "@storybook/addon-essentials": "6.4.20",
+    "@storybook/addon-storyshots": "6.5.0-alpha.59",
+    "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.59",
+    "@storybook/addon-storysource": "6.5.0-alpha.59",
+    "@storybook/addons": "6.5.0-alpha.59",
+    "@storybook/builder-webpack5": "6.5.0-alpha.59",
+    "@storybook/client-api": "6.5.0-alpha.59",
+    "@storybook/core": "6.5.0-alpha.59",
+    "@storybook/html": "6.5.0-alpha.59",
+    "@storybook/manager-webpack5": "6.5.0-alpha.59",
+    "@storybook/source-loader": "6.5.0-alpha.59",
+    "@storybook/theming": "6.5.0-alpha.59",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.0.4",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "angular": "^1.8.2",
     "angular-mocks": "^1.8.2",
@@ -132,9 +132,9 @@
     "pinst": "^3.0.0",
     "puppeteer": "^13.5.1",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-test-renderer": "^18.0.0",
     "regenerator-runtime": "^0.13.9",
     "rollup": "^2.70.1",
     "rollup-plugin-clear": "^2.0.7",
@@ -184,7 +184,7 @@
     "deep-equal": "^2.0.4",
     "element-resize-detector": "^1.2.4",
     "es6-error": "^4.1.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "extricate-loader": "^3.0.0",
     "fastdom": "^1.0.10",
     "file-loader": "^6.2.0",
@@ -221,5 +221,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "9c606e0eacffbd1a127f595173026e100e48671e"
+  "gitHead": "986c4b2e86d7e83388dc77b38bd9d62e1657b747"
 }