@jetbrains/ring-ui 5.1.1 → 6.0.1-beta.0

package/components/tag/tag.d.ts

@@ -54,11 +54,11 @@ export default class Tag extends PureComponent<TagProps> {
     tagNode?: HTMLElement | null;
     tagRef: (el: HTMLElement | null) => void;
     setDocumentClickListener(setListener: boolean): void;
-    renderCustomIcon(): JSX.Element | null;
+    renderCustomIcon(): React.JSX.Element | null;
     private _renderImageElement;
-    renderImage(): JSX.Element | null;
-    renderAvatar(): JSX.Element | null;
-    renderRemoveIcon(): JSX.Element | null;
-    render(): JSX.Element;
+    renderImage(): React.JSX.Element | null;
+    renderAvatar(): React.JSX.Element | null;
+    renderRemoveIcon(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export type TagAttrs = JSX.LibraryManagedAttributes<typeof Tag, TagProps>;

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

@@ -61,7 +61,7 @@
 
   caret-color: var(--ring-main-color);
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding-right: var(--ring-input-padding-start);
     padding-left: var(--ring-input-padding-end);
   }

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

@@ -1,4 +1,4 @@
-import React, { Component, PureComponent, SyntheticEvent, ReactNode } from 'react';
+import React, { PureComponent, SyntheticEvent, ReactNode, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
@@ -6,6 +6,8 @@ import Caret from '../caret/caret';
 import { Size } from '../input/input';
 import { ControlsHeight } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
+import { TagAttrs } from '../tag/tag';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 export interface ToggleTagParams {
     tag: TagType;
@@ -17,7 +19,7 @@ export interface TagsInputProps {
     dataSource: (params: TagsInputRequestParams) => readonly SelectItem[] | Promise<readonly SelectItem[]>;
     onAddTag: (params: ToggleTagParams) => void;
     onRemoveTag: (params: ToggleTagParams) => void;
-    customTagComponent: Component;
+    customTagComponent: ComponentType<TagAttrs>;
     maxPopupHeight: number;
     minPopupWidth: number;
     canNotBeEmpty: boolean;
@@ -31,9 +33,11 @@ export interface TagsInputProps {
     tags?: readonly TagType[] | null | undefined;
     loadingMessage?: string | undefined;
     notFoundMessage?: string | undefined;
+    hint?: ReactNode | null | undefined;
     size: Size;
     height?: ControlsHeight | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
 }
 interface TagsInputState {
     tags: TagType[];
@@ -73,6 +77,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         loadingMessage: PropTypes.Requireable<string>;
         notFoundMessage: PropTypes.Requireable<string>;
+        hint: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         allowAddNewTags: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
@@ -113,7 +118,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     addTag: (tag: TagType | null) => void;
     onRemoveTag(tagToRemove: TagType): Promise<void | TagType[]>;
     clickHandler: (event: SyntheticEvent) => void;
-    filterExistingTags: (suggestions: readonly SelectItem[]) => SelectItem<unknown>[];
+    filterExistingTags: (suggestions: readonly SelectItem[]) => SelectItem[];
     loadSuggestions: (query?: string) => void;
     private _focusHandler;
     private _blurHandler;
@@ -124,7 +129,7 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     handleTagCreation: (label: string) => void;
     select?: Select | null;
     selectRef: (el: Select | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const RerenderableTagsInput: {
     new (props: TagsInputProps): {

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

@@ -11,6 +11,7 @@ import { Size } from '../input/input';
 import { ControlsHeightContext } from '../global/controls-height';
 import getUID from '../global/get-uid';
 import inputStyles from '../input/input.css';
+import ControlLabel from '../control-label/control-label';
 import styles from './tags-input.css';
 function noop() { }
 /**
@@ -44,6 +45,7 @@ export default class TagsInput extends PureComponent {
         label: PropTypes.node,
         loadingMessage: PropTypes.string,
         notFoundMessage: PropTypes.string,
+        hint: PropTypes.node,
         allowAddNewTags: PropTypes.bool
     };
     static defaultProps = {
@@ -203,7 +205,7 @@ export default class TagsInput extends PureComponent {
             return true;
         }
         if (key === 'ArrowLeft') {
-            if (this.getInputNode() && this.caret != null && this.caret.getPosition() > 0) {
+            if (this.getInputNode() && this.caret != null && Number(this.caret.getPosition()) > 0) {
                 return true;
             }
             this.selectTag();
@@ -251,7 +253,7 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, height = this.context, label } = this.props;
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label } = this.props;
         const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused
@@ -259,12 +261,10 @@ export default class TagsInput extends PureComponent {
         return (<div 
         // it transfers focus to input
         role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
-        {label && (<label htmlFor={this.id} className={classNames(inputStyles.label, {
-                    [inputStyles.disabledLabel]: disabled
-                })}>{label}</label>)}
+        {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
 
-        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick}>
-          <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage}/>
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
+          <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage} hint={this.props.hint}/>
         </TagsList>
       </div>);
     }

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

@@ -39,8 +39,8 @@ export default class TagsList<T extends TagType> extends Component<TagsListProps
         handleClick: typeof noop;
         handleRemove: typeof noop;
     };
-    renderTag(tag: T, focusTag: boolean): JSX.Element;
-    render(): JSX.Element;
+    renderTag(tag: T, focusTag: boolean): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type TagsListAttrs<T extends TagType = TagType> = JSX.LibraryManagedAttributes<typeof TagsList, TagsListProps<T>>;
 export {};

package/components/template-ng/template-ng.js

@@ -9,8 +9,6 @@ import RingAngularComponent from '../global/ring-angular-component';
 const angularModule = angular.module('Ring.template', []);
 
 class RgTemplateController extends RingAngularComponent {
-  static $inject = ['$scope', '$element', '$attrs', '$compile'];
-
   currentScope = null;
 
   constructor(...args) {
@@ -48,6 +46,7 @@ class RgTemplateController extends RingAngularComponent {
     }
   }
 }
+RgTemplateController.$inject = ['$scope', '$element', '$attrs', '$compile'];
 
 angularModule.directive('rgTemplate', function rgTemplateDirective() {
   return {

package/components/text/text.css

@@ -4,6 +4,18 @@
   color: var(--ring-text-color);
 }
 
+.sizeS {
+  font-size: var(--ring-font-size-smaller);
+}
+
+.sizeM {
+  font-size: var(--ring-font-size);
+}
+
+.sizeL {
+  font-size: var(--ring-font-size-larger);
+}
+
 .info {
   color: var(--ring-secondary-color);
 }

package/components/text/text.d.ts

@@ -1,9 +1,12 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
+type TextSize = 's' | 'm' | 'l';
 export interface TextProps extends HTMLAttributes<HTMLElement> {
     info?: boolean | null | undefined;
+    size?: TextSize;
     'data-test'?: string | null | undefined;
 }
+declare const TextSize: Record<string, TextSize>;
 /**
  * @name Text
  */
@@ -11,7 +14,10 @@ export default class Text extends Component<TextProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         info: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<TextSize>;
         className: PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    static Size: Record<string, TextSize>;
+    render(): React.JSX.Element;
 }
+export {};

package/components/text/text.js

@@ -2,6 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './text.css';
+const TextSize = {
+    S: 's',
+    M: 'm',
+    L: 'l'
+};
 /**
  * @name Text
  */
@@ -9,12 +14,17 @@ export default class Text extends Component {
     static propTypes = {
         children: PropTypes.node,
         info: PropTypes.bool,
+        size: PropTypes.oneOf(Object.keys(TextSize).map(it => TextSize[it])),
         className: PropTypes.string
     };
+    static Size = TextSize;
     render() {
-        const { children, className, info, ...restProps } = this.props;
+        const { children, className, info, size, ...restProps } = this.props;
         const classes = classNames(styles.text, className, {
-            [styles.info]: info
+            [styles.info]: info,
+            [styles.sizeS]: size === Text.Size.S,
+            [styles.sizeM]: size === Text.Size.M,
+            [styles.sizeL]: size === Text.Size.L
         });
         return (<span className={classes} {...restProps}>{children}</span>);
     }

package/components/toggle/toggle.css

@@ -59,7 +59,7 @@
 
   background-color: var(--ring-icon-color);
 
-  @nest .input:focus + & {
+  .input:focus + & {
     box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
   }
 

package/components/toggle/toggle.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, PureComponent, ReactNode } from 'react';
+import React, { InputHTMLAttributes, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 export declare const Size: {
     Size14: string;
@@ -33,7 +33,7 @@ declare class Toggle extends PureComponent<ToggleProps> {
     static defaultProps: {
         size: string;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type ToggleAttrs = JSX.LibraryManagedAttributes<typeof Toggle, ToggleProps>;
 export default Toggle;

package/components/tooltip/tooltip.d.ts

@@ -59,7 +59,7 @@ export default class Tooltip extends Component<TooltipProps> {
     popupRef: (el: Popup | null) => void;
     onNestedTooltipShow: () => void;
     onNestedTooltipHide: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type TooltipAttrs = JSX.LibraryManagedAttributes<typeof Tooltip, TooltipProps>;
 export {};

package/components/user-agreement/service.js

@@ -5,6 +5,7 @@ import alertService from '../alert-service/alert-service';
 import Link from '../link/link';
 import Alert from '../alert/alert';
 import Group from '../group/group';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 import UserAgreement from './user-agreement';
 const GUEST_SESSION_KEY = 'end-user-agreement-consent';
 const ONE_HOUR = 60 * 60 * 1000; // eslint-disable-line @typescript-eslint/no-magic-numbers
@@ -181,7 +182,9 @@ export default class UserAgreementService {
                     translations,
                     preview, ...restOptions
                 };
-                render(<UserAgreement {...props}/>, this.container);
+                render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+              <UserAgreement {...props}/>
+            </ControlsHeightContext.Provider>), this.container);
                 if (onDialogShow) {
                     onDialogShow();
                 }

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

@@ -1,7 +1,7 @@
 /**
  * @name User Agreement
  */
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 declare function noop(): void;
 export interface UserAgreementTranslations {
@@ -14,7 +14,7 @@ export interface UserAgreementTranslations {
 }
 export interface UserAgreementProps {
     text: string;
-    translations: UserAgreementTranslations;
+    translations?: UserAgreementTranslations | null | undefined;
     show: boolean;
     onAccept: () => void;
     onDecline: () => void;
@@ -46,14 +46,6 @@ export default class UserAgreement extends PureComponent<UserAgreementProps> {
         className: PropTypes.Requireable<string>;
     };
     static defaultProps: {
-        translations: {
-            userAgreement: string;
-            accept: string;
-            decline: string;
-            close: string;
-            scrollToAccept: string;
-            remindLater: string;
-        };
         show: boolean;
         onAccept: typeof noop;
         onDecline: typeof noop;
@@ -63,7 +55,7 @@ export default class UserAgreement extends PureComponent<UserAgreementProps> {
         scrolledDown: boolean;
     };
     onScrollToBottom: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type UserAgreementAttrs = JSX.LibraryManagedAttributes<typeof UserAgreement, UserAgreementProps>;
 export {};

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

@@ -9,6 +9,7 @@ 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() { }
 /**
@@ -34,14 +35,6 @@ export default class UserAgreement extends PureComponent {
         className: PropTypes.string
     };
     static defaultProps = {
-        translations: {
-            userAgreement: 'User Agreement',
-            accept: 'Accept',
-            decline: 'Decline',
-            close: 'Close',
-            scrollToAccept: 'View the entire agreement to continue',
-            remindLater: 'Remind me later'
-        },
         show: false,
         onAccept: noop,
         onDecline: noop,
@@ -54,28 +47,36 @@ export default class UserAgreement extends PureComponent {
     render() {
         const { scrolledDown } = this.state;
         const { translations, onAccept, onDecline, onClose, onRemindLater, text, show, preview, className } = this.props;
-        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>{text}</Markdown>
-        </Content>
-        {!preview && (<Panel>
-            {onRemindLater && !scrolledDown && (<div className={style.suggestion}>{translations.scrollToAccept}</div>)}
-            <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
-              {translations.accept}
-            </Button>
-            <Button onClick={onDecline} autoFocus data-test="decline">
-              {translations.decline}
-            </Button>
+        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>
+            </Content>
+            {!preview && (<Panel>
+                {onRemindLater && !scrolledDown && (<div className={style.suggestion}>
+                    {translations?.scrollToAccept ?? translate('scrollToAccept')}
+                  </div>)}
+                <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
+                  {translations?.accept ?? translate('accept')}
+                </Button>
+                <Button onClick={onDecline} autoFocus data-test="decline">
+                  {translations?.decline ?? translate('decline')}
+                </Button>
 
-            {!onRemindLater && !scrolledDown && (<span className={style.suggestion}>{translations.scrollToAccept}</span>)}
-            {onRemindLater && (<Button className={style.remindLaterButton} onClick={onRemindLater} data-test="later">
-                {translations.remindLater}
-              </Button>)}
-          </Panel>)}
-        {preview && (<Panel>
-            <Button onClick={onClose} autoFocus data-test="close">{translations.close}</Button>
-          </Panel>)}
-      </Dialog>);
+                {!onRemindLater && !scrolledDown && (<span className={style.suggestion}>
+                    {translations?.scrollToAccept ?? translate('scrollToAccept')}
+                  </span>)}
+                {onRemindLater && (<Button className={style.remindLaterButton} onClick={onRemindLater} data-test="later">
+                    {translations?.remindLater ?? translate('remindLater')}
+                  </Button>)}
+              </Panel>)}
+            {preview && (<Panel>
+                <Button onClick={onClose} autoFocus data-test="close">
+                  {translations?.close ?? translate('close')}
+                </Button>
+              </Panel>)}
+          </Dialog>)}
+      </I18nContext.Consumer>);
     }
 }

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent, ReactElement } from 'react';
+import React, { HTMLAttributes, PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 export interface UserCardUser {
     name: string;
@@ -15,14 +15,15 @@ export interface UserCardWording {
     banned: string;
     online: string;
     offline: string;
-    copyToClipboard: string;
-    copiedToClipboard: string;
-    copingToClipboardError: string;
-    unverified: string;
+    copyToClipboard?: string;
+    copiedToClipboard?: string;
+    copingToClipboardError?: string;
+    unverified?: string;
 }
 export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
     user: UserCardUser;
-    wording: UserCardWording;
+    wording?: UserCardWording | null | undefined;
+    translations?: UserCardWording | null | undefined;
     info?: ReactElement | readonly ReactElement[] | string;
     avatarInfo?: ReactElement | readonly ReactElement[] | string;
     'data-test'?: string | null | undefined;
@@ -47,24 +48,24 @@ export default class UserCard extends PureComponent<UserCardProps> {
             banned: PropTypes.Validator<string>;
             online: PropTypes.Validator<string>;
             offline: PropTypes.Validator<string>;
-            copyToClipboard: PropTypes.Validator<string>;
-            copiedToClipboard: PropTypes.Validator<string>;
-            copingToClipboardError: PropTypes.Validator<string>;
+            copyToClipboard: PropTypes.Requireable<string>;
+            copiedToClipboard: PropTypes.Requireable<string>;
+            copingToClipboardError: PropTypes.Requireable<string>;
+            unverified: PropTypes.Requireable<string>;
+        }>>;
+        translations: PropTypes.Requireable<PropTypes.InferProps<{
+            banned: PropTypes.Validator<string>;
+            online: PropTypes.Validator<string>;
+            offline: PropTypes.Validator<string>;
+            copyToClipboard: PropTypes.Requireable<string>;
+            copiedToClipboard: PropTypes.Requireable<string>;
+            copingToClipboardError: PropTypes.Requireable<string>;
             unverified: PropTypes.Requireable<string>;
         }>>;
     };
-    static defaultProps: {
-        wording: {
-            banned: string;
-            online: string;
-            offline: string;
-            copyToClipboard: string;
-            copiedToClipboard: string;
-            copingToClipboardError: string;
-            unverified: string;
-        };
-    };
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof UserCard.contextType>;
     copyEmail: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type UserCardAttrs = JSX.LibraryManagedAttributes<typeof UserCard, UserCardProps>;

package/components/user-card/card.js

@@ -7,7 +7,17 @@ import Link from '../link/link';
 import clipboard from '../clipboard/clipboard';
 import badgeStyles from '../badge/badge.css';
 import Icon, { Size as IconSize } from '../icon/icon';
+import { I18nContext } from '../i18n/i18n-context';
 import styles from './user-card.css';
+const translationsShape = PropTypes.shape({
+    banned: PropTypes.string.isRequired,
+    online: PropTypes.string.isRequired,
+    offline: PropTypes.string.isRequired,
+    copyToClipboard: PropTypes.string,
+    copiedToClipboard: PropTypes.string,
+    copingToClipboardError: PropTypes.string,
+    unverified: PropTypes.string
+});
 export default class UserCard extends PureComponent {
     static propTypes = {
         children: PropTypes.node,
@@ -24,39 +34,25 @@ export default class UserCard extends PureComponent {
             banReason: PropTypes.string,
             unverifiedEmail: PropTypes.bool
         }).isRequired,
-        wording: PropTypes.shape({
-            banned: PropTypes.string.isRequired,
-            online: PropTypes.string.isRequired,
-            offline: PropTypes.string.isRequired,
-            copyToClipboard: PropTypes.string.isRequired,
-            copiedToClipboard: PropTypes.string.isRequired,
-            copingToClipboardError: PropTypes.string.isRequired,
-            unverified: PropTypes.string
-        })
-    };
-    static defaultProps = {
-        wording: {
-            banned: 'banned',
-            online: 'online',
-            offline: 'offline',
-            copyToClipboard: 'Copy to clipboard',
-            copiedToClipboard: 'Email was copied to clipboard',
-            copingToClipboardError: 'Failed to copy to clipboard',
-            unverified: 'Unverified'
-        }
+        wording: translationsShape,
+        translations: translationsShape
     };
+    static contextType = I18nContext;
     copyEmail = () => {
-        const { user, wording } = this.props;
-        clipboard.copyText(user.email || '', wording.copiedToClipboard, wording.copingToClipboardError);
+        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'));
     };
     render() {
-        const { children, info, className, user, wording, avatarInfo, ...restProps } = this.props;
+        const { children, info, className, user, avatarInfo, ...restProps } = this.props;
+        const { translate } = this.context;
+        const wording = this.props.translations || this.props.wording;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (<div className={classes} {...restProps}>
         <div className={styles.userInformationContainer}>
           <div className={styles.userAvatar}>
-            <Avatar size={AvatarSize.Size56} url={user.avatarUrl}/>
+            <Avatar size={AvatarSize.Size56} url={user.avatarUrl} round/>
             {!!avatarInfo && avatarInfo}
           </div>
           <div className={styles.userInformation}>
@@ -67,18 +63,22 @@ export default class UserCard extends PureComponent {
                   </Link>)}
                 {!user.href && <span className={styles.userName}>{user.name}</span>}
                 {typeof user.online === 'boolean' &&
-                (<span className={userActiveStatusClasses} title={user.online ? wording.online : wording.offline}/>)}
+                (<span className={userActiveStatusClasses} title={user.online
+                        ? (wording?.online ?? translate('online'))
+                        : (wording?.offline ?? translate('offline'))}/>)}
                 {!!info && <span className={styles.userNameInfo}>{info}</span>}
                 {user.banned &&
-                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording.banned}</span>)}
+                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording?.banned ?? translate('banned')}</span>)}
               </div>
               <div className={styles.userLogin}>{user.login}</div>
               {user.email && (<span className={styles.userEmailWrapper}>
-                  <Link pseudo onClick={this.copyEmail} className={styles.userEmail}>
+                  <Link href={`mailto:${user.email}`} title={`mailto:${user.email}`} target="_blank" className={styles.userEmail}>
                     {user.email}
                   </Link>
-                  {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>{wording.unverified}</span>)}
-                  <Icon title={wording.copyToClipboard} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
+                  {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>
+                        {wording?.unverified ?? translate('unverified')}
+                      </span>)}
+                  <Icon title={wording?.copyToClipboard ?? translate('copyToClipboard')} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
                 </span>)}
             </div>
             {children}

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

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { UserCardTooltipAttrs } from './tooltip';
 import { UserCardUser } from './card';
@@ -15,6 +15,6 @@ export default class SmartUserCardTooltip extends Component<SmartUserCardTooltip
         loading: boolean;
     };
     loadUser: () => Promise<void>;
-    renderNoUser: () => JSX.Element | "";
-    render(): JSX.Element;
+    renderNoUser: () => "" | React.JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,10 +1,14 @@
-import { Component, ReactElement, ReactNode } from 'react';
+import React, { Component, ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { DropdownAttrs } from '../dropdown/dropdown';
 import { UserCardAttrs, UserCardUser } from './card';
-export interface UserCardTooltipProps extends Omit<UserCardAttrs, 'user'> {
+interface ChildrenProps {
+    active: boolean;
+    pinned: boolean;
+}
+export interface UserCardTooltipProps extends Omit<UserCardAttrs, 'children' | 'user'> {
     user?: UserCardUser | null | undefined;
-    children: ReactElement | readonly ReactElement[] | string;
+    children: ReactElement | readonly ReactElement[] | string | ((props: ChildrenProps) => ReactNode);
     dropdownProps: Partial<DropdownAttrs>;
     renderUserCard: (props: UserCardAttrs) => ReactNode;
     renderNoUser: () => ReactNode;
@@ -12,20 +16,21 @@ export interface UserCardTooltipProps extends Omit<UserCardAttrs, 'user'> {
 export default class UserCardTooltip extends Component<UserCardTooltipProps> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         dropdownProps: PropTypes.Requireable<object>;
         user: PropTypes.Requireable<object>;
         renderUserCard: PropTypes.Requireable<(...args: any[]) => any>;
         renderNoUser: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
-        renderUserCard: (props: UserCardAttrs) => JSX.Element;
+        renderUserCard: (props: UserCardAttrs) => React.JSX.Element;
         renderNoUser: () => string;
         dropdownProps: {
             hoverShowTimeOut: number;
             hoverHideTimeOut: number;
         };
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type UserCardTooltipAttrs = JSX.LibraryManagedAttributes<typeof UserCardTooltip, UserCardTooltipProps>;
+export {};