@jetbrains/ring-ui 7.0.10 → 7.0.12

package/components/list/list.js

@@ -1,3 +1,5 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * @name List
  */
@@ -351,7 +353,7 @@ export default class List extends Component {
         // top and bottom margins
         if (index === 0 || index === this.props.data.length + 1 || item.rgItemType === Type.MARGIN) {
             itemKey = key || `${Type.MARGIN}_${index}`;
-            el = <div style={{ height: Dimension.MARGIN }}/>;
+            el = _jsx("div", { style: { height: Dimension.MARGIN } });
         }
         else {
             // Hack around SelectNG implementation
@@ -408,15 +410,9 @@ export default class List extends Component {
                 default:
                     throw new Error(`Unknown menu element type: ${itemProps.rgItemType}`);
             }
-            el = <ItemComponent {...itemProps} key={itemProps.key}/>;
+            el = _createElement(ItemComponent, { ...itemProps, key: itemProps.key });
         }
-        return parent ? (<CellMeasurer cache={this._cache} key={itemKey} parent={parent} rowIndex={index} columnIndex={0}>
-        {({ registerChild }) => (<div ref={registerChild} style={style} role="row" aria-selected={isActive} id={itemId}>
-            <div role="cell">{el}</div>
-          </div>)}
-      </CellMeasurer>) : (<div role="row" aria-selected={isActive} id={itemId} key={itemKey}>
-        <div role="cell">{el}</div>
-      </div>);
+        return parent ? (_jsx(CellMeasurer, { cache: this._cache, parent: parent, rowIndex: index, columnIndex: 0, children: ({ registerChild }) => (_jsx("div", { ref: registerChild, style: style, role: "row", "aria-selected": isActive, id: itemId, children: _jsx("div", { role: "cell", children: el }) })) }, itemKey)) : (_jsx("div", { role: "row", "aria-selected": isActive, id: itemId, children: _jsx("div", { role: "cell", children: el }) }, itemKey));
     };
     addItemDataTestToProp = (props) => {
         props['data-test'] = dataTests('ring-list-item', props['data-test']);
@@ -437,24 +433,20 @@ export default class List extends Component {
     }
     renderVirtualizedInner({ height, maxHeight, autoHeight = false, rowCount, isScrolling, onChildScroll = noop, scrollTop, registerChild, }) {
         const dirOverride = { direction: 'inherit' }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
-        return (<AutoSizer disableHeight onResize={this.props.onResize}>
-        {({ width }) => (<div ref={registerChild}>
-            <VirtualizedList aria-label={this.props.ariaLabel} ref={this.virtualizedListRef} className={classNames('ring-list__i', { [styles.overscrollNone]: this.props.preventListOverscroll })} autoHeight={autoHeight} style={maxHeight ? { maxHeight, height: 'auto', ...dirOverride } : dirOverride} autoContainerWidth height={height} width={width} isScrolling={isScrolling} onScroll={e => {
-                    onChildScroll(e);
-                    this.scrollEndHandler();
-                }} scrollTop={scrollTop} rowCount={rowCount} estimatedRowSize={this.defaultItemHeight()} rowHeight={this._cache.rowHeight} rowRenderer={this.renderItem} overscanRowCount={this._bufferSize} 
-            // ensure rerendering
-            noop={() => { }} scrollToIndex={!this.props.disableScrollToActive && this.state.needScrollToActive && this.state.activeIndex != null
-                    ? this.state.activeIndex + 1
-                    : undefined} scrollToAlignment="center" deferredMeasurementCache={this._cache} onRowsRendered={this.checkOverflow}/>
-          </div>)}
-      </AutoSizer>);
+        return (_jsx(AutoSizer, { disableHeight: true, onResize: this.props.onResize, children: ({ width }) => (_jsx("div", { ref: registerChild, children: _jsx(VirtualizedList, { "aria-label": this.props.ariaLabel, ref: this.virtualizedListRef, className: classNames('ring-list__i', { [styles.overscrollNone]: this.props.preventListOverscroll }), autoHeight: autoHeight, style: maxHeight ? { maxHeight, height: 'auto', ...dirOverride } : dirOverride, autoContainerWidth: true, height: height, width: width, isScrolling: isScrolling, onScroll: e => {
+                        onChildScroll(e);
+                        this.scrollEndHandler();
+                    }, scrollTop: scrollTop, rowCount: rowCount, estimatedRowSize: this.defaultItemHeight(), rowHeight: this._cache.rowHeight, rowRenderer: this.renderItem, overscanRowCount: this._bufferSize, 
+                    // ensure rerendering
+                    noop: () => { }, scrollToIndex: !this.props.disableScrollToActive && this.state.needScrollToActive && this.state.activeIndex != null
+                        ? this.state.activeIndex + 1
+                        : undefined, scrollToAlignment: "center", deferredMeasurementCache: this._cache, onRowsRendered: this.checkOverflow }) })) }));
     }
     renderVirtualized(maxHeight, rowCount) {
         if (maxHeight) {
             return this.renderVirtualizedInner({ height: maxHeight, maxHeight, rowCount });
         }
-        return (<WindowScroller>{props => this.renderVirtualizedInner({ ...props, rowCount, autoHeight: true })}</WindowScroller>);
+        return (_jsx(WindowScroller, { children: props => this.renderVirtualizedInner({ ...props, rowCount, autoHeight: true }) }));
     }
     renderSimple(maxHeight, rowCount) {
         const items = [];
@@ -464,11 +456,7 @@ export default class List extends Component {
                 isScrolling: this.state.scrolling,
             }));
         }
-        return (<div className={classNames('ring-list__i', styles.simpleInner)} onScroll={this.scrollHandler} onMouseMove={this.mouseHandler}>
-        <div aria-label={this.props.ariaLabel} role="grid" style={maxHeight ? { maxHeight: this.getVisibleListHeight(maxHeight) } : undefined}>
-          {items}
-        </div>
-      </div>);
+        return (_jsx("div", { className: classNames('ring-list__i', styles.simpleInner), onScroll: this.scrollHandler, onMouseMove: this.mouseHandler, children: _jsx("div", { "aria-label": this.props.ariaLabel, role: "grid", style: maxHeight ? { maxHeight: this.getVisibleListHeight(maxHeight) } : undefined, children: items }) }));
     }
     id = getUID('list-');
     shortcutsScope = this.id;
@@ -490,16 +478,8 @@ export default class List extends Component {
         const rowCount = this.props.data.length + 2;
         const maxHeight = this.props.maxHeight && this.getVisibleListHeight(this.props.maxHeight);
         const classes = classNames(styles.list, this.props.className);
-        return (<>
-        <ActiveItemContext.Updater value={this.getId(this.state.activeItem)} skipUpdate={this.props.hidden || !isActivatable(this.state.activeItem)}/>
-        <div id={this.props.id} ref={this.containerRef} className={classes} onMouseOut={this.props.onMouseOut} onBlur={this.props.onMouseOut} data-test="ring-list">
-          {this.props.shortcuts && (<Shortcuts map={this.props.shortcutsMap ? { ...this.shortcutsMap, ...this.props.shortcutsMap } : this.shortcutsMap} scope={this.shortcutsScope}/>)}
-          {this.props.renderOptimization
-                ? this.renderVirtualized(maxHeight, rowCount)
-                : this.renderSimple(maxHeight, rowCount)}
-          {this.state.hasOverflow && !this.state.scrolledToBottom && <div className={styles.fade} style={fadeStyles}/>}
-          {hint && <ListHint label={hint}/>}
-        </div>
-      </>);
+        return (_jsxs(_Fragment, { children: [_jsx(ActiveItemContext.Updater, { value: this.getId(this.state.activeItem), skipUpdate: this.props.hidden || !isActivatable(this.state.activeItem) }), _jsxs("div", { id: this.props.id, ref: this.containerRef, className: classes, onMouseOut: this.props.onMouseOut, onBlur: this.props.onMouseOut, "data-test": "ring-list", children: [this.props.shortcuts && (_jsx(Shortcuts, { map: this.props.shortcutsMap ? { ...this.shortcutsMap, ...this.props.shortcutsMap } : this.shortcutsMap, scope: this.shortcutsScope })), this.props.renderOptimization
+                            ? this.renderVirtualized(maxHeight, rowCount)
+                            : this.renderSimple(maxHeight, rowCount), this.state.hasOverflow && !this.state.scrolledToBottom && _jsx("div", { className: styles.fade, style: fadeStyles }), hint && _jsx(ListHint, { label: hint })] })] }));
     }
 }

package/components/list/list__custom.d.ts

@@ -3,5 +3,5 @@ import * as React from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListCustom<T> extends PureComponent<ListDataItemProps<T>> {
     handleKeyPress: (event: React.KeyboardEvent) => void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/list/list__custom.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
-import * as React from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import getEventKey from '../global/get-event-key';
@@ -23,8 +23,6 @@ export default class ListCustom extends PureComponent {
         }, restProps['data-test']);
         const content = typeof template === 'function' ? template(this.props) : template;
         const TagName = tagName || 'span';
-        return (<TagName role={role || 'button'} tabIndex={tabIndex} onClick={onClick} onKeyPress={this.handleKeyPress} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} data-test={dataTest}>
-        {content}
-      </TagName>);
+        return (_jsx(TagName, { role: role || 'button', tabIndex: tabIndex, onClick: onClick, onKeyPress: this.handleKeyPress, onMouseOver: onMouseOver, onFocus: onMouseOver, onMouseUp: onMouseUp, className: classes, "data-test": dataTest, children: content }));
     }
 }

package/components/list/list__hint.d.ts

@@ -7,5 +7,5 @@ export interface ListHintProps {
  * @extends {ReactComponent}
  */
 export default class ListHint extends PureComponent<ListHintProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/list/list__hint.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classnames from 'classnames';
 import styles from './list.css';
@@ -7,8 +8,6 @@ import styles from './list.css';
  */
 export default class ListHint extends PureComponent {
     render() {
-        return (<span className={classnames(styles.item, styles.hint)} data-test="ring-list-hint">
-        {this.props.label}
-      </span>);
+        return (_jsx("span", { className: classnames(styles.item, styles.hint), "data-test": "ring-list-hint", children: this.props.label }));
     }
 }

package/components/list/list__item.d.ts

@@ -4,5 +4,5 @@ export default class ListItem<T> extends PureComponent<ListDataItemProps<T>> {
     id: string;
     stopBubbling: (e: SyntheticEvent) => void;
     private _isString;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/list/list__item.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -53,36 +54,7 @@ export default class ListItem extends PureComponent {
             'ring-list-item-action': !disabled,
             'ring-list-item-selected': checkbox,
         }, restProps['data-test']);
-        const labelElement = (<span className={styles.label} title={computedTitle} data-test="ring-list-item-label">
-        {label}
-      </span>);
-        return (<div className={styles.itemContainer} data-test={dataTest}>
-        {showCheckbox && (<div className={styles.checkboxContainer}>
-            <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
-          </div>)}
-        <button id={this.id} type="button" tabIndex={tabIndex} onClick={onClick} onMouseOver={onMouseOver} onMouseDown={onMouseDown} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} style={style} disabled={disabled}>
-          <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
-            {!showCheckbox && (<div className={styles.left}>
-                {leftNodes}
-                {glyph && (<Icon className={styles.glyph} glyph={glyph} size={this.props.iconSize} suppressSizeWarning={this.props.suppressSizeWarning}/>)}
-                {(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
-              </div>)}
-
-            {labelWrapper ? labelWrapper(labelElement) : labelElement}
-
-            {description && (<span className={styles.description} data-test="ring-list-item-description">
-                {description}
-              </span>)}
-
-            <div className={styles.right}>
-              {rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} suppressSizeWarning={this.props.suppressSizeWarning} size={this.props.iconSize}/>)}
-              {icon && <div className={styles.icon} style={{ backgroundImage: `url("${icon}")` }}/>}
-              {rightNodes}
-            </div>
-          </div>
-
-          {details && <div className={detailsClasses}>{details}</div>}
-        </button>
-      </div>);
+        const labelElement = (_jsx("span", { className: styles.label, title: computedTitle, "data-test": "ring-list-item-label", children: label }));
+        return (_jsxs("div", { className: styles.itemContainer, "data-test": dataTest, children: [showCheckbox && (_jsx("div", { className: styles.checkboxContainer, children: _jsx(Checkbox, { "aria-labelledby": this.id, checked: checkbox, disabled: disabled, onChange: onCheckboxChange, onClick: this.stopBubbling }) })), _jsxs("button", { id: this.id, type: "button", tabIndex: tabIndex, onClick: onClick, onMouseOver: onMouseOver, onMouseDown: onMouseDown, onFocus: onMouseOver, onMouseUp: onMouseUp, className: classes, style: style, disabled: disabled, children: [_jsxs("div", { className: styles.top, onMouseOut: this.stopBubbling, onBlur: this.stopBubbling, children: [!showCheckbox && (_jsxs("div", { className: styles.left, children: [leftNodes, glyph && (_jsx(Icon, { className: styles.glyph, glyph: glyph, size: this.props.iconSize, suppressSizeWarning: this.props.suppressSizeWarning })), (avatar || shouldShowGeneratedAvatar) && (_jsx(Avatar, { className: styles.avatar, url: avatar, size: AvatarSize.Size20, subavatar: subavatar, username: username }))] })), labelWrapper ? labelWrapper(labelElement) : labelElement, description && (_jsx("span", { className: styles.description, "data-test": "ring-list-item-description", children: description })), _jsxs("div", { className: styles.right, children: [rightGlyph && (_jsx(Icon, { className: styles.rightGlyph, glyph: rightGlyph, suppressSizeWarning: this.props.suppressSizeWarning, size: this.props.iconSize })), icon && _jsx("div", { className: styles.icon, style: { backgroundImage: `url("${icon}")` } }), rightNodes] })] }), details && _jsx("div", { className: detailsClasses, children: details })] })] }));
     }
 }

package/components/list/list__link.d.ts

@@ -5,5 +5,5 @@ import { ListDataItemProps } from './consts';
  * @extends {ReactComponent}
  */
 export default class ListLink<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/list/list__link.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import Link, { linkHOC } from '../link/link';
@@ -16,8 +17,6 @@ export default class ListLink extends PureComponent {
             [styles.scrolling]: scrolling,
         });
         const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
-        return (<Comp pseudo={!this.props.href} {...restProps} hover={hover && !disabled} className={classes} data-test={dataTests('ring-list-link', dataTest)}>
-        {label ?? children}
-      </Comp>);
+        return (_jsx(Comp, { pseudo: !this.props.href, ...restProps, hover: hover && !disabled, className: classes, "data-test": dataTests('ring-list-link', dataTest), children: label ?? children }));
     }
 }

package/components/list/list__separator.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListSeparator<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/list/list__separator.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import styles from './list.css';
@@ -7,8 +8,6 @@ export default class ListSeparator extends PureComponent {
         const classes = classNames(styles.separator, className, {
             [styles.separator_first]: isFirst,
         });
-        return (<span data-test="ring-list-separator" className={classes}>
-        {description}
-      </span>);
+        return (_jsx("span", { "data-test": "ring-list-separator", className: classes, children: description }));
     }
 }

package/components/list/list__title.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListTitle<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/list/list__title.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classnames from 'classnames';
 import styles from './list.css';
@@ -7,13 +8,6 @@ export default class ListTitle extends PureComponent {
         const classes = classnames(styles.title, className, {
             [styles.title_first]: isFirst,
         });
-        return (<span className={classes} data-test="ring-list-title">
-        <span className={classnames(styles.label, styles.text)} data-test="ring-list-title-label">
-          {label}
-        </span>
-        <div className={styles.description} data-test="ring-list-title-description">
-          {description}
-        </div>
-      </span>);
+        return (_jsxs("span", { className: classes, "data-test": "ring-list-title", children: [_jsx("span", { className: classnames(styles.label, styles.text), "data-test": "ring-list-title-label", children: label }), _jsx("div", { className: styles.description, "data-test": "ring-list-title-description", children: description })] }));
     }
 }

package/components/loader/loader.d.ts

@@ -14,5 +14,5 @@ export default class Loader extends PureComponent<LoaderProps> {
     componentWillUnmount(): void;
     loader?: LoaderCore;
     initLoader: (el: Node | null) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/loader/loader.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import dataTests from '../global/data-tests';
 import LoaderCore from './loader__core';
@@ -29,6 +30,6 @@ export default class Loader extends PureComponent {
     };
     render() {
         const { message, size, colors, 'data-test': dataTest, stop, deterministic, ...restProps } = this.props;
-        return <div data-test={dataTests('ring-loader', dataTest)} {...restProps} ref={this.initLoader}/>;
+        return _jsx("div", { "data-test": dataTests('ring-loader', dataTest), ...restProps, ref: this.initLoader });
     }
 }

package/components/loader-inline/loader-inline.d.ts

@@ -6,7 +6,7 @@ export interface LoaderInlineProps extends HTMLAttributes<HTMLDivElement> {
  * @name Loader Inline
  */
 declare class LoaderInline extends PureComponent<LoaderInlineProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
 export default LoaderInline;

package/components/loader-inline/loader-inline.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -9,11 +10,8 @@ class LoaderInline extends PureComponent {
     render() {
         const { className, 'data-test': dataTest, children, ...restProps } = this.props;
         const classes = classNames(styles.loader, className);
-        const loader = <div {...restProps} data-test={dataTests('ring-loader-inline', dataTest)} className={classes}/>;
-        return children ? (<>
-        {loader}
-        <span className={styles.children}>{children}</span>
-      </>) : (loader);
+        const loader = _jsx("div", { ...restProps, "data-test": dataTests('ring-loader-inline', dataTest), className: classes });
+        return children ? (_jsxs(_Fragment, { children: [loader, _jsx("span", { className: styles.children, children: children })] })) : (loader);
     }
 }
 export default LoaderInline;

package/components/loader-screen/loader-screen.d.ts

@@ -7,5 +7,5 @@ export interface LoaderScreenProps extends LoaderProps {
  * @name Loader Screen
  */
 export default class LoaderScreen extends PureComponent<LoaderScreenProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/loader-screen/loader-screen.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import Loader from '../loader/loader';
@@ -12,8 +13,6 @@ export default class LoaderScreen extends PureComponent {
         const loaderClasses = classNames(className, styles.loader, {
             [styles.loaderWithoutSpacing]: !message,
         });
-        return (<div className={containerClasses}>
-        <Loader {...restProps} message={message} className={loaderClasses}/>
-      </div>);
+        return (_jsx("div", { className: containerClasses, children: _jsx(Loader, { ...restProps, message: message, className: loaderClasses }) }));
     }
 }

package/components/login-dialog/login-dialog.d.ts

@@ -31,6 +31,6 @@ export default class LoginDialog extends Component<LoginDialogProps> {
     showFallbackTimout?: number;
     startFallbackCountdown(): void;
     onMessage: (event: MessageEvent) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;

package/components/login-dialog/login-dialog.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
 import Dialog from '../dialog/dialog';
 import { Content } from '../island/island';
@@ -60,14 +61,6 @@ export default class LoginDialog extends Component {
         const { show, className, url, loadingMessage, renderFallbackLink, onCancel } = this.props;
         const { loading, height, width, loggingIn, showFallbackLink } = this.state;
         const iFrameStyle = { height, width };
-        return (<Dialog data-test="ring-login-dialog" className={className} contentClassName={styles.dialogContent} trapFocus autoFocusFirst={false} show={show} showCloseButton onCloseAttempt={onCancel}>
-        <Content>
-          <iframe title="Login dialog" style={iFrameStyle} src={url} className={styles.iFrame} scrolling="no"/>
-        </Content>
-
-        {loading && <LoaderScreen message={loadingMessage} containerClassName={styles.nonOpaqueLoader}/>}
-
-        {showFallbackLink && <div className={styles.fallbackLinkContainer}>{renderFallbackLink(loggingIn)}</div>}
-      </Dialog>);
+        return (_jsxs(Dialog, { "data-test": "ring-login-dialog", className: className, contentClassName: styles.dialogContent, trapFocus: true, autoFocusFirst: false, show: show, showCloseButton: true, onCloseAttempt: onCancel, children: [_jsx(Content, { children: _jsx("iframe", { title: "Login dialog", style: iFrameStyle, src: url, className: styles.iFrame, scrolling: "no" }) }), loading && _jsx(LoaderScreen, { message: loadingMessage, containerClassName: styles.nonOpaqueLoader }), showFallbackLink && _jsx("div", { className: styles.fallbackLinkContainer, children: renderFallbackLink(loggingIn) })] }));
     }
 }

package/components/login-dialog/service.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 import LoginDialog from './login-dialog';
@@ -7,9 +8,7 @@ const reactRoot = createRoot(containerElement);
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
-    reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
-      <LoginDialog {...props}/>
-    </ControlsHeightContext.Provider>);
+    reactRoot.render(_jsx(ControlsHeightContext.Provider, { value: getGlobalControlsHeight(), children: _jsx(LoginDialog, { ...props }) }));
 }
 function noop() { }
 export default function showAuthDialog(props = { onCancel: noop }) {

package/components/markdown/markdown.d.ts

@@ -8,5 +8,5 @@ export interface MarkdownProps {
  * @name Markdown
  */
 export default class Markdown extends PureComponent<MarkdownProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/markdown/markdown.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import headingStyles from '../heading/heading.css';
@@ -13,8 +14,6 @@ export default class Markdown extends PureComponent {
             [styles.markdown]: !inline,
             [styles.inline]: inline,
         });
-        return (<div data-test="ring-markdown" className={classes}>
-        {children}
-      </div>);
+        return (_jsx("div", { "data-test": "ring-markdown", className: classes, children: children }));
     }
 }

package/components/message/message.d.ts

@@ -49,7 +49,7 @@ export default class Message extends Component<MessageProps> {
     node?: HTMLElement | null;
     popupRef: (el: Popup | null) => void;
     getTailOffset(): number;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
 export {};

package/components/message/message.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import gift from '@jetbrains/icons/gift';
@@ -97,26 +98,6 @@ export default class Message extends Component {
         const tailClasses = classNames(styles.tail, tailClassName);
         const popupDirections = this.props.direction ? [this.props.direction] : this.props.directions;
         const { direction } = this.state;
-        return (<I18nContext.Consumer>
-        {({ translate }) => (<WithThemeClasses theme={theme}>
-            {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
-                <ThemeProvider theme={theme} passToPopups>
-                  {direction && <div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>}
-
-                  {icon && <Icon className={styles.icon} glyph={icon}/>}
-                  {title && (<h1 data-test="rgMessageTitle" className={styles.title}>
-                      {title}
-                    </h1>)}
-                  {children && <div className={styles.description}>{children}</div>}
-                  {(onClose || buttonProps) && (<Button className={styles.gotIt} onClick={onClose} primary {...buttonProps}>
-                      {translations?.gotIt ?? translate('gotIt')}
-                    </Button>)}
-                  {onDismiss && (<Button onClick={onDismiss} inline>
-                      {translations?.dismiss ?? translate('dismiss')}
-                    </Button>)}
-                </ThemeProvider>
-              </Popup>)}
-          </WithThemeClasses>)}
-      </I18nContext.Consumer>);
+        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(WithThemeClasses, { theme: theme, children: themeClasses => (_jsx(Popup, { ref: this.popupRef, hidden: false, directions: popupDirections, className: classNames(classes, themeClasses), offset: UNIT * 2, onDirectionChange: this._onDirectionChange, ...popupProps, children: _jsxs(ThemeProvider, { theme: theme, passToPopups: true, children: [direction && _jsx("div", { className: tailClasses, style: getTailOffsets(this.getTailOffset())[direction] }), icon && _jsx(Icon, { className: styles.icon, glyph: icon }), title && (_jsx("h1", { "data-test": "rgMessageTitle", className: styles.title, children: title })), children && _jsx("div", { className: styles.description, children: children }), (onClose || buttonProps) && (_jsx(Button, { className: styles.gotIt, onClick: onClose, primary: true, ...buttonProps, children: translations?.gotIt ?? translate('gotIt') })), onDismiss && (_jsx(Button, { onClick: onDismiss, inline: true, children: translations?.dismiss ?? translate('dismiss') }))] }) })) })) }));
     }
 }

package/components/pager/pager.d.ts

@@ -59,7 +59,7 @@ export default class Pager extends PureComponent<PagerProps> {
     handleNextClick: () => void;
     handlePageChange: (arg: number) => (event: React.MouseEvent) => void;
     handleLoadMore: (arg: number) => () => void;
-    getButton(page: number, content: ReactNode, key?: number, active?: boolean): React.JSX.Element;
+    getButton(page: number, content: ReactNode, key?: number, active?: boolean): import("react/jsx-runtime").JSX.Element;
     getClickProps(onClick: (e: React.MouseEvent) => void): {
         onPlainLeftClick?: undefined;
         onClick?: undefined;
@@ -70,11 +70,11 @@ export default class Pager extends PureComponent<PagerProps> {
         onClick: (e: React.MouseEvent) => void;
         onPlainLeftClick?: undefined;
     };
-    getPageSizeSelector(): false | React.JSX.Element;
-    getPagerLinks(): React.JSX.Element;
+    getPageSizeSelector(): false | import("react/jsx-runtime").JSX.Element;
+    getPagerLinks(): import("react/jsx-runtime").JSX.Element;
     generateHref(page: number): string | undefined;
-    getPagerContent(): React.JSX.Element;
-    render(): React.JSX.Element;
+    getPagerContent(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
 export {};