@jetbrains/ring-ui 6.1.1-beta.0 → 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';

package/components/auth/auth__core.js

@@ -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));

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