cozy-ui 142.3.0 → 143.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [143.0.0](https://github.com/cozy/cozy-ui/compare/v142.3.1...v143.0.0) (2026-10-15)
+
+
+### Code Refactoring
+
+* **Table:** Remove secondarySort from VirtualizedTable ([772c5f7](https://github.com/cozy/cozy-ui/commit/772c5f7))
+
+
+### Features
+
+* **Table:** Add sortingMode to VirtualizedTable ([2413bd5](https://github.com/cozy/cozy-ui/commit/2413bd5))
+
+
+### BREAKING CHANGES
+
+* **Table:** VirtualizedTable no longer takes secondarySort. Sort
+the rows, secondary order included, before passing them (stableSort
+and getComparator are in cozy-ui/transpiled/react/Table/Virtualized/helpers),
+and set sortingMode="server" so that the table keeps their order.
+
+Assisted-by: LLM
+
+## [142.3.1](https://github.com/cozy/cozy-ui/compare/v142.3.0...v142.3.1) (2026-10-13)
+
+
+### Bug Fixes
+
+* **Badge:** Draw counts as a pill ([5e0875c](https://github.com/cozy/cozy-ui/commit/5e0875c))
+
 # [142.3.0](https://github.com/cozy/cozy-ui/compare/v142.2.3...v142.3.0) (2026-10-06)
 
 

package/package.json

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

package/react/Badge/Readme.md

@@ -56,6 +56,32 @@ const DemoBadge = ({ variant, ...props }) => {
 </Variants>
 ```
 
+### Counts
+
+One or two digits sit in a circle, longer counts in a pill.
+
+```jsx
+import Badge from 'cozy-ui/transpiled/react/Badge'
+import { CircleFilled, Icon } from '@linagora/twake-icons'
+
+;
+
+<>
+  {[1, 12, 44, 99, 120].map(count => (
+    <Badge
+      key={count}
+      className="u-m-1"
+      badgeContent={count}
+      max={99}
+      color="primary"
+      size="medium"
+    >
+      <Icon icon={CircleFilled} size="24" color="var(--iconTextColor)" />
+    </Badge>
+  ))}
+</>
+```
+
 ### Double badges
 
 Badges can be combined — in this example, we have an item with a new qualification.

package/react/MuiCozyTheme/overrides/makeLightOverrides.js

@@ -1047,7 +1047,9 @@ export const makeLightOverrides = theme => ({
     badge: {
       boxSizing: 'content-box',
       padding: 0,
-      borderRadius: '100%',
+      borderRadius: 100,
+      // Every two-digit count fits the circle, longer counts grow into a pill
+      fontVariantNumeric: 'tabular-nums',
       '&.badgeBorder': {
         border: `2px solid ${theme.palette.background.paper}`
       },

package/react/Table/Readme.md

@@ -252,3 +252,51 @@ const DndExample = () => {
   </SelectionProvider>
 </DemoProvider>
 ```
+
+### With rows sorted by the caller
+
+With `sortingMode="server"`, the table keeps the rows in the given order, e.g. paged from a server: the headers still change the sort and call `onSortChange`, for the caller to sort the rows. With `sortingMode="client"`, the default, the table sorts them.
+
+```jsx
+import { useState } from 'react'
+import VirtualizedTable from 'cozy-ui/transpiled/react/Table/Virtualized'
+import { getComparator, stableSort } from 'cozy-ui/transpiled/react/Table/Virtualized/helpers'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+const rows = [
+  { id: 0, name: 'Cupcake', calories: 305 },
+  { id: 1, name: 'Donut', calories: 452 },
+  { id: 2, name: 'Eclair', calories: 262 },
+  { id: 3, name: 'Gingerbread', calories: 356 },
+  { id: 4, name: 'Honeycomb', calories: 408 }
+]
+
+const columns = [
+  { id: 'name', label: 'Dessert', width: 300 },
+  { id: 'calories', label: 'Calories', width: 80, textAlign: 'right' }
+]
+
+// The caller sorts the rows, as a server would, and the table keeps their order
+const SortedByCallerTable = () => {
+  const [sortedRows, setSortedRows] = useState(rows)
+
+  return (
+    <VirtualizedTable
+      rows={sortedRows}
+      columns={columns}
+      sortingMode="server"
+      onSortChange={({ order, orderBy }) =>
+        setSortedRows(stableSort(rows, getComparator(order, orderBy)))
+      }
+    />
+  )
+}
+
+;
+
+<DemoProvider>
+  <div style={{ border: "1px solid var(--borderMainColor)", height: 300, width: "100%" }}>
+    <SortedByCallerTable />
+  </div>
+</DemoProvider>
+```

package/react/Table/Virtualized/index.jsx

@@ -17,7 +17,7 @@ const VirtualizedTable = forwardRef(
       columns,
       groups,
       defaultOrder,
-      secondarySort,
+      sortingMode,
       selectedItems,
       isSelectedItem,
       componentsProps,
@@ -34,12 +34,13 @@ const VirtualizedTable = forwardRef(
     )
     const [orderBy, setOrderBy] = useState(defaultOrder?.by ?? undefined)
 
-    const data = useMemo(() => {
-      const sortedData = orderBy
-        ? stableSort(rows, getComparator(orderDirection, orderBy))
-        : rows
-      return secondarySort ? secondarySort(sortedData) : sortedData
-    }, [rows, orderBy, orderDirection, secondarySort])
+    const data = useMemo(
+      () =>
+        orderBy && sortingMode === 'client'
+          ? stableSort(rows, getComparator(orderDirection, orderBy))
+          : rows,
+      [rows, orderBy, orderDirection, sortingMode]
+    )
     const { groupLabels, groupCounts } = groups?.(data) || {}
     const isGroupedTable = !!groupCounts
     const _context = {
@@ -105,6 +106,7 @@ const VirtualizedTable = forwardRef(
 VirtualizedTable.displayName = 'VirtualizedTable'
 
 VirtualizedTable.defaultProps = {
+  sortingMode: 'client',
   selectedItems: [],
   isSelectedItem: () => {}
 }
@@ -116,19 +118,19 @@ VirtualizedTable.propTypes = {
   columns: PropTypes.array,
   /** Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array }) */
   groups: PropTypes.func,
-  /** Default sorting configuration */
+  /** Column sorted at first: without it, no column is sorted until one is clicked */
   defaultOrder: PropTypes.shape({
     direction: PropTypes.oneOf(['asc', 'desc']),
     by: PropTypes.string
   }),
+  /** Who sorts the rows. 'server': the table keeps the given order, its headers changing the sort and calling onSortChange for the caller to sort them, e.g. on its server. 'client': the table sorts them by the sorted column */
+  sortingMode: PropTypes.oneOf(['client', 'server']),
   /** Context object passed down to children and virtuoso */
   context: PropTypes.object,
   /** Props passed to child components */
   componentsProps: PropTypes.object,
   /** Custom components used by react-virtuoso */
   components: PropTypes.object,
-  /** Sort files by type to put directory and trash before files */
-  secondarySort: PropTypes.func,
   /** Array of selected items */
   selectedItems: PropTypes.array,
   /** Function to determine if a row is selected */

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

@@ -1065,7 +1065,8 @@ export function makeDarkOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
-            borderRadius: string;
+            borderRadius: number;
+            fontVariantNumeric: string;
             '&.badgeBorder': {
                 border: string;
             };

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

@@ -1065,7 +1065,8 @@ export function makeLightOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
-            borderRadius: string;
+            borderRadius: number;
+            fontVariantNumeric: string;
             '&.badgeBorder': {
                 border: string;
             };

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

@@ -990,7 +990,9 @@ export var makeLightOverrides = function makeLightOverrides(theme) {
       badge: {
         boxSizing: 'content-box',
         padding: 0,
-        borderRadius: '100%',
+        borderRadius: 100,
+        // Every two-digit count fits the circle, longer counts grow into a pill
+        fontVariantNumeric: 'tabular-nums',
         '&.badgeBorder': {
           border: "2px solid ".concat(theme.palette.background.paper)
         },

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

@@ -2,7 +2,7 @@ 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", "groups", "defaultOrder", "secondarySort", "selectedItems", "isSelectedItem", "componentsProps", "context", "components", "onSortChange", "isNewItem"];
+var _excluded = ["rows", "columns", "groups", "defaultOrder", "sortingMode", "selectedItems", "isSelectedItem", "componentsProps", "context", "components", "onSortChange", "isNewItem"];
 
 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; }
 
@@ -24,7 +24,7 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
       columns = _ref.columns,
       groups = _ref.groups,
       defaultOrder = _ref.defaultOrder,
-      secondarySort = _ref.secondarySort,
+      sortingMode = _ref.sortingMode,
       selectedItems = _ref.selectedItems,
       isSelectedItem = _ref.isSelectedItem,
       componentsProps = _ref.componentsProps,
@@ -45,9 +45,8 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setOrderBy = _useState4[1];
 
   var data = useMemo(function () {
-    var sortedData = orderBy ? stableSort(rows, getComparator(orderDirection, orderBy)) : rows;
-    return secondarySort ? secondarySort(sortedData) : sortedData;
-  }, [rows, orderBy, orderDirection, secondarySort]);
+    return orderBy && sortingMode === 'client' ? stableSort(rows, getComparator(orderDirection, orderBy)) : rows;
+  }, [rows, orderBy, orderDirection, sortingMode]);
 
   var _ref2 = (groups === null || groups === void 0 ? void 0 : groups(data)) || {},
       groupLabels = _ref2.groupLabels,
@@ -114,6 +113,7 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 VirtualizedTable.displayName = 'VirtualizedTable';
 VirtualizedTable.defaultProps = {
+  sortingMode: 'client',
   selectedItems: [],
   isSelectedItem: function isSelectedItem() {}
 };
@@ -127,12 +127,15 @@ VirtualizedTable.propTypes = {
   /** Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array }) */
   groups: PropTypes.func,
 
-  /** Default sorting configuration */
+  /** Column sorted at first: without it, no column is sorted until one is clicked */
   defaultOrder: PropTypes.shape({
     direction: PropTypes.oneOf(['asc', 'desc']),
     by: PropTypes.string
   }),
 
+  /** Who sorts the rows. 'server': the table keeps the given order, its headers changing the sort and calling onSortChange for the caller to sort them, e.g. on its server. 'client': the table sorts them by the sorted column */
+  sortingMode: PropTypes.oneOf(['client', 'server']),
+
   /** Context object passed down to children and virtuoso */
   context: PropTypes.object,
 
@@ -142,9 +145,6 @@ VirtualizedTable.propTypes = {
   /** Custom components used by react-virtuoso */
   components: PropTypes.object,
 
-  /** Sort files by type to put directory and trash before files */
-  secondarySort: PropTypes.func,
-
   /** Array of selected items */
   selectedItems: PropTypes.array,