@jetbrains/ring-ui 5.0.113 → 5.0.115

package/components/input/input.css

@@ -6,6 +6,7 @@
 .outerContainer {
   --ring-input-icon-offset: calc(unit * 2.5);
   --ring-input-padding-inline: unit;
+  --ring-input-background-color: var(--ring-content-background-color);
 }
 
 .borderless {
@@ -44,7 +45,7 @@
   border: 1px solid var(--ring-borders-color);
   border-radius: var(--ring-border-radius);
   outline: none;
-  background: transparent;
+  background-color: var(--ring-input-background-color);
 
   font: inherit;
 
@@ -94,6 +95,7 @@
 
 .borderless .input {
   border-color: transparent;
+  background-color: transparent;
 }
 
 .withIcon .input {

package/components/input-ng/input-ng.examples.js

@@ -2,6 +2,8 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
+import darkStyles from '../global/variables_dark.css';
+
 import InputNG from './input-ng';
 
 export default {
@@ -89,7 +91,7 @@ export const basic = () => {
           multiline="true"
         ></rg-input>
 
-        <div class="dark">
+        <div class="dark ${darkStyles.dark}">
           <rg-input
             label="Input on dark background"
             placeholder="Hint on dark background"

package/components/query-assist/query-assist.css

@@ -165,6 +165,10 @@
   }
 }
 
+.hugePlaceholder {
+  padding-left: 0;
+}
+
 .letter {
   display: inline;
 }

package/components/query-assist/query-assist.js

@@ -799,6 +799,7 @@ export default class QueryAssist extends Component {
         });
         const placeholderStyles = classNames({
             [styles.placeholder]: true,
+            [styles.hugePlaceholder]: huge,
             [styles.withoutGlass]: !glass || (!renderLoader && huge)
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
@@ -808,7 +809,7 @@ export default class QueryAssist extends Component {
           {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={this.props.translations.searchTitle} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
 
           {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
-                    [styles.loaderOnTheRight]: !glass || huge,
+                    [styles.loaderOnTheRight]: !glass && !huge,
                     [styles.loaderActive]: renderLoader
                 })} ref={this.loaderRef}>
               <LoaderInline />

package/components/select/select.css

@@ -171,6 +171,10 @@
   box-shadow: button-shadow var(--ring-main-color);
 }
 
+.buttonValueEmpty.buttonValueEmpty {
+  color: var(--ring-disabled-color);
+}
+
 .heightS .buttonValue {
   font-size: var(--ring-font-size);
 }

package/components/select/select.js

@@ -818,7 +818,8 @@ export default class Select extends Component {
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <div className={styles.buttonContainer}>
               <Button {...ariaProps} height={this.props.height} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
-                        [styles.buttonValueOpen]: this.state.showPopup
+                        [styles.buttonValueOpen]: this.state.showPopup,
+                        [styles.buttonValueEmpty]: this._selectionIsEmpty()
                     })} disabled={this.props.disabled} style={style} data-test="ring-select__button ring-select__focus">
                 {this._getAvatar()}
                 {this._getPlaceholder()}

package/components/user-card/card.js

@@ -57,7 +57,7 @@ export default class UserCard extends PureComponent {
         return (<div className={classes} {...restProps}>
         <div className={styles.userInformationContainer}>
           <div className={styles.userAvatar}>
-            <Avatar size={AvatarSize.Size56} url={user.avatarUrl}/>
+            <Avatar size={AvatarSize.Size56} url={user.avatarUrl} round/>
             {!!avatarInfo && avatarInfo}
           </div>
           <div className={styles.userInformation}>

package/dist/_helpers/card.js

@@ -46,7 +46,8 @@ class UserCard extends PureComponent {
       className: modules_a4196c17.userAvatar
     }, /*#__PURE__*/React.createElement(Avatar, {
       size: Size.Size56,
-      url: user.avatarUrl
+      url: user.avatarUrl,
+      round: true
     }), !!avatarInfo && avatarInfo), /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userInformation
     }, /*#__PURE__*/React.createElement("div", {

package/dist/_helpers/query-assist__suggestions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import List from '../list/list.js';
 
-var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_d22e","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","input":"input_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","withoutGlass":"withoutGlass_rui_d22e","loaderActive":"loaderActive_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","inputRevertOrder":"inputRevertOrder_rui_d22e"};
+var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_d22e","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","input":"input_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","hugePlaceholder":"hugePlaceholder_rui_d22e","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","withoutGlass":"withoutGlass_rui_d22e","loaderActive":"loaderActive_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","inputRevertOrder":"inputRevertOrder_rui_d22e"};
 
 const ICON_ID_LENGTH = 44;
 class QueryAssistSuggestions {

package/dist/alert/alert.js

@@ -100,6 +100,10 @@ class Alert extends PureComponent {
         height
       });
     });
+    /**
+     * @param {SyntheticEvent} evt
+     * @private
+     */
     _defineProperty(this, "_handleCaptionsLinksClick", evt => {
       if (evt.target instanceof Element && evt.target.matches('a')) {
         this.closeRequest(evt);
@@ -128,11 +132,6 @@ class Alert extends PureComponent {
       this.props.onClose();
     }, ANIMATION_TIME);
   }
-  /**
-   * @param {SyntheticEvent} evt
-   * @private
-   */
-
   /**
    * @private
    */
@@ -229,6 +228,7 @@ _defineProperty(Alert, "propTypes", {
   closeButtonClassName: PropTypes.string,
   'data-test': PropTypes.string
 });
+/** @override */
 _defineProperty(Alert, "defaultProps", {
   theme: Theme.DARK,
   closeable: true,

package/dist/alert-service/alert-service.js

@@ -46,6 +46,7 @@ import '../popup/popup.consts.js';
 class AlertService {
   constructor() {
     _defineProperty(this, "defaultTimeout", 0);
+    // This alerts are stored in inverse order (last shown is first in array)
     _defineProperty(this, "showingAlerts", []);
     _defineProperty(this, "containerElement", document.createElement('div'));
   }

package/dist/auth/iframe-flow.js

@@ -47,9 +47,9 @@ import '../loader/loader.js';
 import '../loader/loader__core.js';
 import '../_helpers/loader-screen.js';
 import './background-flow.js';
+import '../_helpers/link.js';
 import 'es6-error';
 import '../global/url.js';
-import '../_helpers/link.js';
 
 class IFrameFlow {
   constructor(requestBuilder, storage, translations) {

package/dist/auth/landing.js

@@ -54,12 +54,12 @@ import '../link/link.js';
 import '../_helpers/link.js';
 import '../group/group.js';
 import '../_helpers/group.js';
-import '../global/listeners.js';
-import '../global/promise-with-timeout.js';
 import '../storage/storage.js';
 import '../storage/storage__local.js';
 import '../storage/storage__fallback.js';
 import 'deep-equal';
+import '../global/listeners.js';
+import '../global/promise-with-timeout.js';
 import './request-builder.js';
 import 'simply-uuid';
 import './background-flow.js';

package/dist/auth/token-validator.js

@@ -153,6 +153,13 @@ class TokenValidator {
   }
 }
 _defineProperty(TokenValidator, "DEFAULT_REFRESH_BEFORE", 10 * 60);
+// 20 min in s
+/**
+ * Error class for auth token validation
+ *
+ * @param {string} message Error message
+ * @param {Error=} cause Error that caused this error
+ */
 _defineProperty(TokenValidator, "TokenValidationError", TokenValidationError);
 
 export { TokenValidationError, TokenValidator as default };

package/dist/data-list/data-list.js

@@ -192,6 +192,7 @@ const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(
 class DataListContainer extends Component {
   constructor() {
     super(...arguments);
+    // https://stackoverflow.com/a/53882322/6304152
     _defineProperty(this, "DataList", getContainer());
   }
   render() {

package/dist/http/http.js

@@ -49,6 +49,8 @@ class HTTP {
     _defineProperty(this, "setBaseUrl", baseUrl => {
       this.baseUrl = baseUrl;
     });
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(this, "fetch", async function (url) {
       let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       const {
@@ -63,6 +65,8 @@ class HTTP {
       });
       return _this._processResponse(response);
     });
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(this, "request", async (url, params) => {
       let token = await this.requestToken?.();
       let response = await this._performRequest(url, token, params);
@@ -83,22 +87,34 @@ class HTTP {
       }
     });
     _defineProperty(this, "getMetaForResponse", response => this._requestsMeta.get(response));
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(this, "get", (url, params) => this.request(url, {
       ...params,
       method: 'GET'
     }));
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(this, "post", (url, params) => this.request(url, {
       ...params,
       method: 'POST'
     }));
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(this, "delete", (url, params) => this.request(url, {
       ...params,
       method: 'DELETE'
     }));
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(this, "put", (url, params) => this.request(url, {
       ...params,
       method: 'PUT'
     }));
+    /**
+     * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
+     * @param method
+     */
     _defineProperty(this, "abortify", method => function () {
       for (var _len = arguments.length, _ref = new Array(_len), _key = 0; _key < _len; _key++) {
         _ref[_key] = arguments[_key];
@@ -217,15 +233,10 @@ class HTTP {
   static _isErrorStatus(status) {
     return status < STATUS_OK_IF_MORE_THAN || status >= STATUS_BAD_IF_MORE_THAN;
   }
-  // TODO: Replace any to never/unknown in next release and remove eslint-disable
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
   async authorizedFetch() {
     const response = await this._performRequest(...arguments);
     return this._processResponse(response);
   }
-  // TODO: Replace any to never/unknown in next release and remove eslint-disable
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }
 
 export { CODE, HTTPError, HTTP as default, defaultFetchConfig };

package/dist/list/list.js

@@ -110,7 +110,10 @@ class List extends Component {
       }
     })));
     _defineProperty(this, "_activatableItems", false);
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     _defineProperty(this, "_bufferSize", 10);
+    // keep X items above and below of the visible area
+    // reuse size cache for similar items
     _defineProperty(this, "sizeCacheKey", index => {
       if (index === 0 || index === this.props.data.length + 1) {
         return Type.MARGIN;

package/dist/popup/popup.js

@@ -103,6 +103,10 @@ class Popup extends PureComponent {
       this.props.onEscPress(evt);
       this._onCloseAttempt(evt, true);
     });
+    /**
+     * @param {jQuery.Event} evt
+     * @private
+     */
     _defineProperty(this, "_onDocumentClick", evt => {
       if (this.container && evt.target instanceof Node && this.container.contains(evt.target) || !this._listenersEnabled || this.props.dontCloseOnAnchorClick && evt.target instanceof Node && this._getAnchor()?.contains(evt.target)) {
         return;

package/dist/query-assist/query-assist.js

@@ -150,6 +150,7 @@ class QueryAssist extends Component {
     _defineProperty(this, "immediateState", void 0);
     _defineProperty(this, "requestData", void 0);
     _defineProperty(this, "ngModelStateField", ngModelStateField);
+    // An array of {query: string; caret: number}[]
     _defineProperty(this, "historyStack", []);
     _defineProperty(this, "mouseIsDownOnPopup", void 0);
     _defineProperty(this, "handleFocusChange", e => {
@@ -248,6 +249,7 @@ class QueryAssist extends Component {
         this.requestData?.();
       }
     });
+    // It's necessary to prevent new element creation before any other hooks
     _defineProperty(this, "handleEnter", e => {
       if (e.key === 'Enter') {
         preventDefault(e);
@@ -798,6 +800,7 @@ class QueryAssist extends Component {
     });
     const placeholderStyles = classNames({
       [modules_da7ab055.placeholder]: true,
+      [modules_da7ab055.hugePlaceholder]: huge,
       [modules_da7ab055.withoutGlass]: !glass || !renderLoader && huge
     });
     return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
@@ -818,7 +821,7 @@ class QueryAssist extends Component {
       "data-test": "query-assist-search-icon"
     }), renderLoader && /*#__PURE__*/React.createElement("div", {
       className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, {
-        [modules_da7ab055.loaderOnTheRight]: !glass || huge,
+        [modules_da7ab055.loaderOnTheRight]: !glass && !huge,
         [modules_da7ab055.loaderActive]: renderLoader
       }),
       ref: this.loaderRef

package/dist/select/select.js

@@ -79,7 +79,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 
-var modules_9d0de074 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","select":"select_rui_11de","value":"value_rui_11de ellipsis_rui_8bff font_rui_8bff","icons":"icons_rui_11de","light":"light_rui_11de","toolbar":"toolbar_rui_11de","button":"button_rui_11de","buttonSpaced":"buttonSpaced_rui_11de","inputMode":"inputMode_rui_11de","selectedIcon":"selectedIcon_rui_11de resetButton_rui_8bff","clearIcon":"clearIcon_rui_11de","sizeS":"sizeS_rui_11de","sizeM":"sizeM_rui_11de","sizeL":"sizeL_rui_11de","sizeFULL":"sizeFULL_rui_11de","sizeAUTO":"sizeAUTO_rui_11de","buttonMode":"buttonMode_rui_11de","open":"open_rui_11de","buttonContainer":"buttonContainer_rui_11de","buttonValue":"buttonValue_rui_11de ellipsis_rui_8bff","buttonValueOpen":"buttonValueOpen_rui_11de","heightS":"heightS_rui_11de","label":"label_rui_11de","disabled":"disabled_rui_11de","avatar":"avatar_rui_11de","popup":"popup_rui_11de","chevron":"chevron_rui_11de","chevronIcon":"chevronIcon_rui_11de"};
+var modules_9d0de074 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","select":"select_rui_11de","value":"value_rui_11de ellipsis_rui_8bff font_rui_8bff","icons":"icons_rui_11de","light":"light_rui_11de","toolbar":"toolbar_rui_11de","button":"button_rui_11de","buttonSpaced":"buttonSpaced_rui_11de","inputMode":"inputMode_rui_11de","selectedIcon":"selectedIcon_rui_11de resetButton_rui_8bff","clearIcon":"clearIcon_rui_11de","sizeS":"sizeS_rui_11de","sizeM":"sizeM_rui_11de","sizeL":"sizeL_rui_11de","sizeFULL":"sizeFULL_rui_11de","sizeAUTO":"sizeAUTO_rui_11de","buttonMode":"buttonMode_rui_11de","open":"open_rui_11de","buttonContainer":"buttonContainer_rui_11de","buttonValue":"buttonValue_rui_11de ellipsis_rui_8bff","buttonValueOpen":"buttonValueOpen_rui_11de","buttonValueEmpty":"buttonValueEmpty_rui_11de","heightS":"heightS_rui_11de","label":"label_rui_11de","disabled":"disabled_rui_11de","avatar":"avatar_rui_11de","popup":"popup_rui_11de","chevron":"chevron_rui_11de","chevronIcon":"chevronIcon_rui_11de"};
 
 /**
  * @name Select
@@ -995,7 +995,8 @@ class Select extends Component {
           id: this.props.id,
           onClick: this._clickHandler,
           className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
-            [modules_9d0de074.buttonValueOpen]: this.state.showPopup
+            [modules_9d0de074.buttonValueOpen]: this.state.showPopup,
+            [modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
           }),
           disabled: this.props.disabled,
           style: style,

package/dist/select/select__popup.js

@@ -85,6 +85,7 @@ class SelectPopup extends PureComponent {
       tagsActiveIndex: null
     });
     _defineProperty(this, "isClickingPopup", false);
+    // This flag is set to true while an item in the popup is being clicked
     _defineProperty(this, "filter", void 0);
     _defineProperty(this, "caret", void 0);
     _defineProperty(this, "onFilterFocus", () => {
@@ -150,6 +151,10 @@ class SelectPopup extends PureComponent {
         info: true
       }, `${this.props.selected.length} selected`));
     });
+    // Cache the value because this method is called
+    // inside `render` function which can be called N times
+    // and should be fast as possible.
+    // Cache invalidates each time hidden or userDefinedMaxHeight changes
     _defineProperty(this, "_adjustListMaxHeight", memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {
       if (hidden) {
         return userDefinedMaxHeight;