@jetbrains/ring-ui 6.0.2-beta.0 → 6.0.2

package/components/list/consts.js

@@ -11,19 +11,15 @@ export var Type;
     Type[Type["TITLE"] = 5] = "TITLE";
     Type[Type["MARGIN"] = 6] = "MARGIN";
 })(Type || (Type = {}));
-// TODO refactor to plain object in 6.0
-export var Dimension;
-(function (Dimension) {
-    Dimension[Dimension["ITEM_PADDING"] = 16] = "ITEM_PADDING";
-    Dimension[Dimension["ITEM_HEIGHT"] = 32] = "ITEM_HEIGHT";
-    Dimension[Dimension["COMPACT_ITEM_HEIGHT"] = 24] = "COMPACT_ITEM_HEIGHT";
-    Dimension[Dimension["SEPARATOR_HEIGHT"] = 25] = "SEPARATOR_HEIGHT";
-    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
-    Dimension[Dimension["SEPARATOR_FIRST_HEIGHT"] = 16] = "SEPARATOR_FIRST_HEIGHT";
-    Dimension[Dimension["SEPARATOR_TEXT_HEIGHT"] = 18] = "SEPARATOR_TEXT_HEIGHT";
-    Dimension[Dimension["TITLE_HEIGHT"] = 42] = "TITLE_HEIGHT";
-    Dimension[Dimension["INNER_PADDING"] = 8] = "INNER_PADDING";
-    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
-    Dimension[Dimension["MARGIN"] = 8] = "MARGIN";
-})(Dimension || (Dimension = {}));
+export const Dimension = {
+    ITEM_PADDING: 16,
+    ITEM_HEIGHT: 32,
+    COMPACT_ITEM_HEIGHT: 24,
+    SEPARATOR_HEIGHT: 25,
+    SEPARATOR_FIRST_HEIGHT: 16,
+    SEPARATOR_TEXT_HEIGHT: 18,
+    TITLE_HEIGHT: 42,
+    INNER_PADDING: 8,
+    MARGIN: 8
+};
 export const DEFAULT_ITEM_TYPE = Type.ITEM;

package/components/list/list.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value listSpacing: unit;
-
 .list {
   position: relative;
 
@@ -24,10 +21,10 @@
 .separator {
   display: block;
 
-  min-height: listSpacing;
+  min-height: var(--ring-unit);
 
-  margin-top: listSpacing;
-  padding: 0 calc(unit * 2) 1px;
+  margin-top: var(--ring-unit);
+  padding: 0 calc(var(--ring-unit) * 2) 1px;
 
   text-align: right;
   white-space: nowrap;
@@ -64,9 +61,9 @@
 }
 
 .item.item {
-  padding: 3px calc(unit * 2) 5px;
+  padding: 3px calc(var(--ring-unit) * 2) 5px;
 
-  line-height: calc(unit * 3);
+  line-height: calc(var(--ring-unit) * 3);
 }
 
 .itemContainer {
@@ -74,7 +71,7 @@
 }
 
 .compact {
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .error {
@@ -90,9 +87,9 @@
 }
 
 .add {
-  padding: unit calc(2 * unit);
+  padding: var(--ring-unit) calc(2 * var(--ring-unit));
 
-  line-height: calc(4 * unit);
+  line-height: calc(4 * var(--ring-unit));
 }
 
 .top {
@@ -125,7 +122,7 @@
   overflow: hidden;
   flex-shrink: 100;
 
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   text-align: right;
   white-space: nowrap;
@@ -191,7 +188,7 @@
 
   width: 20px;
   height: 20px;
-  margin-left: calc(unit * 2);
+  margin-left: calc(var(--ring-unit) * 2);
 
   background-repeat: no-repeat;
   background-position: center;
@@ -212,7 +209,7 @@
 
   width: 20px;
 
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 
   color: var(--ring-icon-secondary-color);
 }
@@ -234,7 +231,7 @@
   float: right;
 
   margin-right: 0;
-  margin-left: calc(unit * 2);
+  margin-left: calc(var(--ring-unit) * 2);
 }
 
 .checkboxContainer {
@@ -244,14 +241,14 @@
 
   width: 20px;
   height: 20px;
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .compact .checkboxContainer {
   top: 0;
 
-  width: calc(unit * 2);
-  height: calc(unit * 2);
+  width: calc(var(--ring-unit) * 2);
+  height: calc(var(--ring-unit) * 2);
 }
 
 .title {
@@ -259,7 +256,7 @@
 
   margin-top: 10px;
   margin-bottom: 6px;
-  padding: listSpacing calc(unit * 2) 0;
+  padding: var(--ring-unit) calc(var(--ring-unit) * 2) 0;
 
   text-align: left;
 
@@ -287,7 +284,7 @@
   bottom: 0;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   pointer-events: none;
 

package/components/list/list.d.ts

@@ -8,7 +8,7 @@ import { Size } from 'react-virtualized/dist/es/AutoSizer';
 import { WindowScrollerChildProps } from 'react-virtualized/dist/es/WindowScroller';
 import { ShortcutsMap } from '../shortcuts/core';
 import ListHint from './list__hint';
-import { Dimension, ListDataItem, ListDataItemProps, Type } from './consts';
+import { ListDataItem, ListDataItemProps, Type } from './consts';
 export type { ListDataItem };
 declare function noop(): void;
 /**
@@ -29,6 +29,7 @@ export interface ListProps<T = unknown> {
     onScrollToBottom: () => void;
     onResize: (info: Size) => void;
     shortcuts: boolean;
+    shortcutsMap?: ShortcutsMap;
     renderOptimization: boolean;
     disableMoveDownOverflow: boolean;
     ariaLabel: string;
@@ -99,6 +100,7 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
         activateSingleItem: PropTypes.Requireable<boolean>;
         activateFirstItem: PropTypes.Requireable<boolean>;
         shortcuts: PropTypes.Requireable<boolean>;
+        shortcutsMap: PropTypes.Requireable<object>;
         onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onScrollToBottom: PropTypes.Requireable<(...args: any[]) => any>;
@@ -142,13 +144,22 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     static ListHint: typeof ListHint;
     static ListProps: {
         Type: typeof Type;
-        Dimension: typeof Dimension;
+        Dimension: {
+            ITEM_PADDING: number;
+            ITEM_HEIGHT: number;
+            COMPACT_ITEM_HEIGHT: number;
+            SEPARATOR_HEIGHT: number;
+            SEPARATOR_FIRST_HEIGHT: number;
+            SEPARATOR_TEXT_HEIGHT: number;
+            TITLE_HEIGHT: number;
+            INNER_PADDING: number;
+            MARGIN: number;
+        };
     };
     virtualizedList?: VirtualizedList | null;
     unmounted?: boolean;
     container?: HTMLElement | null;
     hoverHandler: (arg: number) => () => void;
-    private _activatableItems;
     private _bufferSize;
     sizeCacheKey: (index: number) => string | Type.ITEM | Type.MARGIN;
     private _cache;
@@ -170,7 +181,7 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     getFirst(): ListDataItem<T> | undefined;
     getSelected(): ListDataItem<T> | null;
     clearSelected: () => void;
-    defaultItemHeight(): Dimension.ITEM_HEIGHT | Dimension.COMPACT_ITEM_HEIGHT;
+    defaultItemHeight(): number;
     scrollEndHandler: () => void;
     checkOverflow: () => void;
     getVisibleListHeight(maxHeight: number): number;

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';
@@ -73,6 +73,7 @@ export default class List extends Component {
         activateSingleItem: PropTypes.bool,
         activateFirstItem: PropTypes.bool,
         shortcuts: PropTypes.bool,
+        shortcutsMap: PropTypes.object,
         onMouseOut: PropTypes.func,
         onSelect: PropTypes.func,
         onScrollToBottom: PropTypes.func,
@@ -89,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,
@@ -195,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
@@ -491,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) => {
@@ -576,7 +576,9 @@ export default class List extends Component {
         <ActiveItemContext.Updater value={this.getId(this.state.activeItem)} skipUpdate={this.props.hidden || !isActivatable(this.state.activeItem)}/>
         <div id={this.props.id} ref={this.containerRef} className={classes} onMouseOut={this.props.onMouseOut} onBlur={this.props.onMouseOut} onMouseLeave={this.clearSelected} data-test="ring-list">
           {this.props.shortcuts &&
-                (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
+                (<Shortcuts map={this.props.shortcutsMap
+                        ? { ...this.shortcutsMap, ...this.props.shortcutsMap }
+                        : this.shortcutsMap} scope={this.shortcutsScope}/>)}
           {this.props.renderOptimization
                 ? this.renderVirtualized(maxHeight, rowCount)
                 : this.renderSimple(maxHeight, rowCount)}

package/components/list/list__item.js

@@ -20,7 +20,7 @@ export default class ListItem extends PureComponent {
     stopBubbling = (e) => e.stopPropagation();
     _isString = (val) => typeof val === 'string' || val instanceof String;
     render() {
-        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, ...restProps } = this.props;
+        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, ...restProps } = this.props;
         const checkable = checkbox !== undefined;
         const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
         const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
@@ -56,6 +56,7 @@ export default class ListItem extends PureComponent {
             'ring-list-item-action': !disabled,
             'ring-list-item-selected': checkbox
         }, restProps['data-test']);
+        const labelElement = (<span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>);
         return (<div className={styles.itemContainer} data-test={dataTest}>
         {showCheckbox && (<div className={styles.checkboxContainer}>
             <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
@@ -68,7 +69,7 @@ export default class ListItem extends PureComponent {
                 {(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
               </div>)}
 
-            <span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>
+            {labelWrapper ? labelWrapper(labelElement) : labelElement}
 
             {description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
 

package/components/loader/loader.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 @keyframes rotation-keyframes {
   100% {
     transform: rotate(360deg);
@@ -11,7 +9,7 @@
 .canvas {
   display: block;
 
-  margin: calc(unit * 2) auto;
+  margin: calc(var(--ring-unit) * 2) auto;
 
   pointer-events: none;
 }

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/loader-inline/loader-inline.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 
 :root {
   /* stylelint-disable-next-line color-no-hex */
@@ -48,7 +47,7 @@
   animation: spin 1s linear infinite;
   vertical-align: -3px;
 
-  border-radius: unit;
+  border-radius: var(--ring-unit);
 
   &,
   &::after {
@@ -58,17 +57,17 @@
   &::after {
     display: block;
 
-    width: calc(unit * 2);
-    height: calc(unit * 2);
+    width: calc(var(--ring-unit) * 2);
+    height: calc(var(--ring-unit) * 2);
 
     content: "";
     animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
 
     background-image: conic-gradient(var(--ring-loader-inline-stops));
-    mask-image: radial-gradient(unit, transparent 71.875%, var(--ring-content-background-color) 71.875%);
+    mask-image: radial-gradient(var(--ring-unit), transparent 71.875%, var(--ring-content-background-color) 71.875%);
   }
 }
 
 .children {
-  margin-left: calc(unit / 2);
+  margin-left: calc(var(--ring-unit) / 2);
 }

package/components/login-dialog/login-dialog.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .iFrame {
   overflow: hidden;
 
@@ -21,5 +19,5 @@
   top: 0;
   right: 0;
 
-  padding: unit;
+  padding: var(--ring-unit);
 }

package/components/login-dialog/service.js

@@ -1,15 +1,16 @@
 import React from 'react';
-import { render, unmountComponentAtNode } from '../global/react-render-adapter';
+import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 import LoginDialog from './login-dialog';
 const containerElement = document.createElement('div');
+const reactRoot = createRoot(containerElement);
 /**
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
-    render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+    reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
         <LoginDialog {...props}/>
-      </ControlsHeightContext.Provider>), containerElement);
+      </ControlsHeightContext.Provider>));
 }
 function noop() { }
 export default function showAuthDialog(props = { onCancel: noop }) {
@@ -18,6 +19,6 @@ export default function showAuthDialog(props = { onCancel: noop }) {
         show: true
     });
     return () => {
-        unmountComponentAtNode(containerElement);
+        reactRoot.unmount();
     };
 }

package/components/markdown/markdown.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value p-margin: 10px;
 
 .inline {
@@ -50,7 +49,7 @@
   }
 
   & blockquote {
-    padding: 0 0 0 calc(2 * unit);
+    padding: 0 0 0 calc(2 * var(--ring-unit));
 
     color: var(--ring-secondary-color);
     box-shadow: inset 2px 0 0 var(--ring-line-color);
@@ -60,7 +59,7 @@
   }
 
   & ul {
-    padding: 0 0 0 calc(2 * unit);
+    padding: 0 0 0 calc(2 * var(--ring-unit));
   }
 
   & ol {
@@ -73,4 +72,55 @@
   & ul {
     list-style-type: none;
   }
+
+  & pre {
+    position: relative;
+
+    padding: calc(var(--ring-unit) * 3) calc(var(--ring-unit) * 2);
+
+    white-space: pre;
+    tab-size: 2;
+
+    border-radius: var(--ring-border-radius);
+    background-color: rgba(var(--ring-tag-background-components), 0.5);
+
+    font-family: var(--ring-font-family-monospace);
+
+    &:first-child {
+      margin-top: calc(var(--ring-unit) * 4);
+    }
+
+    &:last-child {
+      margin-bottom: calc(var(--ring-unit) * 4);
+    }
+  }
+
+  & code {
+    padding: 2px 4px;
+
+    white-space: pre-wrap;
+
+    color: var(--ring-text-color);
+
+    border-radius: var(--ring-border-radius-small);
+
+    font-family: var(--ring-font-family-monospace);
+    font-size: var(--ring-font-size);
+  }
+
+  & :not(pre) > code {
+    background-color: var(--ring-disabled-background-color);
+  }
+
+  & pre > code {
+    display: block;
+
+    padding: 0;
+
+    white-space: inherit;
+
+    color: var(--ring-code-color);
+
+    font-size: var(--ring-font-size);
+  }
 }

package/components/markdown/markdown.d.ts

@@ -1,15 +1,12 @@
-import React, { PureComponent } from 'react';
-import { Options } from 'react-markdown';
-export interface BaseMarkdownProps {
+import React, { PureComponent, ReactNode } from 'react';
+export interface MarkdownProps {
     inline?: boolean | null | undefined;
-    plugins?: Options['remarkPlugins'];
+    children: ReactNode;
+    className?: string | null | undefined;
 }
-export type MarkdownProps = Options & BaseMarkdownProps;
 /**
   * @name Markdown
 */
 export default class Markdown extends PureComponent<MarkdownProps> {
     render(): React.JSX.Element;
 }
-declare const md: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
-export { md };

package/components/markdown/markdown.js

@@ -1,44 +1,25 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import ReactMarkdown from 'react-markdown';
 import classNames from 'classnames';
-import RemarkBreaks from 'remark-breaks';
-import RemarkGFM from 'remark-gfm';
-import normalizeIndent from '../global/normalize-indent';
-import trivialTemplateTag from '../global/trivial-template-tag';
-import Code from './code';
-import Link from './link';
-import Heading from './heading';
+import headingStyles from '../heading/heading.css';
+import linkStyles from '../link/link.css';
 import styles from './markdown.css';
 /**
   * @name Markdown
 */
 export default class Markdown extends PureComponent {
     render() {
-        const { className, components, inline, children, plugins = [], remarkPlugins = [], ...restProps } = this.props;
-        const classes = classNames(className, {
+        const { className, children, inline } = this.props;
+        const classes = classNames(className, headingStyles.contentWithHeadings, linkStyles.withLinks, {
             [styles.markdown]: !inline,
             [styles.inline]: inline
         });
-        return (<ReactMarkdown className={classes} remarkPlugins={[RemarkBreaks, RemarkGFM, ...plugins, ...remarkPlugins]} components={{
-                a: Link,
-                code: Code,
-                h1: Heading,
-                h2: Heading,
-                h3: Heading,
-                h4: Heading,
-                h5: Heading,
-                h6: Heading,
-                ...components
-            }} {...restProps}>{normalizeIndent(children)}</ReactMarkdown>);
+        return (<div className={classes}>
+        {children}
+      </div>);
     }
 }
 Markdown.propTypes = {
     inline: PropTypes.bool,
-    children: PropTypes.string,
-    className: PropTypes.string,
-    components: PropTypes.object,
-    plugins: PropTypes.array
+    className: PropTypes.string
 };
-const md = trivialTemplateTag(source => <Markdown>{source}</Markdown>);
-export { md };

package/components/message/message.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value padding: calc(unit * 1.5);
-
 .container {
   display: inline;
 }
@@ -10,9 +7,9 @@
 .message {
   overflow: visible;
 
-  max-width: calc(unit * 40);
+  max-width: calc(var(--ring-unit) * 40);
 
-  padding: padding padding calc(unit * 2) calc(unit * 5);
+  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 5);
 
   text-align: left;
 
@@ -24,7 +21,7 @@
 .icon {
   position: absolute;
   top: 10px;
-  left: padding;
+  left: calc(var(--ring-unit) * 1.5);
 }
 
 .title {
@@ -36,7 +33,7 @@
 }
 
 .description {
-  margin: calc(unit / 2) 0 0;
+  margin: calc(var(--ring-unit) / 2) 0 0;
 
   color: var(--ring-text-color);
 
@@ -45,7 +42,7 @@
 }
 
 .button {
-  margin-top: padding;
+  margin-top: calc(var(--ring-unit) * 1.5);
 }
 
 .tail {

package/components/old-browsers-message/old-browsers-message.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :global(.ring-old-browsers-message) {
   display: block;
 
@@ -13,7 +11,7 @@
 
   font-family: -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", Arial, sans-serif;
   font-size: var(--ring-font-size-larger);
-  line-height: calc(2.5 * unit);
+  line-height: calc(2.5 * var(--ring-unit));
 }
 
 :global(.ring-old-browsers-message_hidden) {
@@ -24,5 +22,5 @@
   cursor: pointer;
   user-select: none;
 
-  font-size: calc(3 * unit);
+  font-size: calc(3 * var(--ring-unit));
 }

package/components/pager/pager.css

@@ -1,19 +1,17 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .pager {
   user-select: none;
 }
 
 .links {
-  margin-bottom: calc(unit * 2);
+  margin-bottom: calc(var(--ring-unit) * 2);
 }
 
 .link {
   display: inline-block;
 
-  margin-right: calc(unit * 2);
+  margin-right: calc(var(--ring-unit) * 2);
 }
 
 .linkDisabled {