@elementor/editor-editing-panel 0.18.0 → 1.0.0

package/src/controls/create-control.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ComponentProps, ComponentType } from 'react';
-import { useControlReplacement } from './control-replacement';
+import { useControlReplacement } from './create-control-replacement';
+import { ErrorBoundary } from '@elementor/ui';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyComponentType = ComponentType< any >;
@@ -23,9 +24,17 @@ export function createControl< T extends AnyComponentType >(
 		const ControlReplacement = useControlReplacement();
 
 		if ( ControlReplacement && supportsReplacements ) {
-			return <ControlReplacement { ...props } />;
+			return (
+				<ErrorBoundary fallback={ null }>
+					<ControlReplacement { ...props } />
+				</ErrorBoundary>
+			);
 		}
 
-		return <Component { ...props } />;
+		return (
+			<ErrorBoundary fallback={ null }>
+				<Component { ...props } />
+			</ErrorBoundary>
+		);
 	} ) as ControlComponent< T >;
 }

package/src/controls/index.ts

@@ -0,0 +1,24 @@
+// control types
+export { ImageControl } from './controls/image-control';
+export { TextControl } from './controls/text-control';
+export { TextAreaControl } from './controls/text-area-control';
+export { SizeControl } from './controls/size-control';
+export { StrokeControl } from './controls/stroke-control';
+export { BoxShadowRepeaterControl } from './controls/box-shadow-repeater-control';
+export { SelectControl } from './controls/select-control';
+export { ColorControl } from './controls/color-control';
+export { ToggleControl } from './controls/toggle-control';
+export { NumberControl } from './controls/number-control';
+
+// types
+export type { ControlComponent } from './create-control';
+export type { ToggleButtonGroupItem } from './components/control-toggle-button-group';
+export type { SizeControlValue } from './controls/size-control';
+
+// Providers
+export { ControlActionsProvider } from './control-actions/control-actions-context';
+export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';
+export { useBoundProp, BoundPropProvider } from './bound-prop-context';
+
+// utils
+export { createControlActionsMenu } from './control-actions/control-actions-menu';

package/src/controls-actions.ts

@@ -0,0 +1,8 @@
+import { createControlActionsMenu } from './controls';
+import PopoverAction from './popover-action';
+
+export const { useMenuItems, registerPopoverAction } = createControlActionsMenu( {
+	components: {
+		PopoverAction,
+	},
+} );

package/src/{controls/components → controls-registry}/control-type-container.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box, BoxProps } from '@elementor/ui';
-import { ControlLayout, ControlType, getLayoutByType } from '../controls-registry';
+import { ControlLayout, ControlType, getLayoutByType } from './controls-registry';
 
 export const ControlTypeContainer = ( {
 	controlType,

package/src/{controls → controls-registry}/controls-registry.tsx

@@ -1,9 +1,4 @@
-import { ImageControl } from './control-types/image-control';
-import { TextControl } from './control-types/text-control';
-import { TextAreaControl } from './control-types/text-area-control';
-import { SizeControl } from './control-types/size-control';
-import { SelectControl } from './control-types/select-control';
-import { ControlComponent } from './create-control';
+import { ControlComponent, ImageControl, SelectControl, SizeControl, TextAreaControl, TextControl } from '../controls';
 
 export type ControlLayout = 'full' | 'two-columns';
 

package/src/controls-registry/settings-field.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { PropKey, PropValue } from '@elementor/editor-props';
+import { useElementSetting, updateSettings } from '@elementor/editor-elements';
+import { useElement } from '../contexts/element-context';
+import { BoundPropProvider } from '../controls';
+
+type Props = {
+	bind: PropKey;
+	children: React.ReactNode;
+};
+
+const SettingsField = ( { bind, children }: Props ) => {
+	const { element, elementType } = useElement();
+
+	const defaultValue = elementType.propsSchema[ bind ]?.default;
+	const settingsValue = useElementSetting( { id: element.id, bind } );
+	const value = settingsValue ?? defaultValue ?? null;
+
+	const setValue = ( newValue: PropValue ) => {
+		updateSettings( {
+			id: element.id,
+			props: {
+				[ bind ]: newValue,
+			},
+		} );
+	};
+
+	return (
+		<BoundPropProvider setValue={ setValue } value={ value } bind={ bind }>
+			{ children }
+		</BoundPropProvider>
+	);
+};
+
+export { SettingsField };

package/src/controls-registry/styles-field.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PropKey } from '@elementor/editor-props';
+import { useStylesField } from '../hooks/use-styles-field';
+import { BoundPropProvider } from '../controls';
+
+export type StylesFieldProps = {
+	bind: PropKey;
+	children: React.ReactNode;
+};
+
+export const StylesField = ( { bind, children }: StylesFieldProps ) => {
+	const [ value, setValue ] = useStylesField( bind );
+
+	return (
+		<BoundPropProvider setValue={ setValue } value={ value } bind={ bind }>
+			{ children }
+		</BoundPropProvider>
+	);
+};

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -1,15 +1,8 @@
 import * as React from 'react';
 import { useId } from 'react';
-import { useControl } from '../../controls/control-context';
-import { DynamicPropValue, DynamicTag } from '../types';
-import { DynamicControl } from '../dynamic-control';
+import { __ } from '@wordpress/i18n';
+import type { Control, ControlsSection } from '@elementor/editor-elements';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
-import type { Control, ControlsSection } from '../../types';
-import { DynamicSelection } from './dynamic-selection';
-import { ControlType, getControlByType } from '../../controls/controls-registry';
-import { ControlLabel } from '../../components/control-label';
-import { Control as BaseControl } from '../../controls/control';
-import { useDynamicTag } from '../hooks/use-dynamic-tag';
 import {
 	bindPopover,
 	bindTrigger,
@@ -27,13 +20,20 @@ import {
 	Tab,
 	TabPanel,
 } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { useBoundProp } from '../../controls';
+import { DynamicPropValue, DynamicTag } from '../types';
+import { DynamicControl } from '../dynamic-control';
+import { DynamicSelection } from './dynamic-selection';
+import { ControlLabel } from '../../components/control-label';
+import { Control as BaseControl } from '../../controls-registry/control';
+import { useDynamicTag } from '../hooks/use-dynamic-tag';
 import { usePropValueHistory } from '../hooks/use-prop-value-history';
+import { ControlType, getControlByType } from '../../controls-registry/controls-registry';
 
 const SIZE = 'tiny';
 
 export const DynamicSelectionControl = () => {
-	const { bind, value, setValue } = useControl< DynamicPropValue | null >();
+	const { bind, value, setValue } = useBoundProp< DynamicPropValue | null >();
 	const [ propValueFromHistory ] = usePropValueHistory( bind );
 	const { name: tagName = '' } = value?.value || {};
 

package/src/dynamics/components/dynamic-selection.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { useState, Fragment } from 'react';
-import { useControl } from '../../controls/control-context';
-import { DynamicPropValue } from '../types';
-import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
-import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { PropKey, PropValue } from '@elementor/editor-props';
 import { SearchIcon, PhotoIcon } from '@elementor/icons';
 import {
 	Box,
@@ -18,9 +15,12 @@ import {
 	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { PropKey, PropValue } from '../../types';
+import { useBoundProp } from '../../controls';
+import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
+import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { isDynamicPropValue } from '../utils';
 import { usePropValueHistory } from '../hooks/use-prop-value-history';
+import { DynamicPropValue } from '../types';
 
 type Option = {
 	label: string;
@@ -38,7 +38,7 @@ export type DynamicSelectionProps = {
 export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-	const { bind, value: currentValue, setValue } = useControl< DynamicPropValue | PropValue >();
+	const { bind, value: currentValue, setValue } = useBoundProp< DynamicPropValue | PropValue >();
 	const [ , updatePropValueHistory ] = usePropValueHistory( bind );
 
 	const isCurrentValueDynamic = isDynamicPropValue( currentValue );

package/src/dynamics/dynamic-control.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
-import { ControlContext, useControl } from '../controls/control-context';
-import { PropKey, PropValue } from '../types';
+import { useBoundProp } from '../controls';
+import { PropKey, PropValue } from '@elementor/editor-props';
 import { useDynamicTag } from './hooks/use-dynamic-tag';
 import { DynamicPropValue } from './types';
+import { BoundPropProvider } from '../controls/bound-prop-context';
 
 export type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;
 } >;
 
 export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
-	const { value, setValue, bind: propName } = useControl< DynamicPropValue >();
+	const { value, setValue, bind: propName } = useBoundProp< DynamicPropValue >();
 	const { name = '', settings } = value?.value ?? {};
 
 	const dynamicTag = useDynamicTag( propName, name );
@@ -35,8 +36,8 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 	};
 
 	return (
-		<ControlContext.Provider value={ { setValue: setDynamicValue, value: dynamicValue, bind } }>
+		<BoundPropProvider setValue={ setDynamicValue } value={ dynamicValue } bind={ bind }>
 			{ children }
-		</ControlContext.Provider>
+		</BoundPropProvider>
 	);
 };

package/src/dynamics/hooks/use-dynamic-tag.ts

@@ -1,7 +1,7 @@
+import { useMemo } from 'react';
+import { PropKey } from '@elementor/editor-props';
 import { usePropDynamicTags } from './use-prop-dynamic-tags';
 import { DynamicTag } from '../types';
-import { PropKey } from '../../types';
-import { useMemo } from 'react';
 
 export const useDynamicTag = ( propName: PropKey, tagName: string ): DynamicTag | null => {
 	const dynamicTags = usePropDynamicTags( propName );

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useElementContext } from '../../contexts/element-context';
+import { __ } from '@wordpress/i18n';
+import { DatabaseIcon } from '@elementor/icons';
 import { supportsDynamic } from '../utils';
 import { DynamicSelection } from '../components/dynamic-selection';
-import { DatabaseIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-import { useControl } from '../../controls/control-context';
-import { PopoverActionProps } from '../../controls/control-actions/actions/popover-action';
+import { useBoundProp } from '../../controls';
+import { PopoverActionProps } from '../../popover-action';
+import { useElement } from '../../contexts/element-context';
 
 export const usePropDynamicAction = (): PopoverActionProps => {
-	const { bind } = useControl();
-	const { elementType } = useElementContext();
+	const { bind } = useBoundProp();
+	const { elementType } = useElement();
 
 	const propType = elementType.propsSchema[ bind ];
 	const visible = !! propType && supportsDynamic( propType );

package/src/dynamics/hooks/use-prop-dynamic-tags.ts

@@ -1,13 +1,13 @@
 import { useMemo } from 'react';
-import { useElementContext } from '../../contexts/element-context';
+import { PropKey } from '@elementor/editor-props';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
-import { PropKey } from '../../types';
+import { useElement } from '../../contexts/element-context';
 import { getDynamicPropType } from '../utils';
 
 export const usePropDynamicTags = ( propName: PropKey ) => {
 	let categories: string[] = [];
 
-	const { elementType } = useElementContext();
+	const { elementType } = useElement();
 
 	const propType = elementType.propsSchema?.[ propName ];
 

package/src/dynamics/hooks/use-prop-value-history.ts

@@ -1,11 +1,11 @@
-import { useElementContext } from '../../contexts/element-context';
-import { PropValue } from '../../types';
+import { PropValue } from '@elementor/editor-props';
+import { useElement } from '../../contexts/element-context';
 
 export const PROPS_VALUES_HISTORY_KEY = 'elementor/dynamic/non-dynamic-values-history';
 
 export const usePropValueHistory = ( path: string ) => {
 	const valuesHistory = getValues();
-	const { element } = useElementContext();
+	const { element } = useElement();
 	const key = `${ element.id }-${ path }`;
 
 	const value = valuesHistory[ key ] ?? null;

package/src/dynamics/init.ts

@@ -1,10 +1,8 @@
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
-import { replaceControl } from '../controls/control-replacement';
 import { isDynamicPropValue } from './utils';
 import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
-import { controlActionsMenu } from '../controls/control-actions/control-actions-menu';
-
-const { registerPopoverAction } = controlActionsMenu;
+import { replaceControl } from '../control-replacement';
+import { registerPopoverAction } from '../controls-actions';
 
 export const init = () => {
 	replaceControl( {

package/src/dynamics/types.ts

@@ -1,4 +1,5 @@
-import { ControlItem, PropsSchema, TransformablePropType, TransformablePropValue } from '../types';
+import { TransformablePropType, TransformablePropValue } from '@elementor/editor-props';
+import { ControlItem, PropsSchema } from '@elementor/editor-elements';
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/dynamics/utils.ts

@@ -1,6 +1,5 @@
-import { PropType, PropValue, TransformablePropType } from '../types';
+import { isTransformable, PropType, PropValue, TransformablePropType } from '@elementor/editor-props';
 import { DynamicPropType, DynamicPropValue } from './types';
-import { isTransformable } from '../props/is-transformable';
 
 const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 

package/src/hooks/use-styles-field.ts

@@ -0,0 +1,30 @@
+import type { PropKey, PropValue } from '@elementor/editor-props';
+import { useElementStyleProp, updateStyle } from '@elementor/editor-elements';
+import { useStyle } from '../contexts/style-context';
+import { useClassesProp } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
+
+export const useStylesField = < T extends PropValue >( propName: PropKey ) => {
+	const { element } = useElement();
+	const { id, meta } = useStyle();
+	const classesProp = useClassesProp();
+
+	const value = useElementStyleProp< T >( {
+		elementID: element.id,
+		styleDefID: id,
+		meta,
+		propName,
+	} );
+
+	const setValue = ( newValue: T ) => {
+		updateStyle( {
+			elementID: element.id,
+			styleDefID: id,
+			props: { [ propName ]: newValue },
+			meta,
+			bind: classesProp,
+		} );
+	};
+
+	return [ value, setValue ] as const;
+};

package/src/index.ts

@@ -1,7 +1,6 @@
-export type { PopoverActionProps } from './controls/control-actions/actions/popover-action';
-export { replaceControl } from './controls/control-replacement';
-export { useControl } from './controls/control-context';
-export { controlActionsMenu } from './controls/control-actions/control-actions-menu';
+export type { PopoverActionProps } from './popover-action';
+export { replaceControl } from './control-replacement';
+export { useBoundProp } from './controls';
 
 import init from './init';
 

package/src/sync/should-use-v2-panel.ts

@@ -1,5 +1,4 @@
-import getSelectedElements from './get-selected-elements';
-import getWidgetsCache from './get-widgets-cache';
+import { getSelectedElements, getWidgetsCache } from '@elementor/editor-elements';
 
 export const shouldUseV2Panel = () => {
 	const selectedElements = getSelectedElements();

package/src/sync/types.ts

@@ -1,5 +1,6 @@
-import { ControlItem, PropsSchema, PropValue } from '../types';
-import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-style';
+import { ControlItem, PropsSchema } from '@elementor/editor-elements';
+import { PropValue } from '@elementor/editor-props';
+import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-styles';
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/components/style-sections/position-section/z-index-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { NumberControl } from '../../../controls/control-types/number-control';
-
-export const ZIndexControl = () => {
-	return (
-		<StyleControl bind="z-index">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Z-Index', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<NumberControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/size-section.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { AccordionSection } from '../accordion-section';
-import { StyleControl, StyleControlProps } from '../../controls/style-control';
-import { Grid, Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-import { Control as BaseControl } from '../../controls/control';
-
-export const SizeSection = () => {
-	return (
-		<AccordionSection title={ __( 'Size', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<Grid container spacing={ 2 }>
-					<Control bind="width" label={ __( 'Width', 'elementor' ) } />
-					<Control bind="height" label={ __( 'Height', 'elementor' ) } />
-				</Grid>
-				<Grid container spacing={ 2 }>
-					<Control bind="min-width" label={ __( 'Min. Width', 'elementor' ) } />
-					<Control bind="min-height" label={ __( 'Min. Height', 'elementor' ) } />
-				</Grid>
-				<Grid container spacing={ 2 }>
-					<Control bind="max-width" label={ __( 'Max. Width', 'elementor' ) } />
-					<Control bind="max-height" label={ __( 'Max. Height', 'elementor' ) } />
-				</Grid>
-			</Stack>
-		</AccordionSection>
-	);
-};
-
-type ControlProps = {
-	bind: StyleControlProps[ 'bind' ];
-	label: string;
-};
-
-const Control = ( { label, bind }: ControlProps ) => {
-	return (
-		<Grid item xs={ 6 }>
-			<StyleControl bind={ bind }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<StyleControl.Label>{ label }</StyleControl.Label>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<BaseControl type={ 'size' } />
-					</Grid>
-				</Grid>
-			</StyleControl>
-		</Grid>
-	);
-};

package/src/components/style-sections/typography-section/font-size-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { SizeControl } from '../../../controls/control-types/size-control';
-
-export const FontSizeControl = () => {
-	return (
-		<StyleControl bind="font-size">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Font Size', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/typography-section/letter-spacing-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { SizeControl } from '../../../controls/control-types/size-control';
-
-export const LetterSpacingControl = () => {
-	return (
-		<StyleControl bind="letter-spacing">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Letter Spacing', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/typography-section/text-color-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { ColorControl } from '../../../controls/control-types/color-control';
-
-export const TextColorControl = () => {
-	return (
-		<StyleControl bind="color">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Text Color', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<ColorControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/typography-section/word-spacing-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { SizeControl } from '../../../controls/control-types/size-control';
-
-export const WordSpacingControl = () => {
-	return (
-		<StyleControl bind="word-spacing">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Word Spacing', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/controls/control-context.tsx

@@ -1,22 +0,0 @@
-import { createContext, useContext } from 'react';
-import { PropKey, PropValue } from '../types';
-
-export type ControlContext< T extends PropValue > = {
-	bind: PropKey;
-	setValue: ( value: T | undefined ) => void;
-	value: T | undefined;
-};
-
-export const ControlContext = createContext< ControlContext< PropValue > | null >( null );
-
-export function useControl< T extends PropValue >(): ControlContext< T | undefined >;
-export function useControl< T extends PropValue >( defaultValue: T ): ControlContext< T >;
-export function useControl< T extends PropValue >( defaultValue?: T ) {
-	const controlContext = useContext< ControlContext< T > >( ControlContext as never );
-
-	if ( ! controlContext ) {
-		throw new Error( 'useControl must be used within a ControlContext' );
-	}
-
-	return { ...controlContext, value: controlContext.value ?? defaultValue };
-}

package/src/controls/control-replacement.ts

@@ -1,34 +0,0 @@
-import { PropValue } from '../types';
-import { ComponentType } from 'react';
-import { useControl } from './control-context';
-
-type ReplaceWhenParams = {
-	value: PropValue;
-};
-
-type ControlReplacement = {
-	component: ComponentType;
-	condition: ( { value }: ReplaceWhenParams ) => boolean;
-};
-
-let controlReplacement: ControlReplacement | undefined;
-
-const getControlReplacement = ( { value }: ReplaceWhenParams ) => {
-	let shouldReplace = false;
-
-	try {
-		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement?.component;
-	} catch {}
-
-	return shouldReplace ? controlReplacement?.component : undefined;
-};
-
-export function replaceControl( { component, condition }: ControlReplacement ) {
-	controlReplacement = { component, condition };
-}
-
-export function useControlReplacement() {
-	const { value } = useControl();
-
-	return getControlReplacement( { value } );
-}