@jetbrains/ring-ui 7.0.72 → 7.0.74

package/components/date-picker/{months.js → months.jsx}

@@ -1,5 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { useEffect, useMemo, useRef } from 'react';
 import { addMonths } from 'date-fns/addMonths';
 import { getDay } from 'date-fns/getDay';
@@ -12,8 +10,8 @@ import linearFunction from '../global/linear-function';
 import useEventCallback from '../global/use-event-callback';
 import Month from './month';
 import MonthNames from './month-names';
-import styles from './date-picker.css';
 import units, { DOUBLE, HALF, WEEK, weekdays } from './consts';
+import styles from './date-picker.css';
 const { unit, cellSize, calHeight } = units;
 const FridayToSunday = WEEK + weekdays.SU - weekdays.FR;
 const FIVELINES = 31;
@@ -83,7 +81,12 @@ export default function Months(props) {
             }
         };
     }, [handleWheel]);
-    return (_jsxs("div", { className: styles.months, ref: componentRef, children: [_jsx("div", { style: {
-                    top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset),
-                }, className: styles.days, children: months.map(date => (_createElement(Month, { ...props, month: date, key: +date }))) }), _jsx(MonthNames, { ...props })] }));
+    return (<div className={styles.months} ref={componentRef}>
+      <div style={{
+            top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset),
+        }} className={styles.days}>
+        {months.map(date => (<Month {...props} month={date} key={+date}/>))}
+      </div>
+      <MonthNames {...props}/>
+    </div>);
 }

package/components/date-picker/weekdays.d.ts

@@ -2,5 +2,5 @@ import type { Locale } from 'date-fns';
 interface WeekdaysProps {
     locale: Locale | undefined;
 }
-export default function Weekdays(props: WeekdaysProps): import("react/jsx-runtime").JSX.Element;
+export default function Weekdays(props: WeekdaysProps): import("react").JSX.Element;
 export {};

package/components/date-picker/{weekdays.js → weekdays.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { getDay } from 'date-fns/getDay';
 import { format } from 'date-fns/format';
@@ -9,7 +8,11 @@ import styles from './date-picker.css';
 export default function Weekdays(props) {
     const days = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale)).map(value => startOfDay(setDay(new Date(), value)));
     const { locale } = props;
-    return (_jsx("div", { className: styles.weekdays, children: days.map(day => (_jsx("span", { className: classNames(styles.weekday, {
+    return (<div className={styles.weekdays}>
+      {days.map(day => (<span className={classNames(styles.weekday, {
                 [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
-            }), children: format(day, 'EEEEEE', { locale }) }, +day))) }));
+            })} key={+day}>
+          {format(day, 'EEEEEE', { locale })}
+        </span>))}
+    </div>);
 }

package/components/date-picker/years.d.ts

@@ -14,6 +14,6 @@ export default class Years extends PureComponent<CalendarProps> {
     setYear(date: number): void;
     componentRef: import("react").RefObject<HTMLDivElement | null>;
     handleWheel: (e: WheelEvent) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

package/components/date-picker/{years.js → years.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createRef, PureComponent } from 'react';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';
@@ -10,8 +9,8 @@ import { setYear } from 'date-fns/setYear';
 import { startOfYear } from 'date-fns/startOfYear';
 import { subYears } from 'date-fns/subYears';
 import linearFunction from '../global/linear-function';
-import styles from './date-picker.css';
 import units, { DOUBLE, HALF, yearDuration } from './consts';
+import styles from './date-picker.css';
 const { yearHeight, calHeight } = units;
 let scrollTO;
 const YEARSBACK = 5;
@@ -65,14 +64,18 @@ export default class Years extends PureComponent {
             years.push(year);
         }
         const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
-        return (_jsx("div", { className: styles.years, ref: this.componentRef, style: {
+        return (<div className={styles.years} ref={this.componentRef} style={{
                 transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
                 top: Math.floor(calHeight * HALF - pxToDate.x(Number(date))),
-            }, children: years.map(item => (_jsx("button", { type: 'button', className: classNames(styles.year, {
+            }}>
+        {years.map(item => (<button type='button' key={+item} className={classNames(styles.year, {
                     [styles.currentYear]: isSameYear(item, date),
                     [styles.today]: isThisYear(item),
-                }), onClick: function handleClick() {
+                })} onClick={function handleClick() {
                     onScrollChange(Number(setYear(scrollDate, getYear(item))));
-                }, children: format(item, 'yyyy') }, +item))) }));
+                }}>
+            {format(item, 'yyyy')}
+          </button>))}
+      </div>);
     }
 }

package/components/dialog/dialog.d.ts

@@ -45,6 +45,6 @@ export default class Dialog extends PureComponent<DialogProps> {
     dialog?: HTMLElement | null;
     dialogRef: (tabTrap: TabTrap | null) => void;
     nativeDialog: React.RefObject<HTMLDialogElement | null>;
-    render(): false | import("react/jsx-runtime").JSX.Element;
+    render(): false | React.JSX.Element;
 }
 export type DialogAttrs = React.JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createRef, PureComponent } from 'react';
+import * as React from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
@@ -112,21 +112,38 @@ export default class Dialog extends PureComponent {
         const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, preventBodyScroll, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
-        const content = (_jsxs(_Fragment, { children: [_jsx(Shortcuts, { map: shortcutsMap, scope: this.state.shortcutsScope, options: this.props.shortcutOptions }), (onOverlayClick !== noop || onCloseAttempt !== noop) && (_jsx("div", { 
-                    // click handler is duplicated in close button
-                    role: 'presentation', className: styles.clickableOverlay, onClick: this.handleClick, "data-test": 'ring-dialog-overlay' })), _jsx("div", { className: styles.innerContainer, children: _jsxs(AdaptiveIsland, { className: classNames(styles.content, contentClassName, {
-                            [styles.dense]: dense,
-                        }), "data-test": 'ring-dialog', role: 'dialog', "aria-label": label, children: [children, showCloseButton && (_jsx(Button, { icon: closeIcon, "data-test": 'ring-dialog-close-button', className: classNames(styles.closeButton, {
-                                    [styles.closeButtonOutside]: !closeButtonInside,
-                                    [styles.closeButtonInside]: closeButtonInside,
-                                }), iconClassName: classNames(styles.closeIcon, {
-                                    [styles.closeIconOutside]: !closeButtonInside,
-                                    [styles.closeIconInside]: closeButtonInside,
-                                }), onClick: this.onCloseClick, title: closeButtonTitle, "aria-label": closeButtonTitle || 'close dialog' }))] }) })] }));
+        const content = (<>
+        <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope} options={this.props.shortcutOptions}/>
+        {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
+            // click handler is duplicated in close button
+            role='presentation' className={styles.clickableOverlay} onClick={this.handleClick} data-test='ring-dialog-overlay'/>)}
+        <div className={styles.innerContainer}>
+          <AdaptiveIsland className={classNames(styles.content, contentClassName, {
+                [styles.dense]: dense,
+            })} data-test='ring-dialog' role='dialog' aria-label={label}>
+            {children}
+            {showCloseButton && (<Button icon={closeIcon} data-test='ring-dialog-close-button' className={classNames(styles.closeButton, {
+                    [styles.closeButtonOutside]: !closeButtonInside,
+                    [styles.closeButtonInside]: closeButtonInside,
+                })} iconClassName={classNames(styles.closeIcon, {
+                    [styles.closeIconOutside]: !closeButtonInside,
+                    [styles.closeIconInside]: closeButtonInside,
+                })} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+          </AdaptiveIsland>
+        </div>
+      </>);
         if (native) {
-            return (_jsx("dialog", { className: classNames(styles.nativeDialog, className), ref: this.nativeDialog, "data-rg-modal-dialog-container": modal ? '' : undefined, children: _jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(_Fragment, { children: [content, target] })) }) }));
+            return (<dialog className={classNames(styles.nativeDialog, className)} ref={this.nativeDialog} data-rg-modal-dialog-container={modal ? '' : undefined}>
+          <PopupTarget id={this.uid} className={styles.popupTarget}>
+            {target => (<>
+                {content}
+                {target}
+              </>)}
+          </PopupTarget>
+        </dialog>);
         }
-        return (show && (_jsx(PopupTargetContext.Consumer, { children: contextTarget => {
+        return (show && (<PopupTargetContext.Consumer>
+          {contextTarget => {
                 let targetElement = document.body;
                 if (portalTarget instanceof HTMLElement) {
                     targetElement = portalTarget;
@@ -137,7 +154,13 @@ export default class Dialog extends PureComponent {
                         targetElement = container;
                     }
                 }
-                return createPortal(_jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(TabTrap, { trapDisabled: !trapFocus, "data-test": dataTests('ring-dialog-container', dataTest), "data-rg-modal-dialog-container": '', ref: this.dialogRef, className: classes, role: 'presentation', ...restProps, children: [content, target] })) }), targetElement);
-            } })));
+                return createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
+                {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} data-rg-modal-dialog-container='' ref={this.dialogRef} className={classes} role='presentation' {...restProps}>
+                    {content}
+                    {target}
+                  </TabTrap>)}
+              </PopupTarget>, targetElement);
+            }}
+        </PopupTargetContext.Consumer>));
     }
 }

package/components/dropdown/anchor.d.ts

@@ -1,3 +1,3 @@
 import { type ButtonAttrs } from '../button/button';
-declare const _default: import("react").MemoExoticComponent<({ children, className, ...restProps }: ButtonAttrs) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ children, className, ...restProps }: ButtonAttrs) => import("react").JSX.Element>;
 export default _default;

package/components/dropdown/anchor.jsx

@@ -0,0 +1,8 @@
+import { memo } from 'react';
+import classNames from 'classnames';
+import Button from '../button/button';
+import styles from './dropdown.css';
+const Anchor = ({ children, className, ...restProps }) => (<Button data-test-ring-dropdown-anchor inline dropdown className={classNames(styles.anchor, className)} {...restProps}>
+    {children}
+  </Button>);
+export default memo(Anchor);

package/components/dropdown/dropdown.d.ts

@@ -66,7 +66,7 @@ export default class Dropdown extends Component<DropdownProps, DropdownState> {
     toggle(show?: boolean): void;
     _toggle(show: boolean, pinned?: boolean): void;
     _clearTimer(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export type DropdownAttrs = React.JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
 export { Anchor };

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, Component } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { isArray } from '../global/typescript-utils';
@@ -105,7 +105,7 @@ export default class Dropdown extends Component {
         const active = hoverMode ? pinned : show;
         switch (typeof anchor) {
             case 'string':
-                anchorElement = _jsx(Anchor, { active: active, children: anchor });
+                anchorElement = <Anchor active={active}>{anchor}</Anchor>;
                 break;
             case 'function':
                 anchorElement = anchor({ active: show, pinned });
@@ -125,11 +125,14 @@ export default class Dropdown extends Component {
             onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
             dontCloseOnAnchorClick: true,
         };
-        return (_jsxs("div", { "data-test": dataTests('ring-dropdown', dataTest), ...restProps, onClick: clickMode ? this.onClick : undefined, 
-            // anchorElement should be a `button` or an `a`
-            role: 'presentation', onMouseEnter: hoverMode ? this.onMouseEnter : undefined, onMouseLeave: hoverMode ? this.onMouseLeave : undefined, className: classes, children: [anchorElement, typeof children === 'function'
-                    ? children(childProps)
-                    : cloneElement(children, childProps)] }));
+        return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onClick={clickMode ? this.onClick : undefined} 
+        // anchorElement should be a `button` or an `a`
+        role='presentation' onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
+        {anchorElement}
+        {typeof children === 'function'
+                ? children(childProps)
+                : cloneElement(children, childProps)}
+      </div>);
     }
 }
 export { Anchor };

package/components/dropdown-menu/{dropdown-menu.js → dropdown-menu.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo, cloneElement, } from 'react';
 import List, { ActiveItemContext } from '../list/list';
 import Dropdown from '../dropdown/dropdown';
@@ -16,7 +15,7 @@ function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listI
     const anchorProps = useMemo(() => ({ active, pinned, ...restProps, ...anchorAriaProps }), [pinned, active, restProps, anchorAriaProps]);
     const anchorComponentProps = useMemo(() => ({ ...anchorProps, pinned: `${anchorProps.pinned}` }), [anchorProps]);
     if (typeof anchor === 'string') {
-        return _jsx(Anchor, { ...anchorComponentProps, children: anchor });
+        return <Anchor {...anchorComponentProps}>{anchor}</Anchor>;
     }
     if (typeof anchor === 'function') {
         return anchor({ active, pinned, ...restProps }, anchorAriaProps);
@@ -24,11 +23,11 @@ function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listI
     if (!isArray(anchor)) {
         return cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
     }
-    return _jsx("div", { ...anchorAriaProps, children: anchor });
+    return <div {...anchorAriaProps}>{anchor}</div>;
 }
 function renderDropdownMenuChildren({ children, popupMenuProps }) {
     if (!children) {
-        return _jsx(PopupMenu, { ...popupMenuProps });
+        return <PopupMenu {...popupMenuProps}/>;
     }
     return (popupProps) => children({ ...popupProps, ...popupMenuProps });
 }
@@ -44,6 +43,12 @@ const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, d
         onSelect,
         ...menuProps,
     }), [ariaLabel, data, forwardedRef, listId, menuProps, onSelect]);
-    return (_jsx(ActiveItemContext.Provider, { children: _jsx(Dropdown, { anchor: ({ pinned, active, ...restAnchorProps }) => (_jsx(ActiveItemContext.ValueContext.Consumer, { children: activeItemId => (_jsx(DropdownAnchorWrapper, { anchor: anchor, pinned: pinned, active: active, activeListItemId: activeItemId, listId: listId, ...restAnchorProps })) })), ...restDropdownProps, children: renderDropdownMenuChildren({ children, popupMenuProps }) }) }));
+    return (<ActiveItemContext.Provider>
+      <Dropdown anchor={({ pinned, active, ...restAnchorProps }) => (<ActiveItemContext.ValueContext.Consumer>
+            {activeItemId => (<DropdownAnchorWrapper anchor={anchor} pinned={pinned} active={active} activeListItemId={activeItemId} listId={listId} {...restAnchorProps}/>)}
+          </ActiveItemContext.ValueContext.Consumer>)} {...restDropdownProps}>
+        {renderDropdownMenuChildren({ children, popupMenuProps })}
+      </Dropdown>
+    </ActiveItemContext.Provider>);
 });
 export default Object.assign(DropdownMenu, { ListProps: List.ListProps });

package/components/editable-heading/editable-heading.d.ts

@@ -28,6 +28,6 @@ export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | H
     renderMenu?: () => React.ReactNode;
     translations?: EditableHeadingTranslations;
 };
-export declare const EditableHeading: (props: EditableHeadingProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const EditableHeading: (props: EditableHeadingProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => React.JSX.Element>;
 export default _default;

package/components/editable-heading/{editable-heading.js → editable-heading.jsx}

@@ -1,13 +1,12 @@
-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';
 import Heading, { Levels } from '../heading/heading';
 import Button from '../button/button';
 import { Size } from '../input/input';
-import inputStyles from '../input/input.css';
 import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
+import inputStyles from '../input/input.css';
 import styles from './editable-heading.css';
 export { Levels };
 export { Size };
@@ -112,6 +111,35 @@ export const EditableHeading = (props) => {
             window.removeEventListener('mouseup', onMouseUp);
         };
     }, [onMouseMove, onMouseUp]);
-    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 })] }));
+    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>}
+    </>);
 };
 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-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/error-bubble/error-bubble.jsx

@@ -0,0 +1,23 @@
+import { Children, cloneElement, PureComponent } from 'react';
+import classNames from 'classnames';
+import Popup from '../popup/popup';
+import { Directions } from '../popup/popup.consts';
+import styles from './error-bubble.css';
+/**
+ * @name Error Bubble
+ */
+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 &&
+                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>);
+    }
+}

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

package/components/error-message/error-message.jsx

@@ -0,0 +1,25 @@
+import { Component } from 'react';
+import classNames from 'classnames';
+import Icon from '../icon/icon';
+import { Size } from '../icon/icon.constants';
+import dataTests from '../global/data-tests';
+import styles from './error-message.css';
+/**
+ * @name Error Message
+ */
+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>);
+    }
+}

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

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

package/components/global/{create-stateful-context.js → create-stateful-context.jsx}

@@ -1,11 +1,12 @@
-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 (_jsx(ValueContext.Provider, { value: value, children: _jsx(UpdateContext.Provider, { value: update, children: children }) }));
+        return (<ValueContext.Provider value={value}>
+        <UpdateContext.Provider value={update}>{children}</UpdateContext.Provider>
+      </ValueContext.Provider>);
     }
     Provider.displayName = `${name}Provider`;
     function useUpdate(value, skipUpdate) {

package/components/global/{focus-sensor-hoc.js → focus-sensor-hoc.jsx}

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

package/components/global/get-uid.js

@@ -1,6 +1,6 @@
 const idCounters = {};
 function generateSalt() {
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    // eslint-disable-next-line no-magic-numbers
     return (Date.now() * Math.random()).toString(36).substring(0, 4);
 }
 const salt = generateSalt();

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

package/components/global/{react-dom-renderer.js → react-dom-renderer.jsx}

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

package/components/global/{rerender-hoc.js → rerender-hoc.jsx}

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

package/components/global/{theme.js → theme.jsx}

@@ -1,12 +1,11 @@
-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';
 import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
 import { getPopupContainer } from '../popup/popup';
+import getUID from './get-uid';
 import defaultStyles from './variables.css';
 import styles from './variables_dark.css';
-import getUID from './get-uid';
 var Theme;
 (function (Theme) {
     Theme["AUTO"] = "auto";
@@ -51,7 +50,7 @@ export function applyTheme(theme, container) {
     }
 }
 const DefaultWrapper = forwardRef(function Wrapper(props, ref) {
-    return _jsx("div", { ...props, ref: ref });
+    return <div {...props} ref={ref}/>;
 });
 export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, ...restProps }, ref) {
     const systemTheme = useTheme();
@@ -65,6 +64,15 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     }, [resolvedTheme, target]);
     const themeClasses = useThemeClasses(theme);
     const parentTarget = useContext(PopupTargetContext);
-    return (_jsx(ThemeContext.Provider, { value: themeValue, children: _jsx(WrapperComponent, { ref: ref, className: target ? 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) }) }));
+    return (<ThemeContext.Provider value={themeValue}>
+      <WrapperComponent ref={ref} className={target ? 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>);
 });
 export default Theme;