@jetbrains/ring-ui 5.0.155 → 5.0.157

package/dist/popup/popup.js

@@ -1,3 +1,11 @@
+import { c as _defineProperty, j as _inherits, k as _createSuper, b as _classCallCheck, m as _assertThisInitialized, a as _objectSpread2, l as _slicedToArray, _ as _createClass } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
 import React, { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -9,314 +17,368 @@ import Shortcuts from '../shortcuts/shortcuts.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import TabTrap from '../tab-trap/tab-trap.js';
 import position from './position.js';
-import { DEFAULT_DIRECTIONS, Display, Directions, Dimension, MinWidth, MaxHeight } from './popup.consts.js';
+import { Display, DEFAULT_DIRECTIONS, Directions, Dimension, MinWidth, MaxHeight } from './popup.consts.js';
 import { PopupTargetContext, PopupTarget } from './popup.target.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/es.string.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.array.map.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
-import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.array.sort.js';
 
 var modules_2f69e2e2 = {"light":"light_rui_2ac4","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=${target}]`) : target;
+var stop = function stop(e) {
+  return e.stopPropagation();
+};
+var getPopupContainer = function getPopupContainer(target) {
+  return typeof target === 'string' ? document.querySelector("[data-portaltarget=".concat(target, "]")) : target;
+};
 /**
  * @constructor
  * @name Popup
  * @extends {ReactComponent}
  */
-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);
+var Popup = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Popup, _PureComponent);
+  var _super = _createSuper(Popup);
+  function Popup() {
+    var _this;
+    _classCallCheck(this, Popup);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      display: Display.SHOWING
+    });
+    _defineProperty(_assertThisInitialized(_this), "popup", void 0);
+    _defineProperty(_assertThisInitialized(_this), "node", void 0);
+    _defineProperty(_assertThisInitialized(_this), "parent", void 0);
+    _defineProperty(_assertThisInitialized(_this), "container", void 0);
+    _defineProperty(_assertThisInitialized(_this), "ringPopupTarget", void 0);
+    _defineProperty(_assertThisInitialized(_this), "listeners", new Listeners());
+    _defineProperty(_assertThisInitialized(_this), "redrawScheduler", scheduleRAF(true));
+    _defineProperty(_assertThisInitialized(_this), "uid", getUID('popup-'));
+    _defineProperty(_assertThisInitialized(_this), "calculateDisplay", function (prevState) {
+      return _objectSpread2(_objectSpread2({}, prevState), {}, {
+        display: _this.props.hidden ? Display.SHOWING : Display.SHOWN
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "portalRef", function (el) {
+      _this.node = el;
+      _this.parent = el && el.parentElement;
+      if (el && _this.getContainer()) {
+        _this._redraw();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "popupRef", function (el) {
+      _this.popup = el;
+      _this._redraw();
+    });
+    _defineProperty(_assertThisInitialized(_this), "containerRef", function (el) {
+      _this.container = el;
+    });
+    _defineProperty(_assertThisInitialized(_this), "_updateDirection", function (newDirection) {
+      if (_this.state.direction !== newDirection) {
+        _this.setState({
+          direction: newDirection
+        });
+        if (_this.props.onDirectionChange) {
+          _this.props.onDirectionChange(newDirection);
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_updatePosition", function () {
+      var popup = _this.popup;
+      if (popup) {
+        popup.style.position = 'absolute';
+        if (_this.isVisible()) {
+          var _this$position = _this.position(),
+            style = _this$position.styles,
+            direction = _this$position.direction;
+          Object.entries(style).forEach(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+              key = _ref2[0],
+              value = _ref2[1];
+            var propKey = key;
+            if (typeof value === 'number') {
+              popup.style[propKey] = "".concat(value, "px");
+            } else {
+              popup.style[propKey] = value.toString();
+            }
+          });
+          if (direction != null) {
+            _this._updateDirection(direction);
+          }
+        }
+        _this.setState(_this.calculateDisplay);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_redraw", function () {
+      if (_this.isVisible()) {
+        _this.redrawScheduler(_this._updatePosition);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_listenersEnabled", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_onEscPress", function (evt) {
+      _this.props.onEscPress(evt);
+      _this._onCloseAttempt(evt, true);
+    });
+    /**
+     * @param {jQuery.Event} evt
+     * @private
+     */
+    _defineProperty(_assertThisInitialized(_this), "_onDocumentClick", function (evt) {
+      var _this$_getAnchor;
+      if (_this.container && evt.target instanceof Node && _this.container.contains(evt.target) || !_this._listenersEnabled || _this.props.dontCloseOnAnchorClick && evt.target instanceof Node && (_this$_getAnchor = _this._getAnchor()) !== null && _this$_getAnchor !== void 0 && _this$_getAnchor.contains(evt.target)) {
+        return;
+      }
+      _this.props.onOutsideClick(evt);
+      _this._onCloseAttempt(evt, false);
+    });
+    _defineProperty(_assertThisInitialized(_this), "shortcutsScope", _this.uid);
+    _defineProperty(_assertThisInitialized(_this), "shortcutsMap", {
+      esc: _this._onEscPress
+    });
+    return _this;
   }
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      hidden
-    } = this.props;
-    if (this.props !== prevProps) {
-      if (prevProps.hidden !== hidden) {
-        this._setListenersEnabled(!hidden);
+  _createClass(Popup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!this.props.client) {
+        this.setState({
+          client: true
+        });
+      }
+      if (!this.props.hidden) {
+        this._setListenersEnabled(true);
       }
-      this._redraw();
     }
-    if (this.props.onShow && !hidden && this.state.display === Display.SHOWN && (prevProps.hidden || prevState.display !== Display.SHOWN)) {
-      this.props.onShow();
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var hidden = this.props.hidden;
+      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();
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._setListenersEnabled(false);
     }
-  };
-  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
+  }, {
+    key: "shouldUseShortcuts",
+    value: function shouldUseShortcuts() {
+      var _this$props = this.props,
+        shortcuts = _this$props.shortcuts,
+        hidden = _this$props.hidden;
+      return shortcuts && !hidden;
+    }
+  }, {
+    key: "getContainer",
+    value: function getContainer() {
+      var target = this.props.target || this.ringPopupTarget;
+      return target && getPopupContainer(target);
+    }
+  }, {
+    key: "position",
+    value: function position$1() {
+      var _this$props2 = this.props,
+        directions = _this$props2.directions,
+        autoPositioning = _this$props2.autoPositioning,
+        autoCorrectTopOverflow = _this$props2.autoCorrectTopOverflow,
+        sidePadding = _this$props2.sidePadding,
+        top = _this$props2.top,
+        left = _this$props2.left,
+        offset = _this$props2.offset,
+        maxHeight = _this$props2.maxHeight,
+        minWidth = _this$props2.minWidth;
+      var container = this.getContainer();
+      return position({
+        popup: this.popup,
+        container: container && getStyles(container).position !== 'static' ? container : null,
+        anchor: this._getAnchor(),
+        directions: directions,
+        autoPositioning: autoPositioning,
+        autoCorrectTopOverflow: autoCorrectTopOverflow,
+        sidePadding: sidePadding,
+        top: top,
+        left: left,
+        offset: offset,
+        maxHeight: maxHeight,
+        minWidth: minWidth
       });
-      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(_ref => {
-          let [key, value] = _ref;
-          const propKey = key;
-          if (typeof value === 'number') {
-            popup.style[propKey] = `${value}px`;
-          } else {
-            popup.style[propKey] = value.toString();
+  }, {
+    key: "_getAnchor",
+    value: function _getAnchor() {
+      return this.props.anchorElement || this.parent;
+    }
+  }, {
+    key: "_setListenersEnabled",
+    value:
+    /**
+     * @param {boolean} enable
+     * @private
+     */
+    function _setListenersEnabled(enable) {
+      var _this2 = this;
+      if (enable && !this._listenersEnabled) {
+        setTimeout(function () {
+          _this2._listenersEnabled = true;
+          _this2.listeners.add(window, 'resize', _this2._redraw);
+          if (_this2.props.autoPositioningOnScroll) {
+            _this2.listeners.add(window, 'scroll', _this2._redraw);
           }
-        });
-        if (direction != null) {
-          this._updateDirection(direction);
-        }
+          _this2.listeners.add(document, 'pointerdown', _this2._onDocumentClick, true);
+          var el = _this2._getAnchor();
+          while (el) {
+            _this2.listeners.add(el, 'scroll', _this2._redraw);
+            el = el.parentElement;
+          }
+        }, 0);
+        return;
+      }
+      if (!enable && this._listenersEnabled) {
+        this.listeners.removeAll();
+        this._listenersEnabled = false;
       }
-      this.setState(this.calculateDisplay);
     }
-  };
-  _redraw = () => {
-    if (this.isVisible()) {
-      this.redrawScheduler(this._updatePosition);
+    /**
+     * Returns visibility state
+     * @return {boolean}
+     */
+  }, {
+    key: "isVisible",
+    value: function isVisible() {
+      return !this.props.hidden;
     }
-  };
-  _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;
+  }, {
+    key: "_onCloseAttempt",
+    value: function _onCloseAttempt(evt, isEsc) {
+      this.props.onCloseAttempt(evt, isEsc);
     }
-    if (!enable && this._listenersEnabled) {
-      this.listeners.removeAll();
-      this._listenersEnabled = false;
+  }, {
+    key: "getInternalContent",
+    value: function getInternalContent() {
+      var _this$props3 = this.props,
+        trapFocus = _this$props3.trapFocus,
+        autoFocusFirst = _this$props3.autoFocusFirst,
+        children = _this$props3.children;
+      return trapFocus ? /*#__PURE__*/React.createElement(TabTrap, {
+        autoFocusFirst: autoFocusFirst,
+        focusBackOnExit: true
+      }, children) : children;
     }
-  }
-  /**
-   * 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;
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+        _this3 = this;
+      var _this$props4 = this.props,
+        className = _this$props4.className,
+        style = _this$props4.style,
+        hidden = _this$props4.hidden,
+        attached = _this$props4.attached,
+        keepMounted = _this$props4.keepMounted,
+        client = _this$props4.client,
+        onMouseDown = _this$props4.onMouseDown,
+        onMouseUp = _this$props4.onMouseUp,
+        onMouseOver = _this$props4.onMouseOver,
+        onMouseOut = _this$props4.onMouseOut,
+        onContextMenu = _this$props4.onContextMenu,
+        dataTest = _this$props4['data-test'];
+      var showing = this.state.display === Display.SHOWING;
+      var classes = classNames(className, modules_2f69e2e2.popup, (_classNames = {}, _defineProperty(_classNames, modules_2f69e2e2.attached, attached), _defineProperty(_classNames, modules_2f69e2e2.hidden, hidden), _defineProperty(_classNames, modules_2f69e2e2.showing, showing), _classNames));
+      var direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
+      return /*#__PURE__*/React.createElement(PopupTargetContext.Consumer, null, function (value) {
+        _this3.ringPopupTarget = value;
+        return /*#__PURE__*/React.createElement("span", {
+          // prevent bubbling through portal
+          onClick: stop
+          // This handler only blocks bubbling through React portal
+          ,
+          role: "presentation",
+          ref: _this3.portalRef
+        }, _this3.shouldUseShortcuts() && /*#__PURE__*/React.createElement(Shortcuts, {
+          map: _this3.shortcutsMap,
+          scope: _this3.shortcutsScope
+        }), (client || _this3.state.client) && (keepMounted || !hidden) && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PopupTarget, {
+          id: _this3.uid,
+          ref: _this3.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: _this3.popupRef,
+          className: classes,
+          style: style,
+          onMouseDown: onMouseDown,
+          onMouseUp: onMouseUp
+          // mouse handlers are used to track clicking on inner elements
+          ,
+          role: "presentation"
+        }, _this3.getInternalContent())), _this3.getContainer() || document.body));
+      });
     }
-    this.props.onOutsideClick(evt);
-    this._onCloseAttempt(evt, false);
-  };
-  getInternalContent() {
-    const {
-      trapFocus,
-      autoFocusFirst,
-      children
-    } = this.props;
-    return trapFocus ? /*#__PURE__*/React.createElement(TabTrap, {
-      autoFocusFirst: autoFocusFirst,
-      focusBackOnExit: true
-    }, children) : 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, 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));
-    });
-  }
-}
+  }]);
+  return Popup;
+}(PureComponent);
+_defineProperty(Popup, "defaultProps", {
+  shortcuts: true,
+  hidden: false,
+  onOutsideClick: function onOutsideClick() {},
+  onEscPress: function onEscPress() {},
+  onCloseAttempt: function 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: Directions,
+  Dimension: Dimension,
+  MinWidth: MinWidth,
+  MaxHeight: MaxHeight
+});
 Popup.propTypes = {
   anchorElement: PropTypes.instanceOf(Node),
   target: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Element)]),