@elementor/editor-controls 0.1.0

package/src/components/text-field-inner-selection.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { forwardRef, useId } from 'react';
+import { type PropValue } from '@elementor/editor-props';
+import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
+
+export type TextFieldInnerSelectionProps = {
+	placeholder?: string;
+	type: string;
+	value: PropValue;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	endAdornment: React.ReactNode;
+	startAdornment?: React.ReactNode;
+};
+
+export const TextFieldInnerSelection = forwardRef(
+	( { placeholder, type, value, onChange, endAdornment, startAdornment }: TextFieldInnerSelectionProps, ref ) => {
+		return (
+			<TextField
+				size="tiny"
+				fullWidth
+				type={ type }
+				value={ value }
+				onChange={ onChange }
+				placeholder={ placeholder }
+				InputProps={ {
+					endAdornment,
+					startAdornment,
+				} }
+				ref={ ref }
+			/>
+		);
+	}
+);
+
+export type SelectionEndAdornmentProps< T extends string > = {
+	options: T[];
+	onClick: ( value: T ) => void;
+	value: T;
+};
+
+export const SelectionEndAdornment = < T extends string >( {
+	options,
+	onClick,
+	value,
+}: SelectionEndAdornmentProps< T > ) => {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: useId(),
+	} );
+
+	const handleMenuItemClick = ( index: number ) => {
+		onClick( options[ index ] );
+		popupState.close();
+	};
+
+	return (
+		<InputAdornment position="end">
+			<Button
+				size="small"
+				color="inherit"
+				sx={ { font: 'inherit', minWidth: 'initial' } }
+				{ ...bindTrigger( popupState ) }
+			>
+				{ value.toUpperCase() }
+			</Button>
+
+			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
+				{ options.map( ( option, index ) => (
+					<MenuItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
+						{ option.toUpperCase() }
+					</MenuItem>
+				) ) }
+			</Menu>
+		</InputAdornment>
+	);
+};

package/src/control-actions/control-actions-context.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+
+type ControlActionsContext = {
+	items: Array< {
+		id: string;
+		MenuItem: React.ComponentType;
+	} >;
+};
+
+const Context = createContext< ControlActionsContext | null >( null );
+
+export type ControlActionsProviderProps = PropsWithChildren< ControlActionsContext >;
+
+export const ControlActionsProvider = ( { children, items }: ControlActionsProviderProps ) => (
+	<Context.Provider value={ { items } }>{ children }</Context.Provider>
+);
+
+export const useControlActions = () => {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'useControlActions must be used within a ControlActionsProvider' );
+	}
+
+	return context;
+};

package/src/control-actions/control-actions.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type PropsWithChildren, type ReactElement } from 'react';
+import { styled, UnstableFloatingActionBar } from '@elementor/ui';
+
+import { useControlActions } from './control-actions-context';
+
+// CSS hack to hide empty floating bars.
+const FloatingBarContainer = styled( 'span' )`
+	display: contents;
+
+	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
+		display: none;
+	}
+`;
+
+export type ControlActionsProps = PropsWithChildren< object >;
+
+export default function ControlActions( { children }: ControlActionsProps ) {
+	const { items } = useControlActions();
+
+	if ( items.length === 0 ) {
+		return children;
+	}
+
+	const menuItems = items.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> );
+
+	return (
+		<FloatingBarContainer>
+			<UnstableFloatingActionBar actions={ menuItems }>{ children as ReactElement }</UnstableFloatingActionBar>
+		</FloatingBarContainer>
+	);
+}

package/src/controls/background-overlay-repeater-control.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import {
+	type backgroundImageTypePropValue,
+	type ColorGradientPropValue,
+	type PropValue,
+} from '@elementor/editor-props';
+import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { Repeater } from '../components/repeater';
+import { createControl } from '../create-control';
+import { ColorControl } from './color-control';
+
+type SetContextValue = ( v: PropValue ) => void;
+
+export const BackgroundOverlayRepeaterControl = createControl( () => {
+	const { value, setValue } = useBoundProp< backgroundImageTypePropValue >();
+
+	const colorOverlayValues = value?.value;
+
+	const setColorOverlay = ( newValue: backgroundImageTypePropValue[ 'value' ] ) => {
+		setValue( {
+			$$type: 'background-image',
+			value: newValue,
+		} );
+	};
+
+	return (
+		<Repeater
+			values={ colorOverlayValues }
+			setValues={ setColorOverlay }
+			label={ __( 'Overlay', 'elementor' ) }
+			itemSettings={ {
+				Icon: ItemIcon,
+				Label: ItemLabel,
+				Content: ItemContent,
+				initialValues: initialGradient,
+			} }
+		/>
+	);
+} );
+
+const ItemIcon = ( { value }: { value: ColorGradientPropValue } ) => (
+	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color.value } />
+);
+
+const ItemContent = ( {
+	value,
+	setValue,
+}: {
+	value: ColorGradientPropValue;
+	setValue: ( newValue: ColorGradientPropValue ) => void;
+} ) => {
+	const setColor = ( newValue: ColorGradientPropValue[ 'value' ] ) => {
+		setValue( {
+			$$type: 'background-overlay',
+			value: newValue,
+		} );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<Control
+				bind="color"
+				value={ value.value.color }
+				label={ __( 'Color', 'elementor' ) }
+				setValue={ ( v: ColorGradientPropValue[ 'value' ][ 'color' ] ) =>
+					setColor( { ...value.value, color: v } )
+				}
+			>
+				<ColorControl />
+			</Control>
+		</Stack>
+	);
+};
+
+const Control = < T extends PropValue >( {
+	value,
+	setValue,
+	label,
+	bind,
+	children,
+}: {
+	value: T;
+	bind: string;
+	label: string;
+	children: React.ReactNode;
+	setValue: ( v: T ) => void;
+} ) => (
+	<BoundPropProvider value={ value } setValue={ setValue as SetContextValue } bind={ bind }>
+		<Grid container spacing={ 1 } alignItems="center">
+			<Grid item xs={ 12 }>
+				<Typography component="label" variant="caption" color="text.secondary">
+					{ label }
+				</Typography>
+			</Grid>
+			<Grid item xs={ 12 }>
+				{ children }
+			</Grid>
+		</Grid>
+	</BoundPropProvider>
+);
+
+const ItemLabel = ( { value }: { value: ColorGradientPropValue } ) => {
+	const color = value.value.color.value;
+
+	return <span>{ color }</span>;
+};
+
+const initialGradient: ColorGradientPropValue = {
+	$$type: 'background-overlay',
+	value: {
+		color: {
+			$$type: 'color',
+			value: 'rgba(0, 0, 0, 0.2)',
+		},
+	},
+};

package/src/controls/box-shadow-repeater-control.tsx

@@ -0,0 +1,227 @@
+import * as React from 'react';
+import { type BoxShadowPropValue, type PropValue, type ShadowPropValue } from '@elementor/editor-props';
+import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { Repeater } from '../components/repeater';
+import { createControl } from '../create-control';
+import { ColorControl } from './color-control';
+import { SelectControl } from './select-control';
+import { SizeControl } from './size-control';
+
+type SetContextValue = ( v: PropValue ) => void;
+
+export const BoxShadowRepeaterControl = createControl( () => {
+	const { value, setValue } = useBoundProp< BoxShadowPropValue >();
+
+	const boxShadowValues = value?.value;
+
+	const setBoxShadow = ( newValue: BoxShadowPropValue[ 'value' ] ) => {
+		setValue( {
+			$$type: 'box-shadow',
+			value: newValue,
+		} );
+	};
+
+	return (
+		<Repeater
+			values={ boxShadowValues }
+			setValues={ setBoxShadow }
+			label={ __( 'Box shadow', 'elementor' ) }
+			itemSettings={ {
+				Icon: ItemIcon,
+				Label: ItemLabel,
+				Content: ItemContent,
+				initialValues: initialShadow,
+			} }
+		/>
+	);
+} );
+
+const ItemIcon = ( { value }: { value: ShadowPropValue } ) => (
+	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color.value } />
+);
+
+const ItemContent = ( {
+	value,
+	setValue,
+	anchorEl,
+}: {
+	value: ShadowPropValue;
+	setValue: ( newValue: ShadowPropValue ) => void;
+	anchorEl: HTMLElement | null;
+} ) => {
+	const setShadow = ( newValue: ShadowPropValue[ 'value' ] ) => {
+		setValue( {
+			$$type: 'shadow',
+			value: newValue,
+		} );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<Grid container gap={ 2 } flexWrap="nowrap">
+				<Control
+					bind="color"
+					value={ value.value.color }
+					label={ __( 'Color', 'elementor' ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'color' ] ) =>
+						setShadow( { ...value.value, color: v } )
+					}
+				>
+					<ColorControl
+						slotProps={ {
+							colorPicker: {
+								anchorEl,
+								anchorOrigin: {
+									vertical: 'top',
+									horizontal: 'right',
+								},
+								transformOrigin: {
+									vertical: 'top',
+									horizontal: -10,
+								},
+							},
+						} }
+					/>
+				</Control>
+				<Control
+					bind="position"
+					value={ value.value.position }
+					label={ __( 'Position', 'elementor' ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'position' ] ) =>
+						setShadow( { ...value.value, position: v || null } )
+					}
+				>
+					<SelectControl
+						options={ [
+							{ label: __( 'Inset', 'elementor' ), value: 'inset' },
+							{ label: __( 'Outset', 'elementor' ), value: '' },
+						] }
+					/>
+				</Control>
+			</Grid>
+			<Grid container gap={ 2 } flexWrap="nowrap">
+				<Control
+					bind="hOffset"
+					label={ __( 'Horizontal', 'elementor' ) }
+					value={ value.value.hOffset }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'hOffset' ] ) =>
+						setShadow( { ...value.value, hOffset: v } )
+					}
+				>
+					<SizeControl />
+				</Control>
+				<Control
+					bind="vOffset"
+					label={ __( 'Vertical', 'elementor' ) }
+					value={ value.value.vOffset }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'vOffset' ] ) =>
+						setShadow( { ...value.value, vOffset: v } )
+					}
+				>
+					<SizeControl />
+				</Control>
+			</Grid>
+			<Grid container gap={ 2 } flexWrap="nowrap">
+				<Control
+					bind="blur"
+					value={ value.value.blur }
+					label={ __( 'Blur', 'elementor' ) }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'blur' ] ) => setShadow( { ...value.value, blur: v } ) }
+				>
+					<SizeControl />
+				</Control>
+				<Control
+					bind="spread"
+					label={ __( 'Spread', 'elementor' ) }
+					value={ value.value.spread }
+					setValue={ ( v: ShadowPropValue[ 'value' ][ 'spread' ] ) =>
+						setShadow( { ...value.value, spread: v } )
+					}
+				>
+					<SizeControl />
+				</Control>
+			</Grid>
+		</Stack>
+	);
+};
+
+const Control = < T extends PropValue >( {
+	value,
+	setValue,
+	label,
+	bind,
+	children,
+}: {
+	value: T;
+	bind: string;
+	label: string;
+	children: React.ReactNode;
+	setValue: ( v: T ) => void;
+} ) => (
+	<BoundPropProvider value={ value } setValue={ setValue as SetContextValue } bind={ bind }>
+		<Grid item xs={ 6 }>
+			<Grid container gap={ 1 } alignItems="center">
+				<Grid item xs={ 12 }>
+					<Typography component="label" variant="caption" color="text.secondary">
+						{ label }
+					</Typography>
+				</Grid>
+				<Grid item xs={ 12 }>
+					{ children }
+				</Grid>
+			</Grid>
+		</Grid>
+	</BoundPropProvider>
+);
+
+const ItemLabel = ( { value }: { value: ShadowPropValue } ) => {
+	const { position, hOffset, vOffset, blur, spread } = value.value;
+
+	const { size: blurSize = '', unit: blurUnit = '' } = blur?.value || {};
+	const { size: spreadSize = '', unit: spreadUnit = '' } = spread?.value || {};
+	const { size: hOffsetSize = 'unset', unit: hOffsetUnit = '' } = hOffset?.value || {};
+	const { size: vOffsetSize = 'unset', unit: vOffsetUnit = '' } = vOffset?.value || {};
+
+	const sizes = [
+		hOffsetSize + hOffsetUnit,
+		vOffsetSize + vOffsetUnit,
+		blurSize + blurUnit,
+		spreadSize + spreadUnit,
+	].join( ' ' );
+
+	return (
+		<span style={ { textTransform: 'capitalize' } }>
+			{ position ?? 'outset' }: { sizes }
+		</span>
+	);
+};
+
+const initialShadow: ShadowPropValue = {
+	$$type: 'shadow',
+	value: {
+		hOffset: {
+			$$type: 'size',
+			value: { unit: 'px', size: 0 },
+		},
+		vOffset: {
+			$$type: 'size',
+			value: { unit: 'px', size: 0 },
+		},
+		blur: {
+			$$type: 'size',
+			value: { unit: 'px', size: 10 },
+		},
+		spread: {
+			$$type: 'size',
+			value: { unit: 'px', size: 0 },
+		},
+		color: {
+			$$type: 'color',
+			value: 'rgba(0, 0, 0, 1)',
+		},
+		position: null,
+	},
+};

package/src/controls/color-control.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type ColorPropValue } from '@elementor/editor-props';
+import { UnstableColorField, type UnstableColorFieldProps } from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+export const ColorControl = createControl(
+	( props: Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > ) => {
+		const { value, setValue } = useBoundProp< ColorPropValue >();
+
+		const handleChange = ( selectedColor: string ) => {
+			setValue( {
+				$$type: 'color',
+				value: selectedColor,
+			} );
+		};
+
+		return (
+			<ControlActions>
+				<UnstableColorField
+					size="tiny"
+					{ ...props }
+					value={ value?.value }
+					onChange={ handleChange }
+					fullWidth
+				/>
+			</ControlActions>
+		);
+	}
+);