@contentful/experiences-core 3.8.0-prerelease-20250922T2329-e132272.0 → 3.8.0

package/dist/index.cjs

@@ -137,7 +137,6 @@ var PostMessageMethods;
     PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
 })(PostMessageMethods || (PostMessageMethods = {}));
 const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
-const SIDELOADED_PREFIX = 'sideloaded_';
 
 const structureComponentIds = new Set([
     CONTENTFUL_COMPONENTS.section.id,
@@ -183,7 +182,6 @@ const builtInStyles = {
         },
         type: 'Text',
         group: 'style',
-        description: 'The vertical alignment of the section',
         defaultValue: 'center',
         displayName: 'Vertical alignment',
     },
@@ -210,7 +208,6 @@ const builtInStyles = {
         },
         type: 'Text',
         group: 'style',
-        description: 'The horizontal alignment of the section',
         defaultValue: 'center',
         displayName: 'Horizontal alignment',
     },
@@ -219,83 +216,71 @@ const builtInStyles = {
         type: 'Boolean',
         group: 'style',
         defaultValue: true,
-        description: 'The visibility of the component',
     },
     cfMargin: {
         displayName: 'Margin',
         type: 'Text',
         group: 'style',
-        description: 'The margin of the section',
         defaultValue: '0 0 0 0',
     },
     cfPadding: {
         displayName: 'Padding',
         type: 'Text',
         group: 'style',
-        description: 'The padding of the section',
         defaultValue: '0 0 0 0',
     },
     cfBackgroundColor: {
         displayName: 'Background color',
         type: 'Text',
         group: 'style',
-        description: 'The background color of the section',
         defaultValue: 'rgba(0, 0, 0, 0)',
     },
     cfWidth: {
         displayName: 'Width',
         type: 'Text',
         group: 'style',
-        description: 'The width of the section',
         defaultValue: '100%',
     },
     cfHeight: {
         displayName: 'Height',
         type: 'Text',
         group: 'style',
-        description: 'The height of the section',
         defaultValue: 'fit-content',
     },
     cfMaxWidth: {
         displayName: 'Max width',
         type: 'Text',
         group: 'style',
-        description: 'The max-width of the section',
         defaultValue: 'none',
     },
     cfFlexDirection: {
         displayName: 'Direction',
         type: 'Text',
         group: 'style',
-        description: 'The orientation of the section',
         defaultValue: 'column',
     },
     cfFlexReverse: {
         displayName: 'Reverse Direction',
         type: 'Boolean',
         group: 'style',
-        description: 'Toggle the flex direction to be reversed',
         defaultValue: false,
     },
     cfFlexWrap: {
         displayName: 'Wrap objects',
         type: 'Text',
         group: 'style',
-        description: 'Wrap objects',
         defaultValue: 'nowrap',
     },
     cfBorder: {
         displayName: 'Border',
         type: 'Text',
         group: 'style',
-        description: 'The border of the section',
         defaultValue: '0px solid rgba(0, 0, 0, 0)',
     },
     cfGap: {
         displayName: 'Gap',
         type: 'Text',
         group: 'style',
-        description: 'The spacing between the elements of the section',
         defaultValue: '0px',
     },
     cfHyperlink: {
@@ -306,7 +291,6 @@ const builtInStyles = {
             format: 'URL',
             bindingSourceType: ['entry', 'experience', 'manual'],
         },
-        description: 'hyperlink for section or container',
     },
     cfOpenInNewTab: {
         displayName: 'URL behaviour',
@@ -320,7 +304,6 @@ const optionalBuiltInStyles = {
         displayName: 'Font Size',
         type: 'Text',
         group: 'style',
-        description: 'The font size of the element',
         defaultValue: '16px',
     },
     cfFontWeight: {
@@ -343,13 +326,11 @@ const optionalBuiltInStyles = {
         displayName: 'Font Weight',
         type: 'Text',
         group: 'style',
-        description: 'The font weight of the element',
         defaultValue: '400',
     },
     cfImageAsset: {
         displayName: 'Image',
         type: 'Media',
-        description: 'Image to display',
         validations: {
             bindingSourceType: ['asset', 'entry', 'manual'],
         },
@@ -368,13 +349,11 @@ const optionalBuiltInStyles = {
         displayName: 'Background color',
         type: 'Text',
         group: 'style',
-        description: 'The background color of the element',
         defaultValue: 'rgba(0, 0, 0, 0)',
     },
     cfBackgroundImageUrl: {
         displayName: 'Background image',
         type: 'Media',
-        description: 'Background image for component',
         validations: {
             bindingSourceType: ['asset', 'entry', 'manual'],
         },
@@ -393,28 +372,24 @@ const optionalBuiltInStyles = {
         displayName: 'Border Radius',
         type: 'Text',
         group: 'style',
-        description: 'The border radius of the section',
         defaultValue: '0px',
     },
     cfLineHeight: {
         displayName: 'Line Height',
         type: 'Text',
         group: 'style',
-        description: 'The line height of the element',
         defaultValue: '20px',
     },
     cfLetterSpacing: {
         displayName: 'Letter Spacing',
         type: 'Text',
         group: 'style',
-        description: 'The letter spacing of the element',
         defaultValue: '0px',
     },
     cfTextColor: {
         displayName: 'Text Color',
         type: 'Text',
         group: 'style',
-        description: 'The text color of the element',
         defaultValue: 'rgba(0, 0, 0, 1)',
     },
     cfTextAlign: {
@@ -437,7 +412,6 @@ const optionalBuiltInStyles = {
         displayName: 'Text Align',
         type: 'Text',
         group: 'style',
-        description: 'The text alignment of the element',
         defaultValue: 'start',
     },
     cfTextTransform: {
@@ -464,28 +438,24 @@ const optionalBuiltInStyles = {
         displayName: 'Text Transform',
         type: 'Text',
         group: 'style',
-        description: 'The text transform of the element',
         defaultValue: 'none',
     },
     cfTextBold: {
         displayName: 'Bold',
         type: 'Boolean',
         group: 'style',
-        description: 'The text bold of the element',
         defaultValue: false,
     },
     cfTextItalic: {
         displayName: 'Italic',
         type: 'Boolean',
         group: 'style',
-        description: 'The text italic of the element',
         defaultValue: false,
     },
     cfTextUnderline: {
         displayName: 'Underline',
         type: 'Boolean',
         group: 'style',
-        description: 'The text underline of the element',
         defaultValue: false,
     },
 };
@@ -504,7 +474,6 @@ const containerBuiltInStyles = {
         displayName: 'Margin',
         type: 'Text',
         group: 'style',
-        description: 'The margin of the container',
         // Note: The UI overwrites '0 Auto 0 Auto' as the default value for top-level containers
         defaultValue: '0 0 0 0',
     },
@@ -512,7 +481,6 @@ const containerBuiltInStyles = {
         displayName: 'Max Width',
         type: 'Text',
         group: 'style',
-        description: 'The max-width of the section',
         defaultValue: '1192px',
     },
 };
@@ -523,35 +491,30 @@ const dividerBuiltInStyles = {
         displayName: 'Margin',
         type: 'Text',
         group: 'style',
-        description: 'The margin of the divider',
         defaultValue: '20px 0px 20px 0px',
     },
     cfWidth: {
         displayName: 'Width',
         type: 'Text',
         group: 'style',
-        description: 'The width of the divider',
         defaultValue: '100%',
     },
     cfHeight: {
         displayName: 'Height',
         type: 'Text',
         group: 'style',
-        description: 'The height of the divider',
         defaultValue: '1px',
     },
     cfMaxWidth: {
         displayName: 'Max width',
         type: 'Text',
         group: 'style',
-        description: 'The max-width of the divider',
         defaultValue: 'none',
     },
     cfBackgroundColor: {
         displayName: 'Background color',
         type: 'Text',
         group: 'style',
-        description: 'The background color of the divider',
         defaultValue: 'rgba(204, 204, 204, 1)',
     },
 };
@@ -584,7 +547,6 @@ const singleColumnBuiltInStyles = {
         },
         type: 'Text',
         group: 'style',
-        description: 'The vertical alignment of the column',
         defaultValue: 'center',
         displayName: 'Vertical alignment',
     },
@@ -611,7 +573,6 @@ const singleColumnBuiltInStyles = {
         },
         type: 'Text',
         group: 'style',
-        description: 'The horizontal alignment of the column',
         defaultValue: 'center',
         displayName: 'Horizontal alignment',
     },
@@ -619,35 +580,30 @@ const singleColumnBuiltInStyles = {
         displayName: 'Padding',
         type: 'Text',
         group: 'style',
-        description: 'The padding of the column',
         defaultValue: '0 0 0 0',
     },
     cfFlexDirection: {
         displayName: 'Direction',
         type: 'Text',
         group: 'style',
-        description: 'The orientation of the column',
         defaultValue: 'column',
     },
     cfFlexWrap: {
         displayName: 'Wrap objects',
         type: 'Text',
         group: 'style',
-        description: 'Wrap objects',
         defaultValue: 'nowrap',
     },
     cfBorder: {
         displayName: 'Border',
         type: 'Text',
         group: 'style',
-        description: 'The border of the column',
         defaultValue: '0px solid rgba(0, 0, 0, 0)',
     },
     cfGap: {
         displayName: 'Gap',
         type: 'Text',
         group: 'style',
-        description: 'The spacing between the elements of the column',
         defaultValue: '0px',
     },
     cfColumnSpan: {
@@ -671,7 +627,6 @@ const columnsBuiltInStyles = {
         displayName: 'Margin',
         type: 'Text',
         group: 'style',
-        description: 'The margin of the columns',
         // Note: The UI overwrites '0 Auto 0 Auto' as the default value for top-level columns
         defaultValue: '0 0 0 0',
     },
@@ -679,35 +634,30 @@ const columnsBuiltInStyles = {
         displayName: 'Width',
         type: 'Text',
         group: 'style',
-        description: 'The width of the columns',
         defaultValue: '100%',
     },
     cfMaxWidth: {
         displayName: 'Max width',
         type: 'Text',
         group: 'style',
-        description: 'The max-width of the columns',
         defaultValue: '1192px',
     },
     cfPadding: {
         displayName: 'Padding',
         type: 'Text',
         group: 'style',
-        description: 'The padding of the columns',
         defaultValue: '10px 10px 10px 10px',
     },
     cfBorder: {
         displayName: 'Border',
         type: 'Text',
         group: 'style',
-        description: 'The border of the columns',
         defaultValue: '0px solid rgba(0, 0, 0, 0)',
     },
     cfGap: {
         displayName: 'Gap',
         type: 'Text',
         group: 'style',
-        description: 'The spacing between the elements of the columns',
         defaultValue: '10px 10px',
     },
     cfColumns: {
@@ -1040,18 +990,15 @@ const ComponentVariableSchema = zod.z.object({
 const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
     children: zod.z.lazy(() => ComponentTreeNodeSchema.array()),
 }).superRefine(({ id, prebindingId, parameters }, ctx) => {
+    // We don't fail if parameters are present but prebindingId is not because
+    // older experiences (updated before 21-09-2025) always included parameters
+    // and they will start failing if we do.
     if (prebindingId && !parameters) {
         ctx.addIssue({
             code: zod.z.ZodIssueCode.custom,
             message: `Found "prebindingId" but no "parameters" for node with id: "${id}"`,
         });
     }
-    if (parameters && !prebindingId) {
-        ctx.addIssue({
-            code: zod.z.ZodIssueCode.custom,
-            message: `Found "parameters" but no "prebindingId" for node with id: "${id}"`,
-        });
-    }
 });
 const ComponentTreeSchema = zod.z
     .object({
@@ -1155,7 +1102,6 @@ const ParameterDefinitionSchema = zod.z.object({
     passToNodes: zod.z
         .array(PassToNodeSchema)
         .max(1, 'At most one "passToNodes" element is allowed per parameter definition.'),
-    // we might change this to be empty array for native parameter definitions, that's why we don't use .length(1)
 });
 const ParameterDefinitionsSchema = zod.z.record(propertyKeySchema, ParameterDefinitionSchema);
 const VariableMappingsSchema = zod.z.record(propertyKeySchema, VariableMappingSchema);
@@ -2053,6 +1999,9 @@ const getPrebindingPathBySourceEntry = (preboundValueProperty, getHeadEntityByDa
         return undefined;
     }
     const contentTypeId = headEntity.sys.contentType.sys.id;
+    if (!preboundValueProperty.pathsByContentType?.[contentTypeId]) {
+        return undefined;
+    }
     return preboundValueProperty.pathsByContentType?.[contentTypeId]?.path;
 };
 const parseDeepPath = (deepPathCandidate) => {
@@ -2476,6 +2425,7 @@ const detachExperienceStyles = (experience) => {
     if (!experienceTreeRoot) {
         return;
     }
+    const isRenderingAPatternEntry = experience.entityStore?.isExperienceAPatternEntry;
     const mapOfDesignVariableKeys = flattenDesignTokenRegistry(exports.designTokensRegistry);
     // getting breakpoints from the entry componentTree field
     const { breakpoints } = experienceTreeRoot;
@@ -2490,7 +2440,7 @@ const detachExperienceStyles = (experience) => {
     }), {});
     // getting the breakpoint ids
     const breakpointIds = Object.keys(mediaQueryDataByBreakpoint);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, wrappingPatternNodeIds = [], }) => {
+    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, wrappingPatternNodeIds = isRenderingAPatternEntry ? ['root'] : [], }) => {
         // traversing the tree
         const queue = [];
         queue.push(...componentTree.children);
@@ -2581,7 +2531,7 @@ const detachExperienceStyles = (experience) => {
             // Chain IDs to avoid overwriting styles across multiple instances of the same pattern
             // e.g. `{outerPatternNodeId}{innerPatternNodeId}-{currentNodeId}`
             // (!) Notice that the chain of patterns (before the dash) follows the format of prebinding/ parameters
-            const currentNodeIdsChain = `${wrappingPatternNodeIds.join('')}-${currentNode.id}`;
+            const currentNodeIdsChain = [...wrappingPatternNodeIds, currentNode.id].join('-');
             // For each breakpoint, resolve design tokens, create the CSS and generate a unique className.
             for (const breakpointId of breakpointIds) {
                 const propsByBreakpointWithResolvedDesignTokens = Object.entries(propsByBreakpoint[breakpointId]).reduce((acc, [variableName, variableValue]) => {
@@ -3756,7 +3706,7 @@ const generateDefaultDataSourceForPrebindingDefinition = (prebindingDefinitions
     const parameters = {};
     for (const [parameterId, parameterDefinition] of Object.entries(prebindingDefinition.parameterDefinitions ?? {})) {
         if (parameterDefinition.defaultSource && isLink(parameterDefinition.defaultSource.link)) {
-            const dataSourceKey = generateRandomId(7);
+            const dataSourceKey = parameterDefinition.defaultSource.link.sys.id;
             dataSource[dataSourceKey] = parameterDefinition.defaultSource.link;
             parameters[parameterId] = {
                 type: 'BoundValue',
@@ -4297,6 +4247,9 @@ class EntityStore extends EntityStoreBase {
             this._experienceEntryId = experienceEntry.sys.id;
             this._unboundValues = experienceEntry.fields.unboundValues;
         }
+        this._isExperienceAPatternEntry = checkIsAssemblyEntry({
+            fields: this._experienceEntryFields,
+        });
         // DERIVE ENTITY STORE INSTANCE VARIBLES
         // Register prebindings
         {
@@ -4380,6 +4333,9 @@ class EntityStore extends EntityStoreBase {
     getCurrentLocale() {
         return this.locale;
     }
+    get isExperienceAPatternEntry() {
+        return this._isExperienceAPatternEntry;
+    }
     get hoistedVariableMappings() {
         return this._hoistedVariableMappings;
     }
@@ -5092,92 +5048,6 @@ const removeSelfReferencingDataSource = (experienceEntry) => {
     experienceEntry.fields.dataSource = newDataSource;
 };
 
-/**
- * Attaches the default prebinding value (if any) to the experience entry's dataSource.
- *
- * This ensures that any default values defined in pattern property definitions are included
- * in the dataSource, so that linked entities can be fetched and resolved correctly.
- * Without this, defaults may be omitted, resulting in unresolved references during binding.
- *
- * @returns The number of sideloaded default values, or false if the entry is not a pattern.
- */
-const sideloadPrebindingDefaultValues = (patternEntry) => {
-    let sideloadedCount = 0;
-    const addDefaultValueToDataSource = (_definitionId, definition) => {
-        if (!definition.defaultSource) {
-            // prebinding preset doesn't have default value, which is perfectly fine
-            return;
-        }
-        const { contentTypeId, link, type, // At the time of writing, it means that defaultSource is a link to a Contentful Entry, but in the future it could be a link to third party resource or smth.
-        // this .type enumeration will not have the same meaning as `Link#sys#linkType`.
-         } = definition.defaultSource;
-        if (!isLink(link)) {
-            // default value is not a link, maybe due to a bug
-            return;
-        }
-        if (!type || !contentTypeId) {
-            // broken data structure, unlikely to happen, only due to a bug
-            return;
-        }
-        // Throw in the link to the default-entry into the dataSource, this way
-        // we rely on the mechanism of fetchReferencedEntities() to "sideload" them.
-        // Keep in mind that dataSource will be available as EntityStore.dataSource
-        // and now will contain also key for `sideloaded_uuid` entry.
-        // When "sideloading" entries into the entityStore, we must ensure that
-        // there's corresponding entry in the dataSource, because all bound variables
-        // are resolved, via path that is indirectly referencing the dataSource,
-        // eg. { type: 'BoundValue', path: '/sideloaded_uuid/fields/title' }
-        patternEntry.fields.dataSource = {
-            ...patternEntry.fields.dataSource,
-            [`${SIDELOADED_PREFIX}${link.sys.id}`]: {
-                // to highlight that this is a sideloaded entry, we prefix it
-                sys: {
-                    type: 'Link',
-                    linkType: link.sys.linkType,
-                    id: link.sys.id,
-                },
-            },
-        };
-        sideloadedCount++;
-    };
-    if (!checkIsAssemblyEntry(patternEntry)) {
-        // Only supported for pattern entries since experience entries don't define pattern properties.
-        return false;
-    }
-    // --------------------
-    // Sideload prebinding values for the L1 parent pattern aka `pA`
-    // --------------------
-    const definitions = patternEntry.fields.componentSettings?.prebindingDefinitions?.[0].parameterDefinitions ?? {};
-    Object.entries(definitions).forEach(([id, definition]) => {
-        addDefaultValueToDataSource(id, definition);
-    });
-    // --------------------
-    // Sideload all default values for the L2 nested patterns, patterns aka`pB`
-    // --------------------
-    const nestedPatternEntriesLevel2 = (patternEntry.fields.usedComponents || []).filter((component) => component !== undefined && checkIsAssemblyEntry(component));
-    nestedPatternEntriesLevel2.forEach((patternEntry) => {
-        const parameterDefinitions = patternEntry.fields.componentSettings?.prebindingDefinitions?.[0].parameterDefinitions ?? {};
-        Object.entries(parameterDefinitions).forEach(([id, definition]) => {
-            addDefaultValueToDataSource(id, definition);
-        });
-    });
-    // --------------------
-    // Sideload all default values for the L3 nested patterns, patterns aka `pC`
-    // --------------------
-    const nestedPatternEntriesLevel3 = nestedPatternEntriesLevel2.flatMap((patternEntryLevel2) => {
-        const usedComponents = patternEntryLevel2.fields.usedComponents || [];
-        const filteredUsedComponents = usedComponents.filter((component) => component !== undefined && checkIsAssemblyEntry(component));
-        return filteredUsedComponents;
-    });
-    nestedPatternEntriesLevel3.forEach((patternEntry) => {
-        const parameterDefinitions = patternEntry.fields.componentSettings?.prebindingDefinitions?.[0].parameterDefinitions ?? {};
-        Object.entries(parameterDefinitions).forEach(([id, definition]) => {
-            addDefaultValueToDataSource(id, definition);
-        });
-    });
-    return sideloadedCount;
-};
-
 /**
  * Run additional checks on the references used in the experience entry and
  * process data required for prebinding. This must be used after fetching an
@@ -5188,7 +5058,6 @@ const sideloadPrebindingDefaultValues = (patternEntry) => {
 const prepareExperienceEntry = (experienceEntry) => {
     removeCircularPatternReferences(experienceEntry);
     removeSelfReferencingDataSource(experienceEntry);
-    sideloadPrebindingDefaultValues(experienceEntry);
 };
 
 const errorMessagesWhileFetching$1 = {