@jetbrains/ring-ui 7.0.118 → 7.0.120

package/components/alert/alert-actions.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export interface AlertActionsProps extends HTMLAttributes<HTMLDivElement> {
+}
+export default function AlertActions({ className, ...restProps }: AlertActionsProps): import("react").JSX.Element;

package/components/alert/alert-actions.js

@@ -0,0 +1,5 @@
+import classNames from 'classnames';
+import styles from './alert.css';
+export default function AlertActions({ className, ...restProps }) {
+    return <div className={classNames(styles.actions, className)} {...restProps}/>;
+}

package/components/alert/alert-heading.d.ts

@@ -0,0 +1,4 @@
+import { type HeadingProps } from '../heading/heading';
+export interface AlertHeadingProps extends HeadingProps {
+}
+export default function AlertHeading({ level, className, ...restProps }: AlertHeadingProps): import("react").JSX.Element;

package/components/alert/alert-heading.js

@@ -0,0 +1,6 @@
+import classNames from 'classnames';
+import Heading, { Levels } from '../heading/heading';
+import styles from './alert.css';
+export default function AlertHeading({ level = Levels.H3, className, ...restProps }) {
+    return <Heading level={level} className={classNames(styles.heading, className)} {...restProps}/>;
+}

package/components/alert/alert.css

@@ -8,11 +8,14 @@
 
   display: flex;
   align-items: baseline;
+  gap: var(--ring-unit);
 
   box-sizing: border-box;
-  min-height: calc(var(--ring-unit) * 5);
+  width: calc(var(--ring-unit) * 45);
+  max-width: 100%;
+  min-height: calc(var(--ring-unit) * 5.5);
   margin: var(--ring-unit) auto;
-  padding: 0 calc(var(--ring-unit) * 2);
+  padding: calc(var(--ring-unit) * 1.5);
 
   transition:
     transform var(--ring-alert-animation-duration) var(--ring-alert-animation-easing),
@@ -21,16 +24,18 @@
   white-space: nowrap;
   pointer-events: auto;
 
-  border-radius: var(--ring-border-radius);
+  border-radius: var(--ring-border-radius-large);
   background-color: var(--ring-popup-background-color);
   box-shadow: var(--ring-popup-shadow);
 
   font-size: var(--ring-font-size);
-  line-height: calc(var(--ring-unit) * 5);
+  line-height: 20px;
 }
 
 .alertInline {
   margin: var(--ring-unit);
+  /* Keep the margin box within narrow parents despite the fixed width */
+  max-width: calc(100% - var(--ring-unit) * 2);
 }
 
 .error {
@@ -39,26 +44,42 @@
   color: var(--ring-error-color);
 }
 
-.icon {
-  margin-right: var(--ring-unit);
+.error .icon {
+  color: var(--ring-icon-error-color);
+}
+
+.success .icon {
+  color: var(--ring-icon-success-color);
+}
+
+.warning .icon {
+  color: var(--ring-icon-warning-color);
+}
+
+.info .icon {
+  color: var(--ring-link-color);
 }
 
 .caption {
   overflow: hidden;
 
-  max-width: calc(100% - calc(var(--ring-unit) * 5));
+  flex-grow: 1;
 
-  margin: 12px 0;
+  min-width: 0;
 
   white-space: normal;
 
   color: var(--ring-active-text-color);
+}
 
-  line-height: 20px;
+.afterMessage {
+  overflow: hidden;
 
-  &.withCloseButton {
-    margin-right: calc(var(--ring-unit) * 5);
-  }
+  min-width: 0;
+
+  white-space: normal;
+
+  color: var(--ring-active-text-color);
 }
 
 .badge {
@@ -68,21 +89,17 @@
 }
 
 .loader {
-  top: 2px;
+  top: 3px;
 
-  margin-right: var(--ring-unit);
+  margin-top: -1px;
 }
 
+/* Padding restores a comfortable hit target around the bare 16px glyph
+   of the inline icon-only Button; negative margin keeps the glyph where
+   the flex layout would put it without the padding */
 .close.close {
-  position: absolute;
-  top: 2px;
-  right: 0;
-
-  margin: calc(var(--ring-unit) / 2);
+  margin: calc(var(--ring-unit) * -1);
   padding: var(--ring-unit);
-
-  font-size: 0;
-  line-height: 0;
 }
 
 @keyframes show {
@@ -135,5 +152,29 @@
 
 .animationShaking {
   animation-name: shaking;
+
   animation-duration: 500ms;
 }
+
+/* Doubled to override the Heading component's level-based styles, so the
+   level prop stays semantic and doesn't change the alert design: Heading's
+   :is(hN) selectors have higher specificity than a single class */
+.heading.heading {
+  margin: 0 0 calc(var(--ring-unit) / 2);
+
+  letter-spacing: normal;
+  text-transform: none;
+
+  color: inherit;
+
+  font-size: var(--ring-font-size);
+  font-weight: var(--ring-font-weight-bold);
+  line-height: var(--ring-line-height);
+}
+
+.actions {
+  display: flex;
+  gap: calc(var(--ring-unit)*2);
+
+  margin: calc(var(--ring-unit) * 2) 0 calc(var(--ring-unit) / 2);
+}

package/components/alert/alert.d.ts

@@ -1,6 +1,8 @@
 import { PureComponent, type ReactNode } from 'react';
 import * as React from 'react';
 import Theme from '../global/theme';
+import AlertHeading from './alert-heading';
+import AlertActions from './alert-actions';
 export declare const ANIMATION_TIME = 500;
 /**
  * @name Alert
@@ -14,8 +16,16 @@ export declare enum AlertType {
     MESSAGE = "message",
     SUCCESS = "success",
     WARNING = "warning",
-    LOADING = "loading"
+    LOADING = "loading",
+    INFO = "info"
 }
+/**
+ * Maps the values React renders as nothing (except empty arrays/fragments,
+ * which are not worth chasing here) to undefined, so that they neither create
+ * the afterMessage wrapper nor distinguish alerts in the alert-service
+ * duplicate check
+ */
+export declare function normalizeAfterMessage(afterMessage: ReactNode): ReactNode;
 export interface AlertProps {
     theme: Theme;
     timeout: number;
@@ -39,6 +49,7 @@ export interface AlertProps {
     captionClassName?: string | null | undefined;
     closeButtonClassName?: string | null | undefined;
     'data-test'?: string | null | undefined;
+    afterMessage?: ReactNode;
 }
 interface State {
     height: number | null;
@@ -74,6 +85,8 @@ export default class Alert extends PureComponent<AlertProps, State> {
     node?: HTMLDivElement | null;
     hideTimeout?: number;
     static Type: typeof AlertType;
+    static Heading: typeof AlertHeading;
+    static Actions: typeof AlertActions;
     closeRequest: (event: React.MouseEvent<HTMLElement>) => void;
     startCloseAnimation: () => void;
     private _close;

package/components/alert/alert.js

@@ -2,15 +2,18 @@ import { PureComponent } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import exceptionIcon from '@jetbrains/icons/exception';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
+import successIcon from '@jetbrains/icons/success';
 import warningIcon from '@jetbrains/icons/warning';
+import infoIcon from '@jetbrains/icons/info-filled';
 import closeIcon from '@jetbrains/icons/close';
-import Icon, { Color } from '../icon/icon';
+import Icon from '../icon/icon';
 import Loader from '../loader-inline/loader-inline';
 import { getRect } from '../global/dom';
 import dataTests from '../global/data-tests';
 import Button from '../button/button';
 import Theme, { ThemeProvider } from '../global/theme';
+import AlertHeading from './alert-heading';
+import AlertActions from './alert-actions';
 import styles from './alert.css';
 export const ANIMATION_TIME = 500;
 /**
@@ -27,6 +30,7 @@ export var AlertType;
     AlertType["SUCCESS"] = "success";
     AlertType["WARNING"] = "warning";
     AlertType["LOADING"] = "loading";
+    AlertType["INFO"] = "info";
 })(AlertType || (AlertType = {}));
 /**
  * Lookup table of alert type to icon modifier.
@@ -34,18 +38,19 @@ export var AlertType;
  */
 const TypeToIcon = {
     [AlertType.ERROR]: exceptionIcon,
-    [AlertType.SUCCESS]: checkmarkIcon,
+    [AlertType.SUCCESS]: successIcon,
     [AlertType.WARNING]: warningIcon,
+    [AlertType.INFO]: infoIcon,
 };
 /**
- * Lookup table of alert type to icon color.
- * @type {Object.<AlertType, Icon.Color>}
+ * Maps the values React renders as nothing (except empty arrays/fragments,
+ * which are not worth chasing here) to undefined, so that they neither create
+ * the afterMessage wrapper nor distinguish alerts in the alert-service
+ * duplicate check
  */
-const TypeToIconColor = {
-    [AlertType.ERROR]: Color.RED,
-    [AlertType.SUCCESS]: Color.GREEN,
-    [AlertType.WARNING]: Color.WHITE,
-};
+export function normalizeAfterMessage(afterMessage) {
+    return afterMessage == null || typeof afterMessage === 'boolean' || afterMessage === '' ? undefined : afterMessage;
+}
 /**
  * @constructor
  * @name Alert
@@ -87,6 +92,8 @@ export default class Alert extends PureComponent {
     node;
     hideTimeout;
     static Type = AlertType;
+    static Heading = AlertHeading;
+    static Actions = AlertActions;
     closeRequest = (event) => {
         this.startCloseAnimation();
         return this.props.onCloseRequest(event);
@@ -106,7 +113,8 @@ export default class Alert extends PureComponent {
      * @private
      */
     _handleCaptionsLinksClick = (evt) => {
-        if (evt.target instanceof Element && evt.target.matches('a')) {
+        const link = evt.target instanceof Element ? evt.target.closest('a') : null;
+        if (link != null && evt.currentTarget.contains(link)) {
             this.closeRequest(evt);
         }
     };
@@ -114,13 +122,11 @@ export default class Alert extends PureComponent {
      * @private
      */
     _getCaption() {
-        return (<span className={classNames(styles.caption, this.props.captionClassName, {
-                [styles.withCloseButton]: this.props.closeable,
-            })} onClick={this._handleCaptionsLinksClick} 
+        return (<div className={classNames(styles.caption, this.props.captionClassName)} onClick={this._handleCaptionsLinksClick} 
         // We only process clicks on `a` elements, see above
         role='presentation'>
         {this.props.children}
-      </span>);
+      </div>);
     }
     /**
      * @private
@@ -129,7 +135,7 @@ export default class Alert extends PureComponent {
     _getIcon() {
         const glyph = TypeToIcon[this.props.type];
         if (glyph) {
-            return <Icon glyph={glyph} className={styles.icon} color={TypeToIconColor[this.props.type] || Color.DEFAULT}/>;
+            return <Icon glyph={glyph} className={styles.icon}/>;
         }
         if (this.props.type === AlertType.LOADING) {
             return <Loader className={styles.loader}/>;
@@ -140,21 +146,30 @@ export default class Alert extends PureComponent {
         this.node = node;
     };
     render() {
-        const { type, inline, isClosing, isShaking, closeButtonClassName, showWithAnimation, className, 'data-test': dataTest, theme, } = this.props;
+        const { type, inline, isClosing, isShaking, closeButtonClassName, showWithAnimation, className, 'data-test': dataTest, theme, afterMessage, } = this.props;
         const classes = classNames(className, {
             [styles.alert]: true,
             [styles.animationOpen]: showWithAnimation,
-            [styles.error]: type === 'error',
+            [styles.error]: type === AlertType.ERROR,
+            [styles.success]: type === AlertType.SUCCESS,
+            [styles.warning]: type === AlertType.WARNING,
+            [styles.info]: type === AlertType.INFO,
             [styles.alertInline]: inline,
             [styles.animationClosing]: isClosing,
             [styles.animationShaking]: isShaking,
         });
         const height = this.state.height;
         const style = height ? { marginBottom: -height } : undefined;
+        const shownAfterMessage = normalizeAfterMessage(afterMessage);
         return (<ThemeProvider theme={theme} className={classes} data-test={dataTests('alert', dataTest)} data-test-type={type} style={style} ref={this.storeAlertRef}>
         {this._getIcon()}
         {this._getCaption()}
-        {this.props.closeable ? (<Button icon={closeIcon} className={classNames(styles.close, closeButtonClassName)} data-test='alert-close' aria-label='close alert' onClick={this.closeRequest}/>) : ('')}
+        {shownAfterMessage != null && (<div className={styles.afterMessage} onClick={this._handleCaptionsLinksClick} 
+            // We only process clicks on `a` elements, see above
+            role='presentation'>
+            {shownAfterMessage}
+          </div>)}
+        {this.props.closeable ? (<Button icon={closeIcon} className={classNames(styles.close, closeButtonClassName)} data-test='alert-close' aria-label='close alert' onClick={this.closeRequest}/>) : null}
       </ThemeProvider>);
     }
 }

package/components/alert/container.css

@@ -11,6 +11,7 @@
   align-items: flex-end;
   flex-direction: column;
 
+  max-width: calc(100vw - var(--ring-unit) * 4);
   max-height: calc(100vh - 2 * var(--ring-unit));
 
   pointer-events: none;
@@ -24,7 +25,5 @@
 
   overflow-y: auto;
 
-  min-width: calc(var(--ring-unit) * 30);
-  max-width: calc(var(--ring-unit) * 50);
   margin-top: 0;
 }

package/components/alert-service/alert-service.d.ts

@@ -20,7 +20,7 @@ export declare class AlertService {
      * Renders alert container into virtual node to skip maintaining container
      */
     renderAlerts(): void;
-    findSameAlert(message: ReactNode, type: AlertType | undefined): AlertItem;
+    findSameAlert(message: ReactNode, type: AlertType | undefined, afterMessage?: ReactNode): AlertItem | undefined;
     startAlertClosing(alert: AlertItem): void;
     remove(key: string | number | null | undefined): void;
     removeWithoutAnimation(key: string | number): void;
@@ -31,6 +31,7 @@ export declare class AlertService {
     message(message: ReactNode, timeout?: number): string | number;
     warning(message: ReactNode, timeout?: number): string | number;
     successMessage(message: ReactNode, timeout?: number): string | number;
+    infoMessage(message: ReactNode, timeout?: number): string | number;
     loadingMessage(message: ReactNode, timeout?: number): string | number;
 }
 declare const alertService: AlertService;

package/components/alert-service/alert-service.js

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import getUID from '../global/get-uid';
-import Alert, { ANIMATION_TIME, Container as AlertContainer } from '../alert/alert';
+import Alert, { ANIMATION_TIME, Container as AlertContainer, normalizeAfterMessage, } from '../alert/alert';
 export const DEFAULT_ALERT_TIMEOUT = 10000; // 10 seconds
 /**
  * @name Alert Service
@@ -33,8 +33,9 @@ export class AlertService {
     renderAlerts() {
         this.reactRoot.render(this.renderAlertContainer(this.showingAlerts));
     }
-    findSameAlert(message, type) {
-        return this.showingAlerts.filter(it => it.type === type && it.message === message)[0];
+    findSameAlert(message, type, afterMessage) {
+        const normalizedAfterMessage = normalizeAfterMessage(afterMessage);
+        return this.showingAlerts.find(it => it.type === type && it.message === message && normalizeAfterMessage(it.afterMessage) === normalizedAfterMessage);
     }
     startAlertClosing(alert) {
         alert.isClosing = true;
@@ -60,7 +61,7 @@ export class AlertService {
     }
     addAlert(message, type, timeout = this.defaultTimeout, options = {}) {
         const { onCloseRequest, onClose, ...restOptions } = options;
-        const sameAlert = this.findSameAlert(message, type);
+        const sameAlert = this.findSameAlert(message, type, options.afterMessage);
         if (sameAlert) {
             sameAlert.isShaking = true;
             this.renderAlerts();
@@ -102,6 +103,9 @@ export class AlertService {
     successMessage(message, timeout) {
         return this.addAlert(message, Alert.Type.SUCCESS, timeout);
     }
+    infoMessage(message, timeout) {
+        return this.addAlert(message, Alert.Type.INFO, timeout);
+    }
     loadingMessage(message, timeout) {
         return this.addAlert(message, Alert.Type.LOADING, timeout);
     }

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

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value button, active, flat from '../button/button.css';
+@value button, active as buttonActive, flat from '../button/button.css';
 
 :root,
 :host {
@@ -133,14 +133,14 @@
     0 0 0 1px var(--ring-border-hover-color);
 }
 
-.buttonGroup .button.button.active {
+.buttonGroup .button.button.buttonActive {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
   box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
-.buttonGroup .button:focus-visible.active {
+.buttonGroup .button:focus-visible.buttonActive {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
@@ -149,7 +149,7 @@
     0 0 0 1px var(--ring-border-hover-color);
 }
 
-.buttonGroup .button.active[disabled] {
+.buttonGroup .button.buttonActive[disabled] {
   box-shadow: var(--ring-button-shadow) var(--ring-border-hover-color);
 }
 /* stylelint-enable */
@@ -240,7 +240,7 @@
     }
   }
 
-  & .active {
+  & .buttonActive {
     z-index: var(--ring-button-group-active-z-index);
 
     &[disabled] {

package/components/date-picker/consts.d.ts

@@ -34,6 +34,7 @@ export interface DateInputTranslations {
     addSecondDate?: string;
     addTime?: string;
     selectName?: string;
+    selectDate?: string;
 }
 export interface DateSpecificPopupProps {
     withTime?: false | undefined;

package/components/date-picker/date-input.js

@@ -47,7 +47,7 @@ export default class DateInput extends React.PureComponent {
     };
     render() {
         const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale, } = this.props;
-        const { translate } = this.context;
+        const { messages, translate } = this.context;
         let displayText = '';
         if (active && hoverDate) {
             displayText = displayFormat(hoverDate, locale);
@@ -70,7 +70,11 @@ export default class DateInput extends React.PureComponent {
                 case 'time':
                     return timePlaceholder || (translations?.addTime ?? translate('addTime'));
                 default:
-                    return (translations?.selectName ?? translate('selectName'))
+                    return (translations?.selectDate ??
+                        translations?.selectName ??
+                        messages.selectDate ??
+                        messages.selectName ??
+                        translate('selectDate'))
                         .replace('%name%', name)
                         .replace('{{name}}', name);
             }

package/components/header/header.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value link, active from '../link/link.css';
+@value link, active as linkActive from '../link/link.css';
 
 :root,
 :host {
@@ -41,7 +41,7 @@
     color: var(--ring-header-link-color);
   }
 
-  & .active {
+  & .linkActive {
     color: var(--ring-active-text-color);
   }
 }
@@ -72,7 +72,7 @@
     color: var(--ring-header-link-color);
   }
 
-  & .active {
+  & .linkActive {
     color: var(--ring-active-text-color);
   }
 }

package/components/i18n/i18n.d.ts

@@ -23,6 +23,7 @@ export declare function getTranslations(): Partial<{
     addSecondDate: string;
     addTime: string;
     selectName: string;
+    selectDate: string;
     setDate: string;
     setDateTime: string;
     setPeriod: string;

package/components/i18n/messages.json

@@ -19,6 +19,7 @@
   "addSecondDate": "Add second date",
   "addTime": "Add time",
   "selectName": "Select {{name}}",
+  "selectDate": "Select a date",
   "setDate": "Set a date",
   "setDateTime": "Set date and time",
   "setPeriod": "Set a period",

package/components/user-card/smart-user-card-tooltip.d.ts

@@ -10,6 +10,6 @@ export default class SmartUserCardTooltip extends Component<SmartUserCardTooltip
         loading: boolean;
     };
     loadUser: () => Promise<void>;
-    renderNoUser: () => "" | import("react").JSX.Element;
+    renderNoUser: () => import("react").JSX.Element | "";
     render(): import("react").JSX.Element;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.118",
+  "version": "7.0.120",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -132,7 +132,7 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.3",
     "@vitest/eslint-plugin": "^1.6.20",
     "acorn": "^8.17.0",
     "babel-plugin-require-context-hook": "^1.0.0",
@@ -155,10 +155,10 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-storybook": "^10.4.6",
-    "eslint-plugin-unicorn": "^68.0.0",
+    "eslint-plugin-unicorn": "^70.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
-    "globals": "^17.6.0",
+    "globals": "^17.7.0",
     "html-webpack-plugin": "^5.6.7",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -170,7 +170,7 @@
     "markdown-it": "^14.2.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.8.4",
+    "prettier": "^3.9.4",
     "raw-loader": "^4.0.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -180,19 +180,19 @@
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
     "storybook": "10.4.6",
-    "stylelint": "^17.13.0",
+    "stylelint": "^17.14.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.6.1",
     "typed-css-modules": "^0.9.1",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.61.1",
-    "vite": "^8.0.16",
+    "typescript-eslint": "^8.62.1",
+    "vite": "^8.1.0",
     "vitest": "^4.1.9",
     "vitest-teamcity-reporter": "^0.4.1",
-    "webpack": "^5.107.2",
-    "webpack-cli": "^7.0.3",
+    "webpack": "^5.108.1",
+    "webpack-cli": "^7.1.0",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
@@ -227,7 +227,7 @@
     "babel-loader": "10.1.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.28.2",
+    "browserslist": "^4.28.4",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
@@ -238,7 +238,7 @@
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^8.2.1",
+    "focus-trap": "^8.2.2",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",