@frontify/guideline-blocks-settings 2.0.3 → 2.1.0

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

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

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

@@ -1,15 +1,15 @@
 import { jsx as e, jsxs as g } from "react/jsx-runtime";
 import { useSensors as tt, useSensor as U, PointerSensor as et, KeyboardSensor as ot, DndContext as nt, closestCenter as st } from "@dnd-kit/core";
-import { restrictToVerticalAxis as it } from "@dnd-kit/modifiers";
-import { SortableContext as dt, rectSortingStrategy as rt, arrayMove as at } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis as rt } from "@dnd-kit/modifiers";
+import { SortableContext as it, rectSortingStrategy as at, arrayMove as dt } from "@dnd-kit/sortable";
 import { useEditorState as lt, useAssetChooser as ct, useAssetUpload as ut } from "@frontify/app-bridge";
-import { AssetInput as ht, AssetInputSize as mt } from "@frontify/fondue";
+import { AssetInput as mt, AssetInputSize as pt } from "@frontify/fondue";
 import { Flyout as f, Tooltip as I } from "@frontify/fondue/components";
-import { useState as d, useEffect as y } from "react";
-import { SortableAttachmentItem as pt } from "./AttachmentItem.es.js";
+import { useState as i, useEffect as y } from "react";
+import { SortableAttachmentItem as ht } from "./AttachmentItem.es.js";
 import { AttachmentsButtonTrigger as gt } from "./AttachmentsButtonTrigger.es.js";
 const bt = ({
-  items: r = [],
+  items: a = [],
   onDelete: O,
   onReplaceWithBrowse: T,
   onReplaceWithUpload: N,
@@ -21,22 +21,22 @@ const bt = ({
   isOpen: w,
   onOpenChange: j
 }) => {
-  const [n, A] = d(r), [k, z] = d(!1), K = tt(U(et), U(ot)), [M, S] = d(void 0), [C, u] = d(!1), [a, l] = d([]), [h, B] = d(null), m = lt(c), { openAssetChooser: x, closeAssetChooser: v } = ct(c), D = w !== void 0, b = D ? w : k, q = n?.find((t) => t.id === M), [G, { results: F, doneAll: E }] = ut({
+  const [n, A] = i(a), [k, z] = i(!1), K = tt(U(et), U(ot)), [M, S] = i(void 0), [C, u] = i(!1), [d, l] = i([]), [m, B] = i(null), p = lt(c), { openAssetChooser: v, closeAssetChooser: x } = ct(c), D = w !== void 0, b = D ? w : k, q = n?.find((t) => t.id === M), [G, { results: F, doneAll: E }] = ut({
     onUploadProgress: () => !C && u(!0)
-  }), i = (t) => {
+  }), r = (t) => {
     (D ? j : z)?.(t);
   };
   y(() => {
-    A(r);
-  }, [r]), y(() => {
-    h && (u(!0), G(h));
-  }, [h]), y(() => {
+    A(a);
+  }, [a]), y(() => {
+    m && (u(!0), G(m));
+  }, [m]), y(() => {
     (async () => E && (await P(F), u(!1)))();
   }, [E, F]);
   const H = () => {
-    i(!1), x(
+    r(!1), v(
       (t) => {
-        W(t), v(), i(!0);
+        W(t), x(), r(!0);
       },
       {
         multiSelection: !0,
@@ -44,10 +44,10 @@ const bt = ({
       }
     );
   }, J = (t) => {
-    i(!1), x(
+    r(!1), v(
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       async (o) => {
-        i(!0), v(), l([...a, t.id]), await T(t, o[0]), l(a.filter((s) => s !== t.id));
+        r(!0), x(), l([...d, t.id]), await T(t, o[0]), l(d.filter((s) => s !== t.id));
       },
       {
         multiSelection: !1,
@@ -55,14 +55,14 @@ const bt = ({
       }
     );
   }, Q = async (t, o) => {
-    l([...a, t.id]), await N(t, o), l(a.filter((s) => s !== t.id));
+    l([...d, t.id]), await N(t, o), l(d.filter((s) => s !== t.id));
   }, X = (t) => {
     const { active: o } = t;
     S(o.id);
   }, Y = (t) => {
     const { active: o, over: s } = t;
     if (s && o.id !== s.id && n) {
-      const _ = n.findIndex((p) => p.id === o.id), $ = n.findIndex((p) => p.id === s.id), L = at(n, _, $);
+      const _ = n.findIndex((h) => h.id === o.id), $ = n.findIndex((h) => h.id === s.id), L = dt(n, _, $);
       A(L), R(L);
     }
     S(void 0);
@@ -71,16 +71,16 @@ const bt = ({
       t.preventDefault();
     },
     onEscapeKeyDown: (t) => {
-      t.stopPropagation(), i(!1);
+      t.stopPropagation(), r(!1);
     }
   };
-  return m || (n?.length ?? 0) > 0 ? /* @__PURE__ */ e("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ e(
+  return p || (n?.length ?? 0) > 0 ? /* @__PURE__ */ e("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ e(
     f.Root,
     {
       open: b,
-      onOpenChange: (t) => i(q ? !0 : t),
+      onOpenChange: (t) => r(q ? !0 : t),
       children: /* @__PURE__ */ g(I.Root, { enterDelay: 500, children: [
-        /* @__PURE__ */ e(I.Trigger, { asChild: !0, children: /* @__PURE__ */ e(f.Trigger, { asChild: !0, "data-test-id": "attachments-button-trigger", children: /* @__PURE__ */ e(V, { isFlyoutOpen: b, children: /* @__PURE__ */ e("div", { children: r.length > 0 ? r.length : "Add" }) }) }) }),
+        /* @__PURE__ */ e(I.Trigger, { asChild: !0, children: /* @__PURE__ */ e(f.Trigger, { asChild: !0, "data-test-id": "attachments-button-trigger", children: /* @__PURE__ */ e(V, { isFlyoutOpen: b, children: /* @__PURE__ */ e("div", { children: a.length > 0 ? a.length : "Add" }) }) }) }),
         /* @__PURE__ */ e(f.Content, { side: "bottom", align: "end", ...Z, children: /* @__PURE__ */ g("div", { className: "tw-w-[300px]", "data-test-id": "attachments-flyout-content", children: [
           n.length > 0 && /* @__PURE__ */ e(
             nt,
@@ -89,12 +89,12 @@ const bt = ({
               collisionDetection: st,
               onDragStart: X,
               onDragEnd: Y,
-              modifiers: [it],
-              children: /* @__PURE__ */ e(dt, { items: n, strategy: rt, children: /* @__PURE__ */ e("div", { className: "tw-border-b tw-border-b-line tw-relative", children: n.map((t) => /* @__PURE__ */ e(
-                pt,
+              modifiers: [rt],
+              children: /* @__PURE__ */ e(it, { items: n, strategy: at, children: /* @__PURE__ */ e("div", { className: "tw-border-b tw-border-b-line tw-relative", children: n.map((t) => /* @__PURE__ */ e(
+                ht,
                 {
-                  isEditing: m,
-                  isLoading: a.includes(t.id),
+                  isEditing: p,
+                  isLoading: d.includes(t.id),
                   item: t,
                   onDelete: () => O(t),
                   onReplaceWithBrowse: () => J(t),
@@ -108,13 +108,13 @@ const bt = ({
               )) }) })
             }
           ),
-          m && /* @__PURE__ */ g("div", { className: "tw-px-5 tw-py-3", children: [
-            /* @__PURE__ */ e("div", { className: "tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4", children: "Add attachments" }),
+          p && /* @__PURE__ */ g("div", { className: "tw-px-5 tw-py-3", children: [
+            /* @__PURE__ */ e("div", { className: "tw-font-primary tw-font-medium tw-text-primary tw-text-small tw-my-4", children: "Add attachments" }),
             /* @__PURE__ */ e(
-              ht,
+              mt,
               {
                 isLoading: C,
-                size: mt.Small,
+                size: pt.Small,
                 onUploadClick: (t) => B(t),
                 onLibraryClick: H
               }

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

@@ -1 +1 @@
-{"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    DndContext,\n    type DragEndEvent,\n    type DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    closestCenter,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { type Asset, useAssetChooser, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport { AssetInput, AssetInputSize } from '@frontify/fondue';\nimport { Tooltip, Flyout } from '@frontify/fondue/components';\nimport { useEffect, useState } from 'react';\n\nimport { SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsButtonTrigger } from './AttachmentsButtonTrigger';\nimport { type AttachmentsProps } from './types';\n\nexport const Attachments = ({\n    items = [],\n    onDelete,\n    onReplaceWithBrowse,\n    onReplaceWithUpload,\n    onBrowse,\n    onUpload,\n    onSorted,\n    appBridge,\n    triggerComponent: TriggerComponent = AttachmentsButtonTrigger,\n    isOpen,\n    onOpenChange,\n}: AttachmentsProps) => {\n    const [internalItems, setInternalItems] = useState<Asset[]>(items);\n    const [isFlyoutOpenInternal, setIsFlyoutOpenInternal] = useState(false);\n    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));\n    const [draggedAssetId, setDraggedAssetId] = useState<number | undefined>(undefined);\n    const [isUploadLoading, setIsUploadLoading] = useState(false);\n    const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);\n    const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);\n    const isEditing = useEditorState(appBridge);\n    const { openAssetChooser, closeAssetChooser } = useAssetChooser(appBridge);\n    const isControllingStateExternally = isOpen !== undefined;\n    const isFlyoutOpen = isControllingStateExternally ? isOpen : isFlyoutOpenInternal;\n\n    const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);\n\n    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({\n        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),\n    });\n\n    const handleFlyoutOpenChange = (isOpen: boolean) => {\n        const stateSetter = isControllingStateExternally ? onOpenChange : setIsFlyoutOpenInternal;\n\n        stateSetter?.(isOpen);\n    };\n\n    useEffect(() => {\n        setInternalItems(items);\n    }, [items]);\n\n    useEffect(() => {\n        if (selectedFiles) {\n            setIsUploadLoading(true);\n            uploadFile(selectedFiles);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedFiles]);\n\n    useEffect(() => {\n        const uploadDone = async () => {\n            if (doneAll) {\n                await onUpload(uploadResults);\n                setIsUploadLoading(false);\n            }\n        };\n        uploadDone();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [doneAll, uploadResults]);\n\n    const onOpenAssetChooser = () => {\n        handleFlyoutOpenChange(false);\n        openAssetChooser(\n            (result: Asset[]) => {\n                onBrowse(result);\n                closeAssetChooser();\n                handleFlyoutOpenChange(true);\n            },\n            {\n                multiSelection: true,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithBrowse = (toReplace: Asset) => {\n        handleFlyoutOpenChange(false);\n        openAssetChooser(\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            async (result: Asset[]) => {\n                handleFlyoutOpenChange(true);\n                closeAssetChooser();\n                setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n                await onReplaceWithBrowse(toReplace, result[0]);\n                setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n            },\n            {\n                multiSelection: false,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {\n        setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n        await onReplaceWithUpload(toReplace, uploadedAsset);\n        setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setDraggedAssetId(active.id as number);\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        const { active, over } = event;\n        if (over && active.id !== over.id && internalItems) {\n            const oldIndex = internalItems.findIndex((i) => i.id === active.id);\n            const newIndex = internalItems.findIndex((i) => i.id === over.id);\n            const sortedItems = arrayMove(internalItems, oldIndex, newIndex);\n            setInternalItems(sortedItems);\n            onSorted(sortedItems);\n        }\n        setDraggedAssetId(undefined);\n    };\n\n    const autoFocusModifier = {\n        onOpenAutoFocus: (event: Event) => {\n            event.preventDefault();\n        },\n        onEscapeKeyDown: (event: Event) => {\n            event.stopPropagation();\n            handleFlyoutOpenChange(false);\n        },\n    };\n\n    return isEditing || (internalItems?.length ?? 0) > 0 ? (\n        <div data-test-id=\"attachments-flyout-button\">\n            <Flyout.Root\n                open={isFlyoutOpen}\n                onOpenChange={(isOpen) => handleFlyoutOpenChange(draggedItem ? true : isOpen)}\n            >\n                <Tooltip.Root enterDelay={500}>\n                    <Tooltip.Trigger asChild>\n                        <Flyout.Trigger asChild data-test-id=\"attachments-button-trigger\">\n                            <TriggerComponent isFlyoutOpen={isFlyoutOpen}>\n                                <div>{items.length > 0 ? items.length : 'Add'}</div>\n                            </TriggerComponent>\n                        </Flyout.Trigger>\n                    </Tooltip.Trigger>\n                    <Flyout.Content side=\"bottom\" align=\"end\" {...autoFocusModifier}>\n                        <div className=\"tw-w-[300px]\" data-test-id=\"attachments-flyout-content\">\n                            {internalItems.length > 0 && (\n                                <DndContext\n                                    sensors={sensors}\n                                    collisionDetection={closestCenter}\n                                    onDragStart={handleDragStart}\n                                    onDragEnd={handleDragEnd}\n                                    modifiers={[restrictToVerticalAxis]}\n                                >\n                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n                                        <div className=\"tw-border-b tw-border-b-line tw-relative\">\n                                            {internalItems.map((item) => (\n                                                <SortableAttachmentItem\n                                                    isEditing={isEditing}\n                                                    isLoading={assetIdsLoading.includes(item.id)}\n                                                    key={item.id}\n                                                    item={item}\n                                                    onDelete={() => onDelete(item)}\n                                                    onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}\n                                                    onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                        onReplaceItemWithUpload(item, uploadedAsset)\n                                                    }\n                                                    onDownload={() =>\n                                                        appBridge.dispatch({\n                                                            name: 'downloadAsset',\n                                                            payload: item,\n                                                        })\n                                                    }\n                                                />\n                                            ))}\n                                        </div>\n                                    </SortableContext>\n                                </DndContext>\n                            )}\n                            {isEditing && (\n                                <div className=\"tw-px-5 tw-py-3\">\n                                    <div className=\"tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4\">\n                                        Add attachments\n                                    </div>\n                                    <AssetInput\n                                        isLoading={isUploadLoading}\n                                        size={AssetInputSize.Small}\n                                        onUploadClick={(fileList) => setSelectedFiles(fileList)}\n                                        onLibraryClick={onOpenAssetChooser}\n                                    />\n                                </div>\n                            )}\n                        </div>\n                    </Flyout.Content>\n                    <Tooltip.Content side=\"top\">Attachments</Tooltip.Content>\n                </Tooltip.Root>\n            </Flyout.Root>\n        </div>\n    ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","TriggerComponent","AttachmentsButtonTrigger","isOpen","onOpenChange","internalItems","setInternalItems","useState","isFlyoutOpenInternal","setIsFlyoutOpenInternal","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","openAssetChooser","closeAssetChooser","useAssetChooser","isControllingStateExternally","isFlyoutOpen","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","handleFlyoutOpenChange","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","autoFocusModifier","jsx","Flyout","jsxs","Tooltip","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","rectSortingStrategy","SortableAttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":";;;;;;;;;;AAuBO,MAAMA,KAAc,CAAC;AAAA,EACxB,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAkBC,IAAmBC;AAAA,EACrC,QAAAC;AAAA,EACA,cAAAC;AACJ,MAAwB;AACpB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAkBd,CAAK,GAC3D,CAACe,GAAsBC,CAAuB,IAAIF,EAAS,EAAK,GAChEG,IAAUC,GAAWC,EAAUC,EAAa,GAAGD,EAAUE,EAAc,CAAC,GACxE,CAACC,GAAgBC,CAAiB,IAAIT,EAA6B,MAAS,GAC5E,CAACU,GAAiBC,CAAkB,IAAIX,EAAS,EAAK,GACtD,CAACY,GAAiBC,CAAkB,IAAIb,EAAmB,CAAA,CAAE,GAC7D,CAACc,GAAeC,CAAgB,IAAIf,EAA0B,IAAI,GAClEgB,IAAYC,GAAexB,CAAS,GACpC,EAAE,kBAAAyB,GAAkB,mBAAAC,MAAsBC,GAAgB3B,CAAS,GACnE4B,IAA+BzB,MAAW,QAC1C0B,IAAeD,IAA+BzB,IAASK,GAEvDsB,IAAczB,GAAe,KAAK,CAAC0B,MAASA,EAAK,OAAOhB,CAAc,GAEtE,CAACiB,GAAY,EAAE,SAASC,GAAe,SAAAC,EAAA,CAAS,IAAIC,GAAe;AAAA,IACrE,kBAAkB,MAAM,CAAClB,KAAmBC,EAAmB,EAAI;AAAA,EAAA,CACtE,GAEKkB,IAAyB,CAACjC,MAAoB;AAGhD,KAFoByB,IAA+BxB,IAAeK,KAEpDN,CAAM;AAAA,EACxB;AAEA,EAAAkC,EAAU,MAAM;AACZ,IAAA/B,EAAiBb,CAAK;AAAA,EAC1B,GAAG,CAACA,CAAK,CAAC,GAEV4C,EAAU,MAAM;AACZ,IAAIhB,MACAH,EAAmB,EAAI,GACvBc,EAAWX,CAAa;AAAA,EAGhC,GAAG,CAACA,CAAa,CAAC,GAElBgB,EAAU,MAAM;AAOZ,KANmB,YACXH,MACA,MAAMpC,EAASmC,CAAa,GAC5Bf,EAAmB,EAAK;AAAA,EAKpC,GAAG,CAACgB,GAASD,CAAa,CAAC;AAE3B,QAAMK,IAAqB,MAAM;AAC7B,IAAAF,EAAuB,EAAK,GAC5BX;AAAA,MACI,CAACc,MAAoB;AACjB,QAAA1C,EAAS0C,CAAM,GACfb,EAAA,GACAU,EAAuB,EAAI;AAAA,MAC/B;AAAA,MACA;AAAA,QACI,gBAAgB;AAAA,QAChB,kBAAkB/B,EAAc,IAAI,CAACmC,MAAiBA,EAAa,EAAE;AAAA,MAAA;AAAA,IACzE;AAAA,EAER,GAEMC,IAA0B,CAACC,MAAqB;AAClD,IAAAN,EAAuB,EAAK,GAC5BX;AAAA;AAAA,MAEI,OAAOc,MAAoB;AACvB,QAAAH,EAAuB,EAAI,GAC3BV,EAAA,GACAN,EAAmB,CAAC,GAAGD,GAAiBuB,EAAU,EAAE,CAAC,GACrD,MAAM/C,EAAoB+C,GAAWH,EAAO,CAAC,CAAC,GAC9CnB,EAAmBD,EAAgB,OAAO,CAACwB,MAAOA,MAAOD,EAAU,EAAE,CAAC;AAAA,MAC1E;AAAA,MACA;AAAA,QACI,gBAAgB;AAAA,QAChB,kBAAkBrC,EAAc,IAAI,CAACmC,MAAiBA,EAAa,EAAE;AAAA,MAAA;AAAA,IACzE;AAAA,EAER,GAEMI,IAA0B,OAAOF,GAAkBG,MAAyB;AAC9E,IAAAzB,EAAmB,CAAC,GAAGD,GAAiBuB,EAAU,EAAE,CAAC,GACrD,MAAM9C,EAAoB8C,GAAWG,CAAa,GAClDzB,EAAmBD,EAAgB,OAAO,CAACwB,MAAOA,MAAOD,EAAU,EAAE,CAAC;AAAA,EAC1E,GAEMI,IAAkB,CAACC,MAA0B;AAC/C,UAAM,EAAE,QAAAC,MAAWD;AACnB,IAAA/B,EAAkBgC,EAAO,EAAY;AAAA,EACzC,GAEMC,IAAgB,CAACF,MAAwB;AAC3C,UAAM,EAAE,QAAAC,GAAQ,MAAAE,EAAA,IAASH;AACzB,QAAIG,KAAQF,EAAO,OAAOE,EAAK,MAAM7C,GAAe;AAChD,YAAM8C,IAAW9C,EAAc,UAAU,CAAC+C,MAAMA,EAAE,OAAOJ,EAAO,EAAE,GAC5DK,IAAWhD,EAAc,UAAU,CAAC+C,MAAMA,EAAE,OAAOF,EAAK,EAAE,GAC1DI,IAAcC,GAAUlD,GAAe8C,GAAUE,CAAQ;AAC/D,MAAA/C,EAAiBgD,CAAW,GAC5BvD,EAASuD,CAAW;AAAA,IACxB;AACA,IAAAtC,EAAkB,MAAS;AAAA,EAC/B,GAEMwC,IAAoB;AAAA,IACtB,iBAAiB,CAACT,MAAiB;AAC/B,MAAAA,EAAM,eAAA;AAAA,IACV;AAAA,IACA,iBAAiB,CAACA,MAAiB;AAC/B,MAAAA,EAAM,gBAAA,GACNX,EAAuB,EAAK;AAAA,IAChC;AAAA,EAAA;AAGJ,SAAOb,MAAclB,GAAe,UAAU,KAAK,IAC/C,gBAAAoD,EAAC,OAAA,EAAI,gBAAa,6BACd,UAAA,gBAAAA;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,MAAM7B;AAAA,MACN,cAAc,CAAC1B,MAAWiC,EAAuBN,IAAc,KAAO3B,CAAM;AAAA,MAE5E,UAAA,gBAAAwD,EAACC,EAAQ,MAAR,EAAa,YAAY,KACtB,UAAA;AAAA,QAAA,gBAAAH,EAACG,EAAQ,SAAR,EAAgB,SAAO,IACpB,UAAA,gBAAAH,EAACC,EAAO,SAAP,EAAe,SAAO,IAAC,gBAAa,8BACjC,4BAACzD,GAAA,EAAiB,cAAA4B,GACd,UAAA,gBAAA4B,EAAC,OAAA,EAAK,UAAAhE,EAAM,SAAS,IAAIA,EAAM,SAAS,MAAA,CAAM,EAAA,CAClD,EAAA,CACJ,GACJ;AAAA,QACA,gBAAAgE,EAACC,EAAO,SAAP,EAAe,MAAK,UAAS,OAAM,OAAO,GAAGF,GAC1C,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,gBAAe,gBAAa,8BACtC,UAAA;AAAA,UAAAtD,EAAc,SAAS,KACpB,gBAAAoD;AAAA,YAACI;AAAA,YAAA;AAAA,cACG,SAAAnD;AAAA,cACA,oBAAoBoD;AAAA,cACpB,aAAahB;AAAA,cACb,WAAWG;AAAA,cACX,WAAW,CAACc,EAAsB;AAAA,cAElC,UAAA,gBAAAN,EAACO,IAAA,EAAgB,OAAO3D,GAAe,UAAU4D,IAC7C,UAAA,gBAAAR,EAAC,OAAA,EAAI,WAAU,4CACV,UAAApD,EAAc,IAAI,CAAC0B,MAChB,gBAAA0B;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACG,WAAA3C;AAAA,kBACA,WAAWJ,EAAgB,SAASY,EAAK,EAAE;AAAA,kBAE3C,MAAAA;AAAA,kBACA,UAAU,MAAMrC,EAASqC,CAAI;AAAA,kBAC7B,qBAAqB,MAAMU,EAAwBV,CAAI;AAAA,kBACvD,qBAAqB,CAACc,MAClBD,EAAwBb,GAAMc,CAAa;AAAA,kBAE/C,YAAY,MACR7C,EAAU,SAAS;AAAA,oBACf,MAAM;AAAA,oBACN,SAAS+B;AAAA,kBAAA,CACZ;AAAA,gBAAA;AAAA,gBAXAA,EAAK;AAAA,cAAA,CAcjB,GACL,EAAA,CACJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAGPR,KACG,gBAAAoC,EAAC,OAAA,EAAI,WAAU,mBACX,UAAA;AAAA,YAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,8DAA6D,UAAA,mBAE5E;AAAA,YACA,gBAAAA;AAAA,cAACU;AAAA,cAAA;AAAA,gBACG,WAAWlD;AAAA,gBACX,MAAMmD,GAAe;AAAA,gBACrB,eAAe,CAACC,MAAa/C,EAAiB+C,CAAQ;AAAA,gBACtD,gBAAgB/B;AAAA,cAAA;AAAA,YAAA;AAAA,UACpB,EAAA,CACJ;AAAA,QAAA,EAAA,CAER,EAAA,CACJ;AAAA,0BACCsB,EAAQ,SAAR,EAAgB,MAAK,OAAM,UAAA,cAAA,CAAW;AAAA,MAAA,EAAA,CAC3C;AAAA,IAAA;AAAA,EAAA,GAER,IACA;AACR;"}
+{"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    DndContext,\n    type DragEndEvent,\n    type DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    closestCenter,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { type Asset, useAssetChooser, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport { AssetInput, AssetInputSize } from '@frontify/fondue';\nimport { Tooltip, Flyout } from '@frontify/fondue/components';\nimport { useEffect, useState } from 'react';\n\nimport { SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsButtonTrigger } from './AttachmentsButtonTrigger';\nimport { type AttachmentsProps } from './types';\n\nexport const Attachments = ({\n    items = [],\n    onDelete,\n    onReplaceWithBrowse,\n    onReplaceWithUpload,\n    onBrowse,\n    onUpload,\n    onSorted,\n    appBridge,\n    triggerComponent: TriggerComponent = AttachmentsButtonTrigger,\n    isOpen,\n    onOpenChange,\n}: AttachmentsProps) => {\n    const [internalItems, setInternalItems] = useState<Asset[]>(items);\n    const [isFlyoutOpenInternal, setIsFlyoutOpenInternal] = useState(false);\n    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));\n    const [draggedAssetId, setDraggedAssetId] = useState<number | undefined>(undefined);\n    const [isUploadLoading, setIsUploadLoading] = useState(false);\n    const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);\n    const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);\n    const isEditing = useEditorState(appBridge);\n    const { openAssetChooser, closeAssetChooser } = useAssetChooser(appBridge);\n    const isControllingStateExternally = isOpen !== undefined;\n    const isFlyoutOpen = isControllingStateExternally ? isOpen : isFlyoutOpenInternal;\n\n    const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);\n\n    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({\n        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),\n    });\n\n    const handleFlyoutOpenChange = (isOpen: boolean) => {\n        const stateSetter = isControllingStateExternally ? onOpenChange : setIsFlyoutOpenInternal;\n\n        stateSetter?.(isOpen);\n    };\n\n    useEffect(() => {\n        setInternalItems(items);\n    }, [items]);\n\n    useEffect(() => {\n        if (selectedFiles) {\n            setIsUploadLoading(true);\n            uploadFile(selectedFiles);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedFiles]);\n\n    useEffect(() => {\n        const uploadDone = async () => {\n            if (doneAll) {\n                await onUpload(uploadResults);\n                setIsUploadLoading(false);\n            }\n        };\n        uploadDone();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [doneAll, uploadResults]);\n\n    const onOpenAssetChooser = () => {\n        handleFlyoutOpenChange(false);\n        openAssetChooser(\n            (result: Asset[]) => {\n                onBrowse(result);\n                closeAssetChooser();\n                handleFlyoutOpenChange(true);\n            },\n            {\n                multiSelection: true,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithBrowse = (toReplace: Asset) => {\n        handleFlyoutOpenChange(false);\n        openAssetChooser(\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            async (result: Asset[]) => {\n                handleFlyoutOpenChange(true);\n                closeAssetChooser();\n                setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n                await onReplaceWithBrowse(toReplace, result[0]);\n                setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n            },\n            {\n                multiSelection: false,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {\n        setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n        await onReplaceWithUpload(toReplace, uploadedAsset);\n        setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setDraggedAssetId(active.id as number);\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        const { active, over } = event;\n        if (over && active.id !== over.id && internalItems) {\n            const oldIndex = internalItems.findIndex((i) => i.id === active.id);\n            const newIndex = internalItems.findIndex((i) => i.id === over.id);\n            const sortedItems = arrayMove(internalItems, oldIndex, newIndex);\n            setInternalItems(sortedItems);\n            onSorted(sortedItems);\n        }\n        setDraggedAssetId(undefined);\n    };\n\n    const autoFocusModifier = {\n        onOpenAutoFocus: (event: Event) => {\n            event.preventDefault();\n        },\n        onEscapeKeyDown: (event: Event) => {\n            event.stopPropagation();\n            handleFlyoutOpenChange(false);\n        },\n    };\n\n    return isEditing || (internalItems?.length ?? 0) > 0 ? (\n        <div data-test-id=\"attachments-flyout-button\">\n            <Flyout.Root\n                open={isFlyoutOpen}\n                onOpenChange={(isOpen) => handleFlyoutOpenChange(draggedItem ? true : isOpen)}\n            >\n                <Tooltip.Root enterDelay={500}>\n                    <Tooltip.Trigger asChild>\n                        <Flyout.Trigger asChild data-test-id=\"attachments-button-trigger\">\n                            <TriggerComponent isFlyoutOpen={isFlyoutOpen}>\n                                <div>{items.length > 0 ? items.length : 'Add'}</div>\n                            </TriggerComponent>\n                        </Flyout.Trigger>\n                    </Tooltip.Trigger>\n                    <Flyout.Content side=\"bottom\" align=\"end\" {...autoFocusModifier}>\n                        <div className=\"tw-w-[300px]\" data-test-id=\"attachments-flyout-content\">\n                            {internalItems.length > 0 && (\n                                <DndContext\n                                    sensors={sensors}\n                                    collisionDetection={closestCenter}\n                                    onDragStart={handleDragStart}\n                                    onDragEnd={handleDragEnd}\n                                    modifiers={[restrictToVerticalAxis]}\n                                >\n                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n                                        <div className=\"tw-border-b tw-border-b-line tw-relative\">\n                                            {internalItems.map((item) => (\n                                                <SortableAttachmentItem\n                                                    isEditing={isEditing}\n                                                    isLoading={assetIdsLoading.includes(item.id)}\n                                                    key={item.id}\n                                                    item={item}\n                                                    onDelete={() => onDelete(item)}\n                                                    onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}\n                                                    onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                        onReplaceItemWithUpload(item, uploadedAsset)\n                                                    }\n                                                    onDownload={() =>\n                                                        appBridge.dispatch({\n                                                            name: 'downloadAsset',\n                                                            payload: item,\n                                                        })\n                                                    }\n                                                />\n                                            ))}\n                                        </div>\n                                    </SortableContext>\n                                </DndContext>\n                            )}\n                            {isEditing && (\n                                <div className=\"tw-px-5 tw-py-3\">\n                                    <div className=\"tw-font-primary tw-font-medium tw-text-primary tw-text-small tw-my-4\">\n                                        Add attachments\n                                    </div>\n                                    <AssetInput\n                                        isLoading={isUploadLoading}\n                                        size={AssetInputSize.Small}\n                                        onUploadClick={(fileList) => setSelectedFiles(fileList)}\n                                        onLibraryClick={onOpenAssetChooser}\n                                    />\n                                </div>\n                            )}\n                        </div>\n                    </Flyout.Content>\n                    <Tooltip.Content side=\"top\">Attachments</Tooltip.Content>\n                </Tooltip.Root>\n            </Flyout.Root>\n        </div>\n    ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","TriggerComponent","AttachmentsButtonTrigger","isOpen","onOpenChange","internalItems","setInternalItems","useState","isFlyoutOpenInternal","setIsFlyoutOpenInternal","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","openAssetChooser","closeAssetChooser","useAssetChooser","isControllingStateExternally","isFlyoutOpen","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","handleFlyoutOpenChange","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","autoFocusModifier","jsx","Flyout","jsxs","Tooltip","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","rectSortingStrategy","SortableAttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":"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"}

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

@@ -1,28 +1,28 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-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(
-  ({ children: e, isFlyoutOpen: r, ...o }, n) => /* @__PURE__ */ s(
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { IconPaperclip as c, IconCaretDown as i } from "@frontify/fondue/icons";
+import { forwardRef as s } from "react";
+import { joinClassNames as w } from "../../utilities/react/joinClassNames.es.js";
+const d = s(
+  ({ children: e, isFlyoutOpen: n, ...o }, r) => /* @__PURE__ */ a(
     "button",
     {
-      ref: n,
-      className: l([
-        "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",
-        r ? "tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed" : "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"
+      ref: r,
+      className: w([
+        "tw-flex tw-text-x-small tw-font-primary 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-mid",
+        n ? "tw-bg-container-secondary-active tw-text-container-secondary-on-secondary-container" : "tw-bg-surface hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active tw-text-container-secondary-on-secondary-container hover:tw-text-container-secondary-on-secondary-container active:tw-text-container-secondary-on-secondary-container"
       ]),
       "data-test-id": "attachments-button-trigger",
       ...o,
       children: [
-        /* @__PURE__ */ t(a, { size: "16" }),
+        /* @__PURE__ */ t(c, { size: "16" }),
         e,
         /* @__PURE__ */ t(i, { size: "12" })
       ]
     }
   )
 );
-u.displayName = "AttachmentsButtonTrigger";
+d.displayName = "AttachmentsButtonTrigger";
 export {
-  u as AttachmentsButtonTrigger
+  d as AttachmentsButtonTrigger
 };
 //# sourceMappingURL=AttachmentsButtonTrigger.es.js.map

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 { 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;"}
+{"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-x-small tw-font-primary 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-mid',\n                isFlyoutOpen\n                    ? 'tw-bg-container-secondary-active tw-text-container-secondary-on-secondary-container'\n                    : 'tw-bg-surface hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active tw-text-container-secondary-on-secondary-container hover:tw-text-container-secondary-on-secondary-container active:tw-text-container-secondary-on-secondary-container',\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,wFACA;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;"}