@lumx/react 2.1.4 → 2.1.6-alpha.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.
Files changed (21) hide show
  1. package/esm/_internal/Avatar2.js +5 -1
  2. package/esm/_internal/Avatar2.js.map +1 -1
  3. package/esm/_internal/DragHandle.js +1 -1
  4. package/esm/_internal/DragHandle.js.map +1 -1
  5. package/esm/_internal/Thumbnail2.js +29 -34
  6. package/esm/_internal/Thumbnail2.js.map +1 -1
  7. package/esm/_internal/UserBlock.js +44 -14
  8. package/esm/_internal/UserBlock.js.map +1 -1
  9. package/esm/_internal/user-block.js +1 -0
  10. package/esm/_internal/user-block.js.map +1 -1
  11. package/package.json +16 -17
  12. package/src/components/avatar/Avatar.tsx +8 -0
  13. package/src/components/drag-handle/DragHandle.tsx +5 -1
  14. package/src/components/thumbnail/Thumbnail.stories.tsx +21 -0
  15. package/src/components/thumbnail/Thumbnail.test.tsx +20 -2
  16. package/src/components/thumbnail/Thumbnail.tsx +40 -15
  17. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +53 -6
  18. package/src/components/user-block/UserBlock.stories.tsx +27 -4
  19. package/src/components/user-block/UserBlock.tsx +40 -16
  20. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +244 -145
  21. package/types.d.ts +12 -0
package/src/components/user-block/UserBlock.tsx CHANGED
@@ -5,6 +5,8 @@ import classNames from 'classnames';
5
5
  import { Avatar, Orientation, Size, Theme } from '@lumx/react';
6
6
 
7
7
  import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
8
+ import { isEmpty } from 'lodash';
9
+ import { renderLink } from '@lumx/react/utils/renderLink';
8
10
  import { AvatarProps } from '../avatar/Avatar';
9
11
 
10
12
  /**
@@ -18,6 +20,10 @@ export type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
18
20
  export interface UserBlockProps extends GenericProps {
19
21
  /** Props to pass to the avatar. */
20
22
  avatarProps?: AvatarProps;
23
+ /** Props to pass to the link wrapping the avatar thumbnail. */
24
+ linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
25
+ /** Custom react component for the link (can be used to inject react router Link). */
26
+ linkAs?: 'a' | any;
21
27
  /** Simple action toolbar content. */
22
28
  simpleAction?: ReactNode;
23
29
  /** Multiple action toolbar content. */
@@ -80,6 +86,8 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
80
86
  simpleAction,
81
87
  size,
82
88
  theme,
89
+ linkProps,
90
+ linkAs,
83
91
  ...forwardedProps
84
92
  } = props;
85
93
  let componentSize = size;
@@ -91,12 +99,29 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
91
99
 
92
100
  const shouldDisplayActions: boolean = orientation === Orientation.vertical;
93
101
 
94
- const nameBlock: ReactNode = name && (
95
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions
96
- <span className={`${CLASSNAME}__name`} onClick={onClick} tabIndex={onClick ? 0 : -1}>
97
- {name}
98
- </span>
99
- );
102
+ const isLink = Boolean(linkProps?.href || linkAs);
103
+ const isClickable = !!onClick || isLink;
104
+
105
+ const nameBlock: ReactNode = React.useMemo(() => {
106
+ if (isEmpty(name)) {
107
+ return null;
108
+ }
109
+ const nameClassName = classNames(
110
+ handleBasicClasses({ prefix: `${CLASSNAME}__name`, isClickable }),
111
+ isLink && linkProps?.className,
112
+ );
113
+ if (isLink) {
114
+ return renderLink({ ...linkProps, linkAs, className: nameClassName }, name);
115
+ }
116
+ if (onClick) {
117
+ return (
118
+ <button onClick={onClick} type="button" className={nameClassName}>
119
+ {name}
120
+ </button>
121
+ );
122
+ }
123
+ return <span className={nameClassName}>{name}</span>;
124
+ }, [isClickable, isLink, linkAs, linkProps, name, onClick]);
100
125
 
101
126
  const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (
102
127
  <div className={`${CLASSNAME}__fields`}>
@@ -114,21 +139,20 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
114
139
  {...forwardedProps}
115
140
  className={classNames(
116
141
  className,
117
- handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme }),
142
+ handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),
118
143
  )}
119
144
  onMouseLeave={onMouseLeave}
120
145
  onMouseEnter={onMouseEnter}
121
146
  >
122
147
  {avatarProps && (
123
- <div className={`${CLASSNAME}__avatar`}>
124
- <Avatar
125
- {...avatarProps}
126
- size={componentSize}
127
- onClick={onClick}
128
- tabIndex={onClick ? 0 : -1}
129
- theme={theme}
130
- />
131
- </div>
148
+ <Avatar
149
+ linkProps={linkProps}
150
+ {...avatarProps}
151
+ className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}
152
+ size={componentSize}
153
+ onClick={onClick}
154
+ theme={theme}
155
+ />
132
156
  )}
133
157
  {(fields || name) && (
134
158
  <div className={`${CLASSNAME}__wrapper`}>
package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap CHANGED
@@ -3,41 +3,37 @@
3
3
  exports[`<UserBlock> Snapshots and structure should render story 'InList' 1`] = `
4
4
  Array [
5
5
  <div
6
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
6
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
7
7
  onMouseEnter={[Function]}
8
8
  onMouseLeave={[Function]}
9
9
  >
10
- <div
10
+ <Avatar
11
+ alt="Avatar"
12
+ badge={
13
+ <Badge
14
+ color="blue"
15
+ >
16
+ <Icon
17
+ icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
18
+ />
19
+ </Badge>
20
+ }
11
21
  className="lumx-user-block__avatar"
12
- >
13
- <Avatar
14
- alt="Avatar"
15
- badge={
16
- <Badge
17
- color="blue"
18
- >
19
- <Icon
20
- icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
21
- />
22
- </Badge>
23
- }
24
- image="avatar1.jpg"
25
- onClick={[Function]}
26
- size="m"
27
- tabIndex={0}
28
- theme="light"
29
- />
30
- </div>
22
+ image="avatar1.jpg"
23
+ onClick={[Function]}
24
+ size="m"
25
+ theme="light"
26
+ />
31
27
  <div
32
28
  className="lumx-user-block__wrapper"
33
29
  >
34
- <span
35
- className="lumx-user-block__name"
30
+ <button
31
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
36
32
  onClick={[Function]}
37
- tabIndex={0}
33
+ type="button"
38
34
  >
39
35
  Emmitt O. Lum
40
- </span>
36
+ </button>
41
37
  <div
42
38
  className="lumx-user-block__fields"
43
39
  >
@@ -57,41 +53,37 @@ Array [
57
53
  </div>
58
54
  </div>,
59
55
  <div
60
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
56
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
61
57
  onMouseEnter={[Function]}
62
58
  onMouseLeave={[Function]}
63
59
  >
64
- <div
60
+ <Avatar
61
+ alt="Avatar"
62
+ badge={
63
+ <Badge
64
+ color="blue"
65
+ >
66
+ <Icon
67
+ icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
68
+ />
69
+ </Badge>
70
+ }
65
71
  className="lumx-user-block__avatar"
66
- >
67
- <Avatar
68
- alt="Avatar"
69
- badge={
70
- <Badge
71
- color="blue"
72
- >
73
- <Icon
74
- icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
75
- />
76
- </Badge>
77
- }
78
- image="avatar2.jpg"
79
- onClick={[Function]}
80
- size="m"
81
- tabIndex={0}
82
- theme="light"
83
- />
84
- </div>
72
+ image="avatar2.jpg"
73
+ onClick={[Function]}
74
+ size="m"
75
+ theme="light"
76
+ />
85
77
  <div
86
78
  className="lumx-user-block__wrapper"
87
79
  >
88
- <span
89
- className="lumx-user-block__name"
80
+ <button
81
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
90
82
  onClick={[Function]}
91
- tabIndex={0}
83
+ type="button"
92
84
  >
93
85
  Emmitt O. Lum
94
- </span>
86
+ </button>
95
87
  <div
96
88
  className="lumx-user-block__fields"
97
89
  >
@@ -111,41 +103,37 @@ Array [
111
103
  </div>
112
104
  </div>,
113
105
  <div
114
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
106
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
115
107
  onMouseEnter={[Function]}
116
108
  onMouseLeave={[Function]}
117
109
  >
118
- <div
110
+ <Avatar
111
+ alt="Avatar"
112
+ badge={
113
+ <Badge
114
+ color="blue"
115
+ >
116
+ <Icon
117
+ icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
118
+ />
119
+ </Badge>
120
+ }
119
121
  className="lumx-user-block__avatar"
120
- >
121
- <Avatar
122
- alt="Avatar"
123
- badge={
124
- <Badge
125
- color="blue"
126
- >
127
- <Icon
128
- icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
129
- />
130
- </Badge>
131
- }
132
- image="avatar3.jpg"
133
- onClick={[Function]}
134
- size="m"
135
- tabIndex={0}
136
- theme="light"
137
- />
138
- </div>
122
+ image="avatar3.jpg"
123
+ onClick={[Function]}
124
+ size="m"
125
+ theme="light"
126
+ />
139
127
  <div
140
128
  className="lumx-user-block__wrapper"
141
129
  >
142
- <span
143
- className="lumx-user-block__name"
130
+ <button
131
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
144
132
  onClick={[Function]}
145
- tabIndex={0}
133
+ type="button"
146
134
  >
147
135
  Emmitt O. Lum
148
- </span>
136
+ </button>
149
137
  <div
150
138
  className="lumx-user-block__fields"
151
139
  >
@@ -170,61 +158,53 @@ Array [
170
158
  exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
171
159
  Array [
172
160
  <div
173
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light"
161
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light lumx-user-block--is-clickable"
174
162
  onMouseEnter={[Function]}
175
163
  onMouseLeave={[Function]}
176
164
  >
177
- <div
165
+ <Avatar
166
+ alt="Avatar"
178
167
  className="lumx-user-block__avatar"
179
- >
180
- <Avatar
181
- alt="Avatar"
182
- image="avatar1.jpg"
183
- onClick={[Function]}
184
- size="s"
185
- tabIndex={0}
186
- theme="light"
187
- />
188
- </div>
168
+ image="avatar1.jpg"
169
+ onClick={[Function]}
170
+ size="s"
171
+ theme="light"
172
+ />
189
173
  <div
190
174
  className="lumx-user-block__wrapper"
191
175
  >
192
- <span
193
- className="lumx-user-block__name"
176
+ <button
177
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
194
178
  onClick={[Function]}
195
- tabIndex={0}
179
+ type="button"
196
180
  >
197
181
  Emmitt O. Lum
198
- </span>
182
+ </button>
199
183
  </div>
200
184
  </div>,
201
185
  <div
202
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
186
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
203
187
  onMouseEnter={[Function]}
204
188
  onMouseLeave={[Function]}
205
189
  >
206
- <div
190
+ <Avatar
191
+ alt="Avatar"
207
192
  className="lumx-user-block__avatar"
208
- >
209
- <Avatar
210
- alt="Avatar"
211
- image="avatar1.jpg"
212
- onClick={[Function]}
213
- size="m"
214
- tabIndex={0}
215
- theme="light"
216
- />
217
- </div>
193
+ image="avatar1.jpg"
194
+ onClick={[Function]}
195
+ size="m"
196
+ theme="light"
197
+ />
218
198
  <div
219
199
  className="lumx-user-block__wrapper"
220
200
  >
221
- <span
222
- className="lumx-user-block__name"
201
+ <button
202
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
223
203
  onClick={[Function]}
224
- tabIndex={0}
204
+ type="button"
225
205
  >
226
206
  Emmitt O. Lum
227
- </span>
207
+ </button>
228
208
  <div
229
209
  className="lumx-user-block__fields"
230
210
  >
@@ -244,32 +224,28 @@ Array [
244
224
  </div>
245
225
  </div>,
246
226
  <div
247
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light"
227
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light lumx-user-block--is-clickable"
248
228
  onMouseEnter={[Function]}
249
229
  onMouseLeave={[Function]}
250
230
  >
251
- <div
231
+ <Avatar
232
+ alt="Avatar"
252
233
  className="lumx-user-block__avatar"
253
- >
254
- <Avatar
255
- alt="Avatar"
256
- image="avatar1.jpg"
257
- onClick={[Function]}
258
- size="l"
259
- tabIndex={0}
260
- theme="light"
261
- />
262
- </div>
234
+ image="avatar1.jpg"
235
+ onClick={[Function]}
236
+ size="l"
237
+ theme="light"
238
+ />
263
239
  <div
264
240
  className="lumx-user-block__wrapper"
265
241
  >
266
- <span
267
- className="lumx-user-block__name"
242
+ <button
243
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
268
244
  onClick={[Function]}
269
- tabIndex={0}
245
+ type="button"
270
246
  >
271
247
  Emmitt O. Lum
272
- </span>
248
+ </button>
273
249
  <div
274
250
  className="lumx-user-block__fields"
275
251
  >
@@ -297,34 +273,27 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
297
273
  onMouseEnter={[Function]}
298
274
  onMouseLeave={[Function]}
299
275
  >
300
- <div
276
+ <Avatar
277
+ alt="Avatar"
278
+ badge={
279
+ <Badge
280
+ color="blue"
281
+ >
282
+ <Icon
283
+ icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
284
+ />
285
+ </Badge>
286
+ }
301
287
  className="lumx-user-block__avatar"
302
- >
303
- <Avatar
304
- alt="Avatar"
305
- badge={
306
- <Badge
307
- color="blue"
308
- >
309
- <Icon
310
- icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
311
- />
312
- </Badge>
313
- }
314
- image="avatar1.jpg"
315
- onClick={[Function]}
316
- size="m"
317
- tabIndex={0}
318
- theme="light"
319
- />
320
- </div>
288
+ image="avatar1.jpg"
289
+ size="m"
290
+ theme="light"
291
+ />
321
292
  <div
322
293
  className="lumx-user-block__wrapper"
323
294
  >
324
295
  <span
325
296
  className="lumx-user-block__name"
326
- onClick={[Function]}
327
- tabIndex={0}
328
297
  >
329
298
  Emmitt O. Lum
330
299
  </span>
@@ -347,3 +316,133 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
347
316
  </div>
348
317
  </div>
349
318
  `;
319
+
320
+ exports[`<UserBlock> Snapshots and structure should render story 'WithLinks' 1`] = `
321
+ Array [
322
+ <div
323
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light lumx-user-block--is-clickable"
324
+ onMouseEnter={[Function]}
325
+ onMouseLeave={[Function]}
326
+ >
327
+ <Avatar
328
+ alt="Avatar"
329
+ className="lumx-user-block__avatar"
330
+ image="avatar1.jpg"
331
+ linkProps={
332
+ Object {
333
+ "href": "https://www.lumapps.com",
334
+ "target": "_blank",
335
+ }
336
+ }
337
+ onClick={[Function]}
338
+ size="s"
339
+ theme="light"
340
+ />
341
+ <div
342
+ className="lumx-user-block__wrapper"
343
+ >
344
+ <a
345
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
346
+ href="https://www.lumapps.com"
347
+ target="_blank"
348
+ >
349
+ Emmitt O. Lum
350
+ </a>
351
+ </div>
352
+ </div>,
353
+ <div
354
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
355
+ onMouseEnter={[Function]}
356
+ onMouseLeave={[Function]}
357
+ >
358
+ <Avatar
359
+ alt="Avatar"
360
+ className="lumx-user-block__avatar"
361
+ image="avatar1.jpg"
362
+ linkProps={
363
+ Object {
364
+ "href": "https://www.lumapps.com",
365
+ "target": "_blank",
366
+ }
367
+ }
368
+ onClick={[Function]}
369
+ size="m"
370
+ theme="light"
371
+ />
372
+ <div
373
+ className="lumx-user-block__wrapper"
374
+ >
375
+ <a
376
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
377
+ href="https://www.lumapps.com"
378
+ target="_blank"
379
+ >
380
+ Emmitt O. Lum
381
+ </a>
382
+ <div
383
+ className="lumx-user-block__fields"
384
+ >
385
+ <span
386
+ className="lumx-user-block__field"
387
+ key="0"
388
+ >
389
+ Creative developer
390
+ </span>
391
+ <span
392
+ className="lumx-user-block__field"
393
+ key="1"
394
+ >
395
+ Denpasar
396
+ </span>
397
+ </div>
398
+ </div>
399
+ </div>,
400
+ <div
401
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light lumx-user-block--is-clickable"
402
+ onMouseEnter={[Function]}
403
+ onMouseLeave={[Function]}
404
+ >
405
+ <Avatar
406
+ alt="Avatar"
407
+ className="lumx-user-block__avatar"
408
+ image="avatar1.jpg"
409
+ linkProps={
410
+ Object {
411
+ "href": "https://www.lumapps.com",
412
+ "target": "_blank",
413
+ }
414
+ }
415
+ onClick={[Function]}
416
+ size="l"
417
+ theme="light"
418
+ />
419
+ <div
420
+ className="lumx-user-block__wrapper"
421
+ >
422
+ <a
423
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
424
+ href="https://www.lumapps.com"
425
+ target="_blank"
426
+ >
427
+ Emmitt O. Lum
428
+ </a>
429
+ <div
430
+ className="lumx-user-block__fields"
431
+ >
432
+ <span
433
+ className="lumx-user-block__field"
434
+ key="0"
435
+ >
436
+ Creative developer
437
+ </span>
438
+ <span
439
+ className="lumx-user-block__field"
440
+ key="1"
441
+ >
442
+ Denpasar
443
+ </span>
444
+ </div>
445
+ </div>
446
+ </div>,
447
+ ]
448
+ `;
package/types.d.ts CHANGED
@@ -440,6 +440,10 @@ export interface AvatarProps extends GenericProps {
440
440
  theme?: Theme;
441
441
  /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
442
442
  thumbnailProps?: Omit<ThumbnailProps, "image" | "alt" | "size" | "theme" | "align" | "fillHeight" | "variant" | "aspectRatio">;
443
+ /** Props to pass to the link wrapping the thumbnail. */
444
+ linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
445
+ /** Custom react component for the link (can be used to inject react router Link). */
446
+ linkAs?: "a" | any;
443
447
  }
444
448
  /**
445
449
  * Avatar component.
@@ -1245,6 +1249,10 @@ export interface ThumbnailProps extends GenericProps {
1245
1249
  theme?: Theme;
1246
1250
  /** Variant of the component. */
1247
1251
  variant?: ThumbnailVariant;
1252
+ /** Props to pass to the link wrapping the thumbnail. */
1253
+ linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
1254
+ /** Custom react component for the link (can be used to inject react router Link). */
1255
+ linkAs?: "a" | any;
1248
1256
  }
1249
1257
  /**
1250
1258
  * Thumbnail component.
@@ -2521,6 +2529,10 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
2521
2529
  export interface UserBlockProps extends GenericProps {
2522
2530
  /** Props to pass to the avatar. */
2523
2531
  avatarProps?: AvatarProps;
2532
+ /** Props to pass to the link wrapping the avatar thumbnail. */
2533
+ linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
2534
+ /** Custom react component for the link (can be used to inject react router Link). */
2535
+ linkAs?: "a" | any;
2524
2536
  /** Simple action toolbar content. */
2525
2537
  simpleAction?: ReactNode;
2526
2538
  /** Multiple action toolbar content. */