@jetbrains/ring-ui 5.0.31 → 5.0.33

package/components/dialog/dialog.css

@@ -124,3 +124,11 @@
   font-size: 24px;
   line-height: 28px;
 }
+
+.dense .header {
+  padding-top: calc(unit * 2);
+}
+
+.dense .panel {
+  padding-bottom: calc(unit * 2);
+}

package/components/dialog/dialog.d.ts

@@ -15,6 +15,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     contentClassName?: string | null | undefined;
     portalTarget?: Element | null | undefined;
     'data-test'?: string | null | undefined;
+    dense?: boolean | null | undefined;
 }
 /**
  * @name Dialog

package/components/dialog/dialog.js

@@ -100,7 +100,7 @@ export default class Dialog extends PureComponent {
         this.dialog = tabTrap && tabTrap.node;
     };
     render() {
-        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, ...restProps } = this.props;
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
         return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
@@ -110,7 +110,7 @@ export default class Dialog extends PureComponent {
                 // click handler is duplicated in close button
                 role="presentation" className={styles.clickableOverlay} onClick={this.handleClick}/>)}
               <div className={styles.innerContainer}>
-                <AdaptiveIsland className={classNames(styles.content, contentClassName)} data-test="ring-dialog" role="dialog" aria-label={label}>
+                <AdaptiveIsland className={classNames(styles.content, contentClassName, { [styles.dense]: dense })} data-test="ring-dialog" role="dialog" aria-label={label}>
                   {children}
                   {showCloseButton &&
                     (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {

package/components/input-size/input-size.examples.js

@@ -28,7 +28,7 @@ export const basic = () => {
         <div class="example-block">
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_xs"
+              size="'S'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Extra-short'">
@@ -37,7 +37,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_s"
+              size="'S'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Short'">
@@ -46,7 +46,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_m"
+              size="'M'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Medium'">
@@ -55,7 +55,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_l"
+              size="'L'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Long'">
@@ -64,6 +64,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
+              size="'FULL'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Full-width'">

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

@@ -29,8 +29,6 @@
 .huge {
   --ring-input-padding-block: 5px;
 
-  width: 100%;
-
   & .input {
     border-right: 0;
     border-top-right-radius: 0;

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

@@ -4,6 +4,7 @@ import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
 import Button from '../button/button';
 import Icon from '../icon/icon';
+import { Size } from '../input/input';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
 declare function noop(): void;
@@ -59,6 +60,7 @@ export interface QueryAssistProps {
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
     huge?: boolean | null | undefined;
+    size: Size;
 }
 export interface StyleRange {
     style: string;
@@ -210,6 +212,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         actions: PropTypes.Requireable<any[]>;
         'data-test': PropTypes.Requireable<string>;
         huge: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onApply: typeof noop;
@@ -217,6 +220,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         onApplySuggestion: typeof noop;
         onClear: typeof noop;
         onFocusChange: typeof noop;
+        size: Size;
         translations: {
             searchTitle: string;
             clearTitle: string;

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

@@ -17,6 +17,8 @@ import rerenderHOC from '../global/rerender-hoc';
 import Button from '../button/button';
 import Icon from '../icon/icon';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
+import { Size } from '../input/input';
+import inputStyles from '../input/input.css';
 import QueryAssistSuggestions from './query-assist__suggestions';
 import styles from './query-assist.css';
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING +
@@ -151,7 +153,8 @@ export default class QueryAssist extends Component {
         translations: PropTypes.object,
         actions: PropTypes.array,
         'data-test': PropTypes.string,
-        huge: PropTypes.bool
+        huge: PropTypes.bool,
+        size: PropTypes.string
     };
     static defaultProps = {
         onApply: noop,
@@ -159,6 +162,7 @@ export default class QueryAssist extends Component {
         onApplySuggestion: noop,
         onClear: noop,
         onFocusChange: noop,
+        size: Size.L,
         translations: {
             searchTitle: 'Search',
             clearTitle: 'Clear search input'
@@ -238,7 +242,7 @@ export default class QueryAssist extends Component {
         }
         if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
             this.immediateState.query = query;
-            if (query && (this.props.autoOpen === 'force' || prevProps.autoOpen && query.length > 0)) {
+            if (prevProps.autoOpen && query?.length > 0) {
                 this.requestData?.();
             }
             else if (query) {
@@ -431,7 +435,7 @@ export default class QueryAssist extends Component {
                 this.requestData?.();
             }
         }
-        if (this.props.autoOpen !== 'force' && this.immediateState.query.length < 1) {
+        if (this.immediateState.query.length < 1) {
             this.setState({ showPopup: false });
         }
     };
@@ -450,7 +454,7 @@ export default class QueryAssist extends Component {
                 placeholderEnabled: !query,
                 query,
                 suggestions,
-                showPopup: !!suggestions.length && (this.props.autoOpen === 'force' || !afterCompletion)
+                showPopup: !!suggestions.length && !afterCompletion
             };
             this.immediateState.suggestionsQuery = query;
             // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
@@ -755,12 +759,12 @@ export default class QueryAssist extends Component {
         return actions;
     }
     render() {
-        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge } = this.props;
+        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge, size } = 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, {
+        const containerClasses = classNames(className, inputStyles[`size${huge ? Size.FULL : size}`], {
             [styles.queryAssist]: true,
             [styles.withIcon]: (renderGlass && !huge) || renderLoader,
             [styles.huge]: huge
@@ -774,8 +778,7 @@ export default class QueryAssist extends Component {
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
         <div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
-          {this.state.shortcuts &&
-                (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
+          {this.state.shortcuts && (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
 
           {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={this.props.translations.searchTitle} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
 

package/components/tags-input/tags-input.css

@@ -1,29 +1,19 @@
 @import "../global/variables.css";
 
+@value unit from "../global/global.css";
 @value outerContainer, container, input from "../input/input.css";
 
 .tagsInput {
-  padding-top: 2px;
-  padding-bottom: 2px;
+  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-padding-inline: 3px;
 
-  white-space: normal;
-}
-
-.tagsInputLegacyMode {
-  padding-top: 0;
-  padding-bottom: 1px;
-
-  border: 1px solid var(--ring-borders-color);
-  background-color: var(--ring-content-background-color);
-
-  & .tagsList {
-    padding-top: 1px;
+  box-sizing: border-box;
 
-    line-height: 20px;
-  }
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
 
-  & .tag {
-    margin-right: 2px;
+  & * {
+    box-sizing: border-box;
   }
 }
 
@@ -35,10 +25,6 @@
   & .input {
     background-color: transparent;
   }
-
-  & .underline {
-    border-bottom-style: dashed;
-  }
 }
 
 .tagsInputFocused {
@@ -46,16 +32,41 @@
 }
 
 .tagsList {
-  display: inline-block;
-
-  box-sizing: border-box;
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
 
   width: 100%;
-  margin-bottom: -1px;
 
-  padding-left: 2px;
+  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);
+
+  cursor: text;
+
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background: transparent;
+
+  font: inherit;
+
+  caret-color: var(--ring-main-color);
+
+  @nest [dir=rtl] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
+  }
+
+  &:hover {
+    transition: none;
 
-  line-height: 22px;
+    border-color: var(--ring-border-hover-color);
+  }
 }
 
 .tagsSelect {
@@ -69,24 +80,3 @@
     line-height: calc(var(--ring-line-height) - 2px);
   }
 }
-
-.underline {
-  height: 1px;
-
-  border-bottom: var(--ring-borders-color) 1px solid;
-}
-
-.focusUnderline {
-  width: 0;
-  height: 2px;
-
-  margin-top: -1px;
-
-  transition: width 0.15s ease-out;
-
-  background: var(--ring-main-color);
-
-  @nest .tagsInputFocused & {
-    width: 100%;
-  }
-}

package/components/tags-input/tags-input.d.ts

@@ -1,8 +1,10 @@
-import React, { Component, PureComponent, SyntheticEvent } from 'react';
+import React, { Component, PureComponent, SyntheticEvent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
 import Caret from '../caret/caret';
+import { Size } from '../input/input';
+import { ControlsHeight } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
 declare function noop(): void;
 export interface ToggleTagParams {
@@ -22,7 +24,6 @@ export interface TagsInputProps {
     disabled: boolean;
     autoOpen: boolean;
     renderOptimization: boolean;
-    legacyMode: boolean;
     allowAddNewTags: boolean;
     filter: boolean | Filter;
     placeholder: string;
@@ -30,6 +31,9 @@ export interface TagsInputProps {
     tags?: readonly TagType[] | null | undefined;
     loadingMessage?: string | undefined;
     notFoundMessage?: string | undefined;
+    size: Size;
+    height?: ControlsHeight | undefined;
+    label?: ReactNode;
 }
 interface TagsInputState {
     tags: TagType[];
@@ -61,7 +65,6 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
         disabled: PropTypes.Requireable<boolean>;
         autoOpen: PropTypes.Requireable<boolean>;
         renderOptimization: PropTypes.Requireable<boolean>;
-        legacyMode: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
             fn: PropTypes.Requireable<(...args: any[]) => any>;
         }> | null | undefined>>;
@@ -80,12 +83,12 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
         disabled: boolean;
         autoOpen: boolean;
         renderOptimization: boolean;
-        legacyMode: boolean;
         allowAddNewTags: boolean;
         filter: {
             fn: () => boolean;
         };
         placeholder: string;
+        size: Size;
     };
     constructor(props: TagsInputProps);
     state: TagsInputState;
@@ -95,6 +98,8 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     componentDidMount(): void;
     static ngModelStateField: string;
     ngModelStateField: string;
+    static contextType: React.Context<ControlsHeight>;
+    id: string;
     node?: HTMLElement | null;
     nodeRef: (node: HTMLElement | null) => void;
     input?: HTMLInputElement | null;

package/components/tags-input/tags-input.js

@@ -7,6 +7,10 @@ import TagsList from '../tags-list/tags-list';
 import Caret from '../caret/caret';
 import memoize from '../global/memoize';
 import rerenderHOC from '../global/rerender-hoc';
+import { Size } from '../input/input';
+import { ControlsHeightContext } from '../global/controls-height';
+import getUID from '../global/get-uid';
+import inputStyles from '../input/input.css';
 import styles from './tags-input.css';
 function noop() { }
 /**
@@ -34,7 +38,6 @@ export default class TagsInput extends PureComponent {
         disabled: PropTypes.bool,
         autoOpen: PropTypes.bool,
         renderOptimization: PropTypes.bool,
-        legacyMode: PropTypes.bool,
         filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({ fn: PropTypes.func })]),
         loadingMessage: PropTypes.string,
         notFoundMessage: PropTypes.string,
@@ -51,10 +54,10 @@ export default class TagsInput extends PureComponent {
         disabled: false,
         autoOpen: false,
         renderOptimization: true,
-        legacyMode: false,
         allowAddNewTags: false,
         filter: { fn: () => true },
-        placeholder: 'Select an option'
+        placeholder: 'Select an option',
+        size: Size.M
     };
     constructor(props) {
         super(props);
@@ -85,6 +88,8 @@ export default class TagsInput extends PureComponent {
     }
     static ngModelStateField = 'tags';
     ngModelStateField;
+    static contextType = ControlsHeightContext;
+    id = getUID('ring-tags-list-');
     node;
     nodeRef = (node) => {
         this.node = node;
@@ -244,21 +249,21 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { legacyMode, disabled, canNotBeEmpty, allowAddNewTags, filter } = this.props;
-        const classes = classNames(styles.tagsInput, {
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, height = this.context, label } = this.props;
+        const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
-            [styles.tagsInputFocused]: focused,
-            [styles.tagsInputLegacyMode]: legacyMode
+            [styles.tagsInputFocused]: focused
         }, this.props.className);
         return (<div 
         // it transfers focus to input
         role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
+        {label && (<label htmlFor={this.id} className={classNames(inputStyles.label, {
+                    [inputStyles.disabledLabel]: disabled
+                })}>{label}</label>)}
+
         <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick}>
-          <Select ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage}/>
+          <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage}/>
         </TagsList>
-
-        {!legacyMode && <div className={styles.underline}/>}
-        {!legacyMode && <div className={styles.focusUnderline}/>}
       </div>);
     }
 }

package/dist/_helpers/dialog__body-scroll-preventer.js

@@ -1,6 +1,6 @@
 import scrollbarWidth from 'scrollbar-width';
 
-var modules_5e9b8c03 = {"unit":"8px","header":"header_rui_1d72","container":"container_rui_381e","innerContainer":"innerContainer_rui_381e","content":"content_rui_381e","panel":"panel_rui_381e","clickableOverlay":"clickableOverlay_rui_381e","closeIcon":"closeIcon_rui_381e","closeButton":"closeButton_rui_381e","closeButtonOutside":"closeButtonOutside_rui_381e","closeButtonInside":"closeButtonInside_rui_381e","documentWithoutScroll":"documentWithoutScroll_rui_381e","popupTarget":"popupTarget_rui_381e"};
+var modules_5e9b8c03 = {"unit":"8px","header":"header_rui_1d72","container":"container_rui_381e","innerContainer":"innerContainer_rui_381e","content":"content_rui_381e","panel":"panel_rui_381e","clickableOverlay":"clickableOverlay_rui_381e","closeIcon":"closeIcon_rui_381e","closeButton":"closeButton_rui_381e","closeButtonOutside":"closeButtonOutside_rui_381e","closeButtonInside":"closeButtonInside_rui_381e","documentWithoutScroll":"documentWithoutScroll_rui_381e","popupTarget":"popupTarget_rui_381e","dense":"dense_rui_381e"};
 
 const isPrevented = new Set();
 let previousDocumentWidth = null;

package/dist/dialog/dialog.d.ts

@@ -15,6 +15,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     contentClassName?: string | null | undefined;
     portalTarget?: Element | null | undefined;
     'data-test'?: string | null | undefined;
+    dense?: boolean | null | undefined;
 }
 /**
  * @name Dialog

package/dist/dialog/dialog.js

@@ -124,6 +124,7 @@ class Dialog extends PureComponent {
       portalTarget,
       label,
       closeButtonTitle,
+      dense,
       ...restProps
     } = this.props;
     const classes = classNames(modules_5e9b8c03.container, className);
@@ -148,7 +149,9 @@ class Dialog extends PureComponent {
     }), /*#__PURE__*/React.createElement("div", {
       className: modules_5e9b8c03.innerContainer
     }, /*#__PURE__*/React.createElement(AdaptiveIsland, {
-      className: classNames(modules_5e9b8c03.content, contentClassName),
+      className: classNames(modules_5e9b8c03.content, contentClassName, {
+        [modules_5e9b8c03.dense]: dense
+      }),
       "data-test": "ring-dialog",
       role: "dialog",
       "aria-label": label

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

@@ -4,6 +4,7 @@ import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
 import Button from '../button/button';
 import Icon from '../icon/icon';
+import { Size } from '../input/input';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
 declare function noop(): void;
@@ -59,6 +60,7 @@ export interface QueryAssistProps {
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
     huge?: boolean | null | undefined;
+    size: Size;
 }
 export interface StyleRange {
     style: string;
@@ -210,6 +212,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         actions: PropTypes.Requireable<any[]>;
         'data-test': PropTypes.Requireable<string>;
         huge: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onApply: typeof noop;
@@ -217,6 +220,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         onApplySuggestion: typeof noop;
         onClear: typeof noop;
         onFocusChange: typeof noop;
+        size: Size;
         translations: {
             searchTitle: string;
             clearTitle: string;

package/dist/query-assist/query-assist.js

@@ -18,6 +18,8 @@ import rerenderHOC from '../global/rerender-hoc.js';
 import { Button } from '../button/button.js';
 import Icon from '../icon/icon.js';
 import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
+import { Size } from '../input/input.js';
+import { m as modules_88cfaf40 } from '../_helpers/input.js';
 import { Q as QueryAssistSuggestions, m as modules_da7ab055 } from '../_helpers/query-assist__suggestions.js';
 import 'react-dom/server';
 import '../popup/popup.js';
@@ -68,6 +70,7 @@ import '../global/react-render-adapter.js';
 import '../global/composeRefs.js';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
+import '../global/prop-types.js';
 
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
 const ngModelStateField = 'query';
@@ -356,7 +359,7 @@ class QueryAssist extends Component {
         }
       }
 
-      if (this.props.autoOpen !== 'force' && this.immediateState.query.length < 1) {
+      if (this.immediateState.query.length < 1) {
         this.setState({
           showPopup: false
         });
@@ -394,7 +397,7 @@ class QueryAssist extends Component {
             placeholderEnabled: !query,
             query,
             suggestions,
-            showPopup: !!suggestions.length && (_this.props.autoOpen === 'force' || !afterCompletion)
+            showPopup: !!suggestions.length && !afterCompletion
           };
           _this.immediateState.suggestionsQuery = query; // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
 
@@ -666,7 +669,7 @@ class QueryAssist extends Component {
     if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
       this.immediateState.query = query;
 
-      if (query && (this.props.autoOpen === 'force' || prevProps.autoOpen && query.length > 0)) {
+      if (prevProps.autoOpen && (query === null || query === void 0 ? void 0 : query.length) > 0) {
         var _this$requestData5;
 
         (_this$requestData5 = this.requestData) === null || _this$requestData5 === void 0 ? void 0 : _this$requestData5.call(this);
@@ -928,13 +931,14 @@ class QueryAssist extends Component {
       'data-test': dataTest,
       className,
       useCustomItemRender,
-      huge
+      huge,
+      size
     } = 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, {
+    const containerClasses = classNames(className, modules_88cfaf40[`size${huge ? Size.FULL : size}`], {
       [modules_da7ab055.queryAssist]: true,
       [modules_da7ab055.withIcon]: renderGlass && !huge || renderLoader,
       [modules_da7ab055.huge]: huge
@@ -1133,7 +1137,8 @@ _defineProperty(QueryAssist, "propTypes", {
   translations: PropTypes.object,
   actions: PropTypes.array,
   'data-test': PropTypes.string,
-  huge: PropTypes.bool
+  huge: PropTypes.bool,
+  size: PropTypes.string
 });
 
 _defineProperty(QueryAssist, "defaultProps", {
@@ -1142,6 +1147,7 @@ _defineProperty(QueryAssist, "defaultProps", {
   onApplySuggestion: noop,
   onClear: noop,
   onFocusChange: noop,
+  size: Size.L,
   translations: {
     searchTitle: 'Search',
     clearTitle: 'Clear search input'

package/dist/query-assist-ng/query-assist-ng.js

@@ -72,6 +72,9 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-10px';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
+import '../input/input.js';
+import '../global/prop-types.js';
+import '../_helpers/input.js';
 import '../_helpers/query-assist__suggestions.js';
 
 var queryAssistNg = angularComponentFactory(QueryAssist, 'QueryAssist').name;