cozy-sharing 4.9.0 → 6.0.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.
Files changed (117) hide show
  1. package/CHANGELOG.md +90 -0
  2. package/dist/SharedRecipients.js +1 -1
  3. package/dist/SharedStatus.js +1 -1
  4. package/dist/SharingBanner/hooks/useSharingInfos.js +1 -1
  5. package/dist/SharingDetailsModal.js +1 -1
  6. package/dist/SharingOwnerAvatar.js +1 -1
  7. package/dist/SharingProvider.js +21 -8
  8. package/dist/components/ContactSuggestion.js +15 -27
  9. package/dist/components/EditLinkPermissionDialog.js +72 -0
  10. package/dist/components/EditLinkPermissionDialog.spec.js +48 -0
  11. package/dist/components/EditableSharingModal.js +15 -62
  12. package/dist/components/{AvatarPlusX.js → Recipient/AvatarPlusX.js} +1 -1
  13. package/dist/components/{Identity.js → Recipient/Identity.js} +17 -16
  14. package/dist/components/Recipient/LinkRecipient.js +72 -0
  15. package/dist/components/Recipient/LinkRecipientPermissions.js +159 -0
  16. package/dist/components/Recipient/OwnerIdentity.js +44 -0
  17. package/dist/components/Recipient/Recipient.js +72 -0
  18. package/dist/components/{Recipient.spec.js → Recipient/Recipient.spec.js} +4 -45
  19. package/dist/components/Recipient/RecipientAvatar.js +33 -0
  20. package/dist/components/Recipient/RecipientConfirm.js +63 -0
  21. package/dist/components/Recipient/RecipientPermissions.js +126 -0
  22. package/dist/components/Recipient/RecipientPlusX.js +45 -0
  23. package/dist/components/Recipient/RecipientStatus.js +64 -0
  24. package/dist/components/Recipient/RecipientWithoutStatus.js +45 -0
  25. package/dist/components/Recipient/RecipientsAvatars.js +100 -0
  26. package/dist/components/{RecipientsAvatars.spec.js → Recipient/RecipientsAvatars.spec.js} +43 -2
  27. package/dist/components/{recipient.styl → Recipient/recipient.styl} +6 -2
  28. package/dist/components/ShareAutosuggest.js +176 -252
  29. package/dist/components/ShareAutosuggest.spec.js +3 -2
  30. package/dist/components/ShareByEmail.js +142 -193
  31. package/dist/components/ShareByEmail.spec.js +42 -23
  32. package/dist/components/ShareByLink.js +251 -357
  33. package/dist/components/ShareDialogCozyToCozy.js +16 -4
  34. package/dist/components/ShareDialogCozyToCozy.spec.js +12 -1
  35. package/dist/components/ShareDialogOnlyByLink.js +23 -10
  36. package/dist/components/ShareDialogTwoStepsConfirmationContainer.js +7 -7
  37. package/dist/components/ShareModal.js +5 -1
  38. package/dist/components/ShareRecipientsInput.js +44 -128
  39. package/dist/components/WhoHasAccess.js +43 -5
  40. package/dist/components/WhoHasAccessLight.js +3 -19
  41. package/dist/components/autosuggest.styl +21 -36
  42. package/dist/components/badge.styl +1 -1
  43. package/dist/helpers/documentType.js +6 -0
  44. package/dist/helpers/hooks.js +8 -1
  45. package/dist/helpers/link.js +5 -0
  46. package/dist/helpers/permissions.js +8 -0
  47. package/dist/helpers/recipients.js +24 -0
  48. package/dist/helpers/sharings.js +72 -53
  49. package/dist/helpers/synchronousJobQueue.js +67 -0
  50. package/dist/helpers/synchronousJobQueue.spec.js +97 -0
  51. package/dist/index.js +2 -1
  52. package/dist/queries/queries.js +72 -0
  53. package/dist/share.styl +0 -15
  54. package/dist/stylesheet.css +68 -93
  55. package/locales/en.json +29 -41
  56. package/locales/fr.json +26 -39
  57. package/package.json +10 -10
  58. package/src/SharedRecipients.jsx +1 -1
  59. package/src/SharedStatus.jsx +1 -1
  60. package/src/SharingBanner/hooks/useSharingInfos.jsx +1 -1
  61. package/src/SharingDetailsModal.jsx +1 -1
  62. package/src/SharingOwnerAvatar.jsx +1 -1
  63. package/src/SharingProvider.jsx +17 -4
  64. package/src/components/ContactSuggestion.jsx +25 -10
  65. package/src/components/EditLinkPermissionDialog.jsx +89 -0
  66. package/src/components/EditLinkPermissionDialog.spec.jsx +52 -0
  67. package/src/components/EditableSharingModal.jsx +58 -100
  68. package/src/components/{AvatarPlusX.jsx → Recipient/AvatarPlusX.jsx} +1 -1
  69. package/src/components/{Identity.jsx → Recipient/Identity.jsx} +0 -0
  70. package/src/components/Recipient/LinkRecipient.jsx +59 -0
  71. package/src/components/Recipient/LinkRecipientPermissions.jsx +157 -0
  72. package/src/components/Recipient/OwnerIdentity.jsx +20 -0
  73. package/src/components/Recipient/Recipient.jsx +79 -0
  74. package/src/components/{Recipient.spec.jsx → Recipient/Recipient.spec.jsx} +4 -42
  75. package/src/components/Recipient/RecipientAvatar.jsx +38 -0
  76. package/src/components/Recipient/RecipientConfirm.jsx +37 -0
  77. package/src/components/Recipient/RecipientPermissions.jsx +114 -0
  78. package/src/components/Recipient/RecipientPlusX.jsx +28 -0
  79. package/src/components/Recipient/RecipientStatus.jsx +48 -0
  80. package/src/components/Recipient/RecipientWithoutStatus.jsx +21 -0
  81. package/src/components/Recipient/RecipientsAvatars.jsx +108 -0
  82. package/src/components/{RecipientsAvatars.spec.jsx → Recipient/RecipientsAvatars.spec.jsx} +43 -2
  83. package/src/components/{recipient.styl → Recipient/recipient.styl} +6 -2
  84. package/src/components/ShareAutosuggest.jsx +136 -127
  85. package/src/components/ShareAutosuggest.spec.jsx +12 -8
  86. package/src/components/ShareByEmail.jsx +65 -90
  87. package/src/components/ShareByEmail.spec.jsx +39 -11
  88. package/src/components/ShareByLink.jsx +146 -238
  89. package/src/components/ShareDialogCozyToCozy.jsx +14 -2
  90. package/src/components/ShareDialogCozyToCozy.spec.jsx +8 -1
  91. package/src/components/ShareDialogOnlyByLink.jsx +30 -13
  92. package/src/components/ShareDialogTwoStepsConfirmationContainer.jsx +5 -5
  93. package/src/components/ShareModal.jsx +5 -1
  94. package/src/components/ShareRecipientsInput.jsx +30 -44
  95. package/src/components/WhoHasAccess.jsx +85 -27
  96. package/src/components/WhoHasAccessLight.jsx +2 -1
  97. package/src/components/__snapshots__/ContactSuggestion.spec.jsx.snap +915 -132
  98. package/src/components/__snapshots__/ShareRecipientsInput.spec.jsx.snap +86 -102
  99. package/src/components/autosuggest.styl +21 -36
  100. package/src/components/badge.styl +1 -1
  101. package/src/helpers/documentType.js +6 -0
  102. package/src/helpers/hooks.js +11 -1
  103. package/src/helpers/link.js +4 -0
  104. package/src/helpers/permissions.js +15 -0
  105. package/src/helpers/recipients.js +21 -0
  106. package/src/helpers/sharings.js +15 -12
  107. package/src/helpers/synchronousJobQueue.js +22 -0
  108. package/src/helpers/synchronousJobQueue.spec.js +75 -0
  109. package/src/index.jsx +1 -0
  110. package/src/queries/queries.js +75 -0
  111. package/src/share.styl +0 -15
  112. package/dist/SharingBanner/helpers/queries.js +0 -12
  113. package/dist/components/ContactsAndGroupsDataLoader.js +0 -50
  114. package/dist/components/Recipient.js +0 -450
  115. package/src/SharingBanner/helpers/queries.js +0 -14
  116. package/src/components/ContactsAndGroupsDataLoader.jsx +0 -30
  117. package/src/components/Recipient.jsx +0 -415
package/src/components/__snapshots__/ContactSuggestion.spec.jsx.snap CHANGED
@@ -52,55 +52,316 @@ exports[`ContactSuggestion component should display contact suggestion for a con
52
52
  }
53
53
  t={[MockFunction]}
54
54
  >
55
- <div
56
- className="recipient"
55
+ <WithStyles(ForwardRef(ListItem))
56
+ button={true}
57
57
  >
58
- <Avatar
59
- className=""
60
- disabled={false}
61
- ghost={false}
62
- icon={[Function]}
63
- image=""
64
- size="small"
65
- style={Object {}}
66
- text="JS"
67
- >
68
- <div
69
- className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
70
- style={
71
- Object {
72
- "--circleSize": "32px",
73
- "backgroundColor": "#C2ADF4",
74
- }
58
+ <ForwardRef(ListItem)
59
+ button={true}
60
+ classes={
61
+ Object {
62
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
63
+ "button": "MuiListItem-button",
64
+ "container": "MuiListItem-container",
65
+ "dense": "MuiListItem-dense",
66
+ "disabled": "Mui-disabled",
67
+ "divider": "MuiListItem-divider",
68
+ "focusVisible": "Mui-focusVisible",
69
+ "gutters": "MuiListItem-gutters",
70
+ "root": "MuiListItem-root",
71
+ "secondaryAction": "MuiListItem-secondaryAction",
72
+ "selected": "Mui-selected",
75
73
  }
76
- >
77
- <span
78
- className="styles__c-avatar-initials___310qC"
79
- >
80
- JS
81
- </span>
82
- </div>
83
- </Avatar>
84
- <Identity
85
- details="https://jonsnow.mycozy.cloud"
86
- name="Jon Snow"
74
+ }
87
75
  >
88
- <div
89
- className="recipient-idents u-ml-1"
76
+ <WithStyles(ForwardRef(ButtonBase))
77
+ className="MuiListItem-root MuiListItem-gutters MuiListItem-button"
78
+ component="div"
79
+ disabled={false}
80
+ focusVisibleClassName="Mui-focusVisible"
90
81
  >
91
- <div
92
- className="recipient-user"
93
- >
94
- Jon Snow
95
- </div>
96
- <div
97
- className="recipient-details"
82
+ <ForwardRef(ButtonBase)
83
+ className="MuiListItem-root MuiListItem-gutters MuiListItem-button"
84
+ classes={
85
+ Object {
86
+ "disabled": "Mui-disabled",
87
+ "focusVisible": "Mui-focusVisible",
88
+ "root": "MuiButtonBase-root",
89
+ }
90
+ }
91
+ component="div"
92
+ disabled={false}
93
+ focusVisibleClassName="Mui-focusVisible"
98
94
  >
99
- https://jonsnow.mycozy.cloud
100
- </div>
101
- </div>
102
- </Identity>
103
- </div>
95
+ <div
96
+ aria-disabled={false}
97
+ className="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
98
+ onBlur={[Function]}
99
+ onDragLeave={[Function]}
100
+ onFocus={[Function]}
101
+ onKeyDown={[Function]}
102
+ onKeyUp={[Function]}
103
+ onMouseDown={[Function]}
104
+ onMouseLeave={[Function]}
105
+ onMouseUp={[Function]}
106
+ onTouchEnd={[Function]}
107
+ onTouchMove={[Function]}
108
+ onTouchStart={[Function]}
109
+ role="button"
110
+ tabIndex={0}
111
+ >
112
+ <WithStyles(ForwardRef(ListItemIcon))
113
+ key=".0"
114
+ >
115
+ <ForwardRef(ListItemIcon)
116
+ classes={
117
+ Object {
118
+ "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
119
+ "root": "MuiListItemIcon-root",
120
+ }
121
+ }
122
+ >
123
+ <div
124
+ className="MuiListItemIcon-root"
125
+ >
126
+ <Avatar
127
+ className=""
128
+ disabled={false}
129
+ ghost={false}
130
+ icon={[Function]}
131
+ image=""
132
+ size="small"
133
+ style={Object {}}
134
+ text="JS"
135
+ >
136
+ <div
137
+ className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
138
+ style={
139
+ Object {
140
+ "--circleSize": "32px",
141
+ "backgroundColor": "#C2ADF4",
142
+ }
143
+ }
144
+ >
145
+ <span
146
+ className="styles__c-avatar-initials___310qC"
147
+ >
148
+ JS
149
+ </span>
150
+ </div>
151
+ </Avatar>
152
+ </div>
153
+ </ForwardRef(ListItemIcon)>
154
+ </WithStyles(ForwardRef(ListItemIcon))>
155
+ <ListItemText
156
+ ellipsis={true}
157
+ key=".1"
158
+ primary="Jon Snow"
159
+ secondary="https://jonsnow.mycozy.cloud"
160
+ >
161
+ <WithStyles(ForwardRef(ListItemText))
162
+ primary="Jon Snow"
163
+ primaryTypographyProps={
164
+ Object {
165
+ "classes": Object {
166
+ "root": "u-db u-ellipsis",
167
+ },
168
+ }
169
+ }
170
+ secondary="https://jonsnow.mycozy.cloud"
171
+ secondaryTypographyProps={
172
+ Object {
173
+ "classes": Object {
174
+ "root": "u-db u-ellipsis",
175
+ },
176
+ "variant": "caption",
177
+ }
178
+ }
179
+ >
180
+ <ForwardRef(ListItemText)
181
+ classes={
182
+ Object {
183
+ "dense": "MuiListItemText-dense",
184
+ "inset": "MuiListItemText-inset",
185
+ "multiline": "MuiListItemText-multiline",
186
+ "primary": "MuiListItemText-primary",
187
+ "root": "MuiListItemText-root",
188
+ "secondary": "MuiListItemText-secondary",
189
+ }
190
+ }
191
+ primary="Jon Snow"
192
+ primaryTypographyProps={
193
+ Object {
194
+ "classes": Object {
195
+ "root": "u-db u-ellipsis",
196
+ },
197
+ }
198
+ }
199
+ secondary="https://jonsnow.mycozy.cloud"
200
+ secondaryTypographyProps={
201
+ Object {
202
+ "classes": Object {
203
+ "root": "u-db u-ellipsis",
204
+ },
205
+ "variant": "caption",
206
+ }
207
+ }
208
+ >
209
+ <div
210
+ className="MuiListItemText-root MuiListItemText-multiline"
211
+ >
212
+ <WithStyles(ForwardRef(Typography))
213
+ className="MuiListItemText-primary"
214
+ classes={
215
+ Object {
216
+ "root": "u-db u-ellipsis",
217
+ }
218
+ }
219
+ component="span"
220
+ display="block"
221
+ variant="body1"
222
+ >
223
+ <ForwardRef(Typography)
224
+ className="MuiListItemText-primary"
225
+ classes={
226
+ Object {
227
+ "alignCenter": "MuiTypography-alignCenter",
228
+ "alignJustify": "MuiTypography-alignJustify",
229
+ "alignLeft": "MuiTypography-alignLeft",
230
+ "alignRight": "MuiTypography-alignRight",
231
+ "body1": "MuiTypography-body1",
232
+ "body2": "MuiTypography-body2",
233
+ "button": "MuiTypography-button",
234
+ "caption": "MuiTypography-caption",
235
+ "colorError": "MuiTypography-colorError",
236
+ "colorInherit": "MuiTypography-colorInherit",
237
+ "colorPrimary": "MuiTypography-colorPrimary",
238
+ "colorSecondary": "MuiTypography-colorSecondary",
239
+ "colorTextPrimary": "MuiTypography-colorTextPrimary",
240
+ "colorTextSecondary": "MuiTypography-colorTextSecondary",
241
+ "displayBlock": "MuiTypography-displayBlock",
242
+ "displayInline": "MuiTypography-displayInline",
243
+ "gutterBottom": "MuiTypography-gutterBottom",
244
+ "h1": "MuiTypography-h1",
245
+ "h2": "MuiTypography-h2",
246
+ "h3": "MuiTypography-h3",
247
+ "h4": "MuiTypography-h4",
248
+ "h5": "MuiTypography-h5",
249
+ "h6": "MuiTypography-h6",
250
+ "noWrap": "MuiTypography-noWrap",
251
+ "overline": "MuiTypography-overline",
252
+ "paragraph": "MuiTypography-paragraph",
253
+ "root": "MuiTypography-root u-db u-ellipsis",
254
+ "srOnly": "MuiTypography-srOnly",
255
+ "subtitle1": "MuiTypography-subtitle1",
256
+ "subtitle2": "MuiTypography-subtitle2",
257
+ }
258
+ }
259
+ component="span"
260
+ display="block"
261
+ variant="body1"
262
+ >
263
+ <span
264
+ className="MuiTypography-root u-db u-ellipsis MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
265
+ >
266
+ Jon Snow
267
+ </span>
268
+ </ForwardRef(Typography)>
269
+ </WithStyles(ForwardRef(Typography))>
270
+ <WithStyles(ForwardRef(Typography))
271
+ className="MuiListItemText-secondary"
272
+ classes={
273
+ Object {
274
+ "root": "u-db u-ellipsis",
275
+ }
276
+ }
277
+ color="textSecondary"
278
+ display="block"
279
+ variant="caption"
280
+ >
281
+ <ForwardRef(Typography)
282
+ className="MuiListItemText-secondary"
283
+ classes={
284
+ Object {
285
+ "alignCenter": "MuiTypography-alignCenter",
286
+ "alignJustify": "MuiTypography-alignJustify",
287
+ "alignLeft": "MuiTypography-alignLeft",
288
+ "alignRight": "MuiTypography-alignRight",
289
+ "body1": "MuiTypography-body1",
290
+ "body2": "MuiTypography-body2",
291
+ "button": "MuiTypography-button",
292
+ "caption": "MuiTypography-caption",
293
+ "colorError": "MuiTypography-colorError",
294
+ "colorInherit": "MuiTypography-colorInherit",
295
+ "colorPrimary": "MuiTypography-colorPrimary",
296
+ "colorSecondary": "MuiTypography-colorSecondary",
297
+ "colorTextPrimary": "MuiTypography-colorTextPrimary",
298
+ "colorTextSecondary": "MuiTypography-colorTextSecondary",
299
+ "displayBlock": "MuiTypography-displayBlock",
300
+ "displayInline": "MuiTypography-displayInline",
301
+ "gutterBottom": "MuiTypography-gutterBottom",
302
+ "h1": "MuiTypography-h1",
303
+ "h2": "MuiTypography-h2",
304
+ "h3": "MuiTypography-h3",
305
+ "h4": "MuiTypography-h4",
306
+ "h5": "MuiTypography-h5",
307
+ "h6": "MuiTypography-h6",
308
+ "noWrap": "MuiTypography-noWrap",
309
+ "overline": "MuiTypography-overline",
310
+ "paragraph": "MuiTypography-paragraph",
311
+ "root": "MuiTypography-root u-db u-ellipsis",
312
+ "srOnly": "MuiTypography-srOnly",
313
+ "subtitle1": "MuiTypography-subtitle1",
314
+ "subtitle2": "MuiTypography-subtitle2",
315
+ }
316
+ }
317
+ color="textSecondary"
318
+ display="block"
319
+ variant="caption"
320
+ >
321
+ <span
322
+ className="MuiTypography-root u-db u-ellipsis MuiListItemText-secondary MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock"
323
+ >
324
+ https://jonsnow.mycozy.cloud
325
+ </span>
326
+ </ForwardRef(Typography)>
327
+ </WithStyles(ForwardRef(Typography))>
328
+ </div>
329
+ </ForwardRef(ListItemText)>
330
+ </WithStyles(ForwardRef(ListItemText))>
331
+ </ListItemText>
332
+ <WithStyles(memo)
333
+ center={false}
334
+ >
335
+ <ForwardRef(TouchRipple)
336
+ center={false}
337
+ classes={
338
+ Object {
339
+ "child": "MuiTouchRipple-child",
340
+ "childLeaving": "MuiTouchRipple-childLeaving",
341
+ "childPulsate": "MuiTouchRipple-childPulsate",
342
+ "ripple": "MuiTouchRipple-ripple",
343
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
344
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
345
+ "root": "MuiTouchRipple-root",
346
+ }
347
+ }
348
+ >
349
+ <span
350
+ className="MuiTouchRipple-root"
351
+ >
352
+ <TransitionGroup
353
+ childFactory={[Function]}
354
+ component={null}
355
+ exit={true}
356
+ />
357
+ </span>
358
+ </ForwardRef(TouchRipple)>
359
+ </WithStyles(memo)>
360
+ </div>
361
+ </ForwardRef(ButtonBase)>
362
+ </WithStyles(ForwardRef(ButtonBase))>
363
+ </ForwardRef(ListItem)>
364
+ </WithStyles(ForwardRef(ListItem))>
104
365
  </ContactSuggestion>
105
366
  `;
106
367
 
@@ -138,55 +399,316 @@ exports[`ContactSuggestion component should display contact suggestion for a con
138
399
  }
139
400
  t={[MockFunction]}
140
401
  >
141
- <div
142
- className="recipient"
402
+ <WithStyles(ForwardRef(ListItem))
403
+ button={true}
143
404
  >
144
- <Avatar
145
- className=""
146
- disabled={false}
147
- ghost={false}
148
- icon={[Function]}
149
- image=""
150
- size="small"
151
- style={Object {}}
152
- text="J"
153
- >
154
- <div
155
- className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
156
- style={
157
- Object {
158
- "--circleSize": "32px",
159
- "backgroundColor": "#0DCBCF",
160
- }
405
+ <ForwardRef(ListItem)
406
+ button={true}
407
+ classes={
408
+ Object {
409
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
410
+ "button": "MuiListItem-button",
411
+ "container": "MuiListItem-container",
412
+ "dense": "MuiListItem-dense",
413
+ "disabled": "Mui-disabled",
414
+ "divider": "MuiListItem-divider",
415
+ "focusVisible": "Mui-focusVisible",
416
+ "gutters": "MuiListItem-gutters",
417
+ "root": "MuiListItem-root",
418
+ "secondaryAction": "MuiListItem-secondaryAction",
419
+ "selected": "Mui-selected",
161
420
  }
162
- >
163
- <span
164
- className="styles__c-avatar-initials___310qC"
165
- >
166
- J
167
- </span>
168
- </div>
169
- </Avatar>
170
- <Identity
171
- details="-"
172
- name="jon.snow@email.com"
421
+ }
173
422
  >
174
- <div
175
- className="recipient-idents u-ml-1"
423
+ <WithStyles(ForwardRef(ButtonBase))
424
+ className="MuiListItem-root MuiListItem-gutters MuiListItem-button"
425
+ component="div"
426
+ disabled={false}
427
+ focusVisibleClassName="Mui-focusVisible"
176
428
  >
177
- <div
178
- className="recipient-user"
179
- >
180
- jon.snow@email.com
181
- </div>
182
- <div
183
- className="recipient-details"
429
+ <ForwardRef(ButtonBase)
430
+ className="MuiListItem-root MuiListItem-gutters MuiListItem-button"
431
+ classes={
432
+ Object {
433
+ "disabled": "Mui-disabled",
434
+ "focusVisible": "Mui-focusVisible",
435
+ "root": "MuiButtonBase-root",
436
+ }
437
+ }
438
+ component="div"
439
+ disabled={false}
440
+ focusVisibleClassName="Mui-focusVisible"
184
441
  >
185
- -
186
- </div>
187
- </div>
188
- </Identity>
189
- </div>
442
+ <div
443
+ aria-disabled={false}
444
+ className="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
445
+ onBlur={[Function]}
446
+ onDragLeave={[Function]}
447
+ onFocus={[Function]}
448
+ onKeyDown={[Function]}
449
+ onKeyUp={[Function]}
450
+ onMouseDown={[Function]}
451
+ onMouseLeave={[Function]}
452
+ onMouseUp={[Function]}
453
+ onTouchEnd={[Function]}
454
+ onTouchMove={[Function]}
455
+ onTouchStart={[Function]}
456
+ role="button"
457
+ tabIndex={0}
458
+ >
459
+ <WithStyles(ForwardRef(ListItemIcon))
460
+ key=".0"
461
+ >
462
+ <ForwardRef(ListItemIcon)
463
+ classes={
464
+ Object {
465
+ "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
466
+ "root": "MuiListItemIcon-root",
467
+ }
468
+ }
469
+ >
470
+ <div
471
+ className="MuiListItemIcon-root"
472
+ >
473
+ <Avatar
474
+ className=""
475
+ disabled={false}
476
+ ghost={false}
477
+ icon={[Function]}
478
+ image=""
479
+ size="small"
480
+ style={Object {}}
481
+ text="J"
482
+ >
483
+ <div
484
+ className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
485
+ style={
486
+ Object {
487
+ "--circleSize": "32px",
488
+ "backgroundColor": "#0DCBCF",
489
+ }
490
+ }
491
+ >
492
+ <span
493
+ className="styles__c-avatar-initials___310qC"
494
+ >
495
+ J
496
+ </span>
497
+ </div>
498
+ </Avatar>
499
+ </div>
500
+ </ForwardRef(ListItemIcon)>
501
+ </WithStyles(ForwardRef(ListItemIcon))>
502
+ <ListItemText
503
+ ellipsis={true}
504
+ key=".1"
505
+ primary="jon.snow@email.com"
506
+ secondary="-"
507
+ >
508
+ <WithStyles(ForwardRef(ListItemText))
509
+ primary="jon.snow@email.com"
510
+ primaryTypographyProps={
511
+ Object {
512
+ "classes": Object {
513
+ "root": "u-db u-ellipsis",
514
+ },
515
+ }
516
+ }
517
+ secondary="-"
518
+ secondaryTypographyProps={
519
+ Object {
520
+ "classes": Object {
521
+ "root": "u-db u-ellipsis",
522
+ },
523
+ "variant": "caption",
524
+ }
525
+ }
526
+ >
527
+ <ForwardRef(ListItemText)
528
+ classes={
529
+ Object {
530
+ "dense": "MuiListItemText-dense",
531
+ "inset": "MuiListItemText-inset",
532
+ "multiline": "MuiListItemText-multiline",
533
+ "primary": "MuiListItemText-primary",
534
+ "root": "MuiListItemText-root",
535
+ "secondary": "MuiListItemText-secondary",
536
+ }
537
+ }
538
+ primary="jon.snow@email.com"
539
+ primaryTypographyProps={
540
+ Object {
541
+ "classes": Object {
542
+ "root": "u-db u-ellipsis",
543
+ },
544
+ }
545
+ }
546
+ secondary="-"
547
+ secondaryTypographyProps={
548
+ Object {
549
+ "classes": Object {
550
+ "root": "u-db u-ellipsis",
551
+ },
552
+ "variant": "caption",
553
+ }
554
+ }
555
+ >
556
+ <div
557
+ className="MuiListItemText-root MuiListItemText-multiline"
558
+ >
559
+ <WithStyles(ForwardRef(Typography))
560
+ className="MuiListItemText-primary"
561
+ classes={
562
+ Object {
563
+ "root": "u-db u-ellipsis",
564
+ }
565
+ }
566
+ component="span"
567
+ display="block"
568
+ variant="body1"
569
+ >
570
+ <ForwardRef(Typography)
571
+ className="MuiListItemText-primary"
572
+ classes={
573
+ Object {
574
+ "alignCenter": "MuiTypography-alignCenter",
575
+ "alignJustify": "MuiTypography-alignJustify",
576
+ "alignLeft": "MuiTypography-alignLeft",
577
+ "alignRight": "MuiTypography-alignRight",
578
+ "body1": "MuiTypography-body1",
579
+ "body2": "MuiTypography-body2",
580
+ "button": "MuiTypography-button",
581
+ "caption": "MuiTypography-caption",
582
+ "colorError": "MuiTypography-colorError",
583
+ "colorInherit": "MuiTypography-colorInherit",
584
+ "colorPrimary": "MuiTypography-colorPrimary",
585
+ "colorSecondary": "MuiTypography-colorSecondary",
586
+ "colorTextPrimary": "MuiTypography-colorTextPrimary",
587
+ "colorTextSecondary": "MuiTypography-colorTextSecondary",
588
+ "displayBlock": "MuiTypography-displayBlock",
589
+ "displayInline": "MuiTypography-displayInline",
590
+ "gutterBottom": "MuiTypography-gutterBottom",
591
+ "h1": "MuiTypography-h1",
592
+ "h2": "MuiTypography-h2",
593
+ "h3": "MuiTypography-h3",
594
+ "h4": "MuiTypography-h4",
595
+ "h5": "MuiTypography-h5",
596
+ "h6": "MuiTypography-h6",
597
+ "noWrap": "MuiTypography-noWrap",
598
+ "overline": "MuiTypography-overline",
599
+ "paragraph": "MuiTypography-paragraph",
600
+ "root": "MuiTypography-root u-db u-ellipsis",
601
+ "srOnly": "MuiTypography-srOnly",
602
+ "subtitle1": "MuiTypography-subtitle1",
603
+ "subtitle2": "MuiTypography-subtitle2",
604
+ }
605
+ }
606
+ component="span"
607
+ display="block"
608
+ variant="body1"
609
+ >
610
+ <span
611
+ className="MuiTypography-root u-db u-ellipsis MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
612
+ >
613
+ jon.snow@email.com
614
+ </span>
615
+ </ForwardRef(Typography)>
616
+ </WithStyles(ForwardRef(Typography))>
617
+ <WithStyles(ForwardRef(Typography))
618
+ className="MuiListItemText-secondary"
619
+ classes={
620
+ Object {
621
+ "root": "u-db u-ellipsis",
622
+ }
623
+ }
624
+ color="textSecondary"
625
+ display="block"
626
+ variant="caption"
627
+ >
628
+ <ForwardRef(Typography)
629
+ className="MuiListItemText-secondary"
630
+ classes={
631
+ Object {
632
+ "alignCenter": "MuiTypography-alignCenter",
633
+ "alignJustify": "MuiTypography-alignJustify",
634
+ "alignLeft": "MuiTypography-alignLeft",
635
+ "alignRight": "MuiTypography-alignRight",
636
+ "body1": "MuiTypography-body1",
637
+ "body2": "MuiTypography-body2",
638
+ "button": "MuiTypography-button",
639
+ "caption": "MuiTypography-caption",
640
+ "colorError": "MuiTypography-colorError",
641
+ "colorInherit": "MuiTypography-colorInherit",
642
+ "colorPrimary": "MuiTypography-colorPrimary",
643
+ "colorSecondary": "MuiTypography-colorSecondary",
644
+ "colorTextPrimary": "MuiTypography-colorTextPrimary",
645
+ "colorTextSecondary": "MuiTypography-colorTextSecondary",
646
+ "displayBlock": "MuiTypography-displayBlock",
647
+ "displayInline": "MuiTypography-displayInline",
648
+ "gutterBottom": "MuiTypography-gutterBottom",
649
+ "h1": "MuiTypography-h1",
650
+ "h2": "MuiTypography-h2",
651
+ "h3": "MuiTypography-h3",
652
+ "h4": "MuiTypography-h4",
653
+ "h5": "MuiTypography-h5",
654
+ "h6": "MuiTypography-h6",
655
+ "noWrap": "MuiTypography-noWrap",
656
+ "overline": "MuiTypography-overline",
657
+ "paragraph": "MuiTypography-paragraph",
658
+ "root": "MuiTypography-root u-db u-ellipsis",
659
+ "srOnly": "MuiTypography-srOnly",
660
+ "subtitle1": "MuiTypography-subtitle1",
661
+ "subtitle2": "MuiTypography-subtitle2",
662
+ }
663
+ }
664
+ color="textSecondary"
665
+ display="block"
666
+ variant="caption"
667
+ >
668
+ <span
669
+ className="MuiTypography-root u-db u-ellipsis MuiListItemText-secondary MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock"
670
+ >
671
+ -
672
+ </span>
673
+ </ForwardRef(Typography)>
674
+ </WithStyles(ForwardRef(Typography))>
675
+ </div>
676
+ </ForwardRef(ListItemText)>
677
+ </WithStyles(ForwardRef(ListItemText))>
678
+ </ListItemText>
679
+ <WithStyles(memo)
680
+ center={false}
681
+ >
682
+ <ForwardRef(TouchRipple)
683
+ center={false}
684
+ classes={
685
+ Object {
686
+ "child": "MuiTouchRipple-child",
687
+ "childLeaving": "MuiTouchRipple-childLeaving",
688
+ "childPulsate": "MuiTouchRipple-childPulsate",
689
+ "ripple": "MuiTouchRipple-ripple",
690
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
691
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
692
+ "root": "MuiTouchRipple-root",
693
+ }
694
+ }
695
+ >
696
+ <span
697
+ className="MuiTouchRipple-root"
698
+ >
699
+ <TransitionGroup
700
+ childFactory={[Function]}
701
+ component={null}
702
+ exit={true}
703
+ />
704
+ </span>
705
+ </ForwardRef(TouchRipple)>
706
+ </WithStyles(memo)>
707
+ </div>
708
+ </ForwardRef(ButtonBase)>
709
+ </WithStyles(ForwardRef(ButtonBase))>
710
+ </ForwardRef(ListItem)>
711
+ </WithStyles(ForwardRef(ListItem))>
190
712
  </ContactSuggestion>
191
713
  `;
192
714
 
@@ -275,54 +797,315 @@ exports[`ContactSuggestion component should display contact suggestion for a gro
275
797
  }
276
798
  t={[MockFunction]}
277
799
  >
278
- <div
279
- className="recipient"
800
+ <WithStyles(ForwardRef(ListItem))
801
+ button={true}
280
802
  >
281
- <Avatar
282
- className=""
283
- disabled={false}
284
- ghost={false}
285
- icon={[Function]}
286
- image=""
287
- size="small"
288
- style={Object {}}
289
- text="G"
290
- >
291
- <div
292
- className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
293
- style={
294
- Object {
295
- "--circleSize": "32px",
296
- "backgroundColor": "#7F6BEE",
297
- }
803
+ <ForwardRef(ListItem)
804
+ button={true}
805
+ classes={
806
+ Object {
807
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
808
+ "button": "MuiListItem-button",
809
+ "container": "MuiListItem-container",
810
+ "dense": "MuiListItem-dense",
811
+ "disabled": "Mui-disabled",
812
+ "divider": "MuiListItem-divider",
813
+ "focusVisible": "Mui-focusVisible",
814
+ "gutters": "MuiListItem-gutters",
815
+ "root": "MuiListItem-root",
816
+ "secondaryAction": "MuiListItem-secondaryAction",
817
+ "selected": "Mui-selected",
298
818
  }
299
- >
300
- <span
301
- className="styles__c-avatar-initials___310qC"
302
- >
303
- G
304
- </span>
305
- </div>
306
- </Avatar>
307
- <Identity
308
- details="2 members"
309
- name="The Night's Watch"
819
+ }
310
820
  >
311
- <div
312
- className="recipient-idents u-ml-1"
821
+ <WithStyles(ForwardRef(ButtonBase))
822
+ className="MuiListItem-root MuiListItem-gutters MuiListItem-button"
823
+ component="div"
824
+ disabled={false}
825
+ focusVisibleClassName="Mui-focusVisible"
313
826
  >
314
- <div
315
- className="recipient-user"
316
- >
317
- The Night's Watch
318
- </div>
319
- <div
320
- className="recipient-details"
827
+ <ForwardRef(ButtonBase)
828
+ className="MuiListItem-root MuiListItem-gutters MuiListItem-button"
829
+ classes={
830
+ Object {
831
+ "disabled": "Mui-disabled",
832
+ "focusVisible": "Mui-focusVisible",
833
+ "root": "MuiButtonBase-root",
834
+ }
835
+ }
836
+ component="div"
837
+ disabled={false}
838
+ focusVisibleClassName="Mui-focusVisible"
321
839
  >
322
- 2 members
323
- </div>
324
- </div>
325
- </Identity>
326
- </div>
840
+ <div
841
+ aria-disabled={false}
842
+ className="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
843
+ onBlur={[Function]}
844
+ onDragLeave={[Function]}
845
+ onFocus={[Function]}
846
+ onKeyDown={[Function]}
847
+ onKeyUp={[Function]}
848
+ onMouseDown={[Function]}
849
+ onMouseLeave={[Function]}
850
+ onMouseUp={[Function]}
851
+ onTouchEnd={[Function]}
852
+ onTouchMove={[Function]}
853
+ onTouchStart={[Function]}
854
+ role="button"
855
+ tabIndex={0}
856
+ >
857
+ <WithStyles(ForwardRef(ListItemIcon))
858
+ key=".0"
859
+ >
860
+ <ForwardRef(ListItemIcon)
861
+ classes={
862
+ Object {
863
+ "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
864
+ "root": "MuiListItemIcon-root",
865
+ }
866
+ }
867
+ >
868
+ <div
869
+ className="MuiListItemIcon-root"
870
+ >
871
+ <Avatar
872
+ className=""
873
+ disabled={false}
874
+ ghost={false}
875
+ icon={[Function]}
876
+ image=""
877
+ size="small"
878
+ style={Object {}}
879
+ text="G"
880
+ >
881
+ <div
882
+ className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
883
+ style={
884
+ Object {
885
+ "--circleSize": "32px",
886
+ "backgroundColor": "#7F6BEE",
887
+ }
888
+ }
889
+ >
890
+ <span
891
+ className="styles__c-avatar-initials___310qC"
892
+ >
893
+ G
894
+ </span>
895
+ </div>
896
+ </Avatar>
897
+ </div>
898
+ </ForwardRef(ListItemIcon)>
899
+ </WithStyles(ForwardRef(ListItemIcon))>
900
+ <ListItemText
901
+ ellipsis={true}
902
+ key=".1"
903
+ primary="The Night's Watch"
904
+ secondary="2 members"
905
+ >
906
+ <WithStyles(ForwardRef(ListItemText))
907
+ primary="The Night's Watch"
908
+ primaryTypographyProps={
909
+ Object {
910
+ "classes": Object {
911
+ "root": "u-db u-ellipsis",
912
+ },
913
+ }
914
+ }
915
+ secondary="2 members"
916
+ secondaryTypographyProps={
917
+ Object {
918
+ "classes": Object {
919
+ "root": "u-db u-ellipsis",
920
+ },
921
+ "variant": "caption",
922
+ }
923
+ }
924
+ >
925
+ <ForwardRef(ListItemText)
926
+ classes={
927
+ Object {
928
+ "dense": "MuiListItemText-dense",
929
+ "inset": "MuiListItemText-inset",
930
+ "multiline": "MuiListItemText-multiline",
931
+ "primary": "MuiListItemText-primary",
932
+ "root": "MuiListItemText-root",
933
+ "secondary": "MuiListItemText-secondary",
934
+ }
935
+ }
936
+ primary="The Night's Watch"
937
+ primaryTypographyProps={
938
+ Object {
939
+ "classes": Object {
940
+ "root": "u-db u-ellipsis",
941
+ },
942
+ }
943
+ }
944
+ secondary="2 members"
945
+ secondaryTypographyProps={
946
+ Object {
947
+ "classes": Object {
948
+ "root": "u-db u-ellipsis",
949
+ },
950
+ "variant": "caption",
951
+ }
952
+ }
953
+ >
954
+ <div
955
+ className="MuiListItemText-root MuiListItemText-multiline"
956
+ >
957
+ <WithStyles(ForwardRef(Typography))
958
+ className="MuiListItemText-primary"
959
+ classes={
960
+ Object {
961
+ "root": "u-db u-ellipsis",
962
+ }
963
+ }
964
+ component="span"
965
+ display="block"
966
+ variant="body1"
967
+ >
968
+ <ForwardRef(Typography)
969
+ className="MuiListItemText-primary"
970
+ classes={
971
+ Object {
972
+ "alignCenter": "MuiTypography-alignCenter",
973
+ "alignJustify": "MuiTypography-alignJustify",
974
+ "alignLeft": "MuiTypography-alignLeft",
975
+ "alignRight": "MuiTypography-alignRight",
976
+ "body1": "MuiTypography-body1",
977
+ "body2": "MuiTypography-body2",
978
+ "button": "MuiTypography-button",
979
+ "caption": "MuiTypography-caption",
980
+ "colorError": "MuiTypography-colorError",
981
+ "colorInherit": "MuiTypography-colorInherit",
982
+ "colorPrimary": "MuiTypography-colorPrimary",
983
+ "colorSecondary": "MuiTypography-colorSecondary",
984
+ "colorTextPrimary": "MuiTypography-colorTextPrimary",
985
+ "colorTextSecondary": "MuiTypography-colorTextSecondary",
986
+ "displayBlock": "MuiTypography-displayBlock",
987
+ "displayInline": "MuiTypography-displayInline",
988
+ "gutterBottom": "MuiTypography-gutterBottom",
989
+ "h1": "MuiTypography-h1",
990
+ "h2": "MuiTypography-h2",
991
+ "h3": "MuiTypography-h3",
992
+ "h4": "MuiTypography-h4",
993
+ "h5": "MuiTypography-h5",
994
+ "h6": "MuiTypography-h6",
995
+ "noWrap": "MuiTypography-noWrap",
996
+ "overline": "MuiTypography-overline",
997
+ "paragraph": "MuiTypography-paragraph",
998
+ "root": "MuiTypography-root u-db u-ellipsis",
999
+ "srOnly": "MuiTypography-srOnly",
1000
+ "subtitle1": "MuiTypography-subtitle1",
1001
+ "subtitle2": "MuiTypography-subtitle2",
1002
+ }
1003
+ }
1004
+ component="span"
1005
+ display="block"
1006
+ variant="body1"
1007
+ >
1008
+ <span
1009
+ className="MuiTypography-root u-db u-ellipsis MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
1010
+ >
1011
+ The Night's Watch
1012
+ </span>
1013
+ </ForwardRef(Typography)>
1014
+ </WithStyles(ForwardRef(Typography))>
1015
+ <WithStyles(ForwardRef(Typography))
1016
+ className="MuiListItemText-secondary"
1017
+ classes={
1018
+ Object {
1019
+ "root": "u-db u-ellipsis",
1020
+ }
1021
+ }
1022
+ color="textSecondary"
1023
+ display="block"
1024
+ variant="caption"
1025
+ >
1026
+ <ForwardRef(Typography)
1027
+ className="MuiListItemText-secondary"
1028
+ classes={
1029
+ Object {
1030
+ "alignCenter": "MuiTypography-alignCenter",
1031
+ "alignJustify": "MuiTypography-alignJustify",
1032
+ "alignLeft": "MuiTypography-alignLeft",
1033
+ "alignRight": "MuiTypography-alignRight",
1034
+ "body1": "MuiTypography-body1",
1035
+ "body2": "MuiTypography-body2",
1036
+ "button": "MuiTypography-button",
1037
+ "caption": "MuiTypography-caption",
1038
+ "colorError": "MuiTypography-colorError",
1039
+ "colorInherit": "MuiTypography-colorInherit",
1040
+ "colorPrimary": "MuiTypography-colorPrimary",
1041
+ "colorSecondary": "MuiTypography-colorSecondary",
1042
+ "colorTextPrimary": "MuiTypography-colorTextPrimary",
1043
+ "colorTextSecondary": "MuiTypography-colorTextSecondary",
1044
+ "displayBlock": "MuiTypography-displayBlock",
1045
+ "displayInline": "MuiTypography-displayInline",
1046
+ "gutterBottom": "MuiTypography-gutterBottom",
1047
+ "h1": "MuiTypography-h1",
1048
+ "h2": "MuiTypography-h2",
1049
+ "h3": "MuiTypography-h3",
1050
+ "h4": "MuiTypography-h4",
1051
+ "h5": "MuiTypography-h5",
1052
+ "h6": "MuiTypography-h6",
1053
+ "noWrap": "MuiTypography-noWrap",
1054
+ "overline": "MuiTypography-overline",
1055
+ "paragraph": "MuiTypography-paragraph",
1056
+ "root": "MuiTypography-root u-db u-ellipsis",
1057
+ "srOnly": "MuiTypography-srOnly",
1058
+ "subtitle1": "MuiTypography-subtitle1",
1059
+ "subtitle2": "MuiTypography-subtitle2",
1060
+ }
1061
+ }
1062
+ color="textSecondary"
1063
+ display="block"
1064
+ variant="caption"
1065
+ >
1066
+ <span
1067
+ className="MuiTypography-root u-db u-ellipsis MuiListItemText-secondary MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock"
1068
+ >
1069
+ 2 members
1070
+ </span>
1071
+ </ForwardRef(Typography)>
1072
+ </WithStyles(ForwardRef(Typography))>
1073
+ </div>
1074
+ </ForwardRef(ListItemText)>
1075
+ </WithStyles(ForwardRef(ListItemText))>
1076
+ </ListItemText>
1077
+ <WithStyles(memo)
1078
+ center={false}
1079
+ >
1080
+ <ForwardRef(TouchRipple)
1081
+ center={false}
1082
+ classes={
1083
+ Object {
1084
+ "child": "MuiTouchRipple-child",
1085
+ "childLeaving": "MuiTouchRipple-childLeaving",
1086
+ "childPulsate": "MuiTouchRipple-childPulsate",
1087
+ "ripple": "MuiTouchRipple-ripple",
1088
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
1089
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
1090
+ "root": "MuiTouchRipple-root",
1091
+ }
1092
+ }
1093
+ >
1094
+ <span
1095
+ className="MuiTouchRipple-root"
1096
+ >
1097
+ <TransitionGroup
1098
+ childFactory={[Function]}
1099
+ component={null}
1100
+ exit={true}
1101
+ />
1102
+ </span>
1103
+ </ForwardRef(TouchRipple)>
1104
+ </WithStyles(memo)>
1105
+ </div>
1106
+ </ForwardRef(ButtonBase)>
1107
+ </WithStyles(ForwardRef(ButtonBase))>
1108
+ </ForwardRef(ListItem)>
1109
+ </WithStyles(ForwardRef(ListItem))>
327
1110
  </ContactSuggestion>
328
1111
  `;