@jetbrains/ring-ui 7.0.10 → 7.0.12

package/components/editable-heading/editable-heading.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
@@ -110,35 +111,6 @@ export const EditableHeading = (props) => {
             window.removeEventListener('mouseup', onMouseUp);
         };
     }, [onMouseMove, onMouseUp]);
-    return (<>
-      <div className={classes}>
-        {!disabled && isEditing ? (<>
-            <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
-
-            {!multiline ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>) : (<div className={classNames(styles.textareaWrapper, inputStyles[`size${size}`])}>
-                <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputRows ? `${maxInputRows}lh` : '' }}/>
-                {!isScrolledToBottom && <div className={styles.textareaFade}/>}
-              </div>)}
-          </>) : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
-            <Heading className={headingClasses} level={level} data-test={dataTest}>
-              {children}
-            </Heading>
-          </button>)}
-
-        {!isEditing && renderMenu()}
-
-        {isEditing && !embedded && (<>
-            <Button className={styles.button} primary disabled={isSaveDisabled} loader={isSaving} onClick={onSave}>
-              {translations.save}
-            </Button>
-
-            <Button className={styles.button} disabled={isCancelDisabled} onClick={onCancel}>
-              {translations.cancel}
-            </Button>
-          </>)}
-      </div>
-
-      {isEditing && error && <div className={classNames(styles.errorText, inputStyles[`size${size}`])}>{error}</div>}
-    </>);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes, children: [!disabled && isEditing ? (_jsxs(_Fragment, { children: [_jsx(Shortcuts, { map: shortcutsMap, scope: shortcutsScope, disabled: isShortcutsDisabled }), !multiline ? (_jsx("input", { className: inputClasses, value: children, autoFocus: autoFocus, "data-test": dataTest, disabled: isSaving, onChange: onChange, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur })) : (_jsxs("div", { className: classNames(styles.textareaWrapper, inputStyles[`size${size}`]), children: [_jsx("textarea", { ref: textAreaRef, className: inputClasses, value: children, autoFocus: autoFocus, "data-test": dataTest, disabled: isSaving, onChange: onInputChange, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur, onScroll: onInputScroll, style: { maxHeight: maxInputRows ? `${maxInputRows}lh` : '' } }), !isScrolledToBottom && _jsx("div", { className: styles.textareaFade })] }))] })) : (_jsx("button", { type: "button", className: styles.headingWrapperButton, onMouseDown: onHeadingMouseDown, children: _jsx(Heading, { className: headingClasses, level: level, "data-test": dataTest, children: children }) })), !isEditing && renderMenu(), isEditing && !embedded && (_jsxs(_Fragment, { children: [_jsx(Button, { className: styles.button, primary: true, disabled: isSaveDisabled, loader: isSaving, onClick: onSave, children: translations.save }), _jsx(Button, { className: styles.button, disabled: isCancelDisabled, onClick: onCancel, children: translations.cancel })] }))] }), isEditing && error && _jsx("div", { className: classNames(styles.errorText, inputStyles[`size${size}`]), children: error })] }));
 };
 export default React.memo(EditableHeading);

package/components/error-bubble/error-bubble.d.ts

@@ -8,5 +8,5 @@ export type ErrorBubbleProps<P> = Partial<P> & {
  * @name Error Bubble
  */
 export default class ErrorBubble<P> extends PureComponent<ErrorBubbleProps<P>> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/error-bubble/error-bubble.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, PureComponent } from 'react';
 import classNames from 'classnames';
 import Popup from '../popup/popup';
@@ -10,13 +11,6 @@ export default class ErrorBubble extends PureComponent {
     render() {
         const { children, className, ...restProps } = this.props;
         const errorBubbleClasses = classNames(styles.errorBubble, className);
-        return (<div className={styles.errorBubbleWrapper} data-test="ring-error-bubble-wrapper">
-        {Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps }))}
-        {restProps.error && (<Popup trapFocus={false} className={styles.errorBubblePopup} hidden={false} attached={false} directions={[Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP]}>
-            <div className={errorBubbleClasses} data-test="ring-error-bubble">
-              {restProps.error}
-            </div>
-          </Popup>)}
-      </div>);
+        return (_jsxs("div", { className: styles.errorBubbleWrapper, "data-test": "ring-error-bubble-wrapper", children: [Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps })), restProps.error && (_jsx(Popup, { trapFocus: false, className: styles.errorBubblePopup, hidden: false, attached: false, directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP], children: _jsx("div", { className: errorBubbleClasses, "data-test": "ring-error-bubble", children: restProps.error }) }))] }));
     }
 }

package/components/error-message/error-message.d.ts

@@ -13,5 +13,5 @@ export interface ErrorMessageProps {
  * @name Error Message
  */
 export default class ErrorMessage extends Component<ErrorMessageProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/error-message/error-message.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import Icon from '../icon/icon';
@@ -11,15 +12,6 @@ export default class ErrorMessage extends Component {
     render() {
         const { className, icon, code, message, description, children, 'data-test': dataTest } = this.props;
         const classes = classNames(styles.errorMessage, className);
-        return (<div className={classes} data-test={dataTests('ring-error-message', dataTest)}>
-        {icon && <Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>}
-        <div className={styles.content}>
-          <div className={styles.title} data-test="ring-error-message-title">
-            {code && `${code}:`} {message}
-          </div>
-          {description && <div className={styles.description}>{description}</div>}
-          {children}
-        </div>
-      </div>);
+        return (_jsxs("div", { className: classes, "data-test": dataTests('ring-error-message', dataTest), children: [icon && _jsx(Icon, { className: styles.icon, glyph: icon, size: Size.Size64, suppressSizeWarning: true }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.title, "data-test": "ring-error-message-title", children: [code && `${code}:`, " ", message] }), description && _jsx("div", { className: styles.description, children: description }), children] })] }));
     }
 }

package/components/footer/footer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @name Footer
  */
@@ -11,9 +12,7 @@ const FooterColumn = memo(function FooterColumn({ position, children }) {
         [styles.columnCenter]: position === 'center',
         [styles.columnRight]: position === 'right',
     });
-    return (<div className={classes}>
-      <ul className={styles.columnItem}>{children}</ul>
-    </div>);
+    return (_jsx("div", { className: classes, children: _jsx("ul", { className: styles.columnItem, children: children }) }));
 });
 /**
  * Return copyright string
@@ -45,30 +44,24 @@ const FooterLine = memo(function FooterLine(props) {
         }
         const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
         if (item.url) {
-            return (<Link href={item.url} target={item.target} key={item.url + item.title} title={item.title}>
-          {element}
-        </Link>);
+            return (_jsx(Link, { href: item.url, target: item.target, title: item.title, children: element }, item.url + item.title));
         }
         return element;
     }
-    return <li className={styles.line}>{items.map(renderItem)}</li>;
+    return _jsx("li", { className: styles.line, children: items.map(renderItem) });
 });
 const Footer = memo(function Footer({ floating, className, left, center, right }) {
     function content(elements, position) {
         if (!elements) {
             return false;
         }
-        return (<FooterColumn key={position} position={position}>
-        {elements.map((item, idx) => (<FooterLine 
+        return (_jsx(FooterColumn, { position: position, children: elements.map((item, idx) => (_jsx(FooterLine
             // eslint-disable-next-line react/no-array-index-key
-            key={idx} item={item}/>))}
-      </FooterColumn>);
+            , { item: item }, idx))) }, position));
     }
     const classes = classNames(styles.footer, className, {
         [styles.footerFloating]: floating,
     });
-    return (<footer className={classes} data-test="ring-footer">
-      {[content(left, 'left'), content(center, 'center'), content(right, 'right')]}
-    </footer>);
+    return (_jsx("footer", { className: classes, "data-test": "ring-footer", children: [content(left, 'left'), content(center, 'center'), content(right, 'right')] }));
 });
 export default Footer;

package/components/global/create-stateful-context.d.ts

@@ -11,7 +11,7 @@ export default function createStatefulContext<T>(initialValue: T, name?: string)
     ValueContext: import("react").Context<T>;
     UpdateContext: import("react").Context<Update<T>>;
     Provider: {
-        ({ children }: ProviderProps): import("react").JSX.Element;
+        ({ children }: ProviderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     useUpdate: (value: T, skipUpdate?: boolean) => void;

package/components/global/create-stateful-context.js

@@ -1,12 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, memo, useContext, useEffect, useState } from 'react';
 export default function createStatefulContext(initialValue, name = '') {
     const ValueContext = createContext(initialValue);
     const UpdateContext = createContext(() => { });
     function Provider({ children }) {
         const [value, update] = useState(initialValue);
-        return (<ValueContext.Provider value={value}>
-        <UpdateContext.Provider value={update}>{children}</UpdateContext.Provider>
-      </ValueContext.Provider>);
+        return (_jsx(ValueContext.Provider, { value: value, children: _jsx(UpdateContext.Provider, { value: update, children: children }) }));
     }
     Provider.displayName = `${name}Provider`;
     function useUpdate(value, skipUpdate) {

package/components/global/focus-sensor-hoc.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import { createComposedRef } from './composeRefs';
 export default function focusSensorHOC(ComposedComponent) {
@@ -70,7 +71,7 @@ export default function focusSensorHOC(ComposedComponent) {
         };
         render() {
             const { autofocus, focused, onFocus, onBlur, innerRef, scrollOnTableFocus, ...rest } = this.props;
-            return (<ComposedComponent {...rest} innerRef={this.composedRef(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
+            return (_jsx(ComposedComponent, { ...rest, innerRef: this.composedRef(innerRef, this.onRefUpdate), focused: this.state.focused, onFocusReset: this.onFocusReset, onFocusRestore: this.onFocusRestore }));
         }
     }
     FocusSensor.defaultProps = {

package/components/global/react-dom-renderer.d.ts

@@ -7,5 +7,5 @@ export default class Renderer extends Component<RendererProps> {
     componentDidMount(): void;
     node?: HTMLElement | null;
     nodeRef: (node: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/global/react-dom-renderer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 export default class Renderer extends Component {
     componentDidMount() {
@@ -14,6 +15,6 @@ export default class Renderer extends Component {
     };
     render() {
         const { className } = this.props;
-        return <div className={className} ref={this.nodeRef}/>;
+        return _jsx("div", { className: className, ref: this.nodeRef });
     }
 }

package/components/global/rerender-hoc.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component, forwardRef } from 'react';
 import { createComposedRef } from './composeRefs';
 export default function rerenderHOC(ComposedComponent) {
@@ -6,10 +7,10 @@ export default function rerenderHOC(ComposedComponent) {
         composedRef = createComposedRef();
         render() {
             const ref = this.composedRef(this.props.forwardedRef);
-            return (<ComposedComponent {...this.state} ref={instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
+            return (_jsx(ComposedComponent, { ...this.state, ref: instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null) }));
         }
     }
     return forwardRef(function RerendererForwardRef(props, ref) {
-        return <Rerenderer props={props} forwardedRef={ref}/>;
+        return _jsx(Rerenderer, { props: props, forwardedRef: ref });
     });
 }

package/components/global/theme.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, forwardRef, useContext, createContext, } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
@@ -50,7 +51,7 @@ export function applyTheme(theme, container) {
     }
 }
 const DefaultWrapper = forwardRef(function Wrapper(props, ref) {
-    return <div {...props} ref={ref}/>;
+    return _jsx("div", { ...props, ref: ref });
 });
 export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, ...restProps }, ref) {
     const systemTheme = useTheme();
@@ -64,15 +65,6 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     }, [resolvedTheme, target]);
     const themeClasses = useThemeClasses(theme);
     const parentTarget = useContext(PopupTargetContext);
-    return (<ThemeContext.Provider value={themeValue}>
-      <WrapperComponent ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>
-        {passToPopups ? (<PopupTarget id={id}>
-            {popupTarget => (<>
-                {children}
-                {createPortal(<div className={themeClasses}>{popupTarget}</div>, (parentTarget && getPopupContainer(parentTarget)) || document.body)}
-              </>)}
-          </PopupTarget>) : (children)}
-      </WrapperComponent>
-    </ThemeContext.Provider>);
+    return (_jsx(ThemeContext.Provider, { value: themeValue, children: _jsx(WrapperComponent, { ref: ref, className: target != null ? undefined : classNames(className, themeClasses), ...restProps, children: passToPopups ? (_jsx(PopupTarget, { id: id, children: popupTarget => (_jsxs(_Fragment, { children: [children, createPortal(_jsx("div", { className: themeClasses, children: popupTarget }), (parentTarget && getPopupContainer(parentTarget)) || document.body)] })) })) : (children) }) }));
 });
 export default Theme;

package/components/global/variables.css

@@ -19,6 +19,8 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #ebecf0 */
   --ring-border-selected-disabled-components: 201, 204, 214;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #c9ccd6 */
+  --ring-border-disabled-active-components: 171, 213, 246;
+  --ring-border-disabled-active-color: rgb(var(--ring-border-disabled-active-components)); /* #abd5f6 */
   --ring-icon-disabled-components: 211, 213, 219;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d3d5db */
   --ring-border-hover-components: 160, 189, 248;

package/components/global/variables_dark.css

@@ -15,6 +15,8 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #4E5157 */
   --ring-border-selected-disabled-components: 90, 93, 99;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #5A5D63 */
+  --ring-border-disabled-active-components: 23, 73, 113;
+  --ring-border-disabled-active-color: rgb(var(--ring-border-disabled-active-components)); /* #174971 */
   --ring-icon-disabled-components: 78, 81, 87;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #4E5157 */
   --ring-border-hover-components: 55, 95, 173;

package/components/grid/col.d.ts

@@ -13,5 +13,5 @@ export interface ColProps {
     className?: string | null | undefined;
 }
 export default class Col extends Component<ColProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/grid/col.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './grid.css';
@@ -27,8 +28,6 @@ export default class Col extends Component {
         const classes = classNames(styles.col, className, getClassNames(restProps), {
             [styles.reverse]: reverse,
         });
-        return (<div className={classes} data-test="ring-grid-column">
-        {children}
-      </div>);
+        return (_jsx("div", { className: classes, "data-test": "ring-grid-column", children: children }));
     }
 }

package/components/grid/grid.d.ts

@@ -3,7 +3,7 @@ import { Component, HTMLAttributes } from 'react';
  * @name Grid
  */
 export declare class Grid extends Component<HTMLAttributes<HTMLDivElement>> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export { default as Row } from './row';
 export { default as Col } from './col';

package/components/grid/grid.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './grid.css';
@@ -8,9 +9,7 @@ export class Grid extends Component {
     render() {
         const { children, className, ...restProps } = this.props;
         const classes = classNames(styles['container-fluid'], className);
-        return (<div data-test="ring-grid" {...restProps} className={classes}>
-        {children}
-      </div>);
+        return (_jsx("div", { "data-test": "ring-grid", ...restProps, className: classes, children: children }));
     }
 }
 export { default as Row } from './row';

package/components/grid/row.d.ts

@@ -17,6 +17,6 @@ export interface RowProps {
     className?: string | null | undefined;
 }
 export default class Row extends Component<RowProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/components/grid/row.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './grid.css';
@@ -33,8 +34,6 @@ export default class Row extends Component {
         const classes = classNames(className, styles.row, getModifierClassNames(restProps), {
             [styles.reverse]: reverse,
         });
-        return (<div className={classes} data-test="ring-grid-row">
-        {children}
-      </div>);
+        return (_jsx("div", { className: classes, "data-test": "ring-grid-row", children: children }));
     }
 }

package/components/group/group.d.ts

@@ -3,5 +3,5 @@ import { Component, HTMLAttributes } from 'react';
  * @name Group
  */
 export default class Group extends Component<HTMLAttributes<HTMLSpanElement>> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/group/group.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './group.css';
@@ -8,8 +9,6 @@ export default class Group extends Component {
     render() {
         const { children, className, ...restProps } = this.props;
         const classes = classNames(styles.group, className);
-        return (<span data-test="ring-group" {...restProps} className={classes}>
-        {children}
-      </span>);
+        return (_jsx("span", { "data-test": "ring-group", ...restProps, className: classes, children: children }));
     }
 }

package/components/header/header-icon.d.ts

@@ -6,5 +6,5 @@ export interface HeaderIconSpecificProps {
     rotatable?: boolean | null | undefined;
 }
 export default class HeaderIcon extends Component<ButtonAttrs & HeaderIconSpecificProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/header/header-icon.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import Button from '../button/button';
@@ -9,6 +10,6 @@ export default class HeaderIcon extends Component {
             [styles.rotatable]: rotatable,
             [styles.rotated]: rotatable && restProps.active,
         });
-        return <Button {...restProps} className={classes}/>;
+        return _jsx(Button, { ...restProps, className: classes });
     }
 }

package/components/header/header.d.ts

@@ -17,7 +17,7 @@ declare class Header extends Component<HeaderProps> {
         theme: Theme;
         vertical: boolean;
     };
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
 export default Header;

package/components/header/header.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import Theme, { ThemeProvider } from '../global/theme';
@@ -20,11 +21,9 @@ class Header extends Component {
             [styles.headerSpaced]: spaced && !vertical,
         });
         const overrideOuterTheme = theme !== Theme.LIGHT;
-        const header = (<header {...restProps} className={classes}>
-        {children}
-      </header>);
+        const header = (_jsx("header", { ...restProps, className: classes, children: children }));
         if (overrideOuterTheme) {
-            return <ThemeProvider theme={theme}>{header}</ThemeProvider>;
+            return _jsx(ThemeProvider, { theme: theme, children: header });
         }
         return header;
     }

package/components/header/links.d.ts

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

package/components/header/links.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import ScrollableSection from '../scrollable-section/scrollable-section';
 import styles from './header.css';
 // currently only supports vertical header
 export default function Links({ className, ...restProps }) {
-    return <ScrollableSection {...restProps} className={classNames(styles.links, className)}/>;
+    return _jsx(ScrollableSection, { ...restProps, className: classNames(styles.links, className) });
 }

package/components/header/logo.d.ts

@@ -6,5 +6,5 @@ export default class Logo extends PureComponent<IconAttrs> {
         suppressSizeWarning: boolean;
     };
     static Size: typeof Size;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/header/logo.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import Icon, { Size } from '../icon/icon';
@@ -11,8 +12,6 @@ export default class Logo extends PureComponent {
     render() {
         const { className, ...restProps } = this.props;
         const classes = classNames(styles.logo, className);
-        return (<div className={classes}>
-        <Icon {...restProps}/>
-      </div>);
+        return (_jsx("div", { className: classes, children: _jsx(Icon, { ...restProps }) }));
     }
 }

package/components/header/profile.d.ts

@@ -44,6 +44,6 @@ export default class Profile extends PureComponent<ProfileProps> {
     static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
     context: React.ContextType<typeof Profile.contextType>;
     static Size: typeof Size;
-    render(): string | number | boolean | React.JSX.Element | Iterable<ReactNode> | null | undefined;
+    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 }
 export type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;

package/components/header/profile.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 classNames from 'classnames';
 import Avatar, { Size } from '../avatar/avatar';
 import Button from '../button/button';
@@ -14,13 +14,7 @@ export default class Profile extends PureComponent {
         closeOnSelect: true,
         renderPopupItems: items => items,
         size: Size.Size32,
-        renderGuest: ({ loading, onLogin, className, translations }) => (<I18nContext.Consumer>
-        {({ translate }) => (<div className={classNames(styles.profileEmpty, className)}>
-            <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
-              {translations?.login ?? translate('login')}
-            </Button>
-          </div>)}
-      </I18nContext.Consumer>),
+        renderGuest: ({ loading, onLogin, className, translations }) => (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx("div", { className: classNames(styles.profileEmpty, className), children: _jsx(Button, { primary: true, "data-test": "ring-header-login-button", disabled: loading, loader: loading, onClick: onLogin, children: translations?.login ?? translate('login') }) })) })),
     };
     static contextType = I18nContext;
     static Size = Size;
@@ -28,9 +22,7 @@ export default class Profile extends PureComponent {
         const { className, activeClassName, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showName, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, menuProps, onShow, onHide, ...props } = this.props;
         const { translate } = this.context;
         if (!user) {
-            return (<div {...props} className={classNames(styles.profileEmpty, className)}>
-          <Avatar size={size} round={round}/>
-        </div>);
+            return (_jsx("div", { ...props, className: classNames(styles.profileEmpty, className), children: _jsx(Avatar, { size: size, round: round }) }));
         }
         if (user.guest) {
             return renderGuest(this.props);
@@ -38,12 +30,7 @@ export default class Profile extends PureComponent {
         const avatarWrapper = classNames(styles.avatarWrapper, {
             [styles.hasUpdates]: hasUpdates,
         });
-        const anchor = (<button type="button" className={styles.anchorClassName}>
-        <span className={avatarWrapper}>
-          <Avatar url={user.profile && user.profile.avatar && user.profile.avatar.url} size={size} round={round} username={user.name}/>
-        </span>
-        {showName && <span>{user.name}</span>}
-      </button>);
+        const anchor = (_jsxs("button", { type: "button", className: styles.anchorClassName, children: [_jsx("span", { className: avatarWrapper, children: _jsx(Avatar, { url: user.profile && user.profile.avatar && user.profile.avatar.url, size: size, round: round, username: user.name }) }), showName && _jsx("span", { children: user.name })] }));
         const items = [
             showApplyChangedUser && {
                 rgItemType,
@@ -76,12 +63,12 @@ export default class Profile extends PureComponent {
                 onClick: onLogout,
             },
         ].filter(isTruthy);
-        return (<DropdownMenu {...props} onShow={onShow} onHide={onHide} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test="ring-profile" className={classNames(styles.profile, className)} activeClassName={activeClassName} menuProps={{
+        return (_jsx(DropdownMenu, { ...props, onShow: onShow, onHide: onHide, title: user.name, anchor: anchor, data: renderPopupItems(items), "data-test": "ring-profile", className: classNames(styles.profile, className), activeClassName: activeClassName, menuProps: {
                 closeOnSelect,
                 left: -2,
                 top: -8,
                 sidePadding: 32,
                 ...menuProps,
-            }}/>);
+            } }));
     }
 }

package/components/header/services-link.d.ts

@@ -11,5 +11,5 @@ export interface ServicesLinkProps extends Partial<LinkProps> {
     service: Service;
 }
 export default class ServicesLink extends PureComponent<ServicesLinkProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/header/services-link.js

@@ -1,16 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import Link from '../link/link';
 import styles from './services.css';
 export default class ServicesLink extends PureComponent {
     render() {
         const { service, ...props } = this.props;
-        return (<Link target="_self" href={service.homeUrl} {...props}>
-        {service.iconUrl
+        return (_jsx(Link, { target: "_self", href: service.homeUrl, ...props, children: service.iconUrl
                 ? [
-                    <span key="icon" className={styles.itemLogo} style={{ backgroundImage: `url(${service.iconUrl})` }}/>,
-                    <div key="text">{service.name}</div>,
+                    _jsx("span", { className: styles.itemLogo, style: { backgroundImage: `url(${service.iconUrl})` } }, "icon"),
+                    _jsx("div", { children: service.name }, "text"),
                 ]
-                : service.name}
-      </Link>);
+                : service.name }));
     }
 }

package/components/header/services.d.ts

@@ -15,5 +15,5 @@ export default class Services extends PureComponent<ServicesProps> {
     };
     static Link: typeof ServicesLink;
     serviceIsActive: (service: Service) => boolean;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }