@contentful/experiences-sdk-react 3.6.2-dev-20250912T1252-251a338.0 → 3.6.2-dev-20250912T1534-a44407f.0

package/dist/core/styles/convertResolvedDesignValuesToMediaQuery.js

@@ -7,18 +7,18 @@ import { toMediaQuery } from '@contentful/experiences-core';
  * **Example Input:**
  * ```
  * [
- *  { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;' },
+ *  { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;', visibilityCss: 'display:none !important;' },
  *  { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },
  * ]
  * ```
  *
  * **Example Output:**
  * ```
- * '.cfstyles-123{color:red;}@media(max-width:768px){.cfstyles-456{color:blue;}}'
+ * '.cfstyles-123{color:red;}@media not (max-width:768px){.cfstyles-123{display:none !important;}}@media(max-width:768px){.cfstyles-456{color:blue;}}'
  * ```
  */
 const convertResolvedDesignValuesToMediaQuery = (stylesheetData) => {
-    const stylesheet = stylesheetData.reduce((acc, { breakpointCondition, className, css }) => {
+    const stylesheet = stylesheetData.reduce((acc, { breakpointCondition, className, css, visibilityCss }, index) => {
         if (acc.classNames.includes(className)) {
             return acc;
         }
@@ -26,9 +26,15 @@ const convertResolvedDesignValuesToMediaQuery = (stylesheetData) => {
             condition: breakpointCondition,
             cssByClassName: { [className]: css },
         });
+        const visibilityMediaQueryCss = toMediaQuery({
+            condition: breakpointCondition,
+            cssByClassName: { [className]: visibilityCss ?? '' },
+            // Validation ensures that it starts with the '*' breakpoint
+            nextCondition: stylesheetData[index + 1]?.breakpointCondition,
+        });
         return {
             classNames: [...acc.classNames, className],
-            css: `${acc.css}${mediaQueryCss}`,
+            css: `${acc.css}${mediaQueryCss}${visibilityMediaQueryCss}`,
         };
     }, {
         classNames: [],

package/dist/core/styles/convertResolvedDesignValuesToMediaQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"convertResolvedDesignValuesToMediaQuery.js","sources":["../../../../src/core/styles/convertResolvedDesignValuesToMediaQuery.ts"],"sourcesContent":["import { toMediaQuery } from '@contentful/experiences-core';\nimport { ResolvedStylesheetData } from './createStylesheetsForBuiltInStyles';\n\n/**\n * Takes the CSS code for each breakpoint and merges them into a single CSS string.\n * It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').\n *\n * **Example Input:**\n * ```\n * [\n *  { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;' },\n *  { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },\n * ]\n * ```\n *\n * **Example Output:**\n * ```\n * '.cfstyles-123{color:red;}@media(max-width:768px){.cfstyles-456{color:blue;}}'\n * ```\n */\nexport const convertResolvedDesignValuesToMediaQuery = (stylesheetData: ResolvedStylesheetData) => {\n  const stylesheet = stylesheetData.reduce(\n    (acc, { breakpointCondition, className, css }) => {\n      if (acc.classNames.includes(className)) {\n        return acc;\n      }\n\n      const mediaQueryCss = toMediaQuery({\n        condition: breakpointCondition,\n        cssByClassName: { [className]: css },\n      });\n      return {\n        classNames: [...acc.classNames, className],\n        css: `${acc.css}${mediaQueryCss}`,\n      };\n    },\n    {\n      classNames: [] as string[],\n      css: '',\n    },\n  );\n\n  return {\n    css: stylesheet.css,\n    className: stylesheet.classNames.join(' '),\n  };\n};\n"],"names":[],"mappings":";;AAGA;;;;;;;;;;;;;;;;AAgBG;AACU,MAAA,uCAAuC,GAAG,CAAC,cAAsC,KAAI;AAChG,IAAA,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,EAAE,KAAI;QAC/C,IAAI,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AACtC,YAAA,OAAO,GAAG,CAAC;SACZ;QAED,MAAM,aAAa,GAAG,YAAY,CAAC;AACjC,YAAA,SAAS,EAAE,mBAAmB;AAC9B,YAAA,cAAc,EAAE,EAAE,CAAC,SAAS,GAAG,GAAG,EAAE;AACrC,SAAA,CAAC,CAAC;QACH,OAAO;YACL,UAAU,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC;AAC1C,YAAA,GAAG,EAAE,CAAG,EAAA,GAAG,CAAC,GAAG,CAAA,EAAG,aAAa,CAAE,CAAA;SAClC,CAAC;AACJ,KAAC,EACD;AACE,QAAA,UAAU,EAAE,EAAc;AAC1B,QAAA,GAAG,EAAE,EAAE;AACR,KAAA,CACF,CAAC;IAEF,OAAO;QACL,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;KAC3C,CAAC;AACJ;;;;"}
+{"version":3,"file":"convertResolvedDesignValuesToMediaQuery.js","sources":["../../../../src/core/styles/convertResolvedDesignValuesToMediaQuery.ts"],"sourcesContent":["import { toMediaQuery } from '@contentful/experiences-core';\nimport { ResolvedStylesheetData } from './createStylesheetsForBuiltInStyles';\n\n/**\n * Takes the CSS code for each breakpoint and merges them into a single CSS string.\n * It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').\n *\n * **Example Input:**\n * ```\n * [\n *  { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;', visibilityCss: 'display:none !important;' },\n *  { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },\n * ]\n * ```\n *\n * **Example Output:**\n * ```\n * '.cfstyles-123{color:red;}@media not (max-width:768px){.cfstyles-123{display:none !important;}}@media(max-width:768px){.cfstyles-456{color:blue;}}'\n * ```\n */\nexport const convertResolvedDesignValuesToMediaQuery = (stylesheetData: ResolvedStylesheetData) => {\n  const stylesheet = stylesheetData.reduce(\n    (acc, { breakpointCondition, className, css, visibilityCss }, index) => {\n      if (acc.classNames.includes(className)) {\n        return acc;\n      }\n\n      const mediaQueryCss = toMediaQuery({\n        condition: breakpointCondition,\n        cssByClassName: { [className]: css },\n      });\n      const visibilityMediaQueryCss = toMediaQuery({\n        condition: breakpointCondition,\n        cssByClassName: { [className]: visibilityCss ?? '' },\n        // Validation ensures that it starts with the '*' breakpoint\n        nextCondition: stylesheetData[index + 1]?.breakpointCondition,\n      });\n      return {\n        classNames: [...acc.classNames, className],\n        css: `${acc.css}${mediaQueryCss}${visibilityMediaQueryCss}`,\n      };\n    },\n    {\n      classNames: [] as string[],\n      css: '',\n    },\n  );\n\n  return {\n    css: stylesheet.css,\n    className: stylesheet.classNames.join(' '),\n  };\n};\n"],"names":[],"mappings":";;AAGA;;;;;;;;;;;;;;;;AAgBG;AACU,MAAA,uCAAuC,GAAG,CAAC,cAAsC,KAAI;IAChG,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,EAAE,KAAK,KAAI;QACrE,IAAI,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AACtC,YAAA,OAAO,GAAG,CAAC;SACZ;QAED,MAAM,aAAa,GAAG,YAAY,CAAC;AACjC,YAAA,SAAS,EAAE,mBAAmB;AAC9B,YAAA,cAAc,EAAE,EAAE,CAAC,SAAS,GAAG,GAAG,EAAE;AACrC,SAAA,CAAC,CAAC;QACH,MAAM,uBAAuB,GAAG,YAAY,CAAC;AAC3C,YAAA,SAAS,EAAE,mBAAmB;YAC9B,cAAc,EAAE,EAAE,CAAC,SAAS,GAAG,aAAa,IAAI,EAAE,EAAE;;YAEpD,aAAa,EAAE,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,mBAAmB;AAC9D,SAAA,CAAC,CAAC;QACH,OAAO;YACL,UAAU,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC;YAC1C,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,CAAG,EAAA,aAAa,CAAG,EAAA,uBAAuB,CAAE,CAAA;SAC5D,CAAC;AACJ,KAAC,EACD;AACE,QAAA,UAAU,EAAE,EAAc;AAC1B,QAAA,GAAG,EAAE,EAAE;AACR,KAAA,CACF,CAAC;IAEF,OAAO;QACL,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;KAC3C,CAAC;AACJ;;;;"}

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 = "3.6.2-dev-20250912T1252-251a338.0";
+declare const SDK_VERSION = "3.6.2-dev-20250912T1534-a44407f.0";
 
 type ExperienceRootProps = {
     experience?: Experience<EntityStore> | string | null;

package/dist/sdkVersion.js

@@ -1,4 +1,4 @@
-const SDK_VERSION = '3.6.2-dev-20250912T1252-251a338.0';
+const SDK_VERSION = '3.6.2-dev-20250912T1534-a44407f.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 = '3.6.2-dev-20250912T1252-251a338.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
+{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.6.2-dev-20250912T1534-a44407f.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}

package/dist/src/core/styles/convertResolvedDesignValuesToMediaQuery.d.ts

@@ -6,14 +6,14 @@ import { ResolvedStylesheetData } from './createStylesheetsForBuiltInStyles';
  * **Example Input:**
  * ```
  * [
- *  { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;' },
+ *  { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;', visibilityCss: 'display:none !important;' },
  *  { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },
  * ]
  * ```
  *
  * **Example Output:**
  * ```
- * '.cfstyles-123{color:red;}@media(max-width:768px){.cfstyles-456{color:blue;}}'
+ * '.cfstyles-123{color:red;}@media not (max-width:768px){.cfstyles-123{display:none !important;}}@media(max-width:768px){.cfstyles-456{color:blue;}}'
  * ```
  */
 export declare const convertResolvedDesignValuesToMediaQuery: (stylesheetData: ResolvedStylesheetData) => {

package/dist/src/sdkVersion.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.6.2-dev-20250912T1252-251a338.0";
+export declare const SDK_VERSION = "3.6.2-dev-20250912T1534-a44407f.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "3.6.2-dev-20250912T1252-251a338.0",
+  "version": "3.6.2-dev-20250912T1534-a44407f.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": "3.6.2-dev-20250912T1252-251a338.0",
-    "@contentful/experiences-core": "3.6.2-dev-20250912T1252-251a338.0",
-    "@contentful/experiences-validators": "3.6.2-dev-20250912T1252-251a338.0",
-    "@contentful/experiences-visual-editor-react": "3.6.2-dev-20250912T1252-251a338.0",
+    "@contentful/experiences-components-react": "3.6.2-dev-20250912T1534-a44407f.0",
+    "@contentful/experiences-core": "3.6.2-dev-20250912T1534-a44407f.0",
+    "@contentful/experiences-validators": "3.6.2-dev-20250912T1534-a44407f.0",
+    "@contentful/experiences-visual-editor-react": "3.6.2-dev-20250912T1534-a44407f.0",
     "@contentful/rich-text-types": "^17.0.0",
     "csstype": "^3.1.2",
     "immer": "^10.0.3",
@@ -98,5 +98,5 @@
     "dist",
     "package.json"
   ],
-  "gitHead": "9903894eb7b93f544b3f311551c6118f2f032def"
+  "gitHead": "b08ef8ba5e6a39110a49380e3ac53fe6d72bde60"
 }