@contentstack/live-preview-utils 3.2.4 → 3.3.0

package/dist/legacy/visualBuilder/components/Tooltip.js

@@ -0,0 +1,140 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Tooltip.tsx
+import { cloneElement } from "preact";
+import { useState, useEffect, useRef } from "preact/hooks";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  arrow
+} from "@floating-ui/dom";
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+import classNames from "classnames";
+import { ContentTypeIcon } from "./icons/index.js";
+import { FieldTypeIconsMap } from "../generators/generateCustomCursor.js";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var Tooltip = ({ children, content, placement = "top-start" }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const arrowRef = useRef(null);
+  const showTooltip = () => setIsVisible(true);
+  const hideTooltip = () => setIsVisible(false);
+  useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    computePosition(trigger, tooltip, {
+      placement,
+      // Middleware runs in order to modify the position
+      middleware: [
+        offset(8),
+        // Add 8px of space between the trigger and tooltip
+        flip(),
+        // Flip to the opposite side if it overflows
+        shift({ padding: 5 }),
+        // Shift to keep it in view
+        ...arrowRef.current ? [arrow({ element: arrowRef.current })] : []
+        // Handle arrow positioning
+      ]
+    }).then(({ x, y, placement: placement2, middlewareData }) => {
+      Object.assign(tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (middlewareData.arrow && arrowRef.current) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        const side = placement2.split("-")[0];
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[side];
+        const arrowElement = arrowRef.current;
+        Object.assign(arrowElement.style, {
+          left: "",
+          top: "",
+          right: "",
+          bottom: ""
+        });
+        if (placement2.includes("-start") || placement2.includes("-end")) {
+          const tooltipRect = tooltip.getBoundingClientRect();
+          if (side === "top" || side === "bottom") {
+            arrowElement.style.left = `${14}px`;
+            if (arrowY != null) {
+              arrowElement.style.top = `${arrowY}px`;
+            }
+          } else {
+            arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`;
+            if (arrowX != null) {
+              arrowElement.style.left = `${arrowX}px`;
+            }
+          }
+        } else {
+          if (arrowX != null) {
+            arrowElement.style.left = `${arrowX}px`;
+          }
+          if (arrowY != null) {
+            arrowElement.style.top = `${arrowY}px`;
+          }
+        }
+        arrowElement.style[staticSide] = "-4px";
+      }
+    });
+  }, [isVisible, placement, content]);
+  const triggerWithListeners = cloneElement(children, {
+    ref: triggerRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip,
+    "aria-describedby": "lightweight-tooltip"
+    // for accessibility
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerWithListeners,
+    isVisible && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tooltipRef,
+        role: "tooltip",
+        id: "lightweight-tooltip",
+        className: classNames("tooltip-container", visualBuilderStyles()["tooltip-container"]),
+        children: [
+          content,
+          /* @__PURE__ */ jsx("div", { ref: arrowRef, className: classNames("tooltip-arrow", visualBuilderStyles()["tooltip-arrow"]) })
+        ]
+      }
+    )
+  ] });
+};
+function ToolbarTooltipContent({ contentTypeName, referenceFieldName }) {
+  return /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content", visualBuilderStyles()["toolbar-tooltip-content"]), children: [
+    contentTypeName && /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content-item", visualBuilderStyles()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ jsx(ContentTypeIcon, {}),
+      /* @__PURE__ */ jsx("p", { children: contentTypeName })
+    ] }),
+    referenceFieldName && /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content-item", visualBuilderStyles()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: FieldTypeIconsMap.reference }, className: classNames("visual-builder__field-icon", visualBuilderStyles()["visual-builder__field-icon"]) }),
+      /* @__PURE__ */ jsx("p", { children: referenceFieldName })
+    ] })
+  ] });
+}
+function ToolbarTooltip({ children, data, disabled = false }) {
+  if (disabled) {
+    return children;
+  }
+  const { contentTypeName, referenceFieldName } = data;
+  return /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ToolbarTooltipContent, { contentTypeName, referenceFieldName }), children });
+}
+var Tooltip_default = Tooltip;
+export {
+  ToolbarTooltip,
+  Tooltip_default as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/legacy/visualBuilder/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/Tooltip.tsx"],"sourcesContent":["import { h, cloneElement } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow\n} from '@floating-ui/dom';\nimport { visualBuilderStyles } from '../visualBuilder.style';\nimport classNames from 'classnames';\nimport { ContentTypeIcon } from './icons';\nimport { FieldTypeIconsMap } from '../generators/generateCustomCursor';\ninterface TooltipProps {\n  children: JSX.Element;\n  content: JSX.Element;\n  placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';\n}\n\n/**\n * A lightweight, reusable tooltip component for Preact powered by Floating UI.\n *\n * @param {object} props - The component props.\n * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.\n * @param {string | preact.VNode} props.content - The content to display inside the tooltip.\n * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.\n */\nconst Tooltip = ({ children, content, placement = 'top-start' }: TooltipProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    // Create refs for the trigger and the floating tooltip elements\n    const triggerRef = useRef(null);\n    const tooltipRef = useRef(null);\n    const arrowRef = useRef(null);\n\n    const showTooltip = () => setIsVisible(true);\n    const hideTooltip = () => setIsVisible(false);\n\n    // This effect calculates the tooltip's position whenever it becomes visible\n    // or if its content or placement changes.\n    useEffect(() => {\n        if (!isVisible || !triggerRef.current || !tooltipRef.current) {\n            return;\n        }\n\n        const trigger = triggerRef.current as HTMLElement;\n        const tooltip = tooltipRef.current as HTMLElement;\n\n        computePosition(trigger, tooltip, {\n            placement,\n            // Middleware runs in order to modify the position\n            middleware: [\n                offset(8), // Add 8px of space between the trigger and tooltip\n                flip(),    // Flip to the opposite side if it overflows\n                shift({ padding: 5 }), // Shift to keep it in view\n                ...(arrowRef.current ? [arrow({ element: arrowRef.current as HTMLElement })] : []), // Handle arrow positioning\n            ],\n        }).then(({ x, y, placement, middlewareData }) => {\n            // Apply the calculated coordinates to the tooltip element\n            Object.assign(tooltip.style, {\n                left: `${x}px`,\n                top: `${y}px`,\n            });\n\n            // Position the arrow element\n            if (middlewareData.arrow && arrowRef.current) {\n                const { x: arrowX, y: arrowY } = middlewareData.arrow;\n                const side = placement.split('-')[0];\n                const staticSide = {\n                    top: 'bottom',\n                    right: 'left',\n                    bottom: 'top',\n                    left: 'right',\n                }[side] as string;\n\n                const arrowElement = arrowRef.current as HTMLElement;\n                \n                // Reset all positioning properties\n                Object.assign(arrowElement.style, {\n                    left: '',\n                    top: '',\n                    right: '',\n                    bottom: '',\n                });\n\n                // For placements like top-start, bottom-start, etc., we want the arrow \n                // to be centered on the tooltip rather than pointing at the trigger center\n                if (placement.includes('-start') || placement.includes('-end')) {\n                    const tooltipRect = tooltip.getBoundingClientRect();\n                    \n                    if (side === 'top' || side === 'bottom') {\n                        // For top/bottom placements, center the arrow horizontally\n                        arrowElement.style.left = `${14}px`; // 4px = half arrow width\n                        if (arrowY != null) {\n                            arrowElement.style.top = `${arrowY}px`;\n                        }\n                    } else {\n                        // For left/right placements, center the arrow vertically\n                        arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`; // 4px = half arrow height\n                        if (arrowX != null) {\n                            arrowElement.style.left = `${arrowX}px`;\n                        }\n                    }\n                } else {\n                    // For regular placements (top, bottom, left, right), use floating-ui's positioning\n                    if (arrowX != null) {\n                        arrowElement.style.left = `${arrowX}px`;\n                    }\n                    if (arrowY != null) {\n                        arrowElement.style.top = `${arrowY}px`;\n                    }\n                }\n\n                // Position arrow to overlap the tooltip's border\n                (arrowElement.style as any)[staticSide] = '-4px';\n            }\n        });\n\n    }, [isVisible, placement, content]);\n\n    // We need to clone the child element to attach our ref and event listeners.\n    // This ensures we don't wrap the child in an extra <div>.\n    const triggerWithListeners = cloneElement(children, {\n        ref: triggerRef,\n        onMouseEnter: showTooltip,\n        onMouseLeave: hideTooltip,\n        onFocus: showTooltip,\n        onBlur: hideTooltip,\n        'aria-describedby': 'lightweight-tooltip' // for accessibility\n    });\n\n    return (\n        <>\n            {triggerWithListeners}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    role=\"tooltip\"\n                    id=\"lightweight-tooltip\"\n                    className={classNames(\"tooltip-container\", visualBuilderStyles()[\"tooltip-container\"])}\n                >\n                    {content}\n                    <div ref={arrowRef} className={classNames(\"tooltip-arrow\", visualBuilderStyles()[\"tooltip-arrow\"])}></div>\n                </div>\n            )}\n        </>\n    );\n};\n\nfunction ToolbarTooltipContent({contentTypeName, referenceFieldName}: {contentTypeName: string, referenceFieldName: string}) {\n  return (\n    <div className={classNames(\"toolbar-tooltip-content\", visualBuilderStyles()[\"toolbar-tooltip-content\"])}>\n      {\n        contentTypeName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <ContentTypeIcon />\n            <p>{contentTypeName}</p>\n          </div>\n        )\n      }\n      {\n        referenceFieldName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <div dangerouslySetInnerHTML={{__html: FieldTypeIconsMap.reference}} className={classNames(\"visual-builder__field-icon\", visualBuilderStyles()[\"visual-builder__field-icon\"])}/>\n            <p>{referenceFieldName}</p>\n          </div>\n        )\n      }\n    </div>\n  )\n}\n\nexport function ToolbarTooltip({children, data, disabled = false}: {children: JSX.Element, data: {contentTypeName: string, referenceFieldName: string}, disabled?: boolean}) {\n  if (disabled) {\n    return children;\n  }\n  const { contentTypeName, referenceFieldName } = data;\n  return (\n    <Tooltip content={<ToolbarTooltipContent contentTypeName={contentTypeName} referenceFieldName={referenceFieldName} />}>\n      {children}\n    </Tooltip>\n  )\n}\n\nexport default Tooltip;"],"mappings":"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","names":["placement"]}

package/dist/legacy/visualBuilder/components/VisualBuilder.cjs

@@ -36,8 +36,12 @@ module.exports = __toCommonJS(VisualBuilder_exports);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_generateOverlay = require("../generators/generateOverlay.cjs");
 var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_utils = require("../../utils/index.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 function VisualBuilderComponent(props) {
+  if (!(0, import_utils.isOpenInBuilder)()) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "style",

package/dist/legacy/visualBuilder/components/VisualBuilder.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n    visualBuilderStyles,\n    VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\n\ninterface VisualBuilderProps {\n    visualBuilderContainer: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element {\n    return (\n        <>\n            {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */}\n            {/* glob also does not work when called in visualBuilder's constructor */}\n            <style\n                dangerouslySetInnerHTML={{\n                    __html: VisualBuilderGlobalStyles,\n                }}\n            />\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__cursor\"],\n                    \"visual-builder__cursor\"\n                )}\n                data-testid=\"visual-builder__cursor\"\n            ></div>\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n                    \"visual-builder__overlay__wrapper\"\n                )}\n                data-testid=\"visual-builder__overlay__wrapper\"\n                onClick={(event) => {\n                    const targetElement = event.currentTarget as HTMLDivElement;\n\n                    const focusedToolbar = document.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n\n                    hideOverlay({\n                        visualBuilderContainer: props.visualBuilderContainer,\n                        visualBuilderOverlayWrapper: targetElement,\n                        focusedToolbar: focusedToolbar,\n                        resizeObserver: props.resizeObserver,\n                    });\n                }}\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--top\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                    data-testid=\"visual-builder__overlay--top\"\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--left\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--left\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--right\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--right\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--bottom\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--bottom\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--outline\"\n                    className={classNames(\n                        \"visual-builder__overlay--outline\",\n                        visualBuilderStyles()[\n                            \"visual-builder__overlay--outline\"\n                        ]\n                    )}\n                ></div>\n            </div>\n\n            <div\n                className={classNames(\n                    \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n                    visualBuilderStyles()[\"visual-builder__hover-outline\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__hover-outline--unclickable\"\n                    ]\n                )}\n                data-testid=\"visual-builder__hover-outline\"\n            ></div>\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar\",\n                    visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n                )}\n                data-testid=\"visual-builder__focused-toolbar\"\n            ></div>\n        </>\n    );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,6BAA4B;AAC5B,2BAGO;AAUC;AAFR,SAAS,uBAAuB,OAAwC;AACpE,SACI,4EAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,kDAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,+BAA+B;AAAA,cACrD,0CAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":["classNames"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n    visualBuilderStyles,\n    VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder } from \"../../utils\";\n\ninterface VisualBuilderProps {\n    visualBuilderContainer: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null {\n    if (!isOpenInBuilder()) {\n        return null;\n    }\n\n    return (\n        <>\n            {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */}\n            {/* glob also does not work when called in visualBuilder's constructor */}\n            <style\n                dangerouslySetInnerHTML={{\n                    __html: VisualBuilderGlobalStyles,\n                }}\n            />\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__cursor\"],\n                    \"visual-builder__cursor\"\n                )}\n                data-testid=\"visual-builder__cursor\"\n            ></div>\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n                    \"visual-builder__overlay__wrapper\"\n                )}\n                data-testid=\"visual-builder__overlay__wrapper\"\n                onClick={(event) => {\n                    const targetElement = event.currentTarget as HTMLDivElement;\n\n                    const focusedToolbar = document.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n\n                    hideOverlay({\n                        visualBuilderContainer: props.visualBuilderContainer,\n                        visualBuilderOverlayWrapper: targetElement,\n                        focusedToolbar: focusedToolbar,\n                        resizeObserver: props.resizeObserver,\n                    });\n                }}\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--top\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                    data-testid=\"visual-builder__overlay--top\"\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--left\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--left\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--right\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--right\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--bottom\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--bottom\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--outline\"\n                    className={classNames(\n                        \"visual-builder__overlay--outline\",\n                        visualBuilderStyles()[\n                            \"visual-builder__overlay--outline\"\n                        ]\n                    )}\n                ></div>\n            </div>\n\n            <div\n                className={classNames(\n                    \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n                    visualBuilderStyles()[\"visual-builder__hover-outline\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__hover-outline--unclickable\"\n                    ]\n                )}\n                data-testid=\"visual-builder__hover-outline\"\n            ></div>\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar\",\n                    visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n                )}\n                data-testid=\"visual-builder__focused-toolbar\"\n            ></div>\n        </>\n    );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,6BAA4B;AAC5B,2BAGO;AAEP,mBAAgC;AAaxB;AANR,SAAS,uBAAuB,OAA+C;AAC3E,MAAI,KAAC,8BAAgB,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,SACI,4EAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,kDAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,+BAA+B;AAAA,cACrD,0CAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":["classNames"]}

package/dist/legacy/visualBuilder/components/VisualBuilder.d.cts

@@ -2,6 +2,6 @@ interface VisualBuilderProps {
     visualBuilderContainer: HTMLDivElement | null;
     resizeObserver: ResizeObserver;
 }
-declare function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element;
+declare function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null;
 
 export { VisualBuilderComponent as default };

package/dist/legacy/visualBuilder/components/VisualBuilder.d.ts

@@ -2,6 +2,6 @@ interface VisualBuilderProps {
     visualBuilderContainer: HTMLDivElement | null;
     resizeObserver: ResizeObserver;
 }
-declare function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element;
+declare function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null;
 
 export { VisualBuilderComponent as default };

package/dist/legacy/visualBuilder/components/VisualBuilder.js

@@ -7,8 +7,12 @@ import {
   visualBuilderStyles,
   VisualBuilderGlobalStyles
 } from "../visualBuilder.style.js";
+import { isOpenInBuilder } from "../../utils/index.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 function VisualBuilderComponent(props) {
+  if (!isOpenInBuilder()) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "style",

package/dist/legacy/visualBuilder/components/VisualBuilder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n    visualBuilderStyles,\n    VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\n\ninterface VisualBuilderProps {\n    visualBuilderContainer: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element {\n    return (\n        <>\n            {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */}\n            {/* glob also does not work when called in visualBuilder's constructor */}\n            <style\n                dangerouslySetInnerHTML={{\n                    __html: VisualBuilderGlobalStyles,\n                }}\n            />\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__cursor\"],\n                    \"visual-builder__cursor\"\n                )}\n                data-testid=\"visual-builder__cursor\"\n            ></div>\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n                    \"visual-builder__overlay__wrapper\"\n                )}\n                data-testid=\"visual-builder__overlay__wrapper\"\n                onClick={(event) => {\n                    const targetElement = event.currentTarget as HTMLDivElement;\n\n                    const focusedToolbar = document.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n\n                    hideOverlay({\n                        visualBuilderContainer: props.visualBuilderContainer,\n                        visualBuilderOverlayWrapper: targetElement,\n                        focusedToolbar: focusedToolbar,\n                        resizeObserver: props.resizeObserver,\n                    });\n                }}\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--top\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                    data-testid=\"visual-builder__overlay--top\"\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--left\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--left\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--right\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--right\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--bottom\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--bottom\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--outline\"\n                    className={classNames(\n                        \"visual-builder__overlay--outline\",\n                        visualBuilderStyles()[\n                            \"visual-builder__overlay--outline\"\n                        ]\n                    )}\n                ></div>\n            </div>\n\n            <div\n                className={classNames(\n                    \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n                    visualBuilderStyles()[\"visual-builder__hover-outline\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__hover-outline--unclickable\"\n                    ]\n                )}\n                data-testid=\"visual-builder__hover-outline\"\n            ></div>\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar\",\n                    visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n                )}\n                data-testid=\"visual-builder__focused-toolbar\"\n            ></div>\n        </>\n    );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,SAAS,mBAAmB;AAC5B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAUC,mBAGI,KAYA,YAfJ;AAFR,SAAS,uBAAuB,OAAwC;AACpE,SACI,iCAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,sBAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,+BAA+B;AAAA,UACrD,oBAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n    visualBuilderStyles,\n    VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder } from \"../../utils\";\n\ninterface VisualBuilderProps {\n    visualBuilderContainer: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null {\n    if (!isOpenInBuilder()) {\n        return null;\n    }\n\n    return (\n        <>\n            {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */}\n            {/* glob also does not work when called in visualBuilder's constructor */}\n            <style\n                dangerouslySetInnerHTML={{\n                    __html: VisualBuilderGlobalStyles,\n                }}\n            />\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__cursor\"],\n                    \"visual-builder__cursor\"\n                )}\n                data-testid=\"visual-builder__cursor\"\n            ></div>\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n                    \"visual-builder__overlay__wrapper\"\n                )}\n                data-testid=\"visual-builder__overlay__wrapper\"\n                onClick={(event) => {\n                    const targetElement = event.currentTarget as HTMLDivElement;\n\n                    const focusedToolbar = document.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n\n                    hideOverlay({\n                        visualBuilderContainer: props.visualBuilderContainer,\n                        visualBuilderOverlayWrapper: targetElement,\n                        focusedToolbar: focusedToolbar,\n                        resizeObserver: props.resizeObserver,\n                    });\n                }}\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--top\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                    data-testid=\"visual-builder__overlay--top\"\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--left\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--left\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--right\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--right\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--bottom\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--bottom\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--outline\"\n                    className={classNames(\n                        \"visual-builder__overlay--outline\",\n                        visualBuilderStyles()[\n                            \"visual-builder__overlay--outline\"\n                        ]\n                    )}\n                ></div>\n            </div>\n\n            <div\n                className={classNames(\n                    \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n                    visualBuilderStyles()[\"visual-builder__hover-outline\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__hover-outline--unclickable\"\n                    ]\n                )}\n                data-testid=\"visual-builder__hover-outline\"\n            ></div>\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar\",\n                    visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n                )}\n                data-testid=\"visual-builder__focused-toolbar\"\n            ></div>\n        </>\n    );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,SAAS,mBAAmB;AAC5B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,uBAAuB;AAaxB,mBAGI,KAYA,YAfJ;AANR,SAAS,uBAAuB,OAA+C;AAC3E,MAAI,CAAC,gBAAgB,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,SACI,iCAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,sBAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,+BAA+B;AAAA,UACrD,oBAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":[]}

package/dist/legacy/visualBuilder/components/fieldLabelWrapper.cjs

@@ -48,25 +48,53 @@ var import_CslpError = require("./CslpError.cjs");
 var import_errorHandling = require("../utils/errorHandling.cjs");
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
 var import_getEntryPermissionsCached = require("../utils/getEntryPermissionsCached.cjs");
+var import_icons2 = require("./icons/index.cjs");
+var import_Tooltip = require("./Tooltip.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 async function getFieldDisplayNames(fieldMetadata) {
   var _a;
   const result = await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(import_postMessage.VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata));
   return result;
 }
+async function getContentTypeName(contentTypeUid) {
+  var _a;
+  try {
+    const result = await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(import_postMessage.VisualBuilderPostMessageEvents.GET_CONTENT_TYPE_NAME, {
+      content_type_uid: contentTypeUid
+    }));
+    return result == null ? void 0 : result.contentTypeName;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting content type name", e);
+    return "";
+  }
+}
+async function getReferenceParentMap() {
+  var _a;
+  try {
+    const result = await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(import_postMessage.VisualBuilderPostMessageEvents.REFERENCE_MAP, {})) ?? {};
+    return result;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting reference parent map", e);
+    return {};
+  }
+}
 function FieldLabelWrapperComponent(props) {
   const { eventDetails } = props;
   const [currentField, setCurrentField] = (0, import_compat.useState)({
     text: "",
+    contentTypeName: "",
     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}),
     prefixIcon: null,
     disabled: false,
-    isVariant: false
+    isVariant: false,
+    isReference: false,
+    referenceFieldName: "",
+    parentContentTypeName: ""
   });
   const [displayNames, setDisplayNames] = (0, import_compat.useState)(
     {}
   );
-  const [displayNamesLoading, setDisplayNamesLoading] = (0, import_compat.useState)(true);
+  const [dataLoading, setDataLoading] = (0, import_compat.useState)(true);
   const [error, setError] = (0, import_compat.useState)(false);
   const [isDropdownOpen, setIsDropdownOpen] = (0, import_compat.useState)(false);
   function calculateTopOffset(index) {
@@ -77,7 +105,7 @@ function FieldLabelWrapperComponent(props) {
   (0, import_compat.useEffect)(() => {
     const fetchData = async () => {
       var _a, _b;
-      setDisplayNamesLoading(true);
+      setDataLoading(true);
       const allPaths = (0, import_lodash_es.uniqBy)(
         [
           props.fieldMetadata,
@@ -87,13 +115,37 @@ function FieldLabelWrapperComponent(props) {
         ],
         "cslpValue"
       );
-      const displayNames2 = await getFieldDisplayNames(allPaths);
-      const fieldSchema = await import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
-        props.fieldMetadata.content_type_uid,
-        props.fieldMetadata.fieldPath
-      );
+      const [displayNames2, fieldSchema, contentTypeName, referenceParentMap] = await Promise.all([
+        getFieldDisplayNames(allPaths),
+        import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
+          props.fieldMetadata.content_type_uid,
+          props.fieldMetadata.fieldPath
+        ),
+        getContentTypeName(
+          props.fieldMetadata.content_type_uid
+        ),
+        getReferenceParentMap()
+      ]);
+      const entryUid = props.fieldMetadata.entry_uid;
+      const referenceData = referenceParentMap[entryUid];
+      const isReference = !!referenceData;
+      let referenceFieldName = referenceData ? referenceData[0].referenceFieldName : "";
+      let parentContentTypeName = referenceData ? referenceData[0].contentTypeTitle : "";
+      if (isReference) {
+        const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^="${props.fieldMetadata.content_type_uid}"])`);
+        if (domAncestor) {
+          const domAncestorCslp = domAncestor.getAttribute("data-cslp");
+          const domAncestorDetails = (0, import_cslp.extractDetailsFromCslp)(domAncestorCslp);
+          const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
+          const domAncestorContentParent = referenceData == null ? void 0 : referenceData.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
+          if (domAncestorContentParent) {
+            referenceFieldName = domAncestorContentParent.referenceFieldName;
+            parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+          }
+        }
+      }
       if ((0, import_errorHandling.hasPostMessageError)(displayNames2) || !fieldSchema) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
         setError(true);
         return;
       }
@@ -112,6 +164,7 @@ function FieldLabelWrapperComponent(props) {
       const isVariant = props.fieldMetadata.variant ? true : false;
       setCurrentField({
         text: currentFieldDisplayName,
+        contentTypeName: contentTypeName ?? "",
         icon: fieldDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
@@ -122,18 +175,25 @@ function FieldLabelWrapperComponent(props) {
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoIcon, {})
           }
         ) : hasParentPaths ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
+        isReference,
         prefixIcon: (0, import_generateCustomCursor.getFieldIcon)(fieldSchema),
         disabled: fieldDisabled,
+        referenceFieldName,
+        parentContentTypeName,
         isVariant
       });
       if (displayNames2) {
         setDisplayNames(displayNames2);
       }
       if (((_b = Object.keys(displayNames2 || {})) == null ? void 0 : _b.length) === allPaths.length) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
       }
     };
-    fetchData();
+    try {
+      fetchData();
+    } catch (e) {
+      console.warn("[getFieldLabelWrapper] Error fetching field label data", e);
+    }
   }, [props]);
   const onParentPathClick = (cslp) => {
     const parentElement = props.getParentEditableElement(cslp);
@@ -144,7 +204,7 @@ function FieldLabelWrapperComponent(props) {
   function getCurrentFieldIcon() {
     if (error) {
       return null;
-    } else if (displayNamesLoading) {
+    } else if (dataLoading) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.LoadingIcon, {});
     } else {
       return currentField.icon;
@@ -157,7 +217,7 @@ function FieldLabelWrapperComponent(props) {
         "visual-builder__focused-toolbar__field-label-container",
         (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__field-label-container"]
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.ToolbarTooltip, { data: { contentTypeName: currentField.parentContentTypeName, referenceFieldName: currentField.referenceFieldName }, disabled: !currentField.isReference || isDropdownOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
           className: (0, import_classnames.default)(
@@ -176,6 +236,7 @@ function FieldLabelWrapperComponent(props) {
           ),
           onClick: () => setIsDropdownOpen((prev) => !prev),
           "data-testid": "visual-builder__focused-toolbar__field-label-wrapper",
+          "data-hovered-cslp": props.fieldMetadata.cslpValue,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "button",
@@ -188,8 +249,47 @@ function FieldLabelWrapperComponent(props) {
                   (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button-loader"],
                   error && (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button-error"]
                 ),
-                disabled: displayNamesLoading,
+                disabled: dataLoading,
                 children: [
+                  currentField.isReference && !dataLoading && !error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      className: (0, import_classnames.default)(
+                        "visual-builder__reference-icon-container",
+                        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__reference-icon-container"]
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            className: (0, import_classnames.default)(
+                              "visual-builder__field-icon",
+                              (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-icon"]
+                            ),
+                            dangerouslySetInnerHTML: {
+                              __html: import_generateCustomCursor.FieldTypeIconsMap.reference
+                            },
+                            "data-testid": "visual-builder__field-icon-caret"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightIcon, {})
+                      ]
+                    }
+                  ) : null,
+                  currentField.contentTypeName && !dataLoading && !error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.ContentTypeIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_classnames.default)(
+                          "visual-builder__focused-toolbar__text",
+                          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__text"]
+                        ),
+                        "data-testid": "visual-builder__focused-toolbar__ct-name",
+                        children: currentField.contentTypeName + " : "
+                      }
+                    )
+                  ] }) : null,
                   currentField.prefixIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
@@ -238,7 +338,7 @@ function FieldLabelWrapperComponent(props) {
             ))
           ]
         }
-      )
+      ) })
     }
   );
 }

package/dist/legacy/visualBuilder/components/fieldLabelWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/fieldLabelWrapper.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { CaretIcon, InfoIcon } from \"./icons\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport { getFieldIcon } from \"../generators/generateCustomCursor\";\nimport { uniqBy } from \"lodash-es\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { CslpError } from \"./CslpError\";\nimport { hasPostMessageError } from \"../utils/errorHandling\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { getEntryPermissionsCached } from \"../utils/getEntryPermissionsCached\";\n\nasync function getFieldDisplayNames(fieldMetadata: CslpData[]) {\n    const result = await visualBuilderPostMessage?.send<{\n        [k: string]: string;\n    }>(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);\n    return result;\n}\n\ninterface FieldLabelWrapperProps {\n    fieldMetadata: CslpData;\n    eventDetails: VisualBuilderCslpEventDetails;\n    parentPaths: string[];\n    getParentEditableElement: (cslp: string) => HTMLElement | null;\n}\n\ninterface ICurrentField {\n    text: string;\n    icon: JSX.Element;\n    prefixIcon: any;\n    disabled: boolean;\n    isVariant: boolean;\n}\n\nfunction FieldLabelWrapperComponent(\n    props: FieldLabelWrapperProps\n): JSX.Element {\n    const { eventDetails } = props;\n    const [currentField, setCurrentField] = useState<ICurrentField>({\n        text: \"\",\n        icon: <CaretIcon />,\n        prefixIcon: null,\n        disabled: false,\n        isVariant: false,\n    });\n    const [displayNames, setDisplayNames] = useState<Record<string, string>>(\n        {}\n    );\n    const [displayNamesLoading, setDisplayNamesLoading] = useState(true);\n    const [error, setError] = useState(false);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n    function calculateTopOffset(index: number) {\n        const height = -30; // from bottom\n        const offset = (index + 1) * height;\n        return `${offset}px`;\n    }\n\n    useEffect(() => {\n        const fetchData = async () => {\n            setDisplayNamesLoading(true);\n            const allPaths = uniqBy(\n                [\n                    props.fieldMetadata,\n                    ...props.parentPaths.map((path) => {\n                        return extractDetailsFromCslp(path);\n                    }),\n                ],\n                \"cslpValue\"\n            );\n            const displayNames = await getFieldDisplayNames(allPaths);\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                props.fieldMetadata.content_type_uid,\n                props.fieldMetadata.fieldPath\n            );\n\n            if (hasPostMessageError(displayNames) || !fieldSchema) {\n                setDisplayNamesLoading(false);\n                setError(true);\n\n                return;\n            }\n\n            const entryPermissions = await getEntryPermissionsCached({\n                entryUid: props.fieldMetadata.entry_uid,\n                contentTypeUid: props.fieldMetadata.content_type_uid,\n                locale: props.fieldMetadata.locale,\n            });\n            const { isDisabled: fieldDisabled, reason } = isFieldDisabled(\n                fieldSchema,\n                eventDetails,\n                entryPermissions\n            );\n\n            const currentFieldDisplayName =\n                displayNames?.[props.fieldMetadata.cslpValue] ??\n                fieldSchema.display_name;\n\n            const hasParentPaths = !!props?.parentPaths?.length;\n            const isVariant = props.fieldMetadata.variant ? true : false;\n\n            setCurrentField({\n                text: currentFieldDisplayName,\n                icon: fieldDisabled ? (\n                    <div\n                        className={classNames(\n                            visualBuilderStyles()[\n                                \"visual-builder__tooltip--persistent\"\n                            ]\n                        )}\n                        data-tooltip={reason}\n                    >\n                        <InfoIcon />\n                    </div>\n                ) : hasParentPaths ? (\n                    <CaretIcon />\n                ) : (\n                    <></>\n                ),\n                prefixIcon: getFieldIcon(fieldSchema),\n                disabled: fieldDisabled,\n                isVariant: isVariant,\n            });\n\n            if (displayNames) {\n                setDisplayNames(displayNames);\n            }\n            if (Object.keys(displayNames || {})?.length === allPaths.length) {\n                setDisplayNamesLoading(false);\n            }\n        };\n\n        fetchData();\n    }, [props]);\n\n    const onParentPathClick = (cslp: string) => {\n        const parentElement = props.getParentEditableElement(cslp);\n        if (parentElement) {\n            // emulate clicking on the parent element\n            parentElement.click();\n        }\n    };\n\n    function getCurrentFieldIcon() {\n        if (error) {\n            return null;\n        } else if (displayNamesLoading) {\n            return <LoadingIcon />;\n        } else {\n            return currentField.icon;\n        }\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__focused-toolbar__field-label-container\",\n                visualBuilderStyles()[\n                    \"visual-builder__focused-toolbar__field-label-container\"\n                ]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar__field-label-wrapper\",\n                    visualBuilderStyles()[\n                        \"visual-builder__focused-toolbar__field-label-wrapper\"\n                    ],\n                    {\n                        \"visual-builder__focused-toolbar--field-disabled\":\n                            currentField.disabled,\n                    },\n                    {\n                        [visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar--field-disabled\"\n                        ]]: currentField.disabled,\n                    },\n                    {\n                        \"field-label-dropdown-open\": isDropdownOpen,\n                        [visualBuilderStyles()[\"field-label-dropdown-open\"]]:\n                            isDropdownOpen,\n                    }\n                )}\n                onClick={() => setIsDropdownOpen((prev) => !prev)}\n                data-testid=\"visual-builder__focused-toolbar__field-label-wrapper\"\n            >\n                <button\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__field-label-wrapper__current-field visual-builder__button visual-builder__button--primary visual-builder__button-loader\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__field-label-wrapper__current-field\"\n                        ],\n                        visualBuilderStyles()[\"visual-builder__button\"],\n                        visualBuilderStyles()[\n                            \"visual-builder__button--primary\"\n                        ],\n                        visualBuilderStyles()[\"visual-builder__button-loader\"],\n                        error &&\n                            visualBuilderStyles()[\n                                \"visual-builder__button-error\"\n                            ]\n                    )}\n                    disabled={displayNamesLoading}\n                >\n                    {currentField.prefixIcon ? (\n                        <div\n                            className={classNames(\n                                \"visual-builder__field-icon\",\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-icon\"\n                                ]\n                            )}\n                            dangerouslySetInnerHTML={{\n                                __html: currentField.prefixIcon,\n                            }}\n                            data-testid=\"visual-builder__field-icon\"\n                        />\n                    ) : null}\n                    {currentField.text ? (\n                        <div\n                            className={classNames(\n                                \"visual-builder__focused-toolbar__text\",\n                                visualBuilderStyles()[\n                                    \"visual-builder__focused-toolbar__text\"\n                                ]\n                            )}\n                            data-testid=\"visual-builder__focused-toolbar__text\"\n                        >\n                            {currentField.text}\n                        </div>\n                    ) : null}\n                    {getCurrentFieldIcon()}\n                    {error ? <CslpError /> : null}\n                </button>\n                {props.parentPaths.map((path, index) => (\n                    <button\n                        key={path}\n                        className={classNames(\n                            \"visual-builder__focused-toolbar__field-label-wrapper__parent-field visual-builder__button visual-builder__button--secondary visual-builder__focused-toolbar__text\",\n                            visualBuilderStyles()[\n                                \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\"\n                            ],\n                            visualBuilderStyles()[\"visual-builder__button\"],\n                            visualBuilderStyles()[\n                                \"visual-builder__button--secondary\"\n                            ],\n                            visualBuilderStyles()[\n                                \"visual-builder__focused-toolbar__text\"\n                            ]\n                        )}\n                        data-target-cslp={path}\n                        style={{ top: calculateTopOffset(index) }}\n                        onClick={() => onParentPathClick(path)}\n                    >\n                        {displayNames[path]}\n                    </button>\n                ))}\n            </div>\n        </div>\n    );\n}\n\nexport default FieldLabelWrapperComponent;\n"],"mappings":"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","names":["visualBuilderPostMessage","displayNames","classNames"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/fieldLabelWrapper.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { CaretIcon, CaretRightIcon, InfoIcon } from \"./icons\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport { FieldTypeIconsMap, getFieldIcon } from \"../generators/generateCustomCursor\";\nimport { uniqBy } from \"lodash-es\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { CslpError } from \"./CslpError\";\nimport { hasPostMessageError } from \"../utils/errorHandling\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { getEntryPermissionsCached } from \"../utils/getEntryPermissionsCached\";\nimport { ContentTypeIcon } from \"./icons\";\nimport { ToolbarTooltip } from \"./Tooltip\";\n\ninterface ReferenceParentMap {\n    [entryUid: string]: {\n        contentTypeUid: string;\n        contentTypeTitle: string;\n        referenceFieldName: string;\n    }[]\n}\n\nasync function getFieldDisplayNames(fieldMetadata: CslpData[]) {\n    const result = await visualBuilderPostMessage?.send<{\n        [k: string]: string;\n    }>(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);\n    return result;\n}\n\nasync function getContentTypeName(contentTypeUid: string) {\n    try {\n        const result = await visualBuilderPostMessage?.send<{\n            contentTypeName: string;\n        }>(VisualBuilderPostMessageEvents.GET_CONTENT_TYPE_NAME, {\n            content_type_uid: contentTypeUid,\n        });\n        return result?.contentTypeName;\n    } catch(e) {\n        console.warn(\"[getFieldLabelWrapper] Error getting content type name\", e);\n        return \"\";\n    }\n}\n\nasync function getReferenceParentMap() {\n    try {\n        const result = await visualBuilderPostMessage?.send<ReferenceParentMap>(VisualBuilderPostMessageEvents.REFERENCE_MAP, {}) ?? {};\n        return result;\n    } catch(e) {\n        console.warn(\"[getFieldLabelWrapper] Error getting reference parent map\", e);\n        return {};\n    }\n    \n}\n\ninterface FieldLabelWrapperProps {\n    fieldMetadata: CslpData;\n    eventDetails: VisualBuilderCslpEventDetails;\n    parentPaths: string[];\n    getParentEditableElement: (cslp: string) => HTMLElement | null;\n}\n\ninterface ICurrentField {\n    text: string;\n    contentTypeName: string;\n    icon: JSX.Element;\n    prefixIcon: any;\n    disabled: boolean;\n    isVariant: boolean;\n    isReference: boolean;\n    referenceFieldName: string;\n    parentContentTypeName: string;\n}\n\nfunction FieldLabelWrapperComponent(\n    props: FieldLabelWrapperProps\n): JSX.Element {\n    const { eventDetails } = props;\n    const [currentField, setCurrentField] = useState<ICurrentField>({\n        text: \"\",\n        contentTypeName: \"\",\n        icon: <CaretIcon />,\n        prefixIcon: null,\n        disabled: false,\n        isVariant: false,\n        isReference: false,\n        referenceFieldName: \"\",\n        parentContentTypeName: \"\",\n    });\n    const [displayNames, setDisplayNames] = useState<Record<string, string>>(\n        {}\n    );\n    const [dataLoading, setDataLoading] = useState(true);\n    const [error, setError] = useState(false);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n    function calculateTopOffset(index: number) {\n        const height = -30; // from bottom\n        const offset = (index + 1) * height;\n        return `${offset}px`;\n    }\n\n    useEffect(() => {\n        const fetchData = async () => {\n            setDataLoading(true);\n            const allPaths = uniqBy(\n                [\n                    props.fieldMetadata,\n                    ...props.parentPaths.map((path) => {\n                        return extractDetailsFromCslp(path);\n                    }),\n                ],\n                \"cslpValue\"\n            );\n            const [displayNames, fieldSchema, contentTypeName, referenceParentMap] = await Promise.all([\n                getFieldDisplayNames(allPaths),\n                FieldSchemaMap.getFieldSchema(\n                    props.fieldMetadata.content_type_uid,\n                    props.fieldMetadata.fieldPath\n                ),\n                getContentTypeName(\n                    props.fieldMetadata.content_type_uid\n                ),\n                getReferenceParentMap()\n            ]);\n            const entryUid = props.fieldMetadata.entry_uid;\n            \n            const referenceData = referenceParentMap[entryUid];\n            const isReference = !!referenceData;\n\n            let referenceFieldName = referenceData ? referenceData[0].referenceFieldName : \"\";\n            let parentContentTypeName = referenceData ? referenceData[0].contentTypeTitle : \"\";\n\n            if(isReference) {\n                const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^=\"${props.fieldMetadata.content_type_uid}\"])`);\n                if(domAncestor) {\n                    const domAncestorCslp = domAncestor.getAttribute(\"data-cslp\");\n                    const domAncestorDetails = extractDetailsFromCslp(domAncestorCslp!);\n                    const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;\n                    const domAncestorContentParent = referenceData?.find(data => data.contentTypeUid === domAncestorContentTypeUid);\n                    if(domAncestorContentParent) {\n                        referenceFieldName = domAncestorContentParent.referenceFieldName;\n                        parentContentTypeName = domAncestorContentParent.contentTypeTitle;\n                    }\n                }\n            }\n\n            if (hasPostMessageError(displayNames) || !fieldSchema) {\n                setDataLoading(false);\n                setError(true);\n\n                return;\n            }\n\n            const entryPermissions = await getEntryPermissionsCached({\n                entryUid: props.fieldMetadata.entry_uid,\n                contentTypeUid: props.fieldMetadata.content_type_uid,\n                locale: props.fieldMetadata.locale,\n            });\n            const { isDisabled: fieldDisabled, reason } = isFieldDisabled(\n                fieldSchema,\n                eventDetails,\n                entryPermissions\n            );\n\n            const currentFieldDisplayName =\n                displayNames?.[props.fieldMetadata.cslpValue] ??\n                fieldSchema.display_name;\n\n            const hasParentPaths = !!props?.parentPaths?.length;\n            const isVariant = props.fieldMetadata.variant ? true : false;\n\n            setCurrentField({\n                text: currentFieldDisplayName,\n                contentTypeName: contentTypeName ?? \"\",\n                icon: fieldDisabled ? (\n                    <div\n                        className={classNames(\n                            visualBuilderStyles()[\n                                \"visual-builder__tooltip--persistent\"\n                            ]\n                        )}\n                        data-tooltip={reason}\n                    >\n                        <InfoIcon />\n                    </div>\n                ) : hasParentPaths ? (\n                    <CaretIcon />\n                ) : (\n                    <></>\n                ),\n                isReference,\n                prefixIcon: getFieldIcon(fieldSchema),\n                disabled: fieldDisabled,\n                referenceFieldName,\n                parentContentTypeName,\n                isVariant: isVariant,\n            });\n\n            if (displayNames) {\n                setDisplayNames(displayNames);\n            }\n            if (Object.keys(displayNames || {})?.length === allPaths.length) {\n                setDataLoading(false);\n            }\n        };\n\n        try {\n            fetchData();\n        } catch(e) {\n            console.warn(\"[getFieldLabelWrapper] Error fetching field label data\", e);\n        }\n    }, [props]);\n\n    const onParentPathClick = (cslp: string) => {\n        const parentElement = props.getParentEditableElement(cslp);\n        if (parentElement) {\n            // emulate clicking on the parent element\n            parentElement.click();\n        }\n    };\n\n    function getCurrentFieldIcon() {\n        if (error) {\n            return null;\n        } else if (dataLoading) {\n            return <LoadingIcon />;\n        } else {\n            return currentField.icon;\n        }\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__focused-toolbar__field-label-container\",\n                visualBuilderStyles()[\n                    \"visual-builder__focused-toolbar__field-label-container\"\n                ]\n            )}\n        >\n            <ToolbarTooltip data={{contentTypeName: currentField.parentContentTypeName, referenceFieldName: currentField.referenceFieldName}} disabled={!currentField.isReference || isDropdownOpen}>\n                <div\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__field-label-wrapper\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__field-label-wrapper\"\n                        ],\n                        {\n                            \"visual-builder__focused-toolbar--field-disabled\":\n                                currentField.disabled,\n                        },\n                        {\n                            [visualBuilderStyles()[\n                                \"visual-builder__focused-toolbar--field-disabled\"\n                            ]]: currentField.disabled,\n                        },\n                        {\n                            \"field-label-dropdown-open\": isDropdownOpen,\n                            [visualBuilderStyles()[\"field-label-dropdown-open\"]]:\n                                isDropdownOpen,\n                        }\n                    )}\n                    onClick={() => setIsDropdownOpen((prev) => !prev)}\n                    data-testid=\"visual-builder__focused-toolbar__field-label-wrapper\"\n                    data-hovered-cslp={props.fieldMetadata.cslpValue}\n                >\n                    <button\n                        className={classNames(\n                            \"visual-builder__focused-toolbar__field-label-wrapper__current-field visual-builder__button visual-builder__button--primary visual-builder__button-loader\",\n                            visualBuilderStyles()[\n                                \"visual-builder__focused-toolbar__field-label-wrapper__current-field\"\n                            ],\n                            visualBuilderStyles()[\"visual-builder__button\"],\n                            visualBuilderStyles()[\n                                \"visual-builder__button--primary\"\n                            ],\n                            visualBuilderStyles()[\"visual-builder__button-loader\"],\n                            error &&\n                                visualBuilderStyles()[\n                                    \"visual-builder__button-error\"\n                                ]\n                        )}\n                        disabled={dataLoading}\n                    >\n                        {\n                            currentField.isReference && !dataLoading && !error ? \n                            <div \n                            className={classNames(\n                                \"visual-builder__reference-icon-container\",\n                                visualBuilderStyles()[\"visual-builder__reference-icon-container\"]\n                            )}\n                            >\n                                <div\n                                    className={classNames(\n                                        \"visual-builder__field-icon\",\n                                        visualBuilderStyles()[\n                                            \"visual-builder__field-icon\"\n                                        ]\n                                    )}\n                                    dangerouslySetInnerHTML={{\n                                        __html: FieldTypeIconsMap.reference,\n                                    }}\n                                    data-testid=\"visual-builder__field-icon-caret\"\n                                />\n                                <CaretRightIcon />\n                            </div> : null\n                        }\n                        {\n                            currentField.contentTypeName && !dataLoading && !error ?\n                            <>\n                                <ContentTypeIcon />\n                                <div\n                                    className={classNames(\n                                        \"visual-builder__focused-toolbar__text\",\n                                        visualBuilderStyles()[\n                                            \"visual-builder__focused-toolbar__text\"\n                                        ]\n                                    )}\n                                    data-testid=\"visual-builder__focused-toolbar__ct-name\"\n                                >\n                                    {currentField.contentTypeName + \" : \"}\n                                </div>\n                            </> : null\n                        }\n                        {currentField.prefixIcon ? (\n                            <div\n                                className={classNames(\n                                    \"visual-builder__field-icon\",\n                                    visualBuilderStyles()[\n                                        \"visual-builder__field-icon\"\n                                    ]\n                                )}\n                                dangerouslySetInnerHTML={{\n                                    __html: currentField.prefixIcon,\n                                }}\n                                data-testid=\"visual-builder__field-icon\"\n                            />\n                        ) : null}\n                        {currentField.text ? (\n                            <div\n                                className={classNames(\n                                    \"visual-builder__focused-toolbar__text\",\n                                    visualBuilderStyles()[\n                                        \"visual-builder__focused-toolbar__text\"\n                                    ]\n                                )}\n                                data-testid=\"visual-builder__focused-toolbar__text\"\n                            >\n                                {currentField.text}\n                            </div>\n                        ) : null}\n                        {getCurrentFieldIcon()}\n                        {error ? <CslpError /> : null}\n                    </button>\n                    {props.parentPaths.map((path, index) => (\n                        <button\n                            key={path}\n                            className={classNames(\n                                \"visual-builder__focused-toolbar__field-label-wrapper__parent-field visual-builder__button visual-builder__button--secondary visual-builder__focused-toolbar__text\",\n                                visualBuilderStyles()[\n                                    \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\"\n                                ],\n                                visualBuilderStyles()[\"visual-builder__button\"],\n                                visualBuilderStyles()[\n                                    \"visual-builder__button--secondary\"\n                                ],\n                                visualBuilderStyles()[\n                                    \"visual-builder__focused-toolbar__text\"\n                                ]\n                            )}\n                            data-target-cslp={path}\n                            style={{ top: calculateTopOffset(index) }}\n                            onClick={() => onParentPathClick(path)}\n                        >\n                            {displayNames[path]}\n                        </button>\n                    ))}\n                </div>\n            </ToolbarTooltip>\n        </div>\n    );\n}\n\nexport default FieldLabelWrapperComponent;\n"],"mappings":"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","names":["import_icons","visualBuilderPostMessage","displayNames","classNames"]}