@elementor/editor-variables 3.32.0-81 → 3.32.0-83

package/package.json

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

package/src/components/variables-manager/variable-edit-menu.tsx

@@ -7,15 +7,16 @@ export type VariableManagerMenuAction = {
 	name: string;
 	icon: React.ForwardRefExoticComponent< Omit< SvgIconProps, 'ref' > & React.RefAttributes< SVGSVGElement > >;
 	color: string;
-	onClick: () => void;
+	onClick: ( id: string ) => void;
 };
 
 type VariableEditMenuProps = {
 	menuActions: VariableManagerMenuAction[];
 	disabled?: boolean;
+	itemId: string;
 };
 
-export const VariableEditMenu = ( { menuActions, disabled }: VariableEditMenuProps ) => {
+export const VariableEditMenu = ( { menuActions, disabled, itemId }: VariableEditMenuProps ) => {
 	const menuState = usePopupState( {
 		variant: 'popover',
 	} );
@@ -51,7 +52,7 @@ export const VariableEditMenu = ( { menuActions, disabled }: VariableEditMenuPro
 					<MenuItem
 						key={ action.name }
 						onClick={ () => {
-							action.onClick?.();
+							action.onClick?.( itemId );
 							menuState.close();
 						} }
 						sx={ {

package/src/components/variables-manager/variable-editable-cell.tsx

@@ -8,13 +8,13 @@ export const VariableEditableCell = ( {
 	initialValue,
 	children,
 	editableElement,
-	onSave,
+	onChange,
 	prefixElement,
 }: {
 	initialValue: string;
 	children: React.ReactNode;
 	editableElement: ( { value, onChange, onValidationChange }: ValueFieldProps ) => JSX.Element;
-	onSave: ( newValue: string ) => void;
+	onChange: ( newValue: string ) => void;
 	prefixElement?: React.ReactNode;
 } ) => {
 	const [ value, setValue ] = useState( initialValue );
@@ -25,7 +25,7 @@ export const VariableEditableCell = ( {
 	};
 
 	const handleSave = () => {
-		onSave( value );
+		onChange( value );
 		setIsEditing( false );
 	};
 
@@ -47,21 +47,39 @@ export const VariableEditableCell = ( {
 
 	const editableContent = editableElement( { value, onChange: handleChange } );
 
+	if ( isEditing ) {
+		return (
+			<ClickAwayListener onClickAway={ handleSave }>
+				<Stack
+					direction="row"
+					alignItems="center"
+					gap={ 1 }
+					onDoubleClick={ handleDoubleClick }
+					onKeyDown={ handleKeyDown }
+					tabIndex={ 0 }
+					role="button"
+					aria-label="Double click or press Space to edit"
+				>
+					{ prefixElement }
+					{ editableContent }
+				</Stack>
+			</ClickAwayListener>
+		);
+	}
+
 	return (
-		<ClickAwayListener onClickAway={ handleSave }>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={ 1 }
-				onDoubleClick={ handleDoubleClick }
-				onKeyDown={ handleKeyDown }
-				tabIndex={ 0 }
-				role="button"
-				aria-label="Double click or press Space to edit"
-			>
-				{ prefixElement }
-				{ isEditing ? editableContent : children }
-			</Stack>
-		</ClickAwayListener>
+		<Stack
+			direction="row"
+			alignItems="center"
+			gap={ 1 }
+			onDoubleClick={ handleDoubleClick }
+			onKeyDown={ handleKeyDown }
+			tabIndex={ 0 }
+			role="button"
+			aria-label="Double click or press Space to edit"
+		>
+			{ prefixElement }
+			{ children }
+		</Stack>
 	);
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -15,6 +15,7 @@ import { Alert, Box, Button, Divider, ErrorBoundary, IconButton, type IconButton
 import { __ } from '@wordpress/i18n';
 
 import { getVariables } from '../../hooks/use-prop-variables';
+import { type TVariablesList } from '../../storage';
 import { VariablesManagerTable } from './variables-manager-table';
 
 const id = 'variables-manager';
@@ -33,8 +34,9 @@ export const { panel, usePanelActions } = createPanel( {
 
 export function VariablesManagerPanel() {
 	const { close: closePanel } = usePanelActions();
-	const isDirty = false;
-	const variables = getVariables( false );
+	const [ isDirty, setIsDirty ] = useState( false );
+	const [ variables, setVariables ] = useState( getVariables( false ) );
+	const [ deletedVariables, setDeletedVariables ] = useState< string[] >( [] );
 
 	usePreventUnload( isDirty );
 
@@ -43,10 +45,19 @@ export function VariablesManagerPanel() {
 			name: __( 'Delete', 'elementor' ),
 			icon: TrashIcon,
 			color: 'error.main',
-			onClick: () => {},
+			onClick: ( itemId: string ) => {
+				setDeletedVariables( [ ...deletedVariables, itemId ] );
+				setVariables( { ...variables, [ itemId ]: { ...variables[ itemId ], deleted: true } } );
+				setIsDirty( true );
+			},
 		},
 	];
 
+	const handleOnChange = ( newVariables: TVariablesList ) => {
+		setVariables( newVariables );
+		setIsDirty( true );
+	};
+
 	return (
 		<ThemeProvider>
 			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
@@ -77,7 +88,11 @@ export function VariablesManagerPanel() {
 							height: '100%',
 						} }
 					>
-						<VariablesManagerTable menuActions={ menuActions } variables={ variables } />
+						<VariablesManagerTable
+							menuActions={ menuActions }
+							variables={ variables }
+							onChange={ handleOnChange }
+						/>
 					</PanelBody>
 
 					<PanelFooter>

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

@@ -27,22 +27,25 @@ import { VariableTableCell } from './variable-table-cell';
 type Props = {
 	menuActions: VariableManagerMenuAction[];
 	variables: TVariablesList;
+	onChange: ( variables: TVariablesList ) => void;
 };
 
-export const VariablesManagerTable = ( { menuActions, variables }: Props ) => {
+export const VariablesManagerTable = ( { menuActions, variables, onChange: handleOnChange }: Props ) => {
 	const [ ids, setIds ] = useState< string[] >( Object.keys( variables ) );
-	const rows = ids.map( ( id ) => {
-		const variable = variables[ id ];
-		const variableType = getVariableType( variable.type );
+	const rows = ids
+		.filter( ( id ) => ! variables[ id ].deleted )
+		.map( ( id ) => {
+			const variable = variables[ id ];
+			const variableType = getVariableType( variable.type );
 
-		return {
-			id,
-			name: variable.label,
-			value: variable.value,
-			type: variable.type,
-			...variableType,
-		};
-	} );
+			return {
+				id,
+				name: variable.label,
+				value: variable.value,
+				type: variable.type,
+				...variableType,
+			};
+		} );
 
 	const tableSX: SxProps = {
 		minWidth: 250,
@@ -136,7 +139,14 @@ export const VariablesManagerTable = ( { menuActions, variables }: Props ) => {
 											<VariableTableCell>
 												<VariableEditableCell
 													initialValue={ row.name }
-													onSave={ () => {} }
+													onChange={ ( value ) => {
+														if ( value !== row.name ) {
+															handleOnChange( {
+																...variables,
+																[ row.id ]: { ...variables[ row.id ], label: value },
+															} );
+														}
+													} }
 													prefixElement={ createElement( row.icon, { fontSize: 'inherit' } ) }
 													editableElement={ ( { value, onChange } ) => (
 														<LabelField
@@ -159,7 +169,14 @@ export const VariablesManagerTable = ( { menuActions, variables }: Props ) => {
 											<VariableTableCell>
 												<VariableEditableCell
 													initialValue={ row.value }
-													onSave={ () => {} }
+													onChange={ ( value ) => {
+														if ( value !== row.value ) {
+															handleOnChange( {
+																...variables,
+																[ row.id ]: { ...variables[ row.id ], value },
+															} );
+														}
+													} }
 													editableElement={ row.valueField }
 												>
 													{ row.startIcon && row.startIcon( { value: row.value } ) }
@@ -182,6 +199,7 @@ export const VariablesManagerTable = ( { menuActions, variables }: Props ) => {
 													<VariableEditMenu
 														menuActions={ menuActions }
 														disabled={ isSorting }
+														itemId={ row.id }
 													/>
 												</Stack>
 											</VariableTableCell>