@frontify/guideline-blocks-settings 0.27.0 → 0.28.1

package/src/components/BlockInjectButton/BlockInjectButton.spec.ct.tsx

@@ -0,0 +1,48 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { withAppBridgeBlockStubs } from '@frontify/app-bridge';
+import { mount } from 'cypress/react18';
+import { BlockInjectButton } from './BlockInjectButton';
+import { IconAdobeCreativeCloud } from '@frontify/fondue';
+
+const BlockInjectButtonSelector = '[data-test-id="block-inject-button"]';
+const ActionMenuItemSelector = '[data-test-id="menu-item"]';
+
+describe('Block Inject Button', () => {
+    it('renders a simple block inject button', () => {
+        const [BlockInjectButtonWithStubs] = withAppBridgeBlockStubs(BlockInjectButton, {});
+
+        mount(
+            <BlockInjectButtonWithStubs
+                label="label"
+                icon={<IconAdobeCreativeCloud />}
+                secondaryLabel="second label"
+                withMenu={false}
+            />
+        );
+        cy.get(BlockInjectButtonSelector)
+            .should('exist')
+            .should('have.class', 'first:tw-rounded-tl last:tw-rounded-br', 'first:tw-rounded-bl last:tw-rounded-tr');
+    });
+
+    it('renders a block inject button with Menu upload and asset', () => {
+        const [BlockInjectButtonWithStubs] = withAppBridgeBlockStubs(BlockInjectButton, {});
+
+        mount(
+            <BlockInjectButtonWithStubs
+                label="label"
+                secondaryLabel="second label"
+                onAssetChooseClick={cy.stub().as('onClickOpenAssetChooser')}
+                onUploadClick={cy.stub().as('onClickonUploadClick')}
+            />
+        );
+        cy.get(BlockInjectButtonSelector).click();
+        cy.get(ActionMenuItemSelector).should('have.length', 2);
+        cy.get(ActionMenuItemSelector).eq(0).should('have.text', 'Upload asset').click();
+        cy.get('@onClickonUploadClick').should('have.been.calledOnce');
+
+        cy.get(BlockInjectButtonSelector).click();
+        cy.get(ActionMenuItemSelector).eq(1).should('have.text', 'Browse asset').click();
+        cy.get('@onClickOpenAssetChooser').should('have.been.calledOnce');
+    });
+});

package/src/components/BlockInjectButton/BlockInjectButton.tsx

@@ -0,0 +1,212 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    ActionMenu,
+    Flyout,
+    IconArrowCircleUp20,
+    IconExclamationMarkTriangle,
+    IconImageStack20,
+    LoadingCircle,
+    MenuItemContentSize,
+} from '@frontify/fondue';
+import { DragEventHandler, MouseEventHandler, useRef, useState } from 'react';
+import { joinClassNames } from '../../utilities/react/joinClassNames';
+import { BlockInjectButtonProps } from './types';
+import { FileExtension, FileExtensionSets } from '@frontify/app-bridge';
+
+export const BlockInjectButton = ({
+    onDrop,
+    label,
+    icon,
+    secondaryLabel,
+    isLoading,
+    fillParentContainer,
+    onAssetChooseClick,
+    onUploadClick,
+    withMenu = true,
+    onClick,
+    validFileType,
+    verticalLayout,
+}: BlockInjectButtonProps) => {
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
+    const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);
+
+    const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {
+        event.preventDefault();
+        setIsDraggingOver(false);
+        if (!isValidAsset(event.dataTransfer.files)) {
+            setErrorMsg('Invalid');
+            setTimeout(() => {
+                setErrorMsg(undefined);
+            }, 1000);
+            return;
+        }
+        onDrop?.(event.dataTransfer.files);
+    };
+
+    const isValidAsset = (files: FileList) => {
+        if (!validFileType) {
+            return true;
+        }
+        for (let i = 0; i < files.length; i++) {
+            const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;
+            if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {
+                return false;
+            }
+        }
+        return true;
+    };
+
+    const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {
+        if (!buttonRef.current || isLoading) {
+            return;
+        }
+        const { left, top } = buttonRef.current.getBoundingClientRect();
+        const XInsideComponent = event.clientX - left;
+        const YInsideComponent = event.clientY - top;
+        setMenuPosition([XInsideComponent, YInsideComponent]);
+    };
+
+    return (
+        <button
+            ref={buttonRef}
+            data-test-id="block-inject-button"
+            className={joinClassNames([
+                'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',
+                verticalLayout
+                    ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'
+                    : '[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr',
+                fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',
+                isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',
+                menuPosition && 'tw-bg-blank-state-pressed-inverse',
+                isDraggingOver && 'tw-bg-blank-state-weak-inverse',
+                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',
+                isLoading || menuPosition || isDraggingOver || errorMsg
+                    ? ''
+                    : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',
+                (isDraggingOver || !!menuPosition) && !errorMsg
+                    ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'
+                    : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',
+            ])}
+            onDragEnter={
+                onDrop
+                    ? (event) => {
+                          setIsDraggingOver(true);
+                          // is now only used for images, can be adapted if needed
+                          if (validFileType === 'Images') {
+                              for (const item of Array.from(event.dataTransfer.items)) {
+                                  if (!item?.type?.startsWith('image/')) {
+                                      setErrorMsg('Invalid');
+                                  } else {
+                                      setErrorMsg(undefined);
+                                  }
+                              }
+                          }
+                      }
+                    : undefined
+            }
+            onDragLeave={
+                onDrop
+                    ? () => {
+                          setIsDraggingOver(false);
+                          setErrorMsg(undefined);
+                      }
+                    : undefined
+            }
+            onDrop={onDrop ? handleDrop : undefined}
+            onClick={(event) => {
+                withMenu && openMenu(event);
+                onClick?.();
+            }}
+        >
+            {isLoading ? (
+                <LoadingCircle />
+            ) : // eslint-disable-next-line unicorn/no-nested-ternary
+            errorMsg ? (
+                <div className=" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium">
+                    <IconExclamationMarkTriangle />
+                    {errorMsg}
+                </div>
+            ) : (
+                <>
+                    {icon && <div>{icon}</div>}
+                    {(label || secondaryLabel) && (
+                        <div className="tw-flex tw-flex-col tw-items-start">
+                            {label && <div className="tw-font-medium">{label}</div>}
+                            {secondaryLabel && <div className="tw-font-normal">{secondaryLabel}</div>}
+                        </div>
+                    )}
+                </>
+            )}
+            {menuPosition && (
+                <div
+                    className="tw-absolute tw-left-0 tw-top-full tw-z-20"
+                    style={{
+                        left: menuPosition[0],
+                        top: menuPosition[1],
+                    }}
+                >
+                    <Flyout
+                        onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}
+                        isOpen={true}
+                        fitContent
+                        hug={false}
+                        legacyFooter={false}
+                        trigger={<div />}
+                    >
+                        <ActionMenu
+                            menuBlocks={[
+                                {
+                                    id: 'menu',
+                                    menuItems: [
+                                        ...(onUploadClick
+                                            ? [
+                                                  {
+                                                      id: 'upload',
+                                                      size: MenuItemContentSize.XSmall,
+                                                      title: 'Upload asset',
+                                                      onClick: () => {
+                                                          onUploadClick();
+                                                          setMenuPosition(undefined);
+                                                      },
+
+                                                      initialValue: true,
+                                                      decorator: (
+                                                          <div className="tw-mr-2">
+                                                              <IconArrowCircleUp20 />
+                                                          </div>
+                                                      ),
+                                                  },
+                                              ]
+                                            : []),
+                                        ...(onAssetChooseClick
+                                            ? [
+                                                  {
+                                                      id: 'asset',
+                                                      size: MenuItemContentSize.XSmall,
+                                                      title: 'Browse asset',
+                                                      onClick: () => {
+                                                          onAssetChooseClick();
+                                                          setMenuPosition(undefined);
+                                                      },
+                                                      initialValue: true,
+                                                      decorator: (
+                                                          <div className="tw-mr-2">
+                                                              <IconImageStack20 />
+                                                          </div>
+                                                      ),
+                                                  },
+                                              ]
+                                            : []),
+                                    ],
+                                },
+                            ]}
+                        />
+                    </Flyout>
+                </div>
+            )}
+        </button>
+    );
+};

package/src/components/BlockInjectButton/index.ts

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

package/src/components/BlockInjectButton/types.ts

@@ -0,0 +1,18 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import type { FileType } from '@frontify/app-bridge';
+
+export type BlockInjectButtonProps = {
+    isLoading?: boolean;
+    label?: string;
+    validFileType?: keyof typeof FileType;
+    secondaryLabel?: string;
+    icon?: JSX.Element;
+    onDrop?: (files: FileList) => void;
+    fillParentContainer?: boolean;
+    onUploadClick?: () => void;
+    onAssetChooseClick?: () => void;
+    withMenu?: boolean;
+    onClick?: () => void;
+    verticalLayout?: boolean;
+};

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

@@ -0,0 +1,146 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconMagnifier16 } from '@frontify/fondue';
+import { mount } from 'cypress/react18';
+import { BlockItemWrapper } from './BlockItemWrapper';
+
+const BlockItemWrapperSelector = '[data-test-id="block-item-wrapper"]';
+const ToolbarSelector = '[data-test-id="block-item-wrapper-toolbar"]';
+const FlyoutSelector = '[data-test-id="block-item-wrapper-toolbar-flyout"]';
+const MenuItemSelector = '[data-test-id="menu-item"]';
+const ToolbarButtonSelector = '[data-test-id="block-item-wrapper-toolbar-btn"]';
+const ChildSelector = '[data-test-id="block-item-wrapper-child"]';
+
+describe('Block Item Wrapper', () => {
+    it('should render the wrapper and the children', () => {
+        mount(
+            <BlockItemWrapper toolbarFlyoutItems={[]} toolbarItems={[]}>
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(BlockItemWrapperSelector).should('exist');
+        cy.get(ChildSelector).should('exist');
+    });
+
+    it('should render the outline class', () => {
+        mount(
+            <BlockItemWrapper toolbarFlyoutItems={[]} toolbarItems={[]}>
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(BlockItemWrapperSelector).should('have.class', 'hover:tw-outline');
+    });
+
+    it('should not render the outline class if the hide prop is set', () => {
+        mount(
+            <BlockItemWrapper toolbarFlyoutItems={[]} toolbarItems={[]} shouldHideWrapper>
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(BlockItemWrapperSelector).should('not.exist');
+    });
+
+    it('should render the right amount of toolbar items', () => {
+        mount(
+            <BlockItemWrapper
+                toolbarFlyoutItems={[]}
+                toolbarItems={[
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                ]}
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ToolbarButtonSelector).should('have.length', 2);
+    });
+
+    it('should render the flyout button with the right amount of menu items', () => {
+        mount(
+            <BlockItemWrapper
+                toolbarFlyoutItems={[
+                    [
+                        {
+                            icon: <IconMagnifier16 />,
+                            onClick: cy.stub(),
+                            title: 'Test title',
+                        },
+                    ],
+                    [
+                        {
+                            icon: <IconMagnifier16 />,
+                            onClick: cy.stub(),
+                            title: 'Test title',
+                        },
+                        {
+                            icon: <IconMagnifier16 />,
+                            onClick: cy.stub(),
+                            title: 'Test title',
+                        },
+                    ],
+                ]}
+                toolbarItems={[
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                ]}
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-mt-8 tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ToolbarButtonSelector).eq(0).focus();
+        cy.get(FlyoutSelector).should('exist');
+        cy.get(FlyoutSelector).click({ force: true });
+        cy.get(MenuItemSelector).should('have.length', 3);
+    });
+
+    it('should render the outline if a toolbar button is focused', () => {
+        mount(
+            <BlockItemWrapper
+                toolbarFlyoutItems={[]}
+                toolbarItems={[
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                ]}
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ToolbarButtonSelector).eq(0).focus();
+        cy.get(BlockItemWrapperSelector).should('have.css', 'outline-style', 'solid');
+    });
+
+    it('should render the toolbar if a button is focused', () => {
+        mount(
+            <BlockItemWrapper
+                toolbarFlyoutItems={[]}
+                shouldHideComponent={false}
+                toolbarItems={[
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                ]}
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ToolbarButtonSelector).eq(0).focus();
+        cy.get(ToolbarSelector).should('be.visible');
+    });
+
+    it('should render the outline and the toolbar if enabled', () => {
+        mount(
+            <BlockItemWrapper
+                toolbarFlyoutItems={[]}
+                toolbarItems={[
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                ]}
+                shouldBeShown
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ChildSelector).should('exist');
+        cy.get(BlockItemWrapperSelector).should('have.css', 'outline-style', 'solid');
+        cy.get(ToolbarSelector).should('be.visible');
+    });
+});

package/src/components/BlockItemWrapper/BlockItemWrapper.tsx

@@ -0,0 +1,76 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { joinClassNames } from '../../utilities';
+import { Toolbar } from './Toolbar';
+import { BlockItemWrapperProps, ToolbarItem } from './types';
+
+export const BlockItemWrapper = ({
+    children,
+    toolbarFlyoutItems,
+    toolbarItems,
+    shouldHideWrapper,
+    shouldHideComponent = false,
+    isDragging,
+    shouldFillContainer,
+    outlineOffset = 2,
+    shouldBeShown = false,
+}: PropsWithChildren<BlockItemWrapperProps>) => {
+    const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);
+    const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!isFlyoutOpen) {
+            // This prevents automatic refocusing of the trigger element
+            setIsFlyoutDisabled(true);
+        }
+    }, [isFlyoutOpen]);
+
+    if (shouldHideWrapper) {
+        return children;
+    }
+
+    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);
+
+    return (
+        <div
+            ref={wrapperRef}
+            onFocus={() => setIsFlyoutDisabled(false)}
+            onPointerEnter={() => setIsFlyoutDisabled(false)}
+            data-test-id="block-item-wrapper"
+            style={{
+                outlineOffset,
+            }}
+            className={joinClassNames([
+                'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',
+                shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',
+                'hover:tw-outline focus-within:tw-outline',
+                (isFlyoutOpen || shouldBeShown) && 'tw-outline',
+                shouldHideComponent && 'tw-opacity-0',
+            ])}
+        >
+            <div
+                style={{
+                    right: -1 - outlineOffset,
+                    bottom: `calc(100% - ${2 + outlineOffset}px)`,
+                }}
+                className={joinClassNames([
+                    'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-10',
+                    'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',
+                    (isFlyoutOpen || shouldBeShown) && 'tw-opacity-100',
+                ])}
+            >
+                <Toolbar
+                    isFlyoutOpen={isFlyoutOpen}
+                    isFlyoutDisabled={isFlyoutDisabled}
+                    setIsFlyoutOpen={setIsFlyoutOpen}
+                    flyoutItems={toolbarFlyoutItems}
+                    items={items}
+                    isDragging={isDragging}
+                />
+            </div>
+            {children}
+        </div>
+    );
+};

package/src/components/BlockItemWrapper/Toolbar.tsx

@@ -0,0 +1,128 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    ActionMenu,
+    Flyout,
+    IconDotsHorizontal16,
+    MenuItemContentSize,
+    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-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([
+                                        'tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm',
+                                        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="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"
+                                >
+                                    {item.icon}
+                                </button>
+                            }
+                        />
+                    )
+                )}
+                {flyoutItems.length > 0 && (
+                    <div className="tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6">
+                        <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"
+                                        >
+                                            <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>
+    );
+};

package/src/components/BlockItemWrapper/constants.ts

@@ -0,0 +1,4 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const DEFAULT_DRAG_TOOLTIP = 'Drag or press ↵ to move';
+export const DEFAULT_DRAGGING_TOOLTIP = 'Move with ↑↓←→ and confirm with ↵';

package/src/components/BlockItemWrapper/index.ts

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