@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/CHANGELOG.md

@@ -1,8 +1,69 @@
 ## [5.0.0]
 
 ### BREAKING CHANGES
+- Design of some components is changed, see [RG-2156](https://youtrack.jetbrains.com/issue/RG-2156). By default, controls (buttons, inputs etc.) have 28px height. To bring back the old compact 24px height, wrap your app into `ControlsHeightContext.Provider`:
+  ```js
+  import {ControlsHeight, ControlsHeightContext} from '@jetbrains/ring-ui/components/global/controls-height';
+
+  <ControlsHeightContext.Provider value={ControlsHeight.S}>
+    <App />
+  </ControlsHeightContext.Provider>
+  ```
+- Input: removed `compact` and `renderUnderline` props
+- Select: removed `Type.MATERIAL`
+- Toggle: added `Size.Size14` which is the new default
+- Button Group: caption should be pllaced outside of the group
+  ```
+  // Before
+  <ButtonGroup>
+    <Caption>Side:</Caption>
+    <Button>Left</Button>
+    <Button>Right</Button>
+  </ButtonGroup>
+  
+  // After
+  <>
+    <Caption>Side:</Caption>
+    <ButtonGroup>
+      <Button>Left</Button>
+      <Button>Right</Button>
+    </ButtonGroup>
+  </>
+  ```
+- Components no longer accept `theme` prop, themes are managed using CSS Custom Properties instead. To apply a theme to your app or some part of it, wrap it into `ThemeProvider`:
+  ```js
+  import Theme, {ThemeProvider} from '@jetbrains/ring-ui/components/global/theme';
+
+  <ThemeProvider theme={Theme.DARK}>{children}</ThemeProvider>
+  ```
+  You can also pass `Theme.AUTO` to use the user-defined system theme.
+  The only exceptions are the components that provide dark context by default: Alert, Header, Message. Those still accept a `theme` prop.
+- `--ring-dark-*` CSS custom properties are removed, `--ring-dark-text-color` is renamed to `--ring-white-text-color`
+- `--ring-message-background-color` is removed in favor of `--ring-popup-background-color`
 - The codebase has migrated to TypeScript
+- `react-markdown` has been updated to v7, which affects the props of `Markdown` component. The most notable change is replacing `source` with `children`:
+  ```js
+  // before
+  <Markdown source="some markdown" />
+  
+  // after
+  <Markdown>some markdown</Markdown>
+  ```
+  See `react-markdown`'s [changelog](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15) for other changes
+- Removed `core-js@2` support
+- Removed `webpack@4` support
+
+## [4.2.0]
 
+### React 18 support
+
+To enable the new root API, add the following code before any rendering:
+```js
+import * as client from 'react-dom/client'
+import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
+
+setClient(client)
+```
 
 ## [4.1.0]
 

package/babel.config.js

@@ -1,26 +1,15 @@
 const browserslist = require('browserslist');
-const deprecate = require('util-deprecate');
-
-const coreJsVersion = process.env.RING_UI_COREJS_VERSION ||
-  require('core-js/package.json').version;
-
-const isDeprecatedCoreJS = coreJsVersion.startsWith('2');
 
 module.exports = function config(api) {
   api.cache(true);
 
-  if (isDeprecatedCoreJS) {
-    // TODO remove in 5.0
-    deprecate(() => null, `Compiling Ring UI with deprecated Core JS version "${coreJsVersion}". Consider updating to 3rd.`)();
-  }
-
   return {
     presets: [
       ['@jetbrains/babel-preset-jetbrains', {
         typeScript: true,
         angular: true,
         useBuiltIns: 'usage',
-        corejs: isDeprecatedCoreJS ? '2' : '3'
+        corejs: '3'
       }]
     ],
     plugins: [

package/components/alert/alert.css

@@ -1,5 +1,6 @@
 @import "../global/variables.css";
 
+@value link from "../link/link.css";
 @value unit from "../global/global.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
@@ -23,8 +24,8 @@
   pointer-events: auto;
 
   border-radius: var(--ring-border-radius);
-  background-color: var(--ring-message-background-color);
-  box-shadow: 0 2px 16px var(--ring-popup-shadow-color);
+  background-color: var(--ring-popup-background-color);
+  box-shadow: var(--ring-popup-shadow);
 
   font-size: var(--ring-font-size);
   line-height: calc(unit * 5);
@@ -37,7 +38,7 @@
 .error {
   word-wrap: break-word;
 
-  color: var(--ring-error-color);
+  color: var(--ring-icon-error-color);
 }
 
 .icon {
@@ -53,7 +54,7 @@
 
   white-space: normal;
 
-  color: var(--ring-dark-text-color);
+  color: var(--ring-active-text-color);
 
   line-height: 20px;
 
@@ -88,19 +89,8 @@
   margin: calc(unit / 2);
   padding: unit;
 
-  cursor: pointer;
-
-  color: var(--ring-dark-secondary-color);
-  border: none;
-  background: transparent;
-
   font-size: 0;
   line-height: 0;
-
-  &:hover,
-  &:focus {
-    color: var(--ring-link-hover-color);
-  }
 }
 
 @keyframes show {

package/components/alert/alert.d.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import Theme from '../global/theme';
 export declare const ANIMATION_TIME = 500;
 /**
  * @name Alert
@@ -16,6 +17,7 @@ export declare enum AlertType {
     LOADING = "loading"
 }
 export interface AlertProps {
+    theme: Theme;
     timeout: number;
     onCloseRequest: ((event?: React.MouseEvent<HTMLElement>) => void);
     onClose: (() => void);
@@ -68,6 +70,7 @@ export default class Alert extends PureComponent<AlertProps, State> {
     };
     /** @override */
     static defaultProps: {
+        theme: Theme;
         closeable: boolean;
         showWithAnimation: boolean;
         type: AlertType;

package/components/alert/{alert.jsx → alert.js}

@@ -9,6 +9,8 @@ import Icon, { Color } 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 styles from './alert.css';
 export const ANIMATION_TIME = 500;
 /**
@@ -78,6 +80,7 @@ export default class Alert extends PureComponent {
     };
     /** @override */
     static defaultProps = {
+        theme: Theme.DARK,
         closeable: true,
         showWithAnimation: true,
         type: AlertType.MESSAGE,
@@ -152,7 +155,7 @@ export default class Alert extends PureComponent {
             return (<Icon glyph={glyph} className={styles.icon} color={TypeToIconColor[this.props.type] || Color.DEFAULT}/>);
         }
         else if (this.props.type === AlertType.LOADING) {
-            return (<Loader className={styles.loader} theme={Loader.Theme.DARK}/>);
+            return (<Loader className={styles.loader}/>);
         }
         return '';
     }
@@ -160,7 +163,7 @@ export default class Alert extends PureComponent {
         this.node = node;
     };
     render() {
-        const { type, inline, isClosing, isShaking, closeButtonClassName, showWithAnimation, className, 'data-test': dataTest } = this.props;
+        const { type, inline, isClosing, isShaking, closeButtonClassName, showWithAnimation, className, 'data-test': dataTest, theme } = this.props;
         const classes = classNames(className, {
             [styles.alert]: true,
             [styles.animationOpen]: showWithAnimation,
@@ -171,15 +174,13 @@ export default class Alert extends PureComponent {
         });
         const height = this.state.height;
         const style = height ? { marginBottom: -height } : undefined;
-        return (<div className={classes} data-test={dataTests('alert', dataTest)} data-test-type={type} style={style} ref={this.storeAlertRef}>
+        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 type="button" className={classNames(styles.close, closeButtonClassName)} data-test="alert-close" aria-label="close alert" onClick={this.closeRequest}>
-                <Icon glyph={closeIcon}/>
-              </button>)
+                ? (<Button icon={closeIcon} className={classNames(styles.close, closeButtonClassName)} data-test="alert-close" aria-label="close alert" onClick={this.closeRequest}/>)
                 : ''}
-      </div>);
+      </ThemeProvider>);
     }
 }
 export { default as Container } from './container';

package/components/alert/container.css

@@ -22,6 +22,4 @@
   min-width: calc(unit * 30);
   max-width: calc(unit * 50);
   margin-top: 0;
-
-  box-shadow: 0 2px 8px rgba(0, 42, 76, 0.3);
 }

package/components/alert-service/alert-service.examples.css

@@ -1,16 +1,18 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value icon from "../button/button.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
 
 .customAlert {
+  color: var(--ring-white-text-color);
   background: var(--ring-main-color);
 }
 
-.closeButton,
-.closeButton:hover {
-  color: var(--ring-dark-text-color);
+.closeButton .icon,
+.closeButton:hover .icon {
+  color: var(--ring-white-text-color);
 }
 
 .closeButton:hover {

package/components/alert-service/{alert-service.jsx → alert-service.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter';
 import getUID from '../global/get-uid';
 import Alert, { ANIMATION_TIME, Container as AlertContainer } from '../alert/alert';
 /**

package/components/analytics/analytics__ga-plugin.d.ts

@@ -10,7 +10,7 @@ declare global {
  * @constructor
  */
 export default class AnalyticsGAPlugin implements AnalyticsPlugin {
-    constructor(gaId?: string | undefined, isDevelopment?: boolean | undefined, domain?: string);
+    constructor(gaId?: string | undefined, isDevelopment?: boolean | undefined, domain?: string, cookielessUserIdentifier?: string | undefined);
     trackEvent(category: string, action: string): void;
     trackPageView(path: string): void;
     get serializeAdditionalInfo(): boolean;

package/components/analytics/analytics__ga-plugin.js

@@ -4,7 +4,7 @@
  * @constructor
  */
 export default class AnalyticsGAPlugin {
-    constructor(gaId, isDevelopment, domain) {
+    constructor(gaId, isDevelopment, domain, cookielessUserIdentifier) {
         if (!gaId && !isDevelopment) {
             return;
         }
@@ -25,8 +25,16 @@ export default class AnalyticsGAPlugin {
          */
         const key = gaId || 'UA-57284711-1';
         /* global ga */
-        const gaCookieParams = domain ? { cookieDomain: domain } : {};
-        ga('create', key, (!gaId ? { cookieDomain: 'none' } : gaCookieParams));
+        if (cookielessUserIdentifier) {
+            ga('create', key, {
+                storage: 'none',
+                clientId: cookielessUserIdentifier
+            });
+        }
+        else {
+            const gaCookieParams = domain ? { cookieDomain: domain } : {};
+            ga('create', key, (!gaId ? { cookieDomain: 'none' } : gaCookieParams));
+        }
         ga('set', 'anonymizeIp', true);
         ga('set', 'allowAdFeatures', false);
     }

package/components/auth/auth__core.d.ts

@@ -38,6 +38,7 @@ export interface AuthTranslations {
     applyChange: string;
     backendIsNotAvailable: string;
     checkAgain: string;
+    tryAgainLabel: string;
     nothingHappensLink: string;
     errorMessage: string;
 }
@@ -99,6 +100,7 @@ interface AuthDialogParams {
     nonInteractive?: boolean;
     error?: Error;
     canCancel?: boolean;
+    onTryAgain?: () => Promise<void>;
 }
 interface UserChange {
     userID: number | string | null | undefined;
@@ -180,7 +182,7 @@ export default class Auth implements HTTPAuth {
     updateUser(): Promise<void>;
     _detectUserChange(accessToken: string): Promise<void>;
     _beforeLogout(params?: AuthDialogParams): void;
-    _showAuthDialog({ nonInteractive, error, canCancel }?: AuthDialogParams): void;
+    _showAuthDialog({ nonInteractive, error, canCancel, onTryAgain }?: AuthDialogParams): void;
     _showUserChangedDialog({ newUser, onApply, onPostpone }: UserChangedDialogParams): void;
     private _extractErrorMessage;
     private _showBackendDownDialog;

package/components/auth/auth__core.js

@@ -46,6 +46,7 @@ const DEFAULT_CONFIG = {
         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',
@@ -361,22 +362,41 @@ export default class Auth {
             return await this._backgroundFlow?.authorize() ?? null;
         }
         catch (error) {
-            if (error instanceof Error) {
-                if (this._canShowDialogs()) {
-                    this._showAuthDialog({ nonInteractive: true, error });
-                    return null;
-                }
-                else {
-                    const authRequest = await this._requestBuilder?.prepareAuthRequest();
-                    if (authRequest != null) {
-                        this._redirectCurrentPage(authRequest.url);
-                    }
-                }
-                throw new TokenValidator.TokenValidationError(error.message);
+            if (!(error instanceof Error)) {
+                return null;
+            }
+            if (this._canShowDialogs()) {
+                return new Promise(resolve => {
+                    const onTryAgain = async () => {
+                        try {
+                            const result = await this._backgroundFlow?.authorize();
+                            resolve(result ?? null);
+                        }
+                        catch (retryError) {
+                            if (retryError instanceof Error) {
+                                this._showAuthDialog({
+                                    nonInteractive: true,
+                                    error: retryError,
+                                    onTryAgain
+                                });
+                            }
+                            throw retryError;
+                        }
+                    };
+                    this._showAuthDialog({
+                        nonInteractive: true,
+                        error: error,
+                        onTryAgain
+                    });
+                });
             }
             else {
-                return null;
+                const authRequest = await this._requestBuilder?.prepareAuthRequest();
+                if (authRequest != null) {
+                    this._redirectCurrentPage(authRequest.url);
+                }
             }
+            throw new TokenValidator.TokenValidationError(error.message);
         }
     }
     async loadCurrentService() {
@@ -462,7 +482,7 @@ export default class Auth {
         }
         this.logout();
     }
-    _showAuthDialog({ nonInteractive, error, canCancel } = {}) {
+    _showAuthDialog({ nonInteractive, error, canCancel, onTryAgain } = {}) {
         const { embeddedLogin, onPostponeLogout, translations } = this.config;
         const cancelable = this.user?.guest || canCancel;
         this._createInitDeferred();
@@ -498,15 +518,21 @@ export default class Auth {
                 this._initDeferred?.resolve?.();
             }
         };
+        const onTryAgainClick = async () => {
+            await onTryAgain?.();
+            closeDialog();
+        };
         const hide = this._authDialogService?.({
             ...this._service,
             loginCaption: translations.login,
             loginToCaption: translations.loginTo,
             confirmLabel: translations.login,
+            tryAgainLabel: translations.tryAgainLabel,
             cancelLabel: cancelable ? translations.cancel : translations.postpone,
             errorMessage: this._extractErrorMessage(error, true),
             onConfirm,
-            onCancel
+            onCancel,
+            onTryAgain: onTryAgain ? onTryAgainClick : undefined
         });
         const stopTokenListening = this._storage?.onTokenChange(token => {
             if (token) {
@@ -530,6 +556,7 @@ export default class Auth {
             loginCaption: translations.login,
             loginToCaption: translations.loginTo,
             confirmLabel: translations.applyChange,
+            tryAgainLabel: translations.tryAgainLabel,
             cancelLabel: translations.postpone,
             onConfirm: () => {
                 done();
@@ -700,9 +727,13 @@ export default class Auth {
         return await (stateId && this._storage?.getState(stateId)) || {};
     }
     _checkBackendsAreUp() {
+        const abortCtrl = new AbortController();
         const { backendCheckTimeout } = this.config;
         return Promise.all([
-            promiseWithTimeout(this.http.fetch('settings/public?fields=id'), backendCheckTimeout, { error: new Error('The authorization server is taking too long to respond. Please try again later.') }),
+            promiseWithTimeout(this.http.fetch('settings/public?fields=id', { signal: abortCtrl.signal }), backendCheckTimeout, {
+                error: new Error('The authorization server is taking too long to respond. Please try again later.'),
+                onTimeout: () => abortCtrl.abort()
+            }),
             this.config.checkBackendIsUp()
         ]).catch(err => {
             if (err instanceof TypeError) {

package/components/auth/down-notification.css

@@ -11,7 +11,7 @@
 
   word-wrap: break-word;
 
-  color: var(--ring-dark-active-color);
+  color: var(--ring-text-color);
 
   line-height: calc(unit * 2);
 }

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

@@ -15,8 +15,10 @@ export interface AuthDialogProps {
     cancelOnEsc: boolean;
     confirmLabel: string;
     cancelLabel: string;
+    tryAgainLabel: string;
     onConfirm: () => void;
     onCancel: () => void;
+    onTryAgain?: () => void;
 }
 export default class AuthDialog extends Component<AuthDialogProps> {
     static propTypes: {
@@ -31,12 +33,15 @@ export default class AuthDialog extends Component<AuthDialogProps> {
         cancelOnEsc: PropTypes.Requireable<boolean>;
         confirmLabel: PropTypes.Requireable<string>;
         cancelLabel: PropTypes.Requireable<string>;
+        tryAgainLabel: PropTypes.Requireable<string>;
         onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
         onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        onTryAgain: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         loginCaption: string;
         loginToCaption: string;
+        tryAgainLabel: string;
         show: boolean;
         cancelOnEsc: boolean;
         confirmLabel: string;
@@ -44,6 +49,12 @@ export default class AuthDialog extends Component<AuthDialogProps> {
         onConfirm: () => void;
         onCancel: () => void;
     };
+    state: {
+        retrying: boolean;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     onEscPress: () => void;
+    onRetryPress: () => Promise<void>;
     render(): JSX.Element;
 }

package/components/auth-dialog/{auth-dialog.jsx → auth-dialog.js}

@@ -19,12 +19,15 @@ export default class AuthDialog extends Component {
         cancelOnEsc: PropTypes.bool,
         confirmLabel: PropTypes.string,
         cancelLabel: PropTypes.string,
+        tryAgainLabel: PropTypes.string,
         onConfirm: PropTypes.func,
-        onCancel: PropTypes.func
+        onCancel: PropTypes.func,
+        onTryAgain: PropTypes.func
     };
     static defaultProps = {
         loginCaption: 'Log in',
         loginToCaption: 'Log in to %serviceName%',
+        tryAgainLabel: 'Try again',
         show: false,
         cancelOnEsc: true,
         confirmLabel: 'Log in',
@@ -32,13 +35,38 @@ export default class AuthDialog extends Component {
         onConfirm: () => { },
         onCancel: () => { }
     };
+    state = {
+        retrying: false
+    };
+    componentDidMount() {
+        window.addEventListener('online', this.onRetryPress);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('online', this.onRetryPress);
+    }
     onEscPress = () => {
         if (this.props.cancelOnEsc) {
             this.props.onCancel();
         }
     };
+    onRetryPress = async () => {
+        if (!this.props.onTryAgain || this.state.retrying) {
+            return;
+        }
+        this.setState({ retrying: true });
+        try {
+            await this.props.onTryAgain();
+        }
+        catch (e) {
+            // do nothing, error is handled in onTryAgain
+        }
+        finally {
+            this.setState({ retrying: false });
+        }
+    };
     render() {
-        const { show, className, errorMessage, serviceImage, serviceName, loginCaption, loginToCaption, confirmLabel, cancelLabel, onConfirm, onCancel } = this.props;
+        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 ?? '');
         return (<Dialog label={title} data-test="ring-auth-dialog" className={className} contentClassName={classNames(className, styles.dialog)} onEscPress={this.onEscPress} show={show} trapFocus>
@@ -50,6 +78,9 @@ export default class AuthDialog extends Component {
             <Button primary className={styles.firstButton} data-test="auth-dialog-confirm-button" onClick={onConfirm}>
               {confirmLabel}
             </Button>
+            {onTryAgain && (<Button className={styles.button} data-test="auth-dialog-retry-button" onClick={() => this.onRetryPress()} loader={retrying} disabled={retrying}>
+                {tryAgainLabel}
+              </Button>)}
             <Button className={styles.button} data-test="auth-dialog-cancel-button" onClick={onCancel}>
               {cancelLabel}
             </Button>

package/components/auth-dialog-service/{auth-dialog-service.jsx → auth-dialog-service.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter';
 import AuthDialog from '../auth-dialog/auth-dialog';
 /**
  * @name Auth Dialog Service

package/components/autofocus-ng/autofocus-ng.js

@@ -6,7 +6,7 @@ import angular from 'angular';
 import {FOCUSABLE_ELEMENTS} from '../tab-trap/tab-trap';
 
 const angularModule = angular.module('Ring.autofocus', []);
-const RING_SELECT_SELECTOR = '[data-test=ring-select__focus]';
+const RING_SELECT_SELECTOR = '[data-test*=ring-select__focus]';
 const RING_SELECT = 'rg-select';
 
 angularModule.directive('rgAutofocus', function rgAutofocusDirective() {

package/components/autofocus-ng/autofocus-ng.test.js

@@ -37,7 +37,7 @@ describe('Autofocus Ng', () => {
 
   it('Should focus on select button', () => {
     element = $compile('<rg-select rg-autofocus="vm.focus" options="item in []"/>')($scope);
-    const selectButton = element[0].querySelector('[data-test=ring-select__focus]');
+    const selectButton = element[0].querySelector('[data-test*=ring-select__focus]');
 
     sandbox.spy(selectButton, 'focus');
 

package/components/avatar/avatar.d.ts

@@ -49,3 +49,4 @@ export default class Avatar extends PureComponent<AvatarProps> {
     handleSuccess: () => void;
     render(): JSX.Element;
 }
+export declare type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/avatar/{fallback-avatar.jsx → fallback-avatar.js}

@@ -54,13 +54,13 @@ const Sizes = {
 };
 const sizeKeys = Object.keys(Sizes).map(Number);
 function extractLetters(name) {
-    const names = name.split(/[\s._]+/).filter(Boolean);
+    const names = name.split(/[\s._]+/).filter(Boolean).map(word => Array.from(word));
     if (names.length >= 2) {
         return names[0][0].toUpperCase() + names[1][0].toUpperCase();
     }
     else if (names.length === 1) {
         if (names[0].length >= 2) {
-            return names[0].slice(0, 2).toUpperCase();
+            return names[0].slice(0, 2).join('').toUpperCase();
         }
         else {
             return `${names[0][0].toUpperCase()}X`;