@elementor/editor-controls 3.33.0-99 → 3.35.0-325

package/src/controls/transform-control/transform-label.tsx

@@ -3,53 +3,36 @@ import type { TransformFunctionsItemPropValue } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { CUSTOM_SIZE_LABEL } from '../size-control';
 import { defaultValues, TransformFunctionKeys } from './initial-values';
 
-const transformMoveValue = ( value: TransformFunctionsItemPropValue[ 'value' ] ) =>
-	Object.values( value )
+const formatLabel = ( value: TransformFunctionsItemPropValue[ 'value' ], functionType: keyof typeof defaultValues ) => {
+	return Object.values( value )
 		.map( ( axis ) => {
-			const size = axis?.value?.size ?? defaultValues.move.size;
-			const unit = axis?.value?.unit ?? defaultValues.move.unit;
+			if ( functionType === 'scale' ) {
+				return axis?.value || defaultValues[ functionType ];
+			}
 
-			return `${ size }${ unit }`;
-		} )
-		.join( ', ' );
-
-const transformScaleValue = ( value: TransformFunctionsItemPropValue[ 'value' ] ) =>
-	Object.values( value )
-		.map( ( axis ) => axis?.value || defaultValues.scale )
-		.join( ', ' );
-
-const transformRotateValue = ( value: TransformFunctionsItemPropValue[ 'value' ] ) =>
-	Object.values( value )
-		.map( ( axis ) => {
-			const size = axis?.value?.size ?? defaultValues.rotate.size;
-			const unit = axis?.value?.unit ?? defaultValues.rotate.unit;
+			const defaults = defaultValues[ functionType ];
+			const size = axis?.value?.size ?? defaults.size;
+			const unit = axis?.value?.unit ?? defaults.unit;
 
-			return `${ size }${ unit }`;
-		} )
-		.join( ', ' );
-const transformSkewValue = ( value: TransformFunctionsItemPropValue[ 'value' ] ) =>
-	Object.values( value )
-		.map( ( axis ) => {
-			const size = axis?.value?.size ?? defaultValues.skew.size;
-			const unit = axis?.value?.unit ?? defaultValues.skew.unit;
-
-			return `${ size }${ unit }`;
+			return unit === 'custom' ? size || CUSTOM_SIZE_LABEL : `${ size }${ unit }`;
 		} )
 		.join( ', ' );
+};
 
 export const TransformLabel = ( props: { value: TransformFunctionsItemPropValue } ) => {
 	const { $$type, value } = props.value;
 	switch ( $$type ) {
 		case TransformFunctionKeys.move:
-			return <Label label={ __( 'Move', 'elementor' ) } value={ transformMoveValue( value ) } />;
+			return <Label label={ __( 'Move', 'elementor' ) } value={ formatLabel( value, 'move' ) } />;
 		case TransformFunctionKeys.scale:
-			return <Label label={ __( 'Scale', 'elementor' ) } value={ transformScaleValue( value ) } />;
+			return <Label label={ __( 'Scale', 'elementor' ) } value={ formatLabel( value, 'scale' ) } />;
 		case TransformFunctionKeys.rotate:
-			return <Label label={ __( 'Rotate', 'elementor' ) } value={ transformRotateValue( value ) } />;
+			return <Label label={ __( 'Rotate', 'elementor' ) } value={ formatLabel( value, 'rotate' ) } />;
 		case TransformFunctionKeys.skew:
-			return <Label label={ __( 'Skew', 'elementor' ) } value={ transformSkewValue( value ) } />;
+			return <Label label={ __( 'Skew', 'elementor' ) } value={ formatLabel( value, 'skew' ) } />;
 		default:
 			return '';
 	}

package/src/controls/transform-control/transform-repeater-control.tsx

@@ -2,28 +2,22 @@ import * as React from 'react';
 import { useRef } from 'react';
 import { type PropType, transformFunctionsPropTypeUtil, transformPropTypeUtil } from '@elementor/editor-props';
 import { AdjustmentsIcon, InfoCircleFilledIcon } from '@elementor/icons';
-import { bindTrigger, Box, IconButton, type PopupState, Typography, usePopupState } from '@elementor/ui';
+import { bindTrigger, Box, IconButton, type PopupState, Tooltip, Typography, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
-import {
-	Header,
-	Item,
-	ItemsContainer,
-	TooltipAddItemAction,
-	UnstableRepeater,
-} from '../../components/unstable-repeater';
-import { DisableItemAction } from '../../components/unstable-repeater/actions/disable-item-action';
-import { RemoveItemAction } from '../../components/unstable-repeater/actions/remove-item-action';
-import { EditItemPopover } from '../../components/unstable-repeater/items/edit-item-popover';
-import { injectIntoRepeaterHeaderActions } from '../../components/unstable-repeater/locations';
+import { ControlRepeater, Item, ItemsContainer, TooltipAddItemAction } from '../../components/control-repeater';
+import { DisableItemAction } from '../../components/control-repeater/actions/disable-item-action';
+import { RemoveItemAction } from '../../components/control-repeater/actions/remove-item-action';
+import { EditItemPopover } from '../../components/control-repeater/items/edit-item-popover';
+import { RepeaterHeader } from '../../components/repeater/repeater-header';
 import { ControlAdornments } from '../../control-adornments/control-adornments';
 import { createControl } from '../../create-control';
 import { initialRotateValue, initialScaleValue, initialSkewValue, initialTransformValue } from './initial-values';
-import { TransformBaseControl } from './transform-base-control';
 import { TransformContent } from './transform-content';
 import { TransformIcon } from './transform-icon';
 import { TransformLabel } from './transform-label';
+import { TransformSettingsControl } from './transform-settings-control';
 
 const SIZE = 'tiny';
 
@@ -32,19 +26,11 @@ export const TransformRepeaterControl = createControl( () => {
 	const headerRef = useRef< HTMLDivElement >( null );
 	const popupState = usePopupState( { variant: 'popover' } );
 
-	const repeaterBindKey = 'transform-functions';
-
-	injectIntoRepeaterHeaderActions( {
-		id: 'transform-base-control',
-		component: () => <TransformBasePopoverTrigger popupState={ popupState } repeaterBindKey={ repeaterBindKey } />,
-		options: { overwrite: true },
-	} );
-
 	return (
 		<PropProvider { ...context }>
-			<TransformBaseControl popupState={ popupState } anchorRef={ headerRef } />
-			<PropKeyProvider bind={ repeaterBindKey }>
-				<Repeater headerRef={ headerRef } propType={ context.propType } />
+			<TransformSettingsControl popupState={ popupState } anchorRef={ headerRef } />
+			<PropKeyProvider bind={ 'transform-functions' }>
+				<Repeater headerRef={ headerRef } propType={ context.propType } popupState={ popupState } />
 			</PropKeyProvider>
 		</PropProvider>
 	);
@@ -63,10 +49,18 @@ const ToolTip = (
 	</Box>
 );
 
-const Repeater = ( { headerRef, propType }: { headerRef: React.RefObject< HTMLDivElement >; propType: PropType } ) => {
+const Repeater = ( {
+	headerRef,
+	propType,
+	popupState,
+}: {
+	headerRef: React.RefObject< HTMLDivElement >;
+	propType: PropType;
+	popupState: PopupState;
+} ) => {
 	const transformFunctionsContext = useBoundProp( transformFunctionsPropTypeUtil );
 	const availableValues = [ initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue ];
-	const { value: transformValues } = transformFunctionsContext;
+	const { value: transformValues, bind } = transformFunctionsContext;
 
 	const getInitialValue = () => {
 		return availableValues.find( ( value ) => ! transformValues?.some( ( item ) => item.$$type === value.$$type ) );
@@ -76,30 +70,39 @@ const Repeater = ( { headerRef, propType }: { headerRef: React.RefObject< HTMLDi
 
 	return (
 		<PropProvider { ...transformFunctionsContext }>
-			<UnstableRepeater
+			<ControlRepeater
 				initial={ getInitialValue() ?? initialTransformValue }
 				propTypeUtil={ transformFunctionsPropTypeUtil }
 			>
-				<Header
+				<RepeaterHeader
 					label={ __( 'Transform', 'elementor' ) }
 					adornment={ () => <ControlAdornments customContext={ { path: [ 'transform' ], propType } } /> }
 					ref={ headerRef }
 				>
+					<TransformBasePopoverTrigger popupState={ popupState } repeaterBindKey={ bind } />
 					<TooltipAddItemAction
 						disabled={ shouldDisableAddItem }
 						tooltipContent={ ToolTip }
 						enableTooltip={ shouldDisableAddItem }
 						ariaLabel={ 'transform' }
 					/>
-				</Header>
-				<ItemsContainer itemTemplate={ <Item Icon={ TransformIcon } Label={ TransformLabel } /> }>
-					<DisableItemAction />
-					<RemoveItemAction />
+				</RepeaterHeader>
+				<ItemsContainer>
+					<Item
+						Icon={ TransformIcon }
+						Label={ TransformLabel }
+						actions={
+							<>
+								<DisableItemAction />
+								<RemoveItemAction />
+							</>
+						}
+					/>
 				</ItemsContainer>
 				<EditItemPopover>
 					<TransformContent />
 				</EditItemPopover>
-			</UnstableRepeater>
+			</ControlRepeater>
 		</PropProvider>
 	);
 };
@@ -112,10 +115,13 @@ const TransformBasePopoverTrigger = ( {
 	repeaterBindKey: string;
 } ) => {
 	const { bind } = useBoundProp();
+	const titleLabel = __( 'Transform settings', 'elementor' );
 
 	return bind !== repeaterBindKey ? null : (
-		<IconButton size={ SIZE } aria-label={ __( 'Base Transform', 'elementor' ) } { ...bindTrigger( popupState ) }>
-			<AdjustmentsIcon fontSize={ SIZE } />
-		</IconButton>
+		<Tooltip title={ titleLabel } placement="top">
+			<IconButton size={ SIZE } aria-label={ titleLabel } { ...bindTrigger( popupState ) }>
+				<AdjustmentsIcon fontSize={ SIZE } />
+			</IconButton>
+		</Tooltip>
 	);
 };

package/src/controls/transform-control/{transform-base-control.tsx → transform-settings-control.tsx}

@@ -11,7 +11,7 @@ import { TransformOriginControl } from './transform-base-controls/transform-orig
 
 const SIZE = 'tiny';
 
-export const TransformBaseControl = ( {
+export const TransformSettingsControl = ( {
 	popupState,
 	anchorRef,
 }: {
@@ -38,7 +38,7 @@ export const TransformBaseControl = ( {
 			{ ...popupProps }
 		>
 			<PopoverHeader
-				title={ __( 'Base Transform', 'elementor' ) }
+				title={ __( 'Transform settings', 'elementor' ) }
 				onClose={ popupState.close }
 				icon={ <AdjustmentsIcon fontSize={ SIZE } /> }
 			/>

package/src/controls/transform-control/use-transform-tabs-history.tsx

@@ -13,7 +13,7 @@ import {
 import { useTabs } from '@elementor/ui';
 
 import { useBoundProp } from '../../bound-prop-context';
-import { useRepeaterContext } from '../../components/unstable-repeater/context/repeater-context';
+import { useRepeaterContext } from '../../components/control-repeater/context/repeater-context';
 import { type TransformFunction, TransformFunctionKeys } from './initial-values';
 
 type InitialTransformValues = {

package/src/controls/transition-control/data.ts

@@ -1,9 +1,11 @@
+import { type KeyValuePropValue, type SizePropValue } from '@elementor/editor-props';
 import { __ } from '@wordpress/i18n';
 
 export type TransitionProperty = {
 	label: string;
 	value: string;
 	unavailable?: boolean;
+	isDisabled?: boolean;
 };
 
 export type TransitionCategory = {
@@ -12,7 +14,20 @@ export type TransitionCategory = {
 	properties: TransitionProperty[];
 };
 
-export const initialTransitionValue = {
+export type TransitionValue = {
+	selection: KeyValuePropValue;
+	size: SizePropValue;
+};
+
+export type TransitionItem = {
+	$$type: 'selection-size';
+	value: {
+		$$type: 'key-value';
+		value: TransitionValue;
+	};
+};
+
+export const initialTransitionValue: TransitionValue = {
 	selection: {
 		$$type: 'key-value',
 		value: {

package/src/controls/transition-control/trainsition-events.ts

@@ -1,5 +1,5 @@
 import { getSelectedElements } from '@elementor/editor-elements';
-import { sendMixpanelEvent } from '@elementor/utils';
+import { trackEvent } from '@elementor/mixpanel';
 
 import { eventBus } from '../../services/event-bus';
 import { type initialTransitionValue } from './data';
@@ -19,7 +19,7 @@ export function subscribeToTransitionEvent() {
 		const value = payload?.itemValue?.selection?.value?.value?.value;
 		const selectedElements = getSelectedElements();
 		const widgetType = selectedElements[ 0 ]?.type ?? null;
-		sendMixpanelEvent( {
+		trackEvent( {
 			transition_type: value ?? 'unknown',
 			...transitionRepeaterMixpanelEvent,
 			widget_type: widgetType,

package/src/controls/transition-control/transition-repeater-control.tsx

@@ -1,17 +1,30 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { selectionSizePropTypeUtil } from '@elementor/editor-props';
+import { useEffect, useMemo, useState } from 'react';
+import {
+	createArrayPropUtils,
+	type KeyValuePropValue,
+	selectionSizePropTypeUtil,
+	type SelectionSizePropValue,
+} from '@elementor/editor-props';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { InfoCircleFilledIcon } from '@elementor/icons';
 import { Alert, AlertTitle, Box, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useBoundProp } from '../../bound-prop-context';
+import { type Item, type RepeatablePropValue } from '../../components/control-repeater/types';
 import { createControl } from '../../create-control';
 import { RepeatableControl } from '../repeatable-control';
 import { SelectionSizeControl } from '../selection-size-control';
-import { initialTransitionValue, transitionProperties } from './data';
+import {
+	initialTransitionValue,
+	type TransitionItem,
+	transitionProperties,
+	type TransitionProperty,
+	type TransitionValue,
+} from './data';
 import { subscribeToTransitionEvent } from './trainsition-events';
-import { TransitionSelector } from './transition-selector';
+import { getTransitionPropertyByValue, TransitionSelector } from './transition-selector';
 
 const DURATION_CONFIG = {
 	variant: 'time',
@@ -19,9 +32,34 @@ const DURATION_CONFIG = {
 	defaultUnit: 'ms',
 };
 
+const childArrayPropTypeUtil = createArrayPropUtils(
+	selectionSizePropTypeUtil.key,
+	selectionSizePropTypeUtil.schema,
+	'transition'
+);
+
+subscribeToTransitionEvent();
+
+const areAllPropertiesUsed = ( value: SelectionSizePropValue[] = [] ) => {
+	return value?.length
+		? transitionProperties.every( ( category ) => {
+				return category.properties.every( ( property ) => {
+					return (
+						property.isDisabled ||
+						!! value?.find( ( item ) => {
+							return (
+								( item.value?.selection?.value as KeyValuePropValue )?.value?.value === property.value
+							);
+						} )
+					);
+				} );
+		  } )
+		: false;
+};
+
 // this config needs to be loaded at runtime/render since it's the transitionProperties object will be mutated by the pro plugin.
 // See: https://elementor.atlassian.net/browse/ED-20285
-const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
+const getSelectionSizeProps = ( recentlyUsedList: string[], disabledItems?: string[] ) => {
 	return {
 		selectionLabel: __( 'Type', 'elementor' ),
 		sizeLabel: __( 'Duration', 'elementor' ),
@@ -29,8 +67,10 @@ const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
 			component: TransitionSelector,
 			props: {
 				recentlyUsedList,
+				disabledItems,
 			},
 		},
+		isRepeaterControl: true,
 		sizeConfigMap: {
 			...transitionProperties.reduce(
 				( acc, category ) => {
@@ -45,13 +85,69 @@ const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
 	};
 };
 
-function getChildControlConfig( recentlyUsedList: string[] ) {
+const isItemDisabled = ( item: TransitionItem[ 'value' ] ) => {
+	const property = getTransitionPropertyByValue( item.value.selection.value?.value );
+
+	return ! property ? false : !! property.isDisabled;
+};
+
+const getChildControlConfig = ( recentlyUsedList: string[], disabledItems?: string[] ) => {
 	return {
 		propTypeUtil: selectionSizePropTypeUtil,
 		component: SelectionSizeControl as unknown as React.ComponentType< Record< string, unknown > >,
-		props: getSelectionSizeProps( recentlyUsedList ),
+		props: getSelectionSizeProps( recentlyUsedList, disabledItems ),
+		isItemDisabled: isItemDisabled as ( item: Item< RepeatablePropValue > ) => boolean,
 	};
-}
+};
+
+const isPropertyUsed = ( value: SelectionSizePropValue[], property: TransitionProperty ) => {
+	return ( value ?? [] ).some( ( item ) => {
+		return ( item?.value?.selection?.value as KeyValuePropValue )?.value?.value === property.value;
+	} );
+};
+
+const getDisabledItemLabels = ( values: SelectionSizePropValue[] = [] ) => {
+	const disabledLabels: string[] = ( values || [] ).map(
+		( item ) => ( item.value?.selection as KeyValuePropValue )?.value?.key?.value
+	);
+
+	transitionProperties.forEach( ( category ) => {
+		const disabledProperties = category.properties
+			.filter( ( property ) => property.isDisabled && ! disabledLabels.includes( property.label ) )
+			.map( ( property ) => property.label );
+
+		disabledLabels.push( ...disabledProperties );
+	} );
+
+	return disabledLabels;
+};
+
+const getInitialValue = ( values: SelectionSizePropValue[] = [] ): TransitionValue => {
+	if ( ! values?.length ) {
+		return initialTransitionValue;
+	}
+
+	for ( const category of transitionProperties ) {
+		for ( const property of category.properties ) {
+			if ( isPropertyUsed( values, property ) ) {
+				continue;
+			}
+
+			return {
+				...initialTransitionValue,
+				selection: {
+					$$type: 'key-value',
+					value: {
+						key: { value: property.label, $$type: 'string' },
+						value: { value: property.value, $$type: 'string' },
+					},
+				},
+			};
+		}
+	}
+
+	return initialTransitionValue;
+};
 
 const disableAddItemTooltipContent = (
 	<Alert
@@ -71,8 +167,6 @@ const disableAddItemTooltipContent = (
 	</Alert>
 );
 
-subscribeToTransitionEvent();
-
 export const TransitionRepeaterControl = createControl(
 	( {
 		recentlyUsedListGetter,
@@ -84,10 +178,40 @@ export const TransitionRepeaterControl = createControl(
 		const currentStyleIsNormal = currentStyleState === null;
 		const [ recentlyUsedList, setRecentlyUsedList ] = useState< string[] >( [] );
 
+		const { value, setValue } = useBoundProp( childArrayPropTypeUtil );
+		const disabledItems = useMemo( () => getDisabledItemLabels( value ), [ value ] );
+
+		const allowedTransitionSet = useMemo( () => {
+			const set = new Set< string >();
+			transitionProperties.forEach( ( category ) => {
+				category.properties.forEach( ( prop ) => set.add( prop.value ) );
+			} );
+			return set;
+		}, [] );
+
+		useEffect( () => {
+			if ( ! value || value.length === 0 ) {
+				return;
+			}
+
+			const sanitized = value.filter( ( item ) => {
+				const selectionValue = ( item?.value?.selection?.value as KeyValuePropValue )?.value?.value ?? '';
+				return allowedTransitionSet.has( selectionValue );
+			} );
+
+			if ( sanitized.length !== value.length ) {
+				setValue( sanitized );
+			}
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ allowedTransitionSet ] );
+
 		useEffect( () => {
 			recentlyUsedListGetter().then( setRecentlyUsedList );
 		}, [ recentlyUsedListGetter ] );
 
+		const allPropertiesUsed = useMemo( () => areAllPropertiesUsed( value ), [ value ] );
+		const isAddItemDisabled = ! currentStyleIsNormal || allPropertiesUsed;
+
 		return (
 			<RepeatableControl
 				label={ __( 'Transitions', 'elementor' ) }
@@ -96,11 +220,11 @@ export const TransitionRepeaterControl = createControl(
 				placeholder={ __( 'Empty Transition', 'elementor' ) }
 				showDuplicate={ false }
 				showToggle={ true }
-				initialValues={ initialTransitionValue }
-				childControlConfig={ getChildControlConfig( recentlyUsedList ) }
+				initialValues={ getInitialValue( value ) }
+				childControlConfig={ getChildControlConfig( recentlyUsedList, disabledItems ) }
 				propKey="transition"
 				addItemTooltipProps={ {
-					disabled: ! currentStyleIsNormal,
+					disabled: isAddItemDisabled,
 					enableTooltip: ! currentStyleIsNormal,
 					tooltipContent: disableAddItemTooltipContent,
 				} }

package/src/controls/transition-control/transition-selector.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { keyValuePropTypeUtil } from '@elementor/editor-props';
+import { keyValuePropTypeUtil, type KeyValuePropValue, type StringPropValue } from '@elementor/editor-props';
 import { ChevronDownIcon, VariationsIcon } from '@elementor/icons';
 import { bindPopover, bindTrigger, Box, Popover, UnstableTag, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../../bound-prop-context';
 import { ItemSelector } from '../../components/item-selector';
+import ControlActions from '../../control-actions/control-actions';
 import { transitionProperties, transitionsItemsList } from './data';
 
 const toTransitionSelectorValue = ( label: string ) => {
@@ -23,16 +24,35 @@ const toTransitionSelectorValue = ( label: string ) => {
 	return null;
 };
 
-const findByValue = ( value: string ) => {
+export function getTransitionPropertyByValue( item?: StringPropValue | null ) {
+	if ( ! item?.value ) {
+		return null;
+	}
+
 	for ( const category of transitionProperties ) {
-		const property = category.properties.find( ( prop ) => prop.value === value );
-		if ( property ) {
-			return property.label;
+		for ( const property of category.properties ) {
+			if ( property.value === item.value ) {
+				return property;
+			}
 		}
 	}
+
+	return null;
+}
+
+const includeCurrentValueInOptions = ( value: KeyValuePropValue[ 'value' ], disabledItems: string[] ) => {
+	return disabledItems.filter( ( item ) => {
+		return item !== value.key.value;
+	} );
 };
 
-export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedList: string[] } ) => {
+export const TransitionSelector = ( {
+	recentlyUsedList = [],
+	disabledItems = [],
+}: {
+	recentlyUsedList: string[];
+	disabledItems?: string[];
+} ) => {
 	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
 	const {
 		key: { value: transitionLabel },
@@ -42,7 +62,7 @@ export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedLis
 
 	const getItemList = () => {
 		const recentItems = recentlyUsedList
-			.map( ( item ) => findByValue( item ) )
+			.map( ( item ) => getTransitionPropertyByValue( { value: item, $$type: 'string' } )?.label )
 			.filter( ( item ) => !! item ) as string[];
 		const filteredItems = transitionsItemsList.map( ( category ) => {
 			return {
@@ -89,13 +109,15 @@ export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedLis
 
 	return (
 		<Box ref={ defaultRef }>
-			<UnstableTag
-				variant="outlined"
-				label={ transitionLabel }
-				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
-				{ ...bindTrigger( popoverState ) }
-				fullWidth
-			/>
+			<ControlActions>
+				<UnstableTag
+					variant="outlined"
+					label={ transitionLabel }
+					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+					{ ...bindTrigger( popoverState ) }
+					fullWidth
+				/>
+			</ControlActions>
 			<Popover
 				disablePortal
 				disableScrollLock
@@ -113,6 +135,7 @@ export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedLis
 					sectionWidth={ 268 }
 					title={ __( 'Transition Property', 'elementor' ) }
 					icon={ VariationsIcon as React.ElementType< { fontSize: string } > }
+					disabledItems={ includeCurrentValueInOptions( value, disabledItems ) }
 				/>
 			</Popover>
 		</Box>

package/src/controls/url-control.tsx

@@ -6,20 +6,25 @@ import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const UrlControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue, disabled } = useBoundProp( urlPropTypeUtil );
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
+export const UrlControl = createControl(
+	( { placeholder, ariaLabel }: { placeholder?: string; ariaLabel?: string } ) => {
+		const { value, setValue, disabled } = useBoundProp( urlPropTypeUtil );
+		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				fullWidth
-				value={ value ?? '' }
-				disabled={ disabled }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );
+		return (
+			<ControlActions>
+				<TextField
+					size="tiny"
+					fullWidth
+					value={ value ?? '' }
+					disabled={ disabled }
+					onChange={ handleChange }
+					placeholder={ placeholder }
+					inputProps={ {
+						...( ariaLabel ? { 'aria-label': ariaLabel } : {} ),
+					} }
+				/>
+			</ControlActions>
+		);
+	}
+);

package/src/create-control.tsx

@@ -15,11 +15,12 @@ export type ControlComponent< TComponent extends AnyComponentType = AnyComponent
 
 export function createControl< T extends AnyComponentType >( Control: T ) {
 	return ( ( props: ComponentProps< T > ) => {
-		const Component = useControlReplacement( Control );
+		const { ControlToRender, OriginalControl, isReplaced } = useControlReplacement( Control );
+		const controlProps = isReplaced ? { ...props, OriginalControl } : props;
 
 		return (
 			<ErrorBoundary fallback={ null }>
-				<Component { ...props } />
+				<ControlToRender { ...controlProps } />
 			</ErrorBoundary>
 		);
 	} ) as ControlComponent< T >;