@jetbrains/ring-ui 5.1.20 → 5.1.22

package/components/auth/request-builder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="typings" />
 import uuid from 'simply-uuid';
 import AuthStorage, { AuthState } from './storage';
 export interface AuthRequestBuilderConfig {

package/components/code/code.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="highlight.js" />
 import React, { PureComponent, Ref } from 'react';
 import PropTypes from 'prop-types';
 import highlight from 'highlight.js/lib/core';

package/components/grid/row.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import styles from './grid.css';
 const ModifierType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
 const modifierKeys = [
-    'start', 'center', 'end',
-    'around', 'between',
-    'top', 'middle', 'baseline', 'bottom',
+    'start', 'center', 'end', // text-align, justify-content
+    'around', 'between', // justify-content
+    'top', 'middle', 'baseline', 'bottom', // align-items
     'first', 'last' // order
 ];
 /**

package/components/header/profile.js

@@ -93,7 +93,7 @@ export default class Profile extends PureComponent {
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
                 label: translations?.profile ?? translate('profile'),
-                target: '_self',
+                target: '_self', // Full page reload in Angular
                 href: profileUrl,
                 LinkComponent
             },

package/components/island/header.js

@@ -45,7 +45,7 @@ class Header extends Component {
         });
         const headerStyle = phase != null
             ? {
-                lineHeight: `${this.style('LINE_HEIGHT')}px`,
+                lineHeight: `${this.style('LINE_HEIGHT')}px`, // need to append px because number is a valid line-height value
                 paddingTop: this.style('PADDING_TOP'),
                 paddingBottom: this.style('PADDING_BOTTOM')
             }

package/components/list/list.d.ts

@@ -150,7 +150,6 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     unmounted?: boolean;
     container?: HTMLElement | null;
     hoverHandler: (arg: number) => () => void;
-    private _activatableItems;
     private _bufferSize;
     sizeCacheKey: (index: number) => string | Type.ITEM | Type.MARGIN;
     private _cache;

package/components/list/list.js

@@ -1,7 +1,7 @@
 /**
  * @name List
  */
-import React, { cloneElement, Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import VirtualizedList from 'react-virtualized/dist/es/List';
@@ -90,9 +90,9 @@ export default class List extends Component {
     };
     static defaultProps = {
         data: [],
-        restoreActiveIndex: false,
-        activateSingleItem: false,
-        activateFirstItem: false,
+        restoreActiveIndex: false, // restore active item using its "key" property
+        activateSingleItem: false, // if there is only one item, activate it
+        activateFirstItem: false, // if there no active items, activate the first one
         onMouseOut: noop,
         onSelect: noop,
         onScrollToBottom: noop,
@@ -196,7 +196,6 @@ export default class List extends Component {
             });
         }
     }));
-    _activatableItems = false;
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     _bufferSize = 10; // keep X items above and below of the visible area
     // reuse size cache for similar items
@@ -492,7 +491,7 @@ export default class List extends Component {
             </div>)}
         </CellMeasurer>)
             : (<div role="row" id={itemId} key={itemKey}>
-          <div role="cell">{cloneElement(el)}</div>
+          <div role="cell">{el}</div>
         </div>);
     };
     addItemDataTestToProp = (props) => {

package/components/loader/loader__core.js

@@ -40,12 +40,12 @@ export default class LoaderCore {
         stop: false,
         deterministic: false,
         colors: [
-            { r: 215, g: 60, b: 234 },
-            { r: 145, g: 53, b: 224 },
-            { r: 88, g: 72, b: 224 },
-            { r: 37, g: 183, b: 255 },
-            { r: 89, g: 189, b: 0 },
-            { r: 251, g: 172, b: 2 },
+            { 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
         ]
     };

package/components/popup/popup.js

@@ -287,9 +287,9 @@ Popup.propTypes = {
     children: PropTypes.node.isRequired,
     dontCloseOnAnchorClick: PropTypes.bool,
     shortcuts: PropTypes.bool,
-    keepMounted: PropTypes.bool,
+    keepMounted: PropTypes.bool, // pass this prop to preserve the popup's DOM state while hidden
     'data-test': PropTypes.string,
-    client: PropTypes.bool,
+    client: PropTypes.bool, // true means that it's never used in SSR
     directions: PropTypes.arrayOf(PropTypes.string),
     autoPositioning: PropTypes.bool,
     autoCorrectTopOverflow: PropTypes.bool,
@@ -298,7 +298,7 @@ Popup.propTypes = {
     maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minWidth: PropTypes.number,
     sidePadding: PropTypes.number,
-    attached: PropTypes.bool,
+    attached: PropTypes.bool, // Popup adjacent to an input, without upper border and shadow
     onMouseDown: PropTypes.func,
     onMouseUp: PropTypes.func,
     onMouseOver: PropTypes.func,

package/components/progress-bar/progress-bar.css

@@ -63,6 +63,12 @@
 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--ring-progress-bar-line-background-color), rgba(0, 0, 0, 0));
     background-repeat: no-repeat;
+
+    .staticLineColor &  {
+      animation: none;
+
+      background-image: var(--ring-progress-bar-line-background-color);
+    }
   }
 }
 

package/components/progress-bar/progress-bar.d.ts

@@ -5,6 +5,7 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
     value: number;
     label: string;
     global?: boolean | null | undefined;
+    staticColor?: boolean;
 }
 /**
  * @name Progress Bar
@@ -43,6 +44,11 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
          * @type {number}
          */
         value: PropTypes.Requireable<number>;
+        /**
+         * Disables Disabled progress bar color animation and sets it to static color.
+         * @type {boolean}
+         */
+        staticColor: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         max: number;

package/components/progress-bar/progress-bar.js

@@ -42,7 +42,12 @@ export default class ProgressBar extends PureComponent {
          * A floating point number that specifies current task completion rate.
          * @type {number}
          */
-        value: PropTypes.number
+        value: PropTypes.number,
+        /**
+         * Disables Disabled progress bar color animation and sets it to static color.
+         * @type {boolean}
+         */
+        staticColor: PropTypes.bool
     };
     static defaultProps = {
         max: 1.0,
@@ -58,10 +63,11 @@ export default class ProgressBar extends PureComponent {
         this.progressbar = el;
     };
     render() {
-        const { className, global, max, value, label, ...otherProps } = this.props;
+        const { className, global, max, value, label, staticColor, ...otherProps } = this.props;
         const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
         const classes = classNames(styles.progressBar, className, {
-            [styles.globalMode]: global
+            [styles.globalMode]: global,
+            [styles.staticLineColor]: staticColor
         });
         return (<div {...otherProps} className={classes} ref={this.progressbarWrapperRef}>
         <div className={styles.line} ref={this.progressbarRef} role="progressbar" aria-label={label} aria-valuenow={value} aria-valuemin={0} aria-valuemax={max} style={{ width }}/>

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

@@ -800,7 +800,7 @@ export default class QueryAssist extends Component {
         const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-            [styles.inputGap2]: actions.length === 2,
+            [styles.inputGap2]: actions.length === 2, // TODO: replace with flex-box layout
             [styles.inputRevertOrder]: !glass || huge
         });
         const placeholderStyles = classNames({

package/components/select/select-popup.css

@@ -42,6 +42,10 @@
   width: 0;
 }
 
+.popup {
+  overscroll-behavior: contain;
+}
+
 .filterWrapper {
   position: relative;
 

package/components/select/select.js

@@ -181,46 +181,46 @@ function isSameSelected(prevSelected, selected) {
 export default class Select extends Component {
     static defaultProps = {
         data: [],
-        filter: false,
+        filter: false, // enable filter (not in INPUT modes)
         filterIcon: null,
         filterRef: noop,
-        multiple: false,
-        clear: false,
-        loading: false,
-        disabled: false,
+        multiple: false, // multiple can be an object - see demo for more information
+        clear: false, // enable clear button that clears the "selected" state
+        loading: false, // show a loading indicator while data is loading
+        disabled: false, // disable select
         type: Type.BUTTON,
         size: Size.M,
-        targetElement: null,
-        hideSelected: false,
-        allowAny: false,
-        hideArrow: false,
+        targetElement: null, // element to bind the popup to (select BUTTON or INPUT by default)
+        hideSelected: false, // INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
+        allowAny: false, // INPUT mode: allows any value to be entered
+        hideArrow: false, // hide dropdown arrow icon
         showPopup: false,
-        maxHeight: 600,
+        maxHeight: 600, // height of the options list, including the filter and the 'Add' button
         directions: [
             Popup.PopupProps.Directions.BOTTOM_RIGHT,
             Popup.PopupProps.Directions.BOTTOM_LEFT,
             Popup.PopupProps.Directions.TOP_LEFT,
             Popup.PopupProps.Directions.TOP_RIGHT
         ],
-        selected: null,
-        label: null,
-        selectedLabel: null,
-        inputPlaceholder: '',
-        hint: null,
+        selected: null, // current selection (item / array of items)
+        label: null, // BUTTON or INPUT label (nothing selected)
+        selectedLabel: null, // BUTTON or INPUT label (something selected)
+        inputPlaceholder: '', // Placeholder for input modes
+        hint: null, // hint text to display under the list
         shortcutsEnabled: false,
         onBeforeOpen: noop,
         onLoadMore: noop,
         onOpen: noop,
         onClose: noop,
-        onFilter: noop,
+        onFilter: noop, // search string as first argument
         onFocus: noop,
         onBlur: noop,
         onKeyDown: noop,
-        onSelect: noop,
-        onDeselect: noop,
-        onOutsideClick: noop,
-        onChange: noop,
-        onAdd: noop,
+        onSelect: noop, // single + multi
+        onDeselect: noop, // multi
+        onOutsideClick: noop, // multi
+        onChange: noop, // multi
+        onAdd: noop, // search string as first argument
         onDone: noop,
         onReset: noop,
         tags: null,

package/dist/_helpers/select__filter.js

@@ -10,7 +10,7 @@ import sniffr from '../global/sniffer.js';
 import { ActiveItemContext } from '../list/list.js';
 import { I18nContext } from '../i18n/i18n-context.js';
 
-var modules_b607bec2 = {"unit":"i__const_unit_0","filterWithTagsFocused":"filterWithTagsFocused_rui_531d","light":"light_rui_2ac4","filterWithTags":"filterWithTags_rui_531d","filterWrapper":"filterWrapper_rui_531d","filterWithTagsInput":"filterWithTagsInput_rui_531d","filter":"filter_rui_531d","filterIcon":"filterIcon_rui_531d","bottomLine":"bottomLine_rui_531d","bottomLineOverItem":"bottomLineOverItem_rui_531d","message":"message_rui_531d","selectAll":"selectAll_rui_531d"};
+var modules_b607bec2 = {"unit":"i__const_unit_0","filterWithTagsFocused":"filterWithTagsFocused_rui_531d","light":"light_rui_2ac4","filterWithTags":"filterWithTags_rui_531d","filterWrapper":"filterWrapper_rui_531d","filterWithTagsInput":"filterWithTagsInput_rui_531d","filter":"filter_rui_531d","popup":"popup_rui_531d","filterIcon":"filterIcon_rui_531d","bottomLine":"bottomLine_rui_531d","bottomLineOverItem":"bottomLineOverItem_rui_531d","message":"message_rui_531d","selectAll":"selectAll_rui_531d"};
 
 var _excluded = ["className", "listId"];
 function noop() {}

package/dist/alert/alert.js

@@ -31,6 +31,7 @@ import 'core-js/modules/es.weak-map.js';
 import '../_helpers/loader-inline.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.object.assign.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.string.split.js';
@@ -53,6 +54,7 @@ import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.array.splice.js';
 import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';

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

@@ -36,6 +36,7 @@ import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.object.entries.js';
 import '../_helpers/loader-inline.js';
 import '../global/dom.js';
+import 'core-js/modules/es.object.assign.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.string.split.js';
 import 'core-js/modules/es.set.js';
@@ -55,6 +56,7 @@ import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.array.splice.js';
 import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';

package/dist/analytics/analytics.js

@@ -1,4 +1,5 @@
 import { d as _createClass, c as _classCallCheck, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.regexp.exec.js';

package/dist/analytics/analytics__custom-plugin.js

@@ -64,7 +64,6 @@ var AnalyticsCustomPlugin = /*#__PURE__*/function () {
       if (this._isDevelopment) {
         console.log('TRACKING DATA = ', category, action, data); // eslint-disable-line no-console
       }
-
       var baseSendingData = {
         category,
         action,
@@ -80,7 +79,7 @@ var AnalyticsCustomPlugin = /*#__PURE__*/function () {
       this._data.push(sendingData);
       if (this._flushMaxPackSize != null && this._data.length >= this._flushMaxPackSize) {
         var _this$_flush;
-        (_this$_flush = this._flush) === null || _this$_flush === void 0 ? void 0 : _this$_flush.call(this);
+        (_this$_flush = this._flush) === null || _this$_flush === void 0 || _this$_flush.call(this);
       }
     }
   }, {

package/dist/analytics/analytics__ga-plugin.js

@@ -31,7 +31,7 @@ var AnalyticsGAPlugin = /*#__PURE__*/function () {
       var m = s.getElementsByTagName(o)[0];
       a.async = true;
       a.src = g;
-      (_m$parentNode = m.parentNode) === null || _m$parentNode === void 0 ? void 0 : _m$parentNode.insertBefore(a, m);
+      (_m$parentNode = m.parentNode) === null || _m$parentNode === void 0 || _m$parentNode.insertBefore(a, m);
     })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
     /**
      * UA-57284711-1 - ga key for development purpose

package/dist/auth/auth.js

@@ -8,6 +8,7 @@ import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/es.promise.js';
 import './response-parser.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/es.regexp.to-string.js';
@@ -46,6 +47,7 @@ import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.object.entries.js';
 import '../_helpers/loader-inline.js';
 import '../global/dom.js';
+import 'core-js/modules/es.object.assign.js';
 import 'core-js/modules/es.string.split.js';
 import 'core-js/modules/es.set.js';
 import '../button/button.js';
@@ -63,6 +65,7 @@ import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.array.find-index.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';