@elementor/editor-editing-panel 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.6.0",
+  "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.1",
-    "@elementor/editor-elements": "0.3.5",
+    "@elementor/editor-controls": "0.5.0",
+    "@elementor/editor-elements": "0.4.0",
     "@elementor/menus": "0.1.2",
-    "@elementor/editor-props": "0.5.1",
+    "@elementor/editor-props": "0.6.0",
     "@elementor/editor-panels": "0.10.2",
     "@elementor/editor-responsive": "0.12.4",
-    "@elementor/editor-styles": "0.4.0",
-    "@elementor/editor-styles-repository": "0.3.2",
+    "@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-selector.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import { useId, useRef } from 'react';
-import { updateSettings, useElementSetting } from '@elementor/editor-elements';
+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 {
+	ELEMENTS_STYLES_PROVIDER_KEY,
+	useAllStylesByProvider,
+	useCreateActionsByProvider,
+} from '@elementor/editor-styles-repository';
 import { DotsVerticalIcon } from '@elementor/icons';
 import {
 	type AutocompleteRenderGetTagProps,
@@ -23,18 +27,23 @@ import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
 import { ConditionalTooltipWrapper } from './conditional-tooltip-wrapper';
 import { CssClassMenu } from './css-class-menu';
-import { MultiCombobox, type Option } from './multi-combobox';
+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.
@@ -43,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 );
 
@@ -65,7 +76,10 @@ 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 } );
@@ -113,7 +127,7 @@ function CssClassItem( { id, label, isActive, isGlobal, color, chipProps, onClic
 			<UnstableChipGroup ref={ chipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
 				<Chip
 					key={ chipProps.key }
-					size="small"
+					size="tiny"
 					label={ <ConditionalTooltipWrapper maxWidth="10ch" title={ label } /> }
 					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
 					color={ color }
@@ -122,7 +136,7 @@ function CssClassItem( { id, label, isActive, isGlobal, color, chipProps, onClic
 				/>
 				<Chip
 					key={ `${ chipProps.key }-menu` }
-					size="small"
+					size="tiny"
 					label={
 						<Stack direction="row" gap={ 0.5 } alignItems="center">
 							{ isActive && meta.state && <Typography variant="inherit">{ meta.state }</Typography> }
@@ -143,27 +157,64 @@ function CssClassItem( { id, label, isActive, isGlobal, color, chipProps, onClic
 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(
@@ -192,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

@@ -95,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 ) {

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/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 {