@elementor/editor-controls 0.1.0

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

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import { type ReactNode, useId, useRef } from 'react';
+import { type SizePropValue, type TransformablePropValue } from '@elementor/editor-props';
+import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+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 Item< TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > > = {
+	icon: ReactNode;
+	label: string;
+	bind: keyof TPropValue[ 'value' ];
+};
+
+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 > > = {
+	label: string;
+	icon: ReactNode;
+	items: EqualUnequalItems< TMultiPropType, TPropValue >;
+	multiSizeType: TMultiPropType;
+};
+
+function hasMixedSizes( values: SizePropValue[] ): boolean {
+	const [ firstValue, ...restValues ] = values;
+
+	return restValues.some(
+		( 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 > ) {
+	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 mappedValues = getMultiSizeProps( controlValue, items );
+
+	const setNestedProp = ( item: Item< TMultiPropType, TPropValue >, newValue: SizePropValue ) => {
+		const { bind } = item;
+
+		const newMappedValues: TPropValue[ 'value' ] = {
+			...mappedValues,
+			[ bind ]: newValue,
+		};
+
+		const sizes = Object.values( newMappedValues );
+		const isMixed = hasMixedSizes( sizes );
+
+		if ( isMixed ) {
+			setMultiSizeValue( newMappedValues );
+
+			return;
+		}
+
+		setControlValue( newValue );
+	};
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId,
+	} );
+
+	return (
+		<>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<EqualValuesControl
+						value={ mappedValues }
+						setValue={ setControlValue }
+						iconButton={
+							<ToggleButton
+								size={ 'tiny' }
+								value={ 'check' }
+								sx={ { marginLeft: 'auto' } }
+								{ ...bindToggle( popupState ) }
+								selected={ popupState.isOpen }
+							>
+								{ icon }
+							</ToggleButton>
+						}
+					/>
+				</Grid>
+			</Grid>
+			<Popover
+				disablePortal
+				disableScrollLock
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				{ ...bindPopover( popupState ) }
+				slotProps={ {
+					paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } },
+				} }
+			>
+				<Stack gap={ 1.5 }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<NestedValueControl
+							item={ items[ 0 ] }
+							value={ mappedValues }
+							setNestedProp={ setNestedProp }
+						/>
+						<NestedValueControl
+							item={ items[ 1 ] }
+							value={ mappedValues }
+							setNestedProp={ setNestedProp }
+						/>
+					</Grid>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<NestedValueControl
+							item={ items[ 3 ] }
+							value={ mappedValues }
+							setNestedProp={ setNestedProp }
+						/>
+						<NestedValueControl
+							item={ items[ 2 ] }
+							value={ mappedValues }
+							setNestedProp={ setNestedProp }
+						/>
+					</Grid>
+				</Stack>
+			</Popover>
+		</>
+	);
+}
+
+const NestedValueControl = < TMultiPropType extends string, TPropValue extends MultiSizePropValue< TMultiPropType > >( {
+	item,
+	value,
+	setNestedProp,
+}: {
+	item: Item< TMultiPropType, TPropValue >;
+	value: TPropValue[ 'value' ] | undefined;
+	setNestedProp: ( item: Item< TMultiPropType, TPropValue >, newValue: SizePropValue ) => void;
+} ) => {
+	const { bind } = item;
+
+	const nestedValue = value?.[ bind ] ? value[ bind ] : undefined;
+
+	return (
+		<BoundPropProvider
+			bind={ '' }
+			setValue={ ( val ) => setNestedProp( item, val as SizePropValue ) }
+			value={ nestedValue }
+		>
+			<Grid item xs={ 6 }>
+				<Grid container gap={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ item.label }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<SizeControl startIcon={ item.icon } />
+					</Grid>
+				</Grid>
+			</Grid>
+		</BoundPropProvider>
+	);
+};
+
+const EqualValuesControl = <
+	TMultiPropType extends string,
+	TPropValue extends MultiSizePropValue< TMultiPropType >[ 'value' ],
+>( {
+	value,
+	setValue,
+	iconButton,
+}: {
+	value: TPropValue | undefined;
+	setValue: ( newValue: SizePropValue ) => void;
+	iconButton: ReactNode;
+} ) => {
+	const values = Object.values( value ?? {} ) as SizePropValue[];
+	const isMixed = hasMixedSizes( values );
+
+	return (
+		<BoundPropProvider
+			bind={ '' }
+			setValue={ ( val ) => setValue( val as SizePropValue ) }
+			value={ isMixed ? undefined : values[ 0 ] }
+		>
+			<Stack direction="row" alignItems="center" gap={ 1 }>
+				<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
+				{ iconButton }
+			</Stack>
+		</BoundPropProvider>
+	);
+};

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

@@ -0,0 +1,154 @@
+import { Fragment, useId, useState } from 'react';
+import * as React from 'react';
+import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon } from '@elementor/icons';
+import {
+	bindPopover,
+	bindTrigger,
+	Box,
+	Divider,
+	IconButton,
+	InputAdornment,
+	Link,
+	ListSubheader,
+	MenuItem,
+	MenuList,
+	Popover,
+	Stack,
+	TextField,
+	Typography,
+	UnstableTag,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { createControl } from '../create-control';
+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 popupId = useId();
+	const popoverState = usePopupState( { variant: 'popover', popupId } );
+
+	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
+
+	if ( ! filteredFontFamilies ) {
+		return null;
+	}
+
+	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setSearchValue( event.target.value );
+	};
+
+	const handleClose = () => {
+		setSearchValue( '' );
+
+		popoverState.close();
+	};
+
+	return (
+		<>
+			<UnstableTag
+				variant="outlined"
+				label={ fontFamily }
+				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+				{ ...bindTrigger( popoverState ) }
+				fullWidth
+			/>
+
+			<Popover
+				disablePortal
+				disableScrollLock
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				{ ...bindPopover( popoverState ) }
+				onClose={ handleClose }
+			>
+				<Stack>
+					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
+						<EditIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+						<Typography variant="subtitle2">{ __( 'Font Family', 'elementor' ) }</Typography>
+						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ handleClose }>
+							<XIcon fontSize={ SIZE } />
+						</IconButton>
+					</Stack>
+
+					<Box px={ 1.5 } pb={ 1 }>
+						<TextField
+							fullWidth
+							size={ SIZE }
+							value={ searchValue }
+							placeholder={ __( 'Search', 'elementor' ) }
+							onChange={ handleSearch }
+							InputProps={ {
+								startAdornment: (
+									<InputAdornment position="start">
+										<SearchIcon fontSize={ SIZE } />
+									</InputAdornment>
+								),
+							} }
+						/>
+					</Box>
+					<Divider />
+					<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
+						{ filteredFontFamilies.length > 0 ? (
+							<MenuList role="listbox" tabIndex={ 0 }>
+								{ filteredFontFamilies.map( ( [ category, items ], index ) => (
+									<Fragment key={ index }>
+										<ListSubheader sx={ { typography: 'caption', color: 'text.tertiary' } }>
+											{ category }
+										</ListSubheader>
+										{ items.map( ( item ) => {
+											const isSelected = item === fontFamily;
+
+											return (
+												<MenuItem
+													key={ item }
+													selected={ isSelected }
+													// eslint-disable-next-line jsx-a11y/no-autofocus
+													autoFocus={ isSelected }
+													onClick={ () => {
+														setFontFamily( item );
+														handleClose();
+													} }
+													sx={ { typography: 'caption' } }
+													style={ { fontFamily: item } }
+												>
+													{ item }
+												</MenuItem>
+											);
+										} ) }
+									</Fragment>
+								) ) }
+							</MenuList>
+						) : (
+							<Stack alignItems="center" p={ 2.5 } gap={ 1.5 }>
+								<PhotoIcon fontSize="large" />
+								<Typography align="center" variant="caption" color="text.secondary">
+									{ __( 'Sorry, nothing matched', 'elementor' ) }
+									<br />
+									&ldquo;{ searchValue }&rdquo;.
+								</Typography>
+								<Typography align="center" variant="caption" color="text.secondary">
+									<Link
+										color="secondary"
+										variant="caption"
+										component="button"
+										onClick={ () => setSearchValue( '' ) }
+									>
+										{ __( 'Clear the filters', 'elementor' ) }
+									</Link>
+									&nbsp;
+									{ __( 'and try again.', 'elementor' ) }
+								</Typography>
+							</Stack>
+						) }
+					</Box>
+				</Stack>
+			</Popover>
+		</>
+	);
+} );

package/src/controls/image-control.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {
+	type ImagePropValue,
+	type ImageSrcPropValue,
+	type PropValue,
+	type SizePropValue,
+} 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 { ImageMediaControl } from './image-media-control';
+import { SelectControl } from './select-control';
+
+type SetContextValue = ( v: PropValue ) => void;
+
+export type ImageControlProps = {
+	sizes: { label: string; value: string }[];
+};
+
+export const ImageControl = createControl( ( props: ImageControlProps ) => {
+	const { value, setValue } = useBoundProp< ImagePropValue | undefined >();
+	const { src, size } = value?.value || {};
+
+	const setImageSrc = ( newValue: ImageSrcPropValue ) => {
+		setValue( {
+			$$type: 'image',
+			value: {
+				src: newValue,
+				size: size as SizePropValue,
+			},
+		} );
+	};
+
+	const setImageSize = ( newValue: SizePropValue ) => {
+		setValue( {
+			$$type: 'image',
+			value: {
+				src: src as ImageSrcPropValue,
+				size: newValue,
+			},
+		} );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<BoundPropProvider value={ src } setValue={ setImageSrc as SetContextValue } bind={ 'src' }>
+				<ImageMediaControl />
+			</BoundPropProvider>
+			<BoundPropProvider value={ size } setValue={ setImageSize as SetContextValue } bind={ 'size' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel> { __( 'Image Resolution', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<SelectControl options={ props.sizes } />
+					</Grid>
+				</Grid>
+			</BoundPropProvider>
+		</Stack>
+	);
+} );

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { type ImageSrcPropValue } 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';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+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 { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
+	const src = attachment?.url ?? url;
+
+	const { open } = useWpMediaFrame( {
+		types: [ 'image' ],
+		multiple: false,
+		selected: id?.value || null,
+		onSelect: ( selectedAttachment ) => {
+			setValue( {
+				$$type: 'image-src',
+				value: {
+					id: {
+						$$type: 'image-attachment-id',
+						value: selectedAttachment.id,
+					},
+					url: null,
+				},
+			} );
+		},
+	} );
+
+	return (
+		<Card variant="outlined">
+			<CardMedia image={ src } sx={ { height: 150 } }>
+				{ isFetching ? (
+					<Stack justifyContent="center" alignItems="center" width="100%" height="100%">
+						<CircularProgress />
+					</Stack>
+				) : null }
+			</CardMedia>
+			<CardOverlay>
+				<ControlActions>
+					<Stack gap={ 1 }>
+						<Button
+							size="tiny"
+							color="inherit"
+							variant="outlined"
+							onClick={ () => open( { mode: 'browse' } ) }
+						>
+							{ __( 'Select Image', 'elementor' ) }
+						</Button>
+						<Button
+							size="tiny"
+							variant="text"
+							color="inherit"
+							startIcon={ <UploadIcon /> }
+							onClick={ () => open( { mode: 'upload' } ) }
+						>
+							{ __( 'Upload Image', 'elementor' ) }
+						</Button>
+					</Stack>
+				</ControlActions>
+			</CardOverlay>
+		</Card>
+	);
+} );

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

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { type LinkedDimensionsPropValue, 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';
+
+import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlLabel } from '../components/control-label';
+import { createControl } from '../create-control';
+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 setLinkedValue = ( position: Position, newValue: PropValue ) => {
+		const updatedValue = {
+			isLinked,
+			top: isLinked ? newValue : top,
+			right: isLinked ? newValue : right,
+			bottom: isLinked ? newValue : bottom,
+			left: isLinked ? newValue : left,
+			[ position ]: newValue,
+		};
+
+		setValue( {
+			$$type: 'linked-dimensions',
+			value: updatedValue,
+		} );
+	};
+
+	const toggleLinked = () => {
+		const updatedValue = {
+			isLinked: ! isLinked,
+			top,
+			right: ! isLinked ? top : right,
+			bottom: ! isLinked ? top : bottom,
+			left: ! isLinked ? top : left,
+		};
+
+		setValue( {
+			$$type: 'linked-dimensions',
+			value: updatedValue,
+		} );
+	};
+
+	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+
+	return (
+		<>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+				<ControlLabel>{ label }</ControlLabel>
+				<ToggleButton
+					aria-label={ __( 'Link Inputs', 'elementor' ) }
+					size={ 'tiny' }
+					value={ 'check' }
+					selected={ isLinked }
+					sx={ { marginLeft: 'auto' } }
+					onChange={ toggleLinked }
+				>
+					<LinkedIcon fontSize={ 'tiny' } />
+				</ToggleButton>
+			</Stack>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+				<Grid container gap={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Control
+							bind={ 'top' }
+							value={ top }
+							setValue={ setLinkedValue }
+							startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
+						/>
+					</Grid>
+				</Grid>
+				<Grid container gap={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Control
+							bind={ 'right' }
+							value={ right }
+							setValue={ setLinkedValue }
+							startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+						/>
+					</Grid>
+				</Grid>
+			</Stack>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+				<Grid container gap={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Control
+							bind={ 'bottom' }
+							value={ bottom }
+							setValue={ setLinkedValue }
+							startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
+						/>
+					</Grid>
+				</Grid>
+				<Grid container gap={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Control
+							bind={ 'left' }
+							value={ left }
+							setValue={ setLinkedValue }
+							startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+						/>
+					</Grid>
+				</Grid>
+			</Stack>
+		</>
+	);
+} );
+
+const Control = ( {
+	bind,
+	startIcon,
+	value,
+	setValue,
+}: {
+	bind: Position;
+	value: PropValue;
+	startIcon: React.ReactNode;
+	setValue: ( bind: Position, newValue: PropValue ) => void;
+} ) => (
+	<BoundPropProvider setValue={ ( newValue ) => setValue( bind, newValue ) } value={ value } bind={ bind }>
+		<SizeControl startIcon={ startIcon } />
+	</BoundPropProvider>
+);

package/src/controls/number-control.tsx

@@ -0,0 +1,31 @@
+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';
+
+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>
+	);
+} );