@contentful/experiences-visual-editor-react 1.40.0 → 1.40.1-dev-20250605T1324-83179af.0

package/dist/index.js

@@ -1406,6 +1406,7 @@ 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 {
@@ -1574,7 +1575,6 @@ const buildStyleTag = ({ styles, nodeId }) => {
 const buildCfStyles = (values) => {
     const cssProperties = {
         boxSizing: 'border-box',
-        ...transformVisibility(values.cfVisibility),
         margin: values.cfMargin,
         padding: values.cfPadding,
         backgroundColor: values.cfBackgroundColor,
@@ -4813,7 +4813,11 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         entityStore,
         renderDropzone,
     ]);
-    const cfStyles = useMemo(() => buildCfStyles(props), [props]);
+    const cfStyles = useMemo(() => ({
+        ...buildCfStyles(props),
+        // This is not handled by buildCfStyles as it requires separate disjunct media queries in preview mode
+        ...transformVisibility(props.cfVisibility),
+    }), [props]);
     const cfVisibility = props['cfVisibility'];
     const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
     const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;