@elementor/editor-editing-panel 1.5.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.17.2",
-    "@elementor/editor-controls": "0.4.0",
-    "@elementor/editor-elements": "0.3.4",
+    "@elementor/editor-controls": "0.5.0",
+    "@elementor/editor-elements": "0.4.0",
     "@elementor/menus": "0.1.2",
-    "@elementor/editor-props": "0.5.0",
+    "@elementor/editor-props": "0.6.0",
     "@elementor/editor-panels": "0.10.2",
     "@elementor/editor-responsive": "0.12.4",
-    "@elementor/editor-styles": "0.3.2",
-    "@elementor/editor-styles-repository": "0.3.1",
+    "@elementor/editor-styles": "0.5.0",
+    "@elementor/editor-styles-repository": "0.3.3",
     "@elementor/editor-v1-adapters": "0.8.5",
     "@elementor/icons": "^1.20.0",
     "@elementor/schema": "0.1.2",

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

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { type RefObject } from 'react';
+import { type StyleState } from '@elementor/editor-styles';
+import { CheckIcon } from '@elementor/icons';
+import { createMenu } from '@elementor/menus';
+import {
+	bindMenu,
+	Box,
+	ListItemIcon,
+	ListItemText,
+	ListSubheader,
+	Menu,
+	MenuItem,
+	type PopupState,
+	styled,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useCssClassItem } from '../contexts/css-class-item-context';
+import { useStyle } from '../contexts/style-context';
+
+export const { useMenuItems: useStateMenuItems, registerStateMenuItem } = createMenu( {
+	components: {
+		StateMenuItem,
+	},
+} );
+
+export const { useMenuItems: useGlobalClassMenuItems, registerGlobalClassMenuItem } = createMenu( {
+	components: {
+		GlobalClassMenuItem,
+	},
+} );
+
+export function CssClassMenu( {
+	popupState,
+	containerRef,
+}: {
+	popupState: PopupState;
+	containerRef: RefObject< Element >;
+} ) {
+	const { isGlobal } = useCssClassItem();
+	const { default: globalClassMenuItems } = useGlobalClassMenuItems();
+	const { default: stateMenuItems } = useStateMenuItems();
+
+	return (
+		<Menu
+			MenuListProps={ { dense: true } }
+			{ ...bindMenu( popupState ) }
+			anchorOrigin={ {
+				vertical: 'top',
+				horizontal: 'right',
+			} }
+			anchorEl={ containerRef.current }
+		>
+			{ isGlobal && (
+				<GlobalClassMenuSection>
+					{ globalClassMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
+						<MenuItemComponent key={ id } />
+					) ) }
+				</GlobalClassMenuSection>
+			) }
+			<ListSubheader>{ __( 'Add a pseudo selector', 'elementor' ) }</ListSubheader>
+			{ stateMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
+				<MenuItemComponent key={ id } />
+			) ) }
+		</Menu>
+	);
+}
+
+type StateMenuItemProps = {
+	state: StyleState;
+	disabled?: boolean;
+};
+
+export function StateMenuItem( { state, disabled }: StateMenuItemProps ) {
+	const { isActive, styleId } = useCssClassItem();
+	const { setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
+	const { state: activeState } = meta;
+
+	const isSelected = state === activeState && isActive;
+
+	return (
+		<StyledMenuItem
+			selected={ state === activeState && isActive }
+			disabled={ disabled }
+			onClick={ () => {
+				if ( ! isActive ) {
+					setActiveId( styleId );
+				}
+
+				setActiveMetaState( state );
+			} }
+		>
+			{ isSelected && (
+				<ListItemIcon>
+					<CheckIcon />
+				</ListItemIcon>
+			) }
+			<ListItemText primary={ state ? `:${ state }` : 'Normal' } />
+		</StyledMenuItem>
+	);
+}
+
+type GlobalClassMenuItemProps = {
+	text: string;
+	onClick: () => void;
+};
+
+export function GlobalClassMenuItem( { text, onClick }: GlobalClassMenuItemProps ) {
+	return (
+		<StyledMenuItem onClick={ onClick }>
+			<ListItemText primary={ text } />
+		</StyledMenuItem>
+	);
+}
+
+const GlobalClassMenuSection = styled( Box )( ( { theme } ) => ( {
+	borderBottom: `1px solid ${ theme?.palette.divider }`,
+} ) );
+
+const StyledMenuItem = styled( MenuItem )( {
+	'&:hover': {
+		color: 'text.primary', // Overriding global CSS from the editor.
+	},
+} );

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

@@ -1,27 +1,49 @@
 import * as React from 'react';
-import { updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { useId, useRef } from 'react';
+import { getElementSetting, updateSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
-import { ELEMENTS_STYLES_PROVIDER_KEY, useAllStylesByProvider } from '@elementor/editor-styles-repository';
-import { Chip, Stack, Typography } from '@elementor/ui';
+import {
+	ELEMENTS_STYLES_PROVIDER_KEY,
+	useAllStylesByProvider,
+	useCreateActionsByProvider,
+} from '@elementor/editor-styles-repository';
+import { DotsVerticalIcon } from '@elementor/icons';
+import {
+	type AutocompleteRenderGetTagProps,
+	bindTrigger,
+	Chip,
+	type ChipOwnProps,
+	Stack,
+	Typography,
+	UnstableChipGroup,
+	usePopupState,
+} from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
+import { CssClassItemProvider } from '../contexts/css-class-item-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
 import { ConditionalTooltipWrapper } from './conditional-tooltip-wrapper';
-import { MultiCombobox, type Option } from './multi-combobox';
+import { CssClassMenu } from './css-class-menu';
+import { type Action, MultiCombobox, type Option } from './multi-combobox';
 
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 8;
 
+type StyleDefOption = Option & {
+	color: 'primary' | 'global';
+	provider: string;
+};
+
 const EMPTY_OPTION = {
 	label: __( 'local', 'elementor' ),
 	value: '',
 	fixed: true,
 	color: 'primary',
 	provider: ELEMENTS_STYLES_PROVIDER_KEY,
-} satisfies Option;
+} satisfies StyleDefOption;
 
 /**
  * Applied - Classes applied to an element.
@@ -30,10 +52,12 @@ const EMPTY_OPTION = {
 
 export function CssClassSelector() {
 	const options = useOptions();
-	const [ appliedIds, setAppliedIds ] = useAppliedClassesIds();
 
+	const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
 	const { id: activeId, setId: setActiveId } = useStyle();
 
+	const actions = useCreateActions( { pushAppliedId, setActiveId } );
+
 	const handleApply = useHandleApply( appliedIds, setAppliedIds );
 	const handleActivate = ( { value }: Option ) => setActiveId( value );
 
@@ -52,23 +76,25 @@ export function CssClassSelector() {
 				selected={ applied }
 				onSelect={ handleApply }
 				limitTags={ TAGS_LIMIT }
-				optionsLabel={ __( 'Global CSS Classes', 'elementor' ) }
+				actions={ actions }
+				getLimitTagsText={ ( more ) => (
+					<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
+				) }
 				renderTags={ ( values, getTagProps ) =>
 					values.map( ( value, index ) => {
 						const chipProps = getTagProps( { index } );
 						const isActive = value.value === active?.value;
 
 						return (
-							<Chip
-								{ ...chipProps }
+							<CssClassItem
 								key={ chipProps.key }
-								size="small"
-								label={ <ConditionalTooltipWrapper maxWidth="10ch" title={ value.label } /> }
-								variant={ isActive ? 'filled' : 'standard' }
+								label={ value.label }
+								id={ value.value }
+								isActive={ isActive }
+								isGlobal={ value.color === 'global' }
 								color={ isActive && value.color ? value.color : 'default' }
-								onClick={ () => handleActivate( value ) }
-								onDelete={ null }
-								aria-pressed={ isActive }
+								chipProps={ chipProps }
+								onClickActive={ () => handleActivate( value ) }
 							/>
 						);
 					} )
@@ -78,30 +104,117 @@ export function CssClassSelector() {
 	);
 }
 
+type CssClassItemProps = {
+	id: string;
+	label: string;
+	isActive: boolean;
+	isGlobal: boolean;
+	color: ChipOwnProps[ 'color' ];
+	chipProps: ReturnType< AutocompleteRenderGetTagProps >;
+	onClickActive: ( id: string ) => void;
+};
+
+function CssClassItem( { id, label, isActive, isGlobal, color, chipProps, onClickActive }: CssClassItemProps ) {
+	const { meta } = useStyle();
+	// TODO - resolve the useId issue with invalid characters upon CSS selectors (EDS-1089)
+	const popupId = useId().replace( /:/g, '_' );
+	const popupState = usePopupState( { variant: 'popover', popupId } );
+	const chipRef = useRef< Element >( null );
+	const { onDelete, ...chipGroupProps } = chipProps;
+
+	return (
+		<CssClassItemProvider styleId={ id } isActive={ isActive } isGlobal={ isGlobal }>
+			<UnstableChipGroup ref={ chipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
+				<Chip
+					key={ chipProps.key }
+					size="tiny"
+					label={ <ConditionalTooltipWrapper maxWidth="10ch" title={ label } /> }
+					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
+					color={ color }
+					onClick={ () => onClickActive( id ) }
+					aria-pressed={ isActive }
+				/>
+				<Chip
+					key={ `${ chipProps.key }-menu` }
+					size="tiny"
+					label={
+						<Stack direction="row" gap={ 0.5 } alignItems="center">
+							{ isActive && meta.state && <Typography variant="inherit">{ meta.state }</Typography> }
+							<DotsVerticalIcon fontSize="inherit" />
+						</Stack>
+					}
+					variant="filled"
+					color={ color }
+					{ ...bindTrigger( popupState ) }
+					aria-label={ __( 'Open CSS Class Menu', 'elementor' ) }
+				/>
+			</UnstableChipGroup>
+			<CssClassMenu popupState={ popupState } containerRef={ chipRef } />
+		</CssClassItemProvider>
+	);
+}
+
 function useOptions() {
 	const { element } = useElement();
 
-	return useAllStylesByProvider( { elementId: element.id } ).flatMap< Option >( ( [ providerKey, styleDefs ] ) => {
-		const isElements = providerKey === ELEMENTS_STYLES_PROVIDER_KEY;
-
-		// Add empty local option for elements, as fallback.
-		if ( isElements && styleDefs.length === 0 ) {
-			return [ EMPTY_OPTION ];
+	return useAllStylesByProvider( { elementId: element.id } ).flatMap< StyleDefOption >(
+		( [ provider, styleDefs ] ) => {
+			const isElements = provider.key === ELEMENTS_STYLES_PROVIDER_KEY;
+
+			// Add empty local option for elements, as fallback.
+			if ( isElements && styleDefs.length === 0 ) {
+				return [ EMPTY_OPTION ];
+			}
+
+			return styleDefs.map( ( styleDef ) => {
+				return {
+					label: styleDef.label,
+					value: styleDef.id,
+					fixed: isElements,
+					color: isElements ? 'primary' : 'global',
+					provider: provider.key,
+					group: provider.labels?.plural,
+				};
+			} );
 		}
+	);
+}
 
-		return styleDefs.map( ( styleDef ) => {
-			return {
-				label: styleDef.label,
-				value: styleDef.id,
-				fixed: isElements,
-				color: isElements ? 'primary' : 'global',
-				provider: providerKey,
-			};
-		} );
+function useCreateActions( {
+	pushAppliedId,
+	setActiveId,
+}: {
+	pushAppliedId: ( id: StyleDefinitionID ) => void;
+	setActiveId: ( id: StyleDefinitionID ) => void;
+} ) {
+	return useCreateActionsByProvider().map( ( [ provider, create ] ): Action< StyleDefOption > => {
+		return {
+			// translators: %s is the label of the new class.
+			label: ( value ) => __( 'Create new "%s"', 'elementor' ).replace( '%s', value ),
+			apply: async ( value ) => {
+				const created = await create( { label: value } );
+
+				if ( ! created ) {
+					return;
+				}
+
+				pushAppliedId( created.id );
+				setActiveId( created.id );
+			},
+			condition: ( options, inputValue ) => {
+				const isUniqueLabel = ! options.some(
+					( option ) => option.label.toLowerCase() === inputValue.toLowerCase()
+				);
+
+				return !! inputValue && isUniqueLabel;
+			},
+			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
+			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
+		};
 	} );
 }
 
-function useAppliedOptions( options: Option[], appliedIds: StyleDefinitionID[] ) {
+function useAppliedOptions( options: StyleDefOption[], appliedIds: StyleDefinitionID[] ) {
 	const applied = options.filter( ( option ) => appliedIds.includes( option.value ) );
 
 	const hasElementsProviderStyleApplied = applied.some(
@@ -130,13 +243,23 @@ function useAppliedClassesIds() {
 		} );
 	};
 
-	return [ value, setValue ] as const;
+	const pushValue = ( id: StyleDefinitionID ) => {
+		const ids = getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+
+		setValue( [ ...ids, id ] );
+	};
+
+	return {
+		value,
+		setValue,
+		pushValue,
+	};
 }
 
 function useHandleApply( appliedIds: StyleDefinitionID[], setAppliedIds: ( ids: StyleDefinitionID[] ) => void ) {
 	const { id: activeId, setId: setActiveId } = useStyle();
 
-	return ( selectedOptions: Option[] ) => {
+	return ( selectedOptions: StyleDefOption[] ) => {
 		const selectedValues = selectedOptions
 			.map( ( { value } ) => value )
 			.filter( ( value ) => value !== EMPTY_OPTION.value );

package/src/components/multi-combobox.tsx

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import { useId, useState } from 'react';
+import {
+	Autocomplete,
+	type AutocompleteProps,
+	type AutocompleteRenderGroupParams,
+	Box,
+	createFilterOptions,
+	styled,
+	TextField,
+} from '@elementor/ui';
+
+export type Option = {
+	label: string;
+	value: string;
+	fixed?: boolean;
+	group?: string;
+	key?: string;
+};
+
+export type Action< TOption extends Option > = {
+	label: ( value: string ) => string;
+	apply: ( value: string ) => void | Promise< void >;
+	condition: ( options: TOption[], value: string ) => boolean;
+	group?: string;
+};
+
+type ActionAsOption< TOption extends Option > = TOption & {
+	apply: Action< TOption >[ 'apply' ];
+	condition: Action< TOption >[ 'condition' ];
+};
+
+type Props< TOption extends Option > = Omit<
+	AutocompleteProps< TOption, true, true, true >,
+	'renderInput' | 'onSelect'
+> & {
+	actions?: Action< TOption >[];
+	selected: TOption[];
+	options: TOption[];
+	onSelect?: ( value: TOption[] ) => void;
+};
+
+export function MultiCombobox< TOption extends Option >( {
+	actions = [],
+	selected,
+	options,
+	onSelect,
+	...props
+}: Props< TOption > ) {
+	const filter = useFilterOptions< TOption >();
+	const { run, loading } = useActionRunner< TOption >();
+
+	return (
+		<Autocomplete
+			{ ...props }
+			freeSolo
+			multiple
+			clearOnBlur
+			selectOnFocus
+			disableClearable
+			handleHomeEndKeys
+			disabled={ loading }
+			value={ selected }
+			options={ options }
+			renderGroup={ ( params ) => <Group { ...params } /> }
+			renderInput={ ( params ) => <TextField { ...params } /> }
+			onChange={ ( _, selectedOrInputValue, reason ) => {
+				const inputValue = selectedOrInputValue.find( ( option ) => typeof option === 'string' );
+				const optionsAndActions = selectedOrInputValue.filter( ( option ) => typeof option !== 'string' );
+
+				// Handles user input when Enter is pressed
+				if ( reason === 'createOption' ) {
+					const [ firstAction ] = filterActions( actions, { options, inputValue: inputValue ?? '' } );
+
+					if ( firstAction ) {
+						return run( firstAction.apply, firstAction.value );
+					}
+				}
+
+				// Handles the user's action selection when triggered.
+				const action = optionsAndActions.find( ( value ) => isAction( value ) );
+
+				if ( reason === 'selectOption' && action ) {
+					return run( action.apply, action.value );
+				}
+
+				// Every other case, we update the selected values.
+				const fixedValues = options.filter( ( option ) => !! option.fixed );
+
+				onSelect?.( [ ...new Set( [ ...optionsAndActions, ...fixedValues ] ) ] );
+			} }
+			getOptionLabel={ ( option ) => ( typeof option === 'string' ? option : option.label ) }
+			getOptionKey={ ( option ) => {
+				if ( typeof option === 'string' ) {
+					return option;
+				}
+
+				return option.key ?? option.value;
+			} }
+			filterOptions={ ( optionList, params ) => {
+				const selectedValues = selected.map( ( option ) => option.value );
+
+				return [
+					...filterActions( actions, { options: optionList, inputValue: params.inputValue } ),
+					...filter(
+						optionList.filter( ( option ) => ! selectedValues.includes( option.value ) ),
+						params
+					),
+				];
+			} }
+			groupBy={ ( option ) => option.group ?? '' }
+		/>
+	);
+}
+
+const Group = ( params: Omit< AutocompleteRenderGroupParams, 'key' > ) => {
+	const id = `combobox-group-${ useId().replace( /:/g, '_' ) }`;
+
+	return (
+		<StyledGroup role="group" aria-labelledby={ id }>
+			<StyledGroupHeader id={ id }> { params.group }</StyledGroupHeader>
+			<StyledGroupItems role="listbox">{ params.children }</StyledGroupItems>
+		</StyledGroup>
+	);
+};
+
+const StyledGroup = styled( 'li' )`
+	&:not( :last-of-type ) {
+		border-bottom: 1px solid ${ ( { theme } ) => theme.palette.divider };
+	}
+`;
+
+const StyledGroupHeader = styled( Box )( ( { theme } ) => ( {
+	position: 'sticky',
+	top: '-8px',
+	padding: theme.spacing( 1, 2 ),
+	color: theme.palette.text.tertiary,
+} ) );
+
+const StyledGroupItems = styled( 'ul' )`
+	padding: 0;
+`;
+
+function useFilterOptions< TOption extends Option >() {
+	return useState( () => createFilterOptions< TOption >() )[ 0 ];
+}
+
+function useActionRunner< TOption extends Option >() {
+	const [ loading, setLoading ] = useState( false );
+
+	const run = async ( apply: Action< TOption >[ 'apply' ], value: string ) => {
+		setLoading( true );
+
+		try {
+			await apply( value );
+		} catch {
+			// TODO: Do something with the error.
+		}
+
+		setLoading( false );
+	};
+
+	return { run, loading };
+}
+
+function filterActions< TOption extends Option >(
+	actions: Action< TOption >[],
+	{ options, inputValue }: { options: TOption[]; inputValue: string }
+) {
+	return actions
+		.filter( ( action ) => action.condition( options, inputValue ) )
+		.map( ( action, index ) => ( {
+			label: action.label( inputValue ),
+			value: inputValue,
+			group: action.group,
+			apply: action.apply,
+			condition: action.condition,
+			key: index.toString(),
+		} ) ) as ActionAsOption< TOption >[];
+}
+
+function isAction< TOption extends Option >( option: TOption ): option is ActionAsOption< TOption > {
+	return 'apply' in option && 'condition' in option;
+}

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

@@ -7,11 +7,7 @@ import { BorderColorField } from './border-color-field';
 import { BorderStyleField } from './border-style-field';
 import { BorderWidthField } from './border-width-field';
 
-const initialSize = { $$type: 'size', value: { size: 1, unit: 'px' } };
-const initialBorderWidth = {
-	$$type: 'border-width',
-	value: { top: initialSize, right: initialSize, bottom: initialSize, left: initialSize },
-};
+const initialBorderWidth = { $$type: 'size', value: { size: 1, unit: 'px' } };
 const initialBorderColor = { $$type: 'color', value: '#000000' };
 const initialBorderStyle = 'solid';
 

package/src/components/style-sections/position-section/position-field.tsx

@@ -10,6 +10,7 @@ const positionOptions = [
 	{ label: __( 'Relative', 'elementor' ), value: 'relative' },
 	{ label: __( 'Absolute', 'elementor' ), value: 'absolute' },
 	{ label: __( 'Fixed', 'elementor' ), value: 'fixed' },
+	{ label: __( 'Sticky', 'elementor' ), value: 'sticky' },
 ];
 
 type Props = {

package/src/components/style-tab.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { type StyleDefinition } from '@elementor/editor-styles';
+import { type StyleDefinitionID, type StyleState } from '@elementor/editor-styles';
 import { Divider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -27,11 +27,20 @@ const CLASSES_PROP_KEY = 'classes';
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
+	const [ activeStyleState, setActiveStyleState ] = useState< StyleState | null >( null );
 	const breakpoint = useActiveBreakpoint();
 
 	return (
 		<ClassesPropProvider prop={ currentClassesProp }>
-			<StyleProvider meta={ { breakpoint, state: null } } id={ activeStyleDefId } setId={ setActiveStyleDefId }>
+			<StyleProvider
+				meta={ { breakpoint, state: activeStyleState } }
+				id={ activeStyleDefId }
+				setId={ ( id: StyleDefinitionID | null ) => {
+					setActiveStyleDefId( id );
+					setActiveStyleState( null );
+				} }
+				setMetaState={ setActiveStyleState }
+			>
 				<CssClassSelector />
 				<Divider />
 				<SectionsList>
@@ -66,7 +75,7 @@ export const StyleTab = () => {
 };
 
 function useActiveStyleDefId( currentClassesProp: PropKey ) {
-	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinition[ 'id' ] | null >( null );
+	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinitionID | null >( null );
 
 	const fallback = useFirstElementStyleDef( currentClassesProp );
 
@@ -86,7 +95,7 @@ function useCurrentClassesProp(): string {
 	const { elementType } = useElement();
 
 	const prop = Object.entries( elementType.propsSchema ).find(
-		( [ , propType ] ) => propType.kind === 'array' && propType.key === CLASSES_PROP_KEY
+		( [ , propType ] ) => propType.kind === 'plain' && propType.key === CLASSES_PROP_KEY
 	);
 
 	if ( ! prop ) {