@contentstack/live-preview-utils 3.3.0 → 3.4.0

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

@@ -25,7 +25,7 @@ import { fieldIcons } from "./icons/fields/index.js";
 import classNames from "classnames";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
 import CommentIcon from "./CommentIcon.js";
-import { useEffect, useState } from "preact/compat";
+import { useEffect, useState, useRef } from "preact/compat";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
 import { isFieldDisabled } from "../utils/isFieldDisabled.js";
 import { FormIcon } from "./icons/index.js";
@@ -37,6 +37,8 @@ import {
   VariantRevertDropdown
 } from "./FieldRevert/FieldRevertComponent.js";
 import { LoadingIcon } from "./icons/loading.js";
+import { FieldLocationAppList } from "./FieldLocationAppList.js";
+import { FieldLocationIcon } from "./FieldLocationIcon.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 var TOOLTIP_TOP_EDGE_BUFFER = 96;
 function handleReplaceAsset(fieldMetadata) {
@@ -91,6 +93,13 @@ function FieldToolbarComponent(props) {
   } = props;
   const { fieldMetadata, editableElement: targetElement } = eventDetails;
   const [isFormLoading, setIsFormLoading] = useState(false);
+  const [fieldLocationData, setFieldLocationData] = useState(null);
+  const [displayAllApps, setDisplayAllApps] = useState(false);
+  const moreButtonRef = useRef(null);
+  const toolbarRef = useRef(null);
+  const [appListPosition, setAppListPosition] = useState(
+    "right"
+  );
   const parentPath = ((_b = (_a = fieldMetadata == null ? void 0 : fieldMetadata.multipleFieldMetadata) == null ? void 0 : _a.parentDetails) == null ? void 0 : _b.parentCslpValue) || "";
   const isVariant = !!(fieldMetadata == null ? void 0 : fieldMetadata.variant) || isVariantOrParentOfVariant;
   const direction = getChildrenDirection(targetElement, parentPath);
@@ -105,6 +114,7 @@ function FieldToolbarComponent(props) {
   let Icon = null;
   let fieldType = null;
   let isWholeMultipleField = false;
+  const APP_LIST_MIN_WIDTH = 230;
   let disableFieldActions = false;
   if (fieldSchema) {
     const { isDisabled } = isFieldDisabled(
@@ -117,15 +127,33 @@ function FieldToolbarComponent(props) {
     );
     disableFieldActions = isDisabled;
     fieldType = getFieldType(fieldSchema);
-    isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);
     Icon = fieldIcons[fieldType];
     isMultiple = fieldSchema.multiple || false;
     if (fieldType === FieldDataType.REFERENCE)
       isMultiple = fieldSchema.field_metadata.ref_multiple;
     isWholeMultipleField = isMultiple && (fieldMetadata.fieldPathWithIndex === fieldMetadata.instance.fieldPathWithIndex || ((_c = fieldMetadata.multipleFieldMetadata) == null ? void 0 : _c.index) === -1);
+    isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType) && !isWholeMultipleField;
     isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType) && !isWholeMultipleField;
   }
+  const domEditStack = getDOMEditStack(eventDetails.editableElement);
   const invertTooltipPosition = targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
+  const handleMoreIconClick = () => {
+    if (toolbarRef.current) {
+      const rect = toolbarRef.current.getBoundingClientRect();
+      const spaceRight = window.innerWidth - rect.right;
+      const spaceLeft = rect.left;
+      let position = "";
+      if (spaceRight < APP_LIST_MIN_WIDTH) {
+        position = "left";
+      } else if (spaceRight > APP_LIST_MIN_WIDTH) {
+        position = "right";
+      } else {
+        position = spaceRight > spaceLeft ? "right" : "left";
+      }
+      setAppListPosition(position);
+    }
+    setDisplayAllApps(!displayAllApps);
+  };
   const editButton = Icon ? /* @__PURE__ */ jsx(
     "button",
     {
@@ -276,6 +304,20 @@ function FieldToolbarComponent(props) {
       event == null ? void 0 : event.unregister();
     };
   }, []);
+  useEffect(() => {
+    const fetchFieldLocationData = async () => {
+      var _a2;
+      try {
+        const event = await ((_a2 = visualBuilderPostMessage) == null ? void 0 : _a2.send(VisualBuilderPostMessageEvents.FIELD_LOCATION_DATA, {
+          domEditStack: getDOMEditStack(eventDetails.editableElement)
+        }));
+        setFieldLocationData(event);
+      } catch (error) {
+        console.error("Error fetching field location data:", error);
+      }
+    };
+    fetchFieldLocationData();
+  }, [eventDetails.editableElement]);
   const multipleFieldToolbarButtonClasses = classNames(
     "visual-builder__button visual-builder__button--secondary",
     visualBuilderStyles()["visual-builder__button"],
@@ -286,133 +328,157 @@ function FieldToolbarComponent(props) {
       [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
     }
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: classNames(
         "visual-builder__field-toolbar-container",
         visualBuilderStyles()["visual-builder__field-toolbar-container"]
       ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: classNames(
-            "visual-builder__focused-toolbar__multiple-field-toolbar",
-            visualBuilderStyles()["visual-builder__focused-toolbar__multiple-field-toolbar"]
-          ),
-          "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar",
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classNames(
-                "visual-builder__focused-toolbar__button-group",
-                visualBuilderStyles()["visual-builder__focused-toolbar__button-group"]
-              ),
-              children: /* @__PURE__ */ jsxs(Fragment, { children: [
-                isVariant ? /* @__PURE__ */ jsx(
-                  VariantRevertDropdown,
-                  {
-                    fieldDataName: fieldMetadata.fieldPathWithIndex,
-                    fieldMetadata,
-                    variantStatus: fieldVariantStatus,
-                    isOpen: isOpenVariantRevert,
-                    closeDropdown: closeVariantDropdown,
-                    invertTooltipPosition,
-                    toggleVariantDropdown,
-                    disabled: disableFieldActions
-                  }
-                ) : null,
-                isMultiple && !isWholeMultipleField ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button",
-                      className: multipleFieldToolbarButtonClasses,
-                      "data-tooltip": direction === "vertical" ? "Move up" : "Move left",
-                      onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleMoveInstance(
-                          fieldMetadata,
-                          "previous"
-                        );
-                      },
-                      disabled: disableFieldActions || disableMoveLeft,
-                      children: /* @__PURE__ */ jsx(
-                        MoveLeftIcon,
-                        {
-                          className: classNames({
-                            "visual-builder__rotate--90": direction === "vertical",
-                            [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
-                          }),
-                          disabled: disableFieldActions || disableMoveLeft
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "visual-builder__focused-toolbar__multiple-field-toolbar",
+              visualBuilderStyles()["visual-builder__focused-toolbar__multiple-field-toolbar"]
+            ),
+            "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames(
+                  "visual-builder__focused-toolbar__button-group",
+                  visualBuilderStyles()["visual-builder__focused-toolbar__button-group"]
+                ),
+                children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  isVariant ? /* @__PURE__ */ jsx(
+                    VariantRevertDropdown,
                     {
-                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button",
-                      className: multipleFieldToolbarButtonClasses,
-                      "data-tooltip": direction === "vertical" ? "Move down" : "Move right",
-                      onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleMoveInstance(
-                          fieldMetadata,
-                          "next"
-                        );
-                      },
-                      disabled: disableFieldActions || disableMoveRight,
-                      children: /* @__PURE__ */ jsx(
-                        MoveRightIcon,
-                        {
-                          className: classNames({
-                            "visual-builder__rotate--90": direction === "vertical",
-                            [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
-                          }),
-                          disabled: disableFieldActions || disableMoveRight
-                        }
-                      )
+                      fieldDataName: fieldMetadata.fieldPathWithIndex,
+                      fieldMetadata,
+                      variantStatus: fieldVariantStatus,
+                      isOpen: isOpenVariantRevert,
+                      closeDropdown: closeVariantDropdown,
+                      invertTooltipPosition,
+                      toggleVariantDropdown,
+                      disabled: disableFieldActions
                     }
-                  ),
-                  isModalEditable ? editButton : null,
-                  formButton,
-                  isReplaceAllowed ? replaceButton : null,
+                  ) : null,
+                  isMultiple && !isWholeMultipleField ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button",
+                        className: multipleFieldToolbarButtonClasses,
+                        "data-tooltip": direction === "vertical" ? "Move up" : "Move left",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleMoveInstance(
+                            fieldMetadata,
+                            "previous"
+                          );
+                        },
+                        disabled: disableFieldActions || disableMoveLeft,
+                        children: /* @__PURE__ */ jsx(
+                          MoveLeftIcon,
+                          {
+                            className: classNames({
+                              "visual-builder__rotate--90": direction === "vertical",
+                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
+                            }),
+                            disabled: disableFieldActions || disableMoveLeft
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button",
+                        className: multipleFieldToolbarButtonClasses,
+                        "data-tooltip": direction === "vertical" ? "Move down" : "Move right",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleMoveInstance(
+                            fieldMetadata,
+                            "next"
+                          );
+                        },
+                        disabled: disableFieldActions || disableMoveRight,
+                        children: /* @__PURE__ */ jsx(
+                          MoveRightIcon,
+                          {
+                            className: classNames({
+                              "visual-builder__rotate--90": direction === "vertical",
+                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
+                            }),
+                            disabled: disableFieldActions || disableMoveRight
+                          }
+                        )
+                      }
+                    ),
+                    isModalEditable ? editButton : null,
+                    formButton,
+                    isReplaceAllowed ? replaceButton : null,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button",
+                        className: multipleFieldToolbarButtonClasses,
+                        "data-tooltip": "Delete",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleDeleteInstance(fieldMetadata);
+                        },
+                        disabled: disableFieldActions,
+                        children: /* @__PURE__ */ jsx(DeleteIcon, {})
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    isModalEditable ? editButton : null,
+                    isReplaceAllowed ? replaceButton : null,
+                    formButton,
+                    fieldSchema ? /* @__PURE__ */ jsx(
+                      CommentIcon,
+                      {
+                        fieldMetadata,
+                        fieldSchema,
+                        invertTooltipPosition
+                      }
+                    ) : null
+                  ] }),
                   /* @__PURE__ */ jsx(
-                    "button",
+                    FieldLocationIcon,
                     {
-                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button",
-                      className: multipleFieldToolbarButtonClasses,
-                      "data-tooltip": "Delete",
-                      onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleDeleteInstance(fieldMetadata);
-                      },
-                      disabled: disableFieldActions,
-                      children: /* @__PURE__ */ jsx(DeleteIcon, {})
+                      fieldLocationData,
+                      multipleFieldToolbarButtonClasses,
+                      handleMoreIconClick,
+                      moreButtonRef,
+                      toolbarRef,
+                      domEditStack
                     }
                   )
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  isModalEditable ? editButton : null,
-                  isReplaceAllowed ? replaceButton : null,
-                  formButton,
-                  fieldSchema ? /* @__PURE__ */ jsx(
-                    CommentIcon,
-                    {
-                      fieldMetadata,
-                      fieldSchema,
-                      invertTooltipPosition
-                    }
-                  ) : null
                 ] })
-              ] })
-            }
-          )
-        }
-      )
+              }
+            )
+          }
+        ),
+        displayAllApps && /* @__PURE__ */ jsx(
+          FieldLocationAppList,
+          {
+            toolbarRef,
+            apps: (fieldLocationData == null ? void 0 : fieldLocationData.apps) || [],
+            position: appListPosition,
+            domEditStack,
+            setDisplayAllApps,
+            displayAllApps
+          }
+        )
+      ]
     }
   );
 }

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

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

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

@@ -38,6 +38,7 @@ var import_visualBuilder = require("../visualBuilder.style.cjs");
 var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
 var import_multipleElementAddButton = require("../utils/multipleElementAddButton.cjs");
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
+var import_lodash_es = require("lodash-es");
 var import_jsx_runtime = require("preact/jsx-runtime");
 function EmptyBlock(props) {
   const { details } = props;
@@ -72,9 +73,20 @@ function EmptyBlock(props) {
               (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__empty-block-title"]
             ),
             children: [
-              "There are no ",
-              blockParentName.toLowerCase(),
-              " on this page yet. Click the button below to add one."
+              "This page doesn\u2019t have any",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: (0, import_classnames.default)(
+                    "visual-builder__empty-block-field-name",
+                    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__empty-block-field-name"]
+                  ),
+                  children: (0, import_lodash_es.startCase)((0, import_lodash_es.toLower)(blockParentName))
+                }
+              ),
+              " ",
+              "added. Click the button below to add one."
             ]
           }
         ),
@@ -89,8 +101,17 @@ function EmptyBlock(props) {
             type: "button",
             "data-testid": "visual-builder__empty-block-add-button",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "fas fa-plus" }),
-              " \xA0",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: (0, import_classnames.default)(
+                    "visual-builder__empty-block-plus-icon",
+                    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__empty-block-plus-icon"]
+                  ),
+                  children: "+"
+                }
+              ),
+              "\xA0 Add ",
               blockParentName
             ]
           }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n                type=\"button\"\n                data-testid=\"visual-builder__empty-block-add-button\"\n            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,2BAAoC;AACpC,sCAAqC;AACrC,sCAAiD;AAEjD,yBAA+C;AAoCnC;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AArB1C;AAsBQ,YAAM,qCAAAA,YAAA,mBAA0B;AAAA,MAC5B,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA;AAEJ,0EAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YACL,eAAY;AAAA,YAEZ;AAAA,0DAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":["visualBuilderPostMessage","classNames"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\nimport { startCase, toLower } from \"lodash-es\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                This page doesn’t have any{\" \"}\n                <span\n                    className={classNames(\n                        \"visual-builder__empty-block-field-name\",\n                        visualBuilderStyles()[\n                            \"visual-builder__empty-block-field-name\"\n                        ]\n                    )}\n                >\n                    {startCase(toLower(blockParentName))}\n                </span>{\" \"}\n                added. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n                type=\"button\"\n                data-testid=\"visual-builder__empty-block-add-button\"\n            >\n                <span\n                    className={classNames(\n                        \"visual-builder__empty-block-plus-icon\",\n                        visualBuilderStyles()[\n                            \"visual-builder__empty-block-plus-icon\"\n                        ]\n                    )}\n                >\n                    +\n                </span>\n                &nbsp; Add {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,2BAAoC;AACpC,sCAAqC;AACrC,sCAAiD;AAEjD,yBAA+C;AAE/C,uBAAmC;AAmCvB;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAtB1C;AAuBQ,YAAM,qCAAAA,YAAA,mBAA0B;AAAA,MAC5B,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA;AAEJ,0EAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cAC8B;AAAA,cAC3B;AAAA,gBAAC;AAAA;AAAA,kBACG,eAAW,kBAAAA;AAAA,oBACP;AAAA,wBACA,0CAAoB,EAChB,wCACJ;AAAA,kBACJ;AAAA,kBAEC,8CAAU,0BAAQ,eAAe,CAAC;AAAA;AAAA,cACvC;AAAA,cAAQ;AAAA,cAAI;AAAA;AAAA;AAAA,QAEhB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YACL,eAAY;AAAA,YAEZ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACG,eAAW,kBAAAA;AAAA,oBACP;AAAA,wBACA,0CAAoB,EAChB,uCACJ;AAAA,kBACJ;AAAA,kBACH;AAAA;AAAA,cAED;AAAA,cAAO;AAAA,cACK;AAAA;AAAA;AAAA,QAChB;AAAA;AAAA;AAAA,EACJ;AAER;","names":["visualBuilderPostMessage","classNames"]}