@contentful/experiences-visual-editor-react 3.6.0 → 3.6.1-dev-20250904T1515-03d5e42.0

package/dist/renderApp.js

@@ -50152,6 +50152,15 @@ const maybeMergePatternDefaultDesignValues = ({ variableName, variableMapping, n
     return variableMapping.valuesByBreakpoint;
 };
 
+const checkIsNodeVisible = (node, resolveDesignValue) => {
+    if (node.type === ASSEMBLY_NODE_TYPE || node.type === ROOT_ID) {
+        // If this is a wrapping pattern/root with no visible children, it is invisible as well
+        return node.children.some((childNode) => checkIsNodeVisible(childNode, resolveDesignValue));
+    }
+    // Check if the current node is visible (`cfVisibility` is enforced on all nodes)
+    return !!resolveDesignValue(node.data.props['cfVisibility'].valuesByBreakpoint);
+};
+
 const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesignValue, definition, options, }) => {
     const unboundValues = useEditorStore((state) => state.unboundValues);
     const hyperlinkPattern = useEditorStore((state) => state.hyperLinkPattern);
@@ -50292,7 +50301,8 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
         ...transformVisibility(props.cfVisibility),
     }), [props]);
     const shouldRenderEmptySpaceWithMinSize = reactExports.useMemo(() => {
-        if (node.children.length)
+        const isAnyChildrenVisible = node.children.some((childNode) => checkIsNodeVisible(childNode, resolveDesignValue));
+        if (isAnyChildrenVisible)
             return false;
         // Render with minimum height and with in those two scenarios:
         if (isStructureWithRelativeHeight(node.data.blockId, cfStyles.height))
@@ -50300,7 +50310,7 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
         if (definition?.children)
             return true;
         return false;
-    }, [cfStyles.height, definition?.children, node.children.length, node.data.blockId]);
+    }, [cfStyles.height, definition?.children, node.children, node.data.blockId, resolveDesignValue]);
     // Styles that will be applied to the component element
     const componentStyles = reactExports.useMemo(() => ({
         ...cfStyles,
@@ -50321,7 +50331,8 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
             editorProps.isEditorMode = true;
         }
         if (options?.enableEditorProperties?.isEmpty) {
-            editorProps.isEmpty = node.children.length === 0;
+            const areAllChildrenHidden = node.children.every((childNode) => !checkIsNodeVisible(childNode, resolveDesignValue));
+            editorProps.isEmpty = node.children.length === 0 || areAllChildrenHidden;
         }
         if (options?.enableEditorProperties?.nodeBlockId) {
             editorProps.nodeBlockId = node.data.blockId;
@@ -50331,12 +50342,12 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
         }
         return editorProps;
     }, [
-        node.children.length,
-        node.data.blockId,
         options?.enableEditorProperties?.isEditorMode,
         options?.enableEditorProperties?.isEmpty,
         options?.enableEditorProperties?.nodeBlockId,
         options?.enableCustomEditorView,
+        node,
+        resolveDesignValue,
     ]);
     const componentProps = reactExports.useMemo(() => {
         const sharedProps = {
@@ -50608,7 +50619,8 @@ const RootRenderer = ({ inMemoryEntitiesStore, canvasMode }) => {
     const wrappingPatternIds = rootBlockId !== ROOT_ID ? new Set([rootBlockId]) : new Set();
     const entityStore = inMemoryEntitiesStore((state) => state.entityStore);
     const areEntitiesFetched = inMemoryEntitiesStore((state) => state.areEntitiesFetched);
-    return (React$1.createElement(React$1.Fragment, null, !tree.root.children.length ? (React$1.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React$1.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }))))));
+    const isAnyNodeVisible = checkIsNodeVisible(tree.root, resolveDesignValue);
+    return (React$1.createElement(React$1.Fragment, null, !isAnyNodeVisible ? (React$1.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React$1.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }))))));
 };
 
 const useInitializeEditor = (inMemoryEntitiesStore) => {