@elementor/editor-controls 1.3.0 → 3.32.0-20

package/src/controls/filter-repeater-control.tsx

@@ -1,67 +1,172 @@
 import * as React from 'react';
 import { useRef } from 'react';
 import {
-	blurFilterPropTypeUtil,
-	brightnessFilterPropTypeUtil,
+	type CreateOptions,
+	cssFilterFunctionPropUtil,
 	type FilterItemPropValue,
 	filterPropTypeUtil,
 	type PropKey,
-	type PropTypeUtil,
 	type SizePropValue,
 } from '@elementor/editor-props';
-import { MenuListItem } from '@elementor/editor-ui';
-import { Box, Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { backdropFilterPropTypeUtil } from '@elementor/editor-props';
+import { Box, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlLabel } from '../components/control-label';
+import { ControlFormLabel } from '../components/control-form-label';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
-import { Repeater } from '../components/repeater';
+import { type CollectionPropUtil, Repeater } from '../components/repeater';
 import { createControl } from '../create-control';
-import { defaultUnits } from '../utils/size-control';
-import { SizeControl } from './size-control';
+import { type LengthUnit, lengthUnits, type Unit } from '../utils/size-control';
+import { DropShadowItemContent } from './filter-control/drop-shadow-item-content';
+import { DropShadowItemLabel } from './filter-control/drop-shadow-item-label';
+import { SelectControl } from './select-control';
+import { SizeControl, type SizeControlProps } from './size-control';
 
-type FilterType = FilterItemPropValue[ '$$type' ];
-type FilterValue = FilterItemPropValue[ 'value' ];
+type FilterType = FilterItemPropValue[ 'value' ][ 'func' ];
 
-const DEFAULT_FILTER_KEY: FilterType = 'blur';
+const DEFAULT_FILTER = 'blur';
 
 type FilterItemConfig = {
-	defaultValue: FilterValue;
+	defaultValue: FilterItemPropValue;
 	name: string;
 	valueName: string;
-	propType: PropTypeUtil< FilterValue, FilterValue >;
 	units?: Exclude< SizePropValue[ 'value' ][ 'unit' ], 'custom' | 'auto' >[];
+	sizeVariant?: SizeControlProps[ 'variant' ];
 };
 
-const filterConfig: Record< FilterType, FilterItemConfig > = {
+const filterConfig: Record< string, FilterItemConfig > = {
 	blur: {
-		defaultValue: { $$type: 'radius', radius: { $$type: 'size', value: { size: 0, unit: 'px' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'blur' },
+				args: { $$type: 'size', value: { size: 0, unit: 'px' } },
+			},
+		},
 		name: __( 'Blur', 'elementor' ),
 		valueName: __( 'Radius', 'elementor' ),
-		propType: blurFilterPropTypeUtil,
-		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
+		units: lengthUnits.filter( ( unit ) => unit !== '%' ),
 	},
 	brightness: {
-		defaultValue: { $$type: 'amount', amount: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'brightness' },
+				args: { $$type: 'size', value: { size: 100, unit: '%' } },
+			},
+		},
 		name: __( 'Brightness', 'elementor' ),
 		valueName: __( 'Amount', 'elementor' ),
-		propType: brightnessFilterPropTypeUtil,
 		units: [ '%' ],
 	},
+	contrast: {
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'contrast' },
+				args: { $$type: 'size', value: { size: 100, unit: '%' } },
+			},
+		},
+		name: __( 'Contrast', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		units: [ '%' ],
+	},
+	'hue-rotate': {
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'hue-rotate' },
+				args: { $$type: 'size', value: { size: 0, unit: 'deg' } },
+			},
+		},
+		name: __( 'Hue Rotate', 'elementor' ),
+		valueName: __( 'Angle', 'elementor' ),
+		units: [ 'deg', 'rad', 'grad', 'turn' ],
+	},
+	saturate: {
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'saturate' },
+				args: { $$type: 'size', value: { size: 100, unit: '%' } },
+			},
+		},
+		name: __( 'Saturate', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		units: [ '%' ],
+	},
+	grayscale: {
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'grayscale' },
+				args: { $$type: 'size', value: { size: 0, unit: '%' } },
+			},
+		},
+		name: __( 'Grayscale', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		units: [ '%' ],
+	},
+	invert: {
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'invert' },
+				args: { $$type: 'size', value: { size: 0, unit: '%' } },
+			},
+		},
+		name: __( 'Invert', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		units: [ '%' ],
+	},
+	sepia: {
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'sepia' },
+				args: { $$type: 'size', value: { size: 0, unit: '%' } },
+			},
+		},
+		name: __( 'Sepia', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		units: [ '%' ],
+	},
+	'drop-shadow': {
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'drop-shadow' },
+				args: {
+					$$type: 'drop-shadow',
+					value: {
+						xAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
+						yAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
+						blur: { $$type: 'size', value: { size: 10, unit: 'px' } },
+						color: { $$type: 'color', value: 'rgba(0, 0, 0, 1)' },
+					},
+				},
+			},
+		},
+		name: __( 'Drop shadow', 'elementor' ),
+		valueName: __( 'Drop-shadow', 'elementor' ),
+		units: lengthUnits.filter( ( unit ) => unit !== '%' ),
+	},
 };
 
-const filterKeys = Object.keys( filterConfig ) as FilterType[];
-
-const singleSizeFilterNames = filterKeys.filter( ( name ) => {
-	const filter = filterConfig[ name as FilterType ].defaultValue;
+const filterKeys = Object.keys( filterConfig );
 
-	return filter[ filter.$$type ].$$type === 'size';
-} ) as FilterType[];
+const isSingleSize = ( key: string ): boolean => {
+	return ! [ 'drop-shadow' ].includes( key );
+};
 
-export const FilterRepeaterControl = createControl( () => {
-	const { propType, value: filterValues, setValue, disabled } = useBoundProp( filterPropTypeUtil );
+export const FilterRepeaterControl = createControl( ( { filterPropName = 'filter' }: { filterPropName?: string } ) => {
+	const [ propUtil, label ] =
+		filterPropName === 'backdrop-filter'
+			? [ backdropFilterPropTypeUtil, __( 'Backdrop Filters', 'elementor' ) ]
+			: [ filterPropTypeUtil, __( 'Filters', 'elementor' ) ];
+	const { propType, value: filterValues, setValue, disabled } = useBoundProp( propUtil );
 
 	return (
 		<PropProvider propType={ propType } value={ filterValues } setValue={ setValue }>
@@ -70,15 +175,13 @@ export const FilterRepeaterControl = createControl( () => {
 				disabled={ disabled }
 				values={ filterValues ?? [] }
 				setValues={ setValue }
-				label={ __( 'Filter', 'elementor' ) }
+				label={ label }
+				collectionPropUtil={ propUtil }
 				itemSettings={ {
 					Icon: ItemIcon,
 					Label: ItemLabel,
 					Content: ItemContent,
-					initialValues: {
-						$$type: DEFAULT_FILTER_KEY,
-						value: filterConfig[ DEFAULT_FILTER_KEY ].defaultValue,
-					} as FilterItemPropValue,
+					initialValues: filterConfig[ DEFAULT_FILTER ].defaultValue,
 				} }
 			/>
 		</PropProvider>
@@ -87,21 +190,23 @@ export const FilterRepeaterControl = createControl( () => {
 
 const ItemIcon = () => <></>;
 
-const ItemLabel = ( props: { value: FilterItemPropValue } ) => {
-	const { $$type } = props.value;
-
-	return singleSizeFilterNames.includes( $$type ) && <SingleSizeItemLabel value={ props.value } />;
+const ItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	return isSingleSize( value.value.func.value ?? '' ) ? (
+		<SingleSizeItemLabel value={ value } />
+	) : (
+		<DropShadowItemLabel value={ value } />
+	);
 };
 
 const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
-	const { $$type, value: sizeValue } = value;
-	const { $$type: key } = filterConfig[ $$type ].defaultValue;
-	const defaultUnit = filterConfig[ $$type ].defaultValue[ key ].value.unit;
-	const { unit, size } = sizeValue[ key ]?.value ?? { unit: defaultUnit, size: 0 };
+	const { func, args } = value.value;
+	const defaultUnit =
+		( filterConfig[ func.value ?? '' ].defaultValue.value.args as SizePropValue ).value.unit ?? lengthUnits[ 0 ];
+	const { unit, size } = ( args as SizePropValue ).value ?? { unit: defaultUnit, size: 0 };
 
 	const label = (
 		<Box component="span" style={ { textTransform: 'capitalize' } }>
-			{ value.$$type }:
+			{ func.value ?? '' }:
 		</Box>
 	);
 
@@ -113,74 +218,95 @@ const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
 	);
 };
 
-const ItemContent = ( { bind }: { bind: PropKey } ) => {
-	const { value: filterValues, setValue } = useBoundProp( filterPropTypeUtil );
+const ItemContent = ( {
+	bind,
+	collectionPropUtil,
+	anchorEl,
+}: {
+	bind: PropKey;
+	collectionPropUtil?: CollectionPropUtil< FilterItemPropValue >;
+	anchorEl?: HTMLElement | null;
+} ) => {
+	const { value: filterValues = [] } = useBoundProp( collectionPropUtil ?? filterPropTypeUtil );
 	const itemIndex = parseInt( bind, 10 );
 	const item = filterValues?.[ itemIndex ];
+	return item ? (
+		<PropKeyProvider bind={ bind }>
+			<PropContent item={ item } anchorEl={ anchorEl } />
+		</PropKeyProvider>
+	) : null;
+};
 
-	const handleChange = ( e: SelectChangeEvent< string > ) => {
-		const newFilterValues = [ ...filterValues ];
-		const filterType = e.target.value as FilterType;
+const PropContent = ( { item, anchorEl }: { item: FilterItemPropValue; anchorEl?: HTMLElement | null } ) => {
+	const propContext = useBoundProp( cssFilterFunctionPropUtil );
 
-		newFilterValues[ itemIndex ] = {
-			$$type: filterType,
-			value: filterConfig[ filterType ].defaultValue,
-		} as FilterItemPropValue;
+	const handleValueChange = (
+		changedValue: FilterItemPropValue[ 'value' ],
+		options?: CreateOptions,
+		meta?: { bind?: PropKey }
+	) => {
+		let newValue = structuredClone( changedValue );
+		const newFuncName = newValue?.func.value ?? '';
+		if ( meta?.bind === 'func' ) {
+			newValue = structuredClone( filterConfig[ newFuncName ].defaultValue.value );
+		}
 
-		setValue( newFilterValues );
+		if ( ! newValue.args ) {
+			return;
+		}
+		propContext.setValue( newValue );
 	};
 
 	return (
-		<PropKeyProvider bind={ bind }>
+		<PropProvider { ...propContext } setValue={ handleValueChange }>
 			<PopoverContent p={ 1.5 }>
 				<PopoverGridContainer>
 					<Grid item xs={ 6 }>
-						<ControlLabel>{ __( 'Filter', 'elementor' ) }</ControlLabel>
+						<ControlFormLabel>{ __( 'Filter', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 6 }>
-						<Select
-							sx={ { overflow: 'hidden' } }
-							size="tiny"
-							value={ item?.$$type ?? DEFAULT_FILTER_KEY }
-							onChange={ handleChange }
-							fullWidth
-						>
-							{ filterKeys.map( ( filterKey ) => (
-								<MenuListItem key={ filterKey } value={ filterKey }>
-									{ filterConfig[ filterKey ].name }
-								</MenuListItem>
-							) ) }
-						</Select>
+						<PropKeyProvider bind="func">
+							<SelectControl
+								options={ filterKeys.map( ( filterKey ) => ( {
+									label: filterConfig[ filterKey ].name,
+									value: filterKey,
+								} ) ) }
+							/>
+						</PropKeyProvider>
 					</Grid>
 				</PopoverGridContainer>
-				<Content filterType={ item?.$$type } />
+				<PropKeyProvider bind="args">
+					<Content filterType={ item?.value.func } anchorEl={ anchorEl } />
+				</PropKeyProvider>
 			</PopoverContent>
-		</PropKeyProvider>
+		</PropProvider>
 	);
 };
 
-const Content = ( { filterType }: { filterType: FilterType } ) => {
-	return singleSizeFilterNames.includes( filterType ) && <SingleSizeItemContent filterType={ filterType } />;
+const Content = ( { filterType, anchorEl }: { filterType: FilterType; anchorEl?: HTMLElement | null } ) => {
+	const filterName = filterType?.value || DEFAULT_FILTER;
+	const filterItemConfig = filterConfig[ filterName ];
+	const { units = [] } = filterItemConfig;
+
+	return isSingleSize( filterName ) ? (
+		<SingleSizeItemContent filterType={ filterName } />
+	) : (
+		<DropShadowItemContent units={ units as LengthUnit[] } anchorEl={ anchorEl } />
+	);
 };
 
-const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) => {
-	const { propType, valueName, defaultValue, units } = filterConfig[ filterType ];
-	const { $$type } = defaultValue;
-	const context = useBoundProp( propType );
+const SingleSizeItemContent = ( { filterType }: { filterType: string } ) => {
+	const { valueName, defaultValue, units } = filterConfig[ filterType ];
 	const rowRef = useRef< HTMLDivElement >( null );
-
+	const defaultUnit = ( defaultValue.value.args as SizePropValue ).value.unit;
 	return (
-		<PropProvider { ...context }>
-			<PropKeyProvider bind={ $$type }>
-				<PopoverGridContainer ref={ rowRef }>
-					<Grid item xs={ 6 }>
-						<ControlLabel>{ valueName }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 }>
-						<SizeControl anchorRef={ rowRef } units={ units } />
-					</Grid>
-				</PopoverGridContainer>
-			</PropKeyProvider>
-		</PropProvider>
+		<PopoverGridContainer ref={ rowRef }>
+			<Grid item xs={ 6 }>
+				<ControlFormLabel>{ valueName }</ControlFormLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				<SizeControl anchorRef={ rowRef } units={ units as LengthUnit[] } defaultUnit={ defaultUnit as Unit } />
+			</Grid>
+		</PopoverGridContainer>
 	);
 };

package/src/controls/font-family-control/font-family-control.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ChevronDownIcon } from '@elementor/icons';
+import { ChevronDownIcon, TextIcon } from '@elementor/icons';
 import { bindPopover, bindTrigger, Popover, UnstableTag, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../../bound-prop-context';
-import { FontFamilySelector } from '../../components/font-family-selector';
+import { ItemSelector } from '../../components/item-selector';
+import { type Category } from '../../components/item-selector';
 import ControlActions from '../../control-actions/control-actions';
 import { createControl } from '../../create-control';
+import { enqueueFont } from './enqueue-font';
 
 export type FontCategory = {
 	label: string;
@@ -18,22 +21,26 @@ type FontFamilyControlProps = {
 	sectionWidth: number;
 };
 
-const SIZE = 'tiny';
-
 export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }: FontFamilyControlProps ) => {
 	const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
-
 	const isShowingPlaceholder = ! fontFamily && placeholder;
 
+	const mapFontSubs = React.useMemo< Category[] >( () => {
+		return fontFamilies.map( ( { label, fonts } ) => ( {
+			label,
+			items: fonts,
+		} ) );
+	}, [ fontFamilies ] );
+
 	return (
 		<>
 			<ControlActions>
 				<UnstableTag
 					variant="outlined"
 					label={ fontFamily || placeholder }
-					endIcon={ <ChevronDownIcon fontSize={ SIZE } /> }
+					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
 					{ ...bindTrigger( popoverState ) }
 					fullWidth
 					disabled={ disabled }
@@ -49,6 +56,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }
 					}
 				/>
 			</ControlActions>
+
 			<Popover
 				disablePortal
 				disableScrollLock
@@ -57,12 +65,16 @@ export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }
 				sx={ { my: 1.5 } }
 				{ ...bindPopover( popoverState ) }
 			>
-				<FontFamilySelector
-					fontFamilies={ fontFamilies }
-					fontFamily={ fontFamily }
-					onFontFamilyChange={ setFontFamily }
+				<ItemSelector
+					itemsList={ mapFontSubs }
+					selectedItem={ fontFamily }
+					onItemChange={ setFontFamily }
 					onClose={ popoverState.close }
 					sectionWidth={ sectionWidth }
+					title={ __( 'Font Family', 'elementor' ) }
+					itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
+					onDebounce={ enqueueFont }
+					icon={ TextIcon as React.ElementType< { fontSize: string } > }
 				/>
 			</Popover>
 		</>

package/src/controls/key-value-control.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
-import { type ChangeEvent, useMemo, useState } from 'react';
-import { keyValuePropTypeUtil } from '@elementor/editor-props';
-import { FormHelperText, FormLabel, Grid, TextField } from '@elementor/ui';
+import { useMemo, useState } from 'react';
+import {
+	type CreateOptions,
+	isTransformable,
+	keyValuePropTypeUtil,
+	type PropKey,
+	type Props,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
+import { FormHelperText, FormLabel, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useBoundProp } from '../bound-prop-context';
-import ControlActions from '../control-actions/control-actions';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { createControl } from '../create-control';
-
-type FieldType = 'key' | 'value';
+import { TextControl } from './text-control';
 
 type KeyValueControlProps = {
 	keyName?: string;
@@ -19,9 +24,9 @@ type KeyValueControlProps = {
 };
 
 export const KeyValueControl = createControl( ( props: KeyValueControlProps = {} ) => {
-	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
-	const [ keyError, setKeyError ] = useState< string | null >( null );
-	const [ valueError, setValueError ] = useState< string | null >( null );
+	const { value, setValue, ...propContext } = useBoundProp( keyValuePropTypeUtil );
+	const [ keyError, setKeyError ] = useState< string >( '' );
+	const [ valueError, setValueError ] = useState< string >( '' );
 
 	const [ sessionState, setSessionState ] = useState( {
 		key: value?.key?.value || '',
@@ -43,31 +48,48 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 	const validate = ( newValue: string, fieldType: string ): boolean => {
 		if ( fieldType === 'key' && keyRegex ) {
 			const isValid = keyRegex.test( newValue );
-			setKeyError( isValid ? null : errMsg );
+			setKeyError( isValid ? '' : errMsg );
+
 			return isValid;
 		} else if ( fieldType === 'value' && valueRegex ) {
 			const isValid = valueRegex.test( newValue );
-			setValueError( isValid ? null : errMsg );
+			setValueError( isValid ? '' : errMsg );
+
 			return isValid;
 		}
+
 		return true;
 	};
 
-	const handleChange = ( event: ChangeEvent< HTMLInputElement >, fieldType: FieldType ) => {
-		const newValue = event.target.value;
+	const handleChange = ( newValue: Props, options?: CreateOptions, meta?: { bind?: PropKey } ) => {
+		const fieldType = meta?.bind;
+
+		if ( ! fieldType ) {
+			return;
+		}
+
+		const newChangedValue = newValue[ fieldType ];
+
+		if ( isTransformable( newChangedValue ) && newChangedValue.$$type === 'dynamic' ) {
+			setValue( {
+				...value,
+				[ fieldType ]: newChangedValue,
+			} );
+
+			return;
+		}
+
+		const extractedValue = stringPropTypeUtil.extract( newChangedValue );
 
 		setSessionState( ( prev ) => ( {
 			...prev,
-			[ fieldType ]: newValue,
+			[ fieldType ]: extractedValue,
 		} ) );
 
-		if ( validate( newValue, fieldType ) ) {
+		if ( extractedValue && validate( extractedValue, fieldType ) ) {
 			setValue( {
 				...value,
-				[ fieldType ]: {
-					value: newValue,
-					$$type: 'string',
-				},
+				[ fieldType ]: newChangedValue,
 			} );
 		} else {
 			setValue( {
@@ -80,40 +102,32 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 		}
 	};
 
-	const isKeyInvalid = keyError !== null;
-	const isValueInvalid = valueError !== null;
-
 	return (
-		<ControlActions>
+		<PropProvider { ...propContext } value={ value } setValue={ handleChange }>
 			<Grid container gap={ 1.5 }>
-				<Grid item xs={ 12 }>
-					<FormLabel size="tiny">{ keyLabel }</FormLabel>
-					<TextField
-						// eslint-disable-next-line jsx-a11y/no-autofocus
-						autoFocus
-						sx={ { pt: 1 } }
-						size="tiny"
-						fullWidth
-						value={ sessionState.key }
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'key' ) }
-						error={ isKeyInvalid }
-					/>
-					{ isKeyInvalid && <FormHelperText error>{ keyError }</FormHelperText> }
+				<Grid item xs={ 12 } display="flex" flexDirection="column">
+					<FormLabel size="tiny" sx={ { pb: 1 } }>
+						{ keyLabel }
+					</FormLabel>
+					<PropKeyProvider bind={ 'key' }>
+						<TextControl inputValue={ sessionState.key } error={ !! keyError } />
+					</PropKeyProvider>
+					{ !! keyError && <FormHelperText error>{ keyError }</FormHelperText> }
 				</Grid>
-				<Grid item xs={ 12 }>
-					<FormLabel size="tiny">{ valueLabel }</FormLabel>
-					<TextField
-						sx={ { pt: 1 } }
-						size="tiny"
-						fullWidth
-						value={ sessionState.value }
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'value' ) }
-						disabled={ isKeyInvalid }
-						error={ isValueInvalid }
-					/>
-					{ isValueInvalid && <FormHelperText error>{ valueError }</FormHelperText> }
+				<Grid item xs={ 12 } display="flex" flexDirection="column">
+					<FormLabel size="tiny" sx={ { pb: 1 } }>
+						{ valueLabel }
+					</FormLabel>
+					<PropKeyProvider bind={ 'value' }>
+						<TextControl
+							inputValue={ sessionState.value }
+							error={ !! valueError }
+							inputDisabled={ !! keyError }
+						/>
+					</PropKeyProvider>
+					{ !! valueError && <FormHelperText error>{ valueError }</FormHelperText> }
 				</Grid>
 			</Grid>
-		</ControlActions>
+		</PropProvider>
 	);
 } );