@jetbrains/ring-ui 7.0.117 → 7.0.119

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/auth/auth-core.d.ts

@@ -171,18 +171,13 @@ declare class Auth implements HTTPAuth {
     requestToken(): Promise<string | null>;
     /**
      * Get new token in the background or redirect to the login page.
-     *
-     * Retries background token refresh with delays from {@link AuthConfig.tokenRefreshRetryDelays}
-     * with increasing delays before showing the auth dialog.
-     * This handles transient failures that commonly occur after network
-     * recovery (e.g. waking from sleep, switching networks) where the first
-     * iframe-based auth attempt fails but a subsequent one succeeds once
-     * the Hub session is re-established.
-     *
      * @return {Promise.<string | null>}
      */
-    forceTokenUpdate(): Promise<string | null>;
+    forceTokenUpdate(failedToken?: string | null): Promise<string | null>;
     private _doForceTokenUpdate;
+    private _refreshTokenUnderWebLock;
+    private _refreshTokenOrReuseChanged;
+    private _handleTokenRefreshFailure;
     loadCurrentService(): Promise<void>;
     getAPIPath(): string;
     /**
@@ -195,6 +190,7 @@ declare class Auth implements HTTPAuth {
     requestUser(): Promise<any>;
     updateUser(): Promise<void>;
     _detectUserChange(accessToken: string): Promise<void>;
+    private _getUserWithTokenRefresh;
     _beforeLogout(params?: AuthDialogParams): void;
     _showAuthDialog({ nonInteractive, error, canCancel, onTryAgain }?: AuthDialogParams): void;
     _showUserChangedDialog({ newUser, onApply, onPostpone }: UserChangedDialogParams): void;

package/components/auth/auth-core.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle,max-lines */
 import { fixUrl, getAbsoluteBaseURL } from '../global/url';
 import Listeners from '../global/listeners';
-import HTTP from '../http/http';
+import HTTP, { CODE, HTTPError } from '../http/http';
 import promiseWithTimeout from '../global/promise-with-timeout';
 import { getTranslations, getTranslationsWithFallback, translate } from '../i18n/i18n';
 import AuthStorage from './storage';
@@ -16,6 +16,7 @@ const DEFAULT_BACKEND_CHECK_TIMEOUT = 10 * 1000;
 const BACKGROUND_REDIRECT_TIMEOUT = 20 * 1000;
 const DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT = 5 * 1000;
 export const TOKEN_REFRESH_RETRY_DELAYS = [0, 2000, 5000];
+const TOKEN_REFRESH_LOCK_TIMEOUT = 15 * 1000;
 export const USER_CHANGED_EVENT = 'userChange';
 export const DOMAIN_USER_CHANGED_EVENT = 'domainUser';
 export const LOGOUT_EVENT = 'logout';
@@ -346,26 +347,19 @@ class Auth {
     }
     /**
      * Get new token in the background or redirect to the login page.
-     *
-     * Retries background token refresh with delays from {@link AuthConfig.tokenRefreshRetryDelays}
-     * with increasing delays before showing the auth dialog.
-     * This handles transient failures that commonly occur after network
-     * recovery (e.g. waking from sleep, switching networks) where the first
-     * iframe-based auth attempt fails but a subsequent one succeeds once
-     * the Hub session is re-established.
-     *
      * @return {Promise.<string | null>}
      */
-    forceTokenUpdate() {
+    forceTokenUpdate(failedToken) {
         if (this._forceTokenUpdatePromise) {
             return this._forceTokenUpdatePromise;
         }
-        this._forceTokenUpdatePromise = this._doForceTokenUpdate().finally(() => {
+        this._forceTokenUpdatePromise = this._doForceTokenUpdate(failedToken).finally(() => {
             this._forceTokenUpdatePromise = null;
         });
         return this._forceTokenUpdatePromise;
     }
-    async _doForceTokenUpdate() {
+    async _doForceTokenUpdate(failedToken) {
+        const previousToken = failedToken ?? (await this._storage?.getToken())?.accessToken ?? null;
         try {
             if (!this._backendCheckPromise) {
                 this._backendCheckPromise = this._checkBackendsStatusesIfEnabled();
@@ -378,18 +372,50 @@ class Auth {
         finally {
             this._backendCheckPromise = null;
         }
+        const attempt = await this._refreshTokenUnderWebLock(previousToken);
+        if ('token' in attempt) {
+            return attempt.token;
+        }
+        return this._handleTokenRefreshFailure(attempt.error);
+    }
+    async _refreshTokenUnderWebLock(previousToken) {
+        if (navigator.locks == null) {
+            return this._refreshTokenOrReuseChanged(previousToken);
+        }
+        const lockName = `ring-ui-token-refresh-${this.config.clientId}`;
+        try {
+            return await navigator.locks.request(lockName, { signal: AbortSignal.timeout(TOKEN_REFRESH_LOCK_TIMEOUT) }, () => this._refreshTokenOrReuseChanged(previousToken));
+        }
+        catch {
+            return this._refreshTokenOrReuseChanged(previousToken);
+        }
+    }
+    async _refreshTokenOrReuseChanged(previousToken) {
+        let storedToken = null;
+        try {
+            storedToken = (await this._tokenValidator?.validateTokenLocally()) ?? null;
+        }
+        catch {
+            // No valid local token — fall through to refresh.
+        }
+        if (storedToken != null && storedToken !== previousToken) {
+            return { token: storedToken };
+        }
         let lastError = null;
         for (const delay of this.config.tokenRefreshRetryDelays) {
             if (delay > 0) {
                 await new Promise(resolve => setTimeout(resolve, delay));
             }
             try {
-                return (await this._backgroundFlow?.authorize()) ?? null;
+                return { token: (await this._backgroundFlow?.authorize()) ?? null };
             }
             catch (error) {
                 lastError = error instanceof Error ? error : new Error(String(error));
             }
         }
+        return { error: lastError ?? new Error('Failed to refresh token') };
+    }
+    async _handleTokenRefreshFailure(lastError) {
         if (this._canShowDialogs()) {
             return new Promise(resolve => {
                 const onTryAgain = async () => {
@@ -419,7 +445,7 @@ class Auth {
         if (authRequest) {
             this._redirectCurrentPage(authRequest.url);
         }
-        throw new TokenValidator.TokenValidationError(lastError?.message ?? 'Failed to refresh token');
+        throw new TokenValidator.TokenValidationError(lastError.message);
     }
     async loadCurrentService() {
         if (this._service.serviceName) {
@@ -471,7 +497,7 @@ class Auth {
     }
     async _detectUserChange(accessToken) {
         const windowWasOpen = this._isLoginWindowOpen;
-        const user = await this.getUser(accessToken);
+        const user = await this._getUserWithTokenRefresh(accessToken);
         const onApply = () => {
             this.user = user;
             this.listeners.trigger(USER_CHANGED_EVENT, user);
@@ -495,6 +521,21 @@ class Auth {
             });
         }
     }
+    async _getUserWithTokenRefresh(accessToken) {
+        try {
+            return await this.getUser(accessToken);
+        }
+        catch (error) {
+            if (!(error instanceof HTTPError) || error.status !== CODE.UNAUTHORIZED) {
+                throw error;
+            }
+            const attempt = await this._refreshTokenUnderWebLock(accessToken);
+            if ('error' in attempt) {
+                throw error;
+            }
+            return this.getUser(attempt.token);
+        }
+    }
     _beforeLogout(params) {
         if (this._canShowDialogs()) {
             const onTryAgain = async () => {

package/components/http/http.d.ts

@@ -20,7 +20,7 @@ export interface RequestParams<RawBody extends boolean = true | false> extends F
 export type RequestParamsWithoutMethod<RawBody extends boolean = boolean> = Omit<RequestParams<RawBody>, 'method'>;
 export interface HTTPAuth {
     requestToken(): Promise<string | null> | string | null;
-    forceTokenUpdate(): Promise<string | null>;
+    forceTokenUpdate(failedToken?: string | null): Promise<string | null>;
 }
 export default class HTTP implements Partial<HTTPAuth> {
     baseUrl: string | null | undefined;
@@ -28,7 +28,7 @@ export default class HTTP implements Partial<HTTPAuth> {
     fetchConfig: RequestInit;
     requestToken?: () => Promise<string | null> | string | null;
     shouldRefreshToken?: (error: string) => boolean;
-    forceTokenUpdate?: () => Promise<string | null>;
+    forceTokenUpdate?: (failedToken?: string | null) => Promise<string | null>;
     constructor(auth?: HTTPAuth, baseUrl?: string | null | undefined, fetchConfig?: RequestInit);
     setAuth: (auth: HTTPAuth) => void;
     setBaseUrl: (baseUrl: string | null | undefined) => void;

package/components/http/http.js

@@ -50,7 +50,7 @@ export default class HTTP {
     setAuth = (auth) => {
         this.requestToken = () => auth.requestToken();
         this.shouldRefreshToken = auth.constructor.shouldRefreshToken;
-        this.forceTokenUpdate = () => auth.forceTokenUpdate();
+        this.forceTokenUpdate = failedToken => auth.forceTokenUpdate(failedToken);
     };
     setBaseUrl = (baseUrl) => {
         this.baseUrl = baseUrl;
@@ -141,7 +141,7 @@ export default class HTTP {
             }
             const shouldRefreshToken = typeof error.data.error === 'string' ? this.shouldRefreshToken?.(error.data.error) : false;
             if (shouldRefreshToken) {
-                token = await this.forceTokenUpdate?.();
+                token = await this.forceTokenUpdate?.(token);
                 response = await this._performRequest(url, token, params);
                 return this._processResponse(response);
             }

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.117",
+  "version": "7.0.119",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -99,14 +99,14 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.29.7",
+    "@babel/cli": "^8.0.1",
     "@babel/eslint-parser": "^7.29.7",
     "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/stylelint-no-at-nest-rule": "^5.0.0",
     "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@figma/code-connect": "^1.4.7",
+    "@figma/code-connect": "^1.4.8",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
@@ -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.4.2",
-    "@storybook/addon-docs": "^10.4.2",
-    "@storybook/addon-themes": "^10.4.2",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-themes": "^10.4.6",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.4.2",
+    "@storybook/react-webpack5": "10.4.6",
     "@storybook/test-runner": "^0.24.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -132,18 +132,18 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/eslint-plugin": "^1.6.19",
-    "acorn": "^8.16.0",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/eslint-plugin": "^1.6.20",
+    "acorn": "^8.17.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001797",
+    "caniuse-lite": "^1.0.30001799",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.2.0",
     "core-js": "^3.49.0",
     "cpy-cli": "^7.0.0",
     "dotenv-cli": "^11.0.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-jslint-xml": "^9.0.1",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
@@ -154,11 +154,11 @@
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.4.2",
-    "eslint-plugin-unicorn": "^64.0.0",
+    "eslint-plugin-storybook": "^10.4.6",
+    "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",
@@ -166,33 +166,33 @@
     "jest": "~30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^17.0.6",
+    "lint-staged": "^17.0.8",
     "markdown-it": "^14.2.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.8.3",
+    "prettier": "^3.9.4",
     "raw-loader": "^4.0.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.61.1",
+    "rollup": "^4.62.2",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.4.4",
-    "stylelint": "^17.13.0",
+    "storybook": "10.4.6",
+    "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.60.0",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.8",
+    "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": {
@@ -216,9 +216,9 @@
   },
   "dependencies": {
     "@babel/core": "^7.29.7",
-    "@babel/preset-typescript": "^7.29.7",
+    "@babel/preset-typescript": "^8.0.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.22.0",
+    "@jetbrains/icons": "^5.23.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -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",
@@ -247,7 +247,7 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.1",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^11.3.0",
+    "postcss-preset-env": "^11.3.1",
     "react-compiler-runtime": "^1.0.0",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",