@jetbrains/ring-ui-built 6.0.35 → 6.0.36

package/components/tag/tag.d.ts

@@ -1,4 +1,5 @@
-import React, { HTMLAttributes, PureComponent, ReactNode, RefCallback } from 'react';
+import { HTMLAttributes, PureComponent, ReactNode, RefCallback } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 export interface TagRenderProps extends HTMLAttributes<HTMLElement> {

package/components/tag/tag.js

@@ -1,12 +1,13 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.concat.js';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close-12px';
 import Icon from '../icon/icon.js';
 import { Button } from '../button/button.js';
 import { ControlsHeight } from '../global/controls-height.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
@@ -25,9 +26,6 @@ import '../_helpers/button__classes.js';
 
 var modules_2f9be069 = {"max-height":"20px","tag":"tag_rui_5765 resetButton_rui_f295","tagAngled":"tagAngled_rui_5765","light":"light_rui_2ac4","withRemove":"withRemove_rui_5765","container":"container_rui_5765","focused":"focused_rui_5765","content":"content_rui_5765 ellipsis_rui_f295","disabled":"disabled_rui_5765","remove":"remove_rui_5765","removeIcon":"removeIcon_rui_5765","icon":"icon_rui_5765","avatarContainer":"avatarContainer_rui_5765","customIcon":"customIcon_rui_5765","avatarIcon":"avatarIcon_rui_5765"};
 
-/**
- * @name Tag
- */
 var Tag = /*#__PURE__*/function (_PureComponent) {
   function Tag() {
     var _this;
@@ -88,7 +86,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
     key: "renderCustomIcon",
     value: function renderCustomIcon() {
       if (this.props.rgTagIcon) {
-        return /*#__PURE__*/React.createElement(Icon, {
+        return /*#__PURE__*/jsx(Icon, {
           className: modules_2f9be069.icon,
           title: this.props.rgTagTitle,
           glyph: this.props.rgTagIcon
@@ -103,7 +101,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         [modules_2f9be069.customIcon]: this.props.icon,
         [modules_2f9be069.avatarIcon]: avatarSrc
       });
-      return /*#__PURE__*/React.createElement("img", {
+      return /*#__PURE__*/jsx("img", {
         alt: avatarSrc ? 'Avatar' : 'Icon',
         className: classes,
         src: avatarSrc || this.props.icon
@@ -121,9 +119,10 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
     key: "renderAvatar",
     value: function renderAvatar() {
       if (this.props.avatar) {
-        return /*#__PURE__*/React.createElement("span", {
-          className: modules_2f9be069.avatarContainer
-        }, this._renderImageElement(this.props.avatar));
+        return /*#__PURE__*/jsx("span", {
+          className: modules_2f9be069.avatarContainer,
+          children: this._renderImageElement(this.props.avatar)
+        });
       }
       return null;
     }
@@ -131,7 +130,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
     key: "renderRemoveIcon",
     value: function renderRemoveIcon() {
       if (!this.props.readOnly) {
-        return /*#__PURE__*/React.createElement(Button, {
+        return /*#__PURE__*/jsx(Button, {
           title: "Remove",
           icon: closeIcon,
           "data-test": "ring-tag-remove",
@@ -159,22 +158,26 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         backgroundColor = _this$props.backgroundColor,
         textColor = _this$props.textColor,
         render = _this$props.render;
-      return /*#__PURE__*/React.createElement("span", {
-        className: modules_2f9be069.container
-      }, render({
-        'data-test': 'ring-tag',
-        className: classes,
-        ref: this.tagRef,
-        onClick: this.props.onClick,
-        style: {
-          backgroundColor,
-          color: textColor
-        },
-        disabled: this.props.disabled,
-        children: /*#__PURE__*/React.createElement(React.Fragment, null, this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), /*#__PURE__*/React.createElement("span", {
-          className: modules_2f9be069.content
-        }, this.props.children))
-      }), this.renderRemoveIcon());
+      return /*#__PURE__*/jsxs("span", {
+        className: modules_2f9be069.container,
+        children: [render({
+          'data-test': 'ring-tag',
+          className: classes,
+          ref: this.tagRef,
+          onClick: this.props.onClick,
+          style: {
+            backgroundColor,
+            color: textColor
+          },
+          disabled: this.props.disabled,
+          children: /*#__PURE__*/jsxs(Fragment, {
+            children: [this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), /*#__PURE__*/jsx("span", {
+              className: modules_2f9be069.content,
+              children: this.props.children
+            })]
+          })
+        }), this.renderRemoveIcon()]
+      });
     }
   }]);
 }(PureComponent);
@@ -202,7 +205,7 @@ _defineProperty(Tag, "defaultProps", {
   disabled: false,
   focused: false,
   render: function render(props) {
-    return /*#__PURE__*/React.createElement("button", _extends({
+    return /*#__PURE__*/jsx("button", _objectSpread2({
       type: "button"
     }, props));
   }

package/components/tags-input/tags-input.d.ts

@@ -1,4 +1,5 @@
-import React, { PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
+import { Component, PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
@@ -62,7 +63,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
         dataSource: PropTypes.Requireable<(...args: any[]) => any>;
         onAddTag: PropTypes.Requireable<(...args: any[]) => any>;
         onRemoveTag: PropTypes.Requireable<(...args: any[]) => any>;
-        customTagComponent: PropTypes.Requireable<React.Component<unknown, unknown, unknown>>;
+        customTagComponent: PropTypes.Requireable<Component<unknown, unknown, unknown>>;
         maxPopupHeight: PropTypes.Requireable<number>;
         minPopupWidth: PropTypes.Requireable<number>;
         placeholder: PropTypes.Requireable<string>;

package/components/tags-input/tags-input.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, f as _classCallCheck, g as _callSuper, h as _asyncToGenerator, i as _regeneratorRuntime } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper, g as _asyncToGenerator, h as _regeneratorRuntime } 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.index-of.js';
@@ -9,7 +9,7 @@ import 'core-js/modules/es.object.assign.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/es.promise.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import React, { Component, PureComponent } from 'react';
+import { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import getEventKey from '../global/get-event-key.js';
@@ -22,6 +22,7 @@ import { S as Size, m as modules_88cfaf40 } from '../_helpers/input.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import getUID from '../global/get-uid.js';
 import { ControlLabel } from '../control-label/control-label.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.array.slice.js';
@@ -93,6 +94,7 @@ import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
+import '../control-help/control-help.js';
 import '../list/list__custom.js';
 import '../list/list__title.js';
 import '../list/list__separator.js';
@@ -405,56 +407,59 @@ var TagsInput = /*#__PURE__*/function (_PureComponent) {
         [modules_5aa8aaf3.tagsInputDisabled]: disabled,
         [modules_5aa8aaf3.tagsInputFocused]: focused
       }, this.props.className);
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/jsxs("div", {
         // it transfers focus to input
         role: "presentation",
         className: classes,
         onKeyDown: this.handleKeyDown,
         onClick: this.clickHandler,
-        ref: this.nodeRef
-      }, label && /*#__PURE__*/React.createElement(ControlLabel, {
-        htmlFor: this.id,
-        disabled: disabled,
-        type: labelType
-      }, label), /*#__PURE__*/React.createElement(TagsList, {
-        tags: tags,
-        activeIndex: activeIndex,
-        disabled: disabled,
-        canNotBeEmpty: canNotBeEmpty,
-        handleRemove: this.handleRemove,
-        className: modules_5aa8aaf3.tagsList,
-        tagClassName: modules_5aa8aaf3.tag,
-        handleClick: this.handleClick,
-        customTagComponent: this.props.customTagComponent
-      }, /*#__PURE__*/React.createElement(Select, {
-        id: this.id,
-        ref: this.selectRef,
-        size: Select.Size.AUTO,
-        type: Select.Type.INPUT_WITHOUT_CONTROLS,
-        inputPlaceholder: this.props.placeholder,
-        data: this.state.suggestions,
-        className: classNames(modules_5aa8aaf3.tagsSelect),
-        onSelect: this.addTag,
-        onFocus: this._focusHandler,
-        onBlur: this._blurHandler,
-        renderOptimization: this.props.renderOptimization,
-        add: allowAddNewTags ? {
-          prefix: 'Add new tag'
-        } : undefined,
-        onAdd: allowAddNewTags ? this.handleTagCreation : undefined,
-        filter: filter,
-        maxHeight: this.props.maxPopupHeight,
-        minWidth: this.props.minPopupWidth,
-        top: POPUP_VERTICAL_SHIFT,
-        loading: this.state.loading,
-        onFilter: this.loadSuggestions,
-        onBeforeOpen: this.loadSuggestions,
-        onKeyDown: this.handleKeyDown,
-        disabled: this.props.disabled,
-        loadingMessage: this.props.loadingMessage,
-        notFoundMessage: this.props.notFoundMessage,
-        hint: this.props.hint
-      })));
+        ref: this.nodeRef,
+        children: [label && /*#__PURE__*/jsx(ControlLabel, {
+          htmlFor: this.id,
+          disabled: disabled,
+          type: labelType,
+          children: label
+        }), /*#__PURE__*/jsx(TagsList, {
+          tags: tags,
+          activeIndex: activeIndex,
+          disabled: disabled,
+          canNotBeEmpty: canNotBeEmpty,
+          handleRemove: this.handleRemove,
+          className: modules_5aa8aaf3.tagsList,
+          tagClassName: modules_5aa8aaf3.tag,
+          handleClick: this.handleClick,
+          customTagComponent: this.props.customTagComponent,
+          children: /*#__PURE__*/jsx(Select, {
+            id: this.id,
+            ref: this.selectRef,
+            size: Select.Size.AUTO,
+            type: Select.Type.INPUT_WITHOUT_CONTROLS,
+            inputPlaceholder: this.props.placeholder,
+            data: this.state.suggestions,
+            className: classNames(modules_5aa8aaf3.tagsSelect),
+            onSelect: this.addTag,
+            onFocus: this._focusHandler,
+            onBlur: this._blurHandler,
+            renderOptimization: this.props.renderOptimization,
+            add: allowAddNewTags ? {
+              prefix: 'Add new tag'
+            } : undefined,
+            onAdd: allowAddNewTags ? this.handleTagCreation : undefined,
+            filter: filter,
+            maxHeight: this.props.maxPopupHeight,
+            minWidth: this.props.minPopupWidth,
+            top: POPUP_VERTICAL_SHIFT,
+            loading: this.state.loading,
+            onFilter: this.loadSuggestions,
+            onBeforeOpen: this.loadSuggestions,
+            onKeyDown: this.handleKeyDown,
+            disabled: this.props.disabled,
+            loadingMessage: this.props.loadingMessage,
+            notFoundMessage: this.props.notFoundMessage,
+            hint: this.props.hint
+          })
+        })]
+      });
     }
   }], [{
     key: "getDerivedStateFromProps",

package/components/tags-list/tags-list.d.ts

@@ -1,4 +1,5 @@
-import React, { Component, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import { Component, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TagAttrs } from '../tag/tag';
 declare function noop(): void;

package/components/tags-list/tags-list.js

@@ -1,9 +1,10 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _extends, c as _objectWithoutProperties, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, c as _objectWithoutProperties, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.map.js';
-import React, { Component } from 'react';
+import { createElement, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Tag from '../tag/tag.js';
+import { jsxs } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.concat.js';
 import '@jetbrains/icons/close-12px';
 import '../icon/icon.js';
@@ -42,7 +43,7 @@ var TagsList = /*#__PURE__*/function (_Component) {
       var TagComponent = this.props.customTagComponent || Tag;
       var readOnly = this.props.disabled || tag.readOnly || this.props.canNotBeEmpty && this.props.tags.length === 1;
       var tagClassName = this.props.tagClassName;
-      return /*#__PURE__*/React.createElement(TagComponent, _extends({}, tag, {
+      return /*#__PURE__*/createElement(TagComponent, _objectSpread2(_objectSpread2({}, tag), {}, {
         key: tag.key,
         readOnly: readOnly,
         disabled: this.props.disabled || tag.disabled,
@@ -71,10 +72,12 @@ var TagsList = /*#__PURE__*/function (_Component) {
       var tagsList = (this.props.tags || []).map(function (tag, index) {
         return _this.renderTag(tag, _this.props.activeIndex === index);
       });
-      return /*#__PURE__*/React.createElement("div", _extends({
+      return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
         "data-test": "ring-tags-list",
         className: classes
-      }, props), tagsList, children);
+      }, props), {}, {
+        children: [tagsList, children]
+      }));
     }
   }]);
 }(Component);

package/components/text/text.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, HTMLAttributes } from 'react';
+import { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 type TextSize = 's' | 'm' | 'l';
 export interface TextProps extends HTMLAttributes<HTMLElement> {
@@ -18,6 +18,6 @@ export default class Text extends Component<TextProps> {
         className: PropTypes.Requireable<string>;
     };
     static Size: Record<string, TextSize>;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

package/components/text/text.js

@@ -1,8 +1,9 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.map.js';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
 
 var modules_78d1bce6 = {"light":"light_rui_2ac4","text":"text_rui_2f31","sizeS":"sizeS_rui_2f31","sizeM":"sizeM_rui_2f31","sizeL":"sizeL_rui_2f31","info":"info_rui_2f31"};
 
@@ -36,9 +37,11 @@ var Text = /*#__PURE__*/function (_Component) {
         [modules_78d1bce6.sizeM]: size === Text.Size.M,
         [modules_78d1bce6.sizeL]: size === Text.Size.L
       });
-      return /*#__PURE__*/React.createElement("span", _extends({
+      return /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({
         className: classes
-      }, restProps), children);
+      }, restProps), {}, {
+        children: children
+      }));
     }
   }]);
 }(Component);

package/components/toggle/toggle.d.ts

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes, PureComponent, ReactNode } from 'react';
+import { InputHTMLAttributes, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 export declare const Size: {
     Size14: string;
@@ -33,7 +33,7 @@ declare class Toggle extends PureComponent<ToggleProps> {
     static defaultProps: {
         size: string;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type ToggleAttrs = JSX.LibraryManagedAttributes<typeof Toggle, ToggleProps>;
 export default Toggle;

package/components/toggle/toggle.js

@@ -1,9 +1,10 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.object.values.js';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.object.entries.js';
@@ -39,26 +40,30 @@ var Toggle = /*#__PURE__*/function (_PureComponent) {
         onTransitionEnd = _this$props.onTransitionEnd,
         restProps = _objectWithoutProperties(_this$props, _excluded);
       var classes = classNames(className, size, modules_331c5aa7.toggle, disabled && modules_331c5aa7.disabled);
-      return /*#__PURE__*/React.createElement("label", {
+      return /*#__PURE__*/jsxs("label", {
         className: classes,
         title: title,
-        "data-test": joinDataTestAttributes('ring-toggle', dataTest)
-      }, leftLabel && /*#__PURE__*/React.createElement("span", {
-        className: modules_331c5aa7.leftLabel
-      }, leftLabel), /*#__PURE__*/React.createElement("span", {
-        className: modules_331c5aa7.switchWrapper
-      }, /*#__PURE__*/React.createElement("input", _extends({
-        "data-test": "ring-toggle-input"
-      }, restProps, {
-        type: "checkbox",
-        disabled: disabled,
-        className: modules_331c5aa7.input
-      })), /*#__PURE__*/React.createElement("span", {
-        className: classNames(modules_331c5aa7.switch, pale && modules_331c5aa7.paleSwitch),
-        onTransitionEnd: onTransitionEnd
-      })), children && /*#__PURE__*/React.createElement("span", {
-        className: modules_331c5aa7.label
-      }, children));
+        "data-test": joinDataTestAttributes('ring-toggle', dataTest),
+        children: [leftLabel && /*#__PURE__*/jsx("span", {
+          className: modules_331c5aa7.leftLabel,
+          children: leftLabel
+        }), /*#__PURE__*/jsxs("span", {
+          className: modules_331c5aa7.switchWrapper,
+          children: [/*#__PURE__*/jsx("input", _objectSpread2(_objectSpread2({
+            "data-test": "ring-toggle-input"
+          }, restProps), {}, {
+            type: "checkbox",
+            disabled: disabled,
+            className: modules_331c5aa7.input
+          })), /*#__PURE__*/jsx("span", {
+            className: classNames(modules_331c5aa7.switch, pale && modules_331c5aa7.paleSwitch),
+            onTransitionEnd: onTransitionEnd
+          })]
+        }), children && /*#__PURE__*/jsx("span", {
+          className: modules_331c5aa7.label,
+          children: children
+        })]
+      });
     }
   }]);
 }(PureComponent);

package/components/tooltip/tooltip.d.ts

@@ -1,4 +1,5 @@
-import React, { AllHTMLAttributes, Component, ReactNode } from 'react';
+import { AllHTMLAttributes, Component, ReactNode } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import Popup, { PopupAttrs } from '../popup/popup';
 import { Listeners } from '../global/dom';

package/components/tooltip/tooltip.js

@@ -1,12 +1,13 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.concat.js';
-import React, { Component, createContext } from 'react';
+import { createContext, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Popup from '../popup/popup.js';
 import { Listeners } from '../global/dom.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import scheduleRAF from '../global/schedule-raf.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import 'core-js/modules/es.object.entries.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/es.regexp.exec.js';
@@ -183,28 +184,32 @@ var Tooltip = /*#__PURE__*/function (_Component) {
       } : {};
       var onNestedTooltipShow = this.onNestedTooltipShow,
         onNestedTooltipHide = this.onNestedTooltipHide;
-      return /*#__PURE__*/React.createElement(TooltipContext.Provider, {
+      return /*#__PURE__*/jsx(TooltipContext.Provider, {
         value: {
           onNestedTooltipShow,
           onNestedTooltipHide
-        }
-      }, /*#__PURE__*/React.createElement("span", _extends({}, ariaProps, restProps, {
-        ref: this.containerRef,
-        "data-test": joinDataTestAttributes('ring-tooltip', dataTest),
-        "data-test-title": typeof title === 'string' ? title : undefined
-      }), children, /*#__PURE__*/React.createElement(Popup, _extends({
-        trapFocus: false,
-        hidden: !this.state.showPopup || this.state.showNestedPopup,
-        onCloseAttempt: this.hidePopup,
-        maxHeight: 400,
-        className: classNames(modules_cd5e45a9.tooltip, {
-          [modules_cd5e45a9.long]: long
-        }),
-        attached: false,
-        top: 4,
-        dontCloseOnAnchorClick: true,
-        ref: this.popupRef
-      }, popupProps), title)));
+        },
+        children: /*#__PURE__*/jsxs("span", _objectSpread2(_objectSpread2(_objectSpread2({}, ariaProps), restProps), {}, {
+          ref: this.containerRef,
+          "data-test": joinDataTestAttributes('ring-tooltip', dataTest),
+          "data-test-title": typeof title === 'string' ? title : undefined,
+          children: [children, /*#__PURE__*/jsx(Popup, _objectSpread2(_objectSpread2({
+            trapFocus: false,
+            hidden: !this.state.showPopup || this.state.showNestedPopup,
+            onCloseAttempt: this.hidePopup,
+            maxHeight: 400,
+            className: classNames(modules_cd5e45a9.tooltip, {
+              [modules_cd5e45a9.long]: long
+            }),
+            attached: false,
+            top: 4,
+            dontCloseOnAnchorClick: true,
+            ref: this.popupRef
+          }, popupProps), {}, {
+            children: title
+          }))]
+        }))
+      });
     }
   }]);
 }(Component);

package/components/user-agreement/service.js

@@ -1,9 +1,8 @@
-import { b as _createClass, f as _classCallCheck, _ as _defineProperty, h as _asyncToGenerator, d as _objectSpread2, i as _regeneratorRuntime, j as _slicedToArray } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { b as _createClass, e as _classCallCheck, _ as _defineProperty, g as _asyncToGenerator, d as _objectSpread2, h as _regeneratorRuntime, i as _slicedToArray } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/es.promise.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import ActualStorage from '../storage/storage.js';
 import alertService from '../alert-service/alert-service.js';
@@ -12,6 +11,7 @@ import Alert from '../alert/alert.js';
 import Group from '../group/group.js';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height.js';
 import UserAgreement from './user-agreement.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import '../storage/storage__local.js';
 import '../storage/storage__fallback.js';
 import 'core-js/modules/es.array.concat.js';
@@ -23,6 +23,7 @@ import 'core-js/modules/es.array.map.js';
 import '../global/get-uid.js';
 import 'core-js/modules/es.regexp.to-string.js';
 import '../alert/container.js';
+import 'react';
 import 'react-dom';
 import 'classnames';
 import 'prop-types';
@@ -304,13 +305,19 @@ var UserAgreementService = /*#__PURE__*/_createClass(function UserAgreementServi
           return _ref6.apply(this, arguments);
         };
       }();
-      var message = /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement("span", null, userAgreement || 'User Agreement'), /*#__PURE__*/React.createElement(Link, {
-        onClick: onReview,
-        "data-test": "review"
-      }, reviewNow || 'Review now'), /*#__PURE__*/React.createElement(Link, {
-        onClick: onRemind,
-        "data-test": "later"
-      }, remindLater || 'Remind me later'));
+      var message = /*#__PURE__*/jsxs(Group, {
+        children: [/*#__PURE__*/jsx("span", {
+          children: userAgreement || 'User Agreement'
+        }), /*#__PURE__*/jsx(Link, {
+          onClick: onReview,
+          "data-test": "review",
+          children: reviewNow || 'Review now'
+        }), /*#__PURE__*/jsx(Link, {
+          onClick: onRemind,
+          "data-test": "later",
+          children: remindLater || 'Remind me later'
+        })]
+      });
       _this.alertKey = alertService.addAlert(message, Alert.Type.WARNING, 0, {
         closeable: false
       });
@@ -390,9 +397,10 @@ var UserAgreementService = /*#__PURE__*/_createClass(function UserAgreementServi
           translations,
           preview
         }, restOptions);
-        _this.reactRoot.render( /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
-          value: getGlobalControlsHeight()
-        }, /*#__PURE__*/React.createElement(UserAgreement, props)));
+        _this.reactRoot.render( /*#__PURE__*/jsx(ControlsHeightContext.Provider, {
+          value: getGlobalControlsHeight(),
+          children: /*#__PURE__*/jsx(UserAgreement, _objectSpread2({}, props))
+        }));
         if (onDialogShow) {
           onDialogShow();
         }

package/components/user-agreement/user-agreement.d.ts

@@ -1,7 +1,7 @@
 /**
  * @name User Agreement
  */
-import React, { PureComponent, ReactNode } from 'react';
+import { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 declare function noop(): void;
 export interface UserAgreementTranslations {
@@ -54,7 +54,7 @@ export default class UserAgreement extends PureComponent<UserAgreementProps> {
         scrolledDown: boolean;
     };
     onScrollToBottom: () => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type UserAgreementAttrs = JSX.LibraryManagedAttributes<typeof UserAgreement, UserAgreementProps>;
 export {};