@contentful/experiences-visual-editor-react 1.31.1-prerelease-20250218T2104-febb4f2.0 → 1.31.2-dev-20250220T0912-4b32230.0

package/dist/index.js

@@ -926,14 +926,14 @@ const ComponentValueSchema$1 = z
     .strict();
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const NoValueSchema$1 = z.object({ type: z.literal('NoValue') }).strict();
+const EmptyObjectSchema$1 = z.object({ type: z.undefined() });
 const ComponentPropertyValueSchema$1 = z.discriminatedUnion('type', [
     DesignValueSchema$1,
     BoundValueSchema$1,
     UnboundValueSchema$1,
     HyperlinkValueSchema$1,
     ComponentValueSchema$1,
-    NoValueSchema$1,
+    EmptyObjectSchema$1,
 ]);
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
@@ -946,12 +946,13 @@ const VariableMappingsSchema$1 = z.record(propertyKeySchema$1, VariableMappingSc
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
 const PatternPropertyDefinitionSchema$1 = z.object({
-    defaultValue: z
-        .object({
-        path: z.string(),
-        type: z.literal('BoundValue'),
-    })
-        .optional(),
+    defaultValue: z.union([
+        z.object({
+            path: z.string(),
+            type: z.literal('BoundValue'),
+        }),
+        z.null(),
+    ]),
     contentTypes: z.record(z.string(), z.any()),
 });
 const PatternPropertyDefinitionsSchema$1 = z.record(propertyKeySchema$1, PatternPropertyDefinitionSchema$1);
@@ -1014,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(),
 });
@@ -1498,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') {
@@ -2993,12 +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 [, 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,
@@ -3012,8 +3037,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);
@@ -3335,14 +3358,14 @@ const ComponentValueSchema = z
     .strict();
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const NoValueSchema = z.object({ type: z.literal('NoValue') }).strict();
+const EmptyObjectSchema = z.object({ type: z.undefined() });
 const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
     DesignValueSchema,
     BoundValueSchema,
     UnboundValueSchema,
     HyperlinkValueSchema,
     ComponentValueSchema,
-    NoValueSchema,
+    EmptyObjectSchema,
 ]);
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
@@ -3355,12 +3378,13 @@ const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
 const PatternPropertyDefinitionSchema = z.object({
-    defaultValue: z
-        .object({
-        path: z.string(),
-        type: z.literal('BoundValue'),
-    })
-        .optional(),
+    defaultValue: z.union([
+        z.object({
+            path: z.string(),
+            type: z.literal('BoundValue'),
+        }),
+        z.null(),
+    ]),
     contentTypes: z.record(z.string(), z.any()),
 });
 const PatternPropertyDefinitionsSchema = z.record(propertyKeySchema, PatternPropertyDefinitionSchema);
@@ -3423,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(),
 });
@@ -4482,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.
@@ -5206,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;