@jetbrains/ring-ui 7.0.71 → 7.0.73

package/components/island/{content.js → content.jsx}

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Component } from 'react';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
 import scheduleRAF from '../global/schedule-raf';
-import styles from './island.css';
 import { ScrollHandlerContext } from './adaptive-island-hoc';
+import styles from './island.css';
 const scheduleScrollAction = scheduleRAF();
 const noop = () => { };
 const END_DISTANCE = 16;
@@ -67,12 +66,20 @@ class Content extends Component {
             [styles.withBottomBorder]: bottomBorder && !scrolledToBottom,
         });
         const scrollableWrapperClasses = classNames(styles.scrollableWrapper, scrollableWrapperClassName);
-        return (_jsx("div", { ...restProps, "data-test": 'ring-island-content', className: classes, children: _jsxs("div", { tabIndex: tabIndex, className: scrollableWrapperClasses, ref: this.setScrollableNodeAndCalculatePosition, onScroll: fade ? this.calculateScrollPosition : noop, children: [fade && _jsx("div", { ref: this.setWrapper, children: children }), !fade && children] }) }));
+        return (<div {...restProps} data-test='ring-island-content' className={classes}>
+        <div tabIndex={tabIndex} className={scrollableWrapperClasses} ref={this.setScrollableNodeAndCalculatePosition} onScroll={fade ? this.calculateScrollPosition : noop}>
+          {fade && <div ref={this.setWrapper}>{children}</div>}
+
+          {!fade && children}
+        </div>
+      </div>);
     }
 }
-const ContentWrapper = forwardRef((props, ref) => (_jsx(ScrollHandlerContext.Consumer, { children: onScroll => {
+const ContentWrapper = forwardRef((props, ref) => (<ScrollHandlerContext.Consumer>
+    {onScroll => {
         const addProps = onScroll ? { onScroll, bottomBorder: true } : {};
-        return _jsx(Content, { ...props, ...addProps, ref: ref });
-    } })));
+        return <Content {...props} {...addProps} ref={ref}/>;
+    }}
+  </ScrollHandlerContext.Consumer>));
 ContentWrapper.displayName = 'ContentWrapper';
 export default ContentWrapper;

package/components/island/header.d.ts

@@ -4,5 +4,5 @@ export interface IslandHeaderProps extends HTMLAttributes<HTMLElement> {
     border?: boolean | null | undefined;
     phase?: number | undefined;
 }
-declare const HeaderWrapper: (props: IslandHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const HeaderWrapper: (props: IslandHeaderProps) => import("react").JSX.Element;
 export default HeaderWrapper;

package/components/island/{header.js → header.jsx}

@@ -1,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import { interpolateLinear } from '../global/linear-function';
-import styles from './island.css';
 import { PhaseContext } from './adaptive-island-hoc';
+import styles from './island.css';
 const Start = {
     FONT_SIZE: 24,
     LINE_HEIGHT: 28,
@@ -57,11 +56,19 @@ class Header extends Component {
             }
             : undefined;
         const titleStyle = this.getTitleStyle(phase);
-        return (_jsxs("div", { ...restProps, "data-test": 'ring-island-header', className: classes, style: headerStyle, children: [wrapWithTitle && (_jsx("h2", { className: styles.title, style: titleStyle, children: children })), !wrapWithTitle && children] }));
+        return (<div {...restProps} data-test='ring-island-header' className={classes} style={headerStyle}>
+        {wrapWithTitle && (<h2 className={styles.title} style={titleStyle}>
+            {children}
+          </h2>)}
+
+        {!wrapWithTitle && children}
+      </div>);
     }
 }
-const HeaderWrapper = (props) => (_jsx(PhaseContext.Consumer, { children: phase => {
+const HeaderWrapper = (props) => (<PhaseContext.Consumer>
+    {phase => {
         const addProps = phase !== null && phase !== undefined ? { phase } : {};
-        return _jsx(Header, { ...props, ...addProps });
-    } }));
+        return <Header {...props} {...addProps}/>;
+    }}
+  </PhaseContext.Consumer>);
 export default HeaderWrapper;

package/components/island/island.d.ts

@@ -8,7 +8,7 @@ export interface IslandProps extends HTMLAttributes<HTMLElement> {
  * @name Island
  */
 export default class Island extends Component<IslandProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export declare const AdaptiveIsland: import("react").ComponentClass<IslandProps, any>;
 export { default as Header } from './header';

package/components/island/{island.js → island.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -14,7 +13,9 @@ export default class Island extends Component {
             [styles.narrowIsland]: narrow,
             [styles.withoutPaddings]: withoutPaddings,
         });
-        return (_jsx("div", { ...restProps, className: classes, "data-test": dataTests('ring-island', dataTest), children: children }));
+        return (<div {...restProps} className={classes} data-test={dataTests('ring-island', dataTest)}>
+        {children}
+      </div>);
     }
 }
 export const AdaptiveIsland = adaptiveIslandHOC(Island);

package/components/link/clickable-link.d.ts

@@ -8,5 +8,5 @@ export interface ClickableLinkProps extends AnchorHTMLAttributes<HTMLAnchorEleme
 }
 export default class ClickableLink extends PureComponent<ClickableLinkProps> {
     onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/link/{clickable-link.js → clickable-link.jsx}

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
+import * as React from 'react';
 const LEFT_BUTTON = 0;
 // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
 const isPlainLeftClick = (e) => e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
@@ -20,6 +20,8 @@ export default class ClickableLink extends PureComponent {
     };
     render() {
         const { onConditionalClick, onPlainLeftClick, activeClassName, href, children, ...restProps } = this.props;
-        return (_jsx("a", { href: href, ...restProps, onClick: this.onClick, children: children }));
+        return (<a href={href} {...restProps} onClick={this.onClick}>
+        {children}
+      </a>);
     }
 }

package/components/link/{link.js → link.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent, } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -21,9 +20,13 @@ export function linkHOC(ComposedComponent) {
                 props = { ...props, activeClassName: styles.active };
             }
             if (useButton) {
-                return (_jsx("button", { type: 'button', ...props, className: classes, onClick: (onClick || onPlainLeftClick), "data-test": dataTests('ring-link', dataTest), children: children }));
+                return (<button type='button' {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>
+            {children}
+          </button>);
             }
-            return (_jsx(ComposedComponent, { ...props, href: href, className: classes, onClick: onClick, ...(typeof ComposedComponent !== 'string' ? { onPlainLeftClick } : {}), "data-test": dataTests('ring-link', dataTest), children: children }));
+            return (<ComposedComponent {...props} href={href} className={classes} onClick={onClick} {...(typeof ComposedComponent !== 'string' ? { onPlainLeftClick } : {})} data-test={dataTests('ring-link', dataTest)}>
+          {children}
+        </ComposedComponent>);
         }
     };
 }

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

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

package/components/list/{list-custom.js → list-custom.jsx}

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

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-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/list/{list-hint.js → list-hint.jsx}

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

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-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/list/{list-item.js → list-item.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -7,9 +6,9 @@ import Checkbox from '../checkbox/checkbox';
 import Icon from '../icon/icon';
 import getUID from '../global/get-uid';
 import Link, { linkHOC } from '../link/link';
-import styles from './list.css';
 import { Type } from './consts';
 import { getListClasses } from './list.classes';
+import styles from './list.css';
 /**
  * @constructor
  * @extends {ReactComponent}
@@ -54,7 +53,9 @@ export default class ListItem extends PureComponent {
             'ring-list-item-selected': checkbox,
             'ring-list-link': isLink,
         }, dataTest);
-        const labelElement = (_jsx("span", { className: styles.label, title: computedTitle, "data-test": 'ring-list-item-label', children: label ?? children }));
+        const labelElement = (<span className={styles.label} title={computedTitle} data-test='ring-list-item-label'>
+        {label ?? children}
+      </span>);
         const commonProps = {
             id: this.id,
             tabIndex,
@@ -66,9 +67,36 @@ export default class ListItem extends PureComponent {
             className: classes,
             style,
             disabled,
-            children: (_jsxs(_Fragment, { 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 })] })),
+            children: (<>
+          <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>}
+        </>),
         };
         const LinkComponentToUse = LinkComponent ? linkHOC(LinkComponent) : Link;
-        return (_jsxs("div", { className: styles.itemContainer, "data-test": combinedDataTest, children: [showCheckbox && (_jsx("div", { className: styles.checkboxContainer, children: _jsx(Checkbox, { "aria-labelledby": this.id, checked: checkbox, disabled: disabled, onChange: onCheckboxChange, onClick: this.stopBubbling }) })), isLink ? (_jsx(LinkComponentToUse, { pseudo: !restLinkProps.href, ...commonProps, ...restLinkProps })) : (_jsx("button", { type: 'button', ...commonProps }))] }));
+        return (<div className={styles.itemContainer} data-test={combinedDataTest}>
+        {showCheckbox && (<div className={styles.checkboxContainer}>
+            <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
+          </div>)}
+        {isLink ? (<LinkComponentToUse pseudo={!restLinkProps.href} {...commonProps} {...restLinkProps}/>) : (<button type='button' {...commonProps}/>)}
+      </div>);
     }
 }

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

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

package/components/list/{list-separator.js → list-separator.jsx}

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

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

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

package/components/list/list-title.jsx

@@ -0,0 +1,19 @@
+import { PureComponent } from 'react';
+import classnames from 'classnames';
+import styles from './list.css';
+export default class ListTitle extends PureComponent {
+    render() {
+        const { className, description, label, isFirst } = this.props;
+        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>);
+    }
+}

package/components/list/list-users-groups-source.js

@@ -7,7 +7,7 @@ const defaultOptions = {
     UsersTitle: 'Users',
     NoUsersTitle: 'No users',
     getPluralForUserCount: count => {
-        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        // eslint-disable-next-line no-magic-numbers
         const plural = count % 10 !== 1 || count % 100 === 11;
         return `${count} member${plural ? 's' : ''}`;
     },

package/components/list/list.classes.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import globalStyles from '../global/global.css';
 import { Type } from './consts';
+import globalStyles from '../global/global.css';
 import styles from './list.css';
 export function getListClasses({ className, disabled, hover, compact, scrolling, rgItemType, }) {
     return classNames(styles.item, globalStyles.resetButton, className, {

package/components/list/list.d.ts

@@ -50,7 +50,7 @@ export declare const ActiveItemContext: {
     ValueContext: import("react").Context<string | undefined>;
     UpdateContext: import("react").Context<(value: string | undefined) => void>;
     Provider: {
-        ({ children }: import("../global/create-stateful-context").ProviderProps): import("react/jsx-runtime").JSX.Element;
+        ({ children }: import("../global/create-stateful-context").ProviderProps): import("react").JSX.Element;
         displayName: string;
     };
     useUpdate: (value: string | undefined, skipUpdate?: boolean) => void;
@@ -151,19 +151,19 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     getVisibleListHeight(maxHeight: number): number;
     private _deprecatedGenerateKeyFromContent;
     getId(item: ListDataItem<T> | null): string | undefined;
-    renderItem: ({ index, style, isScrolling, parent, key }: Partial<ListRowProps>) => import("react/jsx-runtime").JSX.Element;
+    renderItem: ({ index, style, isScrolling, parent, key }: Partial<ListRowProps>) => import("react").JSX.Element;
     addItemDataTestToProp: (props: ListDataItemProps<T>) => ListDataItemProps<T>;
     virtualizedListRef: (el: VirtualizedList | null) => void;
     containerRef: (el: HTMLElement | null) => void;
     private _inner?;
     get inner(): HTMLElement | null | undefined;
-    renderVirtualizedInner({ height, maxHeight, autoHeight, rowCount, isScrolling, onChildScroll, scrollTop, registerChild, }: RenderVirtualizedInnerParams): import("react/jsx-runtime").JSX.Element;
-    renderVirtualized(maxHeight: number | null | undefined, rowCount: number): import("react/jsx-runtime").JSX.Element;
-    renderSimple(maxHeight: number | null | undefined, rowCount: number): import("react/jsx-runtime").JSX.Element;
+    renderVirtualizedInner({ height, maxHeight, autoHeight, rowCount, isScrolling, onChildScroll, scrollTop, registerChild, }: RenderVirtualizedInnerParams): import("react").JSX.Element;
+    renderVirtualized(maxHeight: number | null | undefined, rowCount: number): import("react").JSX.Element;
+    renderSimple(maxHeight: number | null | undefined, rowCount: number): import("react").JSX.Element;
     id: string;
     shortcutsScope: string;
     shortcutsMap: ShortcutsMap;
     /** @override */
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type ListAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof List, ListProps<T>>;

package/components/list/{list.js → list.jsx}

@@ -1,5 +1,3 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable max-lines */
 /**
  * @name List
@@ -149,7 +147,7 @@ export default class List extends Component {
     virtualizedList;
     unmounted;
     container;
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    // eslint-disable-next-line no-magic-numbers
     _bufferSize = 10; // keep X items above and below of the visible area
     // reuse size cache for similar items
     sizeCacheKey = (index) => {
@@ -360,7 +358,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 = _jsx("div", { style: { height: Dimension.MARGIN } });
+            el = <div style={{ height: Dimension.MARGIN }}/>;
         }
         else {
             // Hack around SelectNG implementation
@@ -416,9 +414,15 @@ export default class List extends Component {
                 default:
                     throw new Error(`Unknown menu element type: ${itemProps.rgItemType}`);
             }
-            el = _createElement(ItemComponent, { ...itemProps, key: itemProps.key });
+            el = <ItemComponent {...itemProps} key={itemProps.key}/>;
         }
-        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));
+        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>);
     };
     addItemDataTestToProp = (props) => {
         props['data-test'] = dataTests('ring-list-item', props['data-test']);
@@ -439,24 +443,30 @@ 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 (_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 !== undefined
-                        ? this.state.activeIndex + 1
-                        : undefined, scrollToAlignment: 'center', deferredMeasurementCache: this._cache, onRowsRendered: this.checkOverflow, containerRole: 'none' // row role is set by rowRenderer
-                 }) })) }));
+        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 !== undefined
+                    ? this.state.activeIndex + 1
+                    : undefined} scrollToAlignment='center' deferredMeasurementCache={this._cache} onRowsRendered={this.checkOverflow} containerRole='none' // row role is set by rowRenderer
+            />
+          </div>)}
+      </AutoSizer>);
     }
     renderVirtualized(maxHeight, rowCount) {
         if (maxHeight) {
             return this.renderVirtualizedInner({ height: maxHeight, maxHeight, rowCount });
         }
-        return (_jsx(WindowScrollerComponent, { children: props => this.renderVirtualizedInner({ ...props, rowCount, autoHeight: true }) }));
+        return (<WindowScrollerComponent>
+        {props => this.renderVirtualizedInner({ ...props, rowCount, autoHeight: true })}
+      </WindowScrollerComponent>);
     }
     renderSimple(maxHeight, rowCount) {
         const items = [];
@@ -466,7 +476,11 @@ export default class List extends Component {
                 isScrolling: this.state.scrolling,
             }));
         }
-        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 }) }));
+        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>);
     }
     id = getUID('list-');
     shortcutsScope = this.id;
@@ -488,8 +502,16 @@ 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 (_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 })] })] }));
+        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>
+      </>);
     }
 }

package/components/loader/loader.d.ts

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

package/components/loader/{loader.js → loader.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import LoaderCore from './loader-core';
@@ -31,10 +30,17 @@ export default class Loader extends PureComponent {
     };
     render() {
         const { message, size, colors, 'data-test': dataTest, stop, deterministic, squares, ...restProps } = this.props;
-        return squares ? (_jsxs("div", { ...restProps, children: [_jsxs("div", { className: classNames(styles.canvas, styles.squares), style: {
-                        '--ring-loader-color-1': colors?.[0] ? `rgb(${colors[0].r}, ${colors[0].g}, ${colors[0].b})` : undefined,
-                        '--ring-loader-color-2': colors?.[1] ? `rgb(${colors[1].r}, ${colors[1].g}, ${colors[1].b})` : undefined,
-                        '--ring-loader-color-3': colors?.[2] ? `rgb(${colors[2].r}, ${colors[2].g}, ${colors[2].b})` : undefined,
-                    }, children: [_jsx("div", { className: classNames(styles.square, styles.outer) }), _jsx("div", { className: classNames(styles.square, styles.middle) }), _jsx("div", { className: classNames(styles.square, styles.inner) })] }), message && _jsx("div", { className: styles.text, children: message })] })) : (_jsx("div", { ...restProps, ref: this.initLoader }));
+        return squares ? (<div {...restProps}>
+        <div className={classNames(styles.canvas, styles.squares)} style={{
+                '--ring-loader-color-1': colors?.[0] ? `rgb(${colors[0].r}, ${colors[0].g}, ${colors[0].b})` : undefined,
+                '--ring-loader-color-2': colors?.[1] ? `rgb(${colors[1].r}, ${colors[1].g}, ${colors[1].b})` : undefined,
+                '--ring-loader-color-3': colors?.[2] ? `rgb(${colors[2].r}, ${colors[2].g}, ${colors[2].b})` : undefined,
+            }}>
+          <div className={classNames(styles.square, styles.outer)}/>
+          <div className={classNames(styles.square, styles.middle)}/>
+          <div className={classNames(styles.square, styles.inner)}/>
+        </div>
+        {message && <div className={styles.text}>{message}</div>}
+      </div>) : (<div {...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-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type LoaderInlineAtrrs = React.JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
 export default LoaderInline;

package/components/loader-inline/{loader-inline.js → loader-inline.jsx}

@@ -1,4 +1,3 @@
-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';
@@ -10,8 +9,11 @@ class LoaderInline extends PureComponent {
     render() {
         const { className, 'data-test': dataTest, children, ...restProps } = this.props;
         const classes = classNames(styles.loader, className);
-        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);
+        const loader = <div {...restProps} data-test={dataTests('ring-loader-inline', dataTest)} className={classes}/>;
+        return children ? (<>
+        {loader}
+        <span className={styles.children}>{children}</span>
+      </>) : (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-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/loader-screen/{loader-screen.js → loader-screen.jsx}

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

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-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type LoginDialogAttrs = React.JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;