@contentful/experiences-sdk-react 1.30.5-prerelease-20250214T0817-74d7cb0.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.
|
@@ -11,15 +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
16
|
// Register event listeners to update the media query states
|
|
16
17
|
useEffect(() => {
|
|
17
18
|
const [mediaQueryMatchers] = mediaQueryMatcher(breakpoints);
|
|
18
19
|
const eventListeners = mediaQueryMatchers.map(({ id, signal }) => {
|
|
19
|
-
const onChange = () =>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
const onChange = () => {
|
|
21
|
+
console.log('~onBreakpointChange', id, signal.matches);
|
|
22
|
+
setMediaQueryMatches((prev) => ({
|
|
23
|
+
...prev,
|
|
24
|
+
[id]: signal.matches,
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
23
27
|
signal.addEventListener('change', onChange);
|
|
24
28
|
return onChange;
|
|
25
29
|
});
|
|
@@ -32,6 +36,13 @@ const useBreakpoints = (breakpoints) => {
|
|
|
32
36
|
const resolveDesignValue = useCallback((valuesByBreakpoint, variableName) => {
|
|
33
37
|
const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
|
|
34
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
|
+
}
|
|
35
46
|
return getValueForBreakpoint(valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName);
|
|
36
47
|
}, [mediaQueryMatches, breakpoints]);
|
|
37
48
|
return { resolveDesignValue };
|
|
@@ -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 // 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 = ()
|
|
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;;;;"}
|
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;;;;"}
|
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";
|
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
|
}
|