@jetbrains/ring-ui 8.0.0-beta.4 → 8.0.0-beta.5

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/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);
             }