@linagora/twake-mui 13.2.0 → 14.0.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# @linagora/twake-mui [14.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@13.2.1...@linagora/twake-mui@14.0.0) (2026-10-15)
+
+
+### Code Refactoring
+
+* **twake-mui:** Remove secondarySort from VirtualizedTable ([f0d5632](https://github.com/linagora/twake-ui/commit/f0d5632c57346428f5075f7ea9e338128a597c48))
+
+
+### Features
+
+* **twake-mui:** Add sortingMode to VirtualizedTable ([e747721](https://github.com/linagora/twake-ui/commit/e74772185ae3447d0fce935393119e785b3a3c3a))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** VirtualizedTable no longer takes secondarySort. Sort
+the rows, secondary order included, before passing them, and set
+sortingMode="server" so that the table keeps their order.
+
+Assisted-by: LLM
+
+## @linagora/twake-mui [13.2.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@13.2.0...@linagora/twake-mui@13.2.1) (2026-10-13)
+
+
+### Bug Fixes
+
+* **twake-mui:** Draw badge counts as a pill ([2cc8518](https://github.com/linagora/twake-ui/commit/2cc8518f927ddd2b571c455a6a0ddddf475151c9))
+
 # @linagora/twake-mui [13.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@13.1.0...@linagora/twake-mui@13.2.0) (2026-10-13)
 
 

package/dist/components/NavItem/NavBadge.js

@@ -3,6 +3,8 @@ import { styled } from '@mui/material/styles';
 export const NavBadge = styled(Badge)(({ theme }) => ({
     [`& .${badgeClasses.badge}`]: {
         border: 'none',
+        height: 14,
+        minWidth: 14,
         position: 'static',
         transform: 'none',
         backgroundColor: theme.vars.palette.action.selected,

package/dist/components/NavItem/NavItem.stories.js

@@ -90,6 +90,14 @@ export const Screenshot = {
                     React.createElement(NavDropdown, null,
                         React.createElement(NavIcon, { icon: Heart }),
                         React.createElement(NavText, { secondaryText: "Secondary", tertiaryText: "Tertiary" }, "Primary Item")))),
+            React.createElement("section", null,
+                React.createElement("h3", null, "Counts"),
+                [12, 99, '99+'].map(badge => (React.createElement(NavItem, { key: badge, disablePadding: true, badge: badge },
+                    React.createElement(NavLink, null,
+                        React.createElement(NavIcon, { icon: Folder }),
+                        React.createElement(NavText, null,
+                            "Item with ",
+                            badge)))))),
             React.createElement("section", null,
                 React.createElement("h3", null, "Secondary"),
                 React.createElement(NavItem, { disablePadding: true, variant: "secondary", selected: true },

package/dist/components/VirtualizedTable/VirtualizedTable.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof VirtualizedTable>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const ServerSortingMode: Story;
 export declare const Screenshot: Story;

package/dist/components/VirtualizedTable/VirtualizedTable.stories.js

@@ -1,6 +1,7 @@
 import { Button, Skeleton, Typography } from '@mui/material';
 import React, { useState } from 'react';
 import { fn } from 'storybook/test';
+import { getComparator, stableSort } from './helpers';
 import { VirtualizedTable } from './index';
 const createData = (id, name, calories, fat, carbs, protein) => ({ id, name, calories, fat, carbs, protein });
 const rows = [
@@ -76,10 +77,10 @@ const meta = {
         rows: { control: 'object' },
         columns: { control: 'object' },
         defaultOrder: { control: 'object' },
+        sortingMode: { control: 'inline-radio', options: ['client', 'server'] },
         selectedItems: { control: 'object' },
         isLoading: { control: 'boolean' },
         groups: { control: false },
-        secondarySort: { control: false },
         isSelectedItem: { control: false },
         isNewItem: { control: false },
         context: { control: false },
@@ -96,6 +97,14 @@ export const Default = {
     },
     render: args => React.createElement(ExampleTable, { title: "Table", ...args })
 };
+// The caller sorts the rows, as a server would, and the table keeps their order
+const SortedByCallerTable = () => {
+    const [sortedRows, setSortedRows] = useState(rows);
+    return (React.createElement(ExampleTable, { title: "Rows sorted by the caller", rows: sortedRows, sortingMode: "server", onSortChange: ({ order, orderBy }) => setSortedRows(stableSort(rows, getComparator(order, orderBy))) }));
+};
+export const ServerSortingMode = {
+    render: () => React.createElement(SortedByCallerTable, null)
+};
 // Visual Regression - Combined view for Argos testing
 export const Screenshot = {
     tags: ['argos'],

package/dist/components/VirtualizedTable/index.d.ts

@@ -12,13 +12,18 @@ export interface VirtualizedTableProps extends Omit<TableVirtuosoProps<Row, Tabl
         groupLabels: React.ReactNode[];
         groupCounts: number[];
     };
-    /** Default sorting configuration */
+    /** Column sorted at first: without it, no column is sorted until one is clicked */
     defaultOrder?: {
         direction?: OrderDirection;
         by?: string;
     };
-    /** Applied after the column sort, e.g. to keep directories before files */
-    secondarySort?: (rows: Row[]) => Row[];
+    /**
+     * 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?: 'client' | 'server';
     /** Array of selected items */
     selectedItems?: unknown[];
     /** Function to determine if a row is selected */

package/dist/components/VirtualizedTable/index.js

@@ -6,7 +6,7 @@ import { RowContent } from './RowContent';
 import { getComparator, stableSort } from './helpers';
 import { _isLoading } from './types';
 import { virtuosoComponents } from './virtuosoComponents';
-export const VirtualizedTable = forwardRef(({ rows, columns, groups, defaultOrder, secondarySort, selectedItems = [], isSelectedItem = () => false, isNewItem, context, componentsProps, components = virtuosoComponents, onSortChange, isLoading, skeletonCount = 10, ...props }, ref) => {
+export const VirtualizedTable = forwardRef(({ rows, columns, groups, defaultOrder, sortingMode = 'client', selectedItems = [], isSelectedItem = () => false, isNewItem, context, componentsProps, components = virtuosoComponents, onSortChange, isLoading, skeletonCount = 10, ...props }, ref) => {
     const [orderDirection, setOrderDirection] = useState(defaultOrder?.direction ?? 'asc');
     const [orderBy, setOrderBy] = useState(defaultOrder?.by);
     const data = useMemo(() => {
@@ -16,11 +16,10 @@ export const VirtualizedTable = forwardRef(({ rows, columns, groups, defaultOrde
                 id: `skeleton-${i}`
             }));
         }
-        const sortedRows = orderBy
+        return orderBy && sortingMode === 'client'
             ? stableSort(rows, getComparator(orderDirection, orderBy))
             : rows;
-        return secondarySort ? secondarySort(sortedRows) : sortedRows;
-    }, [rows, orderBy, orderDirection, secondarySort, isLoading, skeletonCount]);
+    }, [rows, orderBy, orderDirection, sortingMode, isLoading, skeletonCount]);
     const { groupLabels, groupCounts } = (isLoading ? undefined : groups?.(data)) ?? {};
     const tableContext = {
         ...context,

package/dist/lib/overrides.js

@@ -537,17 +537,20 @@ export const overrides = {
         },
         styleOverrides: {
             badge: ({ theme }) => ({
-                boxSizing: 'content-box',
-                height: 14,
-                minWidth: 14,
+                // Sizes include the border, so an app setting minWidth gets that width
+                boxSizing: 'border-box',
+                height: 18,
+                minWidth: 18,
                 padding: 0,
                 border: `2px solid ${theme.vars.palette.background.paper}`,
-                borderRadius: '100%',
-                fontSize: theme.typography.pxToRem(10)
+                borderRadius: radius.pill,
+                fontSize: theme.typography.pxToRem(10),
+                // Every two-digit count fits the circle, longer counts grow into a pill
+                fontVariantNumeric: 'tabular-nums'
             }),
             dot: {
-                height: 8,
-                minWidth: 8
+                height: 12,
+                minWidth: 12
             },
             anchorOriginTopRightRectangular: {
                 transform: 'scale(1) translate(37%, -37%)'

package/dist/stories/Badge.stories.js

@@ -62,6 +62,8 @@ export const Screenshot = {
                 React.createElement(Target, null)),
             React.createElement(Badge, { color: "error", badgeContent: 0, showZero: false },
                 React.createElement(Target, null)),
+            React.createElement(Badge, { color: "error", badgeContent: 99, max: 99 },
+                React.createElement(Target, null)),
             React.createElement(Badge, { color: "error", badgeContent: 120, max: 99 },
                 React.createElement(Target, null)),
             React.createElement(Badge, { color: "error", badgeContent: 4, invisible: true },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "13.2.0",
+  "version": "14.0.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",