@contentful/experiences-visual-editor-react 3.0.0-alpha-20250709T0751-bcbfd82.0 → 3.0.0-alpha-20250801T0844-68b7839.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 {};
@@ -4691,7 +4702,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;
@@ -4884,6 +4900,8 @@ const useCanvasGeometryUpdates = ({ tree }) => {
     // Handling DOM mutations
     useEffect(() => {
         const observer = new MutationObserver(() => debouncedUpdateGeometry(treeRef.current, 'mutation'));
+        // send initial geometry in case the tree is empty
+        debouncedUpdateGeometry(treeRef.current, 'mutation');
         observer.observe(document.documentElement, {
             childList: true,
             subtree: true,