@jetbrains/ring-ui 7.0.32 → 7.0.33

package/components/avatar/avatar.css

@@ -5,11 +5,13 @@
   object-fit: cover;
   object-position: center;
 
-  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
-
   border-radius: var(--ring-border-radius);
 }
 
+.round {
+  border-radius: 50%;
+}
+
 .avatarShadow {
   /* See https://stackoverflow.com/questions/21414925/why-doesnt-inset-box-shadow-work-over-images */
 

package/components/avatar/avatar.js

@@ -34,9 +34,7 @@ export default class Avatar extends PureComponent {
         }
         const sizeString = `${size}px`;
         const subavatarSizeString = `${subavatarSize}px`;
-        const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
         const styleObj = {
-            borderRadius: round ? '50%' : borderRadius,
             height: sizeString,
             width: sizeString,
             ...style,
@@ -47,8 +45,11 @@ export default class Avatar extends PureComponent {
             width: subavatarSizeString,
             ...style,
         };
+        const classes = classNames(styles.avatar, this.props.className, {
+            [styles.round]: round,
+        });
         if (!url || this.state.errorUrl === url) {
-            return (_jsxs("span", { ...restProps, "data-test": "avatar", className: classNames(styles.avatar, this.props.className, {
+            return (_jsxs("span", { ...restProps, "data-test": "avatar", className: classNames(classes, {
                     [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 })] }));
         }
@@ -71,10 +72,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, 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" })] }));
+            return (_jsxs("div", { children: [_jsx("img", { ...restProps, onError: this.handleError, onLoad: this.handleSuccess, className: classNames(classes, styles.avatarShadow), 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, styles.avatarShadow, 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(classes, styles.avatarShadow), style: styleObj, src: src, alt: "User avatar" }));
         }
     }
 }

package/components/avatar-stack/avatar-stack.css

@@ -37,29 +37,23 @@
 .item {
   position: relative;
 
-  margin-left: calc(var(--ring-avatar-stack-offset) * -1);
+  margin: -1px;
+  margin-left: calc(var(--ring-avatar-stack-offset) * -1 - 1px);
+  padding: 1px;
 
   transition: transform var(--ring-fast-ease);
   mask-image: var(--ring-avatar-stack-mask-image);
-  mask-position: calc(var(--ring-avatar-stack-offset) - 4px) -1px;
+  mask-position: calc(var(--ring-avatar-stack-offset) - 3px) 0;
   mask-repeat: no-repeat;
 
+  border-radius: calc(var(--ring-border-radius) + 1px);
 
-  /* make the gaps hoverable */
-  &::before {
-    position: absolute;
-    top: 0;
-    right: -1px;
-    bottom: 0;
-    left: -1px;
-
-    content: '';
-  }
+  background-color: var(--ring-content-background-color);
 }
 
 .item:nth-child(1) {
   --ring-avatar-stack-index: 0;
-  --ring-avatar-stack-offset: 0;
+  --ring-avatar-stack-offset: 0px;
 
   mask: none;
 }

package/components/avatar-stack/avatar-stack.js

@@ -9,7 +9,7 @@ export default function AvatarStack({ children, className, size = Size.Size20, e
     const [dropdownOpen, setDropdownOpen] = useState(false);
     return (_jsxs("div", { className: classNames(styles.avatarStack, className, styles[`size${size}`], {
             [styles.hovered]: dropdownOpen,
-        }), ...restProps, children: [Children.map(children, (child, index) => (_jsx("div", { className: styles.item, style: { '--ring-avatar-stack-index': index }, children: child }))), extraItems?.length ? (_jsx(DropdownMenu, { hoverMode: true, hoverShowTimeOut: 10, onShow: () => setDropdownOpen(true), onHide: () => setDropdownOpen(false), className: styles.extra, style: {
+        }), ...restProps, style: { height: size, ...restProps.style }, children: [Children.map(children, (child, index) => (_jsx("div", { className: styles.item, style: { '--ring-avatar-stack-index': index }, children: child }))), extraItems?.length ? (_jsx(DropdownMenu, { hoverMode: true, hoverShowTimeOut: 10, onShow: () => setDropdownOpen(true), onHide: () => setDropdownOpen(false), className: styles.extra, style: {
                     width: size,
                     height: size,
                     '--ring-avatar-stack-index': Children.count(children),

package/components/avatar-stack/avatar-stack.mask-56.svg

@@ -1,3 +1,3 @@
-<svg width="56px" height="56px" xmlns="http://www.w3.org/2000/svg">
-  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 51 a 5 5 0 0 1 -5 5 H 56 V 0"/>
+<svg width="58px" height="58px" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 53 a 5 5 0 0 1 -5 5 H 58 V 0"/>
 </svg>

package/components/input/input.d.ts

@@ -29,6 +29,7 @@ export interface InputBaseProps {
     onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
     icon?: string | ComponentType | null | undefined;
     height?: ControlsHeight | undefined;
+    beforeInput?: ReactNode;
     afterInput?: ReactNode;
     translations?: InputTranslations | null | undefined;
 }

package/components/input/input.js

@@ -93,7 +93,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 = this.context, afterInput, ...restProps } = this.props;
+        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, beforeInput, afterInput, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
@@ -116,7 +116,7 @@ export class Input extends PureComponent {
             'aria-label': typeof label === 'string' && label ? label : placeholder,
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null,
         };
-        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { className: classes, "data-test": "ring-input", children: [label && (_jsx(ControlLabel, { htmlFor: this.getId(), disabled: disabled, type: labelType, children: label })), _jsxs("div", { className: styles.container, children: [icon && _jsx(Icon, { glyph: icon, className: styles.icon }), multiline ? (_jsx("textarea", { onChange: this.handleTextareaChange, rows: 1, ...commonProps, ...restProps })) : (_jsx("input", { onChange: this.handleInputChange, ...commonProps, ...restProps })), clearable && !disabled && (_jsx(Button, { title: translations?.clear ?? translate('clear'), "data-test": "ring-input-clear", className: styles.clear, icon: closeIcon, onClick: this.clear })), afterInput] }), error ? (_jsx("div", { className: styles.errorText, children: error })) : (help && _jsx(ControlHelp, { className: styles.helpText, children: help }))] })) }));
+        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { className: classes, "data-test": "ring-input", children: [label && (_jsx(ControlLabel, { htmlFor: this.getId(), disabled: disabled, type: labelType, children: label })), _jsxs("div", { className: styles.container, children: [icon && _jsx(Icon, { glyph: icon, className: styles.icon }), beforeInput, multiline ? (_jsx("textarea", { onChange: this.handleTextareaChange, rows: 1, ...commonProps, ...restProps })) : (_jsx("input", { onChange: this.handleInputChange, ...commonProps, ...restProps })), clearable && !disabled && (_jsx(Button, { title: translations?.clear ?? translate('clear'), "data-test": "ring-input-clear", className: styles.clear, icon: closeIcon, onClick: this.clear })), afterInput] }), error ? (_jsx("div", { className: styles.errorText, children: error })) : (help && _jsx(ControlHelp, { className: styles.helpText, children: help }))] })) }));
     }
 }
 export default Input;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.32",
+  "version": "7.0.33",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -90,7 +90,7 @@
     "@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.6",
+    "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.20.0",
     "@figma/code-connect": "^1.3.1",
@@ -103,18 +103,18 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "8.5.6",
-    "@storybook/addon-docs": "8.5.6",
-    "@storybook/addon-essentials": "8.5.6",
-    "@storybook/addon-themes": "^8.5.6",
-    "@storybook/components": "8.5.6",
+    "@storybook/addon-a11y": "8.5.8",
+    "@storybook/addon-docs": "8.5.8",
+    "@storybook/addon-essentials": "8.5.8",
+    "@storybook/addon-themes": "^8.5.8",
+    "@storybook/components": "8.5.8",
     "@storybook/csf": "^0.1.13",
-    "@storybook/manager-api": "8.5.6",
-    "@storybook/preview-api": "8.5.6",
-    "@storybook/react": "8.5.6",
-    "@storybook/react-webpack5": "8.5.6",
-    "@storybook/test-runner": "^0.21.1",
-    "@storybook/theming": "8.5.6",
+    "@storybook/manager-api": "8.5.8",
+    "@storybook/preview-api": "8.5.8",
+    "@storybook/react": "8.5.8",
+    "@storybook/react-webpack5": "8.5.8",
+    "@storybook/test-runner": "^0.21.3",
+    "@storybook/theming": "8.5.8",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -127,7 +127,7 @@
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/sinon": "^17.0.3",
+    "@types/sinon": "^17.0.4",
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^4.3.4",
@@ -147,7 +147,7 @@
     "cpy-cli": "^5.0.0",
     "dotenv-cli": "^8.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^9.20.1",
+    "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-webpack": "^0.13.10",
@@ -159,7 +159,7 @@
     "eslint-plugin-storybook": "^0.11.3",
     "events": "^3.3.0",
     "glob": "^11.0.1",
-    "globals": "^15.15.0",
+    "globals": "^16.0.0",
     "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -171,7 +171,7 @@
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.2",
     "raw-loader": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -183,14 +183,14 @@
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.5.6",
+    "storybook": "8.5.8",
     "stylelint": "^16.14.1",
     "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.24.1",
-    "vitest": "^3.0.5",
+    "typescript-eslint": "^8.25.0",
+    "vitest": "^3.0.7",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.98.0",
@@ -220,11 +220,11 @@
     "@babel/core": "^7.26.9",
     "@babel/preset-typescript": "^7.26.0",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.6.0",
+    "@jetbrains/icons": "^5.7.0",
     "@jetbrains/postcss-require-hover": "^0.1.3",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
-    "@types/react-virtualized": "9.22.0",
+    "@types/react-virtualized": "9.22.2",
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "9.2.1",
     "babel-plugin-transform-define": "^2.1.4",
@@ -244,13 +244,13 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.2",
+    "postcss": "^8.5.3",
     "postcss-calc": "^10.1.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
-    "postcss-preset-env": "^10.1.4",
+    "postcss-preset-env": "^10.1.5",
     "react-movable": "^3.4.0",
     "react-virtualized": "^9.22.6",
     "react-waypoint": "^10.3.0",