cozy-ui 127.3.0 → 127.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [127.4.0](https://github.com/cozy/cozy-ui/compare/v127.3.0...v127.4.0) (2025-07-21)
+
+
+### Features
+
+* implement virtualized grid list drag and drop :sparkles: ([c4f93a1](https://github.com/cozy/cozy-ui/commit/c4f93a1))
+
 # [127.3.0](https://github.com/cozy/cozy-ui/compare/v127.2.0...v127.3.0) (2025-07-21)
 
 

package/package.json

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

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

@@ -0,0 +1,86 @@
+import cx from 'classnames'
+import React, { useEffect } from 'react'
+import { useDrag, useDrop } from 'react-dnd'
+import { getEmptyImage } from 'react-dnd-html5-backend'
+
+const GridItem = ({ item, context, renderItem, className }) => {
+  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 [{ isDragging }, dragRef, dragPreview] = useDrag(
+    () => ({
+      type: dragId,
+      isDragging: monitor => {
+        if (selectedItems.length > 0) {
+          return selectedItems.some(sel => sel._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.length > 0) {
+          return defaultCanDrag && isSelected
+        }
+        return defaultCanDrag
+      },
+      collect: monitor => ({
+        isDragging: monitor.isDragging()
+      })
+    }),
+    [item, selectedItems]
+  )
+
+  const [{ isOver }, dropRef] = useDrop(
+    () => ({
+      accept: dragId,
+      canDrop: () => (canDropProps ? canDropProps(item) : true),
+      drop: async draggedItem => {
+        setItemsInDropProcess(
+          draggedItem.draggedItems.map(dragged => dragged._id)
+        )
+        await onDrop(draggedItem.draggedItems, item, selectedItems)
+        setItemsInDropProcess([])
+      },
+      collect: monitor => ({
+        isOver: monitor.isOver()
+      })
+    }),
+    [item._id, selectedItems]
+  )
+
+  useEffect(() => {
+    dragPreview(getEmptyImage(), { captureDraggingState: true })
+  }, [dragPreview])
+
+  return (
+    <div
+      ref={node => dragRef(dropRef(node))}
+      className={cx(
+        className,
+        isDragging ? 'virtualized u-o-50' : 'virtualized'
+      )}
+      style={{ opacity: isDisabled ? 0.5 : 1 }}
+    >
+      {renderItem(item, { isDragging, isOver, isDisabled })}
+    </div>
+  )
+}
+
+export default GridItem

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

@@ -0,0 +1,67 @@
+import React, { forwardRef, useState, useMemo } from 'react'
+
+import GridItem from './GridItem'
+import VirtualizedGridList from '../'
+import CustomDragLayer from '../../../utils/Dnd/CustomDrag/CustomDragLayer'
+import DnDConfigWrapper from '../../../utils/Dnd/DnDConfigWrapper'
+
+const VirtualizedGridListDnd = ({
+  dragProps,
+  context,
+  itemRenderer,
+  children,
+  componentProps = {
+    List: {},
+    Item: {}
+  },
+  components,
+  ...props
+}) => {
+  const [itemsInDropProcess, setItemsInDropProcess] = useState([])
+
+  const _context = useMemo(
+    () => ({
+      ...context,
+      dragProps,
+      itemRenderer,
+      itemsInDropProcess,
+      setItemsInDropProcess,
+      items: props.items
+    }),
+    [context, dragProps, itemRenderer, itemsInDropProcess, props.items]
+  )
+
+  return (
+    <>
+      <CustomDragLayer dragId={dragProps.dragId} />
+      <VirtualizedGridList
+        components={{
+          Scroller: forwardRef(({ ...scrollerProps }, ref) => (
+            <DnDConfigWrapper ref={ref}>
+              <div {...scrollerProps} ref={ref} />
+            </DnDConfigWrapper>
+          )),
+          Item: ({ context, children, ...props }) => {
+            const item = context?.items?.[props['data-index']]
+            return (
+              <GridItem
+                item={item}
+                context={context}
+                renderItem={() => <>{children}</>}
+                {...componentProps.Item}
+              />
+            )
+          },
+          ...components
+        }}
+        context={_context}
+        itemRenderer={itemRenderer}
+        {...props}
+      >
+        {children}
+      </VirtualizedGridList>
+    </>
+  )
+}
+
+export default VirtualizedGridListDnd

package/react/GridList/Virtualized/index.jsx

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

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

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react'
 
-import CustomDragLayer from './CustomDrag/CustomDragLayer'
 import virtuosoComponentsDnd from './virtuosoComponents'
+import CustomDragLayer from '../../../utils/Dnd/CustomDrag/CustomDragLayer'
 import VirtualizedTable from '../index'
 import virtuosoComponents from '../virtuosoComponents'
 

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

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
 
-import DnDConfigWrapper from './DnDConfigWrapper'
 import TableRowDnD from './TableRow'
 import TableContainer from '../../../TableContainer'
+import DnDConfigWrapper from '../../../utils/Dnd/DnDConfigWrapper'
 import virtuosoComponents from '../virtuosoComponents'
 
 /**

package/react/utils/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/utils/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/utils/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/utils/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/transpiled/react/GridList/Virtualized/Dnd/GridItem.d.ts

@@ -0,0 +1,7 @@
+export default GridItem;
+declare function GridItem({ item, context, renderItem, className }: {
+    item: any;
+    context: any;
+    renderItem: any;
+    className: any;
+}): JSX.Element;

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

@@ -0,0 +1,139 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import cx from 'classnames';
+import React, { useEffect } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+
+var GridItem = function GridItem(_ref) {
+  var _context$isSelectedIt;
+
+  var item = _ref.item,
+      context = _ref.context,
+      renderItem = _ref.renderItem,
+      className = _ref.className;
+
+  var _ref2 = context || {},
+      _ref2$selectedItems = _ref2.selectedItems,
+      selectedItems = _ref2$selectedItems === void 0 ? [] : _ref2$selectedItems,
+      _ref2$itemsInDropProc = _ref2.itemsInDropProcess,
+      itemsInDropProcess = _ref2$itemsInDropProc === void 0 ? [] : _ref2$itemsInDropProc,
+      _ref2$setItemsInDropP = _ref2.setItemsInDropProcess,
+      setItemsInDropProcess = _ref2$setItemsInDropP === void 0 ? function () {} : _ref2$setItemsInDropP,
+      dragProps = _ref2.dragProps;
+
+  var onDrop = dragProps.onDrop,
+      canDropProps = dragProps.canDrop,
+      canDragProps = dragProps.canDrag,
+      dragId = dragProps.dragId;
+  var isSelected = context === null || context === void 0 ? void 0 : (_context$isSelectedIt = context.isSelectedItem) === null || _context$isSelectedIt === void 0 ? void 0 : _context$isSelectedIt.call(context, item);
+  var isDisabled = itemsInDropProcess.includes(item._id);
+
+  var _useDrag = useDrag(function () {
+    return {
+      type: dragId,
+      isDragging: function isDragging(monitor) {
+        var _monitor$getItem$drag;
+
+        if (selectedItems.length > 0) {
+          return selectedItems.some(function (sel) {
+            return sel._id === item._id;
+          });
+        }
+
+        return item._id === ((_monitor$getItem$drag = monitor.getItem().draggedItems) === null || _monitor$getItem$drag === void 0 ? void 0 : _monitor$getItem$drag[0]._id);
+      },
+      item: {
+        draggedItems: selectedItems.length > 0 ? selectedItems : [item]
+      },
+      canDrag: function canDrag() {
+        var _canDragProps;
+
+        var defaultCanDrag = (_canDragProps = canDragProps === null || canDragProps === void 0 ? void 0 : canDragProps(item)) !== null && _canDragProps !== void 0 ? _canDragProps : true;
+
+        if (selectedItems.length > 0) {
+          return defaultCanDrag && isSelected;
+        }
+
+        return defaultCanDrag;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    };
+  }, [item, selectedItems]),
+      _useDrag2 = _slicedToArray(_useDrag, 3),
+      isDragging = _useDrag2[0].isDragging,
+      dragRef = _useDrag2[1],
+      dragPreview = _useDrag2[2];
+
+  var _useDrop = useDrop(function () {
+    return {
+      accept: dragId,
+      canDrop: function canDrop() {
+        return canDropProps ? canDropProps(item) : true;
+      },
+      drop: function () {
+        var _drop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(draggedItem) {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  setItemsInDropProcess(draggedItem.draggedItems.map(function (dragged) {
+                    return dragged._id;
+                  }));
+                  _context.next = 3;
+                  return onDrop(draggedItem.draggedItems, item, selectedItems);
+
+                case 3:
+                  setItemsInDropProcess([]);
+
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function drop(_x) {
+          return _drop.apply(this, arguments);
+        }
+
+        return drop;
+      }(),
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver()
+        };
+      }
+    };
+  }, [item._id, selectedItems]),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      isOver = _useDrop2[0].isOver,
+      dropRef = _useDrop2[1];
+
+  useEffect(function () {
+    dragPreview(getEmptyImage(), {
+      captureDraggingState: true
+    });
+  }, [dragPreview]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: function ref(node) {
+      return dragRef(dropRef(node));
+    },
+    className: cx(className, isDragging ? 'virtualized u-o-50' : 'virtualized'),
+    style: {
+      opacity: isDisabled ? 0.5 : 1
+    }
+  }, renderItem(item, {
+    isDragging: isDragging,
+    isOver: isOver,
+    isDisabled: isDisabled
+  }));
+};
+
+export default GridItem;

package/transpiled/react/GridList/Virtualized/Dnd/index.d.ts

@@ -0,0 +1,13 @@
+export default VirtualizedGridListDnd;
+declare function VirtualizedGridListDnd({ dragProps, context, itemRenderer, children, componentProps, components, ...props }: {
+    [x: string]: any;
+    dragProps: any;
+    context: any;
+    itemRenderer: any;
+    children: any;
+    componentProps?: {
+        List: {};
+        Item: {};
+    } | undefined;
+    components: any;
+}): JSX.Element;

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

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+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"];
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useState, useMemo } from 'react';
+import GridItem from "cozy-ui/transpiled/react/GridList/Virtualized/Dnd/GridItem";
+import VirtualizedGridList from "cozy-ui/transpiled/react/GridList/Virtualized";
+import CustomDragLayer from "cozy-ui/transpiled/react/utils/Dnd/CustomDrag/CustomDragLayer";
+import DnDConfigWrapper from "cozy-ui/transpiled/react/utils/Dnd/DnDConfigWrapper";
+
+var VirtualizedGridListDnd = function VirtualizedGridListDnd(_ref) {
+  var dragProps = _ref.dragProps,
+      context = _ref.context,
+      itemRenderer = _ref.itemRenderer,
+      children = _ref.children,
+      _ref$componentProps = _ref.componentProps,
+      componentProps = _ref$componentProps === void 0 ? {
+    List: {},
+    Item: {}
+  } : _ref$componentProps,
+      components = _ref.components,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      itemsInDropProcess = _useState2[0],
+      setItemsInDropProcess = _useState2[1];
+
+  var _context = useMemo(function () {
+    return _objectSpread(_objectSpread({}, context), {}, {
+      dragProps: dragProps,
+      itemRenderer: itemRenderer,
+      itemsInDropProcess: itemsInDropProcess,
+      setItemsInDropProcess: setItemsInDropProcess,
+      items: props.items
+    });
+  }, [context, dragProps, itemRenderer, itemsInDropProcess, props.items]);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomDragLayer, {
+    dragId: dragProps.dragId
+  }), /*#__PURE__*/React.createElement(VirtualizedGridList, _extends({
+    components: _objectSpread({
+      Scroller: /*#__PURE__*/forwardRef(function (_ref2, ref) {
+        var scrollerProps = _extends({}, _ref2);
+
+        return /*#__PURE__*/React.createElement(DnDConfigWrapper, {
+          ref: ref
+        }, /*#__PURE__*/React.createElement("div", _extends({}, scrollerProps, {
+          ref: ref
+        })));
+      }),
+      Item: function Item(_ref3) {
+        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);
+          }
+        }, componentProps.Item));
+      }
+    }, components),
+    context: _context,
+    itemRenderer: itemRenderer
+  }, props), children));
+};
+
+export default VirtualizedGridListDnd;

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

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

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

@@ -9,8 +9,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState, useMemo } from 'react';
-import CustomDragLayer from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/CustomDrag/CustomDragLayer";
 import virtuosoComponentsDnd from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/virtuosoComponents";
+import CustomDragLayer from "cozy-ui/transpiled/react/utils/Dnd/CustomDrag/CustomDragLayer";
 import VirtualizedTable from "cozy-ui/transpiled/react/Table/Virtualized/index";
 import virtuosoComponents from "cozy-ui/transpiled/react/Table/Virtualized/virtuosoComponents";
 

package/transpiled/react/Table/Virtualized/Dnd/virtuosoComponents.js

@@ -8,9 +8,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef } from 'react';
-import DnDConfigWrapper from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/DnDConfigWrapper";
 import TableRowDnD from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/TableRow";
 import TableContainer from "cozy-ui/transpiled/react/TableContainer";
+import DnDConfigWrapper from "cozy-ui/transpiled/react/utils/Dnd/DnDConfigWrapper";
 import virtuosoComponents from "cozy-ui/transpiled/react/Table/Virtualized/virtuosoComponents";
 /**
  Be aware that context is spread to every components but should not be spread to Table components

package/transpiled/react/utils/Dnd/CustomDrag/CustomDragLayer.d.ts

@@ -0,0 +1,4 @@
+export function CustomDragLayer({ dragId }: {
+    dragId: any;
+}): JSX.Element | null;
+export default CustomDragLayer;

package/transpiled/react/utils/Dnd/CustomDrag/CustomDragLayer.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useDragLayer } from 'react-dnd';
+import DragPreviewWrapper from "cozy-ui/transpiled/react/utils/Dnd/CustomDrag/DragPreviewWrapper";
+var 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 var CustomDragLayer = function CustomDragLayer(_ref) {
+  var dragId = _ref.dragId;
+
+  var _useDragLayer = useDragLayer(function (monitor) {
+    return {
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging()
+    };
+  }),
+      itemType = _useDragLayer.itemType,
+      isDragging = _useDragLayer.isDragging,
+      item = _useDragLayer.item,
+      initialOffset = _useDragLayer.initialOffset,
+      currentOffset = _useDragLayer.currentOffset;
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: layerStyles
+  }, /*#__PURE__*/React.createElement(DragPreviewWrapper, {
+    item: item,
+    itemType: itemType,
+    dragId: dragId,
+    initialOffset: initialOffset,
+    currentOffset: currentOffset
+  }));
+};
+export default CustomDragLayer;

package/transpiled/react/utils/Dnd/CustomDrag/DragPreview.d.ts

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

package/transpiled/react/utils/Dnd/CustomDrag/DragPreview.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Badge from "cozy-ui/transpiled/react/Badge";
+import Paper from "cozy-ui/transpiled/react/Paper";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  root: {
+    width: 'fit-content'
+  }
+});
+
+var DragPreview = function DragPreview(_ref) {
+  var fileName = _ref.fileName,
+      selectedCount = _ref.selectedCount;
+  var classes = useStyles();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selectedCount > 1 ? /*#__PURE__*/React.createElement(Badge, {
+    badgeContent: selectedCount,
+    size: "large",
+    color: "primary",
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    overlap: "rectangular"
+  }, /*#__PURE__*/React.createElement(Paper, {
+    classes: classes,
+    className: "u-p-half u-maw-5"
+  }, /*#__PURE__*/React.createElement(Typography, null, fileName))) : /*#__PURE__*/React.createElement(Paper, {
+    classes: classes,
+    className: "u-p-half u-maw-5"
+  }, /*#__PURE__*/React.createElement(Typography, null, fileName)));
+};
+
+export default /*#__PURE__*/React.memo(DragPreview);

package/transpiled/react/utils/Dnd/CustomDrag/DragPreviewWrapper.d.ts

@@ -0,0 +1,8 @@
+export default DragPreviewWrapper;
+declare function DragPreviewWrapper({ item, itemType, dragId, initialOffset, currentOffset }: {
+    item: any;
+    itemType: any;
+    dragId: any;
+    initialOffset: any;
+    currentOffset: any;
+}): JSX.Element | null;

package/transpiled/react/utils/Dnd/CustomDrag/DragPreviewWrapper.js

@@ -0,0 +1,63 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import DragPreview from "cozy-ui/transpiled/react/utils/Dnd/CustomDrag/DragPreview";
+
+var makeStyles = function makeStyles(_ref) {
+  var x = _ref.x,
+      y = _ref.y;
+
+  if (!x || !y) {
+    return {
+      display: 'none'
+    };
+  }
+
+  var transform = "translate(".concat(x, "px, ").concat(y, "px)");
+  return {
+    transform: transform,
+    WebkitTransform: transform
+  };
+};
+
+var DragPreviewWrapper = function DragPreviewWrapper(_ref2) {
+  var item = _ref2.item,
+      itemType = _ref2.itemType,
+      dragId = _ref2.dragId,
+      initialOffset = _ref2.initialOffset,
+      currentOffset = _ref2.currentOffset;
+
+  var _useState = useState({
+    x: null,
+    y: null
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      mousePosition = _useState2[0],
+      setMousePosition = _useState2[1];
+
+  useEffect(function () {
+    var handleMouseMove = function handleMouseMove(e) {
+      setMousePosition({
+        x: e.clientX,
+        y: e.clientY
+      });
+    };
+
+    window.addEventListener('dragover', handleMouseMove);
+    return function () {
+      window.removeEventListener('dragover', handleMouseMove);
+    };
+  }, []);
+
+  if (!initialOffset || !currentOffset || itemType !== dragId) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: makeStyles(mousePosition)
+  }, /*#__PURE__*/React.createElement(DragPreview, {
+    fileName: item.draggedItems[0].name,
+    selectedCount: item.draggedItems.length
+  }));
+};
+
+export default DragPreviewWrapper;

package/transpiled/react/utils/Dnd/DnDConfigWrapper.d.ts

@@ -0,0 +1,2 @@
+export default DnDConfigWrapper;
+declare const DnDConfigWrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/transpiled/react/utils/Dnd/DnDConfigWrapper.js

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { forwardRef, useEffect, useState } from 'react';
+import { useDragDropManager } from 'react-dnd';
+var DnDConfigWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children;
+  var dragDropManager = useDragDropManager();
+  var monitor = dragDropManager.getMonitor();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
+  useEffect(function () {
+    var unsubscribe = monitor.subscribeToStateChange(function () {
+      setIsDragging(monitor.isDragging());
+    });
+    return function () {
+      return unsubscribe();
+    };
+  }, [monitor]);
+  useEffect(function () {
+    if (!isDragging) return;
+    var scrollThreshold = 100;
+    var scrollMaxSpeed = 75;
+    var intervalId = setInterval(function () {
+      var offset = monitor.getClientOffset();
+      var container = ref.current;
+      if (!offset || !container) return;
+
+      var _container$getBoundin = container.getBoundingClientRect(),
+          top = _container$getBoundin.top,
+          bottom = _container$getBoundin.bottom;
+
+      var distanceToTop = offset.y - top;
+      var distanceToBottom = bottom - offset.y;
+
+      if (distanceToTop < scrollThreshold) {
+        var speed = scrollMaxSpeed * (1 - distanceToTop / scrollThreshold);
+        container.scrollBy(0, -speed);
+      } else if (distanceToBottom < scrollThreshold) {
+        var _speed = scrollMaxSpeed * (1 - distanceToBottom / scrollThreshold);
+
+        container.scrollBy(0, _speed);
+      }
+    }, 16); // ~60fps
+
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [isDragging, monitor, ref]);
+  return children;
+});
+DnDConfigWrapper.displayName = 'DnDConfigWrapper';
+export default DnDConfigWrapper;