@jetbrains/ring-ui 4.2.4 → 4.2.7

package/dist/popup/popup.js

@@ -1,396 +0,0 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.string.replace.js';
-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.js';
-import scheduleRAF from '../global/schedule-raf.js';
-import { Listeners, getStyles } from '../global/dom.js';
-import Shortcuts from '../shortcuts/shortcuts.js';
-import joinDataTestAttributes from '../global/data-tests.js';
-import TabTrap from '../tab-trap/tab-trap.js';
-import position, { positionPropKeys } from './position.js';
-import { Display, DEFAULT_DIRECTIONS, Directions, Dimension, MinWidth, MaxHeight } from './popup.consts.js';
-import { PopupTargetContext, PopupTarget } from './popup.target.js';
-export { PopupTarget, PopupTargetContext } from './popup.target.js';
-import '../shortcuts/core.js';
-import 'combokeys';
-import '../global/sniffer.js';
-import 'sniffr';
-
-var modules_2f69e2e2 = {"popup":"popup_rui_7cd4 font_rui_8bff","hidden":"hidden_rui_7cd4","showing":"showing_rui_7cd4","attached":"attached_rui_7cd4"};
-
-const stop = e => e.stopPropagation();
-
-const getPopupContainer = target => typeof target === 'string' ? document.querySelector("[data-portaltarget=".concat(target, "]")) : target;
-/**
- * @constructor
- * @name Popup
- * @extends {ReactComponent}
- */
-
-class Popup extends PureComponent {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "state", {
-      display: Display.SHOWING
-    });
-
-    _defineProperty(this, "listeners", new Listeners());
-
-    _defineProperty(this, "redrawScheduler", scheduleRAF(true));
-
-    _defineProperty(this, "uid", getUID('popup-'));
-
-    _defineProperty(this, "calculateDisplay", prevState => ({ ...prevState,
-      display: this.props.hidden ? Display.SHOWING : Display.SHOWN
-    }));
-
-    _defineProperty(this, "portalRef", el => {
-      this.node = el;
-      this.parent = el && el.parentElement;
-
-      if (el && this.getContainer()) {
-        this._redraw();
-      }
-    });
-
-    _defineProperty(this, "popupRef", el => {
-      this.popup = el;
-
-      this._redraw();
-    });
-
-    _defineProperty(this, "containerRef", el => {
-      this.container = el;
-    });
-
-    _defineProperty(this, "_updateDirection", newDirection => {
-      if (this.state.direction !== newDirection) {
-        this.setState({
-          direction: newDirection
-        });
-
-        if (this.props.onDirectionChange) {
-          this.props.onDirectionChange(newDirection);
-        }
-      }
-    });
-
-    _defineProperty(this, "_updatePosition", () => {
-      if (this.popup) {
-        this.popup.style.position = 'absolute';
-
-        if (this.isVisible()) {
-          const {
-            styles: style,
-            direction
-          } = this.position();
-          Object.keys(style).forEach(key => {
-            const value = style[key];
-
-            if (typeof value === 'number') {
-              this.popup.style[key] = "".concat(value, "px");
-            } else {
-              this.popup.style[key] = value.toString();
-            }
-          });
-
-          this._updateDirection(direction);
-        }
-
-        this.setState(this.calculateDisplay);
-      }
-    });
-
-    _defineProperty(this, "_redraw", () => {
-      if (this.isVisible()) {
-        this.redrawScheduler(this._updatePosition);
-      }
-    });
-
-    _defineProperty(this, "_onEscPress", evt => {
-      this.props.onEscPress(evt);
-
-      this._onCloseAttempt(evt, true);
-    });
-
-    _defineProperty(this, "_onDocumentClick", evt => {
-      if (this.container && this.container.contains(evt.target) || !this._listenersEnabled || this.props.dontCloseOnAnchorClick && this._getAnchor() && this._getAnchor().contains(evt.target)) {
-        return;
-      }
-
-      this.props.onOutsideClick(evt);
-
-      this._onCloseAttempt(evt, false);
-    });
-
-    _defineProperty(this, "shortcutsScope", this.uid);
-
-    _defineProperty(this, "shortcutsMap", {
-      esc: this._onEscPress
-    });
-  }
-
-  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);
-
-    this.popup = null;
-  }
-
-  shouldUseShortcuts() {
-    const {
-      shortcuts,
-      hidden
-    } = this.props;
-    return shortcuts && !hidden;
-  }
-
-  getContainer() {
-    const target = this.props.target || this.ringPopupTarget;
-    return target && getPopupContainer(target);
-  }
-
-  position() {
-    const positionProps = positionPropKeys.reduce((acc, key) => {
-      acc[key] = this.props[key];
-      return acc;
-    }, {});
-    const container = this.getContainer();
-    return position({
-      popup: this.popup,
-      container: container && getStyles(container).position !== 'static' ? container : null,
-      anchor: this._getAnchor(),
-      ...positionProps
-    });
-  }
-
-  _getAnchor() {
-    return this.props.anchorElement || this.parent;
-  }
-  /**
-   * @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);
-  }
-
-  getInternalContent() {
-    const {
-      trapFocus,
-      autoFocusFirst,
-      children
-    } = this.props;
-    return trapFocus ? /*#__PURE__*/React.createElement(TabTrap, {
-      autoFocusFirst: autoFocusFirst,
-      focusBackOnExit: true
-    }, children) : children;
-  }
-
-  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, modules_2f69e2e2.popup, {
-      [modules_2f69e2e2.attached]: attached,
-      [modules_2f69e2e2.hidden]: hidden,
-      [modules_2f69e2e2.showing]: showing
-    });
-    const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
-    return /*#__PURE__*/React.createElement(PopupTargetContext.Consumer, null, value => {
-      this.ringPopupTarget = value;
-      return /*#__PURE__*/React.createElement("span", {
-        // prevent bubbling through portal
-        onClick: stop // This handler only blocks bubbling through React portal
-        ,
-        role: "presentation",
-        ref: this.portalRef
-      }, this.shouldUseShortcuts() && /*#__PURE__*/React.createElement(Shortcuts, {
-        map: this.shortcutsMap,
-        scope: this.shortcutsScope
-      }), (client || this.state.client) && (keepMounted || !hidden) && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PopupTarget, {
-        id: this.uid,
-        ref: this.containerRef,
-        onMouseOver: onMouseOver,
-        onFocus: onMouseOver,
-        onMouseOut: onMouseOut,
-        onBlur: onMouseOut,
-        onContextMenu: onContextMenu
-      }, /*#__PURE__*/React.createElement("div", {
-        "data-test": joinDataTestAttributes('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())), this.getContainer() || document.body));
-    });
-  }
-
-}
-
-_defineProperty(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,
-  autoPositioningOnScroll: PropTypes.bool,
-  autoCorrectTopOverflow: PropTypes.bool,
-  left: PropTypes.number,
-  top: PropTypes.number,
-  maxHeight: 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
-});
-
-_defineProperty(Popup, "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
-});
-
-_defineProperty(Popup, "PopupProps", {
-  Directions,
-  Dimension,
-  MinWidth,
-  MaxHeight
-});
-
-export { Popup as default, getPopupContainer };

package/dist/popup/popup.target.js

@@ -1,26 +0,0 @@
-import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { createContext, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-
-const PopupTargetContext = /*#__PURE__*/createContext();
-const PopupTarget = /*#__PURE__*/forwardRef(function PopupTarget(_ref, ref) {
-  let {
-    id,
-    children,
-    ...restProps
-  } = _ref;
-  const isFunctionChild = typeof children === 'function';
-  const target = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    "data-portaltarget": id,
-    ref: ref
-  }), !isFunctionChild && children);
-  return /*#__PURE__*/React.createElement(PopupTargetContext.Provider, {
-    value: id
-  }, isFunctionChild ? children(target) : target);
-});
-PopupTarget.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-};
-
-export { PopupTarget, PopupTargetContext };

package/dist/popup/position.js

@@ -1,280 +0,0 @@
-import { getRect, isMounted, getDocumentScrollTop, getDocumentScrollLeft, getWindowHeight } from '../global/dom.js';
-import { Directions, MaxHeight, Dimension, MinWidth } from './popup.consts.js';
-export { Dimension, Directions, MaxHeight, MinWidth } from './popup.consts.js';
-import '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
-function getScrollingCoordinates(container) {
-  if (container !== null) {
-    return {
-      top: container.scrollTop,
-      left: container.scrollLeft
-    };
-  }
-
-  return {
-    top: getDocumentScrollTop(),
-    left: getDocumentScrollLeft()
-  };
-}
-
-function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
-  const popupWidth = popup.clientWidth;
-  const popupHeight = popup.clientHeight;
-  const anchorBottom = anchorTop + anchorRect.height;
-  const anchorRight = anchorLeft + anchorRect.width;
-  const popupLeft = anchorLeft - popupWidth;
-  const popupTop = anchorTop - popupHeight;
-  const popupRightToLeft = anchorRight - popupWidth;
-  const popupHorizontalCenter = anchorLeft + anchorRect.width / 2 - popupWidth / 2;
-  const popupVerticalCenter = anchorTop + anchorRect.height / 2 - popupHeight / 2;
-  const popupBottomToTop = anchorBottom - popupHeight;
-  return {
-    [Directions.BOTTOM_RIGHT]: {
-      left: anchorLeft,
-      top: anchorBottom + offset
-    },
-    [Directions.BOTTOM_LEFT]: {
-      left: popupRightToLeft,
-      top: anchorBottom + offset
-    },
-    [Directions.BOTTOM_CENTER]: {
-      left: popupHorizontalCenter,
-      top: anchorBottom + offset
-    },
-    [Directions.TOP_RIGHT]: {
-      left: anchorLeft,
-      top: popupTop - offset
-    },
-    [Directions.TOP_LEFT]: {
-      left: popupRightToLeft,
-      top: popupTop - offset
-    },
-    [Directions.TOP_CENTER]: {
-      left: popupHorizontalCenter,
-      top: popupTop - offset
-    },
-    [Directions.LEFT_BOTTOM]: {
-      left: popupLeft - offset,
-      top: anchorTop
-    },
-    [Directions.LEFT_TOP]: {
-      left: popupLeft - offset,
-      top: popupBottomToTop
-    },
-    [Directions.LEFT_CENTER]: {
-      left: popupLeft - offset,
-      top: popupVerticalCenter
-    },
-    [Directions.RIGHT_BOTTOM]: {
-      left: anchorRight + offset,
-      top: anchorTop
-    },
-    [Directions.RIGHT_TOP]: {
-      left: anchorRight + offset,
-      top: popupBottomToTop
-    },
-    [Directions.RIGHT_CENTER]: {
-      left: anchorRight + offset,
-      top: popupVerticalCenter
-    }
-  };
-}
-
-function verticalOverflow(styles, scrollingCoordinates, attrs) {
-  const containerHeight = attrs.container !== null ? attrs.container.clientHeight : getWindowHeight();
-  const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
-  const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
-  const topOverflow = Math.max(viewportMinX - styles.top, 0);
-  const popupHeight = attrs.popup.clientHeight;
-  const verticalDiff = styles.top + popupHeight - viewportMaxX;
-  const bottomOverflow = Math.max(verticalDiff, 0);
-  return topOverflow + bottomOverflow;
-}
-
-function horizontalOverflow(styles, scrollingCoordinates, attrs) {
-  const containerWidth = attrs.container !== null ? attrs.container.clientWidth : window.innerWidth;
-  const viewportMinY = scrollingCoordinates.left + attrs.sidePadding;
-  const viewportMaxY = scrollingCoordinates.left + containerWidth - attrs.sidePadding;
-  const leftOverflow = Math.max(viewportMinY - styles.left, 0);
-  const popupWidth = attrs.popup.clientWidth;
-  const horizontalDiff = styles.left + popupWidth - viewportMaxY;
-  const rightOverflow = Math.max(horizontalDiff, 0);
-  return leftOverflow + rightOverflow;
-}
-
-const positionPropKeys = ['directions', 'autoPositioning', 'autoCorrectTopOverflow', 'sidePadding', 'top', 'left', 'offset', 'maxHeight', 'minWidth'];
-const defaultcontainerRect = {
-  top: 0,
-  left: 0
-};
-
-function handleTopOffScreen(_ref) {
-  let {
-    sidePadding,
-    styles,
-    anchorRect,
-    maxHeight,
-    popupScrollHeight,
-    direction,
-    scroll
-  } = _ref;
-  const BORDER_COMPENSATION = 1;
-  const {
-    TOP_LEFT,
-    TOP_RIGHT,
-    TOP_CENTER,
-    RIGHT_TOP,
-    LEFT_TOP
-  } = Directions;
-  const openedToTop = [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
-
-  if (!openedToTop) {
-    return styles;
-  }
-
-  const isAttachedToAnchorTop = [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
-  const attachingPointY = isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom;
-  const effectiveHeight = maxHeight ? Math.min(popupScrollHeight, maxHeight) : popupScrollHeight;
-  const hypotheticalTop = attachingPointY - effectiveHeight;
-
-  if (hypotheticalTop <= sidePadding) {
-    styles.top = sidePadding + scroll.top;
-    styles.maxHeight = attachingPointY - sidePadding + BORDER_COMPENSATION;
-  }
-
-  return styles;
-}
-
-function maxHeightForDirection(direction, anchorNode, containerNode) {
-  const container = containerNode || document.documentElement;
-  const domRect = anchorNode.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-  const topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
-  const containerHeight = Math.max(containerRect.height, // XXX
-  // If container is the document element
-  // then we check client height too because we may have situation when
-  // "height" from "getBoundingClientRect" less then "clientHeight".
-  container === document.documentElement ? container.clientHeight : 0);
-  const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
-
-  switch (direction) {
-    case Directions.TOP_LEFT:
-    case Directions.TOP_CENTER:
-    case Directions.TOP_RIGHT:
-      return topMaxHeight;
-
-    case Directions.BOTTOM_LEFT:
-    case Directions.BOTTOM_CENTER:
-    case Directions.BOTTOM_RIGHT:
-      return bottomMaxHeight;
-
-    case Directions.LEFT_BOTTOM:
-    case Directions.RIGHT_BOTTOM:
-      return domRect.height + bottomMaxHeight;
-
-    case Directions.LEFT_TOP:
-    case Directions.RIGHT_TOP:
-      return domRect.height + topMaxHeight;
-
-    case Directions.RIGHT_CENTER:
-    case Directions.LEFT_CENTER:
-      return domRect.height / 2 + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
-
-    default:
-      return null;
-  }
-}
-function position(attrs) {
-  const {
-    popup,
-    anchor,
-    container,
-    directions,
-    autoPositioning,
-    sidePadding,
-    top,
-    left,
-    offset,
-    maxHeight,
-    minWidth,
-    autoCorrectTopOverflow = true
-  } = attrs;
-  let styles = {
-    top: 0,
-    left: 0
-  };
-  let chosenDirection = null;
-  const containerRect = container !== null ? getRect(container) : defaultcontainerRect;
-  const defaultAnchor = container !== null ? container : document.body;
-  const anchorRect = getRect(isMounted(anchor) ? anchor : defaultAnchor);
-  const scroll = getScrollingCoordinates(container);
-  const anchorLeft = anchorRect.left + scroll.left + left - containerRect.left;
-  const anchorTop = anchorRect.top + scroll.top + top - containerRect.top;
-
-  if (popup) {
-    const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
-
-    if (!autoPositioning || directions.length === 1) {
-      styles = directionsMatrix[directions[0]];
-      chosenDirection = directions[0];
-    } else {
-      const sortedByIncreasingOverflow = directions. // Fall back to the first option
-      concat(directions[0]).filter(direction => directionsMatrix[direction]).map(direction => ({
-        styles: directionsMatrix[direction],
-        direction
-      })).sort((_ref2, _ref3) => {
-        let {
-          styles: stylesA
-        } = _ref2;
-        let {
-          styles: stylesB
-        } = _ref3;
-        const overflowA = verticalOverflow(stylesA, scroll, attrs) + horizontalOverflow(stylesA, scroll, attrs);
-        const overflowB = verticalOverflow(stylesB, scroll, attrs) + horizontalOverflow(stylesB, scroll, attrs);
-        return overflowA - overflowB;
-      });
-      styles = sortedByIncreasingOverflow[0].styles;
-      chosenDirection = sortedByIncreasingOverflow[0].direction;
-    } // because of the anchor negative margin top and left also may become negative
-
-
-    ['left', 'top'].forEach(key => {
-      if (styles[key] < 0) {
-        styles[key] = 0;
-      }
-    });
-  }
-
-  if (maxHeight === MaxHeight.SCREEN || maxHeight === 'screen') {
-    // this feature works properly only when direction is BOTTOM_* or *_BOTTOM
-    styles.maxHeight = window.innerHeight + scroll.top - styles.top - Dimension.MARGIN;
-  } else if (maxHeight) {
-    styles.maxHeight = maxHeight;
-  }
-
-  if (autoCorrectTopOverflow) {
-    styles = handleTopOffScreen({
-      sidePadding,
-      styles,
-      anchorRect,
-      maxHeight,
-      direction: chosenDirection,
-      popupScrollHeight: popup.scrollHeight,
-      scroll
-    });
-  }
-
-  if (minWidth === MinWidth.TARGET || minWidth === 'target') {
-    styles.minWidth = anchorRect.width;
-  } else if (minWidth) {
-    styles.minWidth = anchorRect.width < minWidth ? minWidth : anchorRect.width;
-  }
-
-  return {
-    styles,
-    direction: chosenDirection
-  };
-}
-
-export { position as default, maxHeightForDirection, positionPropKeys };