@atlaskit/avatar-group 10.0.1 → 10.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/avatar-group
 
+## 10.0.3
+
+### Patch Changes
+
+- [#161302](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161302)
+  [`e005ceaf960e2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e005ceaf960e2) -
+  Make some spread props explicit in internal functions and components.
+
+## 10.0.2
+
+### Patch Changes
+
+- [#161368](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161368)
+  [`870668ea63139`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/870668ea63139) -
+  Refactoring internals to make spread props more explicit and resolve ESLint disables.
+
 ## 10.0.1
 
 ### Patch Changes

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

@@ -13,35 +13,86 @@ var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _menu = require("@atlaskit/menu");
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
-var _excluded = ["href", "onClick"],
-  _excluded2 = ["children"];
+var _excluded = ["analyticsContext", "appearance", "as", "borderColor", "children", "href", "isDisabled", "key", "label", "name", "onClick", "presence", "size", "src", "stackIndex", "status", "tabIndex", "target", "testId"],
+  _excluded2 = ["children", "className", "disabled", "draggable", "onClick", "onDragStart", "onMouseDown", "ref", "tabIndex", "data-testid"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var avatar = props.avatar,
+    index = props.index,
     onAvatarClick = props.onAvatarClick,
-    testId = props.testId,
-    index = props.index;
-  var href = avatar.href,
+    testId = props.testId;
+  var analyticsContext = avatar.analyticsContext,
+    appearance = avatar.appearance,
+    as = avatar.as,
+    borderColor = avatar.borderColor,
+    children = avatar.children,
+    href = avatar.href,
+    isDisabled = avatar.isDisabled,
+    key = avatar.key,
+    label = avatar.label,
+    name = avatar.name,
     onClick = avatar.onClick,
+    presence = avatar.presence,
+    size = avatar.size,
+    src = avatar.src,
+    stackIndex = avatar.stackIndex,
+    status = avatar.status,
+    tabIndex = avatar.tabIndex,
+    target = avatar.target,
+    groupItemTestId = avatar.testId,
     rest = (0, _objectWithoutProperties2.default)(avatar, _excluded);
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   var CustomComponent = function CustomComponent(_ref) {
     var children = _ref.children,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      draggable = _ref.draggable,
+      onClick = _ref.onClick,
+      onDragStart = _ref.onDragStart,
+      onMouseDown = _ref.onMouseDown,
+      ref = _ref.ref,
+      tabIndex = _ref.tabIndex,
+      testId = _ref['data-testid'],
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       _react.default.createElement("button", (0, _extends2.default)({
         type: "button"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        ,
+        className: className,
+        disabled: disabled,
+        draggable: draggable,
+        onClick: onClick
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+        ,
+        onDragStart: onDragStart,
+        onMouseDown: onMouseDown,
+        ref: ref,
+        tabIndex: tabIndex,
+        "data-testid": testId
+        // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       }, props), children)
     );
   };
   var AvatarIcon = /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({}, rest, {
-    testId: testId && "".concat(testId, "--avatar"),
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    as: as,
     borderColor: "transparent",
+    children: children,
+    isDisabled: isDisabled,
+    label: label,
+    name: "",
+    presence: presence,
     size: "small",
-    name: ""
+    src: src,
+    stackIndex: stackIndex,
+    status: status,
+    tabIndex: tabIndex,
+    testId: testId && "".concat(testId, "--avatar")
   }));
 
   // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
@@ -50,14 +101,14 @@ var AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
       ref: (0, _mergeRefs.default)([ref, itemRef]),
       href: href,
-      target: avatar.target,
-      rel: avatar.target === '_blank' ? 'noopener noreferrer' : undefined,
+      target: target,
+      rel: target === '_blank' ? 'noopener noreferrer' : undefined,
       iconBefore: AvatarIcon,
       testId: testId,
       onClick: function onClick(event) {
         return callback && callback(event, undefined, index);
       }
-    }, avatar.name);
+    }, name);
   }
   if (typeof callback === 'function') {
     return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
@@ -67,13 +118,13 @@ var AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       },
       iconBefore: AvatarIcon,
       testId: testId
-    }, avatar.name);
+    }, name);
   }
   return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, {
     iconBefore: AvatarIcon,
     component: CustomComponent,
     testId: testId
-  }, avatar.name);
+  }, name);
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -26,11 +27,12 @@ var _popupAvatarGroup = _interopRequireDefault(require("./internal/components/po
 var _moreIndicator = _interopRequireDefault(require("./more-indicator"));
 var _stack = _interopRequireDefault(require("./stack"));
 var _utils = require("./utils");
+var _excluded = ["aria-controls", "aria-expanded", "aria-haspopup", "onClick"];
 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; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */
 var MAX_COUNT = {
   grid: 11,
   stack: 5
@@ -161,7 +163,12 @@ var AvatarGroup = function AvatarGroup(_ref) {
     if (total <= max) {
       return null;
     }
-    var renderMoreButton = function renderMoreButton(props) {
+    var renderMoreButton = function renderMoreButton(_ref3) {
+      var ariaControls = _ref3['aria-controls'],
+        ariaExpanded = _ref3['aria-expanded'],
+        ariaHasPopup = _ref3['aria-haspopup'],
+        onClick = _ref3.onClick,
+        props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
       return (0, _react2.jsx)(_moreIndicator.default, (0, _extends2.default)({
         buttonProps: showMoreButtonProps,
         borderColor: borderColor,
@@ -169,7 +176,13 @@ var AvatarGroup = function AvatarGroup(_ref) {
         size: size,
         testId: testId && "".concat(testId, "--overflow-menu--trigger"),
         isActive: isOpen
-      }, props));
+        // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      }, props, {
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        onClick: onClick
+      }));
     };
 
     // bail if the consumer wants to handle onClick
@@ -196,8 +209,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
       shouldFlip: true,
       zIndex: _constants.layers.modal(),
       shouldRenderToParent: shouldPopupRenderToParent,
-      content: function content(_ref3) {
-        var setInitialFocusRef = _ref3.setInitialFocusRef;
+      content: function content(_ref4) {
+        var setInitialFocusRef = _ref4.setInitialFocusRef;
         return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_popupAvatarGroup.default, {
           onClick: function onClick(e) {
             return e.stopPropagation();

package/dist/cjs/components/grid.js

@@ -11,8 +11,6 @@ var _react2 = require("@emotion/react");
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 var gutter = "var(--ds-space-negative-050, -4px)";
 var listStyles = (0, _react2.css)({
   display: 'flex',

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

@@ -11,33 +11,45 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _menu = require("@atlaskit/menu");
 var _focusManager = require("./focus-manager");
-var _excluded = ["maxWidth", "minWidth", "setInitialFocusRef"];
+var _excluded = ["children", "isLoading", "maxHeight", "maxWidth", "minHeight", "minWidth", "onClick", "role", "setInitialFocusRef", "spacing", "testId"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * It sets focus to the first avatar when popup is open.
  */
 var PopupAvatarGroup = function PopupAvatarGroup(_ref) {
-  var _ref$maxWidth = _ref.maxWidth,
+  var children = _ref.children,
+    isLoading = _ref.isLoading,
+    maxHeight = _ref.maxHeight,
+    _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 800 : _ref$maxWidth,
+    minHeight = _ref.minHeight,
     _ref$minWidth = _ref.minWidth,
     minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
+    onClick = _ref.onClick,
+    role = _ref.role,
     setInitialFocusRef = _ref.setInitialFocusRef,
+    spacing = _ref.spacing,
+    testId = _ref.testId,
     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 || setInitialFocusRef(menuItemRefs[0]);
   }, [menuItemRefs, setInitialFocusRef]);
-  return (
+  return (0, _react2.jsx)(_menu.MenuGroup, (0, _extends2.default)({
+    isLoading: isLoading,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    minHeight: minHeight,
+    minWidth: minWidth,
+    onClick: onClick,
+    role: role,
+    spacing: spacing,
+    testId: testId
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react2.jsx)(_menu.MenuGroup, (0, _extends2.default)({
-      maxWidth: maxWidth,
-      minWidth: minWidth
-    }, rest))
-  );
+  }, rest), children);
 };
 var _default = exports.default = PopupAvatarGroup;

package/dist/cjs/components/internal/utiles/handle-focus.js

@@ -53,27 +53,27 @@ function handleFocus(refs) {
         if (currentFocusedIdx < refs.length - 1) {
           e.preventDefault();
           var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
-          _nextFocusableElement && _nextFocusableElement.focus();
+          _nextFocusableElement === null || _nextFocusableElement === void 0 || _nextFocusableElement.focus();
         }
         break;
       case 'prev':
         if (currentFocusedIdx > 0) {
           e.preventDefault();
           var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
-          _prevFocusableElement && _prevFocusableElement.focus();
+          _prevFocusableElement === null || _prevFocusableElement === void 0 || _prevFocusableElement.focus();
         }
         break;
       case 'first':
         e.preventDefault();
         // Search for first non-disabled element if first element is disabled
         var nextFocusableElement = getNextFocusableElement(refs, -1);
-        nextFocusableElement && nextFocusableElement.focus();
+        nextFocusableElement === null || nextFocusableElement === void 0 || nextFocusableElement.focus();
         break;
       case 'last':
         e.preventDefault();
         // Search for last non-disabled element if last element is disabled
         var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
-        prevFocusableElement && prevFocusableElement.focus();
+        prevFocusableElement === null || prevFocusableElement === void 0 || prevFocusableElement.focus();
         break;
       default:
         return;

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

@@ -18,7 +18,6 @@ var _excluded = ["testId", "className", "ref"];
  * @jsxRuntime classic
  * @jsx jsx
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var buttonSizes = {

package/dist/cjs/components/stack.js

@@ -13,8 +13,6 @@ var _constants = require("@atlaskit/theme/constants");
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 var gutter = _avatar.BORDER_WIDTH * 2 + (0, _constants.gridSize)() / 2;

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

@@ -7,18 +7,44 @@ import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-
 const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     avatar,
+    index,
     onAvatarClick,
-    testId,
-    index
+    testId
   } = props;
   const {
+    analyticsContext,
+    appearance,
+    as,
+    borderColor,
+    children,
     href,
+    isDisabled,
+    key,
+    label,
+    name,
     onClick,
+    presence,
+    size,
+    src,
+    stackIndex,
+    status,
+    tabIndex,
+    target,
+    testId: groupItemTestId,
     ...rest
   } = avatar;
   const itemRef = useRegisterItemWithFocusManager();
   const CustomComponent = ({
     children,
+    className,
+    disabled,
+    draggable,
+    onClick,
+    onDragStart,
+    onMouseDown,
+    ref,
+    tabIndex,
+    'data-testid': testId,
     ...props
   }) => {
     return (
@@ -26,14 +52,39 @@ const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       React.createElement("button", _extends({
         type: "button"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        ,
+        className: className,
+        disabled: disabled,
+        draggable: draggable,
+        onClick: onClick
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+        ,
+        onDragStart: onDragStart,
+        onMouseDown: onMouseDown,
+        ref: ref,
+        tabIndex: tabIndex,
+        "data-testid": testId
+        // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       }, props), children)
     );
   };
   const AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
-    testId: testId && `${testId}--avatar`,
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    as: as,
     borderColor: "transparent",
+    children: children,
+    isDisabled: isDisabled,
+    label: label,
+    name: "",
+    presence: presence,
     size: "small",
-    name: ""
+    src: src,
+    stackIndex: stackIndex,
+    status: status,
+    tabIndex: tabIndex,
+    testId: testId && `${testId}--avatar`
   }));
 
   // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
@@ -42,12 +93,12 @@ const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React.createElement(LinkItem, {
       ref: mergeRefs([ref, itemRef]),
       href: href,
-      target: avatar.target,
-      rel: avatar.target === '_blank' ? 'noopener noreferrer' : undefined,
+      target: target,
+      rel: target === '_blank' ? 'noopener noreferrer' : undefined,
       iconBefore: AvatarIcon,
       testId: testId,
       onClick: event => callback && callback(event, undefined, index)
-    }, avatar.name);
+    }, name);
   }
   if (typeof callback === 'function') {
     return /*#__PURE__*/React.createElement(ButtonItem, {
@@ -55,13 +106,13 @@ const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
       onClick: event => callback && callback(event, undefined, index),
       iconBefore: AvatarIcon,
       testId: testId
-    }, avatar.name);
+    }, name);
   }
   return /*#__PURE__*/React.createElement(CustomItem, {
     iconBefore: AvatarIcon,
     component: CustomComponent,
     testId: testId
-  }, avatar.name);
+  }, name);
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -4,8 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import { useCallback, useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import Avatar from '@atlaskit/avatar';
@@ -137,14 +135,26 @@ const AvatarGroup = ({
     if (total <= max) {
       return null;
     }
-    const renderMoreButton = props => jsx(MoreIndicator, _extends({
+    const renderMoreButton = ({
+      'aria-controls': ariaControls,
+      'aria-expanded': ariaExpanded,
+      'aria-haspopup': ariaHasPopup,
+      onClick,
+      ...props
+    }) => jsx(MoreIndicator, _extends({
       buttonProps: showMoreButtonProps,
       borderColor: borderColor,
       count: total - max,
       size: size,
       testId: testId && `${testId}--overflow-menu--trigger`,
       isActive: isOpen
-    }, props));
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    }, props, {
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
+      onClick: onClick
+    }));
 
     // bail if the consumer wants to handle onClick
     if (typeof onMoreClick === 'function') {

package/dist/es2019/components/grid.js

@@ -3,8 +3,6 @@
  * @jsx jsx
  */
 import { Children } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 const gutter = "var(--ds-space-negative-050, -4px)";
 const listStyles = css({

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

@@ -4,8 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import { useContext, useEffect } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { MenuGroup } from '@atlaskit/menu';
 import { FocusManagerContext } from './focus-manager';
@@ -14,9 +12,17 @@ import { FocusManagerContext } from './focus-manager';
  * It sets focus to the first avatar when popup is open.
  */
 const PopupAvatarGroup = ({
+  children,
+  isLoading,
+  maxHeight,
   maxWidth = 800,
+  minHeight,
   minWidth = 320,
+  onClick,
+  role,
   setInitialFocusRef,
+  spacing,
+  testId,
   ...rest
 }) => {
   const {
@@ -25,12 +31,17 @@ const PopupAvatarGroup = ({
   useEffect(() => {
     setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(menuItemRefs[0]);
   }, [menuItemRefs, setInitialFocusRef]);
-  return (
+  return jsx(MenuGroup, _extends({
+    isLoading: isLoading,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    minHeight: minHeight,
+    minWidth: minWidth,
+    onClick: onClick,
+    role: role,
+    spacing: spacing,
+    testId: testId
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(MenuGroup, _extends({
-      maxWidth: maxWidth,
-      minWidth: minWidth
-    }, rest))
-  );
+  }, rest), children);
 };
 export default PopupAvatarGroup;

package/dist/es2019/components/internal/utiles/handle-focus.js

@@ -49,27 +49,27 @@ export default function handleFocus(refs) {
         if (currentFocusedIdx < refs.length - 1) {
           e.preventDefault();
           const nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
-          nextFocusableElement && nextFocusableElement.focus();
+          nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
         }
         break;
       case 'prev':
         if (currentFocusedIdx > 0) {
           e.preventDefault();
           const prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
-          prevFocusableElement && prevFocusableElement.focus();
+          prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
         }
         break;
       case 'first':
         e.preventDefault();
         // Search for first non-disabled element if first element is disabled
         const nextFocusableElement = getNextFocusableElement(refs, -1);
-        nextFocusableElement && nextFocusableElement.focus();
+        nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
         break;
       case 'last':
         e.preventDefault();
         // Search for last non-disabled element if last element is disabled
         const prevFocusableElement = getPrevFocusableElement(refs, refs.length);
-        prevFocusableElement && prevFocusableElement.focus();
+        prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
         break;
       default:
         return;

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

@@ -4,8 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import { forwardRef, useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -58,6 +56,7 @@ const buttonStyles = css({
 const MAX_DISPLAY_COUNT = 99;
 const MoreIndicator = /*#__PURE__*/forwardRef(({
   appearance = 'circle',
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   borderColor = fg('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : `var(--ds-border-inverse, ${N0})`,
   size = 'medium',
   count = 0,

package/dist/es2019/components/stack.js

@@ -3,8 +3,6 @@
  * @jsx jsx
  */
 import { Children } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { BORDER_WIDTH } from '@atlaskit/avatar';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "onClick"],
-  _excluded2 = ["children"];
+var _excluded = ["analyticsContext", "appearance", "as", "borderColor", "children", "href", "isDisabled", "key", "label", "name", "onClick", "presence", "size", "src", "stackIndex", "status", "tabIndex", "target", "testId"],
+  _excluded2 = ["children", "className", "disabled", "draggable", "onClick", "onDragStart", "onMouseDown", "ref", "tabIndex", "data-testid"];
 import React, { forwardRef } from 'react';
 import Avatar from '@atlaskit/avatar';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
@@ -9,29 +9,80 @@ import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var avatar = props.avatar,
+    index = props.index,
     onAvatarClick = props.onAvatarClick,
-    testId = props.testId,
-    index = props.index;
-  var href = avatar.href,
+    testId = props.testId;
+  var analyticsContext = avatar.analyticsContext,
+    appearance = avatar.appearance,
+    as = avatar.as,
+    borderColor = avatar.borderColor,
+    children = avatar.children,
+    href = avatar.href,
+    isDisabled = avatar.isDisabled,
+    key = avatar.key,
+    label = avatar.label,
+    name = avatar.name,
     onClick = avatar.onClick,
+    presence = avatar.presence,
+    size = avatar.size,
+    src = avatar.src,
+    stackIndex = avatar.stackIndex,
+    status = avatar.status,
+    tabIndex = avatar.tabIndex,
+    target = avatar.target,
+    groupItemTestId = avatar.testId,
     rest = _objectWithoutProperties(avatar, _excluded);
   var itemRef = useRegisterItemWithFocusManager();
   var CustomComponent = function CustomComponent(_ref) {
     var children = _ref.children,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      draggable = _ref.draggable,
+      onClick = _ref.onClick,
+      onDragStart = _ref.onDragStart,
+      onMouseDown = _ref.onMouseDown,
+      ref = _ref.ref,
+      tabIndex = _ref.tabIndex,
+      testId = _ref['data-testid'],
       props = _objectWithoutProperties(_ref, _excluded2);
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       React.createElement("button", _extends({
         type: "button"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        ,
+        className: className,
+        disabled: disabled,
+        draggable: draggable,
+        onClick: onClick
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+        ,
+        onDragStart: onDragStart,
+        onMouseDown: onMouseDown,
+        ref: ref,
+        tabIndex: tabIndex,
+        "data-testid": testId
+        // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       }, props), children)
     );
   };
   var AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
-    testId: testId && "".concat(testId, "--avatar"),
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    as: as,
     borderColor: "transparent",
+    children: children,
+    isDisabled: isDisabled,
+    label: label,
+    name: "",
+    presence: presence,
     size: "small",
-    name: ""
+    src: src,
+    stackIndex: stackIndex,
+    status: status,
+    tabIndex: tabIndex,
+    testId: testId && "".concat(testId, "--avatar")
   }));
 
   // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
@@ -40,14 +91,14 @@ var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(LinkItem, {
       ref: mergeRefs([ref, itemRef]),
       href: href,
-      target: avatar.target,
-      rel: avatar.target === '_blank' ? 'noopener noreferrer' : undefined,
+      target: target,
+      rel: target === '_blank' ? 'noopener noreferrer' : undefined,
       iconBefore: AvatarIcon,
       testId: testId,
       onClick: function onClick(event) {
         return callback && callback(event, undefined, index);
       }
-    }, avatar.name);
+    }, name);
   }
   if (typeof callback === 'function') {
     return /*#__PURE__*/React.createElement(ButtonItem, {
@@ -57,13 +108,13 @@ var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
       },
       iconBefore: AvatarIcon,
       testId: testId
-    }, avatar.name);
+    }, name);
   }
   return /*#__PURE__*/React.createElement(CustomItem, {
     iconBefore: AvatarIcon,
     component: CustomComponent,
     testId: testId
-  }, avatar.name);
+  }, name);
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -1,6 +1,8 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["aria-controls", "aria-expanded", "aria-haspopup", "onClick"];
 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) { _defineProperty(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; }
 /**
@@ -8,8 +10,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 import { useCallback, useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import Avatar from '@atlaskit/avatar';
@@ -157,7 +157,12 @@ var AvatarGroup = function AvatarGroup(_ref) {
     if (total <= max) {
       return null;
     }
-    var renderMoreButton = function renderMoreButton(props) {
+    var renderMoreButton = function renderMoreButton(_ref3) {
+      var ariaControls = _ref3['aria-controls'],
+        ariaExpanded = _ref3['aria-expanded'],
+        ariaHasPopup = _ref3['aria-haspopup'],
+        onClick = _ref3.onClick,
+        props = _objectWithoutProperties(_ref3, _excluded);
       return jsx(MoreIndicator, _extends({
         buttonProps: showMoreButtonProps,
         borderColor: borderColor,
@@ -165,7 +170,13 @@ var AvatarGroup = function AvatarGroup(_ref) {
         size: size,
         testId: testId && "".concat(testId, "--overflow-menu--trigger"),
         isActive: isOpen
-      }, props));
+        // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      }, props, {
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        onClick: onClick
+      }));
     };
 
     // bail if the consumer wants to handle onClick
@@ -192,8 +203,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
       shouldFlip: true,
       zIndex: layers.modal(),
       shouldRenderToParent: shouldPopupRenderToParent,
-      content: function content(_ref3) {
-        var setInitialFocusRef = _ref3.setInitialFocusRef;
+      content: function content(_ref4) {
+        var setInitialFocusRef = _ref4.setInitialFocusRef;
         return jsx(FocusManager, null, jsx(PopupAvatarGroup, {
           onClick: function onClick(e) {
             return e.stopPropagation();

package/dist/esm/components/grid.js

@@ -3,8 +3,6 @@
  * @jsx jsx
  */
 import { Children } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 var gutter = "var(--ds-space-negative-050, -4px)";
 var listStyles = css({

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

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxWidth", "minWidth", "setInitialFocusRef"];
+var _excluded = ["children", "isLoading", "maxHeight", "maxWidth", "minHeight", "minWidth", "onClick", "role", "setInitialFocusRef", "spacing", "testId"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 import { useContext, useEffect } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { MenuGroup } from '@atlaskit/menu';
 import { FocusManagerContext } from './focus-manager';
@@ -16,23 +14,36 @@ 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,
+  var children = _ref.children,
+    isLoading = _ref.isLoading,
+    maxHeight = _ref.maxHeight,
+    _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 800 : _ref$maxWidth,
+    minHeight = _ref.minHeight,
     _ref$minWidth = _ref.minWidth,
     minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
+    onClick = _ref.onClick,
+    role = _ref.role,
     setInitialFocusRef = _ref.setInitialFocusRef,
+    spacing = _ref.spacing,
+    testId = _ref.testId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   useEffect(function () {
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(menuItemRefs[0]);
   }, [menuItemRefs, setInitialFocusRef]);
-  return (
+  return jsx(MenuGroup, _extends({
+    isLoading: isLoading,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    minHeight: minHeight,
+    minWidth: minWidth,
+    onClick: onClick,
+    role: role,
+    spacing: spacing,
+    testId: testId
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(MenuGroup, _extends({
-      maxWidth: maxWidth,
-      minWidth: minWidth
-    }, rest))
-  );
+  }, rest), children);
 };
 export default PopupAvatarGroup;

package/dist/esm/components/internal/utiles/handle-focus.js

@@ -46,27 +46,27 @@ export default function handleFocus(refs) {
         if (currentFocusedIdx < refs.length - 1) {
           e.preventDefault();
           var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
-          _nextFocusableElement && _nextFocusableElement.focus();
+          _nextFocusableElement === null || _nextFocusableElement === void 0 || _nextFocusableElement.focus();
         }
         break;
       case 'prev':
         if (currentFocusedIdx > 0) {
           e.preventDefault();
           var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
-          _prevFocusableElement && _prevFocusableElement.focus();
+          _prevFocusableElement === null || _prevFocusableElement === void 0 || _prevFocusableElement.focus();
         }
         break;
       case 'first':
         e.preventDefault();
         // Search for first non-disabled element if first element is disabled
         var nextFocusableElement = getNextFocusableElement(refs, -1);
-        nextFocusableElement && nextFocusableElement.focus();
+        nextFocusableElement === null || nextFocusableElement === void 0 || nextFocusableElement.focus();
         break;
       case 'last':
         e.preventDefault();
         // Search for last non-disabled element if last element is disabled
         var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
-        prevFocusableElement && prevFocusableElement.focus();
+        prevFocusableElement === null || prevFocusableElement === void 0 || prevFocusableElement.focus();
         break;
       default:
         return;

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

@@ -6,8 +6,6 @@ var _excluded = ["testId", "className", "ref"];
  * @jsx jsx
  */
 import { forwardRef, useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';

package/dist/esm/components/stack.js

@@ -3,8 +3,6 @@
  * @jsx jsx
  */
 import { Children } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { BORDER_WIDTH } from '@atlaskit/avatar';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports

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

@@ -3,5 +3,5 @@ import { type 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;
+declare const PopupAvatarGroup: ({ children, isLoading, maxHeight, maxWidth, minHeight, minWidth, onClick, role, setInitialFocusRef, spacing, testId, ...rest }: PopupAvatarGroupProps) => jsx.JSX.Element;
 export default PopupAvatarGroup;

package/dist/types/components/more-indicator.d.ts

@@ -5,7 +5,7 @@ export interface MoreIndicatorProps extends AvatarPropTypes {
     count: number;
     'aria-controls'?: string;
     'aria-expanded'?: boolean;
-    'aria-haspopup'?: boolean;
+    'aria-haspopup'?: boolean | 'dialog';
     buttonProps: Partial<React.HTMLAttributes<HTMLElement>>;
     onClick: AvatarClickEventHandler;
     isActive: boolean;

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

@@ -3,5 +3,5 @@ import { type 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;
+declare const PopupAvatarGroup: ({ children, isLoading, maxHeight, maxWidth, minHeight, minWidth, onClick, role, setInitialFocusRef, spacing, testId, ...rest }: PopupAvatarGroupProps) => jsx.JSX.Element;
 export default PopupAvatarGroup;

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

@@ -5,7 +5,7 @@ export interface MoreIndicatorProps extends AvatarPropTypes {
     count: number;
     'aria-controls'?: string;
     'aria-expanded'?: boolean;
-    'aria-haspopup'?: boolean;
+    'aria-haspopup'?: boolean | 'dialog';
     buttonProps: Partial<React.HTMLAttributes<HTMLElement>>;
     onClick: AvatarClickEventHandler;
     isActive: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "10.0.1",
+	"version": "10.0.3",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,13 +23,13 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/avatar": "^21.15.0",
+		"@atlaskit/avatar": "^21.17.0",
 		"@atlaskit/ds-lib": "^3.1.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popup": "^1.28.0",
+		"@atlaskit/popup": "^1.29.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",