cozy-ui 83.4.0 → 84.0.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [84.0.0](https://github.com/cozy/cozy-ui/compare/v83.4.0...v84.0.0) (2023-04-26)
+
+
+### Features
+
+* Add doc and adjust overrides for Menu from Mui. ([40b5f0d](https://github.com/cozy/cozy-ui/commit/40b5f0d))
+* Add new component ActionsMenu ([d1a57b1](https://github.com/cozy/cozy-ui/commit/d1a57b1))
+* Deprecates ActionMenu, use ActionsMenu instead ([c71f6d8](https://github.com/cozy/cozy-ui/commit/c71f6d8))
+* Remove old deprecated Menu ([36a4f6e](https://github.com/cozy/cozy-ui/commit/36a4f6e))
+* **Viewer:** Limit the average height of the BottomSheet ([ebd964f](https://github.com/cozy/cozy-ui/commit/ebd964f))
+
+
+### BREAKING CHANGES
+
+* You must replace `react/Menu` component by `react/ActionsMenu` or `react/MuiCozyTheme/Menu`. Since`react/Menu` has been depreciated for 3 years now, this should not be a problem.
+
 # [83.4.0](https://github.com/cozy/cozy-ui/compare/v83.3.0...v83.4.0) (2023-04-25)
 
 

package/package.json

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

package/react/ActionMenu/ActionMenuWithClose.jsx

@@ -9,6 +9,7 @@ import ActionMenu from '.'
 
 /**
  * Add onClose method on every children, to close the menu when clicking them
+ * @deprecated This component is depreacated, please use [ActionsMenu](#/ActionsMenu) instead.
  */
 const ActionMenuWithClose = forwardRef(
   ({ onClose, children, ...props }, ref) => {

package/react/ActionMenu/ActionMenuWrapper.jsx

@@ -6,6 +6,9 @@ import BottomSheet from '../BottomSheet'
 
 import NotInlineWrapper from './NotInlineWrapper'
 
+/**
+ * @deprecated This component is depreacated, please use [ActionsMenu](#/ActionsMenu) instead.
+ */
 const ActionMenuWrapper = ({
   onClose,
   anchorElRef,

package/react/ActionMenu/index.jsx

@@ -16,10 +16,14 @@ import ActionsItems from './Actions/ActionsItems'
 
 import styles from './styles.styl'
 
+const logDepecratedMenu = createDepreciationLogger()
 const logDepecratedPlacement = createDepreciationLogger()
 const logDepecratedOverflow = createDepreciationLogger()
 const logDepecratedContainer = createDepreciationLogger()
 
+/**
+ * @deprecated This component is depreacated, please use [ActionsMenu](#/ActionsMenu) instead.
+ */
 const ActionMenu = ({
   className,
   anchorElRef,
@@ -43,6 +47,9 @@ const ActionMenu = ({
     logDepecratedContainer(
       '<ActionMenu containerElRef /> is not needed anymore, it can be removed.'
     )
+  logDepecratedMenu(
+    'The ActionMenu component has been deprecated and should be replaced by ActionsMenu. More infos: https://docs.cozy.io/cozy-ui/react/#!/ActionsMenu'
+  )
 
   const { isMobile } = useBreakpoints()
   const containerRef = React.createRef()

package/react/ActionsMenu/Actions/call.js

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+
+import TelephoneIcon from '../../Icons/Telephone'
+import withActionsLocales from './locales/withActionsLocales'
+import ActionsMenuItem from '../ActionsMenuItem'
+import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
+import Icon from '../../Icon'
+import ListItemText from '../../ListItemText'
+
+export const call = () => {
+  return {
+    name: 'call',
+    action: doc => {
+      const phoneNumber = doc?.phone?.[0]?.number
+      !!phoneNumber && window.open(`tel:${phoneNumber}`, '_self')
+    },
+    Component: withActionsLocales(
+      forwardRef(({ t, ...props }, ref) => {
+        return (
+          <ActionsMenuItem {...props} ref={ref}>
+            <ListItemIcon>
+              <Icon icon={TelephoneIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('call')} />
+          </ActionsMenuItem>
+        )
+      })
+    )
+  }
+}

package/react/ActionsMenu/Actions/divider.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import Divider from '../../MuiCozyTheme/Divider'
+
+export const divider = () => {
+  return {
+    name: 'divider',
+    Component: function divider() {
+      return <Divider className="u-mv-half" />
+    }
+  }
+}

package/react/ActionsMenu/Actions/emailTo.js

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+
+import EmailIcon from '../../Icons/Email'
+import withActionsLocales from './locales/withActionsLocales'
+import ActionsMenuItem from '../ActionsMenuItem'
+import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
+import Icon from '../../Icon'
+import ListItemText from '../../ListItemText'
+
+export const emailTo = () => {
+  return {
+    name: 'emailTo',
+    action: doc => {
+      const emailAddress = doc?.email?.[0]?.address
+      !!emailAddress && window.open(`mailto:${emailAddress}`, '_self')
+    },
+    Component: withActionsLocales(
+      forwardRef(({ t, ...props }, ref) => {
+        return (
+          <ActionsMenuItem {...props} ref={ref}>
+            <ListItemIcon>
+              <Icon icon={EmailIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('emailTo')} />
+          </ActionsMenuItem>
+        )
+      })
+    )
+  }
+}

package/react/ActionsMenu/Actions/helpers.js

@@ -0,0 +1,63 @@
+/**
+ * Make array of actions for ActionsItems component
+ *
+ * @param {Function[]} actions - Array of actions to create ActionsMenuItem components with associated actions and conditions
+ * @param {object} actionOptions - Options that need to be passed on actions
+ * @returns {object[]} Array of actions
+ */
+export const makeActions = (actions = [], options = {}) => {
+  return actions.map(action => {
+    const actionMenu = action(options)
+    const name = actionMenu.name || action.name
+
+    return { [name]: actionMenu }
+  })
+}
+
+export const getActionName = actionObject => {
+  return Object.keys(actionObject)[0]
+}
+
+// We need to clean Actions since action has a displayable
+// conditions and we can't know from the begining what the
+// behavior will be. For instance, we can't know that
+// hr will be the latest action in the sharing views for a
+// folder.
+// Or we can't know that we'll have two following hr if the
+// display condition for the actions between are true or false
+export const getOnlyNeededActions = (actions, file) => {
+  let previousAction = ''
+  const displayableActions = actions.filter(actionObject => {
+    const actionDefinition = Object.values(actionObject)[0]
+
+    return (
+      !actionDefinition.displayCondition ||
+      actionDefinition.displayCondition([file])
+    )
+  })
+
+  return (
+    displayableActions
+      // We do not want to display the same 2 actions in a row
+      .map(actionObject => {
+        const actionName = getActionName(actionObject)
+
+        if (previousAction === actionName) {
+          previousAction = actionName
+          return null
+        } else {
+          previousAction = actionName
+        }
+
+        return actionObject
+      })
+      .filter(Boolean)
+      // We don't want to have an hr as the latest actions available
+      .filter((cleanedAction, idx, cleanedActions) => {
+        return !(
+          getActionName(cleanedAction) === 'hr' &&
+          idx === cleanedActions.length - 1
+        )
+      })
+  )
+}

package/react/ActionsMenu/Actions/helpers.spec.js

@@ -0,0 +1,36 @@
+import { makeActions } from './helpers'
+
+describe('makeActions', () => {
+  it('should have empty actions array', () => {
+    const actions = makeActions()
+
+    expect(actions).toStrictEqual([])
+  })
+
+  it('should have object with key named with name property of the object returned by the function and value is the full object returned by the function', () => {
+    const mockFuncActionWithName = jest.fn(() => ({
+      name: 'mockFuncActionWithName name'
+    }))
+
+    const actions = makeActions([mockFuncActionWithName])
+
+    expect(actions).toStrictEqual([
+      {
+        'mockFuncActionWithName name': {
+          name: 'mockFuncActionWithName name'
+        }
+      }
+    ])
+  })
+
+  it('should have object with key named with name of function passed and value is the full object returned by the function', () => {
+    const mockFuncActionWithoutName = jest.fn(() => ({
+      propA: 0,
+      propB: 1
+    }))
+
+    const actions = makeActions([mockFuncActionWithoutName])
+
+    expect(actions).toStrictEqual([{ mockConstructor: { propA: 0, propB: 1 } }])
+  })
+})

package/react/ActionsMenu/Actions/index.js

@@ -0,0 +1,7 @@
+export { makeActions } from './helpers'
+export { divider } from './divider'
+export { modify } from './modify'
+export { smsTo } from './smsTo'
+export { call } from './call'
+export { emailTo } from './emailTo'
+export { viewInContacts } from './viewInContacts'

package/react/ActionsMenu/Actions/locales/withActionsLocales.jsx

@@ -0,0 +1,11 @@
+import withLocales from '../../../I18n/withLocales'
+
+import en from '../../../ActionMenu/Actions/locales/en.json'
+import fr from '../../../ActionMenu/Actions/locales/fr.json'
+
+export const locales = {
+  en,
+  fr
+}
+
+export default withLocales(locales)

package/react/ActionsMenu/Actions/modify.js

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react'
+
+import { generateWebLink } from 'cozy-client'
+
+import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
+import ListItemText from '../../ListItemText'
+import Icon from '../../Icon'
+import PenIcon from '../../Icons/Pen'
+import ActionsMenuItem from '../ActionsMenuItem'
+import withActionsLocales from './locales/withActionsLocales'
+
+export const modify = () => {
+  return {
+    name: 'modify',
+    action: (doc, { client }) => {
+      const contactId = doc._id
+
+      const webLink = generateWebLink({
+        slug: 'contacts',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: `/${contactId}/edit`
+      })
+
+      window.open(webLink, '_blank')
+    },
+    Component: withActionsLocales(
+      forwardRef(({ t, ...props }, ref) => {
+        return (
+          <ActionsMenuItem ref={ref} {...props}>
+            <ListItemIcon>
+              <Icon icon={PenIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('modify')} />
+          </ActionsMenuItem>
+        )
+      })
+    )
+  }
+}

package/react/ActionsMenu/Actions/smsTo.js

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+
+import CommentIcon from '../../Icons/Comment'
+import withActionsLocales from './locales/withActionsLocales'
+import ActionsMenuItem from '../ActionsMenuItem'
+import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
+import Icon from '../../Icon'
+import ListItemText from '../../ListItemText'
+
+export const smsTo = () => {
+  return {
+    name: 'smsTo',
+    action: doc => {
+      const phoneNumber = doc?.phone?.[0]?.number
+      !!phoneNumber && window.open(`sms:${phoneNumber}`, '_self')
+    },
+    Component: withActionsLocales(
+      forwardRef(({ t, ...props }, ref) => {
+        return (
+          <ActionsMenuItem {...props} ref={ref}>
+            <ListItemIcon>
+              <Icon icon={CommentIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('smsTo')} />
+          </ActionsMenuItem>
+        )
+      })
+    )
+  }
+}

package/react/ActionsMenu/Actions/viewInContacts.js

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react'
+
+import { generateWebLink } from 'cozy-client'
+
+import OpenappIcon from '../../Icons/Openapp'
+import withActionsLocales from './locales/withActionsLocales'
+import ActionsMenuItem from '../ActionsMenuItem'
+import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
+import Icon from '../../Icon'
+import ListItemText from '../../ListItemText'
+
+export const viewInContacts = () => {
+  return {
+    name: 'viewInContacts',
+    action: (doc, { client }) => {
+      const contactId = doc._id
+
+      const webLink = generateWebLink({
+        slug: 'contacts',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: `/${contactId}`
+      })
+
+      window.open(webLink, '_blank')
+    },
+    Component: withActionsLocales(
+      forwardRef(({ t, ...props }, ref) => {
+        return (
+          <ActionsMenuItem ref={ref} {...props}>
+            <ListItemIcon>
+              <Icon icon={OpenappIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('viewInContacts')} />
+          </ActionsMenuItem>
+        )
+      })
+    )
+  }
+}

package/react/ActionsMenu/ActionsItems.jsx

@@ -0,0 +1,51 @@
+import React, { forwardRef, useMemo } from 'react'
+import PropTypes from 'prop-types'
+
+import { useClient } from 'cozy-client'
+import { useI18n } from '../I18n'
+import { getActionName, getOnlyNeededActions } from './Actions/helpers'
+
+const ActionsItems = forwardRef(
+  ({ doc, actions, isLast, setIsRenaming, onClick, ...props }, ref) => {
+    const client = useClient()
+    const { t } = useI18n()
+    const cleanedActions = useMemo(() => getOnlyNeededActions(actions, doc), [
+      actions,
+      doc
+    ])
+
+    return cleanedActions.map((actionObject, idx) => {
+      const actionName = getActionName(actionObject)
+      const actionDefinition = Object.values(actionObject)[0]
+
+      const { Component: ActionComponent, action, isEnabled } = actionDefinition
+
+      const handleClick = () => {
+        action && action(doc, { client, t, isLast })
+        actionName === 'rename' && setIsRenaming(true)
+        onClick && onClick()
+      }
+
+      return (
+        <ActionComponent
+          {...props}
+          ref={ref}
+          key={actionName + idx}
+          isEnabled={isEnabled}
+          doc={doc}
+          onClick={handleClick}
+        />
+      )
+    })
+  }
+)
+
+ActionsItems.propTypes = {
+  doc: PropTypes.object,
+  actions: PropTypes.array,
+  isLast: PropTypes.bool,
+  setIsRenaming: PropTypes.func,
+  onClick: PropTypes.func
+}
+
+export default ActionsItems

package/react/ActionsMenu/ActionsMenuItem.jsx

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
+import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
+
+const ActionsMenuItem = forwardRef(({ isListItem, ...props }, ref) => {
+  const Component = isListItem ? ListItem : MenuItem
+
+  return <Component {...props} ref={ref} button />
+})
+
+ActionsMenuItem.propTypes = {
+  /** Whether the ActionsMenuItem will return a ListItem or MenuItem */
+  isListItem: PropTypes.bool
+}
+
+export default ActionsMenuItem

package/react/ActionsMenu/ActionsMenuMobileHeader.jsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import ActionsMenuItem from './ActionsMenuItem'
+import Divider from '../MuiCozyTheme/Divider'
+import useBreakpoints from '../hooks/useBreakpoints'
+
+const ActionsMenuMobileHeader = forwardRef(({ children, ...props }, ref) => {
+  const { isMobile } = useBreakpoints()
+
+  // To make accessibility work, we need to return a displayed item.
+  // The trick is to return an empty one with no padding to simulate a display none.
+  // Otherwise it will be impossible to use keyboard navigation for example
+  // probably due to the inner workings of Mui
+  if (!isMobile) {
+    return <ActionsMenuItem {...props} ref={ref} className="u-p-0" />
+  }
+
+  return (
+    <>
+      <ActionsMenuItem {...props} ref={ref} isListItem>
+        {children}
+      </ActionsMenuItem>
+      <Divider className="u-mv-half" />
+    </>
+  )
+})
+
+ActionsMenuMobileHeader.propTypes = {
+  children: PropTypes.node
+}
+
+export default ActionsMenuMobileHeader

package/react/ActionsMenu/ActionsMenuWrapper.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Menu from '../MuiCozyTheme/Menu'
+import useBreakpoints from '../hooks/useBreakpoints'
+import BottomSheet from '../BottomSheet'
+import isTesting from '../helpers/isTesting'
+import Paper from '../Paper'
+import { useActionMenuEffects } from '../ActionMenu/ActionMenuEffects'
+
+const ActionsMenuWrapper = ({ children, autoClose, onClose, ...props }) => {
+  const { isMobile } = useBreakpoints()
+
+  useActionMenuEffects()
+
+  const overrideClick = props => () => {
+    props.onClick?.()
+    autoClose && onClose?.()
+  }
+
+  if (isMobile) {
+    return (
+      <BottomSheet skipAnimation={isTesting()} backdrop onClose={onClose}>
+        <Paper square>
+          {React.Children.map(children, child =>
+            React.cloneElement(child, {
+              isListItem: true,
+              size: 'small',
+              onClick: overrideClick(child.props)
+            })
+          )}
+        </Paper>
+      </BottomSheet>
+    )
+  }
+
+  return (
+    <Menu {...props} onClose={onClose}>
+      {React.Children.map(children, child =>
+        React.cloneElement(child, {
+          onClick: overrideClick(child.props)
+        })
+      )}
+    </Menu>
+  )
+}
+
+ActionsMenuWrapper.propTypes = {
+  /** Whether the menu should automatically close itself when an item is clicked */
+  autoClose: PropTypes.bool,
+  /** Function triggered when closing the Menu of BottomSheet */
+  onClose: PropTypes.func
+}
+
+export default ActionsMenuWrapper