@jetbrains/ring-ui 5.1.19 → 5.1.21

package/README.md

@@ -1,7 +1,7 @@
 # Ring UI — JetBrains Web UI components
 [![Storybook][storybook-img]][docsite] [![Build Status][ci-img]][ci-bt] [![Storybook][browserstack-img]][browserstack-build-page] [![NPM version][npm-version-img]][npm-package] [![NPM downloads][npm-count-img]][npm-package]
 
-[![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
+[![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://github.com/JetBrains#jetbrains-on-github)
 
 This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
 

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/editable-heading/editable-heading.css

@@ -131,6 +131,10 @@
   resize: none;
 }
 
+.textareaNotOverflow {
+  overflow: hidden;
+}
+
 .textareaFade {
   position: absolute;
   bottom: 0;
@@ -174,7 +178,7 @@
 }
 
 .level3 {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .sizeS {

package/components/editable-heading/editable-heading.d.ts

@@ -23,7 +23,7 @@ export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | H
     'data-test'?: string | null;
     error?: string;
     multiline?: boolean;
-    maxInputHeight?: number;
+    maxInputRows?: number;
     renderMenu?: () => React.ReactNode;
     translations?: EditableHeadingTranslations;
 };

package/components/editable-heading/editable-heading.js

@@ -11,7 +11,7 @@ export { Levels };
 export { Size };
 function noop() { }
 export const EditableHeading = (props) => {
-    const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, multiline = false, renderMenu = () => null, onFocus, onBlur, onChange, onScroll, maxInputHeight, translations = {
+    const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, multiline = false, renderMenu = () => null, onFocus, onBlur, onChange, onScroll, maxInputRows, translations = {
         save: 'Save',
         cancel: 'Cancel'
     }, ...restProps } = props;
@@ -21,6 +21,7 @@ export const EditableHeading = (props) => {
     const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
     const textAreaRef = React.useRef(null);
     const [isScrolledToBottom, setIsScrolledToBottom] = React.useState(false);
+    const [isOverflow, setIsOverflow] = React.useState(false);
     const hasError = error !== undefined;
     const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
     const isCancelDisabled = isSaving;
@@ -44,7 +45,7 @@ export const EditableHeading = (props) => {
         [styles.selectionMode]: isInSelectionMode
     });
     const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
-    const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
+    const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
     const stretch = useCallback((el) => {
         if (!el || !el.style) {
             return;
@@ -63,6 +64,7 @@ export const EditableHeading = (props) => {
         const clientHeight = el.clientHeight || 0;
         const scrollTop = el.scrollTop || 0;
         setIsScrolledToBottom(scrollHeight - clientHeight <= scrollTop);
+        setIsOverflow(scrollHeight > clientHeight);
     }, [setIsScrolledToBottom]);
     const onHeadingMouseDown = React.useCallback(() => {
         setIsMouseDown(true);
@@ -116,7 +118,7 @@ export const EditableHeading = (props) => {
               {!multiline
                     ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>)
                     : (<div className={classNames(styles.textareaWrapper, inputStyles[`size${size}`])}>
-                    <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputHeight }}/>
+                    <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputRows ? `${maxInputRows}lh` : '' }}/>
                     {!isScrolledToBottom && <div className={styles.textareaFade}/>}
                   </div>)}
             </>)

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.js

@@ -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,

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/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