@contentstack/live-preview-utils 4.2.0 → 4.3.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/fieldLabelWrapper.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { 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":["displayNames","error"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/fieldLabelWrapper.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { extractDetailsFromCslp, isValidCslp } 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 (isValidCslp(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":["displayNames","error"]}

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts
 var useRecalculateVariantDataCSLPValues_exports = {};
 __export(useRecalculateVariantDataCSLPValues_exports, {
+  updateVariantClasses: () => updateVariantClasses,
   useRecalculateVariantDataCSLPValues: () => useRecalculateVariantDataCSLPValues
 });
 module.exports = __toCommonJS(useRecalculateVariantDataCSLPValues_exports);
@@ -38,46 +39,44 @@ var import_livePreviewEventManager = __toESM(require("../../livePreview/eventMan
 var import_livePreviewEventManager2 = require("../../livePreview/eventManager/livePreviewEventManager.constant.cjs");
 var import_constants = require("../utils/constants.cjs");
 var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_cslpdata = require("../../cslp/cslpdata.cjs");
+var import_useVariantsPostMessageEvent = require("./useVariantsPostMessageEvent.cjs");
 var VARIANT_UPDATE_DELAY_MS = 8e3;
 function useRecalculateVariantDataCSLPValues() {
   import_livePreviewEventManager.default?.on(
     import_livePreviewEventManager2.LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,
     (event) => {
       if (import__.VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {
-        updateVariantClasses(event.data);
+        (0, import_useVariantsPostMessageEvent.setHighlightVariantFields)(event.data.highlightVariantFields);
+        updateVariantClasses();
       }
     }
   );
 }
-function updateVariantClasses({
-  highlightVariantFields,
-  expectedCSLPValues
-}) {
+function updateVariantClasses() {
+  const highlightVariantFields = import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const variant = import__.VisualBuilder.VisualBuilderGlobalState.value.variant;
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
-    if (!dataCslp) return;
+    if (!(0, import_cslpdata.isValidCslp)(dataCslp)) return;
     if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
       if (element.classList.contains("visual-builder__base-field")) {
         element.classList.remove("visual-builder__base-field");
       }
+      const variantFieldClasses = ["visual-builder__variant-field"];
       if (highlightVariantFields) {
-        element.classList.add(
-          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
-          "visual-builder__variant-field"
-        );
-      } else {
-        element.classList.add("visual-builder__variant-field");
+        variantFieldClasses.push((0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__base-field");
     } else if (dataCslp.startsWith("v2:") && variant && !dataCslp.includes(variant) && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__disabled-variant-field");
@@ -91,7 +90,7 @@ function updateVariantClasses({
   };
   const addElementClasses = (element) => {
     const dataCslp = element.getAttribute(import_constants.DATA_CSLP_ATTR_SELECTOR);
-    if (!dataCslp) {
+    if (!(0, import_cslpdata.isValidCslp)(dataCslp)) {
       element.childNodes.forEach((child) => {
         if (child instanceof HTMLElement) {
           addElementClasses(child);
@@ -106,18 +105,15 @@ function updateVariantClasses({
       if (element.classList.contains("visual-builder__base-field")) {
         element.classList.remove("visual-builder__base-field");
       }
+      const variantFieldClasses = ["visual-builder__variant-field"];
       if (highlightVariantFields) {
-        element.classList.add(
-          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
-          "visual-builder__variant-field"
-        );
-      } else {
-        element.classList.add("visual-builder__variant-field");
+        variantFieldClasses.push((0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:")) {
       if (element.classList.contains("visual-builder__variant-field")) {
         element.classList.remove(
-          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
           "visual-builder__variant-field"
         );
       }
@@ -168,6 +164,7 @@ function updateVariantClasses({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  updateVariantClasses,
   useRecalculateVariantDataCSLPValues
 });
 //# sourceMappingURL=useRecalculateVariantDataCSLPValues.cjs.map

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                updateVariantClasses(event.data);\n            }\n        }\n    );\n}\nfunction updateVariantClasses({\n    highlightVariantFields,\n    expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!dataCslp) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!dataCslp) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage"]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { isValidCslp } from \"../../cslp/cslpdata\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                setHighlightVariantFields(event.data.highlightVariantFields);\n                updateVariantClasses();\n            }\n        }\n    );\n}\nexport function updateVariantClasses(): void {\n    const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!isValidCslp(dataCslp)) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!isValidCslp(dataCslp)) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage"]}

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.cts

@@ -2,5 +2,6 @@
  * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.
  */
 declare function useRecalculateVariantDataCSLPValues(): void;
+declare function updateVariantClasses(): void;
 
-export { useRecalculateVariantDataCSLPValues };
+export { updateVariantClasses, useRecalculateVariantDataCSLPValues };

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.ts

@@ -2,5 +2,6 @@
  * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.
  */
 declare function useRecalculateVariantDataCSLPValues(): void;
+declare function updateVariantClasses(): void;
 
-export { useRecalculateVariantDataCSLPValues };
+export { updateVariantClasses, useRecalculateVariantDataCSLPValues };

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js

@@ -6,46 +6,44 @@ import livePreviewPostMessage from "../../livePreview/eventManager/livePreviewEv
 import { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from "../../livePreview/eventManager/livePreviewEventManager.constant.js";
 import { DATA_CSLP_ATTR_SELECTOR } from "../utils/constants.js";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
+import { isValidCslp } from "../../cslp/cslpdata.js";
+import { setHighlightVariantFields } from "./useVariantsPostMessageEvent.js";
 var VARIANT_UPDATE_DELAY_MS = 8e3;
 function useRecalculateVariantDataCSLPValues() {
   livePreviewPostMessage?.on(
     LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,
     (event) => {
       if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {
-        updateVariantClasses(event.data);
+        setHighlightVariantFields(event.data.highlightVariantFields);
+        updateVariantClasses();
       }
     }
   );
 }
-function updateVariantClasses({
-  highlightVariantFields,
-  expectedCSLPValues
-}) {
+function updateVariantClasses() {
+  const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
-    if (!dataCslp) return;
+    if (!isValidCslp(dataCslp)) return;
     if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
       if (element.classList.contains("visual-builder__base-field")) {
         element.classList.remove("visual-builder__base-field");
       }
+      const variantFieldClasses = ["visual-builder__variant-field"];
       if (highlightVariantFields) {
-        element.classList.add(
-          visualBuilderStyles()["visual-builder__variant-field"],
-          "visual-builder__variant-field"
-        );
-      } else {
-        element.classList.add("visual-builder__variant-field");
+        variantFieldClasses.push(visualBuilderStyles()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        visualBuilderStyles()["visual-builder__variant-field"],
+        visualBuilderStyles()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__base-field");
     } else if (dataCslp.startsWith("v2:") && variant && !dataCslp.includes(variant) && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        visualBuilderStyles()["visual-builder__variant-field"],
+        visualBuilderStyles()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__disabled-variant-field");
@@ -59,7 +57,7 @@ function updateVariantClasses({
   };
   const addElementClasses = (element) => {
     const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);
-    if (!dataCslp) {
+    if (!isValidCslp(dataCslp)) {
       element.childNodes.forEach((child) => {
         if (child instanceof HTMLElement) {
           addElementClasses(child);
@@ -74,18 +72,15 @@ function updateVariantClasses({
       if (element.classList.contains("visual-builder__base-field")) {
         element.classList.remove("visual-builder__base-field");
       }
+      const variantFieldClasses = ["visual-builder__variant-field"];
       if (highlightVariantFields) {
-        element.classList.add(
-          visualBuilderStyles()["visual-builder__variant-field"],
-          "visual-builder__variant-field"
-        );
-      } else {
-        element.classList.add("visual-builder__variant-field");
+        variantFieldClasses.push(visualBuilderStyles()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:")) {
       if (element.classList.contains("visual-builder__variant-field")) {
         element.classList.remove(
-          visualBuilderStyles()["visual-builder__variant-field"],
+          visualBuilderStyles()["visual-builder__variant-field-outline"],
           "visual-builder__variant-field"
         );
       }
@@ -135,6 +130,7 @@ function updateVariantClasses({
   }, VARIANT_UPDATE_DELAY_MS);
 }
 export {
+  updateVariantClasses,
   useRecalculateVariantDataCSLPValues
 };
 //# sourceMappingURL=useRecalculateVariantDataCSLPValues.js.map

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                updateVariantClasses(event.data);\n            }\n        }\n    );\n}\nfunction updateVariantClasses({\n    highlightVariantFields,\n    expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!dataCslp) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!dataCslp) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { isValidCslp } from \"../../cslp/cslpdata\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                setHighlightVariantFields(event.data.highlightVariantFields);\n                updateVariantClasses();\n            }\n        }\n    );\n}\nexport function updateVariantClasses(): void {\n    const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!isValidCslp(dataCslp)) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!isValidCslp(dataCslp)) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.cjs

@@ -41,7 +41,7 @@ async function handleRevalidateFieldData() {
     const targetElement = hoveredElement || focusedElement;
     if (targetElement) {
       const cslp = targetElement.getAttribute("data-cslp");
-      if (cslp) {
+      if ((0, import_cslp.isValidCslp)(cslp)) {
         const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslp);
         import_fieldSchemaMap.FieldSchemaMap.clearContentTypeSchema(
           fieldMetadata.content_type_uid
@@ -53,7 +53,7 @@ async function handleRevalidateFieldData() {
     console.error("Error handling revalidate field data:", error);
     window.location.reload();
   } finally {
-    if (shouldRefocus && elementCslp) {
+    if (shouldRefocus && (0, import_cslp.isValidCslp)(elementCslp)) {
       await refocusElement(elementCslp, elementCslpUniqueId);
     }
   }

package/dist/modern/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { hideFocusOverlay } from \"../generators/generateOverlay\";\nimport { handleBuilderInteraction } from \"../listeners/mouseClick\";\n\n/**\n * Revalidates field data and schema after variant linking operations.\n * Unfocuses the selected element, revalidates data, and then reselects it.\n */\nexport async function handleRevalidateFieldData(): Promise<void> {\n    const focusedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const hoveredElement =\n        VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM;\n\n    // Store element identifiers for refocusing\n    const elementCslp = focusedElement?.getAttribute(\"data-cslp\");\n    const elementCslpUniqueId =\n        focusedElement?.getAttribute(\"data-cslp-unique-id\") || null;\n    const shouldRefocus = !!focusedElement;\n\n    try {\n        // Step 1: Unfocus the current element\n        if (shouldRefocus) {\n            await unfocusElement();\n        }\n\n        // Step 2: Revalidate field data\n        const targetElement = hoveredElement || focusedElement;\n\n        if (targetElement) {\n            const cslp = targetElement.getAttribute(\"data-cslp\");\n            if (cslp) {\n                const fieldMetadata = extractDetailsFromCslp(cslp);\n\n                // Try to revalidate specific field schema and data\n                // Clear the entire content type schema from cache to force fresh fetch\n                FieldSchemaMap.clearContentTypeSchema(\n                    fieldMetadata.content_type_uid\n                );\n            }\n        }\n\n        // Fallback 1: Clear all field schema cache\n        FieldSchemaMap.clear();\n    } catch (error) {\n        console.error(\"Error handling revalidate field data:\", error);\n        // Final fallback - refresh the page\n        window.location.reload();\n    } finally {\n        // Step 3: Refocus the element if we had one focused before\n        if (shouldRefocus && elementCslp) {\n            await refocusElement(elementCslp, elementCslpUniqueId);\n        }\n    }\n}\n\n/**\n * Unfocuses the currently selected element and clears focus state\n */\nasync function unfocusElement(): Promise<void> {\n    const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n        getVisualBuilderElements();\n\n    if (!visualBuilderContainer || !overlayWrapper) return;\n\n    const dummyResizeObserver = new ResizeObserver(() => {});\n\n    // Hide focus overlay (cleanIndividualFieldResidual needs previousSelectedEditableDOM)\n    hideFocusOverlay({\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper: overlayWrapper,\n        focusedToolbar,\n        resizeObserver: dummyResizeObserver,\n        noTrigger: true,\n    });\n\n    // Clear global state after cleanup\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n    VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\n}\n\n/**\n * Refocuses an element by its CSLP identifier\n */\nasync function refocusElement(\n    cslp: string,\n    uniqueId: string | null\n): Promise<void> {\n    try {\n        // Find the element (prefer unique ID, fallback to CSLP)\n        const elementToRefocus =\n            (uniqueId &&\n                document.querySelector(\n                    `[data-cslp-unique-id=\"${uniqueId}\"]`\n                )) ||\n            document.querySelector(`[data-cslp=\"${cslp}\"]`);\n\n        if (!elementToRefocus) return;\n\n        const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n            getVisualBuilderElements();\n\n        if (!visualBuilderContainer || !overlayWrapper) return;\n\n        // Create synthetic click event\n        const syntheticEvent = new MouseEvent(\"click\", {\n            bubbles: true,\n            cancelable: true,\n        });\n        Object.defineProperty(syntheticEvent, \"target\", {\n            value: elementToRefocus,\n            enumerable: true,\n        });\n\n        // Refocus using handleBuilderInteraction\n        await handleBuilderInteraction({\n            event: syntheticEvent,\n            previousSelectedEditableDOM: null,\n            visualBuilderContainer,\n            overlayWrapper,\n            focusedToolbar,\n            resizeObserver: new ResizeObserver(() => {}),\n        });\n    } catch (error) {\n        console.warn(\"Could not refocus element after revalidation:\", error);\n    }\n}\n\n/**\n * Gets the main visual builder DOM elements\n */\nfunction getVisualBuilderElements() {\n    return {\n        visualBuilderContainer: document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLDivElement | null,\n        overlayWrapper: document.querySelector(\n            \".visual-builder__overlay__wrapper\"\n        ) as HTMLDivElement | null,\n        focusedToolbar: document.querySelector(\n            \".visual-builder__focused-toolbar\"\n        ) as HTMLDivElement | null,\n    };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,kBAAuC;AACvC,4BAA+B;AAC/B,6BAAiC;AACjC,wBAAyC;AAMzC,eAAsB,4BAA2C;AAC7D,QAAM,iBACF,uBAAc,yBAAyB,MAClC;AACT,QAAM,iBACF,uBAAc,yBAAyB,MAAM;AAGjD,QAAM,cAAc,gBAAgB,aAAa,WAAW;AAC5D,QAAM,sBACF,gBAAgB,aAAa,qBAAqB,KAAK;AAC3D,QAAM,gBAAgB,CAAC,CAAC;AAExB,MAAI;AAEA,QAAI,eAAe;AACf,YAAM,eAAe;AAAA,IACzB;AAGA,UAAM,gBAAgB,kBAAkB;AAExC,QAAI,eAAe;AACf,YAAM,OAAO,cAAc,aAAa,WAAW;AACnD,UAAI,MAAM;AACN,cAAM,oBAAgB,oCAAuB,IAAI;AAIjD,6CAAe;AAAA,UACX,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ;AAGA,yCAAe,MAAM;AAAA,EACzB,SAAS,OAAO;AACZ,YAAQ,MAAM,yCAAyC,KAAK;AAE5D,WAAO,SAAS,OAAO;AAAA,EAC3B,UAAE;AAEE,QAAI,iBAAiB,aAAa;AAC9B,YAAM,eAAe,aAAa,mBAAmB;AAAA,IACzD;AAAA,EACJ;AACJ;AAKA,eAAe,iBAAgC;AAC3C,QAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,MAAI,CAAC,0BAA0B,CAAC,eAAgB;AAEhD,QAAM,sBAAsB,IAAI,eAAe,MAAM;AAAA,EAAC,CAAC;AAGvD,+CAAiB;AAAA,IACb;AAAA,IACA,6BAA6B;AAAA,IAC7B;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACf,CAAC;AAGD,yBAAc,yBAAyB,MAAM,8BACzC;AACJ,yBAAc,yBAAyB,MAAM,aAAa;AAC9D;AAKA,eAAe,eACX,MACA,UACa;AACb,MAAI;AAEA,UAAM,mBACD,YACG,SAAS;AAAA,MACL,yBAAyB,QAAQ;AAAA,IACrC,KACJ,SAAS,cAAc,eAAe,IAAI,IAAI;AAElD,QAAI,CAAC,iBAAkB;AAEvB,UAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,QAAI,CAAC,0BAA0B,CAAC,eAAgB;AAGhD,UAAM,iBAAiB,IAAI,WAAW,SAAS;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,WAAO,eAAe,gBAAgB,UAAU;AAAA,MAC5C,OAAO;AAAA,MACP,YAAY;AAAA,IAChB,CAAC;AAGD,cAAM,4CAAyB;AAAA,MAC3B,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,IAAI,eAAe,MAAM;AAAA,MAAC,CAAC;AAAA,IAC/C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,KAAK,iDAAiD,KAAK;AAAA,EACvE;AACJ;AAKA,SAAS,2BAA2B;AAChC,SAAO;AAAA,IACH,wBAAwB,SAAS;AAAA,MAC7B;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp, isValidCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { hideFocusOverlay } from \"../generators/generateOverlay\";\nimport { handleBuilderInteraction } from \"../listeners/mouseClick\";\n\n/**\n * Revalidates field data and schema after variant linking operations.\n * Unfocuses the selected element, revalidates data, and then reselects it.\n */\nexport async function handleRevalidateFieldData(): Promise<void> {\n    const focusedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const hoveredElement =\n        VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM;\n\n    // Store element identifiers for refocusing\n    const elementCslp = focusedElement?.getAttribute(\"data-cslp\");\n    const elementCslpUniqueId =\n        focusedElement?.getAttribute(\"data-cslp-unique-id\") || null;\n    const shouldRefocus = !!focusedElement;\n\n    try {\n        // Step 1: Unfocus the current element\n        if (shouldRefocus) {\n            await unfocusElement();\n        }\n\n        // Step 2: Revalidate field data\n        const targetElement = hoveredElement || focusedElement;\n\n        if (targetElement) {\n            const cslp = targetElement.getAttribute(\"data-cslp\");\n            if (isValidCslp(cslp)) {\n                const fieldMetadata = extractDetailsFromCslp(cslp);\n\n                // Try to revalidate specific field schema and data\n                // Clear the entire content type schema from cache to force fresh fetch\n                FieldSchemaMap.clearContentTypeSchema(\n                    fieldMetadata.content_type_uid\n                );\n            }\n        }\n\n        // Fallback 1: Clear all field schema cache\n        FieldSchemaMap.clear();\n    } catch (error) {\n        console.error(\"Error handling revalidate field data:\", error);\n        // Final fallback - refresh the page\n        window.location.reload();\n    } finally {\n        // Step 3: Refocus the element if we had one focused before\n        if (shouldRefocus && isValidCslp(elementCslp)) {\n            await refocusElement(elementCslp, elementCslpUniqueId);\n        }\n    }\n}\n\n/**\n * Unfocuses the currently selected element and clears focus state\n */\nasync function unfocusElement(): Promise<void> {\n    const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n        getVisualBuilderElements();\n\n    if (!visualBuilderContainer || !overlayWrapper) return;\n\n    const dummyResizeObserver = new ResizeObserver(() => {});\n\n    // Hide focus overlay (cleanIndividualFieldResidual needs previousSelectedEditableDOM)\n    hideFocusOverlay({\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper: overlayWrapper,\n        focusedToolbar,\n        resizeObserver: dummyResizeObserver,\n        noTrigger: true,\n    });\n\n    // Clear global state after cleanup\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n    VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\n}\n\n/**\n * Refocuses an element by its CSLP identifier\n */\nasync function refocusElement(\n    cslp: string,\n    uniqueId: string | null\n): Promise<void> {\n    try {\n        // Find the element (prefer unique ID, fallback to CSLP)\n        const elementToRefocus =\n            (uniqueId &&\n                document.querySelector(\n                    `[data-cslp-unique-id=\"${uniqueId}\"]`\n                )) ||\n            document.querySelector(`[data-cslp=\"${cslp}\"]`);\n\n        if (!elementToRefocus) return;\n\n        const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n            getVisualBuilderElements();\n\n        if (!visualBuilderContainer || !overlayWrapper) return;\n\n        // Create synthetic click event\n        const syntheticEvent = new MouseEvent(\"click\", {\n            bubbles: true,\n            cancelable: true,\n        });\n        Object.defineProperty(syntheticEvent, \"target\", {\n            value: elementToRefocus,\n            enumerable: true,\n        });\n\n        // Refocus using handleBuilderInteraction\n        await handleBuilderInteraction({\n            event: syntheticEvent,\n            previousSelectedEditableDOM: null,\n            visualBuilderContainer,\n            overlayWrapper,\n            focusedToolbar,\n            resizeObserver: new ResizeObserver(() => {}),\n        });\n    } catch (error) {\n        console.warn(\"Could not refocus element after revalidation:\", error);\n    }\n}\n\n/**\n * Gets the main visual builder DOM elements\n */\nfunction getVisualBuilderElements() {\n    return {\n        visualBuilderContainer: document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLDivElement | null,\n        overlayWrapper: document.querySelector(\n            \".visual-builder__overlay__wrapper\"\n        ) as HTMLDivElement | null,\n        focusedToolbar: document.querySelector(\n            \".visual-builder__focused-toolbar\"\n        ) as HTMLDivElement | null,\n    };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,kBAAoD;AACpD,4BAA+B;AAC/B,6BAAiC;AACjC,wBAAyC;AAMzC,eAAsB,4BAA2C;AAC7D,QAAM,iBACF,uBAAc,yBAAyB,MAClC;AACT,QAAM,iBACF,uBAAc,yBAAyB,MAAM;AAGjD,QAAM,cAAc,gBAAgB,aAAa,WAAW;AAC5D,QAAM,sBACF,gBAAgB,aAAa,qBAAqB,KAAK;AAC3D,QAAM,gBAAgB,CAAC,CAAC;AAExB,MAAI;AAEA,QAAI,eAAe;AACf,YAAM,eAAe;AAAA,IACzB;AAGA,UAAM,gBAAgB,kBAAkB;AAExC,QAAI,eAAe;AACf,YAAM,OAAO,cAAc,aAAa,WAAW;AACnD,cAAI,yBAAY,IAAI,GAAG;AACnB,cAAM,oBAAgB,oCAAuB,IAAI;AAIjD,6CAAe;AAAA,UACX,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ;AAGA,yCAAe,MAAM;AAAA,EACzB,SAAS,OAAO;AACZ,YAAQ,MAAM,yCAAyC,KAAK;AAE5D,WAAO,SAAS,OAAO;AAAA,EAC3B,UAAE;AAEE,QAAI,qBAAiB,yBAAY,WAAW,GAAG;AAC3C,YAAM,eAAe,aAAa,mBAAmB;AAAA,IACzD;AAAA,EACJ;AACJ;AAKA,eAAe,iBAAgC;AAC3C,QAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,MAAI,CAAC,0BAA0B,CAAC,eAAgB;AAEhD,QAAM,sBAAsB,IAAI,eAAe,MAAM;AAAA,EAAC,CAAC;AAGvD,+CAAiB;AAAA,IACb;AAAA,IACA,6BAA6B;AAAA,IAC7B;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACf,CAAC;AAGD,yBAAc,yBAAyB,MAAM,8BACzC;AACJ,yBAAc,yBAAyB,MAAM,aAAa;AAC9D;AAKA,eAAe,eACX,MACA,UACa;AACb,MAAI;AAEA,UAAM,mBACD,YACG,SAAS;AAAA,MACL,yBAAyB,QAAQ;AAAA,IACrC,KACJ,SAAS,cAAc,eAAe,IAAI,IAAI;AAElD,QAAI,CAAC,iBAAkB;AAEvB,UAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,QAAI,CAAC,0BAA0B,CAAC,eAAgB;AAGhD,UAAM,iBAAiB,IAAI,WAAW,SAAS;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,WAAO,eAAe,gBAAgB,UAAU;AAAA,MAC5C,OAAO;AAAA,MACP,YAAY;AAAA,IAChB,CAAC;AAGD,cAAM,4CAAyB;AAAA,MAC3B,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,IAAI,eAAe,MAAM;AAAA,MAAC,CAAC;AAAA,IAC/C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,KAAK,iDAAiD,KAAK;AAAA,EACvE;AACJ;AAKA,SAAS,2BAA2B;AAChC,SAAO;AAAA,IACH,wBAAwB,SAAS;AAAA,MAC7B;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;","names":[]}

package/dist/modern/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.js

@@ -2,7 +2,7 @@ import "../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts
 import { VisualBuilder } from "../index.js";
-import { extractDetailsFromCslp } from "../../cslp/index.js";
+import { extractDetailsFromCslp, isValidCslp } from "../../cslp/index.js";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
 import { hideFocusOverlay } from "../generators/generateOverlay.js";
 import { handleBuilderInteraction } from "../listeners/mouseClick.js";
@@ -19,7 +19,7 @@ async function handleRevalidateFieldData() {
     const targetElement = hoveredElement || focusedElement;
     if (targetElement) {
       const cslp = targetElement.getAttribute("data-cslp");
-      if (cslp) {
+      if (isValidCslp(cslp)) {
         const fieldMetadata = extractDetailsFromCslp(cslp);
         FieldSchemaMap.clearContentTypeSchema(
           fieldMetadata.content_type_uid
@@ -31,7 +31,7 @@ async function handleRevalidateFieldData() {
     console.error("Error handling revalidate field data:", error);
     window.location.reload();
   } finally {
-    if (shouldRefocus && elementCslp) {
+    if (shouldRefocus && isValidCslp(elementCslp)) {
       await refocusElement(elementCslp, elementCslpUniqueId);
     }
   }

package/dist/modern/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { hideFocusOverlay } from \"../generators/generateOverlay\";\nimport { handleBuilderInteraction } from \"../listeners/mouseClick\";\n\n/**\n * Revalidates field data and schema after variant linking operations.\n * Unfocuses the selected element, revalidates data, and then reselects it.\n */\nexport async function handleRevalidateFieldData(): Promise<void> {\n    const focusedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const hoveredElement =\n        VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM;\n\n    // Store element identifiers for refocusing\n    const elementCslp = focusedElement?.getAttribute(\"data-cslp\");\n    const elementCslpUniqueId =\n        focusedElement?.getAttribute(\"data-cslp-unique-id\") || null;\n    const shouldRefocus = !!focusedElement;\n\n    try {\n        // Step 1: Unfocus the current element\n        if (shouldRefocus) {\n            await unfocusElement();\n        }\n\n        // Step 2: Revalidate field data\n        const targetElement = hoveredElement || focusedElement;\n\n        if (targetElement) {\n            const cslp = targetElement.getAttribute(\"data-cslp\");\n            if (cslp) {\n                const fieldMetadata = extractDetailsFromCslp(cslp);\n\n                // Try to revalidate specific field schema and data\n                // Clear the entire content type schema from cache to force fresh fetch\n                FieldSchemaMap.clearContentTypeSchema(\n                    fieldMetadata.content_type_uid\n                );\n            }\n        }\n\n        // Fallback 1: Clear all field schema cache\n        FieldSchemaMap.clear();\n    } catch (error) {\n        console.error(\"Error handling revalidate field data:\", error);\n        // Final fallback - refresh the page\n        window.location.reload();\n    } finally {\n        // Step 3: Refocus the element if we had one focused before\n        if (shouldRefocus && elementCslp) {\n            await refocusElement(elementCslp, elementCslpUniqueId);\n        }\n    }\n}\n\n/**\n * Unfocuses the currently selected element and clears focus state\n */\nasync function unfocusElement(): Promise<void> {\n    const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n        getVisualBuilderElements();\n\n    if (!visualBuilderContainer || !overlayWrapper) return;\n\n    const dummyResizeObserver = new ResizeObserver(() => {});\n\n    // Hide focus overlay (cleanIndividualFieldResidual needs previousSelectedEditableDOM)\n    hideFocusOverlay({\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper: overlayWrapper,\n        focusedToolbar,\n        resizeObserver: dummyResizeObserver,\n        noTrigger: true,\n    });\n\n    // Clear global state after cleanup\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n    VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\n}\n\n/**\n * Refocuses an element by its CSLP identifier\n */\nasync function refocusElement(\n    cslp: string,\n    uniqueId: string | null\n): Promise<void> {\n    try {\n        // Find the element (prefer unique ID, fallback to CSLP)\n        const elementToRefocus =\n            (uniqueId &&\n                document.querySelector(\n                    `[data-cslp-unique-id=\"${uniqueId}\"]`\n                )) ||\n            document.querySelector(`[data-cslp=\"${cslp}\"]`);\n\n        if (!elementToRefocus) return;\n\n        const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n            getVisualBuilderElements();\n\n        if (!visualBuilderContainer || !overlayWrapper) return;\n\n        // Create synthetic click event\n        const syntheticEvent = new MouseEvent(\"click\", {\n            bubbles: true,\n            cancelable: true,\n        });\n        Object.defineProperty(syntheticEvent, \"target\", {\n            value: elementToRefocus,\n            enumerable: true,\n        });\n\n        // Refocus using handleBuilderInteraction\n        await handleBuilderInteraction({\n            event: syntheticEvent,\n            previousSelectedEditableDOM: null,\n            visualBuilderContainer,\n            overlayWrapper,\n            focusedToolbar,\n            resizeObserver: new ResizeObserver(() => {}),\n        });\n    } catch (error) {\n        console.warn(\"Could not refocus element after revalidation:\", error);\n    }\n}\n\n/**\n * Gets the main visual builder DOM elements\n */\nfunction getVisualBuilderElements() {\n    return {\n        visualBuilderContainer: document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLDivElement | null,\n        overlayWrapper: document.querySelector(\n            \".visual-builder__overlay__wrapper\"\n        ) as HTMLDivElement | null,\n        focusedToolbar: document.querySelector(\n            \".visual-builder__focused-toolbar\"\n        ) as HTMLDivElement | null,\n    };\n}\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAMzC,eAAsB,4BAA2C;AAC7D,QAAM,iBACF,cAAc,yBAAyB,MAClC;AACT,QAAM,iBACF,cAAc,yBAAyB,MAAM;AAGjD,QAAM,cAAc,gBAAgB,aAAa,WAAW;AAC5D,QAAM,sBACF,gBAAgB,aAAa,qBAAqB,KAAK;AAC3D,QAAM,gBAAgB,CAAC,CAAC;AAExB,MAAI;AAEA,QAAI,eAAe;AACf,YAAM,eAAe;AAAA,IACzB;AAGA,UAAM,gBAAgB,kBAAkB;AAExC,QAAI,eAAe;AACf,YAAM,OAAO,cAAc,aAAa,WAAW;AACnD,UAAI,MAAM;AACN,cAAM,gBAAgB,uBAAuB,IAAI;AAIjD,uBAAe;AAAA,UACX,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ;AAGA,mBAAe,MAAM;AAAA,EACzB,SAAS,OAAO;AACZ,YAAQ,MAAM,yCAAyC,KAAK;AAE5D,WAAO,SAAS,OAAO;AAAA,EAC3B,UAAE;AAEE,QAAI,iBAAiB,aAAa;AAC9B,YAAM,eAAe,aAAa,mBAAmB;AAAA,IACzD;AAAA,EACJ;AACJ;AAKA,eAAe,iBAAgC;AAC3C,QAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,MAAI,CAAC,0BAA0B,CAAC,eAAgB;AAEhD,QAAM,sBAAsB,IAAI,eAAe,MAAM;AAAA,EAAC,CAAC;AAGvD,mBAAiB;AAAA,IACb;AAAA,IACA,6BAA6B;AAAA,IAC7B;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACf,CAAC;AAGD,gBAAc,yBAAyB,MAAM,8BACzC;AACJ,gBAAc,yBAAyB,MAAM,aAAa;AAC9D;AAKA,eAAe,eACX,MACA,UACa;AACb,MAAI;AAEA,UAAM,mBACD,YACG,SAAS;AAAA,MACL,yBAAyB,QAAQ;AAAA,IACrC,KACJ,SAAS,cAAc,eAAe,IAAI,IAAI;AAElD,QAAI,CAAC,iBAAkB;AAEvB,UAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,QAAI,CAAC,0BAA0B,CAAC,eAAgB;AAGhD,UAAM,iBAAiB,IAAI,WAAW,SAAS;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,WAAO,eAAe,gBAAgB,UAAU;AAAA,MAC5C,OAAO;AAAA,MACP,YAAY;AAAA,IAChB,CAAC;AAGD,UAAM,yBAAyB;AAAA,MAC3B,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,IAAI,eAAe,MAAM;AAAA,MAAC,CAAC;AAAA,IAC/C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,KAAK,iDAAiD,KAAK;AAAA,EACvE;AACJ;AAKA,SAAS,2BAA2B;AAChC,SAAO;AAAA,IACH,wBAAwB,SAAS;AAAA,MAC7B;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp, isValidCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { hideFocusOverlay } from \"../generators/generateOverlay\";\nimport { handleBuilderInteraction } from \"../listeners/mouseClick\";\n\n/**\n * Revalidates field data and schema after variant linking operations.\n * Unfocuses the selected element, revalidates data, and then reselects it.\n */\nexport async function handleRevalidateFieldData(): Promise<void> {\n    const focusedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const hoveredElement =\n        VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM;\n\n    // Store element identifiers for refocusing\n    const elementCslp = focusedElement?.getAttribute(\"data-cslp\");\n    const elementCslpUniqueId =\n        focusedElement?.getAttribute(\"data-cslp-unique-id\") || null;\n    const shouldRefocus = !!focusedElement;\n\n    try {\n        // Step 1: Unfocus the current element\n        if (shouldRefocus) {\n            await unfocusElement();\n        }\n\n        // Step 2: Revalidate field data\n        const targetElement = hoveredElement || focusedElement;\n\n        if (targetElement) {\n            const cslp = targetElement.getAttribute(\"data-cslp\");\n            if (isValidCslp(cslp)) {\n                const fieldMetadata = extractDetailsFromCslp(cslp);\n\n                // Try to revalidate specific field schema and data\n                // Clear the entire content type schema from cache to force fresh fetch\n                FieldSchemaMap.clearContentTypeSchema(\n                    fieldMetadata.content_type_uid\n                );\n            }\n        }\n\n        // Fallback 1: Clear all field schema cache\n        FieldSchemaMap.clear();\n    } catch (error) {\n        console.error(\"Error handling revalidate field data:\", error);\n        // Final fallback - refresh the page\n        window.location.reload();\n    } finally {\n        // Step 3: Refocus the element if we had one focused before\n        if (shouldRefocus && isValidCslp(elementCslp)) {\n            await refocusElement(elementCslp, elementCslpUniqueId);\n        }\n    }\n}\n\n/**\n * Unfocuses the currently selected element and clears focus state\n */\nasync function unfocusElement(): Promise<void> {\n    const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n        getVisualBuilderElements();\n\n    if (!visualBuilderContainer || !overlayWrapper) return;\n\n    const dummyResizeObserver = new ResizeObserver(() => {});\n\n    // Hide focus overlay (cleanIndividualFieldResidual needs previousSelectedEditableDOM)\n    hideFocusOverlay({\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper: overlayWrapper,\n        focusedToolbar,\n        resizeObserver: dummyResizeObserver,\n        noTrigger: true,\n    });\n\n    // Clear global state after cleanup\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n    VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\n}\n\n/**\n * Refocuses an element by its CSLP identifier\n */\nasync function refocusElement(\n    cslp: string,\n    uniqueId: string | null\n): Promise<void> {\n    try {\n        // Find the element (prefer unique ID, fallback to CSLP)\n        const elementToRefocus =\n            (uniqueId &&\n                document.querySelector(\n                    `[data-cslp-unique-id=\"${uniqueId}\"]`\n                )) ||\n            document.querySelector(`[data-cslp=\"${cslp}\"]`);\n\n        if (!elementToRefocus) return;\n\n        const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n            getVisualBuilderElements();\n\n        if (!visualBuilderContainer || !overlayWrapper) return;\n\n        // Create synthetic click event\n        const syntheticEvent = new MouseEvent(\"click\", {\n            bubbles: true,\n            cancelable: true,\n        });\n        Object.defineProperty(syntheticEvent, \"target\", {\n            value: elementToRefocus,\n            enumerable: true,\n        });\n\n        // Refocus using handleBuilderInteraction\n        await handleBuilderInteraction({\n            event: syntheticEvent,\n            previousSelectedEditableDOM: null,\n            visualBuilderContainer,\n            overlayWrapper,\n            focusedToolbar,\n            resizeObserver: new ResizeObserver(() => {}),\n        });\n    } catch (error) {\n        console.warn(\"Could not refocus element after revalidation:\", error);\n    }\n}\n\n/**\n * Gets the main visual builder DOM elements\n */\nfunction getVisualBuilderElements() {\n    return {\n        visualBuilderContainer: document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLDivElement | null,\n        overlayWrapper: document.querySelector(\n            \".visual-builder__overlay__wrapper\"\n        ) as HTMLDivElement | null,\n        focusedToolbar: document.querySelector(\n            \".visual-builder__focused-toolbar\"\n        ) as HTMLDivElement | null,\n    };\n}\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB,mBAAmB;AACpD,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAMzC,eAAsB,4BAA2C;AAC7D,QAAM,iBACF,cAAc,yBAAyB,MAClC;AACT,QAAM,iBACF,cAAc,yBAAyB,MAAM;AAGjD,QAAM,cAAc,gBAAgB,aAAa,WAAW;AAC5D,QAAM,sBACF,gBAAgB,aAAa,qBAAqB,KAAK;AAC3D,QAAM,gBAAgB,CAAC,CAAC;AAExB,MAAI;AAEA,QAAI,eAAe;AACf,YAAM,eAAe;AAAA,IACzB;AAGA,UAAM,gBAAgB,kBAAkB;AAExC,QAAI,eAAe;AACf,YAAM,OAAO,cAAc,aAAa,WAAW;AACnD,UAAI,YAAY,IAAI,GAAG;AACnB,cAAM,gBAAgB,uBAAuB,IAAI;AAIjD,uBAAe;AAAA,UACX,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ;AAGA,mBAAe,MAAM;AAAA,EACzB,SAAS,OAAO;AACZ,YAAQ,MAAM,yCAAyC,KAAK;AAE5D,WAAO,SAAS,OAAO;AAAA,EAC3B,UAAE;AAEE,QAAI,iBAAiB,YAAY,WAAW,GAAG;AAC3C,YAAM,eAAe,aAAa,mBAAmB;AAAA,IACzD;AAAA,EACJ;AACJ;AAKA,eAAe,iBAAgC;AAC3C,QAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,MAAI,CAAC,0BAA0B,CAAC,eAAgB;AAEhD,QAAM,sBAAsB,IAAI,eAAe,MAAM;AAAA,EAAC,CAAC;AAGvD,mBAAiB;AAAA,IACb;AAAA,IACA,6BAA6B;AAAA,IAC7B;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACf,CAAC;AAGD,gBAAc,yBAAyB,MAAM,8BACzC;AACJ,gBAAc,yBAAyB,MAAM,aAAa;AAC9D;AAKA,eAAe,eACX,MACA,UACa;AACb,MAAI;AAEA,UAAM,mBACD,YACG,SAAS;AAAA,MACL,yBAAyB,QAAQ;AAAA,IACrC,KACJ,SAAS,cAAc,eAAe,IAAI,IAAI;AAElD,QAAI,CAAC,iBAAkB;AAEvB,UAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,QAAI,CAAC,0BAA0B,CAAC,eAAgB;AAGhD,UAAM,iBAAiB,IAAI,WAAW,SAAS;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,WAAO,eAAe,gBAAgB,UAAU;AAAA,MAC5C,OAAO;AAAA,MACP,YAAY;AAAA,IAChB,CAAC;AAGD,UAAM,yBAAyB;AAAA,MAC3B,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,IAAI,eAAe,MAAM;AAAA,MAAC,CAAC;AAAA,IAC/C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,KAAK,iDAAiD,KAAK;AAAA,EACvE;AACJ;AAKA,SAAS,2BAA2B;AAChC,SAAO;AAAA,IACH,wBAAwB,SAAS;AAAA,MAC7B;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;","names":[]}