@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/dialog/dialog.css

@@ -0,0 +1,137 @@
+@import "../global/variables.css";
+
+@value header from "../island/island.css";
+
+.container {
+  position: fixed;
+  z-index: var(--ring-overlay-z-index);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  overflow: auto;
+  align-items: center;
+  justify-content: center;
+
+  padding: calc(var(--ring-unit) * 4) var(--ring-unit);
+
+  background-color: rgba(var(--ring-dialog-overlay-components), 0.4);
+}
+
+.innerContainer {
+  display: flex;
+  flex-direction: column;
+
+  max-height: 100%;
+}
+
+.content {
+  position: relative;
+
+  width: calc(var(--ring-unit) * 58);
+  min-height: calc(var(--ring-unit) * 15);
+  margin: auto;
+
+  cursor: default;
+  overflow-wrap: break-word;
+
+  & [data-scrollable-container] {
+    padding-bottom: var(--ring-unit);
+  }
+
+  & .panel {
+    margin-top: 0;
+    padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
+
+    border-top: none;
+
+    background-color: transparent;
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .panel > button:not(:last-child) {
+    margin-right: var(--ring-unit);
+  }
+}
+
+.content.content {
+  box-shadow: var(--ring-dialog-shadow);
+}
+
+.clickableOverlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  cursor: pointer;
+}
+
+.clickableOverlay:hover + * .closeIcon {
+  color: var(--ring-icon-hover-color);
+}
+
+.closeButton:hover .closeIcon {
+  color: var(--ring-icon-hover-color);
+}
+
+.clickableOverlay:active + * .closeIcon {
+  color: var(--ring-main-color);
+}
+
+.closeButton:active .closeIcon {
+  color: var(--ring-main-color);
+}
+
+.closeButton.closeButton {
+  position: absolute;
+}
+
+.closeButtonOutside {
+  top: 0;
+  right: calc(var(--ring-unit) * -4);
+}
+
+.closeButtonInside {
+  top: calc(var(--ring-unit) * 1.5);
+  right: var(--ring-unit);
+}
+
+.documentWithoutScroll {
+  overflow: hidden;
+
+  height: 100%;
+}
+
+.popupTarget {
+  position: fixed;
+  z-index: var(--ring-overlay-z-index);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  pointer-events: none;
+
+  & > :not(.popupTarget) {
+    pointer-events: initial;
+  }
+}
+
+.container .header {
+  padding-top: calc(var(--ring-unit) * 4);
+
+  font-size: 24px;
+  line-height: 28px;
+}
+
+.dense .header {
+  padding-top: calc(var(--ring-unit) * 2);
+}
+
+.dense .panel {
+  padding-bottom: calc(var(--ring-unit) * 2);
+}

package/components/dialog/dialog.d.ts

@@ -0,0 +1,64 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import TabTrap, { TabTrapProps } from '../tab-trap/tab-trap';
+import type { ShortcutsScopeOptions } from '../shortcuts/core';
+export interface DialogProps extends Partial<TabTrapProps> {
+    show: boolean;
+    label: string;
+    onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onEscPress: (event: KeyboardEvent) => void;
+    onCloseClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
+    showCloseButton: boolean;
+    shortcutOptions: ShortcutsScopeOptions;
+    closeButtonInside: boolean;
+    closeButtonTitle?: string;
+    trapFocus: boolean;
+    contentClassName?: string | null | undefined;
+    portalTarget?: Element | null | undefined;
+    'data-test'?: string | null | undefined;
+    dense?: boolean | null | undefined;
+}
+export default class Dialog extends PureComponent<DialogProps> {
+    static propTypes: {
+        label: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        contentClassName: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        show: PropTypes.Validator<boolean>;
+        showCloseButton: PropTypes.Requireable<boolean>;
+        closeButtonInside: PropTypes.Requireable<boolean>;
+        closeButtonTitle: PropTypes.Requireable<string>;
+        onOverlayClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onEscPress: PropTypes.Requireable<(...args: any[]) => any>;
+        onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;
+        shortcutOptions: PropTypes.Requireable<object>;
+        onCloseAttempt: PropTypes.Requireable<(...args: any[]) => any>;
+        trapFocus: PropTypes.Requireable<boolean>;
+        portalTarget: PropTypes.Requireable<HTMLElement>;
+        autoFocusFirst: PropTypes.Requireable<boolean>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: Partial<DialogProps>;
+    state: {
+        shortcutsScope: string;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DialogProps): void;
+    componentWillUnmount(): void;
+    scrollPreventer: {
+        prevent: () => void;
+        reset: () => void;
+    };
+    uid: string;
+    toggleScrollPreventer(): void;
+    handleClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onCloseClick: (event: React.MouseEvent<HTMLElement>) => void;
+    getShortcutsMap: () => {
+        esc: (event: KeyboardEvent) => void;
+    };
+    dialog?: HTMLElement | null;
+    dialogRef: (tabTrap: TabTrap | null) => void;
+    render(): false | React.ReactPortal;
+}
+export type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;

package/components/dialog/dialog.js

@@ -0,0 +1,128 @@
+import React, { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close';
+import { AdaptiveIsland } from '../island/island';
+import getUID from '../global/get-uid';
+import dataTests from '../global/data-tests';
+import Shortcuts from '../shortcuts/shortcuts';
+import TabTrap from '../tab-trap/tab-trap';
+import Button from '../button/button';
+import { PopupTarget } from '../popup/popup.target';
+import { preventerFactory as scrollPreventerFactory } from './dialog__body-scroll-preventer';
+import styles from './dialog.css';
+/**
+ * @name Dialog
+ */
+function noop() { }
+export default class Dialog extends PureComponent {
+    static propTypes = {
+        label: PropTypes.string,
+        className: PropTypes.string,
+        contentClassName: PropTypes.string,
+        children: PropTypes.oneOfType([
+            PropTypes.arrayOf(PropTypes.node),
+            PropTypes.node
+        ]),
+        show: PropTypes.bool.isRequired,
+        showCloseButton: PropTypes.bool,
+        closeButtonInside: PropTypes.bool,
+        closeButtonTitle: PropTypes.string,
+        onOverlayClick: PropTypes.func,
+        onEscPress: PropTypes.func,
+        onCloseClick: PropTypes.func,
+        shortcutOptions: PropTypes.object,
+        // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
+        // Use it if you don't need different behaviors for this cases.
+        onCloseAttempt: PropTypes.func,
+        // focusTrap may break popups inside dialog, so use it carefully
+        trapFocus: PropTypes.bool,
+        portalTarget: PropTypes.instanceOf(HTMLElement),
+        autoFocusFirst: PropTypes.bool,
+        'data-test': PropTypes.string
+    };
+    static defaultProps = {
+        label: 'Dialog',
+        onOverlayClick: noop,
+        onEscPress: noop,
+        onCloseClick: noop,
+        onCloseAttempt: noop,
+        showCloseButton: false,
+        closeButtonInside: false,
+        shortcutOptions: { modal: false },
+        trapFocus: false,
+        autoFocusFirst: true
+    };
+    state = {
+        shortcutsScope: getUID('ring-dialog-')
+    };
+    componentDidMount() {
+        this.toggleScrollPreventer();
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.show !== this.props.show) {
+            this.toggleScrollPreventer();
+        }
+    }
+    componentWillUnmount() {
+        this.scrollPreventer.reset();
+    }
+    scrollPreventer = scrollPreventerFactory(getUID('preventer-'));
+    uid = getUID('dialog-');
+    toggleScrollPreventer() {
+        if (this.props.show) {
+            this.scrollPreventer.prevent();
+        }
+        else {
+            this.scrollPreventer.reset();
+        }
+    }
+    handleClick = (event) => {
+        this.props.onOverlayClick(event);
+        this.props.onCloseAttempt(event);
+    };
+    onCloseClick = (event) => {
+        this.props.onCloseClick(event);
+        this.props.onCloseAttempt(event);
+    };
+    getShortcutsMap = () => {
+        const onEscape = (event) => {
+            if (this.props.show) {
+                this.props.onEscPress(event);
+                this.props.onCloseAttempt(event);
+            }
+        };
+        return {
+            esc: onEscape
+        };
+    };
+    dialog;
+    dialogRef = (tabTrap) => {
+        this.dialog = tabTrap && tabTrap.node;
+    };
+    render() {
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, ...restProps } = this.props;
+        const classes = classNames(styles.container, className);
+        const shortcutsMap = this.getShortcutsMap();
+        return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
+        {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
+              <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope} options={this.props.shortcutOptions}/>
+              {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
+                // click handler is duplicated in close button
+                role="presentation" className={styles.clickableOverlay} onClick={this.handleClick}/>)}
+              <div className={styles.innerContainer}>
+                <AdaptiveIsland className={classNames(styles.content, contentClassName, { [styles.dense]: dense })} data-test="ring-dialog" role="dialog" aria-label={label}>
+                  {children}
+                  {showCloseButton &&
+                    (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
+                            [styles.closeButtonOutside]: !closeButtonInside,
+                            [styles.closeButtonInside]: closeButtonInside
+                        })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+                </AdaptiveIsland>
+              </div>
+              {target}
+            </TabTrap>)}
+      </PopupTarget>, portalTarget instanceof HTMLElement ? portalTarget : document.body);
+    }
+}

package/components/dialog/dialog__body-scroll-preventer.d.ts

@@ -0,0 +1,9 @@
+export declare const preventerFactory: (key: string | number) => {
+    prevent: () => void;
+    reset: () => void;
+};
+declare const _default: {
+    prevent: () => void;
+    reset: () => void;
+};
+export default _default;

package/components/dialog/dialog__body-scroll-preventer.js

@@ -0,0 +1,43 @@
+import scrollbarWidth from 'scrollbar-width';
+import styles from './dialog.css';
+const isPrevented = new Set();
+let previousDocumentWidth = null;
+const prevent = (key) => {
+    if (isPrevented.has(key)) {
+        return;
+    }
+    isPrevented.add(key);
+    if (isPrevented.size > 1) {
+        return;
+    }
+    const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight ||
+        getComputedStyle(document.documentElement).overflowY === 'scroll';
+    document.documentElement.classList.add(styles.documentWithoutScroll);
+    const scrollWidth = scrollbarWidth();
+    if (documentHasScroll && scrollWidth != null && scrollWidth > 0) {
+        previousDocumentWidth = document.documentElement.style.width;
+        document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
+    }
+};
+const reset = (key) => {
+    if (isPrevented.size === 0) {
+        return;
+    }
+    isPrevented.delete(key);
+    if (isPrevented.size > 0) {
+        return;
+    }
+    document.documentElement.classList.remove(styles.documentWithoutScroll);
+    if (previousDocumentWidth !== null) {
+        document.documentElement.style.width = previousDocumentWidth;
+        previousDocumentWidth = null;
+    }
+};
+export const preventerFactory = (key) => {
+    const preventerKey = key || Math.random();
+    return {
+        prevent: () => prevent(preventerKey),
+        reset: () => reset(preventerKey)
+    };
+};
+export default preventerFactory('default-preventer');

package/components/dropdown/anchor.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonAttrs } from '../button/button';
+declare const _default: React.MemoExoticComponent<{
+    ({ children, className, ...restProps }: ButtonAttrs): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+}>;
+export default _default;

package/components/dropdown/anchor.js

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import chevronDown from '@jetbrains/icons/chevron-10px';
+import classNames from 'classnames';
+import Icon from '../icon/icon';
+import Button from '../button/button';
+import styles from './dropdown.css';
+const Anchor = ({ children, className, ...restProps }) => (<Button data-test-ring-dropdown-anchor text className={classNames(styles.anchor, className)} {...restProps}>
+    {children}
+    <Icon glyph={chevronDown} className={styles.chevron}/>
+  </Button>);
+Anchor.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+export default memo(Anchor);

package/components/dropdown/dropdown.css

@@ -0,0 +1,18 @@
+@import "../global/variables.css";
+
+.dropdown {
+  display: inline-block;
+}
+
+.anchor.anchor {
+  margin: 0 -3px;
+  padding: 0 3px;
+
+  font: inherit;
+}
+
+.chevron {
+  margin-left: 2px;
+
+  line-height: normal;
+}

package/components/dropdown/dropdown.d.ts

@@ -0,0 +1,87 @@
+import React, { Component, HTMLAttributes, ReactNode, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { PopupAttrs } from '../popup/popup';
+import Anchor from './anchor';
+export interface AnchorProps {
+    active: boolean;
+    pinned: boolean;
+}
+export interface DropdownChildProps {
+    hidden: boolean;
+    onCloseAttempt: () => void;
+    onMouseDown?: () => void | undefined;
+    onContextMenu?: () => void | undefined;
+    dontCloseOnAnchorClick: boolean;
+}
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    anchor: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode);
+    children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode);
+    initShown: boolean;
+    disabled?: boolean | null | undefined;
+    clickMode: boolean;
+    hoverMode: boolean;
+    hoverShowTimeOut: number;
+    hoverHideTimeOut: number;
+    onShow: (() => void);
+    onHide: (() => void);
+    activeClassName?: string | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+interface DropdownState {
+    show: boolean;
+    pinned: boolean;
+}
+/**
+ * @name Dropdown
+ */
+export default class Dropdown extends Component<DropdownProps, DropdownState> {
+    static propTypes: {
+        /**
+         * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
+         * React element should render some interactive HTML element like `button` or `a`
+         */
+        anchor: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>>;
+        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactElementLike | ((...args: any[]) => any) | null | undefined>>>;
+        initShown: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        activeClassName: PropTypes.Requireable<string>;
+        clickMode: PropTypes.Requireable<boolean>;
+        hoverMode: PropTypes.Requireable<boolean>;
+        hoverShowTimeOut: PropTypes.Requireable<number>;
+        hoverHideTimeOut: PropTypes.Requireable<number>;
+        disabled: PropTypes.Requireable<boolean>;
+        onShow: PropTypes.Requireable<(...args: any[]) => any>;
+        onHide: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        initShown: boolean;
+        clickMode: boolean;
+        hoverMode: boolean;
+        hoverShowTimeOut: number;
+        hoverHideTimeOut: number;
+        disabled: boolean;
+        onShow: () => void;
+        onHide: () => void;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+    state: {
+        show: boolean;
+        pinned: boolean;
+    };
+    onClick: () => void;
+    onChildCloseAttempt: () => void;
+    hoverTimer?: number | null;
+    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void;
+    handlePopupInteraction: () => void;
+    toggle(show?: boolean): void;
+    _toggle(show: boolean, pinned?: boolean): void;
+    _clearTimer(): void;
+    render(): React.JSX.Element;
+}
+export type DropdownAttrs = JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
+export { Anchor };

package/components/dropdown/dropdown.js

@@ -0,0 +1,159 @@
+import React, { cloneElement, Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import { isArray } from '../global/typescript-utils';
+import Anchor from './anchor';
+import styles from './dropdown.css';
+/**
+ * @name Dropdown
+ */
+export default class Dropdown extends Component {
+    static propTypes = {
+        /**
+         * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
+         * React element should render some interactive HTML element like `button` or `a`
+         */
+        anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+        children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+        initShown: PropTypes.bool,
+        className: PropTypes.string,
+        activeClassName: PropTypes.string,
+        clickMode: PropTypes.bool,
+        hoverMode: PropTypes.bool,
+        hoverShowTimeOut: PropTypes.number,
+        hoverHideTimeOut: PropTypes.number,
+        disabled: PropTypes.bool,
+        onShow: PropTypes.func,
+        onHide: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        'data-test': PropTypes.string
+    };
+    static defaultProps = {
+        initShown: false,
+        clickMode: true,
+        hoverMode: false,
+        hoverShowTimeOut: 300,
+        hoverHideTimeOut: 600,
+        disabled: false,
+        onShow: () => { },
+        onHide: () => { },
+        onMouseEnter: () => { },
+        onMouseLeave: () => { }
+    };
+    state = {
+        show: this.props.initShown,
+        pinned: false
+    };
+    onClick = () => {
+        if (this.props.disabled) {
+            return;
+        }
+        const { show, pinned } = this.state;
+        let nextPinned = pinned;
+        if (this.props.hoverMode) {
+            if (!pinned) {
+                nextPinned = true;
+                if (show) {
+                    this.setState({ pinned: true });
+                    return;
+                }
+            }
+            else {
+                nextPinned = false;
+            }
+        }
+        this._toggle(!show, nextPinned);
+    };
+    onChildCloseAttempt = () => {
+        let nextPinned = this.state.pinned;
+        if (this.props.hoverMode) {
+            nextPinned = false;
+        }
+        this._toggle(false, nextPinned);
+    };
+    hoverTimer;
+    onMouseEnter = (event) => {
+        if (this.props.disabled) {
+            return;
+        }
+        this._clearTimer();
+        this.props.onMouseEnter?.(event);
+        this.hoverTimer = window.setTimeout(() => {
+            if (!this.state.show) {
+                this._toggle(true);
+            }
+        }, this.props.hoverShowTimeOut);
+    };
+    onMouseLeave = (event) => {
+        if (this.props.disabled) {
+            return;
+        }
+        this.props.onMouseLeave?.(event);
+        if (this.state.pinned) {
+            return;
+        }
+        this._clearTimer();
+        this.hoverTimer = window.setTimeout(() => {
+            if (this.state.show) {
+                this._toggle(false);
+            }
+        }, this.props.hoverHideTimeOut);
+    };
+    handlePopupInteraction = () => {
+        this.setState(({ pinned }) => (pinned ? null : { pinned: true }));
+    };
+    toggle(show = !this.state.show) {
+        this._toggle(show);
+    }
+    _toggle(show, pinned = this.state.pinned) {
+        this.setState({ show, pinned }, () => (show ? this.props.onShow() : this.props.onHide()));
+    }
+    _clearTimer() {
+        if (this.hoverTimer) {
+            clearTimeout(this.hoverTimer);
+            this.hoverTimer = null;
+        }
+    }
+    render() {
+        const { show, pinned } = this.state;
+        const { initShown, onShow, onHide, hoverShowTimeOut, hoverHideTimeOut, children, anchor, className, activeClassName, hoverMode, clickMode, 'data-test': dataTest, disabled, ...restProps } = this.props;
+        const classes = classNames(styles.dropdown, className, {
+            [activeClassName ?? '']: activeClassName != null && show
+        });
+        let anchorElement;
+        const active = hoverMode ? pinned : show;
+        switch (typeof anchor) {
+            case 'string':
+                anchorElement = (<Anchor active={active}>{anchor}</Anchor>);
+                break;
+            case 'function':
+                anchorElement = anchor({ active: show, pinned });
+                break;
+            default:
+                if (isArray(anchor) || typeof anchor.type === 'string') {
+                    anchorElement = anchor;
+                }
+                else {
+                    anchorElement = cloneElement(anchor, { active });
+                }
+        }
+        const childProps = {
+            hidden: !show,
+            onCloseAttempt: this.onChildCloseAttempt,
+            onMouseDown: hoverMode ? this.handlePopupInteraction : undefined,
+            onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
+            dontCloseOnAnchorClick: true
+        };
+        return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onClick={clickMode ? this.onClick : undefined} 
+        // anchorElement should be a `button` or an `a`
+        role="presentation" onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
+        {anchorElement}
+        {typeof children === 'function'
+                ? children(childProps)
+                : cloneElement(children, childProps)}
+      </div>);
+    }
+}
+export { Anchor };