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

package/components/loader-screen/loader-screen.js

@@ -1,38 +1,25 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
 import Loader from '../loader/loader';
-
 import styles from './loader-screen.css';
-
 /**
  * @name Loader Screen
  */
 export default class LoaderScreen extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    containerClassName: PropTypes.string,
-    message: PropTypes.string
-  };
-
-  render() {
-    const {message, className, containerClassName, ...restProps} = this.props;
-
-    const containerClasses = classNames(containerClassName, styles.loaderScreen);
-
-    const loaderClasses = classNames(className, styles.loader, {
-      [styles.loaderWithoutSpacing]: !message
-    });
-
-    return (
-      <div className={containerClasses}>
-        <Loader
-          {...restProps}
-          message={message}
-          className={loaderClasses}
-        />
-      </div>
-    );
-  }
+    static propTypes = {
+        className: PropTypes.string,
+        containerClassName: PropTypes.string,
+        message: PropTypes.string
+    };
+    render() {
+        const { message, className, containerClassName, ...restProps } = this.props;
+        const containerClasses = classNames(containerClassName, styles.loaderScreen);
+        const loaderClasses = classNames(className, styles.loader, {
+            [styles.loaderWithoutSpacing]: !message
+        });
+        return (<div className={containerClasses}>
+        <Loader {...restProps} message={message} className={loaderClasses}/>
+      </div>);
+    }
 }

package/components/loader-screen-ng/loader-screen-ng.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import LoaderScreen from '@jetbrains/ring-ui/components/loader-screen-ng/loader-screen-ng';
+import LoaderScreen from './loader-screen-ng';
 
 export default {
   title: 'Legacy Angular/Loader Screen Ng',

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

@@ -0,0 +1,47 @@
+import { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface LoginDialogProps {
+    onCancel: () => void;
+    show: boolean;
+    url: string;
+    renderFallbackLink: (loggingIn: boolean) => ReactNode;
+    showFallbackTimeout: number;
+    className?: string | undefined;
+    loader?: boolean | null | undefined;
+    loadingMessage?: string | null | undefined;
+}
+/**
+ * @name Login Dialog
+ */
+export default class LoginDialog extends Component<LoginDialogProps> {
+    static propTypes: {
+        show: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        url: PropTypes.Requireable<string>;
+        loader: PropTypes.Requireable<boolean>;
+        loadingMessage: PropTypes.Requireable<string>;
+        showFallbackTimeout: PropTypes.Requireable<number>;
+        renderFallbackLink: PropTypes.Requireable<(...args: any[]) => any>;
+        onCancel: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        show: boolean;
+        url: string;
+        renderFallbackLink: () => null;
+        showFallbackTimeout: number;
+    };
+    state: {
+        loading: boolean;
+        loggingIn: boolean;
+        showFallbackLink: boolean;
+        height: number;
+        width: number;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    showFallbackTimout?: number;
+    startFallbackCountdown(): void;
+    onMessage: (event: MessageEvent) => void;
+    render(): JSX.Element;
+}
+export declare type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;

package/components/login-dialog/login-dialog.js

@@ -1,125 +1,84 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 import Dialog from '../dialog/dialog';
-import {Content} from '../island/island';
+import { Content } from '../island/island';
 import LoaderScreen from '../loader-screen/loader-screen';
-import {HUB_AUTH_PAGE_OPENED} from '../auth/background-flow';
-
+import { HUB_AUTH_PAGE_OPENED } from '../auth/background-flow';
 import styles from './login-dialog.css';
-
 const HUB_AUTH_PAGE_LOGIN_STARTED = 'HUB_AUTH_PAGE_LOGIN_STARTED';
 const HUB_AUTH_PAGE_LOGIN_DIMENSIONS = 'HUB_AUTH_PAGE_LOGIN_DIMENSIONS';
-
 const DEFAULT_HEIGHT = 517;
 const DEFAULT_WIDTH = 333;
 const DEFAULT_SHOW_FALLBACK_TIMEOUT = 5000;
 /**
  * @name Login Dialog
  */
-
 export default class LoginDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool,
-    className: PropTypes.string,
-    url: PropTypes.string,
-    loader: PropTypes.bool,
-    loadingMessage: PropTypes.string,
-    showFallbackTimeout: PropTypes.number,
-    renderFallbackLink: PropTypes.func,
-    onCancel: PropTypes.func.isRequired
-  };
-
-  static defaultProps = {
-    show: false,
-    url: 'about:blank',
-    renderFallbackLink: () => null,
-    showFallbackTimeout: DEFAULT_SHOW_FALLBACK_TIMEOUT
-  };
-
-  state = {
-    loading: true,
-    loggingIn: false,
-    showFallbackLink: false,
-    height: DEFAULT_HEIGHT,
-    width: DEFAULT_WIDTH
-  };
-
-  componentDidMount() {
-    window.addEventListener('message', this.onMessage);
-    this.startFallbackCountdown();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('message', this.onMessage);
-  }
-
-  startFallbackCountdown() {
-    this.showFallbackTimout = setTimeout(
-      () => this.setState({showFallbackLink: true}),
-      this.props.showFallbackTimeout
-    );
-  }
-
-  onMessage = event => {
-    const {data} = event;
-    if (!data) {
-      return;
+    static propTypes = {
+        show: PropTypes.bool,
+        className: PropTypes.string,
+        url: PropTypes.string,
+        loader: PropTypes.bool,
+        loadingMessage: PropTypes.string,
+        showFallbackTimeout: PropTypes.number,
+        renderFallbackLink: PropTypes.func,
+        onCancel: PropTypes.func.isRequired
+    };
+    static defaultProps = {
+        show: false,
+        url: 'about:blank',
+        renderFallbackLink: () => null,
+        showFallbackTimeout: DEFAULT_SHOW_FALLBACK_TIMEOUT
+    };
+    state = {
+        loading: true,
+        loggingIn: false,
+        showFallbackLink: false,
+        height: DEFAULT_HEIGHT,
+        width: DEFAULT_WIDTH
+    };
+    componentDidMount() {
+        window.addEventListener('message', this.onMessage);
+        this.startFallbackCountdown();
     }
-
-    if (data === HUB_AUTH_PAGE_OPENED) {
-      clearTimeout(this.showFallbackTimout);
-      this.setState({loading: false, loggingIn: false});
-      return;
+    componentWillUnmount() {
+        window.removeEventListener('message', this.onMessage);
     }
-
-    if (data === HUB_AUTH_PAGE_LOGIN_STARTED) {
-      this.setState({loading: true, loggingIn: true});
-      this.startFallbackCountdown();
-      return;
-    }
-
-    if (data.message === HUB_AUTH_PAGE_LOGIN_DIMENSIONS) {
-      this.setState({height: data.height, width: data.width});
+    showFallbackTimout;
+    startFallbackCountdown() {
+        this.showFallbackTimout = window.setTimeout(() => this.setState({ showFallbackLink: true }), this.props.showFallbackTimeout);
     }
-  };
-
-  render() {
-    const {show, className, url, loadingMessage, renderFallbackLink, onCancel} = this.props;
-    const {loading, height, width, loggingIn, showFallbackLink} = this.state;
-
-    const iFrameStyle = {height, width};
-
-    return (
-      <Dialog
-        data-test="ring-login-dialog"
-        className={className}
-        contentClassName={styles.dialogContent}
-        trapFocus
-        autoFocusFirst={false}
-        show={show}
-        showCloseButton
-        onCloseAttempt={onCancel}
-      >
+    onMessage = (event) => {
+        const { data } = event;
+        if (!data) {
+            return;
+        }
+        if (data === HUB_AUTH_PAGE_OPENED) {
+            clearTimeout(this.showFallbackTimout);
+            this.setState({ loading: false, loggingIn: false });
+            return;
+        }
+        if (data === HUB_AUTH_PAGE_LOGIN_STARTED) {
+            this.setState({ loading: true, loggingIn: true });
+            this.startFallbackCountdown();
+            return;
+        }
+        if (data.message === HUB_AUTH_PAGE_LOGIN_DIMENSIONS) {
+            this.setState({ height: data.height, width: data.width });
+        }
+    };
+    render() {
+        const { show, className, url, loadingMessage, renderFallbackLink, onCancel } = this.props;
+        const { loading, height, width, loggingIn, showFallbackLink } = this.state;
+        const iFrameStyle = { height, width };
+        return (<Dialog data-test="ring-login-dialog" className={className} contentClassName={styles.dialogContent} trapFocus autoFocusFirst={false} show={show} showCloseButton onCloseAttempt={onCancel}>
         <Content>
-          <iframe
-            title="Login dialog"
-            style={iFrameStyle}
-            src={url}
-            className={styles.iFrame}
-            scrolling="no"
-          />
+          <iframe title="Login dialog" style={iFrameStyle} src={url} className={styles.iFrame} scrolling="no"/>
         </Content>
 
-        {loading && (
-          <LoaderScreen message={loadingMessage} containerClassName={styles.nonOpaqueLoader}/>
-        )}
+        {loading && (<LoaderScreen message={loadingMessage} containerClassName={styles.nonOpaqueLoader}/>)}
 
-        {showFallbackLink && (
-          <div className={styles.fallbackLinkContainer}>{renderFallbackLink(loggingIn)}</div>
-        )}
-      </Dialog>
-    );
-  }
+        {showFallbackLink && (<div className={styles.fallbackLinkContainer}>{renderFallbackLink(loggingIn)}</div>)}
+      </Dialog>);
+    }
 }
-

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

@@ -0,0 +1,2 @@
+import { LoginDialogAttrs } from './login-dialog';
+export default function showAuthDialog(props?: LoginDialogAttrs): () => void;

package/components/login-dialog/service.js

@@ -1,24 +1,20 @@
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
-
+import { render, unmountComponentAtNode } from 'react-dom';
 import LoginDialog from './login-dialog';
-
 const containerElement = document.createElement('div');
-
 /**
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
-  render(<LoginDialog {...props}/>, containerElement);
+    render(<LoginDialog {...props}/>, containerElement);
 }
-
-export default function showAuthDialog(props = {}) {
-  renderLoginDialog({
-    ...props,
-    show: true
-  });
-
-  return () => {
-    unmountComponentAtNode(containerElement);
-  };
+function noop() { }
+export default function showAuthDialog(props = { onCancel: noop }) {
+    renderLoginDialog({
+        ...props,
+        show: true
+    });
+    return () => {
+        unmountComponentAtNode(containerElement);
+    };
 }

package/components/markdown/code.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+declare module 'react-markdown/lib/complex-types' {
+    interface ReactMarkdownProps {
+        language?: string;
+    }
+}
+declare const MarkdownCode: ({ children, language, inline }: CodeProps) => JSX.Element;
+export default MarkdownCode;

package/components/markdown/code.js

@@ -1,20 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import Code from '../code/code';
-
-const MarkdownCode = ({value, language, inline}) => (
-  <Code
-    language={language}
-    code={value || ''}
-    inline={inline}
-  />
-);
-
+const MarkdownCode = ({ children, language, inline }) => (<Code language={language} code={children?.join('') || ''} inline={inline}/>);
 MarkdownCode.propTypes = {
-  language: PropTypes.string,
-  value: PropTypes.string,
-  inline: PropTypes.bool
+    language: PropTypes.string,
+    children: PropTypes.array.isRequired,
+    inline: PropTypes.bool
 };
-
 export default MarkdownCode;

package/components/markdown/heading.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { HeadingProps } from 'react-markdown/lib/ast-to-react';
+declare const MarkdownHeading: {
+    ({ level, children }: HeadingProps): JSX.Element;
+    propTypes: {
+        level: PropTypes.Validator<number>;
+        children: PropTypes.Validator<any[]>;
+    };
+};
+export default MarkdownHeading;

package/components/markdown/heading.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import Heading from '../heading/heading';
-
-const MarkdownHeading = ({level, children}) => <Heading level={level}>{children}</Heading>;
-
+const MarkdownHeading = ({ level, children }) => <Heading level={level}>{children}</Heading>;
 MarkdownHeading.propTypes = {
-  level: PropTypes.number,
-  children: PropTypes.node
+    level: PropTypes.number.isRequired,
+    children: PropTypes.array.isRequired
 };
-
 export default MarkdownHeading;

package/components/markdown/link.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
+declare const MarkdownLink: {
+    ({ href, title, children }: JSX.IntrinsicElements['a'] & ReactMarkdownProps): JSX.Element;
+    propTypes: {
+        href: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        children: PropTypes.Validator<any[]>;
+    };
+};
+export default MarkdownLink;

package/components/markdown/link.js

@@ -1,14 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import Link from '../link/link';
-
-const MarkdownLink = ({href, title, children}) => <Link {...{href, title}}>{children}</Link>;
-
+const MarkdownLink = ({ href, title, children }) => <Link href={href} title={title}>{children}</Link>;
 MarkdownLink.propTypes = {
-  href: PropTypes.string,
-  title: PropTypes.string,
-  children: PropTypes.node
+    href: PropTypes.string,
+    title: PropTypes.string,
+    children: PropTypes.array.isRequired
 };
-
 export default MarkdownLink;

package/components/markdown/markdown.d.ts

@@ -0,0 +1,14 @@
+import { PureComponent } from 'react';
+import { Options } from 'react-markdown';
+export interface BaseMarkdownProps {
+    inline?: boolean | null | undefined;
+}
+export declare type MarkdownProps = Options & BaseMarkdownProps;
+/**
+  * @name Markdown
+*/
+export default class Markdown extends PureComponent<MarkdownProps> {
+    render(): JSX.Element;
+}
+declare const md: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
+export { md };

package/components/markdown/markdown.js

@@ -1,58 +1,44 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
 import classNames from 'classnames';
 import RemarkBreaks from 'remark-breaks';
 import RemarkGFM from 'remark-gfm';
-
 import normalizeIndent from '../global/normalize-indent';
 import trivialTemplateTag from '../global/trivial-template-tag';
-
 import Code from './code';
 import Link from './link';
 import Heading from './heading';
 import styles from './markdown.css';
-
 /**
   * @name Markdown
 */
-
 export default class Markdown extends PureComponent {
-  static propTypes = {
+    render() {
+        const { className, components, inline, children, plugins = [], ...restProps } = this.props;
+        const classes = classNames(className, {
+            [styles.markdown]: !inline,
+            [styles.inline]: inline
+        });
+        return (<ReactMarkdown className={classes} plugins={[RemarkBreaks, RemarkGFM, ...plugins]} components={{
+                a: Link,
+                code: Code,
+                h1: Heading,
+                h2: Heading,
+                h3: Heading,
+                h4: Heading,
+                h5: Heading,
+                h6: Heading,
+                ...components
+            }} {...restProps}>{normalizeIndent(children)}</ReactMarkdown>);
+    }
+}
+Markdown.propTypes = {
     inline: PropTypes.bool,
-    source: PropTypes.string,
+    children: PropTypes.string,
     className: PropTypes.string,
-    renderers: PropTypes.object,
+    components: PropTypes.object,
     plugins: PropTypes.array
-  };
-
-  render() {
-    const {className, renderers, inline, source, plugins = [], ...restProps} = this.props;
-
-    const classes = classNames(className, {
-      [styles.markdown]: !inline,
-      [styles.inline]: inline
-    });
-
-    return (
-      <ReactMarkdown
-        className={classes}
-        source={normalizeIndent(source)}
-        plugins={[RemarkBreaks, RemarkGFM, ...plugins]}
-        renderers={{
-          link: Link,
-          linkReference: Link,
-          code: Code,
-          inlineCode: Code,
-          heading: Heading,
-          ...renderers
-        }}
-        {...restProps}
-      />
-    );
-  }
-}
-
-const md = trivialTemplateTag(source => <Markdown {...{source}}/>);
-
-export {md};
+};
+const md = trivialTemplateTag(source => <Markdown>{source}</Markdown>);
+export { md };

package/components/message/message.css

@@ -3,6 +3,10 @@
 @value unit from "../global/global.css";
 @value padding: calc(unit * 1.5);
 
+.container {
+  display: inline;
+}
+
 .message {
   overflow: visible;
 
@@ -12,7 +16,7 @@
 
   text-align: left;
 
-  color: var(--ring-dark-text-color);
+  color: var(--ring-active-text-color);
 
   border: none;
 
@@ -32,7 +36,7 @@
 
     border-radius: var(--ring-border-radius);
 
-    box-shadow: 0 2px 8px 0 var(--ring-message-shadow-color);
+    box-shadow: var(--ring-popup-shadow);
   }
 }
 
@@ -55,7 +59,7 @@
 
   margin: calc(unit / 2) 0 0;
 
-  color: var(--ring-dark-active-color);
+  color: var(--ring-text-color);
 }
 
 .button {

package/components/message/message.d.ts

@@ -0,0 +1,59 @@
+import { Component, ReactNode } from 'react';
+import Popup, { PopupAttrs } from '../popup/popup';
+import { Directions } from '../popup/popup.consts';
+import { IconType } from '../icon/icon';
+import { ButtonAttrs } from '../button/button';
+import Theme from '../global/theme';
+export interface MessageTranslations {
+    gotIt: string;
+    dismiss: string;
+}
+export interface MessageProps {
+    icon: string | IconType | null;
+    directions: readonly Directions[];
+    translations: MessageTranslations;
+    theme: Theme;
+    title?: string | null | undefined;
+    children?: ReactNode;
+    className?: string | null | undefined;
+    tailClassName?: string | null | undefined;
+    direction?: Directions | null | undefined;
+    popupProps?: Partial<PopupAttrs> | null | undefined;
+    buttonProps?: ButtonAttrs | null | undefined;
+    tailOffset?: number | null | undefined;
+    onClose?: (() => void) | undefined;
+    onDismiss?: (() => void) | null | undefined;
+}
+interface MessageState {
+    direction?: Directions;
+}
+/**
+ * Displays a popup containing a message.
+ */
+export default class Message extends Component<MessageProps> {
+    static defaultProps: {
+        icon: string;
+        directions: Directions[];
+        translations: {
+            gotIt: string;
+            dismiss: string;
+        };
+        theme: Theme;
+    };
+    state: MessageState;
+    static Directions: typeof Directions;
+    static PopupProps: {
+        Directions: typeof Directions;
+        Dimension: typeof import("../popup/popup.consts").Dimension;
+        MinWidth: typeof import("../popup/popup.consts").MinWidth;
+        MaxHeight: typeof import("../popup/popup.consts").MaxHeight;
+    };
+    private _onDirectionChange;
+    popup?: Popup | null;
+    node?: HTMLElement | null;
+    popupRef: (el: Popup | null) => void;
+    getTailOffset(): number;
+    render(): JSX.Element;
+}
+export declare type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
+export {};