cozy-ui 81.8.0 → 81.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [81.9.0](https://github.com/cozy/cozy-ui/compare/v81.8.0...v81.9.0) (2023-03-23)
+
+
+### Bug Fixes
+
+* **ListItemBase:** Clicking on actions wasn't toggling the menu ([3fbfa31](https://github.com/cozy/cozy-ui/commit/3fbfa31))
+
+
+### Features
+
+* Add ActionMenuItemWrapper for actions menus item ([068f247](https://github.com/cozy/cozy-ui/commit/068f247))
+* **ListItemContact:** Add action menu header ([633ecf8](https://github.com/cozy/cozy-ui/commit/633ecf8))
+* **ListItemContact:** Add default actions ([9164e87](https://github.com/cozy/cozy-ui/commit/9164e87))
+
 # [81.8.0](https://github.com/cozy/cozy-ui/compare/v81.7.0...v81.8.0) (2023-03-22)
 
 

package/package.json

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

package/react/MuiCozyTheme/List/Readme.md

@@ -296,17 +296,26 @@ const mockClient = {
       unsubscribe: () => {},
       unsubscribeAll: () => {}
     }
-  }
+  },
+  getStackClient: () => ({
+    uri: 'https://cozy.io/'
+  }),
+  getInstanceOptions: () => ({
+    subdomain: ''
+  })
 }
 
 const contacts = [
   {
+    _id: 'id01',
     _type: 'io.cozy.contacts',
     displayName: 'John Doe',
     birthday: '25/10/2022',
-    email: [{ address: 'johndoe@cozy.cc', primary: true }]
+    email: [{ address: 'johndoe@cozy.cc', primary: true }],
+    phone: [{ number: '0102030405', primary: true }]
   },
   {
+    _id: 'id02',
     _type: 'io.cozy.contacts',
     displayName: 'Jason Bourne',
     birthday: '01/01/2020',

package/react/MuiCozyTheme/ListItem/ExpandedAttributes/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import Snackbar from '../../../Snackbar'
 import Alert from '../../../Alert'
-import { withListItemLocales } from '../hoc/withListItemLocales'
+import withListItemLocales from '../hoc/withListItemLocales'
 import ExpandedAttribute from './ExpandedAttribute'
 import { useI18n } from '../../../I18n'
 import { makeAttrsKeyAndFormatedValue } from './helpers'

package/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/ActionMenuItemWrapper.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+
+import { makeStyles } from '../../../../styles'
+import Typography from '../../../../Typography'
+import Icon, { iconPropType } from '../../../../Icon'
+import { ActionMenuItem } from '../../../../ActionMenu'
+
+const useStyles = makeStyles(theme => ({
+  disabledItem: {
+    cursor: 'default',
+    '&:hover': {
+      backgroundColor: 'initial'
+    }
+  },
+  disabledIcon: {
+    fill: theme.palette.text.disabled
+  },
+  disabledTypography: {
+    color: theme.palette.text.disabled
+  }
+}))
+
+const ActionMenuItemWrapper = ({
+  icon,
+  className,
+  isEnabled,
+  componentsProps,
+  children,
+  onClick
+}) => {
+  const styles = useStyles()
+
+  return (
+    <ActionMenuItem
+      className={cx(`u-flex-items-center ${className}`, {
+        [styles.disabledItem]: !isEnabled
+      })}
+      left={
+        <Icon
+          icon={icon}
+          className={cx({
+            [styles.disabledIcon]: !isEnabled
+          })}
+          {...componentsProps?.iconProps}
+        />
+      }
+      onClick={onClick}
+    >
+      <Typography
+        className={cx({
+          [styles.disabledTypography]: !isEnabled
+        })}
+        {...componentsProps?.typographyProps}
+      >
+        {children}
+      </Typography>
+    </ActionMenuItem>
+  )
+}
+
+ActionMenuItemWrapper.defaultProps = {
+  className: '',
+  isEnabled: true,
+  componentsProps: {}
+}
+
+ActionMenuItemWrapper.propTypes = {
+  icon: iconPropType,
+  className: PropTypes.string,
+  isEnabled: PropTypes.bool,
+  componentsProps: PropTypes.shape({
+    iconProps: PropTypes.object,
+    typographyProps: PropTypes.object
+  }),
+  children: PropTypes.node,
+  onClick: PropTypes.func
+}
+
+export default ActionMenuItemWrapper

package/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/call.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { useI18n } from '../../../../../I18n'
+import TelephoneIcon from '../../../../../Icons/Telephone'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const call = () => {
+  return {
+    name: 'call',
+    action: docs => {
+      const phoneNumber = docs?.[0]?.phone?.[0]?.number
+      !!phoneNumber && window.open(`tel:${phoneNumber}`, '_self')
+    },
+    Component: withListItemLocales(({ className, onClick }) => {
+      const { t } = useI18n()
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={TelephoneIcon}
+          onClick={onClick}
+        >
+          {t('ListItem.actions.call')}
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

package/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/emailTo.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { useI18n } from '../../../../../I18n'
+import EmailIcon from '../../../../../Icons/Email'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const emailTo = () => {
+  return {
+    name: 'emailTo',
+    action: docs => {
+      const emailAddress = docs?.[0]?.email?.[0]?.address
+      !!emailAddress && window.open(`mailto:${emailAddress}`, '_self')
+    },
+    Component: withListItemLocales(({ className, onClick }) => {
+      const { t } = useI18n()
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={EmailIcon}
+          onClick={onClick}
+        >
+          {t('ListItem.actions.emailTo')}
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

package/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/hr.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const hr = () => {
+  return {
+    name: 'hr',
+    Component: function hr() {
+      return <hr />
+    }
+  }
+}

package/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/modify.js

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { generateWebLink, useClient } from 'cozy-client'
+
+import Link from '../../../../../Link'
+import { useI18n } from '../../../../../I18n'
+import PenIcon from '../../../../../Icons/Pen'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const modify = () => {
+  return {
+    name: 'modify',
+    Component: withListItemLocales(({ className, docs, onClick }) => {
+      const { t } = useI18n()
+      const client = useClient()
+
+      const contactId = docs[0]._id
+
+      const webLink = generateWebLink({
+        slug: 'contacts',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: `/${contactId}/edit`
+      })
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={PenIcon}
+          onClick={onClick}
+        >
+          <Link className="u-p-0" href={webLink} target="_blank">
+            {t('ListItem.actions.modify')}
+          </Link>
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

package/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/smsTo.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { useI18n } from '../../../../../I18n'
+import CommentIcon from '../../../../../Icons/Comment'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const smsTo = () => {
+  return {
+    name: 'smsTo',
+    action: docs => {
+      const phoneNumber = docs?.[0]?.phone?.[0]?.number
+      !!phoneNumber && window.open(`sms:${phoneNumber}`, '_self')
+    },
+    Component: withListItemLocales(({ className, onClick }) => {
+      const { t } = useI18n()
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={CommentIcon}
+          onClick={onClick}
+        >
+          {t('ListItem.actions.smsTo')}
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

package/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/viewInContacts.js

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { generateWebLink, useClient } from 'cozy-client'
+
+import Link from '../../../../../Link'
+import { useI18n } from '../../../../../I18n'
+import OpenappIcon from '../../../../../Icons/Openapp'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const viewInContacts = () => {
+  return {
+    name: 'viewInContacts',
+    Component: withListItemLocales(({ className, docs, onClick }) => {
+      const { t } = useI18n()
+      const client = useClient()
+
+      const contactId = docs[0]._id
+
+      const webLink = generateWebLink({
+        slug: 'contacts',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: `/${contactId}`
+      })
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={OpenappIcon}
+          onClick={onClick}
+        >
+          <Link className="u-p-0" href={webLink} target="_blank">
+            {t('ListItem.actions.viewInContacts')}
+          </Link>
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

package/react/MuiCozyTheme/ListItem/ListItemBase/Renaming/RenameDialog.jsx

@@ -5,7 +5,7 @@ import Button from '../../../../Buttons'
 import { ConfirmDialog } from '../../../../CozyDialogs'
 import { useI18n } from '../../../../I18n'
 
-import { withListItemLocales } from '../../hoc/withListItemLocales'
+import withListItemLocales from '../../hoc/withListItemLocales'
 
 const RenameDialog = ({ onSubmit, onCancel }) => {
   const { t } = useI18n()

package/react/MuiCozyTheme/ListItem/ListItemBase/index.jsx

@@ -14,7 +14,7 @@ import { ActionMenuHeader } from '../../../ActionMenu'
 import ActionsItems from './ActionsMenu/ActionsItems'
 import useBreakpoints from '../../../hooks/useBreakpoints'
 import RenameInput from './Renaming/RenameInput'
-import { withListItemLocales } from '../hoc/withListItemLocales'
+import withListItemLocales from '../hoc/withListItemLocales'
 import Checkbox from '../../../Checkbox'
 
 const ListItemBase = ({
@@ -33,6 +33,8 @@ const ListItemBase = ({
   const anchorRef = useRef()
   const { isMobile } = useBreakpoints()
 
+  const toggleMenu = () => setShowActionMenu(v => !v)
+
   const showActionMenuHeader = isMobile && actionMenuComp?.Header
   const isButton = !isRenaming && !!onClick
   const handleClick =
@@ -57,7 +59,7 @@ const ListItemBase = ({
         )}
         {actions && !isSelectActive && (
           <ListItemSecondaryAction>
-            <IconButton ref={anchorRef} onClick={() => setShowActionMenu(true)}>
+            <IconButton ref={anchorRef} onClick={toggleMenu}>
               <Icon icon={DotsIcon} />
             </IconButton>
           </ListItemSecondaryAction>

package/react/MuiCozyTheme/ListItem/ListItemContact/index.jsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Filename from '../../../Filename'
 import Icon from '../../../Icon'
 import ContactsIcon from '../../../Icons/Contacts'
 import ListItemBase from '../ListItemBase'
 
 import { makeDefaultExpandedAttributes } from '../ExpandedAttributes/helpers'
+import useActions from './useActions'
 
 const ListItemContact = ({
   contact,
@@ -17,6 +19,7 @@ const ListItemContact = ({
   expandedAttributesProps: { isExpandedAttributesActive, expandedAttributes },
   onClick
 }) => {
+  const defaultActions = useActions(contact)
   const primaryText = primary || contact.displayName
   const secondaryText = secondary || contact.email?.[0]?.address
   const itemIcon = icon || <Icon icon={ContactsIcon} width="32" height="32" />
@@ -25,6 +28,7 @@ const ListItemContact = ({
     contact,
     expandedAttributes
   )
+  const itemActions = defaultActions.concat(actions)
 
   return (
     <ListItemBase
@@ -32,7 +36,10 @@ const ListItemContact = ({
       primary={primaryText}
       secondary={secondaryText}
       icon={itemIcon}
-      actions={actions}
+      actions={itemActions}
+      actionMenuComp={{
+        Header: <Filename icon={ContactsIcon} filename={primaryText} />
+      }}
       selectProps={selectProps}
       expandedAttributesProps={{
         isExpandedAttributesActive,
@@ -44,6 +51,7 @@ const ListItemContact = ({
 }
 
 ListItemContact.defaultProps = {
+  actions: [],
   expandedAttributesProps: {
     isExpandedAttributesActive: false
   }

package/react/MuiCozyTheme/ListItem/ListItemContact/useActions.jsx

@@ -0,0 +1,39 @@
+import { useMemo } from 'react'
+
+import { makeActions } from '../ListItemBase/ActionsMenu/helpers'
+import { hr } from '../ListItemBase/ActionsMenu/Actions/hr'
+import { emailTo } from '../ListItemBase/ActionsMenu/Actions/emailTo'
+import { smsTo } from '../ListItemBase/ActionsMenu/Actions/smsTo'
+import { call } from '../ListItemBase/ActionsMenu/Actions/call'
+import { modify } from '../ListItemBase/ActionsMenu/Actions/modify'
+import { viewInContacts } from '../ListItemBase/ActionsMenu/Actions/viewInContacts'
+
+const makeOptionalActions = contact => {
+  const optionalActions = [hr, call, smsTo, emailTo]
+
+  const hasPhoneAction = contact.phone?.length > 0
+  const hasEmailAction = contact.email?.length > 0
+  const hasMessageActions = hasPhoneAction || hasEmailAction
+
+  const conditions = {
+    hr: hasMessageActions,
+    call: hasPhoneAction,
+    smsTo: hasPhoneAction,
+    emailTo: hasEmailAction
+  }
+
+  return optionalActions.filter(action => conditions[action.name])
+}
+
+const useActions = contact => {
+  const optionalActions = useMemo(() => makeOptionalActions(contact), [contact])
+  const finalActions = useMemo(
+    () => [modify, viewInContacts].concat(optionalActions),
+    [optionalActions]
+  )
+  const actions = useMemo(() => makeActions(finalActions), [finalActions])
+
+  return actions
+}
+
+export default useActions

package/react/MuiCozyTheme/ListItem/ListItemFile/ExpirationAnnotation.jsx

@@ -6,7 +6,7 @@ import { computeExpirationDate, isExpired } from 'cozy-client/dist/models/paper'
 import Typography from '../../../Typography'
 import { useI18n } from '../../../I18n'
 import { formatLocallyDistanceToNowStrict } from '../../../I18n/format'
-import { withListItemLocales } from '../hoc/withListItemLocales'
+import withListItemLocales from '../hoc/withListItemLocales'
 
 const ExpirationAnnotation = ({ file }) => {
   const { t } = useI18n()

package/react/MuiCozyTheme/ListItem/ListItemFile/PrimaryText.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 
 import { useI18n } from '../../../I18n'
-import { withListItemLocales } from '../hoc/withListItemLocales'
+import withListItemLocales from '../hoc/withListItemLocales'
 
 const PrimaryText = ({ primary, file }) => {
   const { t } = useI18n()

package/react/MuiCozyTheme/ListItem/hoc/withListItemLocales.jsx

@@ -8,4 +8,4 @@ export const locales = {
   fr
 }
 
-export const withListItemLocales = withLocales(locales)
+export default withLocales(locales)

package/react/MuiCozyTheme/ListItem/locales/en.json

@@ -1,5 +1,12 @@
 {
   "ListItem": {
+    "actions": {
+      "viewInContacts": "View in Cozy Contacts",
+      "modify": "Modify",
+      "emailTo": "Send an email",
+      "smsTo": "Send a message",
+      "call": "Call"
+    },
     "attributes": {
       "birthday": "Birthday",
       "address": "Address",
@@ -31,13 +38,6 @@
         }
       }
     },
-    "contact": {
-      "birthday": "Birthday",
-      "actions": {
-        "copy": "Copy",
-        "delete": "Delete"
-      }
-    },
     "file": {
       "expired": "Expired",
       "expiresIn": "Expires in %{duration}",

package/react/MuiCozyTheme/ListItem/locales/fr.json

@@ -1,5 +1,12 @@
 {
   "ListItem": {
+    "actions": {
+      "viewInContacts": "Voir dans Cozy Contacts",
+      "modify": "Modifier",
+      "emailTo": "Envoyer un e-mail",
+      "smsTo": "Envoyer un message",
+      "call": "Appeler"
+    },
     "attributes": {
       "birthday": "Date de naissance",
       "address": "Adresse",
@@ -31,12 +38,6 @@
         }
       }
     },
-    "contact": {
-      "actions": {
-        "copy": "Copier",
-        "delete": "Supprimer"
-      }
-    },
     "file": {
       "expired": "Expiré",
       "expiresIn": "Expire dans %{duration}",

package/release.config.js

@@ -1,16 +1,23 @@
 module.exports = {
-  "branch": "master",
-  "plugins": [
-    "@semantic-release/commit-analyzer",
-    "@semantic-release/release-notes-generator",
-    ["@semantic-release/changelog", {
-      "changelogFile": "CHANGELOG.md"
-    }],
-    ["@semantic-release/git", {
-      "assets": ["CHANGELOG.md"],
-      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
-    }],
-    "@semantic-release/npm",
-    "@semantic-release/github"
+  branch: 'master',
+  plugins: [
+    '@semantic-release/commit-analyzer',
+    '@semantic-release/release-notes-generator',
+    [
+      '@semantic-release/changelog',
+      {
+        changelogFile: 'CHANGELOG.md'
+      }
+    ],
+    [
+      '@semantic-release/git',
+      {
+        assets: ['CHANGELOG.md', 'package.json'],
+        message:
+          'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}'
+      }
+    ],
+    '@semantic-release/npm',
+    '@semantic-release/github'
   ]
 }

package/transpiled/react/MuiCozyTheme/ListItem/ExpandedAttributes/index.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Snackbar from "cozy-ui/transpiled/react/Snackbar";
 import Alert from "cozy-ui/transpiled/react/Alert";
-import { withListItemLocales } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
 import ExpandedAttribute from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ExpandedAttributes/ExpandedAttribute";
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
 import { makeAttrsKeyAndFormatedValue } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers";

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/ActionMenuItemWrapper.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import Icon, { iconPropType } from "cozy-ui/transpiled/react/Icon";
+import { ActionMenuItem } from "cozy-ui/transpiled/react/ActionMenu";
+var useStyles = makeStyles(function (theme) {
+  return {
+    disabledItem: {
+      cursor: 'default',
+      '&:hover': {
+        backgroundColor: 'initial'
+      }
+    },
+    disabledIcon: {
+      fill: theme.palette.text.disabled
+    },
+    disabledTypography: {
+      color: theme.palette.text.disabled
+    }
+  };
+});
+
+var ActionMenuItemWrapper = function ActionMenuItemWrapper(_ref) {
+  var icon = _ref.icon,
+      className = _ref.className,
+      isEnabled = _ref.isEnabled,
+      componentsProps = _ref.componentsProps,
+      children = _ref.children,
+      onClick = _ref.onClick;
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(ActionMenuItem, {
+    className: cx("u-flex-items-center ".concat(className), _defineProperty({}, styles.disabledItem, !isEnabled)),
+    left: /*#__PURE__*/React.createElement(Icon, _extends({
+      icon: icon,
+      className: cx(_defineProperty({}, styles.disabledIcon, !isEnabled))
+    }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.iconProps)),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Typography, _extends({
+    className: cx(_defineProperty({}, styles.disabledTypography, !isEnabled))
+  }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.typographyProps), children));
+};
+
+ActionMenuItemWrapper.defaultProps = {
+  className: '',
+  isEnabled: true,
+  componentsProps: {}
+};
+ActionMenuItemWrapper.propTypes = {
+  icon: iconPropType,
+  className: PropTypes.string,
+  isEnabled: PropTypes.bool,
+  componentsProps: PropTypes.shape({
+    iconProps: PropTypes.object,
+    typographyProps: PropTypes.object
+  }),
+  children: PropTypes.node,
+  onClick: PropTypes.func
+};
+export default ActionMenuItemWrapper;

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/call.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import TelephoneIcon from "cozy-ui/transpiled/react/Icons/Telephone";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import ActionMenuItemWrapper from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/ActionMenuItemWrapper";
+export var call = function call() {
+  return {
+    name: 'call',
+    action: function action(docs) {
+      var _docs$, _docs$$phone, _docs$$phone$;
+
+      var phoneNumber = docs === null || docs === void 0 ? void 0 : (_docs$ = docs[0]) === null || _docs$ === void 0 ? void 0 : (_docs$$phone = _docs$.phone) === null || _docs$$phone === void 0 ? void 0 : (_docs$$phone$ = _docs$$phone[0]) === null || _docs$$phone$ === void 0 ? void 0 : _docs$$phone$.number;
+      !!phoneNumber && window.open("tel:".concat(phoneNumber), '_self');
+    },
+    Component: withListItemLocales(function (_ref) {
+      var className = _ref.className,
+          onClick = _ref.onClick;
+
+      var _useI18n = useI18n(),
+          t = _useI18n.t;
+
+      return /*#__PURE__*/React.createElement(ActionMenuItemWrapper, {
+        className: className,
+        icon: TelephoneIcon,
+        onClick: onClick
+      }, t('ListItem.actions.call'));
+    })
+  };
+};

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/emailTo.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import EmailIcon from "cozy-ui/transpiled/react/Icons/Email";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import ActionMenuItemWrapper from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/ActionMenuItemWrapper";
+export var emailTo = function emailTo() {
+  return {
+    name: 'emailTo',
+    action: function action(docs) {
+      var _docs$, _docs$$email, _docs$$email$;
+
+      var emailAddress = docs === null || docs === void 0 ? void 0 : (_docs$ = docs[0]) === null || _docs$ === void 0 ? void 0 : (_docs$$email = _docs$.email) === null || _docs$$email === void 0 ? void 0 : (_docs$$email$ = _docs$$email[0]) === null || _docs$$email$ === void 0 ? void 0 : _docs$$email$.address;
+      !!emailAddress && window.open("mailto:".concat(emailAddress), '_self');
+    },
+    Component: withListItemLocales(function (_ref) {
+      var className = _ref.className,
+          onClick = _ref.onClick;
+
+      var _useI18n = useI18n(),
+          t = _useI18n.t;
+
+      return /*#__PURE__*/React.createElement(ActionMenuItemWrapper, {
+        className: className,
+        icon: EmailIcon,
+        onClick: onClick
+      }, t('ListItem.actions.emailTo'));
+    })
+  };
+};

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/hr.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export var hr = function hr() {
+  return {
+    name: 'hr',
+    Component: function hr() {
+      return /*#__PURE__*/React.createElement("hr", null);
+    }
+  };
+};

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/modify.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { generateWebLink, useClient } from 'cozy-client';
+import Link from "cozy-ui/transpiled/react/Link";
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import PenIcon from "cozy-ui/transpiled/react/Icons/Pen";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import ActionMenuItemWrapper from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/ActionMenuItemWrapper";
+export var modify = function modify() {
+  return {
+    name: 'modify',
+    Component: withListItemLocales(function (_ref) {
+      var className = _ref.className,
+          docs = _ref.docs,
+          onClick = _ref.onClick;
+
+      var _useI18n = useI18n(),
+          t = _useI18n.t;
+
+      var client = useClient();
+      var contactId = docs[0]._id;
+      var webLink = generateWebLink({
+        slug: 'contacts',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: "/".concat(contactId, "/edit")
+      });
+      return /*#__PURE__*/React.createElement(ActionMenuItemWrapper, {
+        className: className,
+        icon: PenIcon,
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement(Link, {
+        className: "u-p-0",
+        href: webLink,
+        target: "_blank"
+      }, t('ListItem.actions.modify')));
+    })
+  };
+};

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/smsTo.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import CommentIcon from "cozy-ui/transpiled/react/Icons/Comment";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import ActionMenuItemWrapper from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/ActionMenuItemWrapper";
+export var smsTo = function smsTo() {
+  return {
+    name: 'smsTo',
+    action: function action(docs) {
+      var _docs$, _docs$$phone, _docs$$phone$;
+
+      var phoneNumber = docs === null || docs === void 0 ? void 0 : (_docs$ = docs[0]) === null || _docs$ === void 0 ? void 0 : (_docs$$phone = _docs$.phone) === null || _docs$$phone === void 0 ? void 0 : (_docs$$phone$ = _docs$$phone[0]) === null || _docs$$phone$ === void 0 ? void 0 : _docs$$phone$.number;
+      !!phoneNumber && window.open("sms:".concat(phoneNumber), '_self');
+    },
+    Component: withListItemLocales(function (_ref) {
+      var className = _ref.className,
+          onClick = _ref.onClick;
+
+      var _useI18n = useI18n(),
+          t = _useI18n.t;
+
+      return /*#__PURE__*/React.createElement(ActionMenuItemWrapper, {
+        className: className,
+        icon: CommentIcon,
+        onClick: onClick
+      }, t('ListItem.actions.smsTo'));
+    })
+  };
+};

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/viewInContacts.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { generateWebLink, useClient } from 'cozy-client';
+import Link from "cozy-ui/transpiled/react/Link";
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import OpenappIcon from "cozy-ui/transpiled/react/Icons/Openapp";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import ActionMenuItemWrapper from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/ActionMenuItemWrapper";
+export var viewInContacts = function viewInContacts() {
+  return {
+    name: 'viewInContacts',
+    Component: withListItemLocales(function (_ref) {
+      var className = _ref.className,
+          docs = _ref.docs,
+          onClick = _ref.onClick;
+
+      var _useI18n = useI18n(),
+          t = _useI18n.t;
+
+      var client = useClient();
+      var contactId = docs[0]._id;
+      var webLink = generateWebLink({
+        slug: 'contacts',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: "/".concat(contactId)
+      });
+      return /*#__PURE__*/React.createElement(ActionMenuItemWrapper, {
+        className: className,
+        icon: OpenappIcon,
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement(Link, {
+        className: "u-p-0",
+        href: webLink,
+        target: "_blank"
+      }, t('ListItem.actions.viewInContacts')));
+    })
+  };
+};

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/Renaming/RenameDialog.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Button from "cozy-ui/transpiled/react/Buttons";
 import { ConfirmDialog } from "cozy-ui/transpiled/react/CozyDialogs";
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
-import { withListItemLocales } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
 
 var RenameDialog = function RenameDialog(_ref) {
   var onSubmit = _ref.onSubmit,

package/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/index.js

@@ -14,7 +14,7 @@ import { ActionMenuHeader } from "cozy-ui/transpiled/react/ActionMenu";
 import ActionsItems from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/ActionsItems";
 import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
 import RenameInput from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/Renaming/RenameInput";
-import { withListItemLocales } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
 import Checkbox from "cozy-ui/transpiled/react/Checkbox";
 
 var ListItemBase = function ListItemBase(_ref) {
@@ -48,6 +48,12 @@ var ListItemBase = function ListItemBase(_ref) {
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
 
+  var toggleMenu = function toggleMenu() {
+    return setShowActionMenu(function (v) {
+      return !v;
+    });
+  };
+
   var showActionMenuHeader = isMobile && (actionMenuComp === null || actionMenuComp === void 0 ? void 0 : actionMenuComp.Header);
   var isButton = !isRenaming && !!onClick;
   var handleClick = !isRenaming && !isSelected && onClick ? onClick : undefined;
@@ -70,9 +76,7 @@ var ListItemBase = function ListItemBase(_ref) {
     secondary: secondary
   }), actions && !isSelectActive && /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
     ref: anchorRef,
-    onClick: function onClick() {
-      return setShowActionMenu(true);
-    }
+    onClick: toggleMenu
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: DotsIcon
   })))), isExpandedAttributesActive && /*#__PURE__*/React.createElement(ExpandedAttributes, {

package/transpiled/react/MuiCozyTheme/ListItem/ListItemContact/index.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Filename from "cozy-ui/transpiled/react/Filename";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import ContactsIcon from "cozy-ui/transpiled/react/Icons/Contacts";
 import ListItemBase from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase";
 import { makeDefaultExpandedAttributes } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers";
+import useActions from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemContact/useActions";
 
 var ListItemContact = function ListItemContact(_ref) {
   var _contact$email, _contact$email$;
@@ -18,6 +20,7 @@ var ListItemContact = function ListItemContact(_ref) {
       isExpandedAttributesActive = _ref$expandedAttribut.isExpandedAttributesActive,
       expandedAttributes = _ref$expandedAttribut.expandedAttributes,
       onClick = _ref.onClick;
+  var defaultActions = useActions(contact);
   var primaryText = primary || contact.displayName;
   var secondaryText = secondary || ((_contact$email = contact.email) === null || _contact$email === void 0 ? void 0 : (_contact$email$ = _contact$email[0]) === null || _contact$email$ === void 0 ? void 0 : _contact$email$.address);
   var itemIcon = icon || /*#__PURE__*/React.createElement(Icon, {
@@ -26,12 +29,19 @@ var ListItemContact = function ListItemContact(_ref) {
     height: "32"
   });
   var itemExpandedAttributes = makeDefaultExpandedAttributes(contact, expandedAttributes);
+  var itemActions = defaultActions.concat(actions);
   return /*#__PURE__*/React.createElement(ListItemBase, {
     doc: contact,
     primary: primaryText,
     secondary: secondaryText,
     icon: itemIcon,
-    actions: actions,
+    actions: itemActions,
+    actionMenuComp: {
+      Header: /*#__PURE__*/React.createElement(Filename, {
+        icon: ContactsIcon,
+        filename: primaryText
+      })
+    },
     selectProps: selectProps,
     expandedAttributesProps: {
       isExpandedAttributesActive: isExpandedAttributesActive,
@@ -42,6 +52,7 @@ var ListItemContact = function ListItemContact(_ref) {
 };
 
 ListItemContact.defaultProps = {
+  actions: [],
   expandedAttributesProps: {
     isExpandedAttributesActive: false
   }

package/transpiled/react/MuiCozyTheme/ListItem/ListItemContact/useActions.js

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { makeActions } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/helpers";
+import { hr } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/hr";
+import { emailTo } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/emailTo";
+import { smsTo } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/smsTo";
+import { call } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/call";
+import { modify } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/modify";
+import { viewInContacts } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/viewInContacts";
+
+var makeOptionalActions = function makeOptionalActions(contact) {
+  var _contact$phone, _contact$email;
+
+  var optionalActions = [hr, call, smsTo, emailTo];
+  var hasPhoneAction = ((_contact$phone = contact.phone) === null || _contact$phone === void 0 ? void 0 : _contact$phone.length) > 0;
+  var hasEmailAction = ((_contact$email = contact.email) === null || _contact$email === void 0 ? void 0 : _contact$email.length) > 0;
+  var hasMessageActions = hasPhoneAction || hasEmailAction;
+  var conditions = {
+    hr: hasMessageActions,
+    call: hasPhoneAction,
+    smsTo: hasPhoneAction,
+    emailTo: hasEmailAction
+  };
+  return optionalActions.filter(function (action) {
+    return conditions[action.name];
+  });
+};
+
+var useActions = function useActions(contact) {
+  var optionalActions = useMemo(function () {
+    return makeOptionalActions(contact);
+  }, [contact]);
+  var finalActions = useMemo(function () {
+    return [modify, viewInContacts].concat(optionalActions);
+  }, [optionalActions]);
+  var actions = useMemo(function () {
+    return makeActions(finalActions);
+  }, [finalActions]);
+  return actions;
+};
+
+export default useActions;

package/transpiled/react/MuiCozyTheme/ListItem/ListItemFile/ExpirationAnnotation.js

@@ -4,7 +4,7 @@ import { computeExpirationDate, isExpired } from 'cozy-client/dist/models/paper'
 import Typography from "cozy-ui/transpiled/react/Typography";
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
 import { formatLocallyDistanceToNowStrict } from "cozy-ui/transpiled/react/I18n/format";
-import { withListItemLocales } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
 
 var ExpirationAnnotation = function ExpirationAnnotation(_ref) {
   var file = _ref.file;

package/transpiled/react/MuiCozyTheme/ListItem/ListItemFile/PrimaryText.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
-import { withListItemLocales } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
+import withListItemLocales from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales";
 
 var PrimaryText = function PrimaryText(_ref) {
   var _file$metadata, _file$metadata$qualif;

package/transpiled/react/MuiCozyTheme/ListItem/hoc/withListItemLocales.js

@@ -1,6 +1,13 @@
 import withLocales from "cozy-ui/transpiled/react/I18n/withLocales";
 var en = {
   ListItem: {
+    actions: {
+      viewInContacts: "View in Cozy Contacts",
+      modify: "Modify",
+      emailTo: "Send an email",
+      smsTo: "Send a message",
+      call: "Call"
+    },
     attributes: {
       birthday: "Birthday",
       address: "Address",
@@ -32,13 +39,6 @@ var en = {
         }
       }
     },
-    contact: {
-      birthday: "Birthday",
-      actions: {
-        copy: "Copy",
-        "delete": "Delete"
-      }
-    },
     file: {
       expired: "Expired",
       expiresIn: "Expires in %{duration}",
@@ -63,6 +63,13 @@ var en = {
 };
 var fr = {
   ListItem: {
+    actions: {
+      viewInContacts: "Voir dans Cozy Contacts",
+      modify: "Modifier",
+      emailTo: "Envoyer un e-mail",
+      smsTo: "Envoyer un message",
+      call: "Appeler"
+    },
     attributes: {
       birthday: "Date de naissance",
       address: "Adresse",
@@ -94,12 +101,6 @@ var fr = {
         }
       }
     },
-    contact: {
-      actions: {
-        copy: "Copier",
-        "delete": "Supprimer"
-      }
-    },
     file: {
       expired: "Expir\xE9",
       expiresIn: "Expire dans %{duration}",
@@ -126,4 +127,4 @@ export var locales = {
   en: en,
   fr: fr
 };
-export var withListItemLocales = withLocales(locales);
+export default withLocales(locales);