@atlaskit/avatar-group 12.3.2 → 12.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/avatar-group
 
+## 12.4.0
+
+### Minor Changes
+
+- [`ac5c6b99586dc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ac5c6b99586dc) -
+  Add accessible name to group overflow section.
+
+## 12.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.3.2
 
 ### Patch Changes
@@ -1180,7 +1193,6 @@
   reduced bundlesize.
 
   **Change summary:**
-
   - `name` is now a required property of the `data` attribute. This was previously not required
     simply because we forwarded avatars props. Names should always be supplied so that avatars can
     be differentiated in a meaningful way (although they are not required to be unique).
@@ -1188,7 +1200,6 @@
   - AvatarGroup now uses `@emotion`
 
   **Misc.**
-
   - Fixed broken margin styling bug with `stack` groups
   - Replaced `dropdown-menu` with a lighter and more performant `popup` component
   - Removed custom `dropdown-menu` styling
@@ -1358,7 +1369,6 @@
 
   Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies
   [6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
-
   - @atlaskit/docs@8.3.2
   - @atlaskit/visual-regression@0.1.9
   - @atlaskit/avatar@17.1.7
@@ -1537,13 +1547,11 @@
 ## 4.0.1
 
 - [patch][21854842b5](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/21854842b5):
-
   - Clean couple of TODO's that were already done
 
 ## 4.0.0
 
 - [major][7c17b35107](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/7c17b35107):
-
   - Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use
     this package, please ensure you use at least this version of react and react-dom.
 
@@ -1579,7 +1587,6 @@
 ## 3.0.2
 
 - [patch][ea173a3ee2](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/ea173a3ee2):
-
   - Internal changes only. Component is now SSR compatible. If server side rendered, Avatar Images
     will begin to load immediately; before client bundle is ready. If this is undesired, `imageUrl`
     can be passed in after component is mounted.
@@ -1600,7 +1607,6 @@
 ## 3.0.0
 
 - [major][76299208e6](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/76299208e6):
-
   - Drop ES5 from all the flow modules
 
   ### Dropping CJS support in all @atlaskit packages
@@ -1645,13 +1651,11 @@
 ## 2.1.12
 
 - [patch][3a9b559382](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/3a9b559382):
-
   - Stopping href from being passed down to Avatar in DropdownMenu rendered in AvatarGroup
 
 ## 2.1.11
 
 - [patch][ed05c5c5d9](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/ed05c5c5d9):
-
   - Change border color of avatar in avatar group dropdown menu to transparent so that it does not
     overlap with focus ring
 

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

@@ -16,6 +16,7 @@ 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 _useId = require("@atlaskit/ds-lib/use-id");
 var _menu = require("@atlaskit/menu");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -162,7 +163,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     };
     return unbind;
   }, [isFocused, isOpen, handleTriggerClicked]);
-  function renderMoreDropdown(max, total) {
+  function renderMoreDropdown(max, total, labelId) {
     if (total <= max) {
       return null;
     }
@@ -220,7 +221,10 @@ var AvatarGroup = function AvatarGroup(_ref) {
           minWidth: 250,
           maxHeight: 300,
           setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
-        }, /*#__PURE__*/_react.default.createElement(_menu.Section, null, data.slice(max).map(function (avatar, index) {
+        }, /*#__PURE__*/_react.default.createElement(_menu.Section, {
+          titleId: labelId,
+          testId: "".concat(testId, "--section")
+        }, data.slice(max).map(function (avatar, index) {
           return getOverrides(overrides).AvatarGroupItem.render(_avatarGroupItem.default, {
             avatar: avatar,
             onAvatarClick: onAvatarClick,
@@ -243,8 +247,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var max = maxCount === undefined || maxCount === 0 ? MAX_COUNT[appearance] : maxCount;
   var total = data.length;
   var maxAvatar = total > max ? max - 1 : max;
-  var Group = appearance === 'stack' ? _stack.default : _grid.default;
-  return /*#__PURE__*/_react.default.createElement(Group, {
+  var groupId = (0, _useId.useId)();
+  return appearance === 'stack' ? /*#__PURE__*/_react.default.createElement(_stack.default, {
+    id: groupId,
     testId: testId && "".concat(testId, "--avatar-group"),
     "aria-label": label,
     size: size
@@ -265,6 +270,27 @@ var AvatarGroup = function AvatarGroup(_ref) {
       testId: testId && "".concat(testId, "--tooltip-").concat(idx),
       position: tooltipPosition
     }, finalAvatar) : finalAvatar;
-  }), renderMoreDropdown(+maxAvatar, total));
+  }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/_react.default.createElement(_grid.default, {
+    id: groupId,
+    testId: testId && "".concat(testId, "--avatar-group"),
+    "aria-label": label
+  }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
+    var callback = avatarData.onClick || onAvatarClick;
+    var finalAvatar = getOverrides(overrides).Avatar.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
+      size: size,
+      borderColor: borderColor || avatarData.borderColor,
+      testId: testId && "".concat(testId, "--avatar-").concat(idx),
+      onClick: callback ? function (event, analyticsEvent) {
+        callback(event, analyticsEvent, idx);
+      } : undefined,
+      stackIndex: max - idx
+    }), idx);
+    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      key: (0, _utils.composeUniqueKey)(avatarData, idx),
+      content: avatarData.name,
+      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+      position: tooltipPosition
+    }, finalAvatar) : finalAvatar;
+  }), renderMoreDropdown(+maxAvatar, total, groupId));
 };
 var _default = exports.default = AvatarGroup;

package/dist/cjs/components/grid.js

@@ -17,10 +17,12 @@ var listStyles = null;
 var listStylesFlagged = null;
 var listItemStyles = null;
 var Grid = function Grid(_ref) {
-  var children = _ref.children,
+  var id = _ref.id,
+    children = _ref.children,
     testId = _ref.testId,
     label = _ref['aria-label'];
   return /*#__PURE__*/React.createElement("ul", {
+    id: id,
     "data-testid": testId,
     "aria-label": label,
     className: (0, _runtime.ax)(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])

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

@@ -23,6 +23,7 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
     }
     currentFocusedIdx++;
   }
+  return;
 };
 
 /**
@@ -39,6 +40,7 @@ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocu
     }
     currentFocusedIdx--;
   }
+  return;
 };
 function handleFocus(refs) {
   return function (e) {

package/dist/cjs/components/stack.js

@@ -17,11 +17,13 @@ var listSmallStyles = null;
 var listItemStyles = null;
 var listItemSmallStyles = null;
 var Stack = function Stack(_ref) {
-  var children = _ref.children,
+  var id = _ref.id,
+    children = _ref.children,
     testId = _ref.testId,
     label = _ref['aria-label'],
     size = _ref.size;
   return /*#__PURE__*/React.createElement("ul", {
+    id: id,
     "data-testid": testId,
     "aria-label": label,
     className: (0, _runtime.ax)(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_12l21b66"])

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

@@ -5,6 +5,7 @@ import Avatar from '@atlaskit/avatar';
 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 { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
 import Tooltip from '@atlaskit/tooltip';
@@ -130,7 +131,7 @@ const AvatarGroup = ({
     };
     return unbind;
   }, [isFocused, isOpen, handleTriggerClicked]);
-  function renderMoreDropdown(max, total) {
+  function renderMoreDropdown(max, total, labelId) {
     if (total <= max) {
       return null;
     }
@@ -186,7 +187,10 @@ const AvatarGroup = ({
         minWidth: 250,
         maxHeight: 300,
         setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
-      }, /*#__PURE__*/React.createElement(Section, null, data.slice(max).map((avatar, index) => getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
+      }, /*#__PURE__*/React.createElement(Section, {
+        titleId: labelId,
+        testId: `${testId}--section`
+      }, data.slice(max).map((avatar, index) => getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
         avatar,
         onAvatarClick,
         testId: testId && `${testId}--avatar-group-item-${index + max}`,
@@ -206,8 +210,9 @@ const AvatarGroup = ({
   const max = maxCount === undefined || maxCount === 0 ? MAX_COUNT[appearance] : maxCount;
   const total = data.length;
   const maxAvatar = total > max ? max - 1 : max;
-  const Group = appearance === 'stack' ? Stack : Grid;
-  return /*#__PURE__*/React.createElement(Group, {
+  const groupId = useId();
+  return appearance === 'stack' ? /*#__PURE__*/React.createElement(Stack, {
+    id: groupId,
     testId: testId && `${testId}--avatar-group`,
     "aria-label": label,
     size: size
@@ -229,6 +234,28 @@ const AvatarGroup = ({
       testId: testId && `${testId}--tooltip-${idx}`,
       position: tooltipPosition
     }, finalAvatar) : finalAvatar;
-  }), renderMoreDropdown(+maxAvatar, total));
+  }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/React.createElement(Grid, {
+    id: groupId,
+    testId: testId && `${testId}--avatar-group`,
+    "aria-label": label
+  }, data.slice(0, maxAvatar).map((avatarData, idx) => {
+    const callback = avatarData.onClick || onAvatarClick;
+    const finalAvatar = getOverrides(overrides).Avatar.render(avatar, {
+      ...avatarData,
+      size,
+      borderColor: borderColor || avatarData.borderColor,
+      testId: testId && `${testId}--avatar-${idx}`,
+      onClick: callback ? (event, analyticsEvent) => {
+        callback(event, analyticsEvent, idx);
+      } : undefined,
+      stackIndex: max - idx
+    }, idx);
+    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+      key: composeUniqueKey(avatarData, idx),
+      content: avatarData.name,
+      testId: testId && `${testId}--tooltip-${idx}`,
+      position: tooltipPosition
+    }, finalAvatar) : finalAvatar;
+  }), renderMoreDropdown(+maxAvatar, total, groupId));
 };
 export default AvatarGroup;

package/dist/es2019/components/grid.js

@@ -9,10 +9,12 @@ const listStyles = null;
 const listStylesFlagged = null;
 const listItemStyles = null;
 const Grid = ({
+  id,
   children,
   testId,
   'aria-label': label
 }) => /*#__PURE__*/React.createElement("ul", {
+  id: id,
   "data-testid": testId,
   "aria-label": label,
   className: ax(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", fg('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])

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

@@ -20,6 +20,7 @@ const getNextFocusableElement = (refs, currentFocusedIdx) => {
     }
     currentFocusedIdx++;
   }
+  return;
 };
 
 /**
@@ -36,6 +37,7 @@ const getPrevFocusableElement = (refs, currentFocusedIdx) => {
     }
     currentFocusedIdx--;
   }
+  return;
 };
 export default function handleFocus(refs) {
   return e => {

package/dist/es2019/components/stack.js

@@ -9,11 +9,13 @@ const listSmallStyles = null;
 const listItemStyles = null;
 const listItemSmallStyles = null;
 const Stack = ({
+  id,
   children,
   testId,
   'aria-label': label,
   size
 }) => /*#__PURE__*/React.createElement("ul", {
+  id: id,
   "data-testid": testId,
   "aria-label": label,
   className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l21b66"])

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

@@ -11,6 +11,7 @@ import Avatar from '@atlaskit/avatar';
 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 { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
 import Tooltip from '@atlaskit/tooltip';
@@ -153,7 +154,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     };
     return unbind;
   }, [isFocused, isOpen, handleTriggerClicked]);
-  function renderMoreDropdown(max, total) {
+  function renderMoreDropdown(max, total, labelId) {
     if (total <= max) {
       return null;
     }
@@ -211,7 +212,10 @@ var AvatarGroup = function AvatarGroup(_ref) {
           minWidth: 250,
           maxHeight: 300,
           setInitialFocusRef: isTriggeredUsingKeyboard ? setInitialFocusRef : undefined
-        }, /*#__PURE__*/React.createElement(Section, null, data.slice(max).map(function (avatar, index) {
+        }, /*#__PURE__*/React.createElement(Section, {
+          titleId: labelId,
+          testId: "".concat(testId, "--section")
+        }, data.slice(max).map(function (avatar, index) {
           return getOverrides(overrides).AvatarGroupItem.render(AvatarGroupItem, {
             avatar: avatar,
             onAvatarClick: onAvatarClick,
@@ -234,8 +238,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var max = maxCount === undefined || maxCount === 0 ? MAX_COUNT[appearance] : maxCount;
   var total = data.length;
   var maxAvatar = total > max ? max - 1 : max;
-  var Group = appearance === 'stack' ? Stack : Grid;
-  return /*#__PURE__*/React.createElement(Group, {
+  var groupId = useId();
+  return appearance === 'stack' ? /*#__PURE__*/React.createElement(Stack, {
+    id: groupId,
     testId: testId && "".concat(testId, "--avatar-group"),
     "aria-label": label,
     size: size
@@ -256,6 +261,27 @@ var AvatarGroup = function AvatarGroup(_ref) {
       testId: testId && "".concat(testId, "--tooltip-").concat(idx),
       position: tooltipPosition
     }, finalAvatar) : finalAvatar;
-  }), renderMoreDropdown(+maxAvatar, total));
+  }), renderMoreDropdown(+maxAvatar, total, groupId)) : /*#__PURE__*/React.createElement(Grid, {
+    id: groupId,
+    testId: testId && "".concat(testId, "--avatar-group"),
+    "aria-label": label
+  }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
+    var callback = avatarData.onClick || onAvatarClick;
+    var finalAvatar = getOverrides(overrides).Avatar.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {
+      size: size,
+      borderColor: borderColor || avatarData.borderColor,
+      testId: testId && "".concat(testId, "--avatar-").concat(idx),
+      onClick: callback ? function (event, analyticsEvent) {
+        callback(event, analyticsEvent, idx);
+      } : undefined,
+      stackIndex: max - idx
+    }), idx);
+    return !isTooltipDisabled && !avatarData.isDisabled ? /*#__PURE__*/React.createElement(Tooltip, {
+      key: composeUniqueKey(avatarData, idx),
+      content: avatarData.name,
+      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+      position: tooltipPosition
+    }, finalAvatar) : finalAvatar;
+  }), renderMoreDropdown(+maxAvatar, total, groupId));
 };
 export default AvatarGroup;

package/dist/esm/components/grid.js

@@ -9,10 +9,12 @@ var listStyles = null;
 var listStylesFlagged = null;
 var listItemStyles = null;
 var Grid = function Grid(_ref) {
-  var children = _ref.children,
+  var id = _ref.id,
+    children = _ref.children,
     testId = _ref.testId,
     label = _ref['aria-label'];
   return /*#__PURE__*/React.createElement("ul", {
+    id: id,
     "data-testid": testId,
     "aria-label": label,
     className: ax(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", fg('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])

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

@@ -16,6 +16,7 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
     }
     currentFocusedIdx++;
   }
+  return;
 };
 
 /**
@@ -32,6 +33,7 @@ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocu
     }
     currentFocusedIdx--;
   }
+  return;
 };
 export default function handleFocus(refs) {
   return function (e) {

package/dist/esm/components/stack.js

@@ -9,11 +9,13 @@ var listSmallStyles = null;
 var listItemStyles = null;
 var listItemSmallStyles = null;
 var Stack = function Stack(_ref) {
-  var children = _ref.children,
+  var id = _ref.id,
+    children = _ref.children,
     testId = _ref.testId,
     label = _ref['aria-label'],
     size = _ref.size;
   return /*#__PURE__*/React.createElement("ul", {
+    id: id,
     "data-testid": testId,
     "aria-label": label,
     className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l21b66"])

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

@@ -7,5 +7,6 @@ declare const Grid: FC<{
     children: ReactNode;
     testId?: string;
     'aria-label': string;
+    id?: string;
 }>;
 export default Grid;

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

@@ -9,5 +9,6 @@ declare const Stack: FC<{
     testId?: string;
     'aria-label': string;
     size: AvatarGroupSize;
+    id?: string;
 }>;
 export default Stack;

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

@@ -7,5 +7,6 @@ declare const Grid: FC<{
     children: ReactNode;
     testId?: string;
     'aria-label': string;
+    id?: string;
 }>;
 export default Grid;

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

@@ -9,5 +9,6 @@ declare const Stack: FC<{
     testId?: string;
     'aria-label': string;
     size: AvatarGroupSize;
+    id?: string;
 }>;
 export default Stack;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "12.3.2",
+	"version": "12.4.0",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,17 +24,17 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/avatar": "^25.4.0",
+		"@atlaskit/avatar": "^25.5.0",
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^6.5.0",
-		"@atlaskit/tooltip": "^20.5.0",
+		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tooltip": "^20.6.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3",
+		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
@@ -46,12 +46,12 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/button": "^23.5.0",
-		"@atlaskit/docs": "^11.1.0",
+		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/form": "^14.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/modal-dialog": "^14.5.0",
-		"@atlaskit/primitives": "^15.0.0",
+		"@atlaskit/modal-dialog": "^14.6.0",
+		"@atlaskit/primitives": "^16.0.0",
 		"@atlaskit/section-message": "^8.7.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/toggle": "^15.1.0",