@jetbrains/ring-ui 4.1.28 → 4.2.2

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/analytics/analytics__ga-plugin.js

@@ -36,6 +36,7 @@ export default class AnalyticsGAPlugin {
     }
 
     ga('set', 'anonymizeIp', true);
+    ga('set', 'location', domain || '/');
     ga('set', 'allowAdFeatures', false);
   }
 

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/select.examples.js

@@ -5,6 +5,8 @@ import warningIcon from '@jetbrains/icons/warning';
 import reactDecorator from '../../.storybook/react-decorator';
 import hubConfig from '../../.storybook/hub-config';
 
+import Text from '../text/text';
+
 import Link from '@jetbrains/ring-ui/components/link/link';
 import Popup from '@jetbrains/ring-ui/components/popup/popup';
 import List from '@jetbrains/ring-ui/components/list/list';
@@ -961,6 +963,31 @@ export const multipleWithSelectAllAndDisabledItem = args => <Select {...args}/>;
 multipleWithSelectAllAndDisabledItem.storyName = 'multiple with select all and disabled item';
 multipleWithSelectAllAndDisabledItem.parameters = {hermione: {skip: true}};
 
+export const multipleWithSelectAllAndCustomLabels = args => <Select {...args}/>;
+{
+  const data = [
+    {label: 'One long label', key: '1'},
+    {label: 'Two long label', key: '2'},
+    {label: 'Three long label', key: '3'}
+  ];
+
+  const multipleConfig = {
+    selectAll: true,
+    selectAllLabel: 'All Items',
+    deselectAllLabel: 'None Items',
+    renderSelectedItemsDescription: selected => <Text info>{`${selected.length} items selected`}</Text>
+  };
+
+  multipleWithSelectAllAndCustomLabels.args = {
+    filter: true,
+    multiple: multipleConfig,
+    selected: [data[1]],
+    data
+  };
+}
+
+multipleWithSelectAllAndCustomLabels.storyName = 'multiple with select all and custom labels';
+multipleWithSelectAllAndCustomLabels.parameters = {hermione: {skip: true}};
 
 export const multipleWithLimit = args => <Select {...args}/>;
 {

package/components/select/select__popup.js

@@ -63,7 +63,10 @@ export default class SelectPopup extends PureComponent {
     multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
       label: PropTypes.string,
       limit: PropTypes.number,
-      selectAll: PropTypes.bool
+      selectAll: PropTypes.bool,
+      selectAllLabel: PropTypes.string,
+      deselectAllLabel: PropTypes.string,
+      renderSelectedItemsDescription: PropTypes.func
     })]),
     left: PropTypes.bool,
     loading: PropTypes.bool,
@@ -406,12 +409,15 @@ export default class SelectPopup extends PureComponent {
                 onClick={this.handleSelectAll}
               >
                 {activeFilters.length !== this.props.selected.length
-                  ? 'Select all'
-                  : 'Deselect all'}
+                  ? this.props.multiple.selectAllLabel || 'Select all'
+                  : this.props.multiple.deselectAllLabel || 'Deselect all'}
               </Button>
             )
         }
-        <Text info>{`${this.props.selected.length} selected`}</Text>
+        {this.props.multiple.renderSelectedItemsDescription
+          ?.(this.props.selected, activeFilters.length) || (
+          <Text info>{`${this.props.selected.length} selected`}</Text>
+        )}
       </div>
     );
   };

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/analytics/analytics__ga-plugin.js

@@ -46,6 +46,7 @@ class AnalyticsGAPlugin {
     }
 
     ga('set', 'anonymizeIp', true);
+    ga('set', 'location', domain || '/');
     ga('set', 'allowAdFeatures', false);
   }
 

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';