@elementor/editor-editing-panel 0.17.0 → 0.18.0

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
-import { StyleControl } from '../../../controls/style-control';
-import { ControlContainer } from '../../../controls/components/control-container';
 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">
-			<ControlContainer>
-				<StyleControl.Label>{ __( 'Text Color', 'elementor' ) }</StyleControl.Label>
-				<ColorControl />
-			</ControlContainer>
+			<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/text-direction-control.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { TextDirectionLtrIcon, TextDirectionRtlIcon } 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 Direction = 'ltr' | 'rtl';
+
+const options: ToggleButtonGroupItem< Direction >[] = [
+	{
+		value: 'ltr',
+		label: __( 'Left to Right', 'elementor' ),
+		icon: TextDirectionLtrIcon,
+	},
+	{
+		value: 'rtl',
+		label: __( 'Right to Left', 'elementor' ),
+		icon: TextDirectionRtlIcon,
+	},
+];
+
+export const TextDirectionControl = () => {
+	return (
+		<StyleControl bind={ 'direction' }>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<StyleControl.Label>{ __( 'Direction', 'elementor' ) }</StyleControl.Label>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<ToggleControl options={ options } />
+				</Grid>
+			</Grid>
+		</StyleControl>
+	);
+};

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

@@ -1,49 +1,52 @@
 import * as React from 'react';
-import { ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
 import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
 import { ControlLabel } from '../../control-label';
 import { useStyleControl } from '../../../controls/hooks/use-style-control';
-import { __ } from '@wordpress/i18n';
-import { ControlContainer } from '../../../controls/components/control-container';
 
 const buttonSize = 'tiny';
 
 export const TextStyleControl = () => {
-	const [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'fontStyle' );
-	const [ textDecoration, setTextDecoration ] = useStyleControl< string | null >( 'textDecoration' );
+	const [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'font-style' );
+	const [ textDecoration, setTextDecoration ] = useStyleControl< string | null >( 'text-decoration' );
 
 	const formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];
 
 	return (
-		<ControlContainer>
-			<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
-			<ToggleButtonGroup value={ formats }>
-				<ToggleButton
-					value="italic"
-					onChange={ ( v ) => setFontStyle( fontStyle === v ? null : v ) }
-					aria-label="italic"
-					sx={ { marginLeft: 'auto' } }
-				>
-					<ItalicIcon fontSize={ buttonSize } />
-				</ToggleButton>
-				<ShorthandControl
-					value="line-through"
-					currentValues={ textDecoration || '' }
-					updateValues={ setTextDecoration }
-					aria-label="line-through"
-				>
-					<StrikethroughIcon fontSize={ buttonSize } />
-				</ShorthandControl>
-				<ShorthandControl
-					value="underline"
-					currentValues={ textDecoration || '' }
-					updateValues={ setTextDecoration }
-					aria-label="underline"
-				>
-					<UnderlineIcon fontSize={ buttonSize } />
-				</ShorthandControl>
-			</ToggleButtonGroup>
-		</ControlContainer>
+		<Grid container spacing={ 1 } alignItems="center">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				<ToggleButtonGroup value={ formats }>
+					<ToggleButton
+						value="italic"
+						onChange={ ( v ) => setFontStyle( fontStyle === v ? null : v ) }
+						aria-label="italic"
+						sx={ { marginLeft: 'auto' } }
+					>
+						<ItalicIcon fontSize={ buttonSize } />
+					</ToggleButton>
+					<ShorthandControl
+						value="line-through"
+						currentValues={ textDecoration || '' }
+						updateValues={ setTextDecoration }
+						aria-label="line-through"
+					>
+						<StrikethroughIcon fontSize={ buttonSize } />
+					</ShorthandControl>
+					<ShorthandControl
+						value="underline"
+						currentValues={ textDecoration || '' }
+						updateValues={ setTextDecoration }
+						aria-label="underline"
+					>
+						<UnderlineIcon fontSize={ buttonSize } />
+					</ShorthandControl>
+				</ToggleButtonGroup>
+			</Grid>
+		</Grid>
 	);
 };
 

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ControlContainer } from '../../../controls/components/control-container';
-import { StyleControl } from '../../../controls/style-control';
 import { __ } from '@wordpress/i18n';
-import { ToggleControl } from '../../../controls/control-types/toggle-control';
+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 },
@@ -11,13 +11,15 @@ const options = [
 	{ value: 'lowercase', label: __( 'Lowercase', 'elementor' ), icon: LetterCaseLowerIcon },
 ];
 
-export const TransformControl = () => {
-	return (
-		<ControlContainer>
-			<StyleControl.Label>{ __( 'Transform', 'elementor' ) }</StyleControl.Label>
-			<StyleControl bind={ 'text-transform' }>
+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 }>
 				<ToggleControl options={ options } />
-			</StyleControl>
-		</ControlContainer>
-	);
-};
+			</Grid>
+		</Grid>
+	</StyleControl>
+);

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

@@ -11,6 +11,7 @@ import { WordSpacingControl } from './word-spacing-control';
 import { CollapsibleContent } from '../../collapsible-content';
 import { TransformControl } from './transform-control';
 import { TextAlignmentControl } from './text-alignment-control';
+import { TextDirectionControl } from './text-direction-control';
 
 export const TypographySection = () => {
 	return (
@@ -28,6 +29,7 @@ export const TypographySection = () => {
 						<TextAlignmentControl />
 						<TextStyleControl />
 						<TransformControl />
+						<TextDirectionControl />
 					</Stack>
 				</CollapsibleContent>
 			</Stack>

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

@@ -1,16 +1,20 @@
 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';
-import { ControlContainer } from '../../../controls/components/control-container';
-import { __ } from '@wordpress/i18n';
 
 export const WordSpacingControl = () => {
 	return (
 		<StyleControl bind="word-spacing">
-			<ControlContainer>
-				<StyleControl.Label>{ __( 'Word Spacing', 'elementor' ) }</StyleControl.Label>
-				<SizeControl />
-			</ControlContainer>
+			<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/components/style-tab.tsx

@@ -8,6 +8,7 @@ import { TypographySection } from './style-sections/typography-section/typograph
 import { PositionSection } from './style-sections/position-section/position-section';
 import { StyleDefinition } from '@elementor/editor-style';
 import { SpacingSection } from './style-sections/spacing-section/spacing-section';
+import { EffectsSection } from './style-sections/effects-section/effects-section';
 
 const CLASSES_PROP_KEY = 'classes';
 
@@ -22,6 +23,7 @@ export const StyleTab = () => {
 				<PositionSection />
 				<TypographySection />
 				<SpacingSection />
+				<EffectsSection />
 			</Stack>
 		</StyleContext>
 	);
@@ -30,7 +32,9 @@ export const StyleTab = () => {
 function useClassesProp(): string {
 	const { elementType } = useElementContext();
 
-	const prop = Object.entries( elementType.propsSchema ).find( ( [ , { type } ] ) => type.key === CLASSES_PROP_KEY );
+	const prop = Object.entries( elementType.propsSchema ).find(
+		( [ , propType ] ) => propType.kind === 'array' && propType.key === CLASSES_PROP_KEY
+	);
 
 	if ( ! prop ) {
 		throw new Error( 'Element does not have a classes prop' );

package/src/controls/components/control-type-container.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { styled, Box, BoxProps } from '@elementor/ui';
+import { ControlLayout, ControlType, getLayoutByType } from '../controls-registry';
+
+export const ControlTypeContainer = ( {
+	controlType,
+	children,
+}: React.PropsWithChildren< { controlType: ControlType } > ) => {
+	const layout = getLayoutByType( controlType );
+
+	return <StyledContainer layout={ layout }>{ children }</StyledContainer>;
+};
+
+const StyledContainer = styled( Box, {
+	shouldForwardProp: ( prop: string ) => ! [ 'layout' ].includes( prop ),
+} )< BoxProps & { layout: ControlLayout } >( ( { layout, theme } ) => ( {
+	display: 'grid',
+	gridGap: theme.spacing( 1 ),
+	...getGridLayout( layout ),
+} ) );
+
+const getGridLayout = ( layout: ControlLayout ) => ( {
+	justifyContent: 'space-between',
+	gridTemplateColumns: {
+		full: '1fr',
+		'two-columns': 'repeat(2, 1fr)',
+	}[ layout ],
+} );

package/src/controls/components/repeater.tsx

@@ -0,0 +1,197 @@
+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/control-actions/actions/popover-action.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
+import { ComponentType, ElementType as ReactElementType, useId } from 'react';
+import { XIcon } from '@elementor/icons';
+
+const SIZE = 'tiny';
+
+export type PopoverActionProps = {
+	title: string;
+	visible?: boolean;
+	icon: ReactElementType;
+	popoverContent: ComponentType< { closePopover: () => void } >;
+};
+
+export default function PopoverAction( {
+	title,
+	visible = true,
+	icon: Icon,
+	popoverContent: PopoverContent,
+}: PopoverActionProps ) {
+	const id = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-popover-action-${ id }`,
+	} );
+
+	if ( ! visible ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Tooltip placement="top" title={ title }>
+				<IconButton aria-label={ title } key={ id } size={ SIZE } { ...bindToggle( popupState ) }>
+					<Icon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
+			<Popover
+				disablePortal
+				disableScrollLock
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'center',
+				} }
+				{ ...bindPopover( popupState ) }
+			>
+				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
+					<Icon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+					<Typography variant="subtitle2">{ title }</Typography>
+					<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ popupState.close }>
+						<XIcon fontSize={ SIZE } />
+					</IconButton>
+				</Stack>
+				<PopoverContent closePopover={ popupState.close } />
+			</Popover>
+		</>
+	);
+}

package/src/controls/control-actions/control-actions-menu.ts

@@ -0,0 +1,8 @@
+import PopoverAction from './actions/popover-action';
+import { createMenu } from '@elementor/menus';
+
+export const controlActionsMenu = createMenu( {
+	components: {
+		PopoverAction,
+	},
+} );

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

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

package/src/controls/control-replacement.ts

@@ -1,26 +1,34 @@
 import { PropValue } from '../types';
+import { ComponentType } from 'react';
+import { useControl } from './control-context';
 
 type ReplaceWhenParams = {
 	value: PropValue;
 };
 
 type ControlReplacement = {
-	component: React.ComponentType;
+	component: ComponentType;
 	condition: ( { value }: ReplaceWhenParams ) => boolean;
 };
 
 let controlReplacement: ControlReplacement | undefined;
 
-export const replaceControl = ( { component, condition }: ControlReplacement ) => {
-	controlReplacement = { component, condition };
-};
-
-export const getControlReplacement = ( { value }: ReplaceWhenParams ) => {
+const getControlReplacement = ( { value }: ReplaceWhenParams ) => {
 	let shouldReplace = false;
 
 	try {
-		shouldReplace = !! controlReplacement?.condition( { value } );
+		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement?.component;
 	} catch {}
 
 	return shouldReplace ? controlReplacement?.component : undefined;
 };
+
+export function replaceControl( { component, condition }: ControlReplacement ) {
+	controlReplacement = { component, condition };
+}
+
+export function useControlReplacement() {
+	const { value } = useControl();
+
+	return getControlReplacement( { value } );
+}