@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/popup/popup.d.ts

@@ -0,0 +1,141 @@
+/**
+ * @name Popup
+ */
+import React, { PureComponent, ReactNode, CSSProperties, SyntheticEvent } from 'react';
+import { Listeners } from '../global/dom';
+import { PositionStyles } from './position';
+import { Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';
+import { PopupTargetContext, PopupTarget } from './popup.target';
+export { PopupTargetContext, PopupTarget };
+export declare const getPopupContainer: (target: string | Element) => Element | null;
+export interface BasePopupProps {
+    hidden: boolean;
+    onOutsideClick: (e: PointerEvent) => void;
+    onEscPress: (e: KeyboardEvent) => void;
+    onCloseAttempt: (e?: Event | SyntheticEvent, isEsc?: boolean | undefined) => void;
+    dontCloseOnAnchorClick: boolean;
+    shortcuts: boolean;
+    keepMounted: boolean;
+    directions: readonly Directions[];
+    autoPositioning: boolean;
+    autoCorrectTopOverflow: boolean;
+    left: number;
+    top: number;
+    sidePadding: number;
+    attached: boolean;
+    trapFocus: boolean;
+    autoFocusFirst: boolean;
+    offset: number;
+    legacy: boolean;
+    anchorElement?: HTMLElement | null | undefined;
+    target?: string | Element | null | undefined;
+    className?: string | null | undefined;
+    style?: CSSProperties | undefined;
+    'data-test'?: string | null | undefined;
+    client?: boolean | null | undefined;
+    maxHeight?: number | 'screen' | null | undefined;
+    minWidth?: number | 'target' | null | undefined;
+    onMouseDown?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
+    onMouseUp?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
+    onMouseOver?: ((e: React.SyntheticEvent<HTMLElement>) => void) | undefined;
+    onMouseOut?: ((e: React.SyntheticEvent<HTMLElement>) => void) | undefined;
+    onContextMenu?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
+    onDirectionChange?: ((direction: Directions) => void) | null | undefined;
+    onShow?: (() => void) | null | undefined;
+}
+export interface PopupProps extends BasePopupProps {
+    children: ReactNode;
+}
+interface PopupState {
+    display: Display;
+    client?: boolean;
+    direction?: Directions;
+}
+/**
+ * @constructor
+ * @name Popup
+ * @extends {ReactComponent}
+ */
+export default class Popup<P extends BasePopupProps = PopupProps> extends PureComponent<P, PopupState> {
+    static defaultProps: {
+        shortcuts: boolean;
+        hidden: boolean;
+        onOutsideClick(): void;
+        onEscPress(): void;
+        onCloseAttempt(): void;
+        dontCloseOnAnchorClick: boolean;
+        keepMounted: boolean;
+        directions: Directions[];
+        autoPositioning: boolean;
+        autoCorrectTopOverflow: boolean;
+        left: number;
+        top: number;
+        offset: number;
+        sidePadding: number;
+        attached: boolean;
+        trapFocus: boolean;
+        autoFocusFirst: boolean;
+        legacy: boolean;
+    };
+    state: PopupState;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: BasePopupProps, prevState: PopupState): void;
+    componentWillUnmount(): void;
+    popup?: HTMLElement | null;
+    node?: HTMLElement | null;
+    parent?: HTMLElement | null;
+    container?: HTMLElement | null;
+    ringPopupTarget?: string | Element;
+    shouldUseShortcuts(): boolean;
+    listeners: Listeners;
+    redrawScheduler: (cb: () => void) => void;
+    uid: string;
+    calculateDisplay: (prevState: PopupState) => {
+        display: Display;
+        client?: boolean | undefined;
+        direction?: Directions | undefined;
+    };
+    static PopupProps: {
+        Directions: typeof Directions;
+        Dimension: typeof Dimension;
+        MinWidth: typeof MinWidth;
+        MaxHeight: typeof MaxHeight;
+    };
+    portalRef: (el: HTMLElement | null) => void;
+    popupRef: (el: HTMLElement | null) => void;
+    containerRef: (el: HTMLElement | null) => void;
+    getContainer(): "" | Element | null | undefined;
+    position(): {
+        styles: PositionStyles;
+        direction: Directions | null;
+    };
+    private _updateDirection;
+    private _updatePosition;
+    private _redraw;
+    private _getAnchor;
+    private _listenersEnabled?;
+    /**
+     * @param {boolean} enable
+     * @private
+     */
+    private _setListenersEnabled;
+    /**
+     * Returns visibility state
+     * @return {boolean}
+     */
+    isVisible(): boolean;
+    _onCloseAttempt(evt?: Event | SyntheticEvent, isEsc?: boolean): void;
+    private _onEscPress;
+    /**
+     * @param {jQuery.Event} evt
+     * @private
+     */
+    private _onDocumentClick;
+    getInternalContent(): React.ReactNode;
+    shortcutsScope: string;
+    shortcutsMap: {
+        esc: (evt: KeyboardEvent) => void;
+    };
+    render(): JSX.Element;
+}
+export declare type PopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, PopupProps>;

package/components/popup/popup.jsx

@@ -0,0 +1,311 @@
+/**
+ * @name Popup
+ */
+import React, { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import getUID from '../global/get-uid';
+import scheduleRAF from '../global/schedule-raf';
+import { Listeners, getStyles } from '../global/dom';
+import Shortcuts from '../shortcuts/shortcuts';
+import dataTests from '../global/data-tests';
+import TabTrap from '../tab-trap/tab-trap';
+import position from './position';
+import styles from './popup.css';
+import { DEFAULT_DIRECTIONS, Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';
+import { PopupTargetContext, PopupTarget } from './popup.target';
+export { PopupTargetContext, PopupTarget };
+const stop = (e) => e.stopPropagation();
+export const getPopupContainer = (target) => (typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target);
+/**
+ * @constructor
+ * @name Popup
+ * @extends {ReactComponent}
+ */
+export default class Popup extends PureComponent {
+    static defaultProps = {
+        shortcuts: true,
+        hidden: false,
+        onOutsideClick() { },
+        onEscPress() { },
+        onCloseAttempt() { },
+        dontCloseOnAnchorClick: false,
+        keepMounted: false,
+        directions: DEFAULT_DIRECTIONS,
+        autoPositioning: true,
+        autoCorrectTopOverflow: true,
+        left: 0,
+        top: 0,
+        offset: 0,
+        sidePadding: 8,
+        attached: false,
+        trapFocus: false,
+        autoFocusFirst: false,
+        legacy: false
+    };
+    state = {
+        display: Display.SHOWING
+    };
+    componentDidMount() {
+        if (!this.props.client) {
+            // eslint-disable-next-line react/no-did-mount-set-state
+            this.setState({ client: true });
+        }
+        if (!this.props.hidden) {
+            this._setListenersEnabled(true);
+        }
+    }
+    componentDidUpdate(prevProps, prevState) {
+        const { hidden } = this.props;
+        if (this.props !== prevProps) {
+            if (prevProps.hidden !== hidden) {
+                this._setListenersEnabled(!hidden);
+            }
+            this._redraw();
+        }
+        if (this.props.onShow &&
+            !hidden &&
+            this.state.display === Display.SHOWN &&
+            (prevProps.hidden || prevState.display !== Display.SHOWN)) {
+            this.props.onShow();
+        }
+    }
+    componentWillUnmount() {
+        this._setListenersEnabled(false);
+        this.popup = null;
+    }
+    popup;
+    node;
+    parent;
+    container;
+    ringPopupTarget;
+    shouldUseShortcuts() {
+        const { shortcuts, hidden } = this.props;
+        return shortcuts && !hidden;
+    }
+    listeners = new Listeners();
+    redrawScheduler = scheduleRAF(true);
+    uid = getUID('popup-');
+    calculateDisplay = (prevState) => ({
+        ...prevState,
+        display: this.props.hidden
+            ? Display.SHOWING
+            : Display.SHOWN
+    });
+    static PopupProps = {
+        Directions,
+        Dimension,
+        MinWidth,
+        MaxHeight
+    };
+    portalRef = (el) => {
+        this.node = el;
+        this.parent = el && el.parentElement;
+        if (el && this.getContainer()) {
+            this._redraw();
+        }
+    };
+    popupRef = (el) => {
+        this.popup = el;
+        this._redraw();
+    };
+    containerRef = (el) => {
+        this.container = el;
+    };
+    getContainer() {
+        const target = this.props.target || this.ringPopupTarget;
+        return target && getPopupContainer(target);
+    }
+    position() {
+        const { directions, autoPositioning, autoCorrectTopOverflow, sidePadding, top, left, offset, maxHeight, minWidth } = this.props;
+        const container = this.getContainer();
+        return position({
+            popup: this.popup,
+            container: container && getStyles(container).position !== 'static' ? container : null,
+            anchor: this._getAnchor(),
+            directions,
+            autoPositioning,
+            autoCorrectTopOverflow,
+            sidePadding,
+            top,
+            left,
+            offset,
+            maxHeight,
+            minWidth
+        });
+    }
+    _updateDirection = (newDirection) => {
+        if (this.state.direction !== newDirection) {
+            this.setState({ direction: newDirection });
+            if (this.props.onDirectionChange) {
+                this.props.onDirectionChange(newDirection);
+            }
+        }
+    };
+    _updatePosition = () => {
+        const popup = this.popup;
+        if (popup) {
+            popup.style.position = 'absolute';
+            if (this.isVisible()) {
+                const { styles: style, direction } = this.position();
+                Object.entries(style).forEach(([key, value]) => {
+                    const propKey = key;
+                    if (typeof value === 'number') {
+                        popup.style[propKey] = `${value}px`;
+                    }
+                    else {
+                        popup.style[propKey] = value.toString();
+                    }
+                });
+                if (direction != null) {
+                    this._updateDirection(direction);
+                }
+            }
+            this.setState(this.calculateDisplay);
+        }
+    };
+    _redraw = () => {
+        if (this.isVisible()) {
+            this.redrawScheduler(this._updatePosition);
+        }
+    };
+    _getAnchor() {
+        return this.props.anchorElement || this.parent;
+    }
+    _listenersEnabled;
+    /**
+     * @param {boolean} enable
+     * @private
+     */
+    _setListenersEnabled(enable) {
+        if (enable && !this._listenersEnabled) {
+            setTimeout(() => {
+                this._listenersEnabled = true;
+                this.listeners.add(window, 'resize', this._redraw);
+                this.listeners.add(window, 'scroll', this._redraw);
+                this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
+                let el = this._getAnchor();
+                while (el) {
+                    this.listeners.add(el, 'scroll', this._redraw);
+                    el = el.parentElement;
+                }
+            }, 0);
+            return;
+        }
+        if (!enable && this._listenersEnabled) {
+            this.listeners.removeAll();
+            this._listenersEnabled = false;
+        }
+    }
+    /**
+     * Returns visibility state
+     * @return {boolean}
+     */
+    isVisible() {
+        return !this.props.hidden;
+    }
+    _onCloseAttempt(evt, isEsc) {
+        this.props.onCloseAttempt(evt, isEsc);
+    }
+    _onEscPress = (evt) => {
+        this.props.onEscPress(evt);
+        this._onCloseAttempt(evt, true);
+    };
+    /**
+     * @param {jQuery.Event} evt
+     * @private
+     */
+    _onDocumentClick = (evt) => {
+        if (this.container && evt.target instanceof Node && this.container.contains(evt.target) ||
+            !this._listenersEnabled ||
+            (this.props.dontCloseOnAnchorClick &&
+                evt.target instanceof Node &&
+                this._getAnchor()?.contains(evt.target))) {
+            return;
+        }
+        this.props.onOutsideClick(evt);
+        this._onCloseAttempt(evt, false);
+    };
+    getInternalContent() {
+        const { trapFocus, autoFocusFirst, children } = this.props;
+        return trapFocus
+            ? (<TabTrap autoFocusFirst={autoFocusFirst} focusBackOnExit>
+          {children}
+        </TabTrap>)
+            : children;
+    }
+    shortcutsScope = this.uid;
+    shortcutsMap = {
+        esc: this._onEscPress
+    };
+    render() {
+        const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest } = this.props;
+        const showing = this.state.display === Display.SHOWING;
+        const classes = classNames(className, styles.popup, {
+            [styles.attached]: attached,
+            [styles.hidden]: hidden,
+            [styles.showing]: showing
+        });
+        const direction = (this.state.direction || '').
+            toLowerCase().replace(/[_]/g, '-');
+        return (<PopupTargetContext.Consumer>
+        {value => {
+                this.ringPopupTarget = value;
+                return (<span 
+                // prevent bubbling through portal
+                onClick={stop} 
+                // This handler only blocks bubbling through React portal
+                role="presentation" ref={this.portalRef}>
+              {this.shouldUseShortcuts() &&
+                        (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
+
+              {(client || this.state.client) && (keepMounted || !hidden) && createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
+                  <div data-test={dataTests('ring-popup', dataTest)} data-test-shown={!hidden && !showing} data-test-direction={direction} ref={this.popupRef} className={classes} style={style} onMouseDown={onMouseDown} onMouseUp={onMouseUp} 
+                    // mouse handlers are used to track clicking on inner elements
+                    role="presentation">
+                    {this.getInternalContent()}
+                  </div>
+                </PopupTarget>, this.getContainer() || document.body)}
+            </span>);
+            }}
+      </PopupTargetContext.Consumer>);
+    }
+}
+Popup.propTypes = {
+    anchorElement: PropTypes.instanceOf(Node),
+    target: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Element)]),
+    className: PropTypes.string,
+    style: PropTypes.object,
+    hidden: PropTypes.bool.isRequired,
+    onOutsideClick: PropTypes.func,
+    onEscPress: PropTypes.func,
+    // onCloseAttempt is a common callback for ESC pressing and outside clicking.
+    // Use it if you don't need different behaviors for this cases.
+    onCloseAttempt: PropTypes.func,
+    children: PropTypes.node.isRequired,
+    dontCloseOnAnchorClick: PropTypes.bool,
+    shortcuts: PropTypes.bool,
+    keepMounted: PropTypes.bool,
+    'data-test': PropTypes.string,
+    client: PropTypes.bool,
+    directions: PropTypes.arrayOf(PropTypes.string),
+    autoPositioning: PropTypes.bool,
+    autoCorrectTopOverflow: PropTypes.bool,
+    left: PropTypes.number,
+    top: PropTypes.number,
+    maxHeight: PropTypes.number,
+    minWidth: PropTypes.number,
+    sidePadding: PropTypes.number,
+    attached: PropTypes.bool,
+    onMouseDown: PropTypes.func,
+    onMouseUp: PropTypes.func,
+    onMouseOver: PropTypes.func,
+    onMouseOut: PropTypes.func,
+    onContextMenu: PropTypes.func,
+    onDirectionChange: PropTypes.func,
+    onShow: PropTypes.func,
+    // set to true whenever popup contains focusable and scrollable content
+    trapFocus: PropTypes.bool,
+    autoFocusFirst: PropTypes.bool
+};

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

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

package/components/popup/popup.target.jsx

@@ -0,0 +1,15 @@
+import React, { createContext, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+export const PopupTargetContext = createContext(undefined);
+export const PopupTarget = forwardRef(function PopupTarget({ id, children, ...restProps }, ref) {
+    const target = (<div {...restProps} data-portaltarget={id} ref={ref}>
+        {typeof children !== 'function' && children}
+      </div>);
+    return (<PopupTargetContext.Provider value={id}>
+        {typeof children === 'function' ? children(target) : target}
+      </PopupTargetContext.Provider>);
+});
+PopupTarget.propTypes = {
+    id: PropTypes.string.isRequired,
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};

package/components/popup/position.d.ts

@@ -0,0 +1,30 @@
+import { Dimension, Directions, MaxHeight, MinWidth } from './popup.consts';
+export { Dimension, Directions, MaxHeight, MinWidth };
+interface Position {
+    top: number;
+    left: number;
+}
+export interface PositionStyles extends Position {
+    maxHeight?: number;
+    minWidth?: number;
+}
+export interface PositionAttrs {
+    popup: Element | null | undefined;
+    anchor: Element | null | undefined;
+    container: Element | null;
+    directions: readonly Directions[];
+    autoPositioning: boolean;
+    sidePadding: number;
+    top: number;
+    left: number;
+    offset: number;
+    maxHeight: number | 'screen' | null | undefined;
+    minWidth: number | 'target' | null | undefined;
+    autoCorrectTopOverflow: boolean;
+}
+export declare const positionPropKeys: readonly ["directions", "autoPositioning", "autoCorrectTopOverflow", "sidePadding", "top", "left", "offset", "maxHeight", "minWidth"];
+export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, containerNode?: Element | null): number | null;
+export default function position(attrs: PositionAttrs): {
+    styles: PositionStyles;
+    direction: Directions | null;
+};