cozy-ui-plus 4.6.0 → 5.0.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.
 
+# [5.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@4.6.0...cozy-ui-plus@5.0.0) (2026-02-23)
+
+### Bug Fixes
+
+- **cozy-ui-plus:** Adjust mobile style of flags items in TextFieldPhone ([9cdd431](https://github.com/cozy/cozy-libs/commit/9cdd431c536d6629a9bc4acd1b097d7772a46538))
+
+### Features
+
+- **cozy-ui-plus:** Create own FlagImage to show country flags ([1a1ccaf](https://github.com/cozy/cozy-libs/commit/1a1ccaf40c8671e3af6607a031be04477a7abee5))
+- **cozy-ui-plus:** Upgrade packages ([e859c05](https://github.com/cozy/cozy-libs/commit/e859c053e13b145f00a1ca75ff39668eb3974cde))
+
+### BREAKING CHANGES
+
+- **cozy-ui-plus:** You must have `cozy-client >= 60.21.3`
+
 # [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

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

@@ -15,16 +15,20 @@ require("react-international-phone/style.css");
 
 var _BottomSheet = _interopRequireWildcard(require("cozy-ui/transpiled/react/BottomSheet"));
 
+var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
+
+var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
+
 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 _FlagImage = _interopRequireDefault(require("./FlagImage"));
+
 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); }
@@ -44,35 +48,37 @@ var FlagBottomSheet = function FlagBottomSheet(_ref) {
     onClick: function onClick() {
       return setOpen(true);
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactInternationalPhone.FlagImage, {
+  }, /*#__PURE__*/_react.default.createElement(_FlagImage.default, {
     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) {
+  }, /*#__PURE__*/_react.default.createElement(_BottomSheet.BottomSheetItem, {
+    disableGutters: true
+  }, /*#__PURE__*/_react.default.createElement(_List.default, 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, {
+    return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
       key: iso2,
       value: iso2,
+      button: true,
       onClick: function onClick() {
         setCountry(iso2);
         setOpen(false);
       }
-    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_reactInternationalPhone.FlagImage, {
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_FlagImage.default, {
       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;

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

@@ -0,0 +1,32 @@
+"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 _countries = require("cozy-client/dist/models/country/countries");
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _excluded = ["iso2"];
+
+var FlagImage = function FlagImage(_ref) {
+  var iso2 = _ref.iso2,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var flagEmoji = (0, _countries.getEmojiByCountry)(iso2);
+  return /*#__PURE__*/_react.default.createElement(_Typography.default, (0, _extends2.default)({}, props, {
+    variant: "h3"
+  }), flagEmoji);
+};
+
+var _default = FlagImage;
+exports.default = _default;

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-require("react-international-phone/style.css");
+var _reactInternationalPhone = require("react-international-phone");
 
 var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
 
@@ -23,7 +23,7 @@ var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typog
 
 var _CustomInput = _interopRequireDefault(require("./CustomInput"));
 
-var _reactInternationalPhone = require("react-international-phone");
+var _FlagImage = _interopRequireDefault(require("./FlagImage"));
 
 var FlagMenu = function FlagMenu(_ref) {
   var value = _ref.value,
@@ -41,12 +41,9 @@ var FlagMenu = function FlagMenu(_ref) {
     },
     value: value,
     renderValue: function renderValue(v) {
-      return /*#__PURE__*/_react.default.createElement(_reactInternationalPhone.FlagImage, {
-        iso2: v,
-        style: {
-          verticalAlign: 'bottom',
-          marginLeft: '0.5rem'
-        }
+      return /*#__PURE__*/_react.default.createElement(_FlagImage.default, {
+        className: "u-ml-half",
+        iso2: v
       });
     },
     onChange: function onChange(e) {
@@ -61,7 +58,7 @@ var FlagMenu = function FlagMenu(_ref) {
     return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
       key: iso2,
       value: iso2
-    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_reactInternationalPhone.FlagImage, {
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_FlagImage.default, {
       iso2: iso2
     })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
       primary: name

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

@@ -0,0 +1,5 @@
+export default FlagImage;
+declare function FlagImage({ iso2, ...props }: {
+    [x: string]: any;
+    iso2: any;
+}): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -32,11 +32,11 @@
     "@typescript-eslint/parser": "5.54.0",
     "babel-plugin-inline-json-import": "0.3.2",
     "babel-preset-cozy-app": "^2.8.3",
-    "cozy-client": "^60.5.0",
+    "cozy-client": "^60.21.3",
     "cozy-device-helper": "2.0.0",
     "cozy-intent": "^2.30.2",
     "cozy-logger": "^1.17.0",
-    "cozy-stack-client": "^60.1.0",
+    "cozy-stack-client": "^60.21.1",
     "cozy-ui": "^135.0.0",
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
@@ -64,7 +64,7 @@
     "rooks": "7.14.1"
   },
   "peerDependencies": {
-    "cozy-client": ">=60.5.0",
+    "cozy-client": ">=60.21.3",
     "cozy-device-helper": ">=2.0.0",
     "cozy-intent": ">=2.30.0",
     "cozy-logger": ">=1.17.0",
@@ -73,5 +73,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "8a5f3cb0c64efb15a79cb856927dba5513a94623"
+  "gitHead": "773752426c7e3d6ce69400c6c320c67648d8d207"
 }

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

@@ -4,18 +4,16 @@ import 'react-international-phone/style.css'
 import BottomSheet, {
   BottomSheetItem
 } from 'cozy-ui/transpiled/react/BottomSheet'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
 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 FlagImage from './FlagImage'
 
-import {
-  defaultCountries,
-  FlagImage,
-  parseCountry
-} from 'react-international-phone'
+import { defaultCountries, parseCountry } from 'react-international-phone'
 
 const FlagBottomSheet = ({ value, setCountry }) => {
   const [open, setOpen] = useState(false)
@@ -28,28 +26,29 @@ const FlagBottomSheet = ({ value, setCountry }) => {
 
       {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 disableGutters>
+            <List>
+              {defaultCountries.map(c => {
+                const { iso2, name, dialCode } = parseCountry(c)
+                return (
+                  <ListItem
+                    key={iso2}
+                    value={iso2}
+                    button
+                    onClick={() => {
+                      setCountry(iso2)
+                      setOpen(false)
+                    }}
+                  >
+                    <ListItemIcon>
+                      <FlagImage iso2={iso2} />
+                    </ListItemIcon>
+                    <ListItemText primary={name} />
+                    <Typography align="right">+{dialCode}</Typography>
+                  </ListItem>
+                )
+              })}
+            </List>
           </BottomSheetItem>
         </BottomSheet>
       )}

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

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { getEmojiByCountry } from 'cozy-client/dist/models/country/countries'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const FlagImage = ({ iso2, ...props }) => {
+  const flagEmoji = getEmojiByCountry(iso2)
+
+  return (
+    <Typography {...props} variant="h3">
+      {flagEmoji}
+    </Typography>
+  )
+}
+
+export default FlagImage

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import 'react-international-phone/style.css'
+import { defaultCountries, parseCountry } from 'react-international-phone'
 
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
@@ -8,12 +8,7 @@ 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'
+import FlagImage from './FlagImage'
 
 const FlagMenu = ({ value, setCountry }) => {
   return (
@@ -29,12 +24,7 @@ const FlagMenu = ({ value, setCountry }) => {
         }
       }}
       value={value}
-      renderValue={v => (
-        <FlagImage
-          iso2={v}
-          style={{ verticalAlign: 'bottom', marginLeft: '0.5rem' }}
-        />
-      )}
+      renderValue={v => <FlagImage className="u-ml-half" iso2={v} />}
       onChange={e => setCountry(e.target.value)}
     >
       {defaultCountries.map(c => {

package/src/Paywall/Paywall.spec.jsx

@@ -110,7 +110,7 @@ describe('Paywall', () => {
     })
     fireEvent.click(actionButton)
     expect(openSpy).toBeCalledWith(
-      'http://mycozy.cloud/cozy/instances/123/premium',
+      'http://mycozy.cloud/cozy/instances/123/premium?lang=en',
       '_self'
     )
   })
@@ -220,7 +220,7 @@ describe('Paywall', () => {
       })
       fireEvent.click(actionButton)
       expect(openSpy).toBeCalledWith(
-        'http://mycozy.cloud/cozy/instances/123/premium',
+        'http://mycozy.cloud/cozy/instances/123/premium?lang=en',
         '_self'
       )
     })