@linagora/twake-mui 14.0.0 → 14.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [14.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.1.0...@linagora/twake-mui@14.2.0) (2026-10-15)
+
+
+### Features
+
+* **twake-mui:** Migrate Filename from cozy-ui ([84f4803](https://github.com/linagora/twake-ui/commit/84f4803fedbfc211dabef69717570d75500369b4))
+
+# @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/Filename/Filename.stories.d.ts

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

package/dist/components/Filename/Filename.stories.js

@@ -0,0 +1,95 @@
+import { File, Icon } from '@linagora/twake-icons';
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import Filename from './index';
+const longName = 'Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex and this is the end';
+const shortName = 'Lacinia condimentum this is the end';
+const path = '/some/folder/and/subfolder';
+const icon = React.createElement(Icon, { icon: File, size: 32 });
+const examples = [
+    {
+        title: 'Icon, extension and path',
+        props: { icon, filename: longName, extension: '.pdf', path }
+    },
+    {
+        title: 'Middle ellipsis',
+        props: {
+            icon,
+            filename: longName,
+            extension: '.pdf',
+            path,
+            midEllipsis: true
+        }
+    },
+    {
+        title: 'Without path',
+        props: { icon, filename: longName, extension: '.pdf' }
+    },
+    {
+        title: 'Without path, middle ellipsis',
+        props: { icon, filename: longName, extension: '.pdf', midEllipsis: true }
+    },
+    {
+        title: 'Body1 variant',
+        props: {
+            icon,
+            filename: longName,
+            extension: '.pdf',
+            path,
+            variant: 'body1'
+        }
+    },
+    {
+        title: 'Without icon',
+        props: { filename: longName, extension: '.pdf', path }
+    },
+    {
+        title: 'Without extension',
+        props: { icon, filename: longName, path }
+    },
+    {
+        title: 'Short name',
+        props: { icon, filename: shortName, extension: '.pdf', path }
+    },
+    {
+        title: 'Short name without path',
+        props: { icon, filename: shortName, extension: '.pdf' }
+    }
+];
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+const meta = {
+    title: 'Filename',
+    component: Filename,
+    tags: ['autodocs'],
+    argTypes: {
+        icon: { control: false },
+        filename: { control: 'text' },
+        extension: { control: 'text' },
+        midEllipsis: { control: 'boolean' },
+        variant: {
+            control: 'select',
+            options: ['h6', 'body1', 'body2', 'subtitle1', 'caption']
+        },
+        path: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        icon,
+        filename: longName,
+        extension: '.pdf',
+        midEllipsis: false,
+        variant: 'h6',
+        path
+    },
+    render: args => (React.createElement(Box, { sx: { maxWidth: 400 } },
+        React.createElement(Filename, { ...args })))
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { maxWidth: 400 } }, examples.map(({ title, props }) => (React.createElement(Section, { key: title, title: title },
+        React.createElement(Filename, { ...props }))))))
+};

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

@@ -0,0 +1,16 @@
+import { TypographyProps } from '@mui/material';
+import React from 'react';
+export interface FilenameProps {
+    icon?: React.ReactNode;
+    /** Folder or file name */
+    filename?: string;
+    /** File extension, rendered in the secondary text color */
+    extension?: string;
+    /** Truncates the filename in its middle instead of its end */
+    midEllipsis?: boolean;
+    variant?: TypographyProps['variant'];
+    /** Shown on a second line, under the name */
+    path?: React.ReactNode;
+}
+declare const Filename: React.FC<FilenameProps>;
+export default Filename;

package/dist/components/Filename/index.js

@@ -0,0 +1,20 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+import MidEllipsis from '../MidEllipsis';
+const NameAndExtension = ({ filename, extension, midEllipsis, variant }) => (React.createElement(React.Fragment, null,
+    filename && (React.createElement(Typography, { variant: variant, component: "span", noWrap: true }, midEllipsis ? React.createElement(MidEllipsis, { text: filename }) : filename)),
+    extension && (React.createElement(Typography, { variant: variant, component: "span", color: "textSecondary" }, extension))));
+const Filename = ({ icon, filename, extension, midEllipsis = false, variant = 'h6', path }) => {
+    const nameAndExtension = (React.createElement(NameAndExtension, { filename: filename, extension: extension, midEllipsis: midEllipsis, variant: variant }));
+    const iconBox = icon && (React.createElement(Box, { className: "u-flex u-pos-relative u-mr-1", sx: path ? { float: 'left', top: 4 } : undefined }, icon));
+    if (!path) {
+        return (React.createElement("div", { className: "u-flex u-flex-items-center" },
+            iconBox,
+            nameAndExtension));
+    }
+    return (React.createElement(React.Fragment, null,
+        iconBox,
+        React.createElement("div", { className: "u-flex" }, nameAndExtension),
+        React.createElement(Typography, { variant: "body2", component: "div", noWrap: true }, path)));
+};
+export default Filename;

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

@@ -46,12 +46,14 @@ export { default as DropdownButton } from './components/DropdownButton';
 export { default as DropdownText } from './components/DropdownText';
 export { Empty, EmptySubTitle } from './components/Empty';
 export { ExtendableFab } from './components/ExtendableFab';
+export { default as Filename } from './components/Filename';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 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';
@@ -124,12 +126,14 @@ export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './componen
 export type { DropdownButtonProps } from './components/DropdownButton';
 export type { DropdownTextProps, DropdownTextVariant } from './components/DropdownText';
 export type { ExtendableFabProps, ScrollOptions } from './components/ExtendableFab';
+export type { FilenameProps } from './components/Filename';
 export type { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
 export type { ListItemButtonProps } from './components/ListItemButton';
 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

@@ -49,12 +49,14 @@ export { default as DropdownButton } from './components/DropdownButton';
 export { default as DropdownText } from './components/DropdownText';
 export { Empty, EmptySubTitle } from './components/Empty';
 export { ExtendableFab } from './components/ExtendableFab';
+export { default as Filename } from './components/Filename';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 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.2.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",