@contentstack/live-preview-utils 3.2.0-alpha.1 → 3.2.0

package/dist/modern/visualBuilder/components/Collab/Tooltip/Tooltip.cjs

@@ -35,6 +35,7 @@ __export(Tooltip_exports, {
 module.exports = __toCommonJS(Tooltip_exports);
 var import_hooks = require("preact/hooks");
 var import_collab = require("../../../collab.style.cjs");
+var import_collabUtils = require("../../../utils/collabUtils.cjs");
 var import_classnames = __toESM(require("classnames"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
 var Tooltip = (props) => {
@@ -47,44 +48,24 @@ var Tooltip = (props) => {
     ...otherProps
   } = props;
   const [isVisible, setIsVisible] = (0, import_hooks.useState)(false);
+  const [actualPosition, setActualPosition] = (0, import_hooks.useState)(position);
   const tooltipRef = (0, import_hooks.useRef)(null);
   const targetRef = (0, import_hooks.useRef)(null);
+  const prevChildrenRef = (0, import_hooks.useRef)(children);
   (0, import_hooks.useEffect)(() => {
-    const positionTooltip = () => {
-      if (!isVisible || !tooltipRef.current || !targetRef.current) return;
-      const targetRect = targetRef.current.getBoundingClientRect();
-      const tooltipRect = tooltipRef.current.getBoundingClientRect();
-      const margin = 8;
-      const positions = {
-        bottom: {
-          top: targetRect.bottom + margin,
-          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
-        },
-        top: {
-          top: targetRect.top - tooltipRect.height - margin,
-          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
-        },
-        left: {
-          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-          left: targetRect.left - tooltipRect.width - margin
-        },
-        right: {
-          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-          left: targetRect.right + margin
-        }
-      };
-      const coords = positions[position];
-      Object.assign(tooltipRef.current.style, {
-        top: `${coords.top}px`,
-        left: `${coords.left}px`
-      });
-    };
-    positionTooltip();
-    window.addEventListener("scroll", positionTooltip);
-    window.addEventListener("resize", positionTooltip);
+    if (prevChildrenRef.current !== children) {
+      setIsVisible(false);
+      prevChildrenRef.current = children;
+    }
+  }, [children]);
+  (0, import_hooks.useEffect)(() => {
+    const updateTooltip = () => (0, import_collabUtils.positionTooltip)(tooltipRef, targetRef, position, setActualPosition);
+    updateTooltip();
+    window.addEventListener("scroll", updateTooltip);
+    window.addEventListener("resize", updateTooltip);
     return () => {
-      window.removeEventListener("scroll", positionTooltip);
-      window.removeEventListener("resize", positionTooltip);
+      window.removeEventListener("scroll", updateTooltip);
+      window.removeEventListener("resize", updateTooltip);
     };
   }, [isVisible, position]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -108,10 +89,13 @@ var Tooltip = (props) => {
             ref: tooltipRef,
             className: (0, import_classnames.default)(
               "collab-tooltip",
-              (0, import_collab.collabStyles)()["collab-tooltip"]
+              `collab-tooltip--${actualPosition}`,
+              (0, import_collab.collabStyles)()["collab-tooltip"],
+              (0, import_collab.collabStyles)()[`collab-tooltip--${actualPosition}`]
             ),
             role: "tooltip",
             "aria-hidden": !isVisible,
+            "data-position": actualPosition,
             children: content
           }
         )

package/dist/modern/visualBuilder/components/Collab/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useState, useRef, useEffect } from \"preact/hooks\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\ninterface TooltipProps {\n    content: string;\n    children: React.ReactNode;\n    position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    className?: string;\n    testId?: string;\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\nconst Tooltip = (props: TooltipProps): JSX.Element => {\n    const {\n        content,\n        children,\n        position = \"bottom\",\n        className,\n        testId,\n        ...otherProps\n    } = props;\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const targetRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const positionTooltip = (): void => {\n            if (!isVisible || !tooltipRef.current || !targetRef.current) return;\n\n            const targetRect: DOMRect =\n                targetRef.current.getBoundingClientRect();\n            const tooltipRect: DOMRect =\n                tooltipRef.current.getBoundingClientRect();\n            const margin: number = 8;\n\n            const positions: Positions = {\n                bottom: {\n                    top: targetRect.bottom + margin,\n                    left:\n                        targetRect.left +\n                        (targetRect.width - tooltipRect.width) / 2,\n                },\n                top: {\n                    top: targetRect.top - tooltipRect.height - margin,\n                    left:\n                        targetRect.left +\n                        (targetRect.width - tooltipRect.width) / 2,\n                },\n                left: {\n                    top:\n                        targetRect.top +\n                        (targetRect.height - tooltipRect.height) / 2,\n                    left: targetRect.left - tooltipRect.width - margin,\n                },\n                right: {\n                    top:\n                        targetRect.top +\n                        (targetRect.height - tooltipRect.height) / 2,\n                    left: targetRect.right + margin,\n                },\n            };\n\n            const coords: PositionCoords = positions[position];\n            Object.assign(tooltipRef.current.style, {\n                top: `${coords.top}px`,\n                left: `${coords.left}px`,\n            });\n        };\n\n        positionTooltip();\n        window.addEventListener(\"scroll\", positionTooltip);\n        window.addEventListener(\"resize\", positionTooltip);\n\n        return () => {\n            window.removeEventListener(\"scroll\", positionTooltip);\n            window.removeEventListener(\"resize\", positionTooltip);\n        };\n    }, [isVisible, position]);\n\n    return (\n        <div\n            ref={targetRef}\n            className={classNames(\n                \"collab-tooltip--wrapper\",\n                collabStyles()[\"collab-tooltip--wrapper\"],\n                className\n            )}\n            onMouseEnter={() => setIsVisible(true)}\n            onMouseLeave={() => setIsVisible(false)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    className={classNames(\n                        \"collab-tooltip\",\n                        collabStyles()[\"collab-tooltip\"]\n                    )}\n                    role=\"tooltip\"\n                    aria-hidden={!isVisible}\n                >\n                    {content}\n                </div>\n            )}\n        </div>\n    );\n};\n\nTooltip.defaultProps = {\n    testId: \"collab-tooltip\",\n} as Partial<TooltipProps>;\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4C;AAC5C,oBAA6B;AAC7B,wBAAuB;AA0Ff;AApER,IAAM,UAAU,CAAC,UAAqC;AAClD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAkB,KAAK;AACzD,QAAM,iBAAa,qBAAuB,IAAI;AAC9C,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,8BAAU,MAAM;AACZ,UAAM,kBAAkB,MAAY;AAChC,UAAI,CAAC,aAAa,CAAC,WAAW,WAAW,CAAC,UAAU,QAAS;AAE7D,YAAM,aACF,UAAU,QAAQ,sBAAsB;AAC5C,YAAM,cACF,WAAW,QAAQ,sBAAsB;AAC7C,YAAM,SAAiB;AAEvB,YAAM,YAAuB;AAAA,QACzB,QAAQ;AAAA,UACJ,KAAK,WAAW,SAAS;AAAA,UACzB,MACI,WAAW,QACV,WAAW,QAAQ,YAAY,SAAS;AAAA,QACjD;AAAA,QACA,KAAK;AAAA,UACD,KAAK,WAAW,MAAM,YAAY,SAAS;AAAA,UAC3C,MACI,WAAW,QACV,WAAW,QAAQ,YAAY,SAAS;AAAA,QACjD;AAAA,QACA,MAAM;AAAA,UACF,KACI,WAAW,OACV,WAAW,SAAS,YAAY,UAAU;AAAA,UAC/C,MAAM,WAAW,OAAO,YAAY,QAAQ;AAAA,QAChD;AAAA,QACA,OAAO;AAAA,UACH,KACI,WAAW,OACV,WAAW,SAAS,YAAY,UAAU;AAAA,UAC/C,MAAM,WAAW,QAAQ;AAAA,QAC7B;AAAA,MACJ;AAEA,YAAM,SAAyB,UAAU,QAAQ;AACjD,aAAO,OAAO,WAAW,QAAQ,OAAO;AAAA,QACpC,KAAK,GAAG,OAAO,GAAG;AAAA,QAClB,MAAM,GAAG,OAAO,IAAI;AAAA,MACxB,CAAC;AAAA,IACL;AAEA,oBAAgB;AAChB,WAAO,iBAAiB,UAAU,eAAe;AACjD,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,eAAe;AACpD,aAAO,oBAAoB,UAAU,eAAe;AAAA,IACxD;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,yBAAyB;AAAA,QACxC;AAAA,MACJ;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACG;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,4BAAa,EAAE,gBAAgB;AAAA,YACnC;AAAA,YACA,MAAK;AAAA,YACL,eAAa,CAAC;AAAA,YAEb;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EAER;AAER;AAEA,QAAQ,eAAe;AAAA,EACnB,QAAQ;AACZ;AAEA,IAAO,kBAAQ;","names":["classNames"]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useState, useRef, useEffect } from \"preact/hooks\";\nimport { collabStyles } from \"../../../collab.style\";\nimport { positionTooltip } from \"../../../utils/collabUtils\";\nimport classNames from \"classnames\";\n\ninterface TooltipProps {\n    content: string;\n    children: React.ReactNode;\n    position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    className?: string;\n    testId?: string;\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\nconst Tooltip = (props: TooltipProps): JSX.Element => {\n    const {\n        content,\n        children,\n        position = \"bottom\",\n        className,\n        testId,\n        ...otherProps\n    } = props;\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n    const [actualPosition, setActualPosition] = useState<\n        \"top\" | \"bottom\" | \"left\" | \"right\"\n    >(position);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const targetRef = useRef<HTMLDivElement>(null);\n\n    const prevChildrenRef = useRef(children);\n\n    useEffect(() => {\n        if (prevChildrenRef.current !== children) {\n            setIsVisible(false);\n            prevChildrenRef.current = children;\n        }\n    }, [children]);\n\n    useEffect(() => {\n        const updateTooltip = () =>\n            positionTooltip(tooltipRef, targetRef, position, setActualPosition);\n\n        updateTooltip();\n        window.addEventListener(\"scroll\", updateTooltip);\n        window.addEventListener(\"resize\", updateTooltip);\n\n        return () => {\n            window.removeEventListener(\"scroll\", updateTooltip);\n            window.removeEventListener(\"resize\", updateTooltip);\n        };\n    }, [isVisible, position]);\n\n    return (\n        <div\n            ref={targetRef}\n            className={classNames(\n                \"collab-tooltip--wrapper\",\n                collabStyles()[\"collab-tooltip--wrapper\"],\n                className\n            )}\n            onMouseEnter={() => setIsVisible(true)}\n            onMouseLeave={() => setIsVisible(false)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    className={classNames(\n                        \"collab-tooltip\",\n                        `collab-tooltip--${actualPosition}`,\n                        collabStyles()[\"collab-tooltip\"],\n                        collabStyles()[`collab-tooltip--${actualPosition}`]\n                    )}\n                    role=\"tooltip\"\n                    aria-hidden={!isVisible}\n                    data-position={actualPosition}\n                >\n                    {content}\n                </div>\n            )}\n        </div>\n    );\n};\n\nTooltip.defaultProps = {\n    testId: \"collab-tooltip\",\n} as Partial<TooltipProps>;\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4C;AAC5C,oBAA6B;AAC7B,yBAAgC;AAChC,wBAAuB;AA8Df;AAxCR,IAAM,UAAU,CAAC,UAAqC;AAClD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAkB,KAAK;AACzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAE1C,QAAQ;AACV,QAAM,iBAAa,qBAAuB,IAAI;AAC9C,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,QAAM,sBAAkB,qBAAO,QAAQ;AAEvC,8BAAU,MAAM;AACZ,QAAI,gBAAgB,YAAY,UAAU;AACtC,mBAAa,KAAK;AAClB,sBAAgB,UAAU;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACZ,UAAM,gBAAgB,UAClB,oCAAgB,YAAY,WAAW,UAAU,iBAAiB;AAEtE,kBAAc;AACd,WAAO,iBAAiB,UAAU,aAAa;AAC/C,WAAO,iBAAiB,UAAU,aAAa;AAE/C,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,aAAa;AAClD,aAAO,oBAAoB,UAAU,aAAa;AAAA,IACtD;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,yBAAyB;AAAA,QACxC;AAAA,MACJ;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACG;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,eAAW,kBAAAA;AAAA,cACP;AAAA,cACA,mBAAmB,cAAc;AAAA,kBACjC,4BAAa,EAAE,gBAAgB;AAAA,kBAC/B,4BAAa,EAAE,mBAAmB,cAAc,EAAE;AAAA,YACtD;AAAA,YACA,MAAK;AAAA,YACL,eAAa,CAAC;AAAA,YACd,iBAAe;AAAA,YAEd;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EAER;AAER;AAEA,QAAQ,eAAe;AAAA,EACnB,QAAQ;AACZ;AAEA,IAAO,kBAAQ;","names":["classNames"]}

package/dist/modern/visualBuilder/components/Collab/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@ import "../../../../chunk-5WRI5ZAA.js";
 // src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx
 import { useState, useRef, useEffect } from "preact/hooks";
 import { collabStyles } from "../../../collab.style.js";
+import { positionTooltip } from "../../../utils/collabUtils.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "preact/jsx-runtime";
 var Tooltip = (props) => {
@@ -15,44 +16,24 @@ var Tooltip = (props) => {
     ...otherProps
   } = props;
   const [isVisible, setIsVisible] = useState(false);
+  const [actualPosition, setActualPosition] = useState(position);
   const tooltipRef = useRef(null);
   const targetRef = useRef(null);
+  const prevChildrenRef = useRef(children);
   useEffect(() => {
-    const positionTooltip = () => {
-      if (!isVisible || !tooltipRef.current || !targetRef.current) return;
-      const targetRect = targetRef.current.getBoundingClientRect();
-      const tooltipRect = tooltipRef.current.getBoundingClientRect();
-      const margin = 8;
-      const positions = {
-        bottom: {
-          top: targetRect.bottom + margin,
-          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
-        },
-        top: {
-          top: targetRect.top - tooltipRect.height - margin,
-          left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
-        },
-        left: {
-          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-          left: targetRect.left - tooltipRect.width - margin
-        },
-        right: {
-          top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-          left: targetRect.right + margin
-        }
-      };
-      const coords = positions[position];
-      Object.assign(tooltipRef.current.style, {
-        top: `${coords.top}px`,
-        left: `${coords.left}px`
-      });
-    };
-    positionTooltip();
-    window.addEventListener("scroll", positionTooltip);
-    window.addEventListener("resize", positionTooltip);
+    if (prevChildrenRef.current !== children) {
+      setIsVisible(false);
+      prevChildrenRef.current = children;
+    }
+  }, [children]);
+  useEffect(() => {
+    const updateTooltip = () => positionTooltip(tooltipRef, targetRef, position, setActualPosition);
+    updateTooltip();
+    window.addEventListener("scroll", updateTooltip);
+    window.addEventListener("resize", updateTooltip);
     return () => {
-      window.removeEventListener("scroll", positionTooltip);
-      window.removeEventListener("resize", positionTooltip);
+      window.removeEventListener("scroll", updateTooltip);
+      window.removeEventListener("resize", updateTooltip);
     };
   }, [isVisible, position]);
   return /* @__PURE__ */ jsxs(
@@ -76,10 +57,13 @@ var Tooltip = (props) => {
             ref: tooltipRef,
             className: classNames(
               "collab-tooltip",
-              collabStyles()["collab-tooltip"]
+              `collab-tooltip--${actualPosition}`,
+              collabStyles()["collab-tooltip"],
+              collabStyles()[`collab-tooltip--${actualPosition}`]
             ),
             role: "tooltip",
             "aria-hidden": !isVisible,
+            "data-position": actualPosition,
             children: content
           }
         )

package/dist/modern/visualBuilder/components/Collab/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useState, useRef, useEffect } from \"preact/hooks\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\ninterface TooltipProps {\n    content: string;\n    children: React.ReactNode;\n    position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    className?: string;\n    testId?: string;\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\nconst Tooltip = (props: TooltipProps): JSX.Element => {\n    const {\n        content,\n        children,\n        position = \"bottom\",\n        className,\n        testId,\n        ...otherProps\n    } = props;\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const targetRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const positionTooltip = (): void => {\n            if (!isVisible || !tooltipRef.current || !targetRef.current) return;\n\n            const targetRect: DOMRect =\n                targetRef.current.getBoundingClientRect();\n            const tooltipRect: DOMRect =\n                tooltipRef.current.getBoundingClientRect();\n            const margin: number = 8;\n\n            const positions: Positions = {\n                bottom: {\n                    top: targetRect.bottom + margin,\n                    left:\n                        targetRect.left +\n                        (targetRect.width - tooltipRect.width) / 2,\n                },\n                top: {\n                    top: targetRect.top - tooltipRect.height - margin,\n                    left:\n                        targetRect.left +\n                        (targetRect.width - tooltipRect.width) / 2,\n                },\n                left: {\n                    top:\n                        targetRect.top +\n                        (targetRect.height - tooltipRect.height) / 2,\n                    left: targetRect.left - tooltipRect.width - margin,\n                },\n                right: {\n                    top:\n                        targetRect.top +\n                        (targetRect.height - tooltipRect.height) / 2,\n                    left: targetRect.right + margin,\n                },\n            };\n\n            const coords: PositionCoords = positions[position];\n            Object.assign(tooltipRef.current.style, {\n                top: `${coords.top}px`,\n                left: `${coords.left}px`,\n            });\n        };\n\n        positionTooltip();\n        window.addEventListener(\"scroll\", positionTooltip);\n        window.addEventListener(\"resize\", positionTooltip);\n\n        return () => {\n            window.removeEventListener(\"scroll\", positionTooltip);\n            window.removeEventListener(\"resize\", positionTooltip);\n        };\n    }, [isVisible, position]);\n\n    return (\n        <div\n            ref={targetRef}\n            className={classNames(\n                \"collab-tooltip--wrapper\",\n                collabStyles()[\"collab-tooltip--wrapper\"],\n                className\n            )}\n            onMouseEnter={() => setIsVisible(true)}\n            onMouseLeave={() => setIsVisible(false)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    className={classNames(\n                        \"collab-tooltip\",\n                        collabStyles()[\"collab-tooltip\"]\n                    )}\n                    role=\"tooltip\"\n                    aria-hidden={!isVisible}\n                >\n                    {content}\n                </div>\n            )}\n        </div>\n    );\n};\n\nTooltip.defaultProps = {\n    testId: \"collab-tooltip\",\n} as Partial<TooltipProps>;\n\nexport default Tooltip;\n"],"mappings":";;;AAEA,SAAS,UAAU,QAAQ,iBAAiB;AAC5C,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AA0Ff,SAcQ,KAdR;AApER,IAAM,UAAU,CAAC,UAAqC;AAClD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkB,KAAK;AACzD,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,YAAY,OAAuB,IAAI;AAE7C,YAAU,MAAM;AACZ,UAAM,kBAAkB,MAAY;AAChC,UAAI,CAAC,aAAa,CAAC,WAAW,WAAW,CAAC,UAAU,QAAS;AAE7D,YAAM,aACF,UAAU,QAAQ,sBAAsB;AAC5C,YAAM,cACF,WAAW,QAAQ,sBAAsB;AAC7C,YAAM,SAAiB;AAEvB,YAAM,YAAuB;AAAA,QACzB,QAAQ;AAAA,UACJ,KAAK,WAAW,SAAS;AAAA,UACzB,MACI,WAAW,QACV,WAAW,QAAQ,YAAY,SAAS;AAAA,QACjD;AAAA,QACA,KAAK;AAAA,UACD,KAAK,WAAW,MAAM,YAAY,SAAS;AAAA,UAC3C,MACI,WAAW,QACV,WAAW,QAAQ,YAAY,SAAS;AAAA,QACjD;AAAA,QACA,MAAM;AAAA,UACF,KACI,WAAW,OACV,WAAW,SAAS,YAAY,UAAU;AAAA,UAC/C,MAAM,WAAW,OAAO,YAAY,QAAQ;AAAA,QAChD;AAAA,QACA,OAAO;AAAA,UACH,KACI,WAAW,OACV,WAAW,SAAS,YAAY,UAAU;AAAA,UAC/C,MAAM,WAAW,QAAQ;AAAA,QAC7B;AAAA,MACJ;AAEA,YAAM,SAAyB,UAAU,QAAQ;AACjD,aAAO,OAAO,WAAW,QAAQ,OAAO;AAAA,QACpC,KAAK,GAAG,OAAO,GAAG;AAAA,QAClB,MAAM,GAAG,OAAO,IAAI;AAAA,MACxB,CAAC;AAAA,IACL;AAEA,oBAAgB;AAChB,WAAO,iBAAiB,UAAU,eAAe;AACjD,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,eAAe;AACpD,aAAO,oBAAoB,UAAU,eAAe;AAAA,IACxD;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,yBAAyB;AAAA,QACxC;AAAA,MACJ;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACG;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,WAAW;AAAA,cACP;AAAA,cACA,aAAa,EAAE,gBAAgB;AAAA,YACnC;AAAA,YACA,MAAK;AAAA,YACL,eAAa,CAAC;AAAA,YAEb;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EAER;AAER;AAEA,QAAQ,eAAe;AAAA,EACnB,QAAQ;AACZ;AAEA,IAAO,kBAAQ;","names":[]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useState, useRef, useEffect } from \"preact/hooks\";\nimport { collabStyles } from \"../../../collab.style\";\nimport { positionTooltip } from \"../../../utils/collabUtils\";\nimport classNames from \"classnames\";\n\ninterface TooltipProps {\n    content: string;\n    children: React.ReactNode;\n    position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    className?: string;\n    testId?: string;\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\nconst Tooltip = (props: TooltipProps): JSX.Element => {\n    const {\n        content,\n        children,\n        position = \"bottom\",\n        className,\n        testId,\n        ...otherProps\n    } = props;\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n    const [actualPosition, setActualPosition] = useState<\n        \"top\" | \"bottom\" | \"left\" | \"right\"\n    >(position);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const targetRef = useRef<HTMLDivElement>(null);\n\n    const prevChildrenRef = useRef(children);\n\n    useEffect(() => {\n        if (prevChildrenRef.current !== children) {\n            setIsVisible(false);\n            prevChildrenRef.current = children;\n        }\n    }, [children]);\n\n    useEffect(() => {\n        const updateTooltip = () =>\n            positionTooltip(tooltipRef, targetRef, position, setActualPosition);\n\n        updateTooltip();\n        window.addEventListener(\"scroll\", updateTooltip);\n        window.addEventListener(\"resize\", updateTooltip);\n\n        return () => {\n            window.removeEventListener(\"scroll\", updateTooltip);\n            window.removeEventListener(\"resize\", updateTooltip);\n        };\n    }, [isVisible, position]);\n\n    return (\n        <div\n            ref={targetRef}\n            className={classNames(\n                \"collab-tooltip--wrapper\",\n                collabStyles()[\"collab-tooltip--wrapper\"],\n                className\n            )}\n            onMouseEnter={() => setIsVisible(true)}\n            onMouseLeave={() => setIsVisible(false)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    className={classNames(\n                        \"collab-tooltip\",\n                        `collab-tooltip--${actualPosition}`,\n                        collabStyles()[\"collab-tooltip\"],\n                        collabStyles()[`collab-tooltip--${actualPosition}`]\n                    )}\n                    role=\"tooltip\"\n                    aria-hidden={!isVisible}\n                    data-position={actualPosition}\n                >\n                    {content}\n                </div>\n            )}\n        </div>\n    );\n};\n\nTooltip.defaultProps = {\n    testId: \"collab-tooltip\",\n} as Partial<TooltipProps>;\n\nexport default Tooltip;\n"],"mappings":";;;AAEA,SAAS,UAAU,QAAQ,iBAAiB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,OAAO,gBAAgB;AA8Df,SAcQ,KAdR;AAxCR,IAAM,UAAU,CAAC,UAAqC;AAClD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkB,KAAK;AACzD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAE1C,QAAQ;AACV,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,YAAY,OAAuB,IAAI;AAE7C,QAAM,kBAAkB,OAAO,QAAQ;AAEvC,YAAU,MAAM;AACZ,QAAI,gBAAgB,YAAY,UAAU;AACtC,mBAAa,KAAK;AAClB,sBAAgB,UAAU;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACZ,UAAM,gBAAgB,MAClB,gBAAgB,YAAY,WAAW,UAAU,iBAAiB;AAEtE,kBAAc;AACd,WAAO,iBAAiB,UAAU,aAAa;AAC/C,WAAO,iBAAiB,UAAU,aAAa;AAE/C,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,aAAa;AAClD,aAAO,oBAAoB,UAAU,aAAa;AAAA,IACtD;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,yBAAyB;AAAA,QACxC;AAAA,MACJ;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACG;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,WAAW;AAAA,cACP;AAAA,cACA,mBAAmB,cAAc;AAAA,cACjC,aAAa,EAAE,gBAAgB;AAAA,cAC/B,aAAa,EAAE,mBAAmB,cAAc,EAAE;AAAA,YACtD;AAAA,YACA,MAAK;AAAA,YACL,eAAa,CAAC;AAAA,YACd,iBAAe;AAAA,YAEd;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EAER;AAER;AAEA,QAAQ,eAAe;AAAA,EACnB,QAAQ;AACZ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/modern/visualBuilder/components/FieldToolbar.cjs

@@ -52,6 +52,7 @@ var import_icons2 = require("./icons/index.cjs");
 var import_getCsDataOfElement = require("../utils/getCsDataOfElement.cjs");
 var import_variant = require("./icons/variant.cjs");
 var import_FieldRevertComponent = require("./FieldRevert/FieldRevertComponent.cjs");
+var import_loading = require("./icons/loading.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 var TOOLTIP_TOP_EDGE_BUFFER = 96;
 function handleReplaceAsset(fieldMetadata) {
@@ -84,25 +85,22 @@ function handleEdit(fieldMetadata) {
   );
 }
 function handleFormFieldFocus(eventDetails) {
-  const { editableElement, fieldMetadata, cslpData } = eventDetails;
-  import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.TOGGLE_FORM, {
-    fieldMetadata,
-    cslpData
-  }).then(() => {
-    import_visualBuilderPostMessage.default?.send(
-      import_postMessage.VisualBuilderPostMessageEvents.FOCUS_FIELD,
-      {
-        DOMEditStack: (0, import_getCsDataOfElement.getDOMEditStack)(editableElement)
-      }
-    );
-  });
+  const { editableElement } = eventDetails;
+  return import_visualBuilderPostMessage.default?.send(
+    import_postMessage.VisualBuilderPostMessageEvents.FOCUS_FIELD,
+    {
+      DOMEditStack: (0, import_getCsDataOfElement.getDOMEditStack)(editableElement),
+      toggleVisibility: true
+    }
+  );
 }
 function FieldToolbarComponent(props) {
-  const { eventDetails } = props;
+  const { eventDetails, isVariant: isVariantOrParentOfVariant } = props;
   const { fieldMetadata, editableElement: targetElement } = eventDetails;
+  const [isFormLoading, setIsFormLoading] = (0, import_compat.useState)(false);
   const parentPath = fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue || "";
+  const isVariant = !!fieldMetadata?.variant || isVariantOrParentOfVariant;
   const direction = (0, import_getChildrenDirection.default)(targetElement, parentPath);
-  const isVariant = !!fieldMetadata?.variant;
   const [fieldSchema, setFieldSchema] = (0, import_compat.useState)(
     null
   );
@@ -124,15 +122,12 @@ function FieldToolbarComponent(props) {
     }
     fieldType = (0, import_getFieldType.getFieldType)(fieldSchema);
     isModalEditable = import_constants.ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);
-    isReplaceAllowed = import_constants.ALLOWED_REPLACE_FIELDS.includes(fieldType);
     Icon = import_fields.fieldIcons[fieldType];
     isMultiple = fieldSchema.multiple || false;
     if (fieldType === import_types.FieldDataType.REFERENCE)
       isMultiple = fieldSchema.field_metadata.ref_multiple;
     isWholeMultipleField = isMultiple && (fieldMetadata.fieldPathWithIndex === fieldMetadata.instance.fieldPathWithIndex || fieldMetadata.multipleFieldMetadata?.index === -1);
-    if (import_constants.DEFAULT_MULTIPLE_FIELDS.includes(fieldType) && isWholeMultipleField) {
-      return null;
-    }
+    isReplaceAllowed = import_constants.ALLOWED_REPLACE_FIELDS.includes(fieldType) && !isWholeMultipleField;
   }
   const invertTooltipPosition = targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
   const editButton = Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -199,14 +194,26 @@ function FieldToolbarComponent(props) {
         {
           "visual-builder__tooltip--bottom": invertTooltipPosition,
           [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+        },
+        {
+          [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button--comment-loader"]]: isFormLoading,
+          "visual-builder__button--comment-loader": isFormLoading
         }
       ),
       "data-tooltip": "Form",
       "data-testid": `visual-builder-form`,
-      onClick: (e) => {
-        handleFormFieldFocus(eventDetails);
+      onClick: async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsFormLoading(true);
+        try {
+          await handleFormFieldFocus(eventDetails);
+        } finally {
+          setIsFormLoading(false);
+        }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.FormIcon, {})
+      disabled: isFormLoading,
+      children: isFormLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.LoadingIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.FormIcon, {})
     }
   );
   const toggleVariantDropdown = () => {

package/dist/modern/visualBuilder/components/FieldToolbar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n    ALLOWED_MODAL_EDITABLE_FIELD,\n    ALLOWED_REPLACE_FIELDS,\n    DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n    handleDeleteInstance,\n    handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    CaretIcon,\n    DeleteIcon,\n    MoveLeftIcon,\n    MoveRightIcon,\n    ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n    BASE_VARIANT_STATUS,\n    FieldRevertComponent,\n    getFieldVariantStatus,\n    IVariantStatus,\n    VariantRevertDropdown,\n} from \"./FieldRevert/FieldRevertComponent\";\n\nexport type FieldDetails = Pick<\n    VisualBuilderCslpEventDetails,\n    \"editableElement\" | \"fieldMetadata\"\n>;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n    eventDetails: VisualBuilderCslpEventDetails;\n    hideOverlay: () => void;\n}\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n    // TODO avoid sending whole fieldMetadata\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n        {\n            fieldMetadata,\n        }\n    );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n    const isMultipleInstance =\n        fieldMetadata.multipleFieldMetadata.index > -1 &&\n        fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n    const entryPath = isMultipleInstance\n        ? fieldMetadata.instance.fieldPathWithIndex\n        : fieldMetadata.fieldPathWithIndex;\n\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n        {\n            entry_uid: fieldMetadata.entry_uid,\n            content_type_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n            fieldPath: fieldMetadata.fieldPath,\n            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n            entryPath,\n        }\n    );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n        { fieldMetadata }\n    );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n    const { editableElement, fieldMetadata, cslpData } = eventDetails;\n    visualBuilderPostMessage\n        ?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {\n            fieldMetadata,\n            cslpData,\n        })\n        .then(() => {\n            visualBuilderPostMessage?.send(\n                VisualBuilderPostMessageEvents.FOCUS_FIELD,\n                {\n                    DOMEditStack: getDOMEditStack(editableElement),\n                }\n            );\n        });\n}\n\nfunction FieldToolbarComponent(\n    props: MultipleFieldToolbarProps\n): JSX.Element | null {\n    const { eventDetails } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const direction = getChildrenDirection(targetElement, parentPath);\n    const isVariant = !!fieldMetadata?.variant;\n    const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap | null>(\n        null\n    );\n    const [fieldVariantStatus, setFieldVariantStatus] =\n        useState<IVariantStatus>(BASE_VARIANT_STATUS);\n    const [isOpenVariantRevert, setIsOpenVariantRevert] =\n        useState<boolean>(false);\n\n    let isModalEditable = false;\n    let isReplaceAllowed = false;\n    let isMultiple = false;\n    let Icon = null;\n    let fieldType = null;\n    let isWholeMultipleField = false;\n\n    if (fieldSchema) {\n        const { isDisabled } = isFieldDisabled(fieldSchema, {\n            editableElement: targetElement,\n            fieldMetadata,\n        });\n\n        // field is disabled, no actions needed\n        if (isDisabled) {\n            return null;\n        }\n\n        fieldType = getFieldType(fieldSchema);\n        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);\n\n        Icon = fieldIcons[fieldType];\n\n        isMultiple = fieldSchema.multiple || false;\n        if (fieldType === FieldDataType.REFERENCE)\n            isMultiple = (fieldSchema as IReferenceContentTypeSchema)\n                .field_metadata.ref_multiple;\n\n        // field is multiple but an instance is not selected\n        // instead the whole field (all instances) is selected.\n        // Currently, when whole featured_blogs is selected in canvas,\n        // the fieldPathWithIndex and instance.fieldPathWithIndex are the same\n        // cannot rely on -1 index, as the non-negative index then refers to the index of\n        // the featured_blogs block in page_components\n        // It is not needed except taxanomy.\n        isWholeMultipleField =\n            isMultiple &&\n            (fieldMetadata.fieldPathWithIndex ===\n                fieldMetadata.instance.fieldPathWithIndex ||\n                fieldMetadata.multipleFieldMetadata?.index === -1);\n\n        if (\n            DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&\n            isWholeMultipleField\n        ) {\n            return null;\n        }\n    }\n\n    const invertTooltipPosition =\n        targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n    const editButton = Icon ? (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__button--edit\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Edit\"}\n            onClick={(e) => {\n                // TODO the listener for field path is attached to the common parent requiring\n                // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n                e.preventDefault();\n                e.stopPropagation();\n                handleEdit(fieldMetadata);\n            }}\n        >\n            <Icon />\n        </button>\n    ) : null;\n\n    const replaceButton = fieldType ? (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Replace\"}\n            data-testid={`visual-builder-replace-${fieldType}`}\n            onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n                if (fieldType === FieldDataType.REFERENCE) {\n                    handleReplaceReference(fieldMetadata);\n                    return;\n                } else if (fieldType === FieldDataType.FILE) {\n                    handleReplaceAsset(fieldMetadata);\n                    return;\n                }\n            }}\n        >\n            <ReplaceAssetIcon />\n        </button>\n    ) : null;\n\n    const formButton = (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Form\"}\n            data-testid={`visual-builder-form`}\n            onClick={(e) => {\n                handleFormFieldFocus(eventDetails);\n            }}\n        >\n            <FormIcon />\n        </button>\n    );\n\n    const toggleVariantDropdown = () => {\n        setIsOpenVariantRevert(!isOpenVariantRevert);\n    };\n\n    const closeVariantDropdown = () => {\n        setIsOpenVariantRevert(false);\n    };\n\n    const variantButton = (\n        <button\n            className={classNames(\n                \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                visualBuilderStyles()[\"visual-builder__variant-button\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Variant Revert\"}\n            data-testid={`visual-builder-canvas-variant-revert`}\n            onClick={toggleVariantDropdown}\n        >\n            <VariantIcon />\n            <CaretIcon open={isOpenVariantRevert} />\n        </button>\n    );\n\n    const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n    const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n    const disableMoveLeft = indexOfElement === 0; // first element\n    const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n    useEffect(() => {\n        async function fetchFieldSchema() {\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                fieldMetadata.content_type_uid,\n                fieldMetadata.fieldPath\n            );\n            if (fieldSchema) {\n                setFieldSchema(fieldSchema);\n            }\n            const variantStatus = await getFieldVariantStatus(fieldMetadata);\n            setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n        }\n        fetchFieldSchema();\n    }, [fieldMetadata]);\n\n    useEffect(() => {\n        const event = visualBuilderPostMessage?.on(\n            VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n            (args: { data: { path: string } }) => {\n                if (\n                    args.data?.path ===\n                    fieldMetadata.instance.fieldPathWithIndex\n                ) {\n                    props.hideOverlay();\n                }\n            }\n        );\n        return () => {\n            event?.unregister();\n        };\n    }, []);\n\n    const multipleFieldToolbarButtonClasses = classNames(\n        \"visual-builder__button visual-builder__button--secondary\",\n        visualBuilderStyles()[\"visual-builder__button\"],\n        visualBuilderStyles()[\"visual-builder__button--secondary\"],\n        visualBuilderStyles()[\"visual-builder__tooltip\"],\n        {\n            \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n            [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                invertTooltipPosition,\n        }\n    );\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__field-toolbar-container\",\n                visualBuilderStyles()[\"visual-builder__field-toolbar-container\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar__multiple-field-toolbar\",\n                    visualBuilderStyles()[\n                        \"visual-builder__focused-toolbar__multiple-field-toolbar\"\n                    ]\n                )}\n                data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar\"\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__button-group\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__button-group\"\n                        ]\n                    )}\n                >\n                    <>\n                        {isVariant ? (\n                            <VariantRevertDropdown\n                                fieldDataName={fieldMetadata.fieldPathWithIndex}\n                                fieldMetadata={fieldMetadata}\n                                variantStatus={fieldVariantStatus}\n                                isOpen={isOpenVariantRevert}\n                                closeDropdown={closeVariantDropdown}\n                                invertTooltipPosition={invertTooltipPosition}\n                                toggleVariantDropdown={toggleVariantDropdown}\n                            />\n                        ) : null}\n                        {isMultiple && !isWholeMultipleField ? (\n                            <>\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move up\"\n                                            : \"Move left\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"previous\"\n                                        );\n                                    }}\n                                    disabled={disableMoveLeft}\n                                >\n                                    <MoveLeftIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveLeft}\n                                    />\n                                </button>\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move down\"\n                                            : \"Move right\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"next\"\n                                        );\n                                    }}\n                                    disabled={disableMoveRight}\n                                >\n                                    <MoveRightIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveRight}\n                                    />\n                                </button>\n\n                                {isModalEditable ? editButton : null}\n                                {formButton}\n                                {isReplaceAllowed ? replaceButton : null}\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\"Delete\"}\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleDeleteInstance(fieldMetadata);\n                                    }}\n                                >\n                                    <DeleteIcon />\n                                </button>\n                            </>\n                        ) : (\n                            <>\n                                {isModalEditable ? editButton : null}\n                                {isReplaceAllowed ? replaceButton : null}\n                                {formButton}\n                                {fieldSchema ? (\n                                    <CommentIcon\n                                        fieldMetadata={fieldMetadata}\n                                        fieldSchema={fieldSchema}\n                                        invertTooltipPosition={\n                                            invertTooltipPosition\n                                        }\n                                    />\n                                ) : null}\n                            </>\n                        )}\n                    </>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":"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","names":["import_icons","visualBuilderPostMessage","getChildrenDirection","classNames","fieldSchema","CommentIcon"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n    ALLOWED_MODAL_EDITABLE_FIELD,\n    ALLOWED_REPLACE_FIELDS,\n    DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n    handleDeleteInstance,\n    handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    CaretIcon,\n    DeleteIcon,\n    MoveLeftIcon,\n    MoveRightIcon,\n    ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n    BASE_VARIANT_STATUS,\n    FieldRevertComponent,\n    getFieldVariantStatus,\n    IVariantStatus,\n    VariantRevertDropdown,\n} from \"./FieldRevert/FieldRevertComponent\";\nimport { LoadingIcon } from \"./icons/loading\";\n\nexport type FieldDetails = Pick<\n    VisualBuilderCslpEventDetails,\n    \"editableElement\" | \"fieldMetadata\"\n>;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n    eventDetails: VisualBuilderCslpEventDetails;\n    hideOverlay: () => void;\n    isVariant?: boolean;\n}\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n    // TODO avoid sending whole fieldMetadata\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n        {\n            fieldMetadata,\n        }\n    );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n    const isMultipleInstance =\n        fieldMetadata.multipleFieldMetadata.index > -1 &&\n        fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n    const entryPath = isMultipleInstance\n        ? fieldMetadata.instance.fieldPathWithIndex\n        : fieldMetadata.fieldPathWithIndex;\n\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n        {\n            entry_uid: fieldMetadata.entry_uid,\n            content_type_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n            fieldPath: fieldMetadata.fieldPath,\n            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n            entryPath,\n        }\n    );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n        { fieldMetadata }\n    );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n    const { editableElement } = eventDetails;\n    return visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.FOCUS_FIELD,\n        {\n            DOMEditStack: getDOMEditStack(editableElement),\n            toggleVisibility: true,\n        }\n    );\n}\n\nfunction FieldToolbarComponent(\n    props: MultipleFieldToolbarProps\n): JSX.Element | null {\n    const { eventDetails, isVariant: isVariantOrParentOfVariant } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n    const [isFormLoading, setIsFormLoading] = useState(false);\n\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const isVariant = !!fieldMetadata?.variant || isVariantOrParentOfVariant;\n    const direction = getChildrenDirection(targetElement, parentPath);\n    const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap | null>(\n        null\n    );\n    const [fieldVariantStatus, setFieldVariantStatus] =\n        useState<IVariantStatus>(BASE_VARIANT_STATUS);\n    const [isOpenVariantRevert, setIsOpenVariantRevert] =\n        useState<boolean>(false);\n\n    let isModalEditable = false;\n    let isReplaceAllowed = false;\n    let isMultiple = false;\n    let Icon = null;\n    let fieldType = null;\n    let isWholeMultipleField = false;\n\n    if (fieldSchema) {\n        const { isDisabled } = isFieldDisabled(fieldSchema, {\n            editableElement: targetElement,\n            fieldMetadata,\n        });\n\n        // field is disabled, no actions needed\n        if (isDisabled) {\n            return null;\n        }\n\n        fieldType = getFieldType(fieldSchema);\n        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n\n        Icon = fieldIcons[fieldType];\n\n        isMultiple = fieldSchema.multiple || false;\n        if (fieldType === FieldDataType.REFERENCE)\n            isMultiple = (fieldSchema as IReferenceContentTypeSchema)\n                .field_metadata.ref_multiple;\n\n        // field is multiple but an instance is not selected\n        // instead the whole field (all instances) is selected.\n        // Currently, when whole featured_blogs is selected in canvas,\n        // the fieldPathWithIndex and instance.fieldPathWithIndex are the same\n        // cannot rely on -1 index, as the non-negative index then refers to the index of\n        // the featured_blogs block in page_components\n        // It is not needed except taxanomy.\n        isWholeMultipleField =\n            isMultiple &&\n            (fieldMetadata.fieldPathWithIndex ===\n                fieldMetadata.instance.fieldPathWithIndex ||\n                fieldMetadata.multipleFieldMetadata?.index === -1);\n\n        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType) && !isWholeMultipleField;\n        // if (\n        //     DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&\n        //     isWholeMultipleField &&\n        //     !isVariant\n        // ) {\n        //     return null;\n        // }\n    }\n\n    const invertTooltipPosition =\n        targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n    const editButton = Icon ? (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__button--edit\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Edit\"}\n            onClick={(e) => {\n                // TODO the listener for field path is attached to the common parent requiring\n                // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n                e.preventDefault();\n                e.stopPropagation();\n                handleEdit(fieldMetadata);\n            }}\n        >\n            <Icon />\n        </button>\n    ) : null;\n\n    const replaceButton = fieldType ? (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Replace\"}\n            data-testid={`visual-builder-replace-${fieldType}`}\n            onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n                if (fieldType === FieldDataType.REFERENCE) {\n                    handleReplaceReference(fieldMetadata);\n                    return;\n                } else if (fieldType === FieldDataType.FILE) {\n                    handleReplaceAsset(fieldMetadata);\n                    return;\n                }\n            }}\n        >\n            <ReplaceAssetIcon />\n        </button>\n    ) : null;\n\n    const formButton = (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                },\n                {\n                    [visualBuilderStyles()[\"visual-builder__button--comment-loader\"]]: isFormLoading,\n                    \"visual-builder__button--comment-loader\": isFormLoading\n                }\n            )}\n            data-tooltip={\"Form\"}\n            data-testid={`visual-builder-form`}\n            onClick={async (e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                setIsFormLoading(true);\n                try {\n                    await handleFormFieldFocus(eventDetails);\n                } finally {\n                    setIsFormLoading(false);\n                }\n            }}\n            disabled={isFormLoading}\n        >\n            {isFormLoading ? <LoadingIcon /> : <FormIcon />}\n        </button>\n    );\n\n    const toggleVariantDropdown = () => {\n        setIsOpenVariantRevert(!isOpenVariantRevert);\n    };\n\n    const closeVariantDropdown = () => {\n        setIsOpenVariantRevert(false);\n    };\n\n    const variantButton = (\n        <button\n            className={classNames(\n                \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                visualBuilderStyles()[\"visual-builder__variant-button\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Variant Revert\"}\n            data-testid={`visual-builder-canvas-variant-revert`}\n            onClick={toggleVariantDropdown}\n        >\n            <VariantIcon />\n            <CaretIcon open={isOpenVariantRevert} />\n        </button>\n    );\n\n    const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n    const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n    const disableMoveLeft = indexOfElement === 0; // first element\n    const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n    useEffect(() => {\n        async function fetchFieldSchema() {\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                fieldMetadata.content_type_uid,\n                fieldMetadata.fieldPath\n            );\n            if (fieldSchema) {\n                setFieldSchema(fieldSchema);\n            }\n            const variantStatus = await getFieldVariantStatus(fieldMetadata);\n            setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n        }\n        fetchFieldSchema();\n    }, [fieldMetadata]);\n\n    useEffect(() => {\n        const event = visualBuilderPostMessage?.on(\n            VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n            (args: { data: { path: string } }) => {\n                if (\n                    args.data?.path ===\n                    fieldMetadata.instance.fieldPathWithIndex\n                ) {\n                    props.hideOverlay();\n                }\n            }\n        );\n        return () => {\n            event?.unregister();\n        };\n    }, []);\n\n    const multipleFieldToolbarButtonClasses = classNames(\n        \"visual-builder__button visual-builder__button--secondary\",\n        visualBuilderStyles()[\"visual-builder__button\"],\n        visualBuilderStyles()[\"visual-builder__button--secondary\"],\n        visualBuilderStyles()[\"visual-builder__tooltip\"],\n        {\n            \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n            [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                invertTooltipPosition,\n        }\n    );\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__field-toolbar-container\",\n                visualBuilderStyles()[\"visual-builder__field-toolbar-container\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar__multiple-field-toolbar\",\n                    visualBuilderStyles()[\n                        \"visual-builder__focused-toolbar__multiple-field-toolbar\"\n                    ]\n                )}\n                data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar\"\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__button-group\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__button-group\"\n                        ]\n                    )}\n                >\n                    <>\n                        {isVariant ? (\n                            <VariantRevertDropdown\n                                fieldDataName={fieldMetadata.fieldPathWithIndex}\n                                fieldMetadata={fieldMetadata}\n                                variantStatus={fieldVariantStatus}\n                                isOpen={isOpenVariantRevert}\n                                closeDropdown={closeVariantDropdown}\n                                invertTooltipPosition={invertTooltipPosition}\n                                toggleVariantDropdown={toggleVariantDropdown}\n                            />\n                        ) : null}\n                        {isMultiple && !isWholeMultipleField ? (\n                            <>\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move up\"\n                                            : \"Move left\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"previous\"\n                                        );\n                                    }}\n                                    disabled={disableMoveLeft}\n                                >\n                                    <MoveLeftIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveLeft}\n                                    />\n                                </button>\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move down\"\n                                            : \"Move right\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"next\"\n                                        );\n                                    }}\n                                    disabled={disableMoveRight}\n                                >\n                                    <MoveRightIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveRight}\n                                    />\n                                </button>\n\n                                {isModalEditable ? editButton : null}\n                                {formButton}\n                                {isReplaceAllowed ? replaceButton : null}\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\"Delete\"}\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleDeleteInstance(fieldMetadata);\n                                    }}\n                                >\n                                    <DeleteIcon />\n                                </button>\n                            </>\n                        ) : (\n                            <>\n                                {isModalEditable ? editButton : null}\n                                {isReplaceAllowed ? replaceButton : null}\n                                {formButton}\n                                {fieldSchema ? (\n                                    <CommentIcon\n                                        fieldMetadata={fieldMetadata}\n                                        fieldSchema={fieldSchema}\n                                        invertTooltipPosition={\n                                            invertTooltipPosition\n                                        }\n                                    />\n                                ) : null}\n                            </>\n                        )}\n                    </>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":"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","names":["import_icons","visualBuilderPostMessage","getChildrenDirection","classNames","fieldSchema","CommentIcon"]}

package/dist/modern/visualBuilder/components/FieldToolbar.d.cts

@@ -5,6 +5,7 @@ type FieldDetails = Pick<VisualBuilderCslpEventDetails, "editableElement" | "fie
 interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
     hideOverlay: () => void;
+    isVariant?: boolean;
 }
 declare function FieldToolbarComponent(props: MultipleFieldToolbarProps): JSX.Element | null;
 

package/dist/modern/visualBuilder/components/FieldToolbar.d.ts

@@ -5,6 +5,7 @@ type FieldDetails = Pick<VisualBuilderCslpEventDetails, "editableElement" | "fie
 interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
     hideOverlay: () => void;
+    isVariant?: boolean;
 }
 declare function FieldToolbarComponent(props: MultipleFieldToolbarProps): JSX.Element | null;
 

package/dist/modern/visualBuilder/components/FieldToolbar.js

@@ -4,8 +4,7 @@ import "../../chunk-5WRI5ZAA.js";
 import getChildrenDirection from "../utils/getChildrenDirection.js";
 import {
   ALLOWED_MODAL_EDITABLE_FIELD,
-  ALLOWED_REPLACE_FIELDS,
-  DEFAULT_MULTIPLE_FIELDS
+  ALLOWED_REPLACE_FIELDS
 } from "../utils/constants.js";
 import { getFieldType } from "../utils/getFieldType.js";
 import {
@@ -37,6 +36,7 @@ import {
   getFieldVariantStatus,
   VariantRevertDropdown
 } from "./FieldRevert/FieldRevertComponent.js";
+import { LoadingIcon } from "./icons/loading.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 var TOOLTIP_TOP_EDGE_BUFFER = 96;
 function handleReplaceAsset(fieldMetadata) {
@@ -69,25 +69,22 @@ function handleEdit(fieldMetadata) {
   );
 }
 function handleFormFieldFocus(eventDetails) {
-  const { editableElement, fieldMetadata, cslpData } = eventDetails;
-  visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {
-    fieldMetadata,
-    cslpData
-  }).then(() => {
-    visualBuilderPostMessage?.send(
-      VisualBuilderPostMessageEvents.FOCUS_FIELD,
-      {
-        DOMEditStack: getDOMEditStack(editableElement)
-      }
-    );
-  });
+  const { editableElement } = eventDetails;
+  return visualBuilderPostMessage?.send(
+    VisualBuilderPostMessageEvents.FOCUS_FIELD,
+    {
+      DOMEditStack: getDOMEditStack(editableElement),
+      toggleVisibility: true
+    }
+  );
 }
 function FieldToolbarComponent(props) {
-  const { eventDetails } = props;
+  const { eventDetails, isVariant: isVariantOrParentOfVariant } = props;
   const { fieldMetadata, editableElement: targetElement } = eventDetails;
+  const [isFormLoading, setIsFormLoading] = useState(false);
   const parentPath = fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue || "";
+  const isVariant = !!fieldMetadata?.variant || isVariantOrParentOfVariant;
   const direction = getChildrenDirection(targetElement, parentPath);
-  const isVariant = !!fieldMetadata?.variant;
   const [fieldSchema, setFieldSchema] = useState(
     null
   );
@@ -109,15 +106,12 @@ function FieldToolbarComponent(props) {
     }
     fieldType = getFieldType(fieldSchema);
     isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);
-    isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);
     Icon = fieldIcons[fieldType];
     isMultiple = fieldSchema.multiple || false;
     if (fieldType === FieldDataType.REFERENCE)
       isMultiple = fieldSchema.field_metadata.ref_multiple;
     isWholeMultipleField = isMultiple && (fieldMetadata.fieldPathWithIndex === fieldMetadata.instance.fieldPathWithIndex || fieldMetadata.multipleFieldMetadata?.index === -1);
-    if (DEFAULT_MULTIPLE_FIELDS.includes(fieldType) && isWholeMultipleField) {
-      return null;
-    }
+    isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType) && !isWholeMultipleField;
   }
   const invertTooltipPosition = targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
   const editButton = Icon ? /* @__PURE__ */ jsx(
@@ -184,14 +178,26 @@ function FieldToolbarComponent(props) {
         {
           "visual-builder__tooltip--bottom": invertTooltipPosition,
           [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+        },
+        {
+          [visualBuilderStyles()["visual-builder__button--comment-loader"]]: isFormLoading,
+          "visual-builder__button--comment-loader": isFormLoading
         }
       ),
       "data-tooltip": "Form",
       "data-testid": `visual-builder-form`,
-      onClick: (e) => {
-        handleFormFieldFocus(eventDetails);
+      onClick: async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsFormLoading(true);
+        try {
+          await handleFormFieldFocus(eventDetails);
+        } finally {
+          setIsFormLoading(false);
+        }
       },
-      children: /* @__PURE__ */ jsx(FormIcon, {})
+      disabled: isFormLoading,
+      children: isFormLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : /* @__PURE__ */ jsx(FormIcon, {})
     }
   );
   const toggleVariantDropdown = () => {