@contentful/experiences-visual-editor-react 3.6.0-dev-20250903T1157-8aba2a4.0 → 3.6.1-beta.0

package/dist/index.js

@@ -3276,7 +3276,7 @@ const useEditorStore = create((set, get) => ({
     },
 }));
 
-var css_248z$8 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);:root{--cf-color-white:#fff;--cf-color-black:#000;--cf-color-gray100:#f7f9fa;--cf-color-gray400:#aec1cc;--cf-color-gray400-rgb:174,193,204;--cf-spacing-0:0rem;--cf-spacing-1:0.125rem;--cf-spacing-2:0.25rem;--cf-spacing-3:0.375rem;--cf-spacing-4:0.5rem;--cf-spacing-5:0.625rem;--cf-spacing-6:0.75rem;--cf-spacing-7:0.875rem;--cf-spacing-8:1rem;--cf-spacing-9:1.25rem;--cf-spacing-10:1.5rem;--cf-spacing-11:1.75rem;--cf-spacing-12:2rem;--cf-spacing-13:2.25rem;--cf-text-xs:0.75rem;--cf-text-sm:0.875rem;--cf-text-base:1rem;--cf-text-lg:1.125rem;--cf-text-xl:1.25rem;--cf-text-2xl:1.5rem;--cf-text-3xl:2rem;--cf-text-4xl:2.75rem;--cf-font-light:300;--cf-font-normal:400;--cf-font-medium:500;--cf-font-semibold:600;--cf-font-bold:700;--cf-font-extra-bold:800;--cf-font-black:900;--cf-border-radius-none:0px;--cf-border-radius-sm:0.125rem;--cf-border-radius:0.25rem;--cf-border-radius-md:0.375rem;--cf-border-radius-lg:0.5rem;--cf-border-radius-xl:0.75rem;--cf-border-radius-2xl:1rem;--cf-border-radius-3xl:1.5rem;--cf-border-radius-full:9999px;--cf-font-family-sans:Archivo,Helvetica,Arial,sans-serif;--cf-font-family-serif:Georgia,Cambria,Times New Roman,Times,serif;--cf-max-width-full:100%;--cf-button-bg:var(--cf-color-black);--cf-button-color:var(--cf-color-white);--cf-text-color:var(--cf-color-black)}*{box-sizing:border-box}";
+var css_248z$8 = ":root{--cf-color-white:#fff;--cf-color-black:#000;--cf-color-gray100:#f7f9fa;--cf-color-gray400:#aec1cc;--cf-color-gray400-rgb:174,193,204;--cf-spacing-0:0rem;--cf-spacing-1:0.125rem;--cf-spacing-2:0.25rem;--cf-spacing-3:0.375rem;--cf-spacing-4:0.5rem;--cf-spacing-5:0.625rem;--cf-spacing-6:0.75rem;--cf-spacing-7:0.875rem;--cf-spacing-8:1rem;--cf-spacing-9:1.25rem;--cf-spacing-10:1.5rem;--cf-spacing-11:1.75rem;--cf-spacing-12:2rem;--cf-spacing-13:2.25rem;--cf-text-xs:0.75rem;--cf-text-sm:0.875rem;--cf-text-base:1rem;--cf-text-lg:1.125rem;--cf-text-xl:1.25rem;--cf-text-2xl:1.5rem;--cf-text-3xl:2rem;--cf-text-4xl:2.75rem;--cf-font-light:300;--cf-font-normal:400;--cf-font-medium:500;--cf-font-semibold:600;--cf-font-bold:700;--cf-font-extra-bold:800;--cf-font-black:900;--cf-border-radius-none:0px;--cf-border-radius-sm:0.125rem;--cf-border-radius:0.25rem;--cf-border-radius-md:0.375rem;--cf-border-radius-lg:0.5rem;--cf-border-radius-xl:0.75rem;--cf-border-radius-2xl:1rem;--cf-border-radius-3xl:1.5rem;--cf-border-radius-full:9999px;--cf-max-width-full:100%;--cf-button-bg:var(--cf-color-black);--cf-button-color:var(--cf-color-white);--cf-text-color:var(--cf-color-black)}*{box-sizing:border-box}";
 styleInject(css_248z$8);
 
 /** @deprecated will be removed when dropping backward compatibility for old DND */
@@ -4756,6 +4756,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);
@@ -4896,7 +4905,8 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
         ...transformVisibility(props.cfVisibility),
     }), [props]);
     const shouldRenderEmptySpaceWithMinSize = 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))
@@ -4904,7 +4914,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 = useMemo(() => ({
         ...cfStyles,
@@ -4925,7 +4935,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;
@@ -4935,12 +4946,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 = useMemo(() => {
         const sharedProps = {
@@ -5212,7 +5223,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.createElement(React.Fragment, null, !tree.root.children.length ? (React.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }))))));
+    const isAnyNodeVisible = checkIsNodeVisible(tree.root, resolveDesignValue);
+    return (React.createElement(React.Fragment, null, !isAnyNodeVisible ? (React.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }))))));
 };
 
 const useInitializeEditor = (inMemoryEntitiesStore) => {