@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

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

@@ -1,158 +1,91 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import {Content} from '../island/island';
+import { Content } from '../island/island';
 import Dialog from '../dialog/dialog';
 import Button from '../button/button';
-
-import {H2} from '../heading/heading';
-
+import { H2 } from '../heading/heading';
 import styles from './auth-dialog.css';
-
-/**
- * @name Auth Dialog
- */
-
 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%',
-    show: false,
-    cancelOnEsc: true,
-    confirmLabel: 'Log in',
-    cancelLabel: 'Remain a guest',
-    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();
+    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%',
+        tryAgainLabel: 'Try again',
+        show: false,
+        cancelOnEsc: true,
+        confirmLabel: 'Log in',
+        cancelLabel: 'Remain a guest',
+        onConfirm: () => { },
+        onCancel: () => { }
+    };
+    state = {
+        retrying: false
+    };
+    componentDidMount() {
+        window.addEventListener('online', this.onRetryPress);
     }
-  };
-
-  onRetryPress = async () => {
-    if (!this.props.onTryAgain || this.state.retrying) {
-      return;
+    componentWillUnmount() {
+        window.removeEventListener('online', this.onRetryPress);
     }
-    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,
-      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
-      >
+    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, 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>
         <Content>
           <div className={styles.content}>
-            {serviceImage && (
-              <img
-                alt={`${serviceName} logo`}
-                className={styles.logo}
-                src={serviceImage}
-              />
-            )}
+            {serviceImage && (<img alt={`${serviceName} logo`} className={styles.logo} src={serviceImage}/>)}
             <H2 className={styles.title}>{title}</H2>
-            {errorMessage && (
-              <div className={styles.error}>{errorMessage}</div>
-            )}
-            <Button
-              primary
-              className={styles.firstButton}
-              data-test="auth-dialog-confirm-button"
-              onClick={onConfirm}
-            >
+            {errorMessage && (<div className={styles.error}>{errorMessage}</div>)}
+            <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}
-              >
+            {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}
-            >
+              </Button>)}
+            <Button className={styles.button} data-test="auth-dialog-cancel-button" onClick={onCancel}>
               {cancelLabel}
             </Button>
           </div>
         </Content>
-      </Dialog>
-    );
-  }
+      </Dialog>);
+    }
 }
-

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import AuthDialog, { AuthDialogProps } from '../auth-dialog/auth-dialog';
+declare type AuthDialogAttributes = JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
+export default function showAuthDialog(props?: AuthDialogAttributes): () => void;
+export {};

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

@@ -1,28 +1,22 @@
 import React from 'react';
-import {render} from 'react-dom';
-
+import { render } from 'react-dom';
 import AuthDialog from '../auth-dialog/auth-dialog';
-
 /**
  * @name Auth Dialog Service
  */
-
 const containerElement = document.createElement('div');
-
 /**
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-  render(<AuthDialog {...props}/>, containerElement);
+    render(<AuthDialog {...props}/>, containerElement);
 }
-
 export default function showAuthDialog(props = {}) {
-  renderAuthDialog({
-    ...props,
-    show: true
-  });
-
-  return () => {
-    renderAuthDialog({show: false});
-  };
+    renderAuthDialog({
+        ...props,
+        show: true
+    });
+    return () => {
+        renderAuthDialog({ show: false });
+    };
 }

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

@@ -3,7 +3,7 @@ import angular from 'angular';
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 import hubConfig from '../../.storybook/hub-config';
 
-import AuthNG from '@jetbrains/ring-ui/components/auth-ng/auth-ng';
+import AuthNG from './auth-ng';
 
 export default {
   title: 'Legacy Angular/Auth Ng',

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

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import InputNg from '@jetbrains/ring-ui/components/input-ng/input-ng';
-import SelectNg from '@jetbrains/ring-ui/components/select-ng/select-ng';
+import InputNg from '../input-ng/input-ng';
+import SelectNg from '../select-ng/select-ng';
 
-import AutofocusNG from '@jetbrains/ring-ui/components/autofocus-ng/autofocus-ng';
+import AutofocusNG from './autofocus-ng';
 
 export default {
   title: 'Legacy Angular/Autofocus Ng',

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-example-datauri.d.ts

@@ -0,0 +1 @@
+export declare const avatarDataUri: string;

package/components/avatar/avatar-example-datauri.js

@@ -1,5 +1,4 @@
 // Taken from https://hub.jetbrains.com/api/rest/avatar/default?username=Jet%20Brains&dpr=2&size=56
-
 export const avatarDataUri = `data:image/svg+xml,${encodeURIComponent(`
 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
     <defs>

package/components/avatar/avatar.d.ts

@@ -0,0 +1,51 @@
+import { PureComponent, ImgHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Avatar
+ */
+export declare enum Size {
+    Size18 = 18,
+    Size20 = 20,
+    Size24 = 24,
+    Size28 = 28,
+    Size32 = 32,
+    Size40 = 40,
+    Size48 = 48,
+    Size56 = 56
+}
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+    dpr: number;
+    size: Size;
+    subavatarSize: number;
+    url?: string | null | undefined;
+    round?: boolean | null | undefined;
+    subavatar?: string | null | undefined;
+    username?: string | null | undefined;
+    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;
+        subavatarSize: number;
+        style: {};
+    };
+    state: {
+        errorUrl: string;
+    };
+    handleError: () => void;
+    handleSuccess: () => void;
+    render(): JSX.Element;
+}

package/components/avatar/avatar.js

@@ -1,169 +1,98 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import {encodeURL, isDataURI, parseQueryString} from '../global/url';
-import {getPixelRatio} from '../global/dom';
-
+import { encodeURL, isDataURI, parseQueryString } from '../global/url';
+import { getPixelRatio } from '../global/dom';
 import styles from './avatar.css';
 import FallbackAvatar from './fallback-avatar';
-
 /**
  * @name Avatar
  */
-
-export const Size = {
-  Size18: 18,
-  Size20: 20,
-  Size24: 24,
-  Size28: 28,
-  Size32: 32,
-  Size40: 40,
-  Size48: 48,
-  Size56: 56
-};
-
+export var Size;
+(function (Size) {
+    Size[Size["Size18"] = 18] = "Size18";
+    Size[Size["Size20"] = 20] = "Size20";
+    Size[Size["Size24"] = 24] = "Size24";
+    Size[Size["Size28"] = 28] = "Size28";
+    Size[Size["Size32"] = 32] = "Size32";
+    Size[Size["Size40"] = 40] = "Size40";
+    Size[Size["Size48"] = 48] = "Size48";
+    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,
-    subavatarSize: Size.Size20 / 2,
-    style: {}
-  };
-
-  state = {
-    errorUrl: ''
-  };
-
-  handleError = () => {
-    this.setState({errorUrl: this.props.url});
-  };
-
-  handleSuccess = () => {
-    this.setState({errorUrl: ''});
-  };
-
-  render() {
-    const {
-      size,
-      url,
-      dpr,
-      style,
-      round,
-      subavatar,
-      subavatarSize,
-      username,
-      skipParams,
-      ...restProps
-    } = this.props;
-    const sizeString = `${size}px`;
-    const subavatarSizeString = `${subavatarSize}px`;
-    const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
-    const styleObj = {
-      borderRadius: round ? '50%' : borderRadius,
-      height: sizeString,
-      width: sizeString,
-      ...style
+    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
     };
-
-    const styleObjGroup = {
-      borderRadius: '2px',
-      height: subavatarSizeString,
-      width: subavatarSizeString,
-      ...style
+    static defaultProps = {
+        dpr: getPixelRatio(),
+        size: Size.Size20,
+        subavatarSize: Size.Size20 / 2,
+        style: {}
     };
-
-    if (!url || this.state.errorUrl === url) {
-      return (
-        <span
-          {...restProps}
-          data-test="avatar"
-          className={
-            classNames(styles.avatar, this.props.className, {[styles.empty]: username == null})
-          }
-          style={styleObj}
-        >{
-            username != null && (
-              <FallbackAvatar
-                size={size}
-                round={round}
-                username={username}
-              />
-            )
-          }</span>
-      );
-    }
-
-    let src = url;
-    if (!skipParams && !isDataURI(url)) {
-      const [urlStart, query] = url.split('?');
-      const queryParams = {
-        ...parseQueryString(query),
-        dpr,
-        size
-      };
-
-      src = encodeURL(urlStart, queryParams);
-    }
-    let subavatarSrc = null;
-    if (subavatar && !isDataURI(subavatar)) {
-      const [urlStart, query] = subavatar.split('?');
-      const queryParams = {
-        ...parseQueryString(query),
-        dpr,
-        subavatarSizeString
-      };
-
-      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
-      return (
-        <div>
-          <img
-            {...restProps}
-            onError={this.handleError}
-            onLoad={this.handleSuccess}
-            className={classNames(styles.avatar, this.props.className)}
-            style={styleObj}
-            src={src}
-            alt="User avatar"
-          />
-          <img
-            {...restProps}
-            data-test="avatar"
-            onError={this.handleError}
-            onLoad={this.handleSuccess}
-            className={classNames(styles.subavatar)}
-            style={styleObjGroup}
-            src={subavatarSrc}
-            alt="Subavatar"
-          />
-        </div>
-      );
-    } else {
-      return (
-        <img
-          {...restProps}
-          data-test="avatar"
-          onError={this.handleError}
-          onLoad={this.handleSuccess}
-          className={classNames(styles.avatar, this.props.className)}
-          style={styleObj}
-          src={src}
-          alt="User avatar"
-        />
-      );
+    state = {
+        errorUrl: ''
+    };
+    handleError = () => {
+        this.setState({ errorUrl: this.props.url });
+    };
+    handleSuccess = () => {
+        this.setState({ errorUrl: '' });
+    };
+    render() {
+        const { size, url, dpr, style, round, subavatar, subavatarSize, username, skipParams, ...restProps } = this.props;
+        const sizeString = `${size}px`;
+        const subavatarSizeString = `${subavatarSize}px`;
+        const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
+        const styleObj = {
+            borderRadius: round ? '50%' : borderRadius,
+            height: sizeString,
+            width: sizeString,
+            ...style
+        };
+        const styleObjGroup = {
+            borderRadius: '2px',
+            height: subavatarSizeString,
+            width: subavatarSizeString,
+            ...style
+        };
+        if (!url || this.state.errorUrl === url) {
+            return (<span {...restProps} data-test="avatar" className={classNames(styles.avatar, this.props.className, { [styles.empty]: username == null })} style={styleObj}>{username != null && (<FallbackAvatar size={size} round={round} username={username}/>)}</span>);
+        }
+        let src = url;
+        if (!skipParams && !isDataURI(url)) {
+            const [urlStart, query] = url.split('?');
+            const queryParams = {
+                ...parseQueryString(query),
+                dpr,
+                size
+            };
+            src = encodeURL(urlStart, queryParams);
+        }
+        let subavatarSrc = null;
+        if (subavatar && !isDataURI(subavatar)) {
+            const [urlStart, query] = subavatar.split('?');
+            const queryParams = {
+                ...parseQueryString(query),
+                dpr,
+                subavatarSizeString
+            };
+            subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
+            return (<div>
+          <img {...restProps} onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>
+          <img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.subavatar)} style={styleObjGroup} src={subavatarSrc} alt="Subavatar"/>
+        </div>);
+        }
+        else {
+            return (<img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>);
+        }
     }
-  }
 }

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+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): JSX.Element;
+declare namespace FallbackAvatar {
+    var propTypes: {
+        username: PropTypes.Validator<string>;
+        size: PropTypes.Validator<number>;
+        round: PropTypes.Requireable<boolean>;
+    };
+}
+export default FallbackAvatar;