@jetbrains/ring-ui 7.0.72 → 7.0.73

package/components/radio/{radio-item.js → radio-item.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component, createContext, forwardRef } from 'react';
 import classNames from 'classnames';
 import getUID from '../global/get-uid';
@@ -18,10 +17,19 @@ export class RadioItemInner extends Component {
     render() {
         const { className, children, help, ...restProps } = this.props;
         const classes = classNames(styles.radio, className);
-        return (_jsxs("label", { ref: this.labelRef, className: classes, htmlFor: this.uid, children: [_jsx("input", { id: this.uid, ...restProps, ref: this.inputRef, className: styles.input, type: 'radio' }), _jsx("span", { className: styles.circle }), _jsxs("span", { className: styles.label, children: [children, help && _jsx(ControlHelp, { children: help })] })] }));
+        return (<label ref={this.labelRef} className={classes} htmlFor={this.uid}>
+        <input id={this.uid} {...restProps} ref={this.inputRef} className={styles.input} type='radio'/>
+        <span className={styles.circle}/>
+        <span className={styles.label}>
+          {children}
+          {help && <ControlHelp>{help}</ControlHelp>}
+        </span>
+      </label>);
     }
 }
 const RadioItem = forwardRef(function RadioItem(props, ref) {
-    return (_jsx(RadioContext.Consumer, { children: ({ value, onChange, ...restContext }) => (_jsx(RadioItemInner, { ref: ref, ...restContext, checked: value !== undefined ? value === props.value : undefined, onChange: onChange ? () => onChange(props.value) : undefined, ...props })) }));
+    return (<RadioContext.Consumer>
+      {({ value, onChange, ...restContext }) => (<RadioItemInner ref={ref} {...restContext} checked={value !== undefined ? value === props.value : undefined} onChange={onChange ? () => onChange(props.value) : undefined} {...props}/>)}
+    </RadioContext.Consumer>);
 });
 export default RadioItem;

package/components/radio/radio.d.ts

@@ -6,5 +6,5 @@ import { type RadioProps } from './radio-item';
 export default class Radio extends Component<RadioProps> {
     static Item: import("react").ForwardRefExoticComponent<import("./radio-item").RadioItemProps & import("react").RefAttributes<import("./radio-item").RadioItemInner>>;
     uid: string;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import getUID from '../global/get-uid';
 import RadioItem, { RadioContext } from './radio-item';
@@ -9,6 +8,6 @@ export default class Radio extends Component {
     static Item = RadioItem;
     uid = getUID('ring-radio-');
     render() {
-        return _jsx(RadioContext.Provider, { value: { name: this.uid, ...this.props }, children: this.props.children });
+        return <RadioContext.Provider value={{ name: this.uid, ...this.props }}>{this.props.children}</RadioContext.Provider>;
     }
 }

package/components/scrollable-section/scrollable-section.d.ts

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

package/components/scrollable-section/{scrollable-section.js → scrollable-section.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import styles from './scrollable-section.css';
@@ -22,10 +21,10 @@ export default function ScrollableSection({ className, ...restProps }) {
         window.addEventListener('resize', calculateScrollPosition);
         return () => window.removeEventListener('resize', calculateScrollPosition);
     }, [calculateScrollPosition]);
-    return (_jsx("div", { ...restProps, className: classNames(styles.scrollableSection, className, {
+    return (<div {...restProps} className={classNames(styles.scrollableSection, className, {
             [styles.withTopBorder]: !scrolledToTop,
             [styles.withRightBorder]: !scrolledToRight,
             [styles.withBottomBorder]: !scrolledToBottom,
             [styles.withLeftBorder]: !scrolledToLeft,
-        }), ref: ref, onScroll: calculateScrollPosition }));
+        })} ref={ref} onScroll={calculateScrollPosition}/>);
 }

package/components/select/select-filter.d.ts

@@ -13,6 +13,6 @@ export default class SelectFilter extends Component<SelectFilterProps> {
     blur(): void;
     input?: HTMLInputElement | HTMLTextAreaElement | null;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

package/components/select/{select-filter.js → select-filter.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import Input from '../input/input';
@@ -35,6 +34,10 @@ export default class SelectFilter extends Component {
     render() {
         const { className, listId, ...restProps } = this.props;
         const classes = classNames(styles.filter, className);
-        return (_jsx(ActiveItemContext.ValueContext.Consumer, { children: activeItemId => (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(Input, { ...restProps, placeholder: restProps.placeholder ?? translate('filterItems'), "aria-owns": listId, "aria-activedescendant": activeItemId, autoComplete: 'off', autoFocus: true, borderless: true, inputRef: this.inputRef, className: classes })) })) }));
+        return (<ActiveItemContext.ValueContext.Consumer>
+        {activeItemId => (<I18nContext.Consumer>
+            {({ translate }) => (<Input {...restProps} placeholder={restProps.placeholder ?? translate('filterItems')} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete='off' autoFocus borderless inputRef={this.inputRef} className={classes}/>)}
+          </I18nContext.Consumer>)}
+      </ActiveItemContext.ValueContext.Consumer>);
     }
 }

package/components/select/select-popup.d.ts

@@ -110,17 +110,17 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     onListSelect: (selected: ListDataItem<T>, event?: Event | SyntheticEvent, opts?: SelectHandlerParams) => void;
     tabPress: (event: Event) => void;
     onClickHandler: () => void | undefined;
-    getFilter(): import("react/jsx-runtime").JSX.Element | null;
+    getFilter(): React.JSX.Element | null;
     handleRemoveTag: (arg: ListDataItem<T>) => (event: SyntheticEvent) => void;
     handleTagClick: (arg: ListDataItem<T>) => () => void;
     getCustomTag(tags: Tags | boolean | null): ((tag: TagAttrs) => ReactNode) | undefined;
-    getTags(): false | import("react/jsx-runtime").JSX.Element;
-    getFilterWithTags(): import("react/jsx-runtime").JSX.Element | null;
-    getBottomLine(): "" | import("react/jsx-runtime").JSX.Element | null;
+    getTags(): false | React.JSX.Element;
+    getFilterWithTags(): React.JSX.Element | null;
+    getBottomLine(): "" | React.JSX.Element | null;
     handleListResize: () => void;
-    getList(ringPopupTarget: string | Element | undefined): import("react/jsx-runtime").JSX.Element | null;
+    getList(ringPopupTarget: string | Element | undefined): React.JSX.Element | null;
     handleSelectAll: () => void;
-    getSelectAll: () => false | import("react/jsx-runtime").JSX.Element;
+    getSelectAll: () => false | React.JSX.Element;
     private _adjustListMaxHeight;
     popupRef: (el: Popup | null) => void;
     list?: List<T> | null;
@@ -132,6 +132,6 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
         tab: (event: Event) => void;
     };
     popupFilterShortcutsMap: ShortcutsMap;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export type SelectPopupAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof SelectPopup, SelectPopupProps<T>>;

package/components/select/{select-popup.js → select-popup.jsx}

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable max-lines */
 /**
  * @description Displays a popup with select's options.
  */
 import { PureComponent, } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import searchIcon from '@jetbrains/icons/search';
 import memoizeOne from 'memoize-one';
@@ -183,7 +183,10 @@ export default class SelectPopup extends PureComponent {
     onClickHandler = () => this.filter?.focus();
     getFilter() {
         if (this.props.filter || this.props.tags) {
-            return (_jsxs("div", { className: styles.filterWrapper, "data-test": 'ring-select-popup-filter', children: [!this.props.tags && (_jsx(Icon, { glyph: this.props.filterIcon ?? searchIcon, className: styles.filterIcon, "data-test-custom": 'ring-select-popup-filter-icon' })), _jsx(FilterWithShortcuts, { rgShortcutsOptions: this.state.popupFilterShortcutsOptions, rgShortcutsMap: this.popupFilterShortcutsMap, value: this.props.filterValue, inputRef: this.composedFilterRef(this.filterRef, this.props.filterRef), onBlur: this.popupFilterOnBlur, onFocus: this.onFilterFocus, className: 'ring-js-shortcuts', inputClassName: classNames({ [styles.filterWithTagsInput]: this.props.tags }), placeholder: typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined, height: this.props.tags ? ControlsHeight.S : ControlsHeight.L, onChange: this.props.onFilter, onClick: this.onClickHandler, onClear: this.props.tags ? undefined : this.props.onClear, "data-test-custom": 'ring-select-popup-filter-input', listId: this.props.listId, enableShortcuts: Object.keys(this.popupFilterShortcutsMap) })] }));
+            return (<div className={styles.filterWrapper} data-test='ring-select-popup-filter'>
+          {!this.props.tags && (<Icon glyph={this.props.filterIcon ?? searchIcon} className={styles.filterIcon} data-test-custom='ring-select-popup-filter-icon'/>)}
+          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className='ring-js-shortcuts' inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined} height={this.props.tags ? ControlsHeight.S : ControlsHeight.L} onChange={this.props.onFilter} onClick={this.onClickHandler} onClear={this.props.tags ? undefined : this.props.onClear} data-test-custom='ring-select-popup-filter-input' listId={this.props.listId} enableShortcuts={Object.keys(this.popupFilterShortcutsMap)}/>
+        </div>);
         }
         return null;
     }
@@ -202,7 +205,9 @@ export default class SelectPopup extends PureComponent {
         return undefined;
     }
     getTags() {
-        return (Array.isArray(this.props.selected) && (_jsx("div", { children: _jsx(TagsList, { tags: this.props.selected, activeIndex: this.state.tagsActiveIndex, handleRemove: this.handleRemoveTag, handleClick: this.handleTagClick, disabled: this.props.disabled, customTagComponent: this.getCustomTag(this.props.tags) }) })));
+        return (Array.isArray(this.props.selected) && (<div>
+          <TagsList tags={this.props.selected} activeIndex={this.state.tagsActiveIndex} handleRemove={this.handleRemoveTag} handleClick={this.handleTagClick} disabled={this.props.disabled} customTagComponent={this.getCustomTag(this.props.tags)}/>
+        </div>));
     }
     getFilterWithTags() {
         if (this.props.tags) {
@@ -212,16 +217,23 @@ export default class SelectPopup extends PureComponent {
                     [styles.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled,
                 },
             ]);
-            return (_jsxs("div", { className: classes, children: [this.getTags(), this.getFilter()] }));
+            return (<div className={classes}>
+          {this.getTags()}
+          {this.getFilter()}
+        </div>);
         }
         return this.getFilter();
     }
     getBottomLine() {
         const { loading, message, data } = this.props;
         const hasMoreThanOneItem = data.length > 1;
-        return ((loading || message) && (_jsxs("div", { className: classNames(styles.bottomLine, {
+        return ((loading || message) && (<div className={classNames(styles.bottomLine, {
                 [styles.bottomLineOverItem]: hasMoreThanOneItem,
-            }), children: [loading && _jsx(LoaderInline, {}), message && _jsx("div", { className: styles.message, children: message })] })));
+            })}>
+          {loading && <LoaderInline />}
+
+          {message && <div className={styles.message}>{message}</div>}
+        </div>));
     }
     handleListResize = () => {
         this.forceUpdate();
@@ -238,7 +250,7 @@ export default class SelectPopup extends PureComponent {
             if (this.props.toolbar) {
                 maxHeight -= TOOLBAR_HEIGHT;
             }
-            return (_jsx(List, { id: this.props.listId, maxHeight: maxHeight, data: this.props.data, activeIndex: this.props.activeIndex, ref: this.listRef, restoreActiveIndex: true, activateFirstItem: true, onSelect: this.onListSelect, onResize: this.handleListResize, onScrollToBottom: this.props.onLoadMore, hidden: this.props.hidden, shortcuts: !this.props.hidden, disableMoveOverflow: this.props.disableMoveOverflow, disableMoveDownOverflow: this.props.loading, disableScrollToActive: this.props.disableScrollToActive, compact: this.props.compact, preventListOverscroll: this.props.preventListOverscroll, renderOptimization: this.props.renderOptimization }));
+            return (<List id={this.props.listId} maxHeight={maxHeight} data={this.props.data} activeIndex={this.props.activeIndex} ref={this.listRef} restoreActiveIndex activateFirstItem onSelect={this.onListSelect} onResize={this.handleListResize} onScrollToBottom={this.props.onLoadMore} hidden={this.props.hidden} shortcuts={!this.props.hidden} disableMoveOverflow={this.props.disableMoveOverflow} disableMoveDownOverflow={this.props.loading} disableScrollToActive={this.props.disableScrollToActive} compact={this.props.compact} preventListOverscroll={this.props.preventListOverscroll} renderOptimization={this.props.renderOptimization}/>);
         }
         return null;
     }
@@ -250,9 +262,14 @@ export default class SelectPopup extends PureComponent {
     getSelectAll = () => {
         const multiple = this.props.multiple;
         const activeFilters = this.props.data.filter(item => !item.disabled);
-        return (Array.isArray(this.props.selected) && (_jsxs("div", { className: styles.selectAll, children: [activeFilters.length === 0 ? (_jsx("span", {})) : (_jsx(Button, { inline: true, onClick: this.handleSelectAll, children: activeFilters.length !== this.props.selected.length
-                        ? multiple.selectAllLabel || 'Select all'
-                        : multiple.deselectAllLabel || 'Deselect all' })), multiple.renderSelectedItemsDescription?.(this.props.selected, activeFilters.length) || (_jsx(Text, { info: true, children: `${this.props.selected.length} selected` }))] })));
+        return (Array.isArray(this.props.selected) && (<div className={styles.selectAll}>
+          {activeFilters.length === 0 ? (<span />) : (<Button inline onClick={this.handleSelectAll}>
+              {activeFilters.length !== this.props.selected.length
+                    ? multiple.selectAllLabel || 'Select all'
+                    : multiple.deselectAllLabel || 'Deselect all'}
+            </Button>)}
+          {multiple.renderSelectedItemsDescription?.(this.props.selected, activeFilters.length) || (<Text info>{`${this.props.selected.length} selected`}</Text>)}
+        </div>));
     };
     // Cache the value because this method is called
     // inside `render` function which can be called N times
@@ -308,13 +325,26 @@ export default class SelectPopup extends PureComponent {
     render() {
         const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, } = this.props;
         const classes = classNames(styles.popup, className);
-        return (_jsx(PopupTargetContext.Consumer, { children: ringPopupTarget => {
+        return (<PopupTargetContext.Consumer>
+        {ringPopupTarget => {
                 const filterWithTags = this.getFilterWithTags();
                 const selectAll = multiple && typeof multiple === 'object' && !multiple.limit && multiple.selectAll && this.getSelectAll();
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
-                return (_jsx(Popup, { trapFocus: false, ref: this.popupRef, hidden: hidden || !hasContent, attached: isInputMode, className: classes, dontCloseOnAnchorClick: true, anchorElement: anchorElement, minWidth: minWidth, onCloseAttempt: onCloseAttempt, onOutsideClick: onOutsideClick, directions: directions, top: top, left: left, offset: offset, onMouseDown: this.mouseDownHandler, target: this.props.ringPopupTarget, autoCorrectTopOverflow: false, style: style, largeBorderRadius: true, children: _jsxs("div", { dir: dir, children: [!hidden && filter && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), topbar, hidden ? _jsx("div", {}) : filterWithTags, selectAll, list, bottomLine, toolbar] }) }));
-            } }));
+                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style} largeBorderRadius>
+              <div dir={dir}>
+                {!hidden && filter && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
+                {topbar}
+                {/* Add empty div to prevent the change of List position in DOM*/}
+                {hidden ? <div /> : filterWithTags}
+                {selectAll}
+                {list}
+                {bottomLine}
+                {toolbar}
+              </div>
+            </Popup>);
+            }}
+      </PopupTargetContext.Consumer>);
     }
 }

package/components/select/select.d.ts

@@ -235,7 +235,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     _showPopup: () => void;
     _hidePopup: (tryFocusAnchor?: boolean) => void;
     addHandler: () => void;
-    getToolbar(): import("react/jsx-runtime").JSX.Element | null;
+    getToolbar(): React.JSX.Element | null;
     getTopbar(): ReactNode;
     getLowerCaseLabel: typeof getLowerCaseLabel;
     doesLabelMatch: typeof doesLabelMatch;
@@ -276,8 +276,8 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         'shift+down': typeof noop;
         space: typeof noop;
     };
-    renderSelect(activeItemId: string | undefined): import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
+    renderSelect(activeItemId: string | undefined): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type SingleSelectAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof Select, SingleSelectProps<T>>;
 export type MultipleSelectAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof Select, MultipleSelectProps<T>>;

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

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable max-lines */
 import { Component, Fragment, } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import closeIcon from '@jetbrains/icons/close-12px';
@@ -22,8 +22,8 @@ import { I18nContext } from '../i18n/i18n-context';
 import { createComposedRef } from '../global/compose-refs';
 import { isArray } from '../global/typescript-utils';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
-import inputStyles from '../input/input.css';
 import SelectPopup from './select-popup';
+import inputStyles from '../input/input.css';
 import styles from './select.css';
 /**
  * @name Select
@@ -408,7 +408,9 @@ export default class Select extends Component {
             separator: reset.separator,
             key: reset.label,
             rgItemType: List.ListProps.Type.CUSTOM,
-            template: (_jsx(Button, { inline: true, className: styles.button, "data-test": 'ring-select-reset-tags-button', height: ControlsHeight.S, children: reset.label })),
+            template: (<Button inline className={styles.button} data-test='ring-select-reset-tags-button' height={ControlsHeight.S}>
+          {reset.label}
+        </Button>),
             glyph: reset.glyph,
             onClick: resetHandler,
         };
@@ -432,7 +434,8 @@ export default class Select extends Component {
         // eslint-disable-next-line no-underscore-dangle
         const _shownData = this._prependResetOption(shownData);
         const activeIndex = this._getActiveIndex(_shownData);
-        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => {
+        return (<I18nContext.Consumer>
+        {({ translate }) => {
                 let message;
                 if (this.props.loading) {
                     message = this.props.loadingMessage ?? translate('loading');
@@ -440,8 +443,10 @@ export default class Select extends Component {
                 else if (!shownData.length) {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
-                return (_jsx(SelectPopup, { data: _shownData, message: message, toolbar: showPopup && this.getToolbar(), topbar: this.getTopbar(), loading: this.props.loading, activeIndex: activeIndex, hidden: !showPopup, ref: this.popupRef, maxHeight: this.props.maxHeight, minWidth: this.props.minWidth, directions: this.props.directions, className: this.props.popupClassName, style: this.props.popupStyle, top: this.props.top, left: this.props.left, offset: this.props.offset, filter: this.isInputMode() ? false : this.props.filter, filterIcon: this.props.filterIcon, filterRef: this.props.filterRef, multiple: this.props.multiple, filterValue: this.state.filterValue, anchorElement: anchorElement, onCloseAttempt: this._onCloseAttempt, onOutsideClick: this.props.onOutsideClick, onSelect: this._listSelectHandler, onSelectAll: this._listSelectAllHandler, onFilter: this._filterChangeHandler, onClear: this.clearFilter, onLoadMore: this.props.onLoadMore, isInputMode: this.isInputMode(), selected: this.state.selected, tags: this.props.tags, compact: this.props.compact, renderOptimization: this.props.renderOptimization, ringPopupTarget: this.props.ringPopupTarget, disableMoveOverflow: this.props.disableMoveOverflow, disableScrollToActive: this.props.disableScrollToActive, dir: this.props.dir, onEmptyPopupEnter: this.onEmptyPopupEnter, listId: this.listId, preventListOverscroll: this.props.preventListOverscroll }));
-            } }));
+                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={activeIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
+                 filterIcon={this.props.filterIcon} filterRef={this.props.filterRef} multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onOutsideClick={this.props.onOutsideClick} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId} preventListOverscroll={this.props.preventListOverscroll}/>);
+            }}
+      </I18nContext.Consumer>);
     }
     _showPopup = () => {
         if (!this.node) {
@@ -477,9 +482,15 @@ export default class Select extends Component {
         if (!isToolbarHasElements) {
             return null;
         }
-        return (_jsxs("div", { className: classNames({
+        return (<div className={classNames({
                 [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar),
-            }), "data-test": 'ring-select-toolbar', children: [renderBottomToolbar && renderBottomToolbar(), this.state.addButton && (_jsx(Button, { inline: true, delayed: delayed, className: classNames(styles.button, styles.buttonSpaced), onClick: this.addHandler, "data-test": 'ring-select-toolbar-button', children: prefix ? `${prefix} ${label}` : label })), hint && _jsx(List.ListHint, { label: hint, "data-test": 'ring-select-toolbar-hint' })] }));
+            })} data-test='ring-select-toolbar'>
+        {renderBottomToolbar && renderBottomToolbar()}
+        {this.state.addButton && (<Button inline delayed={delayed} className={classNames(styles.button, styles.buttonSpaced)} onClick={this.addHandler} data-test='ring-select-toolbar-button'>
+            {prefix ? `${prefix} ${label}` : label}
+          </Button>)}
+        {hint && <List.ListHint label={hint} data-test='ring-select-toolbar-hint'/>}
+      </div>);
     }
     getTopbar() {
         return this.props.renderTopToolbar?.();
@@ -743,19 +754,19 @@ export default class Select extends Component {
         const icons = [];
         const height = this.getHeight();
         if (!Array.isArray(selected) && selected?.icon) {
-            icons.push(_jsx("button", { title: 'Toggle options popup', type: 'button', className: styles.selectedIcon, disabled: this.props.disabled, onClick: this._clickHandler, style: { backgroundImage: `url(${selected.icon})` } }, 'selected'));
+            icons.push(<button title='Toggle options popup' type='button' className={styles.selectedIcon} key='selected' disabled={this.props.disabled} onClick={this._clickHandler} style={{ backgroundImage: `url(${selected.icon})` }}/>);
         }
         if (clear && !disabled && !this._selectionIsEmpty()) {
-            icons.push(_jsx(Button, { title: 'Clear selection', "data-test": 'ring-clear-select', className: styles.clearIcon, disabled: this.props.disabled, onClick: this.clear, height: height, icon: closeIcon }, 'close'));
+            icons.push(<Button title='Clear selection' data-test='ring-clear-select' className={styles.clearIcon} key='close' disabled={this.props.disabled} onClick={this.clear} height={height} icon={closeIcon}/>);
         }
         if (!hideArrow) {
-            icons.push(_jsx(Button, { title: 'Toggle options popup', className: styles.chevron, iconClassName: styles.chevronIcon, icon: chevronDownIcon, disabled: this.props.disabled, height: height, onClick: this._clickHandler }, 'hide'));
+            icons.push(<Button title='Toggle options popup' className={styles.chevron} iconClassName={styles.chevronIcon} icon={chevronDownIcon} key='hide' disabled={this.props.disabled} height={height} onClick={this._clickHandler}/>);
         }
         return icons;
     }
     _getAvatar() {
         return (!Array.isArray(this.state.selected) &&
-            (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && (_jsx(Avatar, { className: styles.avatar, url: this.state.selected.avatar, username: this.state.selected.username, size: AvatarSize.Size20 })));
+            (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && (<Avatar className={styles.avatar} url={this.state.selected.avatar} username={this.state.selected.username} size={AvatarSize.Size20}/>));
     }
     filter;
     filterRef = (el) => {
@@ -789,7 +800,7 @@ export default class Select extends Component {
         if (this.props.type === Type.INPUT || this.props.type === Type.BUTTON) {
             const icons = this._getIcons();
             style = getStyle(icons.length);
-            iconsNode = _jsx("div", { className: styles.icons, children: icons });
+            iconsNode = <div className={styles.icons}>{icons}</div>;
         }
         const ariaProps = {
             role: 'combobox',
@@ -801,45 +812,82 @@ export default class Select extends Component {
         switch (this.props.type) {
             case Type.INPUT_WITHOUT_CONTROLS:
             case Type.INPUT:
-                return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: this.nodeRef, className: classNames(classes, styles.inputMode), "data-test": dataTests('ring-select', dataTest), role: 'presentation' // has interactive elements inside
-                            , onMouseDown: this.mouseDownHandler, onMouseUp: this.mouseUpHandler, children: [shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), _jsx(Input, { ...ariaProps, height: this.props.height, autoComplete: 'off', id: this.props.id, onClick: this._clickHandler, inputRef: this.composedFilterRef(this.filterRef, this.props.filterRef), disabled: this.props.disabled, value: this.state.filterValue, borderless: this.props.type === Type.INPUT_WITHOUT_CONTROLS, style: style, size: Size.FULL, onChange: this._filterChangeHandler, onFocus: this._focusHandler, onBlur: this._blurHandler, 
-                                    // Input with error style without description
-                                    error: this.props.error ? '' : null, label: this.props.type === Type.INPUT ? this._getLabel() : null, placeholder: this.props.inputPlaceholder, onKeyDown: this.props.onKeyDown, "data-test": 'ring-select__focus', enableShortcuts: shortcutsEnabled
-                                        ? Object.keys({
-                                            ...this.getShortcutsMap(),
-                                            ...this._popup?.list?.shortcutsMap,
-                                        })
-                                        : undefined, icon: this.props.filterIcon, afterInput: iconsNode }), this._renderPopup()] }), this.props.error && (_jsx("div", { className: classNames(inputStyles.errorText, inputStyles[`size${this.props.size}`]), children: this.props.error }))] }));
+                return (<>
+            <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)} role='presentation' // has interactive elements inside
+                 onMouseDown={this.mouseDownHandler} onMouseUp={this.mouseUpHandler}>
+              {shortcutsEnabled && <Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>}
+              <Input {...ariaProps} height={this.props.height} autoComplete='off' id={this.props.id} onClick={this._clickHandler} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
+                // Input with error style without description
+                error={this.props.error ? '' : null} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test='ring-select__focus' enableShortcuts={shortcutsEnabled
+                        ? Object.keys({
+                            ...this.getShortcutsMap(),
+                            ...this._popup?.list?.shortcutsMap,
+                        })
+                        : undefined} icon={this.props.filterIcon} afterInput={iconsNode}/>
+              {this._renderPopup()}
+            </div>
+            {this.props.error && (<div className={classNames(inputStyles.errorText, inputStyles[`size${this.props.size}`])}>
+                {this.props.error}
+              </div>)}
+          </>);
             case Type.BUTTON:
-                return (_jsxs("div", { ref: this.nodeRef, className: classNames(classes, styles.buttonMode), "data-test": dataTests('ring-select', dataTest), children: [selectedLabel && (_jsx(ControlLabel, { type: this.props.labelType, disabled: this.props.disabled, htmlFor: this.props.id, children: selectedLabel })), shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), _jsxs("div", { className: styles.buttonContainer, children: [_jsxs(Button, { ...ariaProps, height: this.props.height, id: this.props.id, onClick: this._clickHandler, className: classNames(this.props.buttonClassName, styles.buttonValue, {
-                                        [styles.buttonValueOpen]: this.state.showPopup,
-                                        [styles.buttonValueEmpty]: this._selectionIsEmpty(),
-                                    }), disabled: this.props.disabled, style: style, "data-test": 'ring-select__button ring-select__focus', children: [this._getAvatar(), this._getPlaceholder()] }), iconsNode] }), this._renderPopup()] }));
+                return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
+            {selectedLabel && (<ControlLabel type={this.props.labelType} disabled={this.props.disabled} htmlFor={this.props.id}>
+                {selectedLabel}
+              </ControlLabel>)}
+            {shortcutsEnabled && <Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>}
+            <div className={styles.buttonContainer}>
+              <Button {...ariaProps} height={this.props.height} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
+                        [styles.buttonValueOpen]: this.state.showPopup,
+                        [styles.buttonValueEmpty]: this._selectionIsEmpty(),
+                    })} disabled={this.props.disabled} style={style} data-test='ring-select__button ring-select__focus'>
+                {this._getAvatar()}
+                {this._getPlaceholder()}
+              </Button>
+              {iconsNode}
+            </div>
+            {this._renderPopup()}
+          </div>);
             case Type.INLINE:
-                return (_jsxs("div", { className: classes, ref: this.nodeRef, "data-test": dataTests('ring-select', dataTest), children: [shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), _jsx(Anchor, { ...ariaProps, className: this.props.buttonClassName ?? undefined, id: this.props.id, onClick: this._clickHandler, "data-test": 'ring-select__focus', disabled: this.props.disabled, active: this.state.showPopup, children: this._getPlaceholder() }), this._renderPopup()] }));
+                return (<div className={classes} ref={this.nodeRef} data-test={dataTests('ring-select', dataTest)}>
+            {shortcutsEnabled && <Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>}
+            <Anchor {...ariaProps} className={this.props.buttonClassName ?? undefined} id={this.props.id} onClick={this._clickHandler} data-test='ring-select__focus' disabled={this.props.disabled} active={this.state.showPopup}>
+              {this._getPlaceholder()}
+            </Anchor>
+            {this._renderPopup()}
+          </div>);
             default:
                 if (this.props.customAnchor) {
-                    return (_jsxs(Fragment, { children: [shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), this.props.customAnchor({
-                                wrapperProps: {
-                                    ref: this.nodeRef,
-                                    'data-test': dataTests('ring-select', dataTest),
-                                },
-                                buttonProps: {
-                                    ...ariaProps,
-                                    id: this.props.id,
-                                    onClick: this._clickHandler,
-                                    disabled: this.props.disabled,
-                                    children: this._getPlaceholder(),
-                                    'data-test': 'ring-select__focus',
-                                },
-                                popup: this._renderPopup(),
-                            })] }));
+                    return (<Fragment>
+              {shortcutsEnabled && <Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>}
+              {this.props.customAnchor({
+                            wrapperProps: {
+                                ref: this.nodeRef,
+                                'data-test': dataTests('ring-select', dataTest),
+                            },
+                            buttonProps: {
+                                ...ariaProps,
+                                id: this.props.id,
+                                onClick: this._clickHandler,
+                                disabled: this.props.disabled,
+                                children: this._getPlaceholder(),
+                                'data-test': 'ring-select__focus',
+                            },
+                            popup: this._renderPopup(),
+                        })}
+            </Fragment>);
                 }
-                return (_jsx("span", { id: this.props.id, ref: this.nodeRef, "data-test": 'ring-select', children: this._renderPopup() }));
+                return (<span id={this.props.id} ref={this.nodeRef} data-test='ring-select'>
+            {this._renderPopup()}
+          </span>);
         }
     }
     render() {
-        return (_jsx(ActiveItemContext.Provider, { children: _jsx(ActiveItemContext.ValueContext.Consumer, { children: activeItemId => this.renderSelect(activeItemId) }) }));
+        return (<ActiveItemContext.Provider>
+        <ActiveItemContext.ValueContext.Consumer>
+          {activeItemId => this.renderSelect(activeItemId)}
+        </ActiveItemContext.ValueContext.Consumer>
+      </ActiveItemContext.Provider>);
     }
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/components/shortcuts/{shortcuts-hoc.js → shortcuts-hoc.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import getUID from '../global/get-uid';
 import Shortcuts from './shortcuts';
@@ -7,7 +6,9 @@ export default function shortcutsHOC(ComposedComponent) {
         _shortcutsScopeUid = getUID('rg-shortcuts-');
         render() {
             const { rgShortcutsOptions, rgShortcutsMap, ...props } = this.props;
-            return (_jsx(Shortcuts, { scope: this._shortcutsScopeUid, map: rgShortcutsMap, options: rgShortcutsOptions, disabled: rgShortcutsOptions.disabled, children: _jsx(ComposedComponent, { ...props }) }));
+            return (<Shortcuts scope={this._shortcutsScopeUid} map={rgShortcutsMap} options={rgShortcutsOptions} disabled={rgShortcutsOptions.disabled}>
+          <ComposedComponent {...props}/>
+        </Shortcuts>);
         }
     };
 }