@contentful/experiences-visual-editor-react 1.35.1 → 1.36.0-beta.0

package/dist/index.js

@@ -4077,11 +4077,11 @@ function useEditorSubscriber() {
                 return;
             }
             const eventData = tryParseMessage(event);
+            console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
             if (eventData.eventType === PostMessageMethods$2.REQUESTED_ENTITIES) {
                 // Expected message: This message is handled in the EntityStore to store fetched entities
                 return;
             }
-            console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
             switch (eventData.eventType) {
                 case INCOMING_EVENTS.ExperienceUpdated: {
                     const { tree, locale, changedNode, changedValueType, assemblies } = eventData.payload;
@@ -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
@@ -5365,8 +5375,8 @@ const getTooltipPositions = ({ previewSize, tooltipRect, coordinates, }) => {
     return newTooltipStyles;
 };
 
-var css_248z$1 = ".styles-module_DraggableComponent__oyE7Q,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO) {\n  position: relative;\n  transition: background-color 0.2s;\n  pointer-events: all;\n  box-sizing: border-box;\n  cursor: grab;\n}\n\n.styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO):before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  transition: outline 0.2s;\n  pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm:before {\n  outline-offset: -1px;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm {\n  pointer-events: all;\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_isAssembly__HstYv {\n  width: 100%;\n  height: 100%;\n}\n\n.styles-module_isRoot__c-c-x,\n.styles-module_isEmptyCanvas__Mm6Al {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__XZ1Ej {\n  min-height: 80px;\n  min-width: 80px;\n}\n\n.styles-module_isDragging__hldL4:not(.styles-module_isRoot__c-c-x):not(.styles-module_DraggableClone__CdKIH):before {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_isDestination__sE70P:not(.styles-module_isRoot__c-c-x):before {\n  transition:\n    outline 0.2s,\n    background-color 0.2s;\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 2;\n}\n\n.styles-module_DraggableClone__CdKIH:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DropzoneClone__xiT8j,\n.styles-module_DraggableClone__CdKIH,\n.styles-module_DropzoneClone__xiT8j *,\n.styles-module_DraggableClone__CdKIH * {\n  pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4) :not(.styles-module_DraggableComponent__oyE7Q) {\n  pointer-events: none;\n}\n\n.styles-module_isDraggingThisComponent__yCZTp {\n  overflow: hidden;\n}\n\n.styles-module_isSelected__c2QEJ:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_tooltipWrapper__kqvmR {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4 .styles-module_tooltipWrapper__kqvmR {\n  display: none;\n}\n\n.styles-module_overlay__knwhE {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 2;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.1s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__lUsiC {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__3BKl4 {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_isDragging__hldL4 > .styles-module_overlay__knwhE,\n.styles-module_isDragging__hldL4 > .styles-module_overlayContainer__lUsiC {\n  opacity: 0 !important;\n}\n\n.styles-module_isDragging__hldL4:not(.styles-module_Dropzone__3R-sm):before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_isHoveringComponent__f7G5m > div > .styles-module_overlay__knwhE,\n.styles-module_DraggableComponent__oyE7Q:hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)) > div > .styles-module_overlay__knwhE {\n  opacity: 1;\n}\n\n/* hovering related component in layers tab */\n\n.styles-module_DraggableComponent__oyE7Q:has(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z):before,\n.styles-module_DraggableComponent__oyE7Q:has(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z) .styles-module_DraggableComponent__oyE7Q:not(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z):before,\n.styles-module_isHoveringComponent__f7G5m:not(.styles-module_isAssemblyBlock__goT9z) .styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):before,\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):not(.styles-module_isDragging__hldL4):hover:before,\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4):hover .styles-module_DraggableComponent__oyE7Q:before {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n/* hovering component in layers tab */\n\n.styles-module_isHoveringComponent__f7G5m:not(.styles-module_isAssemblyBlock__goT9z):before,\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):not(.styles-module_isDragging__hldL4):hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)):before {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n/* hovering related pattern in layers tab */\n\n.styles-module_isAssemblyBlock__goT9z:has(.styles-module_isHoveringComponent__f7G5m):before,\n.styles-module_isAssemblyBlock__goT9z:has(.styles-module_isHoveringComponent__f7G5m) .styles-module_isAssemblyBlock__goT9z:not(.styles-module_isHoveringComponent__f7G5m):before,\n.styles-module_isHoveringComponent__f7G5m .styles-module_isAssemblyBlock__goT9z:before,\n\n.styles-module_isAssemblyBlock__goT9z:hover:before,\n.styles-module_isAssemblyBlock__goT9z:hover .styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4):hover .styles-module_isAssemblyBlock__goT9z:before {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n/* hovering pattern in layers tab */\n\n.styles-module_isAssemblyBlock__goT9z.styles-module_isHoveringComponent__f7G5m:before,\n\n.styles-module_isAssemblyBlock__goT9z:hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)):before {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
-var styles$1 = {"DraggableComponent":"styles-module_DraggableComponent__oyE7Q","Dropzone":"styles-module_Dropzone__3R-sm","isSlot":"styles-module_isSlot__HI9yO","isDragging":"styles-module_isDragging__hldL4","isAssembly":"styles-module_isAssembly__HstYv","isRoot":"styles-module_isRoot__c-c-x","isEmptyCanvas":"styles-module_isEmptyCanvas__Mm6Al","isEmptyZone":"styles-module_isEmptyZone__XZ1Ej","DraggableClone":"styles-module_DraggableClone__CdKIH","isDestination":"styles-module_isDestination__sE70P","DropzoneClone":"styles-module_DropzoneClone__xiT8j","isDraggingThisComponent":"styles-module_isDraggingThisComponent__yCZTp","isSelected":"styles-module_isSelected__c2QEJ","tooltipWrapper":"styles-module_tooltipWrapper__kqvmR","overlay":"styles-module_overlay__knwhE","overlayContainer":"styles-module_overlayContainer__lUsiC","overlayAssembly":"styles-module_overlayAssembly__3BKl4","isHoveringComponent":"styles-module_isHoveringComponent__f7G5m","isAssemblyBlock":"styles-module_isAssemblyBlock__goT9z"};
+var css_248z$1 = ".styles-module_DraggableComponent__oyE7Q,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO) {\n  position: relative;\n  transition: background-color 0.2s;\n  pointer-events: all;\n  box-sizing: border-box;\n  cursor: grab;\n}\n\n.styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO):before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  transition: outline 0.2s;\n  pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm:before {\n  outline-offset: -1px;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm {\n  pointer-events: all;\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_isAssembly__HstYv {\n  width: 100%;\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_fullHeight__afMfT {\n  height: 100%;\n}\n\n.styles-module_isRoot__c-c-x,\n.styles-module_isEmptyCanvas__Mm6Al {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__XZ1Ej {\n  min-height: 80px;\n  min-width: 80px;\n}\n\n.styles-module_isDragging__hldL4:not(.styles-module_isRoot__c-c-x):not(.styles-module_DraggableClone__CdKIH):before {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_isDestination__sE70P:not(.styles-module_isRoot__c-c-x):before {\n  transition:\n    outline 0.2s,\n    background-color 0.2s;\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 2;\n}\n\n.styles-module_DraggableClone__CdKIH:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DropzoneClone__xiT8j,\n.styles-module_DraggableClone__CdKIH,\n.styles-module_DropzoneClone__xiT8j *,\n.styles-module_DraggableClone__CdKIH * {\n  pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4) :not(.styles-module_DraggableComponent__oyE7Q) {\n  pointer-events: none;\n}\n\n.styles-module_isDraggingThisComponent__yCZTp {\n  overflow: hidden;\n}\n\n.styles-module_isSelected__c2QEJ:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_tooltipWrapper__kqvmR {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4 .styles-module_tooltipWrapper__kqvmR {\n  display: none;\n}\n\n.styles-module_overlay__knwhE {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 2;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.1s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__lUsiC {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__3BKl4 {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_isDragging__hldL4 > .styles-module_overlay__knwhE,\n.styles-module_isDragging__hldL4 > .styles-module_overlayContainer__lUsiC {\n  opacity: 0 !important;\n}\n\n.styles-module_isDragging__hldL4:not(.styles-module_Dropzone__3R-sm):before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_isHoveringComponent__f7G5m > div > .styles-module_overlay__knwhE,\n.styles-module_DraggableComponent__oyE7Q:hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)) > div > .styles-module_overlay__knwhE {\n  opacity: 1;\n}\n\n/* hovering related component in layers tab */\n\n.styles-module_DraggableComponent__oyE7Q:has(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z):before,\n.styles-module_DraggableComponent__oyE7Q:has(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z) .styles-module_DraggableComponent__oyE7Q:not(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z):before,\n.styles-module_isHoveringComponent__f7G5m:not(.styles-module_isAssemblyBlock__goT9z) .styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):before,\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):not(.styles-module_isDragging__hldL4):hover:before,\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4):hover .styles-module_DraggableComponent__oyE7Q:before {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n/* hovering component in layers tab */\n\n.styles-module_isHoveringComponent__f7G5m:not(.styles-module_isAssemblyBlock__goT9z):before,\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):not(.styles-module_isDragging__hldL4):hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)):before {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n/* hovering related pattern in layers tab */\n\n.styles-module_isAssemblyBlock__goT9z:has(.styles-module_isHoveringComponent__f7G5m):before,\n.styles-module_isAssemblyBlock__goT9z:has(.styles-module_isHoveringComponent__f7G5m) .styles-module_isAssemblyBlock__goT9z:not(.styles-module_isHoveringComponent__f7G5m):before,\n.styles-module_isHoveringComponent__f7G5m .styles-module_isAssemblyBlock__goT9z:before,\n\n.styles-module_isAssemblyBlock__goT9z:hover:before,\n.styles-module_isAssemblyBlock__goT9z:hover .styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4):hover .styles-module_isAssemblyBlock__goT9z:before {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n/* hovering pattern in layers tab */\n\n.styles-module_isAssemblyBlock__goT9z.styles-module_isHoveringComponent__f7G5m:before,\n\n.styles-module_isAssemblyBlock__goT9z:hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)):before {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
+var styles$1 = {"DraggableComponent":"styles-module_DraggableComponent__oyE7Q","Dropzone":"styles-module_Dropzone__3R-sm","isSlot":"styles-module_isSlot__HI9yO","isDragging":"styles-module_isDragging__hldL4","isAssembly":"styles-module_isAssembly__HstYv","fullHeight":"styles-module_fullHeight__afMfT","isRoot":"styles-module_isRoot__c-c-x","isEmptyCanvas":"styles-module_isEmptyCanvas__Mm6Al","isEmptyZone":"styles-module_isEmptyZone__XZ1Ej","DraggableClone":"styles-module_DraggableClone__CdKIH","isDestination":"styles-module_isDestination__sE70P","DropzoneClone":"styles-module_DropzoneClone__xiT8j","isDraggingThisComponent":"styles-module_isDraggingThisComponent__yCZTp","isSelected":"styles-module_isSelected__c2QEJ","tooltipWrapper":"styles-module_tooltipWrapper__kqvmR","overlay":"styles-module_overlay__knwhE","overlayContainer":"styles-module_overlayContainer__lUsiC","overlayAssembly":"styles-module_overlayAssembly__3BKl4","isHoveringComponent":"styles-module_isHoveringComponent__f7G5m","isAssemblyBlock":"styles-module_isAssemblyBlock__goT9z"};
 styleInject(css_248z$1);
 
 const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer, isSelected, }) => {
@@ -5720,6 +5730,10 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     if (!resolveDesignValue) {
         return null;
     }
+    const isPatternWrapperComponentFullHeight = isRootAssembly
+        ? node.children.length === 1 &&
+            resolveDesignValue(node?.children[0]?.data.props.cfHeight?.valuesByBreakpoint ?? {}, 'cfHeight') === '100%'
+        : false;
     return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds })) }, (provided, snapshot) => {
         return (React.createElement(WrapperComponent, { ...(provided || { droppableProps: {} }).droppableProps, ...htmlDraggableProps, ...htmlProps, ref: (refNode) => {
                 if (dragProps?.innerRef) {
@@ -5734,6 +5748,7 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
                 [styles$1.isEmptyZone]: !content.length,
                 [styles$1.isAssembly]: isRootAssembly,
                 [styles$1.isSlot]: Boolean(slotId),
+                [styles$1.fullHeight]: isPatternWrapperComponentFullHeight,
             }) },
             isEmptyCanvas ? (React.createElement(EmptyContainer, { isDragging: isRootZone && userIsDragging })) : (content
                 .filter((node) => node.data.slotId === slotId)