@elementor/editor-controls 0.26.0 → 0.28.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.28.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.1",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
-    "@elementor/icons": "1.37.0",
+    "@elementor/icons": "1.40.1",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.32.1",
+    "@elementor/ui": "1.34.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/controls/image-control.tsx

@@ -14,10 +14,11 @@ import { SelectControl } from './select-control';
 type ImageControlProps = {
 	sizes: { label: string; value: string }[];
 	resolutionLabel?: string;
+	showMode?: 'all' | 'media' | 'sizes';
 };
 
 export const ImageControl = createControl(
-	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ) }: ImageControlProps ) => {
+	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ), showMode = 'all' }: ImageControlProps ) => {
 		const propContext = useBoundProp( imagePropTypeUtil );
 
 		const { data: allowSvgUpload } = useUnfilteredFilesUpload();
@@ -26,20 +27,24 @@ export const ImageControl = createControl(
 		return (
 			<PropProvider { ...propContext }>
 				<Stack gap={ 1.5 }>
-					<PropKeyProvider bind={ 'src' }>
-						<ControlFormLabel> { __( 'Image', 'elementor' ) } </ControlFormLabel>
-						<ImageMediaControl mediaTypes={ mediaTypes } />
-					</PropKeyProvider>
-					<PropKeyProvider bind={ 'size' }>
-						<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
-							<Grid item xs={ 6 }>
-								<ControlFormLabel> { resolutionLabel } </ControlFormLabel>
+					{ [ 'all', 'media' ].includes( showMode ) ? (
+						<PropKeyProvider bind={ 'src' }>
+							<ControlFormLabel> { __( 'Image', 'elementor' ) } </ControlFormLabel>
+							<ImageMediaControl mediaTypes={ mediaTypes } />
+						</PropKeyProvider>
+					) : null }
+					{ [ 'all', 'sizes' ].includes( showMode ) ? (
+						<PropKeyProvider bind={ 'size' }>
+							<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
+								<Grid item xs={ 6 }>
+									<ControlFormLabel> { resolutionLabel } </ControlFormLabel>
+								</Grid>
+								<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+									<SelectControl options={ sizes } />
+								</Grid>
 							</Grid>
-							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-								<SelectControl options={ sizes } />
-							</Grid>
-						</Grid>
-					</PropKeyProvider>
+						</PropKeyProvider>
+					) : null }
 				</Stack>
 			</PropProvider>
 		);

package/src/controls/link-control.tsx

@@ -13,7 +13,7 @@ import { InfoTipCard } from '@elementor/editor-ui';
 import { type HttpResponse, httpService } from '@elementor/http';
 import { AlertTriangleIcon, MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
-import { Box, Collapse, Divider, Grid, IconButton, Infotip, Stack, Switch } from '@elementor/ui';
+import { Box, Collapse, Grid, IconButton, Infotip, Stack, Switch } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
@@ -81,9 +81,21 @@ export const LinkControl = createControl( ( props: Props ) => {
 			return;
 		}
 
-		setIsActive( ( prevState ) => ! prevState );
-		setValue( isActive ? null : linkSessionValue?.value ?? null );
-		setLinkSessionValue( { value, meta: { isEnabled: ! isActive } } );
+		const newState = ! isActive;
+		setIsActive( newState );
+
+		if ( ! newState && value !== null ) {
+			setValue( null );
+		}
+
+		if ( newState && linkSessionValue?.value ) {
+			setValue( linkSessionValue.value );
+		}
+
+		setLinkSessionValue( {
+			value: newState ? value : linkSessionValue?.value,
+			meta: { isEnabled: newState },
+		} );
 	};
 
 	const onOptionChange = ( newValue: number | null ) => {
@@ -105,7 +117,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 			? {
 					...value,
 					destination: urlPropTypeUtil.create( newValue ),
-					label: null,
+					label: stringPropTypeUtil.create( '' ),
 			  }
 			: null;
 
@@ -143,7 +155,6 @@ export const LinkControl = createControl( ( props: Props ) => {
 	return (
 		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
 			<Stack gap={ 1.5 }>
-				<Divider />
 				<Stack
 					direction="row"
 					sx={ {

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 };
-};