cozy-ui 123.2.1 → 124.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [124.0.0](https://github.com/cozy/cozy-ui/compare/v123.2.1...v124.0.0) (2025-05-22)
+
+
+### Features
+
+* Add dragndrop on virtualized table ([519e610](https://github.com/cozy/cozy-ui/commit/519e610))
+* Add react-dnd ([4f2805e](https://github.com/cozy/cozy-ui/commit/4f2805e))
+* Add react-virtuoso ([e121afe](https://github.com/cozy/cozy-ui/commit/e121afe))
+* Add Virtual table example and adjust style ([9cc9506](https://github.com/cozy/cozy-ui/commit/9cc9506))
+* **Filename:** Add `path` and rework `icon` ([35a8459](https://github.com/cozy/cozy-ui/commit/35a8459))
+* Memo rows and cells ([bae4212](https://github.com/cozy/cozy-ui/commit/bae4212))
+* **TableRow:** Add disabled style ([2a0d626](https://github.com/cozy/cozy-ui/commit/2a0d626))
+* Upgrade react ([fe320be](https://github.com/cozy/cozy-ui/commit/fe320be))
+* **VirtualizedTable:** Add selection props ([f819531](https://github.com/cozy/cozy-ui/commit/f819531))
+
+
+### BREAKING CHANGES
+
+* You have to add `react-dnd ^16.0.1` and `react-dnd-html5-backend ^16.0.1` to use dragndrop on virtualized table. Typically if you use `dragProps: {{ enabled: true }}` on `react/Table/Virtualized` component.
+You also need to wrap your table into the DnD Provider like so:
+```
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+
+<DndProvider backend={HTML5Backend}>...</DndProvider>
+```
+* **Filename:** You must use `<Icon />` component to use `icon` prop. So replace `<Filename icon={something} />` by `<Filename icon={<Icon icon={something} />} />`
+* You must have `react ^16.14.0` and `react-dom ^16.14.0`.
+
 ## [123.2.1](https://github.com/cozy/cozy-ui/compare/v123.2.0...v123.2.1) (2025-05-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "123.2.1",
+  "version": "124.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -130,12 +130,14 @@
     "postcss-loader": "2.1.6",
     "prettier": "2.6.0",
     "prop-types": "15.7.2",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
+    "react": "16.14.0",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-dom": "16.14.0",
     "react-hot-loader": "^4.3.11",
     "react-redux": "7.2.7",
     "react-styleguidist": "10.6.2",
-    "react-test-renderer": "16.12.0",
+    "react-test-renderer": "16.14.0",
     "redux": "3.7.2",
     "redux-mock-store": "^1.5.4",
     "remark-cli": "^8.0.1",
@@ -179,6 +181,7 @@
     "react-remove-scroll": "^2.4.0",
     "react-select": "^4.3.0",
     "react-swipeable-views": "^0.13.3",
+    "react-virtuoso": "4.12.7",
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
@@ -186,8 +189,10 @@
     "cozy-device-helper": ">=2.0.0",
     "cozy-flags": ">=2.10.1",
     "cozy-intent": ">=2.29.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^16.14.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^16.14.0"
   },
   "eslintConfig": {
     "extends": [

package/react/Filename/Readme.md

@@ -3,23 +3,25 @@
 ```jsx
 import Filename from 'cozy-ui/transpiled/react/Filename'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import Variants from 'cozy-ui/docs/components/Variants'
 
 const initialVariants = [
-  { midEllipsis: false, icon: false, body1Variant: false, extension: true, short: false }
+  { midEllipsis: false, icon: true, body1Variant: false, extension: true, short: false, withPath: true }
 ]
 
 ;
 
 <Variants initialVariants={initialVariants} screenshotAllVariants>
   {variant => (
-  <Filename
-    icon={variant.icon ? FileIcon : undefined}
-    variant={variant.body1Variant ? 'body1' : undefined}
-    midEllipsis={variant.midEllipsis}
-    filename={variant.short ? "Lacinia condimentum this is the end" : "Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex and this is the end"}
-    extension={variant.extension ? ".pdf" : undefined}
-  />
+    <Filename
+      icon={variant.icon ? <Icon icon={FileIcon} size={32} /> : undefined}
+      variant={variant.body1Variant ? 'body1' : undefined}
+      midEllipsis={variant.midEllipsis}
+      filename={variant.short ? "Lacinia condimentum this is the end" : "Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex and this is the end"}
+      extension={variant.extension ? ".pdf" : undefined}
+      path={variant.withPath ? '/some/folder/and/subfolder' : undefined}
+    />
   )}
 </Variants>
 ```

package/react/Filename/index.jsx

@@ -1,18 +1,15 @@
+import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { Fragment } from 'react'
 
-import Icon, { iconPropType } from '../Icon'
+import styles from './styles.styl'
+import { iconPropType } from '../Icon'
 import MidEllipsis from '../MidEllipsis'
 import Typography from '../Typography'
 
-const Filename = ({ icon, filename, extension, midEllipsis, variant }) => {
+const NameAndExtension = ({ filename, extension, variant, midEllipsis }) => {
   return (
-    <div className="u-flex u-flex-items-center">
-      {icon && (
-        <div className="u-mr-1">
-          <Icon icon={icon} width={30} height={30} />
-        </div>
-      )}
+    <>
       {filename && (
         <Typography variant={variant} component="span" noWrap>
           {midEllipsis ? <MidEllipsis text={filename} /> : filename}
@@ -23,7 +20,56 @@ const Filename = ({ icon, filename, extension, midEllipsis, variant }) => {
           {extension}
         </Typography>
       )}
-    </div>
+    </>
+  )
+}
+
+const Filename = ({
+  icon,
+  filename,
+  extension,
+  midEllipsis,
+  variant,
+  path
+}) => {
+  const [Wrapper, wrapperProps] = path
+    ? [Fragment, {}]
+    : ['div', { className: cx('u-flex u-flex-items-center') }]
+
+  return (
+    <Wrapper {...wrapperProps}>
+      {icon && (
+        <div
+          className={cx('u-flex u-pos-relative u-mr-1', {
+            [styles['icon-withPath']]: !!path
+          })}
+        >
+          {icon}
+        </div>
+      )}
+      {path ? (
+        <>
+          <div className="u-flex">
+            <NameAndExtension
+              filename={filename}
+              extension={extension}
+              variant={variant}
+              midEllipsis={midEllipsis}
+            />
+          </div>
+          <Typography variant="body2" component="div" noWrap>
+            {path}
+          </Typography>
+        </>
+      ) : (
+        <NameAndExtension
+          filename={filename}
+          extension={extension}
+          variant={variant}
+          midEllipsis={midEllipsis}
+        />
+      )}
+    </Wrapper>
   )
 }
 

package/react/Filename/styles.styl

@@ -0,0 +1,3 @@
+.icon-withPath
+    float left
+    top 4px

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -506,6 +506,66 @@ export const makeLightNormalOverrides = theme => ({
       paddingRight: 16
     }
   },
+  MuiTableHead: {
+    root: {
+      backgroundColor: theme.palette.background.paper
+    }
+  },
+  MuiTableRow: {
+    root: {
+      '&.disabled': {
+        cursor: 'pointer',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }
+    }
+  },
+  MuiTableCell: {
+    root: {
+      padding: '8px 4px'
+    },
+    head: {
+      ...theme.typography.subtitle2,
+      color: theme.palette.text.secondary,
+      lineHeight: 1.292
+    },
+    body: {
+      color: theme.palette.text.secondary,
+      '&.sortable': {
+        '&$paddingNone': {
+          '&$alignLeft': {
+            paddingLeft: '12px'
+          },
+          '&$alignRight': {
+            paddingRight: '12px'
+          }
+        },
+        '&$alignLeft': {
+          paddingLeft: '16px'
+        },
+        '&$alignRight': {
+          paddingRight: '16px'
+        }
+      }
+    },
+    stickyHeader: {
+      backgroundColor: theme.palette.background.paper
+    }
+  },
+  MuiTableSortLabel: {
+    root: {
+      padding: '8px 12px',
+      color: theme.palette.text.secondary,
+      '&:hover': {
+        color: theme.palette.text.primary,
+        borderRadius: 999,
+        backgroundColor: theme.palette.action.hover
+      }
+    },
+    icon: {
+      fontSize: 14
+    }
+  },
   MuiFormLabel: {
     root: {
       color: theme.palette.text.secondary,

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