cozy-ui 130.5.0 → 130.6.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [130.6.1](https://github.com/cozy/cozy-ui/compare/v130.6.0...v130.6.1) (2025-10-06)
+
+
+### Bug Fixes
+
+* **AddModal/ContactForm:** Custom label now display correctly unsupported label ([8f81a8a](https://github.com/cozy/cozy-ui/commit/8f81a8a))
+
+# [130.6.0](https://github.com/cozy/cozy-ui/compare/v130.5.0...v130.6.0) (2025-10-02)
+
+
+### Features
+
+* **AlertProvider:** Add `noClickAway` and `noTimeOut` prop ([eee29d0](https://github.com/cozy/cozy-ui/commit/eee29d0))
+
 # [130.5.0](https://github.com/cozy/cozy-ui/compare/v130.4.0...v130.5.0) (2025-10-01)
 
 

package/CODEOWNERS

@@ -1,2 +1,2 @@
 # General code owners
-*       @JF-Cozy @Merkur39 @Ldoppea @zatteo
+*       @JF-Cozy @rezk2ll @zatteo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "130.5.0",
+  "version": "130.6.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

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

@@ -117,6 +117,12 @@ describe('formValuesToContact', () => {
           primary: false,
           type: undefined,
           label: undefined
+        },
+        {
+          label: 'Mobile',
+          number: '0876467998',
+          primary: false,
+          type: 'mobile'
         }
       ],
       relationships: {

package/react/Contacts/AddModal/ContactForm/helpers.js

@@ -271,12 +271,17 @@ export const removeField = (fields, index) => {
 export const makeCustomLabel = (value, t) => {
   const { type, label } = JSON.parse(value)
 
+  const isSupportedLabel = ['home', 'work'].includes(label)
+
   const firstString = type || ''
-  const secondString = label
-    ? type
-      ? ` (${t(`Contacts.AddModal.ContactForm.label.${label}`)})`.toLowerCase()
-      : `label.${label}`
-    : ''
+  const secondString =
+    label && isSupportedLabel
+      ? type
+        ? ` (${t(
+            `Contacts.AddModal.ContactForm.label.${label}`
+          )})`.toLowerCase()
+        : `label.${label}`
+      : ''
 
   return firstString + secondString || null
 }

package/react/Contacts/AddModal/ContactForm/helpers.spec.js

@@ -1,10 +1,45 @@
+import get from 'lodash/get'
+
 import {
   moveToHead,
   makeItemLabel,
   makeTypeAndLabel,
   makeImppValues,
+  makeCustomLabel,
   makeInitialCustomValue
 } from './helpers'
+import { locales } from './locales'
+
+const t = x => get(locales.en, x)
+
+describe('makeCustomLabel', () => {
+  it('should return custom type and supported label', () => {
+    const resForWork = makeCustomLabel('{"type":"someType","label":"work"}', t)
+    expect(resForWork).toBe('someType (pro)')
+
+    const resForHome = makeCustomLabel('{"type":"someType","label":"home"}', t)
+    expect(resForHome).toBe('someType (personal)')
+  })
+
+  it('should return label if no type', () => {
+    const resForWork = makeCustomLabel('{"label":"work"}', t)
+    expect(resForWork).toBe('label.work')
+
+    const resForHome = makeCustomLabel('{"label":"home"}', t)
+    expect(resForHome).toBe('label.home')
+  })
+
+  it('should return only custom type if label is not supported or undefined', () => {
+    const resForNotSupported = makeCustomLabel(
+      '{"type":"someType","label":"someLabel"}',
+      t
+    )
+    expect(resForNotSupported).toBe('someType')
+
+    const resForUndefined = makeCustomLabel('{"type":"someType"}', t)
+    expect(resForUndefined).toBe('someType')
+  })
+})
 
 describe('moveToHead function', () => {
   it('should move an item to head of the array', () => {

package/react/Contacts/AddModal/mocks.js

@@ -86,6 +86,12 @@ export const johnDoeContact = {
     {
       number: '+33 6 77 11 22 33',
       primary: false
+    },
+    {
+      label: 'Mobile', // could be this when importing from other sources i.e. google
+      number: '0876467998',
+      primary: false,
+      type: 'mobile'
     }
   ]
 }
@@ -156,6 +162,11 @@ export const johnDoeFormValues = {
       fieldId: 'fieldId_6',
       phone: '+33 6 77 11 22 33',
       phoneLabel: undefined
+    },
+    {
+      fieldId: 'fieldId_7',
+      phone: '0876467998',
+      phoneLabel: '{"type":"mobile","label":"Mobile"}'
     }
   ],
   givenName: 'John',

package/react/providers/Alert/Readme.md

@@ -15,6 +15,8 @@ const initialVariants = [{
   square: false,
   standard: false,
   outlined: false,
+  noClickAway: false,
+  noTimeOut: false,
   close: true
 }]
 
@@ -23,7 +25,7 @@ const Component = ({ variant }) => {
 
   return (
     <Button
-      label="show alert"
+      label="Show alert"
       onClick={() =>
         showAlert({
           title: variant.title ? 'Alert title' : undefined,
@@ -42,6 +44,8 @@ const Component = ({ variant }) => {
             : variant.largeIcon
             ? <Icon icon={DeviceLaptopIcon} size={32} />
             : undefined,
+          noClickAway: variant.noClickAway,
+          noTimeOut: variant.noTimeOut,
           onClose: variant.close ? () => {} : undefined
         })
       }

package/react/providers/Alert/helpers.js

@@ -0,0 +1,13 @@
+export const handleClose = (state, setState) => (event, reason) => {
+  const { noClickAway, noTimeOut } = state
+
+  if (reason === 'clickaway' && noClickAway) {
+    return
+  }
+
+  if (reason === 'timeout' && noTimeOut) {
+    return
+  }
+
+  return setState({ ...state, open: false })
+}

package/react/providers/Alert/index.jsx

@@ -1,5 +1,6 @@
 import React, { createContext, useState, useContext, useMemo } from 'react'
 
+import { handleClose } from './helpers'
 import Alert from '../../Alert'
 import AlertTitle from '../../AlertTitle'
 import Snackbar from '../../Snackbar'
@@ -32,13 +33,19 @@ const defaultState = {
   duration: null,
   open: false
 }
-const handleClose = (state, setState) => () => {
-  return setState({ ...state, open: false })
-}
 
 const AlertProvider = ({ children }) => {
   const [state, setState] = useState(defaultState)
-  const { open, message, title, duration, ...alertProps } = state
+  // noTimeOut and noClickAway are destructured to not being passed to the DOM through ...alertProps
+  const {
+    open,
+    message,
+    title,
+    duration,
+    noTimeOut, // eslint-disable-line no-unused-vars
+    noClickAway, // eslint-disable-line no-unused-vars
+    ...alertProps
+  } = state
 
   const value = useMemo(
     () => ({
@@ -63,7 +70,7 @@ const AlertProvider = ({ children }) => {
         <Alert
           variant="filled"
           elevation={6}
-          onClose={handleClose(state, setState)}
+          onClose={ev => handleClose(state, setState)(ev, 'click')}
           {...alertProps}
         >
           {title && <AlertTitle>{title}</AlertTitle>}

package/transpiled/react/Contacts/AddModal/ContactForm/helpers.js

@@ -278,8 +278,9 @@ export var makeCustomLabel = function makeCustomLabel(value, t) {
       type = _JSON$parse.type,
       label = _JSON$parse.label;
 
+  var isSupportedLabel = ['home', 'work'].includes(label);
   var firstString = type || '';
-  var secondString = label ? type ? " (".concat(t("Contacts.AddModal.ContactForm.label.".concat(label)), ")").toLowerCase() : "label.".concat(label) : '';
+  var secondString = label && isSupportedLabel ? type ? " (".concat(t("Contacts.AddModal.ContactForm.label.".concat(label)), ")").toLowerCase() : "label.".concat(label) : '';
   return firstString + secondString || null;
 };
 /**

package/transpiled/react/Contacts/AddModal/mocks.d.ts

@@ -66,10 +66,17 @@ export namespace johnDoeContact {
         export const version: number;
     }
     const note: string;
-    const phone: {
+    const phone: ({
         number: string;
         primary: boolean;
-    }[];
+        label?: undefined;
+        type?: undefined;
+    } | {
+        label: string;
+        number: string;
+        primary: boolean;
+        type: string;
+    })[];
 }
 export namespace johnDoeFormValues {
     const birthday_1: string;
@@ -126,11 +133,15 @@ export namespace johnDoeFormValues {
         emailLabel: string;
     })[];
     export { email_1 as email };
-    const phone_1: {
+    const phone_1: ({
         fieldId: string;
         phone: string;
         phoneLabel: undefined;
-    }[];
+    } | {
+        fieldId: string;
+        phone: string;
+        phoneLabel: string;
+    })[];
     export { phone_1 as phone };
     const givenName_1: string;
     export { givenName_1 as givenName };

package/transpiled/react/Contacts/AddModal/mocks.js

@@ -71,6 +71,12 @@ export var johnDoeContact = {
   }, {
     number: '+33 6 77 11 22 33',
     primary: false
+  }, {
+    label: 'Mobile',
+    // could be this when importing from other sources i.e. google
+    number: '0876467998',
+    primary: false,
+    type: 'mobile'
   }]
 };
 export var johnDoeFormValues = {
@@ -130,6 +136,10 @@ export var johnDoeFormValues = {
     fieldId: 'fieldId_6',
     phone: '+33 6 77 11 22 33',
     phoneLabel: undefined
+  }, {
+    fieldId: 'fieldId_7',
+    phone: '0876467998',
+    phoneLabel: '{"type":"mobile","label":"Mobile"}'
   }],
   givenName: 'John',
   additionalName: 'J.',

package/transpiled/react/providers/Alert/helpers.d.ts

@@ -0,0 +1 @@
+export function handleClose(state: any, setState: any): (event: any, reason: any) => any;

package/transpiled/react/providers/Alert/helpers.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+export var handleClose = function handleClose(state, setState) {
+  return function (event, reason) {
+    var noClickAway = state.noClickAway,
+        noTimeOut = state.noTimeOut;
+
+    if (reason === 'clickaway' && noClickAway) {
+      return;
+    }
+
+    if (reason === 'timeout' && noTimeOut) {
+      return;
+    }
+
+    return setState(_objectSpread(_objectSpread({}, state), {}, {
+      open: false
+    }));
+  };
+};

package/transpiled/react/providers/Alert/index.js

@@ -1,14 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["open", "message", "title", "duration"];
+var _excluded = ["open", "message", "title", "duration", "noTimeOut", "noClickAway"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { createContext, useState, useContext, useMemo } from 'react';
+import { handleClose } from "cozy-ui/transpiled/react/providers/Alert/helpers";
 import Alert from "cozy-ui/transpiled/react/Alert";
 import AlertTitle from "cozy-ui/transpiled/react/AlertTitle";
 import Snackbar from "cozy-ui/transpiled/react/Snackbar";
@@ -42,26 +43,21 @@ var defaultState = {
   open: false
 };
 
-var handleClose = function handleClose(state, setState) {
-  return function () {
-    return setState(_objectSpread(_objectSpread({}, state), {}, {
-      open: false
-    }));
-  };
-};
-
 var AlertProvider = function AlertProvider(_ref) {
   var children = _ref.children;
 
   var _useState = useState(defaultState),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1];
+      setState = _useState2[1]; // noTimeOut and noClickAway are destructured to not being passed to the DOM through ...alertProps
+
 
   var open = state.open,
       message = state.message,
       title = state.title,
       duration = state.duration,
+      noTimeOut = state.noTimeOut,
+      noClickAway = state.noClickAway,
       alertProps = _objectWithoutProperties(state, _excluded);
 
   var value = useMemo(function () {
@@ -85,7 +81,9 @@ var AlertProvider = function AlertProvider(_ref) {
   }, /*#__PURE__*/React.createElement(Alert, _extends({
     variant: "filled",
     elevation: 6,
-    onClose: handleClose(state, setState)
+    onClose: function onClose(ev) {
+      return handleClose(state, setState)(ev, 'click');
+    }
   }, alertProps), title && /*#__PURE__*/React.createElement(AlertTitle, null, title), message)));
 };