@elementor/editor-variables 3.32.0-60 → 3.32.0-62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.32.0-60",
+  "version": "3.32.0-62",
   "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-60",
-    "@elementor/editor-canvas": "3.32.0-60",
-    "@elementor/editor-controls": "3.32.0-60",
-    "@elementor/editor-current-user": "3.32.0-60",
-    "@elementor/editor-editing-panel": "3.32.0-60",
-    "@elementor/editor-panels": "3.32.0-60",
-    "@elementor/editor-props": "3.32.0-60",
-    "@elementor/editor-ui": "3.32.0-60",
-    "@elementor/editor-v1-adapters": "3.32.0-60",
-    "@elementor/http-client": "3.32.0-60",
+    "@elementor/editor": "3.32.0-62",
+    "@elementor/editor-canvas": "3.32.0-62",
+    "@elementor/editor-controls": "3.32.0-62",
+    "@elementor/editor-current-user": "3.32.0-62",
+    "@elementor/editor-editing-panel": "3.32.0-62",
+    "@elementor/editor-panels": "3.32.0-62",
+    "@elementor/editor-props": "3.32.0-62",
+    "@elementor/editor-ui": "3.32.0-62",
+    "@elementor/editor-v1-adapters": "3.32.0-62",
+    "@elementor/http-client": "3.32.0-62",
     "@elementor/icons": "1.46.0",
-    "@elementor/schema": "3.32.0-60",
+    "@elementor/schema": "3.32.0-62",
     "@elementor/ui": "1.36.8",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { ClickAwayListener, Stack } from '@elementor/ui';
+
+import { type ValueFieldProps } from '../../variables-registry/create-variable-type-registry';
+
+export const VariableEditableCell = ( {
+	initialValue,
+	children,
+	editableElement,
+	onSave,
+	prefixElement,
+	disableCloseOnBlur,
+}: {
+	initialValue: string;
+	children: React.ReactNode;
+	editableElement: ( { value, onChange, onValidationChange }: ValueFieldProps ) => JSX.Element;
+	onSave: ( newValue: string ) => void;
+	prefixElement?: React.ReactNode;
+	disableCloseOnBlur?: boolean;
+} ) => {
+	const [ value, setValue ] = useState( initialValue );
+	const [ isEditing, setIsEditing ] = useState( false );
+
+	const handleDoubleClick = () => {
+		setIsEditing( true );
+	};
+
+	const handleSave = () => {
+		onSave( value );
+		setIsEditing( false );
+	};
+
+	const handleKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {
+		if ( event.key === 'Enter' ) {
+			handleSave();
+		} else if ( event.key === 'Escape' ) {
+			setIsEditing( false );
+		}
+		if ( event.key === ' ' && ! isEditing ) {
+			event.preventDefault();
+			setIsEditing( true );
+		}
+	};
+
+	const handleChange = ( newValue: string ) => {
+		setValue( newValue );
+	};
+
+	const editableContent = editableElement( { value, onChange: handleChange } );
+
+	return (
+		<ClickAwayListener onClickAway={ handleSave }>
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={ 1 }
+				onDoubleClick={ handleDoubleClick }
+				onBlur={ disableCloseOnBlur ? undefined : handleSave }
+				onKeyDown={ handleKeyDown }
+				tabIndex={ 0 }
+				role="button"
+				aria-label="Double click or press Space to edit"
+			>
+				{ prefixElement }
+				{ isEditing ? editableContent : children }
+			</Stack>
+		</ClickAwayListener>
+	);
+};

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

@@ -14,6 +14,7 @@ import { ColorFilterIcon, TrashIcon, XIcon } from '@elementor/icons';
 import { Alert, Box, Button, Divider, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { getVariables } from '../../hooks/use-prop-variables';
 import { VariablesManagerTable } from './variables-manager-table';
 
 const id = 'variables-manager';
@@ -33,6 +34,7 @@ export const { panel, usePanelActions } = createPanel( {
 export function VariablesManagerPanel() {
 	const { close: closePanel } = usePanelActions();
 	const isDirty = false;
+	const variables = getVariables( false );
 
 	usePreventUnload( isDirty );
 
@@ -73,7 +75,7 @@ export function VariablesManagerPanel() {
 						} }
 					>
 						<Divider />
-						<VariablesManagerTable menuActions={ menuActions } />
+						<VariablesManagerTable menuActions={ menuActions } variables={ variables } />
 					</PanelBody>
 
 					<PanelFooter>

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

@@ -11,33 +11,38 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
+	TextField,
 	UnstableSortableItem,
 	type UnstableSortableItemRenderProps,
 	UnstableSortableProvider,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { getVariables } from '../../hooks/use-prop-variables';
+import { type TVariablesList } from '../../storage';
 import { getVariableType } from '../../variables-registry/variable-type-registry';
 import { VariableEditMenu, type VariableManagerMenuAction } from './variable-edit-menu';
+import { VariableEditableCell } from './variable-editable-cell';
 import { VariableTableCell } from './variable-table-cell';
 
 type Props = {
 	menuActions: VariableManagerMenuAction[];
+	variables: TVariablesList;
 };
 
-export const VariablesManagerTable = ( { menuActions }: Props ) => {
-	const variables = getVariables( false );
-
+export const VariablesManagerTable = ( { menuActions, variables }: Props ) => {
 	const [ ids, setIds ] = useState< string[] >( Object.keys( variables ) );
-	const rows = ids.map( ( id ) => ( {
-		id,
-		name: variables[ id ].label,
-		value: variables[ id ].value,
-		type: variables[ id ].type,
-		icon: getVariableType( variables[ id ].type ).icon,
-		startIcon: getVariableType( variables[ id ].type ).startIcon,
-	} ) );
+	const rows = ids.map( ( id ) => {
+		const variable = variables[ id ];
+		const variableType = getVariableType( variable.type );
+
+		return {
+			id,
+			name: variable.label,
+			value: variable.value,
+			type: variable.type,
+			...variableType,
+		};
+	} );
 
 	const tableSX: SxProps = {
 		minWidth: 250,
@@ -129,21 +134,37 @@ export const VariablesManagerTable = ( { menuActions }: Props ) => {
 												</IconButton>
 											</VariableTableCell>
 											<VariableTableCell>
-												<Stack direction="row" alignItems="center" gap={ 1 }>
-													{ createElement( row.icon, { fontSize: 'inherit' } ) }
+												<VariableEditableCell
+													initialValue={ row.name }
+													onSave={ () => {} }
+													prefixElement={ createElement( row.icon, { fontSize: 'inherit' } ) }
+													editableElement={ ( { value, onChange } ) => (
+														<TextField
+															size="tiny"
+															value={ value }
+															onChange={ (
+																event: React.ChangeEvent< HTMLInputElement >
+															) => onChange( event.target.value ) }
+														/>
+													) }
+												>
 													<EllipsisWithTooltip title={ row.name }>
 														{ row.name }
 													</EllipsisWithTooltip>
-												</Stack>
+												</VariableEditableCell>
 											</VariableTableCell>
 											<VariableTableCell>
-												<Stack direction="row" alignItems="center" gap={ 1 }>
+												<VariableEditableCell
+													initialValue={ row.value }
+													onSave={ () => {} }
+													editableElement={ row.valueField }
+													disableCloseOnBlur
+												>
 													{ row.startIcon && row.startIcon( { value: row.value } ) }
-
 													<EllipsisWithTooltip title={ row.value }>
 														{ row.value }
 													</EllipsisWithTooltip>
-												</Stack>
+												</VariableEditableCell>
 											</VariableTableCell>
 											<VariableTableCell
 												align="right"

package/src/variables-registry/create-variable-type-registry.ts

@@ -14,7 +14,7 @@ import { inheritanceTransformer } from '../transformers/inheritance-transformer'
 import { variableTransformer } from '../transformers/variable-transformer';
 import { type NormalizedVariable } from '../types';
 
-type ValueFieldProps = {
+export type ValueFieldProps = {
 	value: string;
 	onChange: ( value: string ) => void;
 	onValidationChange?: ( value: string ) => void;