@frontify/guideline-blocks-settings 0.29.17 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @frontify/guideline-blocks-settings
 
+## 0.30.0
+
+### Minor Changes
+
+- [#672](https://github.com/Frontify/brand-sdk/pull/672) [`22eb8eb`](https://github.com/Frontify/brand-sdk/commit/22eb8eb8dce8f2d4dccf040376b3368b2962a59b) Thanks [@SamCreasey](https://github.com/SamCreasey)! - - Toolbar design updated
+  - Add Attachments to the Toolbar component. `isFlyoutOpen`, `setIsFlyoutOpen` and `flyoutItems` props have been removed from the Toolbar and replaced
+    with a `flyoutMenu` object (`{ items: FlyoutItem[]; isOpen: boolean; onOpenChange: (isOpen: boolean)=>void }`).
+    `isFlyoutDisabled` prop has been removed.
+    `attachments` prop has been added (`{ isEnabled: boolean; isOpen: boolean; onOpenChange: (isOpen: boolean)=>void }`).
+    To enable block attachments in the Toolbar from the `BlockWrapper` component, set `showAttachments` to `true` and wrap the block in the `withAttachmentsProvider` HOC or alternatively, wrap the `BlockWrapper` in an `AttachmentsProvider`.
+  - `onAddAttachments` has been replaced with `onAttachmentsAdd` in the object returned from `useAttachments` hook.
+
+### Patch Changes
+
+- [#679](https://github.com/Frontify/brand-sdk/pull/679) [`61edea9`](https://github.com/Frontify/brand-sdk/commit/61edea939fc9c2c64badafb054a5c254c8cef580) Thanks [@ragi96](https://github.com/ragi96)! - feat(Attachments): replace download function to use the appBridge
+
 ## 0.29.17
 
 ### Patch Changes

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

@@ -1,102 +1,96 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { forwardRef as E, useState as L, useEffect as y } from "react";
-import { useFileInput as M, useAssetUpload as P } from "@frontify/app-bridge";
-import { useSortable as V } from "@dnd-kit/sortable";
-import { useFocusRing as B } from "@react-aria/focus";
-import { LoadingCircle as O, LoadingCircleSize as $, FOCUS_STYLE as T, IconGrabHandle20 as X, Flyout as G, FlyoutPlacement as H, Button as _, IconPen20 as Y, ButtonEmphasis as q, ActionMenu as J, MenuItemContentSize as g, IconArrowCircleUp20 as K, IconImageStack20 as Q, MenuItemStyle as W, IconTrashBin20 as Z, IconImage24 as tt, IconPlayFrame24 as et, IconMusicNote24 as ot, IconDocument24 as at } from "@frontify/fondue";
-import { joinClassNames as v } from "../../utilities/react/joinClassNames.es.js";
-const rt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(tt, {}) : e === "VIDEO" ? /* @__PURE__ */ t(et, {}) : e === "AUDIO" ? /* @__PURE__ */ t(ot, {}) : /* @__PURE__ */ t(at, {}), k = E(
+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 { useFocusRing as P } from "@react-aria/focus";
+import { LoadingCircle as V, LoadingCircleSize as B, FOCUS_STYLE as L, IconGrabHandle20 as U, Flyout as $, FlyoutPlacement as O, Button as T, IconPen20 as X, ButtonEmphasis as G, ActionMenu as H, MenuItemContentSize as f, IconArrowCircleUp20 as _, IconImageStack20 as Y, MenuItemStyle as q, IconTrashBin20 as J, IconImage24 as K, IconPlayFrame24 as Q, IconMusicNote24 as W, IconDocument24 as Z } from "@frontify/fondue";
+import { joinClassNames as h } from "../../utilities/react/joinClassNames.es.js";
+const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(K, {}) : e === "VIDEO" ? /* @__PURE__ */ t(Q, {}) : e === "AUDIO" ? /* @__PURE__ */ t(W, {}) : /* @__PURE__ */ t(Z, {}), y = A(
   ({
     item: e,
-    isEditing: c,
-    draggableProps: d,
+    isEditing: s,
+    draggableProps: c,
     transformStyle: u,
     isDragging: o,
-    isOverlay: r,
-    isLoading: i,
-    onDelete: w,
+    isOverlay: a,
+    isLoading: n,
+    onDelete: d,
     onReplaceWithBrowse: m,
-    onReplaceWithUpload: S
-  }, N) => {
-    const [a, n] = L(), [C, { selectedFiles: l }] = M({ multiple: !0, accept: "image/*" }), [F, { results: x, doneAll: p }] = P(), { focusProps: R, isFocusVisible: I } = B();
-    y(() => {
-      l && F(l[0]);
-    }, [l]), y(() => {
-      p && S(x[0]);
-    }, [p, x]);
-    const z = (s, b) => {
-      fetch(s).then((A) => {
-        A.blob().then((U) => {
-          const j = URL.createObjectURL(U), f = document.createElement("a");
-          f.href = j, f.download = b, f.click();
-        });
-      });
-    }, D = i || l && !p;
-    return /* @__PURE__ */ h(
+    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 } = P();
+    I(() => {
+      l && N(l[0]);
+    }, [l]), I(() => {
+      p && S(g[0]);
+    }, [p, g]);
+    const z = n || l && !p;
+    return /* @__PURE__ */ b(
       "button",
       {
         "aria-label": "Download attachment",
         "data-test-id": "attachments-item",
-        onClick: () => z(e.genericUrl, e.fileName),
-        ref: N,
+        onClick: () => w == null ? void 0 : w(),
+        ref: k,
         style: {
           ...u,
-          opacity: o && !r ? 0.3 : 1,
+          opacity: o && !a ? 0.3 : 1,
           fontFamily: "var(-f-theme-settings-body-font-family)"
         },
-        className: v([
+        className: h([
           "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",
           o ? "tw-bg-box-neutral-hover" : ""
         ]),
         children: [
-          /* @__PURE__ */ t("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: D ? /* @__PURE__ */ t(O, { size: $.Small }) : rt(e.objectType) }),
-          /* @__PURE__ */ h("div", { className: "tw-text-s tw-flex-1 tw-min-w-0", children: [
+          /* @__PURE__ */ t("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: z ? /* @__PURE__ */ t(V, { size: B.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}` })
           ] }),
-          c && /* @__PURE__ */ h(
+          s && /* @__PURE__ */ b(
             "div",
             {
               "data-test-id": "attachments-actionbar",
-              className: v([
+              className: h([
                 "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",
-                r || (a == null ? void 0 : a.id) === e.id ? "tw-opacity-100" : "tw-opacity-0"
+                a || (r == null ? void 0 : r.id) === e.id ? "tw-opacity-100" : "tw-opacity-0"
               ]),
               children: [
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    ...R,
-                    ...d,
+                    ...F,
+                    ...c,
                     "aria-label": "Drag attachment",
-                    className: v([
+                    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 || r ? "tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed" : "tw-cursor-grab hover:tw-bg-button-background-hover",
-                      I && T,
-                      I && "tw-z-[2]"
+                      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 && L,
+                      v && "tw-z-[2]"
                     ]),
-                    children: /* @__PURE__ */ t(X, {})
+                    children: /* @__PURE__ */ t(U, {})
                   }
                 ),
                 /* @__PURE__ */ t("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ t(
-                  G,
+                  $,
                   {
-                    placement: H.Right,
-                    isOpen: (a == null ? void 0 : a.id) === e.id,
+                    placement: O.Right,
+                    isOpen: (r == null ? void 0 : r.id) === e.id,
                     fitContent: !0,
                     legacyFooter: !1,
-                    onOpenChange: (s) => n(s ? e : void 0),
-                    trigger: (s, b) => /* @__PURE__ */ t(
-                      _,
+                    onOpenChange: (x) => i(x ? e : void 0),
+                    trigger: (x, R) => /* @__PURE__ */ t(
+                      T,
                       {
-                        ref: b,
-                        icon: /* @__PURE__ */ t(Y, {}),
-                        emphasis: q.Default,
-                        onClick: () => n(e)
+                        ref: R,
+                        icon: /* @__PURE__ */ t(X, {}),
+                        emphasis: G.Default,
+                        onClick: () => i(e)
                       }
                     ),
                     children: /* @__PURE__ */ t(
-                      J,
+                      H,
                       {
                         menuBlocks: [
                           {
@@ -104,23 +98,23 @@ const rt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(tt, {}) : e === "VIDEO" ? /*
                             menuItems: [
                               {
                                 id: "upload",
-                                size: g.XSmall,
+                                size: f.XSmall,
                                 title: "Replace with upload",
                                 onClick: () => {
-                                  C(), n(void 0);
+                                  C(), i(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(K, {}) })
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(_, {}) })
                               },
                               {
                                 id: "asset",
-                                size: g.XSmall,
+                                size: f.XSmall,
                                 title: "Replace with asset",
                                 onClick: () => {
-                                  m(), n(void 0);
+                                  m(), 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(Y, {}) })
                               }
                             ]
                           },
@@ -129,14 +123,14 @@ const rt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(tt, {}) : e === "VIDEO" ? /*
                             menuItems: [
                               {
                                 id: "delete",
-                                size: g.XSmall,
+                                size: f.XSmall,
                                 title: "Delete",
-                                style: W.Danger,
+                                style: q.Danger,
                                 onClick: () => {
-                                  w(), n(void 0);
+                                  d(), i(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(Z, {}) })
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(J, {}) })
                               }
                             ]
                           }
@@ -153,28 +147,28 @@ const rt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(tt, {}) : e === "VIDEO" ? /*
     );
   }
 );
-k.displayName = "AttachmentItem";
-const wt = (e) => {
-  const { attributes: c, listeners: d, setNodeRef: u, transform: o, transition: r, isDragging: i } = V({
+y.displayName = "AttachmentItem";
+const st = (e) => {
+  const { attributes: s, listeners: c, setNodeRef: u, transform: o, transition: a, isDragging: n } = M({
     id: e.item.id
-  }), w = {
+  }), d = {
     transform: o ? `translate(${o.x}px, ${o.y}px)` : "",
-    transition: r,
-    zIndex: i ? 2 : 1
-  }, m = { ...c, ...d };
+    transition: a,
+    zIndex: n ? 2 : 1
+  }, m = { ...s, ...c };
   return /* @__PURE__ */ t(
-    k,
+    y,
     {
       ref: u,
-      isDragging: i,
-      transformStyle: w,
+      isDragging: n,
+      transformStyle: d,
       draggableProps: m,
       ...e
     }
   );
 };
 export {
-  k as AttachmentItem,
-  wt as SortableAttachmentItem
+  y as AttachmentItem,
+  st as SortableAttachmentItem
 };
 //# sourceMappingURL=AttachmentItem.es.js.map

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';\nimport { useFocusRing } from '@react-aria/focus';\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';\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        },\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        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 download = (url: string, filename: string) => {\n            fetch(url).then((response) => {\n                response.blob().then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = filename;\n                    a.click();\n                });\n            });\n        };\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={() => download(item.genericUrl, item.fileName)}\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","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","focusProps","isFocusVisible","useFocusRing","useEffect","download","url","filename","response","blob","a","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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"}
+{"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';\nimport { useFocusRing } from '@react-aria/focus';\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';\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        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,KACpD,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;"}

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

@@ -1,135 +1,142 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { useState as r, useEffect as f } from "react";
-import { useSensors as q, useSensor as U, PointerSensor as B, KeyboardSensor as G, DndContext as H, closestCenter as J, DragOverlay as Q } from "@dnd-kit/core";
-import { SortableContext as X, rectSortingStrategy as Y, arrayMove as Z } from "@dnd-kit/sortable";
-import { useEditorState as _, useAssetUpload as $ } from "@frontify/app-bridge";
-import { LegacyTooltip as ee, TooltipPosition as te, Flyout as oe, FlyoutPlacement as se, IconPaperclip16 as ne, IconCaretDown12 as ie, AssetInput as re, AssetInputSize as le } from "@frontify/fondue";
-import { SortableAttachmentItem as de, AttachmentItem as ae } from "./AttachmentItem.es.js";
-import { restrictToWindowEdges as ce } from "@dnd-kit/modifiers";
-const ye = ({
-  items: l = [],
-  onDelete: x,
-  onReplaceWithBrowse: E,
-  onReplaceWithUpload: O,
-  onBrowse: W,
-  onUpload: N,
-  onSorted: P,
-  appBridge: d
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import { useState as d, useEffect as w } from "react";
+import { useSensors as X, useSensor as U, PointerSensor as Y, KeyboardSensor as Z, DndContext as _, closestCenter as $, DragOverlay as tt } from "@dnd-kit/core";
+import { restrictToWindowEdges as et } from "@dnd-kit/modifiers";
+import { SortableContext as ot, rectSortingStrategy as nt, arrayMove as st } from "@dnd-kit/sortable";
+import { useEditorState as it, useAssetUpload as lt } from "@frontify/app-bridge";
+import { LegacyTooltip as dt, TooltipPosition as at, Flyout as rt, FlyoutPlacement as ct, AssetInput as ut, AssetInputSize as ht } from "@frontify/fondue";
+import { SortableAttachmentItem as mt, AttachmentItem as gt } from "./AttachmentItem.es.js";
+import { AttachmentsButtonTrigger as pt } from "./AttachmentsButtonTrigger.es.js";
+const Dt = ({
+  items: a = [],
+  onDelete: A,
+  onReplaceWithBrowse: W,
+  onReplaceWithUpload: T,
+  onBrowse: N,
+  onUpload: P,
+  onSorted: R,
+  appBridge: i,
+  triggerComponent: j = pt,
+  isOpen: I,
+  onOpenChange: k
 }) => {
-  const [t, y] = r(l), [v, a] = r(!1), R = q(U(B), U(G)), [I, b] = r(void 0), [A, h] = r(!1), [c, u] = r([]), [m, T] = r(null), g = _(d), i = t == null ? void 0 : t.find((e) => e.id === I), [j, { results: S, doneAll: D }] = $({
-    onUploadProgress: () => !A && h(!0)
-  });
-  f(() => {
-    y(l);
-  }, [l]), f(() => {
-    m && (h(!0), j(m));
-  }, [m]), f(() => {
+  const [o, S] = d(a), [z, V] = d(!1), K = X(U(Y), U(Z)), [v, x] = d(void 0), [C, m] = d(!1), [r, u] = d([]), [g, M] = d(null), h = it(i), D = I !== void 0, p = D ? I : z, l = o == null ? void 0 : o.find((t) => t.id === v), [q, { results: b, doneAll: F }] = lt({
+    onUploadProgress: () => !C && m(!0)
+  }), c = (t) => {
+    const e = D ? k : V;
+    e == null || e(t);
+  };
+  w(() => {
+    S(a);
+  }, [a]), w(() => {
+    g && (m(!0), q(g));
+  }, [g]), w(() => {
     (async () => {
-      D && (await N(S), h(!1));
+      F && (await P(b), m(!1));
     })();
-  }, [D, S]);
-  const k = () => {
-    a(!1), d.openAssetChooser(
-      (e) => {
-        W(e), d.closeAssetChooser(), a(!0);
+  }, [F, b]);
+  const B = () => {
+    c(!1), i.openAssetChooser(
+      (t) => {
+        N(t), i.closeAssetChooser(), c(!0);
       },
       {
         multiSelection: !0,
-        selectedValueIds: t.map((e) => e.id)
+        selectedValueIds: o.map((t) => t.id)
       }
     );
-  }, C = (e) => {
-    a(!1), d.openAssetChooser(
-      async (s) => {
-        a(!0), d.closeAssetChooser(), u([...c, e.id]), await E(e, s[0]), u(c.filter((n) => n !== e.id));
+  }, E = (t) => {
+    c(!1), i.openAssetChooser(
+      async (e) => {
+        c(!0), i.closeAssetChooser(), u([...r, t.id]), await W(t, e[0]), u(r.filter((s) => s !== t.id));
       },
       {
         multiSelection: !1,
-        selectedValueIds: t.map((s) => s.id)
+        selectedValueIds: o.map((e) => e.id)
       }
     );
-  }, F = async (e, s) => {
-    u([...c, e.id]), await O(e, s), u(c.filter((n) => n !== e.id));
-  }, z = (e) => {
-    const { active: s } = e;
-    b(s.id);
-  }, V = (e) => {
-    const { active: s, over: n } = e;
-    if (n && s.id !== n.id && t) {
-      const K = t.findIndex((w) => w.id === s.id), M = t.findIndex((w) => w.id === n.id), L = Z(t, K, M);
-      y(L), P(L);
+  }, L = async (t, e) => {
+    u([...r, t.id]), await T(t, e), u(r.filter((s) => s !== t.id));
+  }, G = (t) => {
+    const { active: e } = t;
+    x(e.id);
+  }, H = (t) => {
+    const { active: e, over: s } = t;
+    if (s && e.id !== s.id && o) {
+      const J = o.findIndex((f) => f.id === e.id), Q = o.findIndex((f) => f.id === s.id), O = st(o, J, Q);
+      S(O), R(O);
     }
-    b(void 0);
+    x(void 0);
   };
-  return g || ((t == null ? void 0 : t.length) ?? 0) > 0 ? /* @__PURE__ */ o(
-    ee,
+  return h || ((o == null ? void 0 : o.length) ?? 0) > 0 ? /* @__PURE__ */ n(
+    dt,
     {
       withArrow: !0,
-      position: te.Top,
+      position: at.Top,
       content: "Attachments",
-      disabled: v,
+      disabled: p,
       enterDelay: 500,
-      triggerElement: /* @__PURE__ */ o("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ o(
-        oe,
+      triggerElement: /* @__PURE__ */ n("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ n(
+        rt,
         {
-          placement: se.BottomRight,
-          onOpenChange: (e) => a(i ? !0 : e),
-          isOpen: v,
+          placement: ct.BottomRight,
+          onOpenChange: (t) => c(l ? !0 : t),
+          isOpen: p,
           hug: !1,
           fitContent: !0,
           legacyFooter: !1,
-          trigger: /* @__PURE__ */ p("div", { className: "tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line", children: [
-            /* @__PURE__ */ o(ne, {}),
-            /* @__PURE__ */ o("div", { children: l.length > 0 ? l.length : "Add" }),
-            /* @__PURE__ */ o(ie, {})
-          ] }),
-          children: /* @__PURE__ */ p("div", { className: "tw-w-[300px]", children: [
-            t.length > 0 && /* @__PURE__ */ p(
-              H,
+          trigger: /* @__PURE__ */ n(j, { isFlyoutOpen: p, children: /* @__PURE__ */ n("div", { children: a.length > 0 ? a.length : "Add" }) }),
+          children: /* @__PURE__ */ y("div", { className: "tw-w-[300px]", "data-test-id": "attachments-flyout-content", children: [
+            o.length > 0 && /* @__PURE__ */ y(
+              _,
               {
-                sensors: R,
-                collisionDetection: J,
-                onDragStart: z,
-                onDragEnd: V,
-                modifiers: [ce],
+                sensors: K,
+                collisionDetection: $,
+                onDragStart: G,
+                onDragEnd: H,
+                modifiers: [et],
                 children: [
-                  /* @__PURE__ */ o(X, { items: t, strategy: Y, children: /* @__PURE__ */ o("div", { className: "tw-border-b tw-border-b-line", children: t.map((e) => /* @__PURE__ */ o(
-                    de,
+                  /* @__PURE__ */ n(ot, { items: o, strategy: nt, children: /* @__PURE__ */ n("div", { className: "tw-border-b tw-border-b-line", children: o.map((t) => /* @__PURE__ */ n(
+                    mt,
                     {
-                      isEditing: g,
-                      isLoading: c.includes(e.id),
-                      item: e,
-                      onDelete: () => x(e),
-                      onReplaceWithBrowse: () => C(e),
-                      onReplaceWithUpload: (s) => F(e, s)
+                      isEditing: h,
+                      isLoading: r.includes(t.id),
+                      item: t,
+                      onDelete: () => A(t),
+                      onReplaceWithBrowse: () => E(t),
+                      onReplaceWithUpload: (e) => L(t, e),
+                      onDownload: () => i.dispatch({
+                        name: "downloadAsset",
+                        payload: t
+                      })
                     },
-                    e.id
+                    t.id
                   )) }) }),
-                  /* @__PURE__ */ o(Q, { children: i && /* @__PURE__ */ o(
-                    ae,
+                  /* @__PURE__ */ n(tt, { children: l && /* @__PURE__ */ n(
+                    gt,
                     {
                       isOverlay: !0,
-                      isEditing: g,
-                      item: i,
+                      isEditing: h,
+                      item: l,
                       isDragging: !0,
-                      onDelete: () => x(i),
-                      onReplaceWithBrowse: () => C(i),
-                      onReplaceWithUpload: (e) => F(i, e)
+                      onDelete: () => A(l),
+                      onReplaceWithBrowse: () => E(l),
+                      onReplaceWithUpload: (t) => L(l, t)
                     },
-                    I
+                    v
                   ) })
                 ]
               }
             ),
-            g && /* @__PURE__ */ p("div", { className: "tw-px-5 tw-py-3", children: [
-              /* @__PURE__ */ o("div", { className: "tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4", children: "Add attachments" }),
-              /* @__PURE__ */ o(
-                re,
+            h && /* @__PURE__ */ y("div", { className: "tw-px-5 tw-py-3", children: [
+              /* @__PURE__ */ n("div", { className: "tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4", children: "Add attachments" }),
+              /* @__PURE__ */ n(
+                ut,
                 {
-                  isLoading: A,
-                  size: le.Small,
-                  onUploadClick: (e) => T(e),
-                  onLibraryClick: k
+                  isLoading: C,
+                  size: ht.Small,
+                  onUploadClick: (t) => M(t),
+                  onLibraryClick: B
                 }
               )
             ] })
@@ -140,6 +147,6 @@ const ye = ({
   ) : null;
 };
 export {
-  ye as Attachments
+  Dt as Attachments
 };
 //# sourceMappingURL=Attachments.es.js.map