@linagora/twake-mui 13.2.1 → 14.1.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# @linagora/twake-mui [14.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.0.0...@linagora/twake-mui@14.1.0) (2026-10-15)
+
+
+### Features
+
+* **twake-mui:** Migrate LoadMore from cozy-ui ([3b505ec](https://github.com/linagora/twake-ui/commit/3b505ec16434d371d7a730cc314df06e6013b724))
+
+# @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)
 
 

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

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

package/dist/components/LoadMore/LoadMore.stories.js

@@ -0,0 +1,43 @@
+import { Box, Stack, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import LoadMore from './index';
+const sleep = (timeout) => new Promise(resolve => setTimeout(resolve, timeout));
+const InfiniteList = ({ fetchMore: onFetchMore, ...props }) => {
+    const [elements, setElements] = useState([1, 2]);
+    const fetchMore = async () => {
+        onFetchMore?.();
+        await sleep(1000);
+        setElements(previous => [...previous, previous.length + 1]);
+    };
+    return (React.createElement(Box, { sx: { height: 300, overflow: 'auto' } },
+        React.createElement(Typography, null, "Scroll down to load more."),
+        elements.map(element => (React.createElement(Box, { key: element, sx: { bgcolor: 'grey.500', height: 160, mb: 1 } }))),
+        elements.length < 25 && React.createElement(LoadMore, { fetchMore: fetchMore, ...props })));
+};
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+const meta = {
+    title: 'LoadMore',
+    component: LoadMore,
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        fetchMore: { action: 'fetchMore' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Load more'
+    },
+    render: args => React.createElement(InfiniteList, { ...args })
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Section, { title: "Button" },
+            React.createElement(LoadMore, { label: "Load more", fetchMore: () => { } })),
+        React.createElement(Section, { title: "Loading" },
+            React.createElement(LoadMore, { label: "Load more", fetchMore: () => new Promise(() => { }) }))))
+};

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

@@ -0,0 +1,9 @@
+import { ButtonProps } from '@mui/material';
+import React from 'react';
+export interface LoadMoreProps extends Omit<ButtonProps, 'children' | 'onClick' | 'loading'> {
+    /** Called when the next batch of data needs to be loaded. Can return a promise. */
+    fetchMore: () => unknown;
+    label: React.ReactNode;
+}
+declare const LoadMore: React.FC<LoadMoreProps>;
+export default LoadMore;

package/dist/components/LoadMore/index.js

@@ -0,0 +1,30 @@
+import { Button, CircularProgress } from '@mui/material';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+const LoadMore = ({ fetchMore, label, ...props }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const elementRef = useRef(null);
+    const startFetchMore = useCallback(async () => {
+        if (isLoading)
+            return;
+        setIsLoading(true);
+        await fetchMore();
+        setIsLoading(false);
+    }, [isLoading, fetchMore]);
+    const handleClick = () => {
+        void startFetchMore();
+    };
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some(entry => entry.isIntersecting))
+                void startFetchMore();
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [startFetchMore]);
+    return (React.createElement("span", { ref: elementRef },
+        React.createElement(Button, { variant: "text", onClick: handleClick, ...props }, isLoading ? React.createElement(CircularProgress, { size: 16 }) : label)));
+};
+export default LoadMore;

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/index.d.ts

@@ -52,6 +52,7 @@ export { default as ListItemText } from './components/ListItemText';
 export { default as ListItemSkeleton } from './components/ListItemSkeleton';
 export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
+export { default as LoadMore } from './components/LoadMore';
 export { default as Markdown } from './components/Markdown';
 export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as PointerAlert } from './components/PointerAlert';
@@ -130,6 +131,7 @@ export type { ListItemTextProps } from './components/ListItemText';
 export type { ListItemSkeletonProps } from './components/ListItemSkeleton';
 export type { ListSkeletonProps } from './components/ListSkeleton';
 export type { ListSubheaderProps } from './components/ListSubheader';
+export type { LoadMoreProps } from './components/LoadMore';
 export type { MarkdownProps } from './components/Markdown';
 export type { MidEllipsisProps } from './components/MidEllipsis';
 export type { TabsProps } from './components/Tabs';

package/dist/index.js

@@ -55,6 +55,7 @@ export { default as ListItemText } from './components/ListItemText';
 export { default as ListItemSkeleton } from './components/ListItemSkeleton';
 export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
+export { default as LoadMore } from './components/LoadMore';
 export { default as Markdown } from './components/Markdown';
 export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as PointerAlert } from './components/PointerAlert';

package/package.json

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