@elementor/editor-controls 3.32.0-26 → 3.32.0-28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.32.0-26",
+  "version": "3.32.0-28",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-26",
-    "@elementor/editor-elements": "3.32.0-26",
-    "@elementor/editor-props": "3.32.0-26",
-    "@elementor/editor-responsive": "3.32.0-26",
-    "@elementor/editor-ui": "3.32.0-26",
-    "@elementor/editor-v1-adapters": "3.32.0-26",
-    "@elementor/env": "3.32.0-26",
-    "@elementor/http-client": "3.32.0-26",
+    "@elementor/editor-current-user": "3.32.0-28",
+    "@elementor/editor-elements": "3.32.0-28",
+    "@elementor/editor-props": "3.32.0-28",
+    "@elementor/editor-responsive": "3.32.0-28",
+    "@elementor/editor-ui": "3.32.0-28",
+    "@elementor/editor-v1-adapters": "3.32.0-28",
+    "@elementor/env": "3.32.0-28",
+    "@elementor/http-client": "3.32.0-28",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-26",
-    "@elementor/query": "3.32.0-26",
-    "@elementor/session": "3.32.0-26",
+    "@elementor/locations": "3.32.0-28",
+    "@elementor/query": "3.32.0-28",
+    "@elementor/session": "3.32.0-28",
     "@elementor/ui": "1.36.2",
-    "@elementor/utils": "3.32.0-26",
-    "@elementor/wp-media": "3.32.0-26",
+    "@elementor/utils": "3.32.0-28",
+    "@elementor/wp-media": "3.32.0-28",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

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

@@ -16,13 +16,15 @@ const DURATION_CONFIG = {
 
 // 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 = () => {
+const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
 	return {
 		selectionLabel: __( 'Type', 'elementor' ),
 		sizeLabel: __( 'Duration', 'elementor' ),
 		selectionConfig: {
 			component: TransitionSelector,
-			props: {},
+			props: {
+				recentlyUsedList,
+			},
 		},
 		sizeConfigMap: {
 			...transitionProperties.reduce(
@@ -38,15 +40,15 @@ const getSelectionSizeProps = () => {
 	};
 };
 
-function getChildControlConfig() {
+function getChildControlConfig( recentlyUsedList: string[] ) {
 	return {
 		propTypeUtil: selectionSizePropTypeUtil,
 		component: SelectionSizeControl as unknown as React.ComponentType< Record< string, unknown > >,
-		props: getSelectionSizeProps(),
+		props: getSelectionSizeProps( recentlyUsedList ),
 	};
 }
 
-export const TransitionRepeaterControl = createControl( () => {
+export const TransitionRepeaterControl = createControl( ( props: { recentlyUsedList: string[] } ) => {
 	return (
 		<RepeatableControl
 			label={ __( 'Transitions', 'elementor' ) }
@@ -56,7 +58,7 @@ export const TransitionRepeaterControl = createControl( () => {
 			showDuplicate={ false }
 			showToggle={ true }
 			initialValues={ initialTransitionValue }
-			childControlConfig={ getChildControlConfig() }
+			childControlConfig={ getChildControlConfig( props.recentlyUsedList ) }
 			propKey="transition"
 		/>
 	);

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

@@ -23,7 +23,16 @@ const toTransitionSelectorValue = ( label: string ) => {
 	return null;
 };
 
-export const TransitionSelector = () => {
+const findByValue = ( value: string ) => {
+	for ( const category of transitionProperties ) {
+		const property = category.properties.find( ( prop ) => prop.value === value );
+		if ( property ) {
+			return property.label;
+		}
+	}
+};
+
+export const TransitionSelector = ( { recentlyUsedList }: { recentlyUsedList: string[] } ) => {
 	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
 	const {
 		value: { value: transitionValue },
@@ -32,6 +41,28 @@ export const TransitionSelector = () => {
 	const defaultRef = useRef< HTMLDivElement >( null );
 	const popoverState = usePopupState( { variant: 'popover' } );
 
+	const getItemList = () => {
+		const recentItems = recentlyUsedList
+			.map( ( item ) => findByValue( item ) )
+			.filter( ( item ) => !! item ) as string[];
+		const filteredItems = transitionsItemsList.map( ( category ) => {
+			return {
+				...category,
+				items: category.items.filter( ( item ) => ! recentItems.includes( item ) ),
+			};
+		} );
+		if ( recentItems.length === 0 ) {
+			return filteredItems;
+		}
+		return [
+			{
+				label: __( 'Recent', 'elementor' ),
+				items: recentItems,
+			},
+			...filteredItems,
+		];
+	};
+
 	const handleTransitionPropertyChange = ( newLabel: string ) => {
 		const newValue = toTransitionSelectorValue( newLabel );
 
@@ -74,7 +105,7 @@ export const TransitionSelector = () => {
 				transformOrigin={ { vertical: 'top', horizontal: 'left' } }
 			>
 				<ItemSelector
-					itemsList={ transitionsItemsList }
+					itemsList={ getItemList() }
 					selectedItem={ transitionValue }
 					onItemChange={ handleTransitionPropertyChange }
 					onClose={ popoverState.close }