cozy-ui 126.4.0 → 126.6.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [126.6.0](https://github.com/cozy/cozy-ui/compare/v126.5.0...v126.6.0) (2025-06-26)
+
+
+### Features
+
+* **ActionsMenu:** Add autoclose on context menu event ([fb883f0](https://github.com/cozy/cozy-ui/commit/fb883f0))
+
+# [126.5.0](https://github.com/cozy/cozy-ui/compare/v126.4.0...v126.5.0) (2025-06-19)
+
+
+### Bug Fixes
+
+* **VirtualizedTable:** Remove using react suspense ([a1f8030](https://github.com/cozy/cozy-ui/commit/a1f8030))
+
+
+### Features
+
+* **VirtualizedTable:** Add some prop spread to better give controls ([4b080e6](https://github.com/cozy/cozy-ui/commit/4b080e6))
+
 # [126.4.0](https://github.com/cozy/cozy-ui/compare/v126.3.0...v126.4.0) (2025-06-17)
 
 

package/package.json

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

package/react/ActionsMenu/index.jsx

@@ -20,6 +20,7 @@ const ActionsMenu = forwardRef(
       children,
       componentsProps,
       onClose,
+      autoCloseOnContextMenu,
       ...props
     },
     ref
@@ -34,6 +35,12 @@ const ActionsMenu = forwardRef(
         anchorOrigin={anchorOrigin}
         transformOrigin={transformOrigin}
         keepMounted
+        {...(autoCloseOnContextMenu && {
+          onContextMenu: ev => {
+            ev.preventDefault()
+            onClose()
+          }
+        })}
         onClose={onClose}
       >
         {children}
@@ -53,6 +60,7 @@ ActionsMenu.defaultProps = {
     horizontal: 'left'
   },
   autoClose: true,
+  autoCloseOnContextMenu: true,
   componentsProps: {}
 }
 
@@ -70,6 +78,8 @@ ActionsMenu.propTypes = {
   }),
   /** Whether the menu should automatically close itself when an item is clicked */
   autoClose: PropTypes.bool,
+  /** Whether the menu should automatically close itself when right-click is triggered */
+  autoCloseOnContextMenu: PropTypes.bool,
   /* Props passed to components with the same name */
   componentsProps: PropTypes.shape({
     /** Props spread to ActionsItems component */

package/react/Table/Virtualized/index.jsx

@@ -1,15 +1,12 @@
 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(
   (
     {
@@ -17,12 +14,14 @@ const VirtualizedTable = forwardRef(
       columns,
       defaultOrder,
       secondarySort,
-      selectedItems = [],
-      onSelect = () => {},
-      onSelectAll = () => {},
-      isSelectedItem = () => {},
+      selectedItems,
+      onSelect,
+      onSelectAll,
+      isSelectedItem,
       componentsProps,
       dragProps,
+      context,
+      components,
       ...props
     },
     ref
@@ -54,15 +53,17 @@ const VirtualizedTable = forwardRef(
         ref={ref}
         data={data}
         context={{
+          ...context,
           isSelectedItem,
           selectedItems,
           dragProps,
           itemsInDropProcess,
           setItemsInDropProcess
         }}
-        components={virtuosoComponents}
+        components={components || virtuosoComponents}
         fixedHeaderContent={() => (
           <FixedHeaderContent
+            {...componentsProps?.FixedHeaderContent}
             columns={columns}
             rowCount={rows.length}
             selectedCount={selectedItems.length}
@@ -74,6 +75,7 @@ const VirtualizedTable = forwardRef(
         )}
         itemContent={(_index, row) => (
           <RowContent
+            {...componentsProps?.RowContent}
             index={_index}
             row={row}
             columns={columns}
@@ -91,15 +93,22 @@ const VirtualizedTable = forwardRef(
 
 VirtualizedTable.displayName = 'VirtualizedTable'
 
+VirtualizedTable.defaultProps = {
+  selectedItems: [],
+  isSelectedItem: () => {},
+  onSelect: () => {},
+  onSelectAll: () => {}
+}
+
 const VirtuosoTableWrapper = props => {
   if (!props.dragProps?.enabled) {
     return <VirtualizedTable {...props} />
   } else {
     return (
-      <React.Suspense>
+      <>
         <CustomDragLayer dragId={props.dragProps.dragId} />
         <VirtualizedTable {...props} />
-      </React.Suspense>
+      </>
     )
   }
 }

package/react/Table/Virtualized/virtuosoComponents.jsx

@@ -1,5 +1,7 @@
 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'
@@ -8,9 +10,6 @@ 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}
@@ -28,11 +27,9 @@ const virtuosoComponents = {
       return <_TableContainer {...props} ref={ref} />
     } else {
       return (
-        <React.Suspense>
-          <DnDConfigWrapper ref={ref}>
-            <_TableContainer {...props} ref={ref} />
-          </DnDConfigWrapper>
-        </React.Suspense>
+        <DnDConfigWrapper ref={ref}>
+          <_TableContainer {...props} ref={ref} />
+        </DnDConfigWrapper>
       )
     }
   }),
@@ -48,16 +45,14 @@ const virtuosoComponents = {
       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>
+        <TableRowDnD
+          {...props}
+          item={item}
+          context={context}
+          selected={isSelected}
+          disabled={isDisabled}
+          hover
+        />
       )
     }
   })

package/transpiled/react/ActionsMenu/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["docs", "actions", "anchorOrigin", "children", "componentsProps", "onClose"];
+var _excluded = ["docs", "actions", "anchorOrigin", "children", "componentsProps", "onClose", "autoCloseOnContextMenu"];
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import ActionsItems from "cozy-ui/transpiled/react/ActionsMenu/ActionsItems";
@@ -23,6 +23,7 @@ var ActionsMenu = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       children = _ref2.children,
       componentsProps = _ref2.componentsProps,
       onClose = _ref2.onClose,
+      autoCloseOnContextMenu = _ref2.autoCloseOnContextMenu,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   var transformOrigin = useTransformOrigin(anchorOrigin);
@@ -31,7 +32,13 @@ var ActionsMenu = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     getContentAnchorEl: null,
     anchorOrigin: anchorOrigin,
     transformOrigin: transformOrigin,
-    keepMounted: true,
+    keepMounted: true
+  }, autoCloseOnContextMenu && {
+    onContextMenu: function onContextMenu(ev) {
+      ev.preventDefault();
+      onClose();
+    }
+  }, {
     onClose: onClose
   }), children, /*#__PURE__*/React.createElement(ActionsItems, _extends({}, componentsProps.actionsItems, {
     docs: docs,
@@ -44,6 +51,7 @@ ActionsMenu.defaultProps = {
     horizontal: 'left'
   },
   autoClose: true,
+  autoCloseOnContextMenu: true,
   componentsProps: {}
 };
 ActionsMenu.propTypes = {
@@ -65,6 +73,9 @@ ActionsMenu.propTypes = {
   /** Whether the menu should automatically close itself when an item is clicked */
   autoClose: PropTypes.bool,
 
+  /** Whether the menu should automatically close itself when right-click is triggered */
+  autoCloseOnContextMenu: PropTypes.bool,
+
   /* Props passed to components with the same name */
   componentsProps: PropTypes.shape({
     /** Props spread to ActionsItems component */

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

@@ -1,31 +1,33 @@
 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 = ["rows", "columns", "defaultOrder", "secondarySort", "selectedItems", "onSelect", "onSelectAll", "isSelectedItem", "componentsProps", "dragProps"];
+var _excluded = ["rows", "columns", "defaultOrder", "secondarySort", "selectedItems", "onSelect", "onSelectAll", "isSelectedItem", "componentsProps", "dragProps", "context", "components"];
+
+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, { 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,
       defaultOrder = _ref.defaultOrder,
       secondarySort = _ref.secondarySort,
-      _ref$selectedItems = _ref.selectedItems,
-      selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
-      _ref$onSelect = _ref.onSelect,
-      onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
-      _ref$onSelectAll = _ref.onSelectAll,
-      onSelectAll = _ref$onSelectAll === void 0 ? function () {} : _ref$onSelectAll,
-      _ref$isSelectedItem = _ref.isSelectedItem,
-      isSelectedItem = _ref$isSelectedItem === void 0 ? function () {} : _ref$isSelectedItem,
+      selectedItems = _ref.selectedItems,
+      onSelect = _ref.onSelect,
+      onSelectAll = _ref.onSelectAll,
+      isSelectedItem = _ref.isSelectedItem,
       componentsProps = _ref.componentsProps,
       dragProps = _ref.dragProps,
+      context = _ref.context,
+      components = _ref.components,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState('asc'),
@@ -67,16 +69,16 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(TableVirtuoso, _extends({}, props, {
     ref: ref,
     data: data,
-    context: {
+    context: _objectSpread(_objectSpread({}, context), {}, {
       isSelectedItem: isSelectedItem,
       selectedItems: selectedItems,
       dragProps: dragProps,
       itemsInDropProcess: itemsInDropProcess,
       setItemsInDropProcess: setItemsInDropProcess
-    },
-    components: virtuosoComponents,
+    }),
+    components: components || virtuosoComponents,
     fixedHeaderContent: function fixedHeaderContent() {
-      return /*#__PURE__*/React.createElement(FixedHeaderContent, {
+      return /*#__PURE__*/React.createElement(FixedHeaderContent, _extends({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.FixedHeaderContent, {
         columns: columns,
         rowCount: rows.length,
         selectedCount: selectedItems.length,
@@ -84,23 +86,29 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
         orderBy: orderBy,
         onClick: handleSort,
         onSelectAllClick: handleSelectAll
-      });
+      }));
     },
     itemContent: function itemContent(_index, row) {
       var _componentsProps$rowC;
 
-      return /*#__PURE__*/React.createElement(RowContent, {
+      return /*#__PURE__*/React.createElement(RowContent, _extends({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.RowContent, {
         index: _index,
         row: row,
         columns: columns,
         isSelectedItem: isSelectedItem,
         onSelectClick: onSelect
-      }, componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$rowC = componentsProps.rowContent) === null || _componentsProps$rowC === void 0 ? void 0 : _componentsProps$rowC.children);
+      }), componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$rowC = componentsProps.rowContent) === null || _componentsProps$rowC === void 0 ? void 0 : _componentsProps$rowC.children);
     },
     rowSpan: 2
   }));
 });
 VirtualizedTable.displayName = 'VirtualizedTable';
+VirtualizedTable.defaultProps = {
+  selectedItems: [],
+  isSelectedItem: function isSelectedItem() {},
+  onSelect: function onSelect() {},
+  onSelectAll: function onSelectAll() {}
+};
 
 var VirtuosoTableWrapper = function VirtuosoTableWrapper(props) {
   var _props$dragProps;
@@ -108,7 +116,7 @@ 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, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomDragLayer, {
       dragId: props.dragProps.dragId
     }), /*#__PURE__*/React.createElement(VirtualizedTable, props));
   }

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

@@ -9,6 +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, { 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";
@@ -16,12 +18,6 @@ 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, {
@@ -47,11 +43,11 @@ var virtuosoComponents = {
         ref: ref
       }));
     } else {
-      return /*#__PURE__*/React.createElement(React.Suspense, null, /*#__PURE__*/React.createElement(DnDConfigWrapper, {
+      return /*#__PURE__*/React.createElement(DnDConfigWrapper, {
         ref: ref
       }, /*#__PURE__*/React.createElement(_TableContainer, _extends({}, props, {
         ref: ref
-      }))));
+      })));
     }
   }),
   Table: /*#__PURE__*/forwardRef(function (props, ref) {
@@ -91,13 +87,13 @@ var virtuosoComponents = {
         hover: true
       }));
     } else {
-      return /*#__PURE__*/React.createElement(React.Suspense, null, /*#__PURE__*/React.createElement(TableRowDnD, _extends({}, props, {
+      return /*#__PURE__*/React.createElement(TableRowDnD, _extends({}, props, {
         item: item,
         context: context,
         selected: isSelected,
         disabled: isDisabled,
         hover: true
-      })));
+      }));
     }
   })
 };