@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/components/message/{message.jsx → message.js}

@@ -6,24 +6,39 @@ 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
   */
 const UNIT = 8;
+const TAIL_SIZE = 11;
 const getTailOffsets = (offset) => ({
-    [Directions.BOTTOM_RIGHT]: { top: 0, left: offset - UNIT, transform: 'rotate(180deg)' },
-    [Directions.BOTTOM_LEFT]: { top: 0, right: offset - UNIT, transform: 'rotate(180deg)' },
-    [Directions.BOTTOM_CENTER]: { top: 0, left: offset - UNIT, transform: 'rotate(180deg)' },
-    [Directions.TOP_RIGHT]: { bottom: -UNIT + 1, left: offset - UNIT },
-    [Directions.TOP_LEFT]: { bottom: -UNIT + 1, right: offset - UNIT },
-    [Directions.TOP_CENTER]: { bottom: -UNIT + 1, left: offset - UNIT },
-    [Directions.RIGHT_TOP]: { bottom: offset - UNIT, left: -UNIT, transform: 'rotate(90deg)' },
-    [Directions.RIGHT_BOTTOM]: { top: offset, left: -UNIT, transform: 'rotate(90deg)' },
-    [Directions.RIGHT_CENTER]: { top: offset, left: -UNIT, transform: 'rotate(90deg)' },
-    [Directions.LEFT_TOP]: { bottom: offset - UNIT, right: -UNIT, transform: 'rotate(-90deg)' },
-    [Directions.LEFT_BOTTOM]: { top: offset, right: -UNIT, transform: 'rotate(-90deg)' },
-    [Directions.LEFT_CENTER]: { top: offset, right: -UNIT, transform: 'rotate(-90deg)' }
+    [Directions.BOTTOM_RIGHT]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
+    [Directions.BOTTOM_LEFT]: {
+        top: 0,
+        right: offset - UNIT - TAIL_SIZE,
+        transform: 'rotate(135deg)'
+    },
+    [Directions.BOTTOM_CENTER]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
+    [Directions.TOP_RIGHT]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
+    [Directions.TOP_LEFT]: {
+        bottom: -TAIL_SIZE,
+        right: offset + UNIT - TAIL_SIZE,
+        transform: 'rotate(-45deg)'
+    },
+    [Directions.TOP_CENTER]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
+    [Directions.RIGHT_TOP]: { bottom: offset + UNIT - TAIL_SIZE, left: 0, transform: 'rotate(45deg)' },
+    [Directions.RIGHT_BOTTOM]: { top: offset - UNIT, left: 0, transform: 'rotate(45deg)' },
+    [Directions.RIGHT_CENTER]: { top: offset - UNIT, left: 0, transform: 'rotate(45deg)' },
+    [Directions.LEFT_TOP]: {
+        bottom: offset - UNIT - TAIL_SIZE,
+        right: -TAIL_SIZE,
+        transform: 'rotate(-135deg)'
+    },
+    [Directions.LEFT_BOTTOM]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' },
+    [Directions.LEFT_CENTER]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' }
 });
 /**
  * Displays a popup containing a message.
@@ -40,7 +55,8 @@ export default class Message extends Component {
         translations: {
             gotIt: 'Got it',
             dismiss: 'Dismiss'
-        }
+        },
+        theme: Theme.DARK
     };
     state = {};
     static Directions = Directions;
@@ -71,21 +87,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}/>}
+          {title && <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>);
     }
 }
@@ -93,7 +113,7 @@ Message.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     tailClassName: PropTypes.string,
-    title: PropTypes.string.isRequired,
+    title: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
     directions: PropTypes.arrayOf(PropTypes.string),
     direction: PropTypes.string,

package/components/pager/{pager.jsx → 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.d.ts

@@ -18,6 +18,7 @@ export interface BasePopupProps {
     keepMounted: boolean;
     directions: readonly Directions[];
     autoPositioning: boolean;
+    autoPositioningOnScroll: boolean;
     autoCorrectTopOverflow: boolean;
     left: number;
     top: number;
@@ -27,6 +28,8 @@ export interface BasePopupProps {
     autoFocusFirst: boolean;
     offset: number;
     legacy: boolean;
+    withTail?: boolean;
+    tailOffset?: number;
     anchorElement?: HTMLElement | null | undefined;
     target?: string | Element | null | undefined;
     className?: string | null | undefined;
@@ -42,6 +45,7 @@ export interface BasePopupProps {
     onContextMenu?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
     onDirectionChange?: ((direction: Directions) => void) | null | undefined;
     onShow?: (() => void) | null | undefined;
+    children?: ReactNode;
 }
 export interface PopupProps extends BasePopupProps {
     children: ReactNode;
@@ -67,6 +71,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
         keepMounted: boolean;
         directions: Directions[];
         autoPositioning: boolean;
+        autoPositioningOnScroll: boolean;
         autoCorrectTopOverflow: boolean;
         left: number;
         top: number;
@@ -131,7 +136,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
      * @private
      */
     private _onDocumentClick;
-    getInternalContent(): React.ReactNode;
+    getInternalContent(): JSX.Element | P["children"] | undefined;
     shortcutsScope: string;
     shortcutsMap: {
         esc: (evt: KeyboardEvent) => void;
@@ -139,3 +144,4 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     render(): JSX.Element;
 }
 export declare type PopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, PopupProps>;
+export declare type BasePopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, BasePopupProps>;

package/components/popup/{popup.jsx → popup.js}

@@ -34,6 +34,7 @@ export default class Popup extends PureComponent {
         keepMounted: false,
         directions: DEFAULT_DIRECTIONS,
         autoPositioning: true,
+        autoPositioningOnScroll: true,
         autoCorrectTopOverflow: true,
         left: 0,
         top: 0,
@@ -49,7 +50,6 @@ export default class Popup extends PureComponent {
     };
     componentDidMount() {
         if (!this.props.client) {
-            // eslint-disable-next-line react/no-did-mount-set-state
             this.setState({ client: true });
         }
         if (!this.props.hidden) {
@@ -183,7 +183,9 @@ export default class Popup extends PureComponent {
             setTimeout(() => {
                 this._listenersEnabled = true;
                 this.listeners.add(window, 'resize', this._redraw);
-                this.listeners.add(window, 'scroll', this._redraw);
+                if (this.props.autoPositioningOnScroll) {
+                    this.listeners.add(window, 'scroll', this._redraw);
+                }
                 this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
                 let el = this._getAnchor();
                 while (el) {

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 declare const PopupTargetContext: React.Context<string | Element | 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/popup/position.d.ts

@@ -9,7 +9,7 @@ export interface PositionStyles extends Position {
     minWidth?: number;
 }
 export interface PositionAttrs {
-    popup: Element | null | undefined;
+    popup: HTMLElement | null | undefined;
     anchor: Element | null | undefined;
     container: Element | null;
     directions: readonly Directions[];

package/components/popup/position.js

@@ -14,8 +14,8 @@ function getScrollingCoordinates(container) {
     };
 }
 function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
-    const popupWidth = popup.clientWidth;
-    const popupHeight = popup.clientHeight;
+    const popupWidth = popup.offsetWidth;
+    const popupHeight = popup.offsetHeight;
     const anchorBottom = anchorTop + anchorRect.height;
     const anchorRight = anchorLeft + anchorRect.width;
     const popupLeft = anchorLeft - popupWidth;

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

@@ -26,6 +26,7 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
         keepMounted: boolean;
         directions: import("../popup/popup.consts").Directions[];
         autoPositioning: boolean;
+        autoPositioningOnScroll: boolean;
         autoCorrectTopOverflow: boolean;
         left: number;
         top: number;

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.jsx → 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;
@@ -60,7 +58,7 @@ export interface QueryAssistProps {
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
 }
-interface StyleRange {
+export interface StyleRange {
     style: string;
     start: number;
     length: number;
@@ -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;
@@ -299,18 +294,14 @@ export default class QueryAssist extends Component<QueryAssistProps> {
 export declare type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
 export declare const RerenderableQueryAssist: {
     new (props: QueryAssistProps): {
-        _propsCache: Readonly<QueryAssistProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        rerender(props?: Partial<QueryAssistProps>, callback?: (() => void) | undefined): void | Element | React.Component<QueryAssistProps, any, any>;
+        _propsCache: QueryAssistProps & React.RefAttributes<unknown>;
+        rerender(props?: Partial<QueryAssistProps>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        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> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<QueryAssistProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;