@jetbrains/ring-ui 7.0.0-beta.8 → 7.0.0

package/components/list/list.js

@@ -37,19 +37,14 @@ function isItemType(listItemType, item) {
     }
     return type === listItemType;
 }
-const nonActivatableTypes = [
-    Type.SEPARATOR,
-    Type.TITLE,
-    Type.MARGIN
-];
+const nonActivatableTypes = [Type.SEPARATOR, Type.TITLE, Type.MARGIN];
 function isActivatable(item) {
     return item != null && !nonActivatableTypes.includes(item.rgItemType) && !item.disabled;
 }
 function getDataHash(data) {
     return data.map(it => `${it.key}-${it.disabled}`).join('-');
 }
-const shouldActivateFirstItem = (props) => props.activateFirstItem ||
-    props.activateSingleItem && props.data.length === 1;
+const shouldActivateFirstItem = (props) => props.activateFirstItem || (props.activateSingleItem && props.data.length === 1);
 export const ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
 /**
  * @name List
@@ -72,7 +67,7 @@ export default class List extends Component {
         shortcuts: false,
         renderOptimization: true,
         disableMoveDownOverflow: false,
-        ariaLabel: 'List'
+        ariaLabel: 'List',
     };
     state = {
         activeIndex: null,
@@ -83,7 +78,7 @@ export default class List extends Component {
         scrolling: false,
         hasOverflow: false,
         disabledHover: false,
-        scrolledToBottom: false
+        scrolledToBottom: false,
     };
     static getDerivedStateFromProps(nextProps, prevState) {
         const { prevActiveIndex, prevData, activeItem } = prevState;
@@ -92,26 +87,23 @@ export default class List extends Component {
         if (data !== prevData) {
             Object.assign(nextState, {
                 activeIndex: null,
-                activeItem: null
+                activeItem: null,
             });
         }
         if (activeIndex != null && activeIndex !== prevActiveIndex && data[activeIndex] != null) {
             Object.assign(nextState, {
                 activeIndex,
                 activeItem: data[activeIndex],
-                needScrollToActive: true
+                needScrollToActive: true,
             });
         }
-        else if (data !== prevData &&
-            restoreActiveIndex &&
-            activeItem != null &&
-            activeItem.key != null) {
+        else if (data !== prevData && restoreActiveIndex && activeItem != null && activeItem.key != null) {
             // Restore active index if there is an item with the same "key" property
             const index = data.findIndex(item => item.key === activeItem.key);
             if (index >= 0) {
                 Object.assign(nextState, {
                     activeIndex: index,
-                    activeItem: data[index]
+                    activeItem: data[index],
                 });
             }
         }
@@ -125,9 +117,8 @@ export default class List extends Component {
         }
     }
     shouldComponentUpdate(nextProps, nextState) {
-        return nextProps !== this.props ||
-            Object.keys(nextState).
-                some(key => nextState[key] !== this.state[key]);
+        return (nextProps !== this.props ||
+            Object.keys(nextState).some(key => nextState[key] !== this.state[key]));
     }
     componentDidUpdate(prevProps) {
         if (this.virtualizedList && prevProps.data !== this.props.data) {
@@ -151,7 +142,7 @@ export default class List extends Component {
     static ListHint = ListHint;
     static ListProps = {
         Type,
-        Dimension
+        Dimension,
     };
     virtualizedList;
     unmounted;
@@ -164,7 +155,7 @@ export default class List extends Component {
             this.setState({
                 activeIndex: index,
                 activeItem: this.props.data[index],
-                needScrollToActive: false
+                needScrollToActive: false,
             });
         }
     }));
@@ -197,7 +188,7 @@ export default class List extends Component {
     _cache = new CellMeasurerCache({
         defaultHeight: this.defaultItemHeight(),
         fixedWidth: true,
-        keyMapper: this.sizeCacheKey
+        keyMapper: this.sizeCacheKey,
     });
     _hasActivatableItems = memoizeOne(items => items.some(isActivatable));
     hasActivatableItems() {
@@ -209,7 +200,7 @@ export default class List extends Component {
             this.setState({
                 activeIndex: firstActivatableIndex,
                 activeItem: this.props.data[firstActivatableIndex],
-                needScrollToActive: true
+                needScrollToActive: true,
             });
         }
     };
@@ -295,7 +286,7 @@ export default class List extends Component {
         this.setState({
             activeIndex: correctedIndex,
             activeItem: item,
-            needScrollToActive: true
+            needScrollToActive: true,
         }, function onSet() {
             if (!isActivatable(item)) {
                 retryCallback(e);
@@ -342,7 +333,7 @@ export default class List extends Component {
     clearSelected = () => {
         this.setState({
             activeIndex: null,
-            needScrollToActive: false
+            needScrollToActive: false,
         });
     };
     defaultItemHeight() {
@@ -366,7 +357,7 @@ export default class List extends Component {
     checkOverflow = () => {
         if (this.inner) {
             this.setState({
-                hasOverflow: this.inner.scrollHeight - this.inner.clientHeight > 1
+                hasOverflow: this.inner.scrollHeight - this.inner.clientHeight > 1,
             });
         }
     };
@@ -408,7 +399,7 @@ export default class List extends Component {
             }
             const itemProps = Object.assign({ rgItemType: DEFAULT_ITEM_TYPE }, restProps);
             itemKey = key || itemId;
-            itemProps.hover = (realIndex === this.state.activeIndex);
+            itemProps.hover = realIndex === this.state.activeIndex;
             if (itemProps.hoverClassName != null && itemProps.hover) {
                 itemProps.className = classNames(itemProps.className, itemProps.hoverClassName);
             }
@@ -454,17 +445,13 @@ export default class List extends Component {
             }
             el = <ItemComponent {...itemProps} key={itemProps.key}/>;
         }
-        return parent
-            ? (<CellMeasurer cache={this._cache} key={itemKey} parent={parent} rowIndex={index} columnIndex={0}>
-          {({ registerChild }) => (<div ref={registerChild} style={style} role="row" id={itemId}>
-              <div role="cell">
-                {el}
-              </div>
-            </div>)}
-        </CellMeasurer>)
-            : (<div role="row" id={itemId} key={itemKey}>
-          <div role="cell">{el}</div>
-        </div>);
+        return parent ? (<CellMeasurer cache={this._cache} key={itemKey} parent={parent} rowIndex={index} columnIndex={0}>
+        {({ registerChild }) => (<div ref={registerChild} style={style} role="row" id={itemId}>
+            <div role="cell">{el}</div>
+          </div>)}
+      </CellMeasurer>) : (<div role="row" id={itemId} key={itemKey}>
+        <div role="cell">{el}</div>
+      </div>);
     };
     addItemDataTestToProp = (props) => {
         props['data-test'] = dataTests('ring-list-item', props['data-test']);
@@ -483,7 +470,7 @@ export default class List extends Component {
         }
         return this._inner;
     }
-    renderVirtualizedInner({ height, maxHeight, autoHeight = false, rowCount, isScrolling, onChildScroll = noop, scrollTop, registerChild }) {
+    renderVirtualizedInner({ height, maxHeight, autoHeight = false, rowCount, isScrolling, onChildScroll = noop, scrollTop, registerChild, }) {
         const dirOverride = { direction: 'inherit' }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
         return (<AutoSizer disableHeight onResize={this.props.onResize}>
         {({ width }) => (<div ref={registerChild}>
@@ -492,9 +479,7 @@ export default class List extends Component {
                     this.scrollEndHandler();
                 }} scrollTop={scrollTop} rowCount={rowCount} estimatedRowSize={this.defaultItemHeight()} rowHeight={this._cache.rowHeight} rowRenderer={this.renderItem} overscanRowCount={this._bufferSize} 
             // ensure rerendering
-            noop={() => { }} scrollToIndex={!this.props.disableScrollToActive &&
-                    this.state.needScrollToActive &&
-                    this.state.activeIndex != null
+            noop={() => { }} scrollToIndex={!this.props.disableScrollToActive && this.state.needScrollToActive && this.state.activeIndex != null
                     ? this.state.activeIndex + 1
                     : undefined} scrollToAlignment="center" deferredMeasurementCache={this._cache} onRowsRendered={this.checkOverflow}/>
           </div>)}
@@ -504,22 +489,18 @@ export default class List extends Component {
         if (maxHeight) {
             return this.renderVirtualizedInner({ height: maxHeight, maxHeight, rowCount });
         }
-        return (<WindowScroller>
-        {props => this.renderVirtualizedInner({ ...props, rowCount, autoHeight: true })}
-      </WindowScroller>);
+        return (<WindowScroller>{props => this.renderVirtualizedInner({ ...props, rowCount, autoHeight: true })}</WindowScroller>);
     }
     renderSimple(maxHeight, rowCount) {
         const items = [];
         for (let index = 0; index < rowCount; index++) {
             items.push(this.renderItem({
                 index,
-                isScrolling: this.state.scrolling
+                isScrolling: this.state.scrolling,
             }));
         }
         return (<div className={classNames('ring-list__i', styles.simpleInner)} onScroll={this.scrollHandler} onMouseMove={this.mouseHandler}>
-        <div aria-label={this.props.ariaLabel} role="grid" style={maxHeight
-                ? { maxHeight: this.getVisibleListHeight(maxHeight) }
-                : undefined}>
+        <div aria-label={this.props.ariaLabel} role="grid" style={maxHeight ? { maxHeight: this.getVisibleListHeight(maxHeight) } : undefined}>
           {items}
         </div>
       </div>);
@@ -535,11 +516,11 @@ export default class List extends Component {
         'meta+enter': this.enterHandler,
         'ctrl+enter': this.enterHandler,
         'command+enter': this.enterHandler,
-        'shift+enter': this.enterHandler
+        'shift+enter': this.enterHandler,
     };
     /** @override */
     render() {
-        const hint = this.getSelected() && this.props.hintOnSelection || this.props.hint;
+        const hint = (this.getSelected() && this.props.hintOnSelection) || this.props.hint;
         const fadeStyles = hint ? { bottom: Dimension.ITEM_HEIGHT } : undefined;
         const rowCount = this.props.data.length + 2;
         const maxHeight = this.props.maxHeight && this.getVisibleListHeight(this.props.maxHeight);
@@ -547,15 +528,12 @@ export default class List extends Component {
         return (<>
         <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.props.shortcutsMap
-                        ? { ...this.shortcutsMap, ...this.props.shortcutsMap }
-                        : this.shortcutsMap} scope={this.shortcutsScope}/>)}
+          {this.props.shortcuts && (<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)}
-          {this.state.hasOverflow && !this.state.scrolledToBottom && (<div className={styles.fade} style={fadeStyles}/>)}
-          {hint && (<ListHint label={hint}/>)}
+          {this.state.hasOverflow && !this.state.scrolledToBottom && <div className={styles.fade} style={fadeStyles}/>}
+          {hint && <ListHint label={hint}/>}
         </div>
       </>);
     }

package/components/list/list__custom.js

@@ -16,14 +16,12 @@ export default class ListCustom extends PureComponent {
         const classes = classNames(styles.item, className, {
             [styles.action]: !disabled,
             [styles.hover]: hover && !disabled,
-            [styles.scrolling]: scrolling
+            [styles.scrolling]: scrolling,
         });
         const dataTest = dataTests('ring-list-item-custom', {
-            'ring-list-item-action': !disabled
+            'ring-list-item-action': !disabled,
         }, restProps['data-test']);
-        const content = (typeof template === 'function')
-            ? template(this.props)
-            : template;
+        const content = typeof template === 'function' ? template(this.props) : template;
         const TagName = tagName || 'span';
         return (<TagName role={role || 'button'} tabIndex={tabIndex} onClick={onClick} onKeyPress={this.handleKeyPress} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} data-test={dataTest}>
         {content}

package/components/list/list__hint.js

@@ -7,6 +7,8 @@ import styles from './list.css';
  */
 export default class ListHint extends PureComponent {
     render() {
-        return (<span className={classnames(styles.item, styles.hint)} data-test="ring-list-hint">{this.props.label}</span>);
+        return (<span className={classnames(styles.item, styles.hint)} data-test="ring-list-hint">
+        {this.props.label}
+      </span>);
     }
 }

package/components/list/list__item.js

@@ -29,16 +29,14 @@ export default class ListItem extends PureComponent {
             [styles.hover]: hover && !disabled,
             [styles.compact]: compact,
             [styles.scrolling]: scrolling,
-            [styles.disabled]: disabled
+            [styles.disabled]: disabled,
         });
         const detailsClasses = classNames({
             [styles.details]: details,
-            [styles.padded]: icon !== undefined ||
-                checkbox !== undefined ||
-                glyph !== undefined
+            [styles.padded]: icon !== undefined || checkbox !== undefined || glyph !== undefined,
         });
         const style = {
-            paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
+            paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`,
         };
         let computedTitle = null;
         if (this._isString(title)) {
@@ -53,9 +51,11 @@ export default class ListItem extends PureComponent {
         const dataTest = dataTests({
             'ring-list-item': (restProps['data-test'] || '').indexOf('ring-list-item') === -1,
             'ring-list-item-action': !disabled,
-            'ring-list-item-selected': checkbox
+            'ring-list-item-selected': checkbox,
         }, restProps['data-test']);
-        const labelElement = (<span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>);
+        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}/>
@@ -70,11 +70,13 @@ export default class ListItem extends PureComponent {
 
             {labelWrapper ? labelWrapper(labelElement) : labelElement}
 
-            {description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
+            {description && (<span className={styles.description} data-test="ring-list-item-description">
+                {description}
+              </span>)}
 
             <div className={styles.right}>
               {rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} suppressSizeWarning={this.props.suppressSizeWarning} size={this.props.iconSize}/>)}
-              {icon && (<div className={styles.icon} style={{ backgroundImage: `url("${icon}")` }}/>)}
+              {icon && <div className={styles.icon} style={{ backgroundImage: `url("${icon}")` }}/>}
               {rightNodes}
             </div>
           </div>

package/components/list/list__link.js

@@ -13,7 +13,7 @@ export default class ListLink extends PureComponent {
         const classes = classNames(styles.item, className, {
             [styles.actionLink]: !disabled,
             [styles.compact]: compact,
-            [styles.scrolling]: scrolling
+            [styles.scrolling]: scrolling,
         });
         const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
         return (<Comp pseudo={!this.props.href} {...restProps} hover={hover && !disabled} className={classes} data-test={dataTests('ring-list-link', dataTest)}>

package/components/list/list__separator.js

@@ -5,8 +5,8 @@ export default class ListSeparator extends PureComponent {
     render() {
         const { description, isFirst, className } = this.props;
         const classes = classNames(styles.separator, className, {
-            [styles.separator_first]: isFirst
+            [styles.separator_first]: isFirst,
         });
-        return (<span className={classes}>{description}</span>);
+        return <span className={classes}>{description}</span>;
     }
 }

package/components/list/list__title.js

@@ -5,11 +5,15 @@ export default class ListTitle extends PureComponent {
     render() {
         const { className, description, label, isFirst } = this.props;
         const classes = classnames(styles.title, className, {
-            [styles.title_first]: isFirst
+            [styles.title_first]: isFirst,
         });
         return (<span className={classes} data-test="ring-list-title">
-        <span className={classnames(styles.label, styles.text)} data-test="ring-list-title-label">{label}</span>
-        <div className={styles.description} data-test="ring-list-title-description">{description}</div>
+        <span className={classnames(styles.label, styles.text)} data-test="ring-list-title-label">
+          {label}
+        </span>
+        <div className={styles.description} data-test="ring-list-title-description">
+          {description}
+        </div>
       </span>);
     }
 }

package/components/list/list__users-groups-source.js

@@ -10,7 +10,7 @@ const defaultOptions = {
         // eslint-disable-next-line @typescript-eslint/no-magic-numbers
         const plural = count % 10 !== 1 || count % 100 === 11;
         return `${count} member${plural ? 's' : ''}`;
-    }
+    },
 };
 var Filter;
 (function (Filter) {
@@ -26,9 +26,7 @@ export default class ListUsersGroupsSource extends HubSourceUsersGroups {
         this.listSourceOptions = Object.assign({}, defaultOptions, options);
     }
     getGroupsSectionTitle(groups) {
-        return groups.length
-            ? this.listSourceOptions.GroupsTitle
-            : this.listSourceOptions.NoGroupsTitle;
+        return groups.length ? this.listSourceOptions.GroupsTitle : this.listSourceOptions.NoGroupsTitle;
     }
     getUsersSectionTitle(users) {
         return users.length ? this.listSourceOptions.UsersTitle : this.listSourceOptions.NoUsersTitle;
@@ -40,7 +38,7 @@ export default class ListUsersGroupsSource extends HubSourceUsersGroups {
             items.push({
                 rgItemType: List.ListProps.Type.SEPARATOR,
                 key: 2,
-                description: this.getUsersSectionTitle(users)
+                description: this.getUsersSectionTitle(users),
             });
         }
         if (filter !== Filter.GROUPS) {
@@ -49,14 +47,14 @@ export default class ListUsersGroupsSource extends HubSourceUsersGroups {
                 key: user.id,
                 label: user.name,
                 avatar: user.profile ? user.profile.avatar?.url : null,
-                description: user.login
+                description: user.login,
             }));
         }
         if (filter === Filter.ALL) {
             items.push({
                 rgItemType: List.ListProps.Type.SEPARATOR,
                 key: 1,
-                description: this.getGroupsSectionTitle(groups)
+                description: this.getGroupsSectionTitle(groups),
             });
         }
         if (filter !== Filter.USERS) {
@@ -66,7 +64,7 @@ export default class ListUsersGroupsSource extends HubSourceUsersGroups {
                 label: group.name,
                 avatar: group.iconUrl,
                 glyph: group.iconUrl ? null : GroupIcon,
-                description: this.listSourceOptions.getPluralForUserCount(group.userCount)
+                description: this.listSourceOptions.getPluralForUserCount(group.userCount),
             }));
         }
         return items;

package/components/loader/loader.js

@@ -29,6 +29,6 @@ export default class Loader extends PureComponent {
     };
     render() {
         const { message, size, colors, 'data-test': dataTest, stop, deterministic, ...restProps } = this.props;
-        return (<div data-test={dataTests('ring-loader', dataTest)} {...restProps} ref={this.initLoader}/>);
+        return <div data-test={dataTests('ring-loader', dataTest)} {...restProps} ref={this.initLoader}/>;
     }
 }

package/components/loader/loader__core.js

@@ -46,15 +46,15 @@ export default class LoaderCore {
             { 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
-        ]
+            { r: 227, g: 37, b: 129 }, //#E32581
+        ],
     };
     static calculateGradient(startColor, stopColor, position) {
         const calculateChannelValue = (a, b) => a + Math.round((b - a) * position);
         return {
             r: calculateChannelValue(startColor.r, stopColor.r),
             g: calculateChannelValue(startColor.g, stopColor.g),
-            b: calculateChannelValue(startColor.b, stopColor.b)
+            b: calculateChannelValue(startColor.b, stopColor.b),
         };
     }
     props;
@@ -134,7 +134,7 @@ export default class LoaderCore {
     handleLimits(coord, radius, speed, limit) {
         const randomFunc = this.props.deterministic ? deterministic : Math.random;
         const randomizedSpeedChange = randomFunc() - this.baseSpeed / 2;
-        if (coord + (radius * 2) + this.baseSpeed >= limit) {
+        if (coord + radius * 2 + this.baseSpeed >= limit) {
             return -(this.baseSpeed + randomizedSpeedChange);
         }
         else if (coord <= this.baseSpeed) {
@@ -179,7 +179,7 @@ export default class LoaderCore {
             x: this.x,
             y: this.y,
             radius: this.radius,
-            color: this.getNextColor()
+            color: this.getNextColor(),
         }));
     }
     removeDeadParticles() {

package/components/loader-inline/loader-inline.css

@@ -1,13 +1,10 @@
 @import "../global/variables.css";
 
-@value dark from "../global/variables_dark.css";
-
 :root {
   /* stylelint-disable-next-line color-no-hex */
   --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
 }
 
-.dark,
 :global(.ring-ui-theme-dark) {
   /* stylelint-disable-next-line color-no-hex */
   --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;

package/components/loader-inline/loader-inline.js

@@ -9,13 +9,11 @@ class LoaderInline extends PureComponent {
     render() {
         const { className, 'data-test': dataTest, children, ...restProps } = this.props;
         const classes = classNames(styles.loader, className);
-        const loader = (<div {...restProps} data-test={dataTests('ring-loader-inline', dataTest)} className={classes}/>);
-        return children
-            ? (<>
-          {loader}
-          <span className={styles.children}>{children}</span>
-        </>)
-            : loader;
+        const loader = <div {...restProps} data-test={dataTests('ring-loader-inline', dataTest)} className={classes}/>;
+        return children ? (<>
+        {loader}
+        <span className={styles.children}>{children}</span>
+      </>) : (loader);
     }
 }
 export default LoaderInline;

package/components/loader-screen/loader-screen.js

@@ -10,7 +10,7 @@ export default class LoaderScreen extends PureComponent {
         const { message, className, containerClassName, ...restProps } = this.props;
         const containerClasses = classNames(containerClassName, styles.loaderScreen);
         const loaderClasses = classNames(className, styles.loader, {
-            [styles.loaderWithoutSpacing]: !message
+            [styles.loaderWithoutSpacing]: !message,
         });
         return (<div className={containerClasses}>
         <Loader {...restProps} message={message} className={loaderClasses}/>

package/components/login-dialog/login-dialog.js

@@ -17,14 +17,14 @@ export default class LoginDialog extends Component {
         show: false,
         url: 'about:blank',
         renderFallbackLink: () => null,
-        showFallbackTimeout: DEFAULT_SHOW_FALLBACK_TIMEOUT
+        showFallbackTimeout: DEFAULT_SHOW_FALLBACK_TIMEOUT,
     };
     state = {
         loading: true,
         loggingIn: false,
         showFallbackLink: false,
         height: DEFAULT_HEIGHT,
-        width: DEFAULT_WIDTH
+        width: DEFAULT_WIDTH,
     };
     componentDidMount() {
         window.addEventListener('message', this.onMessage);
@@ -65,9 +65,9 @@ export default class LoginDialog extends Component {
           <iframe title="Login dialog" style={iFrameStyle} src={url} className={styles.iFrame} scrolling="no"/>
         </Content>
 
-        {loading && (<LoaderScreen message={loadingMessage} containerClassName={styles.nonOpaqueLoader}/>)}
+        {loading && <LoaderScreen message={loadingMessage} containerClassName={styles.nonOpaqueLoader}/>}
 
-        {showFallbackLink && (<div className={styles.fallbackLinkContainer}>{renderFallbackLink(loggingIn)}</div>)}
+        {showFallbackLink && <div className={styles.fallbackLinkContainer}>{renderFallbackLink(loggingIn)}</div>}
       </Dialog>);
     }
 }

package/components/login-dialog/service.js

@@ -7,20 +7,20 @@ const reactRoot = createRoot(containerElement);
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
-    reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
-        <LoginDialog {...props}/>
-      </ControlsHeightContext.Provider>));
+    reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+      <LoginDialog {...props}/>
+    </ControlsHeightContext.Provider>);
 }
 function noop() { }
 export default function showAuthDialog(props = { onCancel: noop }) {
     renderLoginDialog({
         ...props,
-        show: true
+        show: true,
     });
     return () => {
         renderLoginDialog({
             ...props,
-            show: false
+            show: false,
         });
     };
 }

package/components/markdown/markdown.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value p-margin: 10px;
-
 .inline {
   &,
   & p {
@@ -10,7 +8,9 @@
 }
 
 .markdown {
-  composes: font from  "../global/global.css";
+  --ring-markdown-p-margin: 10px;
+
+  composes: font from "../global/global.css";
 
   & ol,
   & ul {
@@ -23,12 +23,12 @@
     margin: 0;
 
     &:not(:first-child) {
-      margin-top: p-margin;
+      margin-top: var(--ring-markdown-p-margin);
     }
   }
 
   & li {
-    margin-top: p-margin;
+    margin-top: var(--ring-markdown-p-margin);
   }
 
   & li {
@@ -42,7 +42,7 @@
   }
 
   & hr {
-    margin: p-margin 0;
+    margin: var(--ring-markdown-p-margin) 0;
 
     border: none;
     border-bottom: 1px solid var(--ring-line-color);

package/components/markdown/markdown.d.ts

@@ -5,8 +5,8 @@ export interface MarkdownProps {
     className?: string | null | undefined;
 }
 /**
-  * @name Markdown
-*/
+ * @name Markdown
+ */
 export default class Markdown extends PureComponent<MarkdownProps> {
     render(): import("react").JSX.Element;
 }

package/components/markdown/markdown.js

@@ -4,17 +4,15 @@ import headingStyles from '../heading/heading.css';
 import linkStyles from '../link/link.css';
 import styles from './markdown.css';
 /**
-  * @name Markdown
-*/
+ * @name Markdown
+ */
 export default class Markdown extends PureComponent {
     render() {
         const { className, children, inline } = this.props;
         const classes = classNames(className, headingStyles.contentWithHeadings, linkStyles.withLinks, {
             [styles.markdown]: !inline,
-            [styles.inline]: inline
+            [styles.inline]: inline,
         });
-        return (<div className={classes}>
-        {children}
-      </div>);
+        return <div className={classes}>{children}</div>;
     }
 }