@contentful/experiences-visual-editor-react 1.31.0 → 1.31.1-beta.0

package/dist/index.js

@@ -1015,8 +1015,33 @@ const ComponentVariableSchema$1 = z.object({
 });
 const ComponentVariablesSchema$1 = z.record(z.string().regex(/^[a-zA-Z0-9-_]{1,54}$/), // Here the key is <variableName>_<nanoidId> so we need to allow for a longer length
 ComponentVariableSchema$1);
+const THUMBNAIL_IDS$1 = [
+    'columns',
+    'columnsPlusRight',
+    'imagesSquare',
+    'subtitles',
+    'rowsPlusBottom',
+    'userRectangle',
+    'textbox',
+    'monitorPlay',
+    'article',
+    'table',
+    'star',
+    'heartStraight',
+    'frameCorners',
+    'rows',
+    'dotsThreeOutline',
+    'listDashes',
+    'checkerBoard',
+    'gridFour',
+    'slideshow',
+    'diamondsFour',
+    'cards',
+    'textColumns',
+];
 const ComponentSettingsSchema$1 = z.object({
     variableDefinitions: ComponentVariablesSchema$1,
+    thumbnailId: z.enum(THUMBNAIL_IDS$1).optional(),
     variableMappings: VariableMappingsSchema$1.optional(),
     patternPropertyDefinitions: PatternPropertyDefinitionsSchema$1.optional(),
 });
@@ -1499,11 +1524,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') {
@@ -1639,7 +1664,7 @@ const builtInStylesWithDesignTokens = [
 const isValidBreakpointValue = (value) => {
     return value !== undefined && value !== null && value !== '';
 };
-const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName, resolveDesignTokens = true) => {
+const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName, resolveDesignTokens = true) => {
     const eventuallyResolveDesignTokens = (value) => {
         // For some built-in design properties, we support design tokens
         if (builtInStylesWithDesignTokens.includes(variableName)) {
@@ -1660,8 +1685,6 @@ const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpoint
                 return valuesByBreakpoint[breakpointId];
             }
         }
-        // If no breakpoint matched, we search and apply the fallback breakpoint
-        const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
         const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
         if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
             if (resolveDesignTokens) {
@@ -2996,13 +3019,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 fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
+    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,
@@ -3016,13 +3037,12 @@ 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 activeBreakpointIndex = getActiveBreakpointIndex(breakpoints, mediaQueryMatches, fallbackBreakpointIndex);
     const resolveDesignValue = useCallback((valuesByBreakpoint, variableName) => {
-        return getValueForBreakpoint(valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName);
-    }, [activeBreakpointIndex, breakpoints]);
+        const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
+        const activeBreakpointIndex = getActiveBreakpointIndex(breakpoints, mediaQueryMatches, fallbackBreakpointIndex);
+        return getValueForBreakpoint(valuesByBreakpoint, breakpoints, activeBreakpointIndex, fallbackBreakpointIndex, variableName);
+    }, [mediaQueryMatches, breakpoints]);
     return { resolveDesignValue };
 };
 
@@ -3427,8 +3447,33 @@ const ComponentVariableSchema = z.object({
 });
 const ComponentVariablesSchema = z.record(z.string().regex(/^[a-zA-Z0-9-_]{1,54}$/), // Here the key is <variableName>_<nanoidId> so we need to allow for a longer length
 ComponentVariableSchema);
+const THUMBNAIL_IDS = [
+    'columns',
+    'columnsPlusRight',
+    'imagesSquare',
+    'subtitles',
+    'rowsPlusBottom',
+    'userRectangle',
+    'textbox',
+    'monitorPlay',
+    'article',
+    'table',
+    'star',
+    'heartStraight',
+    'frameCorners',
+    'rows',
+    'dotsThreeOutline',
+    'listDashes',
+    'checkerBoard',
+    'gridFour',
+    'slideshow',
+    'diamondsFour',
+    'cards',
+    'textColumns',
+];
 const ComponentSettingsSchema = z.object({
     variableDefinitions: ComponentVariablesSchema,
+    thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
     variableMappings: VariableMappingsSchema.optional(),
     patternPropertyDefinitions: PatternPropertyDefinitionsSchema.optional(),
 });
@@ -4486,7 +4531,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.
@@ -5210,7 +5255,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;