@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/loader-inline/loader-inline.jsx

@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Theme, { withTheme } from '../global/theme';
+import dataTests from '../global/data-tests';
+import styles from './loader-inline.css';
+import injectStyles from './inject-styles';
+/**
+ * @name Loader Inline
+ */
+class LoaderInline extends PureComponent {
+    static propTypes = {
+        theme: PropTypes.oneOf(Object.values(Theme)),
+        className: PropTypes.string,
+        'data-test': PropTypes.string,
+        children: PropTypes.node
+    };
+    componentDidMount() {
+        injectStyles();
+    }
+    static Theme = Theme;
+    render() {
+        const { className, theme, 'data-test': dataTest, children, ...restProps } = this.props;
+        const classes = classNames(styles.loader, className, `${styles.loader}_${theme}`);
+        const loader = (<div {...restProps} data-test={dataTests('ring-loader-inline', dataTest)} className={classes}/>);
+        return children
+            ? (<>
+          {loader}
+          <span className={styles.children}>{children}</span>
+        </>)
+            : loader;
+    }
+}
+const ThemedLoaderInline = withTheme()(LoaderInline);
+export default ThemedLoaderInline;

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

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

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

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

package/components/loader-screen/loader-screen.d.ts

@@ -0,0 +1,17 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { LoaderProps } from '../loader/loader';
+export interface LoaderScreenProps extends LoaderProps {
+    containerClassName?: string | null | undefined;
+}
+/**
+ * @name Loader Screen
+ */
+export default class LoaderScreen extends PureComponent<LoaderScreenProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        containerClassName: PropTypes.Requireable<string>;
+        message: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/loader-screen/loader-screen.jsx

@@ -0,0 +1,25 @@
+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>);
+    }
+}

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.jsx

@@ -0,0 +1,84 @@
+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

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

package/components/login-dialog/service.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+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);
+}
+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,16 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+interface MarkdownCodeProps {
+    language?: string | null | undefined;
+    value?: string | null | undefined;
+    inline?: boolean | undefined;
+}
+declare const MarkdownCode: {
+    ({ value, language, inline }: MarkdownCodeProps): JSX.Element;
+    propTypes: {
+        language: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        inline: PropTypes.Requireable<boolean>;
+    };
+};
+export default MarkdownCode;

package/components/markdown/code.jsx

@@ -0,0 +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}/>);
+MarkdownCode.propTypes = {
+    language: PropTypes.string,
+    value: PropTypes.string,
+    inline: PropTypes.bool
+};
+export default MarkdownCode;

package/components/markdown/heading.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { Levels } from '../heading/heading';
+export interface MarkdownHeadingProps {
+    level?: Levels | undefined;
+    children?: ReactNode;
+}
+declare const MarkdownHeading: {
+    ({ level, children }: MarkdownHeadingProps): JSX.Element;
+    propTypes: {
+        level: PropTypes.Requireable<number>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default MarkdownHeading;

package/components/markdown/{heading.js → heading.jsx}

@@ -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,
+    children: PropTypes.node
 };
-
 export default MarkdownHeading;

package/components/markdown/link.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface MarkdownLinkProps {
+    href?: string | undefined;
+    title?: string | undefined;
+    children?: ReactNode;
+}
+declare const MarkdownLink: {
+    ({ href, title, children }: MarkdownLinkProps): JSX.Element;
+    propTypes: {
+        href: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default MarkdownLink;

package/components/markdown/link.jsx

@@ -0,0 +1,10 @@
+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.node
+};
+export default MarkdownLink;

package/components/markdown/markdown.d.ts

@@ -0,0 +1,23 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { ReactMarkdownProps } from 'react-markdown';
+export interface BaseMarkdownProps {
+    source: string;
+    inline?: boolean | null | undefined;
+}
+export declare type MarkdownProps = ReactMarkdownProps & BaseMarkdownProps;
+/**
+  * @name Markdown
+*/
+export default class Markdown extends PureComponent<MarkdownProps> {
+    static propTypes: {
+        inline: PropTypes.Requireable<boolean>;
+        source: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        renderers: PropTypes.Requireable<object>;
+        plugins: PropTypes.Requireable<any[]>;
+    };
+    render(): JSX.Element;
+}
+declare const md: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
+export { md };

package/components/markdown/markdown.jsx

@@ -0,0 +1,41 @@
+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 = {
+        inline: PropTypes.bool,
+        source: PropTypes.string,
+        className: PropTypes.string,
+        renderers: 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 };

package/components/message/message.d.ts

@@ -0,0 +1,72 @@
+import { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import Popup, { PopupAttrs } from '../popup/popup';
+import { Directions } from '../popup/popup.consts';
+import { IconType } from '../icon/icon';
+import { ButtonAttrs } from '../button/button';
+export interface MessageTranslations {
+    gotIt: string;
+    dismiss: string;
+}
+export interface MessageProps {
+    icon: string | IconType | null;
+    directions: readonly Directions[];
+    translations: MessageTranslations;
+    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 propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        tailClassName: PropTypes.Requireable<string>;
+        title: PropTypes.Validator<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        directions: PropTypes.Requireable<(string | null | undefined)[]>;
+        direction: PropTypes.Requireable<string>;
+        popupProps: PropTypes.Requireable<object>;
+        buttonProps: PropTypes.Requireable<object>;
+        tailOffset: PropTypes.Requireable<number>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onDismiss: PropTypes.Requireable<(...args: any[]) => any>;
+        translations: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        icon: string;
+        directions: Directions[];
+        translations: {
+            gotIt: string;
+            dismiss: string;
+        };
+    };
+    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 {};

package/components/message/message.jsx

@@ -0,0 +1,106 @@
+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 styles from './message.css';
+/**
+  * @name Message
+  */
+const UNIT = 8;
+const getTailOffsets = (offset) => ({
+    [Directions.BOTTOM_RIGHT]: { top: 0, left: offset - UNIT, transform: 'rotate(180deg)' },
+    [Directions.BOTTOM_LEFT]: { top: 0, right: offset - UNIT, transform: 'rotate(180deg)' },
+    [Directions.BOTTOM_CENTER]: { top: 0, left: offset - UNIT, transform: 'rotate(180deg)' },
+    [Directions.TOP_RIGHT]: { bottom: -UNIT + 1, left: offset - UNIT },
+    [Directions.TOP_LEFT]: { bottom: -UNIT + 1, right: offset - UNIT },
+    [Directions.TOP_CENTER]: { bottom: -UNIT + 1, left: offset - UNIT },
+    [Directions.RIGHT_TOP]: { bottom: offset - UNIT, left: -UNIT, transform: 'rotate(90deg)' },
+    [Directions.RIGHT_BOTTOM]: { top: offset, left: -UNIT, transform: 'rotate(90deg)' },
+    [Directions.RIGHT_CENTER]: { top: offset, left: -UNIT, transform: 'rotate(90deg)' },
+    [Directions.LEFT_TOP]: { bottom: offset - UNIT, right: -UNIT, transform: 'rotate(-90deg)' },
+    [Directions.LEFT_BOTTOM]: { top: offset, right: -UNIT, transform: 'rotate(-90deg)' },
+    [Directions.LEFT_CENTER]: { top: offset, right: -UNIT, transform: 'rotate(-90deg)' }
+});
+/**
+ * Displays a popup containing a message.
+ */
+export default class Message extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        tailClassName: PropTypes.string,
+        title: PropTypes.string.isRequired,
+        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
+    };
+    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
+        ],
+        translations: {
+            gotIt: 'Got it',
+            dismiss: 'Dismiss'
+        }
+    };
+    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 } = this.props;
+        const classes = classNames(styles.message, className);
+        const tailClasses = classNames(styles.tail, tailClassName);
+        const popupDirections = this.props.direction
+            ? [this.props.direction]
+            : this.props.directions;
+        const { direction } = this.state;
+        return (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classes} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
+        {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
+
+        {icon && <Icon className={styles.icon} glyph={icon}/>}
+        <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}</Button>)}
+        {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
+      </Popup>);
+    }
+}

package/components/old-browsers-message/old-browsers-message.d.ts

@@ -0,0 +1,2 @@
+declare function stopOldBrowserDetector(): void;
+export { stopOldBrowserDetector as stop };