@frontify/guideline-blocks-settings 0.27.0 → 0.28.1

package/src/components/Attachments/AttachmentItem.tsx

@@ -0,0 +1,257 @@
+/* (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 { useFocusRing } from '@react-aria/focus';
+
+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';
+
+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,
+        },
+        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 download = (url: string, filename: string) => {
+            fetch(url).then((response) => {
+                response.blob().then((blob) => {
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = filename;
+                    a.click();
+                });
+            });
+        };
+
+        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);
+
+        return (
+            <button
+                aria-label="Download attachment"
+                data-test-id="attachments-item"
+                onClick={() => download(item.genericUrl, item.fileName)}
+                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

@@ -0,0 +1,151 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
+import { mount } from 'cypress/react18';
+import { Attachments as AttachmentsComponent } from './Attachments';
+import { AttachmentsProps } from './types';
+import { SinonStub } from 'cypress/types/sinon';
+
+const FlyoutButtonSelector = '[data-test-id="attachments-flyout-button"]';
+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}
+        />
+    );
+};
+
+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', () => {
+        const appBridge = getAppBridgeBlockStub({
+            editorState: true,
+        });
+        (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

@@ -0,0 +1,221 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useEffect, useState } from 'react';
+import {
+    DndContext,
+    DragEndEvent,
+    DragOverlay,
+    DragStartEvent,
+    KeyboardSensor,
+    PointerSensor,
+    closestCenter,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
+import { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';
+import { Asset, useAssetUpload, useEditorState } from '@frontify/app-bridge';
+import {
+    AssetInput,
+    AssetInputSize,
+    Flyout,
+    FlyoutPlacement,
+    IconCaretDown12,
+    IconPaperclip16,
+    Tooltip,
+    TooltipPosition,
+} from '@frontify/fondue';
+import { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';
+import { AttachmentsProps } from './types';
+import { restrictToWindowEdges } from '@dnd-kit/modifiers';
+
+export const Attachments = ({
+    items = [],
+    onDelete,
+    onReplaceWithBrowse,
+    onReplaceWithUpload,
+    onBrowse,
+    onUpload,
+    onSorted,
+    appBridge,
+}: AttachmentsProps) => {
+    const [internalItems, setInternalItems] = useState<Asset[]>(items);
+    const [isFlyoutOpen, setIsFlyoutOpen] = 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 draggedItem = internalItems?.find((item) => item.id === draggedAssetId);
+
+    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({
+        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),
+    });
+
+    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 = () => {
+        setIsFlyoutOpen(false);
+        appBridge.openAssetChooser(
+            (result: Asset[]) => {
+                onBrowse(result);
+                appBridge.closeAssetChooser();
+                setIsFlyoutOpen(true);
+            },
+            {
+                multiSelection: true,
+                selectedValueIds: internalItems.map((internalItem) => internalItem.id),
+            }
+        );
+    };
+
+    const onReplaceItemWithBrowse = (toReplace: Asset) => {
+        setIsFlyoutOpen(false);
+        appBridge.openAssetChooser(
+            async (result: Asset[]) => {
+                setIsFlyoutOpen(true);
+                appBridge.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) => setIsFlyoutOpen(!!draggedItem ? true : isOpen)}
+                        isOpen={isFlyoutOpen}
+                        hug={false}
+                        fitContent
+                        legacyFooter={false}
+                        trigger={
+                            <div className="tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line">
+                                <IconPaperclip16 />
+                                <div>{items.length > 0 ? items.length : 'Add'}</div>
+                                <IconCaretDown12 />
+                            </div>
+                        }
+                    >
+                        <div className="tw-w-[300px]">
+                            {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)
+                                                    }
+                                                />
+                                            ))}
+                                        </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;
+};

package/src/components/Attachments/index.ts

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

package/src/components/Attachments/types.ts

@@ -0,0 +1,30 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock, Asset } from '@frontify/app-bridge';
+
+export type AttachmentsProps = {
+    items?: Asset[];
+    appBridge: AppBridgeBlock;
+    onReplaceWithUpload: (attachmentToReplace: Asset, newAsset: Asset) => Promise<void>;
+    onReplaceWithBrowse: (attachmentToReplace: Asset, newAsset: Asset) => Promise<void>;
+    onDelete: (attachmentToDelete: Asset) => void;
+    onUpload: (uploadedAttachments: Asset[]) => Promise<void>;
+    onBrowse: (browserAttachments: Asset[]) => void;
+    onSorted: (sortedAttachments: Asset[]) => void;
+};
+
+export type AttachmentItemProps = SortableAttachmentItemProps & {
+    isDragging?: boolean;
+    transformStyle?: Record<string, unknown>;
+    draggableProps?: Record<string, unknown>;
+    isOverlay?: boolean;
+};
+
+export type SortableAttachmentItemProps = {
+    item: Asset;
+    isEditing: boolean;
+    onDelete: () => void;
+    isLoading?: boolean;
+    onReplaceWithBrowse: () => void;
+    onReplaceWithUpload: (uploadedAsset: Asset) => void;
+};