@elementor/editor-editing-panel 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,20 @@
     "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/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-v1-adapters": "^0.8.4",
-    "@elementor/icons": "^1.19.0",
-    "@elementor/ui": "^1.21.13",
-    "@elementor/utils": "^0.3.0",
-    "@wordpress/i18n": "^4.45.0"
+    "@elementor/editor": "0.17.2",
+    "@elementor/editor-controls": "0.2.0",
+    "@elementor/editor-elements": "0.3.2",
+    "@elementor/menus": "0.1.2",
+    "@elementor/editor-props": "0.4.0",
+    "@elementor/editor-panels": "0.10.2",
+    "@elementor/editor-responsive": "0.12.4",
+    "@elementor/editor-styles": "0.3.1",
+    "@elementor/editor-v1-adapters": "0.8.5",
+    "@elementor/icons": "^1.20.0",
+    "@elementor/schema": "0.1.2",
+    "@elementor/ui": "^1.22.0",
+    "@elementor/utils": "0.3.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/border-section/border-radius-field.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
-import type { BorderRadiusPropValue } from '@elementor/editor-props';
+import { borderRadiusPropTypeUtil } from '@elementor/editor-props';
 import {
 	BorderCornersIcon,
 	RadiusBottomLeftIcon,
@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
-const corners: EqualUnequalItems< BorderRadiusPropValue[ '$$type' ], BorderRadiusPropValue > = [
+const corners: EqualUnequalItems = [
 	{
 		label: __( 'Top Left', 'elementor' ),
 		icon: <RadiusTopLeftIcon fontSize={ 'tiny' } />,
@@ -39,10 +39,10 @@ export const BorderRadiusField = () => {
 	return (
 		<StylesField bind={ 'border-radius' }>
 			<EqualUnequalSizesControl
+				items={ corners }
 				label={ __( 'Border Radius', 'elementor' ) }
 				icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
-				items={ corners }
-				multiSizeType={ 'border-radius' }
+				multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
 			/>
 		</StylesField>
 	);

package/src/components/style-sections/border-section/border-width-field.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
-import { type BorderWidthPropValue } from '@elementor/editor-props';
+import { borderWidthPropTypeUtil } from '@elementor/editor-props';
 import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
-const edges: EqualUnequalItems< BorderWidthPropValue[ '$$type' ], BorderWidthPropValue > = [
+const edges: EqualUnequalItems = [
 	{
 		label: __( 'Top', 'elementor' ),
 		icon: <SideTopIcon fontSize={ 'tiny' } />,
@@ -33,10 +33,10 @@ export const BorderWidthField = () => {
 	return (
 		<StylesField bind={ 'border-width' }>
 			<EqualUnequalSizesControl
+				items={ edges }
 				label={ __( 'Border Width', 'elementor' ) }
 				icon={ <SideAllIcon fontSize={ 'tiny' } /> }
-				items={ edges }
-				multiSizeType={ 'border-width' }
+				multiSizePropTypeUtil={ borderWidthPropTypeUtil }
 			/>
 		</StylesField>
 	);

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

@@ -0,0 +1,72 @@
+import * as React 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, withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { RotatedIcon } from './utils/rotated-icon';
+
+type AlignItems = 'start' | 'center' | 'end' | 'stretch';
+
+const StartIcon = withDirection( LayoutAlignLeftIcon );
+const EndIcon = withDirection( LayoutAlignRightIcon );
+
+const iconProps = {
+	isClockwise: false,
+	offset: 90,
+};
+
+const options: ToggleButtonGroupItem< AlignItems >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'stretch',
+		label: __( 'Stretch', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+];
+
+export const AlignItemsField = () => {
+	const { 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>
+	);
+};

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

@@ -0,0 +1,72 @@
+import * as React 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, withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { RotatedIcon } from './utils/rotated-icon';
+
+type AlignItems = 'start' | 'center' | 'end' | 'stretch';
+
+const StartIcon = withDirection( LayoutAlignLeftIcon );
+const EndIcon = withDirection( LayoutAlignRightIcon );
+
+const iconProps = {
+	isClockwise: false,
+	offset: 90,
+};
+
+const options: ToggleButtonGroupItem< AlignItems >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'stretch',
+		label: __( 'Stretch', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+];
+
+export const AlignSelfChild = () => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind={ 'align-self' }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Align self', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+							<ToggleControl options={ options } />
+						</Grid>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};

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: __( 'Reversed row', 'elementor' ),
+		renderContent: ( { size } ) => {
+			const EndIcon = withDirection( ArrowLeftIcon );
+			return <EndIcon fontSize={ size } />;
+		},
+		showTooltip: true,
+	},
+	{
+		value: 'column-reverse',
+		label: __( 'Reversed column', '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>
+	);
+};