cozy-ui-plus 4.5.0 → 4.5.1

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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

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,13 +16,17 @@ 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 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 _ref2 = contact.name || {},
+      familyName = _ref2.familyName;
+
+  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
     ,
@@ -32,15 +34,9 @@ var ContactName = function ContactName(_ref) {
     noWrap: true,
     display: "inline",
     color: disable ? 'textSecondary' : 'textPrimary'
-  }, 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"));
-  }));
+  }, 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 = {

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.5.0",
+  "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": "61e7d0678b71327a91c8b527edda7e06994ab43d"
+  "gitHead": "549503df8a2071ff837e672ad5f7019aa122cb1f"
 }

package/src/ContactsList/Contacts/ContactName.jsx

@@ -1,4 +1,3 @@
-import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -6,9 +5,12 @@ import { getDisplayName } from 'cozy-client/dist/models/contact'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const ContactName = ({ contact, disable }) => {
-  const familyName = contact.name?.familyName
-  const displayName = getDisplayName(contact)
-  const namesToDisplay = displayName?.split(' ')
+  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
@@ -18,21 +20,14 @@ const ContactName = ({ contact, disable }) => {
       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>
   )
 }

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')
+  })
+})