@elementor/editor-variables 4.1.0-manual → 4.2.0-839

package/package.json

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

package/src/components/global-styles-import-listener.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { GLOBAL_STYLES_IMPORTED_EVENT } from '@elementor/editor-canvas';
 
 import { service } from '../service';
 import { styleVariablesRepository } from '../style-variables-repository';
@@ -19,13 +20,10 @@ export function GlobalStylesImportListener() {
 			service.load();
 		};
 
-		window.addEventListener( 'elementor/global-styles/imported', handleGlobalStylesImported as EventListener );
+		window.addEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
 
 		return () => {
-			window.removeEventListener(
-				'elementor/global-styles/imported',
-				handleGlobalStylesImported as EventListener
-			);
+			window.removeEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
 		};
 	}, [] );
 

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

@@ -28,10 +28,16 @@ type Props = {
 export const VariableSelectionPopover = ( { closePopover, propTypeKey, selectedVariable }: Props ) => {
 	const [ currentView, setCurrentView ] = useState< View >( VIEW_LIST );
 	const [ editId, setEditId ] = useState< string >( '' );
-	const { open } = usePanelActions();
+	const { open: openStandaloneVariablesPanel } = usePanelActions();
 	const onSettingsAvailable = isExperimentActive( 'e_variables_manager' )
 		? () => {
-				open();
+				if ( isExperimentActive( 'e_editor_design_system_panel' ) ) {
+					window.dispatchEvent(
+						new CustomEvent( 'elementor/toggle-design-system', { detail: { tab: 'variables' as const } } )
+					);
+				} else {
+					openStandaloneVariablesPanel();
+				}
 		  }
 		: undefined;
 
@@ -75,7 +81,7 @@ type Handlers = {
 
 function RenderView( props: ViewProps ): React.ReactNode {
 	const userPermissions = usePermissions();
-	const userQuotaPremissions = useQuotaPermissions( props.propTypeKey );
+	const userQuotaPermissions = useQuotaPermissions( props.propTypeKey );
 
 	const handlers: Handlers = {
 		onClose: () => {
@@ -121,7 +127,7 @@ function RenderView( props: ViewProps ): React.ReactNode {
 				onAdd={ handlers.onAdd }
 				onEdit={ handlers.onEdit }
 				onSettings={ handlers.onSettings }
-				disabled={ ! userQuotaPremissions.canAdd() }
+				disabled={ ! userQuotaPermissions.canAdd() }
 			/>
 		);
 	}

package/src/components/variables-manager/variables-manager-create-menu.tsx

@@ -32,9 +32,15 @@ type VariableManagerCreateMenuProps = {
 	onCreate: ( type: string, defaultName: string, defaultValue: string ) => void;
 	disabled?: boolean;
 	menuState: PopupState;
+	outlinedTrigger?: boolean;
 };
 
-export const VariableManagerCreateMenu = ( { variables, onCreate, menuState }: VariableManagerCreateMenuProps ) => {
+export const VariableManagerCreateMenu = ( {
+	variables,
+	onCreate,
+	menuState,
+	outlinedTrigger = false,
+}: VariableManagerCreateMenuProps ) => {
 	const buttonRef = useRef< HTMLButtonElement >( null );
 
 	const variableTypes = getVariableTypes();
@@ -59,6 +65,7 @@ export const VariableManagerCreateMenu = ( { variables, onCreate, menuState }: V
 				{ ...bindTrigger( menuState ) }
 				ref={ buttonRef }
 				size={ SIZE }
+				variant={ outlinedTrigger ? 'outlined' : undefined }
 				aria-label={ __( 'Add variable', 'elementor' ) }
 			>
 				<PlusIcon fontSize={ SIZE } />

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSuppressedMessage } from '@elementor/editor-current-user';
 import {
 	__createPanel as createPanel,
@@ -16,6 +16,7 @@ import {
 	Alert,
 	AlertAction,
 	AlertTitle,
+	Box,
 	Button,
 	CloseButton,
 	Divider,
@@ -59,8 +60,54 @@ export const { panel, usePanelActions } = createPanel( {
 	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 }
+		/>
+	);
+}
+
 export function VariablesManagerPanel() {
-	const { close: closePanel } = usePanelActions();
+	return <VariablesManagerPanelRoot />;
+}
+
+type VariablesManagerPanelRootProps = {
+	embedded?: boolean;
+	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 ]
+	);
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 	const [ isStopSyncSuppressed ] = useSuppressedMessage( STOP_SYNC_MESSAGE_KEY );
 
@@ -95,14 +142,24 @@ export function VariablesManagerPanel() {
 
 	usePreventUnload( isDirty );
 
-	const handleClosePanel = () => {
+	const handleClosePanel = useCallback( () => {
 		if ( isDirty ) {
 			openSaveChangesDialog();
 			return;
 		}
 
-		closePanel();
-	};
+		void closePanel();
+	}, [ isDirty, openSaveChangesDialog, closePanel ] );
+
+	useEffect( () => {
+		if ( ! embedded || ! onExposeCloseAttempt ) {
+			return;
+		}
+
+		onExposeCloseAttempt( () => handleClosePanel() );
+
+		return () => onExposeCloseAttempt( null );
+	}, [ embedded, onExposeCloseAttempt, handleClosePanel ] );
 
 	const handleCreateVariable = useCallback(
 		( type: string, defaultName: string, defaultValue: string ) => {
@@ -239,153 +296,127 @@ export function VariablesManagerPanel() {
 
 	const hasVariables = Object.keys( variables ).length > 0;
 
-	return (
-		<ThemeProvider>
-			<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
-								sx={ {
-									display: 'flex',
-									flex: 1,
-								} }
-								placeholder={ __( 'Search', 'elementor' ) }
-								value={ searchValue }
-								onSearch={ handleSearch }
-							/>
-						</Stack>
-						<Divider sx={ { width: '100%' } } />
-					</Stack>
-				</PanelHeader>
-				<PanelBody
-					sx={ {
-						display: 'flex',
-						flexDirection: 'column',
-						height: '100%',
-					} }
-				>
-					{ hasVariables && (
-						<VariablesManagerTable
-							menuActions={ buildMenuActions }
-							variables={ variables }
-							onChange={ handleOnChange }
-							autoEditVariableId={ autoEditVariableId }
-							onAutoEditComplete={ handleAutoEditComplete }
-							onFieldError={ setIsSaveDisabled }
-						/>
-					) }
+	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 }
+		/>
+	);
 
-					{ ! hasVariables && searchValue && (
-						<NoSearchResults
-							searchValue={ searchValue }
-							onClear={ () => handleSearch( '' ) }
-							icon={ <ColorFilterIcon fontSize="large" /> }
-						/>
-					) }
+	const bodyInner = (
+		<>
+			{ 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 }
-						/>
+			{ ! hasVariables && ! searchValue && (
+				<EmptyState
+					title={ __( 'Create your first variable', 'elementor' ) }
+					message={ __(
+						'Variables are saved attributes that you can apply anywhere on your site.',
+						'elementor'
 					) }
-				</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 }
+					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 />
+							}
 						>
-							{ __( 'Save changes', 'elementor' ) }
-						</Button>
-					</Infotip>
-				</PanelFooter>
-			</Panel>
+							<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>
+	);
 
+	const dialogs = (
+		<>
 			{ deleteConfirmation && (
 				<DeleteConfirmationDialog
 					open
@@ -422,7 +453,7 @@ export function VariablesManagerPanel() {
 								label: __( 'Discard', 'elementor' ),
 								action: () => {
 									closeSaveChangesDialog();
-									closePanel();
+									void closePanel();
 								},
 							},
 							confirm: {
@@ -431,7 +462,7 @@ export function VariablesManagerPanel() {
 									const result = await handleSaveClick();
 									closeSaveChangesDialog();
 									if ( result?.success ) {
-										closePanel();
+										void closePanel();
 									}
 								},
 							},
@@ -439,8 +470,112 @@ export function VariablesManagerPanel() {
 					/>
 				</SaveChangesDialog>
 			) }
-		</ThemeProvider>
+		</>
+	);
+
+	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,
+					overflow: 'hidden',
+				} }
+			>
+				{ 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/components/variables-repeater-item-slot.tsx

@@ -5,6 +5,7 @@ import {
 	cssFilterFunctionPropUtil,
 	dropShadowFilterPropTypeUtil,
 	type KeyValuePropValue,
+	moveTransformPropTypeUtil,
 	type PropValue,
 	selectionSizePropTypeUtil,
 	type SelectionSizePropValue,
@@ -115,6 +116,25 @@ export const BoxShadowRepeaterLabel = ( { value }: Props ) => {
 	);
 };
 
+export const TransformRepeaterLabel = ( { value }: Props ) => {
+	const labels: string[] = [];
+
+	if ( moveTransformPropTypeUtil.isValid( value ) ) {
+		labels.push( __( 'Move:', 'elementor' ) );
+
+		const { x, y, z } = moveTransformPropTypeUtil.extract( value ) || {};
+
+		for ( const val of [ x, y, z ] ) {
+			const rendered = sizeValue( val );
+			if ( rendered ) {
+				labels.push( rendered );
+			}
+		}
+	}
+
+	return <Box component="span">{ labels.join( ' ' ) }</Box>;
+};
+
 export const TransitionsSizeVariableLabel = ( { value: prop }: Props ) => {
 	let label = '';
 

package/src/index.ts

@@ -1,3 +1,7 @@
+export {
+	VariablesManagerPanelEmbedded,
+	type VariablesManagerPanelEmbeddedProps,
+} from './components/variables-manager/variables-manager-panel';
 export { init } from './init';
 export { GLOBAL_VARIABLES_URI } from './mcp/variables-resource';
 export { sizeVariablePropTypeUtil } from './prop-types/size-variable-prop-type';