@elementor/editor-controls 0.1.0 → 0.2.0

package/src/controls/link-control.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { type LinkPropValue, type UrlPropValue } 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 { 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,
+	},
+};
+
+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,
+			},
+		} );
+	};
+
+	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 ) }
+					/>
+				</Stack>
+			</Collapse>
+		</Stack>
+	);
+} );
+
+// @TODO Should be refactored in ED-16323
+const SwitchControl = ( { value, onSwitch }: { value: boolean; onSwitch: () => void } ) => {
+	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 } />
+			</Grid>
+		</Grid>
+	);
+};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type LinkedDimensionsPropValue, type PropValue } from '@elementor/editor-props';
+import { linkedDimensionsPropTypeUtil, type PropValue } 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';
@@ -12,8 +12,8 @@ import { SizeControl } from './size-control';
 export type Position = 'top' | 'right' | 'bottom' | 'left';
 
 export const LinkedDimensionsControl = createControl( ( { label }: { label: string } ) => {
-	const { value, setValue } = useBoundProp< LinkedDimensionsPropValue >();
-	const { top, right, bottom, left, isLinked = true } = value?.value || {};
+	const { value, setValue } = useBoundProp( linkedDimensionsPropTypeUtil );
+	const { top, right, bottom, left, isLinked = true } = value || {};
 
 	const setLinkedValue = ( position: Position, newValue: PropValue ) => {
 		const updatedValue = {
@@ -25,10 +25,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 			[ position ]: newValue,
 		};
 
-		setValue( {
-			$$type: 'linked-dimensions',
-			value: updatedValue,
-		} );
+		setValue( updatedValue );
 	};
 
 	const toggleLinked = () => {
@@ -40,10 +37,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 			left: ! isLinked ? top : left,
 		};
 
-		setValue( {
-			$$type: 'linked-dimensions',
-			value: updatedValue,
-		} );
+		setValue( updatedValue );
 	};
 
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;

package/src/controls/number-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { numberPropTypeUtil } from '@elementor/editor-props';
 import { TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -6,26 +7,50 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 const isEmptyOrNaN = ( value?: string | number ) =>
-	value === undefined || value === '' || Number.isNaN( Number( value ) );
-
-export const NumberControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useBoundProp< number | undefined >();
-
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const eventValue: string = event.target.value;
-		setValue( isEmptyOrNaN( eventValue ) ? undefined : Number( eventValue ) );
-	};
-
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				type="number"
-				fullWidth
-				value={ isEmptyOrNaN( value ) ? '' : value }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );
+	value === null || value === undefined || value === '' || Number.isNaN( Number( value ) );
+
+export const NumberControl = createControl(
+	( {
+		placeholder,
+		max = Number.MAX_VALUE,
+		min = -Number.MAX_VALUE,
+		step = 1,
+		shouldForceInt = false,
+	}: {
+		placeholder?: string;
+		max?: number;
+		min?: number;
+		step?: number;
+		shouldForceInt?: boolean;
+	} ) => {
+		const { value, setValue } = useBoundProp( numberPropTypeUtil );
+
+		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+			const eventValue: string = event.target.value;
+
+			if ( isEmptyOrNaN( eventValue ) ) {
+				setValue( null );
+
+				return;
+			}
+
+			const formattedValue = shouldForceInt ? +parseInt( eventValue ) : Number( eventValue );
+
+			setValue( Math.min( Math.max( formattedValue, min ), max ) );
+		};
+
+		return (
+			<ControlActions>
+				<TextField
+					size="tiny"
+					type="number"
+					fullWidth
+					value={ isEmptyOrNaN( value ) ? '' : value }
+					onChange={ handleChange }
+					placeholder={ placeholder }
+					inputProps={ { step } }
+				/>
+			</ControlActions>
+		);
+	}
+);

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 PropValue, type StrokePropValue, type TransformablePropValue } 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';
 
@@ -11,50 +11,34 @@ import { SizeControl, type Unit } from './size-control';
 
 type SetContextValue = ( v: PropValue ) => void;
 
-const defaultStrokeControlValue: StrokePropValue = {
-	$$type: 'stroke',
-	value: {
-		color: {
-			$$type: 'color',
-			value: '#000000',
-		},
-		width: {
-			$$type: 'size',
-			value: {
-				unit: 'px',
-				size: NaN,
-			},
-		},
-	},
+export type StrokeProps< T > = {
+	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< StrokePropValue >( defaultStrokeControlValue );
+	const { value, setValue } = useBoundProp( strokePropTypeUtil );
 
-	const setStrokeWidth = ( newValue: TransformablePropValue< 'size', { unit: Unit; size: number } > ) => {
+	const setStrokeWidth = ( newValue: SizePropValue ) => {
 		const updatedValue = {
-			...( value?.value ?? defaultStrokeControlValue.value ),
+			...value,
 			width: newValue,
 		};
 
-		setValue( {
-			$$type: 'stroke',
-			value: updatedValue,
-		} );
+		setValue( updatedValue );
 	};
 
-	const setStrokeColor = ( newValue: TransformablePropValue< 'color', string > ) => {
+	const setStrokeColor = ( newValue: ColorPropValue ) => {
 		const updatedValue = {
-			...( value?.value ?? defaultStrokeControlValue.value ),
+			...value,
 			color: newValue,
 		};
 
-		setValue( {
-			$$type: 'stroke',
-			value: updatedValue,
-		} );
+		setValue( updatedValue );
 	};
 
 	return (
@@ -62,7 +46,7 @@ export const StrokeControl = createControl( () => {
 			<Control
 				bind="width"
 				label={ __( 'Stroke Width', 'elementor' ) }
-				value={ value?.value.width ?? defaultStrokeControlValue.value.width }
+				value={ value?.width }
 				setValue={ setStrokeWidth }
 			>
 				<SizeControl units={ units } />
@@ -71,7 +55,7 @@ export const StrokeControl = createControl( () => {
 			<Control
 				bind="color"
 				label={ __( 'Stroke Color', 'elementor' ) }
-				value={ value?.value.color ?? defaultStrokeControlValue.value.color }
+				value={ value?.color }
 				setValue={ setStrokeColor }
 			>
 				<ColorControl />
@@ -80,19 +64,7 @@ export const StrokeControl = createControl( () => {
 	);
 } );
 
-const Control = < T extends PropValue >( {
-	bind,
-	value,
-	setValue,
-	label,
-	children,
-}: {
-	bind: string;
-	value: T;
-	setValue: ( v: T ) => void;
-	label: string;
-	children: React.ReactNode;
-} ) => (
+const Control = < T extends PropValue >( { bind, value, setValue, label, children }: StrokeProps< T > ) => (
 	<BoundPropProvider bind={ bind } value={ value } setValue={ setValue as SetContextValue }>
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>

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,9 +13,12 @@ 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';
+export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
 
 // types
 export type { ControlComponent } from './create-control';