@frontify/guideline-blocks-settings 0.29.16 → 0.30.0

package/dist/components/Attachments/Attachments.es.js.map

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

package/dist/components/Attachments/AttachmentsButtonTrigger.es.js

@@ -0,0 +1,21 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { IconPaperclip16 as n, IconCaretDown12 as s } from "@frontify/fondue";
+import { joinClassNames as i } from "../../utilities/react/joinClassNames.es.js";
+const x = ({ children: e, isFlyoutOpen: r }) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: i([
+      "tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line",
+      r ? "tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed" : "tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed"
+    ]),
+    children: [
+      /* @__PURE__ */ t(n, {}),
+      e,
+      /* @__PURE__ */ t(s, {})
+    ]
+  }
+);
+export {
+  x as AttachmentsButtonTrigger
+};
+//# sourceMappingURL=AttachmentsButtonTrigger.es.js.map

package/dist/components/Attachments/AttachmentsButtonTrigger.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentsButtonTrigger.es.js","sources":["../../../src/components/Attachments/AttachmentsButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentsTriggerProps } from './types';\n\nexport const AttachmentsButtonTrigger = ({ children, isFlyoutOpen }: AttachmentsTriggerProps) => (\n    <div\n        className={joinClassNames([\n            'tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line',\n            isFlyoutOpen\n                ? 'tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed'\n                : 'tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',\n        ])}\n    >\n        <IconPaperclip16 />\n        {children}\n        <IconCaretDown12 />\n    </div>\n);\n"],"names":["AttachmentsButtonTrigger","children","isFlyoutOpen","jsxs","joinClassNames","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;AAQO,MAAMA,IAA2B,CAAC,EAAE,UAAAC,GAAU,cAAAC,EACjD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAe;AAAA,MACtB;AAAA,MACAF,IACM,kEACA;AAAA,IAAA,CACT;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAgB,EAAA;AAAA,MAChBL;AAAA,wBACAM,GAAgB,EAAA;AAAA,IAAA;AAAA,EAAA;AACrB;"}

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

@@ -1,73 +1,77 @@
-import { jsx as l, Fragment as g, jsxs as F } from "react/jsx-runtime";
-import { useState as a, useRef as b, useEffect as h } from "react";
-import { Toolbar as j } from "./Toolbar.es.js";
-import { joinClassNames as c } from "../../utilities/react/joinClassNames.es.js";
-const R = ({
-  children: r,
-  toolbarFlyoutItems: p,
-  toolbarItems: e,
-  shouldHideWrapper: w,
-  shouldHideComponent: n = !1,
-  isDragging: u,
-  shouldFillContainer: f,
-  outlineOffset: o = 2,
-  shouldBeShown: i = !1
+import { jsx as o, Fragment as O, jsxs as b } from "react/jsx-runtime";
+import { useState as p, useRef as F } from "react";
+import { Toolbar as j } from "./Toolbar/Toolbar.es.js";
+import { joinClassNames as r } from "../../utilities/react/joinClassNames.es.js";
+const A = ({
+  children: i,
+  toolbarFlyoutItems: w,
+  toolbarItems: t,
+  shouldHideWrapper: c,
+  shouldHideComponent: u = !1,
+  isDragging: f,
+  shouldFillContainer: m,
+  outlineOffset: e = 2,
+  shouldBeShown: n = !1,
+  showAttachments: y = !1
 }) => {
-  const [t, m] = a(i), [y, s] = a(!1), v = b(null);
-  if (h(() => {
-    t || s(!0);
-  }, [t]), w)
-    return /* @__PURE__ */ l(g, { children: r });
-  const x = e == null ? void 0 : e.filter((d) => d !== void 0);
-  return /* @__PURE__ */ F(
+  const [s, h] = p(n), [l, d] = p(!1), x = F(null);
+  if (c)
+    return /* @__PURE__ */ o(O, { children: i });
+  const g = t == null ? void 0 : t.filter((v) => v !== void 0), a = s || l || n;
+  return /* @__PURE__ */ b(
     "div",
     {
-      ref: v,
-      onFocus: () => s(!1),
-      onPointerEnter: () => s(!1),
+      ref: x,
       "data-test-id": "block-item-wrapper",
       style: {
-        outlineOffset: o
+        outlineOffset: e
       },
-      className: c([
+      className: r([
         "tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse",
-        f && "tw-flex-1 tw-h-full tw-w-full",
+        m && "tw-flex-1 tw-h-full tw-w-full",
         "hover:tw-outline focus-within:tw-outline",
-        (t || i) && "tw-outline",
-        n && "tw-opacity-0"
+        a && "tw-outline",
+        u && "tw-opacity-0"
       ]),
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
-              right: -1 - o,
-              bottom: `calc(100% - ${2 + o}px)`
+              right: -1 - e,
+              bottom: `calc(100% - ${2 + e}px)`
             },
-            className: c([
+            className: r([
               "tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]",
               "group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
-              (t || i) && "tw-opacity-100"
+              "tw-flex tw-justify-end",
+              a && "tw-opacity-100"
             ]),
-            children: /* @__PURE__ */ l(
+            children: /* @__PURE__ */ o(
               j,
               {
-                isFlyoutOpen: t,
-                isFlyoutDisabled: y,
-                setIsFlyoutOpen: m,
-                flyoutItems: p,
-                items: x,
-                isDragging: u
+                flyoutMenu: {
+                  items: w,
+                  isOpen: s,
+                  onOpenChange: h
+                },
+                attachments: {
+                  isEnabled: y,
+                  isOpen: l,
+                  onOpenChange: d
+                },
+                items: g,
+                isDragging: f
               }
             )
           }
         ),
-        r
+        i
       ]
     }
   );
 };
 export {
-  R as BlockItemWrapper
+  A as BlockItemWrapper
 };
 //# sourceMappingURL=BlockItemWrapper.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement, useEffect, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities';\nimport { Toolbar } from './Toolbar';\nimport { BlockItemWrapperProps, ToolbarItem } from './types';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarFlyoutItems,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging,\n    shouldFillContainer,\n    outlineOffset = 2,\n    shouldBeShown = false,\n}: BlockItemWrapperProps): ReactElement => {\n    const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);\n    const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!isFlyoutOpen) {\n            // This prevents automatic refocusing of the trigger element\n            setIsFlyoutDisabled(true);\n        }\n    }, [isFlyoutOpen]);\n\n    if (shouldHideWrapper) {\n        // eslint-disable-next-line react/jsx-no-useless-fragment\n        return <>{children}</>;\n    }\n\n    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n    return (\n        <div\n            ref={wrapperRef}\n            onFocus={() => setIsFlyoutDisabled(false)}\n            onPointerEnter={() => setIsFlyoutDisabled(false)}\n            data-test-id=\"block-item-wrapper\"\n            style={{\n                outlineOffset,\n            }}\n            className={joinClassNames([\n                'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n                shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                'hover:tw-outline focus-within:tw-outline',\n                (isFlyoutOpen || shouldBeShown) && 'tw-outline',\n                shouldHideComponent && 'tw-opacity-0',\n            ])}\n        >\n            <div\n                style={{\n                    right: -1 - outlineOffset,\n                    bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                }}\n                className={joinClassNames([\n                    'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n                    'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                    (isFlyoutOpen || shouldBeShown) && 'tw-opacity-100',\n                ])}\n            >\n                <Toolbar\n                    isFlyoutOpen={isFlyoutOpen}\n                    isFlyoutDisabled={isFlyoutDisabled}\n                    setIsFlyoutOpen={setIsFlyoutOpen}\n                    flyoutItems={toolbarFlyoutItems}\n                    items={items}\n                    isDragging={isDragging}\n                />\n            </div>\n            {children}\n        </div>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarFlyoutItems","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","isFlyoutOpen","setIsFlyoutOpen","useState","isFlyoutDisabled","setIsFlyoutDisabled","wrapperRef","useRef","useEffect","items","item","jsxs","joinClassNames","jsx","Toolbar"],"mappings":";;;;AAOO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AACpB,MAA2C;AACvC,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASH,CAAa,GACxD,CAACI,GAAkBC,CAAmB,IAAIF,EAAS,EAAK,GACxDG,IAAaC,EAAuB,IAAI;AAS9C,MAPAC,EAAU,MAAM;AACZ,IAAKP,KAEDI,EAAoB,EAAI;AAAA,EAC5B,GACD,CAACJ,CAAY,CAAC,GAEbN;AAEA,kCAAU,UAAAH,EAAS,CAAA;AAGvB,QAAMiB,IAAQf,KAAA,gBAAAA,EAAc,OAAO,CAACgB,MAA8BA,MAAS;AAGvE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,SAAS,MAAMD,EAAoB,EAAK;AAAA,MACxC,gBAAgB,MAAMA,EAAoB,EAAK;AAAA,MAC/C,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAN;AAAA,MACJ;AAAA,MACA,WAAWa,EAAe;AAAA,QACtB;AAAA,QACAd,KAAuB;AAAA,QACvB;AAAA,SACCG,KAAgBD,MAAkB;AAAA,QACnCJ,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKd;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWa,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,eACCX,KAAgBD,MAAkB;AAAA,YAAA,CACtC;AAAA,YAED,UAAA,gBAAAa;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,cAAAb;AAAA,gBACA,kBAAAG;AAAA,gBACA,iBAAAF;AAAA,gBACA,aAAaT;AAAA,gBACb,OAAAgB;AAAA,gBACA,YAAAZ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { Toolbar, type ToolbarItem } from './Toolbar';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarFlyoutItems,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging,\n    shouldFillContainer,\n    outlineOffset = 2,\n    shouldBeShown = false,\n    showAttachments = false,\n}: BlockItemWrapperProps): ReactElement => {\n    const [isMenuFlyoutOpen, setIsMenuFlyoutOpen] = useState(shouldBeShown);\n    const [isAttachmentFlyoutOpen, setIsAttachmentFlyoutOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    if (shouldHideWrapper) {\n        // eslint-disable-next-line react/jsx-no-useless-fragment\n        return <>{children}</>;\n    }\n\n    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n    const shouldToolbarBeVisible = isMenuFlyoutOpen || isAttachmentFlyoutOpen || shouldBeShown;\n\n    return (\n        <div\n            ref={wrapperRef}\n            data-test-id=\"block-item-wrapper\"\n            style={{\n                outlineOffset,\n            }}\n            className={joinClassNames([\n                'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n                shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                'hover:tw-outline focus-within:tw-outline',\n                shouldToolbarBeVisible && 'tw-outline',\n                shouldHideComponent && 'tw-opacity-0',\n            ])}\n        >\n            <div\n                style={{\n                    right: -1 - outlineOffset,\n                    bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                }}\n                className={joinClassNames([\n                    'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n                    'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                    'tw-flex tw-justify-end',\n                    shouldToolbarBeVisible && 'tw-opacity-100',\n                ])}\n            >\n                <Toolbar\n                    flyoutMenu={{\n                        items: toolbarFlyoutItems,\n                        isOpen: isMenuFlyoutOpen,\n                        onOpenChange: setIsMenuFlyoutOpen,\n                    }}\n                    attachments={{\n                        isEnabled: showAttachments,\n                        isOpen: isAttachmentFlyoutOpen,\n                        onOpenChange: setIsAttachmentFlyoutOpen,\n                    }}\n                    items={items}\n                    isDragging={isDragging}\n                />\n            </div>\n            {children}\n        </div>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarFlyoutItems","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","isMenuFlyoutOpen","setIsMenuFlyoutOpen","useState","isAttachmentFlyoutOpen","setIsAttachmentFlyoutOpen","wrapperRef","useRef","items","item","shouldToolbarBeVisible","jsxs","joinClassNames","jsx","Toolbar"],"mappings":";;;;AASO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AACtB,MAA2C;AACvC,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAASJ,CAAa,GAChE,CAACK,GAAwBC,CAAyB,IAAIF,EAAS,EAAK,GACpEG,IAAaC,EAAuB,IAAI;AAE9C,MAAIb;AAEA,kCAAU,UAAAH,EAAS,CAAA;AAGvB,QAAMiB,IAAQf,KAAA,gBAAAA,EAAc,OAAO,CAACgB,MAA8BA,MAAS,SAErEC,IAAyBT,KAAoBG,KAA0BL;AAGzE,SAAA,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAR;AAAA,MACJ;AAAA,MACA,WAAWc,EAAe;AAAA,QACtB;AAAA,QACAf,KAAuB;AAAA,QACvB;AAAA,QACAa,KAA0B;AAAA,QAC1Bf,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAkB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKf;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWc,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,cACA;AAAA,cACAF,KAA0B;AAAA,YAAA,CAC7B;AAAA,YAED,UAAA,gBAAAG;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,YAAY;AAAA,kBACR,OAAOtB;AAAA,kBACP,QAAQS;AAAA,kBACR,cAAcC;AAAA,gBAClB;AAAA,gBACA,aAAa;AAAA,kBACT,WAAWF;AAAA,kBACX,QAAQI;AAAA,kBACR,cAAcC;AAAA,gBAClB;AAAA,gBACA,OAAAG;AAAA,gBACA,YAAAZ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

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

@@ -0,0 +1,123 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { LegacyTooltip as a, TooltipPosition as s, Flyout as h, IconDotsHorizontal16 as b, ActionMenu as O, MenuItemContentSize as T } from "@frontify/fondue";
+import { DEFAULT_DRAGGING_TOOLTIP as v, DEFAULT_DRAG_TOOLTIP as f } from "../constants.es.js";
+import { ToolbarSegment as c } from "./ToolbarSegment.es.js";
+import { ToolbarAttachments as C } from "./ToolbarAttachments.es.js";
+import { getToolbarButtonClassNames as d } from "./helpers.es.js";
+const y = ({ items: m, flyoutMenu: r, attachments: l, isDragging: o }) => /* @__PURE__ */ p(
+  "div",
+  {
+    "data-test-id": "block-item-wrapper-toolbar",
+    className: "tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate",
+    children: [
+      l.isEnabled && /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
+        C,
+        {
+          isOpen: l.isOpen && !o,
+          onOpenChange: l.onOpenChange
+        }
+      ) }),
+      /* @__PURE__ */ p(c, { children: [
+        m.map(
+          (t, n) => "draggableProps" in t ? /* @__PURE__ */ e(
+            a,
+            {
+              withArrow: !0,
+              hoverDelay: 0,
+              enterDelay: 300,
+              open: o,
+              position: s.Top,
+              content: /* @__PURE__ */ e("div", { children: o ? v : t.tooltip ?? f }),
+              triggerElement: /* @__PURE__ */ e(
+                "button",
+                {
+                  ref: t.setActivatorNodeRef,
+                  "data-test-id": "block-item-wrapper-toolbar-btn",
+                  ...t.draggableProps,
+                  className: d("grab", o),
+                  children: t.icon
+                }
+              )
+            },
+            n
+          ) : /* @__PURE__ */ e(
+            a,
+            {
+              withArrow: !0,
+              enterDelay: 300,
+              hoverDelay: 0,
+              disabled: o,
+              position: s.Top,
+              content: /* @__PURE__ */ e("div", { children: t.tooltip ?? "" }),
+              triggerElement: /* @__PURE__ */ e(
+                "button",
+                {
+                  "data-test-id": "block-item-wrapper-toolbar-btn",
+                  onClick: t.onClick,
+                  className: d("pointer"),
+                  children: t.icon
+                }
+              )
+            },
+            n
+          )
+        ),
+        r.items.length > 0 && /* @__PURE__ */ e(
+          a,
+          {
+            withArrow: !0,
+            hoverDelay: 0,
+            enterDelay: 300,
+            disabled: o || r.isOpen,
+            position: s.Top,
+            content: /* @__PURE__ */ e("div", { children: "Options" }),
+            triggerElement: /* @__PURE__ */ e("div", { className: "tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative", children: /* @__PURE__ */ e(
+              h,
+              {
+                isOpen: r.isOpen && !o,
+                legacyFooter: !1,
+                fitContent: !0,
+                hug: !1,
+                onOpenChange: r.onOpenChange,
+                trigger: /* @__PURE__ */ e(
+                  "div",
+                  {
+                    "data-test-id": "block-item-wrapper-toolbar-flyout",
+                    className: d(
+                      "pointer",
+                      r.isOpen && !o
+                    ),
+                    children: /* @__PURE__ */ e(b, {})
+                  }
+                ),
+                children: /* @__PURE__ */ e(
+                  O,
+                  {
+                    menuBlocks: r.items.map((t, n) => ({
+                      id: n.toString(),
+                      menuItems: t.map((i, w) => ({
+                        id: n.toString() + w.toString(),
+                        size: T.XSmall,
+                        title: i.title,
+                        style: i.style,
+                        onClick: () => {
+                          r.onOpenChange(!1), i.onClick();
+                        },
+                        initialValue: !0,
+                        decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: i.icon })
+                      }))
+                    }))
+                  }
+                )
+              }
+            ) })
+          }
+        )
+      ] })
+    ]
+  }
+);
+export {
+  y as Toolbar
+};
+//# sourceMappingURL=Toolbar.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    LegacyTooltip as Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\n\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../constants';\n\nimport { ToolbarSegment } from './ToolbarSegment';\nimport { ToolbarAttachments } from './ToolbarAttachments';\nimport { getToolbarButtonClassNames } from './helpers';\nimport { type ToolbarProps } from './types';\n\nexport const Toolbar = ({ items, flyoutMenu, attachments, isDragging }: ToolbarProps) => {\n    return (\n        <div\n            data-test-id=\"block-item-wrapper-toolbar\"\n            className=\"tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate\"\n        >\n            {attachments.isEnabled && (\n                <ToolbarSegment>\n                    <ToolbarAttachments\n                        isOpen={attachments.isOpen && !isDragging}\n                        onOpenChange={attachments.onOpenChange}\n                    />\n                </ToolbarSegment>\n            )}\n            <ToolbarSegment>\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={getToolbarButtonClassNames('grab', isDragging)}\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={getToolbarButtonClassNames('pointer')}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ),\n                )}\n                {flyoutMenu.items.length > 0 && (\n                    <Tooltip\n                        withArrow\n                        hoverDelay={0}\n                        enterDelay={300}\n                        disabled={isDragging || flyoutMenu.isOpen}\n                        position={TooltipPosition.Top}\n                        content={<div>Options</div>}\n                        triggerElement={\n                            <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative\">\n                                <Flyout\n                                    isOpen={flyoutMenu.isOpen && !isDragging}\n                                    legacyFooter={false}\n                                    fitContent\n                                    hug={false}\n                                    onOpenChange={flyoutMenu.onOpenChange}\n                                    trigger={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className={getToolbarButtonClassNames(\n                                                'pointer',\n                                                flyoutMenu.isOpen && !isDragging,\n                                            )}\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                >\n                                    <ActionMenu\n                                        menuBlocks={flyoutMenu.items.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                                                    flyoutMenu.onOpenChange(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                    />\n                )}\n            </ToolbarSegment>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutMenu","attachments","isDragging","jsxs","ToolbarSegment","jsx","ToolbarAttachments","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","getToolbarButtonClassNames","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":";;;;;;AAkBO,MAAMA,IAAU,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,aAAAC,GAAa,YAAAC,QAElD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAA;AAAA,MAAYF,EAAA,+BACRG,GACG,EAAA,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,QAAQL,EAAY,UAAU,CAACC;AAAA,UAC/B,cAAcD,EAAY;AAAA,QAAA;AAAA,MAAA,GAElC;AAAA,wBAEHG,GACI,EAAA,UAAA;AAAA,QAAML,EAAA;AAAA,UAAI,CAACQ,GAAMC,MACd,oBAAoBD,IAChB,gBAAAF;AAAA,YAACI;AAAAA,YAAA;AAAA,cAEG,WAAS;AAAA,cACT,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,MAAMP;AAAA,cACN,UAAUQ,EAAgB;AAAA,cAC1B,SACK,gBAAAL,EAAA,OAAA,EACI,cAAaM,IAA2BJ,EAAK,WAAWK,GAC7D;AAAA,cAEJ,gBACI,gBAAAP;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,KAAKE,EAAK;AAAA,kBACV,gBAAa;AAAA,kBACZ,GAAGA,EAAK;AAAA,kBACT,WAAWM,EAA2B,QAAQX,CAAU;AAAA,kBAEvD,UAAKK,EAAA;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,YAnBCC;AAAA,UAAA,IAuBT,gBAAAH;AAAA,YAACI;AAAAA,YAAA;AAAA,cAEG,WAAS;AAAA,cACT,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,UAAUP;AAAA,cACV,UAAUQ,EAAgB;AAAA,cAC1B,SAAS,gBAAAL,EAAC,OAAK,EAAA,UAAAE,EAAK,WAAW,IAAG;AAAA,cAClC,gBACI,gBAAAF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,gBAAa;AAAA,kBACb,SAASE,EAAK;AAAA,kBACd,WAAWM,EAA2B,SAAS;AAAA,kBAE9C,UAAKN,EAAA;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,YAdCC;AAAA,UAgBT;AAAA,QAER;AAAA,QACCR,EAAW,MAAM,SAAS,KACvB,gBAAAK;AAAA,UAACI;AAAAA,UAAA;AAAA,YACG,WAAS;AAAA,YACT,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAUP,KAAcF,EAAW;AAAA,YACnC,UAAUU,EAAgB;AAAA,YAC1B,SAAU,gBAAAL,EAAA,OAAA,EAAI,UAAO,UAAA,CAAA;AAAA,YACrB,gBACI,gBAAAA,EAAC,OAAI,EAAA,WAAU,yDACX,UAAA,gBAAAA;AAAA,cAACS;AAAA,cAAA;AAAA,gBACG,QAAQd,EAAW,UAAU,CAACE;AAAA,gBAC9B,cAAc;AAAA,gBACd,YAAU;AAAA,gBACV,KAAK;AAAA,gBACL,cAAcF,EAAW;AAAA,gBACzB,SACI,gBAAAK;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,gBAAa;AAAA,oBACb,WAAWQ;AAAA,sBACP;AAAA,sBACAb,EAAW,UAAU,CAACE;AAAA,oBAC1B;AAAA,oBAEA,4BAACa,GAAqB,EAAA;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBAGJ,UAAA,gBAAAV;AAAA,kBAACW;AAAA,kBAAA;AAAA,oBACG,YAAYhB,EAAW,MAAM,IAAI,CAACiB,GAAOC,OAAgB;AAAA,sBACrD,IAAIA,EAAW,SAAS;AAAA,sBACxB,WAAWD,EAAM,IAAI,CAACV,GAAMY,OAAe;AAAA,wBACvC,IAAID,EAAW,aAAaC,EAAU,SAAS;AAAA,wBAC/C,MAAMC,EAAoB;AAAA,wBAC1B,OAAOb,EAAK;AAAA,wBACZ,OAAOA,EAAK;AAAA,wBACZ,SAAS,MAAM;AACX,0BAAAP,EAAW,aAAa,EAAK,GAC7BO,EAAK,QAAQ;AAAA,wBACjB;AAAA,wBACA,cAAc;AAAA,wBACd,WAAY,gBAAAF,EAAA,OAAA,EAAI,WAAU,WAAW,YAAK,MAAK;AAAA,sBAAA,EACjD;AAAA,oBAAA,EACJ;AAAA,kBAAA;AAAA,gBACN;AAAA,cAAA;AAAA,YAAA,GAER;AAAA,UAAA;AAAA,QAER;AAAA,MAAA,GAER;AAAA,IAAA;AAAA,EAAA;AAAA;"}

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

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import { ToolbarAttachmentsTrigger as p } from "./ToolbarAttachmentsTrigger.es.js";
+import { useAttachmentsContext as h } from "../../../hooks/useAttachments.es.js";
+import { Attachments as i } from "../../Attachments/Attachments.es.js";
+const f = ({ isOpen: o, onOpenChange: n }) => {
+  const { appBridge: r, attachments: m, onAttachmentsAdd: t, onAttachmentDelete: a, onAttachmentReplace: e, onAttachmentsSorted: c } = h();
+  return /* @__PURE__ */ s(
+    i,
+    {
+      onUpload: t,
+      onDelete: a,
+      onReplaceWithBrowse: e,
+      onReplaceWithUpload: e,
+      onSorted: c,
+      onBrowse: t,
+      items: m,
+      appBridge: r,
+      triggerComponent: p,
+      isOpen: o,
+      onOpenChange: n
+    }
+  );
+};
+export {
+  f as ToolbarAttachments
+};
+//# sourceMappingURL=ToolbarAttachments.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarAttachments.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/ToolbarAttachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Attachments } from '../../Attachments';\nimport { useAttachmentsContext } from '../../../hooks';\n\nimport { type ToolbarFlyoutState } from './types';\n\nimport { ToolbarAttachmentsTrigger } from './ToolbarAttachmentsTrigger';\n\nexport const ToolbarAttachments = ({ isOpen, onOpenChange }: ToolbarFlyoutState) => {\n    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =\n        useAttachmentsContext();\n\n    return (\n        <Attachments\n            onUpload={onAttachmentsAdd}\n            onDelete={onAttachmentDelete}\n            onReplaceWithBrowse={onAttachmentReplace}\n            onReplaceWithUpload={onAttachmentReplace}\n            onSorted={onAttachmentsSorted}\n            onBrowse={onAttachmentsAdd}\n            items={attachments}\n            appBridge={appBridge}\n            triggerComponent={ToolbarAttachmentsTrigger}\n            isOpen={isOpen}\n            onOpenChange={onOpenChange}\n        />\n    );\n};\n"],"names":["ToolbarAttachments","isOpen","onOpenChange","appBridge","attachments","onAttachmentsAdd","onAttachmentDelete","onAttachmentReplace","onAttachmentsSorted","useAttachmentsContext","jsx","Attachments","ToolbarAttachmentsTrigger"],"mappings":";;;;AASO,MAAMA,IAAqB,CAAC,EAAE,QAAAC,GAAQ,cAAAC,QAAuC;AAC1E,QAAA,EAAE,WAAAC,GAAW,aAAAC,GAAa,kBAAAC,GAAkB,oBAAAC,GAAoB,qBAAAC,GAAqB,qBAAAC,MACvFC;AAGA,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,UAAUN;AAAA,MACV,UAAUC;AAAA,MACV,qBAAqBC;AAAA,MACrB,qBAAqBA;AAAA,MACrB,UAAUC;AAAA,MACV,UAAUH;AAAA,MACV,OAAOD;AAAA,MACP,WAAAD;AAAA,MACA,kBAAkBS;AAAA,MAClB,QAAAX;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,12 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { IconPaperclip16 as s, IconCaretDown12 as a } from "@frontify/fondue";
+import { getToolbarButtonClassNames as m } from "./helpers.es.js";
+const p = ({ children: r, isFlyoutOpen: t }) => /* @__PURE__ */ e("div", { className: m("pointer", t), children: [
+  /* @__PURE__ */ o(s, {}),
+  r,
+  /* @__PURE__ */ o(a, {})
+] });
+export {
+  p as ToolbarAttachmentsTrigger
+};
+//# sourceMappingURL=ToolbarAttachmentsTrigger.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarAttachmentsTrigger.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/ToolbarAttachmentsTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\nimport { type AttachmentsTriggerProps } from '../../Attachments/types';\n\nimport { getToolbarButtonClassNames } from './helpers';\n\nexport const ToolbarAttachmentsTrigger = ({ children, isFlyoutOpen }: AttachmentsTriggerProps) => (\n    <div className={getToolbarButtonClassNames('pointer', isFlyoutOpen)}>\n        <IconPaperclip16 />\n        {children}\n        <IconCaretDown12 />\n    </div>\n);\n"],"names":["ToolbarAttachmentsTrigger","children","isFlyoutOpen","jsxs","getToolbarButtonClassNames","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;AAOO,MAAMA,IAA4B,CAAC,EAAE,UAAAC,GAAU,cAAAC,EAAa,MAC9D,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAA2B,WAAWF,CAAY,GAC9D,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAgB,EAAA;AAAA,EAChBL;AAAA,oBACAM,GAAgB,EAAA;AAAA,EACrB,CAAA;"}

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

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+const o = ({ children: t }) => /* @__PURE__ */ e("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", children: t });
+export {
+  o as ToolbarSegment
+};
+//# sourceMappingURL=ToolbarSegment.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSegment.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/ToolbarSegment.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nexport const ToolbarSegment = ({ children }: { children: ReactNode }) => (\n    <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\">\n        {children}\n    </div>\n);\n"],"names":["ToolbarSegment","children","jsx"],"mappings":";AAIa,MAAAA,IAAiB,CAAC,EAAE,UAAAC,QAC5B,gBAAAC,EAAA,OAAA,EAAI,WAAU,gHACV,UAAAD,EACL,CAAA;"}

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

@@ -0,0 +1,26 @@
+import { FOCUS_VISIBLE_STYLE as s } from "@frontify/fondue";
+import { joinClassNames as o } from "../../../utilities/react/joinClassNames.es.js";
+const w = (e, r) => {
+  const t = [
+    s,
+    "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"
+  ];
+  return r ? t.push(
+    "tw-bg-box-neutral-pressed",
+    "tw-text-box-neutral-inverse-pressed",
+    e === "grab" ? "tw-cursor-grabbing" : "tw-cursor-pointer"
+  ) : t.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",
+    e === "grab" ? "tw-cursor-grab active:tw-cursor-grabbing" : "tw-cursor-pointer"
+  ), o(t);
+};
+export {
+  w as getToolbarButtonClassNames
+};
+//# sourceMappingURL=helpers.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_VISIBLE_STYLE } from '@frontify/fondue';\n\nimport { joinClassNames } from '../../../utilities';\n\nexport const getToolbarButtonClassNames = (cursor: 'grab' | 'pointer', forceActiveStyle?: boolean) => {\n    const classNames = [\n        FOCUS_VISIBLE_STYLE,\n        'tw-relative tw-inline-flex tw-items-center tw-justify-center',\n        'tw-h-6 tw-p-1',\n        'tw-rounded',\n        'tw-text-xs tw-font-medium',\n        'tw-gap-0.5',\n        'focus-visible:tw-z-10',\n    ];\n\n    if (forceActiveStyle) {\n        classNames.push(\n            'tw-bg-box-neutral-pressed',\n            'tw-text-box-neutral-inverse-pressed',\n            cursor === 'grab' ? 'tw-cursor-grabbing' : 'tw-cursor-pointer',\n        );\n    } else {\n        classNames.push(\n            'hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed',\n            'tw-text-text-weak hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',\n            cursor === 'grab' ? 'tw-cursor-grab active:tw-cursor-grabbing' : 'tw-cursor-pointer',\n        );\n    }\n\n    return joinClassNames(classNames);\n};\n"],"names":["getToolbarButtonClassNames","cursor","forceActiveStyle","classNames","FOCUS_VISIBLE_STYLE","joinClassNames"],"mappings":";;AAMa,MAAAA,IAA6B,CAACC,GAA4BC,MAA+B;AAClG,QAAMC,IAAa;AAAA,IACfC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGJ,SAAIF,IACWC,EAAA;AAAA,IACP;AAAA,IACA;AAAA,IACAF,MAAW,SAAS,uBAAuB;AAAA,EAAA,IAGpCE,EAAA;AAAA,IACP;AAAA,IACA;AAAA,IACAF,MAAW,SAAS,6CAA6C;AAAA,EAAA,GAIlEI,EAAeF,CAAU;AACpC;"}

package/dist/hooks/useAttachments.es.js

@@ -1,31 +1,54 @@
-import { useBlockAssets as m } from "@frontify/app-bridge";
-const l = (i, s) => {
-  const { blockAssets: a, updateAssetIdsFromKey: o } = m(i), c = (a == null ? void 0 : a[s]) || [];
+import { jsx as i } from "react/jsx-runtime";
+import { useBlockAssets as h } from "@frontify/app-bridge";
+import { createContext as A, useContext as p } from "react";
+const w = (e, n) => {
+  const { blockAssets: s, updateAssetIdsFromKey: o } = h(e), r = (s == null ? void 0 : s[n]) || [];
   return {
-    onAddAttachments: async (e) => {
-      const n = c.map((t) => t.id);
-      for (const t of e)
-        n.push(t.id);
-      await o(s, n);
+    onAttachmentsAdd: async (a) => {
+      const c = r.map((t) => t.id);
+      for (const t of a)
+        c.push(t.id);
+      await o(n, c);
     },
-    onAttachmentDelete: async (e) => {
-      const n = c.filter((t) => t.id !== e.id).map((t) => t.id);
-      await o(s, n);
+    onAttachmentDelete: async (a) => {
+      const c = r.filter((t) => t.id !== a.id).map((t) => t.id);
+      await o(n, c);
     },
-    onAttachmentReplace: async (e, n) => {
-      const t = c.map(
-        (d) => d.id === e.id ? n.id : d.id
+    onAttachmentReplace: async (a, c) => {
+      const t = r.map(
+        (m) => m.id === a.id ? c.id : m.id
       );
-      await o(s, t);
+      await o(n, t);
     },
-    onAttachmentsSorted: async (e) => {
-      const n = e.map((t) => t.id);
-      await o(s, n);
+    onAttachmentsSorted: async (a) => {
+      const c = a.map((t) => t.id);
+      await o(n, c);
     },
-    attachments: c
+    attachments: r,
+    appBridge: e
   };
+}, d = A(null), u = ({
+  appBridge: e,
+  children: n,
+  assetId: s
+}) => {
+  const o = w(e, s);
+  return /* @__PURE__ */ i(d.Provider, { value: o, children: n });
+}, B = () => {
+  const e = p(d);
+  if (!e)
+    throw new Error(
+      "No AttachmentsContext Provided. Component must be wrapped in an 'AttachmentsProvider' or the 'withAttachmentsProvider' HOC"
+    );
+  return e;
+}, D = (e, n) => {
+  const s = (o) => /* @__PURE__ */ i(u, { appBridge: o.appBridge, assetId: n, children: /* @__PURE__ */ i(e, { ...o }) });
+  return s.displayName = "withAttachmentsProvider", s;
 };
 export {
-  l as useAttachments
+  u as AttachmentsProvider,
+  w as useAttachments,
+  B as useAttachmentsContext,
+  D as withAttachmentsProvider
 };
 //# sourceMappingURL=useAttachments.es.js.map

package/dist/hooks/useAttachments.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAttachments.es.js","sources":["../../src/hooks/useAttachments.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock, Asset, useBlockAssets } from '@frontify/app-bridge';\n\nexport const useAttachments = (appBridge: AppBridgeBlock, assetId: string) => {\n    const { blockAssets, updateAssetIdsFromKey } = useBlockAssets(appBridge);\n    const attachments = blockAssets?.[assetId] || [];\n\n    const onAddAttachments = async (newAssets: Asset[]) => {\n        const newAssetIds = attachments.map((attachment) => attachment.id);\n        for (const asset of newAssets) {\n            newAssetIds.push(asset.id);\n        }\n        await updateAssetIdsFromKey(assetId, newAssetIds);\n    };\n\n    const onAttachmentDelete = async (assetToDelete: Asset) => {\n        const newAssetIds = attachments\n            .filter((attachment) => attachment.id !== assetToDelete.id)\n            .map((attachment) => attachment.id);\n\n        await updateAssetIdsFromKey(assetId, newAssetIds);\n    };\n\n    const onAttachmentReplace = async (attachmentToReplace: Asset, newAsset: Asset) => {\n        const newAssetIds = attachments.map((attachment) =>\n            attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id,\n        );\n\n        await updateAssetIdsFromKey(assetId, newAssetIds);\n    };\n\n    const onAttachmentsSorted = async (assets: Asset[]) => {\n        const newAssetIds = assets.map((asset) => asset.id);\n\n        await updateAssetIdsFromKey(assetId, newAssetIds);\n    };\n\n    return {\n        onAddAttachments,\n        onAttachmentDelete,\n        onAttachmentReplace,\n        onAttachmentsSorted,\n        attachments,\n    };\n};\n"],"names":["useAttachments","appBridge","assetId","blockAssets","updateAssetIdsFromKey","useBlockAssets","attachments","newAssets","newAssetIds","attachment","asset","assetToDelete","attachmentToReplace","newAsset","assets"],"mappings":";AAIa,MAAAA,IAAiB,CAACC,GAA2BC,MAAoB;AAC1E,QAAM,EAAE,aAAAC,GAAa,uBAAAC,EAAsB,IAAIC,EAAeJ,CAAS,GACjEK,KAAcH,KAAA,gBAAAA,EAAcD,OAAY,CAAA;AAgCvC,SAAA;AAAA,IACH,kBA/BqB,OAAOK,MAAuB;AACnD,YAAMC,IAAcF,EAAY,IAAI,CAACG,MAAeA,EAAW,EAAE;AACjE,iBAAWC,KAASH;AACJ,QAAAC,EAAA,KAAKE,EAAM,EAAE;AAEvB,YAAAN,EAAsBF,GAASM,CAAW;AAAA,IAAA;AAAA,IA2BhD,oBAxBuB,OAAOG,MAAyB;AACvD,YAAMH,IAAcF,EACf,OAAO,CAACG,MAAeA,EAAW,OAAOE,EAAc,EAAE,EACzD,IAAI,CAACF,MAAeA,EAAW,EAAE;AAEhC,YAAAL,EAAsBF,GAASM,CAAW;AAAA,IAAA;AAAA,IAoBhD,qBAjBwB,OAAOI,GAA4BC,MAAoB;AAC/E,YAAML,IAAcF,EAAY;AAAA,QAAI,CAACG,MACjCA,EAAW,OAAOG,EAAoB,KAAKC,EAAS,KAAKJ,EAAW;AAAA,MAAA;AAGlE,YAAAL,EAAsBF,GAASM,CAAW;AAAA,IAAA;AAAA,IAahD,qBAVwB,OAAOM,MAAoB;AACnD,YAAMN,IAAcM,EAAO,IAAI,CAACJ,MAAUA,EAAM,EAAE;AAE5C,YAAAN,EAAsBF,GAASM,CAAW;AAAA,IAAA;AAAA,IAQhD,aAAAF;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useAttachments.es.js","sources":["../../src/hooks/useAttachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock, Asset, useBlockAssets } from '@frontify/app-bridge';\nimport { type ReactNode, createContext, useContext } from 'react';\n\nimport { type BlockProps } from '../index';\n\nexport const useAttachments = (appBridge: AppBridgeBlock, assetId: string) => {\n    const { blockAssets, updateAssetIdsFromKey } = useBlockAssets(appBridge);\n    const attachments = blockAssets?.[assetId] || [];\n\n    const onAttachmentsAdd = async (newAssets: Asset[]) => {\n        const newAssetIds = attachments.map((attachment) => attachment.id);\n        for (const asset of newAssets) {\n            newAssetIds.push(asset.id);\n        }\n        await updateAssetIdsFromKey(assetId, newAssetIds);\n    };\n\n    const onAttachmentDelete = async (assetToDelete: Asset) => {\n        const newAssetIds = attachments\n            .filter((attachment) => attachment.id !== assetToDelete.id)\n            .map((attachment) => attachment.id);\n\n        await updateAssetIdsFromKey(assetId, newAssetIds);\n    };\n\n    const onAttachmentReplace = async (attachmentToReplace: Asset, newAsset: Asset) => {\n        const newAssetIds = attachments.map((attachment) =>\n            attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id,\n        );\n\n        await updateAssetIdsFromKey(assetId, newAssetIds);\n    };\n\n    const onAttachmentsSorted = async (assets: Asset[]) => {\n        const newAssetIds = assets.map((asset) => asset.id);\n\n        await updateAssetIdsFromKey(assetId, newAssetIds);\n    };\n\n    return {\n        onAttachmentsAdd,\n        onAttachmentDelete,\n        onAttachmentReplace,\n        onAttachmentsSorted,\n        attachments,\n        appBridge,\n    };\n};\n\nconst AttachmentsContext = createContext<ReturnType<typeof useAttachments> | null>(null);\n\nexport const AttachmentsProvider = ({\n    appBridge,\n    children,\n    assetId,\n}: {\n    appBridge: AppBridgeBlock;\n    children: ReactNode;\n    assetId: string;\n}) => {\n    const attachmentContext = useAttachments(appBridge, assetId);\n\n    return <AttachmentsContext.Provider value={attachmentContext}>{children}</AttachmentsContext.Provider>;\n};\n\nexport const useAttachmentsContext = () => {\n    const context = useContext(AttachmentsContext);\n\n    if (!context) {\n        throw new Error(\n            \"No AttachmentsContext Provided. Component must be wrapped in an 'AttachmentsProvider' or the 'withAttachmentsProvider' HOC\",\n        );\n    }\n\n    return context;\n};\n\n/**\n * Block-level HOC for cases when there is only one attachment asset field related to the block.\n * Recommended for most cases.\n * If finer control is required over attachments, use {@link AttachmentsProvider} component.\n */\nexport const withAttachmentsProvider = <T extends BlockProps>(Component: (props: T) => ReactNode, assetId: string) => {\n    const wrappedComponent = (props: T) => (\n        <AttachmentsProvider appBridge={props.appBridge} assetId={assetId}>\n            <Component {...props} />\n        </AttachmentsProvider>\n    );\n\n    wrappedComponent.displayName = 'withAttachmentsProvider';\n\n    return wrappedComponent;\n};\n"],"names":["useAttachments","appBridge","assetId","blockAssets","updateAssetIdsFromKey","useBlockAssets","attachments","newAssets","newAssetIds","attachment","asset","assetToDelete","attachmentToReplace","newAsset","assets","AttachmentsContext","createContext","AttachmentsProvider","children","attachmentContext","useAttachmentsContext","context","useContext","withAttachmentsProvider","Component","wrappedComponent","props","jsx"],"mappings":";;;AAOa,MAAAA,IAAiB,CAACC,GAA2BC,MAAoB;AAC1E,QAAM,EAAE,aAAAC,GAAa,uBAAAC,EAAsB,IAAIC,EAAeJ,CAAS,GACjEK,KAAcH,KAAA,gBAAAA,EAAcD,OAAY,CAAA;AAgCvC,SAAA;AAAA,IACH,kBA/BqB,OAAOK,MAAuB;AACnD,YAAMC,IAAcF,EAAY,IAAI,CAACG,MAAeA,EAAW,EAAE;AACjE,iBAAWC,KAASH;AACJ,QAAAC,EAAA,KAAKE,EAAM,EAAE;AAEvB,YAAAN,EAAsBF,GAASM,CAAW;AAAA,IAAA;AAAA,IA2BhD,oBAxBuB,OAAOG,MAAyB;AACvD,YAAMH,IAAcF,EACf,OAAO,CAACG,MAAeA,EAAW,OAAOE,EAAc,EAAE,EACzD,IAAI,CAACF,MAAeA,EAAW,EAAE;AAEhC,YAAAL,EAAsBF,GAASM,CAAW;AAAA,IAAA;AAAA,IAoBhD,qBAjBwB,OAAOI,GAA4BC,MAAoB;AAC/E,YAAML,IAAcF,EAAY;AAAA,QAAI,CAACG,MACjCA,EAAW,OAAOG,EAAoB,KAAKC,EAAS,KAAKJ,EAAW;AAAA,MAAA;AAGlE,YAAAL,EAAsBF,GAASM,CAAW;AAAA,IAAA;AAAA,IAahD,qBAVwB,OAAOM,MAAoB;AACnD,YAAMN,IAAcM,EAAO,IAAI,CAACJ,MAAUA,EAAM,EAAE;AAE5C,YAAAN,EAAsBF,GAASM,CAAW;AAAA,IAAA;AAAA,IAQhD,aAAAF;AAAA,IACA,WAAAL;AAAA,EAAA;AAER,GAEMc,IAAqBC,EAAwD,IAAI,GAE1EC,IAAsB,CAAC;AAAA,EAChC,WAAAhB;AAAA,EACA,UAAAiB;AAAA,EACA,SAAAhB;AACJ,MAIM;AACI,QAAAiB,IAAoBnB,EAAeC,GAAWC,CAAO;AAE3D,2BAAQa,EAAmB,UAAnB,EAA4B,OAAOI,GAAoB,UAAAD,EAAS,CAAA;AAC5E,GAEaE,IAAwB,MAAM;AACjC,QAAAC,IAAUC,EAAWP,CAAkB;AAE7C,MAAI,CAACM;AACD,UAAM,IAAI;AAAA,MACN;AAAA,IAAA;AAID,SAAAA;AACX,GAOaE,IAA0B,CAAuBC,GAAoCtB,MAAoB;AAClH,QAAMuB,IAAmB,CAACC,MACtB,gBAAAC,EAACV,GAAoB,EAAA,WAAWS,EAAM,WAAW,SAAAxB,GAC7C,UAAA,gBAAAyB,EAACH,GAAW,EAAA,GAAGE,GAAO,EAC1B,CAAA;AAGJ,SAAAD,EAAiB,cAAc,2BAExBA;AACX;"}