@frontify/guideline-blocks-settings 1.0.13-alpha.5 → 1.0.13-alpha.7

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

@@ -1,51 +1,51 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { useSortable as C } from "@dnd-kit/sortable";
-import { useFileInput as R, useAssetUpload as A } from "@frontify/app-bridge";
-import { IconGrabHandle20 as j, FOCUS_STYLE as D, IconImage24 as E, IconPlayFrame24 as G, IconMusicNote24 as T, IconDocument24 as U } from "@frontify/fondue";
-import { LoadingCircle as $, Dropdown as a, Button as L } from "@frontify/fondue/components";
-import { IconPen as B, IconArrowCircleUp as H, IconImageStack as M, IconTrashBin as O } from "@frontify/fondue/icons";
+import { useSortable as R } from "@dnd-kit/sortable";
+import { useFileInput as C, useAssetUpload as A } from "@frontify/app-bridge";
+import { LoadingCircle as j, Dropdown as i, Button as D } 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 Y, useEffect as y } from "react";
+import { forwardRef as q, useState as O, useEffect as v } from "react";
 import { joinClassNames as g } from "../../utilities/react/joinClassNames.es.js";
-const _ = (o) => o === "IMAGE" ? /* @__PURE__ */ e(E, {}) : o === "VIDEO" ? /* @__PURE__ */ e(G, {}) : o === "AUDIO" ? /* @__PURE__ */ e(T, {}) : /* @__PURE__ */ e(U, {}), S = q(
+const J = (o) => o === "IMAGE" ? /* @__PURE__ */ e(B, { size: "24" }) : o === "VIDEO" ? /* @__PURE__ */ e(H, { size: "24" }) : o === "AUDIO" ? /* @__PURE__ */ e(L, { size: "24" }) : /* @__PURE__ */ e(M, { size: "24" }), k = q(
   ({
     item: o,
     isEditing: u,
     draggableProps: w,
     transformStyle: p,
-    isDragging: i,
+    isDragging: a,
     isOverlay: s,
     isLoading: c,
     onDelete: m,
-    onReplaceWithBrowse: h,
-    onReplaceWithUpload: N,
-    onDownload: b
+    onReplaceWithBrowse: b,
+    onReplaceWithUpload: z,
+    onDownload: h
   }, x) => {
-    const [n, l] = Y(), [k, { selectedFiles: d }] = R({ multiple: !0, accept: "image/*" }), [F, { results: I, doneAll: f }] = A(), { focusProps: P, isFocusVisible: v } = V();
-    y(() => {
-      d && F(d[0]);
-    }, [d]), y(() => {
-      f && N(I[0]);
+    const [n, l] = O(), [N, { selectedFiles: d }] = C({ multiple: !0, accept: "image/*" }), [S, { results: I, doneAll: f }] = A(), { focusProps: P, isFocusVisible: y } = V();
+    v(() => {
+      d && S(d[0]);
+    }, [d]), v(() => {
+      f && z(I[0]);
     }, [f, I]);
-    const z = c || d && !f;
+    const F = c || d && !f;
     return /* @__PURE__ */ r(
       "button",
       {
+        type: "button",
         "aria-label": "Download attachment",
         "data-test-id": "attachments-item",
-        onClick: () => !n && (b == null ? void 0 : b()),
+        onClick: () => !n && (h == null ? void 0 : h()),
         ref: x,
         style: {
           ...p,
-          opacity: i && !s ? 0.3 : 1,
+          opacity: a && !s ? 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-box-neutral-hover",
-          i ? "tw-bg-box-neutral-hover" : ""
+          a ? "tw-bg-box-neutral-hover" : ""
         ]),
         children: [
-          /* @__PURE__ */ e("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: z ? /* @__PURE__ */ e($, { size: "small" }) : _(o.objectType) }),
+          /* @__PURE__ */ e("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: F ? /* @__PURE__ */ e(j, { size: "small" }) : J(o.objectType) }),
           /* @__PURE__ */ r("div", { className: "tw-text-s 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-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: o.title }),
             /* @__PURE__ */ e("div", { className: "tw-text-text-weak", children: `${o.fileSizeHumanReadable} - ${o.extension}` })
@@ -62,26 +62,27 @@ const _ = (o) => o === "IMAGE" ? /* @__PURE__ */ e(E, {}) : o === "VIDEO" ? /* @
                 /* @__PURE__ */ e(
                   "button",
                   {
+                    type: "button",
                     ...P,
                     ...w,
                     "aria-label": "Drag attachment",
                     className: g([
                       " 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 ",
-                      i || s ? "tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed" : "tw-cursor-grab hover:tw-bg-button-background-hover",
-                      v && D,
-                      v && "tw-z-[2]"
+                      a || s ? "tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed" : "tw-cursor-grab hover:tw-bg-button-background-hover",
+                      y && "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none",
+                      y && "tw-z-[2]"
                     ]),
-                    children: /* @__PURE__ */ e(j, {})
+                    children: /* @__PURE__ */ e(G, {})
                   }
                 ),
                 /* @__PURE__ */ e("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ r(
-                  a.Root,
+                  i.Root,
                   {
                     open: (n == null ? void 0 : n.id) === o.id,
                     onOpenChange: (t) => l(t ? o : void 0),
                     children: [
-                      /* @__PURE__ */ e(a.Trigger, { children: /* @__PURE__ */ e(
-                        L,
+                      /* @__PURE__ */ e(i.Trigger, { children: /* @__PURE__ */ e(
+                        D,
                         {
                           aspect: "square",
                           ref: x,
@@ -89,46 +90,46 @@ const _ = (o) => o === "IMAGE" ? /* @__PURE__ */ e(E, {}) : o === "VIDEO" ? /* @
                             t == null || t.stopPropagation(), t == null || t.preventDefault();
                           },
                           emphasis: "default",
-                          children: /* @__PURE__ */ e(B, { size: "20" })
+                          children: /* @__PURE__ */ e($, { size: "20" })
                         }
                       ) }),
-                      /* @__PURE__ */ r(a.Content, { side: "right", children: [
-                        /* @__PURE__ */ r(a.Group, { children: [
+                      /* @__PURE__ */ r(i.Content, { side: "right", children: [
+                        /* @__PURE__ */ r(i.Group, { children: [
                           /* @__PURE__ */ r(
-                            a.Item,
+                            i.Item,
                             {
                               "data-test-id": "menu-item",
                               onSelect: (t) => {
-                                t == null || t.stopPropagation(), k(), l(void 0);
+                                t == null || t.stopPropagation(), N(), l(void 0);
                               },
                               children: [
-                                /* @__PURE__ */ e(H, { size: "20" }),
+                                /* @__PURE__ */ e(E, { size: "20" }),
                                 "Replace with upload"
                               ]
                             }
                           ),
                           /* @__PURE__ */ r(
-                            a.Item,
+                            i.Item,
                             {
                               onSelect: (t) => {
-                                t == null || t.stopPropagation(), h(), l(void 0);
+                                t == null || t.stopPropagation(), b(), l(void 0);
                               },
                               children: [
-                                /* @__PURE__ */ e(M, { size: "20" }),
+                                /* @__PURE__ */ e(T, { size: "20" }),
                                 "Replace with asset"
                               ]
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ e(a.Group, { children: /* @__PURE__ */ r(
-                          a.Item,
+                        /* @__PURE__ */ e(i.Group, { children: /* @__PURE__ */ r(
+                          i.Item,
                           {
                             emphasis: "danger",
                             onSelect: (t) => {
                               t == null || t.stopPropagation(), m(), l(void 0);
                             },
                             children: [
-                              /* @__PURE__ */ e(O, { size: "20" }),
+                              /* @__PURE__ */ e(U, { size: "20" }),
                               "Delete"
                             ]
                           }
@@ -145,28 +146,28 @@ const _ = (o) => o === "IMAGE" ? /* @__PURE__ */ e(E, {}) : o === "VIDEO" ? /* @
     );
   }
 );
-S.displayName = "AttachmentItem";
-const rt = (o) => {
-  const { attributes: u, listeners: w, setNodeRef: p, transform: i, transition: s, isDragging: c } = C({
+k.displayName = "AttachmentItem";
+const et = (o) => {
+  const { attributes: u, listeners: w, setNodeRef: p, transform: a, transition: s, isDragging: c } = R({
     id: o.item.id
   }), m = {
-    transform: i ? `translate(${i.x}px, ${i.y}px)` : "",
+    transform: a ? `translate(${a.x}px, ${a.y}px)` : "",
     transition: s,
     zIndex: c ? 2 : 1
-  }, h = { ...u, ...w };
+  }, b = { ...u, ...w };
   return /* @__PURE__ */ e(
-    S,
+    k,
     {
       ref: p,
       isDragging: c,
       transformStyle: m,
-      draggableProps: h,
+      draggableProps: b,
       ...o
     }
   );
 };
 export {
-  S as AttachmentItem,
-  rt as SortableAttachmentItem
+  k as AttachmentItem,
+  et 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 {\n    FOCUS_STYLE,\n    IconDocument24,\n    IconGrabHandle20,\n    IconImage24,\n    IconMusicNote24,\n    IconPlayFrame24,\n} from '@frontify/fondue';\nimport { LoadingCircle, Dropdown, Button } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconPen, IconTrashBin } 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 <IconImage24 />;\n    } else if (type === 'VIDEO') {\n        return <IconPlayFrame24 />;\n    } else if (type === 'AUDIO') {\n        return <IconMusicNote24 />;\n    } else {\n        return <IconDocument24 />;\n    }\n};\n\nexport const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(\n    (\n        {\n            item,\n            isEditing,\n            draggableProps,\n            transformStyle,\n            isDragging,\n            isOverlay,\n            isLoading,\n            onDelete,\n            onReplaceWithBrowse,\n            onReplaceWithUpload,\n            onDownload,\n        },\n        ref,\n    ) => {\n        const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>();\n        const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/*' });\n        const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();\n\n        const { focusProps, isFocusVisible } = useFocusRing();\n\n        useEffect(() => {\n            if (selectedFiles) {\n                uploadFile(selectedFiles[0]);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [selectedFiles]);\n\n        useEffect(() => {\n            if (doneAll) {\n                onReplaceWithUpload(uploadResults[0]);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [doneAll, uploadResults]);\n\n        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);\n\n        return (\n            <button\n                aria-label=\"Download attachment\"\n                data-test-id=\"attachments-item\"\n                onClick={() => !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-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 ? <LoadingCircle size=\"small\" /> : getDecorator(item.objectType)}\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                            <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","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","FOCUS_STYLE","IconGrabHandle20","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 { 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 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                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-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 ? <LoadingCircle size=\"small\" /> : getDecorator(item.objectType)}\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                            type=\"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 &&\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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"}

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

@@ -1,5 +1,5 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { IconPaperclip16 as a, IconCaretDown12 as i } from "@frontify/fondue";
+import { IconPaperclip as a, IconCaretDown as i } from "@frontify/fondue/icons";
 import { forwardRef as w } from "react";
 import { joinClassNames as l } from "../../utilities/react/joinClassNames.es.js";
 const u = w(
@@ -14,9 +14,9 @@ const u = w(
       "data-test-id": "attachments-button-trigger",
       ...o,
       children: [
-        /* @__PURE__ */ t(a, {}),
+        /* @__PURE__ */ t(a, { size: "16" }),
         e,
-        /* @__PURE__ */ t(i, {})
+        /* @__PURE__ */ t(i, { size: "12" })
       ]
     }
   )

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsButtonTrigger.es.js","sources":["../../../src/components/Attachments/AttachmentsButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\nimport { forwardRef } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentsTriggerProps } from './types';\n\nexport const AttachmentsButtonTrigger = forwardRef<HTMLButtonElement, AttachmentsTriggerProps>(\n    ({ children, isFlyoutOpen, ...props }, ref) => (\n        <button\n            ref={ref}\n            className={joinClassNames([\n                'tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line',\n                isFlyoutOpen\n                    ? 'tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed'\n                    : 'tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',\n            ])}\n            data-test-id=\"attachments-button-trigger\"\n            {...props}\n        >\n            <IconPaperclip16 />\n            {children}\n            <IconCaretDown12 />\n        </button>\n    ),\n);\n\nAttachmentsButtonTrigger.displayName = 'AttachmentsButtonTrigger';\n"],"names":["AttachmentsButtonTrigger","forwardRef","children","isFlyoutOpen","props","ref","jsxs","joinClassNames","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;;AASO,MAAMA,IAA2BC;AAAA,EACpC,CAAC,EAAE,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GAASC,MACnC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,WAAWE,EAAe;AAAA,QACtB;AAAA,QACAJ,IACM,kEACA;AAAA,MAAA,CACT;AAAA,MACD,gBAAa;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EAAgB;AAAA,QAChBP;AAAA,0BACAQ,GAAA,CAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7B;AAEAV,EAAyB,cAAc;"}
+{"version":3,"file":"AttachmentsButtonTrigger.es.js","sources":["../../../src/components/Attachments/AttachmentsButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconPaperclip } from '@frontify/fondue/icons';\nimport { forwardRef } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentsTriggerProps } from './types';\n\nexport const AttachmentsButtonTrigger = forwardRef<HTMLButtonElement, AttachmentsTriggerProps>(\n    ({ children, isFlyoutOpen, ...props }, ref) => (\n        <button\n            ref={ref}\n            className={joinClassNames([\n                'tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line',\n                isFlyoutOpen\n                    ? 'tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed'\n                    : 'tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',\n            ])}\n            data-test-id=\"attachments-button-trigger\"\n            {...props}\n        >\n            <IconPaperclip size=\"16\" />\n            {children}\n            <IconCaretDown size=\"12\" />\n        </button>\n    ),\n);\n\nAttachmentsButtonTrigger.displayName = 'AttachmentsButtonTrigger';\n"],"names":["AttachmentsButtonTrigger","forwardRef","children","isFlyoutOpen","props","ref","jsxs","joinClassNames","jsx","IconPaperclip","IconCaretDown"],"mappings":";;;;AASO,MAAMA,IAA2BC;AAAA,EACpC,CAAC,EAAE,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GAASC,MACnC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,WAAWE,EAAe;AAAA,QACtB;AAAA,QACAJ,IACM,kEACA;AAAA,MAAA,CACT;AAAA,MACD,gBAAa;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,QACxBP;AAAA,QACD,gBAAAM,EAACE,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrC;AAEAV,EAAyB,cAAc;"}

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

@@ -1,11 +1,10 @@
 import { jsx as e, jsxs as o, Fragment as A } from "react/jsx-runtime";
 import { FileExtensionSets as D } from "@frontify/app-bridge";
-import { IconExclamationMarkTriangle as K } from "@frontify/fondue";
-import { LoadingCircle as V, Flyout as k, Dropdown as w } from "@frontify/fondue/components";
-import { IconArrowCircleUp as W, IconImageStack as q } from "@frontify/fondue/icons";
+import { LoadingCircle as K, Flyout as k, Dropdown as w } from "@frontify/fondue/components";
+import { IconArrowCircleUp as V, IconImageStack as W, IconExclamationMarkTriangle as q } from "@frontify/fondue/icons";
 import { useState as j, useRef as G, useCallback as H, useMemo as J } from "react";
 import { joinClassNames as Q } from "../../utilities/react/joinClassNames.es.js";
-const rt = ({
+const et = ({
   onDrop: i,
   label: f,
   icon: N,
@@ -39,20 +38,20 @@ const rt = ({
   }, y = (t) => {
     if (!x.current || d)
       return;
-    const { clientX: r, clientY: n } = t, S = r === 0 && n === 0, { left: z, top: C, width: F, height: P } = x.current.getBoundingClientRect(), X = S ? F / 2 : r - z, Y = S ? P / 2 : n - C;
+    const { clientX: r, clientY: n } = t, S = r === 0 && n === 0, { left: B, top: C, width: F, height: P } = x.current.getBoundingClientRect(), X = S ? F / 2 : r - B, Y = S ? P / 2 : n - C;
     p([X, Y]);
   }, I = H((t) => {
     t(), p(void 0);
-  }, []), B = J(() => {
+  }, []), z = J(() => {
     const t = [];
     return v && t.push({
       onSelect: () => I(v),
       title: "Upload asset",
-      icon: /* @__PURE__ */ e(W, { size: "20" })
+      icon: /* @__PURE__ */ e(V, { size: "20" })
     }), m && t.push({
       onSelect: () => I(m),
       title: "Browse asset",
-      icon: /* @__PURE__ */ e(q, { size: "20" })
+      icon: /* @__PURE__ */ e(W, { size: "20" })
     }), t;
   }, [m, v, I]);
   return /* @__PURE__ */ o(
@@ -85,8 +84,8 @@ const rt = ({
         M && !s && y(t), h == null || h();
       },
       children: [
-        d ? /* @__PURE__ */ e(V, {}) : a ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
-          /* @__PURE__ */ e(K, {}),
+        d ? /* @__PURE__ */ e(K, {}) : a ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
+          /* @__PURE__ */ e(q, { size: "16" }),
           a
         ] }) : /* @__PURE__ */ o(A, { children: [
           N && /* @__PURE__ */ e("div", { children: N }),
@@ -107,7 +106,7 @@ const rt = ({
               /* @__PURE__ */ e(k.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
               /* @__PURE__ */ e(k.Content, { triggerOffset: "compact", children: /* @__PURE__ */ o(w.Root, { open: !0, children: [
                 /* @__PURE__ */ e(w.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
-                /* @__PURE__ */ e(w.Content, { triggerOffset: "compact", children: B.map((t) => /* @__PURE__ */ o(w.Item, { onSelect: t.onSelect, children: [
+                /* @__PURE__ */ e(w.Content, { triggerOffset: "compact", children: z.map((t) => /* @__PURE__ */ o(w.Item, { onSelect: t.onSelect, children: [
                   t.icon,
                   t.title
                 ] }, t.title)) })
@@ -120,6 +119,6 @@ const rt = ({
   );
 };
 export {
-  rt as BlockInjectButton
+  et as BlockInjectButton
 };
 //# sourceMappingURL=BlockInjectButton.es.js.map

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

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

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

@@ -1,19 +1,19 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { IconPaperclip16 as m, IconCaretDown12 as n } from "@frontify/fondue";
-import { forwardRef as c } from "react";
-import { BaseToolbarButton as s } from "../BaseToolbarButton.es.js";
-const l = c(
+import { IconPaperclip as m, IconCaretDown as n } from "@frontify/fondue/icons";
+import { forwardRef as s } from "react";
+import { BaseToolbarButton as c } from "../BaseToolbarButton.es.js";
+const l = s(
   ({ children: o, isFlyoutOpen: r, ...e }, a) => /* @__PURE__ */ i(
-    s,
+    c,
     {
       forceActiveStyle: r,
       "data-test-id": "attachments-toolbar-button-trigger",
       ref: a,
       ...e,
       children: [
-        /* @__PURE__ */ t(m, {}),
+        /* @__PURE__ */ t(m, { size: "16" }),
         o,
-        /* @__PURE__ */ t(n, {})
+        /* @__PURE__ */ t(n, { size: "12" })
       ]
     }
   )

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsToolbarButtonTrigger.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\nimport { forwardRef } from 'react';\n\nimport { type AttachmentsTriggerProps } from '../../../Attachments/types';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\n\nexport const AttachmentsToolbarButtonTrigger = forwardRef<HTMLButtonElement, AttachmentsTriggerProps>(\n    ({ children, isFlyoutOpen, ...props }, ref) => (\n        <BaseToolbarButton\n            forceActiveStyle={isFlyoutOpen}\n            data-test-id=\"attachments-toolbar-button-trigger\"\n            ref={ref}\n            {...props}\n        >\n            <IconPaperclip16 />\n            {children}\n            <IconCaretDown12 />\n        </BaseToolbarButton>\n    ),\n);\n\nAttachmentsToolbarButtonTrigger.displayName = 'AttachmentsToolbarButtonTrigger';\n"],"names":["AttachmentsToolbarButtonTrigger","forwardRef","children","isFlyoutOpen","props","ref","jsxs","BaseToolbarButton","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;;AAQO,MAAMA,IAAkCC;AAAA,EAC3C,CAAC,EAAE,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GAASC,MACnC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,kBAAkBJ;AAAA,MAClB,gBAAa;AAAA,MACb,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EAAgB;AAAA,QAChBP;AAAA,0BACAQ,GAAA,CAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7B;AAEAV,EAAgC,cAAc;"}
+{"version":3,"file":"AttachmentsToolbarButtonTrigger.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconPaperclip } from '@frontify/fondue/icons';\nimport { forwardRef } from 'react';\n\nimport { type AttachmentsTriggerProps } from '../../../Attachments/types';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\n\nexport const AttachmentsToolbarButtonTrigger = forwardRef<HTMLButtonElement, AttachmentsTriggerProps>(\n    ({ children, isFlyoutOpen, ...props }, ref) => (\n        <BaseToolbarButton\n            forceActiveStyle={isFlyoutOpen}\n            data-test-id=\"attachments-toolbar-button-trigger\"\n            ref={ref}\n            {...props}\n        >\n            <IconPaperclip size=\"16\" />\n            {children}\n            <IconCaretDown size=\"12\" />\n        </BaseToolbarButton>\n    ),\n);\n\nAttachmentsToolbarButtonTrigger.displayName = 'AttachmentsToolbarButtonTrigger';\n"],"names":["AttachmentsToolbarButtonTrigger","forwardRef","children","isFlyoutOpen","props","ref","jsxs","BaseToolbarButton","jsx","IconPaperclip","IconCaretDown"],"mappings":";;;;AAQO,MAAMA,IAAkCC;AAAA,EAC3C,CAAC,EAAE,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GAASC,MACnC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,kBAAkBJ;AAAA,MAClB,gBAAa;AAAA,MACb,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,QACxBP;AAAA,QACD,gBAAAM,EAACE,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrC;AAEAV,EAAgC,cAAc;"}

package/dist/components/DownloadButton/DownloadButton.es.js

@@ -1,28 +1,32 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { IconArrowCircleDown16 as a, FOCUS_STYLE as w } from "@frontify/fondue";
 import { Tooltip as o } from "@frontify/fondue/components";
-import { useFocusRing as d } from "@react-aria/focus";
+import { IconArrowCircleDown as w } from "@frontify/fondue/icons";
+import { useFocusRing as a } from "@react-aria/focus";
 import { joinClassNames as u } from "../../utilities/react/joinClassNames.es.js";
-const x = ({ onDownload: e, ariaLabel: n }) => {
-  const { isFocused: r, focusProps: s } = d();
+const p = ({ onDownload: e, ariaLabel: n }) => {
+  const { isFocused: r, focusProps: i } = a();
   return /* @__PURE__ */ l(o.Root, { enterDelay: 500, children: [
     /* @__PURE__ */ t(o.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
       "button",
       {
+        type: "button",
         tabIndex: 0,
         "aria-label": n ?? "Download",
-        ...s,
-        className: u(["tw-outline-none tw-rounded", r && w]),
+        ...i,
+        className: u([
+          "tw-outline-none tw-rounded",
+          r && "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none"
+        ]),
         onClick: e,
-        onPointerDown: (i) => i.preventDefault(),
+        onPointerDown: (s) => s.preventDefault(),
         "data-test-id": "download-button",
-        children: /* @__PURE__ */ t("span", { className: "tw-flex tw-text-xs 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-1 tw-p-1.5 tw-outline-line", children: /* @__PURE__ */ t(a, {}) })
+        children: /* @__PURE__ */ t("span", { className: "tw-flex tw-text-xs 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-1 tw-p-1.5 tw-outline-line", children: /* @__PURE__ */ t(w, { size: "16" }) })
       }
     ) }),
     /* @__PURE__ */ t(o.Content, { side: "top", children: "Download" })
   ] });
 };
 export {
-  x as DownloadButton
+  p as DownloadButton
 };
 //# sourceMappingURL=DownloadButton.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_STYLE, IconArrowCircleDown16 } from '@frontify/fondue';\nimport { Tooltip } from '@frontify/fondue/components';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type DownloadButtonProps } from './types';\n\nexport const DownloadButton = ({ onDownload, ariaLabel }: DownloadButtonProps) => {\n    const { isFocused, focusProps } = useFocusRing();\n\n    return (\n        <Tooltip.Root enterDelay={500}>\n            <Tooltip.Trigger asChild>\n                <button\n                    tabIndex={0}\n                    aria-label={ariaLabel ?? 'Download'}\n                    {...focusProps}\n                    className={joinClassNames(['tw-outline-none tw-rounded', isFocused && FOCUS_STYLE])}\n                    onClick={onDownload}\n                    onPointerDown={(e) => e.preventDefault()}\n                    data-test-id=\"download-button\"\n                >\n                    <span className=\"tw-flex tw-text-xs 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-1 tw-p-1.5 tw-outline-line\">\n                        <IconArrowCircleDown16 />\n                    </span>\n                </button>\n            </Tooltip.Trigger>\n            <Tooltip.Content side=\"top\">Download</Tooltip.Content>\n        </Tooltip.Root>\n    );\n};\n"],"names":["DownloadButton","onDownload","ariaLabel","isFocused","focusProps","useFocusRing","jsxs","Tooltip","jsx","joinClassNames","FOCUS_STYLE","e","IconArrowCircleDown16"],"mappings":";;;;;AAUO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,GAAY,WAAAC,QAAqC;AAC9E,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAA,IAAeC,EAAA;AAElC,SACI,gBAAAC,EAACC,EAAQ,MAAR,EAAa,YAAY,KACtB,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACpB,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UAAU;AAAA,QACV,cAAYN,KAAa;AAAA,QACxB,GAAGE;AAAA,QACJ,WAAWK,EAAe,CAAC,8BAA8BN,KAAaO,CAAW,CAAC;AAAA,QAClF,SAAST;AAAA,QACT,eAAe,CAACU,MAAMA,EAAE,eAAA;AAAA,QACxB,gBAAa;AAAA,QAEb,4BAAC,QAAA,EAAK,WAAU,0SACZ,UAAA,gBAAAH,EAACI,KAAsB,EAAA,CAC3B;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,sBACCL,EAAQ,SAAR,EAAgB,MAAK,OAAM,UAAA,WAAA,CAAQ;AAAA,EAAA,GACxC;AAER;"}
+{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Tooltip } from '@frontify/fondue/components';\nimport { IconArrowCircleDown } from '@frontify/fondue/icons';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type DownloadButtonProps } from './types';\n\nexport const DownloadButton = ({ onDownload, ariaLabel }: DownloadButtonProps) => {\n    const { isFocused, focusProps } = useFocusRing();\n\n    return (\n        <Tooltip.Root enterDelay={500}>\n            <Tooltip.Trigger asChild>\n                <button\n                    type=\"button\"\n                    tabIndex={0}\n                    aria-label={ariaLabel ?? 'Download'}\n                    {...focusProps}\n                    className={joinClassNames([\n                        'tw-outline-none tw-rounded',\n                        isFocused &&\n                            'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none',\n                    ])}\n                    onClick={onDownload}\n                    onPointerDown={(e) => e.preventDefault()}\n                    data-test-id=\"download-button\"\n                >\n                    <span className=\"tw-flex tw-text-xs 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-1 tw-p-1.5 tw-outline-line\">\n                        <IconArrowCircleDown size=\"16\" />\n                    </span>\n                </button>\n            </Tooltip.Trigger>\n            <Tooltip.Content side=\"top\">Download</Tooltip.Content>\n        </Tooltip.Root>\n    );\n};\n"],"names":["DownloadButton","onDownload","ariaLabel","isFocused","focusProps","useFocusRing","jsxs","Tooltip","jsx","joinClassNames","e","IconArrowCircleDown"],"mappings":";;;;;AAUO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,GAAY,WAAAC,QAAqC;AAC9E,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAA,IAAeC,EAAA;AAElC,SACI,gBAAAC,EAACC,EAAQ,MAAR,EAAa,YAAY,KACtB,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACpB,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAYN,KAAa;AAAA,QACxB,GAAGE;AAAA,QACJ,WAAWK,EAAe;AAAA,UACtB;AAAA,UACAN,KACI;AAAA,QAAA,CACP;AAAA,QACD,SAASF;AAAA,QACT,eAAe,CAACS,MAAMA,EAAE,eAAA;AAAA,QACxB,gBAAa;AAAA,QAEb,UAAA,gBAAAF,EAAC,UAAK,WAAU,0SACZ,4BAACG,GAAA,EAAoB,MAAK,MAAK,EAAA,CACnC;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,sBACCJ,EAAQ,SAAR,EAAgB,MAAK,OAAM,UAAA,WAAA,CAAQ;AAAA,EAAA,GACxC;AAER;"}