@atlaskit/avatar-group 9.3.5 → 9.3.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/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.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/version.json

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

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/version.json

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

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/version.json

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

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.3.6",
   "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/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.12.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": "*",
@@ -88,6 +78,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"
 }