@jetbrains/ring-ui 5.0.17 → 5.0.18

package/components/button-ng/button-ng.js

@@ -108,7 +108,7 @@ class ButtonController extends RingAngularComponent {
     this.element.className = classNames(
       foreignClasses,
       getButtonClasses({
-        height: ControlsHeight.S,
+        height: $attrs.height || ControlsHeight.S,
         className: styles.button,
         active: this.getAttrValue($attrs.active),
         disabled: this.getAttrValue($attrs.disabled),

package/components/pager/pager.js

@@ -147,6 +147,9 @@ export default class Pager extends PureComponent {
     getPagerContent() {
         const { currentPage, visiblePagesLimit } = this.props;
         const totalPages = this.getTotal();
+        if (totalPages < this.props.currentPage) {
+            this.props.onPageChange?.(totalPages);
+        }
         if (totalPages < 2 && !this.props.openTotal) {
             return null;
         }

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

@@ -1,273 +1,162 @@
 @import "../global/variables.css";
+@import "../button/button.css";
 
-@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 @value overInputZIndex: 2;
 @value inputGap: calc(unit * 3);
 
 .queryAssist {
-  height: calc(unit * 3);
+  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-padding-inline: unit;
+  --ring-input-padding-block: 3px;
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
 
-  background: var(--ring-content-background-color);
-}
-
-.input {
-  height: calc(unit * 3 - 2px);
-
-  box-shadow: 0 0 0 1px var(--ring-borders-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);
-}
-
-.letter-text {
-  color: var(--ring-warning-color);
-}
-
-.letterDefault,
-.letter-field-name {
-  color: var(--ring-text-color);
-}
-
-.letter-field-value {
-  color: var(--ring-link-color);
-}
+  position: relative;
 
-.letter-operator {
-  color: var(--ring-secondary-color);
-}
+  display: flex;
 
-.letter-error {
-  padding-bottom: 1px;
+  box-sizing: border-box;
 
-  border-bottom: 1px solid var(--ring-icon-error-color);
-}
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
 
-.iconInner {
-  color: var(--ring-icon-secondary-color);
-}
-
-.highlight {
-  font-weight: 600;
-}
-
-.service {
-  color: var(--ring-secondary-color);
+  & * {
+    box-sizing: border-box;
+  }
 }
 
-.dark {
-  & .queryAssist {
-    height: calc(unit * 4);
-
-    font-size: 16px;
-  }
+.huge {
+  --ring-input-padding-block: 5px;
 
   & .input {
-    top: 0;
-
-    height: calc(unit * 4 - 2px);
-
-    color: var(--ring-search-color);
-
-    border-top-width: 5px;
-    background: var(--ring-selected-background-color);
-
-    &:active,
-    &:focus {
-      border-color: var(--ring-navigation-background-color);
-
-      background-color: var(--ring-navigation-background-color);
-    }
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  & .placeholder {
-    top: 6px;
+  & .actions {
+    right: calc(var(--ring-input-padding-inline) + 34px);
+  }
+}
 
-    color: var(--ring-icon-color);
+.input {
+  width: 100%;
 
-    @nest & :-ms-input-placeholder,
-    :root & {
-      top: 7px;
-    }
+  margin: 0;
+  padding-top: var(--ring-input-padding-block);
+  padding-right: var(--ring-input-padding-end);
+  padding-bottom: var(--ring-input-padding-block);
+  padding-left: var(--ring-input-padding-start);
 
-    @supports (-ms-ime-align:auto) {
-      & {
-        top: 7px;
-      }
-    }
-  }
+  transition: border-color var(--ring-ease);
 
-  & .letter-text {
-    color: var(--ring-warning-color);
-  }
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background: transparent;
 
-  & .letterDefault,
-  & .letter-field-name {
-    color: var(--ring-search-color);
-  }
+  font: inherit;
 
-  & .letter-field-value {
-    color: var(--ring-active-text-color);
-  }
+  caret-color: var(--ring-main-color);
 
-  & .letter-operator {
-    color: var(--ring-secondary-color);
+  @nest [dir=rtl] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
   }
 
-  & .letter-error {
-    padding-bottom: 1px;
+  &:hover {
+    transition: none;
 
-    border-bottom: 1px solid var(--ring-icon-error-color);
+    border-color: var(--ring-border-hover-color);
   }
 
-  & .icon {
-    top: 7px;
+  @nest .error & {
+    border-color: var(--ring-icon-error-color);
   }
 
-  & .iconInner {
-    color: var(--ring-icon-color);
-  }
-
-  & .loader {
-    top: 6px;
-  }
+  &:focus {
+    transition: none;
 
-  & .highlight {
-    font-weight: 600;
+    border-color: var(--ring-main-color);
   }
 
-  & .service {
-    color: var(--ring-secondary-color);
-  }
+  &[disabled] {
+    color: var(--ring-disabled-color);
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
 
-  & .actions {
-    background-color: var(--ring-selected-background-color);
+    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  & .input:focus ~ .actions {
-    background-color: var(--ring-navigation-background-color);
+  /*
+    Kill yellow/blue webkit autocomplete
+    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+  */
+  &:-webkit-autofill {
+    &,
+    &:hover,
+    &:focus {
+      transition: background-color 50000s ease-in-out 0s;
+    }
   }
 }
 
-.queryAssist {
-  composes: font from "../global/global.css";
-
-  position: relative;
-
-  box-sizing: border-box;
-
-  line-height: normal;
+.withIcon {
+  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
 }
 
-.input {
-  position: relative;
-
-  top: 1px;
-  left: 1px;
-
-  overflow: auto;
-
-  box-sizing: border-box;
-
-  width: calc(100% - 2px);
-  margin: 0;
-
-  padding: 2px calc(unit / 2) 3px;
-
-  white-space: nowrap;
-
-  border-width: 0;
-  border-style: solid;
-  border-color: transparent;
-  background: transparent;
-
-  line-height: 16px;
-
-  scrollbar-width: none;
-
-  &:active,
-  &:focus {
-    outline: 0;
-  }
-
-  @nest & :-ms-input-placeholder,
-  :root & {
-    line-height: 17px;
-  }
+.letter-text {
+  color: var(--ring-warning-color);
+}
 
-  @supports (-ms-ime-align:auto) {
-    & {
-      line-height: 17px;
-    }
-  }
+.letterDefault,
+.letter-field-name {
+  color: var(--ring-text-color);
+}
 
-  & .iconInner {
-    color: var(--ring-icon-color);
-  }
+.letter-field-value {
+  color: var(--ring-link-color);
+}
 
-  &.inputGap {
-    border-right-width: inputGap;
-  }
+.letter-operator {
+  color: var(--ring-secondary-color);
+}
 
-  &.inputGap2 {
-    border-right-width: calc(2 * inputGap);
-  }
+.letter-error {
+  padding-bottom: 1px;
 
-  &.inputLeftGap {
-    border-left-width: inputGap;
-  }
+  border-bottom: 1px solid var(--ring-icon-error-color);
+}
 
-  &.inputDisabled {
-    border-color: var(--ring-line-color);
-    box-shadow: 0 0 0 1px var(--ring-line-color);
-  }
+.highlight {
+  font-weight: 600;
+}
 
-  &.inputDisabled span > span {
-    color: var(--ring-disabled-color);
-  }
+.service {
+  color: var(--ring-secondary-color);
 }
 
 .placeholder {
   composes: resetButton from "../global/global.css";
 
   position: absolute;
-  top: 3px;
-
-  left: 5px;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: 1px;
 
   display: block;
 
   overflow: hidden;
 
   width: calc(100% - unit * 4);
+  padding-left: var(--ring-input-padding-start);
 
   text-overflow: ellipsis;
 
   pointer-events: none;
 
-  &.placeholderSpaced {
-    left: calc(unit * 3 + 5px);
-  }
-
-  @nest & :-ms-input-placeholder,
-  :root & {
-    top: 4px;
-  }
-
-  @supports (-ms-ime-align:auto) {
-    & {
-      top: 4px;
-    }
-  }
+  color: var(--ring-disabled-color);
 }
 
 .letter {
@@ -276,41 +165,63 @@
 
 .actions {
   position: absolute;
-  z-index: overInputZIndex;
-  top: 4px;
-  right: 1px;
+  top: calc(var(--ring-input-padding-block) - 2px);
+  right: var(--ring-input-padding-inline);
 
-  background-color: var(--ring-content-background-color);
+  height: auto;
+
+  line-height: inherit;
+
+  @nest [dir=rtl] & {
+    right: auto;
+    left: unit;
+  }
 }
 
 .icon {
   position: absolute;
-  z-index: overInputZIndex;
-  top: 3px;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: var(--ring-input-padding-inline);
 
-  box-sizing: border-box;
+  color: var(--ring-icon-secondary-color);
 
-  width: calc(unit * 3);
-  height: calc(unit * 2);
+  @nest [dir=rtl] & {
+    right: unit;
+    left: auto;
+  }
+}
 
-  padding: 0 4px;
+.rightSearchButton {
+  padding: 5px 9px;
 
   cursor: pointer;
-  user-select: none;
 
-  line-height: normal;
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-icon-secondary-color);
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 
-  & svg {
-    vertical-align: baseline;
+  @nest .queryAssist.queryAssist:focus-within & {
+    transition: none;
+
+    border-color: var(--ring-main-color);
   }
 
-  @nest .actions & {
-    position: relative;
-    top: 0;
-    left: -1px;
+  @nest .queryAssist:hover & {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
   }
 }
 
+.clear {
+  padding-right: 0;
+}
+
 .loaderOnTheRight {
   right: 1px;
 

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
 import Button from '../button/button';
+import Icon from '../icon/icon';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
 declare function noop(): void;
@@ -57,6 +58,7 @@ export interface QueryAssistProps {
     useCustomItemRender?: boolean | null | undefined;
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
+    huge?: boolean | null | undefined;
 }
 export interface StyleRange {
     style: string;
@@ -207,6 +209,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         translations: PropTypes.Requireable<object>;
         actions: PropTypes.Requireable<any[]>;
         'data-test': PropTypes.Requireable<string>;
+        huge: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         onApply: typeof noop;
@@ -280,8 +283,8 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     popupRef: (node: PopupMenu<SuggestionItem> | null) => void;
     placeholder?: HTMLElement | null;
     placeholderRef: (node: HTMLElement | null) => void;
-    glass?: ComponentRef<typeof Button> | null;
-    glassRef: (node: ComponentRef<typeof Button> | null) => void;
+    glass?: ComponentRef<typeof Icon> | null;
+    glassRef: (node: ComponentRef<typeof Icon> | null) => void;
     loader?: HTMLElement | null;
     loaderRef: (node: HTMLElement | null) => void;
     clear?: ComponentRef<typeof Button> | null;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import debounce from 'just-debounce-it';
 import classNames from 'classnames';
 import deepEqual from 'deep-equal';
-import searchIcon from '@jetbrains/icons/search-12px';
+import searchIcon from '@jetbrains/icons/search';
 import closeIcon from '@jetbrains/icons/close-12px';
 import getUID from '../global/get-uid';
 import dataTests from '../global/data-tests';
@@ -15,6 +15,7 @@ import LoaderInline from '../loader-inline/loader-inline';
 import Shortcuts from '../shortcuts/shortcuts';
 import rerenderHOC from '../global/rerender-hoc';
 import Button from '../button/button';
+import Icon from '../icon/icon';
 import QueryAssistSuggestions from './query-assist__suggestions';
 import styles from './query-assist.css';
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING +
@@ -148,7 +149,8 @@ export default class QueryAssist extends Component {
         useCustomItemRender: PropTypes.bool,
         translations: PropTypes.object,
         actions: PropTypes.array,
-        'data-test': PropTypes.string
+        'data-test': PropTypes.string,
+        huge: PropTypes.bool
     };
     static defaultProps = {
         onApply: noop,
@@ -747,16 +749,21 @@ export default class QueryAssist extends Component {
         const actions = [...(this.props.actions || [])];
         const renderClear = this.props.clear && !!this.state.query;
         if (renderClear) {
-            actions.push(<Button icon={closeIcon} key={'clearAction'} className={styles.icon} iconClassName={styles.iconInner} title={this.props.translations.clearTitle} ref={this.clearRef} onClick={this.clearQuery} data-test="query-assist-clear-icon"/>);
+            actions.push(<Button icon={closeIcon} key={'clearAction'} className={styles.clear} title={this.props.translations.clearTitle} ref={this.clearRef} onClick={this.clearQuery} data-test="query-assist-clear-icon"/>);
         }
         return actions;
     }
     render() {
-        const { glass, 'data-test': dataTest, className, useCustomItemRender } = this.props;
+        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge } = this.props;
         const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
         const renderLoader = this.props.loader !== false && this.state.loading;
         const renderGlass = glass && !renderLoader;
         const actions = this.renderActions();
+        const containerClasses = classNames(className, {
+            [styles.queryAssist]: true,
+            [styles.withIcon]: (renderGlass && !huge) || renderLoader,
+            [styles.huge]: huge
+        });
         const inputClasses = classNames({
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
@@ -764,11 +771,12 @@ 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)} role="presentation" ref={this.nodeRef}>
+        return (<div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
         {this.state.shortcuts &&
                 (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
 
-        {renderGlass && (<Button icon={searchIcon} className={styles.icon} iconClassName={styles.iconInner} title={this.props.translations.searchTitle} ref={this.glassRef} onClick={this.handleApply} data-test="query-assist-search-icon"/>)}
+        {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={this.props.translations.searchTitle} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
+
         {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
                     [styles.loaderOnTheRight]: !glass
                 })} ref={this.loaderRef}>
@@ -779,14 +787,17 @@ export default class QueryAssist extends Component {
          onKeyUp={this.handleInput} // to handle input and key up
          onKeyDown={this.handleEnter} onPaste={this.handlePaste} spellCheck="false">{this.state.query && <span>{this.renderQuery()}</span>}</ContentEditable>
 
-        {renderPlaceholder && (<button type="button" className={classNames(styles.placeholder, {
-                    [styles.placeholderSpaced]: glass
-                })} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
+        {renderPlaceholder && (<button type="button" className={styles.placeholder} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
             {this.props.placeholder}
           </button>)}
-        {actions &&
-                <div data-test="ring-query-assist-actions" className={styles.actions}>{actions}</div>}
+
+        {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={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test="ring-query-assist-popup" hint={this.props.hint} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)}/>
+
+        {glass && huge && (<div className={styles.rightSearchButton}>
+            <Icon glyph={searchIcon} className={styles.rightSearchIcon} title={this.props.translations.searchTitle} onClick={this.handleApply} ref={this.glassRef} data-test="query-assist-search-icon"/>
+          </div>)}
       </div>);
     }
 }

package/dist/_helpers/query-assist__suggestions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import List from '../list/list.js';
 
-var modules_da7ab055 = {"dark":"dark_rui_eb55","unit":"8px","overInputZIndex":"2","inputGap":"24px","queryAssist":"queryAssist_rui_d22e font_rui_8bff","input":"input_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","iconInner":"iconInner_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","icon":"icon_rui_d22e","loader":"loader_rui_d22e","actions":"actions_rui_d22e","24px":"24px_rui_d22e","inputGap2":"inputGap2_rui_d22e","inputLeftGap":"inputLeftGap_rui_d22e","inputDisabled":"inputDisabled_rui_d22e","placeholderSpaced":"placeholderSpaced_rui_d22e","letter":"letter_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e"};
+var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","huge":"huge_rui_d22e","input":"input_rui_d22e","actions":"actions_rui_d22e","error":"error_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e"};
 
 const ICON_ID_LENGTH = 44;
 class QueryAssistSuggestions {

package/dist/button-ng/button-ng.js

@@ -44,7 +44,7 @@ class ButtonController extends RingAngularComponent {
       } = this.$inject;
       const foreignClasses = [...this.element.classList].filter(name => !buttonClassesMap[name]);
       this.element.className = classNames(foreignClasses, getButtonClasses({
-        height: ControlsHeight.S,
+        height: $attrs.height || ControlsHeight.S,
         className: modules_e81895c9.button,
         active: this.getAttrValue($attrs.active),
         disabled: this.getAttrValue($attrs.disabled),

package/dist/pager/pager.js

@@ -273,6 +273,12 @@ class Pager extends PureComponent {
     } = this.props;
     const totalPages = this.getTotal();
 
+    if (totalPages < this.props.currentPage) {
+      var _this$props$onPageCha4, _this$props4;
+
+      (_this$props$onPageCha4 = (_this$props4 = this.props).onPageChange) === null || _this$props$onPageCha4 === void 0 ? void 0 : _this$props$onPageCha4.call(_this$props4, totalPages);
+    }
+
     if (totalPages < 2 && !this.props.openTotal) {
       return null;
     }

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
 import Button from '../button/button';
+import Icon from '../icon/icon';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
 declare function noop(): void;
@@ -57,6 +58,7 @@ export interface QueryAssistProps {
     useCustomItemRender?: boolean | null | undefined;
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
+    huge?: boolean | null | undefined;
 }
 export interface StyleRange {
     style: string;
@@ -207,6 +209,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         translations: PropTypes.Requireable<object>;
         actions: PropTypes.Requireable<any[]>;
         'data-test': PropTypes.Requireable<string>;
+        huge: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         onApply: typeof noop;
@@ -280,8 +283,8 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     popupRef: (node: PopupMenu<SuggestionItem> | null) => void;
     placeholder?: HTMLElement | null;
     placeholderRef: (node: HTMLElement | null) => void;
-    glass?: ComponentRef<typeof Button> | null;
-    glassRef: (node: ComponentRef<typeof Button> | null) => void;
+    glass?: ComponentRef<typeof Icon> | null;
+    glassRef: (node: ComponentRef<typeof Icon> | null) => void;
     loader?: HTMLElement | null;
     loaderRef: (node: HTMLElement | null) => void;
     clear?: ComponentRef<typeof Button> | null;