@contentful/experiences-sdk-react 2.0.1-dev-20250711T1321-f1681f8.0 → 2.0.2-dev-20250717T1206-7838c2a.0

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
 export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
 import { ContentfulClientApi } from 'contentful';
 
-declare const SDK_VERSION = "2.0.1-dev-20250711T1321-f1681f8.0";
+declare const SDK_VERSION = "2.0.2-dev-20250717T1206-7838c2a.0";
 
 type ExperienceRootProps = {
     experience?: Experience<EntityStore> | string | null;

package/dist/sdkVersion.js

@@ -1,4 +1,4 @@
-const SDK_VERSION = '2.0.1-dev-20250711T1321-f1681f8.0';
+const SDK_VERSION = '2.0.2-dev-20250717T1206-7838c2a.0';
 
 export { SDK_VERSION };
 //# sourceMappingURL=sdkVersion.js.map

package/dist/sdkVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '2.0.1-dev-20250711T1321-f1681f8.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
+{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '2.0.2-dev-20250717T1206-7838c2a.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}

package/dist/src/sdkVersion.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.1-dev-20250711T1321-f1681f8.0";
+export declare const SDK_VERSION = "2.0.2-dev-20250717T1206-7838c2a.0";

package/dist/src/utils/parseComponentProps.d.ts

@@ -15,7 +15,7 @@ type ResolveBoundValueType = (data: {
     dataType: ComponentDefinitionVariableType;
     binding: BoundValue;
 }) => BoundComponentPropertyTypes;
-export declare const parseComponentProps: ({ breakpoints, mainBreakpoint, componentDefinition, patternRootNodeIdsChain, node, resolveDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, resolvePrebindingValue, }: {
+export declare const parseComponentProps: ({ breakpoints, componentDefinition, patternRootNodeIdsChain, node, resolveDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, resolvePrebindingValue, }: {
     breakpoints: Breakpoint[];
     mainBreakpoint: Breakpoint;
     componentDefinition: ComponentDefinition;

package/dist/test/__fixtures__/componentTreeNode.d.ts

@@ -1,2 +1,3 @@
 import { ComponentTreeNode } from '@contentful/experiences-validators';
 export declare const createComponentTreeNode: () => ComponentTreeNode;
+export declare const createComponentTreeNodeWithCfBackgroundImageUrl: () => ComponentTreeNode;

package/dist/utils/parseComponentProps.js

@@ -2,10 +2,19 @@ import { debug, isCfStyleAttribute } from '@contentful/experiences-core';
 import { createStylesheetsForBuiltInStyles, convertResolvedDesignValuesToMediaQuery } from '../hooks/useMediaQuery.js';
 
 // TODO: Test this for nested patterns as the name might be just a random hash without the actual name (needs to be validated).
+/**
+ * Checks if prop is a "siamese" prop. So far we have only one such prop: `cfBackgroundImageUrl`.
+ * It is considered "siamese" because despite being a content variable, it always goes in pair
+ * (is coupled) with the `cfBackgroundImageOptions` design variable. Without presence of the
+ * `cfBackgroundImageUrl` the `cfBackgroundImageOptions` is useless (and is not going to be
+ * rendered by the styleTransformers.ts#transformBackgroundImageUrl()).
+ *
+ * Because of this coupling, we need to create an "ephemeral" cfBackgroundImageUrl style(!) prop.
+ */
 const isSpecialCaseCssProp = (propName) => {
     return propName === 'cfBackgroundImageUrl' || propName.startsWith('cfBackgroundImageUrl_');
 };
-const parseComponentProps = ({ breakpoints, mainBreakpoint, componentDefinition, patternRootNodeIdsChain, node, resolveDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, resolvePrebindingValue, }) => {
+const parseComponentProps = ({ breakpoints, componentDefinition, patternRootNodeIdsChain, node, resolveDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, resolvePrebindingValue, }) => {
     const styleProps = {};
     const customDesignProps = {};
     const contentProps = {};
@@ -34,7 +43,16 @@ const parseComponentProps = ({ breakpoints, mainBreakpoint, componentDefinition,
                 });
                 const propValue = boundValue ?? propDefinition.defaultValue;
                 if (isSpecialCaseCssProp(propName)) {
-                    styleProps[propName] = { [mainBreakpoint.id]: propValue };
+                    // styleProps[propName] = { [mainBreakpoint.id]: propValue };
+                    // Here we create kind of "fake" style property out of a bound value.
+                    // As bound values are breakpoint-universal (they apply to all breakpoints),
+                    // but styleProps are breakpoint-specific, we need to ensure that
+                    // semantically our "fake" emphemeral style property will be universall as well,
+                    // by expanding it to all the breakpoints. This is important as
+                    // styleTransformers.ts#transformBackgroundImageUrl() expects
+                    // cfBackgroundImageUrl to be present for all breakpoints
+                    // where cfBackgroundImageOptions is present.
+                    styleProps[propName] = Object.fromEntries(breakpoints.map((b) => [b.id, propValue]));
                 }
                 else {
                     contentProps[propName] = propValue;
@@ -56,7 +74,7 @@ const parseComponentProps = ({ breakpoints, mainBreakpoint, componentDefinition,
                     defaultValue: propDefinition.defaultValue,
                 });
                 if (isSpecialCaseCssProp(propName)) {
-                    styleProps[propName] = { [mainBreakpoint.id]: unboundValue };
+                    styleProps[propName] = Object.fromEntries(breakpoints.map((b) => [b.id, unboundValue]));
                 }
                 else {
                     contentProps[propName] = unboundValue;
@@ -73,7 +91,7 @@ const parseComponentProps = ({ breakpoints, mainBreakpoint, componentDefinition,
                     resolveBoundValue,
                 }) ?? propDefinition.defaultValue;
                 if (isSpecialCaseCssProp(propName)) {
-                    styleProps[propName] = { [mainBreakpoint.id]: propValue };
+                    styleProps[propName] = Object.fromEntries(breakpoints.map((b) => [b.id, propValue]));
                 }
                 else {
                     contentProps[propName] = propValue;

package/dist/utils/parseComponentProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"parseComponentProps.js","sources":["../../../src/utils/parseComponentProps.ts"],"sourcesContent":["import { isCfStyleAttribute, debug } from '@contentful/experiences-core';\nimport {\n  BoundComponentPropertyTypes,\n  BoundValue,\n  Breakpoint,\n  ComponentDefinition,\n  ComponentDefinitionVariable,\n  ComponentDefinitionVariableType,\n  ComponentTreeNode,\n  DesignValue,\n  PrimitiveValue,\n  ResolveDesignValueType,\n} from '@contentful/experiences-core/types';\nimport { convertResolvedDesignValuesToMediaQuery } from '../hooks/useMediaQuery';\nimport { createStylesheetsForBuiltInStyles } from '../hooks/useMediaQuery';\n\n// TODO: Test this for nested patterns as the name might be just a random hash without the actual name (needs to be validated).\nconst isSpecialCaseCssProp = (propName: string) => {\n  return propName === 'cfBackgroundImageUrl' || propName.startsWith('cfBackgroundImageUrl_');\n};\n\n/**\n * The previous logic of prop mapping was too complex and mixed different ues cases together.\n * In this function, I aim to simplify the logic by focusing on the following specific cases FOR PREVIEW/DELIVERY MODES\n * 1) Any non `DesignValue` props should be resolved and returned as is\n * 2) Some exceptions like `cfImageAsset` and `cfBackgroundImageUrl` (BoundValue) should be handled separately\n * and be resolved for the default breakpoint only (cause we don't allow binding per breakpoint anyway)\n * 3) Those DesignValue props which can be converted to CSS should be grouped and resolved into a CSS media query\n * for each breakpoint\n * 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically\n * for each breakpoint\n */\ntype ResolveBoundValueType = (data: {\n  propertyName: string;\n  dataType: ComponentDefinitionVariableType;\n  binding: BoundValue;\n}) => BoundComponentPropertyTypes;\n\nexport const parseComponentProps = ({\n  breakpoints,\n  mainBreakpoint,\n  componentDefinition,\n  patternRootNodeIdsChain,\n  node,\n  resolveDesignValue,\n  resolveBoundValue,\n  resolveHyperlinkValue,\n  resolveUnboundValue,\n  resolvePrebindingValue,\n}: {\n  breakpoints: Breakpoint[];\n  mainBreakpoint: Breakpoint;\n  componentDefinition: ComponentDefinition;\n  patternRootNodeIdsChain?: string;\n  node: ComponentTreeNode;\n  resolveDesignValue: ResolveDesignValueType;\n  resolveBoundValue: ResolveBoundValueType;\n  resolveHyperlinkValue: (data: { linkTargetKey: string }) => string | null;\n  resolveUnboundValue: (data: {\n    mappingKey: string;\n    defaultValue: ComponentDefinitionVariable['defaultValue'];\n  }) => PrimitiveValue;\n  resolvePrebindingValue: (data: {\n    propertyName: string;\n    mappingKey: string;\n    dataType: ComponentDefinitionVariableType;\n    resolveBoundValue: ResolveBoundValueType;\n  }) => PrimitiveValue;\n}) => {\n  const styleProps: Record<string, DesignValue['valuesByBreakpoint']> = {};\n  const customDesignProps: Record<string, PrimitiveValue> = {};\n  const contentProps: Record<string, PrimitiveValue> = {};\n\n  debug.log('Parsing component props for node with id: ', node.id);\n\n  for (const [propName, propDefinition] of Object.entries(componentDefinition.variables)) {\n    const propertyValue = node.variables[propName];\n    if (!propertyValue) continue;\n\n    switch (propertyValue.type) {\n      case 'DesignValue': {\n        if (isCfStyleAttribute(propName)) {\n          // for such properties we know how to convert them to CSS, so we will build a media query from it below after the loop is over\n          styleProps[propName] = propertyValue.valuesByBreakpoint;\n        } else {\n          // for custom design props, the value will be resolved with the javascript per breakpoint at runtime\n          customDesignProps[propName] = resolveDesignValue(propertyValue.valuesByBreakpoint);\n        }\n        break;\n      }\n      case 'BoundValue': {\n        const boundValue = resolveBoundValue({\n          propertyName: propName,\n          dataType: propDefinition.type as ComponentDefinitionVariableType,\n          binding: propertyValue,\n        });\n\n        const propValue = boundValue ?? propDefinition.defaultValue;\n\n        if (isSpecialCaseCssProp(propName)) {\n          styleProps[propName] = { [mainBreakpoint.id]: propValue };\n        } else {\n          contentProps[propName] = propValue;\n        }\n        break;\n      }\n\n      case 'HyperlinkValue': {\n        const hyperlink = resolveHyperlinkValue({\n          linkTargetKey: propertyValue.linkTargetKey,\n        });\n        if (hyperlink) {\n          contentProps[propName] = hyperlink;\n        }\n        break;\n      }\n      case 'UnboundValue': {\n        const unboundValue = resolveUnboundValue({\n          mappingKey: propertyValue.key,\n          defaultValue: propDefinition.defaultValue,\n        });\n\n        if (isSpecialCaseCssProp(propName)) {\n          styleProps[propName] = { [mainBreakpoint.id]: unboundValue };\n        } else {\n          contentProps[propName] = unboundValue;\n        }\n        break;\n      }\n      case 'ComponentValue': {\n        // This can either be a design (style) or a content property.\n        // Where prebinding is used, we resolve like they are a BoundValue.\n        const propValue =\n          resolvePrebindingValue({\n            propertyName: propName,\n            mappingKey: propertyValue.key,\n            dataType: propDefinition.type,\n            resolveBoundValue,\n          }) ?? propDefinition.defaultValue;\n\n        if (isSpecialCaseCssProp(propName)) {\n          styleProps[propName] = { [mainBreakpoint.id]: propValue };\n        } else {\n          contentProps[propName] = propValue;\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n  /* [Data Format] After resolving all properties, `styleProps` contains solely the plain design values\n   * styleProps = {\n   *   cfMargin: { desktop: '42px', tablet: '13px' },\n   *   cfBackgroundColor: { desktop: 'rgba(246, 246, 246, 1)' },\n   *   cfBackgroundImage: { desktop: 'url(https://example.com/image.jpg)' }\n   * }\n   */\n\n  const stylePropsIndexedByBreakpoint = Object.entries(styleProps).reduce<\n    Record<string, Record<string, PrimitiveValue>>\n  >((acc, [propName, valuesByBreakpoint]) => {\n    for (const [breakpointId, value] of Object.entries(valuesByBreakpoint)) {\n      if (!acc[breakpointId]) {\n        acc[breakpointId] = {};\n      }\n\n      acc[breakpointId][propName] = value;\n    }\n\n    return acc;\n  }, {});\n  /* [Data Format] `stylePropsIndexedByBreakpoint` contains the plain design values grouped by breakpoint\n   * stylePropsIndexedByBreakpoint = {\n   *   desktop: {\n   *     cfMargin: '42px',\n   *     cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n   *     cfBackgroundImage: 'url(https://example.com/image.jpg)'\n   *   },\n   *   tablet: {\n   *     cfMargin: '13px'\n   *   }\n   * }\n   */\n\n  const stylesheetData = createStylesheetsForBuiltInStyles({\n    designPropertiesByBreakpoint: stylePropsIndexedByBreakpoint,\n    breakpoints,\n    node,\n    patternRootNodeIdsChain,\n  });\n  /* [Data Format] Stylesheet data provides objects containing `className`, `breakpointCondition`, and `css`.\n   * stylesheetData = [{\n   *    className: 'uniqueMD5Hash',\n   *    breakpointCondition: '<768px',\n   *    css: 'margin:13px;'\n   *    visibilityCss: 'display:none !important;'\n   *  }, ...]\n   */\n  const mediaQuery = convertResolvedDesignValuesToMediaQuery(stylesheetData);\n  /* [Data Format] `mediaQuery` is a joined string of all media query CSS code\n   * mediaQuery = \".cfstyles-123{margin:42px;}@media(max-width:768px){.cfstyles-456{margin:13px;}}\"\n   */\n  return {\n    styleProps,\n    mediaQuery,\n    customDesignProps,\n    contentProps,\n  };\n};\n"],"names":[],"mappings":";;;AAgBA;AACA,MAAM,oBAAoB,GAAG,CAAC,QAAgB,KAAI;IAChD,OAAO,QAAQ,KAAK,sBAAsB,IAAI,QAAQ,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;AAC7F,CAAC,CAAC;AAmBW,MAAA,mBAAmB,GAAG,CAAC,EAClC,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,GAoBvB,KAAI;IACH,MAAM,UAAU,GAAsD,EAAE,CAAC;IACzE,MAAM,iBAAiB,GAAmC,EAAE,CAAC;IAC7D,MAAM,YAAY,GAAmC,EAAE,CAAC;IAExD,KAAK,CAAC,GAAG,CAAC,4CAA4C,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjE,IAAA,KAAK,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,SAAS,CAAC,EAAE;QACtF,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;AAC/C,QAAA,IAAI,CAAC,aAAa;YAAE,SAAS;AAE7B,QAAA,QAAQ,aAAa,CAAC,IAAI;YACxB,KAAK,aAAa,EAAE;AAClB,gBAAA,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;;AAEhC,oBAAA,UAAU,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC,kBAAkB,CAAC;iBACzD;qBAAM;;oBAEL,iBAAiB,CAAC,QAAQ,CAAC,GAAG,kBAAkB,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;iBACpF;gBACD,MAAM;aACP;YACD,KAAK,YAAY,EAAE;gBACjB,MAAM,UAAU,GAAG,iBAAiB,CAAC;AACnC,oBAAA,YAAY,EAAE,QAAQ;oBACtB,QAAQ,EAAE,cAAc,CAAC,IAAuC;AAChE,oBAAA,OAAO,EAAE,aAAa;AACvB,iBAAA,CAAC,CAAC;AAEH,gBAAA,MAAM,SAAS,GAAG,UAAU,IAAI,cAAc,CAAC,YAAY,CAAC;AAE5D,gBAAA,IAAI,oBAAoB,CAAC,QAAQ,CAAC,EAAE;AAClC,oBAAA,UAAU,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;iBAC3D;qBAAM;AACL,oBAAA,YAAY,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;iBACpC;gBACD,MAAM;aACP;YAED,KAAK,gBAAgB,EAAE;gBACrB,MAAM,SAAS,GAAG,qBAAqB,CAAC;oBACtC,aAAa,EAAE,aAAa,CAAC,aAAa;AAC3C,iBAAA,CAAC,CAAC;gBACH,IAAI,SAAS,EAAE;AACb,oBAAA,YAAY,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;iBACpC;gBACD,MAAM;aACP;YACD,KAAK,cAAc,EAAE;gBACnB,MAAM,YAAY,GAAG,mBAAmB,CAAC;oBACvC,UAAU,EAAE,aAAa,CAAC,GAAG;oBAC7B,YAAY,EAAE,cAAc,CAAC,YAAY;AAC1C,iBAAA,CAAC,CAAC;AAEH,gBAAA,IAAI,oBAAoB,CAAC,QAAQ,CAAC,EAAE;AAClC,oBAAA,UAAU,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;iBAC9D;qBAAM;AACL,oBAAA,YAAY,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;iBACvC;gBACD,MAAM;aACP;YACD,KAAK,gBAAgB,EAAE;;;gBAGrB,MAAM,SAAS,GACb,sBAAsB,CAAC;AACrB,oBAAA,YAAY,EAAE,QAAQ;oBACtB,UAAU,EAAE,aAAa,CAAC,GAAG;oBAC7B,QAAQ,EAAE,cAAc,CAAC,IAAI;oBAC7B,iBAAiB;AAClB,iBAAA,CAAC,IAAI,cAAc,CAAC,YAAY,CAAC;AAEpC,gBAAA,IAAI,oBAAoB,CAAC,QAAQ,CAAC,EAAE;AAClC,oBAAA,UAAU,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;iBAC3D;qBAAM;AACL,oBAAA,YAAY,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;iBACpC;gBACD,MAAM;aACP;SAGF;KACF;AACD;;;;;;AAMG;IAEH,MAAM,6BAA6B,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,MAAM,CAErE,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,KAAI;AACxC,QAAA,KAAK,MAAM,CAAC,YAAY,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE;AACtE,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;AACtB,gBAAA,GAAG,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC;aACxB;YAED,GAAG,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;SACrC;AAED,QAAA,OAAO,GAAG,CAAC;KACZ,EAAE,EAAE,CAAC,CAAC;AACP;;;;;;;;;;;AAWG;IAEH,MAAM,cAAc,GAAG,iCAAiC,CAAC;AACvD,QAAA,4BAA4B,EAAE,6BAA6B;QAC3D,WAAW;QACX,IAAI;QACJ,uBAAuB;AACxB,KAAA,CAAC,CAAC;AACH;;;;;;;AAOG;AACH,IAAA,MAAM,UAAU,GAAG,uCAAuC,CAAC,cAAc,CAAC,CAAC;AAC3E;;AAEG;IACH,OAAO;QACL,UAAU;QACV,UAAU;QACV,iBAAiB;QACjB,YAAY;KACb,CAAC;AACJ;;;;"}
+{"version":3,"file":"parseComponentProps.js","sources":["../../../src/utils/parseComponentProps.ts"],"sourcesContent":["import { isCfStyleAttribute, debug } from '@contentful/experiences-core';\nimport {\n  BoundComponentPropertyTypes,\n  BoundValue,\n  Breakpoint,\n  ComponentDefinition,\n  ComponentDefinitionVariable,\n  ComponentDefinitionVariableType,\n  ComponentTreeNode,\n  DesignValue,\n  PrimitiveValue,\n  ResolveDesignValueType,\n} from '@contentful/experiences-core/types';\nimport { convertResolvedDesignValuesToMediaQuery } from '../hooks/useMediaQuery';\nimport { createStylesheetsForBuiltInStyles } from '../hooks/useMediaQuery';\n\n// TODO: Test this for nested patterns as the name might be just a random hash without the actual name (needs to be validated).\n/**\n * Checks if prop is a \"siamese\" prop. So far we have only one such prop: `cfBackgroundImageUrl`.\n * It is considered \"siamese\" because despite being a content variable, it always goes in pair\n * (is coupled) with the `cfBackgroundImageOptions` design variable. Without presence of the\n * `cfBackgroundImageUrl` the `cfBackgroundImageOptions` is useless (and is not going to be\n * rendered by the styleTransformers.ts#transformBackgroundImageUrl()).\n *\n * Because of this coupling, we need to create an \"ephemeral\" cfBackgroundImageUrl style(!) prop.\n */\nconst isSpecialCaseCssProp = (propName: string) => {\n  return propName === 'cfBackgroundImageUrl' || propName.startsWith('cfBackgroundImageUrl_');\n};\n\n/**\n * The previous logic of prop mapping was too complex and mixed different ues cases together.\n * In this function, I aim to simplify the logic by focusing on the following specific cases FOR PREVIEW/DELIVERY MODES\n * 1) Any non `DesignValue` props should be resolved and returned as is\n * 2) Some exceptions like `cfImageAsset` and `cfBackgroundImageUrl` (BoundValue) should be handled separately\n * and be resolved for the default breakpoint only (cause we don't allow binding per breakpoint anyway)\n * 3) Those DesignValue props which can be converted to CSS should be grouped and resolved into a CSS media query\n * for each breakpoint\n * 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically\n * for each breakpoint\n */\ntype ResolveBoundValueType = (data: {\n  propertyName: string;\n  dataType: ComponentDefinitionVariableType;\n  binding: BoundValue;\n}) => BoundComponentPropertyTypes;\n\nexport const parseComponentProps = ({\n  breakpoints,\n  componentDefinition,\n  patternRootNodeIdsChain,\n  node,\n  resolveDesignValue,\n  resolveBoundValue,\n  resolveHyperlinkValue,\n  resolveUnboundValue,\n  resolvePrebindingValue,\n}: {\n  breakpoints: Breakpoint[];\n  mainBreakpoint: Breakpoint;\n  componentDefinition: ComponentDefinition;\n  patternRootNodeIdsChain?: string;\n  node: ComponentTreeNode;\n  resolveDesignValue: ResolveDesignValueType;\n  resolveBoundValue: ResolveBoundValueType;\n  resolveHyperlinkValue: (data: { linkTargetKey: string }) => string | null;\n  resolveUnboundValue: (data: {\n    mappingKey: string;\n    defaultValue: ComponentDefinitionVariable['defaultValue'];\n  }) => PrimitiveValue;\n  resolvePrebindingValue: (data: {\n    propertyName: string;\n    mappingKey: string;\n    dataType: ComponentDefinitionVariableType;\n    resolveBoundValue: ResolveBoundValueType;\n  }) => PrimitiveValue;\n}) => {\n  const styleProps: Record<string, DesignValue['valuesByBreakpoint']> = {};\n  const customDesignProps: Record<string, PrimitiveValue> = {};\n  const contentProps: Record<string, PrimitiveValue> = {};\n\n  debug.log('Parsing component props for node with id: ', node.id);\n\n  for (const [propName, propDefinition] of Object.entries(componentDefinition.variables)) {\n    const propertyValue = node.variables[propName];\n    if (!propertyValue) continue;\n\n    switch (propertyValue.type) {\n      case 'DesignValue': {\n        if (isCfStyleAttribute(propName)) {\n          // for such properties we know how to convert them to CSS, so we will build a media query from it below after the loop is over\n          styleProps[propName] = propertyValue.valuesByBreakpoint;\n        } else {\n          // for custom design props, the value will be resolved with the javascript per breakpoint at runtime\n          customDesignProps[propName] = resolveDesignValue(propertyValue.valuesByBreakpoint);\n        }\n        break;\n      }\n      case 'BoundValue': {\n        const boundValue = resolveBoundValue({\n          propertyName: propName,\n          dataType: propDefinition.type as ComponentDefinitionVariableType,\n          binding: propertyValue,\n        });\n\n        const propValue = boundValue ?? propDefinition.defaultValue;\n\n        if (isSpecialCaseCssProp(propName)) {\n          // styleProps[propName] = { [mainBreakpoint.id]: propValue };\n          // Here we create kind of \"fake\" style property out of a bound value.\n          // As bound values are breakpoint-universal (they apply to all breakpoints),\n          // but styleProps are breakpoint-specific, we need to ensure that\n          // semantically our \"fake\" emphemeral style property will be universall as well,\n          // by expanding it to all the breakpoints. This is important as\n          // styleTransformers.ts#transformBackgroundImageUrl() expects\n          // cfBackgroundImageUrl to be present for all breakpoints\n          // where cfBackgroundImageOptions is present.\n          styleProps[propName] = Object.fromEntries(breakpoints.map((b) => [b.id, propValue]));\n        } else {\n          contentProps[propName] = propValue;\n        }\n        break;\n      }\n\n      case 'HyperlinkValue': {\n        const hyperlink = resolveHyperlinkValue({\n          linkTargetKey: propertyValue.linkTargetKey,\n        });\n        if (hyperlink) {\n          contentProps[propName] = hyperlink;\n        }\n        break;\n      }\n      case 'UnboundValue': {\n        const unboundValue = resolveUnboundValue({\n          mappingKey: propertyValue.key,\n          defaultValue: propDefinition.defaultValue,\n        });\n\n        if (isSpecialCaseCssProp(propName)) {\n          styleProps[propName] = Object.fromEntries(breakpoints.map((b) => [b.id, unboundValue]));\n        } else {\n          contentProps[propName] = unboundValue;\n        }\n        break;\n      }\n      case 'ComponentValue': {\n        // This can either be a design (style) or a content property.\n        // Where prebinding is used, we resolve like they are a BoundValue.\n        const propValue =\n          resolvePrebindingValue({\n            propertyName: propName,\n            mappingKey: propertyValue.key,\n            dataType: propDefinition.type,\n            resolveBoundValue,\n          }) ?? propDefinition.defaultValue;\n\n        if (isSpecialCaseCssProp(propName)) {\n          styleProps[propName] = Object.fromEntries(breakpoints.map((b) => [b.id, propValue]));\n        } else {\n          contentProps[propName] = propValue;\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n  /* [Data Format] After resolving all properties, `styleProps` contains solely the plain design values\n   * styleProps = {\n   *   cfMargin: { desktop: '42px', tablet: '13px' },\n   *   cfBackgroundColor: { desktop: 'rgba(246, 246, 246, 1)' },\n   *   cfBackgroundImage: { desktop: 'url(https://example.com/image.jpg)' }\n   * }\n   */\n\n  const stylePropsIndexedByBreakpoint = Object.entries(styleProps).reduce<\n    Record<string, Record<string, PrimitiveValue>>\n  >((acc, [propName, valuesByBreakpoint]) => {\n    for (const [breakpointId, value] of Object.entries(valuesByBreakpoint)) {\n      if (!acc[breakpointId]) {\n        acc[breakpointId] = {};\n      }\n\n      acc[breakpointId][propName] = value;\n    }\n\n    return acc;\n  }, {});\n  /* [Data Format] `stylePropsIndexedByBreakpoint` contains the plain design values grouped by breakpoint\n   * stylePropsIndexedByBreakpoint = {\n   *   desktop: {\n   *     cfMargin: '42px',\n   *     cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n   *     cfBackgroundImage: 'url(https://example.com/image.jpg)'\n   *   },\n   *   tablet: {\n   *     cfMargin: '13px'\n   *   }\n   * }\n   */\n\n  const stylesheetData = createStylesheetsForBuiltInStyles({\n    designPropertiesByBreakpoint: stylePropsIndexedByBreakpoint,\n    breakpoints,\n    node,\n    patternRootNodeIdsChain,\n  });\n  /* [Data Format] Stylesheet data provides objects containing `className`, `breakpointCondition`, and `css`.\n   * stylesheetData = [{\n   *    className: 'uniqueMD5Hash',\n   *    breakpointCondition: '<768px',\n   *    css: 'margin:13px;'\n   *    visibilityCss: 'display:none !important;'\n   *  }, ...]\n   */\n  const mediaQuery = convertResolvedDesignValuesToMediaQuery(stylesheetData);\n  /* [Data Format] `mediaQuery` is a joined string of all media query CSS code\n   * mediaQuery = \".cfstyles-123{margin:42px;}@media(max-width:768px){.cfstyles-456{margin:13px;}}\"\n   */\n  return {\n    styleProps,\n    mediaQuery,\n    customDesignProps,\n    contentProps,\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "2.0.1-dev-20250711T1321-f1681f8.0",
+  "version": "2.0.2-dev-20250717T1206-7838c2a.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "typings": "./dist/src/index.d.ts",
@@ -41,10 +41,10 @@
     "depcruise": "depcruise src"
   },
   "dependencies": {
-    "@contentful/experiences-components-react": "2.0.1-dev-20250711T1321-f1681f8.0",
-    "@contentful/experiences-core": "2.0.1-dev-20250711T1321-f1681f8.0",
-    "@contentful/experiences-validators": "2.0.1-dev-20250711T1321-f1681f8.0",
-    "@contentful/experiences-visual-editor-react": "2.0.1-dev-20250711T1321-f1681f8.0",
+    "@contentful/experiences-components-react": "2.0.2-dev-20250717T1206-7838c2a.0",
+    "@contentful/experiences-core": "2.0.2-dev-20250717T1206-7838c2a.0",
+    "@contentful/experiences-validators": "2.0.2-dev-20250717T1206-7838c2a.0",
+    "@contentful/experiences-visual-editor-react": "2.0.2-dev-20250717T1206-7838c2a.0",
     "@contentful/rich-text-types": "^17.0.0",
     "classnames": "^2.3.2",
     "csstype": "^3.1.2",
@@ -99,5 +99,5 @@
     "dist",
     "package.json"
   ],
-  "gitHead": "e05c3f686535e2b373b2fe9f33e287583fd7b61d"
+  "gitHead": "bae9d1e69dda18d90230fc60a334eccba7b33f5b"
 }