@contentful/experiences-visual-editor-react 1.37.1-dev-20250513T1442-6484576.0 → 1.37.1-dev-20250514T1115-cc6f809.0

package/dist/index.js

@@ -1063,6 +1063,21 @@ const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpoint
         return valuesByBreakpoint;
     }
 };
+/** Overwrites the default value breakpoint by breakpoint. If a breakpoint
+ * is not overwritten, it will fall back to the default. */
+const mergeDesignValuesByBreakpoint = (defaultValue, overwriteValue) => {
+    const mergedValuesByBreakpoint = { ...defaultValue.valuesByBreakpoint };
+    for (const [breakpointId, value] of Object.entries(overwriteValue.valuesByBreakpoint)) {
+        if (!isValidBreakpointValue(value)) {
+            continue;
+        }
+        mergedValuesByBreakpoint[breakpointId] = value;
+    }
+    return {
+        type: 'DesignValue',
+        valuesByBreakpoint: mergedValuesByBreakpoint,
+    };
+};
 
 const CF_DEBUG_KEY$1 = 'cf_debug';
 let DebugLogger$1 = class DebugLogger {
@@ -3059,6 +3074,26 @@ const useTreeStore = create((set, get) => ({
             reparentChildNode(sourceIndex, destinationIndex, sourceParentId, destinationParentId, state.tree.root);
         }));
     },
+    // breadth first search
+    findNodeById(nodeId) {
+        if (!nodeId) {
+            return null;
+        }
+        const rootNode = get().tree.root;
+        const visitedNodeIds = [];
+        const queue = [];
+        let currentNode = rootNode;
+        queue.push(currentNode);
+        while (queue.length) {
+            currentNode = queue.shift();
+            visitedNodeIds.push(currentNode.data.id);
+            if (currentNode.data.id === nodeId) {
+                return currentNode;
+            }
+            queue.push(...currentNode.children);
+        }
+        return null;
+    },
 }));
 const hasBreakpointDiffs = (currentTree, newTree) => {
     const currentBreakpoints = currentTree?.root?.data?.breakpoints ?? [];
@@ -4604,6 +4639,38 @@ const getUnboundValues = ({ key, fallback, unboundValues, }) => {
     return get$1(unboundValues, lodashPath, fallback);
 };
 
+/**
+ * When node is a pattern block, we need to look up for default values of the pattern variables
+ * and merge them with the updated node props.
+ * While loop is making sure that we look up for the updated default values in the parent pattern
+ * component settings as well.
+ */
+const maybeMergePatternDefaultDesignValues = ({ variableName, variableMapping, node, findNodeById, }) => {
+    if (node.type === ASSEMBLY_BLOCK_NODE_TYPE) {
+        const patternId = node.data.pattern?.id;
+        const exposedPropertyName = node['exposedPropertyNameToKeyMap'][variableName];
+        if (!exposedPropertyName || !patternId) {
+            return variableMapping.valuesByBreakpoint;
+        }
+        const exposedVariableDefinition = componentRegistry.get(patternId)?.definition.variables[exposedPropertyName];
+        let exposedDefaultValue = exposedVariableDefinition?.defaultValue;
+        let parentPatternNode = findNodeById(node.data.pattern?.nodeId);
+        while (parentPatternNode) {
+            const parentPatternId = parentPatternNode.data.pattern?.id;
+            const nextKey = parentPatternNode['exposedPropertyNameToKeyMap'][exposedPropertyName];
+            if (!parentPatternId || !nextKey) {
+                break;
+            }
+            const parentPatternVariableDefinition = componentRegistry.get(parentPatternId)?.definition.variables[nextKey];
+            exposedDefaultValue = mergeDesignValuesByBreakpoint(parentPatternVariableDefinition?.defaultValue, exposedDefaultValue);
+            parentPatternNode = findNodeById(parentPatternNode.data.pattern?.nodeId);
+        }
+        const mergedDesignValue = mergeDesignValuesByBreakpoint(exposedDefaultValue, variableMapping);
+        return mergedDesignValue.valuesByBreakpoint;
+    }
+    return variableMapping.valuesByBreakpoint;
+};
+
 const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, options, userIsDragging, requiresDragWrapper, }) => {
     const unboundValues = useEditorStore((state) => state.unboundValues);
     const hyperlinkPattern = useEditorStore((state) => state.hyperLinkPattern);
@@ -4612,6 +4679,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
     const entityStore = useEntityStore((state) => state.entityStore);
     const draggingId = useDraggedItemStore((state) => state.onBeforeCaptureId);
     const nodeRect = useDraggedItemStore((state) => state.domRect);
+    const findNodeById = useTreeStore((state) => state.findNodeById);
     const isEmptyZone = !node.children.length;
     const props = useMemo(() => {
         const propsBase = {
@@ -4635,7 +4703,13 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
                 };
             }
             if (variableMapping.type === 'DesignValue') {
-                const valuesByBreakpoint = resolveDesignValue(variableMapping.valuesByBreakpoint, variableName);
+                const value = maybeMergePatternDefaultDesignValues({
+                    variableName,
+                    variableMapping,
+                    node,
+                    findNodeById,
+                });
+                const valuesByBreakpoint = resolveDesignValue(value, variableName);
                 const designValue = variableName === 'cfHeight'
                     ? calculateNodeDefaultHeight({
                         blockId: node.data.blockId,
@@ -4726,6 +4800,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         unboundValues,
         entityStore,
         renderDropzone,
+        findNodeById,
     ]);
     const cfStyles = useMemo(() => buildCfStyles(props), [props]);
     const cfVisibility = props['cfVisibility'];