@elementor/editor-controls 0.1.0

package/src/controls/select-control.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type PropValue } 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 } >;
+};
+
+export const SelectControl = createControl( < T extends PropValue >( { options }: Props< T > ) => {
+	const { value, setValue } = useBoundProp< T >();
+
+	const handleChange = ( event: SelectChangeEvent< T > ) => {
+		setValue( event.target.value as T );
+	};
+
+	return (
+		<ControlActions>
+			<Select displayEmpty size="tiny" value={ value ?? '' } onChange={ handleChange } fullWidth>
+				{ options.map( ( { label, ...props } ) => (
+					<MenuItem key={ props.value } { ...props }>
+						{ label }
+					</MenuItem>
+				) ) }
+			</Select>
+		</ControlActions>
+	);
+} );

package/src/controls/size-control.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { type SizePropValue } from '@elementor/editor-props';
+import { InputAdornment } from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context';
+import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { useSyncExternalState } from '../hooks/use-sync-external-state';
+
+export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
+
+const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
+
+const defaultUnit = 'px';
+const defaultSize = NaN;
+
+export type SizeControlProps = {
+	placeholder?: string;
+	startIcon?: React.ReactNode;
+	units?: Unit[];
+};
+
+export const SizeControl = createControl( ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
+	const { value, setValue } = useBoundProp< SizePropValue | undefined >();
+
+	const [ state, setState ] = useSyncExternalState< SizePropValue >( {
+		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 },
+		} ),
+	} );
+
+	const handleUnitChange = ( unit: Unit ) => {
+		setState( ( prev ) => ( {
+			...prev,
+			value: {
+				...prev.value,
+				unit,
+			},
+		} ) );
+	};
+
+	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const { value: size } = event.target;
+
+		setState( ( prev ) => ( {
+			...prev,
+			value: {
+				...prev.value,
+				size: size || size === '0' ? parseFloat( size ) : defaultSize,
+			},
+		} ) );
+	};
+
+	return (
+		<ControlActions>
+			<TextFieldInnerSelection
+				endAdornment={
+					<SelectionEndAdornment
+						options={ units }
+						onClick={ handleUnitChange }
+						value={ state.value.unit ?? defaultUnit }
+					/>
+				}
+				placeholder={ placeholder }
+				startAdornment={ startIcon ?? <InputAdornment position="start">{ startIcon }</InputAdornment> }
+				type="number"
+				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
+				onChange={ handleSizeChange }
+			/>
+		</ControlActions>
+	);
+} );

package/src/controls/stroke-control.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { type PropValue, type StrokePropValue, type TransformablePropValue } from '@elementor/editor-props';
+import { Grid, Stack } 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 { ColorControl } from './color-control';
+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,
+			},
+		},
+	},
+};
+
+const units: Unit[] = [ 'px', 'em', 'rem' ];
+
+export const StrokeControl = createControl( () => {
+	const { value, setValue } = useBoundProp< StrokePropValue >( defaultStrokeControlValue );
+
+	const setStrokeWidth = ( newValue: TransformablePropValue< 'size', { unit: Unit; size: number } > ) => {
+		const updatedValue = {
+			...( value?.value ?? defaultStrokeControlValue.value ),
+			width: newValue,
+		};
+
+		setValue( {
+			$$type: 'stroke',
+			value: updatedValue,
+		} );
+	};
+
+	const setStrokeColor = ( newValue: TransformablePropValue< 'color', string > ) => {
+		const updatedValue = {
+			...( value?.value ?? defaultStrokeControlValue.value ),
+			color: newValue,
+		};
+
+		setValue( {
+			$$type: 'stroke',
+			value: updatedValue,
+		} );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<Control
+				bind="width"
+				label={ __( 'Stroke Width', 'elementor' ) }
+				value={ value?.value.width ?? defaultStrokeControlValue.value.width }
+				setValue={ setStrokeWidth }
+			>
+				<SizeControl units={ units } />
+			</Control>
+
+			<Control
+				bind="color"
+				label={ __( 'Stroke Color', 'elementor' ) }
+				value={ value?.value.color ?? defaultStrokeControlValue.value.color }
+				setValue={ setStrokeColor }
+			>
+				<ColorControl />
+			</Control>
+		</Stack>
+	);
+} );
+
+const Control = < T extends PropValue >( {
+	bind,
+	value,
+	setValue,
+	label,
+	children,
+}: {
+	bind: string;
+	value: T;
+	setValue: ( v: T ) => void;
+	label: string;
+	children: React.ReactNode;
+} ) => (
+	<BoundPropProvider bind={ bind } value={ value } setValue={ setValue as SetContextValue }>
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ label }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				{ children }
+			</Grid>
+		</Grid>
+	</BoundPropProvider>
+);

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { TextField } from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+type Props = {
+	placeholder?: string;
+};
+
+export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
+	const { value, setValue } = useBoundProp< string >();
+
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setValue( event.target.value );
+	};
+
+	return (
+		<ControlActions>
+			<TextField
+				size="tiny"
+				multiline
+				fullWidth
+				rows={ 5 }
+				value={ value }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
+		</ControlActions>
+	);
+} );

package/src/controls/text-control.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+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 TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
+	const { value, setValue } = useBoundProp< string >( '' );
+
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
+
+	return (
+		<ControlActions>
+			<TextField size="tiny" fullWidth value={ value } onChange={ handleChange } placeholder={ placeholder } />
+		</ControlActions>
+	);
+} );

package/src/controls/toggle-control.tsx

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

package/src/create-control-replacement.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { type ComponentType, createContext, useContext } from 'react';
+import { type PropValue } from '@elementor/editor-props';
+
+import { useBoundProp } from './bound-prop-context';
+
+export type ReplaceWhenParams = {
+	value: PropValue;
+};
+
+export type CreateControlReplacement = {
+	component: ComponentType;
+	condition: ( { value }: ReplaceWhenParams ) => boolean;
+};
+
+const ControlReplacementContext = createContext< CreateControlReplacement | undefined >( undefined );
+
+export const ControlReplacementProvider = ( {
+	component,
+	condition,
+	children,
+}: React.PropsWithChildren< CreateControlReplacement > ) => {
+	return (
+		<ControlReplacementContext.Provider value={ { component, condition } }>
+			{ children }
+		</ControlReplacementContext.Provider>
+	);
+};
+export const useControlReplacement = () => {
+	const { value } = useBoundProp();
+	const controlReplacement = useContext( ControlReplacementContext );
+
+	let shouldReplace = false;
+
+	try {
+		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement.component;
+	} catch {}
+
+	return shouldReplace ? controlReplacement?.component : undefined;
+};
+
+export const createControlReplacement = () => {
+	let controlReplacement: CreateControlReplacement;
+
+	function replaceControl( { component, condition }: CreateControlReplacement ) {
+		controlReplacement = { component, condition };
+	}
+
+	function getControlReplacement() {
+		return controlReplacement;
+	}
+
+	return { replaceControl, getControlReplacement };
+};

package/src/create-control.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { type ComponentProps, type ComponentType } from 'react';
+import { ErrorBoundary } from '@elementor/ui';
+
+import { useControlReplacement } from './create-control-replacement';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponentType = ComponentType< any >;
+
+type Options = {
+	supportsReplacements?: boolean;
+};
+
+const brandSymbol = Symbol( 'control' );
+
+export type ControlComponent< TComponent extends AnyComponentType = AnyComponentType > = TComponent & {
+	[ brandSymbol ]: true;
+};
+
+export function createControl< T extends AnyComponentType >(
+	Component: T,
+	{ supportsReplacements = true }: Options = {}
+) {
+	return ( ( props: ComponentProps< T > ) => {
+		const ControlReplacement = useControlReplacement();
+
+		if ( ControlReplacement && supportsReplacements ) {
+			return (
+				<ErrorBoundary fallback={ null }>
+					<ControlReplacement { ...props } />
+				</ErrorBoundary>
+			);
+		}
+
+		return (
+			<ErrorBoundary fallback={ null }>
+				<Component { ...props } />
+			</ErrorBoundary>
+		);
+	} ) as ControlComponent< T >;
+}

package/src/hooks/use-filtered-font-families.ts

@@ -0,0 +1,38 @@
+import { __ } from '@wordpress/i18n';
+
+export type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
+
+const supportedCategories: Record< SupportedFonts, string > = {
+	system: __( 'System', 'elementor' ),
+	googlefonts: __( 'Google Fonts', 'elementor' ),
+	customfonts: __( 'Custom Fonts', 'elementor' ),
+};
+
+export const useFilteredFontFamilies = ( fontFamilies: Record< string, SupportedFonts >, searchValue: string ) => {
+	const filteredFontFamilies = Object.entries( fontFamilies ).reduce< Map< string, string[] > >(
+		( acc, [ font, category ] ) => {
+			const isMatch = font.toLowerCase().includes( searchValue.trim().toLowerCase() );
+
+			if ( ! isMatch ) {
+				return acc;
+			}
+
+			const categoryLabel = supportedCategories[ category as SupportedFonts ];
+
+			if ( categoryLabel ) {
+				const existingCategory = acc.get( categoryLabel );
+
+				if ( existingCategory ) {
+					existingCategory.push( font );
+				} else {
+					acc.set( categoryLabel, [ font ] );
+				}
+			}
+
+			return acc;
+		},
+		new Map()
+	);
+
+	return [ ...filteredFontFamilies ];
+};

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

@@ -0,0 +1,51 @@
+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;
+};
+
+export const useSyncExternalState = < TValue, >( {
+	external,
+	setExternal,
+	persistWhen,
+	fallback,
+}: UseInternalStateOptions< TValue > ) => {
+	function toExternal( internalValue: TValue | undefined ) {
+		if ( persistWhen( internalValue ) ) {
+			return internalValue;
+		}
+
+		return undefined;
+	}
+
+	function toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {
+		if ( ! externalValue ) {
+			return fallback( internalValue );
+		}
+
+		return externalValue;
+	}
+
+	const [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );
+
+	useEffect( () => {
+		setInternal( ( prevInternal ) => toInternal( external, prevInternal ) );
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ external ] );
+
+	type SetterFunc = ( value: TValue ) => TValue;
+
+	const setInternalValue = ( setter: SetterFunc | TValue ) => {
+		const setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;
+		const updated = setterFn( internal );
+
+		setInternal( updated );
+		setExternal( toExternal( updated ) );
+	};
+
+	return [ internal, setInternalValue ] as const;
+};

package/src/index.ts

@@ -0,0 +1,31 @@
+// control types
+export { ImageControl } from './controls/image-control';
+export { TextControl } from './controls/text-control';
+export { TextAreaControl } from './controls/text-area-control';
+export { SizeControl } from './controls/size-control';
+export { StrokeControl } from './controls/stroke-control';
+export { BoxShadowRepeaterControl } from './controls/box-shadow-repeater-control';
+export { BackgroundOverlayRepeaterControl } from './controls/background-overlay-repeater-control';
+export { SelectControl } from './controls/select-control';
+export { ColorControl } from './controls/color-control';
+export { ToggleControl } from './controls/toggle-control';
+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';
+
+// components
+export { ControlLabel } from './components/control-label';
+
+// types
+export type { ControlComponent } from './create-control';
+export type { ToggleButtonGroupItem } from './components/control-toggle-button-group';
+export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
+
+// providers
+export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';
+export { useBoundProp, BoundPropProvider } from './bound-prop-context';
+export { ControlActionsProvider, useControlActions } from './control-actions/control-actions-context';
+
+// hooks
+export { useSyncExternalState } from './hooks/use-sync-external-state';