@contentstack/live-preview-utils 3.0.1 → 3.0.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { useSignal } from \"@preact/signals\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n    ALLOWED_MODAL_EDITABLE_FIELD,\n    ALLOWED_REPLACE_FIELDS,\n    DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n    handleDeleteInstance,\n    handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    CaretIcon,\n    DeleteIcon,\n    MoveLeftIcon,\n    MoveRightIcon,\n    ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n    BASE_VARIANT_STATUS,\n    FieldRevertComponent,\n    getFieldVariantStatus,\n    IVariantStatus,\n} from \"./FieldRevert/FieldRevertComponent\";\n\nexport type FieldDetails = Pick<VisualBuilderCslpEventDetails, \"editableElement\" | \"fieldMetadata\">;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n    eventDetails: VisualBuilderCslpEventDetails;\n    hideOverlay: () => void;\n};\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n    // TODO avoid sending whole fieldMetadata\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n        {\n            fieldMetadata,\n        }\n    );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n    const isMultipleInstance =\n        fieldMetadata.multipleFieldMetadata.index > -1 &&\n        fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n    const entryPath = isMultipleInstance\n        ? fieldMetadata.instance.fieldPathWithIndex\n        : fieldMetadata.fieldPathWithIndex;\n\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n        {\n            entry_uid: fieldMetadata.entry_uid,\n            content_type_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n            fieldPath: fieldMetadata.fieldPath,\n            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n            entryPath,\n        }\n    );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n        { fieldMetadata }\n    );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n    const { editableElement, fieldMetadata, cslpData } = eventDetails;\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.TOGGLE_FORM,\n        {\n            fieldMetadata,\n            cslpData,\n        }\n    ).then(() => {\n        visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n            DOMEditStack: getDOMEditStack(editableElement),\n        });\n    });\n}\n\nfunction FieldToolbarComponent(\n    props: MultipleFieldToolbarProps\n): JSX.Element | null {\n    const { eventDetails } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n    const direction = useSignal(\"\");\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const isVariant = !!fieldMetadata?.variant;\n    const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap | null>(\n        null\n    );\n    const [fieldVariantStatus, setFieldVariantStatus] =\n        useState<IVariantStatus>(BASE_VARIANT_STATUS);\n    const [isOpenVariantRevert, setIsOpenVariantRevert] =\n        useState<boolean>(false);\n\n    let isModalEditable = false;\n    let isReplaceAllowed = false;\n    let isMultiple = false;\n    let Icon = null;\n    let fieldType = null;\n    let isWholeMultipleField = false;\n\n    if(fieldSchema) {\n        const { isDisabled } = isFieldDisabled(\n            fieldSchema,\n            {\n                editableElement: targetElement,\n                fieldMetadata\n            }\n        );\n\n        // field is disabled, no actions needed\n        if (isDisabled) {\n            return null;\n        }\n\n        fieldType = getFieldType(fieldSchema);\n        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);\n\n        Icon = fieldIcons[fieldType];\n\n        isMultiple = fieldSchema.multiple || false;\n        if(fieldType === FieldDataType.REFERENCE)\n            isMultiple = (fieldSchema as IReferenceContentTypeSchema).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 = isMultiple &&\n        (fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.instance.fieldPathWithIndex ||\n            fieldMetadata.multipleFieldMetadata?.index === -1);\n\n        if (DEFAULT_MULTIPLE_FIELDS.includes(fieldType) && isWholeMultipleField) {\n            return null;\n        }\n    }\n\n    direction.value = getChildrenDirection(targetElement, parentPath);\n\n    const invertTooltipPosition =\n        targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n    const editButton = Icon ? (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__button--edit\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Edit\"}\n            onClick={(e) => {\n                // TODO the listener for field path is attached to the common parent requiring\n                // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n                e.preventDefault();\n                e.stopPropagation();\n                handleEdit(fieldMetadata);\n            }}\n        >\n            <Icon />\n        </button>\n    ) : null;\n\n    const replaceButton = fieldType ? (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Replace\"}\n            data-testid={`visual-builder-replace-${fieldType}`}\n            onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n                if (fieldType === FieldDataType.REFERENCE) {\n                    handleReplaceReference(fieldMetadata);\n                    return;\n                } else if (fieldType === FieldDataType.FILE) {\n                    handleReplaceAsset(fieldMetadata);\n                    return;\n                }\n            }}\n        >\n            <ReplaceAssetIcon />\n        </button>\n    ) : null;\n\n    const formButton = (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Form\"}\n            data-testid={`visual-builder-form`}\n            onClick={(e) => {\n                handleFormFieldFocus(eventDetails);\n            }}\n        >\n            <FormIcon />\n        </button>\n    );\n\n    const toggleVariantDropdown = () => {\n        setIsOpenVariantRevert(!isOpenVariantRevert);\n    };\n\n    const closeVariantDropdown = () => {\n        setIsOpenVariantRevert(false);\n    };\n\n    const variantButton = (\n        <button\n            className={classNames(\n                \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                visualBuilderStyles()[\"visual-builder__variant-button\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Variant Revert\"}\n            data-testid={`visual-builder-canvas-variant-revert`}\n            onClick={toggleVariantDropdown}\n        >\n            <VariantIcon />\n            <CaretIcon open={isOpenVariantRevert} />\n        </button>\n    );\n\n    const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n    const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n    const disableMoveLeft = indexOfElement === 0; // first element\n    const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n    useEffect(() => {\n        async function fetchFieldSchema() {\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                fieldMetadata.content_type_uid,\n                fieldMetadata.fieldPath\n            );\n            if (fieldSchema) {\n                setFieldSchema(fieldSchema);\n            }\n            const variantStatus = await getFieldVariantStatus(\n                fieldMetadata.fieldPathWithIndex\n            );\n            setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n        }\n        fetchFieldSchema();\n    }, [fieldMetadata]);\n\n    useEffect(() => {\n        visualBuilderPostMessage?.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args: { data: { path: string } }) => {\n            if(args.data?.path === fieldMetadata.instance.fieldPathWithIndex){\n                props.hideOverlay()\n            }\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            {isVariant && (\n                <FieldRevertComponent\n                    fieldDataName={fieldMetadata.fieldPathWithIndex}\n                    fieldMetadata={fieldMetadata}\n                    variantStatus={fieldVariantStatus}\n                    isOpen={isOpenVariantRevert}\n                    closeDropdown={closeVariantDropdown}\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 ? variantButton : 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.value === \"vertical\"\n                                            ? \"Move up\"\n                                            : \"Move left\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"previous\"\n                                        );\n                                    }}\n                                    disabled={disableMoveLeft}\n                                >\n                                    <MoveLeftIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction.value === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction.value === \"vertical\",\n                                        })}\n                                        disabled={disableMoveLeft}\n                                    />\n                                </button>\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction.value === \"vertical\"\n                                            ? \"Move down\"\n                                            : \"Move right\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"next\"\n                                        );\n                                    }}\n                                    disabled={disableMoveRight}\n                                >\n                                    <MoveRightIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction.value === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction.value === \"vertical\",\n                                        })}\n                                        disabled={disableMoveRight}\n                                    />\n                                </button>\n\n                                {isModalEditable ? editButton : null}\n                                {formButton}\n                                {isReplaceAllowed ? replaceButton : null}\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\"Delete\"}\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleDeleteInstance(fieldMetadata);\n                                    }}\n                                >\n                                    <DeleteIcon />\n                                </button>\n                            </>\n                        ) : (\n                            <>\n                                {isModalEditable ? editButton : null}\n                                {isReplaceAllowed ? replaceButton : null}\n                                {formButton}\n                                {fieldSchema ? (\n                                    <CommentIcon\n                                        fieldMetadata={fieldMetadata}\n                                        fieldSchema={fieldSchema}\n                                        invertTooltipPosition={\n                                            invertTooltipPosition\n                                        }\n                                    />\n                                ) : null}\n                            </>\n                        )}\n                    </>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA0B;AAE1B,kCAAiC;AACjC,uBAIO;AACP,0BAA6B;AAC7B,8BAGO;AACP,sCAAqC;AACrC,mBAA+C;AAC/C,yBAA+C;AAC/C,mBAMO;AACP,oBAA2B;AAC3B,wBAAuB;AACvB,2BAAoC;AACpC,yBAAwB;AACxB,oBAA2C;AAC3C,4BAA+B;AAC/B,6BAAgC;AAGhC,IAAAA,gBAAyB;AACzB,gCAAgC;AAChC,qBAA4B;AAC5B,kCAKO;AAgKK;AA5JZ,IAAM,0BAA0B;AAOhC,SAAS,mBAAmB,eAAyB;AAEjD,kCAAAC,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B;AAAA,MACI;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,SAAS,uBAAuB,eAAyB;AACrD,QAAM,qBACF,cAAc,sBAAsB,QAAQ,MAC5C,cAAc,uBACV,cAAc,sBAAsB,eAAe;AAC3D,QAAM,YAAY,qBACZ,cAAc,SAAS,qBACvB,cAAc;AAEpB,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B;AAAA,MACI,WAAW,cAAc;AAAA,MACzB,kBAAkB,cAAc;AAAA,MAChC,QAAQ,cAAc;AAAA,MACtB,WAAW,cAAc;AAAA,MACzB,oBAAoB,cAAc;AAAA,MAClC;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,SAAS,WAAW,eAAyB;AACzC,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,EAAE,cAAc;AAAA,EACpB;AACJ;AAEA,SAAS,qBAAqB,cAA6C;AACvE,QAAM,EAAE,iBAAiB,eAAe,SAAS,IAAI;AACrD,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B;AAAA,MACI;AAAA,MACA;AAAA,IACJ;AAAA,EACJ,EAAE,KAAK,MAAM;AACT,oCAAAA,SAA0B,KAAK,kDAA+B,aAAa;AAAA,MACvE,kBAAc,2CAAgB,eAAe;AAAA,IACjD,CAAC;AAAA,EACL,CAAC;AACL;AAEA,SAAS,sBACL,OACkB;AAClB,QAAM,EAAE,aAAa,IAAI;AACzB,QAAM,EAAE,eAAe,iBAAiB,cAAc,IAAI;AAC1D,QAAM,gBAAY,0BAAU,EAAE;AAC9B,QAAM,aACF,eAAe,uBAAuB,eAAe,mBACrD;AACJ,QAAM,YAAY,CAAC,CAAC,eAAe;AACnC,QAAM,CAAC,aAAa,cAAc,QAAI;AAAA,IAClC;AAAA,EACJ;AACA,QAAM,CAAC,oBAAoB,qBAAqB,QAC5C,wBAAyB,+CAAmB;AAChD,QAAM,CAAC,qBAAqB,sBAAsB,QAC9C,wBAAkB,KAAK;AAE3B,MAAI,kBAAkB;AACtB,MAAI,mBAAmB;AACvB,MAAI,aAAa;AACjB,MAAI,OAAO;AACX,MAAI,YAAY;AAChB,MAAI,uBAAuB;AAE3B,MAAG,aAAa;AACZ,UAAM,EAAE,WAAW,QAAI;AAAA,MACnB;AAAA,MACA;AAAA,QACI,iBAAiB;AAAA,QACjB;AAAA,MACJ;AAAA,IACJ;AAGA,QAAI,YAAY;AACZ,aAAO;AAAA,IACX;AAEA,oBAAY,kCAAa,WAAW;AACpC,sBAAkB,8CAA6B,SAAS,SAAS;AACjE,uBAAmB,wCAAuB,SAAS,SAAS;AAE5D,WAAO,yBAAW,SAAS;AAE3B,iBAAa,YAAY,YAAY;AACrC,QAAG,cAAc,2BAAc;AAC3B,mBAAc,YAA4C,eAAe;AAS7E,2BAAuB,eACtB,cAAc,uBACX,cAAc,SAAS,sBACvB,cAAc,uBAAuB,UAAU;AAEnD,QAAI,yCAAwB,SAAS,SAAS,KAAK,sBAAsB;AACrE,aAAO;AAAA,IACX;AAAA,EACJ;AAEA,YAAU,YAAQ,4BAAAC,SAAqB,eAAe,UAAU;AAEhE,QAAM,wBACF,cAAc,sBAAsB,EAAE,OAAO;AAEjD,QAAM,aAAa,OACf;AAAA,IAAC;AAAA;AAAA,MACG,eAAY;AAAA,MACZ,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,wBAAwB;AAAA,YAC9C,0CAAoB,EAAE,mCAAmC;AAAA,YACzD,0CAAoB,EAAE,8BAA8B;AAAA,YACpD,0CAAoB,EAAE,yBAAyB;AAAA,QAC/C;AAAA,UACI,mCAAmC;AAAA,UACnC,KAAC,0CAAoB,EAAE,iCAAiC,CAAC,GACrD;AAAA,QACR;AAAA,MACJ;AAAA,MACA,gBAAc;AAAA,MACd,SAAS,CAAC,MAAM;AAGZ,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,mBAAW,aAAa;AAAA,MAC5B;AAAA,MAEA,sDAAC,QAAK;AAAA;AAAA,EACV,IACA;AAEJ,QAAM,gBAAgB,YAClB;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,wBAAwB;AAAA,YAC9C,0CAAoB,EAAE,mCAAmC;AAAA,YACzD,0CAAoB,EAAE,yBAAyB;AAAA,QAC/C;AAAA,UACI,mCAAmC;AAAA,UACnC,KAAC,0CAAoB,EAAE,iCAAiC,CAAC,GACrD;AAAA,QACR;AAAA,MACJ;AAAA,MACA,gBAAc;AAAA,MACd,eAAa,0BAA0B,SAAS;AAAA,MAChD,SAAS,CAAC,MAAM;AACZ,UAAE,gBAAgB;AAClB,UAAE,eAAe;AACjB,YAAI,cAAc,2BAAc,WAAW;AACvC,iCAAuB,aAAa;AACpC;AAAA,QACJ,WAAW,cAAc,2BAAc,MAAM;AACzC,6BAAmB,aAAa;AAChC;AAAA,QACJ;AAAA,MACJ;AAAA,MAEA,sDAAC,iCAAiB;AAAA;AAAA,EACtB,IACA;AAEJ,QAAM,aACF;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,wBAAwB;AAAA,YAC9C,0CAAoB,EAAE,mCAAmC;AAAA,YACzD,0CAAoB,EAAE,yBAAyB;AAAA,QAC/C;AAAA,UACI,mCAAmC;AAAA,UACnC,KAAC,0CAAoB,EAAE,iCAAiC,CAAC,GACrD;AAAA,QACR;AAAA,MACJ;AAAA,MACA,gBAAc;AAAA,MACd,eAAa;AAAA,MACb,SAAS,CAAC,MAAM;AACZ,6BAAqB,YAAY;AAAA,MACrC;AAAA,MAEA,sDAAC,0BAAS;AAAA;AAAA,EACd;AAGJ,QAAM,wBAAwB,MAAM;AAChC,2BAAuB,CAAC,mBAAmB;AAAA,EAC/C;AAEA,QAAM,uBAAuB,MAAM;AAC/B,2BAAuB,KAAK;AAAA,EAChC;AAEA,QAAM,gBACF;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,wBAAwB;AAAA,YAC9C,0CAAoB,EAAE,mCAAmC;AAAA,YACzD,0CAAoB,EAAE,yBAAyB;AAAA,YAC/C,0CAAoB,EAAE,gCAAgC;AAAA,QACtD;AAAA,UACI,mCAAmC;AAAA,UACnC,KAAC,0CAAoB,EAAE,iCAAiC,CAAC,GACrD;AAAA,QACR;AAAA,MACJ;AAAA,MACA,gBAAc;AAAA,MACd,eAAa;AAAA,MACb,SAAS;AAAA,MAET;AAAA,oDAAC,8BAAY;AAAA,QACb,4CAAC,0BAAU,MAAM,qBAAqB;AAAA;AAAA;AAAA,EAC1C;AAGJ,QAAM,oBAAoB,eAAe,YAAY,qBAAqB;AAC1E,QAAM,iBAAiB,eAAe,uBAAuB;AAE7D,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,mBAAmB,mBAAmB,oBAAoB;AAEhE,+BAAU,MAAM;AACZ,mBAAe,mBAAmB;AAC9B,YAAMC,eAAc,MAAM,qCAAe;AAAA,QACrC,cAAc;AAAA,QACd,cAAc;AAAA,MAClB;AACA,UAAIA,cAAa;AACb,uBAAeA,YAAW;AAAA,MAC9B;AACA,YAAM,gBAAgB,UAAM;AAAA,QACxB,cAAc;AAAA,MAClB;AACA,4BAAsB,iBAAiB,+CAAmB;AAAA,IAC9D;AACA,qBAAiB;AAAA,EACrB,GAAG,CAAC,aAAa,CAAC;AAElB,+BAAU,MAAM;AACZ,oCAAAH,SAA0B,GAAG,kDAA+B,iBAAiB,CAAC,SAAqC;AAC/G,UAAG,KAAK,MAAM,SAAS,cAAc,SAAS,oBAAmB;AAC7D,cAAM,YAAY;AAAA,MACtB;AAAA,IACJ,CAAC;AAAA,EACL,GAAG,CAAC,CAAC;AAEL,QAAM,wCAAoC,kBAAAE;AAAA,IACtC;AAAA,QACA,0CAAoB,EAAE,wBAAwB;AAAA,QAC9C,0CAAoB,EAAE,mCAAmC;AAAA,QACzD,0CAAoB,EAAE,yBAAyB;AAAA,IAC/C;AAAA,MACI,mCAAmC;AAAA,MACnC,KAAC,0CAAoB,EAAE,iCAAiC,CAAC,GACrD;AAAA,IACR;AAAA,EACJ;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,MAEC;AAAA,qBACG;AAAA,UAAC;AAAA;AAAA,YACG,eAAe,cAAc;AAAA,YAC7B;AAAA,YACA,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,eAAe;AAAA;AAAA,QACnB;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,yDACJ;AAAA,YACJ;AAAA,YACA,eAAY;AAAA,YAEZ;AAAA,cAAC;AAAA;AAAA,gBACG,eAAW,kBAAAA;AAAA,kBACP;AAAA,sBACA,0CAAoB,EAChB,+CACJ;AAAA,gBACJ;AAAA,gBAEA,sFACK;AAAA,8BAAY,gBAAgB;AAAA,kBAC5B,cAAc,CAAC,uBACZ,4EACI;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAY;AAAA,wBACZ,WACI;AAAA,wBAEJ,gBACI,UAAU,UAAU,aACd,YACA;AAAA,wBAEV,SAAS,CAAC,MAAM;AACZ,4BAAE,eAAe;AACjB,4BAAE,gBAAgB;AAClB;AAAA,4BACI;AAAA,4BACA;AAAA,0BACJ;AAAA,wBACJ;AAAA,wBACA,UAAU;AAAA,wBAEV;AAAA,0BAAC;AAAA;AAAA,4BACG,eAAW,kBAAAA,SAAW;AAAA,8BAClB,8BACI,UAAU,UAAU;AAAA,8BACxB,KAAC,0CAAoB,EACjB,4BACJ,CAAC,GAAG,UAAU,UAAU;AAAA,4BAC5B,CAAC;AAAA,4BACD,UAAU;AAAA;AAAA,wBACd;AAAA;AAAA,oBACJ;AAAA,oBAEA;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAY;AAAA,wBACZ,WACI;AAAA,wBAEJ,gBACI,UAAU,UAAU,aACd,cACA;AAAA,wBAEV,SAAS,CAAC,MAAM;AACZ,4BAAE,eAAe;AACjB,4BAAE,gBAAgB;AAClB;AAAA,4BACI;AAAA,4BACA;AAAA,0BACJ;AAAA,wBACJ;AAAA,wBACA,UAAU;AAAA,wBAEV;AAAA,0BAAC;AAAA;AAAA,4BACG,eAAW,kBAAAA,SAAW;AAAA,8BAClB,8BACI,UAAU,UAAU;AAAA,8BACxB,KAAC,0CAAoB,EACjB,4BACJ,CAAC,GAAG,UAAU,UAAU;AAAA,4BAC5B,CAAC;AAAA,4BACD,UAAU;AAAA;AAAA,wBACd;AAAA;AAAA,oBACJ;AAAA,oBAEC,kBAAkB,aAAa;AAAA,oBAC/B;AAAA,oBACA,mBAAmB,gBAAgB;AAAA,oBAEpC;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAY;AAAA,wBACZ,WACI;AAAA,wBAEJ,gBAAc;AAAA,wBACd,SAAS,CAAC,MAAM;AACZ,4BAAE,eAAe;AACjB,4BAAE,gBAAgB;AAClB,4EAAqB,aAAa;AAAA,wBACtC;AAAA,wBAEA,sDAAC,2BAAW;AAAA;AAAA,oBAChB;AAAA,qBACJ,IAEA,4EACK;AAAA,sCAAkB,aAAa;AAAA,oBAC/B,mBAAmB,gBAAgB;AAAA,oBACnC;AAAA,oBACA,cACG;AAAA,sBAAC,mBAAAE;AAAA,sBAAA;AAAA,wBACG;AAAA,wBACA;AAAA,wBACA;AAAA;AAAA,oBAGJ,IACA;AAAA,qBACR;AAAA,mBAER;AAAA;AAAA,YACJ;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,uBAAQ;","names":["import_icons","visualBuilderPostMessage","getChildrenDirection","classNames","fieldSchema","CommentIcon"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n    ALLOWED_MODAL_EDITABLE_FIELD,\n    ALLOWED_REPLACE_FIELDS,\n    DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n    handleDeleteInstance,\n    handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    CaretIcon,\n    DeleteIcon,\n    MoveLeftIcon,\n    MoveRightIcon,\n    ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n    BASE_VARIANT_STATUS,\n    FieldRevertComponent,\n    getFieldVariantStatus,\n    IVariantStatus,\n} from \"./FieldRevert/FieldRevertComponent\";\n\nexport type FieldDetails = Pick<\n    VisualBuilderCslpEventDetails,\n    \"editableElement\" | \"fieldMetadata\"\n>;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n    eventDetails: VisualBuilderCslpEventDetails;\n    hideOverlay: () => void;\n}\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n    // TODO avoid sending whole fieldMetadata\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n        {\n            fieldMetadata,\n        }\n    );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n    const isMultipleInstance =\n        fieldMetadata.multipleFieldMetadata.index > -1 &&\n        fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n    const entryPath = isMultipleInstance\n        ? fieldMetadata.instance.fieldPathWithIndex\n        : fieldMetadata.fieldPathWithIndex;\n\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n        {\n            entry_uid: fieldMetadata.entry_uid,\n            content_type_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n            fieldPath: fieldMetadata.fieldPath,\n            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n            entryPath,\n        }\n    );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n        { fieldMetadata }\n    );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n    const { editableElement, fieldMetadata, cslpData } = eventDetails;\n    visualBuilderPostMessage\n        ?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {\n            fieldMetadata,\n            cslpData,\n        })\n        .then(() => {\n            visualBuilderPostMessage?.send(\n                VisualBuilderPostMessageEvents.FOCUS_FIELD,\n                {\n                    DOMEditStack: getDOMEditStack(editableElement),\n                }\n            );\n        });\n}\n\nfunction FieldToolbarComponent(\n    props: MultipleFieldToolbarProps\n): JSX.Element | null {\n    const { eventDetails } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const direction = getChildrenDirection(targetElement, parentPath);\n    const isVariant = !!fieldMetadata?.variant;\n    const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap | null>(\n        null\n    );\n    const [fieldVariantStatus, setFieldVariantStatus] =\n        useState<IVariantStatus>(BASE_VARIANT_STATUS);\n    const [isOpenVariantRevert, setIsOpenVariantRevert] =\n        useState<boolean>(false);\n\n    let isModalEditable = false;\n    let isReplaceAllowed = false;\n    let isMultiple = false;\n    let Icon = null;\n    let fieldType = null;\n    let isWholeMultipleField = false;\n\n    if (fieldSchema) {\n        const { isDisabled } = isFieldDisabled(fieldSchema, {\n            editableElement: targetElement,\n            fieldMetadata,\n        });\n\n        // field is disabled, no actions needed\n        if (isDisabled) {\n            return null;\n        }\n\n        fieldType = getFieldType(fieldSchema);\n        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);\n\n        Icon = fieldIcons[fieldType];\n\n        isMultiple = fieldSchema.multiple || false;\n        if (fieldType === FieldDataType.REFERENCE)\n            isMultiple = (fieldSchema as IReferenceContentTypeSchema)\n                .field_metadata.ref_multiple;\n\n        // field is multiple but an instance is not selected\n        // instead the whole field (all instances) is selected.\n        // Currently, when whole featured_blogs is selected in canvas,\n        // the fieldPathWithIndex and instance.fieldPathWithIndex are the same\n        // cannot rely on -1 index, as the non-negative index then refers to the index of\n        // the featured_blogs block in page_components\n        // It is not needed except taxanomy.\n        isWholeMultipleField =\n            isMultiple &&\n            (fieldMetadata.fieldPathWithIndex ===\n                fieldMetadata.instance.fieldPathWithIndex ||\n                fieldMetadata.multipleFieldMetadata?.index === -1);\n\n        if (\n            DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&\n            isWholeMultipleField\n        ) {\n            return null;\n        }\n    }\n\n    const invertTooltipPosition =\n        targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n    const editButton = Icon ? (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__button--edit\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Edit\"}\n            onClick={(e) => {\n                // TODO the listener for field path is attached to the common parent requiring\n                // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n                e.preventDefault();\n                e.stopPropagation();\n                handleEdit(fieldMetadata);\n            }}\n        >\n            <Icon />\n        </button>\n    ) : null;\n\n    const replaceButton = fieldType ? (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Replace\"}\n            data-testid={`visual-builder-replace-${fieldType}`}\n            onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n                if (fieldType === FieldDataType.REFERENCE) {\n                    handleReplaceReference(fieldMetadata);\n                    return;\n                } else if (fieldType === FieldDataType.FILE) {\n                    handleReplaceAsset(fieldMetadata);\n                    return;\n                }\n            }}\n        >\n            <ReplaceAssetIcon />\n        </button>\n    ) : null;\n\n    const formButton = (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Form\"}\n            data-testid={`visual-builder-form`}\n            onClick={(e) => {\n                handleFormFieldFocus(eventDetails);\n            }}\n        >\n            <FormIcon />\n        </button>\n    );\n\n    const toggleVariantDropdown = () => {\n        setIsOpenVariantRevert(!isOpenVariantRevert);\n    };\n\n    const closeVariantDropdown = () => {\n        setIsOpenVariantRevert(false);\n    };\n\n    const variantButton = (\n        <button\n            className={classNames(\n                \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                visualBuilderStyles()[\"visual-builder__variant-button\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Variant Revert\"}\n            data-testid={`visual-builder-canvas-variant-revert`}\n            onClick={toggleVariantDropdown}\n        >\n            <VariantIcon />\n            <CaretIcon open={isOpenVariantRevert} />\n        </button>\n    );\n\n    const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n    const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n    const disableMoveLeft = indexOfElement === 0; // first element\n    const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n    useEffect(() => {\n        async function fetchFieldSchema() {\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                fieldMetadata.content_type_uid,\n                fieldMetadata.fieldPath\n            );\n            if (fieldSchema) {\n                setFieldSchema(fieldSchema);\n            }\n            const variantStatus = await getFieldVariantStatus(fieldMetadata);\n            setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n        }\n        fetchFieldSchema();\n    }, [fieldMetadata]);\n\n    useEffect(() => {\n        const event = visualBuilderPostMessage?.on(\n            VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n            (args: { data: { path: string } }) => {\n                if (\n                    args.data?.path ===\n                    fieldMetadata.instance.fieldPathWithIndex\n                ) {\n                    props.hideOverlay();\n                }\n            }\n        );\n        return () => {\n            event?.unregister();\n        };\n    }, []);\n\n    const multipleFieldToolbarButtonClasses = classNames(\n        \"visual-builder__button visual-builder__button--secondary\",\n        visualBuilderStyles()[\"visual-builder__button\"],\n        visualBuilderStyles()[\"visual-builder__button--secondary\"],\n        visualBuilderStyles()[\"visual-builder__tooltip\"],\n        {\n            \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n            [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                invertTooltipPosition,\n        }\n    );\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__field-toolbar-container\",\n                visualBuilderStyles()[\"visual-builder__field-toolbar-container\"]\n            )}\n        >\n            {isVariant && (\n                <FieldRevertComponent\n                    fieldDataName={fieldMetadata.fieldPathWithIndex}\n                    fieldMetadata={fieldMetadata}\n                    variantStatus={fieldVariantStatus}\n                    isOpen={isOpenVariantRevert}\n                    closeDropdown={closeVariantDropdown}\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 ? variantButton : null}\n                        {isMultiple && !isWholeMultipleField ? (\n                            <>\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move up\"\n                                            : \"Move left\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"previous\"\n                                        );\n                                    }}\n                                    disabled={disableMoveLeft}\n                                >\n                                    <MoveLeftIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveLeft}\n                                    />\n                                </button>\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction === \"vertical\"\n                                            ? \"Move down\"\n                                            : \"Move right\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"next\"\n                                        );\n                                    }}\n                                    disabled={disableMoveRight}\n                                >\n                                    <MoveRightIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction === \"vertical\",\n                                        })}\n                                        disabled={disableMoveRight}\n                                    />\n                                </button>\n\n                                {isModalEditable ? editButton : null}\n                                {formButton}\n                                {isReplaceAllowed ? replaceButton : null}\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\"Delete\"}\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleDeleteInstance(fieldMetadata);\n                                    }}\n                                >\n                                    <DeleteIcon />\n                                </button>\n                            </>\n                        ) : (\n                            <>\n                                {isModalEditable ? editButton : null}\n                                {isReplaceAllowed ? replaceButton : null}\n                                {formButton}\n                                {fieldSchema ? (\n                                    <CommentIcon\n                                        fieldMetadata={fieldMetadata}\n                                        fieldSchema={fieldSchema}\n                                        invertTooltipPosition={\n                                            invertTooltipPosition\n                                        }\n                                    />\n                                ) : null}\n                            </>\n                        )}\n                    </>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":"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","names":["import_icons","visualBuilderPostMessage","getChildrenDirection","classNames","fieldSchema","CommentIcon"]}

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

@@ -1,7 +1,6 @@
 import "../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/components/FieldToolbar.tsx
-import { useSignal } from "@preact/signals";
 import getChildrenDirection from "../utils/getChildrenDirection.js";
 import {
   ALLOWED_MODAL_EDITABLE_FIELD,
@@ -71,23 +70,23 @@ function handleEdit(fieldMetadata) {
 }
 function handleFormFieldFocus(eventDetails) {
   const { editableElement, fieldMetadata, cslpData } = eventDetails;
-  visualBuilderPostMessage?.send(
-    VisualBuilderPostMessageEvents.TOGGLE_FORM,
-    {
-      fieldMetadata,
-      cslpData
-    }
-  ).then(() => {
-    visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {
-      DOMEditStack: getDOMEditStack(editableElement)
-    });
+  visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {
+    fieldMetadata,
+    cslpData
+  }).then(() => {
+    visualBuilderPostMessage?.send(
+      VisualBuilderPostMessageEvents.FOCUS_FIELD,
+      {
+        DOMEditStack: getDOMEditStack(editableElement)
+      }
+    );
   });
 }
 function FieldToolbarComponent(props) {
   const { eventDetails } = props;
   const { fieldMetadata, editableElement: targetElement } = eventDetails;
-  const direction = useSignal("");
   const parentPath = fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue || "";
+  const direction = getChildrenDirection(targetElement, parentPath);
   const isVariant = !!fieldMetadata?.variant;
   const [fieldSchema, setFieldSchema] = useState(
     null
@@ -101,13 +100,10 @@ function FieldToolbarComponent(props) {
   let fieldType = null;
   let isWholeMultipleField = false;
   if (fieldSchema) {
-    const { isDisabled } = isFieldDisabled(
-      fieldSchema,
-      {
-        editableElement: targetElement,
-        fieldMetadata
-      }
-    );
+    const { isDisabled } = isFieldDisabled(fieldSchema, {
+      editableElement: targetElement,
+      fieldMetadata
+    });
     if (isDisabled) {
       return null;
     }
@@ -123,7 +119,6 @@ function FieldToolbarComponent(props) {
       return null;
     }
   }
-  direction.value = getChildrenDirection(targetElement, parentPath);
   const invertTooltipPosition = targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
   const editButton = Icon ? /* @__PURE__ */ jsx(
     "button",
@@ -241,19 +236,23 @@ function FieldToolbarComponent(props) {
       if (fieldSchema2) {
         setFieldSchema(fieldSchema2);
       }
-      const variantStatus = await getFieldVariantStatus(
-        fieldMetadata.fieldPathWithIndex
-      );
+      const variantStatus = await getFieldVariantStatus(fieldMetadata);
       setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);
     }
     fetchFieldSchema();
   }, [fieldMetadata]);
   useEffect(() => {
-    visualBuilderPostMessage?.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args) => {
-      if (args.data?.path === fieldMetadata.instance.fieldPathWithIndex) {
-        props.hideOverlay();
+    const event = visualBuilderPostMessage?.on(
+      VisualBuilderPostMessageEvents.DELETE_INSTANCE,
+      (args) => {
+        if (args.data?.path === fieldMetadata.instance.fieldPathWithIndex) {
+          props.hideOverlay();
+        }
       }
-    });
+    );
+    return () => {
+      event?.unregister();
+    };
   }, []);
   const multipleFieldToolbarButtonClasses = classNames(
     "visual-builder__button visual-builder__button--secondary",
@@ -306,7 +305,7 @@ function FieldToolbarComponent(props) {
                       {
                         "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button",
                         className: multipleFieldToolbarButtonClasses,
-                        "data-tooltip": direction.value === "vertical" ? "Move up" : "Move left",
+                        "data-tooltip": direction === "vertical" ? "Move up" : "Move left",
                         onClick: (e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -320,8 +319,8 @@ function FieldToolbarComponent(props) {
                           MoveLeftIcon,
                           {
                             className: classNames({
-                              "visual-builder__rotate--90": direction.value === "vertical",
-                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction.value === "vertical"
+                              "visual-builder__rotate--90": direction === "vertical",
+                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
                             }),
                             disabled: disableMoveLeft
                           }
@@ -333,7 +332,7 @@ function FieldToolbarComponent(props) {
                       {
                         "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button",
                         className: multipleFieldToolbarButtonClasses,
-                        "data-tooltip": direction.value === "vertical" ? "Move down" : "Move right",
+                        "data-tooltip": direction === "vertical" ? "Move down" : "Move right",
                         onClick: (e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -347,8 +346,8 @@ function FieldToolbarComponent(props) {
                           MoveRightIcon,
                           {
                             className: classNames({
-                              "visual-builder__rotate--90": direction.value === "vertical",
-                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction.value === "vertical"
+                              "visual-builder__rotate--90": direction === "vertical",
+                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
                             }),
                             disabled: disableMoveRight
                           }

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

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

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

@@ -85,6 +85,7 @@ function EmptyBlock(props) {
               (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__empty-block-add-button"]
             ),
             onClick: () => sendAddInstanceEvent(),
+            type: "button",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "fas fa-plus" }),
               " \xA0",

package/dist/modern/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            >\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;AAClC,UAAM,gCAAAA,SAA0B;AAAA,MAC5B,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,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,YAEpC;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\";\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            >\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;AAClC,UAAM,gCAAAA,SAA0B;AAAA,MAC5B,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,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,YAEL;AAAA,0DAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":["visualBuilderPostMessage","classNames"]}

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

@@ -53,6 +53,7 @@ function EmptyBlock(props) {
               visualBuilderStyles()["visual-builder__empty-block-add-button"]
             ),
             onClick: () => sendAddInstanceEvent(),
+            type: "button",
             children: [
               /* @__PURE__ */ jsx("i", { className: "fas fa-plus" }),
               " \xA0",

package/dist/modern/visualBuilder/components/emptyBlock.js.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            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,wCAAwC;AAEjD,SAAS,sCAAsC;AAoCnC,SAiBI,KAjBJ;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAClC,UAAM,0BAA0B;AAAA,MAC5B,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,qCAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YAEpC;AAAA,kCAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}
+{"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            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,wCAAwC;AAEjD,SAAS,sCAAsC;AAoCnC,SAkBI,KAlBJ;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAClC,UAAM,0BAA0B;AAAA,MAC5B,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,qCAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YAEL;AAAA,kCAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}

package/dist/modern/visualBuilder/generators/generateToolbar.cjs

@@ -63,7 +63,7 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
   focusedToolbarElement.append(wrapper);
 }
 function appendFieldPathDropdown(eventDetails, focusedToolbarElement) {
-  if (document.querySelector("visual-builder__focused-toolbar__field-label-wrapper"))
+  if (document.querySelector(".visual-builder__focused-toolbar__field-label-wrapper"))
     return;
   const { editableElement: targetElement, fieldMetadata } = eventDetails;
   const targetElementDimension = targetElement.getBoundingClientRect();

package/dist/modern/visualBuilder/generators/generateToolbar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\"visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAMO;AAIP,0BAAkC;AAClC,oBAAuB;AACvB,+BAAuC;AAwB/B;AAtBD,SAAS,qBACZ,cACA,uBACA,aACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,uBAAuB,WAAW;AACvE;AAEO,SAAS,mBACZ,cACA,uBACA,aACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,oBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,sDAAsD;AAC5E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,mCACxC,kBAAkB,uBAAuB,SAAS,mCAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,oCAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,iDACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,yBAAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,wCAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,wCAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,wCAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":["FieldToolbarComponent","FieldLabelWrapperComponent"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\".visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAMO;AAIP,0BAAkC;AAClC,oBAAuB;AACvB,+BAAuC;AAwB/B;AAtBD,SAAS,qBACZ,cACA,uBACA,aACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,uBAAuB,WAAW;AACvE;AAEO,SAAS,mBACZ,cACA,uBACA,aACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,oBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,uDAAuD;AAC7E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,mCACxC,kBAAkB,uBAAuB,SAAS,mCAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,oCAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,iDACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,yBAAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,wCAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,wCAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,wCAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":["FieldToolbarComponent","FieldLabelWrapperComponent"]}

package/dist/modern/visualBuilder/generators/generateToolbar.js

@@ -35,7 +35,7 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
   focusedToolbarElement.append(wrapper);
 }
 function appendFieldPathDropdown(eventDetails, focusedToolbarElement) {
-  if (document.querySelector("visual-builder__focused-toolbar__field-label-wrapper"))
+  if (document.querySelector(".visual-builder__focused-toolbar__field-label-wrapper"))
     return;
   const { editableElement: targetElement, fieldMetadata } = eventDetails;
   const targetElementDimension = targetElement.getBoundingClientRect();

package/dist/modern/visualBuilder/generators/generateToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\"visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;AACA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP,OAAO,2BAA2B;AAClC,SAAS,cAAc;AACvB,OAAO,gCAAgC;AAwB/B;AAtBD,SAAS,qBACZ,cACA,uBACA,aACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,uBAAuB,WAAW;AACvE;AAEO,SAAS,mBACZ,cACA,uBACA,aACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,sDAAsD;AAC5E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,kBACxC,kBAAkB,uBAAuB,SAAS,kBAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,mBAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,gCACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,uBAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,uBAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,uBAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\".visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;AACA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP,OAAO,2BAA2B;AAClC,SAAS,cAAc;AACvB,OAAO,gCAAgC;AAwB/B;AAtBD,SAAS,qBACZ,cACA,uBACA,aACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,uBAAuB,WAAW;AACvE;AAEO,SAAS,mBACZ,cACA,uBACA,aACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,uDAAuD;AAC7E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,kBACxC,kBAAkB,uBAAuB,SAAS,kBAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,mBAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,gCACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,uBAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,uBAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,uBAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":[]}

package/dist/modern/visualBuilder/listeners/index.cjs

@@ -91,10 +91,16 @@ function removeEventListeners(params) {
     window.removeEventListener("mousemove", mousemoveHandler);
   }
   if (mouseleaveHandler) {
-    document.documentElement.removeEventListener("mouseleave", mouseleaveHandler);
+    document.documentElement.removeEventListener(
+      "mouseleave",
+      mouseleaveHandler
+    );
   }
   if (mouseenterHandler) {
-    document.documentElement.removeEventListener("mouseenter", mouseenterHandler);
+    document.documentElement.removeEventListener(
+      "mouseenter",
+      mouseenterHandler
+    );
   }
   eventListenersMap.clear();
 }