@contentstack/live-preview-utils 4.1.2 → 4.1.3

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

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

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

@@ -51,6 +51,8 @@ var import_icons2 = require("./icons/index.cjs");
 var import_Tooltip = require("./Tooltip.cjs");
 var import_fetchEntryPermissionsAndStageDetails = require("../utils/fetchEntryPermissionsAndStageDetails.cjs");
 var import_VariantIndicator = require("./VariantIndicator.cjs");
+var import_useRevalidateFieldDataPostMessageEvent = require("../eventManager/useRevalidateFieldDataPostMessageEvent.cjs");
+var import_constants = require("../utils/constants.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 async function getFieldDisplayNames(fieldMetadata) {
   const result = await import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);
@@ -106,7 +108,7 @@ function FieldLabelWrapperComponent(props) {
       const allPaths = (0, import_lodash_es.uniqBy)(
         [
           props.fieldMetadata,
-          ...props.parentPaths.map((path) => {
+          ...props.parentPaths.filter((path) => path).map((path) => {
             return (0, import_cslp.extractDetailsFromCslp)(path);
           })
         ],
@@ -132,12 +134,14 @@ function FieldLabelWrapperComponent(props) {
         const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^="${props.fieldMetadata.content_type_uid}"])`);
         if (domAncestor) {
           const domAncestorCslp = domAncestor.getAttribute("data-cslp");
-          const domAncestorDetails = (0, import_cslp.extractDetailsFromCslp)(domAncestorCslp);
-          const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
-          const domAncestorContentParent = referenceData?.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
-          if (domAncestorContentParent) {
-            referenceFieldName = domAncestorContentParent.referenceFieldName;
-            parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+          if (domAncestorCslp) {
+            const domAncestorDetails = (0, import_cslp.extractDetailsFromCslp)(domAncestorCslp);
+            const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
+            const domAncestorContentParent = referenceData?.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
+            if (domAncestorContentParent) {
+              referenceFieldName = domAncestorContentParent.referenceFieldName;
+              parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+            }
           }
         }
       }
@@ -146,32 +150,76 @@ function FieldLabelWrapperComponent(props) {
         setError(true);
         return;
       }
-      const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } = await (0, import_fetchEntryPermissionsAndStageDetails.fetchEntryPermissionsAndStageDetails)({
+      const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } = await (0, import_fetchEntryPermissionsAndStageDetails.fetchEntryPermissionsAndStageDetails)({
         entryUid: props.fieldMetadata.entry_uid,
         contentTypeUid: props.fieldMetadata.content_type_uid,
         locale: props.fieldMetadata.locale,
-        variantUid: props.fieldMetadata.variant
+        variantUid: props.fieldMetadata.variant,
+        fieldPathWithIndex: props.fieldMetadata.fieldPathWithIndex
       });
       const { isDisabled: fieldDisabled, reason } = (0, import_isFieldDisabled.isFieldDisabled)(
         fieldSchema,
         eventDetails,
+        resolvedVariantPermissions,
         entryAcl,
         entryWorkflowStageDetails
       );
+      const handleLinkVariant = async () => {
+        try {
+          if (fieldSchema.field_metadata?.canLinkVariant) {
+            const result = await import_visualBuilderPostMessage.default?.send(
+              import_postMessage.VisualBuilderPostMessageEvents.OPEN_LINK_VARIANT_MODAL,
+              {
+                contentTypeUid: props.fieldMetadata.content_type_uid
+              }
+            );
+            if (!result || result.type === import_constants.RESULT_TYPES.ERROR) {
+              return;
+            }
+            if (result.type === import_constants.RESULT_TYPES.SUCCESS) {
+              await (0, import_useRevalidateFieldDataPostMessageEvent.handleRevalidateFieldData)();
+            }
+          }
+        } catch (error2) {
+          console.error(
+            "Error in link variant modal flow:",
+            error2
+          );
+        }
+      };
       const currentFieldDisplayName = displayNames2?.[props.fieldMetadata.cslpValue] ?? fieldSchema.display_name;
       const hasParentPaths = !!props?.parentPaths?.length;
       const isVariant = props.fieldMetadata.variant ? true : false;
       setCurrentField({
         text: currentFieldDisplayName,
         contentTypeName: contentTypeName ?? "",
-        icon: fieldDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        icon: fieldDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             className: (0, import_classnames.default)(
               (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip--persistent"]
             ),
-            "data-tooltip": reason,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoIcon, {})
+            "data-tooltip": !reason?.includes(import_isFieldDisabled.DisableReason.CanLinkVariant) ? reason : void 0,
+            children: [
+              reason.includes(import_isFieldDisabled.DisableReason.CanLinkVariant) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__custom-tooltip"],
+                  onClick: handleLinkVariant,
+                  children: (() => {
+                    const [before, after] = reason.split(
+                      import_isFieldDisabled.DisableReason.UnderlinedAndClickableWord
+                    );
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      before,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { textDecoration: "underline" }, children: import_isFieldDisabled.DisableReason.UnderlinedAndClickableWord }),
+                      after
+                    ] });
+                  })()
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoIcon, {})
+            ]
           }
         ) : hasParentPaths ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
         isReference,

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

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

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

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { useEffect, useState } from "preact/compat";
 import { extractDetailsFromCslp } from "../../cslp/index.js";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
-import { isFieldDisabled } from "../utils/isFieldDisabled.js";
+import { DisableReason, isFieldDisabled } from "../utils/isFieldDisabled.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { CaretIcon, CaretRightIcon, InfoIcon } from "./icons/index.js";
 import { LoadingIcon } from "./icons/loading.js";
@@ -19,6 +19,8 @@ import { ContentTypeIcon } from "./icons/index.js";
 import { ToolbarTooltip } from "./Tooltip.js";
 import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails.js";
 import { VariantIndicator } from "./VariantIndicator.js";
+import { handleRevalidateFieldData } from "../eventManager/useRevalidateFieldDataPostMessageEvent.js";
+import { RESULT_TYPES } from "../utils/constants.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 async function getFieldDisplayNames(fieldMetadata) {
   const result = await visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);
@@ -74,7 +76,7 @@ function FieldLabelWrapperComponent(props) {
       const allPaths = uniqBy(
         [
           props.fieldMetadata,
-          ...props.parentPaths.map((path) => {
+          ...props.parentPaths.filter((path) => path).map((path) => {
             return extractDetailsFromCslp(path);
           })
         ],
@@ -100,12 +102,14 @@ function FieldLabelWrapperComponent(props) {
         const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^="${props.fieldMetadata.content_type_uid}"])`);
         if (domAncestor) {
           const domAncestorCslp = domAncestor.getAttribute("data-cslp");
-          const domAncestorDetails = extractDetailsFromCslp(domAncestorCslp);
-          const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
-          const domAncestorContentParent = referenceData?.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
-          if (domAncestorContentParent) {
-            referenceFieldName = domAncestorContentParent.referenceFieldName;
-            parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+          if (domAncestorCslp) {
+            const domAncestorDetails = extractDetailsFromCslp(domAncestorCslp);
+            const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
+            const domAncestorContentParent = referenceData?.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
+            if (domAncestorContentParent) {
+              referenceFieldName = domAncestorContentParent.referenceFieldName;
+              parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+            }
           }
         }
       }
@@ -114,32 +118,76 @@ function FieldLabelWrapperComponent(props) {
         setError(true);
         return;
       }
-      const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } = await fetchEntryPermissionsAndStageDetails({
+      const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } = await fetchEntryPermissionsAndStageDetails({
         entryUid: props.fieldMetadata.entry_uid,
         contentTypeUid: props.fieldMetadata.content_type_uid,
         locale: props.fieldMetadata.locale,
-        variantUid: props.fieldMetadata.variant
+        variantUid: props.fieldMetadata.variant,
+        fieldPathWithIndex: props.fieldMetadata.fieldPathWithIndex
       });
       const { isDisabled: fieldDisabled, reason } = isFieldDisabled(
         fieldSchema,
         eventDetails,
+        resolvedVariantPermissions,
         entryAcl,
         entryWorkflowStageDetails
       );
+      const handleLinkVariant = async () => {
+        try {
+          if (fieldSchema.field_metadata?.canLinkVariant) {
+            const result = await visualBuilderPostMessage?.send(
+              VisualBuilderPostMessageEvents.OPEN_LINK_VARIANT_MODAL,
+              {
+                contentTypeUid: props.fieldMetadata.content_type_uid
+              }
+            );
+            if (!result || result.type === RESULT_TYPES.ERROR) {
+              return;
+            }
+            if (result.type === RESULT_TYPES.SUCCESS) {
+              await handleRevalidateFieldData();
+            }
+          }
+        } catch (error2) {
+          console.error(
+            "Error in link variant modal flow:",
+            error2
+          );
+        }
+      };
       const currentFieldDisplayName = displayNames2?.[props.fieldMetadata.cslpValue] ?? fieldSchema.display_name;
       const hasParentPaths = !!props?.parentPaths?.length;
       const isVariant = props.fieldMetadata.variant ? true : false;
       setCurrentField({
         text: currentFieldDisplayName,
         contentTypeName: contentTypeName ?? "",
-        icon: fieldDisabled ? /* @__PURE__ */ jsx(
+        icon: fieldDisabled ? /* @__PURE__ */ jsxs(
           "div",
           {
             className: classNames(
               visualBuilderStyles()["visual-builder__tooltip--persistent"]
             ),
-            "data-tooltip": reason,
-            children: /* @__PURE__ */ jsx(InfoIcon, {})
+            "data-tooltip": !reason?.includes(DisableReason.CanLinkVariant) ? reason : void 0,
+            children: [
+              reason.includes(DisableReason.CanLinkVariant) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: visualBuilderStyles()["visual-builder__custom-tooltip"],
+                  onClick: handleLinkVariant,
+                  children: (() => {
+                    const [before, after] = reason.split(
+                      DisableReason.UnderlinedAndClickableWord
+                    );
+                    return /* @__PURE__ */ jsxs(Fragment, { children: [
+                      before,
+                      /* @__PURE__ */ jsx("span", { style: { textDecoration: "underline" }, children: DisableReason.UnderlinedAndClickableWord }),
+                      after
+                    ] });
+                  })()
+                }
+              ),
+              /* @__PURE__ */ jsx(InfoIcon, {})
+            ]
           }
         ) : hasParentPaths ? /* @__PURE__ */ jsx(CaretIcon, {}) : /* @__PURE__ */ jsx(Fragment, {}),
         isReference,