@jetbrains/ring-ui 5.0.90 → 5.0.92

package/components/button/button.css

@@ -86,6 +86,7 @@
 
   &[disabled].active {
     background-color: var(--ring-disabled-selected-background-color);
+    box-shadow: button-shadow var(--ring-border-selected-disabled-color);
   }
 
   &[disabled],

package/components/button-group/button-group.css

@@ -39,7 +39,7 @@
 }
 
 .buttonGroup .button[disabled] {
-  --ring-button-group-button-border-color: var(--ring-border-unselected-disabled-color);
+  --ring-button-group-button-border-color: var(--ring-border-disabled-color);
 
   /* stylelint-disable-next-line selector-max-specificity */
   &::before,
@@ -55,7 +55,7 @@
 
     background-color: var(--ring-disabled-background-color);
 
-    box-shadow: 0 1px var(--ring-border-unselected-disabled-color) inset, 0 -1px var(--ring-border-unselected-disabled-color) inset;
+    box-shadow: 0 1px var(--ring-border-disabled-color) inset, 0 -1px var(--ring-border-disabled-color) inset;
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
@@ -130,7 +130,7 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.active[disabled] {
-  box-shadow: button-shadow var(--ring-border-disabled-color);
+  box-shadow: button-shadow var(--ring-border-selected-disabled-color);
 }
 
 .split {

package/components/checkbox/checkbox.css

@@ -43,6 +43,9 @@
 .icon.icon {
   position: absolute;
 
+  top: -1px;
+  left: -1px;
+
   width: calc(unit * 2);
   height: calc(unit * 2);
 
@@ -58,18 +61,10 @@
 
 .check {
   composes: icon;
-
-  top: -1px;
-  left: -1px;
 }
 
 .minus {
   composes: icon;
-
-  top: 1px;
-  left: 2px;
-
-  opacity: 0;
 }
 
 .input {
@@ -116,20 +111,20 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled][disabled] + .cell {
-    border-color: var(--ring-border-unselected-disabled-color);
+    border-color: var(--ring-border-disabled-color);
     background-color: var(--ring-disabled-background-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .cell,
   &[disabled]:indeterminate + .cell {
-    border-color: var(--ring-border-disabled-color);
+    border-color: var(--ring-border-selected-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .cell .check,
   &[disabled]:indeterminate + .cell .minus {
-    color: var(--ring-border-disabled-color);
+    color: var(--ring-border-selected-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */

package/components/checkbox/checkbox.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
-import minusIcon from '@jetbrains/icons/remove-10px';
+import minusIcon from '@jetbrains/icons/remove-14px';
 import Icon from '../icon/icon';
 import { refObject } from '../global/prop-types';
 import composeRefs from '../global/composeRefs';

package/components/global/variables.css

@@ -13,10 +13,12 @@
   --ring-icon-color: rgb(var(--ring-icon-components)); /* #b8d1e5 */
   --ring-icon-secondary-components: 153, 153, 153;
   --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #999 */
-  --ring-border-disabled-components: 212, 212, 212;
-  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #d4d4d4 */
+  --ring-border-disabled-components: 232, 232, 232;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
+  --ring-border-selected-disabled-components: 212, 212, 212;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #d4d4d4 */
   --ring-border-unselected-disabled-components: 232, 232, 232;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */
+  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 212, 212, 212;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
   --ring-border-hover-components: 128, 198, 255;

package/components/global/variables_dark.css

@@ -13,8 +13,10 @@
   --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #80929d */
   --ring-border-disabled-components: 54, 54, 54;
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #363636 */
+  --ring-border-selected-disabled-components: 54, 54, 54;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #363636 */
   --ring-border-unselected-disabled-components: 54, 54, 54;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */
+  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 80, 82, 83;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #505253 */
   --ring-border-hover-components: 112, 177, 230;

package/components/popup/position.js

@@ -46,7 +46,9 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
     const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
     const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
     const topOverflow = Math.max(viewportMinX - styles.top, 0);
-    const popupHeight = attrs.popup.clientHeight;
+    const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number'
+        ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight)
+        : attrs.popup.scrollHeight;
     const verticalDiff = styles.top + popupHeight - viewportMaxX;
     const bottomOverflow = Math.max(verticalDiff, 0);
     return topOverflow + bottomOverflow;
@@ -128,7 +130,7 @@ export default function position(attrs) {
         const overflowAttrs = { ...attrs, popup };
         const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
         if (!autoPositioning || directions.length === 1) {
-            styles = directionsMatrix[directions[0]];
+            styles = { ...directionsMatrix[directions[0]] };
             chosenDirection = directions[0];
         }
         else {
@@ -143,7 +145,7 @@ export default function position(attrs) {
                     horizontalOverflow(stylesB, scroll, overflowAttrs);
                 return overflowA - overflowB;
             });
-            styles = sortedByIncreasingOverflow[0].styles;
+            styles = { ...sortedByIncreasingOverflow[0].styles };
             chosenDirection = sortedByIncreasingOverflow[0].direction;
         }
         // because of the anchor negative margin top and left also may become negative

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

@@ -69,8 +69,6 @@
 }
 
 .huge {
-  --ring-input-padding-block: 5px;
-
   max-height: calc(var(--ring-input-padding-inline) * 4);
 
   padding: 0 0 0 var(--ring-input-padding-inline);
@@ -79,15 +77,9 @@
     padding-right: var(--ring-input-padding-inline);
   }
 
-  & .placeholder {
-    padding-left: 0;
-  }
-
   @nest [dir=rtl] & {
     padding: 0 var(--ring-input-padding-inline) 0 0;
 
-    border: 1px solid var(--ring-borders-color);
-
     & .actions {
       padding: 0 var(--ring-input-padding-inline);
     }
@@ -167,7 +159,7 @@
   color: var(--ring-disabled-color);
 
   @nest [dir=rtl] & {
-    padding-right: calc(var(--ring-input-padding-inline) * 3 - var(--ring-input-padding-block));
+    padding-right: calc(var(--ring-input-padding-inline) * 3 + var(--ring-input-padding-block) * 2);
 
     text-align: right;
   }
@@ -229,6 +221,14 @@
 
     border-color: var(--ring-border-hover-color);
   }
+
+  @nest [dir=rtl] & {
+    border-right: 1px solid var(--ring-borders-color);
+    border-left: 0;
+    border-radius: var(--ring-border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 }
 
 .clear {
@@ -256,6 +256,10 @@
   padding-left: 0;
 
   @nest [dir=rtl] & {
-    padding-right: 0;
+    padding-right: calc(var(--ring-input-padding-block) * 3);
   }
 }
+
+.loaderActive {
+  padding-right: calc(var(--ring-input-padding-inline) - var(--ring-input-padding-block));
+}

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

@@ -777,12 +777,11 @@ export default class QueryAssist extends Component {
         const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-            [styles.inputGap2]: actions.length === 2,
-            [styles.inputLeftGap]: this.isRenderingGlassOrLoader() && glass
+            [styles.inputGap2]: actions.length === 2 // TODO: replace with flex-box layout
         });
         const placeholderStyles = classNames({
             [styles.placeholder]: true,
-            [styles.withoutGlass]: !renderGlass
+            [styles.withoutGlass]: !this.isRenderingGlassOrLoader() || (!renderLoader && huge)
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
         <div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
@@ -791,7 +790,8 @@ export default class QueryAssist extends Component {
           {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
+                    [styles.loaderOnTheRight]: !glass,
+                    [styles.loaderActive]: renderLoader
                 })} ref={this.loaderRef}>
               <LoaderInline />
             </div>)}

package/components/radio/radio.css

@@ -76,7 +76,7 @@
   opacity: 0;
 
   &[disabled] + .circle {
-    border-color: var(--ring-border-unselected-disabled-color);
+    border-color: var(--ring-border-disabled-color);
     background-color: var(--ring-disabled-background-color);
   }
 
@@ -105,11 +105,11 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .circle {
-    border-color: var(--ring-border-disabled-color);
+    border-color: var(--ring-border-selected-disabled-color);
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
-      background-color: var(--ring-border-disabled-color);
+      background-color: var(--ring-border-selected-disabled-color);
     }
   }
 

package/dist/_helpers/query-assist__suggestions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import List from '../list/list.js';
 
-var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_d22e","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","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","input":"input_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","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","withoutGlass":"withoutGlass_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","light":"light_rui_d22e","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","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","input":"input_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","withoutGlass":"withoutGlass_rui_d22e","loaderActive":"loaderActive_rui_d22e"};
 
 const ICON_ID_LENGTH = 44;
 class QueryAssistSuggestions {

package/dist/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
-import minusIcon from '@jetbrains/icons/remove-10px';
+import minusIcon from '@jetbrains/icons/remove-14px';
 import Icon from '../icon/icon.js';
 import { refObject } from '../global/prop-types.js';
 import composeRefs from '../global/composeRefs.js';

package/dist/data-list/data-list.js

@@ -42,7 +42,7 @@ import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 
 class DataList extends PureComponent {

package/dist/data-list/item.js

@@ -29,7 +29,7 @@ import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 import '../global/get-uid.js';
 

package/dist/data-list/title.js

@@ -9,7 +9,7 @@ import '../global/prop-types.js';
 export { T as default } from '../_helpers/title.js';
 import '../global/composeRefs.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';

package/dist/data-list-ng/data-list-ng.js

@@ -48,7 +48,7 @@ import '../_helpers/button__classes.js';
 import '../_helpers/title.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 import '../data-list/selection.js';
 

package/dist/dropdown-menu/dropdown-menu.js

@@ -36,7 +36,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

package/dist/header/header.js

@@ -56,7 +56,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/header/profile.js

@@ -44,7 +44,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/header/smart-profile.js

@@ -79,7 +79,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/list/list.js

@@ -36,7 +36,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

package/dist/list/list__item.js

@@ -12,7 +12,7 @@ import '../global/url.js';
 import '../global/dom.js';
 import '../avatar/fallback-avatar.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/list/list__users-groups-source.js

@@ -35,7 +35,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

package/dist/pager/pager.js

@@ -60,7 +60,7 @@ import '../_helpers/link.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/pager-ng/pager-ng.js

@@ -66,7 +66,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/popup/position.js

@@ -81,7 +81,7 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
   const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
   const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
   const topOverflow = Math.max(viewportMinX - styles.top, 0);
-  const popupHeight = attrs.popup.clientHeight;
+  const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number' ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight) : attrs.popup.scrollHeight;
   const verticalDiff = styles.top + popupHeight - viewportMaxX;
   const bottomOverflow = Math.max(verticalDiff, 0);
   return topOverflow + bottomOverflow;
@@ -169,7 +169,9 @@ function position(attrs) {
     };
     const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
     if (!autoPositioning || directions.length === 1) {
-      styles = directionsMatrix[directions[0]];
+      styles = {
+        ...directionsMatrix[directions[0]]
+      };
       chosenDirection = directions[0];
     } else {
       const sortedByIncreasingOverflow = directions.
@@ -188,7 +190,9 @@ function position(attrs) {
         const overflowB = verticalOverflow(stylesB, scroll, overflowAttrs) + horizontalOverflow(stylesB, scroll, overflowAttrs);
         return overflowA - overflowB;
       });
-      styles = sortedByIncreasingOverflow[0].styles;
+      styles = {
+        ...sortedByIncreasingOverflow[0].styles
+      };
       chosenDirection = sortedByIncreasingOverflow[0].direction;
     }
     // because of the anchor negative margin top and left also may become negative

package/dist/popup-menu/popup-menu.js

@@ -38,7 +38,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

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

@@ -54,7 +54,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
@@ -776,12 +776,12 @@ class QueryAssist extends Component {
     const inputClasses = classNames(this.props.inputClassName, {
       [`${modules_da7ab055.input} ring-js-shortcuts`]: true,
       [modules_da7ab055.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-      [modules_da7ab055.inputGap2]: actions.length === 2,
-      [modules_da7ab055.inputLeftGap]: this.isRenderingGlassOrLoader() && glass
+      [modules_da7ab055.inputGap2]: actions.length === 2 // TODO: replace with flex-box layout
     });
+
     const placeholderStyles = classNames({
       [modules_da7ab055.placeholder]: true,
-      [modules_da7ab055.withoutGlass]: !renderGlass
+      [modules_da7ab055.withoutGlass]: !this.isRenderingGlassOrLoader() || !renderLoader && huge
     });
     return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
       value: ControlsHeight.M
@@ -801,7 +801,8 @@ class QueryAssist extends Component {
       "data-test": "query-assist-search-icon"
     }), renderLoader && /*#__PURE__*/React.createElement("div", {
       className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, {
-        [modules_da7ab055.loaderOnTheRight]: !glass
+        [modules_da7ab055.loaderOnTheRight]: !glass,
+        [modules_da7ab055.loaderActive]: renderLoader
       }),
       ref: this.loaderRef
     }, /*#__PURE__*/React.createElement(LoaderInline, null)), /*#__PURE__*/React.createElement(ContentEditable, {

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

@@ -33,7 +33,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

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

@@ -52,7 +52,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';

package/dist/select/select.js

@@ -58,7 +58,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/select/select__filter.js

@@ -47,7 +47,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';

package/dist/select/select__popup.js

@@ -51,7 +51,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/select-ng/select-ng.js

@@ -59,7 +59,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';

package/dist/select-ng/select-ng__lazy.js

@@ -55,7 +55,7 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';