@linagora/twake-mui 9.3.0 → 9.5.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# @linagora/twake-mui [9.5.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.4.0...@linagora/twake-mui@9.5.0) (2026-09-24)
+
+
+### Bug Fixes
+
+* **twake-mui:** Keep slow clicks on VirtualizedTable cells without a long press handler ([9e2d7a7](https://github.com/linagora/twake-ui/commit/9e2d7a786e911a509ba35b5ddedcacb43e9d2061))
+* **twake-mui:** Show a pointer only on clickable VirtualizedTable cells ([eb98bc0](https://github.com/linagora/twake-ui/commit/eb98bc08892c5d6c162443cda249f81f57422512))
+* **twake-mui:** Sort VirtualizedTable rows only when rows or order change ([1cb782a](https://github.com/linagora/twake-ui/commit/1cb782a1b7fa39c4bf12a814cb1aa5d6d1ae7cc0))
+* **twake-mui:** Translate the VirtualizedTable sort direction announcement ([ffd5cc2](https://github.com/linagora/twake-ui/commit/ffd5cc2efaa437cc47d757b9d423e6648ddf6fe4))
+
+
+### Features
+
+* **twake-mui:** Export VirtuosoMockContext to test VirtualizedTable ([ab456e5](https://github.com/linagora/twake-ui/commit/ab456e56fa0c121c67561e944d91d3c2641b98de))
+
+# @linagora/twake-mui [9.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.3.0...@linagora/twake-mui@9.4.0) (2026-09-23)
+
+
+### Features
+
+* **twake-mui:** Install react-virtuoso ([4248221](https://github.com/linagora/twake-ui/commit/424822190001b87a38679957ce042322078aafd0))
+* **twake-mui:** Install rooks ([c1d4d9a](https://github.com/linagora/twake-ui/commit/c1d4d9aa5ea535f070be5b75dec9cb864103a547))
+* **twake-mui:** Migrate VirtualizedTable from cozy-ui ([2d3a3cf](https://github.com/linagora/twake-ui/commit/2d3a3cf6751435d247e7c14388010f1450cd9c96))
+
 # @linagora/twake-mui [9.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.2.0...@linagora/twake-mui@9.3.0) (2026-09-23)
 
 

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Column, Row, RowContentProps } from './types';
+interface CellProps extends RowContentProps {
+    row: Row;
+    columns: Column[];
+    column: Column;
+}
+export declare const Cell: React.FC<CellProps>;
+export {};

package/dist/components/VirtualizedTable/Cell.js

@@ -0,0 +1,42 @@
+import { TableCell } from '@mui/material';
+import React, { useRef } from 'react';
+import { useOnLongPress } from 'rooks';
+import { getPath } from './helpers';
+const DOUBLE_CLICK_DELAY = 400;
+const LONG_PRESS_DURATION = 300;
+export const Cell = ({ row, columns, column, onClick, onDoubleClick, onLongPress, children }) => {
+    // onClick is triggered after a long press anyway, so we need this flag to swallow it
+    const isLongPress = useRef(false);
+    const lastClickTime = useRef(0);
+    const cellContent = getPath(row, column.id);
+    const cell = cellContent === undefined ? '—' : cellContent;
+    const longPressRef = useOnLongPress(() => {
+        // without a long press handler, a slow click must stay a click
+        if (column.disableClick || !onLongPress)
+            return;
+        isLongPress.current = true;
+        onLongPress(row, column);
+    }, { duration: LONG_PRESS_DURATION });
+    const handleClick = () => {
+        if (column.disableClick)
+            return;
+        if (isLongPress.current) {
+            isLongPress.current = false;
+            return;
+        }
+        const now = Date.now();
+        const isDoubleClick = now - lastClickTime.current < DOUBLE_CLICK_DELAY;
+        lastClickTime.current = now;
+        if (!isDoubleClick)
+            onClick?.(row, column);
+    };
+    return (React.createElement(TableCell, { ref: longPressRef, sx: {
+            cursor: !!onClick && !column.disableClick ? 'pointer' : undefined,
+            width: column.width,
+            maxWidth: column.maxWidth
+        }, className: column.noWrap ? 'u-ellipsis' : undefined, align: column.textAlign ?? 'left', padding: column.disablePadding ? 'none' : 'normal', onClick: handleClick, onDoubleClick: () => column.disableClick ? undefined : onDoubleClick?.(row, column), onContextMenu: ev => isLongPress.current && ev.preventDefault() }, children
+        ? React.Children.map(children, child => React.isValidElement(child)
+            ? React.cloneElement(child, { row, columns, column, cell })
+            : null)
+        : cell));
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Column, OrderDirection } from './types';
+interface FixedHeaderContentProps {
+    columns: Column[];
+    orderBy?: string;
+    orderDirection: OrderDirection;
+    onClick: (columnId: string) => void;
+}
+export declare const FixedHeaderContent: React.FC<FixedHeaderContentProps>;
+export {};

package/dist/components/VirtualizedTable/FixedHeaderContent.js

@@ -0,0 +1,4 @@
+import { TableRow } from '@mui/material';
+import React from 'react';
+import { HeadCell } from './HeadCell';
+export const FixedHeaderContent = ({ columns, orderBy, orderDirection, onClick }) => (React.createElement(TableRow, null, columns.map(column => (React.createElement(HeadCell, { key: column.id, column: column, orderBy: orderBy, orderDirection: orderDirection, onClick: () => onClick(column.id) })))));

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Column, OrderDirection } from './types';
+interface HeadCellProps {
+    column: Column;
+    orderBy?: string;
+    orderDirection: OrderDirection;
+    onClick: () => void;
+}
+export declare const HeadCell: React.FC<HeadCellProps>;
+export {};

package/dist/components/VirtualizedTable/HeadCell.js

@@ -0,0 +1,18 @@
+import { TableCell, TableSortLabel } from '@mui/material';
+import React from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+const locales = { en, fr, ru, vi };
+export const HeadCell = ({ column, orderBy, orderDirection, onClick }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    const isActive = orderBy === column.id;
+    return (React.createElement(TableCell, { sx: { width: column.width, maxWidth: column.maxWidth }, className: column.noWrap ? 'u-ellipsis' : undefined, align: column.textAlign ?? 'left', padding: column.disablePadding ? 'none' : 'normal', sortDirection: isActive ? orderDirection : false }, column.sortable !== false ? (React.createElement(TableSortLabel, { active: isActive, direction: isActive ? orderDirection : 'asc', onClick: onClick },
+        column.label,
+        isActive && (React.createElement("span", { className: "u-visuallyhidden" }, orderDirection === 'desc'
+            ? t('VirtualizedTable.sortedDesc')
+            : t('VirtualizedTable.sortedAsc'))))) : (column.label)));
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Column, Row, RowContentProps } from './types';
+interface RowContentComponentProps extends RowContentProps {
+    row: Row;
+    columns: Column[];
+}
+export declare const RowContent: React.FC<RowContentComponentProps>;
+export {};

package/dist/components/VirtualizedTable/RowContent.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Cell } from './Cell';
+export const RowContent = React.memo(({ row, columns, children, onClick, onDoubleClick, onLongPress }) => (React.createElement(React.Fragment, null, columns.map(column => (React.createElement(Cell, { key: column.id, row: row, columns: columns, column: column, onClick: onClick, onDoubleClick: onDoubleClick, onLongPress: onLongPress }, children))))));
+RowContent.displayName = 'RowContent';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TableComponents } from 'react-virtuoso';
+import type { Row, TableContext } from './types';
+type TableRowProps = React.ComponentProps<NonNullable<TableComponents<Row, TableContext>['TableRow']>>;
+export declare const TableRow: React.FC<TableRowProps>;
+export {};

package/dist/components/VirtualizedTable/TableRow.js

@@ -0,0 +1,9 @@
+import { TableRow as MuiTableRow } from '@mui/material';
+import React from 'react';
+export const TableRow = ({ item, context, ...props }) => {
+    // grouped tables do not receive `item`, so we read it back from the sorted data
+    const row = item ?? context.data?.[props['data-item-index']];
+    const isSelected = row ? context.isSelectedItem(row) : false;
+    const isNew = row ? context.isNewItem?.(row) : false;
+    return (React.createElement(MuiTableRow, { ...props, className: isNew ? 'new' : undefined, selected: isSelected, hover: true }));
+};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { VirtualizedTable } from './index';
+declare const meta: Meta<typeof VirtualizedTable>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

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

@@ -0,0 +1,104 @@
+import { Button, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { fn } from 'storybook/test';
+import { VirtualizedTable } from './index';
+const createData = (id, name, calories, fat, carbs, protein) => ({ id, name, calories, fat, carbs, protein });
+const rows = [
+    createData(0, 'Cupcake', 305, 3.7, 67, 4.3),
+    createData(1, 'Frozen yoghurt (unselectable)', 159, 6.0, 24, 4.0),
+    createData(2, 'Donut', 452, 25.0, 51, 4.9),
+    createData(3, 'Eclair', 262, 16.0, 24, 6.0),
+    createData(4, 'Ice cream sandwich', 237, 9.0, 37, 4.3),
+    createData(5, 'Gingerbread', 356, 16.0, 49, 3.9),
+    createData(6, 'Honeycomb', 408, 3.2, 87, 6.5),
+    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, 'Marshmallow', 318, 0, 81, 2.0),
+    createData(11, 'Lollipop', 392, 0.2, 98, 0.0),
+    createData(12, 'Nougat', 360, 19.0, 9, 37.0),
+    createData(13, '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', label: 'Dessert', width: 300, maxWidth: 300, noWrap: true },
+    {
+        id: 'calories',
+        label: 'Calories',
+        width: 80,
+        textAlign: 'left',
+        sortable: false
+    },
+    { id: 'fat', label: 'Fat (g)', width: 85, textAlign: 'right' },
+    { id: 'carbs', label: 'Carbs (g)', width: 115, textAlign: 'right' },
+    {
+        id: 'protein',
+        label: 'Protein (g)',
+        width: 115,
+        textAlign: 'right',
+        disableClick: true
+    }
+];
+// Very basic usage only works when Dessert is sorted "asc"
+const makeGroups = () => ({
+    groupLabels: ['C', 'D', 'E', 'Others'],
+    groupCounts: [1, 1, 1, 11]
+});
+const UNSELECTABLE_ID = 1;
+const onDoubleClick = fn().mockName('onDoubleClick');
+const onLongPress = fn().mockName('onLongPress');
+const ExampleTable = ({ title, ...props }) => {
+    const [selected, setSelected] = useState([]);
+    const toggle = (id) => setSelected(ids => ids.includes(id) ? ids.filter(i => i !== id) : [...ids, id]);
+    const toggleAll = () => setSelected(ids => ids.length ? [] : rows.map(r => r.id).filter(id => id !== 1));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Typography, { sx: { mt: 2 }, variant: "h4" }, title),
+        React.createElement(Button, { sx: { my: 2 }, variant: "text", onClick: toggleAll }, "Select all"),
+        React.createElement("div", { style: { border: '1px solid #ccc', height: 400, width: '100%' } },
+            React.createElement(VirtualizedTable, { rows: rows, columns: columns, selectedItems: selected, isSelectedItem: row => selected.includes(row.id), componentsProps: {
+                    rowContent: {
+                        onClick: row => row.id !== UNSELECTABLE_ID && toggle(row.id),
+                        onDoubleClick: (row, column) => row.id !== UNSELECTABLE_ID && onDoubleClick(row, column),
+                        onLongPress: (row, column) => row.id !== UNSELECTABLE_ID && onLongPress(row, column)
+                    }
+                }, ...props }))));
+};
+const meta = {
+    title: 'VirtualizedTable',
+    component: VirtualizedTable,
+    tags: ['autodocs'],
+    argTypes: {
+        rows: { control: 'object' },
+        columns: { control: 'object' },
+        defaultOrder: { control: 'object' },
+        selectedItems: { control: 'object' },
+        groups: { control: false },
+        secondarySort: { control: false },
+        isSelectedItem: { control: false },
+        isNewItem: { control: false },
+        context: { control: false },
+        componentsProps: { control: false },
+        components: { control: false }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        rows,
+        columns,
+        defaultOrder: { by: 'name', direction: 'asc' }
+    },
+    render: args => React.createElement(ExampleTable, { title: "Table", ...args })
+};
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' } },
+        React.createElement("section", null,
+            React.createElement("h3", null, "Flat"),
+            React.createElement(ExampleTable, { title: "Not sorted table" }),
+            React.createElement(ExampleTable, { title: "Sorted table", defaultOrder: { by: 'name', direction: 'asc' } })),
+        React.createElement("section", null,
+            React.createElement("h3", null, "Grouped"),
+            React.createElement(ExampleTable, { title: "Not sorted table", groups: makeGroups }),
+            React.createElement(ExampleTable, { title: "Sorted table", groups: makeGroups, defaultOrder: { by: 'name', direction: 'asc' } }))))
+};

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

@@ -0,0 +1,4 @@
+import type { OrderDirection, Row } from './types';
+export declare const getPath: (row: Row, path: string) => unknown;
+export declare const getComparator: (orderDirection: OrderDirection, orderBy: string, lang?: string) => ((a: Row, b: Row) => number);
+export declare const stableSort: (rows: Row[], comparator: (a: Row, b: Row) => number) => Row[];

package/dist/components/VirtualizedTable/helpers.js

@@ -0,0 +1,34 @@
+export const getPath = (row, path) => path
+    .split('.')
+    .reduce((value, key) => value !== null && typeof value === 'object'
+    ? value[key]
+    : undefined, row);
+const ISO_DATE = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}/;
+const descendingComparator = (a, b, orderDirection, orderBy, lang) => {
+    const aValue = getPath(a, orderBy) ?? '';
+    const bValue = getPath(b, orderBy) ?? '';
+    if (typeof aValue === 'string' && typeof bValue === 'string') {
+        if (ISO_DATE.test(aValue)) {
+            return new Date(bValue).getTime() - new Date(aValue).getTime();
+        }
+        if (!isNaN(parseInt(aValue))) {
+            return parseInt(bValue) - parseInt(aValue);
+        }
+        const collator = new Intl.Collator(lang || 'en', {
+            caseFirst: orderDirection === 'asc' ? 'upper' : 'lower'
+        });
+        return collator.compare(bValue, aValue);
+    }
+    return Number(bValue) - Number(aValue);
+};
+export const getComparator = (orderDirection, orderBy, lang) => {
+    return orderDirection === 'desc'
+        ? (a, b) => descendingComparator(a, b, orderDirection, orderBy, lang)
+        : (a, b) => -descendingComparator(a, b, orderDirection, orderBy, lang);
+};
+export const stableSort = (rows, comparator) => {
+    return rows
+        .map((row, index) => [row, index])
+        .sort((a, b) => comparator(a[0], b[0]) || a[1] - b[1])
+        .map(([row]) => row);
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';
+import type { Column, OrderDirection, Row, RowContentProps, TableContext } from './types';
+export type { Column as VirtualizedTableColumn, Row as VirtualizedTableRow } from './types';
+export interface VirtualizedTableProps extends Omit<TableVirtuosoProps<Row, TableContext>, 'data' | 'rows' | 'context' | 'components' | 'itemContent' | 'fixedHeaderContent'> {
+    /** Rows to display in the table */
+    rows: Row[];
+    /** Column configuration */
+    columns: Column[];
+    /** Split the sorted rows into groups */
+    groups?: (rows: Row[]) => {
+        groupLabels: React.ReactNode[];
+        groupCounts: number[];
+    };
+    /** Default sorting configuration */
+    defaultOrder?: {
+        direction?: OrderDirection;
+        by?: string;
+    };
+    /** Applied after the column sort, e.g. to keep directories before files */
+    secondarySort?: (rows: Row[]) => Row[];
+    /** Array of selected items */
+    selectedItems?: unknown[];
+    /** Function to determine if a row is selected */
+    isSelectedItem?: (row: Row) => boolean;
+    /** Function to determine if a row is new */
+    isNewItem?: (row: Row) => boolean;
+    /** Context object passed down to children and virtuoso */
+    context?: Record<string, unknown>;
+    /** Props passed to child components */
+    componentsProps?: {
+        rowContent?: RowContentProps;
+    };
+    /** Custom components used by react-virtuoso */
+    components?: TableVirtuosoProps<Row, TableContext>['components'];
+    /** Callback called after the sort */
+    onSortChange?: (sort: {
+        order: OrderDirection;
+        orderBy: string;
+    }) => void;
+}
+export declare const VirtualizedTable: React.ForwardRefExoticComponent<VirtualizedTableProps & React.RefAttributes<TableVirtuosoHandle>>;
+export default VirtualizedTable;

package/dist/components/VirtualizedTable/index.js

@@ -0,0 +1,44 @@
+import { TableCell } from '@mui/material';
+import React, { forwardRef, useMemo, useState } from 'react';
+import { GroupedTableVirtuoso, TableVirtuoso } from 'react-virtuoso';
+import { FixedHeaderContent } from './FixedHeaderContent';
+import { RowContent } from './RowContent';
+import { getComparator, stableSort } from './helpers';
+import { virtuosoComponents } from './virtuosoComponents';
+export const VirtualizedTable = forwardRef(({ rows, columns, groups, defaultOrder, secondarySort, selectedItems = [], isSelectedItem = () => false, isNewItem, context, componentsProps, components = virtuosoComponents, onSortChange, ...props }, ref) => {
+    const [orderDirection, setOrderDirection] = useState(defaultOrder?.direction ?? 'asc');
+    const [orderBy, setOrderBy] = useState(defaultOrder?.by);
+    const data = useMemo(() => {
+        const sortedRows = orderBy
+            ? stableSort(rows, getComparator(orderDirection, orderBy))
+            : rows;
+        return secondarySort ? secondarySort(sortedRows) : sortedRows;
+    }, [rows, orderBy, orderDirection, secondarySort]);
+    const { groupLabels, groupCounts } = groups?.(data) ?? {};
+    const tableContext = {
+        ...context,
+        data,
+        selectedItems,
+        isSelectedItem,
+        isNewItem
+    };
+    const handleSort = (property) => {
+        const isAsc = orderBy === property && orderDirection === 'asc';
+        const newOrder = isAsc ? 'desc' : 'asc';
+        setOrderDirection(newOrder);
+        setOrderBy(property);
+        onSortChange?.({ order: newOrder, orderBy: property });
+    };
+    const shared = {
+        ...props,
+        context: tableContext,
+        components,
+        fixedHeaderContent: () => (React.createElement(FixedHeaderContent, { columns: columns, orderDirection: orderDirection, orderBy: orderBy, onClick: handleSort })),
+        itemContent: (index) => (React.createElement(RowContent, { ...componentsProps?.rowContent, row: data[index], columns: columns }))
+    };
+    return groupCounts ? (React.createElement(GroupedTableVirtuoso, { ...shared, 
+        // both handles expose the same scroll methods, only the location typing differs
+        ref: ref, groupCounts: groupCounts, groupContent: index => (React.createElement(TableCell, { colSpan: columns.length, size: "small" }, groupLabels?.[index])) })) : (React.createElement(TableVirtuoso, { ...shared, ref: ref, data: data }));
+});
+VirtualizedTable.displayName = 'VirtualizedTable';
+export default VirtualizedTable;

package/dist/components/VirtualizedTable/locales/en.json

@@ -0,0 +1,6 @@
+{
+    "VirtualizedTable": {
+        "sortedAsc": "sorted ascending",
+        "sortedDesc": "sorted descending"
+    }
+}

package/dist/components/VirtualizedTable/locales/fr.json

@@ -0,0 +1,6 @@
+{
+    "VirtualizedTable": {
+        "sortedAsc": "tri croissant",
+        "sortedDesc": "tri décroissant"
+    }
+}

package/dist/components/VirtualizedTable/locales/ru.json

@@ -0,0 +1,6 @@
+{
+    "VirtualizedTable": {
+        "sortedAsc": "отсортировано по возрастанию",
+        "sortedDesc": "отсортировано по убыванию"
+    }
+}

package/dist/components/VirtualizedTable/locales/vi.json

@@ -0,0 +1,6 @@
+{
+    "VirtualizedTable": {
+        "sortedAsc": "sắp xếp tăng dần",
+        "sortedDesc": "sắp xếp giảm dần"
+    }
+}

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

@@ -0,0 +1,35 @@
+import type { TableCellProps } from '@mui/material';
+import type React from 'react';
+export type Row = Record<string, unknown>;
+export type OrderDirection = 'asc' | 'desc';
+export interface Column {
+    id: string;
+    label?: React.ReactNode;
+    width?: number | string;
+    maxWidth?: number | string;
+    noWrap?: boolean;
+    textAlign?: TableCellProps['align'];
+    disablePadding?: boolean;
+    sortable?: boolean;
+    disableClick?: boolean;
+}
+export interface TableContext {
+    data?: Row[];
+    selectedItems: unknown[];
+    isSelectedItem: (row: Row) => boolean;
+    isNewItem?: (row: Row) => boolean;
+    [key: string]: unknown;
+}
+export type CellHandler = (row: Row, column: Column) => void;
+export interface CellChildProps {
+    row: Row;
+    columns: Column[];
+    column: Column;
+    cell: unknown;
+}
+export interface RowContentProps {
+    children?: React.ReactNode;
+    onClick?: CellHandler;
+    onDoubleClick?: CellHandler;
+    onLongPress?: CellHandler;
+}

package/dist/components/VirtualizedTable/types.js

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

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

@@ -0,0 +1,7 @@
+import type { TableComponents } from 'react-virtuoso';
+import type { Row, TableContext } from './types';
+/**
+ * `context` is spread by virtuoso to every component. We destructure it so it
+ * never lands in the DOM.
+ */
+export declare const virtuosoComponents: TableComponents<Row, TableContext>;

package/dist/components/VirtualizedTable/virtuosoComponents.js

@@ -0,0 +1,20 @@
+import { Paper, Table, TableBody, TableContainer, TableHead } from '@mui/material';
+import React, { forwardRef } from 'react';
+import { TableRow } from './TableRow';
+/**
+ * `context` is spread by virtuoso to every component. We destructure it so it
+ * never lands in the DOM.
+ */
+export const virtuosoComponents = {
+    Scroller: forwardRef(function Scroller({ context, ...props }, ref) {
+        return (React.createElement(TableContainer, { ...props, ref: ref, component: Paper, elevation: 0, square: true }));
+    }),
+    Table: ({ context, ...props }) => React.createElement(Table, { ...props }),
+    TableHead: forwardRef(function TableHeadAdapter({ context, ...props }, ref) {
+        return React.createElement(TableHead, { ...props, ref: ref });
+    }),
+    TableBody: forwardRef(function TableBodyAdapter({ context, ...props }, ref) {
+        return React.createElement(TableBody, { ...props, ref: ref });
+    }),
+    TableRow
+};

package/dist/index.d.ts

@@ -23,6 +23,8 @@ export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
+export { default as VirtualizedTable } from './components/VirtualizedTable';
+export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
 export type { TwakeTheme } from './lib/theme';
 export type { PaletteJson } from './lib/types';
@@ -41,4 +43,5 @@ export type { NavIconProps } from './components/NavIcon';
 export type { NavTextProps } from './components/NavText';
 export type { NavDesktopLimiterProps } from './components/NavDesktopLimiter';
 export type { NavDesktopDropdownProps } from './components/NavDesktopDropdown';
+export type { VirtualizedTableProps, VirtualizedTableColumn, VirtualizedTableRow } from './components/VirtualizedTable';
 export type { Breakpoints } from './hooks/useBreakpoints';

package/dist/index.js

@@ -26,4 +26,6 @@ export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
+export { default as VirtualizedTable } from './components/VirtualizedTable';
+export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';

package/dist/lib/overrides.js

@@ -1030,5 +1030,70 @@ export const overrides = {
                 }
             })
         }
+    },
+    MuiTableHead: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                backgroundColor: theme.vars.palette.background.paper
+            })
+        }
+    },
+    MuiTableRow: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                '&.new': {
+                    backgroundColor: theme.vars.palette.action.hover
+                },
+                '&.disabled': {
+                    pointerEvents: 'none',
+                    opacity: 0.5
+                }
+            })
+        }
+    },
+    MuiTableCell: {
+        styleOverrides: {
+            root: {
+                padding: '8px 4px'
+            },
+            head: ({ theme }) => ({
+                ...theme.typography.subtitle2,
+                color: theme.vars.palette.text.secondary,
+                lineHeight: 1.292
+            }),
+            body: ({ theme }) => ({
+                color: theme.vars.palette.text.secondary,
+                // We want cell's sizes to be 2rem of content plus padding and border (49px).
+                // CssBaseline makes Twake apps border-box, where 2rem would be the total
+                // height, so the cell opts back into content-box to keep the same row.
+                boxSizing: 'content-box',
+                height: '2rem'
+            }),
+            sizeSmall: ({ theme }) => ({
+                ...theme.typography.subtitle2,
+                // restated because the root padding above beats MUI's own size variant
+                padding: '0 16px',
+                outline: `1px solid ${theme.vars.palette.background.default}`,
+                borderBottom: 'none',
+                backgroundColor: theme.vars.palette.background.default
+            }),
+            paddingCheckbox: {
+                width: 32,
+                padding: 0
+            },
+            stickyHeader: ({ theme }) => ({
+                backgroundColor: theme.vars.palette.background.paper
+            })
+        }
+    },
+    MuiTableSortLabel: {
+        styleOverrides: {
+            root: {
+                padding: '8px 0'
+            },
+            icon: {
+                fontSize: 14
+            }
+        }
     }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "9.3.0",
+  "version": "9.5.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -60,7 +60,9 @@
   "dependencies": {
     "@linagora/twake-css": "^1.0.0",
     "@mui/utils": "^9.2.0",
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "react-virtuoso": "4.13.0",
+    "rooks": "7.14.1"
   },
   "devDependencies": {
     "@argos-ci/cli": "4.2.0",