@elementor/editor-controls 1.3.0 → 3.32.0-20

package/src/controls/size-control.tsx

@@ -10,154 +10,217 @@ import { TextFieldPopover } from '../components/text-field-popover';
 import { createControl } from '../create-control';
 import { useSizeExtendedOptions } from '../hooks/use-size-extended-options';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
-import { defaultUnits, type ExtendedOption, isUnitExtendedOption, type Unit } from '../utils/size-control';
-
-const DEFAULT_UNIT = 'px';
-const DEFAULT_SIZE = NaN;
+import {
+	type AngleUnit,
+	angleUnits,
+	DEFAULT_SIZE,
+	DEFAULT_UNIT,
+	type ExtendedOption,
+	isUnitExtendedOption,
+	type LengthUnit,
+	lengthUnits,
+	type TimeUnit,
+	timeUnits,
+	type Unit,
+} from '../utils/size-control';
 
 type SizeValue = SizePropValue[ 'value' ];
 
-type SizeControlProps = {
+type SizeVariant = 'length' | 'angle' | 'time';
+
+type UnitProps< T extends readonly Unit[] > = {
+	units?: T;
+	defaultUnit?: T[ number ];
+};
+
+type BaseSizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
-	units?: Unit[];
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
 	anchorRef?: RefObject< HTMLDivElement | null >;
-	defaultUnit?: Unit;
 };
 
+type LengthSizeControlProps = BaseSizeControlProps &
+	UnitProps< LengthUnit[] > & {
+		variant: 'length';
+	};
+
+type AngleSizeControlProps = BaseSizeControlProps &
+	UnitProps< AngleUnit[] > & {
+		variant: 'angle';
+	};
+
+type TimeSizeControlProps = BaseSizeControlProps &
+	UnitProps< TimeUnit[] > & {
+		variant: 'time';
+	};
+
+export type SizeControlProps = LengthSizeControlProps | AngleSizeControlProps | TimeSizeControlProps;
+
 type State = {
 	numeric: number;
 	custom: string;
 	unit: Unit | ExtendedOption;
 };
 
-export const SizeControl = createControl( ( props: SizeControlProps ) => {
-	const defaultUnit = props.defaultUnit ?? DEFAULT_UNIT;
-	const { units = [ ...defaultUnits ], placeholder, startIcon, anchorRef } = props;
-	const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp( sizePropTypeUtil );
-	const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, defaultUnit ) );
-	const activeBreakpoint = useActiveBreakpoint();
-
-	const extendedOptions = useSizeExtendedOptions( props.extendedOptions || [], props.disableCustom ?? false );
-	const popupState = usePopupState( { variant: 'popover' } );
-
-	const [ state, setState ] = useSyncExternalState( {
-		external: internalState,
-		setExternal: ( newState: State | null ) => setSizeValue( extractValueFromState( newState ) ),
-		persistWhen: ( newState ) => {
-			if ( ! newState?.unit ) {
-				return false;
-			}
-
-			if ( isUnitExtendedOption( newState.unit ) ) {
-				return newState.unit === 'auto' ? true : !! newState.custom;
+const defaultSelectedUnit: Record< SizeControlProps[ 'variant' ], Unit > = {
+	length: 'px',
+	angle: 'deg',
+	time: 'ms',
+} as const;
+
+const defaultUnits: Record< SizeControlProps[ 'variant' ], Unit[] > = {
+	length: [ ...lengthUnits ] as LengthUnit[],
+	angle: [ ...angleUnits ] as AngleUnit[],
+	time: [ ...timeUnits ] as TimeUnit[],
+} as const;
+
+export const SizeControl = createControl(
+	( {
+		variant = 'length' as SizeControlProps[ 'variant' ],
+		defaultUnit,
+		units,
+		placeholder,
+		startIcon,
+		anchorRef,
+		extendedOptions,
+		disableCustom,
+	}: Omit< SizeControlProps, 'variant' > & { variant?: SizeVariant } ) => {
+		const {
+			value: sizeValue,
+			setValue: setSizeValue,
+			disabled,
+			restoreValue,
+			placeholder: externalPlaceholder,
+		} = useBoundProp( sizePropTypeUtil );
+		const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[ variant ];
+		const actualUnits = units ?? [ ...defaultUnits[ variant ] ];
+		const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, actualDefaultUnit ) );
+		const activeBreakpoint = useActiveBreakpoint();
+
+		const actualExtendedOptions = useSizeExtendedOptions( extendedOptions || [], disableCustom ?? false );
+		const popupState = usePopupState( { variant: 'popover' } );
+
+		const [ state, setState ] = useSyncExternalState( {
+			external: internalState,
+			setExternal: ( newState: State | null ) => setSizeValue( extractValueFromState( newState ) ),
+			persistWhen: ( newState ) => {
+				if ( ! newState?.unit ) {
+					return false;
+				}
+
+				if ( isUnitExtendedOption( newState.unit ) ) {
+					return newState.unit === 'auto' ? true : !! newState.custom;
+				}
+
+				return !! newState?.numeric || newState?.numeric === 0;
+			},
+			fallback: ( newState ) => ( {
+				unit: newState?.unit ?? actualDefaultUnit,
+				numeric: newState?.numeric ?? DEFAULT_SIZE,
+				custom: newState?.custom ?? '',
+			} ),
+		} );
+
+		const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } =
+			extractValueFromState( state ) || {};
+
+		const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
+			if ( newUnit === 'custom' ) {
+				popupState.open( anchorRef?.current );
 			}
 
-			return !! newState?.numeric || newState?.numeric === 0;
-		},
-		fallback: ( newState ) => ( {
-			unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
-			numeric: newState?.numeric ?? DEFAULT_SIZE,
-			custom: newState?.custom ?? '',
-		} ),
-	} );
-
-	const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = DEFAULT_UNIT } = extractValueFromState( state ) || {};
+			setState( ( prev ) => ( { ...prev, unit: newUnit } ) );
+		};
 
-	const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
-		if ( newUnit === 'custom' ) {
-			popupState.open( anchorRef?.current );
-		}
-
-		setState( ( prev ) => ( { ...prev, unit: newUnit } ) );
-	};
+		const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+			const { value: size } = event.target;
 
-	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const { value: size } = event.target;
+			if ( controlUnit === 'auto' ) {
+				setState( ( prev ) => ( { ...prev, unit: controlUnit } ) );
 
-		if ( controlUnit === 'auto' ) {
-			setState( ( prev ) => ( { ...prev, unit: controlUnit } ) );
-
-			return;
-		}
-
-		setState( ( prev ) => ( {
-			...prev,
-			[ controlUnit === 'custom' ? 'custom' : 'numeric' ]: formatSize( size, controlUnit ),
-			unit: controlUnit,
-		} ) );
-	};
-
-	const onInputFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {
-		if ( isUnitExtendedOption( state.unit ) ) {
-			( event.target as HTMLElement )?.blur();
-		}
-	};
-
-	const onInputClick = ( event: React.MouseEvent ) => {
-		if ( ( event.target as HTMLElement ).closest( 'input' ) && 'custom' === state.unit ) {
-			popupState.open( anchorRef?.current );
-		}
-	};
+				return;
+			}
 
-	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
-		const currentUnit = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
-		const mergedStates = { ...state, [ currentUnit ]: newState[ currentUnit ] };
+			setState( ( prev ) => ( {
+				...prev,
+				[ controlUnit === 'custom' ? 'custom' : 'numeric' ]: formatSize( size, controlUnit ),
+				unit: controlUnit,
+			} ) );
+		};
 
-		if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
-			return;
-		}
+		const onInputClick = ( event: React.MouseEvent ) => {
+			if ( ( event.target as HTMLElement ).closest( 'input' ) && 'custom' === state.unit ) {
+				popupState.open( anchorRef?.current );
+			}
+		};
+
+		useEffect( () => {
+			const newState = createStateFromSizeProp(
+				sizeValue,
+				state.unit === 'custom' ? state.unit : actualDefaultUnit,
+				'',
+				state.custom
+			);
+			const currentUnitType = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
+			const mergedStates = {
+				...state,
+				unit: newState.unit ?? state.unit,
+				[ currentUnitType ]: newState[ currentUnitType ],
+			};
+
+			if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
+				return;
+			}
 
-		if ( state.unit === newState.unit ) {
-			setInternalState( mergedStates );
+			if ( state.unit === newState.unit ) {
+				setInternalState( mergedStates );
 
-			return;
-		}
+				return;
+			}
 
-		setState( newState );
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ sizeValue ] );
+			setState( newState );
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ sizeValue ] );
 
-	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
+		useEffect( () => {
+			const newState = createStateFromSizeProp( sizeValue, actualDefaultUnit, '', state.custom );
 
-		if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
-			setState( newState );
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ activeBreakpoint ] );
-
-	return (
-		<>
-			<SizeInput
-				disabled={ disabled }
-				size={ controlSize }
-				unit={ controlUnit }
-				units={ [ ...units, ...( extendedOptions || [] ) ] }
-				placeholder={ placeholder }
-				startIcon={ startIcon }
-				handleSizeChange={ handleSizeChange }
-				handleUnitChange={ handleUnitChange }
-				onBlur={ restoreValue }
-				onFocus={ onInputFocus }
-				onClick={ onInputClick }
-				popupState={ popupState }
-			/>
-			{ anchorRef?.current && (
-				<TextFieldPopover
+			if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
+				setState( newState );
+			}
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ activeBreakpoint ] );
+
+		return (
+			<>
+				<SizeInput
+					disabled={ disabled }
+					size={ controlSize }
+					unit={ controlUnit }
+					units={ [ ...actualUnits, ...( actualExtendedOptions || [] ) ] }
+					placeholder={ placeholder }
+					startIcon={ startIcon }
+					handleSizeChange={ handleSizeChange }
+					handleUnitChange={ handleUnitChange }
+					onBlur={ restoreValue }
+					onClick={ onInputClick }
 					popupState={ popupState }
-					anchorRef={ anchorRef }
-					restoreValue={ restoreValue }
-					value={ controlSize as string }
-					onChange={ handleSizeChange }
 				/>
-			) }
-		</>
-	);
-} );
+				{ anchorRef?.current && (
+					<TextFieldPopover
+						popupState={ popupState }
+						anchorRef={ anchorRef }
+						restoreValue={ restoreValue }
+						value={ controlSize as string }
+						onChange={ handleSizeChange }
+					/>
+				) }
+			</>
+		);
+	}
+);
 
 function formatSize< TSize extends string | number >( size: TSize, unit: Unit | ExtendedOption ): TSize {
 	if ( isUnitExtendedOption( unit ) ) {
@@ -167,16 +230,21 @@ function formatSize< TSize extends string | number >( size: TSize, unit: Unit |
 	return size || size === 0 ? ( Number( size ) as TSize ) : ( NaN as TSize );
 }
 
-function createStateFromSizeProp( sizeValue: SizeValue | null, defaultUnit: Unit ): State {
+function createStateFromSizeProp(
+	sizeValue: SizeValue | null,
+	defaultUnit: Unit | ExtendedOption,
+	defaultSize: string | number = '',
+	customState: string = ''
+): State {
 	const unit = sizeValue?.unit ?? defaultUnit;
-	const size = sizeValue?.size ?? '';
+	const size = sizeValue?.size ?? defaultSize;
 
 	return {
 		numeric:
 			! isUnitExtendedOption( unit ) && ! isNaN( Number( size ) ) && ( size || size === 0 )
 				? Number( size )
 				: DEFAULT_SIZE,
-		custom: unit === 'custom' ? String( size ) : '',
+		custom: unit === 'custom' ? String( size ) : customState,
 		unit,
 	};
 }

package/src/controls/stroke-control.tsx

@@ -8,7 +8,7 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlFormLabel } from '../components/control-form-label';
 import { SectionContent } from '../components/section-content';
 import { createControl } from '../create-control';
-import { type Unit } from '../utils/size-control';
+import { type LengthUnit } from '../utils/size-control';
 import { ColorControl } from './color-control';
 import { SizeControl } from './size-control';
 
@@ -18,7 +18,7 @@ type StrokeProps = {
 	children: React.ReactNode;
 };
 
-const units: Unit[] = [ 'px', 'em', 'rem' ];
+const units: LengthUnit[] = [ 'px', 'em', 'rem' ];
 
 export const StrokeControl = createControl( () => {
 	const propContext = useBoundProp( strokePropTypeUtil );

package/src/controls/text-control.tsx

@@ -1,26 +1,41 @@
 import * as React from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { TextField } from '@elementor/ui';
+import { type SxProps, TextField } from '@elementor/ui';
 
 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, disabled } = useBoundProp( stringPropTypeUtil );
+export const TextControl = createControl(
+	( {
+		placeholder,
+		error,
+		inputValue,
+		inputDisabled,
+		sx,
+	}: {
+		placeholder?: string;
+		error?: boolean;
+		inputValue?: string;
+		inputDisabled?: boolean;
+		sx?: SxProps;
+	} ) => {
+		const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
-
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				fullWidth
-				disabled={ disabled }
-				value={ value ?? '' }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );
+		return (
+			<ControlActions>
+				<TextField
+					size="tiny"
+					fullWidth
+					disabled={ inputDisabled ?? disabled }
+					value={ inputValue ?? value ?? '' }
+					onChange={ handleChange }
+					placeholder={ placeholder }
+					error={ error }
+					sx={ sx }
+				/>
+			</ControlActions>
+		);
+	}
+);

package/src/controls/toggle-control.tsx

@@ -42,12 +42,13 @@ export const ToggleControl = createControl(
 			maxItems,
 			fullWidth,
 			size,
+			placeholder,
 		};
 
 		return exclusive ? (
 			<ControlToggleButtonGroup
 				{ ...toggleButtonGroupProps }
-				value={ value ?? placeholder ?? null }
+				value={ value ?? null }
 				onChange={ setValue }
 				disabled={ disabled }
 				exclusive={ true }
@@ -55,7 +56,7 @@ export const ToggleControl = createControl(
 		) : (
 			<ControlToggleButtonGroup
 				{ ...toggleButtonGroupProps }
-				value={ ( value ?? placeholder )?.split( ' ' ) ?? [] }
+				value={ value?.split( ' ' ) ?? [] }
 				onChange={ handleNonExclusiveToggle }
 				disabled={ disabled }
 				exclusive={ false }

package/src/controls/transform-control/functions/axis-row.tsx

@@ -1,5 +1,6 @@
 import { type RefObject } from 'react';
 import * as React from 'react';
+import { type AngleUnit } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 
 import { PropKeyProvider } from '../../../bound-prop-context';
@@ -12,9 +13,10 @@ type TransformAxisRowProps = {
 	bindValue: 'x' | 'y' | 'z';
 	startIcon: React.ReactNode;
 	anchorRef?: RefObject< HTMLDivElement | null >;
+	units?: AngleUnit[];
 };
 
-export const AxisRow = ( { label, bindValue, startIcon, anchorRef }: TransformAxisRowProps ) => {
+export const AxisRow = ( { label, bindValue, startIcon, anchorRef, units }: TransformAxisRowProps ) => {
 	return (
 		<Grid item xs={ 12 }>
 			<PopoverGridContainer ref={ anchorRef }>
@@ -23,7 +25,7 @@ export const AxisRow = ( { label, bindValue, startIcon, anchorRef }: TransformAx
 				</Grid>
 				<Grid item xs={ 6 }>
 					<PropKeyProvider bind={ bindValue }>
-						<SizeControl anchorRef={ anchorRef } startIcon={ startIcon } />
+						<SizeControl anchorRef={ anchorRef } startIcon={ startIcon } units={ units } variant="angle" />
 					</PropKeyProvider>
 				</Grid>
 			</PopoverGridContainer>

package/src/controls/transform-control/functions/move.tsx

@@ -6,6 +6,7 @@ import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { TransformFunctionKeys } from '../types';
 import { AxisRow } from './axis-row';
 
 const moveAxisControls: { label: string; bindValue: 'x' | 'y' | 'z'; startIcon: React.ReactNode }[] = [
@@ -33,7 +34,7 @@ export const Move = () => {
 	return (
 		<Grid container spacing={ 1.5 }>
 			<PropProvider { ...context }>
-				<PropKeyProvider bind={ 'transform-move' }>
+				<PropKeyProvider bind={ TransformFunctionKeys.move }>
 					{ moveAxisControls.map( ( control ) => (
 						<AxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } />
 					) ) }

package/src/controls/transform-control/functions/rotate.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { rotateTransformPropTypeUtil } from '@elementor/editor-props';
+import { Arrow360Icon, RotateClockwiseIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { type AngleUnit } from '../../../utils/size-control';
+import { TransformFunctionKeys } from '../types';
+import { AxisRow } from './axis-row';
+
+const rotateAxisControls: { label: string; bindValue: 'x' | 'y' | 'z'; startIcon: React.ReactNode }[] = [
+	{
+		label: __( 'Rotate X', 'elementor' ),
+		bindValue: 'x',
+		startIcon: <Arrow360Icon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Rotate Y', 'elementor' ),
+		bindValue: 'y',
+		startIcon: <Arrow360Icon fontSize="tiny" style={ { transform: 'scaleX(-1) rotate(-90deg)' } } />,
+	},
+	{
+		label: __( 'Rotate Z', 'elementor' ),
+		bindValue: 'z',
+		startIcon: <RotateClockwiseIcon fontSize={ 'tiny' } />,
+	},
+];
+
+const rotateUnits: AngleUnit[] = [ 'deg', 'rad', 'grad', 'turn' ];
+
+export const Rotate = () => {
+	const context = useBoundProp( rotateTransformPropTypeUtil );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<PropProvider { ...context }>
+				<PropKeyProvider bind={ TransformFunctionKeys.rotate }>
+					{ rotateAxisControls.map( ( control ) => (
+						<AxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } units={ rotateUnits } />
+					) ) }
+				</PropKeyProvider>
+			</PropProvider>
+		</Grid>
+	);
+};

package/src/controls/transform-control/functions/scale-axis-row.tsx

@@ -0,0 +1,32 @@
+import { type RefObject } from 'react';
+import * as React from 'react';
+import { Grid } from '@elementor/ui';
+
+import { PropKeyProvider } from '../../../bound-prop-context';
+import { ControlLabel } from '../../../components/control-label';
+import { PopoverGridContainer } from '../../../components/popover-grid-container';
+import { NumberControl } from '../../number-control';
+
+type ScaleAxisRowProps = {
+	label: string;
+	bindValue: 'x' | 'y' | 'z';
+	startIcon: React.ReactNode;
+	anchorRef?: RefObject< HTMLDivElement | null >;
+};
+
+export const ScaleAxisRow = ( { label, bindValue, startIcon, anchorRef }: ScaleAxisRowProps ) => {
+	return (
+		<Grid item xs={ 12 }>
+			<PopoverGridContainer ref={ anchorRef }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<PropKeyProvider bind={ bindValue }>
+						<NumberControl step={ 0.1 } placeholder="1" startIcon={ startIcon } />
+					</PropKeyProvider>
+				</Grid>
+			</PopoverGridContainer>
+		</Grid>
+	);
+};

package/src/controls/transform-control/functions/scale.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { scaleTransformPropTypeUtil } from '@elementor/editor-props';
+import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { TransformFunctionKeys } from '../types';
+import { ScaleAxisRow } from './scale-axis-row';
+
+const scaleAxisControls: { label: string; bindValue: 'x' | 'y' | 'z'; startIcon: React.ReactNode }[] = [
+	{
+		label: __( 'Scale X', 'elementor' ),
+		bindValue: 'x',
+		startIcon: <ArrowRightIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Scale Y', 'elementor' ),
+		bindValue: 'y',
+		startIcon: <ArrowDownSmallIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Scale Z', 'elementor' ),
+		bindValue: 'z',
+		startIcon: <ArrowDownLeftIcon fontSize={ 'tiny' } />,
+	},
+];
+
+export const Scale = () => {
+	const context = useBoundProp( scaleTransformPropTypeUtil );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<PropProvider { ...context }>
+				<PropKeyProvider bind={ TransformFunctionKeys.scale }>
+					{ scaleAxisControls.map( ( control ) => (
+						<ScaleAxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } />
+					) ) }
+				</PropKeyProvider>
+			</PropProvider>
+		</Grid>
+	);
+};