@frontify/guideline-blocks-settings 0.29.17 → 0.30.1

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

@@ -0,0 +1,29 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Attachments } from '../../Attachments';
+import { useAttachmentsContext } from '../../../hooks';
+
+import { type ToolbarFlyoutState } from './types';
+
+import { ToolbarAttachmentsTrigger } from './ToolbarAttachmentsTrigger';
+
+export const ToolbarAttachments = ({ isOpen, onOpenChange }: ToolbarFlyoutState) => {
+    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =
+        useAttachmentsContext();
+
+    return (
+        <Attachments
+            onUpload={onAttachmentsAdd}
+            onDelete={onAttachmentDelete}
+            onReplaceWithBrowse={onAttachmentReplace}
+            onReplaceWithUpload={onAttachmentReplace}
+            onSorted={onAttachmentsSorted}
+            onBrowse={onAttachmentsAdd}
+            items={attachments}
+            appBridge={appBridge}
+            triggerComponent={ToolbarAttachmentsTrigger}
+            isOpen={isOpen}
+            onOpenChange={onOpenChange}
+        />
+    );
+};

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

@@ -0,0 +1,14 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';
+import { type AttachmentsTriggerProps } from '../../Attachments/types';
+
+import { getToolbarButtonClassNames } from './helpers';
+
+export const ToolbarAttachmentsTrigger = ({ children, isFlyoutOpen }: AttachmentsTriggerProps) => (
+    <div className={getToolbarButtonClassNames('pointer', isFlyoutOpen)}>
+        <IconPaperclip16 />
+        {children}
+        <IconCaretDown12 />
+    </div>
+);

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

@@ -0,0 +1,9 @@
+/* (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/helpers.ts

@@ -0,0 +1,33 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { FOCUS_VISIBLE_STYLE } from '@frontify/fondue';
+
+import { joinClassNames } from '../../../utilities';
+
+export const getToolbarButtonClassNames = (cursor: 'grab' | 'pointer', forceActiveStyle?: boolean) => {
+    const classNames = [
+        FOCUS_VISIBLE_STYLE,
+        'tw-relative tw-inline-flex tw-items-center tw-justify-center',
+        'tw-h-6 tw-p-1',
+        'tw-rounded',
+        'tw-text-xs tw-font-medium',
+        'tw-gap-0.5',
+        'focus-visible:tw-z-10',
+    ];
+
+    if (forceActiveStyle) {
+        classNames.push(
+            'tw-bg-box-neutral-pressed',
+            'tw-text-box-neutral-inverse-pressed',
+            cursor === 'grab' ? 'tw-cursor-grabbing' : 'tw-cursor-pointer',
+        );
+    } else {
+        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',
+        );
+    }
+
+    return joinClassNames(classNames);
+};

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

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

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

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

package/src/components/BlockItemWrapper/index.ts

@@ -1,5 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 export * from './BlockItemWrapper';
+export * from './Toolbar';
 export * from './types';
 export * from './constants';

package/src/components/BlockItemWrapper/types.ts

@@ -1,7 +1,10 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { MenuItemStyle } from '@frontify/fondue';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type AttachmentsProvider, type withAttachmentsProvider } from '../../hooks/useAttachments';
+import { type FlyoutToolbarItem, type ToolbarItem } from './Toolbar';
 
 export type BlockItemWrapperProps = {
     children: ReactNode;
@@ -13,36 +16,10 @@ export type BlockItemWrapperProps = {
     shouldFillContainer?: boolean;
     outlineOffset?: number;
     shouldBeShown?: boolean;
-};
-
-export type ToolbarProps = {
-    items: ToolbarItem[];
-    flyoutItems: FlyoutToolbarItem[][];
-    isFlyoutOpen: boolean;
-    setIsFlyoutOpen: (isOpen: boolean) => void;
-    isDragging?: boolean;
-    isFlyoutDisabled?: boolean;
-};
-
-type BaseToolbarItem = {
-    icon: JSX.Element;
-    tooltip?: string;
-};
-
-type DraghandleToolbarItem = BaseToolbarItem & {
-    draggableProps: Record<string, unknown>;
-    setActivatorNodeRef?: (node: HTMLElement | null) => void;
-};
-
-type ButtonToolbarItem = BaseToolbarItem & {
-    onClick: () => void;
-};
-
-export type ToolbarItem = DraghandleToolbarItem | ButtonToolbarItem;
-
-export type FlyoutToolbarItem = {
-    title: string;
-    onClick: () => void;
-    icon: JSX.Element;
-    style?: MenuItemStyle;
+    /**
+     * When set to true the BlockItemWrapper must be a child of a {@link AttachmentsProvider} component,
+     *  or the block must be wrapped with a {@link withAttachmentsProvider} HOC.
+     * @default false
+     */
+    showAttachments?: boolean;
 };

package/src/hooks/{useAttachments.spec.ts → useAttachments.spec.tsx}

@@ -1,10 +1,10 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
-import { renderHook, waitFor } from '@testing-library/react';
-
+import { render, renderHook, waitFor } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { useAttachments } from './useAttachments';
+
+import { AttachmentsProvider, useAttachments, useAttachmentsContext, withAttachmentsProvider } from './useAttachments';
 
 const MOCK_SETTINGS_ID = 'attachments';
 
@@ -20,7 +20,7 @@ describe('useAttachments', () => {
         });
         const { result } = renderHook(() => useAttachments(STUB_WITH_NO_ASSETS, MOCK_SETTINGS_ID));
 
-        await result.current.onAddAttachments([AssetDummy.with(1)]);
+        await result.current.onAttachmentsAdd([AssetDummy.with(1)]);
         await waitFor(() => {
             expect(result.current.attachments).toHaveLength(1);
         });
@@ -77,3 +77,54 @@ describe('useAttachments', () => {
         });
     });
 });
+
+describe('useAttachmentsContext', () => {
+    it('should throw an error when not a child of a provider', async () => {
+        expect(() => renderHook(() => useAttachmentsContext())).toThrowError();
+    });
+
+    it('should return correct info', async () => {
+        const STUB_WITH_NO_ASSETS = getAppBridgeBlockStub({
+            blockId: 1,
+            blockAssets: { [MOCK_SETTINGS_ID]: [AssetDummy.with(1)] },
+        });
+        const { result } = renderHook(useAttachmentsContext, {
+            wrapper: ({ children }) => (
+                <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_SETTINGS_ID}>
+                    {children}
+                </AttachmentsProvider>
+            ),
+        });
+
+        expect(result.current.appBridge).toEqual(STUB_WITH_NO_ASSETS);
+        await waitFor(() => {
+            expect(result.current.attachments).toHaveLength(1);
+        });
+    });
+});
+
+describe('withAttachmentsProvider', () => {
+    it('should provide correct info to context consumer', async () => {
+        const STUB_WITH_THREE_ASSETS = getAppBridgeBlockStub({
+            blockId: 2,
+            blockAssets: { [MOCK_SETTINGS_ID]: [AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)] },
+        });
+
+        const Component = withAttachmentsProvider(() => {
+            const context = useAttachmentsContext();
+            return (
+                <ul>
+                    {context.attachments.map((attachment) => (
+                        <li key={attachment.id} role="list">
+                            {attachment.id}
+                        </li>
+                    ))}
+                </ul>
+            );
+        }, MOCK_SETTINGS_ID);
+
+        const { getAllByRole } = render(<Component appBridge={STUB_WITH_THREE_ASSETS} />);
+
+        await waitFor(() => expect(getAllByRole('list')).toHaveLength(3));
+    });
+});

package/src/hooks/useAttachments.tsx

@@ -0,0 +1,95 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock, Asset, useBlockAssets } from '@frontify/app-bridge';
+import { type ReactNode, createContext, useContext } from 'react';
+
+import { type BlockProps } from '../index';
+
+export const useAttachments = (appBridge: AppBridgeBlock, assetId: string) => {
+    const { blockAssets, updateAssetIdsFromKey } = useBlockAssets(appBridge);
+    const attachments = blockAssets?.[assetId] || [];
+
+    const onAttachmentsAdd = async (newAssets: Asset[]) => {
+        const newAssetIds = attachments.map((attachment) => attachment.id);
+        for (const asset of newAssets) {
+            newAssetIds.push(asset.id);
+        }
+        await updateAssetIdsFromKey(assetId, newAssetIds);
+    };
+
+    const onAttachmentDelete = async (assetToDelete: Asset) => {
+        const newAssetIds = attachments
+            .filter((attachment) => attachment.id !== assetToDelete.id)
+            .map((attachment) => attachment.id);
+
+        await updateAssetIdsFromKey(assetId, newAssetIds);
+    };
+
+    const onAttachmentReplace = async (attachmentToReplace: Asset, newAsset: Asset) => {
+        const newAssetIds = attachments.map((attachment) =>
+            attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id,
+        );
+
+        await updateAssetIdsFromKey(assetId, newAssetIds);
+    };
+
+    const onAttachmentsSorted = async (assets: Asset[]) => {
+        const newAssetIds = assets.map((asset) => asset.id);
+
+        await updateAssetIdsFromKey(assetId, newAssetIds);
+    };
+
+    return {
+        onAttachmentsAdd,
+        onAttachmentDelete,
+        onAttachmentReplace,
+        onAttachmentsSorted,
+        attachments,
+        appBridge,
+    };
+};
+
+const AttachmentsContext = createContext<ReturnType<typeof useAttachments> | null>(null);
+
+export const AttachmentsProvider = ({
+    appBridge,
+    children,
+    assetId,
+}: {
+    appBridge: AppBridgeBlock;
+    children: ReactNode;
+    assetId: string;
+}) => {
+    const attachmentContext = useAttachments(appBridge, assetId);
+
+    return <AttachmentsContext.Provider value={attachmentContext}>{children}</AttachmentsContext.Provider>;
+};
+
+export const useAttachmentsContext = () => {
+    const context = useContext(AttachmentsContext);
+
+    if (!context) {
+        throw new Error(
+            "No AttachmentsContext Provided. Component must be wrapped in an 'AttachmentsProvider' or the 'withAttachmentsProvider' HOC",
+        );
+    }
+
+    return context;
+};
+
+/**
+ * Block-level HOC for cases when there is only one attachment asset field related to the block.
+ * Recommended for most cases.
+ * If finer control is required over attachments, use {@link AttachmentsProvider} component.
+ */
+export const withAttachmentsProvider = <T extends BlockProps>(Component: (props: T) => ReactNode, assetId: string) => {
+    const wrappedComponent = (props: T) => (
+        <AttachmentsProvider appBridge={props.appBridge} assetId={assetId}>
+            <Component {...props} />
+        </AttachmentsProvider>
+    );
+
+    wrappedComponent.displayName = 'withAttachmentsProvider';
+
+    return wrappedComponent;
+};

package/dist/components/BlockItemWrapper/Toolbar.es.js

@@ -1,117 +0,0 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { LegacyTooltip as l, TooltipPosition as n, FOCUS_VISIBLE_STYLE as a, Flyout as v, IconDotsHorizontal16 as m, ActionMenu as f, MenuItemContentSize as x } from "@frontify/fondue";
-import { DEFAULT_DRAGGING_TOOLTIP as g, DEFAULT_DRAG_TOOLTIP as y } from "./constants.es.js";
-import { joinClassNames as c } from "../../utilities/react/joinClassNames.es.js";
-const C = ({
-  items: d,
-  flyoutItems: s,
-  isFlyoutOpen: b,
-  setIsFlyoutOpen: w,
-  isDragging: r,
-  isFlyoutDisabled: p
-}) => /* @__PURE__ */ e("div", { "data-test-id": "block-item-wrapper-toolbar", className: "tw-flex tw-justify-end", children: /* @__PURE__ */ u("div", { className: "tw-bg-white tw-isolate tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded", children: [
-  d.map(
-    (t, o) => "draggableProps" in t ? /* @__PURE__ */ e(
-      l,
-      {
-        withArrow: !0,
-        hoverDelay: 0,
-        enterDelay: 300,
-        open: r,
-        position: n.Top,
-        content: /* @__PURE__ */ e("div", { children: r ? g : t.tooltip ?? y }),
-        triggerElement: /* @__PURE__ */ e(
-          "button",
-          {
-            ref: t.setActivatorNodeRef,
-            "data-test-id": "block-item-wrapper-toolbar-btn",
-            ...t.draggableProps,
-            className: c([
-              a,
-              "tw-bg-base tw-relative tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm focus-visible:tw-z-10",
-              r ? "tw-cursor-grabbing tw-bg-box-selected-pressed" : "tw-cursor-grab hover:tw-bg-box-selected-hover"
-            ]),
-            children: t.icon
-          }
-        )
-      },
-      o
-    ) : /* @__PURE__ */ e(
-      l,
-      {
-        withArrow: !0,
-        enterDelay: 300,
-        hoverDelay: 0,
-        disabled: r,
-        position: n.Top,
-        content: /* @__PURE__ */ e("div", { children: t.tooltip ?? "" }),
-        triggerElement: /* @__PURE__ */ e(
-          "button",
-          {
-            "data-test-id": "block-item-wrapper-toolbar-btn",
-            onClick: t.onClick,
-            className: c([
-              "tw-bg-base tw-relative hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm focus-visible:tw-z-10",
-              a
-            ]),
-            children: t.icon
-          }
-        )
-      },
-      o
-    )
-  ),
-  s.length > 0 && /* @__PURE__ */ e("div", { className: "tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative", children: /* @__PURE__ */ e(
-    v,
-    {
-      isOpen: b && !r,
-      isTriggerDisabled: p,
-      legacyFooter: !1,
-      fitContent: !0,
-      hug: !1,
-      onOpenChange: w,
-      trigger: /* @__PURE__ */ e(
-        l,
-        {
-          withArrow: !0,
-          hoverDelay: 0,
-          enterDelay: 300,
-          disabled: r,
-          position: n.Top,
-          content: /* @__PURE__ */ e("div", { children: "Options" }),
-          triggerElement: /* @__PURE__ */ e(
-            "div",
-            {
-              "data-test-id": "block-item-wrapper-toolbar-flyout",
-              className: "tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm tw-relative",
-              children: /* @__PURE__ */ e(m, {})
-            }
-          )
-        }
-      ),
-      children: /* @__PURE__ */ e(
-        f,
-        {
-          menuBlocks: s.map((t, o) => ({
-            id: o.toString(),
-            menuItems: t.map((i, h) => ({
-              id: o.toString() + h.toString(),
-              size: x.XSmall,
-              title: i.title,
-              style: i.style,
-              onClick: () => {
-                w(!1), i.onClick();
-              },
-              initialValue: !0,
-              decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: i.icon })
-            }))
-          }))
-        }
-      )
-    }
-  ) })
-] }) });
-export {
-  C as Toolbar
-};
-//# sourceMappingURL=Toolbar.es.js.map

package/dist/components/BlockItemWrapper/Toolbar.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.es.js","sources":["../../../src/components/BlockItemWrapper/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    FOCUS_VISIBLE_STYLE,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    LegacyTooltip as Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { ToolbarProps } from './types';\nimport { joinClassNames } from '../../utilities';\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';\n\nexport const Toolbar = ({\n    items,\n    flyoutItems,\n    isFlyoutOpen,\n    setIsFlyoutOpen,\n    isDragging,\n    isFlyoutDisabled,\n}: ToolbarProps) => {\n    return (\n        <div data-test-id=\"block-item-wrapper-toolbar\" className=\"tw-flex tw-justify-end\">\n            <div className=\"tw-bg-white tw-isolate tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded\">\n                {items.map((item, i) =>\n                    'draggableProps' in item ? (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            hoverDelay={0}\n                            enterDelay={300}\n                            open={isDragging}\n                            position={TooltipPosition.Top}\n                            content={\n                                <div>\n                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}\n                                </div>\n                            }\n                            triggerElement={\n                                <button\n                                    ref={item.setActivatorNodeRef}\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    {...item.draggableProps}\n                                    className={joinClassNames([\n                                        FOCUS_VISIBLE_STYLE,\n                                        'tw-bg-base tw-relative tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm focus-visible:tw-z-10',\n                                        isDragging\n                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'\n                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',\n                                    ])}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ) : (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            enterDelay={300}\n                            hoverDelay={0}\n                            disabled={isDragging}\n                            position={TooltipPosition.Top}\n                            content={<div>{item.tooltip ?? ''}</div>}\n                            triggerElement={\n                                <button\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    onClick={item.onClick}\n                                    className={joinClassNames([\n                                        'tw-bg-base tw-relative hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm focus-visible:tw-z-10',\n                                        FOCUS_VISIBLE_STYLE,\n                                    ])}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ),\n                )}\n                {flyoutItems.length > 0 && (\n                    <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative\">\n                        <Flyout\n                            isOpen={isFlyoutOpen && !isDragging}\n                            isTriggerDisabled={isFlyoutDisabled}\n                            legacyFooter={false}\n                            fitContent\n                            hug={false}\n                            onOpenChange={setIsFlyoutOpen}\n                            trigger={\n                                <Tooltip\n                                    withArrow\n                                    hoverDelay={0}\n                                    enterDelay={300}\n                                    disabled={isDragging}\n                                    position={TooltipPosition.Top}\n                                    content={<div>Options</div>}\n                                    triggerElement={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm tw-relative\"\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                />\n                            }\n                        >\n                            <ActionMenu\n                                menuBlocks={flyoutItems.map((block, blockIndex) => ({\n                                    id: blockIndex.toString(),\n                                    menuItems: block.map((item, itemIndex) => ({\n                                        id: blockIndex.toString() + itemIndex.toString(),\n                                        size: MenuItemContentSize.XSmall,\n                                        title: item.title,\n                                        style: item.style,\n                                        onClick: () => {\n                                            setIsFlyoutOpen(false);\n                                            item.onClick();\n                                        },\n                                        initialValue: true,\n                                        decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                                    })),\n                                }))}\n                            />\n                        </Flyout>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutItems","isFlyoutOpen","setIsFlyoutOpen","isDragging","isFlyoutDisabled","jsx","jsxs","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","joinClassNames","FOCUS_VISIBLE_STYLE","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":"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"}

package/src/components/BlockItemWrapper/Toolbar.tsx

@@ -1,133 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import {
-    ActionMenu,
-    FOCUS_VISIBLE_STYLE,
-    Flyout,
-    IconDotsHorizontal16,
-    MenuItemContentSize,
-    LegacyTooltip as Tooltip,
-    TooltipPosition,
-} from '@frontify/fondue';
-import { ToolbarProps } from './types';
-import { joinClassNames } from '../../utilities';
-import { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';
-
-export const Toolbar = ({
-    items,
-    flyoutItems,
-    isFlyoutOpen,
-    setIsFlyoutOpen,
-    isDragging,
-    isFlyoutDisabled,
-}: ToolbarProps) => {
-    return (
-        <div data-test-id="block-item-wrapper-toolbar" className="tw-flex tw-justify-end">
-            <div className="tw-bg-white tw-isolate tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded">
-                {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={joinClassNames([
-                                        FOCUS_VISIBLE_STYLE,
-                                        'tw-bg-base tw-relative tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm focus-visible:tw-z-10',
-                                        isDragging
-                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'
-                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',
-                                    ])}
-                                >
-                                    {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={joinClassNames([
-                                        'tw-bg-base tw-relative hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm focus-visible:tw-z-10',
-                                        FOCUS_VISIBLE_STYLE,
-                                    ])}
-                                >
-                                    {item.icon}
-                                </button>
-                            }
-                        />
-                    ),
-                )}
-                {flyoutItems.length > 0 && (
-                    <div className="tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative">
-                        <Flyout
-                            isOpen={isFlyoutOpen && !isDragging}
-                            isTriggerDisabled={isFlyoutDisabled}
-                            legacyFooter={false}
-                            fitContent
-                            hug={false}
-                            onOpenChange={setIsFlyoutOpen}
-                            trigger={
-                                <Tooltip
-                                    withArrow
-                                    hoverDelay={0}
-                                    enterDelay={300}
-                                    disabled={isDragging}
-                                    position={TooltipPosition.Top}
-                                    content={<div>Options</div>}
-                                    triggerElement={
-                                        <div
-                                            data-test-id="block-item-wrapper-toolbar-flyout"
-                                            className="tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm tw-relative"
-                                        >
-                                            <IconDotsHorizontal16 />
-                                        </div>
-                                    }
-                                />
-                            }
-                        >
-                            <ActionMenu
-                                menuBlocks={flyoutItems.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: () => {
-                                            setIsFlyoutOpen(false);
-                                            item.onClick();
-                                        },
-                                        initialValue: true,
-                                        decorator: <div className="tw-mr-2">{item.icon}</div>,
-                                    })),
-                                }))}
-                            />
-                        </Flyout>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};