cozy-ui 139.0.2 → 139.2.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [139.2.0](https://github.com/cozy/cozy-ui/compare/v139.1.0...v139.2.0) (2026-06-09)
+
+
+### Bug Fixes
+
+* Remove override for table that fixed table layout ([a898f1d](https://github.com/cozy/cozy-ui/commit/a898f1d))
+
+
+### Features
+
+* Remove useless overrides for checkboxes in tables ([5fd8270](https://github.com/cozy/cozy-ui/commit/5fd8270))
+
+# [139.1.0](https://github.com/cozy/cozy-ui/compare/v139.0.2...v139.1.0) (2026-06-03)
+
+
+### Bug Fixes
+
+* **Table:** No need colSpan + 1 anymore, checkbox has been removed ([4329e35](https://github.com/cozy/cozy-ui/commit/4329e35))
+
+
+### Features
+
+* **Table:** Add `noWrap` column prop to enable ellipsis on cells content ([5ebd5c0](https://github.com/cozy/cozy-ui/commit/5ebd5c0))
+* **Table:** Apply tableLayout fixed for ellipsis support ([00663fa](https://github.com/cozy/cozy-ui/commit/00663fa))
+
 ## [139.0.2](https://github.com/cozy/cozy-ui/compare/v139.0.1...v139.0.2) (2026-06-02)
 
 

package/package.json

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

package/react/MuiCozyTheme/overrides/makeLightOverrides.js

@@ -516,23 +516,7 @@ export const makeLightOverrides = theme => ({
   },
   MuiTableHead: {
     root: {
-      backgroundColor: theme.palette.background.paper,
-      '&.virtualized': {
-        '& .virtualizedCheckbox': {
-          opacity: 0,
-          '&.checked': {
-            opacity: 1
-          },
-          '&:hover': {
-            opacity: 1
-          }
-        },
-        '&:hover': {
-          '& .virtualizedCheckbox': {
-            opacity: 0.5
-          }
-        }
-      }
+      backgroundColor: theme.palette.background.paper
     }
   },
   MuiTableRow: {
@@ -544,25 +528,6 @@ export const makeLightOverrides = theme => ({
         cursor: 'pointer',
         pointerEvents: 'none',
         opacity: 0.5
-      },
-      '&.virtualized': {
-        '& .virtualizedCheckbox': {
-          opacity: 0,
-          '&.visible': {
-            opacity: 0.5
-          },
-          '&.checked': {
-            opacity: 1
-          },
-          '&:hover': {
-            opacity: 1
-          }
-        },
-        '&:hover': {
-          '& .virtualizedCheckbox': {
-            opacity: 0.5
-          }
-        }
       }
     }
   },

package/react/Table/Readme.md

@@ -41,7 +41,10 @@ const columns = [
   {
     id: 'name',
     disablePadding: false,
-    label: 'Dessert'
+    label: 'Dessert',
+    width: 300,
+    maxWidth: 300,
+    noWrap: true
   },
   {
     id: 'calories',
@@ -75,7 +78,7 @@ const columns = [
   }
 ]
 
-const initialVariants = [{ grouped: false}]
+const initialVariants = [{ grouped: false }]
 
 // Very basic usage only works when Dessert is sorted "asc"
 // Ideally you have to create a logic to create groups with sorted data
@@ -89,62 +92,69 @@ const ExampleTable = ({ variant, ...props }) => {
   }
 
   return (
-    <div>
-      <Button
+    <VirtualizedTable
+      {...props}
+      rows={rows}
+      columns={columns}
+      groups={variant.grouped ? makeGroups : undefined}
+      selectedItems={selectedItemsId}
+      isSelectedItem={row => isSelectedItem(row.id)}
+      onSortChange={onSortChange}
+      componentsProps={{
+        rowContent: {
+          onClick: (row, column) => {
+            row.id !== 1
+              ? toggleSelectedItem(row.id)
+              : undefined
+          },
+          onDoubleClick: (row, column) => {
+            row.id !== 1
+              ? console.info(`double click on cell. Row ${row['id']}, Column ${column['id']}`)
+              : undefined
+          },
+          onLongPress: (row, column) => {
+            row.id !== 1
+              ? console.info(`long press on cell. Row ${row['id']}, Column ${column['id']}`)
+              : undefined
+          }
+        }
+      }}
+    />
+  )
+}
+
+const SelectButton = () => {
+  const { toggleSelectAllItems } = useSelection()
+
+  return (
+    <Button
         className="u-mt-1 u-mb-1"
         variant="ghost"
         label="Select all"
         onClick={() => toggleSelectAllItems(rows.map(item => item.id !== 1 ? item.id : undefined))}
-      />
-      <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-        <VirtualizedTable
-          {...props}
-          rows={rows}
-          columns={columns}
-          groups={variant.grouped ? makeGroups : undefined}
-          selectedItems={selectedItemsId}
-          isSelectedItem={row => isSelectedItem(row.id)}
-          onSortChange={onSortChange}
-          componentsProps={{
-            rowContent: {
-              onClick: (row, column) => {
-                row.id !== 1
-                  ? toggleSelectedItem(row.id)
-                  : undefined
-              },
-              onDoubleClick: (row, column) => {
-                row.id !== 1
-                  ? console.info(`double click on cell. Row ${row['id']}, Column ${column['id']}`)
-                  : undefined
-              },
-              onLongPress: (row, column) => {
-                row.id !== 1
-                  ? console.info(`long press on cell. Row ${row['id']}, Column ${column['id']}`)
-                  : undefined
-              }
-            }
-          }}
-        />
-      </div>
-    </div>
+    />
   )
 }
 
+;
+
 <Variants initialVariants={initialVariants} screenshotAllVariants>
   {variant => (
     <>
-      <Typography variant="h4">Not sorted table</Typography>
-      <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%", marginBottom: "6rem" }}>
-        <SelectionProvider>
+      <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} />
-        </SelectionProvider>
-      </div>
-      <Typography className="u-mt-1" variant="h4">Sorted table</Typography>
-      <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-        <SelectionProvider>
+        </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'}} />
-        </SelectionProvider>
-      </div>
+        </div>
+      </SelectionProvider>
     </>
   )}
 </Variants>
@@ -175,10 +185,18 @@ const rows = [
   createData(7, 'Jelly Bean', 375, 0.0, 94, 0.0),
   createData(8, 'KitKat', 518, 26.0, 65, 7.0),
   createData(9, 'Oreo', 437, 18.0, 63, 4.0),
+  createData(
+    10,
+    'Ice cream with a very long list of ingredient to see how the table can handle this kind of item, and this is the end',
+    237,
+    9.0,
+    37,
+    4.3
+  )
 ]
 
 const columns = [
-  { id: 'name', disablePadding: false, label: 'Dessert' },
+  { id: 'name', disablePadding: false, label: 'Dessert', noWrap: true },
   { id: 'calories', disablePadding: false, width: 80, label: 'Calories', textAlign: 'left' },
   { id: 'fat', disablePadding: false, width: 85, label: 'Fat (g)', textAlign: 'right' },
   { id: 'carbs', disablePadding: false, width: 115, label: 'Carbs (g)', textAlign: 'right' },
@@ -199,36 +217,32 @@ const DndExample = () => {
   }
 
   return (
-    <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-      <VirtualizedTableDnd
-        rows={rows}
-        columns={columns}
-        dragProps={dragProps}
-        selectedItems={selectedItemsId}
-        isSelectedItem={row => isSelectedItem(row._id)}
-        componentsProps={{
-          rowContent: {
-            onClick: (row, column) => toggleSelectedItem(row._id),
-            onDoubleClick: (row, column) => {
-              console.info(`double click on cell. Row ${row['_id']}, Column ${column['id']}`)
-            },
-            onLongPress: (row, column) => { console.info(`long press on cell. Row ${row['_id']}, Column ${column['id']}`) },
+    <VirtualizedTableDnd
+      rows={rows}
+      columns={columns}
+      dragProps={dragProps}
+      selectedItems={selectedItemsId}
+      isSelectedItem={row => isSelectedItem(row._id)}
+      componentsProps={{
+        rowContent: {
+          onClick: (row, column) => toggleSelectedItem(row._id),
+          onDoubleClick: (row, column) => {
+            console.info(`double click on cell. Row ${row['_id']}, Column ${column['id']}`)
           },
-        }}
-      />
-    </div>
+          onLongPress: (row, column) => { console.info(`long press on cell. Row ${row['_id']}, Column ${column['id']}`) },
+        },
+      }}
+    />
   )
 }
 
 ;
 
-<>
-  <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-    <SelectionProvider>
-      <DndProvider backend={HTML5Backend}>
-        <DndExample />
-      </DndProvider>
-    </SelectionProvider>
-  </div>
-</>
+<SelectionProvider>
+  <DndProvider backend={HTML5Backend}>
+    <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+      <DndExample />
+    </div>
+  </DndProvider>
+</SelectionProvider>
 ```

package/react/Table/Virtualized/Cell.jsx

@@ -67,6 +67,7 @@ const Cell = ({
       key={column.id}
       ref={longPressRef}
       classes={classes}
+      className={column.noWrap ? 'u-ellipsis' : undefined}
       align={column.textAlign ?? 'left'}
       padding={column.disablePadding ? 'none' : 'normal'}
       onClick={handleClick}

package/react/Table/Virtualized/HeadCell.jsx

@@ -24,6 +24,7 @@ const TableHeadCell = ({
     <TableCell
       key={column.id}
       classes={classes}
+      className={column.noWrap ? 'u-ellipsis' : undefined}
       align={column.textAlign ?? 'left'}
       padding={column.disablePadding ? 'none' : 'normal'}
       sortDirection={orderBy === column.id ? orderDirection : false}

package/react/Table/Virtualized/index.jsx

@@ -77,7 +77,7 @@ const VirtualizedTable = forwardRef(
         )}
         {...(isGroupedTable && {
           groupContent: index => (
-            <TableCell colSpan={columns.length + 1} size="small">
+            <TableCell colSpan={columns.length} size="small">
               {groupLabels[index]}
             </TableCell>
           )
@@ -93,7 +93,6 @@ const VirtualizedTable = forwardRef(
             {componentsProps?.rowContent?.children}
           </RowContent>
         )}
-        rowSpan={2}
       />
     )
   }

package/skills/cozy-ui-reference/references/components.md

@@ -1407,6 +1407,25 @@ import Stepper from 'cozy-ui/transpiled/react/Stepper'
 import Table from 'cozy-ui/transpiled/react/Table'
 ```
 
+**Example:**
+
+```jsx
+import { useState } from 'react'
+import VirtualizedTableDnd from 'cozy-ui/transpiled/react/Table/Virtualized/Dnd'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import SelectionProvider, { useSelection } from 'cozy-ui/transpiled/react/providers/Selection'
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+
+<SelectionProvider>
+  <DndProvider backend={HTML5Backend}>
+    <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+      <DndExample />
+    </div>
+  </DndProvider>
+</SelectionProvider>
+```
+
 
 ### Thumbnail
 

package/transpiled/react/MuiCozyTheme/overrides/makeDarkOverrides.d.ts

@@ -589,22 +589,6 @@ export function makeDarkOverrides(theme: any): {
     MuiTableHead: {
         root: {
             backgroundColor: any;
-            '&.virtualized': {
-                '& .virtualizedCheckbox': {
-                    opacity: number;
-                    '&.checked': {
-                        opacity: number;
-                    };
-                    '&:hover': {
-                        opacity: number;
-                    };
-                };
-                '&:hover': {
-                    '& .virtualizedCheckbox': {
-                        opacity: number;
-                    };
-                };
-            };
         };
     };
     MuiTableRow: {
@@ -617,25 +601,6 @@ export function makeDarkOverrides(theme: any): {
                 pointerEvents: string;
                 opacity: number;
             };
-            '&.virtualized': {
-                '& .virtualizedCheckbox': {
-                    opacity: number;
-                    '&.visible': {
-                        opacity: number;
-                    };
-                    '&.checked': {
-                        opacity: number;
-                    };
-                    '&:hover': {
-                        opacity: number;
-                    };
-                };
-                '&:hover': {
-                    '& .virtualizedCheckbox': {
-                        opacity: number;
-                    };
-                };
-            };
         };
     };
     MuiTableCell: {

package/transpiled/react/MuiCozyTheme/overrides/makeLightOverrides.d.ts

@@ -589,22 +589,6 @@ export function makeLightOverrides(theme: any): {
     MuiTableHead: {
         root: {
             backgroundColor: any;
-            '&.virtualized': {
-                '& .virtualizedCheckbox': {
-                    opacity: number;
-                    '&.checked': {
-                        opacity: number;
-                    };
-                    '&:hover': {
-                        opacity: number;
-                    };
-                };
-                '&:hover': {
-                    '& .virtualizedCheckbox': {
-                        opacity: number;
-                    };
-                };
-            };
         };
     };
     MuiTableRow: {
@@ -617,25 +601,6 @@ export function makeLightOverrides(theme: any): {
                 pointerEvents: string;
                 opacity: number;
             };
-            '&.virtualized': {
-                '& .virtualizedCheckbox': {
-                    opacity: number;
-                    '&.visible': {
-                        opacity: number;
-                    };
-                    '&.checked': {
-                        opacity: number;
-                    };
-                    '&:hover': {
-                        opacity: number;
-                    };
-                };
-                '&:hover': {
-                    '& .virtualizedCheckbox': {
-                        opacity: number;
-                    };
-                };
-            };
         };
     };
     MuiTableCell: {

package/transpiled/react/MuiCozyTheme/overrides/makeLightOverrides.js

@@ -490,23 +490,7 @@ export var makeLightOverrides = function makeLightOverrides(theme) {
     },
     MuiTableHead: {
       root: {
-        backgroundColor: theme.palette.background.paper,
-        '&.virtualized': {
-          '& .virtualizedCheckbox': {
-            opacity: 0,
-            '&.checked': {
-              opacity: 1
-            },
-            '&:hover': {
-              opacity: 1
-            }
-          },
-          '&:hover': {
-            '& .virtualizedCheckbox': {
-              opacity: 0.5
-            }
-          }
-        }
+        backgroundColor: theme.palette.background.paper
       }
     },
     MuiTableRow: {
@@ -518,25 +502,6 @@ export var makeLightOverrides = function makeLightOverrides(theme) {
           cursor: 'pointer',
           pointerEvents: 'none',
           opacity: 0.5
-        },
-        '&.virtualized': {
-          '& .virtualizedCheckbox': {
-            opacity: 0,
-            '&.visible': {
-              opacity: 0.5
-            },
-            '&.checked': {
-              opacity: 1
-            },
-            '&:hover': {
-              opacity: 1
-            }
-          },
-          '&:hover': {
-            '& .virtualizedCheckbox': {
-              opacity: 0.5
-            }
-          }
         }
       }
     },

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

@@ -84,6 +84,7 @@ var Cell = function Cell(_ref4) {
     key: column.id,
     ref: longPressRef,
     classes: classes,
+    className: column.noWrap ? 'u-ellipsis' : undefined,
     align: (_column$textAlign = column.textAlign) !== null && _column$textAlign !== void 0 ? _column$textAlign : 'left',
     padding: column.disablePadding ? 'none' : 'normal',
     onClick: handleClick,

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

@@ -29,6 +29,7 @@ var TableHeadCell = function TableHeadCell(_ref3) {
   return /*#__PURE__*/React.createElement(TableCell, {
     key: column.id,
     classes: classes,
+    className: column.noWrap ? 'u-ellipsis' : undefined,
     align: (_column$textAlign = column.textAlign) !== null && _column$textAlign !== void 0 ? _column$textAlign : 'left',
     padding: column.disablePadding ? 'none' : 'normal',
     sortDirection: orderBy === column.id ? orderDirection : false

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

@@ -92,7 +92,7 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, isGroupedTable && {
     groupContent: function groupContent(index) {
       return /*#__PURE__*/React.createElement(TableCell, {
-        colSpan: columns.length + 1,
+        colSpan: columns.length,
         size: "small"
       }, groupLabels[index]);
     }
@@ -106,8 +106,7 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
         columns: columns,
         context: _context
       }), 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';