cozy-ui-plus 9.0.0 → 11.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,26 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [11.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@10.0.0...cozy-ui-plus@11.0.0) (2026-07-08)
7
+
8
+ ### Features
9
+
10
+ - **cozy-ui-plus:** Replace Avatar by MemberAvatar in ContactIdentity ([1c6c2c1](https://github.com/cozy/cozy-libs/commit/1c6c2c1d8689738d5aa8d983e5c8298cc7c8c7ea))
11
+
12
+ ### BREAKING CHANGES
13
+
14
+ - **cozy-ui-plus:** You must have `"cozy-sharing": ">=36.4.0"` when using `cozy-ui-plus > ContactIdentity` component
15
+
16
+ # [10.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@9.0.0...cozy-ui-plus@10.0.0) (2026-06-25)
17
+
18
+ ### Features
19
+
20
+ - Ugrade twake-icons in libs and remove test mock ([46178bc](https://github.com/cozy/cozy-libs/commit/46178bcfff73fb8486b6a5209a14e306b497371b))
21
+
22
+ ### BREAKING CHANGES
23
+
24
+ - You must have `@linagora/twake-icons >=2.6.6`
25
+
6
26
  # [9.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@8.0.1...cozy-ui-plus@9.0.0) (2026-06-24)
7
27
 
8
28
  ### Features
@@ -15,9 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
15
15
 
16
16
  var _react = _interopRequireDefault(require("react"));
17
17
 
18
- var _contact = require("cozy-client/dist/models/contact");
19
-
20
- var _Avatar = _interopRequireDefault(require("cozy-ui/transpiled/react/Avatar"));
18
+ var _MemberAvatar = require("cozy-sharing/dist/components/Avatar/MemberAvatar");
21
19
 
22
20
  var _Table = require("cozy-ui/transpiled/react/deprecated/Table");
23
21
 
@@ -55,13 +53,14 @@ var ContactIdentity = function ContactIdentity(_ref) {
55
53
  var contact = _ref.contact,
56
54
  disable = _ref.disable;
57
55
  var isMyself = !!contact.me;
58
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
56
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MemberAvatar.MemberAvatar, {
57
+ recipient: contact,
59
58
  className: (0, _classnames.default)({
60
59
  'u-o-60': disable
61
60
  }),
62
61
  display: "inline",
63
62
  size: "s"
64
- }, (0, _contact.getInitials)(contact)), /*#__PURE__*/_react.default.createElement(_ContactName.default, {
63
+ }), /*#__PURE__*/_react.default.createElement(_ContactName.default, {
65
64
  contact: contact,
66
65
  disable: disable
67
66
  }), isMyself && /*#__PURE__*/_react.default.createElement(MyselfMarker, null));
package/jest.config.js CHANGED
@@ -11,8 +11,7 @@ module.exports = {
11
11
  '^cozy-client$': '<rootDir>/node_modules/cozy-client/dist/index',
12
12
  '^cozy-client/dist/types$':
13
13
  '<rootDir>/node_modules/cozy-client/dist/types.js',
14
- '^cozy-ui(.*)': '<rootDir>/node_modules/cozy-ui/$1',
15
- '^@linagora/twake-icons$': '<rootDir>/test/__mocks__/twake-icons.js'
14
+ '^cozy-ui(.*)': '<rootDir>/node_modules/cozy-ui/$1'
16
15
  },
17
16
  transformIgnorePatterns: ['node_modules/(?!(cozy-ui))'],
18
17
  testPathIgnorePatterns: ['node_modules', 'dist'],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui-plus",
3
- "version": "9.0.0",
3
+ "version": "11.0.0",
4
4
  "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
@@ -24,7 +24,7 @@
24
24
  "devDependencies": {
25
25
  "@babel/cli": "7.16.8",
26
26
  "@babel/core": "7.16.12",
27
- "@linagora/twake-icons": "^2.6.2",
27
+ "@linagora/twake-icons": "^2.6.6",
28
28
  "@testing-library/jest-dom": "5.17.0",
29
29
  "@testing-library/react": "12.1.5",
30
30
  "@testing-library/react-hooks": "8.0.1",
@@ -38,6 +38,7 @@
38
38
  "cozy-intent": "^2.31.1",
39
39
  "cozy-interapp": "^0.17.1",
40
40
  "cozy-logger": "^1.18.1",
41
+ "cozy-sharing": "^36.4.1",
41
42
  "cozy-stack-client": "^60.21.1",
42
43
  "cozy-ui": "^138.1.0",
43
44
  "jest": "30.3.0",
@@ -65,16 +66,17 @@
65
66
  "rooks": "7.14.1"
66
67
  },
67
68
  "peerDependencies": {
68
- "@linagora/twake-icons": ">=2.6.2",
69
+ "@linagora/twake-icons": ">=2.6.6",
69
70
  "cozy-client": ">=60.21.3",
70
71
  "cozy-device-helper": ">=2.0.0",
71
72
  "cozy-intent": ">=2.30.0",
72
73
  "cozy-interapp": ">=0.17.1",
73
74
  "cozy-logger": ">=1.17.0",
75
+ "cozy-sharing": ">=36.4.0",
74
76
  "cozy-ui": ">=138.1.0",
75
77
  "react": "^16 || ^17 || ^18",
76
78
  "react-dom": "^16 || ^17 || ^18",
77
79
  "twake-i18n": ">=0.3.0"
78
80
  },
79
- "gitHead": "1526f0d72beb8a728568c4bccdf7e658b5c9e389"
81
+ "gitHead": "a093f7a4c39543044dad5fb08b234c651f655518"
80
82
  }
@@ -1,6 +1,7 @@
1
1
  import { render, screen } from '@testing-library/react'
2
2
  import React from 'react'
3
3
 
4
+ import { CozyProvider, createMockClient } from 'cozy-client'
4
5
  import logger from 'cozy-logger'
5
6
  import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
6
7
 
@@ -14,10 +15,15 @@ const makeContact = attrs => ({
14
15
  ...attrs
15
16
  })
16
17
 
18
+ const client = createMockClient({})
19
+ client.options = { uri: 'http://cozy.example.com' }
20
+
17
21
  const setup = ({ contact }) => {
18
22
  render(
19
23
  <BreakpointsProvider>
20
- <ContactRow contact={contact} />
24
+ <CozyProvider client={client}>
25
+ <ContactRow contact={contact} />
26
+ </CozyProvider>
21
27
  </BreakpointsProvider>
22
28
  )
23
29
  }
@@ -2,8 +2,7 @@ import cx from 'classnames'
2
2
  import PropTypes from 'prop-types'
3
3
  import React from 'react'
4
4
 
5
- import { getInitials } from 'cozy-client/dist/models/contact'
6
- import Avatar from 'cozy-ui/transpiled/react/Avatar'
5
+ import { MemberAvatar } from 'cozy-sharing/dist/components/Avatar/MemberAvatar'
7
6
  import { TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
8
7
  import { useI18n, useExtendI18n } from 'twake-i18n'
9
8
 
@@ -23,9 +22,12 @@ const ContactIdentity = ({ contact, disable }) => {
23
22
 
24
23
  return (
25
24
  <>
26
- <Avatar className={cx({ 'u-o-60': disable })} display="inline" size="s">
27
- {getInitials(contact)}
28
- </Avatar>
25
+ <MemberAvatar
26
+ recipient={contact}
27
+ className={cx({ 'u-o-60': disable })}
28
+ display="inline"
29
+ size="s"
30
+ />
29
31
  <ContactName contact={contact} disable={disable} />
30
32
  {isMyself && <MyselfMarker />}
31
33
  </>
@@ -21,12 +21,17 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
21
21
  class="u-w-2 u-h-2"
22
22
  >
23
23
  <svg
24
- class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
25
- color="var(--coolGrey)"
26
- data-icon="true"
24
+ class="twake-icon styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
27
25
  height="100%"
26
+ style="fill: var(--coolGrey);"
27
+ viewBox="0 0 15 16"
28
28
  width="100%"
29
- />
29
+ xmlns="http://www.w3.org/2000/svg"
30
+ >
31
+ <path
32
+ d="M14.4 4 7.2 0 0 4v8l7.2 4 7.2-4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 0 0-4.64 0L2.472 4.456zm-.8 11.896-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 0 0 6.4 11.096zM5.6 8c0-.88.72-1.6 1.6-1.6s1.6.72 1.6 1.6-.72 1.6-1.6 1.6S5.6 8.88 5.6 8M8 13.728v-2.624a3.19 3.19 0 0 0 2.4-3.096q.002-.422-.104-.808L12.8 5.808v5.256z"
33
+ />
34
+ </svg>
30
35
  </div>
31
36
  </div>
32
37
  <span
@@ -66,12 +71,17 @@ exports[`SquareAppIcon component should render an app correctly with the given n
66
71
  class="u-w-2 u-h-2"
67
72
  >
68
73
  <svg
69
- class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
70
- color="var(--coolGrey)"
71
- data-icon="true"
74
+ class="twake-icon styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
72
75
  height="100%"
76
+ style="fill: var(--coolGrey);"
77
+ viewBox="0 0 15 16"
73
78
  width="100%"
74
- />
79
+ xmlns="http://www.w3.org/2000/svg"
80
+ >
81
+ <path
82
+ d="M14.4 4 7.2 0 0 4v8l7.2 4 7.2-4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 0 0-4.64 0L2.472 4.456zm-.8 11.896-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 0 0 6.4 11.096zM5.6 8c0-.88.72-1.6 1.6-1.6s1.6.72 1.6 1.6-.72 1.6-1.6 1.6S5.6 8.88 5.6 8M8 13.728v-2.624a3.19 3.19 0 0 0 2.4-3.096q.002-.422-.104-.808L12.8 5.808v5.256z"
83
+ />
84
+ </svg>
75
85
  </div>
76
86
  </div>
77
87
  <span
@@ -111,12 +121,17 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
111
121
  class="u-w-2 u-h-2"
112
122
  >
113
123
  <svg
114
- class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
115
- color="var(--coolGrey)"
116
- data-icon="true"
124
+ class="twake-icon styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
117
125
  height="100%"
126
+ style="fill: var(--coolGrey);"
127
+ viewBox="0 0 15 16"
118
128
  width="100%"
119
- />
129
+ xmlns="http://www.w3.org/2000/svg"
130
+ >
131
+ <path
132
+ d="M14.4 4 7.2 0 0 4v8l7.2 4 7.2-4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 0 0-4.64 0L2.472 4.456zm-.8 11.896-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 0 0 6.4 11.096zM5.6 8c0-.88.72-1.6 1.6-1.6s1.6.72 1.6 1.6-.72 1.6-1.6 1.6S5.6 8.88 5.6 8M8 13.728v-2.624a3.19 3.19 0 0 0 2.4-3.096q.002-.422-.104-.808L12.8 5.808v5.256z"
133
+ />
134
+ </svg>
120
135
  </div>
121
136
  </div>
122
137
  <span
@@ -153,9 +168,17 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
153
168
  class="styles__onEnd___1mc8z"
154
169
  />
155
170
  <svg
156
- color="var(--primaryColor)"
157
- data-icon="true"
158
- />
171
+ class="twake-icon"
172
+ height="16"
173
+ style="fill: var(--primaryColor);"
174
+ viewBox="0 0 14 14"
175
+ width="16"
176
+ xmlns="http://www.w3.org/2000/svg"
177
+ >
178
+ <path
179
+ d="M6 8H1a.97.97 0 0 1-.713-.287A.97.97 0 0 1 0 7q0-.424.287-.713A.97.97 0 0 1 1 6h5V1q0-.424.287-.713A.97.97 0 0 1 7 0q.424 0 .713.287A.98.98 0 0 1 8 1v5h5q.424 0 .713.287Q14 6.575 14 7c0 .425-.096.52-.287.713A.97.97 0 0 1 13 8H8v5q0 .424-.287.713A.97.97 0 0 1 7 14a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 13z"
180
+ />
181
+ </svg>
159
182
  </div>
160
183
  <span
161
184
  class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
@@ -192,22 +215,33 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
192
215
  class="u-w-2 u-h-2"
193
216
  >
194
217
  <svg
195
- class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
196
- color="var(--coolGrey)"
197
- data-icon="true"
218
+ class="twake-icon styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
198
219
  height="100%"
220
+ style="fill: var(--coolGrey);"
221
+ viewBox="0 0 15 16"
199
222
  width="100%"
200
- />
223
+ xmlns="http://www.w3.org/2000/svg"
224
+ >
225
+ <path
226
+ d="M14.4 4 7.2 0 0 4v8l7.2 4 7.2-4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 0 0-4.64 0L2.472 4.456zm-.8 11.896-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 0 0 6.4 11.096zM5.6 8c0-.88.72-1.6 1.6-1.6s1.6.72 1.6 1.6-.72 1.6-1.6 1.6S5.6 8.88 5.6 8M8 13.728v-2.624a3.19 3.19 0 0 0 2.4-3.096q.002-.422-.104-.808L12.8 5.808v5.256z"
227
+ />
228
+ </svg>
201
229
  </div>
202
230
  </div>
203
231
  <span
204
232
  class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular MuiBadge-colorError"
205
233
  >
206
234
  <svg
207
- class="makeStyles-errorIcon-34"
208
- data-icon="true"
209
- size="16"
210
- />
235
+ class="twake-icon makeStyles-errorIcon-34"
236
+ height="16"
237
+ viewBox="0 0 16 16"
238
+ width="16"
239
+ xmlns="http://www.w3.org/2000/svg"
240
+ >
241
+ <path
242
+ d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8m.8 12H7.2v-1.6h1.6zm0-3.2H7.2V4h1.6z"
243
+ />
244
+ </svg>
211
245
  </span>
212
246
  </span>
213
247
  <span
@@ -243,12 +277,17 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
243
277
  class="u-w-2 u-h-2"
244
278
  >
245
279
  <svg
246
- class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
247
- color="var(--coolGrey)"
248
- data-icon="true"
280
+ class="twake-icon styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
249
281
  height="100%"
282
+ style="fill: var(--coolGrey);"
283
+ viewBox="0 0 15 16"
250
284
  width="100%"
251
- />
285
+ xmlns="http://www.w3.org/2000/svg"
286
+ >
287
+ <path
288
+ d="M14.4 4 7.2 0 0 4v8l7.2 4 7.2-4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 0 0-4.64 0L2.472 4.456zm-.8 11.896-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 0 0 6.4 11.096zM5.6 8c0-.88.72-1.6 1.6-1.6s1.6.72 1.6 1.6-.72 1.6-1.6 1.6S5.6 8.88 5.6 8M8 13.728v-2.624a3.19 3.19 0 0 0 2.4-3.096q.002-.422-.104-.808L12.8 5.808v5.256z"
289
+ />
290
+ </svg>
252
291
  </div>
253
292
  </div>
254
293
  <span
@@ -288,12 +327,17 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
288
327
  class="u-w-2 u-h-2"
289
328
  >
290
329
  <svg
291
- class="styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
292
- color="var(--coolGrey)"
293
- data-icon="true"
330
+ class="twake-icon styles__c-app-icon___2W1cp styles__c-app-icon-default___1Bus5"
294
331
  height="100%"
332
+ style="fill: var(--coolGrey);"
333
+ viewBox="0 0 15 16"
295
334
  width="100%"
296
- />
335
+ xmlns="http://www.w3.org/2000/svg"
336
+ >
337
+ <path
338
+ d="M14.4 4 7.2 0 0 4v8l7.2 4 7.2-4zM7.2 1.832l4.728 2.624L9.52 5.792a3.213 3.213 0 0 0-4.64 0L2.472 4.456zm-.8 11.896-4.8-2.664V5.808L4.104 7.2A3.193 3.193 0 0 0 6.4 11.096zM5.6 8c0-.88.72-1.6 1.6-1.6s1.6.72 1.6 1.6-.72 1.6-1.6 1.6S5.6 8.88 5.6 8M8 13.728v-2.624a3.19 3.19 0 0 0 2.4-3.096q.002-.422-.104-.808L12.8 5.808v5.256z"
339
+ />
340
+ </svg>
297
341
  </div>
298
342
  </div>
299
343
  <span
@@ -341,9 +385,16 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
341
385
  style="background-color: var(--paperBackgroundColor); color: var(--iconTextColor); box-shadow: var(--shadow3);"
342
386
  >
343
387
  <svg
344
- data-icon="true"
345
- size="10"
346
- />
388
+ class="twake-icon"
389
+ height="10"
390
+ viewBox="0 0 16 16"
391
+ width="10"
392
+ xmlns="http://www.w3.org/2000/svg"
393
+ >
394
+ <path
395
+ d="M14.222 14.222H1.778V1.778H8V0H1.778C.79 0 0 .8 0 1.778v12.444C0 15.2.791 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V8h-1.778zM9.778 0v1.778h3.19l-8.737 8.738 1.253 1.253 8.738-8.738v3.191H16V0z"
396
+ />
397
+ </svg>
347
398
  </div>
348
399
  </span>
349
400
  </span>
@@ -373,8 +424,18 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
373
424
  class="styles__onEnd___1mc8z"
374
425
  />
375
426
  <svg
376
- data-icon="true"
377
- />
427
+ class="twake-icon"
428
+ height="16"
429
+ viewBox="0 0 52 52"
430
+ width="16"
431
+ xmlns="http://www.w3.org/2000/svg"
432
+ >
433
+ <path
434
+ d="M38.231 44H13.769C6.175 44 0 37.756 0 30.08c0-3.66 1.394-7.117 3.927-9.733 2.219-2.29 5.093-3.715 8.203-4.086a13.9 13.9 0 0 1 4.042-8.292A13.6 13.6 0 0 1 25.801 4c3.62 0 7.04 1.407 9.629 3.968a13.9 13.9 0 0 1 4.038 8.25C46.482 16.853 52 22.828 52 30.082 52 37.756 45.82 44 38.23 44zm-.163-3.001h.104c5.97 0 10.828-4.91 10.828-10.947 0-6.035-4.857-10.946-10.828-10.946h-.11a1.44 1.44 0 0 1-1.435-1.417C36.492 11.794 31.637 7 25.803 7c-5.835 0-10.692 4.796-10.826 10.69a1.445 1.445 0 0 1-1.403 1.42C7.744 19.244 3 24.153 3 30.052 3 36.09 7.857 41 13.828 41h.088l.035-.002.093.002h24.021zm-4.302-11.776c-.875-.585-.918-1.659-.92-1.706A.52.52 0 0 0 32.32 27a.523.523 0 0 0-.506.536c.002.039.016.543.251 1.137a7.99 7.99 0 0 1-11.138.019 3.6 3.6 0 0 0 .257-1.155.523.523 0 0 0-.503-.536.526.526 0 0 0-.528.515c0 .043-.042 1.121-.92 1.706a.536.536 0 0 0-.15.731.51.51 0 0 0 .714.154 2.8 2.8 0 0 0 .572-.505 9.006 9.006 0 0 0 12.251-.01c.16.184.35.36.582.515a.5.5 0 0 0 .281.085.52.52 0 0 0 .432-.24.537.537 0 0 0-.15-.731z"
435
+ fill="#297ef2"
436
+ fill-rule="evenodd"
437
+ />
438
+ </svg>
378
439
  </div>
379
440
  <span
380
441
  class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
@@ -1,23 +0,0 @@
1
- const React = require('react')
2
-
3
- const Icon = ({ icon, iconRef, ...props }) =>
4
- React.createElement('svg', { 'data-icon': true, ...props })
5
-
6
- const Sprite = () => null
7
-
8
- const getFileTypeIcon = () =>
9
- function FileTypeIcon() {
10
- return React.createElement('svg', { 'data-filetypeicon': true })
11
- }
12
-
13
- const proxyHandler = {
14
- get: function (target, prop) {
15
- if (prop in target) return target[prop]
16
- if (prop === 'default') return target.Icon
17
- return function IconMock({ iconRef, ...props }) {
18
- return React.createElement('svg', { 'data-mock-icon': prop, ...props })
19
- }
20
- }
21
- }
22
-
23
- module.exports = new Proxy({ Icon, Sprite, getFileTypeIcon }, proxyHandler)