@contentful/experiences-core 1.42.0-dev-20250625T1537-8a20b16.0 → 1.42.0-dev-20250627T1316-d74dad7.0

package/dist/exports.d.ts

@@ -1,3 +1,3 @@
 export { ASSEMBLY_BLOCK_NODE_TYPE, ASSEMBLY_DEFAULT_CATEGORY, ASSEMBLY_NODE_TYPE, ASSEMBLY_NODE_TYPES, CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, CONTENTFUL_COMPONENT_CATEGORY, CONTENTFUL_DEFAULT_CATEGORY, DEFAULT_IMAGE_WIDTH, EMPTY_CONTAINER_HEIGHT, HYPERLINK_DEFAULT_PATTERN, INCOMING_EVENTS, INTERNAL_EVENTS, LATEST_SCHEMA_VERSION, OUTGOING_EVENTS, PATTERN_PROPERTY_DIVIDER, PostMessageMethods, SCROLL_STATES, SUPPORTED_IMAGE_FORMATS, StudioCanvasMode, VISUAL_EDITOR_CONTAINER_ID, VISUAL_EDITOR_EVENTS } from './constants.js';
 export { AssembliesAddedPayload, AssembliesRegisteredPayload, BackgroundImageAlignmentOption, BackgroundImageOptions, BackgroundImageScalingOption, Binding, BindingMap, BindingMapByBlockId, BoundComponentPropertyTypes, CSSProperties, CanvasErrorPayload, CanvasReloadPayload, CanvasResizedPayload, CanvasScrollPayload, ComponentBinding, ComponentDefinition, ComponentDefinitionVariable, ComponentDefinitionVariableBase, ComponentDefinitionVariableTypeMap, ComponentDefinitionVariableValidation, ComponentDragCanceledPayload, ComponentDragEndedPayload, ComponentDragStartedPayload, ComponentDraggingChangedPayload, ComponentDroppedPayload, ComponentMoveEndedPayload, ComponentMoveStartedPayload, ComponentMovedPayload, ComponentRegistration, ComponentRegistrationOptions, ComponentSelectedPayload, ConnectedPayload, ContainerStyleVariableName, Coordinates, DataSourceEntryValueType, DesignTokensDefinition, DesignTokensPayload, DesignVariableMap, DesignVariableTypes, DragWrapperProps, Experience, ExperienceEntry, ExperienceFields, ExperienceTree, ExperienceTreeNode, ExperienceUpdatedPayload, HoverComponentPayload, HoveredElement, ImageLoadingOption, ImageObjectFitOption, ImageObjectPositionOption, ImageOptions, IncomingComponentDragCanceledPayload, IncomingComponentMoveEndedPayload, IncomingEvent, IncomingMessage, IncomingMouseMovePayload, InternalEvent, Link, ManagementEntity, MouseMovePayload, NewHoveredElementPayload, OptimizedBackgroundImageAsset, OptimizedImageAsset, OutgoingEvent, OutgoingMessage, OutsideCanvasClickPayload, RawCoordinates, RecursiveDesignTokenDefinition, RegisteredBreakpointsPayload, RegisteredComponentsPayload, RequestComponentTreeUpdatePayload, RequestEditorModePayload, RequestEntitiesMessage, RequestEntitiesPayload, RequestReadOnlyModePayload, RequestedEntitiesMessage, RequestedEntitiesPayload, ResolveDesignValueType, SDKFeaturesPayload, ScrollState, SelectComponentPayload, SendMessageParams, StyleProps, UpdateSelectedComponentCoordinatesPayload, UpdatedEntityPayload, ValidationOption, VariableFormats, WrapperTags } from './types.js';
-export { BoundValue, Breakpoint, ComponentDefinitionPropertyType as ComponentDefinitionVariableType, ComponentPropertyValue, ComponentTreeNode, ComponentValue, DesignValue, ExperienceComponentSettings, ExperienceDataSource, ExperienceUnboundValues, NoValue, PatternProperty, PatternPropertyDefinition, PrimitiveValue, SchemaVersions, UnboundValue, ValuesByBreakpoint, VariableMapping } from '@contentful/experiences-validators';
+export { BoundValue, Breakpoint, ComponentDefinitionPropertyType as ComponentDefinitionVariableType, ComponentPropertyValue, ComponentTreeNode, ComponentValue, DesignValue, ExperienceComponentSettings, ExperienceDataSource, ExperienceUnboundValues, NoValue, Parameter, ParameterDefinition, PrimitiveValue, SchemaVersions, UnboundValue, ValuesByBreakpoint, VariableMapping } from '@contentful/experiences-validators';

package/dist/index.js

@@ -950,11 +950,11 @@ const ComponentPropertyValueSchema = z.discriminatedUnion('type', [
 ]);
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const PatternPropertySchema = z.object({
+const ParameterSchema = z.object({
     type: z.literal('BoundValue'),
     path: z.string(),
 });
-const PatternPropertiesSchema = z.record(propertyKeySchema, PatternPropertySchema);
+const ParametersSchema = z.record(propertyKeySchema, ParameterSchema);
 const BreakpointSchema = z
     .object({
     id: propertyKeySchema,
@@ -971,7 +971,7 @@ const BaseComponentTreeNodeSchema = z.object({
     displayName: z.string().optional(),
     slotId: z.string().optional(),
     variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
-    patternProperties: PatternPropertiesSchema.optional(),
+    parameters: ParametersSchema.optional(),
 });
 const ComponentVariableSchema = z.object({
     displayName: z.string().optional(),
@@ -1040,21 +1040,25 @@ const THUMBNAIL_IDS = [
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
 const VariableMappingSchema = z.object({
-    patternPropertyDefinitionId: propertyKeySchema,
+    parameterId: propertyKeySchema,
     type: z.literal('ContentTypeMapping'),
     pathsByContentType: z.record(z.string(), z.object({ path: z.string() })),
 });
 // TODO: finalize schema structure before release
 // https://contentful.atlassian.net/browse/LUMOS-523
-const PatternPropertyDefinitionSchema = z.object({
-    defaultValue: z
-        .record(z.string(), z.object({
-        sys: z.object({
-            type: z.literal('Link'),
-            id: z.string(),
-            linkType: z.enum(['Entry']),
+const ParameterDefinitionSchema = z.object({
+    defaultSource: z
+        .strictObject({
+        type: z.enum(['Entry']),
+        contentTypeId: z.string(),
+        link: z.strictObject({
+            sys: z.strictObject({
+                type: z.literal('Link'),
+                id: z.string(),
+                linkType: z.enum(['Entry']),
+            }),
         }),
-    }))
+    })
         .optional(),
     contentTypes: z.record(z.string(), z.object({
         sys: z.object({
@@ -1064,7 +1068,7 @@ const PatternPropertyDefinitionSchema = z.object({
         }),
     })),
 });
-const PatternPropertyDefinitionsSchema = z.record(propertyKeySchema, PatternPropertyDefinitionSchema);
+const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
 const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema);
 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);
@@ -1073,7 +1077,7 @@ const ComponentSettingsSchema = z.object({
     thumbnailId: z.enum(THUMBNAIL_IDS).optional(),
     category: z.string().max(50, 'Category must contain at most 50 characters').optional(),
     variableMappings: VariableMappingsSchema.optional(),
-    patternPropertyDefinitions: PatternPropertyDefinitionsSchema.optional(),
+    parameterDefinitions: ParameterDefinitionsSchema.optional(),
 });
 z.object({
     componentTree: localeWrapper(ComponentTreeSchema),
@@ -2101,55 +2105,6 @@ const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', fo
     }
 };
 
-/**
- * Turns a condition like `<768px` or `>1024px` into a media query rule.
- * For example, `<768px` becomes `max-width:768px` and `>1024px` becomes `min-width:1024px`.
- */
-const toMediaQueryRule = (condition) => {
-    const [evaluation, pixelValue] = [condition[0], condition.substring(1)];
-    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
-    return `(${mediaQueryRule}:${pixelValue})`;
-};
-/**
- * Converts a map of class names to CSS strings into a single CSS string.
- *
- * @param cssByClassName map of class names to CSS strings containing all rules for each class
- * @returns joined string of all CSS class definitions
- */
-const toCompoundCss = (cssByClassName) => {
-    return Object.entries(cssByClassName).reduce((acc, [className, css]) => {
-        if (css === '')
-            return acc;
-        return `${acc}.${className}{${css}}`;
-    }, ``);
-};
-/**
- * Create a single CSS string containing all class definitions for a given media query.
- *
- * @param cssByClassName map of class names to CSS strings containing all rules for each class
- * @param condition e.g. "*", "<520px", ">520px"
- * @param nextCondition optional next condition to create a disjunct media query that doesn't affect the next breakpoint
- * @returns joined string of all CSS class definitions wrapped into media queries
- */
-const toMediaQuery = ({ cssByClassName, condition, nextCondition, }) => {
-    const compoundCss = toCompoundCss(cssByClassName);
-    if (compoundCss === '') {
-        return '';
-    }
-    const queryRule = toMediaQueryRule(condition);
-    if (!nextCondition) {
-        if (condition === '*') {
-            return compoundCss;
-        }
-        return `@media${queryRule}{${compoundCss}}`;
-    }
-    const nextRule = toMediaQueryRule(nextCondition);
-    if (condition === '*') {
-        return `@media not ${nextRule}{${compoundCss}}`;
-    }
-    return `@media${queryRule} and (not ${nextRule}){${compoundCss}}`;
-};
-
 const detachExperienceStyles = (experience) => {
     const experienceTreeRoot = experience.entityStore?.experienceEntryFields
         ?.componentTree;
@@ -2246,7 +2201,7 @@ const detachExperienceStyles = (experience) => {
             const isAnyVisibilityValueHidden = Object.values(propsByBreakpoint).some((designProperties) => designProperties.cfVisibility === false);
             // We always need an explicit value when using disjunct media queries
             // Example: desktop uses "false" and tablet is undefined -> we need to set `display: none` for tablet as well.
-            let previousVisibilityValue;
+            let previousVisibilityValue = undefined;
             /* [Data format] `propsByBreakpoint` is a map of "breakpointId > propertyName > plainValue":
              * {
              *   desktop: {
@@ -2260,7 +2215,7 @@ const detachExperienceStyles = (experience) => {
             const currentNodeClassNames = [];
             // 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/ patternProperties
+            // (!) Notice that the chain of patterns (before the dash) follows the format of prebinding/ parameters
             const currentNodeIdsChain = `${wrappingPatternNodeIds.join('')}-${currentNode.id}`;
             // For each breakpoint, resolve design tokens, create the CSS and generate a unique className.
             for (const breakpointId of breakpointIds) {
@@ -2357,7 +2312,7 @@ const detachExperienceStyles = (experience) => {
     });
     // once the whole tree was traversed, for each breakpoint, I aggregate the styles
     // for each generated className into one css string
-    const stylesheet = Object.values(mediaQueryDataByBreakpoint).reduce((acc, { condition, cssByClassName, visibilityCssByClassName }, index) => {
+    return Object.values(mediaQueryDataByBreakpoint).reduce((acc, { condition, cssByClassName, visibilityCssByClassName }, index) => {
         const mediaQueryCss = toMediaQuery({ cssByClassName, condition });
         // Handle visibility separately to use disjunct media queries ("if desktop but not tablet ...")
         // Enables to hide on one breakpoint but render any unknown custom `display` value on another breakpoint.
@@ -2369,7 +2324,6 @@ const detachExperienceStyles = (experience) => {
         });
         return `${acc}${mediaQueryCss}${visibilityMediaQueryCss}`;
     }, '');
-    return stylesheet;
 };
 /**
  * Rendering pattern nodes inside pattern entry by injecting default values from the top:
@@ -2378,7 +2332,7 @@ const detachExperienceStyles = (experience) => {
  */
 const injectDefaultValuesForComponentValues = ({ patternNode, wrapperComponentSettings, }) => {
     const propertyDefinitions = wrapperComponentSettings?.variableDefinitions;
-    const resolvedProperties = Object.entries(patternNode.variables).reduce((resolvedProperties, [propertyName, propertyValue]) => {
+    return Object.entries(patternNode.variables).reduce((resolvedProperties, [propertyName, propertyValue]) => {
         if (propertyValue.type === 'ComponentValue') {
             const componentValueKey = propertyValue.key;
             const componentDefaultValue = propertyDefinitions?.[componentValueKey].defaultValue;
@@ -2393,7 +2347,6 @@ const injectDefaultValuesForComponentValues = ({ patternNode, wrapperComponentSe
         }
         return resolvedProperties;
     }, {});
-    return resolvedProperties;
 };
 /**
  * In case of nested patterns, we need to resolve the ComponentValue properties and overwrite them with the value
@@ -2407,17 +2360,16 @@ const resolveComponentVariablesOverwrites = ({ patternNode, wrapperComponentVari
     // In case of rendering a pattern entry, there are no custom ComponentValues.
     // So we pass down the default values from this pattern node down to each deeper pattern level.
     if (!wrapperComponentVariablesOverwrites) {
-        const nextComponentVariablesOverwrites = injectDefaultValuesForComponentValues({
+        return injectDefaultValuesForComponentValues({
             patternNode,
             wrapperComponentSettings,
         });
-        return nextComponentVariablesOverwrites;
     }
     // Rendering (nested) pattern node inside another pattern node (for both experience & pattern entry):
     // The `wrapperComponentVariablesOverwrites` from the top-most pattern node is passed through to each child
     // node (and nested pattern nodes). It replaces each ComponentValue in the subtree with either the overwrite
     // or the default value.
-    const nextComponentVariablesOverwrites = Object.entries(patternNode?.variables).reduce((resolvedValues, [propertyName, propertyValue]) => {
+    return Object.entries(patternNode?.variables).reduce((resolvedValues, [propertyName, propertyValue]) => {
         if (propertyValue.type === 'ComponentValue') {
             // Copying the values from the parent node
             const overwritingValue = wrapperComponentVariablesOverwrites?.[propertyValue.key];
@@ -2433,7 +2385,6 @@ const resolveComponentVariablesOverwrites = ({ patternNode, wrapperComponentVari
         }
         return resolvedValues;
     }, {});
-    return nextComponentVariablesOverwrites;
 };
 const isCfStyleAttribute = (variableName) => {
     return CF_STYLE_ATTRIBUTES.includes(variableName);
@@ -2491,8 +2442,7 @@ const transformMedia$1 = (boundAsset, width, options) => {
         const targetValue = targetWidthObject ? getTargetValueInPixels(targetWidthObject) : assetWidth;
         if (targetValue < assetWidth)
             width = `${targetValue}px`;
-        const value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
-        return value;
+        return getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
     }
     catch (error) {
         console.error('Error transforming image asset', error);
@@ -2713,6 +2663,55 @@ const flattenDesignTokenRegistry = (designTokenRegistry) => {
     }, {});
 };
 
+/**
+ * Turns a condition like `<768px` or `>1024px` into a media query rule.
+ * For example, `<768px` becomes `max-width:768px` and `>1024px` becomes `min-width:1024px`.
+ */
+const toMediaQueryRule = (condition) => {
+    const [evaluation, pixelValue] = [condition[0], condition.substring(1)];
+    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
+    return `(${mediaQueryRule}:${pixelValue})`;
+};
+/**
+ * Converts a map of class names to CSS strings into a single CSS string.
+ *
+ * @param cssByClassName map of class names to CSS strings containing all rules for each class
+ * @returns joined string of all CSS class definitions
+ */
+const toCompoundCss = (cssByClassName) => {
+    return Object.entries(cssByClassName).reduce((acc, [className, css]) => {
+        if (css === '')
+            return acc;
+        return `${acc}.${className}{${css}}`;
+    }, ``);
+};
+/**
+ * Create a single CSS string containing all class definitions for a given media query.
+ *
+ * @param cssByClassName map of class names to CSS strings containing all rules for each class
+ * @param condition e.g. "*", "<520px", ">520px"
+ * @param nextCondition optional next condition to create a disjunct media query that doesn't affect the next breakpoint
+ * @returns joined string of all CSS class definitions wrapped into media queries
+ */
+const toMediaQuery = ({ cssByClassName, condition, nextCondition, }) => {
+    const compoundCss = toCompoundCss(cssByClassName);
+    if (compoundCss === '') {
+        return '';
+    }
+    const queryRule = toMediaQueryRule(condition);
+    if (!nextCondition) {
+        if (condition === '*') {
+            return compoundCss;
+        }
+        return `@media${queryRule}{${compoundCss}}`;
+    }
+    const nextRule = toMediaQueryRule(nextCondition);
+    if (condition === '*') {
+        return `@media not ${nextRule}{${compoundCss}}`;
+    }
+    return `@media${queryRule} and (not ${nextRule}){${compoundCss}}`;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function get(obj, path) {
     if (!path.length) {
@@ -4157,10 +4156,12 @@ const attachPrebindingDefaultValueAsDataSource = (experienceEntry) => {
         // Only supported for pattern entries since experience entries don't define pattern properties.
         return;
     }
-    const patternDefs = experienceEntry.fields.componentSettings?.patternPropertyDefinitions ?? {};
-    const defaultPrebinding = Object.values(patternDefs).find((def) => def.defaultValue)?.defaultValue;
-    const [value] = Object.values(defaultPrebinding ?? {});
-    const id = value?.sys?.id;
+    const patternDefs = experienceEntry.fields.componentSettings?.parameterDefinitions ?? {};
+    const defaultPrebinding = Object.values(patternDefs).find((def) => def.defaultSource)?.defaultSource;
+    const { link, type } = defaultPrebinding ?? {};
+    if (!link || !type)
+        return;
+    const id = link.sys?.id;
     if (!id)
         return;
     experienceEntry.fields.dataSource = {
@@ -4168,7 +4169,7 @@ const attachPrebindingDefaultValueAsDataSource = (experienceEntry) => {
         [id]: {
             sys: {
                 type: 'Link',
-                linkType: 'Entry',
+                linkType: type,
                 id,
             },
         },