@jetbrains/ring-ui-built 6.0.30 → 6.0.32

package/components/popup/popup.js

@@ -1,49 +1,27 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, f as _classCallCheck, g as _callSuper, d as _objectSpread2, j as _slicedToArray } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.regexp.to-string.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/web.dom-collections.for-each.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 { getStyles, Listeners } from '../global/dom.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 from './position.js';
-import { Display, DEFAULT_DIRECTIONS, Directions, Dimension, MinWidth, MaxHeight } from './popup.consts.js';
+import { DEFAULT_DIRECTIONS, Display, Directions, Dimension, MinWidth, MaxHeight } from './popup.consts.js';
 import { PopupTargetContext, PopupTarget } from './popup.target.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.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.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
-import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.array.sort.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 
 var modules_2f69e2e2 = {"light":"light_rui_2ac4","popup":"popup_rui_871b font_rui_f295","hidden":"hidden_rui_871b","showing":"showing_rui_871b","attached":"attached_rui_871b"};
 
-var isPossibleClientSideNavigation = function isPossibleClientSideNavigation(event) {
-  var target = event.target;
-  var link = target.closest('a');
+const isPossibleClientSideNavigation = event => {
+  const target = event.target;
+  const link = target.closest('a');
   // Taken from https://github.com/nanostores/router/blob/80a333db4cf0789fda21a02715ebabca15192642/index.js#L58-L69
   return link && event.button === 0 &&
   // Left mouse button
@@ -67,345 +45,308 @@ var isPossibleClientSideNavigation = function isPossibleClientSideNavigation(eve
   // Not open in new window by user
   !event.defaultPrevented;
 };
-var stop = function stop(event) {
+const stop = event => {
   if (!isPossibleClientSideNavigation(event)) {
     event.stopPropagation();
   }
 };
-var getPopupContainer = function getPopupContainer(target) {
-  return typeof target === 'string' ? document.querySelector("[data-portaltarget=".concat(target, "]")) : target;
-};
+const getPopupContainer = target => typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target;
 /**
  * @constructor
  * @name Popup
  * @extends {ReactComponent}
  */
-var Popup = /*#__PURE__*/function (_PureComponent) {
-  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 = _callSuper(this, Popup, [].concat(args));
-    _defineProperty(_this, "state", {
-      display: Display.SHOWING
-    });
-    _defineProperty(_this, "popup", void 0);
-    _defineProperty(_this, "node", void 0);
-    _defineProperty(_this, "parent", void 0);
-    _defineProperty(_this, "container", void 0);
-    _defineProperty(_this, "ringPopupTarget", void 0);
-    _defineProperty(_this, "listeners", new Listeners());
-    _defineProperty(_this, "redrawScheduler", scheduleRAF(true));
-    _defineProperty(_this, "uid", getUID('popup-'));
-    _defineProperty(_this, "calculateDisplay", function (prevState) {
-      return _objectSpread2(_objectSpread2({}, prevState), {}, {
-        display: _this.props.hidden ? Display.SHOWING : Display.SHOWN
+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
       });
-    });
-    _defineProperty(_this, "portalRef", function (el) {
-      _this.node = el;
-      _this.parent = el && el.parentElement;
-      if (el && _this.getContainer()) {
-        _this._redraw();
-      }
-    });
-    _defineProperty(_this, "popupRef", function (el) {
-      _this.popup = el;
-      _this._redraw();
-    });
-    _defineProperty(_this, "containerRef", function (el) {
-      _this.container = el;
-    });
-    _defineProperty(_this, "_updateDirection", function (newDirection) {
-      if (_this.state.direction !== newDirection) {
-        _this.setState({
-          direction: newDirection
-        });
-        if (_this.props.onDirectionChange) {
-          _this.props.onDirectionChange(newDirection);
-        }
-      }
-    });
-    _defineProperty(_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(_this, "_redraw", function () {
-      if (_this.isVisible()) {
-        _this.redrawScheduler(_this._updatePosition);
-      }
-    });
-    _defineProperty(_this, "_listenersEnabled", void 0);
-    _defineProperty(_this, "_onEscPress", function (evt) {
-      _this.props.onEscPress(evt);
-      _this._onCloseAttempt(evt, true);
-    });
-    /**
-     * @param {jQuery.Event} evt
-     * @private
-     */
-    _defineProperty(_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(_this, "shortcutsScope", _this.uid);
-    _defineProperty(_this, "shortcutsMap", {
-      esc: _this._onEscPress
-    });
-    return _this;
-  }
-  _inherits(Popup, _PureComponent);
-  return _createClass(Popup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!this.props.client) {
-        this.setState({
-          client: true
-        });
-      }
-      if (!this.props.hidden) {
-        this._setListenersEnabled(true);
-      }
     }
-  }, {
-    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();
-      }
+    if (!this.props.hidden) {
+      this._setListenersEnabled(true);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._setListenersEnabled(false);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      hidden
+    } = this.props;
+    if (this.props !== prevProps) {
+      if (prevProps.hidden !== hidden) {
+        this._setListenersEnabled(!hidden);
+      }
+      this._redraw();
     }
-  }, {
-    key: "shouldUseShortcuts",
-    value: function shouldUseShortcuts() {
-      var _this$props = this.props,
-        shortcuts = _this$props.shortcuts,
-        hidden = _this$props.hidden;
-      return shortcuts && !hidden;
+    if (this.props.onShow && !hidden && this.state.display === Display.SHOWN && (prevProps.hidden || prevState.display !== Display.SHOWN)) {
+      this.props.onShow();
     }
-  }, {
-    key: "getContainer",
-    value: function getContainer() {
-      var target = this.props.target || this.ringPopupTarget;
-      return target && getPopupContainer(target);
+  }
+  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: "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,
-        autoPositioning,
-        autoCorrectTopOverflow,
-        sidePadding,
-        top,
-        left,
-        offset,
-        maxHeight,
-        minWidth
+  };
+  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);
+      }
     }
-  }, {
-    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);
+  };
+  _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();
           }
-          _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;
+        });
+        if (direction != null) {
+          this._updateDirection(direction);
+        }
       }
+      this.setState(this.calculateDisplay);
     }
-    /**
-     * Returns visibility state
-     * @return {boolean}
-     */
-  }, {
-    key: "isVisible",
-    value: function isVisible() {
-      return !this.props.hidden;
+  };
+  _redraw = () => {
+    if (this.isVisible()) {
+      this.redrawScheduler(this._updatePosition);
     }
-  }, {
-    key: "_onCloseAttempt",
-    value: function _onCloseAttempt(evt, isEsc) {
-      this.props.onCloseAttempt(evt, isEsc);
+  };
+  _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: "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;
+    if (!enable && this._listenersEnabled) {
+      this.listeners.removeAll();
+      this._listenersEnabled = false;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _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, {
-        [modules_2f69e2e2.attached]: attached,
-        [modules_2f69e2e2.hidden]: hidden,
-        [modules_2f69e2e2.showing]: showing
-      });
-      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));
-      });
+  }
+  /**
+   * 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;
     }
-  }]);
-}(PureComponent);
-_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
-});
+    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));
+    });
+  }
+}
 Popup.propTypes = {
   anchorElement: PropTypes.instanceOf(Node),
   target: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Element)]),