@jetbrains/ring-ui 4.1.0-beta.4 → 4.1.2

package/dist/place-under-ng/place-under-ng.js

@@ -0,0 +1,157 @@
+import angular from 'angular';
+import debounce from 'just-debounce-it';
+import createResizeDetector from 'element-resize-detector';
+import { getDocumentScrollTop } from '../global/dom.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+
+const resizeDetector = createResizeDetector();
+const angularModule = angular.module('Ring.place-under', []);
+angularModule.directive('rgPlaceUnder', // eslint-disable-next-line angular/di-unused
+["$window", "getClosestElementWithCommonParent", "rgPlaceUnderHelper", function rgPlaceUnderDirective($window, getClosestElementWithCommonParent, rgPlaceUnderHelper) {
+  return {
+    restrict: 'A',
+    link: function link(scope, iElement, iAttrs) {
+      const element = iElement[0];
+      const synchronizer = rgPlaceUnderHelper.createPositionSynchronizer(element, iAttrs, scope);
+
+      function startSyncing(placeUnderSelector) {
+        if (placeUnderSelector) {
+          scope.$evalAsync(() => {
+            const syncWith = getClosestElementWithCommonParent(element, placeUnderSelector);
+
+            if (syncWith) {
+              synchronizer.syncPositionWith(syncWith);
+            } else {
+              throw new Error('rgPlaceUnder cannot find element to sync with.');
+            }
+          });
+        }
+      }
+
+      iAttrs.$observe('rgPlaceUnder', startSyncing);
+    }
+  };
+}]);
+angularModule.factory('getClosestElementWithCommonParent', function getClosestElementWithCommonParentFactory() {
+  return function getClosestElementWithCommonParent(currentElement, selector) {
+    const parent = currentElement.parentNode;
+
+    if (parent) {
+      return parent.querySelector(selector) || getClosestElementWithCommonParent(parent, selector);
+    } else {
+      return null;
+    }
+  };
+});
+angularModule.factory('rgPlaceUnderHelper', ["$window", $window => {
+  const DEBOUNCE_INTERVAL = 10;
+  const AFTER_SCROLL_RECHECK_INTERVAL = 50;
+  const HEIGHT_CHECK_INTERVAL = 50;
+  return {
+    DEBOUNCE_INTERVAL,
+    AFTER_SCROLL_RECHECK_INTERVAL,
+    HEIGHT_CHECK_INTERVAL,
+    createPositionSynchronizer: (element, iAttrs, scope) => {
+      const topOffset = parseInt(iAttrs.placeTopOffset, 10) || 0;
+      const syncHeight = iAttrs.syncHeight;
+      let syncBottom = [];
+      let removeScrollListener = [];
+
+      if (iAttrs.syncBottom) {
+        syncBottom = iAttrs.syncBottom.split(',');
+      }
+
+      function waitForNonZeroHeight(elementToCheck) {
+        return new Promise(resolve => {
+          function checkElementHeight() {
+            if (elementToCheck.offsetHeight === 0) {
+              $window.setTimeout(checkElementHeight, HEIGHT_CHECK_INTERVAL);
+            } else {
+              resolve();
+            }
+          }
+
+          checkElementHeight();
+        });
+      }
+
+      function onScroll(syncElement) {
+        const documentScrollTop = getDocumentScrollTop();
+        const documentOffsetHeight = $window.document.documentElement && $window.document.documentElement.offsetHeight || $window.document.body.offsetHeight;
+        const syncedElementHeight = syncElement.offsetHeight;
+        const syncedElementOffsetTop = syncElement.getBoundingClientRect().top + documentScrollTop;
+        const bottom = syncedElementOffsetTop + syncedElementHeight;
+        const margin = Math.max(bottom - documentScrollTop, syncedElementHeight);
+        element.style.marginTop = `${margin + topOffset}px`;
+
+        if (syncHeight) {
+          /**
+           * Decrease height by margin value to make scroll work properly
+           */
+          let bottomOffset = 0;
+
+          if (syncBottom.length) {
+            for (let i = 0; i < syncBottom.length; i++) {
+              const syncBottomParams = syncBottom[i].split(';');
+              const elem = $window.document.querySelector(syncBottomParams[0]);
+              const extraMargin = syncBottomParams[1] ? parseInt(syncBottomParams[1], 10) : 0;
+
+              if (elem) {
+                const boundingRect = elem.getBoundingClientRect();
+
+                if (boundingRect.top === 0) {
+                  continue;
+                }
+
+                const marginTop = parseInt($window.getComputedStyle(elem).getPropertyValue('margin-top'), 10);
+                bottomOffset = documentOffsetHeight - boundingRect.top + marginTop + extraMargin;
+
+                if (bottomOffset < 0) {
+                  bottomOffset = 0;
+                }
+
+                break;
+              }
+            }
+          }
+
+          element.style.height = `calc(100% - ${parseInt(element.style.marginTop, 10) + bottomOffset}px)`;
+        }
+      }
+
+      function removeScrollListeners() {
+        removeScrollListener.map(cb => cb());
+        removeScrollListener = [];
+      }
+
+      function syncPositionWith(syncElement) {
+        removeScrollListeners();
+        const afterScrollFinishRecheck = debounce(() => this.onScroll(syncElement), AFTER_SCROLL_RECHECK_INTERVAL);
+        const sidebarScrollListener = debounce(() => {
+          this.onScroll(syncElement);
+          afterScrollFinishRecheck();
+        }, DEBOUNCE_INTERVAL);
+        this.waitForNonZeroHeight(syncElement).then(sidebarScrollListener);
+        $window.addEventListener('scroll', sidebarScrollListener);
+        removeScrollListener.push(() => {
+          $window.removeEventListener('scroll', sidebarScrollListener);
+        });
+        removeScrollListener.push(scope.$watch('show', sidebarScrollListener));
+        removeScrollListener.push(scope.$on('rgPlaceUnder:sync', sidebarScrollListener));
+        const elementToHeightListening = iAttrs.listenToHeightChange ? $window.document.querySelector(iAttrs.listenToHeightChange) : $window.document.body;
+        resizeDetector.listenTo(elementToHeightListening, sidebarScrollListener);
+        removeScrollListener.push(() => resizeDetector.removeAllListeners(elementToHeightListening));
+      }
+
+      scope.$on('$destroy', removeScrollListeners);
+      return {
+        waitForNonZeroHeight,
+        onScroll,
+        syncPositionWith
+      };
+    }
+  };
+}]);
+var PlaceUnder = angularModule.name;
+
+export { PlaceUnder as default };

package/dist/popup/popup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, c as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -18,7 +18,7 @@ import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 
-var modules_2f69e2e2 = {"popup":"popup_popup__d157c5ca global_font__0f8f4370","hidden":"popup_hidden__d157c5ca","showing":"popup_showing__d157c5ca","attached":"popup_attached__d157c5ca"};
+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();
 
@@ -30,8 +30,8 @@ const getPopupContainer = target => typeof target === 'string' ? document.queryS
  */
 
 class Popup extends PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "state", {
       display: Display.SHOWING
@@ -43,7 +43,7 @@ class Popup extends PureComponent {
 
     _defineProperty(this, "uid", getUID('popup-'));
 
-    _defineProperty(this, "calculateDisplay", prevState => _objectSpread2(_objectSpread2({}, prevState), {}, {
+    _defineProperty(this, "calculateDisplay", prevState => ({ ...prevState,
       display: this.props.hidden ? Display.SHOWING : Display.SHOWN
     }));
 
@@ -189,11 +189,12 @@ class Popup extends PureComponent {
       return acc;
     }, {});
     const container = this.getContainer();
-    return position(_objectSpread2({
+    return position({
       popup: this.popup,
       container: container && getStyles(container).position !== 'static' ? container : null,
-      anchor: this._getAnchor()
-    }, positionProps));
+      anchor: this._getAnchor(),
+      ...positionProps
+    });
   }
 
   _getAnchor() {
@@ -211,7 +212,7 @@ class Popup extends PureComponent {
         this._listenersEnabled = true;
         this.listeners.add(window, 'resize', this._redraw);
         this.listeners.add(window, 'scroll', this._redraw);
-        this.listeners.add(document, 'click', this._onDocumentClick, true);
+        this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
 
         let el = this._getAnchor();
 
@@ -385,5 +386,4 @@ _defineProperty(Popup, "PopupProps", {
   MaxHeight
 });
 
-export default Popup;
-export { getPopupContainer };
+export { Popup as default, getPopupContainer };

package/dist/popup/popup.target.js

@@ -1,4 +1,4 @@
-import { a as _objectWithoutProperties, b as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { createContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
@@ -6,10 +6,9 @@ const PopupTargetContext = /*#__PURE__*/createContext();
 const PopupTarget = /*#__PURE__*/forwardRef(function PopupTarget(_ref, ref) {
   let {
     id,
-    children
-  } = _ref,
-      restProps = _objectWithoutProperties(_ref, ["id", "children"]);
-
+    children,
+    ...restProps
+  } = _ref;
   const isFunctionChild = typeof children === 'function';
   const target = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     "data-portaltarget": id,

package/dist/popup/position.js

@@ -108,15 +108,16 @@ const defaultcontainerRect = {
   left: 0
 };
 
-function handleTopOffScreen({
-  sidePadding,
-  styles,
-  anchorRect,
-  maxHeight,
-  popupScrollHeight,
-  direction,
-  scroll
-}) {
+function handleTopOffScreen(_ref) {
+  let {
+    sidePadding,
+    styles,
+    anchorRect,
+    maxHeight,
+    popupScrollHeight,
+    direction,
+    scroll
+  } = _ref;
   const BORDER_COMPENSATION = 1;
   const {
     TOP_LEFT,
@@ -221,11 +222,13 @@ function position(attrs) {
       concat(directions[0]).filter(direction => directionsMatrix[direction]).map(direction => ({
         styles: directionsMatrix[direction],
         direction
-      })).sort(({
-        styles: stylesA
-      }, {
-        styles: stylesB
-      }) => {
+      })).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;
@@ -273,5 +276,4 @@ function position(attrs) {
   };
 }
 
-export default position;
-export { maxHeightForDirection, positionPropKeys };
+export { position as default, maxHeightForDirection, positionPropKeys };

package/dist/popup-menu/popup-menu.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _objectWithoutProperties, b as _extends, c as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Popup from '../popup/popup.js';
@@ -30,16 +30,20 @@ import '../list/list__link.js';
 import '../link/link.js';
 import 'focus-visible';
 import '../link/clickableLink.js';
+import '../_helpers/link.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark';
 import '@jetbrains/icons/remove-10px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
 import '../list/list__title.js';
@@ -47,16 +51,17 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 
-const _ref = Popup.propTypes || {},
-      popupPropTypes = _objectWithoutProperties(_ref, ["children"]);
+const {
+  children,
+  ...popupPropTypes
+} = Popup.propTypes || {};
 /**
  * @name Popup Menu
  */
 
-
 class PopupMenu extends Popup {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "onSelect", (item, event) => {
       if (this.props.closeOnSelect) {
@@ -73,9 +78,10 @@ class PopupMenu extends Popup {
 
   /** @override */
   getInternalContent() {
-    const _this$props = this.props,
-          props = _objectWithoutProperties(_this$props, ["className"]);
-
+    const {
+      className,
+      ...props
+    } = this.props;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(List, _extends({
       ref: this.listRef
     }, props, {
@@ -91,18 +97,19 @@ _defineProperty(PopupMenu, "isItemType", List.isItemType);
 
 _defineProperty(PopupMenu, "ListProps", List.ListProps);
 
-_defineProperty(PopupMenu, "propTypes", _objectSpread2(_objectSpread2(_objectSpread2({}, popupPropTypes), List.propTypes), {}, {
+_defineProperty(PopupMenu, "propTypes", { ...popupPropTypes,
+  ...List.propTypes,
   closeOnSelect: PropTypes.bool
-}));
+});
 
-_defineProperty(PopupMenu, "defaultProps", _objectSpread2(_objectSpread2(_objectSpread2({}, List.defaultProps), Popup.defaultProps), {}, {
+_defineProperty(PopupMenu, "defaultProps", { ...List.defaultProps,
+  ...Popup.defaultProps,
   renderOptimization: false,
   closeOnSelect: false
-}));
+});
 
 const {
   ListProps
 } = List;
 
-export default PopupMenu;
-export { ListProps };
+export { ListProps, PopupMenu as default };

package/dist/progress-bar/progress-bar.js

@@ -1,18 +1,18 @@
-import { _ as _defineProperty, a as _objectWithoutProperties, b as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Theme from '../global/theme.js';
 
-var modules_fb7af416 = {"unit":"8px","light":"progressBar_light__9afa5539","progressBar":"progressBar_progressBar__9afa5539","dark":"progressBar_dark__9afa5539","line":"progressBar_line__9afa5539","globalMode":"progressBar_globalMode__9afa5539","progress-bar":"progressBar_progressBar__9afa5539"};
+var modules_fb7af416 = {"unit":"8px","light":"light_rui_320b","progressBar":"progressBar_rui_320b","dark":"dark_rui_320b","line":"line_rui_320b","globalMode":"globalMode_rui_320b","progress-bar":"progressBar_rui_320b"};
 
 /**
  * @name Progress Bar
  */
 
 class ProgressBar extends PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "progressbarWrapperRef", el => {
       this.progressbarWrapper = el;
@@ -36,16 +36,15 @@ class ProgressBar extends PureComponent {
   }
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       theme,
       className,
       global,
       max,
-      value
-    } = _this$props,
-          otherProps = _objectWithoutProperties(_this$props, ["theme", "className", "global", "max", "value"]);
-
+      value,
+      label,
+      ...otherProps
+    } = this.props;
     const width = value ? `${ProgressBar.toPercent(value, max)}%` : null;
     const classes = classNames(modules_fb7af416.progressBar, className, {
       [modules_fb7af416.light]: theme === Theme.LIGHT,
@@ -59,6 +58,7 @@ class ProgressBar extends PureComponent {
       className: modules_fb7af416.line,
       ref: this.progressbarRef,
       role: "progressbar",
+      "aria-label": label,
       "aria-valuenow": value,
       "aria-valuemin": 0,
       "aria-valuemax": max,
@@ -71,6 +71,7 @@ class ProgressBar extends PureComponent {
 }
 
 _defineProperty(ProgressBar, "propTypes", {
+  label: PropTypes.string,
   theme: PropTypes.string,
 
   /**
@@ -105,7 +106,8 @@ _defineProperty(ProgressBar, "propTypes", {
 _defineProperty(ProgressBar, "defaultProps", {
   max: 1.0,
   value: 0,
-  theme: Theme.LIGHT
+  theme: Theme.LIGHT,
+  label: 'Progress'
 });
 
-export default ProgressBar;
+export { ProgressBar as default };

package/dist/progress-bar-ng/progress-bar-ng.js

@@ -0,0 +1,15 @@
+import angularComponentFactory from '../global/angular-component-factory.js';
+import ProgressBar from '../progress-bar/progress-bar.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'angular';
+import 'react';
+import 'react-dom';
+import '../global/ring-angular-component.js';
+import '../global/react-dom-renderer.js';
+import 'prop-types';
+import 'classnames';
+import '../global/theme.js';
+
+var progressBarNg = angularComponentFactory(ProgressBar, 'ProgressBar').name;
+
+export { progressBarNg as default };

package/dist/promised-click-ng/promised-click-ng.js

@@ -0,0 +1,126 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import angular from 'angular';
+import { m as modules_e81895c9 } from '../_helpers/button__classes.js';
+import { applyMethodToClasses } from '../global/dom.js';
+import RingAngularComponent from '../global/ring-angular-component.js';
+import { LOADER_BACKGROUND_SELECTOR } from '../button-ng/button-ng.js';
+import 'classnames';
+import '../global/theme.js';
+import 'react';
+import '../icon-ng/icon-ng.js';
+import '../icon/icon__constants.js';
+import '../template-ng/template-ng.js';
+import '../_helpers/icon.js';
+
+/**
+ * @name Promised Click Ng
+*/
+
+const angularModule = angular.module('Ring.promised-click', []);
+const DEFAULT_MODE = 'active';
+
+class PromisedClickController extends RingAngularComponent {
+  constructor() {
+    super(...arguments);
+    const {
+      $scope,
+      $element,
+      $attrs,
+      $parse
+    } = this.$inject;
+    this.element = $element[0];
+    this.active = false;
+
+    if ($attrs.rgPromisedClick) {
+      this.onClick(e => $parse($attrs.rgPromisedClick)($scope, {
+        event: e
+      }));
+    }
+
+    let currentMode = null;
+
+    this.toggleActive = enable => {
+      if (currentMode === 'loader') {
+        applyMethodToClasses(enable ? 'add' : 'remove')(this.element.classList, modules_e81895c9.loader);
+        const loaderNode = this.element.querySelector(LOADER_BACKGROUND_SELECTOR);
+
+        if (loaderNode) {
+          applyMethodToClasses(enable ? 'add' : 'remove')(this.element.querySelector(LOADER_BACKGROUND_SELECTOR).classList, modules_e81895c9.loaderBackground);
+        }
+      } else if (currentMode === 'active') {
+        applyMethodToClasses(enable ? 'add' : 'remove')(this.element.classList, modules_e81895c9.active);
+      }
+    };
+
+    const setModeParams = mode => {
+      currentMode = mode;
+    };
+
+    setModeParams($attrs.promisedMode || DEFAULT_MODE);
+
+    if ($attrs.promisedMode && $attrs.promisedMode.indexOf('{{') !== -1) {
+      $attrs.$observe('promisedMode', newMode => {
+        if (newMode !== currentMode) {
+          this.toggleActive(false);
+          setModeParams(newMode);
+        }
+      });
+    }
+  }
+
+  onClick(callback) {
+    this.element.addEventListener('click', e => {
+      if (this.active) {
+        e.preventDefault();
+      } else {
+        this.process(callback, e);
+      }
+    });
+  }
+
+  process(callback, e) {
+    const {
+      $scope
+    } = this.$inject;
+    this.promise = callback(e);
+
+    if (this.promise) {
+      this.activate();
+    } // Do not use $evalAsync here. This code should be invoked in the same animation frame
+    // otherwise a button may be "pressed" twice – by click and with class change.
+
+
+    if (!$scope.$root.$$phase) {
+      // eslint-disable-line angular/no-private-call
+      $scope.$apply();
+    }
+  }
+
+  activate() {
+    this.active = true;
+    this.toggleActive(true);
+
+    const done = () => {
+      this.active = false;
+      this.toggleActive(false);
+    };
+
+    this.promise.then(done, done);
+  }
+
+}
+
+PromisedClickController.$inject = [];
+
+_defineProperty(PromisedClickController, "$inject", ['$scope', '$element', '$attrs', '$parse']);
+
+function rgPromisedClickDirective() {
+  return {
+    controller: PromisedClickController
+  };
+}
+
+angularModule.directive('rgPromisedClick', rgPromisedClickDirective);
+var PromisedClick = angularModule.name;
+
+export { PromisedClick as default };

package/dist/proxy-attrs/proxy-attrs.js

@@ -16,4 +16,4 @@ function proxyAttrs(template, attrsWhitelist) {
   };
 }
 
-export default proxyAttrs;
+export { proxyAttrs as default };