@jetbrains/ring-ui 5.0.0-beta.3 → 5.0.0-beta.7

package/components/markdown/link.d.ts

@@ -1,16 +1,12 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
-export interface MarkdownLinkProps {
-    href?: string | undefined;
-    title?: string | undefined;
-    children?: ReactNode;
-}
+import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
 declare const MarkdownLink: {
-    ({ href, title, children }: MarkdownLinkProps): JSX.Element;
+    ({ href, title, children }: JSX.IntrinsicElements['a'] & ReactMarkdownProps): JSX.Element;
     propTypes: {
         href: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Validator<any[]>;
     };
 };
 export default MarkdownLink;

package/components/markdown/link.js

@@ -5,6 +5,6 @@ const MarkdownLink = ({ href, title, children }) => <Link href={href} title={tit
 MarkdownLink.propTypes = {
     href: PropTypes.string,
     title: PropTypes.string,
-    children: PropTypes.node
+    children: PropTypes.array.isRequired
 };
 export default MarkdownLink;

package/components/markdown/markdown.d.ts

@@ -1,10 +1,9 @@
 import { PureComponent } from 'react';
-import { ReactMarkdownProps } from 'react-markdown';
+import { Options } from 'react-markdown';
 export interface BaseMarkdownProps {
-    source: string;
     inline?: boolean | null | undefined;
 }
-export declare type MarkdownProps = ReactMarkdownProps & BaseMarkdownProps;
+export declare type MarkdownProps = Options & BaseMarkdownProps;
 /**
   * @name Markdown
 */

package/components/markdown/markdown.js

@@ -15,27 +15,30 @@ import styles from './markdown.css';
 */
 export default class Markdown extends PureComponent {
     render() {
-        const { className, renderers, inline, source, plugins = [], ...restProps } = this.props;
+        const { className, components, inline, children, plugins = [], ...restProps } = this.props;
         const classes = classNames(className, {
             [styles.markdown]: !inline,
             [styles.inline]: inline
         });
-        return (<ReactMarkdown className={classes} source={normalizeIndent(source)} plugins={[RemarkBreaks, RemarkGFM, ...plugins]} renderers={{
-                link: Link,
-                linkReference: Link,
+        return (<ReactMarkdown className={classes} plugins={[RemarkBreaks, RemarkGFM, ...plugins]} components={{
+                a: Link,
                 code: Code,
-                inlineCode: Code,
-                heading: Heading,
-                ...renderers
-            }} {...restProps}/>);
+                h1: Heading,
+                h2: Heading,
+                h3: Heading,
+                h4: Heading,
+                h5: Heading,
+                h6: Heading,
+                ...components
+            }} {...restProps}>{normalizeIndent(children)}</ReactMarkdown>);
     }
 }
 Markdown.propTypes = {
     inline: PropTypes.bool,
-    source: PropTypes.string,
+    children: PropTypes.string,
     className: PropTypes.string,
-    renderers: PropTypes.object,
+    components: PropTypes.object,
     plugins: PropTypes.array
 };
-const md = trivialTemplateTag(source => <Markdown {...{ source }}/>);
+const md = trivialTemplateTag(source => <Markdown>{source}</Markdown>);
 export { md };

package/components/message/message.css

@@ -3,6 +3,10 @@
 @value unit from "../global/global.css";
 @value padding: calc(unit * 1.5);
 
+.container {
+  display: inline;
+}
+
 .message {
   overflow: visible;
 
@@ -12,7 +16,7 @@
 
   text-align: left;
 
-  color: var(--ring-dark-text-color);
+  color: var(--ring-active-text-color);
 
   border: none;
 
@@ -32,7 +36,7 @@
 
     border-radius: var(--ring-border-radius);
 
-    box-shadow: 0 2px 8px 0 var(--ring-message-shadow-color);
+    box-shadow: var(--ring-popup-shadow);
   }
 }
 
@@ -55,7 +59,7 @@
 
   margin: calc(unit / 2) 0 0;
 
-  color: var(--ring-dark-active-color);
+  color: var(--ring-text-color);
 }
 
 .button {

package/components/message/message.d.ts

@@ -3,6 +3,7 @@ import Popup, { PopupAttrs } from '../popup/popup';
 import { Directions } from '../popup/popup.consts';
 import { IconType } from '../icon/icon';
 import { ButtonAttrs } from '../button/button';
+import Theme from '../global/theme';
 export interface MessageTranslations {
     gotIt: string;
     dismiss: string;
@@ -11,6 +12,7 @@ export interface MessageProps {
     icon: string | IconType | null;
     directions: readonly Directions[];
     translations: MessageTranslations;
+    theme: Theme;
     title?: string | null | undefined;
     children?: ReactNode;
     className?: string | null | undefined;
@@ -36,6 +38,7 @@ export default class Message extends Component<MessageProps> {
             gotIt: string;
             dismiss: string;
         };
+        theme: Theme;
     };
     state: MessageState;
     static Directions: typeof Directions;

package/components/message/message.js

@@ -6,6 +6,8 @@ import Popup from '../popup/popup';
 import { Directions } from '../popup/popup.consts';
 import Icon from '../icon/icon';
 import Button from '../button/button';
+import Theme, { ThemeProvider } from '../global/theme';
+import darkStyles from '../global/variables_dark.css';
 import styles from './message.css';
 /**
   * @name Message
@@ -40,7 +42,8 @@ export default class Message extends Component {
         translations: {
             gotIt: 'Got it',
             dismiss: 'Dismiss'
-        }
+        },
+        theme: Theme.DARK
     };
     state = {};
     static Directions = Directions;
@@ -71,21 +74,25 @@ export default class Message extends Component {
         return offset;
     }
     render() {
-        const { children, className, tailClassName, title, icon, popupProps, buttonProps, onClose, onDismiss, translations } = this.props;
-        const classes = classNames(styles.message, className);
+        const { children, className, tailClassName, title, icon, popupProps, buttonProps, onClose, onDismiss, translations, theme } = this.props;
+        const classes = classNames(styles.message, className, {
+            [darkStyles.dark]: theme === Theme.DARK
+        });
         const tailClasses = classNames(styles.tail, tailClassName);
         const popupDirections = this.props.direction
             ? [this.props.direction]
             : this.props.directions;
         const { direction } = this.state;
         return (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classes} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
-        {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
+        <ThemeProvider theme={theme} passToPopups>
+          {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
 
-        {icon && <Icon className={styles.icon} glyph={icon}/>}
-        <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>
-        {children && <div className={styles.description}>{children}</div>}
-        {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations.gotIt}</Button>)}
-        {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
+          {icon && <Icon className={styles.icon} glyph={icon}/>}
+          <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>
+          {children && <div className={styles.description}>{children}</div>}
+          {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations.gotIt}</Button>)}
+          {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
+        </ThemeProvider>
       </Popup>);
     }
 }

package/components/pager/pager.js

@@ -182,10 +182,7 @@ export default class Pager extends PureComponent {
         {this.getPagerLinks()}
 
         <ButtonToolbar>
-          {start > 1 &&
-                (<ButtonGroup>
-            {this.getButton(1, this.props.translations.firstPage)}
-          </ButtonGroup>)}
+          {start > 1 && this.getButton(1, this.props.translations.firstPage)}
 
           <ButtonGroup>
             {start > 1 && this.getButton(start - 1, '...')}
@@ -197,10 +194,7 @@ export default class Pager extends PureComponent {
             {end === totalPages && this.props.openTotal && (<Button href={this.generateHref(end + 1)} disabled={this.props.loader} {...this.getClickProps(this.handleLoadMore(end + 1))}>{'...'}</Button>)}
           </ButtonGroup>
 
-          {lastPageButtonAvailable &&
-                (<ButtonGroup>
-            {this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations.lastPage)}
-          </ButtonGroup>)}
+          {lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations.lastPage)}
         </ButtonToolbar>
 
         {this.getPageSizeSelector()}

package/components/popup/popup.css

@@ -16,7 +16,7 @@
   border-radius: var(--ring-border-radius);
 
   background-color: var(--ring-popup-background-color);
-  box-shadow: 0 2px 16px 0 var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-popup-shadow);
 }
 
 .hidden {

package/components/popup/popup.target.d.ts

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 export declare const PopupTargetContext: React.Context<string | undefined>;
 export interface PopupTargetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    id: string;
     children: ReactNode | ((target: ReactNode) => ReactNode);
 }
 export declare const PopupTarget: React.ForwardRefExoticComponent<PopupTargetProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,21 +1,16 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 
-.light {
-  &.progressBar {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
+: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 {
-  &.progressBar {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-
-  & .line::after {
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0));
-  }
+  --ring-progress-bar-background-color: rgba(255, 255, 255, 0.3);
+  --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.4);
 }
 
 .progressBar {
@@ -28,6 +23,7 @@
   margin-bottom: calc(unit / 2);
 
   border-radius: 2px;
+  background-color: var(--ring-progress-bar-background-color);
 }
 
 .globalMode {
@@ -64,7 +60,7 @@
     content: "";
     animation: progress-bar 2500ms linear infinite;
 
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0));
+    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;
   }
 }

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

@@ -1,10 +1,8 @@
 import { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Theme from '../global/theme';
 export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
     max: number;
     value: number;
-    theme: Theme;
     label: string;
     global?: boolean | null | undefined;
 }
@@ -21,7 +19,6 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
     static toPercent(value: number, max: number): number;
     static propTypes: {
         label: PropTypes.Requireable<string>;
-        theme: PropTypes.Requireable<string>;
         /**
          * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
          * Should be placed directly inside body, will be positioned right below .ring-header
@@ -50,7 +47,6 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
     static defaultProps: {
         max: number;
         value: number;
-        theme: Theme;
         label: string;
     };
     progressbarWrapper?: (HTMLElement | null);

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

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Theme from '../global/theme';
 import styles from './progress-bar.css';
 /**
  * @name Progress Bar
@@ -20,7 +19,6 @@ export default class ProgressBar extends PureComponent {
     }
     static propTypes = {
         label: PropTypes.string,
-        theme: PropTypes.string,
         /**
          * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
          * Should be placed directly inside body, will be positioned right below .ring-header
@@ -49,7 +47,6 @@ export default class ProgressBar extends PureComponent {
     static defaultProps = {
         max: 1.0,
         value: 0,
-        theme: Theme.LIGHT,
         label: 'Progress'
     };
     progressbarWrapper;
@@ -61,11 +58,9 @@ export default class ProgressBar extends PureComponent {
         this.progressbar = el;
     };
     render() {
-        const { theme, className, global, max, value, label, ...otherProps } = this.props;
+        const { className, global, max, value, label, ...otherProps } = this.props;
         const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
         const classes = classNames(styles.progressBar, className, {
-            [styles.light]: theme === Theme.LIGHT,
-            [styles.dark]: theme === Theme.DARK,
             [styles.globalMode]: global
         });
         return (<div {...otherProps} className={classes} ref={this.progressbarWrapperRef}>

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

@@ -1,6 +1,7 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+import darkStyles from '../global/variables_dark.css';
 
 import RingProgressBar from './progress-bar-ng';
 
@@ -33,8 +34,8 @@ export const basic = () => {
         <div style="height: 25px; padding-top: 25px;">
           <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>
-        <div style="height: 25px; background: #000; padding-top: 25px;">
-          <rg-progress-bar label="'Progress'" value="ctrl.value" theme="'dark'" class="example-progress"></rg-progress-bar>
+        <div class="${darkStyles.dark}" style="height: 25px; background: var(--ring-content-background-color); padding-top: 25px;">
+          <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>
         <div style="height: 25px; background: #F0F0F0; padding-top: 25px;">
           <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>

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

@@ -1,72 +1,70 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 @value overInputZIndex: 2;
 @value inputGap: calc(unit * 3);
 
-.light {
-  &.queryAssist {
-    height: calc(unit * 3);
+.queryAssist {
+  height: calc(unit * 3);
 
-    background: var(--ring-content-background-color);
-  }
+  background: var(--ring-content-background-color);
+}
 
-  & .input {
-    height: calc(unit * 3 - 2px);
+.input {
+  height: calc(unit * 3 - 2px);
 
-    box-shadow: 0 0 0 1px var(--ring-borders-color);
+  box-shadow: 0 0 0 1px var(--ring-borders-color);
 
-    /* stylelint-disable-next-line selector-max-specificity */
-    &:not([disabled]):active,
-    /* stylelint-disable-next-line selector-max-specificity */
-    &:not([disabled]):focus {
-      border-color: transparent;
-      box-shadow: 0 0 0 1px var(--ring-main-color);
-    }
+  /* stylelint-disable-next-line selector-max-specificity */
+  &:not([disabled]):active,
+  &:not([disabled]):focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 1px var(--ring-main-color);
   }
+}
 
-  & .placeholder {
-    color: var(--ring-secondary-color);
-  }
+.placeholder {
+  color: var(--ring-secondary-color);
+}
 
-  & .letter-text {
-    color: var(--ring-warning-color);
-  }
+.letter-text {
+  color: var(--ring-warning-color);
+}
 
-  & .letterDefault,
-  & .letter-field-name {
-    color: var(--ring-text-color);
-  }
+.letterDefault,
+.letter-field-name {
+  color: var(--ring-text-color);
+}
 
-  & .letter-field-value {
-    color: var(--ring-link-color);
-  }
+.letter-field-value {
+  color: var(--ring-link-color);
+}
 
-  & .letter-operator {
-    color: var(--ring-secondary-color);
-  }
+.letter-operator {
+  color: var(--ring-secondary-color);
+}
 
-  & .letter-error {
-    padding-bottom: 1px;
+.letter-error {
+  padding-bottom: 1px;
 
-    border-bottom: 1px solid var(--ring-icon-error-color);
-  }
+  border-bottom: 1px solid var(--ring-icon-error-color);
+}
 
-  & .iconInner {
-    color: var(--ring-icon-secondary-color);
-  }
+.iconInner {
+  color: var(--ring-icon-secondary-color);
+}
 
-  & .highlight {
-    font-weight: 600;
-  }
+.highlight {
+  font-weight: 600;
+}
 
-  & .service {
-    color: var(--ring-secondary-color);
-  }
+.service {
+  color: var(--ring-secondary-color);
 }
 
 .dark {
-  &.queryAssist {
+  & .queryAssist {
     height: calc(unit * 4);
 
     font-size: 16px;
@@ -80,7 +78,7 @@
     color: var(--ring-search-color);
 
     border-top-width: 5px;
-    background: var(--ring-dark-selected-background-color);
+    background: var(--ring-selected-background-color);
 
     &:active,
     &:focus {
@@ -117,7 +115,7 @@
   }
 
   & .letter-field-value {
-    color: var(--ring-dark-text-color);
+    color: var(--ring-active-text-color);
   }
 
   & .letter-operator {
@@ -131,7 +129,7 @@
   }
 
   & .icon {
-    top: 8px;
+    top: 7px;
   }
 
   & .iconInner {
@@ -151,7 +149,7 @@
   }
 
   & .actions {
-    background-color: var(--ring-dark-selected-background-color);
+    background-color: var(--ring-selected-background-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
@@ -288,7 +286,7 @@
 .icon {
   position: absolute;
   z-index: overInputZIndex;
-  top: 4px;
+  top: 3px;
 
   box-sizing: border-box;
 
@@ -319,20 +317,6 @@
   left: auto;
 }
 
-.focusUnderline {
-  width: 0;
-  height: 2px;
-
-  transition: width 0.15s ease-out;
-
-  background: var(--ring-main-color);
-}
-
-.input:focus ~ .focusUnderline,
-.input:active ~ .focusUnderline {
-  width: 100%;
-}
-
 .input::-webkit-scrollbar {
   display: none;
 }

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

@@ -2,7 +2,6 @@ import React, { Component, ComponentRef, ReactNode, SyntheticEvent } from 'react
 import PropTypes from 'prop-types';
 import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
-import Theme from '../global/theme';
 import Button from '../button/button';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
@@ -34,7 +33,6 @@ export interface QueryAssistRequestParams {
     omitSuggestions?: boolean;
 }
 export interface QueryAssistProps {
-    theme: Theme;
     onApply: (change: QueryAssistChange) => void;
     onChange: (change: QueryAssistChange) => void;
     onApplySuggestion: (suggestion: QueryAssistSuggestion, change: QueryAssistChange) => void;
@@ -125,7 +123,6 @@ interface HistoryEntry {
  */
 export default class QueryAssist extends Component<QueryAssistProps> {
     static propTypes: {
-        theme: PropTypes.Requireable<string>;
         /**
          * Open suggestions popup during the initial render
          */
@@ -212,7 +209,6 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         'data-test': PropTypes.Requireable<string>;
     };
     static defaultProps: {
-        theme: Theme;
         onApply: typeof noop;
         onChange: typeof noop;
         onApplySuggestion: typeof noop;
@@ -230,7 +226,6 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     shouldComponentUpdate(props: QueryAssistProps, state: QueryAssistState): boolean;
     componentDidUpdate(prevProps: QueryAssistProps): void;
     static ngModelStateField: string;
-    static Theme: typeof Theme;
     immediateState: QueryAssistChange;
     requestData?: (afterCompletion?: boolean) => void;
     ngModelStateField: string;

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

@@ -14,7 +14,6 @@ import PopupMenu from '../popup-menu/popup-menu';
 import LoaderInline from '../loader-inline/loader-inline';
 import Shortcuts from '../shortcuts/shortcuts';
 import rerenderHOC from '../global/rerender-hoc';
-import Theme from '../global/theme';
 import Button from '../button/button';
 import QueryAssistSuggestions from './query-assist__suggestions';
 import styles from './query-assist.css';
@@ -66,7 +65,6 @@ function cleanText(text) {
  */
 export default class QueryAssist extends Component {
     static propTypes = {
-        theme: PropTypes.string,
         /**
          * Open suggestions popup during the initial render
          */
@@ -153,7 +151,6 @@ export default class QueryAssist extends Component {
         'data-test': PropTypes.string
     };
     static defaultProps = {
-        theme: Theme.LIGHT,
         onApply: noop,
         onChange: noop,
         onApplySuggestion: noop,
@@ -247,7 +244,6 @@ export default class QueryAssist extends Component {
         }
     }
     static ngModelStateField = ngModelStateField;
-    static Theme = Theme;
     immediateState;
     requestData;
     ngModelStateField = ngModelStateField;
@@ -756,11 +752,10 @@ export default class QueryAssist extends Component {
         return actions;
     }
     render() {
-        const { theme, glass, 'data-test': dataTest, className, useCustomItemRender } = this.props;
+        const { glass, 'data-test': dataTest, className, useCustomItemRender } = this.props;
         const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
         const renderLoader = this.props.loader !== false && this.state.loading;
         const renderGlass = glass && !renderLoader;
-        const renderUnderline = theme === Theme.DARK;
         const actions = this.renderActions();
         const inputClasses = classNames({
             [`${styles.input} ring-js-shortcuts`]: true,
@@ -769,7 +764,7 @@ export default class QueryAssist extends Component {
             [styles.inputLeftGap]: this.isRenderingGlassOrLoader() && glass,
             [styles.inputDisabled]: this.props.disabled
         });
-        return (<div data-test={dataTests('ring-query-assist', dataTest)} className={classNames(className, styles.queryAssist, styles[theme])} role="presentation" ref={this.nodeRef}>
+        return (<div data-test={dataTests('ring-query-assist', dataTest)} className={classNames(className, styles.queryAssist)} role="presentation" ref={this.nodeRef}>
         {this.state.shortcuts &&
                 (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
 
@@ -777,7 +772,7 @@ export default class QueryAssist extends Component {
         {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
                     [styles.loaderOnTheRight]: !glass
                 })} ref={this.loaderRef}>
-            <LoaderInline theme={theme}/>
+            <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
@@ -789,10 +784,9 @@ export default class QueryAssist extends Component {
                 })} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
             {this.props.placeholder}
           </button>)}
-        {renderUnderline && <div className={styles.focusUnderline}/>}
         {actions &&
                 <div data-test="ring-query-assist-actions" className={styles.actions}>{actions}</div>}
-        <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={classNames(styles[theme], 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)}/>
       </div>);
     }
 }