@jetbrains/ring-ui 7.0.0-beta.1 → 7.0.0-beta.10

package/components/alert/alert.d.ts

@@ -1,6 +1,5 @@
 import { PureComponent, ReactNode } from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Theme from '../global/theme';
 export declare const ANIMATION_TIME = 500;
 /**
@@ -20,10 +19,17 @@ export declare enum AlertType {
 export interface AlertProps {
     theme: Theme;
     timeout: number;
+    /**
+     * Fires when alert starts closing if timeout is out or user clicks "Close" button
+     */
     onCloseRequest: ((event?: React.MouseEvent<HTMLElement>) => void);
     onClose: (() => void);
     isShaking: boolean;
     isClosing: boolean;
+    /**
+     * Whether an alert is rendered inside an **Alerts** container
+     * or standalone.
+     */
     inline: boolean;
     showWithAnimation: boolean;
     closeable: boolean;
@@ -46,29 +52,6 @@ interface State {
  * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
  */
 export default class Alert extends PureComponent<AlertProps, State> {
-    static propTypes: {
-        timeout: PropTypes.Requireable<number>;
-        /**
-         * Fires when alert starts closing if timeout is out or user clicks "Close" button
-         */
-        onCloseRequest: PropTypes.Requireable<(...args: any[]) => any>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        isShaking: PropTypes.Requireable<boolean>;
-        isClosing: PropTypes.Requireable<boolean>;
-        /**
-         * Whether an alert is rendered inside an **Alerts** container
-         * or standalone.
-         */
-        inline: PropTypes.Requireable<boolean>;
-        showWithAnimation: PropTypes.Requireable<boolean>;
-        closeable: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<AlertType>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        captionClassName: PropTypes.Requireable<string>;
-        closeButtonClassName: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-    };
     /** @override */
     static defaultProps: {
         theme: Theme;

package/components/alert/alert.js

@@ -1,7 +1,6 @@
 import { PureComponent } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import exceptionIcon from '@jetbrains/icons/exception';
 import checkmarkIcon from '@jetbrains/icons/checkmark';
 import warningIcon from '@jetbrains/icons/warning';
@@ -56,29 +55,6 @@ const TypeToIconColor = {
  * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
  */
 export default class Alert extends PureComponent {
-    static propTypes = {
-        timeout: PropTypes.number,
-        /**
-         * Fires when alert starts closing if timeout is out or user clicks "Close" button
-         */
-        onCloseRequest: PropTypes.func,
-        onClose: PropTypes.func,
-        isShaking: PropTypes.bool,
-        isClosing: PropTypes.bool,
-        /**
-         * Whether an alert is rendered inside an **Alerts** container
-         * or standalone.
-         */
-        inline: PropTypes.bool,
-        showWithAnimation: PropTypes.bool,
-        closeable: PropTypes.bool,
-        type: PropTypes.oneOf(Object.values(AlertType)),
-        children: PropTypes.node,
-        className: PropTypes.string,
-        captionClassName: PropTypes.string,
-        closeButtonClassName: PropTypes.string,
-        'data-test': PropTypes.string
-    };
     /** @override */
     static defaultProps = {
         theme: Theme.DARK,

package/components/alert/container.d.ts

@@ -1,5 +1,4 @@
 import { PureComponent, HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 /**
  * @name Alert Container
  * @description Displays a stack of alerts on top of the page.
@@ -7,9 +6,5 @@ import PropTypes from 'prop-types';
  */
 export type AlertContainerProps = HTMLAttributes<HTMLDivElement>;
 export default class Alerts extends PureComponent<AlertContainerProps> {
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-    };
     render(): import("react").ReactPortal | null;
 }

package/components/alert/container.js

@@ -1,13 +1,8 @@
 import { Children, cloneElement, PureComponent, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import styles from './container.css';
 export default class Alerts extends PureComponent {
-    static propTypes = {
-        children: PropTypes.node,
-        className: PropTypes.string
-    };
     render() {
         const { children, className, ...restProps } = this.props;
         const classes = classNames(styles.alertContainer, className);

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

@@ -71,11 +71,11 @@ class AlertService {
             timeout,
             isClosing: false,
             onCloseRequest: () => {
-                onCloseRequest && onCloseRequest();
+                onCloseRequest?.();
                 this.startAlertClosing(alert);
             },
             onClose: () => {
-                onClose && onClose();
+                onClose?.();
                 this.removeWithoutAnimation(alert.key);
             },
             ...restOptions

package/components/auth/auth__core.d.ts

@@ -1,6 +1,6 @@
 import Listeners, { Handler } from '../global/listeners';
 import HTTP, { HTTPAuth, RequestParams } from '../http/http';
-import AuthDialogService from '../auth-dialog-service/auth-dialog-service';
+import type AuthDialogService from '../auth-dialog-service/auth-dialog-service';
 import AuthStorage, { AuthState } from './storage';
 import { AuthError, AuthResponse } from './response-parser';
 import AuthRequestBuilder from './request-builder';
@@ -129,7 +129,7 @@ export default class Auth implements HTTPAuth {
     listeners: Listeners<AuthPayloadMap>;
     http: HTTP;
     private _service;
-    readonly _storage: AuthStorage<number> | null;
+    readonly _storage: AuthStorage<number>;
     private _responseParser;
     private readonly _requestBuilder;
     _backgroundFlow: BackgroundFlow | null;
@@ -174,7 +174,7 @@ export default class Auth implements HTTPAuth {
     /**
      * @return {Promise.<object>}
      */
-    getUser(accessToken?: string | null | undefined): Promise<any> | undefined;
+    getUser(accessToken?: string | null | undefined): Promise<any>;
     /**
      * @return {Promise.<object>}
      */
@@ -197,7 +197,7 @@ export default class Auth implements HTTPAuth {
      */
     login(): Promise<void>;
     switchUser(): Promise<void>;
-    _makeStateFromResponse(authResponse: AuthResponse): AuthState;
+    _makeStateFromResponse(authResponse: AuthResponse): AuthState | null;
     /**
      * Check if the hash contains an access token.
      * If it does, extract the state, compare with

package/components/auth/auth__core.js

@@ -58,7 +58,7 @@ export default class Auth {
     listeners = new Listeners();
     http;
     _service = {};
-    _storage = null;
+    _storage;
     _responseParser = new AuthResponseParser();
     _requestBuilder = null;
     _backgroundFlow;
@@ -137,7 +137,10 @@ export default class Auth {
             this.addListener(LOGOUT_EVENT, this.config.onLogout);
         }
         if (this.config.reloadOnUserChange) {
-            this.addListener(USER_CHANGED_EVENT, () => this._reloadCurrentPage());
+            this.addListener(USER_CHANGED_EVENT, () => {
+                // Timeout is needed to ensure all other listeners triggered before stopping current page
+                setTimeout(() => this._reloadCurrentPage());
+            });
         }
         this.addListener(LOGOUT_POSTPONED_EVENT, () => this._setPostponed(true));
         this.addListener(USER_CHANGE_POSTPONED_EVENT, () => this._setPostponed(true));
@@ -694,23 +697,24 @@ export default class Auth {
     _makeStateFromResponse(authResponse) {
         const { state } = authResponse;
         if (!state) {
-            return {};
+            throw new Error('No state in AuthResponse');
         }
         const { scope: defaultScope } = this.config;
+        let urlFromState = null;
         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
-            };
+            urlFromState = new URL(state); // checking if state contains valid URL on same origin, see HUB-11514
         }
-        catch (e) {
-            return {};
+        catch {
+            return null;
         }
+        if (urlFromState.origin !== window.location.origin) {
+            throw new Error(`State contains URL with different origin: "${state}"`);
+        }
+        return {
+            restoreLocation: state,
+            created: Date.now(),
+            scopes: defaultScope
+        };
     }
     /**
      * Check if the hash contains an access token.
@@ -731,8 +735,16 @@ export default class Auth {
             return undefined;
         }
         const { state: stateId, scope, expiresIn, accessToken } = authResponse;
-        const newState = await (stateId && this._storage?.getState(stateId)) ||
-            this._makeStateFromResponse(authResponse);
+        let newState = null;
+        if (stateId) {
+            newState = await this._storage.getState(stateId);
+            if (!newState) {
+                newState = this._makeStateFromResponse(authResponse);
+            }
+        }
+        if (!newState) {
+            throw new Error(`Could not create state where stateId="${stateId}"`);
+        }
         const scopes = scope ? scope.split(' ') : newState.scopes || defaultScope || [];
         const effectiveExpiresIn = expiresIn ? parseInt(expiresIn, 10) : defaultExpiresIn;
         const expires = TokenValidator._epoch() + effectiveExpiresIn;

package/components/auth/down-notification.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import alertService from '../alert-service/alert-service';
 import Alert from '../alert/alert';
 import Link from '../link/link';
@@ -27,14 +26,6 @@ function Message({ translations, onCheckAgain }) {
       <Link onClick={onCheckAgain} data-test="check-again">{checkAgain}</Link>
     </div>);
 }
-Message.propTypes = {
-    translations: PropTypes.shape({
-        backendIsNotAvailable: PropTypes.string,
-        checkAgain: PropTypes.string,
-        errorMessage: PropTypes.string
-    }),
-    onCheckAgain: PropTypes.func
-};
 export default function onBackendDown({ onCheckAgain, translations }) {
     async function checkAgainWithoutClosing(e) {
         // Alert has weird behaviour of handling clicks by "a" tags

package/components/auth/storage.js

@@ -39,8 +39,7 @@ export default class AuthStorage {
         this.stateTTL = config.stateTTL || DEFAULT_STATE_TTL;
         this._lastMessage = null;
         const StorageConstructor = config.storage || Storage;
-        this.stateQuota = Math.min(config.stateQuota ||
-            DEFAULT_STATE_QUOTA, StorageConstructor.QUOTA || Infinity);
+        this.stateQuota = config.stateQuota || DEFAULT_STATE_QUOTA;
         this._stateStorage = new StorageConstructor({
             cookieName: 'ring-state'
         });

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

@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 /**
  * @name Auth Dialog
  */
@@ -21,23 +20,6 @@ export interface AuthDialogProps {
     onTryAgain?: () => void;
 }
 export default class AuthDialog extends Component<AuthDialogProps> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        errorMessage: PropTypes.Requireable<string>;
-        serviceImage: PropTypes.Requireable<string>;
-        serviceName: PropTypes.Requireable<string>;
-        loginCaption: PropTypes.Requireable<string>;
-        loginToCaption: PropTypes.Requireable<string>;
-        show: PropTypes.Requireable<boolean>;
-        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;

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

@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Content } from '../island/island';
 import Dialog from '../dialog/dialog';
@@ -7,23 +6,6 @@ import Button from '../button/button';
 import { H2 } from '../heading/heading';
 import styles from './auth-dialog.css';
 export default class AuthDialog extends Component {
-    static propTypes = {
-        className: PropTypes.string,
-        title: PropTypes.string,
-        errorMessage: PropTypes.string,
-        serviceImage: PropTypes.string,
-        serviceName: PropTypes.string,
-        loginCaption: PropTypes.string,
-        loginToCaption: PropTypes.string,
-        show: PropTypes.bool,
-        cancelOnEsc: PropTypes.bool,
-        confirmLabel: PropTypes.string,
-        cancelLabel: PropTypes.string,
-        tryAgainLabel: PropTypes.string,
-        onConfirm: PropTypes.func,
-        onCancel: PropTypes.func,
-        onTryAgain: PropTypes.func
-    };
     static defaultProps = {
         loginCaption: 'Log in',
         loginToCaption: 'Log in to %serviceName%',

package/components/avatar/avatar.d.ts

@@ -1,5 +1,4 @@
 import { PureComponent, ImgHTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 /**
  * @name Avatar
  */
@@ -24,18 +23,6 @@ export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
     skipParams?: boolean | null | undefined;
 }
 export default class Avatar extends PureComponent<AvatarProps> {
-    static propTypes: {
-        dpr: PropTypes.Requireable<number>;
-        className: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<number>;
-        style: PropTypes.Requireable<object>;
-        url: PropTypes.Requireable<string>;
-        round: PropTypes.Requireable<boolean>;
-        subavatar: PropTypes.Requireable<string>;
-        subavatarSize: PropTypes.Requireable<number>;
-        username: PropTypes.Requireable<string>;
-        skipParams: PropTypes.Requireable<boolean>;
-    };
     static defaultProps: {
         dpr: number;
         size: Size;

package/components/avatar/avatar.js

@@ -1,5 +1,4 @@
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { encodeURL, isDataURI, parseQueryString } from '../global/url';
 import { getPixelRatio } from '../global/dom';
@@ -20,18 +19,6 @@ export var Size;
     Size[Size["Size56"] = 56] = "Size56";
 })(Size || (Size = {}));
 export default class Avatar extends PureComponent {
-    static propTypes = {
-        dpr: PropTypes.number,
-        className: PropTypes.string,
-        size: PropTypes.number,
-        style: PropTypes.object,
-        url: PropTypes.string,
-        round: PropTypes.bool,
-        subavatar: PropTypes.string,
-        subavatarSize: PropTypes.number,
-        username: PropTypes.string,
-        skipParams: PropTypes.bool
-    };
     static defaultProps = {
         dpr: getPixelRatio(),
         size: Size.Size20,

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

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

package/components/avatar/fallback-avatar.js

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import getUID from '../global/get-uid';
 const colorPairs = [
     ['#60A800', '#D5CA00'],
@@ -106,8 +105,3 @@ export default function FallbackAvatar({ username, size, round }) {
       </g>
     </svg>);
 }
-FallbackAvatar.propTypes = {
-    username: PropTypes.string.isRequired,
-    size: PropTypes.number.isRequired,
-    round: PropTypes.bool
-};

package/components/badge/badge.d.ts

@@ -1,5 +1,4 @@
 import { PureComponent, HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 export interface BadgeProps extends HTMLAttributes<HTMLElement> {
     gray?: boolean | null | undefined;
     valid?: boolean | null | undefined;
@@ -11,14 +10,5 @@ export interface BadgeProps extends HTMLAttributes<HTMLElement> {
  * @name Badge
  */
 export default class Badge extends PureComponent<BadgeProps> {
-    static propTypes: {
-        gray: PropTypes.Requireable<boolean>;
-        valid: PropTypes.Requireable<boolean>;
-        invalid: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        'data-test': PropTypes.Requireable<string>;
-    };
     render(): import("react").JSX.Element;
 }

package/components/badge/badge.js

@@ -1,5 +1,4 @@
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
 import dataTests from '../global/data-tests';
@@ -10,15 +9,6 @@ const warn = deprecate(() => { }, 'Badge is deprecated and will be removed in Ri
  */
 // TODO remove in 7.0
 export default class Badge extends PureComponent {
-    static propTypes = {
-        gray: PropTypes.bool,
-        valid: PropTypes.bool,
-        invalid: PropTypes.bool,
-        disabled: PropTypes.bool,
-        className: PropTypes.string,
-        children: PropTypes.node,
-        'data-test': PropTypes.string
-    };
     render() {
         warn();
         const { 

package/components/breadcrumbs/breadcrumbs.css

@@ -4,4 +4,5 @@
   color: var(--ring-borders-color);
 
   font-size: 16px;
+  line-height: 16px;
 }