@elementor/editor-editing-panel 1.6.0 → 1.8.0

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/settings-tab.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ControlLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
+import { SessionStorageProvider } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
 import { Control as BaseControl } from '../controls-registry/control';
@@ -11,33 +12,35 @@ import { Section } from './section';
 import { SectionsList } from './sections-list';
 
 export const SettingsTab = () => {
-	const { elementType } = useElement();
+	const { elementType, element } = useElement();
 
 	return (
-		<SectionsList>
-			{ elementType.controls.map( ( { type, value }, index ) => {
-				if ( type === 'control' ) {
-					return <Control key={ value.bind } control={ value } />;
-				}
-
-				if ( type === 'section' ) {
-					return (
-						<Section title={ value.label } key={ type + '.' + index } defaultExpanded={ true }>
-							{ value.items?.map( ( item ) => {
-								if ( item.type === 'control' ) {
-									return <Control key={ item.value.bind } control={ item.value } />;
-								}
-
-								// TODO: Handle 2nd level sections
-								return null;
-							} ) }
-						</Section>
-					);
-				}
-
-				return null;
-			} ) }
-		</SectionsList>
+		<SessionStorageProvider prefix={ element.id }>
+			<SectionsList>
+				{ elementType.controls.map( ( { type, value }, index ) => {
+					if ( type === 'control' ) {
+						return <Control key={ value.bind } control={ value } />;
+					}
+
+					if ( type === 'section' ) {
+						return (
+							<Section title={ value.label } key={ type + '.' + index } defaultExpanded={ true }>
+								{ value.items?.map( ( item ) => {
+									if ( item.type === 'control' ) {
+										return <Control key={ item.value.bind } control={ item.value } />;
+									}
+
+									// TODO: Handle 2nd level sections
+									return null;
+								} ) }
+							</Section>
+						);
+					}
+
+					return null;
+				} ) }
+			</SectionsList>
+		</SessionStorageProvider>
 	);
 };
 

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

@@ -1,37 +1,34 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 
-import { useStylesField } from '../../../hooks/use-styles-field';
+import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
 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 initialBorder = {
+	'border-width': { $$type: 'size', value: { size: 1, unit: 'px' } },
+	'border-color': { $$type: 'color', value: '#000000' },
+	'border-style': { $$type: 'string', value: 'solid' },
 };
-const initialBorderColor = { $$type: 'color', value: '#000000' };
-const initialBorderStyle = 'solid';
 
 export const BorderField = () => {
-	const [ borderWidth, setBorderWidth ] = useStylesField( 'border-width' );
-	const [ borderColor, setBorderColor ] = useStylesField( 'border-color' );
-	const [ borderStyle, setBorderStyle ] = useStylesField( 'border-style' );
+	const [ border, setBorder ] = useStylesFields( Object.keys( initialBorder ) );
 
 	const addBorder = () => {
-		setBorderWidth( initialBorderWidth );
-		setBorderColor( initialBorderColor );
-		setBorderStyle( initialBorderStyle );
+		setBorder( initialBorder );
 	};
+
 	const removeBorder = () => {
-		setBorderWidth( null );
-		setBorderColor( null );
-		setBorderStyle( null );
+		setBorder( {
+			'border-width': null,
+			'border-color': null,
+			'border-style': null,
+		} );
 	};
 
-	const hasBorder = Boolean( borderWidth || borderColor || borderStyle );
+	const hasBorder = Object.values( border ?? {} ).some( Boolean );
 
 	return (
 		<AddOrRemoveContent

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

@@ -4,6 +4,7 @@ import { useElementSetting, useElementStyles } from '@elementor/editor-elements'
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleState } from '@elementor/editor-styles';
+import { SessionStorageProvider } from '@elementor/session';
 import { Divider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -41,34 +42,36 @@ export const StyleTab = () => {
 				} }
 				setMetaState={ setActiveStyleState }
 			>
-				<CssClassSelector />
-				<Divider />
-				<SectionsList>
-					<Section title={ __( 'Layout', 'elementor' ) }>
-						<LayoutSection />
-					</Section>
-					<Section title={ __( 'Spacing', 'elementor' ) }>
-						<SpacingSection />
-					</Section>
-					<Section title={ __( 'Size', 'elementor' ) }>
-						<SizeSection />
-					</Section>
-					<Section title={ __( 'Position', 'elementor' ) }>
-						<PositionSection />
-					</Section>
-					<Section title={ __( 'Typography', 'elementor' ) }>
-						<TypographySection />
-					</Section>
-					<Section title={ __( 'Background', 'elementor' ) }>
-						<BackgroundSection />
-					</Section>
-					<Section title={ __( 'Border', 'elementor' ) }>
-						<BorderSection />
-					</Section>
-					<Section title={ __( 'Effects', 'elementor' ) }>
-						<EffectsSection />
-					</Section>
-				</SectionsList>
+				<SessionStorageProvider prefix={ activeStyleDefId ?? '' }>
+					<CssClassSelector />
+					<Divider />
+					<SectionsList>
+						<Section title={ __( 'Layout', 'elementor' ) }>
+							<LayoutSection />
+						</Section>
+						<Section title={ __( 'Spacing', 'elementor' ) }>
+							<SpacingSection />
+						</Section>
+						<Section title={ __( 'Size', 'elementor' ) }>
+							<SizeSection />
+						</Section>
+						<Section title={ __( 'Position', 'elementor' ) }>
+							<PositionSection />
+						</Section>
+						<Section title={ __( 'Typography', 'elementor' ) }>
+							<TypographySection />
+						</Section>
+						<Section title={ __( 'Background', 'elementor' ) }>
+							<BackgroundSection />
+						</Section>
+						<Section title={ __( 'Border', 'elementor' ) }>
+							<BorderSection />
+						</Section>
+						<Section title={ __( 'Effects', 'elementor' ) }>
+							<EffectsSection />
+						</Section>
+					</SectionsList>
+				</SessionStorageProvider>
 			</StyleProvider>
 		</ClassesPropProvider>
 	);
@@ -95,7 +98,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 ) {

package/src/controls-registry/create-top-level-object-type.ts

@@ -0,0 +1,14 @@
+import { type ObjectPropType, type PropsSchema } from '@elementor/editor-props';
+
+export const createTopLevelOjectType = ( { schema }: { schema: PropsSchema } ) => {
+	const schemaPropType: ObjectPropType = {
+		key: '',
+		kind: 'object',
+		meta: {},
+		settings: {},
+		default: null,
+		shape: schema,
+	};
+
+	return schemaPropType;
+};

package/src/controls-registry/settings-field.tsx

@@ -1,36 +1,34 @@
 import * as React from 'react';
-import { BoundPropProvider } from '@elementor/editor-controls';
+import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
 import { updateSettings, useElementSetting } from '@elementor/editor-elements';
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useElement } from '../contexts/element-context';
+import { createTopLevelOjectType } from './create-top-level-object-type';
 
 type Props = {
 	bind: PropKey;
 	children: React.ReactNode;
 };
 
-const SettingsField = ( { bind, children }: Props ) => {
+export const SettingsField = ( { bind, children }: Props ) => {
 	const { element, elementType } = useElement();
 
-	const defaultValue = elementType.propsSchema[ bind ]?.default;
-	const settingsValue = useElementSetting( element.id, bind );
-	const value = settingsValue ?? defaultValue ?? null;
+	const settingsValue = useElementSetting< PropValue >( element.id, bind );
+	const value = { [ bind ]: settingsValue };
 
-	const setValue = ( newValue: PropValue ) => {
+	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
+
+	const setValue = ( newValue: Record< string, PropValue > ) => {
 		updateSettings( {
 			id: element.id,
-			props: {
-				[ bind ]: newValue,
-			},
+			props: { ...newValue },
 		} );
 	};
 
 	return (
-		<BoundPropProvider setValue={ setValue } value={ value } bind={ bind }>
-			{ children }
-		</BoundPropProvider>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
+		</PropProvider>
 	);
 };
-
-export { SettingsField };

package/src/controls-registry/styles-field.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { BoundPropProvider } from '@elementor/editor-controls';
-import { type PropKey } from '@elementor/editor-props';
+import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { getStylesSchema } from '@elementor/editor-styles';
 
 import { useStylesField } from '../hooks/use-styles-field';
+import { createTopLevelOjectType } from './create-top-level-object-type';
 
 export type StylesFieldProps = {
 	bind: PropKey;
@@ -12,9 +14,19 @@ export type StylesFieldProps = {
 export const StylesField = ( { bind, children }: StylesFieldProps ) => {
 	const [ value, setValue ] = useStylesField( bind );
 
+	const stylesSchema = getStylesSchema();
+
+	const propType = createTopLevelOjectType( { schema: stylesSchema } );
+
+	const values = { [ bind ]: value };
+
+	const setValues = ( newValue: Record< string, PropValue > ) => {
+		setValue( newValue[ bind ] );
+	};
+
 	return (
-		<BoundPropProvider setValue={ setValue } value={ value } bind={ bind }>
-			{ children }
-		</BoundPropProvider>
+		<PropProvider propType={ propType } value={ values } setValue={ setValues }>
+			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
+		</PropProvider>
 	);
 };

package/src/css-classes.ts

@@ -1,6 +1,8 @@
 import { type StyleState } from '@elementor/editor-styles';
 
-import { registerStateMenuItem } from './components/css-class-menu';
+import { registerGlobalClassMenuItem, registerStateMenuItem } from './components/css-class-menu';
+import { useCssClassItem } from './contexts/css-class-item-context';
+import { useUnapplyClass } from './hooks/use-unapply-class';
 
 const STATES: NonNullable< StyleState >[] = [ 'hover', 'focus', 'active' ];
 
@@ -28,10 +30,16 @@ function registerStateItems() {
 }
 
 function registerGlobalClassItems() {
-	/**
-	 * TODO - register the relevant global classes here
-	 * change the import statement from 'css-class-menu' to -
-	 * import { registerGlobalClassMenuItem, registerStateMenuItem } from './components/css-class-menu';
-	 * and use registerGlobalClassMenuItem
-	 */
+	registerGlobalClassMenuItem( {
+		id: 'unapply-class',
+		useProps: () => {
+			const { styleId: currentClass } = useCssClassItem();
+			const unapplyClass = useUnapplyClass( currentClass );
+
+			return {
+				text: 'Remove',
+				onClick: unapplyClass,
+			};
+		},
+	} );
 }

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -42,7 +42,7 @@ export const DynamicSelectionControl = () => {
 	const selectionPopoverId = useId();
 	const selectionPopoverState = usePopupState( { variant: 'popover', popupId: selectionPopoverId } );
 
-	const dynamicTag = useDynamicTag( bind, tagName );
+	const dynamicTag = useDynamicTag( tagName );
 
 	const removeDynamicTag = () => {
 		setAnyValue( propValueFromHistory ?? null );

package/src/dynamics/components/dynamic-selection.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Fragment, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { type PropKey } from '@elementor/editor-props';
 import { PhotoIcon, SearchIcon } from '@elementor/icons';
 import {
 	Box,
@@ -46,7 +45,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const isCurrentValueDynamic = !! dynamicValue;
 
-	const options = useFilteredOptions( bind, searchValue );
+	const options = useFilteredOptions( searchValue );
 
 	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setSearchValue( event.target.value );
@@ -135,8 +134,8 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	);
 };
 
-const useFilteredOptions = ( bind: PropKey, searchValue: string ): OptionEntry[] => {
-	const dynamicTags = usePropDynamicTags( bind );
+const useFilteredOptions = ( searchValue: string ): OptionEntry[] => {
+	const dynamicTags = usePropDynamicTags();
 
 	const options = dynamicTags.reduce< Map< string, Option[] > >( ( categories, { name, label, group } ) => {
 		const isVisible = label.toLowerCase().includes( searchValue.trim().toLowerCase() );

package/src/dynamics/dynamic-control.tsx

@@ -1,40 +1,45 @@
 import * as React from 'react';
-import { BoundPropProvider, useBoundProp } from '@elementor/editor-controls';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { PropKeyProvider, PropProvider, type SetValue, useBoundProp } from '@elementor/editor-controls';
+import { type PropKey } from '@elementor/editor-props';
 
+import { createTopLevelOjectType } from '../controls-registry/create-top-level-object-type';
 import { useDynamicTag } from './hooks/use-dynamic-tag';
-import { dynamicPropTypeUtil } from './utils';
+import { dynamicPropTypeUtil, type DynamicPropValue } from './utils';
 
 export type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;
 } >;
 
 export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
-	const { value, setValue, bind: propName } = useBoundProp( dynamicPropTypeUtil );
+	const { value, setValue } = useBoundProp( dynamicPropTypeUtil );
 	const { name = '', settings } = value ?? {};
 
-	const dynamicTag = useDynamicTag( propName, name );
+	const dynamicTag = useDynamicTag( name );
 
 	if ( ! dynamicTag ) {
 		throw new Error( `Dynamic tag ${ name } not found` );
 	}
 
-	const defaultValue = dynamicTag.props_schema[ bind ]?.default;
+	const dynamicPropType = dynamicTag.props_schema[ bind ];
+
+	const defaultValue = dynamicPropType?.default;
 	const dynamicValue = settings?.[ bind ] ?? defaultValue;
 
-	const setDynamicValue = ( newValue: PropValue ) => {
+	const setDynamicValue: SetValue< Record< string, DynamicPropValue > > = ( newValues ) => {
 		setValue( {
 			name,
 			settings: {
 				...settings,
-				[ bind ]: newValue,
+				...newValues,
 			},
 		} );
 	};
 
+	const propType = createTopLevelOjectType( { schema: dynamicTag.props_schema } );
+
 	return (
-		<BoundPropProvider setValue={ setDynamicValue } value={ dynamicValue } bind={ bind }>
-			{ children }
-		</BoundPropProvider>
+		<PropProvider propType={ propType } setValue={ setDynamicValue } value={ { [ bind ]: dynamicValue } }>
+			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
+		</PropProvider>
 	);
 };

package/src/dynamics/hooks/use-dynamic-tag.ts

@@ -1,11 +1,10 @@
 import { useMemo } from 'react';
-import { type PropKey } from '@elementor/editor-props';
 
 import { type DynamicTag } from '../types';
 import { usePropDynamicTags } from './use-prop-dynamic-tags';
 
-export const useDynamicTag = ( propName: PropKey, tagName: string ): DynamicTag | null => {
-	const dynamicTags = usePropDynamicTags( propName );
+export const useDynamicTag = ( tagName: string ): DynamicTag | null => {
+	const dynamicTags = usePropDynamicTags();
 
 	return useMemo( () => dynamicTags.find( ( tag ) => tag.name === tagName ) ?? null, [ dynamicTags, tagName ] );
 };

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -3,16 +3,13 @@ import { useBoundProp } from '@elementor/editor-controls';
 import { DatabaseIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
-import { useElement } from '../../contexts/element-context';
 import { type PopoverActionProps } from '../../popover-action';
 import { DynamicSelection } from '../components/dynamic-selection';
 import { supportsDynamic } from '../utils';
 
 export const usePropDynamicAction = (): PopoverActionProps => {
-	const { bind } = useBoundProp();
-	const { elementType } = useElement();
+	const { propType } = useBoundProp();
 
-	const propType = elementType.propsSchema[ bind ];
 	const visible = !! propType && supportsDynamic( propType );
 
 	return {