cozy-ui 130.9.0 → 130.10.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [130.10.0](https://github.com/cozy/cozy-ui/compare/v130.9.0...v130.10.0) (2025-10-16)
+
+
+### Features
+
+* Add EditBadge component ([47e98d2](https://github.com/cozy/cozy-ui/commit/47e98d2))
+* **EditBadge:** We can now pass props to the main Badge component ([98eb169](https://github.com/cozy/cozy-ui/commit/98eb169))
+* **Utils/React:** Add `AddPropsToChildren` function ([1724619](https://github.com/cozy/cozy-ui/commit/1724619))
+
 # [130.9.0](https://github.com/cozy/cozy-ui/compare/v130.8.1...v130.9.0) (2025-10-16)
 
 

package/package.json

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

package/react/EditBadge/EditMenu.jsx

@@ -0,0 +1,102 @@
+import React, { useRef } from 'react'
+
+import { handleDelete, handleUpload } from './helpers'
+import { locales } from './locales'
+import Icon from '../Icon'
+import CameraIcon from '../Icons/Camera'
+import TrashIcon from '../Icons/Trash'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import Menu from '../Menu'
+import MenuItem from '../MenuItem'
+import { useAlert } from '../providers/Alert'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const EditMenu = ({
+  anchorRef,
+  status,
+  showMenu,
+  setShowMenu,
+  setStatus,
+  setTimestamp,
+  onUpload,
+  onDelete
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+
+  const fileInputRef = useRef(null)
+
+  return (
+    <>
+      <input
+        className="u-dn"
+        type="file"
+        ref={fileInputRef}
+        accept="image/*"
+        onChange={event =>
+          handleUpload({
+            event,
+            t,
+            fileInputRef,
+            status,
+            onUpload,
+            setStatus,
+            setTimestamp,
+            setShowMenu,
+            showAlert
+          })
+        }
+      />
+      {showMenu && (
+        <Menu
+          open
+          anchorEl={anchorRef}
+          getContentAnchorEl={null}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left'
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left'
+          }}
+          onClose={() => setShowMenu(false)}
+        >
+          <MenuItem
+            onClick={() => {
+              setShowMenu(false)
+              fileInputRef.current.click() // triggers onChange of the input
+            }}
+          >
+            <ListItemIcon>
+              <Icon icon={CameraIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('EditBadge.menu.update')} />
+          </MenuItem>
+          <MenuItem
+            onClick={() =>
+              handleDelete({
+                t,
+                status,
+                onDelete,
+                setShowMenu,
+                setStatus,
+                setTimestamp,
+                showAlert
+              })
+            }
+          >
+            <ListItemIcon>
+              <Icon icon={TrashIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('EditBadge.menu.delete')} />
+          </MenuItem>
+        </Menu>
+      )}
+    </>
+  )
+}
+
+export default EditMenu

package/react/EditBadge/Readme.md

@@ -0,0 +1,22 @@
+⚠️ Must be used within `AlertProvider`.
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
+import EditBadge from 'cozy-ui/transpiled/react/EditBadge'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+
+;
+
+<DemoProvider>
+  <AlertProvider>
+    <EditBadge
+      src={timestamp => ""}
+      onUpload={file => {}}
+      onDelete={() => {}}
+    >
+      <Avatar size={94} alt="Avatar" />
+    </EditBadge>
+  </AlertProvider>
+</DemoProvider>
+```

package/react/EditBadge/StatusWrapper.jsx

@@ -0,0 +1,32 @@
+import cx from 'classnames'
+import React from 'react'
+
+import Spinner from '../Spinner'
+import { AddPropsToChildren } from '../utils/react'
+
+const StatusWrapper = ({ src, status, setStatus, timestamp, children }) => {
+  if (status === 'LOADING') {
+    return (
+      <>
+        {AddPropsToChildren(children, childProps => ({
+          className: cx(childProps.className, 'u-o-50')
+        }))}
+        <Spinner className="u-m-0" middle size="large" />
+      </>
+    )
+  }
+
+  if (status === 'PRESENT') {
+    return AddPropsToChildren(children, () => ({
+      key: timestamp,
+      src,
+      onError: () => setStatus('ABSENT')
+    }))
+  }
+
+  return AddPropsToChildren(children, () => ({
+    key: timestamp
+  }))
+}
+
+export default StatusWrapper

package/react/EditBadge/helpers.js

@@ -0,0 +1,102 @@
+const MAX_FILE_SIZE = 5 * 1024 * 1024
+const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+
+export const handleUpload = async ({
+  event,
+  t,
+  fileInputRef,
+  status,
+  onUpload,
+  setStatus,
+  setTimestamp,
+  setShowMenu,
+  showAlert
+}) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  if (file.size > MAX_FILE_SIZE) {
+    showAlert({
+      message: t('EditBadge.upload.file-size'),
+      severity: 'error'
+    })
+    return
+  }
+
+  if (!ALLOWED_TYPES.includes(file.type)) {
+    showAlert({
+      message: t('EditBadge.upload.file-type'),
+      severity: 'error'
+    })
+    return
+  }
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 30000)
+
+  const previouStatus = status
+  setStatus('LOADING')
+
+  try {
+    await onUpload(file)
+    clearTimeout(timeoutId)
+
+    const newTimestamp = Date.now()
+    setStatus('PRESENT')
+    setTimestamp(newTimestamp)
+    showAlert({
+      message: t('EditBadge.upload.success'),
+      severity: 'success'
+    })
+  } catch (error) {
+    clearTimeout(timeoutId)
+    setStatus(previouStatus)
+    showAlert({
+      message: t('EditBadge.upload.error'),
+      severity: 'error'
+    })
+  } finally {
+    setShowMenu(false)
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+}
+
+export const handleDelete = async ({
+  t,
+  status,
+  onDelete,
+  setShowMenu,
+  setStatus,
+  setTimestamp,
+  showAlert
+}) => {
+  setShowMenu(false)
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 30000)
+  const previousStatus = status
+  setStatus('LOADING')
+
+  try {
+    await onDelete()
+    clearTimeout(timeoutId)
+
+    const checkTimestamp = Date.now()
+
+    setStatus('ABSENT')
+    setTimestamp(checkTimestamp)
+    showAlert({
+      message: t('EditBadge.delete.success'),
+      severity: 'success'
+    })
+  } catch (error) {
+    clearTimeout(timeoutId)
+    setStatus(previousStatus)
+    showAlert({
+      message: t('EditBadge.delete.error'),
+      severity: 'error'
+    })
+  }
+}

package/react/EditBadge/index.jsx

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
+
+import EditMenu from './EditMenu'
+import StatusWrapper from './StatusWrapper'
+import Badge from '../Badge'
+import Button from '../Buttons'
+import Icon from '../Icon'
+import PenIcon from '../Icons/Pen'
+
+const EditBadge = ({
+  src,
+  onUpload,
+  onDelete,
+  anchorOrigin,
+  children,
+  ...props
+}) => {
+  const [showMenu, setShowMenu] = useState(false)
+  const [status, setStatus] = useState('PRESENT') // PRESENT || ABSENT || LOADING
+  const [timestamp, setTimestamp] = useState(Date.now())
+
+  const menuAnchorRef = useRef(null)
+
+  return (
+    <Badge
+      {...props}
+      anchorOrigin={anchorOrigin}
+      badgeContent={
+        <>
+          <Button
+            ref={menuAnchorRef}
+            component="div"
+            className="u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle"
+            classes={{ label: 'u-flex u-w-auto' }}
+            style={{
+              outline: '4px solid var(--paperBackgroundColor)'
+            }}
+            label={<Icon icon={PenIcon} />}
+            size="small"
+            onClick={() => setShowMenu(v => !v)}
+          />
+          <EditMenu
+            anchorRef={menuAnchorRef.current}
+            status={status}
+            showMenu={showMenu}
+            setShowMenu={setShowMenu}
+            setStatus={setStatus}
+            setTimestamp={setTimestamp}
+            onUpload={onUpload}
+            onDelete={onDelete}
+          />
+        </>
+      }
+    >
+      <StatusWrapper
+        src={src(timestamp)}
+        status={status}
+        setStatus={setStatus}
+        timestamp={timestamp}
+      >
+        {children}
+      </StatusWrapper>
+    </Badge>
+  )
+}
+
+EditBadge.defaultProps = {
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'right'
+  }
+}
+
+EditBadge.propTypes = {
+  src: PropTypes.func.isRequired,
+  onUpload: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
+}
+
+export default EditBadge

package/react/EditBadge/locales/en.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Update",
+      "delete": "Delete"
+    },
+    "upload": {
+      "file-size": "The file size limit is 5MB.",
+      "file-type": "The file type is not supported. Please try again.",
+      "success": "Avatar updated successfully",
+      "error": "The avatar upload has failed. Please try again."
+    },
+    "delete": {
+      "success": "Avatar deleted successfully",
+      "error": "The avatar deletion has failed. Please try again."
+    }
+  }
+}

package/react/EditBadge/locales/fr.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Mettre à jour",
+      "delete": "Supprimer"
+    },
+    "upload": {
+      "file-size": "La taille du fichier est limitée à 5Mo.",
+      "file-type": "Le type de fichier n'est pas supporté. Merci de réessayer.",
+      "success": "Avatar mis à jour avec succès",
+      "error": "La mise à jour de l'avatar a échoué. Merci de réessayer."
+    },
+    "delete": {
+      "success": "Avatar supprimé avec succès",
+      "error": "La suppression de l'avatar a échoué. Merci de réessayer."
+    }
+  }
+}

package/react/EditBadge/locales/index.js

@@ -0,0 +1,11 @@
+import en from './en.json'
+import fr from './fr.json'
+import ru from './ru.json'
+import vi from './vi.json'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}

package/react/EditBadge/locales/ru.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Обновить",
+      "delete": "Удалить"
+    },
+    "upload": {
+      "file-size": "Максимальный размер файла — 5 МБ.",
+      "file-type": "Тип файла не поддерживается. Пожалуйста, попробуйте снова.",
+      "success": "Аватар успешно обновлён",
+      "error": "Не удалось загрузить аватар. Пожалуйста, попробуйте снова."
+    },
+    "delete": {
+      "success": "Аватар успешно удалён",
+      "error": "Не удалось удалить аватар. Пожалуйста, попробуйте снова."
+    }
+  }
+}

package/react/EditBadge/locales/vi.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Cập nhật",
+      "delete": "Xóa"
+    },
+    "upload": {
+      "file-size": "Giới hạn kích thước tệp là 5MB.",
+      "file-type": "Loại tệp không được hỗ trợ. Vui lòng thử lại.",
+      "success": "Cập nhật ảnh đại diện thành công",
+      "error": "Tải ảnh đại diện thất bại. Vui lòng thử lại."
+    },
+    "delete": {
+      "success": "Xóa ảnh đại diện thành công",
+      "error": "Xóa ảnh đại diện thất bại. Vui lòng thử lại."
+    }
+  }
+}

package/react/utils/react.js

@@ -1,4 +1,4 @@
-import { Fragment, Children } from 'react'
+import { Fragment, Children, isValidElement, cloneElement } from 'react'
 
 /**
  * Get the name of the node
@@ -33,3 +33,16 @@ export const getLastChild = props => {
     ? getChildren(lastChild.props)[0]
     : lastChild
 }
+
+/**
+ * Clone a React child and add props on it
+ * @param {React.ReactElement} children
+ * @param {Function} propsCallback - get child props as arg, return new props as object
+ * @returns
+ */
+export const AddPropsToChildren = (children, propsCallback) =>
+  Children.map(children, child =>
+    isValidElement(child)
+      ? cloneElement(child, { ...propsCallback(child.props) })
+      : null
+  )

package/transpiled/react/EditBadge/EditMenu.d.ts

@@ -0,0 +1,11 @@
+export default EditMenu;
+declare function EditMenu({ anchorRef, status, showMenu, setShowMenu, setStatus, setTimestamp, onUpload, onDelete }: {
+    anchorRef: any;
+    status: any;
+    showMenu: any;
+    setShowMenu: any;
+    setStatus: any;
+    setTimestamp: any;
+    onUpload: any;
+    onDelete: any;
+}): JSX.Element;

package/transpiled/react/EditBadge/EditMenu.js

@@ -0,0 +1,93 @@
+import React, { useRef } from 'react';
+import { handleDelete, handleUpload } from "cozy-ui/transpiled/react/EditBadge/helpers";
+import { locales } from "cozy-ui/transpiled/react/EditBadge/locales";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CameraIcon from "cozy-ui/transpiled/react/Icons/Camera";
+import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash";
+import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
+import ListItemText from "cozy-ui/transpiled/react/ListItemText";
+import Menu from "cozy-ui/transpiled/react/Menu";
+import MenuItem from "cozy-ui/transpiled/react/MenuItem";
+import { useAlert } from "cozy-ui/transpiled/react/providers/Alert";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var EditMenu = function EditMenu(_ref) {
+  var anchorRef = _ref.anchorRef,
+      status = _ref.status,
+      showMenu = _ref.showMenu,
+      setShowMenu = _ref.setShowMenu,
+      setStatus = _ref.setStatus,
+      setTimestamp = _ref.setTimestamp,
+      onUpload = _ref.onUpload,
+      onDelete = _ref.onDelete;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useAlert = useAlert(),
+      showAlert = _useAlert.showAlert;
+
+  var fileInputRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    className: "u-dn",
+    type: "file",
+    ref: fileInputRef,
+    accept: "image/*",
+    onChange: function onChange(event) {
+      return handleUpload({
+        event: event,
+        t: t,
+        fileInputRef: fileInputRef,
+        status: status,
+        onUpload: onUpload,
+        setStatus: setStatus,
+        setTimestamp: setTimestamp,
+        setShowMenu: setShowMenu,
+        showAlert: showAlert
+      });
+    }
+  }), showMenu && /*#__PURE__*/React.createElement(Menu, {
+    open: true,
+    anchorEl: anchorRef,
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    onClose: function onClose() {
+      return setShowMenu(false);
+    }
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: function onClick() {
+      setShowMenu(false);
+      fileInputRef.current.click(); // triggers onChange of the input
+    }
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: CameraIcon
+  })), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: t('EditBadge.menu.update')
+  })), /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: function onClick() {
+      return handleDelete({
+        t: t,
+        status: status,
+        onDelete: onDelete,
+        setShowMenu: setShowMenu,
+        setStatus: setStatus,
+        setTimestamp: setTimestamp,
+        showAlert: showAlert
+      });
+    }
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: TrashIcon
+  })), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: t('EditBadge.menu.delete')
+  }))));
+};
+
+export default EditMenu;

package/transpiled/react/EditBadge/StatusWrapper.d.ts

@@ -0,0 +1,9 @@
+export default StatusWrapper;
+declare function StatusWrapper({ src, status, setStatus, timestamp, children }: {
+    src: any;
+    status: any;
+    setStatus: any;
+    timestamp: any;
+    children: any;
+}): JSX.Element | (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+import React from "react";

package/transpiled/react/EditBadge/StatusWrapper.js

@@ -0,0 +1,44 @@
+import cx from 'classnames';
+import React from 'react';
+import Spinner from "cozy-ui/transpiled/react/Spinner";
+import { AddPropsToChildren } from "cozy-ui/transpiled/react/utils/react";
+
+var StatusWrapper = function StatusWrapper(_ref) {
+  var src = _ref.src,
+      status = _ref.status,
+      setStatus = _ref.setStatus,
+      timestamp = _ref.timestamp,
+      children = _ref.children;
+
+  if (status === 'LOADING') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, AddPropsToChildren(children, function (childProps) {
+      return {
+        className: cx(childProps.className, 'u-o-50')
+      };
+    }), /*#__PURE__*/React.createElement(Spinner, {
+      className: "u-m-0",
+      middle: true,
+      size: "large"
+    }));
+  }
+
+  if (status === 'PRESENT') {
+    return AddPropsToChildren(children, function () {
+      return {
+        key: timestamp,
+        src: src,
+        onError: function onError() {
+          return setStatus('ABSENT');
+        }
+      };
+    });
+  }
+
+  return AddPropsToChildren(children, function () {
+    return {
+      key: timestamp
+    };
+  });
+};
+
+export default StatusWrapper;

package/transpiled/react/EditBadge/helpers.d.ts

@@ -0,0 +1,20 @@
+export function handleUpload({ event, t, fileInputRef, status, onUpload, setStatus, setTimestamp, setShowMenu, showAlert }: {
+    event: any;
+    t: any;
+    fileInputRef: any;
+    status: any;
+    onUpload: any;
+    setStatus: any;
+    setTimestamp: any;
+    setShowMenu: any;
+    showAlert: any;
+}): Promise<void>;
+export function handleDelete({ t, status, onDelete, setShowMenu, setStatus, setTimestamp, showAlert }: {
+    t: any;
+    status: any;
+    onDelete: any;
+    setShowMenu: any;
+    setStatus: any;
+    setTimestamp: any;
+    showAlert: any;
+}): Promise<void>;

package/transpiled/react/EditBadge/helpers.js

@@ -0,0 +1,153 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+var MAX_FILE_SIZE = 5 * 1024 * 1024;
+var ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+export var handleUpload = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var event, t, fileInputRef, status, onUpload, setStatus, setTimestamp, setShowMenu, showAlert, file, controller, timeoutId, previouStatus, newTimestamp;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            event = _ref.event, t = _ref.t, fileInputRef = _ref.fileInputRef, status = _ref.status, onUpload = _ref.onUpload, setStatus = _ref.setStatus, setTimestamp = _ref.setTimestamp, setShowMenu = _ref.setShowMenu, showAlert = _ref.showAlert;
+            file = event.target.files[0];
+
+            if (file) {
+              _context.next = 4;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 4:
+            if (!(file.size > MAX_FILE_SIZE)) {
+              _context.next = 7;
+              break;
+            }
+
+            showAlert({
+              message: t('EditBadge.upload.file-size'),
+              severity: 'error'
+            });
+            return _context.abrupt("return");
+
+          case 7:
+            if (ALLOWED_TYPES.includes(file.type)) {
+              _context.next = 10;
+              break;
+            }
+
+            showAlert({
+              message: t('EditBadge.upload.file-type'),
+              severity: 'error'
+            });
+            return _context.abrupt("return");
+
+          case 10:
+            controller = new AbortController();
+            timeoutId = setTimeout(function () {
+              return controller.abort();
+            }, 30000);
+            previouStatus = status;
+            setStatus('LOADING');
+            _context.prev = 14;
+            _context.next = 17;
+            return onUpload(file);
+
+          case 17:
+            clearTimeout(timeoutId);
+            newTimestamp = Date.now();
+            setStatus('PRESENT');
+            setTimestamp(newTimestamp);
+            showAlert({
+              message: t('EditBadge.upload.success'),
+              severity: 'success'
+            });
+            _context.next = 29;
+            break;
+
+          case 24:
+            _context.prev = 24;
+            _context.t0 = _context["catch"](14);
+            clearTimeout(timeoutId);
+            setStatus(previouStatus);
+            showAlert({
+              message: t('EditBadge.upload.error'),
+              severity: 'error'
+            });
+
+          case 29:
+            _context.prev = 29;
+            setShowMenu(false);
+
+            if (fileInputRef.current) {
+              fileInputRef.current.value = '';
+            }
+
+            return _context.finish(29);
+
+          case 33:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[14, 24, 29, 33]]);
+  }));
+
+  return function handleUpload(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+export var handleDelete = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref3) {
+    var t, status, onDelete, setShowMenu, setStatus, setTimestamp, showAlert, controller, timeoutId, previousStatus, checkTimestamp;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            t = _ref3.t, status = _ref3.status, onDelete = _ref3.onDelete, setShowMenu = _ref3.setShowMenu, setStatus = _ref3.setStatus, setTimestamp = _ref3.setTimestamp, showAlert = _ref3.showAlert;
+            setShowMenu(false);
+            controller = new AbortController();
+            timeoutId = setTimeout(function () {
+              return controller.abort();
+            }, 30000);
+            previousStatus = status;
+            setStatus('LOADING');
+            _context2.prev = 6;
+            _context2.next = 9;
+            return onDelete();
+
+          case 9:
+            clearTimeout(timeoutId);
+            checkTimestamp = Date.now();
+            setStatus('ABSENT');
+            setTimestamp(checkTimestamp);
+            showAlert({
+              message: t('EditBadge.delete.success'),
+              severity: 'success'
+            });
+            _context2.next = 21;
+            break;
+
+          case 16:
+            _context2.prev = 16;
+            _context2.t0 = _context2["catch"](6);
+            clearTimeout(timeoutId);
+            setStatus(previousStatus);
+            showAlert({
+              message: t('EditBadge.delete.error'),
+              severity: 'error'
+            });
+
+          case 21:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[6, 16]]);
+  }));
+
+  return function handleDelete(_x2) {
+    return _ref4.apply(this, arguments);
+  };
+}();

package/transpiled/react/EditBadge/index.d.ts

@@ -0,0 +1,23 @@
+export default EditBadge;
+declare function EditBadge({ src, onUpload, onDelete, anchorOrigin, children, ...props }: {
+    [x: string]: any;
+    src: any;
+    onUpload: any;
+    onDelete: any;
+    anchorOrigin: any;
+    children: any;
+}): JSX.Element;
+declare namespace EditBadge {
+    namespace defaultProps {
+        namespace anchorOrigin {
+            const vertical: string;
+            const horizontal: string;
+        }
+    }
+    namespace propTypes {
+        const src: PropTypes.Validator<(...args: any[]) => any>;
+        const onUpload: PropTypes.Validator<(...args: any[]) => any>;
+        const onDelete: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";

package/transpiled/react/EditBadge/index.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["src", "onUpload", "onDelete", "anchorOrigin", "children"];
+import PropTypes from 'prop-types';
+import React, { useState, useRef } from 'react';
+import EditMenu from "cozy-ui/transpiled/react/EditBadge/EditMenu";
+import StatusWrapper from "cozy-ui/transpiled/react/EditBadge/StatusWrapper";
+import Badge from "cozy-ui/transpiled/react/Badge";
+import Button from "cozy-ui/transpiled/react/Buttons";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import PenIcon from "cozy-ui/transpiled/react/Icons/Pen";
+
+var EditBadge = function EditBadge(_ref) {
+  var src = _ref.src,
+      onUpload = _ref.onUpload,
+      onDelete = _ref.onDelete,
+      anchorOrigin = _ref.anchorOrigin,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var _useState3 = useState('PRESENT'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      status = _useState4[0],
+      setStatus = _useState4[1]; // PRESENT || ABSENT || LOADING
+
+
+  var _useState5 = useState(Date.now()),
+      _useState6 = _slicedToArray(_useState5, 2),
+      timestamp = _useState6[0],
+      setTimestamp = _useState6[1];
+
+  var menuAnchorRef = useRef(null);
+  return /*#__PURE__*/React.createElement(Badge, _extends({}, props, {
+    anchorOrigin: anchorOrigin,
+    badgeContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      ref: menuAnchorRef,
+      component: "div",
+      className: "u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle",
+      classes: {
+        label: 'u-flex u-w-auto'
+      },
+      style: {
+        outline: '4px solid var(--paperBackgroundColor)'
+      },
+      label: /*#__PURE__*/React.createElement(Icon, {
+        icon: PenIcon
+      }),
+      size: "small",
+      onClick: function onClick() {
+        return setShowMenu(function (v) {
+          return !v;
+        });
+      }
+    }), /*#__PURE__*/React.createElement(EditMenu, {
+      anchorRef: menuAnchorRef.current,
+      status: status,
+      showMenu: showMenu,
+      setShowMenu: setShowMenu,
+      setStatus: setStatus,
+      setTimestamp: setTimestamp,
+      onUpload: onUpload,
+      onDelete: onDelete
+    }))
+  }), /*#__PURE__*/React.createElement(StatusWrapper, {
+    src: src(timestamp),
+    status: status,
+    setStatus: setStatus,
+    timestamp: timestamp
+  }, children));
+};
+
+EditBadge.defaultProps = {
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'right'
+  }
+};
+EditBadge.propTypes = {
+  src: PropTypes.func.isRequired,
+  onUpload: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
+};
+export default EditBadge;

package/transpiled/react/EditBadge/locales/index.d.ts

@@ -0,0 +1,10 @@
+export namespace locales {
+    export { en };
+    export { fr };
+    export { ru };
+    export { vi };
+}
+import en from "./en.json";
+import fr from "./fr.json";
+import ru from "./ru.json";
+import vi from "./vi.json";

package/transpiled/react/EditBadge/locales/index.js

@@ -0,0 +1,78 @@
+var en = {
+  EditBadge: {
+    menu: {
+      update: "Update",
+      "delete": "Delete"
+    },
+    upload: {
+      "file-size": "The file size limit is 5MB.",
+      "file-type": "The file type is not supported. Please try again.",
+      success: "Avatar updated successfully",
+      error: "The avatar upload has failed. Please try again."
+    },
+    "delete": {
+      success: "Avatar deleted successfully",
+      error: "The avatar deletion has failed. Please try again."
+    }
+  }
+};
+var fr = {
+  EditBadge: {
+    menu: {
+      update: "Mettre \xE0 jour",
+      "delete": "Supprimer"
+    },
+    upload: {
+      "file-size": "La taille du fichier est limit\xE9e \xE0 5Mo.",
+      "file-type": "Le type de fichier n'est pas support\xE9. Merci de r\xE9essayer.",
+      success: "Avatar mis \xE0 jour avec succ\xE8s",
+      error: "La mise \xE0 jour de l'avatar a \xE9chou\xE9. Merci de r\xE9essayer."
+    },
+    "delete": {
+      success: "Avatar supprim\xE9 avec succ\xE8s",
+      error: "La suppression de l'avatar a \xE9chou\xE9. Merci de r\xE9essayer."
+    }
+  }
+};
+var ru = {
+  EditBadge: {
+    menu: {
+      update: "\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u044C",
+      "delete": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C"
+    },
+    upload: {
+      "file-size": "\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430 \u2014 5 \u041C\u0411.",
+      "file-type": "\u0422\u0438\u043F \u0444\u0430\u0439\u043B\u0430 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u043F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0441\u043D\u043E\u0432\u0430.",
+      success: "\u0410\u0432\u0430\u0442\u0430\u0440 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0431\u043D\u043E\u0432\u043B\u0451\u043D",
+      error: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0430\u0432\u0430\u0442\u0430\u0440. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u043F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0441\u043D\u043E\u0432\u0430."
+    },
+    "delete": {
+      success: "\u0410\u0432\u0430\u0442\u0430\u0440 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0443\u0434\u0430\u043B\u0451\u043D",
+      error: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0443\u0434\u0430\u043B\u0438\u0442\u044C \u0430\u0432\u0430\u0442\u0430\u0440. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u043F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0441\u043D\u043E\u0432\u0430."
+    }
+  }
+};
+var vi = {
+  EditBadge: {
+    menu: {
+      update: "C\u1EADp nh\u1EADt",
+      "delete": "X\xF3a"
+    },
+    upload: {
+      "file-size": "Gi\u1EDBi h\u1EA1n k\xEDch th\u01B0\u1EDBc t\u1EC7p l\xE0 5MB.",
+      "file-type": "Lo\u1EA1i t\u1EC7p kh\xF4ng \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3. Vui l\xF2ng th\u1EED l\u1EA1i.",
+      success: "C\u1EADp nh\u1EADt \u1EA3nh \u0111\u1EA1i di\u1EC7n th\xE0nh c\xF4ng",
+      error: "T\u1EA3i \u1EA3nh \u0111\u1EA1i di\u1EC7n th\u1EA5t b\u1EA1i. Vui l\xF2ng th\u1EED l\u1EA1i."
+    },
+    "delete": {
+      success: "X\xF3a \u1EA3nh \u0111\u1EA1i di\u1EC7n th\xE0nh c\xF4ng",
+      error: "X\xF3a \u1EA3nh \u0111\u1EA1i di\u1EC7n th\u1EA5t b\u1EA1i. Vui l\xF2ng th\u1EED l\u1EA1i."
+    }
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr,
+  ru: ru,
+  vi: vi
+};

package/transpiled/react/utils/react.d.ts

@@ -2,3 +2,4 @@ export function getComponentName(node: any): any;
 export function getChildren(props: any): any[] | null;
 export function getChildrenCount(props: any): number | null;
 export function getLastChild(props: any): any;
+export function AddPropsToChildren(children: React.ReactElement, propsCallback: Function): (import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null)[];

package/transpiled/react/utils/react.js

@@ -1,4 +1,10 @@
-import { Fragment, Children } from 'react';
+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; }
+
+import { Fragment, Children, isValidElement, cloneElement } from 'react';
 /**
  * Get the name of the node
  * @param {React.ElementType || string} node
@@ -26,4 +32,16 @@ export var getLastChild = function getLastChild(props) {
   if (!children) return null;
   var lastChild = children[children.length - 1];
   return lastChild.type === Fragment ? getChildren(lastChild.props)[0] : lastChild;
+};
+/**
+ * Clone a React child and add props on it
+ * @param {React.ReactElement} children
+ * @param {Function} propsCallback - get child props as arg, return new props as object
+ * @returns
+ */
+
+export var AddPropsToChildren = function AddPropsToChildren(children, propsCallback) {
+  return Children.map(children, function (child) {
+    return /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, _objectSpread({}, propsCallback(child.props))) : null;
+  });
 };