@jetbrains/ring-ui-built 7.0.65 → 7.0.70

package/components/loader/loader-core.js

@@ -1,265 +1,2 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.regexp.exec.js';
-import { getPixelRatio } from '../global/dom.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-
-var styles = {"canvas":"ring-loader-canvas","animate":"ring-loader-animate","rotation-keyframes":"ring-loader-rotation-keyframes","text":"ring-loader-text"};
-
-const INITIAL_TICKS = 100;
-class Particle {
-  constructor(_ref) {
-    let {
-      x,
-      y,
-      radius,
-      color
-    } = _ref;
-    _defineProperty(this, "radius", void 0);
-    _defineProperty(this, "x", void 0);
-    _defineProperty(this, "y", void 0);
-    _defineProperty(this, "color", void 0);
-    _defineProperty(this, "decay", void 0);
-    _defineProperty(this, "life", void 0);
-    this.radius = radius;
-    this.x = x;
-    this.y = y;
-    this.color = color;
-    this.decay = 0.01;
-    this.life = 1;
-  }
-  step() {
-    this.life -= this.decay;
-  }
-  isAlive() {
-    return this.life >= 0;
-  }
-  draw(ctx) {
-    const alpha = this.life >= 0 ? this.life : 0;
-    ctx.fillStyle = "rgba(".concat(this.color.r, ", ").concat(this.color.g, ", ").concat(this.color.b, ", ").concat(alpha, ")");
-    ctx.beginPath();
-    ctx.arc(this.x + this.radius, this.y + this.radius, this.radius, 0, Math.PI * 2);
-    ctx.fill();
-  }
-}
-const DETERMINISTIC_VALUE = 0.5;
-function deterministic() {
-  return DETERMINISTIC_VALUE;
-}
-class LoaderCore {
-  static calculateGradient(startColor, stopColor, position) {
-    const calculateChannelValue = (a, b) => a + Math.round((b - a) * position);
-    return {
-      r: calculateChannelValue(startColor.r, stopColor.r),
-      g: calculateChannelValue(startColor.g, stopColor.g),
-      b: calculateChannelValue(startColor.b, stopColor.b)
-    };
-  }
-  constructor(containerNode, props) {
-    var _this$ctx;
-    _defineProperty(this, "props", void 0);
-    _defineProperty(this, "canvas", void 0);
-    _defineProperty(this, "textNode", void 0);
-    _defineProperty(this, "ctx", void 0);
-    _defineProperty(this, "height", void 0);
-    _defineProperty(this, "width", void 0);
-    _defineProperty(this, "particles", void 0);
-    _defineProperty(this, "baseSpeed", void 0);
-    _defineProperty(this, "colorIndex", void 0);
-    _defineProperty(this, "maxRadius", void 0);
-    _defineProperty(this, "minRadius", void 0);
-    _defineProperty(this, "colorChangeTick", void 0);
-    _defineProperty(this, "x", void 0);
-    _defineProperty(this, "y", void 0);
-    _defineProperty(this, "radius", void 0);
-    _defineProperty(this, "hSpeed", void 0);
-    _defineProperty(this, "vSpeed", void 0);
-    _defineProperty(this, "radiusSpeed", void 0);
-    _defineProperty(this, "tick", void 0);
-    _defineProperty(this, "isRunning", void 0);
-    this.props = Object.assign({}, LoaderCore.defaultProps, props);
-    this.canvas = document.createElement('canvas');
-    this.canvas.dataset.test = 'ring-loader';
-    this.canvas.classList.add(styles.canvas);
-    this.textNode = document.createElement('div');
-    this.textNode.dataset.test = 'ring-loader-text';
-    this.textNode.classList.add(styles.text);
-    this.textNode.textContent = this.props.message ? this.props.message : '';
-    containerNode.appendChild(this.canvas);
-    containerNode.appendChild(this.textNode);
-    const pixelRatio = LoaderCore.getPixelRatio();
-    const canvasSize = this.props.size * pixelRatio;
-    this.canvas.width = canvasSize;
-    this.canvas.height = canvasSize;
-    //Fixate canvas physical size to avoid real size scaling
-    this.canvas.style.width = "".concat(this.props.size, "px");
-    this.canvas.style.height = "".concat(this.props.size, "px");
-    this.ctx = this.canvas.getContext('2d');
-    (_this$ctx = this.ctx) === null || _this$ctx === void 0 || _this$ctx.scale(pixelRatio, pixelRatio);
-    this.height = this.props.size;
-    this.width = this.props.size;
-    this.particles = [];
-    //Configuration
-    this.baseSpeed = 1.0;
-    this.colorIndex = 0;
-    this.maxRadius = 10;
-    this.minRadius = 6;
-    this.colorChangeTick = 40;
-    //State
-    this.x = 0;
-    this.y = 0;
-    this.radius = 8;
-    this.hSpeed = 1.5;
-    this.vSpeed = 0.5;
-    this.radiusSpeed = 0.05;
-    this.tick = 0;
-    this.prepareInitialState(INITIAL_TICKS);
-    this.isRunning = !this.props.stop;
-    if (this.isRunning) {
-      this.startAnimation();
-    } else {
-      this.draw();
-    }
-  }
-  static getPixelRatio() {
-    return getPixelRatio();
-  }
-  prepareInitialState(ticks) {
-    for (let i = 0; i < ticks; i++) {
-      this.step();
-    }
-  }
-  handleLimits(coord, radius, speed, limit) {
-    const randomFunc = this.props.deterministic ? deterministic : Math.random;
-    const randomizedSpeedChange = randomFunc() - this.baseSpeed / 2;
-    if (coord + radius * 2 + this.baseSpeed >= limit) {
-      return -(this.baseSpeed + randomizedSpeedChange);
-    }
-    if (coord <= this.baseSpeed) {
-      return this.baseSpeed + randomizedSpeedChange;
-    }
-    return speed;
-  }
-  calculateNextCoordinates() {
-    this.x += this.hSpeed;
-    this.y += this.vSpeed;
-    this.hSpeed = this.handleLimits(this.x, this.radius, this.hSpeed, this.width);
-    this.vSpeed = this.handleLimits(this.y, this.radius, this.vSpeed, this.height);
-  }
-  calculateNextRadius() {
-    this.radius += this.radiusSpeed;
-    if (this.radius > this.maxRadius || this.radius < this.minRadius) {
-      this.radiusSpeed = -this.radiusSpeed;
-    }
-  }
-  getNextColor() {
-    const colors = this.props.colors;
-    const currentColor = colors[this.colorIndex];
-    const nextColor = colors[this.colorIndex + 1] || colors[0];
-    return LoaderCore.calculateGradient(currentColor, nextColor, this.tick / this.colorChangeTick);
-  }
-  nextTick() {
-    this.tick++;
-    if (this.tick > this.colorChangeTick) {
-      this.tick = 0;
-      this.colorIndex++;
-      if (this.colorIndex > this.props.colors.length - 1) {
-        this.colorIndex = 0;
-      }
-    }
-  }
-  step() {
-    this.nextTick();
-    this.calculateNextCoordinates();
-    this.calculateNextRadius();
-    this.particles.forEach(particle => particle.step());
-    this.particles.push(new Particle({
-      x: this.x,
-      y: this.y,
-      radius: this.radius,
-      color: this.getNextColor()
-    }));
-  }
-  removeDeadParticles() {
-    this.particles = this.particles.filter(it => it.isAlive());
-  }
-  draw() {
-    const ctx = this.ctx;
-    if (ctx === null) {
-      return;
-    }
-    ctx.clearRect(0, 0, this.width, this.height);
-    this.removeDeadParticles();
-    this.particles.forEach(particle => particle.draw(ctx));
-  }
-  loop() {
-    this.step();
-    this.draw();
-    if (this.isRunning) {
-      window.requestAnimationFrame(() => this.loop());
-    }
-  }
-  updateMessage(text) {
-    this.textNode.textContent = text || '';
-  }
-  stopAnimation() {
-    this.isRunning = false;
-    this.canvas.classList.remove(styles.animate);
-  }
-  startAnimation() {
-    this.isRunning = true;
-    this.canvas.classList.add(styles.animate);
-    this.loop();
-  }
-  destroy() {
-    this.isRunning = false;
-  }
-}
-_defineProperty(LoaderCore, "defaultProps", {
-  size: 64,
-  stop: false,
-  deterministic: false,
-  colors: [{
-    r: 215,
-    g: 60,
-    b: 234
-  },
-  //#D73CEA
-  {
-    r: 145,
-    g: 53,
-    b: 224
-  },
-  //#9135E0
-  {
-    r: 88,
-    g: 72,
-    b: 224
-  },
-  //#5848F4
-  {
-    r: 37,
-    g: 183,
-    b: 255
-  },
-  //#25B7FF
-  {
-    r: 89,
-    g: 189,
-    b: 0
-  },
-  //#59BD00
-  {
-    r: 251,
-    g: 172,
-    b: 2
-  },
-  //#FBAC02
-  {
-    r: 227,
-    g: 37,
-    b: 129
-  } //#E32581
-  ]
-});
-
-export { LoaderCore as default };
+import '../global/dom.js';
+export { L as default } from '../_helpers/loader-core.js';

package/components/loader/loader.d.ts

@@ -1,7 +1,15 @@
 import { type HTMLAttributes, PureComponent } from 'react';
 import LoaderCore, { type LoaderCoreProps } from './loader-core';
+declare module 'csstype' {
+    interface Properties {
+        '--ring-loader-color-1'?: string;
+        '--ring-loader-color-2'?: string;
+        '--ring-loader-color-3'?: string;
+    }
+}
 export interface LoaderProps extends Partial<LoaderCoreProps>, HTMLAttributes<HTMLElement> {
     'data-test'?: string | null | undefined;
+    squares?: boolean;
 }
 /**
  * @name Loader

package/components/loader/loader.js

@@ -1,12 +1,9 @@
-import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
-import LoaderCore from './loader-core.js';
-import 'core-js/modules/es.regexp.exec.js';
+import classNames from 'classnames';
+import { L as LoaderCore, s as styles } from '../_helpers/loader-core.js';
 import '../global/dom.js';
 
-const _excluded = ["message", "size", "colors", "data-test", "stop", "deterministic"];
 /**
  * @name Loader
  */
@@ -14,15 +11,6 @@ const _excluded = ["message", "size", "colors", "data-test", "stop", "determinis
  * Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.
  */
 class Loader extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "loader", void 0);
-    _defineProperty(this, "initLoader", el => {
-      if (el) {
-        this.loader = new LoaderCore(el, this.props);
-      }
-    });
-  }
   componentDidUpdate(prevProps) {
     if (this.loader) {
       if (!prevProps.stop && this.props.stop) {
@@ -33,23 +21,49 @@ class Loader extends PureComponent {
     }
   }
   componentWillUnmount() {
-    var _this$loader;
-    (_this$loader = this.loader) === null || _this$loader === void 0 || _this$loader.destroy();
+    this.loader?.destroy();
   }
+  loader;
+  initLoader = el => {
+    if (el) {
+      this.loader = new LoaderCore(el, this.props);
+    }
+  };
   render() {
-    const _this$props = this.props,
-      {
-        message,
-        size,
-        colors,
-        'data-test': dataTest,
-        stop,
-        deterministic
-      } = _this$props,
-      restProps = _objectWithoutProperties(_this$props, _excluded);
-    return jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
+    const {
+      message,
+      size,
+      colors,
+      'data-test': dataTest,
+      stop,
+      deterministic,
+      squares,
+      ...restProps
+    } = this.props;
+    return squares ? jsxs("div", {
+      ...restProps,
+      children: [jsxs("div", {
+        className: classNames(styles.canvas, styles.squares),
+        style: {
+          '--ring-loader-color-1': colors?.[0] ? `rgb(${colors[0].r}, ${colors[0].g}, ${colors[0].b})` : undefined,
+          '--ring-loader-color-2': colors?.[1] ? `rgb(${colors[1].r}, ${colors[1].g}, ${colors[1].b})` : undefined,
+          '--ring-loader-color-3': colors?.[2] ? `rgb(${colors[2].r}, ${colors[2].g}, ${colors[2].b})` : undefined
+        },
+        children: [jsx("div", {
+          className: classNames(styles.square, styles.outer)
+        }), jsx("div", {
+          className: classNames(styles.square, styles.middle)
+        }), jsx("div", {
+          className: classNames(styles.square, styles.inner)
+        })]
+      }), message && jsx("div", {
+        className: styles.text,
+        children: message
+      })]
+    }) : jsx("div", {
+      ...restProps,
       ref: this.initLoader
-    }));
+    });
   }
 }
 

package/components/loader-inline/loader-inline.js

@@ -1,30 +1,27 @@
-import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 
 var styles = {"loader":"ring-loader-inline-loader","spin":"ring-loader-inline-spin","pulse":"ring-loader-inline-pulse","children":"ring-loader-inline-children"};
 
-const _excluded = ["className", "data-test", "children"];
 /**
  * @name Loader Inline
  */
 class LoaderInline extends PureComponent {
   render() {
-    const _this$props = this.props,
-      {
-        className,
-        'data-test': dataTest,
-        children
-      } = _this$props,
-      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      className,
+      'data-test': dataTest,
+      children,
+      ...restProps
+    } = this.props;
     const classes = classNames(styles.loader, className);
-    const loader = jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
+    const loader = jsx("div", {
+      ...restProps,
       "data-test": joinDataTestAttributes('ring-loader-inline', dataTest),
       className: classes
-    }));
+    });
     return children ? jsxs(Fragment, {
       children: [loader, jsx("span", {
         className: styles.children,

package/components/loader-screen/loader-screen.js

@@ -1,38 +1,34 @@
-import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import Loader from '../loader/loader.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import '../loader/loader-core.js';
-import 'core-js/modules/es.regexp.exec.js';
+import '../_helpers/loader-core.js';
 import '../global/dom.js';
 
 var styles = {"loaderScreen":"ring-loader-screen-loaderScreen","loader":"ring-loader-screen-loader","loaderWithoutSpacing":"ring-loader-screen-loaderWithoutSpacing"};
 
-const _excluded = ["message", "className", "containerClassName"];
 /**
  * @name Loader Screen
  */
 class LoaderScreen extends PureComponent {
   render() {
-    const _this$props = this.props,
-      {
-        message,
-        className,
-        containerClassName
-      } = _this$props,
-      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      message,
+      className,
+      containerClassName,
+      ...restProps
+    } = this.props;
     const containerClasses = classNames(containerClassName, styles.loaderScreen);
     const loaderClasses = classNames(className, styles.loader, {
       [styles.loaderWithoutSpacing]: !message
     });
     return jsx("div", {
       className: containerClasses,
-      children: jsx(Loader, _objectSpread2(_objectSpread2({}, restProps), {}, {
+      children: jsx(Loader, {
+        ...restProps,
         message: message,
         className: loaderClasses
-      }))
+      })
     });
   }
 }

package/components/login-dialog/login-dialog.js

@@ -1,11 +1,8 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import Dialog from '../dialog/dialog.js';
 import 'classnames';
 import '../_helpers/island.js';
-import '../island/header.js';
 import ContentWrapper from '../island/content.js';
 import LoaderScreen from '../loader-screen/loader-screen.js';
 import { HUB_AUTH_PAGE_OPENED } from '../auth/background-flow.js';
@@ -15,12 +12,12 @@ import '../island/island.js';
 import '../global/data-tests.js';
 import '../island/adaptive-island-hoc.js';
 import '../global/linear-function.js';
+import '../island/header.js';
 import 'element-resize-detector';
 import '../global/schedule-raf.js';
 import '../global/get-uid.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.regexp.exec.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
@@ -33,7 +30,6 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
@@ -42,13 +38,12 @@ import '../_helpers/button.classes.js';
 import '../popup/popup.target.js';
 import '../popup/popup.js';
 import '../popup/position.js';
-import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/position-css.js';
 import '../_helpers/dialog-body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader/loader.js';
-import '../loader/loader-core.js';
+import '../_helpers/loader-core.js';
 import '../auth/response-parser.js';
 import '../global/url.js';
 
@@ -63,47 +58,19 @@ const DEFAULT_SHOW_FALLBACK_TIMEOUT = 5000;
  * @name Login Dialog
  */
 class LoginDialog extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      loading: true,
-      loggingIn: false,
-      showFallbackLink: false,
-      height: DEFAULT_HEIGHT,
-      width: DEFAULT_WIDTH
-    });
-    _defineProperty(this, "showFallbackTimout", void 0);
-    _defineProperty(this, "onMessage", event => {
-      const {
-        data
-      } = event;
-      if (!data) {
-        return;
-      }
-      if (data === HUB_AUTH_PAGE_OPENED) {
-        clearTimeout(this.showFallbackTimout);
-        this.setState({
-          loading: false,
-          loggingIn: false
-        });
-        return;
-      }
-      if (data === HUB_AUTH_PAGE_LOGIN_STARTED) {
-        this.setState({
-          loading: true,
-          loggingIn: true
-        });
-        this.startFallbackCountdown();
-        return;
-      }
-      if (data.message === HUB_AUTH_PAGE_LOGIN_DIMENSIONS) {
-        this.setState({
-          height: data.height,
-          width: data.width
-        });
-      }
-    });
-  }
+  static defaultProps = {
+    show: false,
+    url: 'about:blank',
+    renderFallbackLink: () => null,
+    showFallbackTimeout: DEFAULT_SHOW_FALLBACK_TIMEOUT
+  };
+  state = {
+    loading: true,
+    loggingIn: false,
+    showFallbackLink: false,
+    height: DEFAULT_HEIGHT,
+    width: DEFAULT_WIDTH
+  };
   componentDidMount() {
     window.addEventListener('message', this.onMessage);
     this.startFallbackCountdown();
@@ -111,11 +78,42 @@ class LoginDialog extends Component {
   componentWillUnmount() {
     window.removeEventListener('message', this.onMessage);
   }
+  showFallbackTimout;
   startFallbackCountdown() {
     this.showFallbackTimout = window.setTimeout(() => this.setState({
       showFallbackLink: true
     }), this.props.showFallbackTimeout);
   }
+  onMessage = event => {
+    const {
+      data
+    } = event;
+    if (!data) {
+      return;
+    }
+    if (data === HUB_AUTH_PAGE_OPENED) {
+      clearTimeout(this.showFallbackTimout);
+      this.setState({
+        loading: false,
+        loggingIn: false
+      });
+      return;
+    }
+    if (data === HUB_AUTH_PAGE_LOGIN_STARTED) {
+      this.setState({
+        loading: true,
+        loggingIn: true
+      });
+      this.startFallbackCountdown();
+      return;
+    }
+    if (data.message === HUB_AUTH_PAGE_LOGIN_DIMENSIONS) {
+      this.setState({
+        height: data.height,
+        width: data.width
+      });
+    }
+  };
   render() {
     const {
       show,
@@ -163,11 +161,5 @@ class LoginDialog extends Component {
     });
   }
 }
-_defineProperty(LoginDialog, "defaultProps", {
-  show: false,
-  url: 'about:blank',
-  renderFallbackLink: () => null,
-  showFallbackTimeout: DEFAULT_SHOW_FALLBACK_TIMEOUT
-});
 
 export { LoginDialog as default };