@jetbrains/ring-ui 7.0.11 → 7.0.12

package/components/select/select.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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';
@@ -411,9 +411,7 @@ export default class Select extends Component {
             separator: reset.separator,
             key: reset.label,
             rgItemType: List.ListProps.Type.CUSTOM,
-            template: (<Button inline className={styles.button} data-test="ring-select-reset-tags-button" height={ControlsHeight.S}>
-          {reset.label}
-        </Button>),
+            template: (_jsx(Button, { inline: true, className: styles.button, "data-test": "ring-select-reset-tags-button", height: ControlsHeight.S, children: reset.label })),
             glyph: reset.glyph,
             onClick: resetHandler,
         };
@@ -435,8 +433,7 @@ export default class Select extends Component {
         const anchorElement = this.props.targetElement || this.node;
         const { showPopup, shownData } = this.state;
         const _shownData = this._prependResetOption(shownData);
-        return (<I18nContext.Consumer>
-        {({ translate }) => {
+        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => {
                 let message;
                 if (this.props.loading) {
                     message = this.props.loadingMessage ?? translate('loading');
@@ -444,10 +441,8 @@ export default class Select extends Component {
                 else if (!shownData.length) {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
-                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={this.state.selectedIndex} 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>);
+                return (_jsx(SelectPopup, { data: _shownData, message: message, toolbar: showPopup && this.getToolbar(), topbar: this.getTopbar(), loading: this.props.loading, activeIndex: this.state.selectedIndex, 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 }));
+            } }));
     }
     _showPopup = () => {
         if (!this.node) {
@@ -482,15 +477,9 @@ export default class Select extends Component {
         if (!isToolbarHasElements) {
             return null;
         }
-        return (<div className={classNames({
+        return (_jsxs("div", { className: classNames({
                 [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar),
-            })} 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>);
+            }), "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" })] }));
     }
     getTopbar() {
         return this.props.renderTopToolbar?.();
@@ -756,19 +745,19 @@ export default class Select extends Component {
         const icons = [];
         const height = this.props.height || this.context;
         if (!Array.isArray(selected) && selected?.icon) {
-            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})` }}/>);
+            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"));
         }
         if (clear && !disabled && !this._selectionIsEmpty()) {
-            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}/>);
+            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"));
         }
         if (!hideArrow) {
-            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}/>);
+            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"));
         }
         return icons;
     }
     _getAvatar() {
         return (!Array.isArray(this.state.selected) &&
-            (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}/>));
+            (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 })));
     }
     filter;
     filterRef = (el) => {
@@ -801,7 +790,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 = <div className={styles.icons}>{icons}</div>;
+            iconsNode = _jsx("div", { className: styles.icons, children: icons });
         }
         const ariaProps = this.state.showPopup
             ? {
@@ -815,82 +804,45 @@ export default class Select extends Component {
         switch (this.props.type) {
             case Type.INPUT_WITHOUT_CONTROLS:
             case Type.INPUT:
-                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 ? '' : 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>)}
-          </>);
+                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 ? '' : 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 }))] }));
             case Type.BUTTON:
-                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>);
+                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()] }));
             case Type.INLINE:
-                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>);
+                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()] }));
             default:
                 if (this.props.customAnchor) {
-                    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 (_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 (<span id={this.props.id} ref={this.nodeRef} data-test="ring-select">
-            {this._renderPopup()}
-          </span>);
+                return (_jsx("span", { id: this.props.id, ref: this.nodeRef, "data-test": "ring-select", children: this._renderPopup() }));
         }
     }
     render() {
-        return (<ActiveItemContext.Provider>
-        <ActiveItemContext.ValueContext.Consumer>
-          {activeItemId => this.renderSelect(activeItemId)}
-        </ActiveItemContext.ValueContext.Consumer>
-      </ActiveItemContext.Provider>);
+        return (_jsx(ActiveItemContext.Provider, { children: _jsx(ActiveItemContext.ValueContext.Consumer, { children: activeItemId => this.renderSelect(activeItemId) }) }));
     }
 }
 export const RerenderableSelect = rerenderHOC(Select);

package/components/select/select__filter.d.ts

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

package/components/select/select__filter.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import Input from '../input/input';
@@ -37,10 +38,6 @@ export default class SelectFilter extends Component {
     render() {
         const { className, listId, ...restProps } = this.props;
         const classes = classNames(styles.filter, className);
-        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>);
+        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 })) })) }));
     }
 }

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(): React.JSX.Element | null;
+    getFilter(): import("react/jsx-runtime").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 | React.JSX.Element;
-    getFilterWithTags(): React.JSX.Element | null;
-    getBottomLine(): "" | React.JSX.Element | null;
+    getTags(): false | import("react/jsx-runtime").JSX.Element;
+    getFilterWithTags(): import("react/jsx-runtime").JSX.Element | null;
+    getBottomLine(): "" | import("react/jsx-runtime").JSX.Element | null;
     handleListResize: () => void;
-    getList(ringPopupTarget: string | Element | undefined): React.JSX.Element | null;
+    getList(ringPopupTarget: string | Element | undefined): import("react/jsx-runtime").JSX.Element | null;
     handleSelectAll: () => void;
-    getSelectAll: () => false | React.JSX.Element;
+    getSelectAll: () => false | import("react/jsx-runtime").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(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type SelectPopupAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof SelectPopup, SelectPopupProps<T>>;

package/components/select/select__popup.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @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';
@@ -179,10 +179,7 @@ export default class SelectPopup extends PureComponent {
     onClickHandler = () => this.filter?.focus();
     getFilter() {
         if (this.props.filter || this.props.tags) {
-            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 (_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 null;
     }
@@ -201,9 +198,7 @@ export default class SelectPopup extends PureComponent {
         return undefined;
     }
     getTags() {
-        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>));
+        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) }) })));
     }
     getFilterWithTags() {
         if (this.props.tags) {
@@ -213,23 +208,16 @@ export default class SelectPopup extends PureComponent {
                     [styles.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled,
                 },
             ]);
-            return (<div className={classes}>
-          {this.getTags()}
-          {this.getFilter()}
-        </div>);
+            return (_jsxs("div", { className: classes, children: [this.getTags(), this.getFilter()] }));
         }
         return this.getFilter();
     }
     getBottomLine() {
         const { loading, message, data } = this.props;
         const hasMoreThanOneItem = data.length > 1;
-        return ((loading || message) && (<div className={classNames(styles.bottomLine, {
+        return ((loading || message) && (_jsxs("div", { className: classNames(styles.bottomLine, {
                 [styles.bottomLineOverItem]: hasMoreThanOneItem,
-            })}>
-          {loading && <LoaderInline />}
-
-          {message && <div className={styles.message}>{message}</div>}
-        </div>));
+            }), children: [loading && _jsx(LoaderInline, {}), message && _jsx("div", { className: styles.message, children: message })] })));
     }
     handleListResize = () => {
         this.forceUpdate();
@@ -246,7 +234,7 @@ export default class SelectPopup extends PureComponent {
             if (this.props.toolbar) {
                 maxHeight -= TOOLBAR_HEIGHT;
             }
-            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 (_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 null;
     }
@@ -258,14 +246,9 @@ 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) && (<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>));
+        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` }))] })));
     };
     // Cache the value because this method is called
     // inside `render` function which can be called N times
@@ -321,26 +304,13 @@ 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 (<PopupTargetContext.Consumer>
-        {ringPopupTarget => {
+        return (_jsx(PopupTargetContext.Consumer, { children: 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 (<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>);
+                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] }) }));
+            } }));
     }
 }

package/components/shortcuts/shortcuts-hoc.d.ts

@@ -10,7 +10,7 @@ export interface ShortcutsHOCProps {
 export default function shortcutsHOC<P extends {}>(ComposedComponent: ComponentType<P> | string): {
     new (props: P & ShortcutsHOCProps): {
         _shortcutsScopeUid: string;
-        render(): import("react").JSX.Element;
+        render(): import("react/jsx-runtime").JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -34,7 +34,7 @@ export default function shortcutsHOC<P extends {}>(ComposedComponent: ComponentT
     };
     new (props: P & ShortcutsHOCProps, context: any): {
         _shortcutsScopeUid: string;
-        render(): import("react").JSX.Element;
+        render(): import("react/jsx-runtime").JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/components/shortcuts/shortcuts-hoc.js

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

package/components/slider/slider.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import * as React from 'react';
 import classNames from 'classnames';
 import { isArray } from '../global/typescript-utils';
 import Shortcuts from '../shortcuts/shortcuts';
@@ -123,56 +123,38 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             window.removeEventListener('mouseup', handleMouseUp);
         };
     }, [isDragging, handleMouseMove, handleMouseUp, disabled]);
-    return (<div ref={ref} role="presentation" // contains interactive elements
-     className={classNames(styles.slider, className, {
+    return (_jsxs("div", { ref: ref, role: "presentation" // contains interactive elements
+        , className: classNames(styles.slider, className, {
             [styles.disabled]: disabled,
             [styles.marked]: !!marks || showTag,
-        })} tabIndex={-1} onMouseDown={handleMouseDown}>
-      <Shortcuts map={shortcutsMap} scope={shortcutsScope}/>
-      <div className={classNames(styles.rail, {
-            [styles.rounded]: !showTicks,
-            [styles.disabled]: disabled,
-        })}/>
-      <div style={{
-            left: `${trackStart}%`,
-            width: `${trackLength}%`,
-        }} className={classNames(styles.track, {
-            [styles.rounded]: !showTicks,
-            [styles.disabled]: disabled,
-        })}/>
-      {validValues.map((numValue, index) => {
-            const percent = toPercent(numValue, min, max);
-            return (
-            // eslint-disable-next-line react/no-array-index-key
-            <Fragment key={index}>
-            <div tabIndex={0} aria-label="Pick value" role="slider" aria-valuemin={min} aria-valuemax={max} aria-valuenow={numValue} data-index={index} style={{ left: `${percent}%` }} className={classNames(styles.thumb, {
+        }), tabIndex: -1, onMouseDown: handleMouseDown, children: [_jsx(Shortcuts, { map: shortcutsMap, scope: shortcutsScope }), _jsx("div", { className: classNames(styles.rail, {
+                    [styles.rounded]: !showTicks,
                     [styles.disabled]: disabled,
-                    [styles.dragged]: isDragging && draggedIndex === index,
-                })} onMouseDown={handleMouseDown}/>
-            {showTag && (<div style={{ left: `${percent}%` }} className={classNames(styles.tag, { [styles.disabled]: disabled })} role="tooltip">
-                {renderTag ? renderTag(numValue) : numValue}
-              </div>)}
-          </Fragment>);
-        })}
-      {markValues.map(({ value: markValue, label }, index) => {
-            const percent = toPercent(markValue, min, max);
-            return (<div 
-            // eslint-disable-next-line react/no-array-index-key
-            key={index} style={{ left: `${percent}%` }} className={classNames(styles.markValue, { [styles.disabled]: disabled })}>
-            {label ?? markValue}
-          </div>);
-        })}
-      {tickMarks.map(({ value: tickValue }, index) => {
-            const percent = toPercent(tickValue, min, max);
-            const isActive = isRange
-                ? tickValue >= validValues[0] && tickValue <= validValues[validValues.length - 1]
-                : tickValue <= validValues[0];
-            return (<div 
-            // eslint-disable-next-line react/no-array-index-key
-            key={index} className={classNames(styles.tick, {
-                    [styles.active]: isActive,
+                }) }), _jsx("div", { style: {
+                    left: `${trackStart}%`,
+                    width: `${trackLength}%`,
+                }, className: classNames(styles.track, {
+                    [styles.rounded]: !showTicks,
                     [styles.disabled]: disabled,
-                })} style={{ left: `${percent}%` }}/>);
-        })}
-    </div>);
+                }) }), validValues.map((numValue, index) => {
+                const percent = toPercent(numValue, min, max);
+                return (
+                // eslint-disable-next-line react/no-array-index-key
+                _jsxs(Fragment, { children: [_jsx("div", { tabIndex: 0, "aria-label": "Pick value", role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": numValue, "data-index": index, style: { left: `${percent}%` }, className: classNames(styles.thumb, {
+                                [styles.disabled]: disabled,
+                                [styles.dragged]: isDragging && draggedIndex === index,
+                            }), onMouseDown: handleMouseDown }), showTag && (_jsx("div", { style: { left: `${percent}%` }, className: classNames(styles.tag, { [styles.disabled]: disabled }), role: "tooltip", children: renderTag ? renderTag(numValue) : numValue }))] }, index));
+            }), markValues.map(({ value: markValue, label }, index) => {
+                const percent = toPercent(markValue, min, max);
+                return (_jsx("div", { style: { left: `${percent}%` }, className: classNames(styles.markValue, { [styles.disabled]: disabled }), children: label ?? markValue }, index));
+            }), tickMarks.map(({ value: tickValue }, index) => {
+                const percent = toPercent(tickValue, min, max);
+                const isActive = isRange
+                    ? tickValue >= validValues[0] && tickValue <= validValues[validValues.length - 1]
+                    : tickValue <= validValues[0];
+                return (_jsx("div", { className: classNames(styles.tick, {
+                        [styles.active]: isActive,
+                        [styles.disabled]: disabled,
+                    }), style: { left: `${percent}%` } }, index));
+            })] }));
 };

package/components/tab-trap/tab-trap.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import * as React from 'react';
 import { isNodeInVisiblePartOfPage } from '../global/dom';
 import styles from './tab-trap.css';
 export const FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
@@ -101,20 +101,14 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
         focusLast();
     }
     if (trapDisabled) {
-        return (<div ref={nodeRef} {...restProps}>
-        {children}
-      </div>);
+        return (_jsx("div", { ref: nodeRef, ...restProps, children: children }));
     }
-    return (<div ref={nodeRef} {...restProps}>
-      <div 
-    // It never actually stays focused
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    tabIndex={0} ref={trapButtonNodeRef} className={styles.trapButton} onFocus={focusLastIfEnabled} onBlur={handleBlurIfWithoutFocus} data-trap-button/>
-      {children}
-      <div 
-    // It never actually stays focused
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    tabIndex={0} onFocus={focusBackOnExit ? restoreFocus : focusFirst} data-trap-button/>
-    </div>);
+    return (_jsxs("div", { ref: nodeRef, ...restProps, children: [_jsx("div", { 
+                // It never actually stays focused
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, ref: trapButtonNodeRef, className: styles.trapButton, onFocus: focusLastIfEnabled, onBlur: handleBlurIfWithoutFocus, "data-trap-button": true }), children, _jsx("div", { 
+                // It never actually stays focused
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, onFocus: focusBackOnExit ? restoreFocus : focusFirst, "data-trap-button": true })] }));
 });
 export default TabTrap;

package/components/table/cell.d.ts

@@ -3,5 +3,5 @@ export interface CellProps extends TdHTMLAttributes<HTMLTableDataCellElement> {
     'data-test'?: string | null | undefined;
 }
 export default class Cell extends PureComponent<CellProps> {
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/table/cell.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -5,8 +6,6 @@ import style from './table.css';
 export default class Cell extends PureComponent {
     render() {
         const classes = classNames(style.cell, this.props.className);
-        return (<td {...this.props} className={classes} data-test={dataTests('ring-table-cell', this.props['data-test'])}>
-        {this.props.children}
-      </td>);
+        return (_jsx("td", { ...this.props, className: classes, "data-test": dataTests('ring-table-cell', this.props['data-test']), children: this.props.children }));
     }
 }

package/components/table/disable-hover-hoc.d.ts

@@ -12,7 +12,7 @@ export default function disableHoverHOC<P extends DisableHoverAddProps>(Composed
         componentWillUnmount(): void;
         onMouseMove: () => void;
         onKeyDown: (e: KeyboardEvent) => void;
-        render(): import("react").JSX.Element;
+        render(): import("react/jsx-runtime").JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -39,7 +39,7 @@ export default function disableHoverHOC<P extends DisableHoverAddProps>(Composed
         componentWillUnmount(): void;
         onMouseMove: () => void;
         onKeyDown: (e: KeyboardEvent) => void;
-        render(): import("react").JSX.Element;
+        render(): import("react/jsx-runtime").JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;