@jetbrains/ring-ui 7.0.20 → 7.0.22

package/components/avatar/avatar.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/components/avatar/avatar.figma.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from '@figma/code-connect';
+import Avatar, { Size } from './avatar';
+figma.connect(Avatar, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?m=auto&node-id=5990-522&t=v8bItK8qotmnbysK-1', {
+    props: {
+        round: figma.boolean('Round'),
+        size: figma.enum('Size', {
+            '20 px': Size.Size20,
+            '24 px': Size.Size24,
+            '28 px': Size.Size28,
+            '32 px': Size.Size32,
+            '40px': Size.Size40,
+            '56px': Size.Size56,
+        }),
+        username: figma.enum('Content', {
+            name: 'Samuel Morse',
+        }),
+        url: figma.enum('Content', {
+            'color/image': 'avatar.png',
+        }),
+    },
+    example: props => _jsx(Avatar, { ...props }),
+    imports: ['import Avatar, {Size} from "@jetbrains/ring-ui/components/avatar/avatar"'],
+});

package/components/list/list.css

@@ -78,18 +78,6 @@
   line-height: calc(var(--ring-unit) * 2);
 }
 
-.error {
-  cursor: default;
-
-  /* Override ring-link */
-  &,
-  &:hover,
-  &:focus,
-  &:visited {
-    color: var(--ring-error-color);
-  }
-}
-
 .add {
   padding: var(--ring-unit) calc(2 * var(--ring-unit));
 
@@ -184,16 +172,19 @@
 }
 
 /* override link */
-.actionLink.actionLink {
+.actionLink.actionLink.actionLink {
   transition: none;
+  text-decoration-line: none;
+
+  color: var(--ring-text-color);
 }
 
-.item:hover:not(.error) {
+.action:hover {
   background-color: var(--ring-hover-background-color);
 }
 
 /* TODO rename .hover to .selected in 8.0 */
-.item.hover:not(.error) {
+.action.hover {
   background-color: var(--ring-selected-background-color);
 }
 
@@ -310,7 +301,10 @@
 }
 
 .disabled {
-  pointer-events: none;
-
   color: var(--ring-disabled-color);
 }
+
+.item:not(.action),
+.disabled {
+  pointer-events: none;
+}

package/components/list/list__classes.d.ts

@@ -0,0 +1,2 @@
+import { ListDataItemProps } from './consts';
+export declare function getListClasses<T = unknown>({ className, disabled, hover, compact, scrolling, rgItemType, }: Readonly<ListDataItemProps<T>>): string;

package/components/list/list__classes.js

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import globalStyles from '../global/global.css';
+import { Type } from './consts';
+import styles from './list.css';
+export function getListClasses({ className, disabled, hover, compact, scrolling, rgItemType, }) {
+    return classNames(styles.item, globalStyles.resetButton, className, {
+        [styles.action]: !disabled,
+        [styles.actionLink]: !disabled && rgItemType === Type.LINK,
+        [styles.hover]: hover && !disabled,
+        [styles.compact]: compact,
+        [styles.scrolling]: scrolling,
+        [styles.disabled]: disabled,
+    });
+}

package/components/list/list__custom.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
-import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import getEventKey from '../global/get-event-key';
-import styles from './list.css';
+import { getListClasses } from './list__classes';
 export default class ListCustom extends PureComponent {
     handleKeyPress = (event) => {
         const key = getEventKey(event);
@@ -12,15 +11,11 @@ export default class ListCustom extends PureComponent {
         }
     };
     render() {
-        const { scrolling, hover, className, disabled, template, rgItemType, tabIndex, onClick, onCheckboxChange, onMouseOver, onMouseUp, role, tagName, ...restProps } = this.props;
-        const classes = classNames(styles.item, className, {
-            [styles.action]: !disabled,
-            [styles.hover]: hover && !disabled,
-            [styles.scrolling]: scrolling,
-        });
+        const { disabled, template, tabIndex, onClick, onMouseOver, onMouseUp, role, tagName } = this.props;
+        const classes = getListClasses(this.props);
         const dataTest = dataTests('ring-list-item-custom', {
             'ring-list-item-action': !disabled,
-        }, restProps['data-test']);
+        }, this.props['data-test']);
         const content = typeof template === 'function' ? template(this.props) : template;
         const TagName = tagName || 'span';
         return (_jsx(TagName, { role: role || 'button', tabIndex: tabIndex, onClick: onClick, onKeyPress: this.handleKeyPress, onMouseOver: onMouseOver, onFocus: onMouseOver, onMouseUp: onMouseUp, className: classes, "data-test": dataTest, children: content }));

package/components/list/list__item.js

@@ -6,8 +6,8 @@ import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Checkbox from '../checkbox/checkbox';
 import Icon from '../icon/icon';
 import getUID from '../global/get-uid';
-import globalStyles from '../global/global.css';
 import styles from './list.css';
+import { getListClasses } from './list__classes';
 /**
  * @constructor
  * @extends {ReactComponent}
@@ -20,18 +20,12 @@ export default class ListItem extends PureComponent {
     stopBubbling = (e) => e.stopPropagation();
     _isString = (val) => typeof val === 'string' || val instanceof String;
     render() {
-        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, ...restProps } = this.props;
+        const { disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, level, tabIndex, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, } = this.props;
         const checkable = checkbox !== undefined;
         const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
         const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
         const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));
-        const classes = classNames(styles.item, globalStyles.resetButton, className, {
-            [styles.action]: !disabled,
-            [styles.hover]: hover && !disabled,
-            [styles.compact]: compact,
-            [styles.scrolling]: scrolling,
-            [styles.disabled]: disabled,
-        });
+        const classes = getListClasses(this.props);
         const detailsClasses = classNames({
             [styles.details]: details,
             [styles.padded]: icon !== undefined || checkbox !== undefined || glyph !== undefined,
@@ -50,10 +44,10 @@ export default class ListItem extends PureComponent {
             computedTitle = this._isString(label) ? label : '';
         }
         const dataTest = dataTests({
-            'ring-list-item': (restProps['data-test'] || '').indexOf('ring-list-item') === -1,
+            'ring-list-item': (this.props['data-test'] || '').indexOf('ring-list-item') === -1,
             'ring-list-item-action': !disabled,
             'ring-list-item-selected': checkbox,
-        }, restProps['data-test']);
+        }, this.props['data-test']);
         const labelElement = (_jsx("span", { className: styles.label, title: computedTitle, "data-test": "ring-list-item-label", children: label }));
         return (_jsxs("div", { className: styles.itemContainer, "data-test": dataTest, children: [showCheckbox && (_jsx("div", { className: styles.checkboxContainer, children: _jsx(Checkbox, { "aria-labelledby": this.id, checked: checkbox, disabled: disabled, onChange: onCheckboxChange, onClick: this.stopBubbling }) })), _jsxs("button", { id: this.id, type: "button", tabIndex: tabIndex, onClick: onClick, onMouseOver: onMouseOver, onMouseDown: onMouseDown, onFocus: onMouseOver, onMouseUp: onMouseUp, className: classes, style: style, disabled: disabled, children: [_jsxs("div", { className: styles.top, onMouseOut: this.stopBubbling, onBlur: this.stopBubbling, children: [!showCheckbox && (_jsxs("div", { className: styles.left, children: [leftNodes, glyph && (_jsx(Icon, { className: styles.glyph, glyph: glyph, size: this.props.iconSize, suppressSizeWarning: this.props.suppressSizeWarning })), (avatar || shouldShowGeneratedAvatar) && (_jsx(Avatar, { className: styles.avatar, url: avatar, size: AvatarSize.Size20, subavatar: subavatar, username: username }))] })), labelWrapper ? labelWrapper(labelElement) : labelElement, description && (_jsx("span", { className: styles.description, "data-test": "ring-list-item-description", children: description })), _jsxs("div", { className: styles.right, children: [rightGlyph && (_jsx(Icon, { className: styles.rightGlyph, glyph: rightGlyph, suppressSizeWarning: this.props.suppressSizeWarning, size: this.props.iconSize })), icon && _jsx("div", { className: styles.icon, style: { backgroundImage: `url("${icon}")` } }), rightNodes] })] }), details && _jsx("div", { className: detailsClasses, children: details })] })] }));
     }

package/components/list/list__link.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
-import classNames from 'classnames';
 import Link, { linkHOC } from '../link/link';
 import dataTests from '../global/data-tests';
-import styles from './list.css';
+import { getListClasses } from './list__classes';
 /**
  * @constructor
  * @extends {ReactComponent}
@@ -11,12 +10,8 @@ import styles from './list.css';
 export default class ListLink extends PureComponent {
     render() {
         const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, children, ...restProps } = this.props;
-        const classes = classNames(styles.item, className, {
-            [styles.actionLink]: !disabled,
-            [styles.compact]: compact,
-            [styles.scrolling]: scrolling,
-        });
+        const classes = getListClasses(this.props);
         const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
-        return (_jsx(Comp, { pseudo: !this.props.href, ...restProps, hover: hover && !disabled, className: classes, "data-test": dataTests('ring-list-link', dataTest), children: label ?? children }));
+        return (_jsx(Comp, { pseudo: !this.props.href, ...restProps, className: classes, "data-test": dataTests('ring-list-link', dataTest), children: label ?? children }));
     }
 }

package/components/tooltip/tooltip.js

@@ -119,6 +119,6 @@ export default class Tooltip extends Component {
         const { children, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, ...restProps } = this.props;
         const ariaProps = typeof title === 'string' && !!title ? { 'aria-label': title, role: 'tooltip' } : {};
         const { onNestedTooltipShow, onNestedTooltipHide } = this;
-        return (_jsx(TooltipContext.Provider, { value: { onNestedTooltipShow, onNestedTooltipHide }, children: _jsxs("span", { ...ariaProps, ...restProps, ref: this.containerRef, "data-test": dataTests('ring-tooltip', dataTest), "data-test-title": typeof title === 'string' ? title : undefined, children: [children, _jsx(ThemeProvider, { theme: theme, passToPopups: true, WrapperComponent: props => _jsx("span", { ...props }), children: _jsx(Popup, { trapFocus: false, anchorElement: this.containerNode, hidden: !this.state.showPopup || this.state.showNestedPopup, onCloseAttempt: this.hidePopup, maxHeight: 400, className: classNames(styles.tooltip, { [styles.long]: long }), attached: false, onMouseOut: this.hideIfMovedOutsidePopup, top: 4, dontCloseOnAnchorClick: true, ref: this.popupRef, ...popupProps, children: title }) })] }) }));
+        return (_jsx(TooltipContext.Provider, { value: { onNestedTooltipShow, onNestedTooltipHide }, children: _jsxs("span", { ...ariaProps, ...restProps, ref: this.containerRef, "data-test": dataTests('ring-tooltip', dataTest), "data-test-title": typeof title === 'string' ? title : undefined, children: [children, _jsx(ThemeProvider, { theme: theme, passToPopups: true, WrapperComponent: props => _jsx("span", { ...props }), children: _jsx(Popup, { trapFocus: false, anchorElement: this.containerNode, hidden: !this.state.showPopup || this.state.showNestedPopup, onCloseAttempt: this.hidePopup, maxHeight: 400, attached: false, onMouseOut: this.hideIfMovedOutsidePopup, top: 4, dontCloseOnAnchorClick: true, ref: this.popupRef, ...popupProps, className: classNames(styles.tooltip, { [styles.long]: long }, popupProps?.className), children: title }) })] }) }));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.20",
+  "version": "7.0.22",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -86,13 +86,13 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@babel/cli": "^7.26.4",
-    "@babel/eslint-parser": "^7.25.9",
+    "@babel/eslint-parser": "^7.26.5",
     "@babel/plugin-syntax-import-assertions": "^7.26.0",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.2.4",
+    "@eslint/compat": "^1.2.5",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "^9.18.0",
     "@figma/code-connect": "^1.2.4",
     "@jetbrains/eslint-config": "^6.0.4",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
@@ -116,8 +116,8 @@
     "@storybook/test-runner": "^0.21.0",
     "@storybook/theming": "8.4.7",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.0",
     "@types/chai": "^5.0.1",
     "@types/chai-as-promised": "^8.0.1",
     "@types/chai-dom": "0.0.10",
@@ -131,30 +131,30 @@
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.5",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/eslint-plugin": "^1.1.22",
+    "@vitest/eslint-plugin": "^1.1.25",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001692",
+    "caniuse-lite": "^1.0.30001695",
     "chai": "^5.1.2",
     "chai-as-promised": "^8.0.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "chromatic": "^11.22.2",
+    "chromatic": "^11.25.0",
     "core-js": "^3.40.0",
     "cpy-cli": "^5.0.0",
     "dotenv-cli": "^8.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-webpack": "^0.13.10",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-storybook": "^0.11.2",
     "events": "^3.3.0",
@@ -167,7 +167,7 @@
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^15.3.0",
+    "lint-staged": "^15.4.1",
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -178,19 +178,19 @@
     "react-test-renderer": "^19.0.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.30.1",
+    "rollup": "^4.31.0",
     "rollup-plugin-clear": "^2.0.7",
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
     "storybook": "8.4.7",
-    "stylelint": "^16.12.0",
+    "stylelint": "^16.13.2",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.11",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.19.1",
-    "vitest": "^2.1.8",
+    "typescript-eslint": "^8.20.0",
+    "vitest": "^3.0.2",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.97.1",
@@ -240,11 +240,11 @@
     "es6-error": "^4.1.1",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.6.2",
+    "focus-trap": "^7.6.4",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "postcss-calc": "^10.1.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",