superdesk-ui-framework 3.0.21 → 3.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/app/styles/_avatar.scss +12 -1
  2. package/app/styles/_icon-font.scss +4 -1
  3. package/app-typescript/components/Icon.tsx +1 -1
  4. package/app-typescript/components/ShowPopup.tsx +1 -1
  5. package/app-typescript/components/avatar/avatar-group.tsx +115 -30
  6. package/app-typescript/components/avatar/avatar.tsx +4 -4
  7. package/dist/examples.bundle.css +766 -0
  8. package/dist/examples.bundle.js +3898 -3893
  9. package/dist/react/Avatar.tsx +75 -120
  10. package/dist/superdesk-ui.bundle.css +2309 -1
  11. package/dist/superdesk-ui.bundle.js +17974 -17946
  12. package/examples/pages/react/Avatar.tsx +75 -120
  13. package/package.json +1 -1
  14. package/react/components/Icon.d.ts +1 -1
  15. package/react/components/ShowPopup.js +1 -1
  16. package/react/components/avatar/avatar-group.d.ts +2 -0
  17. package/react/components/avatar/avatar-group.js +32 -4
  18. package/react/components/avatar/avatar.d.ts +1 -1
  19. package/react/components/avatar/avatar.js +3 -3
package/examples/pages/react/Avatar.tsx CHANGED
@@ -7,33 +7,33 @@ import {IAvatarInGroup, IAvatarPlaceholderInGroup} from '../../../app-typescript
7
7
  const avatars: Array<IAvatarInGroup> = [
8
8
  {
9
9
  imageUrl: 'avatar.jpg',
10
- initials: "JL",
11
- tooltip: null,
10
+ initials: "U1",
11
+ displayName: 'User1',
12
12
  },
13
13
  {
14
14
  imageUrl: null,
15
- initials: "AB",
16
- tooltip: null,
15
+ initials: "U2",
16
+ displayName: 'User2',
17
17
  },
18
18
  {
19
19
  imageUrl: null,
20
- initials: "FG",
21
- tooltip: null,
20
+ initials: "U3",
21
+ displayName: 'User3',
22
22
  },
23
23
  {
24
24
  imageUrl: 'avatar-3.jpg',
25
- initials: "JL",
26
- tooltip: null,
25
+ initials: "U4",
26
+ displayName: 'User4',
27
27
  },
28
28
  {
29
29
  imageUrl: 'avatar-4.jpg',
30
- initials: "JL",
31
- tooltip: null,
30
+ initials: "U5",
31
+ displayName: 'User5',
32
32
  },
33
33
  {
34
34
  imageUrl: null,
35
- initials: "KU",
36
- tooltip: null,
35
+ initials: "A6",
36
+ displayName: 'User6',
37
37
  },
38
38
  ];
39
39
 
@@ -48,7 +48,7 @@ export default class AvatarDoc extends React.PureComponent {
48
48
  size="large"
49
49
  imageUrl="/avatar.jpg"
50
50
  initials="JL"
51
- tooltip="Jeffrey Lebowski"
51
+ displayName="Jeffrey Lebowski"
52
52
  />
53
53
  `}
54
54
  </Markup.ReactMarkupCodePreview>
@@ -59,9 +59,9 @@ export default class AvatarDoc extends React.PureComponent {
59
59
  <Container gap='medium' className='sd-margin-b--3'>
60
60
 
61
61
  <Avatar
62
+ displayName="Jeffrey Lebowski"
62
63
  imageUrl="/avatar.jpg"
63
- initials={null}
64
- tooltip="User 1"
64
+ initials='Jeffrey Lebowski'
65
65
  size="large"
66
66
  icon={{name: 'print', color: 'red'}}
67
67
  statusIndicator="online"
@@ -69,9 +69,9 @@ export default class AvatarDoc extends React.PureComponent {
69
69
  />
70
70
 
71
71
  <Avatar
72
+ displayName="Jeffrey Lebowski"
72
73
  imageUrl={null}
73
- initials="BC"
74
- tooltip="User 2"
74
+ initials="Jeffrey Lebowski"
75
75
  size="large"
76
76
  icon={{name: 'print', color: 'red'}}
77
77
  statusIndicator="offline"
@@ -79,9 +79,9 @@ export default class AvatarDoc extends React.PureComponent {
79
79
  />
80
80
 
81
81
  <Avatar
82
+ displayName="Jeffrey Lebowski"
82
83
  imageUrl={null}
83
- initials={null}
84
- tooltip="User 3"
84
+ initials='Jeffrey Lebowski'
85
85
  size="large"
86
86
  icon={{name: 'print', color: 'red'}}
87
87
  administratorIndicator
@@ -96,42 +96,42 @@ export default class AvatarDoc extends React.PureComponent {
96
96
  size="x-small"
97
97
  imageUrl="/avatar.jpg"
98
98
  initials="JL"
99
- tooltip="Jeffrey Lebowski"
99
+ displayName="Jeffrey Lebowski"
100
100
  />
101
101
 
102
102
  <Avatar
103
103
  size="small"
104
104
  imageUrl="/avatar.jpg"
105
105
  initials="JL"
106
- tooltip="Jeffrey Lebowski"
106
+ displayName="Jeffrey Lebowski"
107
107
  />
108
108
 
109
109
  <Avatar
110
110
  size="medium"
111
111
  imageUrl="/avatar.jpg"
112
112
  initials="JL"
113
- tooltip="Jeffrey Lebowski"
113
+ displayName="Jeffrey Lebowski"
114
114
  />
115
115
 
116
116
  <Avatar
117
117
  size="large"
118
118
  imageUrl="/avatar.jpg"
119
119
  initials="JL"
120
- tooltip="Jeffrey Lebowski"
120
+ displayName="Jeffrey Lebowski"
121
121
  />
122
122
 
123
123
  <Avatar
124
124
  size="x-large"
125
125
  imageUrl="/avatar.jpg"
126
126
  initials="JL"
127
- tooltip="Jeffrey Lebowski"
127
+ displayName="Jeffrey Lebowski"
128
128
  />
129
129
 
130
130
  <Avatar
131
131
  size="xx-large"
132
132
  imageUrl="/avatar.jpg"
133
133
  initials="JL"
134
- tooltip="Jeffrey Lebowski"
134
+ displayName="Jeffrey Lebowski"
135
135
  />
136
136
 
137
137
  </Container>
@@ -139,38 +139,14 @@ export default class AvatarDoc extends React.PureComponent {
139
139
  <p className="docs-page__paragraph">// With status indicator</p>
140
140
  <Container gap='medium' className='sd-margin-b--3'>
141
141
 
142
- <Avatar
143
- size="x-small"
144
- imageUrl="/avatar.jpg"
145
- initials="JL"
146
- tooltip="Jeffrey Lebowski"
147
- statusIndicator="online"
148
- />
149
-
150
- <Avatar
151
- size="x-small"
152
- imageUrl="/avatar.jpg"
153
- initials="JL"
154
- tooltip="Jeffrey Lebowski"
155
- statusIndicator="offline"
156
- />
157
-
158
142
  <Avatar
159
143
  size="large"
160
144
  imageUrl="/avatar.jpg"
161
145
  initials="JL"
162
- tooltip="Jeffrey Lebowski"
146
+ displayName="Jeffrey Lebowski"
163
147
  statusIndicator="online"
164
148
  />
165
149
 
166
- <Avatar
167
- size="large"
168
- imageUrl="/avatar.jpg"
169
- initials="JL"
170
- tooltip="Jeffrey Lebowski"
171
- statusIndicator="offline"
172
- />
173
-
174
150
  </Container>
175
151
 
176
152
  <p className="docs-page__paragraph">// With administrator indicator</p>
@@ -179,7 +155,7 @@ export default class AvatarDoc extends React.PureComponent {
179
155
  size="large"
180
156
  imageUrl="/avatar.jpg"
181
157
  initials="JL"
182
- tooltip="Jeffrey Lebowski"
158
+ displayName="Jeffrey Lebowski"
183
159
  administratorIndicator
184
160
  />
185
161
  </Container>
@@ -191,7 +167,7 @@ export default class AvatarDoc extends React.PureComponent {
191
167
  size="x-small"
192
168
  imageUrl={null}
193
169
  initials="JL"
194
- tooltip="Jeffrey Lebowski"
170
+ displayName="Jeffrey Lebowski"
195
171
  icon={{name: 'text'}}
196
172
  />
197
173
 
@@ -199,7 +175,7 @@ export default class AvatarDoc extends React.PureComponent {
199
175
  size="small"
200
176
  imageUrl="/avatar.jpg"
201
177
  initials="JL"
202
- tooltip="Jeffrey Lebowski"
178
+ displayName="Jeffrey Lebowski"
203
179
  icon={{name: 'text'}}
204
180
  />
205
181
 
@@ -207,7 +183,7 @@ export default class AvatarDoc extends React.PureComponent {
207
183
  size="medium"
208
184
  imageUrl="/avatar.jpg"
209
185
  initials="JL"
210
- tooltip="Jeffrey Lebowski"
186
+ displayName="Jeffrey Lebowski"
211
187
  icon={{name: 'audio', color: 'var(--sd-colour-state--done)'}}
212
188
  />
213
189
 
@@ -215,7 +191,7 @@ export default class AvatarDoc extends React.PureComponent {
215
191
  size="large"
216
192
  imageUrl="/avatar.jpg"
217
193
  initials="JL"
218
- tooltip="Jeffrey Lebowski"
194
+ displayName="Jeffrey Lebowski"
219
195
  icon={{name: 'text', color: 'var(--sd-colour-state--in-progress)'}}
220
196
  />
221
197
 
@@ -223,7 +199,7 @@ export default class AvatarDoc extends React.PureComponent {
223
199
  size="x-large"
224
200
  imageUrl="/avatar.jpg"
225
201
  initials="JL"
226
- tooltip="Jeffrey Lebowski"
202
+ displayName="Jeffrey Lebowski"
227
203
  icon={{name: 'text'}}
228
204
  />
229
205
 
@@ -231,7 +207,7 @@ export default class AvatarDoc extends React.PureComponent {
231
207
  size="xx-large"
232
208
  imageUrl={null}
233
209
  initials="JL"
234
- tooltip="Jeffrey Lebowski"
210
+ displayName="Jeffrey Lebowski"
235
211
  icon={{name: 'video-cancel', color: 'var(--sd-colour-state--in-progress)'}}
236
212
  />
237
213
 
@@ -244,9 +220,9 @@ export default class AvatarDoc extends React.PureComponent {
244
220
  // Combo
245
221
 
246
222
  <Avatar
223
+ displayName="Jeffrey Lebowski"
247
224
  imageUrl="/avatar.jpg"
248
- initials={null}
249
- tooltip="User 1"
225
+ initials='Jeffrey Lebowski'
250
226
  size="large"
251
227
  icon={{name: 'print', color: 'red'}}
252
228
  statusIndicator="online"
@@ -254,9 +230,9 @@ export default class AvatarDoc extends React.PureComponent {
254
230
  />
255
231
 
256
232
  <Avatar
233
+ displayName="Jeffrey Lebowski"
257
234
  imageUrl={null}
258
- initials="BC"
259
- tooltip="User 2"
235
+ initials="Jeffrey Lebowski"
260
236
  size="large"
261
237
  icon={{name: 'print', color: 'red'}}
262
238
  statusIndicator="offline"
@@ -264,9 +240,9 @@ export default class AvatarDoc extends React.PureComponent {
264
240
  />
265
241
 
266
242
  <Avatar
243
+ displayName="Jeffrey Lebowski"
267
244
  imageUrl={null}
268
- initials={null}
269
- tooltip="User 3"
245
+ initials='Jeffrey Lebowski'
270
246
  size="large"
271
247
  icon={{name: 'print', color: 'red'}}
272
248
  administratorIndicator
@@ -277,42 +253,42 @@ export default class AvatarDoc extends React.PureComponent {
277
253
  size="x-small"
278
254
  imageUrl="/avatar.jpg"
279
255
  initials="JL"
280
- tooltip="Jeffrey Lebowski"
256
+ displayName="Jeffrey Lebowski"
281
257
  />
282
258
 
283
259
  <Avatar
284
260
  size="small"
285
261
  imageUrl="/avatar.jpg"
286
262
  initials="JL"
287
- tooltip="Jeffrey Lebowski"
263
+ displayName="Jeffrey Lebowski"
288
264
  />
289
265
 
290
266
  <Avatar
291
267
  size="medium"
292
268
  imageUrl="/avatar.jpg"
293
269
  initials="JL"
294
- tooltip="Jeffrey Lebowski"
270
+ displayName="Jeffrey Lebowski"
295
271
  />
296
272
 
297
273
  <Avatar
298
274
  size="large"
299
275
  imageUrl="/avatar.jpg"
300
276
  initials="JL"
301
- tooltip="Jeffrey Lebowski"
277
+ displayName="Jeffrey Lebowski"
302
278
  />
303
279
 
304
280
  <Avatar
305
281
  size="x-large"
306
282
  imageUrl="/avatar.jpg"
307
283
  initials="JL"
308
- tooltip="Jeffrey Lebowski"
284
+ displayName="Jeffrey Lebowski"
309
285
  />
310
286
 
311
287
  <Avatar
312
288
  size="xx-large"
313
289
  imageUrl="/avatar.jpg"
314
290
  initials="JL"
315
- tooltip="Jeffrey Lebowski"
291
+ displayName="Jeffrey Lebowski"
316
292
  />
317
293
 
318
294
 
@@ -321,7 +297,7 @@ export default class AvatarDoc extends React.PureComponent {
321
297
  size="x-small"
322
298
  imageUrl="/avatar.jpg"
323
299
  initials="JL"
324
- tooltip="Jeffrey Lebowski"
300
+ displayName="Jeffrey Lebowski"
325
301
  statusIndicator="online"
326
302
  />
327
303
 
@@ -329,7 +305,7 @@ export default class AvatarDoc extends React.PureComponent {
329
305
  size="x-small"
330
306
  imageUrl="/avatar.jpg"
331
307
  initials="JL"
332
- tooltip="Jeffrey Lebowski"
308
+ displayName="Jeffrey Lebowski"
333
309
  statusIndicator="offline"
334
310
  />
335
311
 
@@ -337,7 +313,7 @@ export default class AvatarDoc extends React.PureComponent {
337
313
  size="large"
338
314
  imageUrl="/avatar.jpg"
339
315
  initials="JL"
340
- tooltip="Jeffrey Lebowski"
316
+ displayName="Jeffrey Lebowski"
341
317
  statusIndicator="online"
342
318
  />
343
319
 
@@ -345,7 +321,7 @@ export default class AvatarDoc extends React.PureComponent {
345
321
  size="large"
346
322
  imageUrl="/avatar.jpg"
347
323
  initials="JL"
348
- tooltip="Jeffrey Lebowski"
324
+ displayName="Jeffrey Lebowski"
349
325
  statusIndicator="offline"
350
326
  />
351
327
 
@@ -355,7 +331,7 @@ export default class AvatarDoc extends React.PureComponent {
355
331
  size="large"
356
332
  imageUrl="/avatar.jpg"
357
333
  initials="JL"
358
- tooltip="Jeffrey Lebowski"
334
+ displayName="Jeffrey Lebowski"
359
335
  administratorIndicator
360
336
  />
361
337
 
@@ -365,7 +341,7 @@ export default class AvatarDoc extends React.PureComponent {
365
341
  size="x-small"
366
342
  imageUrl={null}
367
343
  initials="JL"
368
- tooltip="Jeffrey Lebowski"
344
+ displayName="Jeffrey Lebowski"
369
345
  icon={{name: 'text'}}
370
346
  />
371
347
 
@@ -373,7 +349,7 @@ export default class AvatarDoc extends React.PureComponent {
373
349
  size="small"
374
350
  imageUrl="/avatar.jpg"
375
351
  initials="JL"
376
- tooltip="Jeffrey Lebowski"
352
+ displayName="Jeffrey Lebowski"
377
353
  icon={{name: 'text'}}
378
354
  />
379
355
 
@@ -381,7 +357,7 @@ export default class AvatarDoc extends React.PureComponent {
381
357
  size="medium"
382
358
  imageUrl="/avatar.jpg"
383
359
  initials="JL"
384
- tooltip="Jeffrey Lebowski"
360
+ displayName="Jeffrey Lebowski"
385
361
  icon={{name: 'audio', color: 'var(--sd-colour-state--done)'}}
386
362
  />
387
363
 
@@ -389,7 +365,7 @@ export default class AvatarDoc extends React.PureComponent {
389
365
  size="large"
390
366
  imageUrl="/avatar.jpg"
391
367
  initials="JL"
392
- tooltip="Jeffrey Lebowski"
368
+ displayName="Jeffrey Lebowski"
393
369
  icon={{name: 'text', color: 'var(--sd-colour-state--in-progress)'}}
394
370
  />
395
371
 
@@ -397,7 +373,7 @@ export default class AvatarDoc extends React.PureComponent {
397
373
  size="x-large"
398
374
  imageUrl="/avatar.jpg"
399
375
  initials="JL"
400
- tooltip="Jeffrey Lebowski"
376
+ displayName="Jeffrey Lebowski"
401
377
  icon={{name: 'text'}}
402
378
  />
403
379
 
@@ -405,11 +381,10 @@ export default class AvatarDoc extends React.PureComponent {
405
381
  size="xx-large"
406
382
  imageUrl={null}
407
383
  initials="JL"
408
- tooltip="Jeffrey Lebowski"
384
+ displayName="Jeffrey Lebowski"
409
385
  icon={{name: 'video-cancel', color: 'var(--sd-colour-state--in-progress)'}}
410
386
  />
411
387
 
412
-
413
388
  </AvatarWrapper>
414
389
  `}
415
390
  </Markup.ReactMarkupCode>
@@ -419,7 +394,7 @@ export default class AvatarDoc extends React.PureComponent {
419
394
  <p className='docs-page__paragraph'></p>
420
395
  <Markup.ReactMarkup>
421
396
  <Markup.ReactMarkupPreview>
422
- <p className="docs-page__paragraph">// Various sizes</p>
397
+ <p className="docs-page__paragraph">// With action</p>
423
398
  <AvatarGroup
424
399
  size="x-small"
425
400
  items={avatars}
@@ -459,63 +434,43 @@ export default class AvatarDoc extends React.PureComponent {
459
434
  items={avatars}
460
435
  />
461
436
 
462
- <p className="docs-page__paragraph">// With action</p>
463
- <Container gap='medium' className='sd-margin-b--3'>
464
- {(() => {
465
- const placeholder: IAvatarPlaceholderInGroup = {
466
- kind: 'plus-button',
467
- icon:{name: 'print', color: 'red'},
468
- onClick: () => {
469
- console.log('plus button clicked');
470
- },
471
- };
472
-
473
- return (
474
- <AvatarGroup
475
- size="large"
476
- items={[...avatars.slice(0,2), placeholder]}
477
- />
478
- );
479
- })()}
480
- </Container>
481
-
482
437
  <p className="docs-page__paragraph">// With icons</p>
483
438
  {(() => {
484
439
  const avatars: Array<IAvatarInGroup> = [
485
440
  {
486
441
  imageUrl: 'avatar.jpg',
487
- initials: "JL",
488
- tooltip: null,
442
+ initials: "U1",
443
+ displayName: 'User1',
489
444
  icon:{name: 'print', color: 'red'},
490
445
  },
491
446
  {
492
447
  imageUrl: null,
493
- initials: "AB",
494
- tooltip: null,
448
+ initials: "U2",
449
+ displayName: 'User2',
495
450
  icon:{name: 'print', color: 'green'},
496
451
  },
497
452
  {
498
453
  imageUrl: null,
499
- initials: "FG",
500
- tooltip: null,
454
+ initials: "U3",
455
+ displayName: 'User3',
501
456
  icon:{name: 'print', color: 'blue'},
502
457
  },
503
458
  {
504
459
  imageUrl: 'avatar-3.jpg',
505
- initials: "JL",
506
- tooltip: null,
460
+ initials: "U4",
461
+ displayName: 'User4',
507
462
  icon:{name: 'print', color: 'yellow'},
508
463
  },
509
464
  {
510
465
  imageUrl: 'avatar-4.jpg',
511
- initials: "JL",
512
- tooltip: null,
466
+ initials: "U5",
467
+ displayName: 'User5',
513
468
  icon:{name: 'print', color: 'orange'},
514
469
  },
515
470
  {
516
471
  imageUrl: null,
517
- initials: "KU",
518
- tooltip: null,
472
+ initials: "U6",
473
+ displayName: 'User6',
519
474
  icon:{name: 'print', color: 'lime'},
520
475
  },
521
476
  ];
@@ -617,37 +572,37 @@ export default class AvatarDoc extends React.PureComponent {
617
572
  {
618
573
  imageUrl: 'avatar.jpg',
619
574
  initials: "JL",
620
- tooltip: null,
575
+ displayName: null,
621
576
  icon:{name: 'print', color: 'red'},
622
577
  },
623
578
  {
624
579
  imageUrl: null,
625
580
  initials: "AB",
626
- tooltip: null,
581
+ displayName: null,
627
582
  icon:{name: 'print', color: 'green'},
628
583
  },
629
584
  {
630
585
  imageUrl: null,
631
586
  initials: "FG",
632
- tooltip: null,
587
+ displayName: null,
633
588
  icon:{name: 'print', color: 'blue'},
634
589
  },
635
590
  {
636
591
  imageUrl: 'avatar-3.jpg',
637
592
  initials: "JL",
638
- tooltip: null,
593
+ displayName: null,
639
594
  icon:{name: 'print', color: 'yellow'},
640
595
  },
641
596
  {
642
597
  imageUrl: 'avatar-4.jpg',
643
598
  initials: "JL",
644
- tooltip: null,
599
+ displayName: null,
645
600
  icon:{name: 'print', color: 'orange'},
646
601
  },
647
602
  {
648
603
  imageUrl: null,
649
604
  initials: "KU",
650
- tooltip: null,
605
+ displayName: null,
651
606
  icon:{name: 'print', color: 'lime'},
652
607
  },
653
608
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.21",
3
+ "version": "3.0.24",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Icon.d.ts CHANGED
@@ -4,7 +4,7 @@ interface IProps {
4
4
  size?: 'small' | 'big';
5
5
  type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light' | 'white';
6
6
  className?: string;
7
- scale?: '2x' | '3x' | '4x';
7
+ scale?: '1.5x' | '2x' | '3x' | '4x';
8
8
  ariaHidden?: boolean;
9
9
  color?: string;
10
10
  }
package/react/components/ShowPopup.js CHANGED
@@ -136,7 +136,7 @@ var PopupPositioner = /** @class */ (function (_super) {
136
136
  var _a;
137
137
  return (React.createElement("div", { ref: function (el) {
138
138
  _this.wrapperEl = el;
139
- }, style: { zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : 1, position: 'absolute', left: '-100vw' } }, this.props.children));
139
+ }, style: { zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : 1, position: 'absolute', left: '-100vw', display: 'flex' } }, this.props.children));
140
140
  };
141
141
  return PopupPositioner;
142
142
  }(React.PureComponent));
package/react/components/avatar/avatar-group.d.ts CHANGED
@@ -12,6 +12,8 @@ export interface IPropsAvatarGroup {
12
12
  * if exceeded, "+1"/"+2"/"+n" button will be shown
13
13
  */
14
14
  max?: number | 'show-all';
15
+ zIndex?: number;
16
+ onClick?(): void;
15
17
  }
16
18
  export declare class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
17
19
  render(): JSX.Element;
package/react/components/avatar/avatar-group.js CHANGED
@@ -59,6 +59,8 @@ var avatar_1 = require("./avatar");
59
59
  var avatar_wrapper_1 = require("./avatar-wrapper");
60
60
  var avatar_number_1 = require("./avatar-number");
61
61
  var avatar_placeholder_1 = require("./avatar-placeholder");
62
+ var Spacer_1 = require("../Spacer");
63
+ var WithPopover_1 = require("../WithPopover");
62
64
  function isAvatar(item) {
63
65
  return item['kind'] == null;
64
66
  }
@@ -69,7 +71,8 @@ var AvatarGroup = /** @class */ (function (_super) {
69
71
  }
70
72
  AvatarGroup.prototype.render = function () {
71
73
  var _this = this;
72
- var _a = this.props, size = _a.size, items = _a.items;
74
+ var _a;
75
+ var _b = this.props, size = _b.size, items = _b.items;
73
76
  var someIconsHaveExtraElements = items.filter(isAvatar).some(function (_a) {
74
77
  var icon = _a.icon, administratorIndicator = _a.administratorIndicator;
75
78
  return icon != null || administratorIndicator != null;
@@ -87,7 +90,31 @@ var AvatarGroup = /** @class */ (function (_super) {
87
90
  }
88
91
  })();
89
92
  var itemsOverLimit = items.length - max;
90
- return (React.createElement("div", { className: (0, classnames_1.default)('sd-avatar-group', 'sd-avatar-group--stacked', "sd-avatar-group--stacked--gap-".concat(gap)), role: 'group' },
93
+ var PlusButtonWrapper = function (_a) {
94
+ var children = _a.children, onToggle = _a.onToggle;
95
+ if (_this.props.onClick == null) {
96
+ return (React.createElement("button", { style: { padding: 0 }, onClick: function (event) {
97
+ if (_this.props.onClick == null) {
98
+ onToggle(event.target);
99
+ }
100
+ } }, children));
101
+ }
102
+ else {
103
+ return React.createElement(React.Fragment, null, children);
104
+ }
105
+ };
106
+ var someHaveDisplayName = this.props.items.some(function (item) { return isAvatar(item) && item.displayName.length > 0; });
107
+ return (React.createElement(WithPopover_1.WithPopover, { zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : 101, placement: 'bottom-end', component: function () { return (React.createElement("div", { className: "avatar-popup" }, _this.props.items.map(function (item, index) {
108
+ return (someHaveDisplayName
109
+ ? React.createElement(Spacer_1.Spacer, { h: true, alignItems: 'center', gap: '16', noGrow: true, key: index },
110
+ isAvatar(item)
111
+ && item.displayName,
112
+ isAvatar(item)
113
+ ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon }))
114
+ : (React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: item.onClick })))
115
+ : React.createElement("div", null,
116
+ React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: isAvatar(item) ? undefined : item.onClick, key: index })));
117
+ }))); } }, function (onToggle) { return (React.createElement("div", { className: (0, classnames_1.default)('sd-avatar-group', 'sd-avatar-group--stacked', "sd-avatar-group--stacked--gap-".concat(gap)), role: 'group', onClick: _this.props.onClick },
91
118
  items.slice(0, max).map(function (item, index) {
92
119
  if (isAvatar(item)) {
93
120
  return (React.createElement(avatar_1.Avatar, __assign({}, item, { key: index, size: size })));
@@ -96,8 +123,9 @@ var AvatarGroup = /** @class */ (function (_super) {
96
123
  return (React.createElement(avatar_placeholder_1.AvatarPlaceholder, __assign({}, item, { key: index, size: _this.props.size })));
97
124
  }
98
125
  }),
99
- itemsOverLimit > 0 && (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
100
- React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))));
126
+ itemsOverLimit > 0 && (React.createElement(PlusButtonWrapper, { onToggle: onToggle },
127
+ React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
128
+ React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))))); }));
101
129
  };
102
130
  return AvatarGroup;
103
131
  }(React.PureComponent));