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

package/dist/index.js

@@ -137,6 +137,7 @@ var import_react3 = require("react");
 var import_react4 = require("@floating-ui/react");
 function useFloatingOnElement({ element, isSelected }) {
   const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const sizeModifier = 2;
   const { refs, floatingStyles, context } = (0, import_react4.useFloating)({
     // Must be controlled for interactions (like hover) to work.
     open: isOpen || isSelected,
@@ -144,13 +145,15 @@ function useFloatingOnElement({ element, isSelected }) {
     whileElementsMounted: import_react4.autoUpdate,
     middleware: [
       // Match the floating element's size to the reference element.
-      (0, import_react4.size)({
-        apply({ elements, rects }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width + 2}px`,
-            height: `${rects.reference.height + 2}px`
-          });
-        }
+      (0, import_react4.size)(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
       }),
       // Center the floating element on the reference element.
       (0, import_react4.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
@@ -170,6 +173,23 @@ function useFloatingOnElement({ element, isSelected }) {
   };
 }
 
+// src/hooks/use-has-overlapping.ts
+var possibleOverlappingSelectors = [".e-off-canvas"];
+var useHasOverlapping = () => {
+  const preview = window.elementor?.$preview?.[0];
+  if (!preview) {
+    return false;
+  }
+  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
+    (elem) => elem.checkVisibility({
+      opacityProperty: true,
+      visibilityProperty: true,
+      contentVisibilityAuto: true
+    })
+  );
+  return hasOverlapping;
+};
+
 // src/components/element-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
@@ -182,9 +202,10 @@ var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
 function ElementOverlay({ element, isSelected, id }) {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = (0, import_react5.useInteractions)([(0, import_react5.useHover)(context)]);
+  const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
   const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && /* @__PURE__ */ React.createElement(import_react5.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react5.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
       ref: floating.setRef,
@@ -281,6 +302,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 +491,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 +500,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 +521,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 +538,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 +630,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

@@ -97,6 +97,7 @@ import { useEffect as useEffect3, useState } from "react";
 import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
 function useFloatingOnElement({ element, isSelected }) {
   const [isOpen, setIsOpen] = useState(false);
+  const sizeModifier = 2;
   const { refs, floatingStyles, context } = useFloating({
     // Must be controlled for interactions (like hover) to work.
     open: isOpen || isSelected,
@@ -104,13 +105,15 @@ function useFloatingOnElement({ element, isSelected }) {
     whileElementsMounted: autoUpdate,
     middleware: [
       // Match the floating element's size to the reference element.
-      size({
-        apply({ elements, rects }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width + 2}px`,
-            height: `${rects.reference.height + 2}px`
-          });
-        }
+      size(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
       }),
       // Center the floating element on the reference element.
       offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
@@ -130,6 +133,23 @@ function useFloatingOnElement({ element, isSelected }) {
   };
 }
 
+// src/hooks/use-has-overlapping.ts
+var possibleOverlappingSelectors = [".e-off-canvas"];
+var useHasOverlapping = () => {
+  const preview = window.elementor?.$preview?.[0];
+  if (!preview) {
+    return false;
+  }
+  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
+    (elem) => elem.checkVisibility({
+      opacityProperty: true,
+      visibilityProperty: true,
+      contentVisibilityAuto: true
+    })
+  );
+  return hasOverlapping;
+};
+
 // src/components/element-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = styled(Box, {
@@ -142,9 +162,10 @@ var OverlayBox = styled(Box, {
 function ElementOverlay({ element, isSelected, id }) {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
+  const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
   const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
       ref: floating.setRef,
@@ -241,6 +262,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 +453,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 +465,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 +486,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 +503,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 +595,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-222",
   "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-222",
+    "@elementor/editor-notifications": "3.33.0-222",
+    "@elementor/editor-documents": "3.33.0-222",
+    "@elementor/editor-elements": "3.33.0-222",
+    "@elementor/editor-props": "3.33.0-222",
+    "@elementor/editor-responsive": "3.33.0-222",
+    "@elementor/editor-styles": "3.33.0-222",
+    "@elementor/editor-styles-repository": "3.33.0-222",
+    "@elementor/editor-v1-adapters": "3.33.0-222",
+    "@elementor/twing": "3.33.0-222",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-220",
-    "@elementor/wp-media": "3.33.0-220",
+    "@elementor/utils": "3.33.0-222",
+    "@elementor/wp-media": "3.33.0-222",
     "@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/components/element-overlay.tsx

@@ -4,6 +4,7 @@ import { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';
 
 import { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-element';
 import { useFloatingOnElement } from '../hooks/use-floating-on-element';
+import { useHasOverlapping } from '../hooks/use-has-overlapping';
 
 export const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';
 
@@ -25,12 +26,14 @@ const OverlayBox = styled( Box, {
 export function ElementOverlay( { element, isSelected, id }: Props ) {
 	const { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );
 	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
+	const hasOverlapping = useHasOverlapping();
 
 	useBindReactPropsToElement( element, getReferenceProps );
 	const isSmallerOffset = element.offsetHeight <= 1;
 
 	return (
-		isVisible && (
+		isVisible &&
+		! hasOverlapping && (
 			<FloatingPortal id={ CANVAS_WRAPPER_ID }>
 				<OverlayBox
 					ref={ floating.setRef }

package/src/hooks/__tests__/use-has-overlapping.test.ts

@@ -0,0 +1,187 @@
+import { createDOMElement } from 'test-utils';
+import { renderHook } from '@testing-library/react';
+
+import { type CanvasExtendedWindow } from '../../sync/types';
+import { useHasOverlapping } from '../use-has-overlapping';
+
+const OFF_CANVAS_CLASS = 'e-off-canvas';
+
+describe( 'useHasOverlapping', () => {
+	let mockPreviewFrame: HTMLIFrameElement;
+	let mockDocument: Document;
+
+	const setupPreviewFrame = ( hasOffCanvas: boolean, isVisible: boolean = true ) => {
+		// Arrange - Create mock iframe and document
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		if ( hasOffCanvas ) {
+			const offCanvasElement = createDOMElement( {
+				tag: 'div',
+				attrs: { class: OFF_CANVAS_CLASS },
+			} );
+
+			// Mock checkVisibility method
+			offCanvasElement.checkVisibility = jest.fn().mockReturnValue( isVisible );
+
+			mockDocument.body.appendChild( offCanvasElement );
+		}
+
+		// Setup the content window with the mock document
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		// Setup window.elementor.$preview
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+	};
+
+	const cleanupPreviewFrame = () => {
+		delete ( window as unknown as CanvasExtendedWindow ).elementor;
+	};
+
+	afterEach( () => {
+		cleanupPreviewFrame();
+	} );
+
+	it( 'should return false when preview frame is not available', () => {
+		// Arrange - No preview frame setup
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should return false when off-canvas element does not exist', () => {
+		// Arrange
+		setupPreviewFrame( false );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should return true when off-canvas element exists and is visible', () => {
+		// Arrange
+		setupPreviewFrame( true, true );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should return false when off-canvas element exists but is not visible', () => {
+		// Arrange
+		setupPreviewFrame( true, false );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should check visibility with correct options', () => {
+		// Arrange
+		setupPreviewFrame( true, true );
+
+		// Act
+		renderHook( () => useHasOverlapping() );
+
+		// Assert
+		// eslint-disable-next-line testing-library/no-node-access
+		const offCanvasElement = mockDocument.querySelector( `.${ OFF_CANVAS_CLASS }` );
+		expect( offCanvasElement?.checkVisibility ).toHaveBeenCalledWith( {
+			opacityProperty: true,
+			visibilityProperty: true,
+			contentVisibilityAuto: true,
+		} );
+	} );
+
+	it( 'should return true when multiple off-canvas elements exist and at least one is visible', () => {
+		// Arrange
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		const offCanvasElement1 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement1.checkVisibility = jest.fn().mockReturnValue( false );
+
+		const offCanvasElement2 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement2.checkVisibility = jest.fn().mockReturnValue( true );
+
+		mockDocument.body.appendChild( offCanvasElement1 );
+		mockDocument.body.appendChild( offCanvasElement2 );
+
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should return false when multiple off-canvas elements exist but none are visible', () => {
+		// Arrange
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		const offCanvasElement1 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement1.checkVisibility = jest.fn().mockReturnValue( false );
+
+		const offCanvasElement2 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement2.checkVisibility = jest.fn().mockReturnValue( false );
+
+		mockDocument.body.appendChild( offCanvasElement1 );
+		mockDocument.body.appendChild( offCanvasElement2 );
+
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+} );

package/src/hooks/use-floating-on-element.ts

@@ -8,6 +8,7 @@ type Options = {
 
 export function useFloatingOnElement( { element, isSelected }: Options ) {
 	const [ isOpen, setIsOpen ] = useState( false );
+	const sizeModifier = 2;
 
 	const { refs, floatingStyles, context } = useFloating( {
 		// Must be controlled for interactions (like hover) to work.
@@ -18,15 +19,17 @@ export function useFloatingOnElement( { element, isSelected }: Options ) {
 
 		middleware: [
 			// Match the floating element's size to the reference element.
-			size( {
-				apply( { elements, rects } ) {
-					Object.assign( elements.floating.style, {
-						width: `${ rects.reference.width + 2 }px`,
-						height: `${ rects.reference.height + 2 }px`,
-					} );
-				},
-			} ),
 
+			size( () => {
+				return {
+					apply( { elements, rects } ) {
+						Object.assign( elements.floating.style, {
+							width: `${ rects.reference.width + sizeModifier }px`,
+							height: `${ rects.reference.height + sizeModifier }px`,
+						} );
+					},
+				};
+			} ),
 			// Center the floating element on the reference element.
 			offset( ( { rects } ) => -rects.reference.height / 2 - rects.floating.height / 2 ),
 		],

package/src/hooks/use-has-overlapping.ts

@@ -0,0 +1,21 @@
+import { type CanvasExtendedWindow } from '../sync/types';
+
+const possibleOverlappingSelectors = [ '.e-off-canvas' ]; // can add more selectors here if needed, make sure to loop through them to check classList
+
+export const useHasOverlapping = () => {
+	const preview = ( window as unknown as CanvasExtendedWindow ).elementor?.$preview?.[ 0 ];
+	if ( ! preview ) {
+		return false;
+	}
+	const hasOverlapping = possibleOverlappingSelectors
+		.map( ( selector ) => Array.from( preview?.contentWindow?.document.body.querySelectorAll( selector ) ?? [] ) )
+		.flat()
+		.some( ( elem ) =>
+			elem.checkVisibility( {
+				opacityProperty: true,
+				visibilityProperty: true,
+				contentVisibilityAuto: true,
+			} )
+		);
+	return hasOverlapping;
+};

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',
+} );