@atlaskit/avatar 21.3.9 → 21.4.0

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,65 +1,71 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 21.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#40977](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40977) [`994a98df01b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/994a98df01b) - Introduce `as` prop for customising the wrapping element
8
+
3
9
  ## 21.3.9
4
10
 
5
11
  ### Patch Changes
6
12
 
7
- - [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
13
+ - [#38162](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38162) [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
8
14
  - Updated dependencies
9
15
 
10
16
  ## 21.3.8
11
17
 
12
18
  ### Patch Changes
13
19
 
14
- - [`7a3cbead067`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a3cbead067) - Default content for label
20
+ - [#38336](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38336) [`7a3cbead067`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a3cbead067) - Default content for label
15
21
 
16
22
  ## 21.3.7
17
23
 
18
24
  ### Patch Changes
19
25
 
20
- - [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
26
+ - [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754) [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
21
27
 
22
28
  ## 21.3.6
23
29
 
24
30
  ### Patch Changes
25
31
 
26
- - [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
32
+ - [#35441](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35441) [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
27
33
 
28
34
  ## 21.3.5
29
35
 
30
36
  ### Patch Changes
31
37
 
32
- - [`342bd17ba74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/342bd17ba74) - Fix presence and status props being expanded to all strings instead of the allowed values.
38
+ - [#36027](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36027) [`342bd17ba74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/342bd17ba74) - Fix presence and status props being expanded to all strings instead of the allowed values.
33
39
 
34
40
  ## 21.3.4
35
41
 
36
42
  ### Patch Changes
37
43
 
38
- - [`abf69e9a4f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abf69e9a4f6) - Removes usage of deprecated theme mixins in favor of static token / color usage.
44
+ - [#34811](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34811) [`abf69e9a4f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abf69e9a4f6) - Removes usage of deprecated theme mixins in favor of static token / color usage.
39
45
 
40
46
  ## 21.3.3
41
47
 
42
48
  ### Patch Changes
43
49
 
44
- - [`e2d375fa634`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2d375fa634) - Refactor how some internal styles are applied; no functional changes.
50
+ - [#34804](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34804) [`e2d375fa634`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2d375fa634) - Refactor how some internal styles are applied; no functional changes.
45
51
 
46
52
  ## 21.3.2
47
53
 
48
54
  ### Patch Changes
49
55
 
50
- - [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
56
+ - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
51
57
 
52
58
  ## 21.3.1
53
59
 
54
60
  ### Patch Changes
55
61
 
56
- - [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
62
+ - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
57
63
 
58
64
  ## 21.3.0
59
65
 
60
66
  ### Minor Changes
61
67
 
62
- - [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
68
+ - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
63
69
 
64
70
  ### Patch Changes
65
71
 
@@ -69,13 +75,13 @@
69
75
 
70
76
  ### Patch Changes
71
77
 
72
- - [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
78
+ - [#32211](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32211) [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
73
79
 
74
80
  ## 21.2.0
75
81
 
76
82
  ### Minor Changes
77
83
 
78
- - [`51928bbe70c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51928bbe70c) - [ux] Removes status/presence indicator images from the accessibility tree for the Avatar component.
84
+ - [#30248](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/30248) [`51928bbe70c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51928bbe70c) - [ux] Removes status/presence indicator images from the accessibility tree for the Avatar component.
79
85
 
80
86
  ### Patch Changes
81
87
 
@@ -86,7 +92,7 @@
86
92
 
87
93
  ### Patch Changes
88
94
 
89
- - [`5aab9bfc96c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5aab9bfc96c) - Replace gridSize in spacing values with corresponding spacing tokens
95
+ - [#30134](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/30134) [`5aab9bfc96c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5aab9bfc96c) - Replace gridSize in spacing values with corresponding spacing tokens
90
96
 
91
97
  ## 21.1.9
92
98
 
@@ -104,13 +110,13 @@
104
110
 
105
111
  ### Patch Changes
106
112
 
107
- - [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
113
+ - [#29390](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29390) [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
108
114
 
109
115
  ## 21.1.6
110
116
 
111
117
  ### Patch Changes
112
118
 
113
- - [`4ee60bafc6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ee60bafc6d) - ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add `allowedSideEffects` when loading the page.
119
+ - [#29227](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29227) [`4ee60bafc6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ee60bafc6d) - ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add `allowedSideEffects` when loading the page.
114
120
 
115
121
  ## 21.1.5
116
122
 
@@ -134,19 +140,19 @@
134
140
 
135
141
  ### Patch Changes
136
142
 
137
- - [`47f0e63c935`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f0e63c935) - Internal changes to apply spacing tokens. This should be a no-op change.
143
+ - [#26699](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26699) [`47f0e63c935`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f0e63c935) - Internal changes to apply spacing tokens. This should be a no-op change.
138
144
 
139
145
  ## 21.1.1
140
146
 
141
147
  ### Patch Changes
142
148
 
143
- - [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
149
+ - [#26488](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26488) [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
144
150
 
145
151
  ## 21.1.0
146
152
 
147
153
  ### Minor Changes
148
154
 
149
- - [`c1d012d6d20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1d012d6d20) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behaviour change.
155
+ - [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710) [`c1d012d6d20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1d012d6d20) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behaviour change.
150
156
 
151
157
  ### Patch Changes
152
158
 
@@ -156,25 +162,25 @@
156
162
 
157
163
  ### Patch Changes
158
164
 
159
- - [`f9cd9e55e43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9cd9e55e43) - Update to disabled tokens which slightly affects the opacity in disabled states
165
+ - [#24968](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24968) [`f9cd9e55e43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9cd9e55e43) - Update to disabled tokens which slightly affects the opacity in disabled states
160
166
 
161
167
  ## 21.0.2
162
168
 
163
169
  ### Patch Changes
164
170
 
165
- - [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
171
+ - [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
166
172
 
167
173
  ## 21.0.1
168
174
 
169
175
  ### Patch Changes
170
176
 
171
- - [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
177
+ - [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
172
178
 
173
179
  ## 21.0.0
174
180
 
175
181
  ### Major Changes
176
182
 
177
- - [`92bb02bc46b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92bb02bc46b) - [ux] There are **no code changes required** to consume this major, but you should be aware that internal changes have been made to how `@atlaskit/avatar` loads images.
183
+ - [#21570](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21570) [`92bb02bc46b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92bb02bc46b) - [ux] There are **no code changes required** to consume this major, but you should be aware that internal changes have been made to how `@atlaskit/avatar` loads images.
178
184
 
179
185
  Before, the image loading behaviour was written in JS. Now, it leans on a standard HTML `img` tag if you provide a `src` prop, allowing it to rely on the browser to optimise the loading. These changes should result in faster image loading and an improved server-side rendering story.
180
186
 
@@ -194,7 +200,7 @@
194
200
 
195
201
  ### Patch Changes
196
202
 
197
- - [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
203
+ - [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
198
204
 
199
205
  ## 20.5.8
200
206
 
@@ -218,7 +224,7 @@
218
224
 
219
225
  ### Patch Changes
220
226
 
221
- - [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
227
+ - [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
222
228
 
223
229
  ## 20.5.4
224
230
 
@@ -237,7 +243,7 @@
237
243
 
238
244
  ### Patch Changes
239
245
 
240
- - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
246
+ - [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
241
247
  - Updated dependencies
242
248
 
243
249
  ## 20.5.1
@@ -250,7 +256,7 @@
250
256
 
251
257
  ### Minor Changes
252
258
 
253
- - [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Fix avatar focus ring in windows high contrast mode
259
+ - [#14319](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/14319) [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Fix avatar focus ring in windows high contrast mode
254
260
 
255
261
  ### Patch Changes
256
262
 
@@ -266,7 +272,7 @@
266
272
 
267
273
  ### Patch Changes
268
274
 
269
- - [`0a759df738f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0a759df738f) - When Avatar is not interactive and no `name` prop is provided, `role` and an empty `aria-label` attributes are not rendered anymore. Screen readers consider these images as decorative now and doesn't announce them as "Unlabeled image".
275
+ - [#13864](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13864) [`0a759df738f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0a759df738f) - When Avatar is not interactive and no `name` prop is provided, `role` and an empty `aria-label` attributes are not rendered anymore. Screen readers consider these images as decorative now and doesn't announce them as "Unlabeled image".
270
276
  - [`016d19b8038`](https://bitbucket.org/atlassian/atlassian-frontend/commits/016d19b8038) - [ux] When avatars are disabled they no longer will appear as interactive.
271
277
  - Updated dependencies
272
278
 
@@ -274,7 +280,7 @@
274
280
 
275
281
  ### Minor Changes
276
282
 
277
- - [`cb101fd1d29`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb101fd1d29) - [ux] Colors are now sourced through tokens.
283
+ - [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302) [`cb101fd1d29`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb101fd1d29) - [ux] Colors are now sourced through tokens.
278
284
 
279
285
  ### Patch Changes
280
286
 
@@ -284,26 +290,26 @@
284
290
 
285
291
  ### Patch Changes
286
292
 
287
- - [`0d0ecc6e790`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d0ecc6e790) - Corrects eslint supressions.
293
+ - [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837) [`0d0ecc6e790`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d0ecc6e790) - Corrects eslint supressions.
288
294
  - Updated dependencies
289
295
 
290
296
  ## 20.3.2
291
297
 
292
298
  ### Patch Changes
293
299
 
294
- - [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
300
+ - [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
295
301
 
296
302
  ## 20.3.1
297
303
 
298
304
  ### Patch Changes
299
305
 
300
- - [`34992526ab4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34992526ab4) - Removes duplicate dependency (@atlaskit/tooltip) from dependency array.
306
+ - [#11649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11649) [`34992526ab4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34992526ab4) - Removes duplicate dependency (@atlaskit/tooltip) from dependency array.
301
307
 
302
308
  ## 20.3.0
303
309
 
304
310
  ### Minor Changes
305
311
 
306
- - [`8f84c89cad5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f84c89cad5) - [ux] The styles of overflow button of avatar group has been aligned with default button styles. Also, contrast issue of the button has been fixed.
312
+ - [#11113](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11113) [`8f84c89cad5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f84c89cad5) - [ux] The styles of overflow button of avatar group has been aligned with default button styles. Also, contrast issue of the button has been fixed.
307
313
 
308
314
  ### Patch Changes
309
315
 
@@ -322,20 +328,20 @@
322
328
 
323
329
  ### Patch Changes
324
330
 
325
- - [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
331
+ - [#8644](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8644) [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
326
332
  - Updated dependencies
327
333
 
328
334
  ## 20.2.1
329
335
 
330
336
  ### Patch Changes
331
337
 
332
- - [`e177a840b13`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e177a840b13) - Fix flickering of cached avatar images on mount
338
+ - [#8710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8710) [`e177a840b13`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e177a840b13) - Fix flickering of cached avatar images on mount
333
339
 
334
340
  ## 20.2.0
335
341
 
336
342
  ### Minor Changes
337
343
 
338
- - [`1a8fcbf9878`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a8fcbf9878) - [ux] Avatar and AvatarItem now accept a label prop which allows the components to be accessible when viewed in a screen reader. The isDisabled prop now correctly generates the appropriate markup (was a span, now a disabled button) for screen reader users.
344
+ - [#8178](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8178) [`1a8fcbf9878`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a8fcbf9878) - [ux] Avatar and AvatarItem now accept a label prop which allows the components to be accessible when viewed in a screen reader. The isDisabled prop now correctly generates the appropriate markup (was a span, now a disabled button) for screen reader users.
339
345
 
340
346
  ### Patch Changes
341
347
 
@@ -346,13 +352,13 @@
346
352
 
347
353
  ### Patch Changes
348
354
 
349
- - [`fe59fc62a58`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe59fc62a58) - Increased the contrast for the fallback icon of the Avatar package so that it passes WCAG AA contrast requirements.
355
+ - [#7762](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/7762) [`fe59fc62a58`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe59fc62a58) - Increased the contrast for the fallback icon of the Avatar package so that it passes WCAG AA contrast requirements.
350
356
 
351
357
  ## 20.1.0
352
358
 
353
359
  ### Minor Changes
354
360
 
355
- - [`4f9e6e2db5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f9e6e2db5) - These packages now have defined entry points -- this means that you cannot access internal files in the packages that are not meant to be public. Sub-components in these packages have been explicitly defined, aiding tree-shaking and reducing bundle size.
361
+ - [#7170](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/7170) [`4f9e6e2db5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f9e6e2db5) - These packages now have defined entry points -- this means that you cannot access internal files in the packages that are not meant to be public. Sub-components in these packages have been explicitly defined, aiding tree-shaking and reducing bundle size.
356
362
 
357
363
  ### Patch Changes
358
364
 
@@ -362,19 +368,19 @@
362
368
 
363
369
  ### Patch Changes
364
370
 
365
- - [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
371
+ - [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
366
372
 
367
373
  ## 20.0.7
368
374
 
369
375
  ### Patch Changes
370
376
 
371
- - [`5c1b4d64ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c1b4d64ef) - [ux] There were two browser specific issues in avatar component. 1- Misalignment in firefox (Interactive button avatar is incorrectly aligned) — To fix this we added font-size and font-family to button element. 2- Hover issue in safari (On hover avatar was showing rectangular background) — To fix this we have added border radius to avatar on hover.
377
+ - [#6228](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/6228) [`5c1b4d64ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c1b4d64ef) - [ux] There were two browser specific issues in avatar component. 1- Misalignment in firefox (Interactive button avatar is incorrectly aligned) — To fix this we added font-size and font-family to button element. 2- Hover issue in safari (On hover avatar was showing rectangular background) — To fix this we have added border radius to avatar on hover.
372
378
 
373
379
  ## 20.0.6
374
380
 
375
381
  ### Patch Changes
376
382
 
377
- - [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
383
+ - [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
378
384
  This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
379
385
  Also add `typescript` to `devDependencies` to denote version that the package was built with.
380
386
 
@@ -394,7 +400,7 @@
394
400
 
395
401
  ### Patch Changes
396
402
 
397
- - [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
403
+ - [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
398
404
 
399
405
  Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
400
406
  to prevent duplicates of tslib being bundled.
@@ -403,19 +409,19 @@
403
409
 
404
410
  ### Patch Changes
405
411
 
406
- - [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
412
+ - [#3293](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3293) [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
407
413
 
408
414
  ## 20.0.1
409
415
 
410
416
  ### Patch Changes
411
417
 
412
- - [`dfd7418707`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfd7418707) - Added types for function parameters in the Presence, Status and Skeleton avatar sub-components. Without these types we were unable to generate prop tables in the documentation site using `extract-react-types`.
418
+ - [#4044](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4044) [`dfd7418707`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfd7418707) - Added types for function parameters in the Presence, Status and Skeleton avatar sub-components. Without these types we were unable to generate prop tables in the documentation site using `extract-react-types`.
413
419
 
414
420
  ## 20.0.0
415
421
 
416
422
  ### Major Changes
417
423
 
418
- - [`cde426961a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cde426961a) - Changes to Avatar in this release are intended to provide users with more flexible and performant customization options.
424
+ - [#3428](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3428) [`cde426961a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cde426961a) - Changes to Avatar in this release are intended to provide users with more flexible and performant customization options.
419
425
 
420
426
  Previously Avatars could only be customized like so:
421
427
 
@@ -450,7 +456,7 @@
450
456
  `npx @atlaskit/codemod-cli --parser [PARSER] --extensions [FILE_EXTENSIONS] [TARGET_PATH]`
451
457
 
452
458
  Or run `npx @atlaskit/codemod-cli -h` for more details on usage.
453
- For Atlassians, refer to [this doc](https://developer.atlassian.com/cloud/framework/atlassian-frontend/codemods/01-atlassian-codemods/) for more details on the codemod CLI.
459
+ For Atlassians, refer to [this doc](https://hello.atlassian.net/wiki/spaces/AF/pages/2627171992/Codemods) for more details on the codemod CLI.
454
460
 
455
461
  **Change summary:**
456
462
 
@@ -471,7 +477,7 @@
471
477
 
472
478
  ### Major Changes
473
479
 
474
- - [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
480
+ - [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
475
481
  For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
476
482
 
477
483
  ### Patch Changes
@@ -482,20 +488,20 @@
482
488
 
483
489
  ### Patch Changes
484
490
 
485
- - [`1c401b41d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c401b41d6) - Codemod updated to target the correct avatarItem prop name
491
+ - [#2443](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2443) [`1c401b41d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c401b41d6) - Codemod updated to target the correct avatarItem prop name
486
492
  - [`e3cb6026bc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3cb6026bc) - Updates the v18 codemod to ensure it doesnt format files that are not relevant
487
493
 
488
494
  ## 18.0.1
489
495
 
490
496
  ### Patch Changes
491
497
 
492
- - [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
498
+ - [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
493
499
 
494
500
  ## 18.0.0
495
501
 
496
502
  ### Major Changes
497
503
 
498
- - [`b1fa2d6d1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1fa2d6d1c) - Avatar has been refactored to improve performance and be compliant with the lite-mode specification.
504
+ - [#2137](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2137) [`b1fa2d6d1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1fa2d6d1c) - Avatar has been refactored to improve performance and be compliant with the lite-mode specification.
499
505
  Since there are significant prop and API changes, we will be providing a codemod to help consumers upgrade their components.
500
506
 
501
507
  To run the codemod:
@@ -19,10 +19,10 @@ var _utilities = require("./utilities");
19
19
  var _templateObject;
20
20
  /** @jsx jsx */
21
21
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
22
- 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; }
23
- 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; }
22
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
24
  var packageName = "@atlaskit/avatar";
25
- var packageVersion = "21.3.9";
25
+ var packageVersion = "21.4.0";
26
26
 
27
27
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
28
28
 
@@ -67,7 +67,9 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
67
67
  stackIndex = _ref2.stackIndex,
68
68
  status = _ref2.status,
69
69
  target = _ref2.target,
70
- testId = _ref2.testId;
70
+ testId = _ref2.testId,
71
+ _ref2$as = _ref2.as,
72
+ AvatarContainer = _ref2$as === void 0 ? 'div' : _ref2$as;
71
73
  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
72
74
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
73
75
  var customPresenceNode = /*#__PURE__*/(0, _react.isValidElement)(presence) ? presence : null;
@@ -141,7 +143,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
141
143
  }
142
144
  return "".concat(name || '', " ").concat(isStatus && !customStatusNode ? "(".concat(status, ")") : '', " ").concat(isPresence && !customPresenceNode ? "(".concat(presence, ")") : '');
143
145
  };
144
- return (0, _react2.jsx)("div", {
146
+ return (0, _react2.jsx)(AvatarContainer, {
145
147
  "data-testid": testId,
146
148
  style: {
147
149
  display: 'inline-block',
@@ -188,5 +190,4 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
188
190
  }, customStatusNode));
189
191
  });
190
192
  Avatar.displayName = 'Avatar';
191
- var _default = Avatar;
192
- exports.default = _default;
193
+ var _default = exports.default = Avatar;
@@ -13,12 +13,10 @@ var _person = _interopRequireDefault(require("@atlaskit/icon/glyph/person"));
13
13
  var _ship = _interopRequireDefault(require("@atlaskit/icon/glyph/ship"));
14
14
  var _colors = require("@atlaskit/theme/colors");
15
15
  var _constants = require("./constants");
16
- 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; }
17
- 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; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
18
- var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
19
- exports.ICON_BACKGROUND = ICON_BACKGROUND;
20
- var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
21
- exports.ICON_COLOR = ICON_COLOR;
16
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
17
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
18
+ var ICON_BACKGROUND = exports.ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
19
+ var ICON_COLOR = exports.ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
22
20
  var avatarDefaultIconStyles = (0, _react2.css)({
23
21
  display: 'block',
24
22
  width: '100%',
@@ -94,5 +92,4 @@ var AvatarImage = function AvatarImage(_ref3) {
94
92
  }
95
93
  });
96
94
  };
97
- var _default = AvatarImage;
98
- exports.default = _default;
95
+ var _default = exports.default = AvatarImage;
@@ -17,8 +17,8 @@ var _utilities = require("./utilities");
17
17
  var _templateObject;
18
18
  /** @jsx jsx */
19
19
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
20
- 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; }
21
- 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; }
20
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
21
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
22
22
  var avatarItemStyles = (0, _react2.css)({
23
23
  minWidth: 0,
24
24
  maxWidth: '100%',
@@ -102,5 +102,4 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
102
102
  });
103
103
  });
104
104
  AvatarItem.displayName = 'AvatarItem';
105
- var _default = AvatarItem;
106
- exports.default = _default;
105
+ var _default = exports.default = AvatarItem;
@@ -41,5 +41,4 @@ var IconWrapper = function IconWrapper(_ref) {
41
41
  }
42
42
  }, children);
43
43
  };
44
- var _default = IconWrapper;
45
- exports.default = _default;
44
+ var _default = exports.default = IconWrapper;
@@ -78,14 +78,13 @@ var AvatarPresence = function AvatarPresence(_ref) {
78
78
  xmlns: "http://www.w3.org/2000/svg"
79
79
  }, getPresence(presence)) : children);
80
80
  };
81
- var _default = AvatarPresence;
82
- exports.default = _default;
81
+ var _default = exports.default = AvatarPresence;
83
82
  /**
84
83
  * __Presence wrapper__
85
84
  *
86
85
  * A presence wrapper is used internally to position presence ontop of the avatar.
87
86
  */
88
- var PresenceWrapper = function PresenceWrapper(_ref2) {
87
+ var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2) {
89
88
  var size = _ref2.size,
90
89
  appearance = _ref2.appearance,
91
90
  children = _ref2.children,
@@ -108,5 +107,4 @@ var PresenceWrapper = function PresenceWrapper(_ref2) {
108
107
  borderColor: borderColor,
109
108
  presence: !children ? presence : undefined
110
109
  }, children));
111
- };
112
- exports.PresenceWrapper = PresenceWrapper;
110
+ };
@@ -9,8 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = require("@emotion/react");
11
11
  var _constants = require("./constants");
12
- 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; }
13
- 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; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
12
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
14
14
  var skeletonStyles = (0, _react.css)({
15
15
  display: 'inline-block',
16
16
  backgroundColor: "var(".concat(_constants.CSS_VAR_AVATAR_BGCOLOR, ")"),
@@ -64,5 +64,4 @@ var Skeleton = function Skeleton(_ref5) {
64
64
  style: (0, _defineProperty2.default)({}, _constants.CSS_VAR_AVATAR_BGCOLOR, color !== null && color !== void 0 ? color : 'currentColor')
65
65
  });
66
66
  };
67
- var _default = Skeleton;
68
- exports.default = _default;
67
+ var _default = exports.default = Skeleton;
@@ -76,14 +76,13 @@ var AvatarStatus = function AvatarStatus(_ref) {
76
76
  xmlns: "http://www.w3.org/2000/svg"
77
77
  }, getStatus(status)) : children);
78
78
  };
79
- var _default = AvatarStatus;
80
- exports.default = _default;
79
+ var _default = exports.default = AvatarStatus;
81
80
  /**
82
81
  * Status wrapper**
83
82
  *
84
83
  * A status wrapper is used internally to position status ontop of the avatar.
85
84
  */
86
- var StatusWrapper = function StatusWrapper(_ref2) {
85
+ var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
87
86
  var size = _ref2.size,
88
87
  status = _ref2.status,
89
88
  appearance = _ref2.appearance,
@@ -105,5 +104,4 @@ var StatusWrapper = function StatusWrapper(_ref2) {
105
104
  borderColor: borderColor,
106
105
  status: !children ? status : undefined
107
106
  }, children));
108
- };
109
- exports.StatusWrapper = StatusWrapper;
107
+ };
package/dist/cjs/Text.js CHANGED
@@ -37,5 +37,4 @@ var Text = function Text(_ref) {
37
37
  css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
38
38
  }, children);
39
39
  };
40
- var _default = Text;
41
- exports.default = _default;
40
+ var _default = exports.default = Text;
@@ -7,7 +7,7 @@ exports.ICON_SIZES = exports.ICON_OFFSET = exports.CSS_VAR_AVATAR_BGCOLOR = expo
7
7
  var _constants = require("@atlaskit/theme/constants");
8
8
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
9
9
 
10
- var AVATAR_SIZES = {
10
+ var AVATAR_SIZES = exports.AVATAR_SIZES = {
11
11
  xsmall: (0, _constants.gridSize)() * 2,
12
12
  small: (0, _constants.gridSize)() * 3,
13
13
  medium: (0, _constants.gridSize)() * 4,
@@ -17,8 +17,7 @@ var AVATAR_SIZES = {
17
17
  };
18
18
 
19
19
  // border radius only applies to "square" avatars
20
- exports.AVATAR_SIZES = AVATAR_SIZES;
21
- var AVATAR_RADIUS = {
20
+ var AVATAR_RADIUS = exports.AVATAR_RADIUS = {
22
21
  xsmall: 2,
23
22
  small: 2,
24
23
  medium: 3,
@@ -26,24 +25,18 @@ var AVATAR_RADIUS = {
26
25
  xlarge: 6,
27
26
  xxlarge: 12
28
27
  };
29
- exports.AVATAR_RADIUS = AVATAR_RADIUS;
30
- var BORDER_WIDTH = 2;
31
- exports.BORDER_WIDTH = BORDER_WIDTH;
32
- var ACTIVE_SCALE_FACTOR = 0.9;
33
- exports.ACTIVE_SCALE_FACTOR = ACTIVE_SCALE_FACTOR;
34
- var CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
35
- exports.CSS_VAR_AVATAR_BGCOLOR = CSS_VAR_AVATAR_BGCOLOR;
36
- var ICON_SIZES = {
28
+ var BORDER_WIDTH = exports.BORDER_WIDTH = 2;
29
+ var ACTIVE_SCALE_FACTOR = exports.ACTIVE_SCALE_FACTOR = 0.9;
30
+ var CSS_VAR_AVATAR_BGCOLOR = exports.CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
31
+ var ICON_SIZES = exports.ICON_SIZES = {
37
32
  small: 12,
38
33
  medium: 14,
39
34
  large: 15,
40
35
  xlarge: 18
41
36
  };
42
- exports.ICON_SIZES = ICON_SIZES;
43
- var ICON_OFFSET = {
37
+ var ICON_OFFSET = exports.ICON_OFFSET = {
44
38
  small: 0,
45
39
  medium: 0,
46
40
  large: 1,
47
41
  xlarge: 7
48
- };
49
- exports.ICON_OFFSET = ICON_OFFSET;
42
+ };
@@ -6,22 +6,20 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.getLinkProps = exports.getCustomElement = exports.getButtonProps = void 0;
7
7
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
8
8
 
9
- var getLinkProps = function getLinkProps(href, target) {
9
+ var getLinkProps = exports.getLinkProps = function getLinkProps(href, target) {
10
10
  return {
11
11
  href: href,
12
12
  rel: target === '_blank' ? 'noopener noreferrer' : null,
13
13
  target: target
14
14
  };
15
15
  };
16
- exports.getLinkProps = getLinkProps;
17
- var getButtonProps = function getButtonProps(onClick) {
16
+ var getButtonProps = exports.getButtonProps = function getButtonProps(onClick) {
18
17
  return {
19
18
  type: 'button',
20
19
  onClick: onClick
21
20
  };
22
21
  };
23
- exports.getButtonProps = getButtonProps;
24
- var getCustomElement = function getCustomElement(isDisabled, href, onClick) {
22
+ var getCustomElement = exports.getCustomElement = function getCustomElement(isDisabled, href, onClick) {
25
23
  if (href && !isDisabled) {
26
24
  return 'a';
27
25
  }
@@ -29,5 +27,4 @@ var getCustomElement = function getCustomElement(isDisabled, href, onClick) {
29
27
  return 'button';
30
28
  }
31
29
  return 'span';
32
- };
33
- exports.getCustomElement = getCustomElement;
30
+ };
@@ -10,7 +10,7 @@ import { PresenceWrapper } from './Presence';
10
10
  import { StatusWrapper } from './Status';
11
11
  import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
12
12
  const packageName = "@atlaskit/avatar";
13
- const packageVersion = "21.3.9";
13
+ const packageVersion = "21.4.0";
14
14
 
15
15
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
16
16
 
@@ -140,7 +140,8 @@ const Avatar = /*#__PURE__*/forwardRef(({
140
140
  stackIndex,
141
141
  status,
142
142
  target,
143
- testId
143
+ testId,
144
+ as: AvatarContainer = 'div'
144
145
  }, ref) => {
145
146
  const {
146
147
  createAnalyticsEvent
@@ -218,7 +219,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
218
219
  }
219
220
  return `${name || ''} ${isStatus && !customStatusNode ? `(${status})` : ''} ${isPresence && !customPresenceNode ? `(${presence})` : ''}`;
220
221
  };
221
- return jsx("div", {
222
+ return jsx(AvatarContainer, {
222
223
  "data-testid": testId,
223
224
  style: {
224
225
  display: 'inline-block',
@@ -1,8 +1,8 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
3
  var _templateObject;
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; }
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; }
4
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  /** @jsx jsx */
7
7
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
8
8
  import { createElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
@@ -15,7 +15,7 @@ import { PresenceWrapper } from './Presence';
15
15
  import { StatusWrapper } from './Status';
16
16
  import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
17
17
  var packageName = "@atlaskit/avatar";
18
- var packageVersion = "21.3.9";
18
+ var packageVersion = "21.4.0";
19
19
 
20
20
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
21
21
 
@@ -60,7 +60,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
60
60
  stackIndex = _ref2.stackIndex,
61
61
  status = _ref2.status,
62
62
  target = _ref2.target,
63
- testId = _ref2.testId;
63
+ testId = _ref2.testId,
64
+ _ref2$as = _ref2.as,
65
+ AvatarContainer = _ref2$as === void 0 ? 'div' : _ref2$as;
64
66
  var _useAnalyticsEvents = useAnalyticsEvents(),
65
67
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
66
68
  var customPresenceNode = /*#__PURE__*/isValidElement(presence) ? presence : null;
@@ -134,7 +136,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
134
136
  }
135
137
  return "".concat(name || '', " ").concat(isStatus && !customStatusNode ? "(".concat(status, ")") : '', " ").concat(isPresence && !customPresenceNode ? "(".concat(presence, ")") : '');
136
138
  };
137
- return jsx("div", {
139
+ return jsx(AvatarContainer, {
138
140
  "data-testid": testId,
139
141
  style: {
140
142
  display: 'inline-block',
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- 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; }
4
- 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; }
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  /** @jsx jsx */
6
6
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
7
7
  import { useEffect, useState } from 'react';
@@ -1,8 +1,8 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
3
  var _templateObject;
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; }
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; }
4
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  /** @jsx jsx */
7
7
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
8
8
  import { createElement, forwardRef, Fragment } from 'react';
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- 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; }
4
- 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; }
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  /** @jsx jsx */
6
6
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
7
7
 
@@ -92,6 +92,11 @@ export interface AvatarPropTypes {
92
92
  * Analytics context meta data
93
93
  */
94
94
  analyticsContext?: Record<string, any>;
95
+ /**
96
+ * Replace the wrapping element. This accepts the name of a html tag which will
97
+ * be used to wrap the element.
98
+ */
99
+ as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
95
100
  }
96
101
  /**
97
102
  * __Avatar__
@@ -92,6 +92,11 @@ export interface AvatarPropTypes {
92
92
  * Analytics context meta data
93
93
  */
94
94
  analyticsContext?: Record<string, any>;
95
+ /**
96
+ * Replace the wrapping element. This accepts the name of a html tag which will
97
+ * be used to wrap the element.
98
+ */
99
+ as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
95
100
  }
96
101
  /**
97
102
  * __Avatar__
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "21.3.9",
3
+ "version": "21.4.0",
4
4
  "description": "An avatar is a visual representation of a user or entity.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -42,8 +42,8 @@
42
42
  "dependencies": {
43
43
  "@atlaskit/analytics-next": "^9.1.0",
44
44
  "@atlaskit/icon": "^21.12.0",
45
- "@atlaskit/theme": "^12.5.0",
46
- "@atlaskit/tokens": "^1.15.0",
45
+ "@atlaskit/theme": "^12.6.0",
46
+ "@atlaskit/tokens": "^1.25.0",
47
47
  "@babel/runtime": "^7.0.0",
48
48
  "@emotion/react": "^11.7.1",
49
49
  "@emotion/serialize": "^1.1.0"
package/report.api.md CHANGED
@@ -74,6 +74,9 @@ export interface AvatarItemProps {
74
74
  export interface AvatarPropTypes {
75
75
  analyticsContext?: Record<string, any>;
76
76
  appearance?: AppearanceType;
77
+ as?:
78
+ | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>
79
+ | keyof JSX.IntrinsicElements;
77
80
  borderColor?: string;
78
81
  children?: (props: CustomAvatarProps) => ReactNode;
79
82
  href?: string;
@@ -56,6 +56,7 @@ export interface AvatarItemProps {
56
56
  export interface AvatarPropTypes {
57
57
  analyticsContext?: Record<string, any>;
58
58
  appearance?: AppearanceType;
59
+ as?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | keyof JSX.IntrinsicElements;
59
60
  borderColor?: string;
60
61
  children?: (props: CustomAvatarProps) => ReactNode;
61
62
  href?: string;