@jetbrains/ring-ui 7.0.10 → 7.0.12

package/components/collapse/collapse-control.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useContext, cloneElement } from 'react';
-import * as React from 'react';
 import dataTests from '../global/data-tests';
 import { CollapseContext } from './collapse-context';
 import { COLLAPSE_CONTROL_TEST_ID } from './consts';
@@ -14,12 +14,10 @@ export const CollapseControl = ({ children, 'data-test': dataTest }) => {
         }
         return children;
     }, [children, collapsed]);
-    return (<p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>
-      {cloneElement(child, {
+    return (_jsx("p", { "data-test": dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest), children: cloneElement(child, {
             onClick: setCollapsed,
             'aria-controls': `collapse-content-${id}`,
             'aria-expanded': String(!collapsed),
-        })}
-    </p>);
+        }) }));
 };
 export default CollapseControl;

package/components/collapse/collapse.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useState } from 'react';
-import * as React from 'react';
 import { CollapseContext } from './collapse-context';
 import { BASE_ANIMATION_DURATION } from './consts';
 /**
@@ -13,16 +13,12 @@ export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disable
         setInnerCollapsed(!finalCollapsedValue);
         onChange(!finalCollapsedValue);
     }, [setInnerCollapsed, onChange, finalCollapsedValue]);
-    return (<div className={className}>
-      <CollapseContext.Provider value={{
-            collapsed: finalCollapsedValue,
-            setCollapsed,
-            duration,
-            disableAnimation,
-            id,
-        }}>
-        {children}
-      </CollapseContext.Provider>
-    </div>);
+    return (_jsx("div", { className: className, children: _jsx(CollapseContext.Provider, { value: {
+                collapsed: finalCollapsedValue,
+                setCollapsed,
+                duration,
+                disableAnimation,
+                id,
+            }, children: children }) }));
 };
 export default Collapse;

package/components/confirm/confirm.d.ts

@@ -31,6 +31,6 @@ export default class Confirm extends PureComponent<ConfirmProps> {
         onReject: () => void;
     };
     onEscPress: () => void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;

package/components/confirm/confirm.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
-import * as React from 'react';
 import Dialog from '../dialog/dialog';
 import Button from '../button/button';
 import { Content, Header } from '../island/island';
@@ -28,19 +28,6 @@ export default class Confirm extends PureComponent {
     };
     render() {
         const { show, className, inProgress, cancelIsDefault, text, description, confirmLabel, rejectLabel, onConfirm, onReject, native, } = this.props;
-        return (<Dialog label={text || (typeof description === 'string' ? description : undefined)} className={className} onEscPress={this.onEscPress} show={show} trapFocus data-test="ring-confirm" native={native}>
-        {text && <Header>{text}</Header>}
-        {description && (<Content>
-            <div className={styles.description}>{description}</div>
-          </Content>)}
-        <Panel>
-          <Button data-test="confirm-ok-button" primary={!cancelIsDefault} loader={inProgress} disabled={inProgress} onClick={onConfirm}>
-            {confirmLabel}
-          </Button>
-          <Button data-test="confirm-reject-button" onClick={onReject} disabled={inProgress} primary={cancelIsDefault}>
-            {rejectLabel}
-          </Button>
-        </Panel>
-      </Dialog>);
+        return (_jsxs(Dialog, { label: text || (typeof description === 'string' ? description : undefined), className: className, onEscPress: this.onEscPress, show: show, trapFocus: true, "data-test": "ring-confirm", native: native, children: [text && _jsx(Header, { children: text }), description && (_jsx(Content, { children: _jsx("div", { className: styles.description, children: description }) })), _jsxs(Panel, { children: [_jsx(Button, { "data-test": "confirm-ok-button", primary: !cancelIsDefault, loader: inProgress, disabled: inProgress, onClick: onConfirm, children: confirmLabel }), _jsx(Button, { "data-test": "confirm-reject-button", onClick: onReject, disabled: inProgress, primary: cancelIsDefault, children: rejectLabel })] })] }));
     }
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 import Confirm from '../confirm/confirm';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
@@ -8,9 +9,7 @@ export const reactRoot = createRoot(containerElement);
  */
 function renderConfirm(props) {
     const { buttonsHeight = getGlobalControlsHeight(), ...restProps } = props;
-    reactRoot.render(<ControlsHeightContext.Provider value={buttonsHeight}>
-      <Confirm {...restProps}/>
-    </ControlsHeightContext.Provider>);
+    reactRoot.render(_jsx(ControlsHeightContext.Provider, { value: buttonsHeight, children: _jsx(Confirm, { ...restProps }) }));
 }
 export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm, buttonsHeight, }) {
     return new Promise((resolve, reject) => {

package/components/content-layout/content-layout.d.ts

@@ -14,6 +14,6 @@ export default class ContentLayout extends Component<ContentLayoutProps> {
         contentNode: null;
     };
     saveContentNode: (contentNode: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export { default as Sidebar } from './sidebar';

package/components/content-layout/content-layout.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, Component } from 'react';
 import classNames from 'classnames';
 import Sidebar from './sidebar';
@@ -28,12 +29,7 @@ export default class ContentLayout extends Component {
                 contentNode: this.state.contentNode,
             });
         const contentChildren = childrenArray.filter(child => child !== sidebarChild);
-        return (<div data-test="content-layout" {...restProps} className={classes}>
-        {sidebar}
-        <main className={contentClasses} ref={this.saveContentNode}>
-          {contentChildren}
-        </main>
-      </div>);
+        return (_jsxs("div", { "data-test": "content-layout", ...restProps, className: classes, children: [sidebar, _jsx("main", { className: contentClasses, ref: this.saveContentNode, children: contentChildren })] }));
     }
 }
 export { default as Sidebar } from './sidebar';

package/components/content-layout/sidebar.d.ts

@@ -18,5 +18,5 @@ export default class Sidebar extends Component<SidebarProps> {
     shouldUseFixation(): boolean;
     shouldFixateBottom(): boolean;
     sidebarRef: (node: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/content-layout/sidebar.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 { Waypoint } from 'react-waypoint';
@@ -52,16 +53,6 @@ export default class Sidebar extends Component {
         const style = {
             maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : undefined,
         };
-        return (<aside className={containerClasses} ref={this.sidebarRef}>
-        <Waypoint onEnter={this.handleTopWaypoint} onLeave={this.handleTopWaypoint}/>
-
-        <div {...restProps} style={style} className={classes}>
-          {children}
-        </div>
-
-        <div className={styles.bottomMarker}>
-          <Waypoint onEnter={this.handleBottomWaypoint} onLeave={this.handleBottomWaypoint}/>
-        </div>
-      </aside>);
+        return (_jsxs("aside", { className: containerClasses, ref: this.sidebarRef, children: [_jsx(Waypoint, { onEnter: this.handleTopWaypoint, onLeave: this.handleTopWaypoint }), _jsx("div", { ...restProps, style: style, className: classes, children: children }), _jsx("div", { className: styles.bottomMarker, children: _jsx(Waypoint, { onEnter: this.handleBottomWaypoint, onLeave: this.handleBottomWaypoint }) })] }));
     }
 }

package/components/contenteditable/contenteditable.d.ts

@@ -18,9 +18,9 @@ declare class ContentEditableBase extends Component<ContentEditableBaseProps> {
     };
     shouldComponentUpdate(nextProps: ContentEditableBaseProps): boolean;
     componentDidUpdate(prevProps: ContentEditableBaseProps): void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
 export type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
-declare const ContentEditable: ({ children, ...props }: ContentEditableProps) => import("react").JSX.Element;
+declare const ContentEditable: ({ children, ...props }: ContentEditableProps) => import("react/jsx-runtime").JSX.Element;
 export default ContentEditable;

package/components/contenteditable/contenteditable.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 /**
@@ -19,11 +20,11 @@ class ContentEditableBase extends Component {
     }
     render() {
         const { __html, onComponentUpdate, disabled, tabIndex, inputRef, ...props } = this.props;
-        return (<div {...props} ref={inputRef} 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        disabled={disabled} role="textbox" tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html }}/>);
+        return (_jsx("div", { ...props, ref: inputRef, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            disabled: disabled, role: "textbox", tabIndex: disabled ? undefined : tabIndex, contentEditable: !this.props.disabled, dangerouslySetInnerHTML: { __html } }));
     }
 }
-const ContentEditable = ({ children, ...props }) => (<ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>);
+const ContentEditable = ({ children, ...props }) => (_jsx(ContentEditableBase, { ...props, __html: renderToStaticMarkup(children) }));
 export default ContentEditable;

package/components/control-help/control-help.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributes } from 'react';
 type ControlHelpProps = HTMLAttributes<HTMLDivElement>;
-export default function ControlHelp({ className, ...restProps }: ControlHelpProps): import("react").JSX.Element;
+export default function ControlHelp({ className, ...restProps }: ControlHelpProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/control-help/control-help.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import styles from './control-help.css';
 export default function ControlHelp({ className, ...restProps }) {
-    return <div className={classNames(className, styles.help)} {...restProps}/>;
+    return _jsx("div", { className: classNames(className, styles.help), ...restProps });
 }

package/components/control-label/control-label.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import styles from './control-label.css';
 export var LabelType;
@@ -10,9 +10,7 @@ const classNameByType = {
     [LabelType.SECONDARY]: styles.secondaryLabel,
     [LabelType.FORM]: styles.formLabel,
 };
-export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (<label className={classNames(styles.label, classNameByType[type], {
+export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (_jsx("label", { className: classNames(styles.label, classNameByType[type], {
         [styles.disabledLabel]: disabled,
-    })} {...rest}>
-    {children}
-  </label>);
+    }), ...rest, children: children }));
 export default ControlLabel;

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

@@ -29,7 +29,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): import("react").JSX.Element;
+            render(): import("react/jsx-runtime").JSX.Element;
             context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -56,7 +56,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): import("react").JSX.Element;
+            render(): import("react/jsx-runtime").JSX.Element;
             context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -78,6 +78,6 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
         defaultProps: Partial<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | undefined;
         contextType?: import("react").Context<any> | undefined;
     };
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/components/data-list/data-list.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @name Data List
  */
@@ -66,22 +67,12 @@ class DataList extends PureComponent {
             [styles.disabledHover]: disabledHover,
             [styles.multiSelection]: selection.getSelected().size > 0,
         });
-        return (<div className={styles.dataListWrapper} data-test="ring-data-list" ref={innerRef}>
-        {focused && <Shortcuts map={shortcutsMap} scope={this.shortcutsScope}/>}
-
-        <ul className={classes}>
-          {data.map(model => {
-                const item = itemFormatter(model);
-                const { id, key, title, items } = item;
-                const showMoreLessButton = this.props.itemMoreLessState?.(item);
-                return (<Item key={key || id} item={model} title={title} items={items} itemFormatter={itemFormatter} collapsible={item.collapsible} collapsed={item.collapsed} onCollapse={item.onCollapse} onExpand={item.onExpand} showFocus={selection.isFocused(model)} onFocus={this.onItemFocus} selection={selection} selectable={item.selectable} selected={selection.isSelected(model)} onSelect={this.onItemSelect} showMoreLessButton={showMoreLessButton} onItemMoreLess={this.props.onItemMoreLess}/>);
-            })}
-        </ul>
-
-        {loading && (<div className={data.length > 0 ? styles.loadingOverlay : undefined}>
-            <Loader />
-          </div>)}
-      </div>);
+        return (_jsxs("div", { className: styles.dataListWrapper, "data-test": "ring-data-list", ref: innerRef, children: [focused && _jsx(Shortcuts, { map: shortcutsMap, scope: this.shortcutsScope }), _jsx("ul", { className: classes, children: data.map(model => {
+                        const item = itemFormatter(model);
+                        const { id, key, title, items } = item;
+                        const showMoreLessButton = this.props.itemMoreLessState?.(item);
+                        return (_jsx(Item, { item: model, title: title, items: items, itemFormatter: itemFormatter, collapsible: item.collapsible, collapsed: item.collapsed, onCollapse: item.onCollapse, onExpand: item.onExpand, showFocus: selection.isFocused(model), onFocus: this.onItemFocus, selection: selection, selectable: item.selectable, selected: selection.isSelected(model), onSelect: this.onItemSelect, showMoreLessButton: showMoreLessButton, onItemMoreLess: this.props.onItemMoreLess }, key || id));
+                    }) }), loading && (_jsx("div", { className: data.length > 0 ? styles.loadingOverlay : undefined, children: _jsx(Loader, {}) }))] }));
     }
 }
 const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(DataList)));
@@ -90,6 +81,6 @@ export default class DataListContainer extends Component {
     // https://stackoverflow.com/a/53882322/6304152
     DataList = getContainer();
     render() {
-        return <this.DataList {...this.props}/>;
+        return _jsx(this.DataList, { ...this.props });
     }
 }

package/components/data-list/data-list.mock.d.ts

@@ -11,6 +11,6 @@ export declare const moreItems: {
     id: number;
     selectable: boolean;
     collapsible: boolean;
-    title: import("react").JSX.Element;
+    title: import("react/jsx-runtime").JSX.Element;
 }[];
 export default items;

package/components/data-list/data-list.mock.js

@@ -1,11 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from '../link/link';
 import Tag from '../tag/tag';
 const items = [
     {
         id: 1,
-        title: (<span>
-        <strong>Assigner</strong> in 60 projects
-      </span>),
+        title: (_jsxs("span", { children: [_jsx("strong", { children: "Assigner" }), " in 60 projects"] })),
         collapsible: true,
         selectable: true,
         items: [
@@ -18,27 +17,27 @@ const items = [
                     {
                         id: 111,
                         selectable: true,
-                        title: <Link href="#">TeamCity</Link>,
+                        title: _jsx(Link, { href: "#", children: "TeamCity" }),
                     },
                     {
                         id: 112,
                         selectable: true,
-                        title: <Link href="#">YouTrack</Link>,
+                        title: _jsx(Link, { href: "#", children: "YouTrack" }),
                     },
                     {
                         id: 113,
                         selectable: true,
-                        title: <Link href="#">Sandbox</Link>,
+                        title: _jsx(Link, { href: "#", children: "Sandbox" }),
                     },
                     {
                         id: 114,
                         selectable: true,
-                        title: <Link href="#">Exception Analyzer</Link>,
+                        title: _jsx(Link, { href: "#", children: "Exception Analyzer" }),
                     },
                     {
                         id: 115,
                         selectable: true,
-                        title: <Link href="#">MPS</Link>,
+                        title: _jsx(Link, { href: "#", children: "MPS" }),
                     },
                 ],
             },
@@ -46,20 +45,14 @@ const items = [
     },
     {
         id: 2,
-        title: (<span>
-        <strong>Code Reviewer</strong> in 5 projects
-      </span>),
+        title: (_jsxs("span", { children: [_jsx("strong", { children: "Code Reviewer" }), " in 5 projects"] })),
         selectable: true,
         collapsible: true,
         items: [
             {
                 id: 21,
                 selectable: true,
-                title: (<span>
-            <Link href="#">JetProfile</Link>
-            <span> </span>
-            <Tag>duplicate</Tag>
-          </span>),
+                title: (_jsxs("span", { children: [_jsx(Link, { href: "#", children: "JetProfile" }), _jsx("span", { children: " " }), _jsx(Tag, { children: "duplicate" })] })),
             },
             {
                 id: 22,
@@ -69,123 +62,93 @@ const items = [
                     {
                         id: 221,
                         collapsible: true,
-                        title: <Link href="#">TeamCity</Link>,
+                        title: _jsx(Link, { href: "#", children: "TeamCity" }),
                     },
                     {
                         id: 222,
                         collapsible: true,
-                        title: <Link href="#">YouTrack</Link>,
+                        title: _jsx(Link, { href: "#", children: "YouTrack" }),
                     },
                     {
                         id: 223,
                         collapsible: true,
-                        title: <Link href="#">Sandbox</Link>,
+                        title: _jsx(Link, { href: "#", children: "Sandbox" }),
                     },
                     {
                         id: 224,
                         collapsible: true,
-                        title: <Link href="#">Exception Analyzer</Link>,
+                        title: _jsx(Link, { href: "#", children: "Exception Analyzer" }),
                     },
                     {
                         id: 225,
                         collapsible: true,
-                        title: <Link href="#">MPS</Link>,
+                        title: _jsx(Link, { href: "#", children: "MPS" }),
                     },
                 ],
             },
             {
                 id: 23,
                 collapsible: true,
-                title: (<span>
-            <Link href="#">CustomJDK</Link>
-            <span>: as a member of ide-developers</span>
-          </span>),
+                title: (_jsxs("span", { children: [_jsx(Link, { href: "#", children: "CustomJDK" }), _jsx("span", { children: ": as a member of ide-developers" })] })),
             },
         ],
     },
     {
         id: 3,
-        title: (<span>
-        <strong>Code Viewer</strong> in 5 projects
-      </span>),
+        title: (_jsxs("span", { children: [_jsx("strong", { children: "Code Viewer" }), " in 5 projects"] })),
         selectable: true,
         collapsible: true,
         items: [
             {
                 id: 31,
                 collapsible: true,
-                title: (<span>
-            <Link href="#">ide-frontend</Link>
-            <span>: as a member of ide-developers</span>
-          </span>),
+                title: (_jsxs("span", { children: [_jsx(Link, { href: "#", children: "ide-frontend" }), _jsx("span", { children: ": as a member of ide-developers" })] })),
             },
             {
                 id: 32,
                 collapsible: true,
-                title: (<span>
-            <Link href="#">ide-frontend</Link>
-            <span>: as a member of ide-frontend Code Viewers</span>
-          </span>),
+                title: (_jsxs("span", { children: [_jsx(Link, { href: "#", children: "ide-frontend" }), _jsx("span", { children: ": as a member of ide-frontend Code Viewers" })] })),
             },
         ],
     },
     {
         id: 4,
-        title: (<span>
-        <strong>Commenter</strong> in 12 projects
-      </span>),
+        title: (_jsxs("span", { children: [_jsx("strong", { children: "Commenter" }), " in 12 projects"] })),
         collapsible: true,
         items: [
             {
                 id: 41,
                 collapsible: true,
-                title: (<span>
-            <Link href="#">Intellij IDEA</Link>
-            <span>: as a member of Registered Users</span>
-          </span>),
+                title: (_jsxs("span", { children: [_jsx(Link, { href: "#", children: "Intellij IDEA" }), _jsx("span", { children: ": as a member of Registered Users" })] })),
             },
             {
                 id: 42,
                 collapsible: true,
-                title: (<span>
-            <Link href="#">YouTrack Backlog</Link>
-            <span>: as a member of jetbrains-team</span>
-          </span>),
+                title: (_jsxs("span", { children: [_jsx(Link, { href: "#", children: "YouTrack Backlog" }), _jsx("span", { children: ": as a member of jetbrains-team" })] })),
             },
         ],
     },
     {
         id: 5,
         collapsible: true,
-        title: (<span>
-        <strong>Developer</strong>
-        <span> in 57 projects </span>
-        <Tag>team role</Tag>
-      </span>),
+        title: (_jsxs("span", { children: [_jsx("strong", { children: "Developer" }), _jsx("span", { children: " in 57 projects " }), _jsx(Tag, { children: "team role" })] })),
         items: [
             {
                 id: 51,
                 selectable: true,
                 collapsible: true,
-                title: <Link href="#">Wasabi</Link>,
+                title: _jsx(Link, { href: "#", children: "Wasabi" }),
             },
         ],
     },
     {
         id: 6,
         collapsible: true,
-        title: (<span>
-        <strong>Git Hosting Admin</strong>
-        <span> in project </span>
-        <Link href="#">Hackathon 2016</Link>
-        <span>: as a member of jetbrains-team</span>
-      </span>),
+        title: (_jsxs("span", { children: [_jsx("strong", { children: "Git Hosting Admin" }), _jsx("span", { children: " in project " }), _jsx(Link, { href: "#", children: "Hackathon 2016" }), _jsx("span", { children: ": as a member of jetbrains-team" })] })),
     },
     {
         id: 7,
-        title: (<span>
-        <strong>Git Hosting Checkout</strong> in 7 projects
-      </span>),
+        title: (_jsxs("span", { children: [_jsx("strong", { children: "Git Hosting Checkout" }), " in 7 projects"] })),
         selectable: true,
         collapsible: true,
     },
@@ -195,21 +158,13 @@ export const moreItems = [
         id: 91,
         selectable: true,
         collapsible: true,
-        title: (<span>
-        <Link href="#">More item 1</Link>
-        <span> </span>
-        <Tag>duplicate</Tag>
-      </span>),
+        title: (_jsxs("span", { children: [_jsx(Link, { href: "#", children: "More item 1" }), _jsx("span", { children: " " }), _jsx(Tag, { children: "duplicate" })] })),
     },
     {
         id: 92,
         selectable: true,
         collapsible: true,
-        title: (<span>
-        <Link href="#">More item 2</Link>
-        <span> </span>
-        <Tag>duplicate</Tag>
-      </span>),
+        title: (_jsxs("span", { children: [_jsx(Link, { href: "#", children: "More item 2" }), _jsx("span", { children: " " }), _jsx(Tag, { children: "duplicate" })] })),
     },
 ];
 export default items;

package/components/data-list/item.d.ts

@@ -45,6 +45,6 @@ export default class Item<T extends SelectionItem> extends PureComponent<ItemPro
     onShowLess: () => void;
     onFocus: () => void;
     onSelect: (selected: boolean) => void;
-    renderItem: (model: T, parentShift: number) => import("react").JSX.Element;
-    render(): import("react").JSX.Element;
+    renderItem: (model: T, parentShift: number) => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/data-list/item.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import chevronRightIcon from '@jetbrains/icons/chevron-right';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
@@ -43,45 +44,28 @@ export default class Item extends PureComponent {
     renderItem = (model, parentShift) => {
         const { onFocus, onSelect, selection, level, itemFormatter } = this.props;
         const item = itemFormatter(model);
-        return (<Item key={item.key || item.id} item={model} title={item.title} items={item.items} level={level + 1} parentShift={parentShift} itemFormatter={itemFormatter} collapsible={item.collapsible} collapsed={item.collapsed} onCollapse={item.onCollapse} onExpand={item.onExpand} showFocus={selection.isFocused(model)} onFocus={onFocus} selection={selection} selectable={item.selectable} selected={selection.isSelected(model)} onSelect={onSelect}/>);
+        return (_jsx(Item, { item: model, title: item.title, items: item.items, level: level + 1, parentShift: parentShift, itemFormatter: itemFormatter, collapsible: item.collapsible, collapsed: item.collapsed, onCollapse: item.onCollapse, onExpand: item.onExpand, showFocus: selection.isFocused(model), onFocus: onFocus, selection: selection, selectable: item.selectable, selected: selection.isSelected(model), onSelect: onSelect }, item.key || item.id));
     };
     render() {
         const { title, items, showMoreLessButton, level, parentShift, showFocus, selectable, selected, collapsible, collapsed, onCollapse, onExpand, } = this.props;
         let moreLessButton;
         if (showMoreLessButton === moreLessButtonStates.MORE || showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
-            moreLessButton = (<Text info>
-          <Link inherit pseudo onClick={this.onShowMore}>
-            {'Show more'}
-          </Link>
-          {showMoreLessButton === moreLessButtonStates.MORE_LOADING && (<LoaderInline className={styles.showMoreLoader}/>)}
-        </Text>);
+            moreLessButton = (_jsxs(Text, { info: true, children: [_jsx(Link, { inherit: true, pseudo: true, onClick: this.onShowMore, children: 'Show more' }), showMoreLessButton === moreLessButtonStates.MORE_LOADING && (_jsx(LoaderInline, { className: styles.showMoreLoader }))] }));
         }
         else if (showMoreLessButton === moreLessButtonStates.LESS) {
-            moreLessButton = (<Text info>
-          <Link inherit pseudo onClick={this.onShowLess}>
-            {'Show less'}
-          </Link>
-        </Text>);
+            moreLessButton = (_jsx(Text, { info: true, children: _jsx(Link, { inherit: true, pseudo: true, onClick: this.onShowLess, children: 'Show less' }) }));
         }
         let collapserExpander = null;
         if (collapsible) {
             if (collapsed) {
-                collapserExpander = (<Button title="Expand" onClick={onExpand} icon={chevronRightIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test="ring-data-list-expand"/>);
+                collapserExpander = (_jsx(Button, { title: "Expand", onClick: onExpand, icon: chevronRightIcon, className: styles.collapseButton, iconClassName: styles.collapseIcon, "data-test": "ring-data-list-expand" }));
             }
             else {
-                collapserExpander = (<Button title="Collapse" onClick={onCollapse} icon={chevronDownIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test="ring-data-list-collapse"/>);
+                collapserExpander = (_jsx(Button, { title: "Collapse", onClick: onCollapse, icon: chevronDownIcon, className: styles.collapseButton, iconClassName: styles.collapseIcon, "data-test": "ring-data-list-collapse" }));
             }
         }
         const itemIsEmpty = !items?.length || (collapsible && collapsed);
         const offset = level * LIST_LEFT_OFFSET + ITEM_LEFT_OFFSET + parentShift;
-        return (<li>
-        <Title title={title} focused={showFocus} showFocus={showFocus} selectable={selectable} selected={selected} collapserExpander={collapserExpander} onFocus={this.onFocus} onSelect={this.onSelect} offset={offset}/>
-
-        {!itemIsEmpty ? (<ul className={styles.itemContent}>
-            {items.map(model => this.renderItem(model, parentShift))}
-
-            {showMoreLessButton !== moreLessButtonStates.UNUSED ? (<li className={styles.showMore}>{moreLessButton}</li>) : null}
-          </ul>) : null}
-      </li>);
+        return (_jsxs("li", { children: [_jsx(Title, { title: title, focused: showFocus, showFocus: showFocus, selectable: selectable, selected: selected, collapserExpander: collapserExpander, onFocus: this.onFocus, onSelect: this.onSelect, offset: offset }), !itemIsEmpty ? (_jsxs("ul", { className: styles.itemContent, children: [items.map(model => this.renderItem(model, parentShift)), showMoreLessButton !== moreLessButtonStates.UNUSED ? (_jsx("li", { className: styles.showMore, children: moreLessButton })) : null] })) : null] }));
     }
 }