@contentful/experiences-sdk-react 1.40.1 → 1.40.2-beta.1
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { flattenDesignTokenRegistry, designTokensRegistry, maybePopulateDesignTokenValue, addMinHeightForEmptyStructures, buildCfStyles,
|
|
1
|
+
import { flattenDesignTokenRegistry, designTokensRegistry, maybePopulateDesignTokenValue, transformVisibility, stringifyCssProperties, addMinHeightForEmptyStructures, buildCfStyles, toMediaQuery } from '@contentful/experiences-core';
|
|
2
2
|
import md5 from 'md5';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
|
|
@@ -15,7 +15,7 @@ import { useMemo } from 'react';
|
|
|
15
15
|
*/
|
|
16
16
|
const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain, }) => {
|
|
17
17
|
const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);
|
|
18
|
-
// When the node is hidden
|
|
18
|
+
// When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.
|
|
19
19
|
const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some((designProperties) => designProperties.cfVisibility === false);
|
|
20
20
|
// We always need an explicit value when using disjunct media queries
|
|
21
21
|
// Example: desktop uses "false" and tablet is undefined -> we need to set `display: none` for tablet as well.
|
|
@@ -42,12 +42,8 @@ const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, break
|
|
|
42
42
|
const visibilityValue = designPropertiesWithResolvedDesignTokens.cfVisibility ??
|
|
43
43
|
previousVisibilityValue;
|
|
44
44
|
previousVisibilityValue = visibilityValue;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
visibilityCss = '';
|
|
50
|
-
}
|
|
45
|
+
const visibilityStyles = transformVisibility(visibilityValue);
|
|
46
|
+
visibilityCss = stringifyCssProperties(visibilityStyles);
|
|
51
47
|
}
|
|
52
48
|
// Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`
|
|
53
49
|
const cfStyles = addMinHeightForEmptyStructures(buildCfStyles(designPropertiesWithResolvedDesignTokens), node);
|
|
@@ -77,32 +73,6 @@ const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, break
|
|
|
77
73
|
}
|
|
78
74
|
return result;
|
|
79
75
|
};
|
|
80
|
-
/**
|
|
81
|
-
* Turns a condition like `<768px` or `>1024px` into a media query rule.
|
|
82
|
-
* For example, `<768px` becomes `max-width:768px` and `>1024px` becomes `min-width:1024px`.
|
|
83
|
-
*/
|
|
84
|
-
const toMediaQueryRule = (condition) => {
|
|
85
|
-
const [evaluation, pixelValue] = [condition[0], condition.substring(1)];
|
|
86
|
-
const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
|
|
87
|
-
return `(${mediaQueryRule}:${pixelValue})`;
|
|
88
|
-
};
|
|
89
|
-
const toDisjunctMediaQuery = ({ className, condition, nextCondition, css, }) => {
|
|
90
|
-
if (!css) {
|
|
91
|
-
return '';
|
|
92
|
-
}
|
|
93
|
-
if (!nextCondition) {
|
|
94
|
-
return toMediaQuery({
|
|
95
|
-
condition,
|
|
96
|
-
cssByClassName: { [className]: css },
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
const nextRule = toMediaQueryRule(nextCondition);
|
|
100
|
-
if (condition === '*') {
|
|
101
|
-
return `@media not ${nextRule}{.${className}{${css}}}`;
|
|
102
|
-
}
|
|
103
|
-
const currentRule = toMediaQueryRule(condition);
|
|
104
|
-
return `@media ${currentRule} and (not ${nextRule}){.${className}{${css}}}`;
|
|
105
|
-
};
|
|
106
76
|
/**
|
|
107
77
|
* Takes the CSS code for each breakpoint and merges them into a single CSS string.
|
|
108
78
|
* It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').
|
|
@@ -122,26 +92,22 @@ const toDisjunctMediaQuery = ({ className, condition, nextCondition, css, }) =>
|
|
|
122
92
|
*/
|
|
123
93
|
const convertResolvedDesignValuesToMediaQuery = (stylesheetData) => {
|
|
124
94
|
const stylesheet = stylesheetData.reduce((acc, { breakpointCondition, className, css, visibilityCss }, index) => {
|
|
125
|
-
const wrapperMediaQueryCss = toDisjunctMediaQuery({
|
|
126
|
-
condition: breakpointCondition,
|
|
127
|
-
className,
|
|
128
|
-
css: visibilityCss,
|
|
129
|
-
// Validation ensures that it starts with the '*' breakpoint
|
|
130
|
-
nextCondition: stylesheetData[index + 1]?.breakpointCondition,
|
|
131
|
-
});
|
|
132
95
|
if (acc.classNames.includes(className)) {
|
|
133
|
-
return
|
|
134
|
-
classNames: acc.classNames,
|
|
135
|
-
css: `${acc.css}${wrapperMediaQueryCss}`,
|
|
136
|
-
};
|
|
96
|
+
return acc;
|
|
137
97
|
}
|
|
138
98
|
const mediaQueryCss = toMediaQuery({
|
|
139
99
|
condition: breakpointCondition,
|
|
140
100
|
cssByClassName: { [className]: css },
|
|
141
101
|
});
|
|
102
|
+
const visibilityMediaQueryCss = toMediaQuery({
|
|
103
|
+
condition: breakpointCondition,
|
|
104
|
+
cssByClassName: { [className]: visibilityCss ?? '' },
|
|
105
|
+
// Validation ensures that it starts with the '*' breakpoint
|
|
106
|
+
nextCondition: stylesheetData[index + 1]?.breakpointCondition,
|
|
107
|
+
});
|
|
142
108
|
return {
|
|
143
109
|
classNames: [...acc.classNames, className],
|
|
144
|
-
css: `${acc.css}${mediaQueryCss}${
|
|
110
|
+
css: `${acc.css}${mediaQueryCss}${visibilityMediaQueryCss}`,
|
|
145
111
|
};
|
|
146
112
|
}, {
|
|
147
113
|
classNames: [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.js","sources":["../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import {\n addMinHeightForEmptyStructures,\n designTokensRegistry,\n flattenDesignTokenRegistry,\n maybePopulateDesignTokenValue,\n stringifyCssProperties,\n toMediaQuery,\n buildCfStyles,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\nimport { useMemo } from 'react';\n\ntype 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?: 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 if (visibilityValue === false) {\n visibilityCss = 'display:none !important;';\n } else {\n visibilityCss = '';\n }\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}`)\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\n/**\n * Turns a condition like `<768px` or `>1024px` into a media query rule.\n * For example, `<768px` becomes `max-width:768px` and `>1024px` becomes `min-width:1024px`.\n */\nconst toMediaQueryRule = (condition: string) => {\n const [evaluation, pixelValue] = [condition[0], condition.substring(1)];\n const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';\n return `(${mediaQueryRule}:${pixelValue})`;\n};\n\nconst toDisjunctMediaQuery = ({\n className,\n condition,\n nextCondition,\n css,\n}: {\n className: string;\n condition: string;\n nextCondition?: string;\n css?: string;\n}) => {\n if (!css) {\n return '';\n }\n if (!nextCondition) {\n return toMediaQuery({\n condition,\n cssByClassName: { [className]: css },\n });\n }\n const nextRule = toMediaQueryRule(nextCondition);\n if (condition === '*') {\n return `@media not ${nextRule}{.${className}{${css}}}`;\n }\n\n const currentRule = toMediaQueryRule(condition);\n return `@media ${currentRule} and (not ${nextRule}){.${className}{${css}}}`;\n};\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 const wrapperMediaQueryCss = toDisjunctMediaQuery({\n condition: breakpointCondition,\n className,\n css: visibilityCss,\n // Validation ensures that it starts with the '*' breakpoint\n nextCondition: stylesheetData[index + 1]?.breakpointCondition,\n });\n\n if (acc.classNames.includes(className)) {\n return {\n classNames: acc.classNames,\n css: `${acc.css}${wrapperMediaQueryCss}`,\n };\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}${wrapperMediaQueryCss}`,\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\nexport const useMediaQuery = ({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n}: {\n designPropertiesByBreakpoint: Record<string, Record<string, any>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n patternRootNodeIdsChain?: string;\n}) => {\n return useMemo(() => {\n const stylesheetData = createStylesheetsForBuiltInStyles({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n });\n\n return convertResolvedDesignValuesToMediaQuery(stylesheetData);\n }, [designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain]);\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useMediaQuery.js","sources":["../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import {\n addMinHeightForEmptyStructures,\n designTokensRegistry,\n flattenDesignTokenRegistry,\n maybePopulateDesignTokenValue,\n stringifyCssProperties,\n toMediaQuery,\n buildCfStyles,\n transformVisibility,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\nimport { useMemo } from 'react';\n\ntype 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?: 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}`)\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\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\nexport const useMediaQuery = ({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n}: {\n designPropertiesByBreakpoint: Record<string, Record<string, any>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n patternRootNodeIdsChain?: string;\n}) => {\n return useMemo(() => {\n const stylesheetData = createStylesheetsForBuiltInStyles({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n });\n\n return convertResolvedDesignValuesToMediaQuery(stylesheetData);\n }, [designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain]);\n};\n"],"names":[],"mappings":"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"}
|
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 = "1.40.1";
|
|
11
|
+
declare const SDK_VERSION = "1.40.2-beta.1";
|
|
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 = '1.40.1';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
|
|
1
|
+
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.40.2-beta.1';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
|
package/dist/src/sdkVersion.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "1.40.1";
|
|
1
|
+
export declare const SDK_VERSION = "1.40.2-beta.1";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/experiences-sdk-react",
|
|
3
|
-
"version": "1.40.1",
|
|
3
|
+
"version": "1.40.2-beta.1",
|
|
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": "1.40.1",
|
|
45
|
-
"@contentful/experiences-core": "1.40.1",
|
|
46
|
-
"@contentful/experiences-validators": "1.40.1",
|
|
47
|
-
"@contentful/experiences-visual-editor-react": "1.40.1",
|
|
44
|
+
"@contentful/experiences-components-react": "1.40.2-beta.1",
|
|
45
|
+
"@contentful/experiences-core": "1.40.2-beta.1",
|
|
46
|
+
"@contentful/experiences-validators": "1.40.2-beta.1",
|
|
47
|
+
"@contentful/experiences-visual-editor-react": "1.40.2-beta.1",
|
|
48
48
|
"@contentful/rich-text-types": "^17.0.0",
|
|
49
49
|
"classnames": "^2.3.2",
|
|
50
50
|
"csstype": "^3.1.2",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"dist",
|
|
103
103
|
"package.json"
|
|
104
104
|
],
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "9eda035621a4a3a7d1730d9183c9013b902982b9"
|
|
106
106
|
}
|