@contentful/experiences-visual-editor-react 1.36.0-dev-20250326T1634-bb7d4c2.0 → 1.36.0-dev-20250331T1251-7ba8661.0

package/dist/index.js

@@ -4646,6 +4646,9 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         if (!definition || node.type === ASSEMBLY_NODE_TYPE) {
             return propsBase;
         }
+        // Note, that here we iterate over DEFINITION variables, not the actual node variables
+        // this means that node may have "orphan" props, or some "newborn" props will be initialized
+        // with the default values.
         const extractedProps = Object.entries(definition.variables).reduce((acc, [variableName, variableDefinition]) => {
             const variableMapping = node.data.props[variableName];
             if (!variableMapping) {
@@ -4748,6 +4751,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         renderDropzone,
     ]);
     const cfStyles = useMemo(() => buildCfStyles(props), [props]);
+    const cfVisibility = props['cfVisibility'];
     const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
     const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;
     const isStructureComponent = isContentfulStructureComponent(node?.data.blockId);
@@ -4757,13 +4761,18 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         const overrideStyles = {};
         const wrapperStyles = { width: options?.wrapContainerWidth };
         if (requiresDragWrapper) {
-            if (cfStyles.width)
+            // when element is marked by user as not-visible, on that element the node `display: none !important`
+            // will be set and it will disappear. However, when such a node has a wrapper div, the wrapper
+            // should not have any css properties (at least not ones which force size), as such div should
+            // simply be a zero height wrapper around element with `display: none !important`.
+            // Hence we guard all wrapperStyles with `cfVisibility` check.
+            if (cfVisibility && cfStyles.width)
                 wrapperStyles.width = cfStyles.width;
-            if (cfStyles.height)
+            if (cfVisibility && cfStyles.height)
                 wrapperStyles.height = cfStyles.height;
-            if (cfStyles.maxWidth)
+            if (cfVisibility && cfStyles.maxWidth)
                 wrapperStyles.maxWidth = cfStyles.maxWidth;
-            if (cfStyles.margin)
+            if (cfVisibility && cfStyles.margin)
                 wrapperStyles.margin = cfStyles.margin;
         }
         // Override component styles to fill the wrapper
@@ -4798,6 +4807,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         node.data.id,
         draggingId,
         nodeRect,
+        cfVisibility,
     ]);
     // Styles that will be applied to the component element
     // This has to be memoized to avoid recreating the styles in useEditorModeClassName on every render