@atlaskit/avatar-group 9.2.1 → 9.2.3

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 9.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 9.2.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
14
+
3
15
  ## 9.2.1
4
16
 
5
17
  ### Patch Changes
@@ -1,51 +1,40 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
-
12
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
-
14
10
  var _react = _interopRequireDefault(require("react"));
15
-
16
11
  var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
17
-
18
12
  var _menu = require("@atlaskit/menu");
19
-
20
13
  var _excluded = ["href", "onClick"],
21
- _excluded2 = ["children"];
22
-
14
+ _excluded2 = ["children"];
23
15
  var AvatarGroupItem = function AvatarGroupItem(_ref) {
24
16
  var avatar = _ref.avatar,
25
- onAvatarClick = _ref.onAvatarClick,
26
- testId = _ref.testId,
27
- index = _ref.index;
17
+ onAvatarClick = _ref.onAvatarClick,
18
+ testId = _ref.testId,
19
+ index = _ref.index;
28
20
  var href = avatar.href,
29
- onClick = avatar.onClick,
30
- rest = (0, _objectWithoutProperties2.default)(avatar, _excluded);
31
-
21
+ onClick = avatar.onClick,
22
+ rest = (0, _objectWithoutProperties2.default)(avatar, _excluded);
32
23
  var CustomComponent = function CustomComponent(_ref2) {
33
24
  var children = _ref2.children,
34
- props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
25
+ props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
35
26
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
36
27
  return /*#__PURE__*/_react.default.createElement("span", props, children);
37
28
  };
38
-
39
29
  var AvatarIcon = /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({}, rest, {
40
30
  testId: testId && "".concat(testId, "--avatar"),
41
31
  borderColor: "transparent",
42
32
  size: "small",
43
33
  name: ""
44
- })); // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
45
-
34
+ }));
46
35
 
36
+ // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
47
37
  var callback = onClick || onAvatarClick;
48
-
49
38
  if (href) {
50
39
  return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
51
40
  href: href,
@@ -58,7 +47,6 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
58
47
  }
59
48
  }, avatar.name);
60
49
  }
61
-
62
50
  if (typeof callback === 'function') {
63
51
  return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
64
52
  onClick: function onClick(event) {
@@ -68,14 +56,13 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
68
56
  testId: testId
69
57
  }, avatar.name);
70
58
  }
71
-
72
59
  return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, {
73
60
  iconBefore: AvatarIcon,
74
61
  component: CustomComponent,
75
62
  testId: testId
76
63
  }, avatar.name);
77
- }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
78
-
64
+ };
79
65
 
66
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
80
67
  var _default = AvatarGroupItem;
81
68
  exports.default = _default;
@@ -1,51 +1,31 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
-
12
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
-
16
11
  var _react = require("react");
17
-
18
12
  var _react2 = require("@emotion/react");
19
-
20
13
  var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
21
-
22
14
  var _menu = require("@atlaskit/menu");
23
-
24
15
  var _popup = _interopRequireDefault(require("@atlaskit/popup"));
25
-
26
16
  var _constants = require("@atlaskit/theme/constants");
27
-
28
17
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
29
-
30
18
  var _avatarGroupItem = _interopRequireDefault(require("./avatar-group-item"));
31
-
32
19
  var _grid = _interopRequireDefault(require("./grid"));
33
-
34
20
  var _moreIndicator = _interopRequireDefault(require("./more-indicator"));
35
-
36
21
  var _stack = _interopRequireDefault(require("./stack"));
37
-
38
22
  var _utils = require("./utils");
39
-
40
23
  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; }
41
-
42
24
  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) { (0, _defineProperty2.default)(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; }
43
-
44
25
  var MAX_COUNT = {
45
26
  grid: 11,
46
27
  stack: 5
47
28
  };
48
-
49
29
  function getOverrides(overrides) {
50
30
  return {
51
31
  AvatarGroupItem: _objectSpread({
@@ -64,6 +44,7 @@ function getOverrides(overrides) {
64
44
  }, overrides && overrides.Avatar)
65
45
  };
66
46
  }
47
+
67
48
  /**
68
49
  * __Avatar group__
69
50
  *
@@ -73,45 +54,39 @@ function getOverrides(overrides) {
73
54
  * - [Code](https://atlassian.design/components/avatar-group/code)
74
55
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
75
56
  */
76
-
77
-
78
57
  var AvatarGroup = function AvatarGroup(_ref) {
79
58
  var _ref$appearance = _ref.appearance,
80
- appearance = _ref$appearance === void 0 ? 'stack' : _ref$appearance,
81
- _ref$avatar = _ref.avatar,
82
- avatar = _ref$avatar === void 0 ? _avatar.default : _ref$avatar,
83
- borderColor = _ref.borderColor,
84
- boundariesElement = _ref.boundariesElement,
85
- data = _ref.data,
86
- isTooltipDisabled = _ref.isTooltipDisabled,
87
- maxCount = _ref.maxCount,
88
- onAvatarClick = _ref.onAvatarClick,
89
- onMoreClick = _ref.onMoreClick,
90
- overrides = _ref.overrides,
91
- _ref$showMoreButtonPr = _ref.showMoreButtonProps,
92
- showMoreButtonProps = _ref$showMoreButtonPr === void 0 ? {} : _ref$showMoreButtonPr,
93
- _ref$size = _ref.size,
94
- size = _ref$size === void 0 ? 'medium' : _ref$size,
95
- testId = _ref.testId,
96
- _ref$label = _ref.label,
97
- label = _ref$label === void 0 ? 'avatar group' : _ref$label,
98
- _ref$tooltipPosition = _ref.tooltipPosition,
99
- tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
100
-
59
+ appearance = _ref$appearance === void 0 ? 'stack' : _ref$appearance,
60
+ _ref$avatar = _ref.avatar,
61
+ avatar = _ref$avatar === void 0 ? _avatar.default : _ref$avatar,
62
+ borderColor = _ref.borderColor,
63
+ boundariesElement = _ref.boundariesElement,
64
+ data = _ref.data,
65
+ isTooltipDisabled = _ref.isTooltipDisabled,
66
+ maxCount = _ref.maxCount,
67
+ onAvatarClick = _ref.onAvatarClick,
68
+ onMoreClick = _ref.onMoreClick,
69
+ overrides = _ref.overrides,
70
+ _ref$showMoreButtonPr = _ref.showMoreButtonProps,
71
+ showMoreButtonProps = _ref$showMoreButtonPr === void 0 ? {} : _ref$showMoreButtonPr,
72
+ _ref$size = _ref.size,
73
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
74
+ testId = _ref.testId,
75
+ _ref$label = _ref.label,
76
+ label = _ref$label === void 0 ? 'avatar group' : _ref$label,
77
+ _ref$tooltipPosition = _ref.tooltipPosition,
78
+ tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
101
79
  var _useState = (0, _react.useState)(false),
102
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
103
- isOpen = _useState2[0],
104
- setIsOpen = _useState2[1];
105
-
80
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
81
+ isOpen = _useState2[0],
82
+ setIsOpen = _useState2[1];
106
83
  var onClose = (0, _react.useCallback)(function () {
107
84
  return setIsOpen(false);
108
85
  }, []);
109
-
110
86
  function renderMoreDropdown(max, total) {
111
87
  if (total <= max) {
112
88
  return null;
113
89
  }
114
-
115
90
  var renderMoreButton = function renderMoreButton(props) {
116
91
  return (0, _react2.jsx)(_moreIndicator.default, (0, _extends2.default)({
117
92
  buttonProps: showMoreButtonProps,
@@ -121,26 +96,23 @@ var AvatarGroup = function AvatarGroup(_ref) {
121
96
  testId: testId && "".concat(testId, "--overflow-menu--trigger"),
122
97
  isActive: isOpen
123
98
  }, props));
124
- }; // bail if the consumer wants to handle onClick
125
-
99
+ };
126
100
 
101
+ // bail if the consumer wants to handle onClick
127
102
  if (typeof onMoreClick === 'function') {
128
103
  return renderMoreButton({
129
104
  onClick: onMoreClick
130
105
  });
131
- } // split boundariesElement into `boundary` and `rootBoundary` props for Popup
132
-
106
+ }
133
107
 
108
+ // split boundariesElement into `boundary` and `rootBoundary` props for Popup
134
109
  var boundary = boundariesElement === 'scrollParent' ? 'clippingParents' : undefined;
135
-
136
110
  var rootBoundary = function () {
137
111
  if (boundariesElement === 'scrollParent') {
138
112
  return undefined;
139
113
  }
140
-
141
114
  return boundariesElement === 'window' ? 'document' : 'viewport';
142
115
  }();
143
-
144
116
  return (0, _react2.jsx)(_popup.default, {
145
117
  isOpen: isOpen,
146
118
  onClose: onClose,
@@ -162,7 +134,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
162
134
  onAvatarClick: onAvatarClick,
163
135
  testId: testId && "".concat(testId, "--avatar-group-item-").concat(index + max),
164
136
  index: index + max
165
- }, // This index holds the true index,
137
+ },
138
+ // This index holds the true index,
166
139
  // adding up the index of non-overflowed avatars and overflowed avatars.
167
140
  index + max);
168
141
  })));
@@ -177,7 +150,6 @@ var AvatarGroup = function AvatarGroup(_ref) {
177
150
  testId: testId && "".concat(testId, "--overflow-menu")
178
151
  });
179
152
  }
180
-
181
153
  var max = maxCount === undefined || maxCount === 0 ? MAX_COUNT[appearance] : maxCount;
182
154
  var total = data.length;
183
155
  var maxAvatar = total > max ? max - 1 : max;
@@ -204,6 +176,5 @@ var AvatarGroup = function AvatarGroup(_ref) {
204
176
  }, finalAvatar) : finalAvatar;
205
177
  }), renderMoreDropdown(+maxAvatar, total));
206
178
  };
207
-
208
179
  var _default = AvatarGroup;
209
180
  exports.default = _default;
@@ -4,45 +4,35 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _react2 = require("@emotion/react");
11
-
12
9
  var _constants = require("@atlaskit/theme/constants");
13
-
14
10
  /** @jsx jsx */
11
+
15
12
  var gridSize = (0, _constants.gridSize)();
16
13
  var gutter = gridSize / 2;
17
14
  var listStyles = (0, _react2.css)({
18
15
  // removes default ul styles. Needs !important to override contextual styles in product.
19
16
  display: 'flex',
20
- // TODO Delete this comment after verifying spacing token -> previous value `0`
21
- margin: "var(--ds-scale-0, 0px)",
17
+ margin: "var(--ds-space-0, 0px)",
22
18
  marginRight: -gutter,
23
19
  marginLeft: -gutter,
24
- // TODO Delete this comment after verifying spacing token -> previous value `0`
25
- padding: "var(--ds-scale-0, 0px)",
20
+ padding: "var(--ds-space-0, 0px)",
26
21
  justifyContent: 'flex-start',
27
22
  flexWrap: 'wrap',
28
23
  lineHeight: 1,
29
24
  listStyleType: 'none !important'
30
25
  });
31
26
  var listItemStyles = (0, _react2.css)({
32
- // TODO Delete this comment after verifying spacing token -> previous value `0`
33
- margin: "var(--ds-scale-0, 0px)",
34
- // TODO Delete this comment after verifying spacing token -> previous value `gridSize`
35
- marginBottom: "var(--ds-scale-100, 8px)",
36
- // TODO Delete this comment after verifying spacing token -> previous value `gutter`
37
- paddingRight: "var(--ds-scale-050, 4px)",
38
- // TODO Delete this comment after verifying spacing token -> previous value `gutter`
39
- paddingLeft: "var(--ds-scale-050, 4px)"
27
+ margin: "var(--ds-space-0, 0px)",
28
+ marginBottom: "var(--ds-space-100, 8px)",
29
+ paddingRight: "var(--ds-space-050, 4px)",
30
+ paddingLeft: "var(--ds-space-050, 4px)"
40
31
  });
41
-
42
32
  var Grid = function Grid(_ref) {
43
33
  var children = _ref.children,
44
- testId = _ref.testId,
45
- label = _ref['aria-label'];
34
+ testId = _ref.testId,
35
+ label = _ref['aria-label'];
46
36
  return (0, _react2.jsx)("ul", {
47
37
  "data-testid": testId,
48
38
  "aria-label": label,
@@ -52,8 +42,8 @@ var Grid = function Grid(_ref) {
52
42
  css: listItemStyles
53
43
  }, child);
54
44
  }));
55
- }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
56
-
45
+ };
57
46
 
47
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
58
48
  var _default = Grid;
59
49
  exports.default = _default;
@@ -1,32 +1,20 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = void 0;
11
-
12
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
-
16
11
  var _react = require("react");
17
-
18
12
  var _react2 = require("@emotion/react");
19
-
20
13
  var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
21
-
22
14
  var _colors = require("@atlaskit/theme/colors");
23
-
24
15
  var _excluded = ["testId", "className", "ref"];
25
-
26
16
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
-
28
17
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
-
30
18
  var FONT_SIZE = {
31
19
  xsmall: '10px',
32
20
  small: '10px',
@@ -76,28 +64,28 @@ var buttonStyles = (0, _react2.css)({
76
64
  var MAX_DISPLAY_COUNT = 99;
77
65
  var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
78
66
  var _ref$appearance = _ref.appearance,
79
- appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
80
- _ref$borderColor = _ref.borderColor,
81
- borderColor = _ref$borderColor === void 0 ? "var(--ds-border-inverse, ".concat(_colors.N0, ")") : _ref$borderColor,
82
- _ref$size = _ref.size,
83
- size = _ref$size === void 0 ? 'medium' : _ref$size,
84
- _ref$count = _ref.count,
85
- count = _ref$count === void 0 ? 0 : _ref$count,
86
- testId = _ref.testId,
87
- onClick = _ref.onClick,
88
- ariaControls = _ref['aria-controls'],
89
- ariaExpanded = _ref['aria-expanded'],
90
- ariaHaspopup = _ref['aria-haspopup'],
91
- _ref$buttonProps = _ref.buttonProps,
92
- buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
93
- isActive = _ref.isActive;
67
+ appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
68
+ _ref$borderColor = _ref.borderColor,
69
+ borderColor = _ref$borderColor === void 0 ? "var(--ds-border-inverse, ".concat(_colors.N0, ")") : _ref$borderColor,
70
+ _ref$size = _ref.size,
71
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
72
+ _ref$count = _ref.count,
73
+ count = _ref$count === void 0 ? 0 : _ref$count,
74
+ testId = _ref.testId,
75
+ onClick = _ref.onClick,
76
+ ariaControls = _ref['aria-controls'],
77
+ ariaExpanded = _ref['aria-expanded'],
78
+ ariaHaspopup = _ref['aria-haspopup'],
79
+ _ref$buttonProps = _ref.buttonProps,
80
+ buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
81
+ isActive = _ref.isActive;
94
82
  var onClickHander = (0, _react.useCallback)(function (event, analyticsEvent) {
95
83
  if (buttonProps.onClick) {
96
84
  buttonProps.onClick(event);
97
85
  }
98
-
99
86
  onClick(event, analyticsEvent);
100
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
87
+ },
88
+ // eslint-disable-next-line react-hooks/exhaustive-deps
101
89
  [buttonProps.onClick, onClick]);
102
90
  return (0, _react2.jsx)(_avatar.default, {
103
91
  appearance: appearance,
@@ -107,9 +95,9 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
107
95
  onClick: onClickHander
108
96
  }, function (_ref2) {
109
97
  var _ = _ref2.testId,
110
- className = _ref2.className,
111
- ref = _ref2.ref,
112
- props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
98
+ className = _ref2.className,
99
+ ref = _ref2.ref,
100
+ props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
113
101
  return (0, _react2.jsx)("button", (0, _extends2.default)({
114
102
  type: "submit"
115
103
  }, buttonProps, props, {
@@ -126,7 +114,8 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
126
114
  }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
127
115
  });
128
116
  });
129
- MoreIndicator.displayName = 'MoreIndicator'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
117
+ MoreIndicator.displayName = 'MoreIndicator';
130
118
 
119
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
131
120
  var _default = MoreIndicator;
132
121
  exports.default = _default;
@@ -4,37 +4,29 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _react2 = require("@emotion/react");
11
-
12
9
  var _avatar = require("@atlaskit/avatar");
13
-
14
10
  var _constants = require("@atlaskit/theme/constants");
15
-
16
11
  /** @jsx jsx */
12
+
17
13
  var gutter = _avatar.BORDER_WIDTH * 2 + (0, _constants.gridSize)() / 2;
18
14
  var listStyles = (0, _react2.css)({
19
15
  display: 'flex',
20
- // TODO Delete this comment after verifying spacing token -> previous value `0`
21
- margin: "var(--ds-scale-0, 0px)",
16
+ margin: "var(--ds-space-0, 0px)",
22
17
  marginRight: gutter,
23
- // TODO Delete this comment after verifying spacing token -> previous value `0`
24
- padding: "var(--ds-scale-0, 0px)",
18
+ padding: "var(--ds-space-0, 0px)",
25
19
  lineHeight: 1,
26
20
  listStyleType: 'none !important'
27
21
  });
28
22
  var listItemStyles = (0, _react2.css)({
29
- // TODO Delete this comment after verifying spacing token -> previous value `0`
30
- margin: "var(--ds-scale-0, 0px)",
23
+ margin: "var(--ds-space-0, 0px)",
31
24
  marginRight: -gutter
32
25
  });
33
-
34
26
  var Stack = function Stack(_ref) {
35
27
  var children = _ref.children,
36
- testId = _ref.testId,
37
- label = _ref['aria-label'];
28
+ testId = _ref.testId,
29
+ label = _ref['aria-label'];
38
30
  return (0, _react2.jsx)("ul", {
39
31
  "data-testid": testId,
40
32
  "aria-label": label,
@@ -44,8 +36,8 @@ var Stack = function Stack(_ref) {
44
36
  css: listItemStyles
45
37
  }, child);
46
38
  }));
47
- }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
48
-
39
+ };
49
40
 
41
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
50
42
  var _default = Stack;
51
43
  exports.default = _default;
@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.composeUniqueKey = void 0;
7
-
8
7
  var composeUniqueKey = function composeUniqueKey(props, index) {
9
8
  if (props.key) {
10
9
  return props.key;
11
10
  }
12
-
13
11
  return index;
14
12
  };
15
-
16
13
  exports.composeUniqueKey = composeUniqueKey;
package/dist/cjs/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
11
10
  return _avatarGroup.default;
12
11
  }
13
12
  });
14
-
15
13
  var _avatarGroup = _interopRequireDefault(require("./components/avatar-group"));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "9.2.1",
3
+ "version": "9.2.3",
4
4
  "sideEffects": false
5
5
  }
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
3
  import Avatar from '@atlaskit/avatar';
4
4
  import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
5
-
6
5
  const AvatarGroupItem = ({
7
6
  avatar,
8
7
  onAvatarClick,
@@ -14,7 +13,6 @@ const AvatarGroupItem = ({
14
13
  onClick,
15
14
  ...rest
16
15
  } = avatar;
17
-
18
16
  const CustomComponent = ({
19
17
  children,
20
18
  ...props
@@ -22,16 +20,15 @@ const AvatarGroupItem = ({
22
20
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
23
21
  return /*#__PURE__*/React.createElement("span", props, children);
24
22
  };
25
-
26
23
  const AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
27
24
  testId: testId && `${testId}--avatar`,
28
25
  borderColor: "transparent",
29
26
  size: "small",
30
27
  name: ""
31
- })); // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
28
+ }));
32
29
 
30
+ // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
33
31
  const callback = onClick || onAvatarClick;
34
-
35
32
  if (href) {
36
33
  return /*#__PURE__*/React.createElement(LinkItem, {
37
34
  href: href,
@@ -42,7 +39,6 @@ const AvatarGroupItem = ({
42
39
  onClick: event => callback && callback(event, undefined, index)
43
40
  }, avatar.name);
44
41
  }
45
-
46
42
  if (typeof callback === 'function') {
47
43
  return /*#__PURE__*/React.createElement(ButtonItem, {
48
44
  onClick: event => callback && callback(event, undefined, index),
@@ -50,13 +46,12 @@ const AvatarGroupItem = ({
50
46
  testId: testId
51
47
  }, avatar.name);
52
48
  }
53
-
54
49
  return /*#__PURE__*/React.createElement(CustomItem, {
55
50
  iconBefore: AvatarIcon,
56
51
  component: CustomComponent,
57
52
  testId: testId
58
53
  }, avatar.name);
59
- }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
60
-
54
+ };
61
55
 
56
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
62
57
  export default AvatarGroupItem;
@@ -1,5 +1,4 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
-
3
2
  /** @jsx jsx */
4
3
  import { useCallback, useState } from 'react';
5
4
  import { jsx } from '@emotion/react';
@@ -17,7 +16,6 @@ const MAX_COUNT = {
17
16
  grid: 11,
18
17
  stack: 5
19
18
  };
20
-
21
19
  function getOverrides(overrides) {
22
20
  return {
23
21
  AvatarGroupItem: {
@@ -34,6 +32,7 @@ function getOverrides(overrides) {
34
32
  }
35
33
  };
36
34
  }
35
+
37
36
  /**
38
37
  * __Avatar group__
39
38
  *
@@ -43,8 +42,6 @@ function getOverrides(overrides) {
43
42
  * - [Code](https://atlassian.design/components/avatar-group/code)
44
43
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
45
44
  */
46
-
47
-
48
45
  const AvatarGroup = ({
49
46
  appearance = 'stack',
50
47
  avatar = Avatar,
@@ -64,12 +61,10 @@ const AvatarGroup = ({
64
61
  }) => {
65
62
  const [isOpen, setIsOpen] = useState(false);
66
63
  const onClose = useCallback(() => setIsOpen(false), []);
67
-
68
64
  function renderMoreDropdown(max, total) {
69
65
  if (total <= max) {
70
66
  return null;
71
67
  }
72
-
73
68
  const renderMoreButton = props => jsx(MoreIndicator, _extends({
74
69
  buttonProps: showMoreButtonProps,
75
70
  borderColor: borderColor,
@@ -77,26 +72,23 @@ const AvatarGroup = ({
77
72
  size: size,
78
73
  testId: testId && `${testId}--overflow-menu--trigger`,
79
74
  isActive: isOpen
80
- }, props)); // bail if the consumer wants to handle onClick
81
-
75
+ }, props));
82
76
 
77
+ // bail if the consumer wants to handle onClick
83
78
  if (typeof onMoreClick === 'function') {
84
79
  return renderMoreButton({
85
80
  onClick: onMoreClick
86
81
  });
87
- } // split boundariesElement into `boundary` and `rootBoundary` props for Popup
88
-
82
+ }
89
83
 
84
+ // split boundariesElement into `boundary` and `rootBoundary` props for Popup
90
85
  const boundary = boundariesElement === 'scrollParent' ? 'clippingParents' : undefined;
91
-
92
86
  const rootBoundary = (() => {
93
87
  if (boundariesElement === 'scrollParent') {
94
88
  return undefined;
95
89
  }
96
-
97
90
  return boundariesElement === 'window' ? 'document' : 'viewport';
98
91
  })();
99
-
100
92
  return jsx(Popup, {
101
93
  isOpen: isOpen,
102
94
  onClose: onClose,
@@ -114,16 +106,17 @@ const AvatarGroup = ({
114
106
  onAvatarClick,
115
107
  testId: testId && `${testId}--avatar-group-item-${index + max}`,
116
108
  index: index + max
117
- }, // This index holds the true index,
109
+ },
110
+ // This index holds the true index,
118
111
  // adding up the index of non-overflowed avatars and overflowed avatars.
119
112
  index + max)))),
120
- trigger: triggerProps => renderMoreButton({ ...triggerProps,
113
+ trigger: triggerProps => renderMoreButton({
114
+ ...triggerProps,
121
115
  onClick: () => setIsOpen(!isOpen)
122
116
  }),
123
117
  testId: testId && `${testId}--overflow-menu`
124
118
  });
125
119
  }
126
-
127
120
  const max = maxCount === undefined || maxCount === 0 ? MAX_COUNT[appearance] : maxCount;
128
121
  const total = data.length;
129
122
  const maxAvatar = total > max ? max - 1 : max;
@@ -133,7 +126,8 @@ const AvatarGroup = ({
133
126
  "aria-label": label
134
127
  }, data.slice(0, maxAvatar).map((avatarData, idx) => {
135
128
  const callback = avatarData.onClick || onAvatarClick;
136
- const finalAvatar = getOverrides(overrides).Avatar.render(avatar, { ...avatarData,
129
+ const finalAvatar = getOverrides(overrides).Avatar.render(avatar, {
130
+ ...avatarData,
137
131
  size,
138
132
  borderColor,
139
133
  testId: testId && `${testId}--avatar-${idx}`,
@@ -150,5 +144,4 @@ const AvatarGroup = ({
150
144
  }, finalAvatar) : finalAvatar;
151
145
  }), renderMoreDropdown(+maxAvatar, total));
152
146
  };
153
-
154
147
  export default AvatarGroup;
@@ -7,28 +7,21 @@ const gutter = gridSize / 2;
7
7
  const listStyles = css({
8
8
  // removes default ul styles. Needs !important to override contextual styles in product.
9
9
  display: 'flex',
10
- // TODO Delete this comment after verifying spacing token -> previous value `0`
11
- margin: "var(--ds-scale-0, 0px)",
10
+ margin: "var(--ds-space-0, 0px)",
12
11
  marginRight: -gutter,
13
12
  marginLeft: -gutter,
14
- // TODO Delete this comment after verifying spacing token -> previous value `0`
15
- padding: "var(--ds-scale-0, 0px)",
13
+ padding: "var(--ds-space-0, 0px)",
16
14
  justifyContent: 'flex-start',
17
15
  flexWrap: 'wrap',
18
16
  lineHeight: 1,
19
17
  listStyleType: 'none !important'
20
18
  });
21
19
  const listItemStyles = css({
22
- // TODO Delete this comment after verifying spacing token -> previous value `0`
23
- margin: "var(--ds-scale-0, 0px)",
24
- // TODO Delete this comment after verifying spacing token -> previous value `gridSize`
25
- marginBottom: "var(--ds-scale-100, 8px)",
26
- // TODO Delete this comment after verifying spacing token -> previous value `gutter`
27
- paddingRight: "var(--ds-scale-050, 4px)",
28
- // TODO Delete this comment after verifying spacing token -> previous value `gutter`
29
- paddingLeft: "var(--ds-scale-050, 4px)"
20
+ margin: "var(--ds-space-0, 0px)",
21
+ marginBottom: "var(--ds-space-100, 8px)",
22
+ paddingRight: "var(--ds-space-050, 4px)",
23
+ paddingLeft: "var(--ds-space-050, 4px)"
30
24
  });
31
-
32
25
  const Grid = ({
33
26
  children,
34
27
  testId,
@@ -39,7 +32,7 @@ const Grid = ({
39
32
  css: listStyles
40
33
  }, Children.map(children, child => child && jsx("li", {
41
34
  css: listItemStyles
42
- }, child))); // eslint-disable-next-line @repo/internal/react/require-jsdoc
43
-
35
+ }, child)));
44
36
 
37
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
45
38
  export default Grid;
@@ -1,5 +1,4 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
-
3
2
  /** @jsx jsx */
4
3
  import { forwardRef, useCallback } from 'react';
5
4
  import { css, jsx } from '@emotion/react';
@@ -69,9 +68,9 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
69
68
  if (buttonProps.onClick) {
70
69
  buttonProps.onClick(event);
71
70
  }
72
-
73
71
  onClick(event, analyticsEvent);
74
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
72
+ },
73
+ // eslint-disable-next-line react-hooks/exhaustive-deps
75
74
  [buttonProps.onClick, onClick]);
76
75
  return jsx(Avatar, {
77
76
  appearance: appearance,
@@ -99,6 +98,7 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
99
98
  className: className
100
99
  }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count));
101
100
  });
102
- MoreIndicator.displayName = 'MoreIndicator'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
101
+ MoreIndicator.displayName = 'MoreIndicator';
103
102
 
103
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
104
104
  export default MoreIndicator;
@@ -6,20 +6,16 @@ import { gridSize } from '@atlaskit/theme/constants';
6
6
  const gutter = BORDER_WIDTH * 2 + gridSize() / 2;
7
7
  const listStyles = css({
8
8
  display: 'flex',
9
- // TODO Delete this comment after verifying spacing token -> previous value `0`
10
- margin: "var(--ds-scale-0, 0px)",
9
+ margin: "var(--ds-space-0, 0px)",
11
10
  marginRight: gutter,
12
- // TODO Delete this comment after verifying spacing token -> previous value `0`
13
- padding: "var(--ds-scale-0, 0px)",
11
+ padding: "var(--ds-space-0, 0px)",
14
12
  lineHeight: 1,
15
13
  listStyleType: 'none !important'
16
14
  });
17
15
  const listItemStyles = css({
18
- // TODO Delete this comment after verifying spacing token -> previous value `0`
19
- margin: "var(--ds-scale-0, 0px)",
16
+ margin: "var(--ds-space-0, 0px)",
20
17
  marginRight: -gutter
21
18
  });
22
-
23
19
  const Stack = ({
24
20
  children,
25
21
  testId,
@@ -30,7 +26,7 @@ const Stack = ({
30
26
  css: listStyles
31
27
  }, Children.map(children, child => child && jsx("li", {
32
28
  css: listItemStyles
33
- }, child))); // eslint-disable-next-line @repo/internal/react/require-jsdoc
34
-
29
+ }, child)));
35
30
 
31
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
36
32
  export default Stack;
@@ -2,6 +2,5 @@ export const composeUniqueKey = (props, index) => {
2
2
  if (props.key) {
3
3
  return props.key;
4
4
  }
5
-
6
5
  return index;
7
6
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "9.2.1",
3
+ "version": "9.2.3",
4
4
  "sideEffects": false
5
5
  }
@@ -1,38 +1,33 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["href", "onClick"],
4
- _excluded2 = ["children"];
4
+ _excluded2 = ["children"];
5
5
  import React from 'react';
6
6
  import Avatar from '@atlaskit/avatar';
7
7
  import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
8
-
9
8
  var AvatarGroupItem = function AvatarGroupItem(_ref) {
10
9
  var avatar = _ref.avatar,
11
- onAvatarClick = _ref.onAvatarClick,
12
- testId = _ref.testId,
13
- index = _ref.index;
14
-
10
+ onAvatarClick = _ref.onAvatarClick,
11
+ testId = _ref.testId,
12
+ index = _ref.index;
15
13
  var href = avatar.href,
16
- onClick = avatar.onClick,
17
- rest = _objectWithoutProperties(avatar, _excluded);
18
-
14
+ onClick = avatar.onClick,
15
+ rest = _objectWithoutProperties(avatar, _excluded);
19
16
  var CustomComponent = function CustomComponent(_ref2) {
20
17
  var children = _ref2.children,
21
- props = _objectWithoutProperties(_ref2, _excluded2);
22
-
18
+ props = _objectWithoutProperties(_ref2, _excluded2);
23
19
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
24
20
  return /*#__PURE__*/React.createElement("span", props, children);
25
21
  };
26
-
27
22
  var AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
28
23
  testId: testId && "".concat(testId, "--avatar"),
29
24
  borderColor: "transparent",
30
25
  size: "small",
31
26
  name: ""
32
- })); // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
27
+ }));
33
28
 
29
+ // onClick handler provided with avatar data takes precedence, same as with the normal avatar item
34
30
  var callback = onClick || onAvatarClick;
35
-
36
31
  if (href) {
37
32
  return /*#__PURE__*/React.createElement(LinkItem, {
38
33
  href: href,
@@ -45,7 +40,6 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
45
40
  }
46
41
  }, avatar.name);
47
42
  }
48
-
49
43
  if (typeof callback === 'function') {
50
44
  return /*#__PURE__*/React.createElement(ButtonItem, {
51
45
  onClick: function onClick(event) {
@@ -55,13 +49,12 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
55
49
  testId: testId
56
50
  }, avatar.name);
57
51
  }
58
-
59
52
  return /*#__PURE__*/React.createElement(CustomItem, {
60
53
  iconBefore: AvatarIcon,
61
54
  component: CustomComponent,
62
55
  testId: testId
63
56
  }, avatar.name);
64
- }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
65
-
57
+ };
66
58
 
59
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
67
60
  export default AvatarGroupItem;
@@ -1,11 +1,8 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
-
5
4
  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; }
6
-
7
5
  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; }
8
-
9
6
  /** @jsx jsx */
10
7
  import { useCallback, useState } from 'react';
11
8
  import { jsx } from '@emotion/react';
@@ -23,7 +20,6 @@ var MAX_COUNT = {
23
20
  grid: 11,
24
21
  stack: 5
25
22
  };
26
-
27
23
  function getOverrides(overrides) {
28
24
  return {
29
25
  AvatarGroupItem: _objectSpread({
@@ -42,6 +38,7 @@ function getOverrides(overrides) {
42
38
  }, overrides && overrides.Avatar)
43
39
  };
44
40
  }
41
+
45
42
  /**
46
43
  * __Avatar group__
47
44
  *
@@ -51,45 +48,39 @@ function getOverrides(overrides) {
51
48
  * - [Code](https://atlassian.design/components/avatar-group/code)
52
49
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
53
50
  */
54
-
55
-
56
51
  var AvatarGroup = function AvatarGroup(_ref) {
57
52
  var _ref$appearance = _ref.appearance,
58
- appearance = _ref$appearance === void 0 ? 'stack' : _ref$appearance,
59
- _ref$avatar = _ref.avatar,
60
- avatar = _ref$avatar === void 0 ? Avatar : _ref$avatar,
61
- borderColor = _ref.borderColor,
62
- boundariesElement = _ref.boundariesElement,
63
- data = _ref.data,
64
- isTooltipDisabled = _ref.isTooltipDisabled,
65
- maxCount = _ref.maxCount,
66
- onAvatarClick = _ref.onAvatarClick,
67
- onMoreClick = _ref.onMoreClick,
68
- overrides = _ref.overrides,
69
- _ref$showMoreButtonPr = _ref.showMoreButtonProps,
70
- showMoreButtonProps = _ref$showMoreButtonPr === void 0 ? {} : _ref$showMoreButtonPr,
71
- _ref$size = _ref.size,
72
- size = _ref$size === void 0 ? 'medium' : _ref$size,
73
- testId = _ref.testId,
74
- _ref$label = _ref.label,
75
- label = _ref$label === void 0 ? 'avatar group' : _ref$label,
76
- _ref$tooltipPosition = _ref.tooltipPosition,
77
- tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
78
-
53
+ appearance = _ref$appearance === void 0 ? 'stack' : _ref$appearance,
54
+ _ref$avatar = _ref.avatar,
55
+ avatar = _ref$avatar === void 0 ? Avatar : _ref$avatar,
56
+ borderColor = _ref.borderColor,
57
+ boundariesElement = _ref.boundariesElement,
58
+ data = _ref.data,
59
+ isTooltipDisabled = _ref.isTooltipDisabled,
60
+ maxCount = _ref.maxCount,
61
+ onAvatarClick = _ref.onAvatarClick,
62
+ onMoreClick = _ref.onMoreClick,
63
+ overrides = _ref.overrides,
64
+ _ref$showMoreButtonPr = _ref.showMoreButtonProps,
65
+ showMoreButtonProps = _ref$showMoreButtonPr === void 0 ? {} : _ref$showMoreButtonPr,
66
+ _ref$size = _ref.size,
67
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
68
+ testId = _ref.testId,
69
+ _ref$label = _ref.label,
70
+ label = _ref$label === void 0 ? 'avatar group' : _ref$label,
71
+ _ref$tooltipPosition = _ref.tooltipPosition,
72
+ tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
79
73
  var _useState = useState(false),
80
- _useState2 = _slicedToArray(_useState, 2),
81
- isOpen = _useState2[0],
82
- setIsOpen = _useState2[1];
83
-
74
+ _useState2 = _slicedToArray(_useState, 2),
75
+ isOpen = _useState2[0],
76
+ setIsOpen = _useState2[1];
84
77
  var onClose = useCallback(function () {
85
78
  return setIsOpen(false);
86
79
  }, []);
87
-
88
80
  function renderMoreDropdown(max, total) {
89
81
  if (total <= max) {
90
82
  return null;
91
83
  }
92
-
93
84
  var renderMoreButton = function renderMoreButton(props) {
94
85
  return jsx(MoreIndicator, _extends({
95
86
  buttonProps: showMoreButtonProps,
@@ -99,26 +90,23 @@ var AvatarGroup = function AvatarGroup(_ref) {
99
90
  testId: testId && "".concat(testId, "--overflow-menu--trigger"),
100
91
  isActive: isOpen
101
92
  }, props));
102
- }; // bail if the consumer wants to handle onClick
103
-
93
+ };
104
94
 
95
+ // bail if the consumer wants to handle onClick
105
96
  if (typeof onMoreClick === 'function') {
106
97
  return renderMoreButton({
107
98
  onClick: onMoreClick
108
99
  });
109
- } // split boundariesElement into `boundary` and `rootBoundary` props for Popup
110
-
100
+ }
111
101
 
102
+ // split boundariesElement into `boundary` and `rootBoundary` props for Popup
112
103
  var boundary = boundariesElement === 'scrollParent' ? 'clippingParents' : undefined;
113
-
114
104
  var rootBoundary = function () {
115
105
  if (boundariesElement === 'scrollParent') {
116
106
  return undefined;
117
107
  }
118
-
119
108
  return boundariesElement === 'window' ? 'document' : 'viewport';
120
109
  }();
121
-
122
110
  return jsx(Popup, {
123
111
  isOpen: isOpen,
124
112
  onClose: onClose,
@@ -140,7 +128,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
140
128
  onAvatarClick: onAvatarClick,
141
129
  testId: testId && "".concat(testId, "--avatar-group-item-").concat(index + max),
142
130
  index: index + max
143
- }, // This index holds the true index,
131
+ },
132
+ // This index holds the true index,
144
133
  // adding up the index of non-overflowed avatars and overflowed avatars.
145
134
  index + max);
146
135
  })));
@@ -155,7 +144,6 @@ var AvatarGroup = function AvatarGroup(_ref) {
155
144
  testId: testId && "".concat(testId, "--overflow-menu")
156
145
  });
157
146
  }
158
-
159
147
  var max = maxCount === undefined || maxCount === 0 ? MAX_COUNT[appearance] : maxCount;
160
148
  var total = data.length;
161
149
  var maxAvatar = total > max ? max - 1 : max;
@@ -182,5 +170,4 @@ var AvatarGroup = function AvatarGroup(_ref) {
182
170
  }, finalAvatar) : finalAvatar;
183
171
  }), renderMoreDropdown(+maxAvatar, total));
184
172
  };
185
-
186
173
  export default AvatarGroup;
@@ -7,32 +7,25 @@ var gutter = gridSize / 2;
7
7
  var listStyles = css({
8
8
  // removes default ul styles. Needs !important to override contextual styles in product.
9
9
  display: 'flex',
10
- // TODO Delete this comment after verifying spacing token -> previous value `0`
11
- margin: "var(--ds-scale-0, 0px)",
10
+ margin: "var(--ds-space-0, 0px)",
12
11
  marginRight: -gutter,
13
12
  marginLeft: -gutter,
14
- // TODO Delete this comment after verifying spacing token -> previous value `0`
15
- padding: "var(--ds-scale-0, 0px)",
13
+ padding: "var(--ds-space-0, 0px)",
16
14
  justifyContent: 'flex-start',
17
15
  flexWrap: 'wrap',
18
16
  lineHeight: 1,
19
17
  listStyleType: 'none !important'
20
18
  });
21
19
  var listItemStyles = css({
22
- // TODO Delete this comment after verifying spacing token -> previous value `0`
23
- margin: "var(--ds-scale-0, 0px)",
24
- // TODO Delete this comment after verifying spacing token -> previous value `gridSize`
25
- marginBottom: "var(--ds-scale-100, 8px)",
26
- // TODO Delete this comment after verifying spacing token -> previous value `gutter`
27
- paddingRight: "var(--ds-scale-050, 4px)",
28
- // TODO Delete this comment after verifying spacing token -> previous value `gutter`
29
- paddingLeft: "var(--ds-scale-050, 4px)"
20
+ margin: "var(--ds-space-0, 0px)",
21
+ marginBottom: "var(--ds-space-100, 8px)",
22
+ paddingRight: "var(--ds-space-050, 4px)",
23
+ paddingLeft: "var(--ds-space-050, 4px)"
30
24
  });
31
-
32
25
  var Grid = function Grid(_ref) {
33
26
  var children = _ref.children,
34
- testId = _ref.testId,
35
- label = _ref['aria-label'];
27
+ testId = _ref.testId,
28
+ label = _ref['aria-label'];
36
29
  return jsx("ul", {
37
30
  "data-testid": testId,
38
31
  "aria-label": label,
@@ -42,7 +35,7 @@ var Grid = function Grid(_ref) {
42
35
  css: listItemStyles
43
36
  }, child);
44
37
  }));
45
- }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
46
-
38
+ };
47
39
 
40
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
48
41
  export default Grid;
@@ -1,7 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["testId", "className", "ref"];
4
-
5
4
  /** @jsx jsx */
6
5
  import { forwardRef, useCallback } from 'react';
7
6
  import { css, jsx } from '@emotion/react';
@@ -56,28 +55,28 @@ var buttonStyles = css({
56
55
  var MAX_DISPLAY_COUNT = 99;
57
56
  var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
58
57
  var _ref$appearance = _ref.appearance,
59
- appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
60
- _ref$borderColor = _ref.borderColor,
61
- borderColor = _ref$borderColor === void 0 ? "var(--ds-border-inverse, ".concat(N0, ")") : _ref$borderColor,
62
- _ref$size = _ref.size,
63
- size = _ref$size === void 0 ? 'medium' : _ref$size,
64
- _ref$count = _ref.count,
65
- count = _ref$count === void 0 ? 0 : _ref$count,
66
- testId = _ref.testId,
67
- onClick = _ref.onClick,
68
- ariaControls = _ref['aria-controls'],
69
- ariaExpanded = _ref['aria-expanded'],
70
- ariaHaspopup = _ref['aria-haspopup'],
71
- _ref$buttonProps = _ref.buttonProps,
72
- buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
73
- isActive = _ref.isActive;
58
+ appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
59
+ _ref$borderColor = _ref.borderColor,
60
+ borderColor = _ref$borderColor === void 0 ? "var(--ds-border-inverse, ".concat(N0, ")") : _ref$borderColor,
61
+ _ref$size = _ref.size,
62
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
63
+ _ref$count = _ref.count,
64
+ count = _ref$count === void 0 ? 0 : _ref$count,
65
+ testId = _ref.testId,
66
+ onClick = _ref.onClick,
67
+ ariaControls = _ref['aria-controls'],
68
+ ariaExpanded = _ref['aria-expanded'],
69
+ ariaHaspopup = _ref['aria-haspopup'],
70
+ _ref$buttonProps = _ref.buttonProps,
71
+ buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
72
+ isActive = _ref.isActive;
74
73
  var onClickHander = useCallback(function (event, analyticsEvent) {
75
74
  if (buttonProps.onClick) {
76
75
  buttonProps.onClick(event);
77
76
  }
78
-
79
77
  onClick(event, analyticsEvent);
80
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
78
+ },
79
+ // eslint-disable-next-line react-hooks/exhaustive-deps
81
80
  [buttonProps.onClick, onClick]);
82
81
  return jsx(Avatar, {
83
82
  appearance: appearance,
@@ -87,10 +86,9 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
87
86
  onClick: onClickHander
88
87
  }, function (_ref2) {
89
88
  var _ = _ref2.testId,
90
- className = _ref2.className,
91
- ref = _ref2.ref,
92
- props = _objectWithoutProperties(_ref2, _excluded);
93
-
89
+ className = _ref2.className,
90
+ ref = _ref2.ref,
91
+ props = _objectWithoutProperties(_ref2, _excluded);
94
92
  return jsx("button", _extends({
95
93
  type: "submit"
96
94
  }, buttonProps, props, {
@@ -107,6 +105,7 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
107
105
  }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
108
106
  });
109
107
  });
110
- MoreIndicator.displayName = 'MoreIndicator'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
108
+ MoreIndicator.displayName = 'MoreIndicator';
111
109
 
110
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
112
111
  export default MoreIndicator;
@@ -6,24 +6,20 @@ import { gridSize } from '@atlaskit/theme/constants';
6
6
  var gutter = BORDER_WIDTH * 2 + gridSize() / 2;
7
7
  var listStyles = css({
8
8
  display: 'flex',
9
- // TODO Delete this comment after verifying spacing token -> previous value `0`
10
- margin: "var(--ds-scale-0, 0px)",
9
+ margin: "var(--ds-space-0, 0px)",
11
10
  marginRight: gutter,
12
- // TODO Delete this comment after verifying spacing token -> previous value `0`
13
- padding: "var(--ds-scale-0, 0px)",
11
+ padding: "var(--ds-space-0, 0px)",
14
12
  lineHeight: 1,
15
13
  listStyleType: 'none !important'
16
14
  });
17
15
  var listItemStyles = css({
18
- // TODO Delete this comment after verifying spacing token -> previous value `0`
19
- margin: "var(--ds-scale-0, 0px)",
16
+ margin: "var(--ds-space-0, 0px)",
20
17
  marginRight: -gutter
21
18
  });
22
-
23
19
  var Stack = function Stack(_ref) {
24
20
  var children = _ref.children,
25
- testId = _ref.testId,
26
- label = _ref['aria-label'];
21
+ testId = _ref.testId,
22
+ label = _ref['aria-label'];
27
23
  return jsx("ul", {
28
24
  "data-testid": testId,
29
25
  "aria-label": label,
@@ -33,7 +29,7 @@ var Stack = function Stack(_ref) {
33
29
  css: listItemStyles
34
30
  }, child);
35
31
  }));
36
- }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
37
-
32
+ };
38
33
 
34
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
39
35
  export default Stack;
@@ -2,6 +2,5 @@ export var composeUniqueKey = function composeUniqueKey(props, index) {
2
2
  if (props.key) {
3
3
  return props.key;
4
4
  }
5
-
6
5
  return index;
7
6
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "9.2.1",
3
+ "version": "9.2.3",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "9.2.1",
3
+ "version": "9.2.3",
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/"
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/menu": "^1.4.0",
32
32
  "@atlaskit/popup": "^1.5.0",
33
33
  "@atlaskit/theme": "^12.2.0",
34
- "@atlaskit/tokens": "^0.13.0",
34
+ "@atlaskit/tokens": "^1.0.0",
35
35
  "@atlaskit/tooltip": "^17.6.0",
36
36
  "@babel/runtime": "^7.0.0",
37
37
  "@emotion/react": "^11.7.1"