cozy-ui 146.5.0 → 146.5.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [146.5.1](https://github.com/cozy/cozy-ui/compare/v146.5.0...v146.5.1) (2026-11-05)
+
+
+### Bug Fixes
+
+* **MemberAutocomplete:** Give the chip avatars the chip styles ([1cb1300](https://github.com/cozy/cozy-ui/commit/1cb1300))
+* **MemberList:** Use the mockup illustration in the empty state ([ecccbbd](https://github.com/cozy/cozy-ui/commit/ecccbbd))
+
 # [146.5.0](https://github.com/cozy/cozy-ui/compare/v146.4.0...v146.5.0) (2026-11-04)
 
 

package/assets/icons/illus/empty-members-illustration.svg

@@ -0,0 +1 @@
+<svg width="59" height="37" viewBox="0 0 59 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.59 22.783c.182-.274.37-.544.57-.807l.408-.536-.478-.279a10.822 10.822 0 0 0-5.449-1.46C4.774 19.702 0 24.352 0 30.067v3.185c0 .59.494 1.069 1.101 1.069h11.907v-3.012c0-.347.015-.714.048-1.154l.017-.212c.033-.384.081-.767.143-1.147l.01-.05c.068-.407.153-.81.254-1.21.1-.394.216-.782.347-1.166l-.47-.155.498.072c.26-.749.576-1.477.947-2.177l.081-.153c.174-.32.36-.634.555-.941l.152-.232Zm-4.949-5.728c3.103 0 5.628-2.458 5.628-5.479 0-3.02-2.525-5.478-5.628-5.478s-5.627 2.457-5.627 5.479c0 3.02 2.524 5.478 5.627 5.478m33.654 13.297c-.01-.149-.02-.297-.035-.446-.01-.099-.024-.197-.036-.296a12.178 12.178 0 0 0-.051-.394c-.016-.102-.035-.203-.052-.304a14.777 14.777 0 0 0-.07-.382c-.02-.098-.043-.196-.065-.294a13.065 13.065 0 0 0-.091-.385l-.074-.273c-.038-.135-.076-.27-.118-.403l-.078-.24a15.208 15.208 0 0 0-.15-.43c-.024-.068-.049-.134-.074-.2a12.983 12.983 0 0 0-.256-.619 14.777 14.777 0 0 0-.233-.503c-.018-.034-.034-.07-.051-.104-.09-.181-.185-.36-.284-.538l-.03-.057a14.061 14.061 0 0 0-.34-.571l-.005-.011c-2.577-4.123-7.236-6.882-12.545-6.882a14.807 14.807 0 0 0-11.29 5.174l-.06.07a14.64 14.64 0 0 0-.752.977c-.034.049-.069.097-.102.146-.087.129-.173.258-.257.39-.041.065-.084.13-.124.196-.069.111-.134.225-.2.337-.05.088-.102.174-.15.263-.046.083-.088.168-.133.252-.062.119-.125.236-.184.357l-.011.024a14.081 14.081 0 0 0-1.155 3.472l-.04.212a14.116 14.116 0 0 0-.103.7c-.016.123-.031.245-.043.369-.013.126-.02.252-.03.378-.007.096-.016.191-.02.287-.011.227-.018.455-.018.684v4.48c0 .668.564 1.212 1.256 1.212h26.835c.692 0 1.255-.544 1.255-1.213v-4.479c0-.236-.006-.471-.018-.704-.004-.084-.013-.168-.018-.252Zm-14.98-16.418c3.948 0 7.16-3.126 7.16-6.967 0-3.841-3.212-6.967-7.16-6.967-3.95 0-7.16 3.126-7.16 6.967 0 3.841 3.211 6.967 7.16 6.967Zm18.866 5.03c-2.088 0-4.115.593-5.86 1.715l-.462.296.35.42a15.717 15.717 0 0 1 1.999 3.07l.024.05c.1.205.197.412.29.625l.036.08c.088.205.171.412.265.657l.019.046c.176.472.33.952.459 1.44l.029.118c.05.193.096.388.138.584l.05.252a14.119 14.119 0 0 1 .19 1.21c.011.096.023.19.032.286.016.165.028.33.038.496l.017.249c.012.249.02.498.02.75v2.274h11.907c.607 0 1.1-.48 1.1-1.07v-3.184c0-5.714-4.774-10.363-10.641-10.363m0-2.391c3.103 0 5.627-2.458 5.627-5.479 0-3.02-2.524-5.478-5.627-5.478-3.103 0-5.627 2.458-5.627 5.478 0 3.021 2.524 5.479 5.627 5.479Z" fill="#DCEDFD"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "146.5.0",
+  "version": "146.5.1",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/Icons/EmptyMembersIllustration.jsx

@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/empty-members-illustration.svg` to regenerate;
+import React from 'react'
+
+function SvgEmptyMembersIllustration(props) {
+  return (
+    <svg viewBox="0 0 59 37" fill="none" {...props}>
+      <path
+        d="M15.59 22.783c.182-.274.37-.544.57-.807l.408-.536-.478-.279a10.822 10.822 0 00-5.449-1.46C4.774 19.702 0 24.352 0 30.067v3.185c0 .59.494 1.069 1.101 1.069h11.907v-3.012c0-.347.015-.714.048-1.154l.017-.212c.033-.384.081-.767.143-1.147l.01-.05a15.11 15.11 0 01.601-2.376l-.47-.155.498.072c.26-.749.576-1.477.947-2.177l.081-.153c.174-.32.36-.634.555-.941l.152-.232zm-4.949-5.728c3.103 0 5.628-2.458 5.628-5.479 0-3.02-2.525-5.478-5.628-5.478s-5.627 2.457-5.627 5.479c0 3.02 2.524 5.478 5.627 5.478m33.654 13.297c-.01-.149-.02-.297-.035-.446-.01-.099-.024-.197-.036-.296a12.178 12.178 0 00-.051-.394c-.016-.102-.035-.203-.052-.304a14.777 14.777 0 00-.07-.382c-.02-.098-.043-.196-.065-.294a13.065 13.065 0 00-.091-.385l-.074-.273c-.038-.135-.076-.27-.118-.403l-.078-.24a15.208 15.208 0 00-.15-.43c-.024-.068-.049-.134-.074-.2a12.983 12.983 0 00-.256-.619 14.777 14.777 0 00-.233-.503c-.018-.034-.034-.07-.051-.104-.09-.181-.185-.36-.284-.538l-.03-.057a14.061 14.061 0 00-.34-.571l-.005-.011c-2.577-4.123-7.236-6.882-12.545-6.882a14.807 14.807 0 00-11.29 5.174l-.06.07a14.64 14.64 0 00-.752.977c-.034.049-.069.097-.102.146-.087.129-.173.258-.257.39-.041.065-.084.13-.124.196-.069.111-.134.225-.2.337-.05.088-.102.174-.15.263-.046.083-.088.168-.133.252-.062.119-.125.236-.184.357l-.011.024a14.081 14.081 0 00-1.155 3.472l-.04.212a14.116 14.116 0 00-.103.7c-.016.123-.031.245-.043.369-.013.126-.02.252-.03.378-.007.096-.016.191-.02.287-.011.227-.018.455-.018.684v4.48c0 .668.564 1.212 1.256 1.212h26.835c.692 0 1.255-.544 1.255-1.213v-4.479c0-.236-.006-.471-.018-.704-.004-.084-.013-.168-.018-.252zm-14.98-16.418c3.948 0 7.16-3.126 7.16-6.967 0-3.841-3.212-6.967-7.16-6.967-3.95 0-7.16 3.126-7.16 6.967 0 3.841 3.211 6.967 7.16 6.967zm18.866 5.03c-2.088 0-4.115.593-5.86 1.715l-.462.296.35.42a15.717 15.717 0 011.999 3.07l.024.05c.1.205.197.412.29.625l.036.08c.088.205.171.412.265.657l.019.046c.176.472.33.952.459 1.44l.029.118c.05.193.096.388.138.584l.05.252a14.119 14.119 0 01.19 1.21c.011.096.023.19.032.286.016.165.028.33.038.496l.017.249c.012.249.02.498.02.75v2.274h11.907c.607 0 1.1-.48 1.1-1.07v-3.184c0-5.714-4.774-10.363-10.641-10.363m0-2.391c3.103 0 5.627-2.458 5.627-5.479 0-3.02-2.524-5.478-5.627-5.478-3.103 0-5.627 2.458-5.627 5.478 0 3.021 2.524 5.479 5.627 5.479z"
+        fill="#DCEDFD"
+      />
+    </svg>
+  )
+}
+
+export default SvgEmptyMembersIllustration

package/react/MemberAutocomplete/Readme.md

@@ -63,3 +63,27 @@ initialState = { members: [], role: 'readWrite' }
   </Variants>
 </DemoProvider>
 ```
+
+### With picked members
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import MemberAutocomplete from 'cozy-ui/transpiled/react/MemberAutocomplete'
+
+const members = [
+  { id: 'alice', name: 'Alice Wonderland', subtitle: 'alice@cozy.cc', email: 'alice@cozy.cc', initials: 'AW' },
+  { id: 'bob', name: 'Bob Sponge', subtitle: 'bob@cozy.cc', email: 'bob@cozy.cc', initials: 'BS' },
+  { id: 'family', name: 'Family', subtitle: '3 members', isGroup: true, color: '#FF7F1B' }
+]
+
+;
+
+<DemoProvider>
+  <MemberAutocomplete
+    value={members}
+    title="Add people"
+    onChange={() => {}}
+    onSubmit={() => {}}
+  />
+</DemoProvider>
+```

package/react/MemberList/EmptyMembers.jsx

@@ -1,9 +1,9 @@
-import { Icon, Team } from '@linagora/twake-icons'
 import cx from 'classnames'
 import React from 'react'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { locales } from './locales'
+import EmptyMembersIllustration from '../Icons/EmptyMembersIllustration'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
 import { alpha, makeStyles } from '../styles'
@@ -31,7 +31,7 @@ const EmptyMembers = () => {
         classes.root
       )}
     >
-      <Icon icon={Team} size={48} color="var(--primaryColorLight)" />
+      <EmptyMembersIllustration width={59} height={37} />
       <Typography variant="body2" className="u-mt-half">
         {t('MemberList.empty.title')}
       </Typography>

package/react/MemberRow/MemberOrGroupAvatar.jsx

@@ -5,17 +5,27 @@ import MemberAvatar from './MemberAvatar'
 import MemberGroupAvatar from './MemberGroupAvatar'
 import { memberPropType } from './propTypes'
 
-const MemberOrGroupAvatar = ({ member, size }) => {
+const MemberOrGroupAvatar = ({ member, size, className }) => {
   const { avatarUrl, initials, color, isGroup } = member
 
-  if (isGroup) return <MemberGroupAvatar size={size} color={color} />
+  if (isGroup) {
+    return <MemberGroupAvatar size={size} color={color} className={className} />
+  }
 
-  return <MemberAvatar size={size} initials={initials} avatarUrl={avatarUrl} />
+  return (
+    <MemberAvatar
+      size={size}
+      initials={initials}
+      avatarUrl={avatarUrl}
+      className={className}
+    />
+  )
 }
 
 MemberOrGroupAvatar.propTypes = {
   member: memberPropType.isRequired,
-  size: PropTypes.string.isRequired
+  size: PropTypes.string.isRequired,
+  className: PropTypes.string
 }
 
 export default MemberOrGroupAvatar

package/transpiled/react/Icons/EmptyMembersIllustration.d.ts

@@ -0,0 +1,2 @@
+export default SvgEmptyMembersIllustration;
+declare function SvgEmptyMembersIllustration(props: any): JSX.Element;

package/transpiled/react/Icons/EmptyMembersIllustration.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/empty-members-illustration.svg` to regenerate;
+import React from 'react';
+
+function SvgEmptyMembersIllustration(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 59 37",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15.59 22.783c.182-.274.37-.544.57-.807l.408-.536-.478-.279a10.822 10.822 0 00-5.449-1.46C4.774 19.702 0 24.352 0 30.067v3.185c0 .59.494 1.069 1.101 1.069h11.907v-3.012c0-.347.015-.714.048-1.154l.017-.212c.033-.384.081-.767.143-1.147l.01-.05a15.11 15.11 0 01.601-2.376l-.47-.155.498.072c.26-.749.576-1.477.947-2.177l.081-.153c.174-.32.36-.634.555-.941l.152-.232zm-4.949-5.728c3.103 0 5.628-2.458 5.628-5.479 0-3.02-2.525-5.478-5.628-5.478s-5.627 2.457-5.627 5.479c0 3.02 2.524 5.478 5.627 5.478m33.654 13.297c-.01-.149-.02-.297-.035-.446-.01-.099-.024-.197-.036-.296a12.178 12.178 0 00-.051-.394c-.016-.102-.035-.203-.052-.304a14.777 14.777 0 00-.07-.382c-.02-.098-.043-.196-.065-.294a13.065 13.065 0 00-.091-.385l-.074-.273c-.038-.135-.076-.27-.118-.403l-.078-.24a15.208 15.208 0 00-.15-.43c-.024-.068-.049-.134-.074-.2a12.983 12.983 0 00-.256-.619 14.777 14.777 0 00-.233-.503c-.018-.034-.034-.07-.051-.104-.09-.181-.185-.36-.284-.538l-.03-.057a14.061 14.061 0 00-.34-.571l-.005-.011c-2.577-4.123-7.236-6.882-12.545-6.882a14.807 14.807 0 00-11.29 5.174l-.06.07a14.64 14.64 0 00-.752.977c-.034.049-.069.097-.102.146-.087.129-.173.258-.257.39-.041.065-.084.13-.124.196-.069.111-.134.225-.2.337-.05.088-.102.174-.15.263-.046.083-.088.168-.133.252-.062.119-.125.236-.184.357l-.011.024a14.081 14.081 0 00-1.155 3.472l-.04.212a14.116 14.116 0 00-.103.7c-.016.123-.031.245-.043.369-.013.126-.02.252-.03.378-.007.096-.016.191-.02.287-.011.227-.018.455-.018.684v4.48c0 .668.564 1.212 1.256 1.212h26.835c.692 0 1.255-.544 1.255-1.213v-4.479c0-.236-.006-.471-.018-.704-.004-.084-.013-.168-.018-.252zm-14.98-16.418c3.948 0 7.16-3.126 7.16-6.967 0-3.841-3.212-6.967-7.16-6.967-3.95 0-7.16 3.126-7.16 6.967 0 3.841 3.211 6.967 7.16 6.967zm18.866 5.03c-2.088 0-4.115.593-5.86 1.715l-.462.296.35.42a15.717 15.717 0 011.999 3.07l.024.05c.1.205.197.412.29.625l.036.08c.088.205.171.412.265.657l.019.046c.176.472.33.952.459 1.44l.029.118c.05.193.096.388.138.584l.05.252a14.119 14.119 0 01.19 1.21c.011.096.023.19.032.286.016.165.028.33.038.496l.017.249c.012.249.02.498.02.75v2.274h11.907c.607 0 1.1-.48 1.1-1.07v-3.184c0-5.714-4.774-10.363-10.641-10.363m0-2.391c3.103 0 5.627-2.458 5.627-5.479 0-3.02-2.524-5.478-5.627-5.478-3.103 0-5.627 2.458-5.627 5.478 0 3.021 2.524 5.479 5.627 5.479z",
+    fill: "#DCEDFD"
+  }));
+}
+
+export default SvgEmptyMembersIllustration;

package/transpiled/react/MemberList/EmptyMembers.js

@@ -1,8 +1,8 @@
-import { Icon, Team } from '@linagora/twake-icons';
 import cx from 'classnames';
 import React from 'react';
 import { useI18n, useExtendI18n } from 'twake-i18n';
 import { locales } from "cozy-ui/transpiled/react/MemberList/locales";
+import EmptyMembersIllustration from "cozy-ui/transpiled/react/Icons/EmptyMembersIllustration";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { alpha, makeStyles } from "cozy-ui/transpiled/react/styles";
@@ -26,10 +26,9 @@ var EmptyMembers = function EmptyMembers() {
   var classes = useStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: cx('u-flex u-flex-column u-flex-items-center u-pv-2 u-ph-1 u-bdrs-6', isMobile ? 'u-mh-1' : 'u-mh-2', classes.root)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: Team,
-    size: 48,
-    color: "var(--primaryColorLight)"
+  }, /*#__PURE__*/React.createElement(EmptyMembersIllustration, {
+    width: 59,
+    height: 37
   }), /*#__PURE__*/React.createElement(Typography, {
     variant: "body2",
     className: "u-mt-half"

package/transpiled/react/MemberRow/MemberOrGroupAvatar.d.ts

@@ -1,7 +1,8 @@
 export default MemberOrGroupAvatar;
-declare function MemberOrGroupAvatar({ member, size }: {
+declare function MemberOrGroupAvatar({ member, size, className }: {
     member: any;
     size: any;
+    className: any;
 }): JSX.Element;
 declare namespace MemberOrGroupAvatar {
     namespace propTypes {
@@ -34,6 +35,7 @@ declare namespace MemberOrGroupAvatar {
             data: PropTypes.Requireable<any>;
         }>>;
         const size: PropTypes.Validator<string>;
+        const className: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/transpiled/react/MemberRow/MemberOrGroupAvatar.js

@@ -6,24 +6,32 @@ import { memberPropType } from "cozy-ui/transpiled/react/MemberRow/propTypes";
 
 var MemberOrGroupAvatar = function MemberOrGroupAvatar(_ref) {
   var member = _ref.member,
-      size = _ref.size;
+      size = _ref.size,
+      className = _ref.className;
   var avatarUrl = member.avatarUrl,
       initials = member.initials,
       color = member.color,
       isGroup = member.isGroup;
-  if (isGroup) return /*#__PURE__*/React.createElement(MemberGroupAvatar, {
-    size: size,
-    color: color
-  });
+
+  if (isGroup) {
+    return /*#__PURE__*/React.createElement(MemberGroupAvatar, {
+      size: size,
+      color: color,
+      className: className
+    });
+  }
+
   return /*#__PURE__*/React.createElement(MemberAvatar, {
     size: size,
     initials: initials,
-    avatarUrl: avatarUrl
+    avatarUrl: avatarUrl,
+    className: className
   });
 };
 
 MemberOrGroupAvatar.propTypes = {
   member: memberPropType.isRequired,
-  size: PropTypes.string.isRequired
+  size: PropTypes.string.isRequired,
+  className: PropTypes.string
 };
 export default MemberOrGroupAvatar;