@atlaskit/avatar-group 9.3.5 → 9.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar-group
 
+## 9.4.0
+
+### Minor Changes
+
+- [`da7b6be2540`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da7b6be2540) - Fixed keyboard support for the interactive element. Changed span to button for avatar-group
+
+## 9.3.6
+
+### Patch Changes
+
+- [`71b58da4e00`](https://bitbucket.org/atlassian/atlassian-frontend/commits/71b58da4e00) - set focus to the first avatar when popup is open
+
 ## 9.3.5
 
 ### Patch Changes

package/dist/cjs/components/avatar-group-item.js

@@ -29,8 +29,13 @@ var AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var CustomComponent = function CustomComponent(_ref) {
     var children = _ref.children,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    return /*#__PURE__*/_react.default.createElement("span", props, children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      _react.default.createElement("button", (0, _extends2.default)({
+        type: "button"
+      }, props), children)
+    );
   };
   var AvatarIcon = /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({}, rest, {
     testId: testId && "".concat(testId, "--avatar"),

package/dist/cjs/components/avatar-group.js

@@ -10,7 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _bindEventListener = require("bind-event-listener");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _keycodes = require("@atlaskit/ds-lib/keycodes");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _menu = require("@atlaskit/menu");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
@@ -18,6 +22,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _avatarGroupItem = _interopRequireDefault(require("./avatar-group-item"));
 var _grid = _interopRequireDefault(require("./grid"));
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
+var _popupAvatarGroup = _interopRequireDefault(require("./internal/components/popup-avatar-group"));
 var _moreIndicator = _interopRequireDefault(require("./more-indicator"));
 var _stack = _interopRequireDefault(require("./stack"));
 var _utils = require("./utils");
@@ -79,11 +84,73 @@ var AvatarGroup = function AvatarGroup(_ref) {
     tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+    isTriggeredUsingKeyboard = _useState2[0],
+    setTriggeredUsingKeyboard = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
   var onClose = (0, _react.useCallback)(function () {
     return setIsOpen(false);
   }, []);
+  var handleTriggerClicked = (0, _react.useCallback)(function (event) {
+    var clientX = event.clientX,
+      clientY = event.clientY,
+      type = event.type;
+    // Hitting enter/space is registered as a click with both clientX and clientY === 0
+    if (type === 'keydown' || clientX === 0 || clientY === 0) {
+      setTriggeredUsingKeyboard(true);
+    }
+    setIsOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var _useFocus = (0, _useFocusEvent.default)(),
+    isFocused = _useFocus.isFocused,
+    bindFocus = _useFocus.bindFocus;
+
+  // When a trigger is focused, we want to open the popup
+  // the user presses the DownArrow
+  (0, _react.useEffect)(function () {
+    // Set initial value if popup is closed
+    if (!isOpen) {
+      setTriggeredUsingKeyboard(false);
+    }
+
+    // Only need to listen for keydown when focused
+    if (!isFocused) {
+      return _noop.default;
+    }
+
+    // Being safe: we don't want to open the popup if it is already open
+    // Note: This shouldn't happen as the trigger should not be able to get focus
+    if (isOpen) {
+      return _noop.default;
+    }
+    (0, _bindEventListener.bind)(window, {
+      type: 'keydown',
+      listener: function openOnKeyDown(e) {
+        if (e.key === _keycodes.KEY_DOWN) {
+          // prevent page scroll
+          e.preventDefault();
+          handleTriggerClicked(e);
+        }
+      }
+    });
+    var unbind = function unbind() {
+      (0, _bindEventListener.bind)(window, {
+        type: 'keydown',
+        listener: function openOnKeyDown(e) {
+          if (e.key === _keycodes.KEY_DOWN) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          }
+        }
+      });
+    };
+    return unbind;
+  }, [isFocused, isOpen, handleTriggerClicked]);
   function renderMoreDropdown(max, total) {
     if (total <= max) {
       return null;
@@ -122,13 +189,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
       rootBoundary: rootBoundary,
       shouldFlip: true,
       zIndex: _constants.layers.modal(),
-      content: function content() {
-        return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_menu.PopupMenuGroup, {
+      content: function content(_ref2) {
+        var setInitialFocusRef = _ref2.setInitialFocusRef;
+        return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_popupAvatarGroup.default, {
           onClick: function onClick(e) {
             return e.stopPropagation();
           },
           minWidth: 250,
-          maxHeight: 300
+          maxHeight: 300,
+          setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
         }, (0, _react2.jsx)(_menu.Section, null, data.slice(max).map(function (avatar, index) {
           return getOverrides(overrides).AvatarGroupItem.render(_avatarGroupItem.default, {
             avatar: avatar,
@@ -142,10 +211,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
         }))));
       },
       trigger: function trigger(triggerProps) {
-        return renderMoreButton(_objectSpread(_objectSpread({}, triggerProps), {}, {
-          onClick: function onClick() {
-            return setIsOpen(!isOpen);
-          }
+        return renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
+          onClick: handleTriggerClicked
         }));
       },
       testId: testId && "".concat(testId, "--overflow-menu")

package/dist/cjs/components/internal/components/popup-avatar-group.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _menu = require("@atlaskit/menu");
+var _focusManager = require("./focus-manager");
+var _excluded = ["maxWidth", "minWidth", "setInitialFocusRef"];
+/** @jsx jsx */
+/**
+ * It sets focus to the first avatar when popup is open.
+ */
+var PopupAvatarGroup = function PopupAvatarGroup(_ref) {
+  var _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 800 : _ref$maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
+    setInitialFocusRef = _ref.setInitialFocusRef,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
+    menuItemRefs = _useContext.menuItemRefs;
+  (0, _react.useEffect)(function () {
+    setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(menuItemRefs[0]);
+  }, [menuItemRefs, setInitialFocusRef]);
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react2.jsx)(_menu.MenuGroup, (0, _extends2.default)({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
+};
+var _default = PopupAvatarGroup;
+exports.default = _default;

package/dist/cjs/components/more-indicator.js

@@ -25,7 +25,7 @@ var FONT_SIZE = {
   xxlarge: '16px'
 };
 var buttonActiveStyles = (0, _react2.css)({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
     boxShadow: "0 0 0 ".concat(_avatar.BORDER_WIDTH, "px ", "var(--ds-border-selected, ".concat(_colors.B300, ")")),
@@ -42,7 +42,7 @@ var buttonActiveStyles = (0, _react2.css)({
   }
 });
 var buttonStyles = (0, _react2.css)({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
     color: "var(--ds-text, ".concat(_colors.N500, ")"),

package/dist/es2019/components/avatar-group-item.js

@@ -21,8 +21,13 @@ const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     ...props
   }) => {
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    return /*#__PURE__*/React.createElement("span", props, children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      React.createElement("button", _extends({
+        type: "button"
+      }, props), children)
+    );
   };
   const AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
     testId: testId && `${testId}--avatar`,

package/dist/es2019/components/avatar-group.js

@@ -1,15 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
 import Avatar from '@atlaskit/avatar';
-import { PopupMenuGroup, Section } from '@atlaskit/menu';
+import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
+import noop from '@atlaskit/ds-lib/noop';
+import useFocus from '@atlaskit/ds-lib/use-focus-event';
+import { Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import AvatarGroupItem from './avatar-group-item';
 import Grid from './grid';
 import FocusManager from './internal/components/focus-manager';
+import PopupAvatarGroup from './internal/components/popup-avatar-group';
 import MoreIndicator from './more-indicator';
 import Stack from './stack';
 import { composeUniqueKey } from './utils';
@@ -60,8 +65,68 @@ const AvatarGroup = ({
   label = 'avatar group',
   tooltipPosition = 'bottom'
 }) => {
+  const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const onClose = useCallback(() => setIsOpen(false), []);
+  const handleTriggerClicked = useCallback(event => {
+    const {
+      clientX,
+      clientY,
+      type
+    } = event;
+    // Hitting enter/space is registered as a click with both clientX and clientY === 0
+    if (type === 'keydown' || clientX === 0 || clientY === 0) {
+      setTriggeredUsingKeyboard(true);
+    }
+    setIsOpen(isOpen => !isOpen);
+  }, []);
+  const {
+    isFocused,
+    bindFocus
+  } = useFocus();
+
+  // When a trigger is focused, we want to open the popup
+  // the user presses the DownArrow
+  useEffect(() => {
+    // Set initial value if popup is closed
+    if (!isOpen) {
+      setTriggeredUsingKeyboard(false);
+    }
+
+    // Only need to listen for keydown when focused
+    if (!isFocused) {
+      return noop;
+    }
+
+    // Being safe: we don't want to open the popup if it is already open
+    // Note: This shouldn't happen as the trigger should not be able to get focus
+    if (isOpen) {
+      return noop;
+    }
+    bind(window, {
+      type: 'keydown',
+      listener: function openOnKeyDown(e) {
+        if (e.key === KEY_DOWN) {
+          // prevent page scroll
+          e.preventDefault();
+          handleTriggerClicked(e);
+        }
+      }
+    });
+    const unbind = () => {
+      bind(window, {
+        type: 'keydown',
+        listener: function openOnKeyDown(e) {
+          if (e.key === KEY_DOWN) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          }
+        }
+      });
+    };
+    return unbind;
+  }, [isFocused, isOpen, handleTriggerClicked]);
   function renderMoreDropdown(max, total) {
     if (total <= max) {
       return null;
@@ -98,10 +163,13 @@ const AvatarGroup = ({
       rootBoundary: rootBoundary,
       shouldFlip: true,
       zIndex: layers.modal(),
-      content: () => jsx(FocusManager, null, jsx(PopupMenuGroup, {
+      content: ({
+        setInitialFocusRef
+      }) => jsx(FocusManager, null, jsx(PopupAvatarGroup, {
         onClick: e => e.stopPropagation(),
         minWidth: 250,
-        maxHeight: 300
+        maxHeight: 300,
+        setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
       }, jsx(Section, null, data.slice(max).map((avatar, index) => getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
         avatar,
         onAvatarClick,
@@ -113,7 +181,8 @@ const AvatarGroup = ({
       index + max))))),
       trigger: triggerProps => renderMoreButton({
         ...triggerProps,
-        onClick: () => setIsOpen(!isOpen)
+        ...bindFocus,
+        onClick: handleTriggerClicked
       }),
       testId: testId && `${testId}--overflow-menu`
     });

package/dist/es2019/components/internal/components/popup-avatar-group.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { useContext, useEffect } from 'react';
+import { jsx } from '@emotion/react';
+import { MenuGroup } from '@atlaskit/menu';
+import { FocusManagerContext } from './focus-manager';
+
+/**
+ * It sets focus to the first avatar when popup is open.
+ */
+const PopupAvatarGroup = ({
+  maxWidth = 800,
+  minWidth = 320,
+  setInitialFocusRef,
+  ...rest
+}) => {
+  const {
+    menuItemRefs
+  } = useContext(FocusManagerContext);
+  useEffect(() => {
+    setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(menuItemRefs[0]);
+  }, [menuItemRefs, setInitialFocusRef]);
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(MenuGroup, _extends({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
+};
+export default PopupAvatarGroup;

package/dist/es2019/components/more-indicator.js

@@ -13,7 +13,7 @@ const FONT_SIZE = {
   xxlarge: '16px'
 };
 const buttonActiveStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: `var(--ds-background-selected, ${B50})`,
     boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-selected, ${B300})`}`,
@@ -30,7 +30,7 @@ const buttonActiveStyles = css({
   }
 });
 const buttonStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: `var(--ds-background-neutral, ${N20})`,
     color: `var(--ds-text, ${N500})`,

package/dist/esm/components/avatar-group-item.js

@@ -19,8 +19,13 @@ var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var CustomComponent = function CustomComponent(_ref) {
     var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded2);
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    return /*#__PURE__*/React.createElement("span", props, children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      React.createElement("button", _extends({
+        type: "button"
+      }, props), children)
+    );
   };
   var AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
     testId: testId && "".concat(testId, "--avatar"),

package/dist/esm/components/avatar-group.js

@@ -4,16 +4,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
 import Avatar from '@atlaskit/avatar';
-import { PopupMenuGroup, Section } from '@atlaskit/menu';
+import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
+import noop from '@atlaskit/ds-lib/noop';
+import useFocus from '@atlaskit/ds-lib/use-focus-event';
+import { Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import AvatarGroupItem from './avatar-group-item';
 import Grid from './grid';
 import FocusManager from './internal/components/focus-manager';
+import PopupAvatarGroup from './internal/components/popup-avatar-group';
 import MoreIndicator from './more-indicator';
 import Stack from './stack';
 import { composeUniqueKey } from './utils';
@@ -73,11 +78,73 @@ var AvatarGroup = function AvatarGroup(_ref) {
     tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+    isTriggeredUsingKeyboard = _useState2[0],
+    setTriggeredUsingKeyboard = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
   var onClose = useCallback(function () {
     return setIsOpen(false);
   }, []);
+  var handleTriggerClicked = useCallback(function (event) {
+    var clientX = event.clientX,
+      clientY = event.clientY,
+      type = event.type;
+    // Hitting enter/space is registered as a click with both clientX and clientY === 0
+    if (type === 'keydown' || clientX === 0 || clientY === 0) {
+      setTriggeredUsingKeyboard(true);
+    }
+    setIsOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var _useFocus = useFocus(),
+    isFocused = _useFocus.isFocused,
+    bindFocus = _useFocus.bindFocus;
+
+  // When a trigger is focused, we want to open the popup
+  // the user presses the DownArrow
+  useEffect(function () {
+    // Set initial value if popup is closed
+    if (!isOpen) {
+      setTriggeredUsingKeyboard(false);
+    }
+
+    // Only need to listen for keydown when focused
+    if (!isFocused) {
+      return noop;
+    }
+
+    // Being safe: we don't want to open the popup if it is already open
+    // Note: This shouldn't happen as the trigger should not be able to get focus
+    if (isOpen) {
+      return noop;
+    }
+    bind(window, {
+      type: 'keydown',
+      listener: function openOnKeyDown(e) {
+        if (e.key === KEY_DOWN) {
+          // prevent page scroll
+          e.preventDefault();
+          handleTriggerClicked(e);
+        }
+      }
+    });
+    var unbind = function unbind() {
+      bind(window, {
+        type: 'keydown',
+        listener: function openOnKeyDown(e) {
+          if (e.key === KEY_DOWN) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          }
+        }
+      });
+    };
+    return unbind;
+  }, [isFocused, isOpen, handleTriggerClicked]);
   function renderMoreDropdown(max, total) {
     if (total <= max) {
       return null;
@@ -116,13 +183,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
       rootBoundary: rootBoundary,
       shouldFlip: true,
       zIndex: layers.modal(),
-      content: function content() {
-        return jsx(FocusManager, null, jsx(PopupMenuGroup, {
+      content: function content(_ref2) {
+        var setInitialFocusRef = _ref2.setInitialFocusRef;
+        return jsx(FocusManager, null, jsx(PopupAvatarGroup, {
           onClick: function onClick(e) {
             return e.stopPropagation();
           },
           minWidth: 250,
-          maxHeight: 300
+          maxHeight: 300,
+          setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
         }, jsx(Section, null, data.slice(max).map(function (avatar, index) {
           return getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
             avatar: avatar,
@@ -136,10 +205,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
         }))));
       },
       trigger: function trigger(triggerProps) {
-        return renderMoreButton(_objectSpread(_objectSpread({}, triggerProps), {}, {
-          onClick: function onClick() {
-            return setIsOpen(!isOpen);
-          }
+        return renderMoreButton(_objectSpread(_objectSpread(_objectSpread({}, triggerProps), bindFocus), {}, {
+          onClick: handleTriggerClicked
         }));
       },
       testId: testId && "".concat(testId, "--overflow-menu")

package/dist/esm/components/internal/components/popup-avatar-group.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxWidth", "minWidth", "setInitialFocusRef"];
+/** @jsx jsx */
+import { useContext, useEffect } from 'react';
+import { jsx } from '@emotion/react';
+import { MenuGroup } from '@atlaskit/menu';
+import { FocusManagerContext } from './focus-manager';
+
+/**
+ * It sets focus to the first avatar when popup is open.
+ */
+var PopupAvatarGroup = function PopupAvatarGroup(_ref) {
+  var _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 800 : _ref$maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
+    setInitialFocusRef = _ref.setInitialFocusRef,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(FocusManagerContext),
+    menuItemRefs = _useContext.menuItemRefs;
+  useEffect(function () {
+    setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(menuItemRefs[0]);
+  }, [menuItemRefs, setInitialFocusRef]);
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(MenuGroup, _extends({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
+};
+export default PopupAvatarGroup;

package/dist/esm/components/more-indicator.js

@@ -15,7 +15,7 @@ var FONT_SIZE = {
   xxlarge: '16px'
 };
 var buttonActiveStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
     boxShadow: "0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-selected, ".concat(B300, ")")),
@@ -32,7 +32,7 @@ var buttonActiveStyles = css({
   }
 });
 var buttonStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
     color: "var(--ds-text, ".concat(N500, ")"),

package/dist/types/components/internal/components/popup-avatar-group.d.ts

@@ -0,0 +1,7 @@
+import { jsx } from '@emotion/react';
+import { PopupAvatarGroupProps } from '../../types';
+/**
+ * It sets focus to the first avatar when popup is open.
+ */
+declare const PopupAvatarGroup: ({ maxWidth, minWidth, setInitialFocusRef, ...rest }: PopupAvatarGroupProps) => jsx.JSX.Element;
+export default PopupAvatarGroup;

package/dist/types/components/types.d.ts

@@ -1,6 +1,8 @@
 import type { ElementType, ReactNode } from 'react';
 import type { AnalyticsEvent } from '@atlaskit/analytics-next';
 import type { AvatarPropTypes } from '@atlaskit/avatar';
+import { MenuGroupProps } from '@atlaskit/menu';
+import { ContentProps } from '@atlaskit/popup';
 import type { AvatarGroupItemProps } from './avatar-group-item';
 export type DeepRequired<T> = {
     [P in keyof T]-?: Required<T[P]>;
@@ -20,3 +22,6 @@ export interface AvatarGroupOverrides {
 export type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
 export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
 export type Action = 'next' | 'prev' | 'first' | 'last';
+export interface PopupAvatarGroupProps extends MenuGroupProps {
+    setInitialFocusRef?: ContentProps['setInitialFocusRef'];
+}

package/dist/types-ts4.5/components/internal/components/popup-avatar-group.d.ts

@@ -0,0 +1,7 @@
+import { jsx } from '@emotion/react';
+import { PopupAvatarGroupProps } from '../../types';
+/**
+ * It sets focus to the first avatar when popup is open.
+ */
+declare const PopupAvatarGroup: ({ maxWidth, minWidth, setInitialFocusRef, ...rest }: PopupAvatarGroupProps) => jsx.JSX.Element;
+export default PopupAvatarGroup;

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

@@ -1,6 +1,8 @@
 import type { ElementType, ReactNode } from 'react';
 import type { AnalyticsEvent } from '@atlaskit/analytics-next';
 import type { AvatarPropTypes } from '@atlaskit/avatar';
+import { MenuGroupProps } from '@atlaskit/menu';
+import { ContentProps } from '@atlaskit/popup';
 import type { AvatarGroupItemProps } from './avatar-group-item';
 export type DeepRequired<T> = {
     [P in keyof T]-?: Required<T[P]>;
@@ -20,3 +22,6 @@ export interface AvatarGroupOverrides {
 export type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
 export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
 export type Action = 'next' | 'prev' | 'first' | 'last';
+export interface PopupAvatarGroupProps extends MenuGroupProps {
+    setInitialFocusRef?: ContentProps['setInitialFocusRef'];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.3.5",
+  "version": "9.4.0",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -30,16 +22,13 @@
       "category": "Components"
     }
   },
-  "af:exports": {
-    ".": "./src/index.tsx"
-  },
   "dependencies": {
     "@atlaskit/avatar": "^21.3.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/menu": "^1.9.0",
-    "@atlaskit/popup": "^1.8.0",
+    "@atlaskit/popup": "^1.9.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -50,6 +39,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",
@@ -58,6 +48,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",
@@ -88,6 +79,17 @@
       ]
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
   "homepage": "https://atlassian.design/components/avatar-group/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,78 @@
+## API Report File for "@atlaskit/avatar-group"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { AnalyticsEvent } from '@atlaskit/analytics-next';
+import type { AvatarPropTypes } from '@atlaskit/avatar';
+import { ElementType } from 'react';
+import { jsx } from '@emotion/react';
+import { MouseEventHandler } from 'react';
+import { PositionType } from '@atlaskit/tooltip';
+import type { ReactNode } from 'react';
+import { SizeType } from '@atlaskit/avatar';
+
+// @public
+const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, }: AvatarGroupProps) => jsx.JSX.Element;
+export default AvatarGroup;
+
+// @public (undocumented)
+interface AvatarGroupItemProps {
+    // (undocumented)
+    avatar: AvatarProps;
+    // (undocumented)
+    index: number;
+    // (undocumented)
+    isActive?: boolean;
+    // (undocumented)
+    isHover?: boolean;
+    // (undocumented)
+    onAvatarClick?: onAvatarClickHandler;
+    // (undocumented)
+    testId?: string;
+}
+
+// @public (undocumented)
+interface AvatarGroupOverrides {
+    // (undocumented)
+    Avatar?: {
+        render?: (Component: ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
+    };
+    // (undocumented)
+    AvatarGroupItem?: {
+        render?: (Component: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
+    };
+}
+
+// @public (undocumented)
+export interface AvatarGroupProps {
+    appearance?: 'grid' | 'stack';
+    avatar?: ElementType<AvatarProps>;
+    borderColor?: string;
+    boundariesElement?: 'scrollParent' | 'viewport' | 'window';
+    data: Array<AvatarProps>;
+    isTooltipDisabled?: boolean;
+    label?: string;
+    maxCount?: number;
+    onAvatarClick?: onAvatarClickHandler;
+    onMoreClick?: MouseEventHandler;
+    overrides?: AvatarGroupOverrides;
+    showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
+    size?: SizeType;
+    testId?: string;
+    tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
+}
+
+// @public (undocumented)
+export type AvatarProps = AvatarPropTypes & {
+    name: string;
+    key?: number | string;
+};
+
+// @public (undocumented)
+type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
+
+// (No @packageDocumentation comment for this package)
+
+```

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/avatar-group",
-	"version": "9.3.5",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/avatar-group",
-	"version": "9.3.5",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/avatar-group",
-	"version": "9.3.5",
-	"sideEffects": false
-}