@contentful/experiences-visual-editor-react 1.37.3-dev-20250522T1032-0caa03f.0 → 1.37.3-dev-20250523T0645-49fc5b0.0

package/dist/index.js

@@ -1029,11 +1029,21 @@ const builtInStylesWithDesignTokens = [
 const isValidBreakpointValue = (value) => {
     return value !== undefined && value !== null && value !== '';
 };
-const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName, resolveDesignTokens = true) => {
+const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, 
+/** Provide the name for built-in styles to replace design tokens. Supported properties are:
+ * cfMargin, cfPadding, cfGap, cfWidth, cfHeight, cfBackgroundColor,
+ * cfBorder, cfBorderRadius, cfFontSize, cfLineHeight, cfLetterSpacing,
+ * cfTextColor, cfMaxWidth
+ */
+propertyName, resolveDesignTokens = true) => {
     const eventuallyResolveDesignTokens = (value) => {
+        // This is used externally in the web app to determine the original persisted value
+        if (!resolveDesignTokens) {
+            return value;
+        }
         // For some built-in design properties, we support design tokens
-        if (builtInStylesWithDesignTokens.includes(variableName)) {
-            return getDesignTokenRegistration(value, variableName);
+        if (propertyName && builtInStylesWithDesignTokens.includes(propertyName)) {
+            return getDesignTokenRegistration(value, propertyName);
         }
         // For all other properties, we just return the breakpoint-specific value
         return value;
@@ -1044,18 +1054,12 @@ const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpoint
             const breakpointId = breakpoints[index]?.id;
             if (isValidBreakpointValue(valuesByBreakpoint[breakpointId])) {
                 // If the value is defined, we use it and stop the breakpoints cascade
-                if (resolveDesignTokens) {
-                    return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
-                }
-                return valuesByBreakpoint[breakpointId];
+                return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
             }
         }
         const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
         if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
-            if (resolveDesignTokens) {
-                return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
-            }
-            return valuesByBreakpoint[fallbackBreakpointId];
+            return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
         }
     }
     else {
@@ -1742,7 +1746,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
         const optionsVariableName = 'cfImageOptions';
         const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
             ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
+            : {});
         if (!options) {
             console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
             return;
@@ -1767,7 +1771,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
         const optionsVariableName = 'cfBackgroundImageOptions';
         const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
             ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
+            : {});
         if (!options) {
             console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
             return;
@@ -3108,10 +3112,10 @@ const useBreakpoints = (breakpoints) => {
             });
         };
     }, [breakpoints]);
-    const resolveDesignValue = useCallback((valuesByBreakpoint, variableName) => {
+    const resolveDesignValue = useCallback((valuesByBreakpoint, propertyName) => {
         const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
         const activeBreakpointIndex = getActiveBreakpointIndex(breakpoints, mediaQueryMatches, fallbackBreakpointIndex);
-        return getValueForBreakpoint(valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName);
+        return getValueForBreakpoint(valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, propertyName);
     }, [mediaQueryMatches, breakpoints]);
     return { resolveDesignValue };
 };
@@ -4614,7 +4618,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
     const props = useMemo(() => {
         const propsBase = {
             cfSsrClassName: node.data.props.cfSsrClassName
-                ? resolveDesignValue(node.data.props.cfSsrClassName.valuesByBreakpoint, 'cfSsrClassName')
+                ? resolveDesignValue(node.data.props.cfSsrClassName.valuesByBreakpoint)
                 : undefined,
         };
         // Don't enrich the assembly wrapper node with props
@@ -5396,7 +5400,7 @@ function useSingleColumn(node, resolveDesignValue) {
         if (cfWrapColumns.type !== 'DesignValue') {
             return false;
         }
-        return resolveDesignValue(cfWrapColumns.valuesByBreakpoint, 'cfWrapColumns');
+        return resolveDesignValue(cfWrapColumns.valuesByBreakpoint);
     }, [tree, node, isSingleColumn, resolveDesignValue]);
     return {
         isSingleColumn,
@@ -5540,7 +5544,7 @@ const useDropzoneDirection = ({ resolveDesignValue, node, zoneId }) => {
             if (!designValues || !resolveDesignValue || designValues.type !== 'DesignValue') {
                 return 'vertical';
             }
-            const direction = resolveDesignValue(designValues.valuesByBreakpoint, 'cfFlexDirection');
+            const direction = resolveDesignValue(designValues.valuesByBreakpoint);
             if (direction === 'row') {
                 return 'horizontal';
             }