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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isPatternComponent, isStructureWithRelativeHeight } from './utils/components.js';
-export { MEDIA_QUERY_REGEXP, getActiveBreakpointIndex, getFallbackBreakpointIndex, getValueForBreakpoint, isValidBreakpointValue, mediaQueryMatcher } from './utils/breakpoints.js';
+export { MEDIA_QUERY_REGEXP, getActiveBreakpointIndex, getFallbackBreakpointIndex, getValueForBreakpoint, isValidBreakpointValue, mediaQueryMatcher, mergeDesignValuesByBreakpoint } from './utils/breakpoints.js';
 export { DebugLogger, debug, disableDebug, enableDebug } from './utils/debugLogger.js';
 export { findOutermostCoordinates, getElementCoordinates } from './utils/domValues.js';
 export { isLinkToAsset } from './utils/isLinkToAsset.js';

package/dist/index.js

@@ -1412,6 +1412,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 = 'cf_debug';
 class DebugLogger {
@@ -2295,9 +2310,10 @@ const resolveComponentVariablesOverwrites = ({ patternNode, wrapperComponentVari
             const overwritingValue = wrapperComponentVariablesOverwrites?.[propertyValue.key];
             // Property definition from the parent pattern
             const propertyDefinition = wrapperComponentSettings?.variableDefinitions?.[propertyValue.key];
+            const defaultValue = propertyDefinition?.defaultValue;
             // The overwriting value is either a custom value from the experience or default value from a
             // wrapping pattern node that got trickled down to this nesting level.
-            resolvedValues[propertyName] = overwritingValue ?? propertyDefinition?.defaultValue;
+            resolvedValues[propertyName] = mergeDefaultAndOverwriteValues(defaultValue, overwritingValue);
         }
         else {
             // Keep raw values
@@ -2382,15 +2398,15 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
         // @ts-expect-error TODO: Types coming from validations erroneously assume that `defaultValue` can be a primitive value (e.g. string or number)
         const defaultValueKey = variableDefinition.defaultValue?.key;
         const defaultValue = unboundValues[defaultValueKey].value;
-        const userSetValue = componentVariablesOverwrites?.[variableDefinitionKey];
-        // userSetValue is a ComponentValue we can safely return the default value
-        if (!userSetValue || userSetValue.type === 'ComponentValue') {
+        const overwriteValue = componentVariablesOverwrites?.[variableDefinitionKey];
+        // overwriteValue is a ComponentValue we can safely return the default value
+        if (!overwriteValue || overwriteValue.type === 'ComponentValue') {
             return defaultValue;
         }
-        // at this point userSetValue will either be type of 'DesignValue' or 'BoundValue'
+        // at this point overwriteValue will either be type of 'DesignValue' or 'BoundValue'
         // so we recursively run resolution again to resolve it
         const resolvedValue = resolveBackgroundImageBinding({
-            variableData: userSetValue,
+            variableData: overwriteValue,
             getBoundEntityById,
             dataSource,
             unboundValues,
@@ -2543,10 +2559,10 @@ const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unbou
         let resolvedVariableData = variableData;
         if (variableData.type === 'ComponentValue') {
             const variableDefinition = componentSettings?.variableDefinitions[variableData.key];
-            if (variableDefinition.group === 'style' && variableDefinition.defaultValue !== undefined) {
-                const overrideVariableData = componentVariablesOverwrites?.[variableData.key];
-                resolvedVariableData =
-                    overrideVariableData || variableDefinition.defaultValue;
+            const defaultValue = variableDefinition.defaultValue;
+            if (variableDefinition.group === 'style' && defaultValue !== undefined) {
+                const overwriteVariableData = componentVariablesOverwrites?.[variableData.key];
+                resolvedVariableData = mergeDefaultAndOverwriteValues(defaultValue, overwriteVariableData);
             }
         }
         if (resolvedVariableData.type !== 'DesignValue') {
@@ -2602,6 +2618,12 @@ const toMediaQuery = ({ condition, cssByClassName }) => {
     const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
     return `@media(${mediaQueryRule}:${pixelValue}){${mediaQueryStyles}}`;
 };
+function mergeDefaultAndOverwriteValues(defaultValue, overwriteValue) {
+    if (defaultValue?.type === 'DesignValue' && overwriteValue?.type === 'DesignValue') {
+        return mergeDesignValuesByBreakpoint(defaultValue, overwriteValue);
+    }
+    return overwriteValue ?? defaultValue;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function get(obj, path) {
@@ -4114,5 +4136,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
     }
 }
 
-export { DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, treeMap, treeVisit, tryParseMessage, validateExperienceBuilderConfig };
+export { DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, mergeDesignValuesByBreakpoint, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, treeMap, treeVisit, tryParseMessage, validateExperienceBuilderConfig };
 //# sourceMappingURL=index.js.map