@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

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

@@ -1,96 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import { beforeAll, describe, expect, it, vi } from 'vitest';
-
-import { AttachmentsProvider } from '../../../../hooks/useAttachments';
-import { DragPreviewContextProvider } from '../context/DragPreviewContext';
-import { MultiFlyoutContextProvider } from '../context/MultiFlyoutContext';
-
-import { AttachmentsToolbarButton } from './AttachmentsToolbarButton';
-
-const TOOLBAR_BUTTON_ID = 'attachments-toolbar-button-trigger';
-const FLYOUT_CONTENT_ID = 'attachments-flyout-content';
-const TOOLTIP_ID = 'tooltip';
-
-const TEST_FLYOUT_ID = 'flyout-id';
-const ASSET_ID = 'attachments';
-
-const STUB_WITH_THREE_ASSETS = getAppBridgeBlockStub({
-    blockId: 2,
-    blockAssets: { [ASSET_ID]: [AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)] },
-    editorState: true,
-});
-
-/**
- * @vitest-environment happy-dom
- */
-
-describe('AttachmentsToolbarButton', () => {
-    beforeAll(() => {
-        vi.stubGlobal(
-            'Worker',
-            class Worker {
-                constructor() {}
-                addEventListener() {}
-                terminate() {}
-            },
-        );
-    });
-    it('should disable tooltip and hide flyout when item is in drag preview context', async () => {
-        const { getByTestId, queryByTestId } = render(
-            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={vi.fn()}>
-                <DragPreviewContextProvider isDragPreview>
-                    <AttachmentsProvider appBridge={STUB_WITH_THREE_ASSETS} assetId={ASSET_ID}>
-                        <AttachmentsToolbarButton flyoutId={TEST_FLYOUT_ID} />
-                    </AttachmentsProvider>
-                </DragPreviewContextProvider>
-            </MultiFlyoutContextProvider>,
-        );
-
-        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
-
-        getByTestId(TOOLBAR_BUTTON_ID).focus();
-
-        await waitFor(() => {
-            expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
-            expect(queryByTestId(FLYOUT_CONTENT_ID)).toBeNull();
-        });
-    });
-
-    it('should open flyout onClick', async () => {
-        const setOpenFlyoutIdsStub = vi.fn();
-        const { getByTestId } = render(
-            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
-                <DragPreviewContextProvider isDragPreview>
-                    <AttachmentsProvider appBridge={STUB_WITH_THREE_ASSETS} assetId={ASSET_ID}>
-                        <AttachmentsToolbarButton flyoutId={TEST_FLYOUT_ID} />
-                    </AttachmentsProvider>
-                </DragPreviewContextProvider>
-            </MultiFlyoutContextProvider>,
-        );
-
-        await fireEvent.click(getByTestId(TOOLBAR_BUTTON_ID));
-
-        expect(setOpenFlyoutIdsStub).toHaveBeenCalledOnce();
-        const dispatchedStateResult = setOpenFlyoutIdsStub.mock.lastCall[0]([]);
-        expect(dispatchedStateResult).toEqual([TEST_FLYOUT_ID]);
-    });
-
-    it('should open tooltip when item is focused', async () => {
-        const { getByTestId } = render(
-            <AttachmentsProvider appBridge={STUB_WITH_THREE_ASSETS} assetId={ASSET_ID}>
-                <AttachmentsToolbarButton />
-            </AttachmentsProvider>,
-        );
-
-        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
-
-        getByTestId(TOOLTIP_ID).focus();
-
-        await waitFor(() => {
-            expect(getByTestId(TOOLTIP_ID)).not.toHaveClass('tw-opacity-0');
-        });
-    });
-});

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

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

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

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

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

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

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

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

@@ -1,89 +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 { 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).getElementsByTagName('svg')];
-        expect(icons).toHaveLength(1);
-        expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
-    });
-});

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

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

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

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

@@ -1,140 +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 { 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).getElementsByTagName('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

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

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