@linagora/twake-mui 9.13.0 → 9.14.0

package/CHANGELOG.md

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

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

@@ -14,6 +14,7 @@ export { ContactPopover, default as ContactPopoverDefault } from './components/C
 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';
@@ -53,6 +54,7 @@ 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

@@ -17,6 +17,7 @@ export { ContactPopover, default as ContactPopoverDefault } from './components/C
 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.13.0",
+  "version": "9.14.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",