@contentful/experiences-visual-editor-react 1.31.1-dev-20250218T1728-50b0be5.0 → 1.31.1-dev-20250219T1258-06c6e3b.0

package/dist/index.js

@@ -1499,11 +1499,11 @@ function getArrayValue(entryOrAsset, path, entityStore) {
     return result;
 }
 
-const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableDefinition, path) => {
+const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableType, path) => {
     const entityOrAsset = entityStore.getEntryOrAsset(binding, path);
     if (!entityOrAsset)
         return;
-    switch (variableDefinition.type) {
+    switch (variableType) {
         case 'Media':
             // If we bound a normal entry field to the media variable we just return the bound value
             if (entityOrAsset.sys.type === 'Entry') {
@@ -2994,12 +2994,11 @@ styleInject(css_248z$9);
  * and then decending by screen width. For mobile-first designs, the order would be ascending
  */
 const useBreakpoints = (breakpoints) => {
-    const [mediaQueryMatches, setMediaQueryMatches] = useState({});
+    const [, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);
+    const [mediaQueryMatches, setMediaQueryMatches] = useState(initialMediaQueryMatches);
     // Register event listeners to update the media query states
     useEffect(() => {
-        const [mediaQueryMatchers, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);
-        // Store the media query state in the beginning to initialise the state
-        setMediaQueryMatches(initialMediaQueryMatches);
+        const [mediaQueryMatchers] = mediaQueryMatcher(breakpoints);
         const eventListeners = mediaQueryMatchers.map(({ id, signal }) => {
             const onChange = () => setMediaQueryMatches((prev) => ({
                 ...prev,
@@ -3013,8 +3012,6 @@ const useBreakpoints = (breakpoints) => {
                 mediaQueryMatchers[index].signal.removeEventListener('change', eventListener);
             });
         };
-        // Only re-setup all listeners when the breakpoint definition changed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [breakpoints]);
     const resolveDesignValue = useCallback((valuesByBreakpoint, variableName) => {
         const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
@@ -4484,7 +4481,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
                 const [, uuid, path] = variableMapping.path.split('/');
                 const binding = dataSource[uuid];
                 const variableDefinition = definition.variables[variableName];
-                let boundValue = transformBoundContentValue(node.data.props, entityStore, binding, resolveDesignValue, variableName, variableDefinition, variableMapping.path);
+                let boundValue = transformBoundContentValue(node.data.props, entityStore, binding, resolveDesignValue, variableName, variableDefinition.type, variableMapping.path);
                 // In some cases, there may be an asset linked in the path, so we need to consider this scenario:
                 // If no 'boundValue' is found, we also attempt to extract the value associated with the second-to-last item in the path.
                 // If successful, it means we have identified the linked asset.
@@ -5208,7 +5205,7 @@ function useSingleColumn(node, resolveDesignValue) {
             return { isWrapped, wrapColumnsCount };
         }
         const parentNode = getItem({ id: node.parentId }, tree);
-        if (!parentNode) {
+        if (!parentNode || parentNode.data.blockId !== CONTENTFUL_COMPONENTS$1.columns.id) {
             return { isWrapped, wrapColumnsCount };
         }
         const { cfWrapColumns, cfWrapColumnsCount } = parentNode.data.props;