@elementor/editor-controls 0.26.0 → 0.27.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -43,13 +43,13 @@
     "@elementor/editor-current-user": "0.3.0",
     "@elementor/editor-elements": "0.8.1",
     "@elementor/editor-props": "0.12.0",
-    "@elementor/editor-ui": "0.7.1",
+    "@elementor/editor-ui": "0.8.0",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
     "@elementor/icons": "1.37.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.32.1",
+    "@elementor/ui": "1.33.2",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
     "@tanstack/react-virtual": "3.13.3",

package/src/control-replacements.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { type ComponentType, createContext, type PropsWithChildren, useContext } from 'react';
+import { type PropValue } from '@elementor/editor-props';
+
+import { useBoundProp } from './bound-prop-context';
+
+type ControlReplacement = {
+	component: ComponentType;
+	condition: ( { value }: ConditionArgs ) => boolean;
+};
+
+type ConditionArgs = {
+	value: PropValue;
+};
+
+type Props = PropsWithChildren< { replacements: ControlReplacement[] } >;
+
+const ControlReplacementContext = createContext< ControlReplacement[] >( [] );
+
+export const ControlReplacementsProvider = ( { replacements, children }: Props ) => {
+	return <ControlReplacementContext.Provider value={ replacements }>{ children }</ControlReplacementContext.Provider>;
+};
+
+export const useControlReplacement = ( OriginalComponent: ComponentType ) => {
+	const { value } = useBoundProp();
+	const replacements = useContext( ControlReplacementContext );
+
+	try {
+		const replacement = replacements.find( ( r ) => r.condition( { value } ) );
+
+		return replacement?.component ?? OriginalComponent;
+	} catch {
+		return OriginalComponent;
+	}
+};
+
+export const createControlReplacementsRegistry = () => {
+	const controlReplacements: ControlReplacement[] = [];
+
+	function registerControlReplacement( replacement: ControlReplacement ) {
+		controlReplacements.push( replacement );
+	}
+
+	function getControlReplacements() {
+		return controlReplacements;
+	}
+
+	return { registerControlReplacement, getControlReplacements };
+};

package/src/controls/equal-unequal-sizes-control.tsx

@@ -135,7 +135,6 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				} }
 				{ ...bindPopover( popupState ) }
 				slotProps={ {
-					// eslint-disable-next-line react-compiler/react-compiler
 					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
 				} }
 			>

package/src/create-control.tsx

@@ -2,35 +2,20 @@ import * as React from 'react';
 import { type ComponentProps, type ComponentType } from 'react';
 import { ErrorBoundary } from '@elementor/ui';
 
-import { useControlReplacement } from './create-control-replacement';
+import { useControlReplacement } from './control-replacements';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyComponentType = ComponentType< any >;
 
-type Options = {
-	supportsReplacements?: boolean;
-};
-
 const brandSymbol = Symbol( 'control' );
 
 export type ControlComponent< TComponent extends AnyComponentType = AnyComponentType > = TComponent & {
 	[ brandSymbol ]: true;
 };
 
-export function createControl< T extends AnyComponentType >(
-	Component: T,
-	{ supportsReplacements = true }: Options = {}
-) {
+export function createControl< T extends AnyComponentType >( Control: T ) {
 	return ( ( props: ComponentProps< T > ) => {
-		const ControlReplacement = useControlReplacement();
-
-		if ( ControlReplacement && supportsReplacements ) {
-			return (
-				<ErrorBoundary fallback={ null }>
-					<ControlReplacement { ...props } />
-				</ErrorBoundary>
-			);
-		}
+		const Component = useControlReplacement( Control );
 
 		return (
 			<ErrorBoundary fallback={ null }>

package/src/index.ts

@@ -34,7 +34,7 @@ export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';
 
 // providers
-export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';
+export { createControlReplacementsRegistry, ControlReplacementsProvider } from './control-replacements';
 export { ControlActionsProvider, useControlActions } from './control-actions/control-actions-context';
 export { useBoundProp, PropProvider, PropKeyProvider } from './bound-prop-context';
 export { ControlAdornmentsProvider } from './control-adornments/control-adornments-context';

package/src/create-control-replacement.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { type ComponentType, createContext, useContext } from 'react';
-import { type PropValue } from '@elementor/editor-props';
-
-import { useBoundProp } from './bound-prop-context';
-
-type ReplaceWhenParams = {
-	value: PropValue;
-};
-
-type CreateControlReplacement = {
-	component: ComponentType;
-	condition: ( { value }: ReplaceWhenParams ) => boolean;
-};
-
-const ControlReplacementContext = createContext< CreateControlReplacement | undefined >( undefined );
-
-export const ControlReplacementProvider = ( {
-	component,
-	condition,
-	children,
-}: React.PropsWithChildren< CreateControlReplacement > ) => {
-	return (
-		<ControlReplacementContext.Provider value={ { component, condition } }>
-			{ children }
-		</ControlReplacementContext.Provider>
-	);
-};
-export const useControlReplacement = () => {
-	const { value } = useBoundProp();
-	const controlReplacement = useContext( ControlReplacementContext );
-
-	let shouldReplace = false;
-
-	try {
-		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement.component;
-	} catch {}
-
-	return shouldReplace ? controlReplacement?.component : undefined;
-};
-
-export const createControlReplacement = () => {
-	let controlReplacement: CreateControlReplacement;
-
-	function replaceControl( { component, condition }: CreateControlReplacement ) {
-		controlReplacement = { component, condition };
-	}
-
-	function getControlReplacement() {
-		return controlReplacement;
-	}
-
-	return { replaceControl, getControlReplacement };
-};