@jetbrains/ring-ui 7.0.100 → 7.0.101

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

@@ -65,7 +65,11 @@
     padding-left: var(--ring-input-padding-end);
   }
 
-  &:hover {
+  &.error {
+    border-color: var(--ring-error-color);
+  }
+
+  &:hover:not(.error) {
     transition: none;
 
     border-color: var(--ring-border-hover-color);

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

@@ -228,7 +228,7 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = typeof this.context === 'function' ? this.context() : this.context, label, } = this.props;
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = typeof this.context === 'function' ? this.context() : this.context, label, error, } = this.props;
         const classes = classNames(styles.tagsInput, size !== Size.AUTO && [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused,
@@ -240,8 +240,8 @@ export default class TagsInput extends PureComponent {
             {label}
           </ControlLabel>)}
 
-        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
-          <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} hint={this.props.hint}/>
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={classNames(styles.tagsList, error != null && styles.error)} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
+          <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} hint={this.props.hint} error={error}/>
         </TagsList>
       </div>);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.100",
+  "version": "7.0.101",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -103,8 +103,8 @@
     "@babel/eslint-parser": "^7.28.6",
     "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/stylelint-no-at-nest-rule": "^5.0.0",
-    "@eslint/compat": "^2.0.2",
-    "@eslint/eslintrc": "^3.3.4",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
     "@figma/code-connect": "^1.4.1",
     "@jetbrains/eslint-config": "^6.0.5",
@@ -113,15 +113,15 @@
     "@jetbrains/stylelint-config": "^4.0.2",
     "@jetbrains/typescript-plugin-css-modules": "^5.3.1",
     "@primer/octicons": "^19.22.0",
-    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.2.14",
-    "@storybook/addon-docs": "^10.2.14",
-    "@storybook/addon-themes": "^10.2.14",
+    "@storybook/addon-a11y": "10.2.16",
+    "@storybook/addon-docs": "^10.2.16",
+    "@storybook/addon-themes": "^10.2.16",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.2.14",
+    "@storybook/react-webpack5": "10.2.16",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -136,7 +136,7 @@
     "@vitest/eslint-plugin": "^1.6.9",
     "acorn": "^8.16.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001770",
+    "caniuse-lite": "^1.0.30001777",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.2.0",
@@ -154,7 +154,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.14",
+    "eslint-plugin-storybook": "^10.2.16",
     "eslint-plugin-unicorn": "^63.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
@@ -166,7 +166,7 @@
     "jest": "~30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^16.3.1",
+    "lint-staged": "^16.3.2",
     "markdown-it": "^14.1.1",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -179,18 +179,18 @@
     "rollup": "^4.59.0",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.2.14",
+    "storybook": "10.2.16",
     "stylelint": "^17.4.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
-    "terser-webpack-plugin": "^5.3.16",
+    "terser-webpack-plugin": "^5.3.17",
     "typed-css-modules": "^0.9.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
     "vitest": "^4.0.18",
     "vitest-teamcity-reporter": "^0.4.1",
-    "webpack": "^5.105.3",
+    "webpack": "^5.105.4",
     "webpack-cli": "^6.0.1",
     "xmlappend": "^1.0.4"
   },
@@ -223,7 +223,7 @@
     "@types/element-resize-detector": "^1.1.6",
     "@types/react-virtualized": "9.22.3",
     "@types/util-deprecate": "^1.0.4",
-    "babel-loader": "10.0.0",
+    "babel-loader": "10.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
     "browserslist": "^4.28.1",
@@ -241,7 +241,7 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-calc": "^10.1.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",