cozy-ui-plus 4.4.1 → 4.5.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.1](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@4.5.0...cozy-ui-plus@4.5.1) (2026-02-03)
+
+### Bug Fixes
+
+- **cozy-ui-plus:** Fix ContactName not bolding multi-word family names ([e8015c0](https://github.com/cozy/cozy-libs/commit/e8015c05bda2272b85bf96cb1d560251097fef07))
+
+# [4.5.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@4.4.1...cozy-ui-plus@4.5.0) (2026-02-02)
+
+### Features
+
+- **cozy-ui-plus:** Add `disable` prop on ContactCell ([2249927](https://github.com/cozy/cozy-libs/commit/22499270ab1b110cb4e01cf83297fd69d33f5d3b))
+
 ## [4.4.1](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@4.4.0...cozy-ui-plus@4.4.1) (2026-01-29)
 
 **Note:** Version bump only for package cozy-ui-plus

package/dist/ContactsList/ContactCell.js

@@ -17,11 +17,13 @@ var Cell = function Cell(_ref) {
   var row = _ref.row,
       column = _ref.column,
       cell = _ref.cell,
-      actions = _ref.actions;
+      actions = _ref.actions,
+      disable = _ref.disable;
 
   if (column.id === 'fullname') {
     return /*#__PURE__*/_react.default.createElement(_ContactIdentity.default, {
       contact: row,
+      disable: disable,
       noWrapper: true
     });
   }

package/dist/ContactsList/Contacts/ContactIdentity.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -50,18 +52,24 @@ var MyselfMarker = function MyselfMarker() {
 };
 
 var ContactIdentity = function ContactIdentity(_ref) {
-  var contact = _ref.contact;
+  var contact = _ref.contact,
+      disable = _ref.disable;
   var isMyself = !!contact.me;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    className: (0, _classnames.default)({
+      'u-o-60': disable
+    }),
     display: "inline",
     size: "s"
   }, (0, _contact.getInitials)(contact)), /*#__PURE__*/_react.default.createElement(_ContactName.default, {
-    contact: contact
+    contact: contact,
+    disable: disable
   }), isMyself && /*#__PURE__*/_react.default.createElement(MyselfMarker, null));
 };
 
 ContactIdentity.propTypes = {
-  contact: _propTypes.default.object.isRequired
+  contact: _propTypes.default.object.isRequired,
+  disable: _propTypes.default.bool
 };
 
 var ContactIdentityWrapper = function ContactIdentityWrapper(_ref2) {

package/dist/ContactsList/Contacts/ContactName.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -18,31 +16,32 @@ var _contact = require("cozy-client/dist/models/contact");
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
 var ContactName = function ContactName(_ref) {
-  var _contact$name;
+  var _getDisplayName;
+
+  var contact = _ref.contact,
+      disable = _ref.disable;
+
+  var _ref2 = contact.name || {},
+      familyName = _ref2.familyName;
 
-  var contact = _ref.contact;
-  var familyName = (_contact$name = contact.name) === null || _contact$name === void 0 ? void 0 : _contact$name.familyName;
-  var displayName = (0, _contact.getDisplayName)(contact);
-  var namesToDisplay = displayName === null || displayName === void 0 ? void 0 : displayName.split(' ');
+  var displayName = (_getDisplayName = (0, _contact.getDisplayName)(contact)) === null || _getDisplayName === void 0 ? void 0 : _getDisplayName.trim();
+  var hasFamilyName = familyName && (displayName === null || displayName === void 0 ? void 0 : displayName.endsWith(familyName));
+  var namePrefix = hasFamilyName ? displayName.slice(0, -familyName.length).trimEnd() : null;
   return /*#__PURE__*/_react.default.createElement(_Typography.default, {
     "data-testid": "ContactName" // used by a test in cozy-contacts
     ,
     className: "u-ml-1",
     noWrap: true,
-    display: "inline"
-  }, namesToDisplay === null || namesToDisplay === void 0 ? void 0 : namesToDisplay.map(function (name, index) {
-    var isLastItem = index === namesToDisplay.length - 1;
-    return /*#__PURE__*/_react.default.createElement("span", {
-      key: "display-".concat(index),
-      className: (0, _classnames.default)({
-        'u-fw-bold': name === familyName
-      })
-    }, name, !isLastItem && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0"));
-  }));
+    display: "inline",
+    color: disable ? 'textSecondary' : 'textPrimary'
+  }, hasFamilyName ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, namePrefix && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, namePrefix, "\xA0"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "u-fw-bold"
+  }, familyName)) : displayName);
 };
 
 ContactName.propTypes = {
-  contact: _propTypes.default.object.isRequired
+  contact: _propTypes.default.object.isRequired,
+  disable: _propTypes.default.bool
 };
 var _default = ContactName;
 exports.default = _default;

package/dist/src/ContactsList/ContactCell.d.ts

@@ -1,8 +1,9 @@
-declare const _default: React.MemoExoticComponent<({ row, column, cell, actions }: {
+declare const _default: React.MemoExoticComponent<({ row, column, cell, actions, disable }: {
     row: any;
     column: any;
     cell: any;
     actions: any;
+    disable: any;
 }) => any>;
 export default _default;
 import React from 'react';

package/dist/src/ContactsList/Contacts/ContactName.d.ts

@@ -1,10 +1,12 @@
 export default ContactName;
-declare function ContactName({ contact }: {
+declare function ContactName({ contact, disable }: {
     contact: any;
+    disable: any;
 }): JSX.Element;
 declare namespace ContactName {
     namespace propTypes {
         let contact: PropTypes.Validator<object>;
+        let disable: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from 'prop-types';

package/dist/src/ContactsList/Contacts/ContactName.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "4.4.1",
+  "version": "4.5.1",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -74,5 +74,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "80ec928bcefb30b6ea6ed778fbd71e3417c2efa6"
+  "gitHead": "549503df8a2071ff837e672ad5f7019aa122cb1f"
 }

package/src/ContactsList/ContactCell.jsx

@@ -4,9 +4,9 @@ import ActionsMenuButton from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuB
 
 import ContactIdentity from './Contacts/ContactIdentity'
 
-const Cell = ({ row, column, cell, actions }) => {
+const Cell = ({ row, column, cell, actions, disable }) => {
   if (column.id === 'fullname') {
-    return <ContactIdentity contact={row} noWrapper />
+    return <ContactIdentity contact={row} disable={disable} noWrapper />
   }
 
   if (column.id === 'actions') {

package/src/ContactsList/Contacts/ContactIdentity.jsx

@@ -1,3 +1,4 @@
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useI18n, useExtendI18n } from 'twake-i18n'
@@ -17,22 +18,23 @@ const MyselfMarker = () => {
   return <span className={`${styles['contact-myself']}`}>({t('me')})</span>
 }
 
-const ContactIdentity = ({ contact }) => {
+const ContactIdentity = ({ contact, disable }) => {
   const isMyself = !!contact.me
 
   return (
     <>
-      <Avatar display="inline" size="s">
+      <Avatar className={cx({ 'u-o-60': disable })} display="inline" size="s">
         {getInitials(contact)}
       </Avatar>
-      <ContactName contact={contact} />
+      <ContactName contact={contact} disable={disable} />
       {isMyself && <MyselfMarker />}
     </>
   )
 }
 
 ContactIdentity.propTypes = {
-  contact: PropTypes.object.isRequired
+  contact: PropTypes.object.isRequired,
+  disable: PropTypes.bool
 }
 
 const ContactIdentityWrapper = ({ noWrapper, ...props }) => {

package/src/ContactsList/Contacts/ContactName.jsx

@@ -1,14 +1,16 @@
-import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { getDisplayName } from 'cozy-client/dist/models/contact'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
-const ContactName = ({ contact }) => {
-  const familyName = contact.name?.familyName
-  const displayName = getDisplayName(contact)
-  const namesToDisplay = displayName?.split(' ')
+const ContactName = ({ contact, disable }) => {
+  const { familyName } = contact.name || {}
+  const displayName = getDisplayName(contact)?.trim()
+  const hasFamilyName = familyName && displayName?.endsWith(familyName)
+  const namePrefix = hasFamilyName
+    ? displayName.slice(0, -familyName.length).trimEnd()
+    : null
 
   return (
     <Typography
@@ -16,28 +18,23 @@ const ContactName = ({ contact }) => {
       className="u-ml-1"
       noWrap
       display="inline"
+      color={disable ? 'textSecondary' : 'textPrimary'}
     >
-      {namesToDisplay?.map((name, index) => {
-        const isLastItem = index === namesToDisplay.length - 1
-
-        return (
-          <span
-            key={`display-${index}`}
-            className={cx({
-              'u-fw-bold': name === familyName
-            })}
-          >
-            {name}
-            {!isLastItem && <>&nbsp;</>}
-          </span>
-        )
-      })}
+      {hasFamilyName ? (
+        <>
+          {namePrefix && <>{namePrefix}&nbsp;</>}
+          <span className="u-fw-bold">{familyName}</span>
+        </>
+      ) : (
+        displayName
+      )}
     </Typography>
   )
 }
 
 ContactName.propTypes = {
-  contact: PropTypes.object.isRequired
+  contact: PropTypes.object.isRequired,
+  disable: PropTypes.bool
 }
 
 export default ContactName

package/src/ContactsList/Contacts/ContactName.spec.jsx

@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { getDisplayName } from 'cozy-client/dist/models/contact'
+
+import ContactName from './ContactName'
+
+jest.mock('cozy-client/dist/models/contact', () => ({
+  getDisplayName: jest.fn()
+}))
+
+const makeContact = attrs => ({
+  _id: 'contactid',
+  _type: 'io.cozy.contacts',
+  ...attrs
+})
+
+describe('ContactName', () => {
+  it('should bold single-word family name', () => {
+    getDisplayName.mockReturnValue('John Doe')
+    const contact = makeContact({
+      name: { familyName: 'Doe', givenName: 'John' }
+    })
+
+    render(<ContactName contact={contact} />)
+
+    const boldElement = document.querySelector('.u-fw-bold')
+    expect(boldElement).toHaveTextContent('Doe')
+  })
+
+  it('should bold multi-word family name', () => {
+    getDisplayName.mockReturnValue('khaled Van Beethoven')
+    const contact = makeContact({
+      name: { familyName: 'Van Beethoven', givenName: 'khaled' }
+    })
+
+    render(<ContactName contact={contact} />)
+
+    const boldElement = document.querySelector('.u-fw-bold')
+    expect(boldElement).toHaveTextContent('Van Beethoven')
+  })
+
+  it('should not bold anything when familyName is missing', () => {
+    getDisplayName.mockReturnValue('johndoe@localhost')
+    const contact = makeContact()
+
+    render(<ContactName contact={contact} />)
+
+    const boldElement = document.querySelector('.u-fw-bold')
+    expect(boldElement).toBeNull()
+    expect(screen.getByText('johndoe@localhost')).toBeInTheDocument()
+  })
+
+  it('should not bold when displayName does not end with familyName', () => {
+    getDisplayName.mockReturnValue('johndoe@localhost')
+    const contact = makeContact({
+      name: { familyName: 'Doe' }
+    })
+
+    render(<ContactName contact={contact} />)
+
+    const boldElement = document.querySelector('.u-fw-bold')
+    expect(boldElement).toBeNull()
+  })
+
+  it('should handle contact without name property', () => {
+    getDisplayName.mockReturnValue('johndoe@localhost')
+    const contact = makeContact()
+
+    render(<ContactName contact={contact} />)
+
+    expect(screen.getByText('johndoe@localhost')).toBeInTheDocument()
+  })
+
+  it('should display name prefix before bolded family name', () => {
+    getDisplayName.mockReturnValue('khaled Van Beethoven')
+    const contact = makeContact({
+      name: { familyName: 'Van Beethoven', givenName: 'khaled' }
+    })
+
+    render(<ContactName contact={contact} />)
+
+    const nameElement = screen.getByTestId('ContactName')
+    expect(nameElement).toHaveTextContent('khaled')
+    expect(nameElement).toHaveTextContent('Van Beethoven')
+  })
+
+  it('should bold family name even with trailing whitespace in displayName', () => {
+    getDisplayName.mockReturnValue('John Doe  ')
+    const contact = makeContact({
+      name: { familyName: 'Doe', givenName: 'John' }
+    })
+
+    render(<ContactName contact={contact} />)
+
+    const boldElement = document.querySelector('.u-fw-bold')
+    expect(boldElement).toHaveTextContent('Doe')
+  })
+})