@elementor/editor-variables 3.33.0-136 → 3.33.0-138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-136",
+  "version": "3.33.0-138",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-136",
-    "@elementor/editor-canvas": "3.33.0-136",
-    "@elementor/editor-controls": "3.33.0-136",
-    "@elementor/editor-current-user": "3.33.0-136",
-    "@elementor/editor-editing-panel": "3.33.0-136",
-    "@elementor/editor-panels": "3.33.0-136",
-    "@elementor/editor-props": "3.33.0-136",
-    "@elementor/editor-ui": "3.33.0-136",
-    "@elementor/editor-v1-adapters": "3.33.0-136",
-    "@elementor/http-client": "3.33.0-136",
+    "@elementor/editor": "3.33.0-138",
+    "@elementor/editor-canvas": "3.33.0-138",
+    "@elementor/editor-controls": "3.33.0-138",
+    "@elementor/editor-current-user": "3.33.0-138",
+    "@elementor/editor-editing-panel": "3.33.0-138",
+    "@elementor/editor-panels": "3.33.0-138",
+    "@elementor/editor-props": "3.33.0-138",
+    "@elementor/editor-ui": "3.33.0-138",
+    "@elementor/editor-v1-adapters": "3.33.0-138",
+    "@elementor/http-client": "3.33.0-138",
     "@elementor/icons": "1.46.0",
-    "@elementor/mixpanel": "3.33.0-136",
-    "@elementor/schema": "3.33.0-136",
+    "@elementor/mixpanel": "3.33.0-138",
+    "@elementor/schema": "3.33.0-138",
     "@elementor/ui": "1.36.12",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/batch-operations.ts

@@ -47,7 +47,9 @@ export const buildOperationsArray = (
 				} );
 			} else if (
 				! variable.deleted &&
-				( original.label !== variable.label || original.value !== variable.value )
+				( original.label !== variable.label ||
+					original.value !== variable.value ||
+					original.order !== variable.order )
 			) {
 				operations.push( {
 					type: 'update',
@@ -55,6 +57,7 @@ export const buildOperationsArray = (
 					variable: {
 						...( original.label !== variable.label && { label: variable.label } ),
 						...( original.value !== variable.value && { value: variable.value } ),
+						...( original.order !== variable.order && { order: variable.order } ),
 					},
 				} );
 			}

package/src/components/variables-manager/variables-manager-table.tsx

@@ -69,8 +69,17 @@ export const VariablesManagerTable = ( {
 		}
 	};
 
+	useEffect( () => {
+		const sortedIds = [ ...ids ].sort( sortVariablesOrder( variables ) );
+
+		if ( JSON.stringify( sortedIds ) !== JSON.stringify( ids ) ) {
+			setIds( sortedIds );
+		}
+	}, [ ids, variables, setIds ] );
+
 	const rows = ids
 		.filter( ( id ) => ! variables[ id ].deleted )
+		.sort( sortVariablesOrder( variables ) )
 		.map( ( id ) => {
 			const variable = variables[ id ];
 			const variableType = getVariableType( variable.type );
@@ -103,7 +112,19 @@ export const VariablesManagerTable = ( {
 				<TableBody>
 					<UnstableSortableProvider
 						value={ ids }
-						onChange={ setIds }
+						onChange={ ( newIds ) => {
+							const updatedVariables = { ...variables };
+							newIds.forEach( ( id, index ) => {
+								if ( updatedVariables[ id ] ) {
+									updatedVariables[ id ] = {
+										...updatedVariables[ id ],
+										order: index + 1,
+									};
+								}
+							} );
+							handleOnChange( updatedVariables );
+							setIds( newIds );
+						} }
 						variant="static"
 						restrictAxis
 						dragOverlay={ ( { children: dragOverlayChildren, ...dragOverlayProps } ) => (
@@ -255,3 +276,10 @@ export const VariablesManagerTable = ( {
 		</TableContainer>
 	);
 };
+function sortVariablesOrder( variables: TVariablesList ): ( a: string, b: string ) => number {
+	return ( a, b ) => {
+		const orderA = variables[ a ]?.order ?? Number.MAX_SAFE_INTEGER;
+		const orderB = variables[ b ]?.order ?? Number.MAX_SAFE_INTEGER;
+		return orderA - orderB;
+	};
+}

package/src/hooks/use-prop-variables.ts

@@ -34,9 +34,14 @@ export const useFilteredVariables = ( searchValue: string, propTypeKey: string )
 
 	const typeFilteredVariables = useVariableSelectionFilter( baseVariables );
 	const searchFilteredVariables = filterVariablesBySearchValue( typeFilteredVariables, searchValue );
+	const sortedVariables = searchFilteredVariables.sort( ( a, b ) => {
+		const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+		const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+		return orderA - orderB;
+	} );
 
 	return {
-		list: searchFilteredVariables,
+		list: sortedVariables,
 		hasMatches: searchFilteredVariables.length > 0,
 		isSourceNotEmpty: typeFilteredVariables.length > 0,
 		hasNoCompatibleVariables: baseVariables.length > 0 && typeFilteredVariables.length === 0,
@@ -64,10 +69,11 @@ const normalizeVariables = ( propKey: string ) => {
 
 	return Object.entries( variables )
 		.filter( ( [ , variable ] ) => variable.type === propKey )
-		.map( ( [ key, { label, value } ] ) => ( {
+		.map( ( [ key, { label, value, order } ] ) => ( {
 			key,
 			label,
 			value,
+			order,
 		} ) );
 };
 

package/src/storage.ts

@@ -2,6 +2,7 @@ export type TVariable = {
 	type: string;
 	label: string;
 	value: string;
+	order?: number;
 	deleted?: boolean;
 	deleted_at?: string;
 };

package/src/types.ts

@@ -22,4 +22,5 @@ export type NormalizedVariable = {
 	key: string;
 	label: string;
 	value: string;
+	order?: number;
 };