@elementor/editor-controls 0.4.0 → 0.5.0

package/src/controls/box-shadow-repeater-control.tsx

@@ -1,41 +1,32 @@
 import * as React from 'react';
-import {
-	boxShadowPropTypeUtil,
-	type BoxShadowPropValue,
-	type PropValue,
-	type ShadowPropValue,
-} from '@elementor/editor-props';
+import { boxShadowPropTypeUtil, type PropKey, shadowPropTypeUtil, type ShadowPropValue } from '@elementor/editor-props';
 import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { Repeater } from '../components/repeater';
 import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
 import { SelectControl } from './select-control';
 import { SizeControl } from './size-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 export const BoxShadowRepeaterControl = createControl( () => {
-	const { value: boxShadowValues, setValue } = useBoundProp( boxShadowPropTypeUtil );
-
-	const setBoxShadow = ( newValue: BoxShadowPropValue[ 'value' ] ) => {
-		setValue( newValue );
-	};
+	const { propType, value, setValue } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
-		<Repeater
-			values={ boxShadowValues ?? [] }
-			setValues={ setBoxShadow }
-			label={ __( 'Box shadow', 'elementor' ) }
-			itemSettings={ {
-				Icon: ItemIcon,
-				Label: ItemLabel,
-				Content: ItemContent,
-				initialValues: initialShadow,
-			} }
-		/>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+			<Repeater
+				values={ value ?? [] }
+				setValues={ setValue }
+				label={ __( 'Box shadow', 'elementor' ) }
+				itemSettings={ {
+					Icon: ItemIcon,
+					Label: ItemLabel,
+					Content: ItemContent,
+					initialValues: initialShadow,
+				} }
+			/>
+		</PropProvider>
 	);
 } );
 
@@ -43,125 +34,70 @@ const ItemIcon = ( { value }: { value: ShadowPropValue } ) => (
 	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color.value } />
 );
 
-const ItemContent = ( {
-	value,
-	setValue,
-	anchorEl,
-}: {
-	value: ShadowPropValue;
-	setValue: ( newValue: ShadowPropValue ) => void;
-	anchorEl: HTMLElement | null;
-} ) => {
-	const setShadow = ( newValue: ShadowPropValue[ 'value' ] ) => {
-		setValue( {
-			$$type: 'shadow',
-			value: newValue,
-		} );
-	};
+const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind: PropKey } ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<Content anchorEl={ anchorEl } />
+		</PropKeyProvider>
+	);
+};
+
+const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
+	const { propType, value, setValue } = useBoundProp( shadowPropTypeUtil );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Control
-					bind="color"
-					value={ value.value.color }
-					label={ __( 'Color', 'elementor' ) }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'color' ] ) =>
-						setShadow( { ...value.value, color: v } )
-					}
-				>
-					<ColorControl
-						slotProps={ {
-							colorPicker: {
-								anchorEl,
-								anchorOrigin: {
-									vertical: 'top',
-									horizontal: 'right',
-								},
-								transformOrigin: {
-									vertical: 'top',
-									horizontal: -10,
+		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+			<Stack gap={ 1.5 }>
+				<Grid container gap={ 2 } flexWrap="nowrap">
+					<Control bind="color" label={ __( 'Color', 'elementor' ) }>
+						<ColorControl
+							slotProps={ {
+								colorPicker: {
+									anchorEl,
+									anchorOrigin: {
+										vertical: 'top',
+										horizontal: 'right',
+									},
+									transformOrigin: {
+										vertical: 'top',
+										horizontal: -10,
+									},
 								},
-							},
-						} }
-					/>
-				</Control>
-				<Control
-					bind="position"
-					value={ value.value.position }
-					label={ __( 'Position', 'elementor' ) }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'position' ] ) =>
-						setShadow( { ...value.value, position: v || null } )
-					}
-				>
-					<SelectControl
-						options={ [
-							{ label: __( 'Inset', 'elementor' ), value: 'inset' },
-							{ label: __( 'Outset', 'elementor' ), value: '' },
-						] }
-					/>
-				</Control>
-			</Grid>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Control
-					bind="hOffset"
-					label={ __( 'Horizontal', 'elementor' ) }
-					value={ value.value.hOffset }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'hOffset' ] ) =>
-						setShadow( { ...value.value, hOffset: v } )
-					}
-				>
-					<SizeControl />
-				</Control>
-				<Control
-					bind="vOffset"
-					label={ __( 'Vertical', 'elementor' ) }
-					value={ value.value.vOffset }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'vOffset' ] ) =>
-						setShadow( { ...value.value, vOffset: v } )
-					}
-				>
-					<SizeControl />
-				</Control>
-			</Grid>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Control
-					bind="blur"
-					value={ value.value.blur }
-					label={ __( 'Blur', 'elementor' ) }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'blur' ] ) => setShadow( { ...value.value, blur: v } ) }
-				>
-					<SizeControl />
-				</Control>
-				<Control
-					bind="spread"
-					label={ __( 'Spread', 'elementor' ) }
-					value={ value.value.spread }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'spread' ] ) =>
-						setShadow( { ...value.value, spread: v } )
-					}
-				>
-					<SizeControl />
-				</Control>
-			</Grid>
-		</Stack>
+							} }
+						/>
+					</Control>
+					<Control bind="position" label={ __( 'Position', 'elementor' ) }>
+						<SelectControl
+							options={ [
+								{ label: __( 'Inset', 'elementor' ), value: 'inset' },
+								{ label: __( 'Outset', 'elementor' ), value: '' },
+							] }
+						/>
+					</Control>
+				</Grid>
+				<Grid container gap={ 2 } flexWrap="nowrap">
+					<Control bind="hOffset" label={ __( 'Horizontal', 'elementor' ) }>
+						<SizeControl />
+					</Control>
+					<Control bind="vOffset" label={ __( 'Vertical', 'elementor' ) }>
+						<SizeControl />
+					</Control>
+				</Grid>
+				<Grid container gap={ 2 } flexWrap="nowrap">
+					<Control bind="blur" label={ __( 'Blur', 'elementor' ) }>
+						<SizeControl />
+					</Control>
+					<Control bind="spread" label={ __( 'Spread', 'elementor' ) }>
+						<SizeControl />
+					</Control>
+				</Grid>
+			</Stack>
+		</PropProvider>
 	);
 };
 
-const Control = < T extends PropValue >( {
-	value,
-	setValue,
-	label,
-	bind,
-	children,
-}: {
-	value: T;
-	bind: string;
-	label: string;
-	children: React.ReactNode;
-	setValue: ( v: T ) => void;
-} ) => (
-	<BoundPropProvider value={ value } setValue={ setValue as SetContextValue } bind={ bind }>
+const Control = ( { label, bind, children }: { bind: string; label: string; children: React.ReactNode } ) => (
+	<PropKeyProvider bind={ bind }>
 		<Grid item xs={ 6 }>
 			<Grid container gap={ 1 } alignItems="center">
 				<Grid item xs={ 12 }>
@@ -174,7 +110,7 @@ const Control = < T extends PropValue >( {
 				</Grid>
 			</Grid>
 		</Grid>
-	</BoundPropProvider>
+	</PropKeyProvider>
 );
 
 const ItemLabel = ( { value }: { value: ShadowPropValue } ) => {

package/src/controls/color-control.tsx

@@ -1,29 +1,25 @@
 import * as React from 'react';
-import { colorPropTypeUtil } from '@elementor/editor-props';
+import { colorPropTypeUtil, type PropTypeUtil } from '@elementor/editor-props';
 import { UnstableColorField, type UnstableColorFieldProps } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const ColorControl = createControl(
-	( props: Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > ) => {
-		const { value, setValue } = useBoundProp( colorPropTypeUtil );
+type Props = Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > & {
+	propTypeUtil?: PropTypeUtil< string, string >;
+};
 
-		const handleChange = ( selectedColor: string ) => {
-			setValue( selectedColor );
-		};
+export const ColorControl = createControl( ( { propTypeUtil = colorPropTypeUtil, ...props }: Props ) => {
+	const { value, setValue } = useBoundProp( propTypeUtil );
 
-		return (
-			<ControlActions>
-				<UnstableColorField
-					size="tiny"
-					{ ...props }
-					value={ value ?? '' }
-					onChange={ handleChange }
-					fullWidth
-				/>
-			</ControlActions>
-		);
-	}
-);
+	const handleChange = ( selectedColor: string ) => {
+		setValue( selectedColor );
+	};
+
+	return (
+		<ControlActions>
+			<UnstableColorField size="tiny" { ...props } value={ value ?? '' } onChange={ handleChange } fullWidth />
+		</ControlActions>
+	);
+} );

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

@@ -1,21 +1,13 @@
 import * as React from 'react';
 import { type ReactNode, useId, useRef } from 'react';
-import {
-	type PropKey,
-	type PropTypeUtil,
-	type PropValue,
-	sizePropTypeUtil,
-	type SizePropValue,
-} from '@elementor/editor-props';
+import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { SizeControl } from './size-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 type MultiSizePropValue = Record< PropKey, SizePropValue >;
 
 type Item = {
@@ -33,7 +25,9 @@ type Props< TMultiPropType extends string, TPropValue extends MultiSizePropValue
 	multiSizePropTypeUtil: PropTypeUtil< TMultiPropType, TPropValue >;
 };
 
-const isEqualSizes = ( values: SizePropValue[], items: EqualUnequalItems ) => {
+const isEqualSizes = ( propValue: MultiSizePropValue, items: EqualUnequalItems ) => {
+	const values = Object.values( propValue );
+
 	if ( values.length !== items.length ) {
 		return false;
 	}
@@ -41,7 +35,7 @@ const isEqualSizes = ( values: SizePropValue[], items: EqualUnequalItems ) => {
 	const [ firstValue, ...restValues ] = values;
 
 	return restValues.every(
-		( value ) => value.value?.size === firstValue.value?.size && value.value?.unit === firstValue.value?.unit
+		( value ) => value?.value?.size === firstValue?.value?.size && value?.value?.unit === firstValue?.value?.unit
 	);
 };
 
@@ -55,32 +49,48 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	const controlRef = useRef< HTMLElement >( null );
 	const popupState = usePopupState( { variant: 'popover', popupId } );
 
+	const {
+		propType: multiSizePropType,
+		value: multiSizeValue,
+		setValue: setMultiSizeValue,
+	} = useBoundProp( multiSizePropTypeUtil );
+
 	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
-	const { value: multiSizeValue, setValue: setMultiSizeValue } = useBoundProp( multiSizePropTypeUtil );
 
 	const splitEqualValue = () => {
 		if ( ! sizeValue ) {
-			return {};
+			return null;
 		}
 
-		return items.reduce( ( acc, { bind } ) => ( { ...acc, [ bind ]: sizePropTypeUtil.create( sizeValue ) } ), {} );
+		return items.reduce< TPropValue >(
+			( acc, { bind } ) => ( { ...acc, [ bind ]: sizePropTypeUtil.create( sizeValue ) } ),
+			{} as TPropValue
+		);
 	};
 
-	const setNestedProp = ( item: Item, newValue: SizePropValue ) => {
+	const setNestedProp = ( newValue: TPropValue ) => {
 		const newMappedValues = {
 			...( multiSizeValue ?? splitEqualValue() ),
-			[ item.bind ]: newValue,
+			...newValue,
 		};
 
-		const isEqual = isEqualSizes( Object.values( newMappedValues ), items );
+		const isEqual = isEqualSizes( newMappedValues, items );
 
 		if ( isEqual ) {
-			return setSizeValue( newValue?.value );
+			return setSizeValue( Object.values( newMappedValues )[ 0 ].value );
 		}
 
 		setMultiSizeValue( newMappedValues );
 	};
 
+	const getMultiSizeValues = () => {
+		if ( multiSizeValue ) {
+			return multiSizeValue;
+		}
+
+		return splitEqualValue() ?? null;
+	};
+
 	return (
 		<>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
@@ -88,23 +98,18 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<EqualSizeControl
-						items={ items }
-						value={ sizeValue }
-						multiSizeValue={ multiSizeValue }
-						setValue={ setSizeValue }
-						iconButton={
-							<ToggleButton
-								size={ 'tiny' }
-								value={ 'check' }
-								sx={ { marginLeft: 'auto' } }
-								{ ...bindToggle( popupState ) }
-								selected={ popupState.isOpen }
-							>
-								{ icon }
-							</ToggleButton>
-						}
-					/>
+					<Stack direction="row" alignItems="center" gap={ 1 }>
+						<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
+						<ToggleButton
+							size={ 'tiny' }
+							value={ 'check' }
+							sx={ { marginLeft: 'auto' } }
+							{ ...bindToggle( popupState ) }
+							selected={ popupState.isOpen }
+						>
+							{ icon }
+						</ToggleButton>
+					</Stack>
 				</Grid>
 			</Grid>
 			<Popover
@@ -123,113 +128,34 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } },
 				} }
 			>
-				<Stack gap={ 1.5 }>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<MultiSizeValueControl
-							item={ items[ 0 ] }
-							value={ multiSizeValue }
-							setNestedProp={ setNestedProp }
-							splitEqualValue={ splitEqualValue }
-						/>
-						<MultiSizeValueControl
-							item={ items[ 1 ] }
-							value={ multiSizeValue }
-							setNestedProp={ setNestedProp }
-							splitEqualValue={ splitEqualValue }
-						/>
-					</Grid>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<MultiSizeValueControl
-							item={ items[ 3 ] }
-							value={ multiSizeValue }
-							setNestedProp={ setNestedProp }
-							splitEqualValue={ splitEqualValue }
-						/>
-						<MultiSizeValueControl
-							item={ items[ 2 ] }
-							value={ multiSizeValue }
-							setNestedProp={ setNestedProp }
-							splitEqualValue={ splitEqualValue }
-						/>
-					</Grid>
-				</Stack>
+				<PropProvider propType={ multiSizePropType } value={ getMultiSizeValues() } setValue={ setNestedProp }>
+					<Stack gap={ 1.5 }>
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<MultiSizeValueControl item={ items[ 0 ] } />
+							<MultiSizeValueControl item={ items[ 1 ] } />
+						</Grid>
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<MultiSizeValueControl item={ items[ 3 ] } />
+							<MultiSizeValueControl item={ items[ 2 ] } />
+						</Grid>
+					</Stack>
+				</PropProvider>
 			</Popover>
 		</>
 	);
 }
 
-const MultiSizeValueControl = < TPropValue extends MultiSizePropValue >( {
-	item,
-	value,
-	setNestedProp,
-	splitEqualValue,
-}: {
-	item: Item;
-	value: TPropValue | undefined;
-	setNestedProp: ( item: Item, newValue: SizePropValue ) => void;
-	splitEqualValue: () => TPropValue;
-} ) => {
-	const handleChange = ( val: SizePropValue ) => setNestedProp( item, val );
-
-	const getMultiSizeValues = () => {
-		if ( value ) {
-			return value?.[ item.bind ] ?? null;
-		}
-
-		return splitEqualValue()?.[ item.bind ] ?? null;
-	};
-
-	return (
-		<BoundPropProvider bind={ '' } setValue={ handleChange as SetContextValue } value={ getMultiSizeValues() }>
-			<Grid item xs={ 6 }>
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ item.label }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<SizeControl startIcon={ item.icon } />
-					</Grid>
+const MultiSizeValueControl = ( { item }: { item: Item } ) => (
+	<PropKeyProvider bind={ item.bind }>
+		<Grid item xs={ 6 }>
+			<Grid container gap={ 1 } alignItems="center">
+				<Grid item xs={ 12 }>
+					<ControlLabel>{ item.label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 12 }>
+					<SizeControl startIcon={ item.icon } />
 				</Grid>
 			</Grid>
-		</BoundPropProvider>
-	);
-};
-
-const EqualSizeControl = ( {
-	value,
-	items,
-	setValue,
-	iconButton,
-	multiSizeValue,
-}: {
-	value: SizePropValue[ 'value' ] | null;
-	items: EqualUnequalItems;
-	setValue: ( newValue: SizePropValue[ 'value' ] ) => void;
-	iconButton: ReactNode;
-	multiSizeValue: PropValue;
-} ) => {
-	const handleChange = ( newValue: SizePropValue ) => {
-		setValue( newValue.value );
-	};
-
-	const getDisplayValue = () => {
-		if ( value ) {
-			return sizePropTypeUtil.create( value );
-		}
-
-		const multiValues = Object.values( multiSizeValue ?? {} ) as SizePropValue[];
-
-		if ( isEqualSizes( multiValues, items ) ) {
-			return sizePropTypeUtil.create( multiValues[ 0 ].value );
-		}
-	};
-
-	return (
-		<BoundPropProvider bind={ '' } setValue={ handleChange as SetContextValue } value={ getDisplayValue() ?? null }>
-			<Stack direction="row" alignItems="center" gap={ 1 }>
-				<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
-				{ iconButton }
-			</Stack>
-		</BoundPropProvider>
-	);
-};
+		</Grid>
+	</PropKeyProvider>
+);

package/src/controls/gap-control.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { gapPropTypeUtil, type PropValue } from '@elementor/editor-props';
+import { gapPropTypeUtil, type GapPropValue } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, type SetValue, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { SizeControl } from './size-control';
@@ -12,18 +12,21 @@ import { SizeControl } from './size-control';
 export type Gap = 'row' | 'column';
 
 export const GapControl = createControl( ( { label }: { label: string } ) => {
-	const { value, setValue } = useBoundProp( gapPropTypeUtil );
+	const { propType, value, setValue } = useBoundProp( gapPropTypeUtil );
 	const { column, row, isLinked = true } = value || {};
 
-	const setLinkedValue = ( gap: Gap, newValue: PropValue ) => {
-		const updatedValue = {
-			isLinked,
-			column: isLinked ? newValue : column,
-			row: isLinked ? newValue : row,
-			[ gap ]: newValue,
-		};
+	const setLinkedValue: SetValue< GapPropValue[ 'value' ] > = ( newValue, _, meta ) => {
+		if ( ! isLinked ) {
+			return setValue( newValue );
+		}
 
-		setValue( updatedValue );
+		const newDimension = newValue[ meta?.bind as Gap ];
+
+		setValue( {
+			isLinked,
+			column: newDimension,
+			row: newDimension,
+		} );
 	};
 
 	const toggleLinked = () => {
@@ -39,7 +42,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
 	return (
-		<>
+		<PropProvider propType={ propType } value={ value } setValue={ setLinkedValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
@@ -59,13 +62,9 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlLabel>{ __( 'Column', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<BoundPropProvider
-							setValue={ ( newValue ) => setLinkedValue( 'column', newValue ) }
-							value={ column }
-							bind="column"
-						>
+						<PropKeyProvider bind="column">
 							<SizeControl />
-						</BoundPropProvider>
+						</PropKeyProvider>
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -73,16 +72,12 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlLabel>{ __( 'Row', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<BoundPropProvider
-							setValue={ ( newValue ) => setLinkedValue( 'row', newValue ) }
-							value={ row }
-							bind="row"
-						>
+						<PropKeyProvider bind="row">
 							<SizeControl />
-						</BoundPropProvider>
+						</PropKeyProvider>
 					</Grid>
 				</Grid>
 			</Stack>
-		</>
+		</PropProvider>
 	);
 } );