@linagora/twake-mui 14.0.0 → 14.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @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)
 
 

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/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": "14.0.0",
+  "version": "14.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",