@frontify/guideline-blocks-settings 0.32.0 → 0.32.2

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

@@ -7,6 +7,9 @@ import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { AttachmentsProvider } from '../../../hooks/useAttachments';
 
 import { Toolbar } from './Toolbar';
+import { MultiFlyoutContextProvider } from './context/MultiFlyoutContext';
+import { DEFAULT_ATTACHMENTS_BUTTON_ID, DEFAULT_MENU_BUTTON_ID } from '.';
+import { DragPreviewContextProvider } from './context/DragPreviewContext';
 
 /**
  * @vitest-environment happy-dom
@@ -31,25 +34,13 @@ describe('Toolbar', () => {
 
     it('should not throw error if toolbar does not have attachments enabled', () => {
         expect(() =>
-            render(
-                <Toolbar
-                    items={[]}
-                    flyoutMenu={{ items: [], isOpen: false, onOpenChange: vi.fn() }}
-                    attachments={{ isEnabled: false, isOpen: false, onOpenChange: vi.fn() }}
-                />,
-            ),
+            render(<Toolbar items={[]} flyoutMenu={{ items: [] }} attachments={{ isEnabled: false }} />),
         ).not.toThrowError();
     });
 
     it('should throw error if toolbar does have attachments enabled without provider', () => {
         expect(() =>
-            render(
-                <Toolbar
-                    items={[]}
-                    flyoutMenu={{ items: [], isOpen: false, onOpenChange: vi.fn() }}
-                    attachments={{ isEnabled: true, isOpen: false, onOpenChange: vi.fn() }}
-                />,
-            ),
+            render(<Toolbar items={[]} flyoutMenu={{ items: [] }} attachments={{ isEnabled: true }} />),
         ).toThrowError();
     });
 
@@ -61,26 +52,28 @@ describe('Toolbar', () => {
         });
 
         const ToolbarWithAttachments = () => (
-            <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
-                <Toolbar
-                    items={[]}
-                    flyoutMenu={{
-                        items: [
-                            [
-                                {
-                                    title: 'Replace with upload',
-                                    icon: <div></div>,
-                                    onClick: vi.fn(),
-                                },
+            <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={[]}
+                        flyoutMenu={{
+                            items: [
+                                [
+                                    {
+                                        title: 'Replace with upload',
+                                        icon: <div></div>,
+                                        onClick: vi.fn(),
+                                    },
+                                ],
                             ],
-                        ],
-                        isOpen: true,
-                        onOpenChange: vi.fn(),
-                    }}
-                    attachments={{ isEnabled: true, isOpen: true, onOpenChange: vi.fn() }}
-                    isDragging={false}
-                />
-            </AttachmentsProvider>
+                        }}
+                        attachments={{ isEnabled: true }}
+                    />
+                </AttachmentsProvider>
+            </MultiFlyoutContextProvider>
         );
 
         const { baseElement } = render(<ToolbarWithAttachments />, { container: document.body });
@@ -98,26 +91,30 @@ describe('Toolbar', () => {
         });
 
         const ToolbarWithAttachments = () => (
-            <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
-                <Toolbar
-                    items={[]}
-                    flyoutMenu={{
-                        items: [
-                            [
-                                {
-                                    title: 'Replace with upload',
-                                    icon: <div></div>,
-                                    onClick: vi.fn(),
-                                },
-                            ],
-                        ],
-                        isOpen: true,
-                        onOpenChange: vi.fn(),
-                    }}
-                    attachments={{ isEnabled: true, isOpen: true, onOpenChange: vi.fn() }}
-                    isDragging
-                />
-            </AttachmentsProvider>
+            <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={[]}
+                            flyoutMenu={{
+                                items: [
+                                    [
+                                        {
+                                            title: 'Replace with upload',
+                                            icon: <div></div>,
+                                            onClick: vi.fn(),
+                                        },
+                                    ],
+                                ],
+                            }}
+                            attachments={{ isEnabled: true }}
+                        />
+                    </AttachmentsProvider>
+                </DragPreviewContextProvider>
+            </MultiFlyoutContextProvider>
         );
 
         const { baseElement } = render(<ToolbarWithAttachments />, { container: document.body });

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

@@ -1,133 +1,31 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import {
-    ActionMenu,
-    Flyout,
-    IconDotsHorizontal16,
-    MenuItemContentSize,
-    LegacyTooltip as Tooltip,
-    TooltipPosition,
-} from '@frontify/fondue';
-
-import { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../constants';
-
 import { ToolbarSegment } from './ToolbarSegment';
-import { ToolbarAttachments } from './ToolbarAttachments';
-import { getToolbarButtonClassNames } from './helpers';
+import { AttachmentsToolbarButton } from './AttachmentsToolbarButton';
 import { type ToolbarProps } from './types';
+import { ToolbarButton } from './ToolbarButton';
+import { DragHandleToolbarButton } from './DragHandleToolbarButton';
+import { MenuToolbarButton } from './MenuToolbarButton';
 
-export const Toolbar = ({ items, flyoutMenu, attachments, isDragging }: ToolbarProps) => {
-    return (
-        <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>
-                    <ToolbarAttachments
-                        isOpen={attachments.isOpen && !isDragging}
-                        onOpenChange={attachments.onOpenChange}
-                    />
-                </ToolbarSegment>
-            )}
+export const Toolbar = ({ items, flyoutMenu, 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>
-                {items.map((item, i) =>
-                    'draggableProps' in item ? (
-                        <Tooltip
-                            key={i}
-                            withArrow
-                            hoverDelay={0}
-                            enterDelay={300}
-                            open={isDragging}
-                            position={TooltipPosition.Top}
-                            content={
-                                <div>
-                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}
-                                </div>
-                            }
-                            triggerElement={
-                                <button
-                                    ref={item.setActivatorNodeRef}
-                                    data-test-id="block-item-wrapper-toolbar-btn"
-                                    {...item.draggableProps}
-                                    className={getToolbarButtonClassNames('grab', isDragging)}
-                                >
-                                    {item.icon}
-                                </button>
-                            }
-                        />
-                    ) : (
-                        <Tooltip
-                            key={i}
-                            withArrow
-                            enterDelay={300}
-                            hoverDelay={0}
-                            disabled={isDragging}
-                            position={TooltipPosition.Top}
-                            content={<div>{item.tooltip ?? ''}</div>}
-                            triggerElement={
-                                <button
-                                    data-test-id="block-item-wrapper-toolbar-btn"
-                                    onClick={item.onClick}
-                                    className={getToolbarButtonClassNames('pointer')}
-                                >
-                                    {item.icon}
-                                </button>
-                            }
-                        />
-                    ),
-                )}
-                {flyoutMenu.items.length > 0 && (
-                    <Tooltip
-                        withArrow
-                        hoverDelay={0}
-                        enterDelay={300}
-                        disabled={isDragging || flyoutMenu.isOpen}
-                        position={TooltipPosition.Top}
-                        content={<div>Options</div>}
-                        triggerElement={
-                            <div className="tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative">
-                                <Flyout
-                                    isOpen={flyoutMenu.isOpen && !isDragging}
-                                    legacyFooter={false}
-                                    fitContent
-                                    hug={false}
-                                    onOpenChange={flyoutMenu.onOpenChange}
-                                    trigger={
-                                        <div
-                                            data-test-id="block-item-wrapper-toolbar-flyout"
-                                            className={getToolbarButtonClassNames(
-                                                'pointer',
-                                                flyoutMenu.isOpen && !isDragging,
-                                            )}
-                                        >
-                                            <IconDotsHorizontal16 />
-                                        </div>
-                                    }
-                                >
-                                    <ActionMenu
-                                        menuBlocks={flyoutMenu.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: () => {
-                                                    flyoutMenu.onOpenChange(false);
-                                                    item.onClick();
-                                                },
-                                                initialValue: true,
-                                                decorator: <div className="tw-mr-2">{item.icon}</div>,
-                                            })),
-                                        }))}
-                                    />
-                                </Flyout>
-                            </div>
-                        }
-                    />
-                )}
+                <AttachmentsToolbarButton />
             </ToolbarSegment>
-        </div>
-    );
-};
+        )}
+        <ToolbarSegment>
+            {items.map((item, i) =>
+                'draggableProps' in item ? (
+                    <DragHandleToolbarButton key={i} {...item} />
+                ) : (
+                    <ToolbarButton key={i} {...item} />
+                ),
+            )}
+            {flyoutMenu.items.length > 0 && <MenuToolbarButton {...flyoutMenu} />}
+        </ToolbarSegment>
+    </div>
+);

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+/* (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/context/DragPreviewContext.tsx

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

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

@@ -0,0 +1,25 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Dispatch, ReactNode, SetStateAction, createContext, useContext, useMemo } from 'react';
+
+export type MultiFlyoutContextType = {
+    openFlyoutIds: string[];
+    setOpenFlyoutIds: Dispatch<SetStateAction<string[]>>;
+};
+
+const MultiFlyoutContext = createContext<MultiFlyoutContextType>({
+    openFlyoutIds: [],
+    setOpenFlyoutIds: () => console.error('No MultiFlyoutContext Provider found'),
+});
+
+export const MultiFlyoutContextProvider = ({
+    children,
+    openFlyoutIds,
+    setOpenFlyoutIds,
+}: { children: ReactNode } & MultiFlyoutContextType) => {
+    const memoizedContext = useMemo(() => ({ openFlyoutIds, setOpenFlyoutIds }), [openFlyoutIds, setOpenFlyoutIds]);
+
+    return <MultiFlyoutContext.Provider value={memoizedContext}>{children}</MultiFlyoutContext.Provider>;
+};
+
+export const useMultiFlyoutContext = () => useContext(MultiFlyoutContext);

package/src/components/BlockItemWrapper/Toolbar/helpers.ts

@@ -25,7 +25,7 @@ export const getToolbarButtonClassNames = (cursor: 'grab' | 'pointer', forceActi
         classNames.push(
             'hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed',
             'tw-text-text-weak hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',
-            cursor === 'grab' ? 'tw-cursor-grab active:tw-cursor-grabbing' : 'tw-cursor-pointer',
+            cursor === 'grab' ? '!tw-cursor-grab active:tw-cursor-grabbing' : 'tw-cursor-pointer',
         );
     }
 

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

@@ -0,0 +1,59 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { useMultiFlyoutState } from './useMultiFlyoutState';
+import { MultiFlyoutContextProvider, MultiFlyoutContextType } from '../context/MultiFlyoutContext';
+
+const FLYOUT_ID = 'flyout';
+
+const renderMultiFlyoutState = ({ openFlyoutIds, setOpenFlyoutIds }: MultiFlyoutContextType) =>
+    renderHook(() => useMultiFlyoutState(FLYOUT_ID), {
+        wrapper: ({ children }) => (
+            <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>
+                {children}
+            </MultiFlyoutContextProvider>
+        ),
+    });
+
+describe('useMultiFlyoutState', () => {
+    it('should be open when flyout id in context array', () => {
+        const { result } = renderMultiFlyoutState({ openFlyoutIds: [FLYOUT_ID], setOpenFlyoutIds: vi.fn() });
+        expect(result.current.isOpen).toEqual(true);
+    });
+
+    it('should be closed when flyout id is not in context array', () => {
+        const { result } = renderMultiFlyoutState({ openFlyoutIds: [], setOpenFlyoutIds: vi.fn() });
+        expect(result.current.isOpen).toEqual(false);
+    });
+
+    it('should add id to array when opening', () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+        const { result } = renderMultiFlyoutState({ openFlyoutIds: [], setOpenFlyoutIds: setOpenFlyoutIdsStub });
+
+        result.current.onOpenChange(true);
+        const dispatchedResult = setOpenFlyoutIdsStub.mock.lastCall[0]([]);
+
+        expect(dispatchedResult).toEqual([FLYOUT_ID]);
+    });
+
+    it('should remove id from array when closing', () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+        const { result } = renderMultiFlyoutState({ openFlyoutIds: [], setOpenFlyoutIds: setOpenFlyoutIdsStub });
+
+        result.current.onOpenChange(false);
+        const dispatchedResult = setOpenFlyoutIdsStub.mock.lastCall[0]([FLYOUT_ID]);
+
+        expect(dispatchedResult).toEqual([]);
+    });
+
+    it('should remove duplicates from array', () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+        const { result } = renderMultiFlyoutState({ openFlyoutIds: [], setOpenFlyoutIds: setOpenFlyoutIdsStub });
+
+        result.current.onOpenChange(true);
+        const dispatchedResult = setOpenFlyoutIdsStub.mock.lastCall[0]([FLYOUT_ID, FLYOUT_ID, FLYOUT_ID]);
+
+        expect(dispatchedResult).toEqual([FLYOUT_ID]);
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/hooks/useMultiFlyoutState.ts

@@ -0,0 +1,24 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useCallback } from 'react';
+import { useMultiFlyoutContext } from '../context/MultiFlyoutContext';
+
+export const useMultiFlyoutState = (flyoutId: string) => {
+    const { openFlyoutIds, setOpenFlyoutIds } = useMultiFlyoutContext();
+
+    const onOpenChange = useCallback(
+        (isFlyoutOpen: boolean) => {
+            setOpenFlyoutIds((currentIds) => {
+                const filteredIds = currentIds.filter((id) => id !== flyoutId);
+                if (!isFlyoutOpen) {
+                    return filteredIds;
+                } else {
+                    return [...filteredIds, flyoutId];
+                }
+            });
+        },
+        [flyoutId, setOpenFlyoutIds],
+    );
+
+    return { isOpen: openFlyoutIds.includes(flyoutId), onOpenChange };
+};

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

@@ -1,4 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 export * from './Toolbar';
+export * from './AttachmentsToolbarButton';
+export * from './DragHandleToolbarButton';
+export * from './FlyoutToolbarButton';
+export * from './MenuToolbarButton';
 export * from './types';

package/src/components/BlockItemWrapper/Toolbar/types.ts

@@ -1,38 +1,19 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type MenuItemStyle } from '@frontify/fondue';
+import { type ToolbarButtonProps } from './ToolbarButton';
+import { type ToolbarFlyoutMenuItem } from './MenuToolbarButton/ToolbarFlyoutMenu';
+import { DragHandleToolbarButtonProps } from '.';
 
 export type ToolbarProps = {
     items: ToolbarItem[];
-    flyoutMenu: ToolbarFlyoutState & { items: FlyoutToolbarItem[][] };
-    attachments: ToolbarFlyoutState & { isEnabled: boolean };
-    isDragging?: boolean;
+    flyoutMenu: { items: ToolbarFlyoutMenuItem[][] };
+    attachments: { isEnabled: boolean };
 };
 
-export type ToolbarFlyoutState = {
-    isOpen: boolean;
-    onOpenChange: (isOpen: boolean) => void;
-};
+export type DraghandleToolbarItem = DragHandleToolbarButtonProps;
 
-type BaseToolbarItem = {
-    icon: JSX.Element;
-    tooltip?: string;
-};
+export type ButtonToolbarItem = ToolbarButtonProps;
 
-type DraghandleToolbarItem = BaseToolbarItem & {
-    draggableProps: Record<string, unknown>;
-    setActivatorNodeRef?: (node: HTMLElement | null) => void;
-};
-
-type ButtonToolbarItem = BaseToolbarItem & {
-    onClick: () => void;
-};
+export type FlyoutToolbarItem = ToolbarFlyoutMenuItem;
 
 export type ToolbarItem = DraghandleToolbarItem | ButtonToolbarItem;
-
-export type FlyoutToolbarItem = {
-    title: string;
-    onClick: () => void;
-    icon: JSX.Element;
-    style?: MenuItemStyle;
-};