@frontify/guideline-blocks-settings 0.32.0 → 0.32.2

package/src/components/BlockItemWrapper/Toolbar/BaseToolbarButton.spec.tsx

@@ -0,0 +1,40 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { BaseToolbarButton } from './BaseToolbarButton';
+
+const BUTTON_ID = 'base-toolbar-button';
+
+describe('BaseToolbarButton', () => {
+    afterEach(() => {
+        cleanup();
+    });
+    it('should call onClick', async () => {
+        const onClickStub = vi.fn();
+        const { getByTestId } = render(<BaseToolbarButton onClick={onClickStub}>Button</BaseToolbarButton>);
+
+        await fireEvent.click(getByTestId(BUTTON_ID));
+
+        expect(onClickStub).toHaveBeenCalledOnce();
+    });
+
+    it('should apply cursor styles', async () => {
+        const { getByTestId } = render(<BaseToolbarButton cursor="grab">Button</BaseToolbarButton>);
+
+        expect(getByTestId(BUTTON_ID)).toHaveClass('!tw-cursor-grab');
+    });
+
+    it('should apply active styles', async () => {
+        const { getByTestId } = render(<BaseToolbarButton forceActiveStyle>Button</BaseToolbarButton>);
+
+        expect(getByTestId(BUTTON_ID)).toHaveClass('tw-text-box-neutral-inverse-pressed');
+    });
+
+    it('should forward other attributes to button', async () => {
+        const BUTTON_TYPE = 'base';
+        const { getByTestId } = render(<BaseToolbarButton data-button-type={BUTTON_TYPE}>Button</BaseToolbarButton>);
+
+        expect(getByTestId(BUTTON_ID).dataset.buttonType).toEqual(BUTTON_TYPE);
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/BaseToolbarButton.tsx

@@ -0,0 +1,37 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';
+import { getToolbarButtonClassNames } from './helpers';
+
+type BaseToolbarButtonProps = {
+    children: ReactNode;
+    forceActiveStyle?: boolean;
+    cursor?: 'pointer' | 'grab';
+    'data-test-id'?: string;
+} & HTMLAttributes<HTMLButtonElement>;
+
+export const BaseToolbarButton = forwardRef<HTMLButtonElement, BaseToolbarButtonProps>(
+    (
+        {
+            onClick,
+            children,
+            forceActiveStyle,
+            cursor = 'pointer',
+            'data-test-id': dataTestId = 'base-toolbar-button',
+            ...props
+        },
+        ref,
+    ) => (
+        <button
+            onClick={onClick}
+            className={getToolbarButtonClassNames(cursor, forceActiveStyle)}
+            data-test-id={dataTestId}
+            {...props}
+            ref={ref}
+        >
+            {children}
+        </button>
+    ),
+);
+
+BaseToolbarButton.displayName = 'BaseToolbarButton';

package/src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.spec.tsx

@@ -0,0 +1,89 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { DragHandleToolbarButton } from './DragHandleToolbarButton';
+import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { DragPreviewContextProvider } from '../context/DragPreviewContext';
+
+const TOOLBAR_BUTTON_ID = 'block-item-wrapper-toolbar-btn';
+const TOOLTIP_ID = 'toolbar-button-tooltip';
+
+const TOOLTIP_CONTENT = 'content';
+
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('DragHandleToolbarButton', () => {
+    it('should show tooltip and activeStyles when item is in drag preview context', async () => {
+        const { getByTestId } = render(
+            <DragPreviewContextProvider isDragPreview>
+                <DragHandleToolbarButton
+                    tooltip={TOOLTIP_CONTENT}
+                    icon={<IconAdobeCreativeCloud />}
+                    draggableProps={{}}
+                />
+            </DragPreviewContextProvider>,
+        );
+
+        expect(getByTestId(TOOLTIP_ID)).not.toHaveClass('tw-opacity-0');
+        expect(getByTestId(TOOLBAR_BUTTON_ID)).toHaveClass('tw-cursor-grabbing');
+    });
+
+    it('should show tooltip when item is focused', async () => {
+        const { getByTestId } = render(
+            <DragHandleToolbarButton tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} draggableProps={{}} />,
+        );
+
+        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+        expect(getByTestId(TOOLTIP_ID)).toHaveTextContent(TOOLTIP_CONTENT);
+
+        getByTestId(TOOLBAR_BUTTON_ID).focus();
+
+        await waitFor(() => {
+            expect(getByTestId(TOOLTIP_ID)).not.toHaveClass('tw-opacity-0');
+        });
+    });
+
+    it('should forward draggableProps', async () => {
+        const onDragStub = vi.fn();
+
+        const { getByTestId } = render(
+            <DragHandleToolbarButton
+                tooltip={TOOLTIP_CONTENT}
+                icon={<IconAdobeCreativeCloud />}
+                draggableProps={{ onDrag: onDragStub }}
+            />,
+        );
+
+        await fireEvent.drag(getByTestId(TOOLBAR_BUTTON_ID));
+
+        expect(onDragStub).toHaveBeenCalledOnce();
+    });
+
+    it('should forward setActivatorNodeRef', async () => {
+        const setActivatorNodeRefStub = vi.fn();
+
+        render(
+            <DragHandleToolbarButton
+                tooltip={TOOLTIP_CONTENT}
+                icon={<IconAdobeCreativeCloud />}
+                draggableProps={{}}
+                setActivatorNodeRef={setActivatorNodeRefStub}
+            />,
+        );
+
+        expect(setActivatorNodeRefStub).toHaveBeenCalledOnce();
+    });
+
+    it('should display icon', async () => {
+        const { getByTestId } = render(
+            <DragHandleToolbarButton tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} draggableProps={{}} />,
+        );
+
+        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).querySelectorAll('svg')];
+        expect(icons).toHaveLength(1);
+        expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.tsx

@@ -0,0 +1,39 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../../constants';
+import { useDragPreviewContext } from '../context/DragPreviewContext';
+import { BaseToolbarButton } from '../BaseToolbarButton';
+import { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';
+
+export type DragHandleToolbarButtonProps = {
+    icon: JSX.Element;
+    tooltip?: string;
+    draggableProps: Record<string, unknown>;
+    setActivatorNodeRef?: (node: HTMLElement | null) => void;
+};
+
+export const DragHandleToolbarButton = ({
+    tooltip,
+    icon,
+    setActivatorNodeRef,
+    draggableProps,
+}: DragHandleToolbarButtonProps) => {
+    const isDragPreview = useDragPreviewContext();
+
+    return (
+        <ToolbarButtonTooltip
+            open={isDragPreview}
+            content={<div>{isDragPreview ? DEFAULT_DRAGGING_TOOLTIP : tooltip ?? DEFAULT_DRAG_TOOLTIP}</div>}
+        >
+            <BaseToolbarButton
+                ref={setActivatorNodeRef}
+                data-test-id="block-item-wrapper-toolbar-btn"
+                forceActiveStyle={isDragPreview}
+                cursor="grab"
+                {...draggableProps}
+            >
+                {icon}
+            </BaseToolbarButton>
+        </ToolbarButtonTooltip>
+    );
+};

package/src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/index.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './DragHandleToolbarButton';

package/src/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/FlyoutToolbarButton.spec.tsx

@@ -0,0 +1,140 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { FlyoutToolbarButton } from './FlyoutToolbarButton';
+import { MultiFlyoutContextProvider } from '../context/MultiFlyoutContext';
+import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { DragPreviewContextProvider } from '../context/DragPreviewContext';
+
+const BUTTON_ID = 'block-item-wrapper-toolbar-flyout';
+const TOOLTIP_ID = 'toolbar-button-tooltip';
+
+const TEST_FLYOUT_ID = 'test';
+const TEST_TOOLTIP = 'tooltip';
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('FlyoutToolbarButton', () => {
+    it('should log error if not inside a flyout provider when opening', async () => {
+        vi.spyOn(console, 'error');
+        const { getByTestId } = render(
+            <FlyoutToolbarButton
+                flyoutId={TEST_FLYOUT_ID}
+                icon={<IconAdobeCreativeCloud />}
+                tooltip={TEST_TOOLTIP}
+                content="screen"
+            />,
+        );
+
+        await fireEvent.click(getByTestId(BUTTON_ID));
+
+        expect(console.error).toBeCalled();
+    });
+
+    it('should use flyoutId in flyout context', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <FlyoutToolbarButton
+                    flyoutId={TEST_FLYOUT_ID}
+                    icon={<IconAdobeCreativeCloud />}
+                    tooltip={TEST_TOOLTIP}
+                    content="children"
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        await fireEvent.click(getByTestId(BUTTON_ID));
+
+        expect(setOpenFlyoutIdsStub).toHaveBeenCalled();
+        const dispatchedStateResult = setOpenFlyoutIdsStub.mock.lastCall[0]([]);
+        expect(dispatchedStateResult).toEqual([TEST_FLYOUT_ID]);
+    });
+
+    it('should display content', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <FlyoutToolbarButton
+                    flyoutId={TEST_FLYOUT_ID}
+                    icon={<IconAdobeCreativeCloud />}
+                    tooltip={TEST_TOOLTIP}
+                    flyoutFooter={<div data-test-id="footer">Footer</div>}
+                    flyoutHeader={<div data-test-id="header">Header</div>}
+                    content={<div data-test-id="content">Content</div>}
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        expect(getByTestId('content')).toBeVisible();
+        expect(getByTestId('header')).toBeVisible();
+        expect(getByTestId('footer')).toBeVisible();
+    });
+
+    it('should show tooltip content', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <FlyoutToolbarButton
+                    flyoutId={TEST_FLYOUT_ID}
+                    icon={<IconAdobeCreativeCloud />}
+                    tooltip={TEST_TOOLTIP}
+                    content="children"
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        getByTestId(BUTTON_ID).focus();
+
+        await waitFor(() => expect(getByTestId(TOOLTIP_ID)).not.toHaveClass('tw-opacity-0'));
+        expect(getByTestId(TOOLTIP_ID)).toHaveTextContent(TEST_TOOLTIP);
+    });
+
+    it('should use supplied icon', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <FlyoutToolbarButton
+                    flyoutId={TEST_FLYOUT_ID}
+                    icon={<IconAdobeCreativeCloud />}
+                    tooltip={TEST_TOOLTIP}
+                    content="content"
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        const icons = [...getByTestId(BUTTON_ID).querySelectorAll('svg')];
+        expect(icons).toHaveLength(1);
+        expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
+    });
+
+    it('should disable tooltip and flyout when content is inside drag preview', async () => {
+        const { getByTestId, queryByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={vi.fn()}>
+                <DragPreviewContextProvider isDragPreview>
+                    <FlyoutToolbarButton
+                        flyoutId={TEST_FLYOUT_ID}
+                        icon={<IconAdobeCreativeCloud />}
+                        tooltip={TEST_TOOLTIP}
+                        content={<div data-test-id="content">Content</div>}
+                    />
+                </DragPreviewContextProvider>
+            </MultiFlyoutContextProvider>,
+        );
+
+        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+
+        getByTestId(TOOLTIP_ID).focus();
+
+        await waitFor(() => {
+            expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+            expect(queryByTestId('content')).toBeNull();
+        });
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/FlyoutToolbarButton.tsx

@@ -0,0 +1,61 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type MutableRefObject, type ReactNode } from 'react';
+import { useDragPreviewContext } from '../context/DragPreviewContext';
+import { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';
+import { Flyout, FlyoutPlacement, useMemoizedId } from '@frontify/fondue';
+import { BaseToolbarButton } from '../BaseToolbarButton';
+import { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';
+
+export type FlyoutToolbarButtonProps = {
+    content: ReactNode;
+    icon: ReactNode;
+    tooltip: ReactNode;
+    flyoutId: string;
+    flyoutFooter?: ReactNode;
+    flyoutHeader?: ReactNode;
+};
+
+export const FlyoutToolbarButton = ({
+    content,
+    icon,
+    tooltip,
+    flyoutId,
+    flyoutFooter,
+    flyoutHeader,
+}: FlyoutToolbarButtonProps) => {
+    const id = useMemoizedId(flyoutId);
+
+    const { isOpen, onOpenChange } = useMultiFlyoutState(id);
+
+    const isDragPreview = useDragPreviewContext();
+
+    return (
+        <ToolbarButtonTooltip disabled={isDragPreview || isOpen} content={tooltip}>
+            <div className="tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative">
+                <Flyout
+                    isOpen={isOpen && !isDragPreview}
+                    legacyFooter={false}
+                    fixedFooter={flyoutFooter}
+                    fixedHeader={flyoutHeader}
+                    fitContent
+                    hug={false}
+                    placement={FlyoutPlacement.BottomRight}
+                    onOpenChange={onOpenChange}
+                    trigger={(triggerProps, triggerRef) => (
+                        <BaseToolbarButton
+                            data-test-id="block-item-wrapper-toolbar-flyout"
+                            forceActiveStyle={isOpen && !isDragPreview}
+                            {...triggerProps}
+                            ref={triggerRef as MutableRefObject<HTMLButtonElement>}
+                        >
+                            {icon}
+                        </BaseToolbarButton>
+                    )}
+                >
+                    {content}
+                </Flyout>
+            </div>
+        </ToolbarButtonTooltip>
+    );
+};

package/src/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/index.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './FlyoutToolbarButton';

package/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/MenuToolbarButton.spec.tsx

@@ -0,0 +1,77 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { MenuToolbarButton } from '.';
+import { MultiFlyoutContextProvider } from '../context/MultiFlyoutContext';
+
+const BUTTON_ID = 'block-item-wrapper-toolbar-flyout';
+const MENU_ITEM_ID = 'menu-item';
+const TOOLTIP_ID = 'toolbar-button-tooltip';
+
+const TEST_FLYOUT_ID = 'test';
+const TEST_TOOLTIP = 'tooltip';
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('MenuToolbarButton', () => {
+    it('should log error if not inside a flyout provider when opening', async () => {
+        vi.spyOn(console, 'error');
+        const { getByTestId } = render(<MenuToolbarButton items={[]} />);
+
+        await fireEvent.click(getByTestId(BUTTON_ID));
+
+        expect(console.error).toBeCalled();
+    });
+
+    it('should use flyout Id in flyout context', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <MenuToolbarButton items={[]} flyoutId={TEST_FLYOUT_ID} />
+            </MultiFlyoutContextProvider>,
+        );
+
+        await fireEvent.click(getByTestId(BUTTON_ID));
+
+        expect(setOpenFlyoutIdsStub).toHaveBeenCalled();
+        const dispatchedStateResult = setOpenFlyoutIdsStub.mock.lastCall[0]([]);
+        expect(dispatchedStateResult).toEqual([TEST_FLYOUT_ID]);
+    });
+
+    it('should display menu items', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getAllByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <MenuToolbarButton
+                    items={[
+                        [{ title: 'item-1', onClick: vi.fn(), icon: <IconAdobeCreativeCloud /> }],
+                        [{ title: 'item-2', onClick: vi.fn(), icon: <IconAdobeCreativeCloud /> }],
+                    ]}
+                    flyoutId={TEST_FLYOUT_ID}
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        expect(getAllByTestId(MENU_ITEM_ID)).toHaveLength(2);
+    });
+
+    it('should show tooltip content', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <MenuToolbarButton items={[]} tooltip={TEST_TOOLTIP} flyoutId={TEST_FLYOUT_ID} />
+            </MultiFlyoutContextProvider>,
+        );
+
+        getByTestId(BUTTON_ID).focus();
+
+        await waitFor(() => expect(getByTestId(TOOLTIP_ID)).not.toHaveClass('tw-opacity-0'));
+        expect(getByTestId(TOOLTIP_ID)).toHaveTextContent(TEST_TOOLTIP);
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/MenuToolbarButton.tsx

@@ -0,0 +1,30 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconDotsHorizontal16, useMemoizedId } from '@frontify/fondue';
+import { ToolbarFlyoutMenu, ToolbarFlyoutMenuItem } from './ToolbarFlyoutMenu';
+import { FlyoutToolbarButton } from '../FlyoutToolbarButton/FlyoutToolbarButton';
+
+export const DEFAULT_MENU_BUTTON_ID = 'menu';
+
+export type MenuToolbarButtonProps = {
+    items: ToolbarFlyoutMenuItem[][];
+    flyoutId?: string;
+    tooltip?: string;
+};
+
+export const MenuToolbarButton = ({
+    items,
+    flyoutId = DEFAULT_MENU_BUTTON_ID,
+    tooltip = 'Options',
+}: MenuToolbarButtonProps) => {
+    const id = useMemoizedId(flyoutId);
+
+    return (
+        <FlyoutToolbarButton
+            icon={<IconDotsHorizontal16 />}
+            tooltip={tooltip}
+            flyoutId={id}
+            content={<ToolbarFlyoutMenu items={items} flyoutId={id} />}
+        />
+    );
+};

package/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/ToolbarFlyoutMenu.spec.tsx

@@ -0,0 +1,63 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { ToolbarFlyoutMenu } from './ToolbarFlyoutMenu';
+import { MultiFlyoutContextProvider } from '../context/MultiFlyoutContext';
+
+const MENU_ITEM_ID = 'menu-item';
+
+const TEST_FLYOUT_ID = 'test';
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('ToolbarFlyoutMenu', () => {
+    it('should display menu items', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getAllByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <ToolbarFlyoutMenu
+                    items={[
+                        [{ title: 'item-1', onClick: vi.fn(), icon: <IconAdobeCreativeCloud /> }],
+                        [{ title: 'item-2', onClick: vi.fn(), icon: <IconAdobeCreativeCloud /> }],
+                    ]}
+                    flyoutId={TEST_FLYOUT_ID}
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        expect(getAllByTestId(MENU_ITEM_ID)).toHaveLength(2);
+    });
+
+    it('should close flyout onClick', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+        const onClickStub = vi.fn();
+
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <ToolbarFlyoutMenu
+                    items={[
+                        [
+                            {
+                                title: 'item-1',
+                                onClick: onClickStub,
+                                icon: <IconAdobeCreativeCloud />,
+                            },
+                        ],
+                    ]}
+                    flyoutId={TEST_FLYOUT_ID}
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        expect(getByTestId(MENU_ITEM_ID)).toBeVisible();
+
+        await fireEvent.pointerUp(getByTestId(MENU_ITEM_ID));
+
+        expect(onClickStub).toHaveBeenCalledOnce();
+        expect(setOpenFlyoutIdsStub).toHaveBeenCalledOnce();
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/ToolbarFlyoutMenu.tsx

@@ -0,0 +1,40 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { ActionMenu, MenuItemContentSize, MenuItemStyle } from '@frontify/fondue';
+import { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';
+
+export type ToolbarFlyoutMenuItem = {
+    title: string;
+    onClick: () => void;
+    icon: JSX.Element;
+    style?: MenuItemStyle;
+};
+
+export type ToolbarFlyoutMenuProps = {
+    items: ToolbarFlyoutMenuItem[][];
+    flyoutId: string;
+};
+
+export const ToolbarFlyoutMenu = ({ items, flyoutId }: ToolbarFlyoutMenuProps) => {
+    const { onOpenChange } = useMultiFlyoutState(flyoutId);
+
+    return (
+        <ActionMenu
+            menuBlocks={items.map((block, blockIndex) => ({
+                id: blockIndex.toString(),
+                menuItems: block.map((item, itemIndex) => ({
+                    id: blockIndex.toString() + itemIndex.toString(),
+                    size: MenuItemContentSize.XSmall,
+                    title: item.title,
+                    style: item.style,
+                    onClick: () => {
+                        onOpenChange(false);
+                        item.onClick();
+                    },
+                    initialValue: true,
+                    decorator: <div className="tw-mr-2">{item.icon}</div>,
+                })),
+            }))}
+        />
+    );
+};

package/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/index.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './MenuToolbarButton';