@atlaskit/avatar 25.3.0 → 25.3.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/avatar
 
+## 25.3.1
+
+### Patch Changes
+
+- [`42beb385671cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42beb385671cf) -
+  [ux] Add a new prop to set the container element for avatar content"
+
 ## 25.3.0
 
 ### Minor Changes

package/dist/cjs/avatar.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "25.2.1";
+var packageVersion = "0.0.0-development";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -58,6 +58,8 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     testId = _ref.testId,
     _ref$as = _ref.as,
     AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
+    contentAs = _ref.contentAs,
+    containerRole = _ref.containerRole,
     _ref$isDecorative = _ref.isDecorative,
     isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative,
     imgLoading = _ref.imgLoading;
@@ -115,11 +117,12 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
   var isInteractive = onClick || href || isDisabled;
   var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
+  var avatarContainerRole = containerRole || (containerShouldBeImage ? 'img' : undefined);
   return /*#__PURE__*/React.createElement(_context.EnsureIsInsideAvatarContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(AvatarContainer, {
     "data-testid": testId,
-    role: containerShouldBeImage ? 'img' : undefined,
+    role: avatarContainerRole,
     "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
     style: {
       zIndex: stackIndex
@@ -127,7 +130,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
   }, /*#__PURE__*/React.createElement(_context.AvatarContentContext.Provider, {
     value: {
-      as: (0, _utilities.getCustomElement)(isDisabled, href, onClick),
+      as: contentAs || (0, _utilities.getCustomElement)(isDisabled, href, onClick),
       appearance: appearance,
       borderColor: borderColor,
       href: href,

package/dist/es2019/avatar.js

@@ -12,7 +12,7 @@ import { PresenceWrapper } from './presence';
 import { StatusWrapper } from './status';
 import { getCustomElement } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "25.2.1";
+const packageVersion = "0.0.0-development";
 const containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -44,6 +44,8 @@ const Avatar = /*#__PURE__*/forwardRef(({
   target,
   testId,
   as: AvatarContainer = 'div',
+  contentAs,
+  containerRole,
   isDecorative = false,
   imgLoading
 }, ref) => {
@@ -103,11 +105,12 @@ const Avatar = /*#__PURE__*/forwardRef(({
   const defaultLabel = [name, isStatus && !customStatusNode && `(${status})`, isPresence && !customPresenceNode && `(${presence})`].filter(Boolean).join(' ');
   const isInteractive = onClick || href || isDisabled;
   const containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
+  const avatarContainerRole = containerRole || (containerShouldBeImage ? 'img' : undefined);
   return /*#__PURE__*/React.createElement(EnsureIsInsideAvatarContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(AvatarContainer, {
     "data-testid": testId,
-    role: containerShouldBeImage ? 'img' : undefined,
+    role: avatarContainerRole,
     "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
     style: {
       zIndex: stackIndex
@@ -115,7 +118,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
     className: ax(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
   }, /*#__PURE__*/React.createElement(AvatarContentContext.Provider, {
     value: {
-      as: getCustomElement(isDisabled, href, onClick),
+      as: contentAs || getCustomElement(isDisabled, href, onClick),
       appearance,
       borderColor,
       href,

package/dist/esm/avatar.js

@@ -15,7 +15,7 @@ import { PresenceWrapper } from './presence';
 import { StatusWrapper } from './status';
 import { getCustomElement } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "25.2.1";
+var packageVersion = "0.0.0-development";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -49,6 +49,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     _ref$as = _ref.as,
     AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
+    contentAs = _ref.contentAs,
+    containerRole = _ref.containerRole,
     _ref$isDecorative = _ref.isDecorative,
     isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative,
     imgLoading = _ref.imgLoading;
@@ -106,11 +108,12 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
   var isInteractive = onClick || href || isDisabled;
   var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
+  var avatarContainerRole = containerRole || (containerShouldBeImage ? 'img' : undefined);
   return /*#__PURE__*/React.createElement(EnsureIsInsideAvatarContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(AvatarContainer, {
     "data-testid": testId,
-    role: containerShouldBeImage ? 'img' : undefined,
+    role: avatarContainerRole,
     "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
     style: {
       zIndex: stackIndex
@@ -118,7 +121,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: ax(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
   }, /*#__PURE__*/React.createElement(AvatarContentContext.Provider, {
     value: {
-      as: getCustomElement(isDisabled, href, onClick),
+      as: contentAs || getCustomElement(isDisabled, href, onClick),
       appearance: appearance,
       borderColor: borderColor,
       href: href,

package/dist/types/avatar.d.ts

@@ -90,6 +90,15 @@ export interface AvatarPropTypes {
      * be used to wrap the element.
      */
     as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
+    /**
+     * Replace the wrapper of the content element. This accepts the name of a html tag which will
+     * be used to wrap the content element.
+     */
+    contentAs?: 'a' | 'button' | 'span';
+    /**
+     * Set the role of the container element
+     */
+    containerRole?: 'presentation' | 'img';
     /**
      * whether disable aria-labelledby for avatar img
      */

package/dist/types-ts4.5/avatar.d.ts

@@ -90,6 +90,15 @@ export interface AvatarPropTypes {
      * be used to wrap the element.
      */
     as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
+    /**
+     * Replace the wrapper of the content element. This accepts the name of a html tag which will
+     * be used to wrap the content element.
+     */
+    contentAs?: 'a' | 'button' | 'span';
+    /**
+     * Set the role of the container element
+     */
+    containerRole?: 'presentation' | 'img';
     /**
      * whether disable aria-labelledby for avatar img
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "25.3.0",
+	"version": "25.3.1",
 	"description": "An avatar is a visual representation of a user or entity.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/icon": "^28.3.0",
+		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/theme": "^21.0.0",