@jetbrains/ring-ui 7.0.21 → 7.0.23

package/components/avatar/avatar-info.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { Size } from './avatar-size';
+interface InfoAvatarProps {
+    size: Size;
+    children?: ReactNode;
+}
+export default function AvatarInfo({ size, children }: InfoAvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/avatar/avatar-info.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import styles from './avatar.css';
+import { Size } from './avatar-size';
+const fontSizes = {
+    [Size.Size16]: 9,
+    [Size.Size18]: 9,
+    [Size.Size20]: 9,
+    [Size.Size24]: 11,
+    [Size.Size28]: 12,
+    [Size.Size32]: 14,
+    [Size.Size40]: 16,
+    [Size.Size48]: 16,
+    [Size.Size56]: 22,
+};
+export default function AvatarInfo({ size, children }) {
+    const fontSize = fontSizes[size];
+    return (_jsx("span", { style: { fontSize }, className: classNames(styles.avatarInfo), children: children }));
+}

package/components/avatar/avatar-shadow-filter.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
+  <defs>
+    <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feComponentTransfer in="SourceAlpha">
+        <feFuncA type="table" tableValues="1 0" />
+      </feComponentTransfer>
+      <feGaussianBlur stdDeviation="4"/>
+      <feOffset dx="0" dy="0" result="offsetblur"/>
+      <feFlood flood-color="rgba(0, 0, 0, 0.07)"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feComposite in="SourceAlpha" operator="in" />
+      <feMerge>
+        <feMergeNode in="SourceGraphic" />
+        <feMergeNode />
+      </feMerge>
+    </filter>
+  </defs>
+</svg>

package/components/avatar/avatar-size.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @name Avatar
+ */
+export declare enum Size {
+    Size16 = 16,
+    /** @deprecated */
+    Size18 = 18,
+    Size20 = 20,
+    Size24 = 24,
+    Size28 = 28,
+    Size32 = 32,
+    Size40 = 40,
+    /** @deprecated */
+    Size48 = 48,
+    Size56 = 56
+}

package/components/avatar/avatar-size.js

@@ -0,0 +1,17 @@
+/**
+ * @name Avatar
+ */
+export var Size;
+(function (Size) {
+    Size[Size["Size16"] = 16] = "Size16";
+    /** @deprecated */
+    Size[Size["Size18"] = 18] = "Size18";
+    Size[Size["Size20"] = 20] = "Size20";
+    Size[Size["Size24"] = 24] = "Size24";
+    Size[Size["Size28"] = 28] = "Size28";
+    Size[Size["Size32"] = 32] = "Size32";
+    Size[Size["Size40"] = 40] = "Size40";
+    /** @deprecated */
+    Size[Size["Size48"] = 48] = "Size48";
+    Size[Size["Size56"] = 56] = "Size56";
+})(Size || (Size = {}));

package/components/avatar/avatar.css

@@ -10,6 +10,25 @@
   border-radius: var(--ring-border-radius);
 }
 
+.avatarShadow {
+  /* See https://stackoverflow.com/questions/21414925/why-doesnt-inset-box-shadow-work-over-images */
+
+  filter: url('avatar-shadow-filter.svg#inset-shadow');
+}
+
+.avatarInfo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+
+  color: var(--ring-secondary-color);
+  border-radius: inherit;
+
+  background-color: var(--ring-disabled-background-color);
+}
+
 .subavatar {
   position: absolute;
   top: 15px;

package/components/avatar/avatar.d.ts

@@ -1,19 +1,6 @@
-import { PureComponent, ImgHTMLAttributes } from 'react';
-/**
- * @name Avatar
- */
-export declare enum Size {
-    /** @deprecated */
-    Size18 = 18,
-    Size20 = 20,
-    Size24 = 24,
-    Size28 = 28,
-    Size32 = 32,
-    Size40 = 40,
-    /** @deprecated */
-    Size48 = 48,
-    Size56 = 56
-}
+import { PureComponent, ImgHTMLAttributes, ReactNode } from 'react';
+import { Size } from './avatar-size';
+export { Size };
 export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
     dpr: number;
     size: Size | number;
@@ -22,6 +9,7 @@ export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
     round?: boolean | null | undefined;
     subavatar?: string | null | undefined;
     username?: string | null | undefined;
+    info?: ReactNode;
     skipParams?: boolean | null | undefined;
 }
 export default class Avatar extends PureComponent<AvatarProps> {

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/avatar/avatar.js

@@ -7,22 +7,9 @@ import { getPixelRatio } from '../global/dom';
 import memoize from '../global/memoize';
 import styles from './avatar.css';
 import FallbackAvatar from './fallback-avatar';
-/**
- * @name Avatar
- */
-export var Size;
-(function (Size) {
-    /** @deprecated */
-    Size[Size["Size18"] = 18] = "Size18";
-    Size[Size["Size20"] = 20] = "Size20";
-    Size[Size["Size24"] = 24] = "Size24";
-    Size[Size["Size28"] = 28] = "Size28";
-    Size[Size["Size32"] = 32] = "Size32";
-    Size[Size["Size40"] = 40] = "Size40";
-    /** @deprecated */
-    Size[Size["Size48"] = 48] = "Size48";
-    Size[Size["Size56"] = 56] = "Size56";
-})(Size || (Size = {}));
+import { Size } from './avatar-size';
+import AvatarInfo from './avatar-info';
+export { Size };
 const warnSize = memoize((size) => deprecate(() => { }, `Avatar: Size${size} is deprecated and will be removed in 8.0. The supported sizes are: Size20, Size24, Size28, Size32, Size40.`));
 export default class Avatar extends PureComponent {
     static defaultProps = {
@@ -41,7 +28,7 @@ export default class Avatar extends PureComponent {
         this.setState({ errorUrl: '' });
     };
     render() {
-        const { size, url, dpr, style, round, subavatar, subavatarSize, username, skipParams, ...restProps } = this.props;
+        const { size, url, dpr, style, round, subavatar, subavatarSize, username, info, skipParams, ...restProps } = this.props;
         if ([Size.Size18, Size.Size48].includes(size)) {
             warnSize(size)();
         }
@@ -61,7 +48,9 @@ export default class Avatar extends PureComponent {
             ...style,
         };
         if (!url || this.state.errorUrl === url) {
-            return (_jsx("span", { ...restProps, "data-test": "avatar", className: classNames(styles.avatar, this.props.className, { [styles.empty]: username == null }), style: styleObj, children: username != null && _jsx(FallbackAvatar, { size: size, round: round, username: username }) }));
+            return (_jsxs("span", { ...restProps, "data-test": "avatar", className: classNames(styles.avatar, this.props.className, {
+                    [styles.empty]: username == null && info == null,
+                }), style: styleObj, children: [username != null && _jsx(FallbackAvatar, { size: size, round: round, username: username }), info != null && _jsx(AvatarInfo, { size: size, children: info })] }));
         }
         let src = url;
         if (!skipParams && !isDataURI(url)) {
@@ -82,10 +71,10 @@ export default class Avatar extends PureComponent {
                 subavatarSizeString,
             };
             subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
-            return (_jsxs("div", { children: [_jsx("img", { ...restProps, onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.avatar, this.props.className), style: styleObj, src: src, alt: "User avatar" }), _jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.subavatar), style: styleObjGroup, src: subavatarSrc, alt: "Subavatar" })] }));
+            return (_jsxs("div", { children: [_jsx("img", { ...restProps, onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.avatar, styles.avatarShadow, this.props.className), style: styleObj, src: src, alt: "User avatar" }), _jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.subavatar), style: styleObjGroup, src: subavatarSrc, alt: "Subavatar" })] }));
         }
         else {
-            return (_jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.avatar, this.props.className), style: styleObj, src: src, alt: "User avatar" }));
+            return (_jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.avatar, styles.avatarShadow, this.props.className), style: styleObj, src: src, alt: "User avatar" }));
         }
     }
 }

package/components/avatar/fallback-avatar.d.ts

@@ -1,4 +1,4 @@
-import { Size } from './avatar';
+import { Size } from './avatar-size';
 export interface FallbackAvatarProps {
     username: string;
     size: Size;

package/components/avatar/fallback-avatar.js

@@ -1,58 +1,159 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import getUID from '../global/get-uid';
+import { Size } from './avatar-size';
 const colorPairs = [
-    ['#60A800', '#D5CA00'],
-    ['#21D370', '#03E9E1'],
-    ['#3BA1FF', '#36E97D'],
-    ['#00C243', '#00FFFF'],
-    ['#4BE098', '#627FFF'],
-    ['#168BFA', '#26F7C7'],
-    ['#9D4CFF', '#39D3C3'],
-    ['#0A81F6', '#0ACFF6'],
-    ['#765AF8', '#5A91F8'],
-    ['#9E54FF', '#0ACFF6'],
-    ['#B345F1', '#669DFF'],
-    ['#765AF8', '#C059EE'],
-    ['#9039D0', '#C239D0'],
-    ['#9F2AFF', '#FD56FD'],
-    ['#AB3AF2', '#E40568'],
-    ['#9F2AFF', '#E9A80B'],
-    ['#D50F6B', '#E73AE8'],
-    ['#ED5502', '#E73AE8'],
-    ['#ED358C', '#DBED18'],
-    ['#ED358C', '#F9902E'],
-    ['#FF7500', '#FFCA00'],
+    ['#A5E074', '#E8E093'],
+    ['#6AD8A2', '#79E98F'],
+    ['#7FBAF6', '#7BEBB2'],
+    ['#6DDC8C', '#97FFFF'],
+    ['#8EE5C0', '#A2B6FF'],
+    ['#73B4F5', '#78F8DC'],
+    ['#BA8EFF', '#78DFD6'],
+    ['#63AFF5', '#60E2F5'],
+    ['#A192F7', '#93B2F7'],
+    ['#B989FF', '#60E2F5'],
+    ['#CA7EF7', '#9BBAF8'],
+    ['#A192F7', '#CF94F4'],
+    ['#AB7EE1', '#D58AE3'],
+    ['#BE82FF', '#FFA0FF'],
+    ['#C57EF2', '#F2799E'],
+    ['#BE82FF', '#F2CC83'],
+    ['#E16C9D', '#EF8AE8'],
+    ['#F29766', '#EF8AE8'],
+    ['#F27AA9', '#EAF087'],
+    ['#F27AA9', '#FBBB8C'],
+    ['#FFAB66', '#FFEBA0'],
 ];
-const Sizes = {
-    18: {
-        radius: 2,
+const SizesSquare = {
+    [Size.Size16]: {
+        radius: 4,
+        text: { x: 7.5, y: 11 },
+        fontSize: '8px',
+        textAnchor: 'middle',
+    },
+    [Size.Size18]: {
+        radius: 4,
         text: { x: 9, y: 13 },
         fontSize: '11px',
         textAnchor: 'middle',
     },
-    24: {
-        radius: 3,
-        text: { x: 2, y: 13 },
+    [Size.Size20]: {
+        radius: 4,
+        text: { x: 2, y: 10 },
+        fontSize: '9px',
+        underscore: { x: 3, y: 16, width: 7, height: 1 },
+    },
+    [Size.Size24]: {
+        radius: 4,
+        text: { x: 2, y: 12 },
         fontSize: '11px',
-        underscore: { x: 3, y: 17 },
+        underscore: { x: 3, y: 18.5, width: 9, height: 1.5 },
     },
-    32: {
-        radius: 3,
-        text: { x: 3, y: 17 },
+    [Size.Size28]: {
+        radius: 4,
+        text: { x: 2, y: 14 },
         fontSize: '13px',
+        underscore: { x: 3, y: 22, width: 11, height: 2 },
+    },
+    [Size.Size32]: {
+        radius: 4,
+        text: { x: 3, y: 17 },
+        fontSize: '15px',
         letterSpacing: 1,
-        underscore: { x: 4, y: 22 },
+        underscore: { x: 4, y: 26, width: 12, height: 2 },
+    },
+    [Size.Size40]: {
+        radius: 4,
+        text: { x: 3, y: 21 },
+        fontSize: '19px',
+        letterSpacing: 1,
+        underscore: { x: 5, y: 32, width: 15, height: 2.5 },
+    },
+    [Size.Size48]: {
+        radius: 4,
+        text: { x: 3, y: 21 },
+        fontSize: '19px',
+        letterSpacing: 1,
+        underscore: { x: 5, y: 32, width: 15, height: 2.5 },
+    },
+    [Size.Size56]: {
+        radius: 4,
+        text: { x: 4, y: 28 },
+        fontSize: '26px',
+        letterSpacing: 1,
+        underscore: { x: 7, y: 45, width: 21, height: 3.5 },
+    },
+};
+const SizesRound = {
+    [Size.Size16]: {
+        radius: 4,
+        fontSize: '8px',
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
+    },
+    [Size.Size18]: {
+        radius: 4,
+        fontSize: '11px',
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
     },
-    40: {
-        radius: 3,
-        text: { x: 5, y: 19 },
+    [Size.Size20]: {
+        radius: 4,
+        fontSize: '9px',
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
+    },
+    [Size.Size24]: {
+        radius: 4,
+        fontSize: '11px',
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
+    },
+    [Size.Size28]: {
+        radius: 4,
+        fontSize: '13px',
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
+    },
+    [Size.Size32]: {
+        radius: 4,
         fontSize: '15px',
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
         letterSpacing: 1,
-        underscore: { x: 6, y: 28 },
+    },
+    [Size.Size40]: {
+        radius: 4,
+        fontSize: '19px',
+        letterSpacing: 1,
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
+    },
+    [Size.Size48]: {
+        radius: 4,
+        fontSize: '19px',
+        letterSpacing: 1,
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
+    },
+    [Size.Size56]: {
+        radius: 4,
+        fontSize: '26px',
+        letterSpacing: 1,
+        text: { x: '50%', y: '54%' },
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',
     },
 };
-const sizeKeys = Object.keys(Sizes).map(Number);
 function extractLetters(name) {
     const names = name
         .split(/[\s._]+/)
@@ -85,10 +186,9 @@ function hashCode(s) {
 export default function FallbackAvatar({ username, size, round }) {
     const hash = Math.abs(hashCode(username.toLowerCase()));
     const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
-    const possibleSizeKeys = sizeKeys.filter(key => key >= size);
-    const sizeKey = possibleSizeKeys.length > 0 ? Math.min(...possibleSizeKeys) : Math.max(...sizeKeys);
-    const sizes = Sizes[sizeKey];
+    const sizes = round ? SizesRound[size] : SizesSquare[size];
+    const underscore = sizes.underscore;
     const radius = round ? '50%' : sizes.radius;
     const gradientId = useMemo(() => getUID('gradient-'), []);
-    return (_jsxs("svg", { viewBox: `0 0 ${sizeKey} ${sizeKey}`, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { stopColor: fromColor, offset: "0" }), _jsx("stop", { stopColor: toColor, offset: "1" })] }) }), _jsxs("g", { children: [_jsx("rect", { fill: `url(#${gradientId})`, x: "0", y: "0", width: sizeKey, height: sizeKey, rx: radius, ry: radius }), _jsxs("text", { x: sizes.text.x, y: sizes.text.y, fontFamily: "Arial, Helvetica, sans-serif", fontSize: sizes.fontSize, letterSpacing: sizes.letterSpacing, fill: "#FFFFFF", textAnchor: sizes.textAnchor, cursor: "default", children: [_jsx("tspan", { children: extractLetters(username) }), sizes.underscore && (_jsx("tspan", { x: sizes.underscore.x, y: sizes.underscore.y, children: '_' }))] }), _jsx("title", { children: username })] })] }));
+    return (_jsxs("svg", { viewBox: `0 0 ${size} ${size}`, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "1", y1: "1", x2: "0", y2: "0", children: [_jsx("stop", { stopColor: fromColor, offset: "0" }), _jsx("stop", { stopColor: toColor, offset: "0.8" })] }) }), _jsxs("g", { children: [_jsx("rect", { fill: `url(#${gradientId})`, x: "0", y: "0", width: size, height: size, rx: radius, ry: radius }), _jsx("text", { x: sizes.text.x, y: sizes.text.y, fontFamily: "var(--ring-font-family, 'Arial, Helvetica, sans-serif')", fontSize: sizes.fontSize, fontWeight: "600", letterSpacing: sizes.letterSpacing, fill: "#FFFFFF", dominantBaseline: sizes.dominantBaseline, textAnchor: sizes.textAnchor, cursor: "default", children: _jsx("tspan", { children: extractLetters(username) }) }), underscore && (_jsx("rect", { fill: "#FFFFFF", x: underscore.x, y: underscore.y, width: underscore.width, height: underscore.height })), _jsx("title", { children: username })] })] }));
 }

package/components/list/list.css

@@ -172,8 +172,11 @@
 }
 
 /* override link */
-.actionLink.actionLink {
+.actionLink.actionLink.actionLink {
   transition: none;
+  text-decoration-line: none;
+
+  color: var(--ring-text-color);
 }
 
 .action:hover {

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/tabs/collapsible-tabs.d.ts

@@ -4,6 +4,7 @@ export interface CollapsibleTabsProps {
     children: ReactElement<TabProps>[];
     selected?: string | undefined;
     onSelect?: ((key: string) => () => void) | undefined;
+    onLastVisibleIndexChange?: ((index: number) => void) | null | undefined;
     moreClassName?: string | null | undefined;
     moreActiveClassName?: string | null | undefined;
     morePopupClassName?: string | null | undefined;
@@ -11,6 +12,6 @@ export interface CollapsibleTabsProps {
     initialVisibleItems?: number | null | undefined;
     morePopupBeforeEnd?: ReactNode;
 }
-export declare const CollapsibleTabs: ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const CollapsibleTabs: ({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/components/tabs/collapsible-tabs.js

@@ -7,7 +7,7 @@ import { FakeMoreButton, MoreButton } from './collapsible-more';
 import getTabTitles from './collapsible-tab';
 const DEFAULT_DEBOUNCE_INTERVAL = 100;
 const MEASURE_TOLERANCE = 0.5;
-export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }) => {
+export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }) => {
     const [sizes, setSizes] = useState({ tabs: [], more: undefined });
     const [lastVisibleIndex, setLastVisibleIndex] = useState(null);
     const elements = { sizes, lastVisibleIndex };
@@ -74,10 +74,12 @@ export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, m
                 }
             }
         }
-        if (elements.lastVisibleIndex !== tabsToRender.length - 1) {
-            setLastVisibleIndex(tabsToRender.length - 1);
+        const newLastVisibleIndex = tabsToRender.length - 1;
+        if (elements.lastVisibleIndex !== newLastVisibleIndex) {
+            setLastVisibleIndex(newLastVisibleIndex);
+            onLastVisibleIndexChange?.(newLastVisibleIndex);
         }
-    }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
+    }, [children, elements.lastVisibleIndex, elements.sizes, onLastVisibleIndexChange, selectedIndex]);
     // Prepare list of visible and hidden elements
     useEffect(() => {
         const timeout = setTimeout(() => {

package/components/tabs/dumb-tabs.d.ts

@@ -8,6 +8,7 @@ export type Children = readonly (Children | null | boolean)[] | ReactElement<Tab
 export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {
     children: Children;
     onSelect?: ((key: string) => void) | null | undefined;
+    onLastVisibleIndexChange?: ((index: number) => void) | null | undefined;
     className?: string | null | undefined;
     tabContainerClassName?: string | null | undefined;
     autoCollapse?: boolean | null | undefined;

package/components/user-card/card.js

@@ -23,7 +23,7 @@ export default class UserCard extends PureComponent {
         const translations = this.props.translations;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
-        return (_jsx("div", { className: classes, ...restProps, children: _jsxs("div", { className: styles.userInformationContainer, children: [_jsxs("div", { className: styles.userAvatar, children: [_jsx(Avatar, { size: AvatarSize.Size56, url: user.avatarUrl, round: true }), !!avatarInfo && avatarInfo] }), _jsxs("div", { className: styles.userInformation, children: [_jsxs("div", { className: styles.userInformationGeneral, children: [_jsxs("div", { className: styles.userNameLine, children: [user.href && (_jsx(Link, { href: user.href, className: styles.userName, children: user.name })), !user.href && _jsx("span", { className: styles.userName, children: user.name }), typeof user.online === 'boolean' && (_jsx("span", { className: userActiveStatusClasses, title: user.online
+        return (_jsx("div", { className: classes, ...restProps, children: _jsxs("div", { className: styles.userInformationContainer, children: [_jsxs("div", { className: styles.userAvatar, children: [_jsx(Avatar, { size: AvatarSize.Size56, url: user.avatarUrl, username: user.name, round: true }), !!avatarInfo && avatarInfo] }), _jsxs("div", { className: styles.userInformation, children: [_jsxs("div", { className: styles.userInformationGeneral, children: [_jsxs("div", { className: styles.userNameLine, children: [user.href && (_jsx(Link, { href: user.href, className: styles.userName, children: user.name })), !user.href && _jsx("span", { className: styles.userName, children: user.name }), typeof user.online === 'boolean' && (_jsx("span", { className: userActiveStatusClasses, title: user.online
                                                     ? (translations?.online ?? translate('online'))
                                                     : (translations?.offline ?? translate('offline')) })), !!info && _jsx("span", { className: styles.userNameInfo, children: info }), user.banned && (_jsx(Tooltip, { title: user.banReason, children: _jsx(Tag, { className: styles.banLabel, children: translations?.banned ?? translate('banned') }) }))] }), _jsx("div", { className: styles.userLogin, children: user.login }), user.email && (_jsxs("span", { className: styles.userEmailWrapper, children: [_jsx(Link, { href: `mailto:${user.email}`, title: `mailto:${user.email}`, target: "_blank", className: styles.userEmail, children: user.email }), user.unverifiedEmail && (_jsx("span", { className: styles.unverifiedLabel, children: translations?.unverified ?? translate('unverified') })), _jsx(Icon, { title: translations?.copyToClipboard ?? translate('copyToClipboard'), className: styles.userCopyIcon, onClick: this.copyEmail, glyph: copyIcon, size: IconSize.Size14, suppressSizeWarning: true })] }))] }), children] })] }) }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.21",
+  "version": "7.0.23",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -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.1",
     "@types/chai": "^5.0.1",
     "@types/chai-as-promised": "^8.0.1",
     "@types/chai-dom": "0.0.10",
@@ -136,13 +136,13 @@
     "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.24.0",
+    "chromatic": "^11.25.1",
     "core-js": "^3.40.0",
     "cpy-cli": "^5.0.0",
     "dotenv-cli": "^8.0.0",
@@ -153,7 +153,7 @@
     "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.2",
+    "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",
@@ -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,7 +178,7 @@
     "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",
@@ -189,8 +189,8 @@
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.11",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.20.0",
-    "vitest": "^2.1.8",
+    "typescript-eslint": "^8.21.0",
+    "vitest": "^3.0.3",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.97.1",

package/components/avatar/avatar-example-datauri.d.ts

@@ -1 +0,0 @@
-export declare const avatarDataUri: string;

package/components/avatar/avatar-example-datauri.js

@@ -1,24 +0,0 @@
-// Taken from https://hub.jetbrains.com/api/rest/avatar/default?username=Jet%20Brains&dpr=2&size=56
-export const avatarDataUri = `data:image/svg+xml,${encodeURIComponent(`
-<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
-            <stop stop-color="#D50F6B" offset="0"/>
-            <stop stop-color="#E73AE8" offset="1"/>
-        </linearGradient>
-    </defs>
-    <g>
-        <rect fill="url(#gradient)"
-              x="0" y="0" width="40" height="40"
-              rx="3" ry="3"/>
-        <text x="5" y="19"
-              font-family="Arial, Helvetica, sans-serif"
-              font-size="15px"
-              letter-spacing="1"
-              fill="#FFFFFF">
-            <tspan>JB</tspan>
-            <tspan x="6" y="28">_</tspan>
-        </text>
-    </g>
-</svg>
-`)}`;