@jetbrains/ring-ui 5.1.1 → 6.0.1-beta.0

package/components/analytics/analytics__plugin-utils.js

@@ -1,8 +1,11 @@
+import deprecate from 'util-deprecate';
 import sniffer from '../global/sniffer';
+const warnOnDeprecationOfAnalyticsUtilsMethod = (methodName) => deprecate(() => { }, `Method AnalyticsPluginUtils::${methodName} is deprecated and will be removed soon`)();
 const SECOND = 1000;
 const HOUR = 3600;
 const AnalyticsPluginUtils = {
     /**
+     * @deprecated
      * Statistics server does not accept undefined values and strings containing certain symbols
      * @param value
      * @param isCategory
@@ -16,7 +19,11 @@ const AnalyticsPluginUtils = {
         const regexp = isCategory ? /[.:;!@#^&*(){}\[\]?,%=+\\\/]+/g : /[.:;!@#^&*(){}\[\]?,%=+\\]+/g;
         return str.replace(regexp, '_');
     },
+    /**
+     * @deprecated
+     */
     getPageViewDurationPresentation: (durationMs) => {
+        warnOnDeprecationOfAnalyticsUtilsMethod('getPageViewDurationPresentation');
         if (durationMs == null) {
             return 'less-than-1-sec';
         }
@@ -37,7 +44,11 @@ const AnalyticsPluginUtils = {
         roundedDuration = (roundedDuration > 0) ? roundedDuration : 1;
         return `less-than-${roundedDuration}-sec`;
     },
+    /**
+     * @deprecated
+     */
     getScreenWidthPresentation: () => {
+        warnOnDeprecationOfAnalyticsUtilsMethod('getScreenWidthPresentation');
         /**
          * Sizes were taken from bootstrap's grid (xs, sm, md, lg)
          */
@@ -50,14 +61,28 @@ const AnalyticsPluginUtils = {
         }
         return '[1200px;inf)';
     },
-    npeSaveLowerCase: (val) => (val || 'unknown').toLowerCase(),
+    /**
+     * @deprecated
+     */
+    npeSaveLowerCase: (val) => {
+        warnOnDeprecationOfAnalyticsUtilsMethod('npeSaveLowerCase');
+        return (val || 'unknown').toLowerCase();
+    },
+    /**
+     * @deprecated
+     */
     getUserAgentPresentation: () => {
+        warnOnDeprecationOfAnalyticsUtilsMethod('getUserAgentPresentation');
         const name = AnalyticsPluginUtils.npeSaveLowerCase(sniffer.browser.name || 'unknown');
         const majorVersion = sniffer.browser.version[0];
         const version = majorVersion || 'unknown';
         return `${name}$${version}`;
     },
+    /**
+     * @deprecated
+     */
     getDevicePixelRatioPresentation: () => {
+        warnOnDeprecationOfAnalyticsUtilsMethod('getDevicePixelRatioPresentation');
         if (!window.devicePixelRatio || !window.devicePixelRatio.toFixed) {
             return 'unknown';
         }

package/components/auth/auth__core.d.ts

@@ -1,8 +1,8 @@
 import Listeners, { Handler } from '../global/listeners';
 import HTTP, { HTTPAuth, RequestParams } from '../http/http';
 import AuthDialogService from '../auth-dialog-service/auth-dialog-service';
-import AuthStorage from './storage';
-import { AuthError } from './response-parser';
+import AuthStorage, { AuthState } from './storage';
+import { AuthError, AuthResponse } from './response-parser';
 import AuthRequestBuilder from './request-builder';
 import BackgroundFlow from './background-flow';
 import TokenValidator, { TokenValidationError, TokenValidatorConfig } from './token-validator';
@@ -15,7 +15,7 @@ export declare const LOGOUT_POSTPONED_EVENT = "logoutPostponed";
 export declare const USER_CHANGE_POSTPONED_EVENT = "changePostponed";
 export interface AuthUser {
     guest?: boolean;
-    id: number | string;
+    id: string;
     name: string;
     login: string;
     banned?: boolean;
@@ -77,7 +77,7 @@ export interface AuthConfig extends TokenValidatorConfig {
     checkBackendIsUp: () => Promise<unknown>;
     onBackendDown: (params: BackendDownParams) => () => void;
     defaultExpiresIn: number;
-    translations: AuthTranslations;
+    translations?: AuthTranslations | null | undefined;
     userParams?: RequestParams | undefined;
     waitForRedirectTimeout: number;
 }
@@ -197,6 +197,7 @@ export default class Auth implements HTTPAuth {
      */
     login(): Promise<void>;
     switchUser(): Promise<void>;
+    _makeStateFromResponse(authResponse: AuthResponse): AuthState;
     /**
      * Check if the hash contains an access token.
      * If it does, extract the state, compare with

package/components/auth/auth__core.js

@@ -2,6 +2,7 @@ import { fixUrl, getAbsoluteBaseURL } from '../global/url';
 import Listeners from '../global/listeners';
 import HTTP from '../http/http';
 import promiseWithTimeout from '../global/promise-with-timeout';
+import { getTranslations, getTranslationsWithFallback, translate } from '../i18n/i18n';
 import AuthStorage from './storage';
 import AuthResponseParser from './response-parser';
 import AuthRequestBuilder from './request-builder';
@@ -42,19 +43,7 @@ const DEFAULT_CONFIG = {
     onBackendDown: () => () => { },
     defaultExpiresIn: DEFAULT_EXPIRES_TIMEOUT,
     waitForRedirectTimeout: DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT,
-    translations: {
-        login: 'Log in',
-        loginTo: 'Log in to %serviceName%',
-        cancel: 'Cancel',
-        tryAgainLabel: 'Try again',
-        postpone: 'Postpone',
-        youHaveLoggedInAs: 'You have logged in as another user: %userName%',
-        applyChange: 'Apply change',
-        backendIsNotAvailable: 'Connection lost',
-        checkAgain: 'try again',
-        nothingHappensLink: 'Click here if nothing happens',
-        errorMessage: 'There may be a problem with your network connection. Make sure that you are online and'
-    }
+    translations: null
 };
 export default class Auth {
     static DEFAULT_CONFIG = DEFAULT_CONFIG;
@@ -131,7 +120,7 @@ export default class Auth {
         }
         this._backgroundFlow = new BackgroundFlow(this._requestBuilder, this._storage, backgroundRefreshTimeout);
         if (this.config.EmbeddedLoginFlow) {
-            this._embeddedFlow = new this.config.EmbeddedLoginFlow(this._requestBuilder, this._storage, this.config.translations);
+            this._embeddedFlow = new this.config.EmbeddedLoginFlow(this._requestBuilder, this._storage, this.config.translations ?? getTranslationsWithFallback());
         }
         const API_BASE = this.config.serverUri + Auth.API_PATH;
         const fetchConfig = config.fetchCredentials
@@ -491,6 +480,7 @@ export default class Auth {
     _showAuthDialog({ nonInteractive, error, canCancel, onTryAgain } = {}) {
         const { embeddedLogin, onPostponeLogout, translations } = this.config;
         const cancelable = this.user?.guest || canCancel;
+        const actualTranslations = translations ?? getTranslations();
         this._createInitDeferred();
         const closeDialog = () => {
             /* eslint-disable @typescript-eslint/no-use-before-define */
@@ -530,11 +520,11 @@ export default class Auth {
         };
         const hide = this._authDialogService?.({
             ...this._service,
-            loginCaption: translations.login,
-            loginToCaption: translations.loginTo,
-            confirmLabel: translations.login,
-            tryAgainLabel: translations.tryAgainLabel,
-            cancelLabel: cancelable ? translations.cancel : translations.postpone,
+            loginCaption: actualTranslations.login,
+            loginToCaption: actualTranslations.loginTo,
+            confirmLabel: actualTranslations.login,
+            tryAgainLabel: actualTranslations.tryAgainLabel,
+            cancelLabel: cancelable ? actualTranslations.cancel : actualTranslations.postpone,
             errorMessage: this._extractErrorMessage(error, true),
             onConfirm,
             onCancel,
@@ -558,12 +548,14 @@ export default class Auth {
         };
         const hide = this._authDialogService?.({
             ...this._service,
-            title: translations.youHaveLoggedInAs.replace('%userName%', newUser.name ?? ''),
-            loginCaption: translations.login,
-            loginToCaption: translations.loginTo,
-            confirmLabel: translations.applyChange,
-            tryAgainLabel: translations.tryAgainLabel,
-            cancelLabel: translations.postpone,
+            title: translations?.youHaveLoggedInAs ?? translate('youHaveLoggedInAs').
+                replace('%userName%', newUser.name ?? '').
+                replace('{{userName}}', newUser.name ?? ''),
+            loginCaption: translations?.login ?? translate('login'),
+            loginToCaption: translations?.loginTo ?? translate('loginTo'),
+            confirmLabel: translations?.applyChange ?? translate('applyChange'),
+            tryAgainLabel: translations?.tryAgainLabel ?? translate('tryAgainLabel'),
+            cancelLabel: translations?.postpone ?? translate('postpone'),
             onConfirm: () => {
                 done();
                 onApply();
@@ -623,7 +615,10 @@ export default class Auth {
                 done();
                 reject(new Error('Auth(@jetbrains/ring-ui): postponed by user'));
             };
-            const hide = onBackendDown({ onCheckAgain, onPostpone, backendError, translations });
+            const hide = onBackendDown({
+                onCheckAgain, onPostpone, backendError,
+                translations: translations ?? getTranslationsWithFallback()
+            });
             window.addEventListener('online', onCheckAgain);
             function networkWatchdog() {
                 if (navigator && navigator.onLine) {
@@ -696,6 +691,27 @@ export default class Auth {
         }
         await this._runEmbeddedLogin();
     }
+    _makeStateFromResponse(authResponse) {
+        const { state } = authResponse;
+        if (!state) {
+            return {};
+        }
+        const { scope: defaultScope } = this.config;
+        try {
+            const urlFromState = new URL(state); // checking if state contains valid URL on same origin, see HUB-11514
+            if (urlFromState.origin !== window.location.origin) {
+                return {};
+            }
+            return {
+                restoreLocation: state,
+                created: Date.now(),
+                scopes: defaultScope
+            };
+        }
+        catch (e) {
+            return {};
+        }
+    }
     /**
      * Check if the hash contains an access token.
      * If it does, extract the state, compare with
@@ -715,7 +731,8 @@ export default class Auth {
             return undefined;
         }
         const { state: stateId, scope, expiresIn, accessToken } = authResponse;
-        const newState = await (stateId && this._storage?.getState(stateId)) || {};
+        const newState = await (stateId && this._storage?.getState(stateId)) ||
+            this._makeStateFromResponse(authResponse);
         const scopes = scope ? scope.split(' ') : newState.scopes || defaultScope || [];
         const effectiveExpiresIn = expiresIn ? parseInt(expiresIn, 10) : defaultExpiresIn;
         const expires = TokenValidator._epoch() + effectiveExpiresIn;

package/components/auth-dialog/auth-dialog.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Auth Dialog
@@ -56,5 +56,5 @@ export default class AuthDialog extends Component<AuthDialogProps> {
     componentWillUnmount(): void;
     onEscPress: () => void;
     onRetryPress: () => Promise<void>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/auth-dialog/auth-dialog.js

@@ -68,7 +68,9 @@ export default class AuthDialog extends Component {
         const { show, className, errorMessage, serviceImage, serviceName, loginCaption, loginToCaption, confirmLabel, cancelLabel, tryAgainLabel, onConfirm, onCancel, onTryAgain } = this.props;
         const { retrying } = this.state;
         const defaultTitle = serviceName ? loginToCaption : loginCaption;
-        const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName ?? '');
+        const title = (this.props.title || defaultTitle).
+            replace('%serviceName%', serviceName ?? '').
+            replace('{{serviceName}}', serviceName ?? '');
         return (<Dialog label={title} data-test="ring-auth-dialog" className={className} contentClassName={classNames(className, styles.dialog)} onEscPress={this.onEscPress} show={show} trapFocus>
         <Content>
           <div className={styles.content}>

package/components/auth-dialog-service/auth-dialog-service.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 import { render } from '../global/react-render-adapter';
 import AuthDialog from '../auth-dialog/auth-dialog';
 /**
@@ -9,7 +10,9 @@ const containerElement = document.createElement('div');
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-    render(<AuthDialog {...props}/>, containerElement);
+    render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+        <AuthDialog {...props}/>
+      </ControlsHeightContext.Provider>), containerElement);
 }
 export default function showAuthDialog(props = {}) {
     renderAuthDialog({

package/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ImgHTMLAttributes } from 'react';
+import React, { PureComponent, ImgHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Avatar
@@ -15,7 +15,7 @@ export declare enum Size {
 }
 export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
     dpr: number;
-    size: Size;
+    size: Size | number;
     subavatarSize: number;
     url?: string | null | undefined;
     round?: boolean | null | undefined;
@@ -47,6 +47,6 @@ export default class Avatar extends PureComponent<AvatarProps> {
     };
     handleError: () => void;
     handleSuccess: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Size } from './avatar';
 export interface FallbackAvatarProps {
@@ -6,7 +6,7 @@ export interface FallbackAvatarProps {
     size: Size;
     round: boolean | null | undefined;
 }
-declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): JSX.Element;
+declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): React.JSX.Element;
 declare namespace FallbackAvatar {
     var propTypes: {
         username: PropTypes.Validator<string>;

package/components/avatar/fallback-avatar.js

@@ -98,10 +98,11 @@ export default function FallbackAvatar({ username, size, round }) {
       </defs>
       <g>
         <rect fill={`url(#${gradientId})`} x="0" y="0" width={sizeKey} height={sizeKey} rx={radius} ry={radius}/>
-        <text x={sizes.text.x} y={sizes.text.y} fontFamily="Arial, Helvetica, sans-serif" fontSize={sizes.fontSize} letterSpacing={sizes.letterSpacing} fill="#FFFFFF" textAnchor={sizes.textAnchor}>
+        <text x={sizes.text.x} y={sizes.text.y} fontFamily="Arial, Helvetica, sans-serif" fontSize={sizes.fontSize} letterSpacing={sizes.letterSpacing} fill="#FFFFFF" textAnchor={sizes.textAnchor} cursor="default">
           <tspan>{extractLetters(username)}</tspan>
           {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
         </text>
+        <title>{username}</title>
       </g>
     </svg>);
 }

package/components/avatar-editor-ng/avatar-editor-ng.css

@@ -28,7 +28,7 @@
   float: right;
 }
 
-:global(.ring-avatar-editor:hover:not(:disabled):not(.ring-avatar-editor_controlled)) {
+:global(.ring-avatar-editor:hover:not(:disabled, .ring-avatar-editor_controlled)) {
   padding: 0;
 
   border: 1px solid var(--ring-link-hover-color);

package/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface BadgeProps extends HTMLAttributes<HTMLElement> {
     gray?: boolean | null | undefined;
@@ -20,5 +20,5 @@ export default class Badge extends PureComponent<BadgeProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/button/button.css

@@ -60,7 +60,7 @@
     box-shadow: button-shadow var(--ring-border-hover-color);
   }
 
-  &:global(.focus-visible) {
+  &:focus-visible {
     transition: none;
 
     box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
@@ -73,7 +73,7 @@
     box-shadow: button-shadow var(--ring-main-color);
   }
 
-  &:global(.focus-visible).active {
+  &:focus-visible.active {
     box-shadow: inset 0 0 0 2px var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
   }
 
@@ -128,7 +128,7 @@
     color: var(--ring-action-link-color);
   }
 
-  &:global(.focus-visible),
+  &:focus-visible,
   &:active,
   &.active {
     background-color: var(--ring-button-primary-background-color);
@@ -186,12 +186,12 @@
 
   &:active,
   &.active,
-  &:global(.focus-visible),
+  &:focus-visible,
   &:hover {
     box-shadow: button-shadow var(--ring-button-danger-hover-color);
   }
 
-  &:global(.focus-visible),
+  &:focus-visible,
   &:hover {
     transition: none;
   }
@@ -212,7 +212,7 @@
     box-shadow: none;
   }
 
-  &:global(.focus-visible) {
+  &:focus-visible {
     box-shadow: inset 0 0 0 2px var(--ring-border-hover-color);
   }
 }
@@ -228,7 +228,7 @@
   box-shadow: none;
 }
 
-.withIcon:hover:not(:global(.focus-visible)) {
+.withIcon:hover:not(:focus-visible) {
   background-color: transparent;
   box-shadow: none;
 }

package/components/button/button.d.ts

@@ -1,7 +1,6 @@
-import 'focus-visible';
 import React, { PureComponent, ButtonHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { IconType, Size } from '../icon/icon';
+import { IconProps, IconType, Size } from '../icon/icon';
 import { ClickableLinkProps } from '../link/clickableLink';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 export interface ButtonBaseProps {
@@ -17,7 +16,7 @@ export interface ButtonBaseProps {
     dropdown?: boolean | null | undefined;
     disabled?: boolean | undefined;
     icon?: string | IconType | null | undefined;
-    iconSize?: Size | null | undefined;
+    iconSize?: IconProps['size'];
     iconClassName?: string | null | undefined;
     iconSuppressSizeWarning?: boolean | null | undefined;
 }
@@ -60,7 +59,7 @@ export declare class Button extends PureComponent<ButtonProps> {
     static contextType: React.Context<ControlsHeight>;
     context: React.ContextType<typeof ControlsHeightContext>;
     buttonRef: React.RefObject<HTMLButtonElement>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { Size as IconSize };
 export type ContainerProps<T extends ButtonProps> = JSX.LibraryManagedAttributes<typeof Button, T>;

package/components/button/button.js

@@ -1,4 +1,3 @@
-import 'focus-visible';
 import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

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

@@ -111,7 +111,7 @@
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.buttonGroup .button.button:global(.focus-visible) {
+.buttonGroup .button.button:focus-visible {
   border-radius: var(--ring-border-radius);
   box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
 }
@@ -123,7 +123,7 @@
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.buttonGroup .button:global(.focus-visible).active {
+.buttonGroup .button:focus-visible.active {
   border-radius: var(--ring-border-radius);
   box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
 }

package/components/button-group/button-group.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import Caption from './caption';
 export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
@@ -13,6 +13,6 @@ export default class ButtonGroup extends PureComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { Caption };

package/components/button-group/caption.d.ts

@@ -1,8 +1,8 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export default class Caption extends PureComponent<HTMLAttributes<HTMLElement>> {
     static propTypes: {
         className: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/button-ng/button-ng.examples.js

@@ -96,9 +96,9 @@ basic.storyName = 'Button Ng';
 basic.parameters = {
   hermione: {
     actions: [
-      {type: 'capture', name: '', selector: '#root'},
+      {type: 'capture', name: '', selector: '#storybook-root'},
       {type: 'focus', selector: '[data-test=button-active]'},
-      {type: 'capture', name: 'focus active', selector: '#root'}
+      {type: 'capture', name: 'focus active', selector: '#storybook-root'}
     ]
   },
   storyStyles: `

package/components/button-ng/button-ng.js

@@ -31,7 +31,6 @@ const buttonClassesMap = Object.values({...styles, ...overrides}).
 export const LOADER_BACKGROUND_SELECTOR = '.js-button-loader';
 
 class ButtonController extends RingAngularComponent {
-  static $inject = ['$element', '$attrs', '$scope', '$compile', '$log'];
 
   constructor(...args) {
     super(...args);
@@ -166,6 +165,7 @@ class ButtonController extends RingAngularComponent {
     $compile(icon)($scope);
   };
 }
+ButtonController.$inject = ['$element', '$attrs', '$scope', '$compile', '$log'];
 
 function createButtonDirective(tagName) {
   return () => ({

package/components/button-set/button-set.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
     'data-test'?: string | null | undefined;
@@ -12,5 +12,5 @@ export default class ButtonSet extends PureComponent<ButtonSetProps> {
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/button-toolbar/button-toolbar.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
     'data-test'?: string | null | undefined;
@@ -12,5 +12,5 @@ export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/checkbox/checkbox.css

@@ -92,7 +92,7 @@
     opacity: 1;
   }
 
-  &:global(.focus-visible) + .cell,
+  &:focus-visible + .cell,
   &.focus + .cell {
     transition: background-color var(--ring-ease);
 
@@ -124,7 +124,7 @@
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .cell .check,
   &[disabled]:indeterminate + .cell .minus {
-    color: var(--ring-border-selected-disabled-color);
+    color: var(--ring-icon-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */

package/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, InputHTMLAttributes, CSSProperties, Ref } from 'react';
+import React, { PureComponent, InputHTMLAttributes, CSSProperties, Ref } from 'react';
 import PropTypes from 'prop-types';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string | null | undefined;
@@ -41,5 +41,5 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/code/code.d.ts

@@ -37,7 +37,7 @@ export default class Code extends PureComponent<CodeProps> {
     highlight(): Promise<void>;
     get codeRef(): HTMLElement | null | undefined;
     get initCodeRef(): React.RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
 export { code, highlight };

package/components/confirm/confirm.d.ts

@@ -43,6 +43,6 @@ export default class Confirm extends PureComponent<ConfirmProps> {
         onReject: () => void;
     };
     onEscPress: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;

package/components/confirm/confirm.js

@@ -43,9 +43,9 @@ export default class Confirm extends PureComponent {
         const { show, className, inProgress, cancelIsDefault, text, description, confirmLabel, rejectLabel, onConfirm, onReject } = this.props;
         return (<Dialog label={text || (typeof description === 'string' ? description : undefined)} className={className} onEscPress={this.onEscPress} show={show} trapFocus data-test="ring-confirm">
         {text && <Header>{text}</Header>}
-        <Content>
-          {description && <div className={styles.description}>{description}</div>}
-        </Content>
+        {description && (<Content>
+            <div className={styles.description}>{description}</div>
+          </Content>)}
         <Panel>
           <Button data-test="confirm-ok-button" primary={!cancelIsDefault} loader={inProgress} disabled={inProgress} onClick={onConfirm}>
             {confirmLabel}

package/components/confirm-ng/confirm-ng.examples.js

@@ -13,7 +13,7 @@ export default {
   parameters: {
     notes: 'Displays a confirmation prompt.',
     hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '*[data-test~=ring-dialog]'}
+    a11y: {element: '#storybook-root,*[data-test~=ring-dialog]'}
   }
 };
 

package/components/confirm-service/confirm-service.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render } from '../global/react-render-adapter';
 import Confirm from '../confirm/confirm';
-import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 export const containerElement = document.createElement('div');
 /**
  * Renders Confirm into virtual node to skip maintaining container
  */
 function renderConfirm(props) {
-    const { buttonsHeight = ControlsHeight.M, ...restProps } = props;
+    const { buttonsHeight = getGlobalControlsHeight(), ...restProps } = props;
     render((<ControlsHeightContext.Provider value={buttonsHeight}>
       <Confirm {...restProps}/>
     </ControlsHeightContext.Provider>), containerElement);