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

package/components/tag/tag.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value max-height: 20px;
 
 .tag {
@@ -15,7 +14,7 @@
   max-width: 100%;
   height: max-height;
 
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 
   cursor: pointer;
 
@@ -46,9 +45,9 @@
 
   display: inline-block;
 
-  max-width: calc(100% - unit / 2);
+  max-width: calc(100% - var(--ring-unit) / 2);
 
-  margin-right: calc(unit / 2);
+  margin-right: calc(var(--ring-unit) / 2);
 
   white-space: nowrap;
 }
@@ -77,8 +76,8 @@
 
   margin-bottom: -5px !important;
 
-  margin-left: unit;
-  padding-left: calc(unit / 2);
+  margin-left: var(--ring-unit);
+  padding-left: calc(var(--ring-unit) / 2);
 
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -131,9 +130,9 @@
   right: 0;
 
   height: auto;
-  padding: 0 calc(unit / 2);
+  padding: 0 calc(var(--ring-unit) / 2);
 
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .removeIcon.removeIcon {
@@ -157,8 +156,8 @@
   box-sizing: border-box;
   width: max-height;
   height: max-height;
-  margin-right: calc(unit / 2);
-  margin-left: calc(0 - unit);
+  margin-right: calc(var(--ring-unit) / 2);
+  margin-left: calc(var(--ring-unit) * -1);
 
   vertical-align: top;
 
@@ -167,10 +166,10 @@
 }
 
 .customIcon {
-  max-width: calc(unit * 2);
-  max-height: calc(unit * 2);
+  max-width: calc(var(--ring-unit) * 2);
+  max-height: calc(var(--ring-unit) * 2);
 
-  margin-right: calc(unit / 2);
+  margin-right: calc(var(--ring-unit) / 2);
 
   vertical-align: bottom;
 }

package/components/tags-input/tags-input.css

@@ -1,10 +1,9 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value outerContainer, container, input from "../input/input.css";
 
 .tagsInput {
-  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
   --ring-input-padding-inline: 3px;
 
   box-sizing: border-box;

package/components/tags-input/tags-input.d.ts

@@ -38,6 +38,7 @@ export interface TagsInputProps {
     height?: ControlsHeight | undefined;
     label?: ReactNode;
     labelType?: LabelType;
+    id?: string | undefined;
 }
 interface TagsInputState {
     tags: TagType[];
@@ -115,6 +116,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     getInputNode(): HTMLInputElement | null | undefined;
     setActiveIndex(activeIndex?: number | null): void;
     focusInput: () => void;
+    focus: () => void;
     addTag: (tag: TagType | null) => void;
     onRemoveTag(tagToRemove: TagType): Promise<void | TagType[]>;
     clickHandler: (event: SyntheticEvent) => void;
@@ -131,33 +133,6 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     selectRef: (el: Select | null) => void;
     render(): React.JSX.Element;
 }
-export declare const RerenderableTagsInput: {
-    new (props: TagsInputProps): {
-        _propsCache: TagsInputProps & React.RefAttributes<unknown>;
-        rerender(props?: Partial<TagsInputProps>, callback?: (() => void) | undefined): void;
-        node?: HTMLElement | null | undefined;
-        context: unknown;
-        setState<K extends keyof TagsInputState>(state: TagsInputState | ((prevState: Readonly<TagsInputState>, props: Readonly<TagsInputProps>) => TagsInputState | Pick<TagsInputState, K> | null) | Pick<TagsInputState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        render(): React.ReactNode;
-        readonly props: Readonly<TagsInputProps>;
-        state: Readonly<TagsInputState>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<TagsInputProps>, prevState: Readonly<TagsInputState>): any;
-        componentDidUpdate?(prevProps: Readonly<TagsInputProps>, prevState: Readonly<TagsInputState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<TagsInputProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TagsInputProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): void;
-    };
-};
+export declare const RerenderableTagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<TagsInput>>;
 export type TagsInputAttrs = JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;
 export {};

package/components/tags-input/tags-input.js

@@ -94,7 +94,7 @@ export default class TagsInput extends PureComponent {
     static ngModelStateField = 'tags';
     ngModelStateField;
     static contextType = ControlsHeightContext;
-    id = getUID('ring-tags-list-');
+    id = this.props.id || getUID('ring-tags-list-');
     node;
     nodeRef = (node) => {
         this.node = node;
@@ -116,6 +116,9 @@ export default class TagsInput extends PureComponent {
     focusInput = () => {
         this.getInputNode()?.focus();
     };
+    focus = () => {
+        this.focusInput();
+    };
     addTag = (tag) => {
         if (tag == null) {
             return;

package/components/toggle/toggle.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value padding: 2px;
 @value disabled-line-color: rgba(255, 255, 255, 0.9);
 @value duration: 300ms;
@@ -21,11 +20,11 @@
 }
 
 .label {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 }
 
 .leftLabel {
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .switchWrapper {
@@ -48,6 +47,8 @@
 }
 
 .switch {
+  --ring-toggle-item-color: var(--ring-white-text-color);
+
   position: relative;
 
   display: block;
@@ -68,8 +69,8 @@
     top: padding;
     left: 0;
 
-    width: calc(unit * 1.5);
-    height: calc(unit * 1.5);
+    width: calc(var(--ring-unit) * 1.5);
+    height: calc(var(--ring-unit) * 1.5);
 
     content: "";
 
@@ -77,8 +78,8 @@
 
     transform: translateX(padding);
 
-    border-radius: calc(unit * 0.75);
-    background-color: var(--ring-content-background-color);
+    border-radius: calc(var(--ring-unit) * 0.75);
+    background-color: var(--ring-toggle-item-color);
   }
 }
 
@@ -92,32 +93,32 @@
 
 .size16 {
   & .switchWrapper {
-    width: calc(unit * 3);
-    height: calc(unit * 2);
+    width: calc(var(--ring-unit) * 3);
+    height: calc(var(--ring-unit) * 2);
 
     vertical-align: -3px;
   }
 
   & .switch {
-    border-radius: unit;
+    border-radius: var(--ring-unit);
 
     &::before {
-      width: calc(unit * 1.5);
-      height: calc(unit * 1.5);
+      width: calc(var(--ring-unit) * 1.5);
+      height: calc(var(--ring-unit) * 1.5);
 
-      border-radius: calc(unit * 0.75);
+      border-radius: calc(var(--ring-unit) * 0.75);
     }
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(unit * 1.5 - padding));
+    transform: translateX(calc(var(--ring-unit) * 1.5 - padding));
   }
 }
 
 .size14 {
   & .switchWrapper {
-    width: calc(unit * 3);
+    width: calc(var(--ring-unit) * 3);
     height: 14px;
 
     vertical-align: -2px;
@@ -142,29 +143,33 @@
 
 .size20 {
   & .switchWrapper {
-    width: calc(unit * 4);
-    height: calc(unit * 2.5);
+    width: calc(var(--ring-unit) * 4);
+    height: calc(var(--ring-unit) * 2.5);
 
     vertical-align: -5px;
   }
 
   & .switch {
-    border-radius: calc(unit * 1.25);
+    border-radius: calc(var(--ring-unit) * 1.25);
 
     &::before {
-      width: calc(unit * 2);
-      height: calc(unit * 2);
+      width: calc(var(--ring-unit) * 2);
+      height: calc(var(--ring-unit) * 2);
 
-      border-radius: calc(unit);
+      border-radius: calc(var(--ring-unit));
     }
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(unit * 2 - padding));
+    transform: translateX(calc(var(--ring-unit) * 2 - padding));
   }
 }
 
+.input[disabled] + .switch {
+  --ring-toggle-item-color: var(--ring-content-background-color);
+}
+
 .input[disabled] + ::after {
   position: absolute;
   top: 0;
@@ -175,7 +180,7 @@
 
   content: "";
 
-  border-radius: unit;
+  border-radius: var(--ring-unit);
   background-image:
     linear-gradient(
       45deg,

package/components/tooltip/tooltip.css

@@ -1,10 +1,8 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .tooltip {
-  max-width: calc(unit * 50);
-  padding: unit;
+  max-width: calc(var(--ring-unit) * 50);
+  padding: var(--ring-unit);
 
   text-align: left;
 
@@ -12,7 +10,7 @@
 }
 
 .long {
-  padding: unit calc(unit * 1.5);
+  padding: var(--ring-unit) calc(var(--ring-unit) * 1.5);
 
   font-size: var(--ring-font-size-smaller);
   line-height: var(--ring-line-height-lowest);

package/components/user-agreement/service.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { UserAgreementAttrs, UserAgreementTranslations } from './user-agreement';
 export declare const showMessage = "userAgreementShow";
 export declare const hideMessage = "userAgreementHide";
@@ -11,7 +12,7 @@ export interface ConsentResponse {
     endUserAgreementConsent?: Consent | null | undefined;
 }
 export interface Agreement {
-    text: string;
+    content: ReactNode;
     enabled?: boolean | null | undefined;
     majorVersion?: number | null | undefined;
     minorVersion?: number | null | undefined;
@@ -40,6 +41,7 @@ export default class UserAgreementService {
     tabId: number;
     interval: number;
     container: HTMLDivElement;
+    reactRoot: import("react-dom/client").Root;
     storage: import("../storage/storage").StorageInterface;
     checkingPromise: Promise<[Agreement, Consent]> | null;
     guest: boolean | null | undefined;

package/components/user-agreement/service.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, unmountComponentAtNode } from '../global/react-render-adapter';
+import { createRoot } from 'react-dom/client';
 import Storage from '../storage/storage';
 import alertService from '../alert-service/alert-service';
 import Link from '../link/link';
@@ -22,7 +22,7 @@ const DEFAULT_AGREEMENT = {
     majorVersion: 0,
     minorVersion: 0,
     requiredForREST: false,
-    text: ''
+    content: ''
 };
 export default class UserAgreementService {
     config;
@@ -47,6 +47,7 @@ export default class UserAgreementService {
     tabId = Math.random();
     interval = ONE_HOUR;
     container = document.createElement('div');
+    reactRoot = createRoot(this.container);
     storage = new Storage();
     checkingPromise = null;
     guest = false;
@@ -160,7 +161,7 @@ export default class UserAgreementService {
     };
     showDialog = (withoutNotifications, preview = false, restOptions) => {
         const { translations, onDialogShow } = this.config;
-        const { text } = this.userAgreement;
+        const { content } = this.userAgreement;
         const show = true;
         if (!this._dialogPromise) {
             this._dialogPromise = new Promise((resolve, reject) => {
@@ -174,7 +175,7 @@ export default class UserAgreementService {
                 };
                 const onClose = this.hideDialogAndAlert;
                 const props = {
-                    text,
+                    children: content,
                     show,
                     onAccept,
                     onDecline,
@@ -182,9 +183,9 @@ export default class UserAgreementService {
                     translations,
                     preview, ...restOptions
                 };
-                render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+                this.reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
               <UserAgreement {...props}/>
-            </ControlsHeightContext.Provider>), this.container);
+            </ControlsHeightContext.Provider>));
                 if (onDialogShow) {
                     onDialogShow();
                 }
@@ -197,7 +198,7 @@ export default class UserAgreementService {
     };
     hideDialog = (withoutNotifications) => {
         const { onDialogHide } = this.config;
-        unmountComponentAtNode(this.container);
+        this.reactRoot.unmount();
         if (onDialogHide) {
             onDialogHide();
             this._dialogPromise = null;

package/components/user-agreement/user-agreement.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value unit, extra-small-screen-media from "../global/global.css";
+@value extra-small-screen-media from "../global/global.css";
 
 .agreementDialog {
   padding-bottom: 80px;
@@ -17,7 +17,7 @@
 }
 
 .suggestion {
-  padding-bottom: unit;
+  padding-bottom: var(--ring-unit);
 
   white-space: nowrap;
 

package/components/user-agreement/user-agreement.d.ts

@@ -1,7 +1,7 @@
 /**
  * @name User Agreement
  */
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 declare function noop(): void;
 export interface UserAgreementTranslations {
@@ -13,8 +13,8 @@ export interface UserAgreementTranslations {
     remindLater: string;
 }
 export interface UserAgreementProps {
-    text: string;
     translations?: UserAgreementTranslations | null | undefined;
+    children: ReactNode;
     show: boolean;
     onAccept: () => void;
     onDecline: () => void;
@@ -30,7 +30,6 @@ export default class UserAgreement extends PureComponent<UserAgreementProps> {
     static propTypes: {
         show: PropTypes.Requireable<boolean>;
         preview: PropTypes.Requireable<boolean>;
-        text: PropTypes.Validator<string>;
         onAccept: PropTypes.Requireable<(...args: any[]) => any>;
         onDecline: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -8,7 +8,6 @@ import Dialog from '../dialog/dialog';
 import { Content, Header } from '../island/island';
 import Panel from '../panel/panel';
 import Button from '../button/button';
-import Markdown from '../markdown/markdown';
 import { I18nContext } from '../i18n/i18n-context';
 import style from './user-agreement.css';
 function noop() { }
@@ -19,7 +18,6 @@ export default class UserAgreement extends PureComponent {
     static propTypes = {
         show: PropTypes.bool,
         preview: PropTypes.bool,
-        text: PropTypes.string.isRequired,
         onAccept: PropTypes.func,
         onDecline: PropTypes.func,
         onClose: PropTypes.func,
@@ -46,12 +44,12 @@ export default class UserAgreement extends PureComponent {
     onScrollToBottom = () => this.setState({ scrolledDown: true });
     render() {
         const { scrolledDown } = this.state;
-        const { translations, onAccept, onDecline, onClose, onRemindLater, text, show, preview, className } = this.props;
+        const { translations, onAccept, onDecline, onClose, onRemindLater, children, show, preview, className } = this.props;
         return (<I18nContext.Consumer>
         {({ translate }) => (<Dialog label={translations?.userAgreement ?? translate('userAgreement')} show={show} className={classNames(style.agreementDialog, className)} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test="user-agreement">
             <Header>{translations?.userAgreement ?? translate('userAgreement')}</Header>
             <Content fade onScrollToBottom={this.onScrollToBottom}>
-              <Markdown>{text}</Markdown>
+              {children}
             </Content>
             {!preview && (<Panel>
                 {onRemindLater && !scrolledDown && (<div className={style.suggestion}>

package/components/user-card/card.d.ts

@@ -11,7 +11,7 @@ export interface UserCardUser {
     banReason?: string | undefined;
     unverifiedEmail?: boolean | null | undefined;
 }
-export interface UserCardWording {
+export interface UserCardTranslations {
     banned: string;
     online: string;
     offline: string;
@@ -22,8 +22,7 @@ export interface UserCardWording {
 }
 export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
     user: UserCardUser;
-    wording?: UserCardWording | null | undefined;
-    translations?: UserCardWording | null | undefined;
+    translations?: UserCardTranslations | null | undefined;
     info?: ReactElement | readonly ReactElement[] | string;
     avatarInfo?: ReactElement | readonly ReactElement[] | string;
     'data-test'?: string | null | undefined;

package/components/user-card/card.js

@@ -40,13 +40,13 @@ export default class UserCard extends PureComponent {
     static contextType = I18nContext;
     copyEmail = () => {
         const { translate } = this.context;
-        const wording = this.props.translations || this.props.wording;
-        clipboard.copyText(this.props.user.email || '', wording?.copiedToClipboard ?? translate('copyToClipboard'), wording?.copingToClipboardError ?? translate('copingToClipboardError'));
+        const translations = this.props.translations;
+        clipboard.copyText(this.props.user.email || '', translations?.copiedToClipboard ?? translate('copyToClipboard'), translations?.copingToClipboardError ?? translate('copingToClipboardError'));
     };
     render() {
         const { children, info, className, user, avatarInfo, ...restProps } = this.props;
         const { translate } = this.context;
-        const wording = this.props.translations || this.props.wording;
+        const translations = this.props.translations;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (<div className={classes} {...restProps}>
@@ -64,11 +64,11 @@ export default class UserCard extends PureComponent {
                 {!user.href && <span className={styles.userName}>{user.name}</span>}
                 {typeof user.online === 'boolean' &&
                 (<span className={userActiveStatusClasses} title={user.online
-                        ? (wording?.online ?? translate('online'))
-                        : (wording?.offline ?? translate('offline'))}/>)}
+                        ? (translations?.online ?? translate('online'))
+                        : (translations?.offline ?? translate('offline'))}/>)}
                 {!!info && <span className={styles.userNameInfo}>{info}</span>}
                 {user.banned &&
-                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording?.banned ?? translate('banned')}</span>)}
+                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{translations?.banned ?? translate('banned')}</span>)}
               </div>
               <div className={styles.userLogin}>{user.login}</div>
               {user.email && (<span className={styles.userEmailWrapper}>
@@ -76,9 +76,9 @@ export default class UserCard extends PureComponent {
                     {user.email}
                   </Link>
                   {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>
-                        {wording?.unverified ?? translate('unverified')}
+                        {translations?.unverified ?? translate('unverified')}
                       </span>)}
-                  <Icon title={wording?.copyToClipboard ?? translate('copyToClipboard')} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
+                  <Icon title={translations?.copyToClipboard ?? translate('copyToClipboard')} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
                 </span>)}
             </div>
             {children}

package/components/user-card/user-card.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .userCardSpaced {
-  padding: calc(unit * 2) calc(unit * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
 }
 
 .userInformationContainer {
@@ -111,8 +109,8 @@
 .userActiveStatus {
   display: inline-block;
 
-  width: unit;
-  height: unit;
+  width: var(--ring-unit);
+  height: var(--ring-unit);
   margin-right: var(--ring-unit);
   margin-left: 6px;