@contentstack/live-preview-utils 3.2.5 → 3.4.0

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

@@ -48,24 +48,50 @@ 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) {
   const result = await import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);
   return result;
 }
+async function getContentTypeName(contentTypeUid) {
+  try {
+    const result = await import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.GET_CONTENT_TYPE_NAME, {
+      content_type_uid: contentTypeUid
+    });
+    return result?.contentTypeName;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting content type name", e);
+    return "";
+  }
+}
+async function getReferenceParentMap() {
+  try {
+    const result = await import_visualBuilderPostMessage.default?.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) {
@@ -75,7 +101,7 @@ function FieldLabelWrapperComponent(props) {
   }
   (0, import_compat.useEffect)(() => {
     const fetchData = async () => {
-      setDisplayNamesLoading(true);
+      setDataLoading(true);
       const allPaths = (0, import_lodash_es.uniqBy)(
         [
           props.fieldMetadata,
@@ -85,13 +111,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?.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;
       }
@@ -110,6 +160,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",
           {
@@ -120,18 +171,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 (Object.keys(displayNames2 || {})?.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);
@@ -142,7 +200,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;
@@ -155,7 +213,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)(
@@ -174,6 +232,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",
@@ -186,8 +245,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",
                     {
@@ -236,7 +334,7 @@ function FieldLabelWrapperComponent(props) {
             ))
           ]
         }
-      )
+      ) })
     }
   );
 }

package/dist/modern/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"]}

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

@@ -7,33 +7,59 @@ import { extractDetailsFromCslp } from "../../cslp/index.js";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
 import { isFieldDisabled } from "../utils/isFieldDisabled.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
-import { CaretIcon, InfoIcon } from "./icons/index.js";
+import { CaretIcon, CaretRightIcon, InfoIcon } from "./icons/index.js";
 import { LoadingIcon } from "./icons/loading.js";
-import { getFieldIcon } from "../generators/generateCustomCursor.js";
+import { FieldTypeIconsMap, getFieldIcon } from "../generators/generateCustomCursor.js";
 import { uniqBy } from "lodash-es";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
 import { CslpError } from "./CslpError.js";
 import { hasPostMessageError } from "../utils/errorHandling.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
 import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached.js";
+import { ContentTypeIcon } from "./icons/index.js";
+import { ToolbarTooltip } from "./Tooltip.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 async function getFieldDisplayNames(fieldMetadata) {
   const result = await visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);
   return result;
 }
+async function getContentTypeName(contentTypeUid) {
+  try {
+    const result = await visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.GET_CONTENT_TYPE_NAME, {
+      content_type_uid: contentTypeUid
+    });
+    return result?.contentTypeName;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting content type name", e);
+    return "";
+  }
+}
+async function getReferenceParentMap() {
+  try {
+    const result = await visualBuilderPostMessage?.send(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] = useState({
     text: "",
+    contentTypeName: "",
     icon: /* @__PURE__ */ jsx(CaretIcon, {}),
     prefixIcon: null,
     disabled: false,
-    isVariant: false
+    isVariant: false,
+    isReference: false,
+    referenceFieldName: "",
+    parentContentTypeName: ""
   });
   const [displayNames, setDisplayNames] = useState(
     {}
   );
-  const [displayNamesLoading, setDisplayNamesLoading] = useState(true);
+  const [dataLoading, setDataLoading] = useState(true);
   const [error, setError] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   function calculateTopOffset(index) {
@@ -43,7 +69,7 @@ function FieldLabelWrapperComponent(props) {
   }
   useEffect(() => {
     const fetchData = async () => {
-      setDisplayNamesLoading(true);
+      setDataLoading(true);
       const allPaths = uniqBy(
         [
           props.fieldMetadata,
@@ -53,13 +79,37 @@ function FieldLabelWrapperComponent(props) {
         ],
         "cslpValue"
       );
-      const displayNames2 = await getFieldDisplayNames(allPaths);
-      const fieldSchema = await FieldSchemaMap.getFieldSchema(
-        props.fieldMetadata.content_type_uid,
-        props.fieldMetadata.fieldPath
-      );
+      const [displayNames2, fieldSchema, contentTypeName, referenceParentMap] = await Promise.all([
+        getFieldDisplayNames(allPaths),
+        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 = extractDetailsFromCslp(domAncestorCslp);
+          const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
+          const domAncestorContentParent = referenceData?.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
+          if (domAncestorContentParent) {
+            referenceFieldName = domAncestorContentParent.referenceFieldName;
+            parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+          }
+        }
+      }
       if (hasPostMessageError(displayNames2) || !fieldSchema) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
         setError(true);
         return;
       }
@@ -78,6 +128,7 @@ function FieldLabelWrapperComponent(props) {
       const isVariant = props.fieldMetadata.variant ? true : false;
       setCurrentField({
         text: currentFieldDisplayName,
+        contentTypeName: contentTypeName ?? "",
         icon: fieldDisabled ? /* @__PURE__ */ jsx(
           "div",
           {
@@ -88,18 +139,25 @@ function FieldLabelWrapperComponent(props) {
             children: /* @__PURE__ */ jsx(InfoIcon, {})
           }
         ) : hasParentPaths ? /* @__PURE__ */ jsx(CaretIcon, {}) : /* @__PURE__ */ jsx(Fragment, {}),
+        isReference,
         prefixIcon: getFieldIcon(fieldSchema),
         disabled: fieldDisabled,
+        referenceFieldName,
+        parentContentTypeName,
         isVariant
       });
       if (displayNames2) {
         setDisplayNames(displayNames2);
       }
       if (Object.keys(displayNames2 || {})?.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);
@@ -110,7 +168,7 @@ function FieldLabelWrapperComponent(props) {
   function getCurrentFieldIcon() {
     if (error) {
       return null;
-    } else if (displayNamesLoading) {
+    } else if (dataLoading) {
       return /* @__PURE__ */ jsx(LoadingIcon, {});
     } else {
       return currentField.icon;
@@ -123,7 +181,7 @@ function FieldLabelWrapperComponent(props) {
         "visual-builder__focused-toolbar__field-label-container",
         visualBuilderStyles()["visual-builder__focused-toolbar__field-label-container"]
       ),
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(ToolbarTooltip, { data: { contentTypeName: currentField.parentContentTypeName, referenceFieldName: currentField.referenceFieldName }, disabled: !currentField.isReference || isDropdownOpen, children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: classNames(
@@ -142,6 +200,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__ */ jsxs(
               "button",
@@ -154,8 +213,47 @@ function FieldLabelWrapperComponent(props) {
                   visualBuilderStyles()["visual-builder__button-loader"],
                   error && visualBuilderStyles()["visual-builder__button-error"]
                 ),
-                disabled: displayNamesLoading,
+                disabled: dataLoading,
                 children: [
+                  currentField.isReference && !dataLoading && !error ? /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: classNames(
+                        "visual-builder__reference-icon-container",
+                        visualBuilderStyles()["visual-builder__reference-icon-container"]
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: classNames(
+                              "visual-builder__field-icon",
+                              visualBuilderStyles()["visual-builder__field-icon"]
+                            ),
+                            dangerouslySetInnerHTML: {
+                              __html: FieldTypeIconsMap.reference
+                            },
+                            "data-testid": "visual-builder__field-icon-caret"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(CaretRightIcon, {})
+                      ]
+                    }
+                  ) : null,
+                  currentField.contentTypeName && !dataLoading && !error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(ContentTypeIcon, {}),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classNames(
+                          "visual-builder__focused-toolbar__text",
+                          visualBuilderStyles()["visual-builder__focused-toolbar__text"]
+                        ),
+                        "data-testid": "visual-builder__focused-toolbar__ct-name",
+                        children: currentField.contentTypeName + " : "
+                      }
+                    )
+                  ] }) : null,
                   currentField.prefixIcon ? /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -204,7 +302,7 @@ function FieldLabelWrapperComponent(props) {
             ))
           ]
         }
-      )
+      ) })
     }
   );
 }

package/dist/modern/visualBuilder/components/fieldLabelWrapper.js.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":["displayNames"]}
+{"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":["displayNames"]}