@elementor/editor-controls 0.4.0 → 0.5.0

package/src/controls/image-control.tsx

@@ -1,53 +1,38 @@
 import * as React from 'react';
-import { imagePropTypeUtil, type ImageSrcPropValue, type PropValue, type SizePropValue } from '@elementor/editor-props';
+import { imagePropTypeUtil } from '@elementor/editor-props';
 import { Grid, Stack } 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 { createControl } from '../create-control';
 import { ImageMediaControl } from './image-media-control';
 import { SelectControl } from './select-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 export type ImageControlProps = {
 	sizes: { label: string; value: string }[];
 };
 
 export const ImageControl = createControl( ( props: ImageControlProps ) => {
-	const { value, setValue } = useBoundProp( imagePropTypeUtil );
-	const { src, size } = value || {};
-
-	const setImageSrc = ( newValue: ImageSrcPropValue ) => {
-		setValue( {
-			src: newValue,
-			size: size as SizePropValue,
-		} );
-	};
-
-	const setImageSize = ( newValue: SizePropValue ) => {
-		setValue( {
-			src: src as ImageSrcPropValue,
-			size: newValue,
-		} );
-	};
+	const propContext = useBoundProp( imagePropTypeUtil );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<BoundPropProvider value={ src } setValue={ setImageSrc as SetContextValue } bind={ 'src' }>
-				<ImageMediaControl />
-			</BoundPropProvider>
-			<BoundPropProvider value={ size } setValue={ setImageSize as SetContextValue } bind={ 'size' }>
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-					<Grid item xs={ 6 }>
-						<ControlLabel> { __( 'Image Resolution', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 }>
-						<SelectControl options={ props.sizes } />
+		<PropProvider { ...propContext }>
+			<Stack gap={ 1.5 }>
+				<PropKeyProvider bind={ 'src' }>
+					<ImageMediaControl />
+				</PropKeyProvider>
+				<PropKeyProvider bind={ 'size' }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel> { __( 'Image Resolution', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 }>
+							<SelectControl options={ props.sizes } />
+						</Grid>
 					</Grid>
-				</Grid>
-			</BoundPropProvider>
-		</Stack>
+				</PropKeyProvider>
+			</Stack>
+		</PropProvider>
 	);
 } );

package/src/controls/image-media-control.tsx

@@ -14,7 +14,7 @@ export const ImageMediaControl = createControl( () => {
 	const { id, url } = value ?? {};
 
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
-	const src = attachment?.url ?? url;
+	const src = attachment?.url ?? url?.value ?? null;
 
 	const { open } = useWpMediaFrame( {
 		types: [ 'image' ],

package/src/controls/link-control.tsx

@@ -1,89 +1,88 @@
 import * as React from 'react';
-import { type LinkPropValue, type UrlPropValue } from '@elementor/editor-props';
+import { linkPropTypeUtil, type LinkPropValue } from '@elementor/editor-props';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { Collapse, Divider, Grid, IconButton, Stack, Switch } 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 { createControl } from '../create-control';
 import { UrlControl } from './url-control';
 
 const SIZE = 'tiny';
 
-const DEFAULT_LINK_CONTROL_VALUE: LinkPropValue = {
-	$$type: 'link',
-	value: {
-		enabled: false,
-		href: {
-			$$type: 'url',
-			value: '',
-		},
-		isTargetBlank: false,
+const DEFAULT_LINK_CONTROL_VALUE: LinkPropValue[ 'value' ] = {
+	enabled: false,
+	href: {
+		$$type: 'url',
+		value: '',
 	},
+	isTargetBlank: false,
 };
 
 export const LinkControl = createControl( () => {
-	const { value = DEFAULT_LINK_CONTROL_VALUE, setValue } = useBoundProp< LinkPropValue >();
-	const { enabled, href, isTargetBlank } = value?.value || {};
-
-	const handleOnChange = < T extends keyof LinkPropValue[ 'value' ] >(
-		key: T,
-		newValue: LinkPropValue[ 'value' ][ T ]
-	) => {
-		setValue( {
-			$$type: 'link',
-			value: {
-				...( value?.value ?? DEFAULT_LINK_CONTROL_VALUE.value ),
-				[ key ]: newValue,
-			},
-		} );
-	};
+	const { value = DEFAULT_LINK_CONTROL_VALUE, ...propContext } = useBoundProp( linkPropTypeUtil );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<Divider />
-			<Stack
-				direction="row"
-				sx={ {
-					justifyContent: 'space-between',
-					alignItems: 'center',
-				} }
-			>
-				<ControlLabel>{ __( 'Link', 'elementor' ) }</ControlLabel>
-				<IconButton size={ SIZE } onClick={ () => handleOnChange( 'enabled', ! enabled ) }>
-					{ enabled ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
-				</IconButton>
-			</Stack>
-			<Collapse in={ enabled } timeout="auto" unmountOnExit>
-				<Stack gap={ 1.5 }>
-					<BoundPropProvider
-						value={ href }
-						setValue={ ( newHref ) => handleOnChange( 'href', newHref as UrlPropValue ) }
-						bind={ 'href' }
-					>
-						<UrlControl placeholder={ __( 'Paste URL or type', 'elementor' ) } />
-					</BoundPropProvider>
-
-					<SwitchControl
-						value={ isTargetBlank }
-						onSwitch={ () => handleOnChange( 'isTargetBlank', ! isTargetBlank ) }
-					/>
+		<PropProvider { ...propContext } value={ value }>
+			<Stack gap={ 1.5 }>
+				<Divider />
+				<Stack
+					direction="row"
+					sx={ {
+						justifyContent: 'space-between',
+						alignItems: 'center',
+					} }
+				>
+					<ControlLabel>{ __( 'Link', 'elementor' ) }</ControlLabel>
+					<PropKeyProvider bind={ 'enabled' }>
+						<ToggleIconControl />
+					</PropKeyProvider>
 				</Stack>
-			</Collapse>
-		</Stack>
+				<Collapse in={ value?.enabled } timeout="auto" unmountOnExit>
+					<Stack gap={ 1.5 }>
+						<PropKeyProvider bind={ 'href' }>
+							<UrlControl placeholder={ __( 'Paste URL or type', 'elementor' ) } />
+						</PropKeyProvider>
+
+						<PropKeyProvider bind={ 'isTargetBlank' }>
+							<SwitchControl />
+						</PropKeyProvider>
+					</Stack>
+				</Collapse>
+			</Stack>
+		</PropProvider>
 	);
 } );
 
+// @TODO Should be refactored in EDS-1086
+const ToggleIconControl = () => {
+	const { value = false, setValue } = useBoundProp();
+
+	const handleOnChange = () => setValue( ! value );
+
+	return (
+		<IconButton size={ SIZE } onClick={ handleOnChange }>
+			{ value ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
+		</IconButton>
+	);
+};
+
 // @TODO Should be refactored in ED-16323
-const SwitchControl = ( { value, onSwitch }: { value: boolean; onSwitch: () => void } ) => {
+const SwitchControl = () => {
+	const { value = false, setValue } = useBoundProp();
+
+	const onChange = () => {
+		setValue( ! value );
+	};
+
 	return (
 		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
 			<Grid item>
 				<ControlLabel>{ __( 'Open in new tab', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item>
-				<Switch checked={ value } onChange={ onSwitch } />
+				<Switch checked={ value } onChange={ onChange } />
 			</Grid>
 		</Grid>
 	);

package/src/controls/linked-dimensions-control.tsx

@@ -1,31 +1,32 @@
 import * as React from 'react';
-import { linkedDimensionsPropTypeUtil, type PropValue } from '@elementor/editor-props';
+import { linkedDimensionsPropTypeUtil, type LinkedDimensionsPropValue, type PropKey } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } 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';
 
-export type Position = 'top' | 'right' | 'bottom' | 'left';
-
 export const LinkedDimensionsControl = createControl( ( { label }: { label: string } ) => {
-	const { value, setValue } = useBoundProp( linkedDimensionsPropTypeUtil );
+	const { value, setValue, propType } = useBoundProp( linkedDimensionsPropTypeUtil );
 	const { top, right, bottom, left, isLinked = true } = value || {};
 
-	const setLinkedValue = ( position: Position, newValue: PropValue ) => {
-		const updatedValue = {
-			isLinked,
-			top: isLinked ? newValue : top,
-			right: isLinked ? newValue : right,
-			bottom: isLinked ? newValue : bottom,
-			left: isLinked ? newValue : left,
-			[ position ]: newValue,
-		};
+	const setLinkedValue: SetValue< LinkedDimensionsPropValue[ 'value' ] > = ( newValue, _, meta ) => {
+		if ( ! isLinked ) {
+			return setValue( newValue );
+		}
 
-		setValue( updatedValue );
+		const newDimension = newValue[ meta?.bind as keyof LinkedDimensionsPropValue[ 'value' ] ];
+
+		setValue( {
+			isLinked,
+			top: newDimension,
+			right: newDimension,
+			bottom: newDimension,
+			left: newDimension,
+		} );
 	};
 
 	const toggleLinked = () => {
@@ -43,7 +44,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
 	return (
-		<>
+		<PropProvider propType={ propType } value={ value } setValue={ setLinkedValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
@@ -63,12 +64,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'top' }
-							value={ top }
-							setValue={ setLinkedValue }
-							startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
-						/>
+						<Control bind={ 'top' } startIcon={ <SideTopIcon fontSize={ 'tiny' } /> } />
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -76,12 +72,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'right' }
-							value={ right }
-							setValue={ setLinkedValue }
-							startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
-						/>
+						<Control bind={ 'right' } startIcon={ <SideRightIcon fontSize={ 'tiny' } /> } />
 					</Grid>
 				</Grid>
 			</Stack>
@@ -91,12 +82,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'bottom' }
-							value={ bottom }
-							setValue={ setLinkedValue }
-							startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
-						/>
+						<Control bind={ 'bottom' } startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> } />
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -104,31 +90,16 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control
-							bind={ 'left' }
-							value={ left }
-							setValue={ setLinkedValue }
-							startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
-						/>
+						<Control bind={ 'left' } startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> } />
 					</Grid>
 				</Grid>
 			</Stack>
-		</>
+		</PropProvider>
 	);
 } );
 
-const Control = ( {
-	bind,
-	startIcon,
-	value,
-	setValue,
-}: {
-	bind: Position;
-	value: PropValue;
-	startIcon: React.ReactNode;
-	setValue: ( bind: Position, newValue: PropValue ) => void;
-} ) => (
-	<BoundPropProvider setValue={ ( newValue ) => setValue( bind, newValue ) } value={ value } bind={ bind }>
+const Control = ( { bind, startIcon }: { bind: PropKey; startIcon: React.ReactNode } ) => (
+	<PropKeyProvider bind={ bind }>
 		<SizeControl startIcon={ startIcon } />
-	</BoundPropProvider>
+	</PropKeyProvider>
 );

package/src/controls/number-control.tsx

@@ -6,7 +6,7 @@ import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-const isEmptyOrNaN = ( value?: string | number ) =>
+const isEmptyOrNaN = ( value?: string | number | null ) =>
 	value === null || value === undefined || value === '' || Number.isNaN( Number( value ) );
 
 export const NumberControl = createControl(

package/src/controls/stroke-control.tsx

@@ -1,71 +1,41 @@
 import * as React from 'react';
-import { type ColorPropValue, type PropValue, type SizePropValue, strokePropTypeUtil } from '@elementor/editor-props';
+import { strokePropTypeUtil } from '@elementor/editor-props';
 import { Grid, Stack } 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 { createControl } from '../create-control';
 import { ColorControl } from './color-control';
 import { SizeControl, type Unit } from './size-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
-export type StrokeProps< T > = {
+export type StrokeProps = {
 	bind: string;
-	value: T;
-	setValue: ( v: T ) => void;
 	label: string;
 	children: React.ReactNode;
 };
+
 const units: Unit[] = [ 'px', 'em', 'rem' ];
 
 export const StrokeControl = createControl( () => {
-	const { value, setValue } = useBoundProp( strokePropTypeUtil );
-
-	const setStrokeWidth = ( newValue: SizePropValue ) => {
-		const updatedValue = {
-			...value,
-			width: newValue,
-		};
-
-		setValue( updatedValue );
-	};
-
-	const setStrokeColor = ( newValue: ColorPropValue ) => {
-		const updatedValue = {
-			...value,
-			color: newValue,
-		};
-
-		setValue( updatedValue );
-	};
+	const propContext = useBoundProp( strokePropTypeUtil );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<Control
-				bind="width"
-				label={ __( 'Stroke Width', 'elementor' ) }
-				value={ value?.width }
-				setValue={ setStrokeWidth }
-			>
-				<SizeControl units={ units } />
-			</Control>
-
-			<Control
-				bind="color"
-				label={ __( 'Stroke Color', 'elementor' ) }
-				value={ value?.color }
-				setValue={ setStrokeColor }
-			>
-				<ColorControl />
-			</Control>
-		</Stack>
+		<PropProvider { ...propContext }>
+			<Stack gap={ 1.5 }>
+				<Control bind="width" label={ __( 'Stroke Width', 'elementor' ) }>
+					<SizeControl units={ units } />
+				</Control>
+				<Control bind="color" label={ __( 'Stroke Color', 'elementor' ) }>
+					<ColorControl />
+				</Control>
+			</Stack>
+		</PropProvider>
 	);
 } );
 
-const Control = < T extends PropValue >( { bind, value, setValue, label, children }: StrokeProps< T > ) => (
-	<BoundPropProvider bind={ bind } value={ value } setValue={ setValue as SetContextValue }>
+const Control = ( { bind, label, children }: StrokeProps ) => (
+	<PropKeyProvider bind={ bind }>
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ label }</ControlLabel>
@@ -74,5 +44,5 @@ const Control = < T extends PropValue >( { bind, value, setValue, label, childre
 				{ children }
 			</Grid>
 		</Grid>
-	</BoundPropProvider>
+	</PropKeyProvider>
 );

package/src/controls/url-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type UrlPropValue } from '@elementor/editor-props';
+import { urlPropTypeUtil } from '@elementor/editor-props';
 import { TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -7,23 +7,13 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 export const UrlControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useBoundProp< UrlPropValue >();
+	const { value, setValue } = useBoundProp( urlPropTypeUtil );
 
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) =>
-		setValue( {
-			$$type: 'url',
-			value: event.target.value,
-		} );
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
 	return (
 		<ControlActions>
-			<TextField
-				size="tiny"
-				fullWidth
-				value={ value?.value }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
+			<TextField size="tiny" fullWidth value={ value } onChange={ handleChange } placeholder={ placeholder } />
 		</ControlActions>
 	);
 } );

package/src/index.ts

@@ -26,12 +26,13 @@ export type { ControlComponent } from './create-control';
 export type { ToggleButtonGroupItem } from './components/control-toggle-button-group';
 export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
 export type { ControlActionsItems } from './control-actions/control-actions-context';
-export type { BoundPropProviderProps } from './bound-prop-context';
+export type { PropProviderProps } from './bound-prop-context';
+export type { SetValue } from './bound-prop-context/prop-context';
 
 // providers
 export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';
-export { useBoundProp, BoundPropProvider } from './bound-prop-context';
 export { ControlActionsProvider, useControlActions } from './control-actions/control-actions-context';
+export { useBoundProp, PropProvider, PropKeyProvider } from './bound-prop-context';
 
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';

package/src/bound-prop-context.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { createContext, useContext } from 'react';
-import { type CreateOptions, type PropKey, type PropTypeUtil, type PropValue } from '@elementor/editor-props';
-
-// Context
-export type BoundPropContext< T extends PropValue > = {
-	bind: PropKey;
-	setValue: ( value: T | null ) => void;
-	value: T;
-};
-
-const BoundPropContext = createContext< BoundPropContext< PropValue > | null >( null );
-
-// Provider
-export type BoundPropProviderProps< T extends PropValue > = BoundPropContext< T > & {
-	children: React.ReactNode;
-	setValue: ( value: T | null ) => void;
-};
-
-export const BoundPropProvider = ( { children, value, setValue, bind }: BoundPropProviderProps< PropValue > ) => {
-	return <BoundPropContext.Provider value={ { value, setValue, bind } }>{ children }</BoundPropContext.Provider>;
-};
-
-// Hook
-type SetValue< T > = ( value: T | null, options?: CreateOptions ) => void;
-
-type UseBoundProp< TValue > = {
-	bind: PropKey;
-	setValue: SetValue< TValue >;
-	value: TValue;
-};
-
-export function useBoundProp< TValue extends PropValue >(): BoundPropContext< TValue >;
-
-export function useBoundProp< TKey extends string, TValue extends PropValue >(
-	propTypeUtil: PropTypeUtil< TKey, TValue >
-): UseBoundProp< TValue >;
-
-export function useBoundProp< TKey extends string, TValue extends PropValue >(
-	propTypeUtil?: PropTypeUtil< TKey, TValue >
-) {
-	const boundPropContext = useContext< BoundPropContext< TValue > >( BoundPropContext as never );
-
-	if ( ! boundPropContext ) {
-		throw new Error( 'useBoundProp must be used within a BoundPropProvider' );
-	}
-
-	if ( ! propTypeUtil ) {
-		return boundPropContext;
-	}
-
-	function setValue( value: TValue | null, options?: CreateOptions ) {
-		if ( value === null ) {
-			return boundPropContext.setValue( null );
-		}
-
-		return boundPropContext.setValue( propTypeUtil?.create( value, options ) as TValue );
-	}
-
-	const value = propTypeUtil.extract( boundPropContext.value );
-
-	return {
-		...boundPropContext,
-		setValue,
-		value,
-	};
-}