@atlaskit/avatar 25.7.4 → 25.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/avatar
 
+## 25.8.0
+
+### Minor Changes
+
+- [`7140aa6f03a00`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7140aa6f03a00) -
+  Adds aria-controls, aria-expanded, and aria-haspopup props to Avatar, enabling it to be used
+  directly as a popup trigger without needing an external button wrapper.
+
+## 25.7.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 25.7.4
 
 ### Patch Changes

package/dist/cjs/avatar-content.js

@@ -84,12 +84,18 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     target = _useAvatarContent.target,
     testId = _useAvatarContent.testId,
     size = _useAvatarContent.size,
-    stackIndex = _useAvatarContent.stackIndex;
-  var isInteractive = Boolean(onClick || href || isDisabled);
+    stackIndex = _useAvatarContent.stackIndex,
+    ariaControls = _useAvatarContent['aria-controls'],
+    ariaExpanded = _useAvatarContent['aria-expanded'],
+    ariaHasPopup = _useAvatarContent['aria-haspopup'];
+  var isInteractive = Boolean(onClick || href || isDisabled || ariaHasPopup);
   var renderedContent = /*#__PURE__*/React.createElement(Container, (0, _extends2.default)({
     style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
     ref: ref || contextRef,
     "aria-label": isInteractive ? label : undefined,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
     onClick: onClick,
     tabIndex: tabIndex,
     "data-testid": testId,

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 = "0.0.0-development";
+var packageVersion = "25.8.0";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -60,7 +60,10 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
     _ref$isDecorative = _ref.isDecorative,
     isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative,
-    imgLoading = _ref.imgLoading;
+    imgLoading = _ref.imgLoading,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'];
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var context = (0, _context.useAvatarContext)();
@@ -113,7 +116,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   // add presence or status to the label by default if presence and status are passed as a string
   // if status or presence are nodes this is not added to the label by default
   var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
-  var isInteractive = onClick || href || isDisabled;
+  var isInteractive = onClick || href || isDisabled || ariaHasPopup;
   var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
   return /*#__PURE__*/React.createElement(_context.EnsureIsInsideAvatarContext.Provider, {
     value: true
@@ -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: (0, _utilities.getCustomElement)(isDisabled, href, onClick, ariaHasPopup),
       appearance: appearance,
       borderColor: borderColor,
       href: href,
@@ -139,6 +142,9 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       stackIndex: stackIndex,
       target: target,
       testId: testId ? "".concat(testId, "--inner") : undefined,
+      'aria-controls': ariaControls,
+      'aria-expanded': ariaExpanded,
+      'aria-haspopup': ariaHasPopup,
       avatarImage: /*#__PURE__*/React.createElement(_avatarImage.default, {
         alt: !containerShouldBeImage && src ? name : undefined,
         src: src,

package/dist/cjs/utilities.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getAppearanceForAppType = getAppearanceForAppType;
 exports.getCustomElement = void 0;
-var getCustomElement = exports.getCustomElement = function getCustomElement(isDisabled, href, onClick) {
+var getCustomElement = exports.getCustomElement = function getCustomElement(isDisabled, href, onClick, ariaHasPopup) {
   if (href && !isDisabled) {
     return 'a';
   }
-  if (onClick || isDisabled) {
+  if (onClick || isDisabled || ariaHasPopup) {
     return 'button';
   }
   return 'span';

package/dist/es2019/avatar-content.js

@@ -74,9 +74,12 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
     target,
     testId,
     size,
-    stackIndex
+    stackIndex,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup
   } = useAvatarContent();
-  const isInteractive = Boolean(onClick || href || isDisabled);
+  const isInteractive = Boolean(onClick || href || isDisabled || ariaHasPopup);
   const renderedContent = /*#__PURE__*/React.createElement(Container, _extends({
     style: {
       [bgColorCssVar]: borderColor,
@@ -84,6 +87,9 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
     },
     ref: ref || contextRef,
     "aria-label": isInteractive ? label : undefined,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
     onClick: onClick,
     tabIndex: tabIndex,
     "data-testid": testId,

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 = "0.0.0-development";
+const packageVersion = "25.8.0";
 const containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -45,7 +45,10 @@ const Avatar = /*#__PURE__*/forwardRef(({
   testId,
   as: AvatarContainer = 'div',
   isDecorative = false,
-  imgLoading
+  imgLoading,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHasPopup
 }, ref) => {
   const {
     createAnalyticsEvent
@@ -101,7 +104,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
   // add presence or status to the label by default if presence and status are passed as a string
   // if status or presence are nodes this is not added to the label by default
   const defaultLabel = [name, isStatus && !customStatusNode && `(${status})`, isPresence && !customPresenceNode && `(${presence})`].filter(Boolean).join(' ');
-  const isInteractive = onClick || href || isDisabled;
+  const isInteractive = onClick || href || isDisabled || ariaHasPopup;
   const containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
   return /*#__PURE__*/React.createElement(EnsureIsInsideAvatarContext.Provider, {
     value: true
@@ -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: getCustomElement(isDisabled, href, onClick, ariaHasPopup),
       appearance,
       borderColor,
       href,
@@ -127,6 +130,9 @@ const Avatar = /*#__PURE__*/forwardRef(({
       stackIndex,
       target,
       testId: testId ? `${testId}--inner` : undefined,
+      'aria-controls': ariaControls,
+      'aria-expanded': ariaExpanded,
+      'aria-haspopup': ariaHasPopup,
       avatarImage: /*#__PURE__*/React.createElement(AvatarImage, {
         alt: !containerShouldBeImage && src ? name : undefined,
         src: src,

package/dist/es2019/utilities.js

@@ -1,8 +1,8 @@
-export const getCustomElement = (isDisabled, href, onClick) => {
+export const getCustomElement = (isDisabled, href, onClick, ariaHasPopup) => {
   if (href && !isDisabled) {
     return 'a';
   }
-  if (onClick || isDisabled) {
+  if (onClick || isDisabled || ariaHasPopup) {
     return 'button';
   }
   return 'span';

package/dist/esm/avatar-content.js

@@ -75,12 +75,18 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     target = _useAvatarContent.target,
     testId = _useAvatarContent.testId,
     size = _useAvatarContent.size,
-    stackIndex = _useAvatarContent.stackIndex;
-  var isInteractive = Boolean(onClick || href || isDisabled);
+    stackIndex = _useAvatarContent.stackIndex,
+    ariaControls = _useAvatarContent['aria-controls'],
+    ariaExpanded = _useAvatarContent['aria-expanded'],
+    ariaHasPopup = _useAvatarContent['aria-haspopup'];
+  var isInteractive = Boolean(onClick || href || isDisabled || ariaHasPopup);
   var renderedContent = /*#__PURE__*/React.createElement(Container, _extends({
     style: _defineProperty(_defineProperty({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
     ref: ref || contextRef,
     "aria-label": isInteractive ? label : undefined,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
     onClick: onClick,
     tabIndex: tabIndex,
     "data-testid": testId,

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 = "0.0.0-development";
+var packageVersion = "25.8.0";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -51,7 +51,10 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
     _ref$isDecorative = _ref.isDecorative,
     isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative,
-    imgLoading = _ref.imgLoading;
+    imgLoading = _ref.imgLoading,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'];
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var context = useAvatarContext();
@@ -104,7 +107,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // add presence or status to the label by default if presence and status are passed as a string
   // if status or presence are nodes this is not added to the label by default
   var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
-  var isInteractive = onClick || href || isDisabled;
+  var isInteractive = onClick || href || isDisabled || ariaHasPopup;
   var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
   return /*#__PURE__*/React.createElement(EnsureIsInsideAvatarContext.Provider, {
     value: true
@@ -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: getCustomElement(isDisabled, href, onClick, ariaHasPopup),
       appearance: appearance,
       borderColor: borderColor,
       href: href,
@@ -130,6 +133,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stackIndex: stackIndex,
       target: target,
       testId: testId ? "".concat(testId, "--inner") : undefined,
+      'aria-controls': ariaControls,
+      'aria-expanded': ariaExpanded,
+      'aria-haspopup': ariaHasPopup,
       avatarImage: /*#__PURE__*/React.createElement(AvatarImage, {
         alt: !containerShouldBeImage && src ? name : undefined,
         src: src,

package/dist/esm/utilities.js

@@ -1,8 +1,8 @@
-export var getCustomElement = function getCustomElement(isDisabled, href, onClick) {
+export var getCustomElement = function getCustomElement(isDisabled, href, onClick, ariaHasPopup) {
   if (href && !isDisabled) {
     return 'a';
   }
-  if (onClick || isDisabled) {
+  if (onClick || isDisabled || ariaHasPopup) {
     return 'button';
   }
   return 'span';

package/dist/types/avatar.d.ts

@@ -98,6 +98,20 @@ export interface AvatarPropTypes {
      * Defines the loading behaviour of the avatar image. Default value is eager.
      */
     imgLoading?: 'lazy' | 'eager';
+    /**
+     * Identifies the popup element that the avatar controls.
+     * Used when Avatar is a trigger for a popup.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the controlled popup is currently open or closed.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     * When set, Avatar will render as a `<button>` element even without `onClick`.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 }
 /**
  * __Avatar__

package/dist/types/context.d.ts

@@ -33,6 +33,9 @@ type AvatarContentContextProps = {
     testId?: string;
     size: SizeType;
     stackIndex?: number;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: boolean | 'dialog';
 };
 /**
  * __Avatar content context__

package/dist/types/utilities.d.ts

@@ -1,4 +1,4 @@
 import { type MouseEventHandler } from 'react';
 import type { AppearanceType } from './types';
-export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler) => "a" | "button" | "span";
+export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler, ariaHasPopup?: boolean | 'dialog') => "a" | "button" | "span";
 export declare function getAppearanceForAppType(appType: string | null | undefined): AppearanceType;

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

@@ -98,6 +98,20 @@ export interface AvatarPropTypes {
      * Defines the loading behaviour of the avatar image. Default value is eager.
      */
     imgLoading?: 'lazy' | 'eager';
+    /**
+     * Identifies the popup element that the avatar controls.
+     * Used when Avatar is a trigger for a popup.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the controlled popup is currently open or closed.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     * When set, Avatar will render as a `<button>` element even without `onClick`.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 }
 /**
  * __Avatar__

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

@@ -33,6 +33,9 @@ type AvatarContentContextProps = {
     testId?: string;
     size: SizeType;
     stackIndex?: number;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: boolean | 'dialog';
 };
 /**
  * __Avatar content context__

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

@@ -1,4 +1,4 @@
 import { type MouseEventHandler } from 'react';
 import type { AppearanceType } from './types';
-export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler) => "a" | "button" | "span";
+export declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler, ariaHasPopup?: boolean | 'dialog') => "a" | "button" | "span";
 export declare function getAppearanceForAppType(appType: string | null | undefined): AppearanceType;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "25.7.4",
+	"version": "25.8.0",
 	"description": "An avatar is a visual representation of a user or entity.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/icon": "^30.0.0",
+		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^21.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/code": "^17.4.0",
 		"@atlaskit/docs": "^11.3.0",
 		"@atlaskit/form": "^15.3.0",
-		"@atlaskit/heading": "^5.2.0",
+		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/range": "^9.3.0",
 		"@atlaskit/section-message": "^8.12.0",