@elementor/editor-canvas 3.35.0-358 → 3.35.0-359

package/dist/index.d.mts

@@ -2,6 +2,8 @@ import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/edit
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { Props, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
+import * as _elementor_utils from '@elementor/utils';
+import { StyleDefinitionState } from '@elementor/editor-styles';
 
 declare const BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
 
@@ -206,4 +208,37 @@ declare const DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 
 declare function createTransformer<TValue = never>(cb: TValue extends AnyTransformable ? 'Transformable values are invalid, use the actual value instead.' : UnbrandedTransformer<TValue>): Transformer<NoInfer<TValue>>;
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, RenderContext, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+declare const UnknownStyleTypeError: {
+    new ({ cause, context }?: {
+        cause?: _elementor_utils.ElementorErrorOptions["cause"];
+        context?: {
+            type: string;
+        } | undefined;
+    } | undefined): {
+        readonly context: _elementor_utils.ElementorErrorOptions["context"];
+        readonly code: _elementor_utils.ElementorErrorOptions["code"];
+        name: string;
+        message: string;
+        stack?: string;
+        cause?: unknown;
+    };
+    isError(error: unknown): error is Error;
+};
+declare const UnknownStyleStateError: {
+    new ({ cause, context }?: {
+        cause?: _elementor_utils.ElementorErrorOptions["cause"];
+        context?: {
+            state: StyleDefinitionState;
+        } | undefined;
+    } | undefined): {
+        readonly context: _elementor_utils.ElementorErrorOptions["context"];
+        readonly code: _elementor_utils.ElementorErrorOptions["code"];
+        name: string;
+        message: string;
+        stack?: string;
+        cause?: unknown;
+    };
+    isError(error: unknown): error is Error;
+};
+
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, RenderContext, STYLE_SCHEMA_URI, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/edit
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { Props, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
+import * as _elementor_utils from '@elementor/utils';
+import { StyleDefinitionState } from '@elementor/editor-styles';
 
 declare const BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
 
@@ -206,4 +208,37 @@ declare const DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 
 declare function createTransformer<TValue = never>(cb: TValue extends AnyTransformable ? 'Transformable values are invalid, use the actual value instead.' : UnbrandedTransformer<TValue>): Transformer<NoInfer<TValue>>;
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, RenderContext, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+declare const UnknownStyleTypeError: {
+    new ({ cause, context }?: {
+        cause?: _elementor_utils.ElementorErrorOptions["cause"];
+        context?: {
+            type: string;
+        } | undefined;
+    } | undefined): {
+        readonly context: _elementor_utils.ElementorErrorOptions["context"];
+        readonly code: _elementor_utils.ElementorErrorOptions["code"];
+        name: string;
+        message: string;
+        stack?: string;
+        cause?: unknown;
+    };
+    isError(error: unknown): error is Error;
+};
+declare const UnknownStyleStateError: {
+    new ({ cause, context }?: {
+        cause?: _elementor_utils.ElementorErrorOptions["cause"];
+        context?: {
+            state: StyleDefinitionState;
+        } | undefined;
+    } | undefined): {
+        readonly context: _elementor_utils.ElementorErrorOptions["context"];
+        readonly code: _elementor_utils.ElementorErrorOptions["code"];
+        name: string;
+        message: string;
+        stack?: string;
+        cause?: unknown;
+    };
+    isError(error: unknown): error is Error;
+};
+
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, RenderContext, STYLE_SCHEMA_URI, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.js

@@ -34,6 +34,8 @@ __export(index_exports, {
   DOCUMENT_STRUCTURE_URI: () => DOCUMENT_STRUCTURE_URI,
   RenderContext: () => RenderContext,
   STYLE_SCHEMA_URI: () => STYLE_SCHEMA_URI,
+  UnknownStyleStateError: () => UnknownStyleStateError,
+  UnknownStyleTypeError: () => UnknownStyleTypeError,
   WIDGET_SCHEMA_URI: () => WIDGET_SCHEMA_URI,
   createPropsResolver: () => createPropsResolver,
   createTemplatedElementView: () => createTemplatedElementView,
@@ -862,16 +864,8 @@ function createStyleWrapper(value = "", wrapper) {
     },
     withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
     withState: (state) => {
-      if (!state) {
-        return createStyleWrapper(value, wrapper);
-      }
-      if ((0, import_editor_styles3.isClassState)(state)) {
-        return createStyleWrapper(`${value}.${state}`, wrapper);
-      }
-      if ((0, import_editor_styles3.isPseudoState)(state)) {
-        return createStyleWrapper(`${value}:${state}`, wrapper);
-      }
-      throw new UnknownStyleStateError({ context: { state } });
+      const selector = (0, import_editor_styles3.getSelectorWithState)(value, state);
+      return createStyleWrapper(selector, wrapper);
     },
     withMediaQuery: (breakpoint) => {
       if (!breakpoint?.type) {
@@ -3576,6 +3570,8 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
   DOCUMENT_STRUCTURE_URI,
   RenderContext,
   STYLE_SCHEMA_URI,
+  UnknownStyleStateError,
+  UnknownStyleTypeError,
   WIDGET_SCHEMA_URI,
   createPropsResolver,
   createTemplatedElementView,

package/dist/index.mjs

@@ -587,7 +587,7 @@ function getLinkAttrs(el) {
 // src/hooks/use-style-items.ts
 import { useEffect as useEffect6, useMemo as useMemo4, useState as useState3 } from "react";
 import { getBreakpoints } from "@elementor/editor-responsive";
-import { isClassState as isClassState2 } from "@elementor/editor-styles";
+import { isClassState } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 
@@ -774,8 +774,7 @@ import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
 import {
-  isClassState,
-  isPseudoState
+  getSelectorWithState
 } from "@elementor/editor-styles";
 import { decodeString } from "@elementor/utils";
 
@@ -824,16 +823,8 @@ function createStyleWrapper(value = "", wrapper) {
     },
     withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), 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 } });
+      const selector = getSelectorWithState(value, state);
+      return createStyleWrapper(selector, wrapper);
     },
     withMediaQuery: (breakpoint) => {
       if (!breakpoint?.type) {
@@ -927,10 +918,10 @@ 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)) {
+  if (isClassState(stateA) && !isClassState(stateB)) {
     return -1;
   }
-  if (!isClassState2(stateA) && isClassState2(stateB)) {
+  if (!isClassState(stateA) && isClassState(stateB)) {
     return 1;
   }
   return 0;
@@ -3569,6 +3560,8 @@ export {
   DOCUMENT_STRUCTURE_URI,
   RenderContext,
   STYLE_SCHEMA_URI,
+  UnknownStyleStateError,
+  UnknownStyleTypeError,
   WIDGET_SCHEMA_URI,
   createPropsResolver,
   createTemplatedElementView,

package/package.json

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

package/src/index.ts

@@ -21,3 +21,4 @@ export * from './legacy/types';
 export { createTransformer } from './transformers/create-transformer';
 export { createTransformersRegistry } from './transformers/create-transformers-registry';
 export { type AnyTransformer } from './transformers/types';
+export { UnknownStyleTypeError, UnknownStyleStateError } from './renderers/errors';

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

@@ -6,7 +6,7 @@ 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;}}",
+    "value": ".test{font-size:10px;}.test:hover,.test:focus-visible{font-size:20px;}@media(max-width:992px){.test{font-size:30px;}}@media(max-width:768px){.test:focus{font-size:40px;}}",
   },
   {
     "breakpoint": "desktop",

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

@@ -2,8 +2,7 @@ import type { Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
 import {
 	type CustomCss,
-	isClassState,
-	isPseudoState,
+	getSelectorWithState,
 	type StyleDefinition,
 	type StyleDefinitionState,
 	type StyleDefinitionType,
@@ -11,7 +10,7 @@ import {
 import { decodeString } from '@elementor/utils';
 
 import { type PropsResolver } from './create-props-resolver';
-import { UnknownStyleStateError, UnknownStyleTypeError } from './errors';
+import { UnknownStyleTypeError } from './errors';
 
 export type StyleItem = {
 	id: string;
@@ -92,20 +91,11 @@ function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => st
 			createStyleWrapper( [ prefix, value ].filter( Boolean ).join( ' ' ), wrapper ),
 
 		withState: ( state: StyleDefinitionState ) => {
-			if ( ! state ) {
-				return createStyleWrapper( value, wrapper );
-			}
-
-			if ( isClassState( state ) ) {
-				return createStyleWrapper( `${ value }.${ state }`, wrapper );
-			}
+			const selector = getSelectorWithState( value, state );
 
-			if ( isPseudoState( state ) ) {
-				return createStyleWrapper( `${ value }:${ state }`, wrapper );
-			}
-
-			throw new UnknownStyleStateError( { context: { state } } );
+			return createStyleWrapper( selector, wrapper );
 		},
+
 		withMediaQuery: ( breakpoint: Breakpoint | null ) => {
 			if ( ! breakpoint?.type ) {
 				return createStyleWrapper( value, wrapper );