@jetbrains/ring-ui-built 7.0.100 → 7.0.102

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

@@ -45,6 +45,7 @@ export interface TagsInputProps {
     label?: ReactNode;
     labelType?: LabelType;
     id?: string | undefined;
+    error?: ReactNode | null | undefined;
 }
 interface TagsInputState {
     tags: TagType[];

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

@@ -10,8 +10,8 @@ import { S as Size, i as inputStyles } from '../_helpers/input.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import getUID from '../global/get-uid.js';
 import { ControlLabel } from '../control-label/control-label.js';
+import ChevronButton from '../select/chevron-button.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'dequal';
 import '../global/data-tests.js';
@@ -19,6 +19,7 @@ import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import 'react-compiler-runtime';
 import '../button/button.js';
+import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import 'util-deprecate';
 import '../icon/icon.js';
@@ -80,13 +81,13 @@ import '../text/text.js';
 import '../_helpers/select-filter.js';
 import '../tag/tag.js';
 
-var styles = {"outerContainer":"ring-input-outerContainer","container":"ring-input-container","input":"ring-input-input","tagsInput":"ring-tags-input-tagsInput","tagsInputDisabled":"ring-tags-input-tagsInputDisabled","tagsInputFocused":"ring-tags-input-tagsInputFocused","tagsList":"ring-tags-input-tagsList","tagsSelect":"ring-tags-input-tagsSelect"};
+var styles = {"outerContainer":"ring-input-outerContainer","container":"ring-input-container","input":"ring-input-input","tagsInput":"ring-tags-input-tagsInput","tagsInputDisabled":"ring-tags-input-tagsInputDisabled","tagsInputFocused":"ring-tags-input-tagsInputFocused","tagsList":"ring-tags-input-tagsList","error":"ring-tags-input-error","tagInputChevronButton":"ring-tags-input-tagInputChevronButton","tagsSelect":"ring-tags-input-tagsSelect"};
 
 function noop() {}
 /**
  * @name Tags Input
  */
-const POPUP_VERTICAL_SHIFT = 2;
+const POPUP_VERTICAL_SHIFT = -2;
 class TagsInput extends PureComponent {
   static defaultProps = {
     dataSource: noop,
@@ -205,7 +206,7 @@ class TagsInput extends PureComponent {
     }, this.focusInput);
   }
   clickHandler = event => {
-    if (event.target !== this.node && event.target.parentElement !== this.node) {
+    if (event.target !== this.node && event.target.parentElement !== this.node && !this.node?.querySelector(`.${styles.tagInputChevronButton}`)?.contains(event.target)) {
       return;
     }
     // eslint-disable-next-line no-underscore-dangle
@@ -341,7 +342,8 @@ class TagsInput extends PureComponent {
       size,
       labelType,
       height = typeof this.context === 'function' ? this.context() : this.context,
-      label
+      label,
+      error
     } = this.props;
     const classes = classNames(styles.tagsInput, size !== Size.AUTO && [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
       [styles.tagsInputDisabled]: disabled,
@@ -359,16 +361,18 @@ class TagsInput extends PureComponent {
         disabled: disabled,
         type: labelType,
         children: label
-      }), /*#__PURE__*/jsx(TagsList, {
+      }), /*#__PURE__*/jsxs(TagsList, {
         tags: tags,
         activeIndex: activeIndex,
         disabled: disabled,
         canNotBeEmpty: canNotBeEmpty,
         handleRemove: this.handleRemove,
-        className: styles.tagsList,
+        className: classNames(styles.tagsList, error != null && styles.error),
         handleClick: this.handleClick,
         customTagComponent: this.props.customTagComponent,
-        children: /*#__PURE__*/jsx(Select, {
+        children: [/*#__PURE__*/jsx(ChevronButton, {
+          className: styles.tagInputChevronButton
+        }), /*#__PURE__*/jsx(Select, {
           id: this.id,
           ref: this.selectRef,
           size: Select.Size.AUTO,
@@ -395,8 +399,10 @@ class TagsInput extends PureComponent {
           disabled: this.props.disabled,
           loadingMessage: this.props.loadingMessage,
           notFoundMessage: this.props.notFoundMessage,
-          hint: this.props.hint
-        })
+          hint: this.props.hint,
+          error: error,
+          targetElement: this.node
+        })]
       })]
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "7.0.100",
+  "version": "7.0.102",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"