@frontify/guideline-blocks-settings 1.0.13-alpha.6 → 1.0.13-alpha.8

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 { FOCUS_STYLE as j } from "@frontify/fondue";
-import { LoadingCircle as D, Dropdown as a, Button as E } from "@frontify/fondue/components";
-import { IconGrabHandle as G, IconPen as T, IconArrowCircleUp as U, IconImageStack as $, IconTrashBin as L, IconImage as B, IconPlayFrame as H, IconMusicNote as M, IconDocument 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(B, { size: "24" }) : o === "VIDEO" ? /* @__PURE__ */ e(H, { size: "24" }) : o === "AUDIO" ? /* @__PURE__ */ e(M, { size: "24" }) : /* @__PURE__ */ e(O, { size: "24" }), z = 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,
-    isOverlay: n,
+    isDragging: a,
+    isOverlay: s,
     isLoading: c,
     onDelete: m,
-    onReplaceWithBrowse: h,
-    onReplaceWithUpload: S,
-    onDownload: b
+    onReplaceWithBrowse: b,
+    onReplaceWithUpload: z,
+    onDownload: h
   }, x) => {
-    const [s, l] = Y(), [N, { selectedFiles: d }] = R({ multiple: !0, accept: "image/*" }), [k, { results: I, doneAll: f }] = A(), { focusProps: F, isFocusVisible: v } = V();
-    y(() => {
-      d && k(d[0]);
-    }, [d]), y(() => {
-      f && S(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 P = c || d && !f;
+    const F = c || d && !f;
     return /* @__PURE__ */ r(
       "button",
       {
+        type: "button",
         "aria-label": "Download attachment",
         "data-test-id": "attachments-item",
-        onClick: () => !s && (b == null ? void 0 : b()),
+        onClick: () => !n && (h == null ? void 0 : h()),
         ref: x,
         style: {
           ...p,
-          opacity: i && !n ? 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: P ? /* @__PURE__ */ e(D, { 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}` })
@@ -56,32 +56,33 @@ const _ = (o) => o === "IMAGE" ? /* @__PURE__ */ e(B, { size: "24" }) : o === "V
               "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",
-                n || (s == null ? void 0 : s.id) === o.id ? "tw-opacity-100" : "tw-opacity-0"
+                s || (n == null ? void 0 : n.id) === o.id ? "tw-opacity-100" : "tw-opacity-0"
               ]),
               children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    ...F,
+                    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 || n ? "tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed" : "tw-cursor-grab hover:tw-bg-button-background-hover",
-                      v && j,
-                      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(G, {})
                   }
                 ),
                 /* @__PURE__ */ e("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ r(
-                  a.Root,
+                  i.Root,
                   {
-                    open: (s == null ? void 0 : s.id) === o.id,
+                    open: (n == null ? void 0 : n.id) === o.id,
                     onOpenChange: (t) => l(t ? o : void 0),
                     children: [
-                      /* @__PURE__ */ e(a.Trigger, { children: /* @__PURE__ */ e(
-                        E,
+                      /* @__PURE__ */ e(i.Trigger, { children: /* @__PURE__ */ e(
+                        D,
                         {
                           aspect: "square",
                           ref: x,
@@ -89,46 +90,46 @@ const _ = (o) => o === "IMAGE" ? /* @__PURE__ */ e(B, { size: "24" }) : o === "V
                             t == null || t.stopPropagation(), t == null || t.preventDefault();
                           },
                           emphasis: "default",
-                          children: /* @__PURE__ */ e(T, { 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(), N(), l(void 0);
                               },
                               children: [
-                                /* @__PURE__ */ e(U, { 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($, { 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(L, { size: "20" }),
+                              /* @__PURE__ */ e(U, { size: "20" }),
                               "Delete"
                             ]
                           }
@@ -145,28 +146,28 @@ const _ = (o) => o === "IMAGE" ? /* @__PURE__ */ e(B, { size: "24" }) : o === "V
     );
   }
 );
-z.displayName = "AttachmentItem";
-const rt = (o) => {
-  const { attributes: u, listeners: w, setNodeRef: p, transform: i, transition: n, 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)` : "",
-    transition: n,
+    transform: a ? `translate(${a.x}px, ${a.y}px)` : "",
+    transition: s,
     zIndex: c ? 2 : 1
-  }, h = { ...u, ...w };
+  }, b = { ...u, ...w };
   return /* @__PURE__ */ e(
-    z,
+    k,
     {
       ref: p,
       isDragging: c,
       transformStyle: m,
-      draggableProps: h,
+      draggableProps: b,
       ...o
     }
   );
 };
 export {
-  z 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 { FOCUS_STYLE } from '@frontify/fondue';\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                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                            <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","FOCUS_STYLE","IconGrabHandle","Dropdown","isOpen","Button","e","IconPen","event","IconArrowCircleUp","IconImageStack","IconTrashBin","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable"],"mappings":";;;;;;;;;AAwBA,MAAMA,IAAe,CAACC,MACdA,MAAS,UACF,gBAAAC,EAACC,GAAA,EAAU,MAAK,KAAA,CAAK,IACrBF,MAAS,UACT,gBAAAC,EAACE,GAAA,EAAc,MAAK,KAAA,CAAK,IACzBH,MAAS,UACT,gBAAAC,EAACG,GAAA,EAAc,MAAK,KAAA,CAAK,IAEzB,gBAAAH,EAACI,GAAA,EAAa,MAAK,KAAA,CAAK,GAI1BC,IAAiBC;AAAA,EAC1B,CACI;AAAA,IACI,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,GAEJC,MACC;AACD,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAA,GACpC,CAACC,GAAgB,EAAE,eAAAC,EAAA,CAAe,IAAIC,EAAa,EAAE,UAAU,IAAM,QAAQ,WAAW,GACxF,CAACC,GAAY,EAAE,SAASC,GAAe,SAAAC,EAAA,CAAS,IAAIC,EAAA,GAEpD,EAAE,YAAAC,GAAY,gBAAAC,EAAA,IAAmBC,EAAA;AAEvC,IAAAC,EAAU,MAAM;AACZ,MAAIT,KACAE,EAAWF,EAAc,CAAC,CAAC;AAAA,IAGnC,GAAG,CAACA,CAAa,CAAC,GAElBS,EAAU,MAAM;AACZ,MAAIL,KACAX,EAAoBU,EAAc,CAAC,CAAC;AAAA,IAG5C,GAAG,CAACC,GAASD,CAAa,CAAC;AAE3B,UAAMO,IAAoBpB,KAAcU,KAAiB,CAACI;AAE1D,WACI,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,cAAW;AAAA,QACX,gBAAa;AAAA,QACb,SAAS,MAAM,CAACf,MAAiBF,KAAA,gBAAAA;AAAA,QACjC,KAAAC;AAAA,QACA,OAAO;AAAA,UACH,GAAGR;AAAA,UACH,SAASC,KAAc,CAACC,IAAY,MAAM;AAAA,UAC1C,YAAY;AAAA,QAAA;AAAA,QAEhB,WAAWuB,EAAe;AAAA,UACtB;AAAA,UACAxB,IAAa,4BAA4B;AAAA,QAAA,CAC5C;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAX,EAAC,OAAA,EAAI,WAAU,mEACV,UAAAiC,IAAoB,gBAAAjC,EAACoC,GAAA,EAAc,MAAK,SAAQ,IAAKtC,EAAaS,EAAK,UAAU,GACtF;AAAA,UACA,gBAAA2B,EAAC,OAAA,EAAI,WAAU,kCACX,UAAA;AAAA,YAAA,gBAAAlC,EAAC,OAAA,EAAI,WAAU,yIACV,UAAAO,EAAK,OACV;AAAA,YACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAA,GAAGO,EAAK,qBAAqB,MAAMA,EAAK,SAAS,GAAA,CAAG;AAAA,UAAA,GAC5F;AAAA,UACCC,KACG,gBAAA0B;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAWC,EAAe;AAAA,gBACtB;AAAA,gBACAvB,MAAaO,KAAA,gBAAAA,EAAe,QAAOZ,EAAK,KAAK,mBAAmB;AAAA,cAAA,CACnE;AAAA,cAED,UAAA;AAAA,gBAAA,gBAAAP;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACI,GAAG6B;AAAA,oBACH,GAAGpB;AAAA,oBACJ,cAAW;AAAA,oBACX,WAAW0B,EAAe;AAAA,sBACtB;AAAA,sBACAxB,KAAcC,IACR,6FACA;AAAA,sBACNkB,KAAkBO;AAAA,sBAClBP,KAAkB;AAAA,oBAAA,CACrB;AAAA,oBAED,4BAACQ,GAAA,CAAA,CAAe;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEpB,gBAAAtC,EAAC,OAAA,EAAI,gBAAa,gCACd,UAAA,gBAAAkC;AAAA,kBAACK,EAAS;AAAA,kBAAT;AAAA,oBACG,OAAMpB,KAAA,gBAAAA,EAAe,QAAOZ,EAAK;AAAA,oBACjC,cAAc,CAACiC,MAAWpB,EAAiBoB,IAASjC,IAAO,MAAS;AAAA,oBAEpE,UAAA;AAAA,sBAAA,gBAAAP,EAACuC,EAAS,SAAT,EACG,UAAA,gBAAAvC;AAAA,wBAACyC;AAAA,wBAAA;AAAA,0BACG,QAAO;AAAA,0BACP,KAAAvB;AAAA,0BACA,SAAS,CAACwB,MAAM;AACZ,4BAAAA,KAAA,QAAAA,EAAG,mBACHA,KAAA,QAAAA,EAAG;AAAA,0BACP;AAAA,0BACA,UAAS;AAAA,0BAET,UAAA,gBAAA1C,EAAC2C,GAAA,EAAQ,MAAK,KAAA,CAAK;AAAA,wBAAA;AAAA,sBAAA,GAE3B;AAAA,sBACA,gBAAAT,EAACK,EAAS,SAAT,EAAiB,MAAK,SACnB,UAAA;AAAA,wBAAA,gBAAAL,EAACK,EAAS,OAAT,EACG,UAAA;AAAA,0BAAA,gBAAAL;AAAA,4BAACK,EAAS;AAAA,4BAAT;AAAA,8BACG,gBAAa;AAAA,8BACb,UAAU,CAACK,MAAU;AACjB,gCAAAA,KAAA,QAAAA,EAAO,mBACPtB,EAAA,GACAF,EAAiB,MAAS;AAAA,8BAC9B;AAAA,8BAEA,UAAA;AAAA,gCAAA,gBAAApB,EAAC6C,GAAA,EAAkB,MAAK,KAAA,CAAK;AAAA,gCAAE;AAAA,8BAAA;AAAA,4BAAA;AAAA,0BAAA;AAAA,0BAGnC,gBAAAX;AAAA,4BAACK,EAAS;AAAA,4BAAT;AAAA,8BACG,UAAU,CAACK,MAAU;AACjB,gCAAAA,KAAA,QAAAA,EAAO,mBACP7B,EAAA,GACAK,EAAiB,MAAS;AAAA,8BAC9B;AAAA,8BAEA,UAAA;AAAA,gCAAA,gBAAApB,EAAC8C,GAAA,EAAe,MAAK,KAAA,CAAK;AAAA,gCAAE;AAAA,8BAAA;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBAEhC,GACJ;AAAA,wBACA,gBAAA9C,EAACuC,EAAS,OAAT,EACG,UAAA,gBAAAL;AAAA,0BAACK,EAAS;AAAA,0BAAT;AAAA,4BACG,UAAS;AAAA,4BACT,UAAU,CAACK,MAAU;AACjB,8BAAAA,KAAA,QAAAA,EAAO,mBACP9B,EAAA,GACAM,EAAiB,MAAS;AAAA,4BAC9B;AAAA,4BAEA,UAAA;AAAA,8BAAA,gBAAApB,EAAC+C,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,8BAAE;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBAAA,EAE9B,CACJ;AAAA,sBAAA,EAAA,CACJ;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA,EACJ,CACJ;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIhB;AACJ;AAEA1C,EAAe,cAAc;AAEtB,MAAM2C,KAAyB,CAACC,MAAuC;AAC1E,QAAM,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAA3C,EAAA,IAAe4C,EAAY;AAAA,IACzF,IAAIN,EAAM,KAAK;AAAA,EAAA,CAClB,GAEKvC,IAAiB;AAAA,IACnB,WAAW2C,IAAY,aAAaA,EAAU,CAAC,OAAOA,EAAU,CAAC,QAAQ;AAAA,IACzE,YAAAC;AAAA,IACA,QAAQ3C,IAAa,IAAI;AAAA,EAAA,GAGvBF,IAAiB,EAAE,GAAGyC,GAAY,GAAGC,EAAA;AAE3C,SACI,gBAAAnD;AAAA,IAACK;AAAA,IAAA;AAAA,MACG,KAAK+C;AAAA,MACL,YAAAzC;AAAA,MACA,gBAAAD;AAAA,MACA,gBAAAD;AAAA,MACC,GAAGwC;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"AttachmentItem.es.js","sources":["../../../src/components/Attachments/AttachmentItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { type Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { 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/DownloadButton/DownloadButton.es.js

@@ -1,19 +1,22 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { FOCUS_STYLE as a } from "@frontify/fondue";
 import { Tooltip as o } from "@frontify/fondue/components";
 import { IconArrowCircleDown as w } from "@frontify/fondue/icons";
-import { useFocusRing as d } from "@react-aria/focus";
+import { useFocusRing as a } from "@react-aria/focus";
 import { joinClassNames as u } from "../../utilities/react/joinClassNames.es.js";
-const g = ({ onDownload: e, ariaLabel: n }) => {
-  const { isFocused: r, focusProps: i } = 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",
         ...i,
-        className: u(["tw-outline-none tw-rounded", r && a]),
+        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: (s) => s.preventDefault(),
         "data-test-id": "download-button",
@@ -24,6 +27,6 @@ const g = ({ onDownload: e, ariaLabel: n }) => {
   ] });
 };
 export {
-  g 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 } from '@frontify/fondue';\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                    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                        <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","FOCUS_STYLE","e","IconArrowCircleDown"],"mappings":";;;;;;AAWO,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,UAAA,gBAAAH,EAAC,UAAK,WAAU,0SACZ,4BAACI,GAAA,EAAoB,MAAK,MAAK,EAAA,CACnC;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;"}