cozy-ui 126.3.0 → 126.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [126.4.0](https://github.com/cozy/cozy-ui/compare/v126.3.0...v126.4.0) (2025-06-17)
+
+
+### Features
+
+* **VirtualizedTable:** Lazy load dragndrop components ([620846e](https://github.com/cozy/cozy-ui/commit/620846e))
+
 # [126.3.0](https://github.com/cozy/cozy-ui/compare/v126.2.0...v126.3.0) (2025-06-17)
 
 

package/package.json

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

package/react/Table/Virtualized/index.jsx

@@ -1,12 +1,15 @@
 import React, { useState, forwardRef } from 'react'
 import { TableVirtuoso } from 'react-virtuoso'
 
-import CustomDragLayer from './Dnd/CustomDrag/CustomDragLayer'
 import FixedHeaderContent from './FixedHeaderContent'
 import RowContent from './RowContent'
 import { stableSort, getComparator } from './helpers'
 import virtuosoComponents from './virtuosoComponents'
 
+const CustomDragLayer = React.lazy(() =>
+  import('./Dnd/CustomDrag/CustomDragLayer')
+)
+
 const VirtualizedTable = forwardRef(
   (
     {
@@ -91,14 +94,14 @@ VirtualizedTable.displayName = 'VirtualizedTable'
 const VirtuosoTableWrapper = props => {
   if (!props.dragProps?.enabled) {
     return <VirtualizedTable {...props} />
+  } else {
+    return (
+      <React.Suspense>
+        <CustomDragLayer dragId={props.dragProps.dragId} />
+        <VirtualizedTable {...props} />
+      </React.Suspense>
+    )
   }
-
-  return (
-    <>
-      <CustomDragLayer dragId={props.dragProps.dragId} />
-      <VirtualizedTable {...props} />
-    </>
-  )
 }
 
 export default VirtuosoTableWrapper

package/react/Table/Virtualized/virtuosoComponents.jsx

@@ -1,7 +1,5 @@
 import React, { forwardRef } from 'react'
 
-import DnDConfigWrapper from './Dnd/DnDConfigWrapper'
-import TableRowDnD from './Dnd/TableRow'
 import Table from '..'
 import Paper from '../../Paper'
 import TableBody from '../../TableBody'
@@ -10,6 +8,9 @@ import TableFooter from '../../TableFooter'
 import TableHead from '../../TableHead'
 import TableRow from '../../TableRow'
 
+const DnDConfigWrapper = React.lazy(() => import('./Dnd/DnDConfigWrapper'))
+const TableRowDnD = React.lazy(() => import('./Dnd/TableRow'))
+
 const _TableContainer = forwardRef((props, ref) => (
   <TableContainer
     {...props}
@@ -25,13 +26,15 @@ const virtuosoComponents = {
   Scroller: forwardRef(({ context, ...props }, ref) => {
     if (!context.dragProps?.enabled) {
       return <_TableContainer {...props} ref={ref} />
+    } else {
+      return (
+        <React.Suspense>
+          <DnDConfigWrapper ref={ref}>
+            <_TableContainer {...props} ref={ref} />
+          </DnDConfigWrapper>
+        </React.Suspense>
+      )
     }
-
-    return (
-      <DnDConfigWrapper ref={ref}>
-        <_TableContainer {...props} ref={ref} />
-      </DnDConfigWrapper>
-    )
   }),
   Table: forwardRef((props, ref) => <Table {...props} ref={ref} />),
   TableHead: forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
@@ -43,18 +46,20 @@ const virtuosoComponents = {
 
     if (!context.dragProps?.enabled) {
       return <TableRow {...props} ref={ref} selected={isSelected} hover />
+    } else {
+      return (
+        <React.Suspense>
+          <TableRowDnD
+            {...props}
+            item={item}
+            context={context}
+            selected={isSelected}
+            disabled={isDisabled}
+            hover
+          />
+        </React.Suspense>
+      )
     }
-
-    return (
-      <TableRowDnD
-        {...props}
-        item={item}
-        context={context}
-        selected={isSelected}
-        disabled={isDisabled}
-        hover
-      />
-    )
   })
 }
 

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

@@ -4,11 +4,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["rows", "columns", "defaultOrder", "secondarySort", "selectedItems", "onSelect", "onSelectAll", "isSelectedItem", "componentsProps", "dragProps"];
 import React, { useState, forwardRef } from 'react';
 import { TableVirtuoso } from 'react-virtuoso';
-import CustomDragLayer from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/CustomDrag/CustomDragLayer";
 import FixedHeaderContent from "cozy-ui/transpiled/react/Table/Virtualized/FixedHeaderContent";
 import RowContent from "cozy-ui/transpiled/react/Table/Virtualized/RowContent";
 import { stableSort, getComparator } from "cozy-ui/transpiled/react/Table/Virtualized/helpers";
 import virtuosoComponents from "cozy-ui/transpiled/react/Table/Virtualized/virtuosoComponents";
+var CustomDragLayer = /*#__PURE__*/React.lazy(function () {
+  return import('./Dnd/CustomDrag/CustomDragLayer');
+});
 var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var rows = _ref.rows,
       columns = _ref.columns,
@@ -105,11 +107,11 @@ var VirtuosoTableWrapper = function VirtuosoTableWrapper(props) {
 
   if (!((_props$dragProps = props.dragProps) !== null && _props$dragProps !== void 0 && _props$dragProps.enabled)) {
     return /*#__PURE__*/React.createElement(VirtualizedTable, props);
+  } else {
+    return /*#__PURE__*/React.createElement(React.Suspense, null, /*#__PURE__*/React.createElement(CustomDragLayer, {
+      dragId: props.dragProps.dragId
+    }), /*#__PURE__*/React.createElement(VirtualizedTable, props));
   }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomDragLayer, {
-    dragId: props.dragProps.dragId
-  }), /*#__PURE__*/React.createElement(VirtualizedTable, props));
 };
 
 export default VirtuosoTableWrapper;

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

@@ -9,8 +9,6 @@ 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 Table from "cozy-ui/transpiled/react/Table";
 import Paper from "cozy-ui/transpiled/react/Paper";
 import TableBody from "cozy-ui/transpiled/react/TableBody";
@@ -18,6 +16,12 @@ import TableContainer from "cozy-ui/transpiled/react/TableContainer";
 import TableFooter from "cozy-ui/transpiled/react/TableFooter";
 import TableHead from "cozy-ui/transpiled/react/TableHead";
 import TableRow from "cozy-ui/transpiled/react/TableRow";
+var DnDConfigWrapper = /*#__PURE__*/React.lazy(function () {
+  return import('./Dnd/DnDConfigWrapper');
+});
+var TableRowDnD = /*#__PURE__*/React.lazy(function () {
+  return import('./Dnd/TableRow');
+});
 
 var _TableContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(TableContainer, _extends({}, props, {
@@ -42,13 +46,13 @@ var virtuosoComponents = {
       return /*#__PURE__*/React.createElement(_TableContainer, _extends({}, props, {
         ref: ref
       }));
+    } else {
+      return /*#__PURE__*/React.createElement(React.Suspense, null, /*#__PURE__*/React.createElement(DnDConfigWrapper, {
+        ref: ref
+      }, /*#__PURE__*/React.createElement(_TableContainer, _extends({}, props, {
+        ref: ref
+      }))));
     }
-
-    return /*#__PURE__*/React.createElement(DnDConfigWrapper, {
-      ref: ref
-    }, /*#__PURE__*/React.createElement(_TableContainer, _extends({}, props, {
-      ref: ref
-    })));
   }),
   Table: /*#__PURE__*/forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
@@ -86,15 +90,15 @@ var virtuosoComponents = {
         selected: isSelected,
         hover: true
       }));
+    } else {
+      return /*#__PURE__*/React.createElement(React.Suspense, null, /*#__PURE__*/React.createElement(TableRowDnD, _extends({}, props, {
+        item: item,
+        context: context,
+        selected: isSelected,
+        disabled: isDisabled,
+        hover: true
+      })));
     }
-
-    return /*#__PURE__*/React.createElement(TableRowDnD, _extends({}, props, {
-      item: item,
-      context: context,
-      selected: isSelected,
-      disabled: isDisabled,
-      hover: true
-    }));
   })
 };
 export default virtuosoComponents;