@elementor/editor-editing-panel 0.19.0 → 1.1.0

package/src/components/style-sections/spacing-section/linked-dimensions-control.tsx

@@ -1,155 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid, Stack, ToggleButton } from '@elementor/ui';
-import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
-import { PropValue, TransformablePropValue } from '../../../controls/props/types';
-import { SizeControl } from '../../../controls/control-types/size-control';
-import { ControlLabel } from '../../control-label';
-import { ControlContext, useControl } from '../../../controls/control-context';
-
-export type Position = 'top' | 'right' | 'bottom' | 'left';
-
-export type LinkedDimensionsValue = TransformablePropValue<
-	'linked-dimensions',
-	{
-		isLinked: boolean;
-		top: PropValue;
-		right: PropValue;
-		bottom: PropValue;
-		left: PropValue;
-	}
->;
-
-export const LinkedDimensionsControl = ( { label }: { label: string } ) => {
-	const { value, setValue } = useControl< LinkedDimensionsValue >();
-	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;
-} ) => (
-	<ControlContext.Provider
-		value={ {
-			bind,
-			setValue: ( newValue ) => setValue( bind, newValue ),
-			value,
-		} }
-	>
-		<SizeControl startIcon={ startIcon } />
-	</ControlContext.Provider>
-);

package/src/components/style-sections/typography-section/font-size-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { SizeControl } from '../../../controls/control-types/size-control';
-
-export const FontSizeControl = () => {
-	return (
-		<StyleControl bind="font-size">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Font Size', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/typography-section/letter-spacing-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { SizeControl } from '../../../controls/control-types/size-control';
-
-export const LetterSpacingControl = () => {
-	return (
-		<StyleControl bind="letter-spacing">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Letter Spacing', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/typography-section/text-alignment-control.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from '@elementor/icons';
-import { ToggleButtonGroupItem } from '../../../controls/components/control-toggle-button-group';
-import { StyleControl } from '../../../controls/style-control';
-import { ToggleControl } from '../../../controls/control-types/toggle-control';
-
-type Alignments = 'left' | 'center' | 'right' | 'justify';
-
-const options: ToggleButtonGroupItem< Alignments >[] = [
-	{
-		value: 'left',
-		label: __( 'Left', 'elementor' ),
-		icon: AlignLeftIcon,
-	},
-	{
-		value: 'center',
-		label: __( 'Center', 'elementor' ),
-		icon: AlignCenterIcon,
-	},
-	{
-		value: 'right',
-		label: __( 'Right', 'elementor' ),
-		icon: AlignRightIcon,
-	},
-	{
-		value: 'justify',
-		label: __( 'Justify', 'elementor' ),
-		icon: AlignJustifiedIcon,
-	},
-];
-
-export const TextAlignmentControl = () => {
-	return (
-		<StyleControl bind={ 'text-align' }>
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Alignment', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 } display="flex" justifyContent="end">
-					<ToggleControl options={ options } />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/typography-section/text-color-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { ColorControl } from '../../../controls/control-types/color-control';
-
-export const TextColorControl = () => {
-	return (
-		<StyleControl bind="color">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Text Color', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<ColorControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/typography-section/transform-control.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
-import { StyleControl } from '../../../controls/style-control';
-import { ToggleControl } from '../../../controls/control-types/toggle-control';
-
-const options = [
-	{ value: 'capitalize', label: __( 'Capitalize', 'elementor' ), icon: LetterCaseIcon },
-	{ value: 'uppercase', label: __( 'Uppercase', 'elementor' ), icon: LetterCaseUpperIcon },
-	{ value: 'lowercase', label: __( 'Lowercase', 'elementor' ), icon: LetterCaseLowerIcon },
-];
-
-export const TransformControl = () => (
-	<StyleControl bind={ 'text-transform' }>
-		<Grid container spacing={ 1 } alignItems="center">
-			<Grid item xs={ 6 }>
-				<StyleControl.Label>{ __( 'Transform', 'elementor' ) }</StyleControl.Label>
-			</Grid>
-			<Grid item xs={ 6 } display="flex" justifyContent="end">
-				<ToggleControl options={ options } />
-			</Grid>
-		</Grid>
-	</StyleControl>
-);

package/src/components/style-sections/typography-section/word-spacing-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { SizeControl } from '../../../controls/control-types/size-control';
-
-export const WordSpacingControl = () => {
-	return (
-		<StyleControl bind="word-spacing">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Word Spacing', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

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

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { JSX } from 'react';
-import { StackProps, styled, ToggleButton, ToggleButtonGroup } from '@elementor/ui';
-
-export type ToggleButtonGroupItem< TValue > = {
-	value: TValue;
-	label: string;
-	icon: JSX.ElementType;
-};
-
-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, value: buttonValue, icon: Icon } ) => (
-				<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" sx={ { py: 0.5 } }>
-				<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,79 +0,0 @@
-import * as React from 'react';
-import { useId } from 'react';
-import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
-import { PropValue } from '../props/types';
-
-export type TextFieldInnerSelectionProps = {
-	placeholder?: string;
-	type: string;
-	value: PropValue;
-	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
-	endAdornment: React.ReactNode;
-	startAdornment?: React.ReactNode;
-};
-
-export const TextFieldInnerSelection = ( {
-	placeholder,
-	type,
-	value,
-	onChange,
-	endAdornment,
-	startAdornment,
-}: TextFieldInnerSelectionProps ) => {
-	return (
-		<TextField
-			size="tiny"
-			type={ type }
-			value={ value }
-			onChange={ onChange }
-			placeholder={ placeholder }
-			InputProps={ {
-				endAdornment,
-				startAdornment,
-			} }
-		/>
-	);
-};
-
-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.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { styled, UnstableFloatingActionBar } from '@elementor/ui';
-import { PropsWithChildren } from 'react';
-import { controlActionsMenu } from './control-actions-menu';
-
-const { useMenuItems } = controlActionsMenu;
-
-// CSS hack to hide empty floating bars.
-const FloatingBar = styled( UnstableFloatingActionBar )`
-	& .MuiPaper-root:empty {
-		display: none;
-	}
-
-	// this is for a fix which would be added later on - to force the width externally
-	width: 100%;
-	& > :first-of-type {
-		width: 100%;
-	}
-`;
-
-export type ControlActionsProps = PropsWithChildren< {
-	fullWidth?: boolean;
-} >;
-
-export default function ControlActions( { fullWidth = false, children }: ControlActionsProps ) {
-	const items = useMenuItems().default;
-
-	if ( items.length === 0 ) {
-		return children;
-	}
-
-	return (
-		<FloatingBar
-			actions={ items.map( ( { MenuItem, id } ) => (
-				<MenuItem key={ id } />
-			) ) }
-			// TODO - work on a general layouting solution instead
-			sx={ fullWidth ? { width: '100%' } : undefined }
-		>
-			{ children }
-		</FloatingBar>
-	);
-}