cozy-ui 127.7.0 → 127.9.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [127.9.0](https://github.com/cozy/cozy-ui/compare/v127.8.0...v127.9.0) (2025-07-31)
+
+
+### Features
+
+* **VirtualizedTable:** Add `disableClick` prop on column config ([6c68c01](https://github.com/cozy/cozy-ui/commit/6c68c01))
+
+# [127.8.0](https://github.com/cozy/cozy-ui/compare/v127.7.0...v127.8.0) (2025-07-30)
+
+
+### Bug Fixes
+
+* **SearchBar:** Adjust flex behavior ([34f78b2](https://github.com/cozy/cozy-ui/commit/34f78b2))
+
+
+### Features
+
+* **TableCell:** Set css for `sizeSmall` ([17ff031](https://github.com/cozy/cozy-ui/commit/17ff031))
+* **VirtualizedTable:** Add `groups` props to be able to group data ([dac73e0](https://github.com/cozy/cozy-ui/commit/dac73e0))
+
 # [127.7.0](https://github.com/cozy/cozy-ui/compare/v127.6.0...v127.7.0) (2025-07-29)
 
 

package/package.json

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

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -571,6 +571,14 @@ export const makeLightNormalOverrides = theme => ({
       color: theme.palette.text.secondary,
       height: '2rem'
     },
+    sizeSmall: {
+      ...theme.typography.subtitle2,
+      paddingBottom: 0,
+      paddingTop: 0,
+      outline: `1px solid ${theme.palette.background.default}`,
+      borderBottom: 'none',
+      backgroundColor: theme.palette.background.default
+    },
     paddingCheckbox: {
       width: 32,
       padding: 0

package/react/SearchBar/index.jsx

@@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({
     position: 'relative',
     alignItems: 'center',
     height: ({ size }) => sizeToPixel[size],
-    flex: 1,
+    flex: 'auto',
     borderRadius: ({ size }) => radiusBySize[size],
     borderStyle: 'solid',
     borderWidth: 1,

package/react/Table/Readme.md

@@ -2,6 +2,7 @@
 
 ```jsx
 import VirtualizedTable from 'cozy-ui/transpiled/react/Table/Virtualized'
+import Variants from 'cozy-ui/docs/components/Variants'
 
 const createData = (id, name, calories, fat, carbs, protein) => {
   return { id, name, calories, fat, carbs, protein }
@@ -64,7 +65,8 @@ const columns = [
     disablePadding: false,
     width: 115,
     label: 'Protein (g)',
-    textAlign: 'right'
+    textAlign: 'right',
+    disableClick: true
   }
 ]
 
@@ -97,23 +99,32 @@ const onSelectAll = rows => {
   }
 }
 
+const initialVariants = [{ grouped: false }]
+
+const makeGroups = () => ({ groupLabels: ['C', 'D', 'Others'], groupCounts: [1,1,12] })
+
 ;
 
-<div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-  <VirtualizedTable
-    rows={rows}
-    columns={columns}
-    defaultOrder={columns[0].id}
-    selectedItems={state.selectedItemsId}
-    isSelectedItem={row => isSelectedItem(row)}
-    onSelect={onSelect}
-    onSelectAll={onSelectAll}
-    componentsProps={{
-      rowContent: {
-        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>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+      <VirtualizedTable
+        rows={rows}
+        columns={columns}
+        groups={variant.grouped ? makeGroups : undefined}
+        defaultOrder={columns[0].id}
+        selectedItems={state.selectedItemsId}
+        isSelectedItem={row => isSelectedItem(row)}
+        onSelect={onSelect}
+        onSelectAll={onSelectAll}
+        componentsProps={{
+          rowContent: {
+            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>
+  )}
+</Variants>
 ```

package/react/Table/Virtualized/Cell.jsx

@@ -20,11 +20,19 @@ const Cell = ({ row, columns, column, onClick, onLongPress, children }) => {
   const cellContent = get(row, column.id, '—')
 
   const longPressRef = useOnLongPress(() => {
+    if (column.disableClick) {
+      return
+    }
+
     setIsLongPress(true)
     onLongPress?.(row, column)
   })
 
   const handleClick = () => {
+    if (column.disableClick) {
+      return
+    }
+
     if (!isLongPress) {
       onClick?.(row, column)
     } else {

package/react/Table/Virtualized/TableRow.jsx

@@ -4,7 +4,8 @@ import React from 'react'
 import TableRowClassic from '../../TableRow'
 
 const TableRow = ({ item, context, className, ...props }) => {
-  const isSelected = context?.isSelectedItem(item)
+  const _item = item || context.data[props['data-item-index']]
+  const isSelected = context.isSelectedItem(_item)
 
   return (
     <TableRowClassic

package/react/Table/Virtualized/index.jsx

@@ -1,16 +1,19 @@
+import PropTypes from 'prop-types'
 import React, { useState, forwardRef } from 'react'
-import { TableVirtuoso } from 'react-virtuoso'
+import { TableVirtuoso, GroupedTableVirtuoso } from 'react-virtuoso'
 
 import FixedHeaderContent from './FixedHeaderContent'
 import RowContent from './RowContent'
 import { stableSort, getComparator } from './helpers'
 import virtuosoComponents from './virtuosoComponents'
+import TableCell from '../../TableCell'
 
 const VirtualizedTable = forwardRef(
   (
     {
       rows,
       columns,
+      groups,
       defaultOrder,
       secondarySort,
       selectedItems,
@@ -29,8 +32,11 @@ const VirtualizedTable = forwardRef(
 
     const sortedData = stableSort(rows, getComparator(order, orderBy))
     const data = secondarySort ? secondarySort(sortedData) : sortedData
+    const { groupLabels, groupCounts } = groups?.(data) || {}
+    const isGroupedTable = !!groupCounts
     const _context = {
       ...context,
+      ...(isGroupedTable && { data }), // we use directly `data` prop if no groupCounts
       isSelectedItem,
       selectedItems
     }
@@ -49,11 +55,14 @@ const VirtualizedTable = forwardRef(
       onSelectAll([])
     }
 
+    const Component = isGroupedTable ? GroupedTableVirtuoso : TableVirtuoso
+
     return (
-      <TableVirtuoso
+      <Component
         {...props}
         ref={ref}
-        data={data}
+        data={!isGroupedTable ? data : undefined}
+        groupCounts={isGroupedTable ? groupCounts : []}
         context={_context}
         components={components || virtuosoComponents}
         fixedHeaderContent={() => (
@@ -68,13 +77,20 @@ const VirtualizedTable = forwardRef(
             onSelectAllClick={handleSelectAll}
           />
         )}
-        itemContent={(_index, row, context) => (
+        {...(isGroupedTable && {
+          groupContent: index => (
+            <TableCell colSpan={columns.length + 1} size="small">
+              {groupLabels[index]}
+            </TableCell>
+          )
+        })}
+        itemContent={index => (
           <RowContent
             {...componentsProps?.rowContent}
-            index={_index}
-            row={row}
+            index={index}
+            row={data[index]}
             columns={columns}
-            context={context}
+            context={_context}
             onSelectClick={onSelect}
           >
             {componentsProps?.rowContent?.children}
@@ -95,4 +111,11 @@ VirtualizedTable.defaultProps = {
   onSelectAll: () => {}
 }
 
+VirtualizedTable.propTypes = {
+  /**
+     Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array })
+  */
+  groups: PropTypes.func
+}
+
 export default VirtualizedTable

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

@@ -638,6 +638,7 @@ export function makeDarkInvertedOverrides(theme: any): {
             color: any;
             height: string;
         };
+        sizeSmall: any;
         paddingCheckbox: {
             width: number;
             padding: number;

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

@@ -638,6 +638,7 @@ export function makeDarkNormalOverrides(theme: any): {
             color: any;
             height: string;
         };
+        sizeSmall: any;
         paddingCheckbox: {
             width: number;
             padding: number;

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

@@ -638,6 +638,7 @@ export function makeLightInvertedOverrides(theme: any): {
             color: any;
             height: string;
         };
+        sizeSmall: any;
         paddingCheckbox: {
             width: number;
             padding: number;

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

@@ -638,6 +638,7 @@ export function makeLightNormalOverrides(theme: any): {
             color: any;
             height: string;
         };
+        sizeSmall: any;
         paddingCheckbox: {
             width: number;
             padding: number;

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

@@ -543,6 +543,13 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
         color: theme.palette.text.secondary,
         height: '2rem'
       },
+      sizeSmall: _objectSpread(_objectSpread({}, theme.typography.subtitle2), {}, {
+        paddingBottom: 0,
+        paddingTop: 0,
+        outline: "1px solid ".concat(theme.palette.background.default),
+        borderBottom: 'none',
+        backgroundColor: theme.palette.background.default
+      }),
       paddingCheckbox: {
         width: 32,
         padding: 0

package/transpiled/react/SearchBar/index.js

@@ -53,7 +53,7 @@ var useStyles = makeStyles(function (theme) {
         var size = _ref.size;
         return sizeToPixel[size];
       },
-      flex: 1,
+      flex: 'auto',
       borderRadius: function borderRadius(_ref2) {
         var size = _ref2.size;
         return radiusBySize[size];

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

@@ -43,11 +43,19 @@ var Cell = function Cell(_ref4) {
   });
   var cellContent = get(row, column.id, '—');
   var longPressRef = useOnLongPress(function () {
+    if (column.disableClick) {
+      return;
+    }
+
     setIsLongPress(true);
     onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(row, column);
   });
 
   var handleClick = function handleClick() {
+    if (column.disableClick) {
+      return;
+    }
+
     if (!isLongPress) {
       onClick === null || onClick === void 0 ? void 0 : onClick(row, column);
     } else {

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

@@ -11,7 +11,9 @@ var TableRow = function TableRow(_ref) {
       className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var isSelected = context === null || context === void 0 ? void 0 : context.isSelectedItem(item);
+  var _item = item || context.data[props['data-item-index']];
+
+  var isSelected = context.isSelectedItem(_item);
   return /*#__PURE__*/React.createElement(TableRowClassic, _extends({}, props, {
     className: cx(className, 'virtualized'),
     selected: isSelected,

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

@@ -2,21 +2,24 @@ 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", "context", "components"];
+var _excluded = ["rows", "columns", "groups", "defaultOrder", "secondarySort", "selectedItems", "onSelect", "onSelectAll", "isSelectedItem", "componentsProps", "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 PropTypes from 'prop-types';
 import React, { useState, forwardRef } from 'react';
-import { TableVirtuoso } from 'react-virtuoso';
+import { TableVirtuoso, GroupedTableVirtuoso } 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";
 import virtuosoComponents from "cozy-ui/transpiled/react/Table/Virtualized/virtuosoComponents";
+import TableCell from "cozy-ui/transpiled/react/TableCell";
 var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var rows = _ref.rows,
       columns = _ref.columns,
+      groups = _ref.groups,
       defaultOrder = _ref.defaultOrder,
       secondarySort = _ref.secondarySort,
       selectedItems = _ref.selectedItems,
@@ -41,7 +44,16 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var sortedData = stableSort(rows, getComparator(order, orderBy));
   var data = secondarySort ? secondarySort(sortedData) : sortedData;
 
-  var _context = _objectSpread(_objectSpread({}, context), {}, {
+  var _ref2 = (groups === null || groups === void 0 ? void 0 : groups(data)) || {},
+      groupLabels = _ref2.groupLabels,
+      groupCounts = _ref2.groupCounts;
+
+  var isGroupedTable = !!groupCounts;
+
+  var _context = _objectSpread(_objectSpread(_objectSpread({}, context), isGroupedTable && {
+    data: data
+  }), {}, {
+    // we use directly `data` prop if no groupCounts
     isSelectedItem: isSelectedItem,
     selectedItems: selectedItems
   });
@@ -63,9 +75,11 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onSelectAll([]);
   };
 
-  return /*#__PURE__*/React.createElement(TableVirtuoso, _extends({}, props, {
+  var Component = isGroupedTable ? GroupedTableVirtuoso : TableVirtuoso;
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
     ref: ref,
-    data: data,
+    data: !isGroupedTable ? data : undefined,
+    groupCounts: isGroupedTable ? groupCounts : [],
     context: _context,
     components: components || virtuosoComponents,
     fixedHeaderContent: function fixedHeaderContent() {
@@ -78,15 +92,23 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
         onClick: handleSort,
         onSelectAllClick: handleSelectAll
       }));
-    },
-    itemContent: function itemContent(_index, row, context) {
+    }
+  }, isGroupedTable && {
+    groupContent: function groupContent(index) {
+      return /*#__PURE__*/React.createElement(TableCell, {
+        colSpan: columns.length + 1,
+        size: "small"
+      }, groupLabels[index]);
+    }
+  }, {
+    itemContent: function itemContent(index) {
       var _componentsProps$rowC;
 
       return /*#__PURE__*/React.createElement(RowContent, _extends({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.rowContent, {
-        index: _index,
-        row: row,
+        index: index,
+        row: data[index],
         columns: columns,
-        context: context,
+        context: _context,
         onSelectClick: onSelect
       }), componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$rowC = componentsProps.rowContent) === null || _componentsProps$rowC === void 0 ? void 0 : _componentsProps$rowC.children);
     },
@@ -100,4 +122,10 @@ VirtualizedTable.defaultProps = {
   onSelect: function onSelect() {},
   onSelectAll: function onSelectAll() {}
 };
+VirtualizedTable.propTypes = {
+  /**
+     Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array })
+  */
+  groups: PropTypes.func
+};
 export default VirtualizedTable;