@jetbrains/ring-ui-built 7.0.21 → 7.0.23

package/components/_helpers/avatar-info.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { Size } from '../avatar/avatar-size.js';
+
+var styles = {"avatar":"avatar_rui_a03e","avatarShadow":"avatarShadow_rui_a03e","avatarInfo":"avatarInfo_rui_a03e","subavatar":"subavatar_rui_a03e","empty":"empty_rui_a03e"};
+
+const fontSizes = {
+  [Size.Size16]: 9,
+  [Size.Size18]: 9,
+  [Size.Size20]: 9,
+  [Size.Size24]: 11,
+  [Size.Size28]: 12,
+  [Size.Size32]: 14,
+  [Size.Size40]: 16,
+  [Size.Size48]: 16,
+  [Size.Size56]: 22
+};
+function AvatarInfo(_ref) {
+  let {
+    size,
+    children
+  } = _ref;
+  const fontSize = fontSizes[size];
+  return jsx("span", {
+    style: {
+      fontSize
+    },
+    className: classNames(styles.avatarInfo),
+    children: children
+  });
+}
+
+export { AvatarInfo as A, styles as s };

package/components/_helpers/card.js

@@ -4,13 +4,14 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import copyIcon from '@jetbrains/icons/copy';
-import Avatar, { Size } from '../avatar/avatar.js';
+import Avatar from '../avatar/avatar.js';
 import Link from '../link/link.js';
 import clipboard from '../clipboard/clipboard.js';
 import Tag from '../tag/tag.js';
 import Icon from '../icon/icon.js';
 import { I18nContext } from '../i18n/i18n-context.js';
 import Tooltip from '../tooltip/tooltip.js';
+import { Size } from '../avatar/avatar-size.js';
 import { Size as Size$1 } from '../icon/icon__constants.js';
 
 var styles = {"userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userAvatar":"userAvatar_rui_6e59","userInformation":"userInformation_rui_6e59","userInformationGeneral":"userInformationGeneral_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","banLabel":"banLabel_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
@@ -55,6 +56,7 @@ class UserCard extends PureComponent {
           children: [jsx(Avatar, {
             size: Size.Size56,
             url: user.avatarUrl,
+            username: user.name,
             round: true
           }), !!avatarInfo && avatarInfo]
         }), jsxs("div", {

package/components/avatar/avatar-info.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { Size } from './avatar-size';
+interface InfoAvatarProps {
+    size: Size;
+    children?: ReactNode;
+}
+export default function AvatarInfo({ size, children }: InfoAvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/avatar/avatar-info.js

@@ -0,0 +1,4 @@
+import 'react/jsx-runtime';
+import 'classnames';
+export { A as default } from '../_helpers/avatar-info.js';
+import './avatar-size.js';

package/components/avatar/avatar-size.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @name Avatar
+ */
+export declare enum Size {
+    Size16 = 16,
+    /** @deprecated */
+    Size18 = 18,
+    Size20 = 20,
+    Size24 = 24,
+    Size28 = 28,
+    Size32 = 32,
+    Size40 = 40,
+    /** @deprecated */
+    Size48 = 48,
+    Size56 = 56
+}

package/components/avatar/avatar-size.js

@@ -0,0 +1,19 @@
+/**
+ * @name Avatar
+ */
+var Size;
+(function (Size) {
+  Size[Size["Size16"] = 16] = "Size16";
+  /** @deprecated */
+  Size[Size["Size18"] = 18] = "Size18";
+  Size[Size["Size20"] = 20] = "Size20";
+  Size[Size["Size24"] = 24] = "Size24";
+  Size[Size["Size28"] = 28] = "Size28";
+  Size[Size["Size32"] = 32] = "Size32";
+  Size[Size["Size40"] = 40] = "Size40";
+  /** @deprecated */
+  Size[Size["Size48"] = 48] = "Size48";
+  Size[Size["Size56"] = 56] = "Size56";
+})(Size || (Size = {}));
+
+export { Size };

package/components/avatar/avatar.d.ts

@@ -1,19 +1,6 @@
-import { PureComponent, ImgHTMLAttributes } from 'react';
-/**
- * @name Avatar
- */
-export declare enum Size {
-    /** @deprecated */
-    Size18 = 18,
-    Size20 = 20,
-    Size24 = 24,
-    Size28 = 28,
-    Size32 = 32,
-    Size40 = 40,
-    /** @deprecated */
-    Size48 = 48,
-    Size56 = 56
-}
+import { PureComponent, ImgHTMLAttributes, ReactNode } from 'react';
+import { Size } from './avatar-size';
+export { Size };
 export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
     dpr: number;
     size: Size | number;
@@ -22,6 +9,7 @@ export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
     round?: boolean | null | undefined;
     subavatar?: string | null | undefined;
     username?: string | null | undefined;
+    info?: ReactNode;
     skipParams?: boolean | null | undefined;
 }
 export default class Avatar extends PureComponent<AvatarProps> {

package/components/avatar/avatar.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/components/avatar/avatar.figma.js

@@ -0,0 +1,39 @@
+import { b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import figma from '@figma/code-connect';
+import Avatar from './avatar.js';
+import { Size } from './avatar-size.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react';
+import 'classnames';
+import 'util-deprecate';
+import '../global/url.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/dom.js';
+import '../global/memoize.js';
+import '../_helpers/avatar-info.js';
+import './fallback-avatar.js';
+import '../global/get-uid.js';
+
+figma.connect(Avatar, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?m=auto&node-id=5990-522&t=v8bItK8qotmnbysK-1', {
+  props: {
+    round: figma.boolean('Round'),
+    size: figma.enum('Size', {
+      '20 px': Size.Size20,
+      '24 px': Size.Size24,
+      '28 px': Size.Size28,
+      '32 px': Size.Size32,
+      '40px': Size.Size40,
+      '56px': Size.Size56
+    }),
+    username: figma.enum('Content', {
+      name: 'Samuel Morse'
+    }),
+    url: figma.enum('Content', {
+      'color/image': 'avatar.png'
+    })
+  },
+  example: props => jsx(Avatar, _objectSpread2({}, props)),
+  imports: ['import Avatar, {Size} from "@jetbrains/ring-ui/components/avatar/avatar"']
+});

package/components/avatar/avatar.js

@@ -1,36 +1,20 @@
 import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
 import { isDataURI, parseQueryString, encodeURL } from '../global/url.js';
 import { getPixelRatio } from '../global/dom.js';
 import memoize from '../global/memoize.js';
+import { s as styles, A as AvatarInfo } from '../_helpers/avatar-info.js';
 import FallbackAvatar from './fallback-avatar.js';
+import { Size } from './avatar-size.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
 import '../global/get-uid.js';
 
-var styles = {"avatar":"avatar_rui_a03e","subavatar":"subavatar_rui_a03e","empty":"empty_rui_a03e"};
-
-const _excluded = ["size", "url", "dpr", "style", "round", "subavatar", "subavatarSize", "username", "skipParams"];
-/**
- * @name Avatar
- */
-var Size;
-(function (Size) {
-  /** @deprecated */
-  Size[Size["Size18"] = 18] = "Size18";
-  Size[Size["Size20"] = 20] = "Size20";
-  Size[Size["Size24"] = 24] = "Size24";
-  Size[Size["Size28"] = 28] = "Size28";
-  Size[Size["Size32"] = 32] = "Size32";
-  Size[Size["Size40"] = 40] = "Size40";
-  /** @deprecated */
-  Size[Size["Size48"] = 48] = "Size48";
-  Size[Size["Size56"] = 56] = "Size56";
-})(Size || (Size = {}));
+const _excluded = ["size", "url", "dpr", "style", "round", "subavatar", "subavatarSize", "username", "info", "skipParams"];
 const warnSize = memoize(size => deprecate(() => {}, "Avatar: Size".concat(size, " is deprecated and will be removed in 8.0. The supported sizes are: Size20, Size24, Size28, Size32, Size40.")));
 class Avatar extends PureComponent {
   constructor() {
@@ -60,6 +44,7 @@ class Avatar extends PureComponent {
         subavatar,
         subavatarSize,
         username,
+        info,
         skipParams
       } = _this$props,
       restProps = _objectWithoutProperties(_this$props, _excluded);
@@ -80,17 +65,20 @@ class Avatar extends PureComponent {
       width: subavatarSizeString
     }, style);
     if (!url || this.state.errorUrl === url) {
-      return jsx("span", _objectSpread2(_objectSpread2({}, restProps), {}, {
+      return jsxs("span", _objectSpread2(_objectSpread2({}, restProps), {}, {
         "data-test": "avatar",
         className: classNames(styles.avatar, this.props.className, {
-          [styles.empty]: username == null
+          [styles.empty]: username == null && info == null
         }),
         style: styleObj,
-        children: username != null && jsx(FallbackAvatar, {
+        children: [username != null && jsx(FallbackAvatar, {
           size: size,
           round: round,
           username: username
-        })
+        }), info != null && jsx(AvatarInfo, {
+          size: size,
+          children: info
+        })]
       }));
     }
     let src = url;
@@ -114,7 +102,7 @@ class Avatar extends PureComponent {
         children: [jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
           onError: this.handleError,
           onLoad: this.handleSuccess,
-          className: classNames(styles.avatar, this.props.className),
+          className: classNames(styles.avatar, styles.avatarShadow, this.props.className),
           style: styleObj,
           src: src,
           alt: "User avatar"
@@ -133,7 +121,7 @@ class Avatar extends PureComponent {
         "data-test": "avatar",
         onError: this.handleError,
         onLoad: this.handleSuccess,
-        className: classNames(styles.avatar, this.props.className),
+        className: classNames(styles.avatar, styles.avatarShadow, this.props.className),
         style: styleObj,
         src: src,
         alt: "User avatar"

package/components/avatar/fallback-avatar.d.ts

@@ -1,4 +1,4 @@
-import { Size } from './avatar';
+import { Size } from './avatar-size';
 export interface FallbackAvatarProps {
     username: string;
     size: Size;

package/components/avatar/fallback-avatar.js

@@ -3,11 +3,21 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import getUID from '../global/get-uid.js';
+import { Size } from './avatar-size.js';
 
-const colorPairs = [['#60A800', '#D5CA00'], ['#21D370', '#03E9E1'], ['#3BA1FF', '#36E97D'], ['#00C243', '#00FFFF'], ['#4BE098', '#627FFF'], ['#168BFA', '#26F7C7'], ['#9D4CFF', '#39D3C3'], ['#0A81F6', '#0ACFF6'], ['#765AF8', '#5A91F8'], ['#9E54FF', '#0ACFF6'], ['#B345F1', '#669DFF'], ['#765AF8', '#C059EE'], ['#9039D0', '#C239D0'], ['#9F2AFF', '#FD56FD'], ['#AB3AF2', '#E40568'], ['#9F2AFF', '#E9A80B'], ['#D50F6B', '#E73AE8'], ['#ED5502', '#E73AE8'], ['#ED358C', '#DBED18'], ['#ED358C', '#F9902E'], ['#FF7500', '#FFCA00']];
-const Sizes = {
-  18: {
-    radius: 2,
+const colorPairs = [['#A5E074', '#E8E093'], ['#6AD8A2', '#79E98F'], ['#7FBAF6', '#7BEBB2'], ['#6DDC8C', '#97FFFF'], ['#8EE5C0', '#A2B6FF'], ['#73B4F5', '#78F8DC'], ['#BA8EFF', '#78DFD6'], ['#63AFF5', '#60E2F5'], ['#A192F7', '#93B2F7'], ['#B989FF', '#60E2F5'], ['#CA7EF7', '#9BBAF8'], ['#A192F7', '#CF94F4'], ['#AB7EE1', '#D58AE3'], ['#BE82FF', '#FFA0FF'], ['#C57EF2', '#F2799E'], ['#BE82FF', '#F2CC83'], ['#E16C9D', '#EF8AE8'], ['#F29766', '#EF8AE8'], ['#F27AA9', '#EAF087'], ['#F27AA9', '#FBBB8C'], ['#FFAB66', '#FFEBA0']];
+const SizesSquare = {
+  [Size.Size16]: {
+    radius: 4,
+    text: {
+      x: 7.5,
+      y: 11
+    },
+    fontSize: '8px',
+    textAnchor: 'middle'
+  },
+  [Size.Size18]: {
+    radius: 4,
     text: {
       x: 9,
       y: 13
@@ -15,46 +25,205 @@ const Sizes = {
     fontSize: '11px',
     textAnchor: 'middle'
   },
-  24: {
-    radius: 3,
+  [Size.Size20]: {
+    radius: 4,
     text: {
       x: 2,
-      y: 13
+      y: 10
+    },
+    fontSize: '9px',
+    underscore: {
+      x: 3,
+      y: 16,
+      width: 7,
+      height: 1
+    }
+  },
+  [Size.Size24]: {
+    radius: 4,
+    text: {
+      x: 2,
+      y: 12
     },
     fontSize: '11px',
     underscore: {
       x: 3,
-      y: 17
+      y: 18.5,
+      width: 9,
+      height: 1.5
     }
   },
-  32: {
-    radius: 3,
+  [Size.Size28]: {
+    radius: 4,
+    text: {
+      x: 2,
+      y: 14
+    },
+    fontSize: '13px',
+    underscore: {
+      x: 3,
+      y: 22,
+      width: 11,
+      height: 2
+    }
+  },
+  [Size.Size32]: {
+    radius: 4,
     text: {
       x: 3,
       y: 17
     },
-    fontSize: '13px',
+    fontSize: '15px',
     letterSpacing: 1,
     underscore: {
       x: 4,
-      y: 22
+      y: 26,
+      width: 12,
+      height: 2
     }
   },
-  40: {
-    radius: 3,
+  [Size.Size40]: {
+    radius: 4,
     text: {
+      x: 3,
+      y: 21
+    },
+    fontSize: '19px',
+    letterSpacing: 1,
+    underscore: {
       x: 5,
-      y: 19
+      y: 32,
+      width: 15,
+      height: 2.5
+    }
+  },
+  [Size.Size48]: {
+    radius: 4,
+    text: {
+      x: 3,
+      y: 21
     },
-    fontSize: '15px',
+    fontSize: '19px',
     letterSpacing: 1,
     underscore: {
-      x: 6,
+      x: 5,
+      y: 32,
+      width: 15,
+      height: 2.5
+    }
+  },
+  [Size.Size56]: {
+    radius: 4,
+    text: {
+      x: 4,
       y: 28
+    },
+    fontSize: '26px',
+    letterSpacing: 1,
+    underscore: {
+      x: 7,
+      y: 45,
+      width: 21,
+      height: 3.5
     }
   }
 };
-const sizeKeys = Object.keys(Sizes).map(Number);
+const SizesRound = {
+  [Size.Size16]: {
+    radius: 4,
+    fontSize: '8px',
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
+  },
+  [Size.Size18]: {
+    radius: 4,
+    fontSize: '11px',
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
+  },
+  [Size.Size20]: {
+    radius: 4,
+    fontSize: '9px',
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
+  },
+  [Size.Size24]: {
+    radius: 4,
+    fontSize: '11px',
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
+  },
+  [Size.Size28]: {
+    radius: 4,
+    fontSize: '13px',
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
+  },
+  [Size.Size32]: {
+    radius: 4,
+    fontSize: '15px',
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle',
+    letterSpacing: 1
+  },
+  [Size.Size40]: {
+    radius: 4,
+    fontSize: '19px',
+    letterSpacing: 1,
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
+  },
+  [Size.Size48]: {
+    radius: 4,
+    fontSize: '19px',
+    letterSpacing: 1,
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
+  },
+  [Size.Size56]: {
+    radius: 4,
+    fontSize: '26px',
+    letterSpacing: 1,
+    text: {
+      x: '50%',
+      y: '54%'
+    },
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
+  }
+};
 function extractLetters(name) {
   const names = name.split(/[\s._]+/).filter(Boolean).map(word => Array.from(word));
   if (names.length >= 2) {
@@ -86,27 +255,26 @@ function FallbackAvatar(_ref) {
   } = _ref;
   const hash = Math.abs(hashCode(username.toLowerCase()));
   const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
-  const possibleSizeKeys = sizeKeys.filter(key => key >= size);
-  const sizeKey = possibleSizeKeys.length > 0 ? Math.min(...possibleSizeKeys) : Math.max(...sizeKeys);
-  const sizes = Sizes[sizeKey];
+  const sizes = round ? SizesRound[size] : SizesSquare[size];
+  const underscore = sizes.underscore;
   const radius = round ? '50%' : sizes.radius;
   const gradientId = useMemo(() => getUID('gradient-'), []);
   return jsxs("svg", {
-    viewBox: "0 0 ".concat(sizeKey, " ").concat(sizeKey),
+    viewBox: "0 0 ".concat(size, " ").concat(size),
     xmlns: "http://www.w3.org/2000/svg",
     children: [jsx("defs", {
       children: jsxs("linearGradient", {
         id: gradientId,
-        x1: "0",
-        y1: "0",
+        x1: "1",
+        y1: "1",
         x2: "0",
-        y2: "1",
+        y2: "0",
         children: [jsx("stop", {
           stopColor: fromColor,
           offset: "0"
         }), jsx("stop", {
           stopColor: toColor,
-          offset: "1"
+          offset: "0.8"
         })]
       })
     }), jsxs("g", {
@@ -114,26 +282,30 @@ function FallbackAvatar(_ref) {
         fill: "url(#".concat(gradientId, ")"),
         x: "0",
         y: "0",
-        width: sizeKey,
-        height: sizeKey,
+        width: size,
+        height: size,
         rx: radius,
         ry: radius
-      }), jsxs("text", {
+      }), jsx("text", {
         x: sizes.text.x,
         y: sizes.text.y,
-        fontFamily: "Arial, Helvetica, sans-serif",
+        fontFamily: "var(--ring-font-family, 'Arial, Helvetica, sans-serif')",
         fontSize: sizes.fontSize,
+        fontWeight: "600",
         letterSpacing: sizes.letterSpacing,
         fill: "#FFFFFF",
+        dominantBaseline: sizes.dominantBaseline,
         textAnchor: sizes.textAnchor,
         cursor: "default",
-        children: [jsx("tspan", {
+        children: jsx("tspan", {
           children: extractLetters(username)
-        }), sizes.underscore && jsx("tspan", {
-          x: sizes.underscore.x,
-          y: sizes.underscore.y,
-          children: '_'
-        })]
+        })
+      }), underscore && jsx("rect", {
+        fill: "#FFFFFF",
+        x: underscore.x,
+        y: underscore.y,
+        width: underscore.width,
+        height: underscore.height
       }), jsx("title", {
         children: username
       })]

package/components/avatar-stack/avatar-stack.js

@@ -4,7 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, Children } from 'react';
 import classNames from 'classnames';
 import DropdownMenu from '../dropdown-menu/dropdown-menu.js';
-import { Size } from '../avatar/avatar.js';
+import '../avatar/avatar.js';
+import { Size } from '../avatar/avatar-size.js';
 import '../list/list.js';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.string.trim.js';
@@ -30,6 +31,8 @@ import '../list/list__link.js';
 import '../link/link.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
+import '../list/list__classes.js';
+import '../list/consts.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
@@ -42,13 +45,13 @@ import 'core-js/modules/es.string.replace.js';
 import '../global/composeRefs.js';
 import '../control-help/control-help.js';
 import '../global/url.js';
+import '../_helpers/avatar-info.js';
 import '../avatar/fallback-avatar.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
 import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
-import '../list/consts.js';
 import '../dropdown/dropdown.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';

package/components/dropdown-menu/dropdown-menu.js

@@ -32,11 +32,15 @@ import '../list/list__link.js';
 import '../link/link.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
+import '../list/list__classes.js';
+import '../list/consts.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import 'core-js/modules/es.string.replace.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
@@ -51,7 +55,6 @@ import '../global/get-event-key.js';
 import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
-import '../list/consts.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';