@frontify/guideline-blocks-settings 0.34.10 → 0.34.12

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

@@ -1,11 +1,11 @@
 import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import { forwardRef as A, useState as j, useEffect as I } from "react";
-import { useFileInput as D, useAssetUpload as E } from "@frontify/app-bridge";
-import { useSortable as M } from "@dnd-kit/sortable";
-import { LoadingCircle as P, LoadingCircleSize as V, FOCUS_STYLE as B, IconGrabHandle20 as L, Flyout as U, FlyoutPlacement as $, Button as O, IconPen20 as T, ButtonEmphasis as X, ActionMenu as G, MenuItemContentSize as f, IconArrowCircleUp20 as H, IconImageStack20 as _, MenuItemStyle as Y, IconTrashBin20 as q, IconImage24 as J, IconPlayFrame24 as K, IconMusicNote24 as Q, IconDocument24 as W } from "@frontify/fondue";
-import { useFocusRing as Z } from "@react-aria/focus";
+import { useSortable as A } from "@dnd-kit/sortable";
+import { useFileInput as j, useAssetUpload as D } from "@frontify/app-bridge";
+import { LoadingCircle as E, LoadingCircleSize as M, FOCUS_STYLE as P, IconGrabHandle20 as V, Flyout as B, FlyoutPlacement as L, Button as U, IconPen20 as $, ButtonEmphasis as O, ActionMenu as T, MenuItemContentSize as f, IconArrowCircleUp20 as X, IconImageStack20 as G, MenuItemStyle as H, IconTrashBin20 as _, IconImage24 as Y, IconPlayFrame24 as q, IconMusicNote24 as J, IconDocument24 as K } from "@frontify/fondue";
+import { useFocusRing as Q } from "@react-aria/focus";
+import { forwardRef as W, useState as Z, useEffect as I } from "react";
 import { joinClassNames as h } from "../../utilities/react/joinClassNames.es.js";
-const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /* @__PURE__ */ t(K, {}) : e === "AUDIO" ? /* @__PURE__ */ t(Q, {}) : /* @__PURE__ */ t(W, {}), y = A(
+const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(Y, {}) : e === "VIDEO" ? /* @__PURE__ */ t(q, {}) : e === "AUDIO" ? /* @__PURE__ */ t(J, {}) : /* @__PURE__ */ t(K, {}), y = W(
   ({
     item: e,
     isEditing: s,
@@ -19,7 +19,7 @@ const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /*
     onReplaceWithUpload: S,
     onDownload: w
   }, k) => {
-    const [r, i] = j(), [C, { selectedFiles: l }] = D({ multiple: !0, accept: "image/*" }), [N, { results: g, doneAll: p }] = E(), { focusProps: F, isFocusVisible: v } = Z();
+    const [r, i] = Z(), [C, { selectedFiles: l }] = j({ multiple: !0, accept: "image/*" }), [N, { results: g, doneAll: p }] = D(), { focusProps: F, isFocusVisible: v } = Q();
     I(() => {
       l && N(l[0]);
     }, [l]), I(() => {
@@ -43,7 +43,7 @@ const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /*
           o ? "tw-bg-box-neutral-hover" : ""
         ]),
         children: [
-          /* @__PURE__ */ t("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: z ? /* @__PURE__ */ t(P, { size: V.Small }) : tt(e.objectType) }),
+          /* @__PURE__ */ t("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: z ? /* @__PURE__ */ t(E, { size: M.Small }) : tt(e.objectType) }),
           /* @__PURE__ */ b("div", { className: "tw-text-s tw-flex-1 tw-min-w-0", children: [
             /* @__PURE__ */ t("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", children: e.title }),
             /* @__PURE__ */ t("div", { className: "tw-text-text-weak", children: `${e.fileSizeHumanReadable} - ${e.extension}` })
@@ -66,31 +66,31 @@ const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /*
                     className: h([
                       " 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 ",
                       o || a ? "tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed" : "tw-cursor-grab hover:tw-bg-button-background-hover",
-                      v && B,
+                      v && P,
                       v && "tw-z-[2]"
                     ]),
-                    children: /* @__PURE__ */ t(L, {})
+                    children: /* @__PURE__ */ t(V, {})
                   }
                 ),
                 /* @__PURE__ */ t("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ t(
-                  U,
+                  B,
                   {
-                    placement: $.Right,
+                    placement: L.Right,
                     isOpen: (r == null ? void 0 : r.id) === e.id,
                     fitContent: !0,
                     legacyFooter: !1,
                     onOpenChange: (x) => i(x ? e : void 0),
                     trigger: (x, R) => /* @__PURE__ */ t(
-                      O,
+                      U,
                       {
                         ref: R,
-                        icon: /* @__PURE__ */ t(T, {}),
-                        emphasis: X.Default,
+                        icon: /* @__PURE__ */ t($, {}),
+                        emphasis: O.Default,
                         onClick: () => i(e)
                       }
                     ),
                     children: /* @__PURE__ */ t(
-                      G,
+                      T,
                       {
                         menuBlocks: [
                           {
@@ -104,7 +104,7 @@ const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /*
                                   C(), i(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(H, {}) })
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(X, {}) })
                               },
                               {
                                 id: "asset",
@@ -114,7 +114,7 @@ const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /*
                                   m(), i(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(_, {}) })
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(G, {}) })
                               }
                             ]
                           },
@@ -125,12 +125,12 @@ const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /*
                                 id: "delete",
                                 size: f.XSmall,
                                 title: "Delete",
-                                style: Y.Danger,
+                                style: H.Danger,
                                 onClick: () => {
                                   d(), i(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(q, {}) })
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(_, {}) })
                               }
                             ]
                           }
@@ -149,7 +149,7 @@ const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /*
 );
 y.displayName = "AttachmentItem";
 const st = (e) => {
-  const { attributes: s, listeners: c, setNodeRef: u, transform: o, transition: a, isDragging: n } = M({
+  const { attributes: s, listeners: c, setNodeRef: u, transform: o, transition: a, isDragging: n } = A({
     id: e.item.id
   }), d = {
     transform: o ? `translate(${o.x}px, ${o.y}px)` : "",

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentItem.es.js","sources":["../../../src/components/Attachments/AttachmentItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MutableRefObject, forwardRef, useEffect, useState } from 'react';\nimport { Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport {\n    ActionMenu,\n    Button,\n    ButtonEmphasis,\n    FOCUS_STYLE,\n    Flyout,\n    FlyoutPlacement,\n    IconArrowCircleUp20,\n    IconDocument24,\n    IconGrabHandle20,\n    IconImage24,\n    IconImageStack20,\n    IconMusicNote24,\n    IconPen20,\n    IconPlayFrame24,\n    IconTrashBin20,\n    LoadingCircle,\n    LoadingCircleSize,\n    MenuItemContentSize,\n    MenuItemStyle,\n} from '@frontify/fondue';\nimport { AttachmentItemProps, SortableAttachmentItemProps } from './types';\nimport { joinClassNames } from '../../utilities';\nimport { useFocusRing } from '@react-aria/focus';\n\nconst getDecorator = (type: string) => {\n    if (type === 'IMAGE') {\n        return <IconImage24 />;\n    } else if (type === 'VIDEO') {\n        return <IconPlayFrame24 />;\n    } else if (type === 'AUDIO') {\n        return <IconMusicNote24 />;\n    } else {\n        return <IconDocument24 />;\n    }\n};\n\nexport const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(\n    (\n        {\n            item,\n            isEditing,\n            draggableProps,\n            transformStyle,\n            isDragging,\n            isOverlay,\n            isLoading,\n            onDelete,\n            onReplaceWithBrowse,\n            onReplaceWithUpload,\n            onDownload,\n        },\n        ref,\n    ) => {\n        const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>();\n        const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/*' });\n        const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();\n\n        const { focusProps, isFocusVisible } = useFocusRing();\n\n        useEffect(() => {\n            if (selectedFiles) {\n                uploadFile(selectedFiles[0]);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [selectedFiles]);\n\n        useEffect(() => {\n            if (doneAll) {\n                onReplaceWithUpload(uploadResults[0]);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [doneAll, uploadResults]);\n\n        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);\n\n        return (\n            <button\n                aria-label=\"Download attachment\"\n                data-test-id=\"attachments-item\"\n                onClick={() => onDownload?.()}\n                ref={ref}\n                style={{\n                    ...transformStyle,\n                    opacity: isDragging && !isOverlay ? 0.3 : 1,\n                    fontFamily: 'var(-f-theme-settings-body-font-family)',\n                }}\n                className={joinClassNames([\n                    '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',\n                    isDragging ? 'tw-bg-box-neutral-hover' : '',\n                ])}\n            >\n                <div className=\"tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover\">\n                    {showLoadingCircle ? (\n                        <LoadingCircle size={LoadingCircleSize.Small} />\n                    ) : (\n                        getDecorator(item.objectType)\n                    )}\n                </div>\n                <div className=\"tw-text-s tw-flex-1 tw-min-w-0\">\n                    <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\">\n                        {item.title}\n                    </div>\n                    <div className=\"tw-text-text-weak\">{`${item.fileSizeHumanReadable} - ${item.extension}`}</div>\n                </div>\n                {isEditing && (\n                    <div\n                        data-test-id=\"attachments-actionbar\"\n                        className={joinClassNames([\n                            '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',\n                            isOverlay || selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',\n                        ])}\n                    >\n                        <button\n                            {...focusProps}\n                            {...draggableProps}\n                            aria-label=\"Drag attachment\"\n                            className={joinClassNames([\n                                ' 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 ',\n                                isDragging || isOverlay\n                                    ? 'tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed'\n                                    : 'tw-cursor-grab hover:tw-bg-button-background-hover',\n                                isFocusVisible && FOCUS_STYLE,\n                                isFocusVisible && 'tw-z-[2]',\n                            ])}\n                        >\n                            <IconGrabHandle20 />\n                        </button>\n                        <div data-test-id=\"attachments-actionbar-flyout\">\n                            <Flyout\n                                placement={FlyoutPlacement.Right}\n                                isOpen={selectedAsset?.id === item.id}\n                                fitContent\n                                legacyFooter={false}\n                                onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n                                trigger={(_, ref) => (\n                                    <Button\n                                        ref={ref as MutableRefObject<HTMLButtonElement>}\n                                        icon={<IconPen20 />}\n                                        emphasis={ButtonEmphasis.Default}\n                                        onClick={() => setSelectedAsset(item)}\n                                    />\n                                )}\n                            >\n                                <ActionMenu\n                                    menuBlocks={[\n                                        {\n                                            id: 'menu',\n                                            menuItems: [\n                                                {\n                                                    id: 'upload',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Replace with upload',\n                                                    onClick: () => {\n                                                        openFileDialog();\n                                                        setSelectedAsset(undefined);\n                                                    },\n\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconArrowCircleUp20 />\n                                                        </div>\n                                                    ),\n                                                },\n\n                                                {\n                                                    id: 'asset',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Replace with asset',\n                                                    onClick: () => {\n                                                        onReplaceWithBrowse();\n                                                        setSelectedAsset(undefined);\n                                                    },\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconImageStack20 />\n                                                        </div>\n                                                    ),\n                                                },\n                                            ],\n                                        },\n                                        {\n                                            id: 'menu-delete',\n                                            menuItems: [\n                                                {\n                                                    id: 'delete',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Delete',\n                                                    style: MenuItemStyle.Danger,\n                                                    onClick: () => {\n                                                        onDelete();\n                                                        setSelectedAsset(undefined);\n                                                    },\n\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconTrashBin20 />\n                                                        </div>\n                                                    ),\n                                                },\n                                            ],\n                                        },\n                                    ]}\n                                />\n                            </Flyout>\n                        </div>\n                    </div>\n                )}\n            </button>\n        );\n    },\n);\n\nAttachmentItem.displayName = 'AttachmentItem';\n\nexport const SortableAttachmentItem = (props: SortableAttachmentItemProps) => {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: props.item.id,\n    });\n\n    const transformStyle = {\n        transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : '',\n        transition,\n        zIndex: isDragging ? 2 : 1,\n    };\n\n    const draggableProps = { ...attributes, ...listeners };\n\n    return (\n        <AttachmentItem\n            ref={setNodeRef}\n            isDragging={isDragging}\n            transformStyle={transformStyle}\n            draggableProps={draggableProps}\n            {...props}\n        />\n    );\n};\n"],"names":["getDecorator","type","IconImage24","IconPlayFrame24","IconMusicNote24","IconDocument24","AttachmentItem","forwardRef","item","isEditing","draggableProps","transformStyle","isDragging","isOverlay","isLoading","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onDownload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","focusProps","isFocusVisible","useFocusRing","useEffect","showLoadingCircle","jsxs","joinClassNames","jsx","LoadingCircle","LoadingCircleSize","FOCUS_STYLE","IconGrabHandle20","Flyout","FlyoutPlacement","isOpen","_","Button","IconPen20","ButtonEmphasis","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20","MenuItemStyle","IconTrashBin20","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable"],"mappings":";;;;;;;AA+BA,MAAMA,KAAe,CAACC,MACdA,MAAS,4BACDC,GAAY,CAAA,CAAA,IACbD,MAAS,4BACRE,GAAgB,CAAA,CAAA,IACjBF,MAAS,4BACRG,GAAgB,CAAA,CAAA,sBAEhBC,GAAe,CAAA,CAAA,GAIlBC,IAAiBC;AAAA,EAC1B,CACI;AAAA,IACI,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,KAEJC,MACC;AACD,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA4B,GAChE,CAACC,GAAgB,EAAE,eAAAC,EAAA,CAAe,IAAIC,EAAa,EAAE,UAAU,IAAM,QAAQ,UAAW,CAAA,GACxF,CAACC,GAAY,EAAE,SAASC,GAAe,SAAAC,EAAS,CAAA,IAAIC,KAEpD,EAAE,YAAAC,GAAY,gBAAAC,EAAe,IAAIC,EAAa;AAEpD,IAAAC,EAAU,MAAM;AACZ,MAAIT,KACWE,EAAAF,EAAc,CAAC,CAAC;AAAA,IAC/B,GAED,CAACA,CAAa,CAAC,GAElBS,EAAU,MAAM;AACZ,MAAIL,KACoBX,EAAAU,EAAc,CAAC,CAAC;AAAA,IACxC,GAED,CAACC,GAASD,CAAa,CAAC;AAErB,UAAAO,IAAoBpB,KAAcU,KAAiB,CAACI;AAGtD,WAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,cAAW;AAAA,QACX,gBAAa;AAAA,QACb,SAAS,MAAMjB,KAAA,gBAAAA;AAAA,QACf,KAAAC;AAAA,QACA,OAAO;AAAA,UACH,GAAGR;AAAA,UACH,SAASC,KAAc,CAACC,IAAY,MAAM;AAAA,UAC1C,YAAY;AAAA,QAChB;AAAA,QACA,WAAWuB,EAAe;AAAA,UACtB;AAAA,UACAxB,IAAa,4BAA4B;AAAA,QAAA,CAC5C;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAyB,EAAC,OAAI,EAAA,WAAU,mEACV,UAAAH,IACI,gBAAAG,EAAAC,GAAA,EAAc,MAAMC,EAAkB,MAAO,CAAA,IAE9CvC,GAAaQ,EAAK,UAAU,GAEpC;AAAA,UACA,gBAAA2B,EAAC,OAAI,EAAA,WAAU,kCACX,UAAA;AAAA,YAAA,gBAAAE,EAAC,OAAI,EAAA,WAAU,yIACV,UAAA7B,EAAK,OACV;AAAA,YACA,gBAAA6B,EAAC,OAAI,EAAA,WAAU,qBAAqB,UAAA,GAAG7B,EAAK,qBAAqB,MAAMA,EAAK,SAAS,GAAG,CAAA;AAAA,UAAA,GAC5F;AAAA,UACCC,KACG,gBAAA0B;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAWC,EAAe;AAAA,gBACtB;AAAA,gBACAvB,MAAaO,KAAA,gBAAAA,EAAe,QAAOZ,EAAK,KAAK,mBAAmB;AAAA,cAAA,CACnE;AAAA,cAED,UAAA;AAAA,gBAAA,gBAAA6B;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACI,GAAGP;AAAA,oBACH,GAAGpB;AAAA,oBACJ,cAAW;AAAA,oBACX,WAAW0B,EAAe;AAAA,sBACtB;AAAA,sBACAxB,KAAcC,IACR,6FACA;AAAA,sBACNkB,KAAkBS;AAAA,sBAClBT,KAAkB;AAAA,oBAAA,CACrB;AAAA,oBAED,4BAACU,GAAiB,EAAA;AAAA,kBAAA;AAAA,gBACtB;AAAA,gBACA,gBAAAJ,EAAC,OAAI,EAAA,gBAAa,gCACd,UAAA,gBAAAA;AAAA,kBAACK;AAAA,kBAAA;AAAA,oBACG,WAAWC,EAAgB;AAAA,oBAC3B,SAAQvB,KAAA,gBAAAA,EAAe,QAAOZ,EAAK;AAAA,oBACnC,YAAU;AAAA,oBACV,cAAc;AAAA,oBACd,cAAc,CAACoC,MAAWvB,EAAiBuB,IAASpC,IAAO,MAAS;AAAA,oBACpE,SAAS,CAACqC,GAAG1B,MACT,gBAAAkB;AAAA,sBAACS;AAAA,sBAAA;AAAA,wBACG,KAAK3B;AAAAA,wBACL,wBAAO4B,GAAU,EAAA;AAAA,wBACjB,UAAUC,EAAe;AAAA,wBACzB,SAAS,MAAM3B,EAAiBb,CAAI;AAAA,sBAAA;AAAA,oBACxC;AAAA,oBAGJ,UAAA,gBAAA6B;AAAA,sBAACY;AAAA,sBAAA;AAAA,wBACG,YAAY;AAAA,0BACR;AAAA,4BACI,IAAI;AAAA,4BACJ,WAAW;AAAA,8BACP;AAAA,gCACI,IAAI;AAAA,gCACJ,MAAMC,EAAoB;AAAA,gCAC1B,OAAO;AAAA,gCACP,SAAS,MAAM;AACI,kCAAA3B,KACfF,EAAiB,MAAS;AAAA,gCAC9B;AAAA,gCAEA,cAAc;AAAA,gCACd,WACK,gBAAAgB,EAAA,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA,EAACc,IAAoB,CAAA,GACzB;AAAA,8BAER;AAAA,8BAEA;AAAA,gCACI,IAAI;AAAA,gCACJ,MAAMD,EAAoB;AAAA,gCAC1B,OAAO;AAAA,gCACP,SAAS,MAAM;AACS,kCAAAlC,KACpBK,EAAiB,MAAS;AAAA,gCAC9B;AAAA,gCACA,cAAc;AAAA,gCACd,WACK,gBAAAgB,EAAA,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA,EAACe,IAAiB,CAAA,GACtB;AAAA,8BAER;AAAA,4BACJ;AAAA,0BACJ;AAAA,0BACA;AAAA,4BACI,IAAI;AAAA,4BACJ,WAAW;AAAA,8BACP;AAAA,gCACI,IAAI;AAAA,gCACJ,MAAMF,EAAoB;AAAA,gCAC1B,OAAO;AAAA,gCACP,OAAOG,EAAc;AAAA,gCACrB,SAAS,MAAM;AACF,kCAAAtC,KACTM,EAAiB,MAAS;AAAA,gCAC9B;AAAA,gCAEA,cAAc;AAAA,gCACd,WACK,gBAAAgB,EAAA,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA,EAACiB,IAAe,CAAA,GACpB;AAAA,8BAER;AAAA,4BACJ;AAAA,0BACJ;AAAA,wBACJ;AAAA,sBAAA;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBAAA,GAER;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIhB;AACJ;AAEAhD,EAAe,cAAc;AAEhB,MAAAiD,KAAyB,CAACC,MAAuC;AACpE,QAAA,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAjD,MAAekD,EAAY;AAAA,IACzF,IAAIN,EAAM,KAAK;AAAA,EAAA,CAClB,GAEK7C,IAAiB;AAAA,IACnB,WAAWiD,IAAY,aAAaA,EAAU,CAAC,OAAOA,EAAU,CAAC,QAAQ;AAAA,IACzE,YAAAC;AAAA,IACA,QAAQjD,IAAa,IAAI;AAAA,EAAA,GAGvBF,IAAiB,EAAE,GAAG+C,GAAY,GAAGC,EAAU;AAGjD,SAAA,gBAAArB;AAAA,IAAC/B;AAAA,IAAA;AAAA,MACG,KAAKqD;AAAA,MACL,YAAA/C;AAAA,MACA,gBAAAD;AAAA,MACA,gBAAAD;AAAA,MACC,GAAG8C;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"AttachmentItem.es.js","sources":["../../../src/components/Attachments/AttachmentItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { type Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport {\n    ActionMenu,\n    Button,\n    ButtonEmphasis,\n    FOCUS_STYLE,\n    Flyout,\n    FlyoutPlacement,\n    IconArrowCircleUp20,\n    IconDocument24,\n    IconGrabHandle20,\n    IconImage24,\n    IconImageStack20,\n    IconMusicNote24,\n    IconPen20,\n    IconPlayFrame24,\n    IconTrashBin20,\n    LoadingCircle,\n    LoadingCircleSize,\n    MenuItemContentSize,\n    MenuItemStyle,\n} from '@frontify/fondue';\nimport { useFocusRing } from '@react-aria/focus';\nimport { type MutableRefObject, forwardRef, useEffect, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentItemProps, type SortableAttachmentItemProps } from './types';\n\nconst getDecorator = (type: string) => {\n    if (type === 'IMAGE') {\n        return <IconImage24 />;\n    } else if (type === 'VIDEO') {\n        return <IconPlayFrame24 />;\n    } else if (type === 'AUDIO') {\n        return <IconMusicNote24 />;\n    } else {\n        return <IconDocument24 />;\n    }\n};\n\nexport const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(\n    (\n        {\n            item,\n            isEditing,\n            draggableProps,\n            transformStyle,\n            isDragging,\n            isOverlay,\n            isLoading,\n            onDelete,\n            onReplaceWithBrowse,\n            onReplaceWithUpload,\n            onDownload,\n        },\n        ref,\n    ) => {\n        const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>();\n        const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/*' });\n        const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();\n\n        const { focusProps, isFocusVisible } = useFocusRing();\n\n        useEffect(() => {\n            if (selectedFiles) {\n                uploadFile(selectedFiles[0]);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [selectedFiles]);\n\n        useEffect(() => {\n            if (doneAll) {\n                onReplaceWithUpload(uploadResults[0]);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [doneAll, uploadResults]);\n\n        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);\n\n        return (\n            <button\n                aria-label=\"Download attachment\"\n                data-test-id=\"attachments-item\"\n                onClick={() => onDownload?.()}\n                ref={ref}\n                style={{\n                    ...transformStyle,\n                    opacity: isDragging && !isOverlay ? 0.3 : 1,\n                    fontFamily: 'var(-f-theme-settings-body-font-family)',\n                }}\n                className={joinClassNames([\n                    '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',\n                    isDragging ? 'tw-bg-box-neutral-hover' : '',\n                ])}\n            >\n                <div className=\"tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover\">\n                    {showLoadingCircle ? (\n                        <LoadingCircle size={LoadingCircleSize.Small} />\n                    ) : (\n                        getDecorator(item.objectType)\n                    )}\n                </div>\n                <div className=\"tw-text-s tw-flex-1 tw-min-w-0\">\n                    <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\">\n                        {item.title}\n                    </div>\n                    <div className=\"tw-text-text-weak\">{`${item.fileSizeHumanReadable} - ${item.extension}`}</div>\n                </div>\n                {isEditing && (\n                    <div\n                        data-test-id=\"attachments-actionbar\"\n                        className={joinClassNames([\n                            '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',\n                            isOverlay || selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',\n                        ])}\n                    >\n                        <button\n                            {...focusProps}\n                            {...draggableProps}\n                            aria-label=\"Drag attachment\"\n                            className={joinClassNames([\n                                ' 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 ',\n                                isDragging || isOverlay\n                                    ? 'tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed'\n                                    : 'tw-cursor-grab hover:tw-bg-button-background-hover',\n                                isFocusVisible && FOCUS_STYLE,\n                                isFocusVisible && 'tw-z-[2]',\n                            ])}\n                        >\n                            <IconGrabHandle20 />\n                        </button>\n                        <div data-test-id=\"attachments-actionbar-flyout\">\n                            <Flyout\n                                placement={FlyoutPlacement.Right}\n                                isOpen={selectedAsset?.id === item.id}\n                                fitContent\n                                legacyFooter={false}\n                                onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n                                trigger={(_, ref) => (\n                                    <Button\n                                        ref={ref as MutableRefObject<HTMLButtonElement>}\n                                        icon={<IconPen20 />}\n                                        emphasis={ButtonEmphasis.Default}\n                                        onClick={() => setSelectedAsset(item)}\n                                    />\n                                )}\n                            >\n                                <ActionMenu\n                                    menuBlocks={[\n                                        {\n                                            id: 'menu',\n                                            menuItems: [\n                                                {\n                                                    id: 'upload',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Replace with upload',\n                                                    onClick: () => {\n                                                        openFileDialog();\n                                                        setSelectedAsset(undefined);\n                                                    },\n\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconArrowCircleUp20 />\n                                                        </div>\n                                                    ),\n                                                },\n\n                                                {\n                                                    id: 'asset',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Replace with asset',\n                                                    onClick: () => {\n                                                        onReplaceWithBrowse();\n                                                        setSelectedAsset(undefined);\n                                                    },\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconImageStack20 />\n                                                        </div>\n                                                    ),\n                                                },\n                                            ],\n                                        },\n                                        {\n                                            id: 'menu-delete',\n                                            menuItems: [\n                                                {\n                                                    id: 'delete',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Delete',\n                                                    style: MenuItemStyle.Danger,\n                                                    onClick: () => {\n                                                        onDelete();\n                                                        setSelectedAsset(undefined);\n                                                    },\n\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconTrashBin20 />\n                                                        </div>\n                                                    ),\n                                                },\n                                            ],\n                                        },\n                                    ]}\n                                />\n                            </Flyout>\n                        </div>\n                    </div>\n                )}\n            </button>\n        );\n    },\n);\n\nAttachmentItem.displayName = 'AttachmentItem';\n\nexport const SortableAttachmentItem = (props: SortableAttachmentItemProps) => {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: props.item.id,\n    });\n\n    const transformStyle = {\n        transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : '',\n        transition,\n        zIndex: isDragging ? 2 : 1,\n    };\n\n    const draggableProps = { ...attributes, ...listeners };\n\n    return (\n        <AttachmentItem\n            ref={setNodeRef}\n            isDragging={isDragging}\n            transformStyle={transformStyle}\n            draggableProps={draggableProps}\n            {...props}\n        />\n    );\n};\n"],"names":["getDecorator","type","IconImage24","IconPlayFrame24","IconMusicNote24","IconDocument24","AttachmentItem","forwardRef","item","isEditing","draggableProps","transformStyle","isDragging","isOverlay","isLoading","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onDownload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","focusProps","isFocusVisible","useFocusRing","useEffect","showLoadingCircle","jsxs","joinClassNames","jsx","LoadingCircle","LoadingCircleSize","FOCUS_STYLE","IconGrabHandle20","Flyout","FlyoutPlacement","isOpen","_","Button","IconPen20","ButtonEmphasis","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20","MenuItemStyle","IconTrashBin20","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { jsx as n, jsxs as y } from "react/jsx-runtime";
-import { useState as d, useEffect as w } from "react";
 import { useSensors as Z, useSensor as T, PointerSensor as _, KeyboardSensor as $, DndContext as tt, closestCenter as et, DragOverlay as ot } from "@dnd-kit/core";
 import { restrictToWindowEdges as nt } from "@dnd-kit/modifiers";
 import { SortableContext as st, rectSortingStrategy as it, arrayMove as dt } from "@dnd-kit/sortable";
 import { useEditorState as at, useAssetChooser as lt, useAssetUpload as rt } from "@frontify/app-bridge";
 import { LegacyTooltip as ct, TooltipPosition as ut, Flyout as gt, FlyoutPlacement as pt, AssetInput as ht, AssetInputSize as mt } from "@frontify/fondue";
+import { useState as d, useEffect as w } from "react";
 import { SortableAttachmentItem as ft, AttachmentItem as yt } from "./AttachmentItem.es.js";
 import { AttachmentsButtonTrigger as wt } from "./AttachmentsButtonTrigger.es.js";
 const Et = ({

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 { MutableRefObject, 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, useAssetChooser, 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 { openAssetChooser, closeAssetChooser } = useAssetChooser(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        openAssetChooser(\n            (result: Asset[]) => {\n                onBrowse(result);\n                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        openAssetChooser(\n            async (result: Asset[]) => {\n                handleFlyoutOpenChange(true);\n                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={(triggerProps, triggerRef) => (\n                            <TriggerComponent\n                                isFlyoutOpen={isFlyoutOpen}\n                                triggerProps={triggerProps}\n                                triggerRef={triggerRef as MutableRefObject<HTMLButtonElement>}\n                            >\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","openAssetChooser","closeAssetChooser","useAssetChooser","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","triggerProps","triggerRef","jsxs","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 {\n    DndContext,\n    type DragEndEvent,\n    DragOverlay,\n    type 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 { type Asset, useAssetChooser, 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';\nimport { type MutableRefObject, useEffect, useState } from 'react';\n\nimport { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsButtonTrigger } from './AttachmentsButtonTrigger';\nimport { type AttachmentsProps } from './types';\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 { openAssetChooser, closeAssetChooser } = useAssetChooser(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        openAssetChooser(\n            (result: Asset[]) => {\n                onBrowse(result);\n                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        openAssetChooser(\n            async (result: Asset[]) => {\n                handleFlyoutOpenChange(true);\n                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={(triggerProps, triggerRef) => (\n                            <TriggerComponent\n                                isFlyoutOpen={isFlyoutOpen}\n                                triggerProps={triggerProps}\n                                triggerRef={triggerRef as MutableRefObject<HTMLButtonElement>}\n                            >\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","openAssetChooser","closeAssetChooser","useAssetChooser","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","triggerProps","triggerRef","jsxs","DndContext","closestCenter","restrictToWindowEdges","SortableContext","rectSortingStrategy","SortableAttachmentItem","DragOverlay","AttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":"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"}

package/dist/components/BlockInjectButton/BlockInjectButton.es.js

@@ -1,8 +1,8 @@
 import { jsxs as c, jsx as e, Fragment as z } from "react/jsx-runtime";
-import { LoadingCircle as O, IconExclamationMarkTriangle as X, Flyout as A, ActionMenu as F, MenuItemContentSize as I, IconArrowCircleUp20 as R, IconImageStack20 as T } from "@frontify/fondue";
-import { useState as g, useRef as V } from "react";
-import { joinClassNames as P } from "../../utilities/react/joinClassNames.es.js";
-import { FileExtensionSets as Y } from "@frontify/app-bridge";
+import { FileExtensionSets as O } from "@frontify/app-bridge";
+import { LoadingCircle as X, IconExclamationMarkTriangle as A, Flyout as F, ActionMenu as R, MenuItemContentSize as I, IconArrowCircleUp20 as T, IconImageStack20 as V } from "@frontify/fondue";
+import { useState as g, useRef as P } from "react";
+import { joinClassNames as Y } from "../../utilities/react/joinClassNames.es.js";
 const H = ({
   onDrop: s,
   label: u,
@@ -17,7 +17,7 @@ const H = ({
   validFileType: v,
   verticalLayout: M
 }) => {
-  const [d, b] = g(!1), [i, w] = g(), h = V(null), [o, a] = g(void 0), S = (t) => {
+  const [d, b] = g(!1), [i, w] = g(), h = P(null), [o, a] = g(void 0), S = (t) => {
     if (t.preventDefault(), b(!1), !B(t.dataTransfer.files)) {
       a("Invalid"), setTimeout(() => {
         a(void 0);
@@ -30,7 +30,7 @@ const H = ({
       return !0;
     for (let r = 0; r < t.length; r++) {
       const n = t[r].name.split(".").pop() ?? "";
-      if (!Y[v].includes(n))
+      if (!O[v].includes(n))
         return !1;
     }
     return !0;
@@ -45,7 +45,7 @@ const H = ({
     {
       ref: h,
       "data-test-id": "block-inject-button",
-      className: P([
+      className: Y([
         "tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
         M ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr",
         N ? "tw-h-full" : "tw-h-[72px]",
@@ -70,19 +70,16 @@ const H = ({
         j && C(t), m == null || m();
       },
       children: [
-        l ? /* @__PURE__ */ e(O, {}) : (
-          // eslint-disable-next-line unicorn/no-nested-ternary
-          o ? /* @__PURE__ */ c("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
-            /* @__PURE__ */ e(X, {}),
-            o
-          ] }) : /* @__PURE__ */ c(z, { children: [
-            p && /* @__PURE__ */ e("div", { children: p }),
-            (u || f) && /* @__PURE__ */ c("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
-              u && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: u }),
-              f && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: f })
-            ] })
+        l ? /* @__PURE__ */ e(X, {}) : o ? /* @__PURE__ */ c("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
+          /* @__PURE__ */ e(A, {}),
+          o
+        ] }) : /* @__PURE__ */ c(z, { children: [
+          p && /* @__PURE__ */ e("div", { children: p }),
+          (u || f) && /* @__PURE__ */ c("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
+            u && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: u }),
+            f && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: f })
           ] })
-        ),
+        ] }),
         i && /* @__PURE__ */ e(
           "div",
           {
@@ -92,7 +89,7 @@ const H = ({
               top: i[1]
             },
             children: /* @__PURE__ */ e(
-              A,
+              F,
               {
                 onOpenChange: (t) => !t && w(void 0),
                 isOpen: !0,
@@ -101,7 +98,7 @@ const H = ({
                 legacyFooter: !1,
                 trigger: /* @__PURE__ */ e("div", {}),
                 children: /* @__PURE__ */ e(
-                  F,
+                  R,
                   {
                     menuBlocks: [
                       {
@@ -116,7 +113,7 @@ const H = ({
                                 k(), w(void 0);
                               },
                               initialValue: !0,
-                              decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(R, {}) })
+                              decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(T, {}) })
                             }
                           ] : [],
                           ...x ? [
@@ -128,7 +125,7 @@ const H = ({
                                 x(), w(void 0);
                               },
                               initialValue: !0,
-                              decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(T, {}) })
+                              decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(V, {}) })
                             }
                           ] : []
                         ]

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

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

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 { type ReactElement, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { type BlockItemWrapperProps } from './types';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging = false,\n    shouldFillContainer,\n    outlineOffset = 2,\n    shouldBeShown = false,\n    showAttachments = false,\n}: BlockItemWrapperProps): ReactElement => {\n    const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\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 = openFlyoutIds.length > 0 || shouldBeShown;\n\n    return (\n        <DragPreviewContextProvider isDragPreview={isDragging}>\n            <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\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                            attachments={{\n                                isEnabled: showAttachments,\n                            }}\n                            items={items}\n                        />\n                    </div>\n                    {children}\n                </div>\n            </MultiFlyoutContextProvider>\n        </DragPreviewContextProvider>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","openFlyoutIds","setOpenFlyoutIds","useState","DEFAULT_MENU_BUTTON_ID","wrapperRef","useRef","items","item","shouldToolbarBeVisible","DragPreviewContextProvider","jsx","MultiFlyoutContextProvider","jsxs","joinClassNames","Toolbar"],"mappings":";;;;;;;AAWO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AACtB,MAA2C;AACjC,QAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,CAAA,CAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,MAAIZ;AAEA,kCAAU,UAAAF,EAAS,CAAA;AAGvB,QAAMe,IAAQd,KAAA,gBAAAA,EAAc,OAAO,CAACe,MAA8BA,MAAS,SAErEC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,2BACKW,GAA2B,EAAA,eAAed,GACvC,UAAC,gBAAAe,EAAAC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACL,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAP;AAAA,MACJ;AAAA,MACA,WAAWgB,EAAe;AAAA,QACtB;AAAA,QACAjB,KAAuB;AAAA,QACvB;AAAA,QACAY,KAA0B;AAAA,QAC1Bd,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKb;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWgB,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,cACA;AAAA,cACAL,KAA0B;AAAA,YAAA,CAC7B;AAAA,YAED,UAAA,gBAAAE;AAAA,cAACI;AAAA,cAAA;AAAA,gBACG,aAAa;AAAA,kBACT,WAAWf;AAAA,gBACf;AAAA,gBACA,OAAAO;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCf;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAET,CAAA,EACJ,CAAA;AAER;"}
+{"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 { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging = false,\n    shouldFillContainer,\n    outlineOffset = 2,\n    shouldBeShown = false,\n    showAttachments = false,\n}: BlockItemWrapperProps): ReactElement => {\n    const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\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 = openFlyoutIds.length > 0 || shouldBeShown;\n\n    return (\n        <DragPreviewContextProvider isDragPreview={isDragging}>\n            <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\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                            attachments={{\n                                isEnabled: showAttachments,\n                            }}\n                            items={items}\n                        />\n                    </div>\n                    {children}\n                </div>\n            </MultiFlyoutContextProvider>\n        </DragPreviewContextProvider>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","openFlyoutIds","setOpenFlyoutIds","useState","DEFAULT_MENU_BUTTON_ID","wrapperRef","useRef","items","item","shouldToolbarBeVisible","DragPreviewContextProvider","jsx","MultiFlyoutContextProvider","jsxs","joinClassNames","Toolbar"],"mappings":";;;;;;;AAWO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AACtB,MAA2C;AACjC,QAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,CAAA,CAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,MAAIZ;AAEA,kCAAU,UAAAF,EAAS,CAAA;AAGvB,QAAMe,IAAQd,KAAA,gBAAAA,EAAc,OAAO,CAACe,MAA8BA,MAAS,SAErEC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,2BACKW,GAA2B,EAAA,eAAed,GACvC,UAAC,gBAAAe,EAAAC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACL,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAP;AAAA,MACJ;AAAA,MACA,WAAWgB,EAAe;AAAA,QACtB;AAAA,QACAjB,KAAuB;AAAA,QACvB;AAAA,QACAY,KAA0B;AAAA,QAC1Bd,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKb;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWgB,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,cACA;AAAA,cACAL,KAA0B;AAAA,YAAA,CAC7B;AAAA,YAED,UAAA,gBAAAE;AAAA,cAACI;AAAA,cAAA;AAAA,gBACG,aAAa;AAAA,kBACT,WAAWf;AAAA,gBACf;AAAA,gBACA,OAAAO;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCf;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAET,CAAA,EACJ,CAAA;AAER;"}

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

@@ -1,14 +1,14 @@
 import { jsx as h } from "react/jsx-runtime";
 import { useMemoizedId as A } from "@frontify/fondue";
-import { useMultiFlyoutState as l } from "../hooks/useMultiFlyoutState.es.js";
-import { AttachmentsToolbarButtonTrigger as d } from "./AttachmentsToolbarButtonTrigger.es.js";
-import { useDragPreviewContext as u } from "../context/DragPreviewContext.es.js";
+import { useDragPreviewContext as l } from "../context/DragPreviewContext.es.js";
+import { useMultiFlyoutState as d } from "../hooks/useMultiFlyoutState.es.js";
+import { AttachmentsToolbarButtonTrigger as u } from "./AttachmentsToolbarButtonTrigger.es.js";
 import { useAttachmentsContext as T } from "../../../../hooks/useAttachments.es.js";
 import { Attachments as g } from "../../../Attachments/Attachments.es.js";
 const f = "attachments", U = ({
   flyoutId: o = f
 }) => {
-  const n = A(o), { appBridge: r, attachments: m, onAttachmentsAdd: t, onAttachmentDelete: s, onAttachmentReplace: e, onAttachmentsSorted: a } = T(), { isOpen: i, onOpenChange: c } = l(n), p = u();
+  const n = A(o), { appBridge: r, attachments: m, onAttachmentsAdd: t, onAttachmentDelete: s, onAttachmentReplace: e, onAttachmentsSorted: a } = T(), { isOpen: i, onOpenChange: c } = d(n), p = l();
   return /* @__PURE__ */ h(
     g,
     {
@@ -20,7 +20,7 @@ const f = "attachments", U = ({
       onBrowse: t,
       items: m,
       appBridge: r,
-      triggerComponent: d,
+      triggerComponent: u,
       isOpen: i && !p,
       onOpenChange: c
     }

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@frontify/fondue';\n\nimport { useAttachmentsContext } from '../../../../hooks';\nimport { Attachments } from '../../../Attachments';\nimport { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';\n\nimport { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\n\nexport const DEFAULT_ATTACHMENTS_BUTTON_ID = 'attachments';\n\ntype AttachmentsToolbarButtonProps = { flyoutId?: string };\n\nexport const AttachmentsToolbarButton = ({\n    flyoutId = DEFAULT_ATTACHMENTS_BUTTON_ID,\n}: AttachmentsToolbarButtonProps) => {\n    const id = useMemoizedId(flyoutId);\n\n    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =\n        useAttachmentsContext();\n\n    const { isOpen, onOpenChange } = useMultiFlyoutState(id);\n    const isDragPreview = useDragPreviewContext();\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={AttachmentsToolbarButtonTrigger}\n            isOpen={isOpen && !isDragPreview}\n            onOpenChange={onOpenChange}\n        />\n    );\n};\n"],"names":["DEFAULT_ATTACHMENTS_BUTTON_ID","AttachmentsToolbarButton","flyoutId","id","useMemoizedId","appBridge","attachments","onAttachmentsAdd","onAttachmentDelete","onAttachmentReplace","onAttachmentsSorted","useAttachmentsContext","isOpen","onOpenChange","useMultiFlyoutState","isDragPreview","useDragPreviewContext","jsx","Attachments","AttachmentsToolbarButtonTrigger"],"mappings":";;;;;;;AAWO,MAAMA,IAAgC,eAIhCC,IAA2B,CAAC;AAAA,EACrC,UAAAC,IAAWF;AACf,MAAqC;AAC3B,QAAAG,IAAKC,EAAcF,CAAQ,GAE3B,EAAE,WAAAG,GAAW,aAAAC,GAAa,kBAAAC,GAAkB,oBAAAC,GAAoB,qBAAAC,GAAqB,qBAAAC,MACvFC,KAEE,EAAE,QAAAC,GAAQ,cAAAC,EAAa,IAAIC,EAAoBX,CAAE,GACjDY,IAAgBC;AAGlB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,UAAUX;AAAA,MACV,UAAUC;AAAA,MACV,qBAAqBC;AAAA,MACrB,qBAAqBA;AAAA,MACrB,UAAUC;AAAA,MACV,UAAUH;AAAA,MACV,OAAOD;AAAA,MACP,WAAAD;AAAA,MACA,kBAAkBc;AAAA,MAClB,QAAQP,KAAU,CAACG;AAAA,MACnB,cAAAF;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"AttachmentsToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@frontify/fondue';\n\nimport { useAttachmentsContext } from '../../../../hooks';\nimport { Attachments } from '../../../Attachments';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';\n\nimport { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';\n\nexport const DEFAULT_ATTACHMENTS_BUTTON_ID = 'attachments';\n\ntype AttachmentsToolbarButtonProps = { flyoutId?: string };\n\nexport const AttachmentsToolbarButton = ({\n    flyoutId = DEFAULT_ATTACHMENTS_BUTTON_ID,\n}: AttachmentsToolbarButtonProps) => {\n    const id = useMemoizedId(flyoutId);\n\n    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =\n        useAttachmentsContext();\n\n    const { isOpen, onOpenChange } = useMultiFlyoutState(id);\n    const isDragPreview = useDragPreviewContext();\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={AttachmentsToolbarButtonTrigger}\n            isOpen={isOpen && !isDragPreview}\n            onOpenChange={onOpenChange}\n        />\n    );\n};\n"],"names":["DEFAULT_ATTACHMENTS_BUTTON_ID","AttachmentsToolbarButton","flyoutId","id","useMemoizedId","appBridge","attachments","onAttachmentsAdd","onAttachmentDelete","onAttachmentReplace","onAttachmentsSorted","useAttachmentsContext","isOpen","onOpenChange","useMultiFlyoutState","isDragPreview","useDragPreviewContext","jsx","Attachments","AttachmentsToolbarButtonTrigger"],"mappings":";;;;;;;AAWO,MAAMA,IAAgC,eAIhCC,IAA2B,CAAC;AAAA,EACrC,UAAAC,IAAWF;AACf,MAAqC;AAC3B,QAAAG,IAAKC,EAAcF,CAAQ,GAE3B,EAAE,WAAAG,GAAW,aAAAC,GAAa,kBAAAC,GAAkB,oBAAAC,GAAoB,qBAAAC,GAAqB,qBAAAC,MACvFC,KAEE,EAAE,QAAAC,GAAQ,cAAAC,EAAa,IAAIC,EAAoBX,CAAE,GACjDY,IAAgBC;AAGlB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,UAAUX;AAAA,MACV,UAAUC;AAAA,MACV,qBAAqBC;AAAA,MACrB,qBAAqBA;AAAA,MACrB,UAAUC;AAAA,MACV,UAAUH;AAAA,MACV,OAAOD;AAAA,MACP,WAAAD;AAAA,MACA,kBAAkBc;AAAA,MAClB,QAAQP,KAAU,CAACG;AAAA,MACnB,cAAAF;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsToolbarButtonTrigger.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\nimport { type AttachmentsTriggerProps } from '../../../Attachments/types';\n\nimport { BaseToolbarButton } from '../BaseToolbarButton';\n\nexport const AttachmentsToolbarButtonTrigger = ({\n    children,\n    isFlyoutOpen,\n    triggerProps,\n    triggerRef,\n}: AttachmentsTriggerProps) => (\n    <BaseToolbarButton\n        forceActiveStyle={isFlyoutOpen}\n        data-test-id=\"attachments-toolbar-button-trigger\"\n        {...triggerProps}\n        ref={triggerRef}\n    >\n        <IconPaperclip16 />\n        {children}\n        <IconCaretDown12 />\n    </BaseToolbarButton>\n);\n"],"names":["AttachmentsToolbarButtonTrigger","children","isFlyoutOpen","triggerProps","triggerRef","jsxs","BaseToolbarButton","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;AAOO,MAAMA,IAAkC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AACJ,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,kBAAkBJ;AAAA,IAClB,gBAAa;AAAA,IACZ,GAAGC;AAAA,IACJ,KAAKC;AAAA,IAEL,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAgB,EAAA;AAAA,MAChBP;AAAA,wBACAQ,GAAgB,EAAA;AAAA,IAAA;AAAA,EAAA;AACrB;"}
+{"version":3,"file":"AttachmentsToolbarButtonTrigger.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\n\nimport { type AttachmentsTriggerProps } from '../../../Attachments/types';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\n\nexport const AttachmentsToolbarButtonTrigger = ({\n    children,\n    isFlyoutOpen,\n    triggerProps,\n    triggerRef,\n}: AttachmentsTriggerProps) => (\n    <BaseToolbarButton\n        forceActiveStyle={isFlyoutOpen}\n        data-test-id=\"attachments-toolbar-button-trigger\"\n        {...triggerProps}\n        ref={triggerRef}\n    >\n        <IconPaperclip16 />\n        {children}\n        <IconCaretDown12 />\n    </BaseToolbarButton>\n);\n"],"names":["AttachmentsToolbarButtonTrigger","children","isFlyoutOpen","triggerProps","triggerRef","jsxs","BaseToolbarButton","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;AAOO,MAAMA,IAAkC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AACJ,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,kBAAkBJ;AAAA,IAClB,gBAAa;AAAA,IACZ,GAAGC;AAAA,IACJ,KAAKC;AAAA,IAEL,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAgB,EAAA;AAAA,MAChBP;AAAA,wBACAQ,GAAgB,EAAA;AAAA,IAAA;AAAA,EAAA;AACrB;"}

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

@@ -1 +1 @@
-{"version":3,"file":"BaseToolbarButton.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/BaseToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from 'react';\nimport { getToolbarButtonClassNames } from './helpers';\n\ntype BaseToolbarButtonProps = {\n    children: ReactNode;\n    forceActiveStyle?: boolean;\n    cursor?: 'pointer' | 'grab';\n    'data-test-id'?: string;\n} & HTMLAttributes<HTMLButtonElement>;\n\nexport const BaseToolbarButton = forwardRef<HTMLButtonElement, BaseToolbarButtonProps>(\n    (\n        {\n            onClick,\n            children,\n            forceActiveStyle,\n            cursor = 'pointer',\n            'data-test-id': dataTestId = 'base-toolbar-button',\n            ...props\n        },\n        ref,\n    ) => (\n        <button\n            onClick={onClick}\n            className={getToolbarButtonClassNames(cursor, forceActiveStyle)}\n            data-test-id={dataTestId}\n            {...props}\n            ref={ref}\n        >\n            {children}\n        </button>\n    ),\n);\n\nBaseToolbarButton.displayName = 'BaseToolbarButton';\n"],"names":["BaseToolbarButton","forwardRef","onClick","children","forceActiveStyle","cursor","dataTestId","props","ref","jsx","getToolbarButtonClassNames"],"mappings":";;;AAYO,MAAMA,IAAoBC;AAAA,EAC7B,CACI;AAAA,IACI,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,SAAAP;AAAA,MACA,WAAWQ,EAA2BL,GAAQD,CAAgB;AAAA,MAC9D,gBAAcE;AAAA,MACb,GAAGC;AAAA,MACJ,KAAAC;AAAA,MAEC,UAAAL;AAAA,IAAA;AAAA,EACL;AAER;AAEAH,EAAkB,cAAc;"}
+{"version":3,"file":"BaseToolbarButton.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/BaseToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from 'react';\n\nimport { getToolbarButtonClassNames } from './helpers';\n\ntype BaseToolbarButtonProps = {\n    children: ReactNode;\n    forceActiveStyle?: boolean;\n    cursor?: 'pointer' | 'grab';\n    'data-test-id'?: string;\n} & HTMLAttributes<HTMLButtonElement>;\n\nexport const BaseToolbarButton = forwardRef<HTMLButtonElement, BaseToolbarButtonProps>(\n    (\n        {\n            onClick,\n            children,\n            forceActiveStyle,\n            cursor = 'pointer',\n            'data-test-id': dataTestId = 'base-toolbar-button',\n            ...props\n        },\n        ref,\n    ) => (\n        <button\n            onClick={onClick}\n            className={getToolbarButtonClassNames(cursor, forceActiveStyle)}\n            data-test-id={dataTestId}\n            {...props}\n            ref={ref}\n        >\n            {children}\n        </button>\n    ),\n);\n\nBaseToolbarButton.displayName = 'BaseToolbarButton';\n"],"names":["BaseToolbarButton","forwardRef","onClick","children","forceActiveStyle","cursor","dataTestId","props","ref","jsx","getToolbarButtonClassNames"],"mappings":";;;AAaO,MAAMA,IAAoBC;AAAA,EAC7B,CACI;AAAA,IACI,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,SAAAP;AAAA,MACA,WAAWQ,EAA2BL,GAAQD,CAAgB;AAAA,MAC9D,gBAAcE;AAAA,MACb,GAAGC;AAAA,MACJ,KAAAC;AAAA,MAEC,UAAAL;AAAA,IAAA;AAAA,EACL;AAER;AAEAH,EAAkB,cAAc;"}