@elementor/editor-editing-panel 1.5.1 → 1.7.0

package/src/contexts/css-class-item-context.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren } from 'react';
+
+type ClassItemContextType = {
+	styleId: string;
+	isGlobal: boolean;
+	isActive: boolean;
+};
+const ClassItemContext = createContext< ClassItemContextType >( {
+	styleId: '',
+	isGlobal: false,
+	isActive: false,
+} );
+
+type ClassItemProviderProps = PropsWithChildren< ClassItemContextType >;
+
+export function CssClassItemProvider( { styleId, isGlobal, isActive, children }: ClassItemProviderProps ) {
+	return (
+		<ClassItemContext.Provider value={ { styleId, isGlobal, isActive } }>{ children }</ClassItemContext.Provider>
+	);
+}
+
+export function useCssClassItem() {
+	const context = React.useContext( ClassItemContext );
+
+	if ( ! context ) {
+		throw new Error( 'useCssClassItem must be used within a CssClassItemProvider' );
+	}
+
+	return context;
+}

package/src/contexts/style-context.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { createContext, type Dispatch, type PropsWithChildren, useContext } from 'react';
-import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleState, type StyleVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
 	id: StyleDefinition[ 'id' ] | null;
 	setId: Dispatch< StyleDefinition[ 'id' ] | null >;
 	meta: StyleVariant[ 'meta' ];
+	setMetaState: Dispatch< StyleState >;
 };
 
 const Context = createContext< ContextValue | null >( null );
 
 type Props = PropsWithChildren< ContextValue >;
 
-export function StyleProvider( { children, id, setId, meta }: Props ) {
-	return <Context.Provider value={ { id, setId, meta } }>{ children }</Context.Provider>;
+export function StyleProvider( { children, id, setId, meta, setMetaState }: Props ) {
+	return <Context.Provider value={ { id, setId, meta, setMetaState } }>{ children }</Context.Provider>;
 }
 
 export function useStyle() {

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

@@ -0,0 +1,37 @@
+import { type StyleState } from '@elementor/editor-styles';
+
+import { registerStateMenuItem } from './components/css-class-menu';
+
+const STATES: NonNullable< StyleState >[] = [ 'hover', 'focus', 'active' ];
+
+export function initCssClasses() {
+	registerStateItems();
+	registerGlobalClassItems();
+}
+
+function registerStateItems() {
+	registerStateMenuItem( {
+		id: 'normal',
+		props: {
+			state: null,
+		},
+	} );
+
+	STATES.forEach( ( state ) => {
+		registerStateMenuItem( {
+			id: state,
+			props: {
+				state,
+			},
+		} );
+	} );
+}
+
+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
+	 */
+}

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 {

package/src/dynamics/hooks/use-prop-dynamic-tags.ts

@@ -1,16 +1,13 @@
 import { useMemo } from 'react';
-import { type PropKey } from '@elementor/editor-props';
+import { useBoundProp } from '@elementor/editor-controls';
 
-import { useElement } from '../../contexts/element-context';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { getDynamicPropType } from '../utils';
 
-export const usePropDynamicTags = ( propName: PropKey ) => {
+export const usePropDynamicTags = () => {
 	let categories: string[] = [];
 
-	const { elementType } = useElement();
-
-	const propType = elementType.propsSchema?.[ propName ];
+	const { propType } = useBoundProp();
 
 	if ( propType ) {
 		const propDynamicType = getDynamicPropType( propType );

package/src/dynamics/utils.ts

@@ -32,7 +32,7 @@ export const dynamicPropTypeUtil = createPropUtils(
 	DYNAMIC_PROP_TYPE_KEY,
 	z.strictObject( {
 		name: z.string(),
-		settings: z.record( z.any() ).optional(),
+		settings: z.any().optional(),
 	} )
 );
 

package/src/hooks/use-styles-fields.ts

@@ -28,5 +28,6 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 			label: __( 'local', 'elementor' ),
 		} );
 	};
+
 	return [ value, setValue ] as const;
 }

package/src/index.ts

@@ -1,6 +1,7 @@
 export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { replaceControl } from './control-replacement';
+export { registerGlobalClassMenuItem, registerStateMenuItem } from './components/css-class-menu';
 
 import init from './init';
 

package/src/init.ts

@@ -3,6 +3,7 @@ import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';
 
 import { EditingPanelHooks } from './components/editing-panel-hooks';
+import { initCssClasses } from './css-classes';
 import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
 import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
@@ -18,6 +19,7 @@ export default function init() {
 
 	// TODO: Move it from here once we have dynamic package.
 	initDynamics();
+	initCssClasses();
 }
 
 const blockV1Panel = () => {

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

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './multi-combobox';
-export * from './use-combobox-actions';

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

@@ -1,122 +0,0 @@
-import * as React from 'react';
-import {
-	Autocomplete,
-	type AutocompleteProps,
-	type AutocompleteRenderGroupParams,
-	Box,
-	Chip,
-	styled,
-	TextField,
-} from '@elementor/ui';
-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' | 'onSelect' > & {
-	actions?: Actions;
-	selected: Option[];
-	options: Option[];
-	optionsLabel?: string;
-	onSelect?: ( value: Option[] ) => void;
-	onCreate?: ( value: string ) => void;
-};
-
-export const MultiCombobox = ( {
-	actions = {},
-	selected,
-	options,
-	optionsLabel,
-	onSelect,
-	onCreate,
-	...props
-}: Props ) => {
-	const { action: actionProps, option: optionProps } = useComboboxActions(
-		selected,
-		actions,
-		// TODO: make the group mechanism more generic, allow passing list of groups.
-		optionsLabel,
-		onSelect
-	);
-
-	return (
-		<Autocomplete
-			{ ...props }
-			freeSolo
-			multiple
-			clearOnBlur
-			selectOnFocus
-			disableClearable
-			handleHomeEndKeys
-			value={ selected }
-			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={ ( _, selectedOrTypedValue, reason ) => {
-				if ( reason === 'createOption' ) {
-					const typedValue = selectedOrTypedValue.find( ( option ) => typeof option === 'string' );
-
-					return typedValue && onCreate?.( typedValue );
-				}
-
-				const action = selectedOrTypedValue.find( ( value ) => actionProps.is( value ) );
-
-				if ( reason === 'selectOption' && action ) {
-					return actionProps.onChange( action );
-				}
-
-				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 ) ) {
-					return optionProps.getLabel( option );
-				}
-
-				if ( actionProps.is( option ) ) {
-					return actionProps.getLabel( option );
-				}
-
-				return '';
-			} }
-			filterOptions={ ( optionList: Option[], params: FilterOptionsState< ActionOption | Option > ) => {
-				const filteredOptions = optionProps.getFilteredOptions( optionList, params );
-
-				const actionOptions = actionProps.getFilteredActions( optionList, params );
-
-				return [ ...actionOptions, ...filteredOptions ];
-			} }
-			groupBy={ ( option ) =>
-				( optionProps.is( option ) ? optionProps.groupBy() : actionProps.groupBy( option ) ) ?? ''
-			}
-		/>
-	);
-};
-
-const renderGroup = ( params: AutocompleteRenderGroupParams ) => (
-	<Group key={ params.key }>
-		<GroupHeader>{ params.group }</GroupHeader>
-		<GroupItems>{ params.children }</GroupItems>
-	</Group>
-);
-
-const Group = styled( 'li' )`
-	&:not( :last-of-type ) {
-		border-bottom: 1px solid ${ ( { theme } ) => theme.palette.divider };
-	}
-`;
-
-const GroupHeader = styled( Box )( ( { theme } ) => ( {
-	position: 'sticky',
-	top: '-8px',
-	padding: theme.spacing( 1, 2 ),
-	color: theme.palette.text.tertiary,
-} ) );
-
-const GroupItems = styled( 'ul' )`
-	padding: 0;
-`;

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

@@ -1,29 +0,0 @@
-export type Option = {
-	label: string;
-	value: string;
-	fixed?: boolean;
-	// TODO: Should be remove from here or use some kind of `meta`
-	color?: 'primary' | 'global';
-	provider?: string;
-};
-
-export type Action = {
-	getLabel: ( inputValue: string ) => string;
-	apply: ( value: string ) => void;
-	condition: ( options: Option[], inputValue: string ) => boolean;
-};
-
-export type ActionsGroup = {
-	label: string;
-	actions: Action[];
-};
-
-export type ActionOption = Option & {
-	action: {
-		groupLabel: string;
-		apply: Action[ 'apply' ];
-		getLabel: Action[ 'getLabel' ];
-	};
-};
-
-export type Actions = Record< string, ActionsGroup >;

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

@@ -1,62 +0,0 @@
-import { createFilterOptions } from '@elementor/ui';
-import { type FilterOptionsState } from '@mui/base';
-
-import { type Action, type ActionOption, type Actions, type Option } from './types';
-
-export const useComboboxActions = (
-	applied: Option[],
-	actions: Actions,
-	optionsLabel?: string,
-	onSelect?: ( value: Option[] ) => void
-) => ( {
-	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 ),
-		getFilteredActions: ( optionList: Option[], params: FilterOptionsState< ActionOption > ) => {
-			const actionGroups = Object.values( actions );
-
-			return actionGroups.reduce< Option[] >( ( groups, group ) => {
-				const actionOptions = group.actions.reduce< Option[] >( ( groupActions, action ) => {
-					const shouldShowAction = action.condition( optionList, params.inputValue );
-
-					if ( shouldShowAction ) {
-						const actionOption = createActionOption( group.label, action, params.inputValue );
-						groupActions.unshift( actionOption );
-					}
-
-					return groupActions;
-				}, [] );
-
-				return [ ...groups, ...actionOptions ];
-			}, [] );
-		},
-	},
-	option: {
-		is: ( opt: ActionOption | Option | string ): opt is Option => typeof opt !== 'string' && ! ( 'action' in opt ),
-		getLabel: ( option: Option ) => option.label,
-		groupBy: () => optionsLabel ?? '',
-		onChange: ( optionValues: Option[] ) => onSelect?.( optionValues ),
-		getFilteredOptions: ( optionList: Option[], params: FilterOptionsState< Option > ) => {
-			const appliedValues = applied.map( ( option ) => option.value );
-
-			const optionsWithoutApplied = optionList.filter( ( option ) => ! appliedValues.includes( option.value ) );
-
-			return filter( optionsWithoutApplied, params );
-		},
-	},
-} );
-
-// Helper functions.
-const filter = createFilterOptions< Option >();
-
-const createActionOption = ( groupLabel: string, action: Action, inputValue: string ): ActionOption => ( {
-	value: '',
-	label: inputValue,
-	action: {
-		groupLabel,
-		apply: action.apply,
-		getLabel: action.getLabel,
-	},
-} );