@elementor/editor-editing-panel 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "^0.17.0",
-    "@elementor/editor-controls": "^0.1.0",
-    "@elementor/editor-elements": "^0.3.0",
+    "@elementor/editor": "^0.17.1",
+    "@elementor/editor-controls": "^0.1.1",
+    "@elementor/editor-elements": "^0.3.1",
     "@elementor/menus": "^0.1.1",
     "@elementor/editor-props": "^0.3.0",
-    "@elementor/editor-panels": "^0.10.0",
-    "@elementor/editor-responsive": "^0.12.2",
-    "@elementor/editor-styles": "^0.2.1",
+    "@elementor/editor-panels": "^0.10.1",
+    "@elementor/editor-responsive": "^0.12.3",
+    "@elementor/editor-styles": "^0.3.0",
     "@elementor/editor-v1-adapters": "^0.8.4",
-    "@elementor/icons": "^1.19.0",
-    "@elementor/ui": "^1.21.13",
+    "@elementor/icons": "^1.20.0",
+    "@elementor/ui": "^1.22.0",
     "@elementor/utils": "^0.3.0",
-    "@wordpress/i18n": "^4.45.0"
+    "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"

package/src/components/css-class-selector.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { updateSettings, useElementSetting, useElementStyles } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { Chip, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useClassesProp } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+import { MultiCombobox, type Option } from './multi-combobox';
+
+const ID = 'elementor-css-class-selector';
+const TAGS_LIMIT = 8;
+
+export function CssClassSelector() {
+	const options = useOptions();
+
+	const { id: activeId, setId: setActiveId } = useStyle();
+	const [ appliedIds ] = useAppliedClassesIds();
+
+	const handleApply = useHandleApply();
+	const handleActivate = ( { value }: Option ) => setActiveId( value );
+
+	const active = options.find( ( option ) => option.value === activeId ) || null;
+
+	const applied = appliedIds
+		.map( ( id ) => options.find( ( option ) => option.value === id ) )
+		.filter( ( option ) => !! option );
+
+	return (
+		<Stack gap={ 1 } p={ 2 }>
+			<Typography component="label" variant="caption" htmlFor={ ID }>
+				{ __( 'CSS Classes', 'elementor' ) }
+			</Typography>
+			<MultiCombobox
+				id={ ID }
+				size="tiny"
+				options={ options }
+				selected={ applied }
+				onSelect={ handleApply }
+				limitTags={ TAGS_LIMIT }
+				optionsLabel={ __( 'Global CSS Classes', 'elementor' ) }
+				renderTags={ ( values, getTagProps ) =>
+					values.map( ( value, index ) => {
+						const chipProps = getTagProps( { index } );
+						const isActive = value.value === active?.value;
+
+						return (
+							<Chip
+								{ ...chipProps }
+								key={ chipProps.key }
+								size="small"
+								label={ value.label }
+								variant={ isActive ? 'filled' : 'standard' }
+								color={ isActive && value.color ? value.color : 'default' }
+								onClick={ () => handleActivate( value ) }
+								onDelete={ null }
+							/>
+						);
+					} )
+				}
+			/>
+		</Stack>
+	);
+}
+
+function useOptions() {
+	const { element } = useElement();
+
+	const styleDefs = useElementStyles( element.id );
+
+	return Object.values( styleDefs ).map< Option >( ( styleDef ) => ( {
+		label: styleDef.label,
+		value: styleDef.id,
+		fixed: true,
+		color: 'primary',
+	} ) );
+}
+
+function useAppliedClassesIds() {
+	const { element } = useElement();
+	const currentClassesProp = useClassesProp();
+
+	const value = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+
+	const setValue = ( ids: StyleDefinitionID[] ) => {
+		updateSettings( {
+			id: element.id,
+			props: {
+				[ currentClassesProp ]: classesPropTypeUtil.create( ids ),
+			},
+		} );
+	};
+
+	return [ value, setValue ] as const;
+}
+
+function useHandleApply() {
+	const { id: activeId, setId: setActiveId } = useStyle();
+	const [ appliedIds, setAppliedIds ] = useAppliedClassesIds();
+
+	return ( selectedOptions: Option[] ) => {
+		const selectedValues = selectedOptions.map( ( { value } ) => value );
+
+		const isSameClassesAlreadyApplied =
+			selectedValues.length === appliedIds.length &&
+			selectedValues.every( ( value ) => appliedIds.includes( value ) );
+
+		// Should not trigger to avoid register an undo step.
+		if ( isSameClassesAlreadyApplied ) {
+			return;
+		}
+
+		setAppliedIds( selectedValues );
+
+		const addedValue = selectedValues.find( ( id ) => ! appliedIds.includes( id ) );
+
+		if ( addedValue ) {
+			setActiveId( addedValue );
+
+			return;
+		}
+
+		const removedValue = appliedIds.find( ( id ) => ! selectedValues.includes( id ) );
+
+		if ( removedValue && removedValue === activeId ) {
+			setActiveId( selectedValues[ 0 ] ?? null );
+		}
+	};
+}

package/src/components/multi-combobox/multi-combobox.tsx

@@ -13,12 +13,12 @@ import { type FilterOptionsState } from '@mui/base';
 import { type ActionOption, type Actions, type Option } from './types';
 import { useComboboxActions } from './use-combobox-actions';
 
-type Props = Omit< AutocompleteProps< Option, true, true, true >, 'renderInput' | 'getLimitTagsText' > & {
+type Props = Omit< AutocompleteProps< Option, true, true, true >, 'renderInput' | 'getLimitTagsText' | 'onSelect' > & {
 	actions?: Actions;
 	selected: Option[];
 	options: Option[];
 	optionsLabel?: string;
-	onApply?: ( value: Option[] ) => void;
+	onSelect?: ( value: Option[] ) => void;
 	onCreate?: ( value: string ) => void;
 };
 
@@ -27,27 +27,17 @@ export const MultiCombobox = ( {
 	selected,
 	options,
 	optionsLabel,
-	onApply,
+	onSelect,
 	onCreate,
 	...props
 }: Props ) => {
-	const { action: actionProps, option: optionProps } = useComboboxActions( selected, actions, optionsLabel, onApply );
-
-	const handleSelectOption = ( values: Array< ActionOption | Option | string > ) => {
-		const action = values.find( ( value ) => actionProps.is( value as ActionOption ) );
-
-		if ( action ) {
-			return actionProps.onChange( action as ActionOption );
-		}
-
-		return optionProps.onChange( values as Option[] );
-	};
-
-	const handleCreateOption = ( values: Array< ActionOption | Option | string > ) => {
-		const value = values.find( ( option ) => typeof option === 'string' );
-
-		onCreate?.( value as string );
-	};
+	const { action: actionProps, option: optionProps } = useComboboxActions(
+		selected,
+		actions,
+		// TODO: make the group mechanism more generic, allow passing list of groups.
+		optionsLabel,
+		onSelect
+	);
 
 	return (
 		<Autocomplete
@@ -62,31 +52,43 @@ export const MultiCombobox = ( {
 			options={ options }
 			renderGroup={ renderGroup }
 			renderInput={ ( params ) => <TextField { ...params } /> }
+			// TODO: is it relevant for the combobox? or should be in the parent component?
 			getLimitTagsText={ ( more ) => <Chip size="tiny" variant="standard" label={ `+${ more }` } clickable /> }
-			onChange={ ( _, values, reason ) => {
-				if ( reason === 'selectOption' ) {
-					return handleSelectOption( values );
+			onChange={ ( _, selectedOrTypedValue, reason ) => {
+				if ( reason === 'createOption' ) {
+					const typedValue = selectedOrTypedValue.find( ( option ) => typeof option === 'string' );
+
+					return typedValue && onCreate?.( typedValue );
 				}
 
-				if ( reason === 'createOption' ) {
-					return handleCreateOption( values );
+				const action = selectedOrTypedValue.find( ( value ) => actionProps.is( value ) );
+
+				if ( reason === 'selectOption' && action ) {
+					return actionProps.onChange( action );
 				}
 
-				onApply?.( values as ActionOption[] );
+				const selectedValues = selectedOrTypedValue.filter( ( v ) => typeof v !== 'string' );
+				const fixedValues = options.filter( ( option ) => option.fixed );
+
+				optionProps.onChange( [ ...new Set( [ ...fixedValues, ...selectedValues ] ) ] );
 			} }
 			getOptionLabel={ ( option ) => {
-				if ( optionProps.is( option as ActionOption ) ) {
-					return optionProps.getLabel( option as Option );
+				if ( optionProps.is( option ) ) {
+					return optionProps.getLabel( option );
+				}
+
+				if ( actionProps.is( option ) ) {
+					return actionProps.getLabel( option );
 				}
 
-				return actionProps.getLabel( option as ActionOption ) ?? '';
+				return '';
 			} }
 			filterOptions={ ( optionList: Option[], params: FilterOptionsState< ActionOption | Option > ) => {
-				const filteredoptions = optionProps.getFilteredOptions( optionList, params );
+				const filteredOptions = optionProps.getFilteredOptions( optionList, params );
 
 				const actionOptions = actionProps.getFilteredActions( optionList, params );
 
-				return [ ...actionOptions, ...filteredoptions ];
+				return [ ...actionOptions, ...filteredOptions ];
 			} }
 			groupBy={ ( option ) =>
 				( optionProps.is( option ) ? optionProps.groupBy() : actionProps.groupBy( option ) ) ?? ''
@@ -95,7 +97,7 @@ export const MultiCombobox = ( {
 	);
 };
 
-export const renderGroup = ( params: AutocompleteRenderGroupParams ) => (
+const renderGroup = ( params: AutocompleteRenderGroupParams ) => (
 	<Group key={ params.key }>
 		<GroupHeader>{ params.group }</GroupHeader>
 		<GroupItems>{ params.children }</GroupItems>

package/src/components/multi-combobox/types.ts

@@ -1,6 +1,8 @@
 export type Option = {
 	label: string;
 	value: string;
+	fixed?: boolean;
+	// TODO: Should be remove from here or use some kind of `meta`
 	color?: 'primary' | 'global';
 };
 

package/src/components/multi-combobox/use-combobox-actions.ts

@@ -7,10 +7,10 @@ export const useComboboxActions = (
 	applied: Option[],
 	actions: Actions,
 	optionsLabel?: string,
-	onApply?: ( value: Option[] ) => void
+	onSelect?: ( value: Option[] ) => void
 ) => ( {
 	action: {
-		is: ( opt: ActionOption ): opt is ActionOption => !! opt.action,
+		is: ( opt: ActionOption | Option | string ): opt is ActionOption => typeof opt !== 'string' && 'action' in opt,
 		getLabel: ( option: ActionOption ) => option.action.getLabel( option.label ),
 		groupBy: ( option: ActionOption ) => option.action.groupLabel,
 		onChange: ( { action, label }: ActionOption ) => action?.apply( label ),
@@ -34,10 +34,10 @@ export const useComboboxActions = (
 		},
 	},
 	option: {
-		is: ( opt: ActionOption | Option ): opt is Option => ! ( 'action' in opt ),
+		is: ( opt: ActionOption | Option | string ): opt is Option => typeof opt !== 'string' && ! ( 'action' in opt ),
 		getLabel: ( option: Option ) => option.label,
 		groupBy: () => optionsLabel ?? '',
-		onChange: ( optionValues: Option[] ) => onApply?.( optionValues ),
+		onChange: ( optionValues: Option[] ) => onSelect?.( optionValues ),
 		getFilteredOptions: ( optionList: Option[], params: FilterOptionsState< Option > ) => {
 			const appliedValues = applied.map( ( option ) => option.value );
 

package/src/components/style-sections/layout-section/align-items-field.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { JSX } from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	LayoutAlignCenterIcon as CenterIcon,
+	LayoutAlignLeftIcon,
+	LayoutAlignRightIcon,
+	LayoutDistributeVerticalIcon as JustifyIcon,
+} from '@elementor/icons';
+import { DirectionProvider, Grid, ThemeProvider, type ToggleButtonProps, useTheme, withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { type FlexDirection } from './flex-direction-field';
+
+type AlignItems = 'start' | 'center' | 'end' | 'justify';
+
+export const AlignItemsField = () => {
+	const options = useOptions(),
+		{ isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind="align-items">
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Align Items', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ToggleControl options={ options } />
+						</Grid>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
+
+const useOptions = (): ToggleButtonGroupItem< AlignItems >[] => {
+	const StartIcon = withDirection( LayoutAlignLeftIcon ),
+		EndIcon = withDirection( LayoutAlignRightIcon );
+
+	return [
+		{
+			value: 'start',
+			label: __( 'Start', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'center',
+			label: __( 'Center', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'end',
+			label: __( 'End', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'justify',
+			label: __( 'Justify', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } />,
+			showTooltip: true,
+		},
+	];
+};
+
+const RotatedIcon = ( { icon: Icon, size }: { icon: JSX.ElementType; size: ToggleButtonProps[ 'size' ] } ) => {
+	const [ direction ] = useStylesField< FlexDirection >( 'flex-direction' ),
+		isRtl = 'rtl' === useTheme().direction,
+		rotationMultiplier = isRtl ? -1 : 1;
+
+	const rotationAngelMap: Record< FlexDirection, number > = {
+		row: 90,
+		column: 0,
+		'row-reverse': -90,
+		'column-reverse': -180,
+	};
+
+	return (
+		<Icon
+			fontSize={ size }
+			sx={ { transition: '.3s', rotate: `${ rotationAngelMap[ direction || 'row' ] * rotationMultiplier }deg` } }
+		/>
+	);
+};

package/src/components/style-sections/layout-section/flex-direction-field.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, ThemeProvider, withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+const options: ToggleButtonGroupItem< FlexDirection >[] = [
+	{
+		value: 'row',
+		label: __( 'Row', 'elementor' ),
+		renderContent: ( { size } ) => {
+			const StartIcon = withDirection( ArrowRightIcon );
+			return <StartIcon fontSize={ size } />;
+		},
+		showTooltip: true,
+	},
+	{
+		value: 'column',
+		label: __( 'Column', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowDownSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'row-reverse',
+		label: __( 'Row reverse', 'elementor' ),
+		renderContent: ( { size } ) => {
+			const EndIcon = withDirection( ArrowLeftIcon );
+			return <EndIcon fontSize={ size } />;
+		},
+		showTooltip: true,
+	},
+	{
+		value: 'column-reverse',
+		label: __( 'Column reverse', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowUpSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const FlexDirectionField = () => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind="flex-direction">
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ToggleControl options={ options } />
+						</Grid>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};

package/src/components/style-sections/layout-section/flex-order-field.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { useState } from 'react';
+import {
+	ControlLabel,
+	ControlToggleButtonGroup,
+	NumberControl,
+	type ToggleButtonGroupItem,
+} from '@elementor/editor-controls';
+import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, Stack, ThemeProvider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { useStylesField } from '../../../hooks/use-styles-field';
+
+type GroupControlItemOption = 'first' | 'last' | 'custom';
+
+export const FIRST_DEFAULT_VALUE = -99999,
+	LAST_DEFAULT_VALUE = 99999,
+	FIRST = 'first',
+	LAST = 'last',
+	CUSTOM = 'custom';
+
+const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
+	{
+		value: FIRST,
+		label: __( 'First', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowUpSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: LAST,
+		label: __( 'Last', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowDownSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: CUSTOM,
+		label: __( 'Custom', 'elementor' ),
+		renderContent: ( { size } ) => <PencilIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const FlexOrderField = () => {
+	const { isSiteRtl } = useDirection(),
+		[ order, setOrder ] = useStylesField< number | null >( 'order' );
+
+	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order ) );
+
+	const handleToggleButtonChange = ( group: GroupControlItemOption | null ) => {
+		setGroupControlValue( group );
+
+		const orderValueMap = {
+			[ FIRST ]: FIRST_DEFAULT_VALUE,
+			[ LAST ]: LAST_DEFAULT_VALUE,
+			[ CUSTOM ]: null,
+		};
+
+		setOrder( group ? orderValueMap[ group ] : null );
+	};
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<Stack gap={ 2 }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ControlToggleButtonGroup
+								items={ items }
+								value={ groupControlValue }
+								onChange={ handleToggleButtonChange }
+								exclusive={ true }
+							/>
+						</Grid>
+					</Grid>
+
+					{ CUSTOM === groupControlValue && (
+						<StylesField bind={ 'order' }>
+							<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+								<Grid item xs={ 6 }>
+									<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
+								</Grid>
+								<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+									<NumberControl
+										min={ FIRST_DEFAULT_VALUE + 1 }
+										max={ LAST_DEFAULT_VALUE - 1 }
+										shouldForceInt={ true }
+									/>
+								</Grid>
+							</Grid>
+						</StylesField>
+					) }
+				</Stack>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
+
+const getGroupControlValue = ( order: number | null ): GroupControlItemOption | null => {
+	if ( LAST_DEFAULT_VALUE === order ) {
+		return LAST;
+	}
+
+	if ( FIRST_DEFAULT_VALUE === order ) {
+		return FIRST;
+	}
+
+	return 0 === order || order ? CUSTOM : null;
+};