@frontify/guideline-blocks-settings 3.0.2 → 4.0.0-alpha.0

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

@@ -1,127 +1,115 @@
-import { jsx as e, jsxs as o, Fragment as Y } from "react/jsx-runtime";
-import { FileExtensionSets as A } from "@frontify/app-bridge";
-import { LoadingCircle as K, Flyout as I, Dropdown as f } from "@frontify/fondue/components";
-import { IconArrowCircleUp as V, IconImageStack as W, IconExclamationMarkTriangle as q } from "@frontify/fondue/icons";
-import { useState as y, useRef as G, useCallback as H, useMemo as J } from "react";
-import { joinClassNames as Q } from "../../utilities/react/joinClassNames.es.js";
-const et = ({
-  onDrop: i,
-  label: u,
-  icon: j,
-  secondaryLabel: w,
-  isLoading: c,
-  fillParentContainer: S,
-  onAssetChooseClick: m,
-  onUploadClick: g,
-  withMenu: C = !0,
-  onClick: D,
-  validFileType: p,
-  verticalLayout: E
-}) => {
-  const [d, v] = y(!1), [n, h] = y(), b = G(null), [s, l] = y(void 0), M = (t) => {
-    if (t.preventDefault(), v(!1), !O(t.dataTransfer.files)) {
-      l("Invalid"), setTimeout(() => {
-        l(void 0);
-      }, 1e3);
-      return;
-    }
-    i?.(t.dataTransfer.files);
-  }, O = (t) => {
-    if (!p)
-      return !0;
-    for (let r = 0; r < t.length; r++) {
-      const a = t[r].name.split(".").pop() ?? "";
-      if (!A[p].includes(a))
-        return !1;
-    }
-    return !0;
-  }, R = (t) => {
-    if (!b.current || c)
-      return;
-    const { clientX: r, clientY: a } = t, N = r === 0 && a === 0, { left: z, top: B, width: k, height: F } = b.current.getBoundingClientRect(), P = N ? k / 2 : r - z, X = N ? F / 2 : a - B;
-    h([P, X]);
-  }, x = H((t) => {
-    t(), h(void 0);
-  }, []), T = J(() => {
-    const t = [];
-    return g && t.push({
-      onSelect: () => x(g),
-      title: "Upload asset",
-      icon: /* @__PURE__ */ e(V, { size: "20" })
-    }), m && t.push({
-      onSelect: () => x(m),
-      title: "Browse asset",
-      icon: /* @__PURE__ */ e(W, { size: "20" })
-    }), t;
-  }, [m, g, x]);
-  return /* @__PURE__ */ o(
-    "button",
-    {
-      type: "button",
-      ref: b,
-      "data-test-id": "block-inject-button",
-      className: Q([
-        "tw-body-medium tw-relative 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",
-        E ? "[&: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",
-        S ? "tw-h-full" : "tw-h-[72px]",
-        d && !c ? "tw-border-dashed" : "tw-border-solid",
-        n && "tw-bg-surface-hover",
-        d && "tw-bg-surface",
-        s ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-line-mid",
-        c || n || d || s ? "" : "tw-text-secondary hover:tw-text-primary hover:tw-bg-surface hover:tw-border-line-strong active:tw-text-primary active:tw-bg-surface-hover active:tw-border-line-strong",
-        (d || n) && !s ? "[&>*]:tw-pointer-events-none tw-border-line-strong" : "tw-bg-surface-dim tw-text-secondary"
-      ]),
-      onDragEnter: i ? (t) => {
-        if (v(!0), p === "Images")
-          for (const r of Array.from(t.dataTransfer.items))
-            r?.type?.startsWith("image/") ? l(void 0) : l("Invalid");
-      } : void 0,
-      onDragOver: i ? (t) => {
-        t.preventDefault();
-      } : void 0,
-      onDragLeave: i ? () => {
-        v(!1), l(void 0);
-      } : void 0,
-      onDrop: i ? M : void 0,
-      onClick: (t) => {
-        C && !n && R(t), D?.();
-      },
-      children: [
-        c ? /* @__PURE__ */ e(K, {}) : s ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
-          /* @__PURE__ */ e(q, { size: "16" }),
-          s
-        ] }) : /* @__PURE__ */ o(Y, { children: [
-          j && /* @__PURE__ */ e("div", { children: j }),
-          (u || w) && /* @__PURE__ */ o("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
-            u && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: u }),
-            w && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: w })
-          ] })
-        ] }),
-        n && /* @__PURE__ */ e(
-          "div",
-          {
-            className: "tw-absolute tw-left-0 tw-top-full tw-z-20",
-            style: {
-              left: n[0],
-              top: n[1]
-            },
-            children: /* @__PURE__ */ o(I.Root, { open: !0, onOpenChange: (t) => !t && h(void 0), children: [
-              /* @__PURE__ */ e(I.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
-              /* @__PURE__ */ e(I.Content, { triggerOffset: "compact", children: /* @__PURE__ */ o(f.Root, { open: !0, children: [
-                /* @__PURE__ */ e(f.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
-                /* @__PURE__ */ e(f.Content, { triggerOffset: "compact", children: T.map((t) => /* @__PURE__ */ o(f.Item, { onSelect: t.onSelect, children: [
-                  t.icon,
-                  t.title
-                ] }, t.title)) })
-              ] }) })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+import { joinClassNames as e } from "../../utilities/react/joinClassNames.es.js";
+import { FileExtensionSets as t } from "@frontify/app-bridge";
+import { Dropdown as n, Flyout as r, LoadingCircle as i } from "@frontify/fondue/components";
+import { IconArrowCircleUp as a, IconExclamationMarkTriangle as o, IconImageStack as s } from "@frontify/fondue/icons";
+import { useCallback as c, useMemo as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/BlockInjectButton/BlockInjectButton.tsx
+var h = ({ onDrop: h, label: g, icon: _, secondaryLabel: v, isLoading: y, fillParentContainer: b, onAssetChooseClick: x, onUploadClick: S, withMenu: C = !0, onClick: w, validFileType: T, verticalLayout: E }) => {
+	let [D, O] = d(!1), [k, A] = d(), j = u(null), [M, N] = d(void 0), P = (e) => {
+		if (e.preventDefault(), O(!1), !F(e.dataTransfer.files)) {
+			N("Invalid"), setTimeout(() => {
+				N(void 0);
+			}, 1e3);
+			return;
+		}
+		h?.(e.dataTransfer.files);
+	}, F = (e) => {
+		if (!T) return !0;
+		for (let n = 0; n < e.length; n++) {
+			let r = e[n].name.split(".").pop() ?? "";
+			if (!t[T].includes(r)) return !1;
+		}
+		return !0;
+	}, I = (e) => {
+		if (!j.current || y) return;
+		let { clientX: t, clientY: n } = e, r = t === 0 && n === 0, { left: i, top: a, width: o, height: s } = j.current.getBoundingClientRect(), c = r ? o / 2 : t - i, l = r ? s / 2 : n - a;
+		A([c, l]);
+	}, L = c((e) => {
+		e(), A(void 0);
+	}, []), R = l(() => {
+		let e = [];
+		return S && e.push({
+			onSelect: () => L(S),
+			title: "Upload asset",
+			icon: /* @__PURE__ */ p(a, { size: "20" })
+		}), x && e.push({
+			onSelect: () => L(x),
+			title: "Browse asset",
+			icon: /* @__PURE__ */ p(s, { size: "20" })
+		}), e;
+	}, [
+		x,
+		S,
+		L
+	]);
+	return /* @__PURE__ */ m("button", {
+		type: "button",
+		ref: j,
+		"data-test-id": "block-inject-button",
+		className: e([
+			"tw-body-medium tw-relative 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",
+			E ? "[&: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",
+			b ? "tw-h-full" : "tw-h-[72px]",
+			D && !y ? "tw-border-dashed" : "tw-border-solid",
+			k && "tw-bg-surface-hover",
+			D && "tw-bg-surface",
+			M ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-line-mid",
+			y || k || D || M ? "" : "tw-text-secondary hover:tw-text-primary hover:tw-bg-surface hover:tw-border-line-strong active:tw-text-primary active:tw-bg-surface-hover active:tw-border-line-strong",
+			(D || k) && !M ? "[&>*]:tw-pointer-events-none tw-border-line-strong" : "tw-bg-surface-dim tw-text-secondary"
+		]),
+		onDragEnter: h ? (e) => {
+			if (O(!0), T === "Images") for (let t of Array.from(e.dataTransfer.items)) t?.type?.startsWith("image/") ? N(void 0) : N("Invalid");
+		} : void 0,
+		onDragOver: h ? (e) => {
+			e.preventDefault();
+		} : void 0,
+		onDragLeave: h ? () => {
+			O(!1), N(void 0);
+		} : void 0,
+		onDrop: h ? P : void 0,
+		onClick: (e) => {
+			C && !k && I(e), w?.();
+		},
+		children: [y ? /* @__PURE__ */ p(i, {}) : M ? /* @__PURE__ */ m("div", {
+			className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium",
+			children: [/* @__PURE__ */ p(o, { size: "16" }), M]
+		}) : /* @__PURE__ */ m(f, { children: [_ && /* @__PURE__ */ p("div", { children: _ }), (g || v) && /* @__PURE__ */ m("div", {
+			className: "tw-flex tw-flex-col tw-items-start",
+			children: [g && /* @__PURE__ */ p("div", {
+				className: "tw-font-medium",
+				children: g
+			}), v && /* @__PURE__ */ p("div", {
+				className: "tw-font-normal",
+				children: v
+			})]
+		})] }), k && /* @__PURE__ */ p("div", {
+			className: "tw-absolute tw-left-0 tw-top-full tw-z-20",
+			style: {
+				left: k[0],
+				top: k[1]
+			},
+			children: /* @__PURE__ */ m(r.Root, {
+				open: !0,
+				onOpenChange: (e) => !e && A(void 0),
+				children: [/* @__PURE__ */ p(r.Trigger, { children: /* @__PURE__ */ p("div", {}) }), /* @__PURE__ */ p(r.Content, {
+					triggerOffset: "compact",
+					children: /* @__PURE__ */ m(n.Root, {
+						open: !0,
+						children: [/* @__PURE__ */ p(n.Trigger, { children: /* @__PURE__ */ p("div", {}) }), /* @__PURE__ */ p(n.Content, {
+							triggerOffset: "compact",
+							children: R.map((e) => /* @__PURE__ */ m(n.Item, {
+								onSelect: e.onSelect,
+								children: [e.icon, e.title]
+							}, e.title))
+						})]
+					})
+				})]
+			})
+		})]
+	});
 };
-export {
-  et as BlockInjectButton
-};
-//# sourceMappingURL=BlockInjectButton.es.js.map
+//#endregion
+export { h as BlockInjectButton };
+
+//# sourceMappingURL=BlockInjectButton.es.js.map

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

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

package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js

@@ -1,74 +1,53 @@
-import { jsx as t, Fragment as d, jsxs as v } from "react/jsx-runtime";
-import { memo as y, useState as x, useRef as b } from "react";
-import { DragPreviewContextProvider as N } from "./Toolbar/context/DragPreviewContext.es.js";
-import { MultiFlyoutContextProvider as F } from "./Toolbar/context/MultiFlyoutContext.es.js";
-import { DEFAULT_MENU_BUTTON_ID as I } from "./Toolbar/MenuToolbarButton/MenuToolbarButton.es.js";
-import { Toolbar as T } from "./Toolbar/Toolbar.es.js";
-import { joinClassNames as n } from "../../utilities/react/joinClassNames.es.js";
-const j = y(
-  ({
-    children: e,
-    toolbarItems: a,
-    shouldHideWrapper: s,
-    shouldHideComponent: w = !1,
-    isDragging: c = !1,
-    shouldFillContainer: h,
-    outlineOffset: o = 0,
-    shouldBeShown: i = !1,
-    showAttachments: p = !1
-  }) => {
-    const [r, u] = x(i ? [I] : []), m = b(null);
-    if (s)
-      return /* @__PURE__ */ t(d, { children: e });
-    const f = a?.filter((g) => g !== void 0), l = r.length > 0 || i;
-    return /* @__PURE__ */ t(N, { isDragPreview: c, children: /* @__PURE__ */ t(F, { openFlyoutIds: r, setOpenFlyoutIds: u, children: /* @__PURE__ */ v(
-      "div",
-      {
-        ref: m,
-        "data-test-id": "block-item-wrapper",
-        style: {
-          outlineOffset: o
-        },
-        className: n([
-          "tw-relative tw-group",
-          h && "tw-flex-1 tw-h-full tw-w-full",
-          "hover:tw-outline hover:tw-outline-1 hover:tw-outline-container-highlight-on-highlight-container focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-container-highlight-on-highlight-container",
-          l && "tw-outline tw-outline-1 tw-outline-container-highlight-on-highlight-container",
-          w && "tw-opacity-0"
-        ]),
-        children: [
-          /* @__PURE__ */ t(
-            "div",
-            {
-              style: {
-                right: -1 - o,
-                bottom: `calc(100% - ${2 + o}px)`
-              },
-              className: n([
-                "tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]",
-                "group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
-                "tw-flex tw-justify-end",
-                l && "tw-opacity-100"
-              ]),
-              children: /* @__PURE__ */ t(
-                T,
-                {
-                  attachments: {
-                    isEnabled: p
-                  },
-                  items: f
-                }
-              )
-            }
-          ),
-          e
-        ]
-      }
-    ) }) });
-  }
-);
-j.displayName = "BlockItemWrapper";
-export {
-  j as BlockItemWrapper
-};
-//# sourceMappingURL=BlockItemWrapper.es.js.map
+import { joinClassNames as e } from "../../utilities/react/joinClassNames.es.js";
+import { DragPreviewContextProvider as t } from "./Toolbar/context/DragPreviewContext.es.js";
+import { MultiFlyoutContextProvider as n } from "./Toolbar/context/MultiFlyoutContext.es.js";
+import { DEFAULT_MENU_BUTTON_ID as r } from "./Toolbar/MenuToolbarButton/MenuToolbarButton.es.js";
+import { Toolbar as i } from "./Toolbar/Toolbar.es.js";
+import { memo as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/BlockItemWrapper/BlockItemWrapper.tsx
+var d = a(({ children: a, toolbarItems: d, shouldHideWrapper: f, shouldHideComponent: p = !1, isDragging: m = !1, shouldFillContainer: h, outlineOffset: g = 0, shouldBeShown: _ = !1, showAttachments: v = !1 }) => {
+	let [y, b] = s(_ ? [r] : []), x = o(null);
+	if (f) return /* @__PURE__ */ l(c, { children: a });
+	let S = d?.filter((e) => e !== void 0), C = y.length > 0 || _;
+	return /* @__PURE__ */ l(t, {
+		isDragPreview: m,
+		children: /* @__PURE__ */ l(n, {
+			openFlyoutIds: y,
+			setOpenFlyoutIds: b,
+			children: /* @__PURE__ */ u("div", {
+				ref: x,
+				"data-test-id": "block-item-wrapper",
+				style: { outlineOffset: g },
+				className: e([
+					"tw-relative tw-group",
+					h && "tw-flex-1 tw-h-full tw-w-full",
+					"hover:tw-outline hover:tw-outline-1 hover:tw-outline-container-highlight-on-highlight-container focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-container-highlight-on-highlight-container",
+					C && "tw-outline tw-outline-1 tw-outline-container-highlight-on-highlight-container",
+					p && "tw-opacity-0"
+				]),
+				children: [/* @__PURE__ */ l("div", {
+					style: {
+						right: -1 - g,
+						bottom: `calc(100% - ${2 + g}px)`
+					},
+					className: e([
+						"tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]",
+						"group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
+						"tw-flex tw-justify-end",
+						C && "tw-opacity-100"
+					]),
+					children: /* @__PURE__ */ l(i, {
+						attachments: { isEnabled: v },
+						items: S
+					})
+				}), a]
+			})
+		})
+	});
+});
+d.displayName = "BlockItemWrapper";
+//#endregion
+export { d as BlockItemWrapper };
+
+//# sourceMappingURL=BlockItemWrapper.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, memo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = memo(\n    ({\n        children,\n        toolbarItems,\n        shouldHideWrapper,\n        shouldHideComponent = false,\n        isDragging = false,\n        shouldFillContainer,\n        outlineOffset = 0,\n        shouldBeShown = false,\n        showAttachments = false,\n    }: BlockItemWrapperProps): ReactElement => {\n        const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\n        const wrapperRef = useRef<HTMLDivElement>(null);\n\n        if (shouldHideWrapper) {\n            return <>{children}</>;\n        }\n\n        const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n        const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;\n\n        return (\n            <DragPreviewContextProvider isDragPreview={isDragging}>\n                <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\n                    <div\n                        ref={wrapperRef}\n                        data-test-id=\"block-item-wrapper\"\n                        style={{\n                            outlineOffset,\n                        }}\n                        className={joinClassNames([\n                            'tw-relative tw-group',\n                            shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                            'hover:tw-outline hover:tw-outline-1 hover:tw-outline-container-highlight-on-highlight-container focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-container-highlight-on-highlight-container',\n                            shouldToolbarBeVisible &&\n                                'tw-outline tw-outline-1 tw-outline-container-highlight-on-highlight-container',\n                            shouldHideComponent && 'tw-opacity-0',\n                        ])}\n                    >\n                        <div\n                            style={{\n                                right: -1 - outlineOffset,\n                                bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                            }}\n                            className={joinClassNames([\n                                'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n                                'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                                'tw-flex tw-justify-end',\n                                shouldToolbarBeVisible && 'tw-opacity-100',\n                            ])}\n                        >\n                            <Toolbar\n                                attachments={{\n                                    isEnabled: showAttachments,\n                                }}\n                                items={items}\n                            />\n                        </div>\n                        {children}\n                    </div>\n                </MultiFlyoutContextProvider>\n            </DragPreviewContextProvider>\n        );\n    },\n);\n\nBlockItemWrapper.displayName = 'BlockItemWrapper';\n"],"names":["BlockItemWrapper","memo","children","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","openFlyoutIds","setOpenFlyoutIds","useState","DEFAULT_MENU_BUTTON_ID","wrapperRef","useRef","items","item","shouldToolbarBeVisible","DragPreviewContextProvider","jsx","MultiFlyoutContextProvider","jsxs","joinClassNames","Toolbar"],"mappings":";;;;;;;AAWO,MAAMA,IAAmBC;AAAA,EAC5B,CAAC;AAAA,IACG,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,YAAAC,IAAa;AAAA,IACb,qBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC,IAAkB;AAAA,EAAA,MACqB;AACvC,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,EAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,QAAIZ;AACA,oCAAU,UAAAF,GAAS;AAGvB,UAAMe,IAAQd,GAAc,OAAO,CAACe,MAA8BA,MAAS,MAAS,GAE9EC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,6BACKW,GAAA,EAA2B,eAAed,GACvC,UAAA,gBAAAe,EAACC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKR;AAAA,QACL,gBAAa;AAAA,QACb,OAAO;AAAA,UACH,eAAAP;AAAA,QAAA;AAAA,QAEJ,WAAWgB,EAAe;AAAA,UACtB;AAAA,UACAjB,KAAuB;AAAA,UACvB;AAAA,UACAY,KACI;AAAA,UACJd,KAAuB;AAAA,QAAA,CAC1B;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAgB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,OAAO;AAAA,gBACH,OAAO,KAAKb;AAAA,gBACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,cAAA;AAAA,cAE5C,WAAWgB,EAAe;AAAA,gBACtB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACAL,KAA0B;AAAA,cAAA,CAC7B;AAAA,cAED,UAAA,gBAAAE;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACG,aAAa;AAAA,oBACT,WAAWf;AAAA,kBAAA;AAAA,kBAEf,OAAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,UAEHf;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAET,EAAA,CACJ;AAAA,EAER;AACJ;AAEAF,EAAiB,cAAc;"}
+{"version":3,"file":"BlockItemWrapper.es.js","names":[],"sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, memo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = memo(\n    ({\n        children,\n        toolbarItems,\n        shouldHideWrapper,\n        shouldHideComponent = false,\n        isDragging = false,\n        shouldFillContainer,\n        outlineOffset = 0,\n        shouldBeShown = false,\n        showAttachments = false,\n    }: BlockItemWrapperProps): ReactElement => {\n        const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\n        const wrapperRef = useRef<HTMLDivElement>(null);\n\n        if (shouldHideWrapper) {\n            return <>{children}</>;\n        }\n\n        const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n        const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;\n\n        return (\n            <DragPreviewContextProvider isDragPreview={isDragging}>\n                <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\n                    <div\n                        ref={wrapperRef}\n                        data-test-id=\"block-item-wrapper\"\n                        style={{\n                            outlineOffset,\n                        }}\n                        className={joinClassNames([\n                            'tw-relative tw-group',\n                            shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                            'hover:tw-outline hover:tw-outline-1 hover:tw-outline-container-highlight-on-highlight-container focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-container-highlight-on-highlight-container',\n                            shouldToolbarBeVisible &&\n                                'tw-outline tw-outline-1 tw-outline-container-highlight-on-highlight-container',\n                            shouldHideComponent && 'tw-opacity-0',\n                        ])}\n                    >\n                        <div\n                            style={{\n                                right: -1 - outlineOffset,\n                                bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                            }}\n                            className={joinClassNames([\n                                'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n                                'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                                'tw-flex tw-justify-end',\n                                shouldToolbarBeVisible && 'tw-opacity-100',\n                            ])}\n                        >\n                            <Toolbar\n                                attachments={{\n                                    isEnabled: showAttachments,\n                                }}\n                                items={items}\n                            />\n                        </div>\n                        {children}\n                    </div>\n                </MultiFlyoutContextProvider>\n            </DragPreviewContextProvider>\n        );\n    },\n);\n\nBlockItemWrapper.displayName = 'BlockItemWrapper';\n"],"mappings":";;;;;;;;AAWA,IAAa,IAAmB,GAC3B,EACG,aACA,iBACA,sBACA,yBAAsB,IACtB,gBAAa,IACb,wBACA,mBAAgB,GAChB,mBAAgB,IAChB,qBAAkB,SACqB;CACvC,IAAM,CAAC,GAAe,KAAoB,EAAmB,IAAgB,CAAC,CAAsB,IAAI,CAAC,CAAC,GACpG,IAAa,EAAuB,IAAI;CAE9C,IAAI,GACA,OAAO,kBAAA,GAAA,EAAG,YAAW,CAAA;CAGzB,IAAM,IAAQ,GAAc,QAAQ,MAA8B,MAAS,KAAA,CAAS,GAE9E,IAAyB,EAAc,SAAS,KAAK;CAE3D,OACI,kBAAC,GAAD;EAA4B,eAAe;EACvC,UAAA,kBAAC,GAAD;GAA2C;GAAiC;GACxE,UAAA,kBAAC,OAAD;IACI,KAAK;IACL,gBAAa;IACb,OAAO,EACH,iBACJ;IACA,WAAW,EAAe;KACtB;KACA,KAAuB;KACvB;KACA,KACI;KACJ,KAAuB;IAC3B,CAAC;IAbL,UAAA,CAeI,kBAAC,OAAD;KACI,OAAO;MACH,OAAO,KAAK;MACZ,QAAQ,eAAe,IAAI,EAAc;KAC7C;KACA,WAAW,EAAe;MACtB;MACA;MACA;MACA,KAA0B;KAC9B,CAAC;KAED,UAAA,kBAAC,GAAD;MACI,aAAa,EACT,WAAW,EACf;MACO;KACV,CAAA;IACA,CAAA,GACJ,CACA;;EACmB,CAAA;CACJ,CAAA;AAEpC,CACJ;AAEA,EAAiB,cAAc"}

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

@@ -1,32 +1,27 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useDragPreviewContext as h } from "../context/DragPreviewContext.es.js";
-import { useMultiFlyoutState as A } from "../hooks/useMultiFlyoutState.es.js";
-import { AttachmentsToolbarButtonTrigger as l } from "./AttachmentsToolbarButtonTrigger.es.js";
-import { useAttachmentsContext as T } from "../../../../hooks/useAttachments.es.js";
-import { Attachments as g } from "../../../Attachments/Attachments.es.js";
-const u = "attachments", x = ({
-  flyoutId: o = u
-}) => {
-  const { appBridge: n, attachments: r, onAttachmentsAdd: t, onAttachmentDelete: a, onAttachmentReplace: e, onAttachmentsSorted: m } = T(), { isOpen: s, onOpenChange: c } = A(o), i = h();
-  return /* @__PURE__ */ p(
-    g,
-    {
-      onUpload: t,
-      onDelete: a,
-      onReplaceWithBrowse: e,
-      onReplaceWithUpload: e,
-      onSorted: m,
-      onBrowse: t,
-      items: r,
-      appBridge: n,
-      triggerComponent: l,
-      isOpen: s && !i,
-      onOpenChange: c
-    }
-  );
+import { useDragPreviewContext as e } from "../context/DragPreviewContext.es.js";
+import { useMultiFlyoutState as t } from "../hooks/useMultiFlyoutState.es.js";
+import { useAttachmentsContext as n } from "../../../../hooks/useAttachments.es.js";
+import { Attachments as r } from "../../../Attachments/Attachments.es.js";
+import { AttachmentsToolbarButtonTrigger as i } from "./AttachmentsToolbarButtonTrigger.es.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButton.tsx
+var o = "attachments", s = ({ flyoutId: s = o }) => {
+	let { appBridge: c, attachments: l, onAttachmentsAdd: u, onAttachmentDelete: d, onAttachmentReplace: f, onAttachmentsSorted: p } = n(), { isOpen: m, onOpenChange: h } = t(s), g = e();
+	return /* @__PURE__ */ a(r, {
+		onUpload: u,
+		onDelete: d,
+		onReplaceWithBrowse: f,
+		onReplaceWithUpload: f,
+		onSorted: p,
+		onBrowse: u,
+		items: l,
+		appBridge: c,
+		triggerComponent: i,
+		isOpen: m && !g,
+		onOpenChange: h
+	});
 };
-export {
-  x as AttachmentsToolbarButton,
-  u as DEFAULT_ATTACHMENTS_BUTTON_ID
-};
-//# sourceMappingURL=AttachmentsToolbarButton.es.js.map
+//#endregion
+export { s as AttachmentsToolbarButton, o as DEFAULT_ATTACHMENTS_BUTTON_ID };
+
+//# sourceMappingURL=AttachmentsToolbarButton.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useAttachmentsContext } from '../../../../hooks';\nimport { Attachments } from '../../../Attachments';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';\n\nimport { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';\n\nexport const DEFAULT_ATTACHMENTS_BUTTON_ID = 'attachments';\n\ntype AttachmentsToolbarButtonProps = { flyoutId?: string };\n\nexport const AttachmentsToolbarButton = ({\n    flyoutId = DEFAULT_ATTACHMENTS_BUTTON_ID,\n}: AttachmentsToolbarButtonProps) => {\n    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =\n        useAttachmentsContext();\n\n    const { isOpen, onOpenChange } = useMultiFlyoutState(flyoutId);\n    const isDragPreview = useDragPreviewContext();\n\n    return (\n        <Attachments\n            onUpload={onAttachmentsAdd}\n            onDelete={onAttachmentDelete}\n            onReplaceWithBrowse={onAttachmentReplace}\n            onReplaceWithUpload={onAttachmentReplace}\n            onSorted={onAttachmentsSorted}\n            onBrowse={onAttachmentsAdd}\n            items={attachments}\n            appBridge={appBridge}\n            triggerComponent={AttachmentsToolbarButtonTrigger}\n            isOpen={isOpen && !isDragPreview}\n            onOpenChange={onOpenChange}\n        />\n    );\n};\n"],"names":["DEFAULT_ATTACHMENTS_BUTTON_ID","AttachmentsToolbarButton","flyoutId","appBridge","attachments","onAttachmentsAdd","onAttachmentDelete","onAttachmentReplace","onAttachmentsSorted","useAttachmentsContext","isOpen","onOpenChange","useMultiFlyoutState","isDragPreview","useDragPreviewContext","jsx","Attachments","AttachmentsToolbarButtonTrigger"],"mappings":";;;;;;AASO,MAAMA,IAAgC,eAIhCC,IAA2B,CAAC;AAAA,EACrC,UAAAC,IAAWF;AACf,MAAqC;AACjC,QAAM,EAAE,WAAAG,GAAW,aAAAC,GAAa,kBAAAC,GAAkB,oBAAAC,GAAoB,qBAAAC,GAAqB,qBAAAC,EAAA,IACvFC,EAAA,GAEE,EAAE,QAAAC,GAAQ,cAAAC,MAAiBC,EAAoBV,CAAQ,GACvDW,IAAgBC,EAAA;AAEtB,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,UAAUX;AAAA,MACV,UAAUC;AAAA,MACV,qBAAqBC;AAAA,MACrB,qBAAqBA;AAAA,MACrB,UAAUC;AAAA,MACV,UAAUH;AAAA,MACV,OAAOD;AAAA,MACP,WAAAD;AAAA,MACA,kBAAkBc;AAAA,MAClB,QAAQP,KAAU,CAACG;AAAA,MACnB,cAAAF;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"AttachmentsToolbarButton.es.js","names":[],"sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useAttachmentsContext } from '../../../../hooks';\nimport { Attachments } from '../../../Attachments';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';\n\nimport { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';\n\nexport const DEFAULT_ATTACHMENTS_BUTTON_ID = 'attachments';\n\ntype AttachmentsToolbarButtonProps = { flyoutId?: string };\n\nexport const AttachmentsToolbarButton = ({\n    flyoutId = DEFAULT_ATTACHMENTS_BUTTON_ID,\n}: AttachmentsToolbarButtonProps) => {\n    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =\n        useAttachmentsContext();\n\n    const { isOpen, onOpenChange } = useMultiFlyoutState(flyoutId);\n    const isDragPreview = useDragPreviewContext();\n\n    return (\n        <Attachments\n            onUpload={onAttachmentsAdd}\n            onDelete={onAttachmentDelete}\n            onReplaceWithBrowse={onAttachmentReplace}\n            onReplaceWithUpload={onAttachmentReplace}\n            onSorted={onAttachmentsSorted}\n            onBrowse={onAttachmentsAdd}\n            items={attachments}\n            appBridge={appBridge}\n            triggerComponent={AttachmentsToolbarButtonTrigger}\n            isOpen={isOpen && !isDragPreview}\n            onOpenChange={onOpenChange}\n        />\n    );\n};\n"],"mappings":";;;;;;;AASA,IAAa,IAAgC,eAIhC,KAA4B,EACrC,cAAW,QACsB;CACjC,IAAM,EAAE,cAAW,gBAAa,qBAAkB,uBAAoB,wBAAqB,2BACvF,EAAsB,GAEpB,EAAE,WAAQ,oBAAiB,EAAoB,CAAQ,GACvD,IAAgB,EAAsB;CAE5C,OACI,kBAAC,GAAD;EACI,UAAU;EACV,UAAU;EACV,qBAAqB;EACrB,qBAAqB;EACrB,UAAU;EACV,UAAU;EACV,OAAO;EACI;EACX,kBAAkB;EAClB,QAAQ,KAAU,CAAC;EACL;CACjB,CAAA;AAET"}

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

@@ -1,25 +1,22 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { IconPaperclip as m, IconCaretDown as n } from "@frontify/fondue/icons";
-import { forwardRef as s } from "react";
-import { BaseToolbarButton as c } from "../BaseToolbarButton.es.js";
-const l = s(
-  ({ children: o, isFlyoutOpen: r, ...e }, a) => /* @__PURE__ */ i(
-    c,
-    {
-      forceActiveStyle: r,
-      "data-test-id": "attachments-toolbar-button-trigger",
-      ref: a,
-      ...e,
-      children: [
-        /* @__PURE__ */ t(m, { size: "16" }),
-        o,
-        /* @__PURE__ */ t(n, { size: "12" })
-      ]
-    }
-  )
-);
-l.displayName = "AttachmentsToolbarButtonTrigger";
-export {
-  l as AttachmentsToolbarButtonTrigger
-};
-//# sourceMappingURL=AttachmentsToolbarButtonTrigger.es.js.map
+import { BaseToolbarButton as e } from "../BaseToolbarButton.es.js";
+import { IconCaretDown as t, IconPaperclip as n } from "@frontify/fondue/icons";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx
+var o = r(({ children: r, isFlyoutOpen: o, ...s }, c) => /* @__PURE__ */ a(e, {
+	forceActiveStyle: o,
+	"data-test-id": "attachments-toolbar-button-trigger",
+	ref: c,
+	...s,
+	"aria-haspopup": "menu",
+	children: [
+		/* @__PURE__ */ i(n, { size: "16" }),
+		r,
+		/* @__PURE__ */ i(t, { size: "12" })
+	]
+}));
+o.displayName = "AttachmentsToolbarButtonTrigger";
+//#endregion
+export { o as AttachmentsToolbarButtonTrigger };
+
+//# sourceMappingURL=AttachmentsToolbarButtonTrigger.es.js.map