@linagora/twake-mui 10.5.1 → 11.1.0

package/dist/components/ActionsMenu/Actions/print.js

@@ -0,0 +1,42 @@
+import { Printer } from '@linagora/twake-icons';
+import { makeBase64FromFile, makePdfBlob } from './helpers';
+import { logger } from './logger';
+import { makeAction } from './makeAction';
+import { getActionsI18n } from '../locales';
+export const print = ({ client, fetchBlobFileById, isFile }) => {
+    const { t } = getActionsI18n();
+    return makeAction({
+        name: 'print',
+        label: t('ActionsMenu.print'),
+        icon: Printer,
+        disabled: docs => docs.length === 0,
+        displayCondition: docs => docs.every(doc => isFile(doc)),
+        action: async (docs, { webviewIntent }) => {
+            const [firstDoc] = docs;
+            const isSingleDoc = docs.length === 1;
+            try {
+                if (webviewIntent) {
+                    const blob = isSingleDoc
+                        ? await fetchBlobFileById(client, firstDoc._id)
+                        : await makePdfBlob({ client, docs, fetchBlobFileById });
+                    const base64 = await makeBase64FromFile(blob);
+                    return await webviewIntent.call('print', base64);
+                }
+                const docUrl = isSingleDoc
+                    ? await client
+                        .collection('io.cozy.files')
+                        .getDownloadLinkById(firstDoc._id, firstDoc.name)
+                    : URL.createObjectURL(await makePdfBlob({ client, docs, fetchBlobFileById }));
+                // Safari blocks window.open called from an async function
+                setTimeout(() => {
+                    window.open(docUrl, '_blank');
+                });
+                return docUrl;
+            }
+            catch (error) {
+                logger.error(`Error trying to print document ${webviewIntent ? 'inside' : 'outside'} the native app: ${JSON.stringify(error)}`);
+                return null;
+            }
+        }
+    });
+};

package/dist/components/ActionsMenu/Actions/smsTo.d.ts

@@ -0,0 +1,2 @@
+import { Action } from '../types';
+export declare const smsTo: () => Action;

package/dist/components/ActionsMenu/Actions/smsTo.js

@@ -0,0 +1,16 @@
+import { Comment } from '@linagora/twake-icons';
+import { makeAction } from './makeAction';
+import { getActionsI18n } from '../locales';
+export const smsTo = () => {
+    const { t } = getActionsI18n();
+    return makeAction({
+        name: 'smsTo',
+        label: t('ActionsMenu.smsTo'),
+        icon: Comment,
+        action: (docs) => {
+            const target = docs[0]?.phone?.[0]?.number;
+            if (target)
+                window.open(`sms:${target}`, '_self');
+        }
+    });
+};

package/dist/components/ActionsMenu/Actions/viewInContacts.d.ts

@@ -0,0 +1,2 @@
+import { Action, WebLinkActionOptions } from '../types';
+export declare const viewInContacts: ({ client, generateWebLink }: WebLinkActionOptions) => Action;

package/dist/components/ActionsMenu/Actions/viewInContacts.js

@@ -0,0 +1,21 @@
+import { Openapp } from '@linagora/twake-icons';
+import { makeAppWebLink } from './helpers';
+import { makeAction } from './makeAction';
+import { getActionsI18n } from '../locales';
+export const viewInContacts = ({ client, generateWebLink }) => {
+    const { t } = getActionsI18n();
+    return makeAction({
+        name: 'viewInContacts',
+        label: t('ActionsMenu.viewInContacts'),
+        icon: Openapp,
+        action: (docs) => {
+            const webLink = makeAppWebLink({
+                client,
+                generateWebLink,
+                slug: 'contacts',
+                hash: `/${docs[0]._id}`
+            });
+            window.open(webLink, '_blank');
+        }
+    });
+};

package/dist/components/ActionsMenu/Actions/viewInDrive.d.ts

@@ -0,0 +1,2 @@
+import { Action, WebLinkActionOptions } from '../types';
+export declare const viewInDrive: ({ client, generateWebLink }: WebLinkActionOptions) => Action;

package/dist/components/ActionsMenu/Actions/viewInDrive.js

@@ -0,0 +1,22 @@
+import { FolderOpen } from '@linagora/twake-icons';
+import { makeAppWebLink } from './helpers';
+import { makeAction } from './makeAction';
+import { getActionsI18n } from '../locales';
+export const viewInDrive = ({ client, generateWebLink }) => {
+    const { t } = getActionsI18n();
+    return makeAction({
+        name: 'viewInDrive',
+        label: t('ActionsMenu.viewInDrive'),
+        icon: FolderOpen,
+        action: (docs) => {
+            const { dir_id: dirId, driveId } = docs[0];
+            const webLink = makeAppWebLink({
+                client,
+                generateWebLink,
+                slug: 'drive',
+                hash: driveId ? `shareddrive/${driveId}/${dirId}` : `folder/${dirId}`
+            });
+            window.open(webLink, '_blank');
+        }
+    });
+};

package/dist/components/ActionsMenu/ActionsItems.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ListItemSize } from '../ListItem';
+import { ActionComponent, ActionDocument, ActionObject } from './types';
+export interface ActionsItemsProps {
+    docs: ActionDocument[];
+    actions: ActionObject[];
+    /** Options passed to the `action` method of every action */
+    actionOptions?: Record<string, unknown>;
+    /** Renders every action with this component instead of its own */
+    component?: ActionComponent;
+    /** Called after any action is clicked */
+    onClick?: () => void;
+    isListItem?: boolean;
+    size?: ListItemSize;
+}
+declare const ActionsItems: React.ForwardRefExoticComponent<ActionsItemsProps & React.RefAttributes<HTMLElement>>;
+export default ActionsItems;

package/dist/components/ActionsMenu/ActionsItems.js

@@ -0,0 +1,27 @@
+import React, { forwardRef, useMemo } from 'react';
+import { useWebviewIntent } from 'cozy-intent';
+import { useI18n } from 'twake-i18n';
+import { getActionName, getOnlyNeededActions } from './helpers';
+const ActionsItems = forwardRef(({ docs, actions, actionOptions, component, onClick: overriddenClick, ...props }, ref) => {
+    const webviewIntent = useWebviewIntent();
+    const { t } = useI18n();
+    const cleanedActions = useMemo(() => getOnlyNeededActions(actions, docs), [actions, docs]);
+    return cleanedActions.map((actionObject, idx) => {
+        const actionName = getActionName(actionObject);
+        const actionDefinition = actionObject[actionName];
+        const { Component: ActionComponent, disabled } = actionDefinition;
+        const handleClick = (clickProps) => {
+            actionDefinition.action?.(docs, {
+                t,
+                webviewIntent,
+                ...actionOptions,
+                ...clickProps
+            });
+            overriddenClick?.();
+        };
+        const Component = component ?? ActionComponent;
+        return (React.createElement(Component, { ...props, ref: ref, key: actionName + idx, action: actionDefinition, docs: docs, autoFocus: idx === 0, disabled: disabled?.(docs), onClick: handleClick }));
+    });
+});
+ActionsItems.displayName = 'ActionsItems';
+export default ActionsItems;

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

@@ -0,0 +1,16 @@
+import { PopoverOrigin } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+interface ExampleArgs {
+    defaultOpen: boolean;
+    vertical: PopoverOrigin['vertical'];
+    horizontal: PopoverOrigin['horizontal'];
+    autoClose: boolean;
+    autoCloseOnContextMenu: boolean;
+}
+declare const meta: Meta<ExampleArgs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ManualActions: Story;
+export declare const Screenshot: Story;
+export declare const ManualScreenshot: Story;

package/dist/components/ActionsMenu/ActionsMenu.stories.js

@@ -0,0 +1,168 @@
+import { Attachment, Attention, Contrast, Copy, File, FileTypeText, Icon, Pen, People, Telephone } from '@linagora/twake-icons';
+import { Box, Divider, ListItemIcon, Typography } from '@mui/material';
+import { Globals } from '@react-spring/web';
+import React, { forwardRef, useRef, useState } from 'react';
+import DropdownButton from '../DropdownButton';
+import ListItemText from '../ListItemText';
+import { call } from './Actions/call';
+import { divider } from './Actions/divider';
+import { emailTo } from './Actions/emailTo';
+import { makeActions } from './Actions/helpers';
+import { modify } from './Actions/modify';
+import { print } from './Actions/print';
+import { smsTo } from './Actions/smsTo';
+import { viewInContacts } from './Actions/viewInContacts';
+import { viewInDrive } from './Actions/viewInDrive';
+import ActionsMenuItem from './ActionsMenuItem';
+import ActionsMenuMobileHeader from './ActionsMenuMobileHeader';
+import ActionsMenuWrapper from './ActionsMenuWrapper';
+import ActionsMenu from './index';
+const doc = {
+    _id: 'id01',
+    _type: 'io.cozy.contacts',
+    phone: [{ number: '0102030405' }],
+    email: [{ address: 'johndoe@example.com' }]
+};
+const mockClient = {
+    getStackClient: () => ({ uri: 'https://' }),
+    getInstanceOptions: () => ({ subdomain: '' }),
+    collection: () => ({ getDownloadLinkById: () => Promise.resolve('') })
+};
+const LONG_TEXT = 'This is a custom action, with a very long text to show how it is displayed';
+const CustomActionComponent = forwardRef((props, ref) => (React.createElement(ActionsMenuItem, { ...props, ref: ref },
+    React.createElement(ListItemIcon, null,
+        React.createElement(Icon, { icon: File })),
+    React.createElement(ListItemText, { primary: LONG_TEXT, secondary: LONG_TEXT }))));
+CustomActionComponent.displayName = 'customAction';
+const customAction = () => ({
+    name: 'customAction',
+    action: () => undefined,
+    Component: CustomActionComponent
+});
+const actions = makeActions([
+    modify,
+    viewInContacts,
+    viewInDrive,
+    divider,
+    call,
+    smsTo,
+    emailTo,
+    print,
+    divider,
+    customAction
+], {
+    client: mockClient,
+    generateWebLink: () => '',
+    fetchBlobFileById: () => Promise.resolve(new Blob()),
+    isFile: () => false
+});
+const MobileHeader = () => (React.createElement(ActionsMenuMobileHeader, null,
+    React.createElement(ListItemIcon, null,
+        React.createElement(Icon, { icon: FileTypeText, size: 32 })),
+    React.createElement(ListItemText, { primary: "Title", slotProps: { primary: { variant: 'h6' } } })));
+const ExampleActionsMenu = ({ defaultOpen, vertical, horizontal, autoClose, autoCloseOnContextMenu }) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownButton, { ref: anchorRef, "aria-haspopup": "true", onClick: () => setIsOpen(open => !open) }, "Show action menu"),
+        React.createElement(ActionsMenu, { ref: anchorRef, open: isOpen, docs: [doc], actions: actions, anchorOrigin: { vertical, horizontal }, autoClose: autoClose, autoCloseOnContextMenu: autoCloseOnContextMenu, autoFocus: !defaultOpen, disablePortal: defaultOpen, disableScrollLock: defaultOpen, onClose: () => setIsOpen(false) },
+            React.createElement(MobileHeader, null))));
+};
+const ExampleManualActionsMenu = ({ defaultOpen }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownButton, { ref: setAnchorEl, "aria-haspopup": "true", onClick: () => setIsOpen(open => !open) }, "Show action menu"),
+        isOpen && anchorEl !== null && (React.createElement(ActionsMenuWrapper, { open: true, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, keepMounted: true, autoClose: true, autoFocus: !defaultOpen, disablePortal: defaultOpen, disableScrollLock: defaultOpen, onClose: () => setIsOpen(false) },
+            React.createElement(MobileHeader, null),
+            React.createElement(ActionsMenuItem, { autoFocus: true },
+                React.createElement(ListItemIcon, null,
+                    React.createElement(Icon, { icon: Pen })),
+                React.createElement(ListItemText, { primary: "Modify" }),
+                React.createElement(ListItemIcon, null,
+                    React.createElement(Typography, { color: "error" },
+                        React.createElement(Icon, { icon: Attention })))),
+            React.createElement(ActionsMenuItem, null,
+                React.createElement(ListItemIcon, null,
+                    React.createElement(Icon, { icon: People })),
+                React.createElement(ListItemText, { primary: "People" })),
+            React.createElement(ActionsMenuItem, null,
+                React.createElement(ListItemIcon, null,
+                    React.createElement(Icon, { icon: Attachment })),
+                React.createElement(ListItemText, { primary: "Attachment" })),
+            React.createElement(ActionsMenuItem, null,
+                React.createElement(ListItemText, { primary: "Item without icon" })),
+            React.createElement(Divider, { sx: { my: 1 } }),
+            React.createElement(ActionsMenuItem, null,
+                React.createElement(ListItemIcon, null,
+                    React.createElement(Icon, { icon: Telephone })),
+                React.createElement(ListItemText, { primary: "Call" })),
+            React.createElement(ActionsMenuItem, null,
+                React.createElement(ListItemIcon, null,
+                    React.createElement(Icon, { icon: Contrast })),
+                React.createElement(ListItemText, { primary: "Contrast" })),
+            React.createElement(ActionsMenuItem, null,
+                React.createElement(ListItemIcon, null,
+                    React.createElement(Icon, { icon: Copy })),
+                React.createElement(ListItemText, { primary: "Copy" }))))));
+};
+/** The bottom sheet animates through react-spring, which Playwright cannot fast-forward */
+const skipSpringAnimations = () => {
+    Globals.assign({ skipAnimation: true });
+    return () => Globals.assign({ skipAnimation: false });
+};
+const meta = {
+    title: 'ActionsMenu',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Menu of actions built with `makeActions`, displayed as a bottom sheet on mobile. `ActionsMenuMobileHeader` only renders on mobile, where the menu hides its anchor.'
+            }
+        }
+    },
+    argTypes: {
+        defaultOpen: { control: 'boolean' },
+        vertical: { control: 'select', options: ['top', 'center', 'bottom'] },
+        horizontal: { control: 'select', options: ['left', 'center', 'right'] },
+        autoClose: { control: 'boolean' },
+        autoCloseOnContextMenu: { control: 'boolean' }
+    },
+    args: {
+        defaultOpen: false,
+        vertical: 'bottom',
+        horizontal: 'left',
+        autoClose: true,
+        autoCloseOnContextMenu: true
+    },
+    render: args => React.createElement(ExampleActionsMenu, { ...args })
+};
+export default meta;
+export const Default = {};
+export const ManualActions = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Items written by hand inside `ActionsMenuWrapper`, without `makeActions`.'
+            }
+        }
+    },
+    render: args => React.createElement(ExampleManualActionsMenu, { defaultOpen: args.defaultOpen })
+};
+// Visual Regression - the menu built with makeActions, opened. Kept out of the
+// docs page, where its open bottom sheet would cover the whole page on mobile
+export const Screenshot = {
+    tags: ['argos', '!autodocs'],
+    parameters: { layout: 'padded' },
+    beforeEach: skipSpringAnimations,
+    render: args => (React.createElement(Box, { sx: { minHeight: 640 } },
+        React.createElement(ExampleActionsMenu, { ...args, defaultOpen: true })))
+};
+// Visual Regression - the menu written by hand, opened
+export const ManualScreenshot = {
+    tags: ['argos', '!autodocs'],
+    parameters: { layout: 'padded' },
+    beforeEach: skipSpringAnimations,
+    render: () => (React.createElement(Box, { sx: { minHeight: 440 } },
+        React.createElement(ExampleManualActionsMenu, { defaultOpen: true })))
+};

package/dist/components/ActionsMenu/ActionsMenuButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ActionDocument, ActionObject } from './types';
+export interface ActionsMenuButtonProps {
+    docs?: ActionDocument[];
+    actions?: ActionObject[];
+}
+declare const ActionsMenuButton: ({ docs, actions }: ActionsMenuButtonProps) => React.JSX.Element;
+export default ActionsMenuButton;

package/dist/components/ActionsMenu/ActionsMenuButton.js

@@ -0,0 +1,18 @@
+import { Dots, Icon } from '@linagora/twake-icons';
+import { IconButton, ListItemIcon } from '@mui/material';
+import React, { useRef, useState } from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import ActionsMenu from '.';
+import { locales } from './locales';
+const ActionsMenuButton = ({ docs, actions }) => {
+    const [showActions, setShowActions] = useState(false);
+    const actionsRef = useRef(null);
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ListItemIcon, null,
+            React.createElement(IconButton, { ref: actionsRef, "aria-label": t('ActionsMenu.menu'), onClick: () => setShowActions(true) },
+                React.createElement(Icon, { icon: Dots }))),
+        showActions && (React.createElement(ActionsMenu, { open: true, ref: actionsRef, docs: docs, actions: actions, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, onClose: () => setShowActions(false) }))));
+};
+export default ActionsMenuButton;

package/dist/components/ActionsMenu/ActionsMenuItem.d.ts

@@ -0,0 +1,16 @@
+import { MenuItemProps } from '@mui/material';
+import React from 'react';
+import { ListItemSize } from '../ListItem';
+import { Action, ActionDocument } from './types';
+export interface ActionsMenuItemProps extends Omit<MenuItemProps, 'ref' | 'onClick' | 'action'> {
+    /** Action rendered by the item, kept off the DOM */
+    action?: Action;
+    /** Documents the action applies to, kept off the DOM */
+    docs?: ActionDocument[];
+    /** Renders a list item, as in a bottom sheet, instead of a menu item */
+    isListItem?: boolean;
+    size?: ListItemSize;
+    onClick?: (clickProps?: object) => void;
+}
+declare const ActionsMenuItem: React.ForwardRefExoticComponent<ActionsMenuItemProps & React.RefAttributes<HTMLElement>>;
+export default ActionsMenuItem;

package/dist/components/ActionsMenu/ActionsMenuItem.js

@@ -0,0 +1,23 @@
+import { MenuItem } from '@mui/material';
+import React, { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import ListItemButton from '../ListItemButton';
+import ListItemText from '../ListItemText';
+const NON_DOM_PROPS = ['t', 'f', 'lang'];
+const omitNonDomProps = (props) => {
+    return Object.fromEntries(Object.entries(props).filter(([key]) => !NON_DOM_PROPS.includes(key)));
+};
+const mergeSx = (style, sx) => {
+    return [style, sx ?? false].flat();
+};
+const ActionsMenuItem = forwardRef(({ action: _action, docs: _docs, isListItem, size, sx, children, ...props }, ref) => {
+    const domProps = omitNonDomProps(props);
+    if (isListItem) {
+        return (React.createElement(ListItemButton, { ...domProps, ref: ref, size: size, ellipsis: false, sx: mergeSx({ wordBreak: 'break-word' }, sx) }, children));
+    }
+    return (React.createElement(MenuItem, { ...domProps, ref: ref, sx: mergeSx({ minWidth: 256 }, sx) }, Children.map(children, child => isValidElement(child) &&
+        child.type === ListItemText
+        ? cloneElement(child, { ellipsis: false })
+        : child)));
+});
+ActionsMenuItem.displayName = 'ActionsMenuItem';
+export default ActionsMenuItem;

package/dist/components/ActionsMenu/ActionsMenuMobileHeader.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ActionsMenuItemProps } from './ActionsMenuItem';
+export type ActionsMenuMobileHeaderProps = Omit<ActionsMenuItemProps, 'isListItem'>;
+/** Gives context to the actions, only on mobile where the menu hides its anchor */
+declare const ActionsMenuMobileHeader: React.ForwardRefExoticComponent<ActionsMenuMobileHeaderProps & React.RefAttributes<HTMLElement>>;
+export default ActionsMenuMobileHeader;

package/dist/components/ActionsMenu/ActionsMenuMobileHeader.js

@@ -0,0 +1,15 @@
+import { Divider } from '@mui/material';
+import React, { forwardRef } from 'react';
+import ActionsMenuItem from './ActionsMenuItem';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+/** Gives context to the actions, only on mobile where the menu hides its anchor */
+const ActionsMenuMobileHeader = forwardRef(({ children, ...props }, ref) => {
+    const { isMobile } = useBreakpoints();
+    if (!isMobile)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionsMenuItem, { ...props, ref: ref, isListItem: true }, children),
+        React.createElement(Divider, { sx: { my: 1 } })));
+});
+ActionsMenuMobileHeader.displayName = 'ActionsMenuMobileHeader';
+export default ActionsMenuMobileHeader;

package/dist/components/ActionsMenu/ActionsMenuWrapper.d.ts

@@ -0,0 +1,11 @@
+import { MenuProps } from '@mui/material';
+import React from 'react';
+export interface ActionsMenuWrapperProps extends Omit<MenuProps, 'open' | 'onClose'> {
+    open?: boolean;
+    /** Closes the menu when an item is clicked */
+    autoClose?: boolean;
+    onClose?: () => void;
+}
+/** Renders its items in a menu on desktop, in a bottom sheet on mobile */
+declare const ActionsMenuWrapper: ({ children, autoClose, open, onClose, ...props }: ActionsMenuWrapperProps) => React.JSX.Element | null;
+export default ActionsMenuWrapper;

package/dist/components/ActionsMenu/ActionsMenuWrapper.js

@@ -0,0 +1,41 @@
+import { Menu, Paper } from '@mui/material';
+import React, { Children, cloneElement, isValidElement } from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import BottomSheet from '../BottomSheet';
+const getComponentName = (node) => {
+    if (!isValidElement(node) || typeof node.type === 'string')
+        return null;
+    const type = node.type;
+    return type.displayName ?? type.name ?? null;
+};
+/** Renders its items in a menu on desktop, in a bottom sheet on mobile */
+const ActionsMenuWrapper = ({ children, autoClose, open = false, onClose, ...props }) => {
+    const { isMobile } = useBreakpoints();
+    const makeClickHandler = (itemProps) => (clickProps) => {
+        itemProps.onClick?.(clickProps);
+        if (autoClose)
+            onClose?.();
+    };
+    if (isMobile) {
+        if (!open)
+            return null;
+        return (React.createElement(BottomSheet, { backdrop: true, onClose: onClose },
+            React.createElement(Paper, { square: true }, Children.map(children, child => isValidElement(child)
+                ? cloneElement(child, {
+                    isListItem: true,
+                    size: 'small',
+                    onClick: makeClickHandler(child.props)
+                })
+                : null))));
+    }
+    const items = Children.toArray(children);
+    // Keeps the focus on the first action, as the mobile header renders nothing here
+    const isFirstItemMobileHeader = getComponentName(items[0]) === 'ActionsMenuMobileHeader';
+    return (React.createElement(Menu, { ...props, open: open, onClose: onClose }, Children.map(children, (child, idx) => isValidElement(child)
+        ? cloneElement(child, {
+            autoFocus: isFirstItemMobileHeader && idx === 1 ? true : undefined,
+            onClick: makeClickHandler(child.props)
+        })
+        : null)));
+};
+export default ActionsMenuWrapper;

package/dist/components/ActionsMenu/helpers.d.ts

@@ -0,0 +1,8 @@
+import { ActionDocument, ActionObject } from './types';
+export declare const getActionName: (actionObject: ActionObject) => string;
+/**
+ * Keeps the actions to display: drops hidden ones, the same action twice in a
+ * row, and a trailing divider. Display conditions are only known with the docs,
+ * so the final list cannot be known when the actions are made.
+ */
+export declare const getOnlyNeededActions: (actions: ActionObject[], docs: ActionDocument[]) => ActionObject[];

package/dist/components/ActionsMenu/helpers.js

@@ -0,0 +1,21 @@
+export const getActionName = (actionObject) => {
+    return Object.keys(actionObject)[0];
+};
+const isDivider = (actionObject) => {
+    const name = getActionName(actionObject);
+    return name === 'hr' || name === 'divider';
+};
+/**
+ * Keeps the actions to display: drops hidden ones, the same action twice in a
+ * row, and a trailing divider. Display conditions are only known with the docs,
+ * so the final list cannot be known when the actions are made.
+ */
+export const getOnlyNeededActions = (actions, docs) => {
+    const displayableActions = actions.filter(actionObject => {
+        const { displayCondition } = Object.values(actionObject)[0];
+        return !displayCondition || displayCondition(docs);
+    });
+    const withoutRepeats = displayableActions.filter((actionObject, idx) => idx === 0 ||
+        getActionName(actionObject) !== getActionName(displayableActions[idx - 1]));
+    return withoutRepeats.filter((actionObject, idx) => !(isDivider(actionObject) && idx === withoutRepeats.length - 1));
+};

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

@@ -0,0 +1,21 @@
+import { PopoverOrigin } from '@mui/material';
+import React from 'react';
+import { ActionsItemsProps } from './ActionsItems';
+import { ActionsMenuWrapperProps } from './ActionsMenuWrapper';
+import { ActionDocument, ActionObject } from './types';
+export interface ActionsMenuComponentsProps {
+    actionsItems?: Pick<ActionsItemsProps, 'actionOptions' | 'onClick'>;
+}
+export interface ActionsMenuProps extends ActionsMenuWrapperProps {
+    docs?: ActionDocument[];
+    actions?: ActionObject[];
+    anchorOrigin?: PopoverOrigin;
+    autoCloseOnContextMenu?: boolean;
+    componentsProps?: ActionsMenuComponentsProps;
+}
+/**
+ * Menu of actions, displayed as a bottom sheet on mobile. The `ref` is the
+ * element the menu is anchored to on desktop.
+ */
+declare const ActionsMenu: React.ForwardRefExoticComponent<Omit<ActionsMenuProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default ActionsMenu;

package/dist/components/ActionsMenu/index.js

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react';
+import ActionsItems from './ActionsItems';
+import ActionsMenuWrapper from './ActionsMenuWrapper';
+const DEFAULT_ANCHOR_ORIGIN = {
+    vertical: 'bottom',
+    horizontal: 'left'
+};
+const computeTransformOrigin = ({ vertical, horizontal }) => {
+    const opposites = {
+        bottom: 'top',
+        top: 'bottom'
+    };
+    return { vertical: opposites[vertical] ?? vertical, horizontal };
+};
+/**
+ * Menu of actions, displayed as a bottom sheet on mobile. The `ref` is the
+ * element the menu is anchored to on desktop.
+ */
+const ActionsMenu = forwardRef(({ docs = [], actions = [], anchorOrigin = DEFAULT_ANCHOR_ORIGIN, autoClose = true, autoCloseOnContextMenu = true, componentsProps = {}, children, onClose, ...props }, ref) => {
+    const getAnchorEl = () => ref && typeof ref === 'object' ? ref.current : null;
+    const handleContextMenu = (event) => {
+        event.preventDefault();
+        onClose?.();
+    };
+    return (React.createElement(ActionsMenuWrapper, { ...props, anchorEl: getAnchorEl, anchorOrigin: anchorOrigin, transformOrigin: computeTransformOrigin(anchorOrigin), keepMounted: true, autoClose: autoClose, ...(autoCloseOnContextMenu && { onContextMenu: handleContextMenu }), onClose: onClose },
+        children,
+        React.createElement(ActionsItems, { ...componentsProps.actionsItems, docs: docs, actions: actions })));
+});
+ActionsMenu.displayName = 'ActionsMenu';
+export default ActionsMenu;

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

@@ -0,0 +1,32 @@
+{
+    "ActionsMenu": {
+        "menu": "Menü",
+        "viewInContacts": "In Cozy Contacts anzeigen",
+        "viewInDrive": "Öffnen",
+        "modify": "Bearbeiten",
+        "emailTo": "E-Mail senden",
+        "smsTo": "Nachricht senden",
+        "print": "Drucken",
+        "download": "Herunterladen",
+        "favorites": {
+            "add": {
+                "label": "Zu Favoriten hinzufügen",
+                "success": "%{filename} wurde zu den Favoriten hinzugefügt |||| Diese Elemente wurden zu den Favoriten hinzugefügt"
+            },
+            "remove": {
+                "label": "Aus Favoriten entfernen",
+                "success": "%{filename} wurde aus den Favoriten entfernt |||| Diese Elemente wurden aus den Favoriten entfernt"
+            },
+            "error": "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut."
+        },
+        "others": "Weitere",
+        "editAttribute": "Attribut bearbeiten",
+        "copyToClipboard": {
+            "copy": "Kopieren",
+            "success": "In die Zwischenablage kopiert",
+            "error": "Kopieren in die Zwischenablage nicht möglich"
+        },
+        "call": "Anrufen",
+        "exportToText": "Als Text exportieren"
+    }
+}