@elementor/editor-ui 4.4.0-1141 → 4.4.0-1142

package/dist/index.d.mts

@@ -36,8 +36,11 @@ type IntroductionModalProps = React$1.PropsWithChildren<{
 }>;
 declare const IntroductionModal: ({ open, handleClose, title, children }: IntroductionModalProps) => React$1.JSX.Element;
 
-declare function ThemeProvider({ children }: {
+type ColorScheme = 'auto' | 'dark' | 'light';
+
+declare function ThemeProvider({ children, colorScheme: staticColorScheme, }: {
     children: React$1.ReactNode;
+    colorScheme?: ColorScheme;
 }): React$1.JSX.Element;
 
 type MenuListItemProps = MenuItemProps & {

package/dist/index.d.ts

@@ -36,8 +36,11 @@ type IntroductionModalProps = React$1.PropsWithChildren<{
 }>;
 declare const IntroductionModal: ({ open, handleClose, title, children }: IntroductionModalProps) => React$1.JSX.Element;
 
-declare function ThemeProvider({ children }: {
+type ColorScheme = 'auto' | 'dark' | 'light';
+
+declare function ThemeProvider({ children, colorScheme: staticColorScheme, }: {
     children: React$1.ReactNode;
+    colorScheme?: ColorScheme;
 }): React$1.JSX.Element;
 
 type MenuListItemProps = MenuItemProps & {

package/dist/index.js

@@ -240,12 +240,18 @@ var import_ui6 = require("@elementor/ui");
 // src/hooks/use-color-scheme.ts
 var import_react5 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-function useColorScheme() {
+function useColorScheme(staticColorScheme) {
   const [colorScheme, setColorScheme] = (0, import_react5.useState)(() => getV1ColorScheme());
   (0, import_react5.useEffect)(() => {
+    if (staticColorScheme) {
+      return;
+    }
     return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), () => setColorScheme(getV1ColorScheme()));
-  }, []);
+  }, [staticColorScheme]);
   (0, import_react5.useEffect)(() => {
+    if (staticColorScheme) {
+      return;
+    }
     return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"), (e) => {
       const event = e;
       const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
@@ -253,8 +259,8 @@ function useColorScheme() {
         setColorScheme(getV1ColorScheme());
       }
     });
-  }, []);
-  return colorScheme;
+  }, [staticColorScheme]);
+  return staticColorScheme || colorScheme;
 }
 function getV1ColorScheme() {
   return window.elementor?.getPreferences?.("ui_theme") || "auto";
@@ -262,8 +268,11 @@ function getV1ColorScheme() {
 
 // src/components/theme-provider.tsx
 var EDITOR_PALETTE = "unstable";
-function ThemeProvider({ children }) {
-  const colorScheme = useColorScheme();
+function ThemeProvider({
+  children,
+  colorScheme: staticColorScheme
+}) {
+  const colorScheme = useColorScheme(staticColorScheme);
   return /* @__PURE__ */ React5.createElement(import_ui6.ThemeProvider, { colorScheme, palette: EDITOR_PALETTE }, children);
 }
 

package/dist/index.mjs

@@ -178,12 +178,18 @@ import {
   commandEndEvent,
   v1ReadyEvent
 } from "@elementor/editor-v1-adapters";
-function useColorScheme() {
+function useColorScheme(staticColorScheme) {
   const [colorScheme, setColorScheme] = useState4(() => getV1ColorScheme());
   useEffect2(() => {
+    if (staticColorScheme) {
+      return;
+    }
     return listenTo(v1ReadyEvent(), () => setColorScheme(getV1ColorScheme()));
-  }, []);
+  }, [staticColorScheme]);
   useEffect2(() => {
+    if (staticColorScheme) {
+      return;
+    }
     return listenTo(commandEndEvent("document/elements/settings"), (e) => {
       const event = e;
       const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
@@ -191,8 +197,8 @@ function useColorScheme() {
         setColorScheme(getV1ColorScheme());
       }
     });
-  }, []);
-  return colorScheme;
+  }, [staticColorScheme]);
+  return staticColorScheme || colorScheme;
 }
 function getV1ColorScheme() {
   return window.elementor?.getPreferences?.("ui_theme") || "auto";
@@ -200,8 +206,11 @@ function getV1ColorScheme() {
 
 // src/components/theme-provider.tsx
 var EDITOR_PALETTE = "unstable";
-function ThemeProvider({ children }) {
-  const colorScheme = useColorScheme();
+function ThemeProvider({
+  children,
+  colorScheme: staticColorScheme
+}) {
+  const colorScheme = useColorScheme(staticColorScheme);
   return /* @__PURE__ */ React5.createElement(ThemeProviderBase, { colorScheme, palette: EDITOR_PALETTE }, children);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "4.4.0-1141",
+  "version": "4.4.0-1142",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,9 +37,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "4.4.0-1141",
+    "@elementor/editor-v1-adapters": "4.4.0-1142",
     "@elementor/icons": "~1.78.1",
-    "@elementor/ui": "1.41.3",
+    "@elementor/ui": "1.41.4",
     "@tanstack/react-virtual": "^3.13.3",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/theme-provider.tsx

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';
 
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { type ColorScheme, useColorScheme } from '../hooks/use-color-scheme';
 
 const EDITOR_PALETTE: ThemeProviderProps[ 'palette' ] = 'unstable';
 
-export default function ThemeProvider( { children }: { children: React.ReactNode } ) {
-	const colorScheme = useColorScheme();
+export default function ThemeProvider( {
+	children,
+	colorScheme: staticColorScheme,
+}: {
+	children: React.ReactNode;
+	colorScheme?: ColorScheme;
+} ) {
+	const colorScheme = useColorScheme( staticColorScheme );
 
 	return (
 		<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALETTE }>

package/src/hooks/__tests__/use-color-scheme.test.ts

@@ -82,6 +82,101 @@ describe( '@elementor/editor - useColorScheme', () => {
 		// Assert.
 		expect( result.current ).toBe( 'auto' );
 	} );
+
+	describe( 'static color scheme', () => {
+		it( 'should use the static color scheme over the V1 preference', () => {
+			// Arrange.
+			mockV1ColorScheme( 'light' );
+
+			// Act.
+			const { result } = renderHook( () => useColorScheme( 'dark' ) );
+
+			// Assert.
+			expect( result.current ).toBe( 'dark' );
+		} );
+
+		it( 'should follow the V1 preference when no static color scheme is provided', () => {
+			// Arrange.
+			mockV1ColorScheme( 'light' );
+
+			// Act.
+			const { result } = renderHook( () => useColorScheme( undefined ) );
+
+			// Assert.
+			expect( result.current ).toBe( 'light' );
+		} );
+
+		it( 'should keep the static color scheme on V1 ready', () => {
+			// Arrange.
+			mockV1ColorScheme( 'light' );
+
+			const { result } = renderHook( () => useColorScheme( 'dark' ) );
+
+			// Act.
+			act( () => {
+				dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
+			} );
+
+			// Assert.
+			expect( result.current ).toBe( 'dark' );
+		} );
+
+		it( 'should keep the static color scheme on V1 preference change', () => {
+			// Arrange.
+			mockV1ColorScheme( 'light' );
+
+			const { result } = renderHook( () => useColorScheme( 'dark' ) );
+
+			// Act.
+			act( () => {
+				mockV1ColorScheme( 'auto' );
+
+				dispatchEvent(
+					new CustomEvent( 'elementor/commands/run/after', {
+						detail: {
+							command: 'document/elements/settings',
+							args: {
+								container: {
+									id: 'editorPreferences_settings',
+								},
+								settings: {
+									ui_theme: 'auto',
+								},
+							},
+						},
+					} )
+				);
+			} );
+
+			// Assert.
+			expect( result.current ).toBe( 'dark' );
+		} );
+
+		it( 'should update the result when the static color scheme changes', () => {
+			// Arrange.
+			mockV1ColorScheme( 'light' );
+
+			const { result, rerender } = renderHook(
+				( { staticColorScheme }: { staticColorScheme?: ColorScheme } ) => useColorScheme( staticColorScheme ),
+				{ initialProps: { staticColorScheme: 'dark' as ColorScheme | undefined } }
+			);
+
+			// Assert - Before change.
+			expect( result.current ).toBe( 'dark' );
+
+			// Act - Change to another static value.
+			rerender( { staticColorScheme: 'auto' } );
+
+			// Assert.
+			expect( result.current ).toBe( 'auto' );
+
+			// Act - Remove the static value.
+			rerender( { staticColorScheme: undefined } );
+
+			// Assert.
+			expect( result.current ).toBe( 'light' );
+		} );
+	} );
 } );
 
 function mockV1ColorScheme( colorScheme: ColorScheme ) {

package/src/hooks/use-color-scheme.ts

@@ -14,14 +14,22 @@ export type ExtendedWindow = Window & {
 	};
 };
 
-export function useColorScheme() {
+export function useColorScheme( staticColorScheme?: ColorScheme ) {
 	const [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );
 
 	useEffect( () => {
+		if ( staticColorScheme ) {
+			return;
+		}
+
 		return listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );
-	}, [] );
+	}, [ staticColorScheme ] );
 
 	useEffect( () => {
+		if ( staticColorScheme ) {
+			return;
+		}
+
 		return listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {
 			const event = e as CommandEvent< {
 				settings: {
@@ -36,9 +44,9 @@ export function useColorScheme() {
 				setColorScheme( getV1ColorScheme() );
 			}
 		} );
-	}, [] );
+	}, [ staticColorScheme ] );
 
-	return colorScheme;
+	return staticColorScheme || colorScheme;
 }
 
 function getV1ColorScheme() {