@elementor/editor-controls 0.4.1 → 0.6.0

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,20 +7,15 @@ 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 handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) =>
-		setValue( {
-			$$type: 'url',
-			value: event.target.value,
-		} );
+	const { value, setValue } = useBoundProp( urlPropTypeUtil );
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
 	return (
 		<ControlActions>
 			<TextField
 				size="tiny"
 				fullWidth
-				value={ value?.value }
+				value={ value ?? '' }
 				onChange={ handleChange }
 				placeholder={ placeholder }
 			/>

package/src/index.ts

@@ -1,5 +1,6 @@
 // control types
 export { ImageControl } from './controls/image-control';
+export { AutocompleteControl } from './controls/autocomplete-control';
 export { TextControl } from './controls/text-control';
 export { TextAreaControl } from './controls/text-area-control';
 export { SizeControl } from './controls/size-control';
@@ -26,12 +27,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,
-	};
-}