@contentful/experiences-visual-editor-react 3.1.1 → 3.2.0-dev-20250812T1256-c477cd9.0

package/dist/index.js

@@ -631,35 +631,69 @@ const breakpointsRefinement$1 = (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;
+    }
+    // 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`,
+            });
+        }
+        // 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`,
+            });
+        }
     }
-    // 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;
+    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`,
+            });
         }
-        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 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`,
+            });
         }
-        return q1 > q2 ? -1 : 1;
-    });
-    if (originalQueries.join('') !== queries.join('')) {
+    }
+    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`,
         });
     }
 };
@@ -718,7 +752,7 @@ const ParametersSchema$1 = z.record(propertyKeySchema$1, ParameterSchema$1);
 const BreakpointSchema$1 = z
     .object({
     id: propertyKeySchema$1,
-    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(),
@@ -996,7 +1030,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) => {
@@ -1016,19 +1050,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);
 };
@@ -3314,35 +3348,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;
+    }
+    // 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`,
+            });
+        }
+        // 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`,
+            });
+        }
     }
-    // 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;
+    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`,
+            });
         }
-        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 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`,
+            });
         }
-        return q1 > q2 ? -1 : 1;
-    });
-    if (originalQueries.join('') !== queries.join('')) {
+    }
+    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`,
         });
     }
 };
@@ -3401,7 +3469,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(),