@elementor/editor-editing-panel 0.18.0 → 1.0.0

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

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { ReactNode, useId, useRef } from 'react';
+import { PropValue, TransformablePropValue } from '@elementor/editor-props';
+import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { ControlLabel } from '../../components/control-label';
+import { BoundPropProvider, SizeControl, SizeControlValue, useBoundProp } from '../index';
+
+type MultiSizePropValue< TMultiPropType extends string > = TransformablePropValue<
+	TMultiPropType,
+	Record< string, SizeControlValue >
+>;
+
+type Item< TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > > = {
+	icon: ReactNode;
+	label: string;
+	bind: keyof TPropValue[ 'value' ];
+};
+
+export type EqualUnequalItems<
+	TMultiPropType extends string,
+	TPropValue extends MultiSizePropValue< TMultiPropType >,
+> = [
+	Item< TMultiPropType, TPropValue >,
+	Item< TMultiPropType, TPropValue >,
+	Item< TMultiPropType, TPropValue >,
+	Item< TMultiPropType, TPropValue >,
+];
+
+type Props< TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > > = {
+	label: string;
+	icon: ReactNode;
+	items: EqualUnequalItems< TMultiPropType, TPropValue >;
+	multiSizeType: TMultiPropType;
+};
+
+function hasMixedSizes( values: SizeControlValue[] ): boolean {
+	const [ firstValue, ...restValues ] = values;
+
+	return restValues.some(
+		( value ) => value?.value?.size !== firstValue?.value?.size || value?.value?.unit !== firstValue?.value?.unit
+	);
+}
+
+export function EqualUnequalSizesControl<
+	TMultiPropType extends string,
+	TPropValue extends MultiSizePropValue< TMultiPropType >,
+>( { label, icon, items, multiSizeType }: Props< TMultiPropType, TPropValue > ) {
+	const popupId = useId();
+	const controlRef = useRef< HTMLElement >( null );
+	const { value: controlValue, setValue: setControlValue } = useBoundProp< TPropValue >();
+
+	const actualValue: TPropValue[ 'value' ] = controlValue?.value ?? {};
+	const setActualValue = ( newValue: TPropValue[ 'value' ] ) => {
+		setControlValue( { $$type: multiSizeType, value: newValue } as TPropValue );
+	};
+
+	const setNestedProp = ( item: Item< TMultiPropType, TPropValue >, newValue: PropValue ) => {
+		const { bind } = item;
+
+		const newValues = {
+			...actualValue,
+			[ bind ]: newValue,
+		};
+
+		setActualValue( newValues );
+	};
+
+	const setEqualValues = ( newValue: PropValue ) => {
+		const equalValues = items.reduce( ( values: TPropValue[ 'value' ], item ) => {
+			return {
+				...values,
+				[ item.bind ]: newValue,
+			};
+		}, {} );
+
+		setActualValue( equalValues );
+	};
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId,
+	} );
+
+	return (
+		<>
+			<Grid container alignItems="center" ref={ controlRef }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<EqualValuesControl
+						value={ actualValue }
+						setValue={ setEqualValues }
+						iconButton={
+							<ToggleButton
+								size={ 'tiny' }
+								value={ 'check' }
+								sx={ { marginLeft: 'auto' } }
+								{ ...bindToggle( popupState ) }
+								selected={ popupState.isOpen }
+							>
+								{ icon }
+							</ToggleButton>
+						}
+					/>
+				</Grid>
+			</Grid>
+			<Popover
+				disablePortal
+				disableScrollLock
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				{ ...bindPopover( popupState ) }
+				slotProps={ {
+					paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } },
+				} }
+			>
+				<Stack gap={ 1.5 }>
+					<Grid container spacing={ 2 } alignItems="center">
+						<NestedValueControl item={ items[ 0 ] } value={ actualValue } setNestedProp={ setNestedProp } />
+						<NestedValueControl item={ items[ 1 ] } value={ actualValue } setNestedProp={ setNestedProp } />
+					</Grid>
+					<Grid container spacing={ 2 } alignItems="center">
+						<NestedValueControl item={ items[ 3 ] } value={ actualValue } setNestedProp={ setNestedProp } />
+						<NestedValueControl item={ items[ 2 ] } value={ actualValue } setNestedProp={ setNestedProp } />
+					</Grid>
+				</Stack>
+			</Popover>
+		</>
+	);
+}
+
+const NestedValueControl = < TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > >( {
+	item,
+	value,
+	setNestedProp,
+}: {
+	item: Item< TMultiPropType, TPropValue >;
+	value: TPropValue[ 'value' ] | undefined;
+	setNestedProp: ( item: Item< TMultiPropType, TPropValue >, newValue: PropValue ) => void;
+} ) => {
+	const { bind } = item;
+
+	const nestedValue = value?.[ bind ] ? value[ bind ] : undefined;
+
+	return (
+		<BoundPropProvider bind={ '' } setValue={ ( val ) => setNestedProp( item, val ) } value={ nestedValue }>
+			<Grid item xs={ 6 }>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ item.label }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<SizeControl startIcon={ item.icon } />
+					</Grid>
+				</Grid>
+			</Grid>
+		</BoundPropProvider>
+	);
+};
+
+const EqualValuesControl = <
+	TMultiPropType extends string,
+	TPropValue extends MultiSizePropValue< TMultiPropType >[ 'value' ],
+>( {
+	value,
+	setValue,
+	iconButton,
+}: {
+	value: TPropValue | undefined;
+	setValue: ( newValue: TPropValue ) => void;
+	iconButton: ReactNode;
+} ) => {
+	const values = Object.values( value ?? {} ) as SizeControlValue[];
+	const isMixed = hasMixedSizes( values );
+
+	return (
+		<BoundPropProvider
+			bind={ '' }
+			setValue={ ( val ) => setValue( val as TPropValue ) }
+			value={ isMixed ? undefined : values[ 0 ] }
+		>
+			<Stack direction="row" alignItems="center" gap={ 1 }>
+				<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
+				{ iconButton }
+			</Stack>
+		</BoundPropProvider>
+	);
+};

package/src/controls/{control-types → controls}/image-control.tsx

@@ -1,20 +1,12 @@
 import * as React from 'react';
-import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { ControlContext, useControl } from '../control-context';
-import { type ImageSrc, ImageMediaControl } from './image-media-control';
-import { SettingsControl } from '../settings-control';
-import { PropValue, TransformablePropValue } from '../../types';
+import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { Grid, Stack } from '@elementor/ui';
+import { PropValue, ImagePropValue, SizePropValue, ImageSrcPropValue } from '@elementor/editor-props';
+import { ImageMediaControl } from './image-media-control';
 import { SelectControl } from './select-control';
 import { createControl } from '../create-control';
-
-type Image = TransformablePropValue<
-	'image',
-	{
-		src?: ImageSrc;
-		size?: string;
-	}
->;
+import { ControlLabel } from '../../components/control-label';
 
 type SetContextValue = ( v: PropValue ) => void;
 
@@ -23,24 +15,24 @@ export type ImageControlProps = {
 };
 
 export const ImageControl = createControl( ( props: ImageControlProps ) => {
-	const { value, setValue } = useControl< Image >();
+	const { value, setValue } = useBoundProp< ImagePropValue | undefined >();
 	const { src, size } = value?.value || {};
 
-	const setImageSrc = ( newValue: ImageSrc ) => {
+	const setImageSrc = ( newValue: ImageSrcPropValue ) => {
 		setValue( {
 			$$type: 'image',
 			value: {
 				src: newValue,
-				size,
+				size: size as SizePropValue,
 			},
 		} );
 	};
 
-	const setImageSize = ( newValue: string ) => {
+	const setImageSize = ( newValue: SizePropValue ) => {
 		setValue( {
 			$$type: 'image',
 			value: {
-				src,
+				src: src as ImageSrcPropValue,
 				size: newValue,
 			},
 		} );
@@ -48,19 +40,19 @@ export const ImageControl = createControl( ( props: ImageControlProps ) => {
 
 	return (
 		<Stack gap={ 2 }>
-			<ControlContext.Provider value={ { setValue: setImageSrc as SetContextValue, value: src, bind: 'src' } }>
+			<BoundPropProvider value={ src } setValue={ setImageSrc as SetContextValue } bind={ 'src' }>
 				<ImageMediaControl />
-			</ControlContext.Provider>
-			<ControlContext.Provider value={ { setValue: setImageSize as SetContextValue, value: size, bind: 'size' } }>
+			</BoundPropProvider>
+			<BoundPropProvider value={ size } setValue={ setImageSize as SetContextValue } bind={ 'size' }>
 				<Grid container spacing={ 1 } alignItems="center">
 					<Grid item xs={ 6 }>
-						<SettingsControl.Label> { __( 'Image Resolution', 'elementor' ) }</SettingsControl.Label>
+						<ControlLabel> { __( 'Image Resolution', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 6 }>
 						<SelectControl options={ props.sizes } />
 					</Grid>
 				</Grid>
-			</ControlContext.Provider>
+			</BoundPropProvider>
 		</Stack>
 	);
 } );

package/src/controls/{control-types → controls}/image-media-control.tsx

@@ -1,24 +1,15 @@
 import * as React from 'react';
-import { Button, Card, CardMedia, CardOverlay, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { ImageSrcPropValue } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
+import { Button, Card, CardMedia, CardOverlay, Stack } from '@elementor/ui';
 import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
-import { useControl } from '../control-context';
-import { TransformablePropValue } from '../../types';
-import { __ } from '@wordpress/i18n';
+import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-type ImageAttachmentID = TransformablePropValue< 'image-attachment-id', number >;
-
-type Url = TransformablePropValue< 'url', string >;
-
-export type ImageSrc = TransformablePropValue<
-	'image-src',
-	{ id: ImageAttachmentID; url: null } | { url: Url; id: null }
->;
-
 export const ImageMediaControl = createControl( () => {
-	const { value, setValue } = useControl< ImageSrc >();
+	const { value, setValue } = useBoundProp< ImageSrcPropValue >();
 	const { id, url } = value?.value ?? {};
 
 	const { data: attachment } = useWpMediaAttachment( id?.value || null );

package/src/{components/style-sections/spacing-section → controls/controls}/linked-dimensions-control.tsx

@@ -1,27 +1,17 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Grid, Stack, ToggleButton } from '@elementor/ui';
+import { PropValue, LinkedDimensionsPropValue } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
-import { PropValue, TransformablePropValue } from '../../../types';
-import { SizeControl } from '../../../controls/control-types/size-control';
-import { ControlLabel } from '../../control-label';
-import { ControlContext, useControl } from '../../../controls/control-context';
+import { createControl } from '../create-control';
+import { ControlLabel } from '../../components/control-label';
+import { SizeControl } from './size-control';
+import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
 
 export type Position = 'top' | 'right' | 'bottom' | 'left';
 
-export type LinkedDimensionsValue = TransformablePropValue<
-	'linked-dimensions',
-	{
-		isLinked: boolean;
-		top: PropValue;
-		right: PropValue;
-		bottom: PropValue;
-		left: PropValue;
-	}
->;
-
-export const LinkedDimensionsControl = ( { label }: { label: string } ) => {
-	const { value, setValue } = useControl< LinkedDimensionsValue >();
+export const LinkedDimensionsControl = createControl( ( { label }: { label: string } ) => {
+	const { value, setValue } = useBoundProp< LinkedDimensionsPropValue >();
 	const { top, right, bottom, left, isLinked = true } = value?.value || {};
 
 	const setLinkedValue = ( position: Position, newValue: PropValue ) => {
@@ -130,7 +120,7 @@ export const LinkedDimensionsControl = ( { label }: { label: string } ) => {
 			</Stack>
 		</>
 	);
-};
+} );
 
 const Control = ( {
 	bind,
@@ -143,13 +133,7 @@ const Control = ( {
 	startIcon: React.ReactNode;
 	setValue: ( bind: Position, newValue: PropValue ) => void;
 } ) => (
-	<ControlContext.Provider
-		value={ {
-			bind,
-			setValue: ( newValue ) => setValue( bind, newValue ),
-			value,
-		} }
-	>
+	<BoundPropProvider setValue={ ( newValue ) => setValue( bind, newValue ) } value={ value } bind={ bind }>
 		<SizeControl startIcon={ startIcon } />
-	</ControlContext.Provider>
+	</BoundPropProvider>
 );

package/src/controls/{control-types → controls}/number-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
-import { useControl } from '../control-context';
+import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
@@ -8,7 +8,7 @@ const isEmptyOrNaN = ( value?: string | number ) =>
 	value === undefined || value === '' || Number.isNaN( Number( value ) );
 
 export const NumberControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useControl< number | undefined >();
+	const { value, setValue } = useBoundProp< number | undefined >();
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		const eventValue: string = event.target.value;

package/src/controls/{control-types → controls}/select-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { PropValue } from '@elementor/editor-props';
 import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
-import { useControl } from '../control-context';
-import { PropValue } from '../../types';
+import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
@@ -10,7 +10,7 @@ type Props< T > = {
 };
 
 export const SelectControl = createControl( < T extends PropValue >( { options }: Props< T > ) => {
-	const { value, setValue } = useControl< T >();
+	const { value, setValue } = useBoundProp< T >();
 
 	const handleChange = ( event: SelectChangeEvent< T > ) => {
 		setValue( event.target.value as T );
@@ -18,7 +18,7 @@ export const SelectControl = createControl( < T extends PropValue >( { options }
 
 	return (
 		<ControlActions>
-			<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
+			<Select displayEmpty size="tiny" value={ value ?? '' } onChange={ handleChange } fullWidth>
 				{ options.map( ( { label, ...props } ) => (
 					<MenuItem key={ props.value } { ...props }>
 						{ label }

package/src/controls/{control-types → controls}/size-control.tsx

@@ -1,17 +1,15 @@
 import * as React from 'react';
+import { SizePropValue, TransformablePropValue } from '@elementor/editor-props';
 import { InputAdornment } from '@elementor/ui';
-import { TransformablePropValue } from '../../types';
-import { useControl } from '../control-context';
+import { useBoundProp } from '../bound-prop-context';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
+export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 
-const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];
-
-export type SizeControlValue = TransformablePropValue< 'size', { unit: Unit; size: number } >;
+const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
 
 export type SizeControlProps = {
 	placeholder?: string;
@@ -19,10 +17,12 @@ export type SizeControlProps = {
 	units?: Unit[];
 };
 
+export type SizeControlValue = TransformablePropValue< 'size', { unit: Unit; size: number } >;
+
 export const SizeControl = createControl( ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
-	const { value, setValue } = useControl< SizeControlValue >();
+	const { value, setValue } = useBoundProp< SizePropValue | undefined >();
 
-	const [ state, setState ] = useSyncExternalState< SizeControlValue >( {
+	const [ state, setState ] = useSyncExternalState< SizePropValue >( {
 		external: value,
 		setExternal: setValue,
 		persistWhen: ( controlValue ) => !! controlValue?.value.size || controlValue?.value.size === 0,

package/src/controls/controls/stroke-control.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid, Stack } from '@elementor/ui';
+import { createControl } from '../create-control';
+import { SizeControl, Unit } from './size-control';
+import { ControlLabel } from '../../components/control-label';
+import { ColorControl } from './color-control';
+import { PropValue, StrokePropValue, TransformablePropValue } from '@elementor/editor-props';
+import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+
+type SetContextValue = ( v: PropValue ) => void;
+
+const defaultStrokeControlValue: StrokePropValue = {
+	$$type: 'stroke',
+	value: {
+		color: {
+			$$type: 'color',
+			value: '#000000',
+		},
+		width: {
+			$$type: 'size',
+			value: {
+				unit: 'px',
+				size: NaN,
+			},
+		},
+	},
+};
+
+const units: Unit[] = [ 'px', 'em', 'rem' ];
+
+export const StrokeControl = createControl( () => {
+	const { value, setValue } = useBoundProp< StrokePropValue >( defaultStrokeControlValue );
+
+	const setStrokeWidth = ( newValue: TransformablePropValue< 'size', { unit: Unit; size: number } > ) => {
+		const updatedValue = {
+			...( value?.value ?? defaultStrokeControlValue.value ),
+			width: newValue,
+		};
+
+		setValue( {
+			$$type: 'stroke',
+			value: updatedValue,
+		} );
+	};
+
+	const setStrokeColor = ( newValue: TransformablePropValue< 'color', string > ) => {
+		const updatedValue = {
+			...( value?.value ?? defaultStrokeControlValue.value ),
+			color: newValue,
+		};
+
+		setValue( {
+			$$type: 'stroke',
+			value: updatedValue,
+		} );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<Control
+				bind="width"
+				label={ __( 'Stroke Width', 'elementor' ) }
+				value={ value?.value.width ?? defaultStrokeControlValue.value.width }
+				setValue={ setStrokeWidth }
+			>
+				<SizeControl units={ units } />
+			</Control>
+
+			<Control
+				bind="color"
+				label={ __( 'Stroke Color', 'elementor' ) }
+				value={ value?.value.color ?? defaultStrokeControlValue.value.color }
+				setValue={ setStrokeColor }
+			>
+				<ColorControl />
+			</Control>
+		</Stack>
+	);
+} );
+
+const Control = < T extends PropValue >( {
+	bind,
+	value,
+	setValue,
+	label,
+	children,
+}: {
+	bind: string;
+	value: T;
+	setValue: ( v: T ) => void;
+	label: string;
+	children: React.ReactNode;
+} ) => (
+	<BoundPropProvider bind={ bind } value={ value } setValue={ setValue as SetContextValue }>
+		<Grid container spacing={ 1 } alignItems="center">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ label }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				{ children }
+			</Grid>
+		</Grid>
+	</BoundPropProvider>
+);

package/src/controls/{control-types → controls}/text-area-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
-import { useControl } from '../control-context';
+import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
@@ -9,14 +9,14 @@ type Props = {
 };
 
 export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
-	const { value, setValue } = useControl< string >();
+	const { value, setValue } = useBoundProp< string >();
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.value );
 	};
 
 	return (
-		<ControlActions fullWidth>
+		<ControlActions>
 			<TextField
 				size="tiny"
 				multiline

package/src/controls/{control-types → controls}/text-control.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
-import { useControl } from '../control-context';
+import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useControl< string >( '' );
+	const { value, setValue } = useBoundProp< string >( '' );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
 	return (
-		<ControlActions fullWidth>
+		<ControlActions>
 			<TextField type="text" size="tiny" value={ value } onChange={ handleChange } placeholder={ placeholder } />
 		</ControlActions>
 	);

package/src/controls/{control-types → controls}/toggle-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useControl } from '../control-context';
+import { useBoundProp } from '../bound-prop-context';
 import { ControlToggleButtonGroup, ToggleButtonGroupItem } from '../components/control-toggle-button-group';
-import { PropValue } from '../../types';
+import { PropValue } from '@elementor/editor-props';
 import { createControl } from '../create-control';
 
 type ToggleControlProps< T extends PropValue > = {
@@ -9,10 +9,10 @@ type ToggleControlProps< T extends PropValue > = {
 };
 
 export const ToggleControl = createControl( < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
-	const { value, setValue } = useControl< T >();
+	const { value, setValue } = useBoundProp< T | null >();
 
 	const handleToggle = ( option: T | null ) => {
-		setValue( option || undefined );
+		setValue( option );
 	};
 
 	return (

package/src/controls/create-control-replacement.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ComponentType, createContext, useContext } from 'react';
+import { useBoundProp } from './bound-prop-context';
+import { PropValue } from '@elementor/editor-props';
+
+export type ReplaceWhenParams = {
+	value: PropValue;
+};
+
+export 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 };
+};