cozy-ui 127.5.0 → 127.6.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [127.6.0](https://github.com/cozy/cozy-ui/compare/v127.5.0...v127.6.0) (2025-07-29)
+
+
+### Bug Fixes
+
+* **VirtualizedTable:** Remove ref on TableRow ([919f742](https://github.com/cozy/cozy-ui/commit/919f742))
+
+
+### Features
+
+* Upgrade rooks ([51de4e7](https://github.com/cozy/cozy-ui/commit/51de4e7))
+* **VirtualizedTable:** Add `onLongPress` prop on Cell ([7e08d77](https://github.com/cozy/cozy-ui/commit/7e08d77))
+
 # [127.5.0](https://github.com/cozy/cozy-ui/compare/v127.4.0...v127.5.0) (2025-07-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "127.5.0",
+  "version": "127.6.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -183,7 +183,7 @@
     "react-select": "^4.3.0",
     "react-swipeable-views": "^0.13.3",
     "react-virtuoso": "4.12.7",
-    "rooks": "^5.11.2"
+    "rooks": "7.14.1"
   },
   "peerDependencies": {
     "cozy-client": ">=52.1.0",

package/react/Table/Readme.md

@@ -110,8 +110,9 @@ const onSelectAll = rows => {
     onSelectAll={onSelectAll}
     componentsProps={{
       rowContent: {
-        onClick: (row, column) => { console.info(`click on cell. Row ${row['id']}, Column ${column['id']}`) }
-      }
+        onClick: (row, column) => { console.info(`click on cell. Row ${row['id']}, Column ${column['id']}`) },
+        onLongPress: (row, column) => { console.info(`long press on cell. Row ${row['id']}, Column ${column['id']}`) },
+      },
     }}
   />
 </div>

package/react/Table/Virtualized/Cell.jsx

@@ -1,5 +1,6 @@
 import get from 'lodash/get'
-import React from 'react'
+import React, { useState } from 'react'
+import { useOnLongPress } from 'rooks'
 
 import TableCell from '../../TableCell'
 import { makeStyles } from '../../styles'
@@ -12,17 +13,34 @@ const useStyles = makeStyles({
   }
 })
 
-const Cell = ({ row, columns, column, onClick, children }) => {
+const Cell = ({ row, columns, column, onClick, onLongPress, children }) => {
+  const [isLongPress, setIsLongPress] = useState(false) // onClick is triggered after a long press anyway, so we need this bool to avoid this behavior
+
   const classes = useStyles({ column, isClickable: !!onClick })
   const cellContent = get(row, column.id, '—')
 
+  const longPressRef = useOnLongPress(() => {
+    setIsLongPress(true)
+    onLongPress?.(row, column)
+  })
+
+  const handleClick = () => {
+    if (!isLongPress) {
+      onClick?.(row, column)
+    } else {
+      setIsLongPress(false)
+    }
+  }
+
   return (
     <TableCell
       key={column.id}
+      ref={longPressRef}
       classes={classes}
       align={column.textAlign ?? 'left'}
       padding={column.disablePadding ? 'none' : 'normal'}
-      onClick={() => onClick?.(row, column)}
+      onClick={handleClick}
+      onContextMenu={isLongPress ? ev => ev.preventDefault() : undefined}
     >
       {children
         ? React.Children.map(children, child =>

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

@@ -17,9 +17,9 @@ const virtuosoComponentsDnd = {
       <TableContainer {...props} ref={ref} />
     </DnDConfigWrapper>
   )),
-  TableRow: forwardRef((props, ref) => {
-    return <TableRowDnD {...props} ref={ref} />
-  })
+  TableRow: props => {
+    return <TableRowDnD {...props} />
+  }
 }
 
 export default virtuosoComponentsDnd

package/react/Table/Virtualized/RowContent.jsx

@@ -12,6 +12,7 @@ const RowContent = ({
   context,
   children,
   onSelectClick,
+  onLongPress,
   onClick
 }) => {
   const selectedCount = context.selectedItems.length
@@ -39,6 +40,7 @@ const RowContent = ({
           columns={columns}
           column={column}
           onClick={onClick}
+          onLongPress={onLongPress}
         >
           {children}
         </Cell>

package/react/Table/Virtualized/TableRow.jsx

@@ -1,20 +1,19 @@
 import cx from 'classnames'
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import TableRowClassic from '../../TableRow'
 
-const TableRow = forwardRef(({ item, context, className, ...props }, ref) => {
+const TableRow = ({ item, context, className, ...props }) => {
   const isSelected = context?.isSelectedItem(item)
 
   return (
     <TableRowClassic
       {...props}
       className={cx(className, 'virtualized')}
-      ref={ref}
       selected={isSelected}
       hover
     />
   )
-})
+}
 
 export default TableRow

package/react/Table/Virtualized/index.jsx

@@ -76,7 +76,6 @@ const VirtualizedTable = forwardRef(
             columns={columns}
             context={context}
             onSelectClick={onSelect}
-            onClick={componentsProps?.rowContent?.onClick}
           >
             {componentsProps?.rowContent?.children}
           </RowContent>

package/react/Table/Virtualized/virtuosoComponents.jsx

@@ -29,7 +29,7 @@ const virtuosoComponents = {
   TableFooter: forwardRef(({ context, ...props }, ref) => (
     <TableFooter {...props} ref={ref} />
   )),
-  TableRow: forwardRef((props, ref) => <TableRow {...props} ref={ref} />)
+  TableRow: props => <TableRow {...props} />
 }
 
 export default virtuosoComponents

package/react/UploadQueue/Readme.md

@@ -44,7 +44,7 @@ const data = {
       loaded: 100,
       total: 400,
       speed: 135000,
-      remainingTime: 90
+      remainingTime: 120
     },
     status: 'loading'
   }, {

package/transpiled/react/Table/Virtualized/Cell.d.ts

@@ -1,8 +1,9 @@
-declare var _default: React.MemoExoticComponent<({ row, columns, column, onClick, children }: {
+declare var _default: React.MemoExoticComponent<({ row, columns, column, onClick, onLongPress, children }: {
     row: any;
     columns: any;
     column: any;
     onClick: any;
+    onLongPress: any;
     children: any;
 }) => JSX.Element>;
 export default _default;

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

@@ -1,5 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import get from 'lodash/get';
-import React from 'react';
+import React, { useState } from 'react';
+import { useOnLongPress } from 'rooks';
 import TableCell from "cozy-ui/transpiled/react/TableCell";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles({
@@ -25,21 +27,44 @@ var Cell = function Cell(_ref4) {
   var row = _ref4.row,
       columns = _ref4.columns,
       column = _ref4.column,
-      _onClick = _ref4.onClick,
+      onClick = _ref4.onClick,
+      onLongPress = _ref4.onLongPress,
       children = _ref4.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLongPress = _useState2[0],
+      setIsLongPress = _useState2[1]; // onClick is triggered after a long press anyway, so we need this bool to avoid this behavior
+
+
   var classes = useStyles({
     column: column,
-    isClickable: !!_onClick
+    isClickable: !!onClick
   });
   var cellContent = get(row, column.id, '—');
+  var longPressRef = useOnLongPress(function () {
+    setIsLongPress(true);
+    onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(row, column);
+  });
+
+  var handleClick = function handleClick() {
+    if (!isLongPress) {
+      onClick === null || onClick === void 0 ? void 0 : onClick(row, column);
+    } else {
+      setIsLongPress(false);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(TableCell, {
     key: column.id,
+    ref: longPressRef,
     classes: classes,
     align: (_column$textAlign = column.textAlign) !== null && _column$textAlign !== void 0 ? _column$textAlign : 'left',
     padding: column.disablePadding ? 'none' : 'normal',
-    onClick: function onClick() {
-      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(row, column);
-    }
+    onClick: handleClick,
+    onContextMenu: isLongPress ? function (ev) {
+      return ev.preventDefault();
+    } : undefined
   }, children ? React.Children.map(children, function (child) {
     return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
       row: row,

package/transpiled/react/Table/Virtualized/Dnd/virtuosoComponents.d.ts

@@ -5,7 +5,7 @@ export default virtuosoComponentsDnd;
 */
 declare const virtuosoComponentsDnd: {
     Scroller: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-    TableRow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    TableRow: (props: any) => JSX.Element;
     Table: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
     TableHead: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
     TableBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

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

@@ -29,11 +29,9 @@ var virtuosoComponentsDnd = _objectSpread(_objectSpread({}, virtuosoComponents),
       ref: ref
     })));
   }),
-  TableRow: /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(TableRowDnD, _extends({}, props, {
-      ref: ref
-    }));
-  })
+  TableRow: function TableRow(props) {
+    return /*#__PURE__*/React.createElement(TableRowDnD, props);
+  }
 });
 
 export default virtuosoComponentsDnd;

package/transpiled/react/Table/Virtualized/RowContent.d.ts

@@ -1,10 +1,11 @@
-declare var _default: React.MemoExoticComponent<({ index, row, columns, context, children, onSelectClick, onClick }: {
+declare var _default: React.MemoExoticComponent<({ index, row, columns, context, children, onSelectClick, onLongPress, onClick }: {
     index: any;
     row: any;
     columns: any;
     context: any;
     children: any;
     onSelectClick: any;
+    onLongPress: any;
     onClick: any;
 }) => JSX.Element>;
 export default _default;

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

@@ -11,6 +11,7 @@ var RowContent = function RowContent(_ref) {
       context = _ref.context,
       children = _ref.children,
       onSelectClick = _ref.onSelectClick,
+      onLongPress = _ref.onLongPress,
       onClick = _ref.onClick;
   var selectedCount = context.selectedItems.length;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableCell, {
@@ -35,7 +36,8 @@ var RowContent = function RowContent(_ref) {
       row: row,
       columns: columns,
       column: column,
-      onClick: onClick
+      onClick: onClick,
+      onLongPress: onLongPress
     }, children);
   }));
 };

package/transpiled/react/Table/Virtualized/TableRow.d.ts

@@ -1,3 +1,7 @@
 export default TableRow;
-declare const TableRow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+declare function TableRow({ item, context, className, ...props }: {
+    [x: string]: any;
+    item: any;
+    context: any;
+    className: any;
+}): JSX.Element;

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

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["item", "context", "className"];
 import cx from 'classnames';
-import React, { forwardRef } from 'react';
+import React from 'react';
 import TableRowClassic from "cozy-ui/transpiled/react/TableRow";
-var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
+
+var TableRow = function TableRow(_ref) {
   var item = _ref.item,
       context = _ref.context,
       className = _ref.className,
@@ -13,9 +14,9 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isSelected = context === null || context === void 0 ? void 0 : context.isSelectedItem(item);
   return /*#__PURE__*/React.createElement(TableRowClassic, _extends({}, props, {
     className: cx(className, 'virtualized'),
-    ref: ref,
     selected: isSelected,
     hover: true
   }));
-});
+};
+
 export default TableRow;

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

@@ -80,16 +80,15 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }));
     },
     itemContent: function itemContent(_index, row, context) {
-      var _componentsProps$rowC, _componentsProps$rowC2;
+      var _componentsProps$rowC;
 
       return /*#__PURE__*/React.createElement(RowContent, _extends({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.rowContent, {
         index: _index,
         row: row,
         columns: columns,
         context: context,
-        onSelectClick: onSelect,
-        onClick: componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$rowC = componentsProps.rowContent) === null || _componentsProps$rowC === void 0 ? void 0 : _componentsProps$rowC.onClick
-      }), componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$rowC2 = componentsProps.rowContent) === null || _componentsProps$rowC2 === void 0 ? void 0 : _componentsProps$rowC2.children);
+        onSelectClick: onSelect
+      }), componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$rowC = componentsProps.rowContent) === null || _componentsProps$rowC === void 0 ? void 0 : _componentsProps$rowC.children);
     },
     rowSpan: 2
   }));

package/transpiled/react/Table/Virtualized/virtuosoComponents.d.ts

@@ -5,6 +5,6 @@ declare namespace virtuosoComponents {
     const TableHead: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
     const TableBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
     const TableFooter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-    const TableRow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    function TableRow(props: any): JSX.Element;
 }
 import React from "react";

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

@@ -9,7 +9,7 @@ var _excluded = ["context"],
 /* eslint-disable no-unused-vars */
 import cx from 'classnames';
 import React, { forwardRef } from 'react';
-import TableRow from "cozy-ui/transpiled/react/Table/Virtualized/TableRow";
+import _TableRow from "cozy-ui/transpiled/react/Table/Virtualized/TableRow";
 import Table from "cozy-ui/transpiled/react/Table";
 import TableBody from "cozy-ui/transpiled/react/TableBody";
 import TableContainer from "cozy-ui/transpiled/react/TableContainer";
@@ -63,10 +63,8 @@ var virtuosoComponents = {
       ref: ref
     }));
   }),
-  TableRow: /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(TableRow, _extends({}, props, {
-      ref: ref
-    }));
-  })
+  TableRow: function TableRow(props) {
+    return /*#__PURE__*/React.createElement(_TableRow, props);
+  }
 };
 export default virtuosoComponents;