@atlaskit/teams-avatar 2.3.9 → 2.3.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/teams-avatar
 
+## 2.3.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.3.9
 
 ### Patch Changes

package/dist/cjs/ui/teams-avatar/index.js

@@ -13,7 +13,14 @@ var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _colors = require("@atlaskit/theme/colors");
 var _teamsAvatarImage = require("./teams-avatar-image");
 var _utils = require("./utils");
-var _excluded = ["testId", "src", "size"];
+var _excluded = ["testId", "src", "size", "teamId"];
+/*
+ * The component accepts src and teamId as input params. Order of preference:
+ * If src is provided, use that directly.
+ * Else if teamId is provided, use that to generate the static image URL.
+ * Else fallback.
+ */
+
 var ICON_BACKGROUND = exports.ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
 var ICON_COLOR = exports.ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
 function TeamAvatar(_ref) {
@@ -21,7 +28,11 @@ function TeamAvatar(_ref) {
     src = _ref.src,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$teamId = _ref.teamId,
+    teamId = _ref$teamId === void 0 ? '' : _ref$teamId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // Strip ARI in case the teamId was given in that format
+  teamId = teamId.replace('ari:cloud:identity::team/', '');
   return /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({
     appearance: (0, _utils.isSquareIcon)(src) ? 'square' : 'circle'
   }, props, {
@@ -31,6 +42,7 @@ function TeamAvatar(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_teamsAvatarImage.TeamAvatarImage, {
     src: src,
     size: size,
-    testId: testId
+    testId: testId,
+    teamId: teamId
   }));
 }

package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _fallback = require("./fallback");
+var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var boxShadowCssVar = '--avatar-box-shadow';
 var bgColorCssVar = '--avatar-bg-color';
@@ -69,17 +70,19 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
     alt = _ref$alt === void 0 ? '' : _ref$alt,
     src = _ref.src,
     size = _ref.size,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    teamId = _ref.teamId;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
+  var avatarSrc = (0, _utils.getTeamAvatarSrc)(src, teamId);
 
   // If src changes, reset state
   (0, _react.useEffect)(function () {
     setHasImageErrored(false);
-  }, [src]);
-  if (!src || hasImageErrored) {
+  }, [avatarSrc]);
+  if (!avatarSrc || hasImageErrored) {
     return /*#__PURE__*/React.createElement(_fallback.FallbackAvatar, {
       "aria-label": alt,
       width: SIZES[size],
@@ -92,7 +95,7 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
     "aria-label": alt,
     className: (0, _runtime.ax)([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
   }, /*#__PURE__*/React.createElement("img", {
-    src: src,
+    src: avatarSrc,
     alt: alt,
     "data-testId": testId && "".concat(testId, "--image"),
     onError: function onError() {

package/dist/cjs/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/utils.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTeamAvatarSrc = getTeamAvatarSrc;
+/**
+ * If a src value is given, we'll use that directly.
+ * Otherwise we'll generate a static URL from the teamId.
+ * If neither are provided, return undefined so that the fallback will be used.
+ */
+function getTeamAvatarSrc(src, teamId) {
+  if (src) {
+    return src;
+  } else if (teamId) {
+    return "/gateway/api/v4/teams/".concat(teamId, "/avatar");
+  }
+  return undefined;
+}

package/dist/es2019/ui/teams-avatar/index.js

@@ -4,14 +4,25 @@ import Avatar from '@atlaskit/avatar';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { TeamAvatarImage } from './teams-avatar-image';
 import { isSquareIcon } from './utils';
+
+/*
+ * The component accepts src and teamId as input params. Order of preference:
+ * If src is provided, use that directly.
+ * Else if teamId is provided, use that to generate the static image URL.
+ * Else fallback.
+ */
+
 export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
 export const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
 export default function TeamAvatar({
   testId,
   src,
   size = 'medium',
+  teamId = '',
   ...props
 }) {
+  // Strip ARI in case the teamId was given in that format
+  teamId = teamId.replace('ari:cloud:identity::team/', '');
   return /*#__PURE__*/React.createElement(Avatar, _extends({
     appearance: isSquareIcon(src) ? 'square' : 'circle'
   }, props, {
@@ -21,6 +32,7 @@ export default function TeamAvatar({
   }), /*#__PURE__*/React.createElement(TeamAvatarImage, {
     src: src,
     size: size,
-    testId: testId
+    testId: testId,
+    teamId: teamId
   }));
 }

package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
 import { FallbackAvatar } from './fallback';
+import { getTeamAvatarSrc } from './utils';
 const boxShadowCssVar = '--avatar-box-shadow';
 const bgColorCssVar = '--avatar-bg-color';
 
@@ -58,15 +59,17 @@ export const TeamAvatarImage = ({
   alt = '',
   src,
   size,
-  testId
+  testId,
+  teamId
 }) => {
   const [hasImageErrored, setHasImageErrored] = useState(false);
+  const avatarSrc = getTeamAvatarSrc(src, teamId);
 
   // If src changes, reset state
   useEffect(() => {
     setHasImageErrored(false);
-  }, [src]);
-  if (!src || hasImageErrored) {
+  }, [avatarSrc]);
+  if (!avatarSrc || hasImageErrored) {
     return /*#__PURE__*/React.createElement(FallbackAvatar, {
       "aria-label": alt,
       width: SIZES[size],
@@ -79,7 +82,7 @@ export const TeamAvatarImage = ({
     "aria-label": alt,
     className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
   }, /*#__PURE__*/React.createElement("img", {
-    src: src,
+    src: avatarSrc,
     alt: alt,
     "data-testId": testId && `${testId}--image`,
     onError: () => setHasImageErrored(true),

package/dist/es2019/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/utils.js

@@ -0,0 +1,13 @@
+/**
+ * If a src value is given, we'll use that directly.
+ * Otherwise we'll generate a static URL from the teamId.
+ * If neither are provided, return undefined so that the fallback will be used.
+ */
+export function getTeamAvatarSrc(src, teamId) {
+  if (src) {
+    return src;
+  } else if (teamId) {
+    return `/gateway/api/v4/teams/${teamId}/avatar`;
+  }
+  return undefined;
+}

package/dist/esm/ui/teams-avatar/index.js

@@ -1,11 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["testId", "src", "size"];
+var _excluded = ["testId", "src", "size", "teamId"];
 import React from 'react';
 import Avatar from '@atlaskit/avatar';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { TeamAvatarImage } from './teams-avatar-image';
 import { isSquareIcon } from './utils';
+
+/*
+ * The component accepts src and teamId as input params. Order of preference:
+ * If src is provided, use that directly.
+ * Else if teamId is provided, use that to generate the static image URL.
+ * Else fallback.
+ */
+
 export var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(N0, ")");
 export var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
 export default function TeamAvatar(_ref) {
@@ -13,7 +21,11 @@ export default function TeamAvatar(_ref) {
     src = _ref.src,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$teamId = _ref.teamId,
+    teamId = _ref$teamId === void 0 ? '' : _ref$teamId,
     props = _objectWithoutProperties(_ref, _excluded);
+  // Strip ARI in case the teamId was given in that format
+  teamId = teamId.replace('ari:cloud:identity::team/', '');
   return /*#__PURE__*/React.createElement(Avatar, _extends({
     appearance: isSquareIcon(src) ? 'square' : 'circle'
   }, props, {
@@ -23,6 +35,7 @@ export default function TeamAvatar(_ref) {
   }), /*#__PURE__*/React.createElement(TeamAvatarImage, {
     src: src,
     size: size,
-    testId: testId
+    testId: testId,
+    teamId: teamId
   }));
 }

package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
 import { FallbackAvatar } from './fallback';
+import { getTeamAvatarSrc } from './utils';
 var boxShadowCssVar = '--avatar-box-shadow';
 var bgColorCssVar = '--avatar-bg-color';
 
@@ -60,17 +61,19 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
     alt = _ref$alt === void 0 ? '' : _ref$alt,
     src = _ref.src,
     size = _ref.size,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    teamId = _ref.teamId;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
+  var avatarSrc = getTeamAvatarSrc(src, teamId);
 
   // If src changes, reset state
   useEffect(function () {
     setHasImageErrored(false);
-  }, [src]);
-  if (!src || hasImageErrored) {
+  }, [avatarSrc]);
+  if (!avatarSrc || hasImageErrored) {
     return /*#__PURE__*/React.createElement(FallbackAvatar, {
       "aria-label": alt,
       width: SIZES[size],
@@ -83,7 +86,7 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
     "aria-label": alt,
     className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
   }, /*#__PURE__*/React.createElement("img", {
-    src: src,
+    src: avatarSrc,
     alt: alt,
     "data-testId": testId && "".concat(testId, "--image"),
     onError: function onError() {

package/dist/esm/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/utils.js

@@ -0,0 +1,13 @@
+/**
+ * If a src value is given, we'll use that directly.
+ * Otherwise we'll generate a static URL from the teamId.
+ * If neither are provided, return undefined so that the fallback will be used.
+ */
+export function getTeamAvatarSrc(src, teamId) {
+  if (src) {
+    return src;
+  } else if (teamId) {
+    return "/gateway/api/v4/teams/".concat(teamId, "/avatar");
+  }
+  return undefined;
+}

package/dist/types/ui/teams-avatar/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { type AvatarPropTypes } from '@atlaskit/avatar';
-export type TeamAvatarProps = Omit<AvatarPropTypes, 'appearance'>;
+export type TeamAvatarProps = Omit<AvatarPropTypes, 'appearance'> & {
+    teamId?: string;
+};
 export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
 export declare const ICON_COLOR: "var(--ds-icon-subtle)";
-export default function TeamAvatar({ testId, src, size, ...props }: TeamAvatarProps): React.JSX.Element;
+export default function TeamAvatar({ testId, src, size, teamId, ...props }: TeamAvatarProps): React.JSX.Element;

package/dist/types/ui/teams-avatar/teams-avatar-image/index.d.ts

@@ -5,6 +5,7 @@ type AvatarImageProps = {
     alt?: string;
     src?: string;
     testId?: string;
+    teamId?: string;
 };
 /**
  * __Avatar image__

package/dist/types/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.d.ts

@@ -2,18 +2,18 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
 import { type SizeType } from '@atlaskit/avatar';
 type AvatarImageProps = {
     size: SizeType;
     alt?: string;
     src?: string;
     testId?: string;
+    teamId?: string;
 };
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export declare const TeamAvatarImage: ({ alt, src, size, testId }: AvatarImageProps) => JSX.Element;
+export declare const TeamAvatarImage: ({ alt, src, size, testId, teamId }: AvatarImageProps) => JSX.Element;
 export {};

package/dist/types/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * If a src value is given, we'll use that directly.
+ * Otherwise we'll generate a static URL from the teamId.
+ * If neither are provided, return undefined so that the fallback will be used.
+ */
+export declare function getTeamAvatarSrc(src?: string, teamId?: string): string | undefined;

package/dist/types-ts4.5/ui/teams-avatar/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { type AvatarPropTypes } from '@atlaskit/avatar';
-export type TeamAvatarProps = Omit<AvatarPropTypes, 'appearance'>;
+export type TeamAvatarProps = Omit<AvatarPropTypes, 'appearance'> & {
+    teamId?: string;
+};
 export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
 export declare const ICON_COLOR: "var(--ds-icon-subtle)";
-export default function TeamAvatar({ testId, src, size, ...props }: TeamAvatarProps): React.JSX.Element;
+export default function TeamAvatar({ testId, src, size, teamId, ...props }: TeamAvatarProps): React.JSX.Element;

package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/index.d.ts

@@ -5,6 +5,7 @@ type AvatarImageProps = {
     alt?: string;
     src?: string;
     testId?: string;
+    teamId?: string;
 };
 /**
  * __Avatar image__

package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -9,11 +8,12 @@ type AvatarImageProps = {
     alt?: string;
     src?: string;
     testId?: string;
+    teamId?: string;
 };
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export declare const TeamAvatarImage: ({ alt, src, size, testId }: AvatarImageProps) => JSX.Element;
+export declare const TeamAvatarImage: ({ alt, src, size, testId, teamId }: AvatarImageProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/teams-avatar-image-next/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * If a src value is given, we'll use that directly.
+ * Otherwise we'll generate a static URL from the teamId.
+ * If neither are provided, return undefined so that the fallback will be used.
+ */
+export declare function getTeamAvatarSrc(src?: string, teamId?: string): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/teams-avatar",
-	"version": "2.3.9",
+	"version": "2.3.11",
 	"description": "A team avatar is a visual representation of a team.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,11 +40,11 @@
 	"dependencies": {
 		"@atlaskit/avatar": "^25.1.0",
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/icon": "^27.8.0",
+		"@atlaskit/icon": "^28.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tokens": "^5.6.0",
+		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1"
@@ -60,7 +60,6 @@
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",
-		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {