@jetbrains/ring-ui 7.0.98 → 7.0.100

package/components/button/button.css

@@ -46,8 +46,10 @@
   --ring-button-default-background-color: transparent;
   --ring-button-background-color: var(--ring-button-default-background-color);
   --ring-button-hover-background-color: var(--ring-content-background-color);
-  --ring-button-pressed-background-color: var(--ring-selected-background-color);
+  --ring-button-pressed-background-color: var(--ring-hover-background-color);
   --ring-button-active-background-color: var(--ring-main-container-light-color);
+  --ring-button-active-hover-background-color: var(--ring-hover-background-color);
+  --ring-button-active-pressed-background-color: var(--ring-selected-background-color);
   --ring-button-disabled-background-color: var(--ring-button-default-background-color);
 
   box-sizing: border-box;
@@ -89,8 +91,8 @@
   --ring-button-default-background-color: var(--ring-content-background-color);
   --ring-button-default-border-color: var(--ring-borders-color);
   --ring-button-border-color: var(--ring-button-default-border-color);
-  --ring-button-hover-border-color: var(--ring-border-hover-color);
-  --ring-button-pressed-border-color: var(--ring-border-hover-color);
+  --ring-button-hover-border-color: var(--ring-border-accent-color);
+  --ring-button-pressed-border-color: var(--ring-border-accent-color);
   --ring-button-active-border-color: var(--ring-main-color);
   --ring-button-disabled-border-color: var(--ring-border-disabled-color);
   --ring-button-text-color: var(--ring-text-color);
@@ -174,7 +176,7 @@
 }
 
 .active {
-  --ring-button-disabled-background-color: var(--ring-hover-background-color);
+  --ring-button-disabled-background-color: var(--ring-main-container-light-color);
   --ring-button-disabled-border-color: var(--ring-border-hover-color);
 
   transition: none;
@@ -185,6 +187,14 @@
   --ring-button-border-color: var(--ring-button-active-border-color);
 }
 
+.active:hover {
+  --ring-button-active-background-color: var(--ring-button-active-hover-background-color);
+}
+
+.active:active {
+  --ring-button-active-background-color: var(--ring-button-active-pressed-background-color);
+}
+
 .disabled {
   cursor: auto;
 
@@ -196,6 +206,8 @@
 .danger {
   --ring-button-pressed-background-color: var(--ring-button-danger-active-color);
   --ring-button-active-background-color: var(--ring-button-danger-active-color);
+  --ring-button-active-hover-background-color: var(--ring-button-danger-active-color);
+  --ring-button-active-pressed-background-color: var(--ring-button-danger-active-color);
   --ring-button-focus-border-color: var(--ring-removed-background-color);
   --ring-button-hover-border-color: var(--ring-button-danger-hover-color);
   --ring-button-pressed-border-color: var(--ring-button-danger-hover-color);
@@ -224,6 +236,8 @@
   --ring-button-hover-background-color: var(--ring-main-hover-color);
   --ring-button-pressed-background-color: var(--ring-button-primary-background-color);
   --ring-button-active-background-color: var(--ring-button-primary-background-color);
+  --ring-button-active-hover-background-color: var(--ring-main-hover-color);
+  --ring-button-active-pressed-background-color: var(--ring-button-primary-background-color);
   --ring-button-disabled-background-color: var(--ring-border-hover-color);
   --ring-button-pressed-border-color: var(--ring-button-primary-border-color);
   --ring-button-active-border-color: var(--ring-button-primary-border-color);
@@ -237,6 +251,8 @@
   --ring-button-hover-background-color: var(--ring-main-success-hover-color);
   --ring-button-pressed-background-color: var(--ring-main-success-hover-color);
   --ring-button-active-background-color: var(--ring-main-success-hover-color);
+  --ring-button-active-hover-background-color: var(--ring-main-success-hover-color);
+  --ring-button-active-pressed-background-color: var(--ring-main-success-hover-color);
   --ring-button-disabled-background-color: var(--ring-added-background-color);
   --ring-button-focus-border-color: var(--ring-border-hover-success-color);
   --ring-button-pressed-border-color: var(--ring-success-color);
@@ -252,6 +268,8 @@
   --ring-button-hover-background-color: var(--ring-main-error-hover-color);
   --ring-button-pressed-background-color: var(--ring-main-error-hover-color);
   --ring-button-active-background-color: var(--ring-main-error-hover-color);
+  --ring-button-active-hover-background-color: var(--ring-main-error-hover-color);
+  --ring-button-active-pressed-background-color: var(--ring-main-error-hover-color);
   --ring-button-disabled-background-color: var(--ring-removed-background-color);
   --ring-button-focus-border-color: var(--ring-border-hover-error-color);
   --ring-button-pressed-border-color: var(--ring-error-color);

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

@@ -119,7 +119,7 @@
 .buttonGroup .button.button:hover:not(:disabled),
 .buttonGroup .button.button:active:not(:disabled) {
   border-radius: var(--ring-border-radius);
-  box-shadow: var(--ring-button-shadow) var(--ring-border-hover-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
 .buttonGroup .button.button:focus-visible {
@@ -131,13 +131,13 @@
 
 .buttonGroup .button.button.active {
   border-radius: var(--ring-border-radius);
-  box-shadow: var(--ring-button-shadow) var(--ring-main-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
 .buttonGroup .button:focus-visible.active {
   border-radius: var(--ring-border-radius);
   box-shadow:
-    var(--ring-button-shadow) var(--ring-main-color),
+    var(--ring-button-shadow) var(--ring-button-border-color),
     0 0 0 1px var(--ring-border-hover-color);
 }
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.98",
+  "version": "7.0.100",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -117,11 +117,11 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.2.13",
-    "@storybook/addon-docs": "^10.2.13",
-    "@storybook/addon-themes": "^10.2.13",
+    "@storybook/addon-a11y": "10.2.14",
+    "@storybook/addon-docs": "^10.2.14",
+    "@storybook/addon-themes": "^10.2.14",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.2.13",
+    "@storybook/react-webpack5": "10.2.14",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -145,7 +145,7 @@
     "dotenv-cli": "^11.0.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-formatter-jslint-xml": "^8.40.0",
+    "eslint-formatter-jslint-xml": "^9.0.1",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-import-resolver-webpack": "^0.13.10",
@@ -154,11 +154,11 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.13",
+    "eslint-plugin-storybook": "^10.2.14",
     "eslint-plugin-unicorn": "^63.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
-    "globals": "^17.3.0",
+    "globals": "^17.4.0",
     "html-webpack-plugin": "^5.6.6",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -166,7 +166,7 @@
     "jest": "~30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^16.3.1",
     "markdown-it": "^14.1.1",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -179,7 +179,7 @@
     "rollup": "^4.59.0",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.2.13",
+    "storybook": "10.2.14",
     "stylelint": "^17.4.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
@@ -217,7 +217,7 @@
     "@babel/core": "^7.29.0",
     "@babel/preset-typescript": "^7.28.5",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.16.0",
+    "@jetbrains/icons": "^5.17.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",