@jetbrains/ring-ui 7.0.0-beta.9 → 7.0.1

package/components/popup/position.js

@@ -5,12 +5,12 @@ function getScrollingCoordinates(container) {
     if (container !== null) {
         return {
             top: container.scrollTop,
-            left: container.scrollLeft
+            left: container.scrollLeft,
         };
     }
     return {
         top: getDocumentScrollTop(),
-        left: getDocumentScrollLeft()
+        left: getDocumentScrollLeft(),
     };
 }
 function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
@@ -36,13 +36,11 @@ function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
         [Directions.LEFT_CENTER]: { left: popupLeft - offset, top: popupVerticalCenter },
         [Directions.RIGHT_BOTTOM]: { left: anchorRight + offset, top: anchorTop },
         [Directions.RIGHT_TOP]: { left: anchorRight + offset, top: popupBottomToTop },
-        [Directions.RIGHT_CENTER]: { left: anchorRight + offset, top: popupVerticalCenter }
+        [Directions.RIGHT_CENTER]: { left: anchorRight + offset, top: popupVerticalCenter },
     };
 }
 function verticalOverflow(styles, scrollingCoordinates, attrs) {
-    const containerHeight = attrs.container !== null
-        ? attrs.container.clientHeight
-        : getWindowHeight();
+    const containerHeight = attrs.container !== null ? attrs.container.clientHeight : getWindowHeight();
     const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
     const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
     const topOverflow = Math.max(viewportMinX - styles.top, 0);
@@ -70,13 +68,13 @@ export const positionPropKeys = [
     'left',
     'offset',
     'maxHeight',
-    'minWidth'
+    'minWidth',
 ];
 const defaultcontainerRect = {
     top: 0,
-    left: 0
+    left: 0,
 };
-function handleTopOffScreen({ sidePadding, styles, anchorRect, maxHeight, popupScrollHeight, direction, scroll }) {
+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);
@@ -84,10 +82,8 @@ function handleTopOffScreen({ sidePadding, styles, anchorRect, maxHeight, popupS
         return styles;
     }
     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 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;
@@ -99,9 +95,7 @@ export function maxHeightForDirection(direction, anchorNode, containerNode) {
     const container = containerNode || document.documentElement;
     const domRect = anchorNode.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
-    const containerTop = domRect.top < 0
-        ? containerRect.top
-        : Math.max(containerRect.top, 0);
+    const containerTop = domRect.top < 0 ? containerRect.top : Math.max(containerRect.top, 0);
     const topMaxHeight = Math.max(domRect.top - containerTop, 0);
     const containerHeight = Math.max(containerRect.height, 
     // XXX
@@ -127,16 +121,16 @@ export function maxHeightForDirection(direction, anchorNode, containerNode) {
             return domRect.height + topMaxHeight;
         case Directions.RIGHT_CENTER:
         case Directions.LEFT_CENTER:
-            return (domRect.height / 2) + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
+            return domRect.height / 2 + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
         default:
             return null;
     }
 }
 export default function position(attrs) {
-    const { popup, anchor, container, directions, autoPositioning, sidePadding, top, left, offset, maxHeight, minWidth, autoCorrectTopOverflow = true } = attrs;
+    const { popup, anchor, container, directions, autoPositioning, sidePadding, top, left, offset, maxHeight, minWidth, autoCorrectTopOverflow = true, } = attrs;
     let styles = {
         top: 0,
-        left: 0
+        left: 0,
     };
     let chosenDirection = null;
     const containerRect = container !== null ? getRect(container) : defaultcontainerRect;
@@ -153,15 +147,14 @@ export default function position(attrs) {
             chosenDirection = directions[0];
         }
         else {
-            const sortedByIncreasingOverflow = directions.
+            const sortedByIncreasingOverflow = directions
                 // Fall back to the first option
-                concat(directions[0]).filter(direction => directionsMatrix[direction]).
-                map(direction => ({ styles: directionsMatrix[direction], direction })).
-                sort(({ styles: stylesA }, { styles: stylesB }) => {
-                const overflowA = verticalOverflow(stylesA, scroll, overflowAttrs) +
-                    horizontalOverflow(stylesA, scroll, overflowAttrs);
-                const overflowB = verticalOverflow(stylesB, scroll, overflowAttrs) +
-                    horizontalOverflow(stylesB, scroll, overflowAttrs);
+                .concat(directions[0])
+                .filter(direction => directionsMatrix[direction])
+                .map(direction => ({ styles: directionsMatrix[direction], direction }))
+                .sort(({ styles: stylesA }, { styles: stylesB }) => {
+                const overflowA = verticalOverflow(stylesA, scroll, overflowAttrs) + horizontalOverflow(stylesA, scroll, overflowAttrs);
+                const overflowB = verticalOverflow(stylesB, scroll, overflowAttrs) + horizontalOverflow(stylesB, scroll, overflowAttrs);
                 return overflowA - overflowB;
             });
             styles = sortedByIncreasingOverflow[0].styles;
@@ -189,7 +182,7 @@ export default function position(attrs) {
             maxHeight,
             direction: chosenDirection,
             popupScrollHeight: popup?.scrollHeight ?? 0,
-            scroll
+            scroll,
         });
     }
     if (minWidth === MinWidth.TARGET || minWidth === 'target') {

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

@@ -10,7 +10,7 @@ export default class PopupMenu extends Popup {
         ...List.defaultProps,
         ...Popup.defaultProps,
         renderOptimization: false,
-        closeOnSelect: false
+        closeOnSelect: false,
     };
     onSelect = (item, event) => {
         if (this.props.closeOnSelect) {

package/components/progress-bar/progress-bar.css

@@ -1,13 +1,10 @@
 @import "../global/variables.css";
 
-@value dark from "../global/variables_dark.css";
-
 :root {
   --ring-progress-bar-background-color: rgba(0, 0, 0, 0.2);
   --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.6);
 }
 
-.dark,
 :global(.ring-ui-theme-dark) {
   --ring-progress-bar-background-color: rgba(255, 255, 255, 0.3);
   --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.4);
@@ -58,20 +55,25 @@
     left: 0;
 
     content: "";
-    animation: progress-bar 2500ms linear infinite;
-
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--ring-progress-bar-line-background-color), rgba(0, 0, 0, 0));
+    animation: progress-bar-animation 2500ms linear infinite;
+
+    background-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0),
+      var(--ring-progress-bar-line-background-color),
+      rgba(0, 0, 0, 0)
+    );
     background-repeat: no-repeat;
   }
 
-  .staticLineColor &::after  {
+  .staticLineColor &::after {
     animation: none;
 
     background-image: var(--ring-progress-bar-line-background-color);
   }
 }
 
-@keyframes progress-bar {
+@keyframes progress-bar-animation {
   from {
     transform: translateX(-100%);
   }

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

@@ -41,9 +41,9 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
         value: number;
         label: string;
     };
-    progressbarWrapper?: (HTMLElement | null);
+    progressbarWrapper?: HTMLElement | null;
     progressbarWrapperRef: (el: HTMLElement | null) => void;
-    progressbar?: (HTMLElement | null);
+    progressbar?: HTMLElement | null;
     progressbarRef: (el: HTMLElement | null) => void;
     render(): import("react").JSX.Element;
 }

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

@@ -19,7 +19,7 @@ export default class ProgressBar extends PureComponent {
     static defaultProps = {
         max: 1.0,
         value: 0,
-        label: 'Progress'
+        label: 'Progress',
     };
     progressbarWrapper;
     progressbarWrapperRef = (el) => {
@@ -34,7 +34,7 @@ export default class ProgressBar extends PureComponent {
         const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
         const classes = classNames(styles.progressBar, className, {
             [styles.globalMode]: global,
-            [styles.staticLineColor]: staticColor
+            [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 }}/>

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

@@ -1,9 +1,6 @@
 @import "../global/variables.css";
 @import "../button/button.css";
 
-@value overInputZIndex: 2;
-@value inputGap: calc(var(--ring-unit) * 3);
-
 .queryAssist {
   --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
   --ring-input-padding-inline: var(--ring-unit);

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

@@ -22,8 +22,7 @@ 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 +
-    PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
+const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
 const ngModelStateField = 'query';
 function noop() { }
 function cleanText(text) {
@@ -75,7 +74,7 @@ export default class QueryAssist extends Component {
         onApplySuggestion: noop,
         onClear: noop,
         onFocusChange: noop,
-        size: Size.L
+        size: Size.L,
     };
     static getDerivedStateFromProps({ query }, { prevQuery }) {
         const nextState = { prevQuery: query };
@@ -90,10 +89,8 @@ export default class QueryAssist extends Component {
         const query = props.query || '';
         this.immediateState = {
             query,
-            caret: typeof props.caret === 'number' && Number.isFinite(props.caret)
-                ? props.caret
-                : query.length,
-            focus: Boolean(props.autoOpen || props.focus)
+            caret: typeof props.caret === 'number' && Number.isFinite(props.caret) ? props.caret : query.length,
+            focus: Boolean(props.autoOpen || props.focus),
         };
     }
     state = {
@@ -102,21 +99,18 @@ export default class QueryAssist extends Component {
         placeholderEnabled: !this.props.query,
         shortcuts: !!this.props.focus,
         suggestions: [],
-        showPopup: false
+        showPopup: false,
     };
     componentDidMount() {
         const query = this.props.query || '';
         this.immediateState = {
             query,
-            caret: typeof this.props.caret === 'number' && Number.isFinite(this.props.caret)
-                ? this.props.caret
-                : query.length,
-            focus: Boolean(this.props.autoOpen || this.props.focus)
+            caret: typeof this.props.caret === 'number' && Number.isFinite(this.props.caret) ? this.props.caret : query.length,
+            focus: Boolean(this.props.autoOpen || this.props.focus),
         };
         this.setupRequestHandler(this.props.delay);
-        if (this.props.autoOpen === 'force' || this.props.autoOpen && query.length > 0) {
-            this.requestHandler().
-                catch(noop);
+        if (this.props.autoOpen === 'force' || (this.props.autoOpen && query.length > 0)) {
+            this.requestHandler().catch(noop);
         }
         else {
             this.requestStyleRanges().catch(noop);
@@ -125,7 +119,7 @@ export default class QueryAssist extends Component {
         this._pushHistory(this.state);
     }
     shouldComponentUpdate(props, state) {
-        return state.query !== this.state.query ||
+        return (state.query !== this.state.query ||
             state.dirty !== this.state.dirty ||
             state.loading !== this.state.loading ||
             state.showPopup !== this.state.showPopup ||
@@ -138,7 +132,8 @@ export default class QueryAssist extends Component {
             props.focus !== this.props.focus ||
             props.actions !== this.props.actions ||
             props.loader !== this.props.loader ||
-            props.glass !== this.props.glass;
+            props.glass !== this.props.glass ||
+            props.className !== this.props.className);
     }
     componentDidUpdate(prevProps) {
         const { caret, delay, query } = this.props;
@@ -152,7 +147,7 @@ export default class QueryAssist extends Component {
         }
         if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
             this.immediateState.query = query;
-            if (query && (this.props.autoOpen === 'force' || prevProps.autoOpen && query.length > 0)) {
+            if (query && (this.props.autoOpen === 'force' || (prevProps.autoOpen && query.length > 0))) {
                 this.requestData?.();
             }
             else if (query) {
@@ -200,17 +195,16 @@ export default class QueryAssist extends Component {
     }
     setCaretPosition = (params = {}) => {
         const queryLength = this.immediateState.query != null ? this.immediateState.query.length : 0;
-        const newCaretPosition = this.immediateState.caret < queryLength
-            ? this.immediateState.caret
-            : queryLength;
+        const newCaretPosition = this.immediateState.caret < queryLength ? this.immediateState.caret : queryLength;
         if (params.fromContentEditable) {
             this.immediateState.selection = this.immediateState.selection
                 ? this.immediateState.selection
-                : this.state.query && this.state.query.length || null;
+                : (this.state.query && this.state.query.length) || null;
         }
         if (this.immediateState.focus && !this.props.disabled) {
             if (typeof this.immediateState.selection === 'number' &&
-                Number.isInteger(this.immediateState.selection) && this.immediateState.selection > -1) {
+                Number.isInteger(this.immediateState.selection) &&
+                this.immediateState.selection > -1) {
                 // Set to end of field value if newCaretPosition is inappropriate
                 this.caret?.setPosition(newCaretPosition >= 0 ? newCaretPosition : -1);
                 this.scrollInput();
@@ -227,8 +221,10 @@ export default class QueryAssist extends Component {
     };
     scrollInput() {
         const caretOffset = this.caret?.getOffset();
-        if (this.input?.clientWidth !== this.input?.scrollWidth && caretOffset != null &&
-            this.input?.clientWidth != null && caretOffset > this.input.clientWidth) {
+        if (this.input?.clientWidth !== this.input?.scrollWidth &&
+            caretOffset != null &&
+            this.input?.clientWidth != null &&
+            caretOffset > this.input.clientWidth) {
             this.input.scrollLeft += caretOffset;
         }
     }
@@ -254,10 +250,8 @@ export default class QueryAssist extends Component {
         const props = {
             dirty: true,
             query: this.getQuery(),
-            caret: typeof currentCaret === 'number'
-                ? currentCaret
-                : currentCaret?.position ?? 0,
-            focus: true
+            caret: typeof currentCaret === 'number' ? currentCaret : (currentCaret?.position ?? 0),
+            focus: true,
         };
         if (this.immediateState.query === props.query && !this.isComposing) {
             this.handleCaretMove(e);
@@ -275,12 +269,13 @@ export default class QueryAssist extends Component {
             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);
+            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 => {
+            ranges
+                .filter(r => r.start > originalIndex)
+                .forEach(r => {
                 r.start += diff;
             });
         }
@@ -323,7 +318,7 @@ export default class QueryAssist extends Component {
         if (queryIsSet && !queryIsSame) {
             this.historyStack.unshift({
                 query: state.query,
-                caret: this.caret?.getPosition({ avoidFocus: true }) ?? -1
+                caret: this.caret?.getPosition({ avoidFocus: true }) ?? -1,
             });
         }
     }
@@ -351,10 +346,8 @@ export default class QueryAssist extends Component {
             return;
         }
         const currentCaret = this.caret?.getPosition();
-        const caret = typeof currentCaret === 'number'
-            ? currentCaret
-            : currentCaret?.position ?? 0;
-        const popupHidden = (!this.state.showPopup) && e.type === 'click';
+        const caret = typeof currentCaret === 'number' ? currentCaret : (currentCaret?.position ?? 0);
+        const popupHidden = !this.state.showPopup && e.type === 'click';
         if (!this.props.disabled && (caret !== this.immediateState.caret || popupHidden)) {
             this.immediateState.prevCaret = this.immediateState.caret;
             this.immediateState.caret = caret;
@@ -370,8 +363,7 @@ export default class QueryAssist extends Component {
     handleStyleRangesResponse = ({ suggestions, ...restProps }) => this.handleResponse(restProps);
     handleResponse = ({ query = '', caret = 0, styleRanges, suggestions = [] }, afterCompletion = false) => new Promise((resolve, reject) => {
         if (query === this.getQuery() &&
-            (caret === this.immediateState.caret ||
-                this.immediateState.caret === undefined)) {
+            (caret === this.immediateState.caret || this.immediateState.caret === undefined)) {
             // Do not setState on unmounted component
             if (!this.node) {
                 return;
@@ -382,7 +374,7 @@ export default class QueryAssist extends Component {
                 placeholderEnabled: !query,
                 query,
                 suggestions,
-                showPopup: !!suggestions.length && (this.props.autoOpen === 'force' || !afterCompletion)
+                showPopup: !!suggestions.length && (this.props.autoOpen === 'force' || !afterCompletion),
             };
             this.immediateState.suggestionsQuery = query;
             // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
@@ -419,7 +411,7 @@ export default class QueryAssist extends Component {
             prevCaret: currentCaret,
             caret: suggestion.caret ?? 0,
             selection: suggestion.caret ?? 0,
-            query: query.substr(0, suggestion.completionStart) + prefix + suggestion.option + suffix
+            query: query.substr(0, suggestion.completionStart) + prefix + suggestion.option + suffix,
         };
         if (typeof replace === 'boolean' && replace) {
             state.query += this.immediateState.query.substr(suggestion.completionEnd ?? 0);
@@ -434,7 +426,7 @@ export default class QueryAssist extends Component {
         if (state.query !== this.immediateState.query) {
             this.setState({
                 placeholderEnabled: !state.query,
-                query: state.query
+                query: state.query,
             });
         }
         this.immediateState = Object.assign(state, focusState);
@@ -449,18 +441,16 @@ export default class QueryAssist extends Component {
         if (!query) {
             return Promise.reject(new Error('Query is empty'));
         }
-        return this.sendRequest({ query, caret, omitSuggestions: true }).
-            then(this.handleStyleRangesResponse).
-            catch(noop);
+        return this.sendRequest({ query, caret, omitSuggestions: true }).then(this.handleStyleRangesResponse).catch(noop);
     };
     requestHandler = (afterCompletion = false) => {
         if (this.props.disabled) {
             return Promise.reject(new Error('QueryAssist(@jetbrains/ring-ui): null exception'));
         }
         const { query, caret } = this.immediateState;
-        return this.sendRequest({ query, caret }).
-            then(data => this.handleResponse(data, afterCompletion)).
-            catch(noop);
+        return this.sendRequest({ query, caret })
+            .then(data => this.handleResponse(data, afterCompletion))
+            .catch(noop);
     };
     sendRequest(params) {
         const value = this.props.dataSource(params);
@@ -470,16 +460,16 @@ export default class QueryAssist extends Component {
         const timeout = window.setTimeout(() => {
             if (this.node) {
                 this.setState({
-                    loading: true
+                    loading: true,
                 });
             }
             if (params.query === this.immediateState.query) {
                 this.closePopup();
             }
         }, CLOSE_POPUP_TIMEOUT);
-        dataPromise.
-            then(() => window.clearTimeout(timeout)).
-            catch(() => {
+        dataPromise
+            .then(() => window.clearTimeout(timeout))
+            .catch(() => {
             window.clearTimeout(timeout);
             this.setState({ loading: false });
         });
@@ -494,16 +484,12 @@ export default class QueryAssist extends Component {
         // First suggestion should be enough?
         const suggestion = suggestions && suggestions[0];
         // Check if suggestion begins not from the end
-        const completionStart = suggestion &&
-            suggestion.completionStart !== suggestion.completionEnd &&
-            suggestion.completionStart;
-        const inputChildren = this.input.firstChild instanceof Element &&
-            this.input.firstChild.children;
+        const completionStart = suggestion && suggestion.completionStart !== suggestion.completionEnd && suggestion.completionStart;
+        const inputChildren = this.input.firstChild instanceof Element && this.input.firstChild.children;
         const completionStartNode = inputChildren &&
             typeof completionStart === 'number' &&
             inputChildren[Math.min(completionStart, inputChildren.length - 1)];
-        let offset = completionStartNode &&
-            (getRect(completionStartNode).right - getRect(this.input).left);
+        let offset = completionStartNode && getRect(completionStartNode).right - getRect(this.input).left;
         if (!offset) {
             const caret = this.caret?.getOffset() ?? 0;
             // Do not compensate caret in the beginning of field
@@ -539,7 +525,7 @@ export default class QueryAssist extends Component {
             dirty: false,
             caret: 0,
             query: '',
-            focus: true
+            focus: true,
         };
         this.props.onChange(state);
         this.props.onClear();
@@ -548,7 +534,7 @@ export default class QueryAssist extends Component {
             dirty: false,
             query: '',
             placeholderEnabled: true,
-            loading: false
+            loading: false,
         });
     };
     blurInput() {
@@ -586,7 +572,7 @@ export default class QueryAssist extends Component {
             description,
             group,
             rgItemType: ITEM,
-            data: suggestion
+            data: suggestion,
         };
     }
     renderSuggestions() {
@@ -612,16 +598,17 @@ export default class QueryAssist extends Component {
                 }
             });
         }
-        return query && Array.from(query).map((letter, index, letters) => {
-            const className = classNames(styles.letter, classes[index] || LETTER_DEFAULT_CLASS);
-            const dataTest = (letters.length - 1 === index)
-                ? 'ring-query-assist-last-letter'
-                : null;
-            // \u00a0 === &nbsp;
-            return (<span 
-            // eslint-disable-next-line react/no-array-index-key
-            key={index + letter} className={className} data-test={dataTest}>{letter === ' ' ? '\u00a0' : letter}</span>);
-        });
+        return (query &&
+            Array.from(query).map((letter, index, letters) => {
+                const className = classNames(styles.letter, classes[index] || LETTER_DEFAULT_CLASS);
+                const dataTest = letters.length - 1 === index ? 'ring-query-assist-last-letter' : null;
+                // \u00a0 === &nbsp;
+                return (<span 
+                // eslint-disable-next-line react/no-array-index-key
+                key={index + letter} className={className} data-test={dataTest}>
+            {letter === ' ' ? '\u00a0' : letter}
+          </span>);
+            }));
     }
     setFocus(focus) {
         this.setState({ shortcuts: !!focus });
@@ -677,11 +664,11 @@ export default class QueryAssist extends Component {
         left: noop,
         space: noop,
         home: noop,
-        end: noop
+        end: noop,
     };
     listShortcutsMap = {
         home: noop,
-        end: noop
+        end: noop,
     };
     renderActions() {
         const actions = [...(this.props.actions || [])];
@@ -703,44 +690,46 @@ export default class QueryAssist extends Component {
             [styles.queryAssist]: true,
             [styles.withIcon]: (renderGlass && !huge) || renderLoader,
             [styles.huge]: huge,
-            [styles.queryAssistDisabled]: this.props.disabled
+            [styles.queryAssistDisabled]: this.props.disabled,
         });
         const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
-            [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
+            [styles.inputGap]: actions.length || (this.isRenderingGlassOrLoader() && !glass),
             [styles.inputGap2]: actions.length === 2, // TODO: replace with flex-box layout
-            [styles.inputRevertOrder]: !glass || huge
+            [styles.inputRevertOrder]: !glass || huge,
         });
         const placeholderStyles = classNames({
             [styles.placeholder]: true,
             [styles.hugePlaceholder]: huge,
-            [styles.withoutGlass]: !glass || (!renderLoader && 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}/>)}
+              {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
+                        [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>
+             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}>
                   {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} 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)}/>