@jetbrains/ring-ui 5.0.0-beta.7 → 5.0.1

package/CHANGELOG.md

@@ -39,6 +39,7 @@
   You can also pass `Theme.AUTO` to use the user-defined system theme.
   The only exceptions are the components that provide dark context by default: Alert, Header, Message. Those still accept a `theme` prop.
 - `--ring-dark-*` CSS custom properties are removed, `--ring-dark-text-color` is renamed to `--ring-white-text-color`
+- `--ring-message-background-color` is removed in favor of `--ring-popup-background-color`
 - 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
@@ -52,6 +53,18 @@
 - Removed `core-js@2` support
 - Removed `webpack@4` support
 
+## [4.2.0]
+
+### React 18 support
+
+To enable the new root API, add the following code before any rendering:
+```js
+import * as client from 'react-dom/client'
+import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
+
+setClient(client)
+```
+
 ## [4.1.0]
 
 ### Pre-built version

package/components/alert/alert.css

@@ -1,5 +1,6 @@
 @import "../global/variables.css";
 
+@value link from "../link/link.css";
 @value unit from "../global/global.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
@@ -23,7 +24,7 @@
   pointer-events: auto;
 
   border-radius: var(--ring-border-radius);
-  background-color: var(--ring-message-background-color);
+  background-color: var(--ring-popup-background-color);
   box-shadow: var(--ring-popup-shadow);
 
   font-size: var(--ring-font-size);

package/components/alert-service/alert-service.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter';
 import getUID from '../global/get-uid';
 import Alert, { ANIMATION_TIME, Container as AlertContainer } from '../alert/alert';
 /**

package/components/analytics/analytics__ga-plugin.d.ts

@@ -10,7 +10,7 @@ declare global {
  * @constructor
  */
 export default class AnalyticsGAPlugin implements AnalyticsPlugin {
-    constructor(gaId?: string | undefined, isDevelopment?: boolean | undefined, domain?: string);
+    constructor(gaId?: string | undefined, isDevelopment?: boolean | undefined, domain?: string, cookielessUserIdentifier?: string | undefined);
     trackEvent(category: string, action: string): void;
     trackPageView(path: string): void;
     get serializeAdditionalInfo(): boolean;

package/components/analytics/analytics__ga-plugin.js

@@ -4,7 +4,7 @@
  * @constructor
  */
 export default class AnalyticsGAPlugin {
-    constructor(gaId, isDevelopment, domain) {
+    constructor(gaId, isDevelopment, domain, cookielessUserIdentifier) {
         if (!gaId && !isDevelopment) {
             return;
         }
@@ -25,9 +25,18 @@ export default class AnalyticsGAPlugin {
          */
         const key = gaId || 'UA-57284711-1';
         /* global ga */
-        const gaCookieParams = domain ? { cookieDomain: domain } : {};
-        ga('create', key, (!gaId ? { cookieDomain: 'none' } : gaCookieParams));
+        if (cookielessUserIdentifier) {
+            ga('create', key, {
+                storage: 'none',
+                clientId: cookielessUserIdentifier
+            });
+        }
+        else {
+            const gaCookieParams = domain ? { cookieDomain: domain } : {};
+            ga('create', key, (!gaId ? { cookieDomain: 'none' } : gaCookieParams));
+        }
         ga('set', 'anonymizeIp', true);
+        ga('set', 'location', domain || '/');
         ga('set', 'allowAdFeatures', false);
     }
     trackEvent(category, action) {

package/components/auth/auth__core.js

@@ -727,9 +727,13 @@ export default class Auth {
         return await (stateId && this._storage?.getState(stateId)) || {};
     }
     _checkBackendsAreUp() {
+        const abortCtrl = new AbortController();
         const { backendCheckTimeout } = this.config;
         return Promise.all([
-            promiseWithTimeout(this.http.fetch('settings/public?fields=id'), backendCheckTimeout, { error: new Error('The authorization server is taking too long to respond. Please try again later.') }),
+            promiseWithTimeout(this.http.fetch('settings/public?fields=id', { signal: abortCtrl.signal }), backendCheckTimeout, {
+                error: new Error('The authorization server is taking too long to respond. Please try again later.'),
+                onTimeout: () => abortCtrl.abort()
+            }),
             this.config.checkBackendIsUp()
         ]).catch(err => {
             if (err instanceof TypeError) {

package/components/auth-dialog-service/auth-dialog-service.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter';
 import AuthDialog from '../auth-dialog/auth-dialog';
 /**
  * @name Auth Dialog Service

package/components/avatar/avatar.d.ts

@@ -49,3 +49,4 @@ export default class Avatar extends PureComponent<AvatarProps> {
     handleSuccess: () => void;
     render(): JSX.Element;
 }
+export declare type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/avatar/fallback-avatar.js

@@ -54,13 +54,13 @@ const Sizes = {
 };
 const sizeKeys = Object.keys(Sizes).map(Number);
 function extractLetters(name) {
-    const names = name.split(/[\s._]+/).filter(Boolean);
+    const names = name.split(/[\s._]+/).filter(Boolean).map(word => Array.from(word));
     if (names.length >= 2) {
         return names[0][0].toUpperCase() + names[1][0].toUpperCase();
     }
     else if (names.length === 1) {
         if (names[0].length >= 2) {
-            return names[0].slice(0, 2).toUpperCase();
+            return names[0].slice(0, 2).join('').toUpperCase();
         }
         else {
             return `${names[0][0].toUpperCase()}X`;

package/components/button/button.css

@@ -69,11 +69,11 @@
   &.active {
     transition: none;
 
-    box-shadow: button-shadow var(--ring-main-color);
+    box-shadow: inset 0 0 0 2px var(--ring-main-color);
   }
 
   &:global(.focus-visible).active {
-    box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
+    box-shadow: inset 0 0 0 2px var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
   }
 
   &[disabled] {
@@ -134,8 +134,8 @@
   }
 
   &[disabled] {
-    background-color: var(--ring-content-background-color);
-    box-shadow: button-shadow var(--ring-borders-color);
+    background-color: var(--ring-disabled-background-color);
+    box-shadow: button-shadow var(--ring-border-disabled-color);
   }
 
   &[disabled].loader {

package/components/button/button.d.ts

@@ -3,7 +3,7 @@ import React, { PureComponent, ButtonHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { IconType, Size } from '../icon/icon';
 import { ClickableLinkProps } from '../link/clickableLink';
-import { ControlsHeight } from '../global/controls-height';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 export interface ButtonBaseProps {
     height?: ControlsHeight | undefined;
     active?: boolean | null | undefined;
@@ -58,6 +58,7 @@ export declare class Button extends PureComponent<ButtonProps> {
     };
     static IconSize: typeof Size;
     static contextType: React.Context<ControlsHeight>;
+    context: React.ContextType<typeof ControlsHeightContext>;
     buttonRef: React.RefObject<HTMLButtonElement>;
     render(): JSX.Element;
 }

package/components/button-group/button-group.css

@@ -24,6 +24,8 @@
   border-radius: var(--ring-border-radius);
 
   box-shadow: button-shadow var(--ring-borders-color);
+
+  line-height: normal;
 }
 
 .buttonGroup .button {
@@ -103,13 +105,13 @@
 /* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.button.active {
   border-radius: var(--ring-border-radius);
-  box-shadow: button-shadow var(--ring-main-color);
+  box-shadow: inset 0 0 0 2px var(--ring-main-color);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button:global(.focus-visible).active {
   border-radius: var(--ring-border-radius);
-  box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
+  box-shadow: inset 0 0 0 2px var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */

package/components/checkbox/checkbox.css

@@ -36,7 +36,7 @@
   pointer-events: none;
 
   border: 1px solid var(--ring-borders-color);
-  border-radius: var(--ring-border-radius);
+  border-radius: var(--ring-border-radius-small);
   background-color: var(--ring-content-background-color);
 }
 
@@ -46,9 +46,8 @@
   width: calc(unit * 2);
   height: calc(unit * 2);
 
-  transition: opacity var(--ring-fast-ease), transform var(--ring-fast-ease);
-
   opacity: 0;
+  color: var(--ring-white-text-color);
 
   & svg {
     position: absolute;
@@ -60,8 +59,8 @@
 .check {
   composes: icon;
 
-  top: calc(unit * -1.5);
-  left: 1px;
+  top: -1px;
+  left: -1px;
 }
 
 .minus {
@@ -88,20 +87,17 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &:checked + .cell,
-  &:indeterminate[checked] + .cell,
-  &:indeterminate[data-checked="true"] + .cell {
-    border-color: var(--ring-border-hover-color);
-    background-color: var(--ring-selected-background-color);
+  &:indeterminate + .cell {
+    border-color: transparent;
+    background-color: var(--ring-main-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &:checked + .cell .check {
-    transform: translateY(unit);
-
     opacity: 1;
   }
 
-  &:focus + .cell,
+  &:global(.focus-visible) + .cell,
   &.focus + .cell {
     transition: background-color var(--ring-ease);
 

package/components/checkbox/checkbox.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
+import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
 import minusIcon from '@jetbrains/icons/remove-10px';
 import Icon from '../icon/icon';
 import styles from './checkbox.css';

package/components/checkbox-ng/checkbox-ng.js

@@ -1,6 +1,6 @@
 import angular from 'angular';
 
-import checkmarkIcon from '@jetbrains/icons/checkmark';
+import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
 
 import IconNG from '../icon-ng/icon-ng';
 import proxyAttrs from '../proxy-attrs/proxy-attrs';

package/components/confirm-service/confirm-service.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { render } from '../global/react-render-adapter';
 import Confirm from '../confirm/confirm';
 /**
  * @name Confirm Service

package/components/data-list/data-list.d.ts

@@ -31,12 +31,10 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
             render(): JSX.Element;
-            context: any;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>> & Readonly<{
-                children?: React.ReactNode;
-            }>;
+            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
                 [key: string]: React.ReactInstance;
             };
@@ -60,12 +58,10 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
             render(): JSX.Element;
-            context: any;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>> & Readonly<{
-                children?: React.ReactNode;
-            }>;
+            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
                 [key: string]: React.ReactInstance;
             };

package/components/date-picker/date-picker.css

@@ -1,4 +1,5 @@
 @import "../global/variables.css";
+@import "../global/global.css";
 
 @value unit from "../global/global.css";
 @value cellSize: calc(unit * 3);

package/components/date-picker/date-popup.js

@@ -76,7 +76,6 @@ export default class DatePopup extends Component {
             if (this.state.text && prevState.active) {
                 this.confirm(prevState.active);
             }
-            // eslint-disable-next-line react/no-did-update-set-state
             this.setState({ text: null });
         }
     }

package/components/dialog/dialog.d.ts

@@ -24,7 +24,7 @@ export default class Dialog extends PureComponent<DialogProps> {
         label: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         contentClassName: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         show: PropTypes.Validator<boolean>;
         showCloseButton: PropTypes.Requireable<boolean>;
         closeButtonInside: PropTypes.Requireable<boolean>;

package/components/dropdown/dropdown.d.ts

@@ -6,7 +6,7 @@ export interface AnchorProps {
     active: boolean;
     pinned: boolean;
 }
-export interface DropdownProps extends HTMLAttributes<HTMLElement> {
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     anchor: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode);
     children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode);
     initShown: boolean;
@@ -32,7 +32,7 @@ export default class Dropdown extends Component<DropdownProps, DropdownState> {
          * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
          * React element should render some interactive HTML element like `button` or `a`
          */
-        anchor: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        anchor: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
         children: PropTypes.Validator<PropTypes.ReactElementLike | ((...args: any[]) => any)>;
         initShown: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;

package/components/global/angular-component-factory.js

@@ -1,8 +1,8 @@
 import angular from 'angular';
 
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
 
+import {render, unmountComponentAtNode} from './react-render-adapter';
 import RingAngularComponent from './ring-angular-component';
 
 import DomRenderer from './react-dom-renderer';

package/components/global/promise-with-timeout.d.ts

@@ -1,4 +1,5 @@
 export interface PromiseWithTimeoutConfig {
     error?: Error | null | undefined;
+    onTimeout?: () => void | undefined;
 }
-export default function promiseWithTimeout<T>(promise: Promise<T>, timeout: number, { error }: PromiseWithTimeoutConfig): Promise<unknown>;
+export default function promiseWithTimeout<T>(promise: Promise<T>, timeout: number, { error, onTimeout }: PromiseWithTimeoutConfig): Promise<unknown>;

package/components/global/promise-with-timeout.js

@@ -1,8 +1,11 @@
 // Useful for using fetch with timeout
 // https://github.com/github/fetch/issues/175#issuecomment-284787564
-export default function promiseWithTimeout(promise, timeout, { error }) {
+export default function promiseWithTimeout(promise, timeout, { error, onTimeout = () => { } }) {
     return new Promise((resolve, reject) => {
-        setTimeout(() => reject(error || new Error('Timeout')), timeout);
+        setTimeout(() => {
+            onTimeout();
+            reject(error || new Error('Timeout'));
+        }, timeout);
         promise.then(resolve, reject);
     });
 }

package/components/global/react-render-adapter.d.ts

@@ -0,0 +1,29 @@
+import type { ReactChild, ReactElement, ReactNode } from 'react';
+import { unmountComponentAtNode as legacyUnmountComponentAtNode } from 'react-dom';
+export declare let render: (element: ReactElement, container: Element | DocumentFragment) => void;
+export declare let unmountComponentAtNode: typeof legacyUnmountComponentAtNode;
+export declare let hydrate: (element: ReactElement, container: Element | Document) => void;
+interface Root {
+    render(children: ReactChild | Iterable<ReactNode>): void;
+    unmount(): void;
+}
+interface RootOptions {
+    /**
+     * Prefix for `useId`.
+     */
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+}
+interface HydrationOptions {
+    /**
+     * Prefix for `useId`.
+     */
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+}
+interface Client {
+    createRoot(container: Element | DocumentFragment, options?: RootOptions): Root;
+    hydrateRoot(container: Element | Document, initialChildren: ReactChild | Iterable<ReactNode>, options?: HydrationOptions): Root;
+}
+export declare function setClient({ createRoot, hydrateRoot }: Client): void;
+export {};

package/components/global/react-render-adapter.js

@@ -0,0 +1,36 @@
+// Allows overriding ReactDOM.render when using React 18:
+// import * as client from 'react-dom/client'
+// import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
+//
+// setClient(client)
+import {
+  render as legacyRender,
+  unmountComponentAtNode as legacyUnmountComponentAtNode,
+  hydrate as legacyHydrate
+} from 'react-dom';
+
+/* eslint-disable import/no-mutable-exports */
+export let render = legacyRender;
+export let unmountComponentAtNode = legacyUnmountComponentAtNode;
+export let hydrate = legacyHydrate;
+/* eslint-enable */
+
+export function setClient({createRoot, hydrateRoot}) {
+  const roots = new WeakMap();
+
+  render = (element, container) => {
+    let root = roots.get(container);
+    if (root == null) {
+      root = createRoot(container);
+      roots.set(container, root);
+    }
+    root.render(element);
+  };
+
+  unmountComponentAtNode = container => roots.get(container)?.unmount();
+
+  hydrate = (element, container) => {
+    const root = hydrateRoot(container, element);
+    roots.set(container, root);
+  };
+}

package/components/global/rerender-hoc.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, RefAttributes } from 'react';
 export interface RerenderableComponent<P, S> extends Component<P, S> {
     node?: HTMLElement | null;
 }
@@ -13,18 +13,14 @@ export interface RerenderableComponentClass<P, S> {
  */
 export default function rerenderHOC<P, S>(ComposedComponent: RerenderableComponentClass<P, S>): {
     new (props: P): {
-        _propsCache: Readonly<P> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        rerender(props?: Partial<P>, callback?: (() => void) | undefined): void | Element | Component<P, any, any>;
+        _propsCache: P & RefAttributes<unknown>;
+        rerender(props?: Partial<P>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        context: unknown;
         setState<K extends keyof S>(state: S | ((prevState: Readonly<S>, props: Readonly<P>) => S | Pick<S, K> | null) | Pick<S, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         render(): import("react").ReactNode;
-        readonly props: Readonly<P> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
+        readonly props: Readonly<P>;
         state: Readonly<S>;
         refs: {
             [key: string]: import("react").ReactInstance;

package/components/global/rerender-hoc.js

@@ -1,5 +1,6 @@
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { render } from './react-render-adapter';
+import composeRefs from './composeRefs';
 /**
  * Wraps a component to add a "rerender" method
  * @param ComposedComponent
@@ -20,7 +21,8 @@ export default function rerenderHOC(ComposedComponent) {
                 }
             }
             this._propsCache = Object.assign({}, this.props, this._propsCache, props);
-            return render(createElement(this.constructor, this._propsCache), container, callback);
+            this._propsCache.ref = composeRefs(this._propsCache.ref, callback);
+            render(createElement(this.constructor, this._propsCache), container);
         }
     };
 }

package/components/global/theme.js

@@ -1,6 +1,8 @@
-import React, { useMemo, useState, useEffect, forwardRef } from 'react';
+import React, { useMemo, useState, useEffect, forwardRef, useContext } from 'react';
 import classNames from 'classnames';
-import { PopupTarget } from '../popup/popup.target';
+import { createPortal } from 'react-dom';
+import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
+import { getPopupContainer } from '../popup/popup';
 import styles from './variables_dark.css';
 import getUID from './get-uid';
 var Theme;
@@ -23,9 +25,14 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
     const id = useMemo(() => getUID('popups-with-theme-'), []);
-    return (<div ref={ref} className={classNames(className, { [styles.dark]: resolvedTheme === Theme.DARK })} {...restProps}>{passToPopups
+    const themeClasses = classNames({ [styles.dark]: resolvedTheme === Theme.DARK });
+    const parentTarget = useContext(PopupTargetContext);
+    return (<div ref={ref} className={classNames(className, themeClasses)} {...restProps}>{passToPopups
             ? (<PopupTarget id={id}>
-              {target => <>{children}{target}</>}
+              {target => (<>
+                  {children}
+                  {createPortal(target, parentTarget && getPopupContainer(parentTarget) || document.body)}
+                </>)}
             </PopupTarget>)
             : children}
     </div>);

package/components/global/variables.css

@@ -51,7 +51,6 @@
   --ring-sidebar-background-color: #f7f9fa;
   --ring-selected-background-color: #d4edff;
   --ring-hover-background-color: #ebf6ff;
-  --ring-message-background-color: #111314;
   --ring-navigation-background-color: #fff;
   --ring-tag-background-color: #e6ecf2;
   --ring-tag-hover-background-color: #d3dae0;

package/components/global/variables.d.ts

@@ -41,7 +41,6 @@ export interface RingCSSProperties {
     '--ring-sidebar-background-color'?: Property.BackgroundColor;
     '--ring-selected-background-color'?: Property.BackgroundColor;
     '--ring-hover-background-color'?: Property.BackgroundColor;
-    '--ring-message-background-color'?: Property.BackgroundColor;
     '--ring-navigation-background-color'?: Property.BackgroundColor;
     '--ring-tag-background-color'?: Property.BackgroundColor;
     '--ring-tag-hover-background-color'?: Property.BackgroundColor;

package/components/global/variables_dark.css

@@ -13,7 +13,7 @@
   --ring-main-hover-color: #007ee5;
   --ring-icon-error-color: #db5860;
   --ring-icon-warning-color: #eda200;
-  --ring-icon-success-color: #59a869;
+  --ring-icon-success-color: #47d464;
   --ring-popup-border-components: 0, 42, 76;
   --ring-popup-border-color: rgba(var(--ring-popup-border-components), 0.1);
   --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.15);
@@ -40,7 +40,6 @@
   --ring-sidebar-background-color: #28343d;
   --ring-selected-background-color: #062640;
   --ring-hover-background-color: #0b1a26;
-  --ring-message-background-color: var(--ring-popup-background-color);
   --ring-navigation-background-color: #111314;
   --ring-tag-background-color: #3e4d59;
   --ring-tag-hover-background-color: #333e47;

package/components/header/header.css

@@ -2,7 +2,7 @@
 
 @value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
-@value active from "../link/link.css";
+@value link, active from "../link/link.css";
 @value height: calc(unit * 8);
 @value compensate: 3px;
 @value compensated: calc(height - compensate);
@@ -38,7 +38,7 @@
   }
 
   /* override link */
-  & a {
+  & .link {
     color: var(--ring-header-link-color);
   }
 

package/components/header/profile.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Size } from '../avatar/avatar';
 import { ListDataItem } from '../list/consts';
 import { AuthUser } from '../auth/auth';
-import { LinkProps } from '../link/link';
+import { ClickableLinkProps } from '../link/clickableLink';
 export interface ProfileTranslations {
     applyChangedUser?: string | null | undefined;
     login?: string | null | undefined;
@@ -24,7 +24,7 @@ export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSe
     onLogout?: (() => void) | null | undefined;
     onSwitchUser?: (() => void) | null | undefined;
     profileUrl?: string | undefined;
-    LinkComponent?: ComponentType<LinkProps> | null | undefined;
+    LinkComponent?: ComponentType<ClickableLinkProps> | null | undefined;
     user?: AuthUser | null | undefined | void;
     round?: boolean | null | undefined;
     showLogIn?: boolean | null | undefined;
@@ -68,6 +68,6 @@ export default class Profile extends PureComponent<ProfileProps> {
     };
     static defaultProps: ProfileProps;
     static Size: typeof Size;
-    render(): React.ReactNode;
+    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
 }
 export declare type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;