@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

package/postcss.config.cjs

@@ -1,8 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-};

package/setupTests.ts

@@ -1,23 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import * as matchers from '@testing-library/jest-dom/matchers';
-import { cleanup, configure } from '@testing-library/react';
-import { afterEach, beforeAll, expect, vi } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-
-expect.extend(matchers);
-
-vi.stubGlobal('crypto', {
-    getRandomValues: vi.fn(),
-});
-
-beforeAll(() => {
-    configure({ testIdAttribute: 'data-test-id' });
-});
-
-afterEach(() => {
-    vi.restoreAllMocks();
-    cleanup();
-});
-
-globalThis.structuredClone = (data: unknown) => JSON.parse(JSON.stringify(data));

package/src/components/Attachments/AttachmentItem.tsx

@@ -1,247 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { MutableRefObject, forwardRef, useEffect, useState } from 'react';
-import { Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';
-import { useSortable } from '@dnd-kit/sortable';
-
-import {
-    ActionMenu,
-    Button,
-    ButtonEmphasis,
-    FOCUS_STYLE,
-    Flyout,
-    FlyoutPlacement,
-    IconArrowCircleUp20,
-    IconDocument24,
-    IconGrabHandle20,
-    IconImage24,
-    IconImageStack20,
-    IconMusicNote24,
-    IconPen20,
-    IconPlayFrame24,
-    IconTrashBin20,
-    LoadingCircle,
-    LoadingCircleSize,
-    MenuItemContentSize,
-    MenuItemStyle,
-} from '@frontify/fondue';
-import { AttachmentItemProps, SortableAttachmentItemProps } from './types';
-import { joinClassNames } from '../../utilities';
-import { useFocusRing } from '@react-aria/focus';
-
-const getDecorator = (type: string) => {
-    if (type === 'IMAGE') {
-        return <IconImage24 />;
-    } else if (type === 'VIDEO') {
-        return <IconPlayFrame24 />;
-    } else if (type === 'AUDIO') {
-        return <IconMusicNote24 />;
-    } else {
-        return <IconDocument24 />;
-    }
-};
-
-export const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(
-    (
-        {
-            item,
-            isEditing,
-            draggableProps,
-            transformStyle,
-            isDragging,
-            isOverlay,
-            isLoading,
-            onDelete,
-            onReplaceWithBrowse,
-            onReplaceWithUpload,
-            onDownload,
-        },
-        ref,
-    ) => {
-        const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>();
-        const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/*' });
-        const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();
-
-        const { focusProps, isFocusVisible } = useFocusRing();
-
-        useEffect(() => {
-            if (selectedFiles) {
-                uploadFile(selectedFiles[0]);
-            }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [selectedFiles]);
-
-        useEffect(() => {
-            if (doneAll) {
-                onReplaceWithUpload(uploadResults[0]);
-            }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [doneAll, uploadResults]);
-
-        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);
-
-        return (
-            <button
-                aria-label="Download attachment"
-                data-test-id="attachments-item"
-                onClick={() => onDownload?.()}
-                ref={ref}
-                style={{
-                    ...transformStyle,
-                    opacity: isDragging && !isOverlay ? 0.3 : 1,
-                    fontFamily: 'var(-f-theme-settings-body-font-family)',
-                }}
-                className={joinClassNames([
-                    'tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-box-neutral-hover',
-                    isDragging ? 'tw-bg-box-neutral-hover' : '',
-                ])}
-            >
-                <div className="tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover">
-                    {showLoadingCircle ? (
-                        <LoadingCircle size={LoadingCircleSize.Small} />
-                    ) : (
-                        getDecorator(item.objectType)
-                    )}
-                </div>
-                <div className="tw-text-s tw-flex-1 tw-min-w-0">
-                    <div className="tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover">
-                        {item.title}
-                    </div>
-                    <div className="tw-text-text-weak">{`${item.fileSizeHumanReadable} - ${item.extension}`}</div>
-                </div>
-                {isEditing && (
-                    <div
-                        data-test-id="attachments-actionbar"
-                        className={joinClassNames([
-                            'tw-flex tw-gap-0.5 group-focus:tw-opacity-100 focus-visible:tw-opacity-100 focus-within:tw-opacity-100 group-hover:tw-opacity-100',
-                            isOverlay || selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',
-                        ])}
-                    >
-                        <button
-                            {...focusProps}
-                            {...draggableProps}
-                            aria-label="Drag attachment"
-                            className={joinClassNames([
-                                ' tw-border-button-border tw-bg-button-background active:tw-bg-button-background-pressed tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-outline-none tw-font-medium tw-rounded tw-h-9 tw-w-9 ',
-                                isDragging || isOverlay
-                                    ? 'tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed'
-                                    : 'tw-cursor-grab hover:tw-bg-button-background-hover',
-                                isFocusVisible && FOCUS_STYLE,
-                                isFocusVisible && 'tw-z-[2]',
-                            ])}
-                        >
-                            <IconGrabHandle20 />
-                        </button>
-                        <div data-test-id="attachments-actionbar-flyout">
-                            <Flyout
-                                placement={FlyoutPlacement.Right}
-                                isOpen={selectedAsset?.id === item.id}
-                                fitContent
-                                legacyFooter={false}
-                                onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}
-                                trigger={(_, ref) => (
-                                    <Button
-                                        ref={ref as MutableRefObject<HTMLButtonElement>}
-                                        icon={<IconPen20 />}
-                                        emphasis={ButtonEmphasis.Default}
-                                        onClick={() => setSelectedAsset(item)}
-                                    />
-                                )}
-                            >
-                                <ActionMenu
-                                    menuBlocks={[
-                                        {
-                                            id: 'menu',
-                                            menuItems: [
-                                                {
-                                                    id: 'upload',
-                                                    size: MenuItemContentSize.XSmall,
-                                                    title: 'Replace with upload',
-                                                    onClick: () => {
-                                                        openFileDialog();
-                                                        setSelectedAsset(undefined);
-                                                    },
-
-                                                    initialValue: true,
-                                                    decorator: (
-                                                        <div className="tw-mr-2">
-                                                            <IconArrowCircleUp20 />
-                                                        </div>
-                                                    ),
-                                                },
-
-                                                {
-                                                    id: 'asset',
-                                                    size: MenuItemContentSize.XSmall,
-                                                    title: 'Replace with asset',
-                                                    onClick: () => {
-                                                        onReplaceWithBrowse();
-                                                        setSelectedAsset(undefined);
-                                                    },
-                                                    initialValue: true,
-                                                    decorator: (
-                                                        <div className="tw-mr-2">
-                                                            <IconImageStack20 />
-                                                        </div>
-                                                    ),
-                                                },
-                                            ],
-                                        },
-                                        {
-                                            id: 'menu-delete',
-                                            menuItems: [
-                                                {
-                                                    id: 'delete',
-                                                    size: MenuItemContentSize.XSmall,
-                                                    title: 'Delete',
-                                                    style: MenuItemStyle.Danger,
-                                                    onClick: () => {
-                                                        onDelete();
-                                                        setSelectedAsset(undefined);
-                                                    },
-
-                                                    initialValue: true,
-                                                    decorator: (
-                                                        <div className="tw-mr-2">
-                                                            <IconTrashBin20 />
-                                                        </div>
-                                                    ),
-                                                },
-                                            ],
-                                        },
-                                    ]}
-                                />
-                            </Flyout>
-                        </div>
-                    </div>
-                )}
-            </button>
-        );
-    },
-);
-
-AttachmentItem.displayName = 'AttachmentItem';
-
-export const SortableAttachmentItem = (props: SortableAttachmentItemProps) => {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-        id: props.item.id,
-    });
-
-    const transformStyle = {
-        transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : '',
-        transition,
-        zIndex: isDragging ? 2 : 1,
-    };
-
-    const draggableProps = { ...attributes, ...listeners };
-
-    return (
-        <AttachmentItem
-            ref={setNodeRef}
-            isDragging={isDragging}
-            transformStyle={transformStyle}
-            draggableProps={draggableProps}
-            {...props}
-        />
-    );
-};

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

@@ -1,165 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { type AppBridgeBlock, AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
-import { mount } from 'cypress/react18';
-import { Attachments as AttachmentsComponent } from './Attachments';
-import { AttachmentsProps } from './types';
-import { SinonStub } from 'sinon';
-
-const FlyoutButtonSelector = '[data-test-id="attachments-button-trigger"]';
-const AssetInputSelector = '[data-test-id="asset-input-placeholder"]';
-const ActionBarSelector = '[data-test-id="attachments-actionbar"]';
-const DragHandleSelector = '[data-test-id="attachments-actionbar"] > button';
-const FlyoutTriggerSelector = '[data-test-id="attachments-actionbar-flyout"] button';
-const AttachmentItemSelector = '[data-test-id="attachments-item"]';
-const MenuItemSelector = '[data-test-id="menu-item"]';
-const LoadingCircleSelector = '[data-test-id="loading-circle"]';
-
-const Attachments = ({
-    appBridge = getAppBridgeBlockStub(),
-    onDelete = cy.stub(),
-    items,
-    onReplaceWithBrowse = cy.stub(),
-    onReplaceWithUpload = cy.stub(),
-    onSorted = cy.stub(),
-    onBrowse = cy.stub(),
-    onUpload = cy.stub(),
-}: Partial<AttachmentsProps>) => {
-    return (
-        <AttachmentsComponent
-            appBridge={appBridge}
-            onDelete={onDelete}
-            items={items}
-            onReplaceWithBrowse={onReplaceWithBrowse}
-            onReplaceWithUpload={onReplaceWithUpload}
-            onSorted={onSorted}
-            onBrowse={onBrowse}
-            onUpload={onUpload}
-        />
-    );
-};
-
-const isPre302Stub = async (appBridge: AppBridgeBlock): Promise<boolean> => {
-    const context = appBridge.context();
-    return context === undefined;
-};
-
-const hasOpenAssetChooser = (
-    appBridge: AppBridgeBlock,
-): appBridge is AppBridgeBlock & { openAssetChooser: SinonStub } => {
-    return 'openAssetChooser' in appBridge;
-};
-
-describe('Attachments', () => {
-    it('renders attachments flyout if it is in edit mode', () => {
-        mount(<Attachments appBridge={getAppBridgeBlockStub({ editorState: true })} />);
-        cy.get(FlyoutButtonSelector).should('exist');
-    });
-
-    it('renders attachments flyout if it has attachments', () => {
-        mount(<Attachments items={[AssetDummy.with(1)]} />);
-        cy.get(FlyoutButtonSelector).should('exist');
-    });
-
-    it('does not render attachments flyout if there are no attachments', () => {
-        mount(<Attachments items={[]} />);
-        cy.get(FlyoutButtonSelector).should('not.exist');
-    });
-
-    it('renders asset input if in edit mode', () => {
-        mount(<Attachments appBridge={getAppBridgeBlockStub({ editorState: true })} items={[AssetDummy.with(1)]} />);
-        cy.get(FlyoutButtonSelector).click();
-        cy.get(AssetInputSelector).should('exist');
-    });
-
-    it('does not render asset input if in view mode', () => {
-        mount(<Attachments items={[AssetDummy.with(1)]} />);
-        cy.get(FlyoutButtonSelector).click();
-        cy.get(AssetInputSelector).should('not.exist');
-    });
-
-    it('renders asset action buttons if in edit mode', () => {
-        mount(<Attachments appBridge={getAppBridgeBlockStub({ editorState: true })} items={[AssetDummy.with(1)]} />);
-        cy.get(FlyoutButtonSelector).click();
-        cy.get(ActionBarSelector).should('exist');
-    });
-
-    it('does not render asset action buttons if in view mode', () => {
-        mount(<Attachments items={[AssetDummy.with(1)]} />);
-        cy.get(FlyoutButtonSelector).click();
-        cy.get(ActionBarSelector).should('not.exist');
-    });
-
-    it('renders an attachment item for each asset', () => {
-        mount(<Attachments items={[AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)]} />);
-        cy.get(FlyoutButtonSelector).click();
-        cy.get(AttachmentItemSelector).should('have.length', 3);
-    });
-
-    it('renders loading circle for attachment item', async () => {
-        const appBridge = getAppBridgeBlockStub({
-            editorState: true,
-        });
-
-        if ((await isPre302Stub(appBridge)) && hasOpenAssetChooser(appBridge)) {
-            (appBridge.openAssetChooser as SinonStub) = cy.stub().callsArgWith(0, AssetDummy.with(4));
-        }
-
-        cy.clock();
-        const replaceStub = () =>
-            new Promise<void>((resolve) =>
-                setTimeout(() => {
-                    resolve();
-                }, 2000),
-            );
-
-        mount(
-            <Attachments
-                onReplaceWithBrowse={replaceStub}
-                items={[AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)]}
-                appBridge={appBridge}
-            />,
-        );
-
-        cy.get(FlyoutButtonSelector).click();
-        cy.get(AttachmentItemSelector).eq(0).focus();
-        cy.get(FlyoutTriggerSelector).eq(1).click();
-        cy.get(MenuItemSelector).eq(1).click();
-        cy.get(LoadingCircleSelector).should('exist');
-        cy.tick(2000);
-        cy.get(LoadingCircleSelector).should('not.exist');
-    });
-
-    it('renders focus ring on flyout button while tabbing and open it', () => {
-        mount(
-            <Attachments
-                appBridge={getAppBridgeBlockStub({ editorState: true })}
-                items={[AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)]}
-            />,
-        );
-        cy.get(FlyoutButtonSelector).click();
-        cy.realPress('Tab');
-        cy.realPress('Tab');
-        cy.realPress('Tab');
-        cy.get(FlyoutTriggerSelector).eq(0).should('have.class', 'focus-visible:tw-ring-blue');
-        cy.get(FlyoutTriggerSelector).eq(0).type('{enter}');
-        cy.get(MenuItemSelector).should('exist');
-    });
-
-    it('reorders items using only keyboard events', () => {
-        const onSortStub = cy.stub();
-        mount(
-            <Attachments
-                appBridge={getAppBridgeBlockStub({ editorState: true })}
-                items={[{ ...AssetDummy.with(1), title: 'Moved item' }, AssetDummy.with(2), AssetDummy.with(3)]}
-                onSorted={onSortStub}
-            />,
-        );
-        cy.get(FlyoutButtonSelector).click();
-        cy.realPress('Tab');
-        cy.realPress('Tab');
-        cy.realPress('Tab');
-        cy.get(DragHandleSelector).eq(0).type(' {downarrow}{downarrow} ');
-        cy.get(AttachmentItemSelector).eq(1).should('contain.text', 'Moved item');
-    });
-});

package/src/components/Attachments/Attachments.tsx

@@ -1,241 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { MutableRefObject, useEffect, useState } from 'react';
-import {
-    DndContext,
-    DragEndEvent,
-    DragOverlay,
-    DragStartEvent,
-    KeyboardSensor,
-    PointerSensor,
-    closestCenter,
-    useSensor,
-    useSensors,
-} from '@dnd-kit/core';
-import { restrictToWindowEdges } from '@dnd-kit/modifiers';
-import { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';
-import { Asset, useAssetChooser, useAssetUpload, useEditorState } from '@frontify/app-bridge';
-import {
-    AssetInput,
-    AssetInputSize,
-    Flyout,
-    FlyoutPlacement,
-    LegacyTooltip as Tooltip,
-    TooltipPosition,
-} from '@frontify/fondue';
-
-import { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';
-import { type AttachmentsProps } from './types';
-import { AttachmentsButtonTrigger } from './AttachmentsButtonTrigger';
-
-export const Attachments = ({
-    items = [],
-    onDelete,
-    onReplaceWithBrowse,
-    onReplaceWithUpload,
-    onBrowse,
-    onUpload,
-    onSorted,
-    appBridge,
-    triggerComponent: TriggerComponent = AttachmentsButtonTrigger,
-    isOpen,
-    onOpenChange,
-}: AttachmentsProps) => {
-    const [internalItems, setInternalItems] = useState<Asset[]>(items);
-    const [isFlyoutOpenInternal, setIsFlyoutOpenInternal] = useState(false);
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));
-    const [draggedAssetId, setDraggedAssetId] = useState<number | undefined>(undefined);
-    const [isUploadLoading, setIsUploadLoading] = useState(false);
-    const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);
-    const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);
-    const isEditing = useEditorState(appBridge);
-    const { openAssetChooser, closeAssetChooser } = useAssetChooser(appBridge);
-    const isControllingStateExternally = isOpen !== undefined;
-    const isFlyoutOpen = isControllingStateExternally ? isOpen : isFlyoutOpenInternal;
-
-    const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);
-
-    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({
-        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),
-    });
-
-    const handleFlyoutOpenChange = (isOpen: boolean) => {
-        const stateSetter = isControllingStateExternally ? onOpenChange : setIsFlyoutOpenInternal;
-
-        stateSetter?.(isOpen);
-    };
-
-    useEffect(() => {
-        setInternalItems(items);
-    }, [items]);
-
-    useEffect(() => {
-        if (selectedFiles) {
-            setIsUploadLoading(true);
-            uploadFile(selectedFiles);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedFiles]);
-
-    useEffect(() => {
-        const uploadDone = async () => {
-            if (doneAll) {
-                await onUpload(uploadResults);
-                setIsUploadLoading(false);
-            }
-        };
-        uploadDone();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [doneAll, uploadResults]);
-
-    const onOpenAssetChooser = () => {
-        handleFlyoutOpenChange(false);
-        openAssetChooser(
-            (result: Asset[]) => {
-                onBrowse(result);
-                closeAssetChooser();
-                handleFlyoutOpenChange(true);
-            },
-            {
-                multiSelection: true,
-                selectedValueIds: internalItems.map((internalItem) => internalItem.id),
-            },
-        );
-    };
-
-    const onReplaceItemWithBrowse = (toReplace: Asset) => {
-        handleFlyoutOpenChange(false);
-        openAssetChooser(
-            async (result: Asset[]) => {
-                handleFlyoutOpenChange(true);
-                closeAssetChooser();
-                setAssetIdsLoading([...assetIdsLoading, toReplace.id]);
-                await onReplaceWithBrowse(toReplace, result[0]);
-                setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));
-            },
-            {
-                multiSelection: false,
-                selectedValueIds: internalItems.map((internalItem) => internalItem.id),
-            },
-        );
-    };
-
-    const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {
-        setAssetIdsLoading([...assetIdsLoading, toReplace.id]);
-        await onReplaceWithUpload(toReplace, uploadedAsset);
-        setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));
-    };
-
-    const handleDragStart = (event: DragStartEvent) => {
-        const { active } = event;
-        setDraggedAssetId(active.id as number);
-    };
-
-    const handleDragEnd = (event: DragEndEvent) => {
-        const { active, over } = event;
-        if (over && active.id !== over.id && internalItems) {
-            const oldIndex = internalItems.findIndex((i) => i.id === active.id);
-            const newIndex = internalItems.findIndex((i) => i.id === over.id);
-            const sortedItems = arrayMove(internalItems, oldIndex, newIndex);
-            setInternalItems(sortedItems);
-            onSorted(sortedItems);
-        }
-        setDraggedAssetId(undefined);
-    };
-
-    return isEditing || (internalItems?.length ?? 0) > 0 ? (
-        <Tooltip
-            withArrow
-            position={TooltipPosition.Top}
-            content="Attachments"
-            disabled={isFlyoutOpen}
-            enterDelay={500}
-            triggerElement={
-                <div data-test-id="attachments-flyout-button">
-                    <Flyout
-                        placement={FlyoutPlacement.BottomRight}
-                        onOpenChange={(isOpen) => handleFlyoutOpenChange(!!draggedItem ? true : isOpen)}
-                        isOpen={isFlyoutOpen}
-                        hug={false}
-                        fitContent
-                        legacyFooter={false}
-                        trigger={(triggerProps, triggerRef) => (
-                            <TriggerComponent
-                                isFlyoutOpen={isFlyoutOpen}
-                                triggerProps={triggerProps}
-                                triggerRef={triggerRef as MutableRefObject<HTMLButtonElement>}
-                            >
-                                <div>{items.length > 0 ? items.length : 'Add'}</div>
-                            </TriggerComponent>
-                        )}
-                    >
-                        <div className="tw-w-[300px]" data-test-id="attachments-flyout-content">
-                            {internalItems.length > 0 && (
-                                <DndContext
-                                    sensors={sensors}
-                                    collisionDetection={closestCenter}
-                                    onDragStart={handleDragStart}
-                                    onDragEnd={handleDragEnd}
-                                    modifiers={[restrictToWindowEdges]}
-                                >
-                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>
-                                        <div className="tw-border-b tw-border-b-line">
-                                            {internalItems.map((item) => (
-                                                <SortableAttachmentItem
-                                                    isEditing={isEditing}
-                                                    isLoading={assetIdsLoading.includes(item.id)}
-                                                    key={item.id}
-                                                    item={item}
-                                                    onDelete={() => onDelete(item)}
-                                                    onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}
-                                                    onReplaceWithUpload={(uploadedAsset: Asset) =>
-                                                        onReplaceItemWithUpload(item, uploadedAsset)
-                                                    }
-                                                    onDownload={() =>
-                                                        appBridge.dispatch({
-                                                            name: 'downloadAsset',
-                                                            payload: item,
-                                                        })
-                                                    }
-                                                />
-                                            ))}
-                                        </div>
-                                    </SortableContext>
-                                    <DragOverlay>
-                                        {draggedItem && (
-                                            <AttachmentItem
-                                                isOverlay={true}
-                                                isEditing={isEditing}
-                                                key={draggedAssetId}
-                                                item={draggedItem}
-                                                isDragging={true}
-                                                onDelete={() => onDelete(draggedItem)}
-                                                onReplaceWithBrowse={() => onReplaceItemWithBrowse(draggedItem)}
-                                                onReplaceWithUpload={(uploadedAsset: Asset) =>
-                                                    onReplaceItemWithUpload(draggedItem, uploadedAsset)
-                                                }
-                                            />
-                                        )}
-                                    </DragOverlay>
-                                </DndContext>
-                            )}
-                            {isEditing && (
-                                <div className="tw-px-5 tw-py-3">
-                                    <div className="tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4">
-                                        Add attachments
-                                    </div>
-                                    <AssetInput
-                                        isLoading={isUploadLoading}
-                                        size={AssetInputSize.Small}
-                                        onUploadClick={(fileList) => setSelectedFiles(fileList)}
-                                        onLibraryClick={onOpenAssetChooser}
-                                    />
-                                </div>
-                            )}
-                        </div>
-                    </Flyout>
-                </div>
-            }
-        />
-    ) : null;
-};