@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.3

package/components/popup/popup.js

@@ -1,39 +1,22 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper, d as _objectSpread2, i 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 { _ as _defineProperty, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.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 'core-js/modules/web.dom-collections.iterator.js';
 import { 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 { DEFAULT_DIRECTIONS, Directions, Dimension, MinWidth, MaxHeight, Display } from './popup.consts.js';
+import { Display, DEFAULT_DIRECTIONS, Directions, Dimension, MinWidth, MaxHeight } from './popup.consts.js';
 import { PopupTargetContext, PopupTarget } from './popup.target.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-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';
@@ -42,9 +25,9 @@ import 'core-js/modules/es.array.sort.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
@@ -68,80 +51,70 @@ 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=".concat(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", {
+class Popup extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _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
-      });
-    });
-    _defineProperty(_this, "portalRef", function (el) {
-      _this.node = el;
-      _this.parent = el && el.parentElement;
-      if (el && _this.getContainer()) {
-        _this._redraw();
+    _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", prevState => _objectSpread2(_objectSpread2({}, 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", function (el) {
-      _this.popup = el;
-      _this._redraw();
+    _defineProperty(this, "popupRef", el => {
+      this.popup = el;
+      this._redraw();
     });
-    _defineProperty(_this, "containerRef", function (el) {
-      _this.container = el;
+    _defineProperty(this, "containerRef", el => {
+      this.container = el;
     });
-    _defineProperty(_this, "_updateDirection", function (newDirection) {
-      if (_this.state.direction !== newDirection) {
-        _this.setState({
+    _defineProperty(this, "_updateDirection", newDirection => {
+      if (this.state.direction !== newDirection) {
+        this.setState({
           direction: newDirection
         });
-        if (_this.props.onDirectionChange) {
-          _this.props.onDirectionChange(newDirection);
+        if (this.props.onDirectionChange) {
+          this.props.onDirectionChange(newDirection);
         }
       }
     });
-    _defineProperty(_this, "_updatePosition", function () {
-      var popup = _this.popup;
+    _defineProperty(this, "_updatePosition", () => {
+      const 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 (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] = "".concat(value, "px");
             } else {
@@ -149,243 +122,219 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
             }
           });
           if (direction != null) {
-            _this._updateDirection(direction);
+            this._updateDirection(direction);
           }
         }
-        _this.setState(_this.calculateDisplay);
+        this.setState(this.calculateDisplay);
       }
     });
-    _defineProperty(_this, "_redraw", function () {
-      if (_this.isVisible()) {
-        _this.redrawScheduler(_this._updatePosition);
+    _defineProperty(this, "_redraw", () => {
+      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);
+    _defineProperty(this, "_listenersEnabled", void 0);
+    _defineProperty(this, "_onEscPress", evt => {
+      this.props.onEscPress(evt);
+      this._onCloseAttempt(evt, true);
     });
     /**
      * @param {jQuery.Event} evt
      * @private
      */
-    _defineProperty(_this, "_onDocumentClick", function (evt) {
+    _defineProperty(this, "_onDocumentClick", 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)) {
+      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);
+      this.props.onOutsideClick(evt);
+      this._onCloseAttempt(evt, false);
     });
-    _defineProperty(_this, "shortcutsScope", _this.uid);
-    _defineProperty(_this, "shortcutsMap", {
-      esc: _this._onEscPress
+    _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();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._setListenersEnabled(false);
-    }
-  }, {
-    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,
-        autoPositioning,
-        autoCorrectTopOverflow,
-        sidePadding,
-        top,
-        left,
-        offset,
-        maxHeight,
-        minWidth
+  componentDidMount() {
+    if (!this.props.client) {
+      this.setState({
+        client: true
       });
     }
-  }, {
-    key: "_getAnchor",
-    value: function _getAnchor() {
-      return this.props.anchorElement || this.parent;
+    if (!this.props.hidden) {
+      this._setListenersEnabled(true);
     }
-  }, {
-    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);
-          }
-          _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;
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      hidden
+    } = this.props;
+    if (this.props !== prevProps) {
+      if (prevProps.hidden !== hidden) {
+        this._setListenersEnabled(!hidden);
       }
+      this._redraw();
     }
-    /**
-     * Returns visibility state
-     * @return {boolean}
-     */
-  }, {
-    key: "isVisible",
-    value: function isVisible() {
-      return !this.props.hidden;
+    if (this.props.onShow && !hidden && this.state.display === Display.SHOWN && (prevProps.hidden || prevState.display !== Display.SHOWN)) {
+      this.props.onShow();
     }
-  }, {
-    key: "_onCloseAttempt",
-    value: function _onCloseAttempt(evt, isEsc) {
-      this.props.onCloseAttempt(evt, isEsc);
-    }
-  }, {
-    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__*/jsx(TabTrap, {
-        autoFocusFirst: autoFocusFirst,
-        focusBackOnExit: true,
-        children: children
-      }) : children;
-    }
-  }, {
-    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__*/jsx(PopupTargetContext.Consumer, {
-        children: function children(value) {
-          _this3.ringPopupTarget = value;
-          return /*#__PURE__*/jsxs("span", {
-            // prevent bubbling through portal
-            onClick: stop
-            // This handler only blocks bubbling through React portal
-            ,
-            role: "presentation",
-            ref: _this3.portalRef,
-            children: [_this3.shouldUseShortcuts() && /*#__PURE__*/jsx(Shortcuts, {
-              map: _this3.shortcutsMap,
-              scope: _this3.shortcutsScope
-            }), (client || _this3.state.client) && (keepMounted || !hidden) && /*#__PURE__*/createPortal( /*#__PURE__*/jsx(PopupTarget, {
-              id: _this3.uid,
-              ref: _this3.containerRef,
-              onMouseOver: onMouseOver,
-              onFocus: onMouseOver,
-              onMouseOut: onMouseOut,
-              onBlur: onMouseOut,
-              onContextMenu: onContextMenu,
-              children: /*#__PURE__*/jsx("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",
-                children: _this3.getInternalContent()
-              })
-            }), _this3.getContainer() || document.body)]
-          });
+  }
+  componentWillUnmount() {
+    this._setListenersEnabled(false);
+  }
+  shouldUseShortcuts() {
+    const {
+      shortcuts,
+      hidden
+    } = this.props;
+    return shortcuts && !hidden;
+  }
+  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
+    });
+  }
+  _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;
     }
-  }]);
-}(PureComponent);
+  }
+  /**
+   * 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__*/jsx(TabTrap, {
+      autoFocusFirst: autoFocusFirst,
+      focusBackOnExit: true,
+      children: 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__*/jsx(PopupTargetContext.Consumer, {
+      children: value => {
+        this.ringPopupTarget = value;
+        return /*#__PURE__*/jsxs("span", {
+          // prevent bubbling through portal
+          onClick: stop
+          // This handler only blocks bubbling through React portal
+          ,
+          role: "presentation",
+          ref: this.portalRef,
+          children: [this.shouldUseShortcuts() && /*#__PURE__*/jsx(Shortcuts, {
+            map: this.shortcutsMap,
+            scope: this.shortcutsScope
+          }), (client || this.state.client) && (keepMounted || !hidden) && /*#__PURE__*/createPortal( /*#__PURE__*/jsx(PopupTarget, {
+            id: this.uid,
+            ref: this.containerRef,
+            onMouseOver: onMouseOver,
+            onFocus: onMouseOver,
+            onMouseOut: onMouseOut,
+            onBlur: onMouseOut,
+            onContextMenu: onContextMenu,
+            children: /*#__PURE__*/jsx("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",
+              children: this.getInternalContent()
+            })
+          }), this.getContainer() || document.body)]
+        });
+      }
+    });
+  }
+}
 _defineProperty(Popup, "defaultProps", {
   shortcuts: true,
   hidden: false,

package/components/popup/popup.target.js

@@ -1,15 +1,17 @@
-import { c as _objectWithoutProperties, d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { createContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["id", "children"];
-var PopupTargetContext = /*#__PURE__*/createContext(undefined);
-var PopupTarget = /*#__PURE__*/forwardRef(function PopupTarget(_ref, ref) {
-  var id = _ref.id,
-    children = _ref.children,
+const _excluded = ["id", "children"];
+const PopupTargetContext = /*#__PURE__*/createContext(undefined);
+const PopupTarget = /*#__PURE__*/forwardRef(function PopupTarget(_ref, ref) {
+  let {
+      id,
+      children
+    } = _ref,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var target = /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
+  const target = /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
     "data-portaltarget": id,
     ref: ref,
     children: typeof children !== 'function' && children