@contentful/experiences-visual-editor-react 1.40.0-dev-20250604T0933-fc115de.0 → 1.40.1-beta.0

package/dist/index.js

@@ -1406,6 +1406,7 @@ const sanitizeNodeProps = (nodeProps) => {
     return omit(nodeProps, stylesToRemove, propsToRemove);
 };
 
+/** Turn the visibility value into a style object that can be used for inline styles in React */
 const transformVisibility = (value) => {
     if (value === false) {
         return {
@@ -1574,7 +1575,6 @@ const buildStyleTag = ({ styles, nodeId }) => {
 const buildCfStyles = (values) => {
     const cssProperties = {
         boxSizing: 'border-box',
-        ...transformVisibility(values.cfVisibility),
         margin: values.cfMargin,
         padding: values.cfPadding,
         backgroundColor: values.cfBackgroundColor,
@@ -2232,6 +2232,17 @@ class EntityStoreBase {
                     resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
                     entityToResolveFieldsFrom = entity; // we move up
                 }
+                else if (this.isAsset(fieldValue) || this.isEntry(fieldValue)) {
+                    resolvedFieldset.push([entityToResolveFieldsFrom, field, _localeQualifier]);
+                    entityToResolveFieldsFrom = fieldValue; // we move up
+                }
+                else {
+                    return {
+                        resolvedFieldset,
+                        isFullyResolved: false,
+                        reason: `Deep path points to an invalid field value of type '${typeof fieldValue}' (value=${fieldValue})`,
+                    };
+                }
             }
             return {
                 resolvedFieldset,
@@ -2257,8 +2268,17 @@ class EntityStoreBase {
         const [leafEntity] = resolvedFieldset[resolvedFieldset.length - 1];
         return leafEntity;
     }
-    isAsset(entity) {
-        return entity.sys.type === 'Asset';
+    isAsset(value) {
+        return (null !== value &&
+            typeof value === 'object' &&
+            'sys' in value &&
+            value.sys?.type === 'Asset');
+    }
+    isEntry(value) {
+        return (null !== value &&
+            typeof value === 'object' &&
+            'sys' in value &&
+            value.sys?.type === 'Entry');
     }
     getEntity(type, id) {
         if (type === 'Asset') {
@@ -4813,7 +4833,11 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         entityStore,
         renderDropzone,
     ]);
-    const cfStyles = useMemo(() => buildCfStyles(props), [props]);
+    const cfStyles = useMemo(() => ({
+        ...buildCfStyles(props),
+        // This is not handled by buildCfStyles as it requires separate disjunct media queries in preview mode
+        ...transformVisibility(props.cfVisibility),
+    }), [props]);
     const cfVisibility = props['cfVisibility'];
     const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
     const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;