@jetbrains/ring-ui 5.1.22 → 6.0.1

package/components/link/link.js

@@ -1,34 +1,14 @@
-import React, { PureComponent, memo } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import memoize from '../global/memoize';
 import dataTests from '../global/data-tests';
 import ClickableLink from './clickableLink';
 import styles from './link.css';
-/**
- * @name Link
- */
-let isCompatibilityMode = false;
-export function setCompatibilityMode(isEnabled) {
-    isCompatibilityMode = isEnabled;
-}
-const makeWrapText = memoize((innerClassName) => {
-    function WrapText({ className, children }) {
-        const classes = classNames(styles.inner, className, innerClassName);
-        return <span className={classes}>{children}</span>;
-    }
-    WrapText.propTypes = {
-        className: PropTypes.string,
-        children: PropTypes.node
-    };
-    return memo(WrapText);
-});
 export function linkHOC(ComposedComponent) {
     const isCustom = typeof ComposedComponent !== 'string' && ComposedComponent !== ClickableLink;
     return class Link extends PureComponent {
         static propTypes = {
             className: PropTypes.string,
-            innerClassName: PropTypes.string,
             active: PropTypes.bool,
             inherit: PropTypes.bool,
             pseudo: PropTypes.bool,
@@ -39,33 +19,24 @@ export function linkHOC(ComposedComponent) {
             onPlainLeftClick: PropTypes.func,
             onClick: PropTypes.func
         };
-        getChildren() {
-            const { children, innerClassName } = this.props;
-            const WrapText = makeWrapText(innerClassName);
-            return typeof children === 'function'
-                ? children(WrapText)
-                : <WrapText>{children}</WrapText>;
-        }
         render() {
-            const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, innerClassName, children, onPlainLeftClick, onClick, ...restProps } = this.props;
+            const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, children, onPlainLeftClick, onClick, ...restProps } = this.props;
             const useButton = pseudo || !isCustom && href == null;
             const classes = classNames(styles.link, className, {
                 [styles.active]: active,
                 [styles.inherit]: inherit,
                 [styles.hover]: hover,
-                [styles.compatibilityUnderlineMode]: isCompatibilityMode,
-                [styles.pseudo]: useButton,
-                [styles.text]: typeof children !== 'function'
+                [styles.pseudo]: useButton
             });
             let props = restProps;
             if (isCustom && !props.activeClassName) {
                 props = { ...props, activeClassName: styles.active };
             }
             if (useButton) {
-                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{this.getChildren()}</button>);
+                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{children}</button>);
             }
             return (<ComposedComponent {...props} href={href} className={classes} onClick={onClick} onPlainLeftClick={onPlainLeftClick} data-test={dataTests('ring-link', dataTest)}>
-          {this.getChildren()}
+          {children}
         </ComposedComponent>);
         }
     };

package/components/list/consts.d.ts

@@ -14,17 +14,17 @@ export declare enum Type {
     TITLE = 5,
     MARGIN = 6
 }
-export declare enum 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 declare const 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;
+};
 export declare const DEFAULT_ITEM_TYPE = Type.ITEM;
 export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' | 'onMouseUp'>> & {
     rgItemType?: Type | null | undefined;

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;
 /**
@@ -144,7 +144,17 @@ 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;
@@ -171,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/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-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 {

package/components/pager/pager.js

@@ -107,14 +107,8 @@ export default class Pager extends PureComponent {
         const prevIcon = (<Icon glyph={chevronLeftIcon} key="icon"/>);
         const prevText = this.props.translations?.previousPage ?? translate('previousPage');
         const nextText = this.props.translations?.nextPage ?? translate('nextPage');
-        const nextLinkContent = (WrapText) => [
-            <span key="text"><WrapText>{nextText}</WrapText></span>,
-            nextIcon
-        ];
-        const prevLinkContent = (WrapText) => [
-            prevIcon,
-            <span key="text"><WrapText>{prevText}</WrapText></span>
-        ];
+        const nextLinkContent = [<span key="text">{nextText}</span>, nextIcon];
+        const prevLinkContent = [prevIcon, <span key="text">{prevText}</span>];
         const prevLinkHref = this.generateHref(this.props.currentPage - 1);
         const nextLinkHref = this.generateHref(this.props.currentPage + 1);
         const disabledLinkClasses = classNames({