@frontify/guideline-blocks-settings 2.1.17 → 3.0.1

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

@@ -1,135 +1,131 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useSortable as F } from "@dnd-kit/sortable";
-import { useFileInput as R, useAssetUpload as C } from "@frontify/app-bridge";
-import { LoadingCircle as j, Dropdown as r, Button as k } from "@frontify/fondue/components";
-import { IconGrabHandle as G, IconPen as $, IconArrowCircleUp as E, IconImageStack as T, IconTrashBin as U, IconImage as B, IconPlayFrame as H, IconMusicNote as L, IconDocument as M } from "@frontify/fondue/icons";
-import { useFocusRing as V } from "@react-aria/focus";
-import { forwardRef as q, useState as O, useEffect as x } from "react";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { useSortable as P } from "@dnd-kit/sortable";
+import { useFileInput as C, useAssetUpload as R } from "@frontify/app-bridge";
+import { LoadingCircle as F, Button as v, Dropdown as s } from "@frontify/fondue/components";
+import { IconGrabHandle as j, IconPen as k, IconArrowCircleUp as G, IconImageStack as $, IconTrashBin as E, IconImage as T, IconPlayFrame as U, IconMusicNote as q, IconDocument as B } from "@frontify/fondue/icons";
+import { forwardRef as H, useState as L, useEffect as I } from "react";
 import { joinClassNames as g } from "../../utilities/react/joinClassNames.es.js";
-const J = (e) => e === "IMAGE" ? /* @__PURE__ */ t(B, { size: "24" }) : e === "VIDEO" ? /* @__PURE__ */ t(H, { size: "24" }) : e === "AUDIO" ? /* @__PURE__ */ t(L, { size: "24" }) : /* @__PURE__ */ t(M, { size: "24" }), I = q(
+const M = (t) => t === "IMAGE" ? /* @__PURE__ */ e(T, { size: "24" }) : t === "VIDEO" ? /* @__PURE__ */ e(U, { size: "24" }) : t === "AUDIO" ? /* @__PURE__ */ e(q, { size: "24" }) : /* @__PURE__ */ e(B, { size: "24" }), y = H(
   ({
-    item: e,
-    isEditing: d,
-    draggableProps: w,
-    transformStyle: p,
-    isDragging: a,
-    isOverlay: i,
-    isLoading: s,
-    onDelete: m,
-    onReplaceWithBrowse: u,
-    onReplaceWithUpload: z,
-    onDownload: N
-  }, b) => {
-    const [f, c] = O(), [A, { selectedFiles: l }] = R({ multiple: !0, accept: "image/*" }), [S, { results: y, doneAll: h }] = C(), { focusProps: D, isFocusVisible: v } = V();
-    x(() => {
-      l && S(l[0]);
-    }, [l]), x(() => {
-      h && z(y[0]);
-    }, [h, y]);
-    const P = s || l && !h;
-    return /* @__PURE__ */ n(
+    item: t,
+    isEditing: p,
+    draggableProps: m,
+    transformStyle: u,
+    isDragging: i,
+    isOverlay: r,
+    isLoading: n,
+    onDelete: w,
+    onReplaceWithBrowse: f,
+    onReplaceWithUpload: x,
+    onDownload: z
+  }, N) => {
+    const [c, l] = L(), [A, { selectedFiles: d }] = C({ multiple: !0, accept: "image/*" }), [S, { results: b, doneAll: h }] = R();
+    I(() => {
+      d && S(d[0]);
+    }, [d]), I(() => {
+      h && x(b[0]);
+    }, [h, b]);
+    const D = n || d && !h;
+    return /* @__PURE__ */ a(
       "button",
       {
         type: "button",
         "aria-label": "Download attachment",
         "data-test-id": "attachments-item",
-        onClick: () => !f && N?.(),
-        ref: b,
+        onClick: () => !c && z?.(),
+        ref: N,
         style: {
-          ...p,
-          opacity: a && !i ? 0.3 : 1,
+          ...u,
+          opacity: i && !r ? 0.3 : 1,
           fontFamily: "var(-f-theme-settings-body-font-family)"
         },
         className: g([
-          "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-container-secondary-hover -tw-outline-offset-1",
-          a ? "tw-bg-container-secondary-hover" : ""
+          "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-surface-hover focus-visible:tw-outline focus-visible:!-tw-outline-offset-4",
+          i ? "tw-bg-surface-hover" : ""
         ]),
         children: [
-          /* @__PURE__ */ t("div", { className: "tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container", children: P ? /* @__PURE__ */ t(j, { size: "small" }) : J(e.objectType) }),
-          /* @__PURE__ */ n("div", { className: "tw-text-small 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-secondary group-hover:tw-text-container-secondary-on-secondary-container", children: e.title }),
-            /* @__PURE__ */ t("div", { className: "tw-text-secondary", children: `${e.fileSizeHumanReadable} - ${e.extension}` })
+          /* @__PURE__ */ e("div", { className: "tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container", children: D ? /* @__PURE__ */ e(F, { size: "small" }) : M(t.objectType) }),
+          /* @__PURE__ */ a("div", { className: "tw-text-small tw-flex-1 tw-min-w-0", children: [
+            /* @__PURE__ */ e("div", { className: "tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container", children: t.title }),
+            /* @__PURE__ */ e("div", { className: "tw-text-secondary", children: `${t.fileSizeHumanReadable} - ${t.extension}` })
           ] }),
-          d && /* @__PURE__ */ n(
+          p && /* @__PURE__ */ a(
             "div",
             {
               "data-test-id": "attachments-actionbar",
               className: g([
-                "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",
-                i || f?.id === e.id ? "tw-opacity-100" : "tw-opacity-0"
+                "tw-flex tw-gap-0.5 group-hover:tw-opacity-100 group-focus-visible:tw-opacity-100 has-[:focus-visible]:tw-opacity-100",
+                r || c?.id === t.id ? "tw-opacity-100" : "tw-opacity-0"
               ]),
               children: [
-                /* @__PURE__ */ t(
-                  "button",
+                /* @__PURE__ */ e(
+                  v,
                   {
-                    type: "button",
-                    ...D,
-                    ...w,
+                    aspect: "square",
+                    emphasis: "weak",
                     "aria-label": "Drag attachment",
                     className: g([
-                      " tw-border-primary tw-bg-container-secondary active:tw-bg-container-secondary-active 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-medium tw-h-9 tw-w-9 ",
-                      a || i ? "tw-cursor-grabbing tw-bg-container-secondary-active hover:tw-bg-container-secondary-active" : "tw-cursor-grab hover:tw-bg-container-secondary-hover",
-                      v && "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none",
-                      v && "tw-z-[2]"
+                      i || r ? "tw-cursor-grabbing" : "tw-cursor-grab",
+                      "focus-visible:tw-z-[2]"
                     ]),
-                    children: /* @__PURE__ */ t(G, {})
+                    ...m,
+                    children: /* @__PURE__ */ e(j, {})
                   }
                 ),
-                /* @__PURE__ */ t("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ n(
-                  r.Root,
+                /* @__PURE__ */ e("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ a(
+                  s.Root,
                   {
-                    open: f?.id === e.id,
-                    onOpenChange: (o) => c(o ? e : void 0),
+                    open: c?.id === t.id,
+                    onOpenChange: (o) => l(o ? t : void 0),
                     children: [
-                      /* @__PURE__ */ t(r.Trigger, { children: /* @__PURE__ */ t(
-                        k,
+                      /* @__PURE__ */ e(s.Trigger, { children: /* @__PURE__ */ e(
+                        v,
                         {
                           aspect: "square",
-                          ref: b,
+                          emphasis: c?.id === t.id ? "default" : "weak",
                           onPress: (o) => {
                             o?.stopPropagation(), o?.preventDefault();
                           },
-                          emphasis: "default",
-                          children: /* @__PURE__ */ t($, { size: "20" })
+                          children: /* @__PURE__ */ e(k, { size: "20" })
                         }
                       ) }),
-                      /* @__PURE__ */ n(r.Content, { side: "right", children: [
-                        /* @__PURE__ */ n(r.Group, { children: [
-                          /* @__PURE__ */ n(
-                            r.Item,
+                      /* @__PURE__ */ a(s.Content, { side: "right", children: [
+                        /* @__PURE__ */ a(s.Group, { children: [
+                          /* @__PURE__ */ a(
+                            s.Item,
                             {
                               "data-test-id": "menu-item",
                               onSelect: (o) => {
-                                o?.stopPropagation(), A(), c(void 0);
+                                o?.stopPropagation(), A(), l(void 0);
                               },
                               children: [
-                                /* @__PURE__ */ t(E, { size: "20" }),
+                                /* @__PURE__ */ e(G, { size: "20" }),
                                 "Replace with upload"
                               ]
                             }
                           ),
-                          /* @__PURE__ */ n(
-                            r.Item,
+                          /* @__PURE__ */ a(
+                            s.Item,
                             {
                               onSelect: (o) => {
-                                o?.stopPropagation(), u(), c(void 0);
+                                o?.stopPropagation(), f(), l(void 0);
                               },
                               children: [
-                                /* @__PURE__ */ t(T, { size: "20" }),
+                                /* @__PURE__ */ e($, { size: "20" }),
                                 "Replace with asset"
                               ]
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ t(r.Group, { children: /* @__PURE__ */ n(
-                          r.Item,
+                        /* @__PURE__ */ e(s.Group, { children: /* @__PURE__ */ a(
+                          s.Item,
                           {
                             emphasis: "danger",
                             onSelect: (o) => {
-                              o?.stopPropagation(), m(), c(void 0);
+                              o?.stopPropagation(), w(), l(void 0);
                             },
                             children: [
-                              /* @__PURE__ */ t(U, { size: "20" }),
+                              /* @__PURE__ */ e(E, { size: "20" }),
                               "Delete"
                             ]
                           }
@@ -146,28 +142,28 @@ const J = (e) => e === "IMAGE" ? /* @__PURE__ */ t(B, { size: "24" }) : e === "V
     );
   }
 );
-I.displayName = "AttachmentItem";
-const et = (e) => {
-  const { attributes: d, listeners: w, setNodeRef: p, transform: a, transition: i, isDragging: s } = F({
-    id: e.item.id
-  }), m = {
-    transform: a ? `translate(${a.x}px, ${a.y}px)` : "",
-    transition: i,
-    zIndex: s ? 2 : 1
-  }, u = { ...d, ...w };
-  return /* @__PURE__ */ t(
-    I,
+y.displayName = "AttachmentItem";
+const Y = (t) => {
+  const { attributes: p, listeners: m, setNodeRef: u, transform: i, transition: r, isDragging: n } = P({
+    id: t.item.id
+  }), w = {
+    transform: i ? `translate(${i.x}px, ${i.y}px)` : "",
+    transition: r,
+    zIndex: n ? 2 : 1
+  }, f = { ...p, ...m };
+  return /* @__PURE__ */ e(
+    y,
     {
-      ref: p,
-      isDragging: s,
-      transformStyle: m,
-      draggableProps: u,
-      ...e
+      ref: u,
+      isDragging: n,
+      transformStyle: w,
+      draggableProps: f,
+      ...t
     }
   );
 };
 export {
-  I as AttachmentItem,
-  et as SortableAttachmentItem
+  y as AttachmentItem,
+  Y 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 { useSortable } from '@dnd-kit/sortable';\nimport { type Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { LoadingCircle, Dropdown, Button } from '@frontify/fondue/components';\nimport {\n    IconArrowCircleUp,\n    IconImageStack,\n    IconPen,\n    IconTrashBin,\n    IconDocument,\n    IconImage,\n    IconPlayFrame,\n    IconMusicNote,\n    IconGrabHandle,\n} from '@frontify/fondue/icons';\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 <IconImage size=\"24\" />;\n    } else if (type === 'VIDEO') {\n        return <IconPlayFrame size=\"24\" />;\n    } else if (type === 'AUDIO') {\n        return <IconMusicNote size=\"24\" />;\n    } else {\n        return <IconDocument size=\"24\" />;\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 @eslint-react/exhaustive-deps\n        }, [selectedFiles]);\n\n        useEffect(() => {\n            if (doneAll) {\n                onReplaceWithUpload(uploadResults[0]);\n            }\n            // eslint-disable-next-line @eslint-react/exhaustive-deps\n        }, [doneAll, uploadResults]);\n\n        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);\n\n        return (\n            <button\n                type=\"button\"\n                aria-label=\"Download attachment\"\n                data-test-id=\"attachments-item\"\n                onClick={() => !selectedAsset && 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-container-secondary-hover -tw-outline-offset-1',\n                    isDragging ? 'tw-bg-container-secondary-hover' : '',\n                ])}\n            >\n                <div className=\"tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container\">\n                    {showLoadingCircle ? <LoadingCircle size=\"small\" /> : getDecorator(item.objectType)}\n                </div>\n                <div className=\"tw-text-small tw-flex-1 tw-min-w-0\">\n                    <div className=\"tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container\">\n                        {item.title}\n                    </div>\n                    <div className=\"tw-text-secondary\">{`${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                            type=\"button\"\n                            {...focusProps}\n                            {...draggableProps}\n                            aria-label=\"Drag attachment\"\n                            className={joinClassNames([\n                                ' tw-border-primary tw-bg-container-secondary active:tw-bg-container-secondary-active 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-medium tw-h-9 tw-w-9 ',\n                                isDragging || isOverlay\n                                    ? 'tw-cursor-grabbing tw-bg-container-secondary-active hover:tw-bg-container-secondary-active'\n                                    : 'tw-cursor-grab hover:tw-bg-container-secondary-hover',\n                                isFocusVisible &&\n                                    'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none',\n                                isFocusVisible && 'tw-z-[2]',\n                            ])}\n                        >\n                            <IconGrabHandle />\n                        </button>\n                        <div data-test-id=\"attachments-actionbar-flyout\">\n                            <Dropdown.Root\n                                open={selectedAsset?.id === item.id}\n                                onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n                            >\n                                <Dropdown.Trigger>\n                                    <Button\n                                        aspect=\"square\"\n                                        ref={ref as MutableRefObject<HTMLButtonElement>}\n                                        onPress={(e) => {\n                                            e?.stopPropagation();\n                                            e?.preventDefault();\n                                        }}\n                                        emphasis=\"default\"\n                                    >\n                                        <IconPen size=\"20\" />\n                                    </Button>\n                                </Dropdown.Trigger>\n                                <Dropdown.Content side=\"right\">\n                                    <Dropdown.Group>\n                                        <Dropdown.Item\n                                            data-test-id=\"menu-item\"\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                openFileDialog();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconArrowCircleUp size=\"20\" />\n                                            Replace with upload\n                                        </Dropdown.Item>\n                                        <Dropdown.Item\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                onReplaceWithBrowse();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconImageStack size=\"20\" />\n                                            Replace with asset\n                                        </Dropdown.Item>\n                                    </Dropdown.Group>\n                                    <Dropdown.Group>\n                                        <Dropdown.Item\n                                            emphasis=\"danger\"\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                onDelete();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconTrashBin size=\"20\" />\n                                            Delete\n                                        </Dropdown.Item>\n                                    </Dropdown.Group>\n                                </Dropdown.Content>\n                            </Dropdown.Root>\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","jsx","IconImage","IconPlayFrame","IconMusicNote","IconDocument","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","LoadingCircle","IconGrabHandle","Dropdown","isOpen","Button","e","IconPen","event","IconArrowCircleUp","IconImageStack","IconTrashBin","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 { useSortable } from '@dnd-kit/sortable';\nimport { type Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { LoadingCircle, Dropdown, Button } from '@frontify/fondue/components';\nimport {\n    IconArrowCircleUp,\n    IconImageStack,\n    IconPen,\n    IconTrashBin,\n    IconDocument,\n    IconImage,\n    IconPlayFrame,\n    IconMusicNote,\n    IconGrabHandle,\n} from '@frontify/fondue/icons';\nimport { 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 <IconImage size=\"24\" />;\n    } else if (type === 'VIDEO') {\n        return <IconPlayFrame size=\"24\" />;\n    } else if (type === 'AUDIO') {\n        return <IconMusicNote size=\"24\" />;\n    } else {\n        return <IconDocument size=\"24\" />;\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        useEffect(() => {\n            if (selectedFiles) {\n                uploadFile(selectedFiles[0]);\n            }\n            // eslint-disable-next-line @eslint-react/exhaustive-deps\n        }, [selectedFiles]);\n\n        useEffect(() => {\n            if (doneAll) {\n                onReplaceWithUpload(uploadResults[0]);\n            }\n            // eslint-disable-next-line @eslint-react/exhaustive-deps\n        }, [doneAll, uploadResults]);\n\n        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);\n\n        return (\n            <button\n                type=\"button\"\n                aria-label=\"Download attachment\"\n                data-test-id=\"attachments-item\"\n                onClick={() => !selectedAsset && 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-surface-hover focus-visible:tw-outline focus-visible:!-tw-outline-offset-4',\n                    isDragging ? 'tw-bg-surface-hover' : '',\n                ])}\n            >\n                <div className=\"tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container\">\n                    {showLoadingCircle ? <LoadingCircle size=\"small\" /> : getDecorator(item.objectType)}\n                </div>\n                <div className=\"tw-text-small tw-flex-1 tw-min-w-0\">\n                    <div className=\"tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-secondary group-hover:tw-text-container-secondary-on-secondary-container\">\n                        {item.title}\n                    </div>\n                    <div className=\"tw-text-secondary\">{`${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-hover:tw-opacity-100 group-focus-visible:tw-opacity-100 has-[:focus-visible]:tw-opacity-100',\n                            isOverlay || selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',\n                        ])}\n                    >\n                        <Button\n                            aspect=\"square\"\n                            emphasis=\"weak\"\n                            aria-label=\"Drag attachment\"\n                            className={joinClassNames([\n                                isDragging || isOverlay ? 'tw-cursor-grabbing' : 'tw-cursor-grab',\n                                'focus-visible:tw-z-[2]',\n                            ])}\n                            {...draggableProps}\n                        >\n                            <IconGrabHandle />\n                        </Button>\n                        <div data-test-id=\"attachments-actionbar-flyout\">\n                            <Dropdown.Root\n                                open={selectedAsset?.id === item.id}\n                                onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n                            >\n                                <Dropdown.Trigger>\n                                    <Button\n                                        aspect=\"square\"\n                                        emphasis={selectedAsset?.id === item.id ? 'default' : 'weak'}\n                                        onPress={(e) => {\n                                            e?.stopPropagation();\n                                            e?.preventDefault();\n                                        }}\n                                    >\n                                        <IconPen size=\"20\" />\n                                    </Button>\n                                </Dropdown.Trigger>\n                                <Dropdown.Content side=\"right\">\n                                    <Dropdown.Group>\n                                        <Dropdown.Item\n                                            data-test-id=\"menu-item\"\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                openFileDialog();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconArrowCircleUp size=\"20\" />\n                                            Replace with upload\n                                        </Dropdown.Item>\n                                        <Dropdown.Item\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                onReplaceWithBrowse();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconImageStack size=\"20\" />\n                                            Replace with asset\n                                        </Dropdown.Item>\n                                    </Dropdown.Group>\n                                    <Dropdown.Group>\n                                        <Dropdown.Item\n                                            emphasis=\"danger\"\n                                            onSelect={(event) => {\n                                                event?.stopPropagation();\n                                                onDelete();\n                                                setSelectedAsset(undefined);\n                                            }}\n                                        >\n                                            <IconTrashBin size=\"20\" />\n                                            Delete\n                                        </Dropdown.Item>\n                                    </Dropdown.Group>\n                                </Dropdown.Content>\n                            </Dropdown.Root>\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","jsx","IconImage","IconPlayFrame","IconMusicNote","IconDocument","AttachmentItem","forwardRef","item","isEditing","draggableProps","transformStyle","isDragging","isOverlay","isLoading","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onDownload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","useEffect","showLoadingCircle","jsxs","joinClassNames","LoadingCircle","Button","IconGrabHandle","Dropdown","isOpen","e","IconPen","event","IconArrowCircleUp","IconImageStack","IconTrashBin","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable"],"mappings":"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"}

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

@@ -1,102 +1,103 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { useSensors as tt, useSensor as U, PointerSensor as et, KeyboardSensor as ot, DndContext as nt, closestCenter as st } from "@dnd-kit/core";
-import { restrictToVerticalAxis as it } from "@dnd-kit/modifiers";
-import { SortableContext as rt, rectSortingStrategy as at, arrayMove as dt } from "@dnd-kit/sortable";
-import { useEditorState as lt, useAssetChooser as ct, useAssetUpload as mt } from "@frontify/app-bridge";
-import { AssetInput as ut, AssetInputSize as ht } from "@frontify/fondue";
-import { Flyout as f, Tooltip as I } from "@frontify/fondue/components";
-import { useState as r, useEffect as y } from "react";
-import { SortableAttachmentItem as pt } from "./AttachmentItem.es.js";
-import { AttachmentsButtonTrigger as gt } from "./AttachmentsButtonTrigger.es.js";
-const bt = ({
-  items: a = [],
-  onDelete: O,
-  onReplaceWithBrowse: T,
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useSensors as nt, useSensor as B, PointerSensor as st, KeyboardSensor as at, DndContext as rt, closestCenter as it } from "@dnd-kit/core";
+import { restrictToParentElement as dt } from "@dnd-kit/modifiers";
+import { SortableContext as lt, rectSortingStrategy as ct, arrayMove as ht } from "@dnd-kit/sortable";
+import { useEditorState as pt, useAssetChooser as ut, useAssetUpload as mt } from "@frontify/app-bridge";
+import { Flyout as I, Tooltip as y, AssetInput as s, Flex as gt } from "@frontify/fondue/components";
+import { IconImageStack as ft, IconArrowCircleUp as wt } from "@frontify/fondue/icons";
+import { useState as r, useEffect as S } from "react";
+import { SortableAttachmentItem as It } from "./AttachmentItem.es.js";
+import { AttachmentsButtonTrigger as yt } from "./AttachmentsButtonTrigger.es.js";
+const Et = ({
+  items: l = [],
+  onDelete: M,
+  onReplaceWithBrowse: O,
   onReplaceWithUpload: N,
-  onBrowse: W,
-  onUpload: P,
-  onSorted: R,
-  appBridge: c,
-  triggerComponent: V = gt,
-  isOpen: w,
-  onOpenChange: j
+  onBrowse: R,
+  onUpload: W,
+  onSorted: z,
+  appBridge: p,
+  triggerComponent: j = yt,
+  isOpen: A,
+  onOpenChange: K
 }) => {
-  const [n, S] = r(a), [k, z] = r(!1), K = tt(U(et), U(ot)), [M, A] = r(void 0), [C, m] = r(!1), [d, l] = r([]), [u, B] = r(null), h = lt(c), { openAssetChooser: x, closeAssetChooser: v } = ct(c), D = w !== void 0, b = D ? w : k, q = n?.find((t) => t.id === M), [G, { results: F, doneAll: E }] = mt({
-    onUploadProgress: () => !C && m(!0)
+  const [n, v] = r(l), [V, k] = r(!1), q = nt(B(st), B(at)), [G, C] = r(void 0), [x, u] = r(!1), [m, D] = r(!1), [c, h] = r([]), [g, H] = r(null), f = pt(p), { openAssetChooser: b, closeAssetChooser: F } = ut(p), L = A !== void 0, U = L ? A : V, J = n?.find((t) => t.id === G), [Q, { results: E, doneAll: P }] = mt({
+    onUploadProgress: () => !x && u(!0)
   }), i = (t) => {
-    (D ? j : z)?.(t);
+    (L ? K : k)?.(t);
   };
-  y(() => {
-    S(a);
-  }, [a]), y(() => {
-    u && (m(!0), G(u));
-  }, [u]), y(() => {
-    (async () => E && (await P(F), m(!1)))();
-  }, [E, F]);
-  const H = () => {
-    i(!1), x(
-      (t) => {
-        W(t), v(), i(!0);
+  S(() => {
+    v(l);
+  }, [l]), S(() => {
+    g && (u(!0), Q(g));
+  }, [g]), S(() => {
+    (async () => P && (await W(E), u(!1)))();
+  }, [P, E]);
+  const X = () => {
+    i(!1), b(
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      async (t) => {
+        F(), i(!0), D(!0), await R(t), D(!1);
       },
       {
         multiSelection: !0,
         selectedValueIds: n.map((t) => t.id)
       }
     );
-  }, J = (t) => {
-    i(!1), x(
+  }, Y = (t) => {
+    i(!1), b(
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       async (o) => {
-        i(!0), v(), l([...d, t.id]), await T(t, o[0]), l(d.filter((s) => s !== t.id));
+        i(!0), F(), h([...c, t.id]), await O(t, o[0]), h(c.filter((a) => a !== t.id));
       },
       {
         multiSelection: !1,
         selectedValueIds: n.map((o) => o.id)
       }
     );
-  }, Q = async (t, o) => {
-    l([...d, t.id]), await N(t, o), l(d.filter((s) => s !== t.id));
-  }, X = (t) => {
+  }, Z = async (t, o) => {
+    h([...c, t.id]), await N(t, o), h(c.filter((a) => a !== t.id));
+  }, _ = (t) => {
     const { active: o } = t;
-    A(o.id);
-  }, Y = (t) => {
-    const { active: o, over: s } = t;
-    if (s && o.id !== s.id && n) {
-      const _ = n.findIndex((p) => p.id === o.id), $ = n.findIndex((p) => p.id === s.id), L = dt(n, _, $);
-      S(L), R(L);
+    C(o.id);
+  }, $ = (t) => {
+    const { active: o, over: a } = t;
+    if (a && o.id !== a.id && n) {
+      const et = n.findIndex((w) => w.id === o.id), ot = n.findIndex((w) => w.id === a.id), T = ht(n, et, ot);
+      v(T), z(T);
     }
-    A(void 0);
-  }, Z = {
+    C(void 0);
+  }, tt = {
     onEscapeKeyDown: (t) => {
       t.stopPropagation(), i(!1);
     }
   };
-  return h || (n?.length ?? 0) > 0 ? /* @__PURE__ */ e("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ e(
-    f.Root,
+  return f || (n?.length ?? 0) > 0 ? /* @__PURE__ */ e("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ e(
+    I.Root,
     {
-      open: b,
-      onOpenChange: (t) => i(q ? !0 : t),
-      children: /* @__PURE__ */ g(I.Root, { enterDelay: 500, children: [
-        /* @__PURE__ */ e(I.Trigger, { asChild: !0, children: /* @__PURE__ */ e(f.Trigger, { asChild: !0, "data-test-id": "attachments-button-trigger", children: /* @__PURE__ */ e(V, { isFlyoutOpen: b, children: /* @__PURE__ */ e("div", { children: a.length > 0 ? a.length : "Add" }) }) }) }),
-        /* @__PURE__ */ e(f.Content, { side: "bottom", align: "end", ...Z, children: /* @__PURE__ */ g("div", { className: "tw-w-[300px]", "data-test-id": "attachments-flyout-content", children: [
+      open: U,
+      onOpenChange: (t) => i(J ? !0 : t),
+      children: /* @__PURE__ */ d(y.Root, { enterDelay: 500, children: [
+        /* @__PURE__ */ e(y.Trigger, { asChild: !0, children: /* @__PURE__ */ e(I.Trigger, { asChild: !0, "data-test-id": "attachments-button-trigger", children: /* @__PURE__ */ e(j, { isFlyoutOpen: U, children: /* @__PURE__ */ e("div", { children: l.length > 0 ? l.length : "Add" }) }) }) }),
+        /* @__PURE__ */ e(I.Content, { side: "bottom", align: "end", width: "300px", ...tt, children: /* @__PURE__ */ d("div", { className: "tw-w-full", "data-test-id": "attachments-flyout-content", children: [
           n.length > 0 && /* @__PURE__ */ e(
-            nt,
+            rt,
             {
-              sensors: K,
-              collisionDetection: st,
-              onDragStart: X,
-              onDragEnd: Y,
-              modifiers: [it],
-              children: /* @__PURE__ */ e(rt, { items: n, strategy: at, children: /* @__PURE__ */ e("div", { className: "tw-border-b tw-border-b-line tw-relative", children: n.map((t) => /* @__PURE__ */ e(
-                pt,
+              sensors: q,
+              collisionDetection: it,
+              onDragStart: _,
+              onDragEnd: $,
+              modifiers: [dt],
+              children: /* @__PURE__ */ e(lt, { items: n, strategy: ct, children: /* @__PURE__ */ e("div", { className: "tw-border-b tw-border-b-line tw-relative", children: n.map((t) => /* @__PURE__ */ e(
+                It,
                 {
-                  isEditing: h,
-                  isLoading: d.includes(t.id),
+                  isEditing: f,
+                  isLoading: c.includes(t.id),
                   item: t,
-                  onDelete: () => O(t),
-                  onReplaceWithBrowse: () => J(t),
-                  onReplaceWithUpload: (o) => Q(t, o),
-                  onDownload: () => c.dispatch({
+                  onDelete: () => M(t),
+                  onReplaceWithBrowse: () => Y(t),
+                  onReplaceWithUpload: (o) => Z(t, o),
+                  onDownload: () => p.dispatch({
                     name: "downloadAsset",
                     payload: t
                   })
@@ -105,25 +106,33 @@ const bt = ({
               )) }) })
             }
           ),
-          h && /* @__PURE__ */ g("div", { className: "tw-px-5 tw-py-3", children: [
+          f && /* @__PURE__ */ d("div", { className: "tw-px-5 tw-py-3", "data-test-id": "asset-input-placeholder", children: [
             /* @__PURE__ */ e("div", { className: "tw-font-primary tw-font-medium tw-text-primary tw-text-small tw-my-4", children: "Add attachments" }),
-            /* @__PURE__ */ e(
-              ut,
-              {
-                isLoading: C,
-                size: ht.Small,
-                onUploadClick: (t) => B(t),
-                onLibraryClick: H
-              }
-            )
+            x || m ? /* @__PURE__ */ d(s.Root, { orientation: "horizontal", children: [
+              /* @__PURE__ */ e(s.Preview, { children: /* @__PURE__ */ e(s.PreviewLoading, {}) }),
+              /* @__PURE__ */ e(s.Title, { children: "Asset" }),
+              /* @__PURE__ */ e(s.Metadata, { children: /* @__PURE__ */ e(s.MetadataItem, { children: /* @__PURE__ */ d(gt, { align: "center", gap: 0.5, children: [
+                m ? /* @__PURE__ */ e(ft, { size: 16 }) : /* @__PURE__ */ e(wt, { size: 16 }),
+                m ? "Loading" : "Uploading"
+              ] }) }) })
+            ] }) : /* @__PURE__ */ d(s.Placeholder, { children: [
+              /* @__PURE__ */ e(
+                s.UploadInput,
+                {
+                  allowMultiple: !0,
+                  onSelect: (t) => H(t.target.files)
+                }
+              ),
+              /* @__PURE__ */ e(s.BrowseInput, { onBrowse: X })
+            ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ e(I.Content, { side: "top", children: "Attachments" })
+        /* @__PURE__ */ e(y.Content, { side: "top", children: "Attachments" })
       ] })
     }
   ) }) : null;
 };
 export {
-  bt as Attachments
+  Et as Attachments
 };
 //# sourceMappingURL=Attachments.es.js.map