@contentful/experiences-sdk-react 3.8.4-dev-20251113T1410-1b718c2.0 → 3.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/styles/createStylesheetsForBuiltInStyles.js +2 -2
- package/dist/core/styles/createStylesheetsForBuiltInStyles.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/sdkVersion.js +1 -1
- package/dist/sdkVersion.js.map +1 -1
- package/dist/src/sdkVersion.d.ts +1 -1
- package/package.json +6 -6
|
@@ -59,8 +59,8 @@ const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, break
|
|
|
59
59
|
*/
|
|
60
60
|
// Create a hash ensuring stability across nodes (and breakpoints between nodes)
|
|
61
61
|
const styleHash = patternRootNodeIdsChain
|
|
62
|
-
? md5([...patternRootNodeIdsChain, node.id, breakpointCss].join('-'))
|
|
63
|
-
: md5(`${node.id}-${breakpointCss}`);
|
|
62
|
+
? md5([...patternRootNodeIdsChain, node.id, breakpointCss, visibilityCss].join('-'))
|
|
63
|
+
: md5(`${node.id}-${breakpointCss}-${visibilityCss}`);
|
|
64
64
|
// Create a CSS className with internal prefix to make sure the value can be processed
|
|
65
65
|
const className = `cfstyles-${styleHash}`;
|
|
66
66
|
result.push({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createStylesheetsForBuiltInStyles.js","sources":["../../../../src/core/styles/createStylesheetsForBuiltInStyles.ts"],"sourcesContent":["import {\n addMinHeightForEmptyStructures,\n designTokensRegistry,\n flattenDesignTokenRegistry,\n maybePopulateDesignTokenValue,\n stringifyCssProperties,\n buildCfStyles,\n transformVisibility,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\n\nexport type ResolvedStylesheetData = Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n visibilityCss?: string;\n}>;\n\n/**\n * For each provided breakpoint, create the CSS code and a unique class name.\n *\n * **Example Output:**\n * ```\n * [\n * { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },\n * { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },\n * ]\n * ```\n */\nexport const createStylesheetsForBuiltInStyles = ({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n}: {\n designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n patternRootNodeIdsChain?: Array<string>;\n}): ResolvedStylesheetData => {\n const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);\n\n // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.\n const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some(\n (designProperties) => designProperties.cfVisibility === false,\n );\n // We always need an explicit value when using disjunct media queries\n // Example: desktop uses \"false\" and tablet is undefined -> we need to set `display: none` for tablet as well.\n let previousVisibilityValue: boolean | undefined;\n\n const result: Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n visibilityCss?: string;\n }> = [];\n\n for (const breakpoint of breakpoints) {\n let visibilityCss: string | undefined;\n const designProperties = designPropertiesByBreakpoint[breakpoint.id];\n if (!designProperties) {\n continue;\n }\n\n const designPropertiesWithResolvedDesignTokens = Object.entries(designProperties).reduce(\n (acc, [propertyName, value]) => ({\n ...acc,\n [propertyName]: maybePopulateDesignTokenValue(\n propertyName,\n value,\n flattenedDesignTokens,\n ) as string,\n }),\n {} as Record<string, PrimitiveValue>,\n );\n /* [Data Format] `designPropertiesWithResolvedDesignTokens` is a map of property name to plain design value:\n * designPropertiesWithResolvedDesignTokens = {\n * cfMargin: '42px',\n * cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n * }\n */\n\n // Special case for visibility to override any custom `display` values but only for a specific breakpoint.\n if (isAnyVisibilityValueHidden) {\n const visibilityValue =\n (designPropertiesWithResolvedDesignTokens.cfVisibility as boolean | undefined) ??\n previousVisibilityValue;\n previousVisibilityValue = visibilityValue;\n const visibilityStyles = transformVisibility(visibilityValue);\n visibilityCss = stringifyCssProperties(visibilityStyles);\n }\n\n // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`\n const cfStyles = addMinHeightForEmptyStructures(\n buildCfStyles(designPropertiesWithResolvedDesignTokens),\n node,\n );\n /* [Data Format] `cfStyles` follows the shape of CSSProperties (camelCased CSS property names):\n * cfStyles = {\n * margin: '42px',\n * backgroundColor: 'rgba(246, 246, 246, 1)',\n * }\n */\n\n // Translate the map of CSSProperties into the final shape of CSS code for this specific breakpoint\n const breakpointCss = stringifyCssProperties(cfStyles);\n /* [Data Format] `breakpointCss`:\n * breakpointCss = \"margin:42px;background-color:rgba(246, 246, 246, 1);\"\n */\n\n // Create a hash ensuring stability across nodes (and breakpoints between nodes)\n const styleHash = patternRootNodeIdsChain\n ? md5([...patternRootNodeIdsChain, node.id, breakpointCss].join('-'))\n : md5(`${node.id}-${breakpointCss}`);\n\n // Create a CSS className with internal prefix to make sure the value can be processed\n const className = `cfstyles-${styleHash}`;\n\n result.push({\n className,\n breakpointCondition: breakpoint.query,\n css: breakpointCss,\n visibilityCss,\n });\n }\n\n return result;\n};\n"],"names":[],"mappings":";;;AAmBA;;;;;;;;;;AAUG;AACI,MAAM,iCAAiC,GAAG,CAAC,EAChD,4BAA4B,EAC5B,WAAW,EACX,IAAI,EACJ,uBAAuB,GAMxB,KAA4B;AAC3B,IAAA,MAAM,qBAAqB,GAAG,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;;IAG/E,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,IAAI,CACjF,CAAC,gBAAgB,KAAK,gBAAgB,CAAC,YAAY,KAAK,KAAK,CAC9D,CAAC;;;AAGF,IAAA,IAAI,uBAA4C,CAAC;IAEjD,MAAM,MAAM,GAKP,EAAE,CAAC;AAER,IAAA,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;AACpC,QAAA,IAAI,aAAiC,CAAC;QACtC,MAAM,gBAAgB,GAAG,4BAA4B,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,EAAE;YACrB,SAAS;SACV;QAED,MAAM,wCAAwC,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,MAAM,CACtF,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM;AAC/B,YAAA,GAAG,GAAG;YACN,CAAC,YAAY,GAAG,6BAA6B,CAC3C,YAAY,EACZ,KAAK,EACL,qBAAqB,CACZ;SACZ,CAAC,EACF,EAAoC,CACrC,CAAC;AACF;;;;;AAKG;;QAGH,IAAI,0BAA0B,EAAE;AAC9B,YAAA,MAAM,eAAe,GAClB,wCAAwC,CAAC,YAAoC;AAC9E,gBAAA,uBAAuB,CAAC;YAC1B,uBAAuB,GAAG,eAAe,CAAC;AAC1C,YAAA,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;AAC9D,YAAA,aAAa,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;SAC1D;;QAGD,MAAM,QAAQ,GAAG,8BAA8B,CAC7C,aAAa,CAAC,wCAAwC,CAAC,EACvD,IAAI,CACL,CAAC;AACF;;;;;AAKG;;AAGH,QAAA,MAAM,aAAa,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;AACvD;;AAEG;;QAGH,MAAM,SAAS,GAAG,uBAAuB;
|
|
1
|
+
{"version":3,"file":"createStylesheetsForBuiltInStyles.js","sources":["../../../../src/core/styles/createStylesheetsForBuiltInStyles.ts"],"sourcesContent":["import {\n addMinHeightForEmptyStructures,\n designTokensRegistry,\n flattenDesignTokenRegistry,\n maybePopulateDesignTokenValue,\n stringifyCssProperties,\n buildCfStyles,\n transformVisibility,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\n\nexport type ResolvedStylesheetData = Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n visibilityCss?: string;\n}>;\n\n/**\n * For each provided breakpoint, create the CSS code and a unique class name.\n *\n * **Example Output:**\n * ```\n * [\n * { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },\n * { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },\n * ]\n * ```\n */\nexport const createStylesheetsForBuiltInStyles = ({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n}: {\n designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n patternRootNodeIdsChain?: Array<string>;\n}): ResolvedStylesheetData => {\n const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);\n\n // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.\n const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some(\n (designProperties) => designProperties.cfVisibility === false,\n );\n // We always need an explicit value when using disjunct media queries\n // Example: desktop uses \"false\" and tablet is undefined -> we need to set `display: none` for tablet as well.\n let previousVisibilityValue: boolean | undefined;\n\n const result: Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n visibilityCss?: string;\n }> = [];\n\n for (const breakpoint of breakpoints) {\n let visibilityCss: string | undefined;\n const designProperties = designPropertiesByBreakpoint[breakpoint.id];\n if (!designProperties) {\n continue;\n }\n\n const designPropertiesWithResolvedDesignTokens = Object.entries(designProperties).reduce(\n (acc, [propertyName, value]) => ({\n ...acc,\n [propertyName]: maybePopulateDesignTokenValue(\n propertyName,\n value,\n flattenedDesignTokens,\n ) as string,\n }),\n {} as Record<string, PrimitiveValue>,\n );\n /* [Data Format] `designPropertiesWithResolvedDesignTokens` is a map of property name to plain design value:\n * designPropertiesWithResolvedDesignTokens = {\n * cfMargin: '42px',\n * cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n * }\n */\n\n // Special case for visibility to override any custom `display` values but only for a specific breakpoint.\n if (isAnyVisibilityValueHidden) {\n const visibilityValue =\n (designPropertiesWithResolvedDesignTokens.cfVisibility as boolean | undefined) ??\n previousVisibilityValue;\n previousVisibilityValue = visibilityValue;\n const visibilityStyles = transformVisibility(visibilityValue);\n visibilityCss = stringifyCssProperties(visibilityStyles);\n }\n\n // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`\n const cfStyles = addMinHeightForEmptyStructures(\n buildCfStyles(designPropertiesWithResolvedDesignTokens),\n node,\n );\n /* [Data Format] `cfStyles` follows the shape of CSSProperties (camelCased CSS property names):\n * cfStyles = {\n * margin: '42px',\n * backgroundColor: 'rgba(246, 246, 246, 1)',\n * }\n */\n\n // Translate the map of CSSProperties into the final shape of CSS code for this specific breakpoint\n const breakpointCss = stringifyCssProperties(cfStyles);\n /* [Data Format] `breakpointCss`:\n * breakpointCss = \"margin:42px;background-color:rgba(246, 246, 246, 1);\"\n */\n\n // Create a hash ensuring stability across nodes (and breakpoints between nodes)\n const styleHash = patternRootNodeIdsChain\n ? md5([...patternRootNodeIdsChain, node.id, breakpointCss, visibilityCss].join('-'))\n : md5(`${node.id}-${breakpointCss}-${visibilityCss}`);\n\n // Create a CSS className with internal prefix to make sure the value can be processed\n const className = `cfstyles-${styleHash}`;\n\n result.push({\n className,\n breakpointCondition: breakpoint.query,\n css: breakpointCss,\n visibilityCss,\n });\n }\n\n return result;\n};\n"],"names":[],"mappings":";;;AAmBA;;;;;;;;;;AAUG;AACI,MAAM,iCAAiC,GAAG,CAAC,EAChD,4BAA4B,EAC5B,WAAW,EACX,IAAI,EACJ,uBAAuB,GAMxB,KAA4B;AAC3B,IAAA,MAAM,qBAAqB,GAAG,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;;IAG/E,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,IAAI,CACjF,CAAC,gBAAgB,KAAK,gBAAgB,CAAC,YAAY,KAAK,KAAK,CAC9D,CAAC;;;AAGF,IAAA,IAAI,uBAA4C,CAAC;IAEjD,MAAM,MAAM,GAKP,EAAE,CAAC;AAER,IAAA,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;AACpC,QAAA,IAAI,aAAiC,CAAC;QACtC,MAAM,gBAAgB,GAAG,4BAA4B,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,EAAE;YACrB,SAAS;SACV;QAED,MAAM,wCAAwC,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,MAAM,CACtF,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM;AAC/B,YAAA,GAAG,GAAG;YACN,CAAC,YAAY,GAAG,6BAA6B,CAC3C,YAAY,EACZ,KAAK,EACL,qBAAqB,CACZ;SACZ,CAAC,EACF,EAAoC,CACrC,CAAC;AACF;;;;;AAKG;;QAGH,IAAI,0BAA0B,EAAE;AAC9B,YAAA,MAAM,eAAe,GAClB,wCAAwC,CAAC,YAAoC;AAC9E,gBAAA,uBAAuB,CAAC;YAC1B,uBAAuB,GAAG,eAAe,CAAC;AAC1C,YAAA,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;AAC9D,YAAA,aAAa,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;SAC1D;;QAGD,MAAM,QAAQ,GAAG,8BAA8B,CAC7C,aAAa,CAAC,wCAAwC,CAAC,EACvD,IAAI,CACL,CAAC;AACF;;;;;AAKG;;AAGH,QAAA,MAAM,aAAa,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;AACvD;;AAEG;;QAGH,MAAM,SAAS,GAAG,uBAAuB;cACrC,GAAG,CAAC,CAAC,GAAG,uBAAuB,EAAE,IAAI,CAAC,EAAE,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACpF,cAAE,GAAG,CAAC,CAAA,EAAG,IAAI,CAAC,EAAE,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA,EAAI,aAAa,CAAA,CAAE,CAAC,CAAC;;AAGxD,QAAA,MAAM,SAAS,GAAG,CAAY,SAAA,EAAA,SAAS,EAAE,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC;YACV,SAAS;YACT,mBAAmB,EAAE,UAAU,CAAC,KAAK;AACrC,YAAA,GAAG,EAAE,aAAa;YAClB,aAAa;AACd,SAAA,CAAC,CAAC;KACJ;AAED,IAAA,OAAO,MAAM,CAAC;AAChB;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
|
|
|
8
8
|
export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
|
|
9
9
|
import { ContentfulClientApi } from 'contentful';
|
|
10
10
|
|
|
11
|
-
declare const SDK_VERSION = "3.8.4
|
|
11
|
+
declare const SDK_VERSION = "3.8.4";
|
|
12
12
|
|
|
13
13
|
type ExperienceRootProps = {
|
|
14
14
|
experience?: Experience<EntityStore> | string | null;
|
package/dist/sdkVersion.js
CHANGED
package/dist/sdkVersion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.8.4
|
|
1
|
+
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.8.4';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
|
package/dist/src/sdkVersion.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "3.8.4
|
|
1
|
+
export declare const SDK_VERSION = "3.8.4";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/experiences-sdk-react",
|
|
3
|
-
"version": "3.8.4
|
|
3
|
+
"version": "3.8.4",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"typings": "./dist/src/index.d.ts",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
"depcruise": "depcruise src"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@contentful/experiences-components-react": "3.8.4
|
|
45
|
-
"@contentful/experiences-core": "3.8.4
|
|
46
|
-
"@contentful/experiences-validators": "3.8.4
|
|
47
|
-
"@contentful/experiences-visual-editor-react": "3.8.4
|
|
44
|
+
"@contentful/experiences-components-react": "3.8.4",
|
|
45
|
+
"@contentful/experiences-core": "3.8.4",
|
|
46
|
+
"@contentful/experiences-validators": "3.8.4",
|
|
47
|
+
"@contentful/experiences-visual-editor-react": "3.8.4",
|
|
48
48
|
"@contentful/rich-text-types": "^17.0.0",
|
|
49
49
|
"csstype": "^3.1.2",
|
|
50
50
|
"immer": "^10.0.3",
|
|
@@ -95,5 +95,5 @@
|
|
|
95
95
|
"dist",
|
|
96
96
|
"package.json"
|
|
97
97
|
],
|
|
98
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "0ab9b278cdb67e8797431525cbf649934cdd6870"
|
|
99
99
|
}
|