@jetbrains/ring-ui 5.1.21 → 5.1.23

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

@@ -1,30 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import LoaderScreen from './loader-screen-ng';
-
-export default {
-  title: 'Legacy Angular/Loader Screen Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Loader Screen.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [LoaderScreen]).run(loaderScreen => {
-    loaderScreen.setVisible(true);
-    loaderScreen.startInitialLoading();
-  });
-
-  return `
-      <div>
-        <div rg-loader-screen="Loading..."></div>
-      </div>
-    `;
-};
-
-basic.storyName = 'Loader Screen Ng';

package/components/login-dialog/login-dialog.css

@@ -1,25 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.iFrame {
-  overflow: hidden;
-
-  border: none;
-}
-
-.dialogContent {
-  width: auto;
-}
-
-.nonOpaqueLoader {
-  background-color: var(--ring-content-background-color);
-}
-
-.fallbackLinkContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  padding: unit;
-}

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

@@ -1,47 +0,0 @@
-import React, { 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(): React.JSX.Element;
-}
-export type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;

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

@@ -1,84 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Dialog from '../dialog/dialog';
-import { Content } from '../island/island';
-import LoaderScreen from '../loader-screen/loader-screen';
-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);
-    }
-    showFallbackTimout;
-    startFallbackCountdown() {
-        this.showFallbackTimout = window.setTimeout(() => this.setState({ showFallbackLink: true }), this.props.showFallbackTimeout);
-    }
-    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"/>
-        </Content>
-
-        {loading && (<LoaderScreen message={loadingMessage} containerClassName={styles.nonOpaqueLoader}/>)}
-
-        {showFallbackLink && (<div className={styles.fallbackLinkContainer}>{renderFallbackLink(loggingIn)}</div>)}
-      </Dialog>);
-    }
-}

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

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

package/components/login-dialog/service.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render, unmountComponentAtNode } from '../global/react-render-adapter';
-import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
-import LoginDialog from './login-dialog';
-const containerElement = document.createElement('div');
-/**
- * Renders LoginDialog into virtual node to skip maintaining container
- */
-function renderLoginDialog(props) {
-    render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
-        <LoginDialog {...props}/>
-      </ControlsHeightContext.Provider>), containerElement);
-}
-function noop() { }
-export default function showAuthDialog(props = { onCancel: noop }) {
-    renderLoginDialog({
-        ...props,
-        show: true
-    });
-    return () => {
-        unmountComponentAtNode(containerElement);
-    };
-}

package/components/markdown/code.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { CodeProps } from 'react-markdown/lib/ast-to-react';
-export interface MarkdownCodeProps extends CodeProps {
-    language?: string;
-}
-declare const MarkdownCode: ({ children, language, inline, className }: MarkdownCodeProps) => React.JSX.Element;
-export default MarkdownCode;

package/components/markdown/code.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Code from '../code/code';
-const MarkdownCode = ({ children, language, inline, className }) => {
-    // Hack for updated react-markdown RG-2193
-    const lang = language ?? (className?.
-        split(' ').
-        find(name => name.startsWith('language-'))?.
-        replace('language-', ''));
-    return (<Code language={lang} className={className} code={children?.join('') || ''} inline={inline}/>);
-};
-MarkdownCode.propTypes = {
-    language: PropTypes.string,
-    children: PropTypes.array.isRequired,
-    inline: PropTypes.bool
-};
-export default MarkdownCode;

package/components/markdown/heading.d.ts

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

package/components/markdown/heading.js

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

package/components/markdown/link.d.ts

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

package/components/markdown/link.js

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

package/components/markdown/markdown.css

@@ -1,76 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-@value p-margin: 10px;
-
-.inline {
-  &,
-  & p {
-    display: inline;
-  }
-}
-
-.markdown {
-  composes: font from  "../global/global.css";
-
-  & ol,
-  & ul {
-    margin: 0;
-  }
-
-  & p,
-  & blockquote,
-  & pre {
-    margin: 0;
-
-    &:not(:first-child) {
-      margin-top: p-margin;
-    }
-  }
-
-  & li {
-    margin-top: p-margin;
-  }
-
-  & li {
-    & p,
-    & blockquote,
-    & pre {
-      &:not(:first-child) {
-        margin-top: 6px;
-      }
-    }
-  }
-
-  & hr {
-    margin: p-margin 0;
-
-    border: none;
-    border-bottom: 1px solid var(--ring-line-color);
-  }
-
-  & blockquote {
-    padding: 0 0 0 calc(2 * unit);
-
-    color: var(--ring-secondary-color);
-    box-shadow: inset 2px 0 0 var(--ring-line-color);
-
-    font-size: 12px;
-    line-height: 18px;
-  }
-
-  & ul {
-    padding: 0 0 0 calc(2 * unit);
-  }
-
-  & ol {
-    padding: 0;
-
-    list-style-position: inside;
-    font-variant-numeric: tabular-nums;
-  }
-
-  & ul {
-    list-style-type: none;
-  }
-}

package/components/markdown/markdown.d.ts

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

package/components/markdown/markdown.js

@@ -1,44 +0,0 @@
-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 {
-    render() {
-        const { className, components, inline, children, plugins = [], remarkPlugins = [], ...restProps } = this.props;
-        const classes = classNames(className, {
-            [styles.markdown]: !inline,
-            [styles.inline]: inline
-        });
-        return (<ReactMarkdown className={classes} remarkPlugins={[RemarkBreaks, RemarkGFM, ...plugins, ...remarkPlugins]} 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,
-    children: PropTypes.string,
-    className: PropTypes.string,
-    components: PropTypes.object,
-    plugins: PropTypes.array
-};
-const md = trivialTemplateTag(source => <Markdown>{source}</Markdown>);
-export { md };

package/components/message/message.css

@@ -1,64 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-@value padding: calc(unit * 1.5);
-
-.container {
-  display: inline;
-}
-
-.message {
-  overflow: visible;
-
-  max-width: calc(unit * 40);
-
-  padding: padding padding calc(unit * 2) calc(unit * 5);
-
-  text-align: left;
-
-  color: var(--ring-active-text-color);
-
-  background-color: var(--ring-popup-background-color);
-}
-
-.icon {
-  position: absolute;
-  top: 10px;
-  left: padding;
-}
-
-.title {
-  composes: font-lower from "../global/global.css";
-
-  margin: 0;
-
-  font-weight: normal;
-}
-
-.description {
-  margin: calc(unit / 2) 0 0;
-
-  color: var(--ring-text-color);
-
-  font-size: var(--ring-font-size-smaller);
-  line-height: var(--ring-line-height-lowest);
-}
-
-.button {
-  margin-top: padding;
-}
-
-.tail {
-  position: absolute;
-
-  box-sizing: border-box;
-  width: 11px;
-  height: 11px;
-
-  transform-origin: 0 0;
-
-  border: 1px solid;
-  border-color: transparent transparent var(--ring-popup-border-color) var(--ring-popup-border-color);
-
-  background-color: var(--ring-popup-background-color);
-}

package/components/message/message.d.ts

@@ -1,55 +0,0 @@
-import React, { 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 | null | undefined;
-    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[];
-        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(): React.JSX.Element;
-}
-export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
-export {};

package/components/message/message.js

@@ -1,129 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import gift from '@jetbrains/icons/gift';
-import Popup from '../popup/popup';
-import { Directions } from '../popup/popup.consts';
-import Icon from '../icon/icon';
-import Button from '../button/button';
-import { I18nContext } from '../i18n/i18n-context';
-import Theme, { ThemeProvider, WithThemeClasses } from '../global/theme';
-import darkStyles from '../global/variables_dark.css';
-import styles from './message.css';
-/**
-  * @name Message
-  */
-const UNIT = 8;
-const TAIL_SIZE = 11;
-const getTailOffsets = (offset) => ({
-    [Directions.BOTTOM_RIGHT]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
-    [Directions.BOTTOM_LEFT]: {
-        top: 0,
-        right: offset - UNIT - TAIL_SIZE,
-        transform: 'rotate(135deg)'
-    },
-    [Directions.BOTTOM_CENTER]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
-    [Directions.TOP_RIGHT]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
-    [Directions.TOP_LEFT]: {
-        bottom: -TAIL_SIZE,
-        right: offset + UNIT - TAIL_SIZE,
-        transform: 'rotate(-45deg)'
-    },
-    [Directions.TOP_CENTER]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
-    [Directions.RIGHT_TOP]: { bottom: offset + UNIT - TAIL_SIZE, left: 0, transform: 'rotate(45deg)' },
-    [Directions.RIGHT_BOTTOM]: { top: offset - UNIT, left: 0, transform: 'rotate(45deg)' },
-    [Directions.RIGHT_CENTER]: { top: offset - UNIT, left: 0, transform: 'rotate(45deg)' },
-    [Directions.LEFT_TOP]: {
-        bottom: offset - UNIT - TAIL_SIZE,
-        right: -TAIL_SIZE,
-        transform: 'rotate(-135deg)'
-    },
-    [Directions.LEFT_BOTTOM]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' },
-    [Directions.LEFT_CENTER]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' }
-});
-/**
- * Displays a popup containing a message.
- */
-export default class Message extends Component {
-    static defaultProps = {
-        icon: gift,
-        directions: [
-            Directions.TOP_RIGHT, Directions.TOP_LEFT, Directions.TOP_CENTER,
-            Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.BOTTOM_CENTER,
-            Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.RIGHT_CENTER,
-            Directions.LEFT_TOP, Directions.LEFT_BOTTOM, Directions.LEFT_CENTER
-        ],
-        theme: Theme.DARK
-    };
-    state = {};
-    static Directions = Directions;
-    static PopupProps = Popup.PopupProps;
-    _onDirectionChange = (direction) => this.setState({ direction });
-    popup;
-    node;
-    popupRef = (el) => {
-        this.popup = el;
-        this.node = this.popup?.node;
-    };
-    getTailOffset() {
-        const DEFAULT_OFFSET = 32;
-        const { popupProps } = this.props;
-        if (this.props.tailOffset != null) {
-            return this.props.tailOffset;
-        }
-        const anchor = popupProps?.anchorElement || this.popup?.parent;
-        if (!anchor) {
-            return DEFAULT_OFFSET;
-        }
-        const offset = Math.floor(anchor.offsetWidth / 2);
-        const isOpenedToRight = this.state.direction != null &&
-            [Directions.TOP_RIGHT, Directions.BOTTOM_RIGHT].includes(this.state.direction);
-        if (popupProps?.left && isOpenedToRight) {
-            return offset - popupProps?.left;
-        }
-        return offset;
-    }
-    render() {
-        const { children, className, tailClassName, title, icon, popupProps, buttonProps, onClose, onDismiss, translations, theme } = this.props;
-        const classes = classNames(styles.message, className, {
-            [darkStyles.dark]: theme === Theme.DARK
-        });
-        const tailClasses = classNames(styles.tail, tailClassName);
-        const popupDirections = this.props.direction
-            ? [this.props.direction]
-            : this.props.directions;
-        const { direction } = this.state;
-        return (<I18nContext.Consumer>
-        {({ translate }) => (<WithThemeClasses theme={theme}>
-            {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
-                <ThemeProvider theme={theme} passToPopups>
-                  {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
-
-                  {icon && <Icon className={styles.icon} glyph={icon}/>}
-                  {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
-                  {children && <div className={styles.description}>{children}</div>}
-                  {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations?.gotIt ?? translate('gotIt')}</Button>)}
-                  {onDismiss && (<Button onClick={onDismiss} text>
-                      {translations?.dismiss ?? translate('dismiss')}
-                    </Button>)}
-                </ThemeProvider>
-              </Popup>)}
-          </WithThemeClasses>)}
-      </I18nContext.Consumer>);
-    }
-}
-Message.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    tailClassName: PropTypes.string,
-    title: PropTypes.string,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    directions: PropTypes.arrayOf(PropTypes.string),
-    direction: PropTypes.string,
-    popupProps: PropTypes.object,
-    buttonProps: PropTypes.object,
-    tailOffset: PropTypes.number,
-    onClose: PropTypes.func,
-    onDismiss: PropTypes.func,
-    translations: PropTypes.object
-};