@jetbrains/ring-ui 5.0.81 → 5.0.83

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

@@ -19,6 +19,8 @@
   min-height: calc(var(--ring-input-padding-inline) * 3);
   padding: var(--ring-input-padding-block) var(--ring-input-padding-inline);
 
+  transition: border-color var(--ring-ease);
+
   border: 1px solid var(--ring-borders-color);
   border-radius: var(--ring-border-radius);
 
@@ -28,6 +30,34 @@
   & * {
     box-sizing: border-box;
   }
+
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  &:focus-within {
+    transition: none;
+
+    border-color: var(--ring-main-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;
+    }
+  }
+
+  @nest .error & {
+    border-color: var(--ring-icon-error-color);
+  }
 }
 
 .queryAssistDisabled {
@@ -45,8 +75,6 @@
 
   padding: 0 0 0 var(--ring-input-padding-inline);
 
-  border-right: 0;
-
   & .actions {
     padding-right: var(--ring-input-padding-inline);
   }
@@ -67,9 +95,10 @@
 }
 
 .input {
-  overflow: auto;
+  overflow: hidden;
+
+  flex-grow: 1;
 
-  width: 100%;
   margin: 0;
 
   cursor: text;
@@ -85,34 +114,6 @@
   scrollbar-width: none;
 
   caret-color: var(--ring-main-color);
-
-  &:hover {
-    transition: none;
-
-    border-color: var(--ring-border-hover-color);
-  }
-
-  @nest .error & {
-    border-color: var(--ring-icon-error-color);
-  }
-
-  &:focus {
-    transition: none;
-
-    border-color: var(--ring-main-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;
-    }
-  }
 }
 
 .letter-text {
@@ -212,6 +213,7 @@
   color: var(--ring-icon-secondary-color);
 
   border: 1px solid var(--ring-borders-color);
+  border-right: 0;
   border-radius: var(--ring-border-radius);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

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

@@ -35,6 +35,10 @@
   --ring-input-padding-start: var(--ring-input-padding-inline);
   --ring-input-padding-end: var(--ring-input-padding-inline);
 
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
   width: 100%;
 
   margin: 0;
@@ -76,6 +80,17 @@
 }
 
 .tagsSelect {
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  min-width: 160px;
+
+  & .input {
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+  }
+
   & .outerContainer {
     --ring-input-padding-block: 0;
   }

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

@@ -141,11 +141,10 @@ export default class TagsInput extends PureComponent {
         }, this.focusInput);
     }
     clickHandler = (event) => {
-        if (event.target !== this.node) {
+        if (event.target !== this.node && event.target.parentElement !== this.node) {
             return;
         }
-        this.loadSuggestions(this.getInputNode()?.value);
-        this.focusInput();
+        this.select?._clickHandler();
     };
     filterExistingTags = (suggestions) => {
         const tagsMap = new Map(this.state.tags.map(tag => [tag.key, tag]));

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","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","input":"input_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","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","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"};
 
 const ICON_ID_LENGTH = 44;
 class QueryAssistSuggestions {

package/dist/data-list/item.js

@@ -7,7 +7,7 @@ import Link from '../link/link.js';
 import Text from '../text/text.js';
 import LoaderInline from '../loader-inline/loader-inline.js';
 import { Button } from '../button/button.js';
-import Selection from '../table/selection.js';
+import Selection$1 from '../table/selection.js';
 import { m as modules_09d014b4, T as Title } from '../_helpers/title.js';
 import 'focus-visible';
 import 'classnames';
@@ -202,7 +202,7 @@ Item.propTypes = {
   onExpand: PropTypes.func,
   showFocus: PropTypes.bool,
   onFocus: PropTypes.func.isRequired,
-  selection: PropTypes.instanceOf(Selection).isRequired,
+  selection: PropTypes.instanceOf(Selection$1).isRequired,
   selectable: PropTypes.bool,
   selected: PropTypes.bool,
   onSelect: PropTypes.func.isRequired,