@elementor/editor-variables 4.2.0-880 → 4.2.0-882

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.2.0-880",
+  "version": "4.2.0-882",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-880",
-    "@elementor/editor-canvas": "4.2.0-880",
-    "@elementor/editor-controls": "4.2.0-880",
-    "@elementor/editor-current-user": "4.2.0-880",
-    "@elementor/editor-mcp": "4.2.0-880",
-    "@elementor/editor-panels": "4.2.0-880",
-    "@elementor/editor-props": "4.2.0-880",
-    "@elementor/editor-ui": "4.2.0-880",
-    "@elementor/editor-v1-adapters": "4.2.0-880",
-    "@elementor/menus": "4.2.0-880",
-    "@elementor/http-client": "4.2.0-880",
+    "@elementor/editor": "4.2.0-882",
+    "@elementor/editor-canvas": "4.2.0-882",
+    "@elementor/editor-controls": "4.2.0-882",
+    "@elementor/editor-current-user": "4.2.0-882",
+    "@elementor/editor-mcp": "4.2.0-882",
+    "@elementor/editor-panels": "4.2.0-882",
+    "@elementor/editor-props": "4.2.0-882",
+    "@elementor/editor-ui": "4.2.0-882",
+    "@elementor/editor-v1-adapters": "4.2.0-882",
+    "@elementor/menus": "4.2.0-882",
+    "@elementor/http-client": "4.2.0-882",
     "@elementor/icons": "~1.75.1",
-    "@elementor/events": "4.2.0-880",
-    "@elementor/schema": "4.2.0-880",
+    "@elementor/events": "4.2.0-882",
+    "@elementor/schema": "4.2.0-882",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-880",
+    "@elementor/utils": "4.2.0-882",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/variable-selection-popover.tsx

@@ -10,7 +10,6 @@ import { useQuotaPermissions } from '../hooks/use-quota-permissions';
 import { type Variable } from '../types';
 import { VariableCreation } from './variable-creation';
 import { VariableEdit } from './variable-edit';
-import { usePanelActions } from './variables-manager/variables-manager-panel';
 import { VariablesSelection } from './variables-selection';
 
 const VIEW_LIST = 'list';
@@ -28,16 +27,11 @@ type Props = {
 export const VariableSelectionPopover = ( { closePopover, propTypeKey, selectedVariable }: Props ) => {
 	const [ currentView, setCurrentView ] = useState< View >( VIEW_LIST );
 	const [ editId, setEditId ] = useState< string >( '' );
-	const { open: openStandaloneVariablesPanel } = usePanelActions();
 	const onSettingsAvailable = isExperimentActive( 'e_variables_manager' )
 		? () => {
-				if ( isExperimentActive( 'e_editor_design_system_panel' ) ) {
-					window.dispatchEvent(
-						new CustomEvent( 'elementor/toggle-design-system', { detail: { tab: 'variables' as const } } )
-					);
-				} else {
-					openStandaloneVariablesPanel();
-				}
+				window.dispatchEvent(
+					new CustomEvent( 'elementor/toggle-design-system', { detail: { tab: 'variables' as const } } )
+				);
 		  }
 		: undefined;
 

package/src/components/variables-manager/hooks/use-variables-manager-state.ts

@@ -33,8 +33,24 @@ export const useVariablesManagerState = () => {
 
 	const handleOnChange = useCallback(
 		( newVariables: TVariablesList ) => {
-			setVariables( { ...variables, ...newVariables } );
-			setIsDirty( true );
+			const hasChanges = Object.entries( newVariables ).some( ( [ id, newVar ] ) => {
+				const existingVar = variables[ id ];
+				if ( ! existingVar ) {
+					return true;
+				}
+				return (
+					existingVar.label !== newVar.label ||
+					existingVar.value !== newVar.value ||
+					existingVar.order !== newVar.order ||
+					existingVar.type !== newVar.type ||
+					( existingVar.sync_to_v3 ?? false ) !== ( newVar.sync_to_v3 ?? false )
+				);
+			} );
+
+			if ( hasChanges ) {
+				setVariables( { ...variables, ...newVariables } );
+				setIsDirty( true );
+			}
 		},
 		[ variables ]
 	);

package/src/components/variables-manager/ui/variable-table-row.tsx

@@ -162,7 +162,7 @@ export const VariableRow = (
 							value,
 							onChange,
 							onPropTypeKeyChange: ( type ) => {
-								if ( ! isDisabled ) {
+								if ( ! isDisabled && type !== row.type ) {
 									handleOnChange( {
 										...variables,
 										[ row.id ]: { ...variables[ row.id ], type },

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

@@ -1,29 +1,10 @@
 import * as React from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useSuppressedMessage } from '@elementor/editor-current-user';
-import {
-	__createPanel as createPanel,
-	Panel,
-	PanelBody,
-	PanelFooter,
-	PanelHeader,
-	PanelHeaderTitle,
-} from '@elementor/editor-panels';
-import { ConfirmationDialog, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from '@elementor/editor-ui';
-import { changeEditMode } from '@elementor/editor-v1-adapters';
+import { PanelBody, PanelFooter } from '@elementor/editor-panels';
+import { ConfirmationDialog, SaveChangesDialog, SearchField, useDialog } from '@elementor/editor-ui';
 import { AlertTriangleFilledIcon, ColorFilterIcon, CopyIcon, TrashIcon } from '@elementor/icons';
-import {
-	Alert,
-	AlertAction,
-	AlertTitle,
-	Box,
-	Button,
-	CloseButton,
-	Divider,
-	Infotip,
-	Stack,
-	usePopupState,
-} from '@elementor/ui';
+import { Alert, AlertAction, AlertTitle, Box, Button, Divider, Infotip, Stack, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { trackVariablesManagerEvent, trackVariableSyncToV3 } from '../../utils/tracking';
@@ -35,10 +16,9 @@ import { NoSearchResults } from '../ui/no-search-results';
 import { useAutoEdit } from './hooks/use-auto-edit';
 import { useErrorNavigation } from './hooks/use-error-navigation';
 import { useVariablesManagerState } from './hooks/use-variables-manager-state';
-import { SIZE, VariableManagerCreateMenu } from './variables-manager-create-menu';
+import { VariableManagerCreateMenu } from './variables-manager-create-menu';
 import { VariablesManagerTable } from './variables-manager-table';
 
-const id = 'variables-manager';
 const STOP_SYNC_MESSAGE_KEY = 'stop-sync-variable';
 
 type StopSyncConfirmationDialogProps = {
@@ -47,67 +27,26 @@ type StopSyncConfirmationDialogProps = {
 	onConfirm: () => void;
 };
 
-export const { panel, usePanelActions } = createPanel( {
-	id,
-	component: VariablesManagerPanel,
-	allowedEditModes: [ 'edit', id ],
-	onOpen: () => {
-		changeEditMode( id );
-	},
-	onClose: async () => {
-		changeEditMode( 'edit' );
-	},
-	isOpenPreviousElement: true,
-} );
-
 export type VariablesManagerPanelEmbeddedProps = {
 	onRequestClose: () => void | Promise< void >;
-	/**
-	 * Registers the variables manager close handler (dirty check + save dialog) so parent panel chrome
-	 * can invoke the same flow as the standalone panel close control.
-	 */
 	onExposeCloseAttempt?: ( attemptClose: ( () => void ) | null ) => void;
 };
 
-/**
- * Variables UI without standalone panel chrome — use inside Design System panel when experiment is active.
- * @param root0
- * @param root0.onRequestClose
- * @param root0.onExposeCloseAttempt
- */
 export function VariablesManagerPanelEmbedded( {
 	onRequestClose,
 	onExposeCloseAttempt,
 }: VariablesManagerPanelEmbeddedProps ) {
 	return (
-		<VariablesManagerPanelRoot
-			embedded
-			onRequestClose={ onRequestClose }
-			onExposeCloseAttempt={ onExposeCloseAttempt }
-		/>
+		<VariablesManagerPanelContent onRequestClose={ onRequestClose } onExposeCloseAttempt={ onExposeCloseAttempt } />
 	);
 }
 
-export function VariablesManagerPanel() {
-	return <VariablesManagerPanelRoot />;
-}
-
-type VariablesManagerPanelRootProps = {
-	embedded?: boolean;
-	onRequestClose?: () => void | Promise< void >;
+type VariablesManagerPanelContentProps = {
+	onRequestClose: () => void | Promise< void >;
 	onExposeCloseAttempt?: ( attemptClose: ( () => void ) | null ) => void;
 };
 
-function VariablesManagerPanelRoot( {
-	embedded = false,
-	onRequestClose,
-	onExposeCloseAttempt,
-}: VariablesManagerPanelRootProps = {} ) {
-	const { close: closeStandalonePanel } = usePanelActions();
-	const closePanel = useMemo(
-		() => ( embedded ? onRequestClose ?? ( async () => {} ) : closeStandalonePanel ),
-		[ embedded, onRequestClose, closeStandalonePanel ]
-	);
+function VariablesManagerPanelContent( { onRequestClose, onExposeCloseAttempt }: VariablesManagerPanelContentProps ) {
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 	const [ isStopSyncSuppressed ] = useSuppressedMessage( STOP_SYNC_MESSAGE_KEY );
 
@@ -148,18 +87,18 @@ function VariablesManagerPanelRoot( {
 			return;
 		}
 
-		void closePanel();
-	}, [ isDirty, openSaveChangesDialog, closePanel ] );
+		void onRequestClose();
+	}, [ isDirty, openSaveChangesDialog, onRequestClose ] );
 
 	useEffect( () => {
-		if ( ! embedded || ! onExposeCloseAttempt ) {
+		if ( ! onExposeCloseAttempt ) {
 			return;
 		}
 
 		onExposeCloseAttempt( () => handleClosePanel() );
 
 		return () => onExposeCloseAttempt( null );
-	}, [ embedded, onExposeCloseAttempt, handleClosePanel ] );
+	}, [ onExposeCloseAttempt, handleClosePanel ] );
 
 	const handleCreateVariable = useCallback(
 		( type: string, defaultName: string, defaultValue: string ) => {
@@ -296,127 +235,154 @@ function VariablesManagerPanelRoot( {
 
 	const hasVariables = Object.keys( variables ).length > 0;
 
-	const variablesSearchFieldSx = embedded
-		? {
-				flex: 1,
-				minWidth: 0,
-				px: 0,
-				py: 0,
-				display: 'flex',
-				alignItems: 'center',
-				alignSelf: 'stretch',
-		  }
-		: {
-				display: 'flex',
-				flex: 1,
-		  };
-
-	const searchField = (
-		<SearchField
-			placeholder={ __( 'Search', 'elementor' ) }
-			value={ searchValue }
-			onSearch={ handleSearch }
-			sx={ variablesSearchFieldSx }
-		/>
-	);
-
-	const bodyInner = (
+	return (
 		<>
-			{ hasVariables && (
-				<VariablesManagerTable
-					menuActions={ buildMenuActions }
-					variables={ variables }
-					onChange={ handleOnChange }
-					autoEditVariableId={ autoEditVariableId }
-					onAutoEditComplete={ handleAutoEditComplete }
-					onFieldError={ setIsSaveDisabled }
-				/>
-			) }
-
-			{ ! hasVariables && searchValue && (
-				<NoSearchResults
-					searchValue={ searchValue }
-					onClear={ () => handleSearch( '' ) }
-					icon={ <ColorFilterIcon fontSize="large" /> }
-				/>
-			) }
-
-			{ ! hasVariables && ! searchValue && (
-				<EmptyState
-					title={ __( 'Create your first variable', 'elementor' ) }
-					message={ __(
-						'Variables are saved attributes that you can apply anywhere on your site.',
-						'elementor'
-					) }
-					icon={ <ColorFilterIcon fontSize="large" /> }
-					onAdd={ createMenuState.open }
-				/>
-			) }
-		</>
-	);
-
-	const saveFooter = (
-		<PanelFooter>
-			<Infotip
-				placement="right"
-				open={ !! serverError }
-				content={
-					serverError ? (
-						<Alert
-							severity={ serverError.severity ?? 'error' }
-							action={
-								serverError.action?.label ? (
-									<AlertAction onClick={ serverError.action.callback }>
-										{ serverError.action.label }
-									</AlertAction>
-								) : undefined
-							}
-							onClose={
-								! serverError.action?.label
-									? () => {
-											setServerError( null );
-											setIsSaveDisabled( false );
-									  }
-									: undefined
-							}
-							icon={
-								serverError.IconComponent ? <serverError.IconComponent /> : <AlertTriangleFilledIcon />
-							}
-						>
-							<AlertTitle>{ serverError.message }</AlertTitle>
-							{ serverError.action?.message }
-						</Alert>
-					) : null
-				}
-				arrow={ false }
-				slotProps={ {
-					popper: {
-						modifiers: [
-							{
-								name: 'offset',
-								options: { offset: [ -10, 10 ] },
-							},
-						],
-					},
+			<Stack
+				direction="column"
+				sx={ {
+					height: '100%',
+					width: '100%',
+					flex: 1,
+					minHeight: 0,
+					overflow: 'hidden',
 				} }
 			>
-				<Button
-					fullWidth
-					size="small"
-					color="global"
-					variant="contained"
-					disabled={ isSaveDisabled || ! isDirty || isSaving }
-					onClick={ handleSaveClick }
-					loading={ isSaving }
+				<Stack
+					direction="row"
+					alignItems="center"
+					spacing={ 1 }
+					width="100%"
+					sx={ {
+						flexShrink: 0,
+						px: 2,
+						pb: 1,
+					} }
 				>
-					{ __( 'Save changes', 'elementor' ) }
-				</Button>
-			</Infotip>
-		</PanelFooter>
-	);
+					<SearchField
+						placeholder={ __( 'Search', 'elementor' ) }
+						value={ searchValue }
+						onSearch={ handleSearch }
+						sx={ {
+							flex: 1,
+							minWidth: 0,
+							px: 0,
+							py: 0,
+							display: 'flex',
+							alignItems: 'center',
+							alignSelf: 'stretch',
+						} }
+					/>
+					<Box sx={ { display: 'flex', flexShrink: 0, alignItems: 'center' } }>
+						<VariableManagerCreateMenu
+							outlinedTrigger
+							onCreate={ handleCreateVariable }
+							variables={ variables }
+							menuState={ createMenuState }
+						/>
+					</Box>
+				</Stack>
+				<Divider sx={ { width: '100%' } } />
+				<PanelBody
+					sx={ {
+						display: 'flex',
+						flexDirection: 'column',
+						flex: 1,
+						minHeight: 0,
+					} }
+				>
+					{ hasVariables && (
+						<VariablesManagerTable
+							menuActions={ buildMenuActions }
+							variables={ variables }
+							onChange={ handleOnChange }
+							autoEditVariableId={ autoEditVariableId }
+							onAutoEditComplete={ handleAutoEditComplete }
+							onFieldError={ setIsSaveDisabled }
+						/>
+					) }
 
-	const dialogs = (
-		<>
+					{ ! hasVariables && searchValue && (
+						<NoSearchResults
+							searchValue={ searchValue }
+							onClear={ () => handleSearch( '' ) }
+							icon={ <ColorFilterIcon fontSize="large" /> }
+						/>
+					) }
+
+					{ ! hasVariables && ! searchValue && (
+						<EmptyState
+							title={ __( 'Create your first variable', 'elementor' ) }
+							message={ __(
+								'Variables are saved attributes that you can apply anywhere on your site.',
+								'elementor'
+							) }
+							icon={ <ColorFilterIcon fontSize="large" /> }
+							onAdd={ createMenuState.open }
+						/>
+					) }
+				</PanelBody>
+				<PanelFooter>
+					<Infotip
+						placement="right"
+						open={ !! serverError }
+						content={
+							serverError ? (
+								<Alert
+									severity={ serverError.severity ?? 'error' }
+									action={
+										serverError.action?.label ? (
+											<AlertAction onClick={ serverError.action.callback }>
+												{ serverError.action.label }
+											</AlertAction>
+										) : undefined
+									}
+									onClose={
+										! serverError.action?.label
+											? () => {
+													setServerError( null );
+													setIsSaveDisabled( false );
+											  }
+											: undefined
+									}
+									icon={
+										serverError.IconComponent ? (
+											<serverError.IconComponent />
+										) : (
+											<AlertTriangleFilledIcon />
+										)
+									}
+								>
+									<AlertTitle>{ serverError.message }</AlertTitle>
+									{ serverError.action?.message }
+								</Alert>
+							) : null
+						}
+						arrow={ false }
+						slotProps={ {
+							popper: {
+								modifiers: [
+									{
+										name: 'offset',
+										options: { offset: [ -10, 10 ] },
+									},
+								],
+							},
+						} }
+					>
+						<Button
+							fullWidth
+							size="small"
+							color="global"
+							variant="contained"
+							disabled={ isSaveDisabled || ! isDirty || isSaving }
+							onClick={ handleSaveClick }
+							loading={ isSaving }
+						>
+							{ __( 'Save changes', 'elementor' ) }
+						</Button>
+					</Infotip>
+				</PanelFooter>
+			</Stack>
 			{ deleteConfirmation && (
 				<DeleteConfirmationDialog
 					open
@@ -453,7 +419,7 @@ function VariablesManagerPanelRoot( {
 								label: __( 'Discard', 'elementor' ),
 								action: () => {
 									closeSaveChangesDialog();
-									void closePanel();
+									void onRequestClose();
 								},
 							},
 							confirm: {
@@ -462,7 +428,7 @@ function VariablesManagerPanelRoot( {
 									const result = await handleSaveClick();
 									closeSaveChangesDialog();
 									if ( result?.success ) {
-										void closePanel();
+										void onRequestClose();
 									}
 								},
 							},
@@ -472,109 +438,6 @@ function VariablesManagerPanelRoot( {
 			) }
 		</>
 	);
-
-	const panelChrome = embedded ? (
-		<Stack
-			direction="column"
-			sx={ {
-				height: '100%',
-				width: '100%',
-				flex: 1,
-				minHeight: 0,
-				overflow: 'hidden',
-			} }
-		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				spacing={ 1 }
-				width="100%"
-				sx={ {
-					flexShrink: 0,
-					px: 2,
-					pb: 1,
-				} }
-			>
-				{ searchField }
-				<Box sx={ { display: 'flex', flexShrink: 0, alignItems: 'center' } }>
-					<VariableManagerCreateMenu
-						outlinedTrigger
-						onCreate={ handleCreateVariable }
-						variables={ variables }
-						menuState={ createMenuState }
-					/>
-				</Box>
-			</Stack>
-			<Divider sx={ { width: '100%' } } />
-			<PanelBody
-				sx={ {
-					display: 'flex',
-					flexDirection: 'column',
-					flex: 1,
-					minHeight: 0,
-				} }
-			>
-				{ bodyInner }
-			</PanelBody>
-			{ saveFooter }
-		</Stack>
-	) : (
-		<Panel>
-			<PanelHeader
-				sx={ {
-					height: 'unset',
-				} }
-			>
-				<Stack width="100%" direction="column" alignItems="center">
-					<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
-						<Stack width="100%" direction="row" gap={ 1 }>
-							<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
-								<ColorFilterIcon fontSize="inherit" />
-								{ __( 'Variables Manager', 'elementor' ) }
-							</PanelHeaderTitle>
-						</Stack>
-						<Stack direction="row" gap={ 0.5 } alignItems="center">
-							<VariableManagerCreateMenu
-								onCreate={ handleCreateVariable }
-								variables={ variables }
-								menuState={ createMenuState }
-							/>
-							<CloseButton
-								aria-label="Close"
-								slotProps={ { icon: { fontSize: SIZE } } }
-								onClick={ () => {
-									handleClosePanel();
-								} }
-							/>
-						</Stack>
-					</Stack>
-					<Stack width="100%" direction="row" gap={ 1 }>
-						{ searchField }
-					</Stack>
-					<Divider sx={ { width: '100%' } } />
-				</Stack>
-			</PanelHeader>
-			<PanelBody
-				sx={ {
-					display: 'flex',
-					flexDirection: 'column',
-					height: '100%',
-				} }
-			>
-				{ bodyInner }
-			</PanelBody>
-			{ saveFooter }
-		</Panel>
-	);
-
-	const core = (
-		<>
-			{ panelChrome }
-			{ dialogs }
-		</>
-	);
-
-	return embedded ? core : <ThemeProvider>{ core }</ThemeProvider>;
 }
 
 const usePreventUnload = ( isDirty: boolean ) => {

package/src/init.ts

@@ -1,15 +1,10 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
 import { registerControlReplacement } from '@elementor/editor-controls';
 import { getMCPByDomain } from '@elementor/editor-mcp';
-import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { isTransformable, type PropValue } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { controlActionsMenu } from '@elementor/menus';
 
 import { GlobalStylesImportListener } from './components/global-styles-import-listener';
-import { OpenPanelFromEvent } from './components/open-panel-from-event';
-import { OpenPanelFromUrl } from './components/open-panel-from-url';
-import { panel } from './components/variables-manager/variables-manager-panel';
 import { VariableControl } from './controls/variable-control';
 import { usePropVariableAction } from './hooks/use-prop-variable-action';
 import { initMcp } from './mcp';
@@ -68,20 +63,6 @@ export function init() {
 		id: 'variables-import-listener',
 		component: GlobalStylesImportListener,
 	} );
-
-	if ( ! isExperimentActive( 'e_editor_design_system_panel' ) ) {
-		injectIntoLogic( {
-			id: 'variables-open-panel-from-url',
-			component: OpenPanelFromUrl,
-		} );
-
-		injectIntoLogic( {
-			id: 'variables-open-panel-from-event',
-			component: OpenPanelFromEvent,
-		} );
-
-		registerPanel( panel );
-	}
 }
 
 function hasVariableAssigned( value: PropValue ) {