cozy-ui 139.0.1 → 139.1.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [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)
+
+
+### Bug Fixes
+
+* **useSubmitWithLoader:** Avoid double submit ([c65b431](https://github.com/cozy/cozy-ui/commit/c65b431))
+
 ## [139.0.1](https://github.com/cozy/cozy-ui/compare/v139.0.0...v139.0.1) (2026-06-01)
 
 

package/package.json

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

package/react/MuiCozyTheme/overrides/makeLightOverrides.js

@@ -514,6 +514,13 @@ export const makeLightOverrides = theme => ({
       paddingRight: 16
     }
   },
+  MuiTable: {
+    root: {
+      tableLayout: 'fixed',
+      width: '100%',
+      minWidth: 'max-content'
+    }
+  },
   MuiTableHead: {
     root: {
       backgroundColor: theme.palette.background.paper,

package/react/Table/Readme.md

@@ -41,7 +41,8 @@ const columns = [
   {
     id: 'name',
     disablePadding: false,
-    label: 'Dessert'
+    label: 'Dessert',
+    noWrap: false
   },
   {
     id: 'calories',
@@ -75,7 +76,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 +90,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 +183,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 +215,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/react/hooks/useSubmitWithLoader/index.jsx

@@ -9,6 +9,8 @@ export const useSubmitWithLoader = () => {
   const { t } = useI18n()
 
   const onSubmit = async ({ submit, success, error }) => {
+    if (isLoading) return
+
     setIsLoading(true)
 
     try {

package/react/hooks/useSubmitWithLoader/index.spec.jsx

@@ -0,0 +1,74 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import React from 'react'
+import I18n from 'twake-i18n'
+
+import { useSubmitWithLoader } from './index'
+import AlertProvider from '../../providers/Alert'
+
+jest.mock('../../Snackbar', () => ({
+  __esModule: true,
+  default: ({ children }) => children
+}))
+
+const renderUseSubmitWithLoader = () =>
+  renderHook(() => useSubmitWithLoader(), {
+    wrapper: ({ children }) => (
+      <I18n lang="en" dictRequire={() => ({})}>
+        <AlertProvider>{children}</AlertProvider>
+      </I18n>
+    )
+  })
+
+describe('useSubmitWithLoader', () => {
+  it('should not execute submit when isLoading is true', async () => {
+    const { result } = renderUseSubmitWithLoader()
+    const submit = jest.fn()
+
+    act(() => {
+      result.current.onSubmit({ submit, success: { message: 'ok' }, error: {} })
+    })
+    expect(result.current.isLoading).toBe(true)
+
+    await act(async () => {
+      await result.current.onSubmit({
+        submit,
+        success: { message: 'ok' },
+        error: {}
+      })
+    })
+
+    expect(submit).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call success.action when submit succeeds', async () => {
+    const { result } = renderUseSubmitWithLoader()
+    const successAction = jest.fn()
+    const submit = jest.fn().mockResolvedValue(undefined)
+
+    await act(async () => {
+      await result.current.onSubmit({
+        submit,
+        success: { message: 'Success', action: successAction },
+        error: {}
+      })
+    })
+
+    expect(successAction).toHaveBeenCalled()
+  })
+
+  it('should call error.action when submit throws', async () => {
+    const { result } = renderUseSubmitWithLoader()
+    const errorAction = jest.fn()
+    const submit = jest.fn().mockRejectedValue(new Error('fail'))
+
+    await act(async () => {
+      await result.current.onSubmit({
+        submit,
+        success: {},
+        error: { message: () => 'Error', action: errorAction }
+      })
+    })
+
+    expect(errorAction).toHaveBeenCalled()
+  })
+})

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

@@ -586,6 +586,13 @@ export function makeDarkOverrides(theme: any): {
             paddingRight: number;
         };
     };
+    MuiTable: {
+        root: {
+            tableLayout: string;
+            width: string;
+            minWidth: string;
+        };
+    };
     MuiTableHead: {
         root: {
             backgroundColor: any;

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

@@ -586,6 +586,13 @@ export function makeLightOverrides(theme: any): {
             paddingRight: number;
         };
     };
+    MuiTable: {
+        root: {
+            tableLayout: string;
+            width: string;
+            minWidth: string;
+        };
+    };
     MuiTableHead: {
         root: {
             backgroundColor: any;

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

@@ -488,6 +488,13 @@ export var makeLightOverrides = function makeLightOverrides(theme) {
         paddingRight: 16
       }
     },
+    MuiTable: {
+      root: {
+        tableLayout: 'fixed',
+        width: '100%',
+        minWidth: 'max-content'
+      }
+    },
     MuiTableHead: {
       root: {
         backgroundColor: theme.palette.background.paper,

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';

package/transpiled/react/hooks/useSubmitWithLoader/index.js

@@ -25,23 +25,32 @@ export var useSubmitWithLoader = function useSubmitWithLoader() {
           switch (_context.prev = _context.next) {
             case 0:
               submit = _ref.submit, success = _ref.success, error = _ref.error;
+
+              if (!isLoading) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
               setIsLoading(true);
-              _context.prev = 2;
-              _context.next = 5;
+              _context.prev = 4;
+              _context.next = 7;
               return submit();
 
-            case 5:
+            case 7:
               showAlert({
                 severity: 'success',
                 message: (success === null || success === void 0 ? void 0 : success.message) || t('useSubmitWithLoader.success')
               });
               success === null || success === void 0 ? void 0 : (_success$action = success.action) === null || _success$action === void 0 ? void 0 : _success$action.call(success);
-              _context.next = 13;
+              _context.next = 15;
               break;
 
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](2);
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](4);
               showAlert({
                 severity: 'error',
                 message: (error === null || error === void 0 ? void 0 : (_error$message = error.message) === null || _error$message === void 0 ? void 0 : _error$message.call(error, _context.t0)) || t('useSubmitWithLoader.error', {
@@ -50,17 +59,17 @@ export var useSubmitWithLoader = function useSubmitWithLoader() {
               });
               error === null || error === void 0 ? void 0 : (_error$action = error.action) === null || _error$action === void 0 ? void 0 : _error$action.call(error);
 
-            case 13:
-              _context.prev = 13;
+            case 15:
+              _context.prev = 15;
               setIsLoading(false);
-              return _context.finish(13);
+              return _context.finish(15);
 
-            case 16:
+            case 18:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[2, 9, 13, 16]]);
+      }, _callee, null, [[4, 11, 15, 18]]);
     }));
 
     return function onSubmit(_x) {

package/transpiled/react/hooks/useSubmitWithLoader/index.spec.d.ts

@@ -0,0 +1 @@
+export {};