cozy-ui 127.10.0 → 127.11.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [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)
+
+
+### Bug Fixes
+
+* Reorganize virtualized grid list to render item content :bug: ([62cf105](https://github.com/cozy/cozy-ui/commit/62cf105))
+
 # [127.10.0](https://github.com/cozy/cozy-ui/compare/v127.9.0...v127.10.0) (2025-07-31)
 
 

package/package.json

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

package/react/ContactsList/ContactCell.jsx

@@ -0,0 +1,58 @@
+import React, { useRef, useState } from 'react'
+
+import ContactIdentity from './Contacts/ContactIdentity'
+import { locales } from './locales/withContactsListLocales'
+import ActionsMenu from '../ActionsMenu'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import DotsIcon from '../Icons/Dots'
+import ListItemIcon from '../ListItemIcon'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const Cell = ({ row, column, cell, actions }) => {
+  const [showActions, setShowActions] = useState(false)
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const actionsRef = useRef()
+
+  if (column.id === 'fullname') {
+    return <ContactIdentity contact={row} noWrapper />
+  }
+
+  if (column.id === 'actions') {
+    if (!actions) {
+      return null
+    }
+
+    return (
+      <>
+        <ListItemIcon>
+          <IconButton
+            ref={actionsRef}
+            arial-label={t('menu')}
+            onClick={() => setShowActions(true)}
+          >
+            <Icon icon={DotsIcon} />
+          </IconButton>
+        </ListItemIcon>
+        {showActions && (
+          <ActionsMenu
+            open
+            ref={actionsRef}
+            docs={[row]}
+            actions={actions}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right'
+            }}
+            onClose={() => setShowActions(false)}
+          />
+        )}
+      </>
+    )
+  }
+
+  return cell
+}
+
+export default React.memo(Cell)

package/react/ContactsList/helpers.js

@@ -1,3 +1,5 @@
+import get from 'lodash/get'
+
 export function buildLastNameFirst(contact) {
   const givenName =
     contact.name && contact.name.givenName
@@ -36,15 +38,39 @@ const makeHeader = (contact, t) => {
   return name[0] || t('empty')
 }
 
+/**
+ * Build header for a contact (first letter of indexes.byFamilyNameGivenNameEmailCozyUrl)
+ * @param {object} contact
+ * @param {function} t translation function
+ * @returns {string} header
+ */
+const makeHeaderForIndexedContacts = (contact, t) => {
+  if (contact.me) return t('me')
+  if (contact.cozyMetadata?.favorite) return t('favorite')
+
+  const index = get(contact, 'indexes.byFamilyNameGivenNameEmailCozyUrl', '')
+  const hasIndex = index !== null && index.length > 0
+
+  if (hasIndex) {
+    const firstLetterWithoutAccent = index[0]
+      .normalize('NFD')
+      .replace(/\p{Diacritic}/gu, '')
+    return firstLetterWithoutAccent
+  }
+
+  return t('empty')
+}
+
 /**
  * @typedef {Object.<string, Object>} CategorizedContactsResult
  */
 
 /**
  * Categorize contacts by first letter of last name
+ * Expl.: all contacts with A as first letter will be in A category
  * @param {object[]} contacts io.cozy.contacts documents
  * @param {function} t translation function
- * @returns {CategorizedContactsResult}
+ * @returns {CategorizedContactsResult} Categorized contacts
  */
 export const categorizeContacts = (contacts, t) =>
   contacts.reduce((acc, contact) => {
@@ -81,3 +107,26 @@ export const sortHeaders = (categorized, t) => {
 
   return headersSorted.concat(notEmptyAndMyselfSorted)
 }
+
+/**
+ * Counts how many contacts are categorized by first letter and store it in `groupCounts`
+ * Expl.: if there is 3 contacts in A and 2 in B, it will return [3,2]
+ * Also store first letters and store them in `groupLabels`
+ * @param {array} contacts - Array of io.cozy.contact documents
+ * @returns {object}
+ */
+export const makeGroupLabelsAndCounts = (contacts, t) => {
+  return contacts.reduce(
+    (acc, contact) => {
+      const header = makeHeaderForIndexedContacts(contact, t)
+      if (!acc.groupLabels.includes(header)) {
+        acc.groupLabels.push(header)
+      }
+      const idx = acc.groupLabels.indexOf(header)
+      const val = acc.groupCounts[idx] || 0
+      acc.groupCounts[idx] = val + 1
+      return acc
+    },
+    { groupLabels: [], groupCounts: [] }
+  )
+}

package/react/ContactsList/helpers.spec.js

@@ -1,4 +1,11 @@
-import { sortLastNameFirst, sortHeaders } from './helpers'
+import {
+  sortLastNameFirst,
+  sortHeaders,
+  makeGroupLabelsAndCounts
+} from './helpers'
+
+const t = x => x
+
 describe('Sort contacts', () => {
   describe('By Last Name', () => {
     it('should sort contact by last name', () => {
@@ -99,3 +106,45 @@ describe('sortHeaders', () => {
     expect(sortedHeaders).toEqual(['me', 'empty', 'B', 'F', 'H'])
   })
 })
+
+describe('makeGroupLabelsAndCounts', () => {
+  it('should returns labels and counts', () => {
+    const contacts = [
+      { name: 'Alex', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'A' } },
+      { name: 'Alan', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'A' } },
+      { name: 'Cleo', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Cloé', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Clotilde', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Constant', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      {
+        name: 'Christophe',
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' }
+      },
+      { name: 'Bernard', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'B' } },
+      { name: 'Baptiste', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'B' } },
+      { name: 'Xavier', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'X' } },
+      { name: 'Zorro', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'Z' } },
+      { name: '', indexes: { byFamilyNameGivenNameEmailCozyUrl: '' } },
+      { name: {}, indexes: { byFamilyNameGivenNameEmailCozyUrl: {} } },
+      { name: 'John', indexes: { byFamilyNameGivenNameEmailCozyUrl: null } },
+      {
+        name: 'Connor',
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: undefined }
+      },
+      { name: 'Àlbert', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'À' } },
+      {
+        name: 'Alice',
+        me: true,
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: 'Alice' }
+      },
+      { name: 'Èllen', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'È' } }
+    ]
+
+    const res = makeGroupLabelsAndCounts(contacts, t)
+
+    expect(res).toStrictEqual({
+      groupLabels: ['A', 'C', 'B', 'X', 'Z', 'empty', 'me', 'E'],
+      groupCounts: [3, 5, 2, 1, 1, 4, 1, 1]
+    })
+  })
+})

package/react/ContactsList/locales/en.json

@@ -1,4 +1,6 @@
 {
   "empty": "EMPTY",
-  "me": "ME"
+  "me": "me",
+  "favorite": "favorites",
+  "menu": "Menu"
 }

package/react/ContactsList/locales/fr.json

@@ -1,4 +1,6 @@
 {
   "empty": "VIDE",
-  "me": "MOI"
+  "me": "moi",
+  "favorite": "favoris",
+  "menu": "Menu"
 }

package/react/GridList/Virtualized/Dnd/index.jsx

@@ -41,13 +41,13 @@ const VirtualizedGridListDnd = ({
               <div {...scrollerProps} ref={ref} />
             </DnDConfigWrapper>
           )),
-          Item: ({ context, children, ...props }) => {
+          Item: ({ context, ...props }) => {
             const item = context?.items?.[props['data-index']]
             return (
               <GridItem
                 item={item}
                 context={context}
-                renderItem={() => <>{children}</>}
+                renderItem={itemRenderer}
                 {...componentProps.Item}
               />
             )
@@ -55,7 +55,6 @@ const VirtualizedGridListDnd = ({
           ...components
         }}
         context={_context}
-        itemRenderer={itemRenderer}
         {...props}
       >
         {children}

package/react/GridList/Virtualized/index.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { VirtuosoGrid } from 'react-virtuoso'
 
 const VirtualizedGridList = forwardRef(
-  ({ items = [], itemRenderer, components, context, ...props }, ref) => {
+  ({ items = [], components, context, ...props }, ref) => {
     return (
       <VirtuosoGrid
         ref={ref}
@@ -10,7 +10,6 @@ const VirtualizedGridList = forwardRef(
         context={context}
         style={{ height: '100%' }}
         totalCount={items.length}
-        itemContent={index => itemRenderer(items[index])}
         {...props}
       />
     )

package/react/providers/Selection/Readme.md

@@ -0,0 +1,28 @@
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import SelectionProvider, { useSelection } from 'cozy-ui/transpiled/react/providers/Selection'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
+
+const Component = () => {
+  const { selectedItemsId, addSelectedItem, removeSelectedItem } = useSelection()
+
+  return (
+    <>
+      <Typography>selectedItemsId : {JSON.stringify(selectedItemsId)}</Typography>
+      <Button label="Add Item" onClick={() => addSelectedItem({ _id: '01' })} />
+      <Button label="Remove Item" onClick={() => removeSelectedItem({ _id: '01' })} />
+  </>
+  )
+}
+
+;
+
+<DemoProvider>
+  <SelectionProvider>
+    <Component />
+  </SelectionProvider>
+</DemoProvider>
+```

package/react/providers/Selection/index.jsx

@@ -0,0 +1,85 @@
+import isEqual from 'lodash/isEqual'
+import React, { createContext, useContext, useState } from 'react'
+
+const SelectionContext = createContext()
+
+export const useSelection = () => {
+  const context = useContext(SelectionContext)
+
+  if (!context) {
+    throw new Error('useSelection must be used within a SelectionProvider')
+  }
+  return context
+}
+
+/**
+ * This provider allows you to manage item selection
+ */
+const SelectionProvider = ({ children }) => {
+  const [selectedItemsId, setSelectedItemsId] = useState([])
+
+  const isSelectedItem = item => {
+    return selectedItemsId.some(selectedItemId => selectedItemId === item._id)
+  }
+
+  const isSelectionEnabled = selectedItemsId.length > 0
+
+  const addSelectedItem = item => {
+    setSelectedItemsId(prev => [...prev, item._id])
+  }
+
+  const removeSelectedItem = item => {
+    setSelectedItemsId(prev => prev.filter(el => el !== item._id))
+  }
+
+  const toggleSelectedItem = item => {
+    if (isSelectedItem(item)) {
+      removeSelectedItem(item)
+    } else {
+      addSelectedItem(item)
+    }
+  }
+
+  const selectAll = items => {
+    const ids = items.map(item => item._id)
+    setSelectedItemsId(ids)
+  }
+
+  const unselectAll = () => {
+    setSelectedItemsId([])
+  }
+
+  const isSelectedAllItems = items => {
+    const a = selectedItemsId.sort()
+    const b = items.map(item => item._id).sort()
+    return isEqual(a, b)
+  }
+
+  const toggleSelectAllItems = items => {
+    if (isSelectedAllItems(items)) {
+      unselectAll()
+    } else {
+      selectAll(items)
+    }
+  }
+
+  return (
+    <SelectionContext.Provider
+      value={{
+        selectedItemsId,
+        addSelectedItem,
+        removeSelectedItem,
+        toggleSelectedItem,
+        selectAll,
+        toggleSelectAllItems,
+        isSelectedItem,
+        isSelectionEnabled,
+        isSelectedAllItems
+      }}
+    >
+      {children}
+    </SelectionContext.Provider>
+  )
+}
+
+export default React.memo(SelectionProvider)

package/transpiled/react/ContactsList/ContactCell.d.ts

@@ -0,0 +1,8 @@
+declare var _default: React.MemoExoticComponent<({ row, column, cell, actions }: {
+    row: any;
+    column: any;
+    cell: any;
+    actions: any;
+}) => any>;
+export default _default;
+import React from "react";

package/transpiled/react/ContactsList/ContactCell.js

@@ -0,0 +1,68 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useRef, useState } from 'react';
+import ContactIdentity from "cozy-ui/transpiled/react/ContactsList/Contacts/ContactIdentity";
+import { locales } from "cozy-ui/transpiled/react/ContactsList/locales/withContactsListLocales";
+import ActionsMenu from "cozy-ui/transpiled/react/ActionsMenu";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import IconButton from "cozy-ui/transpiled/react/IconButton";
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
+import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var Cell = function Cell(_ref) {
+  var row = _ref.row,
+      column = _ref.column,
+      cell = _ref.cell,
+      actions = _ref.actions;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showActions = _useState2[0],
+      setShowActions = _useState2[1];
+
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var actionsRef = useRef();
+
+  if (column.id === 'fullname') {
+    return /*#__PURE__*/React.createElement(ContactIdentity, {
+      contact: row,
+      noWrapper: true
+    });
+  }
+
+  if (column.id === 'actions') {
+    if (!actions) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(IconButton, {
+      ref: actionsRef,
+      "arial-label": t('menu'),
+      onClick: function onClick() {
+        return setShowActions(true);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: DotsIcon
+    }))), showActions && /*#__PURE__*/React.createElement(ActionsMenu, {
+      open: true,
+      ref: actionsRef,
+      docs: [row],
+      actions: actions,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      onClose: function onClose() {
+        return setShowActions(false);
+      }
+    }));
+  }
+
+  return cell;
+};
+
+export default /*#__PURE__*/React.memo(Cell);

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

@@ -3,6 +3,7 @@ export function sortLastNameFirst(contact: any, comparedContact: any): any;
 export function sortContacts(contacts: any): any;
 export function categorizeContacts(contacts: object[], t: Function): CategorizedContactsResult;
 export function sortHeaders(categorized: CategorizedContactsResult, t: Function): string[];
+export function makeGroupLabelsAndCounts(contacts: array, t: any): object;
 export type CategorizedContactsResult = {
     [x: string]: Object;
 };

package/transpiled/react/ContactsList/helpers.js

@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 export function buildLastNameFirst(contact) {
   var givenName = contact.name && contact.name.givenName ? contact.name.givenName.toUpperCase() : '';
   var familyName = contact.name && contact.name.familyName ? contact.name.familyName.toUpperCase() : '';
@@ -28,15 +29,39 @@ var makeHeader = function makeHeader(contact, t) {
   var name = buildLastNameFirst(contact);
   return name[0] || t('empty');
 };
+/**
+ * Build header for a contact (first letter of indexes.byFamilyNameGivenNameEmailCozyUrl)
+ * @param {object} contact
+ * @param {function} t translation function
+ * @returns {string} header
+ */
+
+
+var makeHeaderForIndexedContacts = function makeHeaderForIndexedContacts(contact, t) {
+  var _contact$cozyMetadata;
+
+  if (contact.me) return t('me');
+  if ((_contact$cozyMetadata = contact.cozyMetadata) !== null && _contact$cozyMetadata !== void 0 && _contact$cozyMetadata.favorite) return t('favorite');
+  var index = get(contact, 'indexes.byFamilyNameGivenNameEmailCozyUrl', '');
+  var hasIndex = index !== null && index.length > 0;
+
+  if (hasIndex) {
+    var firstLetterWithoutAccent = index[0].normalize('NFD').replace(/(?:[\^`\xA8\xAF\xB4\xB7\xB8\u02B0-\u034E\u0350-\u0357\u035D-\u0362\u0374\u0375\u037A\u0384\u0385\u0483-\u0487\u0559\u0591-\u05A1\u05A3-\u05BD\u05BF\u05C1\u05C2\u05C4\u064B-\u0652\u0657\u0658\u06DF\u06E0\u06E5\u06E6\u06EA-\u06EC\u0730-\u074A\u07A6-\u07B0\u07EB-\u07F5\u0818\u0819\u0898-\u089F\u08C9-\u08D2\u08E3-\u08FE\u093C\u094D\u0951-\u0954\u0971\u09BC\u09CD\u0A3C\u0A4D\u0ABC\u0ACD\u0AFD-\u0AFF\u0B3C\u0B4D\u0B55\u0BCD\u0C3C\u0C4D\u0CBC\u0CCD\u0D3B\u0D3C\u0D4D\u0DCA\u0E47-\u0E4C\u0E4E\u0EBA\u0EC8-\u0ECC\u0F18\u0F19\u0F35\u0F37\u0F39\u0F3E\u0F3F\u0F82-\u0F84\u0F86\u0F87\u0FC6\u1037\u1039\u103A\u1063\u1064\u1069-\u106D\u1087-\u108D\u108F\u109A\u109B\u135D-\u135F\u1714\u1715\u17C9-\u17D3\u17DD\u1939-\u193B\u1A75-\u1A7C\u1A7F\u1AB0-\u1ABE\u1AC1-\u1ACB\u1B34\u1B44\u1B6B-\u1B73\u1BAA\u1BAB\u1C36\u1C37\u1C78-\u1C7D\u1CD0-\u1CE8\u1CED\u1CF4\u1CF7-\u1CF9\u1D2C-\u1D6A\u1DC4-\u1DCF\u1DF5-\u1DFF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD\u1FFE\u2CEF-\u2CF1\u2E2F\u302A-\u302F\u3099-\u309C\u30FC\uA66F\uA67C\uA67D\uA67F\uA69C\uA69D\uA6F0\uA6F1\uA700-\uA721\uA788-\uA78A\uA7F8\uA7F9\uA8C4\uA8E0-\uA8F1\uA92B-\uA92E\uA953\uA9B3\uA9C0\uA9E5\uAA7B-\uAA7D\uAABF-\uAAC2\uAAF6\uAB5B-\uAB5F\uAB69-\uAB6B\uABEC\uABED\uFB1E\uFE20-\uFE2F\uFF3E\uFF40\uFF70\uFF9E\uFF9F\uFFE3]|\uD800\uDEE0|\uD801[\uDF80-\uDF85\uDF87-\uDFB0\uDFB2-\uDFBA]|\uD802[\uDEE5\uDEE6]|\uD803[\uDD22-\uDD27\uDF46-\uDF50\uDF82-\uDF85]|\uD804[\uDC46\uDC70\uDCB9\uDCBA\uDD33\uDD34\uDD73\uDDC0\uDDCA-\uDDCC\uDE35\uDE36\uDEE9\uDEEA\uDF3C\uDF4D\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC42\uDC46\uDCC2\uDCC3\uDDBF\uDDC0\uDE3F\uDEB6\uDEB7\uDF2B]|\uD806[\uDC39\uDC3A\uDD3D\uDD3E\uDD43\uDDE0\uDE34\uDE47\uDE99]|\uD807[\uDC3F\uDD42\uDD44\uDD45\uDD97]|\uD81A[\uDEF0-\uDEF4\uDF30-\uDF36]|\uD81B[\uDF8F-\uDF9F\uDFF0\uDFF1]|\uD82B[\uDFF0-\uDFF3\uDFF5-\uDFFB\uDFFD\uDFFE]|\uD833[\uDF00-\uDF2D\uDF30-\uDF46]|\uD834[\uDD67-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD]|\uD838[\uDD30-\uDD36\uDEAE\uDEEC-\uDEEF]|\uD83A[\uDCD0-\uDCD6\uDD44-\uDD46\uDD48-\uDD4A])/g, '');
+    return firstLetterWithoutAccent;
+  }
+
+  return t('empty');
+};
 /**
  * @typedef {Object.<string, Object>} CategorizedContactsResult
  */
 
 /**
  * Categorize contacts by first letter of last name
+ * Expl.: all contacts with A as first letter will be in A category
  * @param {object[]} contacts io.cozy.contacts documents
  * @param {function} t translation function
- * @returns {CategorizedContactsResult}
+ * @returns {CategorizedContactsResult} Categorized contacts
  */
 
 
@@ -77,4 +102,29 @@ export var sortHeaders = function sortHeaders(categorized, t) {
   }
 
   return headersSorted.concat(notEmptyAndMyselfSorted);
+};
+/**
+ * Counts how many contacts are categorized by first letter and store it in `groupCounts`
+ * Expl.: if there is 3 contacts in A and 2 in B, it will return [3,2]
+ * Also store first letters and store them in `groupLabels`
+ * @param {array} contacts - Array of io.cozy.contact documents
+ * @returns {object}
+ */
+
+export var makeGroupLabelsAndCounts = function makeGroupLabelsAndCounts(contacts, t) {
+  return contacts.reduce(function (acc, contact) {
+    var header = makeHeaderForIndexedContacts(contact, t);
+
+    if (!acc.groupLabels.includes(header)) {
+      acc.groupLabels.push(header);
+    }
+
+    var idx = acc.groupLabels.indexOf(header);
+    var val = acc.groupCounts[idx] || 0;
+    acc.groupCounts[idx] = val + 1;
+    return acc;
+  }, {
+    groupLabels: [],
+    groupCounts: []
+  });
 };

package/transpiled/react/ContactsList/locales/withContactsListLocales.js

@@ -1,10 +1,14 @@
 var en = {
   empty: "EMPTY",
-  me: "ME"
+  me: "me",
+  favorite: "favorites",
+  menu: "Menu"
 };
 var fr = {
   empty: "VIDE",
-  me: "MOI"
+  me: "moi",
+  favorite: "favoris",
+  menu: "Menu"
 };
 import withOnlyLocales from "cozy-ui/transpiled/react/providers/I18n/withOnlyLocales";
 export var locales = {

package/transpiled/react/GridList/Virtualized/Dnd/index.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["dragProps", "context", "itemRenderer", "children", "componentProps", "components"],
-    _excluded2 = ["context", "children"];
+    _excluded2 = ["context"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -60,21 +60,17 @@ var VirtualizedGridListDnd = function VirtualizedGridListDnd(_ref) {
         var _context$items;
 
         var context = _ref3.context,
-            children = _ref3.children,
             props = _objectWithoutProperties(_ref3, _excluded2);
 
         var item = context === null || context === void 0 ? void 0 : (_context$items = context.items) === null || _context$items === void 0 ? void 0 : _context$items[props['data-index']];
         return /*#__PURE__*/React.createElement(GridItem, _extends({
           item: item,
           context: context,
-          renderItem: function renderItem() {
-            return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-          }
+          renderItem: itemRenderer
         }, componentProps.Item));
       }
     }, components),
-    context: _context,
-    itemRenderer: itemRenderer
+    context: _context
   }, props), children));
 };
 

package/transpiled/react/GridList/Virtualized/index.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["items", "itemRenderer", "components", "context"];
+var _excluded = ["items", "components", "context"];
 import React, { forwardRef } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
 var VirtualizedGridList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
-      itemRenderer = _ref.itemRenderer,
       components = _ref.components,
       context = _ref.context,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -18,10 +17,7 @@ var VirtualizedGridList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: {
       height: '100%'
     },
-    totalCount: items.length,
-    itemContent: function itemContent(index) {
-      return itemRenderer(items[index]);
-    }
+    totalCount: items.length
   }, props));
 });
 VirtualizedGridList.displayName = 'VirtualizedGridList';

package/transpiled/react/providers/Selection/index.d.ts

@@ -0,0 +1,6 @@
+export function useSelection(): any;
+declare var _default: React.MemoExoticComponent<({ children }: {
+    children: any;
+}) => JSX.Element>;
+export default _default;
+import React from "react";

package/transpiled/react/providers/Selection/index.js

@@ -0,0 +1,99 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import isEqual from 'lodash/isEqual';
+import React, { createContext, useContext, useState } from 'react';
+var SelectionContext = /*#__PURE__*/createContext();
+export var useSelection = function useSelection() {
+  var context = useContext(SelectionContext);
+
+  if (!context) {
+    throw new Error('useSelection must be used within a SelectionProvider');
+  }
+
+  return context;
+};
+/**
+ * This provider allows you to manage item selection
+ */
+
+var SelectionProvider = function SelectionProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedItemsId = _useState2[0],
+      setSelectedItemsId = _useState2[1];
+
+  var isSelectedItem = function isSelectedItem(item) {
+    return selectedItemsId.some(function (selectedItemId) {
+      return selectedItemId === item._id;
+    });
+  };
+
+  var isSelectionEnabled = selectedItemsId.length > 0;
+
+  var addSelectedItem = function addSelectedItem(item) {
+    setSelectedItemsId(function (prev) {
+      return [].concat(_toConsumableArray(prev), [item._id]);
+    });
+  };
+
+  var removeSelectedItem = function removeSelectedItem(item) {
+    setSelectedItemsId(function (prev) {
+      return prev.filter(function (el) {
+        return el !== item._id;
+      });
+    });
+  };
+
+  var toggleSelectedItem = function toggleSelectedItem(item) {
+    if (isSelectedItem(item)) {
+      removeSelectedItem(item);
+    } else {
+      addSelectedItem(item);
+    }
+  };
+
+  var selectAll = function selectAll(items) {
+    var ids = items.map(function (item) {
+      return item._id;
+    });
+    setSelectedItemsId(ids);
+  };
+
+  var unselectAll = function unselectAll() {
+    setSelectedItemsId([]);
+  };
+
+  var isSelectedAllItems = function isSelectedAllItems(items) {
+    var a = selectedItemsId.sort();
+    var b = items.map(function (item) {
+      return item._id;
+    }).sort();
+    return isEqual(a, b);
+  };
+
+  var toggleSelectAllItems = function toggleSelectAllItems(items) {
+    if (isSelectedAllItems(items)) {
+      unselectAll();
+    } else {
+      selectAll(items);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(SelectionContext.Provider, {
+    value: {
+      selectedItemsId: selectedItemsId,
+      addSelectedItem: addSelectedItem,
+      removeSelectedItem: removeSelectedItem,
+      toggleSelectedItem: toggleSelectedItem,
+      selectAll: selectAll,
+      toggleSelectAllItems: toggleSelectAllItems,
+      isSelectedItem: isSelectedItem,
+      isSelectionEnabled: isSelectionEnabled,
+      isSelectedAllItems: isSelectedAllItems
+    }
+  }, children);
+};
+
+export default /*#__PURE__*/React.memo(SelectionProvider);