cozy-ui 126.6.0 → 127.0.0

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+# [127.0.0](https://github.com/cozy/cozy-ui/compare/v126.6.0...v127.0.0) (2025-06-26)
+
+
+### Bug Fixes
+
+* **Checkbox:** Small size wasn't handle correctly ([38d8923](https://github.com/cozy/cozy-ui/commit/38d8923))
+* **ContactIdentity:** Now show `me` correctly ([f009f34](https://github.com/cozy/cozy-ui/commit/f009f34))
+* **ContactName:** Remove ` ` if not needed ([88834d9](https://github.com/cozy/cozy-ui/commit/88834d9))
+* **ContactName:** Remove bottom gutter ([f37aed8](https://github.com/cozy/cozy-ui/commit/f37aed8))
+* **ContactRow:** Remove required on `onClick` fn ([663816d](https://github.com/cozy/cozy-ui/commit/663816d))
+* **VirtualizedTable:** Avoid spreading context object to DOM ([5a0637b](https://github.com/cozy/cozy-ui/commit/5a0637b))
+* **VirtualizedTable:** Rename props spread to FixedHeaderContent and RowContent ([d6f7f4a](https://github.com/cozy/cozy-ui/commit/d6f7f4a))
+
+
+### Features
+
+* **Avatar:** Add `display` prop to control display type ([9d5c1c6](https://github.com/cozy/cozy-ui/commit/9d5c1c6))
+* **Checkbox:** Adjust small size style and add `disableEffect` prop ([8578d3d](https://github.com/cozy/cozy-ui/commit/8578d3d))
+* **ContactIdentity:** Add `noWrapper` to avoid using embedded TableCell ([787bd91](https://github.com/cozy/cozy-ui/commit/787bd91))
+* **ContactIdentity:** Now use `contact` as prop ([ea76949](https://github.com/cozy/cozy-ui/commit/ea76949))
+* **ContactIdentity:** Replace legacy avatar by actual one ([cd2c855](https://github.com/cozy/cozy-ui/commit/cd2c855))
+* Expose all Mui utililties helpers ([b82fd81](https://github.com/cozy/cozy-ui/commit/b82fd81))
+* **Table:** Add min-height on body cells (2rem) ([c4aed50](https://github.com/cozy/cozy-ui/commit/c4aed50))
+* **TableContainer:** Force elevation, using Paper and set z-index ([b5bf6d2](https://github.com/cozy/cozy-ui/commit/b5bf6d2))
+* **VirtualizedTable:** Add possibility to spread onClick fn on cells ([4e2d7bf](https://github.com/cozy/cozy-ui/commit/4e2d7bf))
+* **VirtualizedTable:** Can now sort on deep object attribute ([ade4c3d](https://github.com/cozy/cozy-ui/commit/ade4c3d))
+* **VirtualizedTable:** Extact dragndrop feature into separate component ([e78ec95](https://github.com/cozy/cozy-ui/commit/e78ec95))
+* **VirtualizedTable:** Extract Dnd props to isolate dnd feature ([1f2e3b1](https://github.com/cozy/cozy-ui/commit/1f2e3b1))
+* **VirtualizedTable:** Fill empty cell with simple dash ([501a815](https://github.com/cozy/cozy-ui/commit/501a815))
+* **VirtualizedTable:** Hide checkbox by default (shown on hover only) ([480f7d2](https://github.com/cozy/cozy-ui/commit/480f7d2))
+* **VirtualizedTable:** Use small checkbox and remove header hover effect ([7f71bd9](https://github.com/cozy/cozy-ui/commit/7f71bd9))
+
+
+### BREAKING CHANGES
+
+* **ContactIdentity:** When using `cozy-ui/transpiled/react/ContactsList/Contacts/ContactName` you have to pass a `contact` as prop and no longer `displayName` and `familyName`
+* **VirtualizedTable:** When using `cozy-ui/transpiled/react/table/virtualized` you must replace `componentsProps.FixedHeaderContent` by `componentsProps.fixedHeaderContent` and `componentsProps.RowContent` by `componentsProps.rowContent`
+* **VirtualizedTable:** If you used dragndrop in virtualized table, you now need to import table from elsewhere. Replace `cozy-ui/transpiled/react/Table/Virtualized` by `cozy-ui/transpiled/react/Table/Virtualized/Dnd`
+
 # [126.6.0](https://github.com/cozy/cozy-ui/compare/v126.5.0...v126.6.0) (2025-06-26)
 
 

package/package.json

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

package/react/Avatar/index.jsx

@@ -5,6 +5,7 @@ import React from 'react'
 
 import { colorMapping, supportedColors, nameToColor } from './helpers'
 import { makeStyles } from '../styles'
+import { capitalize } from '../utils/index'
 
 const useStyles = makeStyles(theme => ({
   colorDefault: {
@@ -20,6 +21,7 @@ const Avatar = ({
   border,
   innerBorder,
   disabled,
+  display,
   ...props
 }) => {
   const defaultColor =
@@ -39,6 +41,7 @@ const Avatar = ({
       className={cx(className, `size-${size}`, {
         disabled: !!disabled,
         border: !!border,
+        [`display${capitalize(display)}`]: display !== 'initial',
         innerBorder: !!innerBorder
       })}
       {...props}
@@ -53,10 +56,13 @@ Avatar.propTypes = {
     PropTypes.number
   ]),
   color: PropTypes.oneOf([...supportedColors, 'none']),
+  /** Controls the display type */
+  display: PropTypes.oneOf(['initial', 'inline']),
   disabled: PropTypes.bool
 }
 
 Avatar.defaultProps = {
+  display: 'initial',
   size: 'm'
 }
 

package/react/Checkbox/Readme.md

@@ -10,27 +10,39 @@ import Grid from 'cozy-ui/transpiled/react/Grid'
   <Grid container>
     <Grid item xs={6} sm={3}>
       <div><Checkbox label="Checkbox" /></div>
+      <div><Checkbox label="Small Checked" size="small" /></div>
       <div><Checkbox label="Checked checkbox" checked /></div>
       <div><Checkbox label="Mixed checkbox" mixed /></div>
       <div><Checkbox label="Mixed checked checkbox" checked mixed /></div>
+      <div><Checkbox label="No effect" disableEffect /></div>
+      <div><Checkbox label="Small no effect" size="small" disableEffect /></div>
     </Grid>
     <Grid item xs={6} sm={3}>
       <div><Checkbox label="Disabled checkbox" disabled /></div>
+      <div><Checkbox label="Small disabled checkbox" size="small" disabled /></div>
       <div><Checkbox label="Disabled checked checkbox" checked disabled /></div>
       <div><Checkbox label="Disabled mixed checkbox" mixed disabled /></div>
       <div><Checkbox label="Disabled mixed checked checkbox" checked mixed disabled /></div>
+      <div><Checkbox label="Disabled no effect" disableEffect disabled /></div>
+      <div><Checkbox label="Small disabled no effect" size="small" disableEffect disabled /></div>
     </Grid>
     <Grid item xs={6} sm={3}>
       <div><Checkbox label="Error checkbox" error /></div>
+      <div><Checkbox label="Small error checkbox" size="small" error /></div>
       <div><Checkbox label="Error checked checkbox" error checked /></div>
       <div><Checkbox label="Error mixed checkbox" error mixed /></div>
       <div><Checkbox label="Error mixed checked checkbox" error checked mixed /></div>
+      <div><Checkbox label="Error no effect" error disableEffect /></div>
+      <div><Checkbox label="Small error no effect" size="small" error disableEffect /></div>
     </Grid>
     <Grid item xs={6} sm={3}>
       <div><Checkbox label="Error disabled checkbox" error disabled /></div>
+      <div><Checkbox label="Small error disabled checkbox" size="small" error disabled /></div>
       <div><Checkbox label="Error disabled checked checkbox" error checked disabled /></div>
       <div><Checkbox label="Error disabled mixed checkbox" error mixed disabled /></div>
       <div><Checkbox label="Error disabled mixed checked checkbox" error checked mixed disabled /></div>
+      <div><Checkbox label="Error disabled no effect" error disableEffect disabled /></div>
+      <div><Checkbox label="Small error disabled no effect" size="small" error disableEffect disabled /></div>
     </Grid>
   </Grid>
 </>

package/react/Checkbox/index.jsx

@@ -10,9 +10,22 @@ import createDepreciationLogger from '../helpers/createDepreciationLogger'
 
 const logDepecratedCheckbox = createDepreciationLogger()
 
-const DefaultCheckbox = ({ label, error, mixed, disabled, ...props }) => {
+const DefaultCheckbox = ({
+  className,
+  label,
+  error,
+  mixed,
+  disabled,
+  size,
+  disableEffect,
+  ...props
+}) => {
   return (
     <MUICheckbox
+      className={cx(className, {
+        ['u-p-0']: disableEffect,
+        small: size === 'small'
+      })}
       inputProps={{
         'aria-label': label,
         'aria-checked': mixed ? 'mixed' : '',
@@ -21,12 +34,17 @@ const DefaultCheckbox = ({ label, error, mixed, disabled, ...props }) => {
       color={error ? 'secondary' : 'primary'}
       indeterminate={mixed}
       disabled={disabled}
+      size={size}
+      disableRipple={disableEffect}
       checkedIcon={
         <div
           className="u-flex u-flex-items-center u-flex-justify-center"
-          style={{ width: 24, height: 24 }}
+          style={{
+            width: size === 'small' ? 20 : 24,
+            height: size === 'small' ? 20 : 24
+          }}
         >
-          <Icon icon={CheckSquareIcon} size={18} />
+          <Icon icon={CheckSquareIcon} size={size === 'small' ? 16 : 18} />
         </div>
       }
       {...props}
@@ -73,6 +91,8 @@ Checkbox.propTypes = {
   error: PropTypes.bool,
   disabled: PropTypes.bool,
   mixed: PropTypes.bool,
+  disableEffect: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium']),
   label: PropTypes.string
 }
 
@@ -81,6 +101,8 @@ Checkbox.defaultProps = {
   value: '',
   error: false,
   mixed: false,
+  disableEffect: false,
+  size: 'medium',
   label: ''
 }
 

package/react/ContactsList/ContactRow.jsx

@@ -26,7 +26,7 @@ const ContactRow = ({ className, contact, onClick, divider, ...rest }) => {
       className={cx({ 'u-c-pointer': onClick }, className)}
       divider={divider}
       gutters={isDesktop ? 'double' : 'default'}
-      onClick={() => onClick(contact)}
+      onClick={() => onClick?.(contact)}
       {...rest}
     >
       <ContactIdentity contact={contact} />

package/react/ContactsList/Contacts/ContactIdentity.jsx

@@ -1,38 +1,57 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { models } from 'cozy-client'
+import { getInitials } from 'cozy-client/dist/models/contact'
 
 import ContactName from './ContactName'
+import Avatar from '../../Avatar'
 import { TableCell } from '../../deprecated/Table'
-import { Avatar } from '../../legacy/Avatar'
+import { useI18n, useExtendI18n } from '../../providers/I18n'
+import { locales } from '../locales/withContactsListLocales'
 import styles from '../styles.styl'
 
-const { getDisplayName, getInitials } = models.contact
+const MyselfMarker = () => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
 
-const MyselfMarker = (props, { t }) => (
-  <span className={`${styles['contact-myself']}`}>({t('me')})</span>
-)
+  return <span className={`${styles['contact-myself']}`}>({t('me')})</span>
+}
 
 const ContactIdentity = ({ contact }) => {
-  const name = contact.name || {}
-  const displayName = getDisplayName(contact) || undefined
-  const isMyself = contact.metadata ? !!contact.metadata.me : false
+  const isMyself = !!contact.me
+
+  return (
+    <>
+      <Avatar display="inline" size="s">
+        {getInitials(contact)}
+      </Avatar>
+      <ContactName contact={contact} />
+      {isMyself && <MyselfMarker />}
+    </>
+  )
+}
+
+ContactIdentity.propTypes = {
+  contact: PropTypes.object.isRequired
+}
+
+const ContactIdentityWrapper = ({ noWrapper, ...props }) => {
+  if (noWrapper) {
+    return <ContactIdentity {...props} />
+  }
 
   return (
     <TableCell
       data-testid="ContactIdentity" // used by a test in cozy-contacts
       className={`${styles['contact-identity']} u-flex u-flex-items-center u-ellipsis u-p-0`}
     >
-      <Avatar text={getInitials(contact)} size="small" />
-      <ContactName displayName={displayName} familyName={name.familyName} />
-      {isMyself && <MyselfMarker />}
+      <ContactIdentity {...props} />
     </TableCell>
   )
 }
 
-ContactIdentity.propTypes = {
-  contact: PropTypes.object.isRequired
+ContactIdentityWrapper.defaultProps = {
+  noWrapper: false
 }
 
-export default ContactIdentity
+export default ContactIdentityWrapper

package/react/ContactsList/Contacts/ContactName.jsx

@@ -2,39 +2,43 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import { getDisplayName } from 'cozy-client/dist/models/contact'
+
 import Typography from '../../Typography'
 
-const ContactName = ({ displayName, familyName }) => {
-  const namesToDisplay = (displayName && displayName.split(' ')) || []
+const ContactName = ({ contact }) => {
+  const familyName = contact.name?.familyName
+  const displayName = getDisplayName(contact)
+  const namesToDisplay = displayName?.split(' ')
 
   return (
     <Typography
       data-testid="ContactName" // used by a test in cozy-contacts
       className="u-ml-1"
-      variant="body1"
       noWrap
-      gutterBottom
       display="inline"
     >
-      {namesToDisplay.map((name, key) => (
-        <span
-          key={`display-${key}`}
-          className={cx({ 'u-fw-bold': name === familyName })}
-        >
-          {name}
-          &nbsp;
-        </span>
-      ))}
+      {namesToDisplay?.map((name, index) => {
+        const isLastItem = index === namesToDisplay.length - 1
+
+        return (
+          <span
+            key={`display-${index}`}
+            className={cx({
+              'u-fw-bold': name === familyName
+            })}
+          >
+            {name}
+            {!isLastItem && <>&nbsp;</>}
+          </span>
+        )
+      })}
     </Typography>
   )
 }
 
 ContactName.propTypes = {
-  displayName: PropTypes.string,
-  familyName: PropTypes.string
-}
-ContactName.defaultProps = {
-  displayName: ''
+  contact: PropTypes.object.isRequired
 }
 
 export default ContactName

package/react/ContactsList/locales/withContactsListLocales.jsx

@@ -2,7 +2,7 @@ import en from './en.json'
 import fr from './fr.json'
 import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
-const locales = {
+export const locales = {
   en,
   fr
 }

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -508,7 +508,23 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiTableHead: {
     root: {
-      backgroundColor: theme.palette.background.paper
+      backgroundColor: theme.palette.background.paper,
+      '&.virtualized': {
+        '& .virtualizedCheckbox': {
+          opacity: 0,
+          '&.checked': {
+            opacity: 1
+          },
+          '&:hover': {
+            opacity: 1
+          }
+        },
+        '&:hover': {
+          '& .virtualizedCheckbox': {
+            opacity: 0.5
+          }
+        }
+      }
     }
   },
   MuiTableRow: {
@@ -517,6 +533,25 @@ export const makeLightNormalOverrides = theme => ({
         cursor: 'pointer',
         pointerEvents: 'none',
         opacity: 0.5
+      },
+      '&.virtualized': {
+        '& .virtualizedCheckbox': {
+          opacity: 0,
+          '&.visible': {
+            opacity: 0.5
+          },
+          '&.checked': {
+            opacity: 1
+          },
+          '&:hover': {
+            opacity: 1
+          }
+        },
+        '&:hover': {
+          '& .virtualizedCheckbox': {
+            opacity: 0.5
+          }
+        }
       }
     }
   },
@@ -531,22 +566,11 @@ export const makeLightNormalOverrides = theme => ({
     },
     body: {
       color: theme.palette.text.secondary,
-      '&.sortable': {
-        '&$paddingNone': {
-          '&$alignLeft': {
-            paddingLeft: '12px'
-          },
-          '&$alignRight': {
-            paddingRight: '12px'
-          }
-        },
-        '&$alignLeft': {
-          paddingLeft: '16px'
-        },
-        '&$alignRight': {
-          paddingRight: '16px'
-        }
-      }
+      height: '2rem'
+    },
+    paddingCheckbox: {
+      width: 32,
+      padding: 0
     },
     stickyHeader: {
       backgroundColor: theme.palette.background.paper
@@ -554,13 +578,8 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiTableSortLabel: {
     root: {
-      padding: '8px 12px',
-      color: theme.palette.text.secondary,
-      '&:hover': {
-        color: theme.palette.text.primary,
-        borderRadius: 999,
-        backgroundColor: theme.palette.action.hover
-      }
+      padding: '8px 0',
+      color: theme.palette.text.secondary
     },
     icon: {
       fontSize: 14
@@ -838,6 +857,9 @@ export const makeLightNormalOverrides = theme => ({
           opacity: 0.5
         }
       },
+      '&.displayInline': {
+        display: 'inline-flex'
+      },
       '&.border': {
         border: `2px solid ${theme.palette.background.paper}`
       },
@@ -852,7 +874,10 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiCheckbox: {
     root: {
-      padding: 8
+      padding: 8,
+      '&.small': {
+        padding: 6
+      }
     },
     colorSecondary: {
       '&$checked': {

package/react/Table/Readme.md

@@ -22,7 +22,7 @@ const rows = [
   createData(11, 'Nougat', 360, 19.0, 9, 37.0),
   createData(12, 'Oreo', 437, 18.0, 63, 4.0),
   createData(
-    6,
+    13,
     'Ice cream with a very long list of ingredient to see how the table can handle this kind of item, and this is the end',
     237,
     9.0,
@@ -68,6 +68,35 @@ const columns = [
   }
 ]
 
+initialState = { selectedItemsId: [] }
+
+const isSelectedItem = row => state.selectedItemsId.some(selectedItem => selectedItem === row.id)
+const addSelected = row => setState(prev => {
+    const arr = prev.selectedItemsId
+    arr.push(row.id)
+    return { selectedItemsId: arr }
+})
+const removeSelected = (row) => setState(prev => {
+    const arr = prev.selectedItemsId
+    arr.splice(arr.indexOf(row.id), 1)
+    return { selectedItemsId: arr }
+})
+const onSelect = row => {
+  if (isSelectedItem(row)) {
+    removeSelected(row)
+  } else {
+    addSelected(row)
+  }
+}
+const onSelectAll = rows => {
+  const ids = rows.map(row => row.id)
+  if (state.selectedItemsId.length === ids.length) {
+    setState({ selectedItemsId: [] })
+  } else {
+    setState({ selectedItemsId: ids })
+  }
+}
+
 ;
 
 <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
@@ -75,6 +104,15 @@ const columns = [
     rows={rows}
     columns={columns}
     defaultOrder={columns[0].id}
+    selectedItems={state.selectedItemsId}
+    isSelectedItem={row => isSelectedItem(row)}
+    onSelect={onSelect}
+    onSelectAll={onSelectAll}
+    componentsProps={{
+      rowContent: {
+        onClick: (row, column) => { console.info(`click on cell. Row ${row['id']}, Column ${column['id']}`) }
+      }
+    }}
   />
 </div>
 ```

package/react/Table/Virtualized/Cell.jsx

@@ -1,4 +1,4 @@
-import cx from 'classnames'
+import get from 'lodash/get'
 import React from 'react'
 
 import TableCell from '../../TableCell'
@@ -6,21 +6,23 @@ import { makeStyles } from '../../styles'
 
 const useStyles = makeStyles({
   root: {
+    cursor: ({ isClickable }) => (isClickable ? 'pointer' : undefined),
     width: ({ column }) => column.width,
     maxWidth: ({ column }) => column.maxWidth
   }
 })
 
-const Cell = ({ row, columns, column, children }) => {
-  const classes = useStyles({ column })
+const Cell = ({ row, columns, column, onClick, children }) => {
+  const classes = useStyles({ column, isClickable: !!onClick })
+  const cellContent = get(row, column.id, '—')
 
   return (
     <TableCell
       key={column.id}
       classes={classes}
-      className={cx({ sortable: column.sortable !== false })}
       align={column.textAlign ?? 'left'}
       padding={column.disablePadding ? 'none' : 'normal'}
+      onClick={() => onClick?.(row, column)}
     >
       {children
         ? React.Children.map(children, child =>
@@ -29,11 +31,11 @@ const Cell = ({ row, columns, column, children }) => {
                   row,
                   columns,
                   column,
-                  cell: row[column.id]
+                  cell: cellContent
                 })
               : null
           )
-        : row[column.id]}
+        : cellContent}
     </TableCell>
   )
 }

package/react/Table/Virtualized/Dnd/TableRow.jsx

@@ -4,14 +4,21 @@ import { getEmptyImage } from 'react-dnd-html5-backend'
 
 import TableRowClassic from '../../../TableRow'
 
-const TableRow = ({ item, context, selected, disabled, ...props }) => {
-  const { selectedItems, setItemsInDropProcess, dragProps } = context
+const TableRow = ({ item, context, ...props }) => {
+  const {
+    selectedItems,
+    itemsInDropProcess,
+    setItemsInDropProcess,
+    dragProps
+  } = context
   const {
     onDrop,
     canDrop: canDropProps,
     canDrag: canDragProps,
     dragId
   } = dragProps
+  const isSelected = context?.isSelectedItem(item)
+  const isDisabled = itemsInDropProcess.includes(item._id)
 
   const [dragCollect, dragRef, dragRefPreview] = useDrag(
     () => ({
@@ -33,7 +40,7 @@ const TableRow = ({ item, context, selected, disabled, ...props }) => {
         const defaultCanDrag = canDragProps?.(item) || true
         // if selectedItems is not empty, only the selected items can be dragged
         if (selectedItems.length > 0) {
-          return defaultCanDrag && selected
+          return defaultCanDrag && isSelected
         }
         return defaultCanDrag
       },
@@ -76,9 +83,10 @@ const TableRow = ({ item, context, selected, disabled, ...props }) => {
     <TableRowClassic
       {...props}
       ref={node => dragRef(dropRef(node))}
-      selected={selected || dropCollect.isOver}
-      className={dragCollect.isDragging ? 'u-o-50' : ''}
-      disabled={disabled}
+      selected={isSelected || dropCollect.isOver}
+      className={dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized'}
+      disabled={isDisabled}
+      hover
     />
   )
 }

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

@@ -0,0 +1,35 @@
+import React, { useState, useMemo } from 'react'
+
+import CustomDragLayer from './CustomDrag/CustomDragLayer'
+import virtuosoComponentsDnd from './virtuosoComponents'
+import VirtualizedTable from '../index'
+import virtuosoComponents from '../virtuosoComponents'
+
+const _components = { ...virtuosoComponents, ...virtuosoComponentsDnd }
+
+const VirtuosoTableDnd = ({ dragProps, context, components, ...props }) => {
+  const [itemsInDropProcess, setItemsInDropProcess] = useState([]) // array of Ids, for dragndrop feature
+
+  const _context = useMemo(
+    () => ({
+      ...context,
+      dragProps,
+      itemsInDropProcess,
+      setItemsInDropProcess
+    }),
+    [context, dragProps, itemsInDropProcess]
+  )
+
+  return (
+    <>
+      <CustomDragLayer dragId={dragProps.dragId} />
+      <VirtualizedTable
+        components={components || _components}
+        context={_context}
+        {...props}
+      />
+    </>
+  )
+}
+
+export default VirtuosoTableDnd