@jetbrains/ring-ui 4.1.1 → 4.1.2

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

@@ -0,0 +1,134 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import '../island/island.js';
+import Dialog from '../dialog/dialog.js';
+import Button from '../button/button.js';
+import { H2 } from '../heading/heading.js';
+import ContentWrapper from '../island/content.js';
+import '../global/data-tests.js';
+import '../island/adaptive-island-hoc.js';
+import '../global/linear-function.js';
+import '../_helpers/island.js';
+import '../island/header.js';
+import 'react-dom';
+import '@jetbrains/icons/close';
+import '../global/get-uid.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../tab-trap/tab-trap.js';
+import '../global/dom.js';
+import '../popup/popup.target.js';
+import '../_helpers/dialog__body-scroll-preventer.js';
+import 'scrollbar-width';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+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 '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import 'element-resize-detector';
+import '../global/schedule-raf.js';
+
+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
+ */
+
+class AuthDialog extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "onEscPress", () => {
+      if (this.props.cancelOnEsc) {
+        this.props.onCancel();
+      }
+    });
+  }
+
+  render() {
+    const {
+      show,
+      className,
+      errorMessage,
+      serviceImage,
+      serviceName,
+      loginCaption,
+      loginToCaption,
+      confirmLabel,
+      cancelLabel,
+      onConfirm,
+      onCancel
+    } = this.props;
+    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),
+      onEscPress: this.onEscPress,
+      show: show,
+      trapFocus: true
+    }, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement("div", {
+      className: modules_ae521deb.content
+    }, serviceImage && /*#__PURE__*/React.createElement("img", {
+      alt: `${serviceName} logo`,
+      className: modules_ae521deb.logo,
+      src: serviceImage
+    }), /*#__PURE__*/React.createElement(H2, {
+      className: modules_ae521deb.title
+    }, title), errorMessage && /*#__PURE__*/React.createElement("div", {
+      className: modules_ae521deb.error
+    }, errorMessage), /*#__PURE__*/React.createElement(Button, {
+      primary: true,
+      className: modules_ae521deb.firstButton,
+      "data-test": "auth-dialog-confirm-button",
+      onClick: onConfirm
+    }, confirmLabel), /*#__PURE__*/React.createElement(Button, {
+      className: modules_ae521deb.button,
+      "data-test": "auth-dialog-cancel-button",
+      onClick: onCancel
+    }, cancelLabel))));
+  }
+
+}
+
+_defineProperty(AuthDialog, "propTypes", {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  errorMessage: PropTypes.string,
+  serviceImage: PropTypes.string,
+  serviceName: PropTypes.string,
+  loginCaption: PropTypes.string,
+  loginToCaption: PropTypes.string,
+  show: PropTypes.bool,
+  cancelOnEsc: PropTypes.bool,
+  confirmLabel: PropTypes.string,
+  cancelLabel: PropTypes.string,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func
+});
+
+_defineProperty(AuthDialog, "defaultProps", {
+  loginCaption: 'Log in',
+  loginToCaption: 'Log in to %serviceName%',
+  show: false,
+  cancelOnEsc: true,
+  confirmLabel: 'Log in',
+  cancelLabel: 'Remain a guest',
+  onConfirm: () => {},
+  onCancel: () => {}
+});
+
+export { AuthDialog as default };

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

@@ -0,0 +1,68 @@
+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';
+import '../global/data-tests.js';
+import '../island/adaptive-island-hoc.js';
+import '../global/linear-function.js';
+import '../_helpers/island.js';
+import '../island/header.js';
+import '../island/content.js';
+import 'element-resize-detector';
+import '../global/schedule-raf.js';
+import '../dialog/dialog.js';
+import '@jetbrains/icons/close';
+import '../global/get-uid.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../tab-trap/tab-trap.js';
+import '../global/dom.js';
+import '../button/button.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+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 '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../popup/popup.target.js';
+import '../_helpers/dialog__body-scroll-preventer.js';
+import 'scrollbar-width';
+import '../heading/heading.js';
+
+/**
+ * @name Auth Dialog Service
+ */
+
+const containerElement = document.createElement('div');
+/**
+ * Renders AuthDialog into virtual node to skip maintaining container
+ */
+
+function renderAuthDialog(props) {
+  render( /*#__PURE__*/React.createElement(AuthDialog, props), containerElement);
+}
+
+function showAuthDialog() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  renderAuthDialog({ ...props,
+    show: true
+  });
+  return () => {
+    renderAuthDialog({
+      show: false
+    });
+  };
+}
+
+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-example-datauri.js

@@ -0,0 +1,26 @@
+// Taken from https://hub.jetbrains.com/api/rest/avatar/default?username=Jet%20Brains&dpr=2&size=56
+const avatarDataUri = `data:image/svg+xml,${encodeURIComponent(`
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
+            <stop stop-color="#D50F6B" offset="0"/>
+            <stop stop-color="#E73AE8" offset="1"/>
+        </linearGradient>
+    </defs>
+    <g>
+        <rect fill="url(#gradient)"
+              x="0" y="0" width="40" height="40"
+              rx="3" ry="3"/>
+        <text x="5" y="19"
+              font-family="Arial, Helvetica, sans-serif"
+              font-size="15px"
+              letter-spacing="1"
+              fill="#FFFFFF">
+            <tspan>JB</tspan>
+            <tspan x="6" y="28">_</tspan>
+        </text>
+    </g>
+</svg>
+`)}`;
+
+export { avatarDataUri };

package/dist/avatar/avatar.js

@@ -0,0 +1,161 @@
+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_rui_0937","subavatar":"subavatar_rui_0937","empty":"empty_rui_0937"};
+
+/**
+ * @name Avatar
+ */
+
+const Size = {
+  Size18: 18,
+  Size20: 20,
+  Size24: 24,
+  Size28: 28,
+  Size32: 32,
+  Size40: 40,
+  Size48: 48,
+  Size56: 56
+};
+class Avatar extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      errorUrl: ''
+    });
+
+    _defineProperty(this, "handleError", () => {
+      this.setState({
+        errorUrl: this.props.url
+      });
+    });
+
+    _defineProperty(this, "handleSuccess", () => {
+      this.setState({
+        errorUrl: ''
+      });
+    });
+  }
+
+  render() {
+    const {
+      size,
+      url,
+      dpr,
+      style,
+      round,
+      subavatar,
+      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 = {
+      borderRadius: round ? '50%' : borderRadius,
+      height: sizeString,
+      width: sizeString,
+      ...style
+    };
+    const styleObjGroup = {
+      borderRadius: '2px',
+      height: subavatarSizeString,
+      width: subavatarSizeString,
+      ...style
+    };
+
+    if (!url || this.state.errorUrl === url) {
+      return /*#__PURE__*/React.createElement("span", _extends({}, restProps, {
+        "data-test": "avatar",
+        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 (!skipParams && !isDataURI(url)) {
+      const [urlStart, query] = url.split('?');
+      const queryParams = { ...parseQueryString(query),
+        dpr,
+        size
+      };
+      src = encodeURL(urlStart, queryParams);
+    }
+
+    let subavatarSrc = null;
+
+    if (subavatar && !isDataURI(subavatar)) {
+      const [urlStart, query] = subavatar.split('?');
+      const queryParams = { ...parseQueryString(query),
+        dpr,
+        subavatarSizeString
+      };
+      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", _extends({}, restProps, {
+        onError: this.handleError,
+        onLoad: this.handleSuccess,
+        className: classNames(modules_61ca8c75.avatar, this.props.className),
+        style: styleObj,
+        src: src,
+        alt: "User avatar"
+      })), /*#__PURE__*/React.createElement("img", _extends({}, restProps, {
+        "data-test": "avatar",
+        onError: this.handleError,
+        onLoad: this.handleSuccess,
+        className: classNames(modules_61ca8c75.subavatar),
+        style: styleObjGroup,
+        src: subavatarSrc,
+        alt: "Subavatar"
+      })));
+    } else {
+      return /*#__PURE__*/React.createElement("img", _extends({}, restProps, {
+        "data-test": "avatar",
+        onError: this.handleError,
+        onLoad: this.handleSuccess,
+        className: classNames(modules_61ca8c75.avatar, this.props.className),
+        style: styleObj,
+        src: src,
+        alt: "User avatar"
+      }));
+    }
+  }
+
+}
+
+_defineProperty(Avatar, "propTypes", {
+  dpr: PropTypes.number,
+  className: PropTypes.string,
+  size: PropTypes.number,
+  style: PropTypes.object,
+  url: PropTypes.string,
+  round: PropTypes.bool,
+  subavatar: PropTypes.string,
+  subavatarSize: PropTypes.number,
+  username: PropTypes.string,
+  skipParams: PropTypes.bool
+});
+
+_defineProperty(Avatar, "defaultProps", {
+  dpr: getPixelRatio(),
+  size: Size.Size20,
+  subavatarSize: Size.Size20 / 2,
+  style: {}
+});
+
+export { Size, Avatar as default };