@jetbrains/ring-ui 5.0.0-beta.9 → 5.0.3

package/components/input/input.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
+import closeIcon from '@jetbrains/icons/close-12px';
 import { refObject } from '../global/prop-types';
 import Button from '../button/button';
 import getUID from '../global/get-uid';

package/components/island/adaptive-island-hoc.d.ts

@@ -9,12 +9,10 @@ export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P>;
         refs: {
             [key: string]: React.ReactInstance;
         };
@@ -37,12 +35,10 @@ export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P>;
         refs: {
             [key: string]: React.ReactInstance;
         };

package/components/island/content.d.ts

@@ -1,4 +1,6 @@
-import { HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import createResizeDetector from 'element-resize-detector';
 export interface IslandContentProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
     fade?: boolean | null | undefined;
     onScrollToBottom?: (() => void) | null | undefined;
@@ -8,5 +10,34 @@ export interface IslandContentInnerProps extends IslandContentProps {
     onScroll: (node: HTMLElement) => void;
     bottomBorder: boolean;
 }
-declare const ContentWrapper: (props: IslandContentProps) => JSX.Element;
+declare class Content extends Component<IslandContentInnerProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        scrollableWrapperClassName: PropTypes.Requireable<string>;
+        fade: PropTypes.Requireable<boolean>;
+        bottomBorder: PropTypes.Requireable<boolean>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollToBottom: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        fade: boolean;
+        bottomBorder: boolean;
+        onScroll: () => void;
+        onScrollToBottom: () => void;
+    };
+    state: {
+        scrolledToTop: boolean;
+        scrolledToBottom: boolean;
+    };
+    componentWillUnmount(): void;
+    resizeDetector: createResizeDetector.Erd;
+    wrapperNode?: HTMLElement | null;
+    setWrapper: (node: HTMLElement | null) => void;
+    calculateScrollPosition: () => void;
+    scrollableNode?: HTMLElement | null;
+    setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
+    render(): JSX.Element;
+}
+declare const ContentWrapper: React.ForwardRefExoticComponent<IslandContentProps & React.RefAttributes<Content>>;
 export default ContentWrapper;

package/components/island/content.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { forwardRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
@@ -90,10 +90,11 @@ class Content extends Component {
       </div>);
     }
 }
-const ContentWrapper = (props) => (<ScrollHandlerContext.Consumer>
+const ContentWrapper = forwardRef((props, ref) => (<ScrollHandlerContext.Consumer>
     {onScroll => {
         const addProps = onScroll != null ? { onScroll, bottomBorder: true } : {};
-        return <Content {...props} {...addProps}/>;
+        return <Content {...props} {...addProps} ref={ref}/>;
     }}
-  </ScrollHandlerContext.Consumer>);
+  </ScrollHandlerContext.Consumer>));
+ContentWrapper.displayName = 'ContentWrapper';
 export default ContentWrapper;

package/components/island/island.d.ts

@@ -25,12 +25,10 @@ export declare const AdaptiveIsland: {
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<IslandProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<IslandProps>;
         refs: {
             [key: string]: React.ReactInstance;
         };
@@ -53,12 +51,10 @@ export declare const AdaptiveIsland: {
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<IslandProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<IslandProps>;
         refs: {
             [key: string]: React.ReactInstance;
         };

package/components/link/clickableLink.d.ts

@@ -13,7 +13,7 @@ export default class ClickableLink extends PureComponent<ClickableLinkProps> {
         onConditionalClick: PropTypes.Requireable<(...args: any[]) => any>;
         activeClassName: PropTypes.Requireable<string>;
         href: PropTypes.Validator<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     };
     onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
     render(): JSX.Element;

package/components/link/link.d.ts

@@ -20,14 +20,12 @@ export interface LinkBaseProps {
 export declare type LinkProps<P extends ClickableLinkProps = ClickableLinkProps> = Omit<P, keyof LinkBaseProps> & LinkBaseProps;
 export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent: ComponentType<P> | string): {
     new (props: LinkProps<P> | Readonly<LinkProps<P>>): {
-        getChildren(): React.ReactNode;
+        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<LinkProps<P>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<LinkProps<P>>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -46,14 +44,12 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<P>, context: any): {
-        getChildren(): React.ReactNode;
+        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<LinkProps<P>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<LinkProps<P>>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -78,7 +74,7 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -88,14 +84,12 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
 };
 declare const _default: {
     new (props: LinkProps<ClickableLinkProps> | Readonly<LinkProps<ClickableLinkProps>>): {
-        getChildren(): React.ReactNode;
+        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<LinkProps<ClickableLinkProps>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<LinkProps<ClickableLinkProps>>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -114,14 +108,12 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<ClickableLinkProps>, context: any): {
-        getChildren(): React.ReactNode;
+        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<LinkProps<ClickableLinkProps>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<LinkProps<ClickableLinkProps>>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -146,7 +138,7 @@ declare const _default: {
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;

package/components/link/link.js

@@ -1,5 +1,5 @@
 import 'focus-visible';
-import React, { Component, memo } from 'react';
+import React, { PureComponent, memo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import memoize from '../global/memoize';
@@ -26,7 +26,7 @@ const makeWrapText = memoize((innerClassName) => {
 });
 export function linkHOC(ComposedComponent) {
     const isCustom = typeof ComposedComponent !== 'string' && ComposedComponent !== ClickableLink;
-    return class Link extends Component {
+    return class Link extends PureComponent {
         static propTypes = {
             className: PropTypes.string,
             innerClassName: PropTypes.string,

package/components/list/consts.d.ts

@@ -1,6 +1,7 @@
 import React, { ComponentType, ReactNode, SyntheticEvent } from 'react';
 import { LinkProps } from '../link/link';
 import { IconType, Size } from '../icon/icon';
+import { ClickableLinkProps } from '../link/clickableLink';
 /**
  * @enum {number}
  */
@@ -52,8 +53,9 @@ export declare type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onC
     tagName?: keyof JSX.IntrinsicElements | null | undefined;
     selectedLabel?: string | null | undefined;
     originalModel?: never;
-    LinkComponent?: ComponentType<LinkProps> | string | null | undefined;
+    LinkComponent?: ComponentType<ClickableLinkProps> | string | null | undefined;
     template?: ReactNode | ((props: ListDataItemProps<T>) => ReactNode);
+    custom?: boolean | null | undefined;
     onClick?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
     onMouseUp?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
 };

package/components/list/list.css

@@ -30,6 +30,7 @@
   padding: 0 calc(unit * 2) 1px;
 
   text-align: right;
+  white-space: nowrap;
 
   color: var(--ring-secondary-color);
   border-top: 1px solid var(--ring-line-color);

package/components/list/list.d.ts

@@ -136,6 +136,8 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     shouldComponentUpdate(nextProps: ListProps<T>, nextState: ListState<T>): boolean;
     componentDidUpdate(prevProps: ListProps<T>): void;
     componentWillUnmount(): void;
+    scheduleScrollListener: (cb: () => void) => void;
+    scheduleHoverListener: (cb: () => void) => void;
     static isItemType: typeof isItemType;
     static ListHint: typeof ListHint;
     static ListProps: {

package/components/list/list.js

@@ -25,8 +25,6 @@ import ListSeparator from './list__separator';
 import ListHint from './list__hint';
 import { DEFAULT_ITEM_TYPE, Dimension, Type } from './consts';
 import styles from './list.css';
-const scheduleScrollListener = scheduleRAF();
-const scheduleHoverListener = scheduleRAF();
 function noop() { }
 const warnEmptyKey = deprecate(() => { }, 'No key passed for list item with non-string label. It is considered as a bad practice and has been deprecated, please provide a key.');
 /**
@@ -141,23 +139,22 @@ export default class List extends Component {
                 });
             }
         }
-        if (activeIndex == null &&
-            prevState.activeIndex == null &&
-            shouldActivateFirstItem(nextProps)) {
+        return nextState;
+    }
+    componentDidMount() {
+        document.addEventListener('mousemove', this.onDocumentMouseMove);
+        document.addEventListener('keydown', this.onDocumentKeyDown, true);
+        const { data, activeIndex } = this.props;
+        if (activeIndex == null && shouldActivateFirstItem(this.props)) {
             const firstActivatableIndex = data.findIndex(isActivatable);
             if (firstActivatableIndex >= 0) {
-                Object.assign(nextState, {
+                this.setState({
                     activeIndex: firstActivatableIndex,
                     activeItem: data[firstActivatableIndex],
                     needScrollToActive: true
                 });
             }
         }
-        return nextState;
-    }
-    componentDidMount() {
-        document.addEventListener('mousemove', this.onDocumentMouseMove);
-        document.addEventListener('keydown', this.onDocumentKeyDown, true);
     }
     shouldComponentUpdate(nextProps, nextState) {
         return nextProps !== this.props ||
@@ -175,6 +172,8 @@ export default class List extends Component {
         document.removeEventListener('mousemove', this.onDocumentMouseMove);
         document.removeEventListener('keydown', this.onDocumentKeyDown, true);
     }
+    scheduleScrollListener = scheduleRAF();
+    scheduleHoverListener = scheduleRAF();
     static isItemType = isItemType;
     static ListHint = ListHint;
     static ListProps = {
@@ -184,7 +183,7 @@ export default class List extends Component {
     virtualizedList;
     unmounted;
     container;
-    hoverHandler = memoize((index) => () => scheduleHoverListener(() => {
+    hoverHandler = memoize((index) => () => this.scheduleHoverListener(() => {
         if (this.state.disabledHover) {
             return;
         }
@@ -367,7 +366,7 @@ export default class List extends Component {
     defaultItemHeight() {
         return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
     }
-    scrollEndHandler = () => scheduleScrollListener(() => {
+    scrollEndHandler = () => this.scheduleScrollListener(() => {
         const innerContainer = this.inner;
         if (innerContainer) {
             const maxScrollingPosition = innerContainer.scrollHeight;

package/components/list/list__link.js

@@ -10,7 +10,7 @@ import styles from './list.css';
  */
 export default class ListLink extends PureComponent {
     render() {
-        const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, ...restProps } = this.props;
+        const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, children, ...restProps } = this.props;
         const classes = classNames(styles.item, className, {
             [styles.actionLink]: !disabled,
             [styles.compact]: compact,
@@ -18,7 +18,7 @@ export default class ListLink extends PureComponent {
         });
         const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
         return (<Comp pseudo={!this.props.href} {...restProps} hover={hover && !disabled} className={classes} data-test={dataTests('ring-list-link', dataTest)}>
-        {label}
+        {label ?? children}
       </Comp>);
     }
 }

package/components/login-dialog/service.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { render, unmountComponentAtNode } from '../global/react-render-adapter';
 import LoginDialog from './login-dialog';
 const containerElement = document.createElement('div');
 /**

package/components/message/message.css

@@ -18,26 +18,7 @@
 
   color: var(--ring-active-text-color);
 
-  border: none;
-
-  background-color: var(--ring-message-background-color);
-
-  box-shadow: none;
-
-  &::before {
-    position: absolute;
-    z-index: var(--ring-invisible-element-z-index);
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    content: "";
-
-    border-radius: var(--ring-border-radius);
-
-    box-shadow: var(--ring-popup-shadow);
-  }
+  background-color: var(--ring-popup-background-color);
 }
 
 .icon {
@@ -55,11 +36,12 @@
 }
 
 .description {
-  composes: font-smaller-lower from "../global/global.css";
-
   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 {
@@ -69,10 +51,14 @@
 .tail {
   position: absolute;
 
-  transform-origin: 50% 0;
+  box-sizing: border-box;
+  width: 11px;
+  height: 11px;
+
+  transform-origin: 0 0;
 
-  border-width: unit unit 0;
-  border-style: solid;
+  border: 1px solid;
+  border-color: transparent transparent var(--ring-popup-border-color) var(--ring-popup-border-color);
 
-  border-color: var(--ring-message-background-color) transparent transparent; /* stylelint-disable-line color-no-hex */
+  background-color: var(--ring-popup-background-color);
 }

package/components/message/message.js

@@ -13,19 +13,32 @@ 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(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)' }
+    [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.
@@ -88,7 +101,7 @@ export default class Message extends Component {
           {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>
+          {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}</Button>)}
           {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
@@ -100,7 +113,7 @@ Message.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     tailClassName: PropTypes.string,
-    title: PropTypes.string.isRequired,
+    title: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
     directions: PropTypes.arrayOf(PropTypes.string),
     direction: PropTypes.string,

package/components/popup/popup.d.ts

@@ -18,6 +18,7 @@ export interface BasePopupProps {
     keepMounted: boolean;
     directions: readonly Directions[];
     autoPositioning: boolean;
+    autoPositioningOnScroll: boolean;
     autoCorrectTopOverflow: boolean;
     left: number;
     top: number;
@@ -27,6 +28,8 @@ export interface BasePopupProps {
     autoFocusFirst: boolean;
     offset: number;
     legacy: boolean;
+    withTail?: boolean;
+    tailOffset?: number;
     anchorElement?: HTMLElement | null | undefined;
     target?: string | Element | null | undefined;
     className?: string | null | undefined;
@@ -42,6 +45,7 @@ export interface BasePopupProps {
     onContextMenu?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
     onDirectionChange?: ((direction: Directions) => void) | null | undefined;
     onShow?: (() => void) | null | undefined;
+    children?: ReactNode;
 }
 export interface PopupProps extends BasePopupProps {
     children: ReactNode;
@@ -67,6 +71,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
         keepMounted: boolean;
         directions: Directions[];
         autoPositioning: boolean;
+        autoPositioningOnScroll: boolean;
         autoCorrectTopOverflow: boolean;
         left: number;
         top: number;
@@ -131,7 +136,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
      * @private
      */
     private _onDocumentClick;
-    getInternalContent(): React.ReactNode;
+    getInternalContent(): JSX.Element | P["children"] | undefined;
     shortcutsScope: string;
     shortcutsMap: {
         esc: (evt: KeyboardEvent) => void;
@@ -139,3 +144,4 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     render(): JSX.Element;
 }
 export declare type PopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, PopupProps>;
+export declare type BasePopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, BasePopupProps>;

package/components/popup/popup.js

@@ -34,6 +34,7 @@ export default class Popup extends PureComponent {
         keepMounted: false,
         directions: DEFAULT_DIRECTIONS,
         autoPositioning: true,
+        autoPositioningOnScroll: true,
         autoCorrectTopOverflow: true,
         left: 0,
         top: 0,
@@ -49,7 +50,6 @@ export default class Popup extends PureComponent {
     };
     componentDidMount() {
         if (!this.props.client) {
-            // eslint-disable-next-line react/no-did-mount-set-state
             this.setState({ client: true });
         }
         if (!this.props.hidden) {
@@ -73,7 +73,6 @@ export default class Popup extends PureComponent {
     }
     componentWillUnmount() {
         this._setListenersEnabled(false);
-        this.popup = null;
     }
     popup;
     node;
@@ -183,7 +182,9 @@ export default class Popup extends PureComponent {
             setTimeout(() => {
                 this._listenersEnabled = true;
                 this.listeners.add(window, 'resize', this._redraw);
-                this.listeners.add(window, 'scroll', this._redraw);
+                if (this.props.autoPositioningOnScroll) {
+                    this.listeners.add(window, 'scroll', this._redraw);
+                }
                 this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
                 let el = this._getAnchor();
                 while (el) {

package/components/popup/popup.target.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
-export declare const PopupTargetContext: React.Context<string | undefined>;
+export declare const PopupTargetContext: React.Context<string | Element | undefined>;
 export interface PopupTargetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     id: string;
     children: ReactNode | ((target: ReactNode) => ReactNode);

package/components/popup/position.d.ts

@@ -9,7 +9,7 @@ export interface PositionStyles extends Position {
     minWidth?: number;
 }
 export interface PositionAttrs {
-    popup: Element | null | undefined;
+    popup: HTMLElement | null | undefined;
     anchor: Element | null | undefined;
     container: Element | null;
     directions: readonly Directions[];

package/components/popup/position.js

@@ -14,8 +14,8 @@ function getScrollingCoordinates(container) {
     };
 }
 function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
-    const popupWidth = popup.clientWidth;
-    const popupHeight = popup.clientHeight;
+    const popupWidth = popup.offsetWidth;
+    const popupHeight = popup.offsetHeight;
     const anchorBottom = anchorTop + anchorRect.height;
     const anchorRight = anchorLeft + anchorRect.width;
     const popupLeft = anchorLeft - popupWidth;

package/components/popup-menu/popup-menu.d.ts

@@ -26,6 +26,7 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
         keepMounted: boolean;
         directions: import("../popup/popup.consts").Directions[];
         autoPositioning: boolean;
+        autoPositioningOnScroll: boolean;
         autoCorrectTopOverflow: boolean;
         left: number;
         top: number;