@elementor/editor-controls 0.1.0 → 0.2.0

package/src/bound-prop-context.tsx

@@ -1,30 +1,67 @@
 import * as React from 'react';
 import { createContext, useContext } from 'react';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+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 | undefined ) => void;
-	value: T | undefined;
+	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;
 };
 
-const BoundPropContext = createContext< BoundPropContext< PropValue > | null >( null );
 export const BoundPropProvider = ( { children, value, setValue, bind }: BoundPropProviderProps< PropValue > ) => {
 	return <BoundPropContext.Provider value={ { value, setValue, bind } }>{ children }</BoundPropContext.Provider>;
 };
 
-export function useBoundProp< T extends PropValue >(): BoundPropContext< T | undefined >;
-export function useBoundProp< T extends PropValue >( defaultValue: T ): BoundPropContext< T >;
-export function useBoundProp< T extends PropValue >( defaultValue?: T ) {
-	const boundPropContext = useContext< BoundPropContext< T > >( BoundPropContext as never );
+// 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 BoundPropContext' );
+		throw new Error( 'useBoundProp must be used within a BoundPropProvider' );
+	}
+
+	if ( ! propTypeUtil ) {
+		return boundPropContext;
 	}
 
-	return { ...boundPropContext, value: boundPropContext.value ?? defaultValue };
+	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,
+	};
 }

package/src/components/control-toggle-button-group.tsx

@@ -6,6 +6,7 @@ import {
 	ToggleButtonGroup,
 	type ToggleButtonProps,
 	Tooltip,
+	useTheme,
 } from '@elementor/ui';
 
 type RenderContentProps = { size: ToggleButtonProps[ 'size' ] };
@@ -21,13 +22,13 @@ const StyledToggleButtonGroup = styled( ToggleButtonGroup )`
 	${ ( { justify } ) => `justify-content: ${ justify };` }
 `;
 
-type ExclusiveValue< TValue > = TValue | null;
+type ExclusiveValue< TValue > = TValue;
 type NonExclusiveValue< TValue > = TValue[];
 
 type Props< TValue > = {
 	justify?: StackProps[ 'justifyContent' ];
 	size?: ToggleButtonProps[ 'size' ];
-	items: ToggleButtonGroupItem< TValue >[];
+	items: ToggleButtonGroupItem< TValue | null >[];
 	fullWidth?: boolean;
 } & (
 	| {
@@ -51,6 +52,8 @@ export const ControlToggleButtonGroup = < TValue, >( {
 	exclusive = false,
 	fullWidth = false,
 }: Props< TValue > ) => {
+	const isRtl = 'rtl' === useTheme().direction;
+
 	const handleChange = (
 		_: React.MouseEvent< HTMLElement >,
 		newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
@@ -59,7 +62,15 @@ export const ControlToggleButtonGroup = < TValue, >( {
 	};
 
 	return (
-		<StyledToggleButtonGroup justify={ justify } value={ value } onChange={ handleChange } exclusive={ exclusive }>
+		<StyledToggleButtonGroup
+			justify={ justify }
+			value={ value }
+			onChange={ handleChange }
+			exclusive={ exclusive }
+			sx={ {
+				direction: isRtl ? 'rtl /* @noflip */' : 'ltr /* @noflip */',
+			} }
+		>
 			{ items.map( ( { label, value: buttonValue, renderContent: Content, showTooltip } ) =>
 				showTooltip ? (
 					<Tooltip key={ buttonValue } title={ label } disableFocusListener={ true } placement="top">

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+	backgroundImagePropTypeUtil,
 	type backgroundImageTypePropValue,
 	type ColorGradientPropValue,
 	type PropValue,
@@ -15,15 +16,10 @@ import { ColorControl } from './color-control';
 type SetContextValue = ( v: PropValue ) => void;
 
 export const BackgroundOverlayRepeaterControl = createControl( () => {
-	const { value, setValue } = useBoundProp< backgroundImageTypePropValue >();
-
-	const colorOverlayValues = value?.value;
+	const { value: colorOverlayValues, setValue } = useBoundProp( backgroundImagePropTypeUtil );
 
 	const setColorOverlay = ( newValue: backgroundImageTypePropValue[ 'value' ] ) => {
-		setValue( {
-			$$type: 'background-image',
-			value: newValue,
-		} );
+		setValue( newValue );
 	};
 
 	return (

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { type BoxShadowPropValue, type PropValue, type ShadowPropValue } from '@elementor/editor-props';
+import {
+	boxShadowPropTypeUtil,
+	type BoxShadowPropValue,
+	type PropValue,
+	type ShadowPropValue,
+} from '@elementor/editor-props';
 import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -13,20 +18,15 @@ import { SizeControl } from './size-control';
 type SetContextValue = ( v: PropValue ) => void;
 
 export const BoxShadowRepeaterControl = createControl( () => {
-	const { value, setValue } = useBoundProp< BoxShadowPropValue >();
-
-	const boxShadowValues = value?.value;
+	const { value: boxShadowValues, setValue } = useBoundProp( boxShadowPropTypeUtil );
 
 	const setBoxShadow = ( newValue: BoxShadowPropValue[ 'value' ] ) => {
-		setValue( {
-			$$type: 'box-shadow',
-			value: newValue,
-		} );
+		setValue( newValue );
 	};
 
 	return (
 		<Repeater
-			values={ boxShadowValues }
+			values={ boxShadowValues ?? [] }
 			setValues={ setBoxShadow }
 			label={ __( 'Box shadow', 'elementor' ) }
 			itemSettings={ {

package/src/controls/color-control.tsx

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

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

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { type ReactNode, useId, useRef } from 'react';
-import { type SizePropValue, type TransformablePropValue } from '@elementor/editor-props';
+import {
+	type PropKey,
+	type PropTypeUtil,
+	type PropValue,
+	sizePropTypeUtil,
+	type SizePropValue,
+} from '@elementor/editor-props';
 import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -8,95 +14,69 @@ import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { SizeControl } from './size-control';
 
-type MultiSizePropValue< TMultiPropType extends string > = TransformablePropValue<
-	TMultiPropType,
-	Record< string, SizePropValue >
->;
+type SetContextValue = ( v: PropValue ) => void;
 
-type Item< TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > > = {
+type MultiSizePropValue = Record< PropKey, SizePropValue >;
+
+type Item = {
 	icon: ReactNode;
 	label: string;
-	bind: keyof TPropValue[ 'value' ];
+	bind: PropKey;
 };
 
-export type EqualUnequalItems<
-	TMultiPropType extends string,
-	TPropValue extends MultiSizePropValue< TMultiPropType >,
-> = [
-	Item< TMultiPropType, TPropValue >,
-	Item< TMultiPropType, TPropValue >,
-	Item< TMultiPropType, TPropValue >,
-	Item< TMultiPropType, TPropValue >,
-];
-
-type Props< TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > > = {
+export type EqualUnequalItems = [ Item, Item, Item, Item ];
+
+type Props< TMultiPropType extends string, TPropValue extends MultiSizePropValue > = {
 	label: string;
 	icon: ReactNode;
-	items: EqualUnequalItems< TMultiPropType, TPropValue >;
-	multiSizeType: TMultiPropType;
+	items: EqualUnequalItems;
+	multiSizePropTypeUtil: PropTypeUtil< TMultiPropType, TPropValue >;
 };
 
-function hasMixedSizes( values: SizePropValue[] ): boolean {
+const isEqualSizes = ( values: SizePropValue[], items: EqualUnequalItems ) => {
+	if ( values.length !== items.length ) {
+		return false;
+	}
+
 	const [ firstValue, ...restValues ] = values;
 
-	return restValues.some(
-		( value ) => value?.value?.size !== firstValue?.value?.size || value?.value?.unit !== firstValue?.value?.unit
+	return restValues.every(
+		( value ) => value.value?.size === firstValue.value?.size && value.value?.unit === firstValue.value?.unit
 	);
-}
-
-function getMultiSizeProps< TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > >(
-	controlValue: TPropValue | SizePropValue | undefined,
-	items: Item< TMultiPropType, TPropValue >[]
-) {
-	return controlValue?.$$type === 'size'
-		? items.reduce( ( values: TPropValue[ 'value' ], item ) => {
-				const { bind } = item;
-				values[ bind ] = controlValue as TPropValue[ 'value' ][ keyof TPropValue[ 'value' ] ];
-
-				return values;
-		  }, {} )
-		: ( ( controlValue?.value ?? {} ) as TPropValue[ 'value' ] );
-}
+};
 
-export function EqualUnequalSizesControl<
-	TMultiPropType extends string,
-	TPropValue extends MultiSizePropValue< TMultiPropType >,
->( { label, icon, items, multiSizeType }: Props< TMultiPropType, TPropValue > ) {
+export function EqualUnequalSizesControl< TMultiPropType extends string, TPropValue extends MultiSizePropValue >( {
+	label,
+	icon,
+	items,
+	multiSizePropTypeUtil,
+}: Props< TMultiPropType, TPropValue > ) {
 	const popupId = useId();
 	const controlRef = useRef< HTMLElement >( null );
-	const { value: controlValue, setValue: setControlValue } = useBoundProp< TPropValue | SizePropValue >();
-
-	const setMultiSizeValue = ( newValue: TPropValue[ 'value' ] ) => {
-		setControlValue( { $$type: multiSizeType, value: newValue } as TPropValue );
-	};
+	const popupState = usePopupState( { variant: 'popover', popupId } );
 
-	const mappedValues = getMultiSizeProps( controlValue, items );
+	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+	const { value: multiSizeValue, setValue: setMultiSizeValue } = useBoundProp( multiSizePropTypeUtil );
 
-	const setNestedProp = ( item: Item< TMultiPropType, TPropValue >, newValue: SizePropValue ) => {
-		const { bind } = item;
+	const splitEqualValue = () => {
+		return items.reduce( ( acc, item ) => ( { ...acc, [ item.bind ]: sizePropTypeUtil.create( sizeValue ) } ), {} );
+	};
 
-		const newMappedValues: TPropValue[ 'value' ] = {
-			...mappedValues,
-			[ bind ]: newValue,
+	const setNestedProp = ( item: Item, newValue: SizePropValue ) => {
+		const newMappedValues = {
+			...( multiSizeValue ?? splitEqualValue() ),
+			[ item.bind ]: newValue,
 		};
 
-		const sizes = Object.values( newMappedValues );
-		const isMixed = hasMixedSizes( sizes );
-
-		if ( isMixed ) {
-			setMultiSizeValue( newMappedValues );
+		const isEqual = isEqualSizes( Object.values( newMappedValues ), items );
 
-			return;
+		if ( isEqual ) {
+			return setSizeValue( newValue?.value );
 		}
 
-		setControlValue( newValue );
+		setMultiSizeValue( newMappedValues );
 	};
 
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId,
-	} );
-
 	return (
 		<>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
@@ -104,9 +84,11 @@ export function EqualUnequalSizesControl<
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<EqualValuesControl
-						value={ mappedValues }
-						setValue={ setControlValue }
+					<EqualSizeControl
+						items={ items }
+						value={ sizeValue }
+						multiSizeValue={ multiSizeValue }
+						setValue={ setSizeValue }
 						iconButton={
 							<ToggleButton
 								size={ 'tiny' }
@@ -139,27 +121,31 @@ export function EqualUnequalSizesControl<
 			>
 				<Stack gap={ 1.5 }>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<NestedValueControl
+						<MultiSizeValueControl
 							item={ items[ 0 ] }
-							value={ mappedValues }
+							value={ multiSizeValue }
 							setNestedProp={ setNestedProp }
+							splitEqualValue={ splitEqualValue }
 						/>
-						<NestedValueControl
+						<MultiSizeValueControl
 							item={ items[ 1 ] }
-							value={ mappedValues }
+							value={ multiSizeValue }
 							setNestedProp={ setNestedProp }
+							splitEqualValue={ splitEqualValue }
 						/>
 					</Grid>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<NestedValueControl
+						<MultiSizeValueControl
 							item={ items[ 3 ] }
-							value={ mappedValues }
+							value={ multiSizeValue }
 							setNestedProp={ setNestedProp }
+							splitEqualValue={ splitEqualValue }
 						/>
-						<NestedValueControl
+						<MultiSizeValueControl
 							item={ items[ 2 ] }
-							value={ mappedValues }
+							value={ multiSizeValue }
 							setNestedProp={ setNestedProp }
+							splitEqualValue={ splitEqualValue }
 						/>
 					</Grid>
 				</Stack>
@@ -168,25 +154,29 @@ export function EqualUnequalSizesControl<
 	);
 }
 
-const NestedValueControl = < TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > >( {
+const MultiSizeValueControl = < TPropValue extends MultiSizePropValue >( {
 	item,
 	value,
 	setNestedProp,
+	splitEqualValue,
 }: {
-	item: Item< TMultiPropType, TPropValue >;
-	value: TPropValue[ 'value' ] | undefined;
-	setNestedProp: ( item: Item< TMultiPropType, TPropValue >, newValue: SizePropValue ) => void;
+	item: Item;
+	value: TPropValue | undefined;
+	setNestedProp: ( item: Item, newValue: SizePropValue ) => void;
+	splitEqualValue: () => TPropValue;
 } ) => {
-	const { bind } = item;
+	const handleChange = ( val: SizePropValue ) => setNestedProp( item, val );
+
+	const getMultiSizeValues = () => {
+		if ( value ) {
+			return value?.[ item.bind ] ?? null;
+		}
 
-	const nestedValue = value?.[ bind ] ? value[ bind ] : undefined;
+		return splitEqualValue()?.[ item.bind ] ?? null;
+	};
 
 	return (
-		<BoundPropProvider
-			bind={ '' }
-			setValue={ ( val ) => setNestedProp( item, val as SizePropValue ) }
-			value={ nestedValue }
-		>
+		<BoundPropProvider bind={ '' } setValue={ handleChange as SetContextValue } value={ getMultiSizeValues() }>
 			<Grid item xs={ 6 }>
 				<Grid container gap={ 1 } alignItems="center">
 					<Grid item xs={ 12 }>
@@ -201,27 +191,37 @@ const NestedValueControl = < TMultiPropType extends string, TPropValue extends M
 	);
 };
 
-const EqualValuesControl = <
-	TMultiPropType extends string,
-	TPropValue extends MultiSizePropValue< TMultiPropType >[ 'value' ],
->( {
+const EqualSizeControl = ( {
 	value,
+	items,
 	setValue,
 	iconButton,
+	multiSizeValue,
 }: {
-	value: TPropValue | undefined;
-	setValue: ( newValue: SizePropValue ) => void;
+	value: SizePropValue[ 'value' ] | null;
+	items: EqualUnequalItems;
+	setValue: ( newValue: SizePropValue[ 'value' ] ) => void;
 	iconButton: ReactNode;
+	multiSizeValue: PropValue;
 } ) => {
-	const values = Object.values( value ?? {} ) as SizePropValue[];
-	const isMixed = hasMixedSizes( values );
+	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={ ( val ) => setValue( val as SizePropValue ) }
-			value={ isMixed ? undefined : values[ 0 ] }
-		>
+		<BoundPropProvider bind={ '' } setValue={ handleChange as SetContextValue } value={ getDisplayValue() ?? null }>
 			<Stack direction="row" alignItems="center" gap={ 1 }>
 				<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
 				{ iconButton }

package/src/controls/font-family-control.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useId, useState } from 'react';
 import * as React from 'react';
+import { stringPropTypeUtil } from '@elementor/editor-props';
 import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -28,8 +29,8 @@ import { useFilteredFontFamilies } from '../hooks/use-filtered-font-families';
 const SIZE = 'tiny';
 
 export const FontFamilyControl = createControl( ( { fontFamilies } ) => {
-	const { value: fontFamily, setValue: setFontFamily } = useBoundProp< string | null >();
 	const [ searchValue, setSearchValue ] = useState( '' );
+	const { value: fontFamily, setValue: setFontFamily } = useBoundProp( stringPropTypeUtil );
 
 	const popupId = useId();
 	const popoverState = usePopupState( { variant: 'popover', popupId } );

package/src/controls/image-control.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-	type ImagePropValue,
-	type ImageSrcPropValue,
-	type PropValue,
-	type SizePropValue,
-} from '@elementor/editor-props';
+import { imagePropTypeUtil, type ImageSrcPropValue, type PropValue, type SizePropValue } from '@elementor/editor-props';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -21,26 +16,20 @@ export type ImageControlProps = {
 };
 
 export const ImageControl = createControl( ( props: ImageControlProps ) => {
-	const { value, setValue } = useBoundProp< ImagePropValue | undefined >();
-	const { src, size } = value?.value || {};
+	const { value, setValue } = useBoundProp( imagePropTypeUtil );
+	const { src, size } = value || {};
 
 	const setImageSrc = ( newValue: ImageSrcPropValue ) => {
 		setValue( {
-			$$type: 'image',
-			value: {
-				src: newValue,
-				size: size as SizePropValue,
-			},
+			src: newValue,
+			size: size as SizePropValue,
 		} );
 	};
 
 	const setImageSize = ( newValue: SizePropValue ) => {
 		setValue( {
-			$$type: 'image',
-			value: {
-				src: src as ImageSrcPropValue,
-				size: newValue,
-			},
+			src: src as ImageSrcPropValue,
+			size: newValue,
 		} );
 	};
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ImageSrcPropValue } from '@elementor/editor-props';
+import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from '@elementor/ui';
 import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
@@ -10,8 +10,8 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 export const ImageMediaControl = createControl( () => {
-	const { value, setValue } = useBoundProp< ImageSrcPropValue >();
-	const { id, url } = value?.value ?? {};
+	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
+	const { id, url } = value ?? {};
 
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
 	const src = attachment?.url ?? url;
@@ -22,14 +22,11 @@ export const ImageMediaControl = createControl( () => {
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {
 			setValue( {
-				$$type: 'image-src',
-				value: {
-					id: {
-						$$type: 'image-attachment-id',
-						value: selectedAttachment.id,
-					},
-					url: null,
+				id: {
+					$$type: 'image-attachment-id',
+					value: selectedAttachment.id,
 				},
+				url: null,
 			} );
 		},
 	} );