@linagora/twake-mui 12.1.0 → 13.0.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# @linagora/twake-mui [13.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@12.1.0...@linagora/twake-mui@13.0.0) (2026-10-12)
+
+
+### chore
+
+* **twake-mui:** Upgrade twake-i18n from 0.6.0 to 0.7.1 ([311b59b](https://github.com/linagora/twake-ui/commit/311b59b4ae9c9d1bb730a81d1c7df2d9311cf2dc))
+
+
+### Features
+
+* **twake-mui:** Add ActionsBar locales ([ad935ba](https://github.com/linagora/twake-ui/commit/ad935bae17e8be853140507275b14f30a96035eb))
+* **twake-mui:** Migrate ActionsBar from cozy-ui ([dcf2a17](https://github.com/linagora/twake-ui/commit/dcf2a17128be796c0f9c5aa0ebda36051a2a11ee))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** twake-i18n >=0.7.1 is now a required peer dependency
+of @linagora/twake-mui. Apps must upgrade twake-i18n to 0.7.1 or later.
+
 # @linagora/twake-mui [12.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@12.0.0...@linagora/twake-mui@12.1.0) (2026-10-12)
 
 

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

@@ -0,0 +1,19 @@
+import { AppBarProps } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+declare const icons: {
+    default: undefined;
+    star: () => React.JSX.Element;
+    flag: () => React.JSX.Element;
+};
+interface ExampleArgs {
+    color: AppBarProps['color'];
+    icon: keyof typeof icons;
+    maxDesktopActions: number;
+    autoClose: boolean;
+}
+declare const meta: Meta<ExampleArgs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/ActionsBar/ActionsBar.stories.js

@@ -0,0 +1,78 @@
+import { FlagOutlined, Icon, Star } from '@linagora/twake-icons';
+import { Box, Button, Stack } from '@mui/material';
+import React, { useState } from 'react';
+import ActionsBar from './index';
+import { call } from '../ActionsMenu/Actions/call';
+import { download } from '../ActionsMenu/Actions/download';
+import { emailTo } from '../ActionsMenu/Actions/emailTo';
+import { makeActions } from '../ActionsMenu/Actions/helpers';
+import { modify } from '../ActionsMenu/Actions/modify';
+import { smsTo } from '../ActionsMenu/Actions/smsTo';
+const doc = {
+    _id: 'id01',
+    _type: 'io.cozy.contacts',
+    phone: [{ number: '0102030405' }],
+    email: [{ address: 'johndoe@example.com' }]
+};
+const actions = makeActions([modify, call, download, smsTo, emailTo], {
+    client: {
+        getStackClient: () => ({ uri: 'https://' }),
+        getInstanceOptions: () => ({ subdomain: '' })
+    },
+    generateWebLink: () => '',
+    downloadFile: () => undefined
+});
+const StarIcon = () => (React.createElement(Box, { component: "span", sx: { display: 'inline-flex', mr: 2 } },
+    React.createElement(Icon, { icon: Star })));
+const FlagIcon = () => (React.createElement(Box, { component: "span", sx: { display: 'inline-flex', mr: 2 } },
+    React.createElement(Icon, { icon: FlagOutlined })));
+const icons = { default: undefined, star: StarIcon, flag: FlagIcon };
+const ExampleActionsBar = ({ color, icon, maxDesktopActions, autoClose }) => {
+    const [docs, setDocs] = useState([doc, doc]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { direction: "row", spacing: 1 },
+            React.createElement(Button, { variant: "outlined", onClick: () => setDocs([...docs, doc]) }, "Add a selected document"),
+            React.createElement(Button, { variant: "outlined", onClick: () => setDocs(docs.slice(1)) }, "Remove a selected document")),
+        docs.length > 0 && (React.createElement(ActionsBar, { actions: actions, docs: docs, color: color, IconComponent: icons[icon], maxDesktopActions: maxDesktopActions, autoClose: autoClose, onClose: () => setDocs([]) }))));
+};
+const meta = {
+    title: 'ActionsBar',
+    tags: ['autodocs'],
+    parameters: { layout: 'fullscreen' },
+    argTypes: {
+        color: {
+            control: 'select',
+            options: [
+                'default',
+                'inherit',
+                'primary',
+                'secondary',
+                'transparent',
+                'error',
+                'warning',
+                'info',
+                'success'
+            ]
+        },
+        icon: { control: 'select', options: Object.keys(icons) },
+        maxDesktopActions: { control: 'number' },
+        autoClose: { control: 'boolean' }
+    },
+    args: {
+        color: 'default',
+        icon: 'default',
+        maxDesktopActions: 5,
+        autoClose: true
+    },
+    render: args => (React.createElement(Box, { sx: { minHeight: 200, pt: 10, px: 2 } },
+        React.createElement(ExampleActionsBar, { ...args })))
+};
+export default meta;
+export const Default = {};
+// Visual Regression - the bar over two selected documents. Kept out of the
+// docs page, where its fixed bar would cover the other stories
+export const Screenshot = {
+    tags: ['argos', '!autodocs'],
+    render: () => (React.createElement(Box, { sx: { minHeight: 200 } },
+        React.createElement(ActionsBar, { actions: actions, docs: [doc, doc], onClose: () => undefined })))
+};

package/dist/components/ActionsBar/ActionsBarActions.d.ts

@@ -0,0 +1,2 @@
+declare const ActionsBarActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default ActionsBarActions;

package/dist/components/ActionsBar/ActionsBarActions.js

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+const ActionsBarActions = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'end',
+    height: '100%',
+    paddingRight: 48,
+    [theme.breakpoints.down('md')]: {
+        justifyContent: 'center',
+        paddingRight: 0
+    }
+}));
+export default ActionsBarActions;

package/dist/components/ActionsBar/ActionsBarRoot.d.ts

@@ -0,0 +1,2 @@
+declare const ActionsBarRoot: import("@emotion/styled").StyledComponent<import("@mui/material").AppBarOwnProps & Omit<import("@mui/material").PaperOwnProps, "square" | "color" | "elevation" | "position" | "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style" | "square" | "color" | "className" | "elevation" | "children" | "position" | "classes" | "sx" | "variant" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export default ActionsBarRoot;

package/dist/components/ActionsBar/ActionsBarRoot.js

@@ -0,0 +1,21 @@
+import { AppBar } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const ActionsBarRoot = styled(AppBar)(({ theme }) => ({
+    top: 0,
+    right: 22,
+    width: 'calc(100% - 44px)',
+    height: '3rem',
+    zIndex: 'var(--zIndex-selection)',
+    borderRadius: '0 0 16px 16px',
+    boxShadow: theme.vars.shadows[1],
+    [theme.breakpoints.down('md')]: {
+        top: 'auto',
+        bottom: 0,
+        right: 0,
+        width: '100%',
+        height: '4rem',
+        borderRadius: '16px 16px 0 0',
+        boxShadow: theme.vars.shadows[8]
+    }
+}));
+export default ActionsBarRoot;

package/dist/components/ActionsBar/ActionsBarSelectedCount.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ActionsBarSelectedCountProps {
+    count: number;
+    IconComponent?: React.ElementType;
+    onClose?: () => void;
+}
+declare const ActionsBarSelectedCount: ({ count, IconComponent, onClose }: ActionsBarSelectedCountProps) => React.JSX.Element;
+export default ActionsBarSelectedCount;

package/dist/components/ActionsBar/ActionsBarSelectedCount.js

@@ -0,0 +1,38 @@
+import { CheckCircle, CrossCircle, Icon } from '@linagora/twake-icons';
+import { Box, IconButton, Typography } from '@mui/material';
+import React from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import de from './locales/de.json';
+import en from './locales/en.json';
+import es from './locales/es.json';
+import fr from './locales/fr.json';
+import it from './locales/it.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+const locales = { de, en, es, fr, it, ru, vi };
+const DefaultIcon = () => (React.createElement(Box, { component: "span", sx: { display: 'inline-flex', mr: 2 } },
+    React.createElement(Icon, { icon: CheckCircle })));
+const ActionsBarSelectedCount = ({ count, IconComponent = DefaultIcon, onClose }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    const { isMobile } = useBreakpoints();
+    if (isMobile) {
+        return (React.createElement(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                height: '100%',
+                pr: 2,
+                borderRadius: '15px 0 0 0',
+                bgcolor: 'background.paper',
+                color: 'text.primary'
+            } },
+            React.createElement(IconButton, { color: "inherit", onClick: onClose },
+                React.createElement(Icon, { icon: CrossCircle })),
+            count));
+    }
+    return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', height: '100%', px: 2 } },
+        React.createElement(IconComponent, null),
+        React.createElement(Typography, { variant: "body1", component: "span", color: "inherit" }, t('ActionsBar.selected_light', { smart_count: count }))));
+};
+export default ActionsBarSelectedCount;

package/dist/components/ActionsBar/ResponsiveAction.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ActionComponentProps } from '../ActionsMenu/types';
+/** Action of the bar, with its label under its icon on mobile */
+declare const ResponsiveAction: React.ForwardRefExoticComponent<ActionComponentProps & React.RefAttributes<HTMLElement>>;
+export default ResponsiveAction;

package/dist/components/ActionsBar/ResponsiveAction.js

@@ -0,0 +1,19 @@
+import { Icon } from '@linagora/twake-icons';
+import { buttonClasses, Typography } from '@mui/material';
+import React, { forwardRef } from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import Button from '../Button';
+const MOBILE_SX = {
+    flex: '1 1 0',
+    flexDirection: 'column',
+    padding: 0,
+    textTransform: 'none',
+    [`& .${buttonClasses.startIcon}`]: { marginRight: 0, marginBottom: '2px' }
+};
+/** Action of the bar, with its label under its icon on mobile */
+const ResponsiveAction = forwardRef(({ action, disabled, onClick }, ref) => {
+    const { isMobile } = useBreakpoints();
+    return (React.createElement(Button, { ref: ref, variant: "text", color: "inherit", startIcon: action.icon && React.createElement(Icon, { icon: action.icon }), disabled: disabled, sx: isMobile ? MOBILE_SX : undefined, onClick: onClick }, isMobile ? (React.createElement(Typography, { variant: "caption", color: "inherit" }, action.label)) : (action.label)));
+});
+ResponsiveAction.displayName = 'ResponsiveAction';
+export default ResponsiveAction;

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

@@ -0,0 +1,18 @@
+import { AppBarProps } from '@mui/material';
+import React from 'react';
+import { ActionDocument, ActionObject } from '../ActionsMenu/types';
+export interface ActionsBarProps {
+    actions: ActionObject[];
+    docs: ActionDocument[];
+    /** Closes the bar when an action is clicked */
+    autoClose?: boolean;
+    /** Actions shown in the bar on desktop, the others go to a menu */
+    maxDesktopActions?: number;
+    color?: AppBarProps['color'];
+    /** Replaces the icon next to the selection count, on desktop */
+    IconComponent?: React.ElementType;
+    onClose?: () => void;
+}
+/** Bar of the actions available on the selected documents */
+declare const ActionsBar: ({ actions, docs, autoClose, maxDesktopActions, color, IconComponent, onClose }: ActionsBarProps) => React.JSX.Element;
+export default ActionsBar;

package/dist/components/ActionsBar/index.js

@@ -0,0 +1,45 @@
+import { Cross, Dots, Icon } from '@linagora/twake-icons';
+import { IconButton, Toolbar } from '@mui/material';
+import React, { useMemo, useRef, useState } from 'react';
+import ActionsBarActions from './ActionsBarActions';
+import ActionsBarRoot from './ActionsBarRoot';
+import ActionsBarSelectedCount from './ActionsBarSelectedCount';
+import ResponsiveAction from './ResponsiveAction';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import ActionsMenu from '../ActionsMenu';
+import { makeActions } from '../ActionsMenu/Actions/helpers';
+import { others } from '../ActionsMenu/Actions/others';
+import ActionsItems from '../ActionsMenu/ActionsItems';
+import { getOnlyNeededActions } from '../ActionsMenu/helpers';
+const MOBILE_MAX_ACTIONS = 4;
+/** Bar of the actions available on the selected documents */
+const ActionsBar = ({ actions, docs, autoClose = true, maxDesktopActions = 5, color = 'default', IconComponent, onClose }) => {
+    const { isMobile } = useBreakpoints();
+    const anchorRef = useRef(null);
+    const [showMenu, setShowMenu] = useState(false);
+    const maxActionsDisplayed = isMobile ? MOBILE_MAX_ACTIONS : maxDesktopActions;
+    const cleanedActions = useMemo(() => getOnlyNeededActions(actions, docs), [actions, docs]);
+    // Keeps a slot for the menu button when some actions do not fit
+    const countActionsToDisplay = cleanedActions.length > maxActionsDisplayed
+        ? maxActionsDisplayed - 1
+        : maxActionsDisplayed;
+    const sliceIndex = Math.max(1, countActionsToDisplay);
+    const barActions = cleanedActions.slice(0, sliceIndex);
+    const menuActions = cleanedActions.slice(sliceIndex);
+    const handleClick = () => {
+        if (autoClose)
+            onClose?.();
+    };
+    return (React.createElement(ActionsBarRoot, { position: "fixed", color: color },
+        React.createElement(Toolbar, { variant: isMobile ? 'regular' : 'dense', disableGutters: true, sx: { height: 'inherit' } },
+            !!onClose && !isMobile && (React.createElement(IconButton, { color: "inherit", sx: { position: 'absolute', right: 0 }, onClick: onClose },
+                React.createElement(Icon, { icon: Cross }))),
+            React.createElement(ActionsBarSelectedCount, { count: docs.length, IconComponent: IconComponent, onClose: onClose }),
+            React.createElement(ActionsBarActions, null,
+                React.createElement(ActionsItems, { docs: docs, actions: barActions, component: ResponsiveAction, onClick: handleClick }),
+                menuActions.length > 0 && (React.createElement(React.Fragment, null,
+                    isMobile ? (React.createElement(ActionsItems, { docs: docs, actions: makeActions([others]), component: ResponsiveAction, onClick: () => setShowMenu(true) })) : (React.createElement(IconButton, { ref: anchorRef, color: "inherit", onClick: () => setShowMenu(true) },
+                        React.createElement(Icon, { icon: Dots }))),
+                    React.createElement(ActionsMenu, { ref: anchorRef, open: showMenu, docs: docs, actions: menuActions, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, componentsProps: { actionsItems: { onClick: handleClick } }, onClose: () => setShowMenu(false) })))))));
+};
+export default ActionsBar;

package/dist/components/ActionsBar/locales/de.json

@@ -0,0 +1,6 @@
+{
+    "ActionsBar": {
+        "selected": "%{smart_count} Element ausgewählt |||| %{smart_count} Elemente ausgewählt",
+        "selected_light": "%{smart_count} Element |||| %{smart_count} Elemente"
+    }
+}

package/dist/components/ActionsBar/locales/en.json

@@ -0,0 +1,6 @@
+{
+    "ActionsBar": {
+        "selected": "%{smart_count} item selected |||| %{smart_count} items selected",
+        "selected_light": "%{smart_count} item |||| %{smart_count} items"
+    }
+}

package/dist/components/ActionsBar/locales/es.json

@@ -0,0 +1,6 @@
+{
+    "ActionsBar": {
+        "selected": "%{smart_count} elemento seleccionado |||| %{smart_count} elementos seleccionados",
+        "selected_light": "%{smart_count} elemento |||| %{smart_count} elementos"
+    }
+}

package/dist/components/ActionsBar/locales/fr.json

@@ -0,0 +1,6 @@
+{
+    "ActionsBar": {
+        "selected": "%{smart_count} élément sélectionné |||| %{smart_count} éléments sélectionnés",
+        "selected_light": "%{smart_count} élément |||| %{smart_count} éléments"
+    }
+}

package/dist/components/ActionsBar/locales/it.json

@@ -0,0 +1,6 @@
+{
+    "ActionsBar": {
+        "selected": "%{smart_count} elemento selezionato |||| %{smart_count} elementi selezionati",
+        "selected_light": "%{smart_count} elemento |||| %{smart_count} elementi"
+    }
+}

package/dist/components/ActionsBar/locales/ru.json

@@ -0,0 +1,6 @@
+{
+    "ActionsBar": {
+        "selected": "%{smart_count} элемент выбран |||| %{smart_count} элементов выбрано",
+        "selected_light": "%{smart_count} элемент |||| %{smart_count} элементов"
+    }
+}

package/dist/components/ActionsBar/locales/vi.json

@@ -0,0 +1,6 @@
+{
+    "ActionsBar": {
+        "selected": "%{smart_count} mục được chọn |||| %{smart_count} mục được chọn",
+        "selected_light": "%{smart_count} mục |||| %{smart_count} mục"
+    }
+}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { makePalette } from './lib/makePalette';
 export { theme } from './lib/theme';
 export { radius } from './lib/radius';
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+export { default as ActionsBar } from './components/ActionsBar';
 export { default as ActionsMenu } from './components/ActionsMenu';
 export { default as ActionsMenuWrapper } from './components/ActionsMenu/ActionsMenuWrapper';
 export { default as ActionsMenuItem } from './components/ActionsMenu/ActionsMenuItem';
@@ -79,6 +80,7 @@ export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlay
 export { OverlayFrame } from './components/SpaceOverlay/OverlayFrame';
 export type { TwakeTheme } from './lib/theme';
 export type { PaletteJson } from './lib/types';
+export type { ActionsBarProps } from './components/ActionsBar';
 export type { ActionsMenuProps, ActionsMenuComponentsProps } from './components/ActionsMenu';
 export type { ActionsMenuWrapperProps } from './components/ActionsMenu/ActionsMenuWrapper';
 export type { ActionsMenuItemProps } from './components/ActionsMenu/ActionsMenuItem';

package/dist/index.js

@@ -9,6 +9,7 @@ export { theme } from './lib/theme';
 export { radius } from './lib/radius';
 // COMPONENTS & HELPERS
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+export { default as ActionsBar } from './components/ActionsBar';
 export { default as ActionsMenu } from './components/ActionsMenu';
 export { default as ActionsMenuWrapper } from './components/ActionsMenu/ActionsMenuWrapper';
 export { default as ActionsMenuItem } from './components/ActionsMenu/ActionsMenuItem';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "12.1.0",
+  "version": "13.0.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "cozy-intent": ">=2.29.1",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "twake-i18n": ">=0.6.0"
+    "twake-i18n": ">=0.7.1"
   },
   "dependencies": {
     "@mui/utils": "^9.2.0",
@@ -104,7 +104,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "storybook": "10.3.5",
-    "twake-i18n": "^0.6.0",
+    "twake-i18n": "^0.7.1",
     "vite": "8.3.1",
     "vitest": "4.1.11"
   }