@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

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

@@ -1,77 +0,0 @@
-/* (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

@@ -1,30 +0,0 @@
-/* (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

@@ -1,63 +0,0 @@
-/* (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

@@ -1,40 +0,0 @@
-/* (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

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

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

@@ -1,259 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { getAppBridgeBlockStub } from '@frontify/app-bridge';
-import { IconArrowMove16, IconMoveTo, IconTrashBin } from '@frontify/fondue';
-import { fireEvent, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { beforeAll, describe, expect, it, vi } from 'vitest';
-
-import { AttachmentsProvider } from '../../../hooks/useAttachments';
-
-import { Toolbar } from './Toolbar';
-import { MultiFlyoutContextProvider } from './context/MultiFlyoutContext';
-import { DragPreviewContextProvider } from './context/DragPreviewContext';
-import { DEFAULT_ATTACHMENTS_BUTTON_ID } from './AttachmentsToolbarButton';
-import { DEFAULT_MENU_BUTTON_ID } from './MenuToolbarButton';
-import { ToolbarItem } from './types';
-
-/**
- * @vitest-environment happy-dom
- */
-
-const ATTACHMENTS_FLYOUT_ID = 'attachments-flyout-content';
-const MENU_FLYOUT_ID = 'menu-item';
-
-const MOCK_ASSET_FIELD_ID = 'attachment';
-
-describe('Toolbar', () => {
-    const stubs = vi.hoisted(() => ({
-        setOpenFlyoutIds: vi.fn(),
-        onClick: vi.fn(),
-        onDrag: vi.fn(),
-        onKeyDown: vi.fn(),
-    }));
-
-    const STUB_WITH_NO_ASSETS = getAppBridgeBlockStub({
-        blockId: 1,
-        blockAssets: { [MOCK_ASSET_FIELD_ID]: [] },
-        editorState: true,
-    });
-
-    const FULL_ITEMS: ToolbarItem[] = [
-        {
-            type: 'dragHandle',
-            setActivatorNodeRef: vi.fn(),
-            icon: <IconMoveTo />,
-            draggableProps: { onDrag: stubs.onDrag, onKeyDown: stubs.onKeyDown },
-        },
-        {
-            type: 'button',
-            onClick: stubs.onClick,
-            icon: <IconTrashBin />,
-        },
-        {
-            type: 'flyout',
-            icon: <IconArrowMove16 />,
-            tooltip: 'Move To',
-            content: <div>Content</div>,
-            flyoutHeader: <div>Fixed Header</div>,
-            flyoutFooter: <div>Fixed Footer</div>,
-            flyoutId: 'move',
-        },
-        {
-            type: 'menu',
-            items: [
-                [
-                    {
-                        title: 'Replace with upload',
-                        icon: <div></div>,
-                        onClick: stubs.onClick,
-                    },
-                ],
-            ],
-        },
-    ];
-
-    beforeAll(() => {
-        vi.stubGlobal(
-            'Worker',
-            class Worker {
-                constructor() {}
-                addEventListener() {}
-                terminate() {}
-            },
-        );
-    });
-
-    it('should not throw error if toolbar does not have attachments enabled', () => {
-        expect(() => render(<Toolbar items={[]} attachments={{ isEnabled: false }} />)).not.toThrowError();
-    });
-
-    it('should throw error if toolbar does have attachments enabled without provider', () => {
-        expect(() => render(<Toolbar items={[]} attachments={{ isEnabled: true }} />)).toThrowError();
-    });
-
-    it('should have every item type accessible by mouse', async () => {
-        const ToolbarWithAttachments = () => (
-            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={stubs.setOpenFlyoutIds}>
-                <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
-                    <Toolbar items={FULL_ITEMS} attachments={{ isEnabled: true }} />
-                </AttachmentsProvider>
-            </MultiFlyoutContextProvider>
-        );
-
-        const { getAllByRole } = render(<ToolbarWithAttachments />);
-
-        const buttons = getAllByRole('button');
-        expect(buttons).toHaveLength(5);
-
-        const [attachmentBtn, dragBtn, btn, flyoutBtn, menuBtn] = buttons;
-
-        // Click Interactions
-
-        await fireEvent.click(attachmentBtn);
-        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(1);
-
-        await fireEvent.drag(dragBtn);
-        expect(stubs.onDrag).toHaveBeenCalledTimes(1);
-
-        await fireEvent.click(btn);
-        expect(stubs.onClick).toHaveBeenCalledTimes(1);
-
-        await fireEvent.click(flyoutBtn);
-        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(2);
-
-        await fireEvent.click(menuBtn);
-        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(3);
-    });
-
-    it('should have every item type accessible by keyboard', async () => {
-        const ToolbarWithAttachments = () => (
-            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={stubs.setOpenFlyoutIds}>
-                <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
-                    <Toolbar items={FULL_ITEMS} attachments={{ isEnabled: true }} />
-                </AttachmentsProvider>
-            </MultiFlyoutContextProvider>
-        );
-
-        const user = userEvent.setup();
-
-        const { getAllByRole } = render(<ToolbarWithAttachments />);
-
-        const buttons = getAllByRole('button');
-        expect(buttons).toHaveLength(5);
-
-        const [attachmentBtn, dragBtn, btn, flyoutBtn, menuBtn] = buttons;
-
-        await user.keyboard('{Tab}');
-
-        expect(attachmentBtn).toHaveFocus();
-        await user.keyboard('{Enter}');
-        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(1);
-
-        await user.keyboard('{Tab}');
-
-        expect(dragBtn).toHaveFocus();
-        await user.keyboard('{Enter}');
-        expect(stubs.onKeyDown).toHaveBeenCalledTimes(1);
-
-        await user.keyboard('{Tab}');
-
-        expect(btn).toHaveFocus();
-        await user.keyboard('{Enter}');
-        expect(stubs.onClick).toHaveBeenCalledTimes(1);
-
-        await user.keyboard('{Tab}');
-
-        expect(flyoutBtn).toHaveFocus();
-        await user.keyboard('{Enter}');
-        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(2);
-
-        await user.keyboard('{Tab}');
-
-        expect(menuBtn).toHaveFocus();
-        await user.keyboard('{Enter}');
-        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(3);
-    });
-
-    it('should open flyouts if not dragging', async () => {
-        const STUB_WITH_NO_ASSETS = getAppBridgeBlockStub({
-            blockId: 1,
-            blockAssets: { [MOCK_ASSET_FIELD_ID]: [] },
-            editorState: true,
-        });
-
-        const ToolbarWithAttachments = () => (
-            <MultiFlyoutContextProvider
-                openFlyoutIds={[DEFAULT_ATTACHMENTS_BUTTON_ID, DEFAULT_MENU_BUTTON_ID]}
-                setOpenFlyoutIds={vi.fn()}
-            >
-                <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
-                    <Toolbar
-                        items={[
-                            {
-                                type: 'menu',
-                                items: [
-                                    [
-                                        {
-                                            title: 'Replace with upload',
-                                            icon: <div></div>,
-                                            onClick: vi.fn(),
-                                        },
-                                    ],
-                                ],
-                            },
-                        ]}
-                        attachments={{ isEnabled: true }}
-                    />
-                </AttachmentsProvider>
-            </MultiFlyoutContextProvider>
-        );
-
-        const { baseElement } = render(<ToolbarWithAttachments />, { container: document.body });
-
-        expect(baseElement.querySelector(`[data-test-id=${ATTACHMENTS_FLYOUT_ID}]`)).not.toBeNull();
-        expect(baseElement.querySelector(`[data-test-id=${MENU_FLYOUT_ID}]`)).not.toBeNull();
-    });
-
-    it('should keep flyouts closed if dragging', async () => {
-        const MOCK_ASSET_FIELD_ID = 'attachment';
-        const STUB_WITH_NO_ASSETS = getAppBridgeBlockStub({
-            blockId: 1,
-            blockAssets: { [MOCK_ASSET_FIELD_ID]: [] },
-            editorState: true,
-        });
-
-        const ToolbarWithAttachments = () => (
-            <MultiFlyoutContextProvider
-                openFlyoutIds={[DEFAULT_ATTACHMENTS_BUTTON_ID, DEFAULT_MENU_BUTTON_ID]}
-                setOpenFlyoutIds={vi.fn()}
-            >
-                <DragPreviewContextProvider isDragPreview>
-                    <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
-                        <Toolbar
-                            items={[
-                                {
-                                    type: 'menu',
-                                    items: [
-                                        [
-                                            {
-                                                title: 'Replace with upload',
-                                                icon: <div></div>,
-                                                onClick: vi.fn(),
-                                            },
-                                        ],
-                                    ],
-                                },
-                            ]}
-                            attachments={{ isEnabled: true }}
-                        />
-                    </AttachmentsProvider>
-                </DragPreviewContextProvider>
-            </MultiFlyoutContextProvider>
-        );
-
-        const { baseElement } = render(<ToolbarWithAttachments />, { container: document.body });
-        expect(baseElement.querySelector(`[data-test-id=${ATTACHMENTS_FLYOUT_ID}]`)).toBeNull();
-        expect(baseElement.querySelector(`[data-test-id=${MENU_FLYOUT_ID}]`)).toBeNull();
-    });
-});

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

@@ -1,36 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { ToolbarSegment } from './ToolbarSegment';
-import { AttachmentsToolbarButton } from './AttachmentsToolbarButton';
-import { type ToolbarProps } from './types';
-import { ToolbarButton } from './ToolbarButton';
-import { DragHandleToolbarButton } from './DragHandleToolbarButton';
-import { FlyoutToolbarButton } from './FlyoutToolbarButton';
-import { MenuToolbarButton } from './MenuToolbarButton';
-
-export const Toolbar = ({ items, attachments }: ToolbarProps) => (
-    <div
-        data-test-id="block-item-wrapper-toolbar"
-        className="tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate"
-    >
-        {attachments.isEnabled && (
-            <ToolbarSegment>
-                <AttachmentsToolbarButton />
-            </ToolbarSegment>
-        )}
-        <ToolbarSegment>
-            {items.map((item) => {
-                if (item.type === 'dragHandle') {
-                    return <DragHandleToolbarButton key={item.tooltip + item.type} {...item} />;
-                }
-                if (item.type === 'menu') {
-                    return <MenuToolbarButton key={item.tooltip + item.type} {...item} />;
-                }
-                if (item.type === 'flyout') {
-                    return <FlyoutToolbarButton key={item.tooltip + item.type} {...item} />;
-                }
-                return <ToolbarButton key={item.tooltip + item.type} {...item} />;
-            })}
-        </ToolbarSegment>
-    </div>
-);

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

@@ -1,70 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import { ToolbarButton } from './ToolbarButton';
-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('ToolbarButton', () => {
-    it('should disable tooltip when item is in drag preview context', async () => {
-        const { getByTestId } = render(
-            <DragPreviewContextProvider isDragPreview>
-                <ToolbarButton onClick={vi.fn()} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />
-            </DragPreviewContextProvider>,
-        );
-
-        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
-
-        getByTestId(TOOLTIP_ID).focus();
-
-        await waitFor(() => {
-            expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
-        });
-    });
-
-    it('should show tooltip when item is focused', async () => {
-        const { getByTestId } = render(
-            <ToolbarButton onClick={vi.fn()} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />,
-        );
-
-        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
-        expect(getByTestId(TOOLTIP_ID)).toHaveTextContent(TOOLTIP_CONTENT);
-
-        getByTestId(TOOLTIP_ID).focus();
-
-        await waitFor(() => {
-            expect(getByTestId(TOOLTIP_ID)).not.toHaveClass('tw-opacity-0');
-        });
-    });
-
-    it('should trigger onClick', async () => {
-        const onClickStub = vi.fn();
-        const { getByTestId } = render(
-            <ToolbarButton onClick={onClickStub} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />,
-        );
-
-        await fireEvent.click(getByTestId(TOOLBAR_BUTTON_ID));
-
-        expect(onClickStub).toHaveBeenCalledOnce();
-    });
-
-    it('should display icon', async () => {
-        const { getByTestId } = render(
-            <ToolbarButton onClick={vi.fn()} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />,
-        );
-
-        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).getElementsByTagName('svg')];
-        expect(icons).toHaveLength(1);
-        expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
-    });
-});

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

@@ -1,19 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { useDragPreviewContext } from '../context/DragPreviewContext';
-import { BaseToolbarButton } from '../BaseToolbarButton';
-import { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';
-
-export type ToolbarButtonProps = { icon: JSX.Element; tooltip?: string; onClick: () => void };
-
-export const ToolbarButton = ({ tooltip, icon, onClick }: ToolbarButtonProps) => {
-    const isDragPreview = useDragPreviewContext();
-
-    return (
-        <ToolbarButtonTooltip disabled={isDragPreview} content={tooltip ?? ''}>
-            <BaseToolbarButton data-test-id="block-item-wrapper-toolbar-btn" onClick={onClick}>
-                {icon}
-            </BaseToolbarButton>
-        </ToolbarButtonTooltip>
-    );
-};

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

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

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

@@ -1,25 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { LegacyTooltip as Tooltip, TooltipPosition } from '@frontify/fondue';
-import { ReactElement, ReactNode } from 'react';
-
-type ToolbarButtonTooltipProps = {
-    content: ReactNode;
-    children: ReactElement;
-    open?: boolean;
-    disabled?: boolean;
-};
-
-export const ToolbarButtonTooltip = ({ open, content, children, disabled }: ToolbarButtonTooltipProps) => (
-    <Tooltip
-        withArrow
-        hoverDelay={0}
-        enterDelay={300}
-        open={open}
-        disabled={disabled}
-        position={TooltipPosition.Top}
-        content={<div>{content}</div>}
-        triggerElement={children}
-        data-test-id="toolbar-button-tooltip"
-    />
-);

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

@@ -1,9 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { type ReactNode } from 'react';
-
-export const ToolbarSegment = ({ children }: { children: ReactNode }) => (
-    <div className="tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-px tw-px-px tw-h-[26px] tw-items-center tw-self-start tw-leading-none">
-        {children}
-    </div>
-);

package/src/components/BlockItemWrapper/Toolbar/context/DragPreviewContext.tsx

@@ -1,15 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { type ReactNode, createContext, useContext } from 'react';
-
-const DragPreviewContext = createContext(false);
-
-export const DragPreviewContextProvider = ({
-    children,
-    isDragPreview,
-}: {
-    children: ReactNode;
-    isDragPreview: boolean;
-}) => <DragPreviewContext.Provider value={isDragPreview}>{children}</DragPreviewContext.Provider>;
-
-export const useDragPreviewContext = () => useContext(DragPreviewContext);