@jetbrains/ring-ui 5.0.98 → 5.0.99

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

@@ -24,6 +24,7 @@ export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
     user: UserCardUser;
     wording: UserCardWording;
     info?: ReactElement | readonly ReactElement[] | string;
+    avatarInfo?: ReactElement | readonly ReactElement[] | string;
     'data-test'?: string | null | undefined;
 }
 export default class UserCard extends PureComponent<UserCardProps> {

package/components/user-card/card.js

@@ -50,12 +50,15 @@ export default class UserCard extends PureComponent {
         clipboard.copyText(user.email || '', wording.copiedToClipboard, wording.copingToClipboardError);
     };
     render() {
-        const { children, info, className, user, wording, ...restProps } = this.props;
+        const { children, info, className, user, wording, avatarInfo, ...restProps } = this.props;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (<div className={classes} {...restProps}>
         <div className={styles.userInformationContainer}>
-          <Avatar size={AvatarSize.Size56} url={user.avatarUrl}/>
+          <div className={styles.userAvatar}>
+            <Avatar size={AvatarSize.Size56} url={user.avatarUrl}/>
+            {!!avatarInfo && avatarInfo}
+          </div>
           <div className={styles.userInformation}>
             <div className={styles.userNameLine}>
               {user.href && (<Link href={user.href} className={styles.userName}>

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

@@ -6,7 +6,7 @@ export interface UserCardTooltipProps extends Omit<UserCardAttrs, 'user'> {
     user?: UserCardUser | null | undefined;
     children: ReactElement | readonly ReactElement[] | string;
     dropdownProps: Partial<DropdownAttrs>;
-    renderUserCard: (props: UserCardTooltipProps) => ReactNode;
+    renderUserCard: (props: UserCardAttrs) => ReactNode;
     renderNoUser: () => ReactNode;
 }
 export default class UserCardTooltip extends Component<UserCardTooltipProps> {
@@ -19,7 +19,7 @@ export default class UserCardTooltip extends Component<UserCardTooltipProps> {
         renderNoUser: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
-        renderUserCard: (props: UserCardTooltipProps) => JSX.Element | null | undefined;
+        renderUserCard: (props: UserCardAttrs) => JSX.Element;
         renderNoUser: () => string;
         dropdownProps: {
             hoverShowTimeOut: number;

package/components/user-card/tooltip.js

@@ -17,8 +17,8 @@ export default class UserCardTooltip extends Component {
     };
     static defaultProps = {
         renderUserCard: (props) => {
-            const { className, children, renderUserCard, renderNoUser, dropdownProps, user, ...restProps } = props;
-            return user && (<UserCard user={user} {...restProps} className={classNames(styles.userCardSpaced, className)}/>);
+            const { user, ...restProps } = props;
+            return user && (<UserCard user={user} {...restProps}/>);
         },
         renderNoUser: () => '',
         dropdownProps: {
@@ -27,10 +27,16 @@ export default class UserCardTooltip extends Component {
         }
     };
     render() {
-        const { children, user, renderUserCard, renderNoUser, dropdownProps } = this.props;
+        const { children, renderUserCard, renderNoUser, dropdownProps, user, ...restProps } = this.props;
         return (<Dropdown anchor={children} hoverMode clickMode={false} {...dropdownProps}>
         <Popup attached={false}>
-          {user ? renderUserCard(this.props) : renderNoUser()}
+          {user
+                ? renderUserCard({
+                    ...restProps,
+                    user,
+                    className: classNames(styles.userCardSpaced, this.props.className)
+                })
+                : renderNoUser()}
         </Popup>
       </Dropdown>);
     }

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

@@ -8,7 +8,13 @@
 
 .userInformationContainer {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
+}
+
+.userAvatar {
+  position: relative;
+
+  display: flex;
 }
 
 .userInformation {

package/dist/_helpers/card.js

@@ -10,7 +10,7 @@ import { m as modules_6c9187df } from './badge.js';
 import Icon from '../icon/icon.js';
 import { Size as Size$1 } from '../icon/icon__constants.js';
 
-var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userInformation":"userInformation_rui_6e59","userNameLine":"userNameLine_rui_6e59","userName":"userName_rui_6e59","userLogin":"userLogin_rui_6e59","userEmail":"userEmail_rui_6e59","userCopyIcon":"userCopyIcon_rui_6e59","userEmailWrapper":"userEmailWrapper_rui_6e59","unverifiedLabel":"unverifiedLabel_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
+var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userAvatar":"userAvatar_rui_6e59","userInformation":"userInformation_rui_6e59","userNameLine":"userNameLine_rui_6e59","userName":"userName_rui_6e59","userLogin":"userLogin_rui_6e59","userEmail":"userEmail_rui_6e59","userCopyIcon":"userCopyIcon_rui_6e59","userEmailWrapper":"userEmailWrapper_rui_6e59","unverifiedLabel":"unverifiedLabel_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
 
 class UserCard extends PureComponent {
   constructor() {
@@ -30,6 +30,7 @@ class UserCard extends PureComponent {
       className,
       user,
       wording,
+      avatarInfo,
       ...restProps
     } = this.props;
     const classes = classNames(className, {});
@@ -38,10 +39,12 @@ class UserCard extends PureComponent {
       className: classes
     }, restProps), /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userInformationContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: modules_a4196c17.userAvatar
     }, /*#__PURE__*/React.createElement(Avatar, {
       size: Size.Size56,
       url: user.avatarUrl
-    }), /*#__PURE__*/React.createElement("div", {
+    }), !!avatarInfo && avatarInfo), /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userInformation
     }, /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userNameLine