@contentful/experiences-visual-editor-react 3.0.0-alpha-20250711T0717-d5ee667.0 → 3.0.0-alpha-20250804T0859-6413b63.0

package/dist/index.js

@@ -1444,6 +1444,17 @@ const propsToRemove = [
 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 {
+            display: 'none !important',
+        };
+    }
+    // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
+    return {};
+};
 const transformGridColumn = (span) => {
     if (!span) {
         return {};
@@ -2815,11 +2826,6 @@ function compareNodes({ currentNode, updatedNode, originalTree, differences = []
         });
     });
     map.forEach((index, key) => {
-        // If the node count of the entire tree doesn't signify
-        // a node was removed, don't add that as a diff
-        if (!nodeRemoved) {
-            return;
-        }
         // Remaining nodes in the map are removed in the second tree
         differences.push({
             type: TreeAction.REMOVE_NODE,
@@ -3171,7 +3177,7 @@ styleInject(css_248z$5);
 var css_248z$4 = ".cf-text{white-space:pre-line}.cf-text-link .cf-text{margin:0}";
 styleInject(css_248z$4);
 
-var css_248z$3 = "div.cf-placeholder-wrapper{position:relative}img.cf-placeholder-image{background-color:var(--cf-color-gray100);height:100%;outline:2px solid rgba(var(--cf-color-gray400-rgb),.5);outline-offset:-2px;width:100%}svg.cf-placeholder-icon{height:var(--cf-text-3xl);left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--cf-text-3xl)}svg.cf-placeholder-icon path{fill:var(--cf-color-gray400)}";
+var css_248z$3 = "div.cf-placeholder-wrapper{outline:2px solid rgba(var(--cf-color-gray400-rgb),.5);outline-offset:-2px;overflow:hidden;position:relative}img.cf-placeholder-image{background-color:var(--cf-color-gray100);height:100%;width:100%}svg.cf-placeholder-icon{height:var(--cf-text-3xl);left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--cf-text-3xl)}svg.cf-placeholder-icon path{fill:var(--cf-color-gray400)}";
 styleInject(css_248z$3);
 
 /**
@@ -4691,7 +4697,12 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
         entityStore,
         findNodeById,
     ]);
-    const cfStyles = useMemo(() => buildCfStyles(props), [props]);
+    const cfStyles = useMemo(() => ({
+        ...buildCfStyles(props),
+        // The visibility needs to be transformed separately as it requires
+        // a special handling for preview & SSR rendering (not here though).
+        ...transformVisibility(props.cfVisibility),
+    }), [props]);
     const shouldRenderEmptySpaceWithMinSize = useMemo(() => {
         if (node.children.length)
             return false;