@elementor/editor-editing-panel 1.0.0 → 1.1.0

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

@@ -1,196 +0,0 @@
-import * as React from 'react';
-import { ReactNode, useId, useRef } from 'react';
-import { PropValue, TransformablePropValue } from '@elementor/editor-props';
-import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, usePopupState } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-import { ControlLabel } from '../../components/control-label';
-import { BoundPropProvider, SizeControl, SizeControlValue, useBoundProp } from '../index';
-
-type MultiSizePropValue< TMultiPropType extends string > = TransformablePropValue<
-	TMultiPropType,
-	Record< string, SizeControlValue >
->;
-
-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: SizeControlValue[] ): boolean {
-	const [ firstValue, ...restValues ] = values;
-
-	return restValues.some(
-		( value ) => value?.value?.size !== firstValue?.value?.size || value?.value?.unit !== firstValue?.value?.unit
-	);
-}
-
-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 >();
-
-	const actualValue: TPropValue[ 'value' ] = controlValue?.value ?? {};
-	const setActualValue = ( newValue: TPropValue[ 'value' ] ) => {
-		setControlValue( { $$type: multiSizeType, value: newValue } as TPropValue );
-	};
-
-	const setNestedProp = ( item: Item< TMultiPropType, TPropValue >, newValue: PropValue ) => {
-		const { bind } = item;
-
-		const newValues = {
-			...actualValue,
-			[ bind ]: newValue,
-		};
-
-		setActualValue( newValues );
-	};
-
-	const setEqualValues = ( newValue: PropValue ) => {
-		const equalValues = items.reduce( ( values: TPropValue[ 'value' ], item ) => {
-			return {
-				...values,
-				[ item.bind ]: newValue,
-			};
-		}, {} );
-
-		setActualValue( equalValues );
-	};
-
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId,
-	} );
-
-	return (
-		<>
-			<Grid container alignItems="center" ref={ controlRef }>
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ label }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<EqualValuesControl
-						value={ actualValue }
-						setValue={ setEqualValues }
-						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 spacing={ 2 } alignItems="center">
-						<NestedValueControl item={ items[ 0 ] } value={ actualValue } setNestedProp={ setNestedProp } />
-						<NestedValueControl item={ items[ 1 ] } value={ actualValue } setNestedProp={ setNestedProp } />
-					</Grid>
-					<Grid container spacing={ 2 } alignItems="center">
-						<NestedValueControl item={ items[ 3 ] } value={ actualValue } setNestedProp={ setNestedProp } />
-						<NestedValueControl item={ items[ 2 ] } value={ actualValue } 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: PropValue ) => void;
-} ) => {
-	const { bind } = item;
-
-	const nestedValue = value?.[ bind ] ? value[ bind ] : undefined;
-
-	return (
-		<BoundPropProvider bind={ '' } setValue={ ( val ) => setNestedProp( item, val ) } value={ nestedValue }>
-			<Grid item xs={ 6 }>
-				<Grid container spacing={ 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: TPropValue ) => void;
-	iconButton: ReactNode;
-} ) => {
-	const values = Object.values( value ?? {} ) as SizeControlValue[];
-	const isMixed = hasMixedSizes( values );
-
-	return (
-		<BoundPropProvider
-			bind={ '' }
-			setValue={ ( val ) => setValue( val as TPropValue ) }
-			value={ isMixed ? undefined : values[ 0 ] }
-		>
-			<Stack direction="row" alignItems="center" gap={ 1 }>
-				<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
-				{ iconButton }
-			</Stack>
-		</BoundPropProvider>
-	);
-};

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

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
-import { Grid, Stack } from '@elementor/ui';
-import { PropValue, ImagePropValue, SizePropValue, ImageSrcPropValue } from '@elementor/editor-props';
-import { ImageMediaControl } from './image-media-control';
-import { SelectControl } from './select-control';
-import { createControl } from '../create-control';
-import { ControlLabel } from '../../components/control-label';
-
-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={ 2 }>
-			<BoundPropProvider value={ src } setValue={ setImageSrc as SetContextValue } bind={ 'src' }>
-				<ImageMediaControl />
-			</BoundPropProvider>
-			<BoundPropProvider value={ size } setValue={ setImageSize as SetContextValue } bind={ 'size' }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<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/controls/image-media-control.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { ImageSrcPropValue } from '@elementor/editor-props';
-import { UploadIcon } from '@elementor/icons';
-import { Button, Card, CardMedia, CardOverlay, Stack } from '@elementor/ui';
-import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
-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 } = 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 } } />
-			<CardOverlay>
-				<ControlActions>
-					<Stack gap={ 0.5 }>
-						<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/controls/linked-dimensions-control.tsx

@@ -1,139 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid, Stack, ToggleButton } from '@elementor/ui';
-import { PropValue, LinkedDimensionsPropValue } from '@elementor/editor-props';
-import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
-import { createControl } from '../create-control';
-import { ControlLabel } from '../../components/control-label';
-import { SizeControl } from './size-control';
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
-
-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 }>
-				<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 }>
-				<Grid container spacing={ 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 spacing={ 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 }>
-				<Grid container spacing={ 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 spacing={ 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/controls/number-control.tsx

@@ -1,29 +0,0 @@
-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"
-				value={ isEmptyOrNaN( value ) ? '' : value }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );

package/src/controls/controls/select-control.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { PropValue } from '@elementor/editor-props';
-import { MenuItem, Select, 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/controls/size-control.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { SizePropValue, TransformablePropValue } from '@elementor/editor-props';
-import { InputAdornment } from '@elementor/ui';
-import { useBoundProp } from '../bound-prop-context';
-import { useSyncExternalState } from '../hooks/use-sync-external-state';
-import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-
-export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
-
-const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
-
-export type SizeControlProps = {
-	placeholder?: string;
-	startIcon?: React.ReactNode;
-	units?: Unit[];
-};
-
-export type SizeControlValue = TransformablePropValue< 'size', { unit: Unit; size: number } >;
-
-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 || 'px', size: NaN },
-		} ),
-	} );
-
-	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 ) : NaN,
-			},
-		} ) );
-	};
-
-	return (
-		<ControlActions>
-			<TextFieldInnerSelection
-				endAdornment={
-					<SelectionEndAdornment options={ units } onClick={ handleUnitChange } value={ state.value.unit } />
-				}
-				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/controls/stroke-control.tsx

@@ -1,105 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid, Stack } from '@elementor/ui';
-import { createControl } from '../create-control';
-import { SizeControl, Unit } from './size-control';
-import { ControlLabel } from '../../components/control-label';
-import { ColorControl } from './color-control';
-import { PropValue, StrokePropValue, TransformablePropValue } from '@elementor/editor-props';
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
-
-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 spacing={ 1 } alignItems="center">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ label }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 }>
-				{ children }
-			</Grid>
-		</Grid>
-	</BoundPropProvider>
-);