@frontify/guideline-blocks-settings 0.32.1 → 0.33.0

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

@@ -0,0 +1,42 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useMemoizedId } from '@frontify/fondue';
+
+import { useAttachmentsContext } from '../../../../hooks';
+import { Attachments } from '../../../Attachments';
+import { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';
+
+import { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';
+import { useDragPreviewContext } from '../context/DragPreviewContext';
+
+export const DEFAULT_ATTACHMENTS_BUTTON_ID = 'attachments';
+
+type AttachmentsToolbarButtonProps = { flyoutId?: string };
+
+export const AttachmentsToolbarButton = ({
+    flyoutId = DEFAULT_ATTACHMENTS_BUTTON_ID,
+}: AttachmentsToolbarButtonProps) => {
+    const id = useMemoizedId(flyoutId);
+
+    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =
+        useAttachmentsContext();
+
+    const { isOpen, onOpenChange } = useMultiFlyoutState(id);
+    const isDragPreview = useDragPreviewContext();
+
+    return (
+        <Attachments
+            onUpload={onAttachmentsAdd}
+            onDelete={onAttachmentDelete}
+            onReplaceWithBrowse={onAttachmentReplace}
+            onReplaceWithUpload={onAttachmentReplace}
+            onSorted={onAttachmentsSorted}
+            onBrowse={onAttachmentsAdd}
+            items={attachments}
+            appBridge={appBridge}
+            triggerComponent={AttachmentsToolbarButtonTrigger}
+            isOpen={isOpen && !isDragPreview}
+            onOpenChange={onOpenChange}
+        />
+    );
+};

package/src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.spec.tsx

@@ -0,0 +1,44 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';
+import { MutableRefObject } from 'react';
+
+const BUTTON_ID = 'attachments-toolbar-button-trigger';
+
+describe('AttachmentsToolbarButtonTrigger', () => {
+    afterEach(() => {
+        cleanup();
+    });
+
+    it('should apply active styles when flyout is open', async () => {
+        const { getByTestId } = render(
+            <AttachmentsToolbarButtonTrigger
+                isFlyoutOpen
+                triggerProps={{}}
+                triggerRef={{} as MutableRefObject<HTMLButtonElement>}
+            >
+                Button
+            </AttachmentsToolbarButtonTrigger>,
+        );
+
+        expect(getByTestId(BUTTON_ID)).toHaveClass('tw-text-box-neutral-inverse-pressed');
+    });
+    it('should forward trigger props to button', async () => {
+        const onPointerUpStub = vi.fn();
+
+        const { getByTestId } = render(
+            <AttachmentsToolbarButtonTrigger
+                isFlyoutOpen={false}
+                triggerProps={{ onPointerUp: onPointerUpStub }}
+                triggerRef={{} as MutableRefObject<HTMLButtonElement>}
+            >
+                Button
+            </AttachmentsToolbarButtonTrigger>,
+        );
+        await fireEvent.pointerUp(getByTestId(BUTTON_ID));
+
+        expect(onPointerUpStub).toHaveBeenCalledOnce();
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx

@@ -0,0 +1,24 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';
+import { type AttachmentsTriggerProps } from '../../../Attachments/types';
+
+import { BaseToolbarButton } from '../BaseToolbarButton';
+
+export const AttachmentsToolbarButtonTrigger = ({
+    children,
+    isFlyoutOpen,
+    triggerProps,
+    triggerRef,
+}: AttachmentsTriggerProps) => (
+    <BaseToolbarButton
+        forceActiveStyle={isFlyoutOpen}
+        data-test-id="attachments-toolbar-button-trigger"
+        {...triggerProps}
+        ref={triggerRef}
+    >
+        <IconPaperclip16 />
+        {children}
+        <IconCaretDown12 />
+    </BaseToolbarButton>
+);

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

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

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,40 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { ReactNode } from 'react';
+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?: ReactNode;
+    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} />}
+        />
+    );
+};