@jetbrains/ring-ui 6.0.3-beta.0 → 6.0.3

package/components/login-dialog/login-dialog.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .iFrame {
   overflow: hidden;
 
@@ -21,5 +19,5 @@
   top: 0;
   right: 0;
 
-  padding: unit;
+  padding: var(--ring-unit);
 }

package/components/login-dialog/service.js

@@ -1,15 +1,16 @@
 import React from 'react';
-import { render, unmountComponentAtNode } from '../global/react-render-adapter';
+import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 import LoginDialog from './login-dialog';
 const containerElement = document.createElement('div');
+const reactRoot = createRoot(containerElement);
 /**
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
-    render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+    reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
         <LoginDialog {...props}/>
-      </ControlsHeightContext.Provider>), containerElement);
+      </ControlsHeightContext.Provider>));
 }
 function noop() { }
 export default function showAuthDialog(props = { onCancel: noop }) {
@@ -18,6 +19,6 @@ export default function showAuthDialog(props = { onCancel: noop }) {
         show: true
     });
     return () => {
-        unmountComponentAtNode(containerElement);
+        reactRoot.unmount();
     };
 }

package/components/markdown/markdown.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value p-margin: 10px;
 
 .inline {
@@ -50,7 +49,7 @@
   }
 
   & blockquote {
-    padding: 0 0 0 calc(2 * unit);
+    padding: 0 0 0 calc(2 * var(--ring-unit));
 
     color: var(--ring-secondary-color);
     box-shadow: inset 2px 0 0 var(--ring-line-color);
@@ -60,7 +59,7 @@
   }
 
   & ul {
-    padding: 0 0 0 calc(2 * unit);
+    padding: 0 0 0 calc(2 * var(--ring-unit));
   }
 
   & ol {
@@ -73,4 +72,55 @@
   & ul {
     list-style-type: none;
   }
+
+  & pre {
+    position: relative;
+
+    padding: calc(var(--ring-unit) * 3) calc(var(--ring-unit) * 2);
+
+    white-space: pre;
+    tab-size: 2;
+
+    border-radius: var(--ring-border-radius);
+    background-color: rgba(var(--ring-tag-background-components), 0.5);
+
+    font-family: var(--ring-font-family-monospace);
+
+    &:first-child {
+      margin-top: calc(var(--ring-unit) * 4);
+    }
+
+    &:last-child {
+      margin-bottom: calc(var(--ring-unit) * 4);
+    }
+  }
+
+  & code {
+    padding: 2px 4px;
+
+    white-space: pre-wrap;
+
+    color: var(--ring-text-color);
+
+    border-radius: var(--ring-border-radius-small);
+
+    font-family: var(--ring-font-family-monospace);
+    font-size: var(--ring-font-size);
+  }
+
+  & :not(pre) > code {
+    background-color: var(--ring-disabled-background-color);
+  }
+
+  & pre > code {
+    display: block;
+
+    padding: 0;
+
+    white-space: inherit;
+
+    color: var(--ring-code-color);
+
+    font-size: var(--ring-font-size);
+  }
 }

package/components/markdown/markdown.d.ts

@@ -1,15 +1,12 @@
-import React, { PureComponent } from 'react';
-import { Options } from 'react-markdown';
-export interface BaseMarkdownProps {
+import React, { PureComponent, ReactNode } from 'react';
+export interface MarkdownProps {
     inline?: boolean | null | undefined;
-    plugins?: Options['remarkPlugins'];
+    children: ReactNode;
+    className?: string | null | undefined;
 }
-export type MarkdownProps = Options & BaseMarkdownProps;
 /**
   * @name Markdown
 */
 export default class Markdown extends PureComponent<MarkdownProps> {
     render(): React.JSX.Element;
 }
-declare const md: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
-export { md };

package/components/markdown/markdown.js

@@ -1,44 +1,25 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import ReactMarkdown from 'react-markdown';
 import classNames from 'classnames';
-import RemarkBreaks from 'remark-breaks';
-import RemarkGFM from 'remark-gfm';
-import normalizeIndent from '../global/normalize-indent';
-import trivialTemplateTag from '../global/trivial-template-tag';
-import Code from './code';
-import Link from './link';
-import Heading from './heading';
+import headingStyles from '../heading/heading.css';
+import linkStyles from '../link/link.css';
 import styles from './markdown.css';
 /**
   * @name Markdown
 */
 export default class Markdown extends PureComponent {
     render() {
-        const { className, components, inline, children, plugins = [], remarkPlugins = [], ...restProps } = this.props;
-        const classes = classNames(className, {
+        const { className, children, inline } = this.props;
+        const classes = classNames(className, headingStyles.contentWithHeadings, linkStyles.withLinks, {
             [styles.markdown]: !inline,
             [styles.inline]: inline
         });
-        return (<ReactMarkdown className={classes} remarkPlugins={[RemarkBreaks, RemarkGFM, ...plugins, ...remarkPlugins]} components={{
-                a: Link,
-                code: Code,
-                h1: Heading,
-                h2: Heading,
-                h3: Heading,
-                h4: Heading,
-                h5: Heading,
-                h6: Heading,
-                ...components
-            }} {...restProps}>{normalizeIndent(children)}</ReactMarkdown>);
+        return (<div className={classes}>
+        {children}
+      </div>);
     }
 }
 Markdown.propTypes = {
     inline: PropTypes.bool,
-    children: PropTypes.string,
-    className: PropTypes.string,
-    components: PropTypes.object,
-    plugins: PropTypes.array
+    className: PropTypes.string
 };
-const md = trivialTemplateTag(source => <Markdown>{source}</Markdown>);
-export { md };

package/components/message/message.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value padding: calc(unit * 1.5);
-
 .container {
   display: inline;
 }
@@ -10,9 +7,9 @@
 .message {
   overflow: visible;
 
-  max-width: calc(unit * 40);
+  max-width: calc(var(--ring-unit) * 40);
 
-  padding: padding padding calc(unit * 2) calc(unit * 5);
+  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 5);
 
   text-align: left;
 
@@ -24,7 +21,7 @@
 .icon {
   position: absolute;
   top: 10px;
-  left: padding;
+  left: calc(var(--ring-unit) * 1.5);
 }
 
 .title {
@@ -36,7 +33,7 @@
 }
 
 .description {
-  margin: calc(unit / 2) 0 0;
+  margin: calc(var(--ring-unit) / 2) 0 0;
 
   color: var(--ring-text-color);
 
@@ -45,7 +42,7 @@
 }
 
 .button {
-  margin-top: padding;
+  margin-top: calc(var(--ring-unit) * 1.5);
 }
 
 .tail {

package/components/old-browsers-message/old-browsers-message.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :global(.ring-old-browsers-message) {
   display: block;
 
@@ -13,7 +11,7 @@
 
   font-family: -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", Arial, sans-serif;
   font-size: var(--ring-font-size-larger);
-  line-height: calc(2.5 * unit);
+  line-height: calc(2.5 * var(--ring-unit));
 }
 
 :global(.ring-old-browsers-message_hidden) {
@@ -24,5 +22,5 @@
   cursor: pointer;
   user-select: none;
 
-  font-size: calc(3 * unit);
+  font-size: calc(3 * var(--ring-unit));
 }

package/components/pager/pager.css

@@ -1,19 +1,17 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .pager {
   user-select: none;
 }
 
 .links {
-  margin-bottom: calc(unit * 2);
+  margin-bottom: calc(var(--ring-unit) * 2);
 }
 
 .link {
   display: inline-block;
 
-  margin-right: calc(unit * 2);
+  margin-right: calc(var(--ring-unit) * 2);
 }
 
 .linkDisabled {

package/components/pager/pager.js

@@ -107,14 +107,8 @@ export default class Pager extends PureComponent {
         const prevIcon = (<Icon glyph={chevronLeftIcon} key="icon"/>);
         const prevText = this.props.translations?.previousPage ?? translate('previousPage');
         const nextText = this.props.translations?.nextPage ?? translate('nextPage');
-        const nextLinkContent = (WrapText) => [
-            <span key="text"><WrapText>{nextText}</WrapText></span>,
-            nextIcon
-        ];
-        const prevLinkContent = (WrapText) => [
-            prevIcon,
-            <span key="text"><WrapText>{prevText}</WrapText></span>
-        ];
+        const nextLinkContent = [<span key="text">{nextText}</span>, nextIcon];
+        const prevLinkContent = [prevIcon, <span key="text">{prevText}</span>];
         const prevLinkHref = this.generateHref(this.props.currentPage - 1);
         const nextLinkHref = this.generateHref(this.props.currentPage + 1);
         const disabledLinkClasses = classNames({

package/components/panel/panel.css

@@ -1,14 +1,12 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .panel {
   composes: panel from "../dialog/dialog.css"; /* TODO: Invert dependency using :externals CSS Modules selector */
 
   position: relative;
 
-  margin-top: calc(unit * 2);
-  padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);
+  margin-top: calc(var(--ring-unit) * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
 
   border-top: 1px solid var(--ring-popup-border-color);
 
@@ -17,6 +15,6 @@
   }
 
   & > button:not(:last-child) {
-    margin-right: unit;
+    margin-right: var(--ring-unit);
   }
 }

package/components/popup/popup.js

@@ -287,9 +287,9 @@ Popup.propTypes = {
     children: PropTypes.node.isRequired,
     dontCloseOnAnchorClick: PropTypes.bool,
     shortcuts: PropTypes.bool,
-    keepMounted: PropTypes.bool,
+    keepMounted: PropTypes.bool, // pass this prop to preserve the popup's DOM state while hidden
     'data-test': PropTypes.string,
-    client: PropTypes.bool,
+    client: PropTypes.bool, // true means that it's never used in SSR
     directions: PropTypes.arrayOf(PropTypes.string),
     autoPositioning: PropTypes.bool,
     autoCorrectTopOverflow: PropTypes.bool,
@@ -298,7 +298,7 @@ Popup.propTypes = {
     maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minWidth: PropTypes.number,
     sidePadding: PropTypes.number,
-    attached: PropTypes.bool,
+    attached: PropTypes.bool, // Popup adjacent to an input, without upper border and shadow
     onMouseDown: PropTypes.func,
     onMouseUp: PropTypes.func,
     onMouseOver: PropTypes.func,

package/components/popup/position.js

@@ -99,7 +99,10 @@ 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 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
     // If container is the document element

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

@@ -12,7 +12,17 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
     static isItemType: <T_1>(listItemType: import("../list/consts").Type, item: ListDataItem<T_1>) => boolean;
     static ListProps: {
         Type: typeof import("../list/consts").Type;
-        Dimension: typeof import("../list/consts").Dimension;
+        Dimension: {
+            ITEM_PADDING: number;
+            ITEM_HEIGHT: number;
+            COMPACT_ITEM_HEIGHT: number;
+            SEPARATOR_HEIGHT: number;
+            SEPARATOR_FIRST_HEIGHT: number;
+            SEPARATOR_TEXT_HEIGHT: number;
+            TITLE_HEIGHT: number;
+            INNER_PADDING: number;
+            MARGIN: number;
+        };
     };
     static defaultProps: {
         renderOptimization: boolean;
@@ -56,5 +66,15 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
 export type PopupMenuAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof PopupMenu, PopupMenuProps<T>>;
 export declare const ListProps: {
     Type: typeof import("../list/consts").Type;
-    Dimension: typeof import("../list/consts").Dimension;
+    Dimension: {
+        ITEM_PADDING: number;
+        ITEM_HEIGHT: number;
+        COMPACT_ITEM_HEIGHT: number;
+        SEPARATOR_HEIGHT: number;
+        SEPARATOR_FIRST_HEIGHT: number;
+        SEPARATOR_TEXT_HEIGHT: number;
+        TITLE_HEIGHT: number;
+        INNER_PADDING: number;
+        MARGIN: number;
+    };
 };

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

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 
 :root {
   --ring-progress-bar-background-color: rgba(0, 0, 0, 0.2);
@@ -20,8 +19,8 @@
 
   overflow: hidden;
 
-  height: calc(unit / 2);
-  margin-bottom: calc(unit / 2);
+  height: calc(var(--ring-unit) / 2);
+  margin-bottom: calc(var(--ring-unit) / 2);
 
   border-radius: 2px;
   background-color: var(--ring-progress-bar-background-color);
@@ -49,7 +48,7 @@
   border-radius: 2px;
   background-color: var(--ring-main-color);
 
-  line-height: calc(unit / 2);
+  line-height: calc(var(--ring-unit) / 2);
 
   &::after {
     position: absolute;
@@ -63,6 +62,12 @@
 
     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 &  {
+      animation: none;
+
+      background-image: var(--ring-progress-bar-line-background-color);
+    }
   }
 }
 

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

@@ -5,6 +5,7 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
     value: number;
     label: string;
     global?: boolean | null | undefined;
+    staticColor?: boolean;
 }
 /**
  * @name Progress Bar
@@ -43,6 +44,11 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
          * @type {number}
          */
         value: PropTypes.Requireable<number>;
+        /**
+         * Disables Disabled progress bar color animation and sets it to static color.
+         * @type {boolean}
+         */
+        staticColor: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         max: number;

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

@@ -42,7 +42,12 @@ export default class ProgressBar extends PureComponent {
          * A floating point number that specifies current task completion rate.
          * @type {number}
          */
-        value: PropTypes.number
+        value: PropTypes.number,
+        /**
+         * Disables Disabled progress bar color animation and sets it to static color.
+         * @type {boolean}
+         */
+        staticColor: PropTypes.bool
     };
     static defaultProps = {
         max: 1.0,
@@ -58,10 +63,11 @@ export default class ProgressBar extends PureComponent {
         this.progressbar = el;
     };
     render() {
-        const { className, global, max, value, label, ...otherProps } = this.props;
+        const { className, global, max, value, label, staticColor, ...otherProps } = this.props;
         const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
         const classes = classNames(styles.progressBar, className, {
-            [styles.globalMode]: global
+            [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 }}/>

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

@@ -1,13 +1,12 @@
 @import "../global/variables.css";
 @import "../button/button.css";
 
-@value unit from "../global/global.css";
 @value overInputZIndex: 2;
-@value inputGap: calc(unit * 3);
+@value inputGap: calc(var(--ring-unit) * 3);
 
 .queryAssist {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: unit;
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
+  --ring-input-padding-inline: var(--ring-unit);
   --ring-input-padding-block: 1px;
 
   position: relative;

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

@@ -17,6 +17,7 @@ export interface FocusChange {
 }
 export interface QueryAssistChange {
     query: string;
+    prevCaret?: number | null;
     caret: number;
     focus?: boolean;
     selection?: Position | number | null;
@@ -296,36 +297,10 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     clearRef: (node: ComponentRef<typeof Button> | null) => void;
     shortcutsScope: string;
     shortcutsMap: ShortcutsMap;
+    listShortcutsMap: ShortcutsMap;
     renderActions(): React.ReactNode[];
     render(): React.JSX.Element;
 }
 export type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
-export declare const RerenderableQueryAssist: {
-    new (props: QueryAssistProps): {
-        _propsCache: QueryAssistProps & React.RefAttributes<unknown>;
-        rerender(props?: Partial<QueryAssistProps>, callback?: (() => void) | undefined): void;
-        node?: HTMLElement | null | undefined;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<QueryAssistProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        render(): React.ReactNode;
-        readonly props: Readonly<QueryAssistProps>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<QueryAssistProps>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<QueryAssistProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<QueryAssistProps>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<QueryAssistProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<QueryAssistProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<QueryAssistProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<QueryAssistProps>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-};
+export declare const RerenderableQueryAssist: React.ForwardRefExoticComponent<QueryAssistProps & React.RefAttributes<QueryAssist>>;
 export {};

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

@@ -239,11 +239,12 @@ export default class QueryAssist extends Component {
         this.setupRequestHandler(delay);
         const shouldSetCaret = typeof caret === 'number' && caret !== prevProps.caret;
         if (shouldSetCaret) {
+            this.immediateState.prevCaret = prevProps.caret;
             this.immediateState.caret = caret;
         }
         if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
             this.immediateState.query = query;
-            if (prevProps.autoOpen && query?.length > 0) {
+            if (query && (this.props.autoOpen === 'force' || prevProps.autoOpen && query.length > 0)) {
                 this.requestData?.();
             }
             else if (query) {
@@ -447,13 +448,14 @@ export default class QueryAssist extends Component {
             : 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;
             this.scrollInput();
             if (this.immediateState.query.length > 0) {
                 this.requestData?.();
             }
         }
-        if (this.immediateState.query.length < 1) {
+        if (this.props.autoOpen !== 'force' && this.immediateState.query.length < 1) {
             this.setState({ showPopup: false });
         }
     };
@@ -472,7 +474,7 @@ export default class QueryAssist extends Component {
                 placeholderEnabled: !query,
                 query,
                 suggestions,
-                showPopup: !!suggestions.length && !afterCompletion
+                showPopup: !!suggestions.length && (this.props.autoOpen === 'force' || !afterCompletion)
             };
             this.immediateState.suggestionsQuery = query;
             // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
@@ -506,6 +508,7 @@ export default class QueryAssist extends Component {
         const prefix = suggestion.prefix || '';
         const suffix = suggestion.suffix || '';
         const state = {
+            prevCaret: currentCaret,
             caret: suggestion.caret ?? 0,
             selection: suggestion.caret ?? 0,
             query: query.substr(0, suggestion.completionStart) + prefix + suggestion.option + suffix
@@ -768,6 +771,10 @@ export default class QueryAssist extends Component {
         home: noop,
         end: noop
     };
+    listShortcutsMap = {
+        home: noop,
+        end: noop
+    };
     renderActions() {
         const actions = [...(this.props.actions || [])];
         const renderClear = this.props.clear && !!this.state.query;
@@ -793,7 +800,7 @@ export default class QueryAssist extends Component {
         const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-            [styles.inputGap2]: actions.length === 2,
+            [styles.inputGap2]: actions.length === 2, // TODO: replace with flex-box layout
             [styles.inputRevertOrder]: !glass || huge
         });
         const placeholderStyles = classNames({
@@ -827,7 +834,7 @@ export default class QueryAssist extends Component {
                     ? (<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} 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"/>