@jetbrains/ring-ui 4.1.20 → 4.1.24

package/components/auth/auth__core.js

@@ -818,12 +818,17 @@ export default class Auth {
   }
 
   _checkBackendsAreUp() {
+    const abortCtrl = new AbortController();
     const {backendCheckTimeout} = this.config;
+
     return Promise.all([
       promiseWithTimeout(
-        this.http.fetch('settings/public?fields=id'),
+        this.http.fetch('settings/public?fields=id', {signal: abortCtrl.signal}),
         backendCheckTimeout,
-        {error: new Error('The authorization server is taking too long to respond. Please try again later.')}
+        {
+          error: new Error('The authorization server is taking too long to respond. Please try again later.'),
+          onTimeout: () => abortCtrl.abort()
+        }
       ),
       this.config.checkBackendIsUp()
     ]).catch(err => {

package/components/global/promise-with-timeout.js

@@ -1,9 +1,12 @@
 // Useful for using fetch with timeout
 // https://github.com/github/fetch/issues/175#issuecomment-284787564
 
-export default function promiseWithTimeout(promise, timeout, {error}) {
+export default function promiseWithTimeout(promise, timeout, {error, onTimeout = () => {}}) {
   return new Promise((resolve, reject) => {
-    setTimeout(() => reject(error || new Error('Timeout')), timeout);
+    setTimeout(() => {
+      onTimeout();
+      reject(error || new Error('Timeout'));
+    }, timeout);
 
     promise.then(resolve, reject);
   });

package/components/island/content.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {forwardRef, Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
@@ -129,13 +129,15 @@ class Content extends Component {
   }
 }
 
-const ContentWrapper = props => (
+const ContentWrapper = forwardRef((props, ref) => (
   <ScrollHandlerContext.Consumer>
     {onScroll => {
       const addProps = onScroll != null ? {onScroll, bottomBorder: true} : {};
-      return <Content {...props} {...addProps}/>;
+      return <Content {...props} {...addProps} ref={ref}/>;
     }}
   </ScrollHandlerContext.Consumer>
-);
+));
+
+ContentWrapper.displayName = 'ContentWrapper';
 
 export default ContentWrapper;

package/components/list/list.js

@@ -31,9 +31,6 @@ import {DEFAULT_ITEM_TYPE, Dimension, Type} from './consts';
 
 import styles from './list.css';
 
-const scheduleScrollListener = scheduleRAF();
-const scheduleHoverListener = scheduleRAF();
-
 function noop() {}
 
 const warnEmptyKey = deprecate(
@@ -122,6 +119,12 @@ export default class List extends Component {
     ariaLabel: 'List'
   };
 
+  constructor(...args) {
+    super(...args);
+    this.scheduleScrollListener = scheduleRAF();
+    this.scheduleHoverListener = scheduleRAF();
+  }
+
   state = {
     activeIndex: null,
     prevActiveIndex: null,
@@ -220,7 +223,7 @@ export default class List extends Component {
   };
 
   hoverHandler = memoize(index => () =>
-    scheduleHoverListener(() => {
+    this.scheduleHoverListener(() => {
       if (this.state.disabledHover) {
         return;
       }
@@ -429,7 +432,7 @@ export default class List extends Component {
     return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
   }
 
-  scrollEndHandler = () => scheduleScrollListener(() => {
+  scrollEndHandler = () => this.scheduleScrollListener(() => {
     const innerContainer = this.inner;
     if (innerContainer) {
       const maxScrollingPosition = innerContainer.scrollHeight;

package/components/popup/popup.js

@@ -59,6 +59,7 @@ export default class Popup extends PureComponent {
 
     directions: PropTypes.arrayOf(PropTypes.string),
     autoPositioning: PropTypes.bool,
+    autoPositioningOnScroll: PropTypes.bool,
     autoCorrectTopOverflow: PropTypes.bool,
     left: PropTypes.number,
     top: PropTypes.number,
@@ -91,6 +92,7 @@ export default class Popup extends PureComponent {
 
     directions: DEFAULT_DIRECTIONS,
     autoPositioning: true,
+    autoPositioningOnScroll: true,
     autoCorrectTopOverflow: true,
     left: 0,
     top: 0,
@@ -250,7 +252,9 @@ export default class Popup extends PureComponent {
       setTimeout(() => {
         this._listenersEnabled = true;
         this.listeners.add(window, 'resize', this._redraw);
-        this.listeners.add(window, 'scroll', 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) {

package/components/select/select.css

@@ -69,6 +69,9 @@
 .selectedIcon {
   composes: resetButton from "../global/global.css";
 
+  position: relative;
+  top: 3px;
+
   display: inline-block;
 
   width: calc(2 * unit);

package/components/select/select.js

@@ -264,6 +264,7 @@ export default class Select extends Component {
     disabled: PropTypes.bool,
     hideSelected: PropTypes.bool,
     label: PropTypes.string,
+    renderBottomToolbar: PropTypes.func,
     selectedLabel: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.node),
@@ -667,9 +668,9 @@ export default class Select extends Component {
   };
 
   getToolbar() {
-    const {hint} = this.props;
+    const {hint, renderBottomToolbar} = this.props;
     const {prefix, label, delayed} = this.state.addButton || {};
-    const isToolbarHasElements = this.state.addButton || hint;
+    const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
     if (!isToolbarHasElements) {
       return null;
     }
@@ -677,10 +678,11 @@ export default class Select extends Component {
     return (
       <div
         className={classNames({
-          [styles.toolbar]: !!this.state.addButton
+          [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
         })}
         data-test="ring-select-toolbar"
       >
+        {renderBottomToolbar && renderBottomToolbar()}
         {this.state.addButton && (
           <Button
             text

package/dist/auth/auth__core.js

@@ -951,11 +951,15 @@ class Auth {
   }
 
   _checkBackendsAreUp() {
+    const abortCtrl = new AbortController();
     const {
       backendCheckTimeout
     } = this.config;
-    return Promise.all([promiseWithTimeout(this.http.fetch('settings/public?fields=id'), backendCheckTimeout, {
-      error: new Error('The authorization server is taking too long to respond. Please try again later.')
+    return Promise.all([promiseWithTimeout(this.http.fetch('settings/public?fields=id', {
+      signal: abortCtrl.signal
+    }), backendCheckTimeout, {
+      error: new Error('The authorization server is taking too long to respond. Please try again later.'),
+      onTimeout: () => abortCtrl.abort()
     }), this.config.checkBackendIsUp()]).catch(err => {
       if (err instanceof TypeError) {
         throw new TypeError('Could not connect to the server due to network error. Please check your connection and try again.');

package/dist/global/angular-component-factory.js

@@ -12,14 +12,14 @@ function getAngularComponentName(name) {
 }
 
 function createAngularComponent(Component) {
-  var _class, _temp;
+  var _class;
 
   const propKeys = Object.keys(Component.propTypes);
   const bindings = {};
   propKeys.forEach(key => {
     bindings[key] = '<';
   });
-  return _temp = _class = class AngularComponent extends RingAngularComponent {
+  return _class = class AngularComponent extends RingAngularComponent {
     $postLink() {
       const {
         $transclude
@@ -72,7 +72,7 @@ function createAngularComponent(Component) {
       }) : null), container);
     }
 
-  }, _defineProperty(_class, "$inject", ['$scope', '$element', '$transclude']), _defineProperty(_class, "bindings", bindings), _defineProperty(_class, "transclude", true), _temp;
+  }, _defineProperty(_class, "$inject", ['$scope', '$element', '$transclude']), _defineProperty(_class, "bindings", bindings), _defineProperty(_class, "transclude", true), _class;
 }
 
 function angularComponentFactory(Component, name) {

package/dist/global/focus-sensor-hoc.js

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import composeRefs from './composeRefs.js';
 
 function focusSensorHOC(ComposedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = class FocusSensor extends Component {
+  return _class = class FocusSensor extends Component {
     constructor() {
       super(...arguments);
 
@@ -140,7 +140,7 @@ function focusSensorHOC(ComposedComponent) {
     autofocus: false,
     onFocus: () => {},
     onBlur: () => {}
-  }), _temp;
+  }), _class;
 }
 
 export { focusSensorHOC as default };

package/dist/global/promise-with-timeout.js

@@ -2,10 +2,14 @@
 // https://github.com/github/fetch/issues/175#issuecomment-284787564
 function promiseWithTimeout(promise, timeout, _ref) {
   let {
-    error
+    error,
+    onTimeout = () => {}
   } = _ref;
   return new Promise((resolve, reject) => {
-    setTimeout(() => reject(error || new Error('Timeout')), timeout);
+    setTimeout(() => {
+      onTimeout();
+      reject(error || new Error('Timeout'));
+    }, timeout);
     promise.then(resolve, reject);
   });
 }

package/dist/island/adaptive-island-hoc.js

@@ -8,9 +8,9 @@ const TITLE_RESIZE_THRESHOLD = 36;
 const PhaseContext = /*#__PURE__*/createContext();
 const ScrollHandlerContext = /*#__PURE__*/createContext();
 function adaptiveIslandHOC(ComposedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = class AdaptiveIsland extends Component {
+  return _class = class AdaptiveIsland extends Component {
     constructor() {
       super(...arguments);
 
@@ -42,7 +42,7 @@ function adaptiveIslandHOC(ComposedComponent) {
       }, /*#__PURE__*/React.createElement(ComposedComponent, this.props)));
     }
 
-  }, _defineProperty(_class, "propTypes", ComposedComponent.propTypes), _temp;
+  }, _defineProperty(_class, "propTypes", ComposedComponent.propTypes), _class;
 }
 
 export { PhaseContext, ScrollHandlerContext, adaptiveIslandHOC as default };

package/dist/island/content.js

@@ -1,6 +1,6 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import React, { Component } from 'react';
+import React, { Component, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
@@ -146,12 +146,15 @@ _defineProperty(Content, "defaultProps", {
   onScrollToBottom: noop
 });
 
-const ContentWrapper = props => /*#__PURE__*/React.createElement(ScrollHandlerContext.Consumer, null, onScroll => {
+const ContentWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(ScrollHandlerContext.Consumer, null, onScroll => {
   const addProps = onScroll != null ? {
     onScroll,
     bottomBorder: true
   } : {};
-  return /*#__PURE__*/React.createElement(Content, _extends({}, props, addProps));
-});
+  return /*#__PURE__*/React.createElement(Content, _extends({}, props, addProps, {
+    ref: ref
+  }));
+}));
+ContentWrapper.displayName = 'ContentWrapper';
 
 export { ContentWrapper as default };

package/dist/link/link.js

@@ -35,10 +35,10 @@ const makeWrapText = memoize(innerClassName => {
   return WrapText;
 });
 function linkHOC(ComposedComponent) {
-  var _class, _temp;
+  var _class;
 
   const isCustom = typeof ComposedComponent !== 'string' && ComposedComponent !== ClickableLink;
-  return _temp = _class = class Link extends Component {
+  return _class = class Link extends Component {
     getChildren() {
       const {
         children,
@@ -108,7 +108,7 @@ function linkHOC(ComposedComponent) {
     href: PropTypes.string,
     onPlainLeftClick: PropTypes.func,
     onClick: PropTypes.func
-  }), _temp;
+  }), _class;
 }
 var Link = linkHOC(ClickableLink);
 

package/dist/list/list.js

@@ -46,9 +46,6 @@ import '../icon/icon__svg.js';
 import '../_helpers/checkbox.js';
 import '../global/get-event-key.js';
 
-const scheduleScrollListener = scheduleRAF();
-const scheduleHoverListener = scheduleRAF();
-
 function noop() {}
 
 const warnEmptyKey = deprecate(() => {}, 'No key passed for list item with non-string label. It is considered as a bad practice and has been deprecated, please provide a key.');
@@ -105,7 +102,7 @@ class List extends Component {
       scrolledToBottom: false
     });
 
-    _defineProperty(this, "hoverHandler", memoize(index => () => scheduleHoverListener(() => {
+    _defineProperty(this, "hoverHandler", memoize(index => () => this.scheduleHoverListener(() => {
       if (this.state.disabledHover) {
         return;
       }
@@ -291,7 +288,7 @@ class List extends Component {
       });
     });
 
-    _defineProperty(this, "scrollEndHandler", () => scheduleScrollListener(() => {
+    _defineProperty(this, "scrollEndHandler", () => this.scheduleScrollListener(() => {
       const innerContainer = this.inner;
 
       if (innerContainer) {
@@ -475,6 +472,9 @@ class List extends Component {
       'command+enter': this.enterHandler,
       'shift+enter': this.enterHandler
     });
+
+    this.scheduleScrollListener = scheduleRAF();
+    this.scheduleHoverListener = scheduleRAF();
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {

package/dist/popup/popup.js

@@ -213,7 +213,11 @@ class Popup extends PureComponent {
       setTimeout(() => {
         this._listenersEnabled = true;
         this.listeners.add(window, 'resize', this._redraw);
-        this.listeners.add(window, 'scroll', 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();
@@ -336,6 +340,7 @@ _defineProperty(Popup, "propTypes", {
   // true means that it's never used in SSR
   directions: PropTypes.arrayOf(PropTypes.string),
   autoPositioning: PropTypes.bool,
+  autoPositioningOnScroll: PropTypes.bool,
   autoCorrectTopOverflow: PropTypes.bool,
   left: PropTypes.number,
   top: PropTypes.number,
@@ -370,6 +375,7 @@ _defineProperty(Popup, "defaultProps", {
   keepMounted: false,
   directions: DEFAULT_DIRECTIONS,
   autoPositioning: true,
+  autoPositioningOnScroll: true,
   autoCorrectTopOverflow: true,
   left: 0,
   top: 0,

package/dist/select/select.js

@@ -899,14 +899,15 @@ class Select extends Component {
 
   getToolbar() {
     const {
-      hint
+      hint,
+      renderBottomToolbar
     } = this.props;
     const {
       prefix,
       label,
       delayed
     } = this.state.addButton || {};
-    const isToolbarHasElements = this.state.addButton || hint;
+    const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
 
     if (!isToolbarHasElements) {
       return null;
@@ -914,10 +915,10 @@ class Select extends Component {
 
     return /*#__PURE__*/React.createElement("div", {
       className: classNames({
-        [modules_9d0de074.toolbar]: !!this.state.addButton
+        [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
       }),
       "data-test": "ring-select-toolbar"
-    }, this.state.addButton && /*#__PURE__*/React.createElement(Button, {
+    }, renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/React.createElement(Button, {
       text: true,
       delayed: delayed,
       className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
@@ -1261,6 +1262,7 @@ _defineProperty(Select, "propTypes", {
   disabled: PropTypes.bool,
   hideSelected: PropTypes.bool,
   label: PropTypes.string,
+  renderBottomToolbar: PropTypes.func,
   selectedLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   inputPlaceholder: PropTypes.string,
   clear: PropTypes.bool,

package/dist/shortcuts/shortcuts-hoc.js

@@ -10,9 +10,9 @@ import '../global/sniffer.js';
 import 'sniffr';
 
 function shortcutsHOC(ComposedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = class WithShortcuts extends React.Component {
+  return _class = class WithShortcuts extends React.Component {
     constructor() {
       super(...arguments);
 
@@ -36,7 +36,7 @@ function shortcutsHOC(ComposedComponent) {
   }, _defineProperty(_class, "propTypes", {
     rgShortcutsOptions: PropTypes.object,
     rgShortcutsMap: PropTypes.object
-  }), _temp;
+  }), _class;
 }
 
 export { shortcutsHOC as default };