cozy-ui 142.0.1 → 142.1.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [142.1.0](https://github.com/cozy/cozy-ui/compare/v142.0.1...v142.1.0) (2026-09-24)
+
+
+### Bug Fixes
+
+* **Table:** Keep slow clicks on VirtualizedTable cells without a long press handler ([a283f77](https://github.com/cozy/cozy-ui/commit/a283f77))
+* **Table:** Show a pointer only on clickable VirtualizedTable cells ([9953f49](https://github.com/cozy/cozy-ui/commit/9953f49))
+* **Table:** Sort VirtualizedTable rows only when rows or order change ([b1be981](https://github.com/cozy/cozy-ui/commit/b1be981))
+* **Table:** Translate the VirtualizedTable sort direction announcement ([2d67cd8](https://github.com/cozy/cozy-ui/commit/2d67cd8))
+
+
+### Features
+
+* **Table:** Export VirtuosoMockContext to test VirtualizedTable ([ba3e8bd](https://github.com/cozy/cozy-ui/commit/ba3e8bd))
+
 ## [142.0.1](https://github.com/cozy/cozy-ui/compare/v142.0.0...v142.0.1) (2026-09-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "142.0.1",
+  "version": "142.1.0",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/Table/Readme.md

@@ -3,6 +3,7 @@
 ```jsx
 import { useState } from 'react'
 import VirtualizedTable from 'cozy-ui/transpiled/react/Table/Virtualized'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Variants from 'cozy-ui/docs/components/Variants'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Stack from 'cozy-ui/transpiled/react/Stack'
@@ -138,26 +139,28 @@ const SelectButton = () => {
 
 ;
 
-<Variants initialVariants={initialVariants} screenshotAllVariants>
-  {variant => (
-    <>
-      <SelectionProvider>
-        <Typography className="u-mt-1" variant="h4">Not sorted table</Typography>
-        <SelectButton />
-        <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-          <ExampleTable variant={variant} />
-        </div>
-      </SelectionProvider>
-      <SelectionProvider>
-        <Typography className="u-mt-1" variant="h4">Sorted table</Typography>
-        <SelectButton />
-        <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-          <ExampleTable variant={variant} defaultOrder={{by: columns[0].id, direction: 'asc'}} />
-        </div>
-      </SelectionProvider>
-    </>
-  )}
-</Variants>
+<DemoProvider>
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => (
+      <>
+        <SelectionProvider>
+          <Typography className="u-mt-1" variant="h4">Not sorted table</Typography>
+          <SelectButton />
+          <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+            <ExampleTable variant={variant} />
+          </div>
+        </SelectionProvider>
+        <SelectionProvider>
+          <Typography className="u-mt-1" variant="h4">Sorted table</Typography>
+          <SelectButton />
+          <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+            <ExampleTable variant={variant} defaultOrder={{by: columns[0].id, direction: 'asc'}} />
+          </div>
+        </SelectionProvider>
+      </>
+    )}
+  </Variants>
+</DemoProvider>
 ```
 
 ### With Drag'n'Drop
@@ -165,6 +168,7 @@ const SelectButton = () => {
 ```jsx
 import { useState } from 'react'
 import VirtualizedTableDnd from 'cozy-ui/transpiled/react/Table/Virtualized/Dnd'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import SelectionProvider, { useSelection } from 'cozy-ui/transpiled/react/providers/Selection'
 import { DndProvider } from 'react-dnd'
@@ -238,11 +242,13 @@ const DndExample = () => {
 
 ;
 
-<SelectionProvider>
-  <DndProvider backend={HTML5Backend}>
-    <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-      <DndExample />
-    </div>
-  </DndProvider>
-</SelectionProvider>
+<DemoProvider>
+  <SelectionProvider>
+    <DndProvider backend={HTML5Backend}>
+      <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+        <DndExample />
+      </div>
+    </DndProvider>
+  </SelectionProvider>
+</DemoProvider>
 ```

package/react/Table/Virtualized/Cell.jsx

@@ -28,17 +28,21 @@ const Cell = ({
   const [isLongPress, setIsLongPress] = useState(false) // onClick is triggered after a long press anyway, so we need this bool to avoid this behavior
   const [lastClickTime, setLastClickTime] = useState(0)
 
-  const classes = useStyles({ column, isClickable: !!onClick })
+  const classes = useStyles({
+    column,
+    isClickable: !!onClick && !column.disableClick
+  })
   const cellContent = get(row, column.id, '—')
 
   const longPressRef = useOnLongPress(
     () => {
-      if (column.disableClick) {
+      // without a long press handler, a slow click must stay a click
+      if (column.disableClick || !onLongPress) {
         return
       }
 
       setIsLongPress(true)
-      onLongPress?.(row, column)
+      onLongPress(row, column)
     },
     { duration: 300 }
   )

package/react/Table/Virtualized/HeadCell.jsx

@@ -1,9 +1,16 @@
 import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import ru from './locales/ru.json'
+import vi from './locales/vi.json'
 import TableCell from '../../TableCell'
 import TableSortLabel from '../../TableSortLabel'
 import { makeStyles } from '../../styles'
 
+const locales = { en, fr, ru, vi }
+
 const useStyles = makeStyles({
   root: {
     width: ({ column }) => column.width,
@@ -18,6 +25,8 @@ const TableHeadCell = ({
   orderDirection,
   onClick
 }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
   const classes = useStyles({ column })
 
   return (
@@ -39,8 +48,8 @@ const TableHeadCell = ({
           {orderBy === column.id && (
             <span className={className}>
               {orderDirection === 'desc'
-                ? 'sorted descending'
-                : 'sorted ascending'}
+                ? t('VirtualizedTable.sortedDesc')
+                : t('VirtualizedTable.sortedAsc')}
             </span>
           )}
         </TableSortLabel>

package/react/Table/Virtualized/index.jsx

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types'
-import React, { useState, forwardRef } from 'react'
+import React, { useMemo, useState, forwardRef } from 'react'
 import { TableVirtuoso, GroupedTableVirtuoso } from 'react-virtuoso'
 
+export { VirtuosoMockContext } from 'react-virtuoso'
+
 import FixedHeaderContent from './FixedHeaderContent'
 import RowContent from './RowContent'
 import { stableSort, getComparator } from './helpers'
@@ -32,10 +34,12 @@ const VirtualizedTable = forwardRef(
     )
     const [orderBy, setOrderBy] = useState(defaultOrder?.by ?? undefined)
 
-    const sortedData = orderBy
-      ? stableSort(rows, getComparator(orderDirection, orderBy))
-      : rows
-    const data = secondarySort ? secondarySort(sortedData) : sortedData
+    const data = useMemo(() => {
+      const sortedData = orderBy
+        ? stableSort(rows, getComparator(orderDirection, orderBy))
+        : rows
+      return secondarySort ? secondarySort(sortedData) : sortedData
+    }, [rows, orderBy, orderDirection, secondarySort])
     const { groupLabels, groupCounts } = groups?.(data) || {}
     const isGroupedTable = !!groupCounts
     const _context = {

package/react/Table/Virtualized/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "VirtualizedTable": {
+    "sortedAsc": "sorted ascending",
+    "sortedDesc": "sorted descending"
+  }
+}

package/react/Table/Virtualized/locales/fr.json

@@ -0,0 +1,6 @@
+{
+  "VirtualizedTable": {
+    "sortedAsc": "tri croissant",
+    "sortedDesc": "tri décroissant"
+  }
+}

package/react/Table/Virtualized/locales/ru.json

@@ -0,0 +1,6 @@
+{
+  "VirtualizedTable": {
+    "sortedAsc": "отсортировано по возрастанию",
+    "sortedDesc": "отсортировано по убыванию"
+  }
+}

package/react/Table/Virtualized/locales/vi.json

@@ -0,0 +1,6 @@
+{
+  "VirtualizedTable": {
+    "sortedAsc": "sắp xếp tăng dần",
+    "sortedDesc": "sắp xếp giảm dần"
+  }
+}

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

@@ -47,16 +47,17 @@ var Cell = function Cell(_ref4) {
 
   var classes = useStyles({
     column: column,
-    isClickable: !!onClick
+    isClickable: !!onClick && !column.disableClick
   });
   var cellContent = get(row, column.id, '—');
   var longPressRef = useOnLongPress(function () {
-    if (column.disableClick) {
+    // without a long press handler, a slow click must stay a click
+    if (column.disableClick || !onLongPress) {
       return;
     }
 
     setIsLongPress(true);
-    onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(row, column);
+    onLongPress(row, column);
   }, {
     duration: 300
   });

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

@@ -1,7 +1,38 @@
 import React from 'react';
+import { useI18n, useExtendI18n } from 'twake-i18n';
+var en = {
+  VirtualizedTable: {
+    sortedAsc: "sorted ascending",
+    sortedDesc: "sorted descending"
+  }
+};
+var fr = {
+  VirtualizedTable: {
+    sortedAsc: "tri croissant",
+    sortedDesc: "tri d\xE9croissant"
+  }
+};
+var ru = {
+  VirtualizedTable: {
+    sortedAsc: "\u043E\u0442\u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u043F\u043E \u0432\u043E\u0437\u0440\u0430\u0441\u0442\u0430\u043D\u0438\u044E",
+    sortedDesc: "\u043E\u0442\u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u043F\u043E \u0443\u0431\u044B\u0432\u0430\u043D\u0438\u044E"
+  }
+};
+var vi = {
+  VirtualizedTable: {
+    sortedAsc: "s\u1EAFp x\u1EBFp t\u0103ng d\u1EA7n",
+    sortedDesc: "s\u1EAFp x\u1EBFp gi\u1EA3m d\u1EA7n"
+  }
+};
 import TableCell from "cozy-ui/transpiled/react/TableCell";
 import TableSortLabel from "cozy-ui/transpiled/react/TableSortLabel";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var locales = {
+  en: en,
+  fr: fr,
+  ru: ru,
+  vi: vi
+};
 var useStyles = makeStyles({
   root: {
     width: function width(_ref) {
@@ -23,6 +54,11 @@ var TableHeadCell = function TableHeadCell(_ref3) {
       orderBy = _ref3.orderBy,
       orderDirection = _ref3.orderDirection,
       onClick = _ref3.onClick;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
   var classes = useStyles({
     column: column
   });
@@ -39,7 +75,7 @@ var TableHeadCell = function TableHeadCell(_ref3) {
     onClick: onClick
   }, column.label, orderBy === column.id && /*#__PURE__*/React.createElement("span", {
     className: className
-  }, orderDirection === 'desc' ? 'sorted descending' : 'sorted ascending')) : column.label);
+  }, orderDirection === 'desc' ? t('VirtualizedTable.sortedDesc') : t('VirtualizedTable.sortedAsc'))) : column.label);
 };
 
 export default TableHeadCell;

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

@@ -1,3 +1,4 @@
+export { VirtuosoMockContext } from "react-virtuoso";
 export default VirtualizedTable;
 declare const VirtualizedTable: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";

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

@@ -9,8 +9,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 PropTypes from 'prop-types';
-import React, { useState, forwardRef } from 'react';
+import React, { useMemo, useState, forwardRef } from 'react';
 import { TableVirtuoso, GroupedTableVirtuoso } from 'react-virtuoso';
+export { VirtuosoMockContext } from 'react-virtuoso';
 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";
@@ -43,8 +44,10 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
       orderBy = _useState4[0],
       setOrderBy = _useState4[1];
 
-  var sortedData = orderBy ? stableSort(rows, getComparator(orderDirection, orderBy)) : rows;
-  var data = secondarySort ? secondarySort(sortedData) : sortedData;
+  var data = useMemo(function () {
+    var sortedData = orderBy ? stableSort(rows, getComparator(orderDirection, orderBy)) : rows;
+    return secondarySort ? secondarySort(sortedData) : sortedData;
+  }, [rows, orderBy, orderDirection, secondarySort]);
 
   var _ref2 = (groups === null || groups === void 0 ? void 0 : groups(data)) || {},
       groupLabels = _ref2.groupLabels,