@jetbrains/ring-ui 5.0.0-beta.3 → 5.0.0-beta.4

package/CHANGELOG.md

@@ -2,7 +2,15 @@
 
 ### BREAKING CHANGES
 - The codebase has migrated to TypeScript
-
+- `react-markdown` has been updated to v7, which affects the props of `Markdown` component. The most notable change is replacing `source` with `children`:
+  ```js
+  // before
+  <Markdown source="some markdown" />
+  
+  // after
+  <Markdown>some markdown</Markdown>
+  ```
+  See `react-markdown`'s [changelog](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15) for other changes
 
 ## [4.1.0]
 

package/components/markdown/code.d.ts

@@ -1,16 +1,9 @@
 /// <reference types="react" />
-import PropTypes from 'prop-types';
-interface MarkdownCodeProps {
-    language?: string | null | undefined;
-    value?: string | null | undefined;
-    inline?: boolean | undefined;
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+declare module 'react-markdown/lib/complex-types' {
+    interface ReactMarkdownProps {
+        language?: string;
+    }
 }
-declare const MarkdownCode: {
-    ({ value, language, inline }: MarkdownCodeProps): JSX.Element;
-    propTypes: {
-        language: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        inline: PropTypes.Requireable<boolean>;
-    };
-};
+declare const MarkdownCode: ({ children, language, inline }: CodeProps) => JSX.Element;
 export default MarkdownCode;

package/components/markdown/code.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Code from '../code/code';
-const MarkdownCode = ({ value, language, inline }) => (<Code language={language} code={value || ''} inline={inline}/>);
+const MarkdownCode = ({ children, language, inline }) => (<Code language={language} code={children?.join('') || ''} inline={inline}/>);
 MarkdownCode.propTypes = {
     language: PropTypes.string,
-    value: PropTypes.string,
+    children: PropTypes.array.isRequired,
     inline: PropTypes.bool
 };
 export default MarkdownCode;

package/components/markdown/heading.d.ts

@@ -1,15 +1,11 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
-import { Levels } from '../heading/heading';
-export interface MarkdownHeadingProps {
-    level?: Levels | undefined;
-    children?: ReactNode;
-}
+import { HeadingProps } from 'react-markdown/lib/ast-to-react';
 declare const MarkdownHeading: {
-    ({ level, children }: MarkdownHeadingProps): JSX.Element;
+    ({ level, children }: HeadingProps): JSX.Element;
     propTypes: {
-        level: PropTypes.Requireable<number>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        level: PropTypes.Validator<number>;
+        children: PropTypes.Validator<any[]>;
     };
 };
 export default MarkdownHeading;

package/components/markdown/heading.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Heading from '../heading/heading';
 const MarkdownHeading = ({ level, children }) => <Heading level={level}>{children}</Heading>;
 MarkdownHeading.propTypes = {
-    level: PropTypes.number,
-    children: PropTypes.node
+    level: PropTypes.number.isRequired,
+    children: PropTypes.array.isRequired
 };
 export default MarkdownHeading;

package/components/markdown/link.d.ts

@@ -1,16 +1,12 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
-export interface MarkdownLinkProps {
-    href?: string | undefined;
-    title?: string | undefined;
-    children?: ReactNode;
-}
+import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
 declare const MarkdownLink: {
-    ({ href, title, children }: MarkdownLinkProps): JSX.Element;
+    ({ href, title, children }: JSX.IntrinsicElements['a'] & ReactMarkdownProps): JSX.Element;
     propTypes: {
         href: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Validator<any[]>;
     };
 };
 export default MarkdownLink;

package/components/markdown/link.js

@@ -5,6 +5,6 @@ const MarkdownLink = ({ href, title, children }) => <Link href={href} title={tit
 MarkdownLink.propTypes = {
     href: PropTypes.string,
     title: PropTypes.string,
-    children: PropTypes.node
+    children: PropTypes.array.isRequired
 };
 export default MarkdownLink;

package/components/markdown/markdown.d.ts

@@ -1,10 +1,9 @@
 import { PureComponent } from 'react';
-import { ReactMarkdownProps } from 'react-markdown';
+import { Options } from 'react-markdown';
 export interface BaseMarkdownProps {
-    source: string;
     inline?: boolean | null | undefined;
 }
-export declare type MarkdownProps = ReactMarkdownProps & BaseMarkdownProps;
+export declare type MarkdownProps = Options & BaseMarkdownProps;
 /**
   * @name Markdown
 */

package/components/markdown/markdown.js

@@ -15,27 +15,30 @@ import styles from './markdown.css';
 */
 export default class Markdown extends PureComponent {
     render() {
-        const { className, renderers, inline, source, plugins = [], ...restProps } = this.props;
+        const { className, components, inline, children, plugins = [], ...restProps } = this.props;
         const classes = classNames(className, {
             [styles.markdown]: !inline,
             [styles.inline]: inline
         });
-        return (<ReactMarkdown className={classes} source={normalizeIndent(source)} plugins={[RemarkBreaks, RemarkGFM, ...plugins]} renderers={{
-                link: Link,
-                linkReference: Link,
+        return (<ReactMarkdown className={classes} plugins={[RemarkBreaks, RemarkGFM, ...plugins]} components={{
+                a: Link,
                 code: Code,
-                inlineCode: Code,
-                heading: Heading,
-                ...renderers
-            }} {...restProps}/>);
+                h1: Heading,
+                h2: Heading,
+                h3: Heading,
+                h4: Heading,
+                h5: Heading,
+                h6: Heading,
+                ...components
+            }} {...restProps}>{normalizeIndent(children)}</ReactMarkdown>);
     }
 }
 Markdown.propTypes = {
     inline: PropTypes.bool,
-    source: PropTypes.string,
+    children: PropTypes.string,
     className: PropTypes.string,
-    renderers: PropTypes.object,
+    components: PropTypes.object,
     plugins: PropTypes.array
 };
-const md = trivialTemplateTag(source => <Markdown {...{ source }}/>);
+const md = trivialTemplateTag(source => <Markdown>{source}</Markdown>);
 export { md };

package/components/tabs/collapsible-tab.js

@@ -9,7 +9,7 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect =
     if (child == null || typeof child !== 'object' || child.type === CustomItem) {
         return child;
     }
-    const { title, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;
+    const { title, titleProps, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;
     const titleClasses = classNames(styles.title, className, {
         [styles.selected]: selected,
         [styles.collapsed]: collapsed,
@@ -17,7 +17,7 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect =
         [collapsedClassName ?? '']: collapsed,
         [collapsedActiveClassName ?? '']: collapsed && selected
     });
-    return (<TabLink title={title} isSelected={selected} active href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed}/>);
+    return (<TabLink title={title} isSelected={selected} active href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
 });
 TabTitle.propTypes = {
     child: PropTypes.element,

package/components/tabs/dumb-tabs.js

@@ -30,13 +30,13 @@ class Tabs extends PureComponent {
             return child;
         }
         const { selected } = this.props;
-        const { title, id, disabled, href, className, activeClassName } = child.props;
+        const { title, titleProps, id, disabled, href, className, activeClassName } = child.props;
         const key = id || String(i);
         const isSelected = key === selected;
         const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
             [styles.selected]: isSelected
         });
-        return (<TabLink title={title} isSelected={isSelected} active key={key} href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)}/>);
+        return (<TabLink title={title} isSelected={isSelected} active key={key} href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)} {...titleProps}/>);
     };
     render() {
         const { className, children, selected, theme, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;

package/components/tabs/tab.d.ts

@@ -1,7 +1,9 @@
 import { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { TabLinkProps } from './tab-link';
 export interface TabProps {
     title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+    titleProps?: Partial<TabLinkProps>;
     id?: string | null | undefined;
     className?: string | null | undefined;
     children?: ReactNode;

package/components/user-agreement/user-agreement.js

@@ -57,7 +57,7 @@ export default class UserAgreement extends PureComponent {
         return (<Dialog label={translations.userAgreement} show={show} className={classNames(style.agreementDialog, className)} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test="user-agreement">
         <Header>{translations.userAgreement}</Header>
         <Content fade onScrollToBottom={this.onScrollToBottom}>
-          <Markdown source={text}/>
+          <Markdown>{text}</Markdown>
         </Content>
         {!preview && (<Panel>
             {onRemindLater && !scrolledDown && (<div className={style.suggestion}>{translations.scrollToAccept}</div>)}

package/dist/markdown/code.d.ts

@@ -1,16 +1,9 @@
 /// <reference types="react" />
-import PropTypes from 'prop-types';
-interface MarkdownCodeProps {
-    language?: string | null | undefined;
-    value?: string | null | undefined;
-    inline?: boolean | undefined;
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+declare module 'react-markdown/lib/complex-types' {
+    interface ReactMarkdownProps {
+        language?: string;
+    }
 }
-declare const MarkdownCode: {
-    ({ value, language, inline }: MarkdownCodeProps): JSX.Element;
-    propTypes: {
-        language: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        inline: PropTypes.Requireable<boolean>;
-    };
-};
+declare const MarkdownCode: ({ children, language, inline }: CodeProps) => JSX.Element;
 export default MarkdownCode;

package/dist/markdown/code.js

@@ -10,20 +10,20 @@ import '../global/memoize.js';
 
 const MarkdownCode = _ref => {
   let {
-    value,
+    children,
     language,
     inline
   } = _ref;
   return /*#__PURE__*/React.createElement(Code, {
     language: language,
-    code: value || '',
+    code: (children === null || children === void 0 ? void 0 : children.join('')) || '',
     inline: inline
   });
 };
 
 MarkdownCode.propTypes = {
   language: PropTypes.string,
-  value: PropTypes.string,
+  children: PropTypes.array.isRequired,
   inline: PropTypes.bool
 };
 

package/dist/markdown/heading.d.ts

@@ -1,15 +1,11 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
-import { Levels } from '../heading/heading';
-export interface MarkdownHeadingProps {
-    level?: Levels | undefined;
-    children?: ReactNode;
-}
+import { HeadingProps } from 'react-markdown/lib/ast-to-react';
 declare const MarkdownHeading: {
-    ({ level, children }: MarkdownHeadingProps): JSX.Element;
+    ({ level, children }: HeadingProps): JSX.Element;
     propTypes: {
-        level: PropTypes.Requireable<number>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        level: PropTypes.Validator<number>;
+        children: PropTypes.Validator<any[]>;
     };
 };
 export default MarkdownHeading;

package/dist/markdown/heading.js

@@ -16,8 +16,8 @@ const MarkdownHeading = _ref => {
 };
 
 MarkdownHeading.propTypes = {
-  level: PropTypes.number,
-  children: PropTypes.node
+  level: PropTypes.number.isRequired,
+  children: PropTypes.array.isRequired
 };
 
 export { MarkdownHeading as default };

package/dist/markdown/link.d.ts

@@ -1,16 +1,12 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
-export interface MarkdownLinkProps {
-    href?: string | undefined;
-    title?: string | undefined;
-    children?: ReactNode;
-}
+import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
 declare const MarkdownLink: {
-    ({ href, title, children }: MarkdownLinkProps): JSX.Element;
+    ({ href, title, children }: JSX.IntrinsicElements['a'] & ReactMarkdownProps): JSX.Element;
     propTypes: {
         href: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Validator<any[]>;
     };
 };
 export default MarkdownLink;

package/dist/markdown/link.js

@@ -24,7 +24,7 @@ const MarkdownLink = _ref => {
 MarkdownLink.propTypes = {
   href: PropTypes.string,
   title: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.array.isRequired
 };
 
 export { MarkdownLink as default };

package/dist/markdown/markdown.d.ts

@@ -1,10 +1,9 @@
 import { PureComponent } from 'react';
-import { ReactMarkdownProps } from 'react-markdown';
+import { Options } from 'react-markdown';
 export interface BaseMarkdownProps {
-    source: string;
     inline?: boolean | null | undefined;
 }
-export declare type MarkdownProps = ReactMarkdownProps & BaseMarkdownProps;
+export declare type MarkdownProps = Options & BaseMarkdownProps;
 /**
   * @name Markdown
 */

package/dist/markdown/markdown.js

@@ -31,9 +31,9 @@ class Markdown extends PureComponent {
   render() {
     const {
       className,
-      renderers,
+      components,
       inline,
-      source,
+      children,
       plugins = [],
       ...restProps
     } = this.props;
@@ -43,29 +43,29 @@ class Markdown extends PureComponent {
     });
     return /*#__PURE__*/React.createElement(ReactMarkdown, _extends({
       className: classes,
-      source: normalizeIndent(source),
       plugins: [RemarkBreaks, RemarkGFM, ...plugins],
-      renderers: {
-        link: MarkdownLink,
-        linkReference: MarkdownLink,
+      components: {
+        a: MarkdownLink,
         code: MarkdownCode,
-        inlineCode: MarkdownCode,
-        heading: MarkdownHeading,
-        ...renderers
+        h1: MarkdownHeading,
+        h2: MarkdownHeading,
+        h3: MarkdownHeading,
+        h4: MarkdownHeading,
+        h5: MarkdownHeading,
+        h6: MarkdownHeading,
+        ...components
       }
-    }, restProps));
+    }, restProps), normalizeIndent(children));
   }
 
 }
 Markdown.propTypes = {
   inline: PropTypes.bool,
-  source: PropTypes.string,
+  children: PropTypes.string,
   className: PropTypes.string,
-  renderers: PropTypes.object,
+  components: PropTypes.object,
   plugins: PropTypes.array
 };
-const md = trivialTemplateTag(source => /*#__PURE__*/React.createElement(Markdown, {
-  source
-}));
+const md = trivialTemplateTag(source => /*#__PURE__*/React.createElement(Markdown, null, source));
 
 export { Markdown as default, md };

package/dist/tabs/collapsible-tab.js

@@ -29,6 +29,7 @@ const TabTitle = /*#__PURE__*/React.memo(function TabTitle(_ref) {
 
   const {
     title,
+    titleProps,
     disabled,
     href,
     className,
@@ -43,7 +44,7 @@ const TabTitle = /*#__PURE__*/React.memo(function TabTitle(_ref) {
     [collapsedClassName !== null && collapsedClassName !== void 0 ? collapsedClassName : '']: collapsed,
     [collapsedActiveClassName !== null && collapsedActiveClassName !== void 0 ? collapsedActiveClassName : '']: collapsed && selected
   });
-  return /*#__PURE__*/React.createElement(TabLink, {
+  return /*#__PURE__*/React.createElement(TabLink, _extends({
     title: title,
     isSelected: selected,
     active: true,
@@ -54,7 +55,7 @@ const TabTitle = /*#__PURE__*/React.memo(function TabTitle(_ref) {
     onPlainLeftClick: handleSelect,
     tabIndex: tabIndex,
     collapsed: collapsed
-  });
+  }, titleProps));
 });
 TabTitle.propTypes = {
   child: PropTypes.element,

package/dist/tabs/dumb-tabs.js

@@ -83,6 +83,7 @@ class Tabs extends PureComponent {
       } = this.props;
       const {
         title,
+        titleProps,
         id,
         disabled,
         href,
@@ -94,7 +95,7 @@ class Tabs extends PureComponent {
       const titleClasses = classNames(modules_02138f4a.title, className, isSelected && activeClassName, {
         [modules_02138f4a.selected]: isSelected
       });
-      return /*#__PURE__*/React.createElement(TabLink, {
+      return /*#__PURE__*/React.createElement(TabLink, _extends({
         title: title,
         isSelected: isSelected,
         active: true,
@@ -104,7 +105,7 @@ class Tabs extends PureComponent {
         className: titleClasses,
         disabled: disabled,
         onPlainLeftClick: this.handleSelect(key)
-      });
+      }, titleProps));
     });
   }
 

package/dist/tabs/tab.d.ts

@@ -1,7 +1,9 @@
 import { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { TabLinkProps } from './tab-link';
 export interface TabProps {
     title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+    titleProps?: Partial<TabLinkProps>;
     id?: string | null | undefined;
     className?: string | null | undefined;
     children?: ReactNode;

package/dist/user-agreement/user-agreement.js

@@ -101,9 +101,7 @@ class UserAgreement extends PureComponent {
     }, /*#__PURE__*/React.createElement(HeaderWrapper, null, translations.userAgreement), /*#__PURE__*/React.createElement(ContentWrapper, {
       fade: true,
       onScrollToBottom: this.onScrollToBottom
-    }, /*#__PURE__*/React.createElement(Markdown, {
-      source: text
-    })), !preview && /*#__PURE__*/React.createElement(Panel, null, onRemindLater && !scrolledDown && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(Markdown, null, text)), !preview && /*#__PURE__*/React.createElement(Panel, null, onRemindLater && !scrolledDown && /*#__PURE__*/React.createElement("div", {
       className: modules_f5ed85cf.suggestion
     }, translations.scrollToAccept), /*#__PURE__*/React.createElement(ThemedButton, {
       primary: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.4",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -228,12 +228,12 @@
     "postcss-modules-values-replace": "^3.4.0",
     "postcss-preset-env": "^7.0.1",
     "prop-types": "^15.7.2",
-    "react-markdown": "^5.0.3",
+    "react-markdown": "^7.1.1",
     "react-movable": "^3.0.2",
     "react-virtualized": "^9.22.3",
     "react-waypoint": "^10.1.0",
     "remark-breaks": "^3.0.2",
-    "remark-gfm": "^1.0.0",
+    "remark-gfm": "^3.0.1",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
     "sniffr": "^1.2.0",
@@ -246,5 +246,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "90ec989a2f0afb2778aa16172d5600790b56dd47"
+  "gitHead": "798abfb95b17849b74afc3899d7cfd2227f78478"
 }