@jetbrains/ring-ui 4.1.0-beta.8 → 4.1.3

package/dist/auth/storage.js

@@ -15,7 +15,8 @@ import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../loader-inline/loader-inline.js';
 import '../global/theme.js';
@@ -276,4 +277,4 @@ class AuthStorage {
 
 }
 
-export default AuthStorage;
+export { AuthStorage as default };

package/dist/auth/token-validator.js

@@ -173,4 +173,4 @@ _defineProperty(TokenValidator, "TokenValidationError", class TokenValidationErr
 
 });
 
-export default TokenValidator;
+export { TokenValidator as default };

package/dist/auth/window-flow.js

@@ -130,4 +130,4 @@ class WindowFlow {
 
 }
 
-export default WindowFlow;
+export { WindowFlow as default };

package/dist/auth-dialog/auth-dialog.js

@@ -30,7 +30,8 @@ import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../global/theme.js';
 import '../link/clickableLink.js';
@@ -38,7 +39,7 @@ import '../_helpers/button__classes.js';
 import 'element-resize-detector';
 import '../global/schedule-raf.js';
 
-var modules_ae521deb = {"unit":"8px","dialog":"authDialog_dialog__eba2bba5","content":"authDialog_content__eba2bba5 global_font__0f8f4370","button":"authDialog_button__eba2bba5","firstButton":"authDialog_firstButton__eba2bba5 authDialog_button__eba2bba5","title":"authDialog_title__eba2bba5","logo":"authDialog_logo__eba2bba5","error":"authDialog_error__eba2bba5"};
+var modules_ae521deb = {"unit":"8px","dialog":"dialog_rui_eba2","content":"content_rui_eba2 font_rui_750f","button":"button_rui_eba2","firstButton":"firstButton_rui_eba2 button_rui_eba2","title":"title_rui_eba2","logo":"logo_rui_eba2","error":"error_rui_eba2"};
 
 /**
  * @name Auth Dialog
@@ -72,6 +73,7 @@ class AuthDialog extends Component {
     const defaultTitle = serviceName ? loginToCaption : loginCaption;
     const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName);
     return /*#__PURE__*/React.createElement(Dialog, {
+      label: title,
       "data-test": "ring-auth-dialog",
       className: className,
       contentClassName: classNames(className, modules_ae521deb.dialog),
@@ -129,4 +131,4 @@ _defineProperty(AuthDialog, "defaultProps", {
   onCancel: () => {}
 });
 
-export default AuthDialog;
+export { AuthDialog as default };

package/dist/auth-dialog-service/auth-dialog-service.js

@@ -1,7 +1,7 @@
-import { c as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { render } from 'react-dom';
 import AuthDialog from '../auth-dialog/auth-dialog.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'prop-types';
 import 'classnames';
 import '../island/island.js';
@@ -29,7 +29,8 @@ import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../global/theme.js';
 import '../link/clickableLink.js';
@@ -54,9 +55,9 @@ function renderAuthDialog(props) {
 
 function showAuthDialog() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  renderAuthDialog(_objectSpread2(_objectSpread2({}, props), {}, {
+  renderAuthDialog({ ...props,
     show: true
-  }));
+  });
   return () => {
     renderAuthDialog({
       show: false
@@ -64,4 +65,4 @@ function showAuthDialog() {
   };
 }
 
-export default showAuthDialog;
+export { showAuthDialog as default };

package/dist/auth-ng/auth-ng.js

@@ -0,0 +1,203 @@
+import angular from 'angular';
+import '../auth/auth.js';
+import Auth from '../auth/auth__core.js';
+import '../auth/window-flow.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import '../auth/response-parser.js';
+import 'es6-error';
+import '../global/url.js';
+import '../auth/down-notification.js';
+import 'react';
+import 'prop-types';
+import '../alert-service/alert-service.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../alert/alert.js';
+import 'classnames';
+import '@jetbrains/icons/exception';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/warning';
+import '@jetbrains/icons/close';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../loader-inline/loader-inline.js';
+import '../global/theme.js';
+import '../global/data-tests.js';
+import '../_helpers/inject-styles.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '../global/dom.js';
+import '../alert/container.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../group/group.js';
+import '../_helpers/group.js';
+import '../global/listeners.js';
+import '../http/http.js';
+import '../global/promise-with-timeout.js';
+import '../auth/storage.js';
+import '../storage/storage.js';
+import '../storage/storage__local.js';
+import '../storage/storage__fallback.js';
+import 'deep-equal';
+import '../auth/request-builder.js';
+import 'simply-uuid';
+import '../auth/background-flow.js';
+import '../auth/token-validator.js';
+
+/**
+ * @name Auth Ng
+ */
+
+const angularModule = angular.module('Ring.auth', []);
+angularModule.provider('auth', ["$httpProvider", function provider($httpProvider) {
+  /**
+   * @type Auth
+   */
+  let auth;
+  /**
+   * @type {{cleanHash: boolean}} config
+   */
+
+  const defaultConfig = {
+    cleanHash: false //prevents infinite redirect on angular>1.2.26
+
+  };
+
+  this.init = authInstance => {
+    auth = authInstance;
+  };
+  /**
+   * @param {{
+   *   serverUri: string,
+   *   redirectUri: string?,
+   *   clientId: string?,
+   *   scope: string[]?,
+   *   cleanHash: boolean?
+   * }} config
+   */
+
+
+  this.config = config => {
+    const configCopy = angular.extend({}, defaultConfig, config);
+    auth = new Auth(configCopy);
+  };
+
+  $httpProvider.interceptors.push(['$q', '$injector', 'auth', ($q, $injector, authInstance) => {
+    function urlEndsWith(config, suffix) {
+      return config && config.url && config.url.indexOf(suffix) === config.url.length - suffix.length;
+    }
+
+    return {
+      request(config) {
+        if (!authInstance || urlEndsWith(config, '.html') || config && config.noAuthorization) {
+          // Don't intercept angular template requests
+          return config;
+        }
+
+        return authInstance.promise.then(() => authInstance.auth.requestToken()).then(accessToken => {
+          if (accessToken) {
+            config.headers.Authorization = `Bearer ${accessToken}`;
+          }
+
+          return config;
+        });
+      },
+
+      responseError(rejection) {
+        if (authInstance && !urlEndsWith(rejection.config, '.html') && rejection.data != null && Auth.shouldRefreshToken(rejection.data.error)) {
+          // Use $injector to avoid circular dependency
+          const $http = $injector.get('$http');
+          const {
+            data,
+            method,
+            params,
+            url
+          } = rejection.config;
+          return authInstance.auth.forceTokenUpdate().then(() => $http({
+            data,
+            method,
+            params,
+            url
+          }));
+        }
+
+        return $q.reject(rejection);
+      }
+
+    };
+  }]);
+  this.$get = ["$injector", "$log", "$sniffer", function get($injector, $log, $sniffer) {
+    // Do not try to init anything without config
+    if (!auth) {
+      $log.warn('Auth wasn\'t initialized');
+      return null;
+    }
+
+    if (auth.config.reloadOnUserChange === false) {
+      auth.addListener('userChange', () => {
+        const $route = $injector.get('$route');
+        $route.reload();
+      });
+    }
+    /**
+     * @type {Promise.<string>}
+     */
+
+
+    const authInitPromise = auth.init();
+    /**
+     * @param {string?} restoreLocationURL
+     */
+
+    function restoreLocation(restoreLocationURL) {
+      if (restoreLocationURL) {
+        const bases = document.getElementsByTagName('base');
+        let baseURI = auth.config.redirectUri;
+
+        if (bases.length > 0) {
+          baseURI = bases[0].href;
+        }
+
+        if (restoreLocationURL.indexOf(baseURI) === 0) {
+          const $location = $injector.get('$location');
+          let relativeURI = restoreLocationURL.substr(baseURI.length); // We have to turn url with hash to simple relative url in HashbangInHtml5 mode
+          // And there is no other and documented way to detect that mode
+          // @see http://stackoverflow.com/a/16678065
+
+          if ($location.$$html5 && !$sniffer.history) {
+            // eslint-disable-line angular/no-private-call
+            relativeURI = relativeURI.replace(/^#\//, '');
+          }
+
+          $location.url(relativeURI).replace();
+        }
+      }
+    }
+
+    authInitPromise.then(restoreLocation, e => {
+      if (!e.authRedirect) {
+        $log.error(e);
+      }
+    });
+    return {
+      auth,
+      requestUser: auth.requestUser.bind(auth),
+      clientId: auth.config.clientId,
+      logout: auth.logout.bind(auth),
+      promise: authInitPromise
+    };
+  }];
+}]);
+var authNg = angularModule.name;
+
+export { authNg as default };

package/dist/auth-ng/auth-ng.mock.js

@@ -0,0 +1,33 @@
+/**
+ * TODO(maksimrv): Remove this code
+ * It is currently required because permissions do not work without auth,
+ * but we can't stub the correct auth component and should mock all providers.
+ */
+function AuthProviderMock() {
+  this.$get = ['$q', function get($q) {
+    const promise = $q.resolve([]);
+    return {
+      auth: {
+        addListener() {},
+
+        getAPIPath() {
+          return '/';
+        },
+
+        requestToken() {
+          return promise;
+        },
+
+        http: {
+          get() {
+            return promise;
+          }
+
+        }
+      },
+      promise
+    };
+  }];
+}
+
+export { AuthProviderMock as default };

package/dist/autofocus-ng/autofocus-ng.js

@@ -0,0 +1,50 @@
+import angular from 'angular';
+import { FOCUSABLE_ELEMENTS } from '../tab-trap/tab-trap.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import 'prop-types';
+import '../global/dom.js';
+
+const angularModule = angular.module('Ring.autofocus', []);
+const RING_SELECT_SELECTOR = '[data-test=ring-select__focus]';
+const RING_SELECT = 'rg-select';
+angularModule.directive('rgAutofocus', function rgAutofocusDirective() {
+  /**
+   * Focuses on element itself if it has "focus" method.
+   * Searches and focuses on select's button or input if element is rg-select
+   * @param element
+   */
+  function focusOnElement(element) {
+    if (!element) {
+      return;
+    }
+
+    if (element.hasAttribute(RING_SELECT) || element.tagName.toLowerCase() === RING_SELECT) {
+      focusOnElement(element.querySelector(RING_SELECT_SELECTOR));
+      return;
+    }
+
+    if (element.matches(FOCUSABLE_ELEMENTS) && element.focus) {
+      element.focus();
+      return;
+    }
+
+    const focusableChild = element.querySelector(FOCUSABLE_ELEMENTS);
+
+    if (focusableChild && focusableChild.focus) {
+      focusableChild.focus();
+    }
+  }
+
+  return (scope, iElement, iAttrs) => {
+    const element = iElement[0];
+    scope.$watch(iAttrs.rgAutofocus, newValue => {
+      if (newValue) {
+        scope.$evalAsync(() => focusOnElement(element));
+      }
+    });
+  };
+});
+var autofocusNg = angularModule.name;
+
+export { autofocusNg as default };

package/dist/avatar/avatar.js

@@ -1,11 +1,13 @@
-import { _ as _defineProperty, a as _objectWithoutProperties, c as _objectSpread2, 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 { isDataURI, parseQueryString, encodeURL } from '../global/url.js';
 import { getPixelRatio } from '../global/dom.js';
+import FallbackAvatar from './fallback-avatar.js';
+import '../global/get-uid.js';
 
-var modules_61ca8c75 = {"avatar":"avatar_avatar__fcab4239","subavatar":"avatar_subavatar__fcab4239","empty":"avatar_empty__fcab4239"};
+var modules_61ca8c75 = {"avatar":"avatar_rui_0937","subavatar":"subavatar_rui_0937","empty":"empty_rui_0937"};
 
 /**
  * @name Avatar
@@ -15,6 +17,7 @@ const Size = {
   Size18: 18,
   Size20: 20,
   Size24: 24,
+  Size28: 28,
   Size32: 32,
   Size40: 40,
   Size48: 48,
@@ -42,52 +45,56 @@ class Avatar extends PureComponent {
   }
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       size,
       url,
       dpr,
       style,
       round,
       subavatar,
-      subavatarSize
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["size", "url", "dpr", "style", "round", "subavatar", "subavatarSize"]);
-
+      subavatarSize,
+      username,
+      skipParams,
+      ...restProps
+    } = this.props;
     const sizeString = `${size}px`;
     const subavatarSizeString = `${subavatarSize}px`;
     const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
-
-    const styleObj = _objectSpread2({
+    const styleObj = {
       borderRadius: round ? '50%' : borderRadius,
       height: sizeString,
-      width: sizeString
-    }, style);
-
-    const styleObjGroup = _objectSpread2({
+      width: sizeString,
+      ...style
+    };
+    const styleObjGroup = {
       borderRadius: '2px',
       height: subavatarSizeString,
-      width: subavatarSizeString
-    }, style);
+      width: subavatarSizeString,
+      ...style
+    };
 
     if (!url || this.state.errorUrl === url) {
       return /*#__PURE__*/React.createElement("span", _extends({}, restProps, {
         "data-test": "avatar",
-        className: classNames(modules_61ca8c75.avatar, modules_61ca8c75.empty, this.props.className),
+        className: classNames(modules_61ca8c75.avatar, this.props.className, {
+          [modules_61ca8c75.empty]: username == null
+        }),
         style: styleObj
+      }), username != null && /*#__PURE__*/React.createElement(FallbackAvatar, {
+        size: size,
+        round: round,
+        username: username
       }));
     }
 
     let src = url;
 
-    if (!isDataURI(url)) {
+    if (!skipParams && !isDataURI(url)) {
       const [urlStart, query] = url.split('?');
-
-      const queryParams = _objectSpread2(_objectSpread2({}, parseQueryString(query)), {}, {
+      const queryParams = { ...parseQueryString(query),
         dpr,
         size
-      });
-
+      };
       src = encodeURL(urlStart, queryParams);
     }
 
@@ -95,13 +102,11 @@ class Avatar extends PureComponent {
 
     if (subavatar && !isDataURI(subavatar)) {
       const [urlStart, query] = subavatar.split('?');
-
-      const queryParams = _objectSpread2(_objectSpread2({}, parseQueryString(query)), {}, {
+      const queryParams = { ...parseQueryString(query),
         dpr,
         subavatarSizeString
-      });
-
-      subavatarSrc = encodeURL(urlStart, queryParams);
+      };
+      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", _extends({}, restProps, {
         onError: this.handleError,
         onLoad: this.handleSuccess,
@@ -141,7 +146,9 @@ _defineProperty(Avatar, "propTypes", {
   url: PropTypes.string,
   round: PropTypes.bool,
   subavatar: PropTypes.string,
-  subavatarSize: PropTypes.number
+  subavatarSize: PropTypes.number,
+  username: PropTypes.string,
+  skipParams: PropTypes.bool
 });
 
 _defineProperty(Avatar, "defaultProps", {
@@ -151,5 +158,4 @@ _defineProperty(Avatar, "defaultProps", {
   style: {}
 });
 
-export default Avatar;
-export { Size };
+export { Size, Avatar as default };

package/dist/avatar/fallback-avatar.js

@@ -0,0 +1,141 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import getUID from '../global/get-uid.js';
+
+const colorPairs = [['#60A800', '#D5CA00'], ['#21D370', '#03E9E1'], ['#3BA1FF', '#36E97D'], ['#00C243', '#00FFFF'], ['#4BE098', '#627FFF'], ['#168BFA', '#26F7C7'], ['#9D4CFF', '#39D3C3'], ['#0A81F6', '#0ACFF6'], ['#765AF8', '#5A91F8'], ['#9E54FF', '#0ACFF6'], ['#B345F1', '#669DFF'], ['#765AF8', '#C059EE'], ['#9039D0', '#C239D0'], ['#9F2AFF', '#FD56FD'], ['#AB3AF2', '#E40568'], ['#9F2AFF', '#E9A80B'], ['#D50F6B', '#E73AE8'], ['#ED5502', '#E73AE8'], ['#ED358C', '#DBED18'], ['#ED358C', '#F9902E'], ['#FF7500', '#FFCA00']];
+const Sizes = {
+  18: {
+    radius: 2,
+    text: {
+      x: 9,
+      y: 13
+    },
+    fontSize: '11px',
+    textAnchor: 'middle'
+  },
+  24: {
+    radius: 3,
+    text: {
+      x: 2,
+      y: 13
+    },
+    fontSize: '11px',
+    underscore: {
+      x: 3,
+      y: 17
+    }
+  },
+  32: {
+    radius: 3,
+    text: {
+      x: 3,
+      y: 17
+    },
+    fontSize: '13px',
+    letterSpacing: 1,
+    underscore: {
+      x: 4,
+      y: 22
+    }
+  },
+  40: {
+    radius: 3,
+    text: {
+      x: 5,
+      y: 19
+    },
+    fontSize: '15px',
+    letterSpacing: 1,
+    underscore: {
+      x: 6,
+      y: 28
+    }
+  }
+};
+const sizeKeys = Object.keys(Sizes).map(Number);
+
+function extractLetters(name) {
+  const names = name.split(/[\s._]+/).filter(Boolean);
+
+  if (names.length >= 2) {
+    return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+  } else if (names.length === 1) {
+    if (names[0].length >= 2) {
+      return names[0].slice(0, 2).toUpperCase();
+    } else {
+      return `${names[0][0].toUpperCase()}X`;
+    }
+  } else {
+    return 'XX';
+  }
+} // https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0#gistcomment-2775538
+
+
+const BASE = 32;
+
+function hashCode(s) {
+  let h = 0;
+
+  for (let i = 0; i < s.length; i++) {
+    h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+  }
+
+  return h;
+}
+
+function FallbackAvatar(_ref) {
+  let {
+    username,
+    size,
+    round
+  } = _ref;
+  const hash = Math.abs(hashCode(username.toLowerCase()));
+  const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
+  const possibleSizeKeys = sizeKeys.filter(key => key >= size);
+  const sizeKey = possibleSizeKeys.length > 0 ? Math.min(...possibleSizeKeys) : Math.max(...sizeKeys);
+  const sizes = Sizes[sizeKey];
+  const radius = round ? '50%' : sizes.radius;
+  const gradientId = useMemo(() => getUID('gradient-'), []);
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: `0 0 ${sizeKey} ${sizeKey}`,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: gradientId,
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "1"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: fromColor,
+    offset: "0"
+  }), /*#__PURE__*/React.createElement("stop", {
+    stopColor: toColor,
+    offset: "1"
+  }))), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
+    fill: `url(#${gradientId})`,
+    x: "0",
+    y: "0",
+    width: sizeKey,
+    height: sizeKey,
+    rx: radius,
+    ry: radius
+  }), /*#__PURE__*/React.createElement("text", {
+    x: sizes.text.x,
+    y: sizes.text.y,
+    fontFamily: "Arial, Helvetica, sans-serif",
+    fontSize: sizes.fontSize,
+    letterSpacing: sizes.letterSpacing,
+    fill: "#FFFFFF",
+    textAnchor: sizes.textAnchor
+  }, /*#__PURE__*/React.createElement("tspan", null, extractLetters(username)), sizes.underscore && /*#__PURE__*/React.createElement("tspan", {
+    x: sizes.underscore.x,
+    y: sizes.underscore.y
+  }, '_'))));
+}
+FallbackAvatar.propTypes = {
+  username: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  round: PropTypes.bool
+};
+
+export { FallbackAvatar as default };