@contentful/experiences-sdk-react 1.30.5-prerelease-20250212T1254-7ec10ae.0 → 1.30.5-prerelease-20250214T1504-9ac7f25.0
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/hooks/useBreakpoints.js +19 -8
- package/dist/hooks/useBreakpoints.js.map +1 -1
- package/dist/hooks/useClassName.js +0 -6
- package/dist/hooks/useClassName.js.map +1 -1
- package/dist/hooks/useMediaQuery.js +0 -1
- package/dist/hooks/useMediaQuery.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/hooks/useClassName.d.ts +0 -1
- package/dist/src/hooks/useMediaQuery.d.ts +0 -2
- package/dist/src/sdkVersion.d.ts +1 -1
- package/dist/src/utils/parseComponentProps.d.ts +0 -1
- package/package.json +6 -6
|
@@ -11,16 +11,19 @@ import { useState, useEffect, useCallback } from 'react';
|
|
|
11
11
|
*/
|
|
12
12
|
const useBreakpoints = (breakpoints) => {
|
|
13
13
|
const [, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);
|
|
14
|
+
console.log('~initialMediaQueryMatches', initialMediaQueryMatches);
|
|
14
15
|
const [mediaQueryMatches, setMediaQueryMatches] = useState(initialMediaQueryMatches);
|
|
15
|
-
const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
|
|
16
16
|
// Register event listeners to update the media query states
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
const [mediaQueryMatchers] = mediaQueryMatcher(breakpoints);
|
|
19
19
|
const eventListeners = mediaQueryMatchers.map(({ id, signal }) => {
|
|
20
|
-
const onChange = () =>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
const onChange = () => {
|
|
21
|
+
console.log('~onBreakpointChange', id, signal.matches);
|
|
22
|
+
setMediaQueryMatches((prev) => ({
|
|
23
|
+
...prev,
|
|
24
|
+
[id]: signal.matches,
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
24
27
|
signal.addEventListener('change', onChange);
|
|
25
28
|
return onChange;
|
|
26
29
|
});
|
|
@@ -30,10 +33,18 @@ const useBreakpoints = (breakpoints) => {
|
|
|
30
33
|
});
|
|
31
34
|
};
|
|
32
35
|
}, [breakpoints]);
|
|
33
|
-
const activeBreakpointIndex = getActiveBreakpointIndex(breakpoints, mediaQueryMatches, fallbackBreakpointIndex);
|
|
34
36
|
const resolveDesignValue = useCallback((valuesByBreakpoint, variableName) => {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
|
|
38
|
+
const activeBreakpointIndex = getActiveBreakpointIndex(breakpoints, mediaQueryMatches, fallbackBreakpointIndex);
|
|
39
|
+
if (variableName === 'hide') {
|
|
40
|
+
console.log('~valuesByBreakpoint', valuesByBreakpoint);
|
|
41
|
+
console.log('~breakpoints', breakpoints);
|
|
42
|
+
console.log('~fallbackBreakpointIndex', fallbackBreakpointIndex);
|
|
43
|
+
console.log('~mediaQueryMatches', mediaQueryMatches);
|
|
44
|
+
console.log('~activeBreakpointIndex', activeBreakpointIndex);
|
|
45
|
+
}
|
|
46
|
+
return getValueForBreakpoint(valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName);
|
|
47
|
+
}, [mediaQueryMatches, breakpoints]);
|
|
37
48
|
return { resolveDesignValue };
|
|
38
49
|
};
|
|
39
50
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBreakpoints.js","sources":["../../../src/hooks/useBreakpoints.ts"],"sourcesContent":["import type { Breakpoint, ResolveDesignValueType } from '@contentful/experiences-core/types';\nimport {\n mediaQueryMatcher,\n getFallbackBreakpointIndex,\n getActiveBreakpointIndex,\n getValueForBreakpoint,\n} from '@contentful/experiences-core';\nimport { useCallback, useEffect, useState } from 'react';\n\n// TODO: In order to support integrations without React, we should extract this heavy logic into simple\n// functions that we can reuse in other frameworks.\n\n/*\n * Registers media query change listeners for each breakpoint (except for \"*\").\n * It will always assume the last matching media query in the list. It therefore,\n * assumes that the breakpoints are sorted beginning with the default value (query: \"*\")\n * and then decending by screen width. For mobile-first designs, the order would be ascending\n */\nexport const useBreakpoints = (breakpoints: Breakpoint[]) => {\n const [, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);\n\n const [mediaQueryMatches, setMediaQueryMatches] =\n useState<Record<string, boolean>>(initialMediaQueryMatches);\n\n
|
|
1
|
+
{"version":3,"file":"useBreakpoints.js","sources":["../../../src/hooks/useBreakpoints.ts"],"sourcesContent":["import type { Breakpoint, ResolveDesignValueType } from '@contentful/experiences-core/types';\nimport {\n mediaQueryMatcher,\n getFallbackBreakpointIndex,\n getActiveBreakpointIndex,\n getValueForBreakpoint,\n} from '@contentful/experiences-core';\nimport { useCallback, useEffect, useState } from 'react';\n\n// TODO: In order to support integrations without React, we should extract this heavy logic into simple\n// functions that we can reuse in other frameworks.\n\n/*\n * Registers media query change listeners for each breakpoint (except for \"*\").\n * It will always assume the last matching media query in the list. It therefore,\n * assumes that the breakpoints are sorted beginning with the default value (query: \"*\")\n * and then decending by screen width. For mobile-first designs, the order would be ascending\n */\nexport const useBreakpoints = (breakpoints: Breakpoint[]) => {\n const [, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);\n console.log('~initialMediaQueryMatches', initialMediaQueryMatches);\n\n const [mediaQueryMatches, setMediaQueryMatches] =\n useState<Record<string, boolean>>(initialMediaQueryMatches);\n\n // Register event listeners to update the media query states\n useEffect(() => {\n const [mediaQueryMatchers] = mediaQueryMatcher(breakpoints);\n const eventListeners = mediaQueryMatchers.map(({ id, signal }) => {\n const onChange = () => {\n console.log('~onBreakpointChange', id, signal.matches);\n setMediaQueryMatches((prev) => ({\n ...prev,\n [id]: signal.matches,\n }));\n };\n\n signal.addEventListener('change', onChange);\n return onChange;\n });\n\n return () => {\n eventListeners.forEach((eventListener, index) => {\n mediaQueryMatchers[index].signal.removeEventListener('change', eventListener);\n });\n };\n }, [breakpoints]);\n\n const resolveDesignValue: ResolveDesignValueType = useCallback(\n (valuesByBreakpoint, variableName) => {\n const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);\n\n const activeBreakpointIndex = getActiveBreakpointIndex(\n breakpoints,\n mediaQueryMatches,\n fallbackBreakpointIndex,\n );\n if (variableName === 'hide') {\n console.log('~valuesByBreakpoint', valuesByBreakpoint);\n console.log('~breakpoints', breakpoints);\n console.log('~fallbackBreakpointIndex', fallbackBreakpointIndex);\n console.log('~mediaQueryMatches', mediaQueryMatches);\n console.log('~activeBreakpointIndex', activeBreakpointIndex);\n }\n return getValueForBreakpoint(\n valuesByBreakpoint,\n breakpoints,\n activeBreakpointIndex,\n fallbackBreakpointIndex,\n variableName,\n );\n },\n [mediaQueryMatches, breakpoints],\n );\n\n return { resolveDesignValue };\n};\n"],"names":[],"mappings":";;;AASA;AACA;AAEA;;;;;AAKG;AACU,MAAA,cAAc,GAAG,CAAC,WAAyB,KAAI;IAC1D,MAAM,GAAG,wBAAwB,CAAC,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AACpE,IAAA,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,wBAAwB,CAAC,CAAC;IAEnE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAC7C,QAAQ,CAA0B,wBAAwB,CAAC,CAAC;;IAG9D,SAAS,CAAC,MAAK;QACb,MAAM,CAAC,kBAAkB,CAAC,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAC5D,QAAA,MAAM,cAAc,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAI;YAC/D,MAAM,QAAQ,GAAG,MAAK;gBACpB,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;AACvD,gBAAA,oBAAoB,CAAC,CAAC,IAAI,MAAM;AAC9B,oBAAA,GAAG,IAAI;AACP,oBAAA,CAAC,EAAE,GAAG,MAAM,CAAC,OAAO;AACrB,iBAAA,CAAC,CAAC,CAAC;AACN,aAAC,CAAC;AAEF,YAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC5C,YAAA,OAAO,QAAQ,CAAC;AAClB,SAAC,CAAC,CAAC;AAEH,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,OAAO,CAAC,CAAC,aAAa,EAAE,KAAK,KAAI;AAC9C,gBAAA,kBAAkB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAChF,aAAC,CAAC,CAAC;AACL,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAA2B,WAAW,CAC5D,CAAC,kBAAkB,EAAE,YAAY,KAAI;AACnC,QAAA,MAAM,uBAAuB,GAAG,0BAA0B,CAAC,WAAW,CAAC,CAAC;QAExE,MAAM,qBAAqB,GAAG,wBAAwB,CACpD,WAAW,EACX,iBAAiB,EACjB,uBAAuB,CACxB,CAAC;AACF,QAAA,IAAI,YAAY,KAAK,MAAM,EAAE;AAC3B,YAAA,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,CAAC;AACvD,YAAA,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACzC,YAAA,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,uBAAuB,CAAC,CAAC;AACjE,YAAA,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;AACrD,YAAA,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,qBAAqB,CAAC,CAAC;SAC9D;AACD,QAAA,OAAO,qBAAqB,CAC1B,kBAAkB,EAClB,WAAW,EACX,qBAAqB,EACrB,uBAAuB,EACvB,YAAY,CACb,CAAC;AACJ,KAAC,EACD,CAAC,iBAAiB,EAAE,WAAW,CAAC,CACjC,CAAC;IAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAChC;;;;"}
|
|
@@ -2,21 +2,15 @@ import { useInsertionEffect } from 'react';
|
|
|
2
2
|
import '@contentful/experiences-core';
|
|
3
3
|
import '@contentful/experiences-core/constants';
|
|
4
4
|
|
|
5
|
-
const injectedStyles = [];
|
|
6
5
|
const useInjectStylesheet = (stylesheet) => {
|
|
7
6
|
useInsertionEffect(() => {
|
|
8
7
|
if (!stylesheet) {
|
|
9
8
|
return;
|
|
10
9
|
}
|
|
11
|
-
if (injectedStyles.includes(stylesheet.hash)) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
10
|
const styleTag = document.createElement('style');
|
|
15
11
|
styleTag.setAttribute('type', 'text/css');
|
|
16
|
-
styleTag.id = stylesheet.hash;
|
|
17
12
|
styleTag.innerHTML = stylesheet.css;
|
|
18
13
|
document.head.appendChild(styleTag);
|
|
19
|
-
injectedStyles.push(stylesheet.hash);
|
|
20
14
|
}, [stylesheet]);
|
|
21
15
|
};
|
|
22
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useClassName.js","sources":["../../../src/hooks/useClassName.ts"],"sourcesContent":["import { useLayoutEffect, useState, useInsertionEffect } from 'react';\n\nimport {\n buildCfStyles,\n buildStyleTag,\n isStructureWithRelativeHeight,\n} from '@contentful/experiences-core';\nimport { ComponentTreeNode } from '@contentful/experiences-core/types';\nimport { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';\n\
|
|
1
|
+
{"version":3,"file":"useClassName.js","sources":["../../../src/hooks/useClassName.ts"],"sourcesContent":["import { useLayoutEffect, useState, useInsertionEffect } from 'react';\n\nimport {\n buildCfStyles,\n buildStyleTag,\n isStructureWithRelativeHeight,\n} from '@contentful/experiences-core';\nimport { ComponentTreeNode } from '@contentful/experiences-core/types';\nimport { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';\n\n/**\n * This hook can generate className and inject styles on a client side as a <style> tag\n * or it derives the className set on the server side\n *\n * @param node: the componenet node for which the styles will be injected\n * @param props: the props of the component, represented by the node\n * @returns the className that was eitner generated on the client side or derived from the value, set on server side\n */\nexport const useClassName = ({\n node,\n props,\n}: {\n node: ComponentTreeNode;\n props: Record<string, any>;\n}) => {\n const [className, setClassName] = useState<string>(props.cfSsrClassName ?? '');\n // Once our React support allows it (>=18), this should be implemented with useInsertionEffect.\n useLayoutEffect(() => {\n if (props.cfSsrClassName) {\n // class name has been already set on the server side. No need to calculate it on client side anymore\n return;\n }\n\n const cfStyles = buildCfStyles(props);\n\n if (Object.keys(cfStyles).length === 0) {\n return;\n }\n\n if (\n !node.children.length &&\n isStructureWithRelativeHeight(node.definitionId, cfStyles.height)\n ) {\n cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;\n }\n\n const [className, styleRule] = buildStyleTag({ styles: cfStyles });\n\n if (!className || !styleRule) {\n return;\n }\n\n const styleTag = document.createElement('style');\n styleTag.dataset['cfStyles'] = className;\n\n setClassName(className);\n\n document.head.appendChild(styleTag).innerHTML = styleRule;\n }, [props, node]);\n\n return className;\n};\n\nexport const useInjectStylesheet = (stylesheet?: { css: string; className: string }) => {\n useInsertionEffect(() => {\n if (!stylesheet) {\n return;\n }\n\n const styleTag = document.createElement('style');\n styleTag.setAttribute('type', 'text/css');\n styleTag.innerHTML = stylesheet.css;\n\n document.head.appendChild(styleTag);\n }, [stylesheet]);\n};\n"],"names":[],"mappings":";;;;AA+Da,MAAA,mBAAmB,GAAG,CAAC,UAA+C,KAAI;IACrF,kBAAkB,CAAC,MAAK;QACtB,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACjD,QAAA,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAC1C,QAAA,QAAQ,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC;AAEpC,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACtC,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AACnB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.js","sources":["../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import {\n buildCfStyles,\n designTokensRegistry,\n flattenDesignTokenRegistry,\n isStructureWithRelativeHeight,\n maybePopulateDesignTokenValue,\n toCSSAttribute,\n toCSSString,\n toMediaQuery,\n} from '@contentful/experiences-core';\nimport { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';\nimport { Breakpoint, ComponentTreeNode } 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}>;\n\nexport const resolveClassNamesFromBuiltInStyles = ({\n designPropsByBreakpointId,\n breakpoints,\n node,\n}: {\n designPropsByBreakpointId: Record<string, Record<string, any>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n}): ResolvedStylesheetData => {\n const mapOfDesignVariableKeys = flattenDesignTokenRegistry(designTokensRegistry);\n const currentNodeClassNames: string[] = [];\n\n const result: Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n }> = [];\n\n // then for each breakpoint\n for (const breakpoint of breakpoints) {\n const designProps = designPropsByBreakpointId[breakpoint.id];\n if (!designProps) {\n continue;\n }\n\n const propsByBreakpointWithResolvedDesignTokens = Object.entries(designProps).reduce(\n (acc, [propName, propValue]) => {\n return {\n ...acc,\n [propName]: maybePopulateDesignTokenValue(propName, propValue, mapOfDesignVariableKeys),\n };\n },\n {},\n );\n\n // We convert cryptic prop keys to css variables\n // Eg: cfMargin to margin\n const stylesForBreakpoint = buildCfStyles(propsByBreakpointWithResolvedDesignTokens);\n\n if (\n !node.children.length &&\n isStructureWithRelativeHeight(node.definitionId, stylesForBreakpoint.height)\n ) {\n stylesForBreakpoint.minHeight = EMPTY_CONTAINER_HEIGHT;\n }\n\n const stylesForBreakpointWithoutUndefined: Record<string, string> = Object.fromEntries(\n Object.entries(stylesForBreakpoint)\n .filter(([, value]) => value !== undefined)\n .map(([key, value]) => [toCSSAttribute(key), value]),\n );\n\n /**\n * stylesForBreakpoint {\n margin: '0 0 0 0',\n padding: '0 0 0 0',\n 'background-color': 'rgba(246, 246, 246, 1)',\n width: '100%',\n height: 'fit-content',\n 'max-width': 'none',\n border: '0px solid rgba(0, 0, 0, 0)',\n 'border-radius': '0px',\n gap: '0px 0px',\n 'align-items': 'center',\n 'justify-content': 'safe center',\n 'flex-direction': 'column',\n 'flex-wrap': 'nowrap',\n 'font-style': 'normal',\n 'text-decoration': 'none',\n 'box-sizing': 'border-box'\n }\n */\n // I create a hash of the object above because that would ensure hash stability\n const styleHash = md5(`${node.id}-${JSON.stringify(stylesForBreakpointWithoutUndefined)}`);\n\n // and prefix the className to make sure the value can be processed\n const className = `cfstyles-${styleHash}`;\n\n // I save the generated hashes into an array to later save it in the tree node\n // as cfSsrClassName prop\n // making sure to avoid the duplicates in case styles for > 1 breakpoints are the same\n if (!currentNodeClassNames.includes(className)) {\n currentNodeClassNames.push(className);\n }\n\n // otherwise, save it to the stylesheet\n result.push({\n className,\n breakpointCondition: breakpoint.query,\n css: toCSSString(stylesForBreakpointWithoutUndefined),\n });\n }\n\n return result;\n};\n\nexport const convertResolvedDesignValuesToMediaQuery = (styleSheetData: ResolvedStylesheetData) => {\n /**\n * {\n * className: ['cfstyles-123', 'cfstyles-456'],\n * styleSheet: `\n * @media (max-width: 1024px) {\n * .cfstyles-123 { color: red; }\n * }\n * @media (max-width: 768px) {\n * .cfstyles-456 { color: blue; }\n * }\n * `\n * }\n */\n const styleSheet = styleSheetData.reduce<{ className: Array<string>; css: string }>(\n (acc, { breakpointCondition, className, css }) => {\n if (acc.className.includes(className)) {\n return acc;\n }\n\n const mediaQuery = toMediaQuery({\n condition: breakpointCondition,\n cssByClassName: { [className]: css },\n });\n return {\n className: [...acc.className, className],\n css: `${acc.css}${mediaQuery}`,\n };\n },\n {\n className: [],\n css: '',\n },\n );\n\n const className = styleSheet.className.join(' ');\n\n return {\n css: styleSheet.css,\n
|
|
1
|
+
{"version":3,"file":"useMediaQuery.js","sources":["../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import {\n buildCfStyles,\n designTokensRegistry,\n flattenDesignTokenRegistry,\n isStructureWithRelativeHeight,\n maybePopulateDesignTokenValue,\n toCSSAttribute,\n toCSSString,\n toMediaQuery,\n} from '@contentful/experiences-core';\nimport { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';\nimport { Breakpoint, ComponentTreeNode } 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}>;\n\nexport const resolveClassNamesFromBuiltInStyles = ({\n designPropsByBreakpointId,\n breakpoints,\n node,\n}: {\n designPropsByBreakpointId: Record<string, Record<string, any>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n}): ResolvedStylesheetData => {\n const mapOfDesignVariableKeys = flattenDesignTokenRegistry(designTokensRegistry);\n const currentNodeClassNames: string[] = [];\n\n const result: Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n }> = [];\n\n // then for each breakpoint\n for (const breakpoint of breakpoints) {\n const designProps = designPropsByBreakpointId[breakpoint.id];\n if (!designProps) {\n continue;\n }\n\n const propsByBreakpointWithResolvedDesignTokens = Object.entries(designProps).reduce(\n (acc, [propName, propValue]) => {\n return {\n ...acc,\n [propName]: maybePopulateDesignTokenValue(propName, propValue, mapOfDesignVariableKeys),\n };\n },\n {},\n );\n\n // We convert cryptic prop keys to css variables\n // Eg: cfMargin to margin\n const stylesForBreakpoint = buildCfStyles(propsByBreakpointWithResolvedDesignTokens);\n\n if (\n !node.children.length &&\n isStructureWithRelativeHeight(node.definitionId, stylesForBreakpoint.height)\n ) {\n stylesForBreakpoint.minHeight = EMPTY_CONTAINER_HEIGHT;\n }\n\n const stylesForBreakpointWithoutUndefined: Record<string, string> = Object.fromEntries(\n Object.entries(stylesForBreakpoint)\n .filter(([, value]) => value !== undefined)\n .map(([key, value]) => [toCSSAttribute(key), value]),\n );\n\n /**\n * stylesForBreakpoint {\n margin: '0 0 0 0',\n padding: '0 0 0 0',\n 'background-color': 'rgba(246, 246, 246, 1)',\n width: '100%',\n height: 'fit-content',\n 'max-width': 'none',\n border: '0px solid rgba(0, 0, 0, 0)',\n 'border-radius': '0px',\n gap: '0px 0px',\n 'align-items': 'center',\n 'justify-content': 'safe center',\n 'flex-direction': 'column',\n 'flex-wrap': 'nowrap',\n 'font-style': 'normal',\n 'text-decoration': 'none',\n 'box-sizing': 'border-box'\n }\n */\n // I create a hash of the object above because that would ensure hash stability\n const styleHash = md5(`${node.id}-${JSON.stringify(stylesForBreakpointWithoutUndefined)}`);\n\n // and prefix the className to make sure the value can be processed\n const className = `cfstyles-${styleHash}`;\n\n // I save the generated hashes into an array to later save it in the tree node\n // as cfSsrClassName prop\n // making sure to avoid the duplicates in case styles for > 1 breakpoints are the same\n if (!currentNodeClassNames.includes(className)) {\n currentNodeClassNames.push(className);\n }\n\n // otherwise, save it to the stylesheet\n result.push({\n className,\n breakpointCondition: breakpoint.query,\n css: toCSSString(stylesForBreakpointWithoutUndefined),\n });\n }\n\n return result;\n};\n\nexport const convertResolvedDesignValuesToMediaQuery = (styleSheetData: ResolvedStylesheetData) => {\n /**\n * {\n * className: ['cfstyles-123', 'cfstyles-456'],\n * styleSheet: `\n * @media (max-width: 1024px) {\n * .cfstyles-123 { color: red; }\n * }\n * @media (max-width: 768px) {\n * .cfstyles-456 { color: blue; }\n * }\n * `\n * }\n */\n const styleSheet = styleSheetData.reduce<{ className: Array<string>; css: string }>(\n (acc, { breakpointCondition, className, css }) => {\n if (acc.className.includes(className)) {\n return acc;\n }\n\n const mediaQuery = toMediaQuery({\n condition: breakpointCondition,\n cssByClassName: { [className]: css },\n });\n return {\n className: [...acc.className, className],\n css: `${acc.css}${mediaQuery}`,\n };\n },\n {\n className: [],\n css: '',\n },\n );\n\n const className = styleSheet.className.join(' ');\n\n return {\n css: styleSheet.css,\n className,\n };\n};\n\nexport const useMediaQuery = ({\n designPropsByBreakpointId,\n breakpoints,\n node,\n}: {\n designPropsByBreakpointId: Record<string, Record<string, any>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n}) => {\n return useMemo(() => {\n const styleSheetData = resolveClassNamesFromBuiltInStyles({\n designPropsByBreakpointId,\n breakpoints,\n node,\n });\n\n return convertResolvedDesignValuesToMediaQuery(styleSheetData);\n }, [designPropsByBreakpointId, breakpoints, node]);\n};\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,kCAAkC,GAAG,CAAC,EACjD,yBAAyB,EACzB,WAAW,EACX,IAAI,GAKL,KAA4B;AAC3B,IAAA,MAAM,uBAAuB,GAAG,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;IAGjF,MAAM,MAAM,GAIP,EAAE,CAAC;;AAGR,IAAA,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;QACpC,MAAM,WAAW,GAAG,yBAAyB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,EAAE;YAChB,SAAS;SACV;QAED,MAAM,yCAAyC,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,MAAM,CAClF,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAI;YAC7B,OAAO;AACL,gBAAA,GAAG,GAAG;gBACN,CAAC,QAAQ,GAAG,6BAA6B,CAAC,QAAQ,EAAE,SAAS,EAAE,uBAAuB,CAAC;aACxF,CAAC;SACH,EACD,EAAE,CACH,CAAC;;;AAIF,QAAA,MAAM,mBAAmB,GAAG,aAAa,CAAC,yCAAyC,CAAC,CAAC;AAErF,QAAA,IACE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM;YACrB,6BAA6B,CAAC,IAAI,CAAC,YAAY,EAAE,mBAAmB,CAAC,MAAM,CAAC,EAC5E;AACA,YAAA,mBAAmB,CAAC,SAAS,GAAG,sBAAsB,CAAC;SACxD;QAED,MAAM,mCAAmC,GAA2B,MAAM,CAAC,WAAW,CACpF,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC;AAChC,aAAA,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,KAAK,KAAK,SAAS,CAAC;aAC1C,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC,CACvD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;AAmBM;;AAEN,QAAA,MAAM,SAAS,GAAG,GAAG,CAAC,CAAA,EAAG,IAAI,CAAC,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,mCAAmC,CAAC,CAAA,CAAE,CAAC,CAAC;;AAG3F,QAAA,MAAM,SAAS,GAAG,CAAY,SAAA,EAAA,SAAS,EAAE,CAAC;;QAU1C,MAAM,CAAC,IAAI,CAAC;YACV,SAAS;YACT,mBAAmB,EAAE,UAAU,CAAC,KAAK;AACrC,YAAA,GAAG,EAAE,WAAW,CAAC,mCAAmC,CAAC;AACtD,SAAA,CAAC,CAAC;KACJ;AAED,IAAA,OAAO,MAAM,CAAC;AAChB,EAAE;AAEW,MAAA,uCAAuC,GAAG,CAAC,cAAsC,KAAI;AAChG;;;;;;;;;;;;AAYG;AACH,IAAA,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,EAAE,KAAI;QAC/C,IAAI,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AACrC,YAAA,OAAO,GAAG,CAAC;SACZ;QAED,MAAM,UAAU,GAAG,YAAY,CAAC;AAC9B,YAAA,SAAS,EAAE,mBAAmB;AAC9B,YAAA,cAAc,EAAE,EAAE,CAAC,SAAS,GAAG,GAAG,EAAE;AACrC,SAAA,CAAC,CAAC;QACH,OAAO;YACL,SAAS,EAAE,CAAC,GAAG,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC;AACxC,YAAA,GAAG,EAAE,CAAG,EAAA,GAAG,CAAC,GAAG,CAAA,EAAG,UAAU,CAAE,CAAA;SAC/B,CAAC;AACJ,KAAC,EACD;AACE,QAAA,SAAS,EAAE,EAAE;AACb,QAAA,GAAG,EAAE,EAAE;AACR,KAAA,CACF,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjD,OAAO;QACL,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,SAAS;KACV,CAAC;AACJ,EAAE;AAEK,MAAM,aAAa,GAAG,CAAC,EAC5B,yBAAyB,EACzB,WAAW,EACX,IAAI,GAKL,KAAI;IACH,OAAO,OAAO,CAAC,MAAK;QAClB,MAAM,cAAc,GAAG,kCAAkC,CAAC;YACxD,yBAAyB;YACzB,WAAW;YACX,IAAI;AACL,SAAA,CAAC,CAAC;AAEH,QAAA,OAAO,uCAAuC,CAAC,cAAc,CAAC,CAAC;KAChE,EAAE,CAAC,yBAAyB,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;AACrD;;;;"}
|
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.30.5-prerelease-
|
|
11
|
+
declare const SDK_VERSION = "1.30.5-prerelease-20250214T1504-9ac7f25.0";
|
|
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.30.5-prerelease-
|
|
1
|
+
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.30.5-prerelease-20250214T1504-9ac7f25.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
|
|
@@ -11,7 +11,6 @@ export declare const resolveClassNamesFromBuiltInStyles: ({ designPropsByBreakpo
|
|
|
11
11
|
}) => ResolvedStylesheetData;
|
|
12
12
|
export declare const convertResolvedDesignValuesToMediaQuery: (styleSheetData: ResolvedStylesheetData) => {
|
|
13
13
|
css: string;
|
|
14
|
-
hash: string;
|
|
15
14
|
className: string;
|
|
16
15
|
};
|
|
17
16
|
export declare const useMediaQuery: ({ designPropsByBreakpointId, breakpoints, node, }: {
|
|
@@ -20,7 +19,6 @@ export declare const useMediaQuery: ({ designPropsByBreakpointId, breakpoints, n
|
|
|
20
19
|
node: ComponentTreeNode;
|
|
21
20
|
}) => {
|
|
22
21
|
css: string;
|
|
23
|
-
hash: string;
|
|
24
22
|
className: string;
|
|
25
23
|
};
|
|
26
24
|
export {};
|
package/dist/src/sdkVersion.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "1.30.5-prerelease-
|
|
1
|
+
export declare const SDK_VERSION = "1.30.5-prerelease-20250214T1504-9ac7f25.0";
|
|
@@ -39,7 +39,6 @@ export declare const parseComponentProps: ({ mainBreakpoint, componentDefinition
|
|
|
39
39
|
styleProps: Record<string, Record<string, string | number | boolean | Record<any, any> | undefined>>;
|
|
40
40
|
mediaQuery: {
|
|
41
41
|
css: string;
|
|
42
|
-
hash: string;
|
|
43
42
|
className: string;
|
|
44
43
|
};
|
|
45
44
|
customDesignProps: Record<string, string | number | boolean | Record<any, any> | undefined>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/experiences-sdk-react",
|
|
3
|
-
"version": "1.30.5-prerelease-
|
|
3
|
+
"version": "1.30.5-prerelease-20250214T1504-9ac7f25.0",
|
|
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.30.5-prerelease-
|
|
45
|
-
"@contentful/experiences-core": "1.30.5-prerelease-
|
|
46
|
-
"@contentful/experiences-validators": "1.30.5-prerelease-
|
|
47
|
-
"@contentful/experiences-visual-editor-react": "1.30.5-prerelease-
|
|
44
|
+
"@contentful/experiences-components-react": "1.30.5-prerelease-20250214T1504-9ac7f25.0",
|
|
45
|
+
"@contentful/experiences-core": "1.30.5-prerelease-20250214T1504-9ac7f25.0",
|
|
46
|
+
"@contentful/experiences-validators": "1.30.5-prerelease-20250214T1504-9ac7f25.0",
|
|
47
|
+
"@contentful/experiences-visual-editor-react": "1.30.5-prerelease-20250214T1504-9ac7f25.0",
|
|
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": "cdf3e8643447000c163fb076e5fc6f3d32c6e0fc"
|
|
106
106
|
}
|