@elementor/editor-canvas 4.1.0-698 → 4.1.0-699

package/dist/index.js

@@ -833,14 +833,22 @@ var UnknownStyleStateError = (0, import_utils2.createError)({
 var SELECTORS_MAP = {
   class: "."
 };
+var DEFAULT_BREAKPOINT = "desktop";
+var DEFAULT_STATE = "normal";
+function getStyleUniqueKey(style) {
+  const breakpoint = style.variants[0]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+  const state = style.variants[0]?.meta?.state ?? DEFAULT_STATE;
+  return `${style.id}-${breakpoint}-${state}`;
+}
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const seenIds = /* @__PURE__ */ new Set();
+    const seenKeys = /* @__PURE__ */ new Set();
     const uniqueStyles = styles.filter((style) => {
-      if (seenIds.has(style.id)) {
+      const key = getStyleUniqueKey(style);
+      if (seenKeys.has(key)) {
         return false;
       }
-      seenIds.add(style.id);
+      seenKeys.add(key);
       return true;
     });
     const stylesCssPromises = uniqueStyles.map(async (style) => {
@@ -1025,7 +1033,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     });
     return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
       rebuildCache(cache, allStyles, rendered);
-      return rendered;
+      return getOrderedItems(cache);
     });
   }
   function breakToBreakpoints(styles) {

package/dist/index.mjs

@@ -799,14 +799,22 @@ var UnknownStyleStateError = createError({
 var SELECTORS_MAP = {
   class: "."
 };
+var DEFAULT_BREAKPOINT = "desktop";
+var DEFAULT_STATE = "normal";
+function getStyleUniqueKey(style) {
+  const breakpoint = style.variants[0]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+  const state = style.variants[0]?.meta?.state ?? DEFAULT_STATE;
+  return `${style.id}-${breakpoint}-${state}`;
+}
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const seenIds = /* @__PURE__ */ new Set();
+    const seenKeys = /* @__PURE__ */ new Set();
     const uniqueStyles = styles.filter((style) => {
-      if (seenIds.has(style.id)) {
+      const key = getStyleUniqueKey(style);
+      if (seenKeys.has(key)) {
         return false;
       }
-      seenIds.add(style.id);
+      seenKeys.add(key);
       return true;
     });
     const stylesCssPromises = uniqueStyles.map(async (style) => {
@@ -991,7 +999,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     });
     return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
       rebuildCache(cache, allStyles, rendered);
-      return rendered;
+      return getOrderedItems(cache);
     });
   }
   function breakToBreakpoints(styles) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.1.0-698",
+  "version": "4.1.0-699",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-698",
-    "@elementor/editor-controls": "4.1.0-698",
-    "@elementor/editor-documents": "4.1.0-698",
-    "@elementor/editor-elements": "4.1.0-698",
-    "@elementor/editor-interactions": "4.1.0-698",
-    "@elementor/editor-mcp": "4.1.0-698",
-    "@elementor/editor-notifications": "4.1.0-698",
-    "@elementor/editor-props": "4.1.0-698",
-    "@elementor/editor-responsive": "4.1.0-698",
-    "@elementor/editor-styles": "4.1.0-698",
-    "@elementor/editor-styles-repository": "4.1.0-698",
-    "@elementor/editor-ui": "4.1.0-698",
-    "@elementor/editor-v1-adapters": "4.1.0-698",
-    "@elementor/schema": "4.1.0-698",
-    "@elementor/twing": "4.1.0-698",
+    "@elementor/editor": "4.1.0-699",
+    "@elementor/editor-controls": "4.1.0-699",
+    "@elementor/editor-documents": "4.1.0-699",
+    "@elementor/editor-elements": "4.1.0-699",
+    "@elementor/editor-interactions": "4.1.0-699",
+    "@elementor/editor-mcp": "4.1.0-699",
+    "@elementor/editor-notifications": "4.1.0-699",
+    "@elementor/editor-props": "4.1.0-699",
+    "@elementor/editor-responsive": "4.1.0-699",
+    "@elementor/editor-styles": "4.1.0-699",
+    "@elementor/editor-styles-repository": "4.1.0-699",
+    "@elementor/editor-ui": "4.1.0-699",
+    "@elementor/editor-v1-adapters": "4.1.0-699",
+    "@elementor/schema": "4.1.0-699",
+    "@elementor/twing": "4.1.0-699",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-698",
-    "@elementor/wp-media": "4.1.0-698",
+    "@elementor/utils": "4.1.0-699",
+    "@elementor/wp-media": "4.1.0-699",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/hooks/__tests__/use-style-items.test.ts

@@ -289,6 +289,57 @@ describe( 'useStyleItems', () => {
 		expect( result.current ).toHaveLength( 2 );
 	} );
 
+	it( 'should maintain breakpoint order after style update', async () => {
+		// Arrange.
+		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>
+			Promise.resolve(
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
+		);
+
+		jest.mocked( useStyleRenderer ).mockReturnValue( renderStylesMock );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [
+			createMockStyleDefinitionWithVariants( {
+				id: 'style1',
+				variants: [
+					{ meta: { breakpoint: null, state: null }, props: { padding: '10px' }, custom_css: null },
+					{ meta: { breakpoint: 'tablet', state: null }, props: { padding: '8px' }, custom_css: null },
+					{ meta: { breakpoint: 'mobile', state: null }, props: { padding: '5px' }, custom_css: null },
+				],
+			} ),
+		] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		// Act - initial render.
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: 'tablet', state: null },
+				props: { padding: '12px' },
+			} );
+		} );
+
+		// Assert - items should be ordered by breakpoint (desktop, tablet, mobile).
+		const breakpointOrder = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrder ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+
+		// Act - update again (should maintain order).
+		await act( async () => {
+			mockProvider.actions.update?.( { id: 'style1', label: 'Updated' } );
+		} );
+
+		// Assert - order should still be maintained.
+		const breakpointOrderAfterUpdate = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrderAfterUpdate ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+	} );
+
 	it( 'should only re-render changed styles on differential update', async () => {
 		// Arrange.
 		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>

package/src/hooks/use-style-items.ts

@@ -191,7 +191,7 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 		return renderStyles( { styles: breakToBreakpoints( styles ), signal } ).then( ( rendered ) => {
 			rebuildCache( cache, allStyles, rendered );
 
-			return rendered;
+			return getOrderedItems( cache );
 		} );
 	}
 

package/src/renderers/__tests__/create-styles-renderer.test.ts

@@ -118,6 +118,123 @@ describe( 'renderStyles', () => {
 	} );
 } );
 
+describe( 'breakpoint deduplication', () => {
+	it( 'should render all breakpoints when same id has multiple breakpoint variants', async () => {
+		// Arrange - simulates output from breakToBreakpoints in use-style-items.
+		const desktopStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [ { meta: { breakpoint: null, state: null }, props: { 'font-size': '16px' }, custom_css: null } ],
+		};
+		const tabletStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const mobileStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'mobile', state: null }, props: { 'font-size': '12px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+				mobile: { width: 768, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ desktopStyle, tabletStyle, mobileStyle ] } );
+
+		// Assert - all three breakpoints must be rendered (previously tablet/mobile were dropped).
+		expect( result ).toHaveLength( 3 );
+		expect( result.map( ( r ) => r.breakpoint ) ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+		expect( result[ 0 ].value ).toContain( 'font-size:16px' );
+		expect( result[ 1 ].value ).toContain( '@media(max-width:992px)' );
+		expect( result[ 1 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 2 ].value ).toContain( '@media(max-width:768px)' );
+		expect( result[ 2 ].value ).toContain( 'font-size:12px' );
+	} );
+
+	it( 'should deduplicate same id + breakpoint + state combinations', async () => {
+		// Arrange - two styles with same id, breakpoint, and state should dedupe.
+		const style1: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const style2: RendererStyleDefinition = {
+			...style1,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ style1, style2 ] } );
+
+		// Assert - should only render first occurrence.
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+	} );
+
+	it( 'should render separately when same id + breakpoint have different states', async () => {
+		// Arrange - same id and breakpoint but different states should NOT dedupe.
+		const normalStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const hoverStyle: RendererStyleDefinition = {
+			...normalStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: 'hover' }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ normalStyle, hoverStyle ] } );
+
+		// Assert - both should be rendered since states differ.
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].state ).toBeNull();
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 1 ].state ).toBe( 'hover' );
+		expect( result[ 1 ].value ).toContain( 'font-size:16px' );
+	} );
+} );
+
 describe( 'custom_css rendering', () => {
 	it( 'should not render custom_css if raw is empty', async () => {
 		// Arrange.

package/src/renderers/create-styles-renderer.ts

@@ -46,14 +46,24 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 	class: '.',
 };
 
+const DEFAULT_BREAKPOINT = 'desktop';
+const DEFAULT_STATE = 'normal';
+
+function getStyleUniqueKey( style: RendererStyleDefinition ): string {
+	const breakpoint = style.variants[ 0 ]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+	const state = style.variants[ 0 ]?.meta?.state ?? DEFAULT_STATE;
+	return `${ style.id }-${ breakpoint }-${ state }`;
+}
+
 export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '' }: CreateStyleRendererArgs ) {
 	return async ( { styles, signal }: StyleRendererArgs ): Promise< StyleItem[] > => {
-		const seenIds = new Set< string >();
+		const seenKeys = new Set< string >();
 		const uniqueStyles = styles.filter( ( style ) => {
-			if ( seenIds.has( style.id ) ) {
+			const key = getStyleUniqueKey( style );
+			if ( seenKeys.has( key ) ) {
 				return false;
 			}
-			seenIds.add( style.id );
+			seenKeys.add( key );
 			return true;
 		} );