@jetbrains/ring-ui 7.0.99 → 7.0.101

package/components/dropdown-menu/dropdown-menu.js

@@ -9,8 +9,8 @@ const defaultAriaLabel = 'Dropdown menu';
 function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listId, ...restProps }) {
     const anchorAriaProps = {
         ...(listId ? { 'aria-haspopup': true } : {}),
-        ...(activeListItemId ? { 'aria-activedescendant': activeListItemId, 'aria-owns': listId } : {}),
-        ...(active ? { 'aria-expanded': true } : {}),
+        ...(activeListItemId ? { 'aria-activedescendant': activeListItemId } : {}),
+        ...(active ? { 'aria-expanded': true, 'aria-owns': listId } : {}),
     };
     const anchorProps = { active, pinned, ...restProps, ...anchorAriaProps };
     const anchorComponentProps = { ...anchorProps, pinned: `${anchorProps.pinned}` };
@@ -39,7 +39,7 @@ const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, d
         id: listId,
         ariaLabel: ariaLabel || defaultAriaLabel,
         closeOnSelect: true,
-        activateFirstItem: true,
+        activateFirstItem: false,
         data,
         onSelect,
         ...menuProps,

package/components/input/input.js

@@ -97,7 +97,7 @@ export class Input extends PureComponent {
         // Modifiers
         size, multiline, borderless, 
         // Props
-        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = typeof this.context === 'function' ? this.context() : this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
+        label, labelType, error, help, className, inputClassName, clearButtonClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = typeof this.context === 'function' ? this.context() : this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, size && size !== Size.AUTO && styles[`size${size}`], styles[`height${height}`], {
@@ -129,7 +129,7 @@ export class Input extends PureComponent {
               {icon && <Icon glyph={icon} className={styles.icon}/>}
               {beforeInput}
               {multiline ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>) : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
-              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test='ring-input-clear' className={classNames(styles.clear, this.props.clearButtonClassName)} icon={closeIcon} onClick={this.clear}/>)}
+              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test='ring-input-clear' className={classNames(styles.clear, clearButtonClassName)} icon={closeIcon} onClick={this.clear}/>)}
               {afterInput}
             </div>
             {error ? (<div className={styles.errorText}>{error}</div>) : (help && <ControlHelp className={styles.helpText}>{help}</ControlHelp>)}

package/components/list/list-item.d.ts

@@ -1,5 +1,9 @@
 import { PureComponent, type SyntheticEvent } from 'react';
 import { type ListDataItemProps } from './consts';
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
 export default class ListItem<T> extends PureComponent<ListDataItemProps<T>> {
     id: string;
     stopBubbling: (e: SyntheticEvent) => void;

package/components/list/list-item.js

@@ -13,9 +13,6 @@ import styles from './list.css';
  * @constructor
  * @extends {ReactComponent}
  */
-const RING_UNIT = 8;
-const DEFAULT_PADDING = 8;
-const CHECKBOX_WIDTH = 28;
 export default class ListItem extends PureComponent {
     id = getUID('list-item-');
     stopBubbling = (e) => e.stopPropagation();
@@ -31,10 +28,12 @@ export default class ListItem extends PureComponent {
         const classes = getListClasses(this.props);
         const detailsClasses = classNames({
             [styles.details]: details,
-            [styles.padded]: icon !== undefined || checkbox !== undefined || glyph !== undefined,
+            [styles.padded]: !showCheckbox && hasLeftNodes,
         }, detailsClassName);
+        const levelPadding = `var(--ring-unit) * ${1 + (Number(level) || 0)}`;
+        const checkboxPadding = showCheckbox ? ' + var(--ring-list-item-icon-size) + var(--ring-unit)' : '';
         const style = {
-            paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`,
+            paddingLeft: `calc(${levelPadding}${checkboxPadding})`,
         };
         let computedTitle;
         if (this._isString(title)) {

package/components/list/list.css

@@ -74,6 +74,8 @@
 }
 
 .itemContainer {
+  --ring-list-item-icon-size: 20px;
+
   position: relative;
 }
 
@@ -150,7 +152,7 @@
 }
 
 .padded {
-  margin-left: 20px;
+  margin-left: calc(var(--ring-unit) + var(--ring-list-item-icon-size));
 }
 
 /* Override :last-child */
@@ -194,8 +196,8 @@
 .icon {
   display: inline-block;
 
-  width: 20px;
-  height: 20px;
+  width: var(--ring-list-item-icon-size);
+  height: var(--ring-list-item-icon-size);
   margin-left: calc(var(--ring-unit) * 2);
 
   background-repeat: no-repeat;
@@ -215,7 +217,7 @@
 .glyph {
   float: left;
 
-  width: 20px;
+  width: var(--ring-list-item-icon-size);
 
   margin-right: var(--ring-unit);
 
@@ -227,7 +229,7 @@
 
   top: 0;
 
-  height: 20px;
+  height: var(--ring-list-item-icon-size);
 
   object-fit: cover;
   object-position: center;
@@ -247,8 +249,8 @@
   top: 7px;
   left: 19px;
 
-  width: 20px;
-  height: 20px;
+  width: var(--ring-list-item-icon-size);
+  height: var(--ring-list-item-icon-size);
   margin-right: var(--ring-unit);
 }
 

package/components/list/list.js

@@ -342,7 +342,13 @@ export default class List extends Component {
         else {
             const itemId = this.getId(this.props.data[activeIndex]);
             if (itemId) {
-                document.getElementById(itemId)?.scrollIntoView?.({ block: 'center' });
+                // scrollIntoView({container: 'nearest'}) is not yet supported in Firefox and Safari, emulating
+                const itemElement = document.getElementById(itemId);
+                const scrollerElement = this.inner;
+                if (itemElement && scrollerElement) {
+                    scrollerElement.scrollTop =
+                        itemElement.offsetTop + itemElement.clientHeight / 2 - scrollerElement.clientHeight / 2;
+                }
             }
         }
     };

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.99",
+  "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",