cozy-ui 127.10.1 → 127.12.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [127.12.0](https://github.com/cozy/cozy-ui/compare/v127.11.0...v127.12.0) (2025-08-20)
+
+
+### Features
+
+* Add `Contacts/Header` and `Contacts/GroupsSelect` components ([41892e8](https://github.com/cozy/cozy-ui/commit/41892e8))
+
+# [127.11.0](https://github.com/cozy/cozy-ui/compare/v127.10.1...v127.11.0) (2025-08-18)
+
+
+### Features
+
+* **ContactsList:** Add ContactCell component to show a contact in table ([234bfe2](https://github.com/cozy/cozy-ui/commit/234bfe2))
+* **ContactsList:** Add makeGroupLabelsAndCounts function ([b628571](https://github.com/cozy/cozy-ui/commit/b628571))
+* **Providers:** Add Selection provider ([b9854b6](https://github.com/cozy/cozy-ui/commit/b9854b6))
+
 ## [127.10.1](https://github.com/cozy/cozy-ui/compare/v127.10.0...v127.10.1) (2025-08-18)
 
 

package/package.json

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

package/react/Contacts/GroupsSelect/GroupCreation.jsx

@@ -0,0 +1,95 @@
+import classNames from 'classnames'
+import React, { Component } from 'react'
+
+import styles from './styles.styl'
+import Icon from '../../Icon'
+import PlusIcon from '../../Icons/Plus'
+import Input from '../../Input'
+import { translate } from '../../providers/I18n'
+
+const normalizeGroupData = name => {
+  return {
+    name: name,
+    metadata: {
+      version: 1
+    }
+  }
+}
+class GroupCreation extends Component {
+  state = {
+    isInputDisplayed: false,
+    groupName: ''
+  }
+  constructor(props) {
+    super(props)
+    this.textInput = React.createRef()
+  }
+  handleClick = () => {
+    this.setState({ isInputDisplayed: !this.state.isInputDisplayed })
+  }
+  onFocus = e => {
+    e.stopPropagation()
+  }
+
+  onClick = e => {
+    e.stopPropagation()
+  }
+  keyPress = async e => {
+    if (e.keyCode == 13) {
+      this.props.createGroup(normalizeGroupData(e.target.value))
+      this.textInput.current.value = ''
+    }
+    e.stopPropagation()
+  }
+
+  onMouseDown = e => {
+    e.stopPropagation()
+  }
+
+  render() {
+    const { isInputDisplayed } = this.state
+    const { t } = this.props
+    return (
+      <div>
+        <div className={styles['contact-group-creation-divider']} />
+        <div
+          className={classNames(
+            'u-ml-half',
+            'u-mr-half',
+            'u-c-pointer',
+            styles['container']
+          )}
+        >
+          {!isInputDisplayed && (
+            <div
+              onClick={this.handleClick}
+              className={styles['contact-group-create-div-icon']}
+            >
+              <Icon icon={PlusIcon} />
+              <span className="u-pl-half">
+                {t('Contacts.GroupsSelect.create')}
+              </span>
+            </div>
+          )}
+          {isInputDisplayed && (
+            <Input
+              id="createGroupInput"
+              ref={this.textInput}
+              type="text"
+              placeholder={t('Contacts.GroupsSelect.name')}
+              onClick={this.onClick}
+              onFocus={this.onFocus}
+              onKeyDown={this.keyPress}
+              size="tiny"
+              autoComplete="off"
+              autoFocus={true}
+              onMouseDown={this.onMouseDown}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default translate()(GroupCreation)

package/react/Contacts/GroupsSelect/GroupsSelect.jsx

@@ -0,0 +1,159 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+
+import CustomMenu from './SelectBox/Menu'
+import CustomOption from './SelectBox/Option'
+import CustomSelectContainer from './SelectBox/SelectContainer'
+import useGroupsSelect from './useGroupSelect'
+import ClickAwayListener from '../../ClickAwayListener'
+import SelectBox from '../../SelectBox'
+import { useBreakpoints } from '../../providers/Breakpoints'
+
+const captureEscapeEvent = e => {
+  if (e.key === 'Escape') {
+    e.stopPropagation()
+    e.target.blur()
+  }
+}
+
+export const GroupsSelect = ({
+  allGroups,
+  closeMenuOnSelect,
+  value,
+  styles,
+  isMulti,
+  noOptionsMessage,
+  withCheckbox,
+  components,
+  onGroupCreated,
+  onChange,
+  onGroupCreate,
+  onGroupUpdate,
+  onGroupDelete,
+  menuPosition
+}) => {
+  const client = useClient()
+  const { isMobile } = useBreakpoints()
+  const [{ menuIsOpen, editedGroupId }, setState] = useState({
+    menuIsOpen: false,
+    editedGroupId: ''
+  })
+  const { createGroup, renameGroup } = useGroupsSelect({
+    allGroups,
+    onGroupCreated,
+    client,
+    onGroupCreate,
+    onGroupUpdate
+  })
+
+  const toggleMenu = () => {
+    setState(prev => ({ ...prev, menuIsOpen: !prev.menuIsOpen }))
+  }
+
+  const closeMenu = () => {
+    setState(prev => ({ ...prev, menuIsOpen: false }))
+  }
+
+  const setEditedGroupId = id => {
+    setState(prev => ({ ...prev, editedGroupId: id }))
+  }
+
+  const handleChange = props => {
+    if (closeMenuOnSelect) {
+      closeMenu()
+    }
+
+    onChange(props)
+  }
+
+  const handleDelete = group => {
+    closeMenu()
+    onGroupDelete(group)
+  }
+
+  const defaultComponents = {
+    Menu: CustomMenu,
+    Option: CustomOption,
+    SelectContainer: CustomSelectContainer
+  }
+
+  return (
+    <>
+      <ClickAwayListener onClickAway={menuIsOpen ? closeMenu : () => {}}>
+        <SelectBox
+          className={isMobile ? 'u-mb-half' : 'u-mr-half'}
+          classNamePrefix="react-select"
+          isMulti={isMulti}
+          withCheckbox={withCheckbox}
+          menuIsOpen={menuIsOpen}
+          blurInputOnSelect={true}
+          hideSelectedOptions={false}
+          isSearchable={false}
+          isClearable={false}
+          closeMenuOnSelect={closeMenuOnSelect}
+          tabSelectsValue={false}
+          onKeyDown={captureEscapeEvent}
+          noOptionsMessage={noOptionsMessage}
+          options={allGroups}
+          value={value}
+          onChange={handleChange}
+          getOptionLabel={group => group.name}
+          getOptionValue={group => group._id}
+          components={{ ...defaultComponents, ...components }}
+          createGroup={createGroup}
+          deleteGroup={handleDelete}
+          renameGroup={renameGroup}
+          styles={styles}
+          onControlClicked={toggleMenu}
+          setEditedGroupId={setEditedGroupId}
+          editedGroupId={editedGroupId}
+          menuPosition={menuPosition}
+          fullwidth
+        />
+      </ClickAwayListener>
+    </>
+  )
+}
+
+GroupsSelect.propTypes = {
+  allGroups: PropTypes.array.isRequired,
+  styles: PropTypes.object,
+  // for multiple selections, value can be an array
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
+  // to customize react-select elements
+  components: PropTypes.object,
+  // to define if it is possible to select more than one option
+  isMulti: PropTypes.bool,
+  // noOptionsMessage is used to show a message when there is no options in the menu list
+  noOptionsMessage: PropTypes.func,
+  // hide/show checkbox besides menu list options
+  withCheckbox: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  // function to be triggered after creating a group
+  onGroupCreated: PropTypes.func,
+  // function to be triggered when creating a group
+  onGroupCreate: PropTypes.func,
+  // function to be triggered when updating a group
+  onGroupUpdate: PropTypes.func,
+  // function to be triggered when deleting a group
+  onGroupDelete: PropTypes.func,
+  closeMenuOnSelect: PropTypes.bool,
+  menuPosition: PropTypes.oneOf(['fixed', 'absolute'])
+}
+
+GroupsSelect.defaultProps = {
+  isMulti: false,
+  components: {},
+  closeMenuOnSelect: false
+}
+
+GroupsSelect.propTypes = {
+  allGroups: PropTypes.array.isRequired,
+  onGroupCreate: PropTypes.func.isRequired,
+  onGroupUpdate: PropTypes.func.isRequired,
+  onGroupDelete: PropTypes.func.isRequired
+}
+
+export default GroupsSelect

package/react/Contacts/GroupsSelect/GroupsSelect.spec.jsx

@@ -0,0 +1,248 @@
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import React from 'react'
+
+import GroupsSelect from './GroupsSelect'
+import SelectedGroupProvider from './GroupsSelectProvider'
+import Control from './SelectBox/Control'
+import AlertProvider from '../../providers/Alert'
+import DemoProvider from '../../providers/DemoProvider'
+
+const createGroup = jest.fn()
+const updateGroup = jest.fn()
+const deleteGroup = jest.fn()
+
+export const groups = [
+  {
+    id: '5b49553c5916cf7b5b2a5f48600078a8',
+    _id: '5b49553c5916cf7b5b2a5f48600078a8',
+    _type: 'io.cozy.contacts.groups',
+    _rev: '1-7862def64fb044932d3264e2f8477454',
+    cozyMetadata: {
+      createdAt: '2019-07-15T11:22:13.551Z',
+      createdByApp: 'Contacts',
+      createdByAppVersion: '0.8.5',
+      metadataVersion: 1,
+      updatedAt: '2019-07-15T11:22:13.551Z',
+      updatedByApps: [
+        { date: '2019-07-15T11:22:13.551Z', slug: 'Contacts', version: '0.8.5' }
+      ]
+    },
+    metadata: { version: 1 },
+    name: '2018-2019 Enseignants'
+  },
+  {
+    id: '8cb7ea7fe264260e997529439b0091c0',
+    _id: '8cb7ea7fe264260e997529439b0091c0',
+    _type: 'io.cozy.contacts.groups',
+    _rev: '1-8b92242f1ccaca20e7862306cddbe37f',
+    cozyMetadata: {
+      createdAt: '2020-04-15T06:46:20.128Z',
+      createdByApp: 'Contacts',
+      createdByAppVersion: '0.8.7',
+      metadataVersion: 1,
+      updatedAt: '2020-04-15T06:46:20.128Z',
+      updatedByApps: [
+        { date: '2020-04-15T06:46:20.128Z', slug: 'Contacts', version: '0.8.7' }
+      ]
+    },
+    metadata: { version: 1 },
+    name: 'ez'
+  },
+  {
+    id: '18c031b0ac9f47cdc48b275b1900726d',
+    _id: '18c031b0ac9f47cdc48b275b1900726d',
+    _type: 'io.cozy.contacts.groups',
+    _rev: '1-f438477a749fa0b90cde2e7c53a41bd6',
+    cozyMetadata: {
+      createdAt: '2019-11-08T07:45:55.424Z',
+      createdByApp: 'Contacts',
+      createdByAppVersion: '0.8.6',
+      metadataVersion: 1,
+      updatedAt: '2019-11-08T07:45:55.424Z',
+      updatedByApps: [
+        { date: '2019-11-08T07:45:55.424Z', slug: 'Contacts', version: '0.8.6' }
+      ]
+    },
+    metadata: { version: 1 },
+    name: 'groupe test'
+  }
+]
+
+const setup = () => {
+  const root = render(
+    <DemoProvider>
+      <AlertProvider>
+        <SelectedGroupProvider>
+          <GroupsSelect
+            value={[groups[0]]}
+            allGroups={groups}
+            components={{ Control }}
+            onChange={() => {}}
+            onGroupCreate={createGroup}
+            onGroupUpdate={updateGroup}
+            onGroupDelete={deleteGroup}
+          />
+        </SelectedGroupProvider>
+      </AlertProvider>
+    </DemoProvider>
+  )
+  return { root }
+}
+
+describe('GroupsSelect', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should display every groups and group creation button', () => {
+    setup()
+
+    act(() => {
+      fireEvent.click(screen.getByText('Groups'))
+    })
+
+    for (const group of groups) {
+      expect(screen.queryByText(group.name)).not.toBeNull()
+    }
+    expect(screen.queryByText('Create a group')).not.toBeNull()
+  })
+
+  it('should be able to create a new group', () => {
+    setup()
+
+    act(() => {
+      fireEvent.click(screen.getByText('Groups'))
+    })
+
+    act(() => {
+      fireEvent.click(screen.getByText('Create a group'))
+    })
+
+    // it should replace the button by an empty input
+    let createGroupInput = screen.queryByRole('textbox', {
+      id: 'createGroupInput'
+    })
+    expect(createGroupInput).not.toBeNull()
+    expect(createGroupInput.value).toBe('')
+
+    act(() => {
+      // it should trigger creation function by pressing Enter key, and clear the input
+      fireEvent.change(
+        screen.getByRole('textbox', {
+          id: 'createGroupInput'
+        }),
+        { target: { value: 'new group' } }
+      )
+    })
+
+    createGroupInput = screen.queryByRole('textbox', {
+      id: 'createGroupInput'
+    })
+    expect(createGroupInput).not.toBeNull()
+    expect(createGroupInput.value).toBe('new group')
+
+    act(() => {
+      fireEvent.keyDown(
+        screen.getByRole('textbox', {
+          id: 'createGroupInput'
+        }),
+        { key: 'Enter', keyCode: '13' }
+      )
+    })
+
+    expect(createGroup).toHaveBeenCalled()
+    createGroupInput = screen.queryByRole('textbox', {
+      id: 'createGroupInput'
+    })
+    expect(createGroupInput).not.toBeNull()
+    expect(createGroupInput.value).toBe('')
+  })
+
+  it("shouldn't be able to create a new group", () => {
+    setup()
+
+    act(() => {
+      fireEvent.click(screen.getByText('Groups'))
+    })
+
+    act(() => {
+      fireEvent.click(screen.getByText('Create a group'))
+    })
+
+    // it should replace the button by an empty input
+    let createGroupInput = screen.queryByRole('textbox', {
+      id: 'createGroupInput'
+    })
+    expect(createGroupInput).not.toBeNull()
+    expect(createGroupInput.value).toBe('')
+
+    act(() => {
+      // it should trigger creation function by pressing Enter key, and clear the input
+      fireEvent.change(
+        screen.getByRole('textbox', {
+          id: 'createGroupInput'
+        }),
+        { target: { value: '' } }
+      )
+    })
+
+    createGroupInput = screen.queryByRole('textbox', {
+      id: 'createGroupInput'
+    })
+    expect(createGroupInput).not.toBeNull()
+    expect(createGroupInput.value).toBe('')
+
+    act(() => {
+      fireEvent.keyDown(
+        screen.getByRole('textbox', {
+          id: 'createGroupInput'
+        }),
+        { key: 'Enter', keyCode: '13' }
+      )
+    })
+
+    expect(createGroup).not.toHaveBeenCalled()
+    createGroupInput = screen.queryByRole('textbox', {
+      id: 'createGroupInput'
+    })
+    expect(createGroupInput).not.toBeNull()
+    expect(createGroupInput.value).toBe('')
+  })
+
+  it('should be able to rename a group', () => {
+    setup()
+
+    act(() => {
+      // it should replace the field by input with group name as value
+      fireEvent.click(screen.getByText('Groups'))
+    })
+
+    act(() => {
+      fireEvent.click(
+        screen.getByTestId(`ActionsOption_${groups[0].name}-icon_pen`)
+      )
+    })
+
+    let editGroupInput = screen.queryByRole('textbox', {
+      id: 'editGroupInput'
+    })
+    expect(editGroupInput).not.toBeNull()
+    expect(editGroupInput.value).toBe(groups[0].name)
+
+    act(() => {
+      // it should trigger rename function by pressing Enter key, and remove input
+      fireEvent.keyDown(
+        screen.getByRole('textbox', {
+          id: 'editGroupInput'
+        }),
+        { key: 'Enter', keyCode: '13' }
+      )
+    })
+
+    expect(updateGroup).toHaveBeenCalled()
+    editGroupInput = screen.queryByRole('textbox', {
+      id: 'editGroupInput'
+    })
+    expect(editGroupInput).toBeNull()
+  })
+})

package/react/Contacts/GroupsSelect/GroupsSelectProvider.jsx

@@ -0,0 +1,39 @@
+import React, { useContext, useState } from 'react'
+
+import { translatedDefaultSelectedGroup } from './helpers'
+import { locales } from './locales'
+import { useI18n, useExtendI18n } from '../../providers/I18n'
+
+const SelectedGroupContext = React.createContext()
+
+export const useSelectedGroup = () => {
+  const context = useContext(SelectedGroupContext)
+
+  if (!context) {
+    throw new Error(
+      'useSelectedGroup must be used within a SelectedGroupProvider'
+    )
+  }
+  return context
+}
+
+const SelectedGroupProvider = ({ children }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const [selectedGroup, setSelectedGroup] = useState(
+    translatedDefaultSelectedGroup(t)
+  )
+
+  const contextValue = {
+    selectedGroup,
+    setSelectedGroup
+  }
+
+  return (
+    <SelectedGroupContext.Provider value={contextValue}>
+      {children}
+    </SelectedGroupContext.Provider>
+  )
+}
+
+export default SelectedGroupProvider

package/react/Contacts/GroupsSelect/Readme.md

@@ -0,0 +1 @@
+<!-- For styleguidist, a .md file is needed in directories -->

package/react/Contacts/GroupsSelect/SelectBox/Control.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Button from '../../../Buttons'
+import Icon from '../../../Icon'
+import BottomSelectIcon from '../../../Icons/BottomSelect'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+import { locales } from '../locales'
+
+const Control = ({
+  innerRef,
+  innerProps,
+  selectProps: { onControlClicked }
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  return (
+    <div ref={innerRef} {...innerProps}>
+      <Button
+        variant="secondary"
+        size="small"
+        onClick={onControlClicked}
+        onTouchStart={onControlClicked}
+        label={t('Contacts.GroupsSelect.manage')}
+        startIcon={<Icon icon={BottomSelectIcon} width="12" />}
+      />
+    </div>
+  )
+}
+
+Control.propTypes = {
+  selectProps: PropTypes.object.isRequired
+}
+
+export default Control

package/react/Contacts/GroupsSelect/SelectBox/EditGroupName.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React, { useRef } from 'react'
+
+import Input from '../../../Input'
+
+const EditGroupName = ({
+  groupId,
+  groupName,
+  setEditedGroupId,
+  renameGroup
+}) => {
+  const inputRef = useRef()
+
+  const stopPropagation = e => {
+    e.stopPropagation()
+  }
+
+  const exitEditMode = () => setEditedGroupId('')
+
+  const handleKeyDown = async e => {
+    const ENTER_KEY_CODE = 13
+    if (e.keyCode == ENTER_KEY_CODE) {
+      exitEditMode()
+      renameGroup(groupId, inputRef.current.value)
+    }
+    stopPropagation(e)
+  }
+
+  return (
+    <Input
+      id="editGroupInput"
+      ref={inputRef}
+      type="text"
+      defaultValue={groupName}
+      size="tiny"
+      autoComplete="off"
+      autoFocus={true}
+      onKeyDown={handleKeyDown}
+      onClick={stopPropagation}
+      onFocus={stopPropagation}
+      onMouseDown={stopPropagation}
+      onBlur={exitEditMode}
+    />
+  )
+}
+
+Option.propTypes = {
+  groupName: PropTypes.string.isRequired,
+  setEditedGroupId: PropTypes.string.isRequired
+}
+
+export default EditGroupName

package/react/Contacts/GroupsSelect/SelectBox/Menu.jsx

@@ -0,0 +1,26 @@
+import cx from 'classnames'
+import React from 'react'
+
+import styles from './styles.styl'
+import { components } from '../../../SelectBox'
+import Typography from '../../../Typography'
+import GroupCreation from '../GroupCreation'
+
+const Menu = ({ children, selectProps, className, ...props }) => {
+  const { createGroup, ...restSelectProps } = selectProps
+
+  return (
+    <components.Menu
+      {...props}
+      className={cx(className, styles['menu'])}
+      selectProps={restSelectProps}
+    >
+      <Typography variant="body1" component="div">
+        {children}
+        <GroupCreation createGroup={createGroup} />
+      </Typography>
+    </components.Menu>
+  )
+}
+
+export default Menu