@frontify/guideline-blocks-settings 0.28.1 → 0.28.2

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

@@ -1,85 +1,85 @@
 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 j, IconArrowCircleUp20 as X, IconImageStack20 as A } from "@frontify/fondue";
-import { r as w } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
-import { joinClassNames as F } from "../../utilities/react/joinClassNames.es.js";
-import { FileExtensionSets as T } from "@frontify/app-bridge";
-const q = ({
+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: u,
+  label: c,
   icon: h,
-  secondaryLabel: f,
+  secondaryLabel: u,
   isLoading: l,
   fillParentContainer: k,
   onAssetChooseClick: g,
-  onUploadClick: p,
+  onUploadClick: j,
   withMenu: I = !0,
-  onClick: m,
-  validFileType: v,
+  onClick: f,
+  validFileType: m,
   verticalLayout: N
 }) => {
-  const [d, x] = w.useState(!1), [i, c] = w.useState(), b = w.useRef(null), [a, o] = w.useState(void 0), S = (e) => {
-    if (e.preventDefault(), x(!1), !E(e.dataTransfer.files)) {
-      o("Invalid"), setTimeout(() => {
-        o(void 0);
+  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 (!v)
+    if (!m)
       return !0;
     for (let r = 0; r < e.length; r++) {
       const s = e[r].name.split(".").pop() ?? "";
-      if (!T[v].includes(s))
+      if (!V[m].includes(s))
         return !1;
     }
     return !0;
-  }, M = (e) => {
-    if (!b.current || l)
+  }, S = (e) => {
+    if (!x.current || l)
       return;
-    const { left: r, top: s } = b.current.getBoundingClientRect(), B = e.clientX - r, C = e.clientY - s;
-    c([B, C]);
+    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: b,
+      ref: x,
       "data-test-id": "block-inject-button",
-      className: F([
+      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",
-        a ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
-        l || i || d || a ? "" : "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) && !a ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
+        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 (x(!0), v === "Images")
+        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/") ? o(void 0) : o("Invalid");
+            (r = s == null ? void 0 : s.type) != null && r.startsWith("image/") ? a(void 0) : a("Invalid");
       } : void 0,
       onDragLeave: n ? () => {
-        x(!1), o(void 0);
+        v(!1), a(void 0);
       } : void 0,
-      onDrop: n ? S : void 0,
+      onDrop: n ? M : void 0,
       onClick: (e) => {
-        I && M(e), m == null || m();
+        I && S(e), f == null || f();
       },
       children: [
         l ? /* @__PURE__ */ t.jsx(y, {}) : (
           // eslint-disable-next-line unicorn/no-nested-ternary
-          a ? /* @__PURE__ */ t.jsxs("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
+          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, {}),
-            a
+            o
           ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
             h && /* @__PURE__ */ t.jsx("div", { children: h }),
-            (u || f) && /* @__PURE__ */ t.jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
-              u && /* @__PURE__ */ t.jsx("div", { className: "tw-font-medium", children: u }),
-              f && /* @__PURE__ */ t.jsx("div", { className: "tw-font-normal", children: f })
+            (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 })
             ] })
           ] })
         ),
@@ -94,7 +94,7 @@ const q = ({
             children: /* @__PURE__ */ t.jsx(
               O,
               {
-                onOpenChange: (e) => !e && c(void 0),
+                onOpenChange: (e) => !e && w(void 0),
                 isOpen: !0,
                 fitContent: !0,
                 hug: !1,
@@ -107,13 +107,13 @@ const q = ({
                       {
                         id: "menu",
                         menuItems: [
-                          ...p ? [
+                          ...j ? [
                             {
                               id: "upload",
-                              size: j.XSmall,
+                              size: p.XSmall,
                               title: "Upload asset",
                               onClick: () => {
-                                p(), c(void 0);
+                                j(), w(void 0);
                               },
                               initialValue: !0,
                               decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(X, {}) })
@@ -122,10 +122,10 @@ const q = ({
                           ...g ? [
                             {
                               id: "asset",
-                              size: j.XSmall,
+                              size: p.XSmall,
                               title: "Browse asset",
                               onClick: () => {
-                                g(), c(void 0);
+                                g(), w(void 0);
                               },
                               initialValue: !0,
                               decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(A, {}) })
@@ -145,6 +145,6 @@ const q = ({
   );
 };
 export {
-  q as BlockInjectButton
+  D 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 {\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":"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"}
+{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\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":"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"}

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

@@ -1,73 +1,73 @@
 import { j as l } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { r as e } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
-import { Toolbar as j } from "./Toolbar.es.js";
+import { useState as a, useRef as j, useEffect as g } from "react";
+import { Toolbar as F } from "./Toolbar.es.js";
 import { joinClassNames as p } from "../../utilities/react/joinClassNames.es.js";
-const E = ({
-  children: a,
+const R = ({
+  children: r,
   toolbarFlyoutItems: c,
-  toolbarItems: o,
-  shouldHideWrapper: u,
-  shouldHideComponent: w = !1,
-  isDragging: n,
+  toolbarItems: e,
+  shouldHideWrapper: w,
+  shouldHideComponent: n = !1,
+  isDragging: u,
   shouldFillContainer: f,
-  outlineOffset: s = 2,
-  shouldBeShown: i = !1
+  outlineOffset: o = 2,
+  shouldBeShown: s = !1
 }) => {
-  const [t, m] = e.useState(i), [y, r] = e.useState(!1), x = e.useRef(null);
-  if (e.useEffect(() => {
-    t || r(!0);
-  }, [t]), u)
-    return a;
-  const v = o == null ? void 0 : o.filter((d) => d !== void 0);
+  const [t, m] = a(s), [y, i] = a(!1), x = j(null);
+  if (g(() => {
+    t || i(!0);
+  }, [t]), w)
+    return r;
+  const v = e == null ? void 0 : e.filter((d) => d !== void 0);
   return /* @__PURE__ */ l.jsxs(
     "div",
     {
       ref: x,
-      onFocus: () => r(!1),
-      onPointerEnter: () => r(!1),
+      onFocus: () => i(!1),
+      onPointerEnter: () => i(!1),
       "data-test-id": "block-item-wrapper",
       style: {
-        outlineOffset: s
+        outlineOffset: o
       },
       className: p([
         "tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse",
         f && "tw-flex-1 tw-h-full tw-w-full",
         "hover:tw-outline focus-within:tw-outline",
-        (t || i) && "tw-outline",
-        w && "tw-opacity-0"
+        (t || s) && "tw-outline",
+        n && "tw-opacity-0"
       ]),
       children: [
         /* @__PURE__ */ l.jsx(
           "div",
           {
             style: {
-              right: -1 - s,
-              bottom: `calc(100% - ${2 + s}px)`
+              right: -1 - o,
+              bottom: `calc(100% - ${2 + o}px)`
             },
             className: p([
               "tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-10",
               "group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
-              (t || i) && "tw-opacity-100"
+              (t || s) && "tw-opacity-100"
             ]),
             children: /* @__PURE__ */ l.jsx(
-              j,
+              F,
               {
                 isFlyoutOpen: t,
                 isFlyoutDisabled: y,
                 setIsFlyoutOpen: m,
                 flyoutItems: c,
                 items: v,
-                isDragging: n
+                isDragging: u
               }
             )
           }
         ),
-        a
+        r
       ]
     }
   );
 };
 export {
-  E as BlockItemWrapper
+  R 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 { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities';\nimport { Toolbar } from './Toolbar';\nimport { BlockItemWrapperProps, ToolbarItem } from './types';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarFlyoutItems,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging,\n    shouldFillContainer,\n    outlineOffset = 2,\n    shouldBeShown = false,\n}: PropsWithChildren<BlockItemWrapperProps>) => {\n    const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);\n    const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!isFlyoutOpen) {\n            // This prevents automatic refocusing of the trigger element\n            setIsFlyoutDisabled(true);\n        }\n    }, [isFlyoutOpen]);\n\n    if (shouldHideWrapper) {\n        return children;\n    }\n\n    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n    return (\n        <div\n            ref={wrapperRef}\n            onFocus={() => setIsFlyoutDisabled(false)}\n            onPointerEnter={() => setIsFlyoutDisabled(false)}\n            data-test-id=\"block-item-wrapper\"\n            style={{\n                outlineOffset,\n            }}\n            className={joinClassNames([\n                'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n                shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                'hover:tw-outline focus-within:tw-outline',\n                (isFlyoutOpen || shouldBeShown) && 'tw-outline',\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-10',\n                    'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                    (isFlyoutOpen || shouldBeShown) && 'tw-opacity-100',\n                ])}\n            >\n                <Toolbar\n                    isFlyoutOpen={isFlyoutOpen}\n                    isFlyoutDisabled={isFlyoutDisabled}\n                    setIsFlyoutOpen={setIsFlyoutOpen}\n                    flyoutItems={toolbarFlyoutItems}\n                    items={items}\n                    isDragging={isDragging}\n                />\n            </div>\n            {children}\n        </div>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarFlyoutItems","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","isFlyoutOpen","setIsFlyoutOpen","useState","isFlyoutDisabled","setIsFlyoutDisabled","wrapperRef","useRef","useEffect","items","item","jsxs","joinClassNames","jsx","Toolbar"],"mappings":";;;;AAOO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AACpB,MAAgD;AAC5C,QAAM,CAACC,GAAcC,CAAe,IAAIC,WAASH,CAAa,GACxD,CAACI,GAAkBC,CAAmB,IAAIF,WAAS,EAAK,GACxDG,IAAaC,SAAuB,IAAI;AAS9C,MAPAC,EAAAA,UAAU,MAAM;AACZ,IAAKP,KAEDI,EAAoB,EAAI;AAAA,EAC5B,GACD,CAACJ,CAAY,CAAC,GAEbN;AACO,WAAAH;AAGX,QAAMiB,IAAQf,KAAA,gBAAAA,EAAc,OAAO,CAACgB,MAA8BA,MAAS;AAGvE,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,SAAS,MAAMD,EAAoB,EAAK;AAAA,MACxC,gBAAgB,MAAMA,EAAoB,EAAK;AAAA,MAC/C,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAN;AAAA,MACJ;AAAA,MACA,WAAWa,EAAe;AAAA,QACtB;AAAA,QACAd,KAAuB;AAAA,QACvB;AAAA,SACCG,KAAgBD,MAAkB;AAAA,QACnCJ,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKd;AAAA,cACZ,QAAQ,eAAe,IAAIA;AAAA,YAC/B;AAAA,YACA,WAAWa,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,eACCX,KAAgBD,MAAkB;AAAA,YAAA,CACtC;AAAA,YAED,UAAAa,gBAAAA,EAAA;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,cAAAb;AAAA,gBACA,kBAAAG;AAAA,gBACA,iBAAAF;AAAA,gBACA,aAAaT;AAAA,gBACb,OAAAgB;AAAA,gBACA,YAAAZ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities';\nimport { Toolbar } from './Toolbar';\nimport { BlockItemWrapperProps, ToolbarItem } from './types';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarFlyoutItems,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging,\n    shouldFillContainer,\n    outlineOffset = 2,\n    shouldBeShown = false,\n}: PropsWithChildren<BlockItemWrapperProps>) => {\n    const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);\n    const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!isFlyoutOpen) {\n            // This prevents automatic refocusing of the trigger element\n            setIsFlyoutDisabled(true);\n        }\n    }, [isFlyoutOpen]);\n\n    if (shouldHideWrapper) {\n        return children;\n    }\n\n    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n    return (\n        <div\n            ref={wrapperRef}\n            onFocus={() => setIsFlyoutDisabled(false)}\n            onPointerEnter={() => setIsFlyoutDisabled(false)}\n            data-test-id=\"block-item-wrapper\"\n            style={{\n                outlineOffset,\n            }}\n            className={joinClassNames([\n                'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n                shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                'hover:tw-outline focus-within:tw-outline',\n                (isFlyoutOpen || shouldBeShown) && 'tw-outline',\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-10',\n                    'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                    (isFlyoutOpen || shouldBeShown) && 'tw-opacity-100',\n                ])}\n            >\n                <Toolbar\n                    isFlyoutOpen={isFlyoutOpen}\n                    isFlyoutDisabled={isFlyoutDisabled}\n                    setIsFlyoutOpen={setIsFlyoutOpen}\n                    flyoutItems={toolbarFlyoutItems}\n                    items={items}\n                    isDragging={isDragging}\n                />\n            </div>\n            {children}\n        </div>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarFlyoutItems","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","isFlyoutOpen","setIsFlyoutOpen","useState","isFlyoutDisabled","setIsFlyoutDisabled","wrapperRef","useRef","useEffect","items","item","jsxs","joinClassNames","jsx","Toolbar"],"mappings":";;;;AAOO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AACpB,MAAgD;AAC5C,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASH,CAAa,GACxD,CAACI,GAAkBC,CAAmB,IAAIF,EAAS,EAAK,GACxDG,IAAaC,EAAuB,IAAI;AAS9C,MAPAC,EAAU,MAAM;AACZ,IAAKP,KAEDI,EAAoB,EAAI;AAAA,EAC5B,GACD,CAACJ,CAAY,CAAC,GAEbN;AACO,WAAAH;AAGX,QAAMiB,IAAQf,KAAA,gBAAAA,EAAc,OAAO,CAACgB,MAA8BA,MAAS;AAGvE,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,SAAS,MAAMD,EAAoB,EAAK;AAAA,MACxC,gBAAgB,MAAMA,EAAoB,EAAK;AAAA,MAC/C,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAN;AAAA,MACJ;AAAA,MACA,WAAWa,EAAe;AAAA,QACtB;AAAA,QACAd,KAAuB;AAAA,QACvB;AAAA,SACCG,KAAgBD,MAAkB;AAAA,QACnCJ,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKd;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWa,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,eACCX,KAAgBD,MAAkB;AAAA,YAAA,CACtC;AAAA,YAED,UAAAa,gBAAAA,EAAA;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,cAAAb;AAAA,gBACA,kBAAAG;AAAA,gBACA,iBAAAF;AAAA,gBACA,aAAaT;AAAA,gBACb,OAAAgB;AAAA,gBACA,YAAAZ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.es.js","sources":["../../../src/components/BlockItemWrapper/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { ToolbarProps } from './types';\nimport { joinClassNames } from '../../utilities';\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';\n\nexport const Toolbar = ({\n    items,\n    flyoutItems,\n    isFlyoutOpen,\n    setIsFlyoutOpen,\n    isDragging,\n    isFlyoutDisabled,\n}: ToolbarProps) => {\n    return (\n        <div data-test-id=\"block-item-wrapper-toolbar\" className=\"tw-flex tw-justify-end\">\n            <div className=\"tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded\">\n                {items.map((item, i) =>\n                    'draggableProps' in item ? (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            hoverDelay={0}\n                            enterDelay={300}\n                            open={isDragging}\n                            position={TooltipPosition.Top}\n                            content={\n                                <div>\n                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}\n                                </div>\n                            }\n                            triggerElement={\n                                <button\n                                    ref={item.setActivatorNodeRef}\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    {...item.draggableProps}\n                                    className={joinClassNames([\n                                        'tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm',\n                                        isDragging\n                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'\n                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',\n                                    ])}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ) : (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            enterDelay={300}\n                            hoverDelay={0}\n                            disabled={isDragging}\n                            position={TooltipPosition.Top}\n                            content={<div>{item.tooltip ?? ''}</div>}\n                            triggerElement={\n                                <button\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    onClick={item.onClick}\n                                    className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    )\n                )}\n                {flyoutItems.length > 0 && (\n                    <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6\">\n                        <Flyout\n                            isOpen={isFlyoutOpen && !isDragging}\n                            isTriggerDisabled={isFlyoutDisabled}\n                            legacyFooter={false}\n                            fitContent\n                            hug={false}\n                            onOpenChange={setIsFlyoutOpen}\n                            trigger={\n                                <Tooltip\n                                    withArrow\n                                    hoverDelay={0}\n                                    enterDelay={300}\n                                    disabled={isDragging}\n                                    position={TooltipPosition.Top}\n                                    content={<div>Options</div>}\n                                    triggerElement={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex  tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                />\n                            }\n                        >\n                            <ActionMenu\n                                menuBlocks={flyoutItems.map((block, blockIndex) => ({\n                                    id: blockIndex.toString(),\n                                    menuItems: block.map((item, itemIndex) => ({\n                                        id: blockIndex.toString() + itemIndex.toString(),\n                                        size: MenuItemContentSize.XSmall,\n                                        title: item.title,\n                                        style: item.style,\n                                        onClick: () => {\n                                            setIsFlyoutOpen(false);\n                                            item.onClick();\n                                        },\n                                        initialValue: true,\n                                        decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                                    })),\n                                }))}\n                            />\n                        </Flyout>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutItems","isFlyoutOpen","setIsFlyoutOpen","isDragging","isFlyoutDisabled","jsx","jsxs","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","joinClassNames","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":";;;;AAcO,MAAMA,IAAU,CAAC;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACJ,MAEQC,gBAAAA,EAAA,IAAC,SAAI,gBAAa,8BAA6B,WAAU,0BACrD,UAAAC,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,yNACV,UAAA;AAAA,EAAMP,EAAA;AAAA,IAAI,CAACQ,GAAMC,MACd,oBAAoBD,IAChBF,gBAAAA,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QAEG,WAAS;AAAA,QACT,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,MAAMN;AAAA,QACN,UAAUO,EAAgB;AAAA,QAC1B,SACKL,gBAAAA,EAAAA,IAAA,OAAA,EACI,cAAaM,IAA2BJ,EAAK,WAAWK,GAC7D;AAAA,QAEJ,gBACIP,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKE,EAAK;AAAA,YACV,gBAAa;AAAA,YACZ,GAAGA,EAAK;AAAA,YACT,WAAWM,EAAe;AAAA,cACtB;AAAA,cACAV,IACM,kDACA;AAAA,YAAA,CACT;AAAA,YAEA,UAAKI,EAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,MAxBCC;AAAA,IAAA,IA4BTH,gBAAAA,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QAEG,WAAS;AAAA,QACT,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,UAAUN;AAAA,QACV,UAAUO,EAAgB;AAAA,QAC1B,SAASL,gBAAAA,EAAA,IAAC,OAAK,EAAA,UAAAE,EAAK,WAAW,IAAG;AAAA,QAClC,gBACIF,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,SAASE,EAAK;AAAA,YACd,WAAU;AAAA,YAET,UAAKA,EAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,MAdCC;AAAA,IAgBT;AAAA,EAER;AAAA,EACCR,EAAY,SAAS,KACjBK,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,6CACX,UAAAA,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACG,QAAQb,KAAgB,CAACE;AAAA,MACzB,mBAAmBC;AAAA,MACnB,cAAc;AAAA,MACd,YAAU;AAAA,MACV,KAAK;AAAA,MACL,cAAcF;AAAA,MACd,SACIG,gBAAAA,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,WAAS;AAAA,UACT,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAUN;AAAA,UACV,UAAUO,EAAgB;AAAA,UAC1B,SAAUL,gBAAAA,EAAAA,IAAA,OAAA,EAAI,UAAO,UAAA,CAAA;AAAA,UACrB,gBACIA,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,gCAACU,GAAqB,EAAA;AAAA,YAAA;AAAA,UAC1B;AAAA,QAAA;AAAA,MAER;AAAA,MAGJ,UAAAV,gBAAAA,EAAA;AAAA,QAACW;AAAA,QAAA;AAAA,UACG,YAAYhB,EAAY,IAAI,CAACiB,GAAOC,OAAgB;AAAA,YAChD,IAAIA,EAAW,SAAS;AAAA,YACxB,WAAWD,EAAM,IAAI,CAACV,GAAMY,OAAe;AAAA,cACvC,IAAID,EAAW,aAAaC,EAAU,SAAS;AAAA,cAC/C,MAAMC,EAAoB;AAAA,cAC1B,OAAOb,EAAK;AAAA,cACZ,OAAOA,EAAK;AAAA,cACZ,SAAS,MAAM;AACX,gBAAAL,EAAgB,EAAK,GACrBK,EAAK,QAAQ;AAAA,cACjB;AAAA,cACA,cAAc;AAAA,cACd,WAAYF,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,WAAW,YAAK,MAAK;AAAA,YAAA,EACjD;AAAA,UAAA,EACJ;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA,GAER;AAAA,EAER,CAAA,EACJ,CAAA;"}
+{"version":3,"file":"Toolbar.es.js","sources":["../../../src/components/BlockItemWrapper/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { ToolbarProps } from './types';\nimport { joinClassNames } from '../../utilities';\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';\n\nexport const Toolbar = ({\n    items,\n    flyoutItems,\n    isFlyoutOpen,\n    setIsFlyoutOpen,\n    isDragging,\n    isFlyoutDisabled,\n}: ToolbarProps) => {\n    return (\n        <div data-test-id=\"block-item-wrapper-toolbar\" className=\"tw-flex tw-justify-end\">\n            <div className=\"tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded\">\n                {items.map((item, i) =>\n                    'draggableProps' in item ? (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            hoverDelay={0}\n                            enterDelay={300}\n                            open={isDragging}\n                            position={TooltipPosition.Top}\n                            content={\n                                <div>\n                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}\n                                </div>\n                            }\n                            triggerElement={\n                                <button\n                                    ref={item.setActivatorNodeRef}\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    {...item.draggableProps}\n                                    className={joinClassNames([\n                                        'tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm',\n                                        isDragging\n                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'\n                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',\n                                    ])}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ) : (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            enterDelay={300}\n                            hoverDelay={0}\n                            disabled={isDragging}\n                            position={TooltipPosition.Top}\n                            content={<div>{item.tooltip ?? ''}</div>}\n                            triggerElement={\n                                <button\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    onClick={item.onClick}\n                                    className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ),\n                )}\n                {flyoutItems.length > 0 && (\n                    <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6\">\n                        <Flyout\n                            isOpen={isFlyoutOpen && !isDragging}\n                            isTriggerDisabled={isFlyoutDisabled}\n                            legacyFooter={false}\n                            fitContent\n                            hug={false}\n                            onOpenChange={setIsFlyoutOpen}\n                            trigger={\n                                <Tooltip\n                                    withArrow\n                                    hoverDelay={0}\n                                    enterDelay={300}\n                                    disabled={isDragging}\n                                    position={TooltipPosition.Top}\n                                    content={<div>Options</div>}\n                                    triggerElement={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex  tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                />\n                            }\n                        >\n                            <ActionMenu\n                                menuBlocks={flyoutItems.map((block, blockIndex) => ({\n                                    id: blockIndex.toString(),\n                                    menuItems: block.map((item, itemIndex) => ({\n                                        id: blockIndex.toString() + itemIndex.toString(),\n                                        size: MenuItemContentSize.XSmall,\n                                        title: item.title,\n                                        style: item.style,\n                                        onClick: () => {\n                                            setIsFlyoutOpen(false);\n                                            item.onClick();\n                                        },\n                                        initialValue: true,\n                                        decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                                    })),\n                                }))}\n                            />\n                        </Flyout>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutItems","isFlyoutOpen","setIsFlyoutOpen","isDragging","isFlyoutDisabled","jsx","jsxs","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","joinClassNames","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":"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"}

package/dist/components/RichTextEditor/RichTextEditor.es.js

@@ -1,42 +1,42 @@
-import { j as i } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { r as d } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
-import { RichTextEditor as h } from "@frontify/fondue";
-import { SerializedText as E } from "./SerializedText.es.js";
-import { floatingButtonSelectors as g, floatingButtonActions as v } from "./plugins/ButtonPlugin/components/FloatingButton/floatingButtonStore.es.js";
-const R = ({
-  id: f = "rte",
-  isEditing: l,
+import { j as a } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useState as h, useEffect as p } from "react";
+import { RichTextEditor as E } from "@frontify/fondue";
+import { SerializedText as g } from "./SerializedText.es.js";
+import { floatingButtonSelectors as v, floatingButtonActions as T } from "./plugins/ButtonPlugin/components/FloatingButton/floatingButtonStore.es.js";
+const S = ({
+  id: d = "rte",
+  isEditing: f,
   value: t,
-  columns: u,
-  gap: c,
-  placeholder: m,
+  columns: l,
+  gap: u,
+  placeholder: c,
   plugins: r,
   onTextChange: o,
-  showSerializedText: x
+  showSerializedText: m
 }) => {
-  const [n, s] = d.useState(!1), p = (e) => {
+  const [n, s] = h(!1), x = (e) => {
     o && e !== t && o(e), s(!1);
   };
-  return d.useEffect(() => {
-    const e = (a) => (a.preventDefault(), a.returnValue = "Unprocessed changes");
+  return p(() => {
+    const e = (i) => (i.preventDefault(), i.returnValue = "Unprocessed changes");
     return n && window.addEventListener("beforeunload", e), () => window.removeEventListener("beforeunload", e);
-  }, [n]), l ? /* @__PURE__ */ i.jsx(
-    h,
+  }, [n]), f ? /* @__PURE__ */ a.jsx(
+    E,
     {
-      id: f,
+      id: d,
       value: t,
       border: !1,
-      placeholder: m,
+      placeholder: c,
       plugins: r,
       onValueChanged: () => s(!0),
-      onTextChange: p,
+      onTextChange: x,
       hideExternalFloatingModals: (e) => {
-        g.isOpen(e) && v.reset();
+        v.isOpen(e) && T.reset();
       }
     }
-  ) : /* @__PURE__ */ i.jsx(E, { value: t, columns: u, gap: c, show: x, plugins: r });
+  ) : /* @__PURE__ */ a.jsx(g, { value: t, columns: l, gap: u, show: m, plugins: r });
 };
 export {
-  R as RichTextEditor
+  S as RichTextEditor
 };
 //# sourceMappingURL=RichTextEditor.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\n\nimport { RichTextEditor as FondueRichTextEditor } from '@frontify/fondue';\nimport { RichTextEditorProps } from './types';\nimport { SerializedText } from './SerializedText';\nimport { floatingButtonActions, floatingButtonSelectors } from './plugins/ButtonPlugin/components';\n\nexport const RichTextEditor = ({\n    id = 'rte',\n    isEditing,\n    value,\n    columns,\n    gap,\n    placeholder,\n    plugins,\n    onTextChange,\n    showSerializedText,\n}: RichTextEditorProps) => {\n    const [shouldPreventPageLeave, setShouldPreventPageLeave] = useState(false);\n\n    const saveText = (newContent: string) => {\n        if (onTextChange && newContent !== value) {\n            onTextChange(newContent);\n        }\n        setShouldPreventPageLeave(false);\n    };\n\n    useEffect(() => {\n        const unloadHandler = (event: BeforeUnloadEvent) => {\n            event.preventDefault();\n            return (event.returnValue = 'Unprocessed changes');\n        };\n\n        if (shouldPreventPageLeave) {\n            window.addEventListener('beforeunload', unloadHandler);\n        }\n\n        return () => window.removeEventListener('beforeunload', unloadHandler);\n    }, [shouldPreventPageLeave]);\n\n    if (isEditing) {\n        return (\n            <FondueRichTextEditor\n                id={id}\n                value={value}\n                border={false}\n                placeholder={placeholder}\n                plugins={plugins}\n                onValueChanged={() => setShouldPreventPageLeave(true)}\n                onTextChange={saveText}\n                hideExternalFloatingModals={(editorId: string) => {\n                    if (floatingButtonSelectors.isOpen(editorId)) {\n                        floatingButtonActions.reset();\n                    }\n                }}\n            />\n        );\n    }\n    return <SerializedText value={value} columns={columns} gap={gap} show={showSerializedText} plugins={plugins} />;\n};\n"],"names":["RichTextEditor","id","isEditing","value","columns","gap","placeholder","plugins","onTextChange","showSerializedText","shouldPreventPageLeave","setShouldPreventPageLeave","useState","saveText","newContent","useEffect","unloadHandler","event","jsx","FondueRichTextEditor","editorId","floatingButtonSelectors","floatingButtonActions","SerializedText"],"mappings":";;;;;AASO,MAAMA,IAAiB,CAAC;AAAA,EAC3B,IAAAC,IAAK;AAAA,EACL,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AACJ,MAA2B;AACvB,QAAM,CAACC,GAAwBC,CAAyB,IAAIC,WAAS,EAAK,GAEpEC,IAAW,CAACC,MAAuB;AACjC,IAAAN,KAAgBM,MAAeX,KAC/BK,EAAaM,CAAU,GAE3BH,EAA0B,EAAK;AAAA,EAAA;AAgBnC,SAbAI,EAAAA,UAAU,MAAM;AACN,UAAAC,IAAgB,CAACC,OACnBA,EAAM,eAAe,GACbA,EAAM,cAAc;AAGhC,WAAIP,KACO,OAAA,iBAAiB,gBAAgBM,CAAa,GAGlD,MAAM,OAAO,oBAAoB,gBAAgBA,CAAa;AAAA,EAAA,GACtE,CAACN,CAAsB,CAAC,GAEvBR,IAEIgB,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,IAAAlB;AAAA,MACA,OAAAE;AAAA,MACA,QAAQ;AAAA,MACR,aAAAG;AAAA,MACA,SAAAC;AAAA,MACA,gBAAgB,MAAMI,EAA0B,EAAI;AAAA,MACpD,cAAcE;AAAA,MACd,4BAA4B,CAACO,MAAqB;AAC1C,QAAAC,EAAwB,OAAOD,CAAQ,KACvCE,EAAsB,MAAM;AAAA,MAEpC;AAAA,IAAA;AAAA,EAAA,0BAIJC,GAAe,EAAA,OAAApB,GAAc,SAAAC,GAAkB,KAAAC,GAAU,MAAMI,GAAoB,SAAAF,EAAkB,CAAA;AACjH;"}
+{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\n\nimport { RichTextEditor as FondueRichTextEditor } from '@frontify/fondue';\nimport { RichTextEditorProps } from './types';\nimport { SerializedText } from './SerializedText';\nimport { floatingButtonActions, floatingButtonSelectors } from './plugins/ButtonPlugin/components';\n\nexport const RichTextEditor = ({\n    id = 'rte',\n    isEditing,\n    value,\n    columns,\n    gap,\n    placeholder,\n    plugins,\n    onTextChange,\n    showSerializedText,\n}: RichTextEditorProps) => {\n    const [shouldPreventPageLeave, setShouldPreventPageLeave] = useState(false);\n\n    const saveText = (newContent: string) => {\n        if (onTextChange && newContent !== value) {\n            onTextChange(newContent);\n        }\n        setShouldPreventPageLeave(false);\n    };\n\n    useEffect(() => {\n        const unloadHandler = (event: BeforeUnloadEvent) => {\n            event.preventDefault();\n            return (event.returnValue = 'Unprocessed changes');\n        };\n\n        if (shouldPreventPageLeave) {\n            window.addEventListener('beforeunload', unloadHandler);\n        }\n\n        return () => window.removeEventListener('beforeunload', unloadHandler);\n    }, [shouldPreventPageLeave]);\n\n    if (isEditing) {\n        return (\n            <FondueRichTextEditor\n                id={id}\n                value={value}\n                border={false}\n                placeholder={placeholder}\n                plugins={plugins}\n                onValueChanged={() => setShouldPreventPageLeave(true)}\n                onTextChange={saveText}\n                hideExternalFloatingModals={(editorId: string) => {\n                    if (floatingButtonSelectors.isOpen(editorId)) {\n                        floatingButtonActions.reset();\n                    }\n                }}\n            />\n        );\n    }\n    return <SerializedText value={value} columns={columns} gap={gap} show={showSerializedText} plugins={plugins} />;\n};\n"],"names":["RichTextEditor","id","isEditing","value","columns","gap","placeholder","plugins","onTextChange","showSerializedText","shouldPreventPageLeave","setShouldPreventPageLeave","useState","saveText","newContent","useEffect","unloadHandler","event","jsx","FondueRichTextEditor","editorId","floatingButtonSelectors","floatingButtonActions","SerializedText"],"mappings":";;;;;AASO,MAAMA,IAAiB,CAAC;AAAA,EAC3B,IAAAC,IAAK;AAAA,EACL,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AACJ,MAA2B;AACvB,QAAM,CAACC,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GAEpEC,IAAW,CAACC,MAAuB;AACjC,IAAAN,KAAgBM,MAAeX,KAC/BK,EAAaM,CAAU,GAE3BH,EAA0B,EAAK;AAAA,EAAA;AAgBnC,SAbAI,EAAU,MAAM;AACN,UAAAC,IAAgB,CAACC,OACnBA,EAAM,eAAe,GACbA,EAAM,cAAc;AAGhC,WAAIP,KACO,OAAA,iBAAiB,gBAAgBM,CAAa,GAGlD,MAAM,OAAO,oBAAoB,gBAAgBA,CAAa;AAAA,EAAA,GACtE,CAACN,CAAsB,CAAC,GAEvBR,IAEIgB,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,IAAAlB;AAAA,MACA,OAAAE;AAAA,MACA,QAAQ;AAAA,MACR,aAAAG;AAAA,MACA,SAAAC;AAAA,MACA,gBAAgB,MAAMI,EAA0B,EAAI;AAAA,MACpD,cAAcE;AAAA,MACd,4BAA4B,CAACO,MAAqB;AAC1C,QAAAC,EAAwB,OAAOD,CAAQ,KACvCE,EAAsB,MAAM;AAAA,MAEpC;AAAA,IAAA;AAAA,EAAA,0BAIJC,GAAe,EAAA,OAAApB,GAAc,SAAAC,GAAkB,KAAAC,GAAU,MAAMI,GAAoB,SAAAF,EAAkB,CAAA;AACjH;"}

package/dist/components/RichTextEditor/SerializedText.es.js

@@ -1,11 +1,11 @@
 import { j as a } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { r as m } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
-import { serializeRawToHtmlAsync as o } from "./serializer/serializeToHtml.es.js";
-const c = ({ value: e = "", gap: r, columns: s, show: n = !0, plugins: l }) => {
-  const [t, i] = m.useState(null);
-  return m.useEffect(() => {
-    (async () => i(await o(e, s, r, l)))();
-  }, [e, s, r, l]), !n || t === "<br />" ? null : t !== null ? /* @__PURE__ */ a.jsx("div", { className: "tw-w-full", "data-test-id": "rte-content-html", dangerouslySetInnerHTML: { __html: t } }) : /* @__PURE__ */ a.jsx("div", { className: "tw-rounded-sm tw-bg-base-alt tw-animate-pulse tw-h-full tw-min-h-[10px] tw-w-full" });
+import { useState as i, useEffect as o } from "react";
+import { serializeRawToHtmlAsync as u } from "./serializer/serializeToHtml.es.js";
+const c = ({ value: e = "", gap: l, columns: r, show: m = !0, plugins: s }) => {
+  const [t, n] = i(null);
+  return o(() => {
+    (async () => n(await u(e, r, l, s)))();
+  }, [e, r, l, s]), !m || t === "<br />" ? null : t !== null ? /* @__PURE__ */ a.jsx("div", { className: "tw-w-full", "data-test-id": "rte-content-html", dangerouslySetInnerHTML: { __html: t } }) : /* @__PURE__ */ a.jsx("div", { className: "tw-rounded-sm tw-bg-base-alt tw-animate-pulse tw-h-full tw-min-h-[10px] tw-w-full" });
 };
 export {
   c as SerializedText

package/dist/components/RichTextEditor/SerializedText.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SerializedText.es.js","sources":["../../../src/components/RichTextEditor/SerializedText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport { SerializedTextProps } from './types';\nimport { serializeRawToHtmlAsync } from './serializer';\n\nexport const SerializedText = ({ value = '', gap, columns, show = true, plugins }: SerializedTextProps) => {\n    const [html, setHtml] = useState<string | null>(null);\n\n    useEffect(() => {\n        (async () => {\n            setHtml(await serializeRawToHtmlAsync(value, columns, gap, plugins));\n        })();\n    }, [value, columns, gap, plugins]);\n\n    if (!show || html === '<br />') {\n        return null;\n    }\n\n    return html !== null ? (\n        <div className=\"tw-w-full\" data-test-id=\"rte-content-html\" dangerouslySetInnerHTML={{ __html: html }} />\n    ) : (\n        <div className=\"tw-rounded-sm tw-bg-base-alt tw-animate-pulse tw-h-full tw-min-h-[10px] tw-w-full\" />\n    );\n};\n"],"names":["SerializedText","value","gap","columns","show","plugins","html","setHtml","useState","useEffect","serializeRawToHtmlAsync","jsx"],"mappings":";;;AAMa,MAAAA,IAAiB,CAAC,EAAE,OAAAC,IAAQ,IAAI,KAAAC,GAAK,SAAAC,GAAS,MAAAC,IAAO,IAAM,SAAAC,QAAmC;AACvG,QAAM,CAACC,GAAMC,CAAO,IAAIC,WAAwB,IAAI;AAQhD,SANJC,EAAAA,UAAU,MAAM;AACZ,KAAC,YACGF,EAAQ,MAAMG,EAAwBT,GAAOE,GAASD,GAAKG,CAAO,CAAC;AAAA,KAExE,CAACJ,GAAOE,GAASD,GAAKG,CAAO,CAAC,GAE7B,CAACD,KAAQE,MAAS,WACX,OAGJA,MAAS,OACZK,gBAAAA,MAAC,OAAI,EAAA,WAAU,aAAY,gBAAa,oBAAmB,yBAAyB,EAAE,QAAQL,EAAK,EAAA,CAAG,IAErGK,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,oFAAoF,CAAA;AAE3G;"}
+{"version":3,"file":"SerializedText.es.js","sources":["../../../src/components/RichTextEditor/SerializedText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport { SerializedTextProps } from './types';\nimport { serializeRawToHtmlAsync } from './serializer';\n\nexport const SerializedText = ({ value = '', gap, columns, show = true, plugins }: SerializedTextProps) => {\n    const [html, setHtml] = useState<string | null>(null);\n\n    useEffect(() => {\n        (async () => {\n            setHtml(await serializeRawToHtmlAsync(value, columns, gap, plugins));\n        })();\n    }, [value, columns, gap, plugins]);\n\n    if (!show || html === '<br />') {\n        return null;\n    }\n\n    return html !== null ? (\n        <div className=\"tw-w-full\" data-test-id=\"rte-content-html\" dangerouslySetInnerHTML={{ __html: html }} />\n    ) : (\n        <div className=\"tw-rounded-sm tw-bg-base-alt tw-animate-pulse tw-h-full tw-min-h-[10px] tw-w-full\" />\n    );\n};\n"],"names":["SerializedText","value","gap","columns","show","plugins","html","setHtml","useState","useEffect","serializeRawToHtmlAsync","jsx"],"mappings":";;;AAMa,MAAAA,IAAiB,CAAC,EAAE,OAAAC,IAAQ,IAAI,KAAAC,GAAK,SAAAC,GAAS,MAAAC,IAAO,IAAM,SAAAC,QAAmC;AACvG,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAwB,IAAI;AAQhD,SANJC,EAAU,MAAM;AACZ,KAAC,YACGF,EAAQ,MAAMG,EAAwBT,GAAOE,GAASD,GAAKG,CAAO,CAAC;AAAA,KAExE,CAACJ,GAAOE,GAASD,GAAKG,CAAO,CAAC,GAE7B,CAACD,KAAQE,MAAS,WACX,OAGJA,MAAS,OACZK,gBAAAA,MAAC,OAAI,EAAA,WAAU,aAAY,gBAAa,oBAAmB,yBAAyB,EAAE,QAAQL,EAAK,EAAA,CAAG,IAErGK,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,oFAAoF,CAAA;AAE3G;"}

package/dist/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultPluginsWithLinkChooser.es.js","sources":["../../../../src/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport {\n    AlignCenterPlugin,\n    AlignJustifyPlugin,\n    AlignLeftPlugin,\n    AlignRightPlugin,\n    BoldPlugin,\n    CheckboxListPlugin,\n    CodePlugin,\n    ItalicPlugin,\n    OrderedListPlugin,\n    PluginComposer,\n    ResetFormattingPlugin,\n    SoftBreakPlugin,\n    StrikethroughPlugin,\n    TextStylePlugin,\n    UnderlinePlugin,\n    UnorderedListPlugin,\n} from '@frontify/fondue';\nimport { ButtonPlugin, LinkPlugin, TextStylePluginsWithoutImage, TextStylesWithoutImage } from '../plugins';\n\nexport const getDefaultPluginsWithLinkChooser = (appBridge: AppBridgeBlock) => {\n    return new PluginComposer()\n        .setPlugin(\n            new SoftBreakPlugin(),\n            new TextStylePlugin({\n                textStyles: TextStylePluginsWithoutImage,\n            })\n        )\n        .setPlugin(\n            [\n                new BoldPlugin(),\n                new ItalicPlugin(),\n                new UnderlinePlugin(),\n                new StrikethroughPlugin(),\n                new LinkPlugin({ appBridge }),\n                new ButtonPlugin({ appBridge }),\n                new CodePlugin(),\n            ],\n            [\n                new AlignLeftPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignCenterPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignRightPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignJustifyPlugin({ validTypes: TextStylesWithoutImage }),\n                new UnorderedListPlugin(),\n                new CheckboxListPlugin(),\n                new OrderedListPlugin(),\n                new ResetFormattingPlugin(),\n            ]\n        );\n};\n"],"names":["getDefaultPluginsWithLinkChooser","appBridge","PluginComposer","SoftBreakPlugin","TextStylePlugin","TextStylePluginsWithoutImage","BoldPlugin","ItalicPlugin","UnderlinePlugin","StrikethroughPlugin","LinkPlugin","ButtonPlugin","CodePlugin","AlignLeftPlugin","TextStylesWithoutImage","AlignCenterPlugin","AlignRightPlugin","AlignJustifyPlugin","UnorderedListPlugin","CheckboxListPlugin","OrderedListPlugin","ResetFormattingPlugin"],"mappings":";;;;AAuBa,MAAAA,IAAmC,CAACC,MACtC,IAAIC,IACN;AAAA,EACG,IAAIC,EAAgB;AAAA,EACpB,IAAIC,EAAgB;AAAA,IAChB,YAAYC;AAAA,EAAA,CACf;AAAA,EAEJ;AAAA,EACG;AAAA,IACI,IAAIC,EAAW;AAAA,IACf,IAAIC,EAAa;AAAA,IACjB,IAAIC,EAAgB;AAAA,IACpB,IAAIC,EAAoB;AAAA,IACxB,IAAIC,EAAW,EAAE,WAAAT,GAAW;AAAA,IAC5B,IAAIU,EAAa,EAAE,WAAAV,GAAW;AAAA,IAC9B,IAAIW,EAAW;AAAA,EACnB;AAAA,EACA;AAAA,IACI,IAAIC,EAAgB,EAAE,YAAYC,GAAwB;AAAA,IAC1D,IAAIC,EAAkB,EAAE,YAAYD,GAAwB;AAAA,IAC5D,IAAIE,EAAiB,EAAE,YAAYF,GAAwB;AAAA,IAC3D,IAAIG,EAAmB,EAAE,YAAYH,GAAwB;AAAA,IAC7D,IAAII,EAAoB;AAAA,IACxB,IAAIC,EAAmB;AAAA,IACvB,IAAIC,EAAkB;AAAA,IACtB,IAAIC,EAAsB;AAAA,EAC9B;AAAA;"}
+{"version":3,"file":"defaultPluginsWithLinkChooser.es.js","sources":["../../../../src/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport {\n    AlignCenterPlugin,\n    AlignJustifyPlugin,\n    AlignLeftPlugin,\n    AlignRightPlugin,\n    BoldPlugin,\n    CheckboxListPlugin,\n    CodePlugin,\n    ItalicPlugin,\n    OrderedListPlugin,\n    PluginComposer,\n    ResetFormattingPlugin,\n    SoftBreakPlugin,\n    StrikethroughPlugin,\n    TextStylePlugin,\n    UnderlinePlugin,\n    UnorderedListPlugin,\n} from '@frontify/fondue';\nimport { ButtonPlugin, LinkPlugin, TextStylePluginsWithoutImage, TextStylesWithoutImage } from '../plugins';\n\nexport const getDefaultPluginsWithLinkChooser = (appBridge: AppBridgeBlock) => {\n    return new PluginComposer()\n        .setPlugin(\n            new SoftBreakPlugin(),\n            new TextStylePlugin({\n                textStyles: TextStylePluginsWithoutImage,\n            }),\n        )\n        .setPlugin(\n            [\n                new BoldPlugin(),\n                new ItalicPlugin(),\n                new UnderlinePlugin(),\n                new StrikethroughPlugin(),\n                new LinkPlugin({ appBridge }),\n                new ButtonPlugin({ appBridge }),\n                new CodePlugin(),\n            ],\n            [\n                new AlignLeftPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignCenterPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignRightPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignJustifyPlugin({ validTypes: TextStylesWithoutImage }),\n                new UnorderedListPlugin(),\n                new CheckboxListPlugin(),\n                new OrderedListPlugin(),\n                new ResetFormattingPlugin(),\n            ],\n        );\n};\n"],"names":["getDefaultPluginsWithLinkChooser","appBridge","PluginComposer","SoftBreakPlugin","TextStylePlugin","TextStylePluginsWithoutImage","BoldPlugin","ItalicPlugin","UnderlinePlugin","StrikethroughPlugin","LinkPlugin","ButtonPlugin","CodePlugin","AlignLeftPlugin","TextStylesWithoutImage","AlignCenterPlugin","AlignRightPlugin","AlignJustifyPlugin","UnorderedListPlugin","CheckboxListPlugin","OrderedListPlugin","ResetFormattingPlugin"],"mappings":";;;;AAuBa,MAAAA,IAAmC,CAACC,MACtC,IAAIC,IACN;AAAA,EACG,IAAIC,EAAgB;AAAA,EACpB,IAAIC,EAAgB;AAAA,IAChB,YAAYC;AAAA,EAAA,CACf;AAAA,EAEJ;AAAA,EACG;AAAA,IACI,IAAIC,EAAW;AAAA,IACf,IAAIC,EAAa;AAAA,IACjB,IAAIC,EAAgB;AAAA,IACpB,IAAIC,EAAoB;AAAA,IACxB,IAAIC,EAAW,EAAE,WAAAT,GAAW;AAAA,IAC5B,IAAIU,EAAa,EAAE,WAAAV,GAAW;AAAA,IAC9B,IAAIW,EAAW;AAAA,EACnB;AAAA,EACA;AAAA,IACI,IAAIC,EAAgB,EAAE,YAAYC,GAAwB;AAAA,IAC1D,IAAIC,EAAkB,EAAE,YAAYD,GAAwB;AAAA,IAC5D,IAAIE,EAAiB,EAAE,YAAYF,GAAwB;AAAA,IAC3D,IAAIG,EAAmB,EAAE,YAAYH,GAAwB;AAAA,IAC7D,IAAII,EAAoB;AAAA,IACxB,IAAIC,EAAmB;AAAA,IACvB,IAAIC,EAAkB;AAAA,IACtB,IAAIC,EAAsB;AAAA,EAC9B;AAAA;"}

package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js

@@ -1,8 +1,8 @@
 import { j as a } from "../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
 import { useElementProps as p } from "@udecode/plate";
-import { r as l } from "../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
-import { BlockButtonStyles as c } from "../utils/styles.es.js";
-const i = (e) => ({
+import { useState as l } from "react";
+import { BlockButtonStyles as i } from "../utils/styles.es.js";
+const c = (e) => ({
   ...p({
     ...e,
     elementToAttributes: (t) => ({
@@ -16,15 +16,15 @@ const i = (e) => ({
     t.stopPropagation();
   }
 }), x = (e) => {
-  const { href: o, target: t, buttonStyle: r } = i(e), { attributes: s, children: n } = e;
+  const { href: o, target: t, buttonStyle: r } = c(e), { attributes: n, children: s } = e;
   return /* @__PURE__ */ a.jsx(
     m,
     {
-      attributes: s,
+      attributes: n,
       href: o,
       target: t,
-      styles: c[`button${r.charAt(0).toUpperCase() + r.slice(1)}`],
-      children: n
+      styles: i[`button${r.charAt(0).toUpperCase() + r.slice(1)}`],
+      children: s
     }
   );
 }, m = ({
@@ -32,9 +32,9 @@ const i = (e) => ({
   styles: o = { hover: {} },
   children: t,
   href: r = "#",
-  target: s
+  target: n
 }) => {
-  const [n, u] = l.useState(!1);
+  const [s, u] = l(!1);
   return /* @__PURE__ */ a.jsx(
     "a",
     {
@@ -42,8 +42,8 @@ const i = (e) => ({
       onMouseEnter: () => u(!0),
       onMouseLeave: () => u(!1),
       href: r,
-      target: s,
-      style: n ? { ...o, ...o.hover } : o,
+      target: n,
+      style: s ? { ...o, ...o.hover } : o,
       children: t
     }
   );