@linagora/twake-mui 9.12.0 → 9.14.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [9.14.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.13.0...@linagora/twake-mui@9.14.0) (2026-09-29)
+
+
+### Features
+
+* **twake-mui:** Migrate ExtendableFab from cozy-ui ([af9fb22](https://github.com/linagora/twake-ui/commit/af9fb22a17da746edb2cbb27f8a8bab0a2379fdc))
+
+# @linagora/twake-mui [9.13.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.12.0...@linagora/twake-mui@9.13.0) (2026-09-29)
+
+
+### Features
+
+* **twake-mui:** Migrate Empty from cozy-ui ([159c7e2](https://github.com/linagora/twake-ui/commit/159c7e2656c03989fed1c4ea6870dcf8889dd468))
+
 # @linagora/twake-mui [9.12.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.11.2...@linagora/twake-mui@9.12.0) (2026-09-29)
 
 

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

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

package/dist/components/Empty/Empty.stories.js

@@ -0,0 +1,52 @@
+import { Icon, TwakeWorkplace } from '@linagora/twake-icons';
+import { Box, Button, Stack } from '@mui/material';
+import React from 'react';
+import { Empty } from './index';
+const iconSizes = ['normal', 'medium', 'large'];
+const image = 'https://i.pravatar.cc/150?img=11';
+const longTitle = 'This is a very very long title, just to see and verify how it works with it';
+const longText = 'Ada Lovelace was an English mathematician and writer, chiefly known for her work on the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine.';
+const meta = {
+    title: 'Empty',
+    component: Empty,
+    tags: ['autodocs'],
+    argTypes: {
+        iconSize: { control: 'select', options: iconSizes },
+        title: { control: 'text' },
+        text: { control: 'text' },
+        centered: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        icon: TwakeWorkplace,
+        iconSize: 'normal',
+        title: 'This list is empty',
+        text: 'Try adding some content to this list',
+        centered: false
+    }
+};
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    children));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Section, { title: "Icon sizes" }, iconSizes.map(iconSize => (React.createElement(Empty, { key: iconSize, icon: TwakeWorkplace, iconSize: iconSize, title: "This list is empty", text: "Try adding some content to this list" })))),
+        React.createElement(Section, { title: "Long title and text" },
+            React.createElement(Empty, { icon: TwakeWorkplace, title: longTitle, text: longText })),
+        React.createElement(Section, { title: "With content" },
+            React.createElement(Empty, { icon: TwakeWorkplace, title: "This list is empty", text: "Try adding some content to this list" },
+                React.createElement(Button, { variant: "contained", sx: { mt: 2 } }, "Try refreshing"))),
+        React.createElement(Section, { title: "Centered" },
+            React.createElement(Box, { sx: { display: 'flex', height: 500, transform: 'scale(1)' } },
+                React.createElement(Empty, { icon: TwakeWorkplace, title: "This list is empty", text: "Try adding some content to this list", centered: true }))),
+        React.createElement(Section, { title: "Custom images" },
+            React.createElement(Empty, { icon: TwakeWorkplace, title: "With functional SVG", text: "Try adding some content to this list" }),
+            React.createElement(Empty, { icon: React.createElement("img", { src: image, alt: "" }), title: "With IMG", text: "Try adding some content to this list" }),
+            React.createElement(Empty, { icon: React.createElement("svg", { width: "100", height: "100" },
+                    React.createElement("circle", { cx: "50", cy: "50", r: "40", stroke: "var(--twake-palette-primary-main)", strokeWidth: "4", fill: "var(--twake-palette-background-paper)" })), title: "With SVG", text: "Try adding some content to this list" }),
+            React.createElement(Empty, { icon: React.createElement(Icon, { icon: TwakeWorkplace }), title: "With Icon component", text: "Try adding some content to this list" }))))
+};

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

@@ -0,0 +1,24 @@
+import { IconProps } from '@linagora/twake-icons';
+import { SxProps, TypographyProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export type EmptyIconSize = 'normal' | 'medium' | 'large';
+export interface EmptyComponentsProps {
+    icon?: Partial<IconProps>;
+    title?: TypographyProps;
+    text?: TypographyProps;
+    childrenContainer?: React.ComponentPropsWithoutRef<'div'>;
+}
+export interface EmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    icon?: IconProps['icon'];
+    iconSize?: EmptyIconSize;
+    title?: React.ReactNode;
+    text?: React.ReactNode;
+    /** Below the `lg` breakpoint, pins the block to the centre of the viewport */
+    centered?: boolean;
+    componentsProps?: EmptyComponentsProps;
+    sx?: SxProps<Theme>;
+}
+export declare const EmptySubTitle: React.FC<TypographyProps>;
+export declare const Empty: React.FC<EmptyProps>;
+export default Empty;

package/dist/components/Empty/index.js

@@ -0,0 +1,65 @@
+import { Icon } from '@linagora/twake-icons';
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import cx from 'classnames';
+import React from 'react';
+const ICON_CLASS_NAME = 'Empty-icon';
+const iconHeights = {
+    normal: { desktop: 128, mobile: 96 },
+    medium: { desktop: 160, mobile: 128 },
+    large: { desktop: 192, mobile: 160 }
+};
+const EmptyRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'iconSize' && prop !== 'centered'
+})(({ theme, iconSize, centered }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flex: '1 0 auto',
+    alignSelf: 'center',
+    margin: '0 auto',
+    boxSizing: 'content-box',
+    padding: theme.spacing(4),
+    textAlign: 'center',
+    width: `calc(100% - ${theme.spacing(8)})`,
+    maxWidth: 512,
+    [`& .${ICON_CLASS_NAME}`]: {
+        display: 'block',
+        margin: '0 auto 16px',
+        height: iconHeights[iconSize].desktop,
+        [theme.breakpoints.down('lg')]: {
+            marginBottom: 8,
+            height: iconHeights[iconSize].mobile
+        }
+    },
+    ...(centered && {
+        [theme.breakpoints.down('lg')]: {
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)'
+        }
+    })
+}));
+const EmptyContent = styled('div')(({ theme }) => ({
+    maxWidth: 1008,
+    color: theme.vars.palette.text.secondary,
+    lineHeight: 1.5
+}));
+export const EmptySubTitle = props => (React.createElement(Typography, { variant: "body1", color: "textSecondary", ...props }));
+const renderIcon = (icon, iconProps) => {
+    if (React.isValidElement(icon)) {
+        return React.cloneElement(icon, {
+            className: cx(ICON_CLASS_NAME, icon.props.className),
+            size: icon.props.size ?? (icon.type === Icon ? '100%' : undefined),
+            ...iconProps
+        });
+    }
+    return (React.createElement(Icon, { className: ICON_CLASS_NAME, icon: icon, size: "100%", ...iconProps }));
+};
+export const Empty = ({ icon, iconSize = 'normal', title, text, centered = false, componentsProps, children, ...props }) => (React.createElement(EmptyRoot, { iconSize: iconSize, centered: centered, ...props },
+    icon && renderIcon(icon, componentsProps?.icon),
+    title && (React.createElement(Typography, { gutterBottom: true, variant: "h3", color: "textPrimary", ...componentsProps?.title }, title)),
+    text && (React.createElement(EmptySubTitle, { gutterBottom: true, ...componentsProps?.text }, text)),
+    React.createElement(EmptyContent, { ...componentsProps?.childrenContainer }, children)));
+export default Empty;

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

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

package/dist/components/ExtendableFab/ExtendableFab.stories.js

@@ -0,0 +1,43 @@
+import { Plus } from '@linagora/twake-icons';
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import { ExtendableFab } from './index';
+const meta = {
+    title: 'ExtendableFab',
+    component: ExtendableFab,
+    parameters: { layout: 'fullscreen' },
+    tags: ['autodocs'],
+    args: {
+        label: 'Add',
+        icon: Plus,
+        color: 'primary',
+        size: 'medium',
+        topLimit: 50,
+        scrollOptions: { delay: 250 }
+    },
+    argTypes: {
+        label: { control: 'text' },
+        icon: { control: false },
+        color: {
+            control: 'select',
+            options: ['default', 'primary', 'secondary', 'inherit']
+        },
+        size: { control: 'select', options: ['small', 'medium', 'large'] },
+        topLimit: { control: 'number' },
+        scrollOptions: { control: 'object' },
+        disabled: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    render: args => (React.createElement(Box, { sx: { p: 2 } },
+        React.createElement(ExtendableFab, { sx: { position: 'sticky', top: 16 }, ...args }),
+        React.createElement(Box, { sx: { py: 2 } }, "Scroll the page vertically"),
+        React.createElement(Box, { sx: { height: '200vh' } })))
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 2, direction: "row", sx: { p: 4 } },
+        React.createElement(ExtendableFab, { label: "Add", icon: Plus, color: "primary" }),
+        React.createElement(ExtendableFab, { label: "Add", icon: Plus, color: "inherit" })))
+};

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

@@ -0,0 +1,16 @@
+import { IconProps } from '@linagora/twake-icons';
+import { FabProps } from '@mui/material';
+import React from 'react';
+export interface ScrollOptions {
+    /** Delay in ms before the window scroll position is read */
+    delay?: number;
+}
+export interface ExtendableFabProps extends Omit<FabProps, 'ref' | 'children'> {
+    label: string;
+    icon: IconProps['icon'];
+    /** Window scroll offset in px below which the Fab stays extended */
+    topLimit?: number;
+    scrollOptions?: ScrollOptions;
+}
+export declare const ExtendableFab: React.ForwardRefExoticComponent<ExtendableFabProps & React.RefAttributes<HTMLButtonElement>>;
+export default ExtendableFab;

package/dist/components/ExtendableFab/index.js

@@ -0,0 +1,20 @@
+import { Icon } from '@linagora/twake-icons';
+import { Fab, styled } from '@mui/material';
+import React, { forwardRef, useEffect, useState } from 'react';
+import { useDebounce } from 'rooks';
+const GappedFab = styled(Fab)(({ theme }) => ({ gap: theme.spacing(1) }));
+export const ExtendableFab = forwardRef(({ label, icon, topLimit = 50, scrollOptions, ...props }, ref) => {
+    const [isBelowTopLimit, setIsBelowTopLimit] = useState(true);
+    const handleScroll = useDebounce(() => {
+        setIsBelowTopLimit(window.scrollY < topLimit);
+    }, scrollOptions?.delay ?? 250);
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [handleScroll]);
+    return (React.createElement(GappedFab, { ref: ref, "aria-label": label, variant: isBelowTopLimit ? 'extended' : 'circular', ...props },
+        React.createElement(Icon, { icon: icon }),
+        isBelowTopLimit && label));
+});
+ExtendableFab.displayName = 'ExtendableFab';
+export default ExtendableFab;

package/dist/index.d.ts

@@ -13,6 +13,8 @@ export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 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 ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
@@ -49,8 +51,10 @@ export type { ContactPopoverCalendarActionProps } from './components/ContactPopo
 export type { ContactPopoverEmailActionProps } from './components/ContactPopover/ContactPopoverEmailAction';
 export type { ChipProps } from './components/Chip';
 export type { DialogProps, DialogSize } from './components/Dialog';
+export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';
 export type { DropdownButtonProps } from './components/DropdownButton';
 export type { DropdownTextProps, DropdownTextVariant } from './components/DropdownText';
+export type { ExtendableFabProps, ScrollOptions } from './components/ExtendableFab';
 export type { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
 export type { ListItemButtonProps } from './components/ListItemButton';
 export type { ListItemTextProps } from './components/ListItemText';

package/dist/index.js

@@ -16,6 +16,8 @@ export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 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 ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';

package/package.json

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