cozy-ui 123.2.1 → 124.1.0

package/react/Table/Readme.md

@@ -0,0 +1,80 @@
+### React-Virtuoso
+
+```jsx
+import VirtualizedTable from 'cozy-ui/transpiled/react/Table/Virtualized'
+
+const createData = (id, name, calories, fat, carbs, protein) => {
+  return { id, name, calories, fat, carbs, protein }
+}
+
+const rows = [
+  createData(0, 'Cupcake', 305, 3.7, 67, 4.3),
+  createData(1, 'Donut', 452, 25.0, 51, 4.9),
+  createData(2, 'Eclair', 262, 16.0, 24, 6.0),
+  createData(3, 'Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData(4, 'Gingerbread', 356, 16.0, 49, 3.9),
+  createData(5, 'Honeycomb', 408, 3.2, 87, 6.5),
+  createData(6, 'Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData(7, 'Jelly Bean', 375, 0.0, 94, 0.0),
+  createData(8, 'KitKat', 518, 26.0, 65, 7.0),
+  createData(9, 'Lollipop', 392, 0.2, 98, 0.0),
+  createData(10, 'Marshmallow', 318, 0, 81, 2.0),
+  createData(11, 'Nougat', 360, 19.0, 9, 37.0),
+  createData(12, 'Oreo', 437, 18.0, 63, 4.0),
+  createData(
+    6,
+    '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,
+    37,
+    4.3
+  )
+]
+
+const columns = [
+  {
+    id: 'name',
+    disablePadding: true,
+    label: 'Dessert'
+  },
+  {
+    id: 'calories',
+    disablePadding: false,
+    width: 80,
+    label: 'Calories',
+    textAlign: 'left',
+    sortable: false
+  },
+  {
+    id: 'fat',
+    disablePadding: false,
+    width: 85,
+    label: 'Fat (g)',
+    textAlign: 'right'
+  },
+  {
+    id: 'carbs',
+    disablePadding: false,
+    width: 115,
+    label: 'Carbs (g)',
+    textAlign: 'right'
+  },
+  {
+    id: 'protein',
+    disablePadding: false,
+    width: 115,
+    label: 'Protein (g)',
+    textAlign: 'right'
+  }
+]
+
+;
+
+<div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+  <VirtualizedTable
+    rows={rows}
+    columns={columns}
+    defaultOrder={columns[0].id}
+  />
+</div>
+```

package/react/Table/Virtualized/Cell.jsx

@@ -0,0 +1,41 @@
+import cx from 'classnames'
+import React from 'react'
+
+import TableCell from '../../TableCell'
+import { makeStyles } from '../../styles'
+
+const useStyles = makeStyles({
+  root: {
+    width: ({ column }) => column.width,
+    maxWidth: ({ column }) => column.maxWidth
+  }
+})
+
+const Cell = ({ row, columns, column, children }) => {
+  const classes = useStyles({ column })
+
+  return (
+    <TableCell
+      key={column.id}
+      classes={classes}
+      className={cx({ sortable: column.sortable !== false })}
+      align={column.textAlign ?? 'left'}
+      padding={column.disablePadding ? 'none' : 'normal'}
+    >
+      {children
+        ? React.Children.map(children, child =>
+            React.isValidElement(child)
+              ? React.cloneElement(child, {
+                  row,
+                  columns,
+                  column,
+                  cell: row[column.id]
+                })
+              : null
+          )
+        : row[column.id]}
+    </TableCell>
+  )
+}
+
+export default React.memo(Cell)

package/react/Table/Virtualized/Dnd/CustomDrag/CustomDragLayer.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { useDragLayer } from 'react-dnd'
+
+import DragPreviewWrapper from './DragPreviewWrapper'
+
+const layerStyles = {
+  position: 'fixed',
+  pointerEvents: 'none',
+  zIndex: 100,
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%'
+}
+
+// Example find in the official documentation
+// https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer
+export const CustomDragLayer = ({ dragId }) => {
+  const { itemType, isDragging, item, initialOffset, currentOffset } =
+    useDragLayer(monitor => ({
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging()
+    }))
+
+  if (!isDragging) {
+    return null
+  }
+
+  return (
+    <div style={layerStyles}>
+      <DragPreviewWrapper
+        item={item}
+        itemType={itemType}
+        dragId={dragId}
+        initialOffset={initialOffset}
+        currentOffset={currentOffset}
+      />
+    </div>
+  )
+}
+
+export default CustomDragLayer

package/react/Table/Virtualized/Dnd/CustomDrag/DragPreview.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import Badge from '../../../../Badge'
+import Paper from '../../../../Paper'
+import Typography from '../../../../Typography'
+import { makeStyles } from '../../../../styles'
+
+const useStyles = makeStyles({
+  root: {
+    width: 'fit-content'
+  }
+})
+
+const DragPreview = ({ fileName, selectedCount }) => {
+  const classes = useStyles()
+
+  return (
+    <>
+      {selectedCount > 1 ? (
+        <Badge
+          badgeContent={selectedCount}
+          size="large"
+          color="primary"
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right'
+          }}
+          overlap="rectangular"
+        >
+          <Paper classes={classes} className="u-p-half u-maw-5">
+            <Typography>{fileName}</Typography>
+          </Paper>
+        </Badge>
+      ) : (
+        <Paper classes={classes} className="u-p-half u-maw-5">
+          <Typography>{fileName}</Typography>
+        </Paper>
+      )}
+    </>
+  )
+}
+
+export default React.memo(DragPreview)

package/react/Table/Virtualized/Dnd/CustomDrag/DragPreviewWrapper.jsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react'
+
+import DragPreview from './DragPreview'
+
+const makeStyles = ({ x, y }) => {
+  if (!x || !y) {
+    return { display: 'none' }
+  }
+
+  const transform = `translate(${x}px, ${y}px)`
+
+  return {
+    transform,
+    WebkitTransform: transform
+  }
+}
+
+const DragPreviewWrapper = ({
+  item,
+  itemType,
+  dragId,
+  initialOffset,
+  currentOffset
+}) => {
+  const [mousePosition, setMousePosition] = useState({ x: null, y: null })
+
+  useEffect(() => {
+    const handleMouseMove = e => {
+      setMousePosition({ x: e.clientX, y: e.clientY })
+    }
+
+    window.addEventListener('dragover', handleMouseMove)
+    return () => {
+      window.removeEventListener('dragover', handleMouseMove)
+    }
+  }, [])
+
+  if (!initialOffset || !currentOffset || itemType !== dragId) {
+    return null
+  }
+
+  return (
+    <div style={makeStyles(mousePosition)}>
+      <DragPreview
+        fileName={item.draggedItems[0].name}
+        selectedCount={item.draggedItems.length}
+      />
+    </div>
+  )
+}
+
+export default DragPreviewWrapper

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

@@ -0,0 +1,48 @@
+import { forwardRef, useEffect, useState } from 'react'
+import { useDragDropManager } from 'react-dnd'
+
+const DnDConfigWrapper = forwardRef(({ children }, ref) => {
+  const dragDropManager = useDragDropManager()
+  const monitor = dragDropManager.getMonitor()
+  const [isDragging, setIsDragging] = useState(false)
+
+  useEffect(() => {
+    const unsubscribe = monitor.subscribeToStateChange(() => {
+      setIsDragging(monitor.isDragging())
+    })
+    return () => unsubscribe()
+  }, [monitor])
+
+  useEffect(() => {
+    if (!isDragging) return
+
+    const scrollThreshold = 100
+    const scrollMaxSpeed = 75
+
+    const intervalId = setInterval(() => {
+      const offset = monitor.getClientOffset()
+      const container = ref.current
+      if (!offset || !container) return
+
+      const { top, bottom } = container.getBoundingClientRect()
+      const distanceToTop = offset.y - top
+      const distanceToBottom = bottom - offset.y
+
+      if (distanceToTop < scrollThreshold) {
+        const speed = scrollMaxSpeed * (1 - distanceToTop / scrollThreshold)
+        container.scrollBy(0, -speed)
+      } else if (distanceToBottom < scrollThreshold) {
+        const speed = scrollMaxSpeed * (1 - distanceToBottom / scrollThreshold)
+        container.scrollBy(0, speed)
+      }
+    }, 16) // ~60fps
+
+    return () => clearInterval(intervalId)
+  }, [isDragging, monitor, ref])
+
+  return children
+})
+
+DnDConfigWrapper.displayName = 'DnDConfigWrapper'
+
+export default DnDConfigWrapper

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

@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react'
+import { useDrag, useDrop } from 'react-dnd'
+import { getEmptyImage } from 'react-dnd-html5-backend'
+
+import TableRowClassic from '../../../TableRow'
+
+const TableRow = ({ item, context, selected, disabled, ...props }) => {
+  const { selectedItems, setItemsInDropProcess, dragProps } = context
+  const {
+    onDrop,
+    canDrop: canDropProps,
+    canDrag: canDragProps,
+    dragId
+  } = dragProps
+
+  const [dragCollect, dragRef, dragRefPreview] = useDrag(
+    () => ({
+      type: dragId,
+      isDragging: monitor => {
+        // put all selected items in isDragging state
+        if (selectedItems.length > 0) {
+          return selectedItems.some(
+            selectedItem => selectedItem._id === item._id
+          )
+        }
+
+        return item._id === monitor.getItem().draggedItems[0]._id
+      },
+      item: {
+        draggedItems: selectedItems.length > 0 ? selectedItems : [item]
+      },
+      canDrag: () => {
+        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
+      },
+      collect: monitor => {
+        return {
+          isDragging: monitor.isDragging()
+        }
+      }
+    }),
+    [item, selectedItems] // used to pass args inside returned object attributes
+  )
+
+  const [dropCollect, dropRef] = useDrop(
+    () => ({
+      accept: dragId,
+      canDrop: () => (canDropProps ? canDropProps(item) : true),
+      drop: async draggedItem => {
+        setItemsInDropProcess(
+          draggedItem.draggedItems.map(draggedItem => draggedItem._id)
+        )
+        await onDrop(draggedItem.draggedItems, item, selectedItems)
+        setItemsInDropProcess([])
+      },
+      collect: monitor => {
+        return {
+          isOver: monitor.isOver()
+        }
+      }
+    }),
+    [item._id, selectedItems] // used to pass args inside returned object attributes
+  )
+
+  // Tricks for the preview image to be empty
+  // https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer
+  useEffect(() => {
+    dragRefPreview(getEmptyImage(), { captureDraggingState: true })
+  }, [dragRefPreview])
+
+  return (
+    <TableRowClassic
+      {...props}
+      ref={node => dragRef(dropRef(node))}
+      selected={selected || dropCollect.isOver}
+      className={dragCollect.isDragging ? 'u-o-50' : ''}
+      disabled={disabled}
+    />
+  )
+}
+
+export default TableRow

package/react/Table/Virtualized/FixedHeaderContent.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import TableHeadCell from './HeadCell'
+import Checkbox from '../../Checkbox'
+import TableCell from '../../TableCell'
+import TableRow from '../../TableRow'
+import { makeStyles } from '../../styles'
+
+const useStyles = makeStyles({
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  }
+})
+
+const FixedHeaderContent = ({
+  columns,
+  order,
+  orderBy,
+  rowCount,
+  selectedCount,
+  onClick,
+  onSelectAllClick
+}) => {
+  const classes = useStyles()
+
+  return (
+    <TableRow>
+      <TableCell align="center" padding="checkbox">
+        <Checkbox
+          indeterminate={selectedCount > 0 && selectedCount < rowCount}
+          checked={rowCount > 0 && selectedCount === rowCount}
+          inputProps={{ 'aria-label': 'select all' }}
+          onChange={onSelectAllClick}
+        />
+      </TableCell>
+      {columns.map(column => (
+        <TableHeadCell
+          key={column.id}
+          className={classes.visuallyHidden}
+          column={column}
+          order={order}
+          orderBy={orderBy}
+          onClick={() => onClick(column.id)}
+        />
+      ))}
+    </TableRow>
+  )
+}
+
+export default FixedHeaderContent

package/react/Table/Virtualized/HeadCell.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import TableCell from '../../TableCell'
+import TableSortLabel from '../../TableSortLabel'
+import { makeStyles } from '../../styles'
+
+const useStyles = makeStyles({
+  root: {
+    width: ({ column }) => column.width,
+    maxWidth: ({ column }) => column.maxWidth
+  }
+})
+
+const TableHeadCell = ({ className, column, orderBy, order, onClick }) => {
+  const classes = useStyles({ column })
+
+  return (
+    <TableCell
+      key={column.id}
+      classes={classes}
+      align={column.textAlign ?? 'left'}
+      padding={column.disablePadding ? 'none' : 'normal'}
+      sortDirection={orderBy === column.id ? order : false}
+    >
+      {column.sortable !== false ? (
+        <TableSortLabel
+          active={orderBy === column.id}
+          direction={orderBy === column.id ? order : 'asc'}
+          onClick={onClick}
+        >
+          {column.label}
+          {orderBy === column.id && (
+            <span className={className}>
+              {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+            </span>
+          )}
+        </TableSortLabel>
+      ) : (
+        column.label
+      )}
+    </TableCell>
+  )
+}
+
+export default TableHeadCell

package/react/Table/Virtualized/RowContent.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import Cell from './Cell'
+import Checkbox from '../../Checkbox'
+import TableCell from '../../TableCell'
+
+const RowContent = ({
+  index,
+  row,
+  columns,
+  isSelectedItem,
+  children,
+  onSelectClick
+}) => {
+  return (
+    <>
+      <TableCell align="center" padding="checkbox">
+        <Checkbox
+          checked={isSelectedItem(row)}
+          inputProps={{
+            'aria-labelledby': `enhanced-table-checkbox-${index}`
+          }}
+          onChange={() => onSelectClick(row)}
+        />
+      </TableCell>
+      {columns.map(column => (
+        <Cell key={column.id} row={row} columns={columns} column={column}>
+          {children}
+        </Cell>
+      ))}
+    </>
+  )
+}
+
+export default React.memo(RowContent)

package/react/Table/Virtualized/helpers.js

@@ -0,0 +1,41 @@
+const descendingComparator = ({ a, b, order, orderBy, lang }) => {
+  const aValue = a[orderBy]
+  const bValue = b[orderBy]
+
+  if (typeof aValue === 'string') {
+    const isDate = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}/.test(aValue)
+    const isNumber = !isNaN(parseInt(aValue))
+
+    if (isDate) {
+      return new Date(bValue) - new Date(aValue)
+    }
+
+    if (isNumber) {
+      return parseInt(bValue) - parseInt(aValue)
+    }
+
+    const { compare } = Intl.Collator(lang || 'en', {
+      caseFirst: order === 'asc' ? 'upper' : 'lower'
+    })
+
+    return compare(bValue, aValue)
+  }
+
+  return bValue - aValue
+}
+
+export const getComparator = (order, orderBy, lang) => {
+  return order === 'desc'
+    ? (a, b) => descendingComparator({ a, b, order, orderBy, lang })
+    : (a, b) => -descendingComparator({ a, b, order, orderBy, lang })
+}
+
+export const stableSort = (array, comparator) => {
+  const stabilizedThis = array.map((el, index) => [el, index])
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0])
+    if (order !== 0) return order
+    return a[1] - b[1]
+  })
+  return stabilizedThis.map(el => el[0])
+}

package/react/Table/Virtualized/helpers.spec.js

@@ -0,0 +1,108 @@
+import { stableSort, getComparator } from './helpers'
+
+describe('stableSort', () => {
+  describe('it should sort string correctly even with number', () => {
+    const rows = [
+      { name: 'b' },
+      { name: 'A' },
+      { name: 'B' },
+      { name: 'a' },
+      { name: '10' }
+    ]
+
+    it('for asc', () => {
+      const sortedData = stableSort(rows, getComparator('asc', 'name', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.name)
+      expect(onlyValues).toStrictEqual(['A', 'a', 'B', 'b', '10'])
+    })
+
+    it('for desc', () => {
+      const sortedData = stableSort(rows, getComparator('desc', 'name', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.name)
+      expect(onlyValues).toStrictEqual(['B', 'b', 'A', 'a', '10'])
+    })
+  })
+
+  describe('it should sort number correctly', () => {
+    const rows = [
+      { number: 40 },
+      { number: 1 },
+      { number: 8 },
+      { number: 30 },
+      { number: 40 }
+    ]
+
+    it('for asc', () => {
+      const sortedData = stableSort(rows, getComparator('asc', 'number', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.number)
+      expect(onlyValues).toStrictEqual([1, 8, 30, 40, 40])
+    })
+
+    it('for desc', () => {
+      const sortedData = stableSort(rows, getComparator('desc', 'number', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.number)
+      expect(onlyValues).toStrictEqual([40, 40, 30, 8, 1])
+    })
+  })
+
+  describe('it should sort string-number correctly', () => {
+    const rows = [
+      { number: '40' },
+      { number: '1' },
+      { number: '8' },
+      { number: '30' },
+      { number: '40' }
+    ]
+
+    it('for asc', () => {
+      const sortedData = stableSort(rows, getComparator('asc', 'number', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.number)
+      expect(onlyValues).toStrictEqual(['1', '8', '30', '40', '40'])
+    })
+
+    it('for desc', () => {
+      const sortedData = stableSort(rows, getComparator('desc', 'number', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.number)
+      expect(onlyValues).toStrictEqual(['40', '40', '30', '8', '1'])
+    })
+  })
+
+  describe('it should sort date correctly', () => {
+    const rows = [
+      { date: '2025-05-01T12:00:00.0000+01:00' },
+      { date: '2025-08-01T12:00:00.0000+01:00' },
+      { date: '2025-01-01T12:00:00.0000+01:00' },
+      { date: '2025-04-01T12:00:00.0000+01:00' }
+    ]
+
+    it('for asc', () => {
+      const sortedData = stableSort(rows, getComparator('asc', 'date', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.date)
+      expect(onlyValues).toStrictEqual([
+        '2025-01-01T12:00:00.0000+01:00',
+        '2025-04-01T12:00:00.0000+01:00',
+        '2025-05-01T12:00:00.0000+01:00',
+        '2025-08-01T12:00:00.0000+01:00'
+      ])
+    })
+
+    it('for desc', () => {
+      const sortedData = stableSort(rows, getComparator('desc', 'date', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.date)
+      expect(onlyValues).toStrictEqual([
+        '2025-08-01T12:00:00.0000+01:00',
+        '2025-05-01T12:00:00.0000+01:00',
+        '2025-04-01T12:00:00.0000+01:00',
+        '2025-01-01T12:00:00.0000+01:00'
+      ])
+    })
+  })
+})