npm - @contentstack/live-preview-utils - Versions diffs - 3.2.5 → 3.3.0 - Mend

@contentstack/live-preview-utils 3.2.5 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/dist/modern/visualBuilder/components/fieldLabelWrapper.cjs.map CHANGED Viewed

	@@ -1 +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"]}
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, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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, 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"]}

package/dist/modern/visualBuilder/components/icons/index.cjs CHANGED Viewed

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 // src/visualBuilder/components/icons/index.tsx
@@ -22,6 +32,8 @@ var icons_exports = {};
 __export(icons_exports, {
   AddCommentIcon: () => AddCommentIcon,
   CaretIcon: () => CaretIcon,
+  CaretRightIcon: () => CaretRightIcon,
+  ContentTypeIcon: () => ContentTypeIcon,
   DeleteIcon: () => DeleteIcon,
   EditIcon: () => EditIcon,
   FormIcon: () => FormIcon,
@@ -35,6 +47,8 @@ __export(icons_exports, {
   WarningOctagonIcon: () => WarningOctagonIcon
 });
 module.exports = __toCommonJS(icons_exports);
+var import_visualBuilder = require("../../visualBuilder.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
 var generateIconStyles = ({ disabled = false }) => ({
   opacity: disabled ? 0.5 : 1,
@@ -387,10 +401,40 @@ function WarningOctagonIcon() {
     }
   );
 }
+function ContentTypeIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "visual-builder__content-type-icon",
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__content-type-icon"]
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 22L16 29L28 22", stroke: "#fff", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 16L16 23L28 16", stroke: "#fff", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 10L16 17L28 10L16 3L4 10Z", stroke: "#fff", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+      ] })
+    }
+  );
+}
+function CaretRightIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "visual-builder__caret-right-icon",
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__caret-right-icon"]
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.4697 5.46967C11.7626 5.17678 12.2374 5.17678 12.5303 5.46967L22.5303 15.4697C22.8232 15.7626 22.8232 16.2374 22.5303 16.5303L12.5303 26.5303C12.2374 26.8232 11.7626 26.8232 11.4697 26.5303C11.1768 26.2374 11.1768 25.7626 11.4697 25.4697L20.9393 16L11.4697 6.53033C11.1768 6.23744 11.1768 5.76256 11.4697 5.46967Z", fill: "#fff" }) })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddCommentIcon,
   CaretIcon,
+  CaretRightIcon,
+  ContentTypeIcon,
   DeleteIcon,
   EditIcon,
   FormIcon,