@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/popup/popup.d.ts

@@ -1,147 +0,0 @@
-/**
- * @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;
-    autoPositioningOnScroll: boolean;
-    autoCorrectTopOverflow: boolean;
-    left: number;
-    top: number;
-    sidePadding: number;
-    attached: boolean;
-    trapFocus: boolean;
-    autoFocusFirst: boolean;
-    offset: number;
-    legacy: boolean;
-    withTail?: boolean;
-    tailOffset?: number;
-    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;
-    children?: ReactNode;
-}
-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;
-        autoPositioningOnScroll: 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.JSX.Element | P["children"] | undefined;
-    shortcutsScope: string;
-    shortcutsMap: {
-        esc: (evt: KeyboardEvent) => void;
-    };
-    render(): React.JSX.Element;
-}
-export type PopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, PopupProps>;
-export type BasePopupAttrs = JSX.LibraryManagedAttributes<typeof Popup, BasePopupProps>;

package/components/popup/popup.js

@@ -1,312 +0,0 @@
-/**
- * @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,
-        autoPositioningOnScroll: 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) {
-            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);
-    }
-    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);
-                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) {
-                    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, // pass this prop to preserve the popup's DOM state while hidden
-    'data-test': PropTypes.string,
-    client: PropTypes.bool, // true means that it's never used in SSR
-    directions: PropTypes.arrayOf(PropTypes.string),
-    autoPositioning: PropTypes.bool,
-    autoCorrectTopOverflow: PropTypes.bool,
-    left: PropTypes.number,
-    top: PropTypes.number,
-    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    minWidth: PropTypes.number,
-    sidePadding: PropTypes.number,
-    attached: PropTypes.bool, // Popup adjacent to an input, without upper border and shadow
-    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

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

package/components/popup/popup.target.js

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

@@ -1,30 +0,0 @@
-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: HTMLElement | 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;
-};