@elementor/editor-canvas 4.1.0-810 → 4.1.0-811

package/dist/index.js

@@ -1173,8 +1173,9 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, getC
         ...style,
         cssName: provider.actions.resolveCssName(style.id)
       }));
-      return renderStyles({ styles: breakToBreakpoints(changedStyles), signal }).then((rendered) => {
-        updateCacheItems(cache, rendered);
+      const breakpointSplit = breakToBreakpoints(changedStyles);
+      return renderStyles({ styles: breakpointSplit, signal }).then((rendered) => {
+        updateCacheItems(cache, changedIds, rendered);
         return getOrderedItems(cache);
       });
     }
@@ -1231,19 +1232,14 @@ function getChangedStyleIds(previous, current) {
 function getOrderedItems(cache) {
   return cache.orderedIds.map((id) => cache.itemsById.get(id)).filter((items) => items !== void 0).flat();
 }
-function updateCacheItems(cache, changedItems) {
+function updateCacheItems(cache, changedIds, changedItems) {
+  for (const id of changedIds) {
+    cache.itemsById.delete(id);
+  }
   for (const item of changedItems) {
-    const existing = cache.itemsById.get(item.id);
-    if (existing) {
-      const idx = existing.findIndex((e) => e.breakpoint === item.breakpoint && e.state === item.state);
-      if (idx >= 0) {
-        existing[idx] = item;
-      } else {
-        existing.push(item);
-      }
-    } else {
-      cache.itemsById.set(item.id, [item]);
-    }
+    const existing = cache.itemsById.get(item.id) || [];
+    existing.push(item);
+    cache.itemsById.set(item.id, existing);
   }
 }
 function rebuildCache(cache, allStyles, items) {

package/dist/index.mjs

@@ -1138,8 +1138,9 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, getC
         ...style,
         cssName: provider.actions.resolveCssName(style.id)
       }));
-      return renderStyles({ styles: breakToBreakpoints(changedStyles), signal }).then((rendered) => {
-        updateCacheItems(cache, rendered);
+      const breakpointSplit = breakToBreakpoints(changedStyles);
+      return renderStyles({ styles: breakpointSplit, signal }).then((rendered) => {
+        updateCacheItems(cache, changedIds, rendered);
         return getOrderedItems(cache);
       });
     }
@@ -1196,19 +1197,14 @@ function getChangedStyleIds(previous, current) {
 function getOrderedItems(cache) {
   return cache.orderedIds.map((id) => cache.itemsById.get(id)).filter((items) => items !== void 0).flat();
 }
-function updateCacheItems(cache, changedItems) {
+function updateCacheItems(cache, changedIds, changedItems) {
+  for (const id of changedIds) {
+    cache.itemsById.delete(id);
+  }
   for (const item of changedItems) {
-    const existing = cache.itemsById.get(item.id);
-    if (existing) {
-      const idx = existing.findIndex((e) => e.breakpoint === item.breakpoint && e.state === item.state);
-      if (idx >= 0) {
-        existing[idx] = item;
-      } else {
-        existing.push(item);
-      }
-    } else {
-      cache.itemsById.set(item.id, [item]);
-    }
+    const existing = cache.itemsById.get(item.id) || [];
+    existing.push(item);
+    cache.itemsById.set(item.id, existing);
   }
 }
 function rebuildCache(cache, allStyles, items) {

package/package.json

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

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

@@ -408,6 +408,61 @@ describe( 'useStyleItems', () => {
 		] );
 	} );
 
+	it( 'should remove cached items for breakpoints whose variants no longer exist', 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 styleWithTwoBreakpoints = createMockStyleDefinitionWithVariants( {
+			id: 'style1',
+			variants: [
+				{ meta: { breakpoint: null, state: null }, props: { 'font-family': 'Arial' }, custom_css: null },
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-family': 'Roboto' }, custom_css: null },
+			],
+		} );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [ styleWithTwoBreakpoints ] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: null, state: null },
+				props: {},
+			} );
+		} );
+
+		expect( result.current ).toEqual( [
+			{ id: 'style1', breakpoint: 'desktop' },
+			{ id: 'style1', breakpoint: 'tablet' },
+		] );
+
+		// Act - simulate the tablet variant being removed (e.g. user cleared its only prop,
+		// global-classes store calls getNonEmptyVariants which drops empty variants).
+		await act( async () => {
+			mockProvider.actions.update?.( {
+				id: 'style1',
+				variants: [
+					{ meta: { breakpoint: null, state: null }, props: { 'font-family': 'Arial' }, custom_css: null },
+				],
+			} );
+		} );
+
+		// Assert - the tablet item must be evicted from the cache.
+		expect( result.current ).toEqual( [ { id: 'style1', breakpoint: 'desktop' } ] );
+	} );
+
 	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

@@ -200,8 +200,10 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, getC
 					cssName: provider.actions.resolveCssName( style.id ),
 				} ) );
 
-			return renderStyles( { styles: breakToBreakpoints( changedStyles ), signal } ).then( ( rendered ) => {
-				updateCacheItems( cache, rendered );
+			const breakpointSplit = breakToBreakpoints( changedStyles );
+
+			return renderStyles( { styles: breakpointSplit, signal } ).then( ( rendered ) => {
+				updateCacheItems( cache, changedIds, rendered );
 
 				return getOrderedItems( cache );
 			} );
@@ -277,19 +279,15 @@ function getOrderedItems( cache: StyleItemsCache ): StyleItem[] {
 		.flat();
 }
 
-function updateCacheItems( cache: StyleItemsCache, changedItems: StyleItem[] ): void {
+function updateCacheItems( cache: StyleItemsCache, changedIds: string[], changedItems: StyleItem[] ): void {
+	for ( const id of changedIds ) {
+		cache.itemsById.delete( id );
+	}
+
 	for ( const item of changedItems ) {
-		const existing = cache.itemsById.get( item.id );
-		if ( existing ) {
-			const idx = existing.findIndex( ( e ) => e.breakpoint === item.breakpoint && e.state === item.state );
-			if ( idx >= 0 ) {
-				existing[ idx ] = item;
-			} else {
-				existing.push( item );
-			}
-		} else {
-			cache.itemsById.set( item.id, [ item ] );
-		}
+		const existing = cache.itemsById.get( item.id ) || [];
+		existing.push( item );
+		cache.itemsById.set( item.id, existing );
 	}
 }