@frontify/guideline-blocks-settings 0.28.0 → 0.28.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @frontify/guideline-blocks-settings
 
+## 0.28.2
+
+### Patch Changes
+
+- [`fa969e9`](https://github.com/Frontify/brand-sdk/commit/fa969e90c980411273ff3c8c6f015b303fd59fe3) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Update dependencies
+
+- [`fa969e9`](https://github.com/Frontify/brand-sdk/commit/fa969e90c980411273ff3c8c6f015b303fd59fe3) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Fix issues with styles export
+
+- Updated dependencies [[`fa969e9`](https://github.com/Frontify/brand-sdk/commit/fa969e90c980411273ff3c8c6f015b303fd59fe3)]:
+  - @frontify/sidebar-settings@0.6.1
+
+## 0.28.1
+
+### Patch Changes
+
+- [`382f7fb`](https://github.com/Frontify/brand-sdk/commit/382f7fbde444170f8f7b90d2ab655edbfd260692) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Fix build
+
 ## 0.28.0
 
 ### Minor Changes

package/dist/_virtual/jsx-runtime.es.js

@@ -0,0 +1,5 @@
+var e = { exports: {} };
+export {
+  e as __module
+};
+//# sourceMappingURL=jsx-runtime.es.js.map

package/dist/_virtual/jsx-runtime.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.development.es.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=react-jsx-runtime.development.es.js.map

package/dist/_virtual/react-jsx-runtime.development.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx-runtime.development.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.production.min.es.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=react-jsx-runtime.production.min.es.js.map

package/dist/_virtual/react-jsx-runtime.production.min.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx-runtime.production.min.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentItem.es.js","sources":["../../../src/components/Attachments/AttachmentItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MutableRefObject, forwardRef, useEffect, useState } from 'react';\nimport { Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport {\n    ActionMenu,\n    Button,\n    ButtonEmphasis,\n    FOCUS_STYLE,\n    Flyout,\n    FlyoutPlacement,\n    IconArrowCircleUp20,\n    IconDocument24,\n    IconGrabHandle20,\n    IconImage24,\n    IconImageStack20,\n    IconMusicNote24,\n    IconPen20,\n    IconPlayFrame24,\n    IconTrashBin20,\n    LoadingCircle,\n    LoadingCircleSize,\n    MenuItemContentSize,\n    MenuItemStyle,\n} from '@frontify/fondue';\nimport { AttachmentItemProps, SortableAttachmentItemProps } from './types';\nimport { joinClassNames } from '../../utilities';\n\nconst getDecorator = (type: string) => {\n    if (type === 'IMAGE') {\n        return <IconImage24 />;\n    } else if (type === 'VIDEO') {\n        return <IconPlayFrame24 />;\n    } else if (type === 'AUDIO') {\n        return <IconMusicNote24 />;\n    } else {\n        return <IconDocument24 />;\n    }\n};\n\nexport const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(\n    (\n        {\n            item,\n            isEditing,\n            draggableProps,\n            transformStyle,\n            isDragging,\n            isOverlay,\n            isLoading,\n            onDelete,\n            onReplaceWithBrowse,\n            onReplaceWithUpload,\n        },\n        ref,\n    ) => {\n        const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>();\n        const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/*' });\n        const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();\n        const { focusProps, isFocusVisible } = useFocusRing();\n\n        useEffect(() => {\n            if (selectedFiles) {\n                uploadFile(selectedFiles[0]);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [selectedFiles]);\n\n        useEffect(() => {\n            if (doneAll) {\n                onReplaceWithUpload(uploadResults[0]);\n            }\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [doneAll, uploadResults]);\n\n        const download = (url: string, filename: string) => {\n            fetch(url).then((response) => {\n                response.blob().then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = filename;\n                    a.click();\n                });\n            });\n        };\n\n        const showLoadingCircle = isLoading || (selectedFiles && !doneAll);\n\n        return (\n            <button\n                aria-label=\"Download attachment\"\n                data-test-id=\"attachments-item\"\n                onClick={() => download(item.genericUrl, item.fileName)}\n                ref={ref}\n                style={{\n                    ...transformStyle,\n                    opacity: isDragging && !isOverlay ? 0.3 : 1,\n                    fontFamily: 'var(-f-theme-settings-body-font-family)',\n                }}\n                className={joinClassNames([\n                    'tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-box-neutral-hover',\n                    isDragging ? 'tw-bg-box-neutral-hover' : '',\n                ])}\n            >\n                <div className=\"tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover\">\n                    {showLoadingCircle ? (\n                        <LoadingCircle size={LoadingCircleSize.Small} />\n                    ) : (\n                        getDecorator(item.objectType)\n                    )}\n                </div>\n                <div className=\"tw-text-s tw-flex-1 tw-min-w-0\">\n                    <div className=\"tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover\">\n                        {item.title}\n                    </div>\n                    <div className=\"tw-text-text-weak\">{`${item.fileSizeHumanReadable} - ${item.extension}`}</div>\n                </div>\n                {isEditing && (\n                    <div\n                        data-test-id=\"attachments-actionbar\"\n                        className={joinClassNames([\n                            'tw-flex tw-gap-0.5 group-focus:tw-opacity-100 focus-visible:tw-opacity-100 focus-within:tw-opacity-100 group-hover:tw-opacity-100',\n                            isOverlay || selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',\n                        ])}\n                    >\n                        <button\n                            {...focusProps}\n                            {...draggableProps}\n                            aria-label=\"Drag attachment\"\n                            className={joinClassNames([\n                                ' tw-border-button-border tw-bg-button-background active:tw-bg-button-background-pressed tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-outline-none tw-font-medium tw-rounded tw-h-9 tw-w-9 ',\n                                isDragging || isOverlay\n                                    ? 'tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed'\n                                    : 'tw-cursor-grab hover:tw-bg-button-background-hover',\n                                isFocusVisible && FOCUS_STYLE,\n                                isFocusVisible && 'tw-z-[2]',\n                            ])}\n                        >\n                            <IconGrabHandle20 />\n                        </button>\n                        <div data-test-id=\"attachments-actionbar-flyout\">\n                            <Flyout\n                                placement={FlyoutPlacement.Right}\n                                isOpen={selectedAsset?.id === item.id}\n                                fitContent\n                                legacyFooter={false}\n                                onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n                                trigger={(_, ref) => (\n                                    <Button\n                                        ref={ref as MutableRefObject<HTMLButtonElement>}\n                                        icon={<IconPen20 />}\n                                        emphasis={ButtonEmphasis.Default}\n                                        onClick={() => setSelectedAsset(item)}\n                                    />\n                                )}\n                            >\n                                <ActionMenu\n                                    menuBlocks={[\n                                        {\n                                            id: 'menu',\n                                            menuItems: [\n                                                {\n                                                    id: 'upload',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Replace with upload',\n                                                    onClick: () => {\n                                                        openFileDialog();\n                                                        setSelectedAsset(undefined);\n                                                    },\n\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconArrowCircleUp20 />\n                                                        </div>\n                                                    ),\n                                                },\n\n                                                {\n                                                    id: 'asset',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Replace with asset',\n                                                    onClick: () => {\n                                                        onReplaceWithBrowse();\n                                                        setSelectedAsset(undefined);\n                                                    },\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconImageStack20 />\n                                                        </div>\n                                                    ),\n                                                },\n                                            ],\n                                        },\n                                        {\n                                            id: 'menu-delete',\n                                            menuItems: [\n                                                {\n                                                    id: 'delete',\n                                                    size: MenuItemContentSize.XSmall,\n                                                    title: 'Delete',\n                                                    style: MenuItemStyle.Danger,\n                                                    onClick: () => {\n                                                        onDelete();\n                                                        setSelectedAsset(undefined);\n                                                    },\n\n                                                    initialValue: true,\n                                                    decorator: (\n                                                        <div className=\"tw-mr-2\">\n                                                            <IconTrashBin20 />\n                                                        </div>\n                                                    ),\n                                                },\n                                            ],\n                                        },\n                                    ]}\n                                />\n                            </Flyout>\n                        </div>\n                    </div>\n                )}\n            </button>\n        );\n    },\n);\n\nAttachmentItem.displayName = 'AttachmentItem';\n\nexport const SortableAttachmentItem = (props: SortableAttachmentItemProps) => {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: props.item.id,\n    });\n\n    const transformStyle = {\n        transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : '',\n        transition,\n        zIndex: isDragging ? 2 : 1,\n    };\n\n    const draggableProps = { ...attributes, ...listeners };\n\n    return (\n        <AttachmentItem\n            ref={setNodeRef}\n            isDragging={isDragging}\n            transformStyle={transformStyle}\n            draggableProps={draggableProps}\n            {...props}\n        />\n    );\n};\n"],"names":["getDecorator","type","IconImage24","IconPlayFrame24","IconMusicNote24","IconDocument24","AttachmentItem","forwardRef","item","isEditing","draggableProps","transformStyle","isDragging","isOverlay","isLoading","onDelete","onReplaceWithBrowse","onReplaceWithUpload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","focusProps","isFocusVisible","useFocusRing","useEffect","download","url","filename","response","blob","a","showLoadingCircle","jsxs","joinClassNames","jsx","LoadingCircle","LoadingCircleSize","FOCUS_STYLE","IconGrabHandle20","Flyout","FlyoutPlacement","isOpen","_","Button","IconPen20","ButtonEmphasis","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20","MenuItemStyle","IconTrashBin20","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport {\n    DndContext,\n    DragEndEvent,\n    DragOverlay,\n    DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    closestCenter,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { Asset, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport {\n    AssetInput,\n    AssetInputSize,\n    Flyout,\n    FlyoutPlacement,\n    IconCaretDown12,\n    IconPaperclip16,\n    Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsProps } from './types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\n\nexport const Attachments = ({\n    items = [],\n    onDelete,\n    onReplaceWithBrowse,\n    onReplaceWithUpload,\n    onBrowse,\n    onUpload,\n    onSorted,\n    appBridge,\n}: AttachmentsProps) => {\n    const [internalItems, setInternalItems] = useState<Asset[]>(items);\n    const [isFlyoutOpen, setIsFlyoutOpen] = 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\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    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        setIsFlyoutOpen(false);\n        appBridge.openAssetChooser(\n            (result: Asset[]) => {\n                onBrowse(result);\n                appBridge.closeAssetChooser();\n                setIsFlyoutOpen(true);\n            },\n            {\n                multiSelection: true,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithBrowse = (toReplace: Asset) => {\n        setIsFlyoutOpen(false);\n        appBridge.openAssetChooser(\n            async (result: Asset[]) => {\n                setIsFlyoutOpen(true);\n                appBridge.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    return isEditing || (internalItems?.length ?? 0) > 0 ? (\n        <Tooltip\n            withArrow\n            position={TooltipPosition.Top}\n            content=\"Attachments\"\n            disabled={isFlyoutOpen}\n            enterDelay={500}\n            triggerElement={\n                <div data-test-id=\"attachments-flyout-button\">\n                    <Flyout\n                        placement={FlyoutPlacement.BottomRight}\n                        onOpenChange={(isOpen) => setIsFlyoutOpen(!!draggedItem ? true : isOpen)}\n                        isOpen={isFlyoutOpen}\n                        hug={false}\n                        fitContent\n                        legacyFooter={false}\n                        trigger={\n                            <div className=\"tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line\">\n                                <IconPaperclip16 />\n                                <div>{items.length > 0 ? items.length : 'Add'}</div>\n                                <IconCaretDown12 />\n                            </div>\n                        }\n                    >\n                        <div className=\"tw-w-[300px]\">\n                            {internalItems.length > 0 && (\n                                <DndContext\n                                    sensors={sensors}\n                                    collisionDetection={closestCenter}\n                                    onDragStart={handleDragStart}\n                                    onDragEnd={handleDragEnd}\n                                    modifiers={[restrictToWindowEdges]}\n                                >\n                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n                                        <div className=\"tw-border-b tw-border-b-line\">\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                                                />\n                                            ))}\n                                        </div>\n                                    </SortableContext>\n                                    <DragOverlay>\n                                        {draggedItem && (\n                                            <AttachmentItem\n                                                isOverlay={true}\n                                                isEditing={isEditing}\n                                                key={draggedAssetId}\n                                                item={draggedItem}\n                                                isDragging={true}\n                                                onDelete={() => onDelete(draggedItem)}\n                                                onReplaceWithBrowse={() => onReplaceItemWithBrowse(draggedItem)}\n                                                onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                    onReplaceItemWithUpload(draggedItem, uploadedAsset)\n                                                }\n                                            />\n                                        )}\n                                    </DragOverlay>\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>\n                </div>\n            }\n        />\n    ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","internalItems","setInternalItems","useState","isFlyoutOpen","setIsFlyoutOpen","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","jsx","Tooltip","TooltipPosition","Flyout","FlyoutPlacement","isOpen","jsxs","IconPaperclip16","IconCaretDown12","DndContext","closestCenter","restrictToWindowEdges","SortableContext","rectSortingStrategy","SortableAttachmentItem","DragOverlay","AttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":"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"}

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

@@ -0,0 +1,150 @@
+import { j as t } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { LoadingCircle as y, IconExclamationMarkTriangle as z, Flyout as O, ActionMenu as R, MenuItemContentSize as p, IconArrowCircleUp20 as X, IconImageStack20 as A } from "@frontify/fondue";
+import { useState as b, useRef as F } from "react";
+import { joinClassNames as T } from "../../utilities/react/joinClassNames.es.js";
+import { FileExtensionSets as V } from "@frontify/app-bridge";
+const D = ({
+  onDrop: n,
+  label: c,
+  icon: h,
+  secondaryLabel: u,
+  isLoading: l,
+  fillParentContainer: k,
+  onAssetChooseClick: g,
+  onUploadClick: j,
+  withMenu: I = !0,
+  onClick: f,
+  validFileType: m,
+  verticalLayout: N
+}) => {
+  const [d, v] = b(!1), [i, w] = b(), x = F(null), [o, a] = b(void 0), M = (e) => {
+    if (e.preventDefault(), v(!1), !E(e.dataTransfer.files)) {
+      a("Invalid"), setTimeout(() => {
+        a(void 0);
+      }, 1e3);
+      return;
+    }
+    n == null || n(e.dataTransfer.files);
+  }, E = (e) => {
+    if (!m)
+      return !0;
+    for (let r = 0; r < e.length; r++) {
+      const s = e[r].name.split(".").pop() ?? "";
+      if (!V[m].includes(s))
+        return !1;
+    }
+    return !0;
+  }, S = (e) => {
+    if (!x.current || l)
+      return;
+    const { left: r, top: s } = x.current.getBoundingClientRect(), B = e.clientX - r, C = e.clientY - s;
+    w([B, C]);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      ref: x,
+      "data-test-id": "block-inject-button",
+      className: T([
+        "tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
+        N ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr",
+        k ? "tw-h-full" : "tw-h-[72px]",
+        d && !l ? "tw-border-dashed" : "tw-border-solid",
+        i && "tw-bg-blank-state-pressed-inverse",
+        d && "tw-bg-blank-state-weak-inverse",
+        o ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
+        l || i || d || o ? "" : "tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover",
+        (d || i) && !o ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
+      ]),
+      onDragEnter: n ? (e) => {
+        var r;
+        if (v(!0), m === "Images")
+          for (const s of Array.from(e.dataTransfer.items))
+            (r = s == null ? void 0 : s.type) != null && r.startsWith("image/") ? a(void 0) : a("Invalid");
+      } : void 0,
+      onDragLeave: n ? () => {
+        v(!1), a(void 0);
+      } : void 0,
+      onDrop: n ? M : void 0,
+      onClick: (e) => {
+        I && S(e), f == null || f();
+      },
+      children: [
+        l ? /* @__PURE__ */ t.jsx(y, {}) : (
+          // eslint-disable-next-line unicorn/no-nested-ternary
+          o ? /* @__PURE__ */ t.jsxs("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
+            /* @__PURE__ */ t.jsx(z, {}),
+            o
+          ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            h && /* @__PURE__ */ t.jsx("div", { children: h }),
+            (c || u) && /* @__PURE__ */ t.jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
+              c && /* @__PURE__ */ t.jsx("div", { className: "tw-font-medium", children: c }),
+              u && /* @__PURE__ */ t.jsx("div", { className: "tw-font-normal", children: u })
+            ] })
+          ] })
+        ),
+        i && /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "tw-absolute tw-left-0 tw-top-full tw-z-20",
+            style: {
+              left: i[0],
+              top: i[1]
+            },
+            children: /* @__PURE__ */ t.jsx(
+              O,
+              {
+                onOpenChange: (e) => !e && w(void 0),
+                isOpen: !0,
+                fitContent: !0,
+                hug: !1,
+                legacyFooter: !1,
+                trigger: /* @__PURE__ */ t.jsx("div", {}),
+                children: /* @__PURE__ */ t.jsx(
+                  R,
+                  {
+                    menuBlocks: [
+                      {
+                        id: "menu",
+                        menuItems: [
+                          ...j ? [
+                            {
+                              id: "upload",
+                              size: p.XSmall,
+                              title: "Upload asset",
+                              onClick: () => {
+                                j(), w(void 0);
+                              },
+                              initialValue: !0,
+                              decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(X, {}) })
+                            }
+                          ] : [],
+                          ...g ? [
+                            {
+                              id: "asset",
+                              size: p.XSmall,
+                              title: "Browse asset",
+                              onClick: () => {
+                                g(), w(void 0);
+                              },
+                              initialValue: !0,
+                              decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(A, {}) })
+                            }
+                          ] : []
+                        ]
+                      }
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  D as BlockInjectButton
+};
+//# sourceMappingURL=BlockInjectButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconArrowCircleUp20,\n    IconExclamationMarkTriangle,\n    IconImageStack20,\n    LoadingCircle,\n    MenuItemContentSize,\n} from '@frontify/fondue';\nimport { DragEventHandler, MouseEventHandler, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\nimport { BlockInjectButtonProps } from './types';\nimport { FileExtension, FileExtensionSets } from '@frontify/app-bridge';\n\nexport const BlockInjectButton = ({\n    onDrop,\n    label,\n    icon,\n    secondaryLabel,\n    isLoading,\n    fillParentContainer,\n    onAssetChooseClick,\n    onUploadClick,\n    withMenu = true,\n    onClick,\n    validFileType,\n    verticalLayout,\n}: BlockInjectButtonProps) => {\n    const [isDraggingOver, setIsDraggingOver] = useState(false);\n    const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n    const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n        event.preventDefault();\n        setIsDraggingOver(false);\n        if (!isValidAsset(event.dataTransfer.files)) {\n            setErrorMsg('Invalid');\n            setTimeout(() => {\n                setErrorMsg(undefined);\n            }, 1000);\n            return;\n        }\n        onDrop?.(event.dataTransfer.files);\n    };\n\n    const isValidAsset = (files: FileList) => {\n        if (!validFileType) {\n            return true;\n        }\n        for (let i = 0; i < files.length; i++) {\n            const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n            if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (!buttonRef.current || isLoading) {\n            return;\n        }\n        const { left, top } = buttonRef.current.getBoundingClientRect();\n        const XInsideComponent = event.clientX - left;\n        const YInsideComponent = event.clientY - top;\n        setMenuPosition([XInsideComponent, YInsideComponent]);\n    };\n\n    return (\n        <button\n            ref={buttonRef}\n            data-test-id=\"block-inject-button\"\n            className={joinClassNames([\n                'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n                verticalLayout\n                    ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n                    : '[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr',\n                fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n                isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n                menuPosition && 'tw-bg-blank-state-pressed-inverse',\n                isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n                isLoading || menuPosition || isDraggingOver || errorMsg\n                    ? ''\n                    : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n                (isDraggingOver || !!menuPosition) && !errorMsg\n                    ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n                    : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n            ])}\n            onDragEnter={\n                onDrop\n                    ? (event) => {\n                          setIsDraggingOver(true);\n                          // is now only used for images, can be adapted if needed\n                          if (validFileType === 'Images') {\n                              for (const item of Array.from(event.dataTransfer.items)) {\n                                  if (!item?.type?.startsWith('image/')) {\n                                      setErrorMsg('Invalid');\n                                  } else {\n                                      setErrorMsg(undefined);\n                                  }\n                              }\n                          }\n                      }\n                    : undefined\n            }\n            onDragLeave={\n                onDrop\n                    ? () => {\n                          setIsDraggingOver(false);\n                          setErrorMsg(undefined);\n                      }\n                    : undefined\n            }\n            onDrop={onDrop ? handleDrop : undefined}\n            onClick={(event) => {\n                withMenu && openMenu(event);\n                onClick?.();\n            }}\n        >\n            {isLoading ? (\n                <LoadingCircle />\n            ) : // eslint-disable-next-line unicorn/no-nested-ternary\n            errorMsg ? (\n                <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n                    <IconExclamationMarkTriangle />\n                    {errorMsg}\n                </div>\n            ) : (\n                <>\n                    {icon && <div>{icon}</div>}\n                    {(label || secondaryLabel) && (\n                        <div className=\"tw-flex tw-flex-col tw-items-start\">\n                            {label && <div className=\"tw-font-medium\">{label}</div>}\n                            {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n                        </div>\n                    )}\n                </>\n            )}\n            {menuPosition && (\n                <div\n                    className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n                    style={{\n                        left: menuPosition[0],\n                        top: menuPosition[1],\n                    }}\n                >\n                    <Flyout\n                        onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n                        isOpen={true}\n                        fitContent\n                        hug={false}\n                        legacyFooter={false}\n                        trigger={<div />}\n                    >\n                        <ActionMenu\n                            menuBlocks={[\n                                {\n                                    id: 'menu',\n                                    menuItems: [\n                                        ...(onUploadClick\n                                            ? [\n                                                  {\n                                                      id: 'upload',\n                                                      size: MenuItemContentSize.XSmall,\n                                                      title: 'Upload asset',\n                                                      onClick: () => {\n                                                          onUploadClick();\n                                                          setMenuPosition(undefined);\n                                                      },\n\n                                                      initialValue: true,\n                                                      decorator: (\n                                                          <div className=\"tw-mr-2\">\n                                                              <IconArrowCircleUp20 />\n                                                          </div>\n                                                      ),\n                                                  },\n                                              ]\n                                            : []),\n                                        ...(onAssetChooseClick\n                                            ? [\n                                                  {\n                                                      id: 'asset',\n                                                      size: MenuItemContentSize.XSmall,\n                                                      title: 'Browse asset',\n                                                      onClick: () => {\n                                                          onAssetChooseClick();\n                                                          setMenuPosition(undefined);\n                                                      },\n                                                      initialValue: true,\n                                                      decorator: (\n                                                          <div className=\"tw-mr-2\">\n                                                              <IconImageStack20 />\n                                                          </div>\n                                                      ),\n                                                  },\n                                              ]\n                                            : []),\n                                    ],\n                                },\n                            ]}\n                        />\n                    </Flyout>\n                </div>\n            )}\n        </button>\n    );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","left","top","XInsideComponent","YInsideComponent","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":";;;;;AAgBO,MAAMA,IAAoB,CAAC;AAAA,EAC9B,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACJ,MAA8B;AAC1B,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpD,CAACC,GAAcC,CAAe,IAAIF,EAAuC,GACzEG,IAAYC,EAA0B,IAAI,GAC1C,CAACC,GAAUC,CAAW,IAAIN,EAA6B,MAAS,GAEhEO,IAAkD,CAACC,MAAU;AAG/D,QAFAA,EAAM,eAAe,GACrBT,EAAkB,EAAK,GACnB,CAACU,EAAaD,EAAM,aAAa,KAAK,GAAG;AACzC,MAAAF,EAAY,SAAS,GACrB,WAAW,MAAM;AACb,QAAAA,EAAY,MAAS;AAAA,SACtB,GAAI;AACP;AAAA,IACJ;AACS,IAAApB,KAAA,QAAAA,EAAAsB,EAAM,aAAa;AAAA,EAAK,GAG/BC,IAAe,CAACC,MAAoB;AACtC,QAAI,CAACd;AACM,aAAA;AAEX,aAASe,IAAI,GAAGA,IAAID,EAAM,QAAQC,KAAK;AAC7B,YAAAC,IAAwBF,EAAMC,CAAC,EAAE,KAAK,MAAM,GAAG,EAAE,IAAS,KAAA;AAChE,UAAI,CAACE,EAAkBjB,CAAa,EAAE,SAASgB,CAAoB;AACxD,eAAA;AAAA,IAEf;AACO,WAAA;AAAA,EAAA,GAGLE,IAAiD,CAACN,MAAU;AAC1D,QAAA,CAACL,EAAU,WAAWb;AACtB;AAEJ,UAAM,EAAE,MAAAyB,GAAM,KAAAC,EAAA,IAAQb,EAAU,QAAQ,yBAClCc,IAAmBT,EAAM,UAAUO,GACnCG,IAAmBV,EAAM,UAAUQ;AACzB,IAAAd,EAAA,CAACe,GAAkBC,CAAgB,CAAC;AAAA,EAAA;AAIpD,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKhB;AAAA,MACL,gBAAa;AAAA,MACb,WAAWiB,EAAe;AAAA,QACtB;AAAA,QACAvB,IACM,+EACA;AAAA,QACNN,IAAsB,cAAc;AAAA,QACpCO,KAAkB,CAACR,IAAY,qBAAqB;AAAA,QACpDW,KAAgB;AAAA,QAChBH,KAAkB;AAAA,QAClBO,IAAW,6CAA6C;AAAA,QACxDf,KAAaW,KAAgBH,KAAkBO,IACzC,KACA;AAAA,SACLP,KAAoBG,MAAiB,CAACI,IACjC,kEACA;AAAA,MAAA,CACT;AAAA,MACD,aACInB,IACM,CAACsB,MAAU;;AAGP,YAFAT,EAAkB,EAAI,GAElBH,MAAkB;AAClB,qBAAWyB,KAAQ,MAAM,KAAKb,EAAM,aAAa,KAAK;AAClD,aAAKc,IAAAD,KAAA,gBAAAA,EAAM,SAAN,QAAAC,EAAY,WAAW,YAGxBhB,EAAY,MAAS,IAFrBA,EAAY,SAAS;AAAA,MAOrC,IAAA;AAAA,MAEV,aACIpB,IACM,MAAM;AACF,QAAAa,EAAkB,EAAK,GACvBO,EAAY,MAAS;AAAA,MAEzB,IAAA;AAAA,MAEV,QAAQpB,IAASqB,IAAa;AAAA,MAC9B,SAAS,CAACC,MAAU;AAChB,QAAAd,KAAYoB,EAASN,CAAK,GAChBb,KAAA,QAAAA;AAAA,MACd;AAAA,MAEC,UAAA;AAAA,QAAAL,0BACIiC,GAAc,EAAA;AAAA;AAAA,UAEnBlB,IACIc,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,4EACX,UAAA;AAAA,YAAAK,gBAAAA,EAAA,IAACC,GAA4B,EAAA;AAAA,YAC5BpB;AAAA,UAAA,EAAA,CACL,IAGKc,gBAAAA,EAAAA,KAAAO,EAAA,UAAA,EAAA,UAAA;AAAA,YAAQtC,KAAAoC,gBAAAA,EAAAA,IAAC,SAAK,UAAKpC,EAAA,CAAA;AAAA,aAClBD,KAASE,MACN8B,gBAAAA,EAAA,KAAA,OAAA,EAAI,WAAU,sCACV,UAAA;AAAA,cAAAhC,KAAUqC,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,kBAAkB,UAAMrC,GAAA;AAAA,cAChDE,KAAkBmC,gBAAAA,EAAA,IAAC,OAAI,EAAA,WAAU,kBAAkB,UAAenC,GAAA;AAAA,YAAA,GACvE;AAAA,UAAA,GAER;AAAA;AAAA,QAEHY,KACGuB,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,OAAO;AAAA,cACH,MAAMvB,EAAa,CAAC;AAAA,cACpB,KAAKA,EAAa,CAAC;AAAA,YACvB;AAAA,YAEA,UAAAuB,gBAAAA,EAAA;AAAA,cAACG;AAAA,cAAA;AAAA,gBACG,cAAc,CAACC,MAAW,CAACA,KAAU1B,EAAgB,MAAS;AAAA,gBAC9D,QAAQ;AAAA,gBACR,YAAU;AAAA,gBACV,KAAK;AAAA,gBACL,cAAc;AAAA,gBACd,+BAAU,OAAI,EAAA;AAAA,gBAEd,UAAAsB,gBAAAA,EAAA;AAAA,kBAACK;AAAA,kBAAA;AAAA,oBACG,YAAY;AAAA,sBACR;AAAA,wBACI,IAAI;AAAA,wBACJ,WAAW;AAAA,0BACP,GAAIpC,IACE;AAAA,4BACI;AAAA,8BACI,IAAI;AAAA,8BACJ,MAAMqC,EAAoB;AAAA,8BAC1B,OAAO;AAAA,8BACP,SAAS,MAAM;AACG,gCAAArC,KACdS,EAAgB,MAAS;AAAA,8BAC7B;AAAA,8BAEA,cAAc;AAAA,8BACd,WACKsB,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,WACX,UAAAA,gBAAAA,MAACO,IAAoB,CAAA,GACzB;AAAA,4BAER;AAAA,0BAAA,IAEJ,CAAC;AAAA,0BACP,GAAIvC,IACE;AAAA,4BACI;AAAA,8BACI,IAAI;AAAA,8BACJ,MAAMsC,EAAoB;AAAA,8BAC1B,OAAO;AAAA,8BACP,SAAS,MAAM;AACQ,gCAAAtC,KACnBU,EAAgB,MAAS;AAAA,8BAC7B;AAAA,8BACA,cAAc;AAAA,8BACd,WACKsB,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,WACX,UAAAA,gBAAAA,MAACQ,IAAiB,CAAA,GACtB;AAAA,4BAER;AAAA,0BAAA,IAEJ,CAAC;AAAA,wBACX;AAAA,sBACJ;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}