@elementor/editor-controls 0.4.0 → 0.5.0

package/src/bound-prop-context/prop-context.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { type CreateOptions, type PropKey, type PropType, type PropValue } from '@elementor/editor-props';
+
+import { HookOutsideProviderError } from './errors';
+
+type SetValueMeta = {
+	bind?: PropKey;
+};
+
+export type SetValue< T > = ( value: T, options?: CreateOptions, meta?: SetValueMeta ) => void;
+
+type PropContext< T extends PropValue, P extends PropType > = {
+	setValue: SetValue< T >;
+	value: T | null;
+	propType: P;
+};
+
+const PropContext = createContext< PropContext< PropValue, PropType > | null >( null );
+
+export type PropProviderProps< T extends PropValue, P extends PropType > = React.PropsWithChildren<
+	PropContext< T, P >
+>;
+
+export const PropProvider = < T extends PropValue, P extends PropType >( {
+	children,
+	value,
+	setValue,
+	propType,
+}: PropProviderProps< T, P > ) => {
+	// @ts-expect-error - figure out how to fix this
+	return <PropContext.Provider value={ { value, setValue, propType } }>{ children }</PropContext.Provider>;
+};
+
+export const usePropContext = < T extends PropValue, P extends PropType >() => {
+	const context = useContext( PropContext ) as PropContext< T, P > | null;
+
+	if ( ! context ) {
+		throw new HookOutsideProviderError( {
+			context: {
+				hook: 'usePropContext',
+				provider: 'PropProvider',
+			},
+		} );
+	}
+
+	return context;
+};

package/src/bound-prop-context/prop-key-context.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import {
+	type ArrayPropType,
+	type ArrayPropValue,
+	type CreateOptions,
+	type ObjectPropType,
+	type ObjectPropValue,
+	type PropKey,
+	type PropType,
+	type PropValue,
+} from '@elementor/editor-props';
+
+import { HookOutsideProviderError, MissingPropTypeError, UnsupportedParentError } from './errors';
+import { type SetValue, usePropContext } from './prop-context';
+
+export type PropKeyContextValue< T, P > = {
+	bind: PropKey;
+	setValue: SetValue< T >;
+	value: T;
+	propType: P;
+};
+
+export const PropKeyContext = createContext< PropKeyContextValue< PropValue, PropType > | null >( null );
+
+type PropKeyProviderProps = React.PropsWithChildren< {
+	bind: PropKey;
+} >;
+
+export const PropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
+	const { propType } = usePropContext();
+
+	if ( ! propType ) {
+		throw new MissingPropTypeError( { context: { bind } } );
+	}
+
+	if ( propType.kind === 'array' ) {
+		return <ArrayPropKeyProvider bind={ bind }>{ children }</ArrayPropKeyProvider>;
+	}
+
+	if ( propType.kind === 'object' ) {
+		return <ObjectPropKeyProvider bind={ bind }>{ children }</ObjectPropKeyProvider>;
+	}
+
+	throw new UnsupportedParentError( { context: { propType } } );
+};
+
+const ObjectPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
+	const context = usePropContext< ObjectPropValue[ 'value' ], ObjectPropType >();
+
+	const setValue: SetValue< PropValue > = ( value, options, meta ) => {
+		const newValue = {
+			...context.value,
+			[ bind ]: value,
+		};
+
+		return context?.setValue( newValue, options, { ...meta, bind } );
+	};
+
+	const value = context.value?.[ bind ];
+
+	const propType = context.propType.shape[ bind ];
+
+	return (
+		<PropKeyContext.Provider value={ { ...context, value, setValue, bind, propType } }>
+			{ children }
+		</PropKeyContext.Provider>
+	);
+};
+
+const ArrayPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
+	const context = usePropContext< ArrayPropValue[ 'value' ], ArrayPropType >();
+
+	const setValue = ( value: PropValue, options?: CreateOptions ) => {
+		const newValue = [ ...( context.value ?? [] ) ];
+
+		newValue[ Number( bind ) ] = value;
+
+		return context?.setValue( newValue, options, { bind } );
+	};
+
+	const value = context.value?.[ Number( bind ) ];
+
+	const propType = context.propType.item_prop_type;
+
+	return (
+		<PropKeyContext.Provider value={ { ...context, value, setValue, bind, propType } }>
+			{ children }
+		</PropKeyContext.Provider>
+	);
+};
+
+export const usePropKeyContext = () => {
+	const context = useContext( PropKeyContext );
+
+	if ( ! context ) {
+		throw new HookOutsideProviderError( {
+			context: { hook: 'usePropKeyContext', provider: 'PropKeyProvider' },
+		} );
+	}
+
+	return context;
+};

package/src/bound-prop-context/use-bound-prop.ts

@@ -0,0 +1,69 @@
+import {
+	type CreateOptions,
+	type PropKey,
+	type PropType,
+	type PropTypeUtil,
+	type PropValue,
+} from '@elementor/editor-props';
+
+import { MissingPropTypeError } from './errors';
+import { type SetValue } from './prop-context';
+import { type PropKeyContextValue, usePropKeyContext } from './prop-key-context';
+
+type UseBoundProp< TValue extends PropValue > = {
+	bind: PropKey;
+	setValue: SetValue< TValue | null >;
+	value: TValue;
+	propType: PropType;
+};
+
+export function useBoundProp< T extends PropValue = PropValue >(): PropKeyContextValue< T, PropType >;
+
+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 propKeyContext = usePropKeyContext();
+
+	// allow using the hook without a propTypeUtil, with no modifications or validations.
+	if ( ! propTypeUtil ) {
+		return propKeyContext;
+	}
+
+	function setValue( value: TValue | null, options: CreateOptions, meta: { bind?: PropKey } ) {
+		if ( value === null ) {
+			return propKeyContext?.setValue( null, options, meta );
+		}
+
+		return propKeyContext?.setValue( propTypeUtil?.create( value, options ), {}, meta );
+	}
+
+	const propType = resolveUnionPropType( propKeyContext.propType, propTypeUtil.key );
+
+	const value = propTypeUtil.extract( propKeyContext.value ?? propType.default ?? null );
+
+	return {
+		...propKeyContext,
+		setValue,
+		value,
+		propType,
+	};
+}
+
+// utils
+const resolveUnionPropType = ( propType: PropType, key: string ): PropType => {
+	let resolvedPropType = propType;
+
+	if ( propType.kind === 'union' ) {
+		resolvedPropType = propType.prop_types[ key ];
+	}
+
+	if ( ! resolvedPropType ) {
+		throw new MissingPropTypeError( { context: { key } } );
+	}
+
+	return resolvedPropType;
+};

package/src/components/repeater.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useId, useRef, useState } from 'react';
+import { type PropKey } from '@elementor/editor-props';
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -32,9 +33,8 @@ export type RepeaterProps< T > = {
 		Label: React.ComponentType< { value: T } >;
 		Icon: React.ComponentType< { value: T } >;
 		Content: React.ComponentType< {
-			value: T;
-			setValue: ( newValue: T ) => void;
 			anchorEl: AnchorEl;
+			bind: PropKey;
 		} >;
 	};
 };
@@ -99,17 +99,7 @@ export const Repeater = < T, >( {
 						duplicateItem={ () => duplicateRepeaterItem( index ) }
 						toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
 					>
-						{ ( props ) => (
-							<itemSettings.Content
-								{ ...props }
-								value={ value }
-								setValue={ ( newValue ) =>
-									setRepeaterValues(
-										repeaterValues.map( ( item, i ) => ( i === index ? newValue : item ) )
-									)
-								}
-							/>
-						) }
+						{ ( props ) => <itemSettings.Content { ...props } bind={ String( index ) } /> }
 					</RepeaterItem>
 				) ) }
 			</Stack>

package/src/controls/background-control/background-control.tsx

@@ -1,57 +1,34 @@
 import * as React from 'react';
-import {
-	type BackgroundColorOverlayPropValue,
-	backgroundPropTypeUtil,
-	type ColorPropValue,
-	type PropValue,
-} from '@elementor/editor-props';
+import { backgroundPropTypeUtil } 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 { BackgroundOverlayRepeaterControl } from './background-overlay/background-overlay-repeater-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 export const BackgroundControl = createControl( () => {
-	const { value, setValue } = useBoundProp( backgroundPropTypeUtil );
-
-	const setColor = ( newValue: ColorPropValue ) => {
-		setValue( {
-			...value,
-			color: newValue,
-		} );
-	};
-
-	const setBackgroundColorOverlay = ( newValue: BackgroundColorOverlayPropValue ) => {
-		setValue( {
-			...value,
-			'background-overlay': newValue,
-		} );
-	};
+	const propContext = useBoundProp( backgroundPropTypeUtil );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<BoundPropProvider
-				bind="background-overlay"
-				value={ value?.[ 'background-overlay' ] }
-				setValue={ setBackgroundColorOverlay as SetContextValue }
-			>
-				<BackgroundOverlayRepeaterControl />
-			</BoundPropProvider>
-			<BoundPropProvider bind="color" value={ value?.color } setValue={ setColor as SetContextValue }>
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-					<Grid item xs={ 6 }>
-						<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 }>
-						<ColorControl />
+		<PropProvider { ...propContext }>
+			<Stack gap={ 1.5 }>
+				<PropKeyProvider bind="background-overlay">
+					<BackgroundOverlayRepeaterControl />
+				</PropKeyProvider>
+				<PropKeyProvider bind="color">
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 }>
+							<ColorControl />
+						</Grid>
 					</Grid>
-				</Grid>
-			</BoundPropProvider>
-		</Stack>
+				</PropKeyProvider>
+			</Stack>
+		</PropProvider>
 	);
 } );

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -1,46 +1,41 @@
 import * as React from 'react';
 import {
-	type BackgroundColorOverlayPropValue,
+	backgroundColorOverlayPropTypeUtil,
 	type BackgroundOverlayItemPropValue,
 	backgroundOverlayPropTypeUtil,
-	type BackgroundOverlayPropValue,
-	type PropValue,
+	type PropKey,
 } from '@elementor/editor-props';
 import { Grid, Stack, UnstableColorIndicator } 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 { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
 import { ColorControl } from '../../color-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 const initialBackgroundOverlay: BackgroundOverlayItemPropValue = {
 	$$type: 'background-color-overlay',
 	value: 'rgba(0, 0, 0, 0.2)',
 };
 
 export const BackgroundOverlayRepeaterControl = createControl( () => {
-	const { value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
-
-	const setColorOverlay = ( newValue: BackgroundOverlayPropValue[ 'value' ] ) => {
-		setValue( newValue );
-	};
+	const { propType, value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<Repeater
-			values={ overlayValues ?? [] }
-			setValues={ setColorOverlay }
-			label={ __( 'Overlay', 'elementor' ) }
-			itemSettings={ {
-				Icon: ItemIcon,
-				Label: ItemLabel,
-				Content: ItemContent,
-				initialValues: initialBackgroundOverlay,
-			} }
-		/>
+		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
+			<Repeater
+				values={ overlayValues ?? [] }
+				setValues={ setValue }
+				label={ __( 'Overlay', 'elementor' ) }
+				itemSettings={ {
+					Icon: ItemIcon,
+					Label: ItemLabel,
+					Content: ItemContent,
+					initialValues: initialBackgroundOverlay,
+				} }
+			/>
+		</PropProvider>
 	);
 } );
 
@@ -48,36 +43,25 @@ const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => (
 	<UnstableColorIndicator size="inherit" component="span" value={ value.value } />
 );
 
-const ItemContent = ( {
-	value,
-	setValue,
-}: {
-	value: BackgroundOverlayItemPropValue;
-	setValue: ( newValue: BackgroundOverlayItemPropValue ) => void;
-} ) => {
-	const setBackgroundColorOverlay = ( newValue: BackgroundColorOverlayPropValue ) => {
-		setValue( {
-			$$type: 'background-color-overlay',
-			value: newValue.value,
-		} );
-	};
+const ItemContent = ( { bind }: { bind: PropKey } ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<Content />
+		</PropKeyProvider>
+	);
+};
 
+const Content = () => {
 	return (
 		<Stack gap={ 1.5 }>
-			<BoundPropProvider
-				bind="background-color-overlay"
-				value={ value }
-				setValue={ setBackgroundColorOverlay as SetContextValue }
-			>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<ColorControl />
-					</Grid>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 12 }>
+					<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 12 }>
+					<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
 				</Grid>
-			</BoundPropProvider>
+			</Grid>
 		</Stack>
 	);
 };