@elementor/editor-canvas 3.33.0-220 → 3.33.0-221

package/dist/index.js

@@ -281,6 +281,7 @@ function getLinkAttrs(el) {
 // src/hooks/use-style-items.ts
 var import_react9 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
+var import_editor_styles3 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
@@ -469,6 +470,7 @@ var import_react8 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
+var import_editor_styles2 = require("@elementor/editor-styles");
 var import_utils3 = require("@elementor/utils");
 
 // src/renderers/errors.ts
@@ -477,6 +479,10 @@ var UnknownStyleTypeError = (0, import_utils2.createError)({
   code: "unknown_style_type",
   message: "Unknown style type"
 });
+var UnknownStyleStateError = (0, import_utils2.createError)({
+  code: "unknown_style_state",
+  message: "Unknown style state"
+});
 
 // src/renderers/create-styles-renderer.ts
 var SELECTORS_MAP = {
@@ -494,7 +500,8 @@ function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
       return {
         id: style.id,
         breakpoint: style?.variants[0]?.meta?.breakpoint || "desktop",
-        value: variantsCss.join("")
+        value: variantsCss.join(""),
+        state: style?.variants[0]?.meta?.state || null
       };
     });
     return await Promise.all(stylesCssPromises);
@@ -510,7 +517,18 @@ function createStyleWrapper(value = "", wrapper) {
       return createStyleWrapper(`${value}${symbol}${cssName}`, wrapper);
     },
     withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
-    withState: (state) => createStyleWrapper(state ? `${value}:${state}` : value, wrapper),
+    withState: (state) => {
+      if (!state) {
+        return createStyleWrapper(value, wrapper);
+      }
+      if ((0, import_editor_styles2.isClassState)(state)) {
+        return createStyleWrapper(`${value}.${state}`, wrapper);
+      }
+      if ((0, import_editor_styles2.isPseudoState)(state)) {
+        return createStyleWrapper(`${value}:${state}`, wrapper);
+      }
+      throw new UnknownStyleStateError({ context: { state } });
+    },
     withMediaQuery: (breakpoint) => {
       if (!breakpoint?.type) {
         return createStyleWrapper(value, wrapper);
@@ -591,14 +609,27 @@ function useStyleItems() {
   });
   const breakpointsOrder = (0, import_editor_responsive2.getBreakpoints)().map((breakpoint) => breakpoint.id);
   return (0, import_react9.useMemo)(
-    () => Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items).sort(({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => {
-      return breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
-    }),
+    () => Object.values(styleItems).sort(sortByProviderPriority).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
     // eslint-disable-next-line
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
   );
 }
+function sortByProviderPriority({ provider: providerA }, { provider: providerB }) {
+  return providerA.priority - providerB.priority;
+}
+function sortByBreakpoint(breakpointsOrder) {
+  return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
+}
+function sortByStateType({ state: stateA }, { state: stateB }) {
+  if ((0, import_editor_styles3.isClassState)(stateA) && !(0, import_editor_styles3.isClassState)(stateB)) {
+    return -1;
+  }
+  if (!(0, import_editor_styles3.isClassState)(stateA) && (0, import_editor_styles3.isClassState)(stateB)) {
+    return 1;
+  }
+  return 0;
+}
 function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
     (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {

package/dist/index.mjs

@@ -241,6 +241,7 @@ function getLinkAttrs(el) {
 // src/hooks/use-style-items.ts
 import { useEffect as useEffect5, useMemo as useMemo3, useState as useState2 } from "react";
 import { getBreakpoints } from "@elementor/editor-responsive";
+import { isClassState as isClassState2 } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
@@ -431,6 +432,10 @@ import { useMemo as useMemo2 } from "react";
 import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
+import {
+  isClassState,
+  isPseudoState
+} from "@elementor/editor-styles";
 import { decodeString } from "@elementor/utils";
 
 // src/renderers/errors.ts
@@ -439,6 +444,10 @@ var UnknownStyleTypeError = createError({
   code: "unknown_style_type",
   message: "Unknown style type"
 });
+var UnknownStyleStateError = createError({
+  code: "unknown_style_state",
+  message: "Unknown style state"
+});
 
 // src/renderers/create-styles-renderer.ts
 var SELECTORS_MAP = {
@@ -456,7 +465,8 @@ function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
       return {
         id: style.id,
         breakpoint: style?.variants[0]?.meta?.breakpoint || "desktop",
-        value: variantsCss.join("")
+        value: variantsCss.join(""),
+        state: style?.variants[0]?.meta?.state || null
       };
     });
     return await Promise.all(stylesCssPromises);
@@ -472,7 +482,18 @@ function createStyleWrapper(value = "", wrapper) {
       return createStyleWrapper(`${value}${symbol}${cssName}`, wrapper);
     },
     withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
-    withState: (state) => createStyleWrapper(state ? `${value}:${state}` : value, wrapper),
+    withState: (state) => {
+      if (!state) {
+        return createStyleWrapper(value, wrapper);
+      }
+      if (isClassState(state)) {
+        return createStyleWrapper(`${value}.${state}`, wrapper);
+      }
+      if (isPseudoState(state)) {
+        return createStyleWrapper(`${value}:${state}`, wrapper);
+      }
+      throw new UnknownStyleStateError({ context: { state } });
+    },
     withMediaQuery: (breakpoint) => {
       if (!breakpoint?.type) {
         return createStyleWrapper(value, wrapper);
@@ -553,14 +574,27 @@ function useStyleItems() {
   });
   const breakpointsOrder = getBreakpoints().map((breakpoint) => breakpoint.id);
   return useMemo3(
-    () => Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items).sort(({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => {
-      return breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
-    }),
+    () => Object.values(styleItems).sort(sortByProviderPriority).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
     // eslint-disable-next-line
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
   );
 }
+function sortByProviderPriority({ provider: providerA }, { provider: providerB }) {
+  return providerA.priority - providerB.priority;
+}
+function sortByBreakpoint(breakpointsOrder) {
+  return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
+}
+function sortByStateType({ state: stateA }, { state: stateB }) {
+  if (isClassState2(stateA) && !isClassState2(stateB)) {
+    return -1;
+  }
+  if (!isClassState2(stateA) && isClassState2(stateB)) {
+    return 1;
+  }
+  return 0;
+}
 function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
     (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-220",
+  "version": "3.33.0-221",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,19 +37,19 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-220",
-    "@elementor/editor-notifications": "3.33.0-220",
-    "@elementor/editor-documents": "3.33.0-220",
-    "@elementor/editor-elements": "3.33.0-220",
-    "@elementor/editor-props": "3.33.0-220",
-    "@elementor/editor-responsive": "3.33.0-220",
-    "@elementor/editor-styles": "3.33.0-220",
-    "@elementor/editor-styles-repository": "3.33.0-220",
-    "@elementor/editor-v1-adapters": "3.33.0-220",
-    "@elementor/twing": "3.33.0-220",
+    "@elementor/editor": "3.33.0-221",
+    "@elementor/editor-notifications": "3.33.0-221",
+    "@elementor/editor-documents": "3.33.0-221",
+    "@elementor/editor-elements": "3.33.0-221",
+    "@elementor/editor-props": "3.33.0-221",
+    "@elementor/editor-responsive": "3.33.0-221",
+    "@elementor/editor-styles": "3.33.0-221",
+    "@elementor/editor-styles-repository": "3.33.0-221",
+    "@elementor/editor-v1-adapters": "3.33.0-221",
+    "@elementor/twing": "3.33.0-221",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-220",
-    "@elementor/wp-media": "3.33.0-220",
+    "@elementor/utils": "3.33.0-221",
+    "@elementor/wp-media": "3.33.0-221",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/__tests__/style-renderer.test.tsx

@@ -46,8 +46,8 @@ describe( '<StyleRenderer />', () => {
 		const mockContainer = document.createElement( 'div' );
 
 		const mockCssItems = [
-			{ id: 'style1', value: '.test { color: red; }', breakpoint: 'desktop' },
-			{ id: 'style2', value: '.test2 { color: blue; }', breakpoint: 'desktop' },
+			{ id: 'style1', value: '.test { color: red; }', breakpoint: 'desktop', state: null },
+			{ id: 'style2', value: '.test2 { color: blue; }', breakpoint: 'desktop', state: null },
 		];
 
 		const mockLinkAttrs = [

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

@@ -1,5 +1,6 @@
 import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
 import { type BreakpointId, getBreakpoints } from '@elementor/editor-responsive';
+import { isClassState, type StyleDefinitionClassState } from '@elementor/editor-styles';
 import { type StylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 
@@ -58,19 +59,45 @@ export function useStyleItems() {
 	return useMemo(
 		() =>
 			Object.values( styleItems )
-				.sort( ( { provider: providerA }, { provider: providerB } ) => providerA.priority - providerB.priority )
+				.sort( sortByProviderPriority )
 				.flatMap( ( { items } ) => items )
-				.sort( ( { breakpoint: breakpointA }, { breakpoint: breakpointB } ) => {
-					return (
-						breakpointsOrder.indexOf( breakpointA as BreakpointId ) -
-						breakpointsOrder.indexOf( breakpointB as BreakpointId )
-					);
-				} ),
+				.sort( sortByStateType )
+				.sort( sortByBreakpoint( breakpointsOrder ) ),
 		// eslint-disable-next-line
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ styleItems, breakpointsOrder.join( '-' ) ]
 	);
 }
+function sortByProviderPriority(
+	{ provider: providerA }: ProviderAndStyleItems,
+	{ provider: providerB }: ProviderAndStyleItems
+) {
+	return providerA.priority - providerB.priority;
+}
+
+function sortByBreakpoint( breakpointsOrder: BreakpointId[] ) {
+	return ( { breakpoint: breakpointA }: StyleItem, { breakpoint: breakpointB }: StyleItem ) =>
+		breakpointsOrder.indexOf( breakpointA as BreakpointId ) -
+		breakpointsOrder.indexOf( breakpointB as BreakpointId );
+}
+
+function sortByStateType( { state: stateA }: StyleItem, { state: stateB }: StyleItem ) {
+	if (
+		isClassState( stateA as StyleDefinitionClassState ) &&
+		! isClassState( stateB as StyleDefinitionClassState )
+	) {
+		return -1;
+	}
+
+	if (
+		! isClassState( stateA as StyleDefinitionClassState ) &&
+		isClassState( stateB as StyleDefinitionClassState )
+	) {
+		return 1;
+	}
+
+	return 0;
+}
 
 type CreateProviderSubscriberArgs = {
 	provider: StylesProvider;

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

@@ -5,11 +5,13 @@ exports[`renderStyles should render styles 1`] = `
   {
     "breakpoint": "desktop",
     "id": "test",
+    "state": null,
     "value": ".test{font-size:10px;}.test:hover{font-size:20px;}@media(max-width:992px){.test{font-size:30px;}}@media(max-width:768px){.test:focus{font-size:40px;}}",
   },
   {
     "breakpoint": "desktop",
     "id": "test-2",
+    "state": null,
     "value": ".custom-name{font-size:50px;}",
   },
 ]

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

@@ -112,6 +112,7 @@ describe( 'renderStyles', () => {
 				breakpoint: 'desktop',
 				id: 'test',
 				value: '.elementor-prefix .test{font-size:24px;}',
+				state: null,
 			},
 		] );
 	} );
@@ -200,4 +201,28 @@ describe( 'custom_css rendering', () => {
 		// Assert.
 		expect( result[ 0 ].value ).toContain( css );
 	} );
+
+	it( 'should render class state with selector', async () => {
+		// Arrange.
+		const styleDef: RendererStyleDefinition = {
+			id: 'test',
+			type: 'class',
+			cssName: 'test',
+			label: 'Test',
+			variants: [
+				{
+					meta: { breakpoint: null, state: 'e--selected' },
+					props: {},
+					custom_css: null,
+				},
+			],
+		};
+
+		// Act.
+		const renderStyles = createStylesRenderer( { breakpoints: {} as BreakpointsMap, resolve: async () => ( {} ) } );
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
+		// Assert.
+		expect( result[ 0 ].value ).toContain( '.test.e--selected{}' );
+	} );
 } );

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

@@ -2,6 +2,8 @@ import type { Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
 import {
 	type CustomCss,
+	isClassState,
+	isPseudoState,
 	type StyleDefinition,
 	type StyleDefinitionState,
 	type StyleDefinitionType,
@@ -9,12 +11,13 @@ import {
 import { decodeString } from '@elementor/utils';
 
 import { type PropsResolver } from './create-props-resolver';
-import { UnknownStyleTypeError } from './errors';
+import { UnknownStyleStateError, UnknownStyleTypeError } from './errors';
 
 export type StyleItem = {
 	id: string;
 	value: string;
 	breakpoint: string;
+	state: StyleDefinitionState | null;
 };
 
 export type StyleRenderer = ReturnType< typeof createStylesRenderer >;
@@ -65,6 +68,7 @@ export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '
 				id: style.id,
 				breakpoint: style?.variants[ 0 ]?.meta?.breakpoint || 'desktop',
 				value: variantsCss.join( '' ),
+				state: style?.variants[ 0 ]?.meta?.state || null,
 			};
 		} );
 
@@ -87,9 +91,21 @@ function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => st
 		withPrefix: ( prefix: string ) =>
 			createStyleWrapper( [ prefix, value ].filter( Boolean ).join( ' ' ), wrapper ),
 
-		withState: ( state: StyleDefinitionState ) =>
-			createStyleWrapper( state ? `${ value }:${ state }` : value, wrapper ),
+		withState: ( state: StyleDefinitionState ) => {
+			if ( ! state ) {
+				return createStyleWrapper( value, wrapper );
+			}
+
+			if ( isClassState( state ) ) {
+				return createStyleWrapper( `${ value }.${ state }`, wrapper );
+			}
 
+			if ( isPseudoState( state ) ) {
+				return createStyleWrapper( `${ value }:${ state }`, wrapper );
+			}
+
+			throw new UnknownStyleStateError( { context: { state } } );
+		},
 		withMediaQuery: ( breakpoint: Breakpoint | null ) => {
 			if ( ! breakpoint?.type ) {
 				return createStyleWrapper( value, wrapper );

package/src/renderers/errors.ts

@@ -1,6 +1,12 @@
+import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { createError } from '@elementor/utils';
 
 export const UnknownStyleTypeError = createError< { type: string } >( {
 	code: 'unknown_style_type',
 	message: 'Unknown style type',
 } );
+
+export const UnknownStyleStateError = createError< { state: StyleDefinitionState } >( {
+	code: 'unknown_style_state',
+	message: 'Unknown style state',
+} );