@jetbrains/ring-ui 5.1.1 → 6.0.1-beta.0

package/components/popup/popup.d.ts

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

package/components/popup/popup.js

@@ -295,7 +295,7 @@ Popup.propTypes = {
     autoCorrectTopOverflow: PropTypes.bool,
     left: PropTypes.number,
     top: PropTypes.number,
-    maxHeight: PropTypes.number,
+    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minWidth: PropTypes.number,
     sidePadding: PropTypes.number,
     attached: PropTypes.bool,

package/components/popup/position.d.ts

@@ -23,7 +23,7 @@ export interface PositionAttrs {
     autoCorrectTopOverflow: boolean;
 }
 export declare const positionPropKeys: readonly ["directions", "autoPositioning", "autoCorrectTopOverflow", "sidePadding", "top", "left", "offset", "maxHeight", "minWidth"];
-export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, container?: Element): number;
+export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, containerNode?: Element | null): number | null;
 export default function position(attrs: PositionAttrs): {
     styles: PositionStyles;
     direction: Directions | null;

package/components/popup/position.js

@@ -46,9 +46,7 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
     const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
     const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
     const topOverflow = Math.max(viewportMinX - styles.top, 0);
-    const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number'
-        ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight)
-        : attrs.popup.scrollHeight;
+    const popupHeight = attrs.popup.clientHeight;
     const verticalDiff = styles.top + popupHeight - viewportMaxX;
     const bottomOverflow = Math.max(verticalDiff, 0);
     return topOverflow + bottomOverflow;
@@ -78,26 +76,37 @@ const defaultcontainerRect = {
     top: 0,
     left: 0
 };
-export function maxHeightForDirection(direction, anchorNode, container = document.documentElement) {
-    const MIN_POPUP_SIZE = 8;
-    const domRect = anchorNode.getBoundingClientRect();
-    let topMaxHeight;
-    let bottomMaxHeight;
-    if (container === document.documentElement) {
-        topMaxHeight = Math.max(domRect.top, MIN_POPUP_SIZE);
-        bottomMaxHeight = Math.max(getWindowHeight() - domRect.top - domRect.height, MIN_POPUP_SIZE);
+function handleTopOffScreen({ sidePadding, styles, anchorRect, maxHeight, popupScrollHeight, direction, scroll }) {
+    const BORDER_COMPENSATION = 1;
+    const { TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP } = Directions;
+    const openedToTop = direction != null && [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
+    if (!openedToTop) {
+        return styles;
     }
-    else {
-        const containerRect = container.getBoundingClientRect();
-        topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
-        const containerHeight = Math.max(containerRect.height, 
-        // XXX
-        // If container is the document element
-        // then we check client height too because we may have situation when
-        // "height" from "getBoundingClientRect" less than "clientHeight".
-        container === document.documentElement ? container.clientHeight : 0);
-        bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
+    const isAttachedToAnchorTop = direction != null && [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
+    const attachingPointY = (isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom);
+    const effectiveHeight = maxHeight && typeof maxHeight === 'number'
+        ? Math.min(popupScrollHeight, maxHeight)
+        : popupScrollHeight;
+    const hypotheticalTop = attachingPointY - effectiveHeight;
+    if (hypotheticalTop <= sidePadding) {
+        styles.top = sidePadding + scroll.top;
+        styles.maxHeight = attachingPointY - sidePadding + BORDER_COMPENSATION;
     }
+    return styles;
+}
+export function maxHeightForDirection(direction, anchorNode, containerNode) {
+    const container = containerNode || document.documentElement;
+    const domRect = anchorNode.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
+    const containerHeight = Math.max(containerRect.height, 
+    // XXX
+    // If container is the document element
+    // then we check client height too because we may have situation when
+    // "height" from "getBoundingClientRect" less then "clientHeight".
+    container === document.documentElement ? container.clientHeight : 0);
+    const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
     switch (direction) {
         case Directions.TOP_LEFT:
         case Directions.TOP_CENTER:
@@ -117,8 +126,7 @@ export function maxHeightForDirection(direction, anchorNode, container = documen
         case Directions.LEFT_CENTER:
             return (domRect.height / 2) + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
         default:
-            const exhaustiveCheck = direction;
-            throw new Error(exhaustiveCheck);
+            return null;
     }
 }
 export default function position(attrs) {
@@ -138,7 +146,7 @@ export default function position(attrs) {
         const overflowAttrs = { ...attrs, popup };
         const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
         if (!autoPositioning || directions.length === 1) {
-            styles = { ...directionsMatrix[directions[0]] };
+            styles = directionsMatrix[directions[0]];
             chosenDirection = directions[0];
         }
         else {
@@ -153,7 +161,7 @@ export default function position(attrs) {
                     horizontalOverflow(stylesB, scroll, overflowAttrs);
                 return overflowA - overflowB;
             });
-            styles = { ...sortedByIncreasingOverflow[0].styles };
+            styles = sortedByIncreasingOverflow[0].styles;
             chosenDirection = sortedByIncreasingOverflow[0].direction;
         }
         // because of the anchor negative margin top and left also may become negative
@@ -170,14 +178,16 @@ export default function position(attrs) {
     else if (maxHeight) {
         styles.maxHeight = maxHeight;
     }
-    if (autoCorrectTopOverflow && chosenDirection && anchor) {
-        const maxForDirection = maxHeightForDirection(chosenDirection, anchor) - sidePadding;
-        if (!styles.maxHeight || styles.maxHeight > maxForDirection) {
-            styles.maxHeight = maxForDirection;
-            if (styles.top === 0) {
-                styles.top = sidePadding;
-            }
-        }
+    if (autoCorrectTopOverflow) {
+        styles = handleTopOffScreen({
+            sidePadding,
+            styles,
+            anchorRect,
+            maxHeight,
+            direction: chosenDirection,
+            popupScrollHeight: popup?.scrollHeight ?? 0,
+            scroll
+        });
     }
     if (minWidth === MinWidth.TARGET || minWidth === 'target') {
         styles.minWidth = anchorRect.width;

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

@@ -1,4 +1,4 @@
-import { SyntheticEvent } from 'react';
+import React, { SyntheticEvent } from 'react';
 import Popup, { BasePopupProps } from '../popup/popup';
 import List, { ListProps as ListPropsType } from '../list/list';
 import { ListDataItem } from '../list/consts';
@@ -51,7 +51,7 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
     list?: List<T> | null;
     listRef: (el: List<T> | null) => void;
     /** @override */
-    getInternalContent(): JSX.Element;
+    getInternalContent(): React.JSX.Element;
 }
 export type PopupMenuAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof PopupMenu, PopupMenuProps<T>>;
 export declare const ListProps: {

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import React, { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
     max: number;
@@ -53,6 +53,6 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
     progressbarWrapperRef: (el: HTMLElement | null) => void;
     progressbar?: (HTMLElement | null);
     progressbarRef: (el: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type ProgressBarAttrs = JSX.LibraryManagedAttributes<typeof ProgressBar, ProgressBarProps>;

package/components/promised-click-ng/promised-click-ng.js

@@ -15,7 +15,6 @@ const angularModule = angular.module('Ring.promised-click', []);
 const DEFAULT_MODE = 'active';
 
 class PromisedClickController extends RingAngularComponent {
-  static $inject = ['$scope', '$element', '$attrs', '$parse'];
   constructor(...args) {
     super(...args);
 
@@ -106,6 +105,7 @@ class PromisedClickController extends RingAngularComponent {
     this.promise.then(done, done);
   }
 }
+PromisedClickController.$inject = ['$scope', '$element', '$attrs', '$parse'];
 
 function rgPromisedClickDirective() {
   return {

package/components/query-assist/query-assist.css

@@ -55,7 +55,7 @@
     }
   }
 
-  @nest .error & {
+  .error & {
     border-color: var(--ring-icon-error-color);
   }
 }
@@ -77,7 +77,7 @@
     padding-right: var(--ring-input-padding-inline);
   }
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding: 0 var(--ring-input-padding-inline) 0 0;
 
     & .actions {
@@ -158,13 +158,17 @@
 
   color: var(--ring-disabled-color);
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding-right: calc(var(--ring-input-padding-inline) * 3 + var(--ring-input-padding-block) * 2);
 
     text-align: right;
   }
 }
 
+.hugePlaceholder {
+  padding-left: 0;
+}
+
 .letter {
   display: inline;
 }
@@ -180,7 +184,7 @@
 
   line-height: inherit;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding: 0 var(--ring-input-padding-inline) 0 0;
   }
 }
@@ -190,7 +194,7 @@
 
   color: var(--ring-icon-secondary-color);
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding: 0 0 0 var(--ring-input-padding-inline);
   }
 }
@@ -210,19 +214,20 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 
-  @nest .queryAssist.queryAssist:focus-within & {
+  /* stylelint-disable-next-line selector-max-specificity */
+  .queryAssist.queryAssist:focus-within & {
     transition: none;
 
     border-color: var(--ring-main-color);
   }
 
-  @nest .queryAssist:hover & {
+  .queryAssist:hover & {
     transition: none;
 
     border-color: var(--ring-border-hover-color);
   }
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     border-right: 1px solid var(--ring-borders-color);
     border-left: 0;
     border-radius: var(--ring-border-radius);
@@ -236,7 +241,7 @@
 
   padding-right: 0;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding-right: var(--ring-input-padding-inline);
     padding-left: 0;
   }
@@ -249,7 +254,7 @@
 .withoutGlass {
   padding-left: 0;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding-right: calc(var(--ring-input-padding-block) * 3);
   }
 }
@@ -261,7 +266,7 @@
 .loaderOnTheRight {
   padding-right: 0;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding-left: 0;
   }
 }

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

@@ -40,7 +40,7 @@ export interface QueryAssistProps {
     onApplySuggestion: (suggestion: QueryAssistSuggestion, change: QueryAssistChange) => void;
     onClear: () => void;
     onFocusChange: (change: FocusChange) => void;
-    translations: QueryAssistTranslations;
+    translations?: QueryAssistTranslations | null | undefined;
     autoOpen?: boolean | null | undefined | 'force';
     caret?: number | null | undefined;
     clear?: boolean | null | undefined;
@@ -226,10 +226,6 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         onClear: typeof noop;
         onFocusChange: typeof noop;
         size: Size;
-        translations: {
-            searchTitle: string;
-            clearTitle: string;
-        };
     };
     static getDerivedStateFromProps({ query }: QueryAssistProps, { prevQuery }: QueryAssistState): Partial<QueryAssistState>;
     constructor(props: QueryAssistProps);
@@ -283,7 +279,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     setupRequestHandler(delay?: number | null): void;
     private _renderSuggestion;
     renderSuggestions(): import("../list/consts").ListDataItem<SuggestionItem>[];
-    renderQuery(): "" | JSX.Element[] | null | undefined;
+    renderQuery(): "" | React.JSX.Element[] | null | undefined;
     setFocus(focus: boolean | null | undefined): void;
     input?: HTMLElement | null;
     caret?: Caret;
@@ -301,7 +297,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     shortcutsScope: string;
     shortcutsMap: ShortcutsMap;
     renderActions(): React.ReactNode[];
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
 export declare const RerenderableQueryAssist: {

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

@@ -19,6 +19,7 @@ import Icon from '../icon/icon';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import { Size } from '../input/input';
 import inputStyles from '../input/input.css';
+import { I18nContext } from '../i18n/i18n-context';
 import QueryAssistSuggestions from './query-assist__suggestions';
 import styles from './query-assist.css';
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING +
@@ -166,11 +167,7 @@ export default class QueryAssist extends Component {
         onApplySuggestion: noop,
         onClear: noop,
         onFocusChange: noop,
-        size: Size.L,
-        translations: {
-            searchTitle: 'Search',
-            clearTitle: 'Clear search input'
-        }
+        size: Size.L
     };
     static getDerivedStateFromProps({ query }, { prevQuery }) {
         const nextState = { prevQuery: query };
@@ -314,7 +311,7 @@ export default class QueryAssist extends Component {
                 this.immediateState.selection.startOffset !== undefined) {
                 this.caret?.setPosition(this.immediateState.selection);
             }
-            else if (!this.immediateState.selection || params.forceSetCaret) {
+            else if (this.immediateState.selection === undefined || params.forceSetCaret) {
                 this.caret?.setPosition(-1);
             }
         }
@@ -361,6 +358,23 @@ export default class QueryAssist extends Component {
             return;
         }
         this.immediateState = props;
+        if (this.state.query) {
+            let i = 0;
+            while (this.state.query[i] === this.immediateState.query[i] && i < this.state.query.length - 1) {
+                i++;
+            }
+            const diff = this.immediateState.query.length - this.state.query.length;
+            const originalIndex = this.immediateState.caret - diff;
+            const ranges = [...this.state.styleRanges ?? []];
+            const range = ranges.
+                find(r => originalIndex >= r.start && originalIndex <= r.start + r.length);
+            if (range) {
+                range.length += diff;
+            }
+            ranges.filter(r => r.start > originalIndex).forEach(r => {
+                r.start += diff;
+            });
+        }
         this.props.onChange(props);
         if (this.props.autoOpen === 'force' || props.query.length > 0) {
             this.requestData?.();
@@ -758,12 +772,14 @@ export default class QueryAssist extends Component {
         const actions = [...(this.props.actions || [])];
         const renderClear = this.props.clear && !!this.state.query;
         if (renderClear) {
-            actions.push(<Button icon={closeIcon} key={'clearAction'} className={styles.clear} title={this.props.translations.clearTitle} ref={this.clearRef} onClick={this.clearQuery} data-test="query-assist-clear-icon"/>);
+            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>);
         }
         return actions;
     }
     render() {
-        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge, size } = this.props;
+        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge, size, translations } = this.props;
         const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
         const renderLoader = this.props.loader !== false && this.state.loading;
         const renderGlass = glass && !renderLoader;
@@ -778,43 +794,46 @@ export default class QueryAssist extends Component {
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
             [styles.inputGap2]: actions.length === 2,
-            [styles.inputRevertOrder]: !glass
+            [styles.inputRevertOrder]: !glass || huge
         });
         const placeholderStyles = classNames({
             [styles.placeholder]: true,
+            [styles.hugePlaceholder]: huge,
             [styles.withoutGlass]: !glass || (!renderLoader && huge)
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
-        <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}/>)}
+        <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={this.props.translations.searchTitle} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
+              {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,
-                    [styles.loaderActive]: renderLoader
-                })} ref={this.loaderRef}>
-              <LoaderInline />
-            </div>)}
+              {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
+                        [styles.loaderOnTheRight]: !glass && !huge,
+                        [styles.loaderActive]: renderLoader
+                    })} ref={this.loaderRef}>
+                  <LoaderInline />
+                </div>)}
 
-          <ContentEditable aria-label={this.props.translations.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>
+              <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">
-              {this.props.placeholder}
-            </button>)}
+              {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
+                  {this.props.placeholder}
+                </button>)}
 
-          {actions.length
-                ? (<div data-test="ring-query-assist-actions" className={styles.actions}>{actions}</div>)
-                : null}
+              {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} 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)}/>
+              <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} 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={this.props.translations.searchTitle} onClick={this.handleApply} ref={this.glassRef} data-test="query-assist-search-icon"/>
+              {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>)}
-        </div>
+        </I18nContext.Consumer>
       </ControlsHeightContext.Provider>);
     }
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ListDataItem } from '../list/consts';
 export interface QueryAssistSuggestion {
     description: string;
@@ -19,7 +19,7 @@ export interface SuggestionItem {
 }
 export default class QueryAssistSuggestions {
     static createKey(suggestion: QueryAssistSuggestion): string;
-    static renderLabel(suggestion: QueryAssistSuggestion): JSX.Element;
+    static renderLabel(suggestion: QueryAssistSuggestion): React.JSX.Element;
     static renderGroupSeparator(suggestion: QueryAssistSuggestion, prevSuggestion: string): {
         key: string;
         description: string;

package/components/radio/radio.css

@@ -109,7 +109,7 @@
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
-      background-color: var(--ring-border-selected-disabled-color);
+      background-color: var(--ring-icon-disabled-color);
     }
   }
 

package/components/radio/radio.d.ts

@@ -14,5 +14,5 @@ export default class Radio extends Component<RadioProps> {
     };
     static Item: React.ForwardRefExoticComponent<import("./radio__item").RadioItemProps & React.RefAttributes<import("./radio__item").Radio>>;
     uid: string;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/radio/radio__item.d.ts

@@ -19,7 +19,7 @@ export declare class Radio extends Component<InputHTMLAttributes<HTMLInputElemen
     inputRef: (el: HTMLElement | null) => void;
     label?: HTMLElement | null;
     labelRef: (el: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export interface RadioItemProps extends InputHTMLAttributes<HTMLInputElement> {
     value: string;

package/components/select/select-popup.css

@@ -53,7 +53,7 @@
 
   border-bottom: 1px solid var(--ring-borders-color);
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding-right: calc(unit * 5.5);
     padding-left: unit;
   }
@@ -66,7 +66,7 @@
 
   color: var(--ring-icon-color);
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     right: calc(unit * 2);
     left: auto;
   }

package/components/select/select.css

@@ -23,12 +23,12 @@
 
   text-align: left;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     text-align: right;
     direction: ltr;
   }
 
-  @nest .toolbar & {
+  .toolbar & {
     height: calc(4 * unit);
     margin: unit 0;
   }
@@ -50,7 +50,7 @@
 
   line-height: normal;
 
-  @nest .inputMode & {
+  .inputMode & {
     font-size: var(--ring-font-size);
   }
 }
@@ -163,7 +163,7 @@
   vertical-align: calc(0 - unit);
 }
 
-.buttonValue:global(.focus-visible) {
+.buttonValue:focus-visible {
   box-shadow: button-shadow var(--ring-main-color);
 }
 
@@ -171,6 +171,10 @@
   box-shadow: button-shadow var(--ring-main-color);
 }
 
+.buttonValueEmpty.buttonValueEmpty {
+  color: var(--ring-disabled-color);
+}
+
 .heightS .buttonValue {
   font-size: var(--ring-font-size);
 }
@@ -183,7 +187,7 @@
 
 .select:hover .value,
 .select:hover .icons,
-:global(.focus-visible) + .icons,
+:focus-visible + .icons,
 .value:focus,
 .value:focus + .icons,
 .open,