@jetbrains/ring-ui 7.0.11 → 7.0.13

package/components/checkbox/checkbox.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 checkmarkIcon from '@jetbrains/icons/checkmark-12px';
@@ -41,18 +42,6 @@ export default class Checkbox extends PureComponent {
         const containerClasses = classNames(styles.checkbox, containerClassName);
         const cellClasses = classNames(styles.cell, cellClassName);
         const labelClasses = classNames(styles.label, labelClassName);
-        return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
-        <input {...restProps} data-checked={restProps.checked} ref={this.composedInputRef(this.inputRef, inputRef)} type="checkbox" className={classes}/>
-        <div className={styles.cellWrapper}>
-          <span className={cellClasses}>
-            <Icon glyph={checkmarkIcon} className={styles.check}/>
-            <Icon glyph={minusIcon} className={styles.minus}/>
-          </span>
-        </div>
-        <span className={labelClasses}>
-          {label || children}
-          {help && <ControlHelp>{help}</ControlHelp>}
-        </span>
-      </label>);
+        return (_jsxs("label", { className: containerClasses, style: containerStyle, "data-test": "ring-checkbox", children: [_jsx("input", { ...restProps, "data-checked": restProps.checked, ref: this.composedInputRef(this.inputRef, inputRef), type: "checkbox", className: classes }), _jsx("div", { className: styles.cellWrapper, children: _jsxs("span", { className: cellClasses, children: [_jsx(Icon, { glyph: checkmarkIcon, className: styles.check }), _jsx(Icon, { glyph: minusIcon, className: styles.minus })] }) }), _jsxs("span", { className: labelClasses, children: [label || children, help && _jsx(ControlHelp, { children: help })] })] }));
     }
 }

package/components/code/code.d.ts

@@ -25,7 +25,7 @@ export default class Code extends PureComponent<CodeProps> {
     highlight(): Promise<void>;
     get codeRef(): HTMLElement | null | undefined;
     get initCodeRef(): import("react").RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
 export { code, highlight };

package/components/code/code.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import highlight from 'highlight.js/lib/core';
@@ -68,14 +69,10 @@ export default class Code extends PureComponent {
             [styles.inline]: inline,
             [styles.softWrap]: softWrap,
         });
-        return (<Tag className={classes} data-test="ring-code">
-        <code 
-        // should be focusable because it can be scrollable
-        tabIndex={inline ? -1 : 0} ref={this.initCodeRef} className={highlightStyles.highlightContainer}>
-          {normalizeIndent(code)}
-        </code>
-      </Tag>);
+        return (_jsx(Tag, { className: classes, "data-test": "ring-code", children: _jsx("code", { 
+                // should be focusable because it can be scrollable
+                tabIndex: inline ? -1 : 0, ref: this.initCodeRef, className: highlightStyles.highlightContainer, children: normalizeIndent(code) }) }));
     }
 }
-const code = trivialTemplateTag((source) => <Code code={source}/>);
+const code = trivialTemplateTag((source) => _jsx(Code, { code: source }));
 export { code, highlight };

package/components/collapse/collapse-content.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
@@ -70,11 +71,6 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
     }, [duration, height, collapsed, minHeight]);
     const fadeShouldBeVisible = useMemo(() => Boolean(minHeight && showFade), [minHeight, showFade]);
     const shouldRenderContent = disableAnimation ? !collapsed : !shouldHideContent;
-    return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
-      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>
-        {shouldRenderContent ? children : null}
-      </div>
-      {fadeShouldBeVisible && <div className={styles.fade}/>}
-    </div>);
+    return (_jsxs("div", { ref: containerRef, id: `collapse-content-${id}`, "data-test": dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID), className: classNames(styles.container, { [styles.transition]: !disableAnimation }), style: style, children: [_jsx("div", { ref: contentRef, "data-test": dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest), children: shouldRenderContent ? children : null }), fadeShouldBeVisible && _jsx("div", { className: styles.fade })] }));
 };
 export default CollapseContent;

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;