@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/popup/popup.js

@@ -0,0 +1,389 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.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_d157 font_rui_750f","hidden":"hidden_rui_d157","showing":"showing_rui_d157","attached":"attached_rui_d157"};
+
+const stop = e => e.stopPropagation();
+
+const getPopupContainer = target => typeof target === 'string' ? document.querySelector(`[data-portaltarget=${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] = `${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) {
+      // 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;
+  }
+
+  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);
+        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,
+  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,
+  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

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

@@ -0,0 +1,279 @@
+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';
+
+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 };