@elementor/editor-editing-panel 1.0.0 → 1.1.0

package/src/controls/components/control-toggle-button-group.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { JSX } from 'react';
-import { StackProps, styled, ToggleButton, ToggleButtonGroup, Tooltip } from '@elementor/ui';
-
-export type ToggleButtonGroupItem< TValue > = {
-	value: TValue;
-	label: string;
-	icon: JSX.ElementType;
-	showTooltip?: boolean;
-};
-
-const StyledToggleButtonGroup = styled( ToggleButtonGroup )`
-	${ ( { justify } ) => `justify-content: ${ justify };` }
-`;
-
-type ExclusiveValue< TValue > = TValue | null;
-type NonExclusiveValue< TValue > = TValue[];
-
-type Props< TValue > = {
-	justify?: StackProps[ 'justifyContent' ];
-	size?: 'tiny' | 'small' | 'medium' | 'large';
-	items: ToggleButtonGroupItem< TValue >[];
-} & (
-	| {
-			exclusive?: false;
-			value: NonExclusiveValue< TValue >;
-			onChange: ( value: NonExclusiveValue< TValue > ) => void;
-	  }
-	| {
-			exclusive: true;
-			value: ExclusiveValue< TValue >;
-			onChange: ( value: ExclusiveValue< TValue > ) => void;
-	  }
-);
-
-export const ControlToggleButtonGroup = < TValue, >( {
-	justify = 'end',
-	size = 'tiny',
-	value,
-	onChange,
-	items,
-	exclusive = false,
-}: Props< TValue > ) => {
-	const handleChange = (
-		_: React.MouseEvent< HTMLElement >,
-		newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
-	) => {
-		onChange( newValue as never );
-	};
-
-	return (
-		<StyledToggleButtonGroup justify={ justify } value={ value } onChange={ handleChange } exclusive={ exclusive }>
-			{ items.map( ( { label: label, value: buttonValue, icon: Icon, showTooltip: showTooltip } ) =>
-				showTooltip ? (
-					<Tooltip title={ label } disableFocusListener={ true } placement="top" key={ buttonValue }>
-						<ToggleButton value={ buttonValue } aria-label={ label } size={ size }>
-							<Icon fontSize={ size } />
-						</ToggleButton>
-					</Tooltip>
-				) : (
-					<ToggleButton key={ buttonValue } value={ buttonValue } aria-label={ label } size={ size }>
-						<Icon fontSize={ size } />
-					</ToggleButton>
-				)
-			) }
-		</StyledToggleButtonGroup>
-	);
-};

package/src/controls/components/repeater.tsx

@@ -1,197 +0,0 @@
-import * as React from 'react';
-import { useId, useRef, useState } from 'react';
-import { __ } from '@wordpress/i18n';
-import { PlusIcon, XIcon, CopyIcon, EyeIcon, EyeOffIcon } from '@elementor/icons';
-import {
-	Box,
-	Stack,
-	Popover,
-	IconButton,
-	bindTrigger,
-	bindPopover,
-	usePopupState,
-	UnstableTagProps,
-	UnstableTag,
-	Typography,
-} from '@elementor/ui';
-
-const SIZE = 'tiny';
-
-type AnchorEl = HTMLElement | null;
-
-type Item< T > = {
-	disabled?: boolean;
-} & T;
-
-export type RepeaterProps< T > = {
-	label: string;
-	values?: T[];
-	setValues: ( newValue: T[] ) => void;
-	itemSettings: {
-		initialValues: T;
-		Label: React.ComponentType< { value: T } >;
-		Icon: React.ComponentType< { value: T } >;
-		Content: React.ComponentType< {
-			value: T;
-			setValue: ( newValue: T ) => void;
-			anchorEl: AnchorEl;
-		} >;
-	};
-};
-
-export const Repeater = < T, >( {
-	label,
-	itemSettings,
-	values: repeaterValues = [],
-	setValues: setRepeaterValues,
-}: RepeaterProps< Item< T > > ) => {
-	const addRepeaterItem = () => {
-		const newItem = structuredClone( itemSettings.initialValues );
-
-		setRepeaterValues( [ ...repeaterValues, newItem ] );
-	};
-
-	const duplicateRepeaterItem = ( index: number ) => {
-		setRepeaterValues( [
-			...repeaterValues.slice( 0, index ),
-			structuredClone( repeaterValues[ index ] ),
-			...repeaterValues.slice( index ),
-		] );
-	};
-
-	const removeRepeaterItem = ( index: number ) => {
-		setRepeaterValues( repeaterValues.filter( ( _, i ) => i !== index ) );
-	};
-
-	const toggleDisableRepeaterItem = ( index: number ) => {
-		setRepeaterValues(
-			repeaterValues.map( ( value, i ) => {
-				if ( i === index ) {
-					const { disabled, ...rest } = value;
-
-					// If the items should not be disabled, remove the disabled property.
-					return { ...rest, ...( disabled ? {} : { disabled: true } ) } as Item< T >;
-				}
-
-				return value;
-			} )
-		);
-	};
-
-	return (
-		<Stack>
-			<Stack direction="row" justifyContent="space-between" alignItems="center" sx={ { pb: 1 } }>
-				<Typography component="label" variant="caption" color="text.secondary">
-					{ label }
-				</Typography>
-				<IconButton size={ SIZE } onClick={ addRepeaterItem } aria-label={ __( 'Add item', 'elementor' ) }>
-					<PlusIcon fontSize={ SIZE } />
-				</IconButton>
-			</Stack>
-			<Stack gap={ 1 }>
-				{ repeaterValues.map( ( value, index ) => (
-					<RepeaterItem
-						key={ index }
-						disabled={ value.disabled }
-						label={ <itemSettings.Label value={ value } /> }
-						startIcon={ <itemSettings.Icon value={ value } /> }
-						removeItem={ () => removeRepeaterItem( index ) }
-						duplicateItem={ () => duplicateRepeaterItem( index ) }
-						toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
-					>
-						{ ( props ) => (
-							<itemSettings.Content
-								{ ...props }
-								value={ value }
-								setValue={ ( newValue ) =>
-									setRepeaterValues(
-										repeaterValues.map( ( item, i ) => ( i === index ? newValue : item ) )
-									)
-								}
-							/>
-						) }
-					</RepeaterItem>
-				) ) }
-			</Stack>
-		</Stack>
-	);
-};
-
-type RepeaterItemProps = {
-	label: React.ReactNode;
-	disabled?: boolean;
-	startIcon: UnstableTagProps[ 'startIcon' ];
-	removeItem: () => void;
-	duplicateItem: () => void;
-	toggleDisableItem: () => void;
-	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
-};
-
-const RepeaterItem = ( {
-	label,
-	disabled,
-	startIcon,
-	children,
-	removeItem,
-	duplicateItem,
-	toggleDisableItem,
-}: RepeaterItemProps ) => {
-	const popupId = useId();
-	const tagRef = useRef< HTMLElement >( null );
-	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
-
-	const popoverState = usePopupState( { popupId, variant: 'popover' } );
-
-	const popoverProps = bindPopover( popoverState );
-
-	return (
-		<>
-			<UnstableTag
-				ref={ tagRef }
-				label={ label }
-				showActionsOnHover
-				variant="outlined"
-				aria-label={ __( 'Open item', 'elementor' ) }
-				{ ...bindTrigger( popoverState ) }
-				startIcon={ startIcon }
-				actions={
-					<>
-						<IconButton
-							size={ SIZE }
-							onClick={ duplicateItem }
-							aria-label={ __( 'Duplicate item', 'elementor' ) }
-						>
-							<CopyIcon fontSize={ SIZE } />
-						</IconButton>
-						<IconButton
-							size={ SIZE }
-							onClick={ toggleDisableItem }
-							aria-label={
-								disabled ? __( 'Enable item', 'elementor' ) : __( 'Disable item', 'elementor' )
-							}
-						>
-							{ disabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
-						</IconButton>
-						<IconButton
-							size={ SIZE }
-							onClick={ removeItem }
-							aria-label={ __( 'Remove item', 'elementor' ) }
-						>
-							<XIcon fontSize={ SIZE } />
-						</IconButton>
-					</>
-				}
-			/>
-			<Popover
-				disablePortal
-				slotProps={ {
-					paper: { ref: setAnchorEl, sx: { width: tagRef.current?.getBoundingClientRect().width } },
-				} }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
-				{ ...popoverProps }
-			>
-				<Box p={ 2 }>{ children( { anchorEl } ) }</Box>
-			</Popover>
-		</>
-	);
-};

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

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { forwardRef, useId } from 'react';
-import { 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"
-				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/controls/control-actions/control-actions-context.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { createContext, 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/controls/control-actions/control-actions-menu.ts

@@ -1,7 +0,0 @@
-import { Components, createMenu } from '@elementor/menus';
-
-export const createControlActionsMenu = ( { components }: { components: Components } ) => {
-	return createMenu( {
-		components,
-	} );
-};

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

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } 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 }</UnstableFloatingActionBar>
-		</FloatingBarContainer>
-	);
-}

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

@@ -1,210 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { PropValue, ShadowPropValue, BoxShadowPropValue } from '@elementor/editor-props';
-import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
-import { Repeater } from '../components/repeater';
-import { SizeControl } from './size-control';
-import { ColorControl } from './color-control';
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
-import { SelectControl } from './select-control';
-import { createControl } from '../create-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,
-}: {
-	value: ShadowPropValue;
-	setValue: ( newValue: ShadowPropValue ) => void;
-} ) => {
-	const setShadow = ( newValue: ShadowPropValue[ 'value' ] ) => {
-		setValue( {
-			$$type: 'shadow',
-			value: newValue,
-		} );
-	};
-
-	return (
-		<Stack gap={ 1.5 }>
-			<Grid container spacing={ 1 }>
-				<Control
-					bind="color"
-					value={ value.value.color }
-					label={ __( 'Color', 'elementor' ) }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'color' ] ) =>
-						setShadow( { ...value.value, color: v } )
-					}
-				>
-					<ColorControl />
-				</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 spacing={ 1 }>
-				<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 spacing={ 1 }>
-				<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 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>
-		</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/controls/color-control.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { UnstableColorField, UnstableColorFieldProps } from '@elementor/ui';
-import { useBoundProp } from '../bound-prop-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-import { ColorPropValue } from '@elementor/editor-props';
-
-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 } />
-			</ControlActions>
-		);
-	}
-);