@jetbrains/ring-ui 7.0.72 → 7.0.74

package/components/tabs/collapsible-more.d.ts

@@ -6,7 +6,7 @@ export interface FakeMoreButtonProps {
     moreClassName?: string | null | undefined;
     moreActiveClassName?: string | null | undefined;
 }
-export declare const AnchorLink: ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<ContainerProps<ButtonButtonProps>, "children"> & FakeMoreButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnchorLink: ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<ContainerProps<ButtonButtonProps>, "children"> & FakeMoreButtonProps) => import("react").JSX.Element;
 export interface MoreButtonProps {
     items: ReactElement<TabProps>[];
     selected?: string | undefined;
@@ -17,5 +17,5 @@ export interface MoreButtonProps {
     morePopupItemClassName?: string | undefined;
     morePopupBeforeEnd: ReactNode;
 }
-export declare const MoreButton: import("react").MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd, }: MoreButtonProps) => import("react/jsx-runtime").JSX.Element | null>;
-export declare const FakeMoreButton: import("react").MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const MoreButton: import("react").MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd, }: MoreButtonProps) => import("react").JSX.Element | null>;
+export declare const FakeMoreButton: import("react").MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => import("react").JSX.Element>;

package/components/tabs/{collapsible-more.js → collapsible-more.jsx}

@@ -1,16 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import classNames from 'classnames';
 import { Directions } from '../popup/popup.consts';
 import PopupMenu, { ListProps } from '../popup-menu/popup-menu';
 import Dropdown from '../dropdown/dropdown';
 import Anchor from '../dropdown/anchor';
-import styles from './tabs.css';
 import getTabTitles from './collapsible-tab';
 import { CustomItem } from './custom-item';
+import styles from './tabs.css';
 export const AnchorLink = ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }) => {
     const classnames = classNames(styles.title, hasActiveChildren && styles.selected, hasActiveChildren && moreActiveClassName, moreClassName);
-    return (_jsx(Anchor, { title: 'More', className: classnames, ...restProps, children: 'More' }));
+    return (<Anchor title={'More'} className={classnames} {...restProps}>
+      {'More'}
+    </Anchor>);
 };
 const morePopupDirections = [Directions.BOTTOM_CENTER, Directions.BOTTOM_LEFT, Directions.BOTTOM_RIGHT];
 export const MoreButton = memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd, }) => {
@@ -51,13 +52,19 @@ export const MoreButton = memo(({ items, selected, onSelect, moreClassName, more
         }
         return popupItems;
     }, [items, morePopupBeforeEnd, morePopupItemClassName, selected]);
-    const popupAnchor = useMemo(() => (_jsx(AnchorLink, { moreClassName: moreClassName, moreActiveClassName: moreActiveClassName, hasActiveChildren: hasActiveChild })), [hasActiveChild, moreActiveClassName, moreClassName]);
-    const popup = useMemo(() => (_jsx(PopupMenu, { directions: morePopupDirections, className: morePopupClassName, onSelect: onSelectHandler, data: data })), [data, morePopupClassName, onSelectHandler]);
+    const popupAnchor = useMemo(() => (<AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChild}/>), [hasActiveChild, moreActiveClassName, moreClassName]);
+    const popup = useMemo(() => (<PopupMenu directions={morePopupDirections} className={morePopupClassName} onSelect={onSelectHandler} data={data}/>), [data, morePopupClassName, onSelectHandler]);
     if (items.length === 0) {
         return null;
     }
-    return (_jsx("div", { className: classNames(styles.title, moreClassName, hasActiveChild && moreActiveClassName), children: _jsx(Dropdown, { hoverMode: true, anchor: popupAnchor, children: popup }) }));
+    return (<div className={classNames(styles.title, moreClassName, hasActiveChild && moreActiveClassName)}>
+        <Dropdown hoverMode anchor={popupAnchor}>
+          {popup}
+        </Dropdown>
+      </div>);
 });
 MoreButton.displayName = 'MoreButton';
-export const FakeMoreButton = memo(({ moreClassName, moreActiveClassName, hasActiveChildren }) => (_jsx("div", { className: classNames(styles.moreButton, styles.title), children: _jsx(AnchorLink, { moreClassName: moreClassName, moreActiveClassName: moreActiveClassName, hasActiveChildren: hasActiveChildren, tabIndex: -1, disabled: true }) })));
+export const FakeMoreButton = memo(({ moreClassName, moreActiveClassName, hasActiveChildren }) => (<div className={classNames(styles.moreButton, styles.title)}>
+    <AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChildren} tabIndex={-1} disabled/>
+  </div>));
 FakeMoreButton.displayName = 'FakeMoreButton';

package/components/tabs/collapsible-tab.d.ts

@@ -13,5 +13,5 @@ export interface TabTitlesParams extends Omit<Partial<TabTitleProps>, 'selected'
     selected?: string | undefined;
     onSelect?: ((key: string) => ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined) | undefined;
 }
-declare const getTabTitles: ({ items, selected, collapsed, onSelect, ...props }: TabTitlesParams) => import("react/jsx-runtime").JSX.Element[];
+declare const getTabTitles: ({ items, selected, collapsed, onSelect, ...props }: TabTitlesParams) => React.JSX.Element[];
 export default getTabTitles;

package/components/tabs/{collapsible-tab.js → collapsible-tab.jsx}

@@ -1,9 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import classNames from 'classnames';
-import styles from './tabs.css';
 import TabLink from './tab-link';
 import { CustomItem } from './custom-item';
+import styles from './tabs.css';
 const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect, collapsed = false, tabIndex, }) {
     if (child === null || typeof child !== 'object' || child.type === CustomItem) {
         return child;
@@ -16,11 +15,11 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect, c
         [collapsedClassName ?? '']: collapsed,
         [collapsedActiveClassName ?? '']: collapsed && selected,
     });
-    return (_jsx(TabLink, { title: title, isSelected: selected, active: true, href: href, className: titleClasses, disabled: disabled, onPlainLeftClick: handleSelect, tabIndex: tabIndex, collapsed: collapsed, ...titleProps }));
+    return (<TabLink title={title} isSelected={selected} active href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
 });
 const getTabTitles = ({ items, selected = '0', collapsed, onSelect = () => undefined, ...props }) => items.map((tab, index) => {
     const key = tab.props.id || String(index);
     const isSelected = selected === key;
-    return (_jsx(TabTitle, { handleSelect: onSelect(key), selected: isSelected, child: tab, collapsed: collapsed, ...props }, key));
+    return (<TabTitle key={key} handleSelect={onSelect(key)} selected={isSelected} child={tab} collapsed={collapsed} {...props}/>);
 });
 export default getTabTitles;

package/components/tabs/collapsible-tabs.d.ts

@@ -12,6 +12,6 @@ export interface CollapsibleTabsProps {
     initialVisibleItems?: number | null | undefined;
     morePopupBeforeEnd?: ReactNode;
 }
-export declare const CollapsibleTabs: ({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const CollapsibleTabs: ({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react").JSX.Element>;
 export default _default;

package/components/tabs/{collapsible-tabs.js → collapsible-tabs.jsx}

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useMemo, useCallback, useEffect, memo } from 'react';
 import classNames from 'classnames';
 import fastdom from 'fastdom';
-import styles from './tabs.css';
 import { FakeMoreButton, MoreButton } from './collapsible-more';
 import getTabTitles from './collapsible-tab';
+import styles from './tabs.css';
 const DEFAULT_DEBOUNCE_INTERVAL = 100;
 const MEASURE_TOLERANCE = 0.5;
 export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }) => {
@@ -173,6 +172,15 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
     }, [adjustTabs]);
     const isAdjusted = (elements.lastVisibleIndex !== null && preparedElements.ready) || initialVisibleItems;
     const className = classNames(styles.titles, styles.autoCollapse, isAdjusted && styles.adjusted);
-    return (_jsxs("div", { className: styles.autoCollapseContainer, children: [_jsxs("div", { className: classNames(className, styles.rendered), children: [visibleElements, _jsx(MoreButton, { moreClassName: moreClassName, moreActiveClassName: moreActiveClassName, morePopupClassName: morePopupClassName, morePopupBeforeEnd: morePopupBeforeEnd, morePopupItemClassName: morePopupItemClassName, items: hiddenElements, selected: selected, onSelect: onSelect })] }), _jsxs("div", { ref: measureRef, className: classNames(className, styles.measure), children: [childrenToMeasure, _jsx(FakeMoreButton, { hasActiveChildren: hiddenElements.some(item => item.props.alwaysHidden && item.props.id === selected), moreClassName: moreClassName, moreActiveClassName: moreActiveClassName })] })] }));
+    return (<div className={styles.autoCollapseContainer}>
+      <div className={classNames(className, styles.rendered)}>
+        {visibleElements}
+        <MoreButton moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} morePopupClassName={morePopupClassName} morePopupBeforeEnd={morePopupBeforeEnd} morePopupItemClassName={morePopupItemClassName} items={hiddenElements} selected={selected} onSelect={onSelect}/>
+      </div>
+      <div ref={measureRef} className={classNames(className, styles.measure)}>
+        {childrenToMeasure}
+        <FakeMoreButton hasActiveChildren={hiddenElements.some(item => item.props.alwaysHidden && item.props.id === selected)} moreClassName={moreClassName} moreActiveClassName={moreActiveClassName}/>
+      </div>
+    </div>);
 };
 export default memo(CollapsibleTabs);

package/components/tabs/dumb-tabs.d.ts

@@ -16,8 +16,8 @@ export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'chil
 }
 declare class Tabs extends PureComponent<TabsProps> {
     handleSelect: (arg: string) => () => void | undefined;
-    getTabTitle: (child: ReactElement<TabProps>, i: number) => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
+    getTabTitle: (child: ReactElement<TabProps>, i: number) => React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type TabsAttrs = React.JSX.LibraryManagedAttributes<typeof Tabs, TabsProps>;
 export default Tabs;

package/components/tabs/{dumb-tabs.js → dumb-tabs.jsx}

@@ -1,13 +1,12 @@
-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 memoize from '../global/memoize';
 import dataTests from '../global/data-tests';
-import styles from './tabs.css';
 import TabLink from './tab-link';
 import CollapsibleTabs from './collapsible-tabs';
 import { CustomItem } from './custom-item';
+import styles from './tabs.css';
 export { CustomItem };
 class Tabs extends PureComponent {
     handleSelect = memoize((key) => () => this.props.onSelect?.(key));
@@ -22,13 +21,20 @@ class Tabs extends PureComponent {
         const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
             [styles.selected]: isSelected,
         });
-        return (_jsx(TabLink, { title: title, isSelected: isSelected, href: href, className: titleClasses, disabled: disabled, onPlainLeftClick: onSelect ? this.handleSelect(key) : undefined, ...titleProps }, key));
+        return (<TabLink title={title} isSelected={isSelected} key={key} href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={onSelect ? this.handleSelect(key) : undefined} {...titleProps}/>);
     };
     render() {
         const { className, tabContainerClassName, children, selected, autoCollapse, 'data-test': dataTest, onSelect, ...restProps } = this.props;
         const classes = classNames(styles.tabs, className);
         const childrenArray = React.Children.toArray(children).filter(Boolean);
-        return (_jsxs("div", { className: classes, "data-test": dataTests('ring-dumb-tabs', dataTest), children: [autoCollapse === true ? (_jsx(CollapsibleTabs, { ...restProps, onSelect: onSelect ? this.handleSelect : undefined, selected: selected, children: childrenArray })) : (_jsx("div", { className: styles.titles, children: childrenArray.map(this.getTabTitle) })), _jsx("div", { className: classNames(tabContainerClassName), children: childrenArray.find(({ props }, i) => (props.id || String(i)) === selected) })] }));
+        return (<div className={classes} data-test={dataTests('ring-dumb-tabs', dataTest)}>
+        {autoCollapse === true ? (<CollapsibleTabs {...restProps} onSelect={onSelect ? this.handleSelect : undefined} selected={selected}>
+            {childrenArray}
+          </CollapsibleTabs>) : (<div className={styles.titles}>{childrenArray.map(this.getTabTitle)}</div>)}
+        <div className={classNames(tabContainerClassName)}>
+          {childrenArray.find(({ props }, i) => (props.id || String(i)) === selected)}
+        </div>
+      </div>);
     }
 }
 export default Tabs;

package/components/tabs/smart-tabs.d.ts

@@ -10,5 +10,5 @@ export default class SmartTabs extends PureComponent<SmartTabsProps> {
         selected: string;
     };
     handleSelect: (selected: string) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/tabs/{smart-tabs.js → smart-tabs.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import dataTests from '../global/data-tests';
 import Tabs from './dumb-tabs';
@@ -13,6 +12,8 @@ export default class SmartTabs extends PureComponent {
     handleSelect = (selected) => this.setState({ selected });
     render() {
         const { children, initSelected, 'data-test': dataTest, ...restProps } = this.props;
-        return (_jsx(Tabs, { "data-test": dataTests('ring-smart-tabs', dataTest), selected: this.state.selected, onSelect: this.handleSelect, ...restProps, children: children }));
+        return (<Tabs data-test={dataTests('ring-smart-tabs', dataTest)} selected={this.state.selected} onSelect={this.handleSelect} {...restProps}>
+        {children}
+      </Tabs>);
     }
 }

package/components/tabs/tab-link.d.ts

@@ -5,6 +5,6 @@ export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
     collapsed?: boolean;
     title: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
 }
-declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TabLink>;
 export default _default;

package/components/tabs/tab-link.jsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+import Link from '../link/link';
+import styles from './tabs.css';
+function TabLink({ isSelected, title, collapsed, ...restProps }) {
+    const renderedTitle = typeof title === 'function' ? title(isSelected, collapsed) : title;
+    return (<Link {...restProps}>
+      <div className={styles.container}>
+        <span className={styles.visible}>{renderedTitle}</span>
+        {/* hack for preserving constant tab width*/}
+        <span className={styles.hidden}>{renderedTitle}</span>
+        <span className={styles.hiddenBold}>{renderedTitle}</span>
+        <span className={styles.hiddenRegular}>{renderedTitle}</span>
+      </div>
+    </Link>);
+}
+export default memo(TabLink);

package/components/tabs/tab.d.ts

@@ -15,5 +15,5 @@ export interface TabProps {
     collapsedActiveClassName?: string | null | undefined;
 }
 export default class Tab extends PureComponent<TabProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/tabs/{tab.js → tab.jsx}

@@ -1,10 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 export default class Tab extends PureComponent {
     render() {
         const { className, children, 'data-test': dataTest } = this.props;
-        return (_jsx("div", { "data-test": dataTests('ring-tab', dataTest), className: classNames(className), children: children }));
+        return (<div data-test={dataTests('ring-tab', dataTest)} className={classNames(className)}>
+        {children}
+      </div>);
     }
 }

package/components/tag/tag.d.ts

@@ -50,11 +50,11 @@ export default class Tag extends PureComponent<TagProps> {
     tagNode?: HTMLElement | null;
     tagRef: (el: HTMLElement | null) => void;
     setDocumentClickListener(setListener: boolean): void;
-    renderCustomIcon(): import("react/jsx-runtime").JSX.Element | null;
+    renderCustomIcon(): React.JSX.Element | null;
     private _renderImageElement;
-    renderImage(): import("react/jsx-runtime").JSX.Element | null;
-    renderAvatar(): import("react/jsx-runtime").JSX.Element | null;
-    renderRemoveIcon(): import("react/jsx-runtime").JSX.Element | null;
-    render(): import("react/jsx-runtime").JSX.Element;
+    renderImage(): React.JSX.Element | null;
+    renderAvatar(): React.JSX.Element | null;
+    renderRemoveIcon(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export type TagAttrs = React.JSX.LibraryManagedAttributes<typeof Tag, TagProps>;

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close-12px';
 import Icon from '../icon/icon';
@@ -25,7 +25,7 @@ export default class Tag extends PureComponent {
         disabled: false,
         focused: false,
         interactive: true,
-        render: (props, interactive) => (interactive ? _jsx("button", { type: 'button', ...props }) : _jsx("span", { ...props })),
+        render: (props, interactive) => (interactive ? <button type='button' {...props}/> : <span {...props}/>),
         tagType: TagType.DEFAULT,
     };
     state = {
@@ -64,7 +64,7 @@ export default class Tag extends PureComponent {
     }
     renderCustomIcon() {
         if (this.props.rgTagIcon) {
-            return _jsx(Icon, { className: styles.icon, title: this.props.rgTagTitle, glyph: this.props.rgTagIcon });
+            return <Icon className={styles.icon} title={this.props.rgTagTitle} glyph={this.props.rgTagIcon}/>;
         }
         return null;
     }
@@ -73,7 +73,7 @@ export default class Tag extends PureComponent {
             [styles.customIcon]: this.props.icon,
             [styles.avatarIcon]: avatarSrc,
         });
-        return _jsx("img", { alt: avatarSrc ? 'Avatar' : 'Icon', className: classes, src: avatarSrc || this.props.icon });
+        return <img alt={avatarSrc ? 'Avatar' : 'Icon'} className={classes} src={avatarSrc || this.props.icon}/>;
     }
     renderImage() {
         if (this.props.icon && !this.props.avatar) {
@@ -83,13 +83,13 @@ export default class Tag extends PureComponent {
     }
     renderAvatar() {
         if (this.props.avatar) {
-            return _jsx("span", { className: styles.avatarContainer, children: this._renderImageElement(this.props.avatar) });
+            return <span className={styles.avatarContainer}>{this._renderImageElement(this.props.avatar)}</span>;
         }
         return null;
     }
     renderRemoveIcon() {
         if (!this.props.readOnly && this.props.onRemove) {
-            return (_jsx(Button, { title: 'Remove', icon: closeIcon, "data-test": 'ring-tag-remove', className: styles.remove, onClick: this.props.onRemove, style: { '--ring-secondary-color': this.props.textColor }, height: ControlsHeight.M }));
+            return (<Button title='Remove' icon={closeIcon} data-test='ring-tag-remove' className={styles.remove} onClick={this.props.onRemove} style={{ '--ring-secondary-color': this.props.textColor }} height={ControlsHeight.M}/>);
         }
         return null;
     }
@@ -100,17 +100,25 @@ export default class Tag extends PureComponent {
             [styles.withRemove]: !this.props.readOnly && this.props.onRemove,
         }, this.props.className);
         const { backgroundColor, textColor, render } = this.props;
-        return (_jsxs("span", { className: classNames(styles.container, this.props.containerClassName, styles[this.props.tagType], {
+        return (<span className={classNames(styles.container, this.props.containerClassName, styles[this.props.tagType], {
                 [styles.outline]: this.props.outline,
                 [styles.interactive]: this.props.interactive,
-            }), children: [render({
-                    'data-test': 'ring-tag',
-                    className: classes,
-                    ref: this.tagRef,
-                    onClick: this.props.onClick,
-                    style: { backgroundColor, color: textColor },
-                    disabled: this.props.disabled,
-                    children: (_jsxs(_Fragment, { children: [this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), _jsx("span", { className: styles.content, children: this.props.children })] })),
-                }, this.props.interactive), this.renderRemoveIcon()] }));
+            })}>
+        {render({
+                'data-test': 'ring-tag',
+                className: classes,
+                ref: this.tagRef,
+                onClick: this.props.onClick,
+                style: { backgroundColor, color: textColor },
+                disabled: this.props.disabled,
+                children: (<>
+                {this.renderAvatar()}
+                {this.renderCustomIcon()}
+                {this.renderImage()}
+                <span className={styles.content}>{this.props.children}</span>
+              </>),
+            }, this.props.interactive)}
+        {this.renderRemoveIcon()}
+      </span>);
     }
 }

package/components/tags-input/tags-input.d.ts

@@ -107,7 +107,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     handleTagCreation: (label: string | undefined) => void;
     select?: Select | null;
     selectRef: (el: Select | null) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const RerenderableTagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<TagsInput>>;
 export type TagsInputAttrs = React.JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;

package/components/tags-input/{tags-input.js → tags-input.jsx}

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable max-lines */
 import { PureComponent } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import getEventKey from '../global/get-event-key';
 import Select from '../select/select';
@@ -11,8 +11,8 @@ import rerenderHOC from '../global/rerender-hoc';
 import { Size } from '../input/input';
 import { ControlsHeightContext } from '../global/controls-height';
 import getUID from '../global/get-uid';
-import inputStyles from '../input/input.css';
 import ControlLabel from '../control-label/control-label';
+import inputStyles from '../input/input.css';
 import styles from './tags-input.css';
 function noop() { }
 /**
@@ -233,9 +233,17 @@ export default class TagsInput extends PureComponent {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused,
         }, this.props.className);
-        return (_jsxs("div", { 
-            // it transfers focus to input
-            role: 'presentation', className: classes, onKeyDown: this.handleKeyDown, onClick: this.clickHandler, ref: this.nodeRef, children: [label && (_jsx(ControlLabel, { htmlFor: this.id, disabled: disabled, type: labelType, children: label })), _jsx(TagsList, { tags: tags, activeIndex: activeIndex, disabled: disabled, canNotBeEmpty: canNotBeEmpty, handleRemove: this.handleRemove, className: styles.tagsList, tagClassName: styles.tag, handleClick: this.handleClick, customTagComponent: this.props.customTagComponent, children: _jsx(Select, { id: this.id, ref: this.selectRef, size: Select.Size.AUTO, type: Select.Type.INPUT_WITHOUT_CONTROLS, inputPlaceholder: this.props.placeholder, data: this.state.suggestions, className: classNames(styles.tagsSelect), onSelect: this.addTag, onFocus: this._focusHandler, onBlur: this._blurHandler, renderOptimization: this.props.renderOptimization, add: allowAddNewTags ? { prefix: 'Add new tag' } : undefined, onAdd: allowAddNewTags ? this.handleTagCreation : undefined, filter: filter, maxHeight: this.props.maxPopupHeight, minWidth: this.props.minPopupWidth, top: POPUP_VERTICAL_SHIFT, loading: this.state.loading, onFilter: this.loadSuggestions, onBeforeOpen: this.loadSuggestions, onKeyDown: this.handleKeyDown, disabled: this.props.disabled, loadingMessage: this.props.loadingMessage, notFoundMessage: this.props.notFoundMessage, hint: this.props.hint }) })] }));
+        return (<div 
+        // it transfers focus to input
+        role='presentation' className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
+        {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>
+            {label}
+          </ControlLabel>)}
+
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
+          <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage} hint={this.props.hint}/>
+        </TagsList>
+      </div>);
     }
 }
 export const RerenderableTagsInput = rerenderHOC(TagsInput);

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

@@ -27,8 +27,8 @@ export default class TagsList<T extends TagType> extends Component<TagsListProps
         handleClick: () => typeof noop;
         handleRemove: () => typeof noop;
     };
-    renderTag(tag: T, focusTag: boolean): import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
+    renderTag(tag: T, focusTag: boolean): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type TagsListAttrs<T extends TagType = TagType> = React.JSX.LibraryManagedAttributes<typeof TagsList, TagsListProps<T>>;
 export {};

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

@@ -1,6 +1,5 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { Component } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import Tag from '../tag/tag';
 function noop() { }
@@ -19,12 +18,17 @@ export default class TagsList extends Component {
         const TagComponent = this.props.customTagComponent || Tag;
         const readOnly = this.props.disabled || tag.readOnly || (this.props.canNotBeEmpty && this.props.tags.length === 1);
         const { tagClassName } = this.props;
-        return (_createElement(TagComponent, { ...tag, key: tag.key, readOnly: readOnly, disabled: this.props.disabled || tag.disabled, focused: focusTag, onClick: this.props.handleClick(tag), onRemove: this.props.handleRemove(tag), className: tagClassName }, tag.label));
+        return (<TagComponent {...tag} key={tag.key} readOnly={readOnly} disabled={this.props.disabled || tag.disabled} focused={focusTag} onClick={this.props.handleClick(tag)} onRemove={this.props.handleRemove(tag)} className={tagClassName}>
+        {tag.label}
+      </TagComponent>);
     }
     render() {
         const { children, className, customTagComponent, canNotBeEmpty, handleClick, tagClassName, handleRemove, tags, activeIndex, ...props } = this.props;
         const classes = classNames('ring-js-shortcuts', className);
         const tagsList = (this.props.tags || []).map((tag, index) => this.renderTag(tag, this.props.activeIndex === index));
-        return (_jsxs("div", { "data-test": 'ring-tags-list', className: classes, ...props, children: [tagsList, children] }));
+        return (<div data-test='ring-tags-list' className={classes} {...props}>
+        {tagsList}
+        {children}
+      </div>);
     }
 }

package/components/text/text.d.ts

@@ -23,6 +23,6 @@ export default class Text extends Component<TextProps> {
         readonly M: "m";
         readonly L: "l";
     };
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './text.css';
@@ -24,6 +23,8 @@ export default class Text extends Component {
             [styles.sizeM]: size === Text.Size.M,
             [styles.sizeL]: size === Text.Size.L,
         });
-        return (_jsx("span", { className: classes, ...restProps, children: children }));
+        return (<span className={classes} {...restProps}>
+        {children}
+      </span>);
     }
 }

package/components/toggle/toggle.d.ts

@@ -17,7 +17,7 @@ declare class Toggle extends PureComponent<ToggleProps> {
     static defaultProps: {
         size: string;
     };
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type ToggleAttrs = React.JSX.LibraryManagedAttributes<typeof Toggle, ToggleProps>;
 export default Toggle;

package/components/toggle/toggle.jsx

@@ -0,0 +1,37 @@
+import { PureComponent } from 'react';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import ControlHelp from '../control-help/control-help';
+import styles from './toggle.css';
+export const Size = {
+    Size14: styles.size14,
+    Size16: styles.size16,
+    Size20: styles.size20,
+};
+class Toggle extends PureComponent {
+    static defaultProps = {
+        size: Size.Size16,
+    };
+    render() {
+        const { className, children, disabled, title, leftLabel, size = Size.Size16, 'data-test': dataTest, help, onTransitionEnd, ...restProps } = this.props;
+        const classes = classNames(className, size, styles.toggle, disabled && styles.disabled);
+        return (<label className={classes} title={title} data-test={dataTests('ring-toggle', dataTest)}>
+        {leftLabel && (<span className={styles.leftLabel}>
+            {leftLabel}
+            {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
+          </span>)}
+
+        <span className={styles.switchWrapper}>
+          <input data-test='ring-toggle-input' {...restProps} type='checkbox' disabled={disabled} className={styles.input}/>
+
+          <span className={styles.switch} onTransitionEnd={onTransitionEnd}/>
+        </span>
+
+        {children && (<div className={styles.label}>
+            {children}
+            {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
+          </div>)}
+      </label>);
+    }
+}
+export default Toggle;

package/components/tooltip/tooltip.d.ts

@@ -55,7 +55,7 @@ export default class Tooltip extends Component<TooltipProps> {
     popupRef: (el: Popup | null) => void;
     onNestedTooltipShow: () => void;
     onNestedTooltipHide: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export type TooltipAttrs = React.JSX.LibraryManagedAttributes<typeof Tooltip, TooltipProps>;
 export {};

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { Component, createContext } from 'react';
 import classNames from 'classnames';
 import Popup from '../popup/popup';
@@ -127,7 +127,16 @@ export default class Tooltip extends Component {
         const { children, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, ...restProps } = this.props;
         const ariaProps = typeof title === 'string' && !!title ? { 'aria-label': title, role: 'tooltip' } : {};
         const { onNestedTooltipShow, onNestedTooltipHide } = this;
-        const popup = (_jsx(Popup, { trapFocus: false, anchorElement: this.containerNode, hidden: !this.state.showPopup || this.state.showNestedPopup, onCloseAttempt: this.hidePopup, maxHeight: 400, attached: false, onMouseOut: this.hideIfMovedOutsidePopup, top: 4, dontCloseOnAnchorClick: true, ref: this.popupRef, ...popupProps, className: classNames(styles.tooltip, { [styles.long]: long, [styles.inheritedTheme]: theme === 'inherit' }, popupProps?.className), children: title }));
-        return (_jsx(TooltipContext.Provider, { value: { onNestedTooltipShow, onNestedTooltipHide }, children: _jsxs("span", { ...ariaProps, ...restProps, ref: this.containerRef, "data-test": dataTests('ring-tooltip', dataTest), "data-test-title": typeof title === 'string' ? title : undefined, children: [children, theme === 'inherit' ? (popup) : (_jsx(ThemeProvider, { theme: theme, passToPopups: true, WrapperComponent: props => _jsx("span", { ...props }), children: popup }))] }) }));
+        const popup = (<Popup trapFocus={false} anchorElement={this.containerNode} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} attached={false} onMouseOut={this.hideIfMovedOutsidePopup} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps} className={classNames(styles.tooltip, { [styles.long]: long, [styles.inheritedTheme]: theme === 'inherit' }, popupProps?.className)}>
+        {title}
+      </Popup>);
+        return (<TooltipContext.Provider value={{ onNestedTooltipShow, onNestedTooltipHide }}>
+        <span {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
+          {children}
+          {theme === 'inherit' ? (popup) : (<ThemeProvider theme={theme} passToPopups WrapperComponent={props => <span {...props}/>}>
+              {popup}
+            </ThemeProvider>)}
+        </span>
+      </TooltipContext.Provider>);
     }
 }

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

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import classNames from 'classnames';
 import attachmentIcon from '@jetbrains/icons/attachment';
 import Icon from '../icon';
 import styles from './upload.css';
-export const Upload = forwardRef(function Upload({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = () => _jsx(Icon, { className: styles.attachmentIcon, glyph: attachmentIcon }), accept, disabled, }, ref) {
+export const Upload = forwardRef(function Upload({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = () => <Icon className={styles.attachmentIcon} glyph={attachmentIcon}/>, accept, disabled, }, ref) {
     const fileInputRef = useRef(null);
     const [dragOver, setDragOver] = useState(false);
     useImperativeHandle(ref, () => ({ openFilePicker: () => fileInputRef.current?.click() }), []);
@@ -28,11 +27,15 @@ export const Upload = forwardRef(function Upload({ children, className, onFilesS
             handleSelectedFiles(Array.from(fileInputRef.current.files));
         }
     }, [handleSelectedFiles]);
-    return (_jsxs("div", { className: classNames(className, styles.upload, {
+    return (<div className={classNames(className, styles.upload, {
             [styles.disabled]: disabled,
             [styles.dragOver]: dragOver,
             [styles.success]: variant === 'success',
             [styles.error]: variant === 'error',
-        }), "data-test": 'ring-upload', children: [_jsx("input", { onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, disabled: disabled, ref: fileInputRef, "data-test": 'ring-file-input', multiple: multiple, accept: accept, onChange: onInputChange, type: 'file', autoComplete: 'off', "aria-label": 'file-picker', className: styles.invisibleFileInput }), renderIcon(), children] }));
+        })} data-test='ring-upload'>
+      <input onDragEnter={onDragEnter} onDragOver={onDragOver} onDragLeave={onDragLeave} disabled={disabled} ref={fileInputRef} data-test='ring-file-input' multiple={multiple} accept={accept} onChange={onInputChange} type='file' autoComplete='off' aria-label='file-picker' className={styles.invisibleFileInput}/>
+      {renderIcon()}
+      {children}
+    </div>);
 });
 export default Upload;