@elementor/editor-controls 0.1.1 → 0.2.0

package/src/controls/select-control.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { type PropValue } from '@elementor/editor-props';
+import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { MenuItem, Select, type SelectChangeEvent } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-type Props< T > = {
-	options: Array< { label: string; value: T; disabled?: boolean } >;
+type Props = {
+	options: Array< { label: string; value: StringPropValue[ 'value' ]; disabled?: boolean } >;
 };
 
-export const SelectControl = createControl( < T extends PropValue >( { options }: Props< T > ) => {
-	const { value, setValue } = useBoundProp< T >();
+export const SelectControl = createControl( ( { options }: Props ) => {
+	const { value, setValue } = useBoundProp( stringPropTypeUtil );
 
-	const handleChange = ( event: SelectChangeEvent< T > ) => {
-		setValue( event.target.value as T );
+	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
+		setValue( event.target.value );
 	};
 
 	return (

package/src/controls/size-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SizePropValue } from '@elementor/editor-props';
+import { sizePropTypeUtil } from '@elementor/editor-props';
 import { InputAdornment } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -22,25 +22,19 @@ export type SizeControlProps = {
 };
 
 export const SizeControl = createControl( ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
-	const { value, setValue } = useBoundProp< SizePropValue | undefined >();
+	const { value, setValue } = useBoundProp( sizePropTypeUtil );
 
-	const [ state, setState ] = useSyncExternalState< SizePropValue >( {
+	const [ state, setState ] = useSyncExternalState( {
 		external: value,
 		setExternal: setValue,
-		persistWhen: ( controlValue ) => !! controlValue?.value?.size || controlValue?.value?.size === 0,
-		fallback: ( controlValue ) => ( {
-			$$type: 'size',
-			value: { unit: controlValue?.value?.unit || defaultUnit, size: defaultSize },
-		} ),
+		persistWhen: ( controlValue ) => !! controlValue?.size || controlValue?.size === 0,
+		fallback: ( controlValue ) => ( { unit: controlValue?.unit || defaultUnit, size: defaultSize } ),
 	} );
 
 	const handleUnitChange = ( unit: Unit ) => {
 		setState( ( prev ) => ( {
-			...prev,
-			value: {
-				...prev.value,
-				unit,
-			},
+			size: prev?.size ?? defaultSize,
+			unit,
 		} ) );
 	};
 
@@ -49,10 +43,7 @@ export const SizeControl = createControl( ( { units = defaultUnits, placeholder,
 
 		setState( ( prev ) => ( {
 			...prev,
-			value: {
-				...prev.value,
-				size: size || size === '0' ? parseFloat( size ) : defaultSize,
-			},
+			size: size || size === '0' ? parseFloat( size ) : defaultSize,
 		} ) );
 	};
 
@@ -63,13 +54,13 @@ export const SizeControl = createControl( ( { units = defaultUnits, placeholder,
 					<SelectionEndAdornment
 						options={ units }
 						onClick={ handleUnitChange }
-						value={ state.value.unit ?? defaultUnit }
+						value={ state?.unit ?? defaultUnit }
 					/>
 				}
 				placeholder={ placeholder }
 				startAdornment={ startIcon ?? <InputAdornment position="start">{ startIcon }</InputAdornment> }
 				type="number"
-				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
+				value={ Number.isNaN( state?.size ) ? '' : state?.size }
 				onChange={ handleSizeChange }
 			/>
 		</ControlActions>

package/src/controls/stroke-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ColorPropValue, type PropValue, type SizePropValue, type StrokePropValue } from '@elementor/editor-props';
+import { type ColorPropValue, type PropValue, type SizePropValue, strokePropTypeUtil } from '@elementor/editor-props';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -18,34 +18,27 @@ export type StrokeProps< T > = {
 	label: string;
 	children: React.ReactNode;
 };
-
 const units: Unit[] = [ 'px', 'em', 'rem' ];
 
 export const StrokeControl = createControl( () => {
-	const { value, setValue } = useBoundProp< StrokePropValue >();
+	const { value, setValue } = useBoundProp( strokePropTypeUtil );
 
 	const setStrokeWidth = ( newValue: SizePropValue ) => {
 		const updatedValue = {
-			...value?.value,
+			...value,
 			width: newValue,
 		};
 
-		setValue( {
-			$$type: 'stroke',
-			value: updatedValue,
-		} );
+		setValue( updatedValue );
 	};
 
 	const setStrokeColor = ( newValue: ColorPropValue ) => {
 		const updatedValue = {
-			...value?.value,
+			...value,
 			color: newValue,
 		};
 
-		setValue( {
-			$$type: 'stroke',
-			value: updatedValue,
-		} );
+		setValue( updatedValue );
 	};
 
 	return (
@@ -53,7 +46,7 @@ export const StrokeControl = createControl( () => {
 			<Control
 				bind="width"
 				label={ __( 'Stroke Width', 'elementor' ) }
-				value={ value?.value.width }
+				value={ value?.width }
 				setValue={ setStrokeWidth }
 			>
 				<SizeControl units={ units } />
@@ -62,7 +55,7 @@ export const StrokeControl = createControl( () => {
 			<Control
 				bind="color"
 				label={ __( 'Stroke Color', 'elementor' ) }
-				value={ value?.value.color }
+				value={ value?.color }
 				setValue={ setStrokeColor }
 			>
 				<ColorControl />

package/src/controls/text-area-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { stringPropTypeUtil } from '@elementor/editor-props';
 import { TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -10,7 +11,7 @@ type Props = {
 };
 
 export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
-	const { value, setValue } = useBoundProp< string >();
+	const { value, setValue } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.value );

package/src/controls/text-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { stringPropTypeUtil } from '@elementor/editor-props';
 import { TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -6,7 +7,7 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useBoundProp< string >( '' );
+	const { value, setValue } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 

package/src/controls/toggle-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type PropValue } from '@elementor/editor-props';
+import { type PropValue, stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { type ToggleButtonProps } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -13,17 +13,17 @@ type ToggleControlProps< T extends PropValue > = {
 };
 
 export const ToggleControl = createControl(
-	< T extends PropValue >( { options, fullWidth = false, size = 'tiny' }: ToggleControlProps< T > ) => {
-		const { value, setValue } = useBoundProp< T | null >();
+	( { options, fullWidth = false, size = 'tiny' }: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
+		const { value, setValue } = useBoundProp( stringPropTypeUtil );
 
-		const handleToggle = ( option: T | null ) => {
+		const handleToggle = ( option: StringPropValue[ 'value' ] | null ) => {
 			setValue( option );
 		};
 
 		return (
 			<ControlToggleButtonGroup
 				items={ options }
-				value={ value || null }
+				value={ value ?? null }
 				onChange={ handleToggle }
 				exclusive={ true }
 				fullWidth={ fullWidth }

package/src/controls/url-control.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { type UrlPropValue } from '@elementor/editor-props';
+import { TextField } from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context';
+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,
+		} );
+
+	return (
+		<ControlActions>
+			<TextField
+				size="tiny"
+				fullWidth
+				value={ value?.value }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
+		</ControlActions>
+	);
+} );

package/src/hooks/use-sync-external-state.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
 
 type UseInternalStateOptions< TValue > = {
-	external: TValue | undefined;
-	setExternal: ( value: TValue | undefined ) => void;
-	persistWhen: ( value: TValue | undefined ) => boolean;
-	fallback: ( value: TValue | undefined ) => TValue;
+	external: TValue | null;
+	setExternal: ( value: TValue | null ) => void;
+	persistWhen: ( value: TValue | null ) => boolean;
+	fallback: ( value: TValue | null ) => TValue;
 };
 
 export const useSyncExternalState = < TValue, >( {
@@ -13,15 +13,15 @@ export const useSyncExternalState = < TValue, >( {
 	persistWhen,
 	fallback,
 }: UseInternalStateOptions< TValue > ) => {
-	function toExternal( internalValue: TValue | undefined ) {
+	function toExternal( internalValue: TValue | null ) {
 		if ( persistWhen( internalValue ) ) {
 			return internalValue;
 		}
 
-		return undefined;
+		return null;
 	}
 
-	function toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {
+	function toInternal( externalValue: TValue | null, internalValue: TValue | null ) {
 		if ( ! externalValue ) {
 			return fallback( internalValue );
 		}
@@ -29,7 +29,7 @@ export const useSyncExternalState = < TValue, >( {
 		return externalValue;
 	}
 
-	const [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );
+	const [ internal, setInternal ] = useState< TValue >( toInternal( external, null ) );
 
 	useEffect( () => {
 		setInternal( ( prevInternal ) => toInternal( external, prevInternal ) );

package/src/index.ts

@@ -13,6 +13,8 @@ export { NumberControl } from './controls/number-control';
 export { EqualUnequalSizesControl } from './controls/equal-unequal-sizes-control';
 export { LinkedDimensionsControl } from './controls/linked-dimensions-control';
 export { FontFamilyControl } from './controls/font-family-control';
+export { UrlControl } from './controls/url-control';
+export { LinkControl } from './controls/link-control';
 
 // components
 export { ControlLabel } from './components/control-label';