cozy-ui 101.2.0 → 102.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [102.0.0](https://github.com/cozy/cozy-ui/compare/v101.2.0...v102.0.0) (2024-01-23)
+
+
+### Bug Fixes
+
+* **ActionsMenuItem:** Props `t`, `f`, `lang` was spread to DOM element ([3636fe3](https://github.com/cozy/cozy-ui/commit/3636fe3))
+* Func `getOnlyNeededActions` wasn't dealing with `divider` as `hr` ([ec4acf6](https://github.com/cozy/cozy-ui/commit/ec4acf6))
+
+
+### Features
+
+* **Actions:** Add `others` ([0186834](https://github.com/cozy/cozy-ui/commit/0186834))
+* **ActionsBar:** Add this new component ([d80e3cf](https://github.com/cozy/cozy-ui/commit/d80e3cf))
+* **ActionsItems:** Add `component` prop that manages the display ([db16d71](https://github.com/cozy/cozy-ui/commit/db16d71))
+* **ActionsItems:** Add `webviewIntent` in actions ([a64595b](https://github.com/cozy/cozy-ui/commit/a64595b))
+* **ActionsItems:** Spread the action to the displayed component ([a0a9aa4](https://github.com/cozy/cozy-ui/commit/a0a9aa4))
+* **ActionsMenu:** Replace `doc` prop by `docs` ([1049809](https://github.com/cozy/cozy-ui/commit/1049809))
+* **ActionsMenu:** Use own locales and add `getActionsI18n()` ([351595e](https://github.com/cozy/cozy-ui/commit/351595e))
+* **I18n:** Add `getI18n()` that work like `useI18n` but without React ([4b65a35](https://github.com/cozy/cozy-ui/commit/4b65a35))
+* **Icon:** Prop `icon` no longer required + can use Icon comp ([3bd5b9b](https://github.com/cozy/cozy-ui/commit/3bd5b9b))
+* **SelectionBar:** Deprecates the component ([6e72491](https://github.com/cozy/cozy-ui/commit/6e72491))
+
+
+### BREAKING CHANGES
+
+* **ActionsMenu:** When using ActionsMenu, we no longer imply we deal with one single document, but several documents. Who can do more can do less. Beside, `disabled` on actions is no longer a boolean but a function. So:
+- on `<ActionsMenu />` replace `doc` prop by `docs` and provide an array instead of object
+- on actions, `disabled` must be a func instead of a boolean
+
 # [101.2.0](https://github.com/cozy/cozy-ui/compare/v101.1.1...v101.2.0) (2024-01-19)
 
 

package/package.json

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

package/react/ActionsBar/Readme.md

@@ -0,0 +1,54 @@
+Use same actions as `<ActionsMenu />`
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
+import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
+import ActionsBar from 'cozy-ui/transpiled/react/ActionsBar'
+import { makeActions, modify, emailTo, print, viewInContacts, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+
+const selectedItem = {
+    _id: 1,
+    type: 'file'
+}
+
+const doc = {
+  _id: 'id01',
+  _type: 'io.cozy.contacts',
+  phone: [{ number: '0102030405' }],
+  email: [{ address: 'johndoe@cozy.cc' }],
+}
+
+initialState = { selected: isTesting() ? [doc, doc] : [] }
+
+const addSelected = () => setState(previousState => {
+    const arr = previousState.selected
+    arr.push(doc)
+    return { selected: arr }
+})
+
+const removeSelected = () => setState(previousState => {
+    const arr = previousState.selected
+    arr.pop()
+    return { selected: arr }
+})
+
+const actions = makeActions([ modify, viewInContacts, call, smsTo, emailTo ])
+
+;
+
+<DemoProvider>
+  <Buttons label="Add a selected document" className="u-mb-1-s u-mr-1" onClick={addSelected} />
+  <Buttons label="Remove a selected document" onClick={removeSelected} />
+
+  {state.selected.length > 0 && (
+    <ActionsBar
+      actions={actions}
+      docs={state.selected}
+      onClose={() => setState({selected: []})}
+    />
+  )}
+</DemoProvider>
+```

package/react/ActionsBar/ResponsiveAction.jsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react'
+
+import useBreakpoints from '../providers/Breakpoints'
+import { makeStyles } from '../styles'
+import Button from '../Buttons'
+import Typography from '../Typography'
+import Icon from '../Icon'
+
+const useDesktopStyles = makeStyles({
+  root: {
+    border: 'none !important', // to force also on disabled status
+    '&:hover': {
+      border: 'none'
+    }
+  }
+})
+
+const useMobileStyles = makeStyles({
+  root: {
+    display: 'block',
+    height: '100%',
+    flex: '1 1 0',
+    padding: 0,
+    border: 'none !important', // to force also when disabled
+    '&:hover': {
+      border: 'none'
+    }
+  },
+  label: { textTransform: 'none' },
+  startIcon: {
+    marginRight: 0,
+    marginBottom: 2
+  }
+})
+
+const ResponsiveAction = forwardRef(({ action, disabled, onClick }, ref) => {
+  const { isMobile } = useBreakpoints()
+  const useStyles = isMobile ? useMobileStyles : useDesktopStyles
+  const styles = useStyles()
+
+  return (
+    <Button
+      ref={ref}
+      classes={styles}
+      variant="secondary"
+      startIcon={<Icon icon={action.icon} />}
+      label={
+        isMobile ? (
+          <Typography
+            variant="caption"
+            color={disabled ? 'inherit' : 'textPrimary'}
+          >
+            {action.label}
+          </Typography>
+        ) : (
+          action.label
+        )
+      }
+      disabled={disabled}
+      onClick={onClick}
+    />
+  )
+})
+
+ResponsiveAction.displayName = 'ResponsiveAction'
+
+export default ResponsiveAction

package/react/ActionsBar/index.jsx

@@ -0,0 +1,190 @@
+import React, { useRef, useState, useMemo } from 'react'
+import PropTypes from 'prop-types'
+
+import { makeStyles } from '../styles'
+import useBreakpoints from '../providers/Breakpoints'
+import AppBar from '../AppBar'
+import Toolbar from '../Toolbar'
+import Box from '../Box'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import CrossIcon from '../Icons/Cross'
+import CrossCircleIcon from '../Icons/CrossCircle'
+import DotsIcon from '../Icons/Dots'
+import ActionsMenu from '../ActionsMenu'
+import ActionsItems from '../ActionsMenu/ActionsItems'
+import { getOnlyNeededActions } from '../ActionsMenu/Actions/helpers'
+import { useI18n } from '../providers/I18n'
+import { makeActions, others } from '../ActionsMenu/Actions'
+
+import ResponsiveAction from './ResponsiveAction'
+import withActionsLocales from './locales/withActionsLocales'
+
+const useStyles = makeStyles({
+  appBar: ({ isMobile }) => ({
+    height: isMobile ? '4rem' : '3rem',
+    top: isMobile ? 'auto' : 0,
+    bottom: isMobile ? 0 : undefined,
+    zIndex: 'var(--zIndex-selection)',
+    boxShadow: isMobile ? 'var(--shadow8)' : 'var(--shadow1)'
+  }),
+  toolbar: {
+    height: 'inherit'
+  },
+  selectedCount: ({ isMobile }) => ({
+    display: 'flex',
+    flexShrink: 0,
+    position: 'relative',
+    height: 'inherit',
+    minWidth: '2rem',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: '0.5rem',
+    gap: !isMobile ? '1rem' : undefined,
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      right: '-0.5rem',
+      borderTop: '0.5rem solid transparent',
+      borderBottom: '0.5rem solid transparent',
+      borderLeft: '0.5rem solid var(--primaryColor)'
+    }
+  }),
+  desktopCloseButton: {
+    position: 'absolute',
+    right: 0
+  },
+  actionsContainer: {
+    display: 'flex',
+    height: '100%',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})
+
+const ActionsBar = ({
+  actions,
+  docs,
+  autoClose,
+  maxDesktopActions,
+  onClose
+}) => {
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+  const anchorRef = useRef()
+  const [showMenu, setShowMenu] = useState(false)
+  const styles = useStyles({ isMobile })
+
+  const showMobileCloseButton = !!onClose && isMobile
+  const showDesktopCloseButton = !!onClose && !isMobile
+  const maxActionsDisplayed = isMobile ? 4 : maxDesktopActions
+
+  const cleanedActions = useMemo(() => getOnlyNeededActions(actions, docs), [
+    actions,
+    docs
+  ])
+
+  const countActionsToDisplay =
+    cleanedActions.length > maxActionsDisplayed
+      ? maxActionsDisplayed - 1
+      : maxActionsDisplayed
+  const SLICE_INDEX = Math.max(1, countActionsToDisplay)
+  const barActions = cleanedActions.slice(0, SLICE_INDEX)
+  const menuActions = cleanedActions.slice(SLICE_INDEX)
+  const otherAction = makeActions([others])
+
+  const handleClick = () => {
+    autoClose && onClose?.()
+  }
+
+  return (
+    <AppBar className={styles.appBar} position="fixed" color="inherit">
+      <Toolbar
+        className={styles.toolbar}
+        variant={isMobile ? 'regular' : 'dense'}
+        disableGutters
+      >
+        {showDesktopCloseButton && (
+          <IconButton className={styles.desktopCloseButton} onClick={onClose}>
+            <Icon icon={CrossIcon} />
+          </IconButton>
+        )}
+        <Box
+          className={styles.selectedCount}
+          padding={showMobileCloseButton ? '0 1rem 0 0' : '0 1rem'}
+          color="primary.contrastText"
+          bgcolor="primary.main"
+        >
+          {showMobileCloseButton && (
+            <IconButton color="inherit" onClick={onClose}>
+              <Icon icon={CrossCircleIcon} />
+            </IconButton>
+          )}
+          <div>{isMobile ? docs.length : t('selected', docs.length)}</div>
+        </Box>
+        <div className={styles.actionsContainer}>
+          {/* actions displayed in the bar itself */}
+          <ActionsItems
+            docs={docs}
+            component={ResponsiveAction}
+            actions={barActions}
+            onClick={handleClick}
+          />
+
+          {/* actions displayed in ActionsMenu */}
+          {menuActions.length > 0 && (
+            <>
+              {isMobile ? (
+                <ActionsItems
+                  docs={docs}
+                  component={ResponsiveAction}
+                  actions={otherAction}
+                  onClick={() => setShowMenu(true)}
+                />
+              ) : (
+                <IconButton ref={anchorRef} onClick={() => setShowMenu(true)}>
+                  <Icon icon={DotsIcon} />
+                </IconButton>
+              )}
+              <ActionsMenu
+                ref={anchorRef}
+                open={showMenu}
+                docs={docs}
+                actions={menuActions}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left'
+                }}
+                componentsProps={{
+                  actionsItems: {
+                    onClick: handleClick
+                  }
+                }}
+                onClose={() => setShowMenu(false)}
+              />
+            </>
+          )}
+        </div>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+ActionsBar.propTypes = {
+  /**
+   * A number corresponding to the display of the maximum number of items.
+   * The other actions will be displayed in an additional menu.
+   * Only works on desktop since maximum number is forced in mobile
+   */
+  maxDesktopActions: PropTypes.number,
+  autoClose: PropTypes.bool
+}
+
+ActionsBar.defaultProps = {
+  maxDesktopActions: 5,
+  autoClose: true
+}
+
+export default withActionsLocales(ActionsBar)

package/react/ActionsBar/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "selected": "%{smart_count} item selected |||| %{smart_count} items selected"
+}

package/react/ActionsBar/locales/fr.json

@@ -0,0 +1,3 @@
+{
+  "selected": "%{smart_count} élément sélectionné |||| %{smart_count} éléments sélectionnés"
+}

package/react/ActionsBar/locales/withActionsLocales.jsx

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

package/react/ActionsMenu/Actions/call.js

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

package/react/ActionsMenu/Actions/emailTo.js

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

package/react/ActionsMenu/Actions/helpers.js

@@ -25,14 +25,14 @@ export const getActionName = actionObject => {
 // 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) => {
+export const getOnlyNeededActions = (actions, docs) => {
   let previousAction = ''
   const displayableActions = actions.filter(actionObject => {
     const actionDefinition = Object.values(actionObject)[0]
 
     return (
       !actionDefinition.displayCondition ||
-      actionDefinition.displayCondition([file])
+      actionDefinition.displayCondition(docs)
     )
   })
 
@@ -55,7 +55,8 @@ export const getOnlyNeededActions = (actions, file) => {
       // We don't want to have an hr as the latest actions available
       .filter((cleanedAction, idx, cleanedActions) => {
         return !(
-          getActionName(cleanedAction) === 'hr' &&
+          (getActionName(cleanedAction) === 'hr' ||
+            getActionName(cleanedAction) === 'divider') &&
           idx === cleanedActions.length - 1
         )
       })

package/react/ActionsMenu/Actions/index.js

@@ -6,3 +6,4 @@ export { call } from './call'
 export { emailTo } from './emailTo'
 export { print } from './print'
 export { viewInContacts } from './viewInContacts'
+export { others } from './others'

package/react/ActionsMenu/Actions/locales/en.json

@@ -0,0 +1,9 @@
+{
+  "viewInContacts": "View in Cozy Contacts",
+  "modify": "Modify",
+  "emailTo": "Send an email",
+  "smsTo": "Send a message",
+  "print": "Print",
+  "others": "Others",
+  "call": "Call"
+}

package/react/ActionsMenu/Actions/locales/fr.json

@@ -0,0 +1,9 @@
+{
+  "viewInContacts": "Voir dans Cozy Contacts",
+  "modify": "Modifier",
+  "emailTo": "Envoyer un e-mail",
+  "smsTo": "Envoyer un message",
+  "print": "Imprimer",
+  "others": "Autres",
+  "call": "Appeler"
+}

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

@@ -1,11 +1,13 @@
+import { getI18n } from '../../../providers/I18n/helpers'
 import withOnlyLocales from '../../../providers/I18n/withOnlyLocales'
 
-import en from '../../../deprecated/ActionMenu/Actions/locales/en.json'
-import fr from '../../../deprecated/ActionMenu/Actions/locales/fr.json'
+import en from './en.json'
+import fr from './fr.json'
 
 export const locales = {
   en,
   fr
 }
 
+export const getActionsI18n = () => getI18n(undefined, lang => locales[lang])
 export default withOnlyLocales(locales)

package/react/ActionsMenu/Actions/modify.js

@@ -7,14 +7,19 @@ import ListItemText from '../../ListItemText'
 import Icon from '../../Icon'
 import PenIcon from '../../Icons/Pen'
 import ActionsMenuItem from '../ActionsMenuItem'
-import withActionsLocales from './locales/withActionsLocales'
-import { useI18n } from '../../providers/I18n'
+import { getActionsI18n } from './locales/withActionsLocales'
 
 export const modify = () => {
+  const { t } = getActionsI18n()
+  const icon = PenIcon
+  const label = t('modify')
+
   return {
     name: 'modify',
-    action: (doc, { client }) => {
-      const contactId = doc._id
+    icon,
+    label,
+    action: (docs, { client }) => {
+      const contactId = docs[0]._id
 
       const webLink = generateWebLink({
         slug: 'contacts',
@@ -26,19 +31,15 @@ export const modify = () => {
 
       window.open(webLink, '_blank')
     },
-    Component: withActionsLocales(
-      forwardRef((props, ref) => {
-        const { t } = useI18n()
-
-        return (
-          <ActionsMenuItem ref={ref} {...props}>
-            <ListItemIcon>
-              <Icon icon={PenIcon} />
-            </ListItemIcon>
-            <ListItemText primary={t('modify')} />
-          </ActionsMenuItem>
-        )
-      })
-    )
+    Component: forwardRef((props, ref) => {
+      return (
+        <ActionsMenuItem ref={ref} {...props}>
+          <ListItemIcon>
+            <Icon icon={icon} />
+          </ListItemIcon>
+          <ListItemText primary={label} />
+        </ActionsMenuItem>
+      )
+    })
   }
 }

package/react/ActionsMenu/Actions/others.jsx

@@ -0,0 +1,13 @@
+import DotsIcon from '../../Icons/Dots'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+
+export const others = () => {
+  const { t } = getActionsI18n()
+
+  return {
+    name: 'others',
+    label: t('others'),
+    icon: DotsIcon
+  }
+}