@contentful/experiences-core 3.1.1-dev-20250811T1538-5fd6747.0 → 3.2.0-beta.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isPatternComponent, isStructureWithRelativeHeight } from './utils/components.js';
-export { MEDIA_QUERY_REGEXP, getActiveBreakpointIndex, getFallbackBreakpointIndex, getValueForBreakpoint, isValidBreakpointValue, mediaQueryMatcher, mergeDesignValuesByBreakpoint } from './utils/breakpoints.js';
+export { BREAKPOINTS_STRATEGY_DESKTOP_FIRST, BREAKPOINTS_STRATEGY_MOBILE_FIRST, BreakpointsStrategy, MEDIA_QUERY_REGEXP, detectBreakpointsStrategy, getActiveBreakpointIndex, getFallbackBreakpointIndex, getValueForBreakpoint, isValidBreakpointValue, mediaQueryMatcher, mergeDesignValuesByBreakpoint } from './utils/breakpoints.js';
 export { DebugLogger, debug, disableDebug, enableDebug } from './utils/debugLogger.js';
 export { findOutermostCoordinates, getElementCoordinates, isElementHidden } from './utils/domValues.js';
 export { isLinkToAsset } from './utils/isLinkToAsset.js';

package/dist/index.js

@@ -875,35 +875,69 @@ const breakpointsRefinement = (value, ctx) => {
             code: z.ZodIssueCode.custom,
             message: `The first breakpoint should include the following attributes: { "query": "*" }`,
         });
+        return;
     }
-    const hasDuplicateIds = value.some((currentBreakpoint, currentBreakpointIndex) => {
-        // check if the current breakpoint id is found in the rest of the array
-        const breakpointIndex = value.findIndex((breakpoint) => breakpoint.id === currentBreakpoint.id);
-        return breakpointIndex !== currentBreakpointIndex;
-    });
+    // Return early if there's only one generic breakpoint
+    const hasNoBreakpointsStrategy = value.length === 1;
+    if (hasNoBreakpointsStrategy) {
+        return;
+    }
+    // Check if any breakpoint id occurs twice
+    const ids = value.map((breakpoint) => breakpoint.id);
+    const hasDuplicateIds = new Set(ids).size !== ids.length;
     if (hasDuplicateIds) {
         ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: `Breakpoint IDs must be unique`,
         });
+        return;
     }
-    // Extract the queries boundary by removing the special characters around it
-    const queries = value.map((bp) => bp.query === '*' ? bp.query : parseInt(bp.query.replace(/px|<|>/, '')));
-    // sort updates queries array in place so we need to create a copy
-    const originalQueries = [...queries];
-    queries.sort((q1, q2) => {
-        if (q1 === '*') {
-            return -1;
+    // Skip the first one which is guaranteed to be a wildcard query
+    const nonBaseBreakpoints = value.slice(1);
+    const isMobileFirstStrategy = nonBaseBreakpoints[0].query.startsWith('>');
+    const isDesktopFirstStrategy = nonBaseBreakpoints[0].query.startsWith('<');
+    if (isMobileFirstStrategy) {
+        const areOperatorsEqual = nonBaseBreakpoints.every(({ query }) => query.startsWith('>'));
+        if (!areOperatorsEqual) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Breakpoint queries must be in the format ">[size]px" for mobile-first strategy`,
+            });
         }
-        if (q2 === '*') {
-            return 1;
+        // Extract the queries boundary by removing the special characters around it
+        const queries = nonBaseBreakpoints.map((bp) => parseInt(bp.query.replace(/px|<|>/, '')));
+        // Starting with the third breakpoint, check that every query is higher than the one above
+        const isIncreasing = queries.every((value, index, array) => index === 0 || value > array[index - 1]);
+        if (!isIncreasing) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `When using a mobile-first strategy, all breakpoints must have strictly increasing pixel values`,
+            });
         }
-        return q1 > q2 ? -1 : 1;
-    });
-    if (originalQueries.join('') !== queries.join('')) {
+    }
+    else if (isDesktopFirstStrategy) {
+        const areOperatorsEqual = nonBaseBreakpoints.every(({ query }) => query.startsWith('<'));
+        if (!areOperatorsEqual) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Breakpoint queries must be in the format "<[size]px" for desktop-first strategy`,
+            });
+        }
+        // Extract the queries boundary by removing the special characters around it
+        const queries = nonBaseBreakpoints.map((bp) => parseInt(bp.query.replace(/px|<|>/, '')));
+        // Starting with the third breakpoint, check that every query is lower than the one above
+        const isDecreasing = queries.every((value, index, array) => index === 0 || value < array[index - 1]);
+        if (!isDecreasing) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `When using a desktop-first strategy, all breakpoints must have strictly decreasing pixel values`,
+            });
+        }
+    }
+    else if (!isMobileFirstStrategy && !isDesktopFirstStrategy) {
         ctx.addIssue({
             code: z.ZodIssueCode.custom,
-            message: `Breakpoints should be ordered from largest to smallest pixel value`,
+            message: `You may only use a mobile-first or desktop-first strategy for breakpoints using '<' or '>' queries`,
         });
     }
 };
@@ -962,7 +996,7 @@ const ParametersSchema = z.record(propertyKeySchema, ParameterSchema);
 const BreakpointSchema = z
     .object({
     id: propertyKeySchema,
-    query: z.string().regex(/^\*$|^<[0-9*]+px$/),
+    query: z.string().regex(/^\*$|^[<>][0-9*]+px$/),
     previewSize: z.string(),
     displayName: z.string(),
     displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
@@ -1368,7 +1402,7 @@ const toCSSMediaQuery = ({ query }) => {
 };
 // Remove this helper when upgrading to TypeScript 5.0 - https://github.com/microsoft/TypeScript/issues/48829
 const findLast = (array, predicate) => {
-    return array.reverse().find(predicate);
+    return [...array].reverse().find(predicate);
 };
 // Initialise media query matchers. This won't include the always matching fallback breakpoint.
 const mediaQueryMatcher = (breakpoints) => {
@@ -1388,19 +1422,19 @@ const mediaQueryMatcher = (breakpoints) => {
     return [mediaQueryMatchers, mediaQueryMatches];
 };
 const getActiveBreakpointIndex = (breakpoints, mediaQueryMatches, fallbackBreakpointIndex) => {
-    // The breakpoints are ordered (desktop-first: descending by screen width)
+    // The breakpoints are ordered (desktop-first: descending by screen width, mobile-first: ascending by screen width).
     const breakpointsWithMatches = breakpoints.map(({ id }, index) => ({
         id,
         index,
         // The fallback breakpoint with wildcard query will always match
         isMatch: mediaQueryMatches[id] ?? index === fallbackBreakpointIndex,
     }));
-    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one)
+    // Find the last breakpoint in the list that matches (desktop-first: the narrowest one, mobile-first: the widest one)
     const mostSpecificIndex = findLast(breakpointsWithMatches, ({ isMatch }) => isMatch)?.index;
     return mostSpecificIndex ?? fallbackBreakpointIndex;
 };
 const getFallbackBreakpointIndex = (breakpoints) => {
-    // We assume that there will be a single breakpoint which uses the wildcard query.
+    // The validation ensures that there will be exactly one breakpoint using the wildcard query.
     // If there is none, we just take the first one in the list.
     return Math.max(breakpoints.findIndex(({ query }) => query === '*'), 0);
 };
@@ -1478,6 +1512,28 @@ function mergeDesignValuesByBreakpoint(defaultValue, overwriteValue) {
         valuesByBreakpoint: mergedValuesByBreakpoint,
     };
 }
+const BREAKPOINTS_STRATEGY_DESKTOP_FIRST = 'desktop-first';
+const BREAKPOINTS_STRATEGY_MOBILE_FIRST = 'mobile-first';
+/**
+ * Detects the breakpoint strategy based on the provided breakpoints.
+ *
+ * @param breakpoints The array of breakpoints to analyze.
+ * @returns The detected breakpoint strategy or undefined if not determinable.
+ */
+const detectBreakpointsStrategy = (breakpoints) => {
+    if (breakpoints.length < 2) {
+        return undefined;
+    }
+    const hasMobileFirst = breakpoints.slice(1).every((bp) => bp.query.startsWith('>'));
+    if (hasMobileFirst) {
+        return BREAKPOINTS_STRATEGY_MOBILE_FIRST;
+    }
+    const hasDesktopFirst = breakpoints.slice(1).every((bp) => bp.query.startsWith('<'));
+    if (hasDesktopFirst) {
+        return BREAKPOINTS_STRATEGY_DESKTOP_FIRST;
+    }
+    return undefined;
+};
 
 const CF_DEBUG_KEY = 'cf_debug';
 /**
@@ -4668,5 +4724,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
     }
 }
 
-export { DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, extractLeafLinksReferencedFromExperience, extractReferencesFromEntries, extractReferencesFromEntriesAsIds, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, inMemoryEntities, inMemoryEntitiesStore, indexByBreakpoint, isArrayOfLinks, isAsset, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isElementHidden, isEntry, isExperienceEntry, isLink, isLinkToAsset, isLinkToEntry, isPatternComponent, isPatternEntry, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, mergeDesignValuesByBreakpoint, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, referencesOf, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, transformVisibility, treeMap, treeVisit, tryParseMessage, uniqueById, useInMemoryEntities, validateExperienceBuilderConfig };
+export { BREAKPOINTS_STRATEGY_DESKTOP_FIRST, BREAKPOINTS_STRATEGY_MOBILE_FIRST, DebugLogger, DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, debug, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, detectBreakpointsStrategy, disableDebug, dividerBuiltInStyles, doesMismatchMessageSchema, enableDebug, extractLeafLinksReferencedFromExperience, extractReferencesFromEntries, extractReferencesFromEntriesAsIds, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, fetchExperienceEntry, fetchReferencedEntities, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, inMemoryEntities, inMemoryEntitiesStore, indexByBreakpoint, isArrayOfLinks, isAsset, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isElementHidden, isEntry, isExperienceEntry, isLink, isLinkToAsset, isLinkToEntry, isPatternComponent, isPatternEntry, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, localizeEntity, maybePopulateDesignTokenValue, mediaQueryMatcher, mergeDesignValuesByBreakpoint, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, referencesOf, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, transformVisibility, treeMap, treeVisit, tryParseMessage, uniqueById, useInMemoryEntities, validateExperienceBuilderConfig };
 //# sourceMappingURL=index.js.map