cozy-ui-plus 4.5.1 → 4.6.0

package/CHANGELOG.md

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

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/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/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.1",
+  "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": "549503df8a2071ff837e672ad5f7019aa122cb1f"
+  "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
     },
     {