@jetbrains/ring-ui 7.0.10 → 7.0.12

package/components/pager/pager.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @name Pager
  */
 import { PureComponent } from 'react';
-import * as React from 'react';
 import classNames from 'classnames';
 import chevronLeftIcon from '@jetbrains/icons/chevron-left';
 import chevronRightIcon from '@jetbrains/icons/chevron-right';
@@ -75,9 +75,7 @@ export default class Pager extends PureComponent {
         this.props.onLoadPage(i);
     });
     getButton(page, content, key, active) {
-        return (<Button href={this.generateHref(page)} key={key} active={active} disabled={this.props.loader && !active && !this.props.loaderNavigation} loader={this.props.loader && active} {...this.getClickProps(this.handlePageChange(page))}>
-        {content}
-      </Button>);
+        return (_jsx(Button, { href: this.generateHref(page), active: active, disabled: this.props.loader && !active && !this.props.loaderNavigation, loader: this.props.loader && active, ...this.getClickProps(this.handlePageChange(page)), children: content }, key));
     }
     getClickProps(onClick) {
         const { hrefFunc, onPageChange } = this.props;
@@ -93,41 +91,25 @@ export default class Pager extends PureComponent {
     }
     getPageSizeSelector() {
         const selectOptions = this.getSelectOptions();
-        return (!this.props.disablePageSizeSelector && (<div data-test="ring-pager-page-size-selector" className={style.pageSize}>
-          <Select data={selectOptions.data} selected={selectOptions.selected} onSelect={this.handlePageSizeChange} type={Select.Type.INLINE} disabled={this.props.loader}/>
-        </div>));
+        return (!this.props.disablePageSizeSelector && (_jsx("div", { "data-test": "ring-pager-page-size-selector", className: style.pageSize, children: _jsx(Select, { data: selectOptions.data, selected: selectOptions.selected, onSelect: this.handlePageSizeChange, type: Select.Type.INLINE, disabled: this.props.loader }) })));
     }
     getPagerLinks() {
         const { translate } = this.context;
         const prevLinkAvailable = this.props.currentPage !== 1;
         const nextLinkAvailable = this.props.openTotal || this.props.currentPage !== this.getTotalPages();
-        const nextIcon = <Icon glyph={chevronRightIcon} key="icon"/>;
-        const prevIcon = <Icon glyph={chevronLeftIcon} key="icon"/>;
+        const nextIcon = _jsx(Icon, { glyph: chevronRightIcon }, "icon");
+        const prevIcon = _jsx(Icon, { glyph: chevronLeftIcon }, "icon");
         const prevText = this.props.translations?.previousPage ?? translate('previousPage');
         const nextText = this.props.translations?.nextPage ?? translate('nextPage');
-        const nextLinkContent = [<span key="text">{nextText}</span>, nextIcon];
-        const prevLinkContent = [prevIcon, <span key="text">{prevText}</span>];
+        const nextLinkContent = [_jsx("span", { children: nextText }, "text"), nextIcon];
+        const prevLinkContent = [prevIcon, _jsx("span", { children: prevText }, "text")];
         const prevLinkHref = this.generateHref(this.props.currentPage - 1);
         const nextLinkHref = this.generateHref(this.props.currentPage + 1);
         const disabledLinkClasses = classNames({
             [style.link]: true,
             [style.linkDisabled]: true,
         });
-        return (<div className={style.links}>
-        {prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? (<Link href={prevLinkHref} className={style.link} {...this.getClickProps(this.handlePrevClick)}>
-            {prevLinkContent}
-          </Link>) : (<span className={disabledLinkClasses}>
-            {prevIcon}
-            <span key="text">{prevText}</span>
-          </span>)}
-
-        {nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? (<Link href={nextLinkHref} className={style.link} {...this.getClickProps(this.handleNextClick)}>
-            {nextLinkContent}
-          </Link>) : (<span className={disabledLinkClasses}>
-            <span key="text">{nextText}</span>
-            {nextIcon}
-          </span>)}
-      </div>);
+        return (_jsxs("div", { className: style.links, children: [prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? (_jsx(Link, { href: prevLinkHref, className: style.link, ...this.getClickProps(this.handlePrevClick), children: prevLinkContent })) : (_jsxs("span", { className: disabledLinkClasses, children: [prevIcon, _jsx("span", { children: prevText }, "text")] })), nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? (_jsx(Link, { href: nextLinkHref, className: style.link, ...this.getClickProps(this.handleNextClick), children: nextLinkContent })) : (_jsxs("span", { className: disabledLinkClasses, children: [_jsx("span", { children: nextText }, "text"), nextIcon] }))] }));
     }
     generateHref(page) {
         if (this.props.hrefFunc === undefined) {
@@ -170,37 +152,11 @@ export default class Pager extends PureComponent {
         }
         const lastPageButtonAvailable = (!this.props.disableLastPageButton && end < totalPages && !this.props.openTotal) ||
             (this.props.openTotal && this.props.canLoadLastPageWithOpenTotal);
-        return (<div>
-        {this.getPagerLinks()}
-
-        <div className={style.actions}>
-          <ButtonToolbar>
-            {start > 1 && this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage'))}
-
-            <ButtonGroup>
-              {start > 1 && this.getButton(start - 1, '...')}
-
-              {buttons}
-
-              {end < totalPages && this.getButton(end + 1, '...')}
-
-              {end === totalPages && this.props.openTotal && (<Button href={this.generateHref(end + 1)} disabled={this.props.loader} {...this.getClickProps(this.handleLoadMore(end + 1))}>
-                  {'...'}
-                </Button>)}
-            </ButtonGroup>
-
-            {lastPageButtonAvailable &&
-                this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))}
-          </ButtonToolbar>
-
-          {this.getPageSizeSelector()}
-        </div>
-      </div>);
+        return (_jsxs("div", { children: [this.getPagerLinks(), _jsxs("div", { className: style.actions, children: [_jsxs(ButtonToolbar, { children: [start > 1 && this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage')), _jsxs(ButtonGroup, { children: [start > 1 && this.getButton(start - 1, '...'), buttons, end < totalPages && this.getButton(end + 1, '...'), end === totalPages && this.props.openTotal && (_jsx(Button, { href: this.generateHref(end + 1), disabled: this.props.loader, ...this.getClickProps(this.handleLoadMore(end + 1)), children: '...' }))] }), lastPageButtonAvailable &&
+                                    this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))] }), this.getPageSizeSelector()] })] }));
     }
     render() {
         const classes = classNames(style.pager, this.props.className);
-        return (<div data-test="ring-pager" className={classes}>
-        {this.getTotalPages() > 1 || this.props.openTotal ? this.getPagerContent() : this.getPageSizeSelector()}
-      </div>);
+        return (_jsx("div", { "data-test": "ring-pager", className: classes, children: this.getTotalPages() > 1 || this.props.openTotal ? this.getPagerContent() : this.getPageSizeSelector() }));
     }
 }

package/components/panel/panel.d.ts

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

package/components/panel/panel.js

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

package/components/popup/popup.d.ts

@@ -138,12 +138,12 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
      * @private
      */
     private _onDocumentClick;
-    getInternalContent(): React.JSX.Element | P["children"] | undefined;
+    getInternalContent(): import("react/jsx-runtime").JSX.Element | P["children"] | undefined;
     shortcutsScope: string;
     shortcutsMap: {
         esc: (evt: KeyboardEvent) => void;
     };
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type PopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, PopupProps>;
 export type BasePopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, BasePopupProps>;

package/components/popup/popup.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @name Popup
  */
 import { PureComponent } from 'react';
-import * as React from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import getUID from '../global/get-uid';
@@ -247,9 +247,7 @@ export default class Popup extends PureComponent {
     };
     getInternalContent() {
         const { trapFocus, autoFocusFirst, children } = this.props;
-        return trapFocus ? (<TabTrap autoFocusFirst={autoFocusFirst} focusBackOnExit>
-        {children}
-      </TabTrap>) : (children);
+        return trapFocus ? (_jsx(TabTrap, { autoFocusFirst: autoFocusFirst, focusBackOnExit: true, children: children })) : (children);
     }
     shortcutsScope = this.uid;
     shortcutsMap = {
@@ -265,27 +263,17 @@ export default class Popup extends PureComponent {
             [styles.largeBorderRadius]: largeBorderRadius,
         });
         const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
-        return (<PopupTargetContext.Consumer>
-        {value => {
+        return (_jsx(PopupTargetContext.Consumer, { children: value => {
                 this.ringPopupTarget = value;
-                return (<span 
-                // prevent bubbling through portal
-                onClick={stop} 
-                // This handler only blocks bubbling through React portal
-                role="presentation" ref={this.portalRef}>
-              {this.shouldUseShortcuts() && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
-
-              {(client || this.state.client) &&
-                        (keepMounted || !hidden) &&
-                        createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
-                    <div data-test={dataTests('ring-popup', dataTest)} data-test-shown={!hidden && !showing} data-test-direction={direction} ref={this.popupRef} className={classes} style={style} onMouseDown={onMouseDown} onMouseUp={onMouseUp} 
-                        // mouse handlers are used to track clicking on inner elements
-                        role="presentation">
-                      {this.getInternalContent()}
-                    </div>
-                  </PopupTarget>, this.getContainer() || document.body)}
-            </span>);
-            }}
-      </PopupTargetContext.Consumer>);
+                return (_jsxs("span", { 
+                    // prevent bubbling through portal
+                    onClick: stop, 
+                    // This handler only blocks bubbling through React portal
+                    role: "presentation", ref: this.portalRef, children: [this.shouldUseShortcuts() && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), (client || this.state.client) &&
+                            (keepMounted || !hidden) &&
+                            createPortal(_jsx(PopupTarget, { id: this.uid, ref: this.containerRef, onMouseOver: onMouseOver, onFocus: onMouseOver, onMouseOut: onMouseOut, onBlur: onMouseOut, onContextMenu: onContextMenu, children: _jsx("div", { "data-test": dataTests('ring-popup', dataTest), "data-test-shown": !hidden && !showing, "data-test-direction": direction, ref: this.popupRef, className: classes, style: style, onMouseDown: onMouseDown, onMouseUp: onMouseUp, 
+                                    // mouse handlers are used to track clicking on inner elements
+                                    role: "presentation", children: this.getInternalContent() }) }), this.getContainer() || document.body)] }));
+            } }));
     }
 }

package/components/popup/popup.target.js

@@ -1,10 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, forwardRef } from 'react';
 export const PopupTargetContext = createContext(undefined);
 export const PopupTarget = forwardRef(function PopupTarget({ id, children, ...restProps }, ref) {
-    const target = (<div {...restProps} data-portaltarget={id} ref={ref}>
-      {typeof children !== 'function' && children}
-    </div>);
-    return (<PopupTargetContext.Provider value={id}>
-      {typeof children === 'function' ? children(target) : target}
-    </PopupTargetContext.Provider>);
+    const target = (_jsx("div", { ...restProps, "data-portaltarget": id, ref: ref, children: typeof children !== 'function' && children }));
+    return (_jsx(PopupTargetContext.Provider, { value: id, children: typeof children === 'function' ? children(target) : target }));
 });

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

@@ -62,7 +62,7 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
     list?: List<T> | null;
     listRef: (el: List<T> | null) => void;
     /** @override */
-    getInternalContent(): import("react").JSX.Element;
+    getInternalContent(): import("react/jsx-runtime").JSX.Element;
 }
 export type PopupMenuAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof PopupMenu, PopupMenuProps<T>>;
 export declare const ListProps: {

package/components/popup-menu/popup-menu.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import Popup from '../popup/popup';
 import List from '../list/list';
 /**
@@ -26,9 +27,7 @@ export default class PopupMenu extends Popup {
     /** @override */
     getInternalContent() {
         const { className, ...props } = this.props;
-        return (<div>
-        <List ref={this.listRef} {...props} maxHeight={this.popup && parseFloat(this.popup.style.maxHeight)} shortcuts={this.shouldUseShortcuts()} onSelect={this.onSelect}/>
-      </div>);
+        return (_jsx("div", { children: _jsx(List, { ref: this.listRef, ...props, maxHeight: this.popup && parseFloat(this.popup.style.maxHeight), shortcuts: this.shouldUseShortcuts(), onSelect: this.onSelect }) }));
     }
 }
 export const { ListProps } = List;

package/components/progress-bar/progress-bar.d.ts

@@ -45,6 +45,6 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
     progressbarWrapperRef: (el: HTMLElement | null) => void;
     progressbar?: HTMLElement | null;
     progressbarRef: (el: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type ProgressBarAttrs = JSX.LibraryManagedAttributes<typeof ProgressBar, ProgressBarProps>;

package/components/progress-bar/progress-bar.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import styles from './progress-bar.css';
@@ -36,8 +37,6 @@ export default class ProgressBar extends PureComponent {
             [styles.globalMode]: global,
             [styles.staticLineColor]: staticColor,
         });
-        return (<div {...otherProps} className={classes} ref={this.progressbarWrapperRef}>
-        <div className={styles.line} ref={this.progressbarRef} role="progressbar" aria-label={label} aria-valuenow={value} aria-valuemin={0} aria-valuemax={max} style={{ width }}/>
-      </div>);
+        return (_jsx("div", { ...otherProps, className: classes, ref: this.progressbarWrapperRef, children: _jsx("div", { className: styles.line, ref: this.progressbarRef, role: "progressbar", "aria-label": label, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, style: { width } }) }));
     }
 }

package/components/query-assist/query-assist.d.ts

@@ -251,7 +251,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     setupRequestHandler(delay?: number | null): void;
     private _renderSuggestion;
     renderSuggestions(): import("../list/consts").ListDataItem<SuggestionItem>[];
-    renderQuery(): "" | React.JSX.Element[] | null | undefined;
+    renderQuery(): "" | import("react/jsx-runtime").JSX.Element[] | null | undefined;
     setFocus(focus: boolean | null | undefined): void;
     input?: HTMLElement | null;
     caret?: Caret;
@@ -270,7 +270,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     shortcutsMap: ShortcutsMap;
     listShortcutsMap: ShortcutsMap;
     renderActions(): ReactNode[];
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
 export declare const RerenderableQueryAssist: React.ForwardRefExoticComponent<QueryAssistProps & React.RefAttributes<QueryAssist>>;

package/components/query-assist/query-assist.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
-import * as React from 'react';
 import debounce from 'just-debounce-it';
 import classNames from 'classnames';
 import { dequal } from 'dequal';
@@ -603,11 +603,7 @@ export default class QueryAssist extends Component {
                 const className = classNames(styles.letter, classes[index] || LETTER_DEFAULT_CLASS);
                 const dataTest = letters.length - 1 === index ? 'ring-query-assist-last-letter' : null;
                 // \u00a0 ===  
-                return (<span 
-                // eslint-disable-next-line react/no-array-index-key
-                key={index + letter} className={className} data-test={dataTest}>
-            {letter === ' ' ? '\u00a0' : letter}
-          </span>);
+                return (_jsx("span", { className: className, "data-test": dataTest, children: letter === ' ' ? '\u00a0' : letter }, index + letter));
             }));
     }
     setFocus(focus) {
@@ -674,9 +670,7 @@ export default class QueryAssist extends Component {
         const actions = [...(this.props.actions || [])];
         const renderClear = this.props.clear && !!this.state.query;
         if (renderClear) {
-            actions.push(<I18nContext.Consumer key={'clearAction'}>
-          {({ translate }) => (<Button icon={closeIcon} className={styles.clear} title={this.props.translations?.clearTitle ?? translate('clearTitle')} ref={this.clearRef} onClick={this.clearQuery} data-test="query-assist-clear-icon"/>)}
-        </I18nContext.Consumer>);
+            actions.push(_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(Button, { icon: closeIcon, className: styles.clear, title: this.props.translations?.clearTitle ?? translate('clearTitle'), ref: this.clearRef, onClick: this.clearQuery, "data-test": "query-assist-clear-icon" })) }, 'clearAction'));
         }
         return actions;
     }
@@ -703,42 +697,10 @@ export default class QueryAssist extends Component {
             [styles.hugePlaceholder]: huge,
             [styles.withoutGlass]: !glass || (!renderLoader && huge),
         });
-        return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
-        <I18nContext.Consumer>
-          {({ translate }) => (<div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
-              {this.state.shortcuts && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
-
-              {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={translations?.searchTitle ?? translate('searchTitle')} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
-
-              {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
-                        [styles.loaderOnTheRight]: !glass && !huge,
-                        [styles.loaderActive]: renderLoader,
-                    })} ref={this.loaderRef}>
-                  <LoaderInline />
-                </div>)}
-
-              <ContentEditable aria-label={translations?.searchTitle ?? translate('searchTitle')} className={inputClasses} data-test="ring-query-assist-input" inputRef={this.inputRef} disabled={this.props.disabled} onComponentUpdate={() => this.setCaretPosition({ fromContentEditable: true })} onBlur={this.handleFocusChange} onClick={this.handleCaretMove} onCompositionStart={this.trackCompositionState} onCompositionEnd={this.trackCompositionState} onFocus={this.handleFocusChange} onInput={this.handleInput} // To support IE use the same method
-             onKeyUp={this.handleInput} // to handle input and key up
-             onKeyDown={this.handleEnter} onPaste={this.handlePaste} spellCheck="false">
-                {this.state.query && <span>{this.renderQuery()}</span>}
-              </ContentEditable>
-
-              {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder" disabled={this.props.disabled} tabIndex={-1}>
-                  {this.props.placeholder}
-                </button>)}
-
-              {actions.length ? (<div data-test="ring-query-assist-actions" className={styles.actions}>
-                  {actions}
-                </div>) : null}
-
-              <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test="ring-query-assist-popup" hint={this.props.hint} shortcutsMap={this.listShortcutsMap} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)}/>
-
-              {glass && huge && (<div className={styles.rightSearchButton} data-test="query-assist-search-button">
-                  <Icon glyph={searchIcon} className={styles.rightSearchIcon} title={translations?.searchTitle ?? translate('searchTitle')} onClick={this.handleApply} ref={this.glassRef} data-test="query-assist-search-icon"/>
-                </div>)}
-            </div>)}
-        </I18nContext.Consumer>
-      </ControlsHeightContext.Provider>);
+        return (_jsx(ControlsHeightContext.Provider, { value: ControlsHeight.M, children: _jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { "data-test": dataTests('ring-query-assist', dataTest), className: containerClasses, role: "presentation", ref: this.nodeRef, children: [this.state.shortcuts && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), renderGlass && !huge && (_jsx(Icon, { glyph: searchIcon, className: styles.icon, title: translations?.searchTitle ?? translate('searchTitle'), ref: this.glassRef, "data-test": "query-assist-search-icon" })), renderLoader && (_jsx("div", { className: classNames(styles.icon, styles.loader, {
+                                [styles.loaderOnTheRight]: !glass && !huge,
+                                [styles.loaderActive]: renderLoader,
+                            }), ref: this.loaderRef, children: _jsx(LoaderInline, {}) })), _jsx(ContentEditable, { "aria-label": translations?.searchTitle ?? translate('searchTitle'), className: inputClasses, "data-test": "ring-query-assist-input", inputRef: this.inputRef, disabled: this.props.disabled, onComponentUpdate: () => this.setCaretPosition({ fromContentEditable: true }), onBlur: this.handleFocusChange, onClick: this.handleCaretMove, onCompositionStart: this.trackCompositionState, onCompositionEnd: this.trackCompositionState, onFocus: this.handleFocusChange, onInput: this.handleInput, onKeyUp: this.handleInput, onKeyDown: this.handleEnter, onPaste: this.handlePaste, spellCheck: "false", children: this.state.query && _jsx("span", { children: this.renderQuery() }) }), renderPlaceholder && (_jsx("button", { type: "button", className: placeholderStyles, ref: this.placeholderRef, onClick: this.handleCaretMove, "data-test": "query-assist-placeholder", disabled: this.props.disabled, tabIndex: -1, children: this.props.placeholder })), actions.length ? (_jsx("div", { "data-test": "ring-query-assist-actions", className: styles.actions, children: actions })) : null, _jsx(PopupMenu, { hidden: !this.state.showPopup, onCloseAttempt: this.closePopup, ref: this.popupRef, anchorElement: this.node, keepMounted: true, attached: true, className: this.props.popupClassName, directions: [PopupMenu.PopupProps.Directions.BOTTOM_RIGHT], data: useCustomItemRender ? this.state.suggestions : this.renderSuggestions(), "data-test": "ring-query-assist-popup", hint: this.props.hint, shortcutsMap: this.listShortcutsMap, hintOnSelection: this.props.hintOnSelection, left: this.getPopupOffset(this.state.suggestions), maxHeight: PopupMenu.PopupProps.MaxHeight.SCREEN, onMouseDown: this.trackPopupMouseState, onMouseUp: this.trackPopupMouseState, onSelect: item => this.handleComplete(item) }), glass && huge && (_jsx("div", { className: styles.rightSearchButton, "data-test": "query-assist-search-button", children: _jsx(Icon, { glyph: searchIcon, className: styles.rightSearchIcon, title: translations?.searchTitle ?? translate('searchTitle'), onClick: this.handleApply, ref: this.glassRef, "data-test": "query-assist-search-icon" }) }))] })) }) }));
     }
 }
 export const RerenderableQueryAssist = rerenderHOC(QueryAssist);

package/components/query-assist/query-assist__suggestions.d.ts

@@ -18,7 +18,7 @@ export interface SuggestionItem {
 }
 export default class QueryAssistSuggestions {
     static createKey(suggestion: QueryAssistSuggestion): string;
-    static renderLabel(suggestion: QueryAssistSuggestion): import("react").JSX.Element;
+    static renderLabel(suggestion: QueryAssistSuggestion): import("react/jsx-runtime").JSX.Element;
     static renderGroupSeparator(suggestion: QueryAssistSuggestion, prevSuggestion: string): {
         key: string;
         description: string;

package/components/query-assist/query-assist__suggestions.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import List from '../list/list';
 import styles from './query-assist.css';
 const ICON_ID_LENGTH = 44;
@@ -17,21 +18,15 @@ export default class QueryAssistSuggestions {
         let after = '';
         if (matchingStart !== matchingEnd) {
             before = option.substring(0, matchingStart);
-            wrappedOption = <span className={styles.highlight}>{option.substring(matchingStart, matchingEnd)}</span>;
+            wrappedOption = _jsx("span", { className: styles.highlight, children: option.substring(matchingStart, matchingEnd) });
             after = option.substring(matchingEnd);
         }
         else {
             wrappedOption = option;
         }
-        const wrappedPrefix = prefix && <span className={styles.service}>{prefix}</span>;
-        const wrappedSuffix = suffix && <span className={styles.service}>{suffix}</span>;
-        return (<span className={className}>
-        {wrappedPrefix}
-        {before}
-        {wrappedOption}
-        {after}
-        {wrappedSuffix}
-      </span>);
+        const wrappedPrefix = prefix && _jsx("span", { className: styles.service, children: prefix });
+        const wrappedSuffix = suffix && _jsx("span", { className: styles.service, children: suffix });
+        return (_jsxs("span", { className: className, children: [wrappedPrefix, before, wrappedOption, after, wrappedSuffix] }));
     }
     static renderGroupSeparator(suggestion, prevSuggestion) {
         const { group, option } = suggestion;

package/components/radio/radio.css

@@ -106,11 +106,12 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .circle {
-    border-color: var(--ring-border-selected-disabled-color);
+    border-color: var(--ring-border-disabled-active-color);
+    background-color: var(--ring-content-background-color);
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
-      background-color: var(--ring-border-selected-disabled-color);
+      background-color: var(--ring-border-disabled-active-color);
     }
   }
 

package/components/radio/radio.d.ts

@@ -6,5 +6,5 @@ import { 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.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/radio/radio.js

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

package/components/radio/radio__item.d.ts

@@ -13,7 +13,7 @@ export declare class RadioItemInner extends Component<RadioItemInnerProps> {
     inputRef: (el: HTMLElement | null) => void;
     label?: HTMLElement | null;
     labelRef: (el: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export interface RadioItemProps extends RadioItemInnerProps {
     value: string;

package/components/radio/radio__item.js

@@ -1,3 +1,4 @@
+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';
@@ -17,19 +18,10 @@ export class RadioItemInner extends Component {
     render() {
         const { className, children, help, ...restProps } = this.props;
         const classes = classNames(styles.radio, className);
-        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>);
+        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 })] })] }));
     }
 }
 const RadioItem = forwardRef(function RadioItem(props, ref) {
-    return (<RadioContext.Consumer>
-      {({ value, onChange, ...restContext }) => (<RadioItemInner ref={ref} {...restContext} checked={value != null ? value === props.value : undefined} onChange={onChange != null ? () => onChange(props.value) : undefined} {...props}/>)}
-    </RadioContext.Consumer>);
+    return (_jsx(RadioContext.Consumer, { children: ({ value, onChange, ...restContext }) => (_jsx(RadioItemInner, { ref: ref, ...restContext, checked: value != null ? value === props.value : undefined, onChange: onChange != null ? () => onChange(props.value) : undefined, ...props })) }));
 });
 export default RadioItem;

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

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

package/components/scrollable-section/scrollable-section.js

@@ -1,3 +1,4 @@
+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';
@@ -21,10 +22,10 @@ export default function ScrollableSection({ className, ...restProps }) {
         window.addEventListener('resize', calculateScrollPosition);
         return () => window.removeEventListener('resize', calculateScrollPosition);
     }, [calculateScrollPosition]);
-    return (<div {...restProps} className={classNames(styles.scrollableSection, className, {
+    return (_jsx("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.d.ts

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