@atlaskit/avatar-group 12.0.15 → 12.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/components/avatar-group.js +2 -0
  3. package/dist/cjs/components/more-indicator.js +6 -1
  4. package/dist/es2019/components/avatar-group.js +2 -0
  5. package/dist/es2019/components/more-indicator.js +6 -1
  6. package/dist/esm/components/avatar-group.js +2 -0
  7. package/dist/esm/components/more-indicator.js +6 -1
  8. package/dist/types/components/avatar-group.d.ts +8 -1
  9. package/dist/types/components/more-indicator.d.ts +1 -0
  10. package/dist/types-ts4.5/components/avatar-group.d.ts +8 -1
  11. package/dist/types-ts4.5/components/more-indicator.d.ts +1 -0
  12. package/package.json +4 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 12.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#180943](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180943)
14
+ [`d9f378fa2f4e7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9f378fa2f4e7) -
15
+ Added the `moreIndicatorLabel` prop to provide the more indicator an accessible name
16
+
3
17
  ## 12.0.15
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/components/avatar-group.js CHANGED
@@ -87,6 +87,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
87
87
  testId = _ref.testId,
88
88
  _ref$label = _ref.label,
89
89
  label = _ref$label === void 0 ? 'avatar group' : _ref$label,
90
+ moreIndicatorLabel = _ref.moreIndicatorLabel,
90
91
  _ref$tooltipPosition = _ref.tooltipPosition,
91
92
  tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
92
93
  _ref$shouldPopupRende = _ref.shouldPopupRenderToParent,
@@ -178,6 +179,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
178
179
  size: size,
179
180
  testId: testId && "".concat(testId, "--overflow-menu--trigger"),
180
181
  isActive: isOpen,
182
+ moreIndicatorLabel: moreIndicatorLabel,
181
183
  'aria-controls': ariaControls,
182
184
  'aria-expanded': ariaExpanded,
183
185
  'aria-haspopup': ariaHasPopup,
package/dist/cjs/components/more-indicator.js CHANGED
@@ -60,6 +60,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
60
60
  ariaControls = _ref['aria-controls'],
61
61
  ariaExpanded = _ref['aria-expanded'],
62
62
  ariaHaspopup = _ref['aria-haspopup'],
63
+ moreIndicatorLabel = _ref.moreIndicatorLabel,
63
64
  _ref$buttonProps = _ref.buttonProps,
64
65
  buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
65
66
  isActive = _ref.isActive;
@@ -71,6 +72,9 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
71
72
  },
72
73
  // eslint-disable-next-line react-hooks/exhaustive-deps
73
74
  [buttonProps.onClick, onClick]);
75
+ var displayCount = count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count;
76
+ var providedAriaLabel = moreIndicatorLabel || buttonProps['aria-label'];
77
+ var ariaLabel = providedAriaLabel ? providedAriaLabel : "".concat(displayCount, " more people");
74
78
  return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
75
79
  type: "submit"
76
80
  }, buttonProps, {
@@ -80,9 +84,10 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
80
84
  "aria-controls": ariaControls,
81
85
  "aria-expanded": ariaExpanded,
82
86
  "aria-haspopup": ariaHaspopup,
87
+ "aria-label": ariaLabel,
83
88
  style: (0, _defineProperty2.default)({}, boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
84
89
  className: (0, _runtime.ax)([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], fontMap[size], isActive && styles.active])
85
- }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
90
+ }), "+", displayCount);
86
91
  });
87
92
  MoreIndicator.displayName = 'MoreIndicator';
88
93
 
package/dist/es2019/components/avatar-group.js CHANGED
@@ -64,6 +64,7 @@ const AvatarGroup = ({
64
64
  size = 'medium',
65
65
  testId,
66
66
  label = 'avatar group',
67
+ moreIndicatorLabel,
67
68
  tooltipPosition = 'bottom',
68
69
  shouldPopupRenderToParent = false
69
70
  }) => {
@@ -146,6 +147,7 @@ const AvatarGroup = ({
146
147
  size: size,
147
148
  testId: testId && `${testId}--overflow-menu--trigger`,
148
149
  isActive: isOpen,
150
+ moreIndicatorLabel: moreIndicatorLabel,
149
151
  'aria-controls': ariaControls,
150
152
  'aria-expanded': ariaExpanded,
151
153
  'aria-haspopup': ariaHasPopup,
package/dist/es2019/components/more-indicator.js CHANGED
@@ -47,6 +47,7 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
47
47
  'aria-controls': ariaControls,
48
48
  'aria-expanded': ariaExpanded,
49
49
  'aria-haspopup': ariaHaspopup,
50
+ moreIndicatorLabel,
50
51
  buttonProps = {},
51
52
  isActive
52
53
  }, ref) => {
@@ -58,6 +59,9 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
58
59
  },
59
60
  // eslint-disable-next-line react-hooks/exhaustive-deps
60
61
  [buttonProps.onClick, onClick]);
62
+ const displayCount = count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count;
63
+ const providedAriaLabel = moreIndicatorLabel || buttonProps['aria-label'];
64
+ const ariaLabel = providedAriaLabel ? providedAriaLabel : `${displayCount} more people`;
61
65
  return /*#__PURE__*/React.createElement("button", _extends({
62
66
  type: "submit"
63
67
  }, buttonProps, {
@@ -67,11 +71,12 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
67
71
  "aria-controls": ariaControls,
68
72
  "aria-expanded": ariaExpanded,
69
73
  "aria-haspopup": ariaHaspopup,
74
+ "aria-label": ariaLabel,
70
75
  style: {
71
76
  [boxShadowCssVar]: `0 0 0 2px ${borderColor}`
72
77
  },
73
78
  className: ax([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], fontMap[size], isActive && styles.active])
74
- }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
79
+ }), "+", displayCount);
75
80
  });
76
81
  MoreIndicator.displayName = 'MoreIndicator';
77
82
 
package/dist/esm/components/avatar-group.js CHANGED
@@ -78,6 +78,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
78
78
  testId = _ref.testId,
79
79
  _ref$label = _ref.label,
80
80
  label = _ref$label === void 0 ? 'avatar group' : _ref$label,
81
+ moreIndicatorLabel = _ref.moreIndicatorLabel,
81
82
  _ref$tooltipPosition = _ref.tooltipPosition,
82
83
  tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
83
84
  _ref$shouldPopupRende = _ref.shouldPopupRenderToParent,
@@ -169,6 +170,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
169
170
  size: size,
170
171
  testId: testId && "".concat(testId, "--overflow-menu--trigger"),
171
172
  isActive: isOpen,
173
+ moreIndicatorLabel: moreIndicatorLabel,
172
174
  'aria-controls': ariaControls,
173
175
  'aria-expanded': ariaExpanded,
174
176
  'aria-haspopup': ariaHasPopup,
package/dist/esm/components/more-indicator.js CHANGED
@@ -51,6 +51,7 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
51
51
  ariaControls = _ref['aria-controls'],
52
52
  ariaExpanded = _ref['aria-expanded'],
53
53
  ariaHaspopup = _ref['aria-haspopup'],
54
+ moreIndicatorLabel = _ref.moreIndicatorLabel,
54
55
  _ref$buttonProps = _ref.buttonProps,
55
56
  buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
56
57
  isActive = _ref.isActive;
@@ -62,6 +63,9 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
62
63
  },
63
64
  // eslint-disable-next-line react-hooks/exhaustive-deps
64
65
  [buttonProps.onClick, onClick]);
66
+ var displayCount = count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count;
67
+ var providedAriaLabel = moreIndicatorLabel || buttonProps['aria-label'];
68
+ var ariaLabel = providedAriaLabel ? providedAriaLabel : "".concat(displayCount, " more people");
65
69
  return /*#__PURE__*/React.createElement("button", _extends({
66
70
  type: "submit"
67
71
  }, buttonProps, {
@@ -71,9 +75,10 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
71
75
  "aria-controls": ariaControls,
72
76
  "aria-expanded": ariaExpanded,
73
77
  "aria-haspopup": ariaHaspopup,
78
+ "aria-label": ariaLabel,
74
79
  style: _defineProperty({}, boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
75
80
  className: ax([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], fontMap[size], isActive && styles.active])
76
- }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
81
+ }), "+", displayCount);
77
82
  });
78
83
  MoreIndicator.displayName = 'MoreIndicator';
79
84
 
package/dist/types/components/avatar-group.d.ts CHANGED
@@ -101,6 +101,13 @@ export interface AvatarGroupProps {
101
101
  * Determines whether the 'show more' popup has `shouldRenderToParent` applied.
102
102
  */
103
103
  shouldPopupRenderToParent?: boolean;
104
+ /**
105
+ * Text to be used as aria-label for the more indicator.
106
+ * If provided, this will be used exactly as-is for the aria-label.
107
+ * If not provided, but an `aria-label` is provided via `showMoreButtonProps`, that will be used instead.
108
+ * If neither is provided, the aria-label will default to "N more people" where N is the number of people that are not visible (e.g. "5 more people").
109
+ */
110
+ moreIndicatorLabel?: string;
104
111
  }
105
112
  /**
106
113
  * __Avatar group__
@@ -111,5 +118,5 @@ export interface AvatarGroupProps {
111
118
  * - [Code](https://atlassian.design/components/avatar-group/code)
112
119
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
113
120
  */
114
- declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => React.JSX.Element;
121
+ declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, moreIndicatorLabel, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => React.JSX.Element;
115
122
  export default AvatarGroup;
package/dist/types/components/more-indicator.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface MoreIndicatorProps {
6
6
  'aria-controls'?: string;
7
7
  'aria-expanded'?: boolean;
8
8
  'aria-haspopup'?: boolean | 'dialog';
9
+ moreIndicatorLabel?: string;
9
10
  buttonProps: Partial<React.HTMLAttributes<HTMLElement>>;
10
11
  onClick: AvatarClickEventHandler;
11
12
  isActive: boolean;
package/dist/types-ts4.5/components/avatar-group.d.ts CHANGED
@@ -101,6 +101,13 @@ export interface AvatarGroupProps {
101
101
  * Determines whether the 'show more' popup has `shouldRenderToParent` applied.
102
102
  */
103
103
  shouldPopupRenderToParent?: boolean;
104
+ /**
105
+ * Text to be used as aria-label for the more indicator.
106
+ * If provided, this will be used exactly as-is for the aria-label.
107
+ * If not provided, but an `aria-label` is provided via `showMoreButtonProps`, that will be used instead.
108
+ * If neither is provided, the aria-label will default to "N more people" where N is the number of people that are not visible (e.g. "5 more people").
109
+ */
110
+ moreIndicatorLabel?: string;
104
111
  }
105
112
  /**
106
113
  * __Avatar group__
@@ -111,5 +118,5 @@ export interface AvatarGroupProps {
111
118
  * - [Code](https://atlassian.design/components/avatar-group/code)
112
119
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
113
120
  */
114
- declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => React.JSX.Element;
121
+ declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, moreIndicatorLabel, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => React.JSX.Element;
115
122
  export default AvatarGroup;
package/dist/types-ts4.5/components/more-indicator.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface MoreIndicatorProps {
6
6
  'aria-controls'?: string;
7
7
  'aria-expanded'?: boolean;
8
8
  'aria-haspopup'?: boolean | 'dialog';
9
+ moreIndicatorLabel?: string;
9
10
  buttonProps: Partial<React.HTMLAttributes<HTMLElement>>;
10
11
  onClick: AvatarClickEventHandler;
11
12
  isActive: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "12.0.15",
3
+ "version": "12.1.1",
4
4
  "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -21,8 +21,7 @@
21
21
  "website": {
22
22
  "name": "Avatar group",
23
23
  "category": "Images and icons"
24
- },
25
- "runReact18": true
24
+ }
26
25
  },
27
26
  "dependencies": {
28
27
  "@atlaskit/avatar": "^25.1.0",
@@ -31,7 +30,7 @@
31
30
  "@atlaskit/menu": "^8.0.0",
32
31
  "@atlaskit/platform-feature-flags": "^1.1.0",
33
32
  "@atlaskit/popup": "^4.3.0",
34
- "@atlaskit/theme": "^18.0.0",
33
+ "@atlaskit/theme": "^19.0.0",
35
34
  "@atlaskit/tokens": "^5.4.0",
36
35
  "@atlaskit/tooltip": "^20.3.0",
37
36
  "@babel/runtime": "^7.0.0",
@@ -49,7 +48,7 @@
49
48
  "@atlaskit/button": "^23.2.0",
50
49
  "@atlaskit/docs": "^11.0.0",
51
50
  "@atlaskit/form": "^12.0.0",
52
- "@atlaskit/icon": "^27.2.0",
51
+ "@atlaskit/icon": "^27.3.0",
53
52
  "@atlaskit/link": "^3.2.0",
54
53
  "@atlaskit/modal-dialog": "^14.2.0",
55
54
  "@atlaskit/primitives": "^14.10.0",