cozy-ui-plus 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.6.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@4.5.1...cozy-ui-plus@4.6.0) (2026-02-19)
+
+### Features
+
+- **cozy-ui-plus:** Add menu to select phone number by country ([7750965](https://github.com/cozy/cozy-libs/commit/775096555b17dd2464b5fcad653d58ae8993d0a4))
+- **cozy-ui-plus:** Add react-international-phone package ([c6eaa2e](https://github.com/cozy/cozy-libs/commit/c6eaa2ebf6218cc81ef09c4a415c3ec0d6137436))
+- **cozy-ui-plus:** Add simple small component ([aabfed6](https://github.com/cozy/cozy-libs/commit/aabfed68b92d8ba31868c4e7eebc4ad6043b57b2))
+- **cozy-ui-plus:** Use new textfield for phone number ([6b47fc5](https://github.com/cozy/cozy-libs/commit/6b47fc5b742b9108f35cd0e7164e942669e93c6c))
+
+## [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/Contacts/AddModal/ContactForm/TextFieldPhone/ButtonBase.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ButtonBase = _interopRequireDefault(require("cozy-ui/transpiled/react/ButtonBase"));
+
+var _styles = require("cozy-ui/transpiled/react/styles");
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      '&:hover': {
+        textDecoration: 'none',
+        backgroundColor: (0, _styles.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(_ButtonBase.default);
+
+exports.default = _default;

package/dist/Contacts/AddModal/ContactForm/TextFieldPhone/CustomInput.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Input = _interopRequireDefault(require("cozy-ui/transpiled/react/Input"));
+
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
+
+var CustomInput = function CustomInput(props) {
+  return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, props, {
+    disableUnderline: true
+  })));
+};
+
+var _default = CustomInput;
+exports.default = _default;

package/dist/Contacts/AddModal/ContactForm/TextFieldPhone/FlagBottomSheet.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("react-international-phone/style.css");
+
+var _BottomSheet = _interopRequireWildcard(require("cozy-ui/transpiled/react/BottomSheet"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _MenuItem = _interopRequireDefault(require("cozy-ui/transpiled/react/MenuItem"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
+
+var _reactInternationalPhone = require("react-international-phone");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var FlagBottomSheet = function FlagBottomSheet(_ref) {
+  var value = _ref.value,
+      setCountry = _ref.setCountry;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactInternationalPhone.FlagImage, {
+    iso2: value
+  })), open && /*#__PURE__*/_react.default.createElement(_BottomSheet.default, {
+    backdrop: true,
+    onClose: function onClose() {
+      return setOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_BottomSheet.BottomSheetItem, null, _reactInternationalPhone.defaultCountries.map(function (c) {
+    var _parseCountry = (0, _reactInternationalPhone.parseCountry)(c),
+        iso2 = _parseCountry.iso2,
+        name = _parseCountry.name,
+        dialCode = _parseCountry.dialCode;
+
+    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: iso2,
+      value: iso2,
+      onClick: function onClick() {
+        setCountry(iso2);
+        setOpen(false);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_reactInternationalPhone.FlagImage, {
+      iso2: iso2
+    })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: name
+    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "u-mr-half",
+      align: "right"
+    }, "+", dialCode));
+  }))));
+};
+
+var _default = FlagBottomSheet;
+exports.default = _default;

package/dist/Contacts/AddModal/ContactForm/TextFieldPhone/FlagMenu.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("react-international-phone/style.css");
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _MenuItem = _interopRequireDefault(require("cozy-ui/transpiled/react/MenuItem"));
+
+var _Select = _interopRequireDefault(require("cozy-ui/transpiled/react/Select"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _CustomInput = _interopRequireDefault(require("./CustomInput"));
+
+var _reactInternationalPhone = require("react-international-phone");
+
+var FlagMenu = function FlagMenu(_ref) {
+  var value = _ref.value,
+      setCountry = _ref.setCountry;
+  return /*#__PURE__*/_react.default.createElement(_Select.default, {
+    input: /*#__PURE__*/_react.default.createElement(_CustomInput.default, null),
+    MenuProps: {
+      style: {
+        height: '300px'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      }
+    },
+    value: value,
+    renderValue: function renderValue(v) {
+      return /*#__PURE__*/_react.default.createElement(_reactInternationalPhone.FlagImage, {
+        iso2: v,
+        style: {
+          verticalAlign: 'bottom',
+          marginLeft: '0.5rem'
+        }
+      });
+    },
+    onChange: function onChange(e) {
+      return setCountry(e.target.value);
+    }
+  }, _reactInternationalPhone.defaultCountries.map(function (c) {
+    var _parseCountry = (0, _reactInternationalPhone.parseCountry)(c),
+        iso2 = _parseCountry.iso2,
+        name = _parseCountry.name,
+        dialCode = _parseCountry.dialCode;
+
+    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: iso2,
+      value: iso2
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_reactInternationalPhone.FlagImage, {
+      iso2: iso2
+    })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: name
+    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "u-mr-half",
+      align: "right"
+    }, "+", dialCode));
+  }));
+};
+
+var _default = FlagMenu;
+exports.default = _default;

package/dist/Contacts/AddModal/ContactForm/TextFieldPhone/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactInternationalPhone = require("react-international-phone");
+
+var _InputAdornment = _interopRequireDefault(require("cozy-ui/transpiled/react/InputAdornment"));
+
+var _TextField = _interopRequireDefault(require("cozy-ui/transpiled/react/TextField"));
+
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
+var _FlagBottomSheet = _interopRequireDefault(require("./FlagBottomSheet"));
+
+var _FlagMenu = _interopRequireDefault(require("./FlagMenu"));
+
+var _excluded = ["value", "onChange"];
+
+var TextFieldPhone = function TextFieldPhone(_ref) {
+  var value = _ref.value,
+      _onChange = _ref.onChange,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _usePhoneInput = (0, _reactInternationalPhone.usePhoneInput)({
+    defaultCountry: 'fr',
+    value: value,
+    countries: _reactInternationalPhone.defaultCountries,
+    onChange: function onChange(data) {
+      _onChange(data.phone);
+    }
+  }),
+      inputValue = _usePhoneInput.inputValue,
+      handlePhoneValueChange = _usePhoneInput.handlePhoneValueChange,
+      inputRef = _usePhoneInput.inputRef,
+      country = _usePhoneInput.country,
+      setCountry = _usePhoneInput.setCountry;
+
+  var ResponsiveFlagMenu = isMobile ? _FlagBottomSheet.default : _FlagMenu.default;
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, (0, _extends2.default)({
+    value: inputValue,
+    inputRef: inputRef,
+    InputProps: {
+      startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+        position: "start"
+      }, /*#__PURE__*/_react.default.createElement(ResponsiveFlagMenu, {
+        value: country.iso2,
+        setCountry: setCountry
+      }))
+    },
+    onChange: handlePhoneValueChange
+  }, props));
+};
+
+var _default = TextFieldPhone;
+exports.default = _default;

package/dist/Contacts/AddModal/ContactForm/fieldsConfig.js

@@ -35,6 +35,8 @@ var _Telephone = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/
 
 var _InputAdornment = _interopRequireDefault(require("cozy-ui/transpiled/react/InputAdornment"));
 
+var _index = _interopRequireDefault(require("./TextFieldPhone/index"));
+
 /**
  * @type {import('../types').Field[]}
  */
@@ -82,6 +84,7 @@ var fields = [{
   icon: _Telephone.default,
   type: 'tel',
   layout: 'array',
+  component: _index.default,
   label: {
     name: 'phoneLabel',
     select: true,

package/dist/Contacts/AddModal/mocks.js

@@ -72,7 +72,7 @@ var johnDoeContact = {
   },
   note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
   phone: [{
-    number: '+33 (2)0 90 00 54 04',
+    number: '+33 2 90 00 54 04',
     primary: true
   }, {
     number: '+33 6 77 11 22 33',
@@ -137,7 +137,7 @@ var johnDoeFormValues = {
   }],
   phone: [{
     fieldId: 'fieldId_5',
-    phone: '+33 (2)0 90 00 54 04',
+    phone: '+33 2 90 00 54 04',
     phoneLabel: undefined
   }, {
     fieldId: 'fieldId_6',
@@ -219,7 +219,7 @@ var johnDoeContactWithRelated = {
   },
   note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
   phone: [{
-    number: '+33 (2)0 90 00 54 04',
+    number: '+33 2 90 00 54 04',
     primary: true
   }, {
     number: '+33 6 77 11 22 33',

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/Contacts/AddModal/ContactForm/TextFieldPhone/ButtonBase.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("react").ComponentType<Pick<{
+    action?: import("react").Ref<import("@material-ui/core").ButtonBaseActions>;
+    buttonRef?: import("react").Ref<unknown>;
+    centerRipple?: boolean;
+    children?: import("react").ReactNode;
+    disabled?: boolean;
+    disableRipple?: boolean;
+    disableTouchRipple?: boolean;
+    focusRipple?: boolean;
+    focusVisibleClassName?: string;
+    onFocusVisible?: import("react").FocusEventHandler<any>;
+    tabIndex?: string | number;
+    TouchRippleProps?: Partial<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleProps>;
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").ExtendButtonBaseTypeMap<import("@material-ui/core").ButtonBaseTypeMap<{}, "button">>> & Pick<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, "name" | "color" | "hidden" | "ref" | "form" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "type" | "value" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget">, "name" | "color" | "hidden" | "style" | "disabled" | "ref" | "form" | "title" | "children" | "className" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "type" | "value" | "innerRef" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps"> & import("@material-ui/styles/withStyles/withStyles").StyledComponentProps<"root">>;
+export default _default;

package/dist/src/Contacts/AddModal/ContactForm/TextFieldPhone/CustomInput.d.ts

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

package/dist/src/Contacts/AddModal/ContactForm/TextFieldPhone/FlagBottomSheet.d.ts

@@ -0,0 +1,5 @@
+export default FlagBottomSheet;
+declare function FlagBottomSheet({ value, setCountry }: {
+    value: any;
+    setCountry: any;
+}): JSX.Element;

package/dist/src/Contacts/AddModal/ContactForm/TextFieldPhone/FlagMenu.d.ts

@@ -0,0 +1,5 @@
+export default FlagMenu;
+declare function FlagMenu({ value, setCountry }: {
+    value: any;
+    setCountry: any;
+}): JSX.Element;

package/dist/src/Contacts/AddModal/ContactForm/TextFieldPhone/index.d.ts

@@ -0,0 +1,6 @@
+export default TextFieldPhone;
+declare function TextFieldPhone({ value, onChange, ...props }: {
+    [x: string]: any;
+    value: any;
+    onChange: any;
+}): JSX.Element;

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

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

package/jest.config.js

@@ -5,7 +5,7 @@ module.exports = {
   moduleDirectories: ['src', 'node_modules'],
   moduleNameMapper: {
     '\\.(png|gif|jpe?g|svg)$': '<rootDir>/test/fileMock.js',
-    '\\.styl$': 'identity-obj-proxy',
+    '\\.(styl|css)$': 'identity-obj-proxy',
     '^cozy-client$': '<rootDir>/node_modules/cozy-client/dist/index',
     '^cozy-client/dist/types$':
       '<rootDir>/node_modules/cozy-client/dist/types.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -44,8 +44,6 @@
     "node-polyglot": "^2.4.0",
     "prop-types": "15.8.1",
     "react": "16.12.0",
-    "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "16.0.1",
     "react-dom": "16.12.0",
     "react-test-renderer": "16.12.0",
     "stylus": "0.64.0",
@@ -62,6 +60,7 @@
     "mime-types": "2.1.35",
     "react-final-form": "6.5.9",
     "react-final-form-arrays": "3.1.4",
+    "react-international-phone": "4.7.0",
     "rooks": "7.14.1"
   },
   "peerDependencies": {
@@ -74,5 +73,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "61e7d0678b71327a91c8b527edda7e06994ab43d"
+  "gitHead": "8a5f3cb0c64efb15a79cb856927dba5513a94623"
 }

package/src/Contacts/AddModal/ContactForm/TextFieldPhone/ButtonBase.jsx

@@ -0,0 +1,19 @@
+import ButtonBase from 'cozy-ui/transpiled/react/ButtonBase'
+import { alpha, withStyles } from 'cozy-ui/transpiled/react/styles'
+
+const styles = theme => ({
+  root: {
+    '&:hover': {
+      textDecoration: 'none',
+      backgroundColor: alpha(
+        theme.palette.text.primary,
+        theme.palette.action.hoverOpacity
+      ),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }
+  }
+})
+
+export default withStyles(styles)(ButtonBase)

package/src/Contacts/AddModal/ContactForm/TextFieldPhone/CustomInput.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Input from 'cozy-ui/transpiled/react/Input'
+
+import ButtonBase from './ButtonBase'
+
+const CustomInput = props => {
+  return (
+    <ButtonBase>
+      <Input {...props} disableUnderline />
+    </ButtonBase>
+  )
+}
+
+export default CustomInput

package/src/Contacts/AddModal/ContactForm/TextFieldPhone/FlagBottomSheet.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import 'react-international-phone/style.css'
+
+import BottomSheet, {
+  BottomSheetItem
+} from 'cozy-ui/transpiled/react/BottomSheet'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+import ButtonBase from './ButtonBase'
+
+import {
+  defaultCountries,
+  FlagImage,
+  parseCountry
+} from 'react-international-phone'
+
+const FlagBottomSheet = ({ value, setCountry }) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <ButtonBase onClick={() => setOpen(true)}>
+        <FlagImage iso2={value} />
+      </ButtonBase>
+
+      {open && (
+        <BottomSheet backdrop onClose={() => setOpen(false)}>
+          <BottomSheetItem>
+            {defaultCountries.map(c => {
+              const { iso2, name, dialCode } = parseCountry(c)
+              return (
+                <MenuItem
+                  key={iso2}
+                  value={iso2}
+                  onClick={() => {
+                    setCountry(iso2)
+                    setOpen(false)
+                  }}
+                >
+                  <ListItemIcon>
+                    <FlagImage iso2={iso2} />
+                  </ListItemIcon>
+                  <ListItemText primary={name} />
+                  <Typography className="u-mr-half" align="right">
+                    +{dialCode}
+                  </Typography>
+                </MenuItem>
+              )
+            })}
+          </BottomSheetItem>
+        </BottomSheet>
+      )}
+    </>
+  )
+}
+
+export default FlagBottomSheet

package/src/Contacts/AddModal/ContactForm/TextFieldPhone/FlagMenu.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import 'react-international-phone/style.css'
+
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
+import Select from 'cozy-ui/transpiled/react/Select'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+import CustomInput from './CustomInput'
+
+import {
+  defaultCountries,
+  FlagImage,
+  parseCountry
+} from 'react-international-phone'
+
+const FlagMenu = ({ value, setCountry }) => {
+  return (
+    <Select
+      input={<CustomInput />}
+      MenuProps={{
+        style: {
+          height: '300px'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left'
+        }
+      }}
+      value={value}
+      renderValue={v => (
+        <FlagImage
+          iso2={v}
+          style={{ verticalAlign: 'bottom', marginLeft: '0.5rem' }}
+        />
+      )}
+      onChange={e => setCountry(e.target.value)}
+    >
+      {defaultCountries.map(c => {
+        const { iso2, name, dialCode } = parseCountry(c)
+        return (
+          <MenuItem key={iso2} value={iso2}>
+            <ListItemIcon>
+              <FlagImage iso2={iso2} />
+            </ListItemIcon>
+            <ListItemText primary={name} />
+            <Typography className="u-mr-half" align="right">
+              +{dialCode}
+            </Typography>
+          </MenuItem>
+        )
+      })}
+    </Select>
+  )
+}
+
+export default FlagMenu

package/src/Contacts/AddModal/ContactForm/TextFieldPhone/index.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { defaultCountries, usePhoneInput } from 'react-international-phone'
+
+import InputAdornment from 'cozy-ui/transpiled/react/InputAdornment'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import FlagBottomSheet from './FlagBottomSheet'
+import FlagMenu from './FlagMenu'
+
+const TextFieldPhone = ({ value, onChange, ...props }) => {
+  const { isMobile } = useBreakpoints()
+  const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } =
+    usePhoneInput({
+      defaultCountry: 'fr',
+      value,
+      countries: defaultCountries,
+      onChange: data => {
+        onChange(data.phone)
+      }
+    })
+
+  const ResponsiveFlagMenu = isMobile ? FlagBottomSheet : FlagMenu
+
+  return (
+    <TextField
+      value={inputValue}
+      inputRef={inputRef}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <ResponsiveFlagMenu value={country.iso2} setCountry={setCountry} />
+          </InputAdornment>
+        )
+      }}
+      onChange={handlePhoneValueChange}
+      {...props}
+    />
+  )
+}
+
+export default TextFieldPhone

package/src/Contacts/AddModal/ContactForm/fieldsConfig.jsx

@@ -14,6 +14,8 @@ import RelationshipIcon from 'cozy-ui/transpiled/react/Icons/Relationship'
 import TelephoneIcon from 'cozy-ui/transpiled/react/Icons/Telephone'
 import InputAdornment from 'cozy-ui/transpiled/react/InputAdornment'
 
+import TextFieldPhone from './TextFieldPhone/index'
+
 /**
  * @type {import('../types').Field[]}
  */
@@ -74,6 +76,7 @@ export const fields = [
     icon: TelephoneIcon,
     type: 'tel',
     layout: 'array',
+    component: TextFieldPhone,
     label: {
       name: 'phoneLabel',
       select: true,

package/src/Contacts/AddModal/ContactForm/formValuesToContact.spec.js

@@ -107,7 +107,7 @@ describe('formValuesToContact', () => {
       note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
       phone: [
         {
-          number: '+33 (2)0 90 00 54 04',
+          number: '+33 2 90 00 54 04',
           primary: true,
           type: undefined,
           label: undefined

package/src/Contacts/AddModal/ContactForm/index.spec.jsx

@@ -211,22 +211,6 @@ describe('ContactForm', () => {
     expect(screen.queryByDisplayValue(testFields['Notes'])).not.toBeNull()
   })
 
-  it('should not submit empty fields', () => {
-    const onSubmit = jest.fn()
-
-    render(
-      <DemoProvider>
-        <ContactForm onSubmit={onSubmit} onCancel={() => {}} />
-      </DemoProvider>
-    )
-
-    act(() => {
-      fireEvent.submit(screen.getByRole('form'))
-    })
-
-    expect(onSubmit).not.toBeCalled()
-  })
-
   describe('isSameContactProp', () => {
     it('should return true if contacts have the same "related" relationships', () => {
       const prevProps = {

package/src/Contacts/AddModal/mocks.js

@@ -80,7 +80,7 @@ export const johnDoeContact = {
   note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
   phone: [
     {
-      number: '+33 (2)0 90 00 54 04',
+      number: '+33 2 90 00 54 04',
       primary: true
     },
     {
@@ -155,7 +155,7 @@ export const johnDoeFormValues = {
   phone: [
     {
       fieldId: 'fieldId_5',
-      phone: '+33 (2)0 90 00 54 04',
+      phone: '+33 2 90 00 54 04',
       phoneLabel: undefined
     },
     {
@@ -254,7 +254,7 @@ export const johnDoeContactWithRelated = {
   note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
   phone: [
     {
-      number: '+33 (2)0 90 00 54 04',
+      number: '+33 2 90 00 54 04',
       primary: true
     },
     {

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