@atlaskit/avatar-group 9.2.1 → 9.2.2
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 +6 -0
- package/dist/cjs/components/avatar-group-item.js +11 -24
- package/dist/cjs/components/avatar-group.js +30 -59
- package/dist/cjs/components/grid.js +11 -21
- package/dist/cjs/components/more-indicator.js +22 -33
- package/dist/cjs/components/stack.js +8 -16
- package/dist/cjs/components/utils.js +0 -3
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/avatar-group-item.js +4 -9
- package/dist/es2019/components/avatar-group.js +11 -18
- package/dist/es2019/components/grid.js +8 -15
- package/dist/es2019/components/more-indicator.js +4 -4
- package/dist/es2019/components/stack.js +5 -9
- package/dist/es2019/components/utils.js +0 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/avatar-group-item.js +11 -18
- package/dist/esm/components/avatar-group.js +30 -43
- package/dist/esm/components/grid.js +10 -17
- package/dist/esm/components/more-indicator.js +22 -23
- package/dist/esm/components/stack.js +7 -11
- package/dist/esm/components/utils.js +0 -1
- package/dist/esm/version.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/avatar-group
|
|
2
2
|
|
|
3
|
+
## 9.2.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
|
|
8
|
+
|
|
3
9
|
## 9.2.1
|
|
4
10
|
|
|
5
11
|
### 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
|
-
|
|
22
|
-
|
|
14
|
+
_excluded2 = ["children"];
|
|
23
15
|
var AvatarGroupItem = function AvatarGroupItem(_ref) {
|
|
24
16
|
var avatar = _ref.avatar,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
onAvatarClick = _ref.onAvatarClick,
|
|
18
|
+
testId = _ref.testId,
|
|
19
|
+
index = _ref.index;
|
|
28
20
|
var href = avatar.href,
|
|
29
|
-
|
|
30
|
-
|
|
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
|
-
|
|
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
|
-
}));
|
|
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
|
-
};
|
|
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
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
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
|
-
|
|
103
|
-
|
|
104
|
-
|
|
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
|
-
};
|
|
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
|
-
}
|
|
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
|
-
},
|
|
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
|
-
|
|
21
|
-
margin: "var(--ds-scale-0, 0px)",
|
|
17
|
+
margin: "var(--ds-space-0, 0px)",
|
|
22
18
|
marginRight: -gutter,
|
|
23
19
|
marginLeft: -gutter,
|
|
24
|
-
|
|
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
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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
|
-
|
|
45
|
-
|
|
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
|
-
};
|
|
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
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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
|
-
},
|
|
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
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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';
|
|
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
|
-
|
|
21
|
-
margin: "var(--ds-scale-0, 0px)",
|
|
16
|
+
margin: "var(--ds-space-0, 0px)",
|
|
22
17
|
marginRight: gutter,
|
|
23
|
-
|
|
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
|
-
|
|
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
|
-
|
|
37
|
-
|
|
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
|
-
};
|
|
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"));
|
package/dist/cjs/version.json
CHANGED
|
@@ -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
|
-
}));
|
|
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
|
-
};
|
|
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));
|
|
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
|
-
}
|
|
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
|
-
},
|
|
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({
|
|
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, {
|
|
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
|
-
|
|
11
|
-
margin: "var(--ds-scale-0, 0px)",
|
|
10
|
+
margin: "var(--ds-space-0, 0px)",
|
|
12
11
|
marginRight: -gutter,
|
|
13
12
|
marginLeft: -gutter,
|
|
14
|
-
|
|
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
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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)));
|
|
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
|
-
},
|
|
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';
|
|
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
|
-
|
|
10
|
-
margin: "var(--ds-scale-0, 0px)",
|
|
9
|
+
margin: "var(--ds-space-0, 0px)",
|
|
11
10
|
marginRight: gutter,
|
|
12
|
-
|
|
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
|
-
|
|
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)));
|
|
34
|
-
|
|
29
|
+
}, child)));
|
|
35
30
|
|
|
31
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
36
32
|
export default Stack;
|
package/dist/es2019/version.json
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
onAvatarClick = _ref.onAvatarClick,
|
|
11
|
+
testId = _ref.testId,
|
|
12
|
+
index = _ref.index;
|
|
15
13
|
var href = avatar.href,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
onClick = avatar.onClick,
|
|
15
|
+
rest = _objectWithoutProperties(avatar, _excluded);
|
|
19
16
|
var CustomComponent = function CustomComponent(_ref2) {
|
|
20
17
|
var children = _ref2.children,
|
|
21
|
-
|
|
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
|
-
}));
|
|
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
|
-
};
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
-
};
|
|
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
|
-
}
|
|
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
|
-
},
|
|
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
|
-
|
|
11
|
-
margin: "var(--ds-scale-0, 0px)",
|
|
10
|
+
margin: "var(--ds-space-0, 0px)",
|
|
12
11
|
marginRight: -gutter,
|
|
13
12
|
marginLeft: -gutter,
|
|
14
|
-
|
|
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
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
-
|
|
35
|
-
|
|
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
|
-
};
|
|
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
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
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
|
-
},
|
|
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
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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';
|
|
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
|
-
|
|
10
|
-
margin: "var(--ds-scale-0, 0px)",
|
|
9
|
+
margin: "var(--ds-space-0, 0px)",
|
|
11
10
|
marginRight: gutter,
|
|
12
|
-
|
|
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
|
-
|
|
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
|
-
|
|
26
|
-
|
|
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
|
-
};
|
|
37
|
-
|
|
32
|
+
};
|
|
38
33
|
|
|
34
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
39
35
|
export default Stack;
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED